@itwin/itwinui-react 3.0.4 → 3.0.6

package/cjs/core/List/ListItem.js

@@ -1,35 +1,17 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListItem = void 0;
-const tslib_1 = require('tslib');
+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 = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
 const ListItemComponent = React.forwardRef((props, ref) => {
-  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,
-  });
+    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';
 // ----------------------------------------------------------------------------
@@ -39,9 +21,7 @@ ListItemIcon.displayName = 'ListItem.Icon';
 const ListItemContent = (0, index_js_1.polymorphic)('iui-list-item-content');
 ListItemContent.displayName = 'ListItem.Content';
 // ----------------------------------------------------------------------------
-const ListItemDescription = (0, index_js_1.polymorphic)(
-  'iui-list-item-description',
-);
+const ListItemDescription = (0, index_js_1.polymorphic)('iui-list-item-description');
 ListItemDescription.displayName = 'ListItem.Description';
 // ----------------------------------------------------------------------------
 // Exported compound component
@@ -59,30 +39,30 @@ ListItemDescription.displayName = 'ListItem.Description';
  * </List>
  */
 exports.ListItem = Object.assign(ListItemComponent, {
-  /**
-   * Icon to be placed at the beginning or end of the ListItem.
-   */
-  Icon: ListItemIcon,
-  /**
-   * Wrapper for the main content of the ListItem.
-   *
-   * For basic list items, this wrapper is not needed, but it can be useful for two cases:
-   * - When using an end icon. The `ListItem.Content` will fill the available space
-   *   and push the icon to the end
-   * - When using `ListItem.Description`.
-   */
-  Content: ListItemContent,
-  /**
-   * Description to be used in addition to the main label of the ListItem.
-   * Should be used as a child of `ListItem.Content`.
-   *
-   * @example
-   * <ListItem>
-   *  <ListItem.Content>
-   *   <div>some list item</div>
-   *   <ListItem.Description>description for this item</ListItem.Description>
-   *  </ListItem.Content>
-   * </ListItem>
-   */
-  Description: ListItemDescription,
+    /**
+     * Icon to be placed at the beginning or end of the ListItem.
+     */
+    Icon: ListItemIcon,
+    /**
+     * Wrapper for the main content of the ListItem.
+     *
+     * For basic list items, this wrapper is not needed, but it can be useful for two cases:
+     * - When using an end icon. The `ListItem.Content` will fill the available space
+     *   and push the icon to the end
+     * - When using `ListItem.Description`.
+     */
+    Content: ListItemContent,
+    /**
+     * Description to be used in addition to the main label of the ListItem.
+     * Should be used as a child of `ListItem.Content`.
+     *
+     * @example
+     * <ListItem>
+     *  <ListItem.Content>
+     *   <div>some list item</div>
+     *   <ListItem.Description>description for this item</ListItem.Description>
+     *  </ListItem.Content>
+     * </ListItem>
+     */
+    Description: ListItemDescription,
 });

package/cjs/core/Menu/Menu.js

@@ -1,77 +1,64 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Menu = void 0;
-const tslib_1 = require('tslib');
+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 = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
+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(() => {
-    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),
-  });
+    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.js

@@ -1,11 +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');
+const index_js_1 = require("../utils/index.js");
 /**
  * Divider between menu items. Should be used inside `Menu`.
  * @example
@@ -22,6 +22,6 @@ const index_js_1 = require('../utils/index.js');
  * </Menu>
  */
 exports.MenuDivider = (0, index_js_1.polymorphic)('iui-menu-divider', {
-  role: 'separator',
+    role: 'separator',
 });
 exports.default = exports.MenuDivider;

package/cjs/core/Menu/MenuExtraContent.js

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

package/cjs/core/Menu/MenuItem.js

@@ -1,184 +1,108 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuItem = void 0;
-const tslib_1 = require('tslib');
+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 = 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');
-const Popover_js_1 = require('../Popover/Popover.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");
+const Popover_js_1 = require("../Popover/Popover.js");
 /**
  * Context used to provide menu item ref to sub-menu items.
  */
-const MenuItemContext = React.createContext({
-  ref: undefined,
-  setIsNestedSubmenuVisible: () => {},
-});
+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, 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, Popover_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();
+    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, Popover_js_1.usePopover)({
+        visible: isSubmenuVisible || isNestedSubmenuVisible,
+        onVisibleChange,
+        placement: 'right-start',
+        trigger: { hover: true, focus: true },
+    });
+    const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
         }
-        break;
-      }
-      case 'ArrowLeft': {
-        if (parent.ref) {
-          parent.ref.current?.focus();
-          parent.setIsNestedSubmenuVisible(false);
+        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();
+                }
+                break;
+            }
+            case 'ArrowLeft': {
+                if (parent.ref) {
+                    parent.ref.current?.focus();
+                    parent.setIsNestedSubmenuVisible(false);
+                }
+                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;
         }
-        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,
-          ),
-        ),
-      ),
-  );
+    };
+    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.js

@@ -1,65 +1,30 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuItemSkeleton = void 0;
-const tslib_1 = require('tslib');
+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 = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
-const VisuallyHidden_js_1 = require('../VisuallyHidden/VisuallyHidden.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
+const VisuallyHidden_js_1 = require("../VisuallyHidden/VisuallyHidden.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,
-    {
-      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(
-        VisuallyHidden_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(VisuallyHidden_js_1.VisuallyHidden, null, translatedStrings.loading))));
 });
 exports.default = exports.MenuItemSkeleton;