@itwin/itwinui-react 3.13.3 → 3.14.0

package/DEV-cjs/core/Menu/Menu.js

@@ -1,140 +1,226 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
 function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
     });
 }
 _export(exports, {
-    Menu: function() {
-        return Menu;
-    },
-    MenuContext: function() {
-        return MenuContext;
-    }
+  Menu: function () {
+    return Menu;
+  },
+  MenuContext: function () {
+    return MenuContext;
+  },
 });
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = _interop_require_wildcard._(require("react"));
-const _classnames = _interop_require_default._(require("classnames"));
-const _index = require("../../utils/index.js");
-const _Popover = require("../Popover/Popover.js");
-const _react1 = require("@floating-ui/react");
-const Menu = _react.forwardRef((props, ref)=>{
-    let { className, trigger, positionReference, portal = true, popoverProps: popoverPropsProp, children, ...rest } = props;
-    let tree = (0, _react1.useFloatingTree)();
-    let nodeId = (0, _react1.useFloatingNodeId)();
-    let parentId = (0, _react1.useFloatingParentNodeId)();
-    let { interactions: interactionsProp, visible: visibleProp, onVisibleChange: onVisibleChangeProp, ...restPopoverProps } = popoverPropsProp ?? {};
-    let { listNavigation: listNavigationPropsProp, hover: hoverProp, ...restInteractionsProps } = interactionsProp ?? {};
-    let [visible, setVisible] = (0, _index.useControlledState)(false, visibleProp, onVisibleChangeProp);
-    let [hasFocusedNodeInSubmenu, setHasFocusedNodeInSubmenu] = _react.useState(false);
-    let [menuElement, setMenuElement] = _react.useState(null);
-    let { focusableElementsRef, focusableElements } = (0, _index.useFocusableElements)(menuElement, {
-        filter: (allElements)=>allElements.filter((i)=>!allElements?.some((p)=>p.contains(i.parentElement)))
-    });
-    let [activeIndex, setActiveIndex] = _react.useState(null);
-    let popover = (0, _Popover.usePopover)({
-        nodeId,
-        visible,
-        onVisibleChange: (open)=>open ? setVisible(true) : close(),
-        interactions: {
-            hover: null == tree ? hoverProp : {
-                enabled: !!hoverProp && !hasFocusedNodeInSubmenu,
-                ...hoverProp
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _index = require('../../utils/index.js');
+const _Popover = require('../Popover/Popover.js');
+const _react1 = require('@floating-ui/react');
+const Menu = _react.forwardRef((props, ref) => {
+  let {
+    className,
+    trigger,
+    positionReference,
+    portal = true,
+    popoverProps: popoverPropsProp,
+    children,
+    ...rest
+  } = props;
+  let tree = (0, _react1.useFloatingTree)();
+  let nodeId = (0, _react1.useFloatingNodeId)();
+  let parentId = (0, _react1.useFloatingParentNodeId)();
+  let {
+    interactions: interactionsProp,
+    visible: visibleProp,
+    onVisibleChange: onVisibleChangeProp,
+    ...restPopoverProps
+  } = popoverPropsProp ?? {};
+  let {
+    listNavigation: listNavigationPropsProp,
+    hover: hoverProp,
+    ...restInteractionsProps
+  } = interactionsProp ?? {};
+  let [visible, setVisible] = (0, _index.useControlledState)(
+    false,
+    visibleProp,
+    onVisibleChangeProp,
+  );
+  let [hasFocusedNodeInSubmenu, setHasFocusedNodeInSubmenu] =
+    _react.useState(false);
+  let [menuElement, setMenuElement] = _react.useState(null);
+  let { focusableElementsRef, focusableElements } = (0,
+  _index.useFocusableElements)(menuElement, {
+    filter: (allElements) =>
+      allElements.filter(
+        (i) => !allElements?.some((p) => p.contains(i.parentElement)),
+      ),
+  });
+  let [activeIndex, setActiveIndex] = _react.useState(null);
+  let popover = (0, _Popover.usePopover)({
+    nodeId,
+    visible,
+    onVisibleChange: (open) => (open ? setVisible(true) : close()),
+    interactions: {
+      hover:
+        null == tree
+          ? hoverProp
+          : {
+              enabled: !!hoverProp && !hasFocusedNodeInSubmenu,
+              ...hoverProp,
             },
-            ...restInteractionsProps
+      ...restInteractionsProps,
+    },
+    ...restPopoverProps,
+    middleware: {
+      size: {
+        maxHeight: 'var(--iui-menu-max-height)',
+      },
+      ...restPopoverProps.middleware,
+    },
+  });
+  let { getReferenceProps, getFloatingProps, getItemProps } = (0,
+  _react1.useInteractions)([
+    (0, _react1.useListNavigation)(popover.context, {
+      activeIndex,
+      focusItemOnHover: false,
+      listRef: focusableElementsRef,
+      onNavigate: setActiveIndex,
+      ...listNavigationPropsProp,
+    }),
+  ]);
+  _react.useEffect(() => {
+    if (void 0 !== positionReference)
+      popover.refs.setPositionReference(positionReference);
+  }, [popover.refs, positionReference]);
+  let refs = (0, _index.useMergedRefs)(
+    setMenuElement,
+    ref,
+    popover.refs.setFloating,
+  );
+  let triggerRef = _react.useRef(null);
+  let close = _react.useCallback(() => {
+    setVisible(false);
+    if (null == parentId)
+      triggerRef.current?.focus({
+        preventScroll: true,
+      });
+  }, [parentId, setVisible]);
+  (0, _index.useSyncExternalStore)(
+    _react.useCallback(() => {
+      let closeUnrelatedMenus = (event) => {
+        if (
+          (parentId === event.parentId && nodeId !== event.nodeId) ||
+          parentId === event.nodeId
+        ) {
+          setVisible(false);
+          setHasFocusedNodeInSubmenu(false);
+        }
+      };
+      tree?.events.on('onNodeFocused', closeUnrelatedMenus);
+      return () => {
+        tree?.events.off('onNodeFocused', closeUnrelatedMenus);
+      };
+    }, [nodeId, parentId, tree?.events, setVisible]),
+    () => void 0,
+    () => void 0,
+  );
+  let popoverGetItemProps = ({ focusableItemIndex, userProps }) =>
+    getItemProps({
+      ...userProps,
+      tabIndex:
+        null != activeIndex &&
+        activeIndex >= 0 &&
+        null != focusableItemIndex &&
+        focusableItemIndex >= 0 &&
+        activeIndex === focusableItemIndex
+          ? 0
+          : -1,
+      onFocus: (0, _index.mergeEventHandlers)(userProps?.onFocus, () => {
+        queueMicrotask(() => {
+          setHasFocusedNodeInSubmenu(true);
+        });
+        tree?.events.emit('onNodeFocused', {
+          nodeId: nodeId,
+          parentId: parentId,
+        });
+      }),
+      onMouseEnter: (0, _index.mergeEventHandlers)(
+        userProps?.onMouseEnter,
+        (event) => {
+          if (null != focusableItemIndex && focusableItemIndex >= 0)
+            setActiveIndex(focusableItemIndex);
+          if (event.target === event.currentTarget) event.currentTarget.focus();
         },
-        ...restPopoverProps
+      ),
     });
-    let { getReferenceProps, getFloatingProps, getItemProps } = (0, _react1.useInteractions)([
-        (0, _react1.useListNavigation)(popover.context, {
-            activeIndex,
-            focusItemOnHover: false,
-            listRef: focusableElementsRef,
-            onNavigate: setActiveIndex,
-            ...listNavigationPropsProp
-        })
-    ]);
-    _react.useEffect(()=>{
-        if (void 0 !== positionReference) popover.refs.setPositionReference(positionReference);
-    }, [
-        popover.refs,
-        positionReference
-    ]);
-    let refs = (0, _index.useMergedRefs)(setMenuElement, ref, popover.refs.setFloating);
-    let triggerRef = _react.useRef(null);
-    let close = _react.useCallback(()=>{
-        setVisible(false);
-        if (null == parentId) triggerRef.current?.focus({
-            preventScroll: true
-        });
-    }, [
-        parentId,
-        setVisible
-    ]);
-    (0, _index.useSyncExternalStore)(_react.useCallback(()=>{
-        let closeUnrelatedMenus = (event)=>{
-            if (parentId === event.parentId && nodeId !== event.nodeId || parentId === event.nodeId) {
-                setVisible(false);
-                setHasFocusedNodeInSubmenu(false);
-            }
-        };
-        tree?.events.on('onNodeFocused', closeUnrelatedMenus);
-        return ()=>{
-            tree?.events.off('onNodeFocused', closeUnrelatedMenus);
-        };
-    }, [
-        nodeId,
-        parentId,
-        tree?.events,
-        setVisible
-    ]), ()=>void 0, ()=>void 0);
-    let popoverGetItemProps = ({ focusableItemIndex, userProps })=>getItemProps({
-            ...userProps,
-            tabIndex: null != activeIndex && activeIndex >= 0 && null != focusableItemIndex && focusableItemIndex >= 0 && activeIndex === focusableItemIndex ? 0 : -1,
-            onFocus: (0, _index.mergeEventHandlers)(userProps?.onFocus, ()=>{
-                queueMicrotask(()=>{
-                    setHasFocusedNodeInSubmenu(true);
-                });
-                tree?.events.emit('onNodeFocused', {
-                    nodeId: nodeId,
-                    parentId: parentId
-                });
+  let reference = (0, _index.cloneElementWithRef)(trigger, (triggerChild) =>
+    getReferenceProps(
+      popover.getReferenceProps({
+        ...triggerChild.props,
+        'aria-expanded': popover.open,
+        ref: (0, _index.mergeRefs)(triggerRef, popover.refs.setReference),
+      }),
+    ),
+  );
+  let floating =
+    popover.open &&
+    _react.createElement(
+      _index.Portal,
+      {
+        portal: portal,
+      },
+      _react.createElement(
+        _index.Box,
+        {
+          as: 'div',
+          className: (0, _classnames.default)('iui-menu', className),
+          ref: refs,
+          ...getFloatingProps(
+            popover.getFloatingProps({
+              role: 'menu',
+              ...rest,
             }),
-            onMouseEnter: (0, _index.mergeEventHandlers)(userProps?.onMouseEnter, (event)=>{
-                if (null != focusableItemIndex && focusableItemIndex >= 0) setActiveIndex(focusableItemIndex);
-                if (event.target === event.currentTarget) event.currentTarget.focus();
-            })
-        });
-    let reference = (0, _index.cloneElementWithRef)(trigger, (triggerChild)=>getReferenceProps(popover.getReferenceProps({
-            ...triggerChild.props,
-            'aria-expanded': popover.open,
-            ref: (0, _index.mergeRefs)(triggerRef, popover.refs.setReference)
-        })));
-    let floating = popover.open && _react.createElement(_index.Portal, {
-        portal: portal
-    }, _react.createElement(_index.Box, {
-        as: "div",
-        className: (0, _classnames.default)('iui-menu', className),
-        ref: refs,
-        ...getFloatingProps(popover.getFloatingProps({
-            role: 'menu',
-            ...rest
-        }))
-    }, children));
-    return _react.createElement(_react.Fragment, null, _react.createElement(MenuContext.Provider, {
+          ),
+        },
+        children,
+      ),
+    );
+  return _react.createElement(
+    _react.Fragment,
+    null,
+    _react.createElement(
+      MenuContext.Provider,
+      {
         value: {
-            popoverGetItemProps,
-            focusableElements
-        }
-    }, _react.createElement(_Popover.PopoverOpenContext.Provider, {
-        value: popover.open
-    }, reference), null != tree ? _react.createElement(_react1.FloatingNode, {
-        id: nodeId
-    }, floating) : floating));
+          popoverGetItemProps,
+          focusableElements,
+        },
+      },
+      _react.createElement(
+        _Popover.PopoverOpenContext.Provider,
+        {
+          value: popover.open,
+        },
+        reference,
+      ),
+      null != tree
+        ? _react.createElement(
+            _react1.FloatingNode,
+            {
+              id: nodeId,
+            },
+            floating,
+          )
+        : floating,
+    ),
+  );
 });
 const MenuContext = _react.createContext(void 0);

package/DEV-cjs/core/Menu/MenuDivider.js

@@ -1,15 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-Object.defineProperty(exports, "MenuDivider", {
-    enumerable: true,
-    get: function() {
-        return MenuDivider;
-    }
+Object.defineProperty(exports, 'MenuDivider', {
+  enumerable: true,
+  get: function () {
+    return MenuDivider;
+  },
 });
-const _index = require("../../utils/index.js");
-const MenuDivider = (0, _index.polymorphic)('iui-menu-divider', {
-    role: 'separator'
+const _index = require('../../utils/index.js');
+const MenuDivider = _index.polymorphic.div('iui-menu-divider', {
+  role: 'separator',
 });
 MenuDivider.displayName = 'MenuDivider';

package/DEV-cjs/core/Menu/MenuExtraContent.js

@@ -1,15 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-Object.defineProperty(exports, "MenuExtraContent", {
-    enumerable: true,
-    get: function() {
-        return MenuExtraContent;
-    }
+Object.defineProperty(exports, 'MenuExtraContent', {
+  enumerable: true,
+  get: function () {
+    return MenuExtraContent;
+  },
 });
-const _index = require("../../utils/index.js");
+const _index = require('../../utils/index.js');
 const MenuExtraContent = _index.polymorphic.li('iui-menu-content', {
-    role: 'presentation'
+  role: 'presentation',
 });
 MenuExtraContent.displayName = 'MenuExtraContent';

package/DEV-cjs/core/Menu/MenuItem.js

@@ -1,82 +1,145 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-Object.defineProperty(exports, "MenuItem", {
-    enumerable: true,
-    get: function() {
-        return MenuItem;
-    }
+Object.defineProperty(exports, 'MenuItem', {
+  enumerable: true,
+  get: function () {
+    return MenuItem;
+  },
 });
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = _interop_require_wildcard._(require("react"));
-const _index = require("../../utils/index.js");
-const _Menu = require("./Menu.js");
-const _ListItem = require("../List/ListItem.js");
-const _classnames = _interop_require_default._(require("classnames"));
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../../utils/index.js');
+const _Menu = require('./Menu.js');
+const _ListItem = require('../List/ListItem.js');
+const _classnames = _interop_require_default._(require('classnames'));
 const logWarning = (0, _index.createWarningLogger)();
-const MenuItem = _react.forwardRef((props, forwardedRef)=>{
-    let { className, children, isSelected, disabled, value, onClick: onClickProp, sublabel, size = sublabel ? 'large' : 'default', icon, startIcon = icon, badge, endIcon = badge, role = 'menuitem', subMenuItems = [], ...rest } = props;
-    if (null != onClickProp && subMenuItems.length > 0) logWarning('Passing a non-empty submenuItems array and onClick to MenuItem at the same time is not supported. This is because when a non empty submenuItems array is passed, clicking the MenuItem toggles the submenu visibility.');
-    let parentMenu = _react.useContext(_Menu.MenuContext);
-    let menuItemRef = _react.useRef(null);
-    let submenuId = (0, _index.useId)();
-    let popoverProps = _react.useMemo(()=>({
-            placement: 'right-start',
-            interactions: {
-                click: true,
-                hover: true,
-                listNavigation: {
-                    nested: subMenuItems.length > 0,
-                    openOnArrowKeyDown: true
-                }
-            }
-        }), [
-        subMenuItems.length
-    ]);
-    let onClick = ()=>{
-        if (disabled) return;
-        onClickProp?.(value);
-    };
-    let handlers = {
-        onClick
-    };
-    let focusableItemIndex = parentMenu?.focusableElements.findIndex((el)=>el === menuItemRef.current);
-    let trigger = _react.createElement(_ListItem.ListItem, {
-        as: "button",
-        type: "button",
-        className: (0, _classnames.default)('iui-button-base', className),
-        actionable: true,
-        size: size,
-        active: isSelected,
-        disabled: disabled,
-        ref: (0, _index.useMergedRefs)(menuItemRef, forwardedRef),
-        role: role,
-        tabIndex: isSelected ? 0 : -1,
-        "aria-selected": isSelected,
-        "aria-haspopup": subMenuItems.length > 0 ? 'true' : void 0,
-        "aria-controls": subMenuItems.length > 0 ? submenuId : void 0,
-        "aria-disabled": disabled,
-        ...parentMenu?.popoverGetItemProps != null ? parentMenu.popoverGetItemProps({
+const MenuItem = _react.forwardRef((props, forwardedRef) => {
+  let {
+    className,
+    children,
+    isSelected,
+    disabled,
+    value,
+    onClick: onClickProp,
+    sublabel,
+    size = sublabel ? 'large' : 'default',
+    icon,
+    startIcon = icon,
+    badge,
+    endIcon = badge,
+    role = 'menuitem',
+    subMenuItems = [],
+    ...rest
+  } = props;
+  if (null != onClickProp && subMenuItems.length > 0)
+    logWarning(
+      'Passing a non-empty submenuItems array and onClick to MenuItem at the same time is not supported. This is because when a non empty submenuItems array is passed, clicking the MenuItem toggles the submenu visibility.',
+    );
+  let parentMenu = _react.useContext(_Menu.MenuContext);
+  let menuItemRef = _react.useRef(null);
+  let submenuId = (0, _index.useId)();
+  let popoverProps = _react.useMemo(
+    () => ({
+      placement: 'right-start',
+      interactions: {
+        click: true,
+        hover: true,
+        listNavigation: {
+          nested: subMenuItems.length > 0,
+          openOnArrowKeyDown: true,
+        },
+      },
+    }),
+    [subMenuItems.length],
+  );
+  let onClick = () => {
+    if (disabled) return;
+    onClickProp?.(value);
+  };
+  let handlers = {
+    onClick,
+  };
+  let focusableItemIndex = parentMenu?.focusableElements.findIndex(
+    (el) => el === menuItemRef.current,
+  );
+  let trigger = _react.createElement(
+    _ListItem.ListItem,
+    {
+      as: 'button',
+      type: 'button',
+      className: (0, _classnames.default)('iui-button-base', className),
+      actionable: true,
+      size: size,
+      active: isSelected,
+      disabled: disabled,
+      ref: (0, _index.useMergedRefs)(menuItemRef, forwardedRef),
+      role: role,
+      tabIndex: isSelected ? 0 : -1,
+      'aria-selected': isSelected,
+      'aria-haspopup': subMenuItems.length > 0 ? 'true' : void 0,
+      'aria-controls': subMenuItems.length > 0 ? submenuId : void 0,
+      'aria-disabled': disabled,
+      ...(parentMenu?.popoverGetItemProps != null
+        ? parentMenu.popoverGetItemProps({
             focusableItemIndex,
-            userProps: handlers
-        }) : handlers,
-        ...rest
-    }, startIcon && _react.createElement(_ListItem.ListItem.Icon, {
-        as: "span",
-        "aria-hidden": true
-    }, startIcon), _react.createElement(_ListItem.ListItem.Content, null, _react.createElement("div", null, children), sublabel && _react.createElement(_ListItem.ListItem.Description, null, sublabel)), !endIcon && subMenuItems.length > 0 && _react.createElement(_ListItem.ListItem.Icon, {
-        as: "span",
-        "aria-hidden": true
-    }, _react.createElement(_index.SvgCaretRightSmall, null)), endIcon && _react.createElement(_ListItem.ListItem.Icon, {
-        as: "span",
-        "aria-hidden": true
-    }, endIcon));
-    return _react.createElement(_react.Fragment, null, subMenuItems.length > 0 && !disabled ? _react.createElement(_Menu.Menu, {
-        id: submenuId,
-        trigger: trigger,
-        popoverProps: popoverProps
-    }, subMenuItems) : trigger);
+            userProps: handlers,
+          })
+        : handlers),
+      ...rest,
+    },
+    startIcon &&
+      _react.createElement(
+        _ListItem.ListItem.Icon,
+        {
+          as: 'span',
+          'aria-hidden': true,
+        },
+        startIcon,
+      ),
+    _react.createElement(
+      _ListItem.ListItem.Content,
+      null,
+      _react.createElement('div', null, children),
+      sublabel &&
+        _react.createElement(_ListItem.ListItem.Description, null, sublabel),
+    ),
+    !endIcon &&
+      subMenuItems.length > 0 &&
+      _react.createElement(
+        _ListItem.ListItem.Icon,
+        {
+          as: 'span',
+          'aria-hidden': true,
+        },
+        _react.createElement(_index.SvgCaretRightSmall, null),
+      ),
+    endIcon &&
+      _react.createElement(
+        _ListItem.ListItem.Icon,
+        {
+          as: 'span',
+          'aria-hidden': true,
+        },
+        endIcon,
+      ),
+  );
+  return _react.createElement(
+    _react.Fragment,
+    null,
+    subMenuItems.length > 0 && !disabled
+      ? _react.createElement(
+          _Menu.Menu,
+          {
+            id: submenuId,
+            trigger: trigger,
+            popoverProps: popoverProps,
+          },
+          subMenuItems,
+        )
+      : trigger,
+  );
 });
 MenuItem.displayName = 'MenuItem';