@headlessui/react - npm Package Compare versions

Comparing version 0.0.0-insiders.1e14d51 to 0.0.0-insiders.1e9a3f1

dist/components/combobox/combobox.d.ts

@@ -1,81 +0,136 @@
-import React, { Ref } from 'react';
-import { Props } from '../../types';
-import { PropsForFeatures } from '../../utils/render';
-interface ComboboxRenderPropArg<T> {
+import React, { type ElementType, type Ref } from 'react';
+import { type ByComparator } from '../../hooks/use-by-comparator.js';
+import { type TransitionData } from '../../hooks/use-transition-data.js';
+import { type AnchorProps } from '../../internal/floating.js';
+import type { EnsureArray, Props } from '../../types.js';
+import { type HasDisplayName, type PropsForFeatures, type RefProp } from '../../utils/render.js';
+import { type _internal_ComponentLabel } from '../label/label.js';
+declare let DEFAULT_COMBOBOX_TAG: React.ExoticComponent<{
+    children?: React.ReactNode;
+}>;
+type ComboboxRenderPropArg<TValue, TActive = TValue> = {
     open: boolean;
     disabled: boolean;
     activeIndex: number | null;
-    activeOption: T | null;
-}
-interface InputRenderPropArg {
+    activeOption: TActive | null;
+    value: TValue;
+};
+export type ComboboxProps<TValue, TMultiple extends boolean | undefined, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG> = Props<TTag, ComboboxRenderPropArg<NoInfer<TValue>>, 'value' | 'defaultValue' | 'multiple' | 'onChange' | 'by', {
+    value?: TMultiple extends true ? EnsureArray<TValue> : TValue;
+    defaultValue?: TMultiple extends true ? EnsureArray<NoInfer<TValue>> : NoInfer<TValue>;
+    onChange?(value: TMultiple extends true ? EnsureArray<NoInfer<TValue>> : NoInfer<TValue> | null): void;
+    by?: ByComparator<TMultiple extends true ? EnsureArray<NoInfer<TValue>>[number] : NoInfer<TValue>>;
+    /** @deprecated The `<Combobox />` is now nullable default */
+    nullable?: boolean;
+    multiple?: TMultiple;
+    disabled?: boolean;
+    form?: string;
+    name?: string;
+    immediate?: boolean;
+    virtual?: {
+        options: NoInfer<TValue>[];
+        disabled?: (value: NoInfer<TValue>) => boolean;
+    } | null;
+    onClose?(): void;
+    __demoMode?: boolean;
+}>;
+declare function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, boolean | undefined, TTag>, ref: Ref<HTMLElement>): React.JSX.Element;
+declare let DEFAULT_INPUT_TAG: "input";
+type InputRenderPropArg = {
     open: boolean;
     disabled: boolean;
-}
-declare type InputPropsWeControl = 'id' | 'role' | 'type' | 'aria-labelledby' | 'aria-expanded' | 'aria-activedescendant' | 'onKeyDown' | 'onChange' | 'displayValue';
-interface ButtonRenderPropArg {
+    hover: boolean;
+    focus: boolean;
+    autofocus: boolean;
+};
+type InputPropsWeControl = 'aria-activedescendant' | 'aria-autocomplete' | 'aria-controls' | 'aria-expanded' | 'aria-labelledby' | 'disabled' | 'role';
+export type ComboboxInputProps<TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TType = string> = Props<TTag, InputRenderPropArg, InputPropsWeControl, {
+    defaultValue?: TType;
+    disabled?: boolean;
+    displayValue?(item: TType): string;
+    onChange?(event: React.ChangeEvent<HTMLInputElement>): void;
+    autoFocus?: boolean;
+}>;
+declare function InputFn<TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TType = Parameters<typeof ComboboxRoot>[0]['value']>(props: ComboboxInputProps<TTag, TType>, ref: Ref<HTMLInputElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+declare let DEFAULT_BUTTON_TAG: "button";
+type ButtonRenderPropArg = {
     open: boolean;
+    active: boolean;
     disabled: boolean;
-}
-declare type ButtonPropsWeControl = 'id' | 'type' | 'tabIndex' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded' | 'aria-labelledby' | 'disabled' | 'onClick' | 'onKeyDown';
-interface LabelRenderPropArg {
+    value: any;
+    focus: boolean;
+    hover: boolean;
+};
+type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded' | 'aria-haspopup' | 'aria-labelledby' | 'disabled' | 'tabIndex';
+export type ComboboxButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, {
+    autoFocus?: boolean;
+    disabled?: boolean;
+}>;
+declare function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ComboboxButtonProps<TTag>, ref: Ref<HTMLButtonElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+declare let DEFAULT_OPTIONS_TAG: "div";
+type OptionsRenderPropArg = {
     open: boolean;
-    disabled: boolean;
-}
-declare type LabelPropsWeControl = 'id' | 'ref' | 'onClick';
-interface OptionsRenderPropArg {
-    open: boolean;
-}
-declare type OptionsPropsWeControl = 'aria-activedescendant' | 'aria-labelledby' | 'hold' | 'id' | 'onKeyDown' | 'role' | 'tabIndex';
+    option: unknown;
+} & TransitionData;
+type OptionsPropsWeControl = 'aria-labelledby' | 'aria-multiselectable' | 'role' | 'tabIndex';
 declare let OptionsRenderFeatures: number;
-interface OptionRenderPropArg {
+export type ComboboxOptionsProps<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl, PropsForFeatures<typeof OptionsRenderFeatures> & {
+    hold?: boolean;
+    anchor?: AnchorProps;
+    portal?: boolean;
+    modal?: boolean;
+    transition?: boolean;
+}>;
+declare function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ComboboxOptionsProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element;
+declare let DEFAULT_OPTION_TAG: "div";
+type OptionRenderPropArg = {
+    focus: boolean;
+    /** @deprecated use `focus` instead */
     active: boolean;
     selected: boolean;
     disabled: boolean;
+};
+type OptionPropsWeControl = 'role' | 'tabIndex' | 'aria-disabled' | 'aria-selected';
+export type ComboboxOptionProps<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, {
+    disabled?: boolean;
+    value: TType;
+    order?: number;
+}>;
+declare function OptionFn<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = Parameters<typeof ComboboxRoot>[0]['value']>(props: ComboboxOptionProps<TTag, TType>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export interface _internal_ComponentCombobox extends HasDisplayName {
+    <TValue, TMultiple extends boolean | undefined = false, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, TMultiple, TTag> & RefProp<typeof ComboboxFn>): JSX.Element;
 }
-declare type ComboboxOptionPropsWeControl = 'id' | 'role' | 'tabIndex' | 'aria-disabled' | 'aria-selected' | 'onPointerLeave' | 'onMouseLeave' | 'onPointerMove' | 'onMouseMove';
-export declare let Combobox: (<TTag extends React.ElementType<any> = React.ExoticComponent<{
-    children?: React.ReactNode;
-}>, TType = string, TActualType = TType extends (infer U)[] ? U : TType>(props: Props<TTag, ComboboxRenderPropArg<TType>, "value" | "name" | "disabled" | "onChange" | "nullable" | "multiple"> & {
-    value: TType;
-    onChange(value: TType): void;
-    disabled?: boolean | undefined;
-    __demoMode?: boolean | undefined;
-    name?: string | undefined;
-    nullable?: boolean | undefined;
-    multiple?: boolean | undefined;
-}, ref: React.Ref<TTag>) => JSX.Element) & {
-    displayName: string;
-} & {
-    Input: (<TTag_1 extends React.ElementType<any> = "input", TType_1 = unknown>(props: Props<TTag_1, InputRenderPropArg, InputPropsWeControl> & {
-        displayValue?(item: TType_1): string;
-        onChange(event: React.ChangeEvent<HTMLInputElement>): void;
-    }, ref: Ref<HTMLInputElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
-    Button: (<TTag_2 extends React.ElementType<any> = "button">(props: Props<TTag_2, ButtonRenderPropArg, ButtonPropsWeControl>, ref: Ref<HTMLButtonElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
-    Label: (<TTag_3 extends React.ElementType<any> = "label">(props: Props<TTag_3, LabelRenderPropArg, LabelPropsWeControl>, ref: Ref<HTMLLabelElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
-    Options: (<TTag_4 extends React.ElementType<any> = "ul">(props: Props<TTag_4, OptionsRenderPropArg, OptionsPropsWeControl> & (({
-        static?: undefined;
-    } & {
-        unmount?: boolean | undefined;
-    }) | ({
-        unmount?: undefined;
-    } & {
-        static?: boolean | undefined;
-    })) & {
-        hold?: boolean | undefined;
-    }, ref: Ref<HTMLUListElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
-    Option: (<TTag_5 extends React.ElementType<any> = "li", TType_2 = unknown>(props: Props<TTag_5, OptionRenderPropArg, "value" | ComboboxOptionPropsWeControl> & {
-        disabled?: boolean | undefined;
-        value: TType_2;
-    }, ref: Ref<HTMLLIElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
+export interface _internal_ComponentComboboxButton extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ComboboxButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element;
+}
+export interface _internal_ComponentComboboxInput extends HasDisplayName {
+    <TType, TTag extends ElementType = typeof DEFAULT_INPUT_TAG>(props: ComboboxInputProps<TTag, TType> & RefProp<typeof InputFn>): JSX.Element;
+}
+export interface _internal_ComponentComboboxLabel extends _internal_ComponentLabel {
+}
+export interface _internal_ComponentComboboxOptions extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ComboboxOptionsProps<TTag> & RefProp<typeof OptionsFn>): JSX.Element;
+}
+export interface _internal_ComponentComboboxOption extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = Parameters<typeof ComboboxRoot>[0]['value']>(props: ComboboxOptionProps<TTag, TType> & RefProp<typeof OptionFn>): JSX.Element;
+}
+declare let ComboboxRoot: _internal_ComponentCombobox;
+export declare let ComboboxButton: _internal_ComponentComboboxButton;
+export declare let ComboboxInput: _internal_ComponentComboboxInput;
+/** @deprecated use `<Label>` instead of `<ComboboxLabel>` */
+export declare let ComboboxLabel: _internal_ComponentComboboxLabel;
+export declare let ComboboxOptions: _internal_ComponentComboboxOptions;
+export declare let ComboboxOption: _internal_ComponentComboboxOption;
+export declare let Combobox: _internal_ComponentCombobox & {
+    /** @deprecated use `<ComboboxInput>` instead of `<Combobox.Input>` */
+    Input: _internal_ComponentComboboxInput;
+    /** @deprecated use `<ComboboxButton>` instead of `<Combobox.Button>` */
+    Button: _internal_ComponentComboboxButton;
+    /** @deprecated use `<Label>` instead of `<Combobox.Label>` */
+    Label: _internal_ComponentComboboxLabel;
+    /** @deprecated use `<ComboboxOptions>` instead of `<Combobox.Options>` */
+    Options: _internal_ComponentComboboxOptions;
+    /** @deprecated use `<ComboboxOption>` instead of `<Combobox.Option>` */
+    Option: _internal_ComponentComboboxOption;
 };
 export {};

dist/components/combobox/combobox.js

@@ -1,1 +0,1 @@
-import B,{Fragment as pe,createContext as $,createRef as K,useCallback as A,useContext as q,useMemo as D,useReducer as se,useRef as L}from"react";import{useDisposables as ne}from"../../hooks/use-disposables.js";import{useId as N}from"../../hooks/use-id.js";import{useIsoMorphicEffect as I}from"../../hooks/use-iso-morphic-effect.js";import{useComputed as X}from"../../hooks/use-computed.js";import{useSyncRefs as j}from"../../hooks/use-sync-refs.js";import{Features as re,forwardRefWithAs as k,render as V,compact as be}from"../../utils/render.js";import{match as E}from"../../utils/match.js";import{disposables as J}from"../../utils/disposables.js";import{Keys as P}from"../keyboard.js";import{Focus as C,calculateActiveIndex as de}from"../../utils/calculate-active-index.js";import{isDisabledReactIssue7711 as ce}from"../../utils/bugs.js";import{useOutsideClick as fe}from"../../hooks/use-outside-click.js";import{useOpenClosed as me,State as z,OpenClosedProvider as xe}from"../../internal/open-closed.js";import{useResolveButtonType as Te}from"../../hooks/use-resolve-button-type.js";import{useLatestValue as Oe}from"../../hooks/use-latest-value.js";import{useTreeWalker as ge}from"../../hooks/use-tree-walker.js";import{sortByDomNode as Ce}from"../../utils/focus-management.js";import{VisuallyHidden as Re}from"../../internal/visually-hidden.js";import{objectToFormEntries as ve}from"../../utils/form.js";var ye=(n=>(n[n.Open=0]="Open",n[n.Closed=1]="Closed",n))(ye||{}),Pe=(n=>(n[n.Single=0]="Single",n[n.Multi=1]="Multi",n))(Pe||{}),Se=(n=>(n[n.Pointer=0]="Pointer",n[n.Other=1]="Other",n))(Se||{}),Ae=(i=>(i[i.OpenCombobox=0]="OpenCombobox",i[i.CloseCombobox=1]="CloseCombobox",i[i.SetDisabled=2]="SetDisabled",i[i.GoToOption=3]="GoToOption",i[i.RegisterOption=4]="RegisterOption",i[i.UnregisterOption=5]="UnregisterOption",i))(Ae||{});function Q(o,a=n=>n){let n=o.activeOptionIndex!==null?o.options[o.activeOptionIndex]:null,e=Ce(a(o.options.slice()),t=>t.dataRef.current.domRef.current),l=n?e.indexOf(n):null;return l===-1&&(l=null),{options:e,activeOptionIndex:l}}let Ie={[1](o){return o.disabled||o.comboboxState===1?o:{...o,activeOptionIndex:null,comboboxState:1}},[0](o){if(o.disabled||o.comboboxState===0)return o;let a=o.activeOptionIndex,{value:n,mode:e}=o.comboboxPropsRef.current,l=o.options.findIndex(t=>{let i=t.dataRef.current.value;return E(e,{[1]:()=>n.includes(i),[0]:()=>n===i})});return l!==-1&&(a=l),{...o,comboboxState:0,activeOptionIndex:a}},[2](o,a){return o.disabled===a.disabled?o:{...o,disabled:a.disabled}},[3](o,a){var l;if(o.disabled||o.optionsRef.current&&!o.optionsPropsRef.current.static&&o.comboboxState===1)return o;let n=Q(o);if(n.activeOptionIndex===null){let t=n.options.findIndex(i=>!i.dataRef.current.disabled);t!==-1&&(n.activeOptionIndex=t)}let e=de(a,{resolveItems:()=>n.options,resolveActiveIndex:()=>n.activeOptionIndex,resolveId:t=>t.id,resolveDisabled:t=>t.dataRef.current.disabled});return{...o,...n,activeOptionIndex:e,activationTrigger:(l=a.trigger)!=null?l:1}},[4]:(o,a)=>{let n={id:a.id,dataRef:a.dataRef},e=Q(o,t=>[...t,n]);if(o.activeOptionIndex===null){let{value:t,mode:i}=o.comboboxPropsRef.current,r=a.dataRef.current.value;E(i,{[1]:()=>t.includes(r),[0]:()=>t===r})&&(e.activeOptionIndex=e.options.indexOf(n))}let l={...o,...e,activationTrigger:1};return o.comboboxPropsRef.current.__demoMode&&o.comboboxPropsRef.current.value===void 0&&(l.activeOptionIndex=0),l},[5]:(o,a)=>{let n=Q(o,e=>{let l=e.findIndex(t=>t.id===a.id);return l!==-1&&e.splice(l,1),e});return{...o,...n,activationTrigger:1}}},Y=$(null);Y.displayName="ComboboxContext";function U(o){let a=q(Y);if(a===null){let n=new Error(`<${o} /> is missing a parent <Combobox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(n,U),n}return a}let Z=$(null);Z.displayName="ComboboxActions";function W(){let o=q(Z);if(o===null){let a=new Error("ComboboxActions is missing a parent <Combobox /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(a,W),a}return o}let ee=$(null);ee.displayName="ComboboxData";function G(){let o=q(ee);if(o===null){let a=new Error("ComboboxData is missing a parent <Combobox /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(a,G),a}return o}function Me(o,a){return E(a.type,Ie,o,a)}let De=pe,Ee=k(function(a,n){let{name:e,value:l,onChange:t,disabled:i=!1,__demoMode:r=!1,nullable:u=!1,multiple:p=!1,...x}=a,R=L(!1),c=L({value:l,mode:p?1:0,onChange:t,nullable:u,__demoMode:r});c.current.value=l,c.current.mode=p?1:0,c.current.nullable=u;let O=L({static:!1,hold:!1}),v=L({displayValue:void 0}),S=se(Me,{comboboxState:r?0:1,comboboxPropsRef:c,optionsPropsRef:O,inputPropsRef:v,labelRef:K(),inputRef:K(),buttonRef:K(),optionsRef:K(),disabled:i,options:[],activeOptionIndex:null,activationTrigger:1}),[{comboboxState:s,options:b,activeOptionIndex:M,optionsRef:F,inputRef:y,buttonRef:_},d]=S,f=D(()=>({value:l,mode:p?1:0,get activeOptionIndex(){if(R.current&&M===null&&b.length>0){let m=b.findIndex(T=>!T.dataRef.current.disabled);if(m!==-1)return m}return M}}),[l,M,b]),g=f.activeOptionIndex;I(()=>{c.current.onChange=m=>E(f.mode,{[0](){return t(m)},[1](){let T=f.value.slice(),h=T.indexOf(m);return h===-1?T.push(m):T.splice(h,1),t(T)}})},[f,t,c,f]),I(()=>d({type:2,disabled:i}),[i]),fe([_,y,F],()=>{s===0&&d({type:1})});let H=g===null?null:b[g].dataRef.current.value,ie=D(()=>({open:s===0,disabled:i,activeIndex:g,activeOption:H}),[s,i,b,g]),w=A(()=>{var T;if(!y.current)return;let m=v.current.displayValue;typeof m=="function"?y.current.value=(T=m(l))!=null?T:"":typeof l=="string"?y.current.value=l:y.current.value=""},[l,y,v]),oe=A(m=>{let T=b.find(ue=>ue.id===m);if(!T)return;let{dataRef:h}=T;c.current.onChange(h.current.value),w()},[b,c,y]),te=A(()=>{if(g!==null){let{dataRef:m,id:T}=b[g];c.current.onChange(m.current.value),w(),d({type:3,focus:C.Specific,id:T})}},[g,b,c,y]),ae=D(()=>({selectOption:oe,selectActiveOption:te,openCombobox(){d({type:0}),R.current=!0},closeCombobox(){d({type:1}),R.current=!1},goToOption(m,T,h){return R.current=!1,m===C.Specific?d({type:3,focus:C.Specific,id:T,trigger:h}):d({type:3,focus:m,trigger:h})},registerOption(m,T){return d({type:4,id:m,dataRef:T}),()=>d({type:5,id:m})}}),[oe,te,d]);I(()=>{s===1&&w()},[w,s]),I(w,[w]);let le=n===null?{}:{ref:n};return B.createElement(Z.Provider,{value:ae},B.createElement(ee.Provider,{value:f},B.createElement(Y.Provider,{value:S},B.createElement(xe,{value:E(s,{[0]:z.Open,[1]:z.Closed})},e!=null&&l!=null&&ve({[e]:l}).map(([m,T])=>B.createElement(Re,{...be({key:m,as:"input",type:"hidden",hidden:!0,readOnly:!0,name:m,value:T})})),V({ourProps:le,theirProps:x,slot:ie,defaultTag:De,name:"Combobox"})))))}),he="input",Le=k(function(a,n){var y,_;let{value:e,onChange:l,displayValue:t,...i}=a,[r]=U("Combobox.Input"),u=G(),p=W(),x=j(r.inputRef,n),R=r.inputPropsRef,c=`headlessui-combobox-input-${N()}`,O=ne(),v=Oe(l);I(()=>{R.current.displayValue=t},[t,R]);let S=A(d=>{switch(d.key){case P.Backspace:case P.Delete:if(u.mode!==0||!r.comboboxPropsRef.current.nullable)return;let f=d.currentTarget;O.requestAnimationFrame(()=>{f.value===""&&(r.comboboxPropsRef.current.onChange(null),r.optionsRef.current&&(r.optionsRef.current.scrollTop=0),p.goToOption(C.Nothing))});break;case P.Enter:if(r.comboboxState!==0)return;if(d.preventDefault(),d.stopPropagation(),u.activeOptionIndex===null){p.closeCombobox();return}p.selectActiveOption(),u.mode===0&&p.closeCombobox();break;case P.ArrowDown:return d.preventDefault(),d.stopPropagation(),E(r.comboboxState,{[0]:()=>{p.goToOption(C.Next)},[1]:()=>{p.openCombobox(),O.nextFrame(()=>{u.value||p.goToOption(C.Next)})}});case P.ArrowUp:return d.preventDefault(),d.stopPropagation(),E(r.comboboxState,{[0]:()=>{p.goToOption(C.Previous)},[1]:()=>{p.openCombobox(),O.nextFrame(()=>{u.value||p.goToOption(C.Last)})}});case P.Home:case P.PageUp:return d.preventDefault(),d.stopPropagation(),p.goToOption(C.First);case P.End:case P.PageDown:return d.preventDefault(),d.stopPropagation(),p.goToOption(C.Last);case P.Escape:return d.preventDefault(),r.optionsRef.current&&!r.optionsPropsRef.current.static&&d.stopPropagation(),p.closeCombobox();case P.Tab:p.selectActiveOption(),p.closeCombobox();break}},[O,r,p,u]),s=A(d=>{var f;p.openCombobox(),(f=v.current)==null||f.call(v,d)},[p,v]),b=X(()=>{if(!!r.labelRef.current)return[r.labelRef.current.id].join(" ")},[r.labelRef.current]),M=D(()=>({open:r.comboboxState===0,disabled:r.disabled}),[r]),F={ref:x,id:c,role:"combobox",type:"text","aria-controls":(y=r.optionsRef.current)==null?void 0:y.id,"aria-expanded":r.disabled?void 0:r.comboboxState===0,"aria-activedescendant":u.activeOptionIndex===null||(_=r.options[u.activeOptionIndex])==null?void 0:_.id,"aria-multiselectable":u.mode===1?!0:void 0,"aria-labelledby":b,disabled:r.disabled,onKeyDown:S,onChange:s};return V({ourProps:F,theirProps:i,slot:M,defaultTag:he,name:"Combobox.Input"})}),Fe="button",_e=k(function(a,n){var S;let[e]=U("Combobox.Button"),l=G(),t=W(),i=j(e.buttonRef,n),r=`headlessui-combobox-button-${N()}`,u=ne(),p=A(s=>{switch(s.key){case P.ArrowDown:return s.preventDefault(),s.stopPropagation(),e.comboboxState===1&&(t.openCombobox(),u.nextFrame(()=>{l.value||t.goToOption(C.First)})),u.nextFrame(()=>{var b;return(b=e.inputRef.current)==null?void 0:b.focus({preventScroll:!0})});case P.ArrowUp:return s.preventDefault(),s.stopPropagation(),e.comboboxState===1&&(t.openCombobox(),u.nextFrame(()=>{l.value||t.goToOption(C.Last)})),u.nextFrame(()=>{var b;return(b=e.inputRef.current)==null?void 0:b.focus({preventScroll:!0})});case P.Escape:return s.preventDefault(),e.optionsRef.current&&!e.optionsPropsRef.current.static&&s.stopPropagation(),t.closeCombobox(),u.nextFrame(()=>{var b;return(b=e.inputRef.current)==null?void 0:b.focus({preventScroll:!0})});default:return}},[u,e,t,l]),x=A(s=>{if(ce(s.currentTarget))return s.preventDefault();e.comboboxState===0?t.closeCombobox():(s.preventDefault(),t.openCombobox()),u.nextFrame(()=>{var b;return(b=e.inputRef.current)==null?void 0:b.focus({preventScroll:!0})})},[t,u,e]),R=X(()=>{if(!!e.labelRef.current)return[e.labelRef.current.id,r].join(" ")},[e.labelRef.current,r]),c=D(()=>({open:e.comboboxState===0,disabled:e.disabled}),[e]),O=a,v={ref:i,id:r,type:Te(a,e.buttonRef),tabIndex:-1,"aria-haspopup":!0,"aria-controls":(S=e.optionsRef.current)==null?void 0:S.id,"aria-expanded":e.disabled?void 0:e.comboboxState===0,"aria-labelledby":R,disabled:e.disabled,onClick:x,onKeyDown:p};return V({ourProps:v,theirProps:O,slot:c,defaultTag:Fe,name:"Combobox.Button"})}),we="label",ke=k(function(a,n){let[e]=U("Combobox.Label"),l=`headlessui-combobox-label-${N()}`,t=j(e.labelRef,n),i=A(()=>{var x;return(x=e.inputRef.current)==null?void 0:x.focus({preventScroll:!0})},[e.inputRef]),r=D(()=>({open:e.comboboxState===0,disabled:e.disabled}),[e]);return V({ourProps:{ref:t,id:l,onClick:i},theirProps:a,slot:r,defaultTag:we,name:"Combobox.Label"})}),Ve="ul",Ue=re.RenderStrategy|re.Static,Be=k(function(a,n){var S;let{hold:e=!1,...l}=a,[t]=U("Combobox.Options"),i=G(),{optionsPropsRef:r}=t,u=j(t.optionsRef,n),p=`headlessui-combobox-options-${N()}`,x=me(),R=(()=>x!==null?x===z.Open:t.comboboxState===0)();I(()=>{var s;r.current.static=(s=a.static)!=null?s:!1},[r,a.static]),I(()=>{r.current.hold=e},[e,r]),ge({container:t.optionsRef.current,enabled:t.comboboxState===0,accept(s){return s.getAttribute("role")==="option"?NodeFilter.FILTER_REJECT:s.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(s){s.setAttribute("role","none")}});let c=X(()=>{var s,b,M;return(M=(s=t.labelRef.current)==null?void 0:s.id)!=null?M:(b=t.buttonRef.current)==null?void 0:b.id},[t.labelRef.current,t.buttonRef.current]),O=D(()=>({open:t.comboboxState===0}),[t]),v={"aria-activedescendant":i.activeOptionIndex===null||(S=t.options[i.activeOptionIndex])==null?void 0:S.id,"aria-labelledby":c,role:"listbox",id:p,ref:u};return V({ourProps:v,theirProps:l,slot:O,defaultTag:Ve,features:Ue,visible:R,name:"Combobox.Options"})}),Ne="li",je=k(function(a,n){let{disabled:e=!1,value:l,...t}=a,[i]=U("Combobox.Option"),r=G(),u=W(),p=`headlessui-combobox-option-${N()}`,x=r.activeOptionIndex!==null?i.options[r.activeOptionIndex].id===p:!1,R=E(r.mode,{[1]:()=>r.value.includes(l),[0]:()=>r.value===l}),c=L(null),O=L({disabled:e,value:l,domRef:c}),v=j(n,c);I(()=>{O.current.disabled=e},[O,e]),I(()=>{O.current.value=l},[O,l]),I(()=>{var f,g;O.current.textValue=(g=(f=c.current)==null?void 0:f.textContent)==null?void 0:g.toLowerCase()},[O,c]);let S=A(()=>u.selectOption(p),[u,p]);I(()=>u.registerOption(p,O),[O,p]);let s=L(!i.comboboxPropsRef.current.__demoMode);I(()=>{if(!i.comboboxPropsRef.current.__demoMode)return;let f=J();return f.requestAnimationFrame(()=>{s.current=!0}),f.dispose},[]),I(()=>{if(i.comboboxState!==0||!x||!s.current||i.activationTrigger===0)return;let f=J();return f.requestAnimationFrame(()=>{var g,H;(H=(g=c.current)==null?void 0:g.scrollIntoView)==null||H.call(g,{block:"nearest"})}),f.dispose},[c,x,i.comboboxState,i.activationTrigger,r.activeOptionIndex]);let b=A(f=>{if(e)return f.preventDefault();S(),r.mode===0&&(u.closeCombobox(),J().nextFrame(()=>{var g;return(g=i.inputRef.current)==null?void 0:g.focus({preventScroll:!0})}))},[u,i.inputRef,e,S]),M=A(()=>{if(e)return u.goToOption(C.Nothing);u.goToOption(C.Specific,p)},[e,p,u]),F=A(()=>{e||x||u.goToOption(C.Specific,p,0)},[e,x,p,u]),y=A(()=>{e||!x||i.optionsPropsRef.current.hold||u.goToOption(C.Nothing)},[e,x,u,i.comboboxState,i.comboboxPropsRef]),_=D(()=>({active:x,selected:R,disabled:e}),[x,R,e]);return V({ourProps:{id:p,ref:v,role:"option",tabIndex:e===!0?void 0:-1,"aria-disabled":e===!0?!0:void 0,"aria-selected":R===!0?!0:void 0,disabled:void 0,onClick:b,onFocus:M,onPointerMove:F,onMouseMove:F,onPointerLeave:y,onMouseLeave:y},theirProps:t,slot:_,defaultTag:Ne,name:"Combobox.Option"})}),go=Object.assign(Ee,{Input:Le,Button:_e,Label:ke,Options:Be,Option:je});export{go as Combobox};
+"use client";import{useFocusRing as ye}from"@react-aria/focus";import{useHover as Ce}from"@react-aria/interactions";import{useVirtualizer as ke}from"@tanstack/react-virtual";import L,{Fragment as Re,createContext as be,createRef as Ne,useCallback as Se,useContext as fe,useMemo as j,useReducer as Ue,useRef as z,useState as Pe}from"react";import{flushSync as q}from"react-dom";import{useActivePress as He}from'../../hooks/use-active-press.js';import{useByComparator as Ge}from'../../hooks/use-by-comparator.js';import{useControllable as je}from'../../hooks/use-controllable.js';import{useDefaultValue as Ke}from'../../hooks/use-default-value.js';import{useDisposables as We}from'../../hooks/use-disposables.js';import{useElementSize as Ie}from'../../hooks/use-element-size.js';import{useEvent as m}from'../../hooks/use-event.js';import{useId as ue}from'../../hooks/use-id.js';import{useInertOthers as ze}from'../../hooks/use-inert-others.js';import{useIsoMorphicEffect as $}from'../../hooks/use-iso-morphic-effect.js';import{useLatestValue as $e}from'../../hooks/use-latest-value.js';import{useOnDisappear as Xe}from'../../hooks/use-on-disappear.js';import{useOutsideClick as Je}from'../../hooks/use-outside-click.js';import{useOwnerDocument as Ae}from'../../hooks/use-owner.js';import{useRefocusableInput as Ee}from'../../hooks/use-refocusable-input.js';import{useResolveButtonType as qe}from'../../hooks/use-resolve-button-type.js';import{useScrollLock as Ye}from'../../hooks/use-scroll-lock.js';import{useSyncRefs as pe}from'../../hooks/use-sync-refs.js';import{useTrackedPointer as Qe}from'../../hooks/use-tracked-pointer.js';import{useTransitionData as Ze}from'../../hooks/use-transition-data.js';import{useTreeWalker as eo}from'../../hooks/use-tree-walker.js';import{useWatch as _e}from'../../hooks/use-watch.js';import{useDisabled as oo}from'../../internal/disabled.js';import{FloatingProvider as to,useFloatingPanel as no,useFloatingPanelProps as ro,useFloatingReference as io,useResolvedAnchor as ao}from'../../internal/floating.js';import{FormFields as lo}from'../../internal/form-fields.js';import{useProvidedId as uo}from'../../internal/id.js';import{OpenClosedProvider as po,State as se,useOpenClosed as so}from'../../internal/open-closed.js';import{history as he}from'../../utils/active-element-history.js';import{isDisabledReactIssue7711 as bo}from'../../utils/bugs.js';import{Focus as A,calculateActiveIndex as De}from'../../utils/calculate-active-index.js';import{disposables as Me}from'../../utils/disposables.js';import{sortByDomNode as fo}from'../../utils/focus-management.js';import{match as Y}from'../../utils/match.js';import{isMobile as co}from'../../utils/platform.js';import{RenderFeatures as Fe,forwardRefWithAs as Z,mergeProps as ce,render as ee}from'../../utils/render.js';import{useDescribedBy as mo}from'../description/description.js';import{Keys as F}from'../keyboard.js';import{Label as To,useLabelledBy as me,useLabels as xo}from'../label/label.js';import{MouseButton as Ve}from'../mouse.js';import{Portal as go}from'../portal/portal.js';var vo=(e=>(e[e.Open=0]="Open",e[e.Closed=1]="Closed",e))(vo||{}),Oo=(e=>(e[e.Single=0]="Single",e[e.Multi=1]="Multi",e))(Oo||{}),yo=(t=>(t[t.Pointer=0]="Pointer",t[t.Focus=1]="Focus",t[t.Other=2]="Other",t))(yo||{}),Co=(l=>(l[l.OpenCombobox=0]="OpenCombobox",l[l.CloseCombobox=1]="CloseCombobox",l[l.GoToOption=2]="GoToOption",l[l.SetTyping=3]="SetTyping",l[l.RegisterOption=4]="RegisterOption",l[l.UnregisterOption=5]="UnregisterOption",l[l.SetActivationTrigger=6]="SetActivationTrigger",l[l.UpdateVirtualConfiguration=7]="UpdateVirtualConfiguration",l))(Co||{});function Te(o,r=e=>e){let e=o.activeOptionIndex!==null?o.options[o.activeOptionIndex]:null,t=r(o.options.slice()),c=t.length>0&&t[0].dataRef.current.order!==null?t.sort((f,s)=>f.dataRef.current.order-s.dataRef.current.order):fo(t,f=>f.dataRef.current.domRef.current),d=e?c.indexOf(e):null;return d===-1&&(d=null),{options:c,activeOptionIndex:d}}let Ro={[1](o){var r;return(r=o.dataRef.current)!=null&&r.disabled||o.comboboxState===1?o:{...o,activeOptionIndex:null,comboboxState:1,isTyping:!1,activationTrigger:2,__demoMode:!1}},[0](o){var r,e;if((r=o.dataRef.current)!=null&&r.disabled||o.comboboxState===0)return o;if((e=o.dataRef.current)!=null&&e.value){let t=o.dataRef.current.calculateIndex(o.dataRef.current.value);if(t!==-1)return{...o,activeOptionIndex:t,comboboxState:0,__demoMode:!1}}return{...o,comboboxState:0,__demoMode:!1}},[3](o,r){return o.isTyping===r.isTyping?o:{...o,isTyping:r.isTyping}},[2](o,r){var d,f,s,l,p;if((d=o.dataRef.current)!=null&&d.disabled||(f=o.dataRef.current)!=null&&f.optionsRef.current&&!((s=o.dataRef.current)!=null&&s.optionsPropsRef.current.static)&&o.comboboxState===1)return o;if(o.virtual){let{options:n,disabled:T}=o.virtual,R=r.focus===A.Specific?r.idx:De(r,{resolveItems:()=>n,resolveActiveIndex:()=>{var u,w;return(w=(u=o.activeOptionIndex)!=null?u:n.findIndex(D=>!T(D)))!=null?w:null},resolveDisabled:T,resolveId(){throw new Error("Function not implemented.")}}),_=(l=r.trigger)!=null?l:2;return o.activeOptionIndex===R&&o.activationTrigger===_?o:{...o,activeOptionIndex:R,activationTrigger:_,isTyping:!1,__demoMode:!1}}let e=Te(o);if(e.activeOptionIndex===null){let n=e.options.findIndex(T=>!T.dataRef.current.disabled);n!==-1&&(e.activeOptionIndex=n)}let t=r.focus===A.Specific?r.idx:De(r,{resolveItems:()=>e.options,resolveActiveIndex:()=>e.activeOptionIndex,resolveId:n=>n.id,resolveDisabled:n=>n.dataRef.current.disabled}),c=(p=r.trigger)!=null?p:2;return o.activeOptionIndex===t&&o.activationTrigger===c?o:{...o,...e,isTyping:!1,activeOptionIndex:t,activationTrigger:c,__demoMode:!1}},[4]:(o,r)=>{var d,f,s;if((d=o.dataRef.current)!=null&&d.virtual)return{...o,options:[...o.options,r.payload]};let e=r.payload,t=Te(o,l=>(l.push(e),l));o.activeOptionIndex===null&&(f=o.dataRef.current)!=null&&f.isSelected(r.payload.dataRef.current.value)&&(t.activeOptionIndex=t.options.indexOf(e));let c={...o,...t,activationTrigger:2};return(s=o.dataRef.current)!=null&&s.__demoMode&&o.dataRef.current.value===void 0&&(c.activeOptionIndex=0),c},[5]:(o,r)=>{var t;if((t=o.dataRef.current)!=null&&t.virtual)return{...o,options:o.options.filter(c=>c.id!==r.id)};let e=Te(o,c=>{let d=c.findIndex(f=>f.id===r.id);return d!==-1&&c.splice(d,1),c});return{...o,...e,activationTrigger:2}},[6]:(o,r)=>o.activationTrigger===r.trigger?o:{...o,activationTrigger:r.trigger},[7]:(o,r)=>{var t,c;if(o.virtual===null)return{...o,virtual:{options:r.options,disabled:(t=r.disabled)!=null?t:()=>!1}};if(o.virtual.options===r.options&&o.virtual.disabled===r.disabled)return o;let e=o.activeOptionIndex;if(o.activeOptionIndex!==null){let d=r.options.indexOf(o.virtual.options[o.activeOptionIndex]);d!==-1?e=d:e=null}return{...o,activeOptionIndex:e,virtual:{options:r.options,disabled:(c=r.disabled)!=null?c:()=>!1}}}},xe=be(null);xe.displayName="ComboboxActionsContext";function oe(o){let r=fe(xe);if(r===null){let e=new Error(`<${o} /> is missing a parent <Combobox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(e,oe),e}return r}let Le=be(null);function So(o){let r=Q("VirtualProvider"),{options:e}=r.virtual,[t,c]=j(()=>{let p=r.optionsRef.current;if(!p)return[0,0];let n=window.getComputedStyle(p);return[parseFloat(n.paddingBlockStart||n.paddingTop),parseFloat(n.paddingBlockEnd||n.paddingBottom)]},[r.optionsRef.current]),d=ke({scrollPaddingStart:t,scrollPaddingEnd:c,count:e.length,estimateSize(){return 40},getScrollElement(){var p;return(p=r.optionsRef.current)!=null?p:null},overscan:12}),[f,s]=Pe(0);$(()=>{s(p=>p+1)},[e]);let l=d.getVirtualItems();return l.length===0?null:L.createElement(Le.Provider,{value:d},L.createElement("div",{style:{position:"relative",width:"100%",height:`${d.getTotalSize()}px`},ref:p=>{if(p){if(typeof process!="undefined"&&process.env.JEST_WORKER_ID!==void 0||r.activationTrigger===0)return;r.activeOptionIndex!==null&&e.length>r.activeOptionIndex&&d.scrollToIndex(r.activeOptionIndex)}}},l.map(p=>{var n;return L.createElement(Re,{key:p.key},L.cloneElement((n=o.children)==null?void 0:n.call(o,{...o.slot,option:e[p.index]}),{key:`${f}-${p.key}`,"data-index":p.index,"aria-setsize":e.length,"aria-posinset":p.index+1,style:{position:"absolute",top:0,left:0,transform:`translateY(${p.start}px)`,overflowAnchor:"none"}}))})))}let de=be(null);de.displayName="ComboboxDataContext";function Q(o){let r=fe(de);if(r===null){let e=new Error(`<${o} /> is missing a parent <Combobox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(e,Q),e}return r}function Po(o,r){return Y(r.type,Ro,o,r)}let Io=Re;function Ao(o,r){var ge,ve;let e=oo(),{value:t,defaultValue:c,onChange:d,form:f,name:s,by:l,disabled:p=e||!1,onClose:n,__demoMode:T=!1,multiple:R=!1,immediate:_=!1,virtual:u=null,nullable:w,...D}=o,M=Ke(c),[v=R?[]:void 0,y]=je(t,d,M),[S,P]=Ue(Po,{dataRef:Ne(),comboboxState:T?0:1,isTyping:!1,options:[],virtual:u?{options:u.options,disabled:(ge=u.disabled)!=null?ge:()=>!1}:null,activeOptionIndex:null,activationTrigger:2,__demoMode:T}),h=z(!1),O=z({static:!1,hold:!1}),H=z(null),X=z(null),J=z(null),E=Ge(l),N=m(b=>u?l===null?u.options.indexOf(b):u.options.findIndex(g=>E(g,b)):S.options.findIndex(g=>E(g.dataRef.current.value,b))),G=Se(b=>Y(i.mode,{[1]:()=>v.some(g=>E(g,b)),[0]:()=>E(v,b)}),[v]),K=m(b=>S.activeOptionIndex===N(b)),i=j(()=>({...S,immediate:_,optionsPropsRef:O,inputRef:H,buttonRef:X,optionsRef:J,value:v,defaultValue:M,disabled:p,mode:R?1:0,virtual:u?S.virtual:null,get activeOptionIndex(){if(h.current&&S.activeOptionIndex===null&&(u?u.options.length>0:S.options.length>0)){if(u){let g=u.options.findIndex(U=>{var le,Oe;return!((Oe=(le=u.disabled)==null?void 0:le.call(u,U))!=null&&Oe)});if(g!==-1)return g}let b=S.options.findIndex(g=>!g.dataRef.current.disabled);if(b!==-1)return b}return S.activeOptionIndex},calculateIndex:N,compare:E,isSelected:G,isActive:K}),[v,M,p,R,T,S,u]);$(()=>{var b;u&&P({type:7,options:u.options,disabled:(b=u.disabled)!=null?b:null})},[u,u==null?void 0:u.options,u==null?void 0:u.disabled]),$(()=>{S.dataRef.current=i},[i]);let C=i.comboboxState===0;Je(C,[i.buttonRef,i.inputRef,i.optionsRef],()=>x.closeCombobox());let te=j(()=>{var b,g,U;return{open:i.comboboxState===0,disabled:p,activeIndex:i.activeOptionIndex,activeOption:i.activeOptionIndex===null?null:i.virtual?i.virtual.options[(b=i.activeOptionIndex)!=null?b:0]:(U=(g=i.options[i.activeOptionIndex])==null?void 0:g.dataRef.current.value)!=null?U:null,value:v}},[i,p,v]),ne=m(()=>{if(i.activeOptionIndex!==null){if(x.setIsTyping(!1),i.virtual)I(i.virtual.options[i.activeOptionIndex]);else{let{dataRef:b}=i.options[i.activeOptionIndex];I(b.current.value)}x.goToOption(A.Specific,i.activeOptionIndex)}}),re=m(()=>{P({type:0}),h.current=!0}),ie=m(()=>{P({type:1}),h.current=!1,n==null||n()}),ae=m(b=>{P({type:3,isTyping:b})}),a=m((b,g,U)=>(h.current=!1,b===A.Specific?P({type:2,focus:A.Specific,idx:g,trigger:U}):P({type:2,focus:b,trigger:U}))),B=m((b,g)=>(P({type:4,payload:{id:b,dataRef:g}}),()=>{i.isActive(g.current.value)&&(h.current=!0),P({type:5,id:b})})),I=m(b=>Y(i.mode,{[0](){return y==null?void 0:y(b)},[1](){let g=i.value.slice(),U=g.findIndex(le=>E(le,b));return U===-1?g.push(b):g.splice(U,1),y==null?void 0:y(g)}})),k=m(b=>{P({type:6,trigger:b})}),x=j(()=>({onChange:I,registerOption:B,goToOption:a,setIsTyping:ae,closeCombobox:ie,openCombobox:re,setActivationTrigger:k,selectActiveOption:ne}),[]),[V,W]=xo(),we=r===null?{}:{ref:r},Be=Se(()=>{if(M!==void 0)return y==null?void 0:y(M)},[y,M]);return L.createElement(W,{value:V,props:{htmlFor:(ve=i.inputRef.current)==null?void 0:ve.id},slot:{open:i.comboboxState===0,disabled:p}},L.createElement(to,null,L.createElement(xe.Provider,{value:x},L.createElement(de.Provider,{value:i},L.createElement(po,{value:Y(i.comboboxState,{[0]:se.Open,[1]:se.Closed})},s!=null&&L.createElement(lo,{disabled:p,data:v!=null?{[s]:v}:{},form:f,onReset:Be}),ee({ourProps:we,theirProps:D,slot:te,defaultTag:Io,name:"Combobox"}))))))}let Eo="input";function _o(o,r){var te,ne,re,ie,ae;let e=Q("Combobox.Input"),t=oe("Combobox.Input"),c=ue(),d=uo(),{id:f=d||`headlessui-combobox-input-${c}`,onChange:s,displayValue:l,disabled:p=e.disabled||!1,autoFocus:n=!1,type:T="text",...R}=o,_=pe(e.inputRef,r,io()),u=Ae(e.inputRef),w=We(),D=m(()=>{t.onChange(null),e.optionsRef.current&&(e.optionsRef.current.scrollTop=0),t.goToOption(A.Nothing)}),M=j(()=>{var a;return typeof l=="function"&&e.value!==void 0?(a=l(e.value))!=null?a:"":typeof e.value=="string"?e.value:""},[e.value,l]);_e(([a,B],[I,k])=>{if(e.isTyping)return;let x=e.inputRef.current;x&&((k===0&&B===1||a!==I)&&(x.value=a),requestAnimationFrame(()=>{if(e.isTyping||!x||(u==null?void 0:u.activeElement)!==x)return;let{selectionStart:V,selectionEnd:W}=x;Math.abs((W!=null?W:0)-(V!=null?V:0))===0&&V===0&&x.setSelectionRange(x.value.length,x.value.length)}))},[M,e.comboboxState,u,e.isTyping]),_e(([a],[B])=>{if(a===0&&B===1){if(e.isTyping)return;let I=e.inputRef.current;if(!I)return;let k=I.value,{selectionStart:x,selectionEnd:V,selectionDirection:W}=I;I.value="",I.value=k,W!==null?I.setSelectionRange(x,V,W):I.setSelectionRange(x,V)}},[e.comboboxState]);let v=z(!1),y=m(()=>{v.current=!0}),S=m(()=>{w.nextFrame(()=>{v.current=!1})}),P=m(a=>{switch(t.setIsTyping(!0),a.key){case F.Enter:if(e.comboboxState!==0||v.current)return;if(a.preventDefault(),a.stopPropagation(),e.activeOptionIndex===null){t.closeCombobox();return}t.selectActiveOption(),e.mode===0&&t.closeCombobox();break;case F.ArrowDown:return a.preventDefault(),a.stopPropagation(),Y(e.comboboxState,{[0]:()=>t.goToOption(A.Next),[1]:()=>t.openCombobox()});case F.ArrowUp:return a.preventDefault(),a.stopPropagation(),Y(e.comboboxState,{[0]:()=>t.goToOption(A.Previous),[1]:()=>{q(()=>t.openCombobox()),e.value||t.goToOption(A.Last)}});case F.Home:if(a.shiftKey)break;return a.preventDefault(),a.stopPropagation(),t.goToOption(A.First);case F.PageUp:return a.preventDefault(),a.stopPropagation(),t.goToOption(A.First);case F.End:if(a.shiftKey)break;return a.preventDefault(),a.stopPropagation(),t.goToOption(A.Last);case F.PageDown:return a.preventDefault(),a.stopPropagation(),t.goToOption(A.Last);case F.Escape:return e.comboboxState!==0?void 0:(a.preventDefault(),e.optionsRef.current&&!e.optionsPropsRef.current.static&&a.stopPropagation(),e.mode===0&&e.value===null&&D(),t.closeCombobox());case F.Tab:if(e.comboboxState!==0)return;e.mode===0&&e.activationTrigger!==1&&t.selectActiveOption(),t.closeCombobox();break}}),h=m(a=>{s==null||s(a),e.mode===0&&a.target.value===""&&D(),t.openCombobox()}),O=m(a=>{var I,k,x;let B=(I=a.relatedTarget)!=null?I:he.find(V=>V!==a.currentTarget);if(!((k=e.optionsRef.current)!=null&&k.contains(B))&&!((x=e.buttonRef.current)!=null&&x.contains(B))&&e.comboboxState===0)return a.preventDefault(),e.mode===0&&e.value===null&&D(),t.closeCombobox()}),H=m(a=>{var I,k,x;let B=(I=a.relatedTarget)!=null?I:he.find(V=>V!==a.currentTarget);(k=e.buttonRef.current)!=null&&k.contains(B)||(x=e.optionsRef.current)!=null&&x.contains(B)||e.disabled||e.immediate&&e.comboboxState!==0&&(q(()=>t.openCombobox()),t.setActivationTrigger(1))}),X=me(),J=mo(),{isFocused:E,focusProps:N}=ye({autoFocus:n}),{isHovered:G,hoverProps:K}=Ce({isDisabled:p}),i=j(()=>({open:e.comboboxState===0,disabled:p,hover:G,focus:E,autofocus:n}),[e,G,E,n,p]),C=ce({ref:_,id:f,role:"combobox",type:T,"aria-controls":(te=e.optionsRef.current)==null?void 0:te.id,"aria-expanded":e.comboboxState===0,"aria-activedescendant":e.activeOptionIndex===null?void 0:e.virtual?(ne=e.options.find(a=>!a.dataRef.current.disabled&&e.compare(a.dataRef.current.value,e.virtual.options[e.activeOptionIndex])))==null?void 0:ne.id:(re=e.options[e.activeOptionIndex])==null?void 0:re.id,"aria-labelledby":X,"aria-describedby":J,"aria-autocomplete":"list",defaultValue:(ae=(ie=o.defaultValue)!=null?ie:e.defaultValue!==void 0?l==null?void 0:l(e.defaultValue):null)!=null?ae:e.defaultValue,disabled:p||void 0,autoFocus:n,onCompositionStart:y,onCompositionEnd:S,onKeyDown:P,onChange:h,onFocus:H,onBlur:O},N,K);return ee({ourProps:C,theirProps:R,slot:i,defaultTag:Eo,name:"Combobox.Input"})}let ho="button";function Do(o,r){var h;let e=Q("Combobox.Button"),t=oe("Combobox.Button"),c=pe(e.buttonRef,r),d=ue(),{id:f=`headlessui-combobox-button-${d}`,disabled:s=e.disabled||!1,autoFocus:l=!1,...p}=o,n=Ee(e.inputRef),T=m(O=>{switch(O.key){case F.Space:case F.Enter:O.preventDefault(),O.stopPropagation(),e.comboboxState===1&&q(()=>t.openCombobox()),n();return;case F.ArrowDown:O.preventDefault(),O.stopPropagation(),e.comboboxState===1&&(q(()=>t.openCombobox()),e.value||t.goToOption(A.First)),n();return;case F.ArrowUp:O.preventDefault(),O.stopPropagation(),e.comboboxState===1&&(q(()=>t.openCombobox()),e.value||t.goToOption(A.Last)),n();return;case F.Escape:if(e.comboboxState!==0)return;O.preventDefault(),e.optionsRef.current&&!e.optionsPropsRef.current.static&&O.stopPropagation(),q(()=>t.closeCombobox()),n();return;default:return}}),R=m(O=>{O.preventDefault(),!bo(O.currentTarget)&&(O.button===Ve.Left&&(e.comboboxState===0?t.closeCombobox():t.openCombobox()),n())}),_=me([f]),{isFocusVisible:u,focusProps:w}=ye({autoFocus:l}),{isHovered:D,hoverProps:M}=Ce({isDisabled:s}),{pressed:v,pressProps:y}=He({disabled:s}),S=j(()=>({open:e.comboboxState===0,active:v||e.comboboxState===0,disabled:s,value:e.value,hover:D,focus:u}),[e,D,u,v,s]),P=ce({ref:c,id:f,type:qe(o,e.buttonRef),tabIndex:-1,"aria-haspopup":"listbox","aria-controls":(h=e.optionsRef.current)==null?void 0:h.id,"aria-expanded":e.comboboxState===0,"aria-labelledby":_,disabled:s||void 0,autoFocus:l,onMouseDown:R,onKeyDown:T},w,M,y);return ee({ourProps:P,theirProps:p,slot:S,defaultTag:ho,name:"Combobox.Button"})}let Mo="div",Fo=Fe.RenderStrategy|Fe.Static;function Vo(o,r){var i;let e=ue(),{id:t=`headlessui-combobox-options-${e}`,hold:c=!1,anchor:d,portal:f=!1,modal:s=!0,transition:l=!1,...p}=o,n=Q("Combobox.Options"),T=oe("Combobox.Options"),R=ao(d);R&&(f=!0);let[_,u]=no(R),w=ro(),D=pe(n.optionsRef,r,R?_:null),M=Ae(n.optionsRef),v=so(),[y,S]=Ze(l,n.optionsRef,v!==null?(v&se.Open)===se.Open:n.comboboxState===0);Xe(y,n.inputRef,T.closeCombobox);let P=n.__demoMode?!1:s&&n.comboboxState===0;Ye(P,M);let h=n.__demoMode?!1:s&&n.comboboxState===0;ze(h,{allowed:m(()=>[n.inputRef.current,n.buttonRef.current,n.optionsRef.current])}),$(()=>{var C;n.optionsPropsRef.current.static=(C=o.static)!=null?C:!1},[n.optionsPropsRef,o.static]),$(()=>{n.optionsPropsRef.current.hold=c},[n.optionsPropsRef,c]),eo(n.comboboxState===0,{container:n.optionsRef.current,accept(C){return C.getAttribute("role")==="option"?NodeFilter.FILTER_REJECT:C.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(C){C.setAttribute("role","none")}});let O=me([(i=n.buttonRef.current)==null?void 0:i.id]),H=j(()=>({open:n.comboboxState===0,option:void 0,...S}),[n.comboboxState,S]),X=m(()=>{T.setActivationTrigger(0)}),J=m(C=>{C.preventDefault(),T.setActivationTrigger(0)}),E=ce(R?w():{},{"aria-labelledby":O,role:"listbox","aria-multiselectable":n.mode===1?!0:void 0,id:t,ref:D,style:{...p.style,...u,"--input-width":Ie(n.inputRef,!0).width,"--button-width":Ie(n.buttonRef,!0).width},onWheel:n.activationTrigger===0?void 0:X,onMouseDown:J});n.virtual&&y&&Object.assign(p,{children:L.createElement(So,{slot:H},p.children)});let[N,G]=Pe(n.value);n.value!==N&&n.comboboxState===0&&n.mode!==1&&G(n.value);let K=m(C=>n.compare(N,C));return L.createElement(go,{enabled:f?o.static||y:!1},L.createElement(de.Provider,{value:n.mode===1?n:{...n,isSelected:K}},ee({ourProps:E,theirProps:p,slot:H,defaultTag:Mo,features:Fo,visible:y,name:"Combobox.Options"})))}let Lo="div";function wo(o,r){var E,N,G,K;let e=Q("Combobox.Option"),t=oe("Combobox.Option"),c=ue(),{id:d=`headlessui-combobox-option-${c}`,value:f,disabled:s=(G=(N=(E=e.virtual)==null?void 0:E.disabled)==null?void 0:N.call(E,f))!=null?G:!1,order:l=null,...p}=o,n=Ee(e.inputRef),T=e.virtual?e.activeOptionIndex===e.calculateIndex(f):e.activeOptionIndex===null?!1:((K=e.options[e.activeOptionIndex])==null?void 0:K.id)===d,R=e.isSelected(f),_=z(null),u=$e({disabled:s,value:f,domRef:_,order:l}),w=fe(Le),D=pe(r,_,w?w.measureElement:null),M=m(()=>{t.setIsTyping(!1),t.onChange(f)});$(()=>t.registerOption(d,u),[u,d]);let v=z(!(e.virtual||e.__demoMode));$(()=>{if(!e.virtual&&!e.__demoMode)return Me().requestAnimationFrame(()=>{v.current=!0})},[e.virtual,e.__demoMode]),$(()=>{if(v.current&&e.comboboxState===0&&T&&e.activationTrigger!==0)return Me().requestAnimationFrame(()=>{var i,C;(C=(i=_.current)==null?void 0:i.scrollIntoView)==null||C.call(i,{block:"nearest"})})},[_,T,e.comboboxState,e.activationTrigger,e.activeOptionIndex]);let y=m(i=>{i.preventDefault(),i.button===Ve.Left&&(s||(M(),co()||requestAnimationFrame(()=>n()),e.mode===0&&t.closeCombobox()))}),S=m(()=>{if(s)return t.goToOption(A.Nothing);let i=e.calculateIndex(f);t.goToOption(A.Specific,i)}),P=Qe(),h=m(i=>P.update(i)),O=m(i=>{if(!P.wasMoved(i)||s||T)return;let C=e.calculateIndex(f);t.goToOption(A.Specific,C,0)}),H=m(i=>{P.wasMoved(i)&&(s||T&&(e.optionsPropsRef.current.hold||t.goToOption(A.Nothing)))}),X=j(()=>({active:T,focus:T,selected:R,disabled:s}),[T,R,s]);return ee({ourProps:{id:d,ref:D,role:"option",tabIndex:s===!0?void 0:-1,"aria-disabled":s===!0?!0:void 0,"aria-selected":R,disabled:void 0,onMouseDown:y,onFocus:S,onPointerEnter:h,onMouseEnter:h,onPointerMove:O,onMouseMove:O,onPointerLeave:H,onMouseLeave:H},theirProps:p,slot:X,defaultTag:Lo,name:"Combobox.Option"})}let Bo=Z(Ao),ko=Z(Do),No=Z(_o),Uo=To,Ho=Z(Vo),Go=Z(wo),Lt=Object.assign(Bo,{Input:No,Button:ko,Label:Uo,Options:Ho,Option:Go});export{Lt as Combobox,ko as ComboboxButton,No as ComboboxInput,Uo as ComboboxLabel,Go as ComboboxOption,Ho as ComboboxOptions};

dist/components/description/description.d.ts

@@ -1,3 +0,4 @@
-import React, { ReactNode, Ref } from 'react';
-import { Props } from '../../types';
+import React, { type ElementType, type ReactNode, type Ref } from 'react';
+import type { Props } from '../../types.js';
+import { type HasDisplayName, type RefProp } from '../../utils/render.js';
 interface SharedData {
@@ -8,4 +9,6 @@ slot?: {};
 }
+export declare function useDescribedBy(): string | undefined;
 interface DescriptionProviderProps extends SharedData {
     children: ReactNode;
+    value?: string | undefined;
 }
@@ -16,5 +19,9 @@ export declare function useDescriptions(): [
 ];
-export declare let Description: (<TTag extends React.ElementType<any> = "p">(props: Props<TTag, {}, "id">, ref: Ref<HTMLParagraphElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-    displayName: string;
-};
+declare let DEFAULT_DESCRIPTION_TAG: "p";
+export type DescriptionProps<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG> = Props<TTag>;
+declare function DescriptionFn<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG>(props: DescriptionProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export interface _internal_ComponentDescription extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG>(props: DescriptionProps<TTag> & RefProp<typeof DescriptionFn>): JSX.Element;
+}
+export declare let Description: _internal_ComponentDescription;
 export {};

dist/components/description/description.js

@@ -1,1 +0,1 @@
-import f,{createContext as m,useCallback as D,useContext as P,useMemo as p,useState as T}from"react";import{useId as g}from"../../hooks/use-id.js";import{forwardRefWithAs as x,render as h}from"../../utils/render.js";import{useIsoMorphicEffect as E}from"../../hooks/use-iso-morphic-effect.js";import{useSyncRefs as S}from"../../hooks/use-sync-refs.js";let d=m(null);function u(){let r=P(d);if(r===null){let t=new Error("You used a <Description /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(t,u),t}return r}function M(){let[r,t]=T([]);return[r.length>0?r.join(" "):void 0,p(()=>function(e){let i=D(o=>(t(n=>[...n,o]),()=>t(n=>{let a=n.slice(),l=a.indexOf(o);return l!==-1&&a.splice(l,1),a})),[]),s=p(()=>({register:i,slot:e.slot,name:e.name,props:e.props}),[i,e.slot,e.name,e.props]);return f.createElement(d.Provider,{value:s},e.children)},[t])]}let v="p",O=x(function(t,c){let e=u(),i=`headlessui-description-${g()}`,s=S(c);E(()=>e.register(i),[i,e.register]);let o=t,n={ref:s,...e.props,id:i};return h({ourProps:n,theirProps:o,slot:e.slot||{},defaultTag:v,name:e.name||"Description"})});export{O as Description,M as useDescriptions};
+"use client";import m,{createContext as T,useContext as u,useMemo as c,useState as P}from"react";import{useEvent as g}from'../../hooks/use-event.js';import{useId as x}from'../../hooks/use-id.js';import{useIsoMorphicEffect as y}from'../../hooks/use-iso-morphic-effect.js';import{useSyncRefs as E}from'../../hooks/use-sync-refs.js';import{useDisabled as v}from'../../internal/disabled.js';import{forwardRefWithAs as R,render as I}from'../../utils/render.js';let a=T(null);a.displayName="DescriptionContext";function f(){let r=u(a);if(r===null){let e=new Error("You used a <Description /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(e,f),e}return r}function G(){var r,e;return(e=(r=u(a))==null?void 0:r.value)!=null?e:void 0}function U(){let[r,e]=P([]);return[r.length>0?r.join(" "):void 0,c(()=>function(t){let i=g(n=>(e(s=>[...s,n]),()=>e(s=>{let o=s.slice(),p=o.indexOf(n);return p!==-1&&o.splice(p,1),o}))),l=c(()=>({register:i,slot:t.slot,name:t.name,props:t.props,value:t.value}),[i,t.slot,t.name,t.props,t.value]);return m.createElement(a.Provider,{value:l},t.children)},[e])]}let S="p";function C(r,e){let d=x(),t=v(),{id:i=`headlessui-description-${d}`,...l}=r,n=f(),s=E(e);y(()=>n.register(i),[i,n.register]);let o=t||!1,p=c(()=>({...n.slot,disabled:o}),[n.slot,o]),D={ref:s,...n.props,id:i};return I({ourProps:D,theirProps:l,slot:p,defaultTag:S,name:n.name||"Description"})}let _=R(C),w=Object.assign(_,{});export{w as Description,G as useDescribedBy,U as useDescriptions};

dist/components/dialog/dialog.d.ts

@@ -1,56 +0,55 @@
-import React, { MutableRefObject, Ref } from 'react';
-import { Props } from '../../types';
-import { PropsForFeatures } from '../../utils/render';
-interface DialogRenderPropArg {
+import React, { type ElementType, type MutableRefObject, type Ref } from 'react';
+import type { Props } from '../../types.js';
+import { type HasDisplayName, type PropsForFeatures, type RefProp } from '../../utils/render.js';
+import { type _internal_ComponentDescription } from '../description/description.js';
+declare let DEFAULT_DIALOG_TAG: "div";
+type DialogRenderPropArg = {
     open: boolean;
-}
-declare type DialogPropsWeControl = 'id' | 'role' | 'aria-modal' | 'aria-describedby' | 'aria-labelledby' | 'onClick';
+};
+type DialogPropsWeControl = 'aria-describedby' | 'aria-labelledby' | 'aria-modal';
 declare let DialogRenderFeatures: number;
-interface OverlayRenderPropArg {
+export type DialogProps<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> = Props<TTag, DialogRenderPropArg, DialogPropsWeControl, PropsForFeatures<typeof DialogRenderFeatures> & {
+    open?: boolean;
+    onClose(value: boolean): void;
+    initialFocus?: MutableRefObject<HTMLElement | null>;
+    role?: 'dialog' | 'alertdialog';
+    autoFocus?: boolean;
+    __demoMode?: boolean;
+}>;
+declare function DialogFn<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(props: DialogProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element;
+declare let DEFAULT_PANEL_TAG: "div";
+type PanelRenderPropArg = {
     open: boolean;
-}
-declare type OverlayPropsWeControl = 'id' | 'aria-hidden' | 'onClick';
-interface BackdropRenderPropArg {
+};
+export type DialogPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg>;
+declare function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DialogPanelProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+declare let DEFAULT_TITLE_TAG: "h2";
+type TitleRenderPropArg = {
     open: boolean;
+};
+export type DialogTitleProps<TTag extends ElementType = typeof DEFAULT_TITLE_TAG> = Props<TTag, TitleRenderPropArg>;
+declare function TitleFn<TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(props: DialogTitleProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export interface _internal_ComponentDialog extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(props: DialogProps<TTag> & RefProp<typeof DialogFn>): JSX.Element;
 }
-declare type BackdropPropsWeControl = 'id' | 'aria-hidden' | 'onClick';
-interface PanelRenderPropArg {
-    open: boolean;
+export interface _internal_ComponentDialogPanel extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DialogPanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element;
 }
-interface TitleRenderPropArg {
-    open: boolean;
+export interface _internal_ComponentDialogTitle extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(props: DialogTitleProps<TTag> & RefProp<typeof TitleFn>): JSX.Element;
 }
-declare type TitlePropsWeControl = 'id';
-export declare let Dialog: (<TTag extends React.ElementType<any> = "div">(props: Props<TTag, DialogRenderPropArg, DialogPropsWeControl> & (({
-    static?: undefined;
-} & {
-    unmount?: boolean | undefined;
-}) | ({
-    unmount?: undefined;
-} & {
-    static?: boolean | undefined;
-})) & {
-    open?: boolean | undefined;
-    onClose(value: boolean): void;
-    initialFocus?: React.MutableRefObject<HTMLElement | null> | undefined;
-    __demoMode?: boolean | undefined;
-}, ref: Ref<HTMLDivElement>) => JSX.Element) & {
-    displayName: string;
-} & {
-    Backdrop: (<TTag_1 extends React.ElementType<any> = "div">(props: Props<TTag_1, BackdropRenderPropArg, BackdropPropsWeControl>, ref: Ref<HTMLDivElement>) => JSX.Element) & {
-        displayName: string;
-    };
-    Panel: (<TTag_2 extends React.ElementType<any> = "div">(props: Props<TTag_2, PanelRenderPropArg, "1D45E01E-AF44-47C4-988A-19A94EBAF55C">, ref: Ref<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
-    Overlay: (<TTag_3 extends React.ElementType<any> = "div">(props: Props<TTag_3, OverlayRenderPropArg, OverlayPropsWeControl>, ref: Ref<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
-    Title: (<TTag_4 extends React.ElementType<any> = "h2">(props: Props<TTag_4, TitleRenderPropArg, "id">, ref: Ref<HTMLHeadingElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
-    Description: (<TTag_5 extends React.ElementType<any> = "p">(props: Props<TTag_5, {}, "id">, ref: React.Ref<HTMLParagraphElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
+export interface _internal_ComponentDialogDescription extends _internal_ComponentDescription {
+}
+export declare let DialogPanel: _internal_ComponentDialogPanel;
+export declare let DialogTitle: _internal_ComponentDialogTitle;
+/** @deprecated use `<Description>` instead of `<DialogDescription>` */
+export declare let DialogDescription: _internal_ComponentDialogDescription;
+export declare let Dialog: _internal_ComponentDialog & {
+    /** @deprecated use `<DialogPanel>` instead of `<Dialog.Panel>` */
+    Panel: _internal_ComponentDialogPanel;
+    /** @deprecated use `<DialogTitle>` instead of `<Dialog.Title>` */
+    Title: _internal_ComponentDialogTitle;
+    /** @deprecated use `<Description>` instead of `<Dialog.Description>` */
+    Description: _internal_ComponentDialogDescription;
 };
 export {};

dist/components/dialog/dialog.js

@@ -1,1 +0,1 @@
-import T,{createContext as le,useCallback as w,useContext as N,useEffect as F,useMemo as h,useReducer as ne,useRef as j,useState as ie,createRef as ae}from"react";import{match as L}from"../../utils/match.js";import{forwardRefWithAs as v,render as A,Features as V}from"../../utils/render.js";import{useSyncRefs as E}from"../../hooks/use-sync-refs.js";import{Keys as se}from"../keyboard.js";import{isDisabledReactIssue7711 as pe}from"../../utils/bugs.js";import{useId as b}from"../../hooks/use-id.js";import{useFocusTrap as de,Features as k}from"../../hooks/use-focus-trap.js";import{useInertOthers as ue}from"../../hooks/use-inert-others.js";import{Portal as M}from"../../components/portal/portal.js";import{ForcePortalRoot as I}from"../../internal/portal-force-root.js";import{Description as fe,useDescriptions as ge}from"../description/description.js";import{useOpenClosed as ce,State as K}from"../../internal/open-closed.js";import{useServerHandoffComplete as Te}from"../../hooks/use-server-handoff-complete.js";import{StackProvider as me,StackMessage as q}from"../../internal/stack-context.js";import{useOutsideClick as De,Features as Pe}from"../../hooks/use-outside-click.js";import{getOwnerDocument as ye}from"../../utils/owner.js";import{useOwnerDocument as Re}from"../../hooks/use-owner.js";import{useEventListener as he}from"../../hooks/use-event-listener.js";var ve=(t=>(t[t.Open=0]="Open",t[t.Closed=1]="Closed",t))(ve||{}),Ae=(e=>(e[e.SetTitleId=0]="SetTitleId",e))(Ae||{});let Ee={[0](a,e){return a.titleId===e.id?a:{...a,titleId:e.id}}},_=le(null);_.displayName="DialogContext";function C(a){let e=N(_);if(e===null){let t=new Error(`<${a} /> is missing a parent <Dialog /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(t,C),t}return e}function be(a,e){return L(e.type,Ee,a,e)}let Ce="div",Oe=V.RenderStrategy|V.Static,Se=v(function(e,t){let{open:o,onClose:l,initialFocus:p,__demoMode:f=!1,...g}=e,[m,D]=ie(0),O=ce();o===void 0&&O!==null&&(o=L(O,{[K.Open]:!0,[K.Closed]:!1}));let u=j(new Set),d=j(null),z=E(d,t),P=Re(d),x=e.hasOwnProperty("open")||O!==null,G=e.hasOwnProperty("onClose");if(!x&&!G)throw new Error("You have to provide an `open` and an `onClose` prop to the `Dialog` component.");if(!x)throw new Error("You provided an `onClose` prop to the `Dialog`, but forgot an `open` prop.");if(!G)throw new Error("You provided an `open` prop to the `Dialog`, but forgot an `onClose` prop.");if(typeof o!="boolean")throw new Error(`You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${o}`);if(typeof l!="function")throw new Error(`You provided an \`onClose\` prop to the \`Dialog\`, but the value is not a function. Received: ${l}`);let i=o?0:1,[y,B]=ne(be,{titleId:null,descriptionId:null,panelRef:ae()}),R=w(()=>l(!1),[l]),H=w(r=>B({type:0,id:r}),[B]),W=Te()?f?!1:i===0:!1,S=m>1,U=N(_)!==null,J=de(d,W?L(S?"parent":"leaf",{parent:k.RestoreFocus,leaf:k.All&~k.FocusLock}):k.None,{initialFocus:p,containers:u});ue(d,S?W:!1),De(()=>{var n,s;return[...Array.from((n=P==null?void 0:P.querySelectorAll("body > *"))!=null?n:[]).filter(c=>!(!(c instanceof HTMLElement)||c.contains(J.current)||y.panelRef.current&&c.contains(y.panelRef.current))),(s=y.panelRef.current)!=null?s:d.current]},()=>{i===0&&(S||R())},Pe.IgnoreScrollbars),he(P==null?void 0:P.defaultView,"keydown",r=>{r.key===se.Escape&&i===0&&(S||(r.preventDefault(),r.stopPropagation(),R()))}),F(()=>{var Y;if(i!==0||U)return;let r=ye(d);if(!r)return;let n=r.documentElement,s=(Y=r.defaultView)!=null?Y:window,c=n.style.overflow,oe=n.style.paddingRight,re=s.innerWidth-n.clientWidth;return n.style.overflow="hidden",n.style.paddingRight=`${re}px`,()=>{n.style.overflow=c,n.style.paddingRight=oe}},[i,U]),F(()=>{if(i!==0||!d.current)return;let r=new IntersectionObserver(n=>{for(let s of n)s.boundingClientRect.x===0&&s.boundingClientRect.y===0&&s.boundingClientRect.width===0&&s.boundingClientRect.height===0&&R()});return r.observe(d.current),()=>r.disconnect()},[i,d,R]);let[Q,X]=ge(),Z=`headlessui-dialog-${b()}`,ee=h(()=>[{dialogState:i,close:R,setTitleId:H},y],[i,y,R,H]),$=h(()=>({open:i===0}),[i]),te={ref:z,id:Z,role:"dialog","aria-modal":i===0?!0:void 0,"aria-labelledby":y.titleId,"aria-describedby":Q,onClick(r){r.stopPropagation()}};return T.createElement(me,{type:"Dialog",element:d,onUpdate:w((r,n,s)=>{n==="Dialog"&&L(r,{[q.Add](){u.current.add(s),D(c=>c+1)},[q.Remove](){u.current.add(s),D(c=>c-1)}})},[])},T.createElement(I,{force:!0},T.createElement(M,null,T.createElement(_.Provider,{value:ee},T.createElement(M.Group,{target:d},T.createElement(I,{force:!1},T.createElement(X,{slot:$,name:"Dialog.Description"},A({ourProps:te,theirProps:g,slot:$,defaultTag:Ce,features:Oe,visible:i===0,name:"Dialog"}))))))))}),we="div",Fe=v(function(e,t){let[{dialogState:o,close:l}]=C("Dialog.Overlay"),p=E(t),f=`headlessui-dialog-overlay-${b()}`,g=w(u=>{if(u.target===u.currentTarget){if(pe(u.currentTarget))return u.preventDefault();u.preventDefault(),u.stopPropagation(),l()}},[l]),m=h(()=>({open:o===0}),[o]);return A({ourProps:{ref:p,id:f,"aria-hidden":!0,onClick:g},theirProps:e,slot:m,defaultTag:we,name:"Dialog.Overlay"})}),Le="div",ke=v(function(e,t){let[{dialogState:o},l]=C("Dialog.Backdrop"),p=E(t),f=`headlessui-dialog-backdrop-${b()}`;F(()=>{if(l.panelRef.current===null)throw new Error("A <Dialog.Backdrop /> component is being used, but a <Dialog.Panel /> component is missing.")},[l.panelRef]);let g=h(()=>({open:o===0}),[o]);return T.createElement(I,{force:!0},T.createElement(M,null,A({ourProps:{ref:p,id:f,"aria-hidden":!0},theirProps:e,slot:g,defaultTag:Le,name:"Dialog.Backdrop"})))}),_e="div",Me=v(function(e,t){let[{dialogState:o},l]=C("Dialog.Panel"),p=E(t,l.panelRef),f=`headlessui-dialog-panel-${b()}`,g=h(()=>({open:o===0}),[o]);return A({ourProps:{ref:p,id:f},theirProps:e,slot:g,defaultTag:_e,name:"Dialog.Panel"})}),Ie="h2",xe=v(function(e,t){let[{dialogState:o,setTitleId:l}]=C("Dialog.Title"),p=`headlessui-dialog-title-${b()}`,f=E(t);F(()=>(l(p),()=>l(null)),[p,l]);let g=h(()=>({open:o===0}),[o]);return A({ourProps:{ref:f,id:p},theirProps:e,slot:g,defaultTag:Ie,name:"Dialog.Title"})}),ft=Object.assign(Se,{Backdrop:ke,Panel:Me,Overlay:Fe,Title:xe,Description:fe});export{ft as Dialog};
+"use client";import n,{createContext as te,createRef as oe,useContext as le,useEffect as ne,useMemo as F,useReducer as re,useRef as U}from"react";import{useEscape as ae}from'../../hooks/use-escape.js';import{useEvent as y}from'../../hooks/use-event.js';import{useId as v}from'../../hooks/use-id.js';import{useInertOthers as ie}from'../../hooks/use-inert-others.js';import{useIsTouchDevice as se}from'../../hooks/use-is-touch-device.js';import{useOnDisappear as pe}from'../../hooks/use-on-disappear.js';import{useOutsideClick as de}from'../../hooks/use-outside-click.js';import{useOwnerDocument as ue}from'../../hooks/use-owner.js';import{useRootContainers as fe}from'../../hooks/use-root-containers.js';import{useScrollLock as Te}from'../../hooks/use-scroll-lock.js';import{useServerHandoffComplete as ge}from'../../hooks/use-server-handoff-complete.js';import{useSyncRefs as x}from'../../hooks/use-sync-refs.js';import{CloseProvider as ce}from'../../internal/close-provider.js';import{HoistFormFields as me}from'../../internal/form-fields.js';import{State as b,useOpenClosed as De}from'../../internal/open-closed.js';import{ForcePortalRoot as k}from'../../internal/portal-force-root.js';import{match as Pe}from'../../utils/match.js';import{RenderFeatures as $,forwardRefWithAs as L,render as h}from'../../utils/render.js';import{Description as j,useDescriptions as ye}from'../description/description.js';import{FocusTrap as Ee,FocusTrapFeatures as E}from'../focus-trap/focus-trap.js';import{Portal as _e,PortalGroup as Ae,useNestedPortals as Ce}from'../portal/portal.js';var Fe=(l=>(l[l.Open=0]="Open",l[l.Closed=1]="Closed",l))(Fe||{}),be=(e=>(e[e.SetTitleId=0]="SetTitleId",e))(be||{});let Re={[0](t,e){return t.titleId===e.id?t:{...t,titleId:e.id}}},O=te(null);O.displayName="DialogContext";function I(t){let e=le(O);if(e===null){let l=new Error(`<${t} /> is missing a parent <Dialog /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(l,I),l}return e}function ve(t,e){return Pe(e.type,Re,t,e)}let xe="div",Le=$.RenderStrategy|$.Static;function he(t,e){let l=v(),{id:s=`headlessui-dialog-${l}`,open:a,onClose:i,initialFocus:p,role:r="dialog",autoFocus:c=!0,__demoMode:d=!1,...S}=t,_=U(!1);r=function(){return r==="dialog"||r==="alertdialog"?r:(_.current||(_.current=!0,console.warn(`Invalid role [${r}] passed to <Dialog />. Only \`dialog\` and and \`alertdialog\` are supported. Using \`dialog\` instead.`)),"dialog")}();let m=De();a===void 0&&m!==null&&(a=(m&b.Open)===b.Open);let u=U(null),W=x(u,e),A=ue(u),M=t.hasOwnProperty("open")||m!==null,w=t.hasOwnProperty("onClose");if(!M&&!w)throw new Error("You have to provide an `open` and an `onClose` prop to the `Dialog` component.");if(!M)throw new Error("You provided an `onClose` prop to the `Dialog`, but forgot an `open` prop.");if(!w)throw new Error("You provided an `open` prop to the `Dialog`, but forgot an `onClose` prop.");if(typeof a!="boolean")throw new Error(`You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${a}`);if(typeof i!="function")throw new Error(`You provided an \`onClose\` prop to the \`Dialog\`, but the value is not a function. Received: ${i}`);let f=a?0:1,[C,Y]=re(ve,{titleId:null,descriptionId:null,panelRef:oe()}),T=y(()=>i(!1)),G=y(o=>Y({type:0,id:o})),g=ge()?f===0:!1,[J,X]=Ce(),B={get current(){var o;return(o=C.panelRef.current)!=null?o:u.current}},{resolveContainers:R,mainTreeNodeRef:V,MainTreeNode:q}=fe({portals:J,defaultContainers:[B]}),H=m!==null?(m&b.Closing)===b.Closing:!1;ie(d||H?!1:g,{allowed:y(()=>{var o,P;return[(P=(o=u.current)==null?void 0:o.closest("[data-headlessui-portal]"))!=null?P:null]}),disallowed:y(()=>{var o,P;return[(P=(o=V.current)==null?void 0:o.closest("body > *:not(#headlessui-portal-root)"))!=null?P:null]})}),de(g,R,o=>{o.preventDefault(),T()}),ae(g,A==null?void 0:A.defaultView,o=>{o.preventDefault(),o.stopPropagation(),document.activeElement&&"blur"in document.activeElement&&typeof document.activeElement.blur=="function"&&document.activeElement.blur(),T()}),Te(d||H?!1:g,A,R),pe(g,u,T);let[z,K]=ye(),Q=F(()=>[{dialogState:f,close:T,setTitleId:G},C],[f,C,T,G]),N=F(()=>({open:f===0}),[f]),Z={ref:W,id:s,role:r,tabIndex:-1,"aria-modal":d?void 0:f===0?!0:void 0,"aria-labelledby":C.titleId,"aria-describedby":z},ee=!se(),D=E.None;return g&&!d&&(D|=E.RestoreFocus,D|=E.TabLock,c&&(D|=E.AutoFocus),ee&&(D|=E.InitialFocus)),n.createElement(n.Fragment,null,n.createElement(k,{force:!0},n.createElement(_e,null,n.createElement(O.Provider,{value:Q},n.createElement(Ae,{target:u},n.createElement(k,{force:!1},n.createElement(K,{slot:N},n.createElement(X,null,n.createElement(Ee,{initialFocus:p,initialFocusFallback:u,containers:R,features:D},n.createElement(ce,{value:T},h({ourProps:Z,theirProps:S,slot:N,defaultTag:xe,features:Le,visible:f===0,name:"Dialog"})))))))))),n.createElement(me,null,n.createElement(q,null)))}let Oe="div";function Ie(t,e){let l=v(),{id:s=`headlessui-dialog-panel-${l}`,...a}=t,[{dialogState:i},p]=I("Dialog.Panel"),r=x(e,p.panelRef),c=F(()=>({open:i===0}),[i]),d=y(_=>{_.stopPropagation()});return h({ourProps:{ref:r,id:s,onClick:d},theirProps:a,slot:c,defaultTag:Oe,name:"Dialog.Panel"})}let Se="h2";function Me(t,e){let l=v(),{id:s=`headlessui-dialog-title-${l}`,...a}=t,[{dialogState:i,setTitleId:p}]=I("Dialog.Title"),r=x(e);ne(()=>(p(s),()=>p(null)),[s,p]);let c=F(()=>({open:i===0}),[i]);return h({ourProps:{ref:r,id:s},theirProps:a,slot:c,defaultTag:Se,name:"Dialog.Title"})}let we=L(he),Ge=L(Ie),He=L(Me),pt=j,dt=Object.assign(we,{Panel:Ge,Title:He,Description:j});export{dt as Dialog,pt as DialogDescription,Ge as DialogPanel,He as DialogTitle};

dist/components/disclosure/disclosure.d.ts

@@ -1,56 +0,60 @@
-import React, { Ref, MutableRefObject } from 'react';
-import { Props } from '../../types';
-import { PropsForFeatures } from '../../utils/render';
-interface DisclosureRenderPropArg {
+import React, { type ElementType, type MutableRefObject, type Ref } from 'react';
+import { type TransitionData } from '../../hooks/use-transition-data.js';
+import type { Props } from '../../types.js';
+import { type HasDisplayName, type PropsForFeatures, type RefProp } from '../../utils/render.js';
+declare let DEFAULT_DISCLOSURE_TAG: React.ExoticComponent<{
+    children?: React.ReactNode;
+}>;
+type DisclosureRenderPropArg = {
     open: boolean;
     close(focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null>): void;
-}
-interface ButtonRenderPropArg {
+};
+type DisclosurePropsWeControl = never;
+export type DisclosureProps<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG> = Props<TTag, DisclosureRenderPropArg, DisclosurePropsWeControl, {
+    defaultOpen?: boolean;
+}>;
+declare function DisclosureFn<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG>(props: DisclosureProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element;
+declare let DEFAULT_BUTTON_TAG: "button";
+type ButtonRenderPropArg = {
     open: boolean;
-}
-declare type ButtonPropsWeControl = 'id' | 'type' | 'aria-expanded' | 'aria-controls' | 'onKeyDown' | 'onClick';
-interface PanelRenderPropArg {
+    hover: boolean;
+    active: boolean;
+    disabled: boolean;
+    focus: boolean;
+    autofocus: boolean;
+};
+type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded';
+export type DisclosureButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, {
+    disabled?: boolean;
+    autoFocus?: boolean;
+}>;
+declare function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: DisclosureButtonProps<TTag>, ref: Ref<HTMLButtonElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+declare let DEFAULT_PANEL_TAG: "div";
+type PanelRenderPropArg = {
     open: boolean;
     close: (focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null>) => void;
+} & TransitionData;
+type DisclosurePanelPropsWeControl = never;
+declare let PanelRenderFeatures: number;
+export type DisclosurePanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, DisclosurePanelPropsWeControl, {
+    transition?: boolean;
+} & PropsForFeatures<typeof PanelRenderFeatures>>;
+declare function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DisclosurePanelProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element;
+export interface _internal_ComponentDisclosure extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG>(props: DisclosureProps<TTag> & RefProp<typeof DisclosureFn>): JSX.Element;
 }
-declare type PanelPropsWeControl = 'id';
-declare let PanelRenderFeatures: number;
-export declare let Disclosure: (<TTag extends React.ElementType<any> = React.ExoticComponent<{
-    children?: React.ReactNode;
-}>>(props: Omit<import("../../types").PropsOf<TTag>, "as" | "children" | "refName" | "className"> & {
-    as?: TTag | undefined;
-    children?: React.ReactNode | ((bag: DisclosureRenderPropArg) => React.ReactElement<any, string | React.JSXElementConstructor<any>>);
-    refName?: string | undefined;
-} & (import("../../types").PropsOf<TTag> extends {
-    className?: any;
-} ? {
-    className?: string | ((bag: DisclosureRenderPropArg) => string) | undefined;
-} : {}) & {
-    defaultOpen?: boolean | undefined;
-}, ref: React.Ref<TTag>) => JSX.Element) & {
-    displayName: string;
-} & {
-    Button: (<TTag_1 extends React.ElementType<any> = "button">(props: Props<TTag_1, ButtonRenderPropArg, ButtonPropsWeControl>, ref: Ref<HTMLButtonElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
-    Panel: (<TTag_2 extends React.ElementType<any> = "div">(props: Omit<import("../../types").PropsOf<TTag_2>, "id" | ("as" | "children" | "refName" | "className")> & {
-        as?: TTag_2 | undefined;
-        children?: React.ReactNode | ((bag: PanelRenderPropArg) => React.ReactElement<any, string | React.JSXElementConstructor<any>>);
-        refName?: string | undefined;
-    } & (import("../../types").PropsOf<TTag_2> extends {
-        className?: any;
-    } ? {
-        className?: string | ((bag: PanelRenderPropArg) => string) | undefined;
-    } : {}) & (({
-        static?: undefined;
-    } & {
-        unmount?: boolean | undefined;
-    }) | ({
-        unmount?: undefined;
-    } & {
-        static?: boolean | undefined;
-    })), ref: Ref<HTMLDivElement>) => JSX.Element) & {
-        displayName: string;
-    };
+export interface _internal_ComponentDisclosureButton extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: DisclosureButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element;
+}
+export interface _internal_ComponentDisclosurePanel extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DisclosurePanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element;
+}
+export declare let DisclosureButton: _internal_ComponentDisclosureButton;
+export declare let DisclosurePanel: _internal_ComponentDisclosurePanel;
+export declare let Disclosure: _internal_ComponentDisclosure & {
+    /** @deprecated use `<DisclosureButton>` instead of `<Disclosure.Button>` */
+    Button: _internal_ComponentDisclosureButton;
+    /** @deprecated use `<DisclosurePanel>` instead of `<Disclosure.Panel>` */
+    Panel: _internal_ComponentDisclosurePanel;
 };
 export {};

dist/components/disclosure/disclosure.js

@@ -1,1 +0,1 @@
-import m,{Fragment as j,createContext as k,useCallback as g,useContext as L,useEffect as R,useMemo as b,useReducer as N,useRef as E}from"react";import{match as O}from"../../utils/match.js";import{forwardRefWithAs as M,render as x,Features as F}from"../../utils/render.js";import{optionalRef as G,useSyncRefs as B}from"../../hooks/use-sync-refs.js";import{useId as _}from"../../hooks/use-id.js";import{Keys as S}from"../keyboard.js";import{isDisabledReactIssue7711 as W}from"../../utils/bugs.js";import{OpenClosedProvider as $,State as v,useOpenClosed as q}from"../../internal/open-closed.js";import{useResolveButtonType as z}from"../../hooks/use-resolve-button-type.js";import{getOwnerDocument as J}from"../../utils/owner.js";var Q=(o=>(o[o.Open=0]="Open",o[o.Closed=1]="Closed",o))(Q||{}),V=(l=>(l[l.ToggleDisclosure=0]="ToggleDisclosure",l[l.CloseDisclosure=1]="CloseDisclosure",l[l.SetButtonId=2]="SetButtonId",l[l.SetPanelId=3]="SetPanelId",l[l.LinkPanel=4]="LinkPanel",l[l.UnlinkPanel=5]="UnlinkPanel",l))(V||{});let X={[0]:e=>({...e,disclosureState:O(e.disclosureState,{[0]:1,[1]:0})}),[1]:e=>e.disclosureState===1?e:{...e,disclosureState:1},[4](e){return e.linkedPanel===!0?e:{...e,linkedPanel:!0}},[5](e){return e.linkedPanel===!1?e:{...e,linkedPanel:!1}},[2](e,t){return e.buttonId===t.buttonId?e:{...e,buttonId:t.buttonId}},[3](e,t){return e.panelId===t.panelId?e:{...e,panelId:t.panelId}}},h=k(null);h.displayName="DisclosureContext";function H(e){let t=L(h);if(t===null){let o=new Error(`<${e} /> is missing a parent <Disclosure /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,H),o}return t}let U=k(null);U.displayName="DisclosureAPIContext";function K(e){let t=L(U);if(t===null){let o=new Error(`<${e} /> is missing a parent <Disclosure /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,K),o}return t}let w=k(null);w.displayName="DisclosurePanelContext";function Y(){return L(w)}function Z(e,t){return O(t.type,X,e,t)}let ee=j,te=M(function(t,o){let{defaultOpen:n=!1,...r}=t,u=`headlessui-disclosure-button-${_()}`,l=`headlessui-disclosure-panel-${_()}`,a=E(null),D=B(o,G(f=>{a.current=f},t.as===void 0||t.as===m.Fragment)),P=E(null),y=E(null),d=N(Z,{disclosureState:n?0:1,linkedPanel:!1,buttonRef:y,panelRef:P,buttonId:u,panelId:l}),[{disclosureState:c},i]=d;R(()=>i({type:2,buttonId:u}),[u,i]),R(()=>i({type:3,panelId:l}),[l,i]);let T=g(f=>{i({type:1});let A=J(a);if(!A)return;let I=(()=>f?f instanceof HTMLElement?f:f.current instanceof HTMLElement?f.current:A.getElementById(u):A.getElementById(u))();I==null||I.focus()},[i,u]),C=b(()=>({close:T}),[T]),s=b(()=>({open:c===0,close:T}),[c,T]),p={ref:D};return m.createElement(h.Provider,{value:d},m.createElement(U.Provider,{value:C},m.createElement($,{value:O(c,{[0]:v.Open,[1]:v.Closed})},x({ourProps:p,theirProps:r,slot:s,defaultTag:ee,name:"Disclosure"}))))}),ne="button",le=M(function(t,o){let[n,r]=H("Disclosure.Button"),u=Y(),l=u===null?!1:u===n.panelId,a=E(null),D=B(a,o,l?null:n.buttonRef),P=g(s=>{var p;if(l){if(n.disclosureState===1)return;switch(s.key){case S.Space:case S.Enter:s.preventDefault(),s.stopPropagation(),r({type:0}),(p=n.buttonRef.current)==null||p.focus();break}}else switch(s.key){case S.Space:case S.Enter:s.preventDefault(),s.stopPropagation(),r({type:0});break}},[r,l,n.disclosureState,n.buttonRef]),y=g(s=>{switch(s.key){case S.Space:s.preventDefault();break}},[]),d=g(s=>{var p;W(s.currentTarget)||t.disabled||(l?(r({type:0}),(p=n.buttonRef.current)==null||p.focus()):r({type:0}))},[r,t.disabled,n.buttonRef,l]),c=b(()=>({open:n.disclosureState===0}),[n]),i=z(t,a),T=t,C=l?{ref:D,type:i,onKeyDown:P,onClick:d}:{ref:D,id:n.buttonId,type:i,"aria-expanded":t.disabled?void 0:n.disclosureState===0,"aria-controls":n.linkedPanel?n.panelId:void 0,onKeyDown:P,onKeyUp:y,onClick:d};return x({ourProps:C,theirProps:T,slot:c,defaultTag:ne,name:"Disclosure.Button"})}),oe="div",re=F.RenderStrategy|F.Static,se=M(function(t,o){let[n,r]=H("Disclosure.Panel"),{close:u}=K("Disclosure.Panel"),l=B(o,n.panelRef,()=>{n.linkedPanel||r({type:4})}),a=q(),D=(()=>a!==null?a===v.Open:n.disclosureState===0)();R(()=>()=>r({type:5}),[r]),R(()=>{var c;n.disclosureState===1&&((c=t.unmount)!=null?c:!0)&&r({type:5})},[n.disclosureState,t.unmount,r]);let P=b(()=>({open:n.disclosureState===0,close:u}),[n,u]),y=t,d={ref:l,id:n.panelId};return m.createElement(w.Provider,{value:n.panelId},x({ourProps:d,theirProps:y,slot:P,defaultTag:oe,features:re,visible:D,name:"Disclosure.Panel"}))}),ke=Object.assign(te,{Button:le,Panel:se});export{ke as Disclosure};
+"use client";import{useFocusRing as Q}from"@react-aria/focus";import{useHover as Y}from"@react-aria/interactions";import S,{Fragment as K,createContext as x,useContext as L,useEffect as j,useMemo as R,useReducer as Z,useRef as A}from"react";import{useActivePress as ee}from'../../hooks/use-active-press.js';import{useEvent as C}from'../../hooks/use-event.js';import{useId as W}from'../../hooks/use-id.js';import{useResolveButtonType as te}from'../../hooks/use-resolve-button-type.js';import{optionalRef as ne,useSyncRefs as v}from'../../hooks/use-sync-refs.js';import{useTransitionData as oe}from'../../hooks/use-transition-data.js';import{CloseProvider as le}from'../../internal/close-provider.js';import{OpenClosedProvider as re,State as I,useOpenClosed as se}from'../../internal/open-closed.js';import{isDisabledReactIssue7711 as ie}from'../../utils/bugs.js';import{match as O}from'../../utils/match.js';import{getOwnerDocument as ae}from'../../utils/owner.js';import{RenderFeatures as $,forwardRefWithAs as _,mergeProps as J,render as B,useMergeRefsFn as X}from'../../utils/render.js';import{startTransition as ue}from'../../utils/start-transition.js';import{Keys as b}from'../keyboard.js';var pe=(l=>(l[l.Open=0]="Open",l[l.Closed=1]="Closed",l))(pe||{}),ce=(t=>(t[t.ToggleDisclosure=0]="ToggleDisclosure",t[t.CloseDisclosure=1]="CloseDisclosure",t[t.SetButtonId=2]="SetButtonId",t[t.SetPanelId=3]="SetPanelId",t[t.LinkPanel=4]="LinkPanel",t[t.UnlinkPanel=5]="UnlinkPanel",t))(ce||{});let de={[0]:e=>({...e,disclosureState:O(e.disclosureState,{[0]:1,[1]:0})}),[1]:e=>e.disclosureState===1?e:{...e,disclosureState:1},[4](e){return e.linkedPanel===!0?e:{...e,linkedPanel:!0}},[5](e){return e.linkedPanel===!1?e:{...e,linkedPanel:!1}},[2](e,n){return e.buttonId===n.buttonId?e:{...e,buttonId:n.buttonId}},[3](e,n){return e.panelId===n.panelId?e:{...e,panelId:n.panelId}}},M=x(null);M.displayName="DisclosureContext";function F(e){let n=L(M);if(n===null){let l=new Error(`<${e} /> is missing a parent <Disclosure /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(l,F),l}return n}let k=x(null);k.displayName="DisclosureAPIContext";function V(e){let n=L(k);if(n===null){let l=new Error(`<${e} /> is missing a parent <Disclosure /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(l,V),l}return n}let H=x(null);H.displayName="DisclosurePanelContext";function fe(){return L(H)}function Te(e,n){return O(n.type,de,e,n)}let De=K;function Pe(e,n){let{defaultOpen:l=!1,...c}=e,s=A(null),d=v(n,ne(a=>{s.current=a},e.as===void 0||e.as===K)),t=A(null),o=A(null),r=Z(Te,{disclosureState:l?0:1,linkedPanel:!1,buttonRef:o,panelRef:t,buttonId:null,panelId:null}),[{disclosureState:f,buttonId:i},T]=r,p=C(a=>{T({type:1});let y=ae(s);if(!y||!i)return;let m=(()=>a?a instanceof HTMLElement?a:a.current instanceof HTMLElement?a.current:y.getElementById(i):y.getElementById(i))();m==null||m.focus()}),D=R(()=>({close:p}),[p]),P=R(()=>({open:f===0,close:p}),[f,p]),E={ref:d};return S.createElement(M.Provider,{value:r},S.createElement(k.Provider,{value:D},S.createElement(le,{value:p},S.createElement(re,{value:O(f,{[0]:I.Open,[1]:I.Closed})},B({ourProps:E,theirProps:c,slot:P,defaultTag:De,name:"Disclosure"})))))}let ye="button";function me(e,n){let l=W(),{id:c=`headlessui-disclosure-button-${l}`,disabled:s=!1,autoFocus:d=!1,...t}=e,[o,r]=F("Disclosure.Button"),f=fe(),i=f===null?!1:f===o.panelId,T=A(null),p=v(T,n,i?null:o.buttonRef),D=X();j(()=>{if(!i)return r({type:2,buttonId:c}),()=>{r({type:2,buttonId:null})}},[c,r,i]);let P=C(u=>{var g;if(i){if(o.disclosureState===1)return;switch(u.key){case b.Space:case b.Enter:u.preventDefault(),u.stopPropagation(),r({type:0}),(g=o.buttonRef.current)==null||g.focus();break}}else switch(u.key){case b.Space:case b.Enter:u.preventDefault(),u.stopPropagation(),r({type:0});break}}),E=C(u=>{switch(u.key){case b.Space:u.preventDefault();break}}),a=C(u=>{var g;ie(u.currentTarget)||s||(i?(r({type:0}),(g=o.buttonRef.current)==null||g.focus()):r({type:0}))}),{isFocusVisible:y,focusProps:m}=Q({autoFocus:d}),{isHovered:U,hoverProps:h}=Y({isDisabled:s}),{pressed:N,pressProps:w}=ee({disabled:s}),q=R(()=>({open:o.disclosureState===0,hover:U,active:N,disabled:s,focus:y,autofocus:d}),[o,U,N,y,s,d]),G=te(e,T),z=i?J({ref:p,type:G,disabled:s||void 0,autoFocus:d,onKeyDown:P,onClick:a},m,h,w):J({ref:p,id:c,type:G,"aria-expanded":o.disclosureState===0,"aria-controls":o.linkedPanel?o.panelId:void 0,disabled:s||void 0,autoFocus:d,onKeyDown:P,onKeyUp:E,onClick:a},m,h,w);return B({mergeRefs:D,ourProps:z,theirProps:t,slot:q,defaultTag:ye,name:"Disclosure.Button"})}let Ee="div",ge=$.RenderStrategy|$.Static;function Se(e,n){let l=W(),{id:c=`headlessui-disclosure-panel-${l}`,transition:s=!1,...d}=e,[t,o]=F("Disclosure.Panel"),{close:r}=V("Disclosure.Panel"),f=X(),i=v(n,t.panelRef,a=>{ue(()=>o({type:a?4:5}))});j(()=>(o({type:3,panelId:c}),()=>{o({type:3,panelId:null})}),[c,o]);let T=se(),[p,D]=oe(s,t.panelRef,T!==null?(T&I.Open)===I.Open:t.disclosureState===0),P=R(()=>({open:t.disclosureState===0,close:r,...D}),[t.disclosureState,r,D]),E={ref:i,id:c};return S.createElement(H.Provider,{value:t.panelId},B({mergeRefs:f,ourProps:E,theirProps:d,slot:P,defaultTag:Ee,features:ge,visible:p,name:"Disclosure.Panel"}))}let be=_(Pe),Re=_(me),Ae=_(Se),Ke=Object.assign(be,{Button:Re,Panel:Ae});export{Ke as Disclosure,Re as DisclosureButton,Ae as DisclosurePanel};

dist/components/focus-trap/focus-trap.d.ts

@@ -1,15 +0,36 @@
-import { ElementType, MutableRefObject, Ref } from 'react';
-import { Props } from '../../types';
-export declare let FocusTrap: (<TTag extends ElementType<any> = "div">(props: Omit<import("../../types").PropsOf<TTag>, "as" | "children" | "refName" | "className"> & {
-    as?: TTag | undefined;
-    children?: import("react").ReactNode | ((bag: any) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
-    refName?: string | undefined;
-} & (import("../../types").PropsOf<TTag> extends {
-    className?: any;
-} ? {
-    className?: string | ((bag: any) => string) | undefined;
-} : {}) & {
-    initialFocus?: MutableRefObject<HTMLElement | null> | undefined;
-}, ref: Ref<HTMLElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) & {
-    displayName: string;
+import React, { type ElementType, type MutableRefObject, type Ref } from 'react';
+import type { Props } from '../../types.js';
+import { type HasDisplayName, type RefProp } from '../../utils/render.js';
+type Containers = (() => Iterable<HTMLElement>) | MutableRefObject<Set<MutableRefObject<HTMLElement | null>>>;
+declare let DEFAULT_FOCUS_TRAP_TAG: "div";
+export declare enum FocusTrapFeatures {
+    /** No features enabled for the focus trap. */
+    None = 0,
+    /** Ensure that we move focus initially into the container. */
+    InitialFocus = 1,
+    /** Ensure that pressing `Tab` and `Shift+Tab` is trapped within the container. */
+    TabLock = 2,
+    /** Ensure that programmatically moving focus outside of the container is disallowed. */
+    FocusLock = 4,
+    /** Ensure that we restore the focus when unmounting the focus trap. */
+    RestoreFocus = 8,
+    /** Initial focus should look for the `data-autofocus` */
+    AutoFocus = 16
+}
+type FocusTrapRenderPropArg = {};
+type FocusTrapPropsWeControl = never;
+export type FocusTrapProps<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG> = Props<TTag, FocusTrapRenderPropArg, FocusTrapPropsWeControl, {
+    initialFocus?: MutableRefObject<HTMLElement | null>;
+    initialFocusFallback?: MutableRefObject<HTMLElement | null>;
+    features?: FocusTrapFeatures;
+    containers?: Containers;
+}>;
+declare function FocusTrapFn<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(props: FocusTrapProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element;
+export interface _internal_ComponentFocusTrap extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(props: FocusTrapProps<TTag> & RefProp<typeof FocusTrapFn>): JSX.Element;
+}
+export declare let FocusTrap: _internal_ComponentFocusTrap & {
+    /** @deprecated use `FocusTrapFeatures` instead of `FocusTrap.features` */
+    features: typeof FocusTrapFeatures;
 };
+export {};

dist/components/focus-trap/focus-trap.js

@@ -1,1 +0,1 @@
-import{useRef as f}from"react";import{forwardRefWithAs as n,render as p}from"../../utils/render.js";import{useFocusTrap as T,Features as r}from"../../hooks/use-focus-trap.js";import{useServerHandoffComplete as m}from"../../hooks/use-server-handoff-complete.js";import{useSyncRefs as i}from"../../hooks/use-sync-refs.js";let c="div",O=n(function(t,o){let e=f(null),l=i(e,o),{initialFocus:s,...u}=t,a=m();return T(e,a?r.All:r.None,{initialFocus:s}),p({ourProps:{ref:l},theirProps:u,defaultTag:c,name:"FocusTrap"})});export{O as FocusTrap};
+"use client";import L,{useRef as M}from"react";import{useDisposables as G}from'../../hooks/use-disposables.js';import{useEvent as A}from'../../hooks/use-event.js';import{useEventListener as W}from'../../hooks/use-event-listener.js';import{useIsMounted as P}from'../../hooks/use-is-mounted.js';import{useIsTopLayer as O}from'../../hooks/use-is-top-layer.js';import{useOnUnmount as K}from'../../hooks/use-on-unmount.js';import{useOwnerDocument as V}from'../../hooks/use-owner.js';import{useServerHandoffComplete as q}from'../../hooks/use-server-handoff-complete.js';import{useSyncRefs as J}from'../../hooks/use-sync-refs.js';import{Direction as H,useTabDirection as X}from'../../hooks/use-tab-direction.js';import{useWatch as y}from'../../hooks/use-watch.js';import{Hidden as C,HiddenFeatures as _}from'../../internal/hidden.js';import{history as b}from'../../utils/active-element-history.js';import{Focus as T,FocusResult as S,focusElement as p,focusIn as E}from'../../utils/focus-management.js';import{match as h}from'../../utils/match.js';import{microTask as j}from'../../utils/micro-task.js';import{forwardRefWithAs as z,render as Q}from'../../utils/render.js';function U(o){if(!o)return new Set;if(typeof o=="function")return new Set(o());let e=new Set;for(let t of o.current)t.current instanceof HTMLElement&&e.add(t.current);return e}let Y="div";var x=(n=>(n[n.None=0]="None",n[n.InitialFocus=1]="InitialFocus",n[n.TabLock=2]="TabLock",n[n.FocusLock=4]="FocusLock",n[n.RestoreFocus=8]="RestoreFocus",n[n.AutoFocus=16]="AutoFocus",n))(x||{});function Z(o,e){let t=M(null),r=J(t,e),{initialFocus:s,initialFocusFallback:a,containers:n,features:u=15,...f}=o;q()||(u=0);let l=V(t);w(u,{ownerDocument:l});let i=ee(u,{ownerDocument:l,container:t,initialFocus:s,initialFocusFallback:a});te(u,{ownerDocument:l,container:t,containers:n,previousActiveElement:i});let R=X(),g=A(c=>{let m=t.current;if(!m)return;(B=>B())(()=>{h(R.current,{[H.Forwards]:()=>{E(m,T.First,{skipElements:[c.relatedTarget,a]})},[H.Backwards]:()=>{E(m,T.Last,{skipElements:[c.relatedTarget,a]})}})})}),v=O(!!(u&2),"focus-trap#tab-lock"),N=G(),F=M(!1),k={ref:r,onKeyDown(c){c.key=="Tab"&&(F.current=!0,N.requestAnimationFrame(()=>{F.current=!1}))},onBlur(c){if(!(u&4))return;let m=U(n);t.current instanceof HTMLElement&&m.add(t.current);let d=c.relatedTarget;d instanceof HTMLElement&&d.dataset.headlessuiFocusGuard!=="true"&&(I(m,d)||(F.current?E(t.current,h(R.current,{[H.Forwards]:()=>T.Next,[H.Backwards]:()=>T.Previous})|T.WrapAround,{relativeTo:c.target}):c.target instanceof HTMLElement&&p(c.target)))}};return L.createElement(L.Fragment,null,v&&L.createElement(C,{as:"button",type:"button","data-headlessui-focus-guard":!0,onFocus:g,features:_.Focusable}),Q({ourProps:k,theirProps:f,defaultTag:Y,name:"FocusTrap"}),v&&L.createElement(C,{as:"button",type:"button","data-headlessui-focus-guard":!0,onFocus:g,features:_.Focusable}))}let $=z(Z),Fe=Object.assign($,{features:x});function D(o=!0){let e=M(b.slice());return y(([t],[r])=>{r===!0&&t===!1&&j(()=>{e.current.splice(0)}),r===!1&&t===!0&&(e.current=b.slice())},[o,b,e]),A(()=>{var t;return(t=e.current.find(r=>r!=null&&r.isConnected))!=null?t:null})}function w(o,{ownerDocument:e}){let t=!!(o&8),r=D(t);y(()=>{t||(e==null?void 0:e.activeElement)===(e==null?void 0:e.body)&&p(r())},[t]),K(()=>{t&&p(r())})}function ee(o,{ownerDocument:e,container:t,initialFocus:r,initialFocusFallback:s}){let a=M(null),n=O(!!(o&1),"focus-trap#initial-focus"),u=P();return y(()=>{if(o===0)return;if(!n){s!=null&&s.current&&p(s.current);return}let f=t.current;f&&j(()=>{if(!u.current)return;let l=e==null?void 0:e.activeElement;if(r!=null&&r.current){if((r==null?void 0:r.current)===l){a.current=l;return}}else if(f.contains(l)){a.current=l;return}if(r!=null&&r.current)p(r.current);else{if(o&16){if(E(f,T.First|T.AutoFocus)!==S.Error)return}else if(E(f,T.First)!==S.Error)return;if(s!=null&&s.current&&(p(s.current),(e==null?void 0:e.activeElement)===s.current))return;console.warn("There are no focusable elements inside the <FocusTrap />")}a.current=e==null?void 0:e.activeElement})},[s,n,o]),a}function te(o,{ownerDocument:e,container:t,containers:r,previousActiveElement:s}){let a=P(),n=!!(o&4);W(e==null?void 0:e.defaultView,"focus",u=>{if(!n||!a.current)return;let f=U(r);t.current instanceof HTMLElement&&f.add(t.current);let l=s.current;if(!l)return;let i=u.target;i&&i instanceof HTMLElement?I(f,i)?(s.current=i,p(i)):(u.preventDefault(),u.stopPropagation(),p(l)):p(s.current)},!0)}function I(o,e){for(let t of o)if(t.contains(e))return!0;return!1}export{Fe as FocusTrap,x as FocusTrapFeatures};

dist/components/label/label.d.ts

@@ -1,25 +0,36 @@
-import React, { ReactNode, Ref } from 'react';
-import { Props } from '../../types';
+import React, { type ElementType, type ReactNode, type Ref } from 'react';
+import type { Props } from '../../types.js';
+import { type HasDisplayName, type RefProp } from '../../utils/render.js';
 interface SharedData {
     slot?: {};
     name?: string;
-    props?: {};
+    props?: Record<string, any>;
 }
+export declare function useLabelContext(): {
+    value: string | undefined;
+    register(value: string): () => void;
+} & SharedData;
+export declare function useLabelledBy(alwaysAvailableIds?: (string | undefined | null)[]): string | undefined;
 interface LabelProviderProps extends SharedData {
     children: ReactNode;
+    value?: string | undefined;
 }
-export declare function useLabels(): [string | undefined, (props: LabelProviderProps) => JSX.Element];
-export declare let Label: (<TTag extends React.ElementType<any> = "label">(props: Omit<import("../../types").PropsOf<TTag>, "id" | ("as" | "children" | "refName" | "className")> & {
-    as?: TTag | undefined;
-    children?: React.ReactNode | ((bag: {}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>);
-    refName?: string | undefined;
-} & (import("../../types").PropsOf<TTag> extends {
-    className?: any;
-} ? {
-    className?: string | ((bag: {}) => string) | undefined;
-} : {}) & {
-    passive?: boolean | undefined;
-}, ref: Ref<HTMLLabelElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-    displayName: string;
+export declare function useLabels({ inherit }?: {
+    inherit?: boolean | undefined;
+}): [
+    string | undefined,
+    (props: LabelProviderProps & {
+        inherit?: boolean;
+    }) => JSX.Element
+];
+declare let DEFAULT_LABEL_TAG: "label";
+export type LabelProps<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> = Props<TTag> & {
+    passive?: boolean;
+    htmlFor?: string;
 };
+declare function LabelFn<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: LabelProps<TTag>, ref: Ref<HTMLLabelElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export interface _internal_ComponentLabel extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: LabelProps<TTag> & RefProp<typeof LabelFn>): JSX.Element;
+}
+export declare let Label: _internal_ComponentLabel;
 export {};

dist/components/label/label.js

@@ -1,1 +0,1 @@
-import p,{createContext as m,useCallback as b,useContext as L,useMemo as u,useState as g}from"react";import{useId as x}from"../../hooks/use-id.js";import{forwardRefWithAs as T,render as P}from"../../utils/render.js";import{useIsoMorphicEffect as E}from"../../hooks/use-iso-morphic-effect.js";import{useSyncRefs as h}from"../../hooks/use-sync-refs.js";let c=m(null);function f(){let l=L(c);if(l===null){let t=new Error("You used a <Label /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(t,f),t}return l}function B(){let[l,t]=g([]);return[l.length>0?l.join(" "):void 0,u(()=>function(e){let o=b(a=>(t(i=>[...i,a]),()=>t(i=>{let n=i.slice(),d=n.indexOf(a);return d!==-1&&n.splice(d,1),n})),[]),r=u(()=>({register:o,slot:e.slot,name:e.name,props:e.props}),[o,e.slot,e.name,e.props]);return p.createElement(c.Provider,{value:r},e.children)},[t])]}let v="label",M=T(function(t,s){let{passive:e=!1,...o}=t,r=f(),a=`headlessui-label-${x()}`,i=h(s);E(()=>r.register(a),[a,r.register]);let n={ref:i,...r.props,id:a};return e&&("onClick"in n&&delete n.onClick,"onClick"in o&&delete o.onClick),P({ourProps:n,theirProps:o,slot:r.slot||{},defaultTag:v,name:r.name||"Label"})});export{M as Label,B as useLabels};
+"use client";import k,{createContext as D,useContext as h,useMemo as T,useState as R}from"react";import{useEvent as v}from'../../hooks/use-event.js';import{useId as _}from'../../hooks/use-id.js';import{useIsoMorphicEffect as A}from'../../hooks/use-iso-morphic-effect.js';import{useSyncRefs as B}from'../../hooks/use-sync-refs.js';import{useDisabled as F}from'../../internal/disabled.js';import{useProvidedId as S}from'../../internal/id.js';import{forwardRefWithAs as M,render as H}from'../../utils/render.js';let c=D(null);c.displayName="LabelContext";function P(){let r=h(c);if(r===null){let l=new Error("You used a <Label /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(l,P),l}return r}function I(r){var a,e,o;let l=(e=(a=h(c))==null?void 0:a.value)!=null?e:void 0;return((o=r==null?void 0:r.length)!=null?o:0)>0?[l,...r].filter(Boolean).join(" "):l}function z({inherit:r=!1}={}){let l=I(),[a,e]=R([]),o=r?[l,...a].filter(Boolean):a;return[o.length>0?o.join(" "):void 0,T(()=>function(t){let s=v(i=>(e(p=>[...p,i]),()=>e(p=>{let u=p.slice(),d=u.indexOf(i);return d!==-1&&u.splice(d,1),u}))),m=T(()=>({register:s,slot:t.slot,name:t.name,props:t.props,value:t.value}),[s,t.slot,t.name,t.props,t.value]);return k.createElement(c.Provider,{value:m},t.children)},[e])]}let N="label";function G(r,l){var y;let a=_(),e=P(),o=S(),g=F(),{id:t=`headlessui-label-${a}`,htmlFor:s=o!=null?o:(y=e.props)==null?void 0:y.htmlFor,passive:m=!1,...i}=r,p=B(l);A(()=>e.register(t),[t,e.register]);let u=v(L=>{let b=L.currentTarget;if(b instanceof HTMLLabelElement&&L.preventDefault(),e.props&&"onClick"in e.props&&typeof e.props.onClick=="function"&&e.props.onClick(L),b instanceof HTMLLabelElement){let n=document.getElementById(b.htmlFor);if(n){let E=n.getAttribute("disabled");if(E==="true"||E==="")return;let x=n.getAttribute("aria-disabled");if(x==="true"||x==="")return;(n instanceof HTMLInputElement&&(n.type==="radio"||n.type==="checkbox")||n.role==="radio"||n.role==="checkbox"||n.role==="switch")&&n.click(),n.focus({preventScroll:!0})}}}),d=g||!1,C=T(()=>({...e.slot,disabled:d}),[e.slot,d]),f={ref:p,...e.props,id:t,htmlFor:s,onClick:u};return m&&("onClick"in f&&(delete f.htmlFor,delete f.onClick),"onClick"in i&&delete i.onClick),H({ourProps:f,theirProps:i,slot:C,defaultTag:s?N:"div",name:e.name||"Label"})}let U=M(G),K=Object.assign(U,{});export{K as Label,P as useLabelContext,I as useLabelledBy,z as useLabels};

dist/components/listbox/listbox.d.ts

@@ -1,65 +0,122 @@
-import React, { Ref } from 'react';
-import { Props } from '../../types';
-import { PropsForFeatures } from '../../utils/render';
-interface ListboxRenderPropArg {
+import React, { type ElementType, type Ref } from 'react';
+import { type ByComparator } from '../../hooks/use-by-comparator.js';
+import { type TransitionData } from '../../hooks/use-transition-data.js';
+import { type AnchorPropsWithSelection } from '../../internal/floating.js';
+import type { Props } from '../../types.js';
+import { type HasDisplayName, type PropsForFeatures, type RefProp } from '../../utils/render.js';
+import { type _internal_ComponentLabel } from '../label/label.js';
+declare let DEFAULT_LISTBOX_TAG: React.ExoticComponent<{
+    children?: React.ReactNode;
+}>;
+type ListboxRenderPropArg<T> = {
     open: boolean;
     disabled: boolean;
-}
-interface ButtonRenderPropArg {
-    open: boolean;
+    invalid: boolean;
+    value: T;
+};
+export type ListboxProps<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType> = Props<TTag, ListboxRenderPropArg<TType>, 'value' | 'defaultValue' | 'onChange' | 'by' | 'disabled' | 'horizontal' | 'name' | 'multiple', {
+    value?: TType;
+    defaultValue?: TType;
+    onChange?(value: TType): void;
+    by?: ByComparator<TActualType>;
+    disabled?: boolean;
+    invalid?: boolean;
+    horizontal?: boolean;
+    form?: string;
+    name?: string;
+    multiple?: boolean;
+    __demoMode?: boolean;
+}>;
+declare function ListboxFn<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType extends (infer U)[] ? U : TType>(props: ListboxProps<TTag, TType, TActualType>, ref: Ref<HTMLElement>): React.JSX.Element;
+declare let DEFAULT_BUTTON_TAG: "button";
+type ButtonRenderPropArg = {
     disabled: boolean;
-}
-declare type ButtonPropsWeControl = 'id' | 'type' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded' | 'aria-labelledby' | 'disabled' | 'onKeyDown' | 'onClick';
-interface LabelRenderPropArg {
+    invalid: boolean;
+    hover: boolean;
+    focus: boolean;
+    autofocus: boolean;
     open: boolean;
-    disabled: boolean;
-}
-declare type LabelPropsWeControl = 'id' | 'ref' | 'onClick';
-interface OptionsRenderPropArg {
+    active: boolean;
+    value: any;
+};
+type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded' | 'aria-haspopup' | 'aria-labelledby' | 'disabled';
+export type ListboxButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, {
+    autoFocus?: boolean;
+    disabled?: boolean;
+}>;
+declare function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ListboxButtonProps<TTag>, ref: Ref<HTMLButtonElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+declare let DEFAULT_OPTIONS_TAG: "div";
+type OptionsRenderPropArg = {
     open: boolean;
-}
-declare type OptionsPropsWeControl = 'aria-activedescendant' | 'aria-labelledby' | 'aria-orientation' | 'id' | 'onKeyDown' | 'role' | 'tabIndex';
+} & TransitionData;
+type OptionsPropsWeControl = 'aria-activedescendant' | 'aria-labelledby' | 'aria-multiselectable' | 'aria-orientation' | 'role' | 'tabIndex';
 declare let OptionsRenderFeatures: number;
-interface OptionRenderPropArg {
+export type ListboxOptionsProps<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl, {
+    anchor?: AnchorPropsWithSelection;
+    portal?: boolean;
+    modal?: boolean;
+    transition?: boolean;
+} & PropsForFeatures<typeof OptionsRenderFeatures>>;
+declare function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ListboxOptionsProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element;
+declare let DEFAULT_OPTION_TAG: "div";
+type OptionRenderPropArg = {
+    /** @deprecated use `focus` instead */
     active: boolean;
+    focus: boolean;
     selected: boolean;
     disabled: boolean;
+    selectedOption: boolean;
+};
+type OptionPropsWeControl = 'aria-disabled' | 'aria-selected' | 'role' | 'tabIndex';
+export type ListboxOptionProps<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, {
+    disabled?: boolean;
+    value: TType;
+}>;
+declare function OptionFn<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = Parameters<typeof ListboxRoot>[0]['value']>(props: ListboxOptionProps<TTag, TType>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+declare let DEFAULT_SELECTED_OPTION_TAG: React.ExoticComponent<{
+    children?: React.ReactNode;
+}>;
+type SelectedOptionRenderPropArg = {};
+type SelectedOptionPropsWeControl = never;
+export type ListboxSelectedOptionProps<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG> = Props<TTag, SelectedOptionRenderPropArg, SelectedOptionPropsWeControl, {
+    options: React.ReactNode;
+    placeholder?: React.ReactNode;
+}>;
+declare function SelectedFn<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG>(props: ListboxSelectedOptionProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element;
+export interface _internal_ComponentListbox extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType extends (infer U)[] ? U : TType>(props: ListboxProps<TTag, TType, TActualType> & RefProp<typeof ListboxFn>): JSX.Element;
 }
-declare type ListboxOptionPropsWeControl = 'id' | 'role' | 'tabIndex' | 'aria-disabled' | 'aria-selected' | 'onPointerLeave' | 'onMouseLeave' | 'onPointerMove' | 'onMouseMove' | 'onFocus';
-export declare let Listbox: (<TTag extends React.ElementType<any> = React.ExoticComponent<{
-    children?: React.ReactNode;
-}>, TType = string, TActualType = TType extends (infer U)[] ? U : TType>(props: Props<TTag, ListboxRenderPropArg, "value" | "name" | "disabled" | "onChange" | "multiple" | "horizontal"> & {
-    value: TType;
-    onChange(value: TType): void;
-    disabled?: boolean | undefined;
-    horizontal?: boolean | undefined;
-    name?: string | undefined;
-    multiple?: boolean | undefined;
-}, ref: React.Ref<TTag>) => JSX.Element) & {
-    displayName: string;
-} & {
-    Button: (<TTag_1 extends React.ElementType<any> = "button">(props: Props<TTag_1, ButtonRenderPropArg, ButtonPropsWeControl>, ref: Ref<HTMLButtonElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
-    Label: (<TTag_2 extends React.ElementType<any> = "label">(props: Props<TTag_2, LabelRenderPropArg, LabelPropsWeControl>, ref: Ref<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
-    Options: (<TTag_3 extends React.ElementType<any> = "ul">(props: Props<TTag_3, OptionsRenderPropArg, OptionsPropsWeControl> & (({
-        static?: undefined;
-    } & {
-        unmount?: boolean | undefined;
-    }) | ({
-        unmount?: undefined;
-    } & {
-        static?: boolean | undefined;
-    })), ref: Ref<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
-    Option: (<TTag_4 extends React.ElementType<any> = "li", TType_1 = unknown>(props: Props<TTag_4, OptionRenderPropArg, "value" | ListboxOptionPropsWeControl> & {
-        disabled?: boolean | undefined;
-        value: TType_1;
-    }, ref: Ref<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
+export interface _internal_ComponentListboxButton extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ListboxButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element;
+}
+export interface _internal_ComponentListboxLabel extends _internal_ComponentLabel {
+}
+export interface _internal_ComponentListboxOptions extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ListboxOptionsProps<TTag> & RefProp<typeof OptionsFn>): JSX.Element;
+}
+export interface _internal_ComponentListboxOption extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = Parameters<typeof ListboxRoot>[0]['value']>(props: ListboxOptionProps<TTag, TType> & RefProp<typeof OptionFn>): JSX.Element;
+}
+export interface _internal_ComponentListboxSelectedOption extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG>(props: ListboxSelectedOptionProps<TTag> & RefProp<typeof SelectedFn>): JSX.Element;
+}
+declare let ListboxRoot: _internal_ComponentListbox;
+export declare let ListboxButton: _internal_ComponentListboxButton;
+/** @deprecated use `<Label>` instead of `<ListboxLabel>` */
+export declare let ListboxLabel: _internal_ComponentListboxLabel;
+export declare let ListboxOptions: _internal_ComponentListboxOptions;
+export declare let ListboxOption: _internal_ComponentListboxOption;
+export declare let ListboxSelectedOption: _internal_ComponentListboxSelectedOption;
+export declare let Listbox: _internal_ComponentListbox & {
+    /** @deprecated use `<ListboxButton>` instead of `<Listbox.Button>` */
+    Button: _internal_ComponentListboxButton;
+    /** @deprecated use `<Label>` instead of `<Listbox.Label>` */
+    Label: _internal_ComponentListboxLabel;
+    /** @deprecated use `<ListboxOptions>` instead of `<Listbox.Options>` */
+    Options: _internal_ComponentListboxOptions;
+    /** @deprecated use `<ListboxOption>` instead of `<Listbox.Option>` */
+    Option: _internal_ComponentListboxOption;
+    /** @deprecated use `<ListboxSelectedOption>` instead of `<Listbox.SelectedOption>` */
+    SelectedOption: _internal_ComponentListboxSelectedOption;
 };
 export {};

dist/components/listbox/listbox.js

@@ -1,1 +0,1 @@
-import w,{Fragment as W,createContext as Q,createRef as k,useCallback as R,useContext as z,useMemo as D,useReducer as $,useRef as H,useEffect as X}from"react";import{useDisposables as U}from"../../hooks/use-disposables.js";import{useId as F}from"../../hooks/use-id.js";import{useIsoMorphicEffect as A}from"../../hooks/use-iso-morphic-effect.js";import{useComputed as K}from"../../hooks/use-computed.js";import{useSyncRefs as C}from"../../hooks/use-sync-refs.js";import{Features as N,forwardRefWithAs as M,render as E,compact as q}from"../../utils/render.js";import{match as h}from"../../utils/match.js";import{disposables as G}from"../../utils/disposables.js";import{Keys as b}from"../keyboard.js";import{Focus as m,calculateActiveIndex as J}from"../../utils/calculate-active-index.js";import{isDisabledReactIssue7711 as Y}from"../../utils/bugs.js";import{isFocusableElement as Z,FocusableMode as ee,sortByDomNode as te}from"../../utils/focus-management.js";import{useOpenClosed as oe,State as B,OpenClosedProvider as ne}from"../../internal/open-closed.js";import{useResolveButtonType as re}from"../../hooks/use-resolve-button-type.js";import{useOutsideClick as ie}from"../../hooks/use-outside-click.js";import{VisuallyHidden as ae}from"../../internal/visually-hidden.js";import{objectToFormEntries as le}from"../../utils/form.js";import{getOwnerDocument as se}from"../../utils/owner.js";var pe=(n=>(n[n.Open=0]="Open",n[n.Closed=1]="Closed",n))(pe||{}),ue=(n=>(n[n.Single=0]="Single",n[n.Multi=1]="Multi",n))(ue||{}),de=(n=>(n[n.Pointer=0]="Pointer",n[n.Other=1]="Other",n))(de||{}),ce=(a=>(a[a.OpenListbox=0]="OpenListbox",a[a.CloseListbox=1]="CloseListbox",a[a.SetDisabled=2]="SetDisabled",a[a.SetOrientation=3]="SetOrientation",a[a.GoToOption=4]="GoToOption",a[a.Search=5]="Search",a[a.ClearSearch=6]="ClearSearch",a[a.RegisterOption=7]="RegisterOption",a[a.UnregisterOption=8]="UnregisterOption",a))(ce||{});function _(t,i=n=>n){let n=t.activeOptionIndex!==null?t.options[t.activeOptionIndex]:null,e=te(i(t.options.slice()),p=>p.dataRef.current.domRef.current),o=n?e.indexOf(n):null;return o===-1&&(o=null),{options:e,activeOptionIndex:o}}let fe={[1](t){return t.disabled||t.listboxState===1?t:{...t,activeOptionIndex:null,listboxState:1}},[0](t){if(t.disabled||t.listboxState===0)return t;let i=t.activeOptionIndex,{value:n,mode:e}=t.propsRef.current,o=t.options.findIndex(p=>{let r=p.dataRef.current.value;return h(e,{[1]:()=>n.includes(r),[0]:()=>n===r})});return o!==-1&&(i=o),{...t,listboxState:0,activeOptionIndex:i}},[2](t,i){return t.disabled===i.disabled?t:{...t,disabled:i.disabled}},[3](t,i){return t.orientation===i.orientation?t:{...t,orientation:i.orientation}},[4](t,i){var o;if(t.disabled||t.listboxState===1)return t;let n=_(t),e=J(i,{resolveItems:()=>n.options,resolveActiveIndex:()=>n.activeOptionIndex,resolveId:p=>p.id,resolveDisabled:p=>p.dataRef.current.disabled});return{...t,...n,searchQuery:"",activeOptionIndex:e,activationTrigger:(o=i.trigger)!=null?o:1}},[5]:(t,i)=>{if(t.disabled||t.listboxState===1)return t;let e=t.searchQuery!==""?0:1,o=t.searchQuery+i.value.toLowerCase(),r=(t.activeOptionIndex!==null?t.options.slice(t.activeOptionIndex+e).concat(t.options.slice(0,t.activeOptionIndex+e)):t.options).find(u=>{var a;return!u.dataRef.current.disabled&&((a=u.dataRef.current.textValue)==null?void 0:a.startsWith(o))}),s=r?t.options.indexOf(r):-1;return s===-1||s===t.activeOptionIndex?{...t,searchQuery:o}:{...t,searchQuery:o,activeOptionIndex:s,activationTrigger:1}},[6](t){return t.disabled||t.listboxState===1||t.searchQuery===""?t:{...t,searchQuery:""}},[7]:(t,i)=>{let n={id:i.id,dataRef:i.dataRef},e=_(t,o=>[...o,n]);if(t.activeOptionIndex===null){let{value:o,mode:p}=t.propsRef.current,r=i.dataRef.current.value;h(p,{[1]:()=>o.includes(r),[0]:()=>o===r})&&(e.activeOptionIndex=e.options.indexOf(n))}return{...t,...e}},[8]:(t,i)=>{let n=_(t,e=>{let o=e.findIndex(p=>p.id===i.id);return o!==-1&&e.splice(o,1),e});return{...t,...n,activationTrigger:1}}},V=Q(null);V.displayName="ListboxContext";function I(t){let i=z(V);if(i===null){let n=new Error(`<${t} /> is missing a parent <Listbox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(n,I),n}return i}function be(t,i){return h(i.type,fe,t,i)}let Te=W,xe=M(function(i,n){let{value:e,name:o,onChange:p,disabled:r=!1,horizontal:s=!1,multiple:u=!1,...a}=i;const y=s?"horizontal":"vertical";let g=C(n),v=$(be,{listboxState:1,propsRef:{current:{value:e,onChange:p,mode:u?1:0}},labelRef:k(),buttonRef:k(),optionsRef:k(),disabled:r,orientation:y,options:[],searchQuery:"",activeOptionIndex:null,activationTrigger:1}),[{listboxState:f,propsRef:O,optionsRef:S,buttonRef:d},l]=v;O.current.value=e,O.current.mode=u?1:0,A(()=>{O.current.onChange=L=>h(O.current.mode,{[0](){return p(L)},[1](){let T=O.current.value.slice(),x=T.indexOf(L);return x===-1?T.push(L):T.splice(x,1),p(T)}})},[p,O]),A(()=>l({type:2,disabled:r}),[r]),A(()=>l({type:3,orientation:y}),[y]),ie([d,S],(L,T)=>{var x;f===0&&(l({type:1}),Z(T,ee.Loose)||(L.preventDefault(),(x=d.current)==null||x.focus()))});let c=D(()=>({open:f===0,disabled:r}),[f,r]),P={ref:g};return w.createElement(V.Provider,{value:v},w.createElement(ne,{value:h(f,{[0]:B.Open,[1]:B.Closed})},o!=null&&e!=null&&le({[o]:e}).map(([L,T])=>w.createElement(ae,{...q({key:L,as:"input",type:"hidden",hidden:!0,readOnly:!0,name:L,value:T})})),E({ourProps:P,theirProps:a,slot:c,defaultTag:Te,name:"Listbox"})))}),ye="button",Oe=M(function(i,n){var S;let[e,o]=I("Listbox.Button"),p=C(e.buttonRef,n),r=`headlessui-listbox-button-${F()}`,s=U(),u=R(d=>{switch(d.key){case b.Space:case b.Enter:case b.ArrowDown:d.preventDefault(),o({type:0}),s.nextFrame(()=>{e.propsRef.current.value||o({type:4,focus:m.First})});break;case b.ArrowUp:d.preventDefault(),o({type:0}),s.nextFrame(()=>{e.propsRef.current.value||o({type:4,focus:m.Last})});break}},[o,e,s]),a=R(d=>{switch(d.key){case b.Space:d.preventDefault();break}},[]),y=R(d=>{if(Y(d.currentTarget))return d.preventDefault();e.listboxState===0?(o({type:1}),s.nextFrame(()=>{var l;return(l=e.buttonRef.current)==null?void 0:l.focus({preventScroll:!0})})):(d.preventDefault(),o({type:0}))},[o,s,e]),g=K(()=>{if(!!e.labelRef.current)return[e.labelRef.current.id,r].join(" ")},[e.labelRef.current,r]),v=D(()=>({open:e.listboxState===0,disabled:e.disabled}),[e]),f=i,O={ref:p,id:r,type:re(i,e.buttonRef),"aria-haspopup":!0,"aria-controls":(S=e.optionsRef.current)==null?void 0:S.id,"aria-expanded":e.disabled?void 0:e.listboxState===0,"aria-labelledby":g,disabled:e.disabled,onKeyDown:u,onKeyUp:a,onClick:y};return E({ourProps:O,theirProps:f,slot:v,defaultTag:ye,name:"Listbox.Button"})}),ge="label",Re=M(function(i,n){let[e]=I("Listbox.Label"),o=`headlessui-listbox-label-${F()}`,p=C(e.labelRef,n),r=R(()=>{var y;return(y=e.buttonRef.current)==null?void 0:y.focus({preventScroll:!0})},[e.buttonRef]),s=D(()=>({open:e.listboxState===0,disabled:e.disabled}),[e]);return E({ourProps:{ref:p,id:o,onClick:r},theirProps:i,slot:s,defaultTag:ge,name:"Listbox.Label"})}),me="ul",Le=N.RenderStrategy|N.Static,ve=M(function(i,n){var d;let[e,o]=I("Listbox.Options"),p=C(e.optionsRef,n),r=`headlessui-listbox-options-${F()}`,s=U(),u=U(),a=oe(),y=(()=>a!==null?a===B.Open:e.listboxState===0)();X(()=>{var c;let l=e.optionsRef.current;!l||e.listboxState===0&&l!==((c=se(l))==null?void 0:c.activeElement)&&l.focus({preventScroll:!0})},[e.listboxState,e.optionsRef]);let g=R(l=>{switch(u.dispose(),l.key){case b.Space:if(e.searchQuery!=="")return l.preventDefault(),l.stopPropagation(),o({type:5,value:l.key});case b.Enter:if(l.preventDefault(),l.stopPropagation(),e.activeOptionIndex!==null){let{dataRef:c}=e.options[e.activeOptionIndex];e.propsRef.current.onChange(c.current.value)}e.propsRef.current.mode===0&&(o({type:1}),G().nextFrame(()=>{var c;return(c=e.buttonRef.current)==null?void 0:c.focus({preventScroll:!0})}));break;case h(e.orientation,{vertical:b.ArrowDown,horizontal:b.ArrowRight}):return l.preventDefault(),l.stopPropagation(),o({type:4,focus:m.Next});case h(e.orientation,{vertical:b.ArrowUp,horizontal:b.ArrowLeft}):return l.preventDefault(),l.stopPropagation(),o({type:4,focus:m.Previous});case b.Home:case b.PageUp:return l.preventDefault(),l.stopPropagation(),o({type:4,focus:m.First});case b.End:case b.PageDown:return l.preventDefault(),l.stopPropagation(),o({type:4,focus:m.Last});case b.Escape:return l.preventDefault(),l.stopPropagation(),o({type:1}),s.nextFrame(()=>{var c;return(c=e.buttonRef.current)==null?void 0:c.focus({preventScroll:!0})});case b.Tab:l.preventDefault(),l.stopPropagation();break;default:l.key.length===1&&(o({type:5,value:l.key}),u.setTimeout(()=>o({type:6}),350));break}},[s,o,u,e]),v=K(()=>{var l,c,P;return(P=(l=e.labelRef.current)==null?void 0:l.id)!=null?P:(c=e.buttonRef.current)==null?void 0:c.id},[e.labelRef.current,e.buttonRef.current]),f=D(()=>({open:e.listboxState===0}),[e]),O=i,S={"aria-activedescendant":e.activeOptionIndex===null||(d=e.options[e.activeOptionIndex])==null?void 0:d.id,"aria-multiselectable":e.propsRef.current.mode===1?!0:void 0,"aria-labelledby":v,"aria-orientation":e.orientation,id:r,onKeyDown:g,role:"listbox",tabIndex:0,ref:p};return E({ourProps:S,theirProps:O,slot:f,defaultTag:me,features:Le,visible:y,name:"Listbox.Options"})}),Se="li",Ae=M(function(i,n){let{disabled:e=!1,value:o,...p}=i,[r,s]=I("Listbox.Option"),u=`headlessui-listbox-option-${F()}`,a=r.activeOptionIndex!==null?r.options[r.activeOptionIndex].id===u:!1,y=h(r.propsRef.current.mode,{[1]:()=>r.propsRef.current.value.includes(o),[0]:()=>r.propsRef.current.value===o}),g=H(null),v=C(n,g);A(()=>{if(r.listboxState!==0||!a||r.activationTrigger===0)return;let T=G();return T.requestAnimationFrame(()=>{var x,j;(j=(x=g.current)==null?void 0:x.scrollIntoView)==null||j.call(x,{block:"nearest"})}),T.dispose},[g,a,r.listboxState,r.activationTrigger,r.activeOptionIndex]);let f=H({disabled:e,value:o,domRef:g});A(()=>{f.current.disabled=e},[f,e]),A(()=>{f.current.value=o},[f,o]),A(()=>{var T,x;f.current.textValue=(x=(T=g.current)==null?void 0:T.textContent)==null?void 0:x.toLowerCase()},[f,g]);let O=R(()=>r.propsRef.current.onChange(o),[r.propsRef,o]);A(()=>(s({type:7,id:u,dataRef:f}),()=>s({type:8,id:u})),[f,u]);let S=R(T=>{if(e)return T.preventDefault();O(),r.propsRef.current.mode===0&&(s({type:1}),G().nextFrame(()=>{var x;return(x=r.buttonRef.current)==null?void 0:x.focus({preventScroll:!0})}))},[s,r.buttonRef,e,O]),d=R(()=>{if(e)return s({type:4,focus:m.Nothing});s({type:4,focus:m.Specific,id:u})},[e,u,s]),l=R(()=>{e||a||s({type:4,focus:m.Specific,id:u,trigger:0})},[e,a,u,s]),c=R(()=>{e||!a||s({type:4,focus:m.Nothing})},[e,a,s]),P=D(()=>({active:a,selected:y,disabled:e}),[a,y,e]);return E({ourProps:{id:u,ref:v,role:"option",tabIndex:e===!0?void 0:-1,"aria-disabled":e===!0?!0:void 0,"aria-selected":y===!0?!0:void 0,disabled:void 0,onClick:S,onFocus:d,onPointerMove:l,onMouseMove:l,onPointerLeave:c,onMouseLeave:c},theirProps:p,slot:P,defaultTag:Se,name:"Listbox.Option"})}),et=Object.assign(xe,{Button:Oe,Label:Re,Options:ve,Option:Ae});export{et as Listbox};
+"use client";import{useFocusRing as Ee}from"@react-aria/focus";import{useHover as De}from"@react-aria/interactions";import h,{Fragment as ce,createContext as ie,createRef as he,useCallback as fe,useContext as re,useEffect as be,useMemo as N,useReducer as _e,useRef as V,useState as Ie}from"react";import{flushSync as G}from"react-dom";import{useActivePress as Ce}from'../../hooks/use-active-press.js';import{useByComparator as Fe}from'../../hooks/use-by-comparator.js';import{useComputed as Me}from'../../hooks/use-computed.js';import{useControllable as we}from'../../hooks/use-controllable.js';import{useDefaultValue as Be}from'../../hooks/use-default-value.js';import{useDidElementMove as ke}from'../../hooks/use-did-element-move.js';import{useDisposables as Te}from'../../hooks/use-disposables.js';import{useElementSize as Ue}from'../../hooks/use-element-size.js';import{useEvent as x}from'../../hooks/use-event.js';import{useId as ae}from'../../hooks/use-id.js';import{useInertOthers as Ne}from'../../hooks/use-inert-others.js';import{useIsoMorphicEffect as le}from'../../hooks/use-iso-morphic-effect.js';import{useLatestValue as Ge}from'../../hooks/use-latest-value.js';import{useOnDisappear as Ve}from'../../hooks/use-on-disappear.js';import{useOutsideClick as He}from'../../hooks/use-outside-click.js';import{useOwnerDocument as Ke}from'../../hooks/use-owner.js';import{useResolveButtonType as je}from'../../hooks/use-resolve-button-type.js';import{useScrollLock as ze}from'../../hooks/use-scroll-lock.js';import{useSyncRefs as j}from'../../hooks/use-sync-refs.js';import{useTextValue as We}from'../../hooks/use-text-value.js';import{useTrackedPointer as Qe}from'../../hooks/use-tracked-pointer.js';import{useTransitionData as Xe}from'../../hooks/use-transition-data.js';import{useDisabled as Je}from'../../internal/disabled.js';import{FloatingProvider as $e,useFloatingPanel as qe,useFloatingPanelProps as Ye,useFloatingReference as Ze,useFloatingReferenceProps as et,useResolvedAnchor as tt}from'../../internal/floating.js';import{FormFields as ot}from'../../internal/form-fields.js';import{useProvidedId as nt}from'../../internal/id.js';import{OpenClosedProvider as it,State as J,useOpenClosed as rt}from'../../internal/open-closed.js';import{isDisabledReactIssue7711 as at}from'../../utils/bugs.js';import{Focus as y,calculateActiveIndex as se}from'../../utils/calculate-active-index.js';import{disposables as lt}from'../../utils/disposables.js';import{Focus as xe,FocusableMode as st,focusFrom as pt,isFocusableElement as ut,sortByDomNode as dt}from'../../utils/focus-management.js';import{attemptSubmit as ct}from'../../utils/form.js';import{match as H}from'../../utils/match.js';import{getOwnerDocument as ft}from'../../utils/owner.js';import{RenderFeatures as me,forwardRefWithAs as z,mergeProps as Oe,render as W}from'../../utils/render.js';import{useDescribedBy as bt}from'../description/description.js';import{Keys as P}from'../keyboard.js';import{Label as Tt,useLabelledBy as xt,useLabels as mt}from'../label/label.js';import{Portal as Ot}from'../portal/portal.js';var yt=(o=>(o[o.Open=0]="Open",o[o.Closed=1]="Closed",o))(yt||{}),vt=(o=>(o[o.Single=0]="Single",o[o.Multi=1]="Multi",o))(vt||{}),gt=(o=>(o[o.Pointer=0]="Pointer",o[o.Other=1]="Other",o))(gt||{}),Lt=(i=>(i[i.OpenListbox=0]="OpenListbox",i[i.CloseListbox=1]="CloseListbox",i[i.GoToOption=2]="GoToOption",i[i.Search=3]="Search",i[i.ClearSearch=4]="ClearSearch",i[i.RegisterOption=5]="RegisterOption",i[i.UnregisterOption=6]="UnregisterOption",i))(Lt||{});function pe(e,r=o=>o){let o=e.activeOptionIndex!==null?e.options[e.activeOptionIndex]:null,n=dt(r(e.options.slice()),O=>O.dataRef.current.domRef.current),l=o?n.indexOf(o):null;return l===-1&&(l=null),{options:n,activeOptionIndex:l}}let St={[1](e){return e.dataRef.current.disabled||e.listboxState===1?e:{...e,activeOptionIndex:null,listboxState:1,__demoMode:!1}},[0](e){if(e.dataRef.current.disabled||e.listboxState===0)return e;let r=e.activeOptionIndex,{isSelected:o}=e.dataRef.current,n=e.options.findIndex(l=>o(l.dataRef.current.value));return n!==-1&&(r=n),{...e,listboxState:0,activeOptionIndex:r,__demoMode:!1}},[2](e,r){var O,v,i,s,p;if(e.dataRef.current.disabled||e.listboxState===1)return e;let o={...e,searchQuery:"",activationTrigger:(O=r.trigger)!=null?O:1,__demoMode:!1};if(r.focus===y.Nothing)return{...o,activeOptionIndex:null};if(r.focus===y.Specific)return{...o,activeOptionIndex:e.options.findIndex(t=>t.id===r.id)};if(r.focus===y.Previous){let t=e.activeOptionIndex;if(t!==null){let u=e.options[t].dataRef.current.domRef,b=se(r,{resolveItems:()=>e.options,resolveActiveIndex:()=>e.activeOptionIndex,resolveId:c=>c.id,resolveDisabled:c=>c.dataRef.current.disabled});if(b!==null){let c=e.options[b].dataRef.current.domRef;if(((v=u.current)==null?void 0:v.previousElementSibling)===c.current||((i=c.current)==null?void 0:i.previousElementSibling)===null)return{...o,activeOptionIndex:b}}}}else if(r.focus===y.Next){let t=e.activeOptionIndex;if(t!==null){let u=e.options[t].dataRef.current.domRef,b=se(r,{resolveItems:()=>e.options,resolveActiveIndex:()=>e.activeOptionIndex,resolveId:c=>c.id,resolveDisabled:c=>c.dataRef.current.disabled});if(b!==null){let c=e.options[b].dataRef.current.domRef;if(((s=u.current)==null?void 0:s.nextElementSibling)===c.current||((p=c.current)==null?void 0:p.nextElementSibling)===null)return{...o,activeOptionIndex:b}}}}let n=pe(e),l=se(r,{resolveItems:()=>n.options,resolveActiveIndex:()=>n.activeOptionIndex,resolveId:t=>t.id,resolveDisabled:t=>t.dataRef.current.disabled});return{...o,...n,activeOptionIndex:l}},[3]:(e,r)=>{if(e.dataRef.current.disabled||e.listboxState===1)return e;let n=e.searchQuery!==""?0:1,l=e.searchQuery+r.value.toLowerCase(),v=(e.activeOptionIndex!==null?e.options.slice(e.activeOptionIndex+n).concat(e.options.slice(0,e.activeOptionIndex+n)):e.options).find(s=>{var p;return!s.dataRef.current.disabled&&((p=s.dataRef.current.textValue)==null?void 0:p.startsWith(l))}),i=v?e.options.indexOf(v):-1;return i===-1||i===e.activeOptionIndex?{...e,searchQuery:l}:{...e,searchQuery:l,activeOptionIndex:i,activationTrigger:1}},[4](e){return e.dataRef.current.disabled||e.listboxState===1||e.searchQuery===""?e:{...e,searchQuery:""}},[5]:(e,r)=>{let o={id:r.id,dataRef:r.dataRef},n=pe(e,l=>[...l,o]);return e.activeOptionIndex===null&&e.dataRef.current.isSelected(r.dataRef.current.value)&&(n.activeOptionIndex=n.options.indexOf(o)),{...e,...n}},[6]:(e,r)=>{let o=pe(e,n=>{let l=n.findIndex(O=>O.id===r.id);return l!==-1&&n.splice(l,1),n});return{...e,...o,activationTrigger:1}}},ue=ie(null);ue.displayName="ListboxActionsContext";function $(e){let r=re(ue);if(r===null){let o=new Error(`<${e} /> is missing a parent <Listbox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,$),o}return r}let q=ie(null);q.displayName="ListboxDataContext";function Q(e){let r=re(q);if(r===null){let o=new Error(`<${e} /> is missing a parent <Listbox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,Q),o}return r}function Rt(e,r){return H(r.type,St,e,r)}let Pt=ce;function At(e,r){var de;let o=Je(),{value:n,defaultValue:l,form:O,name:v,onChange:i,by:s,invalid:p=!1,disabled:t=o||!1,horizontal:u=!1,multiple:b=!1,__demoMode:c=!1,...E}=e;const w=u?"horizontal":"vertical";let k=j(r),_=Be(l),[f=b?[]:void 0,L]=we(n,i,_),[I,S]=_e(Rt,{dataRef:he(),listboxState:c?0:1,options:[],searchQuery:"",activeOptionIndex:null,activationTrigger:1,optionsVisible:!1,__demoMode:c}),B=V({static:!1,hold:!1}),U=V(null),T=V(null),D=V(new Map),M=Fe(s),g=fe(m=>H(d.mode,{[1]:()=>f.some(R=>M(R,m)),[0]:()=>M(f,m)}),[f]),d=N(()=>({...I,value:f,disabled:t,invalid:p,mode:b?1:0,orientation:w,compare:M,isSelected:g,optionsPropsRef:B,buttonRef:U,optionsRef:T,listRef:D}),[f,t,p,b,I,D]);le(()=>{I.dataRef.current=d},[d]);let Y=d.listboxState===0;He(Y,[d.buttonRef,d.optionsRef],(m,R)=>{var F;S({type:1}),ut(R,st.Loose)||(m.preventDefault(),(F=d.buttonRef.current)==null||F.focus())});let Z=N(()=>({open:d.listboxState===0,disabled:t,invalid:p,value:f}),[d,t,f,p]),ee=x(m=>{let R=d.options.find(F=>F.id===m);R&&A(R.dataRef.current.value)}),X=x(()=>{if(d.activeOptionIndex!==null){let{dataRef:m,id:R}=d.options[d.activeOptionIndex];A(m.current.value),S({type:2,focus:y.Specific,id:R})}}),te=x(()=>S({type:0})),oe=x(()=>S({type:1})),K=Te(),a=x((m,R,F)=>{K.dispose(),K.microTask(()=>m===y.Specific?S({type:2,focus:y.Specific,id:R,trigger:F}):S({type:2,focus:m,trigger:F}))}),C=x((m,R)=>(S({type:5,id:m,dataRef:R}),()=>S({type:6,id:m}))),A=x(m=>H(d.mode,{[0](){return L==null?void 0:L(m)},[1](){let R=d.value.slice(),F=R.findIndex(Ae=>M(Ae,m));return F===-1?R.push(m):R.splice(F,1),L==null?void 0:L(R)}})),ne=x(m=>S({type:3,value:m})),ve=x(()=>S({type:4})),ge=N(()=>({onChange:A,registerOption:C,goToOption:a,closeListbox:oe,openListbox:te,selectActiveOption:X,selectOption:ee,search:ne,clearSearch:ve}),[]),[Le,Se]=mt({inherit:!0}),Re={ref:k},Pe=fe(()=>{if(_!==void 0)return L==null?void 0:L(_)},[L,_]);return h.createElement(Se,{value:Le,props:{htmlFor:(de=d.buttonRef.current)==null?void 0:de.id},slot:{open:d.listboxState===0,disabled:t}},h.createElement($e,null,h.createElement(ue.Provider,{value:ge},h.createElement(q.Provider,{value:d},h.createElement(it,{value:H(d.listboxState,{[0]:J.Open,[1]:J.Closed})},v!=null&&f!=null&&h.createElement(ot,{disabled:t,data:{[v]:f},form:O,onReset:Pe}),W({ourProps:Re,theirProps:E,slot:Z,defaultTag:Pt,name:"Listbox"}))))))}let Et="button";function Dt(e,r){var M;let o=Q("Listbox.Button"),n=$("Listbox.Button"),l=ae(),O=nt(),{id:v=O||`headlessui-listbox-button-${l}`,disabled:i=o.disabled||!1,autoFocus:s=!1,...p}=e,t=j(o.buttonRef,r,Ze()),u=et(),b=x(g=>{switch(g.key){case P.Enter:ct(g.currentTarget);break;case P.Space:case P.ArrowDown:g.preventDefault(),G(()=>n.openListbox()),o.value||n.goToOption(y.First);break;case P.ArrowUp:g.preventDefault(),G(()=>n.openListbox()),o.value||n.goToOption(y.Last);break}}),c=x(g=>{switch(g.key){case P.Space:g.preventDefault();break}}),E=x(g=>{var d;if(at(g.currentTarget))return g.preventDefault();o.listboxState===0?(G(()=>n.closeListbox()),(d=o.buttonRef.current)==null||d.focus({preventScroll:!0})):(g.preventDefault(),n.openListbox())}),w=x(g=>g.preventDefault()),k=xt([v]),_=bt(),{isFocusVisible:f,focusProps:L}=Ee({autoFocus:s}),{isHovered:I,hoverProps:S}=De({isDisabled:i}),{pressed:B,pressProps:U}=Ce({disabled:i}),T=N(()=>({open:o.listboxState===0,active:B||o.listboxState===0,disabled:i,invalid:o.invalid,value:o.value,hover:I,focus:f,autofocus:s}),[o.listboxState,o.value,i,I,f,B,o.invalid,s]),D=Oe(u(),{ref:t,id:v,type:je(e,o.buttonRef),"aria-haspopup":"listbox","aria-controls":(M=o.optionsRef.current)==null?void 0:M.id,"aria-expanded":o.listboxState===0,"aria-labelledby":k,"aria-describedby":_,disabled:i||void 0,autoFocus:s,onKeyDown:b,onKeyUp:c,onKeyPress:w,onClick:E},L,S,U);return W({ourProps:D,theirProps:p,slot:T,defaultTag:Et,name:"Listbox.Button"})}let ye=ie(!1),ht="div",_t=me.RenderStrategy|me.Static;function It(e,r){var K;let o=ae(),{id:n=`headlessui-listbox-options-${o}`,anchor:l,portal:O=!1,modal:v=!0,transition:i=!1,...s}=e,p=tt(l);p&&(O=!0);let t=Q("Listbox.Options"),u=$("Listbox.Options"),b=Ke(t.optionsRef),c=rt(),[E,w]=Xe(i,t.optionsRef,c!==null?(c&J.Open)===J.Open:t.listboxState===0);Ve(E,t.buttonRef,u.closeListbox);let k=t.__demoMode?!1:v&&t.listboxState===0;ze(k,b);let _=t.__demoMode?!1:v&&t.listboxState===0;Ne(_,{allowed:x(()=>[t.buttonRef.current,t.optionsRef.current])});let f=V(null);be(()=>{var C;if(!((C=p==null?void 0:p.to)!=null&&C.includes("selection")))return;if(!E){f.current=null;return}let a=Array.from(t.listRef.current.values());f.current=a.findIndex(A=>(A==null?void 0:A.dataset.selected)===""),f.current===-1&&(f.current=a.findIndex(A=>(A==null?void 0:A.dataset.disabled)===void 0),u.goToOption(y.First))},[E,t.listRef]);let L=t.listboxState!==0,S=ke(L,t.buttonRef)?!1:E,B=(()=>{if(p==null)return;if(t.listRef.current.size<=0)return{...p,inner:void 0};let a=Array.from(t.listRef.current.values());return{...p,inner:{listRef:{current:a},index:f.current}}})(),[U,T]=qe(B),D=Ye(),M=j(t.optionsRef,r,p?U:null),g=Te();be(()=>{var C;let a=t.optionsRef.current;a&&t.listboxState===0&&a!==((C=ft(a))==null?void 0:C.activeElement)&&(a==null||a.focus({preventScroll:!0}))},[t.listboxState,t.optionsRef,t.optionsRef.current]);let d=x(a=>{var C,A;switch(g.dispose(),a.key){case P.Space:if(t.searchQuery!=="")return a.preventDefault(),a.stopPropagation(),u.search(a.key);case P.Enter:if(a.preventDefault(),a.stopPropagation(),t.activeOptionIndex!==null){let{dataRef:ne}=t.options[t.activeOptionIndex];u.onChange(ne.current.value)}t.mode===0&&(G(()=>u.closeListbox()),(C=t.buttonRef.current)==null||C.focus({preventScroll:!0}));break;case H(t.orientation,{vertical:P.ArrowDown,horizontal:P.ArrowRight}):return a.preventDefault(),a.stopPropagation(),u.goToOption(y.Next);case H(t.orientation,{vertical:P.ArrowUp,horizontal:P.ArrowLeft}):return a.preventDefault(),a.stopPropagation(),u.goToOption(y.Previous);case P.Home:case P.PageUp:return a.preventDefault(),a.stopPropagation(),u.goToOption(y.First);case P.End:case P.PageDown:return a.preventDefault(),a.stopPropagation(),u.goToOption(y.Last);case P.Escape:a.preventDefault(),a.stopPropagation(),G(()=>u.closeListbox()),(A=t.buttonRef.current)==null||A.focus({preventScroll:!0});return;case P.Tab:a.preventDefault(),a.stopPropagation(),G(()=>u.closeListbox()),pt(t.buttonRef.current,a.shiftKey?xe.Previous:xe.Next);break;default:a.key.length===1&&(u.search(a.key),g.setTimeout(()=>u.clearSearch(),350));break}}),Y=Me(()=>{var a;return(a=t.buttonRef.current)==null?void 0:a.id},[t.buttonRef.current]),Z=N(()=>({open:t.listboxState===0,...w}),[t.listboxState,w]),ee=Oe(p?D():{},{id:n,ref:M,"aria-activedescendant":t.activeOptionIndex===null||(K=t.options[t.activeOptionIndex])==null?void 0:K.id,"aria-multiselectable":t.mode===1?!0:void 0,"aria-labelledby":Y,"aria-orientation":t.orientation,onKeyDown:d,role:"listbox",tabIndex:t.listboxState===0?0:void 0,style:{...s.style,...T,"--button-width":Ue(t.buttonRef,!0).width}}),[X,te]=Ie(t.value);t.value!==X&&t.listboxState===0&&t.mode!==1&&te(t.value);let oe=x(a=>t.compare(X,a));return h.createElement(Ot,{enabled:O?e.static||E:!1},h.createElement(q.Provider,{value:t.mode===1?t:{...t,isSelected:oe}},W({ourProps:ee,theirProps:s,slot:Z,defaultTag:ht,features:_t,visible:S,name:"Listbox.Options"})))}let Ct="div";function Ft(e,r){let o=ae(),{id:n=`headlessui-listbox-option-${o}`,disabled:l=!1,value:O,...v}=e,i=re(ye)===!0,s=Q("Listbox.Option"),p=$("Listbox.Option"),t=s.activeOptionIndex!==null?s.options[s.activeOptionIndex].id===n:!1,u=s.isSelected(O),b=V(null),c=We(b),E=Ge({disabled:l,value:O,domRef:b,get textValue(){return c()}}),w=j(r,b,T=>{T?s.listRef.current.set(n,T):s.listRef.current.delete(n)});le(()=>{if(!s.__demoMode&&s.listboxState===0&&t&&s.activationTrigger!==0)return lt().requestAnimationFrame(()=>{var T,D;(D=(T=b.current)==null?void 0:T.scrollIntoView)==null||D.call(T,{block:"nearest"})})},[b,t,s.__demoMode,s.listboxState,s.activationTrigger,s.activeOptionIndex]),le(()=>{if(!i)return p.registerOption(n,E)},[E,n,i]);let k=x(T=>{var D;if(l)return T.preventDefault();p.onChange(O),s.mode===0&&(G(()=>p.closeListbox()),(D=s.buttonRef.current)==null||D.focus({preventScroll:!0}))}),_=x(()=>{if(l)return p.goToOption(y.Nothing);p.goToOption(y.Specific,n)}),f=Qe(),L=x(T=>{f.update(T),!l&&(t||p.goToOption(y.Specific,n,0))}),I=x(T=>{f.wasMoved(T)&&(l||t||p.goToOption(y.Specific,n,0))}),S=x(T=>{f.wasMoved(T)&&(l||t&&p.goToOption(y.Nothing))}),B=N(()=>({active:t,focus:t,selected:u,disabled:l,selectedOption:u&&i}),[t,u,l,i]),U=i?{}:{id:n,ref:w,role:"option",tabIndex:l===!0?void 0:-1,"aria-disabled":l===!0?!0:void 0,"aria-selected":u,disabled:void 0,onClick:k,onFocus:_,onPointerEnter:L,onMouseEnter:L,onPointerMove:I,onMouseMove:I,onPointerLeave:S,onMouseLeave:S};return!u&&i?null:W({ourProps:U,theirProps:v,slot:B,defaultTag:Ct,name:"Listbox.Option"})}let Mt=ce;function wt(e,r){let{options:o,placeholder:n,...l}=e,v={ref:j(r)},i=Q("ListboxSelectedOption"),s=N(()=>({}),[]),p=i.value===void 0||i.value===null||i.mode===1&&Array.isArray(i.value)&&i.value.length===0;return h.createElement(ye.Provider,{value:!0},W({ourProps:v,theirProps:{...l,children:h.createElement(h.Fragment,null,n&&p?n:o)},slot:s,defaultTag:Mt,name:"ListboxSelectedOption"}))}let Bt=z(At),kt=z(Dt),Ut=Tt,Nt=z(It),Gt=z(Ft),Vt=z(wt),Co=Object.assign(Bt,{Button:kt,Label:Ut,Options:Nt,Option:Gt,SelectedOption:Vt});export{Co as Listbox,kt as ListboxButton,Ut as ListboxLabel,Gt as ListboxOption,Nt as ListboxOptions,Vt as ListboxSelectedOption};

dist/components/menu/menu.d.ts

@@ -1,48 +0,118 @@
-import React, { Ref } from 'react';
-import { Props } from '../../types';
-import { PropsForFeatures } from '../../utils/render';
-interface MenuRenderPropArg {
+import React, { type ElementType, type Ref } from 'react';
+import { type TransitionData } from '../../hooks/use-transition-data.js';
+import { type AnchorProps } from '../../internal/floating.js';
+import type { Props } from '../../types.js';
+import { type HasDisplayName, type RefProp } from '../../utils/render.js';
+declare let DEFAULT_MENU_TAG: React.ExoticComponent<{
+    children?: React.ReactNode;
+}>;
+type MenuRenderPropArg = {
     open: boolean;
-}
-interface ButtonRenderPropArg {
+    close: () => void;
+};
+type MenuPropsWeControl = never;
+export type MenuProps<TTag extends ElementType = typeof DEFAULT_MENU_TAG> = Props<TTag, MenuRenderPropArg, MenuPropsWeControl, {
+    __demoMode?: boolean;
+}>;
+declare function MenuFn<TTag extends ElementType = typeof DEFAULT_MENU_TAG>(props: MenuProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element;
+declare let DEFAULT_BUTTON_TAG: "button";
+type ButtonRenderPropArg = {
     open: boolean;
-}
-declare type ButtonPropsWeControl = 'id' | 'type' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded' | 'onKeyDown' | 'onClick';
-interface ItemsRenderPropArg {
+    active: boolean;
+    hover: boolean;
+    focus: boolean;
+    disabled: boolean;
+    autofocus: boolean;
+};
+type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded' | 'aria-haspopup';
+export type MenuButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, {
+    disabled?: boolean;
+    autoFocus?: boolean;
+}>;
+declare function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: MenuButtonProps<TTag>, ref: Ref<HTMLButtonElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+declare let DEFAULT_ITEMS_TAG: "div";
+type ItemsRenderPropArg = {
     open: boolean;
-}
-declare type ItemsPropsWeControl = 'aria-activedescendant' | 'aria-labelledby' | 'id' | 'onKeyDown' | 'role' | 'tabIndex';
-declare let ItemsRenderFeatures: number;
-interface ItemRenderPropArg {
+} & TransitionData;
+type ItemsPropsWeControl = 'aria-activedescendant' | 'aria-labelledby' | 'role' | 'tabIndex';
+export type MenuItemsProps<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG> = Props<TTag, ItemsRenderPropArg, ItemsPropsWeControl, {
+    anchor?: AnchorProps;
+    portal?: boolean;
+    modal?: boolean;
+    transition?: boolean;
+    static?: boolean;
+    unmount?: boolean;
+}>;
+declare function ItemsFn<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(props: MenuItemsProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element;
+declare let DEFAULT_ITEM_TAG: React.ExoticComponent<{
+    children?: React.ReactNode;
+}>;
+type ItemRenderPropArg = {
+    /** @deprecated use `focus` instead */
     active: boolean;
+    focus: boolean;
     disabled: boolean;
+    close: () => void;
+};
+type ItemPropsWeControl = 'aria-describedby' | 'aria-disabled' | 'aria-labelledby' | 'role' | 'tabIndex';
+export type MenuItemProps<TTag extends ElementType = typeof DEFAULT_ITEM_TAG> = Props<TTag, ItemRenderPropArg, ItemPropsWeControl, {
+    disabled?: boolean;
+}>;
+declare function ItemFn<TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(props: MenuItemProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element;
+declare let DEFAULT_SECTION_TAG: "div";
+type SectionRenderPropArg = {};
+type SectionPropsWeControl = 'role' | 'aria-labelledby';
+export type MenuSectionProps<TTag extends ElementType = typeof DEFAULT_SECTION_TAG> = Props<TTag, SectionRenderPropArg, SectionPropsWeControl>;
+declare function SectionFn<TTag extends ElementType = typeof DEFAULT_SECTION_TAG>(props: MenuSectionProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element;
+declare let DEFAULT_HEADING_TAG: "header";
+type HeadingRenderPropArg = {};
+type HeadingPropsWeControl = 'role';
+export type MenuHeadingProps<TTag extends ElementType = typeof DEFAULT_HEADING_TAG> = Props<TTag, HeadingRenderPropArg, HeadingPropsWeControl>;
+declare function HeadingFn<TTag extends ElementType = typeof DEFAULT_HEADING_TAG>(props: MenuHeadingProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+declare let DEFAULT_SEPARATOR_TAG: "div";
+type SeparatorRenderPropArg = {};
+type SeparatorPropsWeControl = 'role';
+export type MenuSeparatorProps<TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG> = Props<TTag, SeparatorRenderPropArg, SeparatorPropsWeControl>;
+declare function SeparatorFn<TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG>(props: MenuSeparatorProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export interface _internal_ComponentMenu extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_MENU_TAG>(props: MenuProps<TTag> & RefProp<typeof MenuFn>): JSX.Element;
 }
-declare type MenuItemPropsWeControl = 'id' | 'role' | 'tabIndex' | 'aria-disabled' | 'onPointerLeave' | 'onPointerMove' | 'onMouseLeave' | 'onMouseMove' | 'onFocus';
-export declare let Menu: (<TTag extends React.ElementType<any> = React.ExoticComponent<{
-    children?: React.ReactNode;
-}>>(props: Props<TTag, MenuRenderPropArg, "1D45E01E-AF44-47C4-988A-19A94EBAF55C">, ref: Ref<HTMLElement>) => JSX.Element) & {
-    displayName: string;
-} & {
-    Button: (<TTag_1 extends React.ElementType<any> = "button">(props: Props<TTag_1, ButtonRenderPropArg, ButtonPropsWeControl>, ref: Ref<HTMLButtonElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
-    Items: (<TTag_2 extends React.ElementType<any> = "div">(props: Props<TTag_2, ItemsRenderPropArg, ItemsPropsWeControl> & (({
-        static?: undefined;
-    } & {
-        unmount?: boolean | undefined;
-    }) | ({
-        unmount?: undefined;
-    } & {
-        static?: boolean | undefined;
-    })), ref: Ref<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
-    Item: (<TTag_3 extends React.ElementType<any> = React.ExoticComponent<{
-        children?: React.ReactNode;
-    }>>(props: Props<TTag_3, ItemRenderPropArg, MenuItemPropsWeControl> & {
-        disabled?: boolean | undefined;
-    }, ref: Ref<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
+export interface _internal_ComponentMenuButton extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: MenuButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element;
+}
+export interface _internal_ComponentMenuItems extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(props: MenuItemsProps<TTag> & RefProp<typeof ItemsFn>): JSX.Element;
+}
+export interface _internal_ComponentMenuItem extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(props: MenuItemProps<TTag> & RefProp<typeof ItemFn>): JSX.Element;
+}
+export interface _internal_ComponentMenuSection extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_SECTION_TAG>(props: MenuSectionProps<TTag> & RefProp<typeof SectionFn>): JSX.Element;
+}
+export interface _internal_ComponentMenuHeading extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_HEADING_TAG>(props: MenuHeadingProps<TTag> & RefProp<typeof HeadingFn>): JSX.Element;
+}
+export interface _internal_ComponentMenuSeparator extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG>(props: MenuSeparatorProps<TTag> & RefProp<typeof SeparatorFn>): JSX.Element;
+}
+export declare let MenuButton: _internal_ComponentMenuButton;
+export declare let MenuItems: _internal_ComponentMenuItems;
+export declare let MenuItem: _internal_ComponentMenuItem;
+export declare let MenuSection: _internal_ComponentMenuSection;
+export declare let MenuHeading: _internal_ComponentMenuHeading;
+export declare let MenuSeparator: _internal_ComponentMenuSeparator;
+export declare let Menu: _internal_ComponentMenu & {
+    /** @deprecated use `<MenuButton>` instead of `<Menu.Button>` */
+    Button: _internal_ComponentMenuButton;
+    /** @deprecated use `<MenuItems>` instead of `<Menu.Items>` */
+    Items: _internal_ComponentMenuItems;
+    /** @deprecated use `<MenuItem>` instead of `<Menu.Item>` */
+    Item: _internal_ComponentMenuItem;
+    /** @deprecated use `<MenuSection>` instead of `<Menu.Section>` */
+    Section: _internal_ComponentMenuSection;
+    /** @deprecated use `<MenuHeading>` instead of `<Menu.Heading>` */
+    Heading: _internal_ComponentMenuHeading;
+    /** @deprecated use `<MenuSeparator>` instead of `<Menu.Separator>` */
+    Separator: _internal_ComponentMenuSeparator;
 };
 export {};

dist/components/menu/menu.js

@@ -1,1 +0,1 @@
-import U,{Fragment as G,createContext as j,createRef as B,useCallback as y,useContext as Q,useEffect as W,useMemo as v,useReducer as V,useRef as _}from"react";import{match as K}from"../../utils/match.js";import{forwardRefWithAs as h,render as P,Features as H}from"../../utils/render.js";import{disposables as x}from"../../utils/disposables.js";import{useDisposables as N}from"../../hooks/use-disposables.js";import{useIsoMorphicEffect as E}from"../../hooks/use-iso-morphic-effect.js";import{useSyncRefs as D}from"../../hooks/use-sync-refs.js";import{useId as F}from"../../hooks/use-id.js";import{Keys as d}from"../keyboard.js";import{Focus as I,calculateActiveIndex as $}from"../../utils/calculate-active-index.js";import{isDisabledReactIssue7711 as q}from"../../utils/bugs.js";import{isFocusableElement as J,FocusableMode as z,sortByDomNode as X}from"../../utils/focus-management.js";import{useOutsideClick as Y}from"../../hooks/use-outside-click.js";import{useTreeWalker as Z}from"../../hooks/use-tree-walker.js";import{useOpenClosed as ee,State as L,OpenClosedProvider as te}from"../../internal/open-closed.js";import{useResolveButtonType as re}from"../../hooks/use-resolve-button-type.js";import{useOwnerDocument as ne}from"../../hooks/use-owner.js";var oe=(a=>(a[a.Open=0]="Open",a[a.Closed=1]="Closed",a))(oe||{}),ae=(a=>(a[a.Pointer=0]="Pointer",a[a.Other=1]="Other",a))(ae||{}),ie=(o=>(o[o.OpenMenu=0]="OpenMenu",o[o.CloseMenu=1]="CloseMenu",o[o.GoToItem=2]="GoToItem",o[o.Search=3]="Search",o[o.ClearSearch=4]="ClearSearch",o[o.RegisterItem=5]="RegisterItem",o[o.UnregisterItem=6]="UnregisterItem",o))(ie||{});function k(t,i=a=>a){let a=t.activeItemIndex!==null?t.items[t.activeItemIndex]:null,e=X(i(t.items.slice()),u=>u.dataRef.current.domRef.current),r=a?e.indexOf(a):null;return r===-1&&(r=null),{items:e,activeItemIndex:r}}let ue={[1](t){return t.menuState===1?t:{...t,activeItemIndex:null,menuState:1}},[0](t){return t.menuState===0?t:{...t,menuState:0}},[2]:(t,i)=>{var r;let a=k(t),e=$(i,{resolveItems:()=>a.items,resolveActiveIndex:()=>a.activeItemIndex,resolveId:u=>u.id,resolveDisabled:u=>u.dataRef.current.disabled});return{...t,...a,searchQuery:"",activeItemIndex:e,activationTrigger:(r=i.trigger)!=null?r:1}},[3]:(t,i)=>{let e=t.searchQuery!==""?0:1,r=t.searchQuery+i.value.toLowerCase(),s=(t.activeItemIndex!==null?t.items.slice(t.activeItemIndex+e).concat(t.items.slice(0,t.activeItemIndex+e)):t.items).find(l=>{var p;return((p=l.dataRef.current.textValue)==null?void 0:p.startsWith(r))&&!l.dataRef.current.disabled}),o=s?t.items.indexOf(s):-1;return o===-1||o===t.activeItemIndex?{...t,searchQuery:r}:{...t,searchQuery:r,activeItemIndex:o,activationTrigger:1}},[4](t){return t.searchQuery===""?t:{...t,searchQuery:"",searchActiveItemIndex:null}},[5]:(t,i)=>{let a=k(t,e=>[...e,{id:i.id,dataRef:i.dataRef}]);return{...t,...a}},[6]:(t,i)=>{let a=k(t,e=>{let r=e.findIndex(u=>u.id===i.id);return r!==-1&&e.splice(r,1),e});return{...t,...a,activationTrigger:1}}},w=j(null);w.displayName="MenuContext";function C(t){let i=Q(w);if(i===null){let a=new Error(`<${t} /> is missing a parent <Menu /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(a,C),a}return i}function se(t,i){return K(i.type,ue,t,i)}let le=G,ce=h(function(i,a){let e=V(se,{menuState:1,buttonRef:B(),itemsRef:B(),items:[],searchQuery:"",activeItemIndex:null,activationTrigger:1}),[{menuState:r,itemsRef:u,buttonRef:s},o]=e,l=D(a);Y([s,u],(M,R)=>{var T;r===0&&(o({type:1}),J(R,z.Loose)||(M.preventDefault(),(T=s.current)==null||T.focus()))});let p=v(()=>({open:r===0}),[r]),g=i,f={ref:l};return U.createElement(w.Provider,{value:e},U.createElement(te,{value:K(r,{[0]:L.Open,[1]:L.Closed})},P({ourProps:f,theirProps:g,slot:p,defaultTag:le,name:"Menu"})))}),pe="button",de=h(function(i,a){var T;let[e,r]=C("Menu.Button"),u=D(e.buttonRef,a),s=`headlessui-menu-button-${F()}`,o=N(),l=y(c=>{switch(c.key){case d.Space:case d.Enter:case d.ArrowDown:c.preventDefault(),c.stopPropagation(),r({type:0}),o.nextFrame(()=>r({type:2,focus:I.First}));break;case d.ArrowUp:c.preventDefault(),c.stopPropagation(),r({type:0}),o.nextFrame(()=>r({type:2,focus:I.Last}));break}},[r,o]),p=y(c=>{switch(c.key){case d.Space:c.preventDefault();break}},[]),g=y(c=>{if(q(c.currentTarget))return c.preventDefault();i.disabled||(e.menuState===0?(r({type:1}),o.nextFrame(()=>{var b;return(b=e.buttonRef.current)==null?void 0:b.focus({preventScroll:!0})})):(c.preventDefault(),c.stopPropagation(),r({type:0})))},[r,o,e,i.disabled]),f=v(()=>({open:e.menuState===0}),[e]),M=i,R={ref:u,id:s,type:re(i,e.buttonRef),"aria-haspopup":!0,"aria-controls":(T=e.itemsRef.current)==null?void 0:T.id,"aria-expanded":i.disabled?void 0:e.menuState===0,onKeyDown:l,onKeyUp:p,onClick:g};return P({ourProps:R,theirProps:M,slot:f,defaultTag:pe,name:"Menu.Button"})}),me="div",fe=H.RenderStrategy|H.Static,Te=h(function(i,a){var b,O;let[e,r]=C("Menu.Items"),u=D(e.itemsRef,a),s=ne(e.itemsRef),o=`headlessui-menu-items-${F()}`,l=N(),p=ee(),g=(()=>p!==null?p===L.Open:e.menuState===0)();W(()=>{let n=e.itemsRef.current;!n||e.menuState===0&&n!==(s==null?void 0:s.activeElement)&&n.focus({preventScroll:!0})},[e.menuState,e.itemsRef,s]),Z({container:e.itemsRef.current,enabled:e.menuState===0,accept(n){return n.getAttribute("role")==="menuitem"?NodeFilter.FILTER_REJECT:n.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(n){n.setAttribute("role","none")}});let f=y(n=>{var m,S;switch(l.dispose(),n.key){case d.Space:if(e.searchQuery!=="")return n.preventDefault(),n.stopPropagation(),r({type:3,value:n.key});case d.Enter:if(n.preventDefault(),n.stopPropagation(),r({type:1}),e.activeItemIndex!==null){let{dataRef:A}=e.items[e.activeItemIndex];(S=(m=A.current)==null?void 0:m.domRef.current)==null||S.click()}x().nextFrame(()=>{var A;return(A=e.buttonRef.current)==null?void 0:A.focus({preventScroll:!0})});break;case d.ArrowDown:return n.preventDefault(),n.stopPropagation(),r({type:2,focus:I.Next});case d.ArrowUp:return n.preventDefault(),n.stopPropagation(),r({type:2,focus:I.Previous});case d.Home:case d.PageUp:return n.preventDefault(),n.stopPropagation(),r({type:2,focus:I.First});case d.End:case d.PageDown:return n.preventDefault(),n.stopPropagation(),r({type:2,focus:I.Last});case d.Escape:n.preventDefault(),n.stopPropagation(),r({type:1}),x().nextFrame(()=>{var A;return(A=e.buttonRef.current)==null?void 0:A.focus({preventScroll:!0})});break;case d.Tab:n.preventDefault(),n.stopPropagation();break;default:n.key.length===1&&(r({type:3,value:n.key}),l.setTimeout(()=>r({type:4}),350));break}},[r,l,e,s]),M=y(n=>{switch(n.key){case d.Space:n.preventDefault();break}},[]),R=v(()=>({open:e.menuState===0}),[e]),T=i,c={"aria-activedescendant":e.activeItemIndex===null||(b=e.items[e.activeItemIndex])==null?void 0:b.id,"aria-labelledby":(O=e.buttonRef.current)==null?void 0:O.id,id:o,onKeyDown:f,onKeyUp:M,role:"menu",tabIndex:0,ref:u};return P({ourProps:c,theirProps:T,slot:R,defaultTag:me,features:fe,visible:g,name:"Menu.Items"})}),Ie=G,ye=h(function(i,a){let{disabled:e=!1,...r}=i,[u,s]=C("Menu.Item"),o=`headlessui-menu-item-${F()}`,l=u.activeItemIndex!==null?u.items[u.activeItemIndex].id===o:!1,p=_(null),g=D(a,p);E(()=>{if(u.menuState!==0||!l||u.activationTrigger===0)return;let n=x();return n.requestAnimationFrame(()=>{var m,S;(S=(m=p.current)==null?void 0:m.scrollIntoView)==null||S.call(m,{block:"nearest"})}),n.dispose},[p,l,u.menuState,u.activationTrigger,u.activeItemIndex]);let f=_({disabled:e,domRef:p});E(()=>{f.current.disabled=e},[f,e]),E(()=>{var n,m;f.current.textValue=(m=(n=p.current)==null?void 0:n.textContent)==null?void 0:m.toLowerCase()},[f,p]),E(()=>(s({type:5,id:o,dataRef:f}),()=>s({type:6,id:o})),[f,o]);let M=y(n=>{if(e)return n.preventDefault();s({type:1}),x().nextFrame(()=>{var m;return(m=u.buttonRef.current)==null?void 0:m.focus({preventScroll:!0})})},[s,u.buttonRef,e]),R=y(()=>{if(e)return s({type:2,focus:I.Nothing});s({type:2,focus:I.Specific,id:o})},[e,o,s]),T=y(()=>{e||l||s({type:2,focus:I.Specific,id:o,trigger:0})},[e,l,o,s]),c=y(()=>{e||!l||s({type:2,focus:I.Nothing})},[e,l,s]),b=v(()=>({active:l,disabled:e}),[l,e]);return P({ourProps:{id:o,ref:g,role:"menuitem",tabIndex:e===!0?void 0:-1,"aria-disabled":e===!0?!0:void 0,disabled:void 0,onClick:M,onFocus:R,onPointerMove:T,onMouseMove:T,onPointerLeave:c,onMouseLeave:c},theirProps:r,slot:b,defaultTag:Ie,name:"Menu.Item"})}),Qe=Object.assign(ce,{Button:de,Items:Te,Item:ye});export{Qe as Menu};
+"use client";import{useFocusRing as le}from"@react-aria/focus";import{useHover as ue}from"@react-aria/interactions";import v,{Fragment as q,createContext as pe,createRef as z,useContext as de,useEffect as me,useMemo as G,useReducer as ce,useRef as Y}from"react";import{flushSync as O}from"react-dom";import{useActivePress as fe}from'../../hooks/use-active-press.js';import{useDidElementMove as Te}from'../../hooks/use-did-element-move.js';import{useDisposables as ye}from'../../hooks/use-disposables.js';import{useElementSize as ge}from'../../hooks/use-element-size.js';import{useEvent as A}from'../../hooks/use-event.js';import{useId as U}from'../../hooks/use-id.js';import{useInertOthers as Ie}from'../../hooks/use-inert-others.js';import{useIsoMorphicEffect as H}from'../../hooks/use-iso-morphic-effect.js';import{useOnDisappear as Me}from'../../hooks/use-on-disappear.js';import{useOutsideClick as Ae}from'../../hooks/use-outside-click.js';import{useOwnerDocument as Pe}from'../../hooks/use-owner.js';import{useResolveButtonType as Se}from'../../hooks/use-resolve-button-type.js';import{useScrollLock as be}from'../../hooks/use-scroll-lock.js';import{useSyncRefs as N}from'../../hooks/use-sync-refs.js';import{useTextValue as Ee}from'../../hooks/use-text-value.js';import{useTrackedPointer as Re}from'../../hooks/use-tracked-pointer.js';import{useTransitionData as ve}from'../../hooks/use-transition-data.js';import{useTreeWalker as xe}from'../../hooks/use-tree-walker.js';import{FloatingProvider as _e,useFloatingPanel as De,useFloatingPanelProps as he,useFloatingReference as Ce,useFloatingReferenceProps as Fe,useResolvedAnchor as Oe}from'../../internal/floating.js';import{OpenClosedProvider as Le,State as k,useOpenClosed as Ge}from'../../internal/open-closed.js';import{isDisabledReactIssue7711 as Ue}from'../../utils/bugs.js';import{Focus as I,calculateActiveIndex as K}from'../../utils/calculate-active-index.js';import{disposables as He}from'../../utils/disposables.js';import{Focus as Z,FocusableMode as Ne,focusFrom as ke,isFocusableElement as Be,restoreFocusIfNecessary as ee,sortByDomNode as we}from'../../utils/focus-management.js';import{match as te}from'../../utils/match.js';import{RenderFeatures as ne,forwardRefWithAs as x,mergeProps as re,render as _}from'../../utils/render.js';import{useDescriptions as Ke}from'../description/description.js';import{Keys as T}from'../keyboard.js';import{useLabelContext as We,useLabels as oe}from'../label/label.js';import{Portal as je}from'../portal/portal.js';var Qe=(r=>(r[r.Open=0]="Open",r[r.Closed=1]="Closed",r))(Qe||{}),Je=(r=>(r[r.Pointer=0]="Pointer",r[r.Other=1]="Other",r))(Je||{}),Ve=(n=>(n[n.OpenMenu=0]="OpenMenu",n[n.CloseMenu=1]="CloseMenu",n[n.GoToItem=2]="GoToItem",n[n.Search=3]="Search",n[n.ClearSearch=4]="ClearSearch",n[n.RegisterItem=5]="RegisterItem",n[n.UnregisterItem=6]="UnregisterItem",n))(Ve||{});function W(e,a=r=>r){let r=e.activeItemIndex!==null?e.items[e.activeItemIndex]:null,i=we(a(e.items.slice()),l=>l.dataRef.current.domRef.current),o=r?i.indexOf(r):null;return o===-1&&(o=null),{items:i,activeItemIndex:o}}let Xe={[1](e){return e.menuState===1?e:{...e,activeItemIndex:null,menuState:1}},[0](e){return e.menuState===0?e:{...e,__demoMode:!1,menuState:0}},[2]:(e,a)=>{var l,p,n,u,c;if(e.menuState===1)return e;let r={...e,searchQuery:"",activationTrigger:(l=a.trigger)!=null?l:1,__demoMode:!1};if(a.focus===I.Nothing)return{...r,activeItemIndex:null};if(a.focus===I.Specific)return{...r,activeItemIndex:e.items.findIndex(t=>t.id===a.id)};if(a.focus===I.Previous){let t=e.activeItemIndex;if(t!==null){let d=e.items[t].dataRef.current.domRef,f=K(a,{resolveItems:()=>e.items,resolveActiveIndex:()=>e.activeItemIndex,resolveId:m=>m.id,resolveDisabled:m=>m.dataRef.current.disabled});if(f!==null){let m=e.items[f].dataRef.current.domRef;if(((p=d.current)==null?void 0:p.previousElementSibling)===m.current||((n=m.current)==null?void 0:n.previousElementSibling)===null)return{...r,activeItemIndex:f}}}}else if(a.focus===I.Next){let t=e.activeItemIndex;if(t!==null){let d=e.items[t].dataRef.current.domRef,f=K(a,{resolveItems:()=>e.items,resolveActiveIndex:()=>e.activeItemIndex,resolveId:m=>m.id,resolveDisabled:m=>m.dataRef.current.disabled});if(f!==null){let m=e.items[f].dataRef.current.domRef;if(((u=d.current)==null?void 0:u.nextElementSibling)===m.current||((c=m.current)==null?void 0:c.nextElementSibling)===null)return{...r,activeItemIndex:f}}}}let i=W(e),o=K(a,{resolveItems:()=>i.items,resolveActiveIndex:()=>i.activeItemIndex,resolveId:t=>t.id,resolveDisabled:t=>t.dataRef.current.disabled});return{...r,...i,activeItemIndex:o}},[3]:(e,a)=>{let i=e.searchQuery!==""?0:1,o=e.searchQuery+a.value.toLowerCase(),p=(e.activeItemIndex!==null?e.items.slice(e.activeItemIndex+i).concat(e.items.slice(0,e.activeItemIndex+i)):e.items).find(u=>{var c;return((c=u.dataRef.current.textValue)==null?void 0:c.startsWith(o))&&!u.dataRef.current.disabled}),n=p?e.items.indexOf(p):-1;return n===-1||n===e.activeItemIndex?{...e,searchQuery:o}:{...e,searchQuery:o,activeItemIndex:n,activationTrigger:1}},[4](e){return e.searchQuery===""?e:{...e,searchQuery:"",searchActiveItemIndex:null}},[5]:(e,a)=>{let r=W(e,i=>[...i,{id:a.id,dataRef:a.dataRef}]);return{...e,...r}},[6]:(e,a)=>{let r=W(e,i=>{let o=i.findIndex(l=>l.id===a.id);return o!==-1&&i.splice(o,1),i});return{...e,...r,activationTrigger:1}}},j=pe(null);j.displayName="MenuContext";function B(e){let a=de(j);if(a===null){let r=new Error(`<${e} /> is missing a parent <Menu /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,B),r}return a}function $e(e,a){return te(a.type,Xe,e,a)}let qe=q;function ze(e,a){let{__demoMode:r=!1,...i}=e,o=ce($e,{__demoMode:r,menuState:r?0:1,buttonRef:z(),itemsRef:z(),items:[],searchQuery:"",activeItemIndex:null,activationTrigger:1}),[{menuState:l,itemsRef:p,buttonRef:n},u]=o,c=N(a);Ae(l===0,[n,p],(S,b)=>{var y;u({type:1}),Be(b,Ne.Loose)||(S.preventDefault(),(y=n.current)==null||y.focus())});let d=A(()=>{u({type:1})}),f=G(()=>({open:l===0,close:d}),[l,d]),m={ref:c};return v.createElement(_e,null,v.createElement(j.Provider,{value:o},v.createElement(Le,{value:te(l,{[0]:k.Open,[1]:k.Closed})},_({ourProps:m,theirProps:i,slot:f,defaultTag:qe,name:"Menu"}))))}let Ye="button";function Ze(e,a){var D;let r=U(),{id:i=`headlessui-menu-button-${r}`,disabled:o=!1,autoFocus:l=!1,...p}=e,[n,u]=B("Menu.Button"),c=Fe(),t=N(n.buttonRef,a,Ce()),d=A(g=>{switch(g.key){case T.Space:case T.Enter:case T.ArrowDown:g.preventDefault(),g.stopPropagation(),O(()=>u({type:0})),u({type:2,focus:I.First});break;case T.ArrowUp:g.preventDefault(),g.stopPropagation(),O(()=>u({type:0})),u({type:2,focus:I.Last});break}}),f=A(g=>{switch(g.key){case T.Space:g.preventDefault();break}}),m=A(g=>{var h;if(Ue(g.currentTarget))return g.preventDefault();o||(n.menuState===0?(O(()=>u({type:1})),(h=n.buttonRef.current)==null||h.focus({preventScroll:!0})):(g.preventDefault(),u({type:0})))}),{isFocusVisible:S,focusProps:b}=le({autoFocus:l}),{isHovered:y,hoverProps:E}=ue({isDisabled:o}),{pressed:P,pressProps:R}=fe({disabled:o}),C=G(()=>({open:n.menuState===0,active:P||n.menuState===0,disabled:o,hover:y,focus:S,autofocus:l}),[n,y,S,P,o,l]),F=re(c(),{ref:t,id:i,type:Se(e,n.buttonRef),"aria-haspopup":"menu","aria-controls":(D=n.itemsRef.current)==null?void 0:D.id,"aria-expanded":n.menuState===0,disabled:o||void 0,autoFocus:l,onKeyDown:d,onKeyUp:f,onClick:m},b,E,R);return _({ourProps:F,theirProps:p,slot:C,defaultTag:Ye,name:"Menu.Button"})}let et="div",tt=ne.RenderStrategy|ne.Static;function nt(e,a){var Q,J;let r=U(),{id:i=`headlessui-menu-items-${r}`,anchor:o,portal:l=!1,modal:p=!0,transition:n=!1,...u}=e,c=Oe(o),[t,d]=B("Menu.Items"),[f,m]=De(c),S=he(),b=N(t.itemsRef,a,c?f:null),y=Pe(t.itemsRef);c&&(l=!0);let E=Ge(),[P,R]=ve(n,t.itemsRef,E!==null?(E&k.Open)===k.Open:t.menuState===0);Me(P,t.buttonRef,()=>{d({type:1})});let C=t.__demoMode?!1:p&&t.menuState===0;be(C,y);let F=t.__demoMode?!1:p&&t.menuState===0;Ie(F,{allowed:A(()=>[t.buttonRef.current,t.itemsRef.current])});let D=t.menuState!==0,h=Te(D,t.buttonRef)?!1:P;me(()=>{let s=t.itemsRef.current;s&&t.menuState===0&&s!==(y==null?void 0:y.activeElement)&&s.focus({preventScroll:!0})},[t.menuState,t.itemsRef,y,t.itemsRef.current]),xe(t.menuState===0,{container:t.itemsRef.current,accept(s){return s.getAttribute("role")==="menuitem"?NodeFilter.FILTER_REJECT:s.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(s){s.setAttribute("role","none")}});let w=ye(),M=A(s=>{var V,X,$;switch(w.dispose(),s.key){case T.Space:if(t.searchQuery!=="")return s.preventDefault(),s.stopPropagation(),d({type:3,value:s.key});case T.Enter:if(s.preventDefault(),s.stopPropagation(),d({type:1}),t.activeItemIndex!==null){let{dataRef:se}=t.items[t.activeItemIndex];(X=(V=se.current)==null?void 0:V.domRef.current)==null||X.click()}ee(t.buttonRef.current);break;case T.ArrowDown:return s.preventDefault(),s.stopPropagation(),d({type:2,focus:I.Next});case T.ArrowUp:return s.preventDefault(),s.stopPropagation(),d({type:2,focus:I.Previous});case T.Home:case T.PageUp:return s.preventDefault(),s.stopPropagation(),d({type:2,focus:I.First});case T.End:case T.PageDown:return s.preventDefault(),s.stopPropagation(),d({type:2,focus:I.Last});case T.Escape:s.preventDefault(),s.stopPropagation(),O(()=>d({type:1})),($=t.buttonRef.current)==null||$.focus({preventScroll:!0});break;case T.Tab:s.preventDefault(),s.stopPropagation(),O(()=>d({type:1})),ke(t.buttonRef.current,s.shiftKey?Z.Previous:Z.Next);break;default:s.key.length===1&&(d({type:3,value:s.key}),w.setTimeout(()=>d({type:4}),350));break}}),L=A(s=>{switch(s.key){case T.Space:s.preventDefault();break}}),ae=G(()=>({open:t.menuState===0,...R}),[t.menuState,R]),ie=re(c?S():{},{"aria-activedescendant":t.activeItemIndex===null||(Q=t.items[t.activeItemIndex])==null?void 0:Q.id,"aria-labelledby":(J=t.buttonRef.current)==null?void 0:J.id,id:i,onKeyDown:M,onKeyUp:L,role:"menu",tabIndex:t.menuState===0?0:void 0,ref:b,style:{...u.style,...m,"--button-width":ge(t.buttonRef,!0).width}});return v.createElement(je,{enabled:l?e.static||P:!1},_({ourProps:ie,theirProps:u,slot:ae,defaultTag:et,features:tt,visible:h,name:"Menu.Items"}))}let rt=q;function ot(e,a){let r=U(),{id:i=`headlessui-menu-item-${r}`,disabled:o=!1,...l}=e,[p,n]=B("Menu.Item"),u=p.activeItemIndex!==null?p.items[p.activeItemIndex].id===i:!1,c=Y(null),t=N(a,c);H(()=>{if(!p.__demoMode&&p.menuState===0&&u&&p.activationTrigger!==0)return He().requestAnimationFrame(()=>{var M,L;(L=(M=c.current)==null?void 0:M.scrollIntoView)==null||L.call(M,{block:"nearest"})})},[p.__demoMode,c,u,p.menuState,p.activationTrigger,p.activeItemIndex]);let d=Ee(c),f=Y({disabled:o,domRef:c,get textValue(){return d()}});H(()=>{f.current.disabled=o},[f,o]),H(()=>(n({type:5,id:i,dataRef:f}),()=>n({type:6,id:i})),[f,i]);let m=A(()=>{n({type:1})}),S=A(M=>{if(o)return M.preventDefault();n({type:1}),ee(p.buttonRef.current)}),b=A(()=>{if(o)return n({type:2,focus:I.Nothing});n({type:2,focus:I.Specific,id:i})}),y=Re(),E=A(M=>{y.update(M),!o&&(u||n({type:2,focus:I.Specific,id:i,trigger:0}))}),P=A(M=>{y.wasMoved(M)&&(o||u||n({type:2,focus:I.Specific,id:i,trigger:0}))}),R=A(M=>{y.wasMoved(M)&&(o||u&&n({type:2,focus:I.Nothing}))}),[C,F]=oe(),[D,g]=Ke(),h=G(()=>({active:u,focus:u,disabled:o,close:m}),[u,o,m]);return v.createElement(F,null,v.createElement(g,null,_({ourProps:{id:i,ref:t,role:"menuitem",tabIndex:o===!0?void 0:-1,"aria-disabled":o===!0?!0:void 0,"aria-labelledby":C,"aria-describedby":D,disabled:void 0,onClick:S,onFocus:b,onPointerEnter:E,onMouseEnter:E,onPointerMove:P,onMouseMove:P,onPointerLeave:R,onMouseLeave:R},theirProps:l,slot:h,defaultTag:rt,name:"Menu.Item"})))}let at="div";function it(e,a){let[r,i]=oe();return v.createElement(i,null,_({ourProps:{ref:a,"aria-labelledby":r,role:"group"},theirProps:e,slot:{},defaultTag:at,name:"Menu.Section"}))}let st="header";function lt(e,a){let r=U(),{id:i=`headlessui-menu-heading-${r}`,...o}=e,l=We();H(()=>l.register(i),[i,l.register]);let p={id:i,ref:a,role:"presentation",...l.props};return _({ourProps:p,theirProps:o,slot:{},defaultTag:st,name:"Menu.Heading"})}let ut="div";function pt(e,a){return _({ourProps:{ref:a,role:"separator"},theirProps:e,slot:{},defaultTag:ut,name:"Menu.Separator"})}let dt=x(ze),mt=x(Ze),ct=x(nt),ft=x(ot),Tt=x(it),yt=x(lt),gt=x(pt),Yt=Object.assign(dt,{Button:mt,Items:ct,Item:ft,Section:Tt,Heading:yt,Separator:gt});export{Yt as Menu,mt as MenuButton,yt as MenuHeading,ft as MenuItem,ct as MenuItems,Tt as MenuSection,gt as MenuSeparator};

dist/components/popover/popover.d.ts

@@ -1,60 +0,92 @@
-import React, { Ref, MutableRefObject } from 'react';
-import { Props } from '../../types';
-import { PropsForFeatures } from '../../utils/render';
-interface PopoverRenderPropArg {
+import React, { type ElementType, type MouseEventHandler, type MutableRefObject, type Ref } from 'react';
+import { type TransitionData } from '../../hooks/use-transition-data.js';
+import { type AnchorProps } from '../../internal/floating.js';
+import type { Props } from '../../types.js';
+import { type HasDisplayName, type PropsForFeatures, type RefProp } from '../../utils/render.js';
+type MouseEvent<T> = Parameters<MouseEventHandler<T>>[0];
+declare let DEFAULT_POPOVER_TAG: "div";
+type PopoverRenderPropArg = {
     open: boolean;
-    close(focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null>): void;
-}
-interface ButtonRenderPropArg {
+    close(focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null> | MouseEvent<HTMLElement>): void;
+};
+type PopoverPropsWeControl = never;
+export type PopoverProps<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG> = Props<TTag, PopoverRenderPropArg, PopoverPropsWeControl, {
+    __demoMode?: boolean;
+}>;
+declare function PopoverFn<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(props: PopoverProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element;
+declare let DEFAULT_BUTTON_TAG: "button";
+type ButtonRenderPropArg = {
     open: boolean;
-}
-declare type ButtonPropsWeControl = 'id' | 'type' | 'aria-expanded' | 'aria-controls' | 'onKeyDown' | 'onClick';
-interface OverlayRenderPropArg {
+    active: boolean;
+    hover: boolean;
+    focus: boolean;
+    disabled: boolean;
+    autofocus: boolean;
+};
+type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded';
+export type PopoverButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, {
+    disabled?: boolean;
+    autoFocus?: boolean;
+}>;
+declare function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: PopoverButtonProps<TTag>, ref: Ref<HTMLButtonElement>): React.JSX.Element;
+declare let DEFAULT_OVERLAY_TAG: "div";
+type OverlayRenderPropArg = {
     open: boolean;
-}
-declare type OverlayPropsWeControl = 'id' | 'aria-hidden' | 'onClick';
+} & TransitionData;
+type OverlayPropsWeControl = 'aria-hidden';
 declare let OverlayRenderFeatures: number;
-interface PanelRenderPropArg {
+export type PopoverOverlayProps<TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG> = Props<TTag, OverlayRenderPropArg, OverlayPropsWeControl, {
+    transition?: boolean;
+} & PropsForFeatures<typeof OverlayRenderFeatures>>;
+declare function OverlayFn<TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(props: PopoverOverlayProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+declare let DEFAULT_PANEL_TAG: "div";
+type PanelRenderPropArg = {
     open: boolean;
     close: (focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null>) => void;
+} & TransitionData;
+type PanelPropsWeControl = 'tabIndex';
+export type PopoverPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, PanelPropsWeControl, {
+    focus?: boolean;
+    anchor?: AnchorProps;
+    portal?: boolean;
+    modal?: boolean;
+    transition?: boolean;
+    static?: boolean;
+    unmount?: boolean;
+}>;
+declare function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: PopoverPanelProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element;
+declare let DEFAULT_GROUP_TAG: "div";
+type GroupRenderPropArg = {};
+type GroupPropsWeControl = never;
+export type PopoverGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag, GroupRenderPropArg, GroupPropsWeControl>;
+declare function GroupFn<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: PopoverGroupProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element;
+export interface _internal_ComponentPopover extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(props: PopoverProps<TTag> & RefProp<typeof PopoverFn>): JSX.Element;
 }
-declare type PanelPropsWeControl = 'id' | 'onKeyDown';
-declare let PanelRenderFeatures: number;
-interface GroupRenderPropArg {
+export interface _internal_ComponentPopoverButton extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: PopoverButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element;
 }
-declare type GroupPropsWeControl = 'id';
-export declare let Popover: (<TTag extends React.ElementType<any> = "div">(props: Props<TTag, PopoverRenderPropArg, "1D45E01E-AF44-47C4-988A-19A94EBAF55C">, ref: Ref<HTMLElement>) => JSX.Element) & {
-    displayName: string;
-} & {
-    Button: (<TTag_1 extends React.ElementType<any> = "button">(props: Props<TTag_1, ButtonRenderPropArg, ButtonPropsWeControl>, ref: Ref<HTMLButtonElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
-    Overlay: (<TTag_2 extends React.ElementType<any> = "div">(props: Props<TTag_2, OverlayRenderPropArg, OverlayPropsWeControl> & (({
-        static?: undefined;
-    } & {
-        unmount?: boolean | undefined;
-    }) | ({
-        unmount?: undefined;
-    } & {
-        static?: boolean | undefined;
-    })), ref: Ref<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
-    Panel: (<TTag_3 extends React.ElementType<any> = "div">(props: Props<TTag_3, PanelRenderPropArg, PanelPropsWeControl> & (({
-        static?: undefined;
-    } & {
-        unmount?: boolean | undefined;
-    }) | ({
-        unmount?: undefined;
-    } & {
-        static?: boolean | undefined;
-    })) & {
-        focus?: boolean | undefined;
-    }, ref: Ref<HTMLDivElement>) => JSX.Element) & {
-        displayName: string;
-    };
-    Group: (<TTag_4 extends React.ElementType<any> = "div">(props: Props<TTag_4, GroupRenderPropArg, "id">, ref: Ref<HTMLElement>) => JSX.Element) & {
-        displayName: string;
-    };
+export interface _internal_ComponentPopoverOverlay extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(props: PopoverOverlayProps<TTag> & RefProp<typeof OverlayFn>): JSX.Element;
+}
+export interface _internal_ComponentPopoverPanel extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: PopoverPanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element;
+}
+export interface _internal_ComponentPopoverGroup extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: PopoverGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element;
+}
+export declare let PopoverButton: _internal_ComponentPopoverButton;
+export declare let PopoverOverlay: _internal_ComponentPopoverOverlay;
+export declare let PopoverPanel: _internal_ComponentPopoverPanel;
+export declare let PopoverGroup: _internal_ComponentPopoverGroup;
+export declare let Popover: _internal_ComponentPopover & {
+    /** @deprecated use `<PopoverButton>` instead of `<Popover.Button>` */
+    Button: _internal_ComponentPopoverButton;
+    /** @deprecated use `<PopoverOverlay>` instead of `<Popover.Overlay>` */
+    Overlay: _internal_ComponentPopoverOverlay;
+    /** @deprecated use `<PopoverPanel>` instead of `<Popover.Panel>` */
+    Panel: _internal_ComponentPopoverPanel;
+    /** @deprecated use `<PopoverGroup>` instead of `<Popover.Group>` */
+    Group: _internal_ComponentPopoverGroup;
 };
 export {};

dist/components/popover/popover.js

@@ -1,1 +0,1 @@
-import F,{createContext as D,useCallback as m,useContext as _,useEffect as x,useMemo as O,useReducer as le,useRef as M,useState as pe}from"react";import{match as j}from"../../utils/match.js";import{forwardRefWithAs as G,render as H,Features as K}from"../../utils/render.js";import{useSyncRefs as B}from"../../hooks/use-sync-refs.js";import{useId as $}from"../../hooks/use-id.js";import{Keys as A}from"../keyboard.js";import{isDisabledReactIssue7711 as ee}from"../../utils/bugs.js";import{getFocusableElements as w,Focus as I,focusIn as L,FocusResult as Y,isFocusableElement as ae,FocusableMode as ue}from"../../utils/focus-management.js";import{OpenClosedProvider as ie,State as U,useOpenClosed as te}from"../../internal/open-closed.js";import{useResolveButtonType as se}from"../../hooks/use-resolve-button-type.js";import{useOutsideClick as fe}from"../../hooks/use-outside-click.js";import{getOwnerDocument as Pe}from"../../utils/owner.js";import{useOwnerDocument as q}from"../../hooks/use-owner.js";import{useEventListener as W}from"../../hooks/use-event-listener.js";var ve=(f=>(f[f.Open=0]="Open",f[f.Closed=1]="Closed",f))(ve||{}),ce=(l=>(l[l.TogglePopover=0]="TogglePopover",l[l.ClosePopover=1]="ClosePopover",l[l.SetButton=2]="SetButton",l[l.SetButtonId=3]="SetButtonId",l[l.SetPanel=4]="SetPanel",l[l.SetPanelId=5]="SetPanelId",l))(ce||{});let de={[0]:a=>({...a,popoverState:j(a.popoverState,{[0]:1,[1]:0})}),[1](a){return a.popoverState===1?a:{...a,popoverState:1}},[2](a,o){return a.button===o.button?a:{...a,button:o.button}},[3](a,o){return a.buttonId===o.buttonId?a:{...a,buttonId:o.buttonId}},[4](a,o){return a.panel===o.panel?a:{...a,panel:o.panel}},[5](a,o){return a.panelId===o.panelId?a:{...a,panelId:o.panelId}}},z=D(null);z.displayName="PopoverContext";function N(a){let o=_(z);if(o===null){let f=new Error(`<${a} /> is missing a parent <Popover /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(f,N),f}return o}let J=D(null);J.displayName="PopoverAPIContext";function oe(a){let o=_(J);if(o===null){let f=new Error(`<${a} /> is missing a parent <Popover /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(f,oe),f}return o}let Q=D(null);Q.displayName="PopoverGroupContext";function re(){return _(Q)}let X=D(null);X.displayName="PopoverPanelContext";function ye(){return _(X)}function Te(a,o){return j(o.type,de,a,o)}let Ee="div",Se=G(function(o,f){let e=`headlessui-popover-button-${$()}`,P=`headlessui-popover-panel-${$()}`,n=M(null),l=B(f,n),i=q(n),s=le(Te,{popoverState:1,button:null,buttonId:e,panel:null,panelId:P}),[{popoverState:v,button:t,panel:E},u]=s;x(()=>u({type:3,buttonId:e}),[e,u]),x(()=>u({type:5,panelId:P}),[P,u]);let S=O(()=>({buttonId:e,panelId:P,close:()=>u({type:1})}),[e,P,u]),c=re(),d=c==null?void 0:c.registerPopover,p=m(()=>{var r;return(r=c==null?void 0:c.isFocusWithinPopoverGroup())!=null?r:(i==null?void 0:i.activeElement)&&((t==null?void 0:t.contains(i.activeElement))||(E==null?void 0:E.contains(i.activeElement)))},[c,t,E]);x(()=>d==null?void 0:d(S),[d,S]),W(i==null?void 0:i.defaultView,"focus",()=>{v===0&&(p()||!t||!E||u({type:1}))},!0),fe([t,E],(r,T)=>{v===0&&(u({type:1}),ae(T,ue.Loose)||(r.preventDefault(),t==null||t.focus()))});let y=m(r=>{u({type:1});let T=(()=>r?r instanceof HTMLElement?r:r.current instanceof HTMLElement?r.current:t:t)();T==null||T.focus()},[u,t]),b=O(()=>({close:y}),[y]),g=O(()=>({open:v===0,close:y}),[v,y]),C=o,h={ref:l};return F.createElement(z.Provider,{value:s},F.createElement(J.Provider,{value:b},F.createElement(ie,{value:j(v,{[0]:U.Open,[1]:U.Closed})},H({ourProps:h,theirProps:C,slot:g,defaultTag:Ee,name:"Popover"}))))}),be="button",me=G(function(o,f){let[e,P]=N("Popover.Button"),n=M(null),l=re(),i=l==null?void 0:l.closeOthers,s=ye(),v=s===null?!1:s===e.panelId,t=B(n,f,v?null:r=>P({type:2,button:r})),E=B(n,f),u=q(n),S=M(null),c=M(null);W(u==null?void 0:u.defaultView,"focus",()=>{c.current=S.current,S.current=u==null?void 0:u.activeElement},!0);let d=m(r=>{var T,R,k,V;if(v){if(e.popoverState===1)return;switch(r.key){case A.Space:case A.Enter:r.preventDefault(),(R=(T=r.target).click)==null||R.call(T),P({type:1}),(k=e.button)==null||k.focus();break}}else switch(r.key){case A.Space:case A.Enter:r.preventDefault(),r.stopPropagation(),e.popoverState===1&&(i==null||i(e.buttonId)),P({type:0});break;case A.Escape:if(e.popoverState!==0)return i==null?void 0:i(e.buttonId);if(!n.current||(u==null?void 0:u.activeElement)&&!n.current.contains(u.activeElement))return;r.preventDefault(),r.stopPropagation(),P({type:1});break;case A.Tab:if(e.popoverState!==0||!e.panel||!e.button)return;if(r.shiftKey){if(!c.current||(V=e.button)!=null&&V.contains(c.current)||e.panel.contains(c.current))return;let Z=w(u==null?void 0:u.body),ne=Z.indexOf(c.current);if(Z.indexOf(e.button)>ne)return;r.preventDefault(),r.stopPropagation(),L(e.panel,I.Last)}else r.preventDefault(),r.stopPropagation(),L(e.panel,I.First);break}},[P,e.popoverState,e.buttonId,e.button,e.panel,n,i,v]),p=m(r=>{var T;if(!v&&(r.key===A.Space&&r.preventDefault(),e.popoverState===0&&!!e.panel&&!!e.button))switch(r.key){case A.Tab:if(!c.current||(T=e.button)!=null&&T.contains(c.current)||e.panel.contains(c.current))return;let R=w(u==null?void 0:u.body),k=R.indexOf(c.current);if(R.indexOf(e.button)>k)return;r.preventDefault(),r.stopPropagation(),L(e.panel,I.Last);break}},[e.popoverState,e.panel,e.button,v]),y=m(r=>{var T,R;ee(r.currentTarget)||o.disabled||(v?(P({type:1}),(T=e.button)==null||T.focus()):(r.preventDefault(),r.stopPropagation(),e.popoverState===1&&(i==null||i(e.buttonId)),(R=e.button)==null||R.focus(),P({type:0})))},[P,e.button,e.popoverState,e.buttonId,o.disabled,i,v]),b=O(()=>({open:e.popoverState===0}),[e]),g=se(o,n),C=o,h=v?{ref:E,type:g,onKeyDown:d,onClick:y}:{ref:t,id:e.buttonId,type:g,"aria-expanded":o.disabled?void 0:e.popoverState===0,"aria-controls":e.panel?e.panelId:void 0,onKeyDown:d,onKeyUp:p,onClick:y};return H({ourProps:h,theirProps:C,slot:b,defaultTag:be,name:"Popover.Button"})}),ge="div",Ae=K.RenderStrategy|K.Static,Ce=G(function(o,f){let[{popoverState:e},P]=N("Popover.Overlay"),n=B(f),l=`headlessui-popover-overlay-${$()}`,i=te(),s=(()=>i!==null?i===U.Open:e===0)(),v=m(S=>{if(ee(S.currentTarget))return S.preventDefault();P({type:1})},[P]),t=O(()=>({open:e===0}),[e]);return H({ourProps:{ref:n,id:l,"aria-hidden":!0,onClick:v},theirProps:o,slot:t,defaultTag:ge,features:Ae,visible:s,name:"Popover.Overlay"})}),Re="div",Oe=K.RenderStrategy|K.Static,Ie=G(function(o,f){let{focus:e=!1,...P}=o,[n,l]=N("Popover.Panel"),{close:i}=oe("Popover.Panel"),s=M(null),v=B(s,f,p=>{l({type:4,panel:p})}),t=q(s),E=te(),u=(()=>E!==null?E===U.Open:n.popoverState===0)(),S=m(p=>{var y;switch(p.key){case A.Escape:if(n.popoverState!==0||!s.current||(t==null?void 0:t.activeElement)&&!s.current.contains(t.activeElement))return;p.preventDefault(),p.stopPropagation(),l({type:1}),(y=n.button)==null||y.focus();break}},[n,s,l]);x(()=>()=>l({type:4,panel:null}),[l]),x(()=>{var p;o.static||n.popoverState===1&&((p=o.unmount)!=null?p:!0)&&l({type:4,panel:null})},[n.popoverState,o.unmount,o.static,l]),x(()=>{if(!e||n.popoverState!==0||!s.current)return;let p=t==null?void 0:t.activeElement;s.current.contains(p)||L(s.current,I.First)},[e,s,n.popoverState]),W(t==null?void 0:t.defaultView,"keydown",p=>{var b;if(n.popoverState!==0||!s.current||p.key!==A.Tab||!(t!=null&&t.activeElement)||!s.current||!s.current.contains(t.activeElement))return;p.preventDefault();let y=L(s.current,p.shiftKey?I.Previous:I.Next);if(y===Y.Underflow)return(b=n.button)==null?void 0:b.focus();if(y===Y.Overflow){if(!n.button)return;let g=w(t.body),C=g.indexOf(n.button),h=g.splice(C+1).filter(r=>{var T;return!((T=s.current)!=null&&T.contains(r))});L(h,I.First)===Y.Error&&L(t.body,I.First)}}),W(t==null?void 0:t.defaultView,"focus",()=>{var p;!e||n.popoverState===0&&(!s.current||(t==null?void 0:t.activeElement)&&((p=s.current)==null?void 0:p.contains(t.activeElement))||l({type:1}))},!0);let c=O(()=>({open:n.popoverState===0,close:i}),[n,i]),d={ref:v,id:n.panelId,onKeyDown:S};return F.createElement(X.Provider,{value:n.panelId},H({ourProps:d,theirProps:P,slot:c,defaultTag:Re,features:Oe,visible:u,name:"Popover.Panel"}))}),Le="div",xe=G(function(o,f){let e=M(null),P=B(e,f),[n,l]=pe([]),i=m(d=>{l(p=>{let y=p.indexOf(d);if(y!==-1){let b=p.slice();return b.splice(y,1),b}return p})},[l]),s=m(d=>(l(p=>[...p,d]),()=>i(d)),[l,i]),v=m(()=>{var y;let d=Pe(e);if(!d)return!1;let p=d.activeElement;return(y=e.current)!=null&&y.contains(p)?!0:n.some(b=>{var g,C;return((g=d.getElementById(b.buttonId))==null?void 0:g.contains(p))||((C=d.getElementById(b.panelId))==null?void 0:C.contains(p))})},[e,n]),t=m(d=>{for(let p of n)p.buttonId!==d&&p.close()},[n]),E=O(()=>({registerPopover:s,unregisterPopover:i,isFocusWithinPopoverGroup:v,closeOthers:t}),[s,i,v,t]),u=O(()=>({}),[]),S=o,c={ref:P};return F.createElement(Q.Provider,{value:E},H({ourProps:c,theirProps:S,slot:u,defaultTag:Le,name:"Popover.Group"}))}),tt=Object.assign(Se,{Button:me,Overlay:Ce,Panel:Ie,Group:xe});export{tt as Popover};
+"use client";import{useFocusRing as Me}from"@react-aria/focus";import{useHover as _e}from"@react-aria/interactions";import E,{createContext as ee,createRef as ue,useContext as te,useEffect as oe,useMemo as I,useReducer as xe,useRef as X,useState as ge}from"react";import{useActivePress as Le}from'../../hooks/use-active-press.js';import{useElementSize as Ie}from'../../hooks/use-element-size.js';import{useEvent as A}from'../../hooks/use-event.js';import{useEventListener as Be}from'../../hooks/use-event-listener.js';import{useId as re}from'../../hooks/use-id.js';import{useIsoMorphicEffect as he}from'../../hooks/use-iso-morphic-effect.js';import{useLatestValue as Se}from'../../hooks/use-latest-value.js';import{useOnDisappear as De}from'../../hooks/use-on-disappear.js';import{useOutsideClick as He}from'../../hooks/use-outside-click.js';import{useOwnerDocument as ie}from'../../hooks/use-owner.js';import{useResolveButtonType as Ge}from'../../hooks/use-resolve-button-type.js';import{useMainTreeNode as Ne,useRootContainers as ke}from'../../hooks/use-root-containers.js';import{useScrollLock as Ue}from'../../hooks/use-scroll-lock.js';import{optionalRef as we,useSyncRefs as Y}from'../../hooks/use-sync-refs.js';import{Direction as G,useTabDirection as Ae}from'../../hooks/use-tab-direction.js';import{useTransitionData as Re}from'../../hooks/use-transition-data.js';import{CloseProvider as We}from'../../internal/close-provider.js';import{FloatingProvider as Ve,useFloatingPanel as je,useFloatingPanelProps as Ke,useFloatingReference as $e,useResolvedAnchor as Je}from'../../internal/floating.js';import{Hidden as fe,HiddenFeatures as Pe}from'../../internal/hidden.js';import{OpenClosedProvider as Xe,State as q,useOpenClosed as Oe}from'../../internal/open-closed.js';import{isDisabledReactIssue7711 as Ce}from'../../utils/bugs.js';import{Focus as N,FocusResult as de,FocusableMode as Ye,focusIn as w,getFocusableElements as ce,isFocusableElement as qe}from'../../utils/focus-management.js';import{match as W}from'../../utils/match.js';import'../../utils/micro-task.js';import{getOwnerDocument as ze}from'../../utils/owner.js';import{RenderFeatures as ne,forwardRefWithAs as Q,mergeProps as ve,render as Z,useMergeRefsFn as Qe}from'../../utils/render.js';import{Keys as V}from'../keyboard.js';import{Portal as Ze,useNestedPortals as et}from'../portal/portal.js';var tt=(f=>(f[f.Open=0]="Open",f[f.Closed=1]="Closed",f))(tt||{}),ot=(u=>(u[u.TogglePopover=0]="TogglePopover",u[u.ClosePopover=1]="ClosePopover",u[u.SetButton=2]="SetButton",u[u.SetButtonId=3]="SetButtonId",u[u.SetPanel=4]="SetPanel",u[u.SetPanelId=5]="SetPanelId",u))(ot||{});let rt={[0]:t=>({...t,popoverState:W(t.popoverState,{[0]:1,[1]:0}),__demoMode:!1}),[1](t){return t.popoverState===1?t:{...t,popoverState:1,__demoMode:!1}},[2](t,a){return t.button===a.button?t:{...t,button:a.button}},[3](t,a){return t.buttonId===a.buttonId?t:{...t,buttonId:a.buttonId}},[4](t,a){return t.panel===a.panel?t:{...t,panel:a.panel}},[5](t,a){return t.panelId===a.panelId?t:{...t,panelId:a.panelId}}},Te=ee(null);Te.displayName="PopoverContext";function le(t){let a=te(Te);if(a===null){let f=new Error(`<${t} /> is missing a parent <Popover /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(f,le),f}return a}let ae=ee(null);ae.displayName="PopoverAPIContext";function me(t){let a=te(ae);if(a===null){let f=new Error(`<${t} /> is missing a parent <Popover /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(f,me),f}return a}let ye=ee(null);ye.displayName="PopoverGroupContext";function Fe(){return te(ye)}let pe=ee(null);pe.displayName="PopoverPanelContext";function nt(){return te(pe)}function lt(t,a){return W(a.type,rt,t,a)}let at="div";function pt(t,a){var J;let{__demoMode:f=!1,...C}=t,m=X(null),R=Y(a,we(e=>{m.current=e})),u=X([]),l=xe(lt,{__demoMode:f,popoverState:f?0:1,buttons:u,button:null,buttonId:null,panel:null,panelId:null,beforePanelSentinel:ue(),afterPanelSentinel:ue(),afterButtonSentinel:ue()}),[{popoverState:c,button:P,buttonId:r,panel:i,panelId:O,beforePanelSentinel:y,afterPanelSentinel:B,afterButtonSentinel:d},n]=l,v=ie((J=m.current)!=null?J:P),F=I(()=>{if(!P||!i)return!1;for(let g of document.querySelectorAll("body > *"))if(Number(g==null?void 0:g.contains(P))^Number(g==null?void 0:g.contains(i)))return!0;let e=ce(),s=e.indexOf(P),o=(s+e.length-1)%e.length,p=(s+1)%e.length,S=e[o],b=e[p];return!i.contains(S)&&!i.contains(b)},[P,i]),M=Se(r),x=Se(O),j=I(()=>({buttonId:M,panelId:x,close:()=>n({type:1})}),[M,x,n]),T=Fe(),h=T==null?void 0:T.registerPopover,k=A(()=>{var e;return(e=T==null?void 0:T.isFocusWithinPopoverGroup())!=null?e:(v==null?void 0:v.activeElement)&&((P==null?void 0:P.contains(v.activeElement))||(i==null?void 0:i.contains(v.activeElement)))});oe(()=>h==null?void 0:h(j),[h,j]);let[_,U]=et(),D=ke({mainTreeNodeRef:T==null?void 0:T.mainTreeNodeRef,portals:_,defaultContainers:[P,i]});Be(v==null?void 0:v.defaultView,"focus",e=>{var s,o,p,S,b,g;e.target!==window&&e.target instanceof HTMLElement&&c===0&&(k()||P&&i&&(D.contains(e.target)||(o=(s=y.current)==null?void 0:s.contains)!=null&&o.call(s,e.target)||(S=(p=B.current)==null?void 0:p.contains)!=null&&S.call(p,e.target)||(g=(b=d.current)==null?void 0:b.contains)!=null&&g.call(b,e.target)||n({type:1})))},!0),He(c===0,D.resolveContainers,(e,s)=>{n({type:1}),qe(s,Ye.Loose)||(e.preventDefault(),P==null||P.focus())});let L=A(e=>{n({type:1});let s=(()=>e?e instanceof HTMLElement?e:"current"in e&&e.current instanceof HTMLElement?e.current:P:P)();s==null||s.focus()}),H=I(()=>({close:L,isPortalled:F}),[L,F]),K=I(()=>({open:c===0,close:L}),[c,L]),$={ref:R};return E.createElement(Ve,null,E.createElement(pe.Provider,{value:null},E.createElement(Te.Provider,{value:l},E.createElement(ae.Provider,{value:H},E.createElement(We,{value:L},E.createElement(Xe,{value:W(c,{[0]:q.Open,[1]:q.Closed})},E.createElement(U,null,Z({ourProps:$,theirProps:C,slot:K,defaultTag:at,name:"Popover"}),E.createElement(D.MainTreeNode,null))))))))}let st="button";function ut(t,a){let f=re(),{id:C=`headlessui-popover-button-${f}`,disabled:m=!1,autoFocus:R=!1,...u}=t,[l,c]=le("Popover.Button"),{isPortalled:P}=me("Popover.Button"),r=X(null),i=`headlessui-focus-sentinel-${re()}`,O=Fe(),y=O==null?void 0:O.closeOthers,d=nt()!==null;oe(()=>{if(!d)return c({type:3,buttonId:C}),()=>{c({type:3,buttonId:null})}},[d,C,c]);let[n]=ge(()=>Symbol()),v=Y(r,a,$e(),d?null:o=>{if(o)l.buttons.current.push(n);else{let p=l.buttons.current.indexOf(n);p!==-1&&l.buttons.current.splice(p,1)}l.buttons.current.length>1&&console.warn("You are already using a <Popover.Button /> but only 1 <Popover.Button /> is supported."),o&&c({type:2,button:o})}),F=Y(r,a),M=ie(r),x=A(o=>{var p,S,b;if(d){if(l.popoverState===1)return;switch(o.key){case V.Space:case V.Enter:o.preventDefault(),(S=(p=o.target).click)==null||S.call(p),c({type:1}),(b=l.button)==null||b.focus();break}}else switch(o.key){case V.Space:case V.Enter:o.preventDefault(),o.stopPropagation(),l.popoverState===1&&(y==null||y(l.buttonId)),c({type:0});break;case V.Escape:if(l.popoverState!==0)return y==null?void 0:y(l.buttonId);if(!r.current||M!=null&&M.activeElement&&!r.current.contains(M.activeElement))return;o.preventDefault(),o.stopPropagation(),c({type:1});break}}),j=A(o=>{d||o.key===V.Space&&o.preventDefault()}),T=A(o=>{var p,S;Ce(o.currentTarget)||m||(d?(c({type:1}),(p=l.button)==null||p.focus()):(o.preventDefault(),o.stopPropagation(),l.popoverState===1&&(y==null||y(l.buttonId)),c({type:0}),(S=l.button)==null||S.focus()))}),h=A(o=>{o.preventDefault(),o.stopPropagation()}),{isFocusVisible:k,focusProps:_}=Me({autoFocus:R}),{isHovered:U,hoverProps:D}=_e({isDisabled:m}),{pressed:z,pressProps:L}=Le({disabled:m}),H=l.popoverState===0,K=I(()=>({open:H,active:z||H,disabled:m,hover:U,focus:k,autofocus:R}),[H,U,k,z,m,R]),$=Ge(t,r),J=d?ve({ref:F,type:$,onKeyDown:x,onClick:T,disabled:m||void 0,autoFocus:R},_,D,L):ve({ref:v,id:l.buttonId,type:$,"aria-expanded":l.popoverState===0,"aria-controls":l.panel?l.panelId:void 0,disabled:m||void 0,autoFocus:R,onKeyDown:x,onKeyUp:j,onClick:T,onMouseDown:h},_,D,L),e=Ae(),s=A(()=>{let o=l.panel;if(!o)return;function p(){W(e.current,{[G.Forwards]:()=>w(o,N.First),[G.Backwards]:()=>w(o,N.Last)})===de.Error&&w(ce().filter(b=>b.dataset.headlessuiFocusGuard!=="true"),W(e.current,{[G.Forwards]:N.Next,[G.Backwards]:N.Previous}),{relativeTo:l.button})}p()});return E.createElement(E.Fragment,null,Z({ourProps:J,theirProps:u,slot:K,defaultTag:st,name:"Popover.Button"}),H&&!d&&P&&E.createElement(fe,{id:i,ref:l.afterButtonSentinel,features:Pe.Focusable,"data-headlessui-focus-guard":!0,as:"button",type:"button",onFocus:s}))}let it="div",ft=ne.RenderStrategy|ne.Static;function Pt(t,a){let f=re(),{id:C=`headlessui-popover-overlay-${f}`,transition:m=!1,...R}=t,[{popoverState:u},l]=le("Popover.Overlay"),c=X(null),P=Y(a,c),r=Oe(),[i,O]=Re(m,c,r!==null?(r&q.Open)===q.Open:u===0),y=A(n=>{if(Ce(n.currentTarget))return n.preventDefault();l({type:1})}),B=I(()=>({open:u===0,...O}),[u,O]);return Z({ourProps:{ref:P,id:C,"aria-hidden":!0,onClick:y},theirProps:R,slot:B,defaultTag:it,features:ft,visible:i,name:"Popover.Overlay"})}let dt="div",ct=ne.RenderStrategy|ne.Static;function vt(t,a){let f=re(),{id:C=`headlessui-popover-panel-${f}`,focus:m=!1,anchor:R,portal:u=!1,modal:l=!1,transition:c=!1,...P}=t,[r,i]=le("Popover.Panel"),{close:O,isPortalled:y}=me("Popover.Panel"),B=`headlessui-focus-sentinel-before-${f}`,d=`headlessui-focus-sentinel-after-${f}`,n=X(null),v=Je(R),[F,M]=je(v),x=Ke();v&&(u=!0);let j=Y(n,a,v?F:null,e=>{i({type:4,panel:e})}),T=ie(n),h=Qe();he(()=>(i({type:5,panelId:C}),()=>{i({type:5,panelId:null})}),[C,i]);let k=Oe(),[_,U]=Re(c,n,k!==null?(k&q.Open)===q.Open:r.popoverState===0);De(_,r.button,()=>{i({type:1})});let D=r.__demoMode?!1:l&&_;Ue(D,T);let z=A(e=>{var s;switch(e.key){case V.Escape:if(r.popoverState!==0||!n.current||T!=null&&T.activeElement&&!n.current.contains(T.activeElement))return;e.preventDefault(),e.stopPropagation(),i({type:1}),(s=r.button)==null||s.focus();break}});oe(()=>{var e;t.static||r.popoverState===1&&((e=t.unmount)==null||e)&&i({type:4,panel:null})},[r.popoverState,t.unmount,t.static,i]),oe(()=>{if(r.__demoMode||!m||r.popoverState!==0||!n.current)return;let e=T==null?void 0:T.activeElement;n.current.contains(e)||w(n.current,N.First)},[r.__demoMode,m,n,r.popoverState]);let L=I(()=>({open:r.popoverState===0,close:O,...U}),[r.popoverState,O,U]),H=ve(v?x():{},{ref:j,id:C,onKeyDown:z,onBlur:m&&r.popoverState===0?e=>{var o,p,S,b,g;let s=e.relatedTarget;s&&n.current&&((o=n.current)!=null&&o.contains(s)||(i({type:1}),((S=(p=r.beforePanelSentinel.current)==null?void 0:p.contains)!=null&&S.call(p,s)||(g=(b=r.afterPanelSentinel.current)==null?void 0:b.contains)!=null&&g.call(b,s))&&s.focus({preventScroll:!0})))}:void 0,tabIndex:-1,style:{...P.style,...M,"--button-width":Ie(r.button,!0).width}}),K=Ae(),$=A(()=>{let e=n.current;if(!e)return;function s(){W(K.current,{[G.Forwards]:()=>{var p;w(e,N.First)===de.Error&&((p=r.afterPanelSentinel.current)==null||p.focus())},[G.Backwards]:()=>{var o;(o=r.button)==null||o.focus({preventScroll:!0})}})}s()}),J=A(()=>{let e=n.current;if(!e)return;function s(){W(K.current,{[G.Forwards]:()=>{var Ee;if(!r.button)return;let o=ce(),p=o.indexOf(r.button),S=o.slice(0,p+1),g=[...o.slice(p+1),...S];for(let se of g.slice())if(se.dataset.headlessuiFocusGuard==="true"||(Ee=r.panel)!=null&&Ee.contains(se)){let be=g.indexOf(se);be!==-1&&g.splice(be,1)}w(g,N.First,{sorted:!1})},[G.Backwards]:()=>{var p;w(e,N.Previous)===de.Error&&((p=r.button)==null||p.focus())}})}s()});return E.createElement(pe.Provider,{value:C},E.createElement(ae.Provider,{value:{close:O,isPortalled:y}},E.createElement(Ze,{enabled:u?t.static||_:!1},_&&y&&E.createElement(fe,{id:B,ref:r.beforePanelSentinel,features:Pe.Focusable,"data-headlessui-focus-guard":!0,as:"button",type:"button",onFocus:$}),Z({mergeRefs:h,ourProps:H,theirProps:P,slot:L,defaultTag:dt,features:ct,visible:_,name:"Popover.Panel"}),_&&y&&E.createElement(fe,{id:d,ref:r.afterPanelSentinel,features:Pe.Focusable,"data-headlessui-focus-guard":!0,as:"button",type:"button",onFocus:J}))))}let Tt="div";function mt(t,a){let f=X(null),C=Y(f,a),[m,R]=ge([]),u=Ne(),l=A(d=>{R(n=>{let v=n.indexOf(d);if(v!==-1){let F=n.slice();return F.splice(v,1),F}return n})}),c=A(d=>(R(n=>[...n,d]),()=>l(d))),P=A(()=>{var v;let d=ze(f);if(!d)return!1;let n=d.activeElement;return(v=f.current)!=null&&v.contains(n)?!0:m.some(F=>{var M,x;return((M=d.getElementById(F.buttonId.current))==null?void 0:M.contains(n))||((x=d.getElementById(F.panelId.current))==null?void 0:x.contains(n))})}),r=A(d=>{for(let n of m)n.buttonId.current!==d&&n.close()}),i=I(()=>({registerPopover:c,unregisterPopover:l,isFocusWithinPopoverGroup:P,closeOthers:r,mainTreeNodeRef:u.mainTreeNodeRef}),[c,l,P,r,u.mainTreeNodeRef]),O=I(()=>({}),[]),y=t,B={ref:C};return E.createElement(ye.Provider,{value:i},Z({ourProps:B,theirProps:y,slot:O,defaultTag:Tt,name:"Popover.Group"}),E.createElement(u.MainTreeNode,null))}let yt=Q(pt),Et=Q(ut),bt=Q(Pt),gt=Q(vt),St=Q(mt),to=Object.assign(yt,{Button:Et,Overlay:bt,Panel:gt,Group:St});export{to as Popover,Et as PopoverButton,St as PopoverGroup,bt as PopoverOverlay,gt as PopoverPanel};

dist/components/portal/portal.d.ts

@@ -1,28 +0,36 @@
-import React, { MutableRefObject, Ref } from 'react';
-import { Props } from '../../types';
-interface PortalRenderPropArg {
+import React, { type ElementType, type MutableRefObject, type Ref } from 'react';
+import type { Props } from '../../types.js';
+import { type HasDisplayName, type RefProp } from '../../utils/render.js';
+declare let DEFAULT_PORTAL_TAG: React.ExoticComponent<{
+    children?: React.ReactNode;
+}>;
+type PortalRenderPropArg = {};
+type PortalPropsWeControl = never;
+export type PortalProps<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> = Props<TTag, PortalRenderPropArg, PortalPropsWeControl, {
+    enabled?: boolean;
+}>;
+declare function PortalFn<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG>(props: PortalProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element | null;
+declare let DEFAULT_GROUP_TAG: React.ExoticComponent<{
+    children?: React.ReactNode;
+}>;
+type GroupRenderPropArg = {};
+type GroupPropsWeControl = never;
+export type PortalGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag, GroupRenderPropArg, GroupPropsWeControl, {
+    target: MutableRefObject<HTMLElement | null>;
+}>;
+declare function GroupFn<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: PortalGroupProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element;
+export declare function useNestedPortals(): readonly [React.MutableRefObject<HTMLElement[]>, ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element];
+export interface _internal_ComponentPortal extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_PORTAL_TAG>(props: PortalProps<TTag> & RefProp<typeof PortalFn>): JSX.Element;
 }
-interface GroupRenderPropArg {
+export interface _internal_ComponentPortalGroup extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: PortalGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element;
 }
-export declare let Portal: (<TTag extends React.ElementType<any> = React.ExoticComponent<{
-    children?: React.ReactNode;
-}>>(props: Props<TTag, PortalRenderPropArg, "1D45E01E-AF44-47C4-988A-19A94EBAF55C">, ref: Ref<HTMLElement>) => React.ReactPortal | null) & {
-    displayName: string;
-} & {
-    Group: (<TTag_1 extends React.ElementType<any> = React.ExoticComponent<{
-        children?: React.ReactNode;
-    }>>(props: Omit<import("../../types").PropsOf<TTag_1>, "as" | "children" | "refName" | "className"> & {
-        as?: TTag_1 | undefined;
-        children?: React.ReactNode | ((bag: GroupRenderPropArg) => React.ReactElement<any, string | React.JSXElementConstructor<any>>);
-        refName?: string | undefined;
-    } & (import("../../types").PropsOf<TTag_1> extends {
-        className?: any;
-    } ? {
-        className?: string | ((bag: GroupRenderPropArg) => string) | undefined;
-    } : {}) & {
-        target: MutableRefObject<HTMLElement | null>;
-    }, ref: Ref<HTMLElement>) => JSX.Element) & {
-        displayName: string;
-    };
+export declare let PortalGroup: _internal_ComponentPortalGroup;
+export declare let Portal: _internal_ComponentPortal & {
+    /** @deprecated use `<PortalGroup>` instead of `<Portal.Group>` */
+    Group: _internal_ComponentPortalGroup;
 };
 export {};

dist/components/portal/portal.js

@@ -1,1 +0,1 @@
-import c,{Fragment as p,createContext as A,useContext as y,useEffect as d,useState as m,useRef as L}from"react";import{createPortal as b}from"react-dom";import{forwardRefWithAs as s,render as T}from"../../utils/render.js";import{useIsoMorphicEffect as h}from"../../hooks/use-iso-morphic-effect.js";import{usePortalRoot as G}from"../../internal/portal-force-root.js";import{useServerHandoffComplete as M}from"../../hooks/use-server-handoff-complete.js";import{optionalRef as v,useSyncRefs as P}from"../../hooks/use-sync-refs.js";import{useOwnerDocument as R}from"../../hooks/use-owner.js";function C(i){let n=G(),l=y(g),e=R(i),[r,a]=m(()=>{if(!n&&l!==null||typeof window=="undefined")return null;let o=e==null?void 0:e.getElementById("headlessui-portal-root");if(o)return o;if(e===null)return null;let t=e.createElement("div");return t.setAttribute("id","headlessui-portal-root"),e.body.appendChild(t)});return d(()=>{r!==null&&(e!=null&&e.body.contains(r)||e==null||e.body.appendChild(r))},[r,e]),d(()=>{n||l!==null&&a(l.current)},[l,a,n]),r}let O=p,H=s(function(n,l){let e=n,r=L(null),a=P(v(f=>{r.current=f}),l),o=R(r),t=C(r),[u]=m(()=>{var f;return typeof window=="undefined"?null:(f=o==null?void 0:o.createElement("div"))!=null?f:null}),E=M();return h(()=>{if(!!t&&!!u)return t.appendChild(u),()=>{var f;!t||!u||(t.removeChild(u),t.childNodes.length<=0&&((f=t.parentElement)==null||f.removeChild(t)))}},[t,u]),E?!t||!u?null:b(T({ourProps:{ref:a},theirProps:e,defaultTag:O,name:"Portal"}),u):null}),x=p,g=A(null),_=s(function(n,l){let{target:e,...r}=n,o={ref:P(l)};return c.createElement(g.Provider,{value:e},T({ourProps:o,theirProps:r,defaultTag:x,name:"Popover.Group"}))}),K=Object.assign(H,{Group:_});export{K as Portal};
+"use client";import f,{Fragment as g,createContext as E,useContext as T,useEffect as R,useMemo as c,useRef as A,useState as G}from"react";import{createPortal as H}from"react-dom";import{useEvent as L}from'../../hooks/use-event.js';import{useIsoMorphicEffect as x}from'../../hooks/use-iso-morphic-effect.js';import{useOnUnmount as O}from'../../hooks/use-on-unmount.js';import{useOwnerDocument as _}from'../../hooks/use-owner.js';import{useServerHandoffComplete as h}from'../../hooks/use-server-handoff-complete.js';import{optionalRef as F,useSyncRefs as P}from'../../hooks/use-sync-refs.js';import{usePortalRoot as U}from'../../internal/portal-force-root.js';import{env as C}from'../../utils/env.js';import{forwardRefWithAs as m,render as d}from'../../utils/render.js';function D(p){let r=U(),l=T(v),e=_(p),[o,n]=G(()=>{var t;if(!r&&l!==null)return(t=l.current)!=null?t:null;if(C.isServer)return null;let u=e==null?void 0:e.getElementById("headlessui-portal-root");if(u)return u;if(e===null)return null;let a=e.createElement("div");return a.setAttribute("id","headlessui-portal-root"),e.body.appendChild(a)});return R(()=>{o!==null&&(e!=null&&e.body.contains(o)||e==null||e.body.appendChild(o))},[o,e]),R(()=>{r||l!==null&&n(l.current)},[l,n,r]),o}let M=g,N=m(function(r,l){let e=r,o=A(null),n=P(F(i=>{o.current=i}),l),u=_(o),a=D(o),[t]=G(()=>{var i;return C.isServer?null:(i=u==null?void 0:u.createElement("div"))!=null?i:null}),s=T(y),b=h();return x(()=>{!a||!t||a.contains(t)||(t.setAttribute("data-headlessui-portal",""),a.appendChild(t))},[a,t]),x(()=>{if(t&&s)return s.register(t)},[s,t]),O(()=>{var i;!a||!t||(t instanceof Node&&a.contains(t)&&a.removeChild(t),a.childNodes.length<=0&&((i=a.parentElement)==null||i.removeChild(a)))}),b?!a||!t?null:H(d({ourProps:{ref:n},theirProps:e,slot:{},defaultTag:M,name:"Portal"}),t):null});function S(p,r){let l=P(r),{enabled:e=!0,...o}=p;return e?f.createElement(N,{...o,ref:l}):d({ourProps:{ref:l},theirProps:o,slot:{},defaultTag:M,name:"Portal"})}let j=g,v=E(null);function W(p,r){let{target:l,...e}=p,n={ref:P(r)};return f.createElement(v.Provider,{value:l},d({ourProps:n,theirProps:e,defaultTag:j,name:"Popover.Group"}))}let y=E(null);function ee(){let p=T(y),r=A([]),l=L(n=>(r.current.push(n),p&&p.register(n),()=>e(n))),e=L(n=>{let u=r.current.indexOf(n);u!==-1&&r.current.splice(u,1),p&&p.unregister(n)}),o=c(()=>({register:l,unregister:e,portals:r}),[l,e,r]);return[r,c(()=>function({children:u}){return f.createElement(y.Provider,{value:o},u)},[o])]}let I=m(S),J=m(W),te=Object.assign(I,{Group:J});export{te as Portal,J as PortalGroup,ee as useNestedPortals};

dist/components/radio-group/radio-group.d.ts

@@ -1,43 +0,85 @@
-import React, { Ref } from 'react';
-import { Props } from '../../types';
-interface RadioGroupRenderPropArg {
-}
-declare type RadioGroupPropsWeControl = 'role' | 'aria-labelledby' | 'aria-describedby' | 'id';
-interface OptionRenderPropArg {
+import React, { type ElementType, type Ref } from 'react';
+import { type ByComparator } from '../../hooks/use-by-comparator.js';
+import type { Props } from '../../types.js';
+import { type HasDisplayName, type RefProp } from '../../utils/render.js';
+import { type _internal_ComponentDescription } from '../description/description.js';
+import { type _internal_ComponentLabel } from '../label/label.js';
+declare let DEFAULT_RADIO_GROUP_TAG: "div";
+type RadioGroupRenderPropArg<TType> = {
+    value: TType;
+};
+type RadioGroupPropsWeControl = 'role' | 'aria-labelledby' | 'aria-describedby';
+export type RadioGroupProps<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG, TType = string> = Props<TTag, RadioGroupRenderPropArg<TType>, RadioGroupPropsWeControl, {
+    value?: TType;
+    defaultValue?: TType;
+    onChange?(value: TType): void;
+    by?: ByComparator<TType>;
+    disabled?: boolean;
+    form?: string;
+    name?: string;
+}>;
+declare function RadioGroupFn<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG, TType = string>(props: RadioGroupProps<TTag, TType>, ref: Ref<HTMLElement>): React.JSX.Element;
+declare let DEFAULT_OPTION_TAG: "div";
+type OptionRenderPropArg = {
     checked: boolean;
+    /** @deprecated use `focus` instead */
     active: boolean;
+    hover: boolean;
+    focus: boolean;
+    autofocus: boolean;
     disabled: boolean;
-}
-declare type RadioPropsWeControl = 'aria-checked' | 'id' | 'onBlur' | 'onClick' | 'onFocus' | 'ref' | 'role' | 'tabIndex';
-export declare let RadioGroup: (<TTag extends React.ElementType<any> = "div", TType = string>(props: Props<TTag, RadioGroupRenderPropArg, "value" | "name" | "disabled" | "onChange" | RadioGroupPropsWeControl> & {
+};
+type OptionPropsWeControl = 'aria-checked' | 'aria-describedby' | 'aria-labelledby' | 'role' | 'tabIndex';
+export type RadioOptionProps<TTag extends ElementType, TType> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, {
     value: TType;
-    onChange(value: TType): void;
-    disabled?: boolean | undefined;
-    name?: string | undefined;
-}, ref: Ref<HTMLElement>) => JSX.Element) & {
-    displayName: string;
-} & {
-    Option: (<TTag_1 extends React.ElementType<any> = "div", TType_1 = unknown>(props: Props<TTag_1, OptionRenderPropArg, "value" | "disabled" | RadioPropsWeControl> & {
-        value: TType_1;
-        disabled?: boolean | undefined;
-    }, ref: Ref<HTMLElement>) => JSX.Element) & {
-        displayName: string;
-    };
-    Label: (<TTag_2 extends React.ElementType<any> = "label">(props: Omit<import("../../types").PropsOf<TTag_2>, "id" | ("as" | "children" | "refName" | "className")> & {
-        as?: TTag_2 | undefined;
-        children?: React.ReactNode | ((bag: {}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>);
-        refName?: string | undefined;
-    } & (import("../../types").PropsOf<TTag_2> extends {
-        className?: any;
-    } ? {
-        className?: string | ((bag: {}) => string) | undefined;
-    } : {}) & {
-        passive?: boolean | undefined;
-    }, ref: React.Ref<HTMLLabelElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
-    Description: (<TTag_3 extends React.ElementType<any> = "p">(props: Props<TTag_3, {}, "id">, ref: React.Ref<HTMLParagraphElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
+    disabled?: boolean;
+    autoFocus?: boolean;
+}>;
+declare function OptionFn<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = Parameters<typeof RadioGroupRoot>[0]['value']>(props: RadioOptionProps<TTag, TType>, ref: Ref<HTMLElement>): React.JSX.Element;
+declare let DEFAULT_RADIO_TAG: "span";
+type RadioRenderPropArg = {
+    checked: boolean;
+    hover: boolean;
+    focus: boolean;
+    autofocus: boolean;
+    disabled: boolean;
 };
+type RadioPropsWeControl = 'aria-checked' | 'aria-describedby' | 'aria-labelledby' | 'role' | 'tabIndex';
+export type RadioProps<TTag extends ElementType = typeof DEFAULT_RADIO_TAG, TType = string> = Props<TTag, RadioRenderPropArg, RadioPropsWeControl, {
+    value: TType;
+    disabled?: boolean;
+    autoFocus?: boolean;
+}>;
+declare function RadioFn<TTag extends ElementType = typeof DEFAULT_RADIO_TAG, TType = Parameters<typeof RadioGroupRoot>[0]['value']>(props: RadioProps<TTag, TType>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export interface _internal_ComponentRadioGroup extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG, TType = string>(props: RadioGroupProps<TTag, TType> & RefProp<typeof RadioGroupFn>): JSX.Element;
+}
+export interface _internal_ComponentRadioOption extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string>(props: RadioOptionProps<TTag, TType> & RefProp<typeof OptionFn>): JSX.Element;
+}
+export interface _internal_ComponentRadio extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_RADIO_TAG, TType = string>(props: RadioProps<TTag, TType> & RefProp<typeof RadioFn>): JSX.Element;
+}
+export interface _internal_ComponentRadioLabel extends _internal_ComponentLabel {
+}
+export interface _internal_ComponentRadioDescription extends _internal_ComponentDescription {
+}
+declare let RadioGroupRoot: _internal_ComponentRadioGroup;
+/** @deprecated use `<Radio>` instead of `<RadioGroupOption>` */
+export declare let RadioGroupOption: _internal_ComponentRadioOption;
+export declare let Radio: _internal_ComponentRadio;
+/** @deprecated use `<Label>` instead of `<RadioGroupLabel>` */
+export declare let RadioGroupLabel: _internal_ComponentRadioLabel;
+/** @deprecated use `<Description>` instead of `<RadioGroupDescription>` */
+export declare let RadioGroupDescription: _internal_ComponentRadioDescription;
+export declare let RadioGroup: _internal_ComponentRadioGroup & {
+    /** @deprecated use `<Radio>` instead of `<RadioGroup.Option>` */
+    Option: _internal_ComponentRadioOption;
+    /** @deprecated use `<Radio>` instead of `<RadioGroup.Radio>` */
+    Radio: _internal_ComponentRadio;
+    /** @deprecated use `<Label>` instead of `<RadioGroup.Label>` */
+    Label: _internal_ComponentRadioLabel;
+    /** @deprecated use `<Description>` instead of `<RadioGroup.Description>` */
+    Description: _internal_ComponentRadioDescription;
+};
 export {};

dist/components/radio-group/radio-group.js

@@ -1,1 +0,1 @@
-import O,{createContext as Q,useCallback as v,useContext as V,useMemo as F,useReducer as X,useRef as M}from"react";import{forwardRefWithAs as N,render as W,compact as Y}from"../../utils/render.js";import{useId as K}from"../../hooks/use-id.js";import{match as Z}from"../../utils/match.js";import{useIsoMorphicEffect as w}from"../../hooks/use-iso-morphic-effect.js";import{Keys as P}from"../../components/keyboard.js";import{focusIn as j,Focus as x,FocusResult as B,sortByDomNode as ee}from"../../utils/focus-management.js";import{useFlags as te}from"../../hooks/use-flags.js";import{Label as re,useLabels as $}from"../../components/label/label.js";import{Description as oe,useDescriptions as J}from"../../components/description/description.js";import{useTreeWalker as ie}from"../../hooks/use-tree-walker.js";import{useSyncRefs as q}from"../../hooks/use-sync-refs.js";import{VisuallyHidden as ne}from"../../internal/visually-hidden.js";import{attemptSubmit as ae,objectToFormEntries as le}from"../../utils/form.js";import{getOwnerDocument as pe}from"../../utils/owner.js";var de=(t=>(t[t.RegisterOption=0]="RegisterOption",t[t.UnregisterOption=1]="UnregisterOption",t))(de||{});let se={[0](n,o){let t=[...n.options,{id:o.id,element:o.element,propsRef:o.propsRef}];return{...n,options:ee(t,r=>r.element.current)}},[1](n,o){let t=n.options.slice(),r=n.options.findIndex(m=>m.id===o.id);return r===-1?n:(t.splice(r,1),{...n,options:t})}},U=Q(null);U.displayName="RadioGroupContext";function z(n){let o=V(U);if(o===null){let t=new Error(`<${n} /> is missing a parent <RadioGroup /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(t,z),t}return o}function ue(n,o){return Z(o.type,se,n,o)}let ce="div",fe=N(function(o,t){let{value:r,name:m,onChange:f,disabled:R=!1,...I}=o,[{options:a},A]=X(ue,{options:[]}),[T,C]=$(),[k,c]=J(),y=`headlessui-radiogroup-${K()}`,g=M(null),b=q(g,t),E=F(()=>a.find(e=>!e.propsRef.current.disabled),[a]),D=F(()=>a.some(e=>e.propsRef.current.value===r),[a,r]),s=v(e=>{var i;if(R||e===r)return!1;let d=(i=a.find(p=>p.propsRef.current.value===e))==null?void 0:i.propsRef.current;return d!=null&&d.disabled?!1:(f(e),!0)},[f,r,R,a]);ie({container:g.current,accept(e){return e.getAttribute("role")==="radio"?NodeFilter.FILTER_REJECT:e.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(e){e.setAttribute("role","none")}});let h=v(e=>{let d=g.current;if(!d)return;let i=pe(d),p=a.filter(l=>l.propsRef.current.disabled===!1).map(l=>l.element.current);switch(e.key){case P.Enter:ae(e.currentTarget);break;case P.ArrowLeft:case P.ArrowUp:if(e.preventDefault(),e.stopPropagation(),j(p,x.Previous|x.WrapAround)===B.Success){let u=a.find(G=>G.element.current===(i==null?void 0:i.activeElement));u&&s(u.propsRef.current.value)}break;case P.ArrowRight:case P.ArrowDown:if(e.preventDefault(),e.stopPropagation(),j(p,x.Next|x.WrapAround)===B.Success){let u=a.find(G=>G.element.current===(i==null?void 0:i.activeElement));u&&s(u.propsRef.current.value)}break;case P.Space:{e.preventDefault(),e.stopPropagation();let l=a.find(u=>u.element.current===(i==null?void 0:i.activeElement));l&&s(l.propsRef.current.value)}break}},[g,a,s]),L=v(e=>(A({type:0,...e}),()=>A({type:1,id:e.id})),[A]),S=F(()=>({registerOption:L,firstOption:E,containsCheckedOption:D,change:s,disabled:R,value:r}),[L,E,D,s,R,r]),_={ref:b,id:y,role:"radiogroup","aria-labelledby":T,"aria-describedby":k,onKeyDown:h};return O.createElement(c,{name:"RadioGroup.Description"},O.createElement(C,{name:"RadioGroup.Label"},O.createElement(U.Provider,{value:S},m!=null&&r!=null&&le({[m]:r}).map(([e,d])=>O.createElement(ne,{...Y({key:e,as:"input",type:"radio",checked:d!=null,hidden:!0,readOnly:!0,name:e,value:d})})),W({ourProps:_,theirProps:I,defaultTag:ce,name:"RadioGroup"}))))});var be=(t=>(t[t.Empty=1]="Empty",t[t.Active=2]="Active",t))(be||{});let me="div",Re=N(function(o,t){let r=M(null),m=q(r,t),f=`headlessui-radiogroup-option-${K()}`,[R,I]=$(),[a,A]=J(),{addFlag:T,removeFlag:C,hasFlag:k}=te(1),{value:c,disabled:y=!1,...g}=o,b=M({value:c,disabled:y});w(()=>{b.current.value=c},[c,b]),w(()=>{b.current.disabled=y},[y,b]);let{registerOption:E,disabled:D,change:s,firstOption:h,containsCheckedOption:L,value:S}=z("RadioGroup.Option");w(()=>E({id:f,element:r,propsRef:b}),[f,E,r,o]);let _=v(()=>{var H;!s(c)||(T(2),(H=r.current)==null||H.focus())},[T,s,c]),e=v(()=>T(2),[T]),d=v(()=>C(2),[C]),i=(h==null?void 0:h.id)===f,p=D||y,l=S===c,u={ref:m,id:f,role:"radio","aria-checked":l?"true":"false","aria-labelledby":R,"aria-describedby":a,"aria-disabled":p?!0:void 0,tabIndex:(()=>p?-1:l||!L&&i?0:-1)(),onClick:p?void 0:_,onFocus:p?void 0:e,onBlur:p?void 0:d},G=F(()=>({checked:l,disabled:p,active:k(2)}),[l,p,k]);return O.createElement(A,{name:"RadioGroup.Description"},O.createElement(I,{name:"RadioGroup.Label"},W({ourProps:u,theirProps:g,slot:G,defaultTag:me,name:"RadioGroup.Option"})))}),Ne=Object.assign(fe,{Option:Re,Label:re,Description:oe});export{Ne as RadioGroup};
+"use client";import{useFocusRing as Q}from"@react-aria/focus";import{useHover as Y}from"@react-aria/interactions";import G,{createContext as Z,useCallback as ye,useContext as ee,useMemo as x,useReducer as Re,useRef as W}from"react";import{useByComparator as be}from'../../hooks/use-by-comparator.js';import{useControllable as ge}from'../../hooks/use-controllable.js';import{useDefaultValue as Oe}from'../../hooks/use-default-value.js';import{useEvent as S}from'../../hooks/use-event.js';import{useId as B}from'../../hooks/use-id.js';import{useIsoMorphicEffect as te}from'../../hooks/use-iso-morphic-effect.js';import{useLatestValue as oe}from'../../hooks/use-latest-value.js';import{useSyncRefs as V}from'../../hooks/use-sync-refs.js';import{useDisabled as re}from'../../internal/disabled.js';import{FormFields as Pe}from'../../internal/form-fields.js';import{useProvidedId as ve}from'../../internal/id.js';import{isDisabledReactIssue7711 as ie}from'../../utils/bugs.js';import{Focus as w,FocusResult as ne,focusIn as ae,sortByDomNode as De}from'../../utils/focus-management.js';import{attemptSubmit as Ae}from'../../utils/form.js';import{match as _e}from'../../utils/match.js';import{getOwnerDocument as Ee}from'../../utils/owner.js';import{forwardRefWithAs as K,mergeProps as pe,render as $}from'../../utils/render.js';import{Description as Ge,useDescribedBy as xe,useDescriptions as le}from'../description/description.js';import{Keys as F}from'../keyboard.js';import{Label as Ce,useLabelledBy as he,useLabels as se}from'../label/label.js';var Le=(e=>(e[e.RegisterOption=0]="RegisterOption",e[e.UnregisterOption=1]="UnregisterOption",e))(Le||{});let ke={[0](o,t){let e=[...o.options,{id:t.id,element:t.element,propsRef:t.propsRef}];return{...o,options:De(e,a=>a.element.current)}},[1](o,t){let e=o.options.slice(),a=o.options.findIndex(O=>O.id===t.id);return a===-1?o:(e.splice(a,1),{...o,options:e})}},j=Z(null);j.displayName="RadioGroupDataContext";function J(o){let t=ee(j);if(t===null){let e=new Error(`<${o} /> is missing a parent <RadioGroup /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(e,J),e}return t}let X=Z(null);X.displayName="RadioGroupActionsContext";function z(o){let t=ee(X);if(t===null){let e=new Error(`<${o} /> is missing a parent <RadioGroup /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(e,z),e}return t}function Fe(o,t){return _e(t.type,ke,o,t)}let Ie="div";function Ue(o,t){let e=B(),a=re(),{id:O=`headlessui-radiogroup-${e}`,value:m,form:P,name:i,onChange:f,by:c,disabled:p=a||!1,defaultValue:I,...y}=o,T=be(c),[v,C]=Re(Fe,{options:[]}),n=v.options,[U,h]=se(),[D,L]=le(),A=W(null),M=V(A,t),l=Oe(I),[s,_]=ge(m,f,l),R=x(()=>n.find(r=>!r.propsRef.current.disabled),[n]),b=x(()=>n.some(r=>T(r.propsRef.current.value,s)),[n,s]),d=S(r=>{var u;if(p||T(r,s))return!1;let k=(u=n.find(H=>T(H.propsRef.current.value,r)))==null?void 0:u.propsRef.current;return k!=null&&k.disabled?!1:(_==null||_(r),!0)}),de=S(r=>{let k=A.current;if(!k)return;let u=Ee(k),H=n.filter(g=>g.propsRef.current.disabled===!1).map(g=>g.element.current);switch(r.key){case F.Enter:Ae(r.currentTarget);break;case F.ArrowLeft:case F.ArrowUp:if(r.preventDefault(),r.stopPropagation(),ae(H,w.Previous|w.WrapAround)===ne.Success){let E=n.find(N=>N.element.current===(u==null?void 0:u.activeElement));E&&d(E.propsRef.current.value)}break;case F.ArrowRight:case F.ArrowDown:if(r.preventDefault(),r.stopPropagation(),ae(H,w.Next|w.WrapAround)===ne.Success){let E=n.find(N=>N.element.current===(u==null?void 0:u.activeElement));E&&d(E.propsRef.current.value)}break;case F.Space:{r.preventDefault(),r.stopPropagation();let g=n.find(E=>E.element.current===(u==null?void 0:u.activeElement));g&&d(g.propsRef.current.value)}break}}),q=S(r=>(C({type:0,...r}),()=>C({type:1,id:r.id}))),ue=x(()=>({value:s,firstOption:R,containsCheckedOption:b,disabled:p,compare:T,...v}),[s,R,b,p,T,v]),ce=x(()=>({registerOption:q,change:d}),[q,d]),fe={ref:M,id:O,role:"radiogroup","aria-labelledby":U,"aria-describedby":D,onKeyDown:de},Te=x(()=>({value:s}),[s]),me=ye(()=>{if(l!==void 0)return d(l)},[d,l]);return G.createElement(L,{name:"RadioGroup.Description"},G.createElement(h,{name:"RadioGroup.Label"},G.createElement(X.Provider,{value:ce},G.createElement(j.Provider,{value:ue},i!=null&&G.createElement(Pe,{disabled:p,data:{[i]:s||"on"},overrides:{type:"radio",checked:s!=null},form:P,onReset:me}),$({ourProps:fe,theirProps:y,slot:Te,defaultTag:Ie,name:"RadioGroup"})))))}let Me="div";function Se(o,t){var R;let e=J("RadioGroup.Option"),a=z("RadioGroup.Option"),O=B(),{id:m=`headlessui-radiogroup-option-${O}`,value:P,disabled:i=e.disabled||!1,autoFocus:f=!1,...c}=o,p=W(null),I=V(p,t),[y,T]=se(),[v,C]=le(),n=oe({value:P,disabled:i});te(()=>a.registerOption({id:m,element:p,propsRef:n}),[m,a,p,n]);let U=S(b=>{var d;if(ie(b.currentTarget))return b.preventDefault();a.change(P)&&((d=p.current)==null||d.focus())}),h=((R=e.firstOption)==null?void 0:R.id)===m,{isFocusVisible:D,focusProps:L}=Q({autoFocus:f}),{isHovered:A,hoverProps:M}=Y({isDisabled:i}),l=e.compare(e.value,P),s=pe({ref:I,id:m,role:"radio","aria-checked":l?"true":"false","aria-labelledby":y,"aria-describedby":v,"aria-disabled":i?!0:void 0,tabIndex:(()=>i?-1:l||!e.containsCheckedOption&&h?0:-1)(),onClick:i?void 0:U,autoFocus:f},L,M),_=x(()=>({checked:l,disabled:i,active:D,hover:A,focus:D,autofocus:f}),[l,i,A,D,f]);return G.createElement(C,{name:"RadioGroup.Description"},G.createElement(T,{name:"RadioGroup.Label"},$({ourProps:s,theirProps:c,slot:_,defaultTag:Me,name:"RadioGroup.Option"})))}let He="span";function we(o,t){var R;let e=J("Radio"),a=z("Radio"),O=B(),m=ve(),P=re(),{id:i=m||`headlessui-radio-${O}`,value:f,disabled:c=e.disabled||P||!1,autoFocus:p=!1,...I}=o,y=W(null),T=V(y,t),v=he(),C=xe(),n=oe({value:f,disabled:c});te(()=>a.registerOption({id:i,element:y,propsRef:n}),[i,a,y,n]);let U=S(b=>{var d;if(ie(b.currentTarget))return b.preventDefault();a.change(f)&&((d=y.current)==null||d.focus())}),{isFocusVisible:h,focusProps:D}=Q({autoFocus:p}),{isHovered:L,hoverProps:A}=Y({isDisabled:c}),M=((R=e.firstOption)==null?void 0:R.id)===i,l=e.compare(e.value,f),s=pe({ref:T,id:i,role:"radio","aria-checked":l?"true":"false","aria-labelledby":v,"aria-describedby":C,"aria-disabled":c?!0:void 0,tabIndex:(()=>c?-1:l||!e.containsCheckedOption&&M?0:-1)(),autoFocus:p,onClick:c?void 0:U},D,A),_=x(()=>({checked:l,disabled:c,hover:L,focus:h,autofocus:p}),[l,c,L,h,p]);return $({ourProps:s,theirProps:I,slot:_,defaultTag:He,name:"Radio"})}let Ne=K(Ue),We=K(Se),Be=K(we),Ve=Ce,Ke=Ge,Tt=Object.assign(Ne,{Option:We,Radio:Be,Label:Ve,Description:Ke});export{Be as Radio,Tt as RadioGroup,Ke as RadioGroupDescription,Ve as RadioGroupLabel,We as RadioGroupOption};

dist/components/switch/switch.d.ts

@@ -1,37 +0,58 @@
-import React, { ElementType, Ref } from 'react';
-import { Props } from '../../types';
+import React, { type ElementType, type Ref } from 'react';
+import type { Props } from '../../types.js';
+import { type HasDisplayName, type RefProp } from '../../utils/render.js';
+import { type _internal_ComponentDescription } from '../description/description.js';
+import { type _internal_ComponentLabel } from '../label/label.js';
 declare let DEFAULT_GROUP_TAG: React.ExoticComponent<{
     children?: React.ReactNode;
 }>;
-declare function Group<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: Props<TTag>): JSX.Element;
-interface SwitchRenderPropArg {
+export type SwitchGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag>;
+declare function GroupFn<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: SwitchGroupProps<TTag>): React.JSX.Element;
+declare let DEFAULT_SWITCH_TAG: "button";
+type SwitchRenderPropArg = {
     checked: boolean;
+    hover: boolean;
+    focus: boolean;
+    active: boolean;
+    autofocus: boolean;
+    changing: boolean;
+    disabled: boolean;
+};
+type SwitchPropsWeControl = 'aria-checked' | 'aria-describedby' | 'aria-labelledby' | 'role';
+export type SwitchProps<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> = Props<TTag, SwitchRenderPropArg, SwitchPropsWeControl, {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?(checked: boolean): void;
+    name?: string;
+    value?: string;
+    form?: string;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    tabIndex?: number;
+}>;
+declare function SwitchFn<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(props: SwitchProps<TTag>, ref: Ref<HTMLButtonElement>): React.JSX.Element;
+export interface _internal_ComponentSwitch extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(props: SwitchProps<TTag> & RefProp<typeof SwitchFn>): JSX.Element;
 }
-declare type SwitchPropsWeControl = 'id' | 'role' | 'tabIndex' | 'aria-checked' | 'aria-labelledby' | 'aria-describedby' | 'onClick' | 'onKeyUp' | 'onKeyPress';
-export declare let Switch: (<TTag extends React.ElementType<any> = "button">(props: Props<TTag, SwitchRenderPropArg, "value" | "name" | "onChange" | "checked" | SwitchPropsWeControl> & {
-    checked: boolean;
-    onChange(checked: boolean): void;
-    name?: string | undefined;
-    value?: string | undefined;
-}, ref: Ref<HTMLElement>) => JSX.Element) & {
-    displayName: string;
-} & {
-    Group: typeof Group;
-    Label: (<TTag_1 extends React.ElementType<any> = "label">(props: Omit<import("../../types").PropsOf<TTag_1>, "id" | ("as" | "children" | "refName" | "className")> & {
-        as?: TTag_1 | undefined;
-        children?: React.ReactNode | ((bag: {}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>);
-        refName?: string | undefined;
-    } & (import("../../types").PropsOf<TTag_1> extends {
-        className?: any;
-    } ? {
-        className?: string | ((bag: {}) => string) | undefined;
-    } : {}) & {
-        passive?: boolean | undefined;
-    }, ref: React.Ref<HTMLLabelElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
-    Description: (<TTag_2 extends React.ElementType<any> = "p">(props: Props<TTag_2, {}, "id">, ref: React.Ref<HTMLParagraphElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
+export interface _internal_ComponentSwitchGroup extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: SwitchGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element;
+}
+export interface _internal_ComponentSwitchLabel extends _internal_ComponentLabel {
+}
+export interface _internal_ComponentSwitchDescription extends _internal_ComponentDescription {
+}
+/** @deprecated use `<Field>` instead of `<SwitchGroup>` */
+export declare let SwitchGroup: _internal_ComponentSwitchGroup;
+/** @deprecated use `<Label>` instead of `<SwitchLabel>` */
+export declare let SwitchLabel: _internal_ComponentSwitchLabel;
+/** @deprecated use `<Description>` instead of `<SwitchDescription>` */
+export declare let SwitchDescription: _internal_ComponentSwitchDescription;
+export declare let Switch: _internal_ComponentSwitch & {
+    /** @deprecated use `<Field>` instead of `<Switch.Group>` */
+    Group: _internal_ComponentSwitchGroup;
+    /** @deprecated use `<Label>` instead of `<Switch.Label>` */
+    Label: _internal_ComponentSwitchLabel;
+    /** @deprecated use `<Description>` instead of `<Switch.Description>` */
+    Description: _internal_ComponentSwitchDescription;
 };
 export {};

dist/components/switch/switch.js

@@ -1,1 +0,1 @@
-import l,{Fragment as D,createContext as k,useCallback as c,useContext as L,useMemo as b,useState as R,useRef as C}from"react";import{forwardRefWithAs as A,render as y,compact as G}from"../../utils/render.js";import{useId as K}from"../../hooks/use-id.js";import{Keys as T}from"../keyboard.js";import{isDisabledReactIssue7711 as M}from"../../utils/bugs.js";import{Label as H,useLabels as x}from"../label/label.js";import{Description as U,useDescriptions as _}from"../description/description.js";import{useResolveButtonType as B}from"../../hooks/use-resolve-button-type.js";import{useSyncRefs as I}from"../../hooks/use-sync-refs.js";import{VisuallyHidden as F}from"../../internal/visually-hidden.js";import{attemptSubmit as W}from"../../utils/form.js";let m=k(null);m.displayName="GroupContext";let O=D;function j(f){let[n,i]=R(null),[e,a]=x(),[o,d]=_(),u=b(()=>({switch:n,setSwitch:i,labelledby:e,describedby:o}),[n,i,e,o]),p={},t=f;return l.createElement(d,{name:"Switch.Description"},l.createElement(a,{name:"Switch.Label",props:{onClick(){!n||(n.click(),n.focus({preventScroll:!0}))}}},l.createElement(m.Provider,{value:u},y({ourProps:p,theirProps:t,defaultTag:O,name:"Switch.Group"}))))}let N="button",V=A(function(n,i){let{checked:e,onChange:a,name:o,value:d,...u}=n,p=`headlessui-switch-${K()}`,t=L(m),h=C(null),S=I(h,i,t===null?null:t.setSwitch),s=c(()=>a(!e),[a,e]),w=c(r=>{if(M(r.currentTarget))return r.preventDefault();r.preventDefault(),s()},[s]),E=c(r=>{r.key===T.Space?(r.preventDefault(),s()):r.key===T.Enter&&W(r.currentTarget)},[s]),P=c(r=>r.preventDefault(),[]),v=b(()=>({checked:e}),[e]),g={id:p,ref:S,role:"switch",type:B(n,h),tabIndex:0,"aria-checked":e,"aria-labelledby":t==null?void 0:t.labelledby,"aria-describedby":t==null?void 0:t.describedby,onClick:w,onKeyUp:E,onKeyPress:P};return l.createElement(l.Fragment,null,o!=null&&e&&l.createElement(F,{...G({as:"input",type:"checkbox",hidden:!0,readOnly:!0,checked:e,name:o,value:d})}),y({ourProps:g,theirProps:u,slot:v,defaultTag:N,name:"Switch"}))}),ce=Object.assign(V,{Group:j,Label:H,Description:U});export{ce as Switch};
+"use client";import{useFocusRing as $}from"@react-aria/focus";import{useHover as q}from"@react-aria/interactions";import i,{Fragment as z,createContext as Q,useCallback as Y,useContext as Z,useMemo as L,useRef as ee,useState as G}from"react";import{useActivePress as te}from'../../hooks/use-active-press.js';import{useControllable as oe}from'../../hooks/use-controllable.js';import{useDefaultValue as re}from'../../hooks/use-default-value.js';import{useDisposables as ne}from'../../hooks/use-disposables.js';import{useEvent as m}from'../../hooks/use-event.js';import{useId as le}from'../../hooks/use-id.js';import{useResolveButtonType as ie}from'../../hooks/use-resolve-button-type.js';import{useSyncRefs as ae}from'../../hooks/use-sync-refs.js';import{useDisabled as se}from'../../internal/disabled.js';import{FormFields as pe}from'../../internal/form-fields.js';import{useProvidedId as ce}from'../../internal/id.js';import{isDisabledReactIssue7711 as ue}from'../../utils/bugs.js';import{attemptSubmit as de}from'../../utils/form.js';import{forwardRefWithAs as me,mergeProps as fe,render as R}from'../../utils/render.js';import{Description as be,useDescribedBy as he,useDescriptions as Te}from'../description/description.js';import{Keys as A}from'../keyboard.js';import{Label as ye,useLabelledBy as Se,useLabels as we}from'../label/label.js';let S=Q(null);S.displayName="GroupContext";let _e=z;function Pe(n){var a;let[o,p]=G(null),[f,b]=we(),[h,t]=Te(),c=L(()=>({switch:o,setSwitch:p}),[o,p]),T={},y=n;return i.createElement(t,{name:"Switch.Description",value:h},i.createElement(b,{name:"Switch.Label",value:f,props:{htmlFor:(a=c.switch)==null?void 0:a.id,onClick(u){o&&(u.currentTarget instanceof HTMLLabelElement&&u.preventDefault(),o.click(),o.focus({preventScroll:!0}))}}},i.createElement(S.Provider,{value:c},R({ourProps:T,theirProps:y,slot:{},defaultTag:_e,name:"Switch.Group"}))))}let Ee="button";function De(n,o){var C;let p=le(),f=ce(),b=se(),{id:h=f||`headlessui-switch-${p}`,disabled:t=b||!1,checked:c,defaultChecked:T,onChange:y,name:a,value:u,form:F,autoFocus:d=!1,...k}=n,w=Z(S),_=ee(null),H=ae(_,o,w===null?null:w.setSwitch),l=re(T),[s,r]=oe(c,y,l!=null?l:!1),M=ne(),[P,E]=G(!1),D=m(()=>{E(!0),r==null||r(!s),M.nextFrame(()=>{E(!1)})}),U=m(e=>{if(ue(e.currentTarget))return e.preventDefault();e.preventDefault(),D()}),I=m(e=>{e.key===A.Space?(e.preventDefault(),D()):e.key===A.Enter&&de(e.currentTarget)}),B=m(e=>e.preventDefault()),K=Se(),W=he(),{isFocusVisible:g,focusProps:O}=$({autoFocus:d}),{isHovered:v,hoverProps:N}=q({isDisabled:t}),{pressed:x,pressProps:J}=te({disabled:t}),V=L(()=>({checked:s,disabled:t,hover:v,focus:g,active:x,autofocus:d,changing:P}),[s,v,g,x,t,P,d]),X=fe({id:h,ref:H,role:"switch",type:ie(n,_),tabIndex:n.tabIndex===-1?0:(C=n.tabIndex)!=null?C:0,"aria-checked":s,"aria-labelledby":K,"aria-describedby":W,disabled:t||void 0,autoFocus:d,onClick:U,onKeyUp:I,onKeyPress:B},O,N,J),j=Y(()=>{if(l!==void 0)return r==null?void 0:r(l)},[r,l]);return i.createElement(i.Fragment,null,a!=null&&i.createElement(pe,{disabled:t,data:{[a]:u||"on"},overrides:{type:"checkbox",checked:s},form:F,onReset:j}),R({ourProps:X,theirProps:k,slot:V,defaultTag:Ee,name:"Switch"}))}let ge=me(De),ve=Pe,xe=ye,Ce=be,qe=Object.assign(ge,{Group:ve,Label:xe,Description:Ce});export{qe as Switch,Ce as SwitchDescription,ve as SwitchGroup,xe as SwitchLabel};

dist/components/tabs/tabs.d.ts

@@ -1,63 +0,86 @@
-import React, { Ref } from 'react';
-import { Props } from '../../types';
-import { PropsForFeatures } from '../../utils/render';
-interface TabsRenderPropArg {
+import React, { type ElementType, type Ref } from 'react';
+import type { Props } from '../../types.js';
+import { type HasDisplayName, type PropsForFeatures, type RefProp } from '../../utils/render.js';
+declare let DEFAULT_TABS_TAG: "div";
+type TabsRenderPropArg = {
     selectedIndex: number;
-}
-interface ListRenderPropArg {
+};
+type TabsPropsWeControl = never;
+export type TabGroupProps<TTag extends ElementType = typeof DEFAULT_TABS_TAG> = Props<TTag, TabsRenderPropArg, TabsPropsWeControl, {
+    defaultIndex?: number;
+    onChange?: (index: number) => void;
+    selectedIndex?: number;
+    vertical?: boolean;
+    manual?: boolean;
+}>;
+declare function GroupFn<TTag extends ElementType = typeof DEFAULT_TABS_TAG>(props: TabGroupProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element;
+declare let DEFAULT_LIST_TAG: "div";
+type ListRenderPropArg = {
     selectedIndex: number;
-}
-declare type ListPropsWeControl = 'role' | 'aria-orientation';
-interface TabRenderPropArg {
+};
+type ListPropsWeControl = 'aria-orientation' | 'role';
+export type TabListProps<TTag extends ElementType = typeof DEFAULT_LIST_TAG> = Props<TTag, ListRenderPropArg, ListPropsWeControl, {}>;
+declare function ListFn<TTag extends ElementType = typeof DEFAULT_LIST_TAG>(props: TabListProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+declare let DEFAULT_TAB_TAG: "button";
+type TabRenderPropArg = {
+    hover: boolean;
+    focus: boolean;
+    active: boolean;
+    autofocus: boolean;
     selected: boolean;
-}
-declare type TabPropsWeControl = 'id' | 'role' | 'type' | 'aria-controls' | 'aria-selected' | 'tabIndex';
-interface PanelsRenderPropArg {
+    disabled: boolean;
+};
+type TabPropsWeControl = 'aria-controls' | 'aria-selected' | 'role' | 'tabIndex';
+export type TabProps<TTag extends ElementType = typeof DEFAULT_TAB_TAG> = Props<TTag, TabRenderPropArg, TabPropsWeControl, {
+    autoFocus?: boolean;
+    disabled?: boolean;
+}>;
+declare function TabFn<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(props: TabProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+declare let DEFAULT_PANELS_TAG: "div";
+type PanelsRenderPropArg = {
     selectedIndex: number;
-}
-interface PanelRenderPropArg {
+};
+export type TabPanelsProps<TTag extends ElementType = typeof DEFAULT_PANELS_TAG> = Props<TTag, PanelsRenderPropArg>;
+declare function PanelsFn<TTag extends ElementType = typeof DEFAULT_PANELS_TAG>(props: TabPanelsProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+declare let DEFAULT_PANEL_TAG: "div";
+type PanelRenderPropArg = {
     selected: boolean;
+    focus: boolean;
+};
+type PanelPropsWeControl = 'role' | 'aria-labelledby';
+declare let PanelRenderFeatures: number;
+export type TabPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, PanelPropsWeControl, PropsForFeatures<typeof PanelRenderFeatures> & {
+    id?: string;
+    tabIndex?: number;
+}>;
+declare function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: TabPanelProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element | null;
+export interface _internal_ComponentTab extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_TAB_TAG>(props: TabProps<TTag> & RefProp<typeof TabFn>): JSX.Element;
 }
-declare type PanelPropsWeControl = 'id' | 'role' | 'aria-labelledby' | 'tabIndex';
-declare let PanelRenderFeatures: number;
-export declare let Tab: (<TTag extends React.ElementType<any> = "button">(props: Props<TTag, TabRenderPropArg, TabPropsWeControl>, ref: Ref<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-    displayName: string;
-} & {
-    Group: (<TTag_1 extends React.ElementType<any> = React.ExoticComponent<{
-        children?: React.ReactNode;
-    }>>(props: Omit<import("../../types").PropsOf<TTag_1>, "as" | "children" | "refName" | "className"> & {
-        as?: TTag_1 | undefined;
-        children?: React.ReactNode | ((bag: TabsRenderPropArg) => React.ReactElement<any, string | React.JSXElementConstructor<any>>);
-        refName?: string | undefined;
-    } & (import("../../types").PropsOf<TTag_1> extends {
-        className?: any;
-    } ? {
-        className?: string | ((bag: TabsRenderPropArg) => string) | undefined;
-    } : {}) & {
-        defaultIndex?: number | undefined;
-        onChange?: ((index: number) => void) | undefined;
-        selectedIndex?: number | undefined;
-        vertical?: boolean | undefined;
-        manual?: boolean | undefined;
-    }, ref: Ref<HTMLElement>) => JSX.Element) & {
-        displayName: string;
-    };
-    List: (<TTag_2 extends React.ElementType<any> = "div">(props: Props<TTag_2, ListRenderPropArg, ListPropsWeControl> & {}, ref: Ref<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
-    Panels: (<TTag_3 extends React.ElementType<any> = "div">(props: Props<TTag_3, PanelsRenderPropArg, "1D45E01E-AF44-47C4-988A-19A94EBAF55C">, ref: Ref<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
-    Panel: (<TTag_4 extends React.ElementType<any> = "div">(props: Props<TTag_4, PanelRenderPropArg, PanelPropsWeControl> & (({
-        static?: undefined;
-    } & {
-        unmount?: boolean | undefined;
-    }) | ({
-        unmount?: undefined;
-    } & {
-        static?: boolean | undefined;
-    })), ref: Ref<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-        displayName: string;
-    };
+export interface _internal_ComponentTabGroup extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_TABS_TAG>(props: TabGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element;
+}
+export interface _internal_ComponentTabList extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_LIST_TAG>(props: TabListProps<TTag> & RefProp<typeof ListFn>): JSX.Element;
+}
+export interface _internal_ComponentTabPanels extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_PANELS_TAG>(props: TabPanelsProps<TTag> & RefProp<typeof PanelsFn>): JSX.Element;
+}
+export interface _internal_ComponentTabPanel extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: TabPanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element;
+}
+export declare let TabGroup: _internal_ComponentTabGroup;
+export declare let TabList: _internal_ComponentTabList;
+export declare let TabPanels: _internal_ComponentTabPanels;
+export declare let TabPanel: _internal_ComponentTabPanel;
+export declare let Tab: _internal_ComponentTab & {
+    /** @deprecated use `<TabGroup>` instead of `<Tab.Group>` */
+    Group: _internal_ComponentTabGroup;
+    /** @deprecated use `<TabList>` instead of `<Tab.List>` */
+    List: _internal_ComponentTabList;
+    /** @deprecated use `<TabPanels>` instead of `<Tab.Panels>` */
+    Panels: _internal_ComponentTabPanels;
+    /** @deprecated use `<TabPanel>` instead of `<Tab.Panel>` */
+    Panel: _internal_ComponentTabPanel;
 };
 export {};

dist/components/tabs/tabs.js

@@ -1,1 +0,1 @@
-import O,{Fragment as J,createContext as B,useCallback as U,useContext as N,useMemo as I,useReducer as Q,useRef as _,useEffect as G}from"react";import{render as v,Features as K,forwardRefWithAs as M}from"../../utils/render.js";import{useId as z}from"../../hooks/use-id.js";import{match as $}from"../../utils/match.js";import{Keys as y}from"../../components/keyboard.js";import{focusIn as E,Focus as P}from"../../utils/focus-management.js";import{useIsoMorphicEffect as k}from"../../hooks/use-iso-morphic-effect.js";import{useSyncRefs as D}from"../../hooks/use-sync-refs.js";import{useResolveButtonType as X}from"../../hooks/use-resolve-button-type.js";import{useLatestValue as V}from"../../hooks/use-latest-value.js";import{FocusSentinel as Y}from"../../internal/focus-sentinel.js";var Z=(r=>(r[r.SetSelectedIndex=0]="SetSelectedIndex",r[r.SetOrientation=1]="SetOrientation",r[r.SetActivation=2]="SetActivation",r[r.RegisterTab=3]="RegisterTab",r[r.UnregisterTab=4]="UnregisterTab",r[r.RegisterPanel=5]="RegisterPanel",r[r.UnregisterPanel=6]="UnregisterPanel",r[r.ForceRerender=7]="ForceRerender",r))(Z||{});let ee={[0](e,t){return e.selectedIndex===t.index?e:{...e,selectedIndex:t.index}},[1](e,t){return e.orientation===t.orientation?e:{...e,orientation:t.orientation}},[2](e,t){return e.activation===t.activation?e:{...e,activation:t.activation}},[3](e,t){return e.tabs.includes(t.tab)?e:{...e,tabs:[...e.tabs,t.tab]}},[4](e,t){return{...e,tabs:e.tabs.filter(i=>i!==t.tab)}},[5](e,t){return e.panels.includes(t.panel)?e:{...e,panels:[...e.panels,t.panel]}},[6](e,t){return{...e,panels:e.panels.filter(i=>i!==t.panel)}},[7](e){return{...e}}},W=B(null);W.displayName="TabsContext";let j=B(null);j.displayName="TabsSSRContext";function F(e){let t=N(W);if(t===null){let i=new Error(`<${e} /> is missing a parent <Tab.Group /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(i,F),i}return t}function te(e,t){return $(t.type,ee,e,t)}let ne=J,re=M(function(t,i){let{defaultIndex:u=0,vertical:x=!1,manual:d=!1,onChange:f,selectedIndex:l=null,...r}=t;const p=x?"vertical":"horizontal",T=d?"manual":"auto";let c=D(i),[a,o]=Q(te,{selectedIndex:typeof window=="undefined"?l!=null?l:u:null,tabs:[],panels:[],orientation:p,activation:T}),R=I(()=>({selectedIndex:a.selectedIndex}),[a.selectedIndex]),L=V(f||(()=>{})),S=V(a.tabs);G(()=>{o({type:1,orientation:p})},[p]),G(()=>{o({type:2,activation:T})},[T]),k(()=>{if(a.tabs.length<=0||l===null&&a.selectedIndex!==null)return;let s=a.tabs.map(n=>n.current).filter(Boolean),b=s.filter(n=>!n.hasAttribute("disabled")),m=l!=null?l:u;if(m<0)o({type:0,index:s.indexOf(b[0])});else if(m>a.tabs.length)o({type:0,index:s.indexOf(b[b.length-1])});else{let n=s.slice(0,m),C=[...s.slice(m),...n].find(q=>b.includes(q));if(!C)return;o({type:0,index:s.indexOf(C)})}},[u,l,a.tabs,a.selectedIndex]);let A=_(a.selectedIndex);G(()=>{A.current=a.selectedIndex},[a.selectedIndex]);let h=I(()=>[a,{dispatch:o,change(s){A.current!==s&&L.current(s),A.current=s,o({type:0,index:s})}}],[a,o]),w=_(0),H={ref:c};return O.createElement(j.Provider,{value:typeof window=="undefined"?w:null},O.createElement(W.Provider,{value:h},O.createElement(Y,{onFocus:()=>{var s,b;for(let m of S.current)if(((s=m.current)==null?void 0:s.tabIndex)===0)return(b=m.current)==null||b.focus(),!0;return!1}}),v({ourProps:H,theirProps:r,slot:R,defaultTag:ne,name:"Tabs"})))}),ae="div",le=M(function(t,i){let[{selectedIndex:u,orientation:x}]=F("Tab.List"),d=D(i);return v({ourProps:{ref:d,role:"tablist","aria-orientation":x},theirProps:t,slot:{selectedIndex:u},defaultTag:ae,name:"Tabs.List"})}),oe="button",ie=M(function(t,i){var b,m;let u=`headlessui-tabs-tab-${z()}`,[{selectedIndex:x,tabs:d,panels:f,orientation:l,activation:r},{dispatch:p,change:T}]=F("Tab"),c=_(null),a=D(c,i,n=>{!n||p({type:7})});k(()=>(p({type:3,tab:c}),()=>p({type:4,tab:c})),[p,c]);let o=d.indexOf(c),R=o===x,L=U(n=>{let g=d.map(C=>C.current).filter(Boolean);if(n.key===y.Space||n.key===y.Enter){n.preventDefault(),n.stopPropagation(),T(o);return}switch(n.key){case y.Home:case y.PageUp:return n.preventDefault(),n.stopPropagation(),E(g,P.First);case y.End:case y.PageDown:return n.preventDefault(),n.stopPropagation(),E(g,P.Last)}return $(l,{vertical(){if(n.key===y.ArrowUp)return E(g,P.Previous|P.WrapAround);if(n.key===y.ArrowDown)return E(g,P.Next|P.WrapAround)},horizontal(){if(n.key===y.ArrowLeft)return E(g,P.Previous|P.WrapAround);if(n.key===y.ArrowRight)return E(g,P.Next|P.WrapAround)}})},[d,l,o,T]),S=U(()=>{var n;(n=c.current)==null||n.focus()},[c]),A=U(()=>{var n;(n=c.current)==null||n.focus(),T(o)},[T,o,c]),h=U(n=>{n.preventDefault()},[]),w=I(()=>({selected:R}),[R]),H=t,s={ref:a,onKeyDown:L,onFocus:r==="manual"?S:A,onMouseDown:h,onClick:A,id:u,role:"tab",type:X(t,c),"aria-controls":(m=(b=f[o])==null?void 0:b.current)==null?void 0:m.id,"aria-selected":R,tabIndex:R?0:-1};return v({ourProps:s,theirProps:H,slot:w,defaultTag:oe,name:"Tabs.Tab"})}),se="div",ue=M(function(t,i){let[{selectedIndex:u}]=F("Tab.Panels"),x=D(i),d=I(()=>({selectedIndex:u}),[u]);return v({ourProps:{ref:x},theirProps:t,slot:d,defaultTag:se,name:"Tabs.Panels"})}),ce="div",pe=K.RenderStrategy|K.Static,de=M(function(t,i){var S,A;let[{selectedIndex:u,tabs:x,panels:d},{dispatch:f}]=F("Tab.Panel"),l=N(j);l!==null&&u===null&&(u=0);let r=`headlessui-tabs-panel-${z()}`,p=_(null),T=D(p,i,h=>{!h||f({type:7})});k(()=>(f({type:5,panel:p}),()=>f({type:6,panel:p})),[f,p]);let c=d.indexOf(p),a=l===null?c===u:l.current++===u,o=I(()=>({selected:a}),[a]),R=t,L={ref:T,id:r,role:"tabpanel","aria-labelledby":(A=(S=x[c])==null?void 0:S.current)==null?void 0:A.id,tabIndex:a?0:-1};return v({ourProps:L,theirProps:R,slot:o,defaultTag:ce,features:pe,visible:a,name:"Tabs.Panel"})}),_e=Object.assign(ie,{Group:re,List:le,Panels:ue,Panel:de});export{_e as Tab};
+"use client";import{useFocusRing as te}from"@react-aria/focus";import{useHover as de}from"@react-aria/interactions";import G,{createContext as re,useContext as ne,useMemo as D,useReducer as ce,useRef as q}from"react";import{useActivePress as fe}from'../../hooks/use-active-press.js';import{useEvent as S}from'../../hooks/use-event.js';import{useId as ae}from'../../hooks/use-id.js';import{useIsoMorphicEffect as W}from'../../hooks/use-iso-morphic-effect.js';import{useLatestValue as j}from'../../hooks/use-latest-value.js';import{useResolveButtonType as be}from'../../hooks/use-resolve-button-type.js';import{useSyncRefs as U}from'../../hooks/use-sync-refs.js';import{FocusSentinel as me}from'../../internal/focus-sentinel.js';import{Hidden as Pe}from'../../internal/hidden.js';import{Focus as P,FocusResult as K,focusIn as v,sortByDomNode as H}from'../../utils/focus-management.js';import{match as w}from'../../utils/match.js';import{microTask as ye}from'../../utils/micro-task.js';import{getOwnerDocument as xe}from'../../utils/owner.js';import{RenderFeatures as oe,forwardRefWithAs as O,mergeProps as le,render as N}from'../../utils/render.js';import{StableCollection as ge,useStableCollectionIndex as se}from'../../utils/stable-collection.js';import{Keys as y}from'../keyboard.js';var Ae=(t=>(t[t.Forwards=0]="Forwards",t[t.Backwards=1]="Backwards",t))(Ae||{}),Ee=(o=>(o[o.Less=-1]="Less",o[o.Equal=0]="Equal",o[o.Greater=1]="Greater",o))(Ee||{}),Re=(n=>(n[n.SetSelectedIndex=0]="SetSelectedIndex",n[n.RegisterTab=1]="RegisterTab",n[n.UnregisterTab=2]="UnregisterTab",n[n.RegisterPanel=3]="RegisterPanel",n[n.UnregisterPanel=4]="UnregisterPanel",n))(Re||{});let Le={[0](e,r){var c;let t=H(e.tabs,T=>T.current),o=H(e.panels,T=>T.current),a=t.filter(T=>{var d;return!((d=T.current)!=null&&d.hasAttribute("disabled"))}),n={...e,tabs:t,panels:o};if(r.index<0||r.index>t.length-1){let T=w(Math.sign(r.index-e.selectedIndex),{[-1]:()=>1,[0]:()=>w(Math.sign(r.index),{[-1]:()=>0,[0]:()=>0,[1]:()=>1}),[1]:()=>0});if(a.length===0)return n;let d=w(T,{[0]:()=>t.indexOf(a[0]),[1]:()=>t.indexOf(a[a.length-1])});return{...n,selectedIndex:d===-1?e.selectedIndex:d}}let u=t.slice(0,r.index),x=[...t.slice(r.index),...u].find(T=>a.includes(T));if(!x)return n;let f=(c=t.indexOf(x))!=null?c:e.selectedIndex;return f===-1&&(f=e.selectedIndex),{...n,selectedIndex:f}},[1](e,r){if(e.tabs.includes(r.tab))return e;let t=e.tabs[e.selectedIndex],o=H([...e.tabs,r.tab],n=>n.current),a=e.selectedIndex;return e.info.current.isControlled||(a=o.indexOf(t),a===-1&&(a=e.selectedIndex)),{...e,tabs:o,selectedIndex:a}},[2](e,r){return{...e,tabs:e.tabs.filter(t=>t!==r.tab)}},[3](e,r){return e.panels.includes(r.panel)?e:{...e,panels:H([...e.panels,r.panel],t=>t.current)}},[4](e,r){return{...e,panels:e.panels.filter(t=>t!==r.panel)}}},z=re(null);z.displayName="TabsDataContext";function C(e){let r=ne(z);if(r===null){let t=new Error(`<${e} /> is missing a parent <Tab.Group /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(t,C),t}return r}let V=re(null);V.displayName="TabsActionsContext";function Q(e){let r=ne(V);if(r===null){let t=new Error(`<${e} /> is missing a parent <Tab.Group /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(t,Q),t}return r}function _e(e,r){return w(r.type,Le,e,r)}let De="div";function Se(e,r){let{defaultIndex:t=0,vertical:o=!1,manual:a=!1,onChange:n,selectedIndex:u=null,..._}=e;const x=o?"vertical":"horizontal",f=a?"manual":"auto";let c=u!==null,T=j({isControlled:c}),d=U(r),[i,s]=ce(_e,{info:T,selectedIndex:u!=null?u:t,tabs:[],panels:[]}),F=D(()=>({selectedIndex:i.selectedIndex}),[i.selectedIndex]),M=j(n||(()=>{})),b=j(i.tabs),m=D(()=>({orientation:x,activation:f,...i}),[x,f,i]),E=S(p=>(s({type:1,tab:p}),()=>s({type:2,tab:p}))),I=S(p=>(s({type:3,panel:p}),()=>s({type:4,panel:p}))),g=S(p=>{R.current!==p&&M.current(p),c||s({type:0,index:p})}),R=j(c?e.selectedIndex:i.selectedIndex),J=D(()=>({registerTab:E,registerPanel:I,change:g}),[]);W(()=>{s({type:0,index:u!=null?u:t})},[u]),W(()=>{if(R.current===void 0||i.tabs.length<=0)return;let p=H(i.tabs,L=>L.current);p.some((L,B)=>i.tabs[B]!==L)&&g(p.indexOf(i.tabs[R.current]))});let k={ref:d};return G.createElement(ge,null,G.createElement(V.Provider,{value:J},G.createElement(z.Provider,{value:m},m.tabs.length<=0&&G.createElement(me,{onFocus:()=>{var p,h;for(let L of b.current)if(((p=L.current)==null?void 0:p.tabIndex)===0)return(h=L.current)==null||h.focus(),!0;return!1}}),N({ourProps:k,theirProps:_,slot:F,defaultTag:De,name:"Tabs"}))))}let Fe="div";function Ie(e,r){let{orientation:t,selectedIndex:o}=C("Tab.List"),a=U(r),n=D(()=>({selectedIndex:o}),[o]);return N({ourProps:{ref:a,role:"tablist","aria-orientation":t},theirProps:e,slot:n,defaultTag:Fe,name:"Tabs.List"})}let he="button";function ve(e,r){var Y,Z;let t=ae(),{id:o=`headlessui-tabs-tab-${t}`,disabled:a=!1,autoFocus:n=!1,...u}=e,{orientation:_,activation:x,selectedIndex:f,tabs:c,panels:T}=C("Tab"),d=Q("Tab"),i=C("Tab"),s=q(null),F=U(s,r);W(()=>d.registerTab(s),[d,s]);let M=se("tabs"),b=c.indexOf(s);b===-1&&(b=M);let m=b===f,E=S(l=>{var X;let A=l();if(A===K.Success&&x==="auto"){let $=(X=xe(s))==null?void 0:X.activeElement,ee=i.tabs.findIndex(Te=>Te.current===$);ee!==-1&&d.change(ee)}return A}),I=S(l=>{let A=c.map($=>$.current).filter(Boolean);if(l.key===y.Space||l.key===y.Enter){l.preventDefault(),l.stopPropagation(),d.change(b);return}switch(l.key){case y.Home:case y.PageUp:return l.preventDefault(),l.stopPropagation(),E(()=>v(A,P.First));case y.End:case y.PageDown:return l.preventDefault(),l.stopPropagation(),E(()=>v(A,P.Last))}if(E(()=>w(_,{vertical(){return l.key===y.ArrowUp?v(A,P.Previous|P.WrapAround):l.key===y.ArrowDown?v(A,P.Next|P.WrapAround):K.Error},horizontal(){return l.key===y.ArrowLeft?v(A,P.Previous|P.WrapAround):l.key===y.ArrowRight?v(A,P.Next|P.WrapAround):K.Error}}))===K.Success)return l.preventDefault()}),g=q(!1),R=S(()=>{var l;g.current||(g.current=!0,(l=s.current)==null||l.focus({preventScroll:!0}),d.change(b),ye(()=>{g.current=!1}))}),J=S(l=>{l.preventDefault()}),{isFocusVisible:k,focusProps:p}=te({autoFocus:n}),{isHovered:h,hoverProps:L}=de({isDisabled:a}),{pressed:B,pressProps:ie}=fe({disabled:a}),pe=D(()=>({selected:m,hover:h,active:B,focus:k,autofocus:n,disabled:a}),[m,h,k,B,n,a]),ue=le({ref:F,onKeyDown:I,onMouseDown:J,onClick:R,id:o,role:"tab",type:be(e,s),"aria-controls":(Z=(Y=T[b])==null?void 0:Y.current)==null?void 0:Z.id,"aria-selected":m,tabIndex:m?0:-1,disabled:a||void 0,autoFocus:n},p,L,ie);return N({ourProps:ue,theirProps:u,slot:pe,defaultTag:he,name:"Tabs.Tab"})}let Ce="div";function Me(e,r){let{selectedIndex:t}=C("Tab.Panels"),o=U(r),a=D(()=>({selectedIndex:t}),[t]);return N({ourProps:{ref:o},theirProps:e,slot:a,defaultTag:Ce,name:"Tabs.Panels"})}let Ge="div",Ue=oe.RenderStrategy|oe.Static;function He(e,r){var E,I,g,R;let t=ae(),{id:o=`headlessui-tabs-panel-${t}`,tabIndex:a=0,...n}=e,{selectedIndex:u,tabs:_,panels:x}=C("Tab.Panel"),f=Q("Tab.Panel"),c=q(null),T=U(c,r);W(()=>f.registerPanel(c),[f,c]);let d=se("panels"),i=x.indexOf(c);i===-1&&(i=d);let s=i===u,{isFocusVisible:F,focusProps:M}=te(),b=D(()=>({selected:s,focus:F}),[s,F]),m=le({ref:T,id:o,role:"tabpanel","aria-labelledby":(I=(E=_[i])==null?void 0:E.current)==null?void 0:I.id,tabIndex:s?a:-1},M);return!s&&((g=n.unmount)==null||g)&&!((R=n.static)!=null&&R)?G.createElement(Pe,{as:"span","aria-hidden":"true",...m}):N({ourProps:m,theirProps:n,slot:b,defaultTag:Ge,features:Ue,visible:s,name:"Tabs.Panel"})}let we=O(ve),Oe=O(Se),Ne=O(Ie),ke=O(Me),Be=O(He),st=Object.assign(we,{Group:Oe,List:Ne,Panels:ke,Panel:Be});export{st as Tab,Oe as TabGroup,Ne as TabList,Be as TabPanel,ke as TabPanels};

dist/components/transitions/transition.d.ts

@@ -1,40 +0,1 @@
-import React, { ElementType, MutableRefObject, Ref } from 'react';
-import { Props } from '../../types';
-import { Features, PropsForFeatures } from '../../utils/render';
-export interface TransitionClasses {
-    enter?: string;
-    enterFrom?: string;
-    enterTo?: string;
-    entered?: string;
-    leave?: string;
-    leaveFrom?: string;
-    leaveTo?: string;
-}
-export interface TransitionEvents {
-    beforeEnter?: () => void;
-    afterEnter?: () => void;
-    beforeLeave?: () => void;
-    afterLeave?: () => void;
-}
-declare type TransitionChildProps<TTag> = Props<TTag, TransitionChildRenderPropArg> & PropsForFeatures<typeof TransitionChildRenderFeatures> & TransitionClasses & TransitionEvents & {
-    appear?: boolean;
-};
-declare let DEFAULT_TRANSITION_CHILD_TAG: "div";
-declare type TransitionChildRenderPropArg = MutableRefObject<HTMLDivElement>;
-declare let TransitionChildRenderFeatures: Features;
-declare function Child<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionChildProps<TTag>): JSX.Element;
-export declare let Transition: (<TTag extends React.ElementType<any> = "div">(props: TransitionChildProps<TTag> & {
-    show?: boolean | undefined;
-    appear?: boolean | undefined;
-}, ref: Ref<HTMLElement>) => JSX.Element) & {
-    displayName: string;
-} & {
-    Child: typeof Child;
-    Root: (<TTag extends React.ElementType<any> = "div">(props: TransitionChildProps<TTag> & {
-        show?: boolean | undefined;
-        appear?: boolean | undefined;
-    }, ref: Ref<HTMLElement>) => JSX.Element) & {
-        displayName: string;
-    };
-};
-export {};
+export * from '../transition/transition.js';

dist/components/transitions/transition.js

@@ -1,1 +0,1 @@
-import l,{Fragment as G,createContext as B,useContext as _,useEffect as v,useMemo as W,useRef as C,useState as U}from"react";import{Features as ue,forwardRefWithAs as q,render as z,RenderStrategy as T}from"../../utils/render.js";import{OpenClosedProvider as de,State as V,useOpenClosed as J}from"../../internal/open-closed.js";import{match as I}from"../../utils/match.js";import{microTask as fe}from"../../utils/micro-task.js";import{useId as Te}from"../../hooks/use-id.js";import{useIsMounted as pe}from"../../hooks/use-is-mounted.js";import{useIsoMorphicEffect as ce}from"../../hooks/use-iso-morphic-effect.js";import{useLatestValue as b}from"../../hooks/use-latest-value.js";import{useServerHandoffComplete as K}from"../../hooks/use-server-handoff-complete.js";import{useSyncRefs as Q}from"../../hooks/use-sync-refs.js";import{useTransition as me}from"../../hooks/use-transition.js";function c(e=""){return e.split(" ").filter(r=>r.trim().length>1)}let N=B(null);N.displayName="TransitionContext";var he=(t=>(t.Visible="visible",t.Hidden="hidden",t))(he||{});function ge(){let e=_(N);if(e===null)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");return e}function ve(){let e=_(R);if(e===null)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");return e}let R=B(null);R.displayName="NestingContext";function F(e){return"children"in e?F(e.children):e.current.filter(({state:r})=>r==="visible").length>0}function X(e){let r=b(e),t=C([]),n=pe(),u=b((s,o=T.Hidden)=>{let i=t.current.findIndex(({id:d})=>d===s);i!==-1&&(I(o,{[T.Unmount](){t.current.splice(i,1)},[T.Hidden](){t.current[i].state="hidden"}}),fe(()=>{var d;!F(t)&&n.current&&((d=r.current)==null||d.call(r))}))}),m=b(s=>{let o=t.current.find(({id:i})=>i===s);return o?o.state!=="visible"&&(o.state="visible"):t.current.push({id:s,state:"visible"}),()=>u.current(s,T.Unmount)});return W(()=>({children:t,register:m,unregister:u}),[m,u,t])}function Ce(){}let be=["beforeEnter","afterEnter","beforeLeave","afterLeave"];function Y(e){var t;let r={};for(let n of be)r[n]=(t=e[n])!=null?t:Ce;return r}function Se(e){let r=C(Y(e));return v(()=>{r.current=Y(e)},[e]),r}let xe="div",Z=ue.RenderStrategy,$=q(function(r,t){let{beforeEnter:n,afterEnter:u,beforeLeave:m,afterLeave:s,enter:o,enterFrom:i,enterTo:d,entered:S,leave:x,leaveFrom:E,leaveTo:L,...p}=r,h=C(null),y=Q(h,t),[f,A]=U("visible"),D=p.unmount?T.Unmount:T.Hidden,{show:g,appear:ee,initial:te}=ge(),{register:P,unregister:H}=ve(),O=C(null),a=Te(),re=C(!1),k=X(()=>{re.current||(A("hidden"),H.current(a))});v(()=>{if(!!a)return P.current(a)},[P,a]),v(()=>{if(D===T.Hidden&&!!a){if(g&&f!=="visible"){A("visible");return}I(f,{["hidden"]:()=>H.current(a),["visible"]:()=>P.current(a)})}},[f,a,P,H,g,D]);let ne=b({enter:c(o),enterFrom:c(i),enterTo:c(d),entered:c(S),leave:c(x),leaveFrom:c(E),leaveTo:c(L)}),ie=Se({beforeEnter:n,afterEnter:u,beforeLeave:m,afterLeave:s}),w=K();v(()=>{if(w&&f==="visible"&&h.current===null)throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")},[h,f,w]);let M=te&&!ee,se=(()=>!w||M||O.current===g?"idle":g?"enter":"leave")();me({container:h,classes:ne,events:ie,direction:se,onStart:b(()=>{}),onStop:b(le=>{le==="leave"&&!F(k)&&(A("hidden"),H.current(a))})}),v(()=>{!M||(D===T.Hidden?O.current=null:O.current=g)},[g,M,f]);let oe=p,ae={ref:y};return l.createElement(R.Provider,{value:k},l.createElement(de,{value:I(f,{["visible"]:V.Open,["hidden"]:V.Closed})},z({ourProps:ae,theirProps:oe,defaultTag:xe,features:Z,visible:f==="visible",name:"Transition.Child"})))}),j=q(function(r,t){let{show:n,appear:u=!1,unmount:m,...s}=r,o=Q(t);K();let i=J();if(n===void 0&&i!==null&&(n=I(i,{[V.Open]:!0,[V.Closed]:!1})),![!0,!1].includes(n))throw new Error("A <Transition /> is used but it is missing a `show={true | false}` prop.");let[d,S]=U(n?"visible":"hidden"),x=X(()=>{S("hidden")}),[E,L]=U(!0),p=C([n]);ce(()=>{E!==!1&&p.current[p.current.length-1]!==n&&(p.current.push(n),L(!1))},[p,n]);let h=W(()=>({show:n,appear:u,initial:E}),[n,u,E]);v(()=>{n?S("visible"):F(x)||S("hidden")},[n,x]);let y={unmount:m};return l.createElement(R.Provider,{value:x},l.createElement(N.Provider,{value:h},z({ourProps:{...y,as:G,children:l.createElement($,{ref:o,...y,...s})},theirProps:{},defaultTag:G,features:Z,visible:d==="visible",name:"Transition"})))});function Ee(e){let r=_(N)!==null,t=J()!==null;return l.createElement(l.Fragment,null,!r&&t?l.createElement(j,{...e}):l.createElement($,{...e}))}let Ge=Object.assign(j,{Child:Ee,Root:j});export{Ge as Transition};
+export*from'../transition/transition.js';

dist/headlessui.esm.js

@@ -1,1 +0,1 @@
-export*from"./components/combobox/combobox.js";export*from"./components/dialog/dialog.js";export*from"./components/disclosure/disclosure.js";export*from"./components/focus-trap/focus-trap.js";export*from"./components/listbox/listbox.js";export*from"./components/menu/menu.js";export*from"./components/popover/popover.js";export*from"./components/portal/portal.js";export*from"./components/radio-group/radio-group.js";export*from"./components/switch/switch.js";export*from"./components/tabs/tabs.js";export*from"./components/transitions/transition.js";
+export*from'./components/button/button.js';export*from'./components/checkbox/checkbox.js';export*from'./components/close-button/close-button.js';export*from'./components/combobox/combobox.js';export*from'./components/data-interactive/data-interactive.js';import{Description as x}from'./components/description/description.js';export*from'./components/dialog/dialog.js';export*from'./components/disclosure/disclosure.js';export*from'./components/field/field.js';export*from'./components/fieldset/fieldset.js';export*from'./components/focus-trap/focus-trap.js';export*from'./components/input/input.js';import{Label as n}from'./components/label/label.js';export*from'./components/legend/legend.js';export*from'./components/listbox/listbox.js';export*from'./components/menu/menu.js';export*from'./components/popover/popover.js';import{Portal as d}from'./components/portal/portal.js';export*from'./components/radio-group/radio-group.js';export*from'./components/select/select.js';export*from'./components/switch/switch.js';export*from'./components/tabs/tabs.js';export*from'./components/textarea/textarea.js';import{useClose as w}from'./internal/close-provider.js';export*from'./components/transition/transition.js';export{x as Description,n as Label,d as Portal,w as useClose};

dist/hooks/use-computed.js

@@ -1,1 +0,1 @@
-import{useState as s}from"react";import{useIsoMorphicEffect as f}from"./use-iso-morphic-effect.js";import{useLatestValue as m}from"./use-latest-value.js";function i(e,o){let[u,t]=s(e),r=m(e);return f(()=>t(r.current),[r,t,...o]),u}export{i as useComputed};
+import{useState as s}from"react";import{useIsoMorphicEffect as f}from'./use-iso-morphic-effect.js';import{useLatestValue as m}from'./use-latest-value.js';function i(e,o){let[u,t]=s(e),r=m(e);return f(()=>t(r.current),[r,t,...o]),u}export{i as useComputed};

dist/hooks/use-disposables.d.ts

@@ -0,10 +1,25 @@
+/**
+ * The `useDisposables` hook returns a `disposables` object that is disposed
+ * when the component is unmounted.
+ */
 export declare function useDisposables(): {
-    enqueue(fn: Function): void;
-    addEventListener<TEventName extends keyof WindowEventMap>(element: HTMLElement, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions | undefined): () => void;
+    addEventListener<TEventName extends keyof WindowEventMap>(element: Window | Document | HTMLElement, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions | undefined): () => void;
     requestAnimationFrame(callback: FrameRequestCallback): () => void;
     nextFrame(callback: FrameRequestCallback): () => void;
     setTimeout(callback: (...args: any[]) => void, ms?: number | undefined, ...args: any[]): () => void;
+    microTask(cb: () => void): () => void;
+    style(node: HTMLElement, property: string, value: string): () => void;
+    group(cb: (d: {
+        addEventListener<TEventName extends keyof WindowEventMap>(element: Window | Document | HTMLElement, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions | undefined): () => void;
+        requestAnimationFrame(callback: FrameRequestCallback): () => void;
+        nextFrame(callback: FrameRequestCallback): () => void;
+        setTimeout(callback: (...args: any[]) => void, ms?: number | undefined, ...args: any[]): () => void;
+        microTask(cb: () => void): () => void;
+        style(node: HTMLElement, property: string, value: string): () => void;
+        group(cb: any): () => void;
+        add(cb: () => void): () => void;
+        dispose(): void;
+    }) => void): () => void;
     add(cb: () => void): () => void;
     dispose(): void;
-    workQueue(): Promise<void>;
 };

dist/hooks/use-disposables.js

@@ -1,1 +0,1 @@
-import{useState as s,useEffect as o}from"react";import{disposables as t}from"../utils/disposables.js";function p(){let[e]=s(t);return o(()=>()=>e.dispose(),[e]),e}export{p as useDisposables};
+import{useEffect as s,useState as o}from"react";import{disposables as t}from'../utils/disposables.js';function p(){let[e]=o(t);return s(()=>()=>e.dispose(),[e]),e}export{p as useDisposables};

dist/hooks/use-event-listener.js

@@ -1,1 +0,1 @@
-import{useEffect as d}from"react";import{useLatestValue as s}from"./use-latest-value.js";function E(n,e,a,t){let i=s(a);d(()=>{n=n!=null?n:window;function r(o){i.current(o)}return n.addEventListener(e,r,t),()=>n.removeEventListener(e,r,t)},[n,e,t])}export{E as useEventListener};
+import{useEffect as d}from"react";import{useLatestValue as s}from'./use-latest-value.js';function E(n,e,a,t){let i=s(a);d(()=>{n=n!=null?n:window;function r(o){i.current(o)}return n.addEventListener(e,r,t),()=>n.removeEventListener(e,r,t)},[n,e,t])}export{E as useEventListener};

dist/hooks/use-flags.d.ts

 export declare function useFlags(initialFlags?: number): {
+    flags: number;
+    setFlag: (flag: number) => void;
     addFlag: (flag: number) => void;
@@ -3,0 +5,0 @@ hasFlag: (flag: number) => boolean;

dist/hooks/use-flags.js

@@ -1,1 +0,1 @@
-import{useState as m,useCallback as t}from"react";function b(g=0){let[r,l]=m(g),u=t(e=>l(a=>a|e),[l]),n=t(e=>Boolean(r&e),[r]),o=t(e=>l(a=>a&~e),[l]),s=t(e=>l(a=>a^e),[l]);return{addFlag:u,hasFlag:n,removeFlag:o,toggleFlag:s}}export{b as useFlags};
+import{useCallback as r,useState as b}from"react";function c(u=0){let[t,l]=b(u),g=r(e=>l(e),[t]),s=r(e=>l(a=>a|e),[t]),m=r(e=>(t&e)===e,[t]),n=r(e=>l(a=>a&~e),[l]),F=r(e=>l(a=>a^e),[l]);return{flags:t,setFlag:g,addFlag:s,hasFlag:m,removeFlag:n,toggleFlag:F}}export{c as useFlags};

dist/hooks/use-id.d.ts

@@ -1,1 +0,1 @@
-export declare let useId: any;
+export { useId } from 'react';

dist/hooks/use-id.js

@@ -1,1 +0,1 @@
-var u;import t from"react";import{useIsoMorphicEffect as d}from"./use-iso-morphic-effect.js";import{useServerHandoffComplete as f}from"./use-server-handoff-complete.js";let l=0;function r(){return++l}let I=(u=t.useId)!=null?u:function(){let n=f(),[e,o]=t.useState(n?r:null);return d(()=>{e===null&&o(r())},[e]),e!=null?""+e:void 0};export{I as useId};
+import{useId as r}from"react";export{r as useId};

dist/hooks/use-inert-others.d.ts

@@ -1,2 +0,29 @@
-import { MutableRefObject } from 'react';
-export declare function useInertOthers<TElement extends HTMLElement>(container: MutableRefObject<TElement | null>, enabled?: boolean): void;
+/**
+ * Mark all elements on the page as inert, except for the ones that are allowed.
+ *
+ * We move up the tree from the allowed elements, and mark all their siblings as
+ * inert. If any of the children happens to be a parent of one of the elements,
+ * then that child will not be marked as inert.
+ *
+ * E.g.:
+ *
+ * ```html
+ * <body>                      <!-- Stop at body -->
+ *   <header></header>         <!-- Inert, sibling of parent -->
+ *   <main>                    <!-- Not inert, parent of allowed element -->
+ *     <div>Sidebar</div>      <!-- Inert, sibling of parent -->
+ *     <div>                   <!-- Not inert, parent of allowed element -->
+ *       <listbox>             <!-- Not inert, parent of allowed element -->
+ *         <button></button>   <!-- Not inert, allowed element -->
+ *         <options></options> <!-- Not inert, allowed element -->
+ *       </listbox>
+ *     </div>
+ *   </main>
+ *   <footer></footer>         <!-- Inert, sibling of parent -->
+ * </body>
+ * ```
+ */
+export declare function useInertOthers(enabled: boolean, { allowed, disallowed, }?: {
+    allowed?: () => (HTMLElement | null)[];
+    disallowed?: () => (HTMLElement | null)[];
+}): void;

dist/hooks/use-inert-others.js

@@ -1,1 +0,1 @@
-import{getOwnerDocument as s}from"../utils/owner.js";import{useIsoMorphicEffect as d}from"./use-iso-morphic-effect.js";let i=new Set,r=new Map;function u(t){t.setAttribute("aria-hidden","true"),t.inert=!0}function l(t){let n=r.get(t);!n||(n["aria-hidden"]===null?t.removeAttribute("aria-hidden"):t.setAttribute("aria-hidden",n["aria-hidden"]),t.inert=n.inert)}function M(t,n=!0){d(()=>{if(!n||!t.current)return;let o=t.current,a=s(o);if(!!a){i.add(o);for(let e of r.keys())e.contains(o)&&(l(e),r.delete(e));return a.querySelectorAll("body > *").forEach(e=>{if(e instanceof HTMLElement){for(let f of i)if(e.contains(f))return;i.size===1&&(r.set(e,{"aria-hidden":e.getAttribute("aria-hidden"),inert:e.inert}),u(e))}}),()=>{if(i.delete(o),i.size>0)a.querySelectorAll("body > *").forEach(e=>{if(e instanceof HTMLElement&&!r.has(e)){for(let f of i)if(e.contains(f))return;r.set(e,{"aria-hidden":e.getAttribute("aria-hidden"),inert:e.inert}),u(e)}});else for(let e of r.keys())l(e),r.delete(e)}}},[n])}export{M as useInertOthers};
+import{disposables as M}from'../utils/disposables.js';import{getOwnerDocument as b}from'../utils/owner.js';import{useIsTopLayer as L}from'./use-is-top-layer.js';import{useIsoMorphicEffect as T}from'./use-iso-morphic-effect.js';let f=new Map,u=new Map;function h(t){var e;let r=(e=u.get(t))!=null?e:0;return u.set(t,r+1),r!==0?()=>m(t):(f.set(t,{"aria-hidden":t.getAttribute("aria-hidden"),inert:t.inert}),t.setAttribute("aria-hidden","true"),t.inert=!0,()=>m(t))}function m(t){var i;let r=(i=u.get(t))!=null?i:1;if(r===1?u.delete(t):u.set(t,r-1),r!==1)return;let e=f.get(t);e&&(e["aria-hidden"]===null?t.removeAttribute("aria-hidden"):t.setAttribute("aria-hidden",e["aria-hidden"]),t.inert=e.inert,f.delete(t))}function y(t,{allowed:r,disallowed:e}={}){let i=L(t,"inert-others");T(()=>{var d,c;if(!i)return;let a=M();for(let n of(d=e==null?void 0:e())!=null?d:[])n&&a.add(h(n));let s=(c=r==null?void 0:r())!=null?c:[];for(let n of s){if(!n)continue;let l=b(n);if(!l)continue;let o=n.parentElement;for(;o&&o!==l.body;){for(let p of o.children)s.some(E=>p.contains(E))||a.add(h(p));o=o.parentElement}}return a.dispose},[i,r,e])}export{y as useInertOthers};

dist/hooks/use-is-initial-render.js

@@ -1,1 +0,1 @@
-import{useRef as r,useEffect as t}from"react";function n(){let e=r(!0);return t(()=>(e.current=!1,()=>{e.current=!0}),[]),e.current}export{n as useIsInitialRender};
+import{useEffect as r,useRef as t}from"react";function n(){let e=t(!0);return r(()=>(e.current=!1,()=>{e.current=!0}),[]),e.current}export{n as useIsInitialRender};

dist/hooks/use-is-mounted.js

@@ -1,1 +0,1 @@
-import{useRef as r}from"react";import{useIsoMorphicEffect as t}from"./use-iso-morphic-effect.js";function f(){let e=r(!1);return t(()=>(e.current=!0,()=>{e.current=!1}),[]),e}export{f as useIsMounted};
+import{useRef as r}from"react";import{useIsoMorphicEffect as t}from'./use-iso-morphic-effect.js';function f(){let e=r(!1);return t(()=>(e.current=!0,()=>{e.current=!1}),[]),e}export{f as useIsMounted};

dist/hooks/use-iso-morphic-effect.d.ts

@@ -1,2 +0,2 @@
-import { useEffect } from 'react';
-export declare const useIsoMorphicEffect: typeof useEffect;
+import { type DependencyList, type EffectCallback } from 'react';
+export declare let useIsoMorphicEffect: (effect: EffectCallback, deps?: DependencyList | undefined) => void;

dist/hooks/use-iso-morphic-effect.js

@@ -1,1 +0,1 @@
-import{useLayoutEffect as e,useEffect as f}from"react";const t=typeof window!="undefined"?e:f;export{t as useIsoMorphicEffect};
+import{useEffect as f,useLayoutEffect as c}from"react";import{env as i}from'../utils/env.js';let n=(e,t)=>{i.isServer?f(e,t):c(e,t)};export{n as useIsoMorphicEffect};

dist/hooks/use-latest-value.js

@@ -1,1 +0,1 @@
-import{useRef as t}from"react";import{useIsoMorphicEffect as o}from"./use-iso-morphic-effect.js";function s(e){let r=t(e);return o(()=>{r.current=e},[e]),r}export{s as useLatestValue};
+import{useRef as t}from"react";import{useIsoMorphicEffect as o}from'./use-iso-morphic-effect.js';function s(e){let r=t(e);return o(()=>{r.current=e},[e]),r}export{s as useLatestValue};

dist/hooks/use-outside-click.d.ts

@@ -1,10 +0,6 @@
-import { MutableRefObject } from 'react';
-declare type Container = MutableRefObject<HTMLElement | null> | HTMLElement | null;
-declare type ContainerCollection = Container[] | Set<Container>;
-declare type ContainerInput = Container | ContainerCollection;
-export declare enum Features {
-    None = 1,
-    IgnoreScrollbars = 2
-}
-export declare function useOutsideClick(containers: ContainerInput | (() => ContainerInput), cb: (event: MouseEvent | PointerEvent, target: HTMLElement) => void, features?: Features): void;
+import { type MutableRefObject } from 'react';
+type Container = MutableRefObject<HTMLElement | null> | HTMLElement | null;
+type ContainerCollection = Container[] | Set<Container>;
+type ContainerInput = Container | ContainerCollection;
+export declare function useOutsideClick(enabled: boolean, containers: ContainerInput | (() => ContainerInput), cb: (event: MouseEvent | PointerEvent | FocusEvent | TouchEvent, target: HTMLElement) => void): void;
 export {};

dist/hooks/use-outside-click.js

@@ -1,1 +0,1 @@
-import{useRef as m}from"react";import{microTask as s}from"../utils/micro-task.js";import{useLatestValue as p}from"./use-latest-value.js";import{useWindowEvent as u}from"./use-window-event.js";var C=(r=>(r[r.None=1]="None",r[r.IgnoreScrollbars=2]="IgnoreScrollbars",r))(C||{});function w(c,a,r=1){let i=m(!1),l=p(n=>{if(i.current)return;i.current=!0,s(()=>{i.current=!1});let f=function t(e){return typeof e=="function"?t(e()):Array.isArray(e)||e instanceof Set?e:[e]}(c),o=n.target;if(!!o.ownerDocument.documentElement.contains(o)){if((r&2)===2){let t=20,e=o.ownerDocument.documentElement;if(n.clientX>e.clientWidth-t||n.clientX<t||n.clientY>e.clientHeight-t||n.clientY<t)return}for(let t of f){if(t===null)continue;let e=t instanceof HTMLElement?t:t.current;if(e!=null&&e.contains(o))return}return a(n,o)}});u("pointerdown",(...n)=>l.current(...n)),u("mousedown",(...n)=>l.current(...n))}export{C as Features,w as useOutsideClick};
+import{useCallback as h,useRef as m}from"react";import{FocusableMode as M,isFocusableElement as b}from'../utils/focus-management.js';import{isMobile as y}from'../utils/platform.js';import{useDocumentEvent as c}from'./use-document-event.js';import{useIsTopLayer as L}from'./use-is-top-layer.js';import{useLatestValue as g}from'./use-latest-value.js';import{useWindowEvent as H}from'./use-window-event.js';const d=30;function F(E,p,C){let u=L(E,"outside-click"),f=g(C),s=h(function(e,o){if(e.defaultPrevented)return;let r=o(e);if(r===null||!r.getRootNode().contains(r)||!r.isConnected)return;let T=function i(n){return typeof n=="function"?i(n()):Array.isArray(n)||n instanceof Set?n:[n]}(p);for(let i of T){if(i===null)continue;let n=i instanceof HTMLElement?i:i.current;if(n!=null&&n.contains(r)||e.composed&&e.composedPath().includes(n))return}return!b(r,M.Loose)&&r.tabIndex!==-1&&e.preventDefault(),f.current(e,r)},[f]),l=m(null);c(u,"pointerdown",t=>{var e,o;l.current=((o=(e=t.composedPath)==null?void 0:e.call(t))==null?void 0:o[0])||t.target},!0),c(u,"mousedown",t=>{var e,o;l.current=((o=(e=t.composedPath)==null?void 0:e.call(t))==null?void 0:o[0])||t.target},!0),c(u,"click",t=>{y()||l.current&&(s(t,()=>l.current),l.current=null)},!0);let a=m({x:0,y:0});c(u,"touchstart",t=>{a.current.x=t.touches[0].clientX,a.current.y=t.touches[0].clientY},!0),c(u,"touchend",t=>{let e={x:t.changedTouches[0].clientX,y:t.changedTouches[0].clientY};if(!(Math.abs(e.x-a.current.x)>=d||Math.abs(e.y-a.current.y)>=d))return s(t,()=>t.target instanceof HTMLElement?t.target:null)},!0),H(u,"blur",t=>s(t,()=>window.document.activeElement instanceof HTMLIFrameElement?window.document.activeElement:null),!0)}export{F as useOutsideClick};

dist/hooks/use-owner.d.ts

@@ -1,2 +0,2 @@
-import { getOwnerDocument } from '../utils/owner';
+import { getOwnerDocument } from '../utils/owner.js';
 export declare function useOwnerDocument(...args: Parameters<typeof getOwnerDocument>): Document | null;

dist/hooks/use-owner.js

@@ -1,1 +0,1 @@
-import{useMemo as t}from"react";import{getOwnerDocument as o}from"../utils/owner.js";function n(...e){return t(()=>o(...e),[...e])}export{n as useOwnerDocument};
+import{useMemo as t}from"react";import{getOwnerDocument as o}from'../utils/owner.js';function n(...e){return t(()=>o(...e),[...e])}export{n as useOwnerDocument};

dist/hooks/use-resolve-button-type.d.ts

@@ -1,2 +0,2 @@
-import { MutableRefObject } from 'react';
+import { type MutableRefObject } from 'react';
 export declare function useResolveButtonType<TTag>(props: {
@@ -3,0 +3,0 @@ type?: string;

dist/hooks/use-resolve-button-type.js

@@ -1,1 +0,1 @@
-import{useState as o}from"react";import{useIsoMorphicEffect as r}from"./use-iso-morphic-effect.js";function i(t){var n;if(t.type)return t.type;let e=(n=t.as)!=null?n:"button";if(typeof e=="string"&&e.toLowerCase()==="button")return"button"}function s(t,e){let[n,u]=o(()=>i(t));return r(()=>{u(i(t))},[t.type,t.as]),r(()=>{n||!e.current||e.current instanceof HTMLButtonElement&&!e.current.hasAttribute("type")&&u("button")},[n,e]),n}export{s as useResolveButtonType};
+import{useState as o}from"react";import{useIsoMorphicEffect as r}from'./use-iso-morphic-effect.js';function i(t){var n;if(t.type)return t.type;let e=(n=t.as)!=null?n:"button";if(typeof e=="string"&&e.toLowerCase()==="button")return"button"}function T(t,e){let[n,u]=o(()=>i(t));return r(()=>{u(i(t))},[t.type,t.as]),r(()=>{n||e.current&&e.current instanceof HTMLButtonElement&&!e.current.hasAttribute("type")&&u("button")},[n,e]),n}export{T as useResolveButtonType};

dist/hooks/use-server-handoff-complete.js

@@ -1,1 +0,1 @@
-import{useState as o,useEffect as t}from"react";let r={serverHandoffComplete:!1};function a(){let[e,f]=o(r.serverHandoffComplete);return t(()=>{e!==!0&&f(!0)},[e]),t(()=>{r.serverHandoffComplete===!1&&(r.serverHandoffComplete=!0)},[]),e}export{a as useServerHandoffComplete};
+import*as t from"react";import{env as f}from'../utils/env.js';function s(){let r=typeof document=="undefined";return"useSyncExternalStore"in t?(o=>o.useSyncExternalStore)(t)(()=>()=>{},()=>!1,()=>!r):!1}function l(){let r=s(),[e,n]=t.useState(f.isHandoffComplete);return e&&f.isHandoffComplete===!1&&n(!1),t.useEffect(()=>{e!==!0&&n(!0)},[e]),t.useEffect(()=>f.handoff(),[]),r?!1:e}export{l as useServerHandoffComplete};

dist/hooks/use-sync-refs.js

@@ -1,1 +0,1 @@
-import{useRef as o,useEffect as i,useCallback as f}from"react";let l=Symbol();function p(n,t=!0){return Object.assign(n,{[l]:t})}function T(...n){let t=o(n);i(()=>{t.current=n},[n]);let c=f(e=>{for(let u of t.current)u!=null&&(typeof u=="function"?u(e):u.current=e)},[t]);return n.every(e=>e==null||(e==null?void 0:e[l]))?void 0:c}export{p as optionalRef,T as useSyncRefs};
+import{useEffect as l,useRef as i}from"react";import{useEvent as r}from'./use-event.js';let u=Symbol();function T(t,n=!0){return Object.assign(t,{[u]:n})}function y(...t){let n=i(t);l(()=>{n.current=t},[t]);let c=r(e=>{for(let o of n.current)o!=null&&(typeof o=="function"?o(e):o.current=e)});return t.every(e=>e==null||(e==null?void 0:e[u]))?void 0:c}export{T as optionalRef,y as useSyncRefs};

dist/hooks/use-transition.d.ts

@@ -1,5 +0,6 @@
-import { MutableRefObject } from 'react';
+import { type MutableRefObject } from 'react';
 interface TransitionArgs {
     container: MutableRefObject<HTMLElement | null>;
     classes: MutableRefObject<{
+        base: string[];
         enter: string[];
@@ -13,8 +14,2 @@ enterFrom: string[];
     }>;
-    events: MutableRefObject<{
-        beforeEnter: () => void;
-        afterEnter: () => void;
-        beforeLeave: () => void;
-        afterLeave: () => void;
-    }>;
     direction: 'enter' | 'leave' | 'idle';
@@ -24,3 +19,3 @@ onStart: MutableRefObject<(direction: TransitionArgs['direction']) => void>;
 }
-export declare function useTransition({ container, direction, classes, events, onStart, onStop, }: TransitionArgs): void;
+export declare function useTransition({ container, direction, classes, onStart, onStop }: TransitionArgs): void;
 export {};

dist/hooks/use-transition.js

@@ -1,1 +0,1 @@
-import{Reason as a,transition as g}from"../components/transitions/utils/transition.js";import{disposables as E}from"../utils/disposables.js";import{match as n}from"../utils/match.js";import{useDisposables as M}from"./use-disposables.js";import{useIsMounted as T}from"./use-is-mounted.js";import{useIsoMorphicEffect as R}from"./use-iso-morphic-effect.js";import{useLatestValue as i}from"./use-latest-value.js";function x({container:u,direction:o,classes:c,events:t,onStart:d,onStop:l}){let f=T(),m=M(),e=i(o),b=i(()=>n(e.current,{enter:()=>t.current.beforeEnter(),leave:()=>t.current.beforeLeave(),idle:()=>{}})),p=i(()=>n(e.current,{enter:()=>t.current.afterEnter(),leave:()=>t.current.afterLeave(),idle:()=>{}}));R(()=>{let r=E();m.add(r.dispose);let s=u.current;if(!!s&&e.current!=="idle"&&!!f.current)return r.dispose(),b.current(),d.current(e.current),r.add(g(s,c.current,e.current==="enter",v=>{r.dispose(),n(v,{[a.Ended](){p.current(),l.current(e.current)},[a.Cancelled]:()=>{}})})),r.dispose},[o])}export{x as useTransition};
+import{useRef as u}from"react";import{transition as f}from'../components/transition/utils/transition.js';import{useDisposables as c}from'./use-disposables.js';import{useIsMounted as m}from'./use-is-mounted.js';import{useIsoMorphicEffect as d}from'./use-iso-morphic-effect.js';function v({container:i,direction:e,classes:s,onStart:o,onStop:t}){let a=m(),r=c(),l=u(!1);d(()=>{if(e==="idle"||!a.current)return;o.current(e);let n=i.current;return n?r.add(f(n,{direction:e,classes:s.current,inFlight:l,done(){t.current(e)}})):t.current(e),r.dispose},[e])}export{v as useTransition};

dist/hooks/use-tree-walker.d.ts

@@ -1,8 +0,7 @@
-declare type AcceptNode = (node: HTMLElement) => typeof NodeFilter.FILTER_ACCEPT | typeof NodeFilter.FILTER_SKIP | typeof NodeFilter.FILTER_REJECT;
-export declare function useTreeWalker({ container, accept, walk, enabled, }: {
+type AcceptNode = (node: HTMLElement) => typeof NodeFilter.FILTER_ACCEPT | typeof NodeFilter.FILTER_SKIP | typeof NodeFilter.FILTER_REJECT;
+export declare function useTreeWalker(enabled: boolean, { container, accept, walk, }: {
     container: HTMLElement | null;
     accept: AcceptNode;
     walk(node: HTMLElement): void;
-    enabled?: boolean;
 }): void;
 export {};

dist/hooks/use-tree-walker.js

@@ -1,1 +0,1 @@
-import{useRef as E,useEffect as m}from"react";import{useIsoMorphicEffect as T}from"./use-iso-morphic-effect.js";import{getOwnerDocument as N}from"../utils/owner.js";function F({container:e,accept:t,walk:r,enabled:c=!0}){let o=E(t),l=E(r);m(()=>{o.current=t,l.current=r},[t,r]),T(()=>{if(!e||!c)return;let n=N(e);if(!n)return;let f=o.current,p=l.current,d=Object.assign(i=>f(i),{acceptNode:f}),u=n.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,d,!1);for(;u.nextNode();)p(u.currentNode)},[e,c,o,l])}export{F as useTreeWalker};
+import{useEffect as T,useRef as E}from"react";import{getOwnerDocument as d}from'../utils/owner.js';import{useIsoMorphicEffect as N}from'./use-iso-morphic-effect.js';function F(c,{container:e,accept:t,walk:r}){let o=E(t),l=E(r);T(()=>{o.current=t,l.current=r},[t,r]),N(()=>{if(!e||!c)return;let n=d(e);if(!n)return;let f=o.current,p=l.current,i=Object.assign(m=>f(m),{acceptNode:f}),u=n.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,i,!1);for(;u.nextNode();)p(u.currentNode)},[e,c,o,l])}export{F as useTreeWalker};

dist/hooks/use-window-event.d.ts

@@ -1,1 +0,1 @@
-export declare function useWindowEvent<TType extends keyof WindowEventMap>(type: TType, listener: (ev: WindowEventMap[TType]) => any, options?: boolean | AddEventListenerOptions): void;
+export declare function useWindowEvent<TType extends keyof WindowEventMap>(enabled: boolean, type: TType, listener: (ev: WindowEventMap[TType]) => any, options?: boolean | AddEventListenerOptions): void;

dist/hooks/use-window-event.js

@@ -1,1 +0,1 @@
-import{useEffect as d}from"react";import{useLatestValue as a}from"./use-latest-value.js";function s(e,r,n){let o=a(r);d(()=>{function t(i){o.current(i)}return window.addEventListener(e,t,n),()=>window.removeEventListener(e,t,n)},[e,n])}export{s as useWindowEvent};
+import{useEffect as a}from"react";import{useLatestValue as f}from'./use-latest-value.js';function s(t,e,o,n){let i=f(o);a(()=>{if(!t)return;function r(d){i.current(d)}return window.addEventListener(e,r,n),()=>window.removeEventListener(e,r,n)},[t,e,n])}export{s as useWindowEvent};

dist/index.d.ts

@@ -1,12 +0,25 @@
-export * from './components/combobox/combobox';
-export * from './components/dialog/dialog';
-export * from './components/disclosure/disclosure';
-export * from './components/focus-trap/focus-trap';
-export * from './components/listbox/listbox';
-export * from './components/menu/menu';
-export * from './components/popover/popover';
-export * from './components/portal/portal';
-export * from './components/radio-group/radio-group';
-export * from './components/switch/switch';
-export * from './components/tabs/tabs';
-export * from './components/transitions/transition';
+export * from './components/button/button.js';
+export * from './components/checkbox/checkbox.js';
+export * from './components/close-button/close-button.js';
+export * from './components/combobox/combobox.js';
+export * from './components/data-interactive/data-interactive.js';
+export { Description, type DescriptionProps } from './components/description/description.js';
+export * from './components/dialog/dialog.js';
+export * from './components/disclosure/disclosure.js';
+export * from './components/field/field.js';
+export * from './components/fieldset/fieldset.js';
+export * from './components/focus-trap/focus-trap.js';
+export * from './components/input/input.js';
+export { Label, type LabelProps } from './components/label/label.js';
+export * from './components/legend/legend.js';
+export * from './components/listbox/listbox.js';
+export * from './components/menu/menu.js';
+export * from './components/popover/popover.js';
+export { Portal } from './components/portal/portal.js';
+export * from './components/radio-group/radio-group.js';
+export * from './components/select/select.js';
+export * from './components/switch/switch.js';
+export * from './components/tabs/tabs.js';
+export * from './components/textarea/textarea.js';
+export { useClose } from './internal/close-provider.js';
+export * from './components/transition/transition.js';

dist/index.js

@@ -1,1 +0,1 @@
-export*from"./components/combobox/combobox.js";export*from"./components/dialog/dialog.js";export*from"./components/disclosure/disclosure.js";export*from"./components/focus-trap/focus-trap.js";export*from"./components/listbox/listbox.js";export*from"./components/menu/menu.js";export*from"./components/popover/popover.js";export*from"./components/portal/portal.js";export*from"./components/radio-group/radio-group.js";export*from"./components/switch/switch.js";export*from"./components/tabs/tabs.js";export*from"./components/transitions/transition.js";
+export*from'./components/button/button.js';export*from'./components/checkbox/checkbox.js';export*from'./components/close-button/close-button.js';export*from'./components/combobox/combobox.js';export*from'./components/data-interactive/data-interactive.js';import{Description as x}from'./components/description/description.js';export*from'./components/dialog/dialog.js';export*from'./components/disclosure/disclosure.js';export*from'./components/field/field.js';export*from'./components/fieldset/fieldset.js';export*from'./components/focus-trap/focus-trap.js';export*from'./components/input/input.js';import{Label as n}from'./components/label/label.js';export*from'./components/legend/legend.js';export*from'./components/listbox/listbox.js';export*from'./components/menu/menu.js';export*from'./components/popover/popover.js';import{Portal as d}from'./components/portal/portal.js';export*from'./components/radio-group/radio-group.js';export*from'./components/select/select.js';export*from'./components/switch/switch.js';export*from'./components/tabs/tabs.js';export*from'./components/textarea/textarea.js';import{useClose as w}from'./internal/close-provider.js';export*from'./components/transition/transition.js';export{x as Description,n as Label,d as Portal,w as useClose};

dist/internal/focus-sentinel.d.ts

@@ -1,6 +0,6 @@
-/// <reference types="react" />
+import React from 'react';
 interface FocusSentinelProps {
     onFocus(): boolean;
 }
-export declare function FocusSentinel({ onFocus }: FocusSentinelProps): JSX.Element | null;
+export declare function FocusSentinel({ onFocus }: FocusSentinelProps): React.JSX.Element | null;
 export {};

dist/internal/focus-sentinel.js

@@ -1,1 +0,1 @@
-import i,{useState as s}from"react";import{VisuallyHidden as c}from"./visually-hidden.js";function F({onFocus:n}){let[o,r]=s(!0);return o?i.createElement(c,{as:"button",type:"button",onFocus:a=>{a.preventDefault();let e,u=50;function t(){if(u--<=0){e&&cancelAnimationFrame(e);return}if(n()){r(!1),cancelAnimationFrame(e);return}e=requestAnimationFrame(t)}e=requestAnimationFrame(t)}}):null}export{F as FocusSentinel};
+import s,{useState as c}from"react";import{useIsMounted as m}from'../hooks/use-is-mounted.js';import{Hidden as f,HiddenFeatures as l}from'./hidden.js';function b({onFocus:n}){let[r,o]=c(!0),u=m();return r?s.createElement(f,{as:"button",type:"button",features:l.Focusable,onFocus:a=>{a.preventDefault();let e,i=50;function t(){if(i--<=0){e&&cancelAnimationFrame(e);return}if(n()){if(cancelAnimationFrame(e),!u.current)return;o(!1);return}e=requestAnimationFrame(t)}e=requestAnimationFrame(t)}}):null}export{b as FocusSentinel};

dist/internal/open-closed.d.ts

@@ -1,5 +0,7 @@
-import { ReactNode, ReactElement } from 'react';
+import { type ReactElement, type ReactNode } from 'react';
 export declare enum State {
-    Open = 0,
-    Closed = 1
+    Open = 1,
+    Closed = 2,
+    Closing = 4,
+    Opening = 8
 }
@@ -6,0 +8,0 @@ export declare function useOpenClosed(): State | null;

dist/internal/open-closed.js

@@ -1,1 +0,1 @@
-import r,{createContext as l,useContext as d}from"react";let o=l(null);o.displayName="OpenClosedContext";var p=(e=>(e[e.Open=0]="Open",e[e.Closed=1]="Closed",e))(p||{});function s(){return d(o)}function C({value:t,children:n}){return r.createElement(o.Provider,{value:t},n)}export{C as OpenClosedProvider,p as State,s as useOpenClosed};
+import t,{createContext as l,useContext as p}from"react";let n=l(null);n.displayName="OpenClosedContext";var d=(e=>(e[e.Open=1]="Open",e[e.Closed=2]="Closed",e[e.Closing=4]="Closing",e[e.Opening=8]="Opening",e))(d||{});function u(){return p(n)}function s({value:o,children:r}){return t.createElement(n.Provider,{value:o},r)}export{s as OpenClosedProvider,d as State,u as useOpenClosed};

dist/internal/portal-force-root.d.ts

@@ -1,2 +0,2 @@
-import { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 export declare function usePortalRoot(): boolean;
@@ -7,3 +7,3 @@ interface ForcePortalRootProps {
 }
-export declare function ForcePortalRoot(props: ForcePortalRootProps): JSX.Element;
+export declare function ForcePortalRoot(props: ForcePortalRootProps): React.JSX.Element;
 export {};

dist/internal/portal-force-root.js

@@ -1,1 +0,1 @@
-import t,{createContext as r,useContext as c}from"react";let e=r(!1);function l(){return c(e)}function P(o){return t.createElement(e.Provider,{value:o.force},o.children)}export{P as ForcePortalRoot,l as usePortalRoot};
+import t,{createContext as r,useContext as c}from"react";let e=r(!1);function a(){return c(e)}function l(o){return t.createElement(e.Provider,{value:o.force},o.children)}export{l as ForcePortalRoot,a as usePortalRoot};

dist/types.d.ts

@@ -1,11 +0,12 @@
-import { ReactNode, ReactElement } from 'react';
+import type { JSXElementConstructor, ReactElement, ReactNode } from 'react';
+export type ReactTag = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
 declare let __: "1D45E01E-AF44-47C4-988A-19A94EBAF55C";
-export declare type __ = typeof __;
-export declare type Expand<T> = T extends infer O ? {
+export type __ = typeof __;
+export type Expand<T> = T extends infer O ? {
     [K in keyof O]: O[K];
 } : never;
-export declare type PropsOf<TTag = any> = TTag extends React.ElementType ? React.ComponentProps<TTag> : never;
-declare type PropsWeControl = 'as' | 'children' | 'refName' | 'className';
-declare type CleanProps<TTag, TOmitableProps extends keyof any = __> = TOmitableProps extends __ ? Omit<PropsOf<TTag>, PropsWeControl> : Omit<PropsOf<TTag>, TOmitableProps | PropsWeControl>;
-declare type OurProps<TTag, TSlot = any> = {
+export type PropsOf<TTag extends ReactTag> = TTag extends React.ElementType ? Omit<React.ComponentProps<TTag>, 'ref'> : never;
+type PropsWeControl = 'as' | 'children' | 'refName' | 'className';
+type CleanProps<TTag extends ReactTag, TOmittableProps extends PropertyKey = never> = Omit<PropsOf<TTag>, TOmittableProps | PropsWeControl>;
+type OurProps<TTag extends ReactTag, TSlot> = {
     as?: TTag;
@@ -15,12 +16,12 @@ children?: ReactNode | ((bag: TSlot) => ReactElement);
 };
-declare type ClassNameOverride<TTag, TSlot = any> = PropsOf<TTag> extends {
-    className?: any;
-} ? {
-    className?: string | ((bag: TSlot) => string);
+type HasProperty<T extends object, K extends PropertyKey> = T extends never ? never : K extends keyof T ? true : never;
+type ClassNameOverride<TTag extends ReactTag, TSlot = {}> = true extends HasProperty<PropsOf<TTag>, 'className'> ? {
+    className?: PropsOf<TTag>['className'] | ((bag: TSlot) => string);
 } : {};
-export declare type Props<TTag, TSlot = any, TOmitableProps extends keyof any = __> = CleanProps<TTag, TOmitableProps> & OurProps<TTag, TSlot> & ClassNameOverride<TTag, TSlot>;
-declare type Without<T, U> = {
+export type Props<TTag extends ReactTag, TSlot = {}, TOmittableProps extends PropertyKey = never, Overrides = {}> = CleanProps<TTag, TOmittableProps | keyof Overrides> & OurProps<TTag, TSlot> & ClassNameOverride<TTag, TSlot> & Overrides;
+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 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 type EnsureArray<T> = T extends any[] ? T : Expand<T>[];
 export {};

dist/types.js

@@ -1,1 +0,1 @@
-let o="1D45E01E-AF44-47C4-988A-19A94EBAF55C";
+let e="1D45E01E-AF44-47C4-988A-19A94EBAF55C";

dist/utils/calculate-active-index.d.ts

@@ -23,4 +23,4 @@ export declare enum Focus {
     resolveActiveIndex(): number | null;
-    resolveId(item: TItem): string;
-    resolveDisabled(item: TItem): boolean;
+    resolveId(item: TItem, index: number, items: TItem[]): string;
+    resolveDisabled(item: TItem, index: number, items: TItem[]): boolean;
 }): number | null;

dist/utils/calculate-active-index.js

@@ -1,1 +0,1 @@
-function f(r){throw new Error("Unexpected object: "+r)}var a=(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",e))(a||{});function x(r,n){let t=n.resolveItems();if(t.length<=0)return null;let l=n.resolveActiveIndex(),s=l!=null?l:-1,d=(()=>{switch(r.focus){case 0:return t.findIndex(e=>!n.resolveDisabled(e));case 1:{let e=t.slice().reverse().findIndex((i,c,u)=>s!==-1&&u.length-c-1>=s?!1:!n.resolveDisabled(i));return e===-1?e:t.length-1-e}case 2:return t.findIndex((e,i)=>i<=s?!1:!n.resolveDisabled(e));case 3:{let e=t.slice().reverse().findIndex(i=>!n.resolveDisabled(i));return e===-1?e:t.length-1-e}case 4:return t.findIndex(e=>n.resolveId(e)===r.id);case 5:return null;default:f(r)}})();return d===-1?l:d}export{a as Focus,x as calculateActiveIndex};
+function u(l){throw new Error("Unexpected object: "+l)}var c=(i=>(i[i.First=0]="First",i[i.Previous=1]="Previous",i[i.Next=2]="Next",i[i.Last=3]="Last",i[i.Specific=4]="Specific",i[i.Nothing=5]="Nothing",i))(c||{});function f(l,n){let t=n.resolveItems();if(t.length<=0)return null;let r=n.resolveActiveIndex(),s=r!=null?r:-1;switch(l.focus){case 0:{for(let e=0;e<t.length;++e)if(!n.resolveDisabled(t[e],e,t))return e;return r}case 1:{s===-1&&(s=t.length);for(let e=s-1;e>=0;--e)if(!n.resolveDisabled(t[e],e,t))return e;return r}case 2:{for(let e=s+1;e<t.length;++e)if(!n.resolveDisabled(t[e],e,t))return e;return r}case 3:{for(let e=t.length-1;e>=0;--e)if(!n.resolveDisabled(t[e],e,t))return e;return r}case 4:{for(let e=0;e<t.length;++e)if(n.resolveId(t[e],e,t)===l.id)return e;return r}case 5:return null;default:u(l)}}export{c as Focus,f as calculateActiveIndex};

dist/utils/class-names.js

@@ -1,1 +0,1 @@
-function e(...n){return n.filter(Boolean).join(" ")}export{e as classNames};
+function t(...r){return Array.from(new Set(r.flatMap(n=>typeof n=="string"?n.split(" "):[]))).filter(Boolean).join(" ")}export{t as classNames};

dist/utils/disposables.d.ts

@@ -0,10 +1,24 @@
+export type Disposables = ReturnType<typeof disposables>;
+/**
+ * Disposables are a way to manage event handlers and functions like
+ * `setTimeout` and `requestAnimationFrame` that need to be cleaned up when they
+ * are no longer needed.
+ *
+ *
+ * When you register a disposable function, it is added to a collection of
+ * disposables. Each disposable in the collection provides a `dispose` clean up
+ * function that can be called when it's no longer needed. There is also a
+ * `dispose` function on the collection itself that can be used to clean up all
+ * pending disposables in that collection.
+ */
 export declare function disposables(): {
-    enqueue(fn: Function): void;
-    addEventListener<TEventName extends keyof WindowEventMap>(element: HTMLElement, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions | undefined): () => void;
+    addEventListener<TEventName extends keyof WindowEventMap>(element: HTMLElement | Window | Document, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions): () => void;
     requestAnimationFrame(callback: FrameRequestCallback): () => void;
     nextFrame(callback: FrameRequestCallback): () => void;
     setTimeout(callback: (...args: any[]) => void, ms?: number | undefined, ...args: any[]): () => void;
+    microTask(cb: () => void): () => void;
+    style(node: HTMLElement, property: string, value: string): () => void;
+    group(cb: (d: typeof this) => void): () => void;
     add(cb: () => void): () => void;
     dispose(): void;
-    workQueue(): Promise<void>;
 };

dist/utils/disposables.js

@@ -1,1 +0,1 @@
-function o(){let a=[],i=[],n={enqueue(e){i.push(e)},addEventListener(e,t,r,s){return e.addEventListener(t,r,s),n.add(()=>e.removeEventListener(t,r,s))},requestAnimationFrame(...e){let t=requestAnimationFrame(...e);return n.add(()=>cancelAnimationFrame(t))},nextFrame(...e){return n.requestAnimationFrame(()=>n.requestAnimationFrame(...e))},setTimeout(...e){let t=setTimeout(...e);return n.add(()=>clearTimeout(t))},add(e){return a.push(e),()=>{let t=a.indexOf(e);if(t>=0){let[r]=a.splice(t,1);r()}}},dispose(){for(let e of a.splice(0))e()},async workQueue(){for(let e of i.splice(0))await e()}};return n}export{o as disposables};
+import{microTask as i}from'./micro-task.js';function o(){let n=[],r={addEventListener(e,t,s,a){return e.addEventListener(t,s,a),r.add(()=>e.removeEventListener(t,s,a))},requestAnimationFrame(...e){let t=requestAnimationFrame(...e);return r.add(()=>cancelAnimationFrame(t))},nextFrame(...e){return r.requestAnimationFrame(()=>r.requestAnimationFrame(...e))},setTimeout(...e){let t=setTimeout(...e);return r.add(()=>clearTimeout(t))},microTask(...e){let t={current:!0};return i(()=>{t.current&&e[0]()}),r.add(()=>{t.current=!1})},style(e,t,s){let a=e.style.getPropertyValue(t);return Object.assign(e.style,{[t]:s}),this.add(()=>{Object.assign(e.style,{[t]:a})})},group(e){let t=o();return e(t),this.add(()=>t.dispose())},add(e){return n.includes(e)||n.push(e),()=>{let t=n.indexOf(e);if(t>=0)for(let s of n.splice(t,1))s()}},dispose(){for(let e of n.splice(0))e()}};return r}export{o as disposables};

dist/utils/focus-management.d.ts

@@ -0,1 +1,2 @@
+import type { MutableRefObject } from 'react';
 export declare enum Focus {
@@ -13,3 +14,5 @@ /** Focus the first non-disabled element */
     /** Prevent scrolling the focusable elements into view */
-    NoScroll = 32
+    NoScroll = 32,
+    /** Focus the first focusable element with the `data-autofocus` attribute. */
+    AutoFocus = 64
 }
@@ -27,2 +30,3 @@ export declare enum FocusResult {
 export declare function getFocusableElements(container?: HTMLElement | null): HTMLElement[];
+export declare function getAutoFocusableElements(container?: HTMLElement | null): HTMLElement[];
 export declare enum FocusableMode {
@@ -35,4 +39,10 @@ /** The element itself must be focusable. */
 export declare function isFocusableElement(element: HTMLElement, mode?: FocusableMode): boolean;
+export declare function restoreFocusIfNecessary(element: HTMLElement | null): void;
 export declare function focusElement(element: HTMLElement | null): void;
 export declare function sortByDomNode<T>(nodes: T[], resolveKey?: (item: T) => HTMLElement | null): T[];
-export declare function focusIn(container: HTMLElement | HTMLElement[], focus: Focus): FocusResult;
+export declare function focusFrom(current: HTMLElement | null, focus: Focus): FocusResult;
+export declare function focusIn(container: HTMLElement | HTMLElement[], focus: Focus, { sorted, relativeTo, skipElements, }?: Partial<{
+    sorted: boolean;
+    relativeTo: HTMLElement | null;
+    skipElements: (HTMLElement | MutableRefObject<HTMLElement | null>)[];
+}>): FocusResult;

dist/utils/focus-management.js

@@ -1,1 +0,1 @@
-import{match as m}from"./match.js";import{getOwnerDocument as x}from"./owner.js";let f=["[contentEditable=true]","[tabindex]","a[href]","area[href]","button:not([disabled])","iframe","input:not([disabled])","select:not([disabled])","textarea:not([disabled])"].map(e=>`${e}:not([tabindex='-1'])`).join(",");var E=(n=>(n[n.First=1]="First",n[n.Previous=2]="Previous",n[n.Next=4]="Next",n[n.Last=8]="Last",n[n.WrapAround=16]="WrapAround",n[n.NoScroll=32]="NoScroll",n))(E||{}),p=(o=>(o[o.Error=0]="Error",o[o.Overflow=1]="Overflow",o[o.Success=2]="Success",o[o.Underflow=3]="Underflow",o))(p||{}),L=(t=>(t[t.Previous=-1]="Previous",t[t.Next=1]="Next",t))(L||{});function N(e=document.body){return e==null?[]:Array.from(e.querySelectorAll(f))}var T=(t=>(t[t.Strict=0]="Strict",t[t.Loose=1]="Loose",t))(T||{});function O(e,r=0){var t;return e===((t=x(e))==null?void 0:t.body)?!1:m(r,{[0](){return e.matches(f)},[1](){let l=e;for(;l!==null;){if(l.matches(f))return!0;l=l.parentElement}return!1}})}function S(e){e==null||e.focus({preventScroll:!0})}let b=["textarea","input"].join(",");function M(e){var r,t;return(t=(r=e==null?void 0:e.matches)==null?void 0:r.call(e,b))!=null?t:!1}function h(e,r=t=>t){return e.slice().sort((t,l)=>{let o=r(t),a=r(l);if(o===null||a===null)return 0;let n=o.compareDocumentPosition(a);return n&Node.DOCUMENT_POSITION_FOLLOWING?-1:n&Node.DOCUMENT_POSITION_PRECEDING?1:0})}function F(e,r){let t=Array.isArray(e)?e.length>0?e[0].ownerDocument:document:e.ownerDocument,l=Array.isArray(e)?h(e):N(e),o=t.activeElement,a=(()=>{if(r&5)return 1;if(r&10)return-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),n=(()=>{if(r&1)return 0;if(r&2)return Math.max(0,l.indexOf(o))-1;if(r&4)return Math.max(0,l.indexOf(o))+1;if(r&8)return l.length-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),d=r&32?{preventScroll:!0}:{},c=0,i=l.length,u;do{if(c>=i||c+i<=0)return 0;let s=n+c;if(r&16)s=(s+i)%i;else{if(s<0)return 3;if(s>=i)return 1}u=l[s],u==null||u.focus(d),c+=a}while(u!==t.activeElement);return r&6&&M(u)&&u.select(),u.hasAttribute("tabindex")||u.setAttribute("tabindex","0"),2}export{E as Focus,p as FocusResult,T as FocusableMode,S as focusElement,F as focusIn,N as getFocusableElements,O as isFocusableElement,h as sortByDomNode};
+import{disposables as N}from'./disposables.js';import{match as L}from'./match.js';import{getOwnerDocument as E}from'./owner.js';let f=["[contentEditable=true]","[tabindex]","a[href]","area[href]","button:not([disabled])","iframe","input:not([disabled])","select:not([disabled])","textarea:not([disabled])"].map(e=>`${e}:not([tabindex='-1'])`).join(","),p=["[data-autofocus]"].map(e=>`${e}:not([tabindex='-1'])`).join(",");var F=(n=>(n[n.First=1]="First",n[n.Previous=2]="Previous",n[n.Next=4]="Next",n[n.Last=8]="Last",n[n.WrapAround=16]="WrapAround",n[n.NoScroll=32]="NoScroll",n[n.AutoFocus=64]="AutoFocus",n))(F||{}),T=(o=>(o[o.Error=0]="Error",o[o.Overflow=1]="Overflow",o[o.Success=2]="Success",o[o.Underflow=3]="Underflow",o))(T||{}),y=(t=>(t[t.Previous=-1]="Previous",t[t.Next=1]="Next",t))(y||{});function b(e=document.body){return e==null?[]:Array.from(e.querySelectorAll(f)).sort((r,t)=>Math.sign((r.tabIndex||Number.MAX_SAFE_INTEGER)-(t.tabIndex||Number.MAX_SAFE_INTEGER)))}function S(e=document.body){return e==null?[]:Array.from(e.querySelectorAll(p)).sort((r,t)=>Math.sign((r.tabIndex||Number.MAX_SAFE_INTEGER)-(t.tabIndex||Number.MAX_SAFE_INTEGER)))}var h=(t=>(t[t.Strict=0]="Strict",t[t.Loose=1]="Loose",t))(h||{});function A(e,r=0){var t;return e===((t=E(e))==null?void 0:t.body)?!1:L(r,{[0](){return e.matches(f)},[1](){let u=e;for(;u!==null;){if(u.matches(f))return!0;u=u.parentElement}return!1}})}function G(e){let r=E(e);N().nextFrame(()=>{r&&!A(r.activeElement,0)&&I(e)})}var H=(t=>(t[t.Keyboard=0]="Keyboard",t[t.Mouse=1]="Mouse",t))(H||{});typeof window!="undefined"&&typeof document!="undefined"&&(document.addEventListener("keydown",e=>{e.metaKey||e.altKey||e.ctrlKey||(document.documentElement.dataset.headlessuiFocusVisible="")},!0),document.addEventListener("click",e=>{e.detail===1?delete document.documentElement.dataset.headlessuiFocusVisible:e.detail===0&&(document.documentElement.dataset.headlessuiFocusVisible="")},!0));function I(e){e==null||e.focus({preventScroll:!0})}let w=["textarea","input"].join(",");function O(e){var r,t;return(t=(r=e==null?void 0:e.matches)==null?void 0:r.call(e,w))!=null?t:!1}function _(e,r=t=>t){return e.slice().sort((t,u)=>{let o=r(t),c=r(u);if(o===null||c===null)return 0;let l=o.compareDocumentPosition(c);return l&Node.DOCUMENT_POSITION_FOLLOWING?-1:l&Node.DOCUMENT_POSITION_PRECEDING?1:0})}function j(e,r){return P(b(),r,{relativeTo:e})}function P(e,r,{sorted:t=!0,relativeTo:u=null,skipElements:o=[]}={}){let c=Array.isArray(e)?e.length>0?e[0].ownerDocument:document:e.ownerDocument,l=Array.isArray(e)?t?_(e):e:r&64?S(e):b(e);o.length>0&&l.length>1&&(l=l.filter(s=>!o.some(a=>a!=null&&"current"in a?(a==null?void 0:a.current)===s:a===s))),u=u!=null?u:c.activeElement;let n=(()=>{if(r&5)return 1;if(r&10)return-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),x=(()=>{if(r&1)return 0;if(r&2)return Math.max(0,l.indexOf(u))-1;if(r&4)return Math.max(0,l.indexOf(u))+1;if(r&8)return l.length-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),M=r&32?{preventScroll:!0}:{},m=0,d=l.length,i;do{if(m>=d||m+d<=0)return 0;let s=x+m;if(r&16)s=(s+d)%d;else{if(s<0)return 3;if(s>=d)return 1}i=l[s],i==null||i.focus(M),m+=n}while(i!==c.activeElement);return r&6&&O(i)&&i.select(),2}export{F as Focus,T as FocusResult,h as FocusableMode,I as focusElement,j as focusFrom,P as focusIn,S as getAutoFocusableElements,b as getFocusableElements,A as isFocusableElement,G as restoreFocusIfNecessary,_ as sortByDomNode};

dist/utils/form.d.ts

@@ -1,4 +0,4 @@
-declare type Entries = [string, string][];
+type Entries = [string, string][];
 export declare function objectToFormEntries(source?: Record<string, any>, parentKey?: string | null, entries?: Entries): Entries;
-export declare function attemptSubmit(element: HTMLElement): void;
+export declare function attemptSubmit(elementInForm: HTMLElement): void;
 export {};

dist/utils/form.js

@@ -1,1 +0,1 @@
-function e(n={},r=null,t=[]){for(let[i,o]of Object.entries(n))f(t,s(r,i),o);return t}function s(n,r){return n?n+"["+r+"]":r}function f(n,r,t){if(Array.isArray(t))for(let[i,o]of t.entries())f(n,s(r,i.toString()),o);else t instanceof Date?n.push([r,t.toISOString()]):typeof t=="boolean"?n.push([r,t?"1":"0"]):typeof t=="string"?n.push([r,t]):typeof t=="number"?n.push([r,`${t}`]):t==null?n.push([r,""]):e(t,r,n)}function p(n){var t;let r=(t=n==null?void 0:n.form)!=null?t:n.closest("form");if(!!r){for(let i of r.elements)if(i.tagName==="INPUT"&&i.type==="submit"||i.tagName==="BUTTON"&&i.type==="submit"||i.nodeName==="INPUT"&&i.type==="image"){i.click();return}}}export{p as attemptSubmit,e as objectToFormEntries};
+function e(i={},s=null,t=[]){for(let[r,n]of Object.entries(i))o(t,f(s,r),n);return t}function f(i,s){return i?i+"["+s+"]":s}function o(i,s,t){if(Array.isArray(t))for(let[r,n]of t.entries())o(i,f(s,r.toString()),n);else t instanceof Date?i.push([s,t.toISOString()]):typeof t=="boolean"?i.push([s,t?"1":"0"]):typeof t=="string"?i.push([s,t]):typeof t=="number"?i.push([s,`${t}`]):t==null?i.push([s,""]):e(t,s,i)}function p(i){var t,r;let s=(t=i==null?void 0:i.form)!=null?t:i.closest("form");if(s){for(let n of s.elements)if(n!==i&&(n.tagName==="INPUT"&&n.type==="submit"||n.tagName==="BUTTON"&&n.type==="submit"||n.nodeName==="INPUT"&&n.type==="image")){n.click();return}(r=s.requestSubmit)==null||r.call(s)}}export{p as attemptSubmit,e as objectToFormEntries};

dist/utils/owner.d.ts

@@ -1,2 +0,2 @@
-import { MutableRefObject } from 'react';
+import type { MutableRefObject } from 'react';
 export declare function getOwnerDocument<T extends Element | MutableRefObject<Element | null>>(element: T | null | undefined): Document | null;

dist/utils/owner.js

@@ -1,1 +0,1 @@
-function t(n){return typeof window=="undefined"?null:n instanceof Node?n.ownerDocument:n!=null&&n.hasOwnProperty("current")&&n.current instanceof Node?n.current.ownerDocument:document}export{t as getOwnerDocument};
+import{env as n}from'./env.js';function u(r){return n.isServer?null:r instanceof Node?r.ownerDocument:r!=null&&r.hasOwnProperty("current")&&r.current instanceof Node?r.current.ownerDocument:document}export{u as getOwnerDocument};

dist/utils/render.d.ts

@@ -1,4 +0,4 @@
-import { ElementType, ReactElement } from 'react';
-import { Props, XOR, __, Expand } from '../types';
-export declare enum Features {
+import { type ElementType, type ReactElement, type Ref } from 'react';
+import type { Expand, Props, XOR, __ } from '../types.js';
+export declare enum RenderFeatures {
     /** No features at all */
@@ -24,12 +24,14 @@ None = 0,
 }
-declare type PropsForFeature<TPassedInFeatures extends Features, TForFeature extends Features, TProps> = {
+type PropsForFeature<TPassedInFeatures extends RenderFeatures, TForFeature extends RenderFeatures, TProps> = {
     [P in TPassedInFeatures]: P extends TForFeature ? TProps : __;
 }[TPassedInFeatures];
-export declare type PropsForFeatures<T extends Features> = XOR<PropsForFeature<T, Features.Static, {
+export type PropsForFeatures<T extends RenderFeatures> = XOR<PropsForFeature<T, RenderFeatures.Static, {
     static?: boolean;
-}>, PropsForFeature<T, Features.RenderStrategy, {
+}>, PropsForFeature<T, RenderFeatures.RenderStrategy, {
     unmount?: boolean;
 }>>;
-export declare function render<TFeature extends Features, TTag extends ElementType, TSlot>({ ourProps, theirProps, slot, defaultTag, features, visible, name, }: {
-    ourProps: Expand<Props<TTag, TSlot, any> & PropsForFeatures<TFeature>>;
+export declare function render<TFeature extends RenderFeatures, TTag extends ElementType, TSlot>({ ourProps, theirProps, slot, defaultTag, features, visible, name, mergeRefs, }: {
+    ourProps: Expand<Props<TTag, TSlot, any> & PropsForFeatures<TFeature>> & {
+        ref?: Ref<HTMLElement | ElementType>;
+    };
     theirProps: Expand<Props<TTag, TSlot, any>>;
@@ -41,4 +43,26 @@ slot?: TSlot;
     name: string;
+    mergeRefs?: ReturnType<typeof useMergeRefsFn>;
 }): ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 /**
+ * This is a singleton hook. **You can ONLY call the returned
+ * function *once* to produce expected results.** If you need
+ * to call `mergeRefs()` multiple times you need to create a
+ * separate function for each invocation. This happens as we
+ * store the list of `refs` to update and always return the
+ * same function that refers to that list of refs.
+ *
+ * You shouldn't normally read refs during render but this
+ * should actually be okay because React itself is calling
+ * the `function` that updates these refs and can only do
+ * so once the ref that contains the list is updated.
+ */
+export declare function useMergeRefsFn(): (...refs: any[]) => ((value: any) => void) | undefined;
+export type HasDisplayName = {
+    displayName: string;
+};
+export type RefProp<T extends Function> = T extends (props: any, ref: Ref<infer RefType>) => any ? {
+    ref?: Ref<RefType>;
+} : never;
+export declare function mergeProps<T extends Props<any, any>[]>(...listOfProps: T): Props<any, any>;
+/**
  * This is a hack, but basically we want to keep the full 'API' of the component, but we do want to
@@ -45,0 +69,0 @@ * wrap it in a forwardRef so that we _can_ passthrough the ref

dist/utils/render.js

@@ -1,4 +0,4 @@
-import{Fragment as c,cloneElement as T,createElement as g,forwardRef as F,isValidElement as h}from"react";import{match as P}from"./match.js";var b=(n=>(n[n.None=0]="None",n[n.RenderStrategy=1]="RenderStrategy",n[n.Static=2]="Static",n))(b||{}),x=(e=>(e[e.Unmount=0]="Unmount",e[e.Hidden=1]="Hidden",e))(x||{});function A({ourProps:r,theirProps:t,slot:e,defaultTag:n,features:o,visible:a=!0,name:l}){let s=m(t,r);if(a)return p(s,e,n,l);let u=o!=null?o:0;if(u&2){let{static:i=!1,...d}=s;if(i)return p(d,e,n,l)}if(u&1){let{unmount:i=!0,...d}=s;return P(i?0:1,{[0](){return null},[1](){return p({...d,hidden:!0,style:{display:"none"}},e,n,l)}})}return p(s,e,n,l)}function p(r,t={},e,n){let{as:o=e,children:a,refName:l="ref",...s}=f(r,["unmount","static"]),u=r.ref!==void 0?{[l]:r.ref}:{},i=typeof a=="function"?a(t):a;if(s.className&&typeof s.className=="function"&&(s.className=s.className(t)),o===c&&Object.keys(y(s)).length>0){if(!h(i)||Array.isArray(i)&&i.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${n} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(s).map(d=>`  - ${d}`).join(`
+import{Fragment as R,cloneElement as x,createElement as E,forwardRef as j,isValidElement as S,useCallback as v,useRef as w}from"react";import{classNames as P}from'./class-names.js';import{match as k}from'./match.js';var O=(a=>(a[a.None=0]="None",a[a.RenderStrategy=1]="RenderStrategy",a[a.Static=2]="Static",a))(O||{}),M=(e=>(e[e.Unmount=0]="Unmount",e[e.Hidden=1]="Hidden",e))(M||{});function H({ourProps:r,theirProps:n,slot:e,defaultTag:a,features:s,visible:t=!0,name:l,mergeRefs:i}){i=i!=null?i:A;let o=N(n,r);if(t)return b(o,e,a,l,i);let y=s!=null?s:0;if(y&2){let{static:f=!1,...u}=o;if(f)return b(u,e,a,l,i)}if(y&1){let{unmount:f=!0,...u}=o;return k(f?0:1,{[0](){return null},[1](){return b({...u,hidden:!0,style:{display:"none"}},e,a,l,i)}})}return b(o,e,a,l,i)}function b(r,n={},e,a,s){let{as:t=e,children:l,refName:i="ref",...o}=h(r,["unmount","static"]),y=r.ref!==void 0?{[i]:r.ref}:{},f=typeof l=="function"?l(n):l;"className"in o&&o.className&&typeof o.className=="function"&&(o.className=o.className(n)),o["aria-labelledby"]&&o["aria-labelledby"]===o.id&&(o["aria-labelledby"]=void 0);let u={};if(n){let d=!1,p=[];for(let[c,T]of Object.entries(n))typeof T=="boolean"&&(d=!0),T===!0&&p.push(c.replace(/([A-Z])/g,g=>`-${g.toLowerCase()}`));if(d){u["data-headlessui-state"]=p.join(" ");for(let c of p)u[`data-${c}`]=""}}if(t===R&&(Object.keys(m(o)).length>0||Object.keys(m(u)).length>0))if(!S(f)||Array.isArray(f)&&f.length>1){if(Object.keys(m(o)).length>0)throw new Error(['Passing props on "Fragment"!',"",`The current component <${a} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(m(o)).concat(Object.keys(m(u))).map(d=>`  - ${d}`).join(`
 `),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(d=>`  - ${d}`).join(`
 `)].join(`
-`));return T(i,Object.assign({},m(i.props,y(f(s,["ref"]))),u))}return g(o,Object.assign({},f(s,["ref"]),o!==c&&u),i)}function m(...r){var n;if(r.length===0)return{};if(r.length===1)return r[0];let t={},e={};for(let o of r)for(let a in o)a.startsWith("on")&&typeof o[a]=="function"?((n=e[a])!=null||(e[a]=[]),e[a].push(o[a])):t[a]=o[a];if(t.disabled||t["aria-disabled"])return Object.assign(t,Object.fromEntries(Object.keys(e).map(o=>[o,void 0])));for(let o in e)Object.assign(t,{[o](a){let l=e[o];for(let s of l){if(a.defaultPrevented)return;s(a)}}});return t}function H(r){var t;return Object.assign(F(r),{displayName:(t=r.displayName)!=null?t:r.name})}function y(r){let t=Object.assign({},r);for(let e in t)t[e]===void 0&&delete t[e];return t}function f(r,t=[]){let e=Object.assign({},r);for(let n of t)n in e&&delete e[n];return e}export{b as Features,x as RenderStrategy,y as compact,H as forwardRefWithAs,A as render};
+`))}else{let d=f.props,p=d==null?void 0:d.className,c=typeof p=="function"?(...F)=>P(p(...F),o.className):P(p,o.className),T=c?{className:c}:{},g=N(f.props,m(h(o,["ref"])));for(let F in u)F in g&&delete u[F];return x(f,Object.assign({},g,u,y,{ref:s(f.ref,y.ref)},T))}return E(t,Object.assign({},h(o,["ref"]),t!==R&&y,t!==R&&u),f)}function U(){let r=w([]),n=v(e=>{for(let a of r.current)a!=null&&(typeof a=="function"?a(e):a.current=e)},[]);return(...e)=>{if(!e.every(a=>a==null))return r.current=e,n}}function A(...r){return r.every(n=>n==null)?void 0:n=>{for(let e of r)e!=null&&(typeof e=="function"?e(n):e.current=n)}}function N(...r){var a;if(r.length===0)return{};if(r.length===1)return r[0];let n={},e={};for(let s of r)for(let t in s)t.startsWith("on")&&typeof s[t]=="function"?((a=e[t])!=null||(e[t]=[]),e[t].push(s[t])):n[t]=s[t];if(n.disabled||n["aria-disabled"])for(let s in e)/^(on(?:Click|Pointer|Mouse|Key)(?:Down|Up|Press)?)$/.test(s)&&(e[s]=[t=>{var l;return(l=t==null?void 0:t.preventDefault)==null?void 0:l.call(t)}]);for(let s in e)Object.assign(n,{[s](t,...l){let i=e[s];for(let o of i){if((t instanceof Event||(t==null?void 0:t.nativeEvent)instanceof Event)&&t.defaultPrevented)return;o(t,...l)}}});return n}function D(...r){var a;if(r.length===0)return{};if(r.length===1)return r[0];let n={},e={};for(let s of r)for(let t in s)t.startsWith("on")&&typeof s[t]=="function"?((a=e[t])!=null||(e[t]=[]),e[t].push(s[t])):n[t]=s[t];for(let s in e)Object.assign(n,{[s](...t){let l=e[s];for(let i of l)i==null||i(...t)}});return n}function I(r){var n;return Object.assign(j(r),{displayName:(n=r.displayName)!=null?n:r.name})}function m(r){let n=Object.assign({},r);for(let e in n)n[e]===void 0&&delete n[e];return n}function h(r,n=[]){let e=Object.assign({},r);for(let a of n)a in e&&delete e[a];return e}export{O as RenderFeatures,M as RenderStrategy,m as compact,I as forwardRefWithAs,D as mergeProps,H as render,U as useMergeRefsFn};

package.json

 {
   "name": "@headlessui/react",
-  "version": "0.0.0-insiders.1e14d51",
+  "version": "0.0.0-insiders.1e9a3f1",
   "description": "A set of completely unstyled, fully accessible UI components for React, designed to integrate beautifully with Tailwind CSS.",
@@ -14,5 +14,8 @@ "main": "dist/index.cjs",
   "exports": {
+    "types": {
+      "import": "./dist/index.d.ts",
+      "require": "./dist/index.d.cts"
+    },
     "import": "./dist/headlessui.esm.js",
-    "require": "./dist/index.cjs",
-    "types": "./dist/index.d.ts"
+    "require": "./dist/index.cjs"
   },
@@ -38,18 +41,24 @@ "type": "module",
     "lint": "../../scripts/lint.sh",
-    "playground": "yarn workspace playground-react dev",
+    "lint-types": "npm run attw -P --workspaces --if-present",
+    "playground": "npm run dev --workspace=playground-react",
     "clean": "rimraf ./dist"
   },
   "peerDependencies": {
-    "react": "^16 || ^17 || ^18",
-    "react-dom": "^16 || ^17 || ^18"
+    "react": "^18",
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "@testing-library/react": "^13.0.0",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
-    "esbuild": "^0.11.18",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "snapshot-diff": "^0.8.1"
+    "@testing-library/react": "^15.0.7",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "snapshot-diff": "^0.10.0"
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.26.16",
+    "@tanstack/react-virtual": "3.5.0",
+    "@react-aria/focus": "^3.17.1",
+    "@react-aria/interactions": "^3.21.3"
   }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

905975

increased by120.12%

Dev dependency count

6

decreased by-14.29%

Number of package files

299

increased by164.6%

Lines of code

16319

increased by139.53%

Worsened metrics

Dependency count

6

increased by200%

Number of low supply chain risk alerts

4

increased by300%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@floating-ui/react@^0.26.16

• + Added@react-aria/focus@^3.17.1

• + Added@react-aria/interactions@^3.21.3

• + Added@tanstack/react-virtual@3.5.0

• + Added@floating-ui/core@1.6.3(transitive)

• + Added@floating-ui/dom@1.6.6(transitive)

• + Added@floating-ui/react@0.26.18(transitive)

• + Added@floating-ui/react-dom@2.1.1(transitive)

• + Added@floating-ui/utils@0.2.3(transitive)

• + Added@react-aria/focus@3.17.1(transitive)

• + Added@react-aria/interactions@3.21.3(transitive)

• + Added@react-aria/ssr@3.9.4(transitive)

• + Added@react-aria/utils@3.24.1(transitive)

• + Added@react-stately/utils@3.10.1(transitive)

• + Added@react-types/shared@3.23.1(transitive)

• + Added@swc/helpers@0.5.11(transitive)

• + Added@tanstack/react-virtual@3.5.0(transitive)

• + Added@tanstack/virtual-core@3.5.0(transitive)

• + Addedclsx@2.1.1(transitive)

• + Addedtabbable@6.2.0(transitive)

• + Addedtslib@2.6.3(transitive)