@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
@@ -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],
|