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

package/cjs/core/List/ListItem.js

@@ -36,25 +36,19 @@ const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/menu.css");
 const ListItemComponent = React.forwardRef((props, ref) => {
-    const { as: Element = 'li', size = 'default', disabled = false, active = false, actionable = false, focused = false, className, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-list-item', className), "data-iui-active": active ? 'true' : undefined, "data-iui-disabled": disabled ? 'true' : undefined, "data-iui-size": size === 'large' ? 'large' : undefined, "data-iui-actionable": actionable ? 'true' : undefined, "data-iui-focused": focused ? 'true' : undefined, ref: ref, ...rest }));
+    const { size = 'default', disabled = false, active = false, actionable = false, focused = false, className, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { as: 'li', className: (0, classnames_1.default)('iui-list-item', className), "data-iui-active": active ? 'true' : undefined, "data-iui-disabled": disabled ? 'true' : undefined, "data-iui-size": size === 'large' ? 'large' : undefined, "data-iui-actionable": actionable ? 'true' : undefined, "data-iui-focused": focused ? 'true' : undefined, ref: ref, ...rest }));
 });
+ListItemComponent.displayName = 'ListItem';
 // ----------------------------------------------------------------------------
-const ListItemIcon = React.forwardRef((props, ref) => {
-    const { as: Element = 'div', className, ...rest } = props;
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-list-item-icon', className), ref: ref, ...rest }));
-});
+const ListItemIcon = (0, index_js_1.polymorphic)('iui-list-item-icon');
+ListItemIcon.displayName = 'ListItem.Icon';
 // ----------------------------------------------------------------------------
-const ListItemContent = React.forwardRef((props, ref) => {
-    const { as: Element = 'div', className, ...rest } = props;
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-list-item-content', className), ref: ref, ...rest }));
-});
+const ListItemContent = (0, index_js_1.polymorphic)('iui-list-item-content');
+ListItemContent.displayName = 'ListItem.Content';
 // ----------------------------------------------------------------------------
-const ListItemDescription = React.forwardRef((props, ref) => {
-    const { as: Element = 'div', className, ...rest } = props;
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-list-item-description', className), ref: ref, ...rest }));
-});
+const ListItemDescription = (0, index_js_1.polymorphic)('iui-list-item-description');
+ListItemDescription.displayName = 'ListItem.Description';
 // ----------------------------------------------------------------------------
 // Exported compound component
 /**

package/cjs/core/List/index.d.ts

@@ -1,4 +1,2 @@
 export { List } from './List.js';
-export type { ListProps } from './List.js';
 export { ListItem } from './ListItem.js';
-export type { ListItemProps, ListItemIconProps, ListItemContentProps, ListItemDescriptionProps, } from './ListItem.js';

package/cjs/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/cjs/core/Menu/Menu.js

@@ -39,8 +39,7 @@ require("@itwin/itwinui-css/css/menu.css");
  * Basic menu component. Can be used for select or dropdown components.
  */
 exports.Menu = React.forwardRef((props, ref) => {
-    const { children, role = 'menu', setFocus = true, className, style, ...rest } = props;
-    (0, index_js_1.useTheme)();
+    const { setFocus = true, className, ...rest } = props;
     const [focusedIndex, setFocusedIndex] = React.useState();
     const menuRef = React.useRef(null);
     const refs = (0, index_js_1.useMergedRefs)(menuRef, ref);
@@ -87,6 +86,6 @@ exports.Menu = React.forwardRef((props, ref) => {
                 break;
         }
     };
-    return (React.createElement("ul", { className: (0, classnames_1.default)('iui-menu', className), style: style, role: role, onKeyDown: onKeyDown, ref: refs, ...rest }, children));
+    return (React.createElement(index_js_1.Box, { as: 'ul', className: (0, classnames_1.default)('iui-menu', className), role: 'menu', onKeyDown: onKeyDown, ref: refs, ...rest }));
 });
 exports.default = exports.Menu;

package/cjs/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/cjs/core/Menu/MenuDivider.js

@@ -1,38 +1,10 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuDivider = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/menu.css");
 /**
@@ -50,10 +22,7 @@ require("@itwin/itwinui-css/css/menu.css");
  *   ]}
  * </Menu>
  */
-const MenuDivider = (props) => {
-    const { className, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("li", { role: 'separator', className: (0, classnames_1.default)('iui-menu-divider', className), ...rest }));
-};
-exports.MenuDivider = MenuDivider;
+exports.MenuDivider = index_js_1.polymorphic.li('iui-menu-divider', {
+    role: 'separator',
+});
 exports.default = exports.MenuDivider;

package/cjs/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/cjs/core/Menu/MenuExtraContent.js

@@ -1,38 +1,10 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuExtraContent = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/menu.css");
 /**
@@ -55,10 +27,7 @@ require("@itwin/itwinui-css/css/menu.css");
  *   ]}
  * </Menu>
  */
-const MenuExtraContent = (props) => {
-    const { children, className, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("li", { className: (0, classnames_1.default)('iui-menu-content', className), role: 'presentation', ...rest }, children));
-};
-exports.MenuExtraContent = MenuExtraContent;
+exports.MenuExtraContent = index_js_1.polymorphic.li('iui-menu-content', {
+    role: 'presentation',
+});
 exports.default = exports.MenuExtraContent;

package/cjs/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/cjs/core/Menu/MenuItem.js

@@ -22,9 +22,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuItem = void 0;
 /*---------------------------------------------------------------------------------------------
@@ -32,10 +29,10 @@ exports.MenuItem = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/menu.css");
 const Menu_js_1 = require("./Menu.js");
+const ListItem_js_1 = require("../List/ListItem.js");
 /**
  * Context used to provide menu item ref to sub-menu items.
  */
@@ -44,13 +41,14 @@ const MenuItemContext = React.createContext({ ref: undefined });
  * Basic menu item component. Should be used inside `Menu` component for each item.
  */
 exports.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;
-    (0, index_js_1.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 = (0, index_js_1.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) {
@@ -82,29 +80,20 @@ exports.MenuItem = React.forwardRef((props, ref) => {
                 break;
         }
     };
-    const listItem = (React.createElement("li", { className: (0, classnames_1.default)('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_js_1.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: (0, classnames_1.default)(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(index_js_1.SvgCaretRightSmall, { className: 'iui-icon' })),
-        badge &&
-            React.cloneElement(badge, {
-                className: (0, classnames_1.default)(badge.props.className, 'iui-icon'),
-            })));
+        startIcon && (React.createElement(ListItem_js_1.ListItem.Icon, { as: 'span', "aria-hidden": true }, startIcon)),
+        React.createElement(ListItem_js_1.ListItem.Content, null,
+            React.createElement("div", null, children),
+            sublabel && React.createElement(ListItem_js_1.ListItem.Description, null, sublabel)),
+        !endIcon && subMenuItems.length > 0 && (React.createElement(ListItem_js_1.ListItem.Icon, { as: 'span', "aria-hidden": true },
+            React.createElement(index_js_1.SvgCaretRightSmall, null))),
+        endIcon && (React.createElement(ListItem_js_1.ListItem.Icon, { as: 'span', "aria-hidden": true }, endIcon))));
     return subMenuItems.length === 0 ? (listItem) : (React.createElement(MenuItemContext.Provider, { value: { ref: menuItemRef } },
         React.createElement(index_js_1.Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: 'parent', content: React.createElement("div", { onMouseLeave: () => setIsSubmenuVisible(false), onBlur: (e) => {
                     var _a, _b;

package/cjs/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/cjs/core/Menu/MenuItemSkeleton.js

@@ -38,20 +38,18 @@ require("@itwin/itwinui-css/css/menu.css");
 /**
  * Menu item that uses skeletons to indicate loading state.
  */
-const MenuItemSkeleton = (props) => {
+exports.MenuItemSkeleton = React.forwardRef((props, forwardedRef) => {
     const { hasSublabel, hasIcon, contentWidth, translatedStrings = { loading: 'Loading…' }, className, style, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("li", { className: (0, classnames_1.default)('iui-menu-item', 'iui-menu-item-skeleton', { 'iui-large': hasSublabel }, className), style: {
+    return (React.createElement(index_js_1.Box, { as: 'li', className: (0, classnames_1.default)('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(index_js_1.Box, { className: 'iui-icon iui-skeleton', "aria-hidden": true }),
+        React.createElement(index_js_1.Box, { as: 'span', className: 'iui-content' },
+            React.createElement(index_js_1.Box, { className: 'iui-menu-label iui-skeleton', "aria-hidden": true }),
+            hasSublabel && (React.createElement(index_js_1.Box, { className: 'iui-menu-description iui-skeleton', "aria-hidden": true })),
             React.createElement(index_js_1.VisuallyHidden, null, translatedStrings.loading))));
-};
-exports.MenuItemSkeleton = MenuItemSkeleton;
+});
 exports.default = exports.MenuItemSkeleton;

package/cjs/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/cjs/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/cjs/core/Modal/Modal.js

@@ -57,19 +57,17 @@ const index_js_2 = require("../Dialog/index.js");
  *   </ModalButtonBar>
  * </Modal>
  */
-const Modal = (props) => {
+exports.Modal = React.forwardRef((props, forwardedRef) => {
     const { isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = true, onClose, title, children, modalRootId = 'iui-react-portal-container', ownerDocument = (0, index_js_1.getDocument)(), ...rest } = props;
-    (0, index_js_1.useTheme)();
     const [container, setContainer] = React.useState();
     React.useEffect(() => {
         setContainer((0, index_js_1.getContainer)(modalRootId, ownerDocument));
         return () => setContainer(undefined);
     }, [ownerDocument, modalRootId]);
-    return !!container ? (react_dom_1.default.createPortal(React.createElement(index_js_2.Dialog, { isOpen: isOpen, closeOnEsc: closeOnEsc, closeOnExternalClick: closeOnExternalClick, isDismissible: isDismissible, onClose: onClose, preventDocumentScroll: true, trapFocus: true, setFocus: true },
+    return !!container ? (react_dom_1.default.createPortal(React.createElement(index_js_2.Dialog, { isOpen: isOpen, closeOnEsc: closeOnEsc, closeOnExternalClick: closeOnExternalClick, isDismissible: isDismissible, onClose: onClose, preventDocumentScroll: true, trapFocus: true, setFocus: true, ref: forwardedRef },
         React.createElement(index_js_2.Dialog.Backdrop, null),
         React.createElement(index_js_2.Dialog.Main, { "aria-modal": true, ...rest },
             React.createElement(index_js_2.Dialog.TitleBar, { titleText: title }),
             children)), container)) : (React.createElement(React.Fragment, null));
-};
-exports.Modal = Modal;
+});
 exports.default = exports.Modal;

package/cjs/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/cjs/core/Modal/ModalButtonBar.js

@@ -1,38 +1,13 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalButtonBar = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
 const DialogButtonBar_js_1 = require("../Dialog/DialogButtonBar.js");
 /**
  * Container for Buttons in modal.
  */
-const ModalButtonBar = (props) => (React.createElement(DialogButtonBar_js_1.DialogButtonBar, { ...props }));
-exports.ModalButtonBar = ModalButtonBar;
+exports.ModalButtonBar = Object.assign({}, DialogButtonBar_js_1.DialogButtonBar);
 exports.default = exports.ModalButtonBar;

package/cjs/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;