@headlessui/react - npm Package Compare versions

Comparing version 0.0.0-insiders.0a9276d to 0.0.0-insiders.0bd8c47

dist/components/combobox/combobox.d.ts

@@ -1,8 +0,11 @@
-import React, { ElementType, Ref } from 'react';
-import { ByComparator, EnsureArray, Expand, Props } from '../../types.js';
-import { PropsForFeatures, HasDisplayName, RefProp } from '../../utils/render.js';
+import React, { type ElementType, type Ref } from 'react';
+import { type ByComparator } from '../../hooks/use-by-comparator.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;
 }>;
-interface ComboboxRenderPropArg<TValue, TActive = TValue> {
+type ComboboxRenderPropArg<TValue, TActive = TValue> = {
     open: boolean;
@@ -13,125 +16,116 @@ disabled: boolean;
     value: TValue;
-}
-type O = 'value' | 'defaultValue' | 'nullable' | 'multiple' | 'onChange' | 'by';
-type ComboboxValueProps<TValue, TNullable extends boolean | undefined, TMultiple extends boolean | undefined, TTag extends ElementType> = Extract<({
-    value?: EnsureArray<TValue>;
-    defaultValue?: EnsureArray<TValue>;
-    nullable: true;
-    multiple: true;
-    onChange?(value: EnsureArray<TValue>): void;
-    by?: ByComparator<TValue>;
-} & Props<TTag, ComboboxRenderPropArg<EnsureArray<TValue>, TValue>, O>) | ({
-    value?: TValue | null;
-    defaultValue?: TValue | null;
-    nullable: true;
-    multiple?: false;
-    onChange?(value: TValue | null): void;
-    by?: ByComparator<TValue | null>;
-} & Expand<Props<TTag, ComboboxRenderPropArg<TValue | null>, O>>) | ({
-    value?: EnsureArray<TValue>;
-    defaultValue?: EnsureArray<TValue>;
-    nullable?: false;
-    multiple: true;
-    onChange?(value: EnsureArray<TValue>): void;
-    by?: ByComparator<TValue extends Array<infer U> ? U : TValue>;
-} & Expand<Props<TTag, ComboboxRenderPropArg<EnsureArray<TValue>, TValue>, O>>) | ({
-    value?: TValue;
-    nullable?: false;
-    multiple?: false;
-    defaultValue?: TValue;
-    onChange?(value: TValue): void;
-    by?: ByComparator<TValue>;
-} & Props<TTag, ComboboxRenderPropArg<TValue>, O>), {
-    nullable?: TNullable;
+};
+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;
-}>;
-export type ComboboxProps<TValue, TNullable extends boolean | undefined, TMultiple extends boolean | undefined, TTag extends ElementType> = ComboboxValueProps<TValue, TNullable, TMultiple, TTag> & {
     disabled?: boolean;
-    __demoMode?: boolean;
     form?: string;
     name?: string;
-};
-declare function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, true, true, TTag>, ref: Ref<HTMLElement>): JSX.Element;
-declare function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, true, false, TTag>, ref: Ref<HTMLElement>): JSX.Element;
-declare function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, false, false, TTag>, ref: Ref<HTMLElement>): JSX.Element;
-declare function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, false, true, TTag>, ref: Ref<HTMLElement>): JSX.Element;
+    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";
-interface InputRenderPropArg {
+type InputRenderPropArg = {
     open: boolean;
     disabled: boolean;
-}
+    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, TType> = Props<TTag, InputRenderPropArg, InputPropsWeControl, {
+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";
-interface ButtonRenderPropArg {
+type ButtonRenderPropArg = {
     open: boolean;
+    active: boolean;
     disabled: boolean;
     value: any;
-}
+    focus: boolean;
+    hover: boolean;
+};
 type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded' | 'aria-haspopup' | 'aria-labelledby' | 'disabled' | 'tabIndex';
-export type ComboboxButtonProps<TTag extends ElementType> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl>;
+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_LABEL_TAG: "label";
-interface LabelRenderPropArg {
+declare let DEFAULT_OPTIONS_TAG: "div";
+type OptionsRenderPropArg = {
     open: boolean;
-    disabled: boolean;
-}
-export type ComboboxLabelProps<TTag extends ElementType> = Props<TTag, LabelRenderPropArg>;
-declare function LabelFn<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: ComboboxLabelProps<TTag>, ref: Ref<HTMLLabelElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
-declare let DEFAULT_OPTIONS_TAG: "ul";
-interface OptionsRenderPropArg {
-    open: boolean;
-}
+    option: unknown;
+};
 type OptionsPropsWeControl = 'aria-labelledby' | 'aria-multiselectable' | 'role' | 'tabIndex';
 declare let OptionsRenderFeatures: number;
-export type ComboboxOptionsProps<TTag extends ElementType> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl, PropsForFeatures<typeof OptionsRenderFeatures> & {
+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;
 }>;
-declare function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ComboboxOptionsProps<TTag>, ref: Ref<HTMLUListElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
-declare let DEFAULT_OPTION_TAG: "li";
-interface OptionRenderPropArg {
+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, TType> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, {
+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<HTMLLIElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
-interface ComponentCombobox extends HasDisplayName {
-    <TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, true, true, TTag> & RefProp<typeof ComboboxFn>): JSX.Element;
-    <TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, true, false, TTag> & RefProp<typeof ComboboxFn>): JSX.Element;
-    <TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, false, true, TTag> & RefProp<typeof ComboboxFn>): JSX.Element;
-    <TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, false, false, TTag> & RefProp<typeof ComboboxFn>): JSX.Element;
+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;
 }
-interface ComponentComboboxButton extends HasDisplayName {
+export interface _internal_ComponentComboboxButton extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ComboboxButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element;
 }
-interface ComponentComboboxInput extends HasDisplayName {
+export interface _internal_ComponentComboboxInput extends HasDisplayName {
     <TType, TTag extends ElementType = typeof DEFAULT_INPUT_TAG>(props: ComboboxInputProps<TTag, TType> & RefProp<typeof InputFn>): JSX.Element;
 }
-interface ComponentComboboxLabel extends HasDisplayName {
-    <TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: ComboboxLabelProps<TTag> & RefProp<typeof LabelFn>): JSX.Element;
+export interface _internal_ComponentComboboxLabel extends _internal_ComponentLabel {
 }
-interface ComponentComboboxOptions extends HasDisplayName {
+export interface _internal_ComponentComboboxOptions extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ComboboxOptionsProps<TTag> & RefProp<typeof OptionsFn>): JSX.Element;
 }
-interface ComponentComboboxOption extends HasDisplayName {
+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: ComponentCombobox;
-export declare let Combobox: ComponentCombobox & {
-    Input: ComponentComboboxInput;
-    Button: ComponentComboboxButton;
-    Label: ComponentComboboxLabel;
-    Options: ComponentComboboxOptions;
-    Option: ComponentComboboxOption;
+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 & {
+    Input: _internal_ComponentComboboxInput;
+    Button: _internal_ComponentComboboxButton;
+    /** @deprecated use `<Label>` instead of `<Combobox.Label>` */
+    Label: _internal_ComponentComboboxLabel;
+    Options: _internal_ComponentComboboxOptions;
+    Option: _internal_ComponentComboboxOption;
 };
 export {};

dist/components/combobox/combobox.js

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

dist/components/description/description.d.ts

@@ -1,4 +0,4 @@
-import React, { ElementType, ReactNode, Ref } from 'react';
-import { Props } from '../../types.js';
-import { HasDisplayName, RefProp } from '../../utils/render.js';
+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 {
@@ -9,4 +9,6 @@ slot?: {};
 }
+export declare function useDescribedBy(): string | undefined;
 interface DescriptionProviderProps extends SharedData {
     children: ReactNode;
+    value?: string | undefined;
 }
@@ -19,7 +21,7 @@ export declare function useDescriptions(): [
 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<HTMLParagraphElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
-export interface ComponentDescription extends HasDisplayName {
+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: ComponentDescription;
+export declare let Description: _internal_ComponentDescription;
 export {};

dist/components/description/description.js

@@ -1,1 +0,1 @@
-import u,{createContext as m,useContext as D,useMemo as l,useState as T}from"react";import{useId as P}from'../../hooks/use-id.js';import{forwardRefWithAs as g,render as E}from'../../utils/render.js';import{useIsoMorphicEffect as x}from'../../hooks/use-iso-morphic-effect.js';import{useSyncRefs as R}from'../../hooks/use-sync-refs.js';import{useEvent as I}from'../../hooks/use-event.js';let d=m(null);function f(){let r=D(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,f),t}return r}function M(){let[r,t]=T([]);return[r.length>0?r.join(" "):void 0,l(()=>function(e){let i=I(s=>(t(o=>[...o,s]),()=>t(o=>{let p=o.slice(),c=p.indexOf(s);return c!==-1&&p.splice(c,1),p}))),n=l(()=>({register:i,slot:e.slot,name:e.name,props:e.props}),[i,e.slot,e.name,e.props]);return u.createElement(d.Provider,{value:n},e.children)},[t])]}let S="p";function h(r,t){let a=P(),{id:e=`headlessui-description-${a}`,...i}=r,n=f(),s=R(t);x(()=>n.register(e),[e,n.register]);let o={ref:s,...n.props,id:e};return E({ourProps:o,theirProps:i,slot:n.slot||{},defaultTag:S,name:n.name||"Description"})}let y=g(h),b=Object.assign(y,{});export{b 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,68 +0,77 @@
-import React, { ElementType, MutableRefObject, Ref } from 'react';
-import { Props } from '../../types.js';
-import { PropsForFeatures, HasDisplayName, RefProp } from '../../utils/render.js';
-import { ComponentDescription } from '../description/description.js';
+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";
-interface DialogRenderPropArg {
+type DialogRenderPropArg = {
     open: boolean;
-}
-type DialogPropsWeControl = 'role' | 'aria-describedby' | 'aria-labelledby' | 'aria-modal';
+};
+type DialogPropsWeControl = 'aria-describedby' | 'aria-labelledby' | 'aria-modal';
 declare let DialogRenderFeatures: number;
-export type DialogProps<TTag extends ElementType> = Props<TTag, DialogRenderPropArg, DialogPropsWeControl, PropsForFeatures<typeof DialogRenderFeatures> & {
+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<HTMLDivElement>): JSX.Element;
+declare function DialogFn<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(props: DialogProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element;
 declare let DEFAULT_OVERLAY_TAG: "div";
-interface OverlayRenderPropArg {
+type OverlayRenderPropArg = {
     open: boolean;
-}
+};
 type OverlayPropsWeControl = 'aria-hidden';
-export type DialogOverlayProps<TTag extends ElementType> = Props<TTag, OverlayRenderPropArg, OverlayPropsWeControl>;
-declare function OverlayFn<TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(props: DialogOverlayProps<TTag>, ref: Ref<HTMLDivElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export type DialogOverlayProps<TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG> = Props<TTag, OverlayRenderPropArg, OverlayPropsWeControl>;
+declare function OverlayFn<TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(props: DialogOverlayProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 declare let DEFAULT_BACKDROP_TAG: "div";
-interface BackdropRenderPropArg {
+type BackdropRenderPropArg = {
     open: boolean;
-}
+};
 type BackdropPropsWeControl = 'aria-hidden';
-export type DialogBackdropProps<TTag extends ElementType> = Props<TTag, BackdropRenderPropArg, BackdropPropsWeControl>;
-declare function BackdropFn<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(props: DialogBackdropProps<TTag>, ref: Ref<HTMLDivElement>): JSX.Element;
+export type DialogBackdropProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = Props<TTag, BackdropRenderPropArg, BackdropPropsWeControl>;
+declare function BackdropFn<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(props: DialogBackdropProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element;
 declare let DEFAULT_PANEL_TAG: "div";
-interface PanelRenderPropArg {
+type PanelRenderPropArg = {
     open: boolean;
-}
-export type DialogPanelProps<TTag extends ElementType> = Props<TTag, PanelRenderPropArg>;
-declare function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DialogPanelProps<TTag>, ref: Ref<HTMLDivElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+};
+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";
-interface TitleRenderPropArg {
+type TitleRenderPropArg = {
     open: boolean;
-}
-export type DialogTitleProps<TTag extends ElementType> = Props<TTag, TitleRenderPropArg>;
-declare function TitleFn<TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(props: DialogTitleProps<TTag>, ref: Ref<HTMLHeadingElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
-interface ComponentDialog extends HasDisplayName {
+};
+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;
 }
-interface ComponentDialogBackdrop extends HasDisplayName {
+export interface _internal_ComponentDialogBackdrop extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(props: DialogBackdropProps<TTag> & RefProp<typeof BackdropFn>): JSX.Element;
 }
-interface ComponentDialogPanel extends HasDisplayName {
+export interface _internal_ComponentDialogPanel extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DialogPanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element;
 }
-interface ComponentDialogOverlay extends HasDisplayName {
+export interface _internal_ComponentDialogOverlay extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(props: DialogOverlayProps<TTag> & RefProp<typeof OverlayFn>): JSX.Element;
 }
-interface ComponentDialogTitle extends HasDisplayName {
+export interface _internal_ComponentDialogTitle extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(props: DialogTitleProps<TTag> & RefProp<typeof TitleFn>): JSX.Element;
 }
-interface ComponentDialogDescription extends ComponentDescription {
+export interface _internal_ComponentDialogDescription extends _internal_ComponentDescription {
 }
-export declare let Dialog: ComponentDialog & {
-    Backdrop: ComponentDialogBackdrop;
-    Panel: ComponentDialogPanel;
-    Overlay: ComponentDialogOverlay;
-    Title: ComponentDialogTitle;
-    Description: ComponentDialogDescription;
+export declare let DialogBackdrop: _internal_ComponentDialogBackdrop;
+export declare let DialogPanel: _internal_ComponentDialogPanel;
+export declare let DialogOverlay: _internal_ComponentDialogOverlay;
+export declare let DialogTitle: _internal_ComponentDialogTitle;
+/** @deprecated use `<Description>` instead of `<DialogDescription>` */
+export declare let DialogDescription: _internal_ComponentDialogDescription;
+export declare let Dialog: _internal_ComponentDialog & {
+    Backdrop: _internal_ComponentDialogBackdrop;
+    Panel: _internal_ComponentDialogPanel;
+    Overlay: _internal_ComponentDialogOverlay;
+    Title: _internal_ComponentDialogTitle;
+    /** @deprecated use `<Description>` instead of `<Dialog.Description>` */
+    Description: _internal_ComponentDialogDescription;
 };
 export {};

dist/components/dialog/dialog.js

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

dist/components/disclosure/disclosure.d.ts

@@ -1,45 +0,55 @@
-import React, { ElementType, MutableRefObject, Ref } from 'react';
-import { Props } from '../../types.js';
-import { PropsForFeatures, HasDisplayName, RefProp } from '../../utils/render.js';
+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';
 declare let DEFAULT_DISCLOSURE_TAG: React.ExoticComponent<{
     children?: React.ReactNode;
 }>;
-interface DisclosureRenderPropArg {
+type DisclosureRenderPropArg = {
     open: boolean;
     close(focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null>): void;
-}
-export type DisclosureProps<TTag extends ElementType> = Props<TTag, DisclosureRenderPropArg> & {
+};
+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>): JSX.Element;
+}>;
+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";
-interface ButtonRenderPropArg {
+type ButtonRenderPropArg = {
     open: boolean;
-}
+    hover: boolean;
+    active: boolean;
+    disabled: boolean;
+    focus: boolean;
+    autofocus: boolean;
+};
 type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded';
-export type DisclosureButtonProps<TTag extends ElementType> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, {
+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";
-interface PanelRenderPropArg {
+type PanelRenderPropArg = {
     open: boolean;
     close: (focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null>) => void;
-}
+};
+type DisclosurePanelPropsWeControl = never;
 declare let PanelRenderFeatures: number;
-export type DisclosurePanelProps<TTag extends ElementType> = Props<TTag, PanelRenderPropArg> & PropsForFeatures<typeof PanelRenderFeatures>;
-declare function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DisclosurePanelProps<TTag>, ref: Ref<HTMLDivElement>): JSX.Element;
-interface ComponentDisclosure extends HasDisplayName {
+export type DisclosurePanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, DisclosurePanelPropsWeControl, 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;
 }
-interface ComponentDisclosureButton extends HasDisplayName {
+export interface _internal_ComponentDisclosureButton extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: DisclosureButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element;
 }
-interface ComponentDisclosurePanel extends HasDisplayName {
+export interface _internal_ComponentDisclosurePanel extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DisclosurePanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element;
 }
-export declare let Disclosure: ComponentDisclosure & {
-    Button: ComponentDisclosureButton;
-    Panel: ComponentDisclosurePanel;
+export declare let DisclosureButton: _internal_ComponentDisclosureButton;
+export declare let DisclosurePanel: _internal_ComponentDisclosurePanel;
+export declare let Disclosure: _internal_ComponentDisclosure & {
+    Button: _internal_ComponentDisclosureButton;
+    Panel: _internal_ComponentDisclosurePanel;
 };
 export {};

dist/components/disclosure/disclosure.js

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

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

@@ -1,7 +0,7 @@
-import { ElementType, MutableRefObject, Ref } from 'react';
-import { Props } from '../../types.js';
-import { HasDisplayName, RefProp } from '../../utils/render.js';
+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";
-declare enum Features {
+export declare enum FocusTrapFeatures {
     /** No features enabled for the focus trap. */
@@ -17,17 +17,22 @@ None = 1,
     RestoreFocus = 16,
+    /** Initial focus should look for the `data-autofocus` */
+    AutoFocus = 32,
     /** Enable all features. */
     All = 30
 }
-export type FocusTrapProps<TTag extends ElementType> = Props<TTag> & {
+type FocusTrapRenderPropArg = {};
+type FocusTrapPropsWeControl = never;
+export type FocusTrapProps<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG> = Props<TTag, FocusTrapRenderPropArg, FocusTrapPropsWeControl, {
     initialFocus?: MutableRefObject<HTMLElement | null>;
-    features?: Features;
+    initialFocusFallback?: MutableRefObject<HTMLElement | null>;
+    features?: FocusTrapFeatures;
     containers?: Containers;
-};
-declare function FocusTrapFn<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(props: FocusTrapProps<TTag>, ref: Ref<HTMLDivElement>): JSX.Element;
-interface ComponentFocusTrap extends HasDisplayName {
+}>;
+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: ComponentFocusTrap & {
-    features: typeof Features;
+export declare let FocusTrap: _internal_ComponentFocusTrap & {
+    features: typeof FocusTrapFeatures;
 };
 export {};

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

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

dist/components/label/label.d.ts

@@ -1,22 +0,36 @@
-import React, { ElementType, ReactNode, Ref } from 'react';
-import { Props } from '../../types.js';
-import { HasDisplayName, RefProp } from '../../utils/render.js';
+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 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 ComponentLabel extends HasDisplayName {
+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: ComponentLabel;
+export declare let Label: _internal_ComponentLabel;
 export {};

dist/components/label/label.js

@@ -1,1 +0,1 @@
-import c,{createContext as m,useContext as L,useMemo as f,useState as b}from"react";import{useId as T}from'../../hooks/use-id.js';import{forwardRefWithAs as E,render as g}from'../../utils/render.js';import{useIsoMorphicEffect as x}from'../../hooks/use-iso-morphic-effect.js';import{useSyncRefs as P}from'../../hooks/use-sync-refs.js';import{useEvent as y}from'../../hooks/use-event.js';let d=m(null);function u(){let o=L(d);if(o===null){let t=new Error("You used a <Label /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(t,u),t}return o}function H(){let[o,t]=b([]);return[o.length>0?o.join(" "):void 0,f(()=>function(e){let s=y(r=>(t(l=>[...l,r]),()=>t(l=>{let n=l.slice(),p=n.indexOf(r);return p!==-1&&n.splice(p,1),n}))),a=f(()=>({register:s,slot:e.slot,name:e.name,props:e.props}),[s,e.slot,e.name,e.props]);return c.createElement(d.Provider,{value:a},e.children)},[t])]}let A="label";function h(o,t){let i=T(),{id:e=`headlessui-label-${i}`,passive:s=!1,...a}=o,r=u(),l=P(t);x(()=>r.register(e),[e,r.register]);let n={ref:l,...r.props,id:e};return s&&("onClick"in n&&(delete n.htmlFor,delete n.onClick),"onClick"in a&&delete a.onClick),g({ourProps:n,theirProps:a,slot:r.slot||{},defaultTag:A,name:r.name||"Label"})}let v=E(h),M=Object.assign(v,{});export{M as Label,H 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,18 +0,23 @@
-import React, { ElementType, Ref } from 'react';
-import { Props } from '../../types.js';
-import { PropsForFeatures, HasDisplayName, RefProp } from '../../utils/render.js';
+import React, { type ElementType, type Ref } from 'react';
+import { type ByComparator } from '../../hooks/use-by-comparator.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;
 }>;
-interface ListboxRenderPropArg<T> {
+type ListboxRenderPropArg<T> = {
     open: boolean;
     disabled: boolean;
+    invalid: boolean;
     value: T;
-}
-export type ListboxProps<TTag extends ElementType, TType, TActualType> = Props<TTag, ListboxRenderPropArg<TType>, 'value' | 'defaultValue' | 'onChange' | 'by' | 'disabled' | 'horizontal' | 'name' | 'multiple'> & {
+};
+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?: (keyof TActualType & string) | ((a: TActualType, z: TActualType) => boolean);
+    by?: ByComparator<TActualType>;
     disabled?: boolean;
+    invalid?: boolean;
     horizontal?: boolean;
@@ -22,36 +27,45 @@ form?: string;
     multiple?: 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>): JSX.Element;
+    __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";
-interface ButtonRenderPropArg {
+type ButtonRenderPropArg = {
+    disabled: boolean;
+    invalid: boolean;
+    hover: boolean;
+    focus: boolean;
+    autofocus: boolean;
     open: boolean;
-    disabled: boolean;
+    active: boolean;
     value: any;
-}
+};
 type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded' | 'aria-haspopup' | 'aria-labelledby' | 'disabled';
-export type ListboxButtonProps<TTag extends ElementType> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl>;
+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_LABEL_TAG: "label";
-interface LabelRenderPropArg {
+declare let DEFAULT_OPTIONS_TAG: "div";
+type OptionsRenderPropArg = {
     open: boolean;
-    disabled: boolean;
-}
-export type ListboxLabelProps<TTag extends ElementType> = Props<TTag, LabelRenderPropArg>;
-declare function LabelFn<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: ListboxLabelProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
-declare let DEFAULT_OPTIONS_TAG: "ul";
-interface OptionsRenderPropArg {
-    open: boolean;
-}
+};
 type OptionsPropsWeControl = 'aria-activedescendant' | 'aria-labelledby' | 'aria-multiselectable' | 'aria-orientation' | 'role' | 'tabIndex';
 declare let OptionsRenderFeatures: number;
-export type ListboxOptionsProps<TTag extends ElementType> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl> & PropsForFeatures<typeof OptionsRenderFeatures>;
-declare function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ListboxOptionsProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
-declare let DEFAULT_OPTION_TAG: "li";
-interface OptionRenderPropArg {
+export type ListboxOptionsProps<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl, {
+    anchor?: AnchorPropsWithSelection;
+    portal?: boolean;
+    modal?: 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, TType> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, {
+export type ListboxOptionProps<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, {
     disabled?: boolean;
@@ -61,24 +75,43 @@ 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;
-interface ComponentListbox extends HasDisplayName {
+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;
 }
-interface ComponentListboxButton extends HasDisplayName {
+export interface _internal_ComponentListboxButton extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ListboxButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element;
 }
-interface ComponentListboxLabel extends HasDisplayName {
-    <TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: ListboxLabelProps<TTag> & RefProp<typeof LabelFn>): JSX.Element;
+export interface _internal_ComponentListboxLabel extends _internal_ComponentLabel {
 }
-interface ComponentListboxOptions extends HasDisplayName {
+export interface _internal_ComponentListboxOptions extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ListboxOptionsProps<TTag> & RefProp<typeof OptionsFn>): JSX.Element;
 }
-interface ComponentListboxOption extends HasDisplayName {
+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;
 }
-declare let ListboxRoot: ComponentListbox;
-export declare let Listbox: ComponentListbox & {
-    Button: ComponentListboxButton;
-    Label: ComponentListboxLabel;
-    Options: ComponentListboxOptions;
-    Option: ComponentListboxOption;
+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 & {
+    Button: _internal_ComponentListboxButton;
+    /** @deprecated use `<Label>` instead of `<Listbox.Label>` */
+    Label: _internal_ComponentListboxLabel;
+    Options: _internal_ComponentListboxOptions;
+    Option: _internal_ComponentListboxOption;
 };
 export {};

dist/components/listbox/listbox.js

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

dist/components/menu/menu.d.ts

@@ -1,62 +0,110 @@
-import React, { ElementType, Ref } from 'react';
-import { Props } from '../../types.js';
-import { PropsForFeatures, HasDisplayName, RefProp } from '../../utils/render.js';
+import React, { type ElementType, type Ref } from 'react';
+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;
 }>;
-interface MenuRenderPropArg {
+type MenuRenderPropArg = {
     open: boolean;
     close: () => void;
-}
-export type MenuProps<TTag extends ElementType> = Props<TTag, MenuRenderPropArg, never, {
+};
+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>): JSX.Element;
+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";
-interface ButtonRenderPropArg {
+type ButtonRenderPropArg = {
     open: boolean;
-}
+    active: boolean;
+    hover: boolean;
+    focus: boolean;
+    disabled: boolean;
+    autofocus: boolean;
+};
 type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded' | 'aria-haspopup';
-export type MenuButtonProps<TTag extends ElementType> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, {
+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";
-interface ItemsRenderPropArg {
+type ItemsRenderPropArg = {
     open: boolean;
-}
+};
 type ItemsPropsWeControl = 'aria-activedescendant' | 'aria-labelledby' | 'role' | 'tabIndex';
-declare let ItemsRenderFeatures: number;
-export type MenuItemsProps<TTag extends ElementType> = Props<TTag, ItemsRenderPropArg, ItemsPropsWeControl> & PropsForFeatures<typeof ItemsRenderFeatures>;
-declare function ItemsFn<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(props: MenuItemsProps<TTag>, ref: Ref<HTMLDivElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export type MenuItemsProps<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG> = Props<TTag, ItemsRenderPropArg, ItemsPropsWeControl, {
+    anchor?: AnchorProps;
+    portal?: boolean;
+    modal?: 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;
 }>;
-interface ItemRenderPropArg {
+type ItemRenderPropArg = {
+    /** @deprecated use `focus` instead */
     active: boolean;
+    focus: boolean;
     disabled: boolean;
     close: () => void;
-}
-type ItemPropsWeControl = 'aria-disabled' | 'role' | 'tabIndex';
-export type MenuItemProps<TTag extends ElementType> = Props<TTag, ItemRenderPropArg, ItemPropsWeControl> & {
+};
+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.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
-interface ComponentMenu extends HasDisplayName {
+}>;
+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;
 }
-interface ComponentMenuButton extends HasDisplayName {
+export interface _internal_ComponentMenuButton extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: MenuButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element;
 }
-interface ComponentMenuItems extends HasDisplayName {
+export interface _internal_ComponentMenuItems extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(props: MenuItemsProps<TTag> & RefProp<typeof ItemsFn>): JSX.Element;
 }
-interface ComponentMenuItem extends HasDisplayName {
+export interface _internal_ComponentMenuItem extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(props: MenuItemProps<TTag> & RefProp<typeof ItemFn>): JSX.Element;
 }
-export declare let Menu: ComponentMenu & {
-    Button: ComponentMenuButton;
-    Items: ComponentMenuItems;
-    Item: ComponentMenuItem;
+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 & {
+    Button: _internal_ComponentMenuButton;
+    Items: _internal_ComponentMenuItems;
+    Item: _internal_ComponentMenuItem;
+    Section: _internal_ComponentMenuSection;
+    Heading: _internal_ComponentMenuHeading;
+    Separator: _internal_ComponentMenuSeparator;
 };
 export {};

dist/components/menu/menu.js

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

dist/components/popover/popover.d.ts

@@ -1,68 +0,84 @@
-import React, { ElementType, MutableRefObject, Ref, MouseEventHandler } from 'react';
-import { Props } from '../../types.js';
-import { PropsForFeatures, HasDisplayName, RefProp } from '../../utils/render.js';
+import React, { type ElementType, type MouseEventHandler, type MutableRefObject, type Ref } from 'react';
+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";
-interface PopoverRenderPropArg {
+type PopoverRenderPropArg = {
     open: boolean;
     close(focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null> | MouseEvent<HTMLElement>): void;
-}
-export type PopoverProps<TTag extends ElementType> = Props<TTag, PopoverRenderPropArg, never, {
+};
+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>): JSX.Element;
+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";
-interface ButtonRenderPropArg {
+type ButtonRenderPropArg = {
     open: boolean;
-}
+    active: boolean;
+    hover: boolean;
+    focus: boolean;
+    disabled: boolean;
+    autofocus: boolean;
+};
 type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded';
-export type PopoverButtonProps<TTag extends ElementType> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, {
+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>): JSX.Element;
+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";
-interface OverlayRenderPropArg {
+type OverlayRenderPropArg = {
     open: boolean;
-}
+};
 type OverlayPropsWeControl = 'aria-hidden';
 declare let OverlayRenderFeatures: number;
-export type PopoverOverlayProps<TTag extends ElementType> = Props<TTag, OverlayRenderPropArg, OverlayPropsWeControl> & PropsForFeatures<typeof OverlayRenderFeatures>;
-declare function OverlayFn<TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(props: PopoverOverlayProps<TTag>, ref: Ref<HTMLDivElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export type PopoverOverlayProps<TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG> = Props<TTag, OverlayRenderPropArg, OverlayPropsWeControl, 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";
-interface PanelRenderPropArg {
+type PanelRenderPropArg = {
     open: boolean;
     close: (focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null>) => void;
-}
-declare let PanelRenderFeatures: number;
+};
 type PanelPropsWeControl = 'tabIndex';
-export type PopoverPanelProps<TTag extends ElementType> = Props<TTag, PanelRenderPropArg, PanelPropsWeControl, PropsForFeatures<typeof PanelRenderFeatures> & {
+export type PopoverPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, PanelPropsWeControl, {
     focus?: boolean;
+    anchor?: AnchorProps;
+    portal?: boolean;
+    modal?: boolean;
+    static?: boolean;
+    unmount?: boolean;
 }>;
-declare function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: PopoverPanelProps<TTag>, ref: Ref<HTMLDivElement>): JSX.Element;
+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";
-interface GroupRenderPropArg {
-}
-export type PopoverGroupProps<TTag extends ElementType> = Props<TTag, GroupRenderPropArg>;
-declare function GroupFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: PopoverGroupProps<TTag>, ref: Ref<HTMLElement>): JSX.Element;
-interface ComponentPopover extends HasDisplayName {
+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;
 }
-interface ComponentPopoverButton extends HasDisplayName {
+export interface _internal_ComponentPopoverButton extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: PopoverButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element;
 }
-interface ComponentPopoverOverlay extends HasDisplayName {
+export interface _internal_ComponentPopoverOverlay extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(props: PopoverOverlayProps<TTag> & RefProp<typeof OverlayFn>): JSX.Element;
 }
-interface ComponentPopoverPanel extends HasDisplayName {
+export interface _internal_ComponentPopoverPanel extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: PopoverPanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element;
 }
-interface ComponentPopoverGroup extends HasDisplayName {
+export interface _internal_ComponentPopoverGroup extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: PopoverGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element;
 }
-export declare let Popover: ComponentPopover & {
-    Button: ComponentPopoverButton;
-    Overlay: ComponentPopoverOverlay;
-    Panel: ComponentPopoverPanel;
-    Group: ComponentPopoverGroup;
+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 & {
+    Button: _internal_ComponentPopoverButton;
+    Overlay: _internal_ComponentPopoverOverlay;
+    Panel: _internal_ComponentPopoverPanel;
+    Group: _internal_ComponentPopoverGroup;
 };
 export {};

dist/components/popover/popover.js

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

dist/components/portal/portal.d.ts

@@ -1,32 +0,35 @@
-import React, { ElementType, MutableRefObject, Ref } from 'react';
-import { Props } from '../../types.js';
-import { RefProp, HasDisplayName } from '../../utils/render.js';
+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;
 }>;
-interface PortalRenderPropArg {
-}
-export type PortalProps<TTag extends ElementType> = Props<TTag, PortalRenderPropArg>;
-declare function PortalFn<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG>(props: PortalProps<TTag>, ref: Ref<HTMLElement>): React.ReactPortal | null;
+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;
 }>;
-interface GroupRenderPropArg {
-}
-export type PortalGroupProps<TTag extends ElementType> = Props<TTag, GroupRenderPropArg> & {
+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>): JSX.Element;
+}>;
+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;
-}) => JSX.Element];
-interface ComponentPortal extends HasDisplayName {
+}) => 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 ComponentPortalGroup extends HasDisplayName {
+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: ComponentPortal & {
-    Group: ComponentPortalGroup;
+export declare let PortalGroup: _internal_ComponentPortalGroup;
+export declare let Portal: _internal_ComponentPortal & {
+    Group: _internal_ComponentPortalGroup;
 };
 export {};

dist/components/portal/portal.js

@@ -1,1 +0,1 @@
-import T,{Fragment as P,createContext as m,useContext as s,useEffect as d,useRef as g,useState as R,useMemo as E}from"react";import{createPortal as H}from"react-dom";import{forwardRefWithAs as c,render as y}from'../../utils/render.js';import{useIsoMorphicEffect as x}from'../../hooks/use-iso-morphic-effect.js';import{usePortalRoot as b}from'../../internal/portal-force-root.js';import{useServerHandoffComplete as h}from'../../hooks/use-server-handoff-complete.js';import{optionalRef as O,useSyncRefs as L}from'../../hooks/use-sync-refs.js';import{useOnUnmount as _}from'../../hooks/use-on-unmount.js';import{useOwnerDocument as A}from'../../hooks/use-owner.js';import{env as G}from'../../utils/env.js';import{useEvent as M}from'../../hooks/use-event.js';function F(p){let l=b(),n=s(v),e=A(p),[a,o]=R(()=>{if(!l&&n!==null||G.isServer)return null;let t=e==null?void 0:e.getElementById("headlessui-portal-root");if(t)return t;if(e===null)return null;let r=e.createElement("div");return r.setAttribute("id","headlessui-portal-root"),e.body.appendChild(r)});return d(()=>{a!==null&&(e!=null&&e.body.contains(a)||e==null||e.body.appendChild(a))},[a,e]),d(()=>{l||n!==null&&o(n.current)},[n,o,l]),a}let U=P;function N(p,l){let n=p,e=g(null),a=L(O(u=>{e.current=u}),l),o=A(e),t=F(e),[r]=R(()=>{var u;return G.isServer?null:(u=o==null?void 0:o.createElement("div"))!=null?u:null}),i=s(f),C=h();return x(()=>{!t||!r||t.contains(r)||(r.setAttribute("data-headlessui-portal",""),t.appendChild(r))},[t,r]),x(()=>{if(r&&i)return i.register(r)},[i,r]),_(()=>{var u;!t||!r||(r instanceof Node&&t.contains(r)&&t.removeChild(r),t.childNodes.length<=0&&((u=t.parentElement)==null||u.removeChild(t)))}),C?!t||!r?null:H(y({ourProps:{ref:a},theirProps:n,defaultTag:U,name:"Portal"}),r):null}let S=P,v=m(null);function j(p,l){let{target:n,...e}=p,o={ref:L(l)};return T.createElement(v.Provider,{value:n},y({ourProps:o,theirProps:e,defaultTag:S,name:"Popover.Group"}))}let f=m(null);function ae(){let p=s(f),l=g([]),n=M(o=>(l.current.push(o),p&&p.register(o),()=>e(o))),e=M(o=>{let t=l.current.indexOf(o);t!==-1&&l.current.splice(t,1),p&&p.unregister(o)}),a=E(()=>({register:n,unregister:e,portals:l}),[n,e,l]);return[l,E(()=>function({children:t}){return T.createElement(f.Provider,{value:a},t)},[a])]}let D=c(N),I=c(j),pe=Object.assign(D,{Group:I});export{pe as Portal,ae as useNestedPortals};
+"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,16 +0,17 @@
-import { ElementType, Ref } from 'react';
-import { Props } from '../../types.js';
-import { RefProp, HasDisplayName } from '../../utils/render.js';
-import { ComponentLabel } from '../../components/label/label.js';
-import { ComponentDescription } from '../../components/description/description.js';
+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";
-interface RadioGroupRenderPropArg<TType> {
+type RadioGroupRenderPropArg<TType> = {
     value: TType;
-}
+};
 type RadioGroupPropsWeControl = 'role' | 'aria-labelledby' | 'aria-describedby';
-export type RadioGroupProps<TTag extends ElementType, TType> = Props<TTag, RadioGroupRenderPropArg<TType>, RadioGroupPropsWeControl, {
+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?: (keyof TType & string) | ((a: TType, z: TType) => boolean);
+    by?: ByComparator<TType>;
     disabled?: boolean;
@@ -20,31 +21,62 @@ form?: string;
 }>;
-declare function RadioGroupFn<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG, TType = string>(props: RadioGroupProps<TTag, TType>, ref: Ref<HTMLElement>): JSX.Element;
+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";
-interface OptionRenderPropArg {
+type OptionRenderPropArg = {
     checked: boolean;
+    /** @deprecated use `focus` instead */
     active: boolean;
+    hover: boolean;
+    focus: boolean;
+    autofocus: boolean;
     disabled: boolean;
-}
-type OptionPropsWeControl = 'aria-checked' | 'aria-describedby' | 'aria-lablledby' | 'role' | 'tabIndex';
+};
+type OptionPropsWeControl = 'aria-checked' | 'aria-describedby' | 'aria-labelledby' | 'role' | 'tabIndex';
 export type RadioOptionProps<TTag extends ElementType, TType> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, {
     value: TType;
     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>): JSX.Element;
-interface ComponentRadioGroup extends HasDisplayName {
+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;
 }
-interface ComponentRadioOption extends HasDisplayName {
+export interface _internal_ComponentRadioOption extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string>(props: RadioOptionProps<TTag, TType> & RefProp<typeof OptionFn>): JSX.Element;
 }
-interface ComponentRadioLabel extends ComponentLabel {
+export interface _internal_ComponentRadio extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_RADIO_TAG, TType = string>(props: RadioProps<TTag, TType> & RefProp<typeof RadioFn>): JSX.Element;
 }
-interface ComponentRadioDescription extends ComponentDescription {
+export interface _internal_ComponentRadioLabel extends _internal_ComponentLabel {
 }
-declare let RadioGroupRoot: ComponentRadioGroup;
-export declare let RadioGroup: ComponentRadioGroup & {
-    Option: ComponentRadioOption;
-    Label: ComponentRadioLabel;
-    Description: ComponentRadioDescription;
+export interface _internal_ComponentRadioDescription extends _internal_ComponentDescription {
+}
+declare let RadioGroupRoot: _internal_ComponentRadioGroup;
+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 & {
+    Option: _internal_ComponentRadioOption;
+    /** @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 J,useContext as V,useMemo as A,useReducer as se,useRef as j,useEffect as ue}from"react";import{forwardRefWithAs as X,render as q,compact as de}from'../../utils/render.js';import{useId as Q}from'../../hooks/use-id.js';import{match as ce}from'../../utils/match.js';import{useIsoMorphicEffect as fe}from'../../hooks/use-iso-morphic-effect.js';import{Keys as D}from'../../components/keyboard.js';import{focusIn as Y,Focus as I,FocusResult as Z,sortByDomNode as Te}from'../../utils/focus-management.js';import{useFlags as me}from'../../hooks/use-flags.js';import{Label as ye,useLabels as z}from'../../components/label/label.js';import{Description as Re,useDescriptions as ee}from'../../components/description/description.js';import{useTreeWalker as be}from'../../hooks/use-tree-walker.js';import{useSyncRefs as te}from'../../hooks/use-sync-refs.js';import{Hidden as ge,Features as Oe}from'../../internal/hidden.js';import{attemptSubmit as Ee,objectToFormEntries as ve}from'../../utils/form.js';import{getOwnerDocument as Pe}from'../../utils/owner.js';import{useEvent as E}from'../../hooks/use-event.js';import{useControllable as Ae}from'../../hooks/use-controllable.js';import{isDisabledReactIssue7711 as re}from'../../utils/bugs.js';import{useLatestValue as De}from'../../hooks/use-latest-value.js';import{useDisposables as Ge}from'../../hooks/use-disposables.js';var Ce=(t=>(t[t.RegisterOption=0]="RegisterOption",t[t.UnregisterOption=1]="UnregisterOption",t))(Ce||{});let ke={[0](r,o){let t=[...r.options,{id:o.id,element:o.element,propsRef:o.propsRef}];return{...r,options:Te(t,p=>p.element.current)}},[1](r,o){let t=r.options.slice(),p=r.options.findIndex(T=>T.id===o.id);return p===-1?r:(t.splice(p,1),{...r,options:t})}},B=J(null);B.displayName="RadioGroupDataContext";function oe(r){let o=V(B);if(o===null){let t=new Error(`<${r} /> is missing a parent <RadioGroup /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(t,oe),t}return o}let $=J(null);$.displayName="RadioGroupActionsContext";function ne(r){let o=V($);if(o===null){let t=new Error(`<${r} /> is missing a parent <RadioGroup /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(t,ne),t}return o}function Le(r,o){return ce(o.type,ke,r,o)}let he="div";function Fe(r,o){let t=Q(),{id:p=`headlessui-radiogroup-${t}`,value:T,defaultValue:v,form:S,name:m,onChange:M,by:G=(e,i)=>e===i,disabled:C=!1,...H}=r,y=E(typeof G=="string"?(e,i)=>{let n=G;return(e==null?void 0:e[n])===(i==null?void 0:i[n])}:G),[P,h]=se(Le,{options:[]}),a=P.options,[N,R]=z(),[k,U]=ee(),L=j(null),W=te(L,o),[l,s]=Ae(T,M,v),b=A(()=>a.find(e=>!e.propsRef.current.disabled),[a]),F=A(()=>a.some(e=>y(e.propsRef.current.value,l)),[a,l]),d=E(e=>{var n;if(C||y(e,l))return!1;let i=(n=a.find(f=>y(f.propsRef.current.value,e)))==null?void 0:n.propsRef.current;return i!=null&&i.disabled?!1:(s==null||s(e),!0)});be({container:L.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 x=E(e=>{let i=L.current;if(!i)return;let n=Pe(i),f=a.filter(u=>u.propsRef.current.disabled===!1).map(u=>u.element.current);switch(e.key){case D.Enter:Ee(e.currentTarget);break;case D.ArrowLeft:case D.ArrowUp:if(e.preventDefault(),e.stopPropagation(),Y(f,I.Previous|I.WrapAround)===Z.Success){let g=a.find(K=>K.element.current===(n==null?void 0:n.activeElement));g&&d(g.propsRef.current.value)}break;case D.ArrowRight:case D.ArrowDown:if(e.preventDefault(),e.stopPropagation(),Y(f,I.Next|I.WrapAround)===Z.Success){let g=a.find(K=>K.element.current===(n==null?void 0:n.activeElement));g&&d(g.propsRef.current.value)}break;case D.Space:{e.preventDefault(),e.stopPropagation();let u=a.find(g=>g.element.current===(n==null?void 0:n.activeElement));u&&d(u.propsRef.current.value)}break}}),c=E(e=>(h({type:0,...e}),()=>h({type:1,id:e.id}))),_=A(()=>({value:l,firstOption:b,containsCheckedOption:F,disabled:C,compare:y,...P}),[l,b,F,C,y,P]),ie=A(()=>({registerOption:c,change:d}),[c,d]),ae={ref:W,id:p,role:"radiogroup","aria-labelledby":N,"aria-describedby":k,onKeyDown:x},pe=A(()=>({value:l}),[l]),w=j(null),le=Ge();return ue(()=>{w.current&&v!==void 0&&le.addEventListener(w.current,"reset",()=>{d(v)})},[w,d]),O.createElement(U,{name:"RadioGroup.Description"},O.createElement(R,{name:"RadioGroup.Label"},O.createElement($.Provider,{value:ie},O.createElement(B.Provider,{value:_},m!=null&&l!=null&&ve({[m]:l}).map(([e,i],n)=>O.createElement(ge,{features:Oe.Hidden,ref:n===0?f=>{var u;w.current=(u=f==null?void 0:f.closest("form"))!=null?u:null}:void 0,...de({key:e,as:"input",type:"radio",checked:i!=null,hidden:!0,readOnly:!0,form:S,name:e,value:i})})),q({ourProps:ae,theirProps:H,slot:pe,defaultTag:he,name:"RadioGroup"})))))}var xe=(t=>(t[t.Empty=1]="Empty",t[t.Active=2]="Active",t))(xe||{});let _e="div";function we(r,o){var x;let t=Q(),{id:p=`headlessui-radiogroup-option-${t}`,value:T,disabled:v=!1,...S}=r,m=j(null),M=te(m,o),[G,C]=z(),[H,y]=ee(),{addFlag:P,removeFlag:h,hasFlag:a}=me(1),N=De({value:T,disabled:v}),R=oe("RadioGroup.Option"),k=ne("RadioGroup.Option");fe(()=>k.registerOption({id:p,element:m,propsRef:N}),[p,k,m,r]);let U=E(c=>{var _;if(re(c.currentTarget))return c.preventDefault();k.change(T)&&(P(2),(_=m.current)==null||_.focus())}),L=E(c=>{if(re(c.currentTarget))return c.preventDefault();P(2)}),W=E(()=>h(2)),l=((x=R.firstOption)==null?void 0:x.id)===p,s=R.disabled||v,b=R.compare(R.value,T),F={ref:M,id:p,role:"radio","aria-checked":b?"true":"false","aria-labelledby":G,"aria-describedby":H,"aria-disabled":s?!0:void 0,tabIndex:(()=>s?-1:b||!R.containsCheckedOption&&l?0:-1)(),onClick:s?void 0:U,onFocus:s?void 0:L,onBlur:s?void 0:W},d=A(()=>({checked:b,disabled:s,active:a(2)}),[b,s,a]);return O.createElement(y,{name:"RadioGroup.Description"},O.createElement(C,{name:"RadioGroup.Label"},q({ourProps:F,theirProps:S,slot:d,defaultTag:_e,name:"RadioGroup.Option"})))}let Ie=X(Fe),Se=X(we),yt=Object.assign(Ie,{Option:Se,Label:ye,Description:Re});export{yt 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 me,useRef as W}from"react";import{useByComparator as Re}from'../../hooks/use-by-comparator.js';import{useControllable as be}from'../../hooks/use-controllable.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 K}from'../../hooks/use-sync-refs.js';import{useDisabled as re}from'../../internal/disabled.js';import{FormFields as ge}from'../../internal/form-fields.js';import{useProvidedId as Oe}from'../../internal/id.js';import{isDisabledReactIssue7711 as ne}from'../../utils/bugs.js';import{Focus as w,FocusResult as ie,focusIn as ae,sortByDomNode as Pe}from'../../utils/focus-management.js';import{attemptSubmit as ve}from'../../utils/form.js';import{match as De}from'../../utils/match.js';import{getOwnerDocument as Ae}from'../../utils/owner.js';import{forwardRefWithAs as $,mergeProps as pe,render as j}from'../../utils/render.js';import{Description as _e,useDescribedBy as Ee,useDescriptions as le}from'../description/description.js';import{Keys as I}from'../keyboard.js';import{Label as Ge,useLabelledBy as xe,useLabels as se}from'../label/label.js';var Ce=(e=>(e[e.RegisterOption=0]="RegisterOption",e[e.UnregisterOption=1]="UnregisterOption",e))(Ce||{});let he={[0](o,t){let e=[...o.options,{id:t.id,element:t.element,propsRef:t.propsRef}];return{...o,options:Pe(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})}},V=Z(null);V.displayName="RadioGroupDataContext";function J(o){let t=ee(V);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 Le(o,t){return De(t.type,he,o,t)}let ke="div";function Fe(o,t){let e=B(),a=re(),{id:O=`headlessui-radiogroup-${e}`,value:T,defaultValue:y,form:p,name:d,onChange:u,by:c,disabled:m=a||!1,...R}=o,f=Re(c),[P,C]=me(Le,{options:[]}),i=P.options,[U,h]=se(),[v,L]=le(),D=W(null),M=K(D,t),[r,A]=be(T,u,y),k=x(()=>i.find(n=>!n.propsRef.current.disabled),[i]),b=x(()=>i.some(n=>f(n.propsRef.current.value,r)),[i,r]),l=S(n=>{var s;if(m||f(n,r))return!1;let F=(s=i.find(H=>f(H.propsRef.current.value,n)))==null?void 0:s.propsRef.current;return F!=null&&F.disabled?!1:(A==null||A(n),!0)}),_=S(n=>{let F=D.current;if(!F)return;let s=Ae(F),H=i.filter(g=>g.propsRef.current.disabled===!1).map(g=>g.element.current);switch(n.key){case I.Enter:ve(n.currentTarget);break;case I.ArrowLeft:case I.ArrowUp:if(n.preventDefault(),n.stopPropagation(),ae(H,w.Previous|w.WrapAround)===ie.Success){let E=i.find(N=>N.element.current===(s==null?void 0:s.activeElement));E&&l(E.propsRef.current.value)}break;case I.ArrowRight:case I.ArrowDown:if(n.preventDefault(),n.stopPropagation(),ae(H,w.Next|w.WrapAround)===ie.Success){let E=i.find(N=>N.element.current===(s==null?void 0:s.activeElement));E&&l(E.propsRef.current.value)}break;case I.Space:{n.preventDefault(),n.stopPropagation();let g=i.find(E=>E.element.current===(s==null?void 0:s.activeElement));g&&l(g.propsRef.current.value)}break}}),q=S(n=>(C({type:0,...n}),()=>C({type:1,id:n.id}))),de=x(()=>({value:r,firstOption:k,containsCheckedOption:b,disabled:m,compare:f,...P}),[r,k,b,m,f,P]),ue=x(()=>({registerOption:q,change:l}),[q,l]),ce={ref:M,id:O,role:"radiogroup","aria-labelledby":U,"aria-describedby":v,onKeyDown:_},fe=x(()=>({value:r}),[r]),Te=ye(()=>l(y),[l]);return G.createElement(L,{name:"RadioGroup.Description"},G.createElement(h,{name:"RadioGroup.Label"},G.createElement(X.Provider,{value:ue},G.createElement(V.Provider,{value:de},d!=null&&G.createElement(ge,{disabled:m,data:{[d]:r||"on"},overrides:{type:"radio",checked:r!=null},form:p,onReset:Te}),j({ourProps:ce,theirProps:R,slot:fe,defaultTag:ke,name:"RadioGroup"})))))}let Ie="div";function Ue(o,t){var b;let e=J("RadioGroup.Option"),a=z("RadioGroup.Option"),O=B(),{id:T=`headlessui-radiogroup-option-${O}`,value:y,disabled:p=e.disabled||!1,autoFocus:d=!1,...u}=o,c=W(null),m=K(c,t),[R,f]=se(),[P,C]=le(),i=oe({value:y,disabled:p});te(()=>a.registerOption({id:T,element:c,propsRef:i}),[T,a,c,i]);let U=S(l=>{var _;if(ne(l.currentTarget))return l.preventDefault();a.change(y)&&((_=c.current)==null||_.focus())}),h=((b=e.firstOption)==null?void 0:b.id)===T,{isFocusVisible:v,focusProps:L}=Q({autoFocus:d}),{isHovered:D,hoverProps:M}=Y({isDisabled:p}),r=e.compare(e.value,y),A=pe({ref:m,id:T,role:"radio","aria-checked":r?"true":"false","aria-labelledby":R,"aria-describedby":P,"aria-disabled":p?!0:void 0,tabIndex:(()=>p?-1:r||!e.containsCheckedOption&&h?0:-1)(),onClick:p?void 0:U,autoFocus:d},L,M),k=x(()=>({checked:r,disabled:p,active:v,hover:D,focus:v,autofocus:d}),[r,p,D,v,d]);return G.createElement(C,{name:"RadioGroup.Description"},G.createElement(f,{name:"RadioGroup.Label"},j({ourProps:A,theirProps:u,slot:k,defaultTag:Ie,name:"RadioGroup.Option"})))}let Me="span";function Se(o,t){var b;let e=J("Radio"),a=z("Radio"),O=B(),T=Oe(),y=re(),{id:p=T||`headlessui-radio-${O}`,value:d,disabled:u=e.disabled||y||!1,autoFocus:c=!1,...m}=o,R=W(null),f=K(R,t),P=xe(),C=Ee(),i=oe({value:d,disabled:u});te(()=>a.registerOption({id:p,element:R,propsRef:i}),[p,a,R,i]);let U=S(l=>{var _;if(ne(l.currentTarget))return l.preventDefault();a.change(d)&&((_=R.current)==null||_.focus())}),{isFocusVisible:h,focusProps:v}=Q({autoFocus:c}),{isHovered:L,hoverProps:D}=Y({isDisabled:u}),M=((b=e.firstOption)==null?void 0:b.id)===p,r=e.compare(e.value,d),A=pe({ref:f,id:p,role:"radio","aria-checked":r?"true":"false","aria-labelledby":P,"aria-describedby":C,"aria-disabled":u?!0:void 0,tabIndex:(()=>u?-1:r||!e.containsCheckedOption&&M?0:-1)(),autoFocus:c,onClick:u?void 0:U},v,D),k=x(()=>({checked:r,disabled:u,hover:L,focus:h,autofocus:c}),[r,u,L,h,c]);return j({ourProps:A,theirProps:m,slot:k,defaultTag:Me,name:"Radio"})}let He=$(Fe),we=$(Ue),dt=$(Se),Ne=Ge,We=_e,ut=Object.assign(He,{Option:we,Label:Ne,Description:We});export{dt as Radio,ut as RadioGroup,We as RadioGroupDescription,Ne as RadioGroupLabel,we as RadioGroupOption};

dist/components/switch/switch.d.ts

@@ -1,17 +0,23 @@
-import React, { ElementType, Ref } from 'react';
-import { Props } from '../../types.js';
-import { HasDisplayName, RefProp } from '../../utils/render.js';
-import { ComponentLabel } from '../label/label.js';
-import { ComponentDescription } from '../description/description.js';
+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;
 }>;
-export type SwitchGroupProps<TTag extends ElementType> = Props<TTag>;
-declare function GroupFn<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: SwitchGroupProps<TTag>): JSX.Element;
+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";
-interface SwitchRenderPropArg {
+type SwitchRenderPropArg = {
     checked: boolean;
-}
-type SwitchPropsWeControl = 'aria-checked' | 'aria-describedby' | 'aria-labelledby' | 'role' | 'tabIndex';
-export type SwitchProps<TTag extends ElementType> = Props<TTag, SwitchRenderPropArg, SwitchPropsWeControl, {
+    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;
@@ -23,19 +29,29 @@ defaultChecked?: boolean;
     form?: string;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    tabIndex?: number;
 }>;
-declare function SwitchFn<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(props: SwitchProps<TTag>, ref: Ref<HTMLButtonElement>): JSX.Element;
-interface ComponentSwitch extends HasDisplayName {
+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;
 }
-interface ComponentSwitchGroup extends HasDisplayName {
+export interface _internal_ComponentSwitchGroup extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: SwitchGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element;
 }
-interface ComponentSwitchLabel extends ComponentLabel {
+export interface _internal_ComponentSwitchLabel extends _internal_ComponentLabel {
 }
-interface ComponentSwitchDescription extends ComponentDescription {
+export interface _internal_ComponentSwitchDescription extends _internal_ComponentDescription {
 }
-export declare let Switch: ComponentSwitch & {
-    Group: ComponentSwitchGroup;
-    Label: ComponentSwitchLabel;
-    Description: ComponentSwitchDescription;
+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 & {
+    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 i,{Fragment as x,createContext as A,useContext as H,useMemo as E,useRef as F,useState as M,useEffect as _}from"react";import{forwardRefWithAs as U,render as P,compact as K}from'../../utils/render.js';import{useId as B}from'../../hooks/use-id.js';import{Keys as g}from'../keyboard.js';import{isDisabledReactIssue7711 as I}from'../../utils/bugs.js';import{Label as O,useLabels as W}from'../label/label.js';import{Description as N,useDescriptions as J}from'../description/description.js';import{useResolveButtonType as X}from'../../hooks/use-resolve-button-type.js';import{useSyncRefs as j}from'../../hooks/use-sync-refs.js';import{Hidden as $,Features as q}from'../../internal/hidden.js';import{attemptSubmit as z}from'../../utils/form.js';import{useEvent as m}from'../../hooks/use-event.js';import{useControllable as Q}from'../../hooks/use-controllable.js';import{useDisposables as V}from'../../hooks/use-disposables.js';let y=A(null);y.displayName="GroupContext";let Y=x;function Z(s){var d;let[n,p]=M(null),[c,f]=W(),[r,h]=J(),l=E(()=>({switch:n,setSwitch:p,labelledby:c,describedby:r}),[n,p,c,r]),T={},b=s;return i.createElement(h,{name:"Switch.Description"},i.createElement(f,{name:"Switch.Label",props:{htmlFor:(d=l.switch)==null?void 0:d.id,onClick(t){n&&(t.currentTarget.tagName==="LABEL"&&t.preventDefault(),n.click(),n.focus({preventScroll:!0}))}}},i.createElement(y.Provider,{value:l},P({ourProps:T,theirProps:b,defaultTag:Y,name:"Switch.Group"}))))}let ee="button";function te(s,n){let p=B(),{id:c=`headlessui-switch-${p}`,checked:f,defaultChecked:r=!1,onChange:h,name:l,value:T,form:b,...d}=s,t=H(y),u=F(null),D=j(u,n,t===null?null:t.setSwitch),[o,a]=Q(f,h,r),S=m(()=>a==null?void 0:a(!o)),C=m(e=>{if(I(e.currentTarget))return e.preventDefault();e.preventDefault(),S()}),L=m(e=>{e.key===g.Space?(e.preventDefault(),S()):e.key===g.Enter&&z(e.currentTarget)}),v=m(e=>e.preventDefault()),G=E(()=>({checked:o}),[o]),R={id:c,ref:D,role:"switch",type:X(s,u),tabIndex:0,"aria-checked":o,"aria-labelledby":t==null?void 0:t.labelledby,"aria-describedby":t==null?void 0:t.describedby,onClick:C,onKeyUp:L,onKeyPress:v},k=V();return _(()=>{var w;let e=(w=u.current)==null?void 0:w.closest("form");e&&r!==void 0&&k.addEventListener(e,"reset",()=>{a(r)})},[u,a]),i.createElement(i.Fragment,null,l!=null&&o&&i.createElement($,{features:q.Hidden,...K({as:"input",type:"checkbox",hidden:!0,readOnly:!0,form:b,checked:o,name:l,value:T})}),P({ourProps:R,theirProps:d,slot:G,defaultTag:ee,name:"Switch"}))}let ne=U(te),re=Z,Ge=Object.assign(ne,{Group:re,Label:O,Description:N});export{Ge as Switch};
+"use client";import{useFocusRing as V}from"@react-aria/focus";import{useHover as $}from"@react-aria/interactions";import l,{Fragment as q,createContext as z,useCallback as Q,useContext as Y,useMemo as C,useRef as Z,useState as L}from"react";import{useActivePress as ee}from'../../hooks/use-active-press.js';import{useControllable as te}from'../../hooks/use-controllable.js';import{useDisposables as oe}from'../../hooks/use-disposables.js';import{useEvent as m}from'../../hooks/use-event.js';import{useId as re}from'../../hooks/use-id.js';import{useResolveButtonType as ne}from'../../hooks/use-resolve-button-type.js';import{useSyncRefs as le}from'../../hooks/use-sync-refs.js';import{useDisabled as ie}from'../../internal/disabled.js';import{FormFields as ae}from'../../internal/form-fields.js';import{useProvidedId as se}from'../../internal/id.js';import{isDisabledReactIssue7711 as pe}from'../../utils/bugs.js';import{attemptSubmit as ce}from'../../utils/form.js';import{forwardRefWithAs as ue,mergeProps as de,render as G}from'../../utils/render.js';import{Description as me,useDescribedBy as fe,useDescriptions as be}from'../description/description.js';import{Keys as R}from'../keyboard.js';import{Label as he,useLabelledBy as Te,useLabels as ye}from'../label/label.js';let y=z(null);y.displayName="GroupContext";let Se=q;function we(n){var i;let[o,s]=L(null),[f,b]=ye(),[h,t]=be(),p=C(()=>({switch:o,setSwitch:s}),[o,s]),c={},T=n;return l.createElement(t,{name:"Switch.Description",value:h},l.createElement(b,{name:"Switch.Label",value:f,props:{htmlFor:(i=p.switch)==null?void 0:i.id,onClick(u){o&&(u.currentTarget instanceof HTMLLabelElement&&u.preventDefault(),o.click(),o.focus({preventScroll:!0}))}}},l.createElement(y.Provider,{value:p},G({ourProps:c,theirProps:T,slot:{},defaultTag:Se,name:"Switch.Group"}))))}let _e="button";function Pe(n,o){var x;let s=re(),f=se(),b=ie(),{id:h=f||`headlessui-switch-${s}`,disabled:t=b||!1,checked:p,defaultChecked:c=!1,onChange:T,name:i,value:u,form:A,autoFocus:d=!1,...F}=n,S=Y(y),w=Z(null),k=le(w,o,S===null?null:S.setSwitch),[a,r]=te(p,T,c),H=oe(),[_,P]=L(!1),E=m(()=>{P(!0),r==null||r(!a),H.nextFrame(()=>{P(!1)})}),M=m(e=>{if(pe(e.currentTarget))return e.preventDefault();e.preventDefault(),E()}),U=m(e=>{e.key===R.Space?(e.preventDefault(),E()):e.key===R.Enter&&ce(e.currentTarget)}),I=m(e=>e.preventDefault()),B=Te(),K=fe(),{isFocusVisible:g,focusProps:W}=V({autoFocus:d}),{isHovered:D,hoverProps:O}=$({isDisabled:t}),{pressed:v,pressProps:N}=ee({disabled:t}),J=C(()=>({checked:a,disabled:t,hover:D,focus:g,active:v,autofocus:d,changing:_}),[a,D,g,v,t,_,d]),X=de({id:h,ref:k,role:"switch",type:ne(n,w),tabIndex:n.tabIndex===-1?0:(x=n.tabIndex)!=null?x:0,"aria-checked":a,"aria-labelledby":B,"aria-describedby":K,disabled:t||void 0,autoFocus:d,onClick:M,onKeyUp:U,onKeyPress:I},W,O,N),j=Q(()=>r==null?void 0:r(c),[r]);return l.createElement(l.Fragment,null,i!=null&&l.createElement(ae,{disabled:t,data:{[i]:u||"on"},overrides:{type:"checkbox",checked:a},form:A,onReset:j}),G({ourProps:X,theirProps:F,slot:J,defaultTag:_e,name:"Switch"}))}let Ee=ue(Pe),ge=we,De=he,ve=me,je=Object.assign(Ee,{Group:ge,Label:De,Description:ve});export{je as Switch,ve as SwitchDescription,ge as SwitchGroup,De as SwitchLabel};

dist/components/tabs/tabs.d.ts

@@ -1,11 +0,10 @@
-import React, { ElementType, Ref } from 'react';
-import { Props } from '../../types.js';
-import { PropsForFeatures, RefProp, HasDisplayName } from '../../utils/render.js';
-declare let DEFAULT_TABS_TAG: React.ExoticComponent<{
-    children?: React.ReactNode;
-}>;
-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;
-}
-export type TabGroupProps<TTag extends ElementType> = Props<TTag, TabsRenderPropArg, never, {
+};
+type TabsPropsWeControl = never;
+export type TabGroupProps<TTag extends ElementType = typeof DEFAULT_TABS_TAG> = Props<TTag, TabsRenderPropArg, TabsPropsWeControl, {
     defaultIndex?: number;
@@ -17,55 +16,68 @@ onChange?: (index: number) => void;
 }>;
-declare function GroupFn<TTag extends ElementType = typeof DEFAULT_TABS_TAG>(props: TabGroupProps<TTag>, ref: Ref<HTMLElement>): JSX.Element;
+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";
-interface ListRenderPropArg {
+type ListRenderPropArg = {
     selectedIndex: number;
-}
+};
 type ListPropsWeControl = 'aria-orientation' | 'role';
-export type TabListProps<TTag extends ElementType> = Props<TTag, ListRenderPropArg, ListPropsWeControl, {}>;
+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";
-interface TabRenderPropArg {
+type TabRenderPropArg = {
+    hover: boolean;
+    focus: boolean;
+    active: boolean;
+    autofocus: boolean;
     selected: boolean;
-}
+    disabled: boolean;
+};
 type TabPropsWeControl = 'aria-controls' | 'aria-selected' | 'role' | 'tabIndex';
-export type TabProps<TTag extends ElementType> = Props<TTag, TabRenderPropArg, TabPropsWeControl> & {};
+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";
-interface PanelsRenderPropArg {
+type PanelsRenderPropArg = {
     selectedIndex: number;
-}
-export type TabPanelsProps<TTag extends ElementType> = Props<TTag, PanelsRenderPropArg>;
+};
+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";
-interface PanelRenderPropArg {
+type PanelRenderPropArg = {
     selected: boolean;
-}
+    focus: boolean;
+};
 type PanelPropsWeControl = 'role' | 'aria-labelledby';
 declare let PanelRenderFeatures: number;
-export type TabPanelProps<TTag extends ElementType> = Props<TTag, PanelRenderPropArg, PanelPropsWeControl, PropsForFeatures<typeof PanelRenderFeatures> & {
+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>): JSX.Element | null;
-interface ComponentTab extends HasDisplayName {
+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;
 }
-interface ComponentTabGroup extends HasDisplayName {
+export interface _internal_ComponentTabGroup extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_TABS_TAG>(props: TabGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element;
 }
-interface ComponentTabList extends HasDisplayName {
+export interface _internal_ComponentTabList extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_LIST_TAG>(props: TabListProps<TTag> & RefProp<typeof ListFn>): JSX.Element;
 }
-interface ComponentTabPanels extends HasDisplayName {
+export interface _internal_ComponentTabPanels extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_PANELS_TAG>(props: TabPanelsProps<TTag> & RefProp<typeof PanelsFn>): JSX.Element;
 }
-interface ComponentTabPanel extends HasDisplayName {
+export interface _internal_ComponentTabPanel extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: TabPanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element;
 }
-export declare let Tab: ComponentTab & {
-    Group: ComponentTabGroup;
-    List: ComponentTabList;
-    Panels: ComponentTabPanels;
-    Panel: ComponentTabPanel;
+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 & {
+    Group: _internal_ComponentTabGroup;
+    List: _internal_ComponentTabList;
+    Panels: _internal_ComponentTabPanels;
+    Panel: _internal_ComponentTabPanel;
 };
 export {};

dist/components/tabs/tabs.js

@@ -1,1 +0,1 @@
-import _,{Fragment as ne,createContext as V,useContext as Q,useMemo as F,useReducer as re,useRef as K}from"react";import{render as w,Features as Y,forwardRefWithAs as v}from'../../utils/render.js';import{useId as Z}from'../../hooks/use-id.js';import{match as G}from'../../utils/match.js';import{Keys as P}from'../../components/keyboard.js';import{focusIn as h,Focus as g,sortByDomNode as H,FocusResult as k}from'../../utils/focus-management.js';import{useIsoMorphicEffect as O}from'../../hooks/use-iso-morphic-effect.js';import{useSyncRefs as U}from'../../hooks/use-sync-refs.js';import{useResolveButtonType as ae}from'../../hooks/use-resolve-button-type.js';import{useLatestValue as J}from'../../hooks/use-latest-value.js';import{FocusSentinel as le}from'../../internal/focus-sentinel.js';import{useEvent as D}from'../../hooks/use-event.js';import{microTask as oe}from'../../utils/micro-task.js';import{Hidden as se}from'../../internal/hidden.js';import{getOwnerDocument as ie}from'../../utils/owner.js';import{StableCollection as pe,useStableCollectionIndex as ee}from'../../utils/stable-collection.js';var ue=(t=>(t[t.Forwards=0]="Forwards",t[t.Backwards=1]="Backwards",t))(ue||{}),Te=(o=>(o[o.Less=-1]="Less",o[o.Equal=0]="Equal",o[o.Greater=1]="Greater",o))(Te||{}),de=(r=>(r[r.SetSelectedIndex=0]="SetSelectedIndex",r[r.RegisterTab=1]="RegisterTab",r[r.UnregisterTab=2]="UnregisterTab",r[r.RegisterPanel=3]="RegisterPanel",r[r.UnregisterPanel=4]="UnregisterPanel",r))(de||{});let ce={[0](e,n){var u;let t=H(e.tabs,T=>T.current),o=H(e.panels,T=>T.current),s=t.filter(T=>{var l;return!((l=T.current)!=null&&l.hasAttribute("disabled"))}),r={...e,tabs:t,panels:o};if(n.index<0||n.index>t.length-1){let T=G(Math.sign(n.index-e.selectedIndex),{[-1]:()=>1,[0]:()=>G(Math.sign(n.index),{[-1]:()=>0,[0]:()=>0,[1]:()=>1}),[1]:()=>0});return s.length===0?r:{...r,selectedIndex:G(T,{[0]:()=>t.indexOf(s[0]),[1]:()=>t.indexOf(s[s.length-1])})}}let i=t.slice(0,n.index),b=[...t.slice(n.index),...i].find(T=>s.includes(T));if(!b)return r;let c=(u=t.indexOf(b))!=null?u:e.selectedIndex;return c===-1&&(c=e.selectedIndex),{...r,selectedIndex:c}},[1](e,n){var r;if(e.tabs.includes(n.tab))return e;let t=e.tabs[e.selectedIndex],o=H([...e.tabs,n.tab],i=>i.current),s=(r=o.indexOf(t))!=null?r:e.selectedIndex;return s===-1&&(s=e.selectedIndex),{...e,tabs:o,selectedIndex:s}},[2](e,n){return{...e,tabs:e.tabs.filter(t=>t!==n.tab)}},[3](e,n){return e.panels.includes(n.panel)?e:{...e,panels:H([...e.panels,n.panel],t=>t.current)}},[4](e,n){return{...e,panels:e.panels.filter(t=>t!==n.panel)}}},X=V(null);X.displayName="TabsDataContext";function M(e){let n=Q(X);if(n===null){let t=new Error(`<${e} /> is missing a parent <Tab.Group /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(t,M),t}return n}let $=V(null);$.displayName="TabsActionsContext";function q(e){let n=Q($);if(n===null){let t=new Error(`<${e} /> is missing a parent <Tab.Group /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(t,q),t}return n}function fe(e,n){return G(n.type,ce,e,n)}let be=ne;function me(e,n){let{defaultIndex:t=0,vertical:o=!1,manual:s=!1,onChange:r,selectedIndex:i=null,...R}=e;const b=o?"vertical":"horizontal",c=s?"manual":"auto";let u=i!==null,T=U(n),[l,d]=re(fe,{selectedIndex:i!=null?i:t,tabs:[],panels:[]}),y=F(()=>({selectedIndex:l.selectedIndex}),[l.selectedIndex]),m=J(r||(()=>{})),x=J(l.tabs),E=F(()=>({orientation:b,activation:c,...l}),[b,c,l]),S=D(p=>(d({type:1,tab:p}),()=>d({type:2,tab:p}))),A=D(p=>(d({type:3,panel:p}),()=>d({type:4,panel:p}))),L=D(p=>{C.current!==p&&m.current(p),u||d({type:0,index:p})}),C=J(u?e.selectedIndex:l.selectedIndex),N=F(()=>({registerTab:S,registerPanel:A,change:L}),[]);O(()=>{d({type:0,index:i!=null?i:t})},[i]),O(()=>{if(C.current===void 0||l.tabs.length<=0)return;let p=H(l.tabs,a=>a.current);p.some((a,f)=>l.tabs[f]!==a)&&L(p.indexOf(l.tabs[C.current]))});let B={ref:T};return _.createElement(pe,null,_.createElement($.Provider,{value:N},_.createElement(X.Provider,{value:E},E.tabs.length<=0&&_.createElement(le,{onFocus:()=>{var p,I;for(let a of x.current)if(((p=a.current)==null?void 0:p.tabIndex)===0)return(I=a.current)==null||I.focus(),!0;return!1}}),w({ourProps:B,theirProps:R,slot:y,defaultTag:be,name:"Tabs"}))))}let Pe="div";function ge(e,n){let{orientation:t,selectedIndex:o}=M("Tab.List"),s=U(n);return w({ourProps:{ref:s,role:"tablist","aria-orientation":t},theirProps:e,slot:{selectedIndex:o},defaultTag:Pe,name:"Tabs.List"})}let ye="button";function xe(e,n){var p,I;let t=Z(),{id:o=`headlessui-tabs-tab-${t}`,...s}=e,{orientation:r,activation:i,selectedIndex:R,tabs:b,panels:c}=M("Tab"),u=q("Tab"),T=M("Tab"),l=K(null),d=U(l,n);O(()=>u.registerTab(l),[u,l]);let y=ee("tabs"),m=b.indexOf(l);m===-1&&(m=y);let x=m===R,E=D(a=>{var j;let f=a();if(f===k.Success&&i==="auto"){let W=(j=ie(l))==null?void 0:j.activeElement,z=T.tabs.findIndex(te=>te.current===W);z!==-1&&u.change(z)}return f}),S=D(a=>{let f=b.map(W=>W.current).filter(Boolean);if(a.key===P.Space||a.key===P.Enter){a.preventDefault(),a.stopPropagation(),u.change(m);return}switch(a.key){case P.Home:case P.PageUp:return a.preventDefault(),a.stopPropagation(),E(()=>h(f,g.First));case P.End:case P.PageDown:return a.preventDefault(),a.stopPropagation(),E(()=>h(f,g.Last))}if(E(()=>G(r,{vertical(){return a.key===P.ArrowUp?h(f,g.Previous|g.WrapAround):a.key===P.ArrowDown?h(f,g.Next|g.WrapAround):k.Error},horizontal(){return a.key===P.ArrowLeft?h(f,g.Previous|g.WrapAround):a.key===P.ArrowRight?h(f,g.Next|g.WrapAround):k.Error}}))===k.Success)return a.preventDefault()}),A=K(!1),L=D(()=>{var a;A.current||(A.current=!0,(a=l.current)==null||a.focus(),u.change(m),oe(()=>{A.current=!1}))}),C=D(a=>{a.preventDefault()}),N=F(()=>({selected:x}),[x]),B={ref:d,onKeyDown:S,onMouseDown:C,onClick:L,id:o,role:"tab",type:ae(e,l),"aria-controls":(I=(p=c[m])==null?void 0:p.current)==null?void 0:I.id,"aria-selected":x,tabIndex:x?0:-1};return w({ourProps:B,theirProps:s,slot:N,defaultTag:ye,name:"Tabs.Tab"})}let Ee="div";function Ae(e,n){let{selectedIndex:t}=M("Tab.Panels"),o=U(n),s=F(()=>({selectedIndex:t}),[t]);return w({ourProps:{ref:o},theirProps:e,slot:s,defaultTag:Ee,name:"Tabs.Panels"})}let Re="div",Le=Y.RenderStrategy|Y.Static;function De(e,n){var E,S,A,L;let t=Z(),{id:o=`headlessui-tabs-panel-${t}`,tabIndex:s=0,...r}=e,{selectedIndex:i,tabs:R,panels:b}=M("Tab.Panel"),c=q("Tab.Panel"),u=K(null),T=U(u,n);O(()=>c.registerPanel(u),[c,u]);let l=ee("panels"),d=b.indexOf(u);d===-1&&(d=l);let y=d===i,m=F(()=>({selected:y}),[y]),x={ref:T,id:o,role:"tabpanel","aria-labelledby":(S=(E=R[d])==null?void 0:E.current)==null?void 0:S.id,tabIndex:y?s:-1};return!y&&((A=r.unmount)==null||A)&&!((L=r.static)!=null&&L)?_.createElement(se,{as:"span",...x}):w({ourProps:x,theirProps:r,slot:m,defaultTag:Re,features:Le,visible:y,name:"Tabs.Panel"})}let Se=v(xe),Ie=v(me),Fe=v(ge),he=v(Ae),Me=v(De),rt=Object.assign(Se,{Group:Ie,List:Fe,Panels:he,Panel:Me});export{rt 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,41 +0,1 @@
-import { ElementType, MutableRefObject, Ref } from 'react';
-import { Props, ReactTag } from '../../types.js';
-import { Features, HasDisplayName, PropsForFeatures, RefProp } from '../../utils/render.js';
-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;
-}
-export type TransitionChildProps<TTag extends ReactTag> = Props<TTag, TransitionChildRenderPropArg, never, PropsForFeatures<typeof TransitionChildRenderFeatures> & TransitionClasses & TransitionEvents & {
-    appear?: boolean;
-}>;
-declare let DEFAULT_TRANSITION_CHILD_TAG: "div";
-type TransitionChildRenderPropArg = MutableRefObject<HTMLDivElement>;
-declare let TransitionChildRenderFeatures: Features;
-declare function TransitionChildFn<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionChildProps<TTag>, ref: Ref<HTMLElement>): JSX.Element;
-export type TransitionRootProps<TTag extends ElementType> = TransitionChildProps<TTag> & {
-    show?: boolean;
-    appear?: boolean;
-};
-declare function TransitionRootFn<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionRootProps<TTag>, ref: Ref<HTMLElement>): JSX.Element;
-interface ComponentTransitionRoot extends HasDisplayName {
-    <TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionRootProps<TTag> & RefProp<typeof TransitionRootFn>): JSX.Element;
-}
-interface ComponentTransitionChild extends HasDisplayName {
-    <TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionChildProps<TTag> & RefProp<typeof TransitionChildFn>): JSX.Element;
-}
-export declare let Transition: ComponentTransitionRoot & {
-    Child: ComponentTransitionChild;
-    Root: ComponentTransitionRoot;
-};
-export {};
+export * from '../transition/transition.js';

dist/components/transitions/transition.js

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

dist/headlessui.esm.js

@@ -1,1 +0,1 @@
-import"client-only";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/radio-group/radio-group.js';export*from'./components/switch/switch.js';export*from'./components/tabs/tabs.js';export*from'./components/transitions/transition.js';import{Portal as d}from'./components/portal/portal.js';export{d as Portal};
+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/document-overflow/adjust-scrollbar-padding.d.ts

@@ -1,2 +0,2 @@
-import { ScrollLockStep } from './overflow-store.js';
+import type { ScrollLockStep } from './overflow-store.js';
 export declare function adjustScrollbarPadding(): ScrollLockStep;

dist/hooks/document-overflow/adjust-scrollbar-padding.js

@@ -1,1 +0,1 @@
-function c(){let o;return{before({doc:e}){var l;let n=e.documentElement;o=((l=e.defaultView)!=null?l:window).innerWidth-n.clientWidth},after({doc:e,d:n}){let t=e.documentElement,l=t.clientWidth-t.offsetWidth,r=o-l;n.style(t,"paddingRight",`${r}px`)}}}export{c as adjustScrollbarPadding};
+function d(){let r;return{before({doc:e}){var l;let o=e.documentElement,t=(l=e.defaultView)!=null?l:window;r=Math.max(0,t.innerWidth-o.clientWidth)},after({doc:e,d:o}){let t=e.documentElement,l=Math.max(0,t.clientWidth-t.offsetWidth),n=Math.max(0,r-l);o.style(t,"paddingRight",`${n}px`)}}}export{d as adjustScrollbarPadding};

dist/hooks/document-overflow/handle-ios-locking.d.ts

@@ -1,2 +0,2 @@
-import { ScrollLockStep } from './overflow-store.js';
+import type { ScrollLockStep } from './overflow-store.js';
 interface ContainerMetadata {
@@ -3,0 +3,0 @@ containers: (() => HTMLElement[])[];

dist/hooks/document-overflow/handle-ios-locking.js

@@ -1,1 +0,1 @@
-import{isIOS as f}from'../../utils/platform.js';function p(){if(!f())return{};let o;return{before(){o=window.pageYOffset},after({doc:r,d:l,meta:s}){function i(e){return s.containers.flatMap(t=>t()).some(t=>t.contains(e))}l.style(r.body,"marginTop",`-${o}px`),window.scrollTo(0,0);let n=null;l.addEventListener(r,"click",e=>{if(e.target instanceof HTMLElement)try{let t=e.target.closest("a");if(!t)return;let{hash:c}=new URL(t.href),a=r.querySelector(c);a&&!i(a)&&(n=a)}catch{}},!0),l.addEventListener(r,"touchmove",e=>{e.target instanceof HTMLElement&&!i(e.target)&&e.preventDefault()},{passive:!1}),l.add(()=>{window.scrollTo(0,window.pageYOffset+o),n&&n.isConnected&&(n.scrollIntoView({block:"nearest"}),n=null)})}}}export{p as handleIOSLocking};
+import{disposables as m}from'../../utils/disposables.js';import{isIOS as u}from'../../utils/platform.js';function d(){return u()?{before({doc:r,d:l,meta:c}){function o(a){return c.containers.flatMap(n=>n()).some(n=>n.contains(a))}l.microTask(()=>{var s;if(window.getComputedStyle(r.documentElement).scrollBehavior!=="auto"){let t=m();t.style(r.documentElement,"scrollBehavior","auto"),l.add(()=>l.microTask(()=>t.dispose()))}let a=(s=window.scrollY)!=null?s:window.pageYOffset,n=null;l.addEventListener(r,"click",t=>{if(t.target instanceof HTMLElement)try{let e=t.target.closest("a");if(!e)return;let{hash:f}=new URL(e.href),i=r.querySelector(f);i&&!o(i)&&(n=i)}catch{}},!0),l.addEventListener(r,"touchstart",t=>{if(t.target instanceof HTMLElement)if(o(t.target)){let e=t.target;for(;e.parentElement&&o(e.parentElement);)e=e.parentElement;l.style(e,"overscrollBehavior","contain")}else l.style(t.target,"touchAction","none")}),l.addEventListener(r,"touchmove",t=>{if(t.target instanceof HTMLElement)if(o(t.target)){let e=t.target;for(;e.parentElement&&e.dataset.headlessuiPortal!==""&&!(e.scrollHeight>e.clientHeight||e.scrollWidth>e.clientWidth);)e=e.parentElement;e.dataset.headlessuiPortal===""&&t.preventDefault()}else t.preventDefault()},{passive:!1}),l.add(()=>{var e;let t=(e=window.scrollY)!=null?e:window.pageYOffset;a!==t&&window.scrollTo(0,a),n&&n.isConnected&&(n.scrollIntoView({block:"nearest"}),n=null)})})}}:{}}export{d as handleIOSLocking};

dist/hooks/document-overflow/overflow-store.d.ts

@@ -1,2 +0,2 @@
-import { Disposables } from '../../utils/disposables.js';
+import { type Disposables } from '../../utils/disposables.js';
 interface DocEntry {
@@ -3,0 +3,0 @@ doc: Document;

dist/hooks/document-overflow/prevent-scroll.d.ts

@@ -1,2 +0,2 @@
-import { ScrollLockStep } from './overflow-store.js';
+import type { ScrollLockStep } from './overflow-store.js';
 export declare function preventScroll(): ScrollLockStep;

dist/hooks/document-overflow/prevent-scroll.js

@@ -1,1 +0,1 @@
-function l(){return{before({doc:e,d:o}){o.style(e.documentElement,"overflow","hidden")}}}export{l as preventScroll};
+function r(){return{before({doc:e,d:o}){o.style(e.documentElement,"overflow","hidden")}}}export{r as preventScroll};

dist/hooks/document-overflow/use-document-overflow.d.ts

@@ -1,1 +0,1 @@
-export declare function useDocumentOverflowLockedEffect(doc: Document | null, shouldBeLocked: boolean, meta: (meta: Record<string, any>) => Record<string, any>): boolean;
+export declare function useDocumentOverflowLockedEffect(doc: Document | null, shouldBeLocked: boolean, meta?: (meta: Record<string, any>) => Record<string, any>): boolean;

dist/hooks/document-overflow/use-document-overflow.js

@@ -1,1 +0,1 @@
-import{useIsoMorphicEffect as u}from'../use-iso-morphic-effect.js';import{useStore as s}from'../../hooks/use-store.js';import{overflows as t}from'./overflow-store.js';function p(e,r,n){let f=s(t),o=e?f.get(e):void 0,i=o?o.count>0:!1;return u(()=>{if(!(!e||!r))return t.dispatch("PUSH",e,n),()=>t.dispatch("POP",e,n)},[r,e]),i}export{p as useDocumentOverflowLockedEffect};
+import{useStore as s}from'../../hooks/use-store.js';import{useIsoMorphicEffect as u}from'../use-iso-morphic-effect.js';import{overflows as t}from'./overflow-store.js';function a(e,r,n=()=>({containers:[]})){let f=s(t),o=e?f.get(e):void 0,i=o?o.count>0:!1;return u(()=>{if(!(!e||!r))return t.dispatch("PUSH",e,n),()=>t.dispatch("POP",e,n)},[r,e]),i}export{a as useDocumentOverflowLockedEffect};

dist/hooks/use-disposables.d.ts

@@ -0,3 +1,7 @@
+/**
+ * The `useDisposables` hook returns a `disposables` object that is disposed
+ * when the component is unmounted.
+ */
 export declare function useDisposables(): {
-    addEventListener<TEventName extends keyof WindowEventMap>(element: HTMLElement | Window | Document, 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;
@@ -9,3 +13,3 @@ nextFrame(callback: FrameRequestCallback): () => void;
     group(cb: (d: {
-        addEventListener<TEventName extends keyof WindowEventMap>(element: HTMLElement | Window | Document, 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;
@@ -12,0 +16,0 @@ nextFrame(callback: FrameRequestCallback): () => 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-flags.js

@@ -1,1 +0,1 @@
-import{useState as f,useCallback as n}from"react";import{useIsMounted as i}from'./use-is-mounted.js';function c(a=0){let[l,r]=f(a),t=i(),o=n(e=>{t.current&&r(u=>u|e)},[l,t]),m=n(e=>Boolean(l&e),[l]),s=n(e=>{t.current&&r(u=>u&~e)},[r,t]),g=n(e=>{t.current&&r(u=>u^e)},[r]);return{flags:l,addFlag:o,hasFlag:m,removeFlag:s,toggleFlag:g}}export{c as useFlags};
+import{useCallback as n,useState as f}from"react";import{useIsMounted as i}from'./use-is-mounted.js';function c(a=0){let[l,r]=f(a),t=i(),o=n(e=>{t.current&&r(u=>u|e)},[l,t]),m=n(e=>!!(l&e),[l]),s=n(e=>{t.current&&r(u=>u&~e)},[r,t]),g=n(e=>{t.current&&r(u=>u^e)},[r]);return{flags:l,addFlag:o,hasFlag:m,removeFlag:s,toggleFlag:g}}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 o;import t from"react";import{useIsoMorphicEffect as d}from'./use-iso-morphic-effect.js';import{useServerHandoffComplete as f}from'./use-server-handoff-complete.js';import{env as r}from'../utils/env.js';let I=(o=t.useId)!=null?o:function(){let n=f(),[e,u]=t.useState(n?()=>r.nextId():null);return d(()=>{e===null&&u(r.nextId())},[e]),e!=null?""+e:void 0};export{I as useId};
+import{useId as r}from"react";export{r as useId};

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-iso-morphic-effect.d.ts

@@ -1,2 +0,2 @@
-import { EffectCallback, DependencyList } from 'react';
+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 t,useEffect as c}from"react";import{env as i}from'../utils/env.js';let l=(e,f)=>{i.isServer?c(e,f):t(e,f)};export{l 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-on-unmount.js

@@ -1,1 +0,1 @@
-import{useRef as u,useEffect as n}from"react";import{microTask as o}from'../utils/micro-task.js';import{useEvent as f}from'./use-event.js';function c(t){let r=f(t),e=u(!1);n(()=>(e.current=!1,()=>{e.current=!0,o(()=>{e.current&&r()})}),[r])}export{c as useOnUnmount};
+import{useEffect as u,useRef as n}from"react";import{microTask as o}from'../utils/micro-task.js';import{useEvent as f}from'./use-event.js';function c(t){let r=f(t),e=n(!1);u(()=>(e.current=!1,()=>{e.current=!0,o(()=>{e.current&&r()})}),[r])}export{c as useOnUnmount};

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

@@ -1,6 +0,6 @@
-import { MutableRefObject } from 'react';
+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(containers: ContainerInput | (() => ContainerInput), cb: (event: MouseEvent | PointerEvent | FocusEvent, target: HTMLElement) => void, enabled?: boolean): void;
+export declare function useOutsideClick(containers: ContainerInput | (() => ContainerInput), cb: (event: MouseEvent | PointerEvent | FocusEvent | TouchEvent, target: HTMLElement) => void, enabled?: boolean): void;
 export {};

dist/hooks/use-outside-click.js

@@ -1,1 +0,1 @@
-import{useEffect as d,useRef as c}from"react";import{FocusableMode as p,isFocusableElement as C}from'../utils/focus-management.js';import{useDocumentEvent as f}from'./use-document-event.js';import{useWindowEvent as M}from'./use-window-event.js';function H(s,m,l=!0){let i=c(!1);d(()=>{requestAnimationFrame(()=>{i.current=l})},[l]);function a(e,o){if(!i.current||e.defaultPrevented)return;let n=o(e);if(n===null||!n.getRootNode().contains(n)||!n.isConnected)return;let E=function r(t){return typeof t=="function"?r(t()):Array.isArray(t)||t instanceof Set?t:[t]}(s);for(let r of E){if(r===null)continue;let t=r instanceof HTMLElement?r:r.current;if(t!=null&&t.contains(n)||e.composed&&e.composedPath().includes(t))return}return!C(n,p.Loose)&&n.tabIndex!==-1&&e.preventDefault(),m(e,n)}let u=c(null);f("mousedown",e=>{var o,n;i.current&&(u.current=((n=(o=e.composedPath)==null?void 0:o.call(e))==null?void 0:n[0])||e.target)},!0),f("click",e=>{u.current&&(a(e,()=>u.current),u.current=null)},!0),M("blur",e=>a(e,()=>window.document.activeElement instanceof HTMLIFrameElement?window.document.activeElement:null),!0)}export{H as useOutsideClick};
+import{useEffect as d,useRef as f}from"react";import{FocusableMode as p,isFocusableElement as C}from'../utils/focus-management.js';import{isMobile as M}from'../utils/platform.js';import{useDocumentEvent as l}from'./use-document-event.js';import{useWindowEvent as T}from'./use-window-event.js';function w(s,m,a=!0){let i=f(!1);d(()=>{requestAnimationFrame(()=>{i.current=a})},[a]);function c(e,r){if(!i.current||e.defaultPrevented)return;let t=r(e);if(t===null||!t.getRootNode().contains(t)||!t.isConnected)return;let E=function u(n){return typeof n=="function"?u(n()):Array.isArray(n)||n instanceof Set?n:[n]}(s);for(let u of E){if(u===null)continue;let n=u instanceof HTMLElement?u:u.current;if(n!=null&&n.contains(t)||e.composed&&e.composedPath().includes(n))return}return!C(t,p.Loose)&&t.tabIndex!==-1&&e.preventDefault(),m(e,t)}let o=f(null);l("pointerdown",e=>{var r,t;i.current&&(o.current=((t=(r=e.composedPath)==null?void 0:r.call(e))==null?void 0:t[0])||e.target)},!0),l("mousedown",e=>{var r,t;i.current&&(o.current=((t=(r=e.composedPath)==null?void 0:r.call(e))==null?void 0:t[0])||e.target)},!0),l("click",e=>{M()||o.current&&(c(e,()=>o.current),o.current=null)},!0),l("touchend",e=>c(e,()=>e.target instanceof HTMLElement?e.target:null),!0),T("blur",e=>c(e,()=>window.document.activeElement instanceof HTMLIFrameElement?window.document.activeElement:null),!0)}export{w as useOutsideClick};

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-root-containers.d.ts

@@ -1,10 +0,15 @@
-import React, { MutableRefObject } from 'react';
-export declare function useRootContainers({ defaultContainers, portals, }?: {
+import React, { type MutableRefObject } from 'react';
+export declare function useRootContainers({ defaultContainers, portals, mainTreeNodeRef: _mainTreeNodeRef, }?: {
     defaultContainers?: (HTMLElement | null | MutableRefObject<HTMLElement | null>)[];
     portals?: MutableRefObject<HTMLElement[]>;
+    mainTreeNodeRef?: MutableRefObject<HTMLElement | null>;
 }): {
     resolveContainers: () => HTMLElement[];
     contains: (element: HTMLElement) => boolean;
-    mainTreeNodeRef: React.MutableRefObject<HTMLDivElement | null>;
-    MainTreeNode: () => JSX.Element;
+    mainTreeNodeRef: React.MutableRefObject<HTMLElement | null>;
+    MainTreeNode: () => React.JSX.Element | null;
 };
+export declare function useMainTreeNode(): {
+    mainTreeNodeRef: React.MutableRefObject<HTMLElement | null>;
+    MainTreeNode: () => React.JSX.Element;
+};

dist/hooks/use-root-containers.js

@@ -1,1 +0,1 @@
-import s,{useRef as a,useMemo as m}from"react";import{Hidden as d,Features as M}from'../internal/hidden.js';import{useEvent as l}from'./use-event.js';import{useOwnerDocument as H}from'./use-owner.js';function p({defaultContainers:f=[],portals:o}={}){let t=a(null),i=H(t),u=l(()=>{var r;let n=[];for(let e of f)e!==null&&(e instanceof HTMLElement?n.push(e):"current"in e&&e.current instanceof HTMLElement&&n.push(e.current));if(o!=null&&o.current)for(let e of o.current)n.push(e);for(let e of(r=i==null?void 0:i.querySelectorAll("html > *, body > *"))!=null?r:[])e!==document.body&&e!==document.head&&e instanceof HTMLElement&&e.id!=="headlessui-portal-root"&&(e.contains(t.current)||n.some(c=>e.contains(c))||n.push(e));return n});return{resolveContainers:u,contains:l(n=>u().some(r=>r.contains(n))),mainTreeNodeRef:t,MainTreeNode:m(()=>function(){return s.createElement(d,{features:M.Hidden,ref:t})},[t])}}export{p as useRootContainers};
+import m,{useMemo as d,useRef as M}from"react";import{Hidden as H,HiddenFeatures as T}from'../internal/hidden.js';import{useEvent as E}from'./use-event.js';import{useOwnerDocument as b}from'./use-owner.js';function j({defaultContainers:o=[],portals:r,mainTreeNodeRef:u}={}){var f;let t=M((f=u==null?void 0:u.current)!=null?f:null),l=b(t),c=E(()=>{var i,s,a;let n=[];for(let e of o)e!==null&&(e instanceof HTMLElement?n.push(e):"current"in e&&e.current instanceof HTMLElement&&n.push(e.current));if(r!=null&&r.current)for(let e of r.current)n.push(e);for(let e of(i=l==null?void 0:l.querySelectorAll("html > *, body > *"))!=null?i:[])e!==document.body&&e!==document.head&&e instanceof HTMLElement&&e.id!=="headlessui-portal-root"&&(e.contains(t.current)||e.contains((a=(s=t.current)==null?void 0:s.getRootNode())==null?void 0:a.host)||n.some(L=>e.contains(L))||n.push(e));return n});return{resolveContainers:c,contains:E(n=>c().some(i=>i.contains(n))),mainTreeNodeRef:t,MainTreeNode:d(()=>function(){return u!=null?null:m.createElement(H,{features:T.Hidden,ref:t})},[t,u])}}function y(){let o=M(null);return{mainTreeNodeRef:o,MainTreeNode:d(()=>function(){return m.createElement(H,{features:T.Hidden,ref:o})},[o])}}export{y as useMainTreeNode,j as useRootContainers};

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

@@ -1,1 +0,1 @@
-import{useState as r,useEffect as o}from"react";import{env as t}from'../utils/env.js';function l(){let[e,f]=r(t.isHandoffComplete);return e&&t.isHandoffComplete===!1&&f(!1),o(()=>{e!==!0&&f(!0)},[e]),o(()=>t.handoff(),[]),e}export{l 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-store.d.ts

@@ -1,2 +0,2 @@
-import { Store } from '../utils/store.js';
+import type { Store } from '../utils/store.js';
 export declare function useStore<T>(store: Store<T, any>): T;

dist/hooks/use-store.js

@@ -1,1 +0,1 @@
-import{useSyncExternalStore as r}from'../use-sync-external-store-shim/index.js';function S(t){return r(t.subscribe,t.getSnapshot,t.getSnapshot)}export{S as useStore};
+import{useSyncExternalStore as e}from"react";function o(t){return e(t.subscribe,t.getSnapshot,t.getSnapshot)}export{o as useStore};

dist/hooks/use-sync-refs.js

@@ -1,1 +0,1 @@
-import{useRef as l,useEffect 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=l(t);i(()=>{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};
+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-text-value.d.ts

@@ -1,2 +0,2 @@
-import { MutableRefObject } from 'react';
+import { type MutableRefObject } from 'react';
 export declare function useTextValue(element: MutableRefObject<HTMLElement | null>): () => string;

dist/hooks/use-text-value.js

@@ -1,1 +0,1 @@
-import{useRef as l}from"react";import{getTextValue as i}from'../utils/get-text-value.js';import{useEvent as o}from'./use-event.js';function b(c){let t=l(""),r=l("");return o(()=>{let e=c.current;if(!e)return"";let u=e.innerText;if(t.current===u)return r.current;let n=i(e).trim().toLowerCase();return t.current=u,r.current=n,n})}export{b as useTextValue};
+import{useRef as l}from"react";import{getTextValue as i}from'../utils/get-text-value.js';import{useEvent as o}from'./use-event.js';function s(c){let t=l(""),r=l("");return o(()=>{let e=c.current;if(!e)return"";let u=e.innerText;if(t.current===u)return r.current;let n=i(e).trim().toLowerCase();return t.current=u,r.current=n,n})}export{s as useTextValue};

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[];
@@ -6,0 +7,0 @@ enterFrom: string[];

dist/hooks/use-transition.js

@@ -1,1 +0,1 @@
-import{transition as d}from'../components/transitions/utils/transition.js';import{disposables as l}from'../utils/disposables.js';import{useDisposables as f}from'./use-disposables.js';import{useIsMounted as m}from'./use-is-mounted.js';import{useIsoMorphicEffect as p}from'./use-iso-morphic-effect.js';import{useLatestValue as b}from'./use-latest-value.js';function D({container:i,direction:t,classes:o,onStart:s,onStop:u}){let a=m(),c=f(),r=b(t);p(()=>{let e=l();c.add(e.dispose);let n=i.current;if(n&&r.current!=="idle"&&a.current)return e.dispose(),s.current(r.current),e.add(d(n,o.current,r.current==="enter",()=>{e.dispose(),u.current(r.current)})),e.dispose},[t])}export{D 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.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 m,useRef as E}from"react";import{getOwnerDocument as T}from'../utils/owner.js';import{useIsoMorphicEffect as N}from'./use-iso-morphic-effect.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]),N(()=>{if(!e||!c)return;let n=T(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};

dist/hooks/use-watch.js

@@ -1,1 +0,1 @@
-import{useEffect as s,useRef as f}from"react";import{useEvent as i}from'./use-event.js';function m(u,t){let e=f([]),r=i(u);s(()=>{let o=[...e.current];for(let[n,a]of t.entries())if(e.current[n]!==a){let l=r(t,o);return e.current=t,l}},[r,...t])}export{m as useWatch};
+import{useEffect as f,useRef as s}from"react";import{useEvent as i}from'./use-event.js';function m(u,t){let e=s([]),r=i(u);f(()=>{let o=[...e.current];for(let[a,l]of t.entries())if(e.current[a]!==l){let n=r(t,o);return e.current=t,n}},[r,...t])}export{m as useWatch};

dist/index.d.ts

@@ -1,13 +0,25 @@
-import 'client-only';
+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/transitions/transition.js';
-export { Portal } from './components/portal/portal.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 @@
-import"client-only";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/radio-group/radio-group.js';export*from'./components/switch/switch.js';export*from'./components/tabs/tabs.js';export*from'./components/transitions/transition.js';import{Portal as d}from'./components/portal/portal.js';export{d as Portal};
+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{Hidden as c,Features as l}from'./hidden.js';function p({onFocus:n}){let[r,o]=s(!0);return r?i.createElement(c,{as:"button",type:"button",features:l.Focusable,onFocus:a=>{a.preventDefault();let e,u=50;function t(){if(u--<=0){e&&cancelAnimationFrame(e);return}if(n()){o(!1),cancelAnimationFrame(e);return}e=requestAnimationFrame(t)}e=requestAnimationFrame(t)}}):null}export{p 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/hidden.d.ts

@@ -1,6 +0,6 @@
-import { ElementType, Ref } from 'react';
-import { Props } from '../types.js';
-import { HasDisplayName, RefProp } from '../utils/render.js';
+import type { ElementType, Ref } from 'react';
+import type { Props } from '../types.js';
+import { type HasDisplayName, type RefProp } from '../utils/render.js';
 declare let DEFAULT_VISUALLY_HIDDEN_TAG: "div";
-export declare enum Features {
+export declare enum HiddenFeatures {
     None = 1,
@@ -10,4 +10,6 @@ Focusable = 2,
 }
-export type HiddenProps<TTag extends ElementType> = Props<TTag, {}, never, {
-    features?: Features;
+type HiddenRenderPropArg = {};
+type HiddenPropsWeControl = never;
+export type HiddenProps<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG> = Props<TTag, HiddenRenderPropArg, HiddenPropsWeControl, {
+    features?: HiddenFeatures;
 }>;
@@ -14,0 +16,0 @@ declare function VisuallyHidden<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG>(props: HiddenProps<TTag>, ref: Ref<HTMLElement>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

dist/internal/hidden.js

@@ -1,1 +0,1 @@
-import{forwardRefWithAs as r,render as i}from'../utils/render.js';let a="div";var p=(e=>(e[e.None=1]="None",e[e.Focusable=2]="Focusable",e[e.Hidden=4]="Hidden",e))(p||{});function s(t,o){let{features:n=1,...e}=t,d={ref:o,"aria-hidden":(n&2)===2?!0:void 0,style:{position:"fixed",top:1,left:1,width:1,height:0,padding:0,margin:-1,overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",borderWidth:"0",...(n&4)===4&&(n&2)!==2&&{display:"none"}}};return i({ourProps:d,theirProps:e,slot:{},defaultTag:a,name:"Hidden"})}let c=r(s);export{p as Features,c as Hidden};
+import{forwardRefWithAs as i,render as p}from'../utils/render.js';let a="div";var s=(e=>(e[e.None=1]="None",e[e.Focusable=2]="Focusable",e[e.Hidden=4]="Hidden",e))(s||{});function l(t,r){var n;let{features:d=1,...e}=t,o={ref:r,"aria-hidden":(d&2)===2?!0:(n=e["aria-hidden"])!=null?n:void 0,hidden:(d&4)===4?!0:void 0,style:{position:"fixed",top:1,left:1,width:1,height:0,padding:0,margin:-1,overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",borderWidth:"0",...(d&4)===4&&(d&2)!==2&&{display:"none"}}};return p({ourProps:o,theirProps:e,slot:{},defaultTag:a,name:"Hidden"})}let T=i(l);export{T as Hidden,s as HiddenFeatures};

dist/internal/open-closed.d.ts

@@ -1,2 +0,2 @@
-import { ReactNode, ReactElement } from 'react';
+import { type ReactElement, type ReactNode } from 'react';
 export declare enum State {
@@ -3,0 +3,0 @@ Open = 1,

dist/internal/open-closed.js

@@ -1,1 +0,1 @@
-import l,{createContext as t,useContext as p}from"react";let n=t(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 C(){return p(n)}function c({value:o,children:r}){return l.createElement(n.Provider,{value:o},r)}export{c as OpenClosedProvider,d as State,C 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/internal/stack-context.d.ts

@@ -1,2 +0,2 @@
-import { MutableRefObject, ReactNode } from 'react';
+import React, { type MutableRefObject, type ReactNode } from 'react';
 type OnUpdate = (message: StackMessage, type: string, element: MutableRefObject<HTMLElement | null>) => void;
@@ -14,3 +14,3 @@ export declare enum StackMessage {
     enabled?: boolean;
-}): JSX.Element;
+}): React.JSX.Element;
 export {};

dist/internal/stack-context.js

@@ -1,1 +0,1 @@
-import d,{createContext as c,useContext as m}from"react";import{useIsoMorphicEffect as f}from'../hooks/use-iso-morphic-effect.js';import{useEvent as p}from'../hooks/use-event.js';let a=c(()=>{});a.displayName="StackContext";var s=(e=>(e[e.Add=0]="Add",e[e.Remove=1]="Remove",e))(s||{});function x(){return m(a)}function M({children:i,onUpdate:r,type:e,element:n,enabled:u}){let l=x(),o=p((...t)=>{r==null||r(...t),l(...t)});return f(()=>{let t=u===void 0||u===!0;return t&&o(0,e,n),()=>{t&&o(1,e,n)}},[o,e,n,u]),d.createElement(a.Provider,{value:o},i)}export{s as StackMessage,M as StackProvider,x as useStackContext};
+import d,{createContext as c,useContext as m}from"react";import{useEvent as p}from'../hooks/use-event.js';import{useIsoMorphicEffect as f}from'../hooks/use-iso-morphic-effect.js';let a=c(()=>{});a.displayName="StackContext";var s=(e=>(e[e.Add=0]="Add",e[e.Remove=1]="Remove",e))(s||{});function x(){return m(a)}function b({children:i,onUpdate:r,type:e,element:n,enabled:u}){let l=x(),o=p((...t)=>{r==null||r(...t),l(...t)});return f(()=>{let t=u===void 0||u===!0;return t&&o(0,e,n),()=>{t&&o(1,e,n)}},[o,e,n,u]),d.createElement(a.Provider,{value:o},i)}export{s as StackMessage,b as StackProvider,x as useStackContext};

dist/types.d.ts

@@ -1,2 +0,2 @@
-import { ReactNode, ReactElement, JSXElementConstructor } from 'react';
+import type { JSXElementConstructor, ReactElement, ReactNode } from 'react';
 export type ReactTag = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
@@ -10,3 +10,3 @@ declare let __: "1D45E01E-AF44-47C4-988A-19A94EBAF55C";
 type PropsWeControl = 'as' | 'children' | 'refName' | 'className';
-type CleanProps<TTag extends ReactTag, TOmitableProps extends PropertyKey = never> = Omit<PropsOf<TTag>, TOmitableProps | PropsWeControl>;
+type CleanProps<TTag extends ReactTag, TOmittableProps extends PropertyKey = never> = Omit<PropsOf<TTag>, TOmittableProps | PropsWeControl>;
 type OurProps<TTag extends ReactTag, TSlot> = {
@@ -21,3 +21,3 @@ as?: TTag;
 } : {};
-export type Props<TTag extends ReactTag, TSlot = {}, TOmitableProps extends PropertyKey = never, Overrides = {}> = CleanProps<TTag, TOmitableProps | keyof Overrides> & OurProps<TTag, TSlot> & ClassNameOverride<TTag, TSlot> & Overrides;
+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> = {
@@ -27,4 +27,3 @@ [P in Exclude<keyof T, keyof U>]?: never;
 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 ByComparator<T> = (T extends null ? string : keyof T & string) | ((a: T, b: T) => boolean);
 export type EnsureArray<T> = T extends any[] ? T : Expand<T>[];
 export {};

dist/types.js

@@ -1,1 +0,1 @@
-let a="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

 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(): {
@@ -3,0 +15,0 @@ addEventListener<TEventName extends keyof WindowEventMap>(element: HTMLElement | Window | Document, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions): () => void;

dist/utils/disposables.js

@@ -1,1 +0,1 @@
-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.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};
+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 {
@@ -42,3 +46,3 @@ /** The element itself must be focusable. */
     relativeTo: HTMLElement | null;
-    skipElements: HTMLElement[];
+    skipElements: (HTMLElement | MutableRefObject<HTMLElement | null>)[];
 }>): FocusResult;

dist/utils/focus-management.js

@@ -1,1 +0,1 @@
-import{disposables as b}from'./disposables.js';import{match as L}from'./match.js';import{getOwnerDocument as m}from'./owner.js';let c=["[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 M=(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))(M||{}),N=(o=>(o[o.Error=0]="Error",o[o.Overflow=1]="Overflow",o[o.Success=2]="Success",o[o.Underflow=3]="Underflow",o))(N||{}),F=(t=>(t[t.Previous=-1]="Previous",t[t.Next=1]="Next",t))(F||{});function f(e=document.body){return e==null?[]:Array.from(e.querySelectorAll(c)).sort((r,t)=>Math.sign((r.tabIndex||Number.MAX_SAFE_INTEGER)-(t.tabIndex||Number.MAX_SAFE_INTEGER)))}var T=(t=>(t[t.Strict=0]="Strict",t[t.Loose=1]="Loose",t))(T||{});function h(e,r=0){var t;return e===((t=m(e))==null?void 0:t.body)?!1:L(r,{[0](){return e.matches(c)},[1](){let l=e;for(;l!==null;){if(l.matches(c))return!0;l=l.parentElement}return!1}})}function D(e){let r=m(e);b().nextFrame(()=>{r&&!h(r.activeElement,0)&&y(e)})}var w=(t=>(t[t.Keyboard=0]="Keyboard",t[t.Mouse=1]="Mouse",t))(w||{});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 y(e){e==null||e.focus({preventScroll:!0})}let S=["textarea","input"].join(",");function H(e){var r,t;return(t=(r=e==null?void 0:e.matches)==null?void 0:r.call(e,S))!=null?t:!1}function I(e,r=t=>t){return e.slice().sort((t,l)=>{let o=r(t),i=r(l);if(o===null||i===null)return 0;let n=o.compareDocumentPosition(i);return n&Node.DOCUMENT_POSITION_FOLLOWING?-1:n&Node.DOCUMENT_POSITION_PRECEDING?1:0})}function _(e,r){return O(f(),r,{relativeTo:e})}function O(e,r,{sorted:t=!0,relativeTo:l=null,skipElements:o=[]}={}){let i=Array.isArray(e)?e.length>0?e[0].ownerDocument:document:e.ownerDocument,n=Array.isArray(e)?t?I(e):e:f(e);o.length>0&&n.length>1&&(n=n.filter(s=>!o.includes(s))),l=l!=null?l:i.activeElement;let E=(()=>{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,n.indexOf(l))-1;if(r&4)return Math.max(0,n.indexOf(l))+1;if(r&8)return n.length-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),p=r&32?{preventScroll:!0}:{},d=0,a=n.length,u;do{if(d>=a||d+a<=0)return 0;let s=x+d;if(r&16)s=(s+a)%a;else{if(s<0)return 3;if(s>=a)return 1}u=n[s],u==null||u.focus(p),d+=E}while(u!==i.activeElement);return r&6&&H(u)&&u.select(),2}export{M as Focus,N as FocusResult,T as FocusableMode,y as focusElement,_ as focusFrom,O as focusIn,f as getFocusableElements,h as isFocusableElement,D as restoreFocusIfNecessary,I 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

 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 @@
-import{env as n}from'./env.js';function e(r){return n.isServer?null:r instanceof Node?r.ownerDocument:r!=null&&r.hasOwnProperty("current")&&r.current instanceof Node?r.current.ownerDocument:document}export{e 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, Ref } from 'react';
-import { Props, XOR, __, Expand } from '../types.js';
-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,11 +24,11 @@ None = 0,
 }
-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 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, }: {
+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>> & {
@@ -43,3 +43,18 @@ ref?: Ref<HTMLElement | ElementType>;
     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 = {
@@ -51,2 +66,3 @@ displayName: string;
 } : never;
+export declare function mergeProps<T extends Props<any, any>[]>(...listOfProps: T): Props<any, any>;
 /**
@@ -53,0 +69,0 @@ * This is a hack, but basically we want to keep the full 'API' of the component, but we do want to

dist/utils/render.js

@@ -1,4 +0,4 @@
-import{Fragment as T,cloneElement as x,createElement as E,forwardRef as b,isValidElement as h}from"react";import{classNames as F}from'./class-names.js';import{match as P}from'./match.js';var S=(a=>(a[a.None=0]="None",a[a.RenderStrategy=1]="RenderStrategy",a[a.Static=2]="Static",a))(S||{}),j=(e=>(e[e.Unmount=0]="Unmount",e[e.Hidden=1]="Hidden",e))(j||{});function X({ourProps:r,theirProps:t,slot:e,defaultTag:a,features:s,visible:n=!0,name:f}){let o=N(t,r);if(n)return c(o,e,a,f);let u=s!=null?s:0;if(u&2){let{static:l=!1,...p}=o;if(l)return c(p,e,a,f)}if(u&1){let{unmount:l=!0,...p}=o;return P(l?0:1,{[0](){return null},[1](){return c({...p,hidden:!0,style:{display:"none"}},e,a,f)}})}return c(o,e,a,f)}function c(r,t={},e,a){let{as:s=e,children:n,refName:f="ref",...o}=g(r,["unmount","static"]),u=r.ref!==void 0?{[f]:r.ref}:{},l=typeof n=="function"?n(t):n;"className"in o&&o.className&&typeof o.className=="function"&&(o.className=o.className(t));let p={};if(t){let i=!1,m=[];for(let[y,d]of Object.entries(t))typeof d=="boolean"&&(i=!0),d===!0&&m.push(y);i&&(p["data-headlessui-state"]=m.join(" "))}if(s===T&&Object.keys(R(o)).length>0){if(!h(l)||Array.isArray(l)&&l.length>1)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(o).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(`
-`));let i=l.props,m=typeof(i==null?void 0:i.className)=="function"?(...d)=>F(i==null?void 0:i.className(...d),o.className):F(i==null?void 0:i.className,o.className),y=m?{className:m}:{};return x(l,Object.assign({},N(l.props,R(g(o,["ref"]))),p,u,w(l.ref,u.ref),y))}return E(s,Object.assign({},g(o,["ref"]),s!==T&&u,s!==T&&p),l)}function w(...r){return{ref:r.every(t=>t==null)?void 0:t=>{for(let e of r)e!=null&&(typeof e=="function"?e(t):e.current=t)}}}function N(...r){var a;if(r.length===0)return{};if(r.length===1)return r[0];let t={},e={};for(let s of r)for(let n in s)n.startsWith("on")&&typeof s[n]=="function"?((a=e[n])!=null||(e[n]=[]),e[n].push(s[n])):t[n]=s[n];if(t.disabled||t["aria-disabled"])return Object.assign(t,Object.fromEntries(Object.keys(e).map(s=>[s,void 0])));for(let s in e)Object.assign(t,{[s](n,...f){let o=e[s];for(let u of o){if((n instanceof Event||(n==null?void 0:n.nativeEvent)instanceof Event)&&n.defaultPrevented)return;u(n,...f)}}});return t}function D(r){var t;return Object.assign(b(r),{displayName:(t=r.displayName)!=null?t:r.name})}function R(r){let t=Object.assign({},r);for(let e in t)t[e]===void 0&&delete t[e];return t}function g(r,t=[]){let e=Object.assign({},r);for(let a of t)a in e&&delete e[a];return e}export{S as Features,j as RenderStrategy,R as compact,D as forwardRefWithAs,X 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};

dist/utils/stable-collection.d.ts

 import * as React from 'react';
 export declare function StableCollection({ children }: {
     children: React.ReactNode | React.ReactNode[];
-}): JSX.Element;
+}): React.JSX.Element;
 export declare function useStableCollectionIndex(group: string): number;

dist/utils/start-transition.d.ts

@@ -1,1 +0,2 @@
-export declare let startTransition: any;
+import React from 'react';
+export declare let startTransition: typeof React.startTransition;

package.json

 {
   "name": "@headlessui/react",
-  "version": "0.0.0-insiders.0a9276d",
+  "version": "0.0.0-insiders.0bd8c47",
   "description": "A set of completely unstyled, fully accessible UI components for React, designed to integrate beautifully with Tailwind CSS.",
@@ -14,3 +14,6 @@ "main": "dist/index.cjs",
   "exports": {
-    "types": "./dist/index.d.ts",
+    "types": {
+      "import": "./dist/index.d.ts",
+      "require": "./dist/index.d.cts"
+    },
     "import": "./dist/headlessui.esm.js",
@@ -38,21 +41,24 @@ "require": "./dist/index.cjs"
     "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.5",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "snapshot-diff": "^0.10.0"
   },
   "dependencies": {
-    "client-only": "^0.0.1"
+    "@floating-ui/react": "^0.26.13",
+    "@tanstack/react-virtual": "3.5.0",
+    "@react-aria/focus": "^3.16.2",
+    "@react-aria/interactions": "^3.21.1"
   }
 }

New alerts

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

902281

increased by71.37%

Dev dependency count

6

decreased by-14.29%

Number of package files

295

increased by83.23%

Lines of code

16346

increased by77.12%

Worsened metrics

Dependency count

6

increased by100%

Number of low supply chain risk alerts

4

increased by300%

Dependency changes

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

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

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

• + Added@tanstack/react-virtual@3.5.0

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

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

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

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

• + Added@floating-ui/utils@0.2.2(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.2(transitive)

• - Removedclient-only@^0.0.1

• - Removedclient-only@0.0.1(transitive)