@dnb/eufemia/cjs/components/menu/MenuAction.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _IconPrimary = _interopRequireDefault(require("../IconPrimary.js"));
var _Anchor = _interopRequireDefault(require("../Anchor.js"));
var _MenuContext = require("./MenuContext.js");
var _useMenuItemRegistration = _interopRequireDefault(require("./useMenuItemRegistration.js"));
var _MenuItemContent = _interopRequireDefault(require("./MenuItemContent.js"));
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _useCombinedRef = _interopRequireDefault(require("../../shared/helpers/useCombinedRef.js"));
var _jsxRuntime = require("react/jsx-runtime");
var _span;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function MenuAction(props) {
  var _triggerContext$activ;
  const {
    id,
    className,
    children,
    icon,
    text,
    onClick,
    href,
    to,
    element,
    target,
    rel,
    disabled = false,
    hasSubMenu: hasSubMenuProp = false,
    onKeyDown: externalOnKeyDown,
    ref: externalRef,
    ...rest
  } = props;
  const triggerContext = (0, _MenuContext.useMenuTriggerContext)();
  const hasSubMenu = triggerContext ? true : hasSubMenuProp;
  const isSubMenuOpen = (_triggerContext$activ = triggerContext === null || triggerContext === void 0 ? void 0 : triggerContext.active) !== null && _triggerContext$activ !== void 0 ? _triggerContext$activ : false;
  const triggerProps = triggerContext === null || triggerContext === void 0 ? void 0 : triggerContext.triggerProps;
  const triggerRef = triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.ref;
  const triggerOnKeyDown = triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onKeyDown;
  const triggerOnClick = triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onClick;
  const triggerAriaProps = {};
  if (triggerProps) {
    for (const [key, value] of Object.entries(triggerProps)) {
      if (key === 'aria-controls' || key === 'aria-expanded') {
        triggerAriaProps[key] = value;
      }
    }
  }
  const itemRef = (0, _react.useRef)(null);
  const combinedRef = (0, _useCombinedRef.default)(itemRef, externalRef, triggerRef);
  const anchorRef = (0, _react.useRef)(null);
  const {
    isActive,
    context
  } = (0, _useMenuItemRegistration.default)(itemRef);
  const handleClick = (0, _react.useCallback)(event => {
    if (disabled) {
      event.preventDefault();
      return;
    }
    triggerOnClick === null || triggerOnClick === void 0 || triggerOnClick(event);
    onClick === null || onClick === void 0 || onClick(event);
    if (!hasSubMenu) {
      context === null || context === void 0 || context.closeAll();
    }
  }, [disabled, onClick, hasSubMenu, context, triggerOnClick]);
  const handleKeyDown = (0, _react.useCallback)(event => {
    if (disabled) {
      return;
    }
    if (hasSubMenu && (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowRight')) {
      event.stopPropagation();
      const keyDownHandler = triggerOnKeyDown || externalOnKeyDown;
      keyDownHandler === null || keyDownHandler === void 0 || keyDownHandler(event);
      return;
    }
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      if ((href || to) && anchorRef.current) {
        anchorRef.current.click();
      } else {
        onClick === null || onClick === void 0 || onClick(event);
      }
      context === null || context === void 0 || context.closeAll();
    }
    if (event.key === 'ArrowLeft' && context && context.level > 0) {
      event.preventDefault();
      event.stopPropagation();
      if (context.closeSelf) {
        context.closeSelf();
      } else {
        context.closeAll();
      }
    }
  }, [disabled, href, to, onClick, hasSubMenu, context, triggerOnKeyDown, externalOnKeyDown]);
  const content = (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [(0, _jsxRuntime.jsx)(_MenuItemContent.default, {
      icon: icon,
      text: text,
      children: children
    }), hasSubMenu && (_span || (_span = (0, _jsxRuntime.jsx)("span", {
      className: "dnb-menu__action__submenu-indicator",
      children: (0, _jsxRuntime.jsx)(_IconPrimary.default, {
        icon: "chevron_right"
      })
    })))]
  });
  const hasLink = Boolean(href || to);
  const actionClassName = (0, _clsx.default)('dnb-menu__action', className, disabled && 'dnb-menu__action--disabled', isSubMenuOpen && 'dnb-menu__action--active-trigger', hasLink && 'dnb-menu__action--link', hasSubMenu && 'dnb-menu__action--has-submenu');
  return (0, _jsxRuntime.jsx)("li", {
    id: id,
    ref: combinedRef,
    role: "menuitem",
    className: actionClassName,
    tabIndex: isActive ? 0 : -1,
    "aria-disabled": disabled || undefined,
    "aria-haspopup": hasSubMenu ? 'menu' : undefined,
    ...rest,
    ...triggerAriaProps,
    onClick: handleClick,
    onKeyDown: handleKeyDown,
    children: hasLink ? (0, _jsxRuntime.jsx)(_Anchor.default, {
      noStyle: true,
      ref: anchorRef,
      href: disabled ? undefined : href,
      to: disabled ? undefined : to,
      element: element,
      target: target,
      rel: rel,
      tabIndex: -1,
      "aria-disabled": disabled || undefined,
      className: "dnb-menu__action__link",
      children: content
    }) : content
  });
}
(0, _withComponentMarkers.default)(MenuAction, {
  _supportsSpacingProps: true
});
var _default = exports.default = MenuAction;
//# sourceMappingURL=MenuAction.js.map