@itwin/itwinui-react/cjs/core/Menu/MenuItem.js

A react component library for iTwinUI

'use strict';
Object.defineProperty(exports, '__esModule', {
  value: true,
});
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 = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
const _index = require('../../utils/index.js');
const _Menu = require('./Menu.js');
const _ListItem = require('../List/ListItem.js');
const _classnames = /*#__PURE__*/ _interop_require_default._(
  require('classnames'),
);
const _DropdownMenu = require('../DropdownMenu/DropdownMenu.js');
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;
  let logWarning = (0, _index.useWarningLogger)();
  let hasSubMenu = _react.useMemo(
    () => subMenuItems.length > 0,
    [subMenuItems.length],
  );
  if (
    'development' === process.env.NODE_ENV &&
    null != onClickProp &&
    hasSubMenu
  )
    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 dropdownMenu = _react.useContext(_DropdownMenu.DropdownMenuContext);
  let shouldCloseMenuOnClick =
    _react.useContext(_DropdownMenu.DropdownMenuCloseOnClickContext) &&
    !hasSubMenu;
  let menuItemRef = _react.useRef(null);
  let submenuId = (0, _index.useId)();
  let popoverProps = _react.useMemo(
    () => ({
      placement: 'right-start',
      interactions: {
        click: true,
        hover: true,
        listNavigation: {
          nested: hasSubMenu,
          openOnArrowKeyDown: true,
        },
      },
    }),
    [hasSubMenu],
  );
  let onClick = (event) => {
    if (disabled) return;
    if (shouldCloseMenuOnClick) dropdownMenu?.close();
    onClickProp?.(value ?? event);
  };
  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': hasSubMenu ? 'true' : void 0,
      'aria-controls': hasSubMenu ? submenuId : void 0,
      'aria-disabled': disabled,
      ...(parentMenu?.popoverGetItemProps != null
        ? parentMenu.popoverGetItemProps({
            focusableItemIndex,
            userProps: {
              onClick,
            },
          })
        : {
            onClick,
          }),
      ...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 &&
      hasSubMenu &&
      _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,
    hasSubMenu && !disabled
      ? _react.createElement(
          _Menu.Menu,
          {
            id: submenuId,
            trigger: trigger,
            popoverProps: popoverProps,
          },
          subMenuItems,
        )
      : trigger,
  );
});
if ('development' === process.env.NODE_ENV) MenuItem.displayName = 'MenuItem';