@yamada-ui/autocomplete 2.0.0-next-20240613232518 → 2.0.0-next-20240615222442
Sign up to get free protection for your applications and to get access to all the features.
- 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) => {
|