@mantine/core 9.1.1 → 9.2.0

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