@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
|
@@ -330,8 +330,7 @@ var flattenItems = (items) => {
|
|
|
330
330
|
var _a;
|
|
331
331
|
const { isDisabled, isFocusable } = item;
|
|
332
332
|
const trulyDisabled = !!isDisabled && !isFocusable;
|
|
333
|
-
if (trulyDisabled)
|
|
334
|
-
return;
|
|
333
|
+
if (trulyDisabled) return;
|
|
335
334
|
if ("items" in item) {
|
|
336
335
|
return filterItems((_a = item.items) != null ? _a : []);
|
|
337
336
|
} else {
|
|
@@ -466,23 +465,18 @@ var useAutocomplete = ({
|
|
|
466
465
|
});
|
|
467
466
|
const isEmpty = !validChildren.length && !(computedChildren == null ? void 0 : computedChildren.length);
|
|
468
467
|
const onOpen = (0, import_react.useCallback)(() => {
|
|
469
|
-
if (formControlProps.disabled || formControlProps.readOnly)
|
|
470
|
-
|
|
471
|
-
if (!allowCreate && (isEmpty || isAllSelected))
|
|
472
|
-
return;
|
|
468
|
+
if (formControlProps.disabled || formControlProps.readOnly) return;
|
|
469
|
+
if (!allowCreate && (isEmpty || isAllSelected)) return;
|
|
473
470
|
onInternalOpen();
|
|
474
|
-
if (inputRef.current)
|
|
475
|
-
inputRef.current.focus();
|
|
471
|
+
if (inputRef.current) inputRef.current.focus();
|
|
476
472
|
}, [allowCreate, formControlProps, isAllSelected, isEmpty, onInternalOpen]);
|
|
477
473
|
const onFocusFirst = (0, import_react.useCallback)(() => {
|
|
478
474
|
const id2 = setTimeout(() => {
|
|
479
|
-
if (isEmpty || isAllSelected)
|
|
480
|
-
return;
|
|
475
|
+
if (isEmpty || isAllSelected) return;
|
|
481
476
|
const first = descendants.enabledFirstValue(
|
|
482
477
|
({ node }) => "target" in node.dataset
|
|
483
478
|
);
|
|
484
|
-
if (!first)
|
|
485
|
-
return;
|
|
479
|
+
if (!first) return;
|
|
486
480
|
if (!isMulti || !omitSelectedValues) {
|
|
487
481
|
setFocusedIndex(first.index);
|
|
488
482
|
} else {
|
|
@@ -506,13 +500,11 @@ var useAutocomplete = ({
|
|
|
506
500
|
]);
|
|
507
501
|
const onFocusLast = (0, import_react.useCallback)(() => {
|
|
508
502
|
const id2 = setTimeout(() => {
|
|
509
|
-
if (isEmpty || isAllSelected)
|
|
510
|
-
return;
|
|
503
|
+
if (isEmpty || isAllSelected) return;
|
|
511
504
|
const last = descendants.enabledLastValue(
|
|
512
505
|
({ node }) => "target" in node.dataset
|
|
513
506
|
);
|
|
514
|
-
if (!last)
|
|
515
|
-
return;
|
|
507
|
+
if (!last) return;
|
|
516
508
|
if (!isMulti || !omitSelectedValues) {
|
|
517
509
|
setFocusedIndex(last.index);
|
|
518
510
|
} else {
|
|
@@ -543,8 +535,7 @@ var useAutocomplete = ({
|
|
|
543
535
|
return !isMulti ? node.dataset.value === value : value.includes((_a = node.dataset.value) != null ? _a : "");
|
|
544
536
|
}
|
|
545
537
|
);
|
|
546
|
-
if (selected)
|
|
547
|
-
setFocusedIndex(selected.index);
|
|
538
|
+
if (selected) setFocusedIndex(selected.index);
|
|
548
539
|
});
|
|
549
540
|
timeoutIds.current.add(id2);
|
|
550
541
|
}, [descendants, isMulti, value]);
|
|
@@ -556,8 +547,7 @@ var useAutocomplete = ({
|
|
|
556
547
|
index,
|
|
557
548
|
({ node }) => "target" in node.dataset
|
|
558
549
|
);
|
|
559
|
-
if (!next)
|
|
560
|
-
return;
|
|
550
|
+
if (!next) return;
|
|
561
551
|
if (!isMulti || !omitSelectedValues) {
|
|
562
552
|
setFocusedIndex(next.index);
|
|
563
553
|
} else {
|
|
@@ -588,8 +578,7 @@ var useAutocomplete = ({
|
|
|
588
578
|
index,
|
|
589
579
|
({ node }) => "target" in node.dataset
|
|
590
580
|
);
|
|
591
|
-
if (!prev)
|
|
592
|
-
return;
|
|
581
|
+
if (!prev) return;
|
|
593
582
|
if (!isMulti || !omitSelectedValues) {
|
|
594
583
|
setFocusedIndex(prev.index);
|
|
595
584
|
} else {
|
|
@@ -643,8 +632,7 @@ var useAutocomplete = ({
|
|
|
643
632
|
values.forEach(({ node }) => {
|
|
644
633
|
node.dataset.target = "";
|
|
645
634
|
});
|
|
646
|
-
if (runFocus)
|
|
647
|
-
onFocusFirst();
|
|
635
|
+
if (runFocus) onFocusFirst();
|
|
648
636
|
setIsHit(true);
|
|
649
637
|
},
|
|
650
638
|
[descendants, onFocusFirst]
|
|
@@ -714,10 +702,8 @@ var useAutocomplete = ({
|
|
|
714
702
|
}
|
|
715
703
|
).length > 0;
|
|
716
704
|
onChangeLabel(newValue);
|
|
717
|
-
if (allowFree || isHit2)
|
|
718
|
-
|
|
719
|
-
if (isMulti && runRebirth)
|
|
720
|
-
rebirthOptions(false);
|
|
705
|
+
if (allowFree || isHit2) setInputValue("");
|
|
706
|
+
if (isMulti && runRebirth) rebirthOptions(false);
|
|
721
707
|
},
|
|
722
708
|
[
|
|
723
709
|
allowFree,
|
|
@@ -734,14 +720,11 @@ var useAutocomplete = ({
|
|
|
734
720
|
let enabledValue = descendants.value(focusedIndex);
|
|
735
721
|
if ("disabled" in ((_a = enabledValue == null ? void 0 : enabledValue.node.dataset) != null ? _a : {}))
|
|
736
722
|
enabledValue = void 0;
|
|
737
|
-
if (!enabledValue)
|
|
738
|
-
return;
|
|
723
|
+
if (!enabledValue) return;
|
|
739
724
|
const value2 = (_b = enabledValue.node.dataset.value) != null ? _b : "";
|
|
740
725
|
onChange(value2);
|
|
741
|
-
if (closeOnSelect)
|
|
742
|
-
|
|
743
|
-
if (omitSelectedValues)
|
|
744
|
-
onFocusNext();
|
|
726
|
+
if (closeOnSelect) onClose();
|
|
727
|
+
if (omitSelectedValues) onFocusNext();
|
|
745
728
|
}, [
|
|
746
729
|
closeOnSelect,
|
|
747
730
|
descendants,
|
|
@@ -753,8 +736,7 @@ var useAutocomplete = ({
|
|
|
753
736
|
]);
|
|
754
737
|
const onSearch = (0, import_react.useCallback)(
|
|
755
738
|
(ev) => {
|
|
756
|
-
if (!isOpen)
|
|
757
|
-
onOpen();
|
|
739
|
+
if (!isOpen) onOpen();
|
|
758
740
|
onSearchProp == null ? void 0 : onSearchProp(ev);
|
|
759
741
|
const value2 = ev.target.value;
|
|
760
742
|
const computedValue = format(value2);
|
|
@@ -775,12 +757,10 @@ var useAutocomplete = ({
|
|
|
775
757
|
}, []);
|
|
776
758
|
const onCreate = (0, import_react.useCallback)(() => {
|
|
777
759
|
var _a, _b;
|
|
778
|
-
if (!listRef.current)
|
|
779
|
-
return;
|
|
760
|
+
if (!listRef.current) return;
|
|
780
761
|
const newItem = { label: inputValue, value: inputValue };
|
|
781
762
|
let newItems = [];
|
|
782
|
-
if (resolvedItems)
|
|
783
|
-
newItems = resolvedItems;
|
|
763
|
+
if (resolvedItems) newItems = resolvedItems;
|
|
784
764
|
if (firstInsertPositionItem === "first") {
|
|
785
765
|
newItems = [newItem, ...newItems];
|
|
786
766
|
} else if (firstInsertPositionItem === "last") {
|
|
@@ -823,31 +803,25 @@ var useAutocomplete = ({
|
|
|
823
803
|
]);
|
|
824
804
|
const onClick = (0, import_react.useCallback)(() => {
|
|
825
805
|
if (isOpen) {
|
|
826
|
-
if (inputRef.current)
|
|
827
|
-
inputRef.current.focus();
|
|
806
|
+
if (inputRef.current) inputRef.current.focus();
|
|
828
807
|
} else {
|
|
829
808
|
onOpen();
|
|
830
809
|
onFocusFirstOrSelected();
|
|
831
810
|
}
|
|
832
811
|
}, [isOpen, onFocusFirstOrSelected, onOpen]);
|
|
833
812
|
const onFocus = (0, import_react.useCallback)(() => {
|
|
834
|
-
if (isOpen)
|
|
835
|
-
return;
|
|
813
|
+
if (isOpen) return;
|
|
836
814
|
onOpen();
|
|
837
815
|
onFocusFirstOrSelected();
|
|
838
816
|
}, [isOpen, onFocusFirstOrSelected, onOpen]);
|
|
839
817
|
const onBlur = (0, import_react.useCallback)(
|
|
840
818
|
(ev) => {
|
|
841
819
|
const relatedTarget = (0, import_utils6.getEventRelatedTarget)(ev);
|
|
842
|
-
if ((0, import_utils6.isContains)(containerRef.current, relatedTarget))
|
|
843
|
-
|
|
844
|
-
if (
|
|
845
|
-
return;
|
|
846
|
-
if (allowFree && !!inputValue)
|
|
847
|
-
onChange(inputValue, false);
|
|
820
|
+
if ((0, import_utils6.isContains)(containerRef.current, relatedTarget)) return;
|
|
821
|
+
if (!closeOnBlur && isHit) return;
|
|
822
|
+
if (allowFree && !!inputValue) onChange(inputValue, false);
|
|
848
823
|
setInputValue("");
|
|
849
|
-
if (isOpen)
|
|
850
|
-
onClose();
|
|
824
|
+
if (isOpen) onClose();
|
|
851
825
|
},
|
|
852
826
|
[closeOnBlur, isHit, isOpen, inputValue, allowFree, onClose, onChange]
|
|
853
827
|
);
|
|
@@ -857,8 +831,7 @@ var useAutocomplete = ({
|
|
|
857
831
|
} else {
|
|
858
832
|
onChange(value[value.length - 1]);
|
|
859
833
|
}
|
|
860
|
-
if (!isOpen)
|
|
861
|
-
onFocus();
|
|
834
|
+
if (!isOpen) onFocus();
|
|
862
835
|
}, [isMulti, isOpen, onChange, onFocus, value]);
|
|
863
836
|
const onClear = (0, import_react.useCallback)(
|
|
864
837
|
(ev) => {
|
|
@@ -868,27 +841,22 @@ var useAutocomplete = ({
|
|
|
868
841
|
setLabel(void 0);
|
|
869
842
|
setInputValue("");
|
|
870
843
|
rebirthOptions();
|
|
871
|
-
if (isOpen && inputRef.current)
|
|
872
|
-
inputRef.current.focus();
|
|
844
|
+
if (isOpen && inputRef.current) inputRef.current.focus();
|
|
873
845
|
},
|
|
874
846
|
[isOpen, setLabel, setInputValue, setValue, rebirthOptions]
|
|
875
847
|
);
|
|
876
848
|
const onKeyDown = (0, import_react.useCallback)(
|
|
877
849
|
(ev) => {
|
|
878
|
-
if (ev.key === " ")
|
|
879
|
-
|
|
880
|
-
if (
|
|
881
|
-
return;
|
|
882
|
-
if (isComposition.current)
|
|
883
|
-
return;
|
|
850
|
+
if (ev.key === " ") ev.key = ev.code;
|
|
851
|
+
if (formControlProps.disabled || formControlProps.readOnly) return;
|
|
852
|
+
if (isComposition.current) return;
|
|
884
853
|
const enabledDelete = label === inputValue || !inputValue.length;
|
|
885
854
|
const actions = {
|
|
886
855
|
ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? (0, import_utils6.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
|
|
887
856
|
ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? (0, import_utils6.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
|
|
888
857
|
Space: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils6.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
|
|
889
858
|
Enter: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils6.funcAll)(onOpen, onFocusFirstOrSelected) : allowFree && isMulti ? () => {
|
|
890
|
-
if (inputValue)
|
|
891
|
-
onChange(inputValue);
|
|
859
|
+
if (inputValue) onChange(inputValue);
|
|
892
860
|
setFocusedIndex(0);
|
|
893
861
|
} : void 0,
|
|
894
862
|
Home: isOpen ? onFocusFirst : void 0,
|
|
@@ -897,8 +865,7 @@ var useAutocomplete = ({
|
|
|
897
865
|
Backspace: !isEmptyValue && enabledDelete ? onDelete : void 0
|
|
898
866
|
};
|
|
899
867
|
const action = actions[ev.key];
|
|
900
|
-
if (!action)
|
|
901
|
-
return;
|
|
868
|
+
if (!action) return;
|
|
902
869
|
ev.preventDefault();
|
|
903
870
|
ev.stopPropagation();
|
|
904
871
|
action(ev);
|
|
@@ -929,10 +896,8 @@ var useAutocomplete = ({
|
|
|
929
896
|
]
|
|
930
897
|
);
|
|
931
898
|
(0, import_react.useEffect)(() => {
|
|
932
|
-
if (!isMulti)
|
|
933
|
-
|
|
934
|
-
if (!omitSelectedValues && (0, import_utils6.isUndefined)(maxSelectValues))
|
|
935
|
-
return;
|
|
899
|
+
if (!isMulti) return;
|
|
900
|
+
if (!omitSelectedValues && (0, import_utils6.isUndefined)(maxSelectValues)) return;
|
|
936
901
|
const isAll = value.length > 0 && value.length === descendants.count();
|
|
937
902
|
const isMax = value.length === maxSelectValues;
|
|
938
903
|
if (isAll || isMax) {
|
|
@@ -957,20 +922,17 @@ var useAutocomplete = ({
|
|
|
957
922
|
const label2 = getSelectedValues(value);
|
|
958
923
|
setLabel(label2);
|
|
959
924
|
} else {
|
|
960
|
-
if (prevValue.current === value)
|
|
961
|
-
return;
|
|
925
|
+
if (prevValue.current === value) return;
|
|
962
926
|
onChangeLabel(value, false);
|
|
963
927
|
}
|
|
964
928
|
}, [isMulti, value, onChangeLabel, getSelectedValues]);
|
|
965
929
|
(0, import_utils6.useUpdateEffect)(() => {
|
|
966
|
-
if (isOpen || allowFree)
|
|
967
|
-
return;
|
|
930
|
+
if (isOpen || allowFree) return;
|
|
968
931
|
setFocusedIndex(-1);
|
|
969
932
|
setInputValue("");
|
|
970
933
|
}, [isOpen]);
|
|
971
934
|
(0, import_utils6.useUpdateEffect)(() => {
|
|
972
|
-
if (!isHit)
|
|
973
|
-
setFocusedIndex(-2);
|
|
935
|
+
if (!isHit) setFocusedIndex(-2);
|
|
974
936
|
}, [isHit]);
|
|
975
937
|
(0, import_utils6.useUnmountEffect)(() => {
|
|
976
938
|
timeoutIds.current.forEach((id2) => clearTimeout(id2));
|
|
@@ -1079,8 +1041,7 @@ var useAutocompleteInput = () => {
|
|
|
1079
1041
|
isOpen
|
|
1080
1042
|
} = useAutocompleteContext();
|
|
1081
1043
|
(0, import_utils6.useUpdateEffect)(() => {
|
|
1082
|
-
if (isAllSelected && inputRef.current)
|
|
1083
|
-
inputRef.current.blur();
|
|
1044
|
+
if (isAllSelected && inputRef.current) inputRef.current.blur();
|
|
1084
1045
|
}, [isAllSelected]);
|
|
1085
1046
|
const getInputProps = (0, import_react.useCallback)(
|
|
1086
1047
|
(props = {}, ref = null) => ({
|
|
@@ -1133,14 +1094,11 @@ var useAutocompleteList = () => {
|
|
|
1133
1094
|
const beforeFocusedIndex = (0, import_react.useRef)(-1);
|
|
1134
1095
|
const selectedValue = descendants.value(focusedIndex);
|
|
1135
1096
|
const onAnimationComplete = (0, import_react.useCallback)(() => {
|
|
1136
|
-
if (!isOpen)
|
|
1137
|
-
rebirthOptions(false);
|
|
1097
|
+
if (!isOpen) rebirthOptions(false);
|
|
1138
1098
|
}, [isOpen, rebirthOptions]);
|
|
1139
1099
|
(0, import_react.useEffect)(() => {
|
|
1140
|
-
if (!listRef.current || !selectedValue)
|
|
1141
|
-
|
|
1142
|
-
if (beforeFocusedIndex.current === selectedValue.index)
|
|
1143
|
-
return;
|
|
1100
|
+
if (!listRef.current || !selectedValue) return;
|
|
1101
|
+
if (beforeFocusedIndex.current === selectedValue.index) return;
|
|
1144
1102
|
const parent = listRef.current;
|
|
1145
1103
|
const child = selectedValue.node;
|
|
1146
1104
|
const parentHeight = parent.clientHeight;
|
|
@@ -1165,8 +1123,7 @@ var useAutocompleteList = () => {
|
|
|
1165
1123
|
beforeFocusedIndex.current = selectedValue.index;
|
|
1166
1124
|
}, [listRef, selectedValue]);
|
|
1167
1125
|
(0, import_utils6.useUpdateEffect)(() => {
|
|
1168
|
-
if (!isOpen)
|
|
1169
|
-
beforeFocusedIndex.current = -1;
|
|
1126
|
+
if (!isOpen) beforeFocusedIndex.current = -1;
|
|
1170
1127
|
}, [isOpen]);
|
|
1171
1128
|
const getListProps = (0, import_react.useCallback)(
|
|
1172
1129
|
(props = {}, ref = null) => ({
|
|
@@ -1289,23 +1246,18 @@ var useAutocompleteOption = (props) => {
|
|
|
1289
1246
|
(ev) => {
|
|
1290
1247
|
ev.stopPropagation();
|
|
1291
1248
|
if (isDisabled) {
|
|
1292
|
-
if (inputRef.current)
|
|
1293
|
-
inputRef.current.focus();
|
|
1249
|
+
if (inputRef.current) inputRef.current.focus();
|
|
1294
1250
|
return;
|
|
1295
1251
|
}
|
|
1296
1252
|
if (!isTargetOption(ev.currentTarget)) {
|
|
1297
|
-
if (inputRef.current)
|
|
1298
|
-
inputRef.current.focus();
|
|
1253
|
+
if (inputRef.current) inputRef.current.focus();
|
|
1299
1254
|
return;
|
|
1300
1255
|
}
|
|
1301
1256
|
setFocusedIndex(index);
|
|
1302
1257
|
onChange(optionValue != null ? optionValue : "");
|
|
1303
|
-
if (inputRef.current)
|
|
1304
|
-
|
|
1305
|
-
if (
|
|
1306
|
-
onClose();
|
|
1307
|
-
if (omitSelectedValues)
|
|
1308
|
-
onFocusNext(index);
|
|
1258
|
+
if (inputRef.current) inputRef.current.focus();
|
|
1259
|
+
if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect) onClose();
|
|
1260
|
+
if (omitSelectedValues) onFocusNext(index);
|
|
1309
1261
|
},
|
|
1310
1262
|
[
|
|
1311
1263
|
onFocusNext,
|
|
@@ -1322,8 +1274,7 @@ var useAutocompleteOption = (props) => {
|
|
|
1322
1274
|
]
|
|
1323
1275
|
);
|
|
1324
1276
|
(0, import_utils6.useUpdateEffect)(() => {
|
|
1325
|
-
if (isSelected)
|
|
1326
|
-
onChangeLabel(optionValue != null ? optionValue : "", false);
|
|
1277
|
+
if (isSelected) onChangeLabel(optionValue != null ? optionValue : "", false);
|
|
1327
1278
|
}, [optionValue]);
|
|
1328
1279
|
const getOptionProps = (0, import_react.useCallback)(
|
|
1329
1280
|
(props2 = {}, ref = null) => {
|
|
@@ -1631,15 +1582,13 @@ var MultiAutocompleteField = (0, import_core8.forwardRef)(
|
|
|
1631
1582
|
const { value, label, inputValue, onChange, isOpen, inputRef, styles } = useAutocompleteContext();
|
|
1632
1583
|
const { getInputProps } = useAutocompleteInput();
|
|
1633
1584
|
const cloneChildren = (0, import_react3.useMemo)(() => {
|
|
1634
|
-
if (!(label == null ? void 0 : label.length))
|
|
1635
|
-
return null;
|
|
1585
|
+
if (!(label == null ? void 0 : label.length)) return null;
|
|
1636
1586
|
if (component) {
|
|
1637
1587
|
return label.map((label2, index) => {
|
|
1638
1588
|
const onRemove = (ev) => {
|
|
1639
1589
|
ev.stopPropagation();
|
|
1640
1590
|
onChange(value[index]);
|
|
1641
|
-
if (inputRef.current)
|
|
1642
|
-
inputRef.current.focus();
|
|
1591
|
+
if (inputRef.current) inputRef.current.focus();
|
|
1643
1592
|
};
|
|
1644
1593
|
const el = component({
|
|
1645
1594
|
value: value[index],
|