Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@headlessui/react

Package Overview
Dependencies
Maintainers
2
Versions
727
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@headlessui/react - npm Package Compare versions

Comparing version 0.1.4-alpha.1 to 0.2.0-ab820de

dist/utils/bugs.d.ts
dist/utils/calculate-active-index.d.ts
dist/utils/resolve-prop-value.d.ts

182

dist/components/listbox/listbox.d.ts

@@ -9,3 +9,3 @@ import * as React from 'react';

};
export declare function Listbox<TTag extends React.ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string>(props: Props<TTag, ListboxRenderPropArg> & {
export declare function Listbox<TTag extends React.ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string>(props: Props<TTag, ListboxRenderPropArg, 'value' | 'onChange'> & {
value: TType;

@@ -15,19 +15,179 @@ onChange(value: TType): void;

export declare namespace Listbox {
var Button: <TTag extends React.ElementType<any> = "button">(props: Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl>, ref: React.Ref<HTMLButtonElement>) => 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>)>;
var Label: <TTag extends React.ElementType<any> = "label">(props: Props<TTag, LabelRenderPropArg, LabelPropsWeControl>) => 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>)>;
var Options: <TTag extends React.ElementType<any> = "ul">(props: ListboxOptionsProp<TTag>, ref: React.Ref<HTMLUListElement>) => 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>)> | null;
var Option: <TTag extends React.ElementType<any> = "li", TType = string>(props: {
var Button: <TTag extends React.ElementType<any> = "button">(props: Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl>, ref: React.Ref<HTMLButtonElement>) => 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>)> | null;
var Label: <TTag extends React.ElementType<any> = "label">(props: Props<TTag, LabelRenderPropArg, LabelPropsWeControl>) => 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>)> | null;
var Options: <TTag extends React.ElementType<any> = "ul">(props: ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "id">> & {
static?: undefined;
} & {
unmount?: boolean | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "id">> & {
unmount?: undefined;
} & {
static?: boolean | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "aria-labelledby">> & {
static?: undefined;
} & {
unmount?: boolean | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "aria-labelledby">> & {
unmount?: undefined;
} & {
static?: boolean | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "onKeyDown">> & {
static?: undefined;
} & {
unmount?: boolean | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "onKeyDown">> & {
unmount?: undefined;
} & {
static?: boolean | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "aria-activedescendant">> & {
static?: undefined;
} & {
unmount?: boolean | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "aria-activedescendant">> & {
unmount?: undefined;
} & {
static?: boolean | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "role">> & {
static?: undefined;
} & {
unmount?: boolean | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "role">> & {
unmount?: undefined;
} & {
static?: boolean | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "tabIndex">> & {
static?: undefined;
} & {
unmount?: boolean | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionsRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "tabIndex">> & {
unmount?: undefined;
} & {
static?: boolean | undefined;
}), ref: React.Ref<HTMLUListElement>) => 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>)> | null;
var Option: <TTag extends React.ElementType<any> = "li", TType = unknown>(props: ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionRenderPropArg) => 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>)>) | null | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "id" | "onFocus" | "role" | "tabIndex" | "aria-disabled" | "aria-selected" | "onPointerLeave" | "className">> & {
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "value">> & {
disabled?: boolean | undefined;
value: TType;
className?: string | ((bag: OptionRenderPropArg) => string) | undefined;
}) => 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>)>;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "id">> & {
disabled?: boolean | undefined;
value: TType;
className?: string | ((bag: OptionRenderPropArg) => string) | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "role">> & {
disabled?: boolean | undefined;
value: TType;
className?: string | ((bag: OptionRenderPropArg) => string) | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "tabIndex">> & {
disabled?: boolean | undefined;
value: TType;
className?: string | ((bag: OptionRenderPropArg) => string) | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "aria-disabled">> & {
disabled?: boolean | undefined;
value: TType;
className?: string | ((bag: OptionRenderPropArg) => string) | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "aria-selected">> & {
disabled?: boolean | undefined;
value: TType;
className?: string | ((bag: OptionRenderPropArg) => string) | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "onPointerLeave">> & {
disabled?: boolean | undefined;
value: TType;
className?: string | ((bag: OptionRenderPropArg) => string) | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "onFocus">> & {
disabled?: boolean | undefined;
value: TType;
className?: string | ((bag: OptionRenderPropArg) => string) | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: OptionRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "className">> & {
disabled?: boolean | undefined;
value: TType;
className?: string | ((bag: OptionRenderPropArg) => string) | undefined;
})) => 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>)> | null;
}
declare type ButtonPropsWeControl = 'ref' | 'id' | 'type' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded' | 'aria-labelledby' | 'onKeyDown' | 'onFocus' | 'onBlur' | 'onPointerUp';
declare type ButtonRenderPropArg = {
open: boolean;
focused: boolean;
};
declare type ButtonPropsWeControl = 'id' | 'type' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded' | 'aria-labelledby' | 'onKeyDown' | 'onPointerUp';
declare type LabelPropsWeControl = 'id' | 'ref' | 'onPointerUp';

@@ -37,9 +197,5 @@ declare type LabelRenderPropArg = {

};
declare type OptionsPropsWeControl = 'aria-activedescendant' | 'aria-labelledby' | 'id' | 'onKeyDown' | 'ref' | 'role' | 'tabIndex';
declare type OptionsRenderPropArg = {
open: boolean;
};
declare type ListboxOptionsProp<TTag> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl> & {
static?: boolean;
};
declare type OptionRenderPropArg = {

@@ -46,0 +202,0 @@ active: boolean;

170

dist/components/menu/menu.d.ts

@@ -11,15 +11,107 @@ import * as React from 'react';

export declare namespace Menu {
var Button: <TTag extends React.ElementType<any> = "button">(props: Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl>, ref: React.Ref<HTMLButtonElement>) => 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>)>;
var Items: <TTag extends React.ElementType<any> = "div">(props: {
var Button: <TTag extends React.ElementType<any> = "button">(props: Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl>, ref: React.Ref<HTMLButtonElement>) => 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>)> | null;
var Items: <TTag extends React.ElementType<any> = "div">(props: ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => 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>)>) | null | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, ItemsPropsWeControl>> & {
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "id">> & {
static?: undefined;
} & {
unmount?: boolean | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "id">> & {
unmount?: undefined;
} & {
static?: boolean | undefined;
}, ref: React.Ref<HTMLDivElement>) => 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>)> | null;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "onKeyDown">> & {
static?: undefined;
} & {
unmount?: boolean | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "onKeyDown">> & {
unmount?: undefined;
} & {
static?: boolean | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "aria-activedescendant">> & {
static?: undefined;
} & {
unmount?: boolean | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "aria-activedescendant">> & {
unmount?: undefined;
} & {
static?: boolean | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "aria-labelledby">> & {
static?: undefined;
} & {
unmount?: boolean | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "aria-labelledby">> & {
unmount?: undefined;
} & {
static?: boolean | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "role">> & {
static?: undefined;
} & {
unmount?: boolean | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "role">> & {
unmount?: undefined;
} & {
static?: boolean | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "tabIndex">> & {
static?: undefined;
} & {
unmount?: boolean | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemsRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "tabIndex">> & {
unmount?: undefined;
} & {
static?: boolean | undefined;
}), ref: React.Ref<HTMLDivElement>) => 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>)> | null;
var Item: <TTag extends React.ElementType<any> = React.ExoticComponent<{
children?: React.ReactNode;
}>>(props: {
}>>(props: ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemRenderPropArg) => 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>)>) | null | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "id" | "onFocus" | "role" | "tabIndex" | "aria-disabled" | "onPointerLeave" | "className">> & {
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "id">> & {
disabled?: boolean | undefined;

@@ -30,10 +122,68 @@ onClick?: ((event: {

className?: string | ((bag: ItemRenderPropArg) => string) | undefined;
}) => 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>)>;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "role">> & {
disabled?: boolean | undefined;
onClick?: ((event: {
preventDefault: Function;
}) => void) | undefined;
className?: string | ((bag: ItemRenderPropArg) => string) | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "tabIndex">> & {
disabled?: boolean | undefined;
onClick?: ((event: {
preventDefault: Function;
}) => void) | undefined;
className?: string | ((bag: ItemRenderPropArg) => string) | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "aria-disabled">> & {
disabled?: boolean | undefined;
onClick?: ((event: {
preventDefault: Function;
}) => void) | undefined;
className?: string | ((bag: ItemRenderPropArg) => string) | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "onPointerLeave">> & {
disabled?: boolean | undefined;
onClick?: ((event: {
preventDefault: Function;
}) => void) | undefined;
className?: string | ((bag: ItemRenderPropArg) => string) | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "onFocus">> & {
disabled?: boolean | undefined;
onClick?: ((event: {
preventDefault: Function;
}) => void) | undefined;
className?: string | ((bag: ItemRenderPropArg) => string) | undefined;
}) | ({
as?: TTag | undefined;
children?: string | number | boolean | {} | 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>)> | React.ReactNodeArray | React.ReactPortal | ((bag: ItemRenderPropArg) => 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>)>) | null | undefined;
refName?: string | undefined;
} & Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "className">> & {
disabled?: boolean | undefined;
onClick?: ((event: {
preventDefault: Function;
}) => void) | undefined;
className?: string | ((bag: ItemRenderPropArg) => string) | undefined;
})) => 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>)> | null;
}
declare type ButtonPropsWeControl = 'ref' | 'id' | 'type' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded' | 'onKeyDown' | 'onFocus' | 'onBlur' | 'onPointerUp';
declare type ButtonRenderPropArg = {
open: boolean;
focused: boolean;
};
declare type ItemsPropsWeControl = 'aria-activedescendant' | 'aria-labelledby' | 'id' | 'onKeyDown' | 'ref' | 'role' | 'tabIndex';
declare type ButtonPropsWeControl = 'id' | 'type' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded' | 'onKeyDown' | 'onPointerUp';
declare type ItemsRenderPropArg = {

@@ -40,0 +190,0 @@ open: boolean;

11

dist/components/switch/switch.d.ts
import * as React from 'react';
import { Props } from '../../types';
declare type GroupRenderPropArg = {};
declare const DEFAULT_SWITCH_TAG = "button";

@@ -8,3 +7,3 @@ declare type SwitchRenderPropArg = {

};
declare type SwitchPropsWeControl = 'id' | 'role' | 'tabIndex' | 'aria-checked' | 'onClick' | 'onKeyDown';
declare type SwitchPropsWeControl = 'id' | 'role' | 'tabIndex' | 'aria-checked' | 'onClick' | 'onKeyUp' | 'onKeyPress';
export declare function Switch<TTag extends React.ElementType = typeof DEFAULT_SWITCH_TAG>(props: Props<TTag, SwitchRenderPropArg, SwitchPropsWeControl | 'checked' | 'onChange' | 'className'> & {

@@ -14,11 +13,11 @@ checked: boolean;

className?: ((bag: SwitchRenderPropArg) => string) | string;
}): 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>)>;
}): 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>)> | null;
export declare namespace Switch {
var Group: <TTag extends React.ElementType<any> = React.ExoticComponent<{
children?: React.ReactNode;
}>>(props: Props<TTag, GroupRenderPropArg, any>) => JSX.Element;
var Label: <TTag extends React.ElementType<any> = "label">(props: Props<TTag, LabelRenderPropArg, LabelPropsWeControl>) => 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>)>;
}>>(props: Props<TTag, {}, unique symbol>) => JSX.Element;
var Label: <TTag extends React.ElementType<any> = "label">(props: Props<TTag, LabelRenderPropArg, LabelPropsWeControl>) => 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>)> | null;
}
declare type LabelRenderPropArg = {};
declare type LabelPropsWeControl = 'id' | 'ref' | 'onPointerUp';
declare type LabelRenderPropArg = {};
export {};

29

dist/components/transitions/transition.d.ts
import * as React from 'react';
import { Props } from 'types';
import { Features, PropsForFeatures } from '../../utils/render';
export declare type TransitionClasses = Partial<{

@@ -10,17 +12,16 @@ enter: string;

}>;
declare type HTMLTags = keyof JSX.IntrinsicElements;
declare type HTMLTagProps<TTag extends HTMLTags> = JSX.IntrinsicElements[TTag];
declare type AsShortcut<TTag extends HTMLTags> = {
children?: React.ReactNode;
as?: TTag;
} & Omit<HTMLTagProps<TTag>, 'ref'>;
declare type AsRenderPropFunction = {
children: (ref: React.MutableRefObject<any>) => JSX.Element;
};
declare type BaseConfig = Partial<{
export declare type TransitionEvents = Partial<{
beforeEnter(): void;
afterEnter(): void;
beforeLeave(): void;
afterLeave(): void;
}>;
declare type TransitionChildProps<TTag> = Props<TTag, TransitionChildRenderPropArg> & PropsForFeatures<typeof TransitionChildRenderFeatures> & Partial<{
appear: boolean;
}>;
declare type TransitionChildProps<TTag extends HTMLTags> = BaseConfig & (AsShortcut<TTag> | AsRenderPropFunction) & TransitionClasses;
declare function TransitionChild<TTag extends HTMLTags = 'div'>(props: TransitionChildProps<TTag>): JSX.Element | null;
export declare function Transition<TTag extends HTMLTags = 'div'>(props: TransitionChildProps<TTag> & {
} & TransitionClasses & TransitionEvents>;
declare const DEFAULT_TRANSITION_CHILD_TAG = "div";
declare type TransitionChildRenderPropArg = React.MutableRefObject<HTMLDivElement>;
declare const TransitionChildRenderFeatures = Features.RenderStrategy;
declare function TransitionChild<TTag extends React.ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionChildProps<TTag>): JSX.Element;
export declare function Transition<TTag extends React.ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionChildProps<TTag> & {
show: boolean;

@@ -27,0 +28,0 @@ appear?: boolean;

2

dist/headlessui.cjs.production.min.js

@@ -1,2 +0,2 @@

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function n(){return(n=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function t(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n.indexOf(t=i[r])>=0||(o[t]=e[t]);return o}function r(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var o,i="undefined"!=typeof window?e.useLayoutEffect:e.useEffect,u={serverHandoffComplete:!1},a=0;function c(){return++a}function l(){var n=e.useState(u.serverHandoffComplete?c:null),t=n[0],r=n[1];return i((function(){null===t&&r(c())}),[]),e.useEffect((function(){!1===u.serverHandoffComplete&&(u.serverHandoffComplete=!0)}),[]),null!=t?""+t:void 0}function s(){var n=e.useRef(!0);return e.useEffect((function(){n.current=!1}),[]),n.current}function f(e,n){if(e in n){for(var t=n[e],r=arguments.length,o=new Array(r>2?r-2:0),i=2;i<r;i++)o[i-2]=arguments[i];return"function"==typeof t?t.apply(void 0,o):t}var u=new Error('Tried to handle "'+e+'" but there is no handler defined. Only defined handlers are: '+Object.keys(n).map((function(e){return'"'+e+'"'})).join(", ")+".");throw Error.captureStackTrace&&Error.captureStackTrace(u,f),u}function d(){var e=[],n={requestAnimationFrame:function(e){function n(){return e.apply(this,arguments)}return n.toString=function(){return e.toString()},n}((function(){var e=requestAnimationFrame.apply(void 0,arguments);n.add((function(){return cancelAnimationFrame(e)}))})),nextFrame:function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];n.requestAnimationFrame((function(){n.requestAnimationFrame.apply(n,t)}))},setTimeout:function(e){function n(){return e.apply(this,arguments)}return n.toString=function(){return e.toString()},n}((function(){var e=setTimeout.apply(void 0,arguments);n.add((function(){return clearTimeout(e)}))})),add:function(n){e.push(n)},dispose:function(){e.splice(0).forEach((function(e){return e()}))}};return n}function v(e){for(var n,t=arguments.length,r=new Array(t>1?t-1:0),o=1;o<t;o++)r[o-1]=arguments[o];e&&r.length>0&&(n=e.classList).add.apply(n,r)}function p(e){for(var n,t=arguments.length,r=new Array(t>1?t-1:0),o=1;o<t;o++)r[o-1]=arguments[o];e&&r.length>0&&(n=e.classList).remove.apply(n,r)}function m(e,n,t,r,i){var u=d(),a=void 0!==i?function(e){var n={called:!1};return function(){if(!n.called)return n.called=!0,e.apply(void 0,arguments)}}(i):function(){};return v.apply(void 0,[e].concat(n,t)),u.nextFrame((function(){p.apply(void 0,[e].concat(t)),v.apply(void 0,[e].concat(r)),u.add(function(e,n){var t=d();if(!e)return t.dispose;var r=getComputedStyle(e),i=[r.transitionDuration,r.transitionDelay].map((function(e){var n=e.split(",").filter(Boolean).map((function(e){return e.includes("ms")?parseFloat(e):1e3*parseFloat(e)})).sort((function(e,n){return n-e}))[0];return void 0===n?0:n})),u=i[0];return 0!==u?t.setTimeout((function(){n(o.Finished)}),u+i[1]):n(o.Finished),t.add((function(){return n(o.Cancelled)})),t.dispose}(e,(function(t){return p.apply(void 0,[e].concat(r,n)),a(t)})))})),u.add((function(){return p.apply(void 0,[e].concat(n,t,r))})),u.add((function(){return a(o.Cancelled)})),u.dispose}function b(n){return void 0===n&&(n=""),e.useMemo((function(){return n.split(" ").filter((function(e){return e.trim().length>1}))}),[n])}!function(e){e.Finished="finished",e.Cancelled="cancelled"}(o||(o={}));var h,y=e.createContext(null);!function(e){e.Visible="visible",e.Hidden="hidden"}(h||(h={}));var x,I,g,C,O,R=e.createContext(null);function S(n){var t=e.useRef([]),r=function(){var n=e.useRef(!0);return e.useEffect((function(){return function(){n.current=!1}}),[]),n}(),o=e.useCallback((function(e){var o=t.current.indexOf(e);-1!==o&&(t.current.splice(o,1),t.current.length<=0&&r.current&&(null==n||n()))}),[n,r,t]),i=e.useCallback((function(e){return t.current.push(e),function(){return o(e)}}),[t,o]);return e.useMemo((function(){return{children:t,register:i,unregister:o}}),[i,o,t])}function w(n){var r=n.children,u=n.enter,a=n.enterFrom,c=n.enterTo,f=n.leave,d=n.leaveFrom,v=n.leaveTo,p=t(n,["children","enter","enterFrom","enterTo","leave","leaveFrom","leaveTo"]),x=e.useRef(null),I=e.useState(h.Visible),g=I[0],C=I[1],O=function(){var n=e.useContext(y);if(null===n)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return n}(),w=O.show,k=O.appear,E=function(){var n=e.useContext(R);if(null===n)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return n}(),T=E.register,F=E.unregister,D=s(),L=l(),P=e.useRef(!1),M=S(e.useCallback((function(){P.current||(C(h.Hidden),F(L))}),[L,F,P]));i((function(){return T(L)}),[T,L]);var A=b(u),G=b(a),N=b(c),j=b(f),U=b(d),H=b(v);if(e.useEffect((function(){if(g===h.Visible&&null===x.current)throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")}),[x,g]),i((function(){var e=x.current;if(e&&(!D||k))return P.current=!0,w?m(e,A,G,N,(function(){P.current=!1})):m(e,j,U,H,(function(e){P.current=!1,e===o.Finished&&M.children.current.length<=0&&(C(h.Hidden),F(L))}))}),[L,P,F,M,x,D,k,w,A,G,N,j,U,H]),g===h.Hidden)return null;if("function"==typeof r)return e.createElement(R.Provider,{value:M},r(x));var Q=p.as,B=void 0===Q?"div":Q,V=t(p,["as"]);return e.createElement(R.Provider,{value:M},e.createElement(B,Object.assign({},V,{ref:x}),r))}function k(n){var r,o=n.show,i=n.appear,u=void 0!==i&&i,a=t(n,["show","appear"]);if(![!0,!1].includes(o))throw new Error("A <Transition /> is used but it is missing a `show={true | false}` prop.");var c=e.useState(o?h.Visible:h.Hidden),l=c[0],d=c[1],v=S(e.useCallback((function(){d(h.Hidden)}),[])),p=s(),m=e.useMemo((function(){return{show:o,appear:u||!p}}),[o,u,p]);return e.useEffect((function(){o?d(h.Visible):v.children.current.length<=0&&d(h.Hidden)}),[o,v]),e.createElement(R.Provider,{value:v},e.createElement(y.Provider,{value:m},f(l,((r={})[h.Visible]=function(){return e.createElement(w,Object.assign({},a))},r[h.Hidden]=null,r))))}function E(n,o,i){var u=n.as,a=void 0===u?i:u,c=n.children,l=t(n,["as","children"]),s="function"==typeof c?c(o):c;if(a===e.Fragment&&Object.keys(l).length>0){if(Array.isArray(s)&&s.length>1){var f=new Error("You should only render 1 child");throw Error.captureStackTrace&&Error.captureStackTrace(f,E),f}if(!e.isValidElement(s)){var d=new Error('You should render an element as a child. Did you forget the as="..." prop?');throw Error.captureStackTrace&&Error.captureStackTrace(d,E),d}return e.cloneElement(s,function(e,n,t){for(var o,i=Object.assign({},e),u=function(){var t,r=o.value;void 0!==e[r]&&void 0!==n[r]&&Object.assign(i,((t={})[r]=function(t){t.defaultPrevented||e[r](t),t.defaultPrevented||n[r](t)},t))},a=function(e,n){var t;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(t=function(e,n){if(e){if("string"==typeof e)return r(e,void 0);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?r(e,void 0):void 0}}(e))){t&&(e=t);var o=0;return function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(t=e[Symbol.iterator]()).next.bind(t)}(["onClick"]);!(o=a()).done;)u();return i}(function(e){var n=Object.assign({},e);for(var t in n)void 0===n[t]&&delete n[t];return n}(l),s.props))}return e.createElement(a,l,s)}function T(n){return e.forwardRef(n)}function F(){var n=e.useState(d)[0];return e.useEffect((function(){return function(){return n.dispose()}}),[n]),n}function D(){for(var n=arguments.length,t=new Array(n),r=0;r<n;r++)t[r]=arguments[r];return e.useCallback((function(e){t.forEach((function(n){if(null!==n)return"function"==typeof n?n(e):void(n.current=e)}))}),[t])}k.Child=w,function(e){e.Space=" ",e.Enter="Enter",e.Escape="Escape",e.Backspace="Backspace",e.ArrowUp="ArrowUp",e.ArrowDown="ArrowDown",e.Home="Home",e.End="End",e.PageUp="PageUp",e.PageDown="PageDown",e.Tab="Tab"}(x||(x={})),function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(g||(g={})),function(e){e[e.OpenMenu=0]="OpenMenu",e[e.CloseMenu=1]="CloseMenu",e[e.GoToItem=2]="GoToItem",e[e.Search=3]="Search",e[e.ClearSearch=4]="ClearSearch",e[e.RegisterItem=5]="RegisterItem",e[e.UnregisterItem=6]="UnregisterItem"}(C||(C={})),function(e){e[e.FirstItem=0]="FirstItem",e[e.PreviousItem=1]="PreviousItem",e[e.NextItem=2]="NextItem",e[e.LastItem=3]="LastItem",e[e.SpecificItem=4]="SpecificItem",e[e.Nothing=5]="Nothing"}(O||(O={}));var L=((I={})[C.CloseMenu]=function(e){return n({},e,{menuState:g.Closed})},I[C.OpenMenu]=function(e){return n({},e,{menuState:g.Open})},I[C.GoToItem]=function(e,t){var r=function(e,n,t){var r,o;if(e.items.length<=0)return null;var i=e.items,u=null!==(r=e.activeItemIndex)&&void 0!==r?r:-1,a=f(n,((o={})[O.FirstItem]=function(){return i.findIndex((function(e){return!e.dataRef.current.disabled}))},o[O.PreviousItem]=function(){var e=i.slice().reverse().findIndex((function(e,n,t){return!(-1!==u&&t.length-n-1>=u||e.dataRef.current.disabled)}));return-1===e?e:i.length-1-e},o[O.NextItem]=function(){return i.findIndex((function(e,n){return!(n<=u||e.dataRef.current.disabled)}))},o[O.LastItem]=function(){var e=i.slice().reverse().findIndex((function(e){return!e.dataRef.current.disabled}));return-1===e?e:i.length-1-e},o[O.SpecificItem]=function(){return i.findIndex((function(e){return e.id===t}))},o[O.Nothing]=function(){return null},o));return-1===a?e.activeItemIndex:a}(e,t.focus,t.id);return""===e.searchQuery&&e.activeItemIndex===r?e:n({},e,{searchQuery:"",activeItemIndex:r})},I[C.Search]=function(e,t){var r=e.searchQuery+t.value,o=e.items.findIndex((function(e){var n;return(null===(n=e.dataRef.current.textValue)||void 0===n?void 0:n.startsWith(r))&&!e.dataRef.current.disabled}));return n({},e,-1===o||o===e.activeItemIndex?{searchQuery:r}:{searchQuery:r,activeItemIndex:o})},I[C.ClearSearch]=function(e){return n({},e,{searchQuery:""})},I[C.RegisterItem]=function(e,t){return n({},e,{items:[].concat(e.items,[{id:t.id,dataRef:t.dataRef}])})},I[C.UnregisterItem]=function(e,t){var r=e.items.slice(),o=null!==e.activeItemIndex?r[e.activeItemIndex]:null,i=r.findIndex((function(e){return e.id===t.id}));return-1!==i&&r.splice(i,1),n({},e,{items:r,activeItemIndex:i===e.activeItemIndex||null===o?null:r.indexOf(o)})},I),P=e.createContext(null);function M(n){var t=e.useContext(P);if(null===t){var r=new Error("<"+n+" /> is missing a parent <"+N.name+" /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,M),r}return t}function A(e,n){return f(n.type,L,e,n)}var G=e.Fragment;function N(n){var t=F(),r=e.useReducer(A,{menuState:g.Closed,buttonRef:e.createRef(),itemsRef:e.createRef(),items:[],searchQuery:"",activeItemIndex:null}),o=r[0],i=o.menuState,u=o.itemsRef,a=o.buttonRef,c=r[1];e.useEffect((function(){function e(e){var n,t,r;i===g.Open&&((null===(n=a.current)||void 0===n?void 0:n.contains(e.target))||(null===(t=u.current)||void 0===t?void 0:t.contains(e.target))||(c({type:C.CloseMenu}),e.defaultPrevented||null===(r=a.current)||void 0===r||r.focus()))}return window.addEventListener("click",e),function(){return window.removeEventListener("click",e)}}),[i,u,a,t,c]);var l=e.useMemo((function(){return{open:i===g.Open}}),[i]);return e.createElement(P.Provider,{value:r},E(n,l,G))}var j,U,H,Q,B=T((function t(r,o){var i,u=M([N.name,t.name].join(".")),a=u[0],c=u[1],s=D(a.buttonRef,o),f=e.useState(!1),d=f[0],v=f[1],p="headlessui-menu-button-"+l(),m=F(),b=e.useCallback((function(e){switch(e.key){case x.Space:case x.Enter:case x.ArrowDown:e.preventDefault(),c({type:C.OpenMenu}),m.nextFrame((function(){var e;null===(e=a.itemsRef.current)||void 0===e||e.focus(),c({type:C.GoToItem,focus:O.FirstItem})}));break;case x.ArrowUp:e.preventDefault(),c({type:C.OpenMenu}),m.nextFrame((function(){var e;null===(e=a.itemsRef.current)||void 0===e||e.focus(),c({type:C.GoToItem,focus:O.LastItem})}))}}),[c,a,m]),h=e.useCallback((function(e){a.menuState===g.Open?c({type:C.CloseMenu}):(e.preventDefault(),c({type:C.OpenMenu}),m.nextFrame((function(){var e;return null===(e=a.itemsRef.current)||void 0===e?void 0:e.focus()})))}),[c,m,a]),y=e.useCallback((function(){var e;a.menuState===g.Open&&(null===(e=a.itemsRef.current)||void 0===e||e.focus()),v(!0)}),[a,v]),I=e.useCallback((function(){return v(!1)}),[v]),R=e.useMemo((function(){return{open:a.menuState===g.Open,focused:d}}),[a,d]);return E(n({},r,{ref:s,id:p,type:"button","aria-haspopup":!0,"aria-controls":null===(i=a.itemsRef.current)||void 0===i?void 0:i.id,"aria-expanded":a.menuState===g.Open||void 0,onKeyDown:b,onFocus:y,onBlur:I,onPointerUp:h}),R,"button")})),V=T((function r(o,i){var u,a,c=o.static,s=void 0!==c&&c,f=t(o,["static"]),d=M([N.name,r.name].join(".")),v=d[0],p=d[1],m=D(v.itemsRef,i),b="headlessui-menu-items-"+l(),h=F(),y=F(),I=e.useCallback((function(e){switch(y.dispose(),e.key){case x.Space:if(""!==v.searchQuery)return e.preventDefault(),p({type:C.Search,value:e.key});case x.Enter:var n;e.preventDefault(),p({type:C.CloseMenu}),null!==v.activeItemIndex&&(null===(n=document.getElementById(v.items[v.activeItemIndex].id))||void 0===n||n.click(),h.nextFrame((function(){var e;return null===(e=v.buttonRef.current)||void 0===e?void 0:e.focus()})));break;case x.ArrowDown:return e.preventDefault(),p({type:C.GoToItem,focus:O.NextItem});case x.ArrowUp:return e.preventDefault(),p({type:C.GoToItem,focus:O.PreviousItem});case x.Home:case x.PageUp:return e.preventDefault(),p({type:C.GoToItem,focus:O.FirstItem});case x.End:case x.PageDown:return e.preventDefault(),p({type:C.GoToItem,focus:O.LastItem});case x.Escape:e.preventDefault(),p({type:C.CloseMenu}),h.nextFrame((function(){var e;return null===(e=v.buttonRef.current)||void 0===e?void 0:e.focus()}));break;case x.Tab:return e.preventDefault();default:1===e.key.length&&(p({type:C.Search,value:e.key}),y.setTimeout((function(){return p({type:C.ClearSearch})}),350))}}),[h,p,y,v]),R=e.useMemo((function(){return{open:v.menuState===g.Open}}),[v]),S={"aria-activedescendant":null===v.activeItemIndex||null===(u=v.items[v.activeItemIndex])||void 0===u?void 0:u.id,"aria-labelledby":null===(a=v.buttonRef.current)||void 0===a?void 0:a.id,id:b,onKeyDown:I,role:"menu",tabIndex:0};return s||v.menuState!==g.Closed?E(n({},f,S,{ref:m}),R,"div"):null})),q=e.Fragment;function K(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}function W(n,t){var r=e.useState(n),o=r[0],u=r[1],a=e.useRef(n);return i((function(){a.current=n}),[n]),i((function(){return u(a.current)}),[a,u].concat(t)),o}N.Button=B,N.Items=V,N.Item=function r(o){var u=o.disabled,a=void 0!==u&&u,c=o.className,s=o.onClick,f=t(o,["disabled","className","onClick"]),d=M([N.name,r.name].join(".")),v=d[0],p=d[1],m=F(),b="headlessui-menu-item-"+l(),h=null!==v.activeItemIndex&&v.items[v.activeItemIndex].id===b,y=e.useRef({disabled:a});i((function(){y.current.disabled=a}),[y,a]),i((function(){var e,n;y.current.textValue=null===(e=document.getElementById(b))||void 0===e||null===(n=e.textContent)||void 0===n?void 0:n.toLowerCase()}),[y,b]),i((function(){return p({type:C.RegisterItem,id:b,dataRef:y}),function(){return p({type:C.UnregisterItem,id:b})}}),[y,b]);var x=e.useCallback((function(e){return a?e.preventDefault():(p({type:C.CloseMenu}),m.nextFrame((function(){var e;return null===(e=v.buttonRef.current)||void 0===e?void 0:e.focus()})),s?s(e):void 0)}),[m,p,v.buttonRef,a,s]),I=e.useCallback((function(){if(a)return p({type:C.GoToItem,focus:O.Nothing});p({type:C.GoToItem,focus:O.SpecificItem,id:b})}),[a,b,p]),g=e.useCallback((function(){a||h||p({type:C.GoToItem,focus:O.SpecificItem,id:b})}),[a,h,b,p]),R=e.useCallback((function(){a||h&&p({type:C.GoToItem,focus:O.Nothing})}),[a,h,p]),S=e.useMemo((function(){return{active:h,disabled:a}}),[h,a]);return E(n({},f,{id:b,role:"menuitem",tabIndex:-1,className:K(c,S),"aria-disabled":!0===a||void 0,onClick:x,onFocus:I,onPointerMove:g,onPointerLeave:R}),S,q)},function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(U||(U={})),function(e){e[e.OpenListbox=0]="OpenListbox",e[e.CloseListbox=1]="CloseListbox",e[e.GoToOption=2]="GoToOption",e[e.Search=3]="Search",e[e.ClearSearch=4]="ClearSearch",e[e.RegisterOption=5]="RegisterOption",e[e.UnregisterOption=6]="UnregisterOption"}(H||(H={})),function(e){e[e.First=0]="First",e[e.Previous=1]="Previous",e[e.Next=2]="Next",e[e.Last=3]="Last",e[e.Specific=4]="Specific",e[e.Nothing=5]="Nothing"}(Q||(Q={}));var Y=((j={})[H.CloseListbox]=function(e){return n({},e,{listboxState:U.Closed})},j[H.OpenListbox]=function(e){return n({},e,{listboxState:U.Open})},j[H.GoToOption]=function(e,t){var r=function(e,n,t){var r,o;if(e.options.length<=0)return null;var i=e.options,u=null!==(r=e.activeOptionIndex)&&void 0!==r?r:-1,a=f(n,((o={})[Q.First]=function(){return i.findIndex((function(e){return!e.dataRef.current.disabled}))},o[Q.Previous]=function(){var e=i.slice().reverse().findIndex((function(e,n,t){return!(-1!==u&&t.length-n-1>=u||e.dataRef.current.disabled)}));return-1===e?e:i.length-1-e},o[Q.Next]=function(){return i.findIndex((function(e,n){return!(n<=u||e.dataRef.current.disabled)}))},o[Q.Last]=function(){var e=i.slice().reverse().findIndex((function(e){return!e.dataRef.current.disabled}));return-1===e?e:i.length-1-e},o[Q.Specific]=function(){return i.findIndex((function(e){return e.id===t}))},o[Q.Nothing]=function(){return null},o));return-1===a?e.activeOptionIndex:a}(e,t.focus,t.id);return""===e.searchQuery&&e.activeOptionIndex===r?e:n({},e,{searchQuery:"",activeOptionIndex:r})},j[H.Search]=function(e,t){var r=e.searchQuery+t.value,o=e.options.findIndex((function(e){var n;return!e.dataRef.current.disabled&&(null===(n=e.dataRef.current.textValue)||void 0===n?void 0:n.startsWith(r))}));return n({},e,-1===o||o===e.activeOptionIndex?{searchQuery:r}:{searchQuery:r,activeOptionIndex:o})},j[H.ClearSearch]=function(e){return n({},e,{searchQuery:""})},j[H.RegisterOption]=function(e,t){return n({},e,{options:[].concat(e.options,[{id:t.id,dataRef:t.dataRef}])})},j[H.UnregisterOption]=function(e,t){var r=e.options.slice(),o=null!==e.activeOptionIndex?r[e.activeOptionIndex]:null,i=r.findIndex((function(e){return e.id===t.id}));return-1!==i&&r.splice(i,1),n({},e,{options:r,activeOptionIndex:i===e.activeOptionIndex||null===o?null:r.indexOf(o)})},j),_=e.createContext(null);function $(e,n){return f(n.type,Y,e,n)}function z(n){var t=e.useContext(_);if(null===t){var r=new Error("<"+n+" /> is missing a parent <"+X.name+" /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,z),r}return t}var J=e.Fragment;function X(n){var r=n.value,o=n.onChange,u=t(n,["value","onChange"]),a=F(),c=e.useReducer($,{listboxState:U.Closed,propsRef:{current:{value:r,onChange:o}},labelRef:e.createRef(),buttonRef:e.createRef(),optionsRef:e.createRef(),options:[],searchQuery:"",activeOptionIndex:null}),l=c[0],s=l.listboxState,f=l.propsRef,d=l.optionsRef,v=l.buttonRef,p=c[1];i((function(){f.current.value=r}),[r,f]),i((function(){f.current.onChange=o}),[o,f]),e.useEffect((function(){function e(e){var n,t,r;s===U.Open&&((null===(n=v.current)||void 0===n?void 0:n.contains(e.target))||(null===(t=d.current)||void 0===t?void 0:t.contains(e.target))||(p({type:H.CloseListbox}),e.defaultPrevented||null===(r=v.current)||void 0===r||r.focus()))}return window.addEventListener("click",e),function(){return window.removeEventListener("click",e)}}),[s,d,v,a,p]);var m=e.useMemo((function(){return{open:s===U.Open}}),[s]);return e.createElement(_.Provider,{value:c},E(u,m,J))}var Z=T((function t(r,o){var i,u=z([X.name,t.name].join(".")),a=u[0],c=u[1],s=D(a.buttonRef,o),f=e.useState(!1),d=f[0],v=f[1],p="headlessui-listbox-button-"+l(),m=F(),b=e.useCallback((function(e){switch(e.key){case x.Space:case x.Enter:case x.ArrowDown:e.preventDefault(),c({type:H.OpenListbox}),m.nextFrame((function(){var e;null===(e=a.optionsRef.current)||void 0===e||e.focus(),a.propsRef.current.value||c({type:H.GoToOption,focus:Q.First})}));break;case x.ArrowUp:e.preventDefault(),c({type:H.OpenListbox}),m.nextFrame((function(){var e;null===(e=a.optionsRef.current)||void 0===e||e.focus(),a.propsRef.current.value||c({type:H.GoToOption,focus:Q.Last})}))}}),[c,a,m]),h=e.useCallback((function(e){a.listboxState===U.Open?c({type:H.CloseListbox}):(e.preventDefault(),c({type:H.OpenListbox}),m.nextFrame((function(){var e;return null===(e=a.optionsRef.current)||void 0===e?void 0:e.focus()})))}),[c,m,a]),y=e.useCallback((function(){var e;if(a.listboxState===U.Open)return null===(e=a.optionsRef.current)||void 0===e?void 0:e.focus();v(!0)}),[a,v]),I=e.useCallback((function(){return v(!1)}),[v]),g=W((function(){if(a.labelRef.current)return[a.labelRef.current.id,p].join(" ")}),[a.labelRef.current,p]),C=e.useMemo((function(){return{open:a.listboxState===U.Open,focused:d}}),[a,d]);return E(n({},r,{ref:s,id:p,type:"button","aria-haspopup":!0,"aria-controls":null===(i=a.optionsRef.current)||void 0===i?void 0:i.id,"aria-expanded":a.listboxState===U.Open||void 0,"aria-labelledby":g,onKeyDown:b,onFocus:y,onBlur:I,onPointerUp:h}),C,"button")})),ee=T((function r(o,i){var u,a=o.static,c=void 0!==a&&a,s=t(o,["enter","enterFrom","enterTo","leave","leaveFrom","leaveTo","static"]),f=z([X.name,r.name].join(".")),d=f[0],v=f[1],p=D(d.optionsRef,i),m="headlessui-listbox-options-"+l(),b=F(),h=F(),y=e.useCallback((function(e){switch(h.dispose(),e.key){case x.Space:if(""!==d.searchQuery)return e.preventDefault(),v({type:H.Search,value:e.key});case x.Enter:e.preventDefault(),v({type:H.CloseListbox}),null!==d.activeOptionIndex&&d.propsRef.current.onChange(d.options[d.activeOptionIndex].dataRef.current.value),b.nextFrame((function(){var e;return null===(e=d.buttonRef.current)||void 0===e?void 0:e.focus()}));break;case x.ArrowDown:return e.preventDefault(),v({type:H.GoToOption,focus:Q.Next});case x.ArrowUp:return e.preventDefault(),v({type:H.GoToOption,focus:Q.Previous});case x.Home:case x.PageUp:return e.preventDefault(),v({type:H.GoToOption,focus:Q.First});case x.End:case x.PageDown:return e.preventDefault(),v({type:H.GoToOption,focus:Q.Last});case x.Escape:return e.preventDefault(),v({type:H.CloseListbox}),b.nextFrame((function(){var e;return null===(e=d.buttonRef.current)||void 0===e?void 0:e.focus()}));case x.Tab:return e.preventDefault();default:1===e.key.length&&(v({type:H.Search,value:e.key}),h.setTimeout((function(){return v({type:H.ClearSearch})}),350))}}),[b,v,h,d]),I=W((function(){var e,n,t;return null!==(e=null===(n=d.labelRef.current)||void 0===n?void 0:n.id)&&void 0!==e?e:null===(t=d.buttonRef.current)||void 0===t?void 0:t.id}),[d.labelRef.current,d.buttonRef.current]),g=e.useMemo((function(){return{open:d.listboxState===U.Open}}),[d]),C={"aria-activedescendant":null===d.activeOptionIndex||null===(u=d.options[d.activeOptionIndex])||void 0===u?void 0:u.id,"aria-labelledby":I,id:m,onKeyDown:y,role:"listbox",tabIndex:0};return c||d.listboxState!==U.Closed?E(n({},s,C,{ref:p}),g,"ul"):null}));function ne(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}X.Button=Z,X.Label=function t(r){var o=z([X.name,t.name].join("."))[0],i="headlessui-listbox-label-"+l(),u=e.useCallback((function(){var e;return null===(e=o.buttonRef.current)||void 0===e?void 0:e.focus()}),[o.buttonRef]),a=e.useMemo((function(){return{open:o.listboxState===U.Open}}),[o]);return E(n({},r,{ref:o.labelRef,id:i,onPointerUp:u}),a,"label")},X.Options=ee,X.Option=function r(o){var u=o.disabled,a=void 0!==u&&u,c=o.value,s=o.className,f=t(o,["disabled","value","className"]),v=z([X.name,r.name].join(".")),p=v[0],m=v[1],b=F(),h="headlessui-listbox-option-"+l(),y=null!==p.activeOptionIndex&&p.options[p.activeOptionIndex].id===h,x=p.propsRef.current.value===c,I=e.useRef({disabled:a,value:c});i((function(){I.current.disabled=a}),[I,a]),i((function(){I.current.value=c}),[I,c]),i((function(){var e,n;I.current.textValue=null===(e=document.getElementById(h))||void 0===e||null===(n=e.textContent)||void 0===n?void 0:n.toLowerCase()}),[I,h]);var g=e.useCallback((function(){return p.propsRef.current.onChange(c)}),[p.propsRef,c]);i((function(){return m({type:H.RegisterOption,id:h,dataRef:I}),function(){return m({type:H.UnregisterOption,id:h})}}),[I,h]),i((function(){var e,n;x&&(m({type:H.GoToOption,focus:Q.Specific,id:h}),null===(e=document.getElementById(h))||void 0===e||null===(n=e.focus)||void 0===n||n.call(e))}),[]),i((function(){if(y){var e=d();return e.nextFrame((function(){var e,n;return null===(e=document.getElementById(h))||void 0===e||null===(n=e.scrollIntoView)||void 0===n?void 0:n.call(e,{block:"nearest"})})),e.dispose}}),[y]);var C=e.useCallback((function(e){if(a)return e.preventDefault();g(),m({type:H.CloseListbox}),b.nextFrame((function(){var e;return null===(e=p.buttonRef.current)||void 0===e?void 0:e.focus()}))}),[b,m,p.buttonRef,a,g]),O=e.useCallback((function(){if(a)return m({type:H.GoToOption,focus:Q.Nothing});m({type:H.GoToOption,focus:Q.Specific,id:h})}),[a,h,m]),R=e.useCallback((function(){a||y||m({type:H.GoToOption,focus:Q.Specific,id:h})}),[a,y,h,m]),S=e.useCallback((function(){a||y&&m({type:H.GoToOption,focus:Q.Nothing})}),[a,y,m]),w=e.useMemo((function(){return{active:y,selected:x,disabled:a}}),[y,x,a]);return E(n({},f,{id:h,role:"option",tabIndex:-1,className:ne(s,w),"aria-disabled":!0===a||void 0,"aria-selected":!0===x||void 0,onClick:C,onFocus:O,onPointerMove:R,onPointerLeave:S}),w,"li")};var te=e.createContext(null);function re(n){var t=e.useContext(te);if(null===t){var r=new Error("<"+n+" /> is missing a parent <Switch.Group /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,re),r}return t}var oe=e.Fragment;function ie(r){var o,i=r.checked,u=r.onChange,a=r.className,c=t(r,["checked","onChange","className"]),s="headlessui-switch-"+l(),f=e.useContext(te),d=e.useCallback((function(){return u(!i)}),[u,i]),v=e.useCallback((function(e){e.preventDefault(),d()}),[d]),p=e.useCallback((function(e){e.preventDefault(),e.key===x.Space&&d()}),[d]),m=e.useMemo((function(){return{checked:i}}),[i]);return E(n({},c,{id:s,ref:null===f?void 0:f.setSwitch,role:"switch",tabIndex:0,className:ue(a,m),"aria-checked":i,"aria-labelledby":null==f||null===(o=f.label)||void 0===o?void 0:o.id,onClick:v,onKeyDown:p}),m,"button")}function ue(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}ie.Group=function(n){var t=e.useState(null),r=t[0],o=t[1],i=e.useState(null),u=i[0],a=i[1],c=e.useMemo((function(){return{switch:r,label:u,setSwitch:o,setLabel:a}}),[r,o,u,a]);return e.createElement(te.Provider,{value:c},E(n,{},oe))},ie.Label=function t(r){var o=re([ie.name,t.name].join(".")),i="headlessui-switch-label-"+l(),u=e.useCallback((function(){o.switch&&(o.switch.click(),o.switch.focus())}),[o.switch]);return E(n({},r,{ref:o.setLabel,id:i,onPointerUp:u}),{},"label")},exports.Listbox=X,exports.Menu=N,exports.Switch=ie,exports.Transition=k;
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function n(){return(n=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function t(e,n){if(null==e)return{};var t,r,o={},u=Object.keys(e);for(r=0;r<u.length;r++)n.indexOf(t=u[r])>=0||(o[t]=e[t]);return o}function r(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function o(e,n){var t;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(t=function(e,n){if(e){if("string"==typeof e)return r(e,void 0);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?r(e,void 0):void 0}}(e))||n&&e&&"number"==typeof e.length){t&&(e=t);var o=0;return function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(t=e[Symbol.iterator]()).next.bind(t)}var u,i,a,c="undefined"!=typeof window?e.useLayoutEffect:e.useEffect,l={serverHandoffComplete:!1},s=0;function f(){return++s}function d(){var n=e.useState(l.serverHandoffComplete?f:null),t=n[0],r=n[1];return c((function(){null===t&&r(f())}),[]),e.useEffect((function(){!1===l.serverHandoffComplete&&(l.serverHandoffComplete=!0)}),[]),null!=t?""+t:void 0}function v(){var n=e.useRef(!0);return e.useEffect((function(){n.current=!1}),[]),n.current}function p(e,n){if(e in n){for(var t=n[e],r=arguments.length,o=new Array(r>2?r-2:0),u=2;u<r;u++)o[u-2]=arguments[u];return"function"==typeof t?t.apply(void 0,o):t}var i=new Error('Tried to handle "'+e+'" but there is no handler defined. Only defined handlers are: '+Object.keys(n).map((function(e){return'"'+e+'"'})).join(", ")+".");throw Error.captureStackTrace&&Error.captureStackTrace(i,p),i}function m(e,r,o,a,c){if(void 0===c&&(c=!0),c)return b(e,r,o);var l=null!=a?a:u.None;if(l&u.Static){var s=e.static,f=void 0!==s&&s,d=t(e,["static"]);if(f)return b(d,r,o)}if(l&u.RenderStrategy){var v,m=e.unmount,y=void 0===m||m,h=t(e,["unmount"]);return p(y?i.Unmount:i.Hidden,((v={})[i.Unmount]=function(){return null},v[i.Hidden]=function(){return b(n({},h,{hidden:!0,style:{display:"none"}}),r,o)},v))}return b(e,r,o)}function b(n,r,u){var i,a=h(n,["unmount","static"]),c=a.as,l=void 0===c?u:c,s=a.children,f=a.refName,d=void 0===f?"ref":f,v=t(a,["as","children","refName"]),p=void 0!==n.ref?((i={})[d]=n.ref,i):{},m="function"==typeof s?s(r):s;if(l===e.Fragment&&Object.keys(v).length>0){if(Array.isArray(m)&&m.length>1){var y=new Error("You should only render 1 child");throw Error.captureStackTrace&&Error.captureStackTrace(y,b),y}if(!e.isValidElement(m)){var x=new Error('You should render an element as a child. Did you forget the as="..." prop?');throw Error.captureStackTrace&&Error.captureStackTrace(x,b),x}return e.cloneElement(m,Object.assign({},function(e,n,t){for(var r,u=Object.assign({},e),i=function(){var t,o=r.value;void 0!==e[o]&&void 0!==n[o]&&Object.assign(u,((t={})[o]=function(t){t.defaultPrevented||e[o](t),t.defaultPrevented||n[o](t)},t))},a=o(["onClick"]);!(r=a()).done;)i();return u}(function(e){var n=Object.assign({},e);for(var t in n)void 0===n[t]&&delete n[t];return n}(h(v,["ref"])),m.props),p))}return e.createElement(l,Object.assign({},h(v,["ref"]),l!==e.Fragment&&p),m)}function y(n){return e.forwardRef(n)}function h(e,n){void 0===n&&(n=[]);for(var t,r=Object.assign({},e),u=o(n);!(t=u()).done;){var i=t.value;i in r&&delete r[i]}return r}function x(){var e=[],n={requestAnimationFrame:function(e){function n(){return e.apply(this,arguments)}return n.toString=function(){return e.toString()},n}((function(){var e=requestAnimationFrame.apply(void 0,arguments);n.add((function(){return cancelAnimationFrame(e)}))})),nextFrame:function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];n.requestAnimationFrame((function(){n.requestAnimationFrame.apply(n,t)}))},setTimeout:function(e){function n(){return e.apply(this,arguments)}return n.toString=function(){return e.toString()},n}((function(){var e=setTimeout.apply(void 0,arguments);n.add((function(){return clearTimeout(e)}))})),add:function(n){e.push(n)},dispose:function(){e.splice(0).forEach((function(e){return e()}))}};return n}function g(e){for(var n,t=arguments.length,r=new Array(t>1?t-1:0),o=1;o<t;o++)r[o-1]=arguments[o];e&&r.length>0&&(n=e.classList).add.apply(n,r)}function S(e){for(var n,t=arguments.length,r=new Array(t>1?t-1:0),o=1;o<t;o++)r[o-1]=arguments[o];e&&r.length>0&&(n=e.classList).remove.apply(n,r)}function I(e,n,t,r,o){var u=x(),i=void 0!==o?function(e){var n={called:!1};return function(){if(!n.called)return n.called=!0,e.apply(void 0,arguments)}}(o):function(){};return g.apply(void 0,[e].concat(n,t)),u.nextFrame((function(){S.apply(void 0,[e].concat(t)),g.apply(void 0,[e].concat(r)),u.add(function(e,n){var t=x();if(!e)return t.dispose;var r=getComputedStyle(e),o=[r.transitionDuration,r.transitionDelay].map((function(e){var n=e.split(",").filter(Boolean).map((function(e){return e.includes("ms")?parseFloat(e):1e3*parseFloat(e)})).sort((function(e,n){return n-e}))[0];return void 0===n?0:n})),u=o[0];return 0!==u?t.setTimeout((function(){n(a.Finished)}),u+o[1]):n(a.Finished),t.add((function(){return n(a.Cancelled)})),t.dispose}(e,(function(t){return S.apply(void 0,[e].concat(r,n)),i(t)})))})),u.add((function(){return S.apply(void 0,[e].concat(n,t,r))})),u.add((function(){return i(a.Cancelled)})),u.dispose}function C(n){return void 0===n&&(n=""),e.useMemo((function(){return n.split(" ").filter((function(e){return e.trim().length>1}))}),[n])}!function(e){e[e.None=0]="None",e[e.RenderStrategy=1]="RenderStrategy",e[e.Static=2]="Static"}(u||(u={})),function(e){e[e.Unmount=0]="Unmount",e[e.Hidden=1]="Hidden"}(i||(i={})),function(e){e.Finished="finished",e.Cancelled="cancelled"}(a||(a={}));var O,R=e.createContext(null);R.displayName="TransitionContext",function(e){e.Visible="visible",e.Hidden="hidden"}(O||(O={}));var w=e.createContext(null);function E(e){return"children"in e?E(e.children):e.current.filter((function(e){return e.state===O.Visible})).length>0}function k(n){var t=e.useRef(n),r=e.useRef([]),o=function(){var n=e.useRef(!0);return e.useEffect((function(){return function(){n.current=!1}}),[]),n}();e.useEffect((function(){t.current=n}),[n]);var u=e.useCallback((function(e,n){var u;void 0===n&&(n=i.Hidden);var a=r.current.findIndex((function(n){return n.id===e}));-1!==a&&(p(n,((u={})[i.Unmount]=function(){r.current.splice(a,1)},u[i.Hidden]=function(){r.current[a].state=O.Hidden},u)),!E(r)&&o.current&&(null==t.current||t.current()))}),[t,o,r]),a=e.useCallback((function(e){var n=r.current.find((function(n){return n.id===e}));return n?n.state!==O.Visible&&(n.state=O.Visible):r.current.push({id:e,state:O.Visible}),function(){return u(e,i.Unmount)}}),[r,u]);return e.useMemo((function(){return{children:r,register:a,unregister:u}}),[a,u,r])}function T(){}w.displayName="NestingContext";var L=["beforeEnter","afterEnter","beforeLeave","afterLeave"];function D(e){return L.reduce((function(n,t){return n[t]=e[t]||T,n}),{})}var F,M,A,P,N,U=u.RenderStrategy;function G(r){var o=r.beforeEnter,u=r.afterEnter,l=r.beforeLeave,s=r.afterLeave,f=r.enter,b=r.enterFrom,y=r.enterTo,h=r.leave,x=r.leaveFrom,g=r.leaveTo,S=t(r,["beforeEnter","afterEnter","beforeLeave","afterLeave","enter","enterFrom","enterTo","leave","leaveFrom","leaveTo"]),T=e.useRef(null),L=e.useState(O.Visible),F=L[0],M=L[1],A=S.unmount?i.Unmount:i.Hidden,P=function(){var n=e.useContext(R);if(null===n)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return n}(),N=P.show,G=P.appear,j=function(){var n=e.useContext(w);if(null===n)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return n}(),H=j.register,V=j.unregister,Q=v(),B=d(),K=e.useRef(!1),q=k((function(){K.current||(M(O.Hidden),V(B),X.current.afterLeave())}));c((function(){if(B)return H(B)}),[H,B]),c((function(){var e;A===i.Hidden&&B&&(N&&F!==O.Visible?M(O.Visible):p(F,((e={})[O.Hidden]=function(){return V(B)},e[O.Visible]=function(){return H(B)},e)))}),[F,B,H,V,N,A]);var W=C(f),Y=C(b),_=C(y),$=C(h),z=C(x),J=C(g),X=function(n){var t=e.useRef(D(n));return e.useEffect((function(){t.current=D(n)}),[n]),t}({beforeEnter:o,afterEnter:u,beforeLeave:l,afterLeave:s});e.useEffect((function(){if(F===O.Visible&&null===T.current)throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")}),[T,F]);var Z=Q&&!G;return c((function(){var e=T.current;if(e&&!Z)return K.current=!0,N&&X.current.beforeEnter(),N||X.current.beforeLeave(),N?I(e,W,Y,_,(function(e){K.current=!1,e===a.Finished&&X.current.afterEnter()})):I(e,$,z,J,(function(e){K.current=!1,e===a.Finished&&(E(q)||(M(O.Hidden),V(B),X.current.afterLeave()))}))}),[X,B,K,V,q,T,Z,N,W,Y,_,$,z,J]),e.createElement(w.Provider,{value:q},m(n({},S,{ref:T}),{},"div",U,F===O.Visible))}function j(r){var o=r.show,u=r.appear,i=void 0!==u&&u,a=r.unmount,c=t(r,["show","appear","unmount"]);if(![!0,!1].includes(o))throw new Error("A <Transition /> is used but it is missing a `show={true | false}` prop.");var l=e.useState(o?O.Visible:O.Hidden),s=l[0],f=l[1],d=k((function(){f(O.Hidden)})),p=v(),b=e.useMemo((function(){return{show:o,appear:i||!p}}),[o,i,p]);e.useEffect((function(){o?f(O.Visible):E(d)||f(O.Hidden)}),[o,d]);var y={unmount:a};return e.createElement(w.Provider,{value:d},e.createElement(R.Provider,{value:b},m(n({},y,{as:e.Fragment,children:e.createElement(G,Object.assign({},y,c))}),{},e.Fragment,U,s===O.Visible)))}function H(){var n=e.useState(x)[0];return e.useEffect((function(){return function(){return n.dispose()}}),[n]),n}function V(){for(var n=arguments.length,t=new Array(n),r=0;r<n;r++)t[r]=arguments[r];return e.useCallback((function(e){t.forEach((function(n){if(null!==n)return"function"==typeof n?n(e):void(n.current=e)}))}),[t])}function Q(e,n){var t=n.resolveItems();if(t.length<=0)return null;var r=n.resolveActiveIndex(),o=null!=r?r:-1,u=function(){switch(e.focus){case M.First:return t.findIndex((function(e){return!n.resolveDisabled(e)}));case M.Previous:var r=t.slice().reverse().findIndex((function(e,t,r){return!(-1!==o&&r.length-t-1>=o||n.resolveDisabled(e))}));return-1===r?r:t.length-1-r;case M.Next:return t.findIndex((function(e,t){return!(t<=o||n.resolveDisabled(e))}));case M.Last:var u=t.slice().reverse().findIndex((function(e){return!n.resolveDisabled(e)}));return-1===u?u:t.length-1-u;case M.Specific:return t.findIndex((function(t){return n.resolveId(t)===e.id}));case M.Nothing:return null;default:!function(e){throw new Error("Unexpected object: "+e)}(e)}}();return-1===u?r:u}function B(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}function K(e){for(var n,t,r=e.parentElement,o=null;r&&!(r instanceof HTMLFieldSetElement);)r instanceof HTMLLegendElement&&(o=r),r=r.parentElement;var u=null!=(n=""===(null==(t=r)?void 0:t.getAttribute("disabled")))&&n;return(!u||!function(e){if(!e)return!1;for(var n=e.previousElementSibling;null!==n;){if(n instanceof HTMLLegendElement)return!1;n=n.previousElementSibling}return!0}(o))&&u}j.Child=G,function(e){e.Space=" ",e.Enter="Enter",e.Escape="Escape",e.Backspace="Backspace",e.ArrowUp="ArrowUp",e.ArrowDown="ArrowDown",e.Home="Home",e.End="End",e.PageUp="PageUp",e.PageDown="PageDown",e.Tab="Tab"}(F||(F={})),function(e){e[e.First=0]="First",e[e.Previous=1]="Previous",e[e.Next=2]="Next",e[e.Last=3]="Last",e[e.Specific=4]="Specific",e[e.Nothing=5]="Nothing"}(M||(M={})),function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(P||(P={})),function(e){e[e.OpenMenu=0]="OpenMenu",e[e.CloseMenu=1]="CloseMenu",e[e.GoToItem=2]="GoToItem",e[e.Search=3]="Search",e[e.ClearSearch=4]="ClearSearch",e[e.RegisterItem=5]="RegisterItem",e[e.UnregisterItem=6]="UnregisterItem"}(N||(N={}));var q=((A={})[N.CloseMenu]=function(e){return n({},e,{activeItemIndex:null,menuState:P.Closed})},A[N.OpenMenu]=function(e){return n({},e,{menuState:P.Open})},A[N.GoToItem]=function(e,t){var r=Q(t,{resolveItems:function(){return e.items},resolveActiveIndex:function(){return e.activeItemIndex},resolveId:function(e){return e.id},resolveDisabled:function(e){return e.dataRef.current.disabled}});return""===e.searchQuery&&e.activeItemIndex===r?e:n({},e,{searchQuery:"",activeItemIndex:r})},A[N.Search]=function(e,t){var r=e.searchQuery+t.value,o=e.items.findIndex((function(e){var n;return(null==(n=e.dataRef.current.textValue)?void 0:n.startsWith(r))&&!e.dataRef.current.disabled}));return n({},e,-1===o||o===e.activeItemIndex?{searchQuery:r}:{searchQuery:r,activeItemIndex:o})},A[N.ClearSearch]=function(e){return n({},e,{searchQuery:""})},A[N.RegisterItem]=function(e,t){return n({},e,{items:[].concat(e.items,[{id:t.id,dataRef:t.dataRef}])})},A[N.UnregisterItem]=function(e,t){var r=e.items.slice(),o=null!==e.activeItemIndex?r[e.activeItemIndex]:null,u=r.findIndex((function(e){return e.id===t.id}));return-1!==u&&r.splice(u,1),n({},e,{items:r,activeItemIndex:u===e.activeItemIndex||null===o?null:r.indexOf(o)})},A),W=e.createContext(null);function Y(n){var t=e.useContext(W);if(null===t){var r=new Error("<"+n+" /> is missing a parent <"+z.name+" /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,Y),r}return t}function _(e,n){return p(n.type,q,e,n)}W.displayName="MenuContext";var $=e.Fragment;function z(n){var t=e.useReducer(_,{menuState:P.Closed,buttonRef:e.createRef(),itemsRef:e.createRef(),items:[],searchQuery:"",activeItemIndex:null}),r=t[0],o=r.menuState,u=r.itemsRef,i=r.buttonRef,a=t[1];e.useEffect((function(){function e(e){var n,t,r,c=e.target,l=document.activeElement;o===P.Open&&((null==(n=i.current)?void 0:n.contains(c))||((null==(t=u.current)?void 0:t.contains(c))||a({type:N.CloseMenu}),l!==document.body&&(null==l?void 0:l.contains(c))||e.defaultPrevented||null==(r=i.current)||r.focus({preventScroll:!0})))}return window.addEventListener("click",e),function(){return window.removeEventListener("click",e)}}),[o,u,i,a]);var c=e.useMemo((function(){return{open:o===P.Open}}),[o]);return e.createElement(W.Provider,{value:t},m(n,c,$))}var J,X,Z,ee=y((function t(r,o){var u,i=Y([z.name,t.name].join(".")),a=i[0],c=i[1],l=V(a.buttonRef,o),s="headlessui-menu-button-"+d(),f=H(),v=e.useCallback((function(e){switch(e.key){case F.Space:case F.Enter:case F.ArrowDown:e.preventDefault(),c({type:N.OpenMenu}),f.nextFrame((function(){var e;null==(e=a.itemsRef.current)||e.focus({preventScroll:!0}),c({type:N.GoToItem,focus:M.First})}));break;case F.ArrowUp:e.preventDefault(),c({type:N.OpenMenu}),f.nextFrame((function(){var e;null==(e=a.itemsRef.current)||e.focus({preventScroll:!0}),c({type:N.GoToItem,focus:M.Last})}))}}),[c,a,f]),p=e.useCallback((function(e){r.disabled||(a.menuState===P.Open?(c({type:N.CloseMenu}),f.nextFrame((function(){var e;return null==(e=a.buttonRef.current)?void 0:e.focus({preventScroll:!0})}))):(e.preventDefault(),c({type:N.OpenMenu}),f.nextFrame((function(){var e;return null==(e=a.itemsRef.current)?void 0:e.focus({preventScroll:!0})}))))}),[c,f,a,r.disabled]),b=e.useMemo((function(){return{open:a.menuState===P.Open}}),[a]);return m(n({},r,{ref:l,id:s,type:"button","aria-haspopup":!0,"aria-controls":null==(u=a.itemsRef.current)?void 0:u.id,"aria-expanded":a.menuState===P.Open||void 0,onKeyDown:v,onPointerUp:p}),b,"button")})),ne=u.RenderStrategy|u.Static,te=y((function t(r,o){var u,i,a=Y([z.name,t.name].join(".")),c=a[0],l=a[1],s=V(c.itemsRef,o),f="headlessui-menu-items-"+d(),v=H(),p=e.useCallback((function(e){switch(v.dispose(),e.key){case F.Space:if(""!==c.searchQuery)return e.preventDefault(),l({type:N.Search,value:e.key});case F.Enter:var n;e.preventDefault(),l({type:N.CloseMenu}),null!==c.activeItemIndex&&(null==(n=document.getElementById(c.items[c.activeItemIndex].id))||n.click()),x().nextFrame((function(){var e;return null==(e=c.buttonRef.current)?void 0:e.focus({preventScroll:!0})}));break;case F.ArrowDown:return e.preventDefault(),l({type:N.GoToItem,focus:M.Next});case F.ArrowUp:return e.preventDefault(),l({type:N.GoToItem,focus:M.Previous});case F.Home:case F.PageUp:return e.preventDefault(),l({type:N.GoToItem,focus:M.First});case F.End:case F.PageDown:return e.preventDefault(),l({type:N.GoToItem,focus:M.Last});case F.Escape:e.preventDefault(),l({type:N.CloseMenu}),x().nextFrame((function(){var e;return null==(e=c.buttonRef.current)?void 0:e.focus({preventScroll:!0})}));break;case F.Tab:return e.preventDefault();default:1===e.key.length&&(l({type:N.Search,value:e.key}),v.setTimeout((function(){return l({type:N.ClearSearch})}),350))}}),[l,v,c]),b=e.useMemo((function(){return{open:c.menuState===P.Open}}),[c]);return m(n({},r,{"aria-activedescendant":null===c.activeItemIndex||null==(u=c.items[c.activeItemIndex])?void 0:u.id,"aria-labelledby":null==(i=c.buttonRef.current)?void 0:i.id,id:f,onKeyDown:p,role:"menu",tabIndex:0,ref:s}),b,"div",ne,c.menuState===P.Open)})),re=e.Fragment;function oe(n,t){var r=e.useState(n),o=r[0],u=r[1],i=e.useRef(n);return c((function(){i.current=n}),[n]),c((function(){return u(i.current)}),[i,u].concat(t)),o}z.Button=ee,z.Items=te,z.Item=function r(o){var u=o.disabled,i=void 0!==u&&u,a=o.className,l=o.onClick,s=t(o,["disabled","className","onClick"]),f=Y([z.name,r.name].join(".")),v=f[0],p=f[1],b="headlessui-menu-item-"+d(),y=null!==v.activeItemIndex&&v.items[v.activeItemIndex].id===b,h=e.useRef({disabled:i});c((function(){h.current.disabled=i}),[h,i]),c((function(){var e,n;h.current.textValue=null==(e=document.getElementById(b))||null==(n=e.textContent)?void 0:n.toLowerCase()}),[h,b]),c((function(){return p({type:N.RegisterItem,id:b,dataRef:h}),function(){return p({type:N.UnregisterItem,id:b})}}),[h,b]);var g=e.useCallback((function(e){return K(e.currentTarget)||i?e.preventDefault():(p({type:N.CloseMenu}),x().nextFrame((function(){var e;return null==(e=v.buttonRef.current)?void 0:e.focus({preventScroll:!0})})),l?l(e):void 0)}),[p,v.buttonRef,i,l]),S=e.useCallback((function(){if(i)return p({type:N.GoToItem,focus:M.Nothing});p({type:N.GoToItem,focus:M.Specific,id:b})}),[i,b,p]),I=e.useCallback((function(){i||y||p({type:N.GoToItem,focus:M.Specific,id:b})}),[i,y,b,p]),C=e.useCallback((function(){i||y&&p({type:N.GoToItem,focus:M.Nothing})}),[i,y,p]),O=e.useMemo((function(){return{active:y,disabled:i}}),[y,i]);return m(n({},s,{id:b,role:"menuitem",tabIndex:-1,className:B(a,O),"aria-disabled":!0===i||void 0,onClick:g,onFocus:S,onPointerMove:I,onPointerLeave:C}),O,re)},function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(X||(X={})),function(e){e[e.OpenListbox=0]="OpenListbox",e[e.CloseListbox=1]="CloseListbox",e[e.GoToOption=2]="GoToOption",e[e.Search=3]="Search",e[e.ClearSearch=4]="ClearSearch",e[e.RegisterOption=5]="RegisterOption",e[e.UnregisterOption=6]="UnregisterOption"}(Z||(Z={}));var ue=((J={})[Z.CloseListbox]=function(e){return n({},e,{activeOptionIndex:null,listboxState:X.Closed})},J[Z.OpenListbox]=function(e){return n({},e,{listboxState:X.Open})},J[Z.GoToOption]=function(e,t){var r=Q(t,{resolveItems:function(){return e.options},resolveActiveIndex:function(){return e.activeOptionIndex},resolveId:function(e){return e.id},resolveDisabled:function(e){return e.dataRef.current.disabled}});return""===e.searchQuery&&e.activeOptionIndex===r?e:n({},e,{searchQuery:"",activeOptionIndex:r})},J[Z.Search]=function(e,t){var r=e.searchQuery+t.value,o=e.options.findIndex((function(e){var n;return!e.dataRef.current.disabled&&(null==(n=e.dataRef.current.textValue)?void 0:n.startsWith(r))}));return n({},e,-1===o||o===e.activeOptionIndex?{searchQuery:r}:{searchQuery:r,activeOptionIndex:o})},J[Z.ClearSearch]=function(e){return n({},e,{searchQuery:""})},J[Z.RegisterOption]=function(e,t){return n({},e,{options:[].concat(e.options,[{id:t.id,dataRef:t.dataRef}])})},J[Z.UnregisterOption]=function(e,t){var r=e.options.slice(),o=null!==e.activeOptionIndex?r[e.activeOptionIndex]:null,u=r.findIndex((function(e){return e.id===t.id}));return-1!==u&&r.splice(u,1),n({},e,{options:r,activeOptionIndex:u===e.activeOptionIndex||null===o?null:r.indexOf(o)})},J),ie=e.createContext(null);function ae(n){var t=e.useContext(ie);if(null===t){var r=new Error("<"+n+" /> is missing a parent <"+se.name+" /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,ae),r}return t}function ce(e,n){return p(n.type,ue,e,n)}ie.displayName="ListboxContext";var le=e.Fragment;function se(n){var r=n.value,o=n.onChange,u=t(n,["value","onChange"]),i=H(),a=e.useReducer(ce,{listboxState:X.Closed,propsRef:{current:{value:r,onChange:o}},labelRef:e.createRef(),buttonRef:e.createRef(),optionsRef:e.createRef(),options:[],searchQuery:"",activeOptionIndex:null}),l=a[0],s=l.listboxState,f=l.propsRef,d=l.optionsRef,v=l.buttonRef,p=a[1];c((function(){f.current.value=r}),[r,f]),c((function(){f.current.onChange=o}),[o,f]),e.useEffect((function(){function e(e){var n,t,r,o=e.target,u=document.activeElement;s===X.Open&&((null==(n=v.current)?void 0:n.contains(o))||((null==(t=d.current)?void 0:t.contains(o))||p({type:Z.CloseListbox}),u!==document.body&&(null==u?void 0:u.contains(o))||e.defaultPrevented||null==(r=v.current)||r.focus({preventScroll:!0})))}return window.addEventListener("click",e),function(){return window.removeEventListener("click",e)}}),[s,d,v,i,p]);var b=e.useMemo((function(){return{open:s===X.Open}}),[s]);return e.createElement(ie.Provider,{value:a},m(u,b,le))}var fe=y((function t(r,o){var u,i=ae([se.name,t.name].join(".")),a=i[0],c=i[1],l=V(a.buttonRef,o),s="headlessui-listbox-button-"+d(),f=H(),v=e.useCallback((function(e){switch(e.key){case F.Space:case F.Enter:case F.ArrowDown:e.preventDefault(),c({type:Z.OpenListbox}),f.nextFrame((function(){var e;null==(e=a.optionsRef.current)||e.focus({preventScroll:!0}),a.propsRef.current.value||c({type:Z.GoToOption,focus:M.First})}));break;case F.ArrowUp:e.preventDefault(),c({type:Z.OpenListbox}),f.nextFrame((function(){var e;null==(e=a.optionsRef.current)||e.focus({preventScroll:!0}),a.propsRef.current.value||c({type:Z.GoToOption,focus:M.Last})}))}}),[c,a,f]),p=e.useCallback((function(e){r.disabled||(a.listboxState===X.Open?(c({type:Z.CloseListbox}),f.nextFrame((function(){var e;return null==(e=a.buttonRef.current)?void 0:e.focus({preventScroll:!0})}))):(e.preventDefault(),c({type:Z.OpenListbox}),f.nextFrame((function(){var e;return null==(e=a.optionsRef.current)?void 0:e.focus({preventScroll:!0})}))))}),[c,f,a,r.disabled]),b=oe((function(){if(a.labelRef.current)return[a.labelRef.current.id,s].join(" ")}),[a.labelRef.current,s]),y=e.useMemo((function(){return{open:a.listboxState===X.Open}}),[a]);return m(n({},r,{ref:l,id:s,type:"button","aria-haspopup":!0,"aria-controls":null==(u=a.optionsRef.current)?void 0:u.id,"aria-expanded":a.listboxState===X.Open||void 0,"aria-labelledby":b,onKeyDown:v,onPointerUp:p}),y,"button")})),de=u.RenderStrategy|u.Static,ve=y((function t(r,o){var u,i=ae([se.name,t.name].join(".")),a=i[0],c=i[1],l=V(a.optionsRef,o),s="headlessui-listbox-options-"+d(),f=H(),v=H(),p=e.useCallback((function(e){switch(v.dispose(),e.key){case F.Space:if(""!==a.searchQuery)return e.preventDefault(),c({type:Z.Search,value:e.key});case F.Enter:e.preventDefault(),c({type:Z.CloseListbox}),null!==a.activeOptionIndex&&a.propsRef.current.onChange(a.options[a.activeOptionIndex].dataRef.current.value),x().nextFrame((function(){var e;return null==(e=a.buttonRef.current)?void 0:e.focus({preventScroll:!0})}));break;case F.ArrowDown:return e.preventDefault(),c({type:Z.GoToOption,focus:M.Next});case F.ArrowUp:return e.preventDefault(),c({type:Z.GoToOption,focus:M.Previous});case F.Home:case F.PageUp:return e.preventDefault(),c({type:Z.GoToOption,focus:M.First});case F.End:case F.PageDown:return e.preventDefault(),c({type:Z.GoToOption,focus:M.Last});case F.Escape:return e.preventDefault(),c({type:Z.CloseListbox}),f.nextFrame((function(){var e;return null==(e=a.buttonRef.current)?void 0:e.focus({preventScroll:!0})}));case F.Tab:return e.preventDefault();default:1===e.key.length&&(c({type:Z.Search,value:e.key}),v.setTimeout((function(){return c({type:Z.ClearSearch})}),350))}}),[f,c,v,a]),b=oe((function(){var e,n,t;return null!=(e=null==(n=a.labelRef.current)?void 0:n.id)?e:null==(t=a.buttonRef.current)?void 0:t.id}),[a.labelRef.current,a.buttonRef.current]),y=e.useMemo((function(){return{open:a.listboxState===X.Open}}),[a]);return m(n({},r,{"aria-activedescendant":null===a.activeOptionIndex||null==(u=a.options[a.activeOptionIndex])?void 0:u.id,"aria-labelledby":b,id:s,onKeyDown:p,role:"listbox",tabIndex:0,ref:l}),y,"ul",de,a.listboxState===X.Open)}));se.Button=fe,se.Label=function t(r){var o=ae([se.name,t.name].join("."))[0],u="headlessui-listbox-label-"+d(),i=e.useCallback((function(){var e;return null==(e=o.buttonRef.current)?void 0:e.focus({preventScroll:!0})}),[o.buttonRef]),a=e.useMemo((function(){return{open:o.listboxState===X.Open}}),[o]);return m(n({},r,{ref:o.labelRef,id:u,onPointerUp:i}),a,"label")},se.Options=ve,se.Option=function r(o){var u=o.disabled,i=void 0!==u&&u,a=o.value,l=o.className,s=t(o,["disabled","value","className"]),f=ae([se.name,r.name].join(".")),v=f[0],p=f[1],b="headlessui-listbox-option-"+d(),y=null!==v.activeOptionIndex&&v.options[v.activeOptionIndex].id===b,h=v.propsRef.current.value===a,g=e.useRef({disabled:i,value:a});c((function(){g.current.disabled=i}),[g,i]),c((function(){g.current.value=a}),[g,a]),c((function(){var e,n;g.current.textValue=null==(e=document.getElementById(b))||null==(n=e.textContent)?void 0:n.toLowerCase()}),[g,b]);var S=e.useCallback((function(){return v.propsRef.current.onChange(a)}),[v.propsRef,a]);c((function(){return p({type:Z.RegisterOption,id:b,dataRef:g}),function(){return p({type:Z.UnregisterOption,id:b})}}),[g,b]),c((function(){var e;v.listboxState===X.Open&&h&&(p({type:Z.GoToOption,focus:M.Specific,id:b}),null==(e=document.getElementById(b))||null==e.focus||e.focus())}),[v.listboxState]),c((function(){if(v.listboxState===X.Open&&y){var e=x();return e.nextFrame((function(){var e;return null==(e=document.getElementById(b))||null==e.scrollIntoView?void 0:e.scrollIntoView({block:"nearest"})})),e.dispose}}),[y,v.listboxState]);var I=e.useCallback((function(e){if(i)return e.preventDefault();S(),p({type:Z.CloseListbox}),x().nextFrame((function(){var e;return null==(e=v.buttonRef.current)?void 0:e.focus({preventScroll:!0})}))}),[p,v.buttonRef,i,S]),C=e.useCallback((function(){if(i)return p({type:Z.GoToOption,focus:M.Nothing});p({type:Z.GoToOption,focus:M.Specific,id:b})}),[i,b,p]),O=e.useCallback((function(){i||y||p({type:Z.GoToOption,focus:M.Specific,id:b})}),[i,y,b,p]),R=e.useCallback((function(){i||y&&p({type:Z.GoToOption,focus:M.Nothing})}),[i,y,p]),w=e.useMemo((function(){return{active:y,selected:h,disabled:i}}),[y,h,i]);return m(n({},s,{id:b,role:"option",tabIndex:-1,className:B(l,w),"aria-disabled":!0===i||void 0,"aria-selected":!0===h||void 0,onClick:I,onFocus:C,onPointerMove:O,onPointerLeave:R}),w,"li")};var pe=e.createContext(null);function me(n){var t=e.useContext(pe);if(null===t){var r=new Error("<"+n+" /> is missing a parent <Switch.Group /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,me),r}return t}pe.displayName="GroupContext";var be=e.Fragment;function ye(r){var o,u=r.checked,i=r.onChange,a=r.className,c=t(r,["checked","onChange","className"]),l="headlessui-switch-"+d(),s=e.useContext(pe),f=e.useCallback((function(){return i(!u)}),[i,u]),v=e.useCallback((function(e){if(K(e.currentTarget))return e.preventDefault();e.preventDefault(),f()}),[f]),p=e.useCallback((function(e){e.key!==F.Tab&&e.preventDefault(),e.key===F.Space&&f()}),[f]),b=e.useCallback((function(e){return e.preventDefault()}),[]),y=e.useMemo((function(){return{checked:u}}),[u]),h={id:l,ref:null===s?void 0:s.setSwitch,role:"switch",tabIndex:0,className:B(a,y),"aria-checked":u,"aria-labelledby":null==s||null==(o=s.label)?void 0:o.id,onClick:v,onKeyUp:p,onKeyPress:b};return"button"===c.as&&Object.assign(h,{type:"button"}),m(n({},c,h),y,"button")}ye.Group=function(n){var t=e.useState(null),r=t[0],o=t[1],u=e.useState(null),i=u[0],a=u[1],c=e.useMemo((function(){return{switch:r,label:i,setSwitch:o,setLabel:a}}),[r,o,i,a]);return e.createElement(pe.Provider,{value:c},m(n,{},be))},ye.Label=function t(r){var o=me([ye.name,t.name].join(".")),u="headlessui-switch-label-"+d(),i=e.useCallback((function(){o.switch&&(o.switch.click(),o.switch.focus({preventScroll:!0}))}),[o.switch]);return m(n({},r,{ref:o.setLabel,id:u,onPointerUp:i}),{},"label")},exports.Listbox=se,exports.Menu=z,exports.Switch=ye,exports.Transition=j;
//# sourceMappingURL=headlessui.cjs.production.min.js.map

2

dist/headlessui.umd.production.min.js

@@ -1,2 +0,2 @@

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],n):n((e=e||self).headlessui={},e.React)}(this,(function(e,n){"use strict";function t(){return(t=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function r(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n.indexOf(t=i[r])>=0||(o[t]=e[t]);return o}function o(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var i,u="undefined"!=typeof window?n.useLayoutEffect:n.useEffect,a={serverHandoffComplete:!1},c=0;function l(){return++c}function s(){var e=n.useState(a.serverHandoffComplete?l:null),t=e[0],r=e[1];return u((function(){null===t&&r(l())}),[]),n.useEffect((function(){!1===a.serverHandoffComplete&&(a.serverHandoffComplete=!0)}),[]),null!=t?""+t:void 0}function f(){var e=n.useRef(!0);return n.useEffect((function(){e.current=!1}),[]),e.current}function d(e,n){if(e in n){for(var t=n[e],r=arguments.length,o=new Array(r>2?r-2:0),i=2;i<r;i++)o[i-2]=arguments[i];return"function"==typeof t?t.apply(void 0,o):t}var u=new Error('Tried to handle "'+e+'" but there is no handler defined. Only defined handlers are: '+Object.keys(n).map((function(e){return'"'+e+'"'})).join(", ")+".");throw Error.captureStackTrace&&Error.captureStackTrace(u,d),u}function v(){var e=[],n={requestAnimationFrame:function(e){function n(){return e.apply(this,arguments)}return n.toString=function(){return e.toString()},n}((function(){var e=requestAnimationFrame.apply(void 0,arguments);n.add((function(){return cancelAnimationFrame(e)}))})),nextFrame:function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];n.requestAnimationFrame((function(){n.requestAnimationFrame.apply(n,t)}))},setTimeout:function(e){function n(){return e.apply(this,arguments)}return n.toString=function(){return e.toString()},n}((function(){var e=setTimeout.apply(void 0,arguments);n.add((function(){return clearTimeout(e)}))})),add:function(n){e.push(n)},dispose:function(){e.splice(0).forEach((function(e){return e()}))}};return n}function p(e){for(var n,t=arguments.length,r=new Array(t>1?t-1:0),o=1;o<t;o++)r[o-1]=arguments[o];e&&r.length>0&&(n=e.classList).add.apply(n,r)}function m(e){for(var n,t=arguments.length,r=new Array(t>1?t-1:0),o=1;o<t;o++)r[o-1]=arguments[o];e&&r.length>0&&(n=e.classList).remove.apply(n,r)}function b(e,n,t,r,o){var u=v(),a=void 0!==o?function(e){var n={called:!1};return function(){if(!n.called)return n.called=!0,e.apply(void 0,arguments)}}(o):function(){};return p.apply(void 0,[e].concat(n,t)),u.nextFrame((function(){m.apply(void 0,[e].concat(t)),p.apply(void 0,[e].concat(r)),u.add(function(e,n){var t=v();if(!e)return t.dispose;var r=getComputedStyle(e),o=[r.transitionDuration,r.transitionDelay].map((function(e){var n=e.split(",").filter(Boolean).map((function(e){return e.includes("ms")?parseFloat(e):1e3*parseFloat(e)})).sort((function(e,n){return n-e}))[0];return void 0===n?0:n})),u=o[0];return 0!==u?t.setTimeout((function(){n(i.Finished)}),u+o[1]):n(i.Finished),t.add((function(){return n(i.Cancelled)})),t.dispose}(e,(function(t){return m.apply(void 0,[e].concat(r,n)),a(t)})))})),u.add((function(){return m.apply(void 0,[e].concat(n,t,r))})),u.add((function(){return a(i.Cancelled)})),u.dispose}function h(e){return void 0===e&&(e=""),n.useMemo((function(){return e.split(" ").filter((function(e){return e.trim().length>1}))}),[e])}!function(e){e.Finished="finished",e.Cancelled="cancelled"}(i||(i={}));var y,x=n.createContext(null);!function(e){e.Visible="visible",e.Hidden="hidden"}(y||(y={}));var I,g,C,O,R,S=n.createContext(null);function w(e){var t=n.useRef([]),r=function(){var e=n.useRef(!0);return n.useEffect((function(){return function(){e.current=!1}}),[]),e}(),o=n.useCallback((function(n){var o=t.current.indexOf(n);-1!==o&&(t.current.splice(o,1),t.current.length<=0&&r.current&&(null==e||e()))}),[e,r,t]),i=n.useCallback((function(e){return t.current.push(e),function(){return o(e)}}),[t,o]);return n.useMemo((function(){return{children:t,register:i,unregister:o}}),[i,o,t])}function k(e){var t=e.children,o=e.enter,a=e.enterFrom,c=e.enterTo,l=e.leave,d=e.leaveFrom,v=e.leaveTo,p=r(e,["children","enter","enterFrom","enterTo","leave","leaveFrom","leaveTo"]),m=n.useRef(null),I=n.useState(y.Visible),g=I[0],C=I[1],O=function(){var e=n.useContext(x);if(null===e)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return e}(),R=O.show,k=O.appear,E=function(){var e=n.useContext(S);if(null===e)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return e}(),T=E.register,F=E.unregister,D=f(),L=s(),P=n.useRef(!1),M=w(n.useCallback((function(){P.current||(C(y.Hidden),F(L))}),[L,F,P]));u((function(){return T(L)}),[T,L]);var A=h(o),G=h(a),N=h(c),j=h(l),U=h(d),H=h(v);if(n.useEffect((function(){if(g===y.Visible&&null===m.current)throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")}),[m,g]),u((function(){var e=m.current;if(e&&(!D||k))return P.current=!0,R?b(e,A,G,N,(function(){P.current=!1})):b(e,j,U,H,(function(e){P.current=!1,e===i.Finished&&M.children.current.length<=0&&(C(y.Hidden),F(L))}))}),[L,P,F,M,m,D,k,R,A,G,N,j,U,H]),g===y.Hidden)return null;if("function"==typeof t)return n.createElement(S.Provider,{value:M},t(m));var Q=p.as,B=void 0===Q?"div":Q,V=r(p,["as"]);return n.createElement(S.Provider,{value:M},n.createElement(B,Object.assign({},V,{ref:m}),t))}function E(e){var t,o=e.show,i=e.appear,u=void 0!==i&&i,a=r(e,["show","appear"]);if(![!0,!1].includes(o))throw new Error("A <Transition /> is used but it is missing a `show={true | false}` prop.");var c=n.useState(o?y.Visible:y.Hidden),l=c[0],s=c[1],v=w(n.useCallback((function(){s(y.Hidden)}),[])),p=f(),m=n.useMemo((function(){return{show:o,appear:u||!p}}),[o,u,p]);return n.useEffect((function(){o?s(y.Visible):v.children.current.length<=0&&s(y.Hidden)}),[o,v]),n.createElement(S.Provider,{value:v},n.createElement(x.Provider,{value:m},d(l,((t={})[y.Visible]=function(){return n.createElement(k,Object.assign({},a))},t[y.Hidden]=null,t))))}function T(e,t,i){var u=e.as,a=void 0===u?i:u,c=e.children,l=r(e,["as","children"]),s="function"==typeof c?c(t):c;if(a===n.Fragment&&Object.keys(l).length>0){if(Array.isArray(s)&&s.length>1){var f=new Error("You should only render 1 child");throw Error.captureStackTrace&&Error.captureStackTrace(f,T),f}if(!n.isValidElement(s)){var d=new Error('You should render an element as a child. Did you forget the as="..." prop?');throw Error.captureStackTrace&&Error.captureStackTrace(d,T),d}return n.cloneElement(s,function(e,n,t){for(var r,i=Object.assign({},e),u=function(){var t,o=r.value;void 0!==e[o]&&void 0!==n[o]&&Object.assign(i,((t={})[o]=function(t){t.defaultPrevented||e[o](t),t.defaultPrevented||n[o](t)},t))},a=function(e,n){var t;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(t=function(e,n){if(e){if("string"==typeof e)return o(e,void 0);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?o(e,void 0):void 0}}(e))){t&&(e=t);var r=0;return function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(t=e[Symbol.iterator]()).next.bind(t)}(["onClick"]);!(r=a()).done;)u();return i}(function(e){var n=Object.assign({},e);for(var t in n)void 0===n[t]&&delete n[t];return n}(l),s.props))}return n.createElement(a,l,s)}function F(e){return n.forwardRef(e)}function D(){var e=n.useState(v)[0];return n.useEffect((function(){return function(){return e.dispose()}}),[e]),e}function L(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return n.useCallback((function(e){t.forEach((function(n){if(null!==n)return"function"==typeof n?n(e):void(n.current=e)}))}),[t])}E.Child=k,function(e){e.Space=" ",e.Enter="Enter",e.Escape="Escape",e.Backspace="Backspace",e.ArrowUp="ArrowUp",e.ArrowDown="ArrowDown",e.Home="Home",e.End="End",e.PageUp="PageUp",e.PageDown="PageDown",e.Tab="Tab"}(I||(I={})),function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(C||(C={})),function(e){e[e.OpenMenu=0]="OpenMenu",e[e.CloseMenu=1]="CloseMenu",e[e.GoToItem=2]="GoToItem",e[e.Search=3]="Search",e[e.ClearSearch=4]="ClearSearch",e[e.RegisterItem=5]="RegisterItem",e[e.UnregisterItem=6]="UnregisterItem"}(O||(O={})),function(e){e[e.FirstItem=0]="FirstItem",e[e.PreviousItem=1]="PreviousItem",e[e.NextItem=2]="NextItem",e[e.LastItem=3]="LastItem",e[e.SpecificItem=4]="SpecificItem",e[e.Nothing=5]="Nothing"}(R||(R={}));var P=((g={})[O.CloseMenu]=function(e){return t({},e,{menuState:C.Closed})},g[O.OpenMenu]=function(e){return t({},e,{menuState:C.Open})},g[O.GoToItem]=function(e,n){var r=function(e,n,t){var r,o;if(e.items.length<=0)return null;var i=e.items,u=null!==(r=e.activeItemIndex)&&void 0!==r?r:-1,a=d(n,((o={})[R.FirstItem]=function(){return i.findIndex((function(e){return!e.dataRef.current.disabled}))},o[R.PreviousItem]=function(){var e=i.slice().reverse().findIndex((function(e,n,t){return!(-1!==u&&t.length-n-1>=u||e.dataRef.current.disabled)}));return-1===e?e:i.length-1-e},o[R.NextItem]=function(){return i.findIndex((function(e,n){return!(n<=u||e.dataRef.current.disabled)}))},o[R.LastItem]=function(){var e=i.slice().reverse().findIndex((function(e){return!e.dataRef.current.disabled}));return-1===e?e:i.length-1-e},o[R.SpecificItem]=function(){return i.findIndex((function(e){return e.id===t}))},o[R.Nothing]=function(){return null},o));return-1===a?e.activeItemIndex:a}(e,n.focus,n.id);return""===e.searchQuery&&e.activeItemIndex===r?e:t({},e,{searchQuery:"",activeItemIndex:r})},g[O.Search]=function(e,n){var r=e.searchQuery+n.value,o=e.items.findIndex((function(e){var n;return(null===(n=e.dataRef.current.textValue)||void 0===n?void 0:n.startsWith(r))&&!e.dataRef.current.disabled}));return t({},e,-1===o||o===e.activeItemIndex?{searchQuery:r}:{searchQuery:r,activeItemIndex:o})},g[O.ClearSearch]=function(e){return t({},e,{searchQuery:""})},g[O.RegisterItem]=function(e,n){return t({},e,{items:[].concat(e.items,[{id:n.id,dataRef:n.dataRef}])})},g[O.UnregisterItem]=function(e,n){var r=e.items.slice(),o=null!==e.activeItemIndex?r[e.activeItemIndex]:null,i=r.findIndex((function(e){return e.id===n.id}));return-1!==i&&r.splice(i,1),t({},e,{items:r,activeItemIndex:i===e.activeItemIndex||null===o?null:r.indexOf(o)})},g),M=n.createContext(null);function A(e){var t=n.useContext(M);if(null===t){var r=new Error("<"+e+" /> is missing a parent <"+j.name+" /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,A),r}return t}function G(e,n){return d(n.type,P,e,n)}var N=n.Fragment;function j(e){var t=D(),r=n.useReducer(G,{menuState:C.Closed,buttonRef:n.createRef(),itemsRef:n.createRef(),items:[],searchQuery:"",activeItemIndex:null}),o=r[0],i=o.menuState,u=o.itemsRef,a=o.buttonRef,c=r[1];n.useEffect((function(){function e(e){var n,t,r;i===C.Open&&((null===(n=a.current)||void 0===n?void 0:n.contains(e.target))||(null===(t=u.current)||void 0===t?void 0:t.contains(e.target))||(c({type:O.CloseMenu}),e.defaultPrevented||null===(r=a.current)||void 0===r||r.focus()))}return window.addEventListener("click",e),function(){return window.removeEventListener("click",e)}}),[i,u,a,t,c]);var l=n.useMemo((function(){return{open:i===C.Open}}),[i]);return n.createElement(M.Provider,{value:r},T(e,l,N))}var U,H,Q,B,V=F((function e(r,o){var i,u=A([j.name,e.name].join(".")),a=u[0],c=u[1],l=L(a.buttonRef,o),f=n.useState(!1),d=f[0],v=f[1],p="headlessui-menu-button-"+s(),m=D(),b=n.useCallback((function(e){switch(e.key){case I.Space:case I.Enter:case I.ArrowDown:e.preventDefault(),c({type:O.OpenMenu}),m.nextFrame((function(){var e;null===(e=a.itemsRef.current)||void 0===e||e.focus(),c({type:O.GoToItem,focus:R.FirstItem})}));break;case I.ArrowUp:e.preventDefault(),c({type:O.OpenMenu}),m.nextFrame((function(){var e;null===(e=a.itemsRef.current)||void 0===e||e.focus(),c({type:O.GoToItem,focus:R.LastItem})}))}}),[c,a,m]),h=n.useCallback((function(e){a.menuState===C.Open?c({type:O.CloseMenu}):(e.preventDefault(),c({type:O.OpenMenu}),m.nextFrame((function(){var e;return null===(e=a.itemsRef.current)||void 0===e?void 0:e.focus()})))}),[c,m,a]),y=n.useCallback((function(){var e;a.menuState===C.Open&&(null===(e=a.itemsRef.current)||void 0===e||e.focus()),v(!0)}),[a,v]),x=n.useCallback((function(){return v(!1)}),[v]),g=n.useMemo((function(){return{open:a.menuState===C.Open,focused:d}}),[a,d]);return T(t({},r,{ref:l,id:p,type:"button","aria-haspopup":!0,"aria-controls":null===(i=a.itemsRef.current)||void 0===i?void 0:i.id,"aria-expanded":a.menuState===C.Open||void 0,onKeyDown:b,onFocus:y,onBlur:x,onPointerUp:h}),g,"button")})),q=F((function e(o,i){var u,a,c=o.static,l=void 0!==c&&c,f=r(o,["static"]),d=A([j.name,e.name].join(".")),v=d[0],p=d[1],m=L(v.itemsRef,i),b="headlessui-menu-items-"+s(),h=D(),y=D(),x=n.useCallback((function(e){switch(y.dispose(),e.key){case I.Space:if(""!==v.searchQuery)return e.preventDefault(),p({type:O.Search,value:e.key});case I.Enter:var n;e.preventDefault(),p({type:O.CloseMenu}),null!==v.activeItemIndex&&(null===(n=document.getElementById(v.items[v.activeItemIndex].id))||void 0===n||n.click(),h.nextFrame((function(){var e;return null===(e=v.buttonRef.current)||void 0===e?void 0:e.focus()})));break;case I.ArrowDown:return e.preventDefault(),p({type:O.GoToItem,focus:R.NextItem});case I.ArrowUp:return e.preventDefault(),p({type:O.GoToItem,focus:R.PreviousItem});case I.Home:case I.PageUp:return e.preventDefault(),p({type:O.GoToItem,focus:R.FirstItem});case I.End:case I.PageDown:return e.preventDefault(),p({type:O.GoToItem,focus:R.LastItem});case I.Escape:e.preventDefault(),p({type:O.CloseMenu}),h.nextFrame((function(){var e;return null===(e=v.buttonRef.current)||void 0===e?void 0:e.focus()}));break;case I.Tab:return e.preventDefault();default:1===e.key.length&&(p({type:O.Search,value:e.key}),y.setTimeout((function(){return p({type:O.ClearSearch})}),350))}}),[h,p,y,v]),g=n.useMemo((function(){return{open:v.menuState===C.Open}}),[v]),S={"aria-activedescendant":null===v.activeItemIndex||null===(u=v.items[v.activeItemIndex])||void 0===u?void 0:u.id,"aria-labelledby":null===(a=v.buttonRef.current)||void 0===a?void 0:a.id,id:b,onKeyDown:x,role:"menu",tabIndex:0};return l||v.menuState!==C.Closed?T(t({},f,S,{ref:m}),g,"div"):null})),K=n.Fragment;function W(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}function Y(e,t){var r=n.useState(e),o=r[0],i=r[1],a=n.useRef(e);return u((function(){a.current=e}),[e]),u((function(){return i(a.current)}),[a,i].concat(t)),o}j.Button=V,j.Items=q,j.Item=function e(o){var i=o.disabled,a=void 0!==i&&i,c=o.className,l=o.onClick,f=r(o,["disabled","className","onClick"]),d=A([j.name,e.name].join(".")),v=d[0],p=d[1],m=D(),b="headlessui-menu-item-"+s(),h=null!==v.activeItemIndex&&v.items[v.activeItemIndex].id===b,y=n.useRef({disabled:a});u((function(){y.current.disabled=a}),[y,a]),u((function(){var e,n;y.current.textValue=null===(e=document.getElementById(b))||void 0===e||null===(n=e.textContent)||void 0===n?void 0:n.toLowerCase()}),[y,b]),u((function(){return p({type:O.RegisterItem,id:b,dataRef:y}),function(){return p({type:O.UnregisterItem,id:b})}}),[y,b]);var x=n.useCallback((function(e){return a?e.preventDefault():(p({type:O.CloseMenu}),m.nextFrame((function(){var e;return null===(e=v.buttonRef.current)||void 0===e?void 0:e.focus()})),l?l(e):void 0)}),[m,p,v.buttonRef,a,l]),I=n.useCallback((function(){if(a)return p({type:O.GoToItem,focus:R.Nothing});p({type:O.GoToItem,focus:R.SpecificItem,id:b})}),[a,b,p]),g=n.useCallback((function(){a||h||p({type:O.GoToItem,focus:R.SpecificItem,id:b})}),[a,h,b,p]),C=n.useCallback((function(){a||h&&p({type:O.GoToItem,focus:R.Nothing})}),[a,h,p]),S=n.useMemo((function(){return{active:h,disabled:a}}),[h,a]);return T(t({},f,{id:b,role:"menuitem",tabIndex:-1,className:W(c,S),"aria-disabled":!0===a||void 0,onClick:x,onFocus:I,onPointerMove:g,onPointerLeave:C}),S,K)},function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(H||(H={})),function(e){e[e.OpenListbox=0]="OpenListbox",e[e.CloseListbox=1]="CloseListbox",e[e.GoToOption=2]="GoToOption",e[e.Search=3]="Search",e[e.ClearSearch=4]="ClearSearch",e[e.RegisterOption=5]="RegisterOption",e[e.UnregisterOption=6]="UnregisterOption"}(Q||(Q={})),function(e){e[e.First=0]="First",e[e.Previous=1]="Previous",e[e.Next=2]="Next",e[e.Last=3]="Last",e[e.Specific=4]="Specific",e[e.Nothing=5]="Nothing"}(B||(B={}));var _=((U={})[Q.CloseListbox]=function(e){return t({},e,{listboxState:H.Closed})},U[Q.OpenListbox]=function(e){return t({},e,{listboxState:H.Open})},U[Q.GoToOption]=function(e,n){var r=function(e,n,t){var r,o;if(e.options.length<=0)return null;var i=e.options,u=null!==(r=e.activeOptionIndex)&&void 0!==r?r:-1,a=d(n,((o={})[B.First]=function(){return i.findIndex((function(e){return!e.dataRef.current.disabled}))},o[B.Previous]=function(){var e=i.slice().reverse().findIndex((function(e,n,t){return!(-1!==u&&t.length-n-1>=u||e.dataRef.current.disabled)}));return-1===e?e:i.length-1-e},o[B.Next]=function(){return i.findIndex((function(e,n){return!(n<=u||e.dataRef.current.disabled)}))},o[B.Last]=function(){var e=i.slice().reverse().findIndex((function(e){return!e.dataRef.current.disabled}));return-1===e?e:i.length-1-e},o[B.Specific]=function(){return i.findIndex((function(e){return e.id===t}))},o[B.Nothing]=function(){return null},o));return-1===a?e.activeOptionIndex:a}(e,n.focus,n.id);return""===e.searchQuery&&e.activeOptionIndex===r?e:t({},e,{searchQuery:"",activeOptionIndex:r})},U[Q.Search]=function(e,n){var r=e.searchQuery+n.value,o=e.options.findIndex((function(e){var n;return!e.dataRef.current.disabled&&(null===(n=e.dataRef.current.textValue)||void 0===n?void 0:n.startsWith(r))}));return t({},e,-1===o||o===e.activeOptionIndex?{searchQuery:r}:{searchQuery:r,activeOptionIndex:o})},U[Q.ClearSearch]=function(e){return t({},e,{searchQuery:""})},U[Q.RegisterOption]=function(e,n){return t({},e,{options:[].concat(e.options,[{id:n.id,dataRef:n.dataRef}])})},U[Q.UnregisterOption]=function(e,n){var r=e.options.slice(),o=null!==e.activeOptionIndex?r[e.activeOptionIndex]:null,i=r.findIndex((function(e){return e.id===n.id}));return-1!==i&&r.splice(i,1),t({},e,{options:r,activeOptionIndex:i===e.activeOptionIndex||null===o?null:r.indexOf(o)})},U),$=n.createContext(null);function z(e,n){return d(n.type,_,e,n)}function J(e){var t=n.useContext($);if(null===t){var r=new Error("<"+e+" /> is missing a parent <"+Z.name+" /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,J),r}return t}var X=n.Fragment;function Z(e){var t=e.value,o=e.onChange,i=r(e,["value","onChange"]),a=D(),c=n.useReducer(z,{listboxState:H.Closed,propsRef:{current:{value:t,onChange:o}},labelRef:n.createRef(),buttonRef:n.createRef(),optionsRef:n.createRef(),options:[],searchQuery:"",activeOptionIndex:null}),l=c[0],s=l.listboxState,f=l.propsRef,d=l.optionsRef,v=l.buttonRef,p=c[1];u((function(){f.current.value=t}),[t,f]),u((function(){f.current.onChange=o}),[o,f]),n.useEffect((function(){function e(e){var n,t,r;s===H.Open&&((null===(n=v.current)||void 0===n?void 0:n.contains(e.target))||(null===(t=d.current)||void 0===t?void 0:t.contains(e.target))||(p({type:Q.CloseListbox}),e.defaultPrevented||null===(r=v.current)||void 0===r||r.focus()))}return window.addEventListener("click",e),function(){return window.removeEventListener("click",e)}}),[s,d,v,a,p]);var m=n.useMemo((function(){return{open:s===H.Open}}),[s]);return n.createElement($.Provider,{value:c},T(i,m,X))}var ee=F((function e(r,o){var i,u=J([Z.name,e.name].join(".")),a=u[0],c=u[1],l=L(a.buttonRef,o),f=n.useState(!1),d=f[0],v=f[1],p="headlessui-listbox-button-"+s(),m=D(),b=n.useCallback((function(e){switch(e.key){case I.Space:case I.Enter:case I.ArrowDown:e.preventDefault(),c({type:Q.OpenListbox}),m.nextFrame((function(){var e;null===(e=a.optionsRef.current)||void 0===e||e.focus(),a.propsRef.current.value||c({type:Q.GoToOption,focus:B.First})}));break;case I.ArrowUp:e.preventDefault(),c({type:Q.OpenListbox}),m.nextFrame((function(){var e;null===(e=a.optionsRef.current)||void 0===e||e.focus(),a.propsRef.current.value||c({type:Q.GoToOption,focus:B.Last})}))}}),[c,a,m]),h=n.useCallback((function(e){a.listboxState===H.Open?c({type:Q.CloseListbox}):(e.preventDefault(),c({type:Q.OpenListbox}),m.nextFrame((function(){var e;return null===(e=a.optionsRef.current)||void 0===e?void 0:e.focus()})))}),[c,m,a]),y=n.useCallback((function(){var e;if(a.listboxState===H.Open)return null===(e=a.optionsRef.current)||void 0===e?void 0:e.focus();v(!0)}),[a,v]),x=n.useCallback((function(){return v(!1)}),[v]),g=Y((function(){if(a.labelRef.current)return[a.labelRef.current.id,p].join(" ")}),[a.labelRef.current,p]),C=n.useMemo((function(){return{open:a.listboxState===H.Open,focused:d}}),[a,d]);return T(t({},r,{ref:l,id:p,type:"button","aria-haspopup":!0,"aria-controls":null===(i=a.optionsRef.current)||void 0===i?void 0:i.id,"aria-expanded":a.listboxState===H.Open||void 0,"aria-labelledby":g,onKeyDown:b,onFocus:y,onBlur:x,onPointerUp:h}),C,"button")})),ne=F((function e(o,i){var u,a=o.static,c=void 0!==a&&a,l=r(o,["enter","enterFrom","enterTo","leave","leaveFrom","leaveTo","static"]),f=J([Z.name,e.name].join(".")),d=f[0],v=f[1],p=L(d.optionsRef,i),m="headlessui-listbox-options-"+s(),b=D(),h=D(),y=n.useCallback((function(e){switch(h.dispose(),e.key){case I.Space:if(""!==d.searchQuery)return e.preventDefault(),v({type:Q.Search,value:e.key});case I.Enter:e.preventDefault(),v({type:Q.CloseListbox}),null!==d.activeOptionIndex&&d.propsRef.current.onChange(d.options[d.activeOptionIndex].dataRef.current.value),b.nextFrame((function(){var e;return null===(e=d.buttonRef.current)||void 0===e?void 0:e.focus()}));break;case I.ArrowDown:return e.preventDefault(),v({type:Q.GoToOption,focus:B.Next});case I.ArrowUp:return e.preventDefault(),v({type:Q.GoToOption,focus:B.Previous});case I.Home:case I.PageUp:return e.preventDefault(),v({type:Q.GoToOption,focus:B.First});case I.End:case I.PageDown:return e.preventDefault(),v({type:Q.GoToOption,focus:B.Last});case I.Escape:return e.preventDefault(),v({type:Q.CloseListbox}),b.nextFrame((function(){var e;return null===(e=d.buttonRef.current)||void 0===e?void 0:e.focus()}));case I.Tab:return e.preventDefault();default:1===e.key.length&&(v({type:Q.Search,value:e.key}),h.setTimeout((function(){return v({type:Q.ClearSearch})}),350))}}),[b,v,h,d]),x=Y((function(){var e,n,t;return null!==(e=null===(n=d.labelRef.current)||void 0===n?void 0:n.id)&&void 0!==e?e:null===(t=d.buttonRef.current)||void 0===t?void 0:t.id}),[d.labelRef.current,d.buttonRef.current]),g=n.useMemo((function(){return{open:d.listboxState===H.Open}}),[d]),C={"aria-activedescendant":null===d.activeOptionIndex||null===(u=d.options[d.activeOptionIndex])||void 0===u?void 0:u.id,"aria-labelledby":x,id:m,onKeyDown:y,role:"listbox",tabIndex:0};return c||d.listboxState!==H.Closed?T(t({},l,C,{ref:p}),g,"ul"):null}));function te(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}Z.Button=ee,Z.Label=function e(r){var o=J([Z.name,e.name].join("."))[0],i="headlessui-listbox-label-"+s(),u=n.useCallback((function(){var e;return null===(e=o.buttonRef.current)||void 0===e?void 0:e.focus()}),[o.buttonRef]),a=n.useMemo((function(){return{open:o.listboxState===H.Open}}),[o]);return T(t({},r,{ref:o.labelRef,id:i,onPointerUp:u}),a,"label")},Z.Options=ne,Z.Option=function e(o){var i=o.disabled,a=void 0!==i&&i,c=o.value,l=o.className,f=r(o,["disabled","value","className"]),d=J([Z.name,e.name].join(".")),p=d[0],m=d[1],b=D(),h="headlessui-listbox-option-"+s(),y=null!==p.activeOptionIndex&&p.options[p.activeOptionIndex].id===h,x=p.propsRef.current.value===c,I=n.useRef({disabled:a,value:c});u((function(){I.current.disabled=a}),[I,a]),u((function(){I.current.value=c}),[I,c]),u((function(){var e,n;I.current.textValue=null===(e=document.getElementById(h))||void 0===e||null===(n=e.textContent)||void 0===n?void 0:n.toLowerCase()}),[I,h]);var g=n.useCallback((function(){return p.propsRef.current.onChange(c)}),[p.propsRef,c]);u((function(){return m({type:Q.RegisterOption,id:h,dataRef:I}),function(){return m({type:Q.UnregisterOption,id:h})}}),[I,h]),u((function(){var e,n;x&&(m({type:Q.GoToOption,focus:B.Specific,id:h}),null===(e=document.getElementById(h))||void 0===e||null===(n=e.focus)||void 0===n||n.call(e))}),[]),u((function(){if(y){var e=v();return e.nextFrame((function(){var e,n;return null===(e=document.getElementById(h))||void 0===e||null===(n=e.scrollIntoView)||void 0===n?void 0:n.call(e,{block:"nearest"})})),e.dispose}}),[y]);var C=n.useCallback((function(e){if(a)return e.preventDefault();g(),m({type:Q.CloseListbox}),b.nextFrame((function(){var e;return null===(e=p.buttonRef.current)||void 0===e?void 0:e.focus()}))}),[b,m,p.buttonRef,a,g]),O=n.useCallback((function(){if(a)return m({type:Q.GoToOption,focus:B.Nothing});m({type:Q.GoToOption,focus:B.Specific,id:h})}),[a,h,m]),R=n.useCallback((function(){a||y||m({type:Q.GoToOption,focus:B.Specific,id:h})}),[a,y,h,m]),S=n.useCallback((function(){a||y&&m({type:Q.GoToOption,focus:B.Nothing})}),[a,y,m]),w=n.useMemo((function(){return{active:y,selected:x,disabled:a}}),[y,x,a]);return T(t({},f,{id:h,role:"option",tabIndex:-1,className:te(l,w),"aria-disabled":!0===a||void 0,"aria-selected":!0===x||void 0,onClick:C,onFocus:O,onPointerMove:R,onPointerLeave:S}),w,"li")};var re=n.createContext(null);function oe(e){var t=n.useContext(re);if(null===t){var r=new Error("<"+e+" /> is missing a parent <Switch.Group /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,oe),r}return t}var ie=n.Fragment;function ue(e){var o,i=e.checked,u=e.onChange,a=e.className,c=r(e,["checked","onChange","className"]),l="headlessui-switch-"+s(),f=n.useContext(re),d=n.useCallback((function(){return u(!i)}),[u,i]),v=n.useCallback((function(e){e.preventDefault(),d()}),[d]),p=n.useCallback((function(e){e.preventDefault(),e.key===I.Space&&d()}),[d]),m=n.useMemo((function(){return{checked:i}}),[i]);return T(t({},c,{id:l,ref:null===f?void 0:f.setSwitch,role:"switch",tabIndex:0,className:ae(a,m),"aria-checked":i,"aria-labelledby":null==f||null===(o=f.label)||void 0===o?void 0:o.id,onClick:v,onKeyDown:p}),m,"button")}function ae(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}ue.Group=function(e){var t=n.useState(null),r=t[0],o=t[1],i=n.useState(null),u=i[0],a=i[1],c=n.useMemo((function(){return{switch:r,label:u,setSwitch:o,setLabel:a}}),[r,o,u,a]);return n.createElement(re.Provider,{value:c},T(e,{},ie))},ue.Label=function e(r){var o=oe([ue.name,e.name].join(".")),i="headlessui-switch-label-"+s(),u=n.useCallback((function(){o.switch&&(o.switch.click(),o.switch.focus())}),[o.switch]);return T(t({},r,{ref:o.setLabel,id:i,onPointerUp:u}),{},"label")},e.Listbox=Z,e.Menu=j,e.Switch=ue,e.Transition=E,Object.defineProperty(e,"__esModule",{value:!0})}));
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],n):n((e=e||self).headlessui={},e.React)}(this,(function(e,n){"use strict";function t(){return(t=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function r(e,n){if(null==e)return{};var t,r,o={},u=Object.keys(e);for(r=0;r<u.length;r++)n.indexOf(t=u[r])>=0||(o[t]=e[t]);return o}function o(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function u(e,n){var t;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(t=function(e,n){if(e){if("string"==typeof e)return o(e,void 0);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?o(e,void 0):void 0}}(e))||n&&e&&"number"==typeof e.length){t&&(e=t);var r=0;return function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(t=e[Symbol.iterator]()).next.bind(t)}var i,a,c,l="undefined"!=typeof window?n.useLayoutEffect:n.useEffect,s={serverHandoffComplete:!1},f=0;function d(){return++f}function p(){var e=n.useState(s.serverHandoffComplete?d:null),t=e[0],r=e[1];return l((function(){null===t&&r(d())}),[]),n.useEffect((function(){!1===s.serverHandoffComplete&&(s.serverHandoffComplete=!0)}),[]),null!=t?""+t:void 0}function v(){var e=n.useRef(!0);return n.useEffect((function(){e.current=!1}),[]),e.current}function m(e,n){if(e in n){for(var t=n[e],r=arguments.length,o=new Array(r>2?r-2:0),u=2;u<r;u++)o[u-2]=arguments[u];return"function"==typeof t?t.apply(void 0,o):t}var i=new Error('Tried to handle "'+e+'" but there is no handler defined. Only defined handlers are: '+Object.keys(n).map((function(e){return'"'+e+'"'})).join(", ")+".");throw Error.captureStackTrace&&Error.captureStackTrace(i,m),i}function b(e,n,o,u,c){if(void 0===c&&(c=!0),c)return y(e,n,o);var l=null!=u?u:i.None;if(l&i.Static){var s=e.static,f=void 0!==s&&s,d=r(e,["static"]);if(f)return y(d,n,o)}if(l&i.RenderStrategy){var p,v=e.unmount,b=void 0===v||v,h=r(e,["unmount"]);return m(b?a.Unmount:a.Hidden,((p={})[a.Unmount]=function(){return null},p[a.Hidden]=function(){return y(t({},h,{hidden:!0,style:{display:"none"}}),n,o)},p))}return y(e,n,o)}function y(e,t,o){var i,a=x(e,["unmount","static"]),c=a.as,l=void 0===c?o:c,s=a.children,f=a.refName,d=void 0===f?"ref":f,p=r(a,["as","children","refName"]),v=void 0!==e.ref?((i={})[d]=e.ref,i):{},m="function"==typeof s?s(t):s;if(l===n.Fragment&&Object.keys(p).length>0){if(Array.isArray(m)&&m.length>1){var b=new Error("You should only render 1 child");throw Error.captureStackTrace&&Error.captureStackTrace(b,y),b}if(!n.isValidElement(m)){var h=new Error('You should render an element as a child. Did you forget the as="..." prop?');throw Error.captureStackTrace&&Error.captureStackTrace(h,y),h}return n.cloneElement(m,Object.assign({},function(e,n,t){for(var r,o=Object.assign({},e),i=function(){var t,u=r.value;void 0!==e[u]&&void 0!==n[u]&&Object.assign(o,((t={})[u]=function(t){t.defaultPrevented||e[u](t),t.defaultPrevented||n[u](t)},t))},a=u(["onClick"]);!(r=a()).done;)i();return o}(function(e){var n=Object.assign({},e);for(var t in n)void 0===n[t]&&delete n[t];return n}(x(p,["ref"])),m.props),v))}return n.createElement(l,Object.assign({},x(p,["ref"]),l!==n.Fragment&&v),m)}function h(e){return n.forwardRef(e)}function x(e,n){void 0===n&&(n=[]);for(var t,r=Object.assign({},e),o=u(n);!(t=o()).done;){var i=t.value;i in r&&delete r[i]}return r}function g(){var e=[],n={requestAnimationFrame:function(e){function n(){return e.apply(this,arguments)}return n.toString=function(){return e.toString()},n}((function(){var e=requestAnimationFrame.apply(void 0,arguments);n.add((function(){return cancelAnimationFrame(e)}))})),nextFrame:function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];n.requestAnimationFrame((function(){n.requestAnimationFrame.apply(n,t)}))},setTimeout:function(e){function n(){return e.apply(this,arguments)}return n.toString=function(){return e.toString()},n}((function(){var e=setTimeout.apply(void 0,arguments);n.add((function(){return clearTimeout(e)}))})),add:function(n){e.push(n)},dispose:function(){e.splice(0).forEach((function(e){return e()}))}};return n}function S(e){for(var n,t=arguments.length,r=new Array(t>1?t-1:0),o=1;o<t;o++)r[o-1]=arguments[o];e&&r.length>0&&(n=e.classList).add.apply(n,r)}function I(e){for(var n,t=arguments.length,r=new Array(t>1?t-1:0),o=1;o<t;o++)r[o-1]=arguments[o];e&&r.length>0&&(n=e.classList).remove.apply(n,r)}function C(e,n,t,r,o){var u=g(),i=void 0!==o?function(e){var n={called:!1};return function(){if(!n.called)return n.called=!0,e.apply(void 0,arguments)}}(o):function(){};return S.apply(void 0,[e].concat(n,t)),u.nextFrame((function(){I.apply(void 0,[e].concat(t)),S.apply(void 0,[e].concat(r)),u.add(function(e,n){var t=g();if(!e)return t.dispose;var r=getComputedStyle(e),o=[r.transitionDuration,r.transitionDelay].map((function(e){var n=e.split(",").filter(Boolean).map((function(e){return e.includes("ms")?parseFloat(e):1e3*parseFloat(e)})).sort((function(e,n){return n-e}))[0];return void 0===n?0:n})),u=o[0];return 0!==u?t.setTimeout((function(){n(c.Finished)}),u+o[1]):n(c.Finished),t.add((function(){return n(c.Cancelled)})),t.dispose}(e,(function(t){return I.apply(void 0,[e].concat(r,n)),i(t)})))})),u.add((function(){return I.apply(void 0,[e].concat(n,t,r))})),u.add((function(){return i(c.Cancelled)})),u.dispose}function O(e){return void 0===e&&(e=""),n.useMemo((function(){return e.split(" ").filter((function(e){return e.trim().length>1}))}),[e])}!function(e){e[e.None=0]="None",e[e.RenderStrategy=1]="RenderStrategy",e[e.Static=2]="Static"}(i||(i={})),function(e){e[e.Unmount=0]="Unmount",e[e.Hidden=1]="Hidden"}(a||(a={})),function(e){e.Finished="finished",e.Cancelled="cancelled"}(c||(c={}));var R,w=n.createContext(null);w.displayName="TransitionContext",function(e){e.Visible="visible",e.Hidden="hidden"}(R||(R={}));var E=n.createContext(null);function k(e){return"children"in e?k(e.children):e.current.filter((function(e){return e.state===R.Visible})).length>0}function T(e){var t=n.useRef(e),r=n.useRef([]),o=function(){var e=n.useRef(!0);return n.useEffect((function(){return function(){e.current=!1}}),[]),e}();n.useEffect((function(){t.current=e}),[e]);var u=n.useCallback((function(e,n){var u;void 0===n&&(n=a.Hidden);var i=r.current.findIndex((function(n){return n.id===e}));-1!==i&&(m(n,((u={})[a.Unmount]=function(){r.current.splice(i,1)},u[a.Hidden]=function(){r.current[i].state=R.Hidden},u)),!k(r)&&o.current&&(null==t.current||t.current()))}),[t,o,r]),i=n.useCallback((function(e){var n=r.current.find((function(n){return n.id===e}));return n?n.state!==R.Visible&&(n.state=R.Visible):r.current.push({id:e,state:R.Visible}),function(){return u(e,a.Unmount)}}),[r,u]);return n.useMemo((function(){return{children:r,register:i,unregister:u}}),[i,u,r])}function L(){}E.displayName="NestingContext";var D=["beforeEnter","afterEnter","beforeLeave","afterLeave"];function F(e){return D.reduce((function(n,t){return n[t]=e[t]||L,n}),{})}var M,A,P,N,U,G=i.RenderStrategy;function j(e){var o=e.beforeEnter,u=e.afterEnter,i=e.beforeLeave,s=e.afterLeave,f=e.enter,d=e.enterFrom,y=e.enterTo,h=e.leave,x=e.leaveFrom,g=e.leaveTo,S=r(e,["beforeEnter","afterEnter","beforeLeave","afterLeave","enter","enterFrom","enterTo","leave","leaveFrom","leaveTo"]),I=n.useRef(null),L=n.useState(R.Visible),D=L[0],M=L[1],A=S.unmount?a.Unmount:a.Hidden,P=function(){var e=n.useContext(w);if(null===e)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return e}(),N=P.show,U=P.appear,j=function(){var e=n.useContext(E);if(null===e)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return e}(),H=j.register,V=j.unregister,Q=v(),B=p(),K=n.useRef(!1),q=T((function(){K.current||(M(R.Hidden),V(B),X.current.afterLeave())}));l((function(){if(B)return H(B)}),[H,B]),l((function(){var e;A===a.Hidden&&B&&(N&&D!==R.Visible?M(R.Visible):m(D,((e={})[R.Hidden]=function(){return V(B)},e[R.Visible]=function(){return H(B)},e)))}),[D,B,H,V,N,A]);var W=O(f),Y=O(d),_=O(y),$=O(h),z=O(x),J=O(g),X=function(e){var t=n.useRef(F(e));return n.useEffect((function(){t.current=F(e)}),[e]),t}({beforeEnter:o,afterEnter:u,beforeLeave:i,afterLeave:s});n.useEffect((function(){if(D===R.Visible&&null===I.current)throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")}),[I,D]);var Z=Q&&!U;return l((function(){var e=I.current;if(e&&!Z)return K.current=!0,N&&X.current.beforeEnter(),N||X.current.beforeLeave(),N?C(e,W,Y,_,(function(e){K.current=!1,e===c.Finished&&X.current.afterEnter()})):C(e,$,z,J,(function(e){K.current=!1,e===c.Finished&&(k(q)||(M(R.Hidden),V(B),X.current.afterLeave()))}))}),[X,B,K,V,q,I,Z,N,W,Y,_,$,z,J]),n.createElement(E.Provider,{value:q},b(t({},S,{ref:I}),{},"div",G,D===R.Visible))}function H(e){var o=e.show,u=e.appear,i=void 0!==u&&u,a=e.unmount,c=r(e,["show","appear","unmount"]);if(![!0,!1].includes(o))throw new Error("A <Transition /> is used but it is missing a `show={true | false}` prop.");var l=n.useState(o?R.Visible:R.Hidden),s=l[0],f=l[1],d=T((function(){f(R.Hidden)})),p=v(),m=n.useMemo((function(){return{show:o,appear:i||!p}}),[o,i,p]);n.useEffect((function(){o?f(R.Visible):k(d)||f(R.Hidden)}),[o,d]);var y={unmount:a};return n.createElement(E.Provider,{value:d},n.createElement(w.Provider,{value:m},b(t({},y,{as:n.Fragment,children:n.createElement(j,Object.assign({},y,c))}),{},n.Fragment,G,s===R.Visible)))}function V(){var e=n.useState(g)[0];return n.useEffect((function(){return function(){return e.dispose()}}),[e]),e}function Q(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return n.useCallback((function(e){t.forEach((function(n){if(null!==n)return"function"==typeof n?n(e):void(n.current=e)}))}),[t])}function B(e,n){var t=n.resolveItems();if(t.length<=0)return null;var r=n.resolveActiveIndex(),o=null!=r?r:-1,u=function(){switch(e.focus){case A.First:return t.findIndex((function(e){return!n.resolveDisabled(e)}));case A.Previous:var r=t.slice().reverse().findIndex((function(e,t,r){return!(-1!==o&&r.length-t-1>=o||n.resolveDisabled(e))}));return-1===r?r:t.length-1-r;case A.Next:return t.findIndex((function(e,t){return!(t<=o||n.resolveDisabled(e))}));case A.Last:var u=t.slice().reverse().findIndex((function(e){return!n.resolveDisabled(e)}));return-1===u?u:t.length-1-u;case A.Specific:return t.findIndex((function(t){return n.resolveId(t)===e.id}));case A.Nothing:return null;default:!function(e){throw new Error("Unexpected object: "+e)}(e)}}();return-1===u?r:u}function K(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}function q(e){for(var n,t,r=e.parentElement,o=null;r&&!(r instanceof HTMLFieldSetElement);)r instanceof HTMLLegendElement&&(o=r),r=r.parentElement;var u=null!=(n=""===(null==(t=r)?void 0:t.getAttribute("disabled")))&&n;return(!u||!function(e){if(!e)return!1;for(var n=e.previousElementSibling;null!==n;){if(n instanceof HTMLLegendElement)return!1;n=n.previousElementSibling}return!0}(o))&&u}H.Child=j,function(e){e.Space=" ",e.Enter="Enter",e.Escape="Escape",e.Backspace="Backspace",e.ArrowUp="ArrowUp",e.ArrowDown="ArrowDown",e.Home="Home",e.End="End",e.PageUp="PageUp",e.PageDown="PageDown",e.Tab="Tab"}(M||(M={})),function(e){e[e.First=0]="First",e[e.Previous=1]="Previous",e[e.Next=2]="Next",e[e.Last=3]="Last",e[e.Specific=4]="Specific",e[e.Nothing=5]="Nothing"}(A||(A={})),function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(N||(N={})),function(e){e[e.OpenMenu=0]="OpenMenu",e[e.CloseMenu=1]="CloseMenu",e[e.GoToItem=2]="GoToItem",e[e.Search=3]="Search",e[e.ClearSearch=4]="ClearSearch",e[e.RegisterItem=5]="RegisterItem",e[e.UnregisterItem=6]="UnregisterItem"}(U||(U={}));var W=((P={})[U.CloseMenu]=function(e){return t({},e,{activeItemIndex:null,menuState:N.Closed})},P[U.OpenMenu]=function(e){return t({},e,{menuState:N.Open})},P[U.GoToItem]=function(e,n){var r=B(n,{resolveItems:function(){return e.items},resolveActiveIndex:function(){return e.activeItemIndex},resolveId:function(e){return e.id},resolveDisabled:function(e){return e.dataRef.current.disabled}});return""===e.searchQuery&&e.activeItemIndex===r?e:t({},e,{searchQuery:"",activeItemIndex:r})},P[U.Search]=function(e,n){var r=e.searchQuery+n.value,o=e.items.findIndex((function(e){var n;return(null==(n=e.dataRef.current.textValue)?void 0:n.startsWith(r))&&!e.dataRef.current.disabled}));return t({},e,-1===o||o===e.activeItemIndex?{searchQuery:r}:{searchQuery:r,activeItemIndex:o})},P[U.ClearSearch]=function(e){return t({},e,{searchQuery:""})},P[U.RegisterItem]=function(e,n){return t({},e,{items:[].concat(e.items,[{id:n.id,dataRef:n.dataRef}])})},P[U.UnregisterItem]=function(e,n){var r=e.items.slice(),o=null!==e.activeItemIndex?r[e.activeItemIndex]:null,u=r.findIndex((function(e){return e.id===n.id}));return-1!==u&&r.splice(u,1),t({},e,{items:r,activeItemIndex:u===e.activeItemIndex||null===o?null:r.indexOf(o)})},P),Y=n.createContext(null);function _(e){var t=n.useContext(Y);if(null===t){var r=new Error("<"+e+" /> is missing a parent <"+J.name+" /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,_),r}return t}function $(e,n){return m(n.type,W,e,n)}Y.displayName="MenuContext";var z=n.Fragment;function J(e){var t=n.useReducer($,{menuState:N.Closed,buttonRef:n.createRef(),itemsRef:n.createRef(),items:[],searchQuery:"",activeItemIndex:null}),r=t[0],o=r.menuState,u=r.itemsRef,i=r.buttonRef,a=t[1];n.useEffect((function(){function e(e){var n,t,r,c=e.target,l=document.activeElement;o===N.Open&&((null==(n=i.current)?void 0:n.contains(c))||((null==(t=u.current)?void 0:t.contains(c))||a({type:U.CloseMenu}),l!==document.body&&(null==l?void 0:l.contains(c))||e.defaultPrevented||null==(r=i.current)||r.focus({preventScroll:!0})))}return window.addEventListener("click",e),function(){return window.removeEventListener("click",e)}}),[o,u,i,a]);var c=n.useMemo((function(){return{open:o===N.Open}}),[o]);return n.createElement(Y.Provider,{value:t},b(e,c,z))}var X,Z,ee,ne=h((function e(r,o){var u,i=_([J.name,e.name].join(".")),a=i[0],c=i[1],l=Q(a.buttonRef,o),s="headlessui-menu-button-"+p(),f=V(),d=n.useCallback((function(e){switch(e.key){case M.Space:case M.Enter:case M.ArrowDown:e.preventDefault(),c({type:U.OpenMenu}),f.nextFrame((function(){var e;null==(e=a.itemsRef.current)||e.focus({preventScroll:!0}),c({type:U.GoToItem,focus:A.First})}));break;case M.ArrowUp:e.preventDefault(),c({type:U.OpenMenu}),f.nextFrame((function(){var e;null==(e=a.itemsRef.current)||e.focus({preventScroll:!0}),c({type:U.GoToItem,focus:A.Last})}))}}),[c,a,f]),v=n.useCallback((function(e){r.disabled||(a.menuState===N.Open?(c({type:U.CloseMenu}),f.nextFrame((function(){var e;return null==(e=a.buttonRef.current)?void 0:e.focus({preventScroll:!0})}))):(e.preventDefault(),c({type:U.OpenMenu}),f.nextFrame((function(){var e;return null==(e=a.itemsRef.current)?void 0:e.focus({preventScroll:!0})}))))}),[c,f,a,r.disabled]),m=n.useMemo((function(){return{open:a.menuState===N.Open}}),[a]);return b(t({},r,{ref:l,id:s,type:"button","aria-haspopup":!0,"aria-controls":null==(u=a.itemsRef.current)?void 0:u.id,"aria-expanded":a.menuState===N.Open||void 0,onKeyDown:d,onPointerUp:v}),m,"button")})),te=i.RenderStrategy|i.Static,re=h((function e(r,o){var u,i,a=_([J.name,e.name].join(".")),c=a[0],l=a[1],s=Q(c.itemsRef,o),f="headlessui-menu-items-"+p(),d=V(),v=n.useCallback((function(e){switch(d.dispose(),e.key){case M.Space:if(""!==c.searchQuery)return e.preventDefault(),l({type:U.Search,value:e.key});case M.Enter:var n;e.preventDefault(),l({type:U.CloseMenu}),null!==c.activeItemIndex&&(null==(n=document.getElementById(c.items[c.activeItemIndex].id))||n.click()),g().nextFrame((function(){var e;return null==(e=c.buttonRef.current)?void 0:e.focus({preventScroll:!0})}));break;case M.ArrowDown:return e.preventDefault(),l({type:U.GoToItem,focus:A.Next});case M.ArrowUp:return e.preventDefault(),l({type:U.GoToItem,focus:A.Previous});case M.Home:case M.PageUp:return e.preventDefault(),l({type:U.GoToItem,focus:A.First});case M.End:case M.PageDown:return e.preventDefault(),l({type:U.GoToItem,focus:A.Last});case M.Escape:e.preventDefault(),l({type:U.CloseMenu}),g().nextFrame((function(){var e;return null==(e=c.buttonRef.current)?void 0:e.focus({preventScroll:!0})}));break;case M.Tab:return e.preventDefault();default:1===e.key.length&&(l({type:U.Search,value:e.key}),d.setTimeout((function(){return l({type:U.ClearSearch})}),350))}}),[l,d,c]),m=n.useMemo((function(){return{open:c.menuState===N.Open}}),[c]);return b(t({},r,{"aria-activedescendant":null===c.activeItemIndex||null==(u=c.items[c.activeItemIndex])?void 0:u.id,"aria-labelledby":null==(i=c.buttonRef.current)?void 0:i.id,id:f,onKeyDown:v,role:"menu",tabIndex:0,ref:s}),m,"div",te,c.menuState===N.Open)})),oe=n.Fragment;function ue(e,t){var r=n.useState(e),o=r[0],u=r[1],i=n.useRef(e);return l((function(){i.current=e}),[e]),l((function(){return u(i.current)}),[i,u].concat(t)),o}J.Button=ne,J.Items=re,J.Item=function e(o){var u=o.disabled,i=void 0!==u&&u,a=o.className,c=o.onClick,s=r(o,["disabled","className","onClick"]),f=_([J.name,e.name].join(".")),d=f[0],v=f[1],m="headlessui-menu-item-"+p(),y=null!==d.activeItemIndex&&d.items[d.activeItemIndex].id===m,h=n.useRef({disabled:i});l((function(){h.current.disabled=i}),[h,i]),l((function(){var e,n;h.current.textValue=null==(e=document.getElementById(m))||null==(n=e.textContent)?void 0:n.toLowerCase()}),[h,m]),l((function(){return v({type:U.RegisterItem,id:m,dataRef:h}),function(){return v({type:U.UnregisterItem,id:m})}}),[h,m]);var x=n.useCallback((function(e){return q(e.currentTarget)||i?e.preventDefault():(v({type:U.CloseMenu}),g().nextFrame((function(){var e;return null==(e=d.buttonRef.current)?void 0:e.focus({preventScroll:!0})})),c?c(e):void 0)}),[v,d.buttonRef,i,c]),S=n.useCallback((function(){if(i)return v({type:U.GoToItem,focus:A.Nothing});v({type:U.GoToItem,focus:A.Specific,id:m})}),[i,m,v]),I=n.useCallback((function(){i||y||v({type:U.GoToItem,focus:A.Specific,id:m})}),[i,y,m,v]),C=n.useCallback((function(){i||y&&v({type:U.GoToItem,focus:A.Nothing})}),[i,y,v]),O=n.useMemo((function(){return{active:y,disabled:i}}),[y,i]);return b(t({},s,{id:m,role:"menuitem",tabIndex:-1,className:K(a,O),"aria-disabled":!0===i||void 0,onClick:x,onFocus:S,onPointerMove:I,onPointerLeave:C}),O,oe)},function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(Z||(Z={})),function(e){e[e.OpenListbox=0]="OpenListbox",e[e.CloseListbox=1]="CloseListbox",e[e.GoToOption=2]="GoToOption",e[e.Search=3]="Search",e[e.ClearSearch=4]="ClearSearch",e[e.RegisterOption=5]="RegisterOption",e[e.UnregisterOption=6]="UnregisterOption"}(ee||(ee={}));var ie=((X={})[ee.CloseListbox]=function(e){return t({},e,{activeOptionIndex:null,listboxState:Z.Closed})},X[ee.OpenListbox]=function(e){return t({},e,{listboxState:Z.Open})},X[ee.GoToOption]=function(e,n){var r=B(n,{resolveItems:function(){return e.options},resolveActiveIndex:function(){return e.activeOptionIndex},resolveId:function(e){return e.id},resolveDisabled:function(e){return e.dataRef.current.disabled}});return""===e.searchQuery&&e.activeOptionIndex===r?e:t({},e,{searchQuery:"",activeOptionIndex:r})},X[ee.Search]=function(e,n){var r=e.searchQuery+n.value,o=e.options.findIndex((function(e){var n;return!e.dataRef.current.disabled&&(null==(n=e.dataRef.current.textValue)?void 0:n.startsWith(r))}));return t({},e,-1===o||o===e.activeOptionIndex?{searchQuery:r}:{searchQuery:r,activeOptionIndex:o})},X[ee.ClearSearch]=function(e){return t({},e,{searchQuery:""})},X[ee.RegisterOption]=function(e,n){return t({},e,{options:[].concat(e.options,[{id:n.id,dataRef:n.dataRef}])})},X[ee.UnregisterOption]=function(e,n){var r=e.options.slice(),o=null!==e.activeOptionIndex?r[e.activeOptionIndex]:null,u=r.findIndex((function(e){return e.id===n.id}));return-1!==u&&r.splice(u,1),t({},e,{options:r,activeOptionIndex:u===e.activeOptionIndex||null===o?null:r.indexOf(o)})},X),ae=n.createContext(null);function ce(e){var t=n.useContext(ae);if(null===t){var r=new Error("<"+e+" /> is missing a parent <"+fe.name+" /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,ce),r}return t}function le(e,n){return m(n.type,ie,e,n)}ae.displayName="ListboxContext";var se=n.Fragment;function fe(e){var t=e.value,o=e.onChange,u=r(e,["value","onChange"]),i=V(),a=n.useReducer(le,{listboxState:Z.Closed,propsRef:{current:{value:t,onChange:o}},labelRef:n.createRef(),buttonRef:n.createRef(),optionsRef:n.createRef(),options:[],searchQuery:"",activeOptionIndex:null}),c=a[0],s=c.listboxState,f=c.propsRef,d=c.optionsRef,p=c.buttonRef,v=a[1];l((function(){f.current.value=t}),[t,f]),l((function(){f.current.onChange=o}),[o,f]),n.useEffect((function(){function e(e){var n,t,r,o=e.target,u=document.activeElement;s===Z.Open&&((null==(n=p.current)?void 0:n.contains(o))||((null==(t=d.current)?void 0:t.contains(o))||v({type:ee.CloseListbox}),u!==document.body&&(null==u?void 0:u.contains(o))||e.defaultPrevented||null==(r=p.current)||r.focus({preventScroll:!0})))}return window.addEventListener("click",e),function(){return window.removeEventListener("click",e)}}),[s,d,p,i,v]);var m=n.useMemo((function(){return{open:s===Z.Open}}),[s]);return n.createElement(ae.Provider,{value:a},b(u,m,se))}var de=h((function e(r,o){var u,i=ce([fe.name,e.name].join(".")),a=i[0],c=i[1],l=Q(a.buttonRef,o),s="headlessui-listbox-button-"+p(),f=V(),d=n.useCallback((function(e){switch(e.key){case M.Space:case M.Enter:case M.ArrowDown:e.preventDefault(),c({type:ee.OpenListbox}),f.nextFrame((function(){var e;null==(e=a.optionsRef.current)||e.focus({preventScroll:!0}),a.propsRef.current.value||c({type:ee.GoToOption,focus:A.First})}));break;case M.ArrowUp:e.preventDefault(),c({type:ee.OpenListbox}),f.nextFrame((function(){var e;null==(e=a.optionsRef.current)||e.focus({preventScroll:!0}),a.propsRef.current.value||c({type:ee.GoToOption,focus:A.Last})}))}}),[c,a,f]),v=n.useCallback((function(e){r.disabled||(a.listboxState===Z.Open?(c({type:ee.CloseListbox}),f.nextFrame((function(){var e;return null==(e=a.buttonRef.current)?void 0:e.focus({preventScroll:!0})}))):(e.preventDefault(),c({type:ee.OpenListbox}),f.nextFrame((function(){var e;return null==(e=a.optionsRef.current)?void 0:e.focus({preventScroll:!0})}))))}),[c,f,a,r.disabled]),m=ue((function(){if(a.labelRef.current)return[a.labelRef.current.id,s].join(" ")}),[a.labelRef.current,s]),y=n.useMemo((function(){return{open:a.listboxState===Z.Open}}),[a]);return b(t({},r,{ref:l,id:s,type:"button","aria-haspopup":!0,"aria-controls":null==(u=a.optionsRef.current)?void 0:u.id,"aria-expanded":a.listboxState===Z.Open||void 0,"aria-labelledby":m,onKeyDown:d,onPointerUp:v}),y,"button")})),pe=i.RenderStrategy|i.Static,ve=h((function e(r,o){var u,i=ce([fe.name,e.name].join(".")),a=i[0],c=i[1],l=Q(a.optionsRef,o),s="headlessui-listbox-options-"+p(),f=V(),d=V(),v=n.useCallback((function(e){switch(d.dispose(),e.key){case M.Space:if(""!==a.searchQuery)return e.preventDefault(),c({type:ee.Search,value:e.key});case M.Enter:e.preventDefault(),c({type:ee.CloseListbox}),null!==a.activeOptionIndex&&a.propsRef.current.onChange(a.options[a.activeOptionIndex].dataRef.current.value),g().nextFrame((function(){var e;return null==(e=a.buttonRef.current)?void 0:e.focus({preventScroll:!0})}));break;case M.ArrowDown:return e.preventDefault(),c({type:ee.GoToOption,focus:A.Next});case M.ArrowUp:return e.preventDefault(),c({type:ee.GoToOption,focus:A.Previous});case M.Home:case M.PageUp:return e.preventDefault(),c({type:ee.GoToOption,focus:A.First});case M.End:case M.PageDown:return e.preventDefault(),c({type:ee.GoToOption,focus:A.Last});case M.Escape:return e.preventDefault(),c({type:ee.CloseListbox}),f.nextFrame((function(){var e;return null==(e=a.buttonRef.current)?void 0:e.focus({preventScroll:!0})}));case M.Tab:return e.preventDefault();default:1===e.key.length&&(c({type:ee.Search,value:e.key}),d.setTimeout((function(){return c({type:ee.ClearSearch})}),350))}}),[f,c,d,a]),m=ue((function(){var e,n,t;return null!=(e=null==(n=a.labelRef.current)?void 0:n.id)?e:null==(t=a.buttonRef.current)?void 0:t.id}),[a.labelRef.current,a.buttonRef.current]),y=n.useMemo((function(){return{open:a.listboxState===Z.Open}}),[a]);return b(t({},r,{"aria-activedescendant":null===a.activeOptionIndex||null==(u=a.options[a.activeOptionIndex])?void 0:u.id,"aria-labelledby":m,id:s,onKeyDown:v,role:"listbox",tabIndex:0,ref:l}),y,"ul",pe,a.listboxState===Z.Open)}));fe.Button=de,fe.Label=function e(r){var o=ce([fe.name,e.name].join("."))[0],u="headlessui-listbox-label-"+p(),i=n.useCallback((function(){var e;return null==(e=o.buttonRef.current)?void 0:e.focus({preventScroll:!0})}),[o.buttonRef]),a=n.useMemo((function(){return{open:o.listboxState===Z.Open}}),[o]);return b(t({},r,{ref:o.labelRef,id:u,onPointerUp:i}),a,"label")},fe.Options=ve,fe.Option=function e(o){var u=o.disabled,i=void 0!==u&&u,a=o.value,c=o.className,s=r(o,["disabled","value","className"]),f=ce([fe.name,e.name].join(".")),d=f[0],v=f[1],m="headlessui-listbox-option-"+p(),y=null!==d.activeOptionIndex&&d.options[d.activeOptionIndex].id===m,h=d.propsRef.current.value===a,x=n.useRef({disabled:i,value:a});l((function(){x.current.disabled=i}),[x,i]),l((function(){x.current.value=a}),[x,a]),l((function(){var e,n;x.current.textValue=null==(e=document.getElementById(m))||null==(n=e.textContent)?void 0:n.toLowerCase()}),[x,m]);var S=n.useCallback((function(){return d.propsRef.current.onChange(a)}),[d.propsRef,a]);l((function(){return v({type:ee.RegisterOption,id:m,dataRef:x}),function(){return v({type:ee.UnregisterOption,id:m})}}),[x,m]),l((function(){var e;d.listboxState===Z.Open&&h&&(v({type:ee.GoToOption,focus:A.Specific,id:m}),null==(e=document.getElementById(m))||null==e.focus||e.focus())}),[d.listboxState]),l((function(){if(d.listboxState===Z.Open&&y){var e=g();return e.nextFrame((function(){var e;return null==(e=document.getElementById(m))||null==e.scrollIntoView?void 0:e.scrollIntoView({block:"nearest"})})),e.dispose}}),[y,d.listboxState]);var I=n.useCallback((function(e){if(i)return e.preventDefault();S(),v({type:ee.CloseListbox}),g().nextFrame((function(){var e;return null==(e=d.buttonRef.current)?void 0:e.focus({preventScroll:!0})}))}),[v,d.buttonRef,i,S]),C=n.useCallback((function(){if(i)return v({type:ee.GoToOption,focus:A.Nothing});v({type:ee.GoToOption,focus:A.Specific,id:m})}),[i,m,v]),O=n.useCallback((function(){i||y||v({type:ee.GoToOption,focus:A.Specific,id:m})}),[i,y,m,v]),R=n.useCallback((function(){i||y&&v({type:ee.GoToOption,focus:A.Nothing})}),[i,y,v]),w=n.useMemo((function(){return{active:y,selected:h,disabled:i}}),[y,h,i]);return b(t({},s,{id:m,role:"option",tabIndex:-1,className:K(c,w),"aria-disabled":!0===i||void 0,"aria-selected":!0===h||void 0,onClick:I,onFocus:C,onPointerMove:O,onPointerLeave:R}),w,"li")};var me=n.createContext(null);function be(e){var t=n.useContext(me);if(null===t){var r=new Error("<"+e+" /> is missing a parent <Switch.Group /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,be),r}return t}me.displayName="GroupContext";var ye=n.Fragment;function he(e){var o,u=e.checked,i=e.onChange,a=e.className,c=r(e,["checked","onChange","className"]),l="headlessui-switch-"+p(),s=n.useContext(me),f=n.useCallback((function(){return i(!u)}),[i,u]),d=n.useCallback((function(e){if(q(e.currentTarget))return e.preventDefault();e.preventDefault(),f()}),[f]),v=n.useCallback((function(e){e.key!==M.Tab&&e.preventDefault(),e.key===M.Space&&f()}),[f]),m=n.useCallback((function(e){return e.preventDefault()}),[]),y=n.useMemo((function(){return{checked:u}}),[u]),h={id:l,ref:null===s?void 0:s.setSwitch,role:"switch",tabIndex:0,className:K(a,y),"aria-checked":u,"aria-labelledby":null==s||null==(o=s.label)?void 0:o.id,onClick:d,onKeyUp:v,onKeyPress:m};return"button"===c.as&&Object.assign(h,{type:"button"}),b(t({},c,h),y,"button")}he.Group=function(e){var t=n.useState(null),r=t[0],o=t[1],u=n.useState(null),i=u[0],a=u[1],c=n.useMemo((function(){return{switch:r,label:i,setSwitch:o,setLabel:a}}),[r,o,i,a]);return n.createElement(me.Provider,{value:c},b(e,{},ye))},he.Label=function e(r){var o=be([he.name,e.name].join(".")),u="headlessui-switch-label-"+p(),i=n.useCallback((function(){o.switch&&(o.switch.click(),o.switch.focus({preventScroll:!0}))}),[o.switch]);return b(t({},r,{ref:o.setLabel,id:u,onPointerUp:i}),{},"label")},e.Listbox=fe,e.Menu=J,e.Switch=he,e.Transition=H,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=headlessui.umd.production.min.js.map

19

dist/test-utils/accessibility-assertions.d.ts

@@ -7,4 +7,8 @@ export declare function getMenuButton(): HTMLElement | null;

export declare enum MenuState {
Open = 0,
Closed = 1
/** The menu is visible to the user. */
Visible = 0,
/** The menu is **not** visible to the user. It's still in the DOM, but it is hidden. */
InvisibleHidden = 1,
/** The menu is **not** visible to the user. It's not in the DOM, it is unmounted. */
InvisibleUnmounted = 2
}

@@ -35,4 +39,8 @@ export declare function assertMenuButton(options: {

export declare enum ListboxState {
Open = 0,
Closed = 1
/** The listbox is visible to the user. */
Visible = 0,
/** The listbox is **not** visible to the user. It's still in the DOM, but it is hidden. */
InvisibleHidden = 1,
/** The listbox is **not** visible to the user. It's not in the DOM, it is unmounted. */
InvisibleUnmounted = 2
}

@@ -66,2 +74,3 @@ export declare function assertListbox(options: {

export declare function getSwitch(): HTMLElement | null;
export declare function getSwitchLabel(): HTMLElement | null;
export declare enum SwitchState {

@@ -79,1 +88,3 @@ On = 0,

export declare function assertActiveElement(element: HTMLElement | null): void;
export declare function assertHidden(element: HTMLElement | null): void;
export declare function assertVisible(element: HTMLElement | null): void;

12

dist/types.d.ts
/// <reference types="react" />
declare const __: unique symbol;
export declare type __ = typeof __;
export declare type PropsOf<TTag = any> = TTag extends React.ElementType ? React.ComponentProps<TTag> : never;
export declare type Props<TTag, TSlot = any, TOmitableProps extends keyof any = any> = {
export declare type Props<TTag, TSlot = {}, TOmitableProps extends keyof any = __> = {
as?: TTag;
children?: React.ReactNode | ((bag: TSlot) => React.ReactElement);
} & Omit<PropsOf<TTag>, TOmitableProps>;
refName?: string;
} & (TOmitableProps extends __ ? PropsOf<TTag> : Omit<PropsOf<TTag>, TOmitableProps>);
declare type Without<T, U> = {
[P in Exclude<keyof T, keyof U>]?: never;
};
export declare 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;
export {};

34

dist/utils/render.d.ts
import * as React from 'react';
import { Props } from '../types';
export declare function render<TTag extends React.ElementType, TBag>(props: Props<TTag, TBag>, 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>)>;
import { Props, XOR, __ } from '../types';
export declare enum Features {
/** No features at all */
None = 0,
/**
* When used, this will allow us to use one of the render strategies.
*
* **The render strategies are:**
* - **Unmount** _(Will unmount the component.)_
* - **Hidden** _(Will hide the component using the [hidden] attribute.)_
*/
RenderStrategy = 1,
/**
* When used, this will allow the user of our component to be in control. This can be used when
* you want to transition based on some state.
*/
Static = 2
}
export declare enum RenderStrategy {
Unmount = 0,
Hidden = 1
}
declare type PropsForFeature<TPassedInFeatures extends Features, TForFeature extends Features, TProps> = {
[P in TPassedInFeatures]: P extends TForFeature ? TProps : __;
}[TPassedInFeatures];
export declare type PropsForFeatures<T extends Features> = XOR<PropsForFeature<T, Features.Static, {
static?: boolean;
}>, PropsForFeature<T, Features.RenderStrategy, {
unmount?: boolean;
}>>;
export declare function render<TFeature extends Features, TTag extends React.ElementType, TBag>(props: Props<TTag, TBag, any> & PropsForFeatures<TFeature>, propsBag: TBag, defaultTag: React.ElementType, features?: TFeature, visible?: boolean): 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>)> | null;
/**

@@ -9,1 +38,2 @@ * This is a hack, but basically we want to keep the full 'API' of the component, but we do want to

export declare function forwardRefWithAs<T>(component: T): T;
export {};

14

package.json
{
"name": "@headlessui/react",
"version": "0.1.4-alpha.1",
"version": "0.2.0-ab820de",
"main": "dist/index.js",

@@ -34,12 +34,12 @@ "typings": "dist/index.d.ts",

"devDependencies": {
"@types/react": "^16.9.49",
"@types/react": "^16.9.53",
"@types/react-dom": "^16.9.8",
"@popperjs/core": "^2.5.3",
"@testing-library/react": "^11.0.4",
"framer-motion": "^2.7.6",
"next": "9.5.3",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"@testing-library/react": "^11.1.0",
"framer-motion": "^2.9.3",
"next": "9.5.5",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"snapshot-diff": "^0.8.1"
}
}

734

README.md

@@ -32,2 +32,4 @@ <h3 align="center">

- [Menu Button (Dropdown)](#menu-button-dropdown)
- [Listbox (Select)](#listbox-select)
- [Switch (Toggle)](#switch-toggle)

@@ -40,4 +42,2 @@ ### Roadmap

- Listboxes
- Toggles
- Modals

@@ -81,5 +81,3 @@ - Tabs

<>
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
<Transition

@@ -114,5 +112,3 @@ show={isOpen}

<>
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
<Transition

@@ -140,5 +136,3 @@ show={isOpen}

<>
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
<Transition

@@ -158,29 +152,2 @@ show={isOpen}

If you'd prefer not to render an additional element at all, you can pass your children as a function instead which will receive a `ref` that you need to attach to your root node:
```tsx
import { Transition } from '@headlessui/react'
import { useState } from 'react'
function MyComponent() {
const [isOpen, setIsOpen] = useState(false)
return (
<>
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<Transition
show={isOpen}
// ...
>
{(ref) => <div ref={ref}>{/* Your content goes here*/}</div>}
</Transition>
</>
)
}
```
Be sure to attach the `ref` or your transitions will not work correctly.
### Animating transitions

@@ -210,5 +177,3 @@

<>
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
<Transition

@@ -332,19 +297,22 @@ show={isOpen}

| Prop | Type | Description |
| ----------- | ------------------------------------- | ------------------------------------------------------------------------------------- |
| `show` | Boolean | Whether the children should be shown or hidden. |
| `as` | String Component _(Default: `'div'`)_ | The element or component to render in place of the `Transition` itself. |
| `appear` | Boolean _(Default: `false`)_ | Whether the transition should run on initial mount. |
| `enter` | String _(Default: '')_ | Classes to add to the transitioning element during the entire enter phase. |
| `enterFrom` | String _(Default: '')_ | Classes to add to the transitioning element before the enter phase starts. |
| `enterTo` | String _(Default: '')_ | Classes to add to the transitioning element immediately after the enter phase starts. |
| `leave` | String _(Default: '')_ | Classes to add to the transitioning element during the entire leave phase. |
| `leaveFrom` | String _(Default: '')_ | Classes to add to the transitioning element before the leave phase starts. |
| `leaveTo` | String _(Default: '')_ | Classes to add to the transitioning element immediately after the leave phase starts. |
| Prop | Type | Description |
| ------------- | ------------------------------------- | ------------------------------------------------------------------------------------- |
| `show` | Boolean | Whether the children should be shown or hidden. |
| `as` | String Component _(Default: `'div'`)_ | The element or component to render in place of the `Transition` itself. |
| `appear` | Boolean _(Default: `false`)_ | Whether the transition should run on initial mount. |
| `unmount` | Boolean _(Default: `true`)_ | Whether the element should be `unmounted` or `hidden` based on the show state. |
| `enter` | String _(Default: '')_ | Classes to add to the transitioning element during the entire enter phase. |
| `enterFrom` | String _(Default: '')_ | Classes to add to the transitioning element before the enter phase starts. |
| `enterTo` | String _(Default: '')_ | Classes to add to the transitioning element immediately after the enter phase starts. |
| `leave` | String _(Default: '')_ | Classes to add to the transitioning element during the entire leave phase. |
| `leaveFrom` | String _(Default: '')_ | Classes to add to the transitioning element before the leave phase starts. |
| `leaveTo` | String _(Default: '')_ | Classes to add to the transitioning element immediately after the leave phase starts. |
| `beforeEnter` | Function | Callback which is called before we start the enter transition. |
| `afterEnter` | Function | Callback which is called after we finished the enter transition. |
| `beforeLeave` | Function | Callback which is called before we start the leave transition. |
| `afterLeave` | Function | Callback which is called after we finished the leave transition. |
##### Render prop arguments
| Prop | Type | Description |
| ----- | ---------------------- | ----------------------------------------------------------------------------------- |
| `ref` | React.MutableRefObject | A ref that needs to be manually added to the child node when using the render prop. |
- None

@@ -375,2 +343,3 @@ #### Transition.Child

| `appear` | Boolean _(Default: `false`)_ | Whether the transition should run on initial mount. |
| `unmount` | Boolean _(Default: `true`)_ | Whether the element should be `unmounted` or `hidden` based on the show state. |
| `enter` | String _(Default: '')_ | Classes to add to the transitioning element during the entire enter phase. |

@@ -385,5 +354,3 @@ | `enterFrom` | String _(Default: '')_ | Classes to add to the transitioning element before the enter phase starts. |

| Prop | Type | Description |
| ----- | ---------------------- | ----------------------------------------------------------------------------------- |
| `ref` | React.MutableRefObject | A ref that needs to be manually added to the child node when using the render prop. |
- None

@@ -601,5 +568,5 @@ ---

<Menu.Items>
<div class="px-4 py-3">
<p class="text-sm leading-5">Signed in as</p>
<p class="text-sm font-medium leading-5 text-gray-900 truncate">tom@example.com</p>
<div className="px-4 py-3">
<p className="text-sm leading-5">Signed in as</p>
<p className="text-sm font-medium leading-5 text-gray-900 truncate">tom@example.com</p>
</div>

@@ -746,7 +713,10 @@ <Menu.Item>

| Prop | Type | Default | Description |
| -------- | ------------------- | ------- | --------------------------------------------------------------------------- |
| `as` | String \| Component | `div` | The element or component the `Menu.Items` should render as. |
| `static` | Boolean | `false` | Whether the element should ignore the internally managed open/closed state. |
| Prop | Type | Default | Description |
| --------- | ------------------- | ------- | --------------------------------------------------------------------------------- |
| `as` | String \| Component | `div` | The element or component the `Menu.Items` should render as. |
| `static` | Boolean | `false` | Whether the element should ignore the internally managed open/closed state. |
| `unmount` | Boolean | `true` | Whether the element should be unmounted or hidden based on the open/closed state. |
> **note**: `static` and `unmount` can not be used at the same time. You will get a TypeScript error if you try to do it.
##### Render prop object

@@ -786,1 +756,635 @@

| `disabled` | Boolean | Whether or not the item is the disabled for keyboard navigation and ARIA purposes. |
## Listbox (Select)
[View live demo on CodeSandbox](https://codesandbox.io/s/headlessuireact-listbox-example-57eoj?file=/src/App.js)
The `Listbox` component and related child components are used to quickly build custom listbox components that are fully accessible out of the box, including correct ARIA attribute management and robust keyboard navigation support.
- [Basic example](#basic-example-2)
- [Styling the active and selected option](#styling-the-active-and-selected-option)
- [Showing/hiding the listbox](#showinghiding-the-listbox)
- [Using a custom label](#using-a-custom-label)
- [Disabling an option](#disabling-an-option)
- [Transitions](#transitions-1)
- [Rendering additional content](#rendering-additional-content-1)
- [Rendering a different element for a component](#rendering-a-different-element-for-a-component-1)
- [Component API](#component-api-2)
### Basic example
Listboxes are built using the `Listbox`, `Listbox.Button`, `Listbox.Options`, `Listbox.Option` and `Listbox.Label` components.
The `Listbox.Button` will automatically open/close the `Listbox.Options` when clicked, and when the menu is open, the list of items receives focus and is automatically navigable via the keyboard.
```jsx
import { useState } from 'react'
import { Listbox } from '@headlessui/react'
const people = [
{ id: 1, name: 'Durward Reynolds', unavailable: false },
{ id: 2, name: 'Kenton Towne', unavailable: false },
{ id: 3, name: 'Therese Wunsch', unavailable: false },
{ id: 4, name: 'Benedict Kessler', unavailable: true },
{ id: 5, name: 'Katelyn Rohan', unavailable: false },
]
function MyListbox() {
const [selectedPerson, setSelectedPerson] = useState(people[0])
return (
<Listbox value={selectedPerson} onChange={setSelectedPerson}>
<Listbox.Button>{selectedPerson.name}</Listbox.Button>
<Listbox.Options>
{people.map(person => (
<Listbox.Option key={person.id} value={person} disabled={person.unavailable}>
{person.name}
</Listbox.Option>
))}
</Listbox.Options>
</Listbox>
)
}
```
### Styling the active and selected option
This is a headless component so there are no styles included by default. Instead, the components expose useful information via [render props](https://reactjs.org/docs/render-props.html) that you can use to apply the styles you'd like to apply yourself.
To style the active `Listbox.Option` you can read the `active` render prop argument, which tells you whether or not that listbox option is the option that is currently focused via the mouse or keyboard.
To style the selected `Listbox.Option` you can read the `selected` render prop argument, which tells you whether or not that listbox option is the option that is currently the `value` passed to the `Listbox`.
> Note: An option can be both **active** and **selected** at the same time!
You can use this state to conditionally apply whatever active/focus styles you like, for instance a blue background like is typical in most operating systems. For the selected state, a checkmark is also common.
```jsx
import { useState, Fragment } from 'react'
import { Listbox } from '@headlessui/react'
import CheckmarkIcon from './CheckmarkIcon'
const people = [
{ id: 1, name: 'Durward Reynolds' },
{ id: 2, name: 'Kenton Towne' },
{ id: 3, name: 'Therese Wunsch' },
{ id: 4, name: 'Benedict Kessler' },
{ id: 5, name: 'Katelyn Rohan' },
]
function MyListbox() {
const [selectedPerson, setSelectedPerson] = useState(people[0])
return (
<Listbox value={selectedPerson} onChange={setSelectedPerson}>
<Listbox.Button>{selectedPerson.name}</Listbox.Button>
<Listbox.Options>
{people.map(person => (
/* Use the `active` state to conditionally style the active option. */
/* Use the `selected` state to conditionally style the selected option. */
<Listbox.Option as={Fragment} key={person.id} value={person}>
{({ active, selected }) => (
<li className={`${active ? 'bg-blue-500 text-white' : 'bg-white text-black'}`}>
{selected && <CheckmarkIcon />}
{person.name}
</li>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Listbox>
)
}
```
### Using a custom label
By default the `Listbox` will use the button contents as the label for screenreaders. However you can also render a custom `Listbox.Label`.
```jsx
import { useState, Fragment } from 'react'
import { Listbox } from '@headlessui/react'
import CheckmarkIcon from './CheckmarkIcon'
const people = [
{ id: 1, name: 'Durward Reynolds' },
{ id: 2, name: 'Kenton Towne' },
{ id: 3, name: 'Therese Wunsch' },
{ id: 4, name: 'Benedict Kessler' },
{ id: 5, name: 'Katelyn Rohan' },
]
function MyListbox() {
const [selectedPerson, setSelectedPerson] = useState(people[0])
return (
<Listbox value={selectedPerson} onChange={setSelectedPerson}>
<Listbox.Label>Assignee:</Listbox.Label>
<Listbox.Button>{selectedPerson.name}</Listbox.Button>
<Listbox.Options>
{people.map(person => (
<Listbox.Option as={Fragment} key={person.id} value={person}>
{person.name}
</Listbox.Option>
))}
</Listbox.Options>
</Listbox>
)
}
```
### Showing/hiding the listbox
By default, your `Listbox.Options` instance will be shown/hidden automatically based on the internal `open` state tracked within the `Listbox` component itself.
```jsx
import { useState } from 'react'
import { Listbox } from '@headlessui/react'
const people = [
{ id: 1, name: 'Durward Reynolds', unavailable: false },
{ id: 2, name: 'Kenton Towne', unavailable: false },
{ id: 3, name: 'Therese Wunsch', unavailable: false },
{ id: 4, name: 'Benedict Kessler', unavailable: true },
{ id: 5, name: 'Katelyn Rohan', unavailable: false },
]
function MyListbox() {
const [selectedPerson, setSelectedPerson] = useState(people[0])
return (
<Listbox value={selectedPerson} onChange={setSelectedPerson}>
<Listbox.Button>{selectedPerson.name}</Listbox.Button>
{/* By default, this will automatically show/hide when the Listbox.Button is pressed. */}
<Listbox.Options>
{people.map(person => (
<Listbox.Option key={person.id} value={person} disabled={person.unavailable}>
{person.name}
</Listbox.Option>
))}
</Listbox.Options>
</Listbox>
)
}
```
If you'd rather handle this yourself (perhaps because you need to add an extra wrapper element for one reason or another), you can add a `static` prop to the `Listbox.Options` instance to tell it to always render, and inspect the `open` slot prop provided by the `Listbox` to control which element is shown/hidden yourself.
```jsx
import { useState } from 'react'
import { Listbox } from '@headlessui/react'
const people = [
{ id: 1, name: 'Durward Reynolds', unavailable: false },
{ id: 2, name: 'Kenton Towne', unavailable: false },
{ id: 3, name: 'Therese Wunsch', unavailable: false },
{ id: 4, name: 'Benedict Kessler', unavailable: true },
{ id: 5, name: 'Katelyn Rohan', unavailable: false },
]
function MyListbox() {
const [selectedPerson, setSelectedPerson] = useState(people[0])
return (
<Listbox value={selectedPerson} onChange={setSelectedPerson}>
{({ open }) => (
<>
<Listbox.Button>{selectedPerson.name}</Listbox.Button>
{open && (
<div>
{/* Using `static`, `Listbox.Options` is always rendered and ignores the `open` state. */}
<Listbox.Options static>
{people.map(person => (
<Listbox.Option key={person.id} value={person} disabled={person.unavailable}>
{person.name}
</Listbox.Option>
))}
</Listbox.Options>
</div>
)}
</>
)}
</Listbox>
)
}
```
### Disabling an option
Use the `disabled` prop to disable a `Listbox.Option`. This will make it unselectable via keyboard navigation, and it will be skipped when pressing the up/down arrows.
```jsx
import { useState } from 'react'
import { Listbox } from '@headlessui/react'
const people = [
{ id: 1, name: 'Durward Reynolds', unavailable: false },
{ id: 2, name: 'Kenton Towne', unavailable: false },
{ id: 3, name: 'Therese Wunsch', unavailable: false },
{ id: 4, name: 'Benedict Kessler', unavailable: true },
{ id: 5, name: 'Katelyn Rohan', unavailable: false },
]
function MyListbox() {
const [selectedPerson, setSelectedPerson] = useState(people[0])
return (
<Listbox value={selectedPerson} onChange={setSelectedPerson}>
<Listbox.Button>{selectedPerson.name}</Listbox.Button>
<Listbox.Options>
{people.map(person => (
/* Disabled options will be skipped by keyboard navigation. */
<Listbox.Option key={person.id} value={person} disabled={person.unavailable}>
<span className={person.unavailable ? 'opacity-75' : ''}>{person.name}</span>
</Listbox.Option>
))}
</Listbox.Options>
</Listbox>
)
}
```
### Transitions
To animate the opening/closing of the listbox panel, use the provided `Transition` component. All you need to do is mark your `Listbox.Options` as `static`, wrap it in a `<Transition>`, and the transition will be applied automatically.
```jsx
import { useState } from 'react'
import { Listbox, Transition } from '@headlessui/react'
const people = [
{ id: 1, name: 'Durward Reynolds', unavailable: false },
{ id: 2, name: 'Kenton Towne', unavailable: false },
{ id: 3, name: 'Therese Wunsch', unavailable: false },
{ id: 4, name: 'Benedict Kessler', unavailable: true },
{ id: 5, name: 'Katelyn Rohan', unavailable: false },
]
function MyListbox() {
const [selectedPerson, setSelectedPerson] = useState(people[0])
return (
<Listbox value={selectedPerson} onChange={setSelectedPerson}>
{({ open }) => (
<>
<Listbox.Button>{selectedPerson.name}</Listbox.Button>
{/* Use the Transition + open render prop argument to add transitions. */}
<Transition
show={open}
enter="transition duration-100 ease-out"
enterFrom="transform scale-95 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<Listbox.Options static>
{people.map(person => (
<Listbox.Option key={person.id} value={person} disabled={person.unavailable}>
{person.name}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</>
)}
</Listbox>
)
}
```
### Rendering a different element for a component
By default, the `Listbox` and its subcomponents each render a default element that is sensible for that component.
For example, `Listbox.Label` renders a `label` by default, `Listbox.Button` renders a `button` by default, `Listbox.Options` renders a `ul` and `Listbox.Option` renders a `li` by default. `Listbox` interestingly _does not render an extra element_, and instead renders its children directly by default.
This is easy to change using the `as` prop, which exists on every component.
```jsx
import { useState } from 'react'
import { Listbox } from '@headlessui/react'
const people = [
{ id: 1, name: 'Durward Reynolds' },
{ id: 2, name: 'Kenton Towne' },
{ id: 3, name: 'Therese Wunsch' },
{ id: 4, name: 'Benedict Kessler' },
{ id: 5, name: 'Katelyn Rohan' },
]
function MyListbox() {
const [selectedPerson, setSelectedPerson] = useState(people[0])
return (
<Listbox as="div" value={selectedPerson} onChange={setSelectedPerson}>
<Listbox.Button>{selectedPerson.name}</Listbox.Button>
<Listbox.Options as="div">
{people.map(person => (
<Listbox.Option as="span" key={person.id} value={person}>
{person.name}
</Listbox.Option>
))}
</Listbox.Options>
</Listbox>
)
}
```
To tell an element to render its children directly with no wrapper element, use `as={React.Fragment}`.
```jsx
import { useState, Fragment } from 'react'
import { Listbox } from '@headlessui/react'
const people = [
{ id: 1, name: 'Durward Reynolds' },
{ id: 2, name: 'Kenton Towne' },
{ id: 3, name: 'Therese Wunsch' },
{ id: 4, name: 'Benedict Kessler' },
{ id: 5, name: 'Katelyn Rohan' },
]
function MyListbox() {
const [selectedPerson, setSelectedPerson] = useState(people[0])
return (
<Listbox value={selectedPerson} onChange={setSelectedPerson}>
<Listbox.Button as={Fragment}>{selectedPerson.name}</Listbox.Button>
<Listbox.Options>
{people.map(person => (
<Listbox.Option key={person.id} value={person}>
{person.name}
</Listbox.Option>
))}
</Listbox.Options>
</Listbox>
)
}
```
### Component API
#### Listbox
```jsx
import { useState } from 'react'
import { Listbox } from '@headlessui/react'
const people = [
{ id: 1, name: 'Durward Reynolds' },
{ id: 2, name: 'Kenton Towne' },
{ id: 3, name: 'Therese Wunsch' },
{ id: 4, name: 'Benedict Kessler' },
{ id: 5, name: 'Katelyn Rohan' },
]
function MyListbox() {
const [selectedPerson, setSelectedPerson] = useState(people[0])
return (
<Listbox value={selectedPerson} onChange={setSelectedPerson}>
<Listbox.Button>{selectedPerson.name}</Listbox.Button>
<Listbox.Options>
{people.map(person => (
<Listbox.Option key={person.id} value={person}>
{person.name}
</Listbox.Option>
))}
</Listbox.Options>
</Listbox>
)
}
```
##### Props
| Prop | Type | Default | Description |
| ---------- | ------------------- | --------------------------------------- | -------------------------------------------------------- |
| `as` | String \| Component | `React.Fragment` _(no wrapper element_) | The element or component the `Listbox` should render as. |
| `value` | `T` | | The selected value. |
| `onChange` | `(value: T): void` | | The function to call when a new option is selected. |
##### Render prop object
| Prop | Type | Description |
| ------ | ------- | ----------------------------------- |
| `open` | Boolean | Whether or not the listbox is open. |
#### Listbox.Button
```jsx
<Listbox.Button>
{({ open }) => (
<>
<span>More options</span>
<ChevronRightIcon className={`${open ? 'transform rotate-90' : ''}`} />
</>
)}
</Listbox.Button>
```
##### Props
| Prop | Type | Default | Description |
| ---- | ------------------- | -------- | --------------------------------------------------------------- |
| `as` | String \| Component | `button` | The element or component the `Listbox.Button` should render as. |
##### Render prop object
| Prop | Type | Description |
| ------ | ------- | ----------------------------------- |
| `open` | Boolean | Whether or not the listbox is open. |
#### Listbox.Label
```jsx
<Listbox.Label>Enable notifications</Listbox.Label>
```
##### Props
| Prop | Type | Default | Description |
| ---- | ------------------- | ------- | -------------------------------------------------------------- |
| `as` | String \| Component | `label` | The element or component the `Listbox.Label` should render as. |
#### Listbox.Options
```jsx
<Listbox.Options>
<Listbox.Option value="option-a">{/* ... */}></Listbox.Option>
{/* ... */}>
</Listbox.Options>
```
##### Props
| Prop | Type | Default | Description |
| --------- | ------------------- | ------- | --------------------------------------------------------------------------------- |
| `as` | String \| Component | `ul` | The element or component the `Listbox.Options` should render as. |
| `static` | Boolean | `false` | Whether the element should ignore the internally managed open/closed state. |
| `unmount` | Boolean | `true` | Whether the element should be unmounted or hidden based on the open/closed state. |
> **note**: `static` and `unmount` can not be used at the same time. You will get a TypeScript error if you try to do it.
##### Render prop object
| Prop | Type | Description |
| ------ | ------- | ----------------------------------- |
| `open` | Boolean | Whether or not the listbox is open. |
#### Listbox.Option
```jsx
<Listbox.Option value="option-a">Option A</Listbox.Option>
```
##### Props
| Prop | Type | Default | Description |
| ---------- | ------------------- | ------- | --------------------------------------------------------------------------------------- |
| `as` | String \| Component | `li` | The element or component the `Listbox.Option` should render as. |
| `value` | `T` | | The option value. |
| `disabled` | Boolean | `false` | Whether or not the option should be disabled for keyboard navigation and ARIA purposes. |
##### Render prop object
| Prop | Type | Description |
| ---------- | ------- | ------------------------------------------------------------------------------------ |
| `active` | Boolean | Whether or not the option is the active/focused option in the list. |
| `selected` | Boolean | Whether or not the option is the selected option in the list. |
| `disabled` | Boolean | Whether or not the option is the disabled for keyboard navigation and ARIA purposes. |
## Switch (Toggle)
[View live demo on CodeSandbox](https://codesandbox.io/s/headlessuireact-switch-example-y40i1?file=/src/App.js)
The `Switch` component and related child components are used to quickly build custom switch/toggle components that are fully accessible out of the box, including correct ARIA attribute management and robust keyboard support.
- [Basic example](#basic-example-3)
- [Using a custom label](#using-a-custom-label-1)
- [Component API](#component-api-3)
### Basic example
Switches are built using the `Switch` component. Optionally you can also use the `Switch.Group` and `Switch.Label` components.
```jsx
import { useState } from 'react'
import { Switch } from '@headlessui/react'
function NotificationsToggle() {
const [enabled, setEnabled] = useState(false)
return (
<Switch
checked={enabled}
onChange={setEnabled}
className={`${
enabled ? 'bg-blue-600' : 'bg-gray-200'
} relative inline-flex h-6 rounded-full w-8`}
>
<span className="sr-only">Enable notifications</span>
<span
className={`${
enabled ? 'translate-x-4' : 'translate-x-0'
} inline-block w-4 h-4 transform bg-white rounded-full`}
/>
</Switch>
)
}
```
### Using a custom label
By default the `Switch` will use the contents as the label for screenreaders. If you need more control, you can render a `Switch.Label` outside of the `Switch`, as long as both the switch and label are within a parent `Switch.Group`.
Clicking the label will toggle the switch state, like you'd expect from a native checkbox.
```jsx
import { useState } from 'react'
import { Switch } from '@headlessui/react'
function NotificationsToggle() {
const [enabled, setEnabled] = useState(false)
return (
<Switch.Group>
<Switch.Label>Enable notifications</Switch.Label>
<Switch
checked={enabled}
onChange={setEnabled}
className={`${
enabled ? 'bg-blue-600' : 'bg-gray-200'
} relative inline-flex h-6 rounded-full w-8`}
>
<span
className={`${
enabled ? 'translate-x-4' : 'translate-x-0'
} inline-block w-4 h-4 transform bg-white rounded-full`}
/>
</Switch>
</Switch.Group>
)
}
```
### Component API
#### Switch
```jsx
<Switch checked={checkedState} onChange={setCheckedState}>
<span className="sr-only">Enable notifications</span>
{/* ... */}
</Switch>
```
##### Props
| Prop | Type | Default | Description |
| ---------- | ------------------------ | -------- | ------------------------------------------------------- |
| `as` | String \| Component | `button` | The element or component the `Switch` should render as. |
| `checked` | Boolean | | Whether or not the switch is checked. |
| `onChange` | `(value: boolean): void` | | The function to call when the switch is toggled. |
##### Render prop object
| Prop | Type | Description |
| --------- | ------- | ------------------------------------- |
| `checked` | Boolean | Whether or not the switch is checked. |
#### Switch.Label
```jsx
<Switch.Group>
<Switch.Label>Enable notifications</Switch.Label>
<Switch checked={enabled} onChange={setEnabled} className="...">
{/* ... */}
</Switch>
</Switch.Group>
```
##### Props
| Prop | Type | Default | Description |
| ---- | ------------------- | ------- | ------------------------------------------------------------- |
| `as` | String \| Component | `label` | The element or component the `Switch.Label` should render as. |
#### Switch.Group
```jsx
<Switch.Group>
<Switch.Label>Enable notifications</Switch.Label>
<Switch checked={enabled} onChange={setEnabled} className="...">
{/* ... */}
</Switch>
</Switch.Group>
```
##### Props
| Prop | Type | Default | Description |
| ---- | ------------------- | --------------------------------------- | ------------------------------------------------------------- |
| `as` | String \| Component | `React.Fragment` _(no wrapper element)_ | The element or component the `Switch.Group` should render as. |
dist/headlessui.cjs.development.js

Sorry, the diff of this file is too big to display

dist/headlessui.cjs.development.js.map

Sorry, the diff of this file is not supported yet

dist/headlessui.cjs.production.min.js.map

Sorry, the diff of this file is not supported yet

dist/headlessui.esm.js

Sorry, the diff of this file is too big to display

dist/headlessui.esm.js.map

Sorry, the diff of this file is not supported yet

dist/headlessui.umd.development.js

Sorry, the diff of this file is too big to display

dist/headlessui.umd.development.js.map

Sorry, the diff of this file is not supported yet

dist/headlessui.umd.production.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc