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