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

React component library

import { jsx as r, jsxs as B } from "react/jsx-runtime";
import { forwardRef as K, useRef as l, useState as L, Children as U, isValidElement as Y, cloneElement as f } from "react";
import { P as o } from "./index-S5Cd7WrG.js";
import { n as T } from "./emotion-styled.browser.esm-CjCaF13H.js";
import $ from "./Button.js";
import { b as q } from "./utils-DtRLzzTZ.js";
import { useTheme as A } from "./ThemeProvider.js";
import G from "./Popover.js";
import H from "./PopoverTrigger.js";
import J from "./PopoverContent.js";
import { m as Q } from "./motion-Ckekul_K.js";
const W = T.div``, X = T(Q.div)`
  gap: 0.25rem;
  display: flex;
  flex-direction: column;
  ${(t) => t.widthfitcontent == !1 && "min-width: 12.5rem"};
  background-color: ${(t) => q(
  t.theme,
  "Dropdown",
  t.color,
  "enabled",
  "background"
)};
`, Z = K((t, s) => {
  const {
    control: a,
    offsetValue: _ = 9,
    placement: v,
    widthFitContent: M = !1,
    closeOnItemSelect: P = !0,
    zIndex: N,
    //----------------
    onFocus: u = () => {
    },
    onBlur: d = () => {
    },
    onClick: g = () => {
    },
    onKeyDown: y = () => {
    },
    onMouseEnter: E = () => {
    },
    onMouseLeave: w = () => {
    },
    onItemSelected: O = () => {
    },
    //----------------
    animation: h = {
      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: x = "",
    style: ee = {},
    color: n = "primary",
    size: i = "small",
    contentClassName: D = "",
    popoverProps: oe,
    children: R,
    ...k
  } = t;
  l();
  const z = l(), { theme: F } = A(), C = l(), I = l(), [V, m] = L(!1), S = (e, c, p) => {
    O(e, c, p), P == !0 && m(!1);
  }, j = U.map(R, (e, c) => {
    var p, b;
    return Y(e) && (e.props.__TYPE__ == "MENU_ITEM" || ((p = e == null ? void 0 : e.type) == null ? void 0 : p.displayName) === "MENU_ITEM" || e.props.__TYPE__ == "NESTED_ITEM" || ((b = e == null ? void 0 : e.type) == null ? void 0 : b.displayName) === "NESTED_ITEM") ? c == 0 ? (e.props.ref && (I.current = s), f(e, {
      ref: s || I,
      //needed to focus on navigation
      color: e.props.color ? e.props.color : n,
      size: i,
      onItemSelected: S,
      animation: h
    })) : f(e, {
      color: e.props.color ? e.props.color : n,
      size: i,
      onItemSelected: S
    }) : e;
  });
  return /* @__PURE__ */ r(W, { ref: s, className: x, ...k, children: /* @__PURE__ */ B(
    G,
    {
      open: V,
      onOpenChange: m,
      placement: v,
      offsetValue: _,
      children: [
        /* @__PURE__ */ r(H, { onClick: () => m((e) => !e), children: typeof a == "string" || a instanceof String ? /* @__PURE__ */ r(
          $,
          {
            text: a,
            onClick: g,
            onMouseEnter: E,
            onMouseLeave: w,
            onBlur: d,
            onFocus: u,
            ref: C,
            onKeyDown: y,
            trailingIcon: "angle-down",
            color: n,
            size: i
          }
        ) : f(a, {
          color: n,
          size: i,
          ref: C,
          onClick: g,
          onMouseEnter: E,
          onMouseLeave: w,
          onBlur: d,
          onFocus: u,
          onKeyDown: y
        }) }),
        /* @__PURE__ */ r(J, { zIndex: N, children: /* @__PURE__ */ r(
          X,
          {
            ref: z,
            widthfitcontent: M,
            color: n,
            theme: F,
            className: D,
            children: j
          }
        ) })
      ]
    }
  ) });
});
Z.propTypes = {
  control: o.oneOfType([o.string, o.element]),
  /**
   * Menu offset from the control
   */
  offsetValue: o.number,
  placement: o.oneOf([
    "center",
    "top",
    "right",
    "bottom",
    "left",
    "top-start",
    "top-end",
    "right-start",
    "right-end",
    "bottom-start",
    "bottom-end",
    "left-start",
    "left-end"
  ]),
  /**
   * Adjust width of dropdown according to dropdown items content.
   */
  widthFitContent: o.bool,
  /**
   * Close menu when item is selected
   */
  closeOnItemSelect: o.bool,
  /**
   * zIndex of dropdown popup
   */
  zIndex: o.number,
  //---------------------------------------------------------------
  onBlur: o.func,
  onFocus: o.func,
  onClick: o.func,
  onKeyDown: o.func,
  onMouseEnter: o.func,
  onMouseLeave: o.func,
  onItemSelected: o.func,
  //---------------------------------------------------------------
  animation: o.object,
  className: o.string,
  color: o.oneOf([
    "primary",
    "secondary",
    "success",
    "warning",
    "danger",
    "information",
    "neutral",
    "gray"
  ]),
  size: o.oneOf(["small", "medium", "large"]),
  popoverProps: o.any
};
export {
  Z as default
};