@frontify/fondue/dist/components/Menu/Menu.es.js

Design system of Frontify

import { jsx as l } from "react/jsx-runtime";
import { useState as u, useCallback as M, useEffect as a } from "react";
import { usePopper as y } from "react-popper";
import { useMenuKeyboardNavigation as A } from "./useMenuKeyboardNavigation.es.js";
import { useClickOutside as v } from "../../hooks/useClickOutside.es.js";
import { INSET_BORDER as C } from "../../utilities/borderStyle.es.js";
import { merge as f } from "../../utilities/merge.es.js";
const I = "tw-relative tw-bg-base tw-rounded tw-py-2 tw-shadow-mid tw-z-[120000]", _ = f([I, C]), h = ({
  triggerRef: s,
  children: c,
  open: o = !0,
  offset: b = [0, 8],
  onClose: n,
  "data-test-id": E = "menu"
}) => {
  const [t, r] = u(o), [e, N] = u(null), [m, w] = u(null), O = M(() => {
    e && t && (r(!1), n && n());
  }, [e, t, n]), { dismissibleElementRef: S } = v(O, [
    e
  ]), p = A(
    t,
    m,
    "li > a, li > button:not(:disabled)"
  ), i = y(e, m, {
    placement: "bottom-start",
    strategy: "fixed",
    modifiers: [
      {
        name: "flip",
        enabled: !0
      },
      {
        name: "offset",
        options: {
          offset: b
        }
      }
    ]
  });
  return a(() => {
    const d = s == null ? void 0 : s.current;
    d && N(d);
  }, [s]), a(() => {
    r(o);
  }, [o]), a(() => {
    t && i.update && i.update();
  }, [t]), a(() => {
    p === "CLOSE_MENU" && e && (r(!1), n && n());
  }, [p, n, e]), /* @__PURE__ */ l(
    "nav",
    {
      className: f([_, t ? "tw-block" : "tw-hidden"]),
      ref: w,
      style: e ? i.styles.popper : {},
      ...e ? i.attributes.popper : {},
      "data-test-id": E,
      role: t ? "navigation" : "",
      children: /* @__PURE__ */ l("ol", { ref: S, className: "tw-list-none", children: c })
    }
  );
};
h.displayName = "FondueMenu";
export {
  h as Menu
};
//# sourceMappingURL=Menu.es.js.map