@yamada-ui/autocomplete 0.4.13 → 0.5.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.d.mts +1 -1
- package/dist/autocomplete-create.d.ts +1 -1
- package/dist/autocomplete-create.mjs +1 -1
- package/dist/autocomplete-empty.d.mts +1 -1
- package/dist/autocomplete-empty.d.ts +1 -1
- package/dist/autocomplete-empty.mjs +1 -1
- package/dist/autocomplete-icon.d.mts +2 -2
- package/dist/autocomplete-icon.d.ts +2 -2
- package/dist/autocomplete-icon.mjs +1 -1
- package/dist/autocomplete-list.d.mts +1 -1
- package/dist/autocomplete-list.d.ts +1 -1
- package/dist/autocomplete-list.mjs +1 -1
- package/dist/autocomplete-option-group.d.mts +2 -3
- package/dist/autocomplete-option-group.d.ts +2 -3
- package/dist/autocomplete-option-group.mjs +1 -1
- package/dist/autocomplete-option.d.mts +1 -2
- package/dist/autocomplete-option.d.ts +1 -2
- package/dist/autocomplete-option.mjs +1 -1
- package/dist/autocomplete.d.mts +5 -6
- package/dist/autocomplete.d.ts +5 -6
- package/dist/autocomplete.js +57 -60
- package/dist/autocomplete.mjs +1 -1
- package/dist/{chunk-EFOFI4S7.mjs → chunk-JKY5MMNC.mjs} +61 -64
- package/dist/index.d.mts +1 -2
- package/dist/index.d.ts +1 -2
- package/dist/index.js +61 -64
- package/dist/index.mjs +1 -1
- package/dist/multi-autocomplete.d.mts +5 -6
- package/dist/multi-autocomplete.d.ts +5 -6
- package/dist/multi-autocomplete.js +57 -60
- package/dist/multi-autocomplete.mjs +1 -1
- package/dist/{use-autocomplete-2422c1c8.d.ts → use-autocomplete-3e77a4da.d.ts} +31 -42
- package/dist/use-autocomplete.d.mts +1 -2
- package/dist/use-autocomplete.d.ts +1 -2
- package/dist/use-autocomplete.js +53 -56
- package/dist/use-autocomplete.mjs +1 -1
- package/package.json +6 -6
|
@@ -3,11 +3,10 @@ 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 {
|
|
6
|
+
import { c as UseAutocompleteProps } from './use-autocomplete-3e77a4da.js';
|
|
7
7
|
import 'react/jsx-runtime';
|
|
8
8
|
import '@yamada-ui/form-control';
|
|
9
9
|
import '@yamada-ui/popover';
|
|
10
|
-
import '@yamada-ui/select';
|
|
11
10
|
import '@yamada-ui/utils';
|
|
12
11
|
|
|
13
12
|
type MultiAutocompleteOptions = {
|
|
@@ -49,15 +48,15 @@ type MultiAutocompleteOptions = {
|
|
|
49
48
|
/**
|
|
50
49
|
* Props for multi autocomplete container element.
|
|
51
50
|
*/
|
|
52
|
-
containerProps?: Omit<HTMLUIProps<
|
|
51
|
+
containerProps?: Omit<HTMLUIProps<"div">, "children">;
|
|
53
52
|
/**
|
|
54
53
|
* Props for multi autocomplete list element.
|
|
55
54
|
*/
|
|
56
|
-
listProps?: Omit<AutocompleteListProps,
|
|
55
|
+
listProps?: Omit<AutocompleteListProps, "children">;
|
|
57
56
|
/**
|
|
58
57
|
* Props for multi autocomplete input element.
|
|
59
58
|
*/
|
|
60
|
-
inputProps?: HTMLUIProps<
|
|
59
|
+
inputProps?: HTMLUIProps<"input">;
|
|
61
60
|
/**
|
|
62
61
|
* Props for multi autocomplete icon element.
|
|
63
62
|
*/
|
|
@@ -67,7 +66,7 @@ type MultiAutocompleteOptions = {
|
|
|
67
66
|
*/
|
|
68
67
|
clearIconProps?: AutocompleteIconProps;
|
|
69
68
|
};
|
|
70
|
-
type MultiAutocompleteProps = ThemeProps<
|
|
69
|
+
type MultiAutocompleteProps = ThemeProps<"Select"> & UseAutocompleteProps<string[]> & MultiAutocompleteOptions;
|
|
71
70
|
declare const MultiAutocomplete: _yamada_ui_core.Component<"div", MultiAutocompleteProps>;
|
|
72
71
|
|
|
73
72
|
export { MultiAutocomplete, MultiAutocompleteProps };
|
|
@@ -352,20 +352,20 @@ var defaultFormat = (value) => {
|
|
|
352
352
|
value = value.toUpperCase();
|
|
353
353
|
return value;
|
|
354
354
|
};
|
|
355
|
-
var
|
|
356
|
-
const
|
|
357
|
-
|
|
355
|
+
var flattenItems = (items) => {
|
|
356
|
+
const filterItems = (items2) => items2.map((item) => {
|
|
357
|
+
var _a;
|
|
358
|
+
const { isDisabled, isFocusable } = item;
|
|
358
359
|
const trulyDisabled = !!isDisabled && !isFocusable;
|
|
359
|
-
const isMulti = (0, import_utils6.isArray)(value);
|
|
360
360
|
if (trulyDisabled)
|
|
361
361
|
return;
|
|
362
|
-
if (
|
|
363
|
-
return
|
|
362
|
+
if ("items" in item) {
|
|
363
|
+
return filterItems((_a = item.items) != null ? _a : []);
|
|
364
364
|
} else {
|
|
365
|
-
return
|
|
365
|
+
return item;
|
|
366
366
|
}
|
|
367
367
|
}).filter(Boolean);
|
|
368
|
-
return
|
|
368
|
+
return filterItems(items).flat(Infinity);
|
|
369
369
|
};
|
|
370
370
|
var isTargetOption = (target) => {
|
|
371
371
|
var _a;
|
|
@@ -388,14 +388,15 @@ var useAutocomplete = ({
|
|
|
388
388
|
maxSelectedValues,
|
|
389
389
|
closeOnBlur = true,
|
|
390
390
|
closeOnEsc = true,
|
|
391
|
-
|
|
392
|
-
|
|
391
|
+
allowCreate = false,
|
|
392
|
+
insertPositionItem = "first",
|
|
393
393
|
emptyMessage = "No results found",
|
|
394
394
|
format = defaultFormat,
|
|
395
395
|
placement = "bottom-start",
|
|
396
396
|
duration = 0.2,
|
|
397
397
|
optionProps,
|
|
398
398
|
placeholder,
|
|
399
|
+
items,
|
|
399
400
|
children,
|
|
400
401
|
...rest
|
|
401
402
|
}) => {
|
|
@@ -419,7 +420,7 @@ var useAutocomplete = ({
|
|
|
419
420
|
const inputRef = (0, import_react.useRef)(null);
|
|
420
421
|
const timeoutIds = (0, import_react.useRef)(/* @__PURE__ */ new Set([]));
|
|
421
422
|
const isComposition = (0, import_react.useRef)(false);
|
|
422
|
-
const [
|
|
423
|
+
const [resolvedItems, setResolvedItems] = (0, import_react.useState)(items);
|
|
423
424
|
const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
|
|
424
425
|
value: rest.value,
|
|
425
426
|
defaultValue: rest.defaultValue,
|
|
@@ -432,19 +433,19 @@ var useAutocomplete = ({
|
|
|
432
433
|
const [isHit, setIsHit] = (0, import_react.useState)(true);
|
|
433
434
|
const [isOpen, setIsOpen] = (0, import_react.useState)(defaultIsOpen != null ? defaultIsOpen : false);
|
|
434
435
|
const isFocused = focusedIndex > -1;
|
|
435
|
-
const isCreate = focusedIndex === -2 &&
|
|
436
|
+
const isCreate = focusedIndex === -2 && allowCreate;
|
|
436
437
|
const isMulti = (0, import_utils6.isArray)(value);
|
|
437
438
|
const isEmptyValue = !isMulti ? !value : !value.length;
|
|
438
|
-
const [
|
|
439
|
-
if ((0, import_utils6.isArray)(
|
|
440
|
-
return
|
|
439
|
+
const [firstInsertPositionItem, secondInsertPositionItem] = (0, import_react.useMemo)(() => {
|
|
440
|
+
if ((0, import_utils6.isArray)(insertPositionItem)) {
|
|
441
|
+
return insertPositionItem;
|
|
441
442
|
} else {
|
|
442
|
-
return [
|
|
443
|
+
return [insertPositionItem, "first"];
|
|
443
444
|
}
|
|
444
|
-
}, [
|
|
445
|
-
if (
|
|
445
|
+
}, [insertPositionItem]);
|
|
446
|
+
if (allowCreate && !(0, import_utils6.isUndefined)(children)) {
|
|
446
447
|
console.warn(
|
|
447
|
-
`${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: ${!isMulti ? "Autocomplete" : "MultiAutocomplete"} internally prefers 'children'. If '
|
|
448
|
+
`${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: ${!isMulti ? "Autocomplete" : "MultiAutocomplete"} internally prefers 'children'. If 'allowCreate' is true, it will not be reflected correctly. If want to reflect, please set 'items' in props.`
|
|
448
449
|
);
|
|
449
450
|
}
|
|
450
451
|
const selectedValues = descendants.enabledValues(
|
|
@@ -458,18 +459,18 @@ var useAutocomplete = ({
|
|
|
458
459
|
({ node, index }) => "target" in node.dataset && !selectedIndexes.includes(index)
|
|
459
460
|
);
|
|
460
461
|
const validChildren = (0, import_utils6.getValidChildren)(children);
|
|
461
|
-
const computedChildren =
|
|
462
|
-
if (
|
|
462
|
+
const computedChildren = resolvedItems == null ? void 0 : resolvedItems.map((item, i) => {
|
|
463
|
+
if ("value" in item) {
|
|
464
|
+
const { label, value: value2, ...props } = item;
|
|
463
465
|
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteOption, { value: value2, ...props, children: label }, i);
|
|
464
|
-
} else {
|
|
466
|
+
} else if ("items" in item) {
|
|
467
|
+
const { label, items: items2 = [], ...props } = item;
|
|
465
468
|
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
466
469
|
AutocompleteOptionGroup,
|
|
467
470
|
{
|
|
468
471
|
label,
|
|
469
472
|
...props,
|
|
470
|
-
children:
|
|
471
|
-
({ 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
|
|
472
|
-
)
|
|
473
|
+
children: items2.map(({ label: label2, value: value2, ...props2 }, i2) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteOption, { value: value2, ...props2, children: label2 }, i2))
|
|
473
474
|
},
|
|
474
475
|
i
|
|
475
476
|
);
|
|
@@ -480,13 +481,13 @@ var useAutocomplete = ({
|
|
|
480
481
|
var _a;
|
|
481
482
|
if (formControlProps.disabled || formControlProps.readOnly)
|
|
482
483
|
return;
|
|
483
|
-
if (!
|
|
484
|
+
if (!allowCreate && (isEmpty || isAllSelected))
|
|
484
485
|
return;
|
|
485
486
|
setIsOpen(true);
|
|
486
487
|
if (inputRef.current)
|
|
487
488
|
inputRef.current.focus();
|
|
488
489
|
(_a = rest.onOpen) == null ? void 0 : _a.call(rest);
|
|
489
|
-
}, [
|
|
490
|
+
}, [allowCreate, formControlProps, isAllSelected, isEmpty, rest]);
|
|
490
491
|
const onClose = (0, import_react.useCallback)(() => {
|
|
491
492
|
var _a;
|
|
492
493
|
setIsOpen(false);
|
|
@@ -758,55 +759,51 @@ var useAutocomplete = ({
|
|
|
758
759
|
isComposition.current = false;
|
|
759
760
|
}, []);
|
|
760
761
|
const onCreate = (0, import_react.useCallback)(() => {
|
|
761
|
-
var _a;
|
|
762
|
+
var _a, _b, _c;
|
|
762
763
|
if (!listRef.current)
|
|
763
764
|
return;
|
|
764
|
-
const
|
|
765
|
-
let
|
|
766
|
-
if (
|
|
767
|
-
|
|
768
|
-
if (
|
|
769
|
-
|
|
770
|
-
} else if (
|
|
771
|
-
|
|
765
|
+
const newItem = { label: inputValue, value: inputValue };
|
|
766
|
+
let newItems = [];
|
|
767
|
+
if (resolvedItems)
|
|
768
|
+
newItems = resolvedItems;
|
|
769
|
+
if (firstInsertPositionItem === "first") {
|
|
770
|
+
newItems = [newItem, ...newItems];
|
|
771
|
+
} else if (firstInsertPositionItem === "last") {
|
|
772
|
+
newItems = [...newItems, newItem];
|
|
772
773
|
} else {
|
|
773
|
-
const i =
|
|
774
|
-
({ label }) => label ===
|
|
774
|
+
const i = newItems.findIndex(
|
|
775
|
+
({ label }) => label === firstInsertPositionItem
|
|
775
776
|
);
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
...newOptions[i].value
|
|
781
|
-
];
|
|
777
|
+
const targetItem = newItems[i];
|
|
778
|
+
if (i !== -1 && "items" in targetItem) {
|
|
779
|
+
if (secondInsertPositionItem === "first") {
|
|
780
|
+
targetItem.items = [newItem, ...(_a = targetItem.items) != null ? _a : []];
|
|
782
781
|
} else {
|
|
783
|
-
|
|
784
|
-
...newOptions[i].value,
|
|
785
|
-
newOption
|
|
786
|
-
];
|
|
782
|
+
targetItem.items = [...(_b = targetItem.items) != null ? _b : [], newItem];
|
|
787
783
|
}
|
|
784
|
+
newItems[i] = targetItem;
|
|
788
785
|
} else {
|
|
789
786
|
console.warn(
|
|
790
|
-
`${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: '${
|
|
787
|
+
`${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: '${firstInsertPositionItem}' specified in insertPositionItem does not exist in the option group.`
|
|
791
788
|
);
|
|
792
789
|
}
|
|
793
790
|
}
|
|
794
|
-
|
|
791
|
+
setResolvedItems(newItems);
|
|
795
792
|
onChange(inputValue);
|
|
796
793
|
rebirthOptions(false);
|
|
797
|
-
const index =
|
|
794
|
+
const index = flattenItems(newItems).findIndex(
|
|
798
795
|
({ value: value2 }) => value2 === inputValue
|
|
799
796
|
);
|
|
800
797
|
setFocusedIndex(index);
|
|
801
|
-
(
|
|
798
|
+
(_c = rest.onCreate) == null ? void 0 : _c.call(rest, newItem, newItems);
|
|
802
799
|
}, [
|
|
803
800
|
inputValue,
|
|
804
|
-
|
|
805
|
-
|
|
801
|
+
resolvedItems,
|
|
802
|
+
firstInsertPositionItem,
|
|
806
803
|
onChange,
|
|
807
804
|
rebirthOptions,
|
|
808
805
|
rest,
|
|
809
|
-
|
|
806
|
+
secondInsertPositionItem,
|
|
810
807
|
isMulti
|
|
811
808
|
]);
|
|
812
809
|
const onDelete = (0, import_react.useCallback)(() => {
|
|
@@ -993,7 +990,7 @@ var useAutocomplete = ({
|
|
|
993
990
|
focusedIndex,
|
|
994
991
|
omitSelectedValues,
|
|
995
992
|
closeOnSelect,
|
|
996
|
-
|
|
993
|
+
allowCreate,
|
|
997
994
|
emptyMessage,
|
|
998
995
|
isOpen,
|
|
999
996
|
isAllSelected,
|
|
@@ -1505,7 +1502,7 @@ var MultiAutocomplete = (0, import_core8.forwardRef)(
|
|
|
1505
1502
|
getPopoverProps,
|
|
1506
1503
|
getContainerProps,
|
|
1507
1504
|
getFieldProps,
|
|
1508
|
-
|
|
1505
|
+
allowCreate,
|
|
1509
1506
|
isEmpty,
|
|
1510
1507
|
inputValue,
|
|
1511
1508
|
computedChildren,
|
|
@@ -1534,7 +1531,7 @@ var MultiAutocomplete = (0, import_core8.forwardRef)(
|
|
|
1534
1531
|
value,
|
|
1535
1532
|
formControlProps,
|
|
1536
1533
|
inputValue,
|
|
1537
|
-
|
|
1534
|
+
allowCreate,
|
|
1538
1535
|
isEmpty,
|
|
1539
1536
|
styles
|
|
1540
1537
|
},
|
|
@@ -1566,9 +1563,9 @@ var MultiAutocomplete = (0, import_core8.forwardRef)(
|
|
|
1566
1563
|
}
|
|
1567
1564
|
) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteIcon, { ...iconProps, ...formControlProps }),
|
|
1568
1565
|
!isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(AutocompleteList, { ...listProps, children: [
|
|
1569
|
-
|
|
1566
|
+
allowCreate ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteCreate, {}) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteEmpty, {}),
|
|
1570
1567
|
children != null ? children : computedChildren
|
|
1571
|
-
] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteList, { ...listProps, children:
|
|
1568
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteList, { ...listProps, children: allowCreate && inputValue ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteCreate, {}) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteEmpty, {}) })
|
|
1572
1569
|
]
|
|
1573
1570
|
}
|
|
1574
1571
|
) })
|
|
@@ -5,7 +5,6 @@ import * as _yamada_ui_core from '@yamada-ui/core';
|
|
|
5
5
|
import { HTMLUIProps, CSSUIObject } from '@yamada-ui/core';
|
|
6
6
|
import { FormControlOptions } from '@yamada-ui/form-control';
|
|
7
7
|
import { PopoverProps } from '@yamada-ui/popover';
|
|
8
|
-
import { UIOption } from '@yamada-ui/select';
|
|
9
8
|
import { PropGetter, Dict, DOMAttributes, Union } from '@yamada-ui/utils';
|
|
10
9
|
|
|
11
10
|
type AutocompleteOptionOptions = {
|
|
@@ -17,6 +16,16 @@ type AutocompleteOptionOptions = {
|
|
|
17
16
|
type AutocompleteOptionProps = UseAutocompleteOptionProps & AutocompleteOptionOptions;
|
|
18
17
|
declare const AutocompleteOption: _yamada_ui_core.Component<"li", AutocompleteOptionProps>;
|
|
19
18
|
|
|
19
|
+
type AutocompleteBaseItem = Omit<AutocompleteOptionProps, "value" | "children"> & {
|
|
20
|
+
label?: string;
|
|
21
|
+
};
|
|
22
|
+
type AutocompleteItemWithValue = AutocompleteBaseItem & {
|
|
23
|
+
value?: string;
|
|
24
|
+
};
|
|
25
|
+
type AutocompleteItemWithItems = AutocompleteBaseItem & {
|
|
26
|
+
items?: AutocompleteItemWithValue[];
|
|
27
|
+
};
|
|
28
|
+
type AutocompleteItem = AutocompleteItemWithValue | AutocompleteItemWithItems;
|
|
20
29
|
declare const AutocompleteDescendantsContextProvider: react.Provider<{
|
|
21
30
|
register: (nodeOrOptions: HTMLElement | {
|
|
22
31
|
disabled?: boolean | undefined;
|
|
@@ -425,11 +434,7 @@ declare const AutocompleteDescendantsContextProvider: react.Provider<{
|
|
|
425
434
|
} & {
|
|
426
435
|
node: HTMLElement;
|
|
427
436
|
index: number;
|
|
428
|
-
}) | undefined;
|
|
429
|
-
* The position to be inserted when the autocomplete option is created.
|
|
430
|
-
*
|
|
431
|
-
* @default 'first'
|
|
432
|
-
*/
|
|
437
|
+
}) | undefined;
|
|
433
438
|
enabledIndexOf: (node: HTMLElement | null, filter?: ((value: {
|
|
434
439
|
disabled?: boolean | undefined;
|
|
435
440
|
id?: string | undefined;
|
|
@@ -1026,11 +1031,7 @@ declare const useAutocompleteDescendantsContext: () => {
|
|
|
1026
1031
|
} & {
|
|
1027
1032
|
node: HTMLElement;
|
|
1028
1033
|
index: number;
|
|
1029
|
-
}) | undefined;
|
|
1030
|
-
* The position to be inserted when the autocomplete option is created.
|
|
1031
|
-
*
|
|
1032
|
-
* @default 'first'
|
|
1033
|
-
*/
|
|
1034
|
+
}) | undefined;
|
|
1034
1035
|
enabledIndexOf: (node: HTMLElement | null, filter?: ((value: {
|
|
1035
1036
|
disabled?: boolean | undefined;
|
|
1036
1037
|
id?: string | undefined;
|
|
@@ -1627,11 +1628,7 @@ declare const useAutocompleteDescendants: () => {
|
|
|
1627
1628
|
} & {
|
|
1628
1629
|
node: HTMLElement;
|
|
1629
1630
|
index: number;
|
|
1630
|
-
}) | undefined;
|
|
1631
|
-
* The position to be inserted when the autocomplete option is created.
|
|
1632
|
-
*
|
|
1633
|
-
* @default 'first'
|
|
1634
|
-
*/
|
|
1631
|
+
}) | undefined;
|
|
1635
1632
|
enabledIndexOf: (node: HTMLElement | null, filter?: ((value: {
|
|
1636
1633
|
disabled?: boolean | undefined;
|
|
1637
1634
|
id?: string | undefined;
|
|
@@ -2859,11 +2856,7 @@ declare const useAutocompleteDescendant: (options?: {
|
|
|
2859
2856
|
} & {
|
|
2860
2857
|
node: HTMLElement;
|
|
2861
2858
|
index: number;
|
|
2862
|
-
}) | undefined;
|
|
2863
|
-
* The position to be inserted when the autocomplete option is created.
|
|
2864
|
-
*
|
|
2865
|
-
* @default 'first'
|
|
2866
|
-
*/
|
|
2859
|
+
}) | undefined;
|
|
2867
2860
|
enabledIndexOf: (node: HTMLElement | null, filter?: ((value: {
|
|
2868
2861
|
disabled?: boolean | undefined;
|
|
2869
2862
|
id?: string | undefined;
|
|
@@ -3336,7 +3329,7 @@ declare const useAutocompleteDescendant: (options?: {
|
|
|
3336
3329
|
enabledIndex: number;
|
|
3337
3330
|
register: (node: HTMLElement | null) => void;
|
|
3338
3331
|
};
|
|
3339
|
-
type AutocompleteContext = Omit<UseAutocompleteProps,
|
|
3332
|
+
type AutocompleteContext = Omit<UseAutocompleteProps, "value" | "defaultValue" | "onChange" | "onCreate"> & {
|
|
3340
3333
|
value: string | string[];
|
|
3341
3334
|
displayValue: string | string[] | undefined;
|
|
3342
3335
|
inputValue: string;
|
|
@@ -3365,7 +3358,7 @@ type AutocompleteContext = Omit<UseAutocompleteProps, 'value' | 'defaultValue' |
|
|
|
3365
3358
|
};
|
|
3366
3359
|
declare const AutocompleteProvider: react.Provider<AutocompleteContext>;
|
|
3367
3360
|
declare const useAutocompleteContext: () => AutocompleteContext;
|
|
3368
|
-
type UseAutocompleteBaseProps<T extends string | string[] = string> = Omit<PopoverProps,
|
|
3361
|
+
type UseAutocompleteBaseProps<T extends string | string[] = string> = Omit<PopoverProps, "initialFocusRef" | "closeOnButton" | "isOpen" | "trigger" | "autoFocus" | "restoreFocus" | "openDelay" | "closeDelay"> & FormControlOptions & {
|
|
3369
3362
|
/**
|
|
3370
3363
|
* The value of the autocomplete.
|
|
3371
3364
|
*/
|
|
@@ -3385,7 +3378,7 @@ type UseAutocompleteBaseProps<T extends string | string[] = string> = Omit<Popov
|
|
|
3385
3378
|
/**
|
|
3386
3379
|
* The callback invoked when autocomlete option created.
|
|
3387
3380
|
*/
|
|
3388
|
-
onCreate?: (
|
|
3381
|
+
onCreate?: (newItem: AutocompleteItem, newItems: AutocompleteItem[]) => void;
|
|
3389
3382
|
/**
|
|
3390
3383
|
* Function to format text when search input.
|
|
3391
3384
|
*/
|
|
@@ -3395,7 +3388,7 @@ type UseAutocompleteBaseProps<T extends string | string[] = string> = Omit<Popov
|
|
|
3395
3388
|
*
|
|
3396
3389
|
* @default 'first'
|
|
3397
3390
|
*/
|
|
3398
|
-
|
|
3391
|
+
insertPositionItem?: Union<"first" | "last"> | [string, "first" | "last"];
|
|
3399
3392
|
/**
|
|
3400
3393
|
* If `true`, the list element will be closed when value is selected.
|
|
3401
3394
|
*
|
|
@@ -3409,11 +3402,11 @@ type UseAutocompleteBaseProps<T extends string | string[] = string> = Omit<Popov
|
|
|
3409
3402
|
*/
|
|
3410
3403
|
emptyMessage?: string;
|
|
3411
3404
|
/**
|
|
3412
|
-
* If `true`, enables the creation of autocomplete
|
|
3405
|
+
* If `true`, enables the creation of autocomplete option.
|
|
3413
3406
|
*
|
|
3414
3407
|
* @default false
|
|
3415
3408
|
*/
|
|
3416
|
-
|
|
3409
|
+
allowCreate?: boolean;
|
|
3417
3410
|
/**
|
|
3418
3411
|
* If `true`, the selected item(s) will be excluded from the list.
|
|
3419
3412
|
*
|
|
@@ -3427,14 +3420,14 @@ type UseAutocompleteBaseProps<T extends string | string[] = string> = Omit<Popov
|
|
|
3427
3420
|
/**
|
|
3428
3421
|
* Props for select option element.
|
|
3429
3422
|
*/
|
|
3430
|
-
optionProps?: Omit<AutocompleteOptionProps,
|
|
3423
|
+
optionProps?: Omit<AutocompleteOptionProps, "value" | "children">;
|
|
3431
3424
|
/**
|
|
3432
|
-
* If provided, generate options based on
|
|
3425
|
+
* If provided, generate options based on items.
|
|
3433
3426
|
*/
|
|
3434
|
-
|
|
3427
|
+
items?: AutocompleteItem[];
|
|
3435
3428
|
};
|
|
3436
|
-
type UseAutocompleteProps<T extends string | string[] = string> = Omit<HTMLUIProps<
|
|
3437
|
-
declare const useAutocomplete: <T extends string | string[] = string>({ defaultIsOpen, closeOnSelect, omitSelectedValues, maxSelectedValues, closeOnBlur, closeOnEsc,
|
|
3429
|
+
type UseAutocompleteProps<T extends string | string[] = string> = Omit<HTMLUIProps<"input">, keyof UseAutocompleteBaseProps | "list" | "disabled" | "required" | "readOnly" | "size"> & UseAutocompleteBaseProps<T>;
|
|
3430
|
+
declare const useAutocomplete: <T extends string | string[] = string>({ defaultIsOpen, closeOnSelect, omitSelectedValues, maxSelectedValues, closeOnBlur, closeOnEsc, allowCreate, insertPositionItem, emptyMessage, format, placement, duration, optionProps, placeholder, items, children, ...rest }: UseAutocompleteProps<T>) => {
|
|
3438
3431
|
id: string | undefined;
|
|
3439
3432
|
descendants: {
|
|
3440
3433
|
register: (nodeOrOptions: HTMLElement | {
|
|
@@ -3844,11 +3837,7 @@ declare const useAutocomplete: <T extends string | string[] = string>({ defaultI
|
|
|
3844
3837
|
} & {
|
|
3845
3838
|
node: HTMLElement;
|
|
3846
3839
|
index: number;
|
|
3847
|
-
}) | undefined;
|
|
3848
|
-
* The position to be inserted when the autocomplete option is created.
|
|
3849
|
-
*
|
|
3850
|
-
* @default 'first'
|
|
3851
|
-
*/
|
|
3840
|
+
}) | undefined;
|
|
3852
3841
|
enabledIndexOf: (node: HTMLElement | null, filter?: ((value: {
|
|
3853
3842
|
disabled?: boolean | undefined;
|
|
3854
3843
|
id?: string | undefined;
|
|
@@ -4042,11 +4031,11 @@ declare const useAutocomplete: <T extends string | string[] = string>({ defaultI
|
|
|
4042
4031
|
inputValue: string;
|
|
4043
4032
|
isHit: boolean;
|
|
4044
4033
|
isEmpty: boolean;
|
|
4045
|
-
computedChildren: react_jsx_runtime.JSX.Element[] | undefined;
|
|
4034
|
+
computedChildren: (react_jsx_runtime.JSX.Element | undefined)[] | undefined;
|
|
4046
4035
|
focusedIndex: number;
|
|
4047
4036
|
omitSelectedValues: boolean;
|
|
4048
4037
|
closeOnSelect: boolean;
|
|
4049
|
-
|
|
4038
|
+
allowCreate: boolean;
|
|
4050
4039
|
emptyMessage: string;
|
|
4051
4040
|
isOpen: boolean;
|
|
4052
4041
|
isAllSelected: boolean;
|
|
@@ -4086,7 +4075,7 @@ type UseAutocompleteInputReturn = ReturnType<typeof useAutocompleteInput>;
|
|
|
4086
4075
|
declare const useAutocompleteList: () => {
|
|
4087
4076
|
getListProps: PropGetter;
|
|
4088
4077
|
};
|
|
4089
|
-
type UseAutocompleteOptionGroupProps = HTMLUIProps<
|
|
4078
|
+
type UseAutocompleteOptionGroupProps = HTMLUIProps<"ul"> & {
|
|
4090
4079
|
/**
|
|
4091
4080
|
* The label of the autocomplete option group.
|
|
4092
4081
|
*/
|
|
@@ -4098,7 +4087,7 @@ declare const useAutocompleteOptionGroup: ({ label, ...rest }: UseAutocompleteOp
|
|
|
4098
4087
|
getGroupProps: PropGetter;
|
|
4099
4088
|
};
|
|
4100
4089
|
type UseAutocompleteOptionGroupReturn = ReturnType<typeof useAutocompleteOptionGroup>;
|
|
4101
|
-
type UseAutocompleteOptionProps = Omit<HTMLUIProps<
|
|
4090
|
+
type UseAutocompleteOptionProps = Omit<HTMLUIProps<"li">, "value" | "children"> & {
|
|
4102
4091
|
/**
|
|
4103
4092
|
* The value of the select option.
|
|
4104
4093
|
*/
|
|
@@ -4143,4 +4132,4 @@ declare const useAutocompleteEmpty: () => {
|
|
|
4143
4132
|
};
|
|
4144
4133
|
type UseAutocompleteEmptyReturn = ReturnType<typeof useAutocompleteEmpty>;
|
|
4145
4134
|
|
|
4146
|
-
export { AutocompleteOption as A, UseAutocompleteOptionGroupProps as U, AutocompleteOptionProps as a,
|
|
4135
|
+
export { AutocompleteOption as A, UseAutocompleteOptionGroupProps as U, AutocompleteOptionProps as a, AutocompleteItem as b, UseAutocompleteProps as c, AutocompleteDescendantsContextProvider as d, useAutocompleteDescendants as e, useAutocompleteDescendant as f, AutocompleteProvider as g, useAutocompleteContext as h, useAutocomplete as i, UseAutocompleteReturn as j, useAutocompleteInput as k, UseAutocompleteInputReturn as l, useAutocompleteList as m, useAutocompleteOptionGroup as n, UseAutocompleteOptionGroupReturn as o, UseAutocompleteOptionProps as p, useAutocompleteOption as q, UseAutocompleteOptionReturn as r, useAutocompleteCreate as s, UseAutocompleteCreateReturn as t, useAutocompleteDescendantsContext as u, useAutocompleteEmpty as v, UseAutocompleteEmptyReturn as w };
|
|
@@ -3,6 +3,5 @@ import 'react';
|
|
|
3
3
|
import '@yamada-ui/core';
|
|
4
4
|
import '@yamada-ui/form-control';
|
|
5
5
|
import '@yamada-ui/popover';
|
|
6
|
-
import '@yamada-ui/select';
|
|
7
6
|
import '@yamada-ui/utils';
|
|
8
|
-
export {
|
|
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-3e77a4da.js';
|
|
@@ -3,6 +3,5 @@ import 'react';
|
|
|
3
3
|
import '@yamada-ui/core';
|
|
4
4
|
import '@yamada-ui/form-control';
|
|
5
5
|
import '@yamada-ui/popover';
|
|
6
|
-
import '@yamada-ui/select';
|
|
7
6
|
import '@yamada-ui/utils';
|
|
8
|
-
export {
|
|
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-3e77a4da.js';
|