diff --git a/.danger/__fixtures__/mock_package/package.json b/.danger/__fixtures__/mock_package/package.json index 1064d92be8..92bb2d1edb 100644 --- a/.danger/__fixtures__/mock_package/package.json +++ b/.danger/__fixtures__/mock_package/package.json @@ -11,8 +11,8 @@ "@twilio-paste/design-tokens": "^8.0.0", "@twilio-paste/styling-library": "^1.0.0", "@twilio-paste/types": "^3.1.1", - "react": "^16.8.6 || ^17.0.2", - "react-dom": "^16.8.6 || ^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/animation-library": "^0.3.7", @@ -20,8 +20,8 @@ "@twilio-paste/design-tokens": "^8.0.0", "@twilio-paste/styling-library": "^1.0.2", "@twilio-paste/types": "^3.1.8", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.0.0", + "react-dom": "^18.0.0", "react-helmet": "^6.1.0" } } diff --git a/.eslintrc.js b/.eslintrc.js index 1975547914..bfcc0b16b6 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -217,7 +217,7 @@ module.exports = { ], settings: { react: { - version: '17.0.2', + version: 'detect', }, }, }; diff --git a/.github/workflows/on_pull_request.yml b/.github/workflows/on_pull_request.yml index 2451c0ca83..f9d334193e 100644 --- a/.github/workflows/on_pull_request.yml +++ b/.github/workflows/on_pull_request.yml @@ -156,7 +156,7 @@ jobs: run: yarn lint tests: - name: Test repository using React 17 + name: Test repository using React 18 needs: build runs-on: ubuntu-latest steps: diff --git a/package.json b/package.json index 669d8b48b2..5030ec3629 100644 --- a/package.json +++ b/package.json @@ -122,32 +122,33 @@ "@netlify/functions": "^0.7.2", "@percy/cli": "^1.10.1", "@percy/cypress": "^3.1.2", - "@storybook/addon-a11y": "6.4.20", - "@storybook/addon-actions": "6.4.20", - "@storybook/addon-essentials": "6.4.20", - "@storybook/addon-interactions": "6.4.20", - "@storybook/addon-links": "6.4.20", - "@storybook/addon-viewport": "6.4.20", - "@storybook/addons": "6.4.20", - "@storybook/builder-webpack5": "6.4.20", - "@storybook/core": "6.4.20", + "@storybook/addon-a11y": "^6.5.12", + "@storybook/addon-actions": "^6.5.12", + "@storybook/addon-essentials": "^6.5.12", + "@storybook/addon-interactions": "^6.5.12", + "@storybook/addon-links": "^6.5.12", + "@storybook/addon-viewport": "^6.5.12", + "@storybook/addons": "^6.5.12", + "@storybook/builder-webpack5": "^6.5.12", + "@storybook/core": "^6.5.12", "@storybook/jest": "0.0.10", - "@storybook/manager-webpack5": "6.4.20", - "@storybook/react": "6.4.20", + "@storybook/manager-webpack5": "^6.5.12", + "@storybook/react": "^6.5.12", "@storybook/test-runner": "0.3.0", "@storybook/testing-library": "0.0.13", "@swc/core": "^1.2.160", "@swc/jest": "^0.2.20", - "@testing-library/jest-dom": "^5.16.2", - "@testing-library/react": "^12.1.4", - "@testing-library/react-hooks": "^7.0.2", - "@testing-library/user-event": "^13.5.0", + "@testing-library/jest-dom": "^5.16.5", + "@testing-library/react": "^13.4.0", + "@testing-library/react-hooks": "^8.0.1", + "@testing-library/user-event": "^14.4.3", "@twilio-labs/svg-to-react": "^2.1.1", "@types/browser-sync": "^2.26.1", "@types/color": "^3.0.0", "@types/jest": "^24.0.18", "@types/node": "^17.0.33", - "@types/react": "^17.0.31", + "@types/prop-types": "^15.7.5", + "@types/react": "^18.0.0", "@types/react-color": "^3.0.6", "@types/react-github-button": "^0.1.1", "@types/react-helmet": "^5.0.14", @@ -210,8 +211,8 @@ "prettier": "^2.2.1", "prop-types": "^15.7.2", "puppeteer-core": "^10.1.0", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.0.0", + "react-dom": "^18.0.0", "react-ga": "^3.3.0", "react-helmet": "^6.1.0", "react-router-dom": "6.2.1", diff --git a/packages/paste-core/components/alert-dialog/package.json b/packages/paste-core/components/alert-dialog/package.json index dc96e4a703..28ae64adb9 100644 --- a/packages/paste-core/components/alert-dialog/package.json +++ b/packages/paste-core/components/alert-dialog/package.json @@ -37,8 +37,8 @@ "@twilio-paste/types": "^3.1.1", "@twilio-paste/uid-library": "^0.2.1", "prop-types": "^15.7.2", - "react": "^16.8.6 || ^17.0.2", - "react-dom": "^16.8.6 || ^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/animation-library": "^0.3.9", @@ -53,7 +53,7 @@ "@twilio-paste/types": "^3.1.9", "@twilio-paste/uid-library": "^0.2.6", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/packages/paste-core/components/alert-dialog/stories/index.stories.tsx b/packages/paste-core/components/alert-dialog/stories/index.stories.tsx index 0a2dcdcfc0..be2fe5a6e2 100644 --- a/packages/paste-core/components/alert-dialog/stories/index.stories.tsx +++ b/packages/paste-core/components/alert-dialog/stories/index.stories.tsx @@ -51,7 +51,7 @@ AlertDialogWithTwoActionsStory.story = { }, }; -export const DestructiveAlertDialog: React.FC = () => { +export const DestructiveAlertDialog = (): JSX.Element => { return ( { +export const OpenAlertDialogFromButton = (): JSX.Element => { const [isOpen, setIsOpen] = React.useState(false); const handleOpen = (): void => setIsOpen(true); const handleClose = (): void => setIsOpen(false); @@ -113,7 +113,7 @@ OpenAlertDialogFromButtonStory.story = { }, }; -export const OpenAlertDialogFromModal: React.FC = () => { +export const OpenAlertDialogFromModal = (): JSX.Element => { const [isModalOpen, setIsModalOpen] = React.useState(true); const [isAlertDialogOpen, setIsAlertDialogOpen] = React.useState(true); const handleModalOpen = (): void => setIsModalOpen(true); @@ -217,7 +217,7 @@ DestructiveAlertDialogVRT.story = { name: 'Destructive Alert Dialog for VRT', }; -export const CustomizedAlertDialog: React.FC = () => { +export const CustomizedAlertDialog = (): JSX.Element => { const theme = useTheme(); return ( { ); }; -export const CustomizedDestructiveAlertDialog: React.FC = () => { +export const CustomizedDestructiveAlertDialog = (): JSX.Element => { const currentTheme = useTheme(); return ( = ({name, size = DEFAULT_SIZE, src, icon: Icon}) => { +const AvatarContents: React.FC> = ({ + name, + size = DEFAULT_SIZE, + src, + icon: Icon, +}) => { const computedTokenNames = getComputedTokenNames(size); if (src != null) { return ; diff --git a/packages/paste-core/components/avatar/src/types.ts b/packages/paste-core/components/avatar/src/types.ts index 60f1cded82..d165953709 100644 --- a/packages/paste-core/components/avatar/src/types.ts +++ b/packages/paste-core/components/avatar/src/types.ts @@ -9,7 +9,7 @@ export type AvatarProps = React.HTMLAttributes<'div'> & Pick & { name: string; size?: IconSize; - icon?: React.FC; + icon?: React.FC>; src?: string; color?: ColorVariants; variant?: AvatarVariants; @@ -18,6 +18,6 @@ export type AvatarProps = React.HTMLAttributes<'div'> & export type AvatarContentProps = { name: string; size?: IconSize; - icon?: React.FC; + icon?: React.FC>; src?: string; }; diff --git a/packages/paste-core/components/badge/package.json b/packages/paste-core/components/badge/package.json index 1b2afc3c94..fa3d3fb46d 100644 --- a/packages/paste-core/components/badge/package.json +++ b/packages/paste-core/components/badge/package.json @@ -38,8 +38,8 @@ "@twilio-paste/types": "^3.1.1", "@twilio-paste/uid-library": "^0.2.1", "prop-types": "^15.7.2", - "react": "^16.8.6 || ^17.0.2", - "react-dom": "^16.8.6 || ^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/anchor": "^9.0.1", @@ -55,7 +55,7 @@ "@twilio-paste/types": "^3.1.9", "@twilio-paste/uid-library": "^0.2.6", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/packages/paste-core/components/badge/src/index.tsx b/packages/paste-core/components/badge/src/index.tsx index fe08933cca..bd4ebfa4e7 100644 --- a/packages/paste-core/components/badge/src/index.tsx +++ b/packages/paste-core/components/badge/src/index.tsx @@ -8,8 +8,6 @@ import type {BadgeProps, BadgeVariants} from './types'; import {useResizeChildIcons} from './hooks'; import {badgeVariantStyles, getBadgeAnchorStyles, getBadgeButtonStyles} from './styles'; -export type {BadgeProps}; - const handlePropValidation = ({as, href, onClick}: Partial): void => { if (as === 'a') { if (href === null || href === undefined) @@ -95,8 +93,9 @@ Badge.propTypes = { 'default', 'info', ] as BadgeVariants[]).isRequired, - // @ts-expect-error type unions are a little too much for prop types inferred types to handle as: PropTypes.oneOf(['span', 'button', 'a']).isRequired, href: PropTypes.string, onClick: PropTypes.func, }; + +export type {BadgeProps} from './types'; diff --git a/packages/paste-core/components/badge/stories/customization.stories.tsx b/packages/paste-core/components/badge/stories/customization.stories.tsx index 2b00ae65f2..e17af12662 100644 --- a/packages/paste-core/components/badge/stories/customization.stories.tsx +++ b/packages/paste-core/components/badge/stories/customization.stories.tsx @@ -37,7 +37,7 @@ export const getStyles = (element = 'BADGE'): {[key: string]: PasteCustomCSS} => }; }; -const CustomizationWrapper: React.FC<{variant: BadgeVariants; isTestEnvironment: boolean}> = ({ +const CustomizationWrapper: React.FC> = ({ variant, isTestEnvironment, }): React.ReactElement => { diff --git a/packages/paste-core/components/badge/stories/index.stories.tsx b/packages/paste-core/components/badge/stories/index.stories.tsx index a08b246984..d6e4ee99af 100644 --- a/packages/paste-core/components/badge/stories/index.stories.tsx +++ b/packages/paste-core/components/badge/stories/index.stories.tsx @@ -26,7 +26,7 @@ const Wrapper = styled.div( }) ); -export const AllBadges: React.FC = () => ( +export const AllBadges = (): JSX.Element => ( Neutral @@ -64,7 +64,7 @@ export const AllBadges: React.FC = () => ( ); -export const NeutralBadge: React.FC = () => ( +export const NeutralBadge = (): JSX.Element => ( <> Span @@ -121,7 +121,7 @@ export const NeutralBadge: React.FC = () => ( ); -export const WarningBadge: React.FC = () => ( +export const WarningBadge = (): JSX.Element => ( <> Span @@ -174,7 +174,7 @@ export const WarningBadge: React.FC = () => ( ); -export const ErrorBadge: React.FC = () => ( +export const ErrorBadge = (): JSX.Element => ( <> Span @@ -227,7 +227,7 @@ export const ErrorBadge: React.FC = () => ( ); -export const SuccessBadge: React.FC = () => ( +export const SuccessBadge = (): JSX.Element => ( <> Span @@ -284,7 +284,7 @@ export const SuccessBadge: React.FC = () => ( ); -export const NewBadge: React.FC = () => ( +export const NewBadge = (): JSX.Element => ( <> Span @@ -337,7 +337,7 @@ export const NewBadge: React.FC = () => ( ); -export const Decorative10Badge: React.FC = () => ( +export const Decorative10Badge = (): JSX.Element => ( <> Span @@ -390,7 +390,7 @@ export const Decorative10Badge: React.FC = () => ( ); -export const Decorative20Badge: React.FC = () => ( +export const Decorative20Badge = (): JSX.Element => ( <> Span @@ -443,7 +443,7 @@ export const Decorative20Badge: React.FC = () => ( ); -export const Decorative30Badge: React.FC = () => ( +export const Decorative30Badge = (): JSX.Element => ( <> Span @@ -496,7 +496,7 @@ export const Decorative30Badge: React.FC = () => ( ); -export const Decorative40Badge: React.FC = () => ( +export const Decorative40Badge = (): JSX.Element => ( <> Span @@ -549,7 +549,7 @@ export const Decorative40Badge: React.FC = () => ( ); -export const NeutralCounterBadge: React.FC = () => ( +export const NeutralCounterBadge = (): JSX.Element => ( <> Span @@ -596,7 +596,7 @@ export const NeutralCounterBadge: React.FC = () => ( ); -export const ErrorCounterBadge: React.FC = () => ( +export const ErrorCounterBadge = (): JSX.Element => ( <> Span @@ -643,7 +643,7 @@ export const ErrorCounterBadge: React.FC = () => ( ); -export const DefaultBadge: React.FC = () => ( +export const DefaultBadge = (): JSX.Element => ( <> Span @@ -690,7 +690,7 @@ export const DefaultBadge: React.FC = () => ( ); -export const InfoBadge: React.FC = () => ( +export const InfoBadge = (): JSX.Element => ( <> Span @@ -737,7 +737,7 @@ export const InfoBadge: React.FC = () => ( ); -export const LongTextBadge: React.FC = () => ( +export const LongTextBadge = (): JSX.Element => ( diff --git a/packages/paste-core/components/base-radio-checkbox/package.json b/packages/paste-core/components/base-radio-checkbox/package.json index 59d13f1c34..6a55f5dfe3 100644 --- a/packages/paste-core/components/base-radio-checkbox/package.json +++ b/packages/paste-core/components/base-radio-checkbox/package.json @@ -40,8 +40,8 @@ "@twilio-paste/types": "^3.1.1", "@twilio-paste/uid-library": "^0.2.1", "prop-types": "^15.7.2", - "react": "^16.8.6 || ^17.0.2", - "react-dom": "^16.8.6 || ^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/box": "^7.1.1", @@ -59,7 +59,7 @@ "@twilio-paste/types": "^3.1.9", "@twilio-paste/uid-library": "^0.2.6", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/packages/paste-core/components/breadcrumb/__tests__/breadcrumb.spec.tsx b/packages/paste-core/components/breadcrumb/__tests__/breadcrumb.spec.tsx index 0ef591fcf2..0e2255deeb 100644 --- a/packages/paste-core/components/breadcrumb/__tests__/breadcrumb.spec.tsx +++ b/packages/paste-core/components/breadcrumb/__tests__/breadcrumb.spec.tsx @@ -5,7 +5,7 @@ import {CustomizationProvider} from '@twilio-paste/customization'; import {Breadcrumb, BreadcrumbItem} from '../src'; describe('Breadcrumb', () => { - const BreadcrumbExample: React.FC = () => { + const BreadcrumbExample = (): JSX.Element => { return ( foo diff --git a/packages/paste-core/components/breadcrumb/package.json b/packages/paste-core/components/breadcrumb/package.json index a54057a4b0..08a8c250b5 100644 --- a/packages/paste-core/components/breadcrumb/package.json +++ b/packages/paste-core/components/breadcrumb/package.json @@ -35,8 +35,8 @@ "@twilio-paste/types": "^3.1.1", "@twilio-paste/uid-library": "^0.2.1", "prop-types": "^15.7.2", - "react": "^16.8.6 || ^17.0.2", - "react-dom": "^16.8.6 || ^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/anchor": "^9.0.1", @@ -49,7 +49,7 @@ "@twilio-paste/types": "^3.1.9", "@twilio-paste/uid-library": "^0.2.6", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/packages/paste-core/components/breadcrumb/src/index.tsx b/packages/paste-core/components/breadcrumb/src/index.tsx index 0fce606aa1..c12d686361 100644 --- a/packages/paste-core/components/breadcrumb/src/index.tsx +++ b/packages/paste-core/components/breadcrumb/src/index.tsx @@ -7,7 +7,7 @@ import type {AnchorProps} from '@twilio-paste/anchor'; import {Text, safelySpreadTextProps} from '@twilio-paste/text'; import {useUIDSeed} from '@twilio-paste/uid-library'; -const BreadcrumbSeparator: React.FC<{element: BoxElementProps['element']}> = ({element}) => ( +const BreadcrumbSeparator: React.FC> = ({element}) => ( = ({buttonState, children, showLoading, variant}) => { +const ButtonContents: React.FC> = ({ + buttonState, + children, + showLoading, + variant, +}) => { const buttonVariantHasBoundingBox = variant && variantsWithoutBoundingBox.has(variant); return ( @@ -168,7 +173,9 @@ const ButtonContents: React.FC = ({buttonState, children, s ButtonContents.displayName = 'ButtonContents'; -const getButtonComponent = (variant: ButtonVariants): React.FunctionComponent => { +const getButtonComponent = ( + variant: ButtonVariants +): React.FunctionComponent> => { switch (variant) { case 'primary_icon': return PrimaryIconButton; diff --git a/packages/paste-core/components/button/stories/customization.stories.tsx b/packages/paste-core/components/button/stories/customization.stories.tsx index b895e1c822..4a52c162ac 100644 --- a/packages/paste-core/components/button/stories/customization.stories.tsx +++ b/packages/paste-core/components/button/stories/customization.stories.tsx @@ -32,11 +32,12 @@ const customButtonStyles = { }, } as PasteCustomCSS; -const ShowCustomization: React.FC<{ - button: React.ReactNode; - customButton: React.ReactNode; +const ShowCustomization: React.FC< +React.PropsWithChildren<{ + button: React.ReactNode; + customButton: React.ReactNode; isTestEnvironment: boolean; -}> = ({button, customButton, isTestEnvironment}) => { +}>> = ({button, customButton, isTestEnvironment}) => { const currentTheme = useTheme(); return ( @@ -72,10 +73,9 @@ const ShowCustomization: React.FC<{ ); }; -export const AnyButton: React.FC<{element?: BoxElementProps['element']; variant: ButtonVariants}> = ({ - element = 'BUTTON', - variant, -}) => ( +export const AnyButton: React.FC< + React.PropsWithChildren<{element?: BoxElementProps['element']; variant: ButtonVariants}> +> = ({element = 'BUTTON', variant}) => ( diff --git a/packages/paste-core/components/button/stories/index.stories.tsx b/packages/paste-core/components/button/stories/index.stories.tsx index 6e49854fb2..64fc275784 100644 --- a/packages/paste-core/components/button/stories/index.stories.tsx +++ b/packages/paste-core/components/button/stories/index.stories.tsx @@ -25,7 +25,7 @@ const ButtonSizeOptions = [ 'circle_small', ]; -const AllSizeOptions: React.FC<{variant: ButtonVariants}> = ({variant}) => { +const AllSizeOptions: React.FC> = ({variant}) => { const allButtons: React.ReactNode[] = []; ButtonSizeOptions.forEach((size) => { @@ -197,7 +197,7 @@ export const ButtonAsAnchor = (): React.ReactNode => { ); }; -const IconSizeOptions: React.FC<{variant: ButtonVariants}> = ({variant}) => { +const IconSizeOptions: React.FC> = ({variant}) => { return ( @@ -267,7 +267,7 @@ interface ToggleButtonProps { }; } -const ToggleButton: React.FC = ({ +const ToggleButton: React.FC> = ({ defaultPressed = false, variant = 'secondary', children, diff --git a/packages/paste-core/components/callout/__tests__/customization.spec.tsx b/packages/paste-core/components/callout/__tests__/customization.spec.tsx index 8650cba5c2..04d1ff27e0 100644 --- a/packages/paste-core/components/callout/__tests__/customization.spec.tsx +++ b/packages/paste-core/components/callout/__tests__/customization.spec.tsx @@ -4,7 +4,7 @@ import {CustomizationProvider} from '@twilio-paste/customization'; import {Callout, CalloutHeading, CalloutList, CalloutListItem, CalloutText} from '../src'; -const CustomizationWrapper: React.FC = ({children}) => ( +const CustomizationWrapper: React.FC = ({children}) => ( ( ); -const MyCustomizationWrapper: React.FC = ({children}) => ( +const MyCustomizationWrapper: React.FC = ({children}) => ( = { }, }; -const variantIcons: Record> = { +const variantIcons: Record>> = { success: SuccessIcon, error: ErrorIcon, warning: WarningIcon, diff --git a/packages/paste-core/components/callout/stories/index.stories.tsx b/packages/paste-core/components/callout/stories/index.stories.tsx index 16c2b76346..7b2b770574 100644 --- a/packages/paste-core/components/callout/stories/index.stories.tsx +++ b/packages/paste-core/components/callout/stories/index.stories.tsx @@ -10,7 +10,7 @@ export default { component: Callout, }; -const ExampleList: React.FC<{as: 'ul' | 'ol'}> = ({as}) => ( +const ExampleList: React.FC> = ({as}) => ( Item one Item two diff --git a/packages/paste-core/components/card/package.json b/packages/paste-core/components/card/package.json index 5280ff92ee..47fda3923e 100644 --- a/packages/paste-core/components/card/package.json +++ b/packages/paste-core/components/card/package.json @@ -32,8 +32,8 @@ "@twilio-paste/theme": "^8.0.0", "@twilio-paste/types": "^3.1.1", "prop-types": "^15.7.2", - "react": "^16.8.6 || ^17.0.2", - "react-dom": "^16.8.6 || ^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/box": "^7.1.1", @@ -43,7 +43,7 @@ "@twilio-paste/theme": "^8.0.3", "@twilio-paste/types": "^3.1.9", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/packages/paste-core/components/chat-composer/package.json b/packages/paste-core/components/chat-composer/package.json index 5e02bd4465..b42d80e9b3 100644 --- a/packages/paste-core/components/chat-composer/package.json +++ b/packages/paste-core/components/chat-composer/package.json @@ -38,8 +38,8 @@ "@twilio-paste/theme": "^8.0.0", "@twilio-paste/types": "^3.1.1", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^17.0.2 || ^18.0.0", + "react-dom": "^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/animation-library": "^0.3.2", @@ -52,8 +52,8 @@ "@twilio-paste/theme": "^8.0.0", "@twilio-paste/types": "^3.1.1", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.0.0", + "react-dom": "^18.0.0", "typescript": "^4.6.4" } } diff --git a/packages/paste-core/components/chat-log/__tests__/ChatAttachment.spec.tsx b/packages/paste-core/components/chat-log/__tests__/ChatAttachment.spec.tsx index 173bb3a0cd..9a016fd085 100644 --- a/packages/paste-core/components/chat-log/__tests__/ChatAttachment.spec.tsx +++ b/packages/paste-core/components/chat-log/__tests__/ChatAttachment.spec.tsx @@ -50,13 +50,16 @@ const customizedMyElements: {[key: string]: PasteCustomCSS} = { }, }; -const CustomizationWrapper: React.FC<{elements?: {[key: string]: PasteCustomCSS}}> = ({children, elements}) => ( +const CustomizationWrapper: React.FC> = ({ + children, + elements, +}) => ( {children} ); -const CustomizationMyWrapper: React.FC = ({children}) => ( +const CustomizationMyWrapper: React.FC = ({children}) => ( {children} ); diff --git a/packages/paste-core/components/chat-log/__tests__/ChatBookend.spec.tsx b/packages/paste-core/components/chat-log/__tests__/ChatBookend.spec.tsx index 865c434dd2..33934ecef8 100644 --- a/packages/paste-core/components/chat-log/__tests__/ChatBookend.spec.tsx +++ b/packages/paste-core/components/chat-log/__tests__/ChatBookend.spec.tsx @@ -4,7 +4,7 @@ import {CustomizationProvider} from '@twilio-paste/customization'; import {ChatBookend, ChatBookendItem} from '../src'; -const CustomizationWrapper: React.FC = ({children}) => ( +const CustomizationWrapper: React.FC = ({children}) => ( ( ); -const MyCustomizationWrapper: React.FC = ({children}) => ( +const MyCustomizationWrapper: React.FC = ({children}) => ( ( +const CustomizationWrapper: React.FC = ({children}) => ( ( ); -const CustomizationFooWrapper: React.FC = ({children}) => ( +const CustomizationFooWrapper: React.FC = ({children}) => ( ( +const CustomizationWrapper: React.FC = ({children}) => ( ( ); -const MyCustomizationWrapper: React.FC = ({children}) => ( +const MyCustomizationWrapper: React.FC = ({children}) => ( ( +const CustomizationWrapper: React.FC = ({children}) => ( ( ); -const CustomizationFooWrapper: React.FC = ({children}) => ( +const CustomizationFooWrapper: React.FC = ({children}) => ( ( +const CustomizationWrapper: React.FC = ({children}) => ( ( ); -const CustomizationFooWrapper: React.FC = ({children}) => ( +const CustomizationFooWrapper: React.FC = ({children}) => ( = ({children, elements}) => ( +const CustomizationWrapper: React.FC> = ({ + children, + elements, +}) => ( {children} ); -const CustomizationFooWrapper: React.FC = ({children}) => ( - +const CustomizationFooWrapper: React.FC = ({children}) => ( + {children} ); diff --git a/packages/paste-core/components/chat-log/package.json b/packages/paste-core/components/chat-log/package.json index f6f8a435c9..38dc6b6d13 100644 --- a/packages/paste-core/components/chat-log/package.json +++ b/packages/paste-core/components/chat-log/package.json @@ -39,8 +39,8 @@ "@twilio-paste/theme": "^8.0.0", "@twilio-paste/truncate": "^11.0.0", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^17.0.2 || ^18.0.0", + "react-dom": "^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/anchor": "^9.0.1", @@ -57,7 +57,7 @@ "@twilio-paste/theme": "^8.0.3", "@twilio-paste/truncate": "^11.0.1", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/packages/paste-core/components/chat-log/stories/components/ChatAttachment.stories.tsx b/packages/paste-core/components/chat-log/stories/components/ChatAttachment.stories.tsx index f7328ff451..53f7035884 100644 --- a/packages/paste-core/components/chat-log/stories/components/ChatAttachment.stories.tsx +++ b/packages/paste-core/components/chat-log/stories/components/ChatAttachment.stories.tsx @@ -45,7 +45,7 @@ export const OutboundChatMessageWithAttachment: Story = () => ( ); -const StateExampleComposerAttachmentCard: React.FC = () => { +const StateExampleComposerAttachmentCard = (): JSX.Element => { const [loading, setLoading] = React.useState(true); const attachmentIcon = loading ? ( diff --git a/packages/paste-core/components/checkbox/__tests__/checkbox.test.tsx b/packages/paste-core/components/checkbox/__tests__/checkbox.test.tsx index de59d1be55..8eb26c3119 100644 --- a/packages/paste-core/components/checkbox/__tests__/checkbox.test.tsx +++ b/packages/paste-core/components/checkbox/__tests__/checkbox.test.tsx @@ -262,7 +262,7 @@ describe('Checkbox event handlers', () => { }); it('Should check the checkbox when controlled', () => { - const MockCheckBox: React.FC = () => { + const MockCheckBox = (): JSX.Element => { const [checked, setChecked] = React.useState(false); return ( { }); it('Should check the checkbox when uncontrolled', () => { - const MockCheckBox: React.FC = () => { + const MockCheckBox = (): JSX.Element => { return ( foo diff --git a/packages/paste-core/components/checkbox/package.json b/packages/paste-core/components/checkbox/package.json index 563501e035..2ccc425f65 100644 --- a/packages/paste-core/components/checkbox/package.json +++ b/packages/paste-core/components/checkbox/package.json @@ -42,8 +42,8 @@ "@twilio-paste/types": "^3.1.1", "@twilio-paste/uid-library": "^0.2.1", "prop-types": "^15.7.2", - "react": "^16.8.6 || ^17.0.2", - "react-dom": "^16.8.6 || ^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/base-radio-checkbox": "^10.0.1", @@ -63,7 +63,7 @@ "@twilio-paste/types": "^3.1.9", "@twilio-paste/uid-library": "^0.2.6", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/packages/paste-core/components/checkbox/src/Checkbox.tsx b/packages/paste-core/components/checkbox/src/Checkbox.tsx index e395554469..5ebcd1c149 100644 --- a/packages/paste-core/components/checkbox/src/Checkbox.tsx +++ b/packages/paste-core/components/checkbox/src/Checkbox.tsx @@ -82,11 +82,14 @@ const HiddenCheckbox = React.forwardRef(( HiddenCheckbox.displayName = 'HiddenCheckbox'; -const CheckboxIcon: React.FC<{ - indeterminate: boolean | undefined; - checked: boolean | undefined; - element: BoxProps['element']; -}> = ({checked, element, indeterminate}) => { +const CheckboxIcon: React.FC< + React.PropsWithChildren<{ + indeterminate: boolean | undefined; + disabled: boolean | undefined; + checked: boolean | undefined; + element: BoxProps['element']; + }> +> = ({checked, element, indeterminate}) => { if (indeterminate) { return ; } diff --git a/packages/paste-core/components/code-block/__tests__/customization.spec.tsx b/packages/paste-core/components/code-block/__tests__/customization.spec.tsx index c8667ba81c..34036a90e2 100644 --- a/packages/paste-core/components/code-block/__tests__/customization.spec.tsx +++ b/packages/paste-core/components/code-block/__tests__/customization.spec.tsx @@ -6,7 +6,7 @@ import {CodeBlock, CodeBlockWrapper, CodeBlockHeader, CodeBlockTabList, CodeBloc const jsCode = `(num) => num + 1`; -const CustomizationWrapper: React.FC = ({children}) => ( +const CustomizationWrapper: React.FC = ({children}) => ( ( ); -const CustomizationMyWrapper: React.FC = ({children}) => ( +const CustomizationMyWrapper: React.FC = ({children}) => ( { }; }; -export const CopyButton: React.FC = ({ +export const CopyButton: React.FC> = ({ text, i18nCopyLabelBefore = 'Copy code block', i18nCopyLabelAfter = 'Copied!', diff --git a/packages/paste-core/components/code-block/src/ExternalLinkButton.tsx b/packages/paste-core/components/code-block/src/ExternalLinkButton.tsx index ec488629d1..7df531bc1e 100644 --- a/packages/paste-core/components/code-block/src/ExternalLinkButton.tsx +++ b/packages/paste-core/components/code-block/src/ExternalLinkButton.tsx @@ -11,7 +11,7 @@ interface ExternalLinkButtonProps { element?: BoxProps['element']; } -export const ExternalLinkButton: React.FC = ({ +export const ExternalLinkButton: React.FC> = ({ i18nLinkLabel = 'Open code block in new page', href, element = 'EXTERNAL_LINK', diff --git a/packages/paste-core/components/combobox/__tests__/Combobox.spec.tsx b/packages/paste-core/components/combobox/__tests__/Combobox.spec.tsx index 8bfae44d01..7f53351301 100644 --- a/packages/paste-core/components/combobox/__tests__/Combobox.spec.tsx +++ b/packages/paste-core/components/combobox/__tests__/Combobox.spec.tsx @@ -80,7 +80,7 @@ function getFilteredItems(inputValue: string): any[] { return items.filter((item) => item.toLowerCase().startsWith(lowerCasedInputValue)); } -const ComboboxMock: React.FC = () => { +const ComboboxMock = (): JSX.Element => { const [inputValue, setInputValue] = React.useState(''); const filteredItems = React.useMemo(() => getFilteredItems(inputValue), [inputValue]); @@ -101,9 +101,9 @@ const ComboboxMock: React.FC = () => { ); }; -const GroupedMockCombobox: React.FC<{groupLabelTemplate?: ComboboxProps['groupLabelTemplate']}> = ({ - groupLabelTemplate, -}) => { +const GroupedMockCombobox: React.FC< + React.PropsWithChildren<{groupLabelTemplate?: ComboboxProps['groupLabelTemplate']}> +> = ({groupLabelTemplate}) => { return ( item.label.toLowerCase().startsWith(lowerCasedInputValue)); } -const ControlledCombobox: React.FC = () => { +const ControlledCombobox = (): JSX.Element => { const [inputValue, setInputValue] = React.useState(''); const filteredItems = React.useMemo(() => getFilteredObjectItems(inputValue), [inputValue]); const [selectedItem, setSelectedItem] = React.useState({}); diff --git a/packages/paste-core/components/combobox/package.json b/packages/paste-core/components/combobox/package.json index 7588815282..00ee218a41 100644 --- a/packages/paste-core/components/combobox/package.json +++ b/packages/paste-core/components/combobox/package.json @@ -53,8 +53,8 @@ "@twilio-paste/uid-library": "^0.2.1", "@twilio-paste/utils": "^2.0.0", "prop-types": "^15.7.2", - "react": "^16.8.6 || ^17.0.2", - "react-dom": "^16.8.6 || ^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/animation-library": "^0.3.9", @@ -81,8 +81,8 @@ "@twilio-paste/uid-library": "^0.2.6", "@twilio-paste/utils": "^2.0.1", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.0.0", + "react-dom": "^18.0.0", "typescript": "^4.6.4" } } diff --git a/packages/paste-core/components/combobox/src/ComboboxItems.tsx b/packages/paste-core/components/combobox/src/ComboboxItems.tsx index 27082d4a2c..895e668ea5 100644 --- a/packages/paste-core/components/combobox/src/ComboboxItems.tsx +++ b/packages/paste-core/components/combobox/src/ComboboxItems.tsx @@ -8,7 +8,9 @@ import {ComboboxListboxGroup} from './styles/ComboboxListboxGroup'; import {getIndexedItems, getGroupedItems} from './helpers'; import type {ComboboxItemsProps} from './types'; -const ComboboxItems = React.memo( +const ComboboxItems: React.FC< + React.PropsWithChildren & {ref: React.Ref} +> = React.memo( React.forwardRef( ( { diff --git a/packages/paste-core/components/combobox/src/multiselect/MultiselectCombobox.tsx b/packages/paste-core/components/combobox/src/multiselect/MultiselectCombobox.tsx index 792b5a869e..61b94ba3a3 100644 --- a/packages/paste-core/components/combobox/src/multiselect/MultiselectCombobox.tsx +++ b/packages/paste-core/components/combobox/src/multiselect/MultiselectCombobox.tsx @@ -58,7 +58,7 @@ export const MultiselectCombobox = React.forwardRef { + (changes: any) => { if (onSelectedItemsChangeProp) { // Only pass the selectedItems, not the other downshift state data onSelectedItemsChangeProp(changes.selectedItems); @@ -210,7 +210,7 @@ export const MultiselectCombobox = React.forwardRef { + (node: any) => { // Do nothing if the ref hasn't been set yet if (node == null) { return; diff --git a/packages/paste-core/components/combobox/src/singleselect/Combobox.tsx b/packages/paste-core/components/combobox/src/singleselect/Combobox.tsx index 0c2b9080b9..db73abee8d 100644 --- a/packages/paste-core/components/combobox/src/singleselect/Combobox.tsx +++ b/packages/paste-core/components/combobox/src/singleselect/Combobox.tsx @@ -128,7 +128,7 @@ const Combobox = React.forwardRef( * https://tkdodo.eu/blog/avoiding-use-effect-with-callback-refs */ const scrollToIndexRef = React.useCallback( - (node) => { + (node: any) => { if (node) { rowVirtualizer.scrollToIndex(items.indexOf(internalSelectedItem)); } diff --git a/packages/paste-core/components/combobox/stories/Combobox-customization.stories.tsx b/packages/paste-core/components/combobox/stories/Combobox-customization.stories.tsx index bd4398f93c..1bc975f934 100644 --- a/packages/paste-core/components/combobox/stories/Combobox-customization.stories.tsx +++ b/packages/paste-core/components/combobox/stories/Combobox-customization.stories.tsx @@ -26,7 +26,7 @@ const groupedItems = [ {letter: 'd', number: 7}, ]; -const ShowCustomization: React.FC<{isTestEnvironment: boolean}> = ({ +const ShowCustomization: React.FC> = ({ isTestEnvironment, children, }): React.ReactElement => { diff --git a/packages/paste-core/components/data-grid/__tests__/reakit-hasFocus.spec.tsx b/packages/paste-core/components/data-grid/__tests__/reakit-hasFocus.spec.tsx index 8fb576c078..0c4b49c290 100644 --- a/packages/paste-core/components/data-grid/__tests__/reakit-hasFocus.spec.tsx +++ b/packages/paste-core/components/data-grid/__tests__/reakit-hasFocus.spec.tsx @@ -7,7 +7,7 @@ import {render, screen} from '@testing-library/react'; import {hasFocus} from '../src/utils/reakit/reakit-hasFocus'; -const TestComponent: React.FC = () => { +const TestComponent = (): JSX.Element => { return ( <>
diff --git a/packages/paste-core/components/data-grid/package.json b/packages/paste-core/components/data-grid/package.json index cad7aee7bf..0df3fc63b5 100644 --- a/packages/paste-core/components/data-grid/package.json +++ b/packages/paste-core/components/data-grid/package.json @@ -46,8 +46,8 @@ "@twilio-paste/uid-library": "^0.2.1", "@twilio-paste/utils": "^2.0.0", "prop-types": "^15.7.2", - "react": "^16.8.6 || ^17.0.2", - "react-dom": "^16.8.6 || ^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/anchor": "^9.0.1", @@ -68,7 +68,7 @@ "@twilio-paste/uid-library": "^0.2.6", "@twilio-paste/utils": "^2.0.1", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/packages/paste-core/components/data-grid/src/DataGrid.tsx b/packages/paste-core/components/data-grid/src/DataGrid.tsx index 6d8ccd8ebf..33104d45f0 100644 --- a/packages/paste-core/components/data-grid/src/DataGrid.tsx +++ b/packages/paste-core/components/data-grid/src/DataGrid.tsx @@ -56,7 +56,7 @@ export const DataGrid = React.forwardRef( * - Sets the last focused element before blurring to be the active tab stop (line 43) */ const handleBlur = React.useCallback( - (event) => { + (event: any) => { const isDataGridBlurred = !event.currentTarget.contains(event.relatedTarget); if (isDataGridBlurred) { diff --git a/packages/paste-core/components/data-grid/src/DataGridCell.tsx b/packages/paste-core/components/data-grid/src/DataGridCell.tsx index 318fc51bd0..1cf1773ea5 100644 --- a/packages/paste-core/components/data-grid/src/DataGridCell.tsx +++ b/packages/paste-core/components/data-grid/src/DataGridCell.tsx @@ -27,7 +27,11 @@ export interface DataGridCellProps extends Pick { * @param {string} [element=DATA_GRID_CELL] - customization element * @param {number} [colSpan] - how many columns the cell spans across */ -export const DataGridCell: React.FC = ({element = 'DATA_GRID_CELL', as = 'td', ...props}) => { +export const DataGridCell: React.FC> = ({ + element = 'DATA_GRID_CELL', + as = 'td', + ...props +}) => { const dataGridState = React.useContext(DataGridContext); const cellRef = React.useRef() as React.MutableRefObject; diff --git a/packages/paste-core/components/data-grid/src/DataGridHeader.tsx b/packages/paste-core/components/data-grid/src/DataGridHeader.tsx index 2692def101..bc179703c4 100644 --- a/packages/paste-core/components/data-grid/src/DataGridHeader.tsx +++ b/packages/paste-core/components/data-grid/src/DataGridHeader.tsx @@ -11,7 +11,10 @@ import type {ThProps} from './table/Th'; * @param {string} [element=DATA_GRID_HEADER] - customization element * @param {number} [colSpan] - how many columns the cell spans across */ -export const DataGridHeader: React.FC = ({element = 'DATA_GRID_HEADER', ...props}) => { +export const DataGridHeader: React.FC> = ({ + element = 'DATA_GRID_HEADER', + ...props +}) => { return ; }; diff --git a/packages/paste-core/components/data-grid/src/DataGridHeaderSort.tsx b/packages/paste-core/components/data-grid/src/DataGridHeaderSort.tsx index 82330e59b6..5657527f5d 100644 --- a/packages/paste-core/components/data-grid/src/DataGridHeaderSort.tsx +++ b/packages/paste-core/components/data-grid/src/DataGridHeaderSort.tsx @@ -14,7 +14,10 @@ interface DataGridHeaderSortIconProps { element?: BoxProps['element']; } -const DataGridHeaderSortIcon: React.FC = ({direction, element}) => { +const DataGridHeaderSortIcon: React.FC> = ({ + direction, + element, +}) => { switch (direction) { case 'ascending': return ; @@ -43,7 +46,7 @@ export interface DataGridHeaderSortProps extends DataGridHeaderSortIconProps { * @param {function} onClick - callback for when the button is clicked * @param {string} element - customization element */ -export const DataGridHeaderSort: React.FC = ({ +export const DataGridHeaderSort: React.FC> = ({ direction, onClick, element = 'DATA_GRID_HEADER_SORT', diff --git a/packages/paste-core/components/data-grid/stories/components/ColumnSpanDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/ColumnSpanDataGrid.tsx index 87da91dd05..5c71bab586 100644 --- a/packages/paste-core/components/data-grid/stories/components/ColumnSpanDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/ColumnSpanDataGrid.tsx @@ -4,7 +4,9 @@ import type {BoxProps} from '@twilio-paste/box'; import {DataGrid, DataGridHead, DataGridRow, DataGridHeader, DataGridBody, DataGridCell} from '../../src'; import {TableBodyData} from './constants'; -export const ColumnSpanDataGrid: React.FC<{element?: BoxProps['element']}> = ({element = 'DATA_GRID'}) => { +export const ColumnSpanDataGrid: React.FC> = ({ + element = 'DATA_GRID', +}) => { return ( diff --git a/packages/paste-core/components/data-grid/stories/components/ComposableCellsDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/ComposableCellsDataGrid.tsx index b9a208e88a..6d27e51b24 100644 --- a/packages/paste-core/components/data-grid/stories/components/ComposableCellsDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/ComposableCellsDataGrid.tsx @@ -8,7 +8,7 @@ import {Select, Option} from '@twilio-paste/select'; import {DataGrid, DataGridHead, DataGridRow, DataGridHeader, DataGridBody, DataGridCell} from '../../src'; import {TableHeaderData, TableBodyData} from './constants'; -const ActionMenu: React.FC = () => { +const ActionMenu = (): JSX.Element => { const menu = useMenuState(); return ( @@ -29,7 +29,7 @@ const ActionMenu: React.FC = () => { ); }; -export const ComposableCellsDataGrid: React.FC = () => { +export const ComposableCellsDataGrid = (): JSX.Element => { /* eslint-disable react/no-array-index-key */ return ( diff --git a/packages/paste-core/components/data-grid/stories/components/CustomizableDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/CustomizableDataGrid.tsx index 57c90bc3d7..943313bb54 100644 --- a/packages/paste-core/components/data-grid/stories/components/CustomizableDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/CustomizableDataGrid.tsx @@ -36,7 +36,7 @@ export const customElementStyles = (prefix = 'DATA_GRID'): {[key: string]: any} }, }); -export const CustomizableDataGrid: React.FC = () => { +export const CustomizableDataGrid = (): JSX.Element => { const currentTheme = useTheme(); /* eslint-disable react/no-array-index-key */ return ( diff --git a/packages/paste-core/components/data-grid/stories/components/KitchenSinkDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/KitchenSinkDataGrid.tsx index 1b46dd82a7..837f3d26af 100644 --- a/packages/paste-core/components/data-grid/stories/components/KitchenSinkDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/KitchenSinkDataGrid.tsx @@ -100,7 +100,11 @@ interface DataGridPaginationProps { onPageChange: (newPageNumber: number) => void; } -const DataGridPagination: React.FC = ({currentPage = 1, pageCount, onPageChange}) => { +const DataGridPagination: React.FC> = ({ + currentPage = 1, + pageCount, + onPageChange, +}) => { const goToNextPage = React.useCallback(() => { onPageChange(Math.min(currentPage + 1, pageCount)); }, [currentPage, pageCount]); @@ -171,7 +175,13 @@ interface CheckboxCellProps { label: string; indeterminate?: boolean; } -const CheckboxCell: React.FC = ({onClick, id, indeterminate, checked, label}) => { +const CheckboxCell: React.FC> = ({ + onClick, + id, + indeterminate, + checked, + label, +}) => { const checkboxRef = React.createRef(); const handleClick = React.useCallback(() => { @@ -181,7 +191,7 @@ const CheckboxCell: React.FC = ({onClick, id, indeterminate, return onClick(!checkboxRef.current.checked); }, [onClick, checkboxRef]); const handleKeyDown = React.useCallback( - (event) => { + (event: any) => { if (checkboxRef.current == null) { return undefined; } @@ -215,7 +225,7 @@ const CheckboxCell: React.FC = ({onClick, id, indeterminate, ); }; -export const KitchenSinkDataGrid: React.FC = () => { +export const KitchenSinkDataGrid = (): JSX.Element => { const seed = useUIDSeed(); const [currentPage, setCurrentPage] = React.useState(1); const [sortedColumns, setSortedColumns] = React.useState>(initialHeaderData); @@ -228,7 +238,7 @@ export const KitchenSinkDataGrid: React.FC = () => { const rowIndexStart = (currentPage - 1) * PAGE_SIZE; const rowIndexEnd = Math.min(rowIndexStart + PAGE_SIZE - 1, TOTAL_ROWS); - const handlePagination = React.useCallback((newPage) => { + const handlePagination = React.useCallback((newPage: any) => { setCurrentPage(newPage); }, []); diff --git a/packages/paste-core/components/data-grid/stories/components/LoadingDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/LoadingDataGrid.tsx index b71927602a..e18389f683 100644 --- a/packages/paste-core/components/data-grid/stories/components/LoadingDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/LoadingDataGrid.tsx @@ -4,7 +4,7 @@ import {SkeletonLoader} from '@twilio-paste/skeleton-loader'; import {DataGrid, DataGridHead, DataGridRow, DataGridHeader, DataGridBody, DataGridCell, DataGridFoot} from '../../src'; import {TableHeaderData, TableBodyData} from './constants'; -export const LoadingDataGrid: React.FC = () => { +export const LoadingDataGrid = (): JSX.Element => { // Used for random looking column widths const widths = [67, 53, 79, 59, 73, 61, 89, 97, 71, 83]; const widthsLength = widths.length; diff --git a/packages/paste-core/components/data-grid/stories/components/PaginatedDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/PaginatedDataGrid.tsx index 99710f8bfb..367a9d0f7d 100644 --- a/packages/paste-core/components/data-grid/stories/components/PaginatedDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/PaginatedDataGrid.tsx @@ -66,7 +66,11 @@ interface DataGridPaginationProps { onPageChange: (newPageNumber: number) => void; } -const DataGridPagination: React.FC = ({currentPage = 1, pageCount, onPageChange}) => { +const DataGridPagination: React.FC> = ({ + currentPage = 1, + pageCount, + onPageChange, +}) => { // purely to create unique landmark names when used in stack or side-by-side stories const uniqueLandmarkIdentifier = useUID(); const goToNextPage = React.useCallback(() => { @@ -136,7 +140,13 @@ interface CheckboxCellProps { label: string; indeterminate?: boolean; } -const CheckboxCell: React.FC = ({onClick, id, indeterminate, checked, label}) => { +const CheckboxCell: React.FC> = ({ + onClick, + id, + indeterminate, + checked, + label, +}) => { const checkboxRef = React.createRef(); const handleClick = React.useCallback(() => { @@ -146,7 +156,7 @@ const CheckboxCell: React.FC = ({onClick, id, indeterminate, return onClick(!checkboxRef.current.checked); }, [onClick, checkboxRef]); const handleKeyDown = React.useCallback( - (event) => { + (event: any) => { if (checkboxRef.current == null) { return undefined; } @@ -181,7 +191,7 @@ const CheckboxCell: React.FC = ({onClick, id, indeterminate, ); }; -export const PaginatedDataGrid: React.FC = () => { +export const PaginatedDataGrid = (): JSX.Element => { const seed = useUIDSeed(); // Array of length 10 rows, all unchecked const [checkedItems, setCheckedItems] = React.useState(PaginatedTableBodyData.map(() => false)); @@ -193,7 +203,7 @@ export const PaginatedDataGrid: React.FC = () => { const rowIndexStart = (currentPage - 1) * PAGE_SIZE; const rowIndexEnd = Math.min(rowIndexStart + PAGE_SIZE - 1, TOTAL_ROWS); - const handlePagination = React.useCallback((newPage) => { + const handlePagination = React.useCallback((newPage: any) => { setCurrentPage(newPage); }, []); diff --git a/packages/paste-core/components/data-grid/stories/components/PlainDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/PlainDataGrid.tsx index ab1b2d7c56..1e2b635461 100644 --- a/packages/paste-core/components/data-grid/stories/components/PlainDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/PlainDataGrid.tsx @@ -6,7 +6,9 @@ import {Paragraph} from '@twilio-paste/paragraph'; import {DataGrid, DataGridHead, DataGridRow, DataGridHeader, DataGridBody, DataGridCell, DataGridFoot} from '../../src'; import {TableHeaderData, TableBodyData} from './constants'; -export const PlainDataGrid: React.FC<{element?: BoxProps['element']}> = ({element = 'DATA_GRID'}) => { +export const PlainDataGrid: React.FC> = ({ + element = 'DATA_GRID', +}) => { /* eslint-disable react/no-array-index-key */ return ( <> diff --git a/packages/paste-core/components/data-grid/stories/components/SelectableRowsDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/SelectableRowsDataGrid.tsx index cad3f5847e..09e84cbc30 100644 --- a/packages/paste-core/components/data-grid/stories/components/SelectableRowsDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/SelectableRowsDataGrid.tsx @@ -14,7 +14,13 @@ interface CheckboxCellProps { label: string; indeterminate?: boolean; } -const CheckboxCell: React.FC = ({onClick, id, indeterminate, checked, label}) => { +const CheckboxCell: React.FC> = ({ + onClick, + id, + indeterminate, + checked, + label, +}) => { const checkboxRef = React.createRef(); const handleClick = React.useCallback(() => { @@ -24,7 +30,7 @@ const CheckboxCell: React.FC = ({onClick, id, indeterminate, return onClick(!checkboxRef.current.checked); }, [onClick, checkboxRef]); const handleKeyDown = React.useCallback( - (event) => { + (event: any) => { if (checkboxRef.current == null) { return undefined; } @@ -59,7 +65,7 @@ const CheckboxCell: React.FC = ({onClick, id, indeterminate, ); }; -export const SelectableRowsDataGrid: React.FC = () => { +export const SelectableRowsDataGrid = (): JSX.Element => { const seed = useUIDSeed(); // Array of length 10 rows, all unchecked const [checkedItems, setCheckedItems] = React.useState([...new Array(10)].map(() => false)); diff --git a/packages/paste-core/components/data-grid/stories/components/SortableColumnsDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/SortableColumnsDataGrid.tsx index 0892d561b0..b2a81862fa 100644 --- a/packages/paste-core/components/data-grid/stories/components/SortableColumnsDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/SortableColumnsDataGrid.tsx @@ -29,7 +29,7 @@ const numColumns = TableHeaderData.length; const initialHeaderData = [...new Array(numColumns)].map((_, index) => (index === 0 ? 'ascending' : 'none')); const initialBodyData = TableBodyData.sort((a, b) => simpleComparator(a, b, true, 0)); -export const SortableColumnsDataGrid: React.FC = () => { +export const SortableColumnsDataGrid = (): JSX.Element => { const [sortedColumns, setSortedColumns] = React.useState>(initialHeaderData); const [sortedData, setSortedData] = React.useState(initialBodyData); diff --git a/packages/paste-core/components/data-grid/stories/components/StickyHeaderDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/StickyHeaderDataGrid.tsx index 10890c851d..062b52fb4c 100644 --- a/packages/paste-core/components/data-grid/stories/components/StickyHeaderDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/StickyHeaderDataGrid.tsx @@ -3,7 +3,9 @@ import type {BoxProps} from '@twilio-paste/box'; import {DataGrid, DataGridHead, DataGridRow, DataGridHeader, DataGridBody, DataGridCell, DataGridFoot} from '../../src'; -export const StickyHeaderDataGrid: React.FC<{element?: BoxProps['element']}> = ({element = 'DATA_GRID'}) => { +export const StickyHeaderDataGrid: React.FC> = ({ + element = 'DATA_GRID', +}) => { /* eslint-disable react/no-array-index-key */ return ( <> diff --git a/packages/paste-core/components/date-picker/package.json b/packages/paste-core/components/date-picker/package.json index f0aff50b5c..478f70945d 100644 --- a/packages/paste-core/components/date-picker/package.json +++ b/packages/paste-core/components/date-picker/package.json @@ -38,8 +38,8 @@ "@twilio-paste/types": "^3.1.1", "@twilio-paste/uid-library": "^0.2.1", "prop-types": "^15.7.2", - "react": "^16.8.6 || ^17.0.2", - "react-dom": "^16.8.6 || ^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/box": "^7.1.1", @@ -52,7 +52,7 @@ "@twilio-paste/types": "^3.1.9", "@twilio-paste/uid-library": "^0.2.6", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/packages/paste-core/components/date-picker/stories/index.stories.tsx b/packages/paste-core/components/date-picker/stories/index.stories.tsx index cb5430092d..70b973273a 100644 --- a/packages/paste-core/components/date-picker/stories/index.stories.tsx +++ b/packages/paste-core/components/date-picker/stories/index.stories.tsx @@ -13,7 +13,7 @@ import {Stack} from '@twilio-paste/stack'; import {DatePicker, formatReturnDate} from '../src'; import type {DatePickerProps} from '../src'; -export const DefaultDatePicker: React.FC = (props) => { +export const DefaultDatePicker: React.FC> = (props) => { const uidDP = useUID(); const uidHT = useUID(); return ( @@ -33,7 +33,7 @@ export const DefaultDatePicker: React.FC = (props) => { ); }; -export const InverseDatePicker: React.FC = (props) => { +export const InverseDatePicker: React.FC> = (props) => { const uidDP = useUID(); const uidHT = useUID(); return ( @@ -49,7 +49,7 @@ export const InverseDatePicker: React.FC = (props) => { ); }; -export const RequiredDatePicker: React.FC = (props) => { +export const RequiredDatePicker: React.FC> = (props) => { const uidDP = useUID(); const uidHT = useUID(); return ( @@ -68,7 +68,7 @@ export const RequiredDatePicker: React.FC = (props) => { ); }; -export const InverseRequiredDatePicker: React.FC = (props) => { +export const InverseRequiredDatePicker: React.FC> = (props) => { const uidDP = useUID(); const uidHT = useUID(); return ( @@ -84,7 +84,7 @@ export const InverseRequiredDatePicker: React.FC = (props) => { ); }; -export const ErrorDatePicker: React.FC = (props) => { +export const ErrorDatePicker: React.FC> = (props) => { const uidDP = useUID(); const uidHT = useUID(); return ( @@ -104,7 +104,7 @@ export const ErrorDatePicker: React.FC = (props) => { ); }; -export const InverseErrorDatePicker: React.FC = (props) => { +export const InverseErrorDatePicker: React.FC> = (props) => { const uidDP = useUID(); const uidHT = useUID(); return ( @@ -120,7 +120,7 @@ export const InverseErrorDatePicker: React.FC = (props) => { ); }; -export const DisabledDatePicker: React.FC = (props) => { +export const DisabledDatePicker: React.FC> = (props) => { const uidDP = useUID(); const uidHT = useUID(); return ( @@ -138,7 +138,7 @@ export const DisabledDatePicker: React.FC = (props) => { ); }; -export const InverseDisabledDatePicker: React.FC = (props) => { +export const InverseDisabledDatePicker: React.FC> = (props) => { const uidDP = useUID(); const uidHT = useUID(); return ( @@ -152,7 +152,7 @@ export const InverseDisabledDatePicker: React.FC = (props) => { ); }; -export const ReadonlyDatePicker: React.FC = (props) => { +export const ReadonlyDatePicker: React.FC> = (props) => { const uidDP = useUID(); const uidHT = useUID(); return ( @@ -168,7 +168,7 @@ export const ReadonlyDatePicker: React.FC = (props) => { ); }; -export const InverseReadonlyDatePicker: React.FC = (props) => { +export const InverseReadonlyDatePicker: React.FC> = (props) => { const uidDP = useUID(); const uidHT = useUID(); return ( @@ -181,7 +181,7 @@ export const InverseReadonlyDatePicker: React.FC = (props) => { ); }; -export const DefaultValueDatePicker: React.FC = (props) => { +export const DefaultValueDatePicker: React.FC> = (props) => { const uidDP = useUID(); const uidHT = useUID(); return ( @@ -199,7 +199,7 @@ export const DefaultValueDatePicker: React.FC = (props) => { ); }; -export const OnChangeDatePicker: React.FC = (props) => { +export const OnChangeDatePicker: React.FC> = (props) => { const [value, setValue] = React.useState(''); const [dateFormat, setDateFormat] = React.useState('MM dd yy'); const uidDP = useUID(); @@ -240,7 +240,7 @@ export const OnChangeDatePicker: React.FC = (props) => { ); }; -export const LabelOnlyPicker: React.FC = (props) => { +export const LabelOnlyPicker: React.FC> = (props) => { const uidDP = useUID(); return ( <> @@ -250,7 +250,7 @@ export const LabelOnlyPicker: React.FC = (props) => { ); }; -export const DateRangePicker: React.FC = (props) => { +export const DateRangePicker: React.FC> = (props) => { const [startDate, setStartDate] = React.useState(''); const startUidDP = useUID(); const endUidDP = useUID(); @@ -268,7 +268,7 @@ export const DateRangePicker: React.FC = (props) => { ); }; -export const StackOfPickers: React.FC = (props) => { +export const StackOfPickers: React.FC> = (props) => { const uidDPOne = useUID(); const uidHTOne = useUID(); const uidDPTwo = useUID(); @@ -304,7 +304,7 @@ export const StackOfPickers: React.FC = (props) => { ); }; -export const DatePickerWithMinAndMax: React.FC = (props) => { +export const DatePickerWithMinAndMax: React.FC> = (props) => { const uidDP = useUID(); const uidHT = useUID(); return ( diff --git a/packages/paste-core/components/disclosure/__tests__/disclosure.test.tsx b/packages/paste-core/components/disclosure/__tests__/disclosure.test.tsx index 0f733afcc7..7fa146a8a0 100644 --- a/packages/paste-core/components/disclosure/__tests__/disclosure.test.tsx +++ b/packages/paste-core/components/disclosure/__tests__/disclosure.test.tsx @@ -8,11 +8,13 @@ import {Disclosure, DisclosureContent, DisclosureHeading, useDisclosureState} fr import type {DisclosureHeadingProps, DisclosureProps} from '../src'; import {getIconHoverStyles} from '../src/utils'; -const MockDisclosure: React.FC<{ - visible?: DisclosureProps['visible']; - disabled?: DisclosureHeadingProps['disabled']; - focusable?: DisclosureHeadingProps['focusable']; -}> = ({visible, disabled, focusable}) => { +const MockDisclosure: React.FC< + React.PropsWithChildren<{ + visible?: DisclosureProps['visible']; + disabled?: DisclosureHeadingProps['disabled']; + focusable?: DisclosureHeadingProps['focusable']; + }> +> = ({visible, disabled, focusable}) => { return ( @@ -25,7 +27,7 @@ const MockDisclosure: React.FC<{ ); }; -const MockDefaultElementDisclosure: React.FC = () => { +const MockDefaultElementDisclosure = (): JSX.Element => { return ( @@ -36,7 +38,7 @@ const MockDefaultElementDisclosure: React.FC = () => { ); }; -const MockCustomElementDisclosure: React.FC = () => { +const MockCustomElementDisclosure = (): JSX.Element => { return ( @@ -52,7 +54,7 @@ const MockCustomElementDisclosure: React.FC = () => { ); }; -const StateHookMock: React.FC = () => { +const StateHookMock = (): JSX.Element => { const disclosure = useDisclosureState(); return ( diff --git a/packages/paste-core/components/disclosure/package.json b/packages/paste-core/components/disclosure/package.json index 381749edc5..85f6cbbdc0 100644 --- a/packages/paste-core/components/disclosure/package.json +++ b/packages/paste-core/components/disclosure/package.json @@ -39,8 +39,8 @@ "@twilio-paste/types": "^3.1.1", "@twilio-paste/uid-library": "^0.2.1", "prop-types": "^15.7.2", - "react": "^16.8.6 || ^17.0.2", - "react-dom": "^16.8.6 || ^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/animation-library": "^0.3.9", @@ -57,7 +57,7 @@ "@twilio-paste/types": "^3.1.9", "@twilio-paste/uid-library": "^0.2.6", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/packages/paste-core/components/disclosure/src/DisclosureHeading.tsx b/packages/paste-core/components/disclosure/src/DisclosureHeading.tsx index 59a5ce35bc..8514b40ede 100644 --- a/packages/paste-core/components/disclosure/src/DisclosureHeading.tsx +++ b/packages/paste-core/components/disclosure/src/DisclosureHeading.tsx @@ -82,7 +82,7 @@ const StyledDisclosureHeading = React.forwardRef = ({ +const DisclosureHeading: React.FC> = ({ children, as, element = 'DISCLOSURE_HEADING', diff --git a/packages/paste-core/components/disclosure/stories/index.stories.tsx b/packages/paste-core/components/disclosure/stories/index.stories.tsx index 0628d41f51..b50d8ffe24 100644 --- a/packages/paste-core/components/disclosure/stories/index.stories.tsx +++ b/packages/paste-core/components/disclosure/stories/index.stories.tsx @@ -12,11 +12,12 @@ import {MediaObject, MediaBody, MediaFigure} from '@twilio-paste/media-object'; import {Disclosure, DisclosureContent, DisclosureHeading, useDisclosureState} from '../src'; import type {DisclosureHeadingProps, DisclosureInitialState, DisclosureStateReturn, DisclosureVariants} from '../src'; -export const ExampleDisclosures: React.FC<{ - disabled?: boolean; - variant?: DisclosureVariants; +export const ExampleDisclosures: React.FC< +React.PropsWithChildren<{ + disabled?: boolean; + variant?: DisclosureVariants; headingVariant: DisclosureHeadingProps['variant']; -}> = (props) => { +}>> = (props) => { return ( diff --git a/packages/paste-core/components/display-heading/package.json b/packages/paste-core/components/display-heading/package.json index 322e5265e3..3e9f34f2fc 100644 --- a/packages/paste-core/components/display-heading/package.json +++ b/packages/paste-core/components/display-heading/package.json @@ -35,8 +35,8 @@ "@twilio-paste/theme": "^8.0.0", "@twilio-paste/types": "^3.1.1", "prop-types": "^15.7.2", - "react": "^16.8.6 || ^17.0.2", - "react-dom": "^16.8.6 || ^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/animation-library": "^0.3.2", @@ -49,8 +49,8 @@ "@twilio-paste/theme": "^8.0.0", "@twilio-paste/types": "^3.1.1", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.0.0", + "react-dom": "^18.0.0", "typescript": "^4.6.4" } } diff --git a/packages/paste-core/components/display-pill-group/package.json b/packages/paste-core/components/display-pill-group/package.json index bfa43cb09d..fca2c97f06 100644 --- a/packages/paste-core/components/display-pill-group/package.json +++ b/packages/paste-core/components/display-pill-group/package.json @@ -37,8 +37,8 @@ "@twilio-paste/types": "^3.1.1", "@twilio-paste/uid-library": "^0.2.1", "prop-types": "^15.7.2", - "react": "^16.8.6 || ^17.0.2", - "react-dom": "^16.8.6 || ^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/anchor": "^9.0.1", @@ -53,7 +53,7 @@ "@twilio-paste/types": "^3.1.9", "@twilio-paste/uid-library": "^0.2.6", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/packages/paste-core/components/display-pill-group/stories/customization.stories.tsx b/packages/paste-core/components/display-pill-group/stories/customization.stories.tsx index 9376f8932c..4613b2e578 100644 --- a/packages/paste-core/components/display-pill-group/stories/customization.stories.tsx +++ b/packages/paste-core/components/display-pill-group/stories/customization.stories.tsx @@ -6,7 +6,7 @@ import {CalendarIcon} from '@twilio-paste/icons/esm/CalendarIcon'; import {DisplayPillGroup} from '../src/DisplayPillGroup'; import {DisplayPill} from '../src/DisplayPill'; -export const CustomDisplayPillGroup: React.FC = () => { +export const CustomDisplayPillGroup = (): JSX.Element => { const currentTheme = useTheme(); return ( { +export const Basic = (): JSX.Element => { return ( { ); }; -export const OverflowWrapping: React.FC = () => { +export const OverflowWrapping = (): JSX.Element => { return ( diff --git a/packages/paste-core/components/file-picker/package.json b/packages/paste-core/components/file-picker/package.json index 212c1f30ea..f63c5760b8 100644 --- a/packages/paste-core/components/file-picker/package.json +++ b/packages/paste-core/components/file-picker/package.json @@ -34,8 +34,8 @@ "@twilio-paste/theme": "^8.0.0", "@twilio-paste/uid-library": "^0.2.5", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/box": "^7.1.1", @@ -47,7 +47,7 @@ "@twilio-paste/theme": "^8.0.3", "@twilio-paste/uid-library": "^0.2.6", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/packages/paste-core/components/form-pill-group/__tests__/index.spec.tsx b/packages/paste-core/components/form-pill-group/__tests__/index.spec.tsx index 50ce6b93d2..227f388103 100644 --- a/packages/paste-core/components/form-pill-group/__tests__/index.spec.tsx +++ b/packages/paste-core/components/form-pill-group/__tests__/index.spec.tsx @@ -6,7 +6,7 @@ import {useFormPillState, FormPillGroup, FormPill} from '../src'; import {Basic, SelectableAndDismissable} from '../stories/index.stories'; import {CustomFormPillGroup} from '../stories/customization.stories'; -const CustomElementFormPillGroup: React.FC = () => { +const CustomElementFormPillGroup = (): JSX.Element => { const pillState = useFormPillState(); return ( @@ -25,7 +25,7 @@ const CustomElementFormPillGroup: React.FC = () => { ); }; -const I18nProp: React.FC = () => { +const I18nProp = (): JSX.Element => { const pillState = useFormPillState(); return ( diff --git a/packages/paste-core/components/form-pill-group/package.json b/packages/paste-core/components/form-pill-group/package.json index ffe95b56e5..91ff0f73f9 100644 --- a/packages/paste-core/components/form-pill-group/package.json +++ b/packages/paste-core/components/form-pill-group/package.json @@ -41,8 +41,8 @@ "@twilio-paste/types": "^3.1.1", "@twilio-paste/uid-library": "^0.2.1", "prop-types": "^15.7.2", - "react": "^16.8.6 || ^17.0.2", - "react-dom": "^16.8.6 || ^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/animation-library": "^0.3.9", @@ -58,7 +58,7 @@ "@twilio-paste/types": "^3.1.9", "@twilio-paste/uid-library": "^0.2.6", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/packages/paste-core/components/form-pill-group/src/PillCloseIcon.tsx b/packages/paste-core/components/form-pill-group/src/PillCloseIcon.tsx index 568861b1b4..4fc51d44e7 100644 --- a/packages/paste-core/components/form-pill-group/src/PillCloseIcon.tsx +++ b/packages/paste-core/components/form-pill-group/src/PillCloseIcon.tsx @@ -23,7 +23,7 @@ interface PillCloseIconProps { pillIsHoverable?: boolean; } -export const PillCloseIcon: React.FC = ({ +export const PillCloseIcon: React.FC> = ({ element = 'FORM_PILL_CLOSE', // eslint-disable-next-line @typescript-eslint/no-empty-function onClick = () => {}, diff --git a/packages/paste-core/components/form-pill-group/stories/customization.stories.tsx b/packages/paste-core/components/form-pill-group/stories/customization.stories.tsx index ecb4af4e6e..e73a345b7e 100644 --- a/packages/paste-core/components/form-pill-group/stories/customization.stories.tsx +++ b/packages/paste-core/components/form-pill-group/stories/customization.stories.tsx @@ -5,7 +5,7 @@ import {CalendarIcon} from '@twilio-paste/icons/esm/CalendarIcon'; import {useFormPillState, FormPillGroup, FormPill} from '../src'; -export const CustomFormPillGroup: React.FC = () => { +export const CustomFormPillGroup = (): JSX.Element => { const currentTheme = useTheme(); const [showTennis, setShowTennis] = React.useState(true); const pillState = useFormPillState(); diff --git a/packages/paste-core/components/form-pill-group/stories/index.stories.tsx b/packages/paste-core/components/form-pill-group/stories/index.stories.tsx index 212c2e4ef2..e3e0b20769 100644 --- a/packages/paste-core/components/form-pill-group/stories/index.stories.tsx +++ b/packages/paste-core/components/form-pill-group/stories/index.stories.tsx @@ -14,12 +14,9 @@ const PILL_NAMES = [ 'Error pill with avatar', ]; -export const Basic: React.FC<{selected?: boolean; dismissable?: boolean; disabled?: boolean; ariaLabel?: string}> = ({ - selected = false, - dismissable = false, - disabled = false, - ariaLabel = 'Basic pills:', -}) => { +export const Basic: React.FC< + React.PropsWithChildren<{selected?: boolean; dismissable?: boolean; disabled?: boolean; ariaLabel?: string}> +> = ({selected = false, dismissable = false, disabled = false, ariaLabel = 'Basic pills:'}) => { const pillState = useFormPillState(); return (
@@ -44,17 +41,17 @@ export const Basic: React.FC<{selected?: boolean; dismissable?: boolean; disable ); }; -export const Disabled: React.FC = () => ; -export const Selected: React.FC = () => ; -export const Dismissable: React.FC = () => ; +export const Disabled = (): JSX.Element => ; +export const Selected = (): JSX.Element => ; +export const Dismissable = (): JSX.Element => ; -export const OverflowWrapping: React.FC = () => ( +export const OverflowWrapping = (): JSX.Element => ( ); -export const SelectableAndDismissable: React.FC = () => { +export const SelectableAndDismissable = (): JSX.Element => { const [pills, setPills] = React.useState([...PILL_NAMES]); const [selectedSet, updateSelectedSet] = React.useState>(new Set([PILL_NAMES[1], PILL_NAMES[4]])); const pillState = useFormPillState(); diff --git a/packages/paste-core/components/form/stories/form.stories.tsx b/packages/paste-core/components/form/stories/form.stories.tsx index cd7cfc73d4..8370cd9d2a 100644 --- a/packages/paste-core/components/form/stories/form.stories.tsx +++ b/packages/paste-core/components/form/stories/form.stories.tsx @@ -16,7 +16,10 @@ import type {RadioGroupProps} from '@twilio-paste/radio-group'; import {TextArea} from '@twilio-paste/textarea'; import type {TextAreaProps} from '@twilio-paste/textarea'; -const InputField: React.FC> = ({disabled, hasError}) => { +const InputField: React.FC>> = ({ + disabled, + hasError, +}) => { const inputIDSeed = useUIDSeed(); return ( <> @@ -28,7 +31,10 @@ const InputField: React.FC> = ({disabl ); }; -const TextareaField: React.FC> = ({disabled, hasError}) => { +const TextareaField: React.FC>> = ({ + disabled, + hasError, +}) => { const inputIDSeed = useUIDSeed(); return ( <> @@ -40,7 +46,10 @@ const TextareaField: React.FC> = ({ ); }; -const SelectField: React.FC> = ({disabled, hasError}) => { +const SelectField: React.FC>> = ({ + disabled, + hasError, +}) => { const inputIDSeed = useUIDSeed(); return ( <> @@ -54,7 +63,7 @@ const SelectField: React.FC> = ({disa ); }; -const CheckboxGroupField: React.FC> = ({ +const CheckboxGroupField: React.FC>> = ({ orientation, errorText, }) => { @@ -115,7 +124,10 @@ const CheckboxGroupField: React.FC> = ({orientation, errorText}) => { +const RadioGroupField: React.FC>> = ({ + orientation, + errorText, +}) => { const [value, setValue] = React.useState('2'); return ( { +const MockChild: React.FC = ({children}) => { return {children}; }; -const MockControlGroup: React.FC<{ - showRequired?: boolean; - showHelpText?: boolean; - showErrorText?: boolean; - element?: string; - orientation?: InlineControlGroupProps['orientation']; -}> = ({showRequired, showHelpText, showErrorText, element, orientation = 'vertical'}) => { +const MockControlGroup: React.FC< + React.PropsWithChildren<{ + showRequired?: boolean; + showHelpText?: boolean; + showErrorText?: boolean; + element?: string; + orientation?: InlineControlGroupProps['orientation']; + }> +> = ({showRequired, showHelpText, showErrorText, element, orientation = 'vertical'}) => { return ( ( +const DefaultFauxInput = React.forwardRef>( ({disabled, element, hasError, readOnly, children, type, variant}, ref) => { let backgroundColor = 'colorBackgroundBody' as BackgroundColor; let boxShadow = 'shadowBorder' as BoxShadow; diff --git a/packages/paste-core/components/input-box/src/InputBox.tsx b/packages/paste-core/components/input-box/src/InputBox.tsx index 2296c8e635..4cf1a1df78 100644 --- a/packages/paste-core/components/input-box/src/InputBox.tsx +++ b/packages/paste-core/components/input-box/src/InputBox.tsx @@ -24,7 +24,7 @@ export interface InputBoxProps { variant?: Variants; } -const InputBox = React.forwardRef( +const InputBox = React.forwardRef>( ( { children, diff --git a/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx b/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx index bd72d6b2a8..32cc9c6633 100644 --- a/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx +++ b/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx @@ -64,7 +64,7 @@ export interface InputChevronWrapperProps { element: BoxProps['element']; } -const InputChevronWrapper = React.forwardRef( +const InputChevronWrapper = React.forwardRef>( ({children, element = 'CHEVRON_WRAPPER'}, ref) => { const {disabled, readOnly, variant} = useInputBoxContext(); diff --git a/packages/paste-core/components/input-box/stories/inputbox.stories.tsx b/packages/paste-core/components/input-box/stories/inputbox.stories.tsx index 9956073df8..67cd5737ba 100644 --- a/packages/paste-core/components/input-box/stories/inputbox.stories.tsx +++ b/packages/paste-core/components/input-box/stories/inputbox.stories.tsx @@ -6,15 +6,15 @@ import {ChevronDownIcon} from '@twilio-paste/icons/esm/ChevronDownIcon'; import type {InputBoxProps} from '../src'; import {InputBox, InputChevronWrapper, getInputChevronIconColor} from '../src'; -const Insert: React.FC = () => { +const Insert = (): JSX.Element => { return ; }; -const Input: React.FC = () => { +const Input = (): JSX.Element => { return ; }; -const CommonStories: React.FC> = ({variant, ...props}) => { +const CommonStories: React.FC>> = ({variant, ...props}) => { return ( diff --git a/packages/paste-core/components/input/package.json b/packages/paste-core/components/input/package.json index d6317dbb7f..a512c5ce54 100644 --- a/packages/paste-core/components/input/package.json +++ b/packages/paste-core/components/input/package.json @@ -34,8 +34,8 @@ "@twilio-paste/types": "^3.1.1", "@twilio-paste/uid-library": "^0.2.1", "prop-types": "^15.7.2", - "react": "^16.8.6 || ^17.0.2", - "react-dom": "^16.8.6 || ^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/box": "^7.1.1", @@ -47,7 +47,7 @@ "@twilio-paste/types": "^3.1.9", "@twilio-paste/uid-library": "^0.2.6", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/packages/paste-core/components/label/package.json b/packages/paste-core/components/label/package.json index 9c1c8f8eea..e223b9dcb2 100644 --- a/packages/paste-core/components/label/package.json +++ b/packages/paste-core/components/label/package.json @@ -35,8 +35,8 @@ "@twilio-paste/types": "^3.1.1", "@twilio-paste/uid-library": "^0.2.1", "prop-types": "^15.7.2", - "react": "^16.8.6 || ^17.0.2", - "react-dom": "^16.8.6 || ^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/box": "^7.1.1", @@ -49,7 +49,7 @@ "@twilio-paste/types": "^3.1.9", "@twilio-paste/uid-library": "^0.2.6", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/packages/paste-core/components/label/src/RequiredDot.tsx b/packages/paste-core/components/label/src/RequiredDot.tsx index 6d41de824e..a5156b6378 100644 --- a/packages/paste-core/components/label/src/RequiredDot.tsx +++ b/packages/paste-core/components/label/src/RequiredDot.tsx @@ -9,7 +9,11 @@ export interface RequiredDotProps { i18nLabel?: string; } -export const RequiredDot: React.FC = ({element = 'REQUIRED_DOT', i18nLabel = '', ...props}) => { +export const RequiredDot: React.FC> = ({ + element = 'REQUIRED_DOT', + i18nLabel = '', + ...props +}) => { return ( { I18n.storyName = 'i18n label'; -export const Customized: React.FC = () => { +export const Customized = (): JSX.Element => { const currentTheme = useTheme(); return ( diff --git a/packages/paste-core/components/list/package.json b/packages/paste-core/components/list/package.json index b11107f4e0..09da795292 100644 --- a/packages/paste-core/components/list/package.json +++ b/packages/paste-core/components/list/package.json @@ -32,8 +32,8 @@ "@twilio-paste/theme": "^8.0.0", "@twilio-paste/types": "^3.1.1", "prop-types": "^15.7.2", - "react": "^16.8.6 || ^17.0.2", - "react-dom": "^16.8.6 || ^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/design-tokens": "^8.1.2", @@ -43,7 +43,7 @@ "@twilio-paste/theme": "^8.0.3", "@twilio-paste/types": "^3.1.9", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/packages/paste-core/components/menu/__tests__/index.spec.tsx b/packages/paste-core/components/menu/__tests__/index.spec.tsx index be576d20d2..3b005df918 100644 --- a/packages/paste-core/components/menu/__tests__/index.spec.tsx +++ b/packages/paste-core/components/menu/__tests__/index.spec.tsx @@ -30,7 +30,7 @@ const PreferencesMenu = React.forwardRef(fun }); const GROUP_LABEL_TEXT = 'Search Options'; -const MenuMock: React.FC<{groupRef?: React.Ref}> = ({groupRef}) => { +const MenuMock: React.FC}>> = ({groupRef}) => { const menu = useMenuState({baseId: 'menu-example'}); return ( <> diff --git a/packages/paste-core/components/menu/package.json b/packages/paste-core/components/menu/package.json index a6e2d99f0a..fad89a59d1 100644 --- a/packages/paste-core/components/menu/package.json +++ b/packages/paste-core/components/menu/package.json @@ -42,8 +42,8 @@ "@twilio-paste/types": "^3.1.1", "@twilio-paste/uid-library": "^0.2.1", "prop-types": "^15.7.2", - "react": "^16.8.6 || ^17.0.2", - "react-dom": "^16.8.6 || ^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/anchor": "^9.0.1", @@ -63,7 +63,7 @@ "@twilio-paste/types": "^3.1.9", "@twilio-paste/uid-library": "^0.2.6", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/packages/paste-core/components/menu/stories/customization.stories.tsx b/packages/paste-core/components/menu/stories/customization.stories.tsx index 3751c819a7..d14864239f 100644 --- a/packages/paste-core/components/menu/stories/customization.stories.tsx +++ b/packages/paste-core/components/menu/stories/customization.stories.tsx @@ -101,99 +101,97 @@ export default { excludeStories: ['initStyles', 'BaseMenu'], }; -export const BaseMenu: React.FC<{menuButtonVariant?: ButtonVariants; element?: string}> = React.memo(function BaseMenu({ - menuButtonVariant = 'primary', - element, -}) { - const uniqueBaseID = useUID(); - const menu = useMenuState({ - visible: true, - baseId: `${uniqueBaseID}-${menuButtonVariant}-menu-customization-story`, - }); +export const BaseMenu: React.FC> = + React.memo(function BaseMenu({menuButtonVariant = 'primary', element}) { + const uniqueBaseID = useUID(); + const menu = useMenuState({ + visible: true, + baseId: `${uniqueBaseID}-${menuButtonVariant}-menu-customization-story`, + }); - const subMenu = useMenuState({baseId: `${uniqueBaseID}-${menuButtonVariant}-menu-submenu`}); - const onClick = React.useCallback(() => { - menu.hide(); - }, [menu.hide]); - return ( - <> - - Preferences - - - } - label="Settings" - data-testid="menu-group-settings" + const subMenu = useMenuState({baseId: `${uniqueBaseID}-${menuButtonVariant}-menu-submenu`}); + const onClick = React.useCallback(() => { + menu.hide(); + }, [menu.hide]); + return ( + <> + - - User info - - - Extensions - - {/* submenu */} - - Advanced settings - - - - Keyboard shortcuts + Preferences + + + } + label="Settings" + data-testid="menu-group-settings" + > + + User info - - {/* submenu */} - - - } - label="Search Options" - data-testid="menu-group-search-options" - > - - Google - - - - Bing - - - - } - label="Help" - data-testid="menu-group-help" - > - + Extensions + + {/* submenu */} + + Advanced settings + + + + Keyboard shortcuts + + + {/* submenu */} + + + } + label="Search Options" + data-testid="menu-group-search-options" > - Contact support - - + Google + + + + Bing + + + + } + label="Help" + data-testid="menu-group-help" > - View FAQ - - - - - ); -}); + + Contact support + + + View FAQ + + + + + ); + }); export const WithDefaultElementName: Story = (_args, {parameters: {isTestEnvironment}}) => { const currentTheme = useTheme(); diff --git a/packages/paste-core/components/menu/stories/index.stories.tsx b/packages/paste-core/components/menu/stories/index.stories.tsx index 34c5a39864..e4cc001e60 100644 --- a/packages/paste-core/components/menu/stories/index.stories.tsx +++ b/packages/paste-core/components/menu/stories/index.stories.tsx @@ -11,7 +11,7 @@ import {useUID} from '@twilio-paste/uid-library'; import {Menu, MenuButton, SubMenuButton, MenuGroup, MenuItem, MenuSeparator, useMenuState} from '../src'; -const PlainMenu: React.FC = () => { +const PlainMenu: React.FC> = () => { const menu = useMenuState(); const onClick = (): void => { menu.hide(); @@ -43,7 +43,7 @@ const PlainMenu: React.FC = () => { ); }; -const AutoplacedMenu: React.FC = () => { +const AutoplacedMenu = (): JSX.Element => { const menu = useMenuState({visible: true}); return ( <> @@ -83,7 +83,7 @@ const PreferencesMenu = React.forwardRef((props, ref) => { PreferencesMenu.displayName = 'PreferencesMenu'; -const SubMenu: React.FC = () => { +const SubMenu = (): JSX.Element => { const menu = useMenuState(); return ( <> @@ -100,7 +100,7 @@ const SubMenu: React.FC = () => { ); }; -const Example3: React.FC = () => { +const Example3 = (): JSX.Element => { const menu = useMenuState(); return ( <> @@ -126,7 +126,7 @@ const Example3: React.FC = () => { ); }; -const Example4: React.FC = () => { +const Example4 = (): JSX.Element => { const menu = useMenuState(); return ( <> @@ -152,7 +152,7 @@ const Example4: React.FC = () => { ); }; -const WithActionsMenu: React.FC = () => { +const WithActionsMenu = (): JSX.Element => { const menu = useMenuState(); return ( <> @@ -181,7 +181,7 @@ const WithActionsMenu: React.FC = () => { ); }; -const MenuGroups: React.FC = () => { +const MenuGroups = (): JSX.Element => { const menu = useMenuState(); return ( <> diff --git a/packages/paste-core/components/minimizable-dialog/__tests__/customization.spec.tsx b/packages/paste-core/components/minimizable-dialog/__tests__/customization.spec.tsx index 7788e9a52c..e88d9a2d9d 100644 --- a/packages/paste-core/components/minimizable-dialog/__tests__/customization.spec.tsx +++ b/packages/paste-core/components/minimizable-dialog/__tests__/customization.spec.tsx @@ -10,7 +10,7 @@ import { MinimizableDialogContent, } from '../src'; -const CustomizationWrapper: React.FC = ({children}) => ( +const CustomizationWrapper: React.FC = ({children}) => ( ( ); -const MyCustomizationWrapper: React.FC = ({children}) => ( +const MyCustomizationWrapper: React.FC = ({children}) => ( = ({ +const BaseMinimizableDialogContainer: React.FC> = ({ gutter, children, placement, diff --git a/packages/paste-core/components/minimizable-dialog/stories/index.stories.tsx b/packages/paste-core/components/minimizable-dialog/stories/index.stories.tsx index f054a366c1..e9001042fe 100644 --- a/packages/paste-core/components/minimizable-dialog/stories/index.stories.tsx +++ b/packages/paste-core/components/minimizable-dialog/stories/index.stories.tsx @@ -25,7 +25,7 @@ export default { component: MinimizableDialog, }; -const DialogExample: React.FC<{minimized?: boolean}> = ({minimized = false}) => { +const DialogExample: React.FC> = ({minimized = false}) => { const nameID = useUID(); const emailID = useUID(); const questionID = useUID(); diff --git a/packages/paste-core/components/modal/__tests__/index.spec.tsx b/packages/paste-core/components/modal/__tests__/index.spec.tsx index 50f12e4aa0..94c62e76a3 100644 --- a/packages/paste-core/components/modal/__tests__/index.spec.tsx +++ b/packages/paste-core/components/modal/__tests__/index.spec.tsx @@ -13,7 +13,7 @@ import {Modal, ModalBody, ModalFooter, ModalFooterActions, ModalHeader, ModalHea const handleCloseMock: jest.Mock = jest.fn(); -const MockModal: React.FC<{children?: React.ReactNode}> = ({children}) => { +const MockModal: React.FC> = ({children}) => { const modalHeadingID = `modal-${useUID()}`; return ( @@ -51,7 +51,7 @@ const MockModal: React.FC<{children?: React.ReactNode}> = ({children}) => { ); }; -const MockInitalFocusModal: React.FC = () => { +const MockInitalFocusModal = (): JSX.Element => { const [name, setName] = React.useState(''); const modalHeadingID = `modal-${useUID()}`; const nameInputRef: React.RefObject = React.createRef(); @@ -96,7 +96,7 @@ const MockInitalFocusModal: React.FC = () => { ); }; -const I18nMockModal: React.FC = () => { +const I18nMockModal = (): JSX.Element => { const modalHeadingID = `modal-${useUID()}`; return ( diff --git a/packages/paste-core/components/modal/package.json b/packages/paste-core/components/modal/package.json index 872206957e..448c5ebc05 100644 --- a/packages/paste-core/components/modal/package.json +++ b/packages/paste-core/components/modal/package.json @@ -41,8 +41,8 @@ "@twilio-paste/types": "^3.1.1", "@twilio-paste/uid-library": "^0.2.1", "prop-types": "^15.7.2", - "react": "^16.8.6 || ^17.0.2", - "react-dom": "^16.8.6 || ^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/animation-library": "^0.3.9", @@ -61,7 +61,7 @@ "@twilio-paste/types": "^3.1.9", "@twilio-paste/uid-library": "^0.2.6", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/packages/paste-core/components/modal/stories/customization.stories.tsx b/packages/paste-core/components/modal/stories/customization.stories.tsx index d45981d68e..9ff9fe31b3 100644 --- a/packages/paste-core/components/modal/stories/customization.stories.tsx +++ b/packages/paste-core/components/modal/stories/customization.stories.tsx @@ -65,7 +65,7 @@ const getElementName = (elementName: string | undefined, suffix?: string): strin type BaseModalProps = Pick & {element?: string | undefined}; const NOOP: VoidFunction = () => null; -export const BaseModal: React.FC = ({size, element}) => { +export const BaseModal: React.FC> = ({size, element}) => { const modalHeadingId = useUID(); return ( diff --git a/packages/paste-core/components/modal/stories/index.stories.tsx b/packages/paste-core/components/modal/stories/index.stories.tsx index bde66fe080..528c9e5598 100644 --- a/packages/paste-core/components/modal/stories/index.stories.tsx +++ b/packages/paste-core/components/modal/stories/index.stories.tsx @@ -27,7 +27,7 @@ import { } from '../src'; type ModalTriggerProps = Pick; -const ModalTrigger: React.FC = ({size}) => { +const ModalTrigger: React.FC> = ({size}) => { const [isOpen, setIsOpen] = React.useState(true); const handleOpen = (): void => setIsOpen(true); const handleClose = (): void => setIsOpen(false); diff --git a/packages/paste-core/components/pagination/package.json b/packages/paste-core/components/pagination/package.json index 26fc954dab..ee362effe8 100644 --- a/packages/paste-core/components/pagination/package.json +++ b/packages/paste-core/components/pagination/package.json @@ -35,8 +35,8 @@ "@twilio-paste/types": "^3.1.1", "@twilio-paste/uid-library": "^0.2.1", "prop-types": "^15.7.2", - "react": "^16.8.6 || ^17.0.2", - "react-dom": "^16.8.6 || ^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/box": "^7.1.1", @@ -49,7 +49,7 @@ "@twilio-paste/types": "^3.1.9", "@twilio-paste/uid-library": "^0.2.6", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/packages/paste-core/components/pagination/src/PaginationArrow/PaginationArrowIconWrapper.tsx b/packages/paste-core/components/pagination/src/PaginationArrow/PaginationArrowIconWrapper.tsx index f820e17609..f72a5bac77 100644 --- a/packages/paste-core/components/pagination/src/PaginationArrow/PaginationArrowIconWrapper.tsx +++ b/packages/paste-core/components/pagination/src/PaginationArrow/PaginationArrowIconWrapper.tsx @@ -4,7 +4,7 @@ import {Box} from '@twilio-paste/box'; import type {PaginationArrowIconWrapperProps} from '../types'; import {PaginationArrowIconWrapperPropTypes} from '../proptypes'; -const PaginationArrowIconWrapper: React.FC = ({ +const PaginationArrowIconWrapper: React.FC> = ({ children, element = 'PAGINATION_ARROW_ICON_WRAPPER', isFocused, diff --git a/packages/paste-core/components/pagination/stories/customization.stories.tsx b/packages/paste-core/components/pagination/stories/customization.stories.tsx index ccb763a714..d363f2a368 100644 --- a/packages/paste-core/components/pagination/stories/customization.stories.tsx +++ b/packages/paste-core/components/pagination/stories/customization.stories.tsx @@ -20,7 +20,10 @@ import { } from '../src'; // Wrapper to abstract the rendering of the default and customized pagination versions -const BeforeAndAfter: React.FC<{before: React.ReactNode; after: React.ReactNode}> = ({before, after}) => ( +const BeforeAndAfter: React.FC> = ({ + before, + after, +}) => ( Default: @@ -33,7 +36,9 @@ const BeforeAndAfter: React.FC<{before: React.ReactNode; after: React.ReactNode} ); -export const WrapperAndArrows: React.FC<{element?: BoxElementProps['element']}> = ({element = 'PAGINATION'}) => { +export const WrapperAndArrows: React.FC> = ({ + element = 'PAGINATION', +}) => { // we use this to create unique labels for landmark elements when stacked or side-by-side const uniquePaginationID = useUID(); return ( @@ -57,7 +62,9 @@ export const WrapperAndArrows: React.FC<{element?: BoxElementProps['element']}> ); }; -export const NumbersAndLabel: React.FC<{element?: BoxElementProps['element']}> = ({element = 'PAGINATION'}) => { +export const NumbersAndLabel: React.FC> = ({ + element = 'PAGINATION', +}) => { // we use this to create unique labels for landmark elements when stacked or side-by-side const uniquePaginationID = useUID(); return ( diff --git a/packages/paste-core/components/pagination/stories/index.stories.tsx b/packages/paste-core/components/pagination/stories/index.stories.tsx index e0e68f325c..58a262b8e3 100644 --- a/packages/paste-core/components/pagination/stories/index.stories.tsx +++ b/packages/paste-core/components/pagination/stories/index.stories.tsx @@ -11,7 +11,7 @@ import { PaginationNumbers, } from '../src'; -export const ArrowExample: React.FC = () => { +export const ArrowExample = (): JSX.Element => { // we use this to create unique labels for landmark elements when stacked or side-by-side const uniquePaginationID = useUID(); return ( @@ -24,7 +24,7 @@ export const ArrowExample: React.FC = () => { ); }; -export const ArrowsAsAnchorsExample: React.FC = () => { +export const ArrowsAsAnchorsExample = (): JSX.Element => { // we use this to create unique labels for landmark elements when stacked or side-by-side const uniquePaginationID = useUID(); return ( @@ -37,7 +37,7 @@ export const ArrowsAsAnchorsExample: React.FC = () => { ); }; -export const ArrowLabelsExample: React.FC = () => { +export const ArrowLabelsExample = (): JSX.Element => { // we use this to create unique labels for landmark elements when stacked or side-by-side const uniquePaginationID = useUID(); return ( @@ -50,7 +50,7 @@ export const ArrowLabelsExample: React.FC = () => { ); }; -export const ArrowAsAnchorLabelsExample: React.FC = () => { +export const ArrowAsAnchorLabelsExample = (): JSX.Element => { // we use this to create unique labels for landmark elements when stacked or side-by-side const uniquePaginationID = useUID(); return ( @@ -63,7 +63,7 @@ export const ArrowAsAnchorLabelsExample: React.FC = () => { ); }; -export const ArrowsPageLabelExample: React.FC<{staticLabel?: string}> = ({staticLabel}) => { +export const ArrowsPageLabelExample: React.FC> = ({staticLabel}) => { // we use this to create unique labels for landmark elements when stacked or side-by-side const uniquePaginationID = useUID(); return ( @@ -77,7 +77,7 @@ export const ArrowsPageLabelExample: React.FC<{staticLabel?: string}> = ({static ); }; -export const NumbersExample: React.FC = () => { +export const NumbersExample = (): JSX.Element => { // we use this to create unique labels for landmark elements when stacked or side-by-side const uniquePaginationID = useUID(); return ( @@ -101,7 +101,7 @@ export const NumbersExample: React.FC = () => { ); }; -export const NumbersAsAnchorsExample: React.FC = () => { +export const NumbersAsAnchorsExample = (): JSX.Element => { // we use this to create unique labels for landmark elements when stacked or side-by-side const uniquePaginationID = useUID(); return ( @@ -133,7 +133,7 @@ export const NumbersAsAnchorsExample: React.FC = () => { ); }; -export const NumbersPageLabelExample: React.FC = () => { +export const NumbersPageLabelExample = (): JSX.Element => { // we use this to create unique labels for landmark elements when stacked or side-by-side const uniquePaginationID = useUID(); return ( @@ -157,7 +157,7 @@ export const NumbersPageLabelExample: React.FC = () => { ); }; -export const ControlledArrowPaginationExample: React.FC = () => { +export const ControlledArrowPaginationExample = (): JSX.Element => { const [currentPage, setCurrentPage] = React.useState(1); const totalPages = 7; @@ -198,7 +198,7 @@ export const ControlledArrowPaginationExample: React.FC = () => { ); }; -export const ControlledNumberPaginationExample: React.FC = () => { +export const ControlledNumberPaginationExample = (): JSX.Element => { const [currentPage, setCurrentPage] = React.useState(1); const pages = [1, 2, 3, 4, 5, 6, 7]; const totalPages = pages.length; diff --git a/packages/paste-core/components/paragraph/package.json b/packages/paste-core/components/paragraph/package.json index ec89963678..7df1889518 100644 --- a/packages/paste-core/components/paragraph/package.json +++ b/packages/paste-core/components/paragraph/package.json @@ -32,8 +32,8 @@ "@twilio-paste/theme": "^8.0.0", "@twilio-paste/types": "^3.1.1", "prop-types": "^15.7.2", - "react": "^16.8.6 || ^17.0.2", - "react-dom": "^16.8.6 || ^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/design-tokens": "^8.1.2", @@ -43,7 +43,7 @@ "@twilio-paste/theme": "^8.0.3", "@twilio-paste/types": "^3.1.9", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/packages/paste-core/components/popover/package.json b/packages/paste-core/components/popover/package.json index aea46515fe..e894fe5081 100644 --- a/packages/paste-core/components/popover/package.json +++ b/packages/paste-core/components/popover/package.json @@ -40,8 +40,8 @@ "@twilio-paste/types": "^3.1.1", "@twilio-paste/uid-library": "^0.2.1", "prop-types": "^15.7.2", - "react": "^16.8.6 || ^17.0.2", - "react-dom": "^16.8.6 || ^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/badge": "^5.0.1", @@ -59,7 +59,7 @@ "@twilio-paste/types": "^3.1.9", "@twilio-paste/uid-library": "^0.2.6", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/packages/paste-core/components/popover/src/PopoverArrow.tsx b/packages/paste-core/components/popover/src/PopoverArrow.tsx index e2d080d8ed..d04fd54378 100644 --- a/packages/paste-core/components/popover/src/PopoverArrow.tsx +++ b/packages/paste-core/components/popover/src/PopoverArrow.tsx @@ -5,7 +5,7 @@ import {useTheme} from '@twilio-paste/theme'; export type PopoverArrowProps = NonModalDialogArrowPrimitiveProps; -const PopoverArrow: React.FC = (props) => { +const PopoverArrow: React.FC> = (props) => { const theme = useTheme(); return ( diff --git a/packages/paste-core/components/popover/src/PopoverContainer.tsx b/packages/paste-core/components/popover/src/PopoverContainer.tsx index 4f938ff229..df0163ed47 100644 --- a/packages/paste-core/components/popover/src/PopoverContainer.tsx +++ b/packages/paste-core/components/popover/src/PopoverContainer.tsx @@ -16,7 +16,7 @@ export interface PopoverContainerProps extends NonModalDialogPrimitivePopoverIni state?: PopoverStateReturn; } -const BasePopoverContainer: React.FC = ({ +const BasePopoverContainer: React.FC> = ({ children, gutter, placement, diff --git a/packages/paste-core/components/popover/stories/index.stories.tsx b/packages/paste-core/components/popover/stories/index.stories.tsx index fd3c2b73e3..10c39cd4f5 100644 --- a/packages/paste-core/components/popover/stories/index.stories.tsx +++ b/packages/paste-core/components/popover/stories/index.stories.tsx @@ -25,7 +25,7 @@ export default { }, }; -export const Default: React.FC = () => { +export const Default = (): JSX.Element => { const uniqueBaseID = useUID(); return ( @@ -39,7 +39,7 @@ export const Default: React.FC = () => { ); }; -export const SmallerSize: React.FC = () => { +export const SmallerSize = (): JSX.Element => { const uniqueBaseID = useUID(); return ( @@ -55,7 +55,7 @@ export const SmallerSize: React.FC = () => { ); }; -export const WideContent: React.FC = () => { +export const WideContent = (): JSX.Element => { const date1ID = useUID(); const time1ID = useUID(); const date2ID = useUID(); @@ -93,7 +93,7 @@ export const WideContent: React.FC = () => { ); }; -export const PopoverTop: React.FC = () => { +export const PopoverTop = (): JSX.Element => { const uniqueBaseID = useUID(); return ( @@ -107,7 +107,7 @@ export const PopoverTop: React.FC = () => { ); }; -export const PopoverLeft: React.FC = () => { +export const PopoverLeft = (): JSX.Element => { const uniqueBaseID = useUID(); return ( @@ -121,7 +121,7 @@ export const PopoverLeft: React.FC = () => { ); }; -export const PopoverRight: React.FC = () => { +export const PopoverRight = (): JSX.Element => { const uniqueBaseID = useUID(); return ( @@ -133,7 +133,7 @@ export const PopoverRight: React.FC = () => { ); }; -export const PopoverBottom: React.FC = () => { +export const PopoverBottom = (): JSX.Element => { const uniqueBaseID = useUID(); return ( @@ -145,7 +145,7 @@ export const PopoverBottom: React.FC = () => { ); }; -export const BadgePopover: React.FC = () => { +export const BadgePopover = (): JSX.Element => { const uniqueBaseID = useUID(); return ( @@ -159,7 +159,7 @@ export const BadgePopover: React.FC = () => { ); }; -export const StateHookExample: React.FC = () => { +export const StateHookExample = (): JSX.Element => { const uniqueBaseID = useUID(); const popover = usePopoverState({baseId: uniqueBaseID}); return ( diff --git a/packages/paste-core/components/radio-button-group/package.json b/packages/paste-core/components/radio-button-group/package.json index 23105391cf..6d3c57587c 100644 --- a/packages/paste-core/components/radio-button-group/package.json +++ b/packages/paste-core/components/radio-button-group/package.json @@ -42,8 +42,8 @@ "@twilio-paste/types": "^3.1.1", "@twilio-paste/uid-library": "^0.2.1", "prop-types": "^15.7.2", - "react": "^16.8.6 || ^17.0.2", - "react-dom": "^16.8.6 || ^17.0.2" + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { "@twilio-paste/box": "^7.1.1", @@ -63,7 +63,7 @@ "@twilio-paste/types": "^3.1.9", "@twilio-paste/uid-library": "^0.2.6", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/packages/paste-core/components/radio-group/__tests__/radio.test.tsx b/packages/paste-core/components/radio-group/__tests__/radio.test.tsx index 3275abcf23..f961db65e1 100644 --- a/packages/paste-core/components/radio-group/__tests__/radio.test.tsx +++ b/packages/paste-core/components/radio-group/__tests__/radio.test.tsx @@ -288,7 +288,7 @@ describe('Radio Group event handlers', () => { }); it('Should check the selected radio (controlled)', () => { - const MockRadioGroup: React.FC = () => { + const MockRadioGroup = (): JSX.Element => { const [value, setValue] = React.useState('2'); return ( { }); it('Should check the selected radio (uncontrolled)', () => { - const MockRadioGroup: React.FC = () => { + const MockRadioGroup = (): JSX.Element => { return ( @@ -355,7 +355,7 @@ describe('Radio Group event handlers', () => { }); it('Should check the selected value on initial', () => { - const MockRadioGroup: React.FC = () => { + const MockRadioGroup = (): JSX.Element => { const [value, setValue] = React.useState('2'); return ( = ({suffix = 'test', ...props}): React.ReactElement => { +const ExampleOption: React.FC> = ({ + suffix = 'test', + ...props +}): React.ReactElement => { return (