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

package/cjs/core/Menu/Menu.js

@@ -1,91 +1,77 @@
-"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 });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Menu = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * 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");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
 /**
  * Basic menu component. Can be used for select or dropdown components.
  */
 exports.Menu = React.forwardRef((props, ref) => {
-    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);
-    const getFocusableNodes = React.useCallback(() => {
-        const focusableItems = (0, index_js_1.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(index_js_1.Box, { as: 'ul', className: (0, classnames_1.default)('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 = (0, index_js_1.useMergedRefs)(menuRef, ref);
+  const getFocusableNodes = React.useCallback(() => {
+    const focusableItems = (0, index_js_1.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(index_js_1.Box, {
+    as: 'div',
+    className: (0, classnames_1.default)('iui-menu', className),
+    role: 'menu',
+    ref: refs,
+    ...rest,
+    onKeyDown: (0, index_js_1.mergeEventHandlers)(props.onKeyDown, onKeyDown),
+  });
 });
 exports.default = exports.Menu;

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

@@ -1,12 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+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 index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/menu.css");
+const index_js_1 = require('../utils/index.js');
 /**
  * Divider between menu items. Should be used inside `Menu`.
  * @example
@@ -22,7 +21,7 @@ require("@itwin/itwinui-css/css/menu.css");
  *   ]}
  * </Menu>
  */
-exports.MenuDivider = index_js_1.polymorphic.li('iui-menu-divider', {
-    role: 'separator',
+exports.MenuDivider = (0, index_js_1.polymorphic)('iui-menu-divider', {
+  role: 'separator',
 });
 exports.default = exports.MenuDivider;

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

@@ -1,12 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+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 index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/menu.css");
+const index_js_1 = require('../utils/index.js');
 /**
  * Component that allows to have any additional content inside `Menu`.
  * @example
@@ -28,6 +27,6 @@ require("@itwin/itwinui-css/css/menu.css");
  * </Menu>
  */
 exports.MenuExtraContent = index_js_1.polymorphic.li('iui-menu-content', {
-    role: 'presentation',
+  role: 'presentation',
 });
 exports.default = exports.MenuExtraContent;

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

@@ -1,107 +1,183 @@
-"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 });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.MenuItem = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * 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 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");
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
+const Menu_js_1 = require('./Menu.js');
+const ListItem_js_1 = require('../List/ListItem.js');
+const react_dom_1 = require('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.
  */
-exports.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 = (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) {
-            return;
+exports.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 = (0, index_js_1.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 = (0, index_js_1.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
+          (0, react_dom_1.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_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 },
-        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;
-                    !!(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_js_1.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_js_1.ListItem,
+    {
+      as: 'div',
+      actionable: true,
+      size: size,
+      active: isSelected,
+      disabled: disabled,
+      ref: (0, index_js_1.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_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,
+      ),
+    subMenuItems.length > 0 &&
+      popover.open &&
+      React.createElement(
+        index_js_1.Portal,
+        null,
+        React.createElement(
+          MenuItemContext.Provider,
+          { value: { ref: menuItemRef, setIsNestedSubmenuVisible } },
+          React.createElement(
+            Menu_js_1.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,
+          ),
+        ),
+      ),
+  );
 });
 exports.default = exports.MenuItem;

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

@@ -1,55 +1,64 @@
-"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 });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.MenuItemSkeleton = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * 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");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
 /**
  * Menu item that uses skeletons to indicate loading state.
  */
 exports.MenuItemSkeleton = React.forwardRef((props, forwardedRef) => {
-    const { hasSublabel, hasIcon, contentWidth, translatedStrings = { loading: 'Loading…' }, className, style, ...rest } = props;
-    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,
-        }, 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))));
+  const {
+    hasSublabel,
+    hasIcon,
+    contentWidth,
+    translatedStrings = { loading: 'Loading…' },
+    className,
+    style,
+    ...rest
+  } = props;
+  return React.createElement(
+    index_js_1.Box,
+    {
+      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,
+      },
+      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.default = exports.MenuItemSkeleton;