@yamada-ui/autocomplete 0.6.0 → 0.6.2
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.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.mjs +1 -1
- package/dist/autocomplete-option.d.mts +1 -1
- package/dist/autocomplete-option.d.ts +1 -1
- package/dist/autocomplete-option.js +3 -3
- 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 +22 -29
- package/dist/autocomplete.mjs +1 -1
- package/dist/{chunk-TZHEVPHW.mjs → chunk-VACNCD65.mjs} +31 -46
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +31 -46
- package/dist/index.mjs +1 -1
- package/dist/multi-autocomplete.d.mts +2 -2
- package/dist/multi-autocomplete.d.ts +2 -2
- package/dist/multi-autocomplete.js +29 -44
- package/dist/multi-autocomplete.mjs +1 -1
- package/dist/{use-autocomplete-72ef1a50.d.ts → use-autocomplete-3c0916c6.d.ts} +4 -4
- package/dist/use-autocomplete.d.mts +1 -1
- package/dist/use-autocomplete.d.ts +1 -1
- package/dist/use-autocomplete.js +20 -27
- package/dist/use-autocomplete.mjs +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -229,7 +229,7 @@ var useAutocomplete = ({
|
|
|
229
229
|
defaultValue: rest.defaultValue,
|
|
230
230
|
onChange: rest.onChange
|
|
231
231
|
});
|
|
232
|
-
const [
|
|
232
|
+
const [label, setLabel] = (0, import_react.useState)(void 0);
|
|
233
233
|
const [inputValue, setInputValue] = (0, import_react.useState)("");
|
|
234
234
|
const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
|
|
235
235
|
const [isAllSelected, setIsAllSelected] = (0, import_react.useState)(false);
|
|
@@ -264,16 +264,16 @@ var useAutocomplete = ({
|
|
|
264
264
|
const validChildren = (0, import_utils.getValidChildren)(children);
|
|
265
265
|
const computedChildren = resolvedItems == null ? void 0 : resolvedItems.map((item, i) => {
|
|
266
266
|
if ("value" in item) {
|
|
267
|
-
const { label, value: value2, ...props } = item;
|
|
268
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AutocompleteOption, { value: value2, ...props, children:
|
|
267
|
+
const { label: label2, value: value2, ...props } = item;
|
|
268
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AutocompleteOption, { value: value2, ...props, children: label2 }, i);
|
|
269
269
|
} else if ("items" in item) {
|
|
270
|
-
const { label, items: items2 = [], ...props } = item;
|
|
270
|
+
const { label: label2, items: items2 = [], ...props } = item;
|
|
271
271
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
272
272
|
AutocompleteOptionGroup,
|
|
273
273
|
{
|
|
274
|
-
label,
|
|
274
|
+
label: label2,
|
|
275
275
|
...props,
|
|
276
|
-
children: items2.map(({ label:
|
|
276
|
+
children: items2.map(({ label: label3, value: value2, ...props2 }, i2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AutocompleteOption, { value: value2, ...props2, children: label3 }, i2))
|
|
277
277
|
},
|
|
278
278
|
i
|
|
279
279
|
);
|
|
@@ -471,7 +471,7 @@ var useAutocomplete = ({
|
|
|
471
471
|
},
|
|
472
472
|
[descendants, onFocusFirst]
|
|
473
473
|
);
|
|
474
|
-
const
|
|
474
|
+
const onChangeLabel = (0, import_react.useCallback)(
|
|
475
475
|
(newValue, runOmit = true) => {
|
|
476
476
|
const enabledValues2 = descendants.enabledValues();
|
|
477
477
|
const selectedValues2 = enabledValues2.filter(({ node }) => node.dataset.value === newValue).map(({ node }) => {
|
|
@@ -482,7 +482,7 @@ var useAutocomplete = ({
|
|
|
482
482
|
selectedValues2.push(newValue);
|
|
483
483
|
setInputValue("");
|
|
484
484
|
}
|
|
485
|
-
|
|
485
|
+
setLabel((prev) => {
|
|
486
486
|
if (!isMulti) {
|
|
487
487
|
return selectedValues2[0];
|
|
488
488
|
} else {
|
|
@@ -520,20 +520,13 @@ var useAutocomplete = ({
|
|
|
520
520
|
return format((_a = node.textContent) != null ? _a : "").includes(newValue);
|
|
521
521
|
}
|
|
522
522
|
).length > 0;
|
|
523
|
-
|
|
523
|
+
onChangeLabel(newValue);
|
|
524
524
|
if (!allowFree || isHit2) {
|
|
525
525
|
setInputValue("");
|
|
526
526
|
}
|
|
527
527
|
rebirthOptions(false);
|
|
528
528
|
},
|
|
529
|
-
[
|
|
530
|
-
allowFree,
|
|
531
|
-
onChangeDisplayValue,
|
|
532
|
-
rebirthOptions,
|
|
533
|
-
setValue,
|
|
534
|
-
descendants,
|
|
535
|
-
format
|
|
536
|
-
]
|
|
529
|
+
[allowFree, onChangeLabel, rebirthOptions, setValue, descendants, format]
|
|
537
530
|
);
|
|
538
531
|
const onSelect = (0, import_react.useCallback)(() => {
|
|
539
532
|
var _a, _b;
|
|
@@ -594,7 +587,7 @@ var useAutocomplete = ({
|
|
|
594
587
|
newItems = [...newItems, newItem];
|
|
595
588
|
} else {
|
|
596
589
|
const i = newItems.findIndex(
|
|
597
|
-
({ label }) =>
|
|
590
|
+
({ label: label2 }) => label2 === firstInsertPositionItem
|
|
598
591
|
);
|
|
599
592
|
const targetItem = newItems[i];
|
|
600
593
|
if (i !== -1 && "items" in targetItem) {
|
|
@@ -639,11 +632,11 @@ var useAutocomplete = ({
|
|
|
639
632
|
(ev) => {
|
|
640
633
|
ev.stopPropagation();
|
|
641
634
|
setValue([]);
|
|
642
|
-
|
|
635
|
+
setLabel(void 0);
|
|
643
636
|
setInputValue("");
|
|
644
637
|
rebirthOptions();
|
|
645
638
|
},
|
|
646
|
-
[
|
|
639
|
+
[setLabel, setInputValue, setValue, rebirthOptions]
|
|
647
640
|
);
|
|
648
641
|
const onClick = (0, import_react.useCallback)(() => {
|
|
649
642
|
if (isOpen) {
|
|
@@ -685,7 +678,7 @@ var useAutocomplete = ({
|
|
|
685
678
|
return;
|
|
686
679
|
if (isComposition.current)
|
|
687
680
|
return;
|
|
688
|
-
const enabledDelete =
|
|
681
|
+
const enabledDelete = label === inputValue || !inputValue.length;
|
|
689
682
|
const actions = {
|
|
690
683
|
ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
|
|
691
684
|
ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
|
|
@@ -710,7 +703,7 @@ var useAutocomplete = ({
|
|
|
710
703
|
[
|
|
711
704
|
allowFree,
|
|
712
705
|
formControlProps,
|
|
713
|
-
|
|
706
|
+
label,
|
|
714
707
|
inputValue,
|
|
715
708
|
onOpen,
|
|
716
709
|
isFocused,
|
|
@@ -816,7 +809,7 @@ var useAutocomplete = ({
|
|
|
816
809
|
id,
|
|
817
810
|
descendants,
|
|
818
811
|
value,
|
|
819
|
-
|
|
812
|
+
label,
|
|
820
813
|
inputValue,
|
|
821
814
|
isHit,
|
|
822
815
|
isEmpty,
|
|
@@ -834,7 +827,7 @@ var useAutocomplete = ({
|
|
|
834
827
|
optionProps,
|
|
835
828
|
formControlProps,
|
|
836
829
|
setFocusedIndex,
|
|
837
|
-
|
|
830
|
+
onChangeLabel,
|
|
838
831
|
onChange,
|
|
839
832
|
onSearch,
|
|
840
833
|
onCreate,
|
|
@@ -1036,7 +1029,7 @@ var useAutocompleteOption = (props) => {
|
|
|
1036
1029
|
value,
|
|
1037
1030
|
omitSelectedValues,
|
|
1038
1031
|
onChange,
|
|
1039
|
-
|
|
1032
|
+
onChangeLabel,
|
|
1040
1033
|
focusedIndex,
|
|
1041
1034
|
setFocusedIndex,
|
|
1042
1035
|
onClose,
|
|
@@ -1110,8 +1103,8 @@ var useAutocompleteOption = (props) => {
|
|
|
1110
1103
|
(0, import_react.useEffect)(() => {
|
|
1111
1104
|
var _a2;
|
|
1112
1105
|
if (isSelected)
|
|
1113
|
-
|
|
1114
|
-
}, [computedProps, isSelected,
|
|
1106
|
+
onChangeLabel((_a2 = computedProps.value) != null ? _a2 : "", false);
|
|
1107
|
+
}, [computedProps, isSelected, onChangeLabel]);
|
|
1115
1108
|
const getOptionProps = (0, import_react.useCallback)(
|
|
1116
1109
|
(props2 = {}, ref = null) => {
|
|
1117
1110
|
var _a2;
|
|
@@ -1417,7 +1410,7 @@ var Autocomplete = (0, import_core4.forwardRef)(
|
|
|
1417
1410
|
);
|
|
1418
1411
|
var AutocompleteField = (0, import_core4.forwardRef)(
|
|
1419
1412
|
({ className, h, minH, placeholder, inputProps, ...rest }, ref) => {
|
|
1420
|
-
const {
|
|
1413
|
+
const { label, inputValue, styles } = useAutocompleteContext();
|
|
1421
1414
|
const { getInputProps } = useAutocompleteInput();
|
|
1422
1415
|
const css = {
|
|
1423
1416
|
paddingEnd: "2rem",
|
|
@@ -1442,7 +1435,7 @@ var AutocompleteField = (0, import_core4.forwardRef)(
|
|
|
1442
1435
|
w: "full",
|
|
1443
1436
|
placeholder,
|
|
1444
1437
|
...getInputProps(
|
|
1445
|
-
{ ...inputProps, value: inputValue ||
|
|
1438
|
+
{ ...inputProps, value: inputValue || label || "" },
|
|
1446
1439
|
ref
|
|
1447
1440
|
)
|
|
1448
1441
|
}
|
|
@@ -1761,21 +1754,13 @@ var MultiAutocompleteField = (0, import_core9.forwardRef)(
|
|
|
1761
1754
|
inputProps,
|
|
1762
1755
|
...rest
|
|
1763
1756
|
}, ref) => {
|
|
1764
|
-
const {
|
|
1765
|
-
value,
|
|
1766
|
-
displayValue,
|
|
1767
|
-
inputValue,
|
|
1768
|
-
onChange,
|
|
1769
|
-
isOpen,
|
|
1770
|
-
inputRef,
|
|
1771
|
-
styles
|
|
1772
|
-
} = useAutocompleteContext();
|
|
1757
|
+
const { value, label, inputValue, onChange, isOpen, inputRef, styles } = useAutocompleteContext();
|
|
1773
1758
|
const { getInputProps } = useAutocompleteInput();
|
|
1774
1759
|
const cloneChildren = (0, import_react3.useMemo)(() => {
|
|
1775
|
-
if (!(
|
|
1760
|
+
if (!(label == null ? void 0 : label.length))
|
|
1776
1761
|
return null;
|
|
1777
1762
|
if (component) {
|
|
1778
|
-
return
|
|
1763
|
+
return label.map((label2, index) => {
|
|
1779
1764
|
const onRemove = (e) => {
|
|
1780
1765
|
e.stopPropagation();
|
|
1781
1766
|
onChange(value[index]);
|
|
@@ -1784,7 +1769,7 @@ var MultiAutocompleteField = (0, import_core9.forwardRef)(
|
|
|
1784
1769
|
};
|
|
1785
1770
|
const el = component({
|
|
1786
1771
|
value: value[index],
|
|
1787
|
-
|
|
1772
|
+
label: label2,
|
|
1788
1773
|
index,
|
|
1789
1774
|
onRemove
|
|
1790
1775
|
});
|
|
@@ -1797,15 +1782,15 @@ var MultiAutocompleteField = (0, import_core9.forwardRef)(
|
|
|
1797
1782
|
return el ? (0, import_react3.cloneElement)(el, { style }) : null;
|
|
1798
1783
|
});
|
|
1799
1784
|
} else {
|
|
1800
|
-
return
|
|
1801
|
-
const isLast =
|
|
1785
|
+
return label.map((value2, index) => {
|
|
1786
|
+
const isLast = label.length === index + 1;
|
|
1802
1787
|
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.ui.span, { display: "inline-block", me: "0.25rem", children: [
|
|
1803
1788
|
value2,
|
|
1804
1789
|
!isLast || isOpen ? separator : null
|
|
1805
1790
|
] }, index);
|
|
1806
1791
|
});
|
|
1807
1792
|
}
|
|
1808
|
-
}, [
|
|
1793
|
+
}, [label, component, value, onChange, isOpen, inputRef, separator]);
|
|
1809
1794
|
const css = {
|
|
1810
1795
|
paddingEnd: "2rem",
|
|
1811
1796
|
h,
|
|
@@ -1821,7 +1806,7 @@ var MultiAutocompleteField = (0, import_core9.forwardRef)(
|
|
|
1821
1806
|
{
|
|
1822
1807
|
className: (0, import_utils9.cx)("ui-multi-autocomplete__field", className),
|
|
1823
1808
|
__css: css,
|
|
1824
|
-
py: (
|
|
1809
|
+
py: (label == null ? void 0 : label.length) && component ? "0.125rem" : void 0,
|
|
1825
1810
|
...rest,
|
|
1826
1811
|
children: [
|
|
1827
1812
|
cloneChildren,
|
|
@@ -1834,7 +1819,7 @@ var MultiAutocompleteField = (0, import_core9.forwardRef)(
|
|
|
1834
1819
|
overflow: "hidden",
|
|
1835
1820
|
marginBlockStart: "0.125rem",
|
|
1836
1821
|
marginBlockEnd: "0.125rem",
|
|
1837
|
-
placeholder: !
|
|
1822
|
+
placeholder: !label || keepPlaceholder && isOpen ? placeholder : void 0,
|
|
1838
1823
|
...getInputProps({ ...inputProps, value: inputValue != null ? inputValue : "" }, ref)
|
|
1839
1824
|
}
|
|
1840
1825
|
)
|
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 { c as UseAutocompleteProps } from './use-autocomplete-
|
|
6
|
+
import { c as UseAutocompleteProps } from './use-autocomplete-3c0916c6.js';
|
|
7
7
|
import 'react/jsx-runtime';
|
|
8
8
|
import '@yamada-ui/form-control';
|
|
9
9
|
import '@yamada-ui/popover';
|
|
@@ -21,7 +21,7 @@ type MultiAutocompleteOptions = {
|
|
|
21
21
|
*/
|
|
22
22
|
component?: FC<{
|
|
23
23
|
value: string | number;
|
|
24
|
-
|
|
24
|
+
label: string;
|
|
25
25
|
index: number;
|
|
26
26
|
onRemove: MouseEventHandler<HTMLElement>;
|
|
27
27
|
}>;
|
|
@@ -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 { c as UseAutocompleteProps } from './use-autocomplete-
|
|
6
|
+
import { c as UseAutocompleteProps } from './use-autocomplete-3c0916c6.js';
|
|
7
7
|
import 'react/jsx-runtime';
|
|
8
8
|
import '@yamada-ui/form-control';
|
|
9
9
|
import '@yamada-ui/popover';
|
|
@@ -21,7 +21,7 @@ type MultiAutocompleteOptions = {
|
|
|
21
21
|
*/
|
|
22
22
|
component?: FC<{
|
|
23
23
|
value: string | number;
|
|
24
|
-
|
|
24
|
+
label: string;
|
|
25
25
|
index: number;
|
|
26
26
|
onRemove: MouseEventHandler<HTMLElement>;
|
|
27
27
|
}>;
|
|
@@ -429,7 +429,7 @@ var useAutocomplete = ({
|
|
|
429
429
|
defaultValue: rest.defaultValue,
|
|
430
430
|
onChange: rest.onChange
|
|
431
431
|
});
|
|
432
|
-
const [
|
|
432
|
+
const [label, setLabel] = (0, import_react.useState)(void 0);
|
|
433
433
|
const [inputValue, setInputValue] = (0, import_react.useState)("");
|
|
434
434
|
const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
|
|
435
435
|
const [isAllSelected, setIsAllSelected] = (0, import_react.useState)(false);
|
|
@@ -464,16 +464,16 @@ var useAutocomplete = ({
|
|
|
464
464
|
const validChildren = (0, import_utils6.getValidChildren)(children);
|
|
465
465
|
const computedChildren = resolvedItems == null ? void 0 : resolvedItems.map((item, i) => {
|
|
466
466
|
if ("value" in item) {
|
|
467
|
-
const { label, value: value2, ...props } = item;
|
|
468
|
-
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteOption, { value: value2, ...props, children:
|
|
467
|
+
const { label: label2, value: value2, ...props } = item;
|
|
468
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteOption, { value: value2, ...props, children: label2 }, i);
|
|
469
469
|
} else if ("items" in item) {
|
|
470
|
-
const { label, items: items2 = [], ...props } = item;
|
|
470
|
+
const { label: label2, items: items2 = [], ...props } = item;
|
|
471
471
|
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
472
472
|
AutocompleteOptionGroup,
|
|
473
473
|
{
|
|
474
|
-
label,
|
|
474
|
+
label: label2,
|
|
475
475
|
...props,
|
|
476
|
-
children: items2.map(({ label:
|
|
476
|
+
children: items2.map(({ label: label3, value: value2, ...props2 }, i2) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteOption, { value: value2, ...props2, children: label3 }, i2))
|
|
477
477
|
},
|
|
478
478
|
i
|
|
479
479
|
);
|
|
@@ -671,7 +671,7 @@ var useAutocomplete = ({
|
|
|
671
671
|
},
|
|
672
672
|
[descendants, onFocusFirst]
|
|
673
673
|
);
|
|
674
|
-
const
|
|
674
|
+
const onChangeLabel = (0, import_react.useCallback)(
|
|
675
675
|
(newValue, runOmit = true) => {
|
|
676
676
|
const enabledValues2 = descendants.enabledValues();
|
|
677
677
|
const selectedValues2 = enabledValues2.filter(({ node }) => node.dataset.value === newValue).map(({ node }) => {
|
|
@@ -682,7 +682,7 @@ var useAutocomplete = ({
|
|
|
682
682
|
selectedValues2.push(newValue);
|
|
683
683
|
setInputValue("");
|
|
684
684
|
}
|
|
685
|
-
|
|
685
|
+
setLabel((prev) => {
|
|
686
686
|
if (!isMulti) {
|
|
687
687
|
return selectedValues2[0];
|
|
688
688
|
} else {
|
|
@@ -720,20 +720,13 @@ var useAutocomplete = ({
|
|
|
720
720
|
return format((_a = node.textContent) != null ? _a : "").includes(newValue);
|
|
721
721
|
}
|
|
722
722
|
).length > 0;
|
|
723
|
-
|
|
723
|
+
onChangeLabel(newValue);
|
|
724
724
|
if (!allowFree || isHit2) {
|
|
725
725
|
setInputValue("");
|
|
726
726
|
}
|
|
727
727
|
rebirthOptions(false);
|
|
728
728
|
},
|
|
729
|
-
[
|
|
730
|
-
allowFree,
|
|
731
|
-
onChangeDisplayValue,
|
|
732
|
-
rebirthOptions,
|
|
733
|
-
setValue,
|
|
734
|
-
descendants,
|
|
735
|
-
format
|
|
736
|
-
]
|
|
729
|
+
[allowFree, onChangeLabel, rebirthOptions, setValue, descendants, format]
|
|
737
730
|
);
|
|
738
731
|
const onSelect = (0, import_react.useCallback)(() => {
|
|
739
732
|
var _a, _b;
|
|
@@ -794,7 +787,7 @@ var useAutocomplete = ({
|
|
|
794
787
|
newItems = [...newItems, newItem];
|
|
795
788
|
} else {
|
|
796
789
|
const i = newItems.findIndex(
|
|
797
|
-
({ label }) =>
|
|
790
|
+
({ label: label2 }) => label2 === firstInsertPositionItem
|
|
798
791
|
);
|
|
799
792
|
const targetItem = newItems[i];
|
|
800
793
|
if (i !== -1 && "items" in targetItem) {
|
|
@@ -839,11 +832,11 @@ var useAutocomplete = ({
|
|
|
839
832
|
(ev) => {
|
|
840
833
|
ev.stopPropagation();
|
|
841
834
|
setValue([]);
|
|
842
|
-
|
|
835
|
+
setLabel(void 0);
|
|
843
836
|
setInputValue("");
|
|
844
837
|
rebirthOptions();
|
|
845
838
|
},
|
|
846
|
-
[
|
|
839
|
+
[setLabel, setInputValue, setValue, rebirthOptions]
|
|
847
840
|
);
|
|
848
841
|
const onClick = (0, import_react.useCallback)(() => {
|
|
849
842
|
if (isOpen) {
|
|
@@ -885,7 +878,7 @@ var useAutocomplete = ({
|
|
|
885
878
|
return;
|
|
886
879
|
if (isComposition.current)
|
|
887
880
|
return;
|
|
888
|
-
const enabledDelete =
|
|
881
|
+
const enabledDelete = label === inputValue || !inputValue.length;
|
|
889
882
|
const actions = {
|
|
890
883
|
ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? (0, import_utils6.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
|
|
891
884
|
ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? (0, import_utils6.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
|
|
@@ -910,7 +903,7 @@ var useAutocomplete = ({
|
|
|
910
903
|
[
|
|
911
904
|
allowFree,
|
|
912
905
|
formControlProps,
|
|
913
|
-
|
|
906
|
+
label,
|
|
914
907
|
inputValue,
|
|
915
908
|
onOpen,
|
|
916
909
|
isFocused,
|
|
@@ -1016,7 +1009,7 @@ var useAutocomplete = ({
|
|
|
1016
1009
|
id,
|
|
1017
1010
|
descendants,
|
|
1018
1011
|
value,
|
|
1019
|
-
|
|
1012
|
+
label,
|
|
1020
1013
|
inputValue,
|
|
1021
1014
|
isHit,
|
|
1022
1015
|
isEmpty,
|
|
@@ -1034,7 +1027,7 @@ var useAutocomplete = ({
|
|
|
1034
1027
|
optionProps,
|
|
1035
1028
|
formControlProps,
|
|
1036
1029
|
setFocusedIndex,
|
|
1037
|
-
|
|
1030
|
+
onChangeLabel,
|
|
1038
1031
|
onChange,
|
|
1039
1032
|
onSearch,
|
|
1040
1033
|
onCreate,
|
|
@@ -1236,7 +1229,7 @@ var useAutocompleteOption = (props) => {
|
|
|
1236
1229
|
value,
|
|
1237
1230
|
omitSelectedValues,
|
|
1238
1231
|
onChange,
|
|
1239
|
-
|
|
1232
|
+
onChangeLabel,
|
|
1240
1233
|
focusedIndex,
|
|
1241
1234
|
setFocusedIndex,
|
|
1242
1235
|
onClose,
|
|
@@ -1310,8 +1303,8 @@ var useAutocompleteOption = (props) => {
|
|
|
1310
1303
|
(0, import_react.useEffect)(() => {
|
|
1311
1304
|
var _a2;
|
|
1312
1305
|
if (isSelected)
|
|
1313
|
-
|
|
1314
|
-
}, [computedProps, isSelected,
|
|
1306
|
+
onChangeLabel((_a2 = computedProps.value) != null ? _a2 : "", false);
|
|
1307
|
+
}, [computedProps, isSelected, onChangeLabel]);
|
|
1315
1308
|
const getOptionProps = (0, import_react.useCallback)(
|
|
1316
1309
|
(props2 = {}, ref = null) => {
|
|
1317
1310
|
var _a2;
|
|
@@ -1628,21 +1621,13 @@ var MultiAutocompleteField = (0, import_core8.forwardRef)(
|
|
|
1628
1621
|
inputProps,
|
|
1629
1622
|
...rest
|
|
1630
1623
|
}, ref) => {
|
|
1631
|
-
const {
|
|
1632
|
-
value,
|
|
1633
|
-
displayValue,
|
|
1634
|
-
inputValue,
|
|
1635
|
-
onChange,
|
|
1636
|
-
isOpen,
|
|
1637
|
-
inputRef,
|
|
1638
|
-
styles
|
|
1639
|
-
} = useAutocompleteContext();
|
|
1624
|
+
const { value, label, inputValue, onChange, isOpen, inputRef, styles } = useAutocompleteContext();
|
|
1640
1625
|
const { getInputProps } = useAutocompleteInput();
|
|
1641
1626
|
const cloneChildren = (0, import_react3.useMemo)(() => {
|
|
1642
|
-
if (!(
|
|
1627
|
+
if (!(label == null ? void 0 : label.length))
|
|
1643
1628
|
return null;
|
|
1644
1629
|
if (component) {
|
|
1645
|
-
return
|
|
1630
|
+
return label.map((label2, index) => {
|
|
1646
1631
|
const onRemove = (e) => {
|
|
1647
1632
|
e.stopPropagation();
|
|
1648
1633
|
onChange(value[index]);
|
|
@@ -1651,7 +1636,7 @@ var MultiAutocompleteField = (0, import_core8.forwardRef)(
|
|
|
1651
1636
|
};
|
|
1652
1637
|
const el = component({
|
|
1653
1638
|
value: value[index],
|
|
1654
|
-
|
|
1639
|
+
label: label2,
|
|
1655
1640
|
index,
|
|
1656
1641
|
onRemove
|
|
1657
1642
|
});
|
|
@@ -1664,15 +1649,15 @@ var MultiAutocompleteField = (0, import_core8.forwardRef)(
|
|
|
1664
1649
|
return el ? (0, import_react3.cloneElement)(el, { style }) : null;
|
|
1665
1650
|
});
|
|
1666
1651
|
} else {
|
|
1667
|
-
return
|
|
1668
|
-
const isLast =
|
|
1652
|
+
return label.map((value2, index) => {
|
|
1653
|
+
const isLast = label.length === index + 1;
|
|
1669
1654
|
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core8.ui.span, { display: "inline-block", me: "0.25rem", children: [
|
|
1670
1655
|
value2,
|
|
1671
1656
|
!isLast || isOpen ? separator : null
|
|
1672
1657
|
] }, index);
|
|
1673
1658
|
});
|
|
1674
1659
|
}
|
|
1675
|
-
}, [
|
|
1660
|
+
}, [label, component, value, onChange, isOpen, inputRef, separator]);
|
|
1676
1661
|
const css = {
|
|
1677
1662
|
paddingEnd: "2rem",
|
|
1678
1663
|
h,
|
|
@@ -1688,7 +1673,7 @@ var MultiAutocompleteField = (0, import_core8.forwardRef)(
|
|
|
1688
1673
|
{
|
|
1689
1674
|
className: (0, import_utils8.cx)("ui-multi-autocomplete__field", className),
|
|
1690
1675
|
__css: css,
|
|
1691
|
-
py: (
|
|
1676
|
+
py: (label == null ? void 0 : label.length) && component ? "0.125rem" : void 0,
|
|
1692
1677
|
...rest,
|
|
1693
1678
|
children: [
|
|
1694
1679
|
cloneChildren,
|
|
@@ -1701,7 +1686,7 @@ var MultiAutocompleteField = (0, import_core8.forwardRef)(
|
|
|
1701
1686
|
overflow: "hidden",
|
|
1702
1687
|
marginBlockStart: "0.125rem",
|
|
1703
1688
|
marginBlockEnd: "0.125rem",
|
|
1704
|
-
placeholder: !
|
|
1689
|
+
placeholder: !label || keepPlaceholder && isOpen ? placeholder : void 0,
|
|
1705
1690
|
...getInputProps({ ...inputProps, value: inputValue != null ? inputValue : "" }, ref)
|
|
1706
1691
|
}
|
|
1707
1692
|
)
|
|
@@ -3331,13 +3331,13 @@ declare const useAutocompleteDescendant: (options?: {
|
|
|
3331
3331
|
};
|
|
3332
3332
|
type AutocompleteContext = Omit<UseAutocompleteProps, "value" | "defaultValue" | "onChange" | "onCreate"> & {
|
|
3333
3333
|
value: string | string[];
|
|
3334
|
-
|
|
3334
|
+
label: string | string[] | undefined;
|
|
3335
3335
|
inputValue: string;
|
|
3336
3336
|
isHit: boolean;
|
|
3337
3337
|
isEmpty: boolean;
|
|
3338
3338
|
isAllSelected: boolean;
|
|
3339
3339
|
onChange: (newValue: string) => void;
|
|
3340
|
-
|
|
3340
|
+
onChangeLabel: (newValue: string, runOmit?: boolean) => void;
|
|
3341
3341
|
pickOptions: (value: string) => void;
|
|
3342
3342
|
rebirthOptions: (runFocus?: boolean) => void;
|
|
3343
3343
|
inputProps: DOMAttributes;
|
|
@@ -4031,7 +4031,7 @@ declare const useAutocomplete: <T extends string | string[] = string>({ defaultI
|
|
|
4031
4031
|
}) | undefined;
|
|
4032
4032
|
};
|
|
4033
4033
|
value: T;
|
|
4034
|
-
|
|
4034
|
+
label: T | undefined;
|
|
4035
4035
|
inputValue: string;
|
|
4036
4036
|
isHit: boolean;
|
|
4037
4037
|
isEmpty: boolean;
|
|
@@ -4051,7 +4051,7 @@ declare const useAutocomplete: <T extends string | string[] = string>({ defaultI
|
|
|
4051
4051
|
[x: string]: any;
|
|
4052
4052
|
};
|
|
4053
4053
|
setFocusedIndex: Dispatch<SetStateAction<number>>;
|
|
4054
|
-
|
|
4054
|
+
onChangeLabel: (newValue: string, runOmit?: boolean) => void;
|
|
4055
4055
|
onChange: (newValue: string) => void;
|
|
4056
4056
|
onSearch: (ev: ChangeEvent<HTMLInputElement>) => void;
|
|
4057
4057
|
onCreate: () => void;
|
|
@@ -4,4 +4,4 @@ import '@yamada-ui/core';
|
|
|
4
4
|
import '@yamada-ui/form-control';
|
|
5
5
|
import '@yamada-ui/popover';
|
|
6
6
|
import '@yamada-ui/utils';
|
|
7
|
-
export { d as AutocompleteDescendantsContextProvider, b as AutocompleteItem, g as AutocompleteProvider, t as UseAutocompleteCreateReturn, w as UseAutocompleteEmptyReturn, l as UseAutocompleteInputReturn, U as UseAutocompleteOptionGroupProps, o as UseAutocompleteOptionGroupReturn, p as UseAutocompleteOptionProps, r as UseAutocompleteOptionReturn, c as UseAutocompleteProps, j as UseAutocompleteReturn, i as useAutocomplete, h as useAutocompleteContext, s as useAutocompleteCreate, f as useAutocompleteDescendant, e as useAutocompleteDescendants, u as useAutocompleteDescendantsContext, v as useAutocompleteEmpty, k as useAutocompleteInput, m as useAutocompleteList, q as useAutocompleteOption, n as useAutocompleteOptionGroup } from './use-autocomplete-
|
|
7
|
+
export { d as AutocompleteDescendantsContextProvider, b as AutocompleteItem, g as AutocompleteProvider, t as UseAutocompleteCreateReturn, w as UseAutocompleteEmptyReturn, l as UseAutocompleteInputReturn, U as UseAutocompleteOptionGroupProps, o as UseAutocompleteOptionGroupReturn, p as UseAutocompleteOptionProps, r as UseAutocompleteOptionReturn, c as UseAutocompleteProps, j as UseAutocompleteReturn, i as useAutocomplete, h as useAutocompleteContext, s as useAutocompleteCreate, f as useAutocompleteDescendant, e as useAutocompleteDescendants, u as useAutocompleteDescendantsContext, v as useAutocompleteEmpty, k as useAutocompleteInput, m as useAutocompleteList, q as useAutocompleteOption, n as useAutocompleteOptionGroup } from './use-autocomplete-3c0916c6.js';
|
|
@@ -4,4 +4,4 @@ import '@yamada-ui/core';
|
|
|
4
4
|
import '@yamada-ui/form-control';
|
|
5
5
|
import '@yamada-ui/popover';
|
|
6
6
|
import '@yamada-ui/utils';
|
|
7
|
-
export { d as AutocompleteDescendantsContextProvider, b as AutocompleteItem, g as AutocompleteProvider, t as UseAutocompleteCreateReturn, w as UseAutocompleteEmptyReturn, l as UseAutocompleteInputReturn, U as UseAutocompleteOptionGroupProps, o as UseAutocompleteOptionGroupReturn, p as UseAutocompleteOptionProps, r as UseAutocompleteOptionReturn, c as UseAutocompleteProps, j as UseAutocompleteReturn, i as useAutocomplete, h as useAutocompleteContext, s as useAutocompleteCreate, f as useAutocompleteDescendant, e as useAutocompleteDescendants, u as useAutocompleteDescendantsContext, v as useAutocompleteEmpty, k as useAutocompleteInput, m as useAutocompleteList, q as useAutocompleteOption, n as useAutocompleteOptionGroup } from './use-autocomplete-
|
|
7
|
+
export { d as AutocompleteDescendantsContextProvider, b as AutocompleteItem, g as AutocompleteProvider, t as UseAutocompleteCreateReturn, w as UseAutocompleteEmptyReturn, l as UseAutocompleteInputReturn, U as UseAutocompleteOptionGroupProps, o as UseAutocompleteOptionGroupReturn, p as UseAutocompleteOptionProps, r as UseAutocompleteOptionReturn, c as UseAutocompleteProps, j as UseAutocompleteReturn, i as useAutocomplete, h as useAutocompleteContext, s as useAutocompleteCreate, f as useAutocompleteDescendant, e as useAutocompleteDescendants, u as useAutocompleteDescendantsContext, v as useAutocompleteEmpty, k as useAutocompleteInput, m as useAutocompleteList, q as useAutocompleteOption, n as useAutocompleteOptionGroup } from './use-autocomplete-3c0916c6.js';
|