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