@mantine/core 9.0.0-alpha.6 → 9.0.0-alpha.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/Autocomplete/Autocomplete.cjs +1 -0
- package/cjs/components/Autocomplete/Autocomplete.cjs.map +1 -1
- package/cjs/components/Combobox/use-combobox-target-props/use-combobox-target-props.cjs +1 -0
- package/cjs/components/Combobox/use-combobox-target-props/use-combobox-target-props.cjs.map +1 -1
- package/cjs/components/MultiSelect/MultiSelect.cjs +1 -0
- package/cjs/components/MultiSelect/MultiSelect.cjs.map +1 -1
- package/cjs/components/PasswordInput/PasswordInput.cjs +2 -0
- package/cjs/components/PasswordInput/PasswordInput.cjs.map +1 -1
- package/cjs/components/Popover/PopoverTarget/PopoverTarget.cjs +2 -2
- package/cjs/components/Popover/PopoverTarget/PopoverTarget.cjs.map +1 -1
- package/cjs/components/Radio/Radio.cjs +1 -1
- package/cjs/components/Radio/Radio.cjs.map +1 -1
- package/cjs/components/Select/Select.cjs +7 -6
- package/cjs/components/Select/Select.cjs.map +1 -1
- package/cjs/components/TagsInput/TagsInput.cjs +1 -0
- package/cjs/components/TagsInput/TagsInput.cjs.map +1 -1
- package/esm/components/Autocomplete/Autocomplete.mjs +1 -0
- package/esm/components/Autocomplete/Autocomplete.mjs.map +1 -1
- package/esm/components/Combobox/use-combobox-target-props/use-combobox-target-props.mjs +1 -0
- package/esm/components/Combobox/use-combobox-target-props/use-combobox-target-props.mjs.map +1 -1
- package/esm/components/MultiSelect/MultiSelect.mjs +1 -0
- package/esm/components/MultiSelect/MultiSelect.mjs.map +1 -1
- package/esm/components/PasswordInput/PasswordInput.mjs +2 -0
- package/esm/components/PasswordInput/PasswordInput.mjs.map +1 -1
- package/esm/components/Popover/PopoverTarget/PopoverTarget.mjs +2 -2
- package/esm/components/Popover/PopoverTarget/PopoverTarget.mjs.map +1 -1
- package/esm/components/Radio/Radio.mjs +1 -1
- package/esm/components/Radio/Radio.mjs.map +1 -1
- package/esm/components/Select/Select.mjs +7 -6
- package/esm/components/Select/Select.mjs.map +1 -1
- package/esm/components/TagsInput/TagsInput.mjs +1 -0
- package/esm/components/TagsInput/TagsInput.mjs.map +1 -1
- package/esm/core/utils/get-env/get-env.mjs +1 -1
- package/esm/core/utils/get-env/get-env.mjs.map +1 -1
- package/lib/components/Combobox/use-combobox-target-props/use-combobox-target-props.d.ts +0 -16
- package/lib/components/Input/InputClearSection/InputClearSection.d.ts +1 -1
- package/lib/components/Input/use-input-props.d.ts +18 -18
- package/lib/components/Popover/use-popover.d.ts +2 -2
- package/lib/core/MantineProvider/color-functions/get-contrast-color/get-contrast-color.d.ts +2 -2
- package/package.json +4 -4
- package/cjs/components/MaskInput/MaskInput.cjs +0 -24
- package/cjs/components/MaskInput/MaskInput.cjs.map +0 -1
- package/cjs/components/MaskInput/use-mask-input-props.cjs +0 -29
- package/cjs/components/MaskInput/use-mask-input-props.cjs.map +0 -1
- package/cjs/components/Pagination/PaginationLabel/PaginationLabel.cjs +0 -33
- package/cjs/components/Pagination/PaginationLabel/PaginationLabel.cjs.map +0 -1
- package/cjs/components/RollingNumber/DigitColumn.cjs +0 -41
- package/cjs/components/RollingNumber/DigitColumn.cjs.map +0 -1
- package/cjs/components/RollingNumber/RollingNumber.cjs +0 -100
- package/cjs/components/RollingNumber/RollingNumber.cjs.map +0 -1
- package/cjs/components/RollingNumber/RollingNumber.module.cjs +0 -12
- package/cjs/components/RollingNumber/RollingNumber.module.cjs.map +0 -1
- package/cjs/components/RollingNumber/build-value.cjs +0 -22
- package/cjs/components/RollingNumber/build-value.cjs.map +0 -1
- package/cjs/components/RollingNumber/get-digit-parts.cjs +0 -40
- package/cjs/components/RollingNumber/get-digit-parts.cjs.map +0 -1
- package/cjs/components/RollingNumber/get-render-slots.cjs +0 -78
- package/cjs/components/RollingNumber/get-render-slots.cjs.map +0 -1
- package/cjs/components/Tree/FlatTreeNode.cjs +0 -102
- package/cjs/components/Tree/FlatTreeNode.cjs.map +0 -1
- package/cjs/components/Tree/filter-tree-data/filter-tree-data.cjs +0 -23
- package/cjs/components/Tree/filter-tree-data/filter-tree-data.cjs.map +0 -1
- package/cjs/components/Tree/flatten-tree-data/flatten-tree-data.cjs +0 -28
- package/cjs/components/Tree/flatten-tree-data/flatten-tree-data.cjs.map +0 -1
- package/cjs/components/Tree/merge-async-children/merge-async-children.cjs +0 -32
- package/cjs/components/Tree/merge-async-children/merge-async-children.cjs.map +0 -1
- package/cjs/components/Tree/move-tree-node/move-tree-node.cjs +0 -78
- package/cjs/components/Tree/move-tree-node/move-tree-node.cjs.map +0 -1
- package/cjs/components/Tree/use-tree-node-drag-drop.cjs +0 -96
- package/cjs/components/Tree/use-tree-node-drag-drop.cjs.map +0 -1
- package/cjs/components/TreeSelect/TreeSelect.cjs +0 -594
- package/cjs/components/TreeSelect/TreeSelect.cjs.map +0 -1
- package/cjs/components/TreeSelect/TreeSelect.module.cjs +0 -16
- package/cjs/components/TreeSelect/TreeSelect.module.cjs.map +0 -1
- package/cjs/components/TreeSelect/TreeSelectOption.cjs +0 -91
- package/cjs/components/TreeSelect/TreeSelectOption.cjs.map +0 -1
- package/cjs/components/TreeSelect/flatten-tree-select-data.cjs +0 -34
- package/cjs/components/TreeSelect/flatten-tree-select-data.cjs.map +0 -1
- package/cjs/components/TreeSelect/get-checked-values-by-strategy.cjs +0 -30
- package/cjs/components/TreeSelect/get-checked-values-by-strategy.cjs.map +0 -1
- package/esm/components/MaskInput/MaskInput.mjs +0 -23
- package/esm/components/MaskInput/MaskInput.mjs.map +0 -1
- package/esm/components/MaskInput/use-mask-input-props.mjs +0 -28
- package/esm/components/MaskInput/use-mask-input-props.mjs.map +0 -1
- package/esm/components/Pagination/PaginationLabel/PaginationLabel.mjs +0 -32
- package/esm/components/Pagination/PaginationLabel/PaginationLabel.mjs.map +0 -1
- package/esm/components/RollingNumber/DigitColumn.mjs +0 -40
- package/esm/components/RollingNumber/DigitColumn.mjs.map +0 -1
- package/esm/components/RollingNumber/RollingNumber.mjs +0 -99
- package/esm/components/RollingNumber/RollingNumber.mjs.map +0 -1
- package/esm/components/RollingNumber/RollingNumber.module.mjs +0 -12
- package/esm/components/RollingNumber/RollingNumber.module.mjs.map +0 -1
- package/esm/components/RollingNumber/build-value.mjs +0 -22
- package/esm/components/RollingNumber/build-value.mjs.map +0 -1
- package/esm/components/RollingNumber/get-digit-parts.mjs +0 -40
- package/esm/components/RollingNumber/get-digit-parts.mjs.map +0 -1
- package/esm/components/RollingNumber/get-render-slots.mjs +0 -78
- package/esm/components/RollingNumber/get-render-slots.mjs.map +0 -1
- package/esm/components/Tree/FlatTreeNode.mjs +0 -101
- package/esm/components/Tree/FlatTreeNode.mjs.map +0 -1
- package/esm/components/Tree/filter-tree-data/filter-tree-data.mjs +0 -22
- package/esm/components/Tree/filter-tree-data/filter-tree-data.mjs.map +0 -1
- package/esm/components/Tree/flatten-tree-data/flatten-tree-data.mjs +0 -28
- package/esm/components/Tree/flatten-tree-data/flatten-tree-data.mjs.map +0 -1
- package/esm/components/Tree/merge-async-children/merge-async-children.mjs +0 -32
- package/esm/components/Tree/merge-async-children/merge-async-children.mjs.map +0 -1
- package/esm/components/Tree/move-tree-node/move-tree-node.mjs +0 -78
- package/esm/components/Tree/move-tree-node/move-tree-node.mjs.map +0 -1
- package/esm/components/Tree/use-tree-node-drag-drop.mjs +0 -96
- package/esm/components/Tree/use-tree-node-drag-drop.mjs.map +0 -1
- package/esm/components/TreeSelect/TreeSelect.mjs +0 -593
- package/esm/components/TreeSelect/TreeSelect.mjs.map +0 -1
- package/esm/components/TreeSelect/TreeSelect.module.mjs +0 -16
- package/esm/components/TreeSelect/TreeSelect.module.mjs.map +0 -1
- package/esm/components/TreeSelect/TreeSelectOption.mjs +0 -90
- package/esm/components/TreeSelect/TreeSelectOption.mjs.map +0 -1
- package/esm/components/TreeSelect/flatten-tree-select-data.mjs +0 -34
- package/esm/components/TreeSelect/flatten-tree-select-data.mjs.map +0 -1
- package/esm/components/TreeSelect/get-checked-values-by-strategy.mjs +0 -29
- package/esm/components/TreeSelect/get-checked-values-by-strategy.mjs.map +0 -1
- package/lib/components/MaskInput/MaskInput.d.ts +0 -68
- package/lib/components/MaskInput/index.d.ts +0 -7
- package/lib/components/MaskInput/use-mask-input-props.d.ts +0 -428
- package/lib/components/Pagination/PaginationLabel/PaginationLabel.d.ts +0 -22
- package/lib/components/RollingNumber/DigitColumn.d.ts +0 -10
- package/lib/components/RollingNumber/RollingNumber.d.ts +0 -39
- package/lib/components/RollingNumber/build-value.d.ts +0 -10
- package/lib/components/RollingNumber/get-digit-parts.d.ts +0 -12
- package/lib/components/RollingNumber/get-render-slots.d.ts +0 -35
- package/lib/components/RollingNumber/index.d.ts +0 -9
- package/lib/components/Tree/FlatTreeNode.d.ts +0 -34
- package/lib/components/Tree/filter-tree-data/filter-tree-data.d.ts +0 -4
- package/lib/components/Tree/flatten-tree-data/flatten-tree-data.d.ts +0 -15
- package/lib/components/Tree/merge-async-children/merge-async-children.d.ts +0 -2
- package/lib/components/Tree/move-tree-node/move-tree-node.d.ts +0 -11
- package/lib/components/Tree/use-tree-node-drag-drop.d.ts +0 -18
- package/lib/components/TreeSelect/TreeSelect.d.ts +0 -122
- package/lib/components/TreeSelect/TreeSelectOption.d.ts +0 -29
- package/lib/components/TreeSelect/flatten-tree-select-data.d.ts +0 -12
- package/lib/components/TreeSelect/get-checked-values-by-strategy.d.ts +0 -4
- package/lib/components/TreeSelect/index.d.ts +0 -13
- package/styles/RollingNumber.css +0 -50
- package/styles/RollingNumber.layer.css +0 -51
- package/styles/TreeSelect.css +0 -113
- package/styles/TreeSelect.layer.css +0 -114
|
@@ -1,594 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
require("../../_virtual/_rolldown/runtime.cjs");
|
|
3
|
-
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
|
|
4
|
-
const require_use_resolved_styles_api = require("../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.cjs");
|
|
5
|
-
const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
|
|
6
|
-
const require_extract_style_props = require("../../core/Box/style-props/extract-style-props/extract-style-props.cjs");
|
|
7
|
-
const require_factory = require("../../core/factory/factory.cjs");
|
|
8
|
-
const require_ScrollArea = require("../ScrollArea/ScrollArea.cjs");
|
|
9
|
-
const require_InputBase = require("../InputBase/InputBase.cjs");
|
|
10
|
-
const require_use_combobox = require("../Combobox/use-combobox/use-combobox.cjs");
|
|
11
|
-
const require_Combobox = require("../Combobox/Combobox.cjs");
|
|
12
|
-
const require_Pill = require("../Pill/Pill.cjs");
|
|
13
|
-
const require_PillsInput = require("../PillsInput/PillsInput.cjs");
|
|
14
|
-
const require_get_children_nodes_values = require("../Tree/get-children-nodes-values/get-children-nodes-values.cjs");
|
|
15
|
-
const require_is_node_checked = require("../Tree/is-node-checked/is-node-checked.cjs");
|
|
16
|
-
const require_is_node_indeterminate = require("../Tree/is-node-indeterminate/is-node-indeterminate.cjs");
|
|
17
|
-
const require_use_tree = require("../Tree/use-tree.cjs");
|
|
18
|
-
const require_filter_tree_data = require("../Tree/filter-tree-data/filter-tree-data.cjs");
|
|
19
|
-
const require_flatten_tree_select_data = require("./flatten-tree-select-data.cjs");
|
|
20
|
-
const require_get_checked_values_by_strategy = require("./get-checked-values-by-strategy.cjs");
|
|
21
|
-
const require_TreeSelect_module = require("./TreeSelect.module.cjs");
|
|
22
|
-
const require_TreeSelectOption = require("./TreeSelectOption.cjs");
|
|
23
|
-
let react = require("react");
|
|
24
|
-
let _mantine_hooks = require("@mantine/hooks");
|
|
25
|
-
let react_jsx_runtime = require("react/jsx-runtime");
|
|
26
|
-
//#region packages/@mantine/core/src/components/TreeSelect/TreeSelect.tsx
|
|
27
|
-
const defaultProps = {
|
|
28
|
-
mode: "single",
|
|
29
|
-
allowDeselect: true,
|
|
30
|
-
checkedStrategy: "child",
|
|
31
|
-
maxValues: Infinity,
|
|
32
|
-
hiddenInputValuesDivider: ",",
|
|
33
|
-
clearSearchOnChange: true,
|
|
34
|
-
openOnFocus: true,
|
|
35
|
-
size: "sm",
|
|
36
|
-
withLines: true
|
|
37
|
-
};
|
|
38
|
-
const clearSectionOffset = {
|
|
39
|
-
xs: 41,
|
|
40
|
-
sm: 50,
|
|
41
|
-
md: 60,
|
|
42
|
-
lg: 72,
|
|
43
|
-
xl: 89
|
|
44
|
-
};
|
|
45
|
-
function getAncestorsToNode(value, nodes) {
|
|
46
|
-
for (const node of nodes) {
|
|
47
|
-
if (node.value === value) return [];
|
|
48
|
-
if (Array.isArray(node.children)) {
|
|
49
|
-
const path = getAncestorsToNode(value, node.children);
|
|
50
|
-
if (path !== null) return [node.value, ...path];
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
return null;
|
|
54
|
-
}
|
|
55
|
-
const TreeSelect = require_factory.genericFactory((_props) => {
|
|
56
|
-
const props = require_use_props.useProps("TreeSelect", defaultProps, _props);
|
|
57
|
-
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, 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;
|
|
58
|
-
const isMulti = mode === "multiple" || mode === "checkbox";
|
|
59
|
-
const isCheckbox = mode === "checkbox";
|
|
60
|
-
const _id = (0, _mantine_hooks.useId)(id);
|
|
61
|
-
const combobox = require_use_combobox.useCombobox({
|
|
62
|
-
opened: dropdownOpened,
|
|
63
|
-
defaultOpened: defaultDropdownOpened,
|
|
64
|
-
onDropdownOpen: () => {
|
|
65
|
-
onDropdownOpen?.();
|
|
66
|
-
combobox.updateSelectedOptionIndex("active", { scrollIntoView: true });
|
|
67
|
-
},
|
|
68
|
-
onDropdownClose: () => {
|
|
69
|
-
onDropdownClose?.();
|
|
70
|
-
combobox.resetSelectedOption();
|
|
71
|
-
}
|
|
72
|
-
});
|
|
73
|
-
const initialExpanded = (0, react.useMemo)(() => {
|
|
74
|
-
if (defaultExpandAll) return require_use_tree.getTreeExpandedState(data, "*");
|
|
75
|
-
if (defaultExpandedValues) return require_use_tree.getTreeExpandedState(data, defaultExpandedValues);
|
|
76
|
-
return require_use_tree.getTreeExpandedState(data, []);
|
|
77
|
-
}, []);
|
|
78
|
-
const [_expandedState, setExpandedState] = (0, _mantine_hooks.useUncontrolled)({
|
|
79
|
-
value: (0, react.useCallback)((values) => {
|
|
80
|
-
if (!values) return;
|
|
81
|
-
return require_use_tree.getTreeExpandedState(data, values);
|
|
82
|
-
}, [data])(expandedValues),
|
|
83
|
-
defaultValue: initialExpanded,
|
|
84
|
-
finalValue: {},
|
|
85
|
-
onChange: (val) => {
|
|
86
|
-
if (onExpandedChange) onExpandedChange(Object.entries(val).filter(([, v]) => v).map(([k]) => k));
|
|
87
|
-
}
|
|
88
|
-
});
|
|
89
|
-
const toggleExpand = (0, react.useCallback)((nodeValue) => {
|
|
90
|
-
setExpandedState({
|
|
91
|
-
..._expandedState,
|
|
92
|
-
[nodeValue]: !_expandedState[nodeValue]
|
|
93
|
-
});
|
|
94
|
-
}, [_expandedState]);
|
|
95
|
-
const [_searchValue, setSearchValue] = (0, _mantine_hooks.useUncontrolled)({
|
|
96
|
-
value: searchValue,
|
|
97
|
-
defaultValue: defaultSearchValue,
|
|
98
|
-
finalValue: (0, react.useMemo)(() => {
|
|
99
|
-
if (mode !== "single" || !defaultValue) return "";
|
|
100
|
-
const node = require_get_children_nodes_values.findTreeNode(defaultValue, data);
|
|
101
|
-
return node ? typeof node.label === "string" ? node.label : "" : "";
|
|
102
|
-
}, []),
|
|
103
|
-
onChange: onSearchChange
|
|
104
|
-
});
|
|
105
|
-
const handleSearchChange = (val) => {
|
|
106
|
-
setSearchValue(val);
|
|
107
|
-
combobox.resetSelectedOption();
|
|
108
|
-
};
|
|
109
|
-
const [_value, setValue] = (0, _mantine_hooks.useUncontrolled)({
|
|
110
|
-
value,
|
|
111
|
-
defaultValue,
|
|
112
|
-
finalValue: isMulti ? [] : null,
|
|
113
|
-
onChange
|
|
114
|
-
});
|
|
115
|
-
const internalChecked = (0, react.useMemo)(() => {
|
|
116
|
-
if (!isCheckbox || !_value || !Array.isArray(_value)) return [];
|
|
117
|
-
if (checkStrictly) return _value;
|
|
118
|
-
return require_get_checked_values_by_strategy.expandToLeafChecked(_value, data);
|
|
119
|
-
}, [
|
|
120
|
-
isCheckbox,
|
|
121
|
-
_value,
|
|
122
|
-
data,
|
|
123
|
-
checkStrictly
|
|
124
|
-
]);
|
|
125
|
-
const filteredData = (0, react.useMemo)(() => {
|
|
126
|
-
if (!searchable || !_searchValue) return data;
|
|
127
|
-
if (mode === "single" && _value) {
|
|
128
|
-
const node = require_get_children_nodes_values.findTreeNode(_value, data);
|
|
129
|
-
if (node && _searchValue === (typeof node.label === "string" ? node.label : "")) return data;
|
|
130
|
-
}
|
|
131
|
-
return require_filter_tree_data.filterTreeData(data, _searchValue, filter);
|
|
132
|
-
}, [
|
|
133
|
-
data,
|
|
134
|
-
_searchValue,
|
|
135
|
-
filter,
|
|
136
|
-
searchable,
|
|
137
|
-
mode,
|
|
138
|
-
_value
|
|
139
|
-
]);
|
|
140
|
-
const expandedForRender = (0, react.useMemo)(() => {
|
|
141
|
-
if (_searchValue && filteredData !== data) {
|
|
142
|
-
const expanded = { ..._expandedState };
|
|
143
|
-
const expandFilteredParents = (nodes) => {
|
|
144
|
-
for (const node of nodes) if (Array.isArray(node.children) && node.children.length > 0) {
|
|
145
|
-
expanded[node.value] = true;
|
|
146
|
-
expandFilteredParents(node.children);
|
|
147
|
-
}
|
|
148
|
-
};
|
|
149
|
-
expandFilteredParents(filteredData);
|
|
150
|
-
return expanded;
|
|
151
|
-
}
|
|
152
|
-
return _expandedState;
|
|
153
|
-
}, [
|
|
154
|
-
filteredData,
|
|
155
|
-
_expandedState,
|
|
156
|
-
_searchValue,
|
|
157
|
-
data
|
|
158
|
-
]);
|
|
159
|
-
const flatNodes = (0, react.useMemo)(() => require_flatten_tree_select_data.flattenTreeSelectData(filteredData, expandedForRender), [filteredData, expandedForRender]);
|
|
160
|
-
const flatNodesRef = (0, react.useRef)(flatNodes);
|
|
161
|
-
flatNodesRef.current = flatNodes;
|
|
162
|
-
const nodeLookup = (0, react.useMemo)(() => {
|
|
163
|
-
const lookup = {};
|
|
164
|
-
const walk = (nodes) => {
|
|
165
|
-
for (const node of nodes) {
|
|
166
|
-
lookup[node.value] = node;
|
|
167
|
-
if (Array.isArray(node.children)) walk(node.children);
|
|
168
|
-
}
|
|
169
|
-
};
|
|
170
|
-
walk(data);
|
|
171
|
-
return lookup;
|
|
172
|
-
}, [data]);
|
|
173
|
-
const getNodeLabel = (nodeValue) => {
|
|
174
|
-
const node = nodeLookup[nodeValue];
|
|
175
|
-
if (!node) return nodeValue;
|
|
176
|
-
return typeof node.label === "string" ? node.label : nodeValue;
|
|
177
|
-
};
|
|
178
|
-
const getStyles = require_use_styles.useStyles({
|
|
179
|
-
name: "TreeSelect",
|
|
180
|
-
classes: {},
|
|
181
|
-
props,
|
|
182
|
-
classNames,
|
|
183
|
-
styles,
|
|
184
|
-
unstyled,
|
|
185
|
-
attributes
|
|
186
|
-
});
|
|
187
|
-
const { resolvedClassNames, resolvedStyles } = require_use_resolved_styles_api.useResolvedStylesApi({
|
|
188
|
-
props,
|
|
189
|
-
styles,
|
|
190
|
-
classNames
|
|
191
|
-
});
|
|
192
|
-
const { styleProps, rest: { type, autoComplete, ...rest } } = require_extract_style_props.extractStyleProps(others);
|
|
193
|
-
const handleOptionSubmit = (val) => {
|
|
194
|
-
if (mode === "single") {
|
|
195
|
-
if (expandOnClick) {
|
|
196
|
-
const node = require_get_children_nodes_values.findTreeNode(val, data);
|
|
197
|
-
if (node && Array.isArray(node.children) && node.children.length > 0) {
|
|
198
|
-
toggleExpand(val);
|
|
199
|
-
return;
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
const nextValue = allowDeselect && val === _value ? null : val;
|
|
203
|
-
setValue(nextValue);
|
|
204
|
-
combobox.closeDropdown();
|
|
205
|
-
if (clearSearchOnChange) handleSearchChange(nextValue ? getNodeLabel(nextValue) : "");
|
|
206
|
-
} else if (mode === "multiple") {
|
|
207
|
-
if (expandOnClick) {
|
|
208
|
-
const node = require_get_children_nodes_values.findTreeNode(val, data);
|
|
209
|
-
if (node && Array.isArray(node.children) && node.children.length > 0) {
|
|
210
|
-
toggleExpand(val);
|
|
211
|
-
return;
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
if (clearSearchOnChange) setSearchValue("");
|
|
215
|
-
const arr = _value || [];
|
|
216
|
-
if (arr.includes(val)) {
|
|
217
|
-
setValue(arr.filter((v) => v !== val));
|
|
218
|
-
onRemove?.(val);
|
|
219
|
-
} else if (arr.length < (maxValues ?? Infinity)) setValue([...arr, val]);
|
|
220
|
-
} else if (mode === "checkbox") {
|
|
221
|
-
if (clearSearchOnChange) setSearchValue("");
|
|
222
|
-
const nodeChecked = checkStrictly ? internalChecked.includes(val) : require_is_node_checked.isNodeChecked(val, data, internalChecked);
|
|
223
|
-
let newInternalChecked;
|
|
224
|
-
if (checkStrictly) newInternalChecked = nodeChecked ? internalChecked.filter((v) => v !== val) : [...internalChecked, val];
|
|
225
|
-
else {
|
|
226
|
-
const childLeaves = require_get_children_nodes_values.getChildrenNodesValues(val, data);
|
|
227
|
-
if (nodeChecked) newInternalChecked = internalChecked.filter((v) => !childLeaves.includes(v));
|
|
228
|
-
else newInternalChecked = [...new Set([...internalChecked, ...childLeaves])];
|
|
229
|
-
}
|
|
230
|
-
const newValue = require_get_checked_values_by_strategy.checkedToValue(newInternalChecked, data, checkedStrategy);
|
|
231
|
-
if (!nodeChecked && newValue.length > (maxValues ?? Infinity)) return;
|
|
232
|
-
setValue(newValue);
|
|
233
|
-
if (expandOnClick) {
|
|
234
|
-
const node = require_get_children_nodes_values.findTreeNode(val, data);
|
|
235
|
-
if (node && Array.isArray(node.children) && node.children.length > 0) {
|
|
236
|
-
if (!_expandedState[val]) toggleExpand(val);
|
|
237
|
-
}
|
|
238
|
-
}
|
|
239
|
-
}
|
|
240
|
-
};
|
|
241
|
-
const handleKeyDown = (event) => {
|
|
242
|
-
onKeyDown?.(event);
|
|
243
|
-
if (event.key === " " && !searchable && isMulti) {
|
|
244
|
-
event.preventDefault();
|
|
245
|
-
combobox.toggleDropdown();
|
|
246
|
-
}
|
|
247
|
-
if (event.key === "Backspace" && _searchValue.length === 0 && isMulti) {
|
|
248
|
-
const arr = _value || [];
|
|
249
|
-
if (arr.length > 0) {
|
|
250
|
-
const removed = arr[arr.length - 1];
|
|
251
|
-
onRemove?.(removed);
|
|
252
|
-
setValue(arr.slice(0, -1));
|
|
253
|
-
}
|
|
254
|
-
}
|
|
255
|
-
if (!combobox.dropdownOpened) return;
|
|
256
|
-
const index = combobox.getSelectedOptionIndex();
|
|
257
|
-
if (index < 0 || index >= flatNodesRef.current.length) return;
|
|
258
|
-
const currentNode = flatNodesRef.current[index];
|
|
259
|
-
if (event.key === "ArrowRight") {
|
|
260
|
-
if (currentNode.hasChildren && !currentNode.expanded) {
|
|
261
|
-
event.preventDefault();
|
|
262
|
-
toggleExpand(currentNode.node.value);
|
|
263
|
-
}
|
|
264
|
-
}
|
|
265
|
-
if (event.key === "ArrowLeft") {
|
|
266
|
-
if (currentNode.hasChildren && currentNode.expanded) {
|
|
267
|
-
event.preventDefault();
|
|
268
|
-
toggleExpand(currentNode.node.value);
|
|
269
|
-
} else if (currentNode.parent) {
|
|
270
|
-
event.preventDefault();
|
|
271
|
-
const parentIndex = flatNodesRef.current.findIndex((n) => n.node.value === currentNode.parent);
|
|
272
|
-
if (parentIndex >= 0) combobox.selectOption(parentIndex);
|
|
273
|
-
}
|
|
274
|
-
}
|
|
275
|
-
};
|
|
276
|
-
(0, react.useEffect)(() => {
|
|
277
|
-
if (mode !== "single" || !searchable) return;
|
|
278
|
-
if (value === null) handleSearchChange("");
|
|
279
|
-
else if (typeof value === "string") handleSearchChange(getNodeLabel(value));
|
|
280
|
-
}, [value]);
|
|
281
|
-
const prevDropdownOpenedRef = (0, react.useRef)(false);
|
|
282
|
-
(0, react.useEffect)(() => {
|
|
283
|
-
if (combobox.dropdownOpened && !prevDropdownOpenedRef.current && searchable && _value) {
|
|
284
|
-
const targets = Array.isArray(_value) ? _value : [_value];
|
|
285
|
-
const newExpanded = { ..._expandedState };
|
|
286
|
-
let changed = false;
|
|
287
|
-
for (const target of targets) {
|
|
288
|
-
const ancestors = getAncestorsToNode(target, data);
|
|
289
|
-
if (ancestors) {
|
|
290
|
-
for (const a of ancestors) if (!newExpanded[a]) {
|
|
291
|
-
newExpanded[a] = true;
|
|
292
|
-
changed = true;
|
|
293
|
-
}
|
|
294
|
-
}
|
|
295
|
-
}
|
|
296
|
-
if (changed) {
|
|
297
|
-
setExpandedState(newExpanded);
|
|
298
|
-
requestAnimationFrame(() => {
|
|
299
|
-
combobox.updateSelectedOptionIndex("active", { scrollIntoView: true });
|
|
300
|
-
});
|
|
301
|
-
}
|
|
302
|
-
}
|
|
303
|
-
prevDropdownOpenedRef.current = combobox.dropdownOpened;
|
|
304
|
-
});
|
|
305
|
-
const clearButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.ClearButton, {
|
|
306
|
-
...clearButtonProps,
|
|
307
|
-
onClear: () => {
|
|
308
|
-
onClear?.();
|
|
309
|
-
setValue(isMulti ? [] : null);
|
|
310
|
-
handleSearchChange("");
|
|
311
|
-
}
|
|
312
|
-
});
|
|
313
|
-
const hasValue = isMulti ? Array.isArray(_value) && _value.length > 0 : _value != null && _value !== "";
|
|
314
|
-
const _clearable = clearable && hasValue && !disabled && !readOnly;
|
|
315
|
-
const singleDisplayLabel = (0, react.useMemo)(() => {
|
|
316
|
-
if (mode !== "single" || !_value) return "";
|
|
317
|
-
return getNodeLabel(_value);
|
|
318
|
-
}, [
|
|
319
|
-
mode,
|
|
320
|
-
_value,
|
|
321
|
-
nodeLookup
|
|
322
|
-
]);
|
|
323
|
-
const displayValues = (0, react.useMemo)(() => {
|
|
324
|
-
if (!isMulti || !Array.isArray(_value)) return [];
|
|
325
|
-
return _value;
|
|
326
|
-
}, [isMulti, _value]);
|
|
327
|
-
const pillsListStyle = _clearable && isMulti ? { paddingInlineEnd: clearSectionOffset[size] ?? clearSectionOffset.sm } : void 0;
|
|
328
|
-
const visiblePills = maxDisplayedValues != null ? displayValues.slice(0, maxDisplayedValues) : displayValues;
|
|
329
|
-
const overflowCount = maxDisplayedValues != null ? Math.max(0, displayValues.length - maxDisplayedValues) : 0;
|
|
330
|
-
const pills = visiblePills.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Pill.Pill, {
|
|
331
|
-
withRemoveButton: !readOnly,
|
|
332
|
-
onRemove: () => {
|
|
333
|
-
if (isCheckbox) {
|
|
334
|
-
const childLeaves = checkStrictly ? [item] : require_get_children_nodes_values.getChildrenNodesValues(item, data);
|
|
335
|
-
setValue(require_get_checked_values_by_strategy.checkedToValue(internalChecked.filter((v) => !childLeaves.includes(v)), data, checkedStrategy));
|
|
336
|
-
} else setValue(_value.filter((v) => v !== item));
|
|
337
|
-
onRemove?.(item);
|
|
338
|
-
},
|
|
339
|
-
unstyled,
|
|
340
|
-
disabled,
|
|
341
|
-
...getStyles("pill"),
|
|
342
|
-
children: getNodeLabel(item)
|
|
343
|
-
}, `${item}-${index}`));
|
|
344
|
-
if (overflowCount > 0) {
|
|
345
|
-
const overflowContent = typeof maxDisplayedValuesContent === "function" ? maxDisplayedValuesContent(overflowCount) : maxDisplayedValuesContent || `+${overflowCount} more`;
|
|
346
|
-
pills.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Pill.Pill, {
|
|
347
|
-
unstyled,
|
|
348
|
-
disabled,
|
|
349
|
-
...getStyles("pill"),
|
|
350
|
-
children: overflowContent
|
|
351
|
-
}, "__overflow"));
|
|
352
|
-
}
|
|
353
|
-
const isEmpty = flatNodes.length === 0;
|
|
354
|
-
const options = flatNodes.map((flatNode) => {
|
|
355
|
-
const isSelected = mode === "single" ? _value === flatNode.node.value : mode === "multiple" ? (_value || []).includes(flatNode.node.value) : false;
|
|
356
|
-
const nodeChecked = isCheckbox ? checkStrictly ? internalChecked.includes(flatNode.node.value) : require_is_node_checked.isNodeChecked(flatNode.node.value, data, internalChecked) : false;
|
|
357
|
-
const nodeIndeterminate = isCheckbox && !checkStrictly ? require_is_node_indeterminate.isNodeIndeterminate(flatNode.node.value, data, internalChecked) : false;
|
|
358
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TreeSelectOption.TreeSelectOption, {
|
|
359
|
-
node: flatNode.node,
|
|
360
|
-
level: flatNode.level,
|
|
361
|
-
expanded: flatNode.expanded,
|
|
362
|
-
hasChildren: flatNode.hasChildren,
|
|
363
|
-
selected: isSelected,
|
|
364
|
-
checked: nodeChecked,
|
|
365
|
-
indeterminate: nodeIndeterminate,
|
|
366
|
-
showCheckbox: isCheckbox,
|
|
367
|
-
isLastChild: flatNode.isLastChild,
|
|
368
|
-
lineGuides: flatNode.lineGuides,
|
|
369
|
-
withLines: !!withLines,
|
|
370
|
-
onToggleExpand: toggleExpand,
|
|
371
|
-
renderNode
|
|
372
|
-
}, flatNode.node.value);
|
|
373
|
-
});
|
|
374
|
-
const dropdown = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Dropdown, {
|
|
375
|
-
hidden: readOnly || disabled,
|
|
376
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Combobox.Combobox.Options, {
|
|
377
|
-
className: require_TreeSelect_module.default.optionsWrapper,
|
|
378
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScrollArea.ScrollArea.Autosize, {
|
|
379
|
-
mah: maxDropdownHeight ?? 220,
|
|
380
|
-
type: "scroll",
|
|
381
|
-
scrollbarSize: "var(--combobox-padding)",
|
|
382
|
-
offsetScrollbars: "y",
|
|
383
|
-
...scrollAreaProps,
|
|
384
|
-
children: options
|
|
385
|
-
}), isEmpty && nothingFoundMessage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Empty, { children: nothingFoundMessage })]
|
|
386
|
-
})
|
|
387
|
-
});
|
|
388
|
-
if (isMulti) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Combobox.Combobox, {
|
|
389
|
-
store: combobox,
|
|
390
|
-
classNames: resolvedClassNames,
|
|
391
|
-
styles: resolvedStyles,
|
|
392
|
-
unstyled,
|
|
393
|
-
size,
|
|
394
|
-
readOnly,
|
|
395
|
-
__staticSelector: "TreeSelect",
|
|
396
|
-
attributes,
|
|
397
|
-
onOptionSubmit: handleOptionSubmit,
|
|
398
|
-
...comboboxProps,
|
|
399
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.DropdownTarget, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PillsInput.PillsInput, {
|
|
400
|
-
...styleProps,
|
|
401
|
-
__staticSelector: "TreeSelect",
|
|
402
|
-
classNames: resolvedClassNames,
|
|
403
|
-
styles: resolvedStyles,
|
|
404
|
-
unstyled,
|
|
405
|
-
size,
|
|
406
|
-
className,
|
|
407
|
-
style,
|
|
408
|
-
variant,
|
|
409
|
-
disabled,
|
|
410
|
-
radius,
|
|
411
|
-
__defaultRightSection: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Chevron, {
|
|
412
|
-
size,
|
|
413
|
-
error,
|
|
414
|
-
unstyled,
|
|
415
|
-
color: chevronColor
|
|
416
|
-
}),
|
|
417
|
-
__clearSection: clearButton,
|
|
418
|
-
__clearable: _clearable,
|
|
419
|
-
__clearSectionMode: clearSectionMode,
|
|
420
|
-
rightSection,
|
|
421
|
-
rightSectionPointerEvents: rightSectionPointerEvents || "none",
|
|
422
|
-
rightSectionWidth,
|
|
423
|
-
rightSectionProps,
|
|
424
|
-
leftSection,
|
|
425
|
-
leftSectionWidth,
|
|
426
|
-
leftSectionPointerEvents,
|
|
427
|
-
leftSectionProps,
|
|
428
|
-
inputContainer,
|
|
429
|
-
inputWrapperOrder,
|
|
430
|
-
withAsterisk,
|
|
431
|
-
labelProps,
|
|
432
|
-
descriptionProps,
|
|
433
|
-
errorProps,
|
|
434
|
-
wrapperProps,
|
|
435
|
-
description,
|
|
436
|
-
label,
|
|
437
|
-
error,
|
|
438
|
-
withErrorStyles,
|
|
439
|
-
__stylesApiProps: {
|
|
440
|
-
...props,
|
|
441
|
-
rightSectionPointerEvents: rightSectionPointerEvents || "none",
|
|
442
|
-
multiline: true
|
|
443
|
-
},
|
|
444
|
-
pointer: !searchable,
|
|
445
|
-
onClick: () => searchable ? combobox.openDropdown() : combobox.toggleDropdown(),
|
|
446
|
-
"data-expanded": combobox.dropdownOpened || void 0,
|
|
447
|
-
id: _id,
|
|
448
|
-
required,
|
|
449
|
-
mod,
|
|
450
|
-
attributes,
|
|
451
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Pill.Pill.Group, {
|
|
452
|
-
attributes,
|
|
453
|
-
disabled,
|
|
454
|
-
unstyled,
|
|
455
|
-
...getStyles("pillsList", { style: pillsListStyle }),
|
|
456
|
-
children: [pills, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.EventsTarget, {
|
|
457
|
-
autoComplete,
|
|
458
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PillsInput.PillsInput.Field, {
|
|
459
|
-
...rest,
|
|
460
|
-
id: _id,
|
|
461
|
-
placeholder,
|
|
462
|
-
type: !searchable && !placeholder ? "hidden" : "visible",
|
|
463
|
-
...getStyles("inputField"),
|
|
464
|
-
unstyled,
|
|
465
|
-
onFocus: (event) => {
|
|
466
|
-
onFocus?.(event);
|
|
467
|
-
if (openOnFocus && searchable) combobox.openDropdown();
|
|
468
|
-
},
|
|
469
|
-
onBlur: (event) => {
|
|
470
|
-
onBlur?.(event);
|
|
471
|
-
combobox.closeDropdown();
|
|
472
|
-
handleSearchChange("");
|
|
473
|
-
},
|
|
474
|
-
onKeyDown: handleKeyDown,
|
|
475
|
-
value: _searchValue,
|
|
476
|
-
onChange: (event) => {
|
|
477
|
-
handleSearchChange(event.currentTarget.value);
|
|
478
|
-
if (searchable) combobox.openDropdown();
|
|
479
|
-
},
|
|
480
|
-
disabled,
|
|
481
|
-
readOnly: readOnly || !searchable,
|
|
482
|
-
pointer: !searchable
|
|
483
|
-
})
|
|
484
|
-
})]
|
|
485
|
-
})
|
|
486
|
-
}) }), dropdown]
|
|
487
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.HiddenInput, {
|
|
488
|
-
name,
|
|
489
|
-
valuesDivider: hiddenInputValuesDivider,
|
|
490
|
-
value: _value,
|
|
491
|
-
form,
|
|
492
|
-
disabled,
|
|
493
|
-
...hiddenInputProps
|
|
494
|
-
})] });
|
|
495
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Combobox.Combobox, {
|
|
496
|
-
store: combobox,
|
|
497
|
-
__staticSelector: "TreeSelect",
|
|
498
|
-
classNames: resolvedClassNames,
|
|
499
|
-
styles: resolvedStyles,
|
|
500
|
-
unstyled,
|
|
501
|
-
readOnly,
|
|
502
|
-
size,
|
|
503
|
-
attributes,
|
|
504
|
-
onOptionSubmit: handleOptionSubmit,
|
|
505
|
-
...comboboxProps,
|
|
506
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Target, {
|
|
507
|
-
targetType: searchable ? "input" : "button",
|
|
508
|
-
autoComplete,
|
|
509
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputBase.InputBase, {
|
|
510
|
-
id: _id,
|
|
511
|
-
__defaultRightSection: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Chevron, {
|
|
512
|
-
size,
|
|
513
|
-
error,
|
|
514
|
-
unstyled,
|
|
515
|
-
color: chevronColor
|
|
516
|
-
}),
|
|
517
|
-
__clearSection: clearButton,
|
|
518
|
-
__clearable: _clearable,
|
|
519
|
-
__clearSectionMode: clearSectionMode,
|
|
520
|
-
rightSection,
|
|
521
|
-
rightSectionPointerEvents: rightSectionPointerEvents || "none",
|
|
522
|
-
...rest,
|
|
523
|
-
...styleProps,
|
|
524
|
-
size,
|
|
525
|
-
__staticSelector: "TreeSelect",
|
|
526
|
-
disabled,
|
|
527
|
-
readOnly: readOnly || !searchable,
|
|
528
|
-
value: searchable ? _searchValue : singleDisplayLabel,
|
|
529
|
-
onChange: (event) => {
|
|
530
|
-
handleSearchChange(event.currentTarget.value);
|
|
531
|
-
combobox.openDropdown();
|
|
532
|
-
},
|
|
533
|
-
onFocus: (event) => {
|
|
534
|
-
if (openOnFocus && searchable) combobox.openDropdown();
|
|
535
|
-
onFocus?.(event);
|
|
536
|
-
},
|
|
537
|
-
onBlur: (event) => {
|
|
538
|
-
if (searchable) combobox.closeDropdown();
|
|
539
|
-
handleSearchChange(_value ? getNodeLabel(_value) : "");
|
|
540
|
-
onBlur?.(event);
|
|
541
|
-
},
|
|
542
|
-
onClick: (event) => {
|
|
543
|
-
searchable ? combobox.openDropdown() : combobox.toggleDropdown();
|
|
544
|
-
onClick?.(event);
|
|
545
|
-
},
|
|
546
|
-
onKeyDown: handleKeyDown,
|
|
547
|
-
classNames: resolvedClassNames,
|
|
548
|
-
styles: resolvedStyles,
|
|
549
|
-
unstyled,
|
|
550
|
-
pointer: !searchable,
|
|
551
|
-
error,
|
|
552
|
-
attributes,
|
|
553
|
-
className,
|
|
554
|
-
style,
|
|
555
|
-
variant,
|
|
556
|
-
radius,
|
|
557
|
-
leftSection,
|
|
558
|
-
leftSectionWidth,
|
|
559
|
-
leftSectionPointerEvents,
|
|
560
|
-
leftSectionProps,
|
|
561
|
-
rightSectionWidth,
|
|
562
|
-
rightSectionProps,
|
|
563
|
-
inputContainer,
|
|
564
|
-
inputWrapperOrder,
|
|
565
|
-
withAsterisk,
|
|
566
|
-
labelProps,
|
|
567
|
-
descriptionProps,
|
|
568
|
-
errorProps,
|
|
569
|
-
wrapperProps,
|
|
570
|
-
description,
|
|
571
|
-
label,
|
|
572
|
-
withErrorStyles,
|
|
573
|
-
placeholder,
|
|
574
|
-
required,
|
|
575
|
-
mod
|
|
576
|
-
})
|
|
577
|
-
}), dropdown]
|
|
578
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.HiddenInput, {
|
|
579
|
-
value: _value,
|
|
580
|
-
name,
|
|
581
|
-
form,
|
|
582
|
-
disabled,
|
|
583
|
-
...hiddenInputProps
|
|
584
|
-
})] });
|
|
585
|
-
});
|
|
586
|
-
TreeSelect.classes = {
|
|
587
|
-
...require_InputBase.InputBase.classes,
|
|
588
|
-
...require_Combobox.Combobox.classes
|
|
589
|
-
};
|
|
590
|
-
TreeSelect.displayName = "@mantine/core/TreeSelect";
|
|
591
|
-
//#endregion
|
|
592
|
-
exports.TreeSelect = TreeSelect;
|
|
593
|
-
|
|
594
|
-
//# sourceMappingURL=TreeSelect.cjs.map
|