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

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

@@ -1,12 +1,7 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/menu.css';
-export declare type MenuProps = {
-    /**
-     * ARIA role. For menu use 'menu', for select use 'listbox'.
-     * @default 'menu'
-     */
-    role?: string;
+declare type MenuProps = {
     /**
      * Menu items. Recommended to use `MenuItem` components.
      *
@@ -19,27 +14,9 @@ export declare type MenuProps = {
      * @default true
      */
     setFocus?: boolean;
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * Basic menu component. Can be used for select or dropdown components.
  */
-export declare const Menu: React.ForwardRefExoticComponent<{
-    /**
-     * ARIA role. For menu use 'menu', for select use 'listbox'.
-     * @default 'menu'
-     */
-    role?: string | undefined;
-    /**
-     * Menu items. Recommended to use `MenuItem` components.
-     *
-     * If you have custom actionable items, they should have `tabIndex={-1}` for better keyboard navigation support
-     * and selected item should have `aria-selected={true}`.
-     */
-    children: React.ReactNode;
-    /**
-     * If true, the first selected or enabled menu item will be focused automatically.
-     * @default true
-     */
-    setFocus?: boolean | undefined;
-} & Omit<CommonProps, "title"> & React.RefAttributes<HTMLUListElement>>;
+export declare const Menu: PolymorphicForwardRefComponent<"ul", MenuProps>;
 export default Menu;

package/esm/core/Menu/Menu.js

@@ -4,14 +4,13 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useTheme, useMergedRefs, getFocusableElements, } from '../utils/index.js';
+import { useMergedRefs, getFocusableElements, Box } from '../utils/index.js';
 import '@itwin/itwinui-css/css/menu.css';
 /**
  * Basic menu component. Can be used for select or dropdown components.
  */
 export const Menu = React.forwardRef((props, ref) => {
-    const { children, role = 'menu', setFocus = true, className, style, ...rest } = props;
-    useTheme();
+    const { setFocus = true, className, ...rest } = props;
     const [focusedIndex, setFocusedIndex] = React.useState();
     const menuRef = React.useRef(null);
     const refs = useMergedRefs(menuRef, ref);
@@ -58,6 +57,6 @@ export const Menu = React.forwardRef((props, ref) => {
                 break;
         }
     };
-    return (React.createElement("ul", { className: cx('iui-menu', className), style: style, role: role, onKeyDown: onKeyDown, ref: refs, ...rest }, children));
+    return (React.createElement(Box, { as: 'ul', className: cx('iui-menu', className), role: 'menu', onKeyDown: onKeyDown, ref: refs, ...rest }));
 });
 export default Menu;

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

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

package/esm/core/Menu/MenuDivider.js

@@ -2,9 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
-import cx from 'classnames';
-import { useTheme } from '../utils/index.js';
+import { polymorphic } from '../utils/index.js';
 import '@itwin/itwinui-css/css/menu.css';
 /**
  * Divider between menu items. Should be used inside `Menu`.
@@ -21,9 +19,7 @@ import '@itwin/itwinui-css/css/menu.css';
  *   ]}
  * </Menu>
  */
-export const MenuDivider = (props) => {
-    const { className, ...rest } = props;
-    useTheme();
-    return (React.createElement("li", { role: 'separator', className: cx('iui-menu-divider', className), ...rest }));
-};
+export const MenuDivider = polymorphic.li('iui-menu-divider', {
+    role: 'separator',
+});
 export default MenuDivider;

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

@@ -1,9 +1,4 @@
-import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/menu.css';
-export declare type MenuExtraContentProps = {
-    children: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
 /**
  * Component that allows to have any additional content inside `Menu`.
  * @example
@@ -24,5 +19,5 @@ export declare type MenuExtraContentProps = {
  *   ]}
  * </Menu>
  */
-export declare const MenuExtraContent: (props: MenuExtraContentProps) => JSX.Element;
+export declare const MenuExtraContent: import("../utils/props.js").PolymorphicForwardRefComponent<"li", {}>;
 export default MenuExtraContent;

package/esm/core/Menu/MenuExtraContent.js

@@ -2,9 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
-import cx from 'classnames';
-import { useTheme } from '../utils/index.js';
+import { polymorphic } from '../utils/index.js';
 import '@itwin/itwinui-css/css/menu.css';
 /**
  * Component that allows to have any additional content inside `Menu`.
@@ -26,9 +24,7 @@ import '@itwin/itwinui-css/css/menu.css';
  *   ]}
  * </Menu>
  */
-export const MenuExtraContent = (props) => {
-    const { children, className, ...rest } = props;
-    useTheme();
-    return (React.createElement("li", { className: cx('iui-menu-content', className), role: 'presentation', ...rest }, children));
-};
+export const MenuExtraContent = polymorphic.li('iui-menu-content', {
+    role: 'presentation',
+});
 export default MenuExtraContent;

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
+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 = {
     /**
      * Item is selected.
@@ -32,10 +33,20 @@ export declare type MenuItemProps = {
     /**
      * SVG icon component shown on the left.
      */
+    startIcon?: JSX.Element;
+    /**
+     * @deprecated Use startIcon.
+     * SVG icon component shown on the left.
+     */
     icon?: JSX.Element;
     /**
      * SVG icon component shown on the right.
      */
+    endIcon?: JSX.Element;
+    /**
+     * @deprecated Use endIcon
+     * SVG icon component shown on the right.
+     */
     badge?: JSX.Element;
     /**
      * ARIA role. For menu item use 'menuitem', for select item use 'option'.
@@ -50,66 +61,9 @@ export declare type MenuItemProps = {
      * Content of the menu item.
      */
     children?: React.ReactNode;
-} & CommonProps;
+} & Pick<ListItemOwnProps, 'focused'>;
 /**
  * Basic menu item component. Should be used inside `Menu` component for each item.
  */
-export declare const MenuItem: React.ForwardRefExoticComponent<{
-    /**
-     * Item is selected.
-     */
-    isSelected?: boolean | undefined;
-    /**
-     * Item is disabled.
-     */
-    disabled?: boolean | undefined;
-    /**
-     * Value of the item.
-     */
-    value?: unknown;
-    /**
-     * Callback function that handles click and keyboard submit actions.
-     */
-    onClick?: ((value?: unknown) => void) | undefined;
-    /**
-     * Modify height of the item.
-     * Use 'large' when any of the sibling items have `sublabel`.
-     *
-     * Defaults to 'large' if `sublabel` provided, otherwise 'default'.
-     */
-    size?: "default" | "large" | undefined;
-    /**
-     * Sub label shown below the main content of the item.
-     */
-    sublabel?: React.ReactNode;
-    /**
-     * SVG icon component shown on the left.
-     */
-    icon?: JSX.Element | undefined;
-    /**
-     * SVG icon component shown on the right.
-     */
-    badge?: JSX.Element | undefined;
-    /**
-     * ARIA role. For menu item use 'menuitem', for select item use 'option'.
-     * @default 'menuitem'
-     */
-    role?: string | undefined;
-    /**
-     * Items to be shown in the submenu when hovered over the item.
-     */
-    subMenuItems?: JSX.Element[] | undefined;
-    /**
-     * Content of the menu item.
-     */
-    children?: React.ReactNode;
-} & {
-    /**
-     * Context used to provide menu item ref to sub-menu items.
-     */
-    title?: string | undefined;
-    id?: string | undefined;
-} & {
-    style?: React.CSSProperties | undefined;
-} & import("../utils/props.js").ClassNameProps & React.RefAttributes<HTMLLIElement>>;
+export declare const MenuItem: PolymorphicForwardRefComponent<"li", MenuItemProps>;
 export default MenuItem;

package/esm/core/Menu/MenuItem.js

@@ -3,10 +3,10 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import cx from 'classnames';
-import { useTheme, Popover, useMergedRefs, SvgCaretRightSmall, } from '../utils/index.js';
+import { Popover, useMergedRefs, SvgCaretRightSmall } from '../utils/index.js';
 import '@itwin/itwinui-css/css/menu.css';
 import { Menu } from './Menu.js';
+import { ListItem } from '../List/ListItem.js';
 /**
  * Context used to provide menu item ref to sub-menu items.
  */
@@ -15,13 +15,14 @@ const MenuItemContext = React.createContext({ ref: undefined });
  * 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', icon, badge, className, style, role = 'menuitem', subMenuItems = [], ...rest } = props;
-    useTheme();
+    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) {
@@ -53,29 +54,20 @@ export const MenuItem = React.forwardRef((props, ref) => {
                 break;
         }
     };
-    const listItem = (React.createElement("li", { className: cx('iui-menu-item', {
-            'iui-large': size === 'large',
-            'iui-active': isSelected,
-            'iui-disabled': disabled,
-        }, className), onClick: () => !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(value)), ref: refs, style: style, 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) => {
+    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 },
-        icon &&
-            React.cloneElement(icon, {
-                className: cx(icon.props.className, 'iui-icon'),
-            }),
-        React.createElement("span", { className: 'iui-content' },
-            React.createElement("div", { className: 'iui-menu-label' }, children),
-            sublabel && React.createElement("div", { className: 'iui-menu-description' }, sublabel)),
-        !badge && subMenuItems.length > 0 && (React.createElement(SvgCaretRightSmall, { className: 'iui-icon' })),
-        badge &&
-            React.cloneElement(badge, {
-                className: cx(badge.props.className, 'iui-icon'),
-            })));
+        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;

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

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-import type { CommonProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/menu.css';
-export declare type MenuItemSkeletonProps = {
+declare type MenuItemSkeletonProps = {
     /**
      * Flag whether to show skeleton for sub-label.
      */
@@ -24,9 +23,9 @@ export declare type MenuItemSkeletonProps = {
          */
         loading: string;
     };
-} & CommonProps;
+};
 /**
  * Menu item that uses skeletons to indicate loading state.
  */
-export declare const MenuItemSkeleton: (props: MenuItemSkeletonProps) => JSX.Element;
+export declare const MenuItemSkeleton: PolymorphicForwardRefComponent<"li", MenuItemSkeletonProps>;
 export default MenuItemSkeleton;

package/esm/core/Menu/MenuItemSkeleton.js

@@ -4,24 +4,23 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useTheme, VisuallyHidden } from '../utils/index.js';
+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 = (props) => {
+export const MenuItemSkeleton = React.forwardRef((props, forwardedRef) => {
     const { hasSublabel, hasIcon, contentWidth, translatedStrings = { loading: 'Loading…' }, className, style, ...rest } = props;
-    useTheme();
-    return (React.createElement("li", { className: cx('iui-menu-item', 'iui-menu-item-skeleton', { 'iui-large': hasSublabel }, className), style: {
+    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,
-        }, ...rest },
-        hasIcon && React.createElement("div", { className: 'iui-icon iui-skeleton', "aria-hidden": true }),
-        React.createElement("span", { className: 'iui-content' },
-            React.createElement("div", { className: 'iui-menu-label iui-skeleton', "aria-hidden": true }),
-            hasSublabel && (React.createElement("div", { className: 'iui-menu-description iui-skeleton', "aria-hidden": true })),
+        }, 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/Menu/index.d.ts

@@ -1,10 +1,5 @@
 export { Menu } from './Menu.js';
-export type { MenuProps } from './Menu.js';
 export { MenuItem } from './MenuItem.js';
-export type { MenuItemProps } from './MenuItem.js';
 export { MenuDivider } from './MenuDivider.js';
-export type { MenuDividerProps } from './MenuDivider.js';
 export { MenuExtraContent } from './MenuExtraContent.js';
-export type { MenuExtraContentProps } from './MenuExtraContent.js';
 export { MenuItemSkeleton } from './MenuItemSkeleton.js';
-export type { MenuItemSkeletonProps } from './MenuItemSkeleton.js';

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/dialog.css';
-import type { DialogMainProps } from '../Dialog/index.js';
-export declare type ModalProps = {
+import type { DialogMainProps } from '../Dialog/DialogMain.js';
+declare type ModalProps = {
     /**
      * Modal title.
      */
@@ -45,7 +45,7 @@ export declare type ModalProps = {
      * Content of the modal.
      */
     children: React.ReactNode;
-} & Pick<DialogMainProps, 'isOpen' | 'styleType'> & Omit<CommonProps, 'title'>;
+} & Pick<DialogMainProps, 'isOpen' | 'styleType'>;
 /**
  * Modal component which can wrap any content.
  * @example
@@ -67,5 +67,5 @@ export declare type ModalProps = {
  *   </ModalButtonBar>
  * </Modal>
  */
-export declare const Modal: (props: ModalProps) => JSX.Element;
+export declare const Modal: PolymorphicForwardRefComponent<"div", ModalProps>;
 export default Modal;

package/esm/core/Modal/Modal.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import { useTheme, getContainer, getDocument } from '../utils/index.js';
+import { getContainer, getDocument } from '../utils/index.js';
 import '@itwin/itwinui-css/css/dialog.css';
 import { Dialog } from '../Dialog/index.js';
 /**
@@ -28,18 +28,17 @@ import { Dialog } from '../Dialog/index.js';
  *   </ModalButtonBar>
  * </Modal>
  */
-export const Modal = (props) => {
+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;
-    useTheme();
     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 },
+    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));
-};
+});
 export default Modal;

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

@@ -1,13 +1,5 @@
-import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
-export declare type ModalButtonBarProps = {
-    /**
-     * Buttons in the modal bar.
-     */
-    children: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
 /**
  * Container for Buttons in modal.
  */
-export declare const ModalButtonBar: (props: ModalButtonBarProps) => JSX.Element;
+export declare const ModalButtonBar: import("../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;
 export default ModalButtonBar;

package/esm/core/Modal/ModalButtonBar.js

@@ -2,10 +2,9 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
 import { DialogButtonBar } from '../Dialog/DialogButtonBar.js';
 /**
  * Container for Buttons in modal.
  */
-export const ModalButtonBar = (props) => (React.createElement(DialogButtonBar, { ...props }));
+export const ModalButtonBar = Object.assign({}, DialogButtonBar);
 export default ModalButtonBar;

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

@@ -1,13 +1,5 @@
-import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
-export declare type ModalContentProps = {
-    /**
-     * Main content in the `Modal`.
-     */
-    children: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
 /**
  * Container for content in `Modal`.
  */
-export declare const ModalContent: (props: ModalContentProps) => JSX.Element;
+export declare const ModalContent: import("../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;
 export default ModalContent;

package/esm/core/Modal/ModalContent.js

@@ -2,10 +2,9 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
 import { DialogContent } from '../Dialog/DialogContent.js';
 /**
  * Container for content in `Modal`.
  */
-export const ModalContent = (props) => (React.createElement(DialogContent, { ...props }));
+export const ModalContent = Object.assign({}, DialogContent);
 export default ModalContent;

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

@@ -1,8 +1,5 @@
 export { Modal } from './Modal.js';
-export type { ModalProps } from './Modal.js';
 export { ModalButtonBar } from './ModalButtonBar.js';
-export type { ModalButtonBarProps } from './ModalButtonBar.js';
 export { ModalContent } from './ModalContent.js';
-export type { ModalContentProps } from './ModalContent.js';
 declare const _default: "./Modal";
 export default _default;

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/non-ideal-state.css';
-export declare type NonIdealStateProps = {
+declare type NonIdealStateProps = {
     /**
      * An svg component, preferably from @itwin/itwinui-illustrations-react.
      *
@@ -34,7 +35,7 @@ export declare type NonIdealStateProps = {
      * />
      */
     actions?: React.ReactNode;
-} & React.ComponentPropsWithoutRef<'div'>;
+};
 /**
  * A stylized display to communicate common http errors and other non-ideal states.
  * Works well with svgs from @itwin/itwinui-illustrations-react.
@@ -42,5 +43,5 @@ export declare type NonIdealStateProps = {
  * @example
  * <NonIdealState svg={<Svg404 />} heading='Not found' />
  */
-export declare const NonIdealState: (props: NonIdealStateProps) => JSX.Element;
+export declare const NonIdealState: PolymorphicForwardRefComponent<"div", NonIdealStateProps>;
 export default NonIdealState;

package/esm/core/NonIdealState/NonIdealState.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { useTheme } from '../utils/index.js';
+import { Box } from '../utils/index.js';
 import cx from 'classnames';
 import '@itwin/itwinui-css/css/non-ideal-state.css';
 /**
@@ -13,13 +13,12 @@ import '@itwin/itwinui-css/css/non-ideal-state.css';
  * @example
  * <NonIdealState svg={<Svg404 />} heading='Not found' />
  */
-export const NonIdealState = (props) => {
+export const NonIdealState = React.forwardRef((props, forwardedRef) => {
     const { className, svg, heading, description, actions, ...rest } = props;
-    useTheme();
-    return (React.createElement("div", { className: cx('iui-non-ideal-state', className), ...rest },
-        React.createElement("div", { className: 'iui-non-ideal-state-illustration' }, svg),
-        heading && React.createElement("div", { className: 'iui-non-ideal-state-title' }, heading),
-        description && (React.createElement("div", { className: 'iui-non-ideal-state-description' }, description)),
-        actions && React.createElement("div", { className: 'iui-non-ideal-state-actions' }, actions)));
-};
+    return (React.createElement(Box, { className: cx('iui-non-ideal-state', className), ref: forwardedRef, ...rest },
+        React.createElement(Box, { className: 'iui-non-ideal-state-illustration' }, svg),
+        heading && React.createElement(Box, { className: 'iui-non-ideal-state-title' }, heading),
+        description && (React.createElement(Box, { className: 'iui-non-ideal-state-description' }, description)),
+        actions && React.createElement(Box, { className: 'iui-non-ideal-state-actions' }, actions)));
+});
 export default NonIdealState;

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

@@ -1,6 +1,5 @@
 export { ErrorPage } from './ErrorPage.js';
-export type { ErrorPageProps, ErrorPageType, ErrorTypeTranslations, } from './ErrorPage.js';
+export type { ErrorPageType, ErrorTypeTranslations } from './ErrorPage.js';
 export { NonIdealState } from './NonIdealState.js';
-export type { NonIdealStateProps } from './NonIdealState.js';
 declare const _default: "./NonIdealState";
 export default _default;

package/esm/core/NotificationMarker/NotificationMarker.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/utils.css';
-export declare type NotificationMarkerProps = {
+declare type NotificationMarkerProps = {
     /**
      * Content of the NotificationMarker.
      */
@@ -34,7 +35,7 @@ export declare type NotificationMarkerProps = {
      * </NotificationMarker>
      */
     enabled?: boolean;
-} & React.ComponentProps<'span'>;
+};
 /**
  * A small notification circle to the top-right of the passed children prop.
  * This can be applied to almost anything but mostly intended for icons within buttons with `styleType = default / borderless`.
@@ -47,5 +48,5 @@ export declare type NotificationMarkerProps = {
  * @example
  * <NotificationMarker status='positive' pulsing={true}>Live</NotificationMarker>
  */
-export declare const NotificationMarker: React.ForwardRefExoticComponent<Pick<NotificationMarkerProps, "key" | "status" | keyof React.HTMLAttributes<HTMLSpanElement> | "enabled" | "pulsing"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const NotificationMarker: PolymorphicForwardRefComponent<"span", NotificationMarkerProps>;
 export default NotificationMarker;

package/esm/core/NotificationMarker/NotificationMarker.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { useTheme } from '../utils/index.js';
+import { Box } from '../utils/index.js';
 import cx from 'classnames';
 import '@itwin/itwinui-css/css/utils.css';
 /**
@@ -20,7 +20,6 @@ import '@itwin/itwinui-css/css/utils.css';
  */
 export const NotificationMarker = React.forwardRef((props, ref) => {
     const { className, children, status = 'primary', pulsing = false, enabled = true, ...rest } = props;
-    useTheme();
-    return (React.createElement("span", { ref: ref, className: cx({ 'iui-notification-marker': enabled }, className), "data-iui-variant": enabled ? status : null, "data-iui-urgent": enabled ? pulsing : null, ...rest }, children));
+    return (React.createElement(Box, { as: 'span', ref: ref, className: cx({ 'iui-notification-marker': enabled }, className), "data-iui-variant": enabled ? status : null, "data-iui-urgent": enabled ? pulsing : null, ...rest }, children));
 });
 export default NotificationMarker;

package/esm/core/NotificationMarker/index.d.ts

@@ -1,4 +1,3 @@
 export { NotificationMarker } from './NotificationMarker.js';
-export type { NotificationMarkerProps } from './NotificationMarker.js';
 declare const _default: "./NotificationMarker";
 export default _default;