Upgrading @headlessui/react 1 to 2

Breaking1.7.19 → 2.2.10Breaking5Deprecated11New39Changed15Fixed108

Full comparison Back to @headlessui/react

BreakingUpgrade verdict

5 breaking changes.

In plain terms

Several components now render different HTML elements by default, so you may need to set the as prop to keep the old markup.
Comboboxes allow an empty value by default now; remove the nullable prop.
Dialogs no longer need a focusable element inside; the dialog itself gets focus when opened.
Dropdowns now lock page scrolling and disable the rest of the page while open; use the modal prop to turn this off.

Must act Top 5 of 14 that need code or config changes

Adds @floating-ui/react ^0.26.16, @react-aria/focus ^3.20.2, @react-aria/interactions ^3.25.0, use-sync-external-store ^1.5.0.

Drops client-only.

Installs 21 packages in all (was 3).

What you must change

Breaking5

Changes default rendered elements for Transition, TransitionChild, ListboxOptions, ListboxOption, ComboboxOptions, ComboboxOption and TabGroup.

TransitionTransitionChildListboxOptionsListboxOptionComboboxOptionsComboboxOptionTabGroupas

2.0.0GitHub ReleaseSummarizedView source

Comboboxes now always support empty values, so the nullable prop can be removed.

ComboboxnullableonChange

2.0.0GitHub ReleaseSummarizedView source

Dialogs no longer require a focusable child and focus the dialog root element on open instead.

DialogDialogPanelautoFocusdata-autofocus

2.0.0GitHub ReleaseSummarizedView source

Menu, Combobox and Listbox dropdowns are now modal by default, scroll-locking the page and making other content inert.

MenuComboboxListboxComboboxOptionsmodal

2.0.0GitHub ReleaseSummarizedView source

Removes the deprecated Dialog.Overlay and Dialog.Backdrop components.

Dialog.OverlayDialog.BackdropDialogPanel

2.0.0GitHub ReleaseSummarizedView source

Deprecations to plan for

Deprecated9

Marks SwitchGroup as deprecated, preferring Field instead.

SwitchGroupField

2.0.4GitHub ReleaseSummarizedView source

Deprecates RadioGroup.Option in favor of the Radio component and changes its default tag from div to span.

RadioGroup.OptionRadioRadioGroup

2.0.0GitHub ReleaseSummarizedView source

Deprecates the active prop in favor of the new focus prop on option and menu item components.

ComboboxOptionListboxOptionMenuItemRadioOptionactivefocus

2.0.0GitHub ReleaseSummarizedView source

Deprecates the entered prop on the Transition component.

Transitionentered

2.0.0GitHub ReleaseSummarizedView source

Deprecates component dot-notation in favor of explicit imports for each component.

Menu

2.0.0GitHub ReleaseSummarizedView source

Deprecates component dot-notation such as Menu.Button and Menu.Items in favor of standalone components like MenuButton and MenuItems.

MenuMenu.ButtonMenu.ItemsMenu.ItemMenuButtonMenuItemsMenuItem

2.0.0GitHub ReleaseSummarizedView source

Deprecates component-specific label and description components in favor of the multi-purpose Field, Label and Description components added in v2.

FieldLabelDescriptionCombobox.LabelDialog.DescriptionListbox.LabelRadioGroup.DescriptionSwitch.Group

2.0.0GitHub ReleaseSummarizedView source

Deprecates component-specific label and description components in favor of Field, Label, and Description.

FieldLabelComboboxComboboxInputComboboxOptions

2.0.0GitHub ReleaseSummarizedView source

Deprecates the @headlessui/tailwindcss package in favor of the new data-* attributes.

@headlessui/tailwindcssui-activedata-[active]

2.0.0GitHub ReleaseSummarizedView source

API changes

Generated by DepDelta from published .d.ts files. Not mixed with prose notes.

added: call _internal_ComponentButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ButtonProps<TTag> & RefProp<typeof ButtonFn>): React.JSX.Element
added: interface _internal_ComponentButton extends HasDisplayName
added: let Button: _internal_ComponentButton
added: type ButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, { disabled?: boolean; autoFocus?: boolean; type?: 'button' | 'submit' | 'reset' }>

added: call _internal_ComponentCheckbox<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG, TType = string>(props: CheckboxProps<TTag, TType> & RefProp<typeof CheckboxFn>): React.JSX.Element
added: interface _internal_ComponentCheckbox extends HasDisplayName
added: let Checkbox: _internal_ComponentCheckbox
added: type CheckboxProps<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG, TType = string> = Props<TTag, CheckboxRenderPropArg, CheckboxPropsWeControl, { value?: TType; disabled?: boolean; indeterminate?: boolean; checked?: boolean; defaultChecked?: bo…

added: let CloseButton: _internal_ComponentButton
added: type CloseButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = ButtonProps<TTag>

added: export { ComboboxButton } from '../combobox/combobox'

added: export { ComboboxInput } from '../combobox/combobox'

added: export { ComboboxLabel } from '../combobox/combobox'

added: export { ComboboxOption } from '../combobox/combobox'

added: export { ComboboxOptions } from '../combobox/combobox'

removed: call _internal_ComponentCombobox<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, false, true, TTag> & RefProp<typeof ComboboxFn>): JSX.Element
removed: call _internal_ComponentCombobox<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, true, false, TTag> & RefProp<typeof ComboboxFn>): JSX.Element
removed: call _internal_ComponentCombobox<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, true, true, TTag> & RefProp<typeof ComboboxFn>): JSX.Element
removed: call _internal_ComponentComboboxLabel<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: ComboboxLabelProps<TTag> & RefProp<typeof LabelFn>): JSX.Element
removed: type ComboboxLabelProps<TTag extends ElementType> = Props<TTag, LabelRenderPropArg>
changed: call _internal_ComponentCombobox<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, false, false, TTag> & RefProp<typeof ComboboxFn>): JSX.Element → call _internal_ComponentCombobox<TValue, TMultiple extends boolean | undefined = false, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, TMultiple, TTag> & RefProp<typeof ComboboxFn>): React.JSX.Element
changed: call _internal_ComponentComboboxButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ComboboxButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element → call _internal_ComponentComboboxButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ComboboxButtonProps<TTag> & RefProp<typeof ButtonFn>): React.JSX.Element
changed: call _internal_ComponentComboboxInput<TType, TTag extends ElementType = typeof DEFAULT_INPUT_TAG>(props: ComboboxInputProps<TTag, TType> & RefProp<typeof InputFn>): JSX.Element → call _internal_ComponentComboboxInput<TType, TTag extends ElementType = typeof DEFAULT_INPUT_TAG>(props: ComboboxInputProps<TTag, TType> & RefProp<typeof InputFn>): React.JSX.Element
changed: call _internal_ComponentComboboxOption<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = Parameters<typeof ComboboxRoot>[0]['value']>(props: ComboboxOptionProps<TTag, TType> & RefProp<typeof OptionFn>): JSX.Element → call _internal_ComponentComboboxOption<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = Parameters<typeof ComboboxRoot>[0]['value']>(props: ComboboxOptionProps<TTag, TType> & RefProp<typeof OptionFn>): React.JSX.Element
changed: call _internal_ComponentComboboxOptions<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ComboboxOptionsProps<TTag> & RefProp<typeof OptionsFn>): JSX.Element → call _internal_ComponentComboboxOptions<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ComboboxOptionsProps<TTag> & RefProp<typeof OptionsFn>): React.JSX.Element
changed: interface _internal_ComponentComboboxLabel extends HasDisplayName → interface _internal_ComponentComboboxLabel extends _internal_ComponentLabel
changed: type ComboboxButtonProps<TTag extends ElementType> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl> → type ComboboxButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, { autoFocus?: boolean; disabled?: boolean }>
changed: type ComboboxInputProps<TTag extends ElementType, TType> = Props<TTag, InputRenderPropArg, InputPropsWeControl, { defaultValue?: TType; displayValue?(item: TType): string; onChange?(event: React.ChangeEvent<HTMLInputEl… → type ComboboxInputProps<TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TType = string> = Props<TTag, InputRenderPropArg, InputPropsWeControl, { defaultValue?: TType; disabled?: boolean; displayValue?: (item: TType) => string; onChange?: (event: Rea…
changed: type ComboboxOptionProps<TTag extends ElementType, TType> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, { disabled?: boolean; value: TType; order?: number }> → type ComboboxOptionProps<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, { disabled?: boolean; value: TType; order?: number }>
changed: type ComboboxOptionsProps<TTag extends ElementType> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl, PropsForFeatures<typeof OptionsRenderFeatures> & { hold?: boolean }> → type ComboboxOptionsProps<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl, PropsForFeatures<typeof OptionsRenderFeatures> & { hold?: boolean; anchor?: AnchorProps; portal?: bool…
changed: type ComboboxProps<TValue, TNullable extends boolean | undefined, TMultiple extends boolean | undefined, TTag extends ElementType> = ComboboxValueProps<TValue, TNullable, TMultiple, TTag> & { disabled?: boolean; __demoMode?: boolean; form?: string; name?: string } → type ComboboxProps<TValue, TMultiple extends boolean | undefined, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG> = Props<TTag, ComboboxRenderPropArg<NoInfer<TValue>>, 'value' | 'defaultValue' | 'multiple' | 'onChange' | 'by', { value?: TMultiple extends true ? EnsureArray<T…
added: let ComboboxButton: _internal_ComponentComboboxButton
added: let ComboboxInput: _internal_ComponentComboboxInput
added: let ComboboxLabel: _internal_ComponentComboboxLabel
added: let ComboboxOption: _internal_ComponentComboboxOption
added: let ComboboxOptions: _internal_ComponentComboboxOptions

added: class ComboboxMachine<T> extends Machine<State<T>, Actions<T>>
added: constructor ComboboxMachine(initialState: State<T>)
added: enum ActionTypes
added: enum ActivationTrigger
added: enum ComboboxState
added: enum ValueMode
added: interface State<T>
added: member ActionTypes.CloseCombobox = 1
added: member ActionTypes.DefaultToFirstOption = 6
added: member ActionTypes.GoToOption = 2
added: member ActionTypes.MarkInputAsMoved = 12
added: member ActionTypes.OpenCombobox = 0
added: member ActionTypes.RegisterOption = 4
added: member ActionTypes.SetActivationTrigger = 7
added: member ActionTypes.SetButtonElement = 10
added: member ActionTypes.SetInputElement = 9
added: member ActionTypes.SetOptionsElement = 11
added: member ActionTypes.SetTyping = 3
added: member ActionTypes.UnregisterOption = 5
added: member ActionTypes.UpdateVirtualConfiguration = 8
added: member ActivationTrigger.Focus = 1
added: member ActivationTrigger.Other = 2
added: member ActivationTrigger.Pointer = 0
added: member ComboboxState.Closed = 1
added: member ComboboxState.Open = 0
added: member ValueMode.Multi = 1
added: member ValueMode.Single = 0
added: method ComboboxMachine.reduce(state: Readonly<State<T>>, action: Actions<T>): State<T>
added: property ComboboxMachine.actions: { onChange: (newValue: T) => void; registerOption: (id: string, dataRef: ComboboxOptionDataRef<T>) => () => void; goToOption: (focus: { focus: Focus.Specific; idx: number } | { focus: Exclude<Focus, Focus.Specific> }, trigger?: ActivationTrigger) => void; setIsTyping: (isTyping: boolean) => void; closeCombobox: () => void; openCombobox: () => void; setActivationT…
added: property ComboboxMachine.selectors: { activeDescendantId: (state: State<T>) => string | undefined; activeOptionIndex: (state: State<T>) => number | null; activeOption: (state: State<T>) => T | null; isActive: (state: State<T>, value: T, id: string) => boolean; shouldScrollIntoView: (state: State<T>, value: T, id: string) => boolean; didInputMove(state: State<T>): boolean }
added: property State.__demoMode: boolean
added: property State.activationTrigger: ActivationTrigger
added: property State.activeOptionIndex: number | null
added: property State.buttonElement: HTMLButtonElement | null
added: property State.comboboxState: ComboboxState
added: property State.dataRef: MutableRefObject<{ value: unknown; defaultValue: unknown; disabled: boolean; invalid: boolean; mode: ValueMode; immediate: boolean; onChange: (value: T) => void; onClose?: () => void; compare(a: unknown, z: unknown): boolean; isSelected(value: unknown): boolean; virtual: { options: T[]; disabled: (value: T) => boolean } | null; calculateIndex(value: unknown): number; __dem…
added: property State.defaultToFirstOption: boolean
added: property State.id: string
added: property State.inputElement: HTMLInputElement | null
added: property State.inputPositionState: ElementPositionState
added: property State.isTyping: boolean
added: property State.options: { id: string; dataRef: ComboboxOptionDataRef<T> }[]
added: property State.optionsElement: HTMLElement | null
added: property State.virtual: { options: T[]; disabled: (value: unknown) => boolean } | null
added: static new ComboboxMachine<T, TMultiple extends boolean | undefined>({ id, virtual, __demoMode }: { id: string; virtual?: { options: TMultiple extends true ? EnsureArray<NoInfer<T>> : NoInfer<T>[]; disabled?: (value: TMultiple extends true ? EnsureArray<NoInfer<T>>[number] : NoInfer<T>) => boolean } | null; __demoMode?: boolean }): ComboboxMachine<any>
added: type ComboboxOptionDataRef<T> = MutableRefObject<{ disabled: boolean; value: T; domRef: MutableRefObject<HTMLElement | null>; order: number | null }>

added: const ComboboxContext: import('react').Context<ComboboxMachine<unknown> | null>
added: function useComboboxMachine({ id, virtual, __demoMode }: Parameters<typeof ComboboxMachine.new>[0]): ComboboxMachine<any>
added: function useComboboxMachineContext<T>(component: string): ComboboxMachine<T>

added: call _internal_ComponentDataInteractive<TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG>(props: DataInteractiveProps<TTag> & RefProp<typeof DataInteractiveFn>): React.JSX.Element
added: interface _internal_ComponentDataInteractive extends HasDisplayName
added: let DataInteractive: _internal_ComponentDataInteractive
added: type DataInteractiveProps<TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG> = Props<TTag, DataInteractiveRenderPropArg, DataInteractivePropsWeControl, {}>

changed: call _internal_ComponentDescription<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG>(props: DescriptionProps<TTag> & RefProp<typeof DescriptionFn>): JSX.Element → call _internal_ComponentDescription<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG>(props: DescriptionProps<TTag> & RefProp<typeof DescriptionFn>): React.JSX.Element
changed: function useDescriptions(): [string | undefined, (props: DescriptionProviderProps) => JSX.Element] → function useDescriptions(): [string | undefined, (props: DescriptionProviderProps) => React.JSX.Element]
added: function useDescribedBy(): string | undefined

added: export { DialogDescription } from '../dialog/dialog'

added: export { DialogPanel } from '../dialog/dialog'

added: export { DialogTitle } from '../dialog/dialog'

removed: call _internal_ComponentDialogOverlay<TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(props: DialogOverlayProps<TTag> & RefProp<typeof OverlayFn>): JSX.Element
removed: interface _internal_ComponentDialogOverlay extends HasDisplayName
removed: type DialogOverlayProps<TTag extends ElementType> = Props<TTag, OverlayRenderPropArg, OverlayPropsWeControl>
changed: call _internal_ComponentDialog<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(props: DialogProps<TTag> & RefProp<typeof DialogFn>): JSX.Element → call _internal_ComponentDialog<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(props: DialogProps<TTag> & RefProp<typeof DialogFn>): React.JSX.Element
changed: call _internal_ComponentDialogBackdrop<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(props: DialogBackdropProps<TTag> & RefProp<typeof BackdropFn>): JSX.Element → call _internal_ComponentDialogBackdrop<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(props: DialogBackdropProps<TTag> & RefProp<typeof BackdropFn>): React.JSX.Element
changed: call _internal_ComponentDialogPanel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DialogPanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element → call _internal_ComponentDialogPanel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DialogPanelProps<TTag> & RefProp<typeof PanelFn>): React.JSX.Element
changed: call _internal_ComponentDialogTitle<TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(props: DialogTitleProps<TTag> & RefProp<typeof TitleFn>): JSX.Element → call _internal_ComponentDialogTitle<TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(props: DialogTitleProps<TTag> & RefProp<typeof TitleFn>): React.JSX.Element
changed: let Dialog: _internal_ComponentDialog & { Backdrop: _internal_ComponentDialogBackdrop; Panel: _internal_ComponentDialogPanel; Overlay: _internal_ComponentDialogOverlay; Ti… → let Dialog: _internal_ComponentDialog & { Panel: _internal_ComponentDialogPanel; Title: _internal_ComponentDialogTitle; Description: _internal_ComponentDialogDescription }
changed: type DialogBackdropProps<TTag extends ElementType> = Props<TTag, BackdropRenderPropArg, BackdropPropsWeControl> → type DialogBackdropProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = Props<TTag, BackdropRenderPropArg, never, { transition?: boolean }>
changed: type DialogPanelProps<TTag extends ElementType> = Props<TTag, PanelRenderPropArg> → type DialogPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, never, { transition?: boolean }>
changed: type DialogProps<TTag extends ElementType> = Props<TTag, DialogRenderPropArg, DialogPropsWeControl, PropsForFeatures<typeof DialogRenderFeatures> & { open?: boolean; onClose(value: boolean): void; initial… → type DialogProps<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> = Props<TTag, DialogRenderPropArg, DialogPropsWeControl, PropsForFeatures<typeof DialogRenderFeatures> & { open?: boolean; onClose: (value: boolean) => void; ini…
changed: type DialogTitleProps<TTag extends ElementType> = Props<TTag, TitleRenderPropArg> → type DialogTitleProps<TTag extends ElementType = typeof DEFAULT_TITLE_TAG> = Props<TTag, TitleRenderPropArg>
added: let DialogBackdrop: _internal_ComponentDialogBackdrop
added: let DialogDescription: _internal_ComponentDialogDescription
added: let DialogPanel: _internal_ComponentDialogPanel
added: let DialogTitle: _internal_ComponentDialogTitle

added: export { DisclosureButton } from '../disclosure/disclosure'

added: export { DisclosurePanel } from '../disclosure/disclosure'

changed: call _internal_ComponentDisclosure<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG>(props: DisclosureProps<TTag> & RefProp<typeof DisclosureFn>): JSX.Element → call _internal_ComponentDisclosure<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG>(props: DisclosureProps<TTag> & RefProp<typeof DisclosureFn>): React.JSX.Element
changed: call _internal_ComponentDisclosureButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: DisclosureButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element → call _internal_ComponentDisclosureButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: DisclosureButtonProps<TTag> & RefProp<typeof ButtonFn>): React.JSX.Element
changed: call _internal_ComponentDisclosurePanel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DisclosurePanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element → call _internal_ComponentDisclosurePanel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DisclosurePanelProps<TTag> & RefProp<typeof PanelFn>): React.JSX.Element
changed: type DisclosureButtonProps<TTag extends ElementType> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, { disabled?: boolean }> → type DisclosureButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, { disabled?: boolean; autoFocus?: boolean }>
changed: type DisclosurePanelProps<TTag extends ElementType> = Props<TTag, PanelRenderPropArg> & PropsForFeatures<typeof PanelRenderFeatures> → type DisclosurePanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, DisclosurePanelPropsWeControl, { transition?: boolean } & PropsForFeatures<typeof PanelRenderFeatures>>
changed: type DisclosureProps<TTag extends ElementType> = Props<TTag, DisclosureRenderPropArg> & { defaultOpen?: boolean } → type DisclosureProps<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG> = Props<TTag, DisclosureRenderPropArg, DisclosurePropsWeControl, { defaultOpen?: boolean }>
added: let DisclosureButton: _internal_ComponentDisclosureButton
added: let DisclosurePanel: _internal_ComponentDisclosurePanel

added: call _internal_ComponentField<TTag extends ElementType = typeof DEFAULT_FIELD_TAG>(props: FieldProps<TTag> & RefProp<typeof FieldFn>): React.JSX.Element
added: interface _internal_ComponentField extends HasDisplayName
added: let Field: _internal_ComponentField
added: type FieldProps<TTag extends ElementType = typeof DEFAULT_FIELD_TAG> = Props<TTag, FieldRenderPropArg, FieldPropsWeControl, { disabled?: boolean }>

added: call _internal_ComponentFieldset<TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG>(props: FieldsetProps<TTag> & RefProp<typeof FieldsetFn>): React.JSX.Element
added: interface _internal_ComponentFieldset extends HasDisplayName
added: let Fieldset: _internal_ComponentFieldset
added: type FieldsetProps<TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG> = Props<TTag, FieldsetRenderPropArg, FieldsetPropsWeControl, { disabled?: boolean }>

added: export { FocusTrapFeatures } from '../focus-trap/focus-trap'

changed: call _internal_ComponentFocusTrap<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(props: FocusTrapProps<TTag> & RefProp<typeof FocusTrapFn>): JSX.Element → call _internal_ComponentFocusTrap<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(props: FocusTrapProps<TTag> & RefProp<typeof FocusTrapFn>): React.JSX.Element
changed: let FocusTrap: _internal_ComponentFocusTrap & { features: typeof Features } → let FocusTrap: _internal_ComponentFocusTrap & { features: typeof FocusTrapFeatures }
changed: type FocusTrapProps<TTag extends ElementType> = Props<TTag> & { initialFocus?: MutableRefObject<HTMLElement | null>; features?: Features; containers?: Containers } → type FocusTrapProps<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG> = Props<TTag, FocusTrapRenderPropArg, FocusTrapPropsWeControl, { initialFocus?: MutableRefObject<HTMLElement | null>; initialFocusFallback?: MutableRefObject<HTM…
added: enum FocusTrapFeatures
added: member FocusTrapFeatures.AutoFocus = 16
added: member FocusTrapFeatures.FocusLock = 4
added: member FocusTrapFeatures.InitialFocus = 1
added: member FocusTrapFeatures.None = 0
added: member FocusTrapFeatures.RestoreFocus = 8
added: member FocusTrapFeatures.TabLock = 2

added: call _internal_ComponentInput<TTag extends ElementType = typeof DEFAULT_INPUT_TAG>(props: InputProps<TTag> & RefProp<typeof InputFn>): React.JSX.Element
added: interface _internal_ComponentInput extends HasDisplayName
added: let Input: _internal_ComponentInput
added: type InputProps<TTag extends ElementType = typeof DEFAULT_INPUT_TAG> = Props<TTag, InputRenderPropArg, InputPropsWeControl, { disabled?: boolean; invalid?: boolean; autoFocus?: boolean }>

changed: call _internal_ComponentLabel<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: LabelProps<TTag> & RefProp<typeof LabelFn>): JSX.Element → call _internal_ComponentLabel<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: LabelProps<TTag> & RefProp<typeof LabelFn>): React.JSX.Element
changed: function useLabels(): [string | undefined, (props: LabelProviderProps) => JSX.Element] → function useLabels({ inherit }?: { inherit?: boolean | undefined }): [string | undefined, (props: LabelProviderProps & { inherit?: boolean }) => React.JSX.Element]
changed: type LabelProps<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> = Props<TTag> & { passive?: boolean } → type LabelProps<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> = Props<TTag> & { passive?: boolean; htmlFor?: string }
added: function useLabelContext(): { value: string | undefined; register(value: string): () => void } & SharedData
added: function useLabelledBy(alwaysAvailableIds?: (string | undefined | null)[]): string | undefined

added: call _internal_ComponentLegend<TTag extends ElementType = typeof DEFAULT_LEGEND_TAG>(props: LegendProps<TTag> & RefProp<typeof LegendFn>): React.JSX.Element
added: interface _internal_ComponentLegend extends HasDisplayName
added: let Legend: _internal_ComponentLegend
added: type LegendProps<TTag extends ElementType = typeof DEFAULT_LEGEND_TAG> = Props<TTag, LegendRenderPropArg, LegendPropsWeControl, {}>

added: export { ListboxButton } from '../listbox/listbox'

added: export { ListboxLabel } from '../listbox/listbox'

added: export { ListboxOption } from '../listbox/listbox'

added: export { ListboxOptions } from '../listbox/listbox'

added: export { ListboxSelectedOption } from '../listbox/listbox'

removed: call _internal_ComponentListboxLabel<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: ListboxLabelProps<TTag> & RefProp<typeof LabelFn>): JSX.Element
removed: type ListboxLabelProps<TTag extends ElementType> = Props<TTag, LabelRenderPropArg>
changed: call _internal_ComponentListbox<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType extends (infer U)[] ? U : TType>(props: ListboxProps<TTag, TType, TActualType> & RefProp<typeof ListboxFn>): JSX.Element → call _internal_ComponentListbox<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType extends (infer U)[] ? U : TType>(props: ListboxProps<TTag, TType, TActualType> & RefProp<typeof ListboxFn>): React.JSX.Element
changed: call _internal_ComponentListboxButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ListboxButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element → call _internal_ComponentListboxButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ListboxButtonProps<TTag> & RefProp<typeof ButtonFn>): React.JSX.Element
changed: call _internal_ComponentListboxOption<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = Parameters<typeof ListboxRoot>[0]['value']>(props: ListboxOptionProps<TTag, TType> & RefProp<typeof OptionFn>): JSX.Element → call _internal_ComponentListboxOption<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = Parameters<typeof ListboxRoot>[0]['value']>(props: ListboxOptionProps<TTag, TType> & RefProp<typeof OptionFn>): React.JSX.Element
changed: call _internal_ComponentListboxOptions<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ListboxOptionsProps<TTag> & RefProp<typeof OptionsFn>): JSX.Element → call _internal_ComponentListboxOptions<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ListboxOptionsProps<TTag> & RefProp<typeof OptionsFn>): React.JSX.Element
changed: interface _internal_ComponentListboxLabel extends HasDisplayName → interface _internal_ComponentListboxLabel extends _internal_ComponentLabel
changed: type ListboxButtonProps<TTag extends ElementType> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl> → type ListboxButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, { autoFocus?: boolean; disabled?: boolean }>
changed: type ListboxOptionProps<TTag extends ElementType, TType> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, { disabled?: boolean; value: TType }> → type ListboxOptionProps<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, { disabled?: boolean; value: TType }>
changed: type ListboxOptionsProps<TTag extends ElementType> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl> & PropsForFeatures<typeof OptionsRenderFeatures> → type ListboxOptionsProps<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl, { anchor?: AnchorPropsWithSelection; portal?: boolean; modal?: boolean; transition?: boolean } & Props…
changed: type ListboxProps<TTag extends ElementType, TType, TActualType> = Props<TTag, ListboxRenderPropArg<TType>, 'value' | 'defaultValue' | 'onChange' | 'by' | 'disabled' | 'horizontal' | 'name' | 'multiple'> & { value?: TType; def… → type ListboxProps<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType> = Props<TTag, ListboxRenderPropArg<TType>, 'value' | 'defaultValue' | 'onChange' | 'by' | 'disabled' | 'horizontal' | 'name' | 'multiple', { value?: TType; defau…
added: call _internal_ComponentListboxSelectedOption<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG>(props: ListboxSelectedOptionProps<TTag> & RefProp<typeof SelectedFn>): React.JSX.Element
added: interface _internal_ComponentListboxSelectedOption extends HasDisplayName
added: let ListboxButton: _internal_ComponentListboxButton
added: let ListboxLabel: _internal_ComponentListboxLabel
added: let ListboxOption: _internal_ComponentListboxOption
added: let ListboxOptions: _internal_ComponentListboxOptions
added: let ListboxSelectedOption: _internal_ComponentListboxSelectedOption
added: type ListboxSelectedOptionProps<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG> = Props<TTag, SelectedOptionRenderPropArg, SelectedOptionPropsWeControl, { options: React.ReactNode; placeholder?: React.ReactNode }>

added: class ListboxMachine<T> extends Machine<State<T>, Actions<T>>
added: constructor ListboxMachine(initialState: State<T>)
added: enum ActionTypes
added: enum ActivationTrigger
added: enum ListboxStates
added: enum ValueMode
added: member ActionTypes.ClearSearch = 4
added: member ActionTypes.CloseListbox = 1
added: member ActionTypes.GoToOption = 2
added: member ActionTypes.MarkButtonAsMoved = 11
added: member ActionTypes.OpenListbox = 0
added: member ActionTypes.RegisterOptions = 6
added: member ActionTypes.Search = 3
added: member ActionTypes.SelectOption = 5
added: member ActionTypes.SetButtonElement = 8
added: member ActionTypes.SetOptionsElement = 9
added: member ActionTypes.SortOptions = 10
added: member ActionTypes.UnregisterOptions = 7
added: member ActivationTrigger.Other = 1
added: member ActivationTrigger.Pointer = 0
added: member ListboxStates.Closed = 1
added: member ListboxStates.Open = 0
added: member ValueMode.Multi = 1
added: member ValueMode.Single = 0
added: method ListboxMachine.reduce(state: Readonly<State<T>>, action: Actions<T>): State<T>
added: property ListboxMachine.actions: { onChange: (newValue: T) => void; registerOption: (id: string, dataRef: ListboxOptionDataRef<T>) => void; unregisterOption: (id: string) => void; goToOption: (focus: { focus: Focus.Specific; id: string } | { focus: Exclude<Focus, Focus.Specific> }, trigger?: ActivationTrigger | undefined) => void; closeListbox: () => void; openListbox: (focus: { focus: Exclude<Fo…
added: property ListboxMachine.selectors: { activeDescendantId(state: State<T>): string | undefined; isActive(state: State<T>, id: string): boolean; hasFrozenValue(state: State<T>): boolean; shouldScrollIntoView(state: State<T>, id: string): boolean; didButtonMove(state: State<T>): boolean }
added: static new ListboxMachine({ id, __demoMode }: { id: string; __demoMode?: boolean }): ListboxMachine<unknown>

added: const ListboxContext: import('react').Context<ListboxMachine<unknown> | null>
added: function useListboxMachine({ id, __demoMode }: { id: string; __demoMode?: boolean }): ListboxMachine<unknown>
added: function useListboxMachineContext<T>(component: string): ListboxMachine<T>

added: export { MenuButton } from '../menu/menu'

added: export { MenuHeading } from '../menu/menu'

added: export { MenuItem } from '../menu/menu'

added: export { MenuItems } from '../menu/menu'

added: export { MenuSection } from '../menu/menu'

added: export { MenuSeparator } from '../menu/menu'

changed: call _internal_ComponentMenu<TTag extends ElementType = typeof DEFAULT_MENU_TAG>(props: MenuProps<TTag> & RefProp<typeof MenuFn>): JSX.Element → call _internal_ComponentMenu<TTag extends ElementType = typeof DEFAULT_MENU_TAG>(props: MenuProps<TTag> & RefProp<typeof MenuFn>): React.JSX.Element
changed: call _internal_ComponentMenuButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: MenuButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element → call _internal_ComponentMenuButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: MenuButtonProps<TTag> & RefProp<typeof ButtonFn>): React.JSX.Element
changed: call _internal_ComponentMenuItem<TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(props: MenuItemProps<TTag> & RefProp<typeof ItemFn>): JSX.Element → call _internal_ComponentMenuItem<TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(props: MenuItemProps<TTag> & RefProp<typeof ItemFn>): React.JSX.Element
changed: call _internal_ComponentMenuItems<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(props: MenuItemsProps<TTag> & RefProp<typeof ItemsFn>): JSX.Element → call _internal_ComponentMenuItems<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(props: MenuItemsProps<TTag> & RefProp<typeof ItemsFn>): React.JSX.Element
changed: let Menu: _internal_ComponentMenu & { Button: _internal_ComponentMenuButton; Items: _internal_ComponentMenuItems; Item: _internal_ComponentMenuItem } → let Menu: _internal_ComponentMenu & { Button: _internal_ComponentMenuButton; Items: _internal_ComponentMenuItems; Item: _internal_ComponentMenuItem; Section: _internal_C…
changed: type MenuButtonProps<TTag extends ElementType> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, { disabled?: boolean }> → type MenuButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, { disabled?: boolean; autoFocus?: boolean }>
changed: type MenuItemProps<TTag extends ElementType> = Props<TTag, ItemRenderPropArg, ItemPropsWeControl> & { disabled?: boolean } → type MenuItemProps<TTag extends ElementType = typeof DEFAULT_ITEM_TAG> = Props<TTag, ItemRenderPropArg, ItemPropsWeControl, { disabled?: boolean }>
changed: type MenuItemsProps<TTag extends ElementType> = Props<TTag, ItemsRenderPropArg, ItemsPropsWeControl> & PropsForFeatures<typeof ItemsRenderFeatures> → type MenuItemsProps<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG> = Props<TTag, ItemsRenderPropArg, ItemsPropsWeControl, { anchor?: AnchorProps; portal?: boolean; modal?: boolean; transition?: boolean; static?: boolean; unmount…
changed: type MenuProps<TTag extends ElementType> = Props<TTag, MenuRenderPropArg, never, { __demoMode?: boolean }> → type MenuProps<TTag extends ElementType = typeof DEFAULT_MENU_TAG> = Props<TTag, MenuRenderPropArg, MenuPropsWeControl, { __demoMode?: boolean }>
added: call _internal_ComponentMenuHeading<TTag extends ElementType = typeof DEFAULT_HEADING_TAG>(props: MenuHeadingProps<TTag> & RefProp<typeof HeadingFn>): React.JSX.Element
added: call _internal_ComponentMenuSection<TTag extends ElementType = typeof DEFAULT_SECTION_TAG>(props: MenuSectionProps<TTag> & RefProp<typeof SectionFn>): React.JSX.Element
added: call _internal_ComponentMenuSeparator<TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG>(props: MenuSeparatorProps<TTag> & RefProp<typeof SeparatorFn>): React.JSX.Element
added: interface _internal_ComponentMenuHeading extends HasDisplayName
added: interface _internal_ComponentMenuSection extends HasDisplayName
added: interface _internal_ComponentMenuSeparator extends HasDisplayName
added: let MenuButton: _internal_ComponentMenuButton
added: let MenuHeading: _internal_ComponentMenuHeading
added: let MenuItem: _internal_ComponentMenuItem
added: let MenuItems: _internal_ComponentMenuItems
added: let MenuSection: _internal_ComponentMenuSection
added: let MenuSeparator: _internal_ComponentMenuSeparator
added: type MenuHeadingProps<TTag extends ElementType = typeof DEFAULT_HEADING_TAG> = Props<TTag, HeadingRenderPropArg, HeadingPropsWeControl>
added: type MenuSectionProps<TTag extends ElementType = typeof DEFAULT_SECTION_TAG> = Props<TTag, SectionRenderPropArg, SectionPropsWeControl>
added: type MenuSeparatorProps<TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG> = Props<TTag, SeparatorRenderPropArg, SeparatorPropsWeControl>

added: class MenuMachine extends Machine<State, Actions>
added: constructor MenuMachine(initialState: State)
added: enum ActionTypes
added: enum ActivationTrigger
added: enum MenuState
added: interface State
added: member ActionTypes.ClearSearch = 4
added: member ActionTypes.CloseMenu = 1
added: member ActionTypes.GoToItem = 2
added: member ActionTypes.MarkButtonAsMoved = 10
added: member ActionTypes.OpenMenu = 0
added: member ActionTypes.RegisterItems = 5
added: member ActionTypes.Search = 3
added: member ActionTypes.SetButtonElement = 7
added: member ActionTypes.SetItemsElement = 8
added: member ActionTypes.SortItems = 9
added: member ActionTypes.UnregisterItems = 6
added: member ActivationTrigger.Other = 1
added: member ActivationTrigger.Pointer = 0
added: member MenuState.Closed = 1
added: member MenuState.Open = 0
added: method MenuMachine.reduce(state: Readonly<State>, action: Actions): State
added: property MenuMachine.actions: { registerItem: (id: string, dataRef: MenuItemDataRef) => void; unregisterItem: (id: string) => void }
added: property MenuMachine.selectors: { activeDescendantId(state: State): string | undefined; isActive(state: State, id: string): boolean; shouldScrollIntoView(state: State, id: string): boolean; didButtonMove(state: State): boolean }
added: property State.__demoMode: boolean
added: property State.activationTrigger: ActivationTrigger
added: property State.activeItemIndex: number | null
added: property State.buttonElement: HTMLButtonElement | null
added: property State.buttonPositionState: ElementPositionState
added: property State.id: string
added: property State.items: { id: string; dataRef: MenuItemDataRef }[]
added: property State.itemsElement: HTMLElement | null
added: property State.menuState: MenuState
added: property State.pendingFocus: { focus: Exclude<Focus, Focus.Specific> } | { focus: Focus.Specific; id: string }
added: property State.pendingShouldSort: boolean
added: property State.searchQuery: string
added: static new MenuMachine({ id, __demoMode }: { id: string; __demoMode?: boolean }): MenuMachine
added: type Actions = { type: ActionTypes.CloseMenu } | { type: ActionTypes.OpenMenu; focus: { focus: Exclude<Focus, Focus.Specific> } | { focus: Focus.Specific; id: string }; trigg…
added: type MenuItemDataRef = { current: { textValue?: string; disabled: boolean; domRef: { current: HTMLElement | null } } }

added: const MenuContext: import('react').Context<MenuMachine | null>
added: function useMenuMachine({ id, __demoMode }: { id: string; __demoMode?: boolean }): MenuMachine
added: function useMenuMachineContext(component: string): MenuMachine

added: enum MouseButton
added: member MouseButton.Left = 0
added: member MouseButton.Right = 2

added: export { PopoverBackdrop } from '../popover/popover'

added: export { PopoverButton } from '../popover/popover'

added: export { PopoverGroup } from '../popover/popover'

added: export { PopoverOverlay } from '../popover/popover'

added: export { PopoverPanel } from '../popover/popover'

removed: call _internal_ComponentPopoverOverlay<TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(props: PopoverOverlayProps<TTag> & RefProp<typeof OverlayFn>): JSX.Element
removed: interface _internal_ComponentPopoverOverlay extends HasDisplayName
changed: call _internal_ComponentPopover<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(props: PopoverProps<TTag> & RefProp<typeof PopoverFn>): JSX.Element → call _internal_ComponentPopover<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(props: PopoverProps<TTag> & RefProp<typeof PopoverFn>): React.JSX.Element
changed: call _internal_ComponentPopoverButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: PopoverButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element → call _internal_ComponentPopoverButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: PopoverButtonProps<TTag> & RefProp<typeof ButtonFn>): React.JSX.Element
changed: call _internal_ComponentPopoverGroup<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: PopoverGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element → call _internal_ComponentPopoverGroup<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: PopoverGroupProps<TTag> & RefProp<typeof GroupFn>): React.JSX.Element
changed: call _internal_ComponentPopoverPanel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: PopoverPanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element → call _internal_ComponentPopoverPanel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: PopoverPanelProps<TTag> & RefProp<typeof PanelFn>): React.JSX.Element
changed: let Popover: _internal_ComponentPopover & { Button: _internal_ComponentPopoverButton; Overlay: _internal_ComponentPopoverOverlay; Panel: _internal_ComponentPopoverPanel; Gr… → let Popover: _internal_ComponentPopover & { Button: _internal_ComponentPopoverButton; Backdrop: _internal_ComponentPopoverBackdrop; Overlay: _internal_ComponentPopoverBackd…
changed: type PopoverButtonProps<TTag extends ElementType> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, { disabled?: boolean }> → type PopoverButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, { disabled?: boolean; autoFocus?: boolean }>
changed: type PopoverGroupProps<TTag extends ElementType> = Props<TTag, GroupRenderPropArg> → type PopoverGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag, GroupRenderPropArg, GroupPropsWeControl>
changed: type PopoverOverlayProps<TTag extends ElementType> = Props<TTag, OverlayRenderPropArg, OverlayPropsWeControl> & PropsForFeatures<typeof OverlayRenderFeatures> → type PopoverOverlayProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = PopoverBackdropProps<TTag>
changed: type PopoverPanelProps<TTag extends ElementType> = Props<TTag, PanelRenderPropArg, PanelPropsWeControl, PropsForFeatures<typeof PanelRenderFeatures> & { focus?: boolean }> → type PopoverPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, PanelPropsWeControl, { focus?: boolean; anchor?: AnchorProps; portal?: boolean; modal?: boolean; transition?: boolean; static?:…
changed: type PopoverProps<TTag extends ElementType> = Props<TTag, PopoverRenderPropArg, never, { __demoMode?: boolean }> → type PopoverProps<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG> = Props<TTag, PopoverRenderPropArg, PopoverPropsWeControl, { __demoMode?: boolean }>
added: call _internal_ComponentPopoverBackdrop<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(props: PopoverBackdropProps<TTag> & RefProp<typeof BackdropFn>): React.JSX.Element
added: interface _internal_ComponentPopoverBackdrop extends HasDisplayName
added: let PopoverBackdrop: _internal_ComponentPopoverBackdrop
added: let PopoverButton: _internal_ComponentPopoverButton
added: let PopoverGroup: _internal_ComponentPopoverGroup
added: let PopoverOverlay: _internal_ComponentPopoverBackdrop
added: let PopoverPanel: _internal_ComponentPopoverPanel
added: type PopoverBackdropProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = Props<TTag, BackdropRenderPropArg, BackdropPropsWeControl, { transition?: boolean } & PropsForFeatures<typeof BackdropRenderFeatures>>

added: class PopoverMachine extends Machine<State, Actions>
added: constructor PopoverMachine(initialState: State)
added: enum ActionTypes
added: enum PopoverStates
added: member ActionTypes.ClosePopover = 1
added: member ActionTypes.OpenPopover = 0
added: member ActionTypes.SetButton = 2
added: member ActionTypes.SetButtonId = 3
added: member ActionTypes.SetPanel = 4
added: member ActionTypes.SetPanelId = 5
added: member PopoverStates.Closed = 1
added: member PopoverStates.Open = 0
added: method PopoverMachine.reduce(state: Readonly<State>, action: Actions): State
added: property PopoverMachine.actions: { close: () => void; refocusableClose: (focusableElement?: HTMLElement | { current: HTMLElement | null } | MouseEvent<HTMLElement>) => void; open: () => void; setButtonId: (id: string | null) => void; setButton: (button: HTMLElement | null) => void; setPanelId: (id: string | null) => void; setPanel: (panel: HTMLElement | null) => void }
added: property PopoverMachine.selectors: { isPortalled: (state: State) => boolean }
added: static new PopoverMachine({ id, __demoMode }: { id: string; __demoMode?: boolean }): PopoverMachine
added: type Actions = { type: ActionTypes.OpenPopover } | { type: ActionTypes.ClosePopover } | { type: ActionTypes.SetButton; button: HTMLElement | null } | { type: ActionTypes.SetB…

added: const PopoverContext: import('react').Context<PopoverMachine | null>
added: function usePopoverMachine({ id, __demoMode }: { id: string; __demoMode?: boolean }): PopoverMachine
added: function usePopoverMachineContext(component: string): PopoverMachine

changed: call _internal_ComponentPortal<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG>(props: PortalProps<TTag> & RefProp<typeof PortalFn>): JSX.Element → call _internal_ComponentPortal<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG>(props: PortalProps<TTag> & RefProp<typeof PortalFn>): React.JSX.Element
changed: call _internal_ComponentPortalGroup<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: PortalGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element → call _internal_ComponentPortalGroup<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: PortalGroupProps<TTag> & RefProp<typeof GroupFn>): React.JSX.Element
changed: function useNestedPortals(): readonly [React.MutableRefObject<HTMLElement[]>, ({ children }: { children: React.ReactNode }) => JSX.Element] → function useNestedPortals(): readonly [React.MutableRefObject<HTMLElement[]>, ({ children }: { children: React.ReactNode }) => React.JSX.Element]
changed: type PortalGroupProps<TTag extends ElementType> = Props<TTag, GroupRenderPropArg> & { target: MutableRefObject<HTMLElement | null> } → type PortalGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag, GroupRenderPropArg, GroupPropsWeControl, { target: MutableRefObject<HTMLElement | null> }>
changed: type PortalProps<TTag extends ElementType> = Props<TTag, PortalRenderPropArg> → type PortalProps<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> = Props<TTag, PortalRenderPropArg, PortalPropsWeControl, { enabled?: boolean; ownerDocument?: Document | null }>
added: let PortalGroup: _internal_ComponentPortalGroup

added: export { RadioGroupDescription } from '../radio-group/radio-group'

added: export { RadioGroupLabel } from '../radio-group/radio-group'

added: export { RadioGroupOption } from '../radio-group/radio-group'

changed: call _internal_ComponentRadioGroup<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG, TType = string>(props: RadioGroupProps<TTag, TType> & RefProp<typeof RadioGroupFn>): JSX.Element → call _internal_ComponentRadioGroup<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG, TType = string>(props: RadioGroupProps<TTag, TType> & RefProp<typeof RadioGroupFn>): React.JSX.Element
changed: call _internal_ComponentRadioOption<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string>(props: RadioOptionProps<TTag, TType> & RefProp<typeof OptionFn>): JSX.Element → call _internal_ComponentRadioOption<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string>(props: RadioOptionProps<TTag, TType> & RefProp<typeof OptionFn>): React.JSX.Element
changed: let RadioGroup: _internal_ComponentRadioGroup & { Option: _internal_ComponentRadioOption; Label: _internal_ComponentRadioLabel; Description: _internal_ComponentRadioDescriptio… → let RadioGroup: _internal_ComponentRadioGroup & { Option: _internal_ComponentRadioOption; Radio: _internal_ComponentRadio; Label: _internal_ComponentRadioLabel; Description: _…
changed: type RadioGroupProps<TTag extends ElementType, TType> = Props<TTag, RadioGroupRenderPropArg<TType>, RadioGroupPropsWeControl, { value?: TType; defaultValue?: TType; onChange?(value: TType): void; by?: (keyof TType &… → type RadioGroupProps<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG, TType = string> = Props<TTag, RadioGroupRenderPropArg<TType>, RadioGroupPropsWeControl, { value?: TType; defaultValue?: TType; onChange?: (value: TType) => void; by?: ByComparat…
changed: type RadioOptionProps<TTag extends ElementType, TType> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, { value: TType; disabled?: boolean }> → type RadioOptionProps<TTag extends ElementType, TType> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, { value: TType; disabled?: boolean; autoFocus?: boolean }>
added: call _internal_ComponentRadio<TTag extends ElementType = typeof DEFAULT_RADIO_TAG, TType = string>(props: RadioProps<TTag, TType> & RefProp<typeof RadioFn>): React.JSX.Element
added: interface _internal_ComponentRadio extends HasDisplayName
added: let Radio: _internal_ComponentRadio
added: let RadioGroupDescription: _internal_ComponentRadioDescription
added: let RadioGroupLabel: _internal_ComponentRadioLabel
added: let RadioGroupOption: _internal_ComponentRadioOption
added: type RadioProps<TTag extends ElementType = typeof DEFAULT_RADIO_TAG, TType = string> = Props<TTag, RadioRenderPropArg, RadioPropsWeControl, { value: TType; disabled?: boolean; autoFocus?: boolean }>

added: export { Radio } from '../radio-group/radio-group'

added: call _internal_ComponentSelect<TTag extends ElementType = typeof DEFAULT_SELECT_TAG>(props: SelectProps<TTag> & RefProp<typeof SelectFn>): React.JSX.Element
added: interface _internal_ComponentSelect extends HasDisplayName
added: let Select: _internal_ComponentSelect
added: type SelectProps<TTag extends ElementType = typeof DEFAULT_SELECT_TAG> = Props<TTag, SelectRenderPropArg, SelectPropsWeControl, { disabled?: boolean; invalid?: boolean; autoFocus?: boolean }>

added: export { SwitchDescription } from '../switch/switch'

added: export { SwitchGroup } from '../switch/switch'

added: export { SwitchLabel } from '../switch/switch'

changed: call _internal_ComponentSwitch<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(props: SwitchProps<TTag> & RefProp<typeof SwitchFn>): JSX.Element → call _internal_ComponentSwitch<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(props: SwitchProps<TTag> & RefProp<typeof SwitchFn>): React.JSX.Element
changed: call _internal_ComponentSwitchGroup<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: SwitchGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element → call _internal_ComponentSwitchGroup<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: SwitchGroupProps<TTag> & RefProp<typeof GroupFn>): React.JSX.Element
changed: type SwitchGroupProps<TTag extends ElementType> = Props<TTag> → type SwitchGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag>
changed: type SwitchProps<TTag extends ElementType> = Props<TTag, SwitchRenderPropArg, SwitchPropsWeControl, { checked?: boolean; defaultChecked?: boolean; onChange?(checked: boolean): void; name?: string; value?:… → type SwitchProps<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> = Props<TTag, SwitchRenderPropArg, SwitchPropsWeControl, { checked?: boolean; defaultChecked?: boolean; onChange?: (checked: boolean) => void; name?: string; val…
added: let SwitchDescription: _internal_ComponentSwitchDescription
added: let SwitchGroup: _internal_ComponentSwitchGroup
added: let SwitchLabel: _internal_ComponentSwitchLabel

added: export { TabGroup } from '../tabs/tabs'

added: export { TabList } from '../tabs/tabs'

added: export { TabPanel } from '../tabs/tabs'

added: export { TabPanels } from '../tabs/tabs'

added: export { Tab } from '../tabs/tabs'

changed: call _internal_ComponentTab<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(props: TabProps<TTag> & RefProp<typeof TabFn>): JSX.Element → call _internal_ComponentTab<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(props: TabProps<TTag> & RefProp<typeof TabFn>): React.JSX.Element
changed: call _internal_ComponentTabGroup<TTag extends ElementType = typeof DEFAULT_TABS_TAG>(props: TabGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element → call _internal_ComponentTabGroup<TTag extends ElementType = typeof DEFAULT_TABS_TAG>(props: TabGroupProps<TTag> & RefProp<typeof GroupFn>): React.JSX.Element
changed: call _internal_ComponentTabList<TTag extends ElementType = typeof DEFAULT_LIST_TAG>(props: TabListProps<TTag> & RefProp<typeof ListFn>): JSX.Element → call _internal_ComponentTabList<TTag extends ElementType = typeof DEFAULT_LIST_TAG>(props: TabListProps<TTag> & RefProp<typeof ListFn>): React.JSX.Element
changed: call _internal_ComponentTabPanel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: TabPanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element → call _internal_ComponentTabPanel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: TabPanelProps<TTag> & RefProp<typeof PanelFn>): React.JSX.Element
changed: call _internal_ComponentTabPanels<TTag extends ElementType = typeof DEFAULT_PANELS_TAG>(props: TabPanelsProps<TTag> & RefProp<typeof PanelsFn>): JSX.Element → call _internal_ComponentTabPanels<TTag extends ElementType = typeof DEFAULT_PANELS_TAG>(props: TabPanelsProps<TTag> & RefProp<typeof PanelsFn>): React.JSX.Element
changed: type TabGroupProps<TTag extends ElementType> = Props<TTag, TabsRenderPropArg, never, { defaultIndex?: number; onChange?: (index: number) => void; selectedIndex?: number; vertical?: boolean; manual?: boolean… → type TabGroupProps<TTag extends ElementType = typeof DEFAULT_TABS_TAG> = Props<TTag, TabsRenderPropArg, TabsPropsWeControl, { defaultIndex?: number; onChange?: (index: number) => void; selectedIndex?: number; vertical?: boolean; man…
changed: type TabListProps<TTag extends ElementType> = Props<TTag, ListRenderPropArg, ListPropsWeControl, {}> → type TabListProps<TTag extends ElementType = typeof DEFAULT_LIST_TAG> = Props<TTag, ListRenderPropArg, ListPropsWeControl, {}>
changed: type TabPanelProps<TTag extends ElementType> = Props<TTag, PanelRenderPropArg, PanelPropsWeControl, PropsForFeatures<typeof PanelRenderFeatures> & { id?: string; tabIndex?: number }> → type TabPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, PanelPropsWeControl, PropsForFeatures<typeof PanelRenderFeatures> & { id?: string; tabIndex?: number }>
changed: type TabPanelsProps<TTag extends ElementType> = Props<TTag, PanelsRenderPropArg> → type TabPanelsProps<TTag extends ElementType = typeof DEFAULT_PANELS_TAG> = Props<TTag, PanelsRenderPropArg>
changed: type TabProps<TTag extends ElementType> = Props<TTag, TabRenderPropArg, TabPropsWeControl> & { disabled?: boolean } → type TabProps<TTag extends ElementType = typeof DEFAULT_TAB_TAG> = Props<TTag, TabRenderPropArg, TabPropsWeControl, { autoFocus?: boolean; disabled?: boolean }>
added: let TabGroup: _internal_ComponentTabGroup
added: let TabList: _internal_ComponentTabList
added: let TabPanel: _internal_ComponentTabPanel
added: let TabPanels: _internal_ComponentTabPanels

added: call _internal_ComponentTextarea<TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG>(props: TextareaProps<TTag> & RefProp<typeof TextareaFn>): React.JSX.Element
added: interface _internal_ComponentTextarea extends HasDisplayName
added: let Textarea: _internal_ComponentTextarea
added: type TextareaProps<TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG> = Props<TTag, TextareaRenderPropArg, TextareaPropsWeControl, { disabled?: boolean; invalid?: boolean; autoFocus?: boolean }>

added: call _internal_ComponentPanel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: TooltipPanelProps<TTag> & RefProp<typeof PanelFn>): React.JSX.Element
added: call _internal_ComponentTooltip<TTag extends ElementType = typeof DEFAULT_TOOLTIP_TAG>(props: TooltipProps<TTag> & RefProp<typeof TooltipFn>): React.JSX.Element
added: call _internal_ComponentTrigger<TTag extends ElementType = typeof DEFAULT_TRIGGER_TAG>(props: TooltipTriggerProps<TTag> & RefProp<typeof TriggerFn>): React.JSX.Element
added: interface _internal_ComponentPanel extends HasDisplayName
added: interface _internal_ComponentTooltip extends HasDisplayName
added: interface _internal_ComponentTrigger extends HasDisplayName
added: let Tooltip: _internal_ComponentTooltip
added: let TooltipPanel: _internal_ComponentPanel
added: let TooltipTrigger: _internal_ComponentTrigger
added: type TooltipPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, PanelPropsWeControl, { anchor?: AnchorProps } & PropsForFeatures<typeof PanelRenderFeatures>>
added: type TooltipProps<TTag extends ElementType = typeof DEFAULT_TOOLTIP_TAG> = Props<TTag, TooltipRenderPropArg, TooltipPropsWeControl, { showDelayMs?: number; hideDelayMs?: number }>
added: type TooltipTriggerProps<TTag extends ElementType = typeof DEFAULT_TRIGGER_TAG> = Props<TTag, TriggerRenderPropArg, TriggerPropsWeControl, { autoFocus?: boolean; disabled?: boolean }>

added: export { TransitionChild } from '../transition/transition'

added: call _internal_ComponentTransitionChild<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionChildProps<TTag> & RefProp<typeof TransitionChildFn>): React.JSX.Element
added: call _internal_ComponentTransitionRoot<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionRootProps<TTag> & RefProp<typeof TransitionRootFn>): React.JSX.Element
added: interface TransitionClasses
added: interface TransitionEvents
added: interface _internal_ComponentTransitionChild extends HasDisplayName
added: interface _internal_ComponentTransitionRoot extends HasDisplayName
added: let Transition: _internal_ComponentTransitionRoot & { Child: _internal_ComponentTransitionChild; Root: _internal_ComponentTransitionRoot }
added: let TransitionChild: _internal_ComponentTransitionChild
added: property TransitionClasses.enter?: string
added: property TransitionClasses.enterFrom?: string
added: property TransitionClasses.enterTo?: string
added: property TransitionClasses.entered?: string
added: property TransitionClasses.leave?: string
added: property TransitionClasses.leaveFrom?: string
added: property TransitionClasses.leaveTo?: string
added: property TransitionEvents.afterEnter?: () => void
added: property TransitionEvents.afterLeave?: () => void
added: property TransitionEvents.beforeEnter?: () => void
added: property TransitionEvents.beforeLeave?: () => void
added: type TransitionChildProps<TTag extends ReactTag> = Props<TTag, TransitionChildRenderPropArg, TransitionChildPropsWeControl, PropsForFeatures<typeof TransitionChildRenderFeatures> & TransitionClasses & Transitio…
added: type TransitionRootProps<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG> = TransitionChildProps<TTag> & { show?: boolean; appear?: boolean }

removed: call _internal_ComponentTransitionChild<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionChildProps<TTag> & RefProp<typeof TransitionChildFn>): JSX.Element
removed: call _internal_ComponentTransitionRoot<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionRootProps<TTag> & RefProp<typeof TransitionRootFn>): JSX.Element
removed: interface TransitionClasses
removed: interface TransitionEvents
removed: interface _internal_ComponentTransitionChild extends HasDisplayName
removed: interface _internal_ComponentTransitionRoot extends HasDisplayName
removed: let Transition: _internal_ComponentTransitionRoot & { Child: _internal_ComponentTransitionChild; Root: _internal_ComponentTransitionRoot }
removed: property TransitionClasses.enter?: string
removed: property TransitionClasses.enterFrom?: string
removed: property TransitionClasses.enterTo?: string
removed: property TransitionClasses.entered?: string
removed: property TransitionClasses.leave?: string
removed: property TransitionClasses.leaveFrom?: string
removed: property TransitionClasses.leaveTo?: string
removed: property TransitionEvents.afterEnter?: () => void
removed: property TransitionEvents.afterLeave?: () => void
removed: property TransitionEvents.beforeEnter?: () => void
removed: property TransitionEvents.beforeLeave?: () => void
removed: type TransitionChildProps<TTag extends ReactTag> = Props<TTag, TransitionChildRenderPropArg, never, PropsForFeatures<typeof TransitionChildRenderFeatures> & TransitionClasses & TransitionEvents & { appear?: boo…
removed: type TransitionRootProps<TTag extends ElementType> = TransitionChildProps<TTag> & { show?: boolean; appear?: boolean }
added: export * from '../transition/transition'

removed: function transition(node: HTMLElement, classes: { base: string[]; enter: string[]; enterFrom: string[]; enterTo: string[]; leave: string[]; leaveFrom: string[]; leaveTo: string[]; entered: string[] }, show: boolean, done?: () => void): () => void

removed: method ScrollLockStep.after?(ctx: Context<MetaType>): void
removed: method ScrollLockStep.before?(ctx: Context<MetaType>): void
changed: property Context.meta: MetaType → property Context.meta: () => MetaType
added: property ScrollLockStep.after?: (ctx: Context<MetaType>) => void
added: property ScrollLockStep.before?: (ctx: Context<MetaType>) => void

changed: function useDocumentOverflowLockedEffect(doc: Document | null, shouldBeLocked: boolean, meta: (meta: Record<string, any>) => Record<string, any>): boolean → function useDocumentOverflowLockedEffect(shouldBeLocked: boolean, doc: Document | null, meta?: (meta: Record<string, any>) => Record<string, any>): boolean

added: function useActivePress({ disabled }?: Partial<{ disabled: boolean }>): { pressed: boolean; pressProps: { onPointerDown?: undefined; onPointerUp?: undefined; onClick?: undefined } | { onPointerDown: (event: PointerEvent) => void; onPointerUp: () => void; onClick: () => void } }

added: function useByComparator<T>(by?: ByComparator<T>): (a: T, z: T) => boolean
added: type ByComparator<T> = (NonNullable<T> extends never ? string : keyof NonNullable<T> & string) | ((a: T, z: T) => boolean)

added: function useDefaultValue<T>(value: T): T

changed: function useDocumentEvent<TType extends keyof DocumentEventMap>(type: TType, listener: (ev: DocumentEventMap[TType]) => any, options?: boolean | AddEventListenerOptions): void → function useDocumentEvent<TType extends keyof DocumentEventMap>(enabled: boolean, type: TType, listener: (ev: DocumentEventMap[TType]) => any, options?: boolean | AddEventListenerOptions): void

added: function useElementSize(enabled: boolean, element: HTMLElement | null, unit?: boolean): { width: number; height: number } | { width: string; height: string }

added: function useEscape(enabled: boolean, view: (Window & typeof globalThis) | null | undefined, cb: (event: KeyboardEvent) => void): void

changed: function useFlags(initialFlags?: number): { flags: number; addFlag: (flag: number) => void; hasFlag: (flag: number) => boolean; removeFlag: (flag: number) => void; toggleFlag: (flag: number) => void } → function useFlags(initialFlags?: number): { flags: number; setFlag: (flag: number) => void; addFlag: (flag: number) => void; hasFlag: (flag: number) => boolean; removeFlag: (flag: number) => void; toggleFlag: (flag: number) => void }

added: function useHandleToggle(cb: (event: ReactPointerEvent) => void): { onPointerDown: (event: ReactPointerEvent<HTMLButtonElement>) => void; onClick: (event: ReactPointerEvent<HTMLButtonElement>) => void }

removed: let useId: any
added: export { useId } from 'react'

removed: function useInert<TElement extends HTMLElement>(node: MutableRefObject<TElement | null> | (() => TElement | null), enabled?: boolean): void

added: function useInertOthers(enabled: boolean, { allowed, disallowed }?: { allowed?: () => (HTMLElement | null)[]; disallowed?: () => (HTMLElement | null)[] }): void

added: function useIsTopLayer(enabled: boolean, scope: string | null): boolean

added: function useIsTouchDevice(): boolean

added: function useOnDisappear(enabled: boolean, ref: MutableRefObject<HTMLElement | null> | HTMLElement | null, cb: () => void): void

changed: function useOutsideClick(containers: ContainerInput | (() => ContainerInput), cb: (event: MouseEvent | PointerEvent | FocusEvent | TouchEvent, target: HTMLElement) => void, enabled?: boolean): void → function useOutsideClick(enabled: boolean, containers: ContainerInput | (() => ContainerInput), cb: (event: MouseEvent | PointerEvent | FocusEvent | TouchEvent, target: HTMLOrSVGElement & Element) => void): void

added: function useRootDocument(...args: Parameters<typeof getRootNode>): Document | ShadowRoot | null

added: const Action: { Ignore: { readonly kind: ActionKind.Ignore }; Select: (target: HTMLElement) => { readonly kind: ActionKind.Select; readonly target: HTMLElement }; Close: { r…
added: function useQuickRelease(enabled: boolean, { trigger, action, close, select }: { trigger: HTMLElement | null; action: (e: PointerEventWithTarget) => { kind: ActionKind.Ignore } | { kind: ActionKind.Select; target: HTMLElement } | { kind: ActionKind.Close }; close: () => void; select: (target: HTMLElement) => void }): void

added: function useRefocusableInput(input: HTMLInputElement | null): () => void

changed: function useResolveButtonType<TTag>(props: { type?: string; as?: TTag }, ref: MutableRefObject<HTMLElement | null>): string | undefined → function useResolveButtonType<TTag>(props: { type?: string; as?: TTag }, element: HTMLElement | null): string | undefined

added: function useResolvedTag<T extends React.ElementType>(tag: T): readonly [string | undefined, (ref: any) => void]

changed: function useMainTreeNode(): { mainTreeNodeRef: React.MutableRefObject<HTMLElement | null>; MainTreeNode: () => JSX.Element } → function useMainTreeNode(fallbackMainTreeNode?: Element | null): Element | null
changed: function useRootContainers({ defaultContainers, portals, mainTreeNodeRef: _mainTreeNodeRef }?: { defaultContainers?: (HTMLElement | null | MutableRefObject<HTMLElement | null>)[]; portals?: MutableRefObject<HTMLElement[]>; mainTreeNodeRef?: MutableRefObject<HTMLElement | null> }): { resolveContainers: () => HTMLElement[]; contains: (element: HTMLElement) => boolean; mainTreeNodeRef: React.Mutable… → function useRootContainers({ defaultContainers, portals, mainTreeNode }?: { defaultContainers?: (Element | null | MutableRefObject<Element | null>)[]; portals?: MutableRefObject<Element[]>; mainTreeNode?: Element | null }): { resolveContainers: () => Element[]; contains: (element: Element) => boolean }
added: function MainTreeProvider({ children, node }: { children: React.ReactNode; node?: Element | null }): React.JSX.Element

added: function useScrollLock(enabled: boolean, ownerDocument: Document | null, resolveAllowedContainers?: () => Element[]): void

added: function useSlot<ExpectedType extends Record<string, any>>(object: ExpectedType): ExpectedType

changed: function useTransition({ immediate, container, direction, classes, onStart, onStop }: TransitionArgs): void → function useTransition(enabled: boolean, element: HTMLElement | null, show: boolean, events?: { start?: (show: boolean) => void; end?: (show: boolean) => void }): [visible: boolean, data: TransitionData]
added: function transitionDataAttributes(data: TransitionData): Record<string, string>

changed: function useTreeWalker({ container, accept, walk, enabled }: { container: HTMLElement | null; accept: AcceptNode; walk(node: HTMLElement): void; enabled?: boolean }): void → function useTreeWalker(enabled: boolean, { container, accept, walk }: { container: HTMLElement | null; accept: AcceptNode; walk(node: HTMLElement): void }): void

changed: function useWindowEvent<TType extends keyof WindowEventMap>(type: TType, listener: (ev: WindowEventMap[TType]) => any, options?: boolean | AddEventListenerOptions): void → function useWindowEvent<TType extends keyof WindowEventMap>(enabled: boolean, type: TType, listener: (ev: WindowEventMap[TType]) => any, options?: boolean | AddEventListenerOptions): void

removed: export * from './components/transitions/transition'
added: export * from './components/button/button'
added: export * from './components/checkbox/checkbox'
added: export * from './components/close-button/close-button'
added: export * from './components/data-interactive/data-interactive'
added: export * from './components/field/field'
added: export * from './components/fieldset/fieldset'
added: export * from './components/input/input'
added: export * from './components/legend/legend'
added: export * from './components/select/select'
added: export * from './components/textarea/textarea'
added: export * from './components/transition/transition'
added: export { Description } from './components/description/description'
added: export { DescriptionProps } from './components/description/description'
added: export { Label } from './components/label/label'
added: export { LabelProps } from './components/label/label'
added: export { useClose } from './internal/close-provider'

added: function CloseProvider({ value, children }: React.PropsWithChildren<{ value: () => void }>): React.JSX.Element
added: function useClose(): () => void

added: function DisabledProvider({ value, children }: React.PropsWithChildren<{ value?: boolean }>): React.JSX.Element
added: function useDisabled(): boolean | undefined

added: function FloatingProvider({ children, enabled }: { children: React.ReactNode; enabled?: boolean }): React.JSX.Element
added: function useFloatingPanel(placement?: (AnchorPropsWithSelection & InternalFloatingPanelProps) | null): readonly [((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void), React.CSSProperties | undefined]
added: function useFloatingPanelProps(): (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown> & { 'data-anchor': AnchorToWithSelection | undefined }
added: function useFloatingReference(): ((node: import('@floating-ui/react-dom').ReferenceType | null) => void) & ((node: any) => void)
added: function useFloatingReferenceProps(): (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>
added: function useResolvedAnchor<T extends AnchorProps | AnchorPropsWithSelection>(anchor?: T): Exclude<T, boolean | string> | null
added: type AnchorProps = false | AnchorTo | Partial<BaseAnchorProps & { to: AnchorTo }>
added: type AnchorPropsWithSelection = false | AnchorToWithSelection | Partial<BaseAnchorProps & { to: AnchorToWithSelection }>
added: type InternalFloatingPanelProps = Partial<{ inner: { listRef: InnerProps['listRef']; index: InnerProps['index'] } }>

changed: function FocusSentinel({ onFocus }: FocusSentinelProps): JSX.Element | null → function FocusSentinel({ onFocus }: FocusSentinelProps): React.JSX.Element | null

added: function FormFields({ data, form: formId, disabled, onReset, overrides }: { data: Record<string, any>; overrides?: Record<string, any>; form?: string; disabled?: boolean; onReset?: (e: Event) => void }): React.JSX.Element
added: function FormFieldsProvider(props: React.PropsWithChildren<{}>): React.JSX.Element
added: function HoistFormFields({ children }: React.PropsWithChildren<{}>): React.JSX.Element | null

added: const Frozen: React.ForwardRefExoticComponent<{ children: React.ReactNode; freeze: boolean } & React.RefAttributes<HTMLElement>>
added: function useFrozenData<T>(freeze: boolean, data: T): T

removed: enum Features
removed: member Features.Focusable = 2
removed: member Features.Hidden = 4
removed: member Features.None = 1
changed: type HiddenProps<TTag extends ElementType> = Props<TTag, {}, never, { features?: Features }> → type HiddenProps<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG> = Props<TTag, HiddenRenderPropArg, HiddenPropsWeControl, { features?: HiddenFeatures }>
added: enum HiddenFeatures
added: member HiddenFeatures.Focusable = 2
added: member HiddenFeatures.Hidden = 4
added: member HiddenFeatures.None = 1

added: function IdProvider({ id, children }: React.PropsWithChildren<{ id: string | undefined }>): React.JSX.Element
added: function useProvidedId(): string | undefined

added: function ResetOpenClosedProvider({ children }: { children: React.ReactNode }): ReactElement

changed: function ForcePortalRoot(props: ForcePortalRootProps): JSX.Element → function ForcePortalRoot(props: ForcePortalRootProps): React.JSX.Element

removed: enum StackMessage
removed: function StackProvider({ children, onUpdate, type, element, enabled }: { children: ReactNode; onUpdate?: OnUpdate; type: string; element: MutableRefObject<HTMLElement | null>; enabled?: boolean }): JSX.Element
removed: function useStackContext(): OnUpdate
removed: member StackMessage.Add = 0
removed: member StackMessage.Remove = 1

added: abstract class Machine<State, Event extends { type: number | string }>
added: abstract method Machine.reduce(state: Readonly<State>, event: Event): Readonly<State>
added: constructor Machine(initialState: State)
added: function batch<F extends (...args: any[]) => void, P extends any[] = Parameters<F>>(setup: () => [callback: F, handle: () => void]): (...args: P) => void
added: function shallowEqual(a: any, b: any): boolean
added: get Machine.state(): Readonly<State>
added: method Machine.dispose(): void
added: method Machine.on<T extends Event['type']>(type: T, callback: (state: State, event: Extract<Event, { type: T }>) => void): () => void
added: method Machine.send(event: Event): void
added: method Machine.subscribe<Slice>(selector: (state: Readonly<State>) => Slice, callback: (state: Slice) => void): () => void
added: property Machine.disposables: { addEventListener<TEventName extends keyof WindowEventMap>(element: Window | Document | HTMLElement, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions | undefined): () => void; requestAnimationFrame(callback: FrameRequestCallback): () => void; nextFrame(callback: FrameRequestCallback): () => void; set…

added: const stackMachines: DefaultMap<Scope, StackMachine>
added: enum ActionTypes
added: member ActionTypes.Pop = 1
added: member ActionTypes.Push = 0
added: type Actions = { type: ActionTypes.Push; id: Id } | { type: ActionTypes.Pop; id: Id }

added: function useSlice<M extends Machine<any, any>, Slice>(machine: M, selector: (state: Readonly<M extends Machine<infer State, any> ? State : never>) => Slice, compare?: typeof shallowEqual): Slice

removed: type ByComparator<T> = (T extends null ? string : keyof T & string) | ((a: T, b: T) => boolean)
removed: type XOR<T, U> = T | U extends __ ? never : T extends __ ? U : U extends __ ? T : T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U
removed: type __ = typeof __
changed: type Props<TTag extends ReactTag, TSlot = {}, TOmitableProps extends PropertyKey = never, Overrides = {}> = CleanProps<TTag, TOmitableProps | keyof Overrides> & OurProps<TTag, TSlot> & ClassNameOverride<TTag, TSlot> & Overrides → type Props<TTag extends ReactTag, TSlot = {}, TOmittableProps extends PropertyKey = never, Overrides = {}> = CleanProps<TTag, TOmittableProps | keyof Overrides> & OurProps<TTag, TSlot> & ClassNameOverride<TTag, TSlot> & Overrides
changed: type ReactTag = keyof JSX.IntrinsicElements | JSXElementConstructor<any> → type ReactTag = keyof React.JSX.IntrinsicElements | JSXElementConstructor<any>

removed: const useSyncExternalStore: UseSyncExternalStoreFn

removed: function useSyncExternalStore<T>(subscribe: (fn: () => void) => () => void, getSnapshot: () => T, getServerSnapshot?: () => T): T

removed: function useSyncExternalStore<T>(subscribe: (fn: () => void) => () => void, getSnapshot: () => T, getServerSnapshot?: () => T): T

changed: let history: HTMLElement[] → let history: (HTMLOrSVGElement & Element)[]

added: class DefaultMap<T = string, V = any> extends Map<T, V>
added: constructor DefaultMap(factory: (key: T) => V)
added: method DefaultMap.get(key: T): V

added: function hasInlineStyle(element: unknown): element is ElementCSSInlineStyle
added: function isElement(element: unknown): element is Element
added: function isHTMLElement(element: unknown): element is HTMLElement
added: function isHTMLFieldSetElement(element: unknown): element is HTMLFieldSetElement
added: function isHTMLIframeElement(element: unknown): element is HTMLIFrameElement
added: function isHTMLInputElement(element: unknown): element is HTMLInputElement
added: function isHTMLLabelElement(element: unknown): element is HTMLLabelElement
added: function isHTMLLegendElement(element: unknown): element is HTMLLegendElement
added: function isHTMLTextAreaElement(element: unknown): element is HTMLTextAreaElement
added: function isHTMLorSVGElement(element: unknown): element is HTMLOrSVGElement & Element
added: function isInteractiveElement(element: unknown): element is Element
added: function isNode(element: unknown): element is Node

added: const ElementPositionState: { Idle: { kind: 'Idle' }; Tracked: (position: string) => { kind: 'Tracked'; position: string }; Moved: { kind: 'Moved' } }
added: function computeVisualPosition(element: HTMLElement): string
added: function detectMovement(target: HTMLElement, state: ResolvedStates<typeof ElementPositionState>, onMove: () => void): () => void
added: type ElementPositionState = ResolvedStates<typeof ElementPositionState>

changed: function focusElement(element: HTMLElement | null): void → function focusElement(element: HTMLOrSVGElement | null): void
changed: function focusFrom(current: HTMLElement | null, focus: Focus): FocusResult → function focusFrom(current: HTMLElement | null, focus: Focus, container?: Document | ShadowRoot | HTMLElement | null): FocusResult
changed: function focusIn(container: HTMLElement | HTMLElement[], focus: Focus, { sorted, relativeTo, skipElements }?: Partial<{ sorted: boolean; relativeTo: HTMLElement | null; skipElements: HTMLElement[] }>): FocusResult → function focusIn(container: HTMLElement | HTMLElement[], focus: Focus, { sorted, relativeTo, skipElements }?: Partial<{ sorted: boolean; relativeTo: HTMLElement | null; skipElements: (HTMLElement | MutableRefObject<HTMLElement | null>)[] }>): FocusResult
changed: function getFocusableElements(container?: HTMLElement | null): HTMLElement[] → function getFocusableElements(container?: QuerySelectorAll | null): HTMLElement[]
changed: function isFocusableElement(element: HTMLElement, mode?: FocusableMode): boolean → function isFocusableElement(element: HTMLOrSVGElement & Element, mode?: FocusableMode): boolean
added: function getAutoFocusableElements(container?: HTMLElement | null): HTMLElement[]
added: let focusableSelector: string
added: member Focus.AutoFocus = 64

changed: function getOwnerDocument<T extends Element | MutableRefObject<Element | null>>(element: T | null | undefined): Document | null → function getOwnerDocument<T extends Element>(element: T | null | undefined): Document | null
added: function getActiveElement(element: Element | null | undefined): Element | null
added: function getRootNode<T extends Element>(element: T | null | undefined): Document | ShadowRoot | null
added: function isActiveElement(element: Element | null | undefined): boolean

removed: enum Features
removed: function render<TFeature extends Features, TTag extends ElementType, TSlot>({ ourProps, theirProps, slot, defaultTag, features, visible, name, mergeRefs }: { ourProps: Expand<Props<TTag, TSlot, any> & PropsForFeatures<TFeature>> & { ref?: Ref<HTMLElement | ElementType> }; theirProps: Expand<Props<TTag, TSlot, any>>; slot?: TSlot; defaultTag: ElementType; features?: TFeature; visible?: boolean; na…
removed: function useMergeRefsFn(): (...refs: any[]) => ((value: any) => void) | undefined
removed: member Features.None = 0
removed: member Features.RenderStrategy = 1
removed: member Features.Static = 2
changed: type PropsForFeatures<T extends Features> = XOR<PropsForFeature<T, Features.Static, { static?: boolean }>, PropsForFeature<T, Features.RenderStrategy, { unmount?: boolean }>> → type PropsForFeatures<T extends RenderFeatures> = Expand<UnionToIntersection<PropsForFeature<T, RenderFeatures.Static, { static?: boolean }> | PropsForFeature<T, RenderFeatures.RenderStrategy, { unmount?: bool…
added: enum RenderFeatures
added: function isFragment(element: any): element is typeof Fragment
added: function isFragmentInstance(element: React.ReactElement): boolean
added: function mergeProps<T extends Props<any, any>[]>(...listOfProps: T): Props<any, any>
added: function useRender(): typeof render
added: member RenderFeatures.None = 0
added: member RenderFeatures.RenderStrategy = 1
added: member RenderFeatures.Static = 2

changed: function StableCollection({ children }: { children: React.ReactNode | React.ReactNode[] }): JSX.Element → function StableCollection({ children }: { children: React.ReactNode | React.ReactNode[] }): React.JSX.Element

changed: let startTransition: any → let startTransition: typeof React.startTransition