@yamada-ui/autocomplete 1.2.2 → 1.2.3-dev-20240614141936
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-ORNAXQ6Z.mjs → chunk-JRUGH6ID.mjs} +52 -103
- package/dist/{chunk-ORNAXQ6Z.mjs.map → chunk-JRUGH6ID.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 +6 -6
package/dist/use-autocomplete.js
CHANGED
|
@@ -310,8 +310,7 @@ var flattenItems = (items) => {
|
|
|
310
310
|
var _a;
|
|
311
311
|
const { isDisabled, isFocusable } = item;
|
|
312
312
|
const trulyDisabled = !!isDisabled && !isFocusable;
|
|
313
|
-
if (trulyDisabled)
|
|
314
|
-
return;
|
|
313
|
+
if (trulyDisabled) return;
|
|
315
314
|
if ("items" in item) {
|
|
316
315
|
return filterItems((_a = item.items) != null ? _a : []);
|
|
317
316
|
} else {
|
|
@@ -446,23 +445,18 @@ var useAutocomplete = ({
|
|
|
446
445
|
});
|
|
447
446
|
const isEmpty = !validChildren.length && !(computedChildren == null ? void 0 : computedChildren.length);
|
|
448
447
|
const onOpen = (0, import_react2.useCallback)(() => {
|
|
449
|
-
if (formControlProps.disabled || formControlProps.readOnly)
|
|
450
|
-
|
|
451
|
-
if (!allowCreate && (isEmpty || isAllSelected))
|
|
452
|
-
return;
|
|
448
|
+
if (formControlProps.disabled || formControlProps.readOnly) return;
|
|
449
|
+
if (!allowCreate && (isEmpty || isAllSelected)) return;
|
|
453
450
|
onInternalOpen();
|
|
454
|
-
if (inputRef.current)
|
|
455
|
-
inputRef.current.focus();
|
|
451
|
+
if (inputRef.current) inputRef.current.focus();
|
|
456
452
|
}, [allowCreate, formControlProps, isAllSelected, isEmpty, onInternalOpen]);
|
|
457
453
|
const onFocusFirst = (0, import_react2.useCallback)(() => {
|
|
458
454
|
const id2 = setTimeout(() => {
|
|
459
|
-
if (isEmpty || isAllSelected)
|
|
460
|
-
return;
|
|
455
|
+
if (isEmpty || isAllSelected) return;
|
|
461
456
|
const first = descendants.enabledFirstValue(
|
|
462
457
|
({ node }) => "target" in node.dataset
|
|
463
458
|
);
|
|
464
|
-
if (!first)
|
|
465
|
-
return;
|
|
459
|
+
if (!first) return;
|
|
466
460
|
if (!isMulti || !omitSelectedValues) {
|
|
467
461
|
setFocusedIndex(first.index);
|
|
468
462
|
} else {
|
|
@@ -486,13 +480,11 @@ var useAutocomplete = ({
|
|
|
486
480
|
]);
|
|
487
481
|
const onFocusLast = (0, import_react2.useCallback)(() => {
|
|
488
482
|
const id2 = setTimeout(() => {
|
|
489
|
-
if (isEmpty || isAllSelected)
|
|
490
|
-
return;
|
|
483
|
+
if (isEmpty || isAllSelected) return;
|
|
491
484
|
const last = descendants.enabledLastValue(
|
|
492
485
|
({ node }) => "target" in node.dataset
|
|
493
486
|
);
|
|
494
|
-
if (!last)
|
|
495
|
-
return;
|
|
487
|
+
if (!last) return;
|
|
496
488
|
if (!isMulti || !omitSelectedValues) {
|
|
497
489
|
setFocusedIndex(last.index);
|
|
498
490
|
} else {
|
|
@@ -523,8 +515,7 @@ var useAutocomplete = ({
|
|
|
523
515
|
return !isMulti ? node.dataset.value === value : value.includes((_a = node.dataset.value) != null ? _a : "");
|
|
524
516
|
}
|
|
525
517
|
);
|
|
526
|
-
if (selected)
|
|
527
|
-
setFocusedIndex(selected.index);
|
|
518
|
+
if (selected) setFocusedIndex(selected.index);
|
|
528
519
|
});
|
|
529
520
|
timeoutIds.current.add(id2);
|
|
530
521
|
}, [descendants, isMulti, value]);
|
|
@@ -536,8 +527,7 @@ var useAutocomplete = ({
|
|
|
536
527
|
index,
|
|
537
528
|
({ node }) => "target" in node.dataset
|
|
538
529
|
);
|
|
539
|
-
if (!next)
|
|
540
|
-
return;
|
|
530
|
+
if (!next) return;
|
|
541
531
|
if (!isMulti || !omitSelectedValues) {
|
|
542
532
|
setFocusedIndex(next.index);
|
|
543
533
|
} else {
|
|
@@ -568,8 +558,7 @@ var useAutocomplete = ({
|
|
|
568
558
|
index,
|
|
569
559
|
({ node }) => "target" in node.dataset
|
|
570
560
|
);
|
|
571
|
-
if (!prev)
|
|
572
|
-
return;
|
|
561
|
+
if (!prev) return;
|
|
573
562
|
if (!isMulti || !omitSelectedValues) {
|
|
574
563
|
setFocusedIndex(prev.index);
|
|
575
564
|
} else {
|
|
@@ -623,8 +612,7 @@ var useAutocomplete = ({
|
|
|
623
612
|
values.forEach(({ node }) => {
|
|
624
613
|
node.dataset.target = "";
|
|
625
614
|
});
|
|
626
|
-
if (runFocus)
|
|
627
|
-
onFocusFirst();
|
|
615
|
+
if (runFocus) onFocusFirst();
|
|
628
616
|
setIsHit(true);
|
|
629
617
|
},
|
|
630
618
|
[descendants, onFocusFirst]
|
|
@@ -694,10 +682,8 @@ var useAutocomplete = ({
|
|
|
694
682
|
}
|
|
695
683
|
).length > 0;
|
|
696
684
|
onChangeLabel(newValue);
|
|
697
|
-
if (allowFree || isHit2)
|
|
698
|
-
|
|
699
|
-
if (isMulti && runRebirth)
|
|
700
|
-
rebirthOptions(false);
|
|
685
|
+
if (allowFree || isHit2) setInputValue("");
|
|
686
|
+
if (isMulti && runRebirth) rebirthOptions(false);
|
|
701
687
|
},
|
|
702
688
|
[
|
|
703
689
|
allowFree,
|
|
@@ -714,14 +700,11 @@ var useAutocomplete = ({
|
|
|
714
700
|
let enabledValue = descendants.value(focusedIndex);
|
|
715
701
|
if ("disabled" in ((_a = enabledValue == null ? void 0 : enabledValue.node.dataset) != null ? _a : {}))
|
|
716
702
|
enabledValue = void 0;
|
|
717
|
-
if (!enabledValue)
|
|
718
|
-
return;
|
|
703
|
+
if (!enabledValue) return;
|
|
719
704
|
const value2 = (_b = enabledValue.node.dataset.value) != null ? _b : "";
|
|
720
705
|
onChange(value2);
|
|
721
|
-
if (closeOnSelect)
|
|
722
|
-
|
|
723
|
-
if (omitSelectedValues)
|
|
724
|
-
onFocusNext();
|
|
706
|
+
if (closeOnSelect) onClose();
|
|
707
|
+
if (omitSelectedValues) onFocusNext();
|
|
725
708
|
}, [
|
|
726
709
|
closeOnSelect,
|
|
727
710
|
descendants,
|
|
@@ -733,8 +716,7 @@ var useAutocomplete = ({
|
|
|
733
716
|
]);
|
|
734
717
|
const onSearch = (0, import_react2.useCallback)(
|
|
735
718
|
(ev) => {
|
|
736
|
-
if (!isOpen)
|
|
737
|
-
onOpen();
|
|
719
|
+
if (!isOpen) onOpen();
|
|
738
720
|
onSearchProp == null ? void 0 : onSearchProp(ev);
|
|
739
721
|
const value2 = ev.target.value;
|
|
740
722
|
const computedValue = format(value2);
|
|
@@ -755,12 +737,10 @@ var useAutocomplete = ({
|
|
|
755
737
|
}, []);
|
|
756
738
|
const onCreate = (0, import_react2.useCallback)(() => {
|
|
757
739
|
var _a, _b;
|
|
758
|
-
if (!listRef.current)
|
|
759
|
-
return;
|
|
740
|
+
if (!listRef.current) return;
|
|
760
741
|
const newItem = { label: inputValue, value: inputValue };
|
|
761
742
|
let newItems = [];
|
|
762
|
-
if (resolvedItems)
|
|
763
|
-
newItems = resolvedItems;
|
|
743
|
+
if (resolvedItems) newItems = resolvedItems;
|
|
764
744
|
if (firstInsertPositionItem === "first") {
|
|
765
745
|
newItems = [newItem, ...newItems];
|
|
766
746
|
} else if (firstInsertPositionItem === "last") {
|
|
@@ -803,31 +783,25 @@ var useAutocomplete = ({
|
|
|
803
783
|
]);
|
|
804
784
|
const onClick = (0, import_react2.useCallback)(() => {
|
|
805
785
|
if (isOpen) {
|
|
806
|
-
if (inputRef.current)
|
|
807
|
-
inputRef.current.focus();
|
|
786
|
+
if (inputRef.current) inputRef.current.focus();
|
|
808
787
|
} else {
|
|
809
788
|
onOpen();
|
|
810
789
|
onFocusFirstOrSelected();
|
|
811
790
|
}
|
|
812
791
|
}, [isOpen, onFocusFirstOrSelected, onOpen]);
|
|
813
792
|
const onFocus = (0, import_react2.useCallback)(() => {
|
|
814
|
-
if (isOpen)
|
|
815
|
-
return;
|
|
793
|
+
if (isOpen) return;
|
|
816
794
|
onOpen();
|
|
817
795
|
onFocusFirstOrSelected();
|
|
818
796
|
}, [isOpen, onFocusFirstOrSelected, onOpen]);
|
|
819
797
|
const onBlur = (0, import_react2.useCallback)(
|
|
820
798
|
(ev) => {
|
|
821
799
|
const relatedTarget = (0, import_utils4.getEventRelatedTarget)(ev);
|
|
822
|
-
if ((0, import_utils4.isContains)(containerRef.current, relatedTarget))
|
|
823
|
-
|
|
824
|
-
if (
|
|
825
|
-
return;
|
|
826
|
-
if (allowFree && !!inputValue)
|
|
827
|
-
onChange(inputValue, false);
|
|
800
|
+
if ((0, import_utils4.isContains)(containerRef.current, relatedTarget)) return;
|
|
801
|
+
if (!closeOnBlur && isHit) return;
|
|
802
|
+
if (allowFree && !!inputValue) onChange(inputValue, false);
|
|
828
803
|
setInputValue("");
|
|
829
|
-
if (isOpen)
|
|
830
|
-
onClose();
|
|
804
|
+
if (isOpen) onClose();
|
|
831
805
|
},
|
|
832
806
|
[closeOnBlur, isHit, isOpen, inputValue, allowFree, onClose, onChange]
|
|
833
807
|
);
|
|
@@ -837,8 +811,7 @@ var useAutocomplete = ({
|
|
|
837
811
|
} else {
|
|
838
812
|
onChange(value[value.length - 1]);
|
|
839
813
|
}
|
|
840
|
-
if (!isOpen)
|
|
841
|
-
onFocus();
|
|
814
|
+
if (!isOpen) onFocus();
|
|
842
815
|
}, [isMulti, isOpen, onChange, onFocus, value]);
|
|
843
816
|
const onClear = (0, import_react2.useCallback)(
|
|
844
817
|
(ev) => {
|
|
@@ -848,27 +821,22 @@ var useAutocomplete = ({
|
|
|
848
821
|
setLabel(void 0);
|
|
849
822
|
setInputValue("");
|
|
850
823
|
rebirthOptions();
|
|
851
|
-
if (isOpen && inputRef.current)
|
|
852
|
-
inputRef.current.focus();
|
|
824
|
+
if (isOpen && inputRef.current) inputRef.current.focus();
|
|
853
825
|
},
|
|
854
826
|
[isOpen, setLabel, setInputValue, setValue, rebirthOptions]
|
|
855
827
|
);
|
|
856
828
|
const onKeyDown = (0, import_react2.useCallback)(
|
|
857
829
|
(ev) => {
|
|
858
|
-
if (ev.key === " ")
|
|
859
|
-
|
|
860
|
-
if (
|
|
861
|
-
return;
|
|
862
|
-
if (isComposition.current)
|
|
863
|
-
return;
|
|
830
|
+
if (ev.key === " ") ev.key = ev.code;
|
|
831
|
+
if (formControlProps.disabled || formControlProps.readOnly) return;
|
|
832
|
+
if (isComposition.current) return;
|
|
864
833
|
const enabledDelete = label === inputValue || !inputValue.length;
|
|
865
834
|
const actions = {
|
|
866
835
|
ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? (0, import_utils4.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
|
|
867
836
|
ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? (0, import_utils4.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
|
|
868
837
|
Space: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils4.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
|
|
869
838
|
Enter: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils4.funcAll)(onOpen, onFocusFirstOrSelected) : allowFree && isMulti ? () => {
|
|
870
|
-
if (inputValue)
|
|
871
|
-
onChange(inputValue);
|
|
839
|
+
if (inputValue) onChange(inputValue);
|
|
872
840
|
setFocusedIndex(0);
|
|
873
841
|
} : void 0,
|
|
874
842
|
Home: isOpen ? onFocusFirst : void 0,
|
|
@@ -877,8 +845,7 @@ var useAutocomplete = ({
|
|
|
877
845
|
Backspace: !isEmptyValue && enabledDelete ? onDelete : void 0
|
|
878
846
|
};
|
|
879
847
|
const action = actions[ev.key];
|
|
880
|
-
if (!action)
|
|
881
|
-
return;
|
|
848
|
+
if (!action) return;
|
|
882
849
|
ev.preventDefault();
|
|
883
850
|
ev.stopPropagation();
|
|
884
851
|
action(ev);
|
|
@@ -909,10 +876,8 @@ var useAutocomplete = ({
|
|
|
909
876
|
]
|
|
910
877
|
);
|
|
911
878
|
(0, import_react2.useEffect)(() => {
|
|
912
|
-
if (!isMulti)
|
|
913
|
-
|
|
914
|
-
if (!omitSelectedValues && (0, import_utils4.isUndefined)(maxSelectValues))
|
|
915
|
-
return;
|
|
879
|
+
if (!isMulti) return;
|
|
880
|
+
if (!omitSelectedValues && (0, import_utils4.isUndefined)(maxSelectValues)) return;
|
|
916
881
|
const isAll = value.length > 0 && value.length === descendants.count();
|
|
917
882
|
const isMax = value.length === maxSelectValues;
|
|
918
883
|
if (isAll || isMax) {
|
|
@@ -937,20 +902,17 @@ var useAutocomplete = ({
|
|
|
937
902
|
const label2 = getSelectedValues(value);
|
|
938
903
|
setLabel(label2);
|
|
939
904
|
} else {
|
|
940
|
-
if (prevValue.current === value)
|
|
941
|
-
return;
|
|
905
|
+
if (prevValue.current === value) return;
|
|
942
906
|
onChangeLabel(value, false);
|
|
943
907
|
}
|
|
944
908
|
}, [isMulti, value, onChangeLabel, getSelectedValues]);
|
|
945
909
|
(0, import_utils4.useUpdateEffect)(() => {
|
|
946
|
-
if (isOpen || allowFree)
|
|
947
|
-
return;
|
|
910
|
+
if (isOpen || allowFree) return;
|
|
948
911
|
setFocusedIndex(-1);
|
|
949
912
|
setInputValue("");
|
|
950
913
|
}, [isOpen]);
|
|
951
914
|
(0, import_utils4.useUpdateEffect)(() => {
|
|
952
|
-
if (!isHit)
|
|
953
|
-
setFocusedIndex(-2);
|
|
915
|
+
if (!isHit) setFocusedIndex(-2);
|
|
954
916
|
}, [isHit]);
|
|
955
917
|
(0, import_utils4.useUnmountEffect)(() => {
|
|
956
918
|
timeoutIds.current.forEach((id2) => clearTimeout(id2));
|
|
@@ -1059,8 +1021,7 @@ var useAutocompleteInput = () => {
|
|
|
1059
1021
|
isOpen
|
|
1060
1022
|
} = useAutocompleteContext();
|
|
1061
1023
|
(0, import_utils4.useUpdateEffect)(() => {
|
|
1062
|
-
if (isAllSelected && inputRef.current)
|
|
1063
|
-
inputRef.current.blur();
|
|
1024
|
+
if (isAllSelected && inputRef.current) inputRef.current.blur();
|
|
1064
1025
|
}, [isAllSelected]);
|
|
1065
1026
|
const getInputProps = (0, import_react2.useCallback)(
|
|
1066
1027
|
(props = {}, ref = null) => ({
|
|
@@ -1113,14 +1074,11 @@ var useAutocompleteList = () => {
|
|
|
1113
1074
|
const beforeFocusedIndex = (0, import_react2.useRef)(-1);
|
|
1114
1075
|
const selectedValue = descendants.value(focusedIndex);
|
|
1115
1076
|
const onAnimationComplete = (0, import_react2.useCallback)(() => {
|
|
1116
|
-
if (!isOpen)
|
|
1117
|
-
rebirthOptions(false);
|
|
1077
|
+
if (!isOpen) rebirthOptions(false);
|
|
1118
1078
|
}, [isOpen, rebirthOptions]);
|
|
1119
1079
|
(0, import_react2.useEffect)(() => {
|
|
1120
|
-
if (!listRef.current || !selectedValue)
|
|
1121
|
-
|
|
1122
|
-
if (beforeFocusedIndex.current === selectedValue.index)
|
|
1123
|
-
return;
|
|
1080
|
+
if (!listRef.current || !selectedValue) return;
|
|
1081
|
+
if (beforeFocusedIndex.current === selectedValue.index) return;
|
|
1124
1082
|
const parent = listRef.current;
|
|
1125
1083
|
const child = selectedValue.node;
|
|
1126
1084
|
const parentHeight = parent.clientHeight;
|
|
@@ -1145,8 +1103,7 @@ var useAutocompleteList = () => {
|
|
|
1145
1103
|
beforeFocusedIndex.current = selectedValue.index;
|
|
1146
1104
|
}, [listRef, selectedValue]);
|
|
1147
1105
|
(0, import_utils4.useUpdateEffect)(() => {
|
|
1148
|
-
if (!isOpen)
|
|
1149
|
-
beforeFocusedIndex.current = -1;
|
|
1106
|
+
if (!isOpen) beforeFocusedIndex.current = -1;
|
|
1150
1107
|
}, [isOpen]);
|
|
1151
1108
|
const getListProps = (0, import_react2.useCallback)(
|
|
1152
1109
|
(props = {}, ref = null) => ({
|
|
@@ -1269,23 +1226,18 @@ var useAutocompleteOption = (props) => {
|
|
|
1269
1226
|
(ev) => {
|
|
1270
1227
|
ev.stopPropagation();
|
|
1271
1228
|
if (isDisabled) {
|
|
1272
|
-
if (inputRef.current)
|
|
1273
|
-
inputRef.current.focus();
|
|
1229
|
+
if (inputRef.current) inputRef.current.focus();
|
|
1274
1230
|
return;
|
|
1275
1231
|
}
|
|
1276
1232
|
if (!isTargetOption(ev.currentTarget)) {
|
|
1277
|
-
if (inputRef.current)
|
|
1278
|
-
inputRef.current.focus();
|
|
1233
|
+
if (inputRef.current) inputRef.current.focus();
|
|
1279
1234
|
return;
|
|
1280
1235
|
}
|
|
1281
1236
|
setFocusedIndex(index);
|
|
1282
1237
|
onChange(optionValue != null ? optionValue : "");
|
|
1283
|
-
if (inputRef.current)
|
|
1284
|
-
|
|
1285
|
-
if (
|
|
1286
|
-
onClose();
|
|
1287
|
-
if (omitSelectedValues)
|
|
1288
|
-
onFocusNext(index);
|
|
1238
|
+
if (inputRef.current) inputRef.current.focus();
|
|
1239
|
+
if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect) onClose();
|
|
1240
|
+
if (omitSelectedValues) onFocusNext(index);
|
|
1289
1241
|
},
|
|
1290
1242
|
[
|
|
1291
1243
|
onFocusNext,
|
|
@@ -1302,8 +1254,7 @@ var useAutocompleteOption = (props) => {
|
|
|
1302
1254
|
]
|
|
1303
1255
|
);
|
|
1304
1256
|
(0, import_utils4.useUpdateEffect)(() => {
|
|
1305
|
-
if (isSelected)
|
|
1306
|
-
onChangeLabel(optionValue != null ? optionValue : "", false);
|
|
1257
|
+
if (isSelected) onChangeLabel(optionValue != null ? optionValue : "", false);
|
|
1307
1258
|
}, [optionValue]);
|
|
1308
1259
|
const getOptionProps = (0, import_react2.useCallback)(
|
|
1309
1260
|
(props2 = {}, ref = null) => {
|