@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/index.js
CHANGED
@@ -160,8 +160,7 @@ var flattenItems = (items) => {
|
|
160
160
|
var _a;
|
161
161
|
const { isDisabled, isFocusable } = item;
|
162
162
|
const trulyDisabled = !!isDisabled && !isFocusable;
|
163
|
-
if (trulyDisabled)
|
164
|
-
return;
|
163
|
+
if (trulyDisabled) return;
|
165
164
|
if ("items" in item) {
|
166
165
|
return filterItems((_a = item.items) != null ? _a : []);
|
167
166
|
} else {
|
@@ -296,23 +295,18 @@ var useAutocomplete = ({
|
|
296
295
|
});
|
297
296
|
const isEmpty = !validChildren.length && !(computedChildren == null ? void 0 : computedChildren.length);
|
298
297
|
const onOpen = (0, import_react.useCallback)(() => {
|
299
|
-
if (formControlProps.disabled || formControlProps.readOnly)
|
300
|
-
|
301
|
-
if (!allowCreate && (isEmpty || isAllSelected))
|
302
|
-
return;
|
298
|
+
if (formControlProps.disabled || formControlProps.readOnly) return;
|
299
|
+
if (!allowCreate && (isEmpty || isAllSelected)) return;
|
303
300
|
onInternalOpen();
|
304
|
-
if (inputRef.current)
|
305
|
-
inputRef.current.focus();
|
301
|
+
if (inputRef.current) inputRef.current.focus();
|
306
302
|
}, [allowCreate, formControlProps, isAllSelected, isEmpty, onInternalOpen]);
|
307
303
|
const onFocusFirst = (0, import_react.useCallback)(() => {
|
308
304
|
const id2 = setTimeout(() => {
|
309
|
-
if (isEmpty || isAllSelected)
|
310
|
-
return;
|
305
|
+
if (isEmpty || isAllSelected) return;
|
311
306
|
const first = descendants.enabledFirstValue(
|
312
307
|
({ node }) => "target" in node.dataset
|
313
308
|
);
|
314
|
-
if (!first)
|
315
|
-
return;
|
309
|
+
if (!first) return;
|
316
310
|
if (!isMulti || !omitSelectedValues) {
|
317
311
|
setFocusedIndex(first.index);
|
318
312
|
} else {
|
@@ -336,13 +330,11 @@ var useAutocomplete = ({
|
|
336
330
|
]);
|
337
331
|
const onFocusLast = (0, import_react.useCallback)(() => {
|
338
332
|
const id2 = setTimeout(() => {
|
339
|
-
if (isEmpty || isAllSelected)
|
340
|
-
return;
|
333
|
+
if (isEmpty || isAllSelected) return;
|
341
334
|
const last = descendants.enabledLastValue(
|
342
335
|
({ node }) => "target" in node.dataset
|
343
336
|
);
|
344
|
-
if (!last)
|
345
|
-
return;
|
337
|
+
if (!last) return;
|
346
338
|
if (!isMulti || !omitSelectedValues) {
|
347
339
|
setFocusedIndex(last.index);
|
348
340
|
} else {
|
@@ -373,8 +365,7 @@ var useAutocomplete = ({
|
|
373
365
|
return !isMulti ? node.dataset.value === value : value.includes((_a = node.dataset.value) != null ? _a : "");
|
374
366
|
}
|
375
367
|
);
|
376
|
-
if (selected)
|
377
|
-
setFocusedIndex(selected.index);
|
368
|
+
if (selected) setFocusedIndex(selected.index);
|
378
369
|
});
|
379
370
|
timeoutIds.current.add(id2);
|
380
371
|
}, [descendants, isMulti, value]);
|
@@ -386,8 +377,7 @@ var useAutocomplete = ({
|
|
386
377
|
index,
|
387
378
|
({ node }) => "target" in node.dataset
|
388
379
|
);
|
389
|
-
if (!next)
|
390
|
-
return;
|
380
|
+
if (!next) return;
|
391
381
|
if (!isMulti || !omitSelectedValues) {
|
392
382
|
setFocusedIndex(next.index);
|
393
383
|
} else {
|
@@ -418,8 +408,7 @@ var useAutocomplete = ({
|
|
418
408
|
index,
|
419
409
|
({ node }) => "target" in node.dataset
|
420
410
|
);
|
421
|
-
if (!prev)
|
422
|
-
return;
|
411
|
+
if (!prev) return;
|
423
412
|
if (!isMulti || !omitSelectedValues) {
|
424
413
|
setFocusedIndex(prev.index);
|
425
414
|
} else {
|
@@ -473,8 +462,7 @@ var useAutocomplete = ({
|
|
473
462
|
values.forEach(({ node }) => {
|
474
463
|
node.dataset.target = "";
|
475
464
|
});
|
476
|
-
if (runFocus)
|
477
|
-
onFocusFirst();
|
465
|
+
if (runFocus) onFocusFirst();
|
478
466
|
setIsHit(true);
|
479
467
|
},
|
480
468
|
[descendants, onFocusFirst]
|
@@ -544,10 +532,8 @@ var useAutocomplete = ({
|
|
544
532
|
}
|
545
533
|
).length > 0;
|
546
534
|
onChangeLabel(newValue);
|
547
|
-
if (allowFree || isHit2)
|
548
|
-
|
549
|
-
if (isMulti && runRebirth)
|
550
|
-
rebirthOptions(false);
|
535
|
+
if (allowFree || isHit2) setInputValue("");
|
536
|
+
if (isMulti && runRebirth) rebirthOptions(false);
|
551
537
|
},
|
552
538
|
[
|
553
539
|
allowFree,
|
@@ -564,14 +550,11 @@ var useAutocomplete = ({
|
|
564
550
|
let enabledValue = descendants.value(focusedIndex);
|
565
551
|
if ("disabled" in ((_a = enabledValue == null ? void 0 : enabledValue.node.dataset) != null ? _a : {}))
|
566
552
|
enabledValue = void 0;
|
567
|
-
if (!enabledValue)
|
568
|
-
return;
|
553
|
+
if (!enabledValue) return;
|
569
554
|
const value2 = (_b = enabledValue.node.dataset.value) != null ? _b : "";
|
570
555
|
onChange(value2);
|
571
|
-
if (closeOnSelect)
|
572
|
-
|
573
|
-
if (omitSelectedValues)
|
574
|
-
onFocusNext();
|
556
|
+
if (closeOnSelect) onClose();
|
557
|
+
if (omitSelectedValues) onFocusNext();
|
575
558
|
}, [
|
576
559
|
closeOnSelect,
|
577
560
|
descendants,
|
@@ -583,8 +566,7 @@ var useAutocomplete = ({
|
|
583
566
|
]);
|
584
567
|
const onSearch = (0, import_react.useCallback)(
|
585
568
|
(ev) => {
|
586
|
-
if (!isOpen)
|
587
|
-
onOpen();
|
569
|
+
if (!isOpen) onOpen();
|
588
570
|
onSearchProp == null ? void 0 : onSearchProp(ev);
|
589
571
|
const value2 = ev.target.value;
|
590
572
|
const computedValue = format(value2);
|
@@ -605,12 +587,10 @@ var useAutocomplete = ({
|
|
605
587
|
}, []);
|
606
588
|
const onCreate = (0, import_react.useCallback)(() => {
|
607
589
|
var _a, _b;
|
608
|
-
if (!listRef.current)
|
609
|
-
return;
|
590
|
+
if (!listRef.current) return;
|
610
591
|
const newItem = { label: inputValue, value: inputValue };
|
611
592
|
let newItems = [];
|
612
|
-
if (resolvedItems)
|
613
|
-
newItems = resolvedItems;
|
593
|
+
if (resolvedItems) newItems = resolvedItems;
|
614
594
|
if (firstInsertPositionItem === "first") {
|
615
595
|
newItems = [newItem, ...newItems];
|
616
596
|
} else if (firstInsertPositionItem === "last") {
|
@@ -653,31 +633,25 @@ var useAutocomplete = ({
|
|
653
633
|
]);
|
654
634
|
const onClick = (0, import_react.useCallback)(() => {
|
655
635
|
if (isOpen) {
|
656
|
-
if (inputRef.current)
|
657
|
-
inputRef.current.focus();
|
636
|
+
if (inputRef.current) inputRef.current.focus();
|
658
637
|
} else {
|
659
638
|
onOpen();
|
660
639
|
onFocusFirstOrSelected();
|
661
640
|
}
|
662
641
|
}, [isOpen, onFocusFirstOrSelected, onOpen]);
|
663
642
|
const onFocus = (0, import_react.useCallback)(() => {
|
664
|
-
if (isOpen)
|
665
|
-
return;
|
643
|
+
if (isOpen) return;
|
666
644
|
onOpen();
|
667
645
|
onFocusFirstOrSelected();
|
668
646
|
}, [isOpen, onFocusFirstOrSelected, onOpen]);
|
669
647
|
const onBlur = (0, import_react.useCallback)(
|
670
648
|
(ev) => {
|
671
649
|
const relatedTarget = (0, import_utils.getEventRelatedTarget)(ev);
|
672
|
-
if ((0, import_utils.isContains)(containerRef.current, relatedTarget))
|
673
|
-
|
674
|
-
if (
|
675
|
-
return;
|
676
|
-
if (allowFree && !!inputValue)
|
677
|
-
onChange(inputValue, false);
|
650
|
+
if ((0, import_utils.isContains)(containerRef.current, relatedTarget)) return;
|
651
|
+
if (!closeOnBlur && isHit) return;
|
652
|
+
if (allowFree && !!inputValue) onChange(inputValue, false);
|
678
653
|
setInputValue("");
|
679
|
-
if (isOpen)
|
680
|
-
onClose();
|
654
|
+
if (isOpen) onClose();
|
681
655
|
},
|
682
656
|
[closeOnBlur, isHit, isOpen, inputValue, allowFree, onClose, onChange]
|
683
657
|
);
|
@@ -687,8 +661,7 @@ var useAutocomplete = ({
|
|
687
661
|
} else {
|
688
662
|
onChange(value[value.length - 1]);
|
689
663
|
}
|
690
|
-
if (!isOpen)
|
691
|
-
onFocus();
|
664
|
+
if (!isOpen) onFocus();
|
692
665
|
}, [isMulti, isOpen, onChange, onFocus, value]);
|
693
666
|
const onClear = (0, import_react.useCallback)(
|
694
667
|
(ev) => {
|
@@ -698,27 +671,22 @@ var useAutocomplete = ({
|
|
698
671
|
setLabel(void 0);
|
699
672
|
setInputValue("");
|
700
673
|
rebirthOptions();
|
701
|
-
if (isOpen && inputRef.current)
|
702
|
-
inputRef.current.focus();
|
674
|
+
if (isOpen && inputRef.current) inputRef.current.focus();
|
703
675
|
},
|
704
676
|
[isOpen, setLabel, setInputValue, setValue, rebirthOptions]
|
705
677
|
);
|
706
678
|
const onKeyDown = (0, import_react.useCallback)(
|
707
679
|
(ev) => {
|
708
|
-
if (ev.key === " ")
|
709
|
-
|
710
|
-
if (
|
711
|
-
return;
|
712
|
-
if (isComposition.current)
|
713
|
-
return;
|
680
|
+
if (ev.key === " ") ev.key = ev.code;
|
681
|
+
if (formControlProps.disabled || formControlProps.readOnly) return;
|
682
|
+
if (isComposition.current) return;
|
714
683
|
const enabledDelete = label === inputValue || !inputValue.length;
|
715
684
|
const actions = {
|
716
685
|
ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
|
717
686
|
ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
|
718
687
|
Space: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
|
719
688
|
Enter: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusFirstOrSelected) : allowFree && isMulti ? () => {
|
720
|
-
if (inputValue)
|
721
|
-
onChange(inputValue);
|
689
|
+
if (inputValue) onChange(inputValue);
|
722
690
|
setFocusedIndex(0);
|
723
691
|
} : void 0,
|
724
692
|
Home: isOpen ? onFocusFirst : void 0,
|
@@ -727,8 +695,7 @@ var useAutocomplete = ({
|
|
727
695
|
Backspace: !isEmptyValue && enabledDelete ? onDelete : void 0
|
728
696
|
};
|
729
697
|
const action = actions[ev.key];
|
730
|
-
if (!action)
|
731
|
-
return;
|
698
|
+
if (!action) return;
|
732
699
|
ev.preventDefault();
|
733
700
|
ev.stopPropagation();
|
734
701
|
action(ev);
|
@@ -759,10 +726,8 @@ var useAutocomplete = ({
|
|
759
726
|
]
|
760
727
|
);
|
761
728
|
(0, import_react.useEffect)(() => {
|
762
|
-
if (!isMulti)
|
763
|
-
|
764
|
-
if (!omitSelectedValues && (0, import_utils.isUndefined)(maxSelectValues))
|
765
|
-
return;
|
729
|
+
if (!isMulti) return;
|
730
|
+
if (!omitSelectedValues && (0, import_utils.isUndefined)(maxSelectValues)) return;
|
766
731
|
const isAll = value.length > 0 && value.length === descendants.count();
|
767
732
|
const isMax = value.length === maxSelectValues;
|
768
733
|
if (isAll || isMax) {
|
@@ -787,20 +752,17 @@ var useAutocomplete = ({
|
|
787
752
|
const label2 = getSelectedValues(value);
|
788
753
|
setLabel(label2);
|
789
754
|
} else {
|
790
|
-
if (prevValue.current === value)
|
791
|
-
return;
|
755
|
+
if (prevValue.current === value) return;
|
792
756
|
onChangeLabel(value, false);
|
793
757
|
}
|
794
758
|
}, [isMulti, value, onChangeLabel, getSelectedValues]);
|
795
759
|
(0, import_utils.useUpdateEffect)(() => {
|
796
|
-
if (isOpen || allowFree)
|
797
|
-
return;
|
760
|
+
if (isOpen || allowFree) return;
|
798
761
|
setFocusedIndex(-1);
|
799
762
|
setInputValue("");
|
800
763
|
}, [isOpen]);
|
801
764
|
(0, import_utils.useUpdateEffect)(() => {
|
802
|
-
if (!isHit)
|
803
|
-
setFocusedIndex(-2);
|
765
|
+
if (!isHit) setFocusedIndex(-2);
|
804
766
|
}, [isHit]);
|
805
767
|
(0, import_utils.useUnmountEffect)(() => {
|
806
768
|
timeoutIds.current.forEach((id2) => clearTimeout(id2));
|
@@ -909,8 +871,7 @@ var useAutocompleteInput = () => {
|
|
909
871
|
isOpen
|
910
872
|
} = useAutocompleteContext();
|
911
873
|
(0, import_utils.useUpdateEffect)(() => {
|
912
|
-
if (isAllSelected && inputRef.current)
|
913
|
-
inputRef.current.blur();
|
874
|
+
if (isAllSelected && inputRef.current) inputRef.current.blur();
|
914
875
|
}, [isAllSelected]);
|
915
876
|
const getInputProps = (0, import_react.useCallback)(
|
916
877
|
(props = {}, ref = null) => ({
|
@@ -963,14 +924,11 @@ var useAutocompleteList = () => {
|
|
963
924
|
const beforeFocusedIndex = (0, import_react.useRef)(-1);
|
964
925
|
const selectedValue = descendants.value(focusedIndex);
|
965
926
|
const onAnimationComplete = (0, import_react.useCallback)(() => {
|
966
|
-
if (!isOpen)
|
967
|
-
rebirthOptions(false);
|
927
|
+
if (!isOpen) rebirthOptions(false);
|
968
928
|
}, [isOpen, rebirthOptions]);
|
969
929
|
(0, import_react.useEffect)(() => {
|
970
|
-
if (!listRef.current || !selectedValue)
|
971
|
-
|
972
|
-
if (beforeFocusedIndex.current === selectedValue.index)
|
973
|
-
return;
|
930
|
+
if (!listRef.current || !selectedValue) return;
|
931
|
+
if (beforeFocusedIndex.current === selectedValue.index) return;
|
974
932
|
const parent = listRef.current;
|
975
933
|
const child = selectedValue.node;
|
976
934
|
const parentHeight = parent.clientHeight;
|
@@ -995,8 +953,7 @@ var useAutocompleteList = () => {
|
|
995
953
|
beforeFocusedIndex.current = selectedValue.index;
|
996
954
|
}, [listRef, selectedValue]);
|
997
955
|
(0, import_utils.useUpdateEffect)(() => {
|
998
|
-
if (!isOpen)
|
999
|
-
beforeFocusedIndex.current = -1;
|
956
|
+
if (!isOpen) beforeFocusedIndex.current = -1;
|
1000
957
|
}, [isOpen]);
|
1001
958
|
const getListProps = (0, import_react.useCallback)(
|
1002
959
|
(props = {}, ref = null) => ({
|
@@ -1119,23 +1076,18 @@ var useAutocompleteOption = (props) => {
|
|
1119
1076
|
(ev) => {
|
1120
1077
|
ev.stopPropagation();
|
1121
1078
|
if (isDisabled) {
|
1122
|
-
if (inputRef.current)
|
1123
|
-
inputRef.current.focus();
|
1079
|
+
if (inputRef.current) inputRef.current.focus();
|
1124
1080
|
return;
|
1125
1081
|
}
|
1126
1082
|
if (!isTargetOption(ev.currentTarget)) {
|
1127
|
-
if (inputRef.current)
|
1128
|
-
inputRef.current.focus();
|
1083
|
+
if (inputRef.current) inputRef.current.focus();
|
1129
1084
|
return;
|
1130
1085
|
}
|
1131
1086
|
setFocusedIndex(index);
|
1132
1087
|
onChange(optionValue != null ? optionValue : "");
|
1133
|
-
if (inputRef.current)
|
1134
|
-
|
1135
|
-
if (
|
1136
|
-
onClose();
|
1137
|
-
if (omitSelectedValues)
|
1138
|
-
onFocusNext(index);
|
1088
|
+
if (inputRef.current) inputRef.current.focus();
|
1089
|
+
if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect) onClose();
|
1090
|
+
if (omitSelectedValues) onFocusNext(index);
|
1139
1091
|
},
|
1140
1092
|
[
|
1141
1093
|
onFocusNext,
|
@@ -1152,8 +1104,7 @@ var useAutocompleteOption = (props) => {
|
|
1152
1104
|
]
|
1153
1105
|
);
|
1154
1106
|
(0, import_utils.useUpdateEffect)(() => {
|
1155
|
-
if (isSelected)
|
1156
|
-
onChangeLabel(optionValue != null ? optionValue : "", false);
|
1107
|
+
if (isSelected) onChangeLabel(optionValue != null ? optionValue : "", false);
|
1157
1108
|
}, [optionValue]);
|
1158
1109
|
const getOptionProps = (0, import_react.useCallback)(
|
1159
1110
|
(props2 = {}, ref = null) => {
|
@@ -1760,15 +1711,13 @@ var MultiAutocompleteField = (0, import_core9.forwardRef)(
|
|
1760
1711
|
const { value, label, inputValue, onChange, isOpen, inputRef, styles } = useAutocompleteContext();
|
1761
1712
|
const { getInputProps } = useAutocompleteInput();
|
1762
1713
|
const cloneChildren = (0, import_react3.useMemo)(() => {
|
1763
|
-
if (!(label == null ? void 0 : label.length))
|
1764
|
-
return null;
|
1714
|
+
if (!(label == null ? void 0 : label.length)) return null;
|
1765
1715
|
if (component) {
|
1766
1716
|
return label.map((label2, index) => {
|
1767
1717
|
const onRemove = (ev) => {
|
1768
1718
|
ev.stopPropagation();
|
1769
1719
|
onChange(value[index]);
|
1770
|
-
if (inputRef.current)
|
1771
|
-
inputRef.current.focus();
|
1720
|
+
if (inputRef.current) inputRef.current.focus();
|
1772
1721
|
};
|
1773
1722
|
const el = component({
|
1774
1723
|
value: value[index],
|