@yamada-ui/autocomplete 0.2.10 → 0.2.12
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.js +24 -17
- package/dist/autocomplete-create.mjs +1 -1
- package/dist/autocomplete-empty.js +24 -17
- package/dist/autocomplete-empty.mjs +1 -1
- package/dist/autocomplete-icon.js +30 -23
- package/dist/autocomplete-icon.mjs +1 -1
- package/dist/autocomplete-list.js +4 -1
- package/dist/autocomplete-list.mjs +1 -1
- package/dist/autocomplete-option-group.d.mts +1 -1
- package/dist/autocomplete-option-group.d.ts +1 -1
- package/dist/autocomplete-option-group.js +10 -5
- package/dist/autocomplete-option-group.mjs +1 -1
- package/dist/autocomplete-option.d.mts +1 -1
- package/dist/autocomplete-option.d.ts +1 -1
- package/dist/autocomplete-option.js +33 -22
- package/dist/autocomplete-option.mjs +1 -1
- package/dist/autocomplete.d.mts +1 -1
- package/dist/autocomplete.d.ts +1 -1
- package/dist/autocomplete.js +226 -120
- package/dist/autocomplete.mjs +1 -1
- package/dist/{chunk-5O3XEEJE.mjs → chunk-ZVZP7IWT.mjs} +352 -229
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +345 -229
- package/dist/index.mjs +1 -1
- package/dist/multi-autocomplete.d.mts +1 -1
- package/dist/multi-autocomplete.d.ts +1 -1
- package/dist/multi-autocomplete.js +245 -149
- package/dist/multi-autocomplete.mjs +1 -1
- package/dist/{use-autocomplete-cbe9b443.d.ts → use-autocomplete-2422c1c8.d.ts} +25 -5
- package/dist/use-autocomplete.d.mts +1 -1
- package/dist/use-autocomplete.d.ts +1 -1
- package/dist/use-autocomplete.js +131 -45
- package/dist/use-autocomplete.mjs +1 -1
- package/package.json +11 -11
package/dist/index.mjs
CHANGED
|
@@ -3,7 +3,7 @@ import { ThemeProps, HTMLUIProps } from '@yamada-ui/core';
|
|
|
3
3
|
import { FC, MouseEventHandler } from 'react';
|
|
4
4
|
import { AutocompleteIconProps } from './autocomplete-icon.mjs';
|
|
5
5
|
import { AutocompleteListProps } from './autocomplete-list.mjs';
|
|
6
|
-
import { b as UseAutocompleteProps } from './use-autocomplete-
|
|
6
|
+
import { b as UseAutocompleteProps } from './use-autocomplete-2422c1c8.js';
|
|
7
7
|
import 'react/jsx-runtime';
|
|
8
8
|
import '@yamada-ui/form-control';
|
|
9
9
|
import '@yamada-ui/popover';
|
|
@@ -3,7 +3,7 @@ import { ThemeProps, HTMLUIProps } from '@yamada-ui/core';
|
|
|
3
3
|
import { FC, MouseEventHandler } from 'react';
|
|
4
4
|
import { AutocompleteIconProps } from './autocomplete-icon.js';
|
|
5
5
|
import { AutocompleteListProps } from './autocomplete-list.js';
|
|
6
|
-
import { b as UseAutocompleteProps } from './use-autocomplete-
|
|
6
|
+
import { b as UseAutocompleteProps } from './use-autocomplete-2422c1c8.js';
|
|
7
7
|
import 'react/jsx-runtime';
|
|
8
8
|
import '@yamada-ui/form-control';
|
|
9
9
|
import '@yamada-ui/popover';
|
|
@@ -338,7 +338,10 @@ var kanaMap = {
|
|
|
338
338
|
"\uFF65": "\u30FB"
|
|
339
339
|
};
|
|
340
340
|
var defaultFormat = (value) => {
|
|
341
|
-
value = value.replace(
|
|
341
|
+
value = value.replace(
|
|
342
|
+
/[!-~]/g,
|
|
343
|
+
(v) => String.fromCharCode(v.charCodeAt(0) - 65248)
|
|
344
|
+
);
|
|
342
345
|
const reg = new RegExp("(" + Object.keys(kanaMap).join("|") + ")", "g");
|
|
343
346
|
value = value.replace(reg, (v) => kanaMap[v]).replace(/゙/g, "\u309B").replace(/゚/g, "\u309C");
|
|
344
347
|
value = value.toUpperCase();
|
|
@@ -395,7 +398,14 @@ var useAutocomplete = ({
|
|
|
395
398
|
const { id } = rest;
|
|
396
399
|
const formControlProps = (0, import_utils6.pickObject)(rest, import_form_control.formControlProperties);
|
|
397
400
|
const [containerProps, inputProps] = (0, import_utils6.splitObject)(
|
|
398
|
-
(0, import_utils6.omitObject)(rest, [
|
|
401
|
+
(0, import_utils6.omitObject)(rest, [
|
|
402
|
+
"id",
|
|
403
|
+
"value",
|
|
404
|
+
"defaultValue",
|
|
405
|
+
"onChange",
|
|
406
|
+
"month",
|
|
407
|
+
"onChangeMonth"
|
|
408
|
+
]),
|
|
399
409
|
import_core6.layoutStylesProperties
|
|
400
410
|
);
|
|
401
411
|
const descendants = useAutocompleteDescendants();
|
|
@@ -447,9 +457,17 @@ var useAutocomplete = ({
|
|
|
447
457
|
if (!(0, import_utils6.isArray)(value2)) {
|
|
448
458
|
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteOption, { value: value2, ...props, children: label }, i);
|
|
449
459
|
} else {
|
|
450
|
-
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
451
|
-
|
|
452
|
-
|
|
460
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
461
|
+
AutocompleteOptionGroup,
|
|
462
|
+
{
|
|
463
|
+
label,
|
|
464
|
+
...props,
|
|
465
|
+
children: value2.map(
|
|
466
|
+
({ label: label2, value: value3, ...props2 }, i2) => !(0, import_utils6.isArray)(value3) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteOption, { value: value3, ...props2, children: label2 }, i2) : null
|
|
467
|
+
)
|
|
468
|
+
},
|
|
469
|
+
i
|
|
470
|
+
);
|
|
453
471
|
}
|
|
454
472
|
});
|
|
455
473
|
const isEmpty = !validChildren.length && !(computedChildren == null ? void 0 : computedChildren.length);
|
|
@@ -473,7 +491,9 @@ var useAutocomplete = ({
|
|
|
473
491
|
const id2 = setTimeout(() => {
|
|
474
492
|
if (isEmpty || isAllSelected)
|
|
475
493
|
return;
|
|
476
|
-
const first = descendants.enabledfirstValue(
|
|
494
|
+
const first = descendants.enabledfirstValue(
|
|
495
|
+
({ node }) => "target" in node.dataset
|
|
496
|
+
);
|
|
477
497
|
if (!first)
|
|
478
498
|
return;
|
|
479
499
|
if (!isMulti || !omitSelectedValues) {
|
|
@@ -501,7 +521,9 @@ var useAutocomplete = ({
|
|
|
501
521
|
const id2 = setTimeout(() => {
|
|
502
522
|
if (isEmpty || isAllSelected)
|
|
503
523
|
return;
|
|
504
|
-
const last = descendants.enabledlastValue(
|
|
524
|
+
const last = descendants.enabledlastValue(
|
|
525
|
+
({ node }) => "target" in node.dataset
|
|
526
|
+
);
|
|
505
527
|
if (!last)
|
|
506
528
|
return;
|
|
507
529
|
if (!isMulti || !omitSelectedValues) {
|
|
@@ -543,7 +565,10 @@ var useAutocomplete = ({
|
|
|
543
565
|
(index = focusedIndex) => {
|
|
544
566
|
const id2 = setTimeout(() => {
|
|
545
567
|
var _a;
|
|
546
|
-
const next = descendants.enabledNextValue(
|
|
568
|
+
const next = descendants.enabledNextValue(
|
|
569
|
+
index,
|
|
570
|
+
({ node }) => "target" in node.dataset
|
|
571
|
+
);
|
|
547
572
|
if (!next)
|
|
548
573
|
return;
|
|
549
574
|
if (!isMulti || !omitSelectedValues) {
|
|
@@ -559,13 +584,23 @@ var useAutocomplete = ({
|
|
|
559
584
|
});
|
|
560
585
|
timeoutIds.current.add(id2);
|
|
561
586
|
},
|
|
562
|
-
[
|
|
587
|
+
[
|
|
588
|
+
descendants,
|
|
589
|
+
enabledValues,
|
|
590
|
+
focusedIndex,
|
|
591
|
+
isMulti,
|
|
592
|
+
omitSelectedValues,
|
|
593
|
+
selectedIndexes
|
|
594
|
+
]
|
|
563
595
|
);
|
|
564
596
|
const onFocusPrev = (0, import_react.useCallback)(
|
|
565
597
|
(index = focusedIndex) => {
|
|
566
598
|
const id2 = setTimeout(() => {
|
|
567
599
|
var _a;
|
|
568
|
-
const prev = descendants.enabledPrevValue(
|
|
600
|
+
const prev = descendants.enabledPrevValue(
|
|
601
|
+
index,
|
|
602
|
+
({ node }) => "target" in node.dataset
|
|
603
|
+
);
|
|
569
604
|
if (!prev)
|
|
570
605
|
return;
|
|
571
606
|
if (!isMulti || !omitSelectedValues) {
|
|
@@ -581,7 +616,14 @@ var useAutocomplete = ({
|
|
|
581
616
|
});
|
|
582
617
|
timeoutIds.current.add(id2);
|
|
583
618
|
},
|
|
584
|
-
[
|
|
619
|
+
[
|
|
620
|
+
descendants,
|
|
621
|
+
enabledValues,
|
|
622
|
+
focusedIndex,
|
|
623
|
+
isMulti,
|
|
624
|
+
omitSelectedValues,
|
|
625
|
+
selectedIndexes
|
|
626
|
+
]
|
|
585
627
|
);
|
|
586
628
|
const onFocusFirstOrSelected = isEmptyValue || omitSelectedValues ? onFocusFirst : onFocusSelected;
|
|
587
629
|
const onFocusLastOrSelected = isEmptyValue || omitSelectedValues ? onFocusLast : onFocusSelected;
|
|
@@ -678,7 +720,15 @@ var useAutocomplete = ({
|
|
|
678
720
|
onClose();
|
|
679
721
|
if (omitSelectedValues)
|
|
680
722
|
onFocusNext();
|
|
681
|
-
}, [
|
|
723
|
+
}, [
|
|
724
|
+
closeOnSelect,
|
|
725
|
+
descendants,
|
|
726
|
+
focusedIndex,
|
|
727
|
+
omitSelectedValues,
|
|
728
|
+
onChange,
|
|
729
|
+
onClose,
|
|
730
|
+
onFocusNext
|
|
731
|
+
]);
|
|
682
732
|
const onSearch = (0, import_react.useCallback)(
|
|
683
733
|
(ev) => {
|
|
684
734
|
var _a;
|
|
@@ -715,12 +765,20 @@ var useAutocomplete = ({
|
|
|
715
765
|
} else if (firstInsertPositionOnCreate === "last") {
|
|
716
766
|
newOptions = [...newOptions, newOption];
|
|
717
767
|
} else {
|
|
718
|
-
const i = newOptions.findIndex(
|
|
768
|
+
const i = newOptions.findIndex(
|
|
769
|
+
({ label }) => label === firstInsertPositionOnCreate
|
|
770
|
+
);
|
|
719
771
|
if (i !== -1 && (0, import_utils6.isArray)(newOptions[i].value)) {
|
|
720
772
|
if (secondInsertPositionOnCreate === "first") {
|
|
721
|
-
newOptions[i].value = [
|
|
773
|
+
newOptions[i].value = [
|
|
774
|
+
newOption,
|
|
775
|
+
...newOptions[i].value
|
|
776
|
+
];
|
|
722
777
|
} else {
|
|
723
|
-
newOptions[i].value = [
|
|
778
|
+
newOptions[i].value = [
|
|
779
|
+
...newOptions[i].value,
|
|
780
|
+
newOption
|
|
781
|
+
];
|
|
724
782
|
}
|
|
725
783
|
} else {
|
|
726
784
|
console.warn(
|
|
@@ -731,7 +789,9 @@ var useAutocomplete = ({
|
|
|
731
789
|
setOptions(newOptions);
|
|
732
790
|
onChange(inputValue);
|
|
733
791
|
rebirthOptions(false);
|
|
734
|
-
const index = flattenOptions(newOptions).findIndex(
|
|
792
|
+
const index = flattenOptions(newOptions).findIndex(
|
|
793
|
+
({ value: value2 }) => value2 === inputValue
|
|
794
|
+
);
|
|
735
795
|
setFocusedIndex(index);
|
|
736
796
|
(_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newOptions);
|
|
737
797
|
}, [
|
|
@@ -850,7 +910,14 @@ var useAutocomplete = ({
|
|
|
850
910
|
} else {
|
|
851
911
|
setIsAllSelected(false);
|
|
852
912
|
}
|
|
853
|
-
}, [
|
|
913
|
+
}, [
|
|
914
|
+
omitSelectedValues,
|
|
915
|
+
value,
|
|
916
|
+
descendants,
|
|
917
|
+
isMulti,
|
|
918
|
+
onClose,
|
|
919
|
+
maxSelectedValues
|
|
920
|
+
]);
|
|
854
921
|
(0, import_utils6.useUpdateEffect)(() => {
|
|
855
922
|
if (isOpen)
|
|
856
923
|
return;
|
|
@@ -1052,7 +1119,10 @@ var useAutocompleteList = () => {
|
|
|
1052
1119
|
role: "select",
|
|
1053
1120
|
tabIndex: -1,
|
|
1054
1121
|
...props,
|
|
1055
|
-
onAnimationComplete: (0, import_utils6.handlerAll)(
|
|
1122
|
+
onAnimationComplete: (0, import_utils6.handlerAll)(
|
|
1123
|
+
props.onAnimationComplete,
|
|
1124
|
+
onAnimationComplete
|
|
1125
|
+
)
|
|
1056
1126
|
}),
|
|
1057
1127
|
[listRef, onAnimationComplete]
|
|
1058
1128
|
);
|
|
@@ -1060,15 +1130,20 @@ var useAutocompleteList = () => {
|
|
|
1060
1130
|
getListProps
|
|
1061
1131
|
};
|
|
1062
1132
|
};
|
|
1063
|
-
var useAutocompleteOptionGroup = ({
|
|
1133
|
+
var useAutocompleteOptionGroup = ({
|
|
1134
|
+
label,
|
|
1135
|
+
...rest
|
|
1136
|
+
}) => {
|
|
1064
1137
|
const { value, omitSelectedValues } = useAutocompleteContext();
|
|
1065
1138
|
const isMulti = (0, import_utils6.isArray)(value);
|
|
1066
1139
|
const descendants = useAutocompleteDescendantsContext();
|
|
1067
1140
|
const values = descendants.values();
|
|
1068
|
-
const selectedValues = isMulti && omitSelectedValues ? descendants.values(
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1141
|
+
const selectedValues = isMulti && omitSelectedValues ? descendants.values(
|
|
1142
|
+
({ node }) => {
|
|
1143
|
+
var _a;
|
|
1144
|
+
return value.includes((_a = node.dataset.value) != null ? _a : "");
|
|
1145
|
+
}
|
|
1146
|
+
) : [];
|
|
1072
1147
|
const selectedIndexes = selectedValues.map(({ index }) => index);
|
|
1073
1148
|
const childValues = values.filter(
|
|
1074
1149
|
({ node, index }) => {
|
|
@@ -1143,14 +1218,18 @@ var useAutocompleteOption = (props) => {
|
|
|
1143
1218
|
} = { ...optionProps, ...props };
|
|
1144
1219
|
const trulyDisabled = !!isDisabled && !isFocusable;
|
|
1145
1220
|
const itemRef = (0, import_react.useRef)(null);
|
|
1146
|
-
const { index, register, descendants } = useAutocompleteDescendant({
|
|
1221
|
+
const { index, register, descendants } = useAutocompleteDescendant({
|
|
1222
|
+
disabled: trulyDisabled
|
|
1223
|
+
});
|
|
1147
1224
|
const values = descendants.values();
|
|
1148
1225
|
const frontValues = values.slice(0, index);
|
|
1149
1226
|
const isMulti = (0, import_utils6.isArray)(value);
|
|
1150
|
-
const isDuplicated = !isMulti ? frontValues.some(
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1227
|
+
const isDuplicated = !isMulti ? frontValues.some(
|
|
1228
|
+
({ node }) => {
|
|
1229
|
+
var _a2;
|
|
1230
|
+
return node.dataset.value === ((_a2 = computedProps.value) != null ? _a2 : "");
|
|
1231
|
+
}
|
|
1232
|
+
) : false;
|
|
1154
1233
|
const isSelected = !isDuplicated && (!isMulti ? ((_a = computedProps.value) != null ? _a : "") === value : value.includes((_b = computedProps.value) != null ? _b : ""));
|
|
1155
1234
|
const isTarget = "target" in ((_d = (_c = itemRef.current) == null ? void 0 : _c.dataset) != null ? _d : {});
|
|
1156
1235
|
const isFocused = index === focusedIndex;
|
|
@@ -1329,7 +1408,16 @@ var AutocompleteIcon = (0, import_core7.forwardRef)(
|
|
|
1329
1408
|
}
|
|
1330
1409
|
})
|
|
1331
1410
|
);
|
|
1332
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1411
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1412
|
+
import_core7.ui.div,
|
|
1413
|
+
{
|
|
1414
|
+
ref,
|
|
1415
|
+
className: (0, import_utils7.cx)("ui-autocomplete-icon", className),
|
|
1416
|
+
__css: css,
|
|
1417
|
+
...rest,
|
|
1418
|
+
children: (0, import_utils7.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icon.ChevronIcon, {})
|
|
1419
|
+
}
|
|
1420
|
+
);
|
|
1333
1421
|
}
|
|
1334
1422
|
);
|
|
1335
1423
|
var AutocompleteClearIcon = ({
|
|
@@ -1355,131 +1443,131 @@ var AutocompleteClearIcon = ({
|
|
|
1355
1443
|
}
|
|
1356
1444
|
);
|
|
1357
1445
|
};
|
|
1358
|
-
var AutocompleteItemIcon = (0, import_core7.forwardRef)(
|
|
1359
|
-
|
|
1360
|
-
|
|
1446
|
+
var AutocompleteItemIcon = (0, import_core7.forwardRef)(({ className, ...rest }, ref) => {
|
|
1447
|
+
const { styles } = useAutocompleteContext();
|
|
1448
|
+
const css = {
|
|
1449
|
+
flexShrink: 0,
|
|
1450
|
+
display: "inline-flex",
|
|
1451
|
+
justifyContent: "center",
|
|
1452
|
+
alignItems: "center",
|
|
1453
|
+
fontSize: "0.85em",
|
|
1454
|
+
...styles.itemIcon
|
|
1455
|
+
};
|
|
1456
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1457
|
+
import_core7.ui.span,
|
|
1458
|
+
{
|
|
1459
|
+
ref,
|
|
1460
|
+
className: (0, import_utils7.cx)("ui-autocomplete-item-icon", className),
|
|
1461
|
+
__css: css,
|
|
1462
|
+
...rest
|
|
1463
|
+
}
|
|
1464
|
+
);
|
|
1465
|
+
});
|
|
1466
|
+
|
|
1467
|
+
// src/multi-autocomplete.tsx
|
|
1468
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1469
|
+
var MultiAutocomplete = (0, import_core8.forwardRef)(
|
|
1470
|
+
(props, ref) => {
|
|
1471
|
+
const [styles, mergedProps] = (0, import_core8.useMultiComponentStyle)("Select", props);
|
|
1472
|
+
let {
|
|
1473
|
+
className,
|
|
1474
|
+
defaultValue = [],
|
|
1475
|
+
component,
|
|
1476
|
+
separator,
|
|
1477
|
+
isClearable = true,
|
|
1478
|
+
color,
|
|
1479
|
+
h,
|
|
1480
|
+
height,
|
|
1481
|
+
minH,
|
|
1482
|
+
minHeight,
|
|
1483
|
+
closeOnSelect = false,
|
|
1484
|
+
keepPlaceholder = false,
|
|
1485
|
+
containerProps,
|
|
1486
|
+
listProps,
|
|
1487
|
+
inputProps,
|
|
1488
|
+
iconProps,
|
|
1489
|
+
clearIconProps,
|
|
1490
|
+
children,
|
|
1491
|
+
...computedProps
|
|
1492
|
+
} = (0, import_core8.omitThemeProps)(mergedProps);
|
|
1493
|
+
const {
|
|
1494
|
+
value,
|
|
1495
|
+
descendants,
|
|
1496
|
+
formControlProps,
|
|
1497
|
+
getPopoverProps,
|
|
1498
|
+
getContainerProps,
|
|
1499
|
+
getFieldProps,
|
|
1500
|
+
createOption,
|
|
1501
|
+
isEmpty,
|
|
1502
|
+
inputValue,
|
|
1503
|
+
computedChildren,
|
|
1504
|
+
onClear,
|
|
1505
|
+
...rest
|
|
1506
|
+
} = useAutocomplete({
|
|
1507
|
+
...computedProps,
|
|
1508
|
+
defaultValue,
|
|
1509
|
+
closeOnSelect,
|
|
1510
|
+
children
|
|
1511
|
+
});
|
|
1512
|
+
h = h != null ? h : height;
|
|
1513
|
+
minH = minH != null ? minH : minHeight;
|
|
1361
1514
|
const css = {
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
...styles.itemIcon
|
|
1515
|
+
position: "relative",
|
|
1516
|
+
w: "100%",
|
|
1517
|
+
h: "fit-content",
|
|
1518
|
+
color,
|
|
1519
|
+
...styles.container
|
|
1368
1520
|
};
|
|
1369
|
-
return /* @__PURE__ */ (0,
|
|
1370
|
-
|
|
1521
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteDescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1522
|
+
AutocompleteProvider,
|
|
1371
1523
|
{
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1524
|
+
value: {
|
|
1525
|
+
...rest,
|
|
1526
|
+
value,
|
|
1527
|
+
formControlProps,
|
|
1528
|
+
inputValue,
|
|
1529
|
+
createOption,
|
|
1530
|
+
isEmpty,
|
|
1531
|
+
styles
|
|
1532
|
+
},
|
|
1533
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_popover2.Popover, { ...getPopoverProps(), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
1534
|
+
import_core8.ui.div,
|
|
1535
|
+
{
|
|
1536
|
+
className: (0, import_utils8.cx)("ui-autocomplete", className),
|
|
1537
|
+
__css: css,
|
|
1538
|
+
...getContainerProps(containerProps),
|
|
1539
|
+
children: [
|
|
1540
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1541
|
+
MultiAutocompleteField,
|
|
1542
|
+
{
|
|
1543
|
+
component,
|
|
1544
|
+
separator,
|
|
1545
|
+
keepPlaceholder,
|
|
1546
|
+
h,
|
|
1547
|
+
minH,
|
|
1548
|
+
inputProps,
|
|
1549
|
+
...getFieldProps({}, ref)
|
|
1550
|
+
}
|
|
1551
|
+
),
|
|
1552
|
+
isClearable && value.length ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1553
|
+
AutocompleteClearIcon,
|
|
1554
|
+
{
|
|
1555
|
+
...clearIconProps,
|
|
1556
|
+
onClick: (0, import_utils8.handlerAll)(clearIconProps == null ? void 0 : clearIconProps.onClick, onClear),
|
|
1557
|
+
...formControlProps
|
|
1558
|
+
}
|
|
1559
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteIcon, { ...iconProps, ...formControlProps }),
|
|
1560
|
+
!isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(AutocompleteList, { ...listProps, children: [
|
|
1561
|
+
createOption ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteCreate, {}) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteEmpty, {}),
|
|
1562
|
+
children != null ? children : computedChildren
|
|
1563
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteList, { ...listProps, children: createOption && inputValue ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteCreate, {}) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteEmpty, {}) })
|
|
1564
|
+
]
|
|
1565
|
+
}
|
|
1566
|
+
) })
|
|
1376
1567
|
}
|
|
1377
|
-
);
|
|
1568
|
+
) });
|
|
1378
1569
|
}
|
|
1379
1570
|
);
|
|
1380
|
-
|
|
1381
|
-
// src/multi-autocomplete.tsx
|
|
1382
|
-
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1383
|
-
var MultiAutocomplete = (0, import_core8.forwardRef)((props, ref) => {
|
|
1384
|
-
const [styles, mergedProps] = (0, import_core8.useMultiComponentStyle)("Select", props);
|
|
1385
|
-
let {
|
|
1386
|
-
className,
|
|
1387
|
-
defaultValue = [],
|
|
1388
|
-
component,
|
|
1389
|
-
separator,
|
|
1390
|
-
isClearable = true,
|
|
1391
|
-
color,
|
|
1392
|
-
h,
|
|
1393
|
-
height,
|
|
1394
|
-
minH,
|
|
1395
|
-
minHeight,
|
|
1396
|
-
closeOnSelect = false,
|
|
1397
|
-
keepPlaceholder = false,
|
|
1398
|
-
containerProps,
|
|
1399
|
-
listProps,
|
|
1400
|
-
inputProps,
|
|
1401
|
-
iconProps,
|
|
1402
|
-
clearIconProps,
|
|
1403
|
-
children,
|
|
1404
|
-
...computedProps
|
|
1405
|
-
} = (0, import_core8.omitThemeProps)(mergedProps);
|
|
1406
|
-
const {
|
|
1407
|
-
value,
|
|
1408
|
-
descendants,
|
|
1409
|
-
formControlProps,
|
|
1410
|
-
getPopoverProps,
|
|
1411
|
-
getContainerProps,
|
|
1412
|
-
getFieldProps,
|
|
1413
|
-
createOption,
|
|
1414
|
-
isEmpty,
|
|
1415
|
-
inputValue,
|
|
1416
|
-
computedChildren,
|
|
1417
|
-
onClear,
|
|
1418
|
-
...rest
|
|
1419
|
-
} = useAutocomplete({
|
|
1420
|
-
...computedProps,
|
|
1421
|
-
defaultValue,
|
|
1422
|
-
closeOnSelect,
|
|
1423
|
-
children
|
|
1424
|
-
});
|
|
1425
|
-
h = h != null ? h : height;
|
|
1426
|
-
minH = minH != null ? minH : minHeight;
|
|
1427
|
-
const css = {
|
|
1428
|
-
position: "relative",
|
|
1429
|
-
w: "100%",
|
|
1430
|
-
h: "fit-content",
|
|
1431
|
-
color,
|
|
1432
|
-
...styles.container
|
|
1433
|
-
};
|
|
1434
|
-
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteDescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1435
|
-
AutocompleteProvider,
|
|
1436
|
-
{
|
|
1437
|
-
value: {
|
|
1438
|
-
...rest,
|
|
1439
|
-
value,
|
|
1440
|
-
formControlProps,
|
|
1441
|
-
inputValue,
|
|
1442
|
-
createOption,
|
|
1443
|
-
isEmpty,
|
|
1444
|
-
styles
|
|
1445
|
-
},
|
|
1446
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_popover2.Popover, { ...getPopoverProps(), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
1447
|
-
import_core8.ui.div,
|
|
1448
|
-
{
|
|
1449
|
-
className: (0, import_utils8.cx)("ui-autocomplete", className),
|
|
1450
|
-
__css: css,
|
|
1451
|
-
...getContainerProps(containerProps),
|
|
1452
|
-
children: [
|
|
1453
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1454
|
-
MultiAutocompleteField,
|
|
1455
|
-
{
|
|
1456
|
-
component,
|
|
1457
|
-
separator,
|
|
1458
|
-
keepPlaceholder,
|
|
1459
|
-
h,
|
|
1460
|
-
minH,
|
|
1461
|
-
inputProps,
|
|
1462
|
-
...getFieldProps({}, ref)
|
|
1463
|
-
}
|
|
1464
|
-
),
|
|
1465
|
-
isClearable && value.length ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1466
|
-
AutocompleteClearIcon,
|
|
1467
|
-
{
|
|
1468
|
-
...clearIconProps,
|
|
1469
|
-
onClick: (0, import_utils8.handlerAll)(clearIconProps == null ? void 0 : clearIconProps.onClick, onClear),
|
|
1470
|
-
...formControlProps
|
|
1471
|
-
}
|
|
1472
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteIcon, { ...iconProps, ...formControlProps }),
|
|
1473
|
-
!isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(AutocompleteList, { ...listProps, children: [
|
|
1474
|
-
createOption ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteCreate, {}) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteEmpty, {}),
|
|
1475
|
-
children != null ? children : computedChildren
|
|
1476
|
-
] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteList, { ...listProps, children: createOption && inputValue ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteCreate, {}) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteEmpty, {}) })
|
|
1477
|
-
]
|
|
1478
|
-
}
|
|
1479
|
-
) })
|
|
1480
|
-
}
|
|
1481
|
-
) });
|
|
1482
|
-
});
|
|
1483
1571
|
var MultiAutocompleteField = (0, import_core8.forwardRef)(
|
|
1484
1572
|
({
|
|
1485
1573
|
className,
|
|
@@ -1492,7 +1580,15 @@ var MultiAutocompleteField = (0, import_core8.forwardRef)(
|
|
|
1492
1580
|
inputProps,
|
|
1493
1581
|
...rest
|
|
1494
1582
|
}, ref) => {
|
|
1495
|
-
const {
|
|
1583
|
+
const {
|
|
1584
|
+
value,
|
|
1585
|
+
displayValue,
|
|
1586
|
+
inputValue,
|
|
1587
|
+
onChange,
|
|
1588
|
+
isOpen,
|
|
1589
|
+
inputRef,
|
|
1590
|
+
styles
|
|
1591
|
+
} = useAutocompleteContext();
|
|
1496
1592
|
const { getInputProps } = useAutocompleteInput();
|
|
1497
1593
|
const cloneChildren = (0, import_react3.useMemo)(() => {
|
|
1498
1594
|
if (!(displayValue == null ? void 0 : displayValue.length))
|
|
@@ -425,7 +425,11 @@ declare const AutocompleteDescendantsContextProvider: react.Provider<{
|
|
|
425
425
|
} & {
|
|
426
426
|
node: HTMLElement;
|
|
427
427
|
index: number;
|
|
428
|
-
}) | undefined;
|
|
428
|
+
}) | undefined; /**
|
|
429
|
+
* The position to be inserted when the autocomplete option is created.
|
|
430
|
+
*
|
|
431
|
+
* @default 'first'
|
|
432
|
+
*/
|
|
429
433
|
enabledIndexOf: (node: HTMLElement | null, filter?: ((value: {
|
|
430
434
|
disabled?: boolean | undefined;
|
|
431
435
|
id?: string | undefined;
|
|
@@ -1022,7 +1026,11 @@ declare const useAutocompleteDescendantsContext: () => {
|
|
|
1022
1026
|
} & {
|
|
1023
1027
|
node: HTMLElement;
|
|
1024
1028
|
index: number;
|
|
1025
|
-
}) | undefined;
|
|
1029
|
+
}) | undefined; /**
|
|
1030
|
+
* The position to be inserted when the autocomplete option is created.
|
|
1031
|
+
*
|
|
1032
|
+
* @default 'first'
|
|
1033
|
+
*/
|
|
1026
1034
|
enabledIndexOf: (node: HTMLElement | null, filter?: ((value: {
|
|
1027
1035
|
disabled?: boolean | undefined;
|
|
1028
1036
|
id?: string | undefined;
|
|
@@ -1619,7 +1627,11 @@ declare const useAutocompleteDescendants: () => {
|
|
|
1619
1627
|
} & {
|
|
1620
1628
|
node: HTMLElement;
|
|
1621
1629
|
index: number;
|
|
1622
|
-
}) | undefined;
|
|
1630
|
+
}) | undefined; /**
|
|
1631
|
+
* The position to be inserted when the autocomplete option is created.
|
|
1632
|
+
*
|
|
1633
|
+
* @default 'first'
|
|
1634
|
+
*/
|
|
1623
1635
|
enabledIndexOf: (node: HTMLElement | null, filter?: ((value: {
|
|
1624
1636
|
disabled?: boolean | undefined;
|
|
1625
1637
|
id?: string | undefined;
|
|
@@ -2847,7 +2859,11 @@ declare const useAutocompleteDescendant: (options?: {
|
|
|
2847
2859
|
} & {
|
|
2848
2860
|
node: HTMLElement;
|
|
2849
2861
|
index: number;
|
|
2850
|
-
}) | undefined;
|
|
2862
|
+
}) | undefined; /**
|
|
2863
|
+
* The position to be inserted when the autocomplete option is created.
|
|
2864
|
+
*
|
|
2865
|
+
* @default 'first'
|
|
2866
|
+
*/
|
|
2851
2867
|
enabledIndexOf: (node: HTMLElement | null, filter?: ((value: {
|
|
2852
2868
|
disabled?: boolean | undefined;
|
|
2853
2869
|
id?: string | undefined;
|
|
@@ -3828,7 +3844,11 @@ declare const useAutocomplete: <T extends string | string[] = string>({ defaultI
|
|
|
3828
3844
|
} & {
|
|
3829
3845
|
node: HTMLElement;
|
|
3830
3846
|
index: number;
|
|
3831
|
-
}) | undefined;
|
|
3847
|
+
}) | undefined; /**
|
|
3848
|
+
* The position to be inserted when the autocomplete option is created.
|
|
3849
|
+
*
|
|
3850
|
+
* @default 'first'
|
|
3851
|
+
*/
|
|
3832
3852
|
enabledIndexOf: (node: HTMLElement | null, filter?: ((value: {
|
|
3833
3853
|
disabled?: boolean | undefined;
|
|
3834
3854
|
id?: string | undefined;
|
|
@@ -5,4 +5,4 @@ import '@yamada-ui/form-control';
|
|
|
5
5
|
import '@yamada-ui/popover';
|
|
6
6
|
import '@yamada-ui/select';
|
|
7
7
|
import '@yamada-ui/utils';
|
|
8
|
-
export { c as AutocompleteDescendantsContextProvider, f as AutocompleteProvider, s as UseAutocompleteCreateReturn, v as UseAutocompleteEmptyReturn, k as UseAutocompleteInputReturn, U as UseAutocompleteOptionGroupProps, n as UseAutocompleteOptionGroupReturn, o as UseAutocompleteOptionProps, q as UseAutocompleteOptionReturn, b as UseAutocompleteProps, i as UseAutocompleteReturn, h as useAutocomplete, g as useAutocompleteContext, r as useAutocompleteCreate, e as useAutocompleteDescendant, d as useAutocompleteDescendants, u as useAutocompleteDescendantsContext, t as useAutocompleteEmpty, j as useAutocompleteInput, l as useAutocompleteList, p as useAutocompleteOption, m as useAutocompleteOptionGroup } from './use-autocomplete-
|
|
8
|
+
export { c as AutocompleteDescendantsContextProvider, f as AutocompleteProvider, s as UseAutocompleteCreateReturn, v as UseAutocompleteEmptyReturn, k as UseAutocompleteInputReturn, U as UseAutocompleteOptionGroupProps, n as UseAutocompleteOptionGroupReturn, o as UseAutocompleteOptionProps, q as UseAutocompleteOptionReturn, b as UseAutocompleteProps, i as UseAutocompleteReturn, h as useAutocomplete, g as useAutocompleteContext, r as useAutocompleteCreate, e as useAutocompleteDescendant, d as useAutocompleteDescendants, u as useAutocompleteDescendantsContext, t as useAutocompleteEmpty, j as useAutocompleteInput, l as useAutocompleteList, p as useAutocompleteOption, m as useAutocompleteOptionGroup } from './use-autocomplete-2422c1c8.js';
|
|
@@ -5,4 +5,4 @@ import '@yamada-ui/form-control';
|
|
|
5
5
|
import '@yamada-ui/popover';
|
|
6
6
|
import '@yamada-ui/select';
|
|
7
7
|
import '@yamada-ui/utils';
|
|
8
|
-
export { c as AutocompleteDescendantsContextProvider, f as AutocompleteProvider, s as UseAutocompleteCreateReturn, v as UseAutocompleteEmptyReturn, k as UseAutocompleteInputReturn, U as UseAutocompleteOptionGroupProps, n as UseAutocompleteOptionGroupReturn, o as UseAutocompleteOptionProps, q as UseAutocompleteOptionReturn, b as UseAutocompleteProps, i as UseAutocompleteReturn, h as useAutocomplete, g as useAutocompleteContext, r as useAutocompleteCreate, e as useAutocompleteDescendant, d as useAutocompleteDescendants, u as useAutocompleteDescendantsContext, t as useAutocompleteEmpty, j as useAutocompleteInput, l as useAutocompleteList, p as useAutocompleteOption, m as useAutocompleteOptionGroup } from './use-autocomplete-
|
|
8
|
+
export { c as AutocompleteDescendantsContextProvider, f as AutocompleteProvider, s as UseAutocompleteCreateReturn, v as UseAutocompleteEmptyReturn, k as UseAutocompleteInputReturn, U as UseAutocompleteOptionGroupProps, n as UseAutocompleteOptionGroupReturn, o as UseAutocompleteOptionProps, q as UseAutocompleteOptionReturn, b as UseAutocompleteProps, i as UseAutocompleteReturn, h as useAutocomplete, g as useAutocompleteContext, r as useAutocompleteCreate, e as useAutocompleteDescendant, d as useAutocompleteDescendants, u as useAutocompleteDescendantsContext, t as useAutocompleteEmpty, j as useAutocompleteInput, l as useAutocompleteList, p as useAutocompleteOption, m as useAutocompleteOptionGroup } from './use-autocomplete-2422c1c8.js';
|