@bazza-ui/react 0.0.0 → 0.1.0-canary.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/ListboxStore-BtcTXpzi.d.cts +351 -0
- package/dist/ListboxStore-DPqpLlAL.d.ts +351 -0
- package/dist/adapters/index.cjs +2 -0
- package/dist/adapters/index.cjs.map +1 -0
- package/dist/adapters/index.d.cts +363 -0
- package/dist/adapters/index.d.ts +363 -0
- package/dist/adapters/index.js +2 -0
- package/dist/adapters/index.js.map +1 -0
- package/dist/chunk-4C666HHU.js +2 -0
- package/dist/chunk-4C666HHU.js.map +1 -0
- package/dist/chunk-AVZ64JQ3.js +2 -0
- package/dist/chunk-AVZ64JQ3.js.map +1 -0
- package/dist/chunk-BGJJC6GX.cjs +2 -0
- package/dist/chunk-BGJJC6GX.cjs.map +1 -0
- package/dist/chunk-FWWOE2SW.cjs +2 -0
- package/dist/chunk-FWWOE2SW.cjs.map +1 -0
- package/dist/chunk-JSPKF52O.cjs +2 -0
- package/dist/chunk-JSPKF52O.cjs.map +1 -0
- package/dist/chunk-KWGD24VS.js +2 -0
- package/dist/chunk-KWGD24VS.js.map +1 -0
- package/dist/chunk-M4G6J7DP.cjs +2 -0
- package/dist/chunk-M4G6J7DP.cjs.map +1 -0
- package/dist/chunk-WKAPAKUL.js +2 -0
- package/dist/chunk-WKAPAKUL.js.map +1 -0
- package/dist/combobox/index.cjs +2 -0
- package/dist/combobox/index.cjs.map +1 -0
- package/dist/combobox/index.d.cts +1039 -0
- package/dist/combobox/index.d.ts +1039 -0
- package/dist/combobox/index.js +2 -0
- package/dist/combobox/index.js.map +1 -0
- package/dist/command-score-Dgo3ZS3Z.d.ts +36 -0
- package/dist/command-score-YjNr3ZWi.d.cts +36 -0
- package/dist/context-menu/index.cjs +2 -0
- package/dist/context-menu/index.cjs.map +1 -0
- package/dist/context-menu/index.d.cts +658 -0
- package/dist/context-menu/index.d.ts +658 -0
- package/dist/context-menu/index.js +2 -0
- package/dist/context-menu/index.js.map +1 -0
- package/dist/data-surface-B-eIGTBi.d.cts +678 -0
- package/dist/data-surface-D1OilMDu.d.ts +678 -0
- package/dist/dropdown-menu/index.cjs +2 -0
- package/dist/dropdown-menu/index.cjs.map +1 -0
- package/dist/dropdown-menu/index.d.cts +700 -0
- package/dist/dropdown-menu/index.d.ts +700 -0
- package/dist/dropdown-menu/index.js +2 -0
- package/dist/dropdown-menu/index.js.map +1 -0
- package/dist/events-BPr8sRGH.d.cts +166 -0
- package/dist/events-BPr8sRGH.d.ts +166 -0
- package/dist/input-BoIK003I.d.cts +41 -0
- package/dist/input-DF7D8YzW.d.ts +41 -0
- package/dist/internal/listbox/index.cjs +2 -0
- package/dist/internal/listbox/index.cjs.map +1 -0
- package/dist/internal/listbox/index.d.cts +269 -0
- package/dist/internal/listbox/index.d.ts +269 -0
- package/dist/internal/listbox/index.js +2 -0
- package/dist/internal/listbox/index.js.map +1 -0
- package/dist/internal/popup-menu/index.cjs +2 -0
- package/dist/internal/popup-menu/index.cjs.map +1 -0
- package/dist/internal/popup-menu/index.d.cts +846 -0
- package/dist/internal/popup-menu/index.d.ts +846 -0
- package/dist/internal/popup-menu/index.js +2 -0
- package/dist/internal/popup-menu/index.js.map +1 -0
- package/dist/item-equality-B6TbXlBT.d.cts +7 -0
- package/dist/item-equality-B6TbXlBT.d.ts +7 -0
- package/dist/loading-DphSt8MY.d.cts +27 -0
- package/dist/loading-TsgH6v92.d.ts +27 -0
- package/dist/select/index.cjs +2 -0
- package/dist/select/index.cjs.map +1 -0
- package/dist/select/index.d.cts +927 -0
- package/dist/select/index.d.ts +927 -0
- package/dist/select/index.js +2 -0
- package/dist/select/index.js.map +1 -0
- package/dist/separator-B4Ot84B0.d.ts +748 -0
- package/dist/separator-BmbUeeaT.d.cts +748 -0
- package/dist/types-9vS1uLIK.d.cts +1557 -0
- package/dist/types-lQCIvWW8.d.ts +1557 -0
- package/dist/use-listbox-item-BIi4eRPI.d.cts +182 -0
- package/dist/use-listbox-item-BIi4eRPI.d.ts +182 -0
- package/package.json +50 -12
- package/dist/index.d.ts +0 -2
- package/dist/index.js +0 -2
|
@@ -0,0 +1,1039 @@
|
|
|
1
|
+
import { V as VirtualItem } from '../ListboxStore-BtcTXpzi.cjs';
|
|
2
|
+
export { F as ComboboxFilterFn, I as ComboboxItemRegistration, b as ComboboxStore, L as ComboboxStoreContext, a as ComboboxStoreState } from '../ListboxStore-BtcTXpzi.cjs';
|
|
3
|
+
import { P as PopupMenuDebugOptions, a as PopupMenuRootActions, n as PopupMenuSurface, J as PopupMenuSurfaceProps, b as PopupMenuArrow, c as PopupMenuBackdrop, d as PopupMenuEmpty, e as PopupMenuGroup, f as PopupMenuGroupLabel, g as PopupMenuIcon, h as PopupMenuList, i as PopupMenuPopup, j as PopupMenuPortal, k as PopupMenuScrollDownArrow, l as PopupMenuScrollUpArrow, m as PopupMenuSeparator } from '../separator-BmbUeeaT.cjs';
|
|
4
|
+
export { o as ComboboxArrowProps, p as ComboboxBackdropProps, q as ComboboxEmptyProps, r as ComboboxEmptyState, s as ComboboxGroupLabelProps, t as ComboboxGroupLabelState, u as ComboboxGroupProps, v as ComboboxGroupState, w as ComboboxIconProps, x as ComboboxIconState, y as ComboboxListChildrenState, L as ComboboxListCssVars, z as ComboboxListProps, A as ComboboxListState, B as ComboboxPopupProps, C as ComboboxPortalProps, M as ComboboxPositionerCssVars, D as ComboboxScrollArrowProps, E as ComboboxScrollArrowState, F as ComboboxScrollDownArrowProps, G as ComboboxScrollUpArrowProps, H as ComboboxSeparatorProps, I as ComboboxSeparatorState, K as ComboboxSurfaceState } from '../separator-BmbUeeaT.cjs';
|
|
5
|
+
import * as React from 'react';
|
|
6
|
+
import { C as ComponentProps } from '../types-9vS1uLIK.cjs';
|
|
7
|
+
import { PopoverPositionerProps, Popover, PopoverRootProps } from '@base-ui/react/popover';
|
|
8
|
+
import { I as ItemEqualityComparer } from '../item-equality-B6TbXlBT.cjs';
|
|
9
|
+
import { C as ChangeEventDetails, t as triggerPress, e as escapeKey, o as outsidePress, f as focusOut, i as itemPress, h as inputChange, j as inputClear, l as listNavigation, g as imperativeAction, n as none, G as GenericEventDetails, p as pointer, k as keyboard } from '../events-BPr8sRGH.cjs';
|
|
10
|
+
export { S as SurfaceContextValue, c as commandScore, d as defaultFilter, u as useMaybeSurfaceContext, a as useSurfaceContext } from '../command-score-YjNr3ZWi.cjs';
|
|
11
|
+
import '@base-ui/utils/store';
|
|
12
|
+
|
|
13
|
+
interface ComboboxClearState extends Record<string, unknown> {
|
|
14
|
+
/**
|
|
15
|
+
* Whether the combobox has a value (clear button is actionable).
|
|
16
|
+
*/
|
|
17
|
+
hasValue: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Whether the combobox is disabled.
|
|
20
|
+
*/
|
|
21
|
+
disabled: boolean;
|
|
22
|
+
}
|
|
23
|
+
interface ComboboxClearProps extends ComponentProps<'button', ComboboxClear.State> {
|
|
24
|
+
/**
|
|
25
|
+
* Whether to render the button even when there's no value to clear.
|
|
26
|
+
* @default false
|
|
27
|
+
*/
|
|
28
|
+
keepMounted?: boolean;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* A button that clears the selected value(s) when clicked.
|
|
32
|
+
* Renders a `<button>` element.
|
|
33
|
+
*/
|
|
34
|
+
declare const ComboboxClear: React.ForwardRefExoticComponent<Omit<ComboboxClear.Props, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
35
|
+
declare namespace ComboboxClear {
|
|
36
|
+
type State = ComboboxClearState;
|
|
37
|
+
interface Props extends ComboboxClearProps {
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
type Side = 'top' | 'bottom' | 'left' | 'right';
|
|
42
|
+
type Align = 'start' | 'center' | 'end';
|
|
43
|
+
/**
|
|
44
|
+
* Layout mode for the combobox popup.
|
|
45
|
+
* - `'floating'` - Standard dropdown positioning below/above the input
|
|
46
|
+
* - `'input-embedded'` - Popup wraps around the input (macOS-style)
|
|
47
|
+
*/
|
|
48
|
+
type ComboboxLayout = 'floating' | 'input-embedded';
|
|
49
|
+
/**
|
|
50
|
+
* Context value for Combobox Positioner.
|
|
51
|
+
* Provides alignment state for coordinating positioning behavior.
|
|
52
|
+
*/
|
|
53
|
+
interface ComboboxPositionerContextValue {
|
|
54
|
+
/**
|
|
55
|
+
* The layout mode being used.
|
|
56
|
+
* - `'floating'` - Standard dropdown positioning
|
|
57
|
+
* - `'input-embedded'` - Popup wraps around the input
|
|
58
|
+
*/
|
|
59
|
+
layout: ComboboxLayout;
|
|
60
|
+
/**
|
|
61
|
+
* The side of the popup relative to the input.
|
|
62
|
+
*/
|
|
63
|
+
side: Side;
|
|
64
|
+
/**
|
|
65
|
+
* The alignment of the popup.
|
|
66
|
+
*/
|
|
67
|
+
align: Align;
|
|
68
|
+
/**
|
|
69
|
+
* Height of the input element in pixels.
|
|
70
|
+
* Use this to add appropriate padding to the popup.
|
|
71
|
+
*/
|
|
72
|
+
inputHeight: number;
|
|
73
|
+
}
|
|
74
|
+
/**
|
|
75
|
+
* Hook to access the Combobox Positioner context.
|
|
76
|
+
* Returns null if used outside a ComboboxPositioner.
|
|
77
|
+
*/
|
|
78
|
+
declare function useComboboxPositionerContext(): ComboboxPositionerContextValue | null;
|
|
79
|
+
|
|
80
|
+
/**
|
|
81
|
+
* Data attributes for ComboboxInput component.
|
|
82
|
+
*/
|
|
83
|
+
declare const ComboboxInputDataAttributes: {
|
|
84
|
+
/**
|
|
85
|
+
* Identifies the component part.
|
|
86
|
+
* @type {'bazzaui-combobox-input'}
|
|
87
|
+
*/
|
|
88
|
+
readonly slot: "bazzaui-combobox-input";
|
|
89
|
+
/** Present when the combobox popup is open. */
|
|
90
|
+
readonly open: "data-open";
|
|
91
|
+
/** Present when the combobox popup is closed. */
|
|
92
|
+
readonly closed: "data-closed";
|
|
93
|
+
/** Present when the input is disabled. */
|
|
94
|
+
readonly disabled: "data-disabled";
|
|
95
|
+
/** Present when no value is selected (showing placeholder). */
|
|
96
|
+
readonly placeholder: "data-placeholder";
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
interface ComboboxInputState extends Record<string, unknown> {
|
|
100
|
+
/**
|
|
101
|
+
* Whether the combobox popup is open.
|
|
102
|
+
*/
|
|
103
|
+
open: boolean;
|
|
104
|
+
/**
|
|
105
|
+
* Whether the input is disabled.
|
|
106
|
+
*/
|
|
107
|
+
disabled: boolean;
|
|
108
|
+
/**
|
|
109
|
+
* Whether the input currently shows placeholder (no value selected).
|
|
110
|
+
*/
|
|
111
|
+
placeholder: boolean;
|
|
112
|
+
}
|
|
113
|
+
/**
|
|
114
|
+
* Cursor behavior when the combobox popup opens.
|
|
115
|
+
* - `'none'` - Don't move the cursor (cursor appears where clicked)
|
|
116
|
+
* - `'end'` - Move cursor to the end of the input
|
|
117
|
+
* - `'select-all'` - Move cursor to the end and select all text
|
|
118
|
+
*/
|
|
119
|
+
type ComboboxInputCursorBehavior = 'none' | 'end' | 'select-all';
|
|
120
|
+
interface ComboboxInputProps extends Omit<ComponentProps<'input', ComboboxInput.State>, 'value' | 'onChange' | 'type'> {
|
|
121
|
+
/**
|
|
122
|
+
* Placeholder text shown when no value is selected and input is empty.
|
|
123
|
+
* Overrides the placeholder set on Combobox.Root.
|
|
124
|
+
*/
|
|
125
|
+
placeholder?: string;
|
|
126
|
+
/**
|
|
127
|
+
* Cursor behavior when the combobox popup opens.
|
|
128
|
+
* - `'none'` - Don't move the cursor (cursor appears where clicked)
|
|
129
|
+
* - `'end'` - Move cursor to the end of the input
|
|
130
|
+
* - `'select-all'` - Move cursor to the end and select all text
|
|
131
|
+
*
|
|
132
|
+
* @default 'none'
|
|
133
|
+
*/
|
|
134
|
+
cursorBehavior?: ComboboxInputCursorBehavior;
|
|
135
|
+
}
|
|
136
|
+
/**
|
|
137
|
+
* An input that acts as both the trigger and search field for the combobox.
|
|
138
|
+
* Renders an `<input>` element with combobox ARIA semantics.
|
|
139
|
+
*/
|
|
140
|
+
declare const ComboboxInput: React.ForwardRefExoticComponent<Omit<ComboboxInput.Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
141
|
+
declare namespace ComboboxInput {
|
|
142
|
+
interface Props extends ComboboxInputProps {
|
|
143
|
+
}
|
|
144
|
+
type State = ComboboxInputState;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/**
|
|
148
|
+
* Data attributes for ComboboxInputWrapper component.
|
|
149
|
+
*/
|
|
150
|
+
declare const ComboboxInputWrapperDataAttributes: {
|
|
151
|
+
/**
|
|
152
|
+
* Identifies the component part.
|
|
153
|
+
* @type {'bazzaui-combobox-input-wrapper'}
|
|
154
|
+
*/
|
|
155
|
+
readonly slot: "bazzaui-combobox-input-wrapper";
|
|
156
|
+
/** Present when the combobox popup is open. */
|
|
157
|
+
readonly open: "data-open";
|
|
158
|
+
};
|
|
159
|
+
|
|
160
|
+
interface ComboboxInputWrapperState extends Record<string, unknown> {
|
|
161
|
+
/**
|
|
162
|
+
* Whether the combobox popup is open.
|
|
163
|
+
*/
|
|
164
|
+
open: boolean;
|
|
165
|
+
}
|
|
166
|
+
interface ComboboxInputWrapperProps extends ComponentProps<'div', ComboboxInputWrapper.State> {
|
|
167
|
+
}
|
|
168
|
+
/**
|
|
169
|
+
* A wrapper component for the Combobox.Input and Combobox.Icon.
|
|
170
|
+
* Provides relative positioning context and manages z-index for input-embedded layouts.
|
|
171
|
+
* Use this to position icons or other elements inside/over the input.
|
|
172
|
+
*
|
|
173
|
+
* Renders a `<div>` element with `position: relative`.
|
|
174
|
+
*/
|
|
175
|
+
declare const ComboboxInputWrapper: React.ForwardRefExoticComponent<Omit<ComboboxInputWrapper.Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
176
|
+
declare namespace ComboboxInputWrapper {
|
|
177
|
+
type State = ComboboxInputWrapperState;
|
|
178
|
+
interface Props extends ComboboxInputWrapperProps {
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
/**
|
|
183
|
+
* Data attributes applied to Combobox.Item for styling.
|
|
184
|
+
*
|
|
185
|
+
* @example
|
|
186
|
+
* ```css
|
|
187
|
+
* [data-bazzaui-combobox-item][data-highlighted] {
|
|
188
|
+
* background: var(--highlight-bg);
|
|
189
|
+
* }
|
|
190
|
+
* [data-bazzaui-combobox-item][data-selected] {
|
|
191
|
+
* font-weight: bold;
|
|
192
|
+
* }
|
|
193
|
+
* [data-bazzaui-combobox-item][data-disabled] {
|
|
194
|
+
* opacity: 0.5;
|
|
195
|
+
* pointer-events: none;
|
|
196
|
+
* }
|
|
197
|
+
* ```
|
|
198
|
+
*/
|
|
199
|
+
declare const ComboboxItemDataAttributes: {
|
|
200
|
+
/**
|
|
201
|
+
* Identifies the component part.
|
|
202
|
+
* @type {'bazzaui-combobox-item'}
|
|
203
|
+
*/
|
|
204
|
+
readonly slot: "bazzaui-combobox-item";
|
|
205
|
+
/** Present when the item is highlighted (via keyboard or pointer). */
|
|
206
|
+
readonly highlighted: "data-highlighted";
|
|
207
|
+
/** Present when the item is disabled. */
|
|
208
|
+
readonly disabled: "data-disabled";
|
|
209
|
+
/** Present when the item is currently selected. */
|
|
210
|
+
readonly selected: "data-selected";
|
|
211
|
+
};
|
|
212
|
+
|
|
213
|
+
interface ComboboxItemState extends Record<string, unknown> {
|
|
214
|
+
/**
|
|
215
|
+
* Whether the item is highlighted (via keyboard or pointer).
|
|
216
|
+
*/
|
|
217
|
+
highlighted: boolean;
|
|
218
|
+
/**
|
|
219
|
+
* Whether the item is disabled.
|
|
220
|
+
*/
|
|
221
|
+
disabled: boolean;
|
|
222
|
+
/**
|
|
223
|
+
* Whether the item is currently selected.
|
|
224
|
+
*/
|
|
225
|
+
selected: boolean;
|
|
226
|
+
}
|
|
227
|
+
interface ComboboxItemProps<Value = unknown> extends ComponentProps<'div', ComboboxItem.State> {
|
|
228
|
+
/**
|
|
229
|
+
* The value of this item. Required and must be unique within the Combobox.
|
|
230
|
+
* Can be a primitive or an object.
|
|
231
|
+
*/
|
|
232
|
+
value: Value;
|
|
233
|
+
/**
|
|
234
|
+
* Text value to use for display in the input when this item is selected.
|
|
235
|
+
* If not provided, the text content of the item will be used.
|
|
236
|
+
* For object values, this can be auto-detected from `{ label }` shape.
|
|
237
|
+
*/
|
|
238
|
+
textValue?: string;
|
|
239
|
+
/**
|
|
240
|
+
* Additional keywords to match against when filtering.
|
|
241
|
+
* Useful for aliases or synonyms.
|
|
242
|
+
*/
|
|
243
|
+
keywords?: string[];
|
|
244
|
+
/**
|
|
245
|
+
* Whether this item is disabled.
|
|
246
|
+
* Disabled items are not selectable and are skipped during keyboard navigation.
|
|
247
|
+
*/
|
|
248
|
+
disabled?: boolean;
|
|
249
|
+
/**
|
|
250
|
+
* Callback when this item is selected.
|
|
251
|
+
*/
|
|
252
|
+
onSelect?: () => void;
|
|
253
|
+
/**
|
|
254
|
+
* Whether to force render this item regardless of filter results.
|
|
255
|
+
* @default false
|
|
256
|
+
*/
|
|
257
|
+
forceMount?: boolean;
|
|
258
|
+
}
|
|
259
|
+
declare const ComboboxItem: <Value = unknown>(props: ComboboxItemProps<Value> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
|
|
260
|
+
declare namespace ComboboxItem {
|
|
261
|
+
type State = ComboboxItemState;
|
|
262
|
+
interface Props<Value = unknown> extends ComboboxItemProps<Value> {
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
/**
|
|
267
|
+
* Data attributes for ComboboxItemIndicator component.
|
|
268
|
+
*/
|
|
269
|
+
declare const ComboboxItemIndicatorDataAttributes: {
|
|
270
|
+
/**
|
|
271
|
+
* Identifies the component part.
|
|
272
|
+
* @type {'bazzaui-combobox-item-indicator'}
|
|
273
|
+
*/
|
|
274
|
+
readonly slot: "bazzaui-combobox-item-indicator";
|
|
275
|
+
/** Present when the item is selected. */
|
|
276
|
+
readonly selected: "data-selected";
|
|
277
|
+
};
|
|
278
|
+
|
|
279
|
+
interface ComboboxItemIndicatorState extends Record<string, unknown> {
|
|
280
|
+
/**
|
|
281
|
+
* Whether the parent item is selected.
|
|
282
|
+
*/
|
|
283
|
+
selected: boolean;
|
|
284
|
+
}
|
|
285
|
+
interface ComboboxItemIndicatorProps extends ComponentProps<'span', ComboboxItemIndicator.State> {
|
|
286
|
+
/**
|
|
287
|
+
* Whether to always render the indicator regardless of selection state.
|
|
288
|
+
* When false (default), only renders when the item is selected.
|
|
289
|
+
* @default false
|
|
290
|
+
*/
|
|
291
|
+
keepMounted?: boolean;
|
|
292
|
+
}
|
|
293
|
+
/**
|
|
294
|
+
* Visual indicator for the selected state of a combobox item.
|
|
295
|
+
* Only renders when the parent item is selected (unless keepMounted is true).
|
|
296
|
+
* Renders a `<span>` element.
|
|
297
|
+
*/
|
|
298
|
+
declare const ComboboxItemIndicator: React.ForwardRefExoticComponent<Omit<ComboboxItemIndicator.Props, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
299
|
+
declare namespace ComboboxItemIndicator {
|
|
300
|
+
type State = ComboboxItemIndicatorState;
|
|
301
|
+
interface Props extends ComboboxItemIndicatorProps {
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
interface ComboboxItemLabelState extends Record<string, unknown> {
|
|
306
|
+
/**
|
|
307
|
+
* The serialized string key for the parent item's value.
|
|
308
|
+
* For object values, this is the result of `itemToStringValue` or the auto-detected `.value` property.
|
|
309
|
+
*/
|
|
310
|
+
value: string;
|
|
311
|
+
/**
|
|
312
|
+
* Whether the parent item is selected.
|
|
313
|
+
*/
|
|
314
|
+
selected: boolean;
|
|
315
|
+
/**
|
|
316
|
+
* Whether the parent item is highlighted.
|
|
317
|
+
*/
|
|
318
|
+
highlighted: boolean;
|
|
319
|
+
/**
|
|
320
|
+
* Whether the parent item is disabled.
|
|
321
|
+
*/
|
|
322
|
+
disabled: boolean;
|
|
323
|
+
}
|
|
324
|
+
interface ComboboxItemLabelProps extends ComponentProps<'span', ComboboxItemLabel.State> {
|
|
325
|
+
}
|
|
326
|
+
/**
|
|
327
|
+
* Renders the text label for a combobox item.
|
|
328
|
+
*
|
|
329
|
+
* When no children are provided, automatically renders the label from:
|
|
330
|
+
* 1. The `items` prop passed to `Combobox.Root`
|
|
331
|
+
* 2. The `textValue` prop on `Combobox.Item`
|
|
332
|
+
* 3. Falls back to the item's value
|
|
333
|
+
*
|
|
334
|
+
* Also registers the text content for use in the input display.
|
|
335
|
+
* Renders a `<span>` element.
|
|
336
|
+
*/
|
|
337
|
+
declare const ComboboxItemLabel: React.ForwardRefExoticComponent<Omit<ComboboxItemLabel.Props, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
338
|
+
declare namespace ComboboxItemLabel {
|
|
339
|
+
interface Props extends ComboboxItemLabelProps {
|
|
340
|
+
}
|
|
341
|
+
type State = ComboboxItemLabelState;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
/**
|
|
345
|
+
* Data attributes for ComboboxPositioner component.
|
|
346
|
+
*/
|
|
347
|
+
declare const ComboboxPositionerDataAttributes: {
|
|
348
|
+
/**
|
|
349
|
+
* Identifies the component part.
|
|
350
|
+
* @type {'bazzaui-combobox-positioner'}
|
|
351
|
+
*/
|
|
352
|
+
readonly slot: "bazzaui-combobox-positioner";
|
|
353
|
+
};
|
|
354
|
+
|
|
355
|
+
interface ComboboxPositionerProps extends PopoverPositionerProps {
|
|
356
|
+
/**
|
|
357
|
+
* Override the layout mode for the popup.
|
|
358
|
+
* If not provided, uses the `layout` from `Combobox.Root`.
|
|
359
|
+
*
|
|
360
|
+
* - `'floating'` - Standard dropdown positioning below/above the input
|
|
361
|
+
* - `'input-embedded'` - Popup wraps around the input (macOS Spotlight-style).
|
|
362
|
+
* The input appears to be inside the popup at the top.
|
|
363
|
+
*
|
|
364
|
+
* When `'input-embedded'`:
|
|
365
|
+
* - Popup is positioned flush with the input (sideOffset=0)
|
|
366
|
+
* - Alignment is centered on the input
|
|
367
|
+
* - Positioning styles are automatically applied to the Popup child
|
|
368
|
+
* - Use `popupPadding` to control the padding around the input
|
|
369
|
+
* - `data-input-embedded` attribute is added to Input, Positioner, Popup, and List
|
|
370
|
+
*/
|
|
371
|
+
layout?: ComboboxLayout;
|
|
372
|
+
/**
|
|
373
|
+
* Padding around the popup content when `layout="input-embedded"`.
|
|
374
|
+
* Creates the "encapsulated" look where the input appears inside the popup
|
|
375
|
+
* with padding on all sides.
|
|
376
|
+
*
|
|
377
|
+
* Only applies when `layout="input-embedded"`.
|
|
378
|
+
*
|
|
379
|
+
* @default 8
|
|
380
|
+
*/
|
|
381
|
+
popupPadding?: number;
|
|
382
|
+
}
|
|
383
|
+
/**
|
|
384
|
+
* Positions the combobox popup against the input.
|
|
385
|
+
* Uses the input element as the anchor for positioning.
|
|
386
|
+
*
|
|
387
|
+
* Supports `alignInputWithPopup` mode where the popup visually wraps around
|
|
388
|
+
* the input, making the input appear to be inside the popup (macOS-style).
|
|
389
|
+
*
|
|
390
|
+
* Renders a `<div>` element.
|
|
391
|
+
*/
|
|
392
|
+
declare const ComboboxPositioner: React.ForwardRefExoticComponent<ComboboxPositionerProps & React.RefAttributes<HTMLDivElement>>;
|
|
393
|
+
declare namespace ComboboxPositioner {
|
|
394
|
+
type Props = ComboboxPositionerProps;
|
|
395
|
+
type State = Popover.Positioner.State;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
/**
|
|
399
|
+
* Reasons why the combobox's open state changed.
|
|
400
|
+
*/
|
|
401
|
+
type ComboboxOpenChangeReason = typeof triggerPress | typeof escapeKey | typeof outsidePress | typeof focusOut | typeof itemPress | typeof inputChange | typeof inputClear | typeof listNavigation | typeof imperativeAction | typeof none;
|
|
402
|
+
/**
|
|
403
|
+
* Event details passed to the `onOpenChange` callback.
|
|
404
|
+
*/
|
|
405
|
+
type ComboboxOpenChangeEventDetails = ChangeEventDetails<ComboboxOpenChangeReason>;
|
|
406
|
+
/**
|
|
407
|
+
* Reasons why highlight changed.
|
|
408
|
+
*/
|
|
409
|
+
type ComboboxHighlightChangeReason = typeof pointer | typeof keyboard | typeof none;
|
|
410
|
+
/**
|
|
411
|
+
* Event details passed to the `onHighlightChange` callback.
|
|
412
|
+
*/
|
|
413
|
+
type ComboboxHighlightChangeEventDetails = GenericEventDetails<ComboboxHighlightChangeReason, {
|
|
414
|
+
index: number;
|
|
415
|
+
}>;
|
|
416
|
+
|
|
417
|
+
/**
|
|
418
|
+
* Helper type to determine the value type based on the multiple flag.
|
|
419
|
+
*/
|
|
420
|
+
type ComboboxValueType<Value, Multiple extends boolean | undefined> = Multiple extends true ? Value[] : Value | null;
|
|
421
|
+
interface ComboboxRootProps<Value = unknown, Multiple extends boolean | undefined = false> extends Omit<PopoverRootProps, 'open' | 'onOpenChange' | 'defaultOpen' | 'actionsRef'> {
|
|
422
|
+
/**
|
|
423
|
+
* Whether the combobox is open.
|
|
424
|
+
* Use for controlled mode.
|
|
425
|
+
*/
|
|
426
|
+
open?: boolean;
|
|
427
|
+
/**
|
|
428
|
+
* Callback when the open state changes.
|
|
429
|
+
* The second parameter contains event details including the reason for the change.
|
|
430
|
+
*/
|
|
431
|
+
onOpenChange?: (open: boolean, eventDetails: ComboboxOpenChangeEventDetails) => void;
|
|
432
|
+
/**
|
|
433
|
+
* Whether the combobox is initially open.
|
|
434
|
+
* Use for uncontrolled mode.
|
|
435
|
+
* @default false
|
|
436
|
+
*/
|
|
437
|
+
defaultOpen?: boolean;
|
|
438
|
+
/**
|
|
439
|
+
* A ref to imperative actions.
|
|
440
|
+
* - `close`: closes the menu imperatively.
|
|
441
|
+
* - `unmount`: unmounts the popup imperatively (when keep-mounted mode is enabled).
|
|
442
|
+
* - `setDisabled`: enables/disables the menu imperatively.
|
|
443
|
+
*/
|
|
444
|
+
actionsRef?: React.RefObject<ComboboxRoot.Actions | null>;
|
|
445
|
+
/**
|
|
446
|
+
* Current selected value (single-select mode).
|
|
447
|
+
* Use for controlled mode.
|
|
448
|
+
* Can be a primitive or an object.
|
|
449
|
+
*/
|
|
450
|
+
value?: ComboboxValueType<Value, Multiple>;
|
|
451
|
+
/**
|
|
452
|
+
* Default selected value (single-select mode).
|
|
453
|
+
* Use for uncontrolled mode.
|
|
454
|
+
*/
|
|
455
|
+
defaultValue?: ComboboxValueType<Value, Multiple>;
|
|
456
|
+
/**
|
|
457
|
+
* Callback when the selected value changes (single-select mode).
|
|
458
|
+
*/
|
|
459
|
+
onValueChange?: (value: Value) => void;
|
|
460
|
+
/**
|
|
461
|
+
* Whether multi-select mode is enabled.
|
|
462
|
+
* @default false
|
|
463
|
+
*/
|
|
464
|
+
multiple?: Multiple;
|
|
465
|
+
/**
|
|
466
|
+
* Current selected values (multi-select mode).
|
|
467
|
+
* Use for controlled mode.
|
|
468
|
+
*/
|
|
469
|
+
values?: Value[];
|
|
470
|
+
/**
|
|
471
|
+
* Default selected values (multi-select mode).
|
|
472
|
+
* Use for uncontrolled mode.
|
|
473
|
+
*/
|
|
474
|
+
defaultValues?: Value[];
|
|
475
|
+
/**
|
|
476
|
+
* Callback when the selected values change (multi-select mode).
|
|
477
|
+
*/
|
|
478
|
+
onValuesChange?: (values: Value[]) => void;
|
|
479
|
+
/**
|
|
480
|
+
* Custom comparison logic used to determine if a combobox item value
|
|
481
|
+
* matches the current selected value.
|
|
482
|
+
* Useful when item values are objects without matching referentially.
|
|
483
|
+
* Defaults to Object.is comparison.
|
|
484
|
+
*/
|
|
485
|
+
isItemEqualToValue?: ItemEqualityComparer<Value>;
|
|
486
|
+
/**
|
|
487
|
+
* When the item values are objects (`<Combobox.Item value={object}>`),
|
|
488
|
+
* this function converts the object value to a string representation
|
|
489
|
+
* for display in the input.
|
|
490
|
+
* If the shape of the object is `{ value, label }`, the label will be
|
|
491
|
+
* used automatically without needing to specify this prop.
|
|
492
|
+
*/
|
|
493
|
+
itemToStringLabel?: (itemValue: Value) => string;
|
|
494
|
+
/**
|
|
495
|
+
* When the item values are objects (`<Combobox.Item value={object}>`),
|
|
496
|
+
* this function converts the object value to a string representation
|
|
497
|
+
* for form submission.
|
|
498
|
+
* If the shape of the object is `{ value, label }`, the value will be
|
|
499
|
+
* used automatically without needing to specify this prop.
|
|
500
|
+
*/
|
|
501
|
+
itemToStringValue?: (itemValue: Value) => string;
|
|
502
|
+
/**
|
|
503
|
+
* Current input value.
|
|
504
|
+
* Use for controlled mode.
|
|
505
|
+
*/
|
|
506
|
+
inputValue?: string;
|
|
507
|
+
/**
|
|
508
|
+
* Default input value.
|
|
509
|
+
* Use for uncontrolled mode.
|
|
510
|
+
*/
|
|
511
|
+
defaultInputValue?: string;
|
|
512
|
+
/**
|
|
513
|
+
* Callback when the input value changes.
|
|
514
|
+
*/
|
|
515
|
+
onInputValueChange?: (value: string) => void;
|
|
516
|
+
/**
|
|
517
|
+
* Form field name for submission.
|
|
518
|
+
* When set, hidden input(s) will be rendered for form submission.
|
|
519
|
+
*/
|
|
520
|
+
name?: string;
|
|
521
|
+
/**
|
|
522
|
+
* Associate with a form by ID.
|
|
523
|
+
*/
|
|
524
|
+
form?: string;
|
|
525
|
+
/**
|
|
526
|
+
* Whether this field is required.
|
|
527
|
+
*/
|
|
528
|
+
required?: boolean;
|
|
529
|
+
/**
|
|
530
|
+
* Whether the combobox is disabled.
|
|
531
|
+
* @default false
|
|
532
|
+
*/
|
|
533
|
+
disabled?: boolean;
|
|
534
|
+
/**
|
|
535
|
+
* Placeholder text for the input.
|
|
536
|
+
* @default "Search..."
|
|
537
|
+
*/
|
|
538
|
+
placeholder?: string;
|
|
539
|
+
/**
|
|
540
|
+
* Data structure of the items rendered in the combobox popup.
|
|
541
|
+
* When specified, the input shows the label of the selected item
|
|
542
|
+
* instead of the raw value.
|
|
543
|
+
*
|
|
544
|
+
* Can be a record mapping values to labels, or an array of { value, label } objects.
|
|
545
|
+
* @example
|
|
546
|
+
* ```tsx
|
|
547
|
+
* // Record format
|
|
548
|
+
* <Combobox.Root items={{ us: 'United States', uk: 'United Kingdom' }}>
|
|
549
|
+
*
|
|
550
|
+
* // Array format
|
|
551
|
+
* <Combobox.Root items={[
|
|
552
|
+
* { value: 'us', label: 'United States' },
|
|
553
|
+
* { value: 'uk', label: 'United Kingdom' },
|
|
554
|
+
* ]}>
|
|
555
|
+
* ```
|
|
556
|
+
*/
|
|
557
|
+
items?: Record<string, React.ReactNode> | Array<{
|
|
558
|
+
value: string;
|
|
559
|
+
label: React.ReactNode;
|
|
560
|
+
}>;
|
|
561
|
+
/**
|
|
562
|
+
* Determines if the combobox enters a modal state when open.
|
|
563
|
+
*
|
|
564
|
+
* - `true`: user interaction is limited to the combobox: document page scroll
|
|
565
|
+
* is locked, and pointer interactions on outside elements are disabled.
|
|
566
|
+
* - `false`: user interaction with the rest of the document is allowed.
|
|
567
|
+
* - `'trap-focus'`: focus is trapped inside the combobox, but document page
|
|
568
|
+
* scroll is not locked and pointer interactions outside of it remain enabled.
|
|
569
|
+
*
|
|
570
|
+
* @default false
|
|
571
|
+
*/
|
|
572
|
+
modal?: boolean | 'trap-focus';
|
|
573
|
+
/**
|
|
574
|
+
* Whether to close the popup after selecting an item.
|
|
575
|
+
* @default true for single-select, false for multi-select
|
|
576
|
+
*/
|
|
577
|
+
closeOnSelect?: boolean;
|
|
578
|
+
/**
|
|
579
|
+
* Whether to open the popup when the input is focused.
|
|
580
|
+
* @default true
|
|
581
|
+
*/
|
|
582
|
+
openOnFocus?: boolean;
|
|
583
|
+
/**
|
|
584
|
+
* Whether virtualization mode is enabled.
|
|
585
|
+
* When true, items should provide an explicit `index` prop and
|
|
586
|
+
* the `virtualItems` prop should be provided for navigation to work correctly.
|
|
587
|
+
* @default false
|
|
588
|
+
*/
|
|
589
|
+
virtualized?: boolean;
|
|
590
|
+
/**
|
|
591
|
+
* Pre-registered items for virtualization.
|
|
592
|
+
* When provided with `virtualized={true}`, this allows navigation to work
|
|
593
|
+
* for items that aren't currently mounted in the DOM.
|
|
594
|
+
*/
|
|
595
|
+
virtualItems?: VirtualItem[];
|
|
596
|
+
/**
|
|
597
|
+
* Callback when the highlighted item changes.
|
|
598
|
+
* Useful for synchronizing with a virtualizer (e.g., scrollToIndex) or other UI state.
|
|
599
|
+
* The third parameter contains event details including the reason for the change.
|
|
600
|
+
*/
|
|
601
|
+
onHighlightChange?: (id: string | null, index: number, eventDetails: ComboboxHighlightChangeEventDetails) => void;
|
|
602
|
+
/**
|
|
603
|
+
* The layout mode for the combobox popup.
|
|
604
|
+
*
|
|
605
|
+
* - `'floating'` (default) - Standard dropdown positioning below/above the input
|
|
606
|
+
* - `'input-embedded'` - Popup wraps around the input (macOS Spotlight-style).
|
|
607
|
+
* The input appears to be inside the popup at the top.
|
|
608
|
+
*
|
|
609
|
+
* When `'input-embedded'`:
|
|
610
|
+
* - `data-input-embedded` attribute is added to Input, Positioner, Popup, and List
|
|
611
|
+
* - Use CSS selectors like `[data-input-embedded]` to style components
|
|
612
|
+
*
|
|
613
|
+
* @default 'floating'
|
|
614
|
+
*/
|
|
615
|
+
layout?: ComboboxLayout;
|
|
616
|
+
/**
|
|
617
|
+
* Event handler called after any open/close animations have completed.
|
|
618
|
+
* When `clearSearchOnClose="after-exit"` is set on Surface, the search
|
|
619
|
+
* will be cleared before this callback is invoked.
|
|
620
|
+
*/
|
|
621
|
+
onOpenChangeComplete?: (open: boolean) => void;
|
|
622
|
+
/**
|
|
623
|
+
* Debug visualization options for submenu interaction heuristics.
|
|
624
|
+
*/
|
|
625
|
+
debug?: PopupMenuDebugOptions;
|
|
626
|
+
children: React.ReactNode;
|
|
627
|
+
}
|
|
628
|
+
/**
|
|
629
|
+
* Groups all parts of the combobox.
|
|
630
|
+
* Manages open state, selection state, input state, and provides context to children.
|
|
631
|
+
* Doesn't render its own HTML element.
|
|
632
|
+
*
|
|
633
|
+
* @template Value - The type of the combobox value (can be a primitive or object)
|
|
634
|
+
* @template Multiple - Whether multiple selection is enabled
|
|
635
|
+
*/
|
|
636
|
+
declare function ComboboxRoot<Value = unknown, Multiple extends boolean | undefined = false>(props: ComboboxRootProps<Value, Multiple>): React.JSX.Element;
|
|
637
|
+
declare namespace ComboboxRoot {
|
|
638
|
+
interface Props<Value = unknown, Multiple extends boolean | undefined = false> extends ComboboxRootProps<Value, Multiple> {
|
|
639
|
+
}
|
|
640
|
+
type OpenChangeEventDetails = ComboboxOpenChangeEventDetails;
|
|
641
|
+
type HighlightChangeEventDetails = ComboboxHighlightChangeEventDetails;
|
|
642
|
+
type Actions = PopupMenuRootActions;
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
interface ComboboxSurfaceProps extends Omit<PopupMenuSurfaceProps, 'autoHighlightFirst'> {
|
|
646
|
+
/**
|
|
647
|
+
* Controls auto-highlighting behavior when the combobox opens.
|
|
648
|
+
* - `true`: highlight the first item (default)
|
|
649
|
+
* - `false`: don't auto-highlight any item
|
|
650
|
+
* - `'selected'`: highlight the currently selected item, or first item if none selected
|
|
651
|
+
* - `string`: highlight the item with this specific value
|
|
652
|
+
* @default true
|
|
653
|
+
*/
|
|
654
|
+
autoHighlightFirst?: boolean | 'selected' | string;
|
|
655
|
+
}
|
|
656
|
+
/**
|
|
657
|
+
* Provides search context and manages item registration for Combobox.
|
|
658
|
+
* Automatically syncs the search state with the combobox's input value.
|
|
659
|
+
*
|
|
660
|
+
* Place inside Combobox.Popup to enable search functionality.
|
|
661
|
+
* Renders a `<div>` element.
|
|
662
|
+
*/
|
|
663
|
+
declare const ComboboxSurface: React.ForwardRefExoticComponent<Omit<ComboboxSurface.Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
664
|
+
declare namespace ComboboxSurface {
|
|
665
|
+
type State = PopupMenuSurface.State;
|
|
666
|
+
interface Props extends ComboboxSurfaceProps {
|
|
667
|
+
}
|
|
668
|
+
}
|
|
669
|
+
|
|
670
|
+
declare const index_parts_VirtualItem: typeof VirtualItem;
|
|
671
|
+
declare const index_parts_useComboboxPositionerContext: typeof useComboboxPositionerContext;
|
|
672
|
+
declare namespace index_parts {
|
|
673
|
+
export { PopupMenuArrow as Arrow, PopupMenuBackdrop as Backdrop, ComboboxClear as Clear, PopupMenuEmpty as Empty, PopupMenuGroup as Group, PopupMenuGroupLabel as GroupLabel, PopupMenuIcon as Icon, ComboboxInput as Input, ComboboxInputWrapper as InputWrapper, ComboboxItem as Item, ComboboxItemIndicator as ItemIndicator, ComboboxItemLabel as ItemLabel, PopupMenuList as List, PopupMenuPopup as Popup, PopupMenuPortal as Portal, ComboboxPositioner as Positioner, ComboboxRoot as Root, PopupMenuScrollDownArrow as ScrollDownArrow, PopupMenuScrollUpArrow as ScrollUpArrow, PopupMenuSeparator as Separator, ComboboxSurface as Surface, index_parts_VirtualItem as VirtualItem, index_parts_useComboboxPositionerContext as useComboboxPositionerContext };
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
declare enum ComboboxArrowDataAttributes {
|
|
677
|
+
/**
|
|
678
|
+
* Identifies the component part.
|
|
679
|
+
* @type {'bazzaui-combobox-arrow'}
|
|
680
|
+
*/
|
|
681
|
+
slot = "bazzaui-combobox-arrow",
|
|
682
|
+
/**
|
|
683
|
+
* Present when the popup menu is open.
|
|
684
|
+
*/
|
|
685
|
+
open = "data-open",
|
|
686
|
+
/**
|
|
687
|
+
* Present when the popup menu is closed.
|
|
688
|
+
*/
|
|
689
|
+
closed = "data-closed",
|
|
690
|
+
/**
|
|
691
|
+
* Indicates which side the popup is positioned relative to the trigger.
|
|
692
|
+
* @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
|
|
693
|
+
*/
|
|
694
|
+
side = "data-side",
|
|
695
|
+
/**
|
|
696
|
+
* Indicates how the popup is aligned relative to specified side.
|
|
697
|
+
* @type {'start' | 'center' | 'end'}
|
|
698
|
+
*/
|
|
699
|
+
align = "data-align",
|
|
700
|
+
/**
|
|
701
|
+
* Present when the arrow is not centered due to collision avoidance.
|
|
702
|
+
*/
|
|
703
|
+
uncentered = "data-uncentered"
|
|
704
|
+
}
|
|
705
|
+
|
|
706
|
+
declare enum ComboboxBackdropDataAttributes {
|
|
707
|
+
/**
|
|
708
|
+
* Identifies the component part.
|
|
709
|
+
* @type {'bazzaui-combobox-backdrop'}
|
|
710
|
+
*/
|
|
711
|
+
slot = "bazzaui-combobox-backdrop",
|
|
712
|
+
/**
|
|
713
|
+
* Present when the popup menu is open.
|
|
714
|
+
*/
|
|
715
|
+
open = "data-open",
|
|
716
|
+
/**
|
|
717
|
+
* Present when the popup menu is closed.
|
|
718
|
+
*/
|
|
719
|
+
closed = "data-closed",
|
|
720
|
+
/**
|
|
721
|
+
* Present when the popup menu is animating in.
|
|
722
|
+
*/
|
|
723
|
+
startingStyle = "data-starting-style",
|
|
724
|
+
/**
|
|
725
|
+
* Present when the popup menu is animating out.
|
|
726
|
+
*/
|
|
727
|
+
endingStyle = "data-ending-style"
|
|
728
|
+
}
|
|
729
|
+
|
|
730
|
+
declare enum ComboboxEmptyDataAttributes {
|
|
731
|
+
/**
|
|
732
|
+
* Identifies the component part.
|
|
733
|
+
* @type {'bazzaui-combobox-empty'}
|
|
734
|
+
*/
|
|
735
|
+
slot = "bazzaui-combobox-empty"
|
|
736
|
+
}
|
|
737
|
+
|
|
738
|
+
declare enum ComboboxGroupDataAttributes {
|
|
739
|
+
/**
|
|
740
|
+
* Identifies the component part.
|
|
741
|
+
* @type {'bazzaui-combobox-group'}
|
|
742
|
+
*/
|
|
743
|
+
slot = "bazzaui-combobox-group"
|
|
744
|
+
}
|
|
745
|
+
|
|
746
|
+
declare enum ComboboxGroupLabelDataAttributes {
|
|
747
|
+
/**
|
|
748
|
+
* Identifies the component part.
|
|
749
|
+
* @type {'bazzaui-combobox-group-label'}
|
|
750
|
+
*/
|
|
751
|
+
slot = "bazzaui-combobox-group-label"
|
|
752
|
+
}
|
|
753
|
+
|
|
754
|
+
declare const ComboboxIconDataAttributes: {
|
|
755
|
+
/**
|
|
756
|
+
* Identifies the component part.
|
|
757
|
+
* @type {'bazzaui-combobox-icon'}
|
|
758
|
+
*/
|
|
759
|
+
readonly slot: "bazzaui-combobox-icon";
|
|
760
|
+
/** Present when the popup is open. */
|
|
761
|
+
readonly open: "data-popup-open";
|
|
762
|
+
};
|
|
763
|
+
|
|
764
|
+
declare enum ComboboxListDataAttributes {
|
|
765
|
+
/**
|
|
766
|
+
* Identifies the component part.
|
|
767
|
+
* @type {'bazzaui-combobox-list'}
|
|
768
|
+
*/
|
|
769
|
+
slot = "bazzaui-combobox-list",
|
|
770
|
+
/**
|
|
771
|
+
* Always present on the list element.
|
|
772
|
+
* Used for styling and by useStickyRowWidth to find the list container.
|
|
773
|
+
*/
|
|
774
|
+
list = "data-popup-menu-list"
|
|
775
|
+
}
|
|
776
|
+
|
|
777
|
+
declare enum ComboboxPopupDataAttributes {
|
|
778
|
+
/**
|
|
779
|
+
* Identifies the component part.
|
|
780
|
+
* @type {'bazzaui-combobox-popup'}
|
|
781
|
+
*/
|
|
782
|
+
slot = "bazzaui-combobox-popup",
|
|
783
|
+
/**
|
|
784
|
+
* Present when the popup menu is open.
|
|
785
|
+
*/
|
|
786
|
+
open = "data-open",
|
|
787
|
+
/**
|
|
788
|
+
* Present when the popup menu is closed.
|
|
789
|
+
*/
|
|
790
|
+
closed = "data-closed",
|
|
791
|
+
/**
|
|
792
|
+
* Indicates which side the popup is positioned relative to the trigger.
|
|
793
|
+
* @type {'top' | 'bottom' | 'left' | 'right'}
|
|
794
|
+
*/
|
|
795
|
+
side = "data-side",
|
|
796
|
+
/**
|
|
797
|
+
* Indicates how the popup is aligned relative to specified side.
|
|
798
|
+
* @type {'start' | 'center' | 'end'}
|
|
799
|
+
*/
|
|
800
|
+
align = "data-align",
|
|
801
|
+
/**
|
|
802
|
+
* Present when the popup is animating in.
|
|
803
|
+
*/
|
|
804
|
+
startingStyle = "data-starting-style",
|
|
805
|
+
/**
|
|
806
|
+
* Present when the popup is animating out.
|
|
807
|
+
*/
|
|
808
|
+
endingStyle = "data-ending-style",
|
|
809
|
+
/**
|
|
810
|
+
* Present if animations should be instant.
|
|
811
|
+
* @type {'click' | 'dismiss'}
|
|
812
|
+
*/
|
|
813
|
+
instant = "data-instant",
|
|
814
|
+
/**
|
|
815
|
+
* Present when this popup's surface is the focus owner.
|
|
816
|
+
* Useful for styling the currently focused menu in a submenu chain.
|
|
817
|
+
*/
|
|
818
|
+
focused = "data-focused",
|
|
819
|
+
/**
|
|
820
|
+
* Present when this popup has an open submenu below it in the menu tree.
|
|
821
|
+
* Useful for styling all parent menus in an open submenu chain.
|
|
822
|
+
*/
|
|
823
|
+
hasOpenSubmenu = "data-has-open-submenu",
|
|
824
|
+
/**
|
|
825
|
+
* Present when this popup is a submenu (not the root menu).
|
|
826
|
+
* Useful for applying different styles to submenus vs root menus.
|
|
827
|
+
*/
|
|
828
|
+
submenu = "data-submenu",
|
|
829
|
+
/**
|
|
830
|
+
* Present while navigating between subpages in this popup.
|
|
831
|
+
* Useful for temporary transition adjustments during subpage focus handoff.
|
|
832
|
+
*/
|
|
833
|
+
navigating = "data-navigating"
|
|
834
|
+
}
|
|
835
|
+
|
|
836
|
+
declare const ComboboxScrollArrowDataAttributes: {
|
|
837
|
+
/**
|
|
838
|
+
* Identifies the component part for scroll up arrow.
|
|
839
|
+
* @type {'bazzaui-combobox-scroll-up-arrow'}
|
|
840
|
+
*/
|
|
841
|
+
readonly slotUp: "bazzaui-combobox-scroll-up-arrow";
|
|
842
|
+
/**
|
|
843
|
+
* Identifies the component part for scroll down arrow.
|
|
844
|
+
* @type {'bazzaui-combobox-scroll-down-arrow'}
|
|
845
|
+
*/
|
|
846
|
+
readonly slotDown: "bazzaui-combobox-scroll-down-arrow";
|
|
847
|
+
/**
|
|
848
|
+
* Direction of the scroll arrow.
|
|
849
|
+
* @type {'up' | 'down'}
|
|
850
|
+
*/
|
|
851
|
+
readonly direction: "data-direction";
|
|
852
|
+
/**
|
|
853
|
+
* Side of the popup.
|
|
854
|
+
* @type {'top' | 'bottom' | 'left' | 'right'}
|
|
855
|
+
*/
|
|
856
|
+
readonly side: "data-side";
|
|
857
|
+
};
|
|
858
|
+
|
|
859
|
+
declare enum ComboboxSeparatorDataAttributes {
|
|
860
|
+
/**
|
|
861
|
+
* Identifies the component part.
|
|
862
|
+
* @type {'bazzaui-combobox-separator'}
|
|
863
|
+
*/
|
|
864
|
+
slot = "bazzaui-combobox-separator"
|
|
865
|
+
}
|
|
866
|
+
|
|
867
|
+
/**
|
|
868
|
+
* Filter mode for the combobox.
|
|
869
|
+
* Controls how the search/filter value is determined.
|
|
870
|
+
*
|
|
871
|
+
* State transitions:
|
|
872
|
+
* - Closed → open (no value) → { type: 'active' }
|
|
873
|
+
* - Closed → open (with value) → { type: 'showAll' }
|
|
874
|
+
* - Open + user types → { type: 'active' }
|
|
875
|
+
* - Open → close → { type: 'frozen', search: <current> }
|
|
876
|
+
*/
|
|
877
|
+
type ComboboxFilterMode = {
|
|
878
|
+
type: 'active';
|
|
879
|
+
} | {
|
|
880
|
+
type: 'showAll';
|
|
881
|
+
} | {
|
|
882
|
+
type: 'frozen';
|
|
883
|
+
search: string;
|
|
884
|
+
};
|
|
885
|
+
/**
|
|
886
|
+
* Item text registry for displaying selected values.
|
|
887
|
+
* Maps serialized item value to its text content.
|
|
888
|
+
*/
|
|
889
|
+
type ItemTextRegistry = Map<string, string>;
|
|
890
|
+
/**
|
|
891
|
+
* Context value for Combobox components.
|
|
892
|
+
* Provides value state, input state, callbacks, and form integration.
|
|
893
|
+
*
|
|
894
|
+
* @template Value - The type of the combobox value (can be a primitive or object)
|
|
895
|
+
*/
|
|
896
|
+
interface ComboboxContextValue<Value = unknown> {
|
|
897
|
+
/** Whether multi-select mode is enabled */
|
|
898
|
+
multiple: boolean;
|
|
899
|
+
/** Current selected value (single-select mode) */
|
|
900
|
+
value: Value | null;
|
|
901
|
+
/** Current selected values (multi-select mode) */
|
|
902
|
+
values: Value[];
|
|
903
|
+
/** Callback when value changes (single-select mode) */
|
|
904
|
+
onValueChange: (value: Value) => void;
|
|
905
|
+
/** Callback when values change (multi-select mode) */
|
|
906
|
+
onValuesChange: (values: Value[]) => void;
|
|
907
|
+
/**
|
|
908
|
+
* Custom comparison logic used to determine if a combobox item value
|
|
909
|
+
* matches the current selected value.
|
|
910
|
+
* Useful when item values are objects without matching referentially.
|
|
911
|
+
* Defaults to Object.is comparison.
|
|
912
|
+
*/
|
|
913
|
+
isItemEqualToValue: ItemEqualityComparer<Value>;
|
|
914
|
+
/**
|
|
915
|
+
* When the item values are objects, this function converts the object
|
|
916
|
+
* value to a string representation for display in the input.
|
|
917
|
+
* If the shape of the object is { value, label }, the label will be
|
|
918
|
+
* used automatically without needing to specify this prop.
|
|
919
|
+
*/
|
|
920
|
+
itemToStringLabel?: (itemValue: Value) => string;
|
|
921
|
+
/**
|
|
922
|
+
* When the item values are objects, this function converts the object
|
|
923
|
+
* value to a string representation for form submission.
|
|
924
|
+
* If the shape of the object is { value, label }, the value will be
|
|
925
|
+
* used automatically without needing to specify this prop.
|
|
926
|
+
*/
|
|
927
|
+
itemToStringValue?: (itemValue: Value) => string;
|
|
928
|
+
/** Current input value */
|
|
929
|
+
inputValue: string;
|
|
930
|
+
/** Callback when input value changes */
|
|
931
|
+
onInputValueChange: (value: string) => void;
|
|
932
|
+
/** Form field name for submission */
|
|
933
|
+
name?: string;
|
|
934
|
+
/** Associate with a form by ID */
|
|
935
|
+
form?: string;
|
|
936
|
+
/** Whether this field is required */
|
|
937
|
+
required?: boolean;
|
|
938
|
+
/** Whether the combobox is disabled */
|
|
939
|
+
disabled: boolean;
|
|
940
|
+
/** Placeholder text for the input */
|
|
941
|
+
placeholder: string;
|
|
942
|
+
/** Registry of item values to their text content */
|
|
943
|
+
itemTextRegistry: ItemTextRegistry;
|
|
944
|
+
/** Register an item's text content */
|
|
945
|
+
registerItemText: (value: string, text: string) => () => void;
|
|
946
|
+
/**
|
|
947
|
+
* Data structure of the items for label resolution.
|
|
948
|
+
* Used to display labels before items mount (e.g., on initial render with defaultValue).
|
|
949
|
+
* Can be a record mapping values to labels, or an array of { value, label } objects.
|
|
950
|
+
*/
|
|
951
|
+
items?: Record<string, React.ReactNode> | Array<{
|
|
952
|
+
value: string;
|
|
953
|
+
label: React.ReactNode;
|
|
954
|
+
}>;
|
|
955
|
+
/** ID for the listbox element */
|
|
956
|
+
listId: string;
|
|
957
|
+
/** Ref to the input element (also serves as anchor) */
|
|
958
|
+
inputRef: React.RefObject<HTMLInputElement | null>;
|
|
959
|
+
/** Callback to set the input element */
|
|
960
|
+
setInputElement: (element: HTMLInputElement | null) => void;
|
|
961
|
+
/** Ref to the input wrapper element (used as anchor when present) */
|
|
962
|
+
inputWrapperRef: React.RefObject<HTMLElement | null>;
|
|
963
|
+
/** Callback to set the input wrapper element */
|
|
964
|
+
setInputWrapperElement: (element: HTMLElement | null) => void;
|
|
965
|
+
/** Whether to close on selection (default: true for single, false for multiple) */
|
|
966
|
+
closeOnSelect: boolean;
|
|
967
|
+
/** Whether to open on focus */
|
|
968
|
+
openOnFocus: boolean;
|
|
969
|
+
/** Open the combobox */
|
|
970
|
+
openCombobox: () => void;
|
|
971
|
+
/** Close the combobox with an optional reason and event */
|
|
972
|
+
closeCombobox: (reason?: ComboboxOpenChangeReason, event?: Event) => void;
|
|
973
|
+
/**
|
|
974
|
+
* Current filter mode for the combobox.
|
|
975
|
+
* Controls how the search/filter value is determined.
|
|
976
|
+
*/
|
|
977
|
+
filterMode: ComboboxFilterMode;
|
|
978
|
+
/** Set the filter mode to 'active' (normal filtering using inputValue) */
|
|
979
|
+
setFilterActive: () => void;
|
|
980
|
+
/**
|
|
981
|
+
* Height of the input element in pixels.
|
|
982
|
+
* Used by the positioner for input-embedded layout calculations.
|
|
983
|
+
*/
|
|
984
|
+
inputHeight: number;
|
|
985
|
+
/**
|
|
986
|
+
* Width of the input element in pixels.
|
|
987
|
+
* Used by the positioner for input-embedded layout calculations.
|
|
988
|
+
*/
|
|
989
|
+
inputWidth: number;
|
|
990
|
+
/**
|
|
991
|
+
* The layout mode for the combobox popup.
|
|
992
|
+
* - `'floating'` - Standard dropdown positioning
|
|
993
|
+
* - `'input-embedded'` - Popup wraps around the input (macOS-style)
|
|
994
|
+
*/
|
|
995
|
+
layout: ComboboxLayout;
|
|
996
|
+
}
|
|
997
|
+
/**
|
|
998
|
+
* Hook to access the Combobox context.
|
|
999
|
+
* Throws if used outside a Combobox.Root.
|
|
1000
|
+
*/
|
|
1001
|
+
declare function useComboboxContext<Value = unknown>(): ComboboxContextValue<Value>;
|
|
1002
|
+
/**
|
|
1003
|
+
* Hook to optionally access the Combobox context.
|
|
1004
|
+
* Returns null if used outside a Combobox.Root.
|
|
1005
|
+
*/
|
|
1006
|
+
declare function useMaybeComboboxContext<Value = unknown>(): ComboboxContextValue<Value> | null;
|
|
1007
|
+
|
|
1008
|
+
/**
|
|
1009
|
+
* Context value for ComboboxItem.
|
|
1010
|
+
* Provides item state to child components like ItemIndicator.
|
|
1011
|
+
*
|
|
1012
|
+
* @template Value - The type of the item value (can be a primitive or object)
|
|
1013
|
+
*/
|
|
1014
|
+
interface ComboboxItemContextValue<Value = unknown> {
|
|
1015
|
+
/** Unique ID for the item element */
|
|
1016
|
+
id: string;
|
|
1017
|
+
/** The item's value */
|
|
1018
|
+
value: Value;
|
|
1019
|
+
/** The text value/label for this item */
|
|
1020
|
+
textValue: string | undefined;
|
|
1021
|
+
/** Whether the item is highlighted (via keyboard or pointer) */
|
|
1022
|
+
highlighted: boolean;
|
|
1023
|
+
/** Whether the item is disabled */
|
|
1024
|
+
disabled: boolean;
|
|
1025
|
+
/** Whether the item is selected */
|
|
1026
|
+
selected: boolean;
|
|
1027
|
+
}
|
|
1028
|
+
/**
|
|
1029
|
+
* Hook to access the ComboboxItem context.
|
|
1030
|
+
* Throws if used outside a ComboboxItem.
|
|
1031
|
+
*/
|
|
1032
|
+
declare function useComboboxItemContext<Value = unknown>(): ComboboxItemContextValue<Value>;
|
|
1033
|
+
/**
|
|
1034
|
+
* Hook to optionally access the ComboboxItem context.
|
|
1035
|
+
* Returns null if used outside a ComboboxItem.
|
|
1036
|
+
*/
|
|
1037
|
+
declare function useMaybeComboboxItemContext<Value = unknown>(): ComboboxItemContextValue<Value> | null;
|
|
1038
|
+
|
|
1039
|
+
export { index_parts as Combobox, PopupMenuArrow as ComboboxArrow, ComboboxArrowDataAttributes, PopupMenuBackdrop as ComboboxBackdrop, ComboboxBackdropDataAttributes, ComboboxClear, type ComboboxClearProps, type ComboboxClearState, type ComboboxContextValue, PopupMenuEmpty as ComboboxEmpty, ComboboxEmptyDataAttributes, PopupMenuGroup as ComboboxGroup, ComboboxGroupDataAttributes, PopupMenuGroupLabel as ComboboxGroupLabel, ComboboxGroupLabelDataAttributes, ComboboxIconDataAttributes, ComboboxInput, type ComboboxInputCursorBehavior, ComboboxInputDataAttributes, type ComboboxInputProps, type ComboboxInputState, ComboboxInputWrapper, ComboboxInputWrapperDataAttributes, type ComboboxInputWrapperProps, type ComboboxInputWrapperState, ComboboxItem, type ComboboxItemContextValue, ComboboxItemDataAttributes, ComboboxItemIndicator, ComboboxItemIndicatorDataAttributes, type ComboboxItemIndicatorProps, type ComboboxItemIndicatorState, ComboboxItemLabel, type ComboboxItemLabelProps, type ComboboxItemProps, type ComboboxItemState, type ComboboxLayout, PopupMenuList as ComboboxList, ComboboxListDataAttributes, PopupMenuPopup as ComboboxPopup, ComboboxPopupDataAttributes, PopupMenuPortal as ComboboxPortal, ComboboxPositioner, type ComboboxPositionerContextValue, ComboboxPositionerDataAttributes, type ComboboxPositionerProps, ComboboxRoot, type ComboboxRootProps, ComboboxScrollArrowDataAttributes, PopupMenuSeparator as ComboboxSeparator, ComboboxSeparatorDataAttributes, ComboboxSurface, type ComboboxSurfaceProps, VirtualItem as ComboboxVirtualItem, useComboboxContext, useComboboxItemContext, useComboboxPositionerContext, useMaybeComboboxContext, useMaybeComboboxItemContext };
|