@lanaco/lnc-react-ui/dist/DropdownMenu.js

React component library

import { jsx as n, jsxs as B } from "react/jsx-runtime";
import { forwardRef as F, useRef as l, useState as U, Children as Y, isValidElement as $, cloneElement as c } from "react";
import { s as S } from "./emotion-styled.browser.esm-DfbrHHed.js";
import K from "./Button.js";
import { c as L } from "./utils-BUdHa0nB.js";
import { useTheme as q } from "./ThemeProvider.js";
import A from "./Popover.js";
import G from "./PopoverTrigger.js";
import H from "./PopoverContent.js";
import { m as J } from "./motion-Ckekul_K.js";
const Q = S.div``, W = S(J.div)`
  gap: 0.25rem;
  display: flex;
  flex-direction: column;
  ${(o) => o.widthfitcontent == !1 && "min-width: 12.5rem"};
  background-color: ${(o) => L(
  o.theme,
  "Dropdown",
  o.color,
  "enabled",
  "background"
)};
`, me = F((o, r) => {
  const {
    control: s,
    offsetValue: T = 9,
    placement: M,
    widthFitContent: N = !1,
    closeOnItemSelect: v = !0,
    zIndex: x,
    //----------------
    onFocus: f = () => {
    },
    onBlur: u = () => {
    },
    onClick: d = () => {
    },
    onKeyDown: g = () => {
    },
    onMouseEnter: y = () => {
    },
    onMouseLeave: E = () => {
    },
    onItemSelected: D = () => {
    },
    //----------------
    animation: P = {
      animate: { opacity: 1, height: "auto" },
      exit: { opacity: 0, height: 0 },
      initial: { opacity: 0, height: 0 },
      transition: {
        type: "tween",
        duration: 0.15,
        opacity: { duration: 0.15, ease: "easeOut" },
        height: { duration: 0.15 }
      }
    },
    className: R = "",
    color: t = "primary",
    size: a = "small",
    contentClassName: h = "",
    children: O,
    ...b
  } = o, k = l(), { theme: V } = q(), C = l(), I = l(), [j, p] = U(!1), _ = (e, m, i) => {
    D(e, m, i), v == !0 && p(!1);
  }, z = Y.map(O, (e, m) => {
    var i, w;
    return $(e) && (e.props.__TYPE__ == "MENU_ITEM" || ((i = e == null ? void 0 : e.type) == null ? void 0 : i.displayName) === "MENU_ITEM" || e.props.__TYPE__ == "NESTED_ITEM" || ((w = e == null ? void 0 : e.type) == null ? void 0 : w.displayName) === "NESTED_ITEM") ? m == 0 ? (e.props.ref && (I.current = r), c(e, {
      ref: r || I,
      //needed to focus on navigation
      color: e.props.color ? e.props.color : t,
      size: a,
      onItemSelected: _,
      animation: P
    })) : c(e, {
      color: e.props.color ? e.props.color : t,
      size: a,
      onItemSelected: _
    }) : e;
  });
  return /* @__PURE__ */ n(Q, { ref: r, className: R, ...b, children: /* @__PURE__ */ B(
    A,
    {
      open: j,
      onOpenChange: p,
      placement: M,
      offsetValue: T,
      children: [
        /* @__PURE__ */ n(G, { onClick: () => p((e) => !e), children: typeof s == "string" || s instanceof String ? /* @__PURE__ */ n(
          K,
          {
            text: s,
            onClick: d,
            onMouseEnter: y,
            onMouseLeave: E,
            onBlur: u,
            onFocus: f,
            ref: C,
            onKeyDown: g,
            trailingIcon: "angle-down",
            color: t,
            size: a
          }
        ) : c(s, {
          color: t,
          size: a,
          ref: C,
          onClick: d,
          onMouseEnter: y,
          onMouseLeave: E,
          onBlur: u,
          onFocus: f,
          onKeyDown: g
        }) }),
        /* @__PURE__ */ n(H, { zIndex: x, children: /* @__PURE__ */ n(
          W,
          {
            ref: k,
            widthfitcontent: N,
            color: t,
            theme: V,
            className: h,
            children: z
          }
        ) })
      ]
    }
  ) });
});
export {
  me as default
};