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

React component library

import { jsxs as x, Fragment as l, jsx as s } from "react/jsx-runtime";
import { forwardRef as O, useState as P, cloneElement as u, Children as h, isValidElement as z } from "react";
import { P as t } from "./index-S5Cd7WrG.js";
import { n as $ } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { b as j } from "./utils-DtRLzzTZ.js";
import { m as D } from "./motion-Ckekul_K.js";
import { u as Y } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import { A as C } from "./index-D-c5IxDk.js";
const A = $(D.div)`
  ${(o) => o.tuckIn == !0 && `margin-left: ${o.tuckInSize};`}
  ${(o) => o.tuckIn == !0 && `padding-left: ${o.tuckInSize};`}
    ${(o) => o.tuckIn == !0 && `border-left: 2px solid ${j(
  o.theme,
  "MenuItem",
  o.color,
  "focus",
  "background",
  "backgroundOpacity"
)};`}
    border-radius: 2px;
`, c = O((o, p) => {
  const {
    item: d,
    //------------------
    onItemSelected: f = () => {
    },
    //--------------------
    defaultOpen: g = !1,
    tuckIn: y = !0,
    tuckInSize: E = "0.3rem",
    animation: _ = {
      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: I = "",
    style: N = {},
    color: r = "primary",
    size: a = "small",
    __TYPE__: R = "NESTED_ITEM",
    children: T,
    ...S
  } = o, k = Y(), [n, b] = P(g), M = u(d, {
    isNested: !0,
    showNested: n,
    toggleNested: () => {
      b(!n);
    },
    color: r,
    size: a
  }), w = h.map(T, (e, V) => {
    var i, m;
    if (z(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" || ((m = e == null ? void 0 : e.type) == null ? void 0 : m.displayName) === "NESTED_ITEM"))
      return u(e, {
        color: e.props.color ? e.props.color : r,
        size: a,
        onItemSelected: f
      });
  });
  return /* @__PURE__ */ x(l, { children: [
    /* @__PURE__ */ s(l, { children: M }),
    /* @__PURE__ */ s(C, { children: n && /* @__PURE__ */ s(
      A,
      {
        theme: k,
        tuckIn: y,
        tuckInSize: E,
        color: r,
        size: a,
        className: "nested-item-lnc " + I,
        style: N,
        ref: p,
        show: n,
        ..._,
        ...S,
        children: w
      }
    ) })
  ] });
});
c.propTypes = {
  item: t.oneOfType([t.string, t.element]),
  //--------------------------
  defaultOpen: t.bool,
  /**
   * Determines wether nested items will be tucked in to the right (using margin-right and padding-left).
   */
  tuckIn: t.bool,
  tuckInSize: t.string,
  animation: t.object,
  className: t.string,
  style: t.object,
  color: t.oneOf([
    "primary",
    "secondary",
    "success",
    "warning",
    "danger",
    "information",
    "neutral",
    "gray"
  ]),
  size: t.oneOf(["small", "medium", "large"]),
  __TYPE__: t.string
};
c.displayName = "NESTED_ITEM";
export {
  c as default
};