@itwin/itwinui-react 3.0.4 → 3.0.5

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;

package/cjs/core/Modal/Modal.js

@@ -1,13 +1,13 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = 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 Dialog_js_1 = require('../Dialog/Dialog.js');
+const React = tslib_1.__importStar(require("react"));
+const Dialog_js_1 = require("../Dialog/Dialog.js");
 /**
  * Modal component which can wrap any content.
  * @example
@@ -30,38 +30,11 @@ const Dialog_js_1 = require('../Dialog/Dialog.js');
  * </Modal>
  */
 exports.Modal = React.forwardRef((props, forwardedRef) => {
-  const {
-    isOpen = false,
-    isDismissible = true,
-    closeOnEsc = true,
-    closeOnExternalClick = true,
-    onClose,
-    title,
-    children,
-    portal = true,
-    ...rest
-  } = props;
-  return React.createElement(
-    Dialog_js_1.Dialog,
-    {
-      isOpen: isOpen,
-      closeOnEsc: closeOnEsc,
-      closeOnExternalClick: closeOnExternalClick,
-      isDismissible: isDismissible,
-      onClose: onClose,
-      preventDocumentScroll: true,
-      trapFocus: true,
-      setFocus: true,
-      ref: forwardedRef,
-      portal: portal,
-    },
-    React.createElement(Dialog_js_1.Dialog.Backdrop, null),
-    React.createElement(
-      Dialog_js_1.Dialog.Main,
-      { 'aria-modal': true, ...rest },
-      React.createElement(Dialog_js_1.Dialog.TitleBar, { titleText: title }),
-      children,
-    ),
-  );
+    const { isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = true, onClose, title, children, portal = true, ...rest } = props;
+    return (React.createElement(Dialog_js_1.Dialog, { isOpen: isOpen, closeOnEsc: closeOnEsc, closeOnExternalClick: closeOnExternalClick, isDismissible: isDismissible, onClose: onClose, preventDocumentScroll: true, trapFocus: true, setFocus: true, ref: forwardedRef, portal: portal },
+        React.createElement(Dialog_js_1.Dialog.Backdrop, null),
+        React.createElement(Dialog_js_1.Dialog.Main, { "aria-modal": true, ...rest },
+            React.createElement(Dialog_js_1.Dialog.TitleBar, { titleText: title }),
+            children)));
 });
 exports.default = exports.Modal;

package/cjs/core/Modal/ModalButtonBar.js

@@ -1,16 +1,13 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+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 DialogButtonBar_js_1 = require('../Dialog/DialogButtonBar.js');
+const DialogButtonBar_js_1 = require("../Dialog/DialogButtonBar.js");
 /**
  * Container for Buttons in modal.
  */
-exports.ModalButtonBar = Object.assign(
-  {},
-  DialogButtonBar_js_1.DialogButtonBar,
-);
+exports.ModalButtonBar = Object.assign({}, DialogButtonBar_js_1.DialogButtonBar);
 exports.default = exports.ModalButtonBar;

package/cjs/core/Modal/ModalContent.js

@@ -1,11 +1,11 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalContent = 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 DialogContent_js_1 = require('../Dialog/DialogContent.js');
+const DialogContent_js_1 = require("../Dialog/DialogContent.js");
 /**
  * Container for content in `Modal`.
  */