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 9f7b9d1b39..b835f93227 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -210,7 +210,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 e75df3f096..a7a87555c6 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 cef0e6cc74..b13c05247d 100644 --- a/package.json +++ b/package.json @@ -139,16 +139,16 @@ "@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": "^18.11.13", - "@types/react": "^17.0.31", + "@types/react": "^18.0.0", "@types/react-color": "^3.0.6", "@types/react-github-button": "^0.1.1", "@types/react-helmet": "^5.0.14", @@ -209,8 +209,8 @@ "prettier": "^2.8.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 4bb35e531b..1b507d0c4f 100644 --- a/packages/paste-core/components/alert-dialog/package.json +++ b/packages/paste-core/components/alert-dialog/package.json @@ -47,8 +47,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.0", @@ -73,7 +73,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 3c10c7fba0..30d8099bcf 100644 --- a/packages/paste-core/components/alert-dialog/stories/index.stories.tsx +++ b/packages/paste-core/components/alert-dialog/stories/index.stories.tsx @@ -50,7 +50,7 @@ AlertDialogWithTwoActionsStory.parameters = { chromatic: {disableSnapshot: true}, }; -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); @@ -108,7 +108,7 @@ OpenAlertDialogFromButtonStory.parameters = { chromatic: {disableSnapshot: true}, }; -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); diff --git a/packages/paste-core/components/alert/package.json b/packages/paste-core/components/alert/package.json index 53306c7f81..4c0d29546e 100644 --- a/packages/paste-core/components/alert/package.json +++ b/packages/paste-core/components/alert/package.json @@ -43,8 +43,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.0", @@ -65,7 +65,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/anchor/package.json b/packages/paste-core/components/anchor/package.json index afbef65626..ffdca9131e 100644 --- a/packages/paste-core/components/anchor/package.json +++ b/packages/paste-core/components/anchor/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.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/avatar/package.json b/packages/paste-core/components/avatar/package.json index f9009ec32b..36eb6d8949 100644 --- a/packages/paste-core/components/avatar/package.json +++ b/packages/paste-core/components/avatar/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/animation-library": "^0.3.1", @@ -59,7 +59,7 @@ "@twilio-paste/types": "^3.1.9", "@twilio-paste/uid-library": "^0.2.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/avatar/src/index.tsx b/packages/paste-core/components/avatar/src/index.tsx index 3edb0983a3..e571c65bc1 100644 --- a/packages/paste-core/components/avatar/src/index.tsx +++ b/packages/paste-core/components/avatar/src/index.tsx @@ -11,7 +11,12 @@ import type {AvatarProps, AvatarContentProps, ColorVariants, AvatarVariants} fro const DEFAULT_SIZE = 'sizeIcon70'; -const AvatarContents: React.FC = ({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 0ec59c35ff..5ffa6d29a8 100644 --- a/packages/paste-core/components/badge/package.json +++ b/packages/paste-core/components/badge/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/anchor": "^9.0.2", @@ -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/badge/src/index.tsx b/packages/paste-core/components/badge/src/index.tsx index 0dad8dda7b..c9b69ad531 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 ecd75341cc..247d6b89de 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 0f0e195ba7..246c00d6a5 100644 --- a/packages/paste-core/components/base-radio-checkbox/package.json +++ b/packages/paste-core/components/base-radio-checkbox/package.json @@ -44,8 +44,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.1", @@ -67,7 +67,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 ab4b476433..4f7875acc8 100644 --- a/packages/paste-core/components/breadcrumb/package.json +++ b/packages/paste-core/components/breadcrumb/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/anchor": "^9.0.2", @@ -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/breadcrumb/src/index.tsx b/packages/paste-core/components/breadcrumb/src/index.tsx index cb1ecc5ce5..1e0a0668a2 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 d77b7a6387..eddfc2492c 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 c9a425417e..4484a69636 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) => { @@ -201,7 +201,7 @@ export const ButtonAsAnchor = (): React.ReactNode => { ); }; -const IconSizeOptions: React.FC<{variant: ButtonVariants}> = ({variant}) => { +const IconSizeOptions: React.FC> = ({variant}) => { return ( @@ -271,7 +271,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}) => ( = ({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 0d1a9ff60c..b8389fc08d 100644 --- a/packages/paste-core/components/card/package.json +++ b/packages/paste-core/components/card/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.1", @@ -49,7 +49,7 @@ "@twilio-paste/theme": "^8.2.0", "@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 327767b300..a7a3a836d8 100644 --- a/packages/paste-core/components/chat-composer/package.json +++ b/packages/paste-core/components/chat-composer/package.json @@ -39,8 +39,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", @@ -54,8 +54,8 @@ "@twilio-paste/theme": "^8.1.1", "@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.9.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 69bcbccb14..94c780a4a8 100644 --- a/packages/paste-core/components/chat-log/package.json +++ b/packages/paste-core/components/chat-log/package.json @@ -45,8 +45,8 @@ "@twilio-paste/types": "^3.1.1", "@twilio-paste/uid-library": "^0.2.6", "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.2", @@ -69,7 +69,7 @@ "@twilio-paste/types": "^3.1.1", "@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/chat-log/stories/components/ChatAttachment.stories.tsx b/packages/paste-core/components/chat-log/stories/components/ChatAttachment.stories.tsx index 47491718b6..b7ec45651c 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: StoryFn = () => ( ); -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 cb758c1bb9..2ab381155c 100644 --- a/packages/paste-core/components/checkbox/package.json +++ b/packages/paste-core/components/checkbox/package.json @@ -46,8 +46,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.1", @@ -71,7 +71,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 89de4d5f3d..07801b163e 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 64ce7bfa0e..a5b603099c 100644 --- a/packages/paste-core/components/combobox/package.json +++ b/packages/paste-core/components/combobox/package.json @@ -59,8 +59,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.0", @@ -92,8 +92,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.9.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 20e095fc74..e57b18e842 100644 --- a/packages/paste-core/components/combobox/src/multiselect/MultiselectCombobox.tsx +++ b/packages/paste-core/components/combobox/src/multiselect/MultiselectCombobox.tsx @@ -64,7 +64,7 @@ export const MultiselectCombobox = React.forwardRef { + (changes: any) => { if (onSelectedItemsChangeProp) { // Only pass the selectedItems, not the other downshift state data onSelectedItemsChangeProp(changes.selectedItems); @@ -216,7 +216,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 1c8c4ddf72..6227fc703d 100644 --- a/packages/paste-core/components/combobox/src/singleselect/Combobox.tsx +++ b/packages/paste-core/components/combobox/src/singleselect/Combobox.tsx @@ -134,7 +134,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 1b455b43b8..7ffd1e5e83 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 a1052831f4..f1f9bb16e5 100644 --- a/packages/paste-core/components/data-grid/package.json +++ b/packages/paste-core/components/data-grid/package.json @@ -48,8 +48,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.2", @@ -72,7 +72,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 53683010fa..ebf920f728 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 63d070dbe4..759b61741e 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 ab33a36cc5..e584b1acd6 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 72ca960151..251dc6ef67 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 b5eabc96d3..fd3c3c9422 100644 --- a/packages/paste-core/components/data-grid/stories/components/CustomizableDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/CustomizableDataGrid.tsx @@ -38,7 +38,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 c579a2228b..f24051906e 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 4cbbc4413d..e0b103a044 100644 --- a/packages/paste-core/components/date-picker/package.json +++ b/packages/paste-core/components/date-picker/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.1", @@ -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/date-picker/stories/index.stories.tsx b/packages/paste-core/components/date-picker/stories/index.stories.tsx index 3bff7c590c..8dde99ed61 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 d299601a81..c5f7936b77 100644 --- a/packages/paste-core/components/disclosure/__tests__/disclosure.test.tsx +++ b/packages/paste-core/components/disclosure/__tests__/disclosure.test.tsx @@ -7,11 +7,13 @@ import {CustomizationProvider} from '@twilio-paste/customization'; import {Disclosure, DisclosureContent, DisclosureHeading, useDisclosureState} from '../src'; import type {DisclosureHeadingProps, DisclosureProps} from '../src'; -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 ( @@ -24,7 +26,7 @@ const MockDisclosure: React.FC<{ ); }; -const MockDefaultElementDisclosure: React.FC = () => { +const MockDefaultElementDisclosure = (): JSX.Element => { return ( @@ -35,7 +37,7 @@ const MockDefaultElementDisclosure: React.FC = () => { ); }; -const MockCustomElementDisclosure: React.FC = () => { +const MockCustomElementDisclosure = (): JSX.Element => { return ( @@ -51,7 +53,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 8c08eb2274..d28cc5bb14 100644 --- a/packages/paste-core/components/disclosure/package.json +++ b/packages/paste-core/components/disclosure/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/animation-library": "^0.3.9", @@ -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/disclosure/stories/index.stories.tsx b/packages/paste-core/components/disclosure/stories/index.stories.tsx index cd65b8fd23..c3101c87cd 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 e35cf9b5d6..c77de09a8a 100644 --- a/packages/paste-core/components/display-heading/package.json +++ b/packages/paste-core/components/display-heading/package.json @@ -36,8 +36,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", @@ -51,8 +51,8 @@ "@twilio-paste/theme": "^8.1.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.9.4" } } diff --git a/packages/paste-core/components/display-pill-group/package.json b/packages/paste-core/components/display-pill-group/package.json index d4fb6426f6..89c22bcc92 100644 --- a/packages/paste-core/components/display-pill-group/package.json +++ b/packages/paste-core/components/display-pill-group/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/display-pill-group/stories/customization.stories.tsx b/packages/paste-core/components/display-pill-group/stories/customization.stories.tsx index 20f7a2d7ef..fcf4e732b8 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 a13b07fd32..8c9dc2b455 100644 --- a/packages/paste-core/components/file-picker/package.json +++ b/packages/paste-core/components/file-picker/package.json @@ -43,8 +43,8 @@ "@twilio-paste/types": "^3.1.1", "@twilio-paste/uid-library": "^0.2.5", "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.0", @@ -65,7 +65,7 @@ "@twilio-paste/types": "^3.1.1", "@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 e675762638..48f6b93fb7 100644 --- a/packages/paste-core/components/form-pill-group/package.json +++ b/packages/paste-core/components/form-pill-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/animation-library": "^0.3.9", @@ -60,7 +60,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 7363865fa2..c695e0efce 100644 --- a/packages/paste-core/components/form-pill-group/src/PillCloseIcon.tsx +++ b/packages/paste-core/components/form-pill-group/src/PillCloseIcon.tsx @@ -21,7 +21,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 6f0590bbb7..3b077bce4b 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/heading/package.json b/packages/paste-core/components/heading/package.json index a853004655..7cdebcdd9b 100644 --- a/packages/paste-core/components/heading/package.json +++ b/packages/paste-core/components/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.1", @@ -49,7 +49,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/help-text/package.json b/packages/paste-core/components/help-text/package.json index 6e5de2c76d..e44442d069 100644 --- a/packages/paste-core/components/help-text/package.json +++ b/packages/paste-core/components/help-text/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.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/in-page-navigation/package.json b/packages/paste-core/components/in-page-navigation/package.json index d6f75d10e4..705c627e49 100644 --- a/packages/paste-core/components/in-page-navigation/package.json +++ b/packages/paste-core/components/in-page-navigation/package.json @@ -38,8 +38,8 @@ "@twilio-paste/types": "^3.1.1", "@twilio-paste/uid-library": "^0.2.6", "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.2", @@ -55,8 +55,8 @@ "@twilio-paste/types": "^3.1.1", "@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", "typescript": "^4.9.4" } } diff --git a/packages/paste-core/components/inline-code/package.json b/packages/paste-core/components/inline-code/package.json index 57f90edc3d..9b6c28bebd 100644 --- a/packages/paste-core/components/inline-code/package.json +++ b/packages/paste-core/components/inline-code/package.json @@ -35,8 +35,8 @@ "@twilio-paste/theme": "^8.0.1", "@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.1", @@ -49,7 +49,7 @@ "@twilio-paste/theme": "^8.0.3", "@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" } } diff --git a/packages/paste-core/components/inline-control-group/package.json b/packages/paste-core/components/inline-control-group/package.json index 451a8558cc..6645284775 100644 --- a/packages/paste-core/components/inline-control-group/package.json +++ b/packages/paste-core/components/inline-control-group/package.json @@ -43,8 +43,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.1", @@ -65,7 +65,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/inline-control-group/stories/inline-control-group.stories.tsx b/packages/paste-core/components/inline-control-group/stories/inline-control-group.stories.tsx index 470e9a2d83..1ac6d402a9 100644 --- a/packages/paste-core/components/inline-control-group/stories/inline-control-group.stories.tsx +++ b/packages/paste-core/components/inline-control-group/stories/inline-control-group.stories.tsx @@ -9,17 +9,19 @@ import {useTheme} from '@twilio-paste/theme'; import {InlineControlGroup} from '../src'; import type {InlineControlGroupProps} from '../src'; -const MockChild: React.FC = ({children}) => { +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 2dfa15612f..2d3d8bad4d 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 430a3d9d60..228627dc59 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 2f6ece85a4..f8538deaa9 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 7ef655f334..3d07f882b3 100644 --- a/packages/paste-core/components/input/package.json +++ b/packages/paste-core/components/input/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.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/label/package.json b/packages/paste-core/components/label/package.json index d02053bedc..7dcd832aa7 100644 --- a/packages/paste-core/components/label/package.json +++ b/packages/paste-core/components/label/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.1", @@ -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/label/src/RequiredDot.tsx b/packages/paste-core/components/label/src/RequiredDot.tsx index 48858db723..57b0917eca 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 ( (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 2b76b4735b..c75a2ee684 100644 --- a/packages/paste-core/components/menu/package.json +++ b/packages/paste-core/components/menu/package.json @@ -46,8 +46,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.2", @@ -71,7 +71,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 c5a1921167..745cf122af 100644 --- a/packages/paste-core/components/menu/stories/customization.stories.tsx +++ b/packages/paste-core/components/menu/stories/customization.stories.tsx @@ -105,99 +105,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: StoryFn = (_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 ec4d07d219..bd10c272d7 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 c2324776f1..88aad508fc 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 18b1c0a5ba..388404f1f5 100644 --- a/packages/paste-core/components/modal/package.json +++ b/packages/paste-core/components/modal/package.json @@ -46,8 +46,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.0", @@ -71,7 +71,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 a1de6d5098..4da6fba367 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 ed215ab47c..8ce1ccc8ce 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 383bb87cf8..d63956c116 100644 --- a/packages/paste-core/components/pagination/package.json +++ b/packages/paste-core/components/pagination/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/animation-library": "^0.3.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/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 c1d19ac61e..502f6e4c31 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 403b4aaad3..74cb2d096a 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 265585de95..83b34b8dcb 100644 --- a/packages/paste-core/components/paragraph/package.json +++ b/packages/paste-core/components/paragraph/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.1", @@ -49,7 +49,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 a3ecbf64be..eb303012f4 100644 --- a/packages/paste-core/components/popover/package.json +++ b/packages/paste-core/components/popover/package.json @@ -46,8 +46,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.0", @@ -71,7 +71,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 5625432969..b7ec3ca904 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 9ccc1b5000..0661e0640c 100644 --- a/packages/paste-core/components/radio-button-group/package.json +++ b/packages/paste-core/components/radio-button-group/package.json @@ -49,8 +49,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.0", @@ -77,7 +77,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 (