@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.
Files changed (145) hide show
  1. package/cjs/components/Autocomplete/Autocomplete.cjs +1 -0
  2. package/cjs/components/Autocomplete/Autocomplete.cjs.map +1 -1
  3. package/cjs/components/Combobox/use-combobox-target-props/use-combobox-target-props.cjs +1 -0
  4. package/cjs/components/Combobox/use-combobox-target-props/use-combobox-target-props.cjs.map +1 -1
  5. package/cjs/components/MultiSelect/MultiSelect.cjs +1 -0
  6. package/cjs/components/MultiSelect/MultiSelect.cjs.map +1 -1
  7. package/cjs/components/PasswordInput/PasswordInput.cjs +2 -0
  8. package/cjs/components/PasswordInput/PasswordInput.cjs.map +1 -1
  9. package/cjs/components/Popover/PopoverTarget/PopoverTarget.cjs +2 -2
  10. package/cjs/components/Popover/PopoverTarget/PopoverTarget.cjs.map +1 -1
  11. package/cjs/components/Radio/Radio.cjs +1 -1
  12. package/cjs/components/Radio/Radio.cjs.map +1 -1
  13. package/cjs/components/Select/Select.cjs +7 -6
  14. package/cjs/components/Select/Select.cjs.map +1 -1
  15. package/cjs/components/TagsInput/TagsInput.cjs +1 -0
  16. package/cjs/components/TagsInput/TagsInput.cjs.map +1 -1
  17. package/esm/components/Autocomplete/Autocomplete.mjs +1 -0
  18. package/esm/components/Autocomplete/Autocomplete.mjs.map +1 -1
  19. package/esm/components/Combobox/use-combobox-target-props/use-combobox-target-props.mjs +1 -0
  20. package/esm/components/Combobox/use-combobox-target-props/use-combobox-target-props.mjs.map +1 -1
  21. package/esm/components/MultiSelect/MultiSelect.mjs +1 -0
  22. package/esm/components/MultiSelect/MultiSelect.mjs.map +1 -1
  23. package/esm/components/PasswordInput/PasswordInput.mjs +2 -0
  24. package/esm/components/PasswordInput/PasswordInput.mjs.map +1 -1
  25. package/esm/components/Popover/PopoverTarget/PopoverTarget.mjs +2 -2
  26. package/esm/components/Popover/PopoverTarget/PopoverTarget.mjs.map +1 -1
  27. package/esm/components/Radio/Radio.mjs +1 -1
  28. package/esm/components/Radio/Radio.mjs.map +1 -1
  29. package/esm/components/Select/Select.mjs +7 -6
  30. package/esm/components/Select/Select.mjs.map +1 -1
  31. package/esm/components/TagsInput/TagsInput.mjs +1 -0
  32. package/esm/components/TagsInput/TagsInput.mjs.map +1 -1
  33. package/esm/core/utils/get-env/get-env.mjs +1 -1
  34. package/esm/core/utils/get-env/get-env.mjs.map +1 -1
  35. package/lib/components/Combobox/use-combobox-target-props/use-combobox-target-props.d.ts +0 -16
  36. package/lib/components/Input/InputClearSection/InputClearSection.d.ts +1 -1
  37. package/lib/components/Input/use-input-props.d.ts +18 -18
  38. package/lib/components/Popover/use-popover.d.ts +2 -2
  39. package/lib/core/MantineProvider/color-functions/get-contrast-color/get-contrast-color.d.ts +2 -2
  40. package/package.json +4 -4
  41. package/cjs/components/MaskInput/MaskInput.cjs +0 -24
  42. package/cjs/components/MaskInput/MaskInput.cjs.map +0 -1
  43. package/cjs/components/MaskInput/use-mask-input-props.cjs +0 -29
  44. package/cjs/components/MaskInput/use-mask-input-props.cjs.map +0 -1
  45. package/cjs/components/Pagination/PaginationLabel/PaginationLabel.cjs +0 -33
  46. package/cjs/components/Pagination/PaginationLabel/PaginationLabel.cjs.map +0 -1
  47. package/cjs/components/RollingNumber/DigitColumn.cjs +0 -41
  48. package/cjs/components/RollingNumber/DigitColumn.cjs.map +0 -1
  49. package/cjs/components/RollingNumber/RollingNumber.cjs +0 -100
  50. package/cjs/components/RollingNumber/RollingNumber.cjs.map +0 -1
  51. package/cjs/components/RollingNumber/RollingNumber.module.cjs +0 -12
  52. package/cjs/components/RollingNumber/RollingNumber.module.cjs.map +0 -1
  53. package/cjs/components/RollingNumber/build-value.cjs +0 -22
  54. package/cjs/components/RollingNumber/build-value.cjs.map +0 -1
  55. package/cjs/components/RollingNumber/get-digit-parts.cjs +0 -40
  56. package/cjs/components/RollingNumber/get-digit-parts.cjs.map +0 -1
  57. package/cjs/components/RollingNumber/get-render-slots.cjs +0 -78
  58. package/cjs/components/RollingNumber/get-render-slots.cjs.map +0 -1
  59. package/cjs/components/Tree/FlatTreeNode.cjs +0 -102
  60. package/cjs/components/Tree/FlatTreeNode.cjs.map +0 -1
  61. package/cjs/components/Tree/filter-tree-data/filter-tree-data.cjs +0 -23
  62. package/cjs/components/Tree/filter-tree-data/filter-tree-data.cjs.map +0 -1
  63. package/cjs/components/Tree/flatten-tree-data/flatten-tree-data.cjs +0 -28
  64. package/cjs/components/Tree/flatten-tree-data/flatten-tree-data.cjs.map +0 -1
  65. package/cjs/components/Tree/merge-async-children/merge-async-children.cjs +0 -32
  66. package/cjs/components/Tree/merge-async-children/merge-async-children.cjs.map +0 -1
  67. package/cjs/components/Tree/move-tree-node/move-tree-node.cjs +0 -78
  68. package/cjs/components/Tree/move-tree-node/move-tree-node.cjs.map +0 -1
  69. package/cjs/components/Tree/use-tree-node-drag-drop.cjs +0 -96
  70. package/cjs/components/Tree/use-tree-node-drag-drop.cjs.map +0 -1
  71. package/cjs/components/TreeSelect/TreeSelect.cjs +0 -594
  72. package/cjs/components/TreeSelect/TreeSelect.cjs.map +0 -1
  73. package/cjs/components/TreeSelect/TreeSelect.module.cjs +0 -16
  74. package/cjs/components/TreeSelect/TreeSelect.module.cjs.map +0 -1
  75. package/cjs/components/TreeSelect/TreeSelectOption.cjs +0 -91
  76. package/cjs/components/TreeSelect/TreeSelectOption.cjs.map +0 -1
  77. package/cjs/components/TreeSelect/flatten-tree-select-data.cjs +0 -34
  78. package/cjs/components/TreeSelect/flatten-tree-select-data.cjs.map +0 -1
  79. package/cjs/components/TreeSelect/get-checked-values-by-strategy.cjs +0 -30
  80. package/cjs/components/TreeSelect/get-checked-values-by-strategy.cjs.map +0 -1
  81. package/esm/components/MaskInput/MaskInput.mjs +0 -23
  82. package/esm/components/MaskInput/MaskInput.mjs.map +0 -1
  83. package/esm/components/MaskInput/use-mask-input-props.mjs +0 -28
  84. package/esm/components/MaskInput/use-mask-input-props.mjs.map +0 -1
  85. package/esm/components/Pagination/PaginationLabel/PaginationLabel.mjs +0 -32
  86. package/esm/components/Pagination/PaginationLabel/PaginationLabel.mjs.map +0 -1
  87. package/esm/components/RollingNumber/DigitColumn.mjs +0 -40
  88. package/esm/components/RollingNumber/DigitColumn.mjs.map +0 -1
  89. package/esm/components/RollingNumber/RollingNumber.mjs +0 -99
  90. package/esm/components/RollingNumber/RollingNumber.mjs.map +0 -1
  91. package/esm/components/RollingNumber/RollingNumber.module.mjs +0 -12
  92. package/esm/components/RollingNumber/RollingNumber.module.mjs.map +0 -1
  93. package/esm/components/RollingNumber/build-value.mjs +0 -22
  94. package/esm/components/RollingNumber/build-value.mjs.map +0 -1
  95. package/esm/components/RollingNumber/get-digit-parts.mjs +0 -40
  96. package/esm/components/RollingNumber/get-digit-parts.mjs.map +0 -1
  97. package/esm/components/RollingNumber/get-render-slots.mjs +0 -78
  98. package/esm/components/RollingNumber/get-render-slots.mjs.map +0 -1
  99. package/esm/components/Tree/FlatTreeNode.mjs +0 -101
  100. package/esm/components/Tree/FlatTreeNode.mjs.map +0 -1
  101. package/esm/components/Tree/filter-tree-data/filter-tree-data.mjs +0 -22
  102. package/esm/components/Tree/filter-tree-data/filter-tree-data.mjs.map +0 -1
  103. package/esm/components/Tree/flatten-tree-data/flatten-tree-data.mjs +0 -28
  104. package/esm/components/Tree/flatten-tree-data/flatten-tree-data.mjs.map +0 -1
  105. package/esm/components/Tree/merge-async-children/merge-async-children.mjs +0 -32
  106. package/esm/components/Tree/merge-async-children/merge-async-children.mjs.map +0 -1
  107. package/esm/components/Tree/move-tree-node/move-tree-node.mjs +0 -78
  108. package/esm/components/Tree/move-tree-node/move-tree-node.mjs.map +0 -1
  109. package/esm/components/Tree/use-tree-node-drag-drop.mjs +0 -96
  110. package/esm/components/Tree/use-tree-node-drag-drop.mjs.map +0 -1
  111. package/esm/components/TreeSelect/TreeSelect.mjs +0 -593
  112. package/esm/components/TreeSelect/TreeSelect.mjs.map +0 -1
  113. package/esm/components/TreeSelect/TreeSelect.module.mjs +0 -16
  114. package/esm/components/TreeSelect/TreeSelect.module.mjs.map +0 -1
  115. package/esm/components/TreeSelect/TreeSelectOption.mjs +0 -90
  116. package/esm/components/TreeSelect/TreeSelectOption.mjs.map +0 -1
  117. package/esm/components/TreeSelect/flatten-tree-select-data.mjs +0 -34
  118. package/esm/components/TreeSelect/flatten-tree-select-data.mjs.map +0 -1
  119. package/esm/components/TreeSelect/get-checked-values-by-strategy.mjs +0 -29
  120. package/esm/components/TreeSelect/get-checked-values-by-strategy.mjs.map +0 -1
  121. package/lib/components/MaskInput/MaskInput.d.ts +0 -68
  122. package/lib/components/MaskInput/index.d.ts +0 -7
  123. package/lib/components/MaskInput/use-mask-input-props.d.ts +0 -428
  124. package/lib/components/Pagination/PaginationLabel/PaginationLabel.d.ts +0 -22
  125. package/lib/components/RollingNumber/DigitColumn.d.ts +0 -10
  126. package/lib/components/RollingNumber/RollingNumber.d.ts +0 -39
  127. package/lib/components/RollingNumber/build-value.d.ts +0 -10
  128. package/lib/components/RollingNumber/get-digit-parts.d.ts +0 -12
  129. package/lib/components/RollingNumber/get-render-slots.d.ts +0 -35
  130. package/lib/components/RollingNumber/index.d.ts +0 -9
  131. package/lib/components/Tree/FlatTreeNode.d.ts +0 -34
  132. package/lib/components/Tree/filter-tree-data/filter-tree-data.d.ts +0 -4
  133. package/lib/components/Tree/flatten-tree-data/flatten-tree-data.d.ts +0 -15
  134. package/lib/components/Tree/merge-async-children/merge-async-children.d.ts +0 -2
  135. package/lib/components/Tree/move-tree-node/move-tree-node.d.ts +0 -11
  136. package/lib/components/Tree/use-tree-node-drag-drop.d.ts +0 -18
  137. package/lib/components/TreeSelect/TreeSelect.d.ts +0 -122
  138. package/lib/components/TreeSelect/TreeSelectOption.d.ts +0 -29
  139. package/lib/components/TreeSelect/flatten-tree-select-data.d.ts +0 -12
  140. package/lib/components/TreeSelect/get-checked-values-by-strategy.d.ts +0 -4
  141. package/lib/components/TreeSelect/index.d.ts +0 -13
  142. package/styles/RollingNumber.css +0 -50
  143. package/styles/RollingNumber.layer.css +0 -51
  144. package/styles/TreeSelect.css +0 -113
  145. 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