@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/use-autocomplete.js
CHANGED
|
@@ -287,8 +287,7 @@ var flattenItems = (items) => {
|
|
|
287
287
|
var _a;
|
|
288
288
|
const { isDisabled, isFocusable } = item;
|
|
289
289
|
const trulyDisabled = !!isDisabled && !isFocusable;
|
|
290
|
-
if (trulyDisabled)
|
|
291
|
-
return;
|
|
290
|
+
if (trulyDisabled) return;
|
|
292
291
|
if ("items" in item) {
|
|
293
292
|
return filterItems((_a = item.items) != null ? _a : []);
|
|
294
293
|
} else {
|
|
@@ -423,23 +422,18 @@ var useAutocomplete = ({
|
|
|
423
422
|
});
|
|
424
423
|
const isEmpty = !validChildren.length && !(computedChildren == null ? void 0 : computedChildren.length);
|
|
425
424
|
const onOpen = (0, import_react2.useCallback)(() => {
|
|
426
|
-
if (formControlProps.disabled || formControlProps.readOnly)
|
|
427
|
-
|
|
428
|
-
if (!allowCreate && (isEmpty || isAllSelected))
|
|
429
|
-
return;
|
|
425
|
+
if (formControlProps.disabled || formControlProps.readOnly) return;
|
|
426
|
+
if (!allowCreate && (isEmpty || isAllSelected)) return;
|
|
430
427
|
onInternalOpen();
|
|
431
|
-
if (inputRef.current)
|
|
432
|
-
inputRef.current.focus();
|
|
428
|
+
if (inputRef.current) inputRef.current.focus();
|
|
433
429
|
}, [allowCreate, formControlProps, isAllSelected, isEmpty, onInternalOpen]);
|
|
434
430
|
const onFocusFirst = (0, import_react2.useCallback)(() => {
|
|
435
431
|
const id2 = setTimeout(() => {
|
|
436
|
-
if (isEmpty || isAllSelected)
|
|
437
|
-
return;
|
|
432
|
+
if (isEmpty || isAllSelected) return;
|
|
438
433
|
const first = descendants.enabledFirstValue(
|
|
439
434
|
({ node }) => "target" in node.dataset
|
|
440
435
|
);
|
|
441
|
-
if (!first)
|
|
442
|
-
return;
|
|
436
|
+
if (!first) return;
|
|
443
437
|
if (!isMulti || !omitSelectedValues) {
|
|
444
438
|
setFocusedIndex(first.index);
|
|
445
439
|
} else {
|
|
@@ -463,13 +457,11 @@ var useAutocomplete = ({
|
|
|
463
457
|
]);
|
|
464
458
|
const onFocusLast = (0, import_react2.useCallback)(() => {
|
|
465
459
|
const id2 = setTimeout(() => {
|
|
466
|
-
if (isEmpty || isAllSelected)
|
|
467
|
-
return;
|
|
460
|
+
if (isEmpty || isAllSelected) return;
|
|
468
461
|
const last = descendants.enabledLastValue(
|
|
469
462
|
({ node }) => "target" in node.dataset
|
|
470
463
|
);
|
|
471
|
-
if (!last)
|
|
472
|
-
return;
|
|
464
|
+
if (!last) return;
|
|
473
465
|
if (!isMulti || !omitSelectedValues) {
|
|
474
466
|
setFocusedIndex(last.index);
|
|
475
467
|
} else {
|
|
@@ -500,8 +492,7 @@ var useAutocomplete = ({
|
|
|
500
492
|
return !isMulti ? node.dataset.value === value : value.includes((_a = node.dataset.value) != null ? _a : "");
|
|
501
493
|
}
|
|
502
494
|
);
|
|
503
|
-
if (selected)
|
|
504
|
-
setFocusedIndex(selected.index);
|
|
495
|
+
if (selected) setFocusedIndex(selected.index);
|
|
505
496
|
});
|
|
506
497
|
timeoutIds.current.add(id2);
|
|
507
498
|
}, [descendants, isMulti, value]);
|
|
@@ -513,8 +504,7 @@ var useAutocomplete = ({
|
|
|
513
504
|
index,
|
|
514
505
|
({ node }) => "target" in node.dataset
|
|
515
506
|
);
|
|
516
|
-
if (!next)
|
|
517
|
-
return;
|
|
507
|
+
if (!next) return;
|
|
518
508
|
if (!isMulti || !omitSelectedValues) {
|
|
519
509
|
setFocusedIndex(next.index);
|
|
520
510
|
} else {
|
|
@@ -545,8 +535,7 @@ var useAutocomplete = ({
|
|
|
545
535
|
index,
|
|
546
536
|
({ node }) => "target" in node.dataset
|
|
547
537
|
);
|
|
548
|
-
if (!prev)
|
|
549
|
-
return;
|
|
538
|
+
if (!prev) return;
|
|
550
539
|
if (!isMulti || !omitSelectedValues) {
|
|
551
540
|
setFocusedIndex(prev.index);
|
|
552
541
|
} else {
|
|
@@ -600,8 +589,7 @@ var useAutocomplete = ({
|
|
|
600
589
|
values.forEach(({ node }) => {
|
|
601
590
|
node.dataset.target = "";
|
|
602
591
|
});
|
|
603
|
-
if (runFocus)
|
|
604
|
-
onFocusFirst();
|
|
592
|
+
if (runFocus) onFocusFirst();
|
|
605
593
|
setIsHit(true);
|
|
606
594
|
},
|
|
607
595
|
[descendants, onFocusFirst]
|
|
@@ -671,10 +659,8 @@ var useAutocomplete = ({
|
|
|
671
659
|
}
|
|
672
660
|
).length > 0;
|
|
673
661
|
onChangeLabel(newValue);
|
|
674
|
-
if (allowFree || isHit2)
|
|
675
|
-
|
|
676
|
-
if (isMulti && runRebirth)
|
|
677
|
-
rebirthOptions(false);
|
|
662
|
+
if (allowFree || isHit2) setInputValue("");
|
|
663
|
+
if (isMulti && runRebirth) rebirthOptions(false);
|
|
678
664
|
},
|
|
679
665
|
[
|
|
680
666
|
allowFree,
|
|
@@ -691,14 +677,11 @@ var useAutocomplete = ({
|
|
|
691
677
|
let enabledValue = descendants.value(focusedIndex);
|
|
692
678
|
if ("disabled" in ((_a = enabledValue == null ? void 0 : enabledValue.node.dataset) != null ? _a : {}))
|
|
693
679
|
enabledValue = void 0;
|
|
694
|
-
if (!enabledValue)
|
|
695
|
-
return;
|
|
680
|
+
if (!enabledValue) return;
|
|
696
681
|
const value2 = (_b = enabledValue.node.dataset.value) != null ? _b : "";
|
|
697
682
|
onChange(value2);
|
|
698
|
-
if (closeOnSelect)
|
|
699
|
-
|
|
700
|
-
if (omitSelectedValues)
|
|
701
|
-
onFocusNext();
|
|
683
|
+
if (closeOnSelect) onClose();
|
|
684
|
+
if (omitSelectedValues) onFocusNext();
|
|
702
685
|
}, [
|
|
703
686
|
closeOnSelect,
|
|
704
687
|
descendants,
|
|
@@ -710,8 +693,7 @@ var useAutocomplete = ({
|
|
|
710
693
|
]);
|
|
711
694
|
const onSearch = (0, import_react2.useCallback)(
|
|
712
695
|
(ev) => {
|
|
713
|
-
if (!isOpen)
|
|
714
|
-
onOpen();
|
|
696
|
+
if (!isOpen) onOpen();
|
|
715
697
|
onSearchProp == null ? void 0 : onSearchProp(ev);
|
|
716
698
|
const value2 = ev.target.value;
|
|
717
699
|
const computedValue = format(value2);
|
|
@@ -732,12 +714,10 @@ var useAutocomplete = ({
|
|
|
732
714
|
}, []);
|
|
733
715
|
const onCreate = (0, import_react2.useCallback)(() => {
|
|
734
716
|
var _a, _b;
|
|
735
|
-
if (!listRef.current)
|
|
736
|
-
return;
|
|
717
|
+
if (!listRef.current) return;
|
|
737
718
|
const newItem = { label: inputValue, value: inputValue };
|
|
738
719
|
let newItems = [];
|
|
739
|
-
if (resolvedItems)
|
|
740
|
-
newItems = resolvedItems;
|
|
720
|
+
if (resolvedItems) newItems = resolvedItems;
|
|
741
721
|
if (firstInsertPositionItem === "first") {
|
|
742
722
|
newItems = [newItem, ...newItems];
|
|
743
723
|
} else if (firstInsertPositionItem === "last") {
|
|
@@ -780,31 +760,25 @@ var useAutocomplete = ({
|
|
|
780
760
|
]);
|
|
781
761
|
const onClick = (0, import_react2.useCallback)(() => {
|
|
782
762
|
if (isOpen) {
|
|
783
|
-
if (inputRef.current)
|
|
784
|
-
inputRef.current.focus();
|
|
763
|
+
if (inputRef.current) inputRef.current.focus();
|
|
785
764
|
} else {
|
|
786
765
|
onOpen();
|
|
787
766
|
onFocusFirstOrSelected();
|
|
788
767
|
}
|
|
789
768
|
}, [isOpen, onFocusFirstOrSelected, onOpen]);
|
|
790
769
|
const onFocus = (0, import_react2.useCallback)(() => {
|
|
791
|
-
if (isOpen)
|
|
792
|
-
return;
|
|
770
|
+
if (isOpen) return;
|
|
793
771
|
onOpen();
|
|
794
772
|
onFocusFirstOrSelected();
|
|
795
773
|
}, [isOpen, onFocusFirstOrSelected, onOpen]);
|
|
796
774
|
const onBlur = (0, import_react2.useCallback)(
|
|
797
775
|
(ev) => {
|
|
798
776
|
const relatedTarget = (0, import_utils4.getEventRelatedTarget)(ev);
|
|
799
|
-
if ((0, import_utils4.isContains)(containerRef.current, relatedTarget))
|
|
800
|
-
|
|
801
|
-
if (
|
|
802
|
-
return;
|
|
803
|
-
if (allowFree && !!inputValue)
|
|
804
|
-
onChange(inputValue, false);
|
|
777
|
+
if ((0, import_utils4.isContains)(containerRef.current, relatedTarget)) return;
|
|
778
|
+
if (!closeOnBlur && isHit) return;
|
|
779
|
+
if (allowFree && !!inputValue) onChange(inputValue, false);
|
|
805
780
|
setInputValue("");
|
|
806
|
-
if (isOpen)
|
|
807
|
-
onClose();
|
|
781
|
+
if (isOpen) onClose();
|
|
808
782
|
},
|
|
809
783
|
[closeOnBlur, isHit, isOpen, inputValue, allowFree, onClose, onChange]
|
|
810
784
|
);
|
|
@@ -814,8 +788,7 @@ var useAutocomplete = ({
|
|
|
814
788
|
} else {
|
|
815
789
|
onChange(value[value.length - 1]);
|
|
816
790
|
}
|
|
817
|
-
if (!isOpen)
|
|
818
|
-
onFocus();
|
|
791
|
+
if (!isOpen) onFocus();
|
|
819
792
|
}, [isMulti, isOpen, onChange, onFocus, value]);
|
|
820
793
|
const onClear = (0, import_react2.useCallback)(
|
|
821
794
|
(ev) => {
|
|
@@ -825,27 +798,22 @@ var useAutocomplete = ({
|
|
|
825
798
|
setLabel(void 0);
|
|
826
799
|
setInputValue("");
|
|
827
800
|
rebirthOptions();
|
|
828
|
-
if (isOpen && inputRef.current)
|
|
829
|
-
inputRef.current.focus();
|
|
801
|
+
if (isOpen && inputRef.current) inputRef.current.focus();
|
|
830
802
|
},
|
|
831
803
|
[isOpen, setLabel, setInputValue, setValue, rebirthOptions]
|
|
832
804
|
);
|
|
833
805
|
const onKeyDown = (0, import_react2.useCallback)(
|
|
834
806
|
(ev) => {
|
|
835
|
-
if (ev.key === " ")
|
|
836
|
-
|
|
837
|
-
if (
|
|
838
|
-
return;
|
|
839
|
-
if (isComposition.current)
|
|
840
|
-
return;
|
|
807
|
+
if (ev.key === " ") ev.key = ev.code;
|
|
808
|
+
if (formControlProps.disabled || formControlProps.readOnly) return;
|
|
809
|
+
if (isComposition.current) return;
|
|
841
810
|
const enabledDelete = label === inputValue || !inputValue.length;
|
|
842
811
|
const actions = {
|
|
843
812
|
ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? (0, import_utils4.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
|
|
844
813
|
ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? (0, import_utils4.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
|
|
845
814
|
Space: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils4.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
|
|
846
815
|
Enter: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils4.funcAll)(onOpen, onFocusFirstOrSelected) : allowFree && isMulti ? () => {
|
|
847
|
-
if (inputValue)
|
|
848
|
-
onChange(inputValue);
|
|
816
|
+
if (inputValue) onChange(inputValue);
|
|
849
817
|
setFocusedIndex(0);
|
|
850
818
|
} : void 0,
|
|
851
819
|
Home: isOpen ? onFocusFirst : void 0,
|
|
@@ -854,8 +822,7 @@ var useAutocomplete = ({
|
|
|
854
822
|
Backspace: !isEmptyValue && enabledDelete ? onDelete : void 0
|
|
855
823
|
};
|
|
856
824
|
const action = actions[ev.key];
|
|
857
|
-
if (!action)
|
|
858
|
-
return;
|
|
825
|
+
if (!action) return;
|
|
859
826
|
ev.preventDefault();
|
|
860
827
|
ev.stopPropagation();
|
|
861
828
|
action(ev);
|
|
@@ -886,10 +853,8 @@ var useAutocomplete = ({
|
|
|
886
853
|
]
|
|
887
854
|
);
|
|
888
855
|
(0, import_react2.useEffect)(() => {
|
|
889
|
-
if (!isMulti)
|
|
890
|
-
|
|
891
|
-
if (!omitSelectedValues && (0, import_utils4.isUndefined)(maxSelectValues))
|
|
892
|
-
return;
|
|
856
|
+
if (!isMulti) return;
|
|
857
|
+
if (!omitSelectedValues && (0, import_utils4.isUndefined)(maxSelectValues)) return;
|
|
893
858
|
const isAll = value.length > 0 && value.length === descendants.count();
|
|
894
859
|
const isMax = value.length === maxSelectValues;
|
|
895
860
|
if (isAll || isMax) {
|
|
@@ -914,20 +879,17 @@ var useAutocomplete = ({
|
|
|
914
879
|
const label2 = getSelectedValues(value);
|
|
915
880
|
setLabel(label2);
|
|
916
881
|
} else {
|
|
917
|
-
if (prevValue.current === value)
|
|
918
|
-
return;
|
|
882
|
+
if (prevValue.current === value) return;
|
|
919
883
|
onChangeLabel(value, false);
|
|
920
884
|
}
|
|
921
885
|
}, [isMulti, value, onChangeLabel, getSelectedValues]);
|
|
922
886
|
(0, import_utils4.useUpdateEffect)(() => {
|
|
923
|
-
if (isOpen || allowFree)
|
|
924
|
-
return;
|
|
887
|
+
if (isOpen || allowFree) return;
|
|
925
888
|
setFocusedIndex(-1);
|
|
926
889
|
setInputValue("");
|
|
927
890
|
}, [isOpen]);
|
|
928
891
|
(0, import_utils4.useUpdateEffect)(() => {
|
|
929
|
-
if (!isHit)
|
|
930
|
-
setFocusedIndex(-2);
|
|
892
|
+
if (!isHit) setFocusedIndex(-2);
|
|
931
893
|
}, [isHit]);
|
|
932
894
|
(0, import_utils4.useUnmountEffect)(() => {
|
|
933
895
|
timeoutIds.current.forEach((id2) => clearTimeout(id2));
|
|
@@ -1036,8 +998,7 @@ var useAutocompleteInput = () => {
|
|
|
1036
998
|
isOpen
|
|
1037
999
|
} = useAutocompleteContext();
|
|
1038
1000
|
(0, import_utils4.useUpdateEffect)(() => {
|
|
1039
|
-
if (isAllSelected && inputRef.current)
|
|
1040
|
-
inputRef.current.blur();
|
|
1001
|
+
if (isAllSelected && inputRef.current) inputRef.current.blur();
|
|
1041
1002
|
}, [isAllSelected]);
|
|
1042
1003
|
const getInputProps = (0, import_react2.useCallback)(
|
|
1043
1004
|
(props = {}, ref = null) => ({
|
|
@@ -1090,14 +1051,11 @@ var useAutocompleteList = () => {
|
|
|
1090
1051
|
const beforeFocusedIndex = (0, import_react2.useRef)(-1);
|
|
1091
1052
|
const selectedValue = descendants.value(focusedIndex);
|
|
1092
1053
|
const onAnimationComplete = (0, import_react2.useCallback)(() => {
|
|
1093
|
-
if (!isOpen)
|
|
1094
|
-
rebirthOptions(false);
|
|
1054
|
+
if (!isOpen) rebirthOptions(false);
|
|
1095
1055
|
}, [isOpen, rebirthOptions]);
|
|
1096
1056
|
(0, import_react2.useEffect)(() => {
|
|
1097
|
-
if (!listRef.current || !selectedValue)
|
|
1098
|
-
|
|
1099
|
-
if (beforeFocusedIndex.current === selectedValue.index)
|
|
1100
|
-
return;
|
|
1057
|
+
if (!listRef.current || !selectedValue) return;
|
|
1058
|
+
if (beforeFocusedIndex.current === selectedValue.index) return;
|
|
1101
1059
|
const parent = listRef.current;
|
|
1102
1060
|
const child = selectedValue.node;
|
|
1103
1061
|
const parentHeight = parent.clientHeight;
|
|
@@ -1122,8 +1080,7 @@ var useAutocompleteList = () => {
|
|
|
1122
1080
|
beforeFocusedIndex.current = selectedValue.index;
|
|
1123
1081
|
}, [listRef, selectedValue]);
|
|
1124
1082
|
(0, import_utils4.useUpdateEffect)(() => {
|
|
1125
|
-
if (!isOpen)
|
|
1126
|
-
beforeFocusedIndex.current = -1;
|
|
1083
|
+
if (!isOpen) beforeFocusedIndex.current = -1;
|
|
1127
1084
|
}, [isOpen]);
|
|
1128
1085
|
const getListProps = (0, import_react2.useCallback)(
|
|
1129
1086
|
(props = {}, ref = null) => ({
|
|
@@ -1246,23 +1203,18 @@ var useAutocompleteOption = (props) => {
|
|
|
1246
1203
|
(ev) => {
|
|
1247
1204
|
ev.stopPropagation();
|
|
1248
1205
|
if (isDisabled) {
|
|
1249
|
-
if (inputRef.current)
|
|
1250
|
-
inputRef.current.focus();
|
|
1206
|
+
if (inputRef.current) inputRef.current.focus();
|
|
1251
1207
|
return;
|
|
1252
1208
|
}
|
|
1253
1209
|
if (!isTargetOption(ev.currentTarget)) {
|
|
1254
|
-
if (inputRef.current)
|
|
1255
|
-
inputRef.current.focus();
|
|
1210
|
+
if (inputRef.current) inputRef.current.focus();
|
|
1256
1211
|
return;
|
|
1257
1212
|
}
|
|
1258
1213
|
setFocusedIndex(index);
|
|
1259
1214
|
onChange(optionValue != null ? optionValue : "");
|
|
1260
|
-
if (inputRef.current)
|
|
1261
|
-
|
|
1262
|
-
if (
|
|
1263
|
-
onClose();
|
|
1264
|
-
if (omitSelectedValues)
|
|
1265
|
-
onFocusNext(index);
|
|
1215
|
+
if (inputRef.current) inputRef.current.focus();
|
|
1216
|
+
if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect) onClose();
|
|
1217
|
+
if (omitSelectedValues) onFocusNext(index);
|
|
1266
1218
|
},
|
|
1267
1219
|
[
|
|
1268
1220
|
onFocusNext,
|
|
@@ -1279,8 +1231,7 @@ var useAutocompleteOption = (props) => {
|
|
|
1279
1231
|
]
|
|
1280
1232
|
);
|
|
1281
1233
|
(0, import_utils4.useUpdateEffect)(() => {
|
|
1282
|
-
if (isSelected)
|
|
1283
|
-
onChangeLabel(optionValue != null ? optionValue : "", false);
|
|
1234
|
+
if (isSelected) onChangeLabel(optionValue != null ? optionValue : "", false);
|
|
1284
1235
|
}, [optionValue]);
|
|
1285
1236
|
const getOptionProps = (0, import_react2.useCallback)(
|
|
1286
1237
|
(props2 = {}, ref = null) => {
|