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 ee148ce201..d93938187b 100644 --- a/packages/paste-core/components/alert-dialog/stories/index.stories.tsx +++ b/packages/paste-core/components/alert-dialog/stories/index.stories.tsx @@ -24,7 +24,7 @@ export default { ], }; -export const AlertDialogWithTwoActions: React.FC = () => { +export const AlertDialogWithTwoActions: React.FC> = () => { return ( { +export const DestructiveAlertDialog: React.FC> = () => { return ( { +export const OpenAlertDialogFromButton: React.FC> = () => { const [isOpen, setIsOpen] = React.useState(false); const handleOpen = (): void => setIsOpen(true); const handleClose = (): void => setIsOpen(false); @@ -112,7 +112,7 @@ OpenAlertDialogFromButtonStory.story = { }, }; -export const OpenAlertDialogFromModal: React.FC = () => { +export const OpenAlertDialogFromModal: React.FC> = () => { const [isModalOpen, setIsModalOpen] = React.useState(true); const [isAlertDialogOpen, setIsAlertDialogOpen] = React.useState(true); const handleModalOpen = (): void => setIsModalOpen(true); @@ -216,7 +216,7 @@ DestructiveAlertDialogVRT.story = { name: 'Destructive Alert Dialog for VRT', }; -export const CustomizedAlertDialog: React.FC = () => { +export const CustomizedAlertDialog: React.FC> = () => { const theme = useTheme(); return ( { ); }; -export const CustomizedDestructiveAlertDialog: React.FC = () => { +export const CustomizedDestructiveAlertDialog: React.FC> = () => { const currentTheme = useTheme(); return ( = ({name, size = DEFAULT_SIZE, src, icon: Icon}) => { +const AvatarContents: React.FC> = ({ + name, + size = DEFAULT_SIZE, + src, + icon: Icon, +}) => { const computedTokenNames = getComputedTokenNames(size); if (src != null) { return ; diff --git a/packages/paste-core/components/avatar/src/types.ts b/packages/paste-core/components/avatar/src/types.ts index 60efa58a10..9306573a64 100644 --- a/packages/paste-core/components/avatar/src/types.ts +++ b/packages/paste-core/components/avatar/src/types.ts @@ -6,13 +6,13 @@ export type AvatarProps = React.HTMLAttributes<'div'> & Pick & { name: string; size?: IconSize; - icon?: React.FC; + icon?: React.FC>; src?: string; }; export type AvatarContentProps = { name: string; size?: IconSize; - icon?: React.FC; + icon?: React.FC>; src?: string; }; diff --git a/packages/paste-core/components/badge/stories/customization.stories.tsx b/packages/paste-core/components/badge/stories/customization.stories.tsx index d3630f25b2..867c4dff74 100644 --- a/packages/paste-core/components/badge/stories/customization.stories.tsx +++ b/packages/paste-core/components/badge/stories/customization.stories.tsx @@ -36,7 +36,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..9ebbee1631 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: React.FC> = () => ( Neutral @@ -64,7 +64,7 @@ export const AllBadges: React.FC = () => ( ); -export const NeutralBadge: React.FC = () => ( +export const NeutralBadge: React.FC> = () => ( <> Span @@ -121,7 +121,7 @@ export const NeutralBadge: React.FC = () => ( ); -export const WarningBadge: React.FC = () => ( +export const WarningBadge: React.FC> = () => ( <> Span @@ -174,7 +174,7 @@ export const WarningBadge: React.FC = () => ( ); -export const ErrorBadge: React.FC = () => ( +export const ErrorBadge: React.FC> = () => ( <> Span @@ -227,7 +227,7 @@ export const ErrorBadge: React.FC = () => ( ); -export const SuccessBadge: React.FC = () => ( +export const SuccessBadge: React.FC> = () => ( <> Span @@ -284,7 +284,7 @@ export const SuccessBadge: React.FC = () => ( ); -export const NewBadge: React.FC = () => ( +export const NewBadge: React.FC> = () => ( <> Span @@ -337,7 +337,7 @@ export const NewBadge: React.FC = () => ( ); -export const Decorative10Badge: React.FC = () => ( +export const Decorative10Badge: React.FC> = () => ( <> Span @@ -390,7 +390,7 @@ export const Decorative10Badge: React.FC = () => ( ); -export const Decorative20Badge: React.FC = () => ( +export const Decorative20Badge: React.FC> = () => ( <> Span @@ -443,7 +443,7 @@ export const Decorative20Badge: React.FC = () => ( ); -export const Decorative30Badge: React.FC = () => ( +export const Decorative30Badge: React.FC> = () => ( <> Span @@ -496,7 +496,7 @@ export const Decorative30Badge: React.FC = () => ( ); -export const Decorative40Badge: React.FC = () => ( +export const Decorative40Badge: React.FC> = () => ( <> Span @@ -549,7 +549,7 @@ export const Decorative40Badge: React.FC = () => ( ); -export const NeutralCounterBadge: React.FC = () => ( +export const NeutralCounterBadge: React.FC> = () => ( <> Span @@ -596,7 +596,7 @@ export const NeutralCounterBadge: React.FC = () => ( ); -export const ErrorCounterBadge: React.FC = () => ( +export const ErrorCounterBadge: React.FC> = () => ( <> Span @@ -643,7 +643,7 @@ export const ErrorCounterBadge: React.FC = () => ( ); -export const DefaultBadge: React.FC = () => ( +export const DefaultBadge: React.FC> = () => ( <> Span @@ -690,7 +690,7 @@ export const DefaultBadge: React.FC = () => ( ); -export const InfoBadge: React.FC = () => ( +export const InfoBadge: React.FC> = () => ( <> Span @@ -737,7 +737,7 @@ export const InfoBadge: React.FC = () => ( ); -export const LongTextBadge: React.FC = () => ( +export const LongTextBadge: React.FC> = () => ( diff --git a/packages/paste-core/components/breadcrumb/__tests__/breadcrumb.spec.tsx b/packages/paste-core/components/breadcrumb/__tests__/breadcrumb.spec.tsx index 1bf206f069..49b779ef06 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: React.FC> = () => { return ( foo diff --git a/packages/paste-core/components/breadcrumb/src/index.tsx b/packages/paste-core/components/breadcrumb/src/index.tsx index 8b365530e2..ed2edb8e7f 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 ( @@ -158,7 +163,9 @@ const ButtonContents: React.FC = ({buttonState, children, s ); }; -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 805e7020a3..72d6a4d136 100644 --- a/packages/paste-core/components/button/stories/customization.stories.tsx +++ b/packages/paste-core/components/button/stories/customization.stories.tsx @@ -31,11 +31,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 ( @@ -71,10 +72,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 30eef5ec0e..610781d2c8 100644 --- a/packages/paste-core/components/button/stories/index.stories.tsx +++ b/packages/paste-core/components/button/stories/index.stories.tsx @@ -24,7 +24,7 @@ const ButtonSizeOptions = [ 'circle_small', ]; -const AllSizeOptions: React.FC<{variant: ButtonVariants}> = ({variant}) => { +const AllSizeOptions: React.FC> = ({variant}) => { const allButtons: React.ReactNode[] = []; ButtonSizeOptions.forEach((size) => { @@ -196,7 +196,7 @@ export const ButtonAsAnchor = (): React.ReactNode => { ); }; -const IconSizeOptions: React.FC<{variant: ButtonVariants}> = ({variant}) => { +const IconSizeOptions: React.FC> = ({variant}) => { return ( @@ -266,7 +266,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..e09c039995 100644 --- a/packages/paste-core/components/callout/__tests__/customization.spec.tsx +++ b/packages/paste-core/components/callout/__tests__/customization.spec.tsx @@ -4,7 +4,7 @@ import {CustomizationProvider} from '@twilio-paste/customization'; import {Callout, CalloutHeading, CalloutList, CalloutListItem, CalloutText} from '../src'; -const CustomizationWrapper: React.FC = ({children}) => ( +const CustomizationWrapper: React.FC> = ({children}) => ( ( ); -const MyCustomizationWrapper: React.FC = ({children}) => ( +const MyCustomizationWrapper: React.FC> = ({children}) => ( = { }, }; -const variantIcons: Record> = { +const variantIcons: Record>> = { success: SuccessIcon, error: ErrorIcon, warning: WarningIcon, diff --git a/packages/paste-core/components/callout/stories/index.stories.tsx b/packages/paste-core/components/callout/stories/index.stories.tsx index 603b082a54..f2c00897ee 100644 --- a/packages/paste-core/components/callout/stories/index.stories.tsx +++ b/packages/paste-core/components/callout/stories/index.stories.tsx @@ -9,7 +9,7 @@ export default { component: Callout, }; -const ExampleList: React.FC<{as: 'ul' | 'ol'}> = ({as}) => ( +const ExampleList: React.FC> = ({as}) => ( Item one Item two diff --git a/packages/paste-core/components/chat-log/__tests__/ChatAttachment.spec.tsx b/packages/paste-core/components/chat-log/__tests__/ChatAttachment.spec.tsx index db4ebff0d7..e14f8482c5 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 26628d8c0e..26b6919b2a 100644 --- a/packages/paste-core/components/chat-log/__tests__/ChatBookend.spec.tsx +++ b/packages/paste-core/components/chat-log/__tests__/ChatBookend.spec.tsx @@ -3,7 +3,7 @@ import {screen, render} from '@testing-library/react'; 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/stories/components/ChatAttachment.stories.tsx b/packages/paste-core/components/chat-log/stories/components/ChatAttachment.stories.tsx index 4e23a4f206..952ee5b784 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 @@ -44,7 +44,7 @@ export const OutboundChatMessageWithAttachment: Story = () => ( ); -const StateExampleComposerAttachmentCard: React.FC = () => { +const StateExampleComposerAttachmentCard: React.FC> = () => { 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 f4bd98e46a..0de44846ff 100644 --- a/packages/paste-core/components/checkbox/__tests__/checkbox.test.tsx +++ b/packages/paste-core/components/checkbox/__tests__/checkbox.test.tsx @@ -261,7 +261,7 @@ describe('Checkbox event handlers', () => { }); it('Should check the checkbox when controlled', () => { - const MockCheckBox: React.FC = () => { + const MockCheckBox: React.FC> = () => { const [checked, setChecked] = React.useState(false); return ( { }); it('Should check the checkbox when uncontrolled', () => { - const MockCheckBox: React.FC = () => { + const MockCheckBox: React.FC> = () => { return ( foo diff --git a/packages/paste-core/components/checkbox/src/Checkbox.tsx b/packages/paste-core/components/checkbox/src/Checkbox.tsx index 288d4786d9..daa384e681 100644 --- a/packages/paste-core/components/checkbox/src/Checkbox.tsx +++ b/packages/paste-core/components/checkbox/src/Checkbox.tsx @@ -81,12 +81,13 @@ const HiddenCheckbox = React.forwardRef(( HiddenCheckbox.displayName = 'HiddenCheckbox'; -const CheckboxIcon: React.FC<{ +const CheckboxIcon: React.FC< +React.PropsWithChildren<{ indeterminate: boolean | undefined; disabled: boolean | undefined; - checked: boolean | undefined; + checked: boolean | undefined; element: BoxProps['element']; -}> = ({checked, element, indeterminate}) => { +}>> = ({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..7f422609d7 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 251624490b..09a685403f 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__/index.spec.tsx b/packages/paste-core/components/combobox/__tests__/index.spec.tsx index b60ab2317a..6877767efa 100644 --- a/packages/paste-core/components/combobox/__tests__/index.spec.tsx +++ b/packages/paste-core/components/combobox/__tests__/index.spec.tsx @@ -73,7 +73,7 @@ const ThemeWrapper: RenderOptions['wrapper'] = ({children}) => ( {children} ); -const ComboboxMock: React.FC = () => { +const ComboboxMock: React.FC> = () => { const [inputItems, setInputItems] = React.useState(items); return ( { ); }; -const GroupedMockCombobox: React.FC<{groupLabelTemplate?: ComboboxProps['groupLabelTemplate']}> = ({ - groupLabelTemplate, -}) => { +const GroupedMockCombobox: React.FC< + React.PropsWithChildren<{groupLabelTemplate?: ComboboxProps['groupLabelTemplate']}> +> = ({groupLabelTemplate}) => { return ( { +const ControlledCombobox: React.FC> = () => { const [value, setValue] = React.useState(''); const [selectedItem, setSelectedItem] = React.useState({}); const [inputItems, setInputItems] = React.useState(objectItems); diff --git a/packages/paste-core/components/combobox/src/ComboboxItems.tsx b/packages/paste-core/components/combobox/src/ComboboxItems.tsx index 835106670b..289432700e 100644 --- a/packages/paste-core/components/combobox/src/ComboboxItems.tsx +++ b/packages/paste-core/components/combobox/src/ComboboxItems.tsx @@ -6,7 +6,7 @@ import {ComboboxListboxGroup} from './styles/ComboboxListboxGroup'; import {getIndexedItems, getGroupedItems} from './helpers'; import type {ComboboxItemsProps} from './types'; -const ComboboxItems: React.FC = ({ +const ComboboxItems: React.FC> = ({ items, element = 'COMBOBOX', getItemProps, diff --git a/packages/paste-core/components/combobox/stories/customization.stories.tsx b/packages/paste-core/components/combobox/stories/customization.stories.tsx index 957d70aa35..1ffddaba5c 100644 --- a/packages/paste-core/components/combobox/stories/customization.stories.tsx +++ b/packages/paste-core/components/combobox/stories/customization.stories.tsx @@ -25,7 +25,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 73b0821fea..7252613655 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 @@ -4,7 +4,7 @@ import * as React from 'react'; import {render, screen} from '@testing-library/react'; import {hasFocus} from '../src/utils/reakit/reakit-hasFocus'; -const TestComponent: React.FC = () => { +const TestComponent: React.FC> = () => { return ( <>
diff --git a/packages/paste-core/components/data-grid/src/DataGrid.tsx b/packages/paste-core/components/data-grid/src/DataGrid.tsx index 10b34bed8f..c1244d9f9d 100644 --- a/packages/paste-core/components/data-grid/src/DataGrid.tsx +++ b/packages/paste-core/components/data-grid/src/DataGrid.tsx @@ -55,7 +55,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 418a193036..b0d3b4c8a0 100644 --- a/packages/paste-core/components/data-grid/src/DataGridCell.tsx +++ b/packages/paste-core/components/data-grid/src/DataGridCell.tsx @@ -26,7 +26,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 058434e098..d09253498b 100644 --- a/packages/paste-core/components/data-grid/src/DataGridHeader.tsx +++ b/packages/paste-core/components/data-grid/src/DataGridHeader.tsx @@ -10,7 +10,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 6c60ff7338..18a3e1ebaa 100644 --- a/packages/paste-core/components/data-grid/src/DataGridHeaderSort.tsx +++ b/packages/paste-core/components/data-grid/src/DataGridHeaderSort.tsx @@ -17,7 +17,10 @@ interface DataGridHeaderSortIconProps { i18nUnsortedLabel?: string; } -const DataGridHeaderSortIcon: React.FC = ({direction, element}) => { +const DataGridHeaderSortIcon: React.FC> = ({ + direction, + element, +}) => { switch (direction) { case 'ascending': return ; @@ -41,7 +44,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 0ce9636551..72c9b4c9fd 100644 --- a/packages/paste-core/components/data-grid/stories/components/ColumnSpanDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/ColumnSpanDataGrid.tsx @@ -3,7 +3,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 d728c12047..a1b13f935b 100644 --- a/packages/paste-core/components/data-grid/stories/components/ComposableCellsDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/ComposableCellsDataGrid.tsx @@ -7,7 +7,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: React.FC> = () => { const menu = useMenuState(); return ( @@ -28,7 +28,7 @@ const ActionMenu: React.FC = () => { ); }; -export const ComposableCellsDataGrid: React.FC = () => { +export const ComposableCellsDataGrid: React.FC> = () => { /* 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 2ab182d6b9..6f3002dd70 100644 --- a/packages/paste-core/components/data-grid/stories/components/CustomizableDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/CustomizableDataGrid.tsx @@ -35,7 +35,7 @@ export const customElementStyles = (prefix = 'DATA_GRID'): {[key: string]: any} }, }); -export const CustomizableDataGrid: React.FC = () => { +export const CustomizableDataGrid: React.FC> = () => { 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 8fed675d4a..413b405910 100644 --- a/packages/paste-core/components/data-grid/stories/components/KitchenSinkDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/KitchenSinkDataGrid.tsx @@ -97,7 +97,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]); @@ -168,7 +172,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(() => { @@ -178,7 +188,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; } @@ -211,7 +221,7 @@ const CheckboxCell: React.FC = ({onClick, id, indeterminate, ); }; -export const KitchenSinkDataGrid: React.FC = () => { +export const KitchenSinkDataGrid: React.FC> = () => { const seed = useUIDSeed(); const [currentPage, setCurrentPage] = React.useState(1); const [sortedColumns, setSortedColumns] = React.useState>(initialHeaderData); @@ -224,7 +234,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 b7d8f8e04d..9064c4ca2c 100644 --- a/packages/paste-core/components/data-grid/stories/components/LoadingDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/LoadingDataGrid.tsx @@ -3,7 +3,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: React.FC> = () => { // 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 9d43382ae9..2bc49c5bfe 100644 --- a/packages/paste-core/components/data-grid/stories/components/PaginatedDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/PaginatedDataGrid.tsx @@ -63,7 +63,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(() => { @@ -133,7 +137,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(() => { @@ -143,7 +153,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; } @@ -176,7 +186,7 @@ const CheckboxCell: React.FC = ({onClick, id, indeterminate, ); }; -export const PaginatedDataGrid: React.FC = () => { +export const PaginatedDataGrid: React.FC> = () => { const seed = useUIDSeed(); // Array of length 10 rows, all unchecked const [checkedItems, setCheckedItems] = React.useState(PaginatedTableBodyData.map(() => false)); @@ -188,7 +198,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 d514e9869b..2552ee609d 100644 --- a/packages/paste-core/components/data-grid/stories/components/PlainDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/PlainDataGrid.tsx @@ -5,7 +5,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 ec2ca69b90..3a726a868b 100644 --- a/packages/paste-core/components/data-grid/stories/components/SelectableRowsDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/SelectableRowsDataGrid.tsx @@ -13,7 +13,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(() => { @@ -23,7 +29,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; } @@ -56,7 +62,7 @@ const CheckboxCell: React.FC = ({onClick, id, indeterminate, ); }; -export const SelectableRowsDataGrid: React.FC = () => { +export const SelectableRowsDataGrid: React.FC> = () => { 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 f4eb333c4e..566e83678d 100644 --- a/packages/paste-core/components/data-grid/stories/components/SortableColumnsDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/SortableColumnsDataGrid.tsx @@ -28,7 +28,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: React.FC> = () => { 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 9a82bdcf38..60140037e5 100644 --- a/packages/paste-core/components/data-grid/stories/components/StickyHeaderDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/StickyHeaderDataGrid.tsx @@ -2,7 +2,9 @@ import * as React from 'react'; 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/stories/index.stories.tsx b/packages/paste-core/components/date-picker/stories/index.stories.tsx index 99c6bf1ec3..1e96c44c4a 100644 --- a/packages/paste-core/components/date-picker/stories/index.stories.tsx +++ b/packages/paste-core/components/date-picker/stories/index.stories.tsx @@ -12,7 +12,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 ( @@ -32,7 +32,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 ( @@ -48,7 +48,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 ( @@ -67,7 +67,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 ( @@ -83,7 +83,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 ( @@ -103,7 +103,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 ( @@ -119,7 +119,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 ( @@ -137,7 +137,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 ( @@ -151,7 +151,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 ( @@ -167,7 +167,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 ( @@ -180,7 +180,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 ( @@ -198,7 +198,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(); @@ -239,7 +239,7 @@ export const OnChangeDatePicker: React.FC = (props) => { ); }; -export const LabelOnlyPicker: React.FC = (props) => { +export const LabelOnlyPicker: React.FC> = (props) => { const uidDP = useUID(); return ( <> @@ -249,7 +249,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(); @@ -267,7 +267,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(); @@ -303,7 +303,7 @@ export const StackOfPickers: React.FC = (props) => { ); }; -export const DatePickerWithMinAndMax: React.FC = (props) => { +export const DatePickerWithMinAndMax: React.FC> = (props) => { const uidDP = useUID(); const uidHT = useUID(); return ( diff --git a/packages/paste-core/components/disclosure/__tests__/disclosure.test.tsx b/packages/paste-core/components/disclosure/__tests__/disclosure.test.tsx index 0f733afcc7..8ae8b0a723 100644 --- a/packages/paste-core/components/disclosure/__tests__/disclosure.test.tsx +++ b/packages/paste-core/components/disclosure/__tests__/disclosure.test.tsx @@ -8,11 +8,12 @@ import {Disclosure, DisclosureContent, DisclosureHeading, useDisclosureState} fr import type {DisclosureHeadingProps, DisclosureProps} from '../src'; import {getIconHoverStyles} from '../src/utils'; -const MockDisclosure: React.FC<{ +const MockDisclosure: React.FC< +React.PropsWithChildren<{ visible?: DisclosureProps['visible']; - disabled?: DisclosureHeadingProps['disabled']; + disabled?: DisclosureHeadingProps['disabled']; focusable?: DisclosureHeadingProps['focusable']; -}> = ({visible, disabled, focusable}) => { +}>> = ({visible, disabled, focusable}) => { return ( @@ -25,7 +26,7 @@ const MockDisclosure: React.FC<{ ); }; -const MockDefaultElementDisclosure: React.FC = () => { +const MockDefaultElementDisclosure: React.FC> = () => { return ( @@ -36,7 +37,7 @@ const MockDefaultElementDisclosure: React.FC = () => { ); }; -const MockCustomElementDisclosure: React.FC = () => { +const MockCustomElementDisclosure: React.FC> = () => { return ( @@ -52,7 +53,7 @@ const MockCustomElementDisclosure: React.FC = () => { ); }; -const StateHookMock: React.FC = () => { +const StateHookMock: React.FC> = () => { const disclosure = useDisclosureState(); return ( diff --git a/packages/paste-core/components/disclosure/src/DisclosureHeading.tsx b/packages/paste-core/components/disclosure/src/DisclosureHeading.tsx index 2f4d2083a3..8641bcf594 100644 --- a/packages/paste-core/components/disclosure/src/DisclosureHeading.tsx +++ b/packages/paste-core/components/disclosure/src/DisclosureHeading.tsx @@ -81,7 +81,7 @@ const StyledDisclosureHeading = React.forwardRef = ({ +const DisclosureHeading: React.FC> = ({ children, as, element = 'DISCLOSURE_HEADING', diff --git a/packages/paste-core/components/disclosure/stories/index.stories.tsx b/packages/paste-core/components/disclosure/stories/index.stories.tsx index f7d4c72710..f2f1aa64b5 100644 --- a/packages/paste-core/components/disclosure/stories/index.stories.tsx +++ b/packages/paste-core/components/disclosure/stories/index.stories.tsx @@ -11,11 +11,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-pill-group/stories/customization.stories.tsx b/packages/paste-core/components/display-pill-group/stories/customization.stories.tsx index 93c8bcf6fd..34b4bfd857 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 @@ -5,7 +5,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: React.FC> = () => { const currentTheme = useTheme(); return ( { +export const Basic: React.FC> = () => { return ( { ); }; -export const OverflowWrapping: React.FC = () => { +export const OverflowWrapping: React.FC> = () => { return ( 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 ad57f7d167..1330003d22 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 @@ -5,7 +5,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: React.FC> = () => { const pillState = useFormPillState(); return ( @@ -24,7 +24,7 @@ const CustomElementFormPillGroup: React.FC = () => { ); }; -const I18nProp: React.FC = () => { +const I18nProp: React.FC> = () => { const pillState = useFormPillState(); return ( 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 6e33148d4c..21bdc64bc9 100644 --- a/packages/paste-core/components/form-pill-group/src/PillCloseIcon.tsx +++ b/packages/paste-core/components/form-pill-group/src/PillCloseIcon.tsx @@ -22,7 +22,7 @@ interface PillCloseIconProps { pillIsHoverable?: boolean; } -export const PillCloseIcon: React.FC = ({ +export const PillCloseIcon: React.FC> = ({ element = 'FORM_PILL_CLOSE', onClick = () => {}, selected = false, 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 9f43b95791..3ec165b371 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 @@ -4,7 +4,7 @@ import {CustomizationProvider} from '@twilio-paste/customization'; import {CalendarIcon} from '@twilio-paste/icons/esm/CalendarIcon'; import {useFormPillState, FormPillGroup, FormPill} from '../src'; -export const CustomFormPillGroup: React.FC = () => { +export const CustomFormPillGroup: React.FC> = () => { 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 c01ca5d336..3f8e02b682 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 @@ -13,12 +13,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 (
@@ -43,17 +40,23 @@ 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: React.FC> = () => ( + +); +export const Selected: React.FC> = () => ( + +); +export const Dismissable: React.FC> = () => ( + +); -export const OverflowWrapping: React.FC = () => ( +export const OverflowWrapping: React.FC> = () => ( ); -export const SelectableAndDismissable: React.FC = () => { +export const SelectableAndDismissable: React.FC> = () => { const [pills, setPills] = React.useState([...PILL_NAMES]); const [selectedSet, updateSelectedSet] = React.useState>(new Set([PILL_NAMES[1], PILL_NAMES[4]])); const pillState = useFormPillState(); diff --git a/packages/paste-core/components/form/stories/form.stories.tsx b/packages/paste-core/components/form/stories/form.stories.tsx index cd7cfc73d4..8370cd9d2a 100644 --- a/packages/paste-core/components/form/stories/form.stories.tsx +++ b/packages/paste-core/components/form/stories/form.stories.tsx @@ -16,7 +16,10 @@ import type {RadioGroupProps} from '@twilio-paste/radio-group'; import {TextArea} from '@twilio-paste/textarea'; import type {TextAreaProps} from '@twilio-paste/textarea'; -const InputField: React.FC> = ({disabled, hasError}) => { +const InputField: React.FC>> = ({ + disabled, + hasError, +}) => { const inputIDSeed = useUIDSeed(); return ( <> @@ -28,7 +31,10 @@ const InputField: React.FC> = ({disabl ); }; -const TextareaField: React.FC> = ({disabled, hasError}) => { +const TextareaField: React.FC>> = ({ + disabled, + hasError, +}) => { const inputIDSeed = useUIDSeed(); return ( <> @@ -40,7 +46,10 @@ const TextareaField: React.FC> = ({ ); }; -const SelectField: React.FC> = ({disabled, hasError}) => { +const SelectField: React.FC>> = ({ + disabled, + hasError, +}) => { const inputIDSeed = useUIDSeed(); return ( <> @@ -54,7 +63,7 @@ const SelectField: React.FC> = ({disa ); }; -const CheckboxGroupField: React.FC> = ({ +const CheckboxGroupField: React.FC>> = ({ orientation, errorText, }) => { @@ -115,7 +124,10 @@ const CheckboxGroupField: React.FC> = ({orientation, errorText}) => { +const RadioGroupField: React.FC>> = ({ + orientation, + errorText, +}) => { const [value, setValue] = React.useState('2'); return ( { +const MockChild: React.FC> = ({children}) => { return {children}; }; -const MockControlGroup: React.FC<{ - showRequired?: boolean; +const MockControlGroup: React.FC< +React.PropsWithChildren<{ + showRequired?: boolean; showHelpText?: boolean; - showErrorText?: boolean; - element?: string; + showErrorText?: boolean; + element?: string; orientation?: InlineControlGroupProps['orientation']; -}> = ({showRequired, showHelpText, showErrorText, element, orientation = 'vertical'}) => { +}>> = ({showRequired, showHelpText, showErrorText, element, orientation = 'vertical'}) => { return ( { +const Insert: React.FC> = () => { return ; }; -const Input: React.FC = () => { +const Input: React.FC> = () => { return ; }; -const CommonStories: React.FC> = ({variant, ...props}) => { +const CommonStories: React.FC>> = ({variant, ...props}) => { return ( diff --git a/packages/paste-core/components/label/src/RequiredDot.tsx b/packages/paste-core/components/label/src/RequiredDot.tsx index 6d41de824e..a5156b6378 100644 --- a/packages/paste-core/components/label/src/RequiredDot.tsx +++ b/packages/paste-core/components/label/src/RequiredDot.tsx @@ -9,7 +9,11 @@ export interface RequiredDotProps { i18nLabel?: string; } -export const RequiredDot: React.FC = ({element = 'REQUIRED_DOT', i18nLabel = '', ...props}) => { +export const RequiredDot: React.FC> = ({ + element = 'REQUIRED_DOT', + i18nLabel = '', + ...props +}) => { return ( { I18n.storyName = 'i18n label'; -export const Customized: React.FC = () => { +export const Customized: React.FC> = () => { const currentTheme = useTheme(); return ( diff --git a/packages/paste-core/components/menu/__tests__/index.spec.tsx b/packages/paste-core/components/menu/__tests__/index.spec.tsx index fc8b8300c2..cfff7418ce 100644 --- a/packages/paste-core/components/menu/__tests__/index.spec.tsx +++ b/packages/paste-core/components/menu/__tests__/index.spec.tsx @@ -29,7 +29,7 @@ const PreferencesMenu = React.forwardRef(fun }); const GROUP_LABEL_TEXT = 'Search Options'; -const MenuMock: React.FC<{groupRef?: React.Ref}> = ({groupRef}) => { +const MenuMock: React.FC}>> = ({groupRef}) => { const menu = useMenuState({baseId: 'menu-example'}); return ( <> diff --git a/packages/paste-core/components/menu/stories/customization.stories.tsx b/packages/paste-core/components/menu/stories/customization.stories.tsx index 1279f0a8d2..c5a6304b07 100644 --- a/packages/paste-core/components/menu/stories/customization.stories.tsx +++ b/packages/paste-core/components/menu/stories/customization.stories.tsx @@ -102,99 +102,97 @@ export default { excludeStories: ['initStyles', 'BaseMenu'], }; -export const BaseMenu: React.FC<{menuButtonVariant?: ButtonVariants; element?: string}> = React.memo(function BaseMenu({ - menuButtonVariant = 'primary', - element, -}) { - const uniqueBaseID = useUID(); - const menu = useMenuState({ - visible: true, - baseId: `${uniqueBaseID}-${menuButtonVariant}-menu-customization-story`, - }); +export const BaseMenu: React.FC> = + React.memo(function BaseMenu({menuButtonVariant = 'primary', element}) { + const uniqueBaseID = useUID(); + const menu = useMenuState({ + visible: true, + baseId: `${uniqueBaseID}-${menuButtonVariant}-menu-customization-story`, + }); - const subMenu = useMenuState({baseId: `${uniqueBaseID}-${menuButtonVariant}-menu-submenu`}); - const onClick = React.useCallback(() => { - menu.hide(); - }, [menu.hide]); - return ( - <> - - Preferences - - - } - label="Settings" - data-testid="menu-group-settings" + const subMenu = useMenuState({baseId: `${uniqueBaseID}-${menuButtonVariant}-menu-submenu`}); + const onClick = React.useCallback(() => { + menu.hide(); + }, [menu.hide]); + return ( + <> + - - User info - - - Extensions - - {/* submenu */} - - Advanced settings - - - - Keyboard shortcuts + Preferences + + + } + label="Settings" + data-testid="menu-group-settings" + > + + User info - - {/* submenu */} - - - } - label="Search Options" - data-testid="menu-group-search-options" - > - - Google - - - - Bing - - - - } - label="Help" - data-testid="menu-group-help" - > - + Extensions + + {/* submenu */} + + Advanced settings + + + + Keyboard shortcuts + + + {/* submenu */} + + + } + label="Search Options" + data-testid="menu-group-search-options" > - Contact support - - + Google + + + + Bing + + + + } + label="Help" + data-testid="menu-group-help" > - View FAQ - - - - - ); -}); + + Contact support + + + View FAQ + + + + + ); + }); export const WithDefaultElementName: Story = (_args, {parameters: {isTestEnvironment}}) => { const currentTheme = useTheme(); diff --git a/packages/paste-core/components/menu/stories/index.stories.tsx b/packages/paste-core/components/menu/stories/index.stories.tsx index b0cfd4ae67..285a54116f 100644 --- a/packages/paste-core/components/menu/stories/index.stories.tsx +++ b/packages/paste-core/components/menu/stories/index.stories.tsx @@ -10,7 +10,7 @@ import {MoreIcon} from '@twilio-paste/icons/esm/MoreIcon'; import {Menu, MenuButton, SubMenuButton, MenuGroup, MenuItem, MenuSeparator, useMenuState} from '../src'; import {useUID} from '@twilio-paste/uid-library'; -const PlainMenu: React.FC = () => { +const PlainMenu: React.FC> = () => { const menu = useMenuState(); const onClick = (): void => { menu.hide(); @@ -42,7 +42,7 @@ const PlainMenu: React.FC = () => { ); }; -const AutoplacedMenu: React.FC = () => { +const AutoplacedMenu: React.FC> = () => { const menu = useMenuState({visible: true}); return ( <> @@ -82,7 +82,7 @@ const PreferencesMenu = React.forwardRef((props, ref) => { PreferencesMenu.displayName = 'PreferencesMenu'; -const SubMenu: React.FC = () => { +const SubMenu: React.FC> = () => { const menu = useMenuState(); return ( <> @@ -99,7 +99,7 @@ const SubMenu: React.FC = () => { ); }; -const Example3: React.FC = () => { +const Example3: React.FC> = () => { const menu = useMenuState(); return ( <> @@ -125,7 +125,7 @@ const Example3: React.FC = () => { ); }; -const Example4: React.FC = () => { +const Example4: React.FC> = () => { const menu = useMenuState(); return ( <> @@ -151,7 +151,7 @@ const Example4: React.FC = () => { ); }; -const WithActionsMenu: React.FC = () => { +const WithActionsMenu: React.FC> = () => { const menu = useMenuState(); return ( <> @@ -179,7 +179,7 @@ const WithActionsMenu: React.FC = () => { ); }; -const MenuGroups: React.FC = () => { +const MenuGroups: React.FC> = () => { 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..04ed8ee24b 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 5051240abf..48cfe51e2c 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 3dfece6ee8..e1f4871247 100644 --- a/packages/paste-core/components/modal/__tests__/index.spec.tsx +++ b/packages/paste-core/components/modal/__tests__/index.spec.tsx @@ -12,7 +12,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 ( @@ -50,7 +50,7 @@ const MockModal: React.FC<{children?: React.ReactNode}> = ({children}) => { ); }; -const MockInitalFocusModal: React.FC = () => { +const MockInitalFocusModal: React.FC> = () => { const [name, setName] = React.useState(''); const modalHeadingID = `modal-${useUID()}`; const nameInputRef: React.RefObject = React.createRef(); @@ -95,7 +95,7 @@ const MockInitalFocusModal: React.FC = () => { ); }; -const I18nMockModal: React.FC = () => { +const I18nMockModal: React.FC> = () => { const modalHeadingID = `modal-${useUID()}`; return ( diff --git a/packages/paste-core/components/modal/stories/customization.stories.tsx b/packages/paste-core/components/modal/stories/customization.stories.tsx index c67ac2b312..2c0c8cfe18 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 & {testId?: string | undefined; 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 001d2ec779..55f72c1080 100644 --- a/packages/paste-core/components/modal/stories/index.stories.tsx +++ b/packages/paste-core/components/modal/stories/index.stories.tsx @@ -26,7 +26,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/src/PaginationArrow/PaginationArrowIconWrapper.tsx b/packages/paste-core/components/pagination/src/PaginationArrow/PaginationArrowIconWrapper.tsx index e0435ad3e3..c8750fb0b8 100644 --- a/packages/paste-core/components/pagination/src/PaginationArrow/PaginationArrowIconWrapper.tsx +++ b/packages/paste-core/components/pagination/src/PaginationArrow/PaginationArrowIconWrapper.tsx @@ -3,7 +3,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 c6fe898222..26d5f3a5a9 100644 --- a/packages/paste-core/components/pagination/stories/customization.stories.tsx +++ b/packages/paste-core/components/pagination/stories/customization.stories.tsx @@ -19,7 +19,10 @@ import { import {Story} from '@storybook/react'; // 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: @@ -32,7 +35,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 ( @@ -56,7 +61,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 458f2af0b4..1b9ff8c55a 100644 --- a/packages/paste-core/components/pagination/stories/index.stories.tsx +++ b/packages/paste-core/components/pagination/stories/index.stories.tsx @@ -10,7 +10,7 @@ import { PaginationNumbers, } from '../src'; -export const ArrowExample: React.FC = () => { +export const ArrowExample: React.FC> = () => { // we use this to create unique labels for landmark elements when stacked or side-by-side const uniquePaginationID = useUID(); return ( @@ -23,7 +23,7 @@ export const ArrowExample: React.FC = () => { ); }; -export const ArrowsAsAnchorsExample: React.FC = () => { +export const ArrowsAsAnchorsExample: React.FC> = () => { // we use this to create unique labels for landmark elements when stacked or side-by-side const uniquePaginationID = useUID(); return ( @@ -36,7 +36,7 @@ export const ArrowsAsAnchorsExample: React.FC = () => { ); }; -export const ArrowLabelsExample: React.FC = () => { +export const ArrowLabelsExample: React.FC> = () => { // we use this to create unique labels for landmark elements when stacked or side-by-side const uniquePaginationID = useUID(); return ( @@ -49,7 +49,7 @@ export const ArrowLabelsExample: React.FC = () => { ); }; -export const ArrowAsAnchorLabelsExample: React.FC = () => { +export const ArrowAsAnchorLabelsExample: React.FC> = () => { // we use this to create unique labels for landmark elements when stacked or side-by-side const uniquePaginationID = useUID(); return ( @@ -62,7 +62,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 ( @@ -76,7 +76,7 @@ export const ArrowsPageLabelExample: React.FC<{staticLabel?: string}> = ({static ); }; -export const NumbersExample: React.FC = () => { +export const NumbersExample: React.FC> = () => { // we use this to create unique labels for landmark elements when stacked or side-by-side const uniquePaginationID = useUID(); return ( @@ -100,7 +100,7 @@ export const NumbersExample: React.FC = () => { ); }; -export const NumbersAsAnchorsExample: React.FC = () => { +export const NumbersAsAnchorsExample: React.FC> = () => { // we use this to create unique labels for landmark elements when stacked or side-by-side const uniquePaginationID = useUID(); return ( @@ -132,7 +132,7 @@ export const NumbersAsAnchorsExample: React.FC = () => { ); }; -export const NumbersPageLabelExample: React.FC = () => { +export const NumbersPageLabelExample: React.FC> = () => { // we use this to create unique labels for landmark elements when stacked or side-by-side const uniquePaginationID = useUID(); return ( @@ -156,7 +156,7 @@ export const NumbersPageLabelExample: React.FC = () => { ); }; -export const ControlledArrowPaginationExample: React.FC = () => { +export const ControlledArrowPaginationExample: React.FC> = () => { const [currentPage, setCurrentPage] = React.useState(1); const totalPages = 7; @@ -197,7 +197,7 @@ export const ControlledArrowPaginationExample: React.FC = () => { ); }; -export const ControlledNumberPaginationExample: React.FC = () => { +export const ControlledNumberPaginationExample: React.FC> = () => { 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/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 d3bf18a71b..963c2c0d18 100644 --- a/packages/paste-core/components/popover/src/PopoverContainer.tsx +++ b/packages/paste-core/components/popover/src/PopoverContainer.tsx @@ -15,7 +15,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 d6c85cf962..77d7e797a9 100644 --- a/packages/paste-core/components/popover/stories/index.stories.tsx +++ b/packages/paste-core/components/popover/stories/index.stories.tsx @@ -24,7 +24,7 @@ export default { }, }; -export const Default: React.FC = () => { +export const Default: React.FC> = () => { const uniqueBaseID = useUID(); return ( @@ -38,7 +38,7 @@ export const Default: React.FC = () => { ); }; -export const SmallerSize: React.FC = () => { +export const SmallerSize: React.FC> = () => { const uniqueBaseID = useUID(); return ( @@ -54,7 +54,7 @@ export const SmallerSize: React.FC = () => { ); }; -export const WideContent: React.FC = () => { +export const WideContent: React.FC> = () => { const date1ID = useUID(); const time1ID = useUID(); const date2ID = useUID(); @@ -92,7 +92,7 @@ export const WideContent: React.FC = () => { ); }; -export const PopoverTop: React.FC = () => { +export const PopoverTop: React.FC> = () => { const uniqueBaseID = useUID(); return ( @@ -106,7 +106,7 @@ export const PopoverTop: React.FC = () => { ); }; -export const PopoverLeft: React.FC = () => { +export const PopoverLeft: React.FC> = () => { const uniqueBaseID = useUID(); return ( @@ -120,7 +120,7 @@ export const PopoverLeft: React.FC = () => { ); }; -export const PopoverRight: React.FC = () => { +export const PopoverRight: React.FC> = () => { const uniqueBaseID = useUID(); return ( @@ -132,7 +132,7 @@ export const PopoverRight: React.FC = () => { ); }; -export const PopoverBottom: React.FC = () => { +export const PopoverBottom: React.FC> = () => { const uniqueBaseID = useUID(); return ( @@ -144,7 +144,7 @@ export const PopoverBottom: React.FC = () => { ); }; -export const BadgePopover: React.FC = () => { +export const BadgePopover: React.FC> = () => { const uniqueBaseID = useUID(); return ( @@ -158,7 +158,7 @@ export const BadgePopover: React.FC = () => { ); }; -export const StateHookExample: React.FC = () => { +export const StateHookExample: React.FC> = () => { const uniqueBaseID = useUID(); const popover = usePopoverState({baseId: uniqueBaseID}); return ( 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 039e867ecb..9ea4c5f3a5 100644 --- a/packages/paste-core/components/radio-group/__tests__/radio.test.tsx +++ b/packages/paste-core/components/radio-group/__tests__/radio.test.tsx @@ -287,7 +287,7 @@ describe('Radio Group event handlers', () => { }); it('Should check the selected radio (controlled)', () => { - const MockRadioGroup: React.FC = () => { + const MockRadioGroup: React.FC> = () => { const [value, setValue] = React.useState('2'); return ( { }); it('Should check the selected radio (uncontrolled)', () => { - const MockRadioGroup: React.FC = () => { + const MockRadioGroup: React.FC> = () => { return ( @@ -354,7 +354,7 @@ describe('Radio Group event handlers', () => { }); it('Should check the selected value on initial', () => { - const MockRadioGroup: React.FC = () => { + const MockRadioGroup: React.FC> = () => { const [value, setValue] = React.useState('2'); return ( = ({suffix = 'test', ...props}): React.ReactElement => { +const ExampleOption: React.FC> = ({ + suffix = 'test', + ...props +}): React.ReactElement => { return (