@wix/site-ui 1.82.0 → 1.84.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,1652 @@
1
+ import type { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
2
+ import { Padding } from '@floating-ui/react-dom';
3
+ import * as React_2 from 'react';
4
+ import { Rect } from '@floating-ui/utils';
5
+ import { SelectArrowProps as SelectArrowProps_2 } from '@base-ui/react/select';
6
+ import { SelectBackdropProps as SelectBackdropProps_2 } from '@base-ui/react/select';
7
+ import { SelectGroupLabelProps as SelectGroupLabelProps_2 } from '@base-ui/react/select';
8
+ import { SelectGroupProps as SelectGroupProps_2 } from '@base-ui/react/select';
9
+ import { SelectIconProps as SelectIconProps_2 } from '@base-ui/react/select';
10
+ import { SelectItemIndicatorProps as SelectItemIndicatorProps_2 } from '@base-ui/react/select';
11
+ import { SelectItemProps as SelectItemProps_2 } from '@base-ui/react/select';
12
+ import { SelectItemTextProps as SelectItemTextProps_2 } from '@base-ui/react/select';
13
+ import { SelectLabelProps as SelectLabelProps_2 } from '@base-ui/react/select';
14
+ import { SelectListProps as SelectListProps_2 } from '@base-ui/react/select';
15
+ import { SelectPopupProps as SelectPopupProps_2 } from '@base-ui/react/select';
16
+ import { SelectPortalProps as SelectPortalProps_2 } from '@base-ui/react/select';
17
+ import { SelectPositionerProps as SelectPositionerProps_2 } from '@base-ui/react/select';
18
+ import { SelectScrollDownArrowProps as SelectScrollDownArrowProps_2 } from '@base-ui/react/select';
19
+ import { SelectScrollUpArrowProps as SelectScrollUpArrowProps_2 } from '@base-ui/react/select';
20
+ import { SelectTriggerProps as SelectTriggerProps_2 } from '@base-ui/react/select';
21
+ import { SelectValueProps as SelectValueProps_2 } from '@base-ui/react/select';
22
+ import { SeparatorProps as SeparatorProps_2 } from '@base-ui/react';
23
+ import { VirtualElement } from '@floating-ui/react-dom';
24
+
25
+ declare type Align = 'start' | 'center' | 'end';
26
+
27
+ declare type BaseUIChangeEventDetail<Reason extends string, CustomProperties extends object> = {
28
+ /**
29
+ * The reason for the event.
30
+ */
31
+ reason: Reason;
32
+ /**
33
+ * The native event associated with the custom event.
34
+ */
35
+ event: ReasonToEvent<Reason>;
36
+ /**
37
+ * Cancels Base UI from handling the event.
38
+ */
39
+ cancel: () => void;
40
+ /**
41
+ * Allows the event to propagate in cases where Base UI will stop the propagation.
42
+ */
43
+ allowPropagation: () => void;
44
+ /**
45
+ * Indicates whether the event has been canceled.
46
+ */
47
+ isCanceled: boolean;
48
+ /**
49
+ * Indicates whether the event is allowed to propagate.
50
+ */
51
+ isPropagationAllowed: boolean;
52
+ /**
53
+ * The element that triggered the event, if applicable.
54
+ */
55
+ trigger: Element | undefined;
56
+ } & CustomProperties;
57
+
58
+ /**
59
+ * Details of custom change events emitted by Base UI components.
60
+ */
61
+ declare type BaseUIChangeEventDetails<Reason extends string, CustomProperties extends object = {}> = Reason extends string ? BaseUIChangeEventDetail<Reason, CustomProperties> & {} : never;
62
+
63
+ /**
64
+ * Props shared by all Base UI components.
65
+ * Contains `className` (string or callback taking the component's state as an argument) and `render` (function to customize rendering).
66
+ */
67
+ declare type BaseUIComponentProps<ElementType extends React_2.ElementType, State, RenderFunctionProps = HTMLProps> = Omit<WithBaseUIEvent<React_2.ComponentPropsWithRef<ElementType>>, 'className' | 'color' | 'defaultValue' | 'defaultChecked' | 'style'> & {
68
+ /**
69
+ * CSS class applied to the element, or a function that
70
+ * returns a class based on the component's state.
71
+ */
72
+ className?: string | ((state: State) => string | undefined) | undefined;
73
+ /**
74
+ * Allows you to replace the component's HTML element
75
+ * with a different tag, or compose it with another component.
76
+ *
77
+ * Accepts a `ReactElement` or a function that returns the element to render.
78
+ */
79
+ render?: React_2.ReactElement | ComponentRenderFn<RenderFunctionProps, State> | undefined;
80
+ /**
81
+ * Style applied to the element, or a function that
82
+ * returns a style object based on the component's state.
83
+ */
84
+ style?: React_2.CSSProperties | ((state: State) => React_2.CSSProperties | undefined) | undefined;
85
+ };
86
+
87
+ declare type BaseUIEvent<E extends React_2.SyntheticEvent<Element, Event>> = E & {
88
+ preventBaseUIHandler: () => void;
89
+ readonly baseUIHandlerPrevented?: boolean | undefined;
90
+ };
91
+
92
+ /**
93
+ * Details of custom generic events emitted by Base UI components.
94
+ */
95
+ declare type BaseUIGenericEventDetail<Reason extends string, CustomProperties extends object> = {
96
+ /**
97
+ * The reason for the event.
98
+ */
99
+ reason: Reason;
100
+ /**
101
+ * The native event associated with the custom event.
102
+ */
103
+ event: ReasonToEvent<Reason>;
104
+ } & CustomProperties;
105
+
106
+ declare type BaseUIGenericEventDetails<Reason extends string, CustomProperties extends object = {}> = Reason extends string ? BaseUIGenericEventDetail<Reason, CustomProperties> & {} : never;
107
+
108
+ declare type Boundary = 'clipping-ancestors' | Element | Element[] | Rect;
109
+
110
+ declare const cancelOpen: "cancel-open";
111
+
112
+ declare const chipRemovePress: "chip-remove-press";
113
+
114
+ declare const clearPress: "clear-press";
115
+
116
+ declare const closePress: "close-press";
117
+
118
+ declare const closeWatcher: "close-watcher";
119
+
120
+ declare type CollisionAvoidance = SideFlipMode | SideShiftMode;
121
+
122
+ /**
123
+ * Shape of the render prop: a function that takes props to be spread on the element and component's state and returns a React element.
124
+ *
125
+ * @template Props Props to be spread on the rendered element.
126
+ * @template State Component's internal state.
127
+ */
128
+ declare type ComponentRenderFn<Props, State> = (props: Props, state: State) => React_2.ReactElement<unknown>;
129
+
130
+ declare const decrementPress: "decrement-press";
131
+
132
+ declare const disabled: "disabled";
133
+
134
+ declare const drag: "drag";
135
+
136
+ declare type Errors = Record<string, string | string[]>;
137
+
138
+ declare const escapeKey: "escape-key";
139
+
140
+ /**
141
+ * Groups all parts of the field.
142
+ * Renders a `<div>` element.
143
+ *
144
+ * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
145
+ */
146
+ declare const FieldRoot: React_2.ForwardRefExoticComponent<Omit<FieldRootProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
147
+
148
+ declare namespace FieldRoot {
149
+ type State = FieldRootState;
150
+ type Props = FieldRootProps;
151
+ type Actions = FieldRootActions;
152
+ }
153
+
154
+ declare interface FieldRootActions {
155
+ validate: () => void;
156
+ }
157
+
158
+ declare interface FieldRootProps extends BaseUIComponentProps<'div', FieldRootState> {
159
+ /**
160
+ * Whether the component should ignore user interaction.
161
+ * Takes precedence over the `disabled` prop on the `<Field.Control>` component.
162
+ * @default false
163
+ */
164
+ disabled?: boolean | undefined;
165
+ /**
166
+ * Identifies the field when a form is submitted.
167
+ * Takes precedence over the `name` prop on the `<Field.Control>` component.
168
+ */
169
+ name?: string | undefined;
170
+ /**
171
+ * A function for custom validation. Return a string or an array of strings with
172
+ * the error message(s) if the value is invalid, or `null` if the value is valid.
173
+ * Asynchronous functions are supported, but they do not prevent form submission
174
+ * when using `validationMode="onSubmit"`.
175
+ */
176
+ validate?: ((value: unknown, formValues: Form.Values) => string | string[] | null | Promise<string | string[] | null>) | undefined;
177
+ /**
178
+ * Determines when the field should be validated.
179
+ * This takes precedence over the `validationMode` prop on `<Form>`.
180
+ *
181
+ * - `onSubmit`: triggers validation when the form is submitted, and re-validates on change after submission.
182
+ * - `onBlur`: triggers validation when the control loses focus.
183
+ * - `onChange`: triggers validation on every change to the control value.
184
+ *
185
+ * @default 'onSubmit'
186
+ */
187
+ validationMode?: Form.ValidationMode | undefined;
188
+ /**
189
+ * How long to wait between `validate` callbacks if
190
+ * `validationMode="onChange"` is used. Specified in milliseconds.
191
+ * @default 0
192
+ */
193
+ validationDebounceTime?: number | undefined;
194
+ /**
195
+ * Whether the field is invalid.
196
+ * Useful when the field state is controlled by an external library.
197
+ */
198
+ invalid?: boolean | undefined;
199
+ /**
200
+ * Whether the field's value has been changed from its initial value.
201
+ * Useful when the field state is controlled by an external library.
202
+ */
203
+ dirty?: boolean | undefined;
204
+ /**
205
+ * Whether the field has been touched.
206
+ * Useful when the field state is controlled by an external library.
207
+ */
208
+ touched?: boolean | undefined;
209
+ /**
210
+ * A ref to imperative actions.
211
+ * - `validate`: Validates the field when called.
212
+ */
213
+ actionsRef?: React_2.RefObject<FieldRoot.Actions | null> | undefined;
214
+ }
215
+
216
+ declare interface FieldRootState {
217
+ /**
218
+ * Whether the component should ignore user interaction.
219
+ */
220
+ disabled: boolean;
221
+ /**
222
+ * Whether the field has been touched.
223
+ */
224
+ touched: boolean;
225
+ /**
226
+ * Whether the field value has changed from its initial value.
227
+ */
228
+ dirty: boolean;
229
+ /**
230
+ * Whether the field is valid.
231
+ */
232
+ valid: boolean | null;
233
+ /**
234
+ * Whether the field has a value.
235
+ */
236
+ filled: boolean;
237
+ /**
238
+ * Whether the field is focused.
239
+ */
240
+ focused: boolean;
241
+ }
242
+
243
+ declare interface FieldValidityData {
244
+ state: {
245
+ badInput: boolean;
246
+ customError: boolean;
247
+ patternMismatch: boolean;
248
+ rangeOverflow: boolean;
249
+ rangeUnderflow: boolean;
250
+ stepMismatch: boolean;
251
+ tooLong: boolean;
252
+ tooShort: boolean;
253
+ typeMismatch: boolean;
254
+ valueMissing: boolean;
255
+ valid: boolean | null;
256
+ };
257
+ error: string;
258
+ errors: string[];
259
+ value: unknown;
260
+ initialValue: unknown;
261
+ }
262
+
263
+ /**
264
+ * Portals the floating element into a given container element — by default,
265
+ * outside of the app root and into the body.
266
+ * This is necessary to ensure the floating element can appear outside any
267
+ * potential parent containers that cause clipping (such as `overflow: hidden`),
268
+ * while retaining its location in the React tree.
269
+ * @see https://floating-ui.com/docs/FloatingPortal
270
+ * @internal
271
+ */
272
+ declare const FloatingPortal: React_2.ForwardRefExoticComponent<Omit<FloatingPortal.Props<any> & {
273
+ renderGuards?: boolean | undefined;
274
+ }, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
275
+
276
+ declare namespace FloatingPortal {
277
+ type State = FloatingPortalState;
278
+ interface Props<TState> extends BaseUIComponentProps<'div', TState> {
279
+ /**
280
+ * A parent element to render the portal element into.
281
+ */
282
+ container?: UseFloatingPortalNodeProps['container'] | undefined;
283
+ }
284
+ }
285
+
286
+ declare interface FloatingPortalState {}
287
+
288
+ declare const focusOut: "focus-out";
289
+
290
+ /**
291
+ * A native form element with consolidated error handling.
292
+ * Renders a `<form>` element.
293
+ *
294
+ * Documentation: [Base UI Form](https://base-ui.com/react/components/form)
295
+ */
296
+ declare const Form: {
297
+ <FormValues extends Record<string, any> = Record<string, any>>(props: Form.Props<FormValues> & {
298
+ ref?: React_2.Ref<HTMLFormElement> | undefined;
299
+ }): React_2.JSX.Element;
300
+ };
301
+
302
+ declare namespace Form {
303
+ type Props<FormValues extends Record<string, any> = Record<string, any>> = FormProps<FormValues>;
304
+ type State = FormState;
305
+ type Actions = FormActions;
306
+ type ValidationMode = FormValidationMode;
307
+ type SubmitEventReason = FormSubmitEventReason;
308
+ type SubmitEventDetails = FormSubmitEventDetails;
309
+ type Values<FormValues extends Record<string, any> = Record<string, any>> = FormValues;
310
+ }
311
+
312
+ declare interface FormActions {
313
+ validate: (fieldName?: string | undefined) => void;
314
+ }
315
+
316
+ declare interface FormContext {
317
+ errors: Errors;
318
+ clearErrors: (name: string | undefined) => void;
319
+ formRef: React_2.RefObject<{
320
+ fields: Map<string, {
321
+ name: string | undefined;
322
+ /**
323
+ * After this returns, the field registry entry reflects the latest synchronous
324
+ * validity verdict. Async validators do not block submit.
325
+ */
326
+ validate: () => void;
327
+ validityData: FieldValidityData;
328
+ controlRef: React_2.RefObject<HTMLElement | null>;
329
+ getValue: () => unknown;
330
+ }>;
331
+ }>;
332
+ validationMode: Form.ValidationMode;
333
+ submitAttemptedRef: React_2.RefObject<boolean>;
334
+ }
335
+
336
+ declare const FormContext: React_2.Context<FormContext>;
337
+
338
+ declare interface FormProps<FormValues extends Record<string, any> = Record<string, any>> extends BaseUIComponentProps<'form', FormState> {
339
+ /**
340
+ * Determines when the form should be validated.
341
+ * The `validationMode` prop on `<Field.Root>` takes precedence over this.
342
+ *
343
+ * - `onSubmit` (default): validates the field when the form is submitted, afterwards fields will re-validate on change.
344
+ * - `onBlur`: validates a field when it loses focus.
345
+ * - `onChange`: validates the field on every change to its value.
346
+ *
347
+ * @default 'onSubmit'
348
+ */
349
+ validationMode?: FormValidationMode | undefined;
350
+ /**
351
+ * Validation errors returned externally, typically after submission by a server or a form action.
352
+ * This should be an object where keys correspond to the `name` attribute on `<Field.Root>`,
353
+ * and values correspond to error(s) related to that field.
354
+ */
355
+ errors?: FormContext['errors'] | undefined;
356
+ /**
357
+ * Event handler called when the form is submitted.
358
+ * `preventDefault()` is called on the native submit event when used.
359
+ */
360
+ onFormSubmit?: ((formValues: FormValues, eventDetails: Form.SubmitEventDetails) => void) | undefined;
361
+ /**
362
+ * A ref to imperative actions.
363
+ * - `validate`: Validates all fields when called. Optionally pass a field name to validate a single field.
364
+ * @example
365
+ * ```tsx
366
+ * // validate all fields
367
+ * actionsRef.current.validate();
368
+ *
369
+ * // validate one field
370
+ * actionsRef.current.validate('email');
371
+ * ```
372
+ */
373
+ actionsRef?: React_2.RefObject<Form.Actions | null> | undefined;
374
+ }
375
+
376
+ declare interface FormState {}
377
+
378
+ declare type FormSubmitEventDetails = BaseUIGenericEventDetails<Form.SubmitEventReason>;
379
+
380
+ declare type FormSubmitEventReason = typeof REASONS.none;
381
+
382
+ declare type FormValidationMode = 'onSubmit' | 'onBlur' | 'onChange';
383
+
384
+ declare interface Group<Item = any> {
385
+ [key: string]: unknown;
386
+ items: ReadonlyArray<Item>;
387
+ }
388
+
389
+ declare type HTMLProps<T = any> = React_2.HTMLAttributes<T> & {
390
+ ref?: React_2.Ref<T> | undefined;
391
+ };
392
+
393
+ declare const imperativeAction: "imperative-action";
394
+
395
+ declare const incrementPress: "increment-press";
396
+
397
+ declare const initial: "initial";
398
+
399
+ declare const inputBlur: "input-blur";
400
+
401
+ declare const inputChange: "input-change";
402
+
403
+ declare const inputClear: "input-clear";
404
+
405
+ declare const inputPaste: "input-paste";
406
+
407
+ declare const inputPress: "input-press";
408
+
409
+ declare const itemPress: "item-press";
410
+
411
+ declare const keyboard: "keyboard";
412
+
413
+ declare const linkPress: "link-press";
414
+
415
+ declare const listNavigation: "list-navigation";
416
+
417
+ declare const missing: "missing";
418
+
419
+ declare interface NativeButtonProps {
420
+ /**
421
+ * Whether the component renders a native `<button>` element when replacing it
422
+ * via the `render` prop.
423
+ * Set to `false` if the rendered element is not a button (for example, `<div>`).
424
+ * @default true
425
+ */
426
+ nativeButton?: boolean | undefined;
427
+ }
428
+
429
+ declare const none: "none";
430
+
431
+ declare interface NonNativeButtonProps {
432
+ /**
433
+ * Whether the component renders a native `<button>` element when replacing it
434
+ * via the `render` prop.
435
+ * Set to `true` if the rendered element is a native button.
436
+ * @default false
437
+ */
438
+ nativeButton?: boolean | undefined;
439
+ }
440
+
441
+ declare type OffsetFunction = (data: {
442
+ side: Side;
443
+ align: Align;
444
+ anchor: {
445
+ width: number;
446
+ height: number;
447
+ };
448
+ positioner: {
449
+ width: number;
450
+ height: number;
451
+ };
452
+ }) => number;
453
+
454
+ declare type Orientation = 'horizontal' | 'vertical';
455
+
456
+ declare const outsidePress: "outside-press";
457
+
458
+ declare const pointer: "pointer";
459
+
460
+ declare namespace REASONS {
461
+ export {
462
+ none,
463
+ triggerPress,
464
+ triggerHover,
465
+ triggerFocus,
466
+ outsidePress,
467
+ itemPress,
468
+ closePress,
469
+ linkPress,
470
+ clearPress,
471
+ chipRemovePress,
472
+ trackPress,
473
+ incrementPress,
474
+ decrementPress,
475
+ inputChange,
476
+ inputClear,
477
+ inputBlur,
478
+ inputPaste,
479
+ inputPress,
480
+ focusOut,
481
+ escapeKey,
482
+ closeWatcher,
483
+ listNavigation,
484
+ keyboard,
485
+ pointer,
486
+ drag,
487
+ wheel,
488
+ scrub,
489
+ cancelOpen,
490
+ siblingOpen,
491
+ disabled,
492
+ missing,
493
+ initial,
494
+ imperativeAction,
495
+ swipe,
496
+ windowResize
497
+ }
498
+ }
499
+
500
+ /**
501
+ * Maps a change `reason` string to the corresponding native event type.
502
+ */
503
+ declare type ReasonToEvent<Reason extends string> = Reason extends keyof ReasonToEventMap ? ReasonToEventMap[Reason] : Event;
504
+
505
+ declare interface ReasonToEventMap {
506
+ [REASONS.none]: Event;
507
+ [REASONS.triggerPress]: MouseEvent | PointerEvent | TouchEvent | KeyboardEvent;
508
+ [REASONS.triggerHover]: MouseEvent;
509
+ [REASONS.triggerFocus]: FocusEvent;
510
+ [REASONS.outsidePress]: MouseEvent | PointerEvent | TouchEvent;
511
+ [REASONS.itemPress]: MouseEvent | KeyboardEvent | PointerEvent;
512
+ [REASONS.closePress]: MouseEvent | KeyboardEvent | PointerEvent;
513
+ [REASONS.linkPress]: MouseEvent | PointerEvent;
514
+ [REASONS.clearPress]: PointerEvent | MouseEvent | KeyboardEvent;
515
+ [REASONS.chipRemovePress]: PointerEvent | MouseEvent | KeyboardEvent;
516
+ [REASONS.trackPress]: PointerEvent | MouseEvent | TouchEvent;
517
+ [REASONS.incrementPress]: PointerEvent | MouseEvent | TouchEvent;
518
+ [REASONS.decrementPress]: PointerEvent | MouseEvent | TouchEvent;
519
+ [REASONS.inputChange]: InputEvent | Event;
520
+ [REASONS.inputClear]: InputEvent | FocusEvent | Event;
521
+ [REASONS.inputBlur]: FocusEvent;
522
+ [REASONS.inputPaste]: ClipboardEvent;
523
+ [REASONS.inputPress]: MouseEvent | PointerEvent | TouchEvent | KeyboardEvent;
524
+ [REASONS.focusOut]: FocusEvent | KeyboardEvent;
525
+ [REASONS.escapeKey]: KeyboardEvent;
526
+ [REASONS.closeWatcher]: Event;
527
+ [REASONS.listNavigation]: KeyboardEvent;
528
+ [REASONS.keyboard]: KeyboardEvent;
529
+ [REASONS.pointer]: PointerEvent;
530
+ [REASONS.drag]: PointerEvent | TouchEvent;
531
+ [REASONS.swipe]: PointerEvent | TouchEvent;
532
+ [REASONS.wheel]: WheelEvent;
533
+ [REASONS.scrub]: PointerEvent;
534
+ [REASONS.cancelOpen]: MouseEvent;
535
+ [REASONS.siblingOpen]: Event;
536
+ [REASONS.disabled]: Event;
537
+ [REASONS.missing]: Event;
538
+ [REASONS.initial]: Event;
539
+ [REASONS.imperativeAction]: Event;
540
+ [REASONS.windowResize]: UIEvent;
541
+ }
542
+
543
+ declare type RootOwnProps = Omit<React_2.ComponentProps<typeof Select.Root>, 'children'>;
544
+
545
+ declare const scrub: "scrub";
546
+
547
+ declare const Select: {
548
+ Root: typeof Select_2.Root;
549
+ Label: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectLabelProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
550
+ className?: string | undefined;
551
+ } & React_2.RefAttributes<HTMLDivElement>>;
552
+ Trigger: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectTriggerProps_2, "ref"> & React_2.RefAttributes<HTMLButtonElement>, "ref">, "className"> & {
553
+ className?: string | undefined;
554
+ } & React_2.RefAttributes<HTMLButtonElement>>;
555
+ Value: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectValueProps_2, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
556
+ className?: string | undefined;
557
+ } & React_2.RefAttributes<HTMLSpanElement>>;
558
+ Icon: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectIconProps_2, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
559
+ className?: string | undefined;
560
+ } & React_2.RefAttributes<HTMLSpanElement>>;
561
+ Portal: React_2.ForwardRefExoticComponent<Omit<SelectPortalProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
562
+ Backdrop: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectBackdropProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
563
+ className?: string | undefined;
564
+ } & React_2.RefAttributes<HTMLDivElement>>;
565
+ Positioner: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectPositionerProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
566
+ className?: string | undefined;
567
+ } & React_2.RefAttributes<HTMLDivElement>>;
568
+ Popup: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectPopupProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
569
+ className?: string | undefined;
570
+ } & React_2.RefAttributes<HTMLDivElement>>;
571
+ List: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectListProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
572
+ className?: string | undefined;
573
+ } & React_2.RefAttributes<HTMLDivElement>>;
574
+ Item: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectItemProps_2, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
575
+ className?: string | undefined;
576
+ } & React_2.RefAttributes<HTMLElement>>;
577
+ ItemIndicator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectItemIndicatorProps_2, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
578
+ className?: string | undefined;
579
+ } & React_2.RefAttributes<HTMLSpanElement>>;
580
+ ItemText: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectItemTextProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
581
+ className?: string | undefined;
582
+ } & React_2.RefAttributes<HTMLDivElement>>;
583
+ Arrow: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectArrowProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
584
+ className?: string | undefined;
585
+ } & React_2.RefAttributes<HTMLDivElement>>;
586
+ ScrollDownArrow: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectScrollDownArrowProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
587
+ className?: string | undefined;
588
+ } & React_2.RefAttributes<HTMLDivElement>>;
589
+ ScrollUpArrow: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectScrollUpArrowProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
590
+ className?: string | undefined;
591
+ } & React_2.RefAttributes<HTMLDivElement>>;
592
+ Group: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectGroupProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
593
+ className?: string | undefined;
594
+ } & React_2.RefAttributes<HTMLDivElement>>;
595
+ GroupLabel: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectGroupLabelProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
596
+ className?: string | undefined;
597
+ } & React_2.RefAttributes<HTMLDivElement>>;
598
+ Separator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SeparatorProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
599
+ className?: string | undefined;
600
+ } & React_2.RefAttributes<HTMLDivElement>>;
601
+ };
602
+
603
+ export declare namespace Select_2 {
604
+ export {
605
+ SelectRoot as Root,
606
+ SelectLabel as Label,
607
+ SelectTrigger as Trigger,
608
+ SelectValue as Value,
609
+ SelectIcon as Icon,
610
+ SelectPortal as Portal,
611
+ SelectBackdrop as Backdrop,
612
+ SelectPositioner as Positioner,
613
+ SelectPopup as Popup,
614
+ SelectList as List,
615
+ SelectItem as Item,
616
+ SelectItemIndicator as ItemIndicator,
617
+ SelectItemText as ItemText,
618
+ SelectArrow as Arrow,
619
+ SelectScrollDownArrow as ScrollDownArrow,
620
+ SelectScrollUpArrow as ScrollUpArrow,
621
+ SelectGroup as Group,
622
+ SelectGroupLabel as GroupLabel,
623
+ Separator
624
+ }
625
+ }
626
+
627
+ /**
628
+ * Displays an element positioned against the select popup anchor.
629
+ * Renders a `<div>` element.
630
+ *
631
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
632
+ */
633
+ declare const SelectArrow: React_2.ForwardRefExoticComponent<Omit<SelectArrowProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
634
+
635
+ declare namespace SelectArrow {
636
+ type State = SelectArrowState;
637
+ type Props = SelectArrowProps;
638
+ }
639
+
640
+ declare interface SelectArrowProps extends BaseUIComponentProps<'div', SelectArrowState> {}
641
+
642
+ declare interface SelectArrowState {
643
+ /**
644
+ * Whether the select popup is currently open.
645
+ */
646
+ open: boolean;
647
+ /**
648
+ * The side of the anchor the component is placed on.
649
+ */
650
+ side: Side | 'none';
651
+ /**
652
+ * The alignment of the component relative to the anchor.
653
+ */
654
+ align: Align;
655
+ /**
656
+ * Whether the arrow cannot be centered on the anchor.
657
+ */
658
+ uncentered: boolean;
659
+ }
660
+
661
+ /**
662
+ * An overlay displayed beneath the menu popup.
663
+ * Renders a `<div>` element.
664
+ *
665
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
666
+ */
667
+ declare const SelectBackdrop: React_2.ForwardRefExoticComponent<Omit<SelectBackdropProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
668
+
669
+ declare namespace SelectBackdrop {
670
+ type State = SelectBackdropState;
671
+ type Props = SelectBackdropProps;
672
+ }
673
+
674
+ declare interface SelectBackdropProps extends BaseUIComponentProps<'div', SelectBackdropState> {}
675
+
676
+ declare interface SelectBackdropState {
677
+ /**
678
+ * Whether the component is open.
679
+ */
680
+ open: boolean;
681
+ /**
682
+ * The transition status of the component.
683
+ */
684
+ transitionStatus: TransitionStatus;
685
+ }
686
+
687
+ /**
688
+ * Composite, data-driven dropdown built on the `Select` atoms.
689
+ *
690
+ * Unlike `Select`, which exposes each part for fully custom composition,
691
+ * `SelectField` renders the full label → trigger → popup → list tree from a
692
+ * single `options` prop, mirroring the wix-ui-tpa `Dropdown` API.
693
+ */
694
+ export declare const SelectField: React_2.ForwardRefExoticComponent<RootOwnProps & {
695
+ /** The options, dividers, and groups to render in the popup. */
696
+ options: Array<SelectFieldItem>;
697
+ /** Accessible label rendered above the trigger. */
698
+ label?: React_2.ReactNode;
699
+ /** Accessible label for the trigger when no visible `label` is provided. */
700
+ 'aria-label'?: string | undefined;
701
+ /** Text shown in the trigger when nothing is selected. */
702
+ placeholder?: string | undefined;
703
+ /** Always-visible helper text rendered below the trigger. */
704
+ description?: React_2.ReactNode;
705
+ /** Error message rendered below the trigger when the field is invalid. */
706
+ error?: React_2.ReactNode;
707
+ /** Visual style of the trigger. */
708
+ variant?: SelectFieldVariant | undefined;
709
+ /** Horizontal alignment of the trigger value. */
710
+ alignment?: SelectFieldAlignment | undefined;
711
+ /** Marks the field invalid, styling the trigger and revealing `error`. */
712
+ invalid?: boolean | undefined;
713
+ /** Shows a spinner in place of the icon and blocks interaction. */
714
+ loading?: boolean | undefined;
715
+ /** Trigger icon. Defaults to a chevron; replaced by a spinner while loading. */
716
+ icon?: React_2.ReactNode;
717
+ /** Draws a border around the popup. */
718
+ outerBorder?: boolean | undefined;
719
+ /** Gap in pixels between the trigger and the popup. */
720
+ sideOffset?: number | undefined;
721
+ /**
722
+ * Text direction. Forwarded to both the trigger and the portaled popup so the
723
+ * popup lays out correctly even though it renders outside the field's subtree.
724
+ */
725
+ dir?: "ltr" | "rtl" | undefined;
726
+ /** Class applied to the trigger button. */
727
+ triggerClassName?: string | undefined;
728
+ /** Class applied to the popup. */
729
+ popupClassName?: string | undefined;
730
+ } & React_2.RefAttributes<HTMLButtonElement>>;
731
+
732
+ export declare type SelectFieldAlignment = 'start' | 'center';
733
+
734
+ /** A visual divider between options. */
735
+ export declare type SelectFieldDivider = {
736
+ divider: true;
737
+ };
738
+
739
+ /** A labelled group of options rendered under a {@link Select.GroupLabel}. */
740
+ export declare type SelectFieldGroup = {
741
+ groupLabel: React_2.ReactNode;
742
+ options: Array<SelectFieldOption>;
743
+ };
744
+
745
+ export declare type SelectFieldItem = SelectFieldOption | SelectFieldDivider | SelectFieldGroup;
746
+
747
+ /**
748
+ * A single selectable option rendered inside the {@link SelectField} popup.
749
+ * `label` defaults to `value` when omitted. `icon`, `description`, and `suffix`
750
+ * opt the row into the rich layout (leading icon, secondary line, trailing slot).
751
+ */
752
+ export declare type SelectFieldOption = {
753
+ value: string;
754
+ label?: React_2.ReactNode;
755
+ disabled?: boolean;
756
+ icon?: React_2.ReactNode;
757
+ description?: React_2.ReactNode;
758
+ suffix?: React_2.ReactNode;
759
+ };
760
+
761
+ export declare type SelectFieldProps = RootOwnProps & {
762
+ /** The options, dividers, and groups to render in the popup. */
763
+ options: Array<SelectFieldItem>;
764
+ /** Accessible label rendered above the trigger. */
765
+ label?: React_2.ReactNode;
766
+ /** Accessible label for the trigger when no visible `label` is provided. */
767
+ 'aria-label'?: string;
768
+ /** Text shown in the trigger when nothing is selected. */
769
+ placeholder?: string;
770
+ /** Always-visible helper text rendered below the trigger. */
771
+ description?: React_2.ReactNode;
772
+ /** Error message rendered below the trigger when the field is invalid. */
773
+ error?: React_2.ReactNode;
774
+ /** Visual style of the trigger. */
775
+ variant?: SelectFieldVariant;
776
+ /** Horizontal alignment of the trigger value. */
777
+ alignment?: SelectFieldAlignment;
778
+ /** Marks the field invalid, styling the trigger and revealing `error`. */
779
+ invalid?: boolean;
780
+ /** Shows a spinner in place of the icon and blocks interaction. */
781
+ loading?: boolean;
782
+ /** Trigger icon. Defaults to a chevron; replaced by a spinner while loading. */
783
+ icon?: React_2.ReactNode;
784
+ /** Draws a border around the popup. */
785
+ outerBorder?: boolean;
786
+ /** Gap in pixels between the trigger and the popup. */
787
+ sideOffset?: number;
788
+ /**
789
+ * Text direction. Forwarded to both the trigger and the portaled popup so the
790
+ * popup lays out correctly even though it renders outside the field's subtree.
791
+ */
792
+ dir?: 'ltr' | 'rtl';
793
+ /** Class applied to the trigger button. */
794
+ triggerClassName?: string;
795
+ /** Class applied to the popup. */
796
+ popupClassName?: string;
797
+ };
798
+
799
+ export declare type SelectFieldVariant = 'floating' | 'box' | 'line';
800
+
801
+ /**
802
+ * Groups related select items with the corresponding label.
803
+ * Renders a `<div>` element.
804
+ *
805
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
806
+ */
807
+ declare const SelectGroup: React_2.ForwardRefExoticComponent<Omit<SelectGroupProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
808
+
809
+ declare namespace SelectGroup {
810
+ type State = SelectGroupState;
811
+ type Props = SelectGroupProps;
812
+ }
813
+
814
+ /**
815
+ * An accessible label that is automatically associated with its parent group.
816
+ * Renders a `<div>` element.
817
+ *
818
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
819
+ */
820
+ declare const SelectGroupLabel: React_2.ForwardRefExoticComponent<Omit<SelectGroupLabelProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
821
+
822
+ declare namespace SelectGroupLabel {
823
+ type State = SelectGroupLabelState;
824
+ type Props = SelectGroupLabelProps;
825
+ }
826
+
827
+ declare interface SelectGroupLabelProps extends BaseUIComponentProps<'div', SelectGroupLabelState> {}
828
+
829
+ declare interface SelectGroupLabelState {}
830
+
831
+ declare interface SelectGroupProps extends BaseUIComponentProps<'div', SelectGroupState> {}
832
+
833
+ declare interface SelectGroupState {}
834
+
835
+ /**
836
+ * An icon that indicates that the trigger button opens a select popup.
837
+ * Renders a `<span>` element.
838
+ *
839
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
840
+ */
841
+ declare const SelectIcon: React_2.ForwardRefExoticComponent<Omit<SelectIconProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>>;
842
+
843
+ declare namespace SelectIcon {
844
+ type State = SelectIconState;
845
+ type Props = SelectIconProps;
846
+ }
847
+
848
+ declare interface SelectIconProps extends BaseUIComponentProps<'span', SelectIconState> {}
849
+
850
+ declare interface SelectIconState {
851
+ /**
852
+ * Whether the select popup is currently open.
853
+ */
854
+ open: boolean;
855
+ }
856
+
857
+ /**
858
+ * An individual option in the select popup.
859
+ * Renders a `<div>` element.
860
+ *
861
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
862
+ */
863
+ declare const SelectItem: React_2.NamedExoticComponent<Omit<SelectItemProps, "ref"> & React_2.RefAttributes<HTMLElement>>;
864
+
865
+ declare namespace SelectItem {
866
+ type State = SelectItemState;
867
+ type Props = SelectItemProps;
868
+ }
869
+
870
+ /**
871
+ * Indicates whether the select item is selected.
872
+ * Renders a `<span>` element.
873
+ *
874
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
875
+ */
876
+ declare const SelectItemIndicator: React_2.ForwardRefExoticComponent<Omit<SelectItemIndicatorProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>>;
877
+
878
+ declare namespace SelectItemIndicator {
879
+ type State = SelectItemIndicatorState;
880
+ type Props = SelectItemIndicatorProps;
881
+ }
882
+
883
+ declare interface SelectItemIndicatorProps extends BaseUIComponentProps<'span', SelectItemIndicatorState> {
884
+ children?: React_2.ReactNode;
885
+ /**
886
+ * Whether to keep the HTML element in the DOM when the item is not selected.
887
+ */
888
+ keepMounted?: boolean | undefined;
889
+ }
890
+
891
+ declare interface SelectItemIndicatorState {
892
+ /**
893
+ * Whether the item is selected.
894
+ */
895
+ selected: boolean;
896
+ /**
897
+ * The transition status of the component.
898
+ */
899
+ transitionStatus: TransitionStatus;
900
+ }
901
+
902
+ declare interface SelectItemProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'div', SelectItemState>, 'id'> {
903
+ children?: React_2.ReactNode;
904
+ /**
905
+ * A unique value that identifies this select item.
906
+ * @default null
907
+ */
908
+ value?: any;
909
+ /**
910
+ * Whether the component should ignore user interaction.
911
+ * @default false
912
+ */
913
+ disabled?: boolean | undefined;
914
+ /**
915
+ * Specifies the text label to use when the item is matched during keyboard text navigation.
916
+ *
917
+ * Defaults to the item text content if not provided.
918
+ */
919
+ label?: string | undefined;
920
+ }
921
+
922
+ declare interface SelectItemState {
923
+ /**
924
+ * Whether the item should ignore user interaction.
925
+ */
926
+ disabled: boolean;
927
+ /**
928
+ * Whether the item is selected.
929
+ */
930
+ selected: boolean;
931
+ /**
932
+ * Whether the item is highlighted.
933
+ */
934
+ highlighted: boolean;
935
+ }
936
+
937
+ /**
938
+ * A text label of the select item.
939
+ * Renders a `<div>` element.
940
+ *
941
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
942
+ */
943
+ declare const SelectItemText: React_2.NamedExoticComponent<Omit<SelectItemTextProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
944
+
945
+ declare namespace SelectItemText {
946
+ type State = SelectItemTextState;
947
+ type Props = SelectItemTextProps;
948
+ }
949
+
950
+ declare interface SelectItemTextProps extends BaseUIComponentProps<'div', SelectItemTextState> {}
951
+
952
+ declare interface SelectItemTextState {}
953
+
954
+ /**
955
+ * An accessible label that is automatically associated with the select trigger.
956
+ * Renders a `<div>` element.
957
+ *
958
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
959
+ */
960
+ declare const SelectLabel: React_2.ForwardRefExoticComponent<Omit<SelectLabelProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
961
+
962
+ declare namespace SelectLabel {
963
+ type State = SelectLabelState;
964
+ type Props = SelectLabelProps;
965
+ }
966
+
967
+ declare interface SelectLabelProps extends Omit<BaseUIComponentProps<'div', SelectLabel.State>, 'id'> {}
968
+
969
+ declare type SelectLabelState = FieldRoot.State;
970
+
971
+ /**
972
+ * A container for the select items.
973
+ * Renders a `<div>` element.
974
+ *
975
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
976
+ */
977
+ declare const SelectList: React_2.ForwardRefExoticComponent<Omit<SelectListProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
978
+
979
+ declare namespace SelectList {
980
+ type Props = SelectListProps;
981
+ type State = SelectListState;
982
+ }
983
+
984
+ declare interface SelectListProps extends BaseUIComponentProps<'div', SelectListState> {}
985
+
986
+ declare interface SelectListState {}
987
+
988
+ /**
989
+ * A container for the select list.
990
+ * Renders a `<div>` element.
991
+ *
992
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
993
+ */
994
+ declare const SelectPopup: React_2.ForwardRefExoticComponent<Omit<SelectPopupProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
995
+
996
+ declare namespace SelectPopup {
997
+ type Props = SelectPopupProps;
998
+ type State = SelectPopupState;
999
+ }
1000
+
1001
+ declare interface SelectPopupProps extends BaseUIComponentProps<'div', SelectPopupState> {
1002
+ children?: React_2.ReactNode;
1003
+ /**
1004
+ * Determines the element to focus when the select popup is closed.
1005
+ *
1006
+ * - `false`: Do not move focus.
1007
+ * - `true`: Move focus based on the default behavior (trigger or previously focused element).
1008
+ * - `RefObject`: Move focus to the ref element.
1009
+ * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
1010
+ * Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
1011
+ */
1012
+ finalFocus?: boolean | React_2.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void) | undefined;
1013
+ }
1014
+
1015
+ declare interface SelectPopupState {
1016
+ /**
1017
+ * The side of the anchor the component is placed on.
1018
+ */
1019
+ side: Side | 'none';
1020
+ /**
1021
+ * The alignment of the component relative to the anchor.
1022
+ */
1023
+ align: Align;
1024
+ /**
1025
+ * Whether the component is open.
1026
+ */
1027
+ open: boolean;
1028
+ /**
1029
+ * The transition status of the component.
1030
+ */
1031
+ transitionStatus: TransitionStatus;
1032
+ }
1033
+
1034
+ /**
1035
+ * A portal element that moves the popup to a different part of the DOM.
1036
+ * By default, the portal element is appended to `<body>`.
1037
+ * Renders a `<div>` element.
1038
+ *
1039
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
1040
+ */
1041
+ declare const SelectPortal: React_2.ForwardRefExoticComponent<Omit<SelectPortalProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
1042
+
1043
+ declare namespace SelectPortal {
1044
+ type State = SelectPortalState;
1045
+ type Props = SelectPortalProps;
1046
+ }
1047
+
1048
+ declare interface SelectPortalProps extends FloatingPortal.Props<SelectPortalState> {}
1049
+
1050
+ declare interface SelectPortalState {}
1051
+
1052
+ /**
1053
+ * Positions the select popup.
1054
+ * Renders a `<div>` element.
1055
+ *
1056
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
1057
+ */
1058
+ declare const SelectPositioner: React_2.ForwardRefExoticComponent<Omit<SelectPositionerProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
1059
+
1060
+ declare namespace SelectPositioner {
1061
+ type State = SelectPositionerState;
1062
+ type Props = SelectPositionerProps;
1063
+ }
1064
+
1065
+ declare interface SelectPositionerProps extends UseAnchorPositioningSharedParameters, BaseUIComponentProps<'div', SelectPositionerState> {
1066
+ /**
1067
+ * Whether the positioner overlaps the trigger so the selected item's text is aligned with the trigger's value text. This only applies to mouse input and is automatically disabled if there is not enough space.
1068
+ * @default true
1069
+ */
1070
+ alignItemWithTrigger?: boolean | undefined;
1071
+ }
1072
+
1073
+ declare interface SelectPositionerState {
1074
+ /**
1075
+ * Whether the component is open.
1076
+ */
1077
+ open: boolean;
1078
+ /**
1079
+ * The side of the anchor the component is placed on.
1080
+ */
1081
+ side: Side | 'none';
1082
+ /**
1083
+ * The alignment of the component relative to the anchor.
1084
+ */
1085
+ align: Align;
1086
+ /**
1087
+ * Whether the anchor element is hidden.
1088
+ */
1089
+ anchorHidden: boolean;
1090
+ }
1091
+
1092
+ /**
1093
+ * Groups all parts of the select.
1094
+ * Doesn't render its own HTML element.
1095
+ *
1096
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
1097
+ */
1098
+ declare function SelectRoot<Value, Multiple extends boolean | undefined = false>(props: SelectRoot.Props<Value, Multiple>): React_2.JSX.Element;
1099
+
1100
+ declare namespace SelectRoot {
1101
+ type Props<Value, Multiple extends boolean | undefined = false> = SelectRootProps<Value, Multiple>;
1102
+ type State = SelectRootState;
1103
+ type Actions = SelectRootActions;
1104
+ type ChangeEventReason = SelectRootChangeEventReason;
1105
+ type ChangeEventDetails = SelectRootChangeEventDetails;
1106
+ }
1107
+
1108
+ declare interface SelectRootActions {
1109
+ unmount: () => void;
1110
+ }
1111
+
1112
+ declare type SelectRootChangeEventDetails = BaseUIChangeEventDetails<SelectRootChangeEventReason>;
1113
+
1114
+ declare type SelectRootChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.outsidePress | typeof REASONS.escapeKey | typeof REASONS.windowResize | typeof REASONS.itemPress | typeof REASONS.focusOut | typeof REASONS.listNavigation | typeof REASONS.cancelOpen | typeof REASONS.none;
1115
+
1116
+ declare interface SelectRootProps<Value, Multiple extends boolean | undefined = false> {
1117
+ children?: React_2.ReactNode;
1118
+ /**
1119
+ * A ref to access the hidden input element.
1120
+ */
1121
+ inputRef?: React_2.Ref<HTMLInputElement> | undefined;
1122
+ /**
1123
+ * Identifies the field when a form is submitted.
1124
+ */
1125
+ name?: string | undefined;
1126
+ /**
1127
+ * Identifies the form that owns the hidden input.
1128
+ * Useful when the select is rendered outside the form.
1129
+ */
1130
+ form?: string | undefined;
1131
+ /**
1132
+ * Provides a hint to the browser for autofill.
1133
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete
1134
+ */
1135
+ autoComplete?: string | undefined;
1136
+ /**
1137
+ * The id of the Select.
1138
+ */
1139
+ id?: string | undefined;
1140
+ /**
1141
+ * Whether the user must choose a value before submitting a form.
1142
+ * @default false
1143
+ */
1144
+ required?: boolean | undefined;
1145
+ /**
1146
+ * Whether the user should be unable to choose a different option from the select popup.
1147
+ * @default false
1148
+ */
1149
+ readOnly?: boolean | undefined;
1150
+ /**
1151
+ * Whether the component should ignore user interaction.
1152
+ * @default false
1153
+ */
1154
+ disabled?: boolean | undefined;
1155
+ /**
1156
+ * Whether multiple items can be selected.
1157
+ * @default false
1158
+ */
1159
+ multiple?: Multiple | undefined;
1160
+ /**
1161
+ * Whether moving the pointer over items should highlight them.
1162
+ * Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.
1163
+ * @default true
1164
+ */
1165
+ highlightItemOnHover?: boolean | undefined;
1166
+ /**
1167
+ * Whether the select popup is initially open.
1168
+ *
1169
+ * To render a controlled select popup, use the `open` prop instead.
1170
+ * @default false
1171
+ */
1172
+ defaultOpen?: boolean | undefined;
1173
+ /**
1174
+ * Event handler called when the select popup is opened or closed.
1175
+ */
1176
+ onOpenChange?: ((open: boolean, eventDetails: SelectRootChangeEventDetails) => void) | undefined;
1177
+ /**
1178
+ * Event handler called after any animations complete when the select popup is opened or closed.
1179
+ */
1180
+ onOpenChangeComplete?: ((open: boolean) => void) | undefined;
1181
+ /**
1182
+ * Whether the select popup is currently open.
1183
+ */
1184
+ open?: boolean | undefined;
1185
+ /**
1186
+ * Determines if the select enters a modal state when open.
1187
+ * - `true`: user interaction is limited to the select: document page scroll is locked and pointer interactions on outside elements are disabled.
1188
+ * - `false`: user interaction with the rest of the document is allowed.
1189
+ * @default true
1190
+ */
1191
+ modal?: boolean | undefined;
1192
+ /**
1193
+ * A ref to imperative actions.
1194
+ * - `unmount`: When specified, the select will not be unmounted when closed.
1195
+ * Instead, the `unmount` function must be called to unmount the select manually.
1196
+ * Useful when the select's animation is controlled by an external library.
1197
+ */
1198
+ actionsRef?: React_2.RefObject<SelectRootActions | null> | undefined;
1199
+ /**
1200
+ * Data structure of the items rendered in the select popup.
1201
+ * When specified, `<Select.Value>` renders the label of the selected item instead of the raw value.
1202
+ * @example
1203
+ * ```tsx
1204
+ * const items = {
1205
+ * sans: 'Sans-serif',
1206
+ * serif: 'Serif',
1207
+ * mono: 'Monospace',
1208
+ * cursive: 'Cursive',
1209
+ * };
1210
+ * <Select.Root items={items} />
1211
+ * ```
1212
+ */
1213
+ items?: Record<string, React_2.ReactNode> | ReadonlyArray<{
1214
+ label: React_2.ReactNode;
1215
+ value: any;
1216
+ }> | ReadonlyArray<Group<any>> | undefined;
1217
+ /**
1218
+ * When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for display in the trigger.
1219
+ * If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.
1220
+ */
1221
+ itemToStringLabel?: ((itemValue: Value) => string) | undefined;
1222
+ /**
1223
+ * When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for form submission.
1224
+ * If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop.
1225
+ */
1226
+ itemToStringValue?: ((itemValue: Value) => string) | undefined;
1227
+ /**
1228
+ * Custom comparison logic used to determine if a select item value matches the current selected value. Useful when item values are objects without matching referentially.
1229
+ * Defaults to `Object.is` comparison.
1230
+ */
1231
+ isItemEqualToValue?: ((itemValue: Value, value: Value) => boolean) | undefined;
1232
+ /**
1233
+ * The uncontrolled value of the select when it's initially rendered.
1234
+ *
1235
+ * To render a controlled select, use the `value` prop instead.
1236
+ */
1237
+ defaultValue?: SelectValueType<Value, Multiple> | null | undefined;
1238
+ /**
1239
+ * The value of the select. Use when controlled.
1240
+ */
1241
+ value?: SelectValueType<Value, Multiple> | null | undefined;
1242
+ /**
1243
+ * Event handler called when the value of the select changes.
1244
+ */
1245
+ onValueChange?: ((value: SelectValueType<Value, Multiple> | (Multiple extends true ? never : null), eventDetails: SelectRootChangeEventDetails) => void) | undefined;
1246
+ }
1247
+
1248
+ declare interface SelectRootState {}
1249
+
1250
+ /**
1251
+ * An element that scrolls the select popup down when hovered. Does not render when using touch input.
1252
+ * Renders a `<div>` element.
1253
+ *
1254
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
1255
+ */
1256
+ declare const SelectScrollDownArrow: React_2.ForwardRefExoticComponent<Omit<SelectScrollDownArrowProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
1257
+
1258
+ declare namespace SelectScrollDownArrow {
1259
+ type State = SelectScrollDownArrowState;
1260
+ type Props = SelectScrollDownArrowProps;
1261
+ }
1262
+
1263
+ declare interface SelectScrollDownArrowProps extends BaseUIComponentProps<'div', SelectScrollDownArrowState> {
1264
+ /**
1265
+ * Whether to keep the HTML element in the DOM while the select popup is not scrollable.
1266
+ * @default false
1267
+ */
1268
+ keepMounted?: boolean | undefined;
1269
+ }
1270
+
1271
+ declare interface SelectScrollDownArrowState {}
1272
+
1273
+ /**
1274
+ * An element that scrolls the select popup up when hovered. Does not render when using touch input.
1275
+ * Renders a `<div>` element.
1276
+ *
1277
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
1278
+ */
1279
+ declare const SelectScrollUpArrow: React_2.ForwardRefExoticComponent<Omit<SelectScrollUpArrowProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
1280
+
1281
+ declare namespace SelectScrollUpArrow {
1282
+ type State = SelectScrollUpArrowState;
1283
+ type Props = SelectScrollUpArrowProps;
1284
+ }
1285
+
1286
+ declare interface SelectScrollUpArrowProps extends BaseUIComponentProps<'div', SelectScrollUpArrowState> {
1287
+ /**
1288
+ * Whether to keep the HTML element in the DOM while the select popup is not scrollable.
1289
+ * @default false
1290
+ */
1291
+ keepMounted?: boolean | undefined;
1292
+ }
1293
+
1294
+ declare interface SelectScrollUpArrowState {}
1295
+
1296
+ /**
1297
+ * A button that opens the select popup.
1298
+ * Renders a `<button>` element.
1299
+ *
1300
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
1301
+ */
1302
+ declare const SelectTrigger: React_2.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
1303
+
1304
+ declare namespace SelectTrigger {
1305
+ type State = SelectTriggerState;
1306
+ type Props = SelectTriggerProps;
1307
+ }
1308
+
1309
+ declare interface SelectTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', SelectTriggerState> {
1310
+ children?: React_2.ReactNode;
1311
+ /**
1312
+ * Whether the component should ignore user interaction.
1313
+ */
1314
+ disabled?: boolean | undefined;
1315
+ }
1316
+
1317
+ declare interface SelectTriggerState extends FieldRootState {
1318
+ /**
1319
+ * Whether the select popup is currently open.
1320
+ */
1321
+ open: boolean;
1322
+ /**
1323
+ * Whether the select popup is readonly.
1324
+ */
1325
+ readOnly: boolean;
1326
+ /**
1327
+ * Indicates which side the corresponding popup is positioned relative to its anchor.
1328
+ */
1329
+ popupSide: Side | null;
1330
+ /**
1331
+ * The value of the currently selected item.
1332
+ */
1333
+ value: any;
1334
+ /**
1335
+ * Whether the select doesn't have a value.
1336
+ */
1337
+ placeholder: boolean;
1338
+ }
1339
+
1340
+ /**
1341
+ * A text label of the currently selected item.
1342
+ * Renders a `<span>` element.
1343
+ *
1344
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
1345
+ */
1346
+ declare const SelectValue: React_2.ForwardRefExoticComponent<Omit<SelectValueProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>>;
1347
+
1348
+ declare namespace SelectValue {
1349
+ type State = SelectValueState;
1350
+ type Props = SelectValueProps;
1351
+ }
1352
+
1353
+ declare interface SelectValueProps extends Omit<BaseUIComponentProps<'span', SelectValueState>, 'children'> {
1354
+ /**
1355
+ * Accepts a function that returns a `ReactNode` to format the selected value.
1356
+ * @example
1357
+ * ```tsx
1358
+ * <Select.Value>
1359
+ * {(value: string | null) => value ? labels[value] : 'No value'}
1360
+ * </Select.Value>
1361
+ * ```
1362
+ */
1363
+ children?: React_2.ReactNode | ((value: any) => React_2.ReactNode);
1364
+ /**
1365
+ * The placeholder value to display when no value is selected.
1366
+ * This is overridden by `children` if specified, or by a null item's label in `items`.
1367
+ */
1368
+ placeholder?: React_2.ReactNode;
1369
+ }
1370
+
1371
+ declare interface SelectValueState {
1372
+ /**
1373
+ * The value of the currently selected item.
1374
+ */
1375
+ value: any;
1376
+ /**
1377
+ * Whether the placeholder is being displayed.
1378
+ */
1379
+ placeholder: boolean;
1380
+ }
1381
+
1382
+ declare type SelectValueType<Value, Multiple extends boolean | undefined> = Multiple extends true ? Value[] : Value;
1383
+
1384
+ /**
1385
+ * A separator element accessible to screen readers.
1386
+ * Renders a `<div>` element.
1387
+ *
1388
+ * Documentation: [Base UI Separator](https://base-ui.com/react/components/separator)
1389
+ */
1390
+ declare const Separator: React_2.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
1391
+
1392
+ declare namespace Separator {
1393
+ type Props = SeparatorProps;
1394
+ type State = SeparatorState;
1395
+ }
1396
+
1397
+ declare interface SeparatorProps extends BaseUIComponentProps<'div', SeparatorState> {
1398
+ /**
1399
+ * The orientation of the separator.
1400
+ * @default 'horizontal'
1401
+ */
1402
+ orientation?: Orientation | undefined;
1403
+ }
1404
+
1405
+ declare interface SeparatorState {
1406
+ /**
1407
+ * The orientation of the separator.
1408
+ */
1409
+ orientation: Orientation;
1410
+ }
1411
+
1412
+ declare const siblingOpen: "sibling-open";
1413
+
1414
+ declare type Side = 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start';
1415
+
1416
+ declare interface SideFlipMode {
1417
+ /**
1418
+ * How to avoid collisions on the side axis.
1419
+ * - `'flip'`: If there is not enough space, place the popup on the opposite side.
1420
+ * - `'none'`: Keep the preferred side even if it overflows.
1421
+ */
1422
+ side?: 'flip' | 'none' | undefined;
1423
+ /**
1424
+ * How to avoid collisions on the align axis.
1425
+ * - `'flip'`: If there is not enough space, swap `'start'` and `'end'` alignment.
1426
+ * - `'shift'`: Keep the alignment and shift the popup to fit within the boundary.
1427
+ * - `'none'`: Keep the preferred alignment even if it overflows.
1428
+ */
1429
+ align?: 'flip' | 'shift' | 'none' | undefined;
1430
+ /**
1431
+ * If both sides on the preferred axis do not fit, determines whether to fallback
1432
+ * to a side on the perpendicular axis and which logical side to prefer.
1433
+ * - `'start'`: Prefer the logical start side on the perpendicular axis.
1434
+ * - `'end'`: Prefer the logical end side on the perpendicular axis.
1435
+ * - `'none'`: Do not fallback to the perpendicular axis.
1436
+ */
1437
+ fallbackAxisSide?: 'start' | 'end' | 'none' | undefined;
1438
+ }
1439
+
1440
+ declare interface SideShiftMode {
1441
+ /**
1442
+ * How to avoid collisions on the side axis.
1443
+ * - `'shift'`: Keep the preferred side and shift the popup to fit within the boundary.
1444
+ * - `'none'`: Keep the preferred side even if it overflows.
1445
+ */
1446
+ side?: 'shift' | 'none' | undefined;
1447
+ /**
1448
+ * How to avoid collisions on the align axis.
1449
+ * - `'shift'`: Keep the alignment and shift the popup to fit within the boundary.
1450
+ * - `'none'`: Keep the preferred alignment even if it overflows.
1451
+ */
1452
+ align?: 'shift' | 'none' | undefined;
1453
+ /**
1454
+ * If both sides on the preferred axis do not fit, determines whether to fallback
1455
+ * to a side on the perpendicular axis and which logical side to prefer.
1456
+ * - `'start'`: Prefer the logical start side on the perpendicular axis.
1457
+ * - `'end'`: Prefer the logical end side on the perpendicular axis.
1458
+ * - `'none'`: Do not fallback to the perpendicular axis.
1459
+ */
1460
+ fallbackAxisSide?: 'start' | 'end' | 'none' | undefined;
1461
+ }
1462
+
1463
+ declare const swipe: "swipe";
1464
+
1465
+ declare const trackPress: "track-press";
1466
+
1467
+ declare type TransitionStatus = 'starting' | 'ending' | 'idle' | undefined;
1468
+
1469
+ declare const triggerFocus: "trigger-focus";
1470
+
1471
+ declare const triggerHover: "trigger-hover";
1472
+
1473
+ declare const triggerPress: "trigger-press";
1474
+
1475
+ declare interface UseAnchorPositioningSharedParameters {
1476
+ /**
1477
+ * An element to position the popup against.
1478
+ * By default, the popup will be positioned against the trigger.
1479
+ */
1480
+ anchor?: Element | null | VirtualElement | React_2.RefObject<Element | null> | (() => Element | VirtualElement | null) | undefined;
1481
+ /**
1482
+ * Determines which CSS `position` property to use.
1483
+ * @default 'absolute'
1484
+ */
1485
+ positionMethod?: 'absolute' | 'fixed' | undefined;
1486
+ /**
1487
+ * Which side of the anchor element to align the popup against.
1488
+ * May automatically change to avoid collisions.
1489
+ * @default 'bottom'
1490
+ */
1491
+ side?: Side | undefined;
1492
+ /**
1493
+ * Distance between the anchor and the popup in pixels.
1494
+ * Also accepts a function that returns the distance to read the dimensions of the anchor
1495
+ * and positioner elements, along with its side and alignment.
1496
+ *
1497
+ * The function takes a `data` object parameter with the following properties:
1498
+ * - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
1499
+ * - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
1500
+ * - `data.side`: which side of the anchor element the positioner is aligned against.
1501
+ * - `data.align`: how the positioner is aligned relative to the specified side.
1502
+ *
1503
+ * @example
1504
+ * ```jsx
1505
+ * <Positioner
1506
+ * sideOffset={({ side, align, anchor, positioner }) => {
1507
+ * return side === 'top' || side === 'bottom'
1508
+ * ? anchor.height
1509
+ * : anchor.width;
1510
+ * }}
1511
+ * />
1512
+ * ```
1513
+ *
1514
+ * @default 0
1515
+ */
1516
+ sideOffset?: number | OffsetFunction | undefined;
1517
+ /**
1518
+ * How to align the popup relative to the specified side.
1519
+ * @default 'center'
1520
+ */
1521
+ align?: Align | undefined;
1522
+ /**
1523
+ * Additional offset along the alignment axis in pixels.
1524
+ * Also accepts a function that returns the offset to read the dimensions of the anchor
1525
+ * and positioner elements, along with its side and alignment.
1526
+ *
1527
+ * The function takes a `data` object parameter with the following properties:
1528
+ * - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
1529
+ * - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
1530
+ * - `data.side`: which side of the anchor element the positioner is aligned against.
1531
+ * - `data.align`: how the positioner is aligned relative to the specified side.
1532
+ *
1533
+ * @example
1534
+ * ```jsx
1535
+ * <Positioner
1536
+ * alignOffset={({ side, align, anchor, positioner }) => {
1537
+ * return side === 'top' || side === 'bottom'
1538
+ * ? anchor.width
1539
+ * : anchor.height;
1540
+ * }}
1541
+ * />
1542
+ * ```
1543
+ *
1544
+ * @default 0
1545
+ */
1546
+ alignOffset?: number | OffsetFunction | undefined;
1547
+ /**
1548
+ * An element or a rectangle that delimits the area that the popup is confined to.
1549
+ * @default 'clipping-ancestors'
1550
+ */
1551
+ collisionBoundary?: Boundary | undefined;
1552
+ /**
1553
+ * Additional space to maintain from the edge of the collision boundary.
1554
+ * @default 5
1555
+ */
1556
+ collisionPadding?: Padding | undefined;
1557
+ /**
1558
+ * Whether to maintain the popup in the viewport after
1559
+ * the anchor element was scrolled out of view.
1560
+ * @default false
1561
+ */
1562
+ sticky?: boolean | undefined;
1563
+ /**
1564
+ * Minimum distance to maintain between the arrow and the edges of the popup.
1565
+ *
1566
+ * Use it to prevent the arrow element from hanging out of the rounded corners of a popup.
1567
+ * @default 5
1568
+ */
1569
+ arrowPadding?: number | undefined;
1570
+ /**
1571
+ * Whether to disable the popup from tracking any layout shift of its positioning anchor.
1572
+ * @default false
1573
+ */
1574
+ disableAnchorTracking?: boolean | undefined;
1575
+ /**
1576
+ * Determines how to handle collisions when positioning the popup.
1577
+ *
1578
+ * `side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):
1579
+ * - `'flip'`: keep the requested side when it fits; otherwise try the opposite side
1580
+ * (`top` and `bottom`, or `left` and `right`).
1581
+ * - `'shift'`: never change side; keep the requested side and move the popup within
1582
+ * the clipping boundary so it stays visible.
1583
+ * - `'none'`: do not correct side-axis overflow.
1584
+ *
1585
+ * `align` controls overflow on the alignment axis (`start`/`center`/`end`):
1586
+ * - `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.
1587
+ * - `'shift'`: keep side and requested alignment, then nudge the popup along the
1588
+ * alignment axis to fit.
1589
+ * - `'none'`: do not correct alignment-axis overflow.
1590
+ *
1591
+ * `fallbackAxisSide` controls fallback behavior on the perpendicular axis when the
1592
+ * preferred axis cannot fit:
1593
+ * - `'start'`: allow perpendicular fallback and try the logical start side first
1594
+ * (`top` before `bottom`, or `left` before `right` in LTR).
1595
+ * - `'end'`: allow perpendicular fallback and try the logical end side first
1596
+ * (`bottom` before `top`, or `right` before `left` in LTR).
1597
+ * - `'none'`: do not fallback to the perpendicular axis.
1598
+ *
1599
+ * When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.
1600
+ * If `align` is omitted, it defaults to `'flip'`.
1601
+ *
1602
+ * @example
1603
+ * ```jsx
1604
+ * <Positioner
1605
+ * collisionAvoidance={{
1606
+ * side: 'shift',
1607
+ * align: 'shift',
1608
+ * fallbackAxisSide: 'none',
1609
+ * }}
1610
+ * />
1611
+ * ```
1612
+ *
1613
+ */
1614
+ collisionAvoidance?: CollisionAvoidance | undefined;
1615
+ }
1616
+
1617
+ declare interface UseFloatingPortalNodeProps {
1618
+ ref?: React_2.Ref<HTMLDivElement> | undefined;
1619
+ container?: HTMLElement | ShadowRoot | null | React_2.RefObject<HTMLElement | ShadowRoot | null> | undefined;
1620
+ componentProps?: UseRenderElementComponentProps<any> | undefined;
1621
+ elementProps?: React_2.HTMLAttributes<HTMLDivElement> | undefined;
1622
+ }
1623
+
1624
+ declare interface UseRenderElementComponentProps<State> {
1625
+ /**
1626
+ * The class name to apply to the rendered element.
1627
+ * Can be a string or a function that accepts the state and returns a string.
1628
+ */
1629
+ className?: string | ((state: State) => string | undefined) | undefined;
1630
+ /**
1631
+ * The render prop or React element to override the default element.
1632
+ */
1633
+ render?: undefined | React_2.ReactElement | ComponentRenderFn<React_2.HTMLAttributes<any>, State>;
1634
+ /**
1635
+ * The style to apply to the rendered element.
1636
+ * Can be a style object or a function that accepts the state and returns a style object.
1637
+ */
1638
+ style?: React_2.CSSProperties | ((state: State) => React_2.CSSProperties | undefined) | undefined;
1639
+ }
1640
+
1641
+ declare const wheel: "wheel";
1642
+
1643
+ declare const windowResize: "window-resize";
1644
+
1645
+ /**
1646
+ * Adds a `preventBaseUIHandler` method to all event handlers.
1647
+ */
1648
+ declare type WithBaseUIEvent<T> = { [K in keyof T]: WithPreventBaseUIHandler<T[K]> };
1649
+
1650
+ declare type WithPreventBaseUIHandler<T> = T extends ((event: infer E) => any) ? E extends React_2.SyntheticEvent<Element, Event> ? (event: BaseUIEvent<E>) => ReturnType<T> : T : T extends undefined ? undefined : T;
1651
+
1652
+ export { }