@frontify/fondue/dist/components/Tree/TreeItem/TreeItemMultiselect.es.js

Design system of Frontify

import { jsx as t, jsxs as U } from "react/jsx-runtime";
import { noop as Y } from "lodash-es";
import { memo as $, useRef as q, useCallback as D, useEffect as G, Children as M, useMemo as w } from "react";
import { Checkbox as J, CheckboxState as Q, CheckboxSize as V, CheckboxEmphasis as X } from "../../Checkbox/Checkbox.es.js";
import { Container as Z } from "../../Container/Container.es.js";
import { getMultiselectBackgroundClassName as ee, getMultiselectLiClassName as te, getMultiselectContainerClassName as ae } from "../helpers/multiselectTreeItemstyling.es.js";
import { ExpandButton as se } from "./ExpandButton.es.js";
import { useMultiselectTreeItem as oe } from "./useMultiselectTreeItem.es.js";
import { getMultiselectCheckBoxState as ne } from "../helpers/multiselect.es.js";
import { removeFragmentsAndEnrichChildren as re } from "../utils/removeFragmentsAndEnrichChildren.es.js";
import { useDeepCompareEffect as le } from "../utils/useDeepCompareEffect.es.js";
import { INDENTATION_WIDTH as ce } from "../helpers/constants.es.js";
const ie = $(
  ({
    id: e,
    label: c,
    showCaret: E,
    children: m,
    level: i = 0,
    contentComponent: T,
    parentId: me,
    onSelect: r,
    onExpand: p,
    onShrink: d,
    registerNodeChildren: f,
    unregisterNodeChildren: u,
    isDisabled: a = !1,
    expandable: b = !0,
    checkBoxPosition: h = "left",
    itemStyle: g,
    "data-test-id": v = "fondue-tree-item"
  }) => {
    const L = q(null), { isSelected: s, isExpanded: o, isPartialSelected: S, isParentSelected: k } = oe(e), W = D(
      (n) => {
        n == null || n.stopPropagation(), o ? d && d(e) : p && p(e);
      },
      [e, o, p, d]
    );
    G(() => {
      k && !s && r && r(e, !0);
    }, [e, r, k, s]);
    const I = M.count(m) > 0, { enrichedChildren: C, childrenIds: B } = w(() => {
      const n = re(m, {
        parentId: e,
        level: i + 1
      });
      return {
        enrichedChildren: n,
        childrenIds: n.map((K) => K.props.id)
      };
    }, [m, e, i]);
    le(() => {
      if (M.count(C) === 0 || !o) {
        u == null || u(e);
        return;
      }
      f == null || f({ id: e, children: C });
    }, [o, C, e]);
    const l = w(() => ({
      spacingY: "none",
      contentHight: "single-line",
      shadow: "none",
      borderRadius: "small",
      borderWidth: "none",
      borderStyle: "none",
      activeColorStyle: "neutral",
      ...g
    }), [g]), { liClassName: j, backgroundClassName: A } = w(() => ({
      liClassName: te(l, a),
      backgroundClassName: ee(l, s, a)
    }), [l, a, s]), H = "tw-max-w-full	tw-grow", P = o, R = c !== void 0, x = b && (E ?? I), z = ae(l), N = i * ce, F = { paddingLeft: N }, O = l.borderWidth !== "none" ? {} : { marginLeft: -1 * N }, _ = () => {
      !a && r && r(e, !1);
    }, y = h !== "none" ? /* @__PURE__ */ t(Z, { maxWidth: "16px", maxHeight: "16px", children: /* @__PURE__ */ t(
      J,
      {
        id: `checkbox-${e}`,
        ref: L,
        disabled: a,
        "aria-label": c ?? "",
        emphasis: X.Weak,
        helperText: "",
        hideLabel: !0,
        label: "",
        onChange: _,
        size: V.Default,
        state: a ? Q.Unchecked : ne(s, S),
        tooltip: [],
        value: e
      }
    ) }) : null;
    return /* @__PURE__ */ t(
      "li",
      {
        id: e,
        tabIndex: 0,
        role: "treeitem",
        style: F,
        onKeyDown: Y,
        "aria-label": c,
        "aria-level": i + 1,
        className: j,
        "data-test-id": v,
        "aria-selected": s,
        "aria-expanded": o,
        "data-has-children": I,
        "aria-owns": B.join(" "),
        children: /* @__PURE__ */ U("div", { className: z, children: [
          /* @__PURE__ */ t("span", { className: A, style: O, "aria-hidden": !0 }),
          h === "left" && y,
          b && /* @__PURE__ */ t(
            se,
            {
              onClick: W,
              expanded: P,
              disabled: !x,
              "aria-hidden": !x,
              className: x ? "tw-visible" : "tw-invisible tw-pointer-events-none"
            }
          ),
          R && /* @__PURE__ */ t("span", { className: "first:tw-ml-3.5 tw-h-full tw-flex tw-items-center", children: c }),
          /* @__PURE__ */ t("div", { className: H, children: T }),
          h === "right" && y
        ] })
      },
      e
    );
  }
);
ie.displayName = "FondueTreeItemMultiselect";
export {
  ie as TreeItemMultiselect
};
//# sourceMappingURL=TreeItemMultiselect.es.js.map