@fangxinyan/lumina 0.9.0 → 0.9.2
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/dist/Alert.d.cts +1 -1
- package/dist/Alert.d.ts +1 -1
- package/dist/AppShell.d.cts +1 -1
- package/dist/AppShell.d.ts +1 -1
- package/dist/AutoComplete.d.cts +1 -1
- package/dist/AutoComplete.d.ts +1 -1
- package/dist/Avatar.d.cts +1 -1
- package/dist/Avatar.d.ts +1 -1
- package/dist/Badge.d.cts +1 -1
- package/dist/Badge.d.ts +1 -1
- package/dist/Button.d.cts +1 -1
- package/dist/Button.d.ts +1 -1
- package/dist/Calendar.d.cts +1 -1
- package/dist/Calendar.d.ts +1 -1
- package/dist/Card.d.cts +1 -1
- package/dist/Card.d.ts +1 -1
- package/dist/Cascader.d.cts +1 -1
- package/dist/Cascader.d.ts +1 -1
- package/dist/Checkbox.d.cts +1 -1
- package/dist/Checkbox.d.ts +1 -1
- package/dist/Collapse.d.cts +1 -1
- package/dist/Collapse.d.ts +1 -1
- package/dist/ColorPicker.d.cts +1 -1
- package/dist/ColorPicker.d.ts +1 -1
- package/dist/CommandPalette.d.cts +1 -1
- package/dist/CommandPalette.d.ts +1 -1
- package/dist/ContextMenu.d.cts +1 -1
- package/dist/ContextMenu.d.ts +1 -1
- package/dist/DatePicker.d.cts +1 -1
- package/dist/DatePicker.d.ts +1 -1
- package/dist/DateTimePicker.d.cts +1 -1
- package/dist/DateTimePicker.d.ts +1 -1
- package/dist/Divider.d.cts +1 -1
- package/dist/Divider.d.ts +1 -1
- package/dist/Drawer.d.cts +1 -1
- package/dist/Drawer.d.ts +1 -1
- package/dist/Empty.d.cts +1 -1
- package/dist/Empty.d.ts +1 -1
- package/dist/Form.d.cts +1 -1
- package/dist/Form.d.ts +1 -1
- package/dist/Icon.d.cts +1 -1
- package/dist/Icon.d.ts +1 -1
- package/dist/Image.d.cts +1 -1
- package/dist/Image.d.ts +1 -1
- package/dist/Input.d.cts +1 -1
- package/dist/Input.d.ts +1 -1
- package/dist/InputNumber.d.cts +1 -1
- package/dist/InputNumber.d.ts +1 -1
- package/dist/List.d.cts +1 -1
- package/dist/List.d.ts +1 -1
- package/dist/Message.d.cts +1 -1
- package/dist/Message.d.ts +1 -1
- package/dist/{Modal-UI2FXNDR.css → Modal-KLLX3Z2M.css} +23 -6
- package/dist/Modal.cjs +2 -2
- package/dist/Modal.d.cts +1 -1
- package/dist/Modal.d.ts +1 -1
- package/dist/Modal.js +1 -1
- package/dist/Pagination.cjs +3 -3
- package/dist/Pagination.d.cts +1 -1
- package/dist/Pagination.d.ts +1 -1
- package/dist/Pagination.js +2 -2
- package/dist/Popover.d.cts +1 -1
- package/dist/Popover.d.ts +1 -1
- package/dist/Progress.d.cts +1 -1
- package/dist/Progress.d.ts +1 -1
- package/dist/Radio.d.cts +1 -1
- package/dist/Radio.d.ts +1 -1
- package/dist/{Select-QPBB73KA.css → Select-Y3X3ZJTC.css} +54 -11
- package/dist/Select.cjs +2 -4
- package/dist/Select.d.cts +8 -2
- package/dist/Select.d.ts +8 -2
- package/dist/Select.js +1 -3
- package/dist/Skeleton.d.cts +1 -1
- package/dist/Skeleton.d.ts +1 -1
- package/dist/Slider.d.cts +1 -1
- package/dist/Slider.d.ts +1 -1
- package/dist/Spin.d.cts +1 -1
- package/dist/Spin.d.ts +1 -1
- package/dist/Splitter.d.cts +1 -1
- package/dist/Splitter.d.ts +1 -1
- package/dist/StatusBar.d.cts +1 -1
- package/dist/StatusBar.d.ts +1 -1
- package/dist/Surface.d.cts +2 -2
- package/dist/Surface.d.ts +2 -2
- package/dist/Switch.d.cts +1 -1
- package/dist/Switch.d.ts +1 -1
- package/dist/Table.cjs +4 -4
- package/dist/Table.d.cts +1 -1
- package/dist/Table.d.ts +1 -1
- package/dist/Table.js +3 -3
- package/dist/TablePro.cjs +5 -5
- package/dist/TablePro.d.cts +1 -1
- package/dist/TablePro.d.ts +1 -1
- package/dist/TablePro.js +4 -4
- package/dist/Tabs.d.cts +1 -1
- package/dist/Tabs.d.ts +1 -1
- package/dist/Tag.d.cts +1 -1
- package/dist/Tag.d.ts +1 -1
- package/dist/Textarea.d.cts +1 -1
- package/dist/Textarea.d.ts +1 -1
- package/dist/{Theme-uQq2B0Yk.d.cts → Theme-BJa0Nb3w.d.cts} +1 -1
- package/dist/{Theme-CLedeJ_C.d.ts → Theme-DTtq_WWg.d.ts} +1 -1
- package/dist/Theme.d.cts +4 -4
- package/dist/Theme.d.ts +4 -4
- package/dist/ThemePanel.d.cts +2 -2
- package/dist/ThemePanel.d.ts +2 -2
- package/dist/TimePicker.d.cts +1 -1
- package/dist/TimePicker.d.ts +1 -1
- package/dist/Timeline.d.cts +1 -1
- package/dist/Timeline.d.ts +1 -1
- package/dist/Tooltip.d.cts +1 -1
- package/dist/Tooltip.d.ts +1 -1
- package/dist/Typography.d.cts +1 -1
- package/dist/Typography.d.ts +1 -1
- package/dist/{chunk-K3KHQ77L.cjs → chunk-CDT2QCBL.cjs} +177 -85
- package/dist/{chunk-HMN65CDW.cjs → chunk-IDEE7PP5.cjs} +2 -2
- package/dist/{chunk-UCE53RYR.js → chunk-LZXJN3XA.js} +1 -1
- package/dist/{chunk-7KA5D37Z.cjs → chunk-MJYMPK5K.cjs} +2 -2
- package/dist/{chunk-AL2PYVVP.js → chunk-MSWWABXP.js} +177 -85
- package/dist/{chunk-VTN6YLRJ.cjs → chunk-QZ2AAQBX.cjs} +2 -2
- package/dist/{chunk-GMFOY7RD.js → chunk-RJCPXAZ3.js} +10 -4
- package/dist/{chunk-JMYUO7V7.js → chunk-RM6JIM6O.js} +1 -1
- package/dist/{chunk-I2YL5XE4.cjs → chunk-SOAGRYM3.cjs} +10 -4
- package/dist/{chunk-2NECDEAJ.js → chunk-U3T6RC6U.js} +1 -1
- package/dist/{componentThemeTypes-Jt4B5aU8.d.ts → componentThemeTypes-C7lS3Hi8.d.cts} +6 -2
- package/dist/{componentThemeTypes-Jt4B5aU8.d.cts → componentThemeTypes-C7lS3Hi8.d.ts} +6 -2
- package/dist/index.cjs +11 -11
- package/dist/index.d.cts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +6 -6
- package/dist/styles.css +77 -16
- package/docs/llms/modal.md +24 -2
- package/docs/llms/select.md +40 -1
- package/docs/llms/theme.md +1 -1
- package/docs/llms.md +1 -1
- package/package.json +1 -1
|
@@ -2,14 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
var chunkVNP5WB6M_cjs = require('./chunk-VNP5WB6M.cjs');
|
|
4
4
|
var chunkFJB3243S_cjs = require('./chunk-FJB3243S.cjs');
|
|
5
|
-
var chunkGFGMGJ5A_cjs = require('./chunk-GFGMGJ5A.cjs');
|
|
6
5
|
var chunkHSDMJUB6_cjs = require('./chunk-HSDMJUB6.cjs');
|
|
7
6
|
var chunkVDVKY2IX_cjs = require('./chunk-VDVKY2IX.cjs');
|
|
8
7
|
var chunkV6BLBIY6_cjs = require('./chunk-V6BLBIY6.cjs');
|
|
9
8
|
var chunkI4GJZLJU_cjs = require('./chunk-I4GJZLJU.cjs');
|
|
10
9
|
require('./tokens-223RYVVS.css');
|
|
11
10
|
require('./shared-NJHRNLRH.css');
|
|
12
|
-
require('./Select-
|
|
11
|
+
require('./Select-Y3X3ZJTC.css');
|
|
13
12
|
var React = require('react');
|
|
14
13
|
var reactDom = require('react-dom');
|
|
15
14
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -51,6 +50,10 @@ var defaultFilter = (input, opt, optionFilterProp) => {
|
|
|
51
50
|
const txt = propValue != null ? String(propValue) : opt.text ?? (typeof opt.label === "string" ? opt.label : String(opt.value));
|
|
52
51
|
return txt.toLowerCase().includes(q);
|
|
53
52
|
};
|
|
53
|
+
var getSearchInputDisplayWidth = (value) => Array.from(value).reduce(
|
|
54
|
+
(width, character) => width + ((character.codePointAt(0) ?? 0) > 255 ? 2 : 1),
|
|
55
|
+
0
|
|
56
|
+
);
|
|
54
57
|
var getOptionAriaLabel = (option) => {
|
|
55
58
|
if (option.ariaLabel) return option.ariaLabel;
|
|
56
59
|
if (typeof option.label === "string" || typeof option.label === "number") {
|
|
@@ -69,6 +72,9 @@ var SelectInner = (props, forwardedRef) => {
|
|
|
69
72
|
allowClear,
|
|
70
73
|
searchable,
|
|
71
74
|
showSearch,
|
|
75
|
+
searchValue: searchValueProp,
|
|
76
|
+
defaultSearchValue,
|
|
77
|
+
onSearch,
|
|
72
78
|
filterOption,
|
|
73
79
|
optionFilterProp,
|
|
74
80
|
loading,
|
|
@@ -117,7 +123,7 @@ var SelectInner = (props, forwardedRef) => {
|
|
|
117
123
|
isMulti && Array.isArray(props.defaultValue) ? props.defaultValue : []
|
|
118
124
|
);
|
|
119
125
|
const [innerOpen, setInnerOpen] = React__namespace.useState(defaultOpen ?? false);
|
|
120
|
-
const [
|
|
126
|
+
const [innerSearchValue, setInnerSearchValue] = React__namespace.useState(defaultSearchValue ?? "");
|
|
121
127
|
const [activeIdx, setActiveIdx] = React__namespace.useState(-1);
|
|
122
128
|
const searchRef = React__namespace.useRef(null);
|
|
123
129
|
const portalContainer = chunkI4GJZLJU_cjs.usePortalContainer();
|
|
@@ -136,12 +142,29 @@ var SelectInner = (props, forwardedRef) => {
|
|
|
136
142
|
const openControlled = openProp !== void 0;
|
|
137
143
|
const requestedOpen = openControlled ? openProp : innerOpen;
|
|
138
144
|
const open = !disabled && requestedOpen;
|
|
139
|
-
const
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
+
const requestedOpenRef = React__namespace.useRef(requestedOpen);
|
|
146
|
+
requestedOpenRef.current = requestedOpen;
|
|
147
|
+
const searchControlled = searchValueProp !== void 0;
|
|
148
|
+
const searchValue = searchControlled ? searchValueProp : innerSearchValue;
|
|
149
|
+
const hasInlineSearch = mergedSearchable;
|
|
150
|
+
const showsInlineSearchInput = hasInlineSearch && (isMulti || open);
|
|
151
|
+
const updateSearchValue = React__namespace.useCallback((nextValue) => {
|
|
152
|
+
if (!searchControlled) setInnerSearchValue(nextValue);
|
|
153
|
+
onSearch?.(nextValue);
|
|
154
|
+
}, [onSearch, searchControlled]);
|
|
155
|
+
const resetSearchValue = React__namespace.useCallback(() => {
|
|
156
|
+
if (!searchValue) return;
|
|
157
|
+
if (!searchControlled) setInnerSearchValue("");
|
|
158
|
+
onSearch?.("");
|
|
159
|
+
}, [onSearch, searchControlled, searchValue]);
|
|
160
|
+
const setOpen = React__namespace.useCallback((nextOpen) => {
|
|
161
|
+
if (disabled && nextOpen) return;
|
|
162
|
+
if (nextOpen === requestedOpenRef.current) return;
|
|
163
|
+
requestedOpenRef.current = nextOpen;
|
|
164
|
+
if (!openControlled) setInnerOpen(nextOpen);
|
|
165
|
+
onOpenChange?.(nextOpen);
|
|
166
|
+
if (!nextOpen) resetSearchValue();
|
|
167
|
+
}, [disabled, onOpenChange, openControlled, resetSearchValue]);
|
|
145
168
|
React__namespace.useEffect(() => {
|
|
146
169
|
if (!disabled || openControlled || !innerOpen) return;
|
|
147
170
|
setInnerOpen(false);
|
|
@@ -152,7 +175,7 @@ var SelectInner = (props, forwardedRef) => {
|
|
|
152
175
|
placement: "bottom",
|
|
153
176
|
matchTriggerWidth: !hasCustomPopupWidth,
|
|
154
177
|
panelWidth: typeof resolvedPopupWidth === "number" ? resolvedPopupWidth : 360,
|
|
155
|
-
panelHeight: mergedListHeight +
|
|
178
|
+
panelHeight: mergedListHeight + 12
|
|
156
179
|
});
|
|
157
180
|
chunkHSDMJUB6_cjs.useOverlayLayer({
|
|
158
181
|
open: open && portalContainer != null,
|
|
@@ -194,7 +217,7 @@ var SelectInner = (props, forwardedRef) => {
|
|
|
194
217
|
};
|
|
195
218
|
document.addEventListener("mousedown", h);
|
|
196
219
|
return () => document.removeEventListener("mousedown", h);
|
|
197
|
-
}, [open]);
|
|
220
|
+
}, [menuRef, open, setOpen, triggerRef]);
|
|
198
221
|
React__namespace.useEffect(() => {
|
|
199
222
|
if (open && mergedSearchable) {
|
|
200
223
|
requestAnimationFrame(() => searchRef.current?.focus());
|
|
@@ -206,14 +229,32 @@ var SelectInner = (props, forwardedRef) => {
|
|
|
206
229
|
[options]
|
|
207
230
|
);
|
|
208
231
|
const allFlat = React__namespace.useMemo(() => flatten(orderedItems), [orderedItems]);
|
|
232
|
+
const optionByValue = React__namespace.useMemo(() => {
|
|
233
|
+
const index = /* @__PURE__ */ new Map();
|
|
234
|
+
allFlat.forEach((option) => index.set(option.value, option));
|
|
235
|
+
return index;
|
|
236
|
+
}, [allFlat]);
|
|
237
|
+
const selectedOptionCacheRef = React__namespace.useRef(/* @__PURE__ */ new Map());
|
|
238
|
+
React__namespace.useEffect(() => {
|
|
239
|
+
selectedValues.forEach((selectedValue) => {
|
|
240
|
+
const option = optionByValue.get(selectedValue);
|
|
241
|
+
if (option) selectedOptionCacheRef.current.set(selectedValue, option);
|
|
242
|
+
});
|
|
243
|
+
}, [optionByValue, selectedValues]);
|
|
244
|
+
const selectedOptions = React__namespace.useMemo(
|
|
245
|
+
() => selectedValues.map(
|
|
246
|
+
(selectedValue) => optionByValue.get(selectedValue) ?? selectedOptionCacheRef.current.get(selectedValue)
|
|
247
|
+
).filter((option) => option !== void 0),
|
|
248
|
+
[optionByValue, selectedValues]
|
|
249
|
+
);
|
|
209
250
|
const filteredFlat = React__namespace.useMemo(() => {
|
|
210
|
-
if (!
|
|
251
|
+
if (!searchValue.trim()) return allFlat;
|
|
211
252
|
if (filterOption === false) return allFlat;
|
|
212
253
|
const f = typeof filterOption === "function" ? filterOption : (input, option) => defaultFilter(input, option, optionFilterProp);
|
|
213
|
-
return allFlat.filter((o) => f(
|
|
214
|
-
}, [allFlat,
|
|
254
|
+
return allFlat.filter((o) => f(searchValue, o));
|
|
255
|
+
}, [allFlat, filterOption, optionFilterProp, searchValue]);
|
|
215
256
|
const filteredItems = React__namespace.useMemo(() => {
|
|
216
|
-
if (!
|
|
257
|
+
if (!searchValue.trim()) {
|
|
217
258
|
return orderedItems.filter((item) => !isGroup(item) || item.options.length > 0);
|
|
218
259
|
}
|
|
219
260
|
return orderedItems.map((it) => {
|
|
@@ -223,7 +264,7 @@ var SelectInner = (props, forwardedRef) => {
|
|
|
223
264
|
const kept = it.options.filter((o) => filteredFlat.includes(o));
|
|
224
265
|
return kept.length ? { ...it, options: kept } : null;
|
|
225
266
|
}).filter((x) => x !== null);
|
|
226
|
-
}, [orderedItems, filteredFlat,
|
|
267
|
+
}, [orderedItems, filteredFlat, searchValue]);
|
|
227
268
|
React__namespace.useEffect(() => {
|
|
228
269
|
setActiveIdx((current) => {
|
|
229
270
|
if (current >= 0 && current < filteredFlat.length && !isOptionDisabled(filteredFlat[current])) {
|
|
@@ -234,6 +275,7 @@ var SelectInner = (props, forwardedRef) => {
|
|
|
234
275
|
}, [filteredFlat, isOptionDisabled]);
|
|
235
276
|
const pickSingle = (opt) => {
|
|
236
277
|
if (disabled || isOptionDisabled(opt)) return;
|
|
278
|
+
selectedOptionCacheRef.current.set(opt.value, opt);
|
|
237
279
|
if (!singleControlled) setInnerSingle(opt.value);
|
|
238
280
|
props.onChange?.(opt.value);
|
|
239
281
|
setOpen(false);
|
|
@@ -242,8 +284,17 @@ var SelectInner = (props, forwardedRef) => {
|
|
|
242
284
|
if (disabled || isOptionDisabled(opt)) return;
|
|
243
285
|
const cur = multiValue ?? [];
|
|
244
286
|
const next = cur.includes(opt.value) ? cur.filter((v) => v !== opt.value) : [...cur, opt.value];
|
|
287
|
+
selectedOptionCacheRef.current.set(opt.value, opt);
|
|
288
|
+
if (!multiControlled) setInnerMulti(next);
|
|
289
|
+
props.onChange?.(next);
|
|
290
|
+
if (hasInlineSearch) requestAnimationFrame(() => searchRef.current?.focus());
|
|
291
|
+
};
|
|
292
|
+
const removeMultiValue = (removedValue) => {
|
|
293
|
+
if (disabled) return;
|
|
294
|
+
const next = (multiValue ?? []).filter((value) => value !== removedValue);
|
|
245
295
|
if (!multiControlled) setInnerMulti(next);
|
|
246
296
|
props.onChange?.(next);
|
|
297
|
+
if (hasInlineSearch) requestAnimationFrame(() => searchRef.current?.focus());
|
|
247
298
|
};
|
|
248
299
|
const clearAll = () => {
|
|
249
300
|
if (disabled) return;
|
|
@@ -259,13 +310,20 @@ var SelectInner = (props, forwardedRef) => {
|
|
|
259
310
|
};
|
|
260
311
|
const isSelected = (val) => isMulti ? (multiValue ?? []).includes(val) : singleValue === val;
|
|
261
312
|
const onKeyDown = (e) => {
|
|
262
|
-
|
|
313
|
+
const fromSearchInput = e.target === searchRef.current;
|
|
314
|
+
if (e.nativeEvent.isComposing || e.keyCode === 229) return;
|
|
315
|
+
if (fromSearchInput && e.key === "Backspace" && !searchValue && isMulti && multiValue.length > 0) {
|
|
316
|
+
e.preventDefault();
|
|
317
|
+
removeMultiValue(multiValue[multiValue.length - 1]);
|
|
318
|
+
return;
|
|
319
|
+
}
|
|
320
|
+
if (!fromSearchInput && (e.key === "Backspace" || e.key === "Delete") && showClear) {
|
|
263
321
|
e.preventDefault();
|
|
264
322
|
clearAll();
|
|
265
323
|
return;
|
|
266
324
|
}
|
|
267
325
|
if (!open) {
|
|
268
|
-
if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
|
|
326
|
+
if (e.key === "Enter" || !fromSearchInput && e.key === " " || e.key === "ArrowDown") {
|
|
269
327
|
e.preventDefault();
|
|
270
328
|
setOpen(true);
|
|
271
329
|
}
|
|
@@ -308,13 +366,47 @@ var SelectInner = (props, forwardedRef) => {
|
|
|
308
366
|
return;
|
|
309
367
|
}
|
|
310
368
|
};
|
|
369
|
+
const renderInlineSearchInput = () => {
|
|
370
|
+
if (!showsInlineSearchInput) return null;
|
|
371
|
+
const multiHasSelection = isMulti && multiValue.length > 0;
|
|
372
|
+
const searchDisplayWidth = getSearchInputDisplayWidth(searchValue);
|
|
373
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
374
|
+
"input",
|
|
375
|
+
{
|
|
376
|
+
ref: searchRef,
|
|
377
|
+
id: fieldId,
|
|
378
|
+
className: `select-search-input ${multiHasSelection ? "with-selection" : "empty"}`,
|
|
379
|
+
type: "search",
|
|
380
|
+
value: searchValue,
|
|
381
|
+
style: multiHasSelection ? { width: `${Math.min(Math.max(searchDisplayWidth + 1, 2), 32)}ch` } : void 0,
|
|
382
|
+
placeholder: isMulti ? multiValue.length === 0 ? placeholder : void 0 : "\u641C\u7D22...",
|
|
383
|
+
disabled,
|
|
384
|
+
autoComplete: "off",
|
|
385
|
+
role: "combobox",
|
|
386
|
+
"aria-autocomplete": "list",
|
|
387
|
+
"aria-label": ariaLabel,
|
|
388
|
+
"aria-labelledby": ariaLabelledBy,
|
|
389
|
+
"aria-invalid": ariaInvalid,
|
|
390
|
+
"aria-required": ariaRequired,
|
|
391
|
+
"aria-describedby": ariaDescribedBy,
|
|
392
|
+
"aria-haspopup": "listbox",
|
|
393
|
+
"aria-expanded": open,
|
|
394
|
+
"aria-controls": open ? listboxId : void 0,
|
|
395
|
+
"aria-activedescendant": open && activeIdx >= 0 ? `${listboxId}-option-${activeIdx}` : void 0,
|
|
396
|
+
onChange: (event) => {
|
|
397
|
+
updateSearchValue(event.target.value);
|
|
398
|
+
if (!open) setOpen(true);
|
|
399
|
+
}
|
|
400
|
+
}
|
|
401
|
+
);
|
|
402
|
+
};
|
|
311
403
|
const renderTrigger = () => {
|
|
312
404
|
if (isMulti) {
|
|
313
|
-
const selected =
|
|
405
|
+
const selected = selectedOptions;
|
|
314
406
|
const max = maxTagCount;
|
|
315
407
|
const shown = max != null ? selected.slice(0, max) : selected;
|
|
316
408
|
const overflow = selected.length - shown.length;
|
|
317
|
-
if (selected.length === 0) {
|
|
409
|
+
if (selected.length === 0 && !hasInlineSearch) {
|
|
318
410
|
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "placeholder", children: placeholder });
|
|
319
411
|
}
|
|
320
412
|
return /* @__PURE__ */ jsxRuntime.jsx(chunkV6BLBIY6_cjs.InternalComponentThemePart, { components: "Tag", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "select-tags", children: [
|
|
@@ -323,24 +415,25 @@ var SelectInner = (props, forwardedRef) => {
|
|
|
323
415
|
{
|
|
324
416
|
tone: "accent",
|
|
325
417
|
removable: !disabled,
|
|
326
|
-
onRemove: () =>
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
props.onChange?.(next);
|
|
418
|
+
onRemove: () => removeMultiValue(o.value),
|
|
419
|
+
onMouseDown: (event) => {
|
|
420
|
+
event.preventDefault();
|
|
421
|
+
event.stopPropagation();
|
|
331
422
|
},
|
|
332
423
|
onClick: (e) => e.stopPropagation(),
|
|
333
|
-
children: selectedRender?.(o, { value: o.value, multiple: true }) ?? o.label
|
|
424
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "select-tag-label", children: selectedRender?.(o, { value: o.value, multiple: true }) ?? o.label })
|
|
334
425
|
},
|
|
335
426
|
String(o.value)
|
|
336
427
|
)),
|
|
337
|
-
overflow > 0 && /* @__PURE__ */ jsxRuntime.jsxs(chunkVNP5WB6M_cjs.Tag, { tone: "neutral", children: [
|
|
428
|
+
overflow > 0 && /* @__PURE__ */ jsxRuntime.jsxs(chunkVNP5WB6M_cjs.Tag, { className: "select-tag-overflow", tone: "neutral", children: [
|
|
338
429
|
"+",
|
|
339
430
|
overflow
|
|
340
|
-
] })
|
|
431
|
+
] }),
|
|
432
|
+
renderInlineSearchInput()
|
|
341
433
|
] }) });
|
|
342
434
|
}
|
|
343
|
-
|
|
435
|
+
if (showsInlineSearchInput) return renderInlineSearchInput();
|
|
436
|
+
const current = selectedOptions[0];
|
|
344
437
|
if (!current) return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "placeholder", children: placeholder });
|
|
345
438
|
if (selectedRender) {
|
|
346
439
|
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "select-value select-value-custom", children: selectedRender(current, { value: current.value, multiple: false }) });
|
|
@@ -387,6 +480,9 @@ var SelectInner = (props, forwardedRef) => {
|
|
|
387
480
|
"aria-label": getOptionAriaLabel(o),
|
|
388
481
|
disabled: optionDisabled,
|
|
389
482
|
className: `menu-item ${sel ? "active" : ""} ${active ? "highlight" : ""}`,
|
|
483
|
+
onMouseDown: (event) => {
|
|
484
|
+
if (hasInlineSearch) event.preventDefault();
|
|
485
|
+
},
|
|
390
486
|
onClick: () => isMulti ? toggleMulti(o) : pickSingle(o),
|
|
391
487
|
children: [
|
|
392
488
|
isMulti && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `menu-check ${sel ? "on" : ""}`, "aria-hidden": true, children: sel && /* @__PURE__ */ jsxRuntime.jsx(chunkVDVKY2IX_cjs.Icon, { name: "check", size: 11, stroke: 3 }) }),
|
|
@@ -413,15 +509,32 @@ var SelectInner = (props, forwardedRef) => {
|
|
|
413
509
|
item.options.map((option) => renderOption(option, !!item.pinned))
|
|
414
510
|
] }, `g-${groupIndex}-${item.pinned ? "pinned" : "regular"}`) : renderOption(item)
|
|
415
511
|
);
|
|
512
|
+
const handleTriggerClick = (event) => {
|
|
513
|
+
if (disabled) return;
|
|
514
|
+
if (!hasInlineSearch) {
|
|
515
|
+
setOpen(!open);
|
|
516
|
+
return;
|
|
517
|
+
}
|
|
518
|
+
const target = event.target;
|
|
519
|
+
if (target.closest(".select-caret")) {
|
|
520
|
+
setOpen(!open);
|
|
521
|
+
return;
|
|
522
|
+
}
|
|
523
|
+
setOpen(true);
|
|
524
|
+
searchRef.current?.focus();
|
|
525
|
+
};
|
|
416
526
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
417
527
|
"div",
|
|
418
528
|
{
|
|
419
529
|
ref: setTriggerRef,
|
|
420
530
|
...rest,
|
|
421
|
-
className: `select ${size} ${isMulti ? "multi" : ""} ${open ? "open" : ""} ${disabled ? "disabled" : ""} ${invalid ? "invalid" : ""} ${className}`,
|
|
531
|
+
className: `select ${size} ${isMulti ? "multi" : ""} ${hasInlineSearch ? "searchable" : ""} ${open ? "open" : ""} ${disabled ? "disabled" : ""} ${invalid ? "invalid" : ""} ${className}`,
|
|
422
532
|
onKeyDown: (e) => {
|
|
423
533
|
onRootKeyDown?.(e);
|
|
424
|
-
|
|
534
|
+
const target = e.target;
|
|
535
|
+
if (!e.defaultPrevented && (target.classList.contains("select-trigger") || target === searchRef.current)) {
|
|
536
|
+
onKeyDown(e);
|
|
537
|
+
}
|
|
425
538
|
},
|
|
426
539
|
onBlur: (event) => {
|
|
427
540
|
onRootBlur?.(event);
|
|
@@ -446,20 +559,20 @@ var SelectInner = (props, forwardedRef) => {
|
|
|
446
559
|
"div",
|
|
447
560
|
{
|
|
448
561
|
className: "select-trigger",
|
|
449
|
-
onClick:
|
|
450
|
-
tabIndex: disabled ? -1 : triggerTabIndex ?? 0,
|
|
451
|
-
id: fieldId,
|
|
452
|
-
role: "combobox",
|
|
453
|
-
"aria-disabled": disabled || void 0,
|
|
454
|
-
"aria-label": ariaLabel,
|
|
455
|
-
"aria-labelledby": ariaLabelledBy,
|
|
456
|
-
"aria-invalid": ariaInvalid,
|
|
457
|
-
"aria-required": ariaRequired,
|
|
458
|
-
"aria-describedby": ariaDescribedBy,
|
|
459
|
-
"aria-haspopup": "listbox",
|
|
460
|
-
"aria-expanded": open,
|
|
461
|
-
"aria-controls": open ? listboxId : void 0,
|
|
462
|
-
"aria-activedescendant": open && activeIdx >= 0 ? `${listboxId}-option-${activeIdx}` : void 0,
|
|
562
|
+
onClick: handleTriggerClick,
|
|
563
|
+
tabIndex: showsInlineSearchInput || disabled ? -1 : triggerTabIndex ?? 0,
|
|
564
|
+
id: showsInlineSearchInput ? void 0 : fieldId,
|
|
565
|
+
role: showsInlineSearchInput ? void 0 : "combobox",
|
|
566
|
+
"aria-disabled": showsInlineSearchInput ? void 0 : disabled || void 0,
|
|
567
|
+
"aria-label": showsInlineSearchInput ? void 0 : ariaLabel,
|
|
568
|
+
"aria-labelledby": showsInlineSearchInput ? void 0 : ariaLabelledBy,
|
|
569
|
+
"aria-invalid": showsInlineSearchInput ? void 0 : ariaInvalid,
|
|
570
|
+
"aria-required": showsInlineSearchInput ? void 0 : ariaRequired,
|
|
571
|
+
"aria-describedby": showsInlineSearchInput ? void 0 : ariaDescribedBy,
|
|
572
|
+
"aria-haspopup": showsInlineSearchInput ? void 0 : "listbox",
|
|
573
|
+
"aria-expanded": showsInlineSearchInput ? void 0 : open,
|
|
574
|
+
"aria-controls": showsInlineSearchInput ? void 0 : open ? listboxId : void 0,
|
|
575
|
+
"aria-activedescendant": showsInlineSearchInput ? void 0 : open && activeIdx >= 0 ? `${listboxId}-option-${activeIdx}` : void 0,
|
|
463
576
|
children: [
|
|
464
577
|
renderTrigger(),
|
|
465
578
|
/* @__PURE__ */ jsxRuntime.jsx(chunkVDVKY2IX_cjs.Icon, { name: "chevDown", size: 14, className: "select-caret" })
|
|
@@ -473,7 +586,10 @@ var SelectInner = (props, forwardedRef) => {
|
|
|
473
586
|
className: "select-clear",
|
|
474
587
|
"aria-label": "Clear",
|
|
475
588
|
onPointerDown: (event) => event.stopPropagation(),
|
|
476
|
-
onMouseDown: (event) =>
|
|
589
|
+
onMouseDown: (event) => {
|
|
590
|
+
if (hasInlineSearch) event.preventDefault();
|
|
591
|
+
event.stopPropagation();
|
|
592
|
+
},
|
|
477
593
|
onClick: (event) => {
|
|
478
594
|
event.stopPropagation();
|
|
479
595
|
clearAll();
|
|
@@ -482,7 +598,7 @@ var SelectInner = (props, forwardedRef) => {
|
|
|
482
598
|
}
|
|
483
599
|
),
|
|
484
600
|
open && portalContainer && reactDom.createPortal(
|
|
485
|
-
/* @__PURE__ */ jsxRuntime.
|
|
601
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
486
602
|
"div",
|
|
487
603
|
{
|
|
488
604
|
ref: menuRef,
|
|
@@ -497,44 +613,20 @@ var SelectInner = (props, forwardedRef) => {
|
|
|
497
613
|
...portalTheme.styles.popup,
|
|
498
614
|
...popupStyle
|
|
499
615
|
},
|
|
500
|
-
children:
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
"
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
onValueChange: setQuery,
|
|
515
|
-
onKeyDown: (e) => {
|
|
516
|
-
if (e.key === "Escape" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter") {
|
|
517
|
-
e.preventDefault();
|
|
518
|
-
onKeyDown(e);
|
|
519
|
-
}
|
|
520
|
-
}
|
|
521
|
-
}
|
|
522
|
-
) }) }),
|
|
523
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
524
|
-
"div",
|
|
525
|
-
{
|
|
526
|
-
className: "menu-options",
|
|
527
|
-
style: { maxHeight: mergedListHeight },
|
|
528
|
-
children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "menu-state", children: [
|
|
529
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "menu-state-ico", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "spinner" }) }),
|
|
530
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u52A0\u8F7D\u4E2D..." })
|
|
531
|
-
] }) : filteredFlat.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "menu-state", children: [
|
|
532
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "menu-state-ico", children: /* @__PURE__ */ jsxRuntime.jsx(chunkVDVKY2IX_cjs.Icon, { name: "search", size: 16 }) }),
|
|
533
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { children: emptyContent ?? "\u6682\u65E0\u5339\u914D\u9879" })
|
|
534
|
-
] }) : renderMenuItems(filteredItems)
|
|
535
|
-
}
|
|
536
|
-
)
|
|
537
|
-
]
|
|
616
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
617
|
+
"div",
|
|
618
|
+
{
|
|
619
|
+
className: "menu-options",
|
|
620
|
+
style: { maxHeight: mergedListHeight },
|
|
621
|
+
children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "menu-state", children: [
|
|
622
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "menu-state-ico", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "spinner" }) }),
|
|
623
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u52A0\u8F7D\u4E2D..." })
|
|
624
|
+
] }) : filteredFlat.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "menu-state", children: [
|
|
625
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "menu-state-ico", children: /* @__PURE__ */ jsxRuntime.jsx(chunkVDVKY2IX_cjs.Icon, { name: "search", size: 16 }) }),
|
|
626
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: emptyContent ?? "\u6682\u65E0\u5339\u914D\u9879" })
|
|
627
|
+
] }) : renderMenuItems(filteredItems)
|
|
628
|
+
}
|
|
629
|
+
)
|
|
538
630
|
}
|
|
539
631
|
),
|
|
540
632
|
portalContainer
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkMJYMPK5K_cjs = require('./chunk-MJYMPK5K.cjs');
|
|
4
4
|
var chunkV6BLBIY6_cjs = require('./chunk-V6BLBIY6.cjs');
|
|
5
5
|
require('./tokens-223RYVVS.css');
|
|
6
6
|
require('./shared-NJHRNLRH.css');
|
|
@@ -77,7 +77,7 @@ var TableProInner = ({
|
|
|
77
77
|
actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-toolbar-actions", children: actions })
|
|
78
78
|
] }),
|
|
79
79
|
/* @__PURE__ */ jsxRuntime.jsx(chunkV6BLBIY6_cjs.InternalComponentThemePart, { components: "Table", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
80
|
-
|
|
80
|
+
chunkMJYMPK5K_cjs.Table,
|
|
81
81
|
{
|
|
82
82
|
columns,
|
|
83
83
|
data,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Select } from './chunk-
|
|
1
|
+
import { Select } from './chunk-MSWWABXP.js';
|
|
2
2
|
import { Input } from './chunk-TUXF2G2O.js';
|
|
3
3
|
import { Icon } from './chunk-2BM65ITV.js';
|
|
4
4
|
import { InternalComponentThemePart, withComponentTheme } from './chunk-5HLNFDV4.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkQZ2AAQBX_cjs = require('./chunk-QZ2AAQBX.cjs');
|
|
4
4
|
var chunkKPBZKHCS_cjs = require('./chunk-KPBZKHCS.cjs');
|
|
5
5
|
var chunkFJB3243S_cjs = require('./chunk-FJB3243S.cjs');
|
|
6
6
|
var chunkHSDMJUB6_cjs = require('./chunk-HSDMJUB6.cjs');
|
|
@@ -503,7 +503,7 @@ var TableInner = ({
|
|
|
503
503
|
}
|
|
504
504
|
),
|
|
505
505
|
pagEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-pagination", children: /* @__PURE__ */ jsxRuntime.jsx(chunkV6BLBIY6_cjs.InternalComponentThemePart, { components: "Pagination", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
506
|
-
|
|
506
|
+
chunkQZ2AAQBX_cjs.Pagination,
|
|
507
507
|
{
|
|
508
508
|
total: totalCount,
|
|
509
509
|
pageSize: curPageSize,
|