@itwin/itwinui-react 3.17.0-dev.1 → 3.17.0

package/esm/core/Dialog/Dialog.js

@@ -7,7 +7,6 @@ import { DialogContext } from './DialogContext.js';
 import { DialogButtonBar } from './DialogButtonBar.js';
 import { DialogMain } from './DialogMain.js';
 import { useMergedRefs, Box, Portal } from '../../utils/index.js';
-import { Transition } from 'react-transition-group';
 let DialogComponent = React.forwardRef((props, ref) => {
   let {
     trapFocus = false,
@@ -27,49 +26,40 @@ let DialogComponent = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   let dialogRootRef = React.useRef(null);
-  return React.createElement(
-    Transition,
-    {
-      in: isOpen,
-      timeout: {
-        exit: 600,
-      },
-      mountOnEnter: true,
-      unmountOnExit: true,
-    },
-    React.createElement(
-      DialogContext.Provider,
-      {
-        value: {
-          isOpen,
-          onClose,
-          closeOnEsc,
-          closeOnExternalClick,
-          isDismissible,
-          preventDocumentScroll,
-          trapFocus,
-          setFocus,
-          isDraggable,
-          isResizable,
-          relativeTo,
-          dialogRootRef,
-          placement,
-        },
-      },
-      React.createElement(
-        Portal,
+  let mergedRefs = useMergedRefs(ref, dialogRootRef);
+  return isOpen
+    ? React.createElement(
+        DialogContext.Provider,
         {
-          portal: portal,
+          value: {
+            isOpen,
+            onClose,
+            closeOnEsc,
+            closeOnExternalClick,
+            isDismissible,
+            preventDocumentScroll,
+            trapFocus,
+            setFocus,
+            isDraggable,
+            isResizable,
+            relativeTo,
+            placement,
+          },
         },
-        React.createElement(Box, {
-          className: cx('iui-dialog-wrapper', className),
-          'data-iui-relative': 'container' === relativeTo,
-          ref: useMergedRefs(ref, dialogRootRef),
-          ...rest,
-        }),
-      ),
-    ),
-  );
+        React.createElement(
+          Portal,
+          {
+            portal: portal,
+          },
+          React.createElement(Box, {
+            className: cx('iui-dialog-wrapper', className),
+            'data-iui-relative': 'container' === relativeTo,
+            ref: mergedRefs,
+            ...rest,
+          }),
+        ),
+      )
+    : null;
 });
 export const Dialog = Object.assign(DialogComponent, {
   Backdrop: DialogBackdrop,

package/esm/core/Dialog/DialogBackdrop.d.ts

@@ -1,6 +1,6 @@
 import type { BackdropProps } from '../Backdrop/Backdrop.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import type { DialogContextProps } from './DialogContext.js';
+import { type DialogContextProps } from './DialogContext.js';
 type DialogBackdropProps = BackdropProps & Pick<DialogContextProps, 'onClose' | 'isDismissible' | 'closeOnExternalClick' | 'relativeTo'>;
 /**
  * Backdrop component for dialog. Recommended to be used with `Dialog`

package/esm/core/Dialog/DialogBackdrop.js

@@ -2,9 +2,11 @@ import * as React from 'react';
 import { Backdrop } from '../Backdrop/Backdrop.js';
 import { useMergedRefs } from '../../utils/index.js';
 import { useDialogContext } from './DialogContext.js';
+import { useDialogMainContext } from './DialogMainContext.js';
 import cx from 'classnames';
 export const DialogBackdrop = React.forwardRef((props, ref) => {
   let dialogContext = useDialogContext();
+  let dialogMainContext = useDialogMainContext();
   let {
     isVisible = dialogContext.isOpen,
     isDismissible = dialogContext.isDismissible,
@@ -21,7 +23,10 @@ export const DialogBackdrop = React.forwardRef((props, ref) => {
   let handleMouseDown = (event) => {
     event.persist();
     if (event.target !== backdropRef.current) return;
-    if (isDismissible && closeOnExternalClick && onClose) onClose(event);
+    if (isDismissible && closeOnExternalClick && onClose) {
+      dialogMainContext?.beforeClose();
+      onClose(event);
+    }
     onMouseDown?.(event);
   };
   return React.createElement(Backdrop, {

package/esm/core/Dialog/DialogContext.d.ts

@@ -83,7 +83,7 @@ export type DialogContextProps = {
     /**
      * Dialog root ref. For internal use.
      */
-    dialogRootRef?: React.RefObject<HTMLDivElement>;
+    dialogRootRef?: React.RefObject<HTMLDivElement | null>;
     /**
      * Determines the positioning of Dialog on page.
      */

package/esm/core/Dialog/DialogMain.js

@@ -10,9 +10,9 @@ import {
   ShadowRoot,
 } from '../../utils/index.js';
 import { useDialogContext } from './DialogContext.js';
-import { Transition } from 'react-transition-group';
 import { DialogDragContext } from './DialogDragContext.js';
 import { useDragAndDrop } from '../../utils/hooks/useDragAndDrop.js';
+import { DialogMainContext } from './DialogMainContext.js';
 export const DialogMain = React.forwardRef((props, ref) => {
   let dialogContext = useDialogContext();
   let {
@@ -33,12 +33,13 @@ export const DialogMain = React.forwardRef((props, ref) => {
     placement = dialogContext.placement,
     ...rest
   } = props;
-  let [style, setStyle] = React.useState();
+  let { dialogRootRef } = dialogContext;
   let dialogRef = React.useRef(null);
+  let previousFocusedElement = React.useRef(null);
+  let [style, setStyle] = React.useState();
   let hasBeenResized = React.useRef(false);
-  let previousFocusedElement = React.useRef();
   let originalBodyOverflow = React.useRef('');
-  React.useEffect(() => {
+  useLayoutEffect(() => {
     if (isOpen) originalBodyOverflow.current = document.body.style.overflow;
   }, [isOpen]);
   React.useEffect(() => {
@@ -54,17 +55,19 @@ export const DialogMain = React.forwardRef((props, ref) => {
     return () => {
       ownerDocument.body.style.overflow = originalBodyOverflow.current;
     };
-  }, [isOpen, preventDocumentScroll]);
+  }, [dialogRef, isOpen, preventDocumentScroll]);
   let handleKeyDown = (event) => {
     if (event.altKey) return;
     event.persist();
-    if (isDismissible && closeOnEsc && 'Escape' === event.key && onClose)
+    if (isDismissible && closeOnEsc && 'Escape' === event.key && onClose) {
+      beforeClose();
       onClose(event);
+    }
     onKeyDown?.(event);
   };
   let { onPointerDown, transform } = useDragAndDrop(
     dialogRef,
-    dialogContext.dialogRootRef,
+    dialogRootRef,
     isDraggable,
   );
   let handlePointerDown = React.useCallback(
@@ -84,13 +87,35 @@ export const DialogMain = React.forwardRef((props, ref) => {
       insetBlockStart: dialogRef.current?.offsetTop,
       transform: `translate(${translateX}px,${translateY}px)`,
     }));
-  }, [isDraggable, isOpen]);
+  }, [dialogRef, isDraggable, isOpen]);
   let setResizeStyle = React.useCallback((newStyle) => {
     setStyle((oldStyle) => ({
       ...oldStyle,
       ...newStyle,
     }));
   }, []);
+  let onEnter = React.useCallback(() => {
+    previousFocusedElement.current =
+      dialogRef.current?.ownerDocument.activeElement;
+    if (setFocus)
+      dialogRef.current?.focus({
+        preventScroll: true,
+      });
+  }, [dialogRef, previousFocusedElement, setFocus]);
+  let beforeClose = React.useCallback(() => {
+    if (
+      dialogRef.current?.contains(
+        dialogRef.current?.ownerDocument.activeElement,
+      )
+    )
+      previousFocusedElement.current?.focus();
+  }, [dialogRef, previousFocusedElement]);
+  let mountRef = React.useCallback(
+    (element) => {
+      if (element) onEnter();
+    },
+    [onEnter],
+  );
   let content = React.createElement(
     Box,
     {
@@ -105,7 +130,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
         className,
       ),
       role: 'dialog',
-      ref: useMergedRefs(dialogRef, ref),
+      ref: useMergedRefs(dialogRef, mountRef, ref),
       onKeyDown: handleKeyDown,
       tabIndex: -1,
       'data-iui-placement': placement,
@@ -123,7 +148,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
       isResizable &&
         React.createElement(Resizer, {
           elementRef: dialogRef,
-          containerRef: dialogContext.dialogRootRef,
+          containerRef: dialogRootRef,
           onResizeStart: () => {
             if (!hasBeenResized.current) {
               hasBeenResized.current = true;
@@ -138,31 +163,14 @@ export const DialogMain = React.forwardRef((props, ref) => {
     children,
   );
   return React.createElement(
-    Transition,
+    DialogMainContext.Provider,
     {
-      in: isOpen,
-      appear: true,
-      timeout: {
-        exit: 600,
-      },
-      onEntered: () => {
-        previousFocusedElement.current =
-          dialogRef.current?.ownerDocument.activeElement;
-        setFocus &&
-          dialogRef.current?.focus({
-            preventScroll: true,
-          });
-      },
-      onExit: () => {
-        if (
-          dialogRef.current?.contains(
-            dialogRef.current?.ownerDocument.activeElement,
-          )
-        )
-          previousFocusedElement.current?.focus();
-      },
-      unmountOnExit: true,
-      nodeRef: dialogRef,
+      value: React.useMemo(
+        () => ({
+          beforeClose,
+        }),
+        [beforeClose],
+      ),
     },
     React.createElement(
       DialogDragContext.Provider,

package/esm/core/Dialog/DialogMainContext.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+type DialogMainContextProps = {
+    beforeClose: () => void;
+};
+export declare const DialogMainContext: React.Context<DialogMainContextProps | null>;
+export declare const useDialogMainContext: () => DialogMainContextProps | null;
+export {};

package/esm/core/Dialog/DialogMainContext.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export const DialogMainContext = React.createContext(null);
+export const useDialogMainContext = () => React.useContext(DialogMainContext);

package/esm/core/Dialog/DialogTitleBar.js

@@ -3,11 +3,13 @@ import cx from 'classnames';
 import { SvgClose, mergeEventHandlers, Box } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { useDialogContext } from './DialogContext.js';
+import { useDialogMainContext } from './DialogMainContext.js';
 import { DialogTitleBarTitle } from './DialogTitleBarTitle.js';
 import { useDialogDragContext } from './DialogDragContext.js';
 export const DialogTitleBar = Object.assign(
   React.forwardRef((props, ref) => {
     let dialogContext = useDialogContext();
+    let dialogMainContext = useDialogMainContext();
     let {
       children,
       titleText,
@@ -19,6 +21,13 @@ export const DialogTitleBar = Object.assign(
       ...rest
     } = props;
     let { onPointerDown } = useDialogDragContext();
+    let onClick = React.useCallback(
+      (e) => {
+        dialogMainContext?.beforeClose();
+        onClose?.(e);
+      },
+      [dialogMainContext, onClose],
+    );
     return React.createElement(
       Box,
       {
@@ -41,7 +50,7 @@ export const DialogTitleBar = Object.assign(
                 {
                   size: 'small',
                   styleType: 'borderless',
-                  onClick: onClose,
+                  onClick: onClick,
                   'aria-label': 'Close',
                   'data-iui-shift': 'right',
                 },

package/esm/core/DropdownMenu/DropdownMenu.d.ts

@@ -6,7 +6,7 @@ export type DropdownMenuProps = {
      * List of menu items. Recommended to use MenuItem component.
      * 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;
+    menuItems: ((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'

package/esm/core/ExpandableBlock/ExpandableBlock.d.ts

@@ -103,9 +103,7 @@ export declare const ExpandableBlock: PolymorphicForwardRefComponent<"div", Expa
      *    <ExpandableBlock.EndIcon> <SvgIcon/> </ExpandableBlock.EndIcon>
      * <ExpandableBlock.Trigger/>
      */
-    EndIcon: PolymorphicForwardRefComponent<"span", Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-    }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
+    EndIcon: PolymorphicForwardRefComponent<"span", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
         size?: "auto" | "small" | "medium" | "large" | import("../../utils/types.js").AnyString;
         fill?: "default" | "positive" | "informational" | "negative" | "warning" | import("../../utils/types.js").AnyString;
         padded?: boolean;

package/esm/core/Header/Header.d.ts

@@ -53,7 +53,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

package/esm/core/Header/HeaderLogo.d.ts

@@ -1,9 +1,10 @@
+import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 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>`.

package/esm/core/InputWithDecorations/InputWithDecorations.d.ts

@@ -15,9 +15,7 @@ import type { InputProps } from '../Input/Input.js';
  *    </InputWithDecorations.Icon>
  * </InputWithDecorations>
  */
-export declare const InputWithDecorations: PolymorphicForwardRefComponent<"div", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "as" | keyof import("../../utils/index.js").InputFlexContainerProps> & import("../../utils/index.js").InputFlexContainerProps & {
+export declare const InputWithDecorations: PolymorphicForwardRefComponent<"div", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "as" | keyof import("../../utils/index.js").InputFlexContainerProps> & import("../../utils/index.js").InputFlexContainerProps & {
     as?: "div" | undefined;
 }> & {
     /**
@@ -30,9 +28,7 @@ export declare const InputWithDecorations: PolymorphicForwardRefComponent<"div",
      * Although similar to `IconButton`, this subcomponent additionally collapses the padding between the button and the input/textarea
      * in `InputWithDecorations`.
      */
-    Button: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & Omit<import("../Buttons/IconButton.js").IconButtonProps, "styleType"> & {
+    Button: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & Omit<import("../Buttons/IconButton.js").IconButtonProps, "styleType"> & {
         styleType?: import("../Buttons/IconButton.js").IconButtonProps["styleType"];
     } & {
         as?: "button" | undefined;

package/esm/core/Label/Label.js

@@ -22,7 +22,7 @@ export const Label = React.forwardRef((props, forwardedRef) => {
         },
         className,
       ),
-      'data-iui-disabled': !!disabled || void 0,
+      'data-iui-disabled': disabled ? true : void 0,
       ref: forwardedRef,
       ...rest,
     },

package/esm/core/LabeledInput/LabeledInput.d.ts

@@ -19,7 +19,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.
      */

package/esm/core/LabeledSelect/LabeledSelect.d.ts

@@ -38,7 +38,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.
      *
@@ -104,4 +104,4 @@ export type LabeledSelectProps<T> = {
  */
 export declare const LabeledSelect: <T>(props: LabeledSelectProps<T> & {
     ref?: React.ForwardedRef<HTMLElement>;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/esm/core/List/List.d.ts

@@ -1 +1,2 @@
-export declare const List: import("../../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;
+import { type PolymorphicForwardRefComponent } from '../../utils/index.js';
+export declare const List: PolymorphicForwardRefComponent<"div">;

package/esm/core/List/List.js

@@ -1,4 +1,21 @@
-import { polymorphic } from '../../utils/index.js';
-export const List = polymorphic.div('iui-list', {
-  role: 'list',
+import * as React from 'react';
+import { Box } from '../../utils/index.js';
+import { FloatingDelayGroup } from '@floating-ui/react';
+import { defaultTooltipDelay } from '../Tooltip/Tooltip.js';
+import cx from 'classnames';
+export const List = React.forwardRef((props, ref) => {
+  let { className, ...rest } = props;
+  return React.createElement(
+    FloatingDelayGroup,
+    {
+      delay: defaultTooltipDelay,
+    },
+    React.createElement(Box, {
+      as: 'div',
+      ref: ref,
+      role: 'list',
+      ...rest,
+      className: cx('iui-list', className),
+    }),
+  );
 });

package/esm/core/Menu/MenuItem.d.ts

@@ -32,21 +32,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'
@@ -55,7 +55,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.
      */

package/esm/core/Overlay/Overlay.js

@@ -17,7 +17,7 @@ let OverlayHiddenContent = React.forwardRef((props, ref) => {
   return React.createElement(
     Box,
     {
-      inert: '',
+      inert: 'true',
       ref: ref,
       ...rest,
     },

package/esm/core/Panels/Panels.d.ts

@@ -46,7 +46,7 @@ type PanelProps = {
 };
 type PanelTriggerProps = {
     for: string;
-    children: React.ReactElement;
+    children: React.ReactElement<any>;
 };
 type PanelHeaderProps = {
     titleProps?: React.ComponentProps<typeof Text>;
@@ -134,7 +134,7 @@ export declare const Panels: {
      * </ListItem>
      */
     Trigger: {
-        (props: PanelTriggerProps): string | number | true | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null;
+        (props: PanelTriggerProps): string | number | bigint | true | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null;
         displayName: string;
     };
     /**

package/esm/core/Panels/Panels.js

@@ -12,6 +12,7 @@ import {
   useWarningLogger,
   useLayoutEffect,
   useLatestRef,
+  useId,
 } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { Flex } from '../Flex/Flex.js';
@@ -131,7 +132,7 @@ let Panel = React.forwardRef((props, forwardedRef) => {
           className: cx('iui-panel', className),
           'aria-labelledby': `${id}-header-title`,
           role: 'group',
-          inert: isInert ? '' : void 0,
+          inert: isInert ? 'true' : void 0,
           'data-iui-transitioning': isTransitioning ? 'true' : void 0,
           ...rest,
         },
@@ -152,7 +153,7 @@ let PanelTrigger = (props) => {
     panels,
   } = useSafeContext(PanelsWrapperContext);
   let { id: panelId } = useSafeContext(PanelContext);
-  let fallbackId = React.useId();
+  let fallbackId = useId();
   let triggerId = children.props.id || fallbackId;
   let onClick = React.useCallback(() => {
     if (null == activePanel) return;

package/esm/core/Popover/Popover.d.ts

@@ -142,7 +142,7 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
         events: import("@floating-ui/react").FloatingEvents;
         dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
         nodeId: string | undefined;
-        floatingId: string;
+        floatingId: string | undefined;
         refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
         elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     };

package/esm/core/Popover/Popover.js

@@ -321,7 +321,7 @@ let PopoverPortal = ({ children, portal = true }) => {
     FloatingPortal,
     {
       key: portalTo?.id,
-      root: portalTo,
+      root: portalTo ?? void 0,
     },
     React.createElement(DisplayContents, null),
     children,

package/esm/core/RadioTiles/RadioTile.d.ts

@@ -4,7 +4,7 @@ type RadioTileProps = {
     /**
      * Icon to be used.
      */
-    icon?: JSX.Element;
+    icon?: React.JSX.Element;
     /**
      * Label of the Radio tile.
      */

package/esm/core/Select/Select.d.ts

@@ -68,7 +68,7 @@ import { usePopover } from '../Popover/Popover.js';
  */
 export declare const Select: <T>(props: SelectProps<T> & {
     ref?: React.ForwardedRef<HTMLElement>;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export type SelectProps<T> = Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'placeholder' | 'value' | 'defaultValue'> & (({
     /**
      * If true, the native `<select>` element will be rendered.
@@ -170,7 +170,7 @@ export type CustomSelectProps<T> = SelectCommonProps & {
     /**
      * Custom renderer for an item in the dropdown list. `MenuItem` item props are going to be populated if not provided.
      */
-    itemRenderer?: (option: SelectOption<T>, itemProps: ItemRendererProps) => JSX.Element;
+    itemRenderer?: (option: SelectOption<T>, itemProps: ItemRendererProps) => React.JSX.Element;
     /**
      * Custom class for menu.
      */
@@ -211,7 +211,7 @@ export type SelectMultipleTypeProps<T> = {
      * Custom renderer for the selected item in select.
      * If `multiple` is enabled, it will give array of options to render.
      */
-    selectedItemRenderer?: (option: SelectOption<T>) => JSX.Element;
+    selectedItemRenderer?: (option: SelectOption<T>) => React.JSX.Element;
     /**
      * Selected option value.
      * If `multiple` is enabled, it is an array of values.
@@ -225,7 +225,7 @@ export type SelectMultipleTypeProps<T> = {
     onChange?: (value: T) => void;
 } | {
     multiple: true;
-    selectedItemRenderer?: (options: SelectOption<T>[]) => JSX.Element;
+    selectedItemRenderer?: (options: SelectOption<T>[]) => React.JSX.Element;
     value?: T[];
     onChange?: (value: T, event: SelectValueChangeEvent) => void;
 };
@@ -263,11 +263,11 @@ export type SelectOption<T> = {
      * @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.
      */

package/esm/core/SideNavigation/SideNavigation.d.ts

@@ -25,12 +25,12 @@ type SideNavigationProps = {
      */
     onExpanderClick?: () => void;
     /**
-     * Submenu to show supplemental info assicated to the main item.
+     * Submenu to show supplemental info associated to the main item.
      *
      * Should be used with the `isSubmenuOpen` props from both `SideNavigation` and `SidenavButton`.
      * @example
      * <SideNavigation
-     *   // ...
+     *   // …
      *   submenu={(
      *     <SidenavSubmenu>
      *       <SidenavSubmenuHeader>Documents</SidenavSubmenuHeader>
@@ -40,7 +40,7 @@ type SideNavigationProps = {
      *   isSubmenuOpen={true}
      * />
      */
-    submenu?: JSX.Element;
+    submenu?: React.JSX.Element;
     /**
      * Set to true to display the provided `submenu`.
      *