@ogcio/design-system-react 1.13.0 → 1.15.0
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/autocomplete.d.ts +21 -3
- package/dist/autocomplete/autocomplete.js +208 -159
- package/dist/autocomplete/types.d.ts +8 -4
- package/dist/autocomplete/types.js +2 -1
- package/dist/autocomplete/use-autocomplete-controller.d.ts +4 -2
- package/dist/autocomplete/use-autocomplete-controller.js +123 -79
- package/dist/button/button.js +27 -22
- package/dist/data-grid/data-grid-footer.d.ts +12 -0
- package/dist/data-grid/data-grid-footer.js +66 -0
- package/dist/data-grid/data-grid-header.d.ts +12 -0
- package/dist/data-grid/data-grid-header.js +82 -0
- package/dist/header/components/header-slot.js +34 -31
- package/dist/header/helper.d.ts +0 -1
- package/dist/header/helper.js +37 -62
- package/dist/hooks/use-combined-refs.d.ts +5 -0
- package/dist/hooks/use-combined-refs.js +10 -0
- package/dist/hooks/use-scroll-highlighted-item.d.ts +1 -0
- package/dist/hooks/use-scroll-highlighted-item.js +16 -0
- package/dist/icon/icon.js +15 -15
- package/dist/icon-button/icon-button.js +14 -12
- package/dist/index.d.ts +5 -2
- package/dist/index.js +68 -63
- package/dist/list/list.js +1 -1
- package/dist/modal/modal.d.ts +8 -2
- package/dist/modal/modal.js +155 -134
- package/dist/popover/popover.d.ts +1 -1
- package/dist/popover/popover.js +296 -286
- package/dist/popover/types.d.ts +1 -0
- package/dist/popover/utilities.d.ts +2 -0
- package/dist/popover/utilities.js +16 -0
- package/dist/primitives/button.d.ts +3 -0
- package/dist/primitives/button.js +9 -0
- package/dist/select/select-menu.d.ts +2 -2
- package/dist/select/select-menu.js +96 -99
- package/dist/select/select-next.d.ts +13 -2
- package/dist/select/select-next.js +182 -167
- package/dist/select/select-search.js +17 -17
- package/dist/select/types.d.ts +3 -1
- package/dist/styles.css +1 -1
- package/dist/table/table-data.js +1 -1
- package/dist/tabs/scrollable-tab-list.d.ts +9 -0
- package/dist/tabs/scrollable-tab-list.js +84 -0
- package/dist/tabs/tab-item.d.ts +9 -15
- package/dist/tabs/tab-item.js +85 -38
- package/dist/tabs/tab-list.d.ts +2 -5
- package/dist/tabs/tab-list.js +83 -49
- package/dist/tabs/tab-panel.d.ts +2 -7
- package/dist/tabs/tab-panel.js +2 -5
- package/dist/tabs/tabs.d.ts +2 -7
- package/dist/tabs/tabs.js +24 -20
- package/dist/tabs/types.d.ts +64 -0
- package/dist/tabs/types.js +1 -0
- package/dist/textarea/textarea.d.ts +1 -2
- package/dist/textarea/textarea.js +60 -61
- package/package.json +4 -4
|
@@ -1,4 +1,22 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import { AutocompleteItemProps
|
|
3
|
-
export declare const Autocomplete:
|
|
1
|
+
import { FC, ChangeEvent } from 'react';
|
|
2
|
+
import { AutocompleteItemProps } from './types.js';
|
|
3
|
+
export declare const Autocomplete: import('react').ForwardRefExoticComponent<{
|
|
4
|
+
id?: string;
|
|
5
|
+
defaultValue?: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
8
|
+
freeSolo?: boolean;
|
|
9
|
+
isLoading?: boolean;
|
|
10
|
+
onSelectItem?: (item: string) => void;
|
|
11
|
+
onOpen?: () => void;
|
|
12
|
+
onClose?: () => void;
|
|
13
|
+
isOpen?: boolean;
|
|
14
|
+
} & {
|
|
15
|
+
children?: import('react').ReactNode | undefined;
|
|
16
|
+
} & Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "onChange"> & import('react').RefAttributes<HTMLInputElement>>;
|
|
17
|
+
export declare const renderSelectMenuOptions: (options: any[], state: any, handleOnSelectItem: (value: string) => void) => React.ReactNode[];
|
|
4
18
|
export declare const AutocompleteItem: FC<AutocompleteItemProps>;
|
|
19
|
+
export declare const AutocompleteGroupItem: FC<{
|
|
20
|
+
children?: any;
|
|
21
|
+
label: string;
|
|
22
|
+
}>;
|
|
@@ -1,178 +1,227 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import {
|
|
4
|
-
import { cn as
|
|
5
|
-
import { translate as
|
|
6
|
-
import { InputText as
|
|
7
|
-
import { Popover as
|
|
8
|
-
import { SelectMenu as
|
|
9
|
-
import { AUTOCOMPLETE_ACTIONS as
|
|
10
|
-
import { useAutocompleteController as
|
|
2
|
+
import { jsxs as j, jsx as y } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef as B, useRef as V, useImperativeHandle as $, createElement as K, Children as X, isValidElement as q } from "react";
|
|
4
|
+
import { cn as _ } from "../cn.js";
|
|
5
|
+
import { translate as A } from "../i18n/utility.js";
|
|
6
|
+
import { InputText as z } from "../input-text/input-text.js";
|
|
7
|
+
import { Popover as F } from "../popover/popover.js";
|
|
8
|
+
import { SelectMenu as J, SelectMenuOption as x, SelectMenuGroupItem as Q } from "../select/select-menu.js";
|
|
9
|
+
import { AUTOCOMPLETE_ACTIONS as W } from "./types.js";
|
|
10
|
+
import { useAutocompleteController as Y } from "./use-autocomplete-controller.js";
|
|
11
11
|
const {
|
|
12
|
-
ON_RESET:
|
|
13
|
-
ON_SELECT_ITEM:
|
|
14
|
-
SET_INPUT_VALUE:
|
|
15
|
-
SET_IS_OPEN:
|
|
16
|
-
TOGGLE_CLEAR_BUTTON:
|
|
17
|
-
SET_HIGHLIGHTED_INDEX:
|
|
18
|
-
} =
|
|
19
|
-
if (n
|
|
20
|
-
const
|
|
12
|
+
ON_RESET: Z,
|
|
13
|
+
ON_SELECT_ITEM: ee,
|
|
14
|
+
SET_INPUT_VALUE: te,
|
|
15
|
+
SET_IS_OPEN: i,
|
|
16
|
+
TOGGLE_CLEAR_BUTTON: N,
|
|
17
|
+
SET_HIGHLIGHTED_INDEX: v
|
|
18
|
+
} = W, oe = (n) => n ? "keyboard_arrow_up" : "keyboard_arrow_down", T = (n, r) => (p) => {
|
|
19
|
+
if (n) {
|
|
20
|
+
const l = {
|
|
21
21
|
target: {
|
|
22
|
-
|
|
23
|
-
value:
|
|
22
|
+
name: r,
|
|
23
|
+
value: p
|
|
24
|
+
},
|
|
25
|
+
currentTarget: {
|
|
26
|
+
name: r,
|
|
27
|
+
value: p
|
|
24
28
|
},
|
|
25
|
-
currentTarget: a.current,
|
|
26
29
|
bubbles: !0,
|
|
27
30
|
isTrusted: !0
|
|
28
31
|
};
|
|
29
|
-
n == null || n(
|
|
32
|
+
n == null || n(l);
|
|
30
33
|
}
|
|
31
|
-
},
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}, N = () => {
|
|
47
|
-
o({ type: q }), o({ type: s, payload: !1 }), g(f)("", i);
|
|
48
|
-
}, k = (e) => {
|
|
49
|
-
o({ type: F, payload: e }), g(f)(e, i), e && o({ type: s, payload: !0 });
|
|
50
|
-
}, v = (e) => {
|
|
51
|
-
const {
|
|
52
|
-
target: { value: l }
|
|
53
|
-
} = e;
|
|
54
|
-
e.__origin === "clear_button" ? N() : k(l), o({ type: _ }), setTimeout(() => {
|
|
55
|
-
var p;
|
|
56
|
-
return (p = i.current) == null ? void 0 : p.focus();
|
|
57
|
-
});
|
|
58
|
-
}, D = () => {
|
|
59
|
-
var e;
|
|
60
|
-
o({ type: s, payload: !t.isOpen }), (e = i.current) == null || e.focus();
|
|
61
|
-
}, L = () => {
|
|
62
|
-
t.isOpen || o({
|
|
63
|
-
type: s,
|
|
64
|
-
payload: !0
|
|
34
|
+
}, ye = B(
|
|
35
|
+
(n, r) => {
|
|
36
|
+
var S;
|
|
37
|
+
const p = V(null), {
|
|
38
|
+
disabled: l,
|
|
39
|
+
children: c,
|
|
40
|
+
placeholder: d,
|
|
41
|
+
onSelectItem: g,
|
|
42
|
+
isLoading: u,
|
|
43
|
+
freeSolo: a = !1,
|
|
44
|
+
onChange: b,
|
|
45
|
+
name: O
|
|
46
|
+
} = n, { state: t, dispatch: o, inputRef: m, getOptionLabelByValue: w, listRef: k } = Y({
|
|
47
|
+
...n,
|
|
48
|
+
onChange: T(b, O)
|
|
65
49
|
});
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
type:
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
return -1;
|
|
81
|
-
};
|
|
82
|
-
if (e.key === "ArrowDown")
|
|
83
|
-
e.preventDefault(), o({
|
|
84
|
-
type: x,
|
|
85
|
-
payload: t.isOpen ? p(t.highlightedIndex, 1) : 0
|
|
50
|
+
$(r, () => m.current);
|
|
51
|
+
const G = (e) => {
|
|
52
|
+
o({ type: i, payload: e }), e || o({ type: N, payload: !1 });
|
|
53
|
+
}, P = () => {
|
|
54
|
+
o({ type: Z }), o({ type: i, payload: !1 }), T(b, O)("");
|
|
55
|
+
}, R = (e) => {
|
|
56
|
+
o({ type: te, payload: e }), a && T(b, O)(e), e && o({ type: i, payload: !0 });
|
|
57
|
+
}, D = (e) => {
|
|
58
|
+
const {
|
|
59
|
+
target: { value: f }
|
|
60
|
+
} = e;
|
|
61
|
+
e.__origin === "clear_button" ? P() : R(f), o({ type: N }), setTimeout(() => {
|
|
62
|
+
var h;
|
|
63
|
+
return (h = m.current) == null ? void 0 : h.focus();
|
|
86
64
|
});
|
|
87
|
-
|
|
88
|
-
e
|
|
89
|
-
|
|
90
|
-
|
|
65
|
+
}, L = () => {
|
|
66
|
+
var e;
|
|
67
|
+
o({ type: i, payload: !t.isOpen }), (e = m.current) == null || e.focus();
|
|
68
|
+
}, H = () => {
|
|
69
|
+
t.isOpen || o({
|
|
70
|
+
type: i,
|
|
71
|
+
payload: !0
|
|
91
72
|
});
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
),
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
73
|
+
}, E = (e) => {
|
|
74
|
+
o({
|
|
75
|
+
type: ee,
|
|
76
|
+
payload: {
|
|
77
|
+
inputValue: w(c, e),
|
|
78
|
+
value: e
|
|
79
|
+
}
|
|
80
|
+
}), g && g(e);
|
|
81
|
+
}, M = (e) => {
|
|
82
|
+
const f = t.autocompleteOptions.length, h = (s, U) => {
|
|
83
|
+
let I = s;
|
|
84
|
+
for (let C = 0; C < f; C++)
|
|
85
|
+
if (I = (I + U + f) % f, !t.autocompleteOptions[I].props.disabled)
|
|
86
|
+
return I;
|
|
87
|
+
return -1;
|
|
88
|
+
};
|
|
89
|
+
if (e.key === "ArrowDown")
|
|
90
|
+
e.preventDefault(), o({
|
|
91
|
+
type: v,
|
|
92
|
+
payload: t.isOpen ? h(t.highlightedIndex, 1) : 0
|
|
93
|
+
}), o({ type: i, payload: !0 });
|
|
94
|
+
else if (e.key === "ArrowUp")
|
|
95
|
+
e.preventDefault(), o({
|
|
96
|
+
type: v,
|
|
97
|
+
payload: h(t.highlightedIndex, -1)
|
|
98
|
+
}), o({ type: i, payload: !0 });
|
|
99
|
+
else if (e.key === "Enter" && t.highlightedIndex >= 0) {
|
|
100
|
+
const s = t.autocompleteOptions[t.highlightedIndex];
|
|
101
|
+
s && s.props.value && !s.props.disabled && E(s.props.value);
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
return /* @__PURE__ */ j(
|
|
105
|
+
"div",
|
|
106
|
+
{
|
|
107
|
+
"aria-disabled": l,
|
|
108
|
+
className: _("gi-autocomplete gi-not-prose", n.className),
|
|
109
|
+
children: [
|
|
110
|
+
/* @__PURE__ */ y(
|
|
111
|
+
z,
|
|
112
|
+
{
|
|
113
|
+
name: O,
|
|
114
|
+
onKeyDown: M,
|
|
115
|
+
onIconEndClick: L,
|
|
116
|
+
onChange: D,
|
|
117
|
+
onClick: H,
|
|
118
|
+
clearButtonEnabled: t.isClearButtonEnabled,
|
|
119
|
+
inputActionPosition: "beforeSuffix",
|
|
120
|
+
"aria-label": A("autocomplete.placeholder"),
|
|
121
|
+
"aria-disabled": l,
|
|
122
|
+
disabled: l,
|
|
123
|
+
placeholder: d || A("autocomplete.placeholder"),
|
|
124
|
+
iconEndClassName: _({
|
|
125
|
+
"gi-cursor-pointer": !l && !a,
|
|
126
|
+
"gi-cursor-not-allowed gi-pointer-events-none": l && !a
|
|
127
|
+
}),
|
|
128
|
+
iconEnd: a ? void 0 : oe(t.isOpen),
|
|
129
|
+
ref: m,
|
|
130
|
+
iconEndRef: p,
|
|
131
|
+
value: t.inputValue,
|
|
132
|
+
"data-highlighted-index": t.highlightedIndex
|
|
133
|
+
}
|
|
134
|
+
),
|
|
135
|
+
/* @__PURE__ */ y(
|
|
136
|
+
F,
|
|
137
|
+
{
|
|
138
|
+
onOpenChange: G,
|
|
139
|
+
triggerRef: m,
|
|
140
|
+
extraRefs: [p],
|
|
141
|
+
open: t.isOpen,
|
|
142
|
+
maxHeight: 304,
|
|
143
|
+
options: {
|
|
144
|
+
placement: "bottom-start",
|
|
145
|
+
strategy: "absolute",
|
|
146
|
+
modifiers: [
|
|
147
|
+
{ name: "offset", options: { offset: [0, 4] } },
|
|
155
148
|
{
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
selected: t.value === e.props.value,
|
|
159
|
-
isHighlighted: l === t.highlightedIndex
|
|
149
|
+
name: "flip",
|
|
150
|
+
options: { fallbackPlacements: ["top"] }
|
|
160
151
|
}
|
|
161
|
-
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
152
|
+
]
|
|
153
|
+
},
|
|
154
|
+
children: /* @__PURE__ */ y(
|
|
155
|
+
J,
|
|
156
|
+
{
|
|
157
|
+
onChange: E,
|
|
158
|
+
isLoading: u,
|
|
159
|
+
showNoData: !((S = t.autocompleteOptions) != null && S.length),
|
|
160
|
+
ref: k,
|
|
161
|
+
children: ne(
|
|
162
|
+
t.autocompleteOptions,
|
|
163
|
+
t,
|
|
164
|
+
E
|
|
165
|
+
)
|
|
166
|
+
}
|
|
167
|
+
)
|
|
168
|
+
}
|
|
169
|
+
)
|
|
170
|
+
]
|
|
171
|
+
}
|
|
172
|
+
);
|
|
173
|
+
}
|
|
174
|
+
), ne = (n, r, p) => n.map((l, c) => {
|
|
175
|
+
if (r.optionType === "AutocompleteItem")
|
|
176
|
+
return /* @__PURE__ */ K(
|
|
177
|
+
x,
|
|
178
|
+
{
|
|
179
|
+
...l.props,
|
|
180
|
+
key: `AutocompleteItem-${l.props.value}`,
|
|
181
|
+
selected: r.value === l.props.value,
|
|
182
|
+
isHighlighted: c === r.highlightedIndex,
|
|
183
|
+
index: c
|
|
184
|
+
}
|
|
185
|
+
);
|
|
186
|
+
if (r.optionType === "AutocompleteGroupItem") {
|
|
187
|
+
const d = l, g = X.toArray(d.props.children).filter((u) => q(u)).map((u) => {
|
|
188
|
+
const a = u.props;
|
|
189
|
+
return /* @__PURE__ */ y(
|
|
190
|
+
x,
|
|
191
|
+
{
|
|
192
|
+
...a,
|
|
193
|
+
selected: r.value.toString() === a.value.toString(),
|
|
194
|
+
onChange: p,
|
|
195
|
+
index: c
|
|
196
|
+
},
|
|
197
|
+
`SelectGroupItemNext-SelectItemNext-${a.value.toString()}`
|
|
198
|
+
);
|
|
199
|
+
});
|
|
200
|
+
return /* @__PURE__ */ y(
|
|
201
|
+
Q,
|
|
202
|
+
{
|
|
203
|
+
label: d.props.label,
|
|
204
|
+
children: g
|
|
205
|
+
},
|
|
206
|
+
`Group-${d.props.label}`
|
|
207
|
+
);
|
|
208
|
+
}
|
|
209
|
+
return null;
|
|
210
|
+
}), le = () => null;
|
|
211
|
+
Object.defineProperty(le, "componentType", {
|
|
171
212
|
value: "AutocompleteItem",
|
|
172
213
|
writable: !1,
|
|
173
214
|
enumerable: !1
|
|
174
215
|
});
|
|
216
|
+
const re = () => null;
|
|
217
|
+
Object.defineProperty(re, "componentType", {
|
|
218
|
+
value: "AutocompleteGroupItem",
|
|
219
|
+
writable: !1,
|
|
220
|
+
enumerable: !1
|
|
221
|
+
});
|
|
175
222
|
export {
|
|
176
|
-
|
|
177
|
-
|
|
223
|
+
ye as Autocomplete,
|
|
224
|
+
re as AutocompleteGroupItem,
|
|
225
|
+
le as AutocompleteItem,
|
|
226
|
+
ne as renderSelectMenuOptions
|
|
178
227
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ChangeEvent, ReactElement } from 'react';
|
|
1
|
+
import { ChangeEvent, PropsWithChildren, ReactElement } from 'react';
|
|
2
2
|
import { SelectMenuOptionProps } from '../select/types.js';
|
|
3
3
|
export declare const AUTOCOMPLETE_ACTIONS: {
|
|
4
4
|
readonly SET_IS_OPEN: "SET_IS_OPEN";
|
|
@@ -9,6 +9,7 @@ export declare const AUTOCOMPLETE_ACTIONS: {
|
|
|
9
9
|
readonly TOGGLE_CLEAR_BUTTON: "TOGGLE_CLEAR_BUTTON";
|
|
10
10
|
readonly ON_SELECT_ITEM: "ON_SELECT_ITEM";
|
|
11
11
|
readonly SET_HIGHLIGHTED_INDEX: "SET_HIGHLIGHTED_INDEX";
|
|
12
|
+
readonly SET_OPTION_TYPE: "SET_OPTION_TYPE";
|
|
12
13
|
};
|
|
13
14
|
export type AutocompleteState = {
|
|
14
15
|
isOpen: boolean;
|
|
@@ -17,6 +18,7 @@ export type AutocompleteState = {
|
|
|
17
18
|
isClearButtonEnabled: boolean;
|
|
18
19
|
autocompleteOptions: any[];
|
|
19
20
|
highlightedIndex: number;
|
|
21
|
+
optionType: string;
|
|
20
22
|
};
|
|
21
23
|
export type AutocompleteAction = {
|
|
22
24
|
type: typeof AUTOCOMPLETE_ACTIONS.SET_IS_OPEN;
|
|
@@ -32,6 +34,9 @@ export type AutocompleteAction = {
|
|
|
32
34
|
payload: string;
|
|
33
35
|
} | {
|
|
34
36
|
type: typeof AUTOCOMPLETE_ACTIONS.ON_RESET;
|
|
37
|
+
} | {
|
|
38
|
+
type: typeof AUTOCOMPLETE_ACTIONS.SET_OPTION_TYPE;
|
|
39
|
+
payload: string;
|
|
35
40
|
} | {
|
|
36
41
|
type: typeof AUTOCOMPLETE_ACTIONS.TOGGLE_CLEAR_BUTTON;
|
|
37
42
|
payload?: boolean;
|
|
@@ -48,8 +53,7 @@ export type AutocompleteAction = {
|
|
|
48
53
|
export type AutocompleteOptionItemElement = ReactElement<SelectMenuOptionProps & {
|
|
49
54
|
selectedValue: string;
|
|
50
55
|
}>;
|
|
51
|
-
export type AutocompleteProps = {
|
|
52
|
-
children: ReactElement<AutocompleteItemProps> | ReactElement<AutocompleteItemProps>[];
|
|
56
|
+
export type AutocompleteProps = PropsWithChildren<{
|
|
53
57
|
/** Unique identifier for the autocomplete component. */
|
|
54
58
|
id?: string;
|
|
55
59
|
/** Initial selected value when the component is first rendered. */
|
|
@@ -70,7 +74,7 @@ export type AutocompleteProps = {
|
|
|
70
74
|
onClose?: () => void;
|
|
71
75
|
/** Controls whether the dropdown is open (controlled mode). */
|
|
72
76
|
isOpen?: boolean;
|
|
73
|
-
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'defaultChecked'>;
|
|
77
|
+
}> & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'defaultChecked'>;
|
|
74
78
|
export type AutocompleteItemProps = {
|
|
75
79
|
children: string;
|
|
76
80
|
className?: string;
|
|
@@ -6,7 +6,8 @@ const E = {
|
|
|
6
6
|
ON_RESET: "ON_RESET",
|
|
7
7
|
TOGGLE_CLEAR_BUTTON: "TOGGLE_CLEAR_BUTTON",
|
|
8
8
|
ON_SELECT_ITEM: "ON_SELECT_ITEM",
|
|
9
|
-
SET_HIGHLIGHTED_INDEX: "SET_HIGHLIGHTED_INDEX"
|
|
9
|
+
SET_HIGHLIGHTED_INDEX: "SET_HIGHLIGHTED_INDEX",
|
|
10
|
+
SET_OPTION_TYPE: "SET_OPTION_TYPE"
|
|
10
11
|
};
|
|
11
12
|
export {
|
|
12
13
|
E as AUTOCOMPLETE_ACTIONS
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { AutocompleteAction, AutocompleteState, AutocompleteOptionItemElement, AutocompleteProps } from './types.js';
|
|
2
2
|
export declare const useAutocompleteController: ({ children, defaultValue, isOpen, freeSolo, onOpen, onClose, onChange, }: {
|
|
3
|
-
onChange?: (input: string,
|
|
3
|
+
onChange?: (input: string, name?: string) => void;
|
|
4
|
+
ref?: any;
|
|
4
5
|
} & Pick<AutocompleteProps, "children" | "defaultValue" | "isOpen" | "freeSolo" | "onOpen" | "onClose">) => {
|
|
5
6
|
state: AutocompleteState;
|
|
6
7
|
dispatch: import('react').ActionDispatch<[action: AutocompleteAction]>;
|
|
7
8
|
inputRef: import('react').RefObject<HTMLInputElement | null>;
|
|
9
|
+
listRef: import('react').RefObject<HTMLDivElement | null>;
|
|
8
10
|
validChildren: AutocompleteOptionItemElement[];
|
|
9
|
-
getOptionLabelByValue: (children:
|
|
11
|
+
getOptionLabelByValue: (children: any, value: string) => string;
|
|
10
12
|
};
|