@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.10

package/esm/core/Menu/Menu.js

@@ -4,59 +4,73 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useMergedRefs, getFocusableElements, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
+import {
+  useMergedRefs,
+  getFocusableElements,
+  Box,
+  mergeEventHandlers,
+} from '../utils/index.js';
 /**
  * Basic menu component. Can be used for select or dropdown components.
  */
 export const Menu = React.forwardRef((props, ref) => {
-    const { setFocus = true, className, ...rest } = props;
-    const [focusedIndex, setFocusedIndex] = React.useState();
-    const menuRef = React.useRef(null);
-    const refs = useMergedRefs(menuRef, ref);
-    const getFocusableNodes = React.useCallback(() => {
-        const focusableItems = getFocusableElements(menuRef.current);
-        // Filter out focusable elements that are inside each menu item, e.g. checkbox, anchor
-        return focusableItems.filter((i) => !focusableItems.some((p) => p.contains(i.parentElement)));
-    }, []);
-    React.useEffect(() => {
-        var _a;
-        const items = getFocusableNodes();
-        if (focusedIndex != null) {
-            (_a = items === null || items === void 0 ? void 0 : items[focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-            return;
-        }
-        const selectedIndex = items.findIndex((el) => el.getAttribute('aria-selected') === 'true');
-        if (setFocus) {
-            setFocusedIndex(selectedIndex > -1 ? selectedIndex : 0);
-        }
-    }, [setFocus, focusedIndex, getFocusableNodes]);
-    const onKeyDown = (event) => {
-        if (event.altKey) {
-            return;
-        }
-        const items = getFocusableNodes();
-        if (!(items === null || items === void 0 ? void 0 : items.length)) {
-            return;
-        }
-        const currentIndex = focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : 0;
-        switch (event.key) {
-            case 'ArrowDown': {
-                setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            }
-            case 'ArrowUp': {
-                setFocusedIndex(Math.max(currentIndex - 1, 0));
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            }
-            default:
-                break;
-        }
-    };
-    return (React.createElement(Box, { as: 'ul', className: cx('iui-menu', className), role: 'menu', onKeyDown: onKeyDown, ref: refs, ...rest }));
+  const { setFocus = true, className, ...rest } = props;
+  const [focusedIndex, setFocusedIndex] = React.useState();
+  const menuRef = React.useRef(null);
+  const refs = useMergedRefs(menuRef, ref);
+  const getFocusableNodes = React.useCallback(() => {
+    const focusableItems = getFocusableElements(menuRef.current);
+    // Filter out focusable elements that are inside each menu item, e.g. checkbox, anchor
+    return focusableItems.filter(
+      (i) => !focusableItems.some((p) => p.contains(i.parentElement)),
+    );
+  }, []);
+  React.useEffect(() => {
+    const items = getFocusableNodes();
+    if (focusedIndex != null) {
+      items?.[focusedIndex]?.focus();
+      return;
+    }
+    const selectedIndex = items.findIndex(
+      (el) => el.getAttribute('aria-selected') === 'true',
+    );
+    if (setFocus) {
+      setFocusedIndex(selectedIndex > -1 ? selectedIndex : 0);
+    }
+  }, [setFocus, focusedIndex, getFocusableNodes]);
+  const onKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    const items = getFocusableNodes();
+    if (!items?.length) {
+      return;
+    }
+    const currentIndex = focusedIndex ?? 0;
+    switch (event.key) {
+      case 'ArrowDown': {
+        setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+      }
+      case 'ArrowUp': {
+        setFocusedIndex(Math.max(currentIndex - 1, 0));
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+      }
+      default:
+        break;
+    }
+  };
+  return React.createElement(Box, {
+    as: 'div',
+    className: cx('iui-menu', className),
+    role: 'menu',
+    ref: refs,
+    ...rest,
+    onKeyDown: mergeEventHandlers(props.onKeyDown, onKeyDown),
+  });
 });
 export default Menu;

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

@@ -1,4 +1,4 @@
-import '@itwin/itwinui-css/css/menu.css';
+/// <reference types="react" />
 /**
  * Divider between menu items. Should be used inside `Menu`.
  * @example
@@ -14,5 +14,5 @@ import '@itwin/itwinui-css/css/menu.css';
  *   ]}
  * </Menu>
  */
-export declare const MenuDivider: import("../utils/props.js").PolymorphicForwardRefComponent<"li", {}>;
+export declare const MenuDivider: import("../utils/props.js").PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
 export default MenuDivider;

package/esm/core/Menu/MenuDivider.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
 /**
  * Divider between menu items. Should be used inside `Menu`.
  * @example
@@ -19,7 +18,7 @@ import '@itwin/itwinui-css/css/menu.css';
  *   ]}
  * </Menu>
  */
-export const MenuDivider = polymorphic.li('iui-menu-divider', {
-    role: 'separator',
+export const MenuDivider = polymorphic('iui-menu-divider', {
+  role: 'separator',
 });
 export default MenuDivider;

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

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/menu.css';
 /**
  * Component that allows to have any additional content inside `Menu`.
  * @example

package/esm/core/Menu/MenuExtraContent.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
 /**
  * Component that allows to have any additional content inside `Menu`.
  * @example
@@ -25,6 +24,6 @@ import '@itwin/itwinui-css/css/menu.css';
  * </Menu>
  */
 export const MenuExtraContent = polymorphic.li('iui-menu-content', {
-    role: 'presentation',
+  role: 'presentation',
 });
 export default MenuExtraContent;

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

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
 import type { ListItemOwnProps } from '../List/ListItem.js';
-export declare type MenuItemProps = {
+export type MenuItemProps = {
     /**
      * Item is selected.
      */
@@ -65,5 +64,5 @@ export declare type MenuItemProps = {
 /**
  * Basic menu item component. Should be used inside `Menu` component for each item.
  */
-export declare const MenuItem: PolymorphicForwardRefComponent<"li", MenuItemProps>;
+export declare const MenuItem: PolymorphicForwardRefComponent<"div", MenuItemProps>;
 export default MenuItem;

package/esm/core/Menu/MenuItem.js

@@ -3,79 +3,182 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Popover, useMergedRefs, SvgCaretRightSmall } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
+import {
+  SvgCaretRightSmall,
+  usePopover,
+  Portal,
+  useMergedRefs,
+  useId,
+} from '../utils/index.js';
 import { Menu } from './Menu.js';
 import { ListItem } from '../List/ListItem.js';
+import { flushSync } from 'react-dom';
 /**
  * Context used to provide menu item ref to sub-menu items.
  */
-const MenuItemContext = React.createContext({ ref: undefined });
+const MenuItemContext = React.createContext({
+  ref: undefined,
+  setIsNestedSubmenuVisible: () => {},
+});
 /**
  * Basic menu item component. Should be used inside `Menu` component for each item.
  */
-export const MenuItem = React.forwardRef((props, ref) => {
-    const { children, isSelected, disabled, value, onClick, sublabel, size = !!sublabel ? 'large' : 'default', startIcon: startIconProp, icon, endIcon: endIconProp, badge, role = 'menuitem', subMenuItems = [], ...rest } = props;
-    const menuItemRef = React.useRef(null);
-    const refs = useMergedRefs(menuItemRef, ref);
-    const { ref: parentMenuItemRef } = React.useContext(MenuItemContext);
-    const subMenuRef = React.useRef(null);
-    const [isSubmenuVisible, setIsSubmenuVisible] = React.useState(false);
-    const startIcon = startIconProp !== null && startIconProp !== void 0 ? startIconProp : icon;
-    const endIcon = endIconProp !== null && endIconProp !== void 0 ? endIconProp : badge;
-    const onKeyDown = (event) => {
-        var _a;
-        if (event.altKey) {
-            return;
+export const MenuItem = React.forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    isSelected,
+    disabled,
+    value,
+    onClick,
+    sublabel,
+    size = !!sublabel ? 'large' : 'default',
+    icon,
+    startIcon = icon,
+    badge,
+    endIcon = badge,
+    role = 'menuitem',
+    subMenuItems = [],
+    ...rest
+  } = props;
+  const menuItemRef = React.useRef(null);
+  const [focusOnSubmenu, setFocusOnSubmenu] = React.useState(false);
+  const submenuId = useId();
+  const [isSubmenuVisible, setIsSubmenuVisible] = React.useState(false);
+  const [isNestedSubmenuVisible, setIsNestedSubmenuVisible] =
+    React.useState(false);
+  const parent = React.useContext(MenuItemContext);
+  const onVisibleChange = (open) => {
+    setIsSubmenuVisible(open);
+    // we don't want parent to close when mouse goes into a nested submenu,
+    // so we need to let the parent know whether the submenu is still open.
+    parent.setIsNestedSubmenuVisible(open);
+  };
+  const popover = usePopover({
+    visible: isSubmenuVisible || isNestedSubmenuVisible,
+    onVisibleChange,
+    placement: 'right-start',
+    trigger: { hover: true, focus: true },
+  });
+  const onKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    switch (event.key) {
+      case 'Enter':
+      case ' ':
+      case 'Spacebar': {
+        !disabled && onClick?.(value);
+        event.preventDefault();
+        break;
+      }
+      case 'ArrowRight': {
+        if (subMenuItems.length > 0) {
+          setIsSubmenuVisible(true);
+          // flush and reset state so we are ready to focus again next time
+          flushSync(() => setFocusOnSubmenu(true));
+          setFocusOnSubmenu(false);
+          event.preventDefault();
+          event.stopPropagation();
         }
-        switch (event.key) {
-            case 'Enter':
-            case ' ':
-            case 'Spacebar': {
-                !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(value));
-                event.preventDefault();
-                break;
-            }
-            case 'ArrowRight': {
-                if (subMenuItems.length > 0) {
-                    setIsSubmenuVisible(true);
-                    event.preventDefault();
-                    event.stopPropagation();
-                }
-                break;
-            }
-            case 'ArrowLeft': {
-                (_a = parentMenuItemRef === null || parentMenuItemRef === void 0 ? void 0 : parentMenuItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                event.stopPropagation();
-                event.preventDefault();
-                break;
-            }
-            default:
-                break;
+        break;
+      }
+      case 'ArrowLeft': {
+        if (parent.ref) {
+          parent.ref.current?.focus();
+          parent.setIsNestedSubmenuVisible(false);
         }
-    };
-    const listItem = (React.createElement(ListItem, { actionable: true, size: size, active: isSelected, disabled: disabled, onClick: () => !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(value)), ref: refs, role: role, tabIndex: disabled || role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-haspopup": subMenuItems.length > 0, "aria-disabled": disabled, onKeyDown: onKeyDown, onMouseEnter: () => setIsSubmenuVisible(true), onMouseLeave: (e) => {
-            var _a;
-            if (!(e.relatedTarget instanceof Node) ||
-                !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
-                setIsSubmenuVisible(false);
-            }
-        }, ...rest },
-        startIcon && (React.createElement(ListItem.Icon, { as: 'span', "aria-hidden": true }, startIcon)),
-        React.createElement(ListItem.Content, null,
-            React.createElement("div", null, children),
-            sublabel && React.createElement(ListItem.Description, null, sublabel)),
-        !endIcon && subMenuItems.length > 0 && (React.createElement(ListItem.Icon, { as: 'span', "aria-hidden": true },
-            React.createElement(SvgCaretRightSmall, null))),
-        endIcon && (React.createElement(ListItem.Icon, { as: 'span', "aria-hidden": true }, endIcon))));
-    return subMenuItems.length === 0 ? (listItem) : (React.createElement(MenuItemContext.Provider, { value: { ref: menuItemRef } },
-        React.createElement(Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: 'parent', content: React.createElement("div", { onMouseLeave: () => setIsSubmenuVisible(false), onBlur: (e) => {
-                    var _a, _b;
-                    !!(e.relatedTarget instanceof Node) &&
-                        !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&
-                        !((_b = subMenuRef.current) === null || _b === void 0 ? void 0 : _b.isEqualNode(e.relatedTarget)) &&
-                        setIsSubmenuVisible(false);
-                } },
-                React.createElement(Menu, { ref: subMenuRef }, subMenuItems)) }, listItem)));
+        event.stopPropagation();
+        event.preventDefault();
+        break;
+      }
+      case 'Escape': {
+        // focus might get lost if submenu closes so move it back to parent
+        parent.ref?.current?.focus();
+        break;
+      }
+      default:
+        break;
+    }
+  };
+  const handlers = {
+    onClick: () => !disabled && onClick?.(value),
+    onKeyDown,
+  };
+  return React.createElement(
+    ListItem,
+    {
+      as: 'div',
+      actionable: true,
+      size: size,
+      active: isSelected,
+      disabled: disabled,
+      ref: useMergedRefs(
+        menuItemRef,
+        forwardedRef,
+        subMenuItems.length > 0 ? popover.refs.setReference : null,
+      ),
+      role: role,
+      tabIndex: disabled || role === 'presentation' ? undefined : -1,
+      'aria-selected': isSelected,
+      'aria-haspopup': subMenuItems.length > 0 ? 'true' : undefined,
+      'aria-controls': subMenuItems.length > 0 ? submenuId : undefined,
+      'aria-expanded': subMenuItems.length > 0 ? popover.open : undefined,
+      'aria-disabled': disabled,
+      ...(subMenuItems.length === 0
+        ? { ...handlers, ...rest }
+        : popover.getReferenceProps({ ...handlers, ...rest })),
+    },
+    startIcon &&
+      React.createElement(
+        ListItem.Icon,
+        { as: 'span', 'aria-hidden': true },
+        startIcon,
+      ),
+    React.createElement(
+      ListItem.Content,
+      null,
+      React.createElement('div', null, children),
+      sublabel && React.createElement(ListItem.Description, null, sublabel),
+    ),
+    !endIcon &&
+      subMenuItems.length > 0 &&
+      React.createElement(
+        ListItem.Icon,
+        { as: 'span', 'aria-hidden': true },
+        React.createElement(SvgCaretRightSmall, null),
+      ),
+    endIcon &&
+      React.createElement(
+        ListItem.Icon,
+        { as: 'span', 'aria-hidden': true },
+        endIcon,
+      ),
+    subMenuItems.length > 0 &&
+      popover.open &&
+      React.createElement(
+        Portal,
+        null,
+        React.createElement(
+          MenuItemContext.Provider,
+          { value: { ref: menuItemRef, setIsNestedSubmenuVisible } },
+          React.createElement(
+            Menu,
+            {
+              setFocus: focusOnSubmenu,
+              ref: popover.refs.setFloating,
+              ...popover.getFloatingProps({
+                id: submenuId,
+                onPointerMove: () => {
+                  // pointer might move into a nested submenu and set isSubmenuVisible to false,
+                  // so we need to flip it back to true when pointer re-enters this submenu.
+                  setIsSubmenuVisible(true);
+                },
+              }),
+            },
+            subMenuItems,
+          ),
+        ),
+      ),
+  );
 });
 export default MenuItem;

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

@@ -1,6 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
-declare type MenuItemSkeletonProps = {
+type MenuItemSkeletonProps = {
     /**
      * Flag whether to show skeleton for sub-label.
      */
@@ -27,5 +26,5 @@ declare type MenuItemSkeletonProps = {
 /**
  * Menu item that uses skeletons to indicate loading state.
  */
-export declare const MenuItemSkeleton: PolymorphicForwardRefComponent<"li", MenuItemSkeletonProps>;
+export declare const MenuItemSkeleton: PolymorphicForwardRefComponent<"div", MenuItemSkeletonProps>;
 export default MenuItemSkeleton;

package/esm/core/Menu/MenuItemSkeleton.js

@@ -5,22 +5,52 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box, VisuallyHidden } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
 /**
  * Menu item that uses skeletons to indicate loading state.
  */
 export const MenuItemSkeleton = React.forwardRef((props, forwardedRef) => {
-    const { hasSublabel, hasIcon, contentWidth, translatedStrings = { loading: 'Loading…' }, className, style, ...rest } = props;
-    return (React.createElement(Box, { as: 'li', className: cx('iui-menu-item-skeleton', className), "data-iui-size": hasSublabel && 'large', style: {
-            ...{
-                '--iui-menu-item-content-skeleton-max-width': contentWidth,
-            },
-            ...style,
-        }, ref: forwardedRef, ...rest },
-        hasIcon && React.createElement(Box, { className: 'iui-icon iui-skeleton', "aria-hidden": true }),
-        React.createElement(Box, { as: 'span', className: 'iui-content' },
-            React.createElement(Box, { className: 'iui-menu-label iui-skeleton', "aria-hidden": true }),
-            hasSublabel && (React.createElement(Box, { className: 'iui-menu-description iui-skeleton', "aria-hidden": true })),
-            React.createElement(VisuallyHidden, null, translatedStrings.loading))));
+  const {
+    hasSublabel,
+    hasIcon,
+    contentWidth,
+    translatedStrings = { loading: 'Loading…' },
+    className,
+    style,
+    ...rest
+  } = props;
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-menu-item-skeleton', className),
+      'data-iui-size': hasSublabel && 'large',
+      style: {
+        ...{
+          '--iui-menu-item-content-skeleton-max-width': contentWidth,
+        },
+        ...style,
+      },
+      ref: forwardedRef,
+      ...rest,
+    },
+    hasIcon &&
+      React.createElement(Box, {
+        className: 'iui-icon iui-skeleton',
+        'aria-hidden': true,
+      }),
+    React.createElement(
+      Box,
+      { as: 'span', className: 'iui-content' },
+      React.createElement(Box, {
+        className: 'iui-menu-label iui-skeleton',
+        'aria-hidden': true,
+      }),
+      hasSublabel &&
+        React.createElement(Box, {
+          className: 'iui-menu-description iui-skeleton',
+          'aria-hidden': true,
+        }),
+      React.createElement(VisuallyHidden, null, translatedStrings.loading),
+    ),
+  );
 });
 export default MenuItemSkeleton;

package/esm/core/Modal/Modal.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/dialog.css';
 import type { DialogMainProps } from '../Dialog/DialogMain.js';
-declare type ModalProps = {
+type ModalProps = {
     /**
      * Modal title.
      */
@@ -31,16 +30,15 @@ declare type ModalProps = {
      */
     onKeyDown?: React.KeyboardEventHandler;
     /**
-     * Id of the root where the modal will be rendered in.
-     * @default 'iui-react-portal-container'
-     */
-    modalRootId?: string;
-    /**
-     * Document where the modal will be rendered.
-     * Can be specified to render in a different document (e.g. a popup window).
-     * @default document
+     * If true, the dialog will be portaled into a <div> inside the nearest `ThemeProvider`.
+     *
+     * Can be set to an object with a `to` property to portal into a specific element.
+     *
+     * @default true
      */
-    ownerDocument?: Document;
+    portal?: boolean | {
+        to: HTMLElement;
+    };
     /**
      * Content of the modal.
      */

package/esm/core/Modal/Modal.js

@@ -3,9 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import ReactDOM from 'react-dom';
-import { getContainer, getDocument } from '../utils/index.js';
-import '@itwin/itwinui-css/css/dialog.css';
 import { Dialog } from '../Dialog/index.js';
 /**
  * Modal component which can wrap any content.
@@ -29,16 +26,38 @@ import { Dialog } from '../Dialog/index.js';
  * </Modal>
  */
 export const Modal = React.forwardRef((props, forwardedRef) => {
-    const { isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = true, onClose, title, children, modalRootId = 'iui-react-portal-container', ownerDocument = getDocument(), ...rest } = props;
-    const [container, setContainer] = React.useState();
-    React.useEffect(() => {
-        setContainer(getContainer(modalRootId, ownerDocument));
-        return () => setContainer(undefined);
-    }, [ownerDocument, modalRootId]);
-    return !!container ? (ReactDOM.createPortal(React.createElement(Dialog, { isOpen: isOpen, closeOnEsc: closeOnEsc, closeOnExternalClick: closeOnExternalClick, isDismissible: isDismissible, onClose: onClose, preventDocumentScroll: true, trapFocus: true, setFocus: true, ref: forwardedRef },
-        React.createElement(Dialog.Backdrop, null),
-        React.createElement(Dialog.Main, { "aria-modal": true, ...rest },
-            React.createElement(Dialog.TitleBar, { titleText: title }),
-            children)), container)) : (React.createElement(React.Fragment, null));
+  const {
+    isOpen = false,
+    isDismissible = true,
+    closeOnEsc = true,
+    closeOnExternalClick = true,
+    onClose,
+    title,
+    children,
+    portal = true,
+    ...rest
+  } = props;
+  return React.createElement(
+    Dialog,
+    {
+      isOpen: isOpen,
+      closeOnEsc: closeOnEsc,
+      closeOnExternalClick: closeOnExternalClick,
+      isDismissible: isDismissible,
+      onClose: onClose,
+      preventDocumentScroll: true,
+      trapFocus: true,
+      setFocus: true,
+      ref: forwardedRef,
+      portal: portal,
+    },
+    React.createElement(Dialog.Backdrop, null),
+    React.createElement(
+      Dialog.Main,
+      { 'aria-modal': true, ...rest },
+      React.createElement(Dialog.TitleBar, { titleText: title }),
+      children,
+    ),
+  );
 });
 export default Modal;

package/esm/core/NonIdealState/ErrorPage.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 /** @deprecated Use `NonIdealState` instead. */
-export declare type ErrorPageType = '300' | '301' | '302' | '303' | '304' | '305' | '307' | '308' | '401' | '403' | '404' | '408' | '500' | '502' | '503' | '504' | 'generic';
+export type ErrorPageType = '300' | '301' | '302' | '303' | '304' | '305' | '307' | '308' | '401' | '403' | '404' | '408' | '500' | '502' | '503' | '504' | 'generic';
 /** @deprecated Use `NonIdealState` instead. */
-export declare type ErrorTypeTranslations = {
+export type ErrorTypeTranslations = {
     badGateway: string;
     error: string;
     forbidden: string;
@@ -14,8 +14,7 @@ export declare type ErrorTypeTranslations = {
     timedOut?: string;
     unauthorized: string;
 };
-/** @deprecated Use `NonIdealState` instead. */
-export declare type ErrorPageProps = {
+type ErrorPageProps = {
     /**
      * Type of error controls image and default text
      */
@@ -50,7 +49,7 @@ export declare type ErrorPageProps = {
      * Used to translate default error messages, if no specific @errorName passed in
      */
     translatedErrorMessages?: ErrorTypeTranslations;
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * @deprecated Use `NonIdealState` instead for a smaller client bundle.
  *
@@ -58,5 +57,5 @@ export declare type ErrorPageProps = {
  * @example
  * <ErrorPage errorType='401' />
  */
-export declare const ErrorPage: (props: ErrorPageProps) => JSX.Element;
+export declare const ErrorPage: PolymorphicForwardRefComponent<"div", ErrorPageProps>;
 export default ErrorPage;