@yamada-ui/autocomplete 2.0.0-next-20240613232518 → 2.0.0-next-20240615222442
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/autocomplete-create.mjs +1 -1
- package/dist/autocomplete-empty.mjs +1 -1
- package/dist/autocomplete-icon.mjs +1 -1
- package/dist/autocomplete-list.js +4 -8
- package/dist/autocomplete-list.js.map +1 -1
- package/dist/autocomplete-list.mjs +1 -1
- package/dist/autocomplete-option-group.mjs +1 -1
- package/dist/autocomplete-option.js +6 -12
- package/dist/autocomplete-option.js.map +1 -1
- package/dist/autocomplete-option.mjs +1 -1
- package/dist/autocomplete.js +49 -98
- package/dist/autocomplete.js.map +1 -1
- package/dist/autocomplete.mjs +1 -1
- package/dist/{chunk-QF2QXXQH.mjs → chunk-W7B7WEFQ.mjs} +52 -103
- package/dist/{chunk-QF2QXXQH.mjs.map → chunk-W7B7WEFQ.mjs.map} +1 -1
- package/dist/index.js +51 -102
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/multi-autocomplete.js +51 -102
- package/dist/multi-autocomplete.js.map +1 -1
- package/dist/multi-autocomplete.mjs +1 -1
- package/dist/use-autocomplete.js +49 -98
- package/dist/use-autocomplete.js.map +1 -1
- package/dist/use-autocomplete.mjs +1 -1
- package/package.json +13 -13
package/dist/index.js
CHANGED
|
@@ -160,8 +160,7 @@ var flattenItems = (items) => {
|
|
|
160
160
|
var _a;
|
|
161
161
|
const { isDisabled, isFocusable } = item;
|
|
162
162
|
const trulyDisabled = !!isDisabled && !isFocusable;
|
|
163
|
-
if (trulyDisabled)
|
|
164
|
-
return;
|
|
163
|
+
if (trulyDisabled) return;
|
|
165
164
|
if ("items" in item) {
|
|
166
165
|
return filterItems((_a = item.items) != null ? _a : []);
|
|
167
166
|
} else {
|
|
@@ -296,23 +295,18 @@ var useAutocomplete = ({
|
|
|
296
295
|
});
|
|
297
296
|
const isEmpty = !validChildren.length && !(computedChildren == null ? void 0 : computedChildren.length);
|
|
298
297
|
const onOpen = (0, import_react.useCallback)(() => {
|
|
299
|
-
if (formControlProps.disabled || formControlProps.readOnly)
|
|
300
|
-
|
|
301
|
-
if (!allowCreate && (isEmpty || isAllSelected))
|
|
302
|
-
return;
|
|
298
|
+
if (formControlProps.disabled || formControlProps.readOnly) return;
|
|
299
|
+
if (!allowCreate && (isEmpty || isAllSelected)) return;
|
|
303
300
|
onInternalOpen();
|
|
304
|
-
if (inputRef.current)
|
|
305
|
-
inputRef.current.focus();
|
|
301
|
+
if (inputRef.current) inputRef.current.focus();
|
|
306
302
|
}, [allowCreate, formControlProps, isAllSelected, isEmpty, onInternalOpen]);
|
|
307
303
|
const onFocusFirst = (0, import_react.useCallback)(() => {
|
|
308
304
|
const id2 = setTimeout(() => {
|
|
309
|
-
if (isEmpty || isAllSelected)
|
|
310
|
-
return;
|
|
305
|
+
if (isEmpty || isAllSelected) return;
|
|
311
306
|
const first = descendants.enabledFirstValue(
|
|
312
307
|
({ node }) => "target" in node.dataset
|
|
313
308
|
);
|
|
314
|
-
if (!first)
|
|
315
|
-
return;
|
|
309
|
+
if (!first) return;
|
|
316
310
|
if (!isMulti || !omitSelectedValues) {
|
|
317
311
|
setFocusedIndex(first.index);
|
|
318
312
|
} else {
|
|
@@ -336,13 +330,11 @@ var useAutocomplete = ({
|
|
|
336
330
|
]);
|
|
337
331
|
const onFocusLast = (0, import_react.useCallback)(() => {
|
|
338
332
|
const id2 = setTimeout(() => {
|
|
339
|
-
if (isEmpty || isAllSelected)
|
|
340
|
-
return;
|
|
333
|
+
if (isEmpty || isAllSelected) return;
|
|
341
334
|
const last = descendants.enabledLastValue(
|
|
342
335
|
({ node }) => "target" in node.dataset
|
|
343
336
|
);
|
|
344
|
-
if (!last)
|
|
345
|
-
return;
|
|
337
|
+
if (!last) return;
|
|
346
338
|
if (!isMulti || !omitSelectedValues) {
|
|
347
339
|
setFocusedIndex(last.index);
|
|
348
340
|
} else {
|
|
@@ -373,8 +365,7 @@ var useAutocomplete = ({
|
|
|
373
365
|
return !isMulti ? node.dataset.value === value : value.includes((_a = node.dataset.value) != null ? _a : "");
|
|
374
366
|
}
|
|
375
367
|
);
|
|
376
|
-
if (selected)
|
|
377
|
-
setFocusedIndex(selected.index);
|
|
368
|
+
if (selected) setFocusedIndex(selected.index);
|
|
378
369
|
});
|
|
379
370
|
timeoutIds.current.add(id2);
|
|
380
371
|
}, [descendants, isMulti, value]);
|
|
@@ -386,8 +377,7 @@ var useAutocomplete = ({
|
|
|
386
377
|
index,
|
|
387
378
|
({ node }) => "target" in node.dataset
|
|
388
379
|
);
|
|
389
|
-
if (!next)
|
|
390
|
-
return;
|
|
380
|
+
if (!next) return;
|
|
391
381
|
if (!isMulti || !omitSelectedValues) {
|
|
392
382
|
setFocusedIndex(next.index);
|
|
393
383
|
} else {
|
|
@@ -418,8 +408,7 @@ var useAutocomplete = ({
|
|
|
418
408
|
index,
|
|
419
409
|
({ node }) => "target" in node.dataset
|
|
420
410
|
);
|
|
421
|
-
if (!prev)
|
|
422
|
-
return;
|
|
411
|
+
if (!prev) return;
|
|
423
412
|
if (!isMulti || !omitSelectedValues) {
|
|
424
413
|
setFocusedIndex(prev.index);
|
|
425
414
|
} else {
|
|
@@ -473,8 +462,7 @@ var useAutocomplete = ({
|
|
|
473
462
|
values.forEach(({ node }) => {
|
|
474
463
|
node.dataset.target = "";
|
|
475
464
|
});
|
|
476
|
-
if (runFocus)
|
|
477
|
-
onFocusFirst();
|
|
465
|
+
if (runFocus) onFocusFirst();
|
|
478
466
|
setIsHit(true);
|
|
479
467
|
},
|
|
480
468
|
[descendants, onFocusFirst]
|
|
@@ -544,10 +532,8 @@ var useAutocomplete = ({
|
|
|
544
532
|
}
|
|
545
533
|
).length > 0;
|
|
546
534
|
onChangeLabel(newValue);
|
|
547
|
-
if (allowFree || isHit2)
|
|
548
|
-
|
|
549
|
-
if (isMulti && runRebirth)
|
|
550
|
-
rebirthOptions(false);
|
|
535
|
+
if (allowFree || isHit2) setInputValue("");
|
|
536
|
+
if (isMulti && runRebirth) rebirthOptions(false);
|
|
551
537
|
},
|
|
552
538
|
[
|
|
553
539
|
allowFree,
|
|
@@ -564,14 +550,11 @@ var useAutocomplete = ({
|
|
|
564
550
|
let enabledValue = descendants.value(focusedIndex);
|
|
565
551
|
if ("disabled" in ((_a = enabledValue == null ? void 0 : enabledValue.node.dataset) != null ? _a : {}))
|
|
566
552
|
enabledValue = void 0;
|
|
567
|
-
if (!enabledValue)
|
|
568
|
-
return;
|
|
553
|
+
if (!enabledValue) return;
|
|
569
554
|
const value2 = (_b = enabledValue.node.dataset.value) != null ? _b : "";
|
|
570
555
|
onChange(value2);
|
|
571
|
-
if (closeOnSelect)
|
|
572
|
-
|
|
573
|
-
if (omitSelectedValues)
|
|
574
|
-
onFocusNext();
|
|
556
|
+
if (closeOnSelect) onClose();
|
|
557
|
+
if (omitSelectedValues) onFocusNext();
|
|
575
558
|
}, [
|
|
576
559
|
closeOnSelect,
|
|
577
560
|
descendants,
|
|
@@ -583,8 +566,7 @@ var useAutocomplete = ({
|
|
|
583
566
|
]);
|
|
584
567
|
const onSearch = (0, import_react.useCallback)(
|
|
585
568
|
(ev) => {
|
|
586
|
-
if (!isOpen)
|
|
587
|
-
onOpen();
|
|
569
|
+
if (!isOpen) onOpen();
|
|
588
570
|
onSearchProp == null ? void 0 : onSearchProp(ev);
|
|
589
571
|
const value2 = ev.target.value;
|
|
590
572
|
const computedValue = format(value2);
|
|
@@ -605,12 +587,10 @@ var useAutocomplete = ({
|
|
|
605
587
|
}, []);
|
|
606
588
|
const onCreate = (0, import_react.useCallback)(() => {
|
|
607
589
|
var _a, _b;
|
|
608
|
-
if (!listRef.current)
|
|
609
|
-
return;
|
|
590
|
+
if (!listRef.current) return;
|
|
610
591
|
const newItem = { label: inputValue, value: inputValue };
|
|
611
592
|
let newItems = [];
|
|
612
|
-
if (resolvedItems)
|
|
613
|
-
newItems = resolvedItems;
|
|
593
|
+
if (resolvedItems) newItems = resolvedItems;
|
|
614
594
|
if (firstInsertPositionItem === "first") {
|
|
615
595
|
newItems = [newItem, ...newItems];
|
|
616
596
|
} else if (firstInsertPositionItem === "last") {
|
|
@@ -653,31 +633,25 @@ var useAutocomplete = ({
|
|
|
653
633
|
]);
|
|
654
634
|
const onClick = (0, import_react.useCallback)(() => {
|
|
655
635
|
if (isOpen) {
|
|
656
|
-
if (inputRef.current)
|
|
657
|
-
inputRef.current.focus();
|
|
636
|
+
if (inputRef.current) inputRef.current.focus();
|
|
658
637
|
} else {
|
|
659
638
|
onOpen();
|
|
660
639
|
onFocusFirstOrSelected();
|
|
661
640
|
}
|
|
662
641
|
}, [isOpen, onFocusFirstOrSelected, onOpen]);
|
|
663
642
|
const onFocus = (0, import_react.useCallback)(() => {
|
|
664
|
-
if (isOpen)
|
|
665
|
-
return;
|
|
643
|
+
if (isOpen) return;
|
|
666
644
|
onOpen();
|
|
667
645
|
onFocusFirstOrSelected();
|
|
668
646
|
}, [isOpen, onFocusFirstOrSelected, onOpen]);
|
|
669
647
|
const onBlur = (0, import_react.useCallback)(
|
|
670
648
|
(ev) => {
|
|
671
649
|
const relatedTarget = (0, import_utils.getEventRelatedTarget)(ev);
|
|
672
|
-
if ((0, import_utils.isContains)(containerRef.current, relatedTarget))
|
|
673
|
-
|
|
674
|
-
if (
|
|
675
|
-
return;
|
|
676
|
-
if (allowFree && !!inputValue)
|
|
677
|
-
onChange(inputValue, false);
|
|
650
|
+
if ((0, import_utils.isContains)(containerRef.current, relatedTarget)) return;
|
|
651
|
+
if (!closeOnBlur && isHit) return;
|
|
652
|
+
if (allowFree && !!inputValue) onChange(inputValue, false);
|
|
678
653
|
setInputValue("");
|
|
679
|
-
if (isOpen)
|
|
680
|
-
onClose();
|
|
654
|
+
if (isOpen) onClose();
|
|
681
655
|
},
|
|
682
656
|
[closeOnBlur, isHit, isOpen, inputValue, allowFree, onClose, onChange]
|
|
683
657
|
);
|
|
@@ -687,8 +661,7 @@ var useAutocomplete = ({
|
|
|
687
661
|
} else {
|
|
688
662
|
onChange(value[value.length - 1]);
|
|
689
663
|
}
|
|
690
|
-
if (!isOpen)
|
|
691
|
-
onFocus();
|
|
664
|
+
if (!isOpen) onFocus();
|
|
692
665
|
}, [isMulti, isOpen, onChange, onFocus, value]);
|
|
693
666
|
const onClear = (0, import_react.useCallback)(
|
|
694
667
|
(ev) => {
|
|
@@ -698,27 +671,22 @@ var useAutocomplete = ({
|
|
|
698
671
|
setLabel(void 0);
|
|
699
672
|
setInputValue("");
|
|
700
673
|
rebirthOptions();
|
|
701
|
-
if (isOpen && inputRef.current)
|
|
702
|
-
inputRef.current.focus();
|
|
674
|
+
if (isOpen && inputRef.current) inputRef.current.focus();
|
|
703
675
|
},
|
|
704
676
|
[isOpen, setLabel, setInputValue, setValue, rebirthOptions]
|
|
705
677
|
);
|
|
706
678
|
const onKeyDown = (0, import_react.useCallback)(
|
|
707
679
|
(ev) => {
|
|
708
|
-
if (ev.key === " ")
|
|
709
|
-
|
|
710
|
-
if (
|
|
711
|
-
return;
|
|
712
|
-
if (isComposition.current)
|
|
713
|
-
return;
|
|
680
|
+
if (ev.key === " ") ev.key = ev.code;
|
|
681
|
+
if (formControlProps.disabled || formControlProps.readOnly) return;
|
|
682
|
+
if (isComposition.current) return;
|
|
714
683
|
const enabledDelete = label === inputValue || !inputValue.length;
|
|
715
684
|
const actions = {
|
|
716
685
|
ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
|
|
717
686
|
ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
|
|
718
687
|
Space: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
|
|
719
688
|
Enter: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusFirstOrSelected) : allowFree && isMulti ? () => {
|
|
720
|
-
if (inputValue)
|
|
721
|
-
onChange(inputValue);
|
|
689
|
+
if (inputValue) onChange(inputValue);
|
|
722
690
|
setFocusedIndex(0);
|
|
723
691
|
} : void 0,
|
|
724
692
|
Home: isOpen ? onFocusFirst : void 0,
|
|
@@ -727,8 +695,7 @@ var useAutocomplete = ({
|
|
|
727
695
|
Backspace: !isEmptyValue && enabledDelete ? onDelete : void 0
|
|
728
696
|
};
|
|
729
697
|
const action = actions[ev.key];
|
|
730
|
-
if (!action)
|
|
731
|
-
return;
|
|
698
|
+
if (!action) return;
|
|
732
699
|
ev.preventDefault();
|
|
733
700
|
ev.stopPropagation();
|
|
734
701
|
action(ev);
|
|
@@ -759,10 +726,8 @@ var useAutocomplete = ({
|
|
|
759
726
|
]
|
|
760
727
|
);
|
|
761
728
|
(0, import_react.useEffect)(() => {
|
|
762
|
-
if (!isMulti)
|
|
763
|
-
|
|
764
|
-
if (!omitSelectedValues && (0, import_utils.isUndefined)(maxSelectValues))
|
|
765
|
-
return;
|
|
729
|
+
if (!isMulti) return;
|
|
730
|
+
if (!omitSelectedValues && (0, import_utils.isUndefined)(maxSelectValues)) return;
|
|
766
731
|
const isAll = value.length > 0 && value.length === descendants.count();
|
|
767
732
|
const isMax = value.length === maxSelectValues;
|
|
768
733
|
if (isAll || isMax) {
|
|
@@ -787,20 +752,17 @@ var useAutocomplete = ({
|
|
|
787
752
|
const label2 = getSelectedValues(value);
|
|
788
753
|
setLabel(label2);
|
|
789
754
|
} else {
|
|
790
|
-
if (prevValue.current === value)
|
|
791
|
-
return;
|
|
755
|
+
if (prevValue.current === value) return;
|
|
792
756
|
onChangeLabel(value, false);
|
|
793
757
|
}
|
|
794
758
|
}, [isMulti, value, onChangeLabel, getSelectedValues]);
|
|
795
759
|
(0, import_utils.useUpdateEffect)(() => {
|
|
796
|
-
if (isOpen || allowFree)
|
|
797
|
-
return;
|
|
760
|
+
if (isOpen || allowFree) return;
|
|
798
761
|
setFocusedIndex(-1);
|
|
799
762
|
setInputValue("");
|
|
800
763
|
}, [isOpen]);
|
|
801
764
|
(0, import_utils.useUpdateEffect)(() => {
|
|
802
|
-
if (!isHit)
|
|
803
|
-
setFocusedIndex(-2);
|
|
765
|
+
if (!isHit) setFocusedIndex(-2);
|
|
804
766
|
}, [isHit]);
|
|
805
767
|
(0, import_utils.useUnmountEffect)(() => {
|
|
806
768
|
timeoutIds.current.forEach((id2) => clearTimeout(id2));
|
|
@@ -909,8 +871,7 @@ var useAutocompleteInput = () => {
|
|
|
909
871
|
isOpen
|
|
910
872
|
} = useAutocompleteContext();
|
|
911
873
|
(0, import_utils.useUpdateEffect)(() => {
|
|
912
|
-
if (isAllSelected && inputRef.current)
|
|
913
|
-
inputRef.current.blur();
|
|
874
|
+
if (isAllSelected && inputRef.current) inputRef.current.blur();
|
|
914
875
|
}, [isAllSelected]);
|
|
915
876
|
const getInputProps = (0, import_react.useCallback)(
|
|
916
877
|
(props = {}, ref = null) => ({
|
|
@@ -963,14 +924,11 @@ var useAutocompleteList = () => {
|
|
|
963
924
|
const beforeFocusedIndex = (0, import_react.useRef)(-1);
|
|
964
925
|
const selectedValue = descendants.value(focusedIndex);
|
|
965
926
|
const onAnimationComplete = (0, import_react.useCallback)(() => {
|
|
966
|
-
if (!isOpen)
|
|
967
|
-
rebirthOptions(false);
|
|
927
|
+
if (!isOpen) rebirthOptions(false);
|
|
968
928
|
}, [isOpen, rebirthOptions]);
|
|
969
929
|
(0, import_react.useEffect)(() => {
|
|
970
|
-
if (!listRef.current || !selectedValue)
|
|
971
|
-
|
|
972
|
-
if (beforeFocusedIndex.current === selectedValue.index)
|
|
973
|
-
return;
|
|
930
|
+
if (!listRef.current || !selectedValue) return;
|
|
931
|
+
if (beforeFocusedIndex.current === selectedValue.index) return;
|
|
974
932
|
const parent = listRef.current;
|
|
975
933
|
const child = selectedValue.node;
|
|
976
934
|
const parentHeight = parent.clientHeight;
|
|
@@ -995,8 +953,7 @@ var useAutocompleteList = () => {
|
|
|
995
953
|
beforeFocusedIndex.current = selectedValue.index;
|
|
996
954
|
}, [listRef, selectedValue]);
|
|
997
955
|
(0, import_utils.useUpdateEffect)(() => {
|
|
998
|
-
if (!isOpen)
|
|
999
|
-
beforeFocusedIndex.current = -1;
|
|
956
|
+
if (!isOpen) beforeFocusedIndex.current = -1;
|
|
1000
957
|
}, [isOpen]);
|
|
1001
958
|
const getListProps = (0, import_react.useCallback)(
|
|
1002
959
|
(props = {}, ref = null) => ({
|
|
@@ -1119,23 +1076,18 @@ var useAutocompleteOption = (props) => {
|
|
|
1119
1076
|
(ev) => {
|
|
1120
1077
|
ev.stopPropagation();
|
|
1121
1078
|
if (isDisabled) {
|
|
1122
|
-
if (inputRef.current)
|
|
1123
|
-
inputRef.current.focus();
|
|
1079
|
+
if (inputRef.current) inputRef.current.focus();
|
|
1124
1080
|
return;
|
|
1125
1081
|
}
|
|
1126
1082
|
if (!isTargetOption(ev.currentTarget)) {
|
|
1127
|
-
if (inputRef.current)
|
|
1128
|
-
inputRef.current.focus();
|
|
1083
|
+
if (inputRef.current) inputRef.current.focus();
|
|
1129
1084
|
return;
|
|
1130
1085
|
}
|
|
1131
1086
|
setFocusedIndex(index);
|
|
1132
1087
|
onChange(optionValue != null ? optionValue : "");
|
|
1133
|
-
if (inputRef.current)
|
|
1134
|
-
|
|
1135
|
-
if (
|
|
1136
|
-
onClose();
|
|
1137
|
-
if (omitSelectedValues)
|
|
1138
|
-
onFocusNext(index);
|
|
1088
|
+
if (inputRef.current) inputRef.current.focus();
|
|
1089
|
+
if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect) onClose();
|
|
1090
|
+
if (omitSelectedValues) onFocusNext(index);
|
|
1139
1091
|
},
|
|
1140
1092
|
[
|
|
1141
1093
|
onFocusNext,
|
|
@@ -1152,8 +1104,7 @@ var useAutocompleteOption = (props) => {
|
|
|
1152
1104
|
]
|
|
1153
1105
|
);
|
|
1154
1106
|
(0, import_utils.useUpdateEffect)(() => {
|
|
1155
|
-
if (isSelected)
|
|
1156
|
-
onChangeLabel(optionValue != null ? optionValue : "", false);
|
|
1107
|
+
if (isSelected) onChangeLabel(optionValue != null ? optionValue : "", false);
|
|
1157
1108
|
}, [optionValue]);
|
|
1158
1109
|
const getOptionProps = (0, import_react.useCallback)(
|
|
1159
1110
|
(props2 = {}, ref = null) => {
|
|
@@ -1760,15 +1711,13 @@ var MultiAutocompleteField = (0, import_core9.forwardRef)(
|
|
|
1760
1711
|
const { value, label, inputValue, onChange, isOpen, inputRef, styles } = useAutocompleteContext();
|
|
1761
1712
|
const { getInputProps } = useAutocompleteInput();
|
|
1762
1713
|
const cloneChildren = (0, import_react3.useMemo)(() => {
|
|
1763
|
-
if (!(label == null ? void 0 : label.length))
|
|
1764
|
-
return null;
|
|
1714
|
+
if (!(label == null ? void 0 : label.length)) return null;
|
|
1765
1715
|
if (component) {
|
|
1766
1716
|
return label.map((label2, index) => {
|
|
1767
1717
|
const onRemove = (ev) => {
|
|
1768
1718
|
ev.stopPropagation();
|
|
1769
1719
|
onChange(value[index]);
|
|
1770
|
-
if (inputRef.current)
|
|
1771
|
-
inputRef.current.focus();
|
|
1720
|
+
if (inputRef.current) inputRef.current.focus();
|
|
1772
1721
|
};
|
|
1773
1722
|
const el = component({
|
|
1774
1723
|
value: value[index],
|