@frontify/fondue
Version:
Design system of Frontify
54 lines (53 loc) • 1.94 kB
JavaScript
import { jsxs as p, jsx as t } from "react/jsx-runtime";
import { Children as b } from "react";
import f from "../../../foundation/Icon/Generated/IconGrabHandle12.es.js";
import { merge as i } from "../../../utilities/merge.es.js";
import { INDENTATION_WIDTH as x } from "../helpers/constants.es.js";
const h = ({
id: d,
label: e,
level: r = 0,
children: s,
contentComponent: w,
isSelected: n,
dragHandlerPosition: o = "left",
showContentWhileDragging: l = !1
}) => {
const m = b.count(s) > 0, c = { marginLeft: r * x }, a = /* @__PURE__ */ t("button", { tabIndex: -1, className: "tw-p-1 tw-touch-none", children: /* @__PURE__ */ t(f, {}) });
return /* @__PURE__ */ p(
"li",
{
role: "treeitem",
style: c,
id: d.toString(),
"aria-label": e,
"aria-level": r + 1,
"aria-selected": n,
"data-test-id": "fondue-tree-item-overlay",
className: i([
"tw-pointer-events-none tw-bg-white tw-flex tw-items-center tw-gap-x-1 tw-p-2 tw-no-underline tw-leading-5 tw-box-border tw-w-fit tw-drop-shadow-xl tw-rounded",
l ? "tw-opacity-90" : ""
]),
children: [
o === "left" && a,
m && /* @__PURE__ */ t("button", { tabIndex: -1, "data-test-id": "tree-item-toggle", className: "tw-p-1", children: /* @__PURE__ */ t(
"div",
{
className: i([
"tw-transition-transform tw-w-0 tw-h-0 tw-text-black-100 tw-text-opacity-40 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong",
n && "tw-text-box-selected-strong-inverse"
])
}
) }),
e !== void 0 && /* @__PURE__ */ t("span", { children: e }),
w,
o === "right" && a
]
}
);
};
h.displayName = "FondueTreeItemOverlay";
export {
h as TreeItemOverlay
};
//# sourceMappingURL=TreeItemOverlay.es.js.map