@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
602 lines (601 loc) • 22.6 kB
JavaScript
"use client";
require("../../_virtual/_rolldown/runtime.cjs");
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
const require_use_resolved_styles_api = require("../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.cjs");
const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
const require_extract_style_props = require("../../core/Box/style-props/extract-style-props/extract-style-props.cjs");
const require_factory = require("../../core/factory/factory.cjs");
const require_ScrollArea = require("../ScrollArea/ScrollArea.cjs");
const require_InputBase = require("../InputBase/InputBase.cjs");
const require_use_combobox = require("../Combobox/use-combobox/use-combobox.cjs");
const require_Combobox = require("../Combobox/Combobox.cjs");
const require_Pill = require("../Pill/Pill.cjs");
const require_PillsInput = require("../PillsInput/PillsInput.cjs");
const require_get_children_nodes_values = require("../Tree/get-children-nodes-values/get-children-nodes-values.cjs");
const require_is_node_checked = require("../Tree/is-node-checked/is-node-checked.cjs");
const require_is_node_indeterminate = require("../Tree/is-node-indeterminate/is-node-indeterminate.cjs");
const require_use_tree = require("../Tree/use-tree.cjs");
const require_filter_tree_data = require("../Tree/filter-tree-data/filter-tree-data.cjs");
const require_flatten_tree_select_data = require("./flatten-tree-select-data.cjs");
const require_get_checked_values_by_strategy = require("./get-checked-values-by-strategy.cjs");
const require_TreeSelect_module = require("./TreeSelect.module.cjs");
const require_TreeSelectOption = require("./TreeSelectOption.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/TreeSelect/TreeSelect.tsx
const defaultProps = {
mode: "single",
allowDeselect: true,
checkedStrategy: "child",
maxValues: Infinity,
hiddenInputValuesDivider: ",",
clearSearchOnChange: true,
openOnFocus: true,
size: "sm",
withLines: true
};
const clearSectionOffset = {
xs: 41,
sm: 50,
md: 60,
lg: 72,
xl: 89
};
function getAncestorsToNode(value, nodes) {
for (const node of nodes) {
if (node.value === value) return [];
if (Array.isArray(node.children)) {
const path = getAncestorsToNode(value, node.children);
if (path !== null) return [node.value, ...path];
}
}
return null;
}
const TreeSelect = require_factory.genericFactory((_props) => {
const props = require_use_props.useProps([
"Input",
"InputWrapper",
"TreeSelect"
], defaultProps, _props);
const { classNames, className, style, styles, unstyled, vars, size, data, mode, value, defaultValue, onChange, checkStrictly, checkedStrategy, defaultExpandedValues, defaultExpandAll, expandedValues, onExpandedChange, expandOnClick, searchable, searchValue, defaultSearchValue, onSearchChange, filter, nothingFoundMessage, allowDeselect, clearable, clearSectionMode, clearButtonProps, maxValues, maxDisplayedValues, maxDisplayedValuesContent, onRemove, onClear, renderNode, withLines, hiddenInputProps, hiddenInputValuesDivider, scrollAreaProps, chevronColor, maxDropdownHeight, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, comboboxProps, clearSearchOnChange, openOnFocus, chevronAriaLabels, variant, onKeyDown, onFocus, onBlur, onClick, readOnly, disabled, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, rightSectionProps, leftSection, leftSectionWidth, leftSectionPointerEvents, leftSectionProps, inputContainer, inputWrapperOrder, withAsterisk, labelProps, descriptionProps, errorProps, wrapperProps, description, label, error, withErrorStyles, name, form, id, placeholder, required, mod, attributes, ...others } = props;
const isMulti = mode === "multiple" || mode === "checkbox";
const isCheckbox = mode === "checkbox";
const _id = (0, _mantine_hooks.useId)(id);
const combobox = require_use_combobox.useCombobox({
opened: dropdownOpened,
defaultOpened: defaultDropdownOpened,
onDropdownOpen: () => {
onDropdownOpen?.();
combobox.updateSelectedOptionIndex("active", { scrollIntoView: true });
},
onDropdownClose: () => {
onDropdownClose?.();
combobox.resetSelectedOption();
}
});
const initialExpanded = (0, react.useMemo)(() => {
if (defaultExpandAll) return require_use_tree.getTreeExpandedState(data, "*");
if (defaultExpandedValues) return require_use_tree.getTreeExpandedState(data, defaultExpandedValues);
return require_use_tree.getTreeExpandedState(data, []);
}, []);
const [_expandedState, setExpandedState] = (0, _mantine_hooks.useUncontrolled)({
value: (0, react.useCallback)((values) => {
if (!values) return;
return require_use_tree.getTreeExpandedState(data, values);
}, [data])(expandedValues),
defaultValue: initialExpanded,
finalValue: {},
onChange: (val) => {
if (onExpandedChange) onExpandedChange(Object.entries(val).filter(([, v]) => v).map(([k]) => k));
}
});
const toggleExpand = (0, react.useCallback)((nodeValue) => {
setExpandedState({
..._expandedState,
[nodeValue]: !_expandedState[nodeValue]
});
}, [_expandedState]);
const [_searchValue, setSearchValue] = (0, _mantine_hooks.useUncontrolled)({
value: searchValue,
defaultValue: defaultSearchValue,
finalValue: (0, react.useMemo)(() => {
if (mode !== "single" || !defaultValue) return "";
const node = require_get_children_nodes_values.findTreeNode(defaultValue, data);
return node ? typeof node.label === "string" ? node.label : "" : "";
}, []),
onChange: onSearchChange
});
const handleSearchChange = (val) => {
setSearchValue(val);
combobox.resetSelectedOption();
};
const [_value, setValue] = (0, _mantine_hooks.useUncontrolled)({
value,
defaultValue,
finalValue: isMulti ? [] : null,
onChange
});
const internalChecked = (0, react.useMemo)(() => {
if (!isCheckbox || !_value || !Array.isArray(_value)) return [];
if (checkStrictly) return _value;
return require_get_checked_values_by_strategy.expandToLeafChecked(_value, data);
}, [
isCheckbox,
_value,
data,
checkStrictly
]);
const filteredData = (0, react.useMemo)(() => {
if (!searchable || !_searchValue) return data;
if (mode === "single" && _value) {
const node = require_get_children_nodes_values.findTreeNode(_value, data);
if (node && _searchValue === (typeof node.label === "string" ? node.label : "")) return data;
}
return require_filter_tree_data.filterTreeData(data, _searchValue, filter);
}, [
data,
_searchValue,
filter,
searchable,
mode,
_value
]);
const expandedForRender = (0, react.useMemo)(() => {
if (_searchValue && filteredData !== data) {
const expanded = { ..._expandedState };
const expandFilteredParents = (nodes) => {
for (const node of nodes) if (Array.isArray(node.children) && node.children.length > 0) {
expanded[node.value] = true;
expandFilteredParents(node.children);
}
};
expandFilteredParents(filteredData);
return expanded;
}
return _expandedState;
}, [
filteredData,
_expandedState,
_searchValue,
data
]);
const flatNodes = (0, react.useMemo)(() => require_flatten_tree_select_data.flattenTreeSelectData(filteredData, expandedForRender), [filteredData, expandedForRender]);
const flatNodesRef = (0, react.useRef)(flatNodes);
flatNodesRef.current = flatNodes;
const nodeLookup = (0, react.useMemo)(() => {
const lookup = {};
const walk = (nodes) => {
for (const node of nodes) {
lookup[node.value] = node;
if (Array.isArray(node.children)) walk(node.children);
}
};
walk(data);
return lookup;
}, [data]);
const getNodeLabel = (nodeValue) => {
const node = nodeLookup[nodeValue];
if (!node) return nodeValue;
return typeof node.label === "string" ? node.label : nodeValue;
};
const getStyles = require_use_styles.useStyles({
name: "TreeSelect",
classes: {},
props,
classNames,
styles,
unstyled,
attributes
});
const { resolvedClassNames, resolvedStyles } = require_use_resolved_styles_api.useResolvedStylesApi({
props,
styles,
classNames
});
const { styleProps, rest: { type, autoComplete, ...rest } } = require_extract_style_props.extractStyleProps(others);
const handleOptionSubmit = (val) => {
if (mode === "single") {
if (expandOnClick) {
const node = require_get_children_nodes_values.findTreeNode(val, data);
if (node && Array.isArray(node.children) && node.children.length > 0) {
toggleExpand(val);
return;
}
}
const nextValue = allowDeselect && val === _value ? null : val;
setValue(nextValue);
combobox.closeDropdown();
if (clearSearchOnChange) handleSearchChange(nextValue ? getNodeLabel(nextValue) : "");
} else if (mode === "multiple") {
if (expandOnClick) {
const node = require_get_children_nodes_values.findTreeNode(val, data);
if (node && Array.isArray(node.children) && node.children.length > 0) {
toggleExpand(val);
return;
}
}
const arr = _value || [];
if (arr.includes(val)) {
setValue(arr.filter((v) => v !== val));
onRemove?.(val);
} else if (arr.length < (maxValues ?? Infinity)) setValue([...arr, val]);
else return;
if (clearSearchOnChange) setSearchValue("");
} else if (mode === "checkbox") {
const nodeChecked = checkStrictly ? internalChecked.includes(val) : require_is_node_checked.isNodeChecked(val, data, internalChecked);
let newInternalChecked;
if (checkStrictly) newInternalChecked = nodeChecked ? internalChecked.filter((v) => v !== val) : [...internalChecked, val];
else {
const childLeaves = require_get_children_nodes_values.getChildrenNodesValues(val, data);
if (nodeChecked) newInternalChecked = internalChecked.filter((v) => !childLeaves.includes(v));
else newInternalChecked = [...new Set([...internalChecked, ...childLeaves])];
}
const newValue = require_get_checked_values_by_strategy.checkedToValue(newInternalChecked, data, checkedStrategy);
if (!nodeChecked && newValue.length > (maxValues ?? Infinity)) return;
setValue(newValue);
if (clearSearchOnChange) setSearchValue("");
if (expandOnClick) {
const node = require_get_children_nodes_values.findTreeNode(val, data);
if (node && Array.isArray(node.children) && node.children.length > 0) {
if (!_expandedState[val]) toggleExpand(val);
}
}
}
};
const handleKeyDown = (event) => {
onKeyDown?.(event);
if (event.key === " " && !searchable && isMulti) {
event.preventDefault();
combobox.toggleDropdown();
}
if (event.key === "Backspace" && _searchValue.length === 0 && isMulti) {
const arr = _value || [];
if (arr.length > 0) {
const removed = arr[arr.length - 1];
onRemove?.(removed);
setValue(arr.slice(0, -1));
}
}
if (!combobox.dropdownOpened) return;
const index = combobox.getSelectedOptionIndex();
if (index < 0 || index >= flatNodesRef.current.length) return;
const currentNode = flatNodesRef.current[index];
if (event.key === "ArrowRight") {
if (currentNode.hasChildren && !currentNode.expanded) {
event.preventDefault();
toggleExpand(currentNode.node.value);
}
}
if (event.key === "ArrowLeft") {
if (currentNode.hasChildren && currentNode.expanded) {
event.preventDefault();
toggleExpand(currentNode.node.value);
} else if (currentNode.parent) {
event.preventDefault();
const parentIndex = flatNodesRef.current.findIndex((n) => n.node.value === currentNode.parent);
if (parentIndex >= 0) combobox.selectOption(parentIndex);
}
}
};
(0, react.useEffect)(() => {
if (mode !== "single" || !searchable) return;
if (value === null) handleSearchChange("");
else if (typeof value === "string") handleSearchChange(getNodeLabel(value));
}, [value]);
const prevDropdownOpenedRef = (0, react.useRef)(false);
(0, react.useEffect)(() => {
if (combobox.dropdownOpened && !prevDropdownOpenedRef.current && searchable && _value) {
const targets = Array.isArray(_value) ? _value : [_value];
const newExpanded = { ..._expandedState };
let changed = false;
for (const target of targets) {
const ancestors = getAncestorsToNode(target, data);
if (ancestors) {
for (const a of ancestors) if (!newExpanded[a]) {
newExpanded[a] = true;
changed = true;
}
}
}
if (changed) {
setExpandedState(newExpanded);
requestAnimationFrame(() => {
combobox.updateSelectedOptionIndex("active", { scrollIntoView: true });
});
}
}
prevDropdownOpenedRef.current = combobox.dropdownOpened;
});
const clearButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.ClearButton, {
...clearButtonProps,
onClear: () => {
onClear?.();
setValue(isMulti ? [] : null);
handleSearchChange("");
combobox.focusTarget();
}
});
const hasValue = isMulti ? Array.isArray(_value) && _value.length > 0 : _value != null && _value !== "";
const _clearable = clearable && hasValue && !disabled && !readOnly;
const singleDisplayLabel = (0, react.useMemo)(() => {
if (mode !== "single" || !_value) return "";
return getNodeLabel(_value);
}, [
mode,
_value,
nodeLookup
]);
const displayValues = (0, react.useMemo)(() => {
if (!isMulti || !Array.isArray(_value)) return [];
return _value;
}, [isMulti, _value]);
const pillsListStyle = _clearable && isMulti ? { paddingInlineEnd: clearSectionOffset[size] ?? clearSectionOffset.sm } : void 0;
const visiblePills = maxDisplayedValues != null ? displayValues.slice(0, maxDisplayedValues) : displayValues;
const overflowCount = maxDisplayedValues != null ? Math.max(0, displayValues.length - maxDisplayedValues) : 0;
const pills = visiblePills.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Pill.Pill, {
withRemoveButton: !readOnly,
onRemove: () => {
if (isCheckbox) {
const childLeaves = checkStrictly ? [item] : require_get_children_nodes_values.getChildrenNodesValues(item, data);
setValue(require_get_checked_values_by_strategy.checkedToValue(internalChecked.filter((v) => !childLeaves.includes(v)), data, checkedStrategy));
} else setValue(_value.filter((v) => v !== item));
onRemove?.(item);
},
unstyled,
disabled,
...getStyles("pill"),
children: getNodeLabel(item)
}, `${item}-${index}`));
if (overflowCount > 0) {
const overflowContent = typeof maxDisplayedValuesContent === "function" ? maxDisplayedValuesContent(overflowCount) : maxDisplayedValuesContent || `+${overflowCount} more`;
pills.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Pill.Pill, {
unstyled,
disabled,
...getStyles("pill"),
children: overflowContent
}, "__overflow"));
}
const isEmpty = flatNodes.length === 0;
const options = flatNodes.map((flatNode) => {
const isSelected = mode === "single" ? _value === flatNode.node.value : mode === "multiple" ? (_value || []).includes(flatNode.node.value) : false;
const nodeChecked = isCheckbox ? checkStrictly ? internalChecked.includes(flatNode.node.value) : require_is_node_checked.isNodeChecked(flatNode.node.value, data, internalChecked) : false;
const nodeIndeterminate = isCheckbox && !checkStrictly ? require_is_node_indeterminate.isNodeIndeterminate(flatNode.node.value, data, internalChecked) : false;
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TreeSelectOption.TreeSelectOption, {
node: flatNode.node,
level: flatNode.level,
expanded: flatNode.expanded,
hasChildren: flatNode.hasChildren,
selected: isSelected,
checked: nodeChecked,
indeterminate: nodeIndeterminate,
showCheckbox: isCheckbox,
isLastChild: flatNode.isLastChild,
lineGuides: flatNode.lineGuides,
withLines: !!withLines,
onToggleExpand: toggleExpand,
renderNode,
chevronAriaLabels
}, flatNode.node.value);
});
const dropdown = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Dropdown, {
hidden: readOnly || disabled,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Combobox.Combobox.Options, {
className: require_TreeSelect_module.default.optionsWrapper,
"aria-multiselectable": isMulti || void 0,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScrollArea.ScrollArea.Autosize, {
mah: maxDropdownHeight ?? 220,
type: "scroll",
scrollbarSize: "var(--combobox-padding)",
offsetScrollbars: "y",
...scrollAreaProps,
children: options
}), isEmpty && nothingFoundMessage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Empty, { children: nothingFoundMessage })]
})
});
if (isMulti) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Combobox.Combobox, {
store: combobox,
classNames: resolvedClassNames,
styles: resolvedStyles,
unstyled,
size,
readOnly,
__staticSelector: "TreeSelect",
attributes,
onOptionSubmit: handleOptionSubmit,
...comboboxProps,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.DropdownTarget, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PillsInput.PillsInput, {
...styleProps,
__staticSelector: "TreeSelect",
classNames: resolvedClassNames,
styles: resolvedStyles,
unstyled,
size,
className,
style,
variant,
disabled,
radius,
__defaultRightSection: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Chevron, {
size,
error,
unstyled,
color: chevronColor
}),
__clearSection: clearButton,
__clearable: _clearable,
__clearSectionMode: clearSectionMode,
rightSection,
rightSectionPointerEvents: rightSectionPointerEvents || "none",
rightSectionWidth,
rightSectionProps,
leftSection,
leftSectionWidth,
leftSectionPointerEvents,
leftSectionProps,
inputContainer,
inputWrapperOrder,
withAsterisk,
labelProps,
descriptionProps,
errorProps,
wrapperProps,
description,
label,
error,
withErrorStyles,
__stylesApiProps: {
...props,
rightSectionPointerEvents: rightSectionPointerEvents || "none",
multiline: true
},
pointer: !searchable,
onClick: () => searchable ? combobox.openDropdown() : combobox.toggleDropdown(),
"data-expanded": combobox.dropdownOpened || void 0,
id: _id,
required,
mod,
attributes,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Pill.Pill.Group, {
attributes,
disabled,
unstyled,
...getStyles("pillsList", { style: pillsListStyle }),
children: [pills, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.EventsTarget, {
autoComplete,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PillsInput.PillsInput.Field, {
...rest,
id: _id,
placeholder,
type: !searchable && !placeholder ? "hidden" : "visible",
...getStyles("inputField"),
unstyled,
onFocus: (event) => {
onFocus?.(event);
if (openOnFocus && searchable) combobox.openDropdown();
},
onBlur: (event) => {
onBlur?.(event);
combobox.closeDropdown();
handleSearchChange("");
},
onKeyDown: handleKeyDown,
value: _searchValue,
onChange: (event) => {
handleSearchChange(event.currentTarget.value);
if (searchable) combobox.openDropdown();
},
disabled,
readOnly: readOnly || !searchable,
pointer: !searchable
})
})]
})
}) }), dropdown]
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.HiddenInput, {
name,
valuesDivider: hiddenInputValuesDivider,
value: _value,
form,
disabled,
...hiddenInputProps
})] });
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Combobox.Combobox, {
store: combobox,
__staticSelector: "TreeSelect",
classNames: resolvedClassNames,
styles: resolvedStyles,
unstyled,
readOnly,
size,
attributes,
onOptionSubmit: handleOptionSubmit,
...comboboxProps,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Target, {
targetType: searchable ? "input" : "button",
autoComplete,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputBase.InputBase, {
id: _id,
__defaultRightSection: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Chevron, {
size,
error,
unstyled,
color: chevronColor
}),
__clearSection: clearButton,
__clearable: _clearable,
__clearSectionMode: clearSectionMode,
rightSection,
rightSectionPointerEvents: rightSectionPointerEvents || "none",
...rest,
...styleProps,
size,
__staticSelector: "TreeSelect",
disabled,
readOnly: readOnly || !searchable,
value: searchable ? _searchValue : singleDisplayLabel,
onChange: (event) => {
handleSearchChange(event.currentTarget.value);
combobox.openDropdown();
},
onFocus: (event) => {
if (openOnFocus && searchable) combobox.openDropdown();
onFocus?.(event);
},
onBlur: (event) => {
if (searchable) combobox.closeDropdown();
handleSearchChange(_value ? getNodeLabel(_value) : "");
onBlur?.(event);
},
onClick: (event) => {
searchable ? combobox.openDropdown() : combobox.toggleDropdown();
onClick?.(event);
},
onKeyDown: handleKeyDown,
classNames: resolvedClassNames,
styles: resolvedStyles,
unstyled,
pointer: !searchable,
error,
attributes,
className,
style,
variant,
radius,
leftSection,
leftSectionWidth,
leftSectionPointerEvents,
leftSectionProps,
rightSectionWidth,
rightSectionProps,
inputContainer,
inputWrapperOrder,
withAsterisk,
labelProps,
descriptionProps,
errorProps,
wrapperProps,
description,
label,
withErrorStyles,
placeholder,
required,
mod
})
}), dropdown]
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.HiddenInput, {
value: _value,
name,
form,
disabled,
...hiddenInputProps
})] });
});
TreeSelect.classes = {
...require_InputBase.InputBase.classes,
...require_Combobox.Combobox.classes
};
TreeSelect.displayName = "@mantine/core/TreeSelect";
//#endregion
exports.TreeSelect = TreeSelect;
//# sourceMappingURL=TreeSelect.cjs.map