Upgrading @headlessui/react 0.3 to 1
Breaking0.3.2 → 1.7.19Breaking2Platform2New31Changed3Fixed211Other8
BreakingUpgrade verdict
2 breaking changes and 2 platform requirement changes.
In plain terms
- An internal, undocumented prop is gone; use the documented className usage instead.
- An internal, undocumented prop is gone; anyone relying on it must switch to the documented className usage.
- The package now declares a more accurate range of supported React versions.
- The package now declares a more accurate range of supported react-dom versions, including React 18.
Must act 4 items need code or config changes
Adds @tanstack/react-virtual ^3.0.0-beta.60, client-only ^0.0.1.
Installs 3 packages in all (was 0).
What you must change
Breaking2
Removes the explicit
:class prop.:classRemoves the undocumented
:className prop.:classNamePlatform2
Improves the React peer dependency version range.
reactImproves peer dependencies for
react-dom and for the future version 18.react-domAPI changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- added:
call _internal_ComponentCombobox<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, false, false, TTag> & RefProp<typeof ComboboxFn>): JSX.Element - added:
call _internal_ComponentCombobox<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, false, true, TTag> & RefProp<typeof ComboboxFn>): JSX.Element - added:
call _internal_ComponentCombobox<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, true, false, TTag> & RefProp<typeof ComboboxFn>): JSX.Element - added:
call _internal_ComponentCombobox<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, true, true, TTag> & RefProp<typeof ComboboxFn>): JSX.Element - added:
call _internal_ComponentComboboxButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ComboboxButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element - added:
call _internal_ComponentComboboxInput<TType, TTag extends ElementType = typeof DEFAULT_INPUT_TAG>(props: ComboboxInputProps<TTag, TType> & RefProp<typeof InputFn>): JSX.Element - added:
call _internal_ComponentComboboxLabel<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: ComboboxLabelProps<TTag> & RefProp<typeof LabelFn>): JSX.Element - added:
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 - added:
call _internal_ComponentComboboxOptions<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ComboboxOptionsProps<TTag> & RefProp<typeof OptionsFn>): JSX.Element - added:
interface _internal_ComponentCombobox extends HasDisplayName - added:
interface _internal_ComponentComboboxButton extends HasDisplayName - added:
interface _internal_ComponentComboboxInput extends HasDisplayName - added:
interface _internal_ComponentComboboxLabel extends HasDisplayName - added:
interface _internal_ComponentComboboxOption extends HasDisplayName - added:
interface _internal_ComponentComboboxOptions extends HasDisplayName - added:
let Combobox: _internal_ComponentCombobox & { Input: _internal_ComponentComboboxInput; Button: _internal_ComponentComboboxButton; Label: _internal_ComponentComboboxLabel; Op… - added:
type ComboboxButtonProps<TTag extends ElementType> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl> - added:
type ComboboxInputProps<TTag extends ElementType, TType> = Props<TTag, InputRenderPropArg, InputPropsWeControl, { defaultValue?: TType; displayValue?(item: TType): string; onChange?(event: React.ChangeEvent<HTMLInputEl… - added:
type ComboboxLabelProps<TTag extends ElementType> = Props<TTag, LabelRenderPropArg> - added:
type ComboboxOptionProps<TTag extends ElementType, TType> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, { disabled?: boolean; value: TType; order?: number }> - added:
type ComboboxOptionsProps<TTag extends ElementType> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl, PropsForFeatures<typeof OptionsRenderFeatures> & { hold?: boolean }> - added:
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 }
- added:
call _internal_ComponentDescription<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG>(props: DescriptionProps<TTag> & RefProp<typeof DescriptionFn>): JSX.Element - added:
function useDescriptions(): [string | undefined, (props: DescriptionProviderProps) => JSX.Element] - added:
interface _internal_ComponentDescription extends HasDisplayName - added:
let Description: _internal_ComponentDescription - added:
type DescriptionProps<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG> = Props<TTag>
- added:
call _internal_ComponentDialog<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(props: DialogProps<TTag> & RefProp<typeof DialogFn>): JSX.Element - added:
call _internal_ComponentDialogBackdrop<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(props: DialogBackdropProps<TTag> & RefProp<typeof BackdropFn>): JSX.Element - added:
call _internal_ComponentDialogOverlay<TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(props: DialogOverlayProps<TTag> & RefProp<typeof OverlayFn>): JSX.Element - added:
call _internal_ComponentDialogPanel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DialogPanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element - added:
call _internal_ComponentDialogTitle<TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(props: DialogTitleProps<TTag> & RefProp<typeof TitleFn>): JSX.Element - added:
interface _internal_ComponentDialog extends HasDisplayName - added:
interface _internal_ComponentDialogBackdrop extends HasDisplayName - added:
interface _internal_ComponentDialogDescription extends _internal_ComponentDescription - added:
interface _internal_ComponentDialogOverlay extends HasDisplayName - added:
interface _internal_ComponentDialogPanel extends HasDisplayName - added:
interface _internal_ComponentDialogTitle extends HasDisplayName - added:
let Dialog: _internal_ComponentDialog & { Backdrop: _internal_ComponentDialogBackdrop; Panel: _internal_ComponentDialogPanel; Overlay: _internal_ComponentDialogOverlay; Ti… - added:
type DialogBackdropProps<TTag extends ElementType> = Props<TTag, BackdropRenderPropArg, BackdropPropsWeControl> - added:
type DialogOverlayProps<TTag extends ElementType> = Props<TTag, OverlayRenderPropArg, OverlayPropsWeControl> - added:
type DialogPanelProps<TTag extends ElementType> = Props<TTag, PanelRenderPropArg> - added:
type DialogProps<TTag extends ElementType> = Props<TTag, DialogRenderPropArg, DialogPropsWeControl, PropsForFeatures<typeof DialogRenderFeatures> & { open?: boolean; onClose(value: boolean): void; initial… - added:
type DialogTitleProps<TTag extends ElementType> = Props<TTag, TitleRenderPropArg>
- added:
call _internal_ComponentDisclosure<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG>(props: DisclosureProps<TTag> & RefProp<typeof DisclosureFn>): JSX.Element - added:
call _internal_ComponentDisclosureButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: DisclosureButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element - added:
call _internal_ComponentDisclosurePanel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DisclosurePanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element - added:
interface _internal_ComponentDisclosure extends HasDisplayName - added:
interface _internal_ComponentDisclosureButton extends HasDisplayName - added:
interface _internal_ComponentDisclosurePanel extends HasDisplayName - added:
let Disclosure: _internal_ComponentDisclosure & { Button: _internal_ComponentDisclosureButton; Panel: _internal_ComponentDisclosurePanel } - added:
type DisclosureButtonProps<TTag extends ElementType> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, { disabled?: boolean }> - added:
type DisclosurePanelProps<TTag extends ElementType> = Props<TTag, PanelRenderPropArg> & PropsForFeatures<typeof PanelRenderFeatures> - added:
type DisclosureProps<TTag extends ElementType> = Props<TTag, DisclosureRenderPropArg> & { defaultOpen?: boolean }
- added:
call _internal_ComponentFocusTrap<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(props: FocusTrapProps<TTag> & RefProp<typeof FocusTrapFn>): JSX.Element - added:
interface _internal_ComponentFocusTrap extends HasDisplayName - added:
let FocusTrap: _internal_ComponentFocusTrap & { features: typeof Features } - added:
type FocusTrapProps<TTag extends ElementType> = Props<TTag> & { initialFocus?: MutableRefObject<HTMLElement | null>; features?: Features; containers?: Containers }
- added:
member Keys.ArrowLeft = 'ArrowLeft' - added:
member Keys.ArrowRight = 'ArrowRight' - added:
member Keys.Delete = 'Delete'
- added:
call _internal_ComponentLabel<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: LabelProps<TTag> & RefProp<typeof LabelFn>): JSX.Element - added:
function useLabels(): [string | undefined, (props: LabelProviderProps) => JSX.Element] - added:
interface _internal_ComponentLabel extends HasDisplayName - added:
let Label: _internal_ComponentLabel - added:
type LabelProps<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> = Props<TTag> & { passive?: boolean }
- removed:
function Listbox<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string>(props: Props<TTag, ListboxRenderPropArg, 'value' | 'onChange'> & { value: TType; onChange(value: TType): void; disabled?: boolean }): JSX.Element - removed:
namespace Listbox - removed:
var Listbox.Button: <TTag extends React.ElementType<any> = 'button'>(props: Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl>, ref: React.Ref<HTMLButtonElement>) => React.Rea… - removed:
var Listbox.Label: <TTag extends React.ElementType<any> = 'label'>(props: Props<TTag, LabelRenderPropArg, LabelPropsWeControl>) => React.ReactElement<any, string | ((props: any)… - removed:
var Listbox.Option: <TTag extends React.ElementType<any> = 'li', TType = unknown>(props: (Pick<import('../../types').PropsOf<TTag>, Exclude<keyof import('../../types').PropsOf<TTa… - removed:
var Listbox.Options: <TTag extends React.ElementType<any> = 'ul'>(props: (Pick<import('../../types').PropsOf<TTag>, Exclude<keyof import('../../types').PropsOf<TTag>, 'children' |… - added:
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 - added:
call _internal_ComponentListboxButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ListboxButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element - added:
call _internal_ComponentListboxLabel<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: ListboxLabelProps<TTag> & RefProp<typeof LabelFn>): JSX.Element - added:
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 - added:
call _internal_ComponentListboxOptions<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ListboxOptionsProps<TTag> & RefProp<typeof OptionsFn>): JSX.Element - added:
interface _internal_ComponentListbox extends HasDisplayName - added:
interface _internal_ComponentListboxButton extends HasDisplayName - added:
interface _internal_ComponentListboxLabel extends HasDisplayName - added:
interface _internal_ComponentListboxOption extends HasDisplayName - added:
interface _internal_ComponentListboxOptions extends HasDisplayName - added:
let Listbox: _internal_ComponentListbox & { Button: _internal_ComponentListboxButton; Label: _internal_ComponentListboxLabel; Options: _internal_ComponentListboxOptions; Op… - added:
type ListboxButtonProps<TTag extends ElementType> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl> - added:
type ListboxLabelProps<TTag extends ElementType> = Props<TTag, LabelRenderPropArg> - added:
type ListboxOptionProps<TTag extends ElementType, TType> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, { disabled?: boolean; value: TType }> - added:
type ListboxOptionsProps<TTag extends ElementType> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl> & PropsForFeatures<typeof OptionsRenderFeatures> - added:
type ListboxProps<TTag extends ElementType, TType, TActualType> = Props<TTag, ListboxRenderPropArg<TType>, 'value' | 'defaultValue' | 'onChange' | 'by' | 'disabled' | 'horizontal' | 'name' | 'multiple'> & { value?: TType; def…
- removed:
function Menu<TTag extends ElementType = typeof DEFAULT_MENU_TAG>(props: Props<TTag, MenuRenderPropArg>): JSX.Element - removed:
namespace Menu - removed:
var Menu.Button: <TTag extends React.ElementType<any> = 'button'>(props: Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl>, ref: React.Ref<HTMLButtonElement>) => React.Rea… - removed:
var Menu.Item: <TTag extends React.ElementType<any> = React.ExoticComponent<{ children?: React.ReactNode }>>(props: (Pick<import('../../types').PropsOf<TTag>, Exclude<keyof i… - removed:
var Menu.Items: <TTag extends React.ElementType<any> = 'div'>(props: (Pick<import('../../types').PropsOf<TTag>, Exclude<keyof import('../../types').PropsOf<TTag>, 'children' |… - added:
call _internal_ComponentMenu<TTag extends ElementType = typeof DEFAULT_MENU_TAG>(props: MenuProps<TTag> & RefProp<typeof MenuFn>): JSX.Element - added:
call _internal_ComponentMenuButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: MenuButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element - added:
call _internal_ComponentMenuItem<TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(props: MenuItemProps<TTag> & RefProp<typeof ItemFn>): JSX.Element - added:
call _internal_ComponentMenuItems<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(props: MenuItemsProps<TTag> & RefProp<typeof ItemsFn>): JSX.Element - added:
interface _internal_ComponentMenu extends HasDisplayName - added:
interface _internal_ComponentMenuButton extends HasDisplayName - added:
interface _internal_ComponentMenuItem extends HasDisplayName - added:
interface _internal_ComponentMenuItems extends HasDisplayName - added:
let Menu: _internal_ComponentMenu & { Button: _internal_ComponentMenuButton; Items: _internal_ComponentMenuItems; Item: _internal_ComponentMenuItem } - added:
type MenuButtonProps<TTag extends ElementType> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, { disabled?: boolean }> - added:
type MenuItemProps<TTag extends ElementType> = Props<TTag, ItemRenderPropArg, ItemPropsWeControl> & { disabled?: boolean } - added:
type MenuItemsProps<TTag extends ElementType> = Props<TTag, ItemsRenderPropArg, ItemsPropsWeControl> & PropsForFeatures<typeof ItemsRenderFeatures> - added:
type MenuProps<TTag extends ElementType> = Props<TTag, MenuRenderPropArg, never, { __demoMode?: boolean }>
- added:
call _internal_ComponentPopover<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(props: PopoverProps<TTag> & RefProp<typeof PopoverFn>): JSX.Element - added:
call _internal_ComponentPopoverButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: PopoverButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element - added:
call _internal_ComponentPopoverGroup<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: PopoverGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element - added:
call _internal_ComponentPopoverOverlay<TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(props: PopoverOverlayProps<TTag> & RefProp<typeof OverlayFn>): JSX.Element - added:
call _internal_ComponentPopoverPanel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: PopoverPanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element - added:
interface _internal_ComponentPopover extends HasDisplayName - added:
interface _internal_ComponentPopoverButton extends HasDisplayName - added:
interface _internal_ComponentPopoverGroup extends HasDisplayName - added:
interface _internal_ComponentPopoverOverlay extends HasDisplayName - added:
interface _internal_ComponentPopoverPanel extends HasDisplayName - added:
let Popover: _internal_ComponentPopover & { Button: _internal_ComponentPopoverButton; Overlay: _internal_ComponentPopoverOverlay; Panel: _internal_ComponentPopoverPanel; Gr… - added:
type PopoverButtonProps<TTag extends ElementType> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, { disabled?: boolean }> - added:
type PopoverGroupProps<TTag extends ElementType> = Props<TTag, GroupRenderPropArg> - added:
type PopoverOverlayProps<TTag extends ElementType> = Props<TTag, OverlayRenderPropArg, OverlayPropsWeControl> & PropsForFeatures<typeof OverlayRenderFeatures> - added:
type PopoverPanelProps<TTag extends ElementType> = Props<TTag, PanelRenderPropArg, PanelPropsWeControl, PropsForFeatures<typeof PanelRenderFeatures> & { focus?: boolean }> - added:
type PopoverProps<TTag extends ElementType> = Props<TTag, PopoverRenderPropArg, never, { __demoMode?: boolean }>
- added:
call _internal_ComponentPortal<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG>(props: PortalProps<TTag> & RefProp<typeof PortalFn>): JSX.Element - added:
call _internal_ComponentPortalGroup<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: PortalGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element - added:
function useNestedPortals(): readonly [React.MutableRefObject<HTMLElement[]>, ({ children }: { children: React.ReactNode }) => JSX.Element] - added:
interface _internal_ComponentPortal extends HasDisplayName - added:
interface _internal_ComponentPortalGroup extends HasDisplayName - added:
let Portal: _internal_ComponentPortal & { Group: _internal_ComponentPortalGroup } - added:
type PortalGroupProps<TTag extends ElementType> = Props<TTag, GroupRenderPropArg> & { target: MutableRefObject<HTMLElement | null> } - added:
type PortalProps<TTag extends ElementType> = Props<TTag, PortalRenderPropArg>
- added:
call _internal_ComponentRadioGroup<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG, TType = string>(props: RadioGroupProps<TTag, TType> & RefProp<typeof RadioGroupFn>): JSX.Element - added:
call _internal_ComponentRadioOption<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string>(props: RadioOptionProps<TTag, TType> & RefProp<typeof OptionFn>): JSX.Element - added:
interface _internal_ComponentRadioDescription extends _internal_ComponentDescription - added:
interface _internal_ComponentRadioGroup extends HasDisplayName - added:
interface _internal_ComponentRadioLabel extends _internal_ComponentLabel - added:
interface _internal_ComponentRadioOption extends HasDisplayName - added:
let RadioGroup: _internal_ComponentRadioGroup & { Option: _internal_ComponentRadioOption; Label: _internal_ComponentRadioLabel; Description: _internal_ComponentRadioDescriptio… - added:
type RadioGroupProps<TTag extends ElementType, TType> = Props<TTag, RadioGroupRenderPropArg<TType>, RadioGroupPropsWeControl, { value?: TType; defaultValue?: TType; onChange?(value: TType): void; by?: (keyof TType &… - added:
type RadioOptionProps<TTag extends ElementType, TType> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, { value: TType; disabled?: boolean }>
- removed:
function Switch<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(props: Props<TTag, SwitchRenderPropArg, SwitchPropsWeControl | 'checked' | 'onChange' | 'className'> & { checked: boolean; onChange(checked: boolean): void; className?: ((bag: SwitchRenderPropArg) => string) | string }): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) =… - removed:
namespace Switch - removed:
var Switch.Group: <TTag extends React.ElementType<any> = React.ExoticComponent<{ children?: React.ReactNode }>>(props: Props<TTag, any, '1D45E01E-AF44-47C4-988A-19A94EBAF55C'>)… - removed:
var Switch.Label: <TTag extends React.ElementType<any> = 'label'>(props: Props<TTag, LabelRenderPropArg, LabelPropsWeControl>) => React.ReactElement<any, string | ((props: any)… - added:
call _internal_ComponentSwitch<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(props: SwitchProps<TTag> & RefProp<typeof SwitchFn>): JSX.Element - added:
call _internal_ComponentSwitchGroup<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: SwitchGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element - added:
interface _internal_ComponentSwitch extends HasDisplayName - added:
interface _internal_ComponentSwitchDescription extends _internal_ComponentDescription - added:
interface _internal_ComponentSwitchGroup extends HasDisplayName - added:
interface _internal_ComponentSwitchLabel extends _internal_ComponentLabel - added:
let Switch: _internal_ComponentSwitch & { Group: _internal_ComponentSwitchGroup; Label: _internal_ComponentSwitchLabel; Description: _internal_ComponentSwitchDescription } - added:
type SwitchGroupProps<TTag extends ElementType> = Props<TTag> - added:
type SwitchProps<TTag extends ElementType> = Props<TTag, SwitchRenderPropArg, SwitchPropsWeControl, { checked?: boolean; defaultChecked?: boolean; onChange?(checked: boolean): void; name?: string; value?:…
- added:
call _internal_ComponentTab<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(props: TabProps<TTag> & RefProp<typeof TabFn>): JSX.Element - added:
call _internal_ComponentTabGroup<TTag extends ElementType = typeof DEFAULT_TABS_TAG>(props: TabGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element - added:
call _internal_ComponentTabList<TTag extends ElementType = typeof DEFAULT_LIST_TAG>(props: TabListProps<TTag> & RefProp<typeof ListFn>): JSX.Element - added:
call _internal_ComponentTabPanel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: TabPanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element - added:
call _internal_ComponentTabPanels<TTag extends ElementType = typeof DEFAULT_PANELS_TAG>(props: TabPanelsProps<TTag> & RefProp<typeof PanelsFn>): JSX.Element - added:
interface _internal_ComponentTab extends HasDisplayName - added:
interface _internal_ComponentTabGroup extends HasDisplayName - added:
interface _internal_ComponentTabList extends HasDisplayName - added:
interface _internal_ComponentTabPanel extends HasDisplayName - added:
interface _internal_ComponentTabPanels extends HasDisplayName - added:
let Tab: _internal_ComponentTab & { Group: _internal_ComponentTabGroup; List: _internal_ComponentTabList; Panels: _internal_ComponentTabPanels; Panel: _internal_Compone… - added:
type TabGroupProps<TTag extends ElementType> = Props<TTag, TabsRenderPropArg, never, { defaultIndex?: number; onChange?: (index: number) => void; selectedIndex?: number; vertical?: boolean; manual?: boolean… - added:
type TabListProps<TTag extends ElementType> = Props<TTag, ListRenderPropArg, ListPropsWeControl, {}> - added:
type TabPanelProps<TTag extends ElementType> = Props<TTag, PanelRenderPropArg, PanelPropsWeControl, PropsForFeatures<typeof PanelRenderFeatures> & { id?: string; tabIndex?: number }> - added:
type TabPanelsProps<TTag extends ElementType> = Props<TTag, PanelsRenderPropArg> - added:
type TabProps<TTag extends ElementType> = Props<TTag, TabRenderPropArg, TabPropsWeControl> & { disabled?: boolean }
- removed:
function Transition<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionChildProps<TTag> & { show: boolean; appear?: boolean }): JSX.Element - removed:
namespace Transition - removed:
var Transition.Child: typeof TransitionChild - added:
call _internal_ComponentTransitionChild<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionChildProps<TTag> & RefProp<typeof TransitionChildFn>): JSX.Element - added:
call _internal_ComponentTransitionRoot<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionRootProps<TTag> & RefProp<typeof TransitionRootFn>): JSX.Element - added:
interface _internal_ComponentTransitionChild extends HasDisplayName - added:
interface _internal_ComponentTransitionRoot extends HasDisplayName - added:
let Transition: _internal_ComponentTransitionRoot & { Child: _internal_ComponentTransitionChild; Root: _internal_ComponentTransitionRoot } - added:
property TransitionClasses.entered?: string - added:
type TransitionChildProps<TTag extends ReactTag> = Props<TTag, TransitionChildRenderPropArg, never, PropsForFeatures<typeof TransitionChildRenderFeatures> & TransitionClasses & TransitionEvents & { appear?: boo… - added:
type TransitionRootProps<TTag extends ElementType> = TransitionChildProps<TTag> & { show?: boolean; appear?: boolean }
- removed:
enum Reason - removed:
member Reason.Cancelled = 'cancelled' - removed:
member Reason.Finished = 'finished' - changed:
function transition(node: HTMLElement, base: string[], from: string[], to: string[], done?: (reason: Reason) => void): () => void → 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
- added:
function adjustScrollbarPadding(): ScrollLockStep
- added:
function handleIOSLocking(): ScrollLockStep<ContainerMetadata>
- added:
interface Context<MetaType extends Record<string, any> = any> - added:
interface ScrollLockStep<MetaType extends Record<string, any> = any> - added:
let overflows: import('../../utils/store.js').Store<Map<Document, DocEntry>, 'PUSH' | 'POP' | 'SCROLL_PREVENT' | 'SCROLL_ALLOW' | 'TEARDOWN'> - added:
method ScrollLockStep.after?(ctx: Context<MetaType>): void - added:
method ScrollLockStep.before?(ctx: Context<MetaType>): void - added:
property Context.d: Disposables - added:
property Context.doc: Document - added:
property Context.meta: MetaType - added:
type MetaFn = (meta: Record<string, any>) => Record<string, any>
- added:
function preventScroll(): ScrollLockStep
- added:
function useDocumentOverflowLockedEffect(doc: Document | null, shouldBeLocked: boolean, meta: (meta: Record<string, any>) => Record<string, any>): boolean
- added:
function useControllable<T>(controlledValue: T | undefined, onChange?: (value: T) => void, defaultValue?: T): readonly [NonNullable<T>, (value: any) => void | undefined]
- changed:
function useDisposables(): { requestAnimationFrame(callback: FrameRequestCallback): void; nextFrame(callback: FrameRequestCallback): void; setTimeout(callback: (...args: any[]) => void, ms: number, ...args: any[]): void; add(cb: () => void): void; dispose(): void } → function useDisposables(): { 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; setTim…
- added:
function useDocumentEvent<TType extends keyof DocumentEventMap>(type: TType, listener: (ev: DocumentEventMap[TType]) => any, options?: boolean | AddEventListenerOptions): void
- added:
let useEvent: <F extends (...args: any[]) => any, P extends any[] = Parameters<F>, R = ReturnType<F>>(cb: (...args: P) => R) => (...args: P) => R
- added:
function useEventListener<TType extends keyof WindowEventMap>(element: HTMLElement | Document | Window | EventTarget | null | undefined, type: TType, listener: (event: WindowEventMap[TType]) => any, options?: boolean | AddEventListenerOptions): void
- added:
function useFlags(initialFlags?: number): { flags: number; addFlag: (flag: number) => void; hasFlag: (flag: number) => boolean; removeFlag: (flag: number) => void; toggleFlag: (flag: number) => void }
- removed:
function useId(): string | undefined - added:
let useId: any
- added:
function useInert<TElement extends HTMLElement>(node: MutableRefObject<TElement | null> | (() => TElement | null), enabled?: boolean): void
- removed:
const useIsoMorphicEffect: typeof useLayoutEffect - added:
let useIsoMorphicEffect: (effect: EffectCallback, deps?: DependencyList | undefined) => void
- added:
function useLatestValue<T>(value: T): import('react').MutableRefObject<T>
- added:
function useOnUnmount(cb: () => void): void
- added:
function useOutsideClick(containers: ContainerInput | (() => ContainerInput), cb: (event: MouseEvent | PointerEvent | FocusEvent | TouchEvent, target: HTMLElement) => void, enabled?: boolean): void
- added:
function useOwnerDocument(...args: Parameters<typeof getOwnerDocument>): Document | null
- added:
function useResolveButtonType<TTag>(props: { type?: string; as?: TTag }, ref: MutableRefObject<HTMLElement | null>): string | undefined
- added:
function useMainTreeNode(): { mainTreeNodeRef: React.MutableRefObject<HTMLElement | null>; MainTreeNode: () => JSX.Element } - added:
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…
- added:
function useServerHandoffComplete(): boolean
- added:
function useStore<T>(store: Store<T, any>): T
- changed:
function useSyncRefs<TType>(...refs: (React.MutableRefObject<TType> | ((instance: TType) => void) | null)[]): (value: TType) => void → function useSyncRefs<TType>(...refs: (React.MutableRefObject<TType | null> | ((instance: TType) => void) | null)[]): ((value: TType) => void) | undefined - added:
function optionalRef<T>(cb: (ref: T) => void, isOptional?: boolean): ((ref: T) => void) & { [x: symbol]: boolean }
- added:
enum Direction - added:
function useTabDirection(): import('react').MutableRefObject<Direction> - added:
member Direction.Backwards = 1 - added:
member Direction.Forwards = 0
- added:
function useTextValue(element: MutableRefObject<HTMLElement | null>): () => string
- added:
function useTrackedPointer(): { wasMoved(evt: PointerEvent): boolean; update(evt: PointerEvent): void }
- added:
function useTransition({ immediate, container, direction, classes, onStart, onStop }: TransitionArgs): void
- added:
function useTreeWalker({ container, accept, walk, enabled }: { container: HTMLElement | null; accept: AcceptNode; walk(node: HTMLElement): void; enabled?: boolean }): void
- added:
function useWatch<T extends any[]>(cb: (newValues: [...T], oldValues: [...T]) => void | (() => void), dependencies: [...T]): void
- added:
function useWindowEvent<TType extends keyof WindowEventMap>(type: TType, listener: (ev: WindowEventMap[TType]) => any, options?: boolean | AddEventListenerOptions): void
- added:
export * from './components/combobox/combobox' - added:
export * from './components/dialog/dialog' - added:
export * from './components/disclosure/disclosure' - added:
export * from './components/focus-trap/focus-trap' - added:
export * from './components/popover/popover' - added:
export * from './components/radio-group/radio-group' - added:
export * from './components/tabs/tabs' - added:
export { Portal } from './components/portal/portal'
- added:
function FocusSentinel({ onFocus }: FocusSentinelProps): JSX.Element | null
- added:
enum Features - added:
let Hidden: ComponentHidden - added:
member Features.Focusable = 2 - added:
member Features.Hidden = 4 - added:
member Features.None = 1 - added:
type HiddenProps<TTag extends ElementType> = Props<TTag, {}, never, { features?: Features }>
- added:
enum State - added:
function OpenClosedProvider({ value, children }: Props): ReactElement - added:
function useOpenClosed(): State | null - added:
member State.Closed = 2 - added:
member State.Closing = 4 - added:
member State.Open = 1 - added:
member State.Opening = 8
- added:
function ForcePortalRoot(props: ForcePortalRootProps): JSX.Element - added:
function usePortalRoot(): boolean
- added:
enum StackMessage - added:
function StackProvider({ children, onUpdate, type, element, enabled }: { children: ReactNode; onUpdate?: OnUpdate; type: string; element: MutableRefObject<HTMLElement | null>; enabled?: boolean }): JSX.Element - added:
function useStackContext(): OnUpdate - added:
member StackMessage.Add = 0 - added:
member StackMessage.Remove = 1
- removed:
enum ListboxState - removed:
enum MenuState - removed:
enum SwitchState - removed:
function assertActiveElement(element: HTMLElement | null): void - removed:
function assertActiveListboxOption(item: HTMLElement | null, listbox?: HTMLElement | null): void - removed:
function assertHidden(element: HTMLElement | null): void - removed:
function assertLabelValue(element: HTMLElement | null, value: string): void - removed:
function assertListbox(options: { attributes?: Record<string, string | null>; textContent?: string; state: ListboxState }, listbox?: HTMLElement | null): void - removed:
function assertListboxButton(options: { attributes?: Record<string, string | null>; textContent?: string; state: ListboxState }, button?: HTMLElement | null): void - removed:
function assertListboxButtonLinkedWithListbox(button?: HTMLElement | null, listbox?: HTMLElement | null): void - removed:
function assertListboxButtonLinkedWithListboxLabel(button?: HTMLElement | null, label?: HTMLElement | null): void - removed:
function assertListboxLabel(options: { attributes?: Record<string, string | null>; tag?: string; textContent?: string }, label?: HTMLElement | null): void - removed:
function assertListboxLabelLinkedWithListbox(label?: HTMLElement | null, listbox?: HTMLElement | null): void - removed:
function assertListboxOption(item: HTMLElement | null, options?: { tag?: string; attributes?: Record<string, string | null>; selected?: boolean }): void - removed:
function assertMenu(options: { attributes?: Record<string, string | null>; textContent?: string; state: MenuState }, menu?: HTMLElement | null): void - removed:
function assertMenuButton(options: { attributes?: Record<string, string | null>; textContent?: string; state: MenuState }, button?: HTMLElement | null): void - removed:
function assertMenuButtonLinkedWithMenu(button?: HTMLElement | null, menu?: HTMLElement | null): void - removed:
function assertMenuItem(item: HTMLElement | null, options?: { tag?: string; attributes?: Record<string, string | null> }): void - removed:
function assertMenuLinkedWithMenuItem(item: HTMLElement | null, menu?: HTMLElement | null): void - removed:
function assertNoActiveListboxOption(listbox?: HTMLElement | null): void - removed:
function assertNoActiveMenuItem(menu?: HTMLElement | null): void - removed:
function assertNoSelectedListboxOption(items?: HTMLElement[]): void - removed:
function assertSwitch(options: { state: SwitchState; tag?: string; textContent?: string; label?: string }, switchElement?: HTMLElement | null): void - removed:
function assertVisible(element: HTMLElement | null): void - removed:
function getListbox(): HTMLElement | null - removed:
function getListboxButton(): HTMLElement | null - removed:
function getListboxButtons(): HTMLElement[] - removed:
function getListboxLabel(): HTMLElement | null - removed:
function getListboxOptions(): HTMLElement[] - removed:
function getListboxes(): HTMLElement[] - removed:
function getMenu(): HTMLElement | null - removed:
function getMenuButton(): HTMLElement | null - removed:
function getMenuButtons(): HTMLElement[] - removed:
function getMenuItems(): HTMLElement[] - removed:
function getMenus(): HTMLElement[] - removed:
function getSwitch(): HTMLElement | null - removed:
function getSwitchLabel(): HTMLElement | null - removed:
member ListboxState.InvisibleHidden = 1 - removed:
member ListboxState.InvisibleUnmounted = 2 - removed:
member ListboxState.Visible = 0 - removed:
member MenuState.InvisibleHidden = 1 - removed:
member MenuState.InvisibleUnmounted = 2 - removed:
member MenuState.Visible = 0 - removed:
member SwitchState.Off = 1 - removed:
member SwitchState.On = 0
- removed:
function executeTimeline(element: JSX.Element, steps: ((tools: ReturnType<typeof render>) => (null | number)[])[]): Promise<string> - removed:
namespace executeTimeline - removed:
var executeTimeline.fullTransition: (duration: number) => (number | null)[]
- removed:
enum MouseButton - removed:
function click(element: Document | Element | Window | Node | null, button?: MouseButton): Promise<void> - removed:
function focus(element: Document | Element | Window | Node | null): Promise<void> - removed:
function mouseEnter(element: Document | Element | Window | null): Promise<void> - removed:
function mouseLeave(element: Document | Element | Window | null): Promise<void> - removed:
function mouseMove(element: Document | Element | Window | null): Promise<void> - removed:
function press(event: Partial<KeyboardEvent>, element?: Element | null): Promise<void> - removed:
function shift(event: Partial<KeyboardEvent>): { shiftKey: boolean; altKey?: boolean | undefined; char?: string | undefined; charCode?: number | undefined; code?: string | undefined; ctrlKey?: boolean | undefined; isComposing?: boolean | undefined; key?: string | undefined; keyCode?: number | undefined; location?: number | undefined; metaKey?: boolean | undefined; repeat?: boolean | undefined; ge… - removed:
function type(events: Partial<KeyboardEvent>[], element?: Element | null): Promise<void> - removed:
function word(input: string): Partial<KeyboardEvent>[] - removed:
let Keys: Record<string, Partial<KeyboardEvent>> - removed:
member MouseButton.Left = 0 - removed:
member MouseButton.Right = 2
- removed:
function reportChanges<TType>(key: () => TType, onChange: (value: TType) => void): () => void
- removed:
function suppressConsoleLogs<T extends unknown[]>(cb: (...args: T) => unknown, type?: FunctionPropertyNames<typeof global.console>): (...args: T) => Promise<unknown>
- changed:
type Props<TTag, TSlot = any, TOmitableProps extends keyof any = __> = (TOmitableProps extends __ ? Omit<PropsOf<TTag>, 'as' | 'children' | 'refName'> : Omit<PropsOf<TTag>, TOmitableProps | 'as' | 'children' | 'refName'>) & { as?:… → type Props<TTag extends ReactTag, TSlot = {}, TOmitableProps extends PropertyKey = never, Overrides = {}> = CleanProps<TTag, TOmitableProps | keyof Overrides> & OurProps<TTag, TSlot> & ClassNameOverride<TTag, TSlot> & Overrides - changed:
type PropsOf<TTag = any> = TTag extends React.ElementType ? React.ComponentProps<TTag> : never → type PropsOf<TTag extends ReactTag> = TTag extends React.ElementType ? Omit<React.ComponentProps<TTag>, 'ref'> : never - added:
type ByComparator<T> = (T extends null ? string : keyof T & string) | ((a: T, b: T) => boolean) - added:
type EnsureArray<T> = T extends any[] ? T : Expand<T>[] - added:
type ReactTag = keyof JSX.IntrinsicElements | JSXElementConstructor<any>
- added:
const useSyncExternalStore: UseSyncExternalStoreFn
- added:
function useSyncExternalStore<T>(subscribe: (fn: () => void) => () => void, getSnapshot: () => T, getServerSnapshot?: () => T): T
- added:
function useSyncExternalStore<T>(subscribe: (fn: () => void) => () => void, getSnapshot: () => T, getServerSnapshot?: () => T): T
- added:
let history: HTMLElement[]
- changed:
function calculateActiveIndex<TItem>(action: { focus: Focus.Specific; id: string } | { focus: Exclude<Focus, Focus.Specific> }, resolvers: { resolveItems(): TItem[]; resolveActiveIndex(): number | null; resolveId(item: TItem): string; resolveDisabled(item: TItem): boolean }): number | null → function calculateActiveIndex<TItem>(action: { focus: Focus.Specific; id: string } | { focus: Exclude<Focus, Focus.Specific> }, resolvers: { resolveItems(): TItem[]; resolveActiveIndex(): number | null; resolveId(item: TItem, index: number, items: TItem[]): string; resolveDisabled(item: TItem, index: number, items: TItem[]): boolean }): number | null
- changed:
function disposables(): { requestAnimationFrame(callback: FrameRequestCallback): void; nextFrame(callback: FrameRequestCallback): void; setTimeout(callback: (...args: any[]) => void, ms: number, ...args: any[]): void; add(cb: () => void): void; dispose(): void } → function disposables(): { addEventListener<TEventName extends keyof WindowEventMap>(element: HTMLElement | Window | Document, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions): () => void; requestAnimationFrame(callback: FrameRequestCallback): () => void; nextFrame(callback: FrameRequestCallback): () => void; setTimeout(callback:… - added:
type Disposables = ReturnType<typeof disposables>
- added:
function onDocumentReady(cb: () => void): void
- added:
let env: Env
- added:
enum Focus - added:
enum FocusResult - added:
enum FocusableMode - added:
function focusElement(element: HTMLElement | null): void - added:
function focusFrom(current: HTMLElement | null, focus: Focus): FocusResult - added:
function focusIn(container: HTMLElement | HTMLElement[], focus: Focus, { sorted, relativeTo, skipElements }?: Partial<{ sorted: boolean; relativeTo: HTMLElement | null; skipElements: HTMLElement[] }>): FocusResult - added:
function getFocusableElements(container?: HTMLElement | null): HTMLElement[] - added:
function isFocusableElement(element: HTMLElement, mode?: FocusableMode): boolean - added:
function restoreFocusIfNecessary(element: HTMLElement | null): void - added:
function sortByDomNode<T>(nodes: T[], resolveKey?: (item: T) => HTMLElement | null): T[] - added:
member Focus.First = 1 - added:
member Focus.Last = 8 - added:
member Focus.Next = 4 - added:
member Focus.NoScroll = 32 - added:
member Focus.Previous = 2 - added:
member Focus.WrapAround = 16 - added:
member FocusResult.Error = 0 - added:
member FocusResult.Overflow = 1 - added:
member FocusResult.Success = 2 - added:
member FocusResult.Underflow = 3 - added:
member FocusableMode.Loose = 1 - added:
member FocusableMode.Strict = 0
- added:
function attemptSubmit(elementInForm: HTMLElement): void - added:
function objectToFormEntries(source?: Record<string, any>, parentKey?: string | null, entries?: Entries): Entries
- added:
function getTextValue(element: HTMLElement): string
- added:
function microTask(cb: () => void): void
- added:
function getOwnerDocument<T extends Element | MutableRefObject<Element | null>>(element: T | null | undefined): Document | null
- added:
function isAndroid(): boolean - added:
function isIOS(): boolean - added:
function isMobile(): boolean
- changed:
function forwardRefWithAs<T>(component: T): T → function forwardRefWithAs<T extends { name: string; displayName?: string }>(component: T): T & { displayName: string } - changed:
function render<TFeature extends Features, TTag extends ElementType, TBag>(props: Expand<Props<TTag, TBag, any> & PropsForFeatures<TFeature>>, propsBag: TBag, defaultTag: ElementType, features?: TFeature, visible?: boolean): ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => import('react').Component<any, any, any>)> | null) | (new (props: any) => im… → 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… - added:
function compact<T extends Record<any, any>>(object: T): {} & T - added:
function useMergeRefsFn(): (...refs: any[]) => ((value: any) => void) | undefined - added:
type HasDisplayName = { displayName: string } - added:
type RefProp<T extends Function> = T extends (props: any, ref: Ref<infer RefType>) => any ? { ref?: Ref<RefType> } : never
- removed:
function resolvePropValue<TProperty, TBag>(property: TProperty, bag: TBag): any
- added:
function StableCollection({ children }: { children: React.ReactNode | React.ReactNode[] }): JSX.Element - added:
function useStableCollectionIndex(group: string): number
- added:
let startTransition: any
- added:
function createStore<T, ActionKey extends string>(initial: () => T, actions: StoreActions<ActionKey, T>): Store<T, ActionKey> - added:
interface Store<T, ActionKey extends string> - added:
method Store.dispatch(action: ActionKey, ...args: any[]): void - added:
method Store.getSnapshot(): T - added:
method Store.subscribe(onChange: ChangeFn): UnsubscribeFn