@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
@@ -533,15 +533,13 @@ var MultiAutocompleteField = forwardRef7(
|
|
533
533
|
const { value, label, inputValue, onChange, isOpen, inputRef, styles } = useAutocompleteContext();
|
534
534
|
const { getInputProps } = useAutocompleteInput();
|
535
535
|
const cloneChildren = useMemo(() => {
|
536
|
-
if (!(label == null ? void 0 : label.length))
|
537
|
-
return null;
|
536
|
+
if (!(label == null ? void 0 : label.length)) return null;
|
538
537
|
if (component) {
|
539
538
|
return label.map((label2, index) => {
|
540
539
|
const onRemove = (ev) => {
|
541
540
|
ev.stopPropagation();
|
542
541
|
onChange(value[index]);
|
543
|
-
if (inputRef.current)
|
544
|
-
inputRef.current.focus();
|
542
|
+
if (inputRef.current) inputRef.current.focus();
|
545
543
|
};
|
546
544
|
const el = component({
|
547
545
|
value: value[index],
|
@@ -708,8 +706,7 @@ var flattenItems = (items) => {
|
|
708
706
|
var _a;
|
709
707
|
const { isDisabled, isFocusable } = item;
|
710
708
|
const trulyDisabled = !!isDisabled && !isFocusable;
|
711
|
-
if (trulyDisabled)
|
712
|
-
return;
|
709
|
+
if (trulyDisabled) return;
|
713
710
|
if ("items" in item) {
|
714
711
|
return filterItems((_a = item.items) != null ? _a : []);
|
715
712
|
} else {
|
@@ -844,23 +841,18 @@ var useAutocomplete = ({
|
|
844
841
|
});
|
845
842
|
const isEmpty = !validChildren.length && !(computedChildren == null ? void 0 : computedChildren.length);
|
846
843
|
const onOpen = useCallback(() => {
|
847
|
-
if (formControlProps.disabled || formControlProps.readOnly)
|
848
|
-
|
849
|
-
if (!allowCreate && (isEmpty || isAllSelected))
|
850
|
-
return;
|
844
|
+
if (formControlProps.disabled || formControlProps.readOnly) return;
|
845
|
+
if (!allowCreate && (isEmpty || isAllSelected)) return;
|
851
846
|
onInternalOpen();
|
852
|
-
if (inputRef.current)
|
853
|
-
inputRef.current.focus();
|
847
|
+
if (inputRef.current) inputRef.current.focus();
|
854
848
|
}, [allowCreate, formControlProps, isAllSelected, isEmpty, onInternalOpen]);
|
855
849
|
const onFocusFirst = useCallback(() => {
|
856
850
|
const id2 = setTimeout(() => {
|
857
|
-
if (isEmpty || isAllSelected)
|
858
|
-
return;
|
851
|
+
if (isEmpty || isAllSelected) return;
|
859
852
|
const first = descendants.enabledFirstValue(
|
860
853
|
({ node }) => "target" in node.dataset
|
861
854
|
);
|
862
|
-
if (!first)
|
863
|
-
return;
|
855
|
+
if (!first) return;
|
864
856
|
if (!isMulti || !omitSelectedValues) {
|
865
857
|
setFocusedIndex(first.index);
|
866
858
|
} else {
|
@@ -884,13 +876,11 @@ var useAutocomplete = ({
|
|
884
876
|
]);
|
885
877
|
const onFocusLast = useCallback(() => {
|
886
878
|
const id2 = setTimeout(() => {
|
887
|
-
if (isEmpty || isAllSelected)
|
888
|
-
return;
|
879
|
+
if (isEmpty || isAllSelected) return;
|
889
880
|
const last = descendants.enabledLastValue(
|
890
881
|
({ node }) => "target" in node.dataset
|
891
882
|
);
|
892
|
-
if (!last)
|
893
|
-
return;
|
883
|
+
if (!last) return;
|
894
884
|
if (!isMulti || !omitSelectedValues) {
|
895
885
|
setFocusedIndex(last.index);
|
896
886
|
} else {
|
@@ -921,8 +911,7 @@ var useAutocomplete = ({
|
|
921
911
|
return !isMulti ? node.dataset.value === value : value.includes((_a = node.dataset.value) != null ? _a : "");
|
922
912
|
}
|
923
913
|
);
|
924
|
-
if (selected)
|
925
|
-
setFocusedIndex(selected.index);
|
914
|
+
if (selected) setFocusedIndex(selected.index);
|
926
915
|
});
|
927
916
|
timeoutIds.current.add(id2);
|
928
917
|
}, [descendants, isMulti, value]);
|
@@ -934,8 +923,7 @@ var useAutocomplete = ({
|
|
934
923
|
index,
|
935
924
|
({ node }) => "target" in node.dataset
|
936
925
|
);
|
937
|
-
if (!next)
|
938
|
-
return;
|
926
|
+
if (!next) return;
|
939
927
|
if (!isMulti || !omitSelectedValues) {
|
940
928
|
setFocusedIndex(next.index);
|
941
929
|
} else {
|
@@ -966,8 +954,7 @@ var useAutocomplete = ({
|
|
966
954
|
index,
|
967
955
|
({ node }) => "target" in node.dataset
|
968
956
|
);
|
969
|
-
if (!prev)
|
970
|
-
return;
|
957
|
+
if (!prev) return;
|
971
958
|
if (!isMulti || !omitSelectedValues) {
|
972
959
|
setFocusedIndex(prev.index);
|
973
960
|
} else {
|
@@ -1021,8 +1008,7 @@ var useAutocomplete = ({
|
|
1021
1008
|
values.forEach(({ node }) => {
|
1022
1009
|
node.dataset.target = "";
|
1023
1010
|
});
|
1024
|
-
if (runFocus)
|
1025
|
-
onFocusFirst();
|
1011
|
+
if (runFocus) onFocusFirst();
|
1026
1012
|
setIsHit(true);
|
1027
1013
|
},
|
1028
1014
|
[descendants, onFocusFirst]
|
@@ -1092,10 +1078,8 @@ var useAutocomplete = ({
|
|
1092
1078
|
}
|
1093
1079
|
).length > 0;
|
1094
1080
|
onChangeLabel(newValue);
|
1095
|
-
if (allowFree || isHit2)
|
1096
|
-
|
1097
|
-
if (isMulti && runRebirth)
|
1098
|
-
rebirthOptions(false);
|
1081
|
+
if (allowFree || isHit2) setInputValue("");
|
1082
|
+
if (isMulti && runRebirth) rebirthOptions(false);
|
1099
1083
|
},
|
1100
1084
|
[
|
1101
1085
|
allowFree,
|
@@ -1112,14 +1096,11 @@ var useAutocomplete = ({
|
|
1112
1096
|
let enabledValue = descendants.value(focusedIndex);
|
1113
1097
|
if ("disabled" in ((_a = enabledValue == null ? void 0 : enabledValue.node.dataset) != null ? _a : {}))
|
1114
1098
|
enabledValue = void 0;
|
1115
|
-
if (!enabledValue)
|
1116
|
-
return;
|
1099
|
+
if (!enabledValue) return;
|
1117
1100
|
const value2 = (_b = enabledValue.node.dataset.value) != null ? _b : "";
|
1118
1101
|
onChange(value2);
|
1119
|
-
if (closeOnSelect)
|
1120
|
-
|
1121
|
-
if (omitSelectedValues)
|
1122
|
-
onFocusNext();
|
1102
|
+
if (closeOnSelect) onClose();
|
1103
|
+
if (omitSelectedValues) onFocusNext();
|
1123
1104
|
}, [
|
1124
1105
|
closeOnSelect,
|
1125
1106
|
descendants,
|
@@ -1131,8 +1112,7 @@ var useAutocomplete = ({
|
|
1131
1112
|
]);
|
1132
1113
|
const onSearch = useCallback(
|
1133
1114
|
(ev) => {
|
1134
|
-
if (!isOpen)
|
1135
|
-
onOpen();
|
1115
|
+
if (!isOpen) onOpen();
|
1136
1116
|
onSearchProp == null ? void 0 : onSearchProp(ev);
|
1137
1117
|
const value2 = ev.target.value;
|
1138
1118
|
const computedValue = format(value2);
|
@@ -1153,12 +1133,10 @@ var useAutocomplete = ({
|
|
1153
1133
|
}, []);
|
1154
1134
|
const onCreate = useCallback(() => {
|
1155
1135
|
var _a, _b;
|
1156
|
-
if (!listRef.current)
|
1157
|
-
return;
|
1136
|
+
if (!listRef.current) return;
|
1158
1137
|
const newItem = { label: inputValue, value: inputValue };
|
1159
1138
|
let newItems = [];
|
1160
|
-
if (resolvedItems)
|
1161
|
-
newItems = resolvedItems;
|
1139
|
+
if (resolvedItems) newItems = resolvedItems;
|
1162
1140
|
if (firstInsertPositionItem === "first") {
|
1163
1141
|
newItems = [newItem, ...newItems];
|
1164
1142
|
} else if (firstInsertPositionItem === "last") {
|
@@ -1201,31 +1179,25 @@ var useAutocomplete = ({
|
|
1201
1179
|
]);
|
1202
1180
|
const onClick = useCallback(() => {
|
1203
1181
|
if (isOpen) {
|
1204
|
-
if (inputRef.current)
|
1205
|
-
inputRef.current.focus();
|
1182
|
+
if (inputRef.current) inputRef.current.focus();
|
1206
1183
|
} else {
|
1207
1184
|
onOpen();
|
1208
1185
|
onFocusFirstOrSelected();
|
1209
1186
|
}
|
1210
1187
|
}, [isOpen, onFocusFirstOrSelected, onOpen]);
|
1211
1188
|
const onFocus = useCallback(() => {
|
1212
|
-
if (isOpen)
|
1213
|
-
return;
|
1189
|
+
if (isOpen) return;
|
1214
1190
|
onOpen();
|
1215
1191
|
onFocusFirstOrSelected();
|
1216
1192
|
}, [isOpen, onFocusFirstOrSelected, onOpen]);
|
1217
1193
|
const onBlur = useCallback(
|
1218
1194
|
(ev) => {
|
1219
1195
|
const relatedTarget = getEventRelatedTarget(ev);
|
1220
|
-
if (isContains(containerRef.current, relatedTarget))
|
1221
|
-
|
1222
|
-
if (
|
1223
|
-
return;
|
1224
|
-
if (allowFree && !!inputValue)
|
1225
|
-
onChange(inputValue, false);
|
1196
|
+
if (isContains(containerRef.current, relatedTarget)) return;
|
1197
|
+
if (!closeOnBlur && isHit) return;
|
1198
|
+
if (allowFree && !!inputValue) onChange(inputValue, false);
|
1226
1199
|
setInputValue("");
|
1227
|
-
if (isOpen)
|
1228
|
-
onClose();
|
1200
|
+
if (isOpen) onClose();
|
1229
1201
|
},
|
1230
1202
|
[closeOnBlur, isHit, isOpen, inputValue, allowFree, onClose, onChange]
|
1231
1203
|
);
|
@@ -1235,8 +1207,7 @@ var useAutocomplete = ({
|
|
1235
1207
|
} else {
|
1236
1208
|
onChange(value[value.length - 1]);
|
1237
1209
|
}
|
1238
|
-
if (!isOpen)
|
1239
|
-
onFocus();
|
1210
|
+
if (!isOpen) onFocus();
|
1240
1211
|
}, [isMulti, isOpen, onChange, onFocus, value]);
|
1241
1212
|
const onClear = useCallback(
|
1242
1213
|
(ev) => {
|
@@ -1246,27 +1217,22 @@ var useAutocomplete = ({
|
|
1246
1217
|
setLabel(void 0);
|
1247
1218
|
setInputValue("");
|
1248
1219
|
rebirthOptions();
|
1249
|
-
if (isOpen && inputRef.current)
|
1250
|
-
inputRef.current.focus();
|
1220
|
+
if (isOpen && inputRef.current) inputRef.current.focus();
|
1251
1221
|
},
|
1252
1222
|
[isOpen, setLabel, setInputValue, setValue, rebirthOptions]
|
1253
1223
|
);
|
1254
1224
|
const onKeyDown = useCallback(
|
1255
1225
|
(ev) => {
|
1256
|
-
if (ev.key === " ")
|
1257
|
-
|
1258
|
-
if (
|
1259
|
-
return;
|
1260
|
-
if (isComposition.current)
|
1261
|
-
return;
|
1226
|
+
if (ev.key === " ") ev.key = ev.code;
|
1227
|
+
if (formControlProps.disabled || formControlProps.readOnly) return;
|
1228
|
+
if (isComposition.current) return;
|
1262
1229
|
const enabledDelete = label === inputValue || !inputValue.length;
|
1263
1230
|
const actions = {
|
1264
1231
|
ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? funcAll(onOpen, onFocusFirstOrSelected) : void 0,
|
1265
1232
|
ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? funcAll(onOpen, onFocusLastOrSelected) : void 0,
|
1266
1233
|
Space: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? funcAll(onOpen, onFocusFirstOrSelected) : void 0,
|
1267
1234
|
Enter: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? funcAll(onOpen, onFocusFirstOrSelected) : allowFree && isMulti ? () => {
|
1268
|
-
if (inputValue)
|
1269
|
-
onChange(inputValue);
|
1235
|
+
if (inputValue) onChange(inputValue);
|
1270
1236
|
setFocusedIndex(0);
|
1271
1237
|
} : void 0,
|
1272
1238
|
Home: isOpen ? onFocusFirst : void 0,
|
@@ -1275,8 +1241,7 @@ var useAutocomplete = ({
|
|
1275
1241
|
Backspace: !isEmptyValue && enabledDelete ? onDelete : void 0
|
1276
1242
|
};
|
1277
1243
|
const action = actions[ev.key];
|
1278
|
-
if (!action)
|
1279
|
-
return;
|
1244
|
+
if (!action) return;
|
1280
1245
|
ev.preventDefault();
|
1281
1246
|
ev.stopPropagation();
|
1282
1247
|
action(ev);
|
@@ -1307,10 +1272,8 @@ var useAutocomplete = ({
|
|
1307
1272
|
]
|
1308
1273
|
);
|
1309
1274
|
useEffect(() => {
|
1310
|
-
if (!isMulti)
|
1311
|
-
|
1312
|
-
if (!omitSelectedValues && isUndefined(maxSelectValues))
|
1313
|
-
return;
|
1275
|
+
if (!isMulti) return;
|
1276
|
+
if (!omitSelectedValues && isUndefined(maxSelectValues)) return;
|
1314
1277
|
const isAll = value.length > 0 && value.length === descendants.count();
|
1315
1278
|
const isMax = value.length === maxSelectValues;
|
1316
1279
|
if (isAll || isMax) {
|
@@ -1335,20 +1298,17 @@ var useAutocomplete = ({
|
|
1335
1298
|
const label2 = getSelectedValues(value);
|
1336
1299
|
setLabel(label2);
|
1337
1300
|
} else {
|
1338
|
-
if (prevValue.current === value)
|
1339
|
-
return;
|
1301
|
+
if (prevValue.current === value) return;
|
1340
1302
|
onChangeLabel(value, false);
|
1341
1303
|
}
|
1342
1304
|
}, [isMulti, value, onChangeLabel, getSelectedValues]);
|
1343
1305
|
useUpdateEffect(() => {
|
1344
|
-
if (isOpen || allowFree)
|
1345
|
-
return;
|
1306
|
+
if (isOpen || allowFree) return;
|
1346
1307
|
setFocusedIndex(-1);
|
1347
1308
|
setInputValue("");
|
1348
1309
|
}, [isOpen]);
|
1349
1310
|
useUpdateEffect(() => {
|
1350
|
-
if (!isHit)
|
1351
|
-
setFocusedIndex(-2);
|
1311
|
+
if (!isHit) setFocusedIndex(-2);
|
1352
1312
|
}, [isHit]);
|
1353
1313
|
useUnmountEffect(() => {
|
1354
1314
|
timeoutIds.current.forEach((id2) => clearTimeout(id2));
|
@@ -1457,8 +1417,7 @@ var useAutocompleteInput = () => {
|
|
1457
1417
|
isOpen
|
1458
1418
|
} = useAutocompleteContext();
|
1459
1419
|
useUpdateEffect(() => {
|
1460
|
-
if (isAllSelected && inputRef.current)
|
1461
|
-
inputRef.current.blur();
|
1420
|
+
if (isAllSelected && inputRef.current) inputRef.current.blur();
|
1462
1421
|
}, [isAllSelected]);
|
1463
1422
|
const getInputProps = useCallback(
|
1464
1423
|
(props = {}, ref = null) => ({
|
@@ -1511,14 +1470,11 @@ var useAutocompleteList = () => {
|
|
1511
1470
|
const beforeFocusedIndex = useRef2(-1);
|
1512
1471
|
const selectedValue = descendants.value(focusedIndex);
|
1513
1472
|
const onAnimationComplete = useCallback(() => {
|
1514
|
-
if (!isOpen)
|
1515
|
-
rebirthOptions(false);
|
1473
|
+
if (!isOpen) rebirthOptions(false);
|
1516
1474
|
}, [isOpen, rebirthOptions]);
|
1517
1475
|
useEffect(() => {
|
1518
|
-
if (!listRef.current || !selectedValue)
|
1519
|
-
|
1520
|
-
if (beforeFocusedIndex.current === selectedValue.index)
|
1521
|
-
return;
|
1476
|
+
if (!listRef.current || !selectedValue) return;
|
1477
|
+
if (beforeFocusedIndex.current === selectedValue.index) return;
|
1522
1478
|
const parent = listRef.current;
|
1523
1479
|
const child = selectedValue.node;
|
1524
1480
|
const parentHeight = parent.clientHeight;
|
@@ -1543,8 +1499,7 @@ var useAutocompleteList = () => {
|
|
1543
1499
|
beforeFocusedIndex.current = selectedValue.index;
|
1544
1500
|
}, [listRef, selectedValue]);
|
1545
1501
|
useUpdateEffect(() => {
|
1546
|
-
if (!isOpen)
|
1547
|
-
beforeFocusedIndex.current = -1;
|
1502
|
+
if (!isOpen) beforeFocusedIndex.current = -1;
|
1548
1503
|
}, [isOpen]);
|
1549
1504
|
const getListProps = useCallback(
|
1550
1505
|
(props = {}, ref = null) => ({
|
@@ -1667,23 +1622,18 @@ var useAutocompleteOption = (props) => {
|
|
1667
1622
|
(ev) => {
|
1668
1623
|
ev.stopPropagation();
|
1669
1624
|
if (isDisabled) {
|
1670
|
-
if (inputRef.current)
|
1671
|
-
inputRef.current.focus();
|
1625
|
+
if (inputRef.current) inputRef.current.focus();
|
1672
1626
|
return;
|
1673
1627
|
}
|
1674
1628
|
if (!isTargetOption(ev.currentTarget)) {
|
1675
|
-
if (inputRef.current)
|
1676
|
-
inputRef.current.focus();
|
1629
|
+
if (inputRef.current) inputRef.current.focus();
|
1677
1630
|
return;
|
1678
1631
|
}
|
1679
1632
|
setFocusedIndex(index);
|
1680
1633
|
onChange(optionValue != null ? optionValue : "");
|
1681
|
-
if (inputRef.current)
|
1682
|
-
|
1683
|
-
if (
|
1684
|
-
onClose();
|
1685
|
-
if (omitSelectedValues)
|
1686
|
-
onFocusNext(index);
|
1634
|
+
if (inputRef.current) inputRef.current.focus();
|
1635
|
+
if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect) onClose();
|
1636
|
+
if (omitSelectedValues) onFocusNext(index);
|
1687
1637
|
},
|
1688
1638
|
[
|
1689
1639
|
onFocusNext,
|
@@ -1700,8 +1650,7 @@ var useAutocompleteOption = (props) => {
|
|
1700
1650
|
]
|
1701
1651
|
);
|
1702
1652
|
useUpdateEffect(() => {
|
1703
|
-
if (isSelected)
|
1704
|
-
onChangeLabel(optionValue != null ? optionValue : "", false);
|
1653
|
+
if (isSelected) onChangeLabel(optionValue != null ? optionValue : "", false);
|
1705
1654
|
}, [optionValue]);
|
1706
1655
|
const getOptionProps = useCallback(
|
1707
1656
|
(props2 = {}, ref = null) => {
|
@@ -1855,4 +1804,4 @@ export {
|
|
1855
1804
|
AutocompleteItemIcon,
|
1856
1805
|
AutocompleteCreate
|
1857
1806
|
};
|
1858
|
-
//# sourceMappingURL=chunk-
|
1807
|
+
//# sourceMappingURL=chunk-W7B7WEFQ.mjs.map
|