Use React.JSX instead of JSX (#2424)

iTwin · Feb 7, 2025 · e93c5a3 · e93c5a3
1 parent 43d2be0
commit e93c5a3
Show file tree

Hide file tree

Showing 38 changed files with 86 additions and 80 deletions.
diff --git 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 `<img>` or `<svg>` 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -136,7 +136,7 @@ export type ComboBoxProps<T> = {
   endIconProps?: React.ComponentProps<typeof ComboBoxEndIcon>;
   /**
    * 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<T> = {
       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(
                             <SelectTag key={item.label} label={item.label} />
                           );
                         })
-                        .filter(Boolean) as JSX.Element[])
+                        .filter(Boolean) as React.JSX.Element[])
                     : undefined
                 }
               />
@@ -678,7 +678,7 @@ export const ComboBox = React.forwardRef(
   },
 ) as <T>(
   props: ComboBoxProps<T> & { ref?: React.ForwardedRef<HTMLElement> },
-) => 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
@@ -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<typeof Input>;
 
 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
@@ -35,7 +35,7 @@ export const ComboBoxInputContainer = React.forwardRef(
             <StatusMessage status={status}>{message}</StatusMessage>
           ) : (
             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
@@ -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
@@ -24,7 +24,10 @@ type ComboBoxStateContextProps<T = unknown> = {
   enableVirtualization: boolean;
   filteredOptions: SelectOption<T>[];
   onClickHandler?: (prop: number) => void;
-  getMenuItem: (option: SelectOption<T>, filteredIndex?: number) => JSX.Element;
+  getMenuItem: (
+    option: SelectOption<T>,
+    filteredIndex?: number,
+  ) => React.JSX.Element;
   focusedIndex: number;
   setFocusedIndex: React.Dispatch<React.SetStateAction<number>>;
   multiple?: boolean;

diff --git 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
@@ -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
@@ -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
@@ -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 `<button>` rather than `<div>`.

diff --git 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
@@ -47,7 +47,7 @@ export type LabeledSelectProps<T> = {
    *
    * 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 <T>(
   props: LabeledSelectProps<T> & { ref?: React.ForwardedRef<HTMLElement> },
-) => 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
@@ -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
@@ -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
@@ -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
@@ -11,7 +11,7 @@ type RadioTileProps = {
   /**
    * Icon to be used.
    */
-  icon?: JSX.Element;
+  icon?: React.JSX.Element;
   /**
    * Label of the Radio tile.
    */