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

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = MenuAccordion;
var _react = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _IconPrimary = _interopRequireDefault(require("../IconPrimary.js"));
var _HeightAnimation = _interopRequireDefault(require("../height-animation/HeightAnimation.js"));
var _MenuContext = require("./MenuContext.js");
var _MenuItemContent = _interopRequireDefault(require("./MenuItemContent.js"));
var _useMenuItemRegistration = _interopRequireDefault(require("./useMenuItemRegistration.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 MenuAccordion(props) {
  const {
    id,
    className,
    children,
    icon,
    text,
    disabled = false,
    onOpenChange,
    ...rest
  } = props;
  const parentContext = (0, _MenuContext.useMenuContext)();
  const level = parentContext ? parentContext.level + 1 : 1;
  const [isOpen, setIsOpenState] = (0, _react.useState)(false);
  const setIsOpen = (0, _react.useCallback)(next => {
    setIsOpenState(prev => {
      const value = typeof next === 'function' ? next(prev) : next;
      if (value !== prev) {
        onOpenChange === null || onOpenChange === void 0 || onOpenChange(value);
      }
      return value;
    });
  }, [onOpenChange]);
  const parentIsOpen = parentContext === null || parentContext === void 0 ? void 0 : parentContext.isOpen;
  (0, _react.useEffect)(() => {
    if (!parentIsOpen) {
      setIsOpen(false);
    }
  }, [parentIsOpen, setIsOpen]);
  const triggerRef = (0, _react.useRef)(null);
  const {
    isActive
  } = (0, _useMenuItemRegistration.default)(triggerRef);
  const contentRef = (0, _react.useRef)(null);
  const closeAll = (0, _react.useCallback)(() => {
    setIsOpen(false);
    parentContext === null || parentContext === void 0 || parentContext.closeAll();
  }, [parentContext, setIsOpen]);
  const closeSelf = (0, _react.useCallback)(() => {
    var _triggerRef$current;
    setIsOpen(false);
    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus({
      preventScroll: true
    });
  }, [setIsOpen]);
  const childContextValue = (0, _react.useMemo)(() => {
    if (!parentContext) {
      return null;
    }
    return {
      ...parentContext,
      level,
      closeAll,
      closeSelf
    };
  }, [parentContext, level, closeAll, closeSelf]);
  const handleClick = (0, _react.useCallback)(() => {
    if (disabled) {
      return;
    }
    setIsOpen(prev => !prev);
  }, [disabled, setIsOpen]);
  const focusFirstChild = (0, _react.useCallback)(() => {
    var _contentRef$current;
    const firstChild = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.querySelector('[role="menuitem"]:not([aria-disabled="true"])');
    if (firstChild && parentContext) {
      firstChild.focus({
        preventScroll: true
      });
      const refIndex = parentContext.itemRefs.current.findIndex(r => (r === null || r === void 0 ? void 0 : r.current) === firstChild);
      if (refIndex !== -1) {
        parentContext.setActiveIndex(refIndex);
      }
    }
  }, [parentContext]);
  const handleKeyDown = (0, _react.useCallback)(event => {
    if (disabled) {
      return;
    }
    if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowRight') {
      event.preventDefault();
      event.stopPropagation();
      if (!isOpen) {
        setIsOpen(true);
        requestAnimationFrame(() => {
          focusFirstChild();
        });
      } else if (event.key === 'ArrowRight') {
        focusFirstChild();
      } else {
        setIsOpen(false);
      }
    }
    if (event.key === 'ArrowLeft') {
      event.preventDefault();
      event.stopPropagation();
      setIsOpen(false);
    }
  }, [disabled, isOpen, setIsOpen, focusFirstChild]);
  return (0, _jsxRuntime.jsxs)("li", {
    role: "none",
    className: (0, _clsx.default)('dnb-menu__accordion', className, isOpen && 'dnb-menu__accordion--open', disabled && 'dnb-menu__accordion--disabled'),
    children: [(0, _jsxRuntime.jsxs)("div", {
      id: id,
      ref: triggerRef,
      role: "menuitem",
      "aria-expanded": isOpen,
      "aria-haspopup": "menu",
      "aria-disabled": disabled || undefined,
      tabIndex: isActive ? 0 : -1,
      className: "dnb-menu__action dnb-menu__accordion__trigger",
      onClick: handleClick,
      onKeyDown: handleKeyDown,
      ...rest,
      children: [(0, _jsxRuntime.jsx)(_MenuItemContent.default, {
        icon: icon,
        text: text
      }), _span || (_span = (0, _jsxRuntime.jsx)("span", {
        className: "dnb-menu__accordion__indicator",
        children: (0, _jsxRuntime.jsx)(_IconPrimary.default, {
          icon: "chevron_right"
        })
      }))]
    }), (0, _jsxRuntime.jsx)(_HeightAnimation.default, {
      open: isOpen,
      children: childContextValue && (0, _jsxRuntime.jsx)(_MenuContext.MenuContext, {
        value: childContextValue,
        children: (0, _jsxRuntime.jsx)("ul", {
          ref: contentRef,
          role: "group",
          "aria-label": typeof text === 'string' ? text : undefined,
          className: "dnb-menu__list",
          children: children
        })
      })
    })]
  });
}
//# sourceMappingURL=MenuAccordion.js.map