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

DNB Eufemia Design System UI Library

"use client";

var _span;
import React, { useCallback, useRef } from 'react';
import clsx from 'clsx';
import IconPrimary from "../IconPrimary.js";
import Anchor from "../Anchor.js";
import { useMenuTriggerContext } from "./MenuContext.js";
import useMenuItemRegistration from "./useMenuItemRegistration.js";
import MenuItemContent from "./MenuItemContent.js";
import withComponentMarkers from "../../shared/helpers/withComponentMarkers.js";
import useCombinedRef from "../../shared/helpers/useCombinedRef.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
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 = 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 = useRef(null);
  const combinedRef = useCombinedRef(itemRef, externalRef, triggerRef);
  const anchorRef = useRef(null);
  const {
    isActive,
    context
  } = useMenuItemRegistration(itemRef);
  const handleClick = 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 = 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 = _jsxs(_Fragment, {
    children: [_jsx(MenuItemContent, {
      icon: icon,
      text: text,
      children: children
    }), hasSubMenu && (_span || (_span = _jsx("span", {
      className: "dnb-menu__action__submenu-indicator",
      children: _jsx(IconPrimary, {
        icon: "chevron_right"
      })
    })))]
  });
  const hasLink = Boolean(href || to);
  const actionClassName = clsx('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 _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 ? _jsx(Anchor, {
      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
  });
}
withComponentMarkers(MenuAction, {
  _supportsSpacingProps: true
});
export default MenuAction;
//# sourceMappingURL=MenuAction.js.map