@mankindui/core/dist/components/Tree/index.js

- a react component library - you can see how @mankindui/core can be used via examples: [usage examples](https://github.com/clarklindev/mankindui-test)

import { j as t } from "../../_virtual/jsx-runtime.js";
import { useState as m, useRef as u } from "react";
import "../../node_modules/react-router-dom/dist/index.js";
import d from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
import "../index.js";
import { HiChevronDown as h, HiChevronRight as $ } from "../../node_modules/react-icons/hi2/index.js";
import { Label as b } from "../Label/index.js";
import { Icon as y } from "../Icon/index.js";
import { NavLink as j } from "../../node_modules/react-router/dist/development/chunk-NL6KNZEE.js";
const l = ({ data: c, depth: o = 0 }) => {
  const [r, a] = m([]), p = (i, e) => {
    console.log(`depth: ${i}, index:${e}`);
    const n = r.includes(`${i}-${e}`);
    a(n ? r.filter((s) => s !== `${i}-${e}`) : [.../* @__PURE__ */ new Set([...r, `${i}-${e}`])]);
  };
  return c.map((i, e = 0) => {
    if (i.hasOwnProperty("children")) {
      const { label: n, children: s } = i, f = u(null), x = `${o}-${e}`;
      return /* @__PURE__ */ t.jsxs(g, { "data-component": l.displayName, children: [
        /* @__PURE__ */ t.jsx("button", { onClick: () => p(o, e), children: /* @__PURE__ */ t.jsx(b, { label: n, children: /* @__PURE__ */ t.jsx(y, { size: "M", children: r.includes(x) ? /* @__PURE__ */ t.jsx(h, {}) : /* @__PURE__ */ t.jsx($, {}) }) }) }),
        /* @__PURE__ */ t.jsx(
          v,
          {
            ref: f,
            style: { display: "flex", flexDirection: "column" },
            "data-expanded": r.includes(`${o}-${e}`) ? "true" : "false",
            children: /* @__PURE__ */ t.jsx(l, { data: s, depth: o + 1 })
          }
        )
      ] }, `depth_${o}_index_${e}`);
    }
    if (i.hasOwnProperty("path")) {
      const { label: n, path: s } = i;
      return /* @__PURE__ */ t.jsx(j, { to: s, children: n }, `depth_${o}_index_${e}`);
    }
  });
};
l.displayName = "Tree";
const g = d.div`
    display: flex;
    flex-direction: column;
    justify-items: flex-start;
    align-items: flex-start;
`, v = d.div`
    box-sizing: border-box;
    margin-left: 6px;
    padding-left: 15px;
    border-left: 1px solid currentColor;
    display: block;

    &[data-expanded='false'] {
        visibility: hidden;
        opacity: 0;
        transition: all 0.1s ease-out;
        max-height: 0px;
    }

    &[data-expanded='true'] {
        visibility: visible;
        opacity: 1;
        transition: all 0.1s ease-out;
        max-height: auto;
    }
`;
export {
  l as Tree
};
//# sourceMappingURL=index.js.map