@headlessui/react - npm Package Compare versions

Comparing version 0.0.0-insiders.475db7c to 0.0.0-insiders.479853d

dist/components/combobox/combobox.d.ts

 import React, { type ElementType, type Ref } from 'react';
-import type { ByComparator, EnsureArray, Expand, Props } from '../../types.js';
+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,39 +16,12 @@ 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;
@@ -55,57 +31,65 @@ name?: string;
     virtual?: {
-        options: TValue[];
-        disabled?: (value: TValue) => boolean;
+        options: NoInfer<TValue>[];
+        disabled?: (value: NoInfer<TValue>) => boolean;
     } | null;
-};
-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;
+    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;
@@ -115,8 +99,5 @@ value: TType;
 }>;
-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;
+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, 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;
+    <TValue, TMultiple extends boolean | undefined = false, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, TMultiple, TTag> & RefProp<typeof ComboboxFn>): JSX.Element;
 }
@@ -129,4 +110,3 @@ export interface _internal_ComponentComboboxButton extends HasDisplayName {
 }
-export interface _internal_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 {
 }
@@ -140,9 +120,20 @@ export interface _internal_ComponentComboboxOptions extends HasDisplayName {
 declare let ComboboxRoot: _internal_ComponentCombobox;
+export declare let ComboboxButton: _internal_ComponentComboboxButton;
+export declare let ComboboxInput: _internal_ComponentComboboxInput;
+/** @deprecated use `<Label>` instead of `<ComboboxLabel>` */
+export declare let ComboboxLabel: _internal_ComponentComboboxLabel;
+export declare let ComboboxOptions: _internal_ComponentComboboxOptions;
+export declare let ComboboxOption: _internal_ComponentComboboxOption;
 export declare let Combobox: _internal_ComponentCombobox & {
+    /** @deprecated use `<ComboboxInput>` instead of `<Combobox.Input>` */
     Input: _internal_ComponentComboboxInput;
+    /** @deprecated use `<ComboboxButton>` instead of `<Combobox.Button>` */
     Button: _internal_ComponentComboboxButton;
+    /** @deprecated use `<Label>` instead of `<Combobox.Label>` */
     Label: _internal_ComponentComboboxLabel;
+    /** @deprecated use `<ComboboxOptions>` instead of `<Combobox.Options>` */
     Options: _internal_ComponentComboboxOptions;
+    /** @deprecated use `<ComboboxOption>` instead of `<Combobox.Option>` */
     Option: _internal_ComponentComboboxOption;
 };
 export {};

dist/components/combobox/combobox.js

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

dist/components/description/description.d.ts

 import React, { type ElementType, type ReactNode, type Ref } from 'react';
-import { Props } from '../../types.js';
+import type { Props } from '../../types.js';
 import { type HasDisplayName, type RefProp } from '../../utils/render.js';
@@ -9,4 +9,6 @@ interface SharedData {
 }
+export declare function useDescribedBy(): string | undefined;
 interface DescriptionProviderProps extends SharedData {
     children: ReactNode;
+    value?: string | undefined;
 }
@@ -19,3 +21,3 @@ 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;
+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 {
@@ -22,0 +24,0 @@ <TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG>(props: DescriptionProps<TTag> & RefProp<typeof DescriptionFn>): JSX.Element;

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{useEvent as P}from'../../hooks/use-event.js';import{useId as g}from'../../hooks/use-id.js';import{useIsoMorphicEffect as E}from'../../hooks/use-iso-morphic-effect.js';import{useSyncRefs as x}from'../../hooks/use-sync-refs.js';import{forwardRefWithAs as y,render as R}from'../../utils/render.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 w(){let[r,t]=T([]);return[r.length>0?r.join(" "):void 0,l(()=>function(e){let i=P(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 I="p";function S(r,t){let a=g(),{id:e=`headlessui-description-${a}`,...i}=r,n=f(),s=x(t);E(()=>n.register(e),[e,n.register]);let o={ref:s,...n.props,id:e};return R({ourProps:o,theirProps:i,slot:n.slot||{},defaultTag:I,name:n.name||"Description"})}let h=y(S),G=Object.assign(h,{});export{G as Description,w 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

 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 { _internal_ComponentDescription } from '../description/description.js';
+import { type _internal_ComponentDescription } from '../description/description.js';
 declare let DEFAULT_DIALOG_TAG: "div";
-interface DialogRenderPropArg {
+type DialogRenderPropArg = {
     open: boolean;
-}
+};
 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;
@@ -16,43 +16,24 @@ onClose(value: boolean): void;
     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 let DEFAULT_OVERLAY_TAG: "div";
-interface 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;
-declare let DEFAULT_BACKDROP_TAG: "div";
-interface 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;
+declare function DialogFn<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(props: DialogProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element;
 declare let DEFAULT_PANEL_TAG: "div";
-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;
+};
+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;
 }
-export interface _internal_ComponentDialogBackdrop extends HasDisplayName {
-    <TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(props: DialogBackdropProps<TTag> & RefProp<typeof BackdropFn>): JSX.Element;
-}
 export interface _internal_ComponentDialogPanel extends HasDisplayName {
     <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DialogPanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element;
 }
-export interface _internal_ComponentDialogOverlay extends HasDisplayName {
-    <TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(props: DialogOverlayProps<TTag> & RefProp<typeof OverlayFn>): JSX.Element;
-}
 export interface _internal_ComponentDialogTitle extends HasDisplayName {
@@ -63,9 +44,14 @@ <TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(props: DialogTitleProps<TTag> & RefProp<typeof TitleFn>): JSX.Element;
 }
+export declare let DialogPanel: _internal_ComponentDialogPanel;
+export declare let DialogTitle: _internal_ComponentDialogTitle;
+/** @deprecated use `<Description>` instead of `<DialogDescription>` */
+export declare let DialogDescription: _internal_ComponentDialogDescription;
 export declare let Dialog: _internal_ComponentDialog & {
-    Backdrop: _internal_ComponentDialogBackdrop;
+    /** @deprecated use `<DialogPanel>` instead of `<Dialog.Panel>` */
     Panel: _internal_ComponentDialogPanel;
-    Overlay: _internal_ComponentDialogOverlay;
+    /** @deprecated use `<DialogTitle>` instead of `<Dialog.Title>` */
     Title: _internal_ComponentDialogTitle;
+    /** @deprecated use `<Description>` instead of `<Dialog.Description>` */
     Description: _internal_ComponentDialogDescription;
 };
 export {};

dist/components/dialog/dialog.js

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

dist/components/disclosure/disclosure.d.ts

@@ -7,27 +7,35 @@ import React, { type ElementType, type MutableRefObject, type Ref } from 'react';
 }>;
-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;
+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 {
@@ -42,6 +50,10 @@ <TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG>(props: DisclosureProps<TTag> & RefProp<typeof DisclosureFn>): JSX.Element;
 }
+export declare let DisclosureButton: _internal_ComponentDisclosureButton;
+export declare let DisclosurePanel: _internal_ComponentDisclosurePanel;
 export declare let Disclosure: _internal_ComponentDisclosure & {
+    /** @deprecated use `<DisclosureButton>` instead of `<Disclosure.Button>` */
     Button: _internal_ComponentDisclosureButton;
+    /** @deprecated use `<DisclosurePanel>` instead of `<Disclosure.Panel>` */
     Panel: _internal_ComponentDisclosurePanel;
 };
 export {};

dist/components/disclosure/disclosure.js

@@ -1,1 +0,1 @@
-import E,{createContext as I,Fragment as H,useContext as x,useEffect as h,useMemo as S,useReducer as G,useRef as R}from"react";import{useEvent as A}from'../../hooks/use-event.js';import{useId as U}from'../../hooks/use-id.js';import{useResolveButtonType as j}from'../../hooks/use-resolve-button-type.js';import{optionalRef as W,useSyncRefs as L}from'../../hooks/use-sync-refs.js';import{OpenClosedProvider as $,State as b,useOpenClosed as J}from'../../internal/open-closed.js';import{isDisabledReactIssue7711 as X}from'../../utils/bugs.js';import{match as O}from'../../utils/match.js';import{getOwnerDocument as q}from'../../utils/owner.js';import{Features as w,forwardRefWithAs as B,render as k,useMergeRefsFn as N}from'../../utils/render.js';import{startTransition as z}from'../../utils/start-transition.js';import{Keys as g}from'../keyboard.js';var Q=(o=>(o[o.Open=0]="Open",o[o.Closed=1]="Closed",o))(Q||{}),V=(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))(V||{});let Y={[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=I(null);M.displayName="DisclosureContext";function _(e){let n=x(M);if(n===null){let o=new Error(`<${e} /> is missing a parent <Disclosure /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,_),o}return n}let v=I(null);v.displayName="DisclosureAPIContext";function K(e){let n=x(v);if(n===null){let o=new Error(`<${e} /> is missing a parent <Disclosure /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,K),o}return n}let F=I(null);F.displayName="DisclosurePanelContext";function Z(){return x(F)}function ee(e,n){return O(n.type,Y,e,n)}let te=H;function ne(e,n){let{defaultOpen:o=!1,...i}=e,f=R(null),l=L(n,W(u=>{f.current=u},e.as===void 0||e.as===H)),t=R(null),d=R(null),s=G(ee,{disclosureState:o?0:1,linkedPanel:!1,buttonRef:d,panelRef:t,buttonId:null,panelId:null}),[{disclosureState:c,buttonId:a},D]=s,p=A(u=>{D({type:1});let y=q(f);if(!y||!a)return;let r=(()=>u?u instanceof HTMLElement?u:u.current instanceof HTMLElement?u.current:y.getElementById(a):y.getElementById(a))();r==null||r.focus()}),P=S(()=>({close:p}),[p]),T=S(()=>({open:c===0,close:p}),[c,p]),C={ref:l};return E.createElement(M.Provider,{value:s},E.createElement(v.Provider,{value:P},E.createElement($,{value:O(c,{[0]:b.Open,[1]:b.Closed})},k({ourProps:C,theirProps:i,slot:T,defaultTag:te,name:"Disclosure"}))))}let le="button";function oe(e,n){let o=U(),{id:i=`headlessui-disclosure-button-${o}`,...f}=e,[l,t]=_("Disclosure.Button"),d=Z(),s=d===null?!1:d===l.panelId,c=R(null),a=L(c,n,s?null:l.buttonRef),D=N();h(()=>{if(!s)return t({type:2,buttonId:i}),()=>{t({type:2,buttonId:null})}},[i,t,s]);let p=A(r=>{var m;if(s){if(l.disclosureState===1)return;switch(r.key){case g.Space:case g.Enter:r.preventDefault(),r.stopPropagation(),t({type:0}),(m=l.buttonRef.current)==null||m.focus();break}}else switch(r.key){case g.Space:case g.Enter:r.preventDefault(),r.stopPropagation(),t({type:0});break}}),P=A(r=>{switch(r.key){case g.Space:r.preventDefault();break}}),T=A(r=>{var m;X(r.currentTarget)||e.disabled||(s?(t({type:0}),(m=l.buttonRef.current)==null||m.focus()):t({type:0}))}),C=S(()=>({open:l.disclosureState===0}),[l]),u=j(e,c),y=s?{ref:a,type:u,onKeyDown:p,onClick:T}:{ref:a,id:i,type:u,"aria-expanded":l.disclosureState===0,"aria-controls":l.linkedPanel?l.panelId:void 0,onKeyDown:p,onKeyUp:P,onClick:T};return k({mergeRefs:D,ourProps:y,theirProps:f,slot:C,defaultTag:le,name:"Disclosure.Button"})}let re="div",se=w.RenderStrategy|w.Static;function ue(e,n){let o=U(),{id:i=`headlessui-disclosure-panel-${o}`,...f}=e,[l,t]=_("Disclosure.Panel"),{close:d}=K("Disclosure.Panel"),s=N(),c=L(n,l.panelRef,T=>{z(()=>t({type:T?4:5}))});h(()=>(t({type:3,panelId:i}),()=>{t({type:3,panelId:null})}),[i,t]);let a=J(),D=(()=>a!==null?(a&b.Open)===b.Open:l.disclosureState===0)(),p=S(()=>({open:l.disclosureState===0,close:d}),[l,d]),P={ref:c,id:i};return E.createElement(F.Provider,{value:l.panelId},k({mergeRefs:s,ourProps:P,theirProps:f,slot:p,defaultTag:re,features:se,visible:D,name:"Disclosure.Panel"}))}let ie=B(ne),ae=B(oe),pe=B(ue),Ae=Object.assign(ie,{Button:ae,Panel:pe});export{Ae 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,2 +0,2 @@
-import { type ElementType, type MutableRefObject, type Ref } from 'react';
+import React, { type ElementType, type MutableRefObject, type Ref } from 'react';
 import type { Props } from '../../types.js';
@@ -6,22 +6,25 @@ import { type HasDisplayName, type RefProp } from '../../utils/render.js';
 declare let DEFAULT_FOCUS_TRAP_TAG: "div";
-declare enum Features {
+export declare enum FocusTrapFeatures {
     /** No features enabled for the focus trap. */
-    None = 1,
+    None = 0,
     /** Ensure that we move focus initially into the container. */
-    InitialFocus = 2,
+    InitialFocus = 1,
     /** Ensure that pressing `Tab` and `Shift+Tab` is trapped within the container. */
-    TabLock = 4,
+    TabLock = 2,
     /** Ensure that programmatically moving focus outside of the container is disallowed. */
-    FocusLock = 8,
+    FocusLock = 4,
     /** Ensure that we restore the focus when unmounting the focus trap. */
-    RestoreFocus = 16,
-    /** Enable all features. */
-    All = 30
+    RestoreFocus = 8,
+    /** Initial focus should look for the `data-autofocus` */
+    AutoFocus = 16
 }
-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;
+}>;
+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 {
@@ -31,4 +34,5 @@ <TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(props: FocusTrapProps<TTag> & RefProp<typeof FocusTrapFn>): JSX.Element;
 export declare let FocusTrap: _internal_ComponentFocusTrap & {
-    features: typeof Features;
+    /** @deprecated use `FocusTrapFeatures` instead of `FocusTrap.features` */
+    features: typeof FocusTrapFeatures;
 };
 export {};

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

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

dist/components/label/label.d.ts

@@ -7,11 +7,25 @@ import React, { type ElementType, type ReactNode, type Ref } from 'react';
     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;
 };
@@ -18,0 +32,0 @@ declare function LabelFn<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: LabelProps<TTag>, ref: Ref<HTMLLabelElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

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{useEvent as T}from'../../hooks/use-event.js';import{useId as y}from'../../hooks/use-id.js';import{useIsoMorphicEffect as E}from'../../hooks/use-iso-morphic-effect.js';import{useSyncRefs as g}from'../../hooks/use-sync-refs.js';import{forwardRefWithAs as x,render as P}from'../../utils/render.js';let d=m(null);function u(){let a=L(d);if(a===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 a}function F(){let[a,t]=b([]);return[a.length>0?a.join(" "):void 0,f(()=>function(e){let s=T(r=>(t(l=>[...l,r]),()=>t(l=>{let n=l.slice(),p=n.indexOf(r);return p!==-1&&n.splice(p,1),n}))),o=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:o},e.children)},[t])]}let A="label";function h(a,t){let i=y(),{id:e=`headlessui-label-${i}`,passive:s=!1,...o}=a,r=u(),l=g(t);E(()=>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 o&&delete o.onClick),P({ourProps:n,theirProps:o,slot:r.slot||{},defaultTag:A,name:r.name||"Label"})}let v=x(h),B=Object.assign(v,{});export{B as Label,F 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

 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,2 +75,12 @@ value: TType;
 declare function OptionFn<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = Parameters<typeof ListboxRoot>[0]['value']>(props: ListboxOptionProps<TTag, TType>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+declare let DEFAULT_SELECTED_OPTION_TAG: React.ExoticComponent<{
+    children?: React.ReactNode;
+}>;
+type SelectedOptionRenderPropArg = {};
+type SelectedOptionPropsWeControl = never;
+export type ListboxSelectedOptionProps<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG> = Props<TTag, SelectedOptionRenderPropArg, SelectedOptionPropsWeControl, {
+    options: React.ReactNode;
+    placeholder?: React.ReactNode;
+}>;
+declare function SelectedFn<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG>(props: ListboxSelectedOptionProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element;
 export interface _internal_ComponentListbox extends HasDisplayName {
@@ -68,4 +92,3 @@ <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;
 }
-export interface _internal_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 {
 }
@@ -78,9 +101,24 @@ export interface _internal_ComponentListboxOptions extends HasDisplayName {
 }
+export interface _internal_ComponentListboxSelectedOption extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG>(props: ListboxSelectedOptionProps<TTag> & RefProp<typeof SelectedFn>): JSX.Element;
+}
 declare let ListboxRoot: _internal_ComponentListbox;
+export declare let ListboxButton: _internal_ComponentListboxButton;
+/** @deprecated use `<Label>` instead of `<ListboxLabel>` */
+export declare let ListboxLabel: _internal_ComponentListboxLabel;
+export declare let ListboxOptions: _internal_ComponentListboxOptions;
+export declare let ListboxOption: _internal_ComponentListboxOption;
+export declare let ListboxSelectedOption: _internal_ComponentListboxSelectedOption;
 export declare let Listbox: _internal_ComponentListbox & {
+    /** @deprecated use `<ListboxButton>` instead of `<Listbox.Button>` */
     Button: _internal_ComponentListboxButton;
+    /** @deprecated use `<Label>` instead of `<Listbox.Label>` */
     Label: _internal_ComponentListboxLabel;
+    /** @deprecated use `<ListboxOptions>` instead of `<Listbox.Options>` */
     Options: _internal_ComponentListboxOptions;
+    /** @deprecated use `<ListboxOption>` instead of `<Listbox.Option>` */
     Option: _internal_ComponentListboxOption;
+    /** @deprecated use `<ListboxSelectedOption>` instead of `<Listbox.SelectedOption>` */
+    SelectedOption: _internal_ComponentListboxSelectedOption;
 };
 export {};

dist/components/listbox/listbox.js

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

dist/components/menu/menu.d.ts

 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 PropsForFeatures, type RefProp } from '../../utils/render.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;
+}>;
+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 {
@@ -57,7 +87,31 @@ <TTag extends ElementType = typeof DEFAULT_MENU_TAG>(props: MenuProps<TTag> & RefProp<typeof MenuFn>): JSX.Element;
 }
+export interface _internal_ComponentMenuSection extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_SECTION_TAG>(props: MenuSectionProps<TTag> & RefProp<typeof SectionFn>): JSX.Element;
+}
+export interface _internal_ComponentMenuHeading extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_HEADING_TAG>(props: MenuHeadingProps<TTag> & RefProp<typeof HeadingFn>): JSX.Element;
+}
+export interface _internal_ComponentMenuSeparator extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG>(props: MenuSeparatorProps<TTag> & RefProp<typeof SeparatorFn>): JSX.Element;
+}
+export declare let MenuButton: _internal_ComponentMenuButton;
+export declare let MenuItems: _internal_ComponentMenuItems;
+export declare let MenuItem: _internal_ComponentMenuItem;
+export declare let MenuSection: _internal_ComponentMenuSection;
+export declare let MenuHeading: _internal_ComponentMenuHeading;
+export declare let MenuSeparator: _internal_ComponentMenuSeparator;
 export declare let Menu: _internal_ComponentMenu & {
+    /** @deprecated use `<MenuButton>` instead of `<Menu.Button>` */
     Button: _internal_ComponentMenuButton;
+    /** @deprecated use `<MenuItems>` instead of `<Menu.Items>` */
     Items: _internal_ComponentMenuItems;
+    /** @deprecated use `<MenuItem>` instead of `<Menu.Item>` */
     Item: _internal_ComponentMenuItem;
+    /** @deprecated use `<MenuSection>` instead of `<Menu.Section>` */
+    Section: _internal_ComponentMenuSection;
+    /** @deprecated use `<MenuHeading>` instead of `<Menu.Heading>` */
+    Heading: _internal_ComponentMenuHeading;
+    /** @deprecated use `<MenuSeparator>` instead of `<Menu.Separator>` */
+    Separator: _internal_ComponentMenuSeparator;
 };
 export {};

dist/components/menu/menu.js

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

dist/components/popover/popover.d.ts

 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';
@@ -6,43 +7,54 @@ import { type HasDisplayName, type PropsForFeatures, type RefProp } from '../../utils/render.js';
 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;
+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 {
@@ -63,8 +75,16 @@ <TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(props: PopoverProps<TTag> & RefProp<typeof PopoverFn>): JSX.Element;
 }
+export declare let PopoverButton: _internal_ComponentPopoverButton;
+export declare let PopoverOverlay: _internal_ComponentPopoverOverlay;
+export declare let PopoverPanel: _internal_ComponentPopoverPanel;
+export declare let PopoverGroup: _internal_ComponentPopoverGroup;
 export declare let Popover: _internal_ComponentPopover & {
+    /** @deprecated use `<PopoverButton>` instead of `<Popover.Button>` */
     Button: _internal_ComponentPopoverButton;
+    /** @deprecated use `<PopoverOverlay>` instead of `<Popover.Overlay>` */
     Overlay: _internal_ComponentPopoverOverlay;
+    /** @deprecated use `<PopoverPanel>` instead of `<Popover.Panel>` */
     Panel: _internal_ComponentPopoverPanel;
+    /** @deprecated use `<PopoverGroup>` instead of `<Popover.Group>` */
     Group: _internal_ComponentPopoverGroup;
 };
 export {};

dist/components/popover/popover.js

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

dist/components/portal/portal.d.ts

 import React, { type ElementType, type MutableRefObject, type Ref } from 'react';
 import type { Props } from '../../types.js';
-import { HasDisplayName, RefProp } from '../../utils/render.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];
+}) => React.JSX.Element];
 export interface _internal_ComponentPortal extends HasDisplayName {
@@ -29,5 +31,7 @@ <TTag extends ElementType = typeof DEFAULT_PORTAL_TAG>(props: PortalProps<TTag> & RefProp<typeof PortalFn>): JSX.Element;
 }
+export declare let PortalGroup: _internal_ComponentPortalGroup;
 export declare let Portal: _internal_ComponentPortal & {
+    /** @deprecated use `<PortalGroup>` instead of `<Portal.Group>` */
     Group: _internal_ComponentPortalGroup;
 };
 export {};

dist/components/portal/portal.js

@@ -1,1 +0,1 @@
-import T,{createContext as P,Fragment as m,useContext as s,useEffect as d,useMemo as g,useRef as R,useState as E}from"react";import{createPortal as C}from"react-dom";import{useEvent as c}from'../../hooks/use-event.js';import{useIsoMorphicEffect as y}from'../../hooks/use-iso-morphic-effect.js';import{useOnUnmount as H}from'../../hooks/use-on-unmount.js';import{useOwnerDocument as x}from'../../hooks/use-owner.js';import{useServerHandoffComplete as b}from'../../hooks/use-server-handoff-complete.js';import{optionalRef as h,useSyncRefs as L}from'../../hooks/use-sync-refs.js';import{usePortalRoot as O}from'../../internal/portal-force-root.js';import{env as A}from'../../utils/env.js';import{forwardRefWithAs as G,render as M}from'../../utils/render.js';function F(p){let n=O(),l=s(_),e=x(p),[a,o]=E(()=>{if(!n&&l!==null||A.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(()=>{n||l!==null&&o(l.current)},[l,o,n]),a}let U=m;function N(p,n){let l=p,e=R(null),a=L(h(u=>{e.current=u}),n),o=x(e),t=F(e),[r]=E(()=>{var u;return A.isServer?null:(u=o==null?void 0:o.createElement("div"))!=null?u:null}),i=s(f),v=b();return y(()=>{!t||!r||t.contains(r)||(r.setAttribute("data-headlessui-portal",""),t.appendChild(r))},[t,r]),y(()=>{if(r&&i)return i.register(r)},[i,r]),H(()=>{var u;!t||!r||(r instanceof Node&&t.contains(r)&&t.removeChild(r),t.childNodes.length<=0&&((u=t.parentElement)==null||u.removeChild(t)))}),v?!t||!r?null:C(M({ourProps:{ref:a},theirProps:l,defaultTag:U,name:"Portal"}),r):null}let S=m,_=P(null);function j(p,n){let{target:l,...e}=p,o={ref:L(n)};return T.createElement(_.Provider,{value:l},M({ourProps:o,theirProps:e,defaultTag:S,name:"Popover.Group"}))}let f=P(null);function ee(){let p=s(f),n=R([]),l=c(o=>(n.current.push(o),p&&p.register(o),()=>e(o))),e=c(o=>{let t=n.current.indexOf(o);t!==-1&&n.current.splice(t,1),p&&p.unregister(o)}),a=g(()=>({register:l,unregister:e,portals:n}),[l,e,n]);return[n,g(()=>function({children:t}){return T.createElement(f.Provider,{value:a},t)},[a])]}let D=G(N),I=G(j),te=Object.assign(D,{Group:I});export{te as Portal,ee 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 { type ElementType, type Ref } from 'react';
-import { _internal_ComponentDescription } from '../../components/description/description.js';
-import { _internal_ComponentLabel } from '../../components/label/label.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,15 +21,35 @@ 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;
+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 {
@@ -40,2 +61,5 @@ <TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG, TType = string>(props: RadioGroupProps<TTag, TType> & RefProp<typeof RadioGroupFn>): JSX.Element;
 }
+export interface _internal_ComponentRadio extends HasDisplayName {
+    <TTag extends ElementType = typeof DEFAULT_RADIO_TAG, TType = string>(props: RadioProps<TTag, TType> & RefProp<typeof RadioFn>): JSX.Element;
+}
 export interface _internal_ComponentRadioLabel extends _internal_ComponentLabel {
@@ -46,7 +70,19 @@ }
 declare let RadioGroupRoot: _internal_ComponentRadioGroup;
+/** @deprecated use `<Radio>` instead of `<RadioGroupOption>` */
+export declare let RadioGroupOption: _internal_ComponentRadioOption;
+export declare let Radio: _internal_ComponentRadio;
+/** @deprecated use `<Label>` instead of `<RadioGroupLabel>` */
+export declare let RadioGroupLabel: _internal_ComponentRadioLabel;
+/** @deprecated use `<Description>` instead of `<RadioGroupDescription>` */
+export declare let RadioGroupDescription: _internal_ComponentRadioDescription;
 export declare let RadioGroup: _internal_ComponentRadioGroup & {
+    /** @deprecated use `<Radio>` instead of `<RadioGroup.Option>` */
     Option: _internal_ComponentRadioOption;
+    /** @deprecated use `<Radio>` instead of `<RadioGroup.Radio>` */
+    Radio: _internal_ComponentRadio;
+    /** @deprecated use `<Label>` instead of `<RadioGroup.Label>` */
     Label: _internal_ComponentRadioLabel;
+    /** @deprecated use `<Description>` instead of `<RadioGroup.Description>` */
     Description: _internal_ComponentRadioDescription;
 };
 export {};

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

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

dist/components/switch/switch.d.ts

 import React, { type ElementType, type Ref } from 'react';
 import type { Props } from '../../types.js';
 import { type HasDisplayName, type RefProp } from '../../utils/render.js';
-import { _internal_ComponentDescription } from '../description/description.js';
-import { _internal_ComponentLabel } from '../label/label.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,4 +29,7 @@ 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;
+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 {
@@ -36,7 +45,16 @@ <TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(props: SwitchProps<TTag> & RefProp<typeof SwitchFn>): JSX.Element;
 }
+/** @deprecated use `<Field>` instead of `<SwitchGroup>` */
+export declare let SwitchGroup: _internal_ComponentSwitchGroup;
+/** @deprecated use `<Label>` instead of `<SwitchLabel>` */
+export declare let SwitchLabel: _internal_ComponentSwitchLabel;
+/** @deprecated use `<Description>` instead of `<SwitchDescription>` */
+export declare let SwitchDescription: _internal_ComponentSwitchDescription;
 export declare let Switch: _internal_ComponentSwitch & {
+    /** @deprecated use `<Field>` instead of `<Switch.Group>` */
     Group: _internal_ComponentSwitchGroup;
+    /** @deprecated use `<Label>` instead of `<Switch.Label>` */
     Label: _internal_ComponentSwitchLabel;
+    /** @deprecated use `<Description>` instead of `<Switch.Description>` */
     Description: _internal_ComponentSwitchDescription;
 };
 export {};

dist/components/switch/switch.js

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

dist/components/tabs/tabs.d.ts

 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: React.ExoticComponent<{
-    children?: React.ReactNode;
-}>;
-interface TabsRenderPropArg {
+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,34 +16,43 @@ 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;
+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 {
@@ -65,8 +73,16 @@ <TTag extends ElementType = typeof DEFAULT_TAB_TAG>(props: TabProps<TTag> & RefProp<typeof TabFn>): JSX.Element;
 }
+export declare let TabGroup: _internal_ComponentTabGroup;
+export declare let TabList: _internal_ComponentTabList;
+export declare let TabPanels: _internal_ComponentTabPanels;
+export declare let TabPanel: _internal_ComponentTabPanel;
 export declare let Tab: _internal_ComponentTab & {
+    /** @deprecated use `<TabGroup>` instead of `<Tab.Group>` */
     Group: _internal_ComponentTabGroup;
+    /** @deprecated use `<TabList>` instead of `<Tab.List>` */
     List: _internal_ComponentTabList;
+    /** @deprecated use `<TabPanels>` instead of `<Tab.Panels>` */
     Panels: _internal_ComponentTabPanels;
+    /** @deprecated use `<TabPanel>` instead of `<Tab.Panel>` */
     Panel: _internal_ComponentTabPanel;
 };
 export {};

dist/components/tabs/tabs.js

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

dist/components/transitions/transition.d.ts

@@ -1,41 +0,1 @@
-import { type ElementType, type MutableRefObject, type Ref } from 'react';
-import type { Props, ReactTag } from '../../types.js';
-import { Features, type HasDisplayName, type PropsForFeatures, type 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;
-export interface _internal_ComponentTransitionRoot extends HasDisplayName {
-    <TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionRootProps<TTag> & RefProp<typeof TransitionRootFn>): JSX.Element;
-}
-export interface _internal_ComponentTransitionChild extends HasDisplayName {
-    <TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionChildProps<TTag> & RefProp<typeof TransitionChildFn>): JSX.Element;
-}
-export declare let Transition: _internal_ComponentTransitionRoot & {
-    Child: _internal_ComponentTransitionChild;
-    Root: _internal_ComponentTransitionRoot;
-};
-export {};
+export * from '../transition/transition.js';

dist/components/transitions/transition.js

@@ -1,1 +0,1 @@
-import m,{createContext as Z,Fragment as $,useContext as J,useEffect as F,useMemo as ee,useRef as c,useState as X}from"react";import{useDisposables as pe}from'../../hooks/use-disposables.js';import{useEvent as E}from'../../hooks/use-event.js';import{useFlags as he}from'../../hooks/use-flags.js';import{useIsMounted as ve}from'../../hooks/use-is-mounted.js';import{useIsoMorphicEffect as ge}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 Ce}from'../../hooks/use-transition.js';import{OpenClosedProvider as Ee,State as b,useOpenClosed as re}from'../../internal/open-closed.js';import{classNames as ie}from'../../utils/class-names.js';import{match as _}from'../../utils/match.js';import{Features as be,forwardRefWithAs as W,render as oe,RenderStrategy as y}from'../../utils/render.js';function S(t=""){return t.split(" ").filter(n=>n.trim().length>1)}let I=Z(null);I.displayName="TransitionContext";var Se=(r=>(r.Visible="visible",r.Hidden="hidden",r))(Se||{});function ye(){let t=J(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 xe(){let t=J(M);if(t===null)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");return t}let M=Z(null);M.displayName="NestingContext";function U(t){return"children"in t?U(t.children):t.current.filter(({el:n})=>n.current!==null).filter(({state:n})=>n==="visible").length>0}function se(t,n){let r=A(t),s=c([]),R=ve(),D=pe(),p=E((i,e=y.Hidden)=>{let a=s.current.findIndex(({el:o})=>o===i);a!==-1&&(_(e,{[y.Unmount](){s.current.splice(a,1)},[y.Hidden](){s.current[a].state="hidden"}}),D.microTask(()=>{var o;!U(s)&&R.current&&((o=r.current)==null||o.call(r))}))}),x=E(i=>{let e=s.current.find(({el:a})=>a===i);return e?e.state!=="visible"&&(e.state="visible"):s.current.push({el:i,state:"visible"}),()=>p(i,y.Unmount)}),h=c([]),v=c(Promise.resolve()),u=c({enter:[],leave:[],idle:[]}),g=E((i,e,a)=>{h.current.splice(0),n&&(n.chains.current[e]=n.chains.current[e].filter(([o])=>o!==i)),n==null||n.chains.current[e].push([i,new Promise(o=>{h.current.push(o)})]),n==null||n.chains.current[e].push([i,new Promise(o=>{Promise.all(u.current[e].map(([f,N])=>N)).then(()=>o())})]),e==="enter"?v.current=v.current.then(()=>n==null?void 0:n.wait.current).then(()=>a(e)):a(e)}),d=E((i,e,a)=>{Promise.all(u.current[e].splice(0).map(([o,f])=>f)).then(()=>{var o;(o=h.current.shift())==null||o()}).then(()=>a(e))});return ee(()=>({children:s,register:x,unregister:p,onStart:g,onStop:d,wait:v,chains:u}),[x,p,s,g,d,u,v])}function Ne(){}let Pe=["beforeEnter","afterEnter","beforeLeave","afterLeave"];function ae(t){var r;let n={};for(let s of Pe)n[s]=(r=t[s])!=null?r:Ne;return n}function Re(t){let n=c(ae(t));return F(()=>{n.current=ae(t)},[t]),n}let De="div",le=be.RenderStrategy;function He(t,n){var Q,Y;let{beforeEnter:r,afterEnter:s,beforeLeave:R,afterLeave:D,enter:p,enterFrom:x,enterTo:h,entered:v,leave:u,leaveFrom:g,leaveTo:d,...i}=t,e=c(null),a=ne(e,n),o=(Q=i.unmount)==null||Q?y.Unmount:y.Hidden,{show:f,appear:N,initial:T}=ye(),[l,j]=X(f?"visible":"hidden"),z=xe(),{register:L,unregister:O}=z;F(()=>L(e),[L,e]),F(()=>{if(o===y.Hidden&&e.current){if(f&&l!=="visible"){j("visible");return}return _(l,{["hidden"]:()=>O(e),["visible"]:()=>L(e)})}},[l,e,L,O,f,o]);let k=A({base:S(i.className),enter:S(p),enterFrom:S(x),enterTo:S(h),entered:S(v),leave:S(u),leaveFrom:S(g),leaveTo:S(d)}),V=Re({beforeEnter:r,afterEnter:s,beforeLeave:R,afterLeave:D}),G=te();F(()=>{if(G&&l==="visible"&&e.current===null)throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")},[e,l,G]);let Te=T&&!N,K=N&&f&&T,de=(()=>!G||Te?"idle":f?"enter":"leave")(),H=he(0),fe=E(C=>_(C,{enter:()=>{H.addFlag(b.Opening),V.current.beforeEnter()},leave:()=>{H.addFlag(b.Closing),V.current.beforeLeave()},idle:()=>{}})),me=E(C=>_(C,{enter:()=>{H.removeFlag(b.Opening),V.current.afterEnter()},leave:()=>{H.removeFlag(b.Closing),V.current.afterLeave()},idle:()=>{}})),w=se(()=>{j("hidden"),O(e)},z),B=c(!1);Ce({immediate:K,container:e,classes:k,direction:de,onStart:A(C=>{B.current=!0,w.onStart(e,C,fe)}),onStop:A(C=>{B.current=!1,w.onStop(e,C,me),C==="leave"&&!U(w)&&(j("hidden"),O(e))})});let P=i,ce={ref:a};return K?P={...P,className:ie(i.className,...k.current.enter,...k.current.enterFrom)}:B.current&&(P.className=ie(i.className,(Y=e.current)==null?void 0:Y.className),P.className===""&&delete P.className),m.createElement(M.Provider,{value:w},m.createElement(Ee,{value:_(l,{["visible"]:b.Open,["hidden"]:b.Closed})|H.flags},oe({ourProps:ce,theirProps:P,defaultTag:De,features:le,visible:l==="visible",name:"Transition.Child"})))}function Fe(t,n){let{show:r,appear:s=!1,unmount:R=!0,...D}=t,p=c(null),x=ne(p,n);te();let h=re();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,u]=X(r?"visible":"hidden"),g=se(()=>{u("hidden")}),[d,i]=X(!0),e=c([r]);ge(()=>{d!==!1&&e.current[e.current.length-1]!==r&&(e.current.push(r),i(!1))},[e,r]);let a=ee(()=>({show:r,appear:s,initial:d}),[r,s,d]);F(()=>{if(r)u("visible");else if(!U(g))u("hidden");else{let T=p.current;if(!T)return;let l=T.getBoundingClientRect();l.x===0&&l.y===0&&l.width===0&&l.height===0&&u("hidden")}},[r,g]);let o={unmount:R},f=E(()=>{var T;d&&i(!1),(T=t.beforeEnter)==null||T.call(t)}),N=E(()=>{var T;d&&i(!1),(T=t.beforeLeave)==null||T.call(t)});return m.createElement(M.Provider,{value:g},m.createElement(I.Provider,{value:a},oe({ourProps:{...o,as:$,children:m.createElement(ue,{ref:x,...o,...D,beforeEnter:f,beforeLeave:N})},theirProps:{},defaultTag:$,features:le,visible:v==="visible",name:"Transition"})))}function _e(t,n){let r=J(I)!==null,s=re()!==null;return m.createElement(m.Fragment,null,!r&&s?m.createElement(q,{ref:n,...t}):m.createElement(ue,{ref:n,...t}))}let q=W(Fe),ue=W(He),Le=W(_e),qe=Object.assign(q,{Child:Le,Root:q});export{qe 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';import{Portal as l}from'./components/portal/portal.js';export*from'./components/radio-group/radio-group.js';export*from'./components/switch/switch.js';export*from'./components/tabs/tabs.js';export*from'./components/transitions/transition.js';export{l 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{disposables as m}from'../../utils/disposables.js';import{isIOS as f}from'../../utils/platform.js';function T(){if(!f())return{};let l;return{before(){l=window.pageYOffset},after({doc:o,d:t,meta:s}){function i(n){return s.containers.flatMap(e=>e()).some(e=>e.contains(n))}t.microTask(()=>{if(window.getComputedStyle(o.documentElement).scrollBehavior!=="auto"){let e=m();e.style(o.documentElement,"scroll-behavior","auto"),t.add(()=>t.microTask(()=>e.dispose()))}t.style(o.body,"marginTop",`-${l}px`),window.scrollTo(0,0);let n=null;t.addEventListener(o,"click",e=>{if(e.target instanceof HTMLElement)try{let r=e.target.closest("a");if(!r)return;let{hash:c}=new URL(r.href),a=o.querySelector(c);a&&!i(a)&&(n=a)}catch{}},!0),t.addEventListener(o,"touchmove",e=>{e.target instanceof HTMLElement&&!i(e.target)&&e.preventDefault()},{passive:!1}),t.add(()=>{window.scrollTo(0,window.pageYOffset+l),n&&n.isConnected&&(n.scrollIntoView({block:"nearest"}),n=null)})})}}}export{T 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:n,meta:c}){function o(a){return c.containers.flatMap(l=>l()).some(l=>l.contains(a))}n.microTask(()=>{var s;if(window.getComputedStyle(r.documentElement).scrollBehavior!=="auto"){let t=m();t.style(r.documentElement,"scrollBehavior","auto"),n.add(()=>n.microTask(()=>t.dispose()))}let a=(s=window.scrollY)!=null?s:window.pageYOffset,l=null;n.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)&&(l=i)}catch{}},!0),n.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;n.style(e,"overscrollBehavior","contain")}else n.style(t.target,"touchAction","none")}),n.addEventListener(r,"touchmove",t=>{if(t.target instanceof HTMLElement){if(t.target.tagName==="INPUT")return;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}),n.add(()=>{var e;let t=(e=window.scrollY)!=null?e:window.pageYOffset;a!==t&&window.scrollTo(0,a),l&&l.isConnected&&(l.scrollIntoView({block:"nearest"}),l=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(shouldBeLocked: boolean, doc: Document | null, meta?: (meta: Record<string, any>) => Record<string, any>): boolean;

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

@@ -1,1 +0,1 @@
-import{useStore as u}from'../../hooks/use-store.js';import{useIsoMorphicEffect as s}from'../use-iso-morphic-effect.js';import{overflows as t}from'./overflow-store.js';function p(e,r,n){let f=u(t),o=e?f.get(e):void 0,i=o?o.count>0:!1;return s(()=>{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(r,e,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,1 +1,5 @@
+/**
+ * The `useDisposables` hook returns a `disposables` object that is disposed
+ * when the component is unmounted.
+ */
 export declare function useDisposables(): {
@@ -2,0 +6,0 @@ addEventListener<TEventName extends keyof WindowEventMap>(element: Window | Document | HTMLElement, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions | undefined): () => void;

dist/hooks/use-flags.js

@@ -1,1 +0,1 @@
-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=>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{env as r}from'../utils/env.js';import{useIsoMorphicEffect as d}from'./use-iso-morphic-effect.js';import{useServerHandoffComplete as f}from'./use-server-handoff-complete.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-iso-morphic-effect.d.ts

@@ -1,2 +0,2 @@
-import { DependencyList, EffectCallback } 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{useEffect as t,useLayoutEffect as c}from"react";import{env as i}from'../utils/env.js';let l=(e,f)=>{i.isServer?t(e,f):c(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-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 | TouchEvent, target: HTMLElement) => void, enabled?: boolean): void;
+export declare function useOutsideClick(enabled: boolean, containers: ContainerInput | (() => ContainerInput), cb: (event: MouseEvent | PointerEvent | FocusEvent | TouchEvent, target: HTMLElement) => void): void;
 export {};

dist/hooks/use-outside-click.js

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

dist/hooks/use-root-containers.d.ts

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

dist/hooks/use-root-containers.js

@@ -1,1 +0,1 @@
-import s,{useMemo as a,useRef as m}from"react";import{Features as M,Hidden as d}from'../internal/hidden.js';import{useEvent as H}from'./use-event.js';import{useOwnerDocument as E}from'./use-owner.js';function j({defaultContainers:t=[],portals:r,mainTreeNodeRef:u}={}){var c;let o=m((c=u==null?void 0:u.current)!=null?c:null),l=E(o),f=H(()=>{var i;let n=[];for(let e of t)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(o.current)||n.some(T=>e.contains(T))||n.push(e));return n});return{resolveContainers:f,contains:H(n=>f().some(i=>i.contains(n))),mainTreeNodeRef:o,MainTreeNode:a(()=>function(){return u!=null?null:s.createElement(d,{features:M.Hidden,ref:o})},[o,u])}}function y(){let t=m(null);return{mainTreeNodeRef:t,MainTreeNode:a(()=>function(){return s.createElement(d,{features:M.Hidden,ref:t})},[t])}}export{y as useMainTreeNode,j 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-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-transition.d.ts

 import { type MutableRefObject } from 'react';
 interface TransitionArgs {
-    immediate: boolean;
     container: MutableRefObject<HTMLElement | null>;
@@ -19,3 +18,3 @@ classes: MutableRefObject<{
 }
-export declare function useTransition({ immediate, container, direction, classes, onStart, onStop, }: TransitionArgs): void;
+export declare function useTransition({ container, direction, classes, onStart, onStop }: TransitionArgs): void;
 export {};

dist/hooks/use-transition.js

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

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

dist/hooks/use-tree-walker.js

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

dist/hooks/use-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,6 +0,15 @@
-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';
@@ -11,4 +20,7 @@ export * from './components/menu/menu.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 * 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';import{Portal as l}from'./components/portal/portal.js';export*from'./components/radio-group/radio-group.js';export*from'./components/switch/switch.js';export*from'./components/tabs/tabs.js';export*from'./components/transitions/transition.js';export{l 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 s,{useState as c}from"react";import{useIsMounted as m}from'../hooks/use-is-mounted.js';import{Features as f,Hidden as l}from'./hidden.js';function b({onFocus:n}){let[r,o]=c(!0),u=m();return r?s.createElement(l,{as:"button",type:"button",features:f.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};
+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

@@ -5,3 +5,3 @@ import type { ElementType, Ref } from 'react';
 declare let DEFAULT_VISUALLY_HIDDEN_TAG: "div";
-export declare enum Features {
+export declare enum HiddenFeatures {
     None = 1,
@@ -11,4 +11,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;
 }>;
@@ -15,0 +17,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 a,render as i}from'../utils/render.js';let p="div";var s=(e=>(e[e.None=1]="None",e[e.Focusable=2]="Focusable",e[e.Hidden=4]="Hidden",e))(s||{});function l(d,o){var n;let{features:t=1,...e}=d,r={ref:o,"aria-hidden":(t&2)===2?!0:(n=e["aria-hidden"])!=null?n: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",...(t&4)===4&&(t&2)!==2&&{display:"none"}}};return i({ourProps:r,theirProps:e,slot:{},defaultTag:p,name:"Hidden"})}let f=a(l);export{s as Features,f 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/portal-force-root.d.ts

@@ -1,2 +0,2 @@
-import { type 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/types.d.ts

@@ -10,3 +10,3 @@ import type { JSXElementConstructor, ReactElement, ReactNode } from 'react';
 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/utils/calculate-active-index.js

@@ -1,1 +0,1 @@
-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:{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};
+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/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/owner.d.ts

@@ -1,2 +0,2 @@
-import { type 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 o(r){return n.isServer?null:r instanceof Node?r.ownerDocument:r!=null&&r.hasOwnProperty("current")&&r.current instanceof Node?r.current.ownerDocument:document}export{o 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

 import { type ElementType, type ReactElement, type Ref } from 'react';
 import type { Expand, Props, XOR, __ } from '../types.js';
-export declare enum Features {
+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, mergeRefs, }: {
+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>> & {
@@ -65,2 +65,3 @@ ref?: Ref<HTMLElement | ElementType>;
 } : never;
+export declare function mergeProps<T extends Props<any, any>[]>(...listOfProps: T): Props<any, any>;
 /**
@@ -67,0 +68,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{cloneElement as N,createElement as E,forwardRef as h,Fragment as g,isValidElement as P,useCallback as j,useRef as S}from"react";import{classNames as b}from'./class-names.js';import{match as w}from'./match.js';var O=(n=>(n[n.None=0]="None",n[n.RenderStrategy=1]="RenderStrategy",n[n.Static=2]="Static",n))(O||{}),v=(e=>(e[e.Unmount=0]="Unmount",e[e.Hidden=1]="Hidden",e))(v||{});function C({ourProps:r,theirProps:t,slot:e,defaultTag:n,features:o,visible:a=!0,name:f,mergeRefs:l}){l=l!=null?l:k;let s=R(t,r);if(a)return m(s,e,n,f,l);let y=o!=null?o:0;if(y&2){let{static:u=!1,...d}=s;if(u)return m(d,e,n,f,l)}if(y&1){let{unmount:u=!0,...d}=s;return w(u?0:1,{[0](){return null},[1](){return m({...d,hidden:!0,style:{display:"none"}},e,n,f,l)}})}return m(s,e,n,f,l)}function m(r,t={},e,n,o){let{as:a=e,children:f,refName:l="ref",...s}=F(r,["unmount","static"]),y=r.ref!==void 0?{[l]:r.ref}:{},u=typeof f=="function"?f(t):f;"className"in s&&s.className&&typeof s.className=="function"&&(s.className=s.className(t));let d={};if(t){let i=!1,c=[];for(let[T,p]of Object.entries(t))typeof p=="boolean"&&(i=!0),p===!0&&c.push(T);i&&(d["data-headlessui-state"]=c.join(" "))}if(a===g&&Object.keys(x(s)).length>0){if(!P(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${n} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(s).map(p=>`  - ${p}`).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(p=>`  - ${p}`).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=u.props,c=typeof(i==null?void 0:i.className)=="function"?(...p)=>b(i==null?void 0:i.className(...p),s.className):b(i==null?void 0:i.className,s.className),T=c?{className:c}:{};return N(u,Object.assign({},R(u.props,x(F(s,["ref"]))),d,y,{ref:o(u.ref,y.ref)},T))}return E(a,Object.assign({},F(s,["ref"]),a!==g&&y,a!==g&&d),u)}function I(){let r=S([]),t=j(e=>{for(let n of r.current)n!=null&&(typeof n=="function"?n(e):n.current=e)},[]);return(...e)=>{if(!e.every(n=>n==null))return r.current=e,t}}function k(...r){return r.every(t=>t==null)?void 0:t=>{for(let e of r)e!=null&&(typeof e=="function"?e(t):e.current=t)}}function R(...r){var n;if(r.length===0)return{};if(r.length===1)return r[0];let t={},e={};for(let o of r)for(let a in o)a.startsWith("on")&&typeof o[a]=="function"?((n=e[a])!=null||(e[a]=[]),e[a].push(o[a])):t[a]=o[a];if(t.disabled||t["aria-disabled"])return Object.assign(t,Object.fromEntries(Object.keys(e).map(o=>[o,void 0])));for(let o in e)Object.assign(t,{[o](a,...f){let l=e[o];for(let s of l){if((a instanceof Event||(a==null?void 0:a.nativeEvent)instanceof Event)&&a.defaultPrevented)return;s(a,...f)}}});return t}function U(r){var t;return Object.assign(h(r),{displayName:(t=r.displayName)!=null?t:r.name})}function x(r){let t=Object.assign({},r);for(let e in t)t[e]===void 0&&delete t[e];return t}function F(r,t=[]){let e=Object.assign({},r);for(let n of t)n in e&&delete e[n];return e}export{O as Features,v as RenderStrategy,x as compact,U as forwardRefWithAs,C as render,I as useMergeRefsFn};
+`))}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/stable-collection.js

@@ -1,1 +0,1 @@
-import*as r from"react";const s=r.createContext(null);function a(){return{groups:new Map,get(n,t){var c;let e=this.groups.get(n);e||(e=new Map,this.groups.set(n,e));let l=(c=e.get(t))!=null?c:0;e.set(t,l+1);let o=Array.from(e.keys()).indexOf(t);function i(){let u=e.get(t);u>1?e.set(t,u-1):e.delete(t)}return[o,i]}}}function C({children:n}){let t=r.useRef(a());return r.createElement(s.Provider,{value:t},n)}function d(n){let t=r.useContext(s);if(!t)throw new Error("You must wrap your component in a <StableCollection>");let e=f(),[l,o]=t.current.get(n,e);return r.useEffect(()=>o,[]),l}function f(){var l,o,i;let n=(i=(o=(l=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED)==null?void 0:l.ReactCurrentOwner)==null?void 0:o.current)!=null?i:null;if(!n)return Symbol();let t=[],e=n;for(;e;)t.push(e.index),e=e.return;return"$."+t.join(".")}export{C as StableCollection,d as useStableCollectionIndex};
+import*as l from"react";const s=l.createContext(null);function a(){return{groups:new Map,get(o,e){var i;let t=this.groups.get(o);t||(t=new Map,this.groups.set(o,t));let n=(i=t.get(e))!=null?i:0;t.set(e,n+1);let r=Array.from(t.keys()).indexOf(e);function u(){let c=t.get(e);c>1?t.set(e,c-1):t.delete(e)}return[r,u]}}}function f({children:o}){let e=l.useRef(a());return l.createElement(s.Provider,{value:e},o)}function C(o){let e=l.useContext(s);if(!e)throw new Error("You must wrap your component in a <StableCollection>");let t=l.useId(),[n,r]=e.current.get(o,t);return l.useEffect(()=>r,[]),n}export{f as StableCollection,C as useStableCollectionIndex};

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.475db7c",
+  "version": "0.0.0-insiders.479853d",
   "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,22 +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.7",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "snapshot-diff": "^0.10.0"
   },
   "dependencies": {
-    "@tanstack/react-virtual": "^3.0.0-beta.60",
-    "client-only": "^0.0.1"
+    "@floating-ui/react": "^0.26.16",
+    "@tanstack/react-virtual": "3.5.0",
+    "@react-aria/focus": "^3.17.1",
+    "@react-aria/interactions": "^3.21.3"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

896300

increased by50.08%

Dev dependency count

6

decreased by-14.29%

Number of package files

297

increased by82.21%

Lines of code

16174

increased by52.74%

Worsened metrics

Dependency count

6

increased by50%

Dependency changes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• + Added@swc/helpers@0.5.13(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.7.0(transitive)

• - Removedclient-only@^0.0.1

• - Removed@tanstack/react-virtual@3.10.8(transitive)

• - Removed@tanstack/virtual-core@3.10.8(transitive)

• - Removedclient-only@0.0.1(transitive)

• Updated@tanstack/react-virtual@3.5.0