@yamada-ui/autocomplete 0.6.1 → 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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as _yamada_ui_core from '@yamada-ui/core';
|
|
2
2
|
import { HTMLUIProps } from '@yamada-ui/core';
|
|
3
|
-
import { U as UseAutocompleteOptionGroupProps } from './use-autocomplete-
|
|
3
|
+
import { U as UseAutocompleteOptionGroupProps } from './use-autocomplete-3c0916c6.js';
|
|
4
4
|
import 'react/jsx-runtime';
|
|
5
5
|
import 'react';
|
|
6
6
|
import '@yamada-ui/form-control';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as _yamada_ui_core from '@yamada-ui/core';
|
|
2
2
|
import { HTMLUIProps } from '@yamada-ui/core';
|
|
3
|
-
import { U as UseAutocompleteOptionGroupProps } from './use-autocomplete-
|
|
3
|
+
import { U as UseAutocompleteOptionGroupProps } from './use-autocomplete-3c0916c6.js';
|
|
4
4
|
import 'react/jsx-runtime';
|
|
5
5
|
import 'react';
|
|
6
6
|
import '@yamada-ui/form-control';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import '@yamada-ui/core';
|
|
2
2
|
import 'react';
|
|
3
|
-
export { A as AutocompleteOption, a as AutocompleteOptionProps } from './use-autocomplete-
|
|
3
|
+
export { A as AutocompleteOption, a as AutocompleteOptionProps } from './use-autocomplete-3c0916c6.js';
|
|
4
4
|
import 'react/jsx-runtime';
|
|
5
5
|
import '@yamada-ui/form-control';
|
|
6
6
|
import '@yamada-ui/popover';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import '@yamada-ui/core';
|
|
2
2
|
import 'react';
|
|
3
|
-
export { A as AutocompleteOption, a as AutocompleteOptionProps } from './use-autocomplete-
|
|
3
|
+
export { A as AutocompleteOption, a as AutocompleteOptionProps } from './use-autocomplete-3c0916c6.js';
|
|
4
4
|
import 'react/jsx-runtime';
|
|
5
5
|
import '@yamada-ui/form-control';
|
|
6
6
|
import '@yamada-ui/popover';
|
|
@@ -64,7 +64,7 @@ var useAutocompleteOption = (props) => {
|
|
|
64
64
|
value,
|
|
65
65
|
omitSelectedValues,
|
|
66
66
|
onChange,
|
|
67
|
-
|
|
67
|
+
onChangeLabel,
|
|
68
68
|
focusedIndex,
|
|
69
69
|
setFocusedIndex,
|
|
70
70
|
onClose,
|
|
@@ -138,8 +138,8 @@ var useAutocompleteOption = (props) => {
|
|
|
138
138
|
(0, import_react.useEffect)(() => {
|
|
139
139
|
var _a2;
|
|
140
140
|
if (isSelected)
|
|
141
|
-
|
|
142
|
-
}, [computedProps, isSelected,
|
|
141
|
+
onChangeLabel((_a2 = computedProps.value) != null ? _a2 : "", false);
|
|
142
|
+
}, [computedProps, isSelected, onChangeLabel]);
|
|
143
143
|
const getOptionProps = (0, import_react.useCallback)(
|
|
144
144
|
(props2 = {}, ref = null) => {
|
|
145
145
|
var _a2;
|
package/dist/autocomplete.d.mts
CHANGED
|
@@ -2,7 +2,7 @@ import * as _yamada_ui_core from '@yamada-ui/core';
|
|
|
2
2
|
import { ThemeProps, HTMLUIProps } from '@yamada-ui/core';
|
|
3
3
|
import { AutocompleteIconProps } from './autocomplete-icon.mjs';
|
|
4
4
|
import { AutocompleteListProps } from './autocomplete-list.mjs';
|
|
5
|
-
import { c as UseAutocompleteProps } from './use-autocomplete-
|
|
5
|
+
import { c as UseAutocompleteProps } from './use-autocomplete-3c0916c6.js';
|
|
6
6
|
import 'react';
|
|
7
7
|
import 'react/jsx-runtime';
|
|
8
8
|
import '@yamada-ui/form-control';
|
package/dist/autocomplete.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import * as _yamada_ui_core from '@yamada-ui/core';
|
|
|
2
2
|
import { ThemeProps, HTMLUIProps } from '@yamada-ui/core';
|
|
3
3
|
import { AutocompleteIconProps } from './autocomplete-icon.js';
|
|
4
4
|
import { AutocompleteListProps } from './autocomplete-list.js';
|
|
5
|
-
import { c as UseAutocompleteProps } from './use-autocomplete-
|
|
5
|
+
import { c as UseAutocompleteProps } from './use-autocomplete-3c0916c6.js';
|
|
6
6
|
import 'react';
|
|
7
7
|
import 'react/jsx-runtime';
|
|
8
8
|
import '@yamada-ui/form-control';
|
package/dist/autocomplete.js
CHANGED
|
@@ -428,7 +428,7 @@ var useAutocomplete = ({
|
|
|
428
428
|
defaultValue: rest.defaultValue,
|
|
429
429
|
onChange: rest.onChange
|
|
430
430
|
});
|
|
431
|
-
const [
|
|
431
|
+
const [label, setLabel] = (0, import_react.useState)(void 0);
|
|
432
432
|
const [inputValue, setInputValue] = (0, import_react.useState)("");
|
|
433
433
|
const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
|
|
434
434
|
const [isAllSelected, setIsAllSelected] = (0, import_react.useState)(false);
|
|
@@ -463,16 +463,16 @@ var useAutocomplete = ({
|
|
|
463
463
|
const validChildren = (0, import_utils6.getValidChildren)(children);
|
|
464
464
|
const computedChildren = resolvedItems == null ? void 0 : resolvedItems.map((item, i) => {
|
|
465
465
|
if ("value" in item) {
|
|
466
|
-
const { label, value: value2, ...props } = item;
|
|
467
|
-
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteOption, { value: value2, ...props, children:
|
|
466
|
+
const { label: label2, value: value2, ...props } = item;
|
|
467
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteOption, { value: value2, ...props, children: label2 }, i);
|
|
468
468
|
} else if ("items" in item) {
|
|
469
|
-
const { label, items: items2 = [], ...props } = item;
|
|
469
|
+
const { label: label2, items: items2 = [], ...props } = item;
|
|
470
470
|
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
471
471
|
AutocompleteOptionGroup,
|
|
472
472
|
{
|
|
473
|
-
label,
|
|
473
|
+
label: label2,
|
|
474
474
|
...props,
|
|
475
|
-
children: items2.map(({ label:
|
|
475
|
+
children: items2.map(({ label: label3, value: value2, ...props2 }, i2) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteOption, { value: value2, ...props2, children: label3 }, i2))
|
|
476
476
|
},
|
|
477
477
|
i
|
|
478
478
|
);
|
|
@@ -670,7 +670,7 @@ var useAutocomplete = ({
|
|
|
670
670
|
},
|
|
671
671
|
[descendants, onFocusFirst]
|
|
672
672
|
);
|
|
673
|
-
const
|
|
673
|
+
const onChangeLabel = (0, import_react.useCallback)(
|
|
674
674
|
(newValue, runOmit = true) => {
|
|
675
675
|
const enabledValues2 = descendants.enabledValues();
|
|
676
676
|
const selectedValues2 = enabledValues2.filter(({ node }) => node.dataset.value === newValue).map(({ node }) => {
|
|
@@ -681,7 +681,7 @@ var useAutocomplete = ({
|
|
|
681
681
|
selectedValues2.push(newValue);
|
|
682
682
|
setInputValue("");
|
|
683
683
|
}
|
|
684
|
-
|
|
684
|
+
setLabel((prev) => {
|
|
685
685
|
if (!isMulti) {
|
|
686
686
|
return selectedValues2[0];
|
|
687
687
|
} else {
|
|
@@ -719,20 +719,13 @@ var useAutocomplete = ({
|
|
|
719
719
|
return format((_a = node.textContent) != null ? _a : "").includes(newValue);
|
|
720
720
|
}
|
|
721
721
|
).length > 0;
|
|
722
|
-
|
|
722
|
+
onChangeLabel(newValue);
|
|
723
723
|
if (!allowFree || isHit2) {
|
|
724
724
|
setInputValue("");
|
|
725
725
|
}
|
|
726
726
|
rebirthOptions(false);
|
|
727
727
|
},
|
|
728
|
-
[
|
|
729
|
-
allowFree,
|
|
730
|
-
onChangeDisplayValue,
|
|
731
|
-
rebirthOptions,
|
|
732
|
-
setValue,
|
|
733
|
-
descendants,
|
|
734
|
-
format
|
|
735
|
-
]
|
|
728
|
+
[allowFree, onChangeLabel, rebirthOptions, setValue, descendants, format]
|
|
736
729
|
);
|
|
737
730
|
const onSelect = (0, import_react.useCallback)(() => {
|
|
738
731
|
var _a, _b;
|
|
@@ -793,7 +786,7 @@ var useAutocomplete = ({
|
|
|
793
786
|
newItems = [...newItems, newItem];
|
|
794
787
|
} else {
|
|
795
788
|
const i = newItems.findIndex(
|
|
796
|
-
({ label }) =>
|
|
789
|
+
({ label: label2 }) => label2 === firstInsertPositionItem
|
|
797
790
|
);
|
|
798
791
|
const targetItem = newItems[i];
|
|
799
792
|
if (i !== -1 && "items" in targetItem) {
|
|
@@ -838,11 +831,11 @@ var useAutocomplete = ({
|
|
|
838
831
|
(ev) => {
|
|
839
832
|
ev.stopPropagation();
|
|
840
833
|
setValue([]);
|
|
841
|
-
|
|
834
|
+
setLabel(void 0);
|
|
842
835
|
setInputValue("");
|
|
843
836
|
rebirthOptions();
|
|
844
837
|
},
|
|
845
|
-
[
|
|
838
|
+
[setLabel, setInputValue, setValue, rebirthOptions]
|
|
846
839
|
);
|
|
847
840
|
const onClick = (0, import_react.useCallback)(() => {
|
|
848
841
|
if (isOpen) {
|
|
@@ -884,7 +877,7 @@ var useAutocomplete = ({
|
|
|
884
877
|
return;
|
|
885
878
|
if (isComposition.current)
|
|
886
879
|
return;
|
|
887
|
-
const enabledDelete =
|
|
880
|
+
const enabledDelete = label === inputValue || !inputValue.length;
|
|
888
881
|
const actions = {
|
|
889
882
|
ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? (0, import_utils6.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
|
|
890
883
|
ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? (0, import_utils6.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
|
|
@@ -909,7 +902,7 @@ var useAutocomplete = ({
|
|
|
909
902
|
[
|
|
910
903
|
allowFree,
|
|
911
904
|
formControlProps,
|
|
912
|
-
|
|
905
|
+
label,
|
|
913
906
|
inputValue,
|
|
914
907
|
onOpen,
|
|
915
908
|
isFocused,
|
|
@@ -1015,7 +1008,7 @@ var useAutocomplete = ({
|
|
|
1015
1008
|
id,
|
|
1016
1009
|
descendants,
|
|
1017
1010
|
value,
|
|
1018
|
-
|
|
1011
|
+
label,
|
|
1019
1012
|
inputValue,
|
|
1020
1013
|
isHit,
|
|
1021
1014
|
isEmpty,
|
|
@@ -1033,7 +1026,7 @@ var useAutocomplete = ({
|
|
|
1033
1026
|
optionProps,
|
|
1034
1027
|
formControlProps,
|
|
1035
1028
|
setFocusedIndex,
|
|
1036
|
-
|
|
1029
|
+
onChangeLabel,
|
|
1037
1030
|
onChange,
|
|
1038
1031
|
onSearch,
|
|
1039
1032
|
onCreate,
|
|
@@ -1235,7 +1228,7 @@ var useAutocompleteOption = (props) => {
|
|
|
1235
1228
|
value,
|
|
1236
1229
|
omitSelectedValues,
|
|
1237
1230
|
onChange,
|
|
1238
|
-
|
|
1231
|
+
onChangeLabel,
|
|
1239
1232
|
focusedIndex,
|
|
1240
1233
|
setFocusedIndex,
|
|
1241
1234
|
onClose,
|
|
@@ -1309,8 +1302,8 @@ var useAutocompleteOption = (props) => {
|
|
|
1309
1302
|
(0, import_react.useEffect)(() => {
|
|
1310
1303
|
var _a2;
|
|
1311
1304
|
if (isSelected)
|
|
1312
|
-
|
|
1313
|
-
}, [computedProps, isSelected,
|
|
1305
|
+
onChangeLabel((_a2 = computedProps.value) != null ? _a2 : "", false);
|
|
1306
|
+
}, [computedProps, isSelected, onChangeLabel]);
|
|
1314
1307
|
const getOptionProps = (0, import_react.useCallback)(
|
|
1315
1308
|
(props2 = {}, ref = null) => {
|
|
1316
1309
|
var _a2;
|
|
@@ -1567,7 +1560,7 @@ var Autocomplete = (0, import_core8.forwardRef)(
|
|
|
1567
1560
|
);
|
|
1568
1561
|
var AutocompleteField = (0, import_core8.forwardRef)(
|
|
1569
1562
|
({ className, h, minH, placeholder, inputProps, ...rest }, ref) => {
|
|
1570
|
-
const {
|
|
1563
|
+
const { label, inputValue, styles } = useAutocompleteContext();
|
|
1571
1564
|
const { getInputProps } = useAutocompleteInput();
|
|
1572
1565
|
const css = {
|
|
1573
1566
|
paddingEnd: "2rem",
|
|
@@ -1592,7 +1585,7 @@ var AutocompleteField = (0, import_core8.forwardRef)(
|
|
|
1592
1585
|
w: "full",
|
|
1593
1586
|
placeholder,
|
|
1594
1587
|
...getInputProps(
|
|
1595
|
-
{ ...inputProps, value: inputValue ||
|
|
1588
|
+
{ ...inputProps, value: inputValue || label || "" },
|
|
1596
1589
|
ref
|
|
1597
1590
|
)
|
|
1598
1591
|
}
|
package/dist/autocomplete.mjs
CHANGED
|
@@ -226,7 +226,7 @@ var Autocomplete = forwardRef2(
|
|
|
226
226
|
);
|
|
227
227
|
var AutocompleteField = forwardRef2(
|
|
228
228
|
({ className, h, minH, placeholder, inputProps, ...rest }, ref) => {
|
|
229
|
-
const {
|
|
229
|
+
const { label, inputValue, styles } = useAutocompleteContext();
|
|
230
230
|
const { getInputProps } = useAutocompleteInput();
|
|
231
231
|
const css = {
|
|
232
232
|
paddingEnd: "2rem",
|
|
@@ -251,7 +251,7 @@ var AutocompleteField = forwardRef2(
|
|
|
251
251
|
w: "full",
|
|
252
252
|
placeholder,
|
|
253
253
|
...getInputProps(
|
|
254
|
-
{ ...inputProps, value: inputValue ||
|
|
254
|
+
{ ...inputProps, value: inputValue || label || "" },
|
|
255
255
|
ref
|
|
256
256
|
)
|
|
257
257
|
}
|
|
@@ -575,21 +575,13 @@ var MultiAutocompleteField = forwardRef7(
|
|
|
575
575
|
inputProps,
|
|
576
576
|
...rest
|
|
577
577
|
}, ref) => {
|
|
578
|
-
const {
|
|
579
|
-
value,
|
|
580
|
-
displayValue,
|
|
581
|
-
inputValue,
|
|
582
|
-
onChange,
|
|
583
|
-
isOpen,
|
|
584
|
-
inputRef,
|
|
585
|
-
styles
|
|
586
|
-
} = useAutocompleteContext();
|
|
578
|
+
const { value, label, inputValue, onChange, isOpen, inputRef, styles } = useAutocompleteContext();
|
|
587
579
|
const { getInputProps } = useAutocompleteInput();
|
|
588
580
|
const cloneChildren = useMemo(() => {
|
|
589
|
-
if (!(
|
|
581
|
+
if (!(label == null ? void 0 : label.length))
|
|
590
582
|
return null;
|
|
591
583
|
if (component) {
|
|
592
|
-
return
|
|
584
|
+
return label.map((label2, index) => {
|
|
593
585
|
const onRemove = (e) => {
|
|
594
586
|
e.stopPropagation();
|
|
595
587
|
onChange(value[index]);
|
|
@@ -598,7 +590,7 @@ var MultiAutocompleteField = forwardRef7(
|
|
|
598
590
|
};
|
|
599
591
|
const el = component({
|
|
600
592
|
value: value[index],
|
|
601
|
-
|
|
593
|
+
label: label2,
|
|
602
594
|
index,
|
|
603
595
|
onRemove
|
|
604
596
|
});
|
|
@@ -611,15 +603,15 @@ var MultiAutocompleteField = forwardRef7(
|
|
|
611
603
|
return el ? cloneElement2(el, { style }) : null;
|
|
612
604
|
});
|
|
613
605
|
} else {
|
|
614
|
-
return
|
|
615
|
-
const isLast =
|
|
606
|
+
return label.map((value2, index) => {
|
|
607
|
+
const isLast = label.length === index + 1;
|
|
616
608
|
return /* @__PURE__ */ jsxs6(ui7.span, { display: "inline-block", me: "0.25rem", children: [
|
|
617
609
|
value2,
|
|
618
610
|
!isLast || isOpen ? separator : null
|
|
619
611
|
] }, index);
|
|
620
612
|
});
|
|
621
613
|
}
|
|
622
|
-
}, [
|
|
614
|
+
}, [label, component, value, onChange, isOpen, inputRef, separator]);
|
|
623
615
|
const css = {
|
|
624
616
|
paddingEnd: "2rem",
|
|
625
617
|
h,
|
|
@@ -635,7 +627,7 @@ var MultiAutocompleteField = forwardRef7(
|
|
|
635
627
|
{
|
|
636
628
|
className: cx7("ui-multi-autocomplete__field", className),
|
|
637
629
|
__css: css,
|
|
638
|
-
py: (
|
|
630
|
+
py: (label == null ? void 0 : label.length) && component ? "0.125rem" : void 0,
|
|
639
631
|
...rest,
|
|
640
632
|
children: [
|
|
641
633
|
cloneChildren,
|
|
@@ -648,7 +640,7 @@ var MultiAutocompleteField = forwardRef7(
|
|
|
648
640
|
overflow: "hidden",
|
|
649
641
|
marginBlockStart: "0.125rem",
|
|
650
642
|
marginBlockEnd: "0.125rem",
|
|
651
|
-
placeholder: !
|
|
643
|
+
placeholder: !label || keepPlaceholder && isOpen ? placeholder : void 0,
|
|
652
644
|
...getInputProps({ ...inputProps, value: inputValue != null ? inputValue : "" }, ref)
|
|
653
645
|
}
|
|
654
646
|
)
|
|
@@ -837,7 +829,7 @@ var useAutocomplete = ({
|
|
|
837
829
|
defaultValue: rest.defaultValue,
|
|
838
830
|
onChange: rest.onChange
|
|
839
831
|
});
|
|
840
|
-
const [
|
|
832
|
+
const [label, setLabel] = useState(void 0);
|
|
841
833
|
const [inputValue, setInputValue] = useState("");
|
|
842
834
|
const [focusedIndex, setFocusedIndex] = useState(-1);
|
|
843
835
|
const [isAllSelected, setIsAllSelected] = useState(false);
|
|
@@ -872,16 +864,16 @@ var useAutocomplete = ({
|
|
|
872
864
|
const validChildren = getValidChildren2(children);
|
|
873
865
|
const computedChildren = resolvedItems == null ? void 0 : resolvedItems.map((item, i) => {
|
|
874
866
|
if ("value" in item) {
|
|
875
|
-
const { label, value: value2, ...props } = item;
|
|
876
|
-
return /* @__PURE__ */ jsx8(AutocompleteOption, { value: value2, ...props, children:
|
|
867
|
+
const { label: label2, value: value2, ...props } = item;
|
|
868
|
+
return /* @__PURE__ */ jsx8(AutocompleteOption, { value: value2, ...props, children: label2 }, i);
|
|
877
869
|
} else if ("items" in item) {
|
|
878
|
-
const { label, items: items2 = [], ...props } = item;
|
|
870
|
+
const { label: label2, items: items2 = [], ...props } = item;
|
|
879
871
|
return /* @__PURE__ */ jsx8(
|
|
880
872
|
AutocompleteOptionGroup,
|
|
881
873
|
{
|
|
882
|
-
label,
|
|
874
|
+
label: label2,
|
|
883
875
|
...props,
|
|
884
|
-
children: items2.map(({ label:
|
|
876
|
+
children: items2.map(({ label: label3, value: value2, ...props2 }, i2) => /* @__PURE__ */ jsx8(AutocompleteOption, { value: value2, ...props2, children: label3 }, i2))
|
|
885
877
|
},
|
|
886
878
|
i
|
|
887
879
|
);
|
|
@@ -1079,7 +1071,7 @@ var useAutocomplete = ({
|
|
|
1079
1071
|
},
|
|
1080
1072
|
[descendants, onFocusFirst]
|
|
1081
1073
|
);
|
|
1082
|
-
const
|
|
1074
|
+
const onChangeLabel = useCallback(
|
|
1083
1075
|
(newValue, runOmit = true) => {
|
|
1084
1076
|
const enabledValues2 = descendants.enabledValues();
|
|
1085
1077
|
const selectedValues2 = enabledValues2.filter(({ node }) => node.dataset.value === newValue).map(({ node }) => {
|
|
@@ -1090,7 +1082,7 @@ var useAutocomplete = ({
|
|
|
1090
1082
|
selectedValues2.push(newValue);
|
|
1091
1083
|
setInputValue("");
|
|
1092
1084
|
}
|
|
1093
|
-
|
|
1085
|
+
setLabel((prev) => {
|
|
1094
1086
|
if (!isMulti) {
|
|
1095
1087
|
return selectedValues2[0];
|
|
1096
1088
|
} else {
|
|
@@ -1128,20 +1120,13 @@ var useAutocomplete = ({
|
|
|
1128
1120
|
return format((_a = node.textContent) != null ? _a : "").includes(newValue);
|
|
1129
1121
|
}
|
|
1130
1122
|
).length > 0;
|
|
1131
|
-
|
|
1123
|
+
onChangeLabel(newValue);
|
|
1132
1124
|
if (!allowFree || isHit2) {
|
|
1133
1125
|
setInputValue("");
|
|
1134
1126
|
}
|
|
1135
1127
|
rebirthOptions(false);
|
|
1136
1128
|
},
|
|
1137
|
-
[
|
|
1138
|
-
allowFree,
|
|
1139
|
-
onChangeDisplayValue,
|
|
1140
|
-
rebirthOptions,
|
|
1141
|
-
setValue,
|
|
1142
|
-
descendants,
|
|
1143
|
-
format
|
|
1144
|
-
]
|
|
1129
|
+
[allowFree, onChangeLabel, rebirthOptions, setValue, descendants, format]
|
|
1145
1130
|
);
|
|
1146
1131
|
const onSelect = useCallback(() => {
|
|
1147
1132
|
var _a, _b;
|
|
@@ -1202,7 +1187,7 @@ var useAutocomplete = ({
|
|
|
1202
1187
|
newItems = [...newItems, newItem];
|
|
1203
1188
|
} else {
|
|
1204
1189
|
const i = newItems.findIndex(
|
|
1205
|
-
({ label }) =>
|
|
1190
|
+
({ label: label2 }) => label2 === firstInsertPositionItem
|
|
1206
1191
|
);
|
|
1207
1192
|
const targetItem = newItems[i];
|
|
1208
1193
|
if (i !== -1 && "items" in targetItem) {
|
|
@@ -1247,11 +1232,11 @@ var useAutocomplete = ({
|
|
|
1247
1232
|
(ev) => {
|
|
1248
1233
|
ev.stopPropagation();
|
|
1249
1234
|
setValue([]);
|
|
1250
|
-
|
|
1235
|
+
setLabel(void 0);
|
|
1251
1236
|
setInputValue("");
|
|
1252
1237
|
rebirthOptions();
|
|
1253
1238
|
},
|
|
1254
|
-
[
|
|
1239
|
+
[setLabel, setInputValue, setValue, rebirthOptions]
|
|
1255
1240
|
);
|
|
1256
1241
|
const onClick = useCallback(() => {
|
|
1257
1242
|
if (isOpen) {
|
|
@@ -1293,7 +1278,7 @@ var useAutocomplete = ({
|
|
|
1293
1278
|
return;
|
|
1294
1279
|
if (isComposition.current)
|
|
1295
1280
|
return;
|
|
1296
|
-
const enabledDelete =
|
|
1281
|
+
const enabledDelete = label === inputValue || !inputValue.length;
|
|
1297
1282
|
const actions = {
|
|
1298
1283
|
ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? funcAll(onOpen, onFocusFirstOrSelected) : void 0,
|
|
1299
1284
|
ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? funcAll(onOpen, onFocusLastOrSelected) : void 0,
|
|
@@ -1318,7 +1303,7 @@ var useAutocomplete = ({
|
|
|
1318
1303
|
[
|
|
1319
1304
|
allowFree,
|
|
1320
1305
|
formControlProps,
|
|
1321
|
-
|
|
1306
|
+
label,
|
|
1322
1307
|
inputValue,
|
|
1323
1308
|
onOpen,
|
|
1324
1309
|
isFocused,
|
|
@@ -1424,7 +1409,7 @@ var useAutocomplete = ({
|
|
|
1424
1409
|
id,
|
|
1425
1410
|
descendants,
|
|
1426
1411
|
value,
|
|
1427
|
-
|
|
1412
|
+
label,
|
|
1428
1413
|
inputValue,
|
|
1429
1414
|
isHit,
|
|
1430
1415
|
isEmpty,
|
|
@@ -1442,7 +1427,7 @@ var useAutocomplete = ({
|
|
|
1442
1427
|
optionProps,
|
|
1443
1428
|
formControlProps,
|
|
1444
1429
|
setFocusedIndex,
|
|
1445
|
-
|
|
1430
|
+
onChangeLabel,
|
|
1446
1431
|
onChange,
|
|
1447
1432
|
onSearch,
|
|
1448
1433
|
onCreate,
|
|
@@ -1644,7 +1629,7 @@ var useAutocompleteOption = (props) => {
|
|
|
1644
1629
|
value,
|
|
1645
1630
|
omitSelectedValues,
|
|
1646
1631
|
onChange,
|
|
1647
|
-
|
|
1632
|
+
onChangeLabel,
|
|
1648
1633
|
focusedIndex,
|
|
1649
1634
|
setFocusedIndex,
|
|
1650
1635
|
onClose,
|
|
@@ -1718,8 +1703,8 @@ var useAutocompleteOption = (props) => {
|
|
|
1718
1703
|
useEffect(() => {
|
|
1719
1704
|
var _a2;
|
|
1720
1705
|
if (isSelected)
|
|
1721
|
-
|
|
1722
|
-
}, [computedProps, isSelected,
|
|
1706
|
+
onChangeLabel((_a2 = computedProps.value) != null ? _a2 : "", false);
|
|
1707
|
+
}, [computedProps, isSelected, onChangeLabel]);
|
|
1723
1708
|
const getOptionProps = useCallback(
|
|
1724
1709
|
(props2 = {}, ref = null) => {
|
|
1725
1710
|
var _a2;
|
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { Autocomplete, AutocompleteProps } from './autocomplete.mjs';
|
|
2
2
|
export { AutocompleteOptionGroup, AutocompleteOptionGroupProps } from './autocomplete-option-group.mjs';
|
|
3
|
-
export { b as AutocompleteItem, A as AutocompleteOption, a as AutocompleteOptionProps } from './use-autocomplete-
|
|
3
|
+
export { b as AutocompleteItem, A as AutocompleteOption, a as AutocompleteOptionProps } from './use-autocomplete-3c0916c6.js';
|
|
4
4
|
export { AutocompleteCreate, AutocompleteCreateProps } from './autocomplete-create.mjs';
|
|
5
5
|
export { AutocompleteEmpty, AutocompleteEmptyProps } from './autocomplete-empty.mjs';
|
|
6
6
|
export { MultiAutocomplete, MultiAutocompleteProps } from './multi-autocomplete.mjs';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { Autocomplete, AutocompleteProps } from './autocomplete.js';
|
|
2
2
|
export { AutocompleteOptionGroup, AutocompleteOptionGroupProps } from './autocomplete-option-group.js';
|
|
3
|
-
export { b as AutocompleteItem, A as AutocompleteOption, a as AutocompleteOptionProps } from './use-autocomplete-
|
|
3
|
+
export { b as AutocompleteItem, A as AutocompleteOption, a as AutocompleteOptionProps } from './use-autocomplete-3c0916c6.js';
|
|
4
4
|
export { AutocompleteCreate, AutocompleteCreateProps } from './autocomplete-create.js';
|
|
5
5
|
export { AutocompleteEmpty, AutocompleteEmptyProps } from './autocomplete-empty.js';
|
|
6
6
|
export { MultiAutocomplete, MultiAutocompleteProps } from './multi-autocomplete.js';
|