@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
95 lines (94 loc) • 4.29 kB
JavaScript
"use client";
require("../../_virtual/_rolldown/runtime.cjs");
const require_AccordionChevron = require("../Accordion/AccordionChevron.cjs");
const require_Combobox = require("../Combobox/Combobox.cjs");
const require_CheckIcon = require("../Checkbox/CheckIcon.cjs");
const require_CheckboxIndicator = require("../Checkbox/CheckboxIndicator/CheckboxIndicator.cjs");
const require_TreeSelect_module = require("./TreeSelect.module.cjs");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/TreeSelect/TreeSelectOption.tsx
const LEVEL_OFFSET = 20;
const BASE_PADDING = 8;
const LINE_CONTENT_GAP = 5;
const OPTION_GAP = 6;
function TreeSelectOption({ node, level, expanded, hasChildren, selected, checked, indeterminate, showCheckbox, isLastChild, lineGuides, withLines, onToggleExpand, renderNode, chevronAriaLabels }) {
const indentPx = (level - 1) * LEVEL_OFFSET;
const handleExpandClick = (event) => {
event.stopPropagation();
event.preventDefault();
onToggleExpand(node.value);
};
const handleExpandMouseDown = (event) => {
event.preventDefault();
};
const customContent = renderNode ? renderNode({
node,
level,
expanded,
hasChildren,
selected,
checked,
indeterminate
}) : null;
const lineElements = withLines && level > 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
lineGuides.map((show, g) => show ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: require_TreeSelect_module.default.guideLine,
style: { insetInlineStart: BASE_PADDING + (g + 1) * LEVEL_OFFSET - LEVEL_OFFSET / 2 }
}, `g${g}`) : null),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: require_TreeSelect_module.default.branchVertical,
"data-last": isLastChild || void 0,
style: { insetInlineStart: BASE_PADDING + (level - 1) * LEVEL_OFFSET - LEVEL_OFFSET / 2 }
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: require_TreeSelect_module.default.branchHorizontal,
style: {
insetInlineStart: BASE_PADDING + (level - 1) * LEVEL_OFFSET - LEVEL_OFFSET / 2,
width: LEVEL_OFFSET / 2
}
})
] }) : null;
const isActive = selected || checked;
const showCheckMark = !showCheckbox && isActive;
const ariaChecked = showCheckbox ? indeterminate && !checked ? "mixed" : checked : void 0;
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Combobox.Combobox.Option, {
value: node.value,
disabled: node.nodeProps?.disabled,
active: isActive,
className: require_TreeSelect_module.default.option,
style: { paddingInlineStart: BASE_PADDING + indentPx + (withLines && level > 1 ? LINE_CONTENT_GAP : 0) + (!hasChildren ? OPTION_GAP : 0) },
"aria-selected": isActive,
"aria-level": level,
"aria-expanded": hasChildren ? expanded : void 0,
"aria-checked": ariaChecked,
children: [lineElements, customContent || /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
hasChildren && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: require_TreeSelect_module.default.expandIcon,
"data-expanded": expanded || void 0,
onClick: handleExpandClick,
onKeyDown: (e) => {
if (e.key === "Enter") handleExpandClick(e);
},
onMouseDown: handleExpandMouseDown,
role: "button",
tabIndex: -1,
"aria-label": expanded ? chevronAriaLabels?.collapse ?? "Collapse" : chevronAriaLabels?.expand ?? "Expand",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AccordionChevron.AccordionChevron, { size: "80%" })
}),
showCheckbox && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CheckboxIndicator.CheckboxIndicator, {
checked: checked || indeterminate,
indeterminate: !checked && indeterminate,
size: "18px"
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: require_TreeSelect_module.default.label,
children: node.label
}),
showCheckMark && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CheckIcon.CheckIcon, { className: require_TreeSelect_module.default.checkIcon })
] })]
});
}
TreeSelectOption.displayName = "@mantine/core/TreeSelectOption";
//#endregion
exports.TreeSelectOption = TreeSelectOption;
//# sourceMappingURL=TreeSelectOption.cjs.map