Upgrading @headlessui/react 0.2 to 0.3
Breaking0.2.0 → 0.3.2Breaking3New4Fixed12
BreakingUpgrade verdict
3 breaking changes.
In plain terms
- Transition now always renders a `div` by default unless changed with the `as={...}` prop.
- The Transition render function prop no longer exposes a `ref`.
- Adds render features and render strategy (`static` and `unmount={true | false}`), changing the Transition API.
Must act 3 items need code or config changes
What you must change
Breaking3
Transition now always renders a
div by default unless changed with the as={...} prop.asThe Transition render function prop no longer exposes a
ref.refAdds render features and render strategy (
static and unmount={true | false}), changing the Transition API.staticunmountAPI changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- changed:
function Listbox<TTag extends React.ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string>(props: Props<TTag, ListboxRenderPropArg> & { value: TType; onChange(value: TType): void }): JSX.Element → 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 - changed:
var Listbox.Option: <TTag extends React.ElementType<any> = 'li', TType = string>(props: { as?: TTag | undefined; children?: string | number | boolean | {} | React.ReactElement<any… → var Listbox.Option: <TTag extends React.ElementType<any> = 'li', TType = unknown>(props: (Pick<import('../../types').PropsOf<TTag>, Exclude<keyof import('../../types').PropsOf<TTa… - changed:
var Listbox.Options: <TTag extends React.ElementType<any> = 'ul'>(props: ListboxOptionsProp<TTag>, ref: React.Ref<HTMLUListElement>) => React.ReactElement<any, string | ((props: an… → var Listbox.Options: <TTag extends React.ElementType<any> = 'ul'>(props: (Pick<import('../../types').PropsOf<TTag>, Exclude<keyof import('../../types').PropsOf<TTag>, 'children' |…
- changed:
function Menu<TTag extends React.ElementType = typeof DEFAULT_MENU_TAG>(props: Props<TTag, MenuRenderPropArg>): JSX.Element → function Menu<TTag extends ElementType = typeof DEFAULT_MENU_TAG>(props: Props<TTag, MenuRenderPropArg>): JSX.Element - changed:
var Menu.Item: <TTag extends React.ElementType<any> = React.ExoticComponent<{ children?: React.ReactNode }>>(props: { as?: TTag | undefined; children?: string | number | bool… → var Menu.Item: <TTag extends React.ElementType<any> = React.ExoticComponent<{ children?: React.ReactNode }>>(props: (Pick<import('../../types').PropsOf<TTag>, Exclude<keyof i… - changed:
var Menu.Items: <TTag extends React.ElementType<any> = 'div'>(props: { as?: TTag | undefined; children?: string | number | boolean | {} | React.ReactElement<any, string | ((pr… → var Menu.Items: <TTag extends React.ElementType<any> = 'div'>(props: (Pick<import('../../types').PropsOf<TTag>, Exclude<keyof import('../../types').PropsOf<TTag>, 'children' |…
- changed:
function Switch<TTag extends React.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:… → 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) =… - changed:
var Switch.Group: <TTag extends React.ElementType<any> = React.ExoticComponent<{ children?: React.ReactNode }>>(props: Props<TTag, {}, ''>) => JSX.Element → var Switch.Group: <TTag extends React.ElementType<any> = React.ExoticComponent<{ children?: React.ReactNode }>>(props: Props<TTag, any, '1D45E01E-AF44-47C4-988A-19A94EBAF55C'>)…
- removed:
type TransitionClasses = Partial<{ enter: string; enterFrom: string; enterTo: string; leave: string; leaveFrom: string; leaveTo: string }> - changed:
function Transition<TTag extends HTMLTags = 'div'>(props: TransitionChildProps<TTag> & { show: boolean; appear?: boolean }): JSX.Element → function Transition<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionChildProps<TTag> & { show: boolean; appear?: boolean }): JSX.Element - added:
interface TransitionClasses - added:
interface TransitionEvents - added:
property TransitionClasses.enter?: string - added:
property TransitionClasses.enterFrom?: string - added:
property TransitionClasses.enterTo?: 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
- changed:
function useIsMounted(): React.MutableRefObject<boolean> → function useIsMounted(): import('react').MutableRefObject<boolean>
- changed:
const useIsoMorphicEffect: typeof React.useLayoutEffect → const useIsoMorphicEffect: typeof useLayoutEffect
- removed:
member ListboxState.Closed = 1 - removed:
member ListboxState.Open = 0 - removed:
member MenuState.Closed = 1 - removed:
member MenuState.Open = 0 - added:
function assertHidden(element: HTMLElement | null): void - added:
function assertVisible(element: HTMLElement | null): void - added:
member ListboxState.InvisibleHidden = 1 - added:
member ListboxState.InvisibleUnmounted = 2 - added:
member ListboxState.Visible = 0 - added:
member MenuState.InvisibleHidden = 1 - added:
member MenuState.InvisibleUnmounted = 2 - added:
member MenuState.Visible = 0
- removed:
const Keys: Record<string, Partial<KeyboardEvent>> - changed:
function click(element: Document | Element | Window | Node | null): Promise<void> → function click(element: Document | Element | Window | Node | null, button?: MouseButton): Promise<void> - changed:
function press(event: Partial<KeyboardEvent>): Promise<void> → function press(event: Partial<KeyboardEvent>, element?: Element | null): Promise<void> - changed:
function type(events: Partial<KeyboardEvent>[]): Promise<void> → function type(events: Partial<KeyboardEvent>[], element?: Element | null): Promise<void> - added:
enum MouseButton - added:
let Keys: Record<string, Partial<KeyboardEvent>> - added:
member MouseButton.Left = 0 - added:
member MouseButton.Right = 2
- changed:
type Props<TTag, TSlot = {}, TOmitableProps extends keyof any = ''> = { as?: TTag; children?: React.ReactNode | ((bag: TSlot) => React.ReactElement) } & Omit<PropsOf<TTag>, TOmitableProps> → 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?:… - added:
type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never - added:
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 - added:
type __ = typeof __
- added:
function isDisabledReactIssue7711(element: Element): boolean
- added:
enum Focus - added:
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 - added:
member Focus.First = 0 - added:
member Focus.Last = 3 - added:
member Focus.Next = 2 - added:
member Focus.Nothing = 5 - added:
member Focus.Previous = 1 - added:
member Focus.Specific = 4
- changed:
function render<TTag extends React.ElementType, TBag>(props: Props<TTag, TBag, any>, bag: TBag, tag: React.ElementType): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> → 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… - added:
enum Features - added:
enum RenderStrategy - added:
member Features.None = 0 - added:
member Features.RenderStrategy = 1 - added:
member Features.Static = 2 - added:
member RenderStrategy.Hidden = 1 - added:
member RenderStrategy.Unmount = 0 - added:
type PropsForFeatures<T extends Features> = XOR<PropsForFeature<T, Features.Static, { static?: boolean }>, PropsForFeature<T, Features.RenderStrategy, { unmount?: boolean }>>
- added:
function resolvePropValue<TProperty, TBag>(property: TProperty, bag: TBag): any