From e93c5a3bf335521994b9b5693d1e141d60947b96 Mon Sep 17 00:00:00 2001 From: Rohan <45748283+r100-stack@users.noreply.github.com> Date: Fri, 7 Feb 2025 10:41:08 -0500 Subject: [PATCH] Use `React.JSX` instead of `JSX` (#2424) --- .../itwinui-react/src/core/Avatar/Avatar.tsx | 2 +- .../src/core/AvatarGroup/AvatarGroup.tsx | 2 +- .../itwinui-react/src/core/Buttons/Button.tsx | 4 +-- .../src/core/Buttons/DropdownButton.tsx | 2 +- .../src/core/Buttons/SplitButton.tsx | 2 +- .../src/core/Carousel/CarouselSlider.tsx | 2 +- .../src/core/ComboBox/ComboBox.tsx | 8 +++--- .../src/core/ComboBox/ComboBoxInput.tsx | 6 ++--- .../core/ComboBox/ComboBoxInputContainer.tsx | 2 +- .../src/core/ComboBox/ComboBoxMenu.tsx | 2 +- .../src/core/ComboBox/helpers.ts | 5 +++- .../src/core/DropdownMenu/DropdownMenu.tsx | 6 ++--- .../src/core/Fieldset/Fieldset.tsx | 4 ++- .../itwinui-react/src/core/Header/Header.tsx | 2 +- .../src/core/Header/HeaderLogo.tsx | 2 +- .../src/core/LabeledInput/LabeledInput.tsx | 2 +- .../src/core/LabeledSelect/LabeledSelect.tsx | 4 +-- .../itwinui-react/src/core/Menu/MenuItem.tsx | 10 +++---- .../src/core/NonIdealState/ErrorPage.test.tsx | 2 +- .../src/core/NonIdealState/ErrorPage.tsx | 8 +++--- .../src/core/RadioTiles/RadioTile.tsx | 2 +- .../itwinui-react/src/core/Select/Select.tsx | 26 +++++++++---------- .../core/SideNavigation/SideNavigation.tsx | 2 +- .../src/core/StatusMessage/StatusMessage.tsx | 2 +- .../src/core/Table/Table.test.tsx | 2 +- .../itwinui-react/src/core/Table/Table.tsx | 2 +- .../src/core/Table/cells/DefaultCell.tsx | 4 +-- packages/itwinui-react/src/core/Tabs/Tabs.tsx | 4 +-- .../src/core/TimePicker/TimePicker.tsx | 4 ++- .../src/core/ToggleSwitch/ToggleSwitch.tsx | 2 +- packages/itwinui-react/src/core/Tree/Tree.tsx | 4 +-- .../itwinui-react/src/core/Tree/TreeNode.tsx | 4 +-- .../src/utils/components/FocusTrap.tsx | 11 +++----- .../src/utils/components/InputContainer.tsx | 2 +- .../src/utils/components/Portal.test.tsx | 6 ++++- .../src/utils/functions/polymorphic.tsx | 6 ++--- .../src/utils/functions/react.ts | 2 +- packages/itwinui-react/src/utils/props.ts | 4 +-- 38 files changed, 86 insertions(+), 80 deletions(-) diff --git a/packages/itwinui-react/src/core/Avatar/Avatar.tsx b/packages/itwinui-react/src/core/Avatar/Avatar.tsx index 7d5093b1766..cff118b0450 100644 --- a/packages/itwinui-react/src/core/Avatar/Avatar.tsx +++ b/packages/itwinui-react/src/core/Avatar/Avatar.tsx @@ -47,7 +47,7 @@ type AvatarProps = { /** * User image to be displayed. Can be `` or `` or anything else. */ - image?: JSX.Element; + image?: React.JSX.Element; /** * Color of the icon. You can use `getUserColor` function to generate color from user name or email. If not provided, default background color from CSS styling will be used (hsl(72, 51%, 56%) / olive green). */ diff --git a/packages/itwinui-react/src/core/AvatarGroup/AvatarGroup.tsx b/packages/itwinui-react/src/core/AvatarGroup/AvatarGroup.tsx index d916720f2ba..e3b57d6d095 100644 --- a/packages/itwinui-react/src/core/AvatarGroup/AvatarGroup.tsx +++ b/packages/itwinui-react/src/core/AvatarGroup/AvatarGroup.tsx @@ -83,7 +83,7 @@ export const AvatarGroup = React.forwardRef((props, ref) => { const getAvatarList = (count: number) => { return childrenArray.slice(0, count).map((child) => - React.cloneElement(child as JSX.Element, { + React.cloneElement(child as React.JSX.Element, { status: undefined, size: iconSize, }), diff --git a/packages/itwinui-react/src/core/Buttons/Button.tsx b/packages/itwinui-react/src/core/Buttons/Button.tsx index 5b344e70afc..38a526d0307 100644 --- a/packages/itwinui-react/src/core/Buttons/Button.tsx +++ b/packages/itwinui-react/src/core/Buttons/Button.tsx @@ -24,11 +24,11 @@ export type ButtonProps = { /** * Icon shown before the main button content. */ - startIcon?: JSX.Element; + startIcon?: React.JSX.Element; /** * Icon shown after the main button content. */ - endIcon?: JSX.Element; + endIcon?: React.JSX.Element; /** * Passes props to the button label. */ diff --git a/packages/itwinui-react/src/core/Buttons/DropdownButton.tsx b/packages/itwinui-react/src/core/Buttons/DropdownButton.tsx index b9161be78cb..e793f6479ab 100644 --- a/packages/itwinui-react/src/core/Buttons/DropdownButton.tsx +++ b/packages/itwinui-react/src/core/Buttons/DropdownButton.tsx @@ -17,7 +17,7 @@ export type DropdownButtonProps = { * Pass a function that takes the `close` argument (to close the menu), * and returns a list of `MenuItem` components. */ - menuItems: (close: () => void) => JSX.Element[]; + menuItems: (close: () => void) => React.JSX.Element[]; /** * Style of the dropdown button. * Use 'borderless' to hide outline. diff --git a/packages/itwinui-react/src/core/Buttons/SplitButton.tsx b/packages/itwinui-react/src/core/Buttons/SplitButton.tsx index fbd950f7499..fc09c74de02 100644 --- a/packages/itwinui-react/src/core/Buttons/SplitButton.tsx +++ b/packages/itwinui-react/src/core/Buttons/SplitButton.tsx @@ -27,7 +27,7 @@ export type SplitButtonProps = ButtonProps & { * Pass a function that takes the `close` argument (to close the menu), * and returns a list of `MenuItem` components. */ - menuItems: (close: () => void) => JSX.Element[]; + menuItems: (close: () => void) => React.JSX.Element[]; /** * Placement of the dropdown menu. * @default 'bottom-end' diff --git a/packages/itwinui-react/src/core/Carousel/CarouselSlider.tsx b/packages/itwinui-react/src/core/Carousel/CarouselSlider.tsx index 6027a00b990..cde78e66ab9 100644 --- a/packages/itwinui-react/src/core/Carousel/CarouselSlider.tsx +++ b/packages/itwinui-react/src/core/Carousel/CarouselSlider.tsx @@ -32,7 +32,7 @@ export const CarouselSlider = React.forwardRef((props, ref) => { () => React.Children.map(children, (child, index) => React.isValidElement(child) - ? React.cloneElement(child as JSX.Element, { + ? React.cloneElement(child as React.JSX.Element, { id: `${idPrefix}--slide-${index}`, 'aria-labelledby': `${idPrefix}--dot-${index}`, index, diff --git a/packages/itwinui-react/src/core/ComboBox/ComboBox.tsx b/packages/itwinui-react/src/core/ComboBox/ComboBox.tsx index 1be7bb0c78e..f0e6d28fd67 100644 --- a/packages/itwinui-react/src/core/ComboBox/ComboBox.tsx +++ b/packages/itwinui-react/src/core/ComboBox/ComboBox.tsx @@ -136,7 +136,7 @@ export type ComboBoxProps = { endIconProps?: React.ComponentProps; /** * Message shown when no options are available. - * If `JSX.Element` is provided, it will be rendered as is and won't be wrapped with `MenuExtraContent`. + * If `React.JSX.Element` is provided, it will be rendered as is and won't be wrapped with `MenuExtraContent`. * @default 'No options found' */ emptyStateMessage?: React.ReactNode; @@ -155,7 +155,7 @@ export type ComboBoxProps = { id: string; index: number; }, - ) => JSX.Element; + ) => React.JSX.Element; /** * If enabled, virtualization is used for the scrollable dropdown list. * Use it if you expect a very long list of items. @@ -652,7 +652,7 @@ export const ComboBox = React.forwardRef( ); }) - .filter(Boolean) as JSX.Element[]) + .filter(Boolean) as React.JSX.Element[]) : undefined } /> @@ -678,7 +678,7 @@ export const ComboBox = React.forwardRef( }, ) as ( props: ComboBoxProps & { ref?: React.ForwardedRef }, -) => JSX.Element; +) => React.JSX.Element; if (process.env.NODE_ENV === 'development') { (ComboBox as any).displayName = 'ComboBox'; } diff --git a/packages/itwinui-react/src/core/ComboBox/ComboBoxInput.tsx b/packages/itwinui-react/src/core/ComboBox/ComboBoxInput.tsx index 704e7642cc5..372e47e7fa6 100644 --- a/packages/itwinui-react/src/core/ComboBox/ComboBoxInput.tsx +++ b/packages/itwinui-react/src/core/ComboBox/ComboBoxInput.tsx @@ -15,9 +15,9 @@ import type { PolymorphicForwardRefComponent } from '../../utils/index.js'; import { ComboBoxMultipleContainer } from './ComboBoxMultipleContainer.js'; import { ComboBoxStateContext, ComboBoxRefsContext } from './helpers.js'; -type ComboBoxInputProps = { selectTags?: JSX.Element[] } & React.ComponentProps< - typeof Input ->; +type ComboBoxInputProps = { + selectTags?: React.JSX.Element[]; +} & React.ComponentProps; export const ComboBoxInput = React.forwardRef((props, forwardedRef) => { const { selectTags, size, style, ...rest } = props; diff --git a/packages/itwinui-react/src/core/ComboBox/ComboBoxInputContainer.tsx b/packages/itwinui-react/src/core/ComboBox/ComboBoxInputContainer.tsx index 371874a6a36..35375e904fc 100644 --- a/packages/itwinui-react/src/core/ComboBox/ComboBoxInputContainer.tsx +++ b/packages/itwinui-react/src/core/ComboBox/ComboBoxInputContainer.tsx @@ -35,7 +35,7 @@ export const ComboBoxInputContainer = React.forwardRef( {message} ) : ( React.isValidElement(message) && - React.cloneElement(message as JSX.Element, { status }) + React.cloneElement(message as React.JSX.Element, { status }) ) } ref={forwardedRef} diff --git a/packages/itwinui-react/src/core/ComboBox/ComboBoxMenu.tsx b/packages/itwinui-react/src/core/ComboBox/ComboBoxMenu.tsx index 39759bde3ba..1efdce884cb 100644 --- a/packages/itwinui-react/src/core/ComboBox/ComboBoxMenu.tsx +++ b/packages/itwinui-react/src/core/ComboBox/ComboBoxMenu.tsx @@ -76,7 +76,7 @@ const VirtualizedComboBoxMenu = (props: React.ComponentProps<'div'>) => { const menuItem = filteredOptions.length > 0 ? getMenuItem(filteredOptions[virtualItem.index], virtualItem.index) - : (children as JSX.Element); // Here is expected empty state content + : (children as React.JSX.Element); // Here is expected empty state content return React.cloneElement(menuItem, { key: virtualItem.key, ref: virtualizer.measureElement, diff --git a/packages/itwinui-react/src/core/ComboBox/helpers.ts b/packages/itwinui-react/src/core/ComboBox/helpers.ts index 27437f13c1e..90c8fee051d 100644 --- a/packages/itwinui-react/src/core/ComboBox/helpers.ts +++ b/packages/itwinui-react/src/core/ComboBox/helpers.ts @@ -24,7 +24,10 @@ type ComboBoxStateContextProps = { enableVirtualization: boolean; filteredOptions: SelectOption[]; onClickHandler?: (prop: number) => void; - getMenuItem: (option: SelectOption, filteredIndex?: number) => JSX.Element; + getMenuItem: ( + option: SelectOption, + filteredIndex?: number, + ) => React.JSX.Element; focusedIndex: number; setFocusedIndex: React.Dispatch>; multiple?: boolean; diff --git a/packages/itwinui-react/src/core/DropdownMenu/DropdownMenu.tsx b/packages/itwinui-react/src/core/DropdownMenu/DropdownMenu.tsx index 45250fcf2e0..504fe9986f1 100644 --- a/packages/itwinui-react/src/core/DropdownMenu/DropdownMenu.tsx +++ b/packages/itwinui-react/src/core/DropdownMenu/DropdownMenu.tsx @@ -18,9 +18,9 @@ export type DropdownMenuProps = { * You can pass function that takes argument `close` that closes the dropdown menu, or a list of MenuItems. */ menuItems: - | ((close: () => void) => JSX.Element[]) - | JSX.Element[] - | JSX.Element; + | ((close: () => void) => React.JSX.Element[]) + | React.JSX.Element[] + | React.JSX.Element; /** * ARIA role. Role of menu. For menu use 'menu', for select use 'listbox'. * @default 'menu' diff --git a/packages/itwinui-react/src/core/Fieldset/Fieldset.tsx b/packages/itwinui-react/src/core/Fieldset/Fieldset.tsx index 44d967754b3..c1eb96992e8 100644 --- a/packages/itwinui-react/src/core/Fieldset/Fieldset.tsx +++ b/packages/itwinui-react/src/core/Fieldset/Fieldset.tsx @@ -41,7 +41,9 @@ export const Fieldset = React.forwardRef((props, ref) => { {disabled ? React.Children.map(children, (child) => React.isValidElement(child) - ? React.cloneElement(child as JSX.Element, { disabled: true }) + ? React.cloneElement(child as React.JSX.Element, { + disabled: true, + }) : child, ) : children} diff --git a/packages/itwinui-react/src/core/Header/Header.tsx b/packages/itwinui-react/src/core/Header/Header.tsx index f2eb1c4c59f..ee4222ee4d4 100644 --- a/packages/itwinui-react/src/core/Header/Header.tsx +++ b/packages/itwinui-react/src/core/Header/Header.tsx @@ -64,7 +64,7 @@ type HeaderProps = { * Pass a function that takes the `close` argument (to close the menu), * and returns a list of `MenuItem` components. */ - menuItems?: (close: () => void) => JSX.Element[]; + menuItems?: (close: () => void) => React.JSX.Element[]; /** * If true, the header height is reduced, typically used when viewing 3D content. * @default false diff --git a/packages/itwinui-react/src/core/Header/HeaderLogo.tsx b/packages/itwinui-react/src/core/Header/HeaderLogo.tsx index 92ab5d1140c..11b455205a3 100644 --- a/packages/itwinui-react/src/core/Header/HeaderLogo.tsx +++ b/packages/itwinui-react/src/core/Header/HeaderLogo.tsx @@ -13,7 +13,7 @@ type HeaderLogoOwnProps = { /** * Logo shown before the main content. */ - logo: JSX.Element; + logo: React.JSX.Element; /** * Click event handler. * If passed, the component will be rendered as a `
`. diff --git a/packages/itwinui-react/src/core/LabeledInput/LabeledInput.tsx b/packages/itwinui-react/src/core/LabeledInput/LabeledInput.tsx index c9b9d7e647f..b8a0fc0f1f1 100644 --- a/packages/itwinui-react/src/core/LabeledInput/LabeledInput.tsx +++ b/packages/itwinui-react/src/core/LabeledInput/LabeledInput.tsx @@ -28,7 +28,7 @@ export type LabeledInputProps = { /** * Custom svg icon. Will override status icon if specified. */ - svgIcon?: JSX.Element | null; + svgIcon?: React.JSX.Element | null; /** * Pass props to wrapper element. */ diff --git a/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.tsx b/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.tsx index 2b6bf59ea41..237ea9de8dd 100644 --- a/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.tsx +++ b/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.tsx @@ -47,7 +47,7 @@ export type LabeledSelectProps = { * * Custom svg icon. Will override status icon if specified. */ - svgIcon?: JSX.Element; + svgIcon?: React.JSX.Element; /** * If true, shows a red asterisk. * @@ -177,7 +177,7 @@ export const LabeledSelect = React.forwardRef( }, ) as ( props: LabeledSelectProps & { ref?: React.ForwardedRef }, -) => JSX.Element; +) => React.JSX.Element; if (process.env.NODE_ENV === 'development') { (LabeledSelect as any).displayName = 'LabeledSelect'; } diff --git a/packages/itwinui-react/src/core/Menu/MenuItem.tsx b/packages/itwinui-react/src/core/Menu/MenuItem.tsx index e8cada2c510..2ddb40589b5 100644 --- a/packages/itwinui-react/src/core/Menu/MenuItem.tsx +++ b/packages/itwinui-react/src/core/Menu/MenuItem.tsx @@ -46,21 +46,21 @@ export type MenuItemProps = { /** * SVG icon component shown on the left. */ - startIcon?: JSX.Element; + startIcon?: React.JSX.Element; /** * @deprecated Use startIcon. * SVG icon component shown on the left. */ - icon?: JSX.Element; + icon?: React.JSX.Element; /** * SVG icon component shown on the right. */ - endIcon?: JSX.Element; + endIcon?: React.JSX.Element; /** * @deprecated Use endIcon. * SVG icon component shown on the right. */ - badge?: JSX.Element; + badge?: React.JSX.Element; /** * ARIA role. For menu item use 'menuitem', for select item use 'option'. * @default 'menuitem' @@ -69,7 +69,7 @@ export type MenuItemProps = { /** * Items to be shown in the submenu when hovered over the item. */ - subMenuItems?: JSX.Element[]; + subMenuItems?: React.JSX.Element[]; /** * Content of the menu item. */ diff --git a/packages/itwinui-react/src/core/NonIdealState/ErrorPage.test.tsx b/packages/itwinui-react/src/core/NonIdealState/ErrorPage.test.tsx index 536ba2e6c04..a2629c7658c 100644 --- a/packages/itwinui-react/src/core/NonIdealState/ErrorPage.test.tsx +++ b/packages/itwinui-react/src/core/NonIdealState/ErrorPage.test.tsx @@ -106,7 +106,7 @@ describe('ErrorPage', () => { ] as { errorType: ErrorPageType; errorName: string; - illustration: JSX.Element; + illustration: React.JSX.Element; }[]; defaultTests.forEach((test) => { diff --git a/packages/itwinui-react/src/core/NonIdealState/ErrorPage.tsx b/packages/itwinui-react/src/core/NonIdealState/ErrorPage.tsx index db1c6e5312f..79347543228 100644 --- a/packages/itwinui-react/src/core/NonIdealState/ErrorPage.tsx +++ b/packages/itwinui-react/src/core/NonIdealState/ErrorPage.tsx @@ -146,7 +146,7 @@ export const ErrorPage = React.forwardRef((props, forwardedRef) => { ...translatedErrorMessages, } as ErrorTypeTranslations; - function getErrorIcon(): JSX.Element { + function getErrorIcon(): React.JSX.Element { switch (errorType) { case '300': case '301': @@ -232,7 +232,7 @@ export const ErrorPage = React.forwardRef((props, forwardedRef) => { } } - function getPrimaryButton(): JSX.Element | null { + function getPrimaryButton(): React.JSX.Element | null { if (!primaryButtonHandle || !primaryButtonLabel) { return null; } @@ -243,7 +243,7 @@ export const ErrorPage = React.forwardRef((props, forwardedRef) => { ); } - function getSecondaryButton(): JSX.Element | null { + function getSecondaryButton(): React.JSX.Element | null { if (!secondaryButtonHandle || !secondaryButtonLabel) { return null; } @@ -254,7 +254,7 @@ export const ErrorPage = React.forwardRef((props, forwardedRef) => { ); } - function getActions(): JSX.Element | null { + function getActions(): React.JSX.Element | null { const primaryButton = getPrimaryButton(); const secondaryButton = getSecondaryButton(); diff --git a/packages/itwinui-react/src/core/RadioTiles/RadioTile.tsx b/packages/itwinui-react/src/core/RadioTiles/RadioTile.tsx index 476dbf4e39a..cca09bbe7ca 100644 --- a/packages/itwinui-react/src/core/RadioTiles/RadioTile.tsx +++ b/packages/itwinui-react/src/core/RadioTiles/RadioTile.tsx @@ -11,7 +11,7 @@ type RadioTileProps = { /** * Icon to be used. */ - icon?: JSX.Element; + icon?: React.JSX.Element; /** * Label of the Radio tile. */ diff --git a/packages/itwinui-react/src/core/Select/Select.tsx b/packages/itwinui-react/src/core/Select/Select.tsx index 9e61f2dbf3d..b79ddcc72dd 100644 --- a/packages/itwinui-react/src/core/Select/Select.tsx +++ b/packages/itwinui-react/src/core/Select/Select.tsx @@ -107,7 +107,7 @@ export const Select = React.forwardRef((props, forwardedRef) => { return ; }) as ( props: SelectProps & { ref?: React.ForwardedRef }, -) => JSX.Element; +) => React.JSX.Element; if (process.env.NODE_ENV === 'development') { (Select as any).displayName = 'Select'; } @@ -328,7 +328,7 @@ const CustomSelect = React.forwardRef((props, forwardedRef) => { const isSelected = isMultipleEnabled(value, multiple) ? value?.includes(option.value) ?? false : value === option.value; - const menuItem: JSX.Element = itemRenderer ? ( + const menuItem: React.JSX.Element = itemRenderer ? ( itemRenderer(option, { close: () => setIsOpen(false), isSelected }) ) : ( {option.label} @@ -468,7 +468,7 @@ const CustomSelect = React.forwardRef((props, forwardedRef) => { selectedItemsRenderer={ selectedItemRenderer as ( options: SelectOption[], - ) => JSX.Element + ) => React.JSX.Element } tagRenderer={tagRenderer} /> @@ -478,7 +478,7 @@ const CustomSelect = React.forwardRef((props, forwardedRef) => { selectedItemRenderer={ selectedItemRenderer as ( option: SelectOption, - ) => JSX.Element + ) => React.JSX.Element } /> )} @@ -515,7 +515,7 @@ const CustomSelect = React.forwardRef((props, forwardedRef) => { ); }) as ( props: CustomSelectProps & { ref?: React.ForwardedRef }, -) => JSX.Element; +) => React.JSX.Element; export type CustomSelectProps = SelectCommonProps & { /** @@ -532,7 +532,7 @@ export type CustomSelectProps = SelectCommonProps & { itemRenderer?: ( option: SelectOption, itemProps: ItemRendererProps, - ) => JSX.Element; + ) => React.JSX.Element; /** * Custom class for menu. */ @@ -587,7 +587,7 @@ export type SelectMultipleTypeProps = * Custom renderer for the selected item in select. * If `multiple` is enabled, it will give array of options to render. */ - selectedItemRenderer?: (option: SelectOption) => JSX.Element; + selectedItemRenderer?: (option: SelectOption) => React.JSX.Element; /** * Selected option value. * If `multiple` is enabled, it is an array of values. @@ -602,7 +602,7 @@ export type SelectMultipleTypeProps = } | { multiple: true; - selectedItemRenderer?: (options: SelectOption[]) => JSX.Element; + selectedItemRenderer?: (options: SelectOption[]) => React.JSX.Element; value?: T[]; onChange?: (value: T, event: SelectValueChangeEvent) => void; }; @@ -642,11 +642,11 @@ export type SelectOption = { * @deprecated Use startIcon * SVG icon component shown on the left. */ - icon?: JSX.Element; + icon?: React.JSX.Element; /** * SVG icon component shown on the left. */ - startIcon?: JSX.Element; + startIcon?: React.JSX.Element; /** * Item is disabled. */ @@ -754,7 +754,7 @@ const SingleSelectButton = ({ type SingleSelectButtonProps = { selectedItem?: SelectOption; - selectedItemRenderer?: (option: SelectOption) => JSX.Element; + selectedItemRenderer?: (option: SelectOption) => React.JSX.Element; }; // ---------------------------------------------------------------------------- @@ -788,8 +788,8 @@ const MultipleSelectButton = ({ type MultipleSelectButtonProps = { selectedItems?: SelectOption[]; - selectedItemsRenderer?: (options: SelectOption[]) => JSX.Element; - tagRenderer: (item: SelectOption) => JSX.Element; + selectedItemsRenderer?: (options: SelectOption[]) => React.JSX.Element; + tagRenderer: (item: SelectOption) => React.JSX.Element; }; // ---------------------------------------------------------------------------- diff --git a/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx b/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx index 1292ad571f4..d18780bf740 100644 --- a/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx +++ b/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx @@ -57,7 +57,7 @@ type SideNavigationProps = { * isSubmenuOpen={true} * /> */ - submenu?: JSX.Element; + submenu?: React.JSX.Element; /** * Set to true to display the provided `submenu`. * diff --git a/packages/itwinui-react/src/core/StatusMessage/StatusMessage.tsx b/packages/itwinui-react/src/core/StatusMessage/StatusMessage.tsx index 8331cd6ebb7..7de12ccd0ff 100644 --- a/packages/itwinui-react/src/core/StatusMessage/StatusMessage.tsx +++ b/packages/itwinui-react/src/core/StatusMessage/StatusMessage.tsx @@ -15,7 +15,7 @@ type StatusMessageProps = { * - It will default to the `status` icon, if `status` is set. * - If `startIcon` is set to `null`, no icon will be displayed, even if `status` is set. */ - startIcon?: JSX.Element | null; + startIcon?: React.JSX.Element | null; /** * Message content. */ diff --git a/packages/itwinui-react/src/core/Table/Table.test.tsx b/packages/itwinui-react/src/core/Table/Table.test.tsx index 394a4e0f0a9..b43e61f886e 100644 --- a/packages/itwinui-react/src/core/Table/Table.test.tsx +++ b/packages/itwinui-react/src/core/Table/Table.test.tsx @@ -198,7 +198,7 @@ const clearFilter = async (container: HTMLElement) => { const BooleanFilter = ( props: TableFilterProps>, -): JSX.Element => { +): React.JSX.Element => { const [value, setValue] = React.useState( props.column.filterValue as boolean | undefined, ); diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx index d3665ca8021..cc97a37d02d 100644 --- a/packages/itwinui-react/src/core/Table/Table.tsx +++ b/packages/itwinui-react/src/core/Table/Table.tsx @@ -370,7 +370,7 @@ export const Table = < T extends Record = Record, >( props: TableProps, -): JSX.Element => { +): React.JSX.Element => { const { data, columns, diff --git a/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx b/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx index 0dfa879cb45..8528c8aab8f 100644 --- a/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx +++ b/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx @@ -13,11 +13,11 @@ export type DefaultCellProps> = { /** * Custom icon to be displayed at the beginning of the cell. */ - startIcon?: JSX.Element; + startIcon?: React.JSX.Element; /** * Custom icon to be displayed at the end of the cell. */ - endIcon?: JSX.Element; + endIcon?: React.JSX.Element; /** * Status of the cell. */ diff --git a/packages/itwinui-react/src/core/Tabs/Tabs.tsx b/packages/itwinui-react/src/core/Tabs/Tabs.tsx index b58e61a91ae..8c5f9dc8d4e 100644 --- a/packages/itwinui-react/src/core/Tabs/Tabs.tsx +++ b/packages/itwinui-react/src/core/Tabs/Tabs.tsx @@ -606,7 +606,7 @@ const LegacyTabsComponent = React.forwardRef((props, forwardedRef) => { {labels.map((label, index) => { const tabValue = `${index}`; return React.isValidElement(label) ? ( - React.cloneElement(label as JSX.Element, { + React.cloneElement(label as React.JSX.Element, { value: tabValue, }) ) : ( @@ -645,7 +645,7 @@ type TabLegacyProps = { /** * Svg icon shown before the labels. */ - startIcon?: JSX.Element; + startIcon?: React.JSX.Element; /** * Control whether the tab is disabled. */ diff --git a/packages/itwinui-react/src/core/TimePicker/TimePicker.tsx b/packages/itwinui-react/src/core/TimePicker/TimePicker.tsx index 1ea6dba6856..dc0787e120a 100644 --- a/packages/itwinui-react/src/core/TimePicker/TimePicker.tsx +++ b/packages/itwinui-react/src/core/TimePicker/TimePicker.tsx @@ -564,7 +564,9 @@ type TimePickerColumnProps = { [k: string]: unknown; }; -const TimePickerColumn = (props: TimePickerColumnProps): JSX.Element => { +const TimePickerColumn = ( + props: TimePickerColumnProps, +): React.JSX.Element => { const { data, onFocusChange, diff --git a/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx b/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx index 4268a7c9b4e..94817d99e32 100644 --- a/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx +++ b/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx @@ -33,7 +33,7 @@ type ToggleSwitchProps = { * * Will override the default checkmark icon. */ - icon?: JSX.Element | null; + icon?: React.JSX.Element | null; } | { size: 'small'; diff --git a/packages/itwinui-react/src/core/Tree/Tree.tsx b/packages/itwinui-react/src/core/Tree/Tree.tsx index a028a43a03b..75949b4df34 100644 --- a/packages/itwinui-react/src/core/Tree/Tree.tsx +++ b/packages/itwinui-react/src/core/Tree/Tree.tsx @@ -79,7 +79,7 @@ export type TreeProps = { * /> * ), [onNodeExpanded]) */ - nodeRenderer: (props: NodeRenderProps) => JSX.Element; + nodeRenderer: (props: NodeRenderProps) => React.JSX.Element; /** * Array of custom data used for `TreeNodes` inside `Tree`. */ @@ -389,7 +389,7 @@ type VirtualizedTreeProps = { index: number, virtualItem?: VirtualItem, virtualizer?: Virtualizer, - ) => JSX.Element; + ) => React.JSX.Element; scrollToIndex?: number; onKeyDown: React.KeyboardEventHandler; onFocus: React.FocusEventHandler; diff --git a/packages/itwinui-react/src/core/Tree/TreeNode.tsx b/packages/itwinui-react/src/core/Tree/TreeNode.tsx index c16e58058b1..21330bfbc0d 100644 --- a/packages/itwinui-react/src/core/Tree/TreeNode.tsx +++ b/packages/itwinui-react/src/core/Tree/TreeNode.tsx @@ -50,7 +50,7 @@ type TreeNodeProps = { /** * Icon shown before label and sublabel content. */ - icon?: JSX.Element; + icon?: React.JSX.Element; /** * Props for TreeNode Icon */ @@ -308,7 +308,7 @@ export const TreeNode = React.forwardRef((props, forwardedRef) => { className={cx('iui-tree-node-checkbox', checkboxProps?.className)} > {React.isValidElement(checkbox) - ? React.cloneElement(checkbox as JSX.Element, { + ? React.cloneElement(checkbox as React.JSX.Element, { tabIndex: isFocused ? 0 : -1, }) : checkbox} diff --git a/packages/itwinui-react/src/utils/components/FocusTrap.tsx b/packages/itwinui-react/src/utils/components/FocusTrap.tsx index 5db6f1c8f38..8a0841d6fee 100644 --- a/packages/itwinui-react/src/utils/components/FocusTrap.tsx +++ b/packages/itwinui-react/src/utils/components/FocusTrap.tsx @@ -4,13 +4,13 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import { getTabbableElements } from '../functions/focusable.js'; -import { mergeRefs } from '../hooks/useMergedRefs.js'; +import { cloneElementWithRef } from '../functions/react.js'; export type FocusTrapProps = { /** * A single child element to trap focus in. */ - children: JSX.Element; + children: React.JSX.Element; }; /** @@ -49,12 +49,7 @@ export const FocusTrap = (props: FocusTrapProps) => { return ( <>
- {React.cloneElement(children, { - ref: mergeRefs( - (children as React.FunctionComponentElement).ref, - childRef, - ), - })} + {cloneElementWithRef(children, () => ({ ref: childRef }))}
); diff --git a/packages/itwinui-react/src/utils/components/InputContainer.tsx b/packages/itwinui-react/src/utils/components/InputContainer.tsx index cb59938691c..424d4fe68dd 100644 --- a/packages/itwinui-react/src/utils/components/InputContainer.tsx +++ b/packages/itwinui-react/src/utils/components/InputContainer.tsx @@ -15,7 +15,7 @@ export type InputContainerProps = { required?: boolean; status?: 'positive' | 'warning' | 'negative'; message?: React.ReactNode; - icon?: JSX.Element; + icon?: React.JSX.Element; isLabelInline?: boolean; statusMessage?: React.ReactNode; inputId?: string; diff --git a/packages/itwinui-react/src/utils/components/Portal.test.tsx b/packages/itwinui-react/src/utils/components/Portal.test.tsx index 03c89dc20d3..4091be3ba78 100644 --- a/packages/itwinui-react/src/utils/components/Portal.test.tsx +++ b/packages/itwinui-react/src/utils/components/Portal.test.tsx @@ -98,7 +98,11 @@ it('should respect ThemeProvider.portalContainer', () => {
my foot
-