@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,927 @@
|
|
|
1
|
+
import { V as VirtualItem } from '../ListboxStore-BtcTXpzi.cjs';
|
|
2
|
+
export { F as SelectFilterFn, I as SelectItemRegistration, b as SelectStore, L as SelectStoreContext, a as SelectStoreState } from '../ListboxStore-BtcTXpzi.cjs';
|
|
3
|
+
import { i as PopupMenuPopup, R as PopupMenuPopupState, 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, j as PopupMenuPortal, k as PopupMenuScrollDownArrow, l as PopupMenuScrollUpArrow, m as PopupMenuSeparator } from '../separator-BmbUeeaT.cjs';
|
|
4
|
+
export { o as SelectArrowProps, p as SelectBackdropProps, q as SelectEmptyProps, r as SelectEmptyState, s as SelectGroupLabelProps, t as SelectGroupLabelState, u as SelectGroupProps, v as SelectGroupState, w as SelectIconProps, x as SelectIconState, y as SelectListChildrenState, L as SelectListCssVars, z as SelectListProps, A as SelectListState, C as SelectPortalProps, M as SelectPositionerCssVars, D as SelectScrollArrowProps, E as SelectScrollArrowState, F as SelectScrollDownArrowProps, G as SelectScrollUpArrowProps, H as SelectSeparatorProps, I as SelectSeparatorState, K as SelectSurfaceState } from '../separator-BmbUeeaT.cjs';
|
|
5
|
+
import { P as PopupMenuInput } from '../input-BoIK003I.cjs';
|
|
6
|
+
export { a as SelectInputProps, b as SelectInputState } from '../input-BoIK003I.cjs';
|
|
7
|
+
import * as React from 'react';
|
|
8
|
+
import { C as ComponentProps } from '../types-9vS1uLIK.cjs';
|
|
9
|
+
import { PopoverPositionerProps, Popover, PopoverRootProps } from '@base-ui/react/popover';
|
|
10
|
+
import { I as ItemEqualityComparer } from '../item-equality-B6TbXlBT.cjs';
|
|
11
|
+
import { C as ChangeEventDetails, t as triggerPress, e as escapeKey, o as outsidePress, f as focusOut, i as itemPress, l as listNavigation, g as imperativeAction, n as none, G as GenericEventDetails, p as pointer, k as keyboard } from '../events-BPr8sRGH.cjs';
|
|
12
|
+
export { S as SurfaceContextValue, c as commandScore, d as defaultFilter, u as useMaybeSurfaceContext, a as useSurfaceContext } from '../command-score-YjNr3ZWi.cjs';
|
|
13
|
+
import '@base-ui/utils/store';
|
|
14
|
+
|
|
15
|
+
declare const SelectItemDataAttributes: {
|
|
16
|
+
/**
|
|
17
|
+
* Identifies the component part.
|
|
18
|
+
* @type {'bazzaui-select-item'}
|
|
19
|
+
*/
|
|
20
|
+
readonly slot: "bazzaui-select-item";
|
|
21
|
+
/**
|
|
22
|
+
* Present when the item is highlighted via keyboard or pointer.
|
|
23
|
+
*/
|
|
24
|
+
readonly highlighted: "data-highlighted";
|
|
25
|
+
/**
|
|
26
|
+
* Present when the item is disabled.
|
|
27
|
+
*/
|
|
28
|
+
readonly disabled: "data-disabled";
|
|
29
|
+
/**
|
|
30
|
+
* Present when the item is currently selected.
|
|
31
|
+
*/
|
|
32
|
+
readonly selected: "data-selected";
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
interface SelectItemState extends Record<string, unknown> {
|
|
36
|
+
/**
|
|
37
|
+
* Whether the item is highlighted (via keyboard or pointer).
|
|
38
|
+
*/
|
|
39
|
+
highlighted: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Whether the item is disabled.
|
|
42
|
+
*/
|
|
43
|
+
disabled: boolean;
|
|
44
|
+
/**
|
|
45
|
+
* Whether the item is currently selected.
|
|
46
|
+
*/
|
|
47
|
+
selected: boolean;
|
|
48
|
+
}
|
|
49
|
+
interface SelectItemProps<Value = unknown> extends ComponentProps<'div', SelectItem.State> {
|
|
50
|
+
/**
|
|
51
|
+
* The value of this item. Required and must be unique within the Select.
|
|
52
|
+
* Can be a primitive or an object.
|
|
53
|
+
*/
|
|
54
|
+
value: Value;
|
|
55
|
+
/**
|
|
56
|
+
* Text value to use for display in Select.Value when this item is selected.
|
|
57
|
+
* If not provided, the text content of the item will be used.
|
|
58
|
+
* For object values, this can be auto-detected from `{ label }` shape.
|
|
59
|
+
*/
|
|
60
|
+
textValue?: string;
|
|
61
|
+
/**
|
|
62
|
+
* Additional keywords to match against when filtering.
|
|
63
|
+
* Useful for aliases or synonyms.
|
|
64
|
+
*/
|
|
65
|
+
keywords?: string[];
|
|
66
|
+
/**
|
|
67
|
+
* Whether this item is disabled.
|
|
68
|
+
* Disabled items are not selectable and are skipped during keyboard navigation.
|
|
69
|
+
*/
|
|
70
|
+
disabled?: boolean;
|
|
71
|
+
/**
|
|
72
|
+
* Callback when this item is selected.
|
|
73
|
+
*/
|
|
74
|
+
onSelect?: () => void;
|
|
75
|
+
/**
|
|
76
|
+
* Whether to force render this item regardless of filter results.
|
|
77
|
+
* @default false
|
|
78
|
+
*/
|
|
79
|
+
forceMount?: boolean;
|
|
80
|
+
}
|
|
81
|
+
declare const SelectItem: <Value = unknown>(props: SelectItemProps<Value> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
|
|
82
|
+
declare namespace SelectItem {
|
|
83
|
+
type State = SelectItemState;
|
|
84
|
+
interface Props<Value = unknown> extends SelectItemProps<Value> {
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
declare const SelectItemIndicatorDataAttributes: {
|
|
89
|
+
/**
|
|
90
|
+
* Identifies the component part.
|
|
91
|
+
* @type {'bazzaui-select-item-indicator'}
|
|
92
|
+
*/
|
|
93
|
+
readonly slot: "bazzaui-select-item-indicator";
|
|
94
|
+
/**
|
|
95
|
+
* Present when the parent item is selected.
|
|
96
|
+
*/
|
|
97
|
+
readonly selected: "data-selected";
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
interface SelectItemIndicatorState extends Record<string, unknown> {
|
|
101
|
+
/**
|
|
102
|
+
* Whether the item is selected.
|
|
103
|
+
*/
|
|
104
|
+
selected: boolean;
|
|
105
|
+
}
|
|
106
|
+
interface SelectItemIndicatorProps extends Omit<ComponentProps<'span', SelectItemIndicator.State>, 'children'> {
|
|
107
|
+
/**
|
|
108
|
+
* Whether to force render even when the item is not selected.
|
|
109
|
+
* @default false
|
|
110
|
+
*/
|
|
111
|
+
forceMount?: boolean;
|
|
112
|
+
/**
|
|
113
|
+
* Whether to keep the element mounted even when not selected.
|
|
114
|
+
* Unlike forceMount, this still conditionally renders children.
|
|
115
|
+
* Useful for checkbox-style indicators where the container is always visible.
|
|
116
|
+
* @default false
|
|
117
|
+
*/
|
|
118
|
+
keepMounted?: boolean;
|
|
119
|
+
/**
|
|
120
|
+
* Content to render. Can be a ReactNode or a function that receives state.
|
|
121
|
+
*/
|
|
122
|
+
children?: React.ReactNode | ((state: SelectItemIndicator.State) => React.ReactNode);
|
|
123
|
+
}
|
|
124
|
+
/**
|
|
125
|
+
* Indicator that shows when the item is selected.
|
|
126
|
+
* Typically renders a checkmark icon.
|
|
127
|
+
* Only renders when the item is selected (unless forceMount or keepMounted is true).
|
|
128
|
+
* Renders a `<span>` element.
|
|
129
|
+
*/
|
|
130
|
+
declare const SelectItemIndicator: React.ForwardRefExoticComponent<Omit<SelectItemIndicator.Props, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
131
|
+
declare namespace SelectItemIndicator {
|
|
132
|
+
interface Props extends SelectItemIndicatorProps {
|
|
133
|
+
}
|
|
134
|
+
type State = SelectItemIndicatorState;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
interface SelectItemLabelState extends Record<string, unknown> {
|
|
138
|
+
/**
|
|
139
|
+
* The serialized string key for the parent item's value.
|
|
140
|
+
* For object values, this is the result of `itemToStringValue` or the auto-detected `.value` property.
|
|
141
|
+
*/
|
|
142
|
+
value: string;
|
|
143
|
+
/**
|
|
144
|
+
* Whether the parent item is selected.
|
|
145
|
+
*/
|
|
146
|
+
selected: boolean;
|
|
147
|
+
/**
|
|
148
|
+
* Whether the parent item is highlighted.
|
|
149
|
+
*/
|
|
150
|
+
highlighted: boolean;
|
|
151
|
+
/**
|
|
152
|
+
* Whether the parent item is disabled.
|
|
153
|
+
*/
|
|
154
|
+
disabled: boolean;
|
|
155
|
+
}
|
|
156
|
+
interface SelectItemLabelProps extends ComponentProps<'span', SelectItemLabel.State> {
|
|
157
|
+
}
|
|
158
|
+
/**
|
|
159
|
+
* The label/text content of a Select.Item.
|
|
160
|
+
*
|
|
161
|
+
* When no children are provided, automatically renders the label from the
|
|
162
|
+
* `items` prop passed to `Select.Root`. If children are provided, they
|
|
163
|
+
* override the automatic label.
|
|
164
|
+
*
|
|
165
|
+
* Also captures the text for display in `Select.Value` when the item is selected,
|
|
166
|
+
* and provides the text element reference for `alignItemWithTrigger` positioning.
|
|
167
|
+
*
|
|
168
|
+
* Renders a `<span>` element.
|
|
169
|
+
*/
|
|
170
|
+
declare const SelectItemLabel: React.ForwardRefExoticComponent<Omit<SelectItemLabel.Props, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
171
|
+
declare namespace SelectItemLabel {
|
|
172
|
+
interface Props extends SelectItemLabelProps {
|
|
173
|
+
}
|
|
174
|
+
type State = SelectItemLabelState;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
interface SelectPopupState extends PopupMenuPopupState {
|
|
178
|
+
/**
|
|
179
|
+
* Whether the popup is currently using align-item-with-trigger positioning.
|
|
180
|
+
* This reflects the actual state, not just the prop value - it will be false
|
|
181
|
+
* if alignment couldn't be applied (e.g., not enough space, no selected item).
|
|
182
|
+
*/
|
|
183
|
+
alignItemWithTriggerActive: boolean;
|
|
184
|
+
}
|
|
185
|
+
interface SelectPopupProps extends Omit<PopupMenuPopup.Props, 'className'> {
|
|
186
|
+
/**
|
|
187
|
+
* CSS class applied to the element, or a function that
|
|
188
|
+
* returns a class based on the component's state.
|
|
189
|
+
*/
|
|
190
|
+
className?: string | ((state: SelectPopupState) => string);
|
|
191
|
+
}
|
|
192
|
+
/**
|
|
193
|
+
* A container for the select popup contents.
|
|
194
|
+
* Extends PopupMenuPopup with Select-specific state including alignItemWithTriggerActive.
|
|
195
|
+
*
|
|
196
|
+
* Renders a `<div>` element.
|
|
197
|
+
*/
|
|
198
|
+
declare const SelectPopup: React.ForwardRefExoticComponent<SelectPopupProps & React.RefAttributes<HTMLDivElement>>;
|
|
199
|
+
declare namespace SelectPopup {
|
|
200
|
+
type Props = SelectPopupProps;
|
|
201
|
+
type State = SelectPopupState;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
declare const SelectPositionerDataAttributes: {
|
|
205
|
+
/**
|
|
206
|
+
* Identifies the component part.
|
|
207
|
+
* @type {'bazzaui-select-positioner'}
|
|
208
|
+
*/
|
|
209
|
+
readonly slot: "bazzaui-select-positioner";
|
|
210
|
+
};
|
|
211
|
+
|
|
212
|
+
interface SelectPositionerProps extends PopoverPositionerProps {
|
|
213
|
+
/**
|
|
214
|
+
* Whether the positioner overlaps the trigger so the selected item's text
|
|
215
|
+
* is aligned with the trigger's value text.
|
|
216
|
+
*
|
|
217
|
+
* This is automatically disabled if:
|
|
218
|
+
* - There is not enough space in the viewport
|
|
219
|
+
* - The trigger is too close to the viewport edges
|
|
220
|
+
* - Touch input is detected (better UX to show full list)
|
|
221
|
+
*
|
|
222
|
+
* @default true
|
|
223
|
+
*/
|
|
224
|
+
alignItemWithTrigger?: boolean;
|
|
225
|
+
}
|
|
226
|
+
/**
|
|
227
|
+
* Positions the select popup against its trigger.
|
|
228
|
+
* Supports aligning the selected item with the trigger for a native select feel.
|
|
229
|
+
*
|
|
230
|
+
* Renders a `<div>` element.
|
|
231
|
+
*/
|
|
232
|
+
declare const SelectPositioner: React.ForwardRefExoticComponent<SelectPositionerProps & React.RefAttributes<HTMLDivElement>>;
|
|
233
|
+
declare namespace SelectPositioner {
|
|
234
|
+
type Props = SelectPositionerProps;
|
|
235
|
+
type State = Popover.Positioner.State;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
/**
|
|
239
|
+
* Reasons why the select's open state changed.
|
|
240
|
+
*/
|
|
241
|
+
type SelectOpenChangeReason = typeof triggerPress | typeof escapeKey | typeof outsidePress | typeof focusOut | typeof itemPress | typeof listNavigation | typeof imperativeAction | typeof none;
|
|
242
|
+
/**
|
|
243
|
+
* Event details passed to the `onOpenChange` callback.
|
|
244
|
+
*/
|
|
245
|
+
type SelectOpenChangeEventDetails = ChangeEventDetails<SelectOpenChangeReason>;
|
|
246
|
+
/**
|
|
247
|
+
* Reasons why highlight changed.
|
|
248
|
+
*/
|
|
249
|
+
type SelectHighlightChangeReason = typeof pointer | typeof keyboard | typeof none;
|
|
250
|
+
/**
|
|
251
|
+
* Event details passed to the `onHighlightChange` callback.
|
|
252
|
+
*/
|
|
253
|
+
type SelectHighlightChangeEventDetails = GenericEventDetails<SelectHighlightChangeReason, {
|
|
254
|
+
index: number;
|
|
255
|
+
}>;
|
|
256
|
+
|
|
257
|
+
/**
|
|
258
|
+
* Helper type to determine the value type based on the multiple flag.
|
|
259
|
+
*/
|
|
260
|
+
type SelectValue$1<Value, Multiple extends boolean | undefined> = Multiple extends true ? Value[] : Value | null;
|
|
261
|
+
interface SelectRootProps<Value = unknown, Multiple extends boolean | undefined = false> extends Omit<PopoverRootProps, 'open' | 'onOpenChange' | 'defaultOpen' | 'actionsRef'> {
|
|
262
|
+
/**
|
|
263
|
+
* Whether the select is open.
|
|
264
|
+
* Use for controlled mode.
|
|
265
|
+
*/
|
|
266
|
+
open?: boolean;
|
|
267
|
+
/**
|
|
268
|
+
* Callback when the open state changes.
|
|
269
|
+
* The second parameter contains event details including the reason for the change.
|
|
270
|
+
*/
|
|
271
|
+
onOpenChange?: (open: boolean, eventDetails: SelectOpenChangeEventDetails) => void;
|
|
272
|
+
/**
|
|
273
|
+
* Callback called after any animations complete when the select opens or closes.
|
|
274
|
+
* Useful for resetting state after exit animations finish.
|
|
275
|
+
*/
|
|
276
|
+
onOpenChangeComplete?: (open: boolean) => void;
|
|
277
|
+
/**
|
|
278
|
+
* A ref to imperative actions.
|
|
279
|
+
* - `close`: closes the menu imperatively.
|
|
280
|
+
* - `unmount`: unmounts the popup imperatively (when keep-mounted mode is enabled).
|
|
281
|
+
* - `setDisabled`: enables/disables the menu imperatively.
|
|
282
|
+
*/
|
|
283
|
+
actionsRef?: React.RefObject<SelectRoot.Actions | null>;
|
|
284
|
+
/**
|
|
285
|
+
* Whether the select is initially open.
|
|
286
|
+
* Use for uncontrolled mode.
|
|
287
|
+
* @default false
|
|
288
|
+
*/
|
|
289
|
+
defaultOpen?: boolean;
|
|
290
|
+
/**
|
|
291
|
+
* Current selected value (single-select mode).
|
|
292
|
+
* Use for controlled mode.
|
|
293
|
+
* Can be a primitive or an object.
|
|
294
|
+
*/
|
|
295
|
+
value?: SelectValue$1<Value, Multiple>;
|
|
296
|
+
/**
|
|
297
|
+
* Default selected value (single-select mode).
|
|
298
|
+
* Use for uncontrolled mode.
|
|
299
|
+
*/
|
|
300
|
+
defaultValue?: SelectValue$1<Value, Multiple>;
|
|
301
|
+
/**
|
|
302
|
+
* Callback when the selected value changes (single-select mode).
|
|
303
|
+
*/
|
|
304
|
+
onValueChange?: (value: Value) => void;
|
|
305
|
+
/**
|
|
306
|
+
* Whether multi-select mode is enabled.
|
|
307
|
+
* @default false
|
|
308
|
+
*/
|
|
309
|
+
multiple?: Multiple;
|
|
310
|
+
/**
|
|
311
|
+
* Current selected values (multi-select mode).
|
|
312
|
+
* Use for controlled mode.
|
|
313
|
+
*/
|
|
314
|
+
values?: Value[];
|
|
315
|
+
/**
|
|
316
|
+
* Default selected values (multi-select mode).
|
|
317
|
+
* Use for uncontrolled mode.
|
|
318
|
+
*/
|
|
319
|
+
defaultValues?: Value[];
|
|
320
|
+
/**
|
|
321
|
+
* Callback when the selected values change (multi-select mode).
|
|
322
|
+
*/
|
|
323
|
+
onValuesChange?: (values: Value[]) => void;
|
|
324
|
+
/**
|
|
325
|
+
* Custom comparison logic used to determine if a select item value
|
|
326
|
+
* matches the current selected value.
|
|
327
|
+
* Useful when item values are objects without matching referentially.
|
|
328
|
+
* Defaults to Object.is comparison.
|
|
329
|
+
*/
|
|
330
|
+
isItemEqualToValue?: ItemEqualityComparer<Value>;
|
|
331
|
+
/**
|
|
332
|
+
* When the item values are objects (`<Select.Item value={object}>`),
|
|
333
|
+
* this function converts the object value to a string representation
|
|
334
|
+
* for display in the trigger.
|
|
335
|
+
* If the shape of the object is `{ value, label }`, the label will be
|
|
336
|
+
* used automatically without needing to specify this prop.
|
|
337
|
+
*/
|
|
338
|
+
itemToStringLabel?: (itemValue: Value) => string;
|
|
339
|
+
/**
|
|
340
|
+
* When the item values are objects (`<Select.Item value={object}>`),
|
|
341
|
+
* this function converts the object value to a string representation
|
|
342
|
+
* for form submission.
|
|
343
|
+
* If the shape of the object is `{ value, label }`, the value will be
|
|
344
|
+
* used automatically without needing to specify this prop.
|
|
345
|
+
*/
|
|
346
|
+
itemToStringValue?: (itemValue: Value) => string;
|
|
347
|
+
/**
|
|
348
|
+
* Form field name for submission.
|
|
349
|
+
* When set, hidden input(s) will be rendered for form submission.
|
|
350
|
+
*/
|
|
351
|
+
name?: string;
|
|
352
|
+
/**
|
|
353
|
+
* Associate with a form by ID.
|
|
354
|
+
*/
|
|
355
|
+
form?: string;
|
|
356
|
+
/**
|
|
357
|
+
* Whether this field is required.
|
|
358
|
+
*/
|
|
359
|
+
required?: boolean;
|
|
360
|
+
/**
|
|
361
|
+
* Whether the select is disabled.
|
|
362
|
+
* @default false
|
|
363
|
+
*/
|
|
364
|
+
disabled?: boolean;
|
|
365
|
+
/**
|
|
366
|
+
* Placeholder text when no value is selected.
|
|
367
|
+
* @default "Select..."
|
|
368
|
+
*/
|
|
369
|
+
placeholder?: string;
|
|
370
|
+
/**
|
|
371
|
+
* Data structure of the items rendered in the select popup.
|
|
372
|
+
* When specified, `<Select.Value>` renders the label of the selected item
|
|
373
|
+
* instead of the raw value.
|
|
374
|
+
*
|
|
375
|
+
* Can be a record mapping values to labels, or an array of { value, label } objects.
|
|
376
|
+
* @example
|
|
377
|
+
* ```tsx
|
|
378
|
+
* // Record format
|
|
379
|
+
* <Select.Root items={{ us: 'United States', uk: 'United Kingdom' }}>
|
|
380
|
+
*
|
|
381
|
+
* // Array format
|
|
382
|
+
* <Select.Root items={[
|
|
383
|
+
* { value: 'us', label: 'United States' },
|
|
384
|
+
* { value: 'uk', label: 'United Kingdom' },
|
|
385
|
+
* ]}>
|
|
386
|
+
* ```
|
|
387
|
+
*/
|
|
388
|
+
items?: Record<string, React.ReactNode> | Array<{
|
|
389
|
+
value: string;
|
|
390
|
+
label: React.ReactNode;
|
|
391
|
+
}>;
|
|
392
|
+
/**
|
|
393
|
+
* Determines if the select enters a modal state when open.
|
|
394
|
+
*
|
|
395
|
+
* - `true`: user interaction is limited to the select: document page scroll
|
|
396
|
+
* is locked, and pointer interactions on outside elements are disabled.
|
|
397
|
+
* - `false`: user interaction with the rest of the document is allowed.
|
|
398
|
+
* - `'trap-focus'`: focus is trapped inside the select, but document page
|
|
399
|
+
* scroll is not locked and pointer interactions outside of it remain enabled.
|
|
400
|
+
*
|
|
401
|
+
* @default true
|
|
402
|
+
*/
|
|
403
|
+
modal?: boolean | 'trap-focus';
|
|
404
|
+
/**
|
|
405
|
+
* Whether virtualization mode is enabled.
|
|
406
|
+
* When true, items should provide an explicit `index` prop and
|
|
407
|
+
* the `virtualItems` prop should be provided for navigation to work correctly.
|
|
408
|
+
* @default false
|
|
409
|
+
*/
|
|
410
|
+
virtualized?: boolean;
|
|
411
|
+
/**
|
|
412
|
+
* Pre-registered items for virtualization.
|
|
413
|
+
* When provided with `virtualized={true}`, this allows navigation to work
|
|
414
|
+
* for items that aren't currently mounted in the DOM.
|
|
415
|
+
*/
|
|
416
|
+
virtualItems?: VirtualItem[];
|
|
417
|
+
/**
|
|
418
|
+
* Callback when the highlighted item changes.
|
|
419
|
+
* Useful for synchronizing with a virtualizer (e.g., scrollToIndex) or other UI state.
|
|
420
|
+
* The third parameter contains event details including the reason for the change.
|
|
421
|
+
*/
|
|
422
|
+
onHighlightChange?: (id: string | null, index: number, eventDetails: SelectHighlightChangeEventDetails) => void;
|
|
423
|
+
/**
|
|
424
|
+
* Debug visualization options for submenu interaction heuristics.
|
|
425
|
+
*/
|
|
426
|
+
debug?: PopupMenuDebugOptions;
|
|
427
|
+
children: React.ReactNode;
|
|
428
|
+
}
|
|
429
|
+
/**
|
|
430
|
+
* Groups all parts of the select.
|
|
431
|
+
* Manages open state, selection state, and provides context to children.
|
|
432
|
+
* Doesn't render its own HTML element.
|
|
433
|
+
*
|
|
434
|
+
* @template Value - The type of the select value (can be a primitive or object)
|
|
435
|
+
* @template Multiple - Whether multiple selection is enabled
|
|
436
|
+
*/
|
|
437
|
+
declare function SelectRoot<Value = unknown, Multiple extends boolean | undefined = false>(props: SelectRootProps<Value, Multiple>): React.JSX.Element;
|
|
438
|
+
declare namespace SelectRoot {
|
|
439
|
+
interface Props<Value = unknown, Multiple extends boolean | undefined = false> extends SelectRootProps<Value, Multiple> {
|
|
440
|
+
}
|
|
441
|
+
type OpenChangeEventDetails = SelectOpenChangeEventDetails;
|
|
442
|
+
type HighlightChangeEventDetails = SelectHighlightChangeEventDetails;
|
|
443
|
+
type Actions = PopupMenuRootActions;
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
interface SelectSurfaceProps extends Omit<PopupMenuSurfaceProps, 'autoHighlightFirst'> {
|
|
447
|
+
/**
|
|
448
|
+
* Controls auto-highlighting behavior when the select opens.
|
|
449
|
+
* - `true`: highlight the first item (default when alignItemWithTrigger is inactive)
|
|
450
|
+
* - `false`: don't auto-highlight any item
|
|
451
|
+
* - `'selected'`: highlight the currently selected item, or first item if none selected
|
|
452
|
+
* - `string`: highlight the item with this specific value
|
|
453
|
+
*
|
|
454
|
+
* Note: When the Positioner's `alignItemWithTrigger` is active and this prop
|
|
455
|
+
* is not explicitly set, the selected item is automatically highlighted.
|
|
456
|
+
*
|
|
457
|
+
* @default true (or selected value when alignItemWithTrigger is active)
|
|
458
|
+
*/
|
|
459
|
+
autoHighlightFirst?: boolean | 'selected' | string;
|
|
460
|
+
}
|
|
461
|
+
/**
|
|
462
|
+
* Provides search context and manages item registration for Select.
|
|
463
|
+
* Automatically configures `autoHighlightFirst` based on the Positioner's
|
|
464
|
+
* `alignItemWithTrigger` prop - when active, highlights the selected item
|
|
465
|
+
* instead of the first item.
|
|
466
|
+
*
|
|
467
|
+
* Place inside Select.Popup to enable search functionality.
|
|
468
|
+
* Renders a `<div>` element.
|
|
469
|
+
*/
|
|
470
|
+
declare const SelectSurface: React.ForwardRefExoticComponent<Omit<SelectSurface.Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
471
|
+
declare namespace SelectSurface {
|
|
472
|
+
type State = PopupMenuSurface.State;
|
|
473
|
+
interface Props extends SelectSurfaceProps {
|
|
474
|
+
}
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
declare const SelectTriggerDataAttributes: {
|
|
478
|
+
/**
|
|
479
|
+
* Identifies the component part.
|
|
480
|
+
* @type {'bazzaui-select-trigger'}
|
|
481
|
+
*/
|
|
482
|
+
readonly slot: "bazzaui-select-trigger";
|
|
483
|
+
/**
|
|
484
|
+
* Present when the select dropdown is open.
|
|
485
|
+
*/
|
|
486
|
+
readonly open: "data-open";
|
|
487
|
+
/**
|
|
488
|
+
* Present when the select dropdown is closed.
|
|
489
|
+
*/
|
|
490
|
+
readonly closed: "data-closed";
|
|
491
|
+
/**
|
|
492
|
+
* Present when the trigger is disabled.
|
|
493
|
+
*/
|
|
494
|
+
readonly disabled: "data-disabled";
|
|
495
|
+
/**
|
|
496
|
+
* Present when no value is selected (showing placeholder).
|
|
497
|
+
*/
|
|
498
|
+
readonly placeholder: "data-placeholder";
|
|
499
|
+
};
|
|
500
|
+
|
|
501
|
+
interface SelectTriggerState extends Record<string, unknown> {
|
|
502
|
+
/**
|
|
503
|
+
* Whether the select is open.
|
|
504
|
+
*/
|
|
505
|
+
open: boolean;
|
|
506
|
+
/**
|
|
507
|
+
* Whether the select is disabled.
|
|
508
|
+
*/
|
|
509
|
+
disabled: boolean;
|
|
510
|
+
/**
|
|
511
|
+
* Whether the select currently shows placeholder (no value selected).
|
|
512
|
+
*/
|
|
513
|
+
placeholder: boolean;
|
|
514
|
+
}
|
|
515
|
+
interface SelectTriggerProps extends ComponentProps<'button', SelectTrigger.State> {
|
|
516
|
+
/**
|
|
517
|
+
* Whether the trigger is disabled.
|
|
518
|
+
*/
|
|
519
|
+
disabled?: boolean;
|
|
520
|
+
}
|
|
521
|
+
/**
|
|
522
|
+
* A button that opens the select dropdown.
|
|
523
|
+
* Renders a `<button>` element with combobox ARIA semantics.
|
|
524
|
+
*/
|
|
525
|
+
declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectTrigger.Props, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
526
|
+
declare namespace SelectTrigger {
|
|
527
|
+
interface Props extends SelectTriggerProps {
|
|
528
|
+
}
|
|
529
|
+
type State = SelectTriggerState;
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
interface SelectValueState<Value = unknown> extends Record<string, unknown> {
|
|
533
|
+
/**
|
|
534
|
+
* The currently selected value (single-select mode).
|
|
535
|
+
*/
|
|
536
|
+
value: Value | null;
|
|
537
|
+
/**
|
|
538
|
+
* The currently selected values (multi-select mode).
|
|
539
|
+
*/
|
|
540
|
+
values: Value[];
|
|
541
|
+
/**
|
|
542
|
+
* Whether the select is in multi-select mode.
|
|
543
|
+
*/
|
|
544
|
+
multiple: boolean;
|
|
545
|
+
/**
|
|
546
|
+
* Whether a value is currently selected.
|
|
547
|
+
*/
|
|
548
|
+
hasValue: boolean;
|
|
549
|
+
/**
|
|
550
|
+
* The placeholder text.
|
|
551
|
+
*/
|
|
552
|
+
placeholder: string;
|
|
553
|
+
/**
|
|
554
|
+
* Get the display content for a value.
|
|
555
|
+
* First checks the item text registry (populated when items mount),
|
|
556
|
+
* then falls back to the `items` prop passed to SelectRoot,
|
|
557
|
+
* then falls back to `itemToStringLabel` for object values.
|
|
558
|
+
*/
|
|
559
|
+
getValueText: (value: Value) => React.ReactNode | undefined;
|
|
560
|
+
}
|
|
561
|
+
interface SelectValueProps<Value = unknown> extends Omit<ComponentProps<'span', SelectValueState<Value>>, 'children'> {
|
|
562
|
+
/**
|
|
563
|
+
* Placeholder text when no value is selected.
|
|
564
|
+
* Overrides the placeholder set on Select.Root.
|
|
565
|
+
*/
|
|
566
|
+
placeholder?: string;
|
|
567
|
+
/**
|
|
568
|
+
* Custom render function for the selected value content.
|
|
569
|
+
* Receives the current state and should return the content to render.
|
|
570
|
+
* This is different from the `render` prop which replaces the element.
|
|
571
|
+
*/
|
|
572
|
+
children?: React.ReactNode | ((state: SelectValueState<Value>) => React.ReactNode);
|
|
573
|
+
}
|
|
574
|
+
declare const SelectValue: <Value = unknown>(props: SelectValueProps<Value> & React.RefAttributes<HTMLSpanElement>) => React.ReactElement;
|
|
575
|
+
declare namespace SelectValue {
|
|
576
|
+
interface Props extends SelectValueProps<unknown> {
|
|
577
|
+
}
|
|
578
|
+
type State = SelectValueState<unknown>;
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
type index_parts_SelectPopupProps = SelectPopupProps;
|
|
582
|
+
type index_parts_SelectPopupState = SelectPopupState;
|
|
583
|
+
declare const index_parts_VirtualItem: typeof VirtualItem;
|
|
584
|
+
declare namespace index_parts {
|
|
585
|
+
export { PopupMenuArrow as Arrow, PopupMenuBackdrop as Backdrop, PopupMenuEmpty as Empty, PopupMenuGroup as Group, PopupMenuGroupLabel as GroupLabel, PopupMenuIcon as Icon, PopupMenuInput as Input, SelectItem as Item, SelectItemIndicator as ItemIndicator, SelectItemLabel as ItemLabel, PopupMenuList as List, SelectPopup as Popup, PopupMenuPortal as Portal, SelectPositioner as Positioner, SelectRoot as Root, PopupMenuScrollDownArrow as ScrollDownArrow, PopupMenuScrollUpArrow as ScrollUpArrow, type index_parts_SelectPopupProps as SelectPopupProps, type index_parts_SelectPopupState as SelectPopupState, PopupMenuSeparator as Separator, SelectSurface as Surface, SelectTrigger as Trigger, SelectValue as Value, index_parts_VirtualItem as VirtualItem };
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
declare enum SelectArrowDataAttributes {
|
|
589
|
+
/**
|
|
590
|
+
* Identifies the component part.
|
|
591
|
+
* @type {'bazzaui-select-arrow'}
|
|
592
|
+
*/
|
|
593
|
+
slot = "bazzaui-select-arrow",
|
|
594
|
+
/**
|
|
595
|
+
* Present when the popup menu is open.
|
|
596
|
+
*/
|
|
597
|
+
open = "data-open",
|
|
598
|
+
/**
|
|
599
|
+
* Present when the popup menu is closed.
|
|
600
|
+
*/
|
|
601
|
+
closed = "data-closed",
|
|
602
|
+
/**
|
|
603
|
+
* Indicates which side the popup is positioned relative to the trigger.
|
|
604
|
+
* @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
|
|
605
|
+
*/
|
|
606
|
+
side = "data-side",
|
|
607
|
+
/**
|
|
608
|
+
* Indicates how the popup is aligned relative to specified side.
|
|
609
|
+
* @type {'start' | 'center' | 'end'}
|
|
610
|
+
*/
|
|
611
|
+
align = "data-align",
|
|
612
|
+
/**
|
|
613
|
+
* Present when the arrow is not centered due to collision avoidance.
|
|
614
|
+
*/
|
|
615
|
+
uncentered = "data-uncentered"
|
|
616
|
+
}
|
|
617
|
+
|
|
618
|
+
declare enum SelectBackdropDataAttributes {
|
|
619
|
+
/**
|
|
620
|
+
* Identifies the component part.
|
|
621
|
+
* @type {'bazzaui-select-backdrop'}
|
|
622
|
+
*/
|
|
623
|
+
slot = "bazzaui-select-backdrop",
|
|
624
|
+
/**
|
|
625
|
+
* Present when the popup menu is open.
|
|
626
|
+
*/
|
|
627
|
+
open = "data-open",
|
|
628
|
+
/**
|
|
629
|
+
* Present when the popup menu is closed.
|
|
630
|
+
*/
|
|
631
|
+
closed = "data-closed",
|
|
632
|
+
/**
|
|
633
|
+
* Present when the popup menu is animating in.
|
|
634
|
+
*/
|
|
635
|
+
startingStyle = "data-starting-style",
|
|
636
|
+
/**
|
|
637
|
+
* Present when the popup menu is animating out.
|
|
638
|
+
*/
|
|
639
|
+
endingStyle = "data-ending-style"
|
|
640
|
+
}
|
|
641
|
+
|
|
642
|
+
/**
|
|
643
|
+
* Data attributes applied to Select.Empty for styling.
|
|
644
|
+
* Displayed when no items match the current search filter.
|
|
645
|
+
*
|
|
646
|
+
* @example
|
|
647
|
+
* ```css
|
|
648
|
+
* [data-bazzaui-select-empty] {
|
|
649
|
+
* padding: 8px 16px;
|
|
650
|
+
* color: var(--muted);
|
|
651
|
+
* text-align: center;
|
|
652
|
+
* }
|
|
653
|
+
* ```
|
|
654
|
+
*/
|
|
655
|
+
declare enum SelectEmptyDataAttributes {
|
|
656
|
+
/**
|
|
657
|
+
* Identifies the component part.
|
|
658
|
+
* @type {'bazzaui-select-empty'}
|
|
659
|
+
*/
|
|
660
|
+
slot = "bazzaui-select-empty"
|
|
661
|
+
}
|
|
662
|
+
|
|
663
|
+
declare enum SelectGroupDataAttributes {
|
|
664
|
+
/**
|
|
665
|
+
* Identifies the component part.
|
|
666
|
+
* @type {'bazzaui-select-group'}
|
|
667
|
+
*/
|
|
668
|
+
slot = "bazzaui-select-group"
|
|
669
|
+
}
|
|
670
|
+
|
|
671
|
+
declare enum SelectGroupLabelDataAttributes {
|
|
672
|
+
/**
|
|
673
|
+
* Identifies the component part.
|
|
674
|
+
* @type {'bazzaui-select-group-label'}
|
|
675
|
+
*/
|
|
676
|
+
slot = "bazzaui-select-group-label"
|
|
677
|
+
}
|
|
678
|
+
|
|
679
|
+
declare const SelectIconDataAttributes: {
|
|
680
|
+
/**
|
|
681
|
+
* Identifies the component part.
|
|
682
|
+
* @type {'bazzaui-select-icon'}
|
|
683
|
+
*/
|
|
684
|
+
readonly slot: "bazzaui-select-icon";
|
|
685
|
+
/** Present when the popup is open. */
|
|
686
|
+
readonly open: "data-popup-open";
|
|
687
|
+
};
|
|
688
|
+
|
|
689
|
+
declare enum SelectInputDataAttributes {
|
|
690
|
+
/**
|
|
691
|
+
* Identifies the component part.
|
|
692
|
+
* @type {'bazzaui-select-input'}
|
|
693
|
+
*/
|
|
694
|
+
slot = "bazzaui-select-input",
|
|
695
|
+
/**
|
|
696
|
+
* Present when the popup menu is open.
|
|
697
|
+
*/
|
|
698
|
+
open = "data-open",
|
|
699
|
+
/**
|
|
700
|
+
* Present when the popup menu is closed.
|
|
701
|
+
*/
|
|
702
|
+
closed = "data-closed"
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
/**
|
|
706
|
+
* Data attributes applied to Select.List for styling.
|
|
707
|
+
* Container for select items with role="listbox".
|
|
708
|
+
*
|
|
709
|
+
* @example
|
|
710
|
+
* ```css
|
|
711
|
+
* [data-bazzaui-select-list] {
|
|
712
|
+
* max-height: 300px;
|
|
713
|
+
* overflow-y: auto;
|
|
714
|
+
* }
|
|
715
|
+
* ```
|
|
716
|
+
*/
|
|
717
|
+
declare enum SelectListDataAttributes {
|
|
718
|
+
/**
|
|
719
|
+
* Identifies the component part.
|
|
720
|
+
* @type {'bazzaui-select-list'}
|
|
721
|
+
*/
|
|
722
|
+
slot = "bazzaui-select-list",
|
|
723
|
+
/**
|
|
724
|
+
* Always present on the list element.
|
|
725
|
+
* Used for styling and by useStickyRowWidth to find the list container.
|
|
726
|
+
*/
|
|
727
|
+
list = "data-popup-menu-list"
|
|
728
|
+
}
|
|
729
|
+
|
|
730
|
+
/**
|
|
731
|
+
* Select-specific popup data attributes (in addition to PopupMenuPopupDataAttributes).
|
|
732
|
+
*/
|
|
733
|
+
declare enum SelectPopupDataAttributes {
|
|
734
|
+
/**
|
|
735
|
+
* Present when the popup is using align-item-with-trigger positioning.
|
|
736
|
+
* This reflects the actual state, not just the prop value.
|
|
737
|
+
*/
|
|
738
|
+
alignItemWithTrigger = "data-align-item-with-trigger"
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
declare const SelectScrollArrowDataAttributes: {
|
|
742
|
+
/**
|
|
743
|
+
* Identifies the component part for scroll up arrow.
|
|
744
|
+
* @type {'bazzaui-select-scroll-up-arrow'}
|
|
745
|
+
*/
|
|
746
|
+
readonly slotUp: "bazzaui-select-scroll-up-arrow";
|
|
747
|
+
/**
|
|
748
|
+
* Identifies the component part for scroll down arrow.
|
|
749
|
+
* @type {'bazzaui-select-scroll-down-arrow'}
|
|
750
|
+
*/
|
|
751
|
+
readonly slotDown: "bazzaui-select-scroll-down-arrow";
|
|
752
|
+
/**
|
|
753
|
+
* Direction of the scroll arrow.
|
|
754
|
+
* @type {'up' | 'down'}
|
|
755
|
+
*/
|
|
756
|
+
readonly direction: "data-direction";
|
|
757
|
+
/**
|
|
758
|
+
* Side of the popup.
|
|
759
|
+
* @type {'top' | 'bottom' | 'left' | 'right'}
|
|
760
|
+
*/
|
|
761
|
+
readonly side: "data-side";
|
|
762
|
+
};
|
|
763
|
+
|
|
764
|
+
declare enum SelectSeparatorDataAttributes {
|
|
765
|
+
/**
|
|
766
|
+
* Identifies the component part.
|
|
767
|
+
* @type {'bazzaui-select-separator'}
|
|
768
|
+
*/
|
|
769
|
+
slot = "bazzaui-select-separator"
|
|
770
|
+
}
|
|
771
|
+
|
|
772
|
+
/**
|
|
773
|
+
* Item text registry for displaying selected values.
|
|
774
|
+
* Maps serialized item value to its text content.
|
|
775
|
+
*/
|
|
776
|
+
type ItemTextRegistry = Map<string, string>;
|
|
777
|
+
/**
|
|
778
|
+
* Context value for Select components.
|
|
779
|
+
* Provides value state, callbacks, and form integration.
|
|
780
|
+
*
|
|
781
|
+
* @template Value - The type of the select value (can be a primitive or object)
|
|
782
|
+
*/
|
|
783
|
+
interface SelectContextValue<Value = unknown> {
|
|
784
|
+
/** Whether multi-select mode is enabled */
|
|
785
|
+
multiple: boolean;
|
|
786
|
+
/** Current selected value (single-select mode) */
|
|
787
|
+
value: Value | null;
|
|
788
|
+
/** Current selected values (multi-select mode) */
|
|
789
|
+
values: Value[];
|
|
790
|
+
/** Callback when value changes (single-select mode) */
|
|
791
|
+
onValueChange: (value: Value) => void;
|
|
792
|
+
/** Callback when values change (multi-select mode) */
|
|
793
|
+
onValuesChange: (values: Value[]) => void;
|
|
794
|
+
/**
|
|
795
|
+
* Custom comparison logic used to determine if a select item value
|
|
796
|
+
* matches the current selected value.
|
|
797
|
+
* Useful when item values are objects without matching referentially.
|
|
798
|
+
* Defaults to Object.is comparison.
|
|
799
|
+
*/
|
|
800
|
+
isItemEqualToValue: ItemEqualityComparer<Value>;
|
|
801
|
+
/**
|
|
802
|
+
* When the item values are objects, this function converts the object
|
|
803
|
+
* value to a string representation for display in the trigger.
|
|
804
|
+
* If the shape of the object is { value, label }, the label will be
|
|
805
|
+
* used automatically without needing to specify this prop.
|
|
806
|
+
*/
|
|
807
|
+
itemToStringLabel?: (itemValue: Value) => string;
|
|
808
|
+
/**
|
|
809
|
+
* When the item values are objects, this function converts the object
|
|
810
|
+
* value to a string representation for form submission.
|
|
811
|
+
* If the shape of the object is { value, label }, the value will be
|
|
812
|
+
* used automatically without needing to specify this prop.
|
|
813
|
+
*/
|
|
814
|
+
itemToStringValue?: (itemValue: Value) => string;
|
|
815
|
+
/** Form field name for submission */
|
|
816
|
+
name?: string;
|
|
817
|
+
/** Associate with a form by ID */
|
|
818
|
+
form?: string;
|
|
819
|
+
/** Whether this field is required */
|
|
820
|
+
required?: boolean;
|
|
821
|
+
/** Whether the select is disabled */
|
|
822
|
+
disabled: boolean;
|
|
823
|
+
/** Placeholder text when no value selected */
|
|
824
|
+
placeholder: string;
|
|
825
|
+
/** Registry of item values to their text content */
|
|
826
|
+
itemTextRegistry: ItemTextRegistry;
|
|
827
|
+
/** Register an item's text content */
|
|
828
|
+
registerItemText: (value: string, text: string) => () => void;
|
|
829
|
+
/**
|
|
830
|
+
* Data structure of the items for label resolution.
|
|
831
|
+
* Used to display labels before items mount (e.g., on initial render with defaultValue).
|
|
832
|
+
* Can be a record mapping values to labels, or an array of { value, label } objects.
|
|
833
|
+
*/
|
|
834
|
+
items?: Record<string, React.ReactNode> | Array<{
|
|
835
|
+
value: string;
|
|
836
|
+
label: React.ReactNode;
|
|
837
|
+
}>;
|
|
838
|
+
/** ID for the listbox element */
|
|
839
|
+
listId: string;
|
|
840
|
+
/** Ref to the trigger element */
|
|
841
|
+
triggerRef: React.RefObject<HTMLElement | null>;
|
|
842
|
+
/** Ref to the value display element (text in trigger) */
|
|
843
|
+
valueRef: React.RefObject<HTMLElement | null>;
|
|
844
|
+
/** Ref to the selected item's text element */
|
|
845
|
+
selectedItemTextRef: React.MutableRefObject<HTMLElement | null>;
|
|
846
|
+
/** Ref to the first item's text element (used when no selection for alignItemWithTrigger) */
|
|
847
|
+
firstItemTextRef: React.MutableRefObject<HTMLElement | null>;
|
|
848
|
+
/** Callback to set the trigger element */
|
|
849
|
+
setTriggerElement: (element: HTMLElement | null) => void;
|
|
850
|
+
/** Callback to set the value element */
|
|
851
|
+
setValueElement: (element: HTMLElement | null) => void;
|
|
852
|
+
/** Register a callback to reset positioning state after close animation */
|
|
853
|
+
registerResetPositioningCallback: (callback: (() => void) | null) => () => void;
|
|
854
|
+
}
|
|
855
|
+
/**
|
|
856
|
+
* Hook to access the Select context.
|
|
857
|
+
* Throws if used outside a Select.Root.
|
|
858
|
+
*/
|
|
859
|
+
declare function useSelectContext<Value = unknown>(): SelectContextValue<Value>;
|
|
860
|
+
/**
|
|
861
|
+
* Hook to optionally access the Select context.
|
|
862
|
+
* Returns null if used outside a Select.Root.
|
|
863
|
+
*/
|
|
864
|
+
declare function useMaybeSelectContext<Value = unknown>(): SelectContextValue<Value> | null;
|
|
865
|
+
|
|
866
|
+
type Side = 'top' | 'bottom' | 'left' | 'right';
|
|
867
|
+
type Align = 'start' | 'center' | 'end';
|
|
868
|
+
/**
|
|
869
|
+
* Context value for Select Positioner.
|
|
870
|
+
* Provides alignment state for coordinating positioning behavior.
|
|
871
|
+
*/
|
|
872
|
+
interface SelectPositionerContextValue {
|
|
873
|
+
/**
|
|
874
|
+
* Whether alignItemWithTrigger is actively being used.
|
|
875
|
+
* This may be false even if the prop is true (e.g., fallback scenarios).
|
|
876
|
+
*/
|
|
877
|
+
alignItemWithTriggerActive: boolean;
|
|
878
|
+
/**
|
|
879
|
+
* The rendered side of the popup (or 'none' when using align-item-with-trigger).
|
|
880
|
+
*/
|
|
881
|
+
side: Side | 'none';
|
|
882
|
+
/**
|
|
883
|
+
* The rendered alignment of the popup.
|
|
884
|
+
*/
|
|
885
|
+
align: Align;
|
|
886
|
+
/**
|
|
887
|
+
* Ref for the scroll up arrow element.
|
|
888
|
+
*/
|
|
889
|
+
scrollUpArrowRef: React.RefObject<HTMLDivElement | null>;
|
|
890
|
+
/**
|
|
891
|
+
* Ref for the scroll down arrow element.
|
|
892
|
+
*/
|
|
893
|
+
scrollDownArrowRef: React.RefObject<HTMLDivElement | null>;
|
|
894
|
+
/**
|
|
895
|
+
* Callback to disable alignItemWithTrigger (fallback to normal positioning).
|
|
896
|
+
*/
|
|
897
|
+
setAlignItemWithTriggerActive: (active: boolean) => void;
|
|
898
|
+
/**
|
|
899
|
+
* Callback to reset positioning state after close animation completes.
|
|
900
|
+
* This preserves positioning during exit animations.
|
|
901
|
+
*/
|
|
902
|
+
resetPositioningState: () => void;
|
|
903
|
+
}
|
|
904
|
+
/**
|
|
905
|
+
* Hook to access the Select Positioner context.
|
|
906
|
+
* Returns null if used outside a SelectPositioner.
|
|
907
|
+
*/
|
|
908
|
+
declare function useSelectPositionerContext(): SelectPositionerContextValue | null;
|
|
909
|
+
|
|
910
|
+
interface SelectItemContextValue<Value = unknown> {
|
|
911
|
+
/** Unique ID for this item (for DOM id attribute) */
|
|
912
|
+
id: string;
|
|
913
|
+
/** The value of this item */
|
|
914
|
+
value: Value;
|
|
915
|
+
/** The text value/label for this item */
|
|
916
|
+
textValue: string | undefined;
|
|
917
|
+
/** Whether the item is highlighted */
|
|
918
|
+
highlighted: boolean;
|
|
919
|
+
/** Whether the item is disabled */
|
|
920
|
+
disabled: boolean;
|
|
921
|
+
/** Whether the item is selected */
|
|
922
|
+
selected: boolean;
|
|
923
|
+
}
|
|
924
|
+
declare function useSelectItemContext<Value = unknown>(): SelectItemContextValue<Value>;
|
|
925
|
+
declare function useMaybeSelectItemContext<Value = unknown>(): SelectItemContextValue<Value> | null;
|
|
926
|
+
|
|
927
|
+
export { index_parts as Select, PopupMenuArrow as SelectArrow, SelectArrowDataAttributes, PopupMenuBackdrop as SelectBackdrop, SelectBackdropDataAttributes, type SelectContextValue, PopupMenuEmpty as SelectEmpty, SelectEmptyDataAttributes, PopupMenuGroup as SelectGroup, SelectGroupDataAttributes, PopupMenuGroupLabel as SelectGroupLabel, SelectGroupLabelDataAttributes, SelectIconDataAttributes, PopupMenuInput as SelectInput, SelectInputDataAttributes, SelectItem, type SelectItemContextValue, SelectItemDataAttributes, SelectItemIndicator, SelectItemIndicatorDataAttributes, type SelectItemIndicatorProps, type SelectItemIndicatorState, SelectItemLabel, type SelectItemLabelProps, type SelectItemProps, type SelectItemState, PopupMenuList as SelectList, SelectListDataAttributes, SelectPopup, SelectPopupDataAttributes, type SelectPopupProps, type SelectPopupState, PopupMenuPortal as SelectPortal, SelectPositioner, type Align as SelectPositionerAlign, type SelectPositionerContextValue, SelectPositionerDataAttributes, type SelectPositionerProps, type Side as SelectPositionerSide, SelectRoot, type SelectRootProps, SelectScrollArrowDataAttributes, PopupMenuSeparator as SelectSeparator, SelectSeparatorDataAttributes, SelectSurface, type SelectSurfaceProps, SelectTrigger, SelectTriggerDataAttributes, type SelectTriggerProps, type SelectTriggerState, SelectValue, type SelectValueProps, type SelectValueState, VirtualItem as SelectVirtualItem, useMaybeSelectContext, useMaybeSelectItemContext, useSelectContext, useSelectItemContext, useSelectPositionerContext };
|