@headlessui/react
Advanced tools
Comparing version 0.0.0-insiders.98b0817 to 0.0.0-insiders.990b179
@@ -1,118 +0,135 @@ | ||
import React, { ElementType, Ref } from 'react'; | ||
import { ByComparator, EnsureArray, Expand, Props } from '../../types.js'; | ||
import { PropsForFeatures } from '../../utils/render.js'; | ||
import React, { type ElementType, type Ref } from 'react'; | ||
import { type ByComparator } from '../../hooks/use-by-comparator.js'; | ||
import { type AnchorProps } from '../../internal/floating.js'; | ||
import type { EnsureArray, Props } from '../../types.js'; | ||
import { type HasDisplayName, type PropsForFeatures, type RefProp } from '../../utils/render.js'; | ||
import { type _internal_ComponentLabel } from '../label/label.js'; | ||
declare let DEFAULT_COMBOBOX_TAG: React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>; | ||
interface ComboboxRenderPropArg<T> { | ||
type ComboboxRenderPropArg<TValue, TActive = TValue> = { | ||
open: boolean; | ||
disabled: boolean; | ||
activeIndex: number | null; | ||
activeOption: T | null; | ||
value: T; | ||
} | ||
declare type O = 'value' | 'defaultValue' | 'nullable' | 'multiple' | 'onChange' | 'by'; | ||
declare 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>>, 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>>, O>>) | ({ | ||
value?: TValue; | ||
nullable?: false; | ||
multiple?: false; | ||
defaultValue?: TValue; | ||
onChange?(value: TValue): void; | ||
by?: ByComparator<TValue>; | ||
} & Props<TTag, ComboboxRenderPropArg<TValue>, O>), { | ||
nullable?: TNullable; | ||
activeOption: TActive | null; | ||
value: TValue; | ||
}; | ||
export type ComboboxProps<TValue, TMultiple extends boolean | undefined, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG> = Props<TTag, ComboboxRenderPropArg<NoInfer<TValue>>, 'value' | 'defaultValue' | 'multiple' | 'onChange' | 'by', { | ||
value?: TMultiple extends true ? EnsureArray<TValue> : TValue; | ||
defaultValue?: TMultiple extends true ? EnsureArray<NoInfer<TValue>> : NoInfer<TValue>; | ||
onChange?(value: TMultiple extends true ? EnsureArray<NoInfer<TValue>> : NoInfer<TValue> | null): void; | ||
by?: ByComparator<TMultiple extends true ? EnsureArray<NoInfer<TValue>>[number] : NoInfer<TValue>>; | ||
/** @deprecated The `<Combobox />` is now nullable default */ | ||
nullable?: boolean; | ||
multiple?: TMultiple; | ||
}>; | ||
declare type ComboboxProps<TValue, TNullable extends boolean | undefined, TMultiple extends boolean | undefined, TTag extends ElementType> = ComboboxValueProps<TValue, TNullable, TMultiple, TTag> & { | ||
disabled?: boolean; | ||
form?: string; | ||
name?: string; | ||
immediate?: boolean; | ||
virtual?: { | ||
options: NoInfer<TValue>[]; | ||
disabled?: (value: NoInfer<TValue>) => boolean; | ||
} | null; | ||
onClose?(): void; | ||
__demoMode?: boolean; | ||
name?: string; | ||
}; | ||
declare function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, true, true, TTag>, ref: Ref<TTag>): JSX.Element; | ||
declare function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, true, false, TTag>, ref: Ref<TTag>): JSX.Element; | ||
declare function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, false, false, TTag>, ref: Ref<TTag>): JSX.Element; | ||
declare function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, false, true, TTag>, ref: Ref<TTag>): JSX.Element; | ||
interface InputRenderPropArg { | ||
}>; | ||
declare function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, boolean | undefined, TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_INPUT_TAG: "input"; | ||
type InputRenderPropArg = { | ||
open: boolean; | ||
disabled: boolean; | ||
} | ||
declare type InputPropsWeControl = 'role' | 'aria-labelledby' | 'aria-expanded' | 'aria-activedescendant' | 'onKeyDown' | 'onChange' | 'displayValue'; | ||
interface ButtonRenderPropArg { | ||
hover: boolean; | ||
focus: boolean; | ||
autofocus: boolean; | ||
}; | ||
type InputPropsWeControl = 'aria-activedescendant' | 'aria-autocomplete' | 'aria-controls' | 'aria-expanded' | 'aria-labelledby' | 'disabled' | 'role'; | ||
export type ComboboxInputProps<TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TType = string> = Props<TTag, InputRenderPropArg, InputPropsWeControl, { | ||
defaultValue?: TType; | ||
disabled?: boolean; | ||
displayValue?(item: TType): string; | ||
onChange?(event: React.ChangeEvent<HTMLInputElement>): void; | ||
autoFocus?: boolean; | ||
}>; | ||
declare function InputFn<TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TType = Parameters<typeof ComboboxRoot>[0]['value']>(props: ComboboxInputProps<TTag, TType>, ref: Ref<HTMLInputElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
declare let DEFAULT_BUTTON_TAG: "button"; | ||
type ButtonRenderPropArg = { | ||
open: boolean; | ||
active: boolean; | ||
disabled: boolean; | ||
value: any; | ||
} | ||
declare type ButtonPropsWeControl = 'type' | 'tabIndex' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded' | 'aria-labelledby' | 'disabled' | 'onClick' | 'onKeyDown'; | ||
interface LabelRenderPropArg { | ||
focus: boolean; | ||
hover: boolean; | ||
}; | ||
type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded' | 'aria-haspopup' | 'aria-labelledby' | 'disabled' | 'tabIndex'; | ||
export type ComboboxButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, { | ||
autoFocus?: boolean; | ||
disabled?: boolean; | ||
}>; | ||
declare function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ComboboxButtonProps<TTag>, ref: Ref<HTMLButtonElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
declare let DEFAULT_OPTIONS_TAG: "div"; | ||
type OptionsRenderPropArg = { | ||
open: boolean; | ||
disabled: boolean; | ||
} | ||
declare type LabelPropsWeControl = 'ref' | 'onClick'; | ||
interface OptionsRenderPropArg { | ||
open: boolean; | ||
} | ||
declare type OptionsPropsWeControl = 'aria-activedescendant' | 'aria-labelledby' | 'hold' | 'onKeyDown' | 'role' | 'tabIndex'; | ||
option: any; | ||
}; | ||
type OptionsPropsWeControl = 'aria-labelledby' | 'aria-multiselectable' | 'role' | 'tabIndex'; | ||
declare let OptionsRenderFeatures: number; | ||
interface OptionRenderPropArg { | ||
export type ComboboxOptionsProps<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl, PropsForFeatures<typeof OptionsRenderFeatures> & { | ||
hold?: boolean; | ||
anchor?: AnchorProps; | ||
portal?: boolean; | ||
modal?: boolean; | ||
transition?: boolean; | ||
}>; | ||
declare function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ComboboxOptionsProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_OPTION_TAG: "div"; | ||
type OptionRenderPropArg = { | ||
focus: boolean; | ||
/** @deprecated use `focus` instead */ | ||
active: boolean; | ||
selected: boolean; | ||
disabled: boolean; | ||
}; | ||
type OptionPropsWeControl = 'role' | 'tabIndex' | 'aria-disabled' | 'aria-selected'; | ||
export type ComboboxOptionProps<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, { | ||
disabled?: boolean; | ||
value: TType; | ||
order?: number; | ||
}>; | ||
declare function OptionFn<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = Parameters<typeof ComboboxRoot>[0]['value']>(props: ComboboxOptionProps<TTag, TType>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
export interface _internal_ComponentCombobox extends HasDisplayName { | ||
<TValue, TMultiple extends boolean | undefined = false, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, TMultiple, TTag> & RefProp<typeof ComboboxFn>): JSX.Element; | ||
} | ||
declare type ComboboxOptionPropsWeControl = 'role' | 'tabIndex' | 'aria-disabled' | 'aria-selected'; | ||
export declare let Combobox: typeof ComboboxFn & { | ||
displayName: string; | ||
} & { | ||
Input: (<TTag extends React.ElementType<any> = "input", TType = {}[] | undefined>(props: Props<TTag, InputRenderPropArg, InputPropsWeControl> & { | ||
displayValue?(item: TType): string; | ||
onChange(event: React.ChangeEvent<HTMLInputElement>): void; | ||
}, ref: Ref<HTMLInputElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Button: (<TTag_1 extends React.ElementType<any> = "button">(props: Props<TTag_1, ButtonRenderPropArg, ButtonPropsWeControl>, ref: Ref<HTMLButtonElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Label: (<TTag_2 extends React.ElementType<any> = "label">(props: Props<TTag_2, LabelRenderPropArg, LabelPropsWeControl>, ref: Ref<HTMLLabelElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Options: (<TTag_3 extends React.ElementType<any> = "ul">(props: Props<TTag_3, OptionsRenderPropArg, OptionsPropsWeControl> & (({ | ||
static?: undefined; | ||
} & { | ||
unmount?: boolean | undefined; | ||
}) | ({ | ||
unmount?: undefined; | ||
} & { | ||
static?: boolean | undefined; | ||
})) & { | ||
hold?: boolean | undefined; | ||
}, ref: Ref<HTMLUListElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Option: (<TTag_4 extends React.ElementType<any> = "li", TType_1 = {}[] | undefined>(props: Props<TTag_4, OptionRenderPropArg, "value" | ComboboxOptionPropsWeControl> & { | ||
disabled?: boolean | undefined; | ||
value: TType_1; | ||
}, ref: Ref<HTMLLIElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
export interface _internal_ComponentComboboxButton extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ComboboxButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentComboboxInput extends HasDisplayName { | ||
<TType, TTag extends ElementType = typeof DEFAULT_INPUT_TAG>(props: ComboboxInputProps<TTag, TType> & RefProp<typeof InputFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentComboboxLabel extends _internal_ComponentLabel { | ||
} | ||
export interface _internal_ComponentComboboxOptions extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ComboboxOptionsProps<TTag> & RefProp<typeof OptionsFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentComboboxOption extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = Parameters<typeof ComboboxRoot>[0]['value']>(props: ComboboxOptionProps<TTag, TType> & RefProp<typeof OptionFn>): JSX.Element; | ||
} | ||
declare let ComboboxRoot: _internal_ComponentCombobox; | ||
export declare let ComboboxButton: _internal_ComponentComboboxButton; | ||
export declare let ComboboxInput: _internal_ComponentComboboxInput; | ||
/** @deprecated use `<Label>` instead of `<ComboboxLabel>` */ | ||
export declare let ComboboxLabel: _internal_ComponentComboboxLabel; | ||
export declare let ComboboxOptions: _internal_ComponentComboboxOptions; | ||
export declare let ComboboxOption: _internal_ComponentComboboxOption; | ||
export declare let Combobox: _internal_ComponentCombobox & { | ||
/** @deprecated use `<ComboboxInput>` instead of `<Combobox.Input>` */ | ||
Input: _internal_ComponentComboboxInput; | ||
/** @deprecated use `<ComboboxButton>` instead of `<Combobox.Button>` */ | ||
Button: _internal_ComponentComboboxButton; | ||
/** @deprecated use `<Label>` instead of `<Combobox.Label>` */ | ||
Label: _internal_ComponentComboboxLabel; | ||
/** @deprecated use `<ComboboxOptions>` instead of `<Combobox.Options>` */ | ||
Options: _internal_ComponentComboboxOptions; | ||
/** @deprecated use `<ComboboxOption>` instead of `<Combobox.Option>` */ | ||
Option: _internal_ComponentComboboxOption; | ||
}; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import q,{Fragment as ce,createContext as le,createRef as fe,useCallback as me,useContext as ie,useMemo as D,useReducer as Te,useRef as E,useEffect as xe}from"react";import{useComputed as z}from'../../hooks/use-computed.js';import{useDisposables as ee}from'../../hooks/use-disposables.js';import{useEvent as g}from'../../hooks/use-event.js';import{useId as W}from'../../hooks/use-id.js';import{useIsoMorphicEffect as F}from'../../hooks/use-iso-morphic-effect.js';import{useLatestValue as ge}from'../../hooks/use-latest-value.js';import{useOutsideClick as Oe}from'../../hooks/use-outside-click.js';import{useResolveButtonType as Ce}from'../../hooks/use-resolve-button-type.js';import{useSyncRefs as X}from'../../hooks/use-sync-refs.js';import{useTreeWalker as Re}from'../../hooks/use-tree-walker.js';import{calculateActiveIndex as ve,Focus as y}from'../../utils/calculate-active-index.js';import{disposables as ue}from'../../utils/disposables.js';import{forwardRefWithAs as w,render as B,compact as ye,Features as pe}from'../../utils/render.js';import{isDisabledReactIssue7711 as Se}from'../../utils/bugs.js';import{match as U}from'../../utils/match.js';import{objectToFormEntries as Ae}from'../../utils/form.js';import{sortByDomNode as Pe}from'../../utils/focus-management.js';import{Hidden as Ee,Features as Ie}from'../../internal/hidden.js';import{useOpenClosed as Le,State as oe,OpenClosedProvider as De}from'../../internal/open-closed.js';import{Keys as S}from'../keyboard.js';import{useControllable as Ve}from'../../hooks/use-controllable.js';import{useWatch as Me}from'../../hooks/use-watch.js';import{useTrackedPointer as he}from'../../hooks/use-tracked-pointer.js';var Fe=(n=>(n[n.Open=0]="Open",n[n.Closed=1]="Closed",n))(Fe||{}),_e=(n=>(n[n.Single=0]="Single",n[n.Multi=1]="Multi",n))(_e||{}),ke=(n=>(n[n.Pointer=0]="Pointer",n[n.Other=1]="Other",n))(ke||{}),we=(l=>(l[l.OpenCombobox=0]="OpenCombobox",l[l.CloseCombobox=1]="CloseCombobox",l[l.GoToOption=2]="GoToOption",l[l.RegisterOption=3]="RegisterOption",l[l.UnregisterOption=4]="UnregisterOption",l[l.RegisterLabel=5]="RegisterLabel",l))(we||{});function te(t,r=n=>n){let n=t.activeOptionIndex!==null?t.options[t.activeOptionIndex]:null,o=Pe(r(t.options.slice()),i=>i.dataRef.current.domRef.current),a=n?o.indexOf(n):null;return a===-1&&(a=null),{options:o,activeOptionIndex:a}}let Be={[1](t){return t.dataRef.current.disabled||t.comboboxState===1?t:{...t,activeOptionIndex:null,comboboxState:1}},[0](t){if(t.dataRef.current.disabled||t.comboboxState===0)return t;let r=t.activeOptionIndex,{isSelected:n}=t.dataRef.current,o=t.options.findIndex(a=>n(a.dataRef.current.value));return o!==-1&&(r=o),{...t,comboboxState:0,activeOptionIndex:r}},[2](t,r){var a;if(t.dataRef.current.disabled||t.dataRef.current.optionsRef.current&&!t.dataRef.current.optionsPropsRef.current.static&&t.comboboxState===1)return t;let n=te(t);if(n.activeOptionIndex===null){let i=n.options.findIndex(l=>!l.dataRef.current.disabled);i!==-1&&(n.activeOptionIndex=i)}let o=ve(r,{resolveItems:()=>n.options,resolveActiveIndex:()=>n.activeOptionIndex,resolveId:i=>i.id,resolveDisabled:i=>i.dataRef.current.disabled});return{...t,...n,activeOptionIndex:o,activationTrigger:(a=r.trigger)!=null?a:1}},[3]:(t,r)=>{let n={id:r.id,dataRef:r.dataRef},o=te(t,i=>[...i,n]);t.activeOptionIndex===null&&t.dataRef.current.isSelected(r.dataRef.current.value)&&(o.activeOptionIndex=o.options.indexOf(n));let a={...t,...o,activationTrigger:1};return t.dataRef.current.__demoMode&&t.dataRef.current.value===void 0&&(a.activeOptionIndex=0),a},[4]:(t,r)=>{let n=te(t,o=>{let a=o.findIndex(i=>i.id===r.id);return a!==-1&&o.splice(a,1),o});return{...t,...n,activationTrigger:1}},[5]:(t,r)=>({...t,labelId:r.id})},ne=le(null);ne.displayName="ComboboxActionsContext";function $(t){let r=ie(ne);if(r===null){let n=new Error(`<${t} /> is missing a parent <Combobox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(n,$),n}return r}let re=le(null);re.displayName="ComboboxDataContext";function G(t){let r=ie(re);if(r===null){let n=new Error(`<${t} /> is missing a parent <Combobox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(n,G),n}return r}function Ue(t,r){return U(r.type,Be,t,r)}let Ge=ce;function Ne(t,r){let{value:n,defaultValue:o,onChange:a,name:i,by:l=(b,T)=>b===T,disabled:d=!1,__demoMode:f=!1,nullable:e=!1,multiple:p=!1,...A}=t,[s=p?[]:void 0,R]=Ve(n,a,o),[v,c]=Te(Ue,{dataRef:fe(),comboboxState:f?0:1,options:[],activeOptionIndex:null,activationTrigger:1,labelId:null}),x=E(!1),C=E({static:!1,hold:!1}),N=E(null),V=E(null),_=E(null),k=E(null),I=g(typeof l=="string"?(b,T)=>{let P=l;return(b==null?void 0:b[P])===(T==null?void 0:T[P])}:l),H=me(b=>U(m.mode,{[1]:()=>s.some(T=>I(T,b)),[0]:()=>I(s,b)}),[s]),m=D(()=>({...v,optionsPropsRef:C,labelRef:N,inputRef:V,buttonRef:_,optionsRef:k,value:s,defaultValue:o,disabled:d,mode:p?1:0,get activeOptionIndex(){if(x.current&&v.activeOptionIndex===null&&v.options.length>0){let b=v.options.findIndex(T=>!T.dataRef.current.disabled);if(b!==-1)return b}return v.activeOptionIndex},compare:I,isSelected:H,nullable:e,__demoMode:f}),[s,o,d,p,e,f,v]);F(()=>{v.dataRef.current=m},[m]),Oe([m.buttonRef,m.inputRef,m.optionsRef],()=>Z.closeCombobox(),m.comboboxState===0);let M=D(()=>({open:m.comboboxState===0,disabled:d,activeIndex:m.activeOptionIndex,activeOption:m.activeOptionIndex===null?null:m.options[m.activeOptionIndex].dataRef.current.value,value:s}),[m,d,s]),h=g(b=>{let T=m.options.find(P=>P.id===b);!T||j(T.dataRef.current.value)}),O=g(()=>{if(m.activeOptionIndex!==null){let{dataRef:b,id:T}=m.options[m.activeOptionIndex];j(b.current.value),Z.goToOption(y.Specific,T)}}),u=g(()=>{c({type:0}),x.current=!0}),L=g(()=>{c({type:1}),x.current=!1}),Q=g((b,T,P)=>(x.current=!1,b===y.Specific?c({type:2,focus:y.Specific,id:T,trigger:P}):c({type:2,focus:b,trigger:P}))),Y=g((b,T)=>(c({type:3,id:b,dataRef:T}),()=>c({type:4,id:b}))),se=g(b=>(c({type:5,id:b}),()=>c({type:5,id:null}))),j=g(b=>U(m.mode,{[0](){return R==null?void 0:R(b)},[1](){let T=m.value.slice(),P=T.findIndex(K=>I(K,b));return P===-1?T.push(b):T.splice(P,1),R==null?void 0:R(T)}})),Z=D(()=>({onChange:j,registerOption:Y,registerLabel:se,goToOption:Q,closeCombobox:L,openCombobox:u,selectActiveOption:O,selectOption:h}),[]),de=r===null?{}:{ref:r},J=E(null),be=ee();return xe(()=>{!J.current||o!==void 0&&be.addEventListener(J.current,"reset",()=>{j(o)})},[J,j]),q.createElement(ne.Provider,{value:Z},q.createElement(re.Provider,{value:m},q.createElement(De,{value:U(m.comboboxState,{[0]:oe.Open,[1]:oe.Closed})},i!=null&&s!=null&&Ae({[i]:s}).map(([b,T],P)=>q.createElement(Ee,{features:Ie.Hidden,ref:P===0?K=>{var ae;J.current=(ae=K==null?void 0:K.closest("form"))!=null?ae:null}:void 0,...ye({key:b,as:"input",type:"hidden",hidden:!0,readOnly:!0,name:b,value:T})})),B({ourProps:de,theirProps:A,slot:M,defaultTag:Ge,name:"Combobox"}))))}let He=w(Ne),je="input",Ke=w(function(r,n){var m,M,h,O;let o=W(),{id:a=`headlessui-combobox-input-${o}`,onChange:i,displayValue:l,type:d="text",...f}=r,e=G("Combobox.Input"),p=$("Combobox.Input"),A=X(e.inputRef,n),s=E(!1),R=ee(),v=function(){var u;return typeof l=="function"&&e.value!==void 0?(u=l(e.value))!=null?u:"":typeof e.value=="string"?e.value:""}();Me(([u,L],[Q,Y])=>{s.current||!e.inputRef.current||(Y===0&&L===1||u!==Q)&&(e.inputRef.current.value=u)},[v,e.comboboxState]);let c=E(!1),x=g(()=>{c.current=!0}),C=g(()=>{setTimeout(()=>{c.current=!1})}),N=g(u=>{switch(s.current=!0,u.key){case S.Backspace:case S.Delete:if(e.mode!==0||!e.nullable)return;let L=u.currentTarget;R.requestAnimationFrame(()=>{L.value===""&&(p.onChange(null),e.optionsRef.current&&(e.optionsRef.current.scrollTop=0),p.goToOption(y.Nothing))});break;case S.Enter:if(s.current=!1,e.comboboxState!==0||c.current)return;if(u.preventDefault(),u.stopPropagation(),e.activeOptionIndex===null){p.closeCombobox();return}p.selectActiveOption(),e.mode===0&&p.closeCombobox();break;case S.ArrowDown:return s.current=!1,u.preventDefault(),u.stopPropagation(),U(e.comboboxState,{[0]:()=>{p.goToOption(y.Next)},[1]:()=>{p.openCombobox()}});case S.ArrowUp:return s.current=!1,u.preventDefault(),u.stopPropagation(),U(e.comboboxState,{[0]:()=>{p.goToOption(y.Previous)},[1]:()=>{p.openCombobox(),R.nextFrame(()=>{e.value||p.goToOption(y.Last)})}});case S.Home:if(u.shiftKey)break;return s.current=!1,u.preventDefault(),u.stopPropagation(),p.goToOption(y.First);case S.PageUp:return s.current=!1,u.preventDefault(),u.stopPropagation(),p.goToOption(y.First);case S.End:if(u.shiftKey)break;return s.current=!1,u.preventDefault(),u.stopPropagation(),p.goToOption(y.Last);case S.PageDown:return s.current=!1,u.preventDefault(),u.stopPropagation(),p.goToOption(y.Last);case S.Escape:return s.current=!1,e.comboboxState!==0?void 0:(u.preventDefault(),e.optionsRef.current&&!e.optionsPropsRef.current.static&&u.stopPropagation(),p.closeCombobox());case S.Tab:if(s.current=!1,e.comboboxState!==0)return;e.mode===0&&p.selectActiveOption(),p.closeCombobox();break}}),V=g(u=>{p.openCombobox(),i==null||i(u)}),_=g(()=>{s.current=!1}),k=z(()=>{if(!!e.labelId)return[e.labelId].join(" ")},[e.labelId]),I=D(()=>({open:e.comboboxState===0,disabled:e.disabled}),[e]),H={ref:A,id:a,role:"combobox",type:d,"aria-controls":(m=e.optionsRef.current)==null?void 0:m.id,"aria-expanded":e.disabled?void 0:e.comboboxState===0,"aria-activedescendant":e.activeOptionIndex===null||(M=e.options[e.activeOptionIndex])==null?void 0:M.id,"aria-multiselectable":e.mode===1?!0:void 0,"aria-labelledby":k,defaultValue:(O=(h=r.defaultValue)!=null?h:e.defaultValue!==void 0?l==null?void 0:l(e.defaultValue):null)!=null?O:e.defaultValue,disabled:e.disabled,onCompositionStart:x,onCompositionEnd:C,onKeyDown:N,onChange:V,onBlur:_};return B({ourProps:H,theirProps:f,slot:I,defaultTag:je,name:"Combobox.Input"})}),We="button",Xe=w(function(r,n){var c;let o=G("Combobox.Button"),a=$("Combobox.Button"),i=X(o.buttonRef,n),l=W(),{id:d=`headlessui-combobox-button-${l}`,...f}=r,e=ee(),p=g(x=>{switch(x.key){case S.ArrowDown:return x.preventDefault(),x.stopPropagation(),o.comboboxState===1&&a.openCombobox(),e.nextFrame(()=>{var C;return(C=o.inputRef.current)==null?void 0:C.focus({preventScroll:!0})});case S.ArrowUp:return x.preventDefault(),x.stopPropagation(),o.comboboxState===1&&(a.openCombobox(),e.nextFrame(()=>{o.value||a.goToOption(y.Last)})),e.nextFrame(()=>{var C;return(C=o.inputRef.current)==null?void 0:C.focus({preventScroll:!0})});case S.Escape:return o.comboboxState!==0?void 0:(x.preventDefault(),o.optionsRef.current&&!o.optionsPropsRef.current.static&&x.stopPropagation(),a.closeCombobox(),e.nextFrame(()=>{var C;return(C=o.inputRef.current)==null?void 0:C.focus({preventScroll:!0})}));default:return}}),A=g(x=>{if(Se(x.currentTarget))return x.preventDefault();o.comboboxState===0?a.closeCombobox():(x.preventDefault(),a.openCombobox()),e.nextFrame(()=>{var C;return(C=o.inputRef.current)==null?void 0:C.focus({preventScroll:!0})})}),s=z(()=>{if(!!o.labelId)return[o.labelId,d].join(" ")},[o.labelId,d]),R=D(()=>({open:o.comboboxState===0,disabled:o.disabled,value:o.value}),[o]),v={ref:i,id:d,type:Ce(r,o.buttonRef),tabIndex:-1,"aria-haspopup":"listbox","aria-controls":(c=o.optionsRef.current)==null?void 0:c.id,"aria-expanded":o.disabled?void 0:o.comboboxState===0,"aria-labelledby":s,disabled:o.disabled,onClick:A,onKeyDown:p};return B({ourProps:v,theirProps:f,slot:R,defaultTag:We,name:"Combobox.Button"})}),$e="label",Je=w(function(r,n){let o=W(),{id:a=`headlessui-combobox-label-${o}`,...i}=r,l=G("Combobox.Label"),d=$("Combobox.Label"),f=X(l.labelRef,n);F(()=>d.registerLabel(a),[a]);let e=g(()=>{var s;return(s=l.inputRef.current)==null?void 0:s.focus({preventScroll:!0})}),p=D(()=>({open:l.comboboxState===0,disabled:l.disabled}),[l]);return B({ourProps:{ref:f,id:a,onClick:e},theirProps:i,slot:p,defaultTag:$e,name:"Combobox.Label"})}),qe="ul",Qe=pe.RenderStrategy|pe.Static,Ye=w(function(r,n){var v;let o=W(),{id:a=`headlessui-combobox-options-${o}`,hold:i=!1,...l}=r,d=G("Combobox.Options"),f=X(d.optionsRef,n),e=Le(),p=(()=>e!==null?e===oe.Open:d.comboboxState===0)();F(()=>{var c;d.optionsPropsRef.current.static=(c=r.static)!=null?c:!1},[d.optionsPropsRef,r.static]),F(()=>{d.optionsPropsRef.current.hold=i},[d.optionsPropsRef,i]),Re({container:d.optionsRef.current,enabled:d.comboboxState===0,accept(c){return c.getAttribute("role")==="option"?NodeFilter.FILTER_REJECT:c.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(c){c.setAttribute("role","none")}});let A=z(()=>{var c,x;return(x=d.labelId)!=null?x:(c=d.buttonRef.current)==null?void 0:c.id},[d.labelId,d.buttonRef.current]),s=D(()=>({open:d.comboboxState===0}),[d]),R={"aria-activedescendant":d.activeOptionIndex===null||(v=d.options[d.activeOptionIndex])==null?void 0:v.id,"aria-labelledby":A,role:"listbox",id:a,ref:f};return B({ourProps:R,theirProps:l,slot:s,defaultTag:qe,features:Qe,visible:p,name:"Combobox.Options"})}),Ze="li",ze=w(function(r,n){var M,h;let o=W(),{id:a=`headlessui-combobox-option-${o}`,disabled:i=!1,value:l,...d}=r,f=G("Combobox.Option"),e=$("Combobox.Option"),p=f.activeOptionIndex!==null?f.options[f.activeOptionIndex].id===a:!1,A=f.isSelected(l),s=E(null),R=ge({disabled:i,value:l,domRef:s,textValue:(h=(M=s.current)==null?void 0:M.textContent)==null?void 0:h.toLowerCase()}),v=X(n,s),c=g(()=>e.selectOption(a));F(()=>e.registerOption(a,R),[R,a]);let x=E(!f.__demoMode);F(()=>{if(!f.__demoMode)return;let O=ue();return O.requestAnimationFrame(()=>{x.current=!0}),O.dispose},[]),F(()=>{if(f.comboboxState!==0||!p||!x.current||f.activationTrigger===0)return;let O=ue();return O.requestAnimationFrame(()=>{var u,L;(L=(u=s.current)==null?void 0:u.scrollIntoView)==null||L.call(u,{block:"nearest"})}),O.dispose},[s,p,f.comboboxState,f.activationTrigger,f.activeOptionIndex]);let C=g(O=>{if(i)return O.preventDefault();c(),f.mode===0&&e.closeCombobox()}),N=g(()=>{if(i)return e.goToOption(y.Nothing);e.goToOption(y.Specific,a)}),V=he(),_=g(O=>V.update(O)),k=g(O=>{!V.wasMoved(O)||i||p||e.goToOption(y.Specific,a,0)}),I=g(O=>{!V.wasMoved(O)||i||!p||f.optionsPropsRef.current.hold||e.goToOption(y.Nothing)}),H=D(()=>({active:p,selected:A,disabled:i}),[p,A,i]);return B({ourProps:{id:a,ref:v,role:"option",tabIndex:i===!0?void 0:-1,"aria-disabled":i===!0?!0:void 0,"aria-selected":A,disabled:void 0,onClick:C,onFocus:N,onPointerEnter:_,onMouseEnter:_,onPointerMove:k,onMouseMove:k,onPointerLeave:I,onMouseLeave:I},theirProps:d,slot:H,defaultTag:Ze,name:"Combobox.Option"})}),ko=Object.assign(He,{Input:Ke,Button:Xe,Label:Je,Options:Ye,Option:ze});export{ko as Combobox}; | ||
"use client";import{useFocusRing as ye}from"@react-aria/focus";import{useHover as Ce}from"@react-aria/interactions";import{useVirtualizer as ke}from"@tanstack/react-virtual";import D,{Fragment as Re,createContext as be,createRef as Ne,useCallback as Se,useContext as fe,useMemo as z,useReducer as Ue,useRef as $,useState as He}from"react";import{flushSync as Z}from"react-dom";import{useActivePress as Ge}from'../../hooks/use-active-press.js';import{useByComparator as je}from'../../hooks/use-by-comparator.js';import{useControllable as ze}from'../../hooks/use-controllable.js';import{useDefaultValue as Ke}from'../../hooks/use-default-value.js';import{useDisposables as We}from'../../hooks/use-disposables.js';import{useElementSize as Pe}from'../../hooks/use-element-size.js';import{useEvent as m}from'../../hooks/use-event.js';import{useId as pe}from'../../hooks/use-id.js';import{useInertOthers as $e}from'../../hooks/use-inert-others.js';import{useIsoMorphicEffect as X}from'../../hooks/use-iso-morphic-effect.js';import{useLatestValue as Xe}from'../../hooks/use-latest-value.js';import{useOnDisappear as Je}from'../../hooks/use-on-disappear.js';import{useOutsideClick as qe}from'../../hooks/use-outside-click.js';import{useOwnerDocument as Ae}from'../../hooks/use-owner.js';import{useRefocusableInput as Ie}from'../../hooks/use-refocusable-input.js';import{useResolveButtonType as Ye}from'../../hooks/use-resolve-button-type.js';import{useScrollLock as Qe}from'../../hooks/use-scroll-lock.js';import{useSyncRefs as se}from'../../hooks/use-sync-refs.js';import{useTrackedPointer as Ze}from'../../hooks/use-tracked-pointer.js';import{transitionDataAttributes as eo,useTransition as oo}from'../../hooks/use-transition.js';import{useTreeWalker as to}from'../../hooks/use-tree-walker.js';import{useWatch as Ee}from'../../hooks/use-watch.js';import{useDisabled as no}from'../../internal/disabled.js';import{FloatingProvider as ro,useFloatingPanel as io,useFloatingPanelProps as ao,useFloatingReference as lo,useResolvedAnchor as uo}from'../../internal/floating.js';import{FormFields as po}from'../../internal/form-fields.js';import{Frozen as so,useFrozenData as _e}from'../../internal/frozen.js';import{useProvidedId as bo}from'../../internal/id.js';import{OpenClosedProvider as fo,State as de,useOpenClosed as co}from'../../internal/open-closed.js';import{history as he}from'../../utils/active-element-history.js';import{isDisabledReactIssue7711 as mo}from'../../utils/bugs.js';import{Focus as P,calculateActiveIndex as De}from'../../utils/calculate-active-index.js';import{disposables as Me}from'../../utils/disposables.js';import{sortByDomNode as To}from'../../utils/focus-management.js';import{match as ee}from'../../utils/match.js';import{isMobile as xo}from'../../utils/platform.js';import{RenderFeatures as Fe,forwardRefWithAs as te,mergeProps as ce,render as ne}from'../../utils/render.js';import{useDescribedBy as go}from'../description/description.js';import{Keys as V}from'../keyboard.js';import{Label as vo,useLabelledBy as me,useLabels as Oo}from'../label/label.js';import{MouseButton as Ve}from'../mouse.js';import{Portal as yo}from'../portal/portal.js';var Co=(e=>(e[e.Open=0]="Open",e[e.Closed=1]="Closed",e))(Co||{}),Ro=(e=>(e[e.Single=0]="Single",e[e.Multi=1]="Multi",e))(Ro||{}),So=(t=>(t[t.Pointer=0]="Pointer",t[t.Focus=1]="Focus",t[t.Other=2]="Other",t))(So||{}),Po=(u=>(u[u.OpenCombobox=0]="OpenCombobox",u[u.CloseCombobox=1]="CloseCombobox",u[u.GoToOption=2]="GoToOption",u[u.SetTyping=3]="SetTyping",u[u.RegisterOption=4]="RegisterOption",u[u.UnregisterOption=5]="UnregisterOption",u[u.SetActivationTrigger=6]="SetActivationTrigger",u[u.UpdateVirtualConfiguration=7]="UpdateVirtualConfiguration",u))(Po||{});function Te(o,r=e=>e){let e=o.activeOptionIndex!==null?o.options[o.activeOptionIndex]:null,t=r(o.options.slice()),c=t.length>0&&t[0].dataRef.current.order!==null?t.sort((f,s)=>f.dataRef.current.order-s.dataRef.current.order):To(t,f=>f.dataRef.current.domRef.current),d=e?c.indexOf(e):null;return d===-1&&(d=null),{options:c,activeOptionIndex:d}}let Ao={[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,u,a;if((d=o.dataRef.current)!=null&&d.disabled||(f=o.dataRef.current)!=null&&f.optionsRef.current&&!((s=o.dataRef.current)!=null&&s.optionsPropsRef.current.static)&&o.comboboxState===1)return o;if(o.virtual){let{options:n,disabled:T}=o.virtual,C=r.focus===P.Specific?r.idx:De(r,{resolveItems:()=>n,resolveActiveIndex:()=>{var p,w;return(w=(p=o.activeOptionIndex)!=null?p:n.findIndex(M=>!T(M)))!=null?w:null},resolveDisabled:T,resolveId(){throw new Error("Function not implemented.")}}),_=(u=r.trigger)!=null?u:2;return o.activeOptionIndex===C&&o.activationTrigger===_?o:{...o,activeOptionIndex:C,activationTrigger:_,isTyping:!1,__demoMode:!1}}let e=Te(o);if(e.activeOptionIndex===null){let n=e.options.findIndex(T=>!T.dataRef.current.disabled);n!==-1&&(e.activeOptionIndex=n)}let t=r.focus===P.Specific?r.idx:De(r,{resolveItems:()=>e.options,resolveActiveIndex:()=>e.activeOptionIndex,resolveId:n=>n.id,resolveDisabled:n=>n.dataRef.current.disabled}),c=(a=r.trigger)!=null?a:2;return o.activeOptionIndex===t&&o.activationTrigger===c?o:{...o,...e,isTyping:!1,activeOptionIndex:t,activationTrigger:c,__demoMode:!1}},[4]:(o,r)=>{var d,f,s;if((d=o.dataRef.current)!=null&&d.virtual)return{...o,options:[...o.options,r.payload]};let e=r.payload,t=Te(o,u=>(u.push(e),u));o.activeOptionIndex===null&&(f=o.dataRef.current)!=null&&f.isSelected(r.payload.dataRef.current.value)&&(t.activeOptionIndex=t.options.indexOf(e));let c={...o,...t,activationTrigger:2};return(s=o.dataRef.current)!=null&&s.__demoMode&&o.dataRef.current.value===void 0&&(c.activeOptionIndex=0),c},[5]:(o,r)=>{var t;if((t=o.dataRef.current)!=null&&t.virtual)return{...o,options:o.options.filter(c=>c.id!==r.id)};let e=Te(o,c=>{let d=c.findIndex(f=>f.id===r.id);return d!==-1&&c.splice(d,1),c});return{...o,...e,activationTrigger:2}},[6]:(o,r)=>o.activationTrigger===r.trigger?o:{...o,activationTrigger:r.trigger},[7]:(o,r)=>{var t,c;if(o.virtual===null)return{...o,virtual:{options:r.options,disabled:(t=r.disabled)!=null?t:()=>!1}};if(o.virtual.options===r.options&&o.virtual.disabled===r.disabled)return o;let e=o.activeOptionIndex;if(o.activeOptionIndex!==null){let d=r.options.indexOf(o.virtual.options[o.activeOptionIndex]);d!==-1?e=d:e=null}return{...o,activeOptionIndex:e,virtual:{options:r.options,disabled:(c=r.disabled)!=null?c:()=>!1}}}},xe=be(null);xe.displayName="ComboboxActionsContext";function re(o){let r=fe(xe);if(r===null){let e=new Error(`<${o} /> is missing a parent <Combobox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(e,re),e}return r}let Le=be(null);function Io(o){let r=oe("VirtualProvider"),{options:e}=r.virtual,[t,c]=z(()=>{let a=r.optionsRef.current;if(!a)return[0,0];let n=window.getComputedStyle(a);return[parseFloat(n.paddingBlockStart||n.paddingTop),parseFloat(n.paddingBlockEnd||n.paddingBottom)]},[r.optionsRef.current]),d=ke({scrollPaddingStart:t,scrollPaddingEnd:c,count:e.length,estimateSize(){return 40},getScrollElement(){var a;return(a=r.optionsRef.current)!=null?a:null},overscan:12}),[f,s]=He(0);X(()=>{s(a=>a+1)},[e]);let u=d.getVirtualItems();return u.length===0?null:D.createElement(Le.Provider,{value:d},D.createElement("div",{style:{position:"relative",width:"100%",height:`${d.getTotalSize()}px`},ref:a=>{if(a){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)}}},u.map(a=>{var n;return D.createElement(Re,{key:a.key},D.cloneElement((n=o.children)==null?void 0:n.call(o,{...o.slot,option:e[a.index]}),{key:`${f}-${a.key}`,"data-index":a.index,"aria-setsize":e.length,"aria-posinset":a.index+1,style:{position:"absolute",top:0,left:0,transform:`translateY(${a.start}px)`,overflowAnchor:"none"}}))})))}let ie=be(null);ie.displayName="ComboboxDataContext";function oe(o){let r=fe(ie);if(r===null){let e=new Error(`<${o} /> is missing a parent <Combobox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(e,oe),e}return r}function Eo(o,r){return ee(r.type,Ao,o,r)}let _o=Re;function ho(o,r){var ge,ve;let e=no(),{value:t,defaultValue:c,onChange:d,form:f,name:s,by:u,disabled:a=e||!1,onClose:n,__demoMode:T=!1,multiple:C=!1,immediate:_=!1,virtual:p=null,nullable:w,...M}=o,F=Ke(c),[v=C?[]:void 0,y]=ze(t,d,F),[A,R]=Ue(Eo,{dataRef:Ne(),comboboxState:T?0:1,isTyping:!1,options:[],virtual:p?{options:p.options,disabled:(ge=p.disabled)!=null?ge:()=>!1}:null,activeOptionIndex:null,activationTrigger:2,__demoMode:T}),h=$(!1),O=$({static:!1,hold:!1}),G=$(null),J=$(null),Q=$(null),I=je(u),B=m(b=>p?u===null?p.options.indexOf(b):p.options.findIndex(g=>I(g,b)):A.options.findIndex(g=>I(g.dataRef.current.value,b))),k=Se(b=>ee(i.mode,{[1]:()=>v.some(g=>I(g,b)),[0]:()=>I(v,b)}),[v]),K=m(b=>A.activeOptionIndex===B(b)),i=z(()=>({...A,immediate:_,optionsPropsRef:O,inputRef:G,buttonRef:J,optionsRef:Q,value:v,defaultValue:F,disabled:a,mode:C?1:0,virtual:p?A.virtual:null,get activeOptionIndex(){if(h.current&&A.activeOptionIndex===null&&(p?p.options.length>0:A.options.length>0)){if(p){let g=p.options.findIndex(j=>{var ue,Oe;return!((Oe=(ue=p.disabled)==null?void 0:ue.call(p,j))!=null&&Oe)});if(g!==-1)return g}let b=A.options.findIndex(g=>!g.dataRef.current.disabled);if(b!==-1)return b}return A.activeOptionIndex},calculateIndex:B,compare:I,isSelected:k,isActive:K}),[v,F,a,C,T,A,p]);X(()=>{var b;p&&R({type:7,options:p.options,disabled:(b=p.disabled)!=null?b:null})},[p,p==null?void 0:p.options,p==null?void 0:p.disabled]),X(()=>{A.dataRef.current=i},[i]);let N=i.comboboxState===0;qe(N,[i.buttonRef,i.inputRef,i.optionsRef],()=>x.closeCombobox());let q=z(()=>{var b,g,j;return{open:i.comboboxState===0,disabled:a,activeIndex:i.activeOptionIndex,activeOption:i.activeOptionIndex===null?null:i.virtual?i.virtual.options[(b=i.activeOptionIndex)!=null?b:0]:(j=(g=i.options[i.activeOptionIndex])==null?void 0:g.dataRef.current.value)!=null?j:null,value:v}},[i,a,v]),Y=m(()=>{if(i.activeOptionIndex!==null){if(x.setIsTyping(!1),i.virtual)S(i.virtual.options[i.activeOptionIndex]);else{let{dataRef:b}=i.options[i.activeOptionIndex];S(b.current.value)}x.goToOption(P.Specific,i.activeOptionIndex)}}),E=m(()=>{R({type:0}),h.current=!0}),ae=m(()=>{R({type:1}),h.current=!1,n==null||n()}),le=m(b=>{R({type:3,isTyping:b})}),l=m((b,g,j)=>(h.current=!1,b===P.Specific?R({type:2,focus:P.Specific,idx:g,trigger:j}):R({type:2,focus:b,trigger:j}))),U=m((b,g)=>(R({type:4,payload:{id:b,dataRef:g}}),()=>{i.isActive(g.current.value)&&(h.current=!0),R({type:5,id:b})})),S=m(b=>ee(i.mode,{[0](){return y==null?void 0:y(b)},[1](){let g=i.value.slice(),j=g.findIndex(ue=>I(ue,b));return j===-1?g.push(b):g.splice(j,1),y==null?void 0:y(g)}})),H=m(b=>{R({type:6,trigger:b})}),x=z(()=>({onChange:S,registerOption:U,goToOption:l,setIsTyping:le,closeCombobox:ae,openCombobox:E,setActivationTrigger:H,selectActiveOption:Y}),[]),[L,W]=Oo(),we=r===null?{}:{ref:r},Be=Se(()=>{if(F!==void 0)return y==null?void 0:y(F)},[y,F]);return D.createElement(W,{value:L,props:{htmlFor:(ve=i.inputRef.current)==null?void 0:ve.id},slot:{open:i.comboboxState===0,disabled:a}},D.createElement(ro,null,D.createElement(xe.Provider,{value:x},D.createElement(ie.Provider,{value:i},D.createElement(fo,{value:ee(i.comboboxState,{[0]:de.Open,[1]:de.Closed})},s!=null&&D.createElement(po,{disabled:a,data:v!=null?{[s]:v}:{},form:f,onReset:Be}),ne({ourProps:we,theirProps:M,slot:q,defaultTag:_o,name:"Combobox"}))))))}let Do="input";function Mo(o,r){var q,Y,E,ae,le;let e=oe("Combobox.Input"),t=re("Combobox.Input"),c=pe(),d=bo(),{id:f=d||`headlessui-combobox-input-${c}`,onChange:s,displayValue:u,disabled:a=e.disabled||!1,autoFocus:n=!1,type:T="text",...C}=o,_=se(e.inputRef,r,lo()),p=Ae(e.inputRef),w=We(),M=m(()=>{t.onChange(null),e.optionsRef.current&&(e.optionsRef.current.scrollTop=0),t.goToOption(P.Nothing)}),F=z(()=>{var l;return typeof u=="function"&&e.value!==void 0?(l=u(e.value))!=null?l:"":typeof e.value=="string"?e.value:""},[e.value,u]);Ee(([l,U],[S,H])=>{if(e.isTyping)return;let x=e.inputRef.current;x&&((H===0&&U===1||l!==S)&&(x.value=l),requestAnimationFrame(()=>{if(e.isTyping||!x||(p==null?void 0:p.activeElement)!==x)return;let{selectionStart:L,selectionEnd:W}=x;Math.abs((W!=null?W:0)-(L!=null?L:0))===0&&L===0&&x.setSelectionRange(x.value.length,x.value.length)}))},[F,e.comboboxState,p,e.isTyping]),Ee(([l],[U])=>{if(l===0&&U===1){if(e.isTyping)return;let S=e.inputRef.current;if(!S)return;let H=S.value,{selectionStart:x,selectionEnd:L,selectionDirection:W}=S;S.value="",S.value=H,W!==null?S.setSelectionRange(x,L,W):S.setSelectionRange(x,L)}},[e.comboboxState]);let v=$(!1),y=m(()=>{v.current=!0}),A=m(()=>{w.nextFrame(()=>{v.current=!1})}),R=m(l=>{switch(t.setIsTyping(!0),l.key){case V.Enter:if(e.comboboxState!==0||v.current)return;if(l.preventDefault(),l.stopPropagation(),e.activeOptionIndex===null){t.closeCombobox();return}t.selectActiveOption(),e.mode===0&&t.closeCombobox();break;case V.ArrowDown:return l.preventDefault(),l.stopPropagation(),ee(e.comboboxState,{[0]:()=>t.goToOption(P.Next),[1]:()=>t.openCombobox()});case V.ArrowUp:return l.preventDefault(),l.stopPropagation(),ee(e.comboboxState,{[0]:()=>t.goToOption(P.Previous),[1]:()=>{Z(()=>t.openCombobox()),e.value||t.goToOption(P.Last)}});case V.Home:if(l.shiftKey)break;return l.preventDefault(),l.stopPropagation(),t.goToOption(P.First);case V.PageUp:return l.preventDefault(),l.stopPropagation(),t.goToOption(P.First);case V.End:if(l.shiftKey)break;return l.preventDefault(),l.stopPropagation(),t.goToOption(P.Last);case V.PageDown:return l.preventDefault(),l.stopPropagation(),t.goToOption(P.Last);case V.Escape:return e.comboboxState!==0?void 0:(l.preventDefault(),e.optionsRef.current&&!e.optionsPropsRef.current.static&&l.stopPropagation(),e.mode===0&&e.value===null&&M(),t.closeCombobox());case V.Tab:if(e.comboboxState!==0)return;e.mode===0&&e.activationTrigger!==1&&t.selectActiveOption(),t.closeCombobox();break}}),h=m(l=>{s==null||s(l),e.mode===0&&l.target.value===""&&M(),t.openCombobox()}),O=m(l=>{var S,H,x;let U=(S=l.relatedTarget)!=null?S:he.find(L=>L!==l.currentTarget);if(!((H=e.optionsRef.current)!=null&&H.contains(U))&&!((x=e.buttonRef.current)!=null&&x.contains(U))&&e.comboboxState===0)return l.preventDefault(),e.mode===0&&e.value===null&&M(),t.closeCombobox()}),G=m(l=>{var S,H,x;let U=(S=l.relatedTarget)!=null?S:he.find(L=>L!==l.currentTarget);(H=e.buttonRef.current)!=null&&H.contains(U)||(x=e.optionsRef.current)!=null&&x.contains(U)||e.disabled||e.immediate&&e.comboboxState!==0&&(Z(()=>t.openCombobox()),t.setActivationTrigger(1))}),J=me(),Q=go(),{isFocused:I,focusProps:B}=ye({autoFocus:n}),{isHovered:k,hoverProps:K}=Ce({isDisabled:a}),i=z(()=>({open:e.comboboxState===0,disabled:a,hover:k,focus:I,autofocus:n}),[e,k,I,n,a]),N=ce({ref:_,id:f,role:"combobox",type:T,"aria-controls":(q=e.optionsRef.current)==null?void 0:q.id,"aria-expanded":e.comboboxState===0,"aria-activedescendant":e.activeOptionIndex===null?void 0:e.virtual?(Y=e.options.find(l=>!l.dataRef.current.disabled&&e.compare(l.dataRef.current.value,e.virtual.options[e.activeOptionIndex])))==null?void 0:Y.id:(E=e.options[e.activeOptionIndex])==null?void 0:E.id,"aria-labelledby":J,"aria-describedby":Q,"aria-autocomplete":"list",defaultValue:(le=(ae=o.defaultValue)!=null?ae:e.defaultValue!==void 0?u==null?void 0:u(e.defaultValue):null)!=null?le:e.defaultValue,disabled:a||void 0,autoFocus:n,onCompositionStart:y,onCompositionEnd:A,onKeyDown:R,onChange:h,onFocus:G,onBlur:O},B,K);return ne({ourProps:N,theirProps:C,slot:i,defaultTag:Do,name:"Combobox.Input"})}let Fo="button";function Vo(o,r){var h;let e=oe("Combobox.Button"),t=re("Combobox.Button"),c=se(e.buttonRef,r),d=pe(),{id:f=`headlessui-combobox-button-${d}`,disabled:s=e.disabled||!1,autoFocus:u=!1,...a}=o,n=Ie(e.inputRef),T=m(O=>{switch(O.key){case V.Space:case V.Enter:O.preventDefault(),O.stopPropagation(),e.comboboxState===1&&Z(()=>t.openCombobox()),n();return;case V.ArrowDown:O.preventDefault(),O.stopPropagation(),e.comboboxState===1&&(Z(()=>t.openCombobox()),e.value||t.goToOption(P.First)),n();return;case V.ArrowUp:O.preventDefault(),O.stopPropagation(),e.comboboxState===1&&(Z(()=>t.openCombobox()),e.value||t.goToOption(P.Last)),n();return;case V.Escape:if(e.comboboxState!==0)return;O.preventDefault(),e.optionsRef.current&&!e.optionsPropsRef.current.static&&O.stopPropagation(),Z(()=>t.closeCombobox()),n();return;default:return}}),C=m(O=>{O.preventDefault(),!mo(O.currentTarget)&&(O.button===Ve.Left&&(e.comboboxState===0?t.closeCombobox():t.openCombobox()),n())}),_=me([f]),{isFocusVisible:p,focusProps:w}=ye({autoFocus:u}),{isHovered:M,hoverProps:F}=Ce({isDisabled:s}),{pressed:v,pressProps:y}=Ge({disabled:s}),A=z(()=>({open:e.comboboxState===0,active:v||e.comboboxState===0,disabled:s,value:e.value,hover:M,focus:p}),[e,M,p,v,s]),R=ce({ref:c,id:f,type:Ye(o,e.buttonRef),tabIndex:-1,"aria-haspopup":"listbox","aria-controls":(h=e.optionsRef.current)==null?void 0:h.id,"aria-expanded":e.comboboxState===0,"aria-labelledby":_,disabled:s||void 0,autoFocus:u,onMouseDown:C,onKeyDown:T},w,F,y);return ne({ourProps:R,theirProps:a,slot:A,defaultTag:Fo,name:"Combobox.Button"})}let Lo="div",wo=Fe.RenderStrategy|Fe.Static;function Bo(o,r){var N,q,Y;let e=pe(),{id:t=`headlessui-combobox-options-${e}`,hold:c=!1,anchor:d,portal:f=!1,modal:s=!0,transition:u=!1,...a}=o,n=oe("Combobox.Options"),T=re("Combobox.Options"),C=uo(d);C&&(f=!0);let[_,p]=io(C),w=ao(),M=se(n.optionsRef,r,C?_:null),F=Ae(n.optionsRef),v=co(),[y,A]=oo(u,n.optionsRef,v!==null?(v&de.Open)===de.Open:n.comboboxState===0);Je(y,n.inputRef,T.closeCombobox);let R=n.__demoMode?!1:s&&n.comboboxState===0;Qe(R,F);let h=n.__demoMode?!1:s&&n.comboboxState===0;$e(h,{allowed:m(()=>[n.inputRef.current,n.buttonRef.current,n.optionsRef.current])}),X(()=>{var E;n.optionsPropsRef.current.static=(E=o.static)!=null?E:!1},[n.optionsPropsRef,o.static]),X(()=>{n.optionsPropsRef.current.hold=c},[n.optionsPropsRef,c]),to(n.comboboxState===0,{container:n.optionsRef.current,accept(E){return E.getAttribute("role")==="option"?NodeFilter.FILTER_REJECT:E.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(E){E.setAttribute("role","none")}});let O=me([(N=n.buttonRef.current)==null?void 0:N.id]),G=z(()=>({open:n.comboboxState===0,option:void 0}),[n.comboboxState]),J=m(()=>{T.setActivationTrigger(0)}),Q=m(E=>{E.preventDefault(),T.setActivationTrigger(0)}),I=ce(C?w():{},{"aria-labelledby":O,role:"listbox","aria-multiselectable":n.mode===1?!0:void 0,id:t,ref:M,style:{...a.style,...p,"--input-width":Pe(n.inputRef,!0).width,"--button-width":Pe(n.buttonRef,!0).width},onWheel:n.activationTrigger===0?void 0:J,onMouseDown:Q,...eo(A)}),B=y&&n.comboboxState===1,k=_e(B,(q=n.virtual)==null?void 0:q.options),K=_e(B,n.value),i=m(E=>n.compare(K,E));if(n.virtual){if(k===void 0)throw new Error("Missing `options` in virtual mode");Object.assign(a,{children:D.createElement(ie.Provider,{value:k!==n.virtual.options?{...n,virtual:{...n.virtual,options:k}}:n},D.createElement(Io,{slot:G},a.children))})}return D.createElement(yo,{enabled:f?o.static||y:!1},D.createElement(ie.Provider,{value:n.mode===1?n:{...n,isSelected:i}},ne({ourProps:I,theirProps:{...a,children:D.createElement(so,{freeze:B},typeof a.children=="function"?(Y=a.children)==null?void 0:Y.call(a,G):a.children)},slot:G,defaultTag:Lo,features:wo,visible:y,name:"Combobox.Options"})))}let ko="div";function No(o,r){var I,B,k,K;let e=oe("Combobox.Option"),t=re("Combobox.Option"),c=pe(),{id:d=`headlessui-combobox-option-${c}`,value:f,disabled:s=(k=(B=(I=e.virtual)==null?void 0:I.disabled)==null?void 0:B.call(I,f))!=null?k:!1,order:u=null,...a}=o,n=Ie(e.inputRef),T=e.virtual?e.activeOptionIndex===e.calculateIndex(f):e.activeOptionIndex===null?!1:((K=e.options[e.activeOptionIndex])==null?void 0:K.id)===d,C=e.isSelected(f),_=$(null),p=Xe({disabled:s,value:f,domRef:_,order:u}),w=fe(Le),M=se(r,_,w?w.measureElement:null),F=m(()=>{t.setIsTyping(!1),t.onChange(f)});X(()=>t.registerOption(d,p),[p,d]);let v=$(!(e.virtual||e.__demoMode));X(()=>{if(!e.virtual&&!e.__demoMode)return Me().requestAnimationFrame(()=>{v.current=!0})},[e.virtual,e.__demoMode]),X(()=>{if(v.current&&e.comboboxState===0&&T&&e.activationTrigger!==0)return Me().requestAnimationFrame(()=>{var i,N;(N=(i=_.current)==null?void 0:i.scrollIntoView)==null||N.call(i,{block:"nearest"})})},[_,T,e.comboboxState,e.activationTrigger,e.activeOptionIndex]);let y=m(i=>{i.preventDefault(),i.button===Ve.Left&&(s||(F(),xo()||requestAnimationFrame(()=>n()),e.mode===0&&t.closeCombobox()))}),A=m(()=>{if(s)return t.goToOption(P.Nothing);let i=e.calculateIndex(f);t.goToOption(P.Specific,i)}),R=Ze(),h=m(i=>R.update(i)),O=m(i=>{if(!R.wasMoved(i)||s||T)return;let N=e.calculateIndex(f);t.goToOption(P.Specific,N,0)}),G=m(i=>{R.wasMoved(i)&&(s||T&&(e.optionsPropsRef.current.hold||t.goToOption(P.Nothing)))}),J=z(()=>({active:T,focus:T,selected:C,disabled:s}),[T,C,s]);return ne({ourProps:{id:d,ref:M,role:"option",tabIndex:s===!0?void 0:-1,"aria-disabled":s===!0?!0:void 0,"aria-selected":C,disabled:void 0,onMouseDown:y,onFocus:A,onPointerEnter:h,onMouseEnter:h,onPointerMove:O,onMouseMove:O,onPointerLeave:G,onMouseLeave:G},theirProps:a,slot:J,defaultTag:ko,name:"Combobox.Option"})}let Uo=te(ho),Ho=te(Vo),Go=te(Mo),jo=vo,zo=te(Bo),Ko=te(No),Nt=Object.assign(Uo,{Input:Go,Button:Ho,Label:jo,Options:zo,Option:Ko});export{Nt as Combobox,Ho as ComboboxButton,Go as ComboboxInput,jo as ComboboxLabel,Ko as ComboboxOption,zo as ComboboxOptions}; |
@@ -1,3 +0,4 @@ | ||
import React, { ReactNode, Ref } from 'react'; | ||
import { Props } from '../../types.js'; | ||
import React, { type ElementType, type ReactNode, type Ref } from 'react'; | ||
import type { Props } from '../../types.js'; | ||
import { type HasDisplayName, type RefProp } from '../../utils/render.js'; | ||
interface SharedData { | ||
@@ -8,4 +9,6 @@ slot?: {}; | ||
} | ||
export declare function useDescribedBy(): string | undefined; | ||
interface DescriptionProviderProps extends SharedData { | ||
children: ReactNode; | ||
value?: string | undefined; | ||
} | ||
@@ -16,5 +19,9 @@ export declare function useDescriptions(): [ | ||
]; | ||
export declare let Description: (<TTag extends React.ElementType<any> = "p">(props: Props<TTag, {}, "1D45E01E-AF44-47C4-988A-19A94EBAF55C">, ref: Ref<HTMLParagraphElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
declare let DEFAULT_DESCRIPTION_TAG: "p"; | ||
export type DescriptionProps<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG> = Props<TTag>; | ||
declare function DescriptionFn<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG>(props: DescriptionProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
export interface _internal_ComponentDescription extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG>(props: DescriptionProps<TTag> & RefProp<typeof DescriptionFn>): JSX.Element; | ||
} | ||
export declare let Description: _internal_ComponentDescription; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import f,{createContext as m,useContext as D,useMemo as l,useState as P}from"react";import{useId as T}from'../../hooks/use-id.js';import{forwardRefWithAs as g,render as x}from'../../utils/render.js';import{useIsoMorphicEffect as E}from'../../hooks/use-iso-morphic-effect.js';import{useSyncRefs as h}from'../../hooks/use-sync-refs.js';import{useEvent as v}from'../../hooks/use-event.js';let d=m(null);function u(){let n=D(d);if(n===null){let t=new Error("You used a <Description /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(t,u),t}return n}function k(){let[n,t]=P([]);return[n.length>0?n.join(" "):void 0,l(()=>function(e){let i=v(r=>(t(o=>[...o,r]),()=>t(o=>{let s=o.slice(),p=s.indexOf(r);return p!==-1&&s.splice(p,1),s}))),a=l(()=>({register:i,slot:e.slot,name:e.name,props:e.props}),[i,e.slot,e.name,e.props]);return f.createElement(d.Provider,{value:a},e.children)},[t])]}let S="p",F=g(function(t,c){let e=T(),{id:i=`headlessui-description-${e}`,...a}=t,r=u(),o=h(c);E(()=>r.register(i),[i,r.register]);let s={ref:o,...r.props,id:i};return x({ourProps:s,theirProps:a,slot:r.slot||{},defaultTag:S,name:r.name||"Description"})});export{F as Description,k 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}; |
@@ -1,55 +0,70 @@ | ||
import React, { MutableRefObject, Ref } from 'react'; | ||
import { Props } from '../../types.js'; | ||
import { PropsForFeatures } from '../../utils/render.js'; | ||
interface DialogRenderPropArg { | ||
import React, { type ElementType, type MutableRefObject, type Ref } from 'react'; | ||
import type { Props } from '../../types.js'; | ||
import { type HasDisplayName, type PropsForFeatures, type RefProp } from '../../utils/render.js'; | ||
import { type _internal_ComponentDescription } from '../description/description.js'; | ||
declare let DEFAULT_DIALOG_TAG: "div"; | ||
type DialogRenderPropArg = { | ||
open: boolean; | ||
} | ||
declare type DialogPropsWeControl = 'role' | 'aria-modal' | 'aria-describedby' | 'aria-labelledby'; | ||
}; | ||
type DialogPropsWeControl = 'aria-describedby' | 'aria-labelledby' | 'aria-modal'; | ||
declare let DialogRenderFeatures: number; | ||
interface OverlayRenderPropArg { | ||
export type DialogProps<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> = Props<TTag, DialogRenderPropArg, DialogPropsWeControl, PropsForFeatures<typeof DialogRenderFeatures> & { | ||
open?: boolean; | ||
onClose(value: boolean): void; | ||
initialFocus?: MutableRefObject<HTMLElement | null>; | ||
role?: 'dialog' | 'alertdialog'; | ||
autoFocus?: boolean; | ||
transition?: boolean; | ||
__demoMode?: boolean; | ||
}>; | ||
declare function DialogFn<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(props: DialogProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_PANEL_TAG: "div"; | ||
type PanelRenderPropArg = { | ||
open: boolean; | ||
} | ||
declare type OverlayPropsWeControl = 'aria-hidden' | 'onClick'; | ||
interface BackdropRenderPropArg { | ||
}; | ||
export type DialogPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, never, { | ||
transition?: boolean; | ||
}>; | ||
declare function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DialogPanelProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_BACKDROP_TAG: "div"; | ||
type BackdropRenderPropArg = { | ||
open: boolean; | ||
} | ||
declare type BackdropPropsWeControl = 'aria-hidden' | 'onClick'; | ||
interface PanelRenderPropArg { | ||
}; | ||
export type DialogBackdropProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = Props<TTag, BackdropRenderPropArg, never, { | ||
transition?: boolean; | ||
}>; | ||
declare function BackdropFn<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(props: DialogBackdropProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_TITLE_TAG: "h2"; | ||
type TitleRenderPropArg = { | ||
open: boolean; | ||
}; | ||
export type DialogTitleProps<TTag extends ElementType = typeof DEFAULT_TITLE_TAG> = Props<TTag, TitleRenderPropArg>; | ||
declare function TitleFn<TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(props: DialogTitleProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
export interface _internal_ComponentDialog extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(props: DialogProps<TTag> & RefProp<typeof DialogFn>): JSX.Element; | ||
} | ||
interface TitleRenderPropArg { | ||
open: boolean; | ||
export interface _internal_ComponentDialogPanel extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DialogPanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element; | ||
} | ||
export declare let Dialog: (<TTag extends React.ElementType<any> = "div">(props: Props<TTag, DialogRenderPropArg, DialogPropsWeControl> & (({ | ||
static?: undefined; | ||
} & { | ||
unmount?: boolean | undefined; | ||
}) | ({ | ||
unmount?: undefined; | ||
} & { | ||
static?: boolean | undefined; | ||
})) & { | ||
open?: boolean | undefined; | ||
onClose(value: boolean): void; | ||
initialFocus?: React.MutableRefObject<HTMLElement | null> | undefined; | ||
__demoMode?: boolean | undefined; | ||
}, ref: Ref<HTMLDivElement>) => JSX.Element) & { | ||
displayName: string; | ||
} & { | ||
Backdrop: (<TTag_1 extends React.ElementType<any> = "div">(props: Props<TTag_1, BackdropRenderPropArg, BackdropPropsWeControl>, ref: Ref<HTMLDivElement>) => JSX.Element) & { | ||
displayName: string; | ||
}; | ||
Panel: (<TTag_2 extends React.ElementType<any> = "div">(props: Props<TTag_2, PanelRenderPropArg, "1D45E01E-AF44-47C4-988A-19A94EBAF55C">, ref: Ref<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Overlay: (<TTag_3 extends React.ElementType<any> = "div">(props: Props<TTag_3, OverlayRenderPropArg, OverlayPropsWeControl>, ref: Ref<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Title: (<TTag_4 extends React.ElementType<any> = "h2">(props: Props<TTag_4, TitleRenderPropArg, "1D45E01E-AF44-47C4-988A-19A94EBAF55C">, ref: Ref<HTMLHeadingElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Description: (<TTag_5 extends React.ElementType<any> = "p">(props: Props<TTag_5, {}, "1D45E01E-AF44-47C4-988A-19A94EBAF55C">, ref: React.Ref<HTMLParagraphElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
export interface _internal_ComponentDialogBackdrop extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(props: DialogBackdropProps<TTag> & RefProp<typeof BackdropFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentDialogTitle extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(props: DialogTitleProps<TTag> & RefProp<typeof TitleFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentDialogDescription extends _internal_ComponentDescription { | ||
} | ||
export declare let DialogPanel: _internal_ComponentDialogPanel; | ||
export declare let DialogBackdrop: _internal_ComponentDialogBackdrop; | ||
export declare let DialogTitle: _internal_ComponentDialogTitle; | ||
/** @deprecated use `<Description>` instead of `<DialogDescription>` */ | ||
export declare let DialogDescription: _internal_ComponentDialogDescription; | ||
export declare let Dialog: _internal_ComponentDialog & { | ||
/** @deprecated use `<DialogPanel>` instead of `<Dialog.Panel>` */ | ||
Panel: _internal_ComponentDialogPanel; | ||
/** @deprecated use `<DialogTitle>` instead of `<Dialog.Title>` */ | ||
Title: _internal_ComponentDialogTitle; | ||
/** @deprecated use `<Description>` instead of `<Dialog.Description>` */ | ||
Description: _internal_ComponentDialogDescription; | ||
}; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import g,{createContext as le,createRef as ne,useContext as V,useEffect as k,useMemo as b,useReducer as ae,useRef as H,useState as ie}from"react";import{match as M}from'../../utils/match.js';import{forwardRefWithAs as A,render as O,Features as K}from'../../utils/render.js';import{useSyncRefs as C}from'../../hooks/use-sync-refs.js';import{Keys as se}from'../keyboard.js';import{isDisabledReactIssue7711 as de}from'../../utils/bugs.js';import{useId as S}from'../../hooks/use-id.js';import{FocusTrap as L}from'../../components/focus-trap/focus-trap.js';import{useInertOthers as pe}from'../../hooks/use-inert-others.js';import{Portal as W}from'../../components/portal/portal.js';import{ForcePortalRoot as B}from'../../internal/portal-force-root.js';import{Description as ue,useDescriptions as fe}from'../description/description.js';import{useOpenClosed as ce,State as q}from'../../internal/open-closed.js';import{useServerHandoffComplete as ge}from'../../hooks/use-server-handoff-complete.js';import{StackProvider as Te,StackMessage as z}from'../../internal/stack-context.js';import{useOutsideClick as me}from'../../hooks/use-outside-click.js';import{useOwnerDocument as De}from'../../hooks/use-owner.js';import{useEventListener as Pe}from'../../hooks/use-event-listener.js';import{Hidden as ye,Features as Re}from'../../internal/hidden.js';import{useEvent as h}from'../../hooks/use-event.js';import{disposables as Ee}from'../../utils/disposables.js';import{isIOS as ve}from'../../utils/platform.js';var be=(t=>(t[t.Open=0]="Open",t[t.Closed=1]="Closed",t))(be||{}),he=(e=>(e[e.SetTitleId=0]="SetTitleId",e))(he||{});let Ae={[0](r,e){return r.titleId===e.id?r:{...r,titleId:e.id}}},I=le(null);I.displayName="DialogContext";function w(r){let e=V(I);if(e===null){let t=new Error(`<${r} /> is missing a parent <Dialog /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(t,w),t}return e}function Oe(r,e,t=()=>[document.body]){k(()=>{var u;if(!e||!r)return;let d=Ee();function i(l,n,D){let p=l.style.getPropertyValue(n);return Object.assign(l.style,{[n]:D}),d.add(()=>{Object.assign(l.style,{[n]:p})})}let o=r.documentElement,s=((u=r.defaultView)!=null?u:window).innerWidth-o.clientWidth;if(i(o,"overflow","hidden"),s>0){let l=o.clientWidth-o.offsetWidth,n=s-l;i(o,"paddingRight",`${n}px`)}if(ve()){let l=window.pageYOffset;i(document.body,"marginTop",`-${l}px`),window.scrollTo(0,0),d.addEventListener(r,"touchmove",n=>{n.target instanceof HTMLElement&&!t().some(D=>D.contains(n.target))&&n.preventDefault()},{passive:!1}),d.add(()=>{window.scrollTo(0,window.pageYOffset+l)})}return d.dispose},[r,e])}function Ce(r,e){return M(e.type,Ae,r,e)}let Se="div",Le=K.RenderStrategy|K.Static,we=A(function(e,t){let d=S(),{id:i=`headlessui-dialog-${d}`,open:o,onClose:a,initialFocus:s,__demoMode:u=!1,...l}=e,[n,D]=ie(0),p=ce();o===void 0&&p!==null&&(o=M(p,{[q.Open]:!0,[q.Closed]:!1}));let _=H(new Set),m=H(null),J=C(m,t),G=H(null),P=De(m),U=e.hasOwnProperty("open")||p!==null,$=e.hasOwnProperty("onClose");if(!U&&!$)throw new Error("You have to provide an `open` and an `onClose` prop to the `Dialog` component.");if(!U)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 o!="boolean")throw new Error(`You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${o}`);if(typeof a!="function")throw new Error(`You provided an \`onClose\` prop to the \`Dialog\`, but the value is not a function. Received: ${a}`);let f=o?0:1,[R,Q]=ae(Ce,{titleId:null,descriptionId:null,panelRef:ne()}),E=h(()=>a(!1)),Y=h(c=>Q({type:0,id:c})),x=ge()?u?!1:f===0:!1,F=n>1,X=V(I)!==null,Z=F?"parent":"leaf";pe(m,F?x:!1);let j=h(()=>{var v,T;return[...Array.from((v=P==null?void 0:P.querySelectorAll("body > *, [data-headlessui-portal]"))!=null?v:[]).filter(y=>!(!(y instanceof HTMLElement)||y.contains(G.current)||R.panelRef.current&&y.contains(R.panelRef.current))),(T=R.panelRef.current)!=null?T:m.current]});me(()=>j(),E,x&&!F),Pe(P==null?void 0:P.defaultView,"keydown",c=>{c.defaultPrevented||c.key===se.Escape&&f===0&&(F||(c.preventDefault(),c.stopPropagation(),E()))}),Oe(P,f===0&&!X,j),k(()=>{if(f!==0||!m.current)return;let c=new IntersectionObserver(v=>{for(let T of v)T.boundingClientRect.x===0&&T.boundingClientRect.y===0&&T.boundingClientRect.width===0&&T.boundingClientRect.height===0&&E()});return c.observe(m.current),()=>c.disconnect()},[f,m,E]);let[ee,te]=fe(),oe=b(()=>[{dialogState:f,close:E,setTitleId:Y},R],[f,R,E,Y]),N=b(()=>({open:f===0}),[f]),re={ref:J,id:i,role:"dialog","aria-modal":f===0?!0:void 0,"aria-labelledby":R.titleId,"aria-describedby":ee};return g.createElement(Te,{type:"Dialog",enabled:f===0,element:m,onUpdate:h((c,v,T)=>{v==="Dialog"&&M(c,{[z.Add](){_.current.add(T),D(y=>y+1)},[z.Remove](){_.current.add(T),D(y=>y-1)}})})},g.createElement(B,{force:!0},g.createElement(W,null,g.createElement(I.Provider,{value:oe},g.createElement(W.Group,{target:m},g.createElement(B,{force:!1},g.createElement(te,{slot:N,name:"Dialog.Description"},g.createElement(L,{initialFocus:s,containers:_,features:x?M(Z,{parent:L.features.RestoreFocus,leaf:L.features.All&~L.features.FocusLock}):L.features.None},O({ourProps:re,theirProps:l,slot:N,defaultTag:Se,features:Le,visible:f===0,name:"Dialog"})))))))),g.createElement(ye,{features:Re.Hidden,ref:G}))}),Fe="div",ke=A(function(e,t){let d=S(),{id:i=`headlessui-dialog-overlay-${d}`,...o}=e,[{dialogState:a,close:s}]=w("Dialog.Overlay"),u=C(t),l=h(p=>{if(p.target===p.currentTarget){if(de(p.currentTarget))return p.preventDefault();p.preventDefault(),p.stopPropagation(),s()}}),n=b(()=>({open:a===0}),[a]);return O({ourProps:{ref:u,id:i,"aria-hidden":!0,onClick:l},theirProps:o,slot:n,defaultTag:Fe,name:"Dialog.Overlay"})}),Me="div",Ie=A(function(e,t){let d=S(),{id:i=`headlessui-dialog-backdrop-${d}`,...o}=e,[{dialogState:a},s]=w("Dialog.Backdrop"),u=C(t);k(()=>{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 l=b(()=>({open:a===0}),[a]);return g.createElement(B,{force:!0},g.createElement(W,null,O({ourProps:{ref:u,id:i,"aria-hidden":!0},theirProps:o,slot:l,defaultTag:Me,name:"Dialog.Backdrop"})))}),_e="div",xe=A(function(e,t){let d=S(),{id:i=`headlessui-dialog-panel-${d}`,...o}=e,[{dialogState:a},s]=w("Dialog.Panel"),u=C(t,s.panelRef),l=b(()=>({open:a===0}),[a]),n=h(p=>{p.stopPropagation()});return O({ourProps:{ref:u,id:i,onClick:n},theirProps:o,slot:l,defaultTag:_e,name:"Dialog.Panel"})}),He="h2",We=A(function(e,t){let d=S(),{id:i=`headlessui-dialog-title-${d}`,...o}=e,[{dialogState:a,setTitleId:s}]=w("Dialog.Title"),u=C(t);k(()=>(s(i),()=>s(null)),[i,s]);let l=b(()=>({open:a===0}),[a]);return O({ourProps:{ref:u,id:i},theirProps:o,slot:l,defaultTag:He,name:"Dialog.Title"})}),mt=Object.assign(we,{Backdrop:Ie,Panel:xe,Overlay:ke,Title:We,Description:ue});export{mt as Dialog}; | ||
"use client";import n,{Fragment as B,createContext as le,createRef as ae,useContext as ie,useEffect as pe,useMemo as A,useReducer as se,useRef as U}from"react";import{useEscape as de}from'../../hooks/use-escape.js';import{useEvent as _}from'../../hooks/use-event.js';import{useId as I}from'../../hooks/use-id.js';import{useInertOthers as ue}from'../../hooks/use-inert-others.js';import{useIsTouchDevice as fe}from'../../hooks/use-is-touch-device.js';import{useOnDisappear as Te}from'../../hooks/use-on-disappear.js';import{useOutsideClick as ge}from'../../hooks/use-outside-click.js';import{useOwnerDocument as me}from'../../hooks/use-owner.js';import{useRootContainers as ce}from'../../hooks/use-root-containers.js';import{useScrollLock as De}from'../../hooks/use-scroll-lock.js';import{useServerHandoffComplete as Pe}from'../../hooks/use-server-handoff-complete.js';import{useSyncRefs as w}from'../../hooks/use-sync-refs.js';import{CloseProvider as ye}from'../../internal/close-provider.js';import{HoistFormFields as Ee}from'../../internal/form-fields.js';import{ResetOpenClosedProvider as Ae,State as v,useOpenClosed as N}from'../../internal/open-closed.js';import{ForcePortalRoot as W}from'../../internal/portal-force-root.js';import{match as _e}from'../../utils/match.js';import{RenderFeatures as $,forwardRefWithAs as C,render as x}from'../../utils/render.js';import{Description as j,useDescriptions as Ce}from'../description/description.js';import{FocusTrap as Fe,FocusTrapFeatures as F}from'../focus-trap/focus-trap.js';import{Portal as be,PortalGroup as Re,useNestedPortals as ve}from'../portal/portal.js';import{Transition as xe,TransitionChild as Y}from'../transition/transition.js';var Le=(o=>(o[o.Open=0]="Open",o[o.Closed=1]="Closed",o))(Le||{}),Oe=(t=>(t[t.SetTitleId=0]="SetTitleId",t))(Oe||{});let he={[0](e,t){return e.titleId===t.id?e:{...e,titleId:t.id}}},G=le(null);G.displayName="DialogContext";function L(e){let t=ie(G);if(t===null){let o=new Error(`<${e} /> is missing a parent <Dialog /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,L),o}return t}function Se(e,t){return _e(t.type,he,e,t)}let J=C(function(t,o){let a=I(),{id:l=`headlessui-dialog-${a}`,open:i,onClose:p,initialFocus:d,role:s="dialog",autoFocus:c=!0,__demoMode:T=!1,unmount:D=!1,...O}=t,h=U(!1);s=function(){return s==="dialog"||s==="alertdialog"?s:(h.current||(h.current=!0,console.warn(`Invalid role [${s}] passed to <Dialog />. Only \`dialog\` and and \`alertdialog\` are supported. Using \`dialog\` instead.`)),"dialog")}();let P=N();i===void 0&&P!==null&&(i=(P&v.Open)===v.Open);let u=U(null),K=w(u,o),b=me(u),f=i?0:1,[R,X]=se(Se,{titleId:null,descriptionId:null,panelRef:ae()}),g=_(()=>p(!1)),k=_(r=>X({type:0,id:r})),m=Pe()?f===0:!1,[V,q]=ve(),z={get current(){var r;return(r=R.panelRef.current)!=null?r:u.current}},{resolveContainers:S,mainTreeNodeRef:Q,MainTreeNode:Z}=ce({portals:V,defaultContainers:[z]}),M=P!==null?(P&v.Closing)===v.Closing:!1;ue(T||M?!1:m,{allowed:_(()=>{var r,E;return[(E=(r=u.current)==null?void 0:r.closest("[data-headlessui-portal]"))!=null?E:null]}),disallowed:_(()=>{var r,E;return[(E=(r=Q.current)==null?void 0:r.closest("body > *:not(#headlessui-portal-root)"))!=null?E:null]})}),ge(m,S,r=>{r.preventDefault(),g()}),de(m,b==null?void 0:b.defaultView,r=>{r.preventDefault(),r.stopPropagation(),document.activeElement&&"blur"in document.activeElement&&typeof document.activeElement.blur=="function"&&document.activeElement.blur(),g()}),De(T||M?!1:m,b,S),Te(m,u,g);let[ee,te]=Ce(),oe=A(()=>[{dialogState:f,close:g,setTitleId:k,unmount:D},R],[f,R,g,k,D]),H=A(()=>({open:f===0}),[f]),ne={ref:K,id:l,role:s,tabIndex:-1,"aria-modal":T?void 0:f===0?!0:void 0,"aria-labelledby":R.titleId,"aria-describedby":ee,unmount:D},re=!fe(),y=F.None;return m&&!T&&(y|=F.RestoreFocus,y|=F.TabLock,c&&(y|=F.AutoFocus),re&&(y|=F.InitialFocus)),n.createElement(Ae,null,n.createElement(W,{force:!0},n.createElement(be,null,n.createElement(G.Provider,{value:oe},n.createElement(Re,{target:u},n.createElement(W,{force:!1},n.createElement(te,{slot:H},n.createElement(q,null,n.createElement(Fe,{initialFocus:d,initialFocusFallback:u,containers:S,features:y},n.createElement(ye,{value:g},x({ourProps:ne,theirProps:O,slot:H,defaultTag:Ie,features:we,visible:f===0,name:"Dialog"})))))))))),n.createElement(Ee,null,n.createElement(Z,null)))}),Ie="div",we=$.RenderStrategy|$.Static;function Ge(e,t){let{transition:o=!1,open:a,...l}=e,i=N(),p=e.hasOwnProperty("open")||i!==null,d=e.hasOwnProperty("onClose");if(!p&&!d)throw new Error("You have to provide an `open` and an `onClose` prop to the `Dialog` component.");if(!p)throw new Error("You provided an `onClose` prop to the `Dialog`, but forgot an `open` prop.");if(!d)throw new Error("You provided an `open` prop to the `Dialog`, but forgot an `onClose` prop.");if(!i&&typeof e.open!="boolean")throw new Error(`You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${e.open}`);if(typeof e.onClose!="function")throw new Error(`You provided an \`onClose\` prop to the \`Dialog\`, but the value is not a function. Received: ${e.onClose}`);return(a!==void 0||o)&&!l.static?n.createElement(xe,{show:a,transition:o,unmount:l.unmount},n.createElement(J,{ref:t,...l})):n.createElement(J,{ref:t,open:a,...l})}let ke="div";function Me(e,t){let o=I(),{id:a=`headlessui-dialog-panel-${o}`,transition:l=!1,...i}=e,[{dialogState:p,unmount:d},s]=L("Dialog.Panel"),c=w(t,s.panelRef),T=A(()=>({open:p===0}),[p]),D=_(u=>{u.stopPropagation()}),O={ref:c,id:a,onClick:D};return n.createElement(l?Y:B,{...l?{unmount:d}:{}},x({ourProps:O,theirProps:i,slot:T,defaultTag:ke,name:"Dialog.Panel"}))}let He="div";function Be(e,t){let{transition:o=!1,...a}=e,[{dialogState:l,unmount:i}]=L("Dialog.Backdrop"),p=A(()=>({open:l===0}),[l]),d={ref:t,"aria-hidden":!0};return n.createElement(o?Y:B,{...o?{unmount:i}:{}},x({ourProps:d,theirProps:a,slot:p,defaultTag:He,name:"Dialog.Backdrop"}))}let Ue="h2";function Ne(e,t){let o=I(),{id:a=`headlessui-dialog-title-${o}`,...l}=e,[{dialogState:i,setTitleId:p}]=L("Dialog.Title"),d=w(t);pe(()=>(p(a),()=>p(null)),[a,p]);let s=A(()=>({open:i===0}),[i]);return x({ourProps:{ref:d,id:a},theirProps:l,slot:s,defaultTag:Ue,name:"Dialog.Title"})}let We=C(Ge),$e=C(Me),Dt=C(Be),je=C(Ne),Pt=j,yt=Object.assign(We,{Panel:$e,Title:je,Description:j});export{yt as Dialog,Dt as DialogBackdrop,Pt as DialogDescription,$e as DialogPanel,je as DialogTitle}; |
@@ -1,51 +0,59 @@ | ||
import React, { MutableRefObject, Ref } from 'react'; | ||
import { Props } from '../../types.js'; | ||
import { PropsForFeatures } from '../../utils/render.js'; | ||
interface DisclosureRenderPropArg { | ||
import React, { type ElementType, type MutableRefObject, type Ref } from 'react'; | ||
import type { Props } from '../../types.js'; | ||
import { type HasDisplayName, type PropsForFeatures, type RefProp } from '../../utils/render.js'; | ||
declare let DEFAULT_DISCLOSURE_TAG: React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>; | ||
type DisclosureRenderPropArg = { | ||
open: boolean; | ||
close(focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null>): void; | ||
} | ||
interface ButtonRenderPropArg { | ||
}; | ||
type DisclosurePropsWeControl = never; | ||
export type DisclosureProps<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG> = Props<TTag, DisclosureRenderPropArg, DisclosurePropsWeControl, { | ||
defaultOpen?: boolean; | ||
}>; | ||
declare function DisclosureFn<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG>(props: DisclosureProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_BUTTON_TAG: "button"; | ||
type ButtonRenderPropArg = { | ||
open: boolean; | ||
} | ||
declare type ButtonPropsWeControl = 'type' | 'aria-expanded' | 'aria-controls' | 'onKeyDown' | 'onClick'; | ||
interface PanelRenderPropArg { | ||
hover: boolean; | ||
active: boolean; | ||
disabled: boolean; | ||
focus: boolean; | ||
autofocus: boolean; | ||
}; | ||
type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded'; | ||
export type DisclosureButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, { | ||
disabled?: boolean; | ||
autoFocus?: boolean; | ||
}>; | ||
declare function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: DisclosureButtonProps<TTag>, ref: Ref<HTMLButtonElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
declare let DEFAULT_PANEL_TAG: "div"; | ||
type PanelRenderPropArg = { | ||
open: boolean; | ||
close: (focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null>) => void; | ||
}; | ||
type DisclosurePanelPropsWeControl = never; | ||
declare let PanelRenderFeatures: number; | ||
export type DisclosurePanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, DisclosurePanelPropsWeControl, { | ||
transition?: boolean; | ||
} & PropsForFeatures<typeof PanelRenderFeatures>>; | ||
declare function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DisclosurePanelProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
export interface _internal_ComponentDisclosure extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG>(props: DisclosureProps<TTag> & RefProp<typeof DisclosureFn>): JSX.Element; | ||
} | ||
declare let PanelRenderFeatures: number; | ||
export declare let Disclosure: (<TTag extends React.ElementType<any> = React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>>(props: Omit<import('../../types.js').PropsOf<TTag>, "as" | "children" | "refName" | "className"> & { | ||
as?: TTag | undefined; | ||
children?: React.ReactNode | ((bag: DisclosureRenderPropArg) => React.ReactElement<any, string | React.JSXElementConstructor<any>>); | ||
refName?: string | undefined; | ||
} & (true extends (import('../../types.js').PropsOf<TTag> extends never ? never : "className" extends keyof import('../../types.js').PropsOf<TTag> ? true : never) ? { | ||
className?: import('../../types.js').PropsOf<TTag>["className"] | ((bag: DisclosureRenderPropArg) => string) | undefined; | ||
} : {}) & { | ||
defaultOpen?: boolean | undefined; | ||
}, ref: React.Ref<TTag>) => JSX.Element) & { | ||
displayName: string; | ||
} & { | ||
Button: (<TTag_1 extends React.ElementType<any> = "button">(props: Props<TTag_1, ButtonRenderPropArg, ButtonPropsWeControl>, ref: Ref<HTMLButtonElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Panel: (<TTag_2 extends React.ElementType<any> = "div">(props: Omit<import('../../types.js').PropsOf<TTag_2>, "as" | "children" | "refName" | "className"> & { | ||
as?: TTag_2 | undefined; | ||
children?: React.ReactNode | ((bag: PanelRenderPropArg) => React.ReactElement<any, string | React.JSXElementConstructor<any>>); | ||
refName?: string | undefined; | ||
} & (true extends (import('../../types.js').PropsOf<TTag_2> extends never ? never : "className" extends keyof import('../../types.js').PropsOf<TTag_2> ? true : never) ? { | ||
className?: import('../../types.js').PropsOf<TTag_2>["className"] | ((bag: PanelRenderPropArg) => string) | undefined; | ||
} : {}) & (({ | ||
static?: undefined; | ||
} & { | ||
unmount?: boolean | undefined; | ||
}) | ({ | ||
unmount?: undefined; | ||
} & { | ||
static?: boolean | undefined; | ||
})), ref: Ref<HTMLDivElement>) => JSX.Element) & { | ||
displayName: string; | ||
}; | ||
export interface _internal_ComponentDisclosureButton extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: DisclosureButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentDisclosurePanel extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DisclosurePanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element; | ||
} | ||
export declare let DisclosureButton: _internal_ComponentDisclosureButton; | ||
export declare let DisclosurePanel: _internal_ComponentDisclosurePanel; | ||
export declare let Disclosure: _internal_ComponentDisclosure & { | ||
/** @deprecated use `<DisclosureButton>` instead of `<Disclosure.Button>` */ | ||
Button: _internal_ComponentDisclosureButton; | ||
/** @deprecated use `<DisclosurePanel>` instead of `<Disclosure.Panel>` */ | ||
Panel: _internal_ComponentDisclosurePanel; | ||
}; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import g,{Fragment as U,createContext as I,useContext as C,useEffect as w,useMemo as E,useReducer as j,useRef as R}from"react";import{match as L}from'../../utils/match.js';import{forwardRefWithAs as O,render as k,Features as F}from'../../utils/render.js';import{optionalRef as N,useSyncRefs as M}from'../../hooks/use-sync-refs.js';import{useId as _}from'../../hooks/use-id.js';import{Keys as m}from'../keyboard.js';import{isDisabledReactIssue7711 as G}from'../../utils/bugs.js';import{OpenClosedProvider as W,State as x,useOpenClosed as $}from'../../internal/open-closed.js';import{useResolveButtonType as q}from'../../hooks/use-resolve-button-type.js';import{getOwnerDocument as z}from'../../utils/owner.js';import{useEvent as b}from'../../hooks/use-event.js';var J=(l=>(l[l.Open=0]="Open",l[l.Closed=1]="Closed",l))(J||{}),Q=(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))(Q||{});let V={[0]:e=>({...e,disclosureState:L(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}}},B=I(null);B.displayName="DisclosureContext";function v(e){let n=C(B);if(n===null){let l=new Error(`<${e} /> is missing a parent <Disclosure /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(l,v),l}return n}let h=I(null);h.displayName="DisclosureAPIContext";function K(e){let n=C(h);if(n===null){let l=new Error(`<${e} /> is missing a parent <Disclosure /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(l,K),l}return n}let H=I(null);H.displayName="DisclosurePanelContext";function X(){return C(H)}function Y(e,n){return L(n.type,V,e,n)}let Z=U,ee=O(function(n,l){let{defaultOpen:y=!1,...u}=n,T=R(null),t=M(l,N(a=>{T.current=a},n.as===void 0||n.as===U)),o=R(null),f=R(null),s=j(Y,{disclosureState:y?0:1,linkedPanel:!1,buttonRef:f,panelRef:o,buttonId:null,panelId:null}),[{disclosureState:i,buttonId:p},D]=s,d=b(a=>{D({type:1});let r=z(T);if(!r||!p)return;let c=(()=>a?a instanceof HTMLElement?a:a.current instanceof HTMLElement?a.current:r.getElementById(p):r.getElementById(p))();c==null||c.focus()}),P=E(()=>({close:d}),[d]),A=E(()=>({open:i===0,close:d}),[i,d]),S={ref:t};return g.createElement(B.Provider,{value:s},g.createElement(h.Provider,{value:P},g.createElement(W,{value:L(i,{[0]:x.Open,[1]:x.Closed})},k({ourProps:S,theirProps:u,slot:A,defaultTag:Z,name:"Disclosure"}))))}),te="button",ne=O(function(n,l){let y=_(),{id:u=`headlessui-disclosure-button-${y}`,...T}=n,[t,o]=v("Disclosure.Button"),f=X(),s=f===null?!1:f===t.panelId,i=R(null),p=M(i,l,s?null:t.buttonRef);w(()=>{if(!s)return o({type:2,buttonId:u}),()=>{o({type:2,buttonId:null})}},[u,o,s]);let D=b(r=>{var c;if(s){if(t.disclosureState===1)return;switch(r.key){case m.Space:case m.Enter:r.preventDefault(),r.stopPropagation(),o({type:0}),(c=t.buttonRef.current)==null||c.focus();break}}else switch(r.key){case m.Space:case m.Enter:r.preventDefault(),r.stopPropagation(),o({type:0});break}}),d=b(r=>{switch(r.key){case m.Space:r.preventDefault();break}}),P=b(r=>{var c;G(r.currentTarget)||n.disabled||(s?(o({type:0}),(c=t.buttonRef.current)==null||c.focus()):o({type:0}))}),A=E(()=>({open:t.disclosureState===0}),[t]),S=q(n,i),a=s?{ref:p,type:S,onKeyDown:D,onClick:P}:{ref:p,id:u,type:S,"aria-expanded":n.disabled?void 0:t.disclosureState===0,"aria-controls":t.linkedPanel?t.panelId:void 0,onKeyDown:D,onKeyUp:d,onClick:P};return k({ourProps:a,theirProps:T,slot:A,defaultTag:te,name:"Disclosure.Button"})}),le="div",re=F.RenderStrategy|F.Static,oe=O(function(n,l){let y=_(),{id:u=`headlessui-disclosure-panel-${y}`,...T}=n,[t,o]=v("Disclosure.Panel"),{close:f}=K("Disclosure.Panel"),s=M(l,t.panelRef,P=>{o({type:P?4:5})});w(()=>(o({type:3,panelId:u}),()=>{o({type:3,panelId:null})}),[u,o]);let i=$(),p=(()=>i!==null?i===x.Open:t.disclosureState===0)(),D=E(()=>({open:t.disclosureState===0,close:f}),[t,f]),d={ref:s,id:u};return g.createElement(H.Provider,{value:t.panelId},k({ourProps:d,theirProps:T,slot:D,defaultTag:le,features:re,visible:p,name:"Disclosure.Panel"}))}),Le=Object.assign(ee,{Button:ne,Panel:oe});export{Le as Disclosure}; | ||
"use client";import{useFocusRing as Q}from"@react-aria/focus";import{useHover as Y}from"@react-aria/interactions";import m,{Fragment as K,createContext as x,useContext as L,useEffect as j,useMemo as R,useReducer as Z,useRef as A}from"react";import{useActivePress as ee}from'../../hooks/use-active-press.js';import{useEvent as C}from'../../hooks/use-event.js';import{useId as W}from'../../hooks/use-id.js';import{useResolveButtonType as te}from'../../hooks/use-resolve-button-type.js';import{optionalRef as ne,useSyncRefs as v}from'../../hooks/use-sync-refs.js';import{transitionDataAttributes as oe,useTransition as re}from'../../hooks/use-transition.js';import{CloseProvider as le}from'../../internal/close-provider.js';import{OpenClosedProvider as se,ResetOpenClosedProvider as ie,State as I,useOpenClosed as ue}from'../../internal/open-closed.js';import{isDisabledReactIssue7711 as ae}from'../../utils/bugs.js';import{match as O}from'../../utils/match.js';import{getOwnerDocument as pe}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 ce}from'../../utils/start-transition.js';import{Keys as b}from'../keyboard.js';var de=(r=>(r[r.Open=0]="Open",r[r.Closed=1]="Closed",r))(de||{}),fe=(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))(fe||{});let Te={[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 r=new Error(`<${e} /> is missing a parent <Disclosure /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,F),r}return n}let k=x(null);k.displayName="DisclosureAPIContext";function V(e){let n=L(k);if(n===null){let r=new Error(`<${e} /> is missing a parent <Disclosure /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,V),r}return n}let H=x(null);H.displayName="DisclosurePanelContext";function De(){return L(H)}function Pe(e,n){return O(n.type,Te,e,n)}let ye=K;function me(e,n){let{defaultOpen:r=!1,...c}=e,s=A(null),d=v(n,ne(u=>{s.current=u},e.as===void 0||e.as===K)),t=A(null),o=A(null),l=Z(Pe,{disclosureState:r?0:1,linkedPanel:!1,buttonRef:o,panelRef:t,buttonId:null,panelId:null}),[{disclosureState:f,buttonId:i},T]=l,p=C(u=>{T({type:1});let P=pe(s);if(!P||!i)return;let y=(()=>u?u instanceof HTMLElement?u:u.current instanceof HTMLElement?u.current:P.getElementById(i):P.getElementById(i))();y==null||y.focus()}),E=R(()=>({close:p}),[p]),D=R(()=>({open:f===0,close:p}),[f,p]),g={ref:d};return m.createElement(M.Provider,{value:l},m.createElement(k.Provider,{value:E},m.createElement(le,{value:p},m.createElement(se,{value:O(f,{[0]:I.Open,[1]:I.Closed})},B({ourProps:g,theirProps:c,slot:D,defaultTag:ye,name:"Disclosure"})))))}let Ee="button";function ge(e,n){let r=W(),{id:c=`headlessui-disclosure-button-${r}`,disabled:s=!1,autoFocus:d=!1,...t}=e,[o,l]=F("Disclosure.Button"),f=De(),i=f===null?!1:f===o.panelId,T=A(null),p=v(T,n,i?null:o.buttonRef),E=X();j(()=>{if(!i)return l({type:2,buttonId:c}),()=>{l({type:2,buttonId:null})}},[c,l,i]);let D=C(a=>{var S;if(i){if(o.disclosureState===1)return;switch(a.key){case b.Space:case b.Enter:a.preventDefault(),a.stopPropagation(),l({type:0}),(S=o.buttonRef.current)==null||S.focus();break}}else switch(a.key){case b.Space:case b.Enter:a.preventDefault(),a.stopPropagation(),l({type:0});break}}),g=C(a=>{switch(a.key){case b.Space:a.preventDefault();break}}),u=C(a=>{var S;ae(a.currentTarget)||s||(i?(l({type:0}),(S=o.buttonRef.current)==null||S.focus()):l({type:0}))}),{isFocusVisible:P,focusProps:y}=Q({autoFocus:d}),{isHovered:U,hoverProps:h}=Y({isDisabled:s}),{pressed:N,pressProps:w}=ee({disabled:s}),q=R(()=>({open:o.disclosureState===0,hover:U,active:N,disabled:s,focus:P,autofocus:d}),[o,U,N,P,s,d]),G=te(e,T),z=i?J({ref:p,type:G,disabled:s||void 0,autoFocus:d,onKeyDown:D,onClick:u},y,h,w):J({ref:p,id:c,type:G,"aria-expanded":o.disclosureState===0,"aria-controls":o.linkedPanel?o.panelId:void 0,disabled:s||void 0,autoFocus:d,onKeyDown:D,onKeyUp:g,onClick:u},y,h,w);return B({mergeRefs:E,ourProps:z,theirProps:t,slot:q,defaultTag:Ee,name:"Disclosure.Button"})}let Se="div",be=$.RenderStrategy|$.Static;function Re(e,n){let r=W(),{id:c=`headlessui-disclosure-panel-${r}`,transition:s=!1,...d}=e,[t,o]=F("Disclosure.Panel"),{close:l}=V("Disclosure.Panel"),f=X(),i=v(n,t.panelRef,u=>{ce(()=>o({type:u?4:5}))});j(()=>(o({type:3,panelId:c}),()=>{o({type:3,panelId:null})}),[c,o]);let T=ue(),[p,E]=re(s,t.panelRef,T!==null?(T&I.Open)===I.Open:t.disclosureState===0),D=R(()=>({open:t.disclosureState===0,close:l}),[t.disclosureState,l]),g={ref:i,id:c,...oe(E)};return m.createElement(ie,null,m.createElement(H.Provider,{value:t.panelId},B({mergeRefs:f,ourProps:g,theirProps:d,slot:D,defaultTag:Se,features:be,visible:p,name:"Disclosure.Panel"})))}let Ae=_(me),Ce=_(ge),Ie=_(Re),We=Object.assign(Ae,{Button:Ce,Panel:Ie});export{We as Disclosure,Ce as DisclosureButton,Ie as DisclosurePanel}; |
@@ -1,32 +0,36 @@ | ||
import React, { MutableRefObject, Ref } from 'react'; | ||
import { Props } from '../../types.js'; | ||
declare enum Features { | ||
import React, { type ElementType, type MutableRefObject, type Ref } from 'react'; | ||
import type { Props } from '../../types.js'; | ||
import { type HasDisplayName, type RefProp } from '../../utils/render.js'; | ||
type Containers = (() => Iterable<HTMLElement>) | MutableRefObject<Set<MutableRefObject<HTMLElement | null>>>; | ||
declare let DEFAULT_FOCUS_TRAP_TAG: "div"; | ||
export declare enum FocusTrapFeatures { | ||
/** No features enabled for the focus trap. */ | ||
None = 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 declare let FocusTrap: (<TTag extends React.ElementType<any> = "div">(props: Omit<import('../../types.js').PropsOf<TTag>, "as" | "children" | "refName" | "className"> & { | ||
as?: TTag | undefined; | ||
children?: React.ReactNode | ((bag: {}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>); | ||
refName?: string | undefined; | ||
} & (true extends (import('../../types.js').PropsOf<TTag> extends never ? never : "className" extends keyof import('../../types.js').PropsOf<TTag> ? true : never) ? { | ||
className?: import('../../types.js').PropsOf<TTag>["className"] | ((bag: {}) => string) | undefined; | ||
} : {}) & { | ||
initialFocus?: React.MutableRefObject<HTMLElement | null> | undefined; | ||
features?: Features | undefined; | ||
containers?: React.MutableRefObject<Set<React.MutableRefObject<HTMLElement | null>>> | undefined; | ||
}, ref: Ref<HTMLDivElement>) => JSX.Element) & { | ||
displayName: string; | ||
} & { | ||
features: typeof Features; | ||
type FocusTrapRenderPropArg = {}; | ||
type FocusTrapPropsWeControl = never; | ||
export type FocusTrapProps<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG> = Props<TTag, FocusTrapRenderPropArg, FocusTrapPropsWeControl, { | ||
initialFocus?: MutableRefObject<HTMLElement | null>; | ||
initialFocusFallback?: MutableRefObject<HTMLElement | null>; | ||
features?: FocusTrapFeatures; | ||
containers?: Containers; | ||
}>; | ||
declare function FocusTrapFn<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(props: FocusTrapProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
export interface _internal_ComponentFocusTrap extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(props: FocusTrapProps<TTag> & RefProp<typeof FocusTrapFn>): JSX.Element; | ||
} | ||
export declare let FocusTrap: _internal_ComponentFocusTrap & { | ||
/** @deprecated use `FocusTrapFeatures` instead of `FocusTrap.features` */ | ||
features: typeof FocusTrapFeatures; | ||
}; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import d,{useEffect as U,useRef as T}from"react";import{forwardRefWithAs as C,render as I}from'../../utils/render.js';import{useServerHandoffComplete as N}from'../../hooks/use-server-handoff-complete.js';import{useSyncRefs as x}from'../../hooks/use-sync-refs.js';import{Features as F,Hidden as v}from'../../internal/hidden.js';import{focusElement as f,focusIn as b,Focus as i,FocusResult as G}from'../../utils/focus-management.js';import{match as g}from'../../utils/match.js';import{useEvent as K}from'../../hooks/use-event.js';import{useTabDirection as V,Direction as M}from'../../hooks/use-tab-direction.js';import{useIsMounted as O}from'../../hooks/use-is-mounted.js';import{useOwnerDocument as W}from'../../hooks/use-owner.js';import{useEventListener as k}from'../../hooks/use-event-listener.js';import{microTask as y}from'../../utils/micro-task.js';import{useWatch as j}from'../../hooks/use-watch.js';import{useDisposables as q}from'../../hooks/use-disposables.js';let z="div";var A=(t=>(t[t.None=1]="None",t[t.InitialFocus=2]="InitialFocus",t[t.TabLock=4]="TabLock",t[t.FocusLock=8]="FocusLock",t[t.RestoreFocus=16]="RestoreFocus",t[t.All=30]="All",t))(A||{});let de=Object.assign(C(function(u,e){let l=T(null),a=x(l,e),{initialFocus:m,containers:t,features:n=30,...E}=u;N()||(n=1);let s=W(l);J({ownerDocument:s},Boolean(n&16));let S=Q({ownerDocument:s,container:l,initialFocus:m},Boolean(n&2));X({ownerDocument:s,container:l,containers:t,previousActiveElement:S},Boolean(n&8));let H=V(),R=K(o=>{let c=l.current;if(!c)return;(_=>_())(()=>{g(H.current,{[M.Forwards]:()=>b(c,i.First,{skipElements:[o.relatedTarget]}),[M.Backwards]:()=>b(c,i.Last,{skipElements:[o.relatedTarget]})})})}),B=q(),L=T(!1),P={ref:a,onKeyDown(o){o.key=="Tab"&&(L.current=!0,B.requestAnimationFrame(()=>{L.current=!1}))},onBlur(o){let c=new Set(t==null?void 0:t.current);c.add(l);let p=o.relatedTarget;!p||p.dataset.headlessuiFocusGuard!=="true"&&(h(c,p)||(L.current?b(l.current,g(H.current,{[M.Forwards]:()=>i.Next,[M.Backwards]:()=>i.Previous})|i.WrapAround,{relativeTo:o.target}):o.target instanceof HTMLElement&&f(o.target)))}};return d.createElement(d.Fragment,null,Boolean(n&4)&&d.createElement(v,{as:"button",type:"button","data-headlessui-focus-guard":!0,onFocus:R,features:F.Focusable}),I({ourProps:P,theirProps:E,defaultTag:z,name:"FocusTrap"}),Boolean(n&4)&&d.createElement(v,{as:"button",type:"button","data-headlessui-focus-guard":!0,onFocus:R,features:F.Focusable}))}),{features:A});function J({ownerDocument:r},u){let e=T(null);k(r==null?void 0:r.defaultView,"focusout",a=>{!u||e.current||(e.current=a.target)},!0),j(()=>{u||((r==null?void 0:r.activeElement)===(r==null?void 0:r.body)&&f(e.current),e.current=null)},[u]);let l=T(!1);U(()=>(l.current=!1,()=>{l.current=!0,y(()=>{!l.current||(f(e.current),e.current=null)})}),[])}function Q({ownerDocument:r,container:u,initialFocus:e},l){let a=T(null),m=O();return j(()=>{if(!l)return;let t=u.current;!t||y(()=>{if(!m.current)return;let n=r==null?void 0:r.activeElement;if(e!=null&&e.current){if((e==null?void 0:e.current)===n){a.current=n;return}}else if(t.contains(n)){a.current=n;return}e!=null&&e.current?f(e.current):b(t,i.First)===G.Error&&console.warn("There are no focusable elements inside the <FocusTrap />"),a.current=r==null?void 0:r.activeElement})},[l]),a}function X({ownerDocument:r,container:u,containers:e,previousActiveElement:l},a){let m=O();k(r==null?void 0:r.defaultView,"focus",t=>{if(!a||!m.current)return;let n=new Set(e==null?void 0:e.current);n.add(u);let E=l.current;if(!E)return;let s=t.target;s&&s instanceof HTMLElement?h(n,s)?(l.current=s,f(s)):(t.preventDefault(),t.stopPropagation(),f(E)):f(l.current)},!0)}function h(r,u){var e;for(let l of r)if((e=l.current)!=null&&e.contains(u))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}; |
@@ -1,23 +0,36 @@ | ||
import React, { ReactNode, Ref } from 'react'; | ||
import { Props } from '../../types.js'; | ||
import React, { type ElementType, type ReactNode, type Ref } from 'react'; | ||
import type { Props } from '../../types.js'; | ||
import { type HasDisplayName, type RefProp } from '../../utils/render.js'; | ||
interface SharedData { | ||
slot?: {}; | ||
name?: string; | ||
props?: {}; | ||
props?: Record<string, any>; | ||
} | ||
export declare function useLabelContext(): { | ||
value: string | undefined; | ||
register(value: string): () => void; | ||
} & SharedData; | ||
export declare function useLabelledBy(alwaysAvailableIds?: (string | undefined | null)[]): string | undefined; | ||
interface LabelProviderProps extends SharedData { | ||
children: ReactNode; | ||
value?: string | undefined; | ||
} | ||
export declare function useLabels(): [string | undefined, (props: LabelProviderProps) => JSX.Element]; | ||
export declare let Label: (<TTag extends React.ElementType<any> = "label">(props: Omit<import('../../types.js').PropsOf<TTag>, "as" | "children" | "refName" | "className"> & { | ||
as?: TTag | undefined; | ||
children?: React.ReactNode | ((bag: {}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>); | ||
refName?: string | undefined; | ||
} & (true extends (import('../../types.js').PropsOf<TTag> extends never ? never : "className" extends keyof import('../../types.js').PropsOf<TTag> ? true : never) ? { | ||
className?: import('../../types.js').PropsOf<TTag>["className"] | ((bag: {}) => string) | undefined; | ||
} : {}) & { | ||
passive?: boolean | undefined; | ||
}, ref: Ref<HTMLLabelElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
export declare function useLabels({ inherit }?: { | ||
inherit?: boolean | undefined; | ||
}): [ | ||
string | undefined, | ||
(props: LabelProviderProps & { | ||
inherit?: boolean; | ||
}) => JSX.Element | ||
]; | ||
declare let DEFAULT_LABEL_TAG: "label"; | ||
export type LabelProps<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> = Props<TTag> & { | ||
passive?: boolean; | ||
htmlFor?: string; | ||
}; | ||
declare function LabelFn<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: LabelProps<TTag>, ref: Ref<HTMLLabelElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
export interface _internal_ComponentLabel extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: LabelProps<TTag> & RefProp<typeof LabelFn>): JSX.Element; | ||
} | ||
export declare let Label: _internal_ComponentLabel; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import p,{createContext as m,useContext as L,useMemo as f,useState as b}from"react";import{useId as g}from'../../hooks/use-id.js';import{forwardRefWithAs as x,render as T}from'../../utils/render.js';import{useIsoMorphicEffect as E}from'../../hooks/use-iso-morphic-effect.js';import{useSyncRefs as P}from'../../hooks/use-sync-refs.js';import{useEvent as v}from'../../hooks/use-event.js';let u=m(null);function c(){let n=L(u);if(n===null){let r=new Error("You used a <Label /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(r,c),r}return n}function M(){let[n,r]=b([]);return[n.length>0?n.join(" "):void 0,f(()=>function(e){let o=v(l=>(r(t=>[...t,l]),()=>r(t=>{let i=t.slice(),a=i.indexOf(l);return a!==-1&&i.splice(a,1),i}))),s=f(()=>({register:o,slot:e.slot,name:e.name,props:e.props}),[o,e.slot,e.name,e.props]);return p.createElement(u.Provider,{value:s},e.children)},[r])]}let h="label",F=x(function(r,d){let e=g(),{id:o=`headlessui-label-${e}`,passive:s=!1,...l}=r,t=c(),i=P(d);E(()=>t.register(o),[o,t.register]);let a={ref:i,...t.props,id:o};return s&&("onClick"in a&&delete a.onClick,"onClick"in l&&delete l.onClick),T({ourProps:a,theirProps:l,slot:t.slot||{},defaultTag:h,name:t.name||"Label"})});export{F as Label,M 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}; |
@@ -1,69 +0,121 @@ | ||
import React, { Ref } from 'react'; | ||
import { Props } from '../../types.js'; | ||
import { PropsForFeatures } from '../../utils/render.js'; | ||
interface ListboxRenderPropArg<T> { | ||
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; | ||
}>; | ||
type ListboxRenderPropArg<T> = { | ||
open: boolean; | ||
disabled: boolean; | ||
invalid: boolean; | ||
value: T; | ||
} | ||
interface ButtonRenderPropArg { | ||
}; | ||
export type ListboxProps<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType> = Props<TTag, ListboxRenderPropArg<TType>, 'value' | 'defaultValue' | 'onChange' | 'by' | 'disabled' | 'horizontal' | 'name' | 'multiple', { | ||
value?: TType; | ||
defaultValue?: TType; | ||
onChange?(value: TType): void; | ||
by?: ByComparator<TActualType>; | ||
disabled?: boolean; | ||
invalid?: boolean; | ||
horizontal?: boolean; | ||
form?: string; | ||
name?: string; | ||
multiple?: boolean; | ||
__demoMode?: boolean; | ||
}>; | ||
declare function ListboxFn<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType extends (infer U)[] ? U : TType>(props: ListboxProps<TTag, TType, TActualType>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_BUTTON_TAG: "button"; | ||
type ButtonRenderPropArg = { | ||
disabled: boolean; | ||
invalid: boolean; | ||
hover: boolean; | ||
focus: boolean; | ||
autofocus: boolean; | ||
open: boolean; | ||
disabled: boolean; | ||
active: boolean; | ||
value: any; | ||
} | ||
declare type ButtonPropsWeControl = 'type' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded' | 'aria-labelledby' | 'disabled' | 'onKeyDown' | 'onClick'; | ||
interface LabelRenderPropArg { | ||
}; | ||
type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded' | 'aria-haspopup' | 'aria-labelledby' | 'disabled'; | ||
export type ListboxButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, { | ||
autoFocus?: boolean; | ||
disabled?: boolean; | ||
}>; | ||
declare function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ListboxButtonProps<TTag>, ref: Ref<HTMLButtonElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
declare let DEFAULT_OPTIONS_TAG: "div"; | ||
type OptionsRenderPropArg = { | ||
open: boolean; | ||
disabled: boolean; | ||
} | ||
declare type LabelPropsWeControl = 'ref' | 'onClick'; | ||
interface OptionsRenderPropArg { | ||
open: boolean; | ||
} | ||
declare type OptionsPropsWeControl = 'aria-activedescendant' | 'aria-labelledby' | 'aria-orientation' | 'onKeyDown' | 'role' | 'tabIndex'; | ||
}; | ||
type OptionsPropsWeControl = 'aria-activedescendant' | 'aria-labelledby' | 'aria-multiselectable' | 'aria-orientation' | 'role' | 'tabIndex'; | ||
declare let OptionsRenderFeatures: number; | ||
interface OptionRenderPropArg { | ||
export type ListboxOptionsProps<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl, { | ||
anchor?: AnchorPropsWithSelection; | ||
portal?: boolean; | ||
modal?: boolean; | ||
transition?: boolean; | ||
} & PropsForFeatures<typeof OptionsRenderFeatures>>; | ||
declare function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ListboxOptionsProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_OPTION_TAG: "div"; | ||
type OptionRenderPropArg = { | ||
/** @deprecated use `focus` instead */ | ||
active: boolean; | ||
focus: boolean; | ||
selected: boolean; | ||
disabled: boolean; | ||
selectedOption: boolean; | ||
}; | ||
type OptionPropsWeControl = 'aria-disabled' | 'aria-selected' | 'role' | 'tabIndex'; | ||
export type ListboxOptionProps<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, { | ||
disabled?: boolean; | ||
value: TType; | ||
}>; | ||
declare function OptionFn<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = Parameters<typeof ListboxRoot>[0]['value']>(props: ListboxOptionProps<TTag, TType>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
declare let DEFAULT_SELECTED_OPTION_TAG: React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>; | ||
type SelectedOptionRenderPropArg = {}; | ||
type SelectedOptionPropsWeControl = never; | ||
export type ListboxSelectedOptionProps<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG> = Props<TTag, SelectedOptionRenderPropArg, SelectedOptionPropsWeControl, { | ||
options: React.ReactNode; | ||
placeholder?: React.ReactNode; | ||
}>; | ||
declare function SelectedFn<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG>(props: ListboxSelectedOptionProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
export interface _internal_ComponentListbox extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType extends (infer U)[] ? U : TType>(props: ListboxProps<TTag, TType, TActualType> & RefProp<typeof ListboxFn>): JSX.Element; | ||
} | ||
declare type ListboxOptionPropsWeControl = 'role' | 'tabIndex' | 'aria-disabled' | 'aria-selected' | 'onPointerLeave' | 'onMouseLeave' | 'onPointerMove' | 'onMouseMove' | 'onFocus'; | ||
export declare let Listbox: (<TTag extends React.ElementType<any> = React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>, TType = string, TActualType = TType extends (infer U)[] ? U : TType>(props: Props<TTag, ListboxRenderPropArg<TType>, "value" | "name" | "disabled" | "defaultValue" | "multiple" | "onChange" | "by" | "horizontal"> & { | ||
value?: TType | undefined; | ||
defaultValue?: TType | undefined; | ||
onChange?(value: TType): void; | ||
by?: (keyof TActualType & string) | ((a: TActualType, z: TActualType) => boolean) | undefined; | ||
disabled?: boolean | undefined; | ||
horizontal?: boolean | undefined; | ||
name?: string | undefined; | ||
multiple?: boolean | undefined; | ||
}, ref: React.Ref<TTag>) => JSX.Element) & { | ||
displayName: string; | ||
} & { | ||
Button: (<TTag_1 extends React.ElementType<any> = "button">(props: Props<TTag_1, ButtonRenderPropArg, ButtonPropsWeControl>, ref: Ref<HTMLButtonElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Label: (<TTag_2 extends React.ElementType<any> = "label">(props: Props<TTag_2, LabelRenderPropArg, LabelPropsWeControl>, ref: Ref<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Options: (<TTag_3 extends React.ElementType<any> = "ul">(props: Props<TTag_3, OptionsRenderPropArg, OptionsPropsWeControl> & (({ | ||
static?: undefined; | ||
} & { | ||
unmount?: boolean | undefined; | ||
}) | ({ | ||
unmount?: undefined; | ||
} & { | ||
static?: boolean | undefined; | ||
})), ref: Ref<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Option: (<TTag_4 extends React.ElementType<any> = "li", TType_1 = unknown>(props: Props<TTag_4, OptionRenderPropArg, "value" | ListboxOptionPropsWeControl> & { | ||
disabled?: boolean | undefined; | ||
value: TType_1; | ||
}, ref: Ref<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
export interface _internal_ComponentListboxButton extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ListboxButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentListboxLabel extends _internal_ComponentLabel { | ||
} | ||
export interface _internal_ComponentListboxOptions extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ListboxOptionsProps<TTag> & RefProp<typeof OptionsFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentListboxOption extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = Parameters<typeof ListboxRoot>[0]['value']>(props: ListboxOptionProps<TTag, TType> & RefProp<typeof OptionFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentListboxSelectedOption extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG>(props: ListboxSelectedOptionProps<TTag> & RefProp<typeof SelectedFn>): JSX.Element; | ||
} | ||
declare let ListboxRoot: _internal_ComponentListbox; | ||
export declare let ListboxButton: _internal_ComponentListboxButton; | ||
/** @deprecated use `<Label>` instead of `<ListboxLabel>` */ | ||
export declare let ListboxLabel: _internal_ComponentListboxLabel; | ||
export declare let ListboxOptions: _internal_ComponentListboxOptions; | ||
export declare let ListboxOption: _internal_ComponentListboxOption; | ||
export declare let ListboxSelectedOption: _internal_ComponentListboxSelectedOption; | ||
export declare let Listbox: _internal_ComponentListbox & { | ||
/** @deprecated use `<ListboxButton>` instead of `<Listbox.Button>` */ | ||
Button: _internal_ComponentListboxButton; | ||
/** @deprecated use `<Label>` instead of `<Listbox.Label>` */ | ||
Label: _internal_ComponentListboxLabel; | ||
/** @deprecated use `<ListboxOptions>` instead of `<Listbox.Options>` */ | ||
Options: _internal_ComponentListboxOptions; | ||
/** @deprecated use `<ListboxOption>` instead of `<Listbox.Option>` */ | ||
Option: _internal_ComponentListboxOption; | ||
/** @deprecated use `<ListboxSelectedOption>` instead of `<Listbox.SelectedOption>` */ | ||
SelectedOption: _internal_ComponentListboxSelectedOption; | ||
}; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import K,{Fragment as xe,createContext as Z,createRef as ge,useCallback as Oe,useContext as ee,useEffect as te,useMemo as E,useReducer as ye,useRef as I}from"react";import{useDisposables as V}from'../../hooks/use-disposables.js';import{useId as N}from'../../hooks/use-id.js';import{useIsoMorphicEffect as W}from'../../hooks/use-iso-morphic-effect.js';import{useComputed as oe}from'../../hooks/use-computed.js';import{useSyncRefs as F}from'../../hooks/use-sync-refs.js';import{Features as ne,forwardRefWithAs as _,render as U,compact as Le}from'../../utils/render.js';import{match as C}from'../../utils/match.js';import{disposables as $}from'../../utils/disposables.js';import{Keys as O}from'../keyboard.js';import{Focus as R,calculateActiveIndex as ve}from'../../utils/calculate-active-index.js';import{isDisabledReactIssue7711 as me}from'../../utils/bugs.js';import{isFocusableElement as Re,FocusableMode as Se,sortByDomNode as Ae}from'../../utils/focus-management.js';import{useOpenClosed as he,State as z,OpenClosedProvider as Pe}from'../../internal/open-closed.js';import{useResolveButtonType as De}from'../../hooks/use-resolve-button-type.js';import{useOutsideClick as Ee}from'../../hooks/use-outside-click.js';import{Hidden as Ie,Features as Ce}from'../../internal/hidden.js';import{objectToFormEntries as Me}from'../../utils/form.js';import{getOwnerDocument as ke}from'../../utils/owner.js';import{useEvent as b}from'../../hooks/use-event.js';import{useControllable as we}from'../../hooks/use-controllable.js';import{useLatestValue as Fe}from'../../hooks/use-latest-value.js';import{useTrackedPointer as _e}from'../../hooks/use-tracked-pointer.js';var Ue=(o=>(o[o.Open=0]="Open",o[o.Closed=1]="Closed",o))(Ue||{}),Be=(o=>(o[o.Single=0]="Single",o[o.Multi=1]="Multi",o))(Be||{}),He=(o=>(o[o.Pointer=0]="Pointer",o[o.Other=1]="Other",o))(He||{}),Ge=(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[n.RegisterLabel=7]="RegisterLabel",n))(Ge||{});function q(e,r=o=>o){let o=e.activeOptionIndex!==null?e.options[e.activeOptionIndex]:null,p=Ae(r(e.options.slice()),c=>c.dataRef.current.domRef.current),i=o?p.indexOf(o):null;return i===-1&&(i=null),{options:p,activeOptionIndex:i}}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 r=e.activeOptionIndex,{isSelected:o}=e.dataRef.current,p=e.options.findIndex(i=>o(i.dataRef.current.value));return p!==-1&&(r=p),{...e,listboxState:0,activeOptionIndex:r}},[2](e,r){var i;if(e.dataRef.current.disabled||e.listboxState===1)return e;let o=q(e),p=ve(r,{resolveItems:()=>o.options,resolveActiveIndex:()=>o.activeOptionIndex,resolveId:c=>c.id,resolveDisabled:c=>c.dataRef.current.disabled});return{...e,...o,searchQuery:"",activeOptionIndex:p,activationTrigger:(i=r.trigger)!=null?i:1}},[3]:(e,r)=>{if(e.dataRef.current.disabled||e.listboxState===1)return e;let p=e.searchQuery!==""?0:1,i=e.searchQuery+r.value.toLowerCase(),t=(e.activeOptionIndex!==null?e.options.slice(e.activeOptionIndex+p).concat(e.options.slice(0,e.activeOptionIndex+p)):e.options).find(n=>{var T;return!n.dataRef.current.disabled&&((T=n.dataRef.current.textValue)==null?void 0:T.startsWith(i))}),u=t?e.options.indexOf(t):-1;return u===-1||u===e.activeOptionIndex?{...e,searchQuery:i}:{...e,searchQuery:i,activeOptionIndex:u,activationTrigger:1}},[4](e){return e.dataRef.current.disabled||e.listboxState===1||e.searchQuery===""?e:{...e,searchQuery:""}},[5]:(e,r)=>{let o={id:r.id,dataRef:r.dataRef},p=q(e,i=>[...i,o]);return e.activeOptionIndex===null&&e.dataRef.current.isSelected(r.dataRef.current.value)&&(p.activeOptionIndex=p.options.indexOf(o)),{...e,...p}},[6]:(e,r)=>{let o=q(e,p=>{let i=p.findIndex(c=>c.id===r.id);return i!==-1&&p.splice(i,1),p});return{...e,...o,activationTrigger:1}},[7]:(e,r)=>({...e,labelId:r.id})},X=Z(null);X.displayName="ListboxActionsContext";function B(e){let r=ee(X);if(r===null){let o=new Error(`<${e} /> is missing a parent <Listbox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,B),o}return r}let J=Z(null);J.displayName="ListboxDataContext";function H(e){let r=ee(J);if(r===null){let o=new Error(`<${e} /> is missing a parent <Listbox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,H),o}return r}function Ke(e,r){return C(r.type,je,e,r)}let Ve=xe,Ne=_(function(r,o){let{value:p,defaultValue:i,name:c,onChange:t,by:u=(l,f)=>l===f,disabled:n=!1,horizontal:T=!1,multiple:g=!1,...A}=r;const m=T?"horizontal":"vertical";let P=F(o),[y=g?[]:void 0,S]=we(p,t,i),[h,s]=ye(Ke,{dataRef:ge(),listboxState:1,options:[],searchQuery:"",labelId:null,activeOptionIndex:null,activationTrigger:1}),a=I({static:!1,hold:!1}),x=I(null),D=I(null),Q=I(null),M=b(typeof u=="string"?(l,f)=>{let v=u;return(l==null?void 0:l[v])===(f==null?void 0:f[v])}:u),L=Oe(l=>C(d.mode,{[1]:()=>y.some(f=>M(f,l)),[0]:()=>M(y,l)}),[y]),d=E(()=>({...h,value:y,disabled:n,mode:g?1:0,orientation:m,compare:M,isSelected:L,optionsPropsRef:a,labelRef:x,buttonRef:D,optionsRef:Q}),[y,n,g,h]);W(()=>{h.dataRef.current=d},[d]),Ee([d.buttonRef,d.optionsRef],(l,f)=>{var v;s({type:1}),Re(f,Se.Loose)||(l.preventDefault(),(v=d.buttonRef.current)==null||v.focus())},d.listboxState===0);let G=E(()=>({open:d.listboxState===0,disabled:n,value:y}),[d,n,y]),ie=b(l=>{let f=d.options.find(v=>v.id===l);!f||k(f.dataRef.current.value)}),re=b(()=>{if(d.activeOptionIndex!==null){let{dataRef:l,id:f}=d.options[d.activeOptionIndex];k(l.current.value),s({type:2,focus:R.Specific,id:f})}}),ae=b(()=>s({type:0})),le=b(()=>s({type:1})),se=b((l,f,v)=>l===R.Specific?s({type:2,focus:R.Specific,id:f,trigger:v}):s({type:2,focus:l,trigger:v})),ue=b((l,f)=>(s({type:5,id:l,dataRef:f}),()=>s({type:6,id:l}))),pe=b(l=>(s({type:7,id:l}),()=>s({type:7,id:null}))),k=b(l=>C(d.mode,{[0](){return S==null?void 0:S(l)},[1](){let f=d.value.slice(),v=f.findIndex(w=>M(w,l));return v===-1?f.push(l):f.splice(v,1),S==null?void 0:S(f)}})),de=b(l=>s({type:3,value:l})),ce=b(()=>s({type:4})),fe=E(()=>({onChange:k,registerOption:ue,registerLabel:pe,goToOption:se,closeListbox:le,openListbox:ae,selectActiveOption:re,selectOption:ie,search:de,clearSearch:ce}),[]),be={ref:P},j=I(null),Te=V();return te(()=>{!j.current||i!==void 0&&Te.addEventListener(j.current,"reset",()=>{k(i)})},[j,k]),K.createElement(X.Provider,{value:fe},K.createElement(J.Provider,{value:d},K.createElement(Pe,{value:C(d.listboxState,{[0]:z.Open,[1]:z.Closed})},c!=null&&y!=null&&Me({[c]:y}).map(([l,f],v)=>K.createElement(Ie,{features:Ce.Hidden,ref:v===0?w=>{var Y;j.current=(Y=w==null?void 0:w.closest("form"))!=null?Y:null}:void 0,...Le({key:l,as:"input",type:"hidden",hidden:!0,readOnly:!0,name:l,value:f})})),U({ourProps:be,theirProps:A,slot:G,defaultTag:Ve,name:"Listbox"}))))}),We="button",Qe=_(function(r,o){var h;let p=N(),{id:i=`headlessui-listbox-button-${p}`,...c}=r,t=H("Listbox.Button"),u=B("Listbox.Button"),n=F(t.buttonRef,o),T=V(),g=b(s=>{switch(s.key){case O.Space:case O.Enter:case O.ArrowDown:s.preventDefault(),u.openListbox(),T.nextFrame(()=>{t.value||u.goToOption(R.First)});break;case O.ArrowUp:s.preventDefault(),u.openListbox(),T.nextFrame(()=>{t.value||u.goToOption(R.Last)});break}}),A=b(s=>{switch(s.key){case O.Space:s.preventDefault();break}}),m=b(s=>{if(me(s.currentTarget))return s.preventDefault();t.listboxState===0?(u.closeListbox(),T.nextFrame(()=>{var a;return(a=t.buttonRef.current)==null?void 0:a.focus({preventScroll:!0})})):(s.preventDefault(),u.openListbox())}),P=oe(()=>{if(!!t.labelId)return[t.labelId,i].join(" ")},[t.labelId,i]),y=E(()=>({open:t.listboxState===0,disabled:t.disabled,value:t.value}),[t]),S={ref:n,id:i,type:De(r,t.buttonRef),"aria-haspopup":"listbox","aria-controls":(h=t.optionsRef.current)==null?void 0:h.id,"aria-expanded":t.disabled?void 0:t.listboxState===0,"aria-labelledby":P,disabled:t.disabled,onKeyDown:g,onKeyUp:A,onClick:m};return U({ourProps:S,theirProps:c,slot:y,defaultTag:We,name:"Listbox.Button"})}),$e="label",ze=_(function(r,o){let p=N(),{id:i=`headlessui-listbox-label-${p}`,...c}=r,t=H("Listbox.Label"),u=B("Listbox.Label"),n=F(t.labelRef,o);W(()=>u.registerLabel(i),[i]);let T=b(()=>{var m;return(m=t.buttonRef.current)==null?void 0:m.focus({preventScroll:!0})}),g=E(()=>({open:t.listboxState===0,disabled:t.disabled}),[t]);return U({ourProps:{ref:n,id:i,onClick:T},theirProps:c,slot:g,defaultTag:$e,name:"Listbox.Label"})}),qe="ul",Xe=ne.RenderStrategy|ne.Static,Je=_(function(r,o){var s;let p=N(),{id:i=`headlessui-listbox-options-${p}`,...c}=r,t=H("Listbox.Options"),u=B("Listbox.Options"),n=F(t.optionsRef,o),T=V(),g=V(),A=he(),m=(()=>A!==null?A===z.Open:t.listboxState===0)();te(()=>{var x;let a=t.optionsRef.current;!a||t.listboxState===0&&a!==((x=ke(a))==null?void 0:x.activeElement)&&a.focus({preventScroll:!0})},[t.listboxState,t.optionsRef]);let P=b(a=>{switch(g.dispose(),a.key){case O.Space:if(t.searchQuery!=="")return a.preventDefault(),a.stopPropagation(),u.search(a.key);case O.Enter:if(a.preventDefault(),a.stopPropagation(),t.activeOptionIndex!==null){let{dataRef:x}=t.options[t.activeOptionIndex];u.onChange(x.current.value)}t.mode===0&&(u.closeListbox(),$().nextFrame(()=>{var x;return(x=t.buttonRef.current)==null?void 0:x.focus({preventScroll:!0})}));break;case C(t.orientation,{vertical:O.ArrowDown,horizontal:O.ArrowRight}):return a.preventDefault(),a.stopPropagation(),u.goToOption(R.Next);case C(t.orientation,{vertical:O.ArrowUp,horizontal:O.ArrowLeft}):return a.preventDefault(),a.stopPropagation(),u.goToOption(R.Previous);case O.Home:case O.PageUp:return a.preventDefault(),a.stopPropagation(),u.goToOption(R.First);case O.End:case O.PageDown:return a.preventDefault(),a.stopPropagation(),u.goToOption(R.Last);case O.Escape:return a.preventDefault(),a.stopPropagation(),u.closeListbox(),T.nextFrame(()=>{var x;return(x=t.buttonRef.current)==null?void 0:x.focus({preventScroll:!0})});case O.Tab:a.preventDefault(),a.stopPropagation();break;default:a.key.length===1&&(u.search(a.key),g.setTimeout(()=>u.clearSearch(),350));break}}),y=oe(()=>{var a,x,D;return(D=(a=t.labelRef.current)==null?void 0:a.id)!=null?D:(x=t.buttonRef.current)==null?void 0:x.id},[t.labelRef.current,t.buttonRef.current]),S=E(()=>({open:t.listboxState===0}),[t]),h={"aria-activedescendant":t.activeOptionIndex===null||(s=t.options[t.activeOptionIndex])==null?void 0:s.id,"aria-multiselectable":t.mode===1?!0:void 0,"aria-labelledby":y,"aria-orientation":t.orientation,id:i,onKeyDown:P,role:"listbox",tabIndex:0,ref:n};return U({ourProps:h,theirProps:c,slot:S,defaultTag:qe,features:Xe,visible:m,name:"Listbox.Options"})}),Ye="li",Ze=_(function(r,o){let p=N(),{id:i=`headlessui-listbox-option-${p}`,disabled:c=!1,value:t,...u}=r,n=H("Listbox.Option"),T=B("Listbox.Option"),g=n.activeOptionIndex!==null?n.options[n.activeOptionIndex].id===i:!1,A=n.isSelected(t),m=I(null),P=Fe({disabled:c,value:t,domRef:m,get textValue(){var L,d;return(d=(L=m.current)==null?void 0:L.textContent)==null?void 0:d.toLowerCase()}}),y=F(o,m);W(()=>{if(n.listboxState!==0||!g||n.activationTrigger===0)return;let L=$();return L.requestAnimationFrame(()=>{var d,G;(G=(d=m.current)==null?void 0:d.scrollIntoView)==null||G.call(d,{block:"nearest"})}),L.dispose},[m,g,n.listboxState,n.activationTrigger,n.activeOptionIndex]),W(()=>T.registerOption(i,P),[P,i]);let S=b(L=>{if(c)return L.preventDefault();T.onChange(t),n.mode===0&&(T.closeListbox(),$().nextFrame(()=>{var d;return(d=n.buttonRef.current)==null?void 0:d.focus({preventScroll:!0})}))}),h=b(()=>{if(c)return T.goToOption(R.Nothing);T.goToOption(R.Specific,i)}),s=_e(),a=b(L=>s.update(L)),x=b(L=>{!s.wasMoved(L)||c||g||T.goToOption(R.Specific,i,0)}),D=b(L=>{!s.wasMoved(L)||c||!g||T.goToOption(R.Nothing)}),Q=E(()=>({active:g,selected:A,disabled:c}),[g,A,c]);return U({ourProps:{id:i,ref:y,role:"option",tabIndex:c===!0?void 0:-1,"aria-disabled":c===!0?!0:void 0,"aria-selected":A,disabled:void 0,onClick:S,onFocus:h,onPointerEnter:a,onMouseEnter:a,onPointerMove:x,onMouseMove:x,onPointerLeave:D,onMouseLeave:D},theirProps:u,slot:Q,defaultTag:Ye,name:"Listbox.Option"})}),Mt=Object.assign(Ne,{Button:Qe,Label:ze,Options:Je,Option:Ze});export{Mt 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 ie,createRef as he,useCallback as fe,useContext as re,useEffect as De,useMemo as k,useReducer as _e,useRef as K}from"react";import{flushSync as G}from"react-dom";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 be}from'../../hooks/use-disposables.js';import{useElementSize as ke}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 Ue}from'../../hooks/use-inert-others.js';import{useIsoMorphicEffect as ae}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 j}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{transitionDataAttributes as Qe,useTransition as Xe}from'../../hooks/use-transition.js';import{useDisabled as Je}from'../../internal/disabled.js';import{FloatingProvider as $e,useFloatingPanel as qe,useFloatingPanelProps as Ye,useFloatingReference as Ze,useFloatingReferenceProps as et,useResolvedAnchor as tt}from'../../internal/floating.js';import{FormFields as ot}from'../../internal/form-fields.js';import{useFrozenData as nt}from'../../internal/frozen.js';import{useProvidedId as it}from'../../internal/id.js';import{OpenClosedProvider as rt,State as J,useOpenClosed as lt}from'../../internal/open-closed.js';import{isDisabledReactIssue7711 as at}from'../../utils/bugs.js';import{Focus as v,calculateActiveIndex as se}from'../../utils/calculate-active-index.js';import{disposables as st}from'../../utils/disposables.js';import{Focus as Te,FocusableMode as pt,focusFrom as ut,isFocusableElement as dt,sortByDomNode as ct}from'../../utils/focus-management.js';import{attemptSubmit as ft}from'../../utils/form.js';import{match as V}from'../../utils/match.js';import{getOwnerDocument as bt}from'../../utils/owner.js';import{RenderFeatures as xe,forwardRefWithAs as z,mergeProps as me,render as W}from'../../utils/render.js';import{useDescribedBy as Tt}from'../description/description.js';import{Keys as R}from'../keyboard.js';import{Label as xt,useLabelledBy as mt,useLabels as Ot}from'../label/label.js';import{Portal as yt}from'../portal/portal.js';var vt=(o=>(o[o.Open=0]="Open",o[o.Closed=1]="Closed",o))(vt||{}),gt=(o=>(o[o.Single=0]="Single",o[o.Multi=1]="Multi",o))(gt||{}),Lt=(o=>(o[o.Pointer=0]="Pointer",o[o.Other=1]="Other",o))(Lt||{}),St=(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))(St||{});function pe(e,r=o=>o){let o=e.activeOptionIndex!==null?e.options[e.activeOptionIndex]:null,n=ct(r(e.options.slice()),m=>m.dataRef.current.domRef.current),a=o?n.indexOf(o):null;return a===-1&&(a=null),{options:n,activeOptionIndex:a}}let Rt={[1](e){return e.dataRef.current.disabled||e.listboxState===1?e:{...e,activeOptionIndex:null,listboxState:1,__demoMode:!1}},[0](e){if(e.dataRef.current.disabled||e.listboxState===0)return e;let r=e.activeOptionIndex,{isSelected:o}=e.dataRef.current,n=e.options.findIndex(a=>o(a.dataRef.current.value));return n!==-1&&(r=n),{...e,listboxState:0,activeOptionIndex:r,__demoMode:!1}},[2](e,r){var m,O,i,p,s;if(e.dataRef.current.disabled||e.listboxState===1)return e;let o={...e,searchQuery:"",activationTrigger:(m=r.trigger)!=null?m:1,__demoMode:!1};if(r.focus===v.Nothing)return{...o,activeOptionIndex:null};if(r.focus===v.Specific)return{...o,activeOptionIndex:e.options.findIndex(t=>t.id===r.id)};if(r.focus===v.Previous){let t=e.activeOptionIndex;if(t!==null){let u=e.options[t].dataRef.current.domRef,b=se(r,{resolveItems:()=>e.options,resolveActiveIndex:()=>e.activeOptionIndex,resolveId:c=>c.id,resolveDisabled:c=>c.dataRef.current.disabled});if(b!==null){let c=e.options[b].dataRef.current.domRef;if(((O=u.current)==null?void 0:O.previousElementSibling)===c.current||((i=c.current)==null?void 0:i.previousElementSibling)===null)return{...o,activeOptionIndex:b}}}}else if(r.focus===v.Next){let t=e.activeOptionIndex;if(t!==null){let u=e.options[t].dataRef.current.domRef,b=se(r,{resolveItems:()=>e.options,resolveActiveIndex:()=>e.activeOptionIndex,resolveId:c=>c.id,resolveDisabled:c=>c.dataRef.current.disabled});if(b!==null){let c=e.options[b].dataRef.current.domRef;if(((p=u.current)==null?void 0:p.nextElementSibling)===c.current||((s=c.current)==null?void 0:s.nextElementSibling)===null)return{...o,activeOptionIndex:b}}}}let n=pe(e),a=se(r,{resolveItems:()=>n.options,resolveActiveIndex:()=>n.activeOptionIndex,resolveId:t=>t.id,resolveDisabled:t=>t.dataRef.current.disabled});return{...o,...n,activeOptionIndex:a}},[3]:(e,r)=>{if(e.dataRef.current.disabled||e.listboxState===1)return e;let n=e.searchQuery!==""?0:1,a=e.searchQuery+r.value.toLowerCase(),O=(e.activeOptionIndex!==null?e.options.slice(e.activeOptionIndex+n).concat(e.options.slice(0,e.activeOptionIndex+n)):e.options).find(p=>{var s;return!p.dataRef.current.disabled&&((s=p.dataRef.current.textValue)==null?void 0:s.startsWith(a))}),i=O?e.options.indexOf(O):-1;return i===-1||i===e.activeOptionIndex?{...e,searchQuery:a}:{...e,searchQuery:a,activeOptionIndex:i,activationTrigger:1}},[4](e){return e.dataRef.current.disabled||e.listboxState===1||e.searchQuery===""?e:{...e,searchQuery:""}},[5]:(e,r)=>{let o={id:r.id,dataRef:r.dataRef},n=pe(e,a=>[...a,o]);return e.activeOptionIndex===null&&e.dataRef.current.isSelected(r.dataRef.current.value)&&(n.activeOptionIndex=n.options.indexOf(o)),{...e,...n}},[6]:(e,r)=>{let o=pe(e,n=>{let a=n.findIndex(m=>m.id===r.id);return a!==-1&&n.splice(a,1),n});return{...e,...o,activationTrigger:1}}},ue=ie(null);ue.displayName="ListboxActionsContext";function $(e){let r=re(ue);if(r===null){let o=new Error(`<${e} /> is missing a parent <Listbox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,$),o}return r}let q=ie(null);q.displayName="ListboxDataContext";function Q(e){let r=re(q);if(r===null){let o=new Error(`<${e} /> is missing a parent <Listbox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,Q),o}return r}function Pt(e,r){return V(r.type,Rt,e,r)}let At=ce;function Et(e,r){var de;let o=Je(),{value:n,defaultValue:a,form:m,name:O,onChange:i,by:p,invalid:s=!1,disabled:t=o||!1,horizontal:u=!1,multiple:b=!1,__demoMode:c=!1,...E}=e;const U=u?"horizontal":"vertical";let N=j(r),_=we(a),[y=b?[]:void 0,P]=Me(n,i,_),[h,g]=_e(Pt,{dataRef:he(),listboxState:c?0:1,options:[],searchQuery:"",activeOptionIndex:null,activationTrigger:1,optionsVisible:!1,__demoMode:c}),M=K({static:!1,hold:!1}),w=K(null),f=K(null),A=K(new Map),F=Ce(p),L=fe(x=>V(d.mode,{[1]:()=>y.some(S=>F(S,x)),[0]:()=>F(y,x)}),[y]),d=k(()=>({...h,value:y,disabled:t,invalid:s,mode:b?1:0,orientation:U,compare:F,isSelected:L,optionsPropsRef:M,buttonRef:w,optionsRef:f,listRef:A}),[y,t,s,b,h,A]);ae(()=>{h.dataRef.current=d},[d]);let Y=d.listboxState===0;Ve(Y,[d.buttonRef,d.optionsRef],(x,S)=>{var C;g({type:1}),dt(S,pt.Loose)||(x.preventDefault(),(C=d.buttonRef.current)==null||C.focus())});let X=k(()=>({open:d.listboxState===0,disabled:t,invalid:s,value:y}),[d,t,y,s]),Z=T(x=>{let S=d.options.find(C=>C.id===x);S&&B(S.dataRef.current.value)}),ee=T(()=>{if(d.activeOptionIndex!==null){let{dataRef:x,id:S}=d.options[d.activeOptionIndex];B(x.current.value),g({type:2,focus:v.Specific,id:S})}}),te=T(()=>g({type:0})),oe=T(()=>g({type:1})),H=be(),l=T((x,S,C)=>{H.dispose(),H.microTask(()=>x===v.Specific?g({type:2,focus:v.Specific,id:S,trigger:C}):g({type:2,focus:x,trigger:C}))}),I=T((x,S)=>(g({type:5,id:x,dataRef:S}),()=>g({type:6,id:x}))),B=T(x=>V(d.mode,{[0](){return P==null?void 0:P(x)},[1](){let S=d.value.slice(),C=S.findIndex(Pe=>F(Pe,x));return C===-1?S.push(x):S.splice(C,1),P==null?void 0:P(S)}})),ne=T(x=>g({type:3,value:x})),ye=T(()=>g({type:4})),ve=k(()=>({onChange:B,registerOption:I,goToOption:l,closeListbox:oe,openListbox:te,selectActiveOption:ee,selectOption:Z,search:ne,clearSearch:ye}),[]),[ge,Le]=Ot({inherit:!0}),Se={ref:N},Re=fe(()=>{if(_!==void 0)return P==null?void 0:P(_)},[P,_]);return D.createElement(Le,{value:ge,props:{htmlFor:(de=d.buttonRef.current)==null?void 0:de.id},slot:{open:d.listboxState===0,disabled:t}},D.createElement($e,null,D.createElement(ue.Provider,{value:ve},D.createElement(q.Provider,{value:d},D.createElement(rt,{value:V(d.listboxState,{[0]:J.Open,[1]:J.Closed})},O!=null&&y!=null&&D.createElement(ot,{disabled:t,data:{[O]:y},form:m,onReset:Re}),W({ourProps:Se,theirProps:E,slot:X,defaultTag:At,name:"Listbox"}))))))}let ht="button";function Dt(e,r){var F;let o=Q("Listbox.Button"),n=$("Listbox.Button"),a=le(),m=it(),{id:O=m||`headlessui-listbox-button-${a}`,disabled:i=o.disabled||!1,autoFocus:p=!1,...s}=e,t=j(o.buttonRef,r,Ze()),u=et(),b=T(L=>{switch(L.key){case R.Enter:ft(L.currentTarget);break;case R.Space:case R.ArrowDown:L.preventDefault(),G(()=>n.openListbox()),o.value||n.goToOption(v.First);break;case R.ArrowUp:L.preventDefault(),G(()=>n.openListbox()),o.value||n.goToOption(v.Last);break}}),c=T(L=>{switch(L.key){case R.Space:L.preventDefault();break}}),E=T(L=>{var d;if(at(L.currentTarget))return L.preventDefault();o.listboxState===0?(G(()=>n.closeListbox()),(d=o.buttonRef.current)==null||d.focus({preventScroll:!0})):(L.preventDefault(),n.openListbox())}),U=T(L=>L.preventDefault()),N=mt([O]),_=Tt(),{isFocusVisible:y,focusProps:P}=Ae({autoFocus:p}),{isHovered:h,hoverProps:g}=Ee({isDisabled:i}),{pressed:M,pressProps:w}=Ie({disabled:i}),f=k(()=>({open:o.listboxState===0,active:M||o.listboxState===0,disabled:i,invalid:o.invalid,value:o.value,hover:h,focus:y,autofocus:p}),[o.listboxState,o.value,i,h,y,M,o.invalid,p]),A=me(u(),{ref:t,id:O,type:Ke(e,o.buttonRef),"aria-haspopup":"listbox","aria-controls":(F=o.optionsRef.current)==null?void 0:F.id,"aria-expanded":o.listboxState===0,"aria-labelledby":N,"aria-describedby":_,disabled:i||void 0,autoFocus:p,onKeyDown:b,onKeyUp:c,onKeyPress:U,onClick:E},P,g,w);return W({ourProps:A,theirProps:s,slot:f,defaultTag:ht,name:"Listbox.Button"})}let Oe=ie(!1),_t="div",It=xe.RenderStrategy|xe.Static;function Ct(e,r){var H;let o=le(),{id:n=`headlessui-listbox-options-${o}`,anchor:a,portal:m=!1,modal:O=!0,transition:i=!1,...p}=e,s=tt(a);s&&(m=!0);let t=Q("Listbox.Options"),u=$("Listbox.Options"),b=He(t.optionsRef),c=lt(),[E,U]=Xe(i,t.optionsRef,c!==null?(c&J.Open)===J.Open:t.listboxState===0);Ge(E,t.buttonRef,u.closeListbox);let N=t.__demoMode?!1:O&&t.listboxState===0;je(N,b);let _=t.__demoMode?!1:O&&t.listboxState===0;Ue(_,{allowed:T(()=>[t.buttonRef.current,t.optionsRef.current])});let y=t.listboxState!==0,h=Be(y,t.buttonRef)?!1:E,g=E&&t.listboxState===1,M=nt(g,t.value),w=T(l=>t.compare(M,l)),f=k(()=>{var I;if(s==null||!((I=s==null?void 0:s.to)!=null&&I.includes("selection")))return null;let l=t.options.findIndex(B=>w(B.dataRef.current.value));return l===-1&&(l=0),l},[s,t.options]),A=(()=>{if(s==null)return;if(f===null)return{...s,inner:void 0};let l=Array.from(t.listRef.current.values());return{...s,inner:{listRef:{current:l},index:f}}})(),[F,L]=qe(A),d=Ye(),Y=j(t.optionsRef,r,s?F:null),X=be();De(()=>{var I;let l=t.optionsRef.current;l&&t.listboxState===0&&l!==((I=bt(l))==null?void 0:I.activeElement)&&(l==null||l.focus({preventScroll:!0}))},[t.listboxState,t.optionsRef,t.optionsRef.current]);let Z=T(l=>{var I,B;switch(X.dispose(),l.key){case R.Space:if(t.searchQuery!=="")return l.preventDefault(),l.stopPropagation(),u.search(l.key);case R.Enter:if(l.preventDefault(),l.stopPropagation(),t.activeOptionIndex!==null){let{dataRef:ne}=t.options[t.activeOptionIndex];u.onChange(ne.current.value)}t.mode===0&&(G(()=>u.closeListbox()),(I=t.buttonRef.current)==null||I.focus({preventScroll:!0}));break;case V(t.orientation,{vertical:R.ArrowDown,horizontal:R.ArrowRight}):return l.preventDefault(),l.stopPropagation(),u.goToOption(v.Next);case V(t.orientation,{vertical:R.ArrowUp,horizontal:R.ArrowLeft}):return l.preventDefault(),l.stopPropagation(),u.goToOption(v.Previous);case R.Home:case R.PageUp:return l.preventDefault(),l.stopPropagation(),u.goToOption(v.First);case R.End:case R.PageDown:return l.preventDefault(),l.stopPropagation(),u.goToOption(v.Last);case R.Escape:l.preventDefault(),l.stopPropagation(),G(()=>u.closeListbox()),(B=t.buttonRef.current)==null||B.focus({preventScroll:!0});return;case R.Tab:l.preventDefault(),l.stopPropagation(),G(()=>u.closeListbox()),ut(t.buttonRef.current,l.shiftKey?Te.Previous:Te.Next);break;default:l.key.length===1&&(u.search(l.key),X.setTimeout(()=>u.clearSearch(),350));break}}),ee=Fe(()=>{var l;return(l=t.buttonRef.current)==null?void 0:l.id},[t.buttonRef.current]),te=k(()=>({open:t.listboxState===0}),[t.listboxState]),oe=me(s?d():{},{id:n,ref:Y,"aria-activedescendant":t.activeOptionIndex===null||(H=t.options[t.activeOptionIndex])==null?void 0:H.id,"aria-multiselectable":t.mode===1?!0:void 0,"aria-labelledby":ee,"aria-orientation":t.orientation,onKeyDown:Z,role:"listbox",tabIndex:t.listboxState===0?0:void 0,style:{...p.style,...L,"--button-width":ke(t.buttonRef,!0).width},...Qe(U)});return D.createElement(yt,{enabled:m?e.static||E:!1},D.createElement(q.Provider,{value:t.mode===1?t:{...t,isSelected:w}},W({ourProps:oe,theirProps:p,slot:te,defaultTag:_t,features:It,visible:h,name:"Listbox.Options"})))}let Ft="div";function Mt(e,r){let o=le(),{id:n=`headlessui-listbox-option-${o}`,disabled:a=!1,value:m,...O}=e,i=re(Oe)===!0,p=Q("Listbox.Option"),s=$("Listbox.Option"),t=p.activeOptionIndex!==null?p.options[p.activeOptionIndex].id===n:!1,u=p.isSelected(m),b=K(null),c=ze(b),E=Ne({disabled:a,value:m,domRef:b,get textValue(){return c()}}),U=j(r,b,f=>{f?p.listRef.current.set(n,f):p.listRef.current.delete(n)});ae(()=>{if(!p.__demoMode&&p.listboxState===0&&t&&p.activationTrigger!==0)return st().requestAnimationFrame(()=>{var f,A;(A=(f=b.current)==null?void 0:f.scrollIntoView)==null||A.call(f,{block:"nearest"})})},[b,t,p.__demoMode,p.listboxState,p.activationTrigger,p.activeOptionIndex]),ae(()=>{if(!i)return s.registerOption(n,E)},[E,n,i]);let N=T(f=>{var A;if(a)return f.preventDefault();s.onChange(m),p.mode===0&&(G(()=>s.closeListbox()),(A=p.buttonRef.current)==null||A.focus({preventScroll:!0}))}),_=T(()=>{if(a)return s.goToOption(v.Nothing);s.goToOption(v.Specific,n)}),y=We(),P=T(f=>{y.update(f),!a&&(t||s.goToOption(v.Specific,n,0))}),h=T(f=>{y.wasMoved(f)&&(a||t||s.goToOption(v.Specific,n,0))}),g=T(f=>{y.wasMoved(f)&&(a||t&&s.goToOption(v.Nothing))}),M=k(()=>({active:t,focus:t,selected:u,disabled:a,selectedOption:u&&i}),[t,u,a,i]),w=i?{}:{id:n,ref:U,role:"option",tabIndex:a===!0?void 0:-1,"aria-disabled":a===!0?!0:void 0,"aria-selected":u,disabled:void 0,onClick:N,onFocus:_,onPointerEnter:P,onMouseEnter:P,onPointerMove:h,onMouseMove:h,onPointerLeave:g,onMouseLeave:g};return!u&&i?null:W({ourProps:w,theirProps:O,slot:M,defaultTag:Ft,name:"Listbox.Option"})}let wt=ce;function Bt(e,r){let{options:o,placeholder:n,...a}=e,O={ref:j(r)},i=Q("ListboxSelectedOption"),p=k(()=>({}),[]),s=i.value===void 0||i.value===null||i.mode===1&&Array.isArray(i.value)&&i.value.length===0;return D.createElement(Oe.Provider,{value:!0},W({ourProps:O,theirProps:{...a,children:D.createElement(D.Fragment,null,n&&s?n:o)},slot:p,defaultTag:wt,name:"ListboxSelectedOption"}))}let kt=z(Et),Ut=z(Dt),Nt=xt,Gt=z(Ct),Vt=z(Mt),Ht=z(Bt),Mo=Object.assign(kt,{Button:Ut,Label:Nt,Options:Gt,Option:Vt,SelectedOption:Ht});export{Mo as Listbox,Ut as ListboxButton,Nt as ListboxLabel,Vt as ListboxOption,Gt as ListboxOptions,Ht as ListboxSelectedOption}; |
@@ -1,50 +0,117 @@ | ||
import React, { Ref } from 'react'; | ||
import { Props } from '../../types.js'; | ||
import { PropsForFeatures } from '../../utils/render.js'; | ||
interface MenuRenderPropArg { | ||
import React, { type ElementType, type Ref } from 'react'; | ||
import { type AnchorProps } from '../../internal/floating.js'; | ||
import type { Props } from '../../types.js'; | ||
import { type HasDisplayName, type RefProp } from '../../utils/render.js'; | ||
declare let DEFAULT_MENU_TAG: React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>; | ||
type MenuRenderPropArg = { | ||
open: boolean; | ||
close: () => void; | ||
} | ||
interface ButtonRenderPropArg { | ||
}; | ||
type MenuPropsWeControl = never; | ||
export type MenuProps<TTag extends ElementType = typeof DEFAULT_MENU_TAG> = Props<TTag, MenuRenderPropArg, MenuPropsWeControl, { | ||
__demoMode?: boolean; | ||
}>; | ||
declare function MenuFn<TTag extends ElementType = typeof DEFAULT_MENU_TAG>(props: MenuProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_BUTTON_TAG: "button"; | ||
type ButtonRenderPropArg = { | ||
open: boolean; | ||
} | ||
declare type ButtonPropsWeControl = 'type' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded' | 'onKeyDown' | 'onClick'; | ||
interface ItemsRenderPropArg { | ||
active: boolean; | ||
hover: boolean; | ||
focus: boolean; | ||
disabled: boolean; | ||
autofocus: boolean; | ||
}; | ||
type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded' | 'aria-haspopup'; | ||
export type MenuButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, { | ||
disabled?: boolean; | ||
autoFocus?: boolean; | ||
}>; | ||
declare function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: MenuButtonProps<TTag>, ref: Ref<HTMLButtonElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
declare let DEFAULT_ITEMS_TAG: "div"; | ||
type ItemsRenderPropArg = { | ||
open: boolean; | ||
} | ||
declare type ItemsPropsWeControl = 'aria-activedescendant' | 'aria-labelledby' | 'onKeyDown' | 'role' | 'tabIndex'; | ||
declare let ItemsRenderFeatures: number; | ||
interface ItemRenderPropArg { | ||
}; | ||
type ItemsPropsWeControl = 'aria-activedescendant' | 'aria-labelledby' | 'role' | 'tabIndex'; | ||
export type MenuItemsProps<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG> = Props<TTag, ItemsRenderPropArg, ItemsPropsWeControl, { | ||
anchor?: AnchorProps; | ||
portal?: boolean; | ||
modal?: boolean; | ||
transition?: boolean; | ||
static?: boolean; | ||
unmount?: boolean; | ||
}>; | ||
declare function ItemsFn<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(props: MenuItemsProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_ITEM_TAG: React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>; | ||
type ItemRenderPropArg = { | ||
/** @deprecated use `focus` instead */ | ||
active: boolean; | ||
focus: boolean; | ||
disabled: boolean; | ||
close: () => void; | ||
}; | ||
type ItemPropsWeControl = 'aria-describedby' | 'aria-disabled' | 'aria-labelledby' | 'role' | 'tabIndex'; | ||
export type MenuItemProps<TTag extends ElementType = typeof DEFAULT_ITEM_TAG> = Props<TTag, ItemRenderPropArg, ItemPropsWeControl, { | ||
disabled?: boolean; | ||
}>; | ||
declare function ItemFn<TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(props: MenuItemProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_SECTION_TAG: "div"; | ||
type SectionRenderPropArg = {}; | ||
type SectionPropsWeControl = 'role' | 'aria-labelledby'; | ||
export type MenuSectionProps<TTag extends ElementType = typeof DEFAULT_SECTION_TAG> = Props<TTag, SectionRenderPropArg, SectionPropsWeControl>; | ||
declare function SectionFn<TTag extends ElementType = typeof DEFAULT_SECTION_TAG>(props: MenuSectionProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_HEADING_TAG: "header"; | ||
type HeadingRenderPropArg = {}; | ||
type HeadingPropsWeControl = 'role'; | ||
export type MenuHeadingProps<TTag extends ElementType = typeof DEFAULT_HEADING_TAG> = Props<TTag, HeadingRenderPropArg, HeadingPropsWeControl>; | ||
declare function HeadingFn<TTag extends ElementType = typeof DEFAULT_HEADING_TAG>(props: MenuHeadingProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
declare let DEFAULT_SEPARATOR_TAG: "div"; | ||
type SeparatorRenderPropArg = {}; | ||
type SeparatorPropsWeControl = 'role'; | ||
export type MenuSeparatorProps<TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG> = Props<TTag, SeparatorRenderPropArg, SeparatorPropsWeControl>; | ||
declare function SeparatorFn<TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG>(props: MenuSeparatorProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
export interface _internal_ComponentMenu extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_MENU_TAG>(props: MenuProps<TTag> & RefProp<typeof MenuFn>): JSX.Element; | ||
} | ||
declare type MenuItemPropsWeControl = 'role' | 'tabIndex' | 'aria-disabled' | 'onPointerLeave' | 'onPointerMove' | 'onMouseLeave' | 'onMouseMove' | 'onFocus'; | ||
export declare let Menu: (<TTag extends React.ElementType<any> = React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>>(props: Props<TTag, MenuRenderPropArg, "1D45E01E-AF44-47C4-988A-19A94EBAF55C">, ref: Ref<HTMLElement>) => JSX.Element) & { | ||
displayName: string; | ||
} & { | ||
Button: (<TTag_1 extends React.ElementType<any> = "button">(props: Props<TTag_1, ButtonRenderPropArg, ButtonPropsWeControl>, ref: Ref<HTMLButtonElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Items: (<TTag_2 extends React.ElementType<any> = "div">(props: Props<TTag_2, ItemsRenderPropArg, ItemsPropsWeControl> & (({ | ||
static?: undefined; | ||
} & { | ||
unmount?: boolean | undefined; | ||
}) | ({ | ||
unmount?: undefined; | ||
} & { | ||
static?: boolean | undefined; | ||
})), ref: Ref<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Item: (<TTag_3 extends React.ElementType<any> = React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>>(props: Props<TTag_3, ItemRenderPropArg, MenuItemPropsWeControl> & { | ||
disabled?: boolean | undefined; | ||
}, ref: Ref<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
export interface _internal_ComponentMenuButton extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: MenuButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentMenuItems extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(props: MenuItemsProps<TTag> & RefProp<typeof ItemsFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentMenuItem extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(props: MenuItemProps<TTag> & RefProp<typeof ItemFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentMenuSection extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_SECTION_TAG>(props: MenuSectionProps<TTag> & RefProp<typeof SectionFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentMenuHeading extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_HEADING_TAG>(props: MenuHeadingProps<TTag> & RefProp<typeof HeadingFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentMenuSeparator extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG>(props: MenuSeparatorProps<TTag> & RefProp<typeof SeparatorFn>): JSX.Element; | ||
} | ||
export declare let MenuButton: _internal_ComponentMenuButton; | ||
export declare let MenuItems: _internal_ComponentMenuItems; | ||
export declare let MenuItem: _internal_ComponentMenuItem; | ||
export declare let MenuSection: _internal_ComponentMenuSection; | ||
export declare let MenuHeading: _internal_ComponentMenuHeading; | ||
export declare let MenuSeparator: _internal_ComponentMenuSeparator; | ||
export declare let Menu: _internal_ComponentMenu & { | ||
/** @deprecated use `<MenuButton>` instead of `<Menu.Button>` */ | ||
Button: _internal_ComponentMenuButton; | ||
/** @deprecated use `<MenuItems>` instead of `<Menu.Items>` */ | ||
Items: _internal_ComponentMenuItems; | ||
/** @deprecated use `<MenuItem>` instead of `<Menu.Item>` */ | ||
Item: _internal_ComponentMenuItem; | ||
/** @deprecated use `<MenuSection>` instead of `<Menu.Section>` */ | ||
Section: _internal_ComponentMenuSection; | ||
/** @deprecated use `<MenuHeading>` instead of `<Menu.Heading>` */ | ||
Heading: _internal_ComponentMenuHeading; | ||
/** @deprecated use `<MenuSeparator>` instead of `<Menu.Separator>` */ | ||
Separator: _internal_ComponentMenuSeparator; | ||
}; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import K,{Fragment as _,createContext as q,createRef as N,useContext as J,useEffect as z,useMemo as P,useReducer as X,useRef as H}from"react";import{match as j}from'../../utils/match.js';import{forwardRefWithAs as E,render as x,Features as Q}from'../../utils/render.js';import{disposables as L}from'../../utils/disposables.js';import{useDisposables as W}from'../../hooks/use-disposables.js';import{useIsoMorphicEffect as D}from'../../hooks/use-iso-morphic-effect.js';import{useSyncRefs as C}from'../../hooks/use-sync-refs.js';import{useId as k}from'../../hooks/use-id.js';import{Keys as m}from'../keyboard.js';import{Focus as I,calculateActiveIndex as Y}from'../../utils/calculate-active-index.js';import{isDisabledReactIssue7711 as Z}from'../../utils/bugs.js';import{isFocusableElement as ee,FocusableMode as te,sortByDomNode as ne,Focus as V,focusFrom as re,restoreFocusIfNecessary as $}from'../../utils/focus-management.js';import{useOutsideClick as oe}from'../../hooks/use-outside-click.js';import{useTreeWalker as ae}from'../../hooks/use-tree-walker.js';import{useOpenClosed as ie,State as w,OpenClosedProvider as ue}from'../../internal/open-closed.js';import{useResolveButtonType as se}from'../../hooks/use-resolve-button-type.js';import{useOwnerDocument as le}from'../../hooks/use-owner.js';import{useEvent as y}from'../../hooks/use-event.js';import{useTrackedPointer as ce}from'../../hooks/use-tracked-pointer.js';var pe=(o=>(o[o.Open=0]="Open",o[o.Closed=1]="Closed",o))(pe||{}),de=(o=>(o[o.Pointer=0]="Pointer",o[o.Other=1]="Other",o))(de||{}),me=(e=>(e[e.OpenMenu=0]="OpenMenu",e[e.CloseMenu=1]="CloseMenu",e[e.GoToItem=2]="GoToItem",e[e.Search=3]="Search",e[e.ClearSearch=4]="ClearSearch",e[e.RegisterItem=5]="RegisterItem",e[e.UnregisterItem=6]="UnregisterItem",e))(me||{});function U(t,i=o=>o){let o=t.activeItemIndex!==null?t.items[t.activeItemIndex]:null,s=ne(i(t.items.slice()),u=>u.dataRef.current.domRef.current),a=o?s.indexOf(o):null;return a===-1&&(a=null),{items:s,activeItemIndex:a}}let fe={[1](t){return t.menuState===1?t:{...t,activeItemIndex:null,menuState:1}},[0](t){return t.menuState===0?t:{...t,menuState:0}},[2]:(t,i)=>{var a;let o=U(t),s=Y(i,{resolveItems:()=>o.items,resolveActiveIndex:()=>o.activeItemIndex,resolveId:u=>u.id,resolveDisabled:u=>u.dataRef.current.disabled});return{...t,...o,searchQuery:"",activeItemIndex:s,activationTrigger:(a=i.trigger)!=null?a:1}},[3]:(t,i)=>{let s=t.searchQuery!==""?0:1,a=t.searchQuery+i.value.toLowerCase(),n=(t.activeItemIndex!==null?t.items.slice(t.activeItemIndex+s).concat(t.items.slice(0,t.activeItemIndex+s)):t.items).find(d=>{var l;return((l=d.dataRef.current.textValue)==null?void 0:l.startsWith(a))&&!d.dataRef.current.disabled}),e=n?t.items.indexOf(n):-1;return e===-1||e===t.activeItemIndex?{...t,searchQuery:a}:{...t,searchQuery:a,activeItemIndex:e,activationTrigger:1}},[4](t){return t.searchQuery===""?t:{...t,searchQuery:"",searchActiveItemIndex:null}},[5]:(t,i)=>{let o=U(t,s=>[...s,{id:i.id,dataRef:i.dataRef}]);return{...t,...o}},[6]:(t,i)=>{let o=U(t,s=>{let a=s.findIndex(u=>u.id===i.id);return a!==-1&&s.splice(a,1),s});return{...t,...o,activationTrigger:1}}},G=q(null);G.displayName="MenuContext";function O(t){let i=J(G);if(i===null){let o=new Error(`<${t} /> is missing a parent <Menu /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,O),o}return i}function Te(t,i){return j(i.type,fe,t,i)}let ye=_,Ie=E(function(i,o){let s=X(Te,{menuState:1,buttonRef:N(),itemsRef:N(),items:[],searchQuery:"",activeItemIndex:null,activationTrigger:1}),[{menuState:a,itemsRef:u,buttonRef:n},e]=s,d=C(o);oe([n,u],(R,A)=>{var g;e({type:1}),ee(A,te.Loose)||(R.preventDefault(),(g=n.current)==null||g.focus())},a===0);let l=y(()=>{e({type:1})}),f=P(()=>({open:a===0,close:l}),[a,l]),M=i,T={ref:d};return K.createElement(G.Provider,{value:s},K.createElement(ue,{value:j(a,{[0]:w.Open,[1]:w.Closed})},x({ourProps:T,theirProps:M,slot:f,defaultTag:ye,name:"Menu"})))}),ge="button",Me=E(function(i,o){var g;let s=k(),{id:a=`headlessui-menu-button-${s}`,...u}=i,[n,e]=O("Menu.Button"),d=C(n.buttonRef,o),l=W(),f=y(c=>{switch(c.key){case m.Space:case m.Enter:case m.ArrowDown:c.preventDefault(),c.stopPropagation(),e({type:0}),l.nextFrame(()=>e({type:2,focus:I.First}));break;case m.ArrowUp:c.preventDefault(),c.stopPropagation(),e({type:0}),l.nextFrame(()=>e({type:2,focus:I.Last}));break}}),M=y(c=>{switch(c.key){case m.Space:c.preventDefault();break}}),T=y(c=>{if(Z(c.currentTarget))return c.preventDefault();i.disabled||(n.menuState===0?(e({type:1}),l.nextFrame(()=>{var b;return(b=n.buttonRef.current)==null?void 0:b.focus({preventScroll:!0})})):(c.preventDefault(),e({type:0})))}),R=P(()=>({open:n.menuState===0}),[n]),A={ref:d,id:a,type:se(i,n.buttonRef),"aria-haspopup":"menu","aria-controls":(g=n.itemsRef.current)==null?void 0:g.id,"aria-expanded":i.disabled?void 0:n.menuState===0,onKeyDown:f,onKeyUp:M,onClick:T};return x({ourProps:A,theirProps:u,slot:R,defaultTag:ge,name:"Menu.Button"})}),Re="div",be=Q.RenderStrategy|Q.Static,Ae=E(function(i,o){var b,S;let s=k(),{id:a=`headlessui-menu-items-${s}`,...u}=i,[n,e]=O("Menu.Items"),d=C(n.itemsRef,o),l=le(n.itemsRef),f=W(),M=ie(),T=(()=>M!==null?M===w.Open:n.menuState===0)();z(()=>{let r=n.itemsRef.current;!r||n.menuState===0&&r!==(l==null?void 0:l.activeElement)&&r.focus({preventScroll:!0})},[n.menuState,n.itemsRef,l]),ae({container:n.itemsRef.current,enabled:n.menuState===0,accept(r){return r.getAttribute("role")==="menuitem"?NodeFilter.FILTER_REJECT:r.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(r){r.setAttribute("role","none")}});let R=y(r=>{var h,F;switch(f.dispose(),r.key){case m.Space:if(n.searchQuery!=="")return r.preventDefault(),r.stopPropagation(),e({type:3,value:r.key});case m.Enter:if(r.preventDefault(),r.stopPropagation(),e({type:1}),n.activeItemIndex!==null){let{dataRef:p}=n.items[n.activeItemIndex];(F=(h=p.current)==null?void 0:h.domRef.current)==null||F.click()}$(n.buttonRef.current);break;case m.ArrowDown:return r.preventDefault(),r.stopPropagation(),e({type:2,focus:I.Next});case m.ArrowUp:return r.preventDefault(),r.stopPropagation(),e({type:2,focus:I.Previous});case m.Home:case m.PageUp:return r.preventDefault(),r.stopPropagation(),e({type:2,focus:I.First});case m.End:case m.PageDown:return r.preventDefault(),r.stopPropagation(),e({type:2,focus:I.Last});case m.Escape:r.preventDefault(),r.stopPropagation(),e({type:1}),L().nextFrame(()=>{var p;return(p=n.buttonRef.current)==null?void 0:p.focus({preventScroll:!0})});break;case m.Tab:r.preventDefault(),r.stopPropagation(),e({type:1}),L().nextFrame(()=>{re(n.buttonRef.current,r.shiftKey?V.Previous:V.Next)});break;default:r.key.length===1&&(e({type:3,value:r.key}),f.setTimeout(()=>e({type:4}),350));break}}),A=y(r=>{switch(r.key){case m.Space:r.preventDefault();break}}),g=P(()=>({open:n.menuState===0}),[n]),c={"aria-activedescendant":n.activeItemIndex===null||(b=n.items[n.activeItemIndex])==null?void 0:b.id,"aria-labelledby":(S=n.buttonRef.current)==null?void 0:S.id,id:a,onKeyDown:R,onKeyUp:A,role:"menu",tabIndex:0,ref:d};return x({ourProps:c,theirProps:u,slot:g,defaultTag:Re,features:be,visible:T,name:"Menu.Items"})}),ve=_,Se=E(function(i,o){let s=k(),{id:a=`headlessui-menu-item-${s}`,disabled:u=!1,...n}=i,[e,d]=O("Menu.Item"),l=e.activeItemIndex!==null?e.items[e.activeItemIndex].id===a:!1,f=H(null),M=C(o,f);D(()=>{if(e.menuState!==0||!l||e.activationTrigger===0)return;let p=L();return p.requestAnimationFrame(()=>{var v,B;(B=(v=f.current)==null?void 0:v.scrollIntoView)==null||B.call(v,{block:"nearest"})}),p.dispose},[f,l,e.menuState,e.activationTrigger,e.activeItemIndex]);let T=H({disabled:u,domRef:f});D(()=>{T.current.disabled=u},[T,u]),D(()=>{var p,v;T.current.textValue=(v=(p=f.current)==null?void 0:p.textContent)==null?void 0:v.toLowerCase()},[T,f]),D(()=>(d({type:5,id:a,dataRef:T}),()=>d({type:6,id:a})),[T,a]);let R=y(()=>{d({type:1})}),A=y(p=>{if(u)return p.preventDefault();d({type:1}),$(e.buttonRef.current)}),g=y(()=>{if(u)return d({type:2,focus:I.Nothing});d({type:2,focus:I.Specific,id:a})}),c=ce(),b=y(p=>c.update(p)),S=y(p=>{!c.wasMoved(p)||u||l||d({type:2,focus:I.Specific,id:a,trigger:0})}),r=y(p=>{!c.wasMoved(p)||u||!l||d({type:2,focus:I.Nothing})}),h=P(()=>({active:l,disabled:u,close:R}),[l,u,R]);return x({ourProps:{id:a,ref:M,role:"menuitem",tabIndex:u===!0?void 0:-1,"aria-disabled":u===!0?!0:void 0,disabled:void 0,onClick:A,onFocus:g,onPointerEnter:b,onMouseEnter:b,onPointerMove:S,onMouseMove:S,onPointerLeave:r,onMouseLeave:r},theirProps:n,slot:h,defaultTag:ve,name:"Menu.Item"})}),Ze=Object.assign(Ie,{Button:Me,Items:Ae,Item:Se});export{Ze as Menu}; | ||
"use client";import{useFocusRing as le}from"@react-aria/focus";import{useHover as ue}from"@react-aria/interactions";import R,{Fragment as q,createContext as pe,createRef as z,useContext as de,useEffect as me,useMemo as G,useReducer as ce,useRef as Y}from"react";import{flushSync as O}from"react-dom";import{useActivePress as fe}from'../../hooks/use-active-press.js';import{useDidElementMove as Te}from'../../hooks/use-did-element-move.js';import{useDisposables as ye}from'../../hooks/use-disposables.js';import{useElementSize as ge}from'../../hooks/use-element-size.js';import{useEvent as A}from'../../hooks/use-event.js';import{useId as U}from'../../hooks/use-id.js';import{useInertOthers as Ie}from'../../hooks/use-inert-others.js';import{useIsoMorphicEffect as H}from'../../hooks/use-iso-morphic-effect.js';import{useOnDisappear as Me}from'../../hooks/use-on-disappear.js';import{useOutsideClick as Ae}from'../../hooks/use-outside-click.js';import{useOwnerDocument as Pe}from'../../hooks/use-owner.js';import{useResolveButtonType as Se}from'../../hooks/use-resolve-button-type.js';import{useScrollLock as be}from'../../hooks/use-scroll-lock.js';import{useSyncRefs as N}from'../../hooks/use-sync-refs.js';import{useTextValue as Ee}from'../../hooks/use-text-value.js';import{useTrackedPointer as Re}from'../../hooks/use-tracked-pointer.js';import{transitionDataAttributes as ve,useTransition as xe}from'../../hooks/use-transition.js';import{useTreeWalker as _e}from'../../hooks/use-tree-walker.js';import{FloatingProvider as De,useFloatingPanel as he,useFloatingPanelProps as Ce,useFloatingReference as Fe,useFloatingReferenceProps as Oe,useResolvedAnchor as Le}from'../../internal/floating.js';import{OpenClosedProvider as Ge,State as k,useOpenClosed as Ue}from'../../internal/open-closed.js';import{isDisabledReactIssue7711 as He}from'../../utils/bugs.js';import{Focus as I,calculateActiveIndex as K}from'../../utils/calculate-active-index.js';import{disposables as Ne}from'../../utils/disposables.js';import{Focus as Z,FocusableMode as ke,focusFrom as Be,isFocusableElement as we,restoreFocusIfNecessary as ee,sortByDomNode as Ke}from'../../utils/focus-management.js';import{match as te}from'../../utils/match.js';import{RenderFeatures as ne,forwardRefWithAs as v,mergeProps as re,render as x}from'../../utils/render.js';import{useDescriptions as We}from'../description/description.js';import{Keys as T}from'../keyboard.js';import{useLabelContext as je,useLabels as oe}from'../label/label.js';import{Portal as Qe}from'../portal/portal.js';var Je=(r=>(r[r.Open=0]="Open",r[r.Closed=1]="Closed",r))(Je||{}),Ve=(r=>(r[r.Pointer=0]="Pointer",r[r.Other=1]="Other",r))(Ve||{}),Xe=(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))(Xe||{});function W(e,a=r=>r){let r=e.activeItemIndex!==null?e.items[e.activeItemIndex]:null,i=Ke(a(e.items.slice()),l=>l.dataRef.current.domRef.current),o=r?i.indexOf(r):null;return o===-1&&(o=null),{items:i,activeItemIndex:o}}let $e={[1](e){return e.menuState===1?e:{...e,activeItemIndex:null,menuState:1}},[0](e){return e.menuState===0?e:{...e,__demoMode:!1,menuState:0}},[2]:(e,a)=>{var l,p,n,u,c;if(e.menuState===1)return e;let r={...e,searchQuery:"",activationTrigger:(l=a.trigger)!=null?l:1,__demoMode:!1};if(a.focus===I.Nothing)return{...r,activeItemIndex:null};if(a.focus===I.Specific)return{...r,activeItemIndex:e.items.findIndex(t=>t.id===a.id)};if(a.focus===I.Previous){let t=e.activeItemIndex;if(t!==null){let d=e.items[t].dataRef.current.domRef,f=K(a,{resolveItems:()=>e.items,resolveActiveIndex:()=>e.activeItemIndex,resolveId:m=>m.id,resolveDisabled:m=>m.dataRef.current.disabled});if(f!==null){let m=e.items[f].dataRef.current.domRef;if(((p=d.current)==null?void 0:p.previousElementSibling)===m.current||((n=m.current)==null?void 0:n.previousElementSibling)===null)return{...r,activeItemIndex:f}}}}else if(a.focus===I.Next){let t=e.activeItemIndex;if(t!==null){let d=e.items[t].dataRef.current.domRef,f=K(a,{resolveItems:()=>e.items,resolveActiveIndex:()=>e.activeItemIndex,resolveId:m=>m.id,resolveDisabled:m=>m.dataRef.current.disabled});if(f!==null){let m=e.items[f].dataRef.current.domRef;if(((u=d.current)==null?void 0:u.nextElementSibling)===m.current||((c=m.current)==null?void 0:c.nextElementSibling)===null)return{...r,activeItemIndex:f}}}}let i=W(e),o=K(a,{resolveItems:()=>i.items,resolveActiveIndex:()=>i.activeItemIndex,resolveId:t=>t.id,resolveDisabled:t=>t.dataRef.current.disabled});return{...r,...i,activeItemIndex:o}},[3]:(e,a)=>{let i=e.searchQuery!==""?0:1,o=e.searchQuery+a.value.toLowerCase(),p=(e.activeItemIndex!==null?e.items.slice(e.activeItemIndex+i).concat(e.items.slice(0,e.activeItemIndex+i)):e.items).find(u=>{var c;return((c=u.dataRef.current.textValue)==null?void 0:c.startsWith(o))&&!u.dataRef.current.disabled}),n=p?e.items.indexOf(p):-1;return n===-1||n===e.activeItemIndex?{...e,searchQuery:o}:{...e,searchQuery:o,activeItemIndex:n,activationTrigger:1}},[4](e){return e.searchQuery===""?e:{...e,searchQuery:"",searchActiveItemIndex:null}},[5]:(e,a)=>{let r=W(e,i=>[...i,{id:a.id,dataRef:a.dataRef}]);return{...e,...r}},[6]:(e,a)=>{let r=W(e,i=>{let o=i.findIndex(l=>l.id===a.id);return o!==-1&&i.splice(o,1),i});return{...e,...r,activationTrigger:1}}},j=pe(null);j.displayName="MenuContext";function B(e){let a=de(j);if(a===null){let r=new Error(`<${e} /> is missing a parent <Menu /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,B),r}return a}function qe(e,a){return te(a.type,$e,e,a)}let ze=q;function Ye(e,a){let{__demoMode:r=!1,...i}=e,o=ce(qe,{__demoMode:r,menuState:r?0:1,buttonRef:z(),itemsRef:z(),items:[],searchQuery:"",activeItemIndex:null,activationTrigger:1}),[{menuState:l,itemsRef:p,buttonRef:n},u]=o,c=N(a);Ae(l===0,[n,p],(S,b)=>{var y;u({type:1}),we(b,ke.Loose)||(S.preventDefault(),(y=n.current)==null||y.focus())});let d=A(()=>{u({type:1})}),f=G(()=>({open:l===0,close:d}),[l,d]),m={ref:c};return R.createElement(De,null,R.createElement(j.Provider,{value:o},R.createElement(Ge,{value:te(l,{[0]:k.Open,[1]:k.Closed})},x({ourProps:m,theirProps:i,slot:f,defaultTag:ze,name:"Menu"}))))}let Ze="button";function et(e,a){var D;let r=U(),{id:i=`headlessui-menu-button-${r}`,disabled:o=!1,autoFocus:l=!1,...p}=e,[n,u]=B("Menu.Button"),c=Oe(),t=N(n.buttonRef,a,Fe()),d=A(g=>{switch(g.key){case T.Space:case T.Enter:case T.ArrowDown:g.preventDefault(),g.stopPropagation(),O(()=>u({type:0})),u({type:2,focus:I.First});break;case T.ArrowUp:g.preventDefault(),g.stopPropagation(),O(()=>u({type:0})),u({type:2,focus:I.Last});break}}),f=A(g=>{switch(g.key){case T.Space:g.preventDefault();break}}),m=A(g=>{var h;if(He(g.currentTarget))return g.preventDefault();o||(n.menuState===0?(O(()=>u({type:1})),(h=n.buttonRef.current)==null||h.focus({preventScroll:!0})):(g.preventDefault(),u({type:0})))}),{isFocusVisible:S,focusProps:b}=le({autoFocus:l}),{isHovered:y,hoverProps:E}=ue({isDisabled:o}),{pressed:P,pressProps:_}=fe({disabled:o}),C=G(()=>({open:n.menuState===0,active:P||n.menuState===0,disabled:o,hover:y,focus:S,autofocus:l}),[n,y,S,P,o,l]),F=re(c(),{ref:t,id:i,type:Se(e,n.buttonRef),"aria-haspopup":"menu","aria-controls":(D=n.itemsRef.current)==null?void 0:D.id,"aria-expanded":n.menuState===0,disabled:o||void 0,autoFocus:l,onKeyDown:d,onKeyUp:f,onClick:m},b,E,_);return x({ourProps:F,theirProps:p,slot:C,defaultTag:Ze,name:"Menu.Button"})}let tt="div",nt=ne.RenderStrategy|ne.Static;function rt(e,a){var Q,J;let r=U(),{id:i=`headlessui-menu-items-${r}`,anchor:o,portal:l=!1,modal:p=!0,transition:n=!1,...u}=e,c=Le(o),[t,d]=B("Menu.Items"),[f,m]=he(c),S=Ce(),b=N(t.itemsRef,a,c?f:null),y=Pe(t.itemsRef);c&&(l=!0);let E=Ue(),[P,_]=xe(n,t.itemsRef,E!==null?(E&k.Open)===k.Open:t.menuState===0);Me(P,t.buttonRef,()=>{d({type:1})});let C=t.__demoMode?!1:p&&t.menuState===0;be(C,y);let F=t.__demoMode?!1:p&&t.menuState===0;Ie(F,{allowed:A(()=>[t.buttonRef.current,t.itemsRef.current])});let D=t.menuState!==0,h=Te(D,t.buttonRef)?!1:P;me(()=>{let s=t.itemsRef.current;s&&t.menuState===0&&s!==(y==null?void 0:y.activeElement)&&s.focus({preventScroll:!0})},[t.menuState,t.itemsRef,y,t.itemsRef.current]),_e(t.menuState===0,{container:t.itemsRef.current,accept(s){return s.getAttribute("role")==="menuitem"?NodeFilter.FILTER_REJECT:s.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(s){s.setAttribute("role","none")}});let w=ye(),M=A(s=>{var V,X,$;switch(w.dispose(),s.key){case T.Space:if(t.searchQuery!=="")return s.preventDefault(),s.stopPropagation(),d({type:3,value:s.key});case T.Enter:if(s.preventDefault(),s.stopPropagation(),d({type:1}),t.activeItemIndex!==null){let{dataRef:se}=t.items[t.activeItemIndex];(X=(V=se.current)==null?void 0:V.domRef.current)==null||X.click()}ee(t.buttonRef.current);break;case T.ArrowDown:return s.preventDefault(),s.stopPropagation(),d({type:2,focus:I.Next});case T.ArrowUp:return s.preventDefault(),s.stopPropagation(),d({type:2,focus:I.Previous});case T.Home:case T.PageUp:return s.preventDefault(),s.stopPropagation(),d({type:2,focus:I.First});case T.End:case T.PageDown:return s.preventDefault(),s.stopPropagation(),d({type:2,focus:I.Last});case T.Escape:s.preventDefault(),s.stopPropagation(),O(()=>d({type:1})),($=t.buttonRef.current)==null||$.focus({preventScroll:!0});break;case T.Tab:s.preventDefault(),s.stopPropagation(),O(()=>d({type:1})),Be(t.buttonRef.current,s.shiftKey?Z.Previous:Z.Next);break;default:s.key.length===1&&(d({type:3,value:s.key}),w.setTimeout(()=>d({type:4}),350));break}}),L=A(s=>{switch(s.key){case T.Space:s.preventDefault();break}}),ae=G(()=>({open:t.menuState===0}),[t.menuState]),ie=re(c?S():{},{"aria-activedescendant":t.activeItemIndex===null||(Q=t.items[t.activeItemIndex])==null?void 0:Q.id,"aria-labelledby":(J=t.buttonRef.current)==null?void 0:J.id,id:i,onKeyDown:M,onKeyUp:L,role:"menu",tabIndex:t.menuState===0?0:void 0,ref:b,style:{...u.style,...m,"--button-width":ge(t.buttonRef,!0).width},...ve(_)});return R.createElement(Qe,{enabled:l?e.static||P:!1},x({ourProps:ie,theirProps:u,slot:ae,defaultTag:tt,features:nt,visible:h,name:"Menu.Items"}))}let ot=q;function at(e,a){let r=U(),{id:i=`headlessui-menu-item-${r}`,disabled:o=!1,...l}=e,[p,n]=B("Menu.Item"),u=p.activeItemIndex!==null?p.items[p.activeItemIndex].id===i:!1,c=Y(null),t=N(a,c);H(()=>{if(!p.__demoMode&&p.menuState===0&&u&&p.activationTrigger!==0)return Ne().requestAnimationFrame(()=>{var M,L;(L=(M=c.current)==null?void 0:M.scrollIntoView)==null||L.call(M,{block:"nearest"})})},[p.__demoMode,c,u,p.menuState,p.activationTrigger,p.activeItemIndex]);let d=Ee(c),f=Y({disabled:o,domRef:c,get textValue(){return d()}});H(()=>{f.current.disabled=o},[f,o]),H(()=>(n({type:5,id:i,dataRef:f}),()=>n({type:6,id:i})),[f,i]);let m=A(()=>{n({type:1})}),S=A(M=>{if(o)return M.preventDefault();n({type:1}),ee(p.buttonRef.current)}),b=A(()=>{if(o)return n({type:2,focus:I.Nothing});n({type:2,focus:I.Specific,id:i})}),y=Re(),E=A(M=>{y.update(M),!o&&(u||n({type:2,focus:I.Specific,id:i,trigger:0}))}),P=A(M=>{y.wasMoved(M)&&(o||u||n({type:2,focus:I.Specific,id:i,trigger:0}))}),_=A(M=>{y.wasMoved(M)&&(o||u&&n({type:2,focus:I.Nothing}))}),[C,F]=oe(),[D,g]=We(),h=G(()=>({active:u,focus:u,disabled:o,close:m}),[u,o,m]);return R.createElement(F,null,R.createElement(g,null,x({ourProps:{id:i,ref:t,role:"menuitem",tabIndex:o===!0?void 0:-1,"aria-disabled":o===!0?!0:void 0,"aria-labelledby":C,"aria-describedby":D,disabled:void 0,onClick:S,onFocus:b,onPointerEnter:E,onMouseEnter:E,onPointerMove:P,onMouseMove:P,onPointerLeave:_,onMouseLeave:_},theirProps:l,slot:h,defaultTag:ot,name:"Menu.Item"})))}let it="div";function st(e,a){let[r,i]=oe();return R.createElement(i,null,x({ourProps:{ref:a,"aria-labelledby":r,role:"group"},theirProps:e,slot:{},defaultTag:it,name:"Menu.Section"}))}let lt="header";function ut(e,a){let r=U(),{id:i=`headlessui-menu-heading-${r}`,...o}=e,l=je();H(()=>l.register(i),[i,l.register]);let p={id:i,ref:a,role:"presentation",...l.props};return x({ourProps:p,theirProps:o,slot:{},defaultTag:lt,name:"Menu.Heading"})}let pt="div";function dt(e,a){return x({ourProps:{ref:a,role:"separator"},theirProps:e,slot:{},defaultTag:pt,name:"Menu.Separator"})}let mt=v(Ye),ct=v(et),ft=v(rt),Tt=v(at),yt=v(st),gt=v(ut),It=v(dt),Zt=Object.assign(mt,{Button:ct,Items:ft,Item:Tt,Section:yt,Heading:gt,Separator:It});export{Zt as Menu,ct as MenuButton,gt as MenuHeading,Tt as MenuItem,ft as MenuItems,yt as MenuSection,It as MenuSeparator}; |
@@ -1,66 +0,96 @@ | ||
import React, { MutableRefObject, Ref, MouseEventHandler } from 'react'; | ||
import { Props } from '../../types.js'; | ||
import { PropsForFeatures } from '../../utils/render.js'; | ||
declare type MouseEvent<T> = Parameters<MouseEventHandler<T>>[0]; | ||
interface PopoverRenderPropArg { | ||
import React, { type ElementType, type MouseEventHandler, type MutableRefObject, type Ref } from 'react'; | ||
import { type AnchorProps } from '../../internal/floating.js'; | ||
import type { Props } from '../../types.js'; | ||
import { type HasDisplayName, type PropsForFeatures, type RefProp } from '../../utils/render.js'; | ||
type MouseEvent<T> = Parameters<MouseEventHandler<T>>[0]; | ||
declare let DEFAULT_POPOVER_TAG: "div"; | ||
type PopoverRenderPropArg = { | ||
open: boolean; | ||
close(focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null> | MouseEvent<HTMLElement>): void; | ||
} | ||
interface ButtonRenderPropArg { | ||
}; | ||
type PopoverPropsWeControl = never; | ||
export type PopoverProps<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG> = Props<TTag, PopoverRenderPropArg, PopoverPropsWeControl, { | ||
__demoMode?: boolean; | ||
}>; | ||
declare function PopoverFn<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(props: PopoverProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_BUTTON_TAG: "button"; | ||
type ButtonRenderPropArg = { | ||
open: boolean; | ||
} | ||
declare type ButtonPropsWeControl = 'type' | 'aria-expanded' | 'aria-controls' | 'onKeyDown' | 'onClick'; | ||
interface OverlayRenderPropArg { | ||
active: boolean; | ||
hover: boolean; | ||
focus: boolean; | ||
disabled: boolean; | ||
autofocus: boolean; | ||
}; | ||
type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded'; | ||
export type PopoverButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, { | ||
disabled?: boolean; | ||
autoFocus?: boolean; | ||
}>; | ||
declare function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: PopoverButtonProps<TTag>, ref: Ref<HTMLButtonElement>): React.JSX.Element; | ||
declare let DEFAULT_BACKDROP_TAG: "div"; | ||
type BackdropRenderPropArg = { | ||
open: boolean; | ||
} | ||
declare type OverlayPropsWeControl = 'aria-hidden' | 'onClick'; | ||
declare let OverlayRenderFeatures: number; | ||
interface PanelRenderPropArg { | ||
}; | ||
type BackdropPropsWeControl = 'aria-hidden'; | ||
declare let BackdropRenderFeatures: number; | ||
export type PopoverBackdropProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = Props<TTag, BackdropRenderPropArg, BackdropPropsWeControl, { | ||
transition?: boolean; | ||
} & PropsForFeatures<typeof BackdropRenderFeatures>>; | ||
export type PopoverOverlayProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = PopoverBackdropProps<TTag>; | ||
declare function BackdropFn<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(props: PopoverBackdropProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
declare let DEFAULT_PANEL_TAG: "div"; | ||
type PanelRenderPropArg = { | ||
open: boolean; | ||
close: (focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null>) => void; | ||
}; | ||
type PanelPropsWeControl = 'tabIndex'; | ||
export type PopoverPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, PanelPropsWeControl, { | ||
focus?: boolean; | ||
anchor?: AnchorProps; | ||
portal?: boolean; | ||
modal?: boolean; | ||
transition?: boolean; | ||
static?: boolean; | ||
unmount?: boolean; | ||
}>; | ||
declare function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: PopoverPanelProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_GROUP_TAG: "div"; | ||
type GroupRenderPropArg = {}; | ||
type GroupPropsWeControl = never; | ||
export type PopoverGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag, GroupRenderPropArg, GroupPropsWeControl>; | ||
declare function GroupFn<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: PopoverGroupProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
export interface _internal_ComponentPopover extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(props: PopoverProps<TTag> & RefProp<typeof PopoverFn>): JSX.Element; | ||
} | ||
declare type PanelPropsWeControl = 'onKeyDown'; | ||
declare let PanelRenderFeatures: number; | ||
interface GroupRenderPropArg { | ||
export interface _internal_ComponentPopoverButton extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: PopoverButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element; | ||
} | ||
export declare let Popover: (<TTag extends React.ElementType<any> = "div">(props: Props<TTag, PopoverRenderPropArg, "1D45E01E-AF44-47C4-988A-19A94EBAF55C">, ref: Ref<HTMLElement>) => JSX.Element) & { | ||
displayName: string; | ||
} & { | ||
Button: (<TTag_1 extends React.ElementType<any> = "button">(props: Props<TTag_1, ButtonRenderPropArg, ButtonPropsWeControl>, ref: Ref<HTMLButtonElement>) => JSX.Element) & { | ||
displayName: string; | ||
}; | ||
Overlay: (<TTag_2 extends React.ElementType<any> = "div">(props: Props<TTag_2, OverlayRenderPropArg, OverlayPropsWeControl> & (({ | ||
static?: undefined; | ||
} & { | ||
unmount?: boolean | undefined; | ||
}) | ({ | ||
unmount?: undefined; | ||
} & { | ||
static?: boolean | undefined; | ||
})), ref: Ref<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Panel: (<TTag_3 extends React.ElementType<any> = "div">(props: Omit<import('../../types.js').PropsOf<TTag_3>, ("as" | "children" | "refName" | "className") | "onKeyDown"> & { | ||
as?: TTag_3 | undefined; | ||
children?: React.ReactNode | ((bag: PanelRenderPropArg) => React.ReactElement<any, string | React.JSXElementConstructor<any>>); | ||
refName?: string | undefined; | ||
} & (true extends (import('../../types.js').PropsOf<TTag_3> extends never ? never : "className" extends keyof import('../../types.js').PropsOf<TTag_3> ? true : never) ? { | ||
className?: import('../../types.js').PropsOf<TTag_3>["className"] | ((bag: PanelRenderPropArg) => string) | undefined; | ||
} : {}) & (({ | ||
static?: undefined; | ||
} & { | ||
unmount?: boolean | undefined; | ||
}) | ({ | ||
unmount?: undefined; | ||
} & { | ||
static?: boolean | undefined; | ||
})) & { | ||
focus?: boolean | undefined; | ||
}, ref: Ref<HTMLDivElement>) => JSX.Element) & { | ||
displayName: string; | ||
}; | ||
Group: (<TTag_4 extends React.ElementType<any> = "div">(props: Props<TTag_4, GroupRenderPropArg, "1D45E01E-AF44-47C4-988A-19A94EBAF55C">, ref: Ref<HTMLElement>) => JSX.Element) & { | ||
displayName: string; | ||
}; | ||
export interface _internal_ComponentPopoverBackdrop extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(props: PopoverBackdropProps<TTag> & RefProp<typeof BackdropFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentPopoverPanel extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: PopoverPanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentPopoverGroup extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: PopoverGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element; | ||
} | ||
export declare let PopoverButton: _internal_ComponentPopoverButton; | ||
/** @deprecated use `<PopoverBackdrop>` instead of `<PopoverOverlay>` */ | ||
export declare let PopoverOverlay: _internal_ComponentPopoverBackdrop; | ||
export declare let PopoverBackdrop: _internal_ComponentPopoverBackdrop; | ||
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 `<PopoverBackdrop>` instead of `<Popover.Backdrop>` */ | ||
Backdrop: _internal_ComponentPopoverBackdrop; | ||
/** @deprecated use `<PopoverOverlay>` instead of `<Popover.Overlay>` */ | ||
Overlay: _internal_ComponentPopoverBackdrop; | ||
/** @deprecated use `<PopoverPanel>` instead of `<Popover.Panel>` */ | ||
Panel: _internal_ComponentPopoverPanel; | ||
/** @deprecated use `<PopoverGroup>` instead of `<Popover.Group>` */ | ||
Group: _internal_ComponentPopoverGroup; | ||
}; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import h,{createContext as q,createRef as se,useContext as z,useEffect as j,useMemo as x,useReducer as Te,useRef as J,useState as me}from"react";import{match as G}from'../../utils/match.js';import{forwardRefWithAs as V,render as $,Features as Q}from'../../utils/render.js';import{optionalRef as ye,useSyncRefs as w}from'../../hooks/use-sync-refs.js';import{useId as _}from'../../hooks/use-id.js';import{Keys as H}from'../keyboard.js';import{isDisabledReactIssue7711 as ie}from'../../utils/bugs.js';import{getFocusableElements as fe,Focus as N,focusIn as K,isFocusableElement as Ee,FocusableMode as be}from'../../utils/focus-management.js';import{OpenClosedProvider as Se,State as X,useOpenClosed as ce}from'../../internal/open-closed.js';import{useResolveButtonType as ge}from'../../hooks/use-resolve-button-type.js';import{useOutsideClick as Ae}from'../../hooks/use-outside-click.js';import{getOwnerDocument as Re}from'../../utils/owner.js';import{useOwnerDocument as ee}from'../../hooks/use-owner.js';import{useEventListener as Ie}from'../../hooks/use-event-listener.js';import{Hidden as te,Features as oe}from'../../internal/hidden.js';import{useEvent as y}from'../../hooks/use-event.js';import{useTabDirection as de,Direction as U}from'../../hooks/use-tab-direction.js';import'../../utils/micro-task.js';import{useLatestValue as Pe}from'../../hooks/use-latest-value.js';var Ce=(f=>(f[f.Open=0]="Open",f[f.Closed=1]="Closed",f))(Ce||{}),Oe=(o=>(o[o.TogglePopover=0]="TogglePopover",o[o.ClosePopover=1]="ClosePopover",o[o.SetButton=2]="SetButton",o[o.SetButtonId=3]="SetButtonId",o[o.SetPanel=4]="SetPanel",o[o.SetPanelId=5]="SetPanelId",o))(Oe||{});let Me={[0]:r=>({...r,popoverState:G(r.popoverState,{[0]:1,[1]:0})}),[1](r){return r.popoverState===1?r:{...r,popoverState:1}},[2](r,n){return r.button===n.button?r:{...r,button:n.button}},[3](r,n){return r.buttonId===n.buttonId?r:{...r,buttonId:n.buttonId}},[4](r,n){return r.panel===n.panel?r:{...r,panel:n.panel}},[5](r,n){return r.panelId===n.panelId?r:{...r,panelId:n.panelId}}},ne=q(null);ne.displayName="PopoverContext";function Z(r){let n=z(ne);if(n===null){let f=new Error(`<${r} /> is missing a parent <Popover /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(f,Z),f}return n}let re=q(null);re.displayName="PopoverAPIContext";function le(r){let n=z(re);if(n===null){let f=new Error(`<${r} /> is missing a parent <Popover /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(f,le),f}return n}let ae=q(null);ae.displayName="PopoverGroupContext";function ve(){return z(ae)}let ue=q(null);ue.displayName="PopoverPanelContext";function Le(){return z(ue)}function Fe(r,n){return G(n.type,Me,r,n)}let Be="div",he=V(function(n,f){var O;let I=J(null),b=w(f,ye(e=>{I.current=e})),S=Te(Fe,{popoverState:1,buttons:[],button:null,buttonId:null,panel:null,panelId:null,beforePanelSentinel:se(),afterPanelSentinel:se()}),[{popoverState:o,button:t,buttonId:P,panel:a,panelId:L,beforePanelSentinel:F,afterPanelSentinel:v},u]=S,s=ee((O=I.current)!=null?O:t),p=x(()=>{if(!t||!a)return!1;for(let M of document.querySelectorAll("body > *"))if(Number(M==null?void 0:M.contains(t))^Number(M==null?void 0:M.contains(a)))return!0;let e=fe(),l=e.indexOf(t),d=(l+e.length-1)%e.length,E=(l+1)%e.length,D=e[d],Y=e[E];return!a.contains(D)&&!a.contains(Y)},[t,a]),c=Pe(P),T=Pe(L),g=x(()=>({buttonId:c,panelId:T,close:()=>u({type:1})}),[c,T,u]),A=ve(),C=A==null?void 0:A.registerPopover,k=y(()=>{var e;return(e=A==null?void 0:A.isFocusWithinPopoverGroup())!=null?e:(s==null?void 0:s.activeElement)&&((t==null?void 0:t.contains(s.activeElement))||(a==null?void 0:a.contains(s.activeElement)))});j(()=>C==null?void 0:C(g),[C,g]),Ie(s==null?void 0:s.defaultView,"focus",e=>{var l,d,E,D;o===0&&(k()||!t||!a||e.target!==window&&((d=(l=F.current)==null?void 0:l.contains)!=null&&d.call(l,e.target)||(D=(E=v.current)==null?void 0:E.contains)!=null&&D.call(E,e.target)||u({type:1})))},!0),Ae([t,a],(e,l)=>{u({type:1}),Ee(l,be.Loose)||(e.preventDefault(),t==null||t.focus())},o===0);let B=y(e=>{u({type:1});let l=(()=>e?e instanceof HTMLElement?e:"current"in e&&e.current instanceof HTMLElement?e.current:t:t)();l==null||l.focus()}),W=x(()=>({close:B,isPortalled:p}),[B,p]),i=x(()=>({open:o===0,close:B}),[o,B]),m=n,R={ref:b};return h.createElement(ne.Provider,{value:S},h.createElement(re.Provider,{value:W},h.createElement(Se,{value:G(o,{[0]:X.Open,[1]:X.Closed})},$({ourProps:R,theirProps:m,slot:i,defaultTag:Be,name:"Popover"}))))}),xe="button",De=V(function(n,f){let I=_(),{id:b=`headlessui-popover-button-${I}`,...S}=n,[o,t]=Z("Popover.Button"),{isPortalled:P}=le("Popover.Button"),a=J(null),L=`headlessui-focus-sentinel-${_()}`,F=ve(),v=F==null?void 0:F.closeOthers,u=Le(),s=u===null?!1:u===o.panelId;j(()=>{if(!s)return t({type:3,buttonId:b}),()=>{t({type:3,buttonId:null})}},[b,t]);let p=w(a,f,s?null:e=>{if(e)o.buttons.push(b);else{let l=o.buttons.indexOf(b);l!==-1&&o.buttons.splice(l,1)}o.buttons.length>1&&console.warn("You are already using a <Popover.Button /> but only 1 <Popover.Button /> is supported."),e&&t({type:2,button:e})}),c=w(a,f),T=ee(a),g=y(e=>{var l,d,E;if(s){if(o.popoverState===1)return;switch(e.key){case H.Space:case H.Enter:e.preventDefault(),(d=(l=e.target).click)==null||d.call(l),t({type:1}),(E=o.button)==null||E.focus();break}}else switch(e.key){case H.Space:case H.Enter:e.preventDefault(),e.stopPropagation(),o.popoverState===1&&(v==null||v(o.buttonId)),t({type:0});break;case H.Escape:if(o.popoverState!==0)return v==null?void 0:v(o.buttonId);if(!a.current||(T==null?void 0:T.activeElement)&&!a.current.contains(T.activeElement))return;e.preventDefault(),e.stopPropagation(),t({type:1});break}}),A=y(e=>{s||e.key===H.Space&&e.preventDefault()}),C=y(e=>{var l,d;ie(e.currentTarget)||n.disabled||(s?(t({type:1}),(l=o.button)==null||l.focus()):(e.preventDefault(),e.stopPropagation(),o.popoverState===1&&(v==null||v(o.buttonId)),t({type:0}),(d=o.button)==null||d.focus()))}),k=y(e=>{e.preventDefault(),e.stopPropagation()}),B=o.popoverState===0,W=x(()=>({open:B}),[B]),i=ge(n,a),m=s?{ref:c,type:i,onKeyDown:g,onClick:C}:{ref:p,id:o.buttonId,type:i,"aria-expanded":n.disabled?void 0:o.popoverState===0,"aria-controls":o.panel?o.panelId:void 0,onKeyDown:g,onKeyUp:A,onClick:C,onMouseDown:k},R=de(),O=y(()=>{let e=o.panel;if(!e)return;function l(){G(R.current,{[U.Forwards]:()=>K(e,N.First),[U.Backwards]:()=>K(e,N.Last)})}l()});return h.createElement(h.Fragment,null,$({ourProps:m,theirProps:S,slot:W,defaultTag:xe,name:"Popover.Button"}),B&&!s&&P&&h.createElement(te,{id:L,features:oe.Focusable,as:"button",type:"button",onFocus:O}))}),He="div",ke=Q.RenderStrategy|Q.Static,Ge=V(function(n,f){let I=_(),{id:b=`headlessui-popover-overlay-${I}`,...S}=n,[{popoverState:o},t]=Z("Popover.Overlay"),P=w(f),a=ce(),L=(()=>a!==null?a===X.Open:o===0)(),F=y(s=>{if(ie(s.currentTarget))return s.preventDefault();t({type:1})}),v=x(()=>({open:o===0}),[o]);return $({ourProps:{ref:P,id:b,"aria-hidden":!0,onClick:F},theirProps:S,slot:v,defaultTag:He,features:ke,visible:L,name:"Popover.Overlay"})}),we="div",_e=Q.RenderStrategy|Q.Static,Ne=V(function(n,f){let I=_(),{id:b=`headlessui-popover-panel-${I}`,focus:S=!1,...o}=n,[t,P]=Z("Popover.Panel"),{close:a,isPortalled:L}=le("Popover.Panel"),F=`headlessui-focus-sentinel-before-${_()}`,v=`headlessui-focus-sentinel-after-${_()}`,u=J(null),s=w(u,f,i=>{P({type:4,panel:i})}),p=ee(u);j(()=>(P({type:5,panelId:b}),()=>{P({type:5,panelId:null})}),[b,P]);let c=ce(),T=(()=>c!==null?c===X.Open:t.popoverState===0)(),g=y(i=>{var m;switch(i.key){case H.Escape:if(t.popoverState!==0||!u.current||(p==null?void 0:p.activeElement)&&!u.current.contains(p.activeElement))return;i.preventDefault(),i.stopPropagation(),P({type:1}),(m=t.button)==null||m.focus();break}});j(()=>{var i;n.static||t.popoverState===1&&((i=n.unmount)!=null?i:!0)&&P({type:4,panel:null})},[t.popoverState,n.unmount,n.static,P]),j(()=>{if(!S||t.popoverState!==0||!u.current)return;let i=p==null?void 0:p.activeElement;u.current.contains(i)||K(u.current,N.First)},[S,u,t.popoverState]);let A=x(()=>({open:t.popoverState===0,close:a}),[t,a]),C={ref:s,id:t.panelId,onKeyDown:g,onBlur:S&&t.popoverState===0?i=>{var R,O,e,l,d;let m=i.relatedTarget;!m||!u.current||(R=u.current)!=null&&R.contains(m)||(P({type:1}),(((e=(O=t.beforePanelSentinel.current)==null?void 0:O.contains)==null?void 0:e.call(O,m))||((d=(l=t.afterPanelSentinel.current)==null?void 0:l.contains)==null?void 0:d.call(l,m)))&&m.focus({preventScroll:!0}))}:void 0,tabIndex:-1},k=de(),B=y(()=>{let i=u.current;if(!i)return;function m(){G(k.current,{[U.Forwards]:()=>{K(i,N.First)},[U.Backwards]:()=>{var R;(R=t.button)==null||R.focus({preventScroll:!0})}})}m()}),W=y(()=>{let i=u.current;if(!i)return;function m(){G(k.current,{[U.Forwards]:()=>{var E,D,Y;if(!t.button)return;let R=fe(),O=R.indexOf(t.button),e=R.slice(0,O+1),d=[...R.slice(O+1),...e];for(let M of d.slice())if(((D=(E=M==null?void 0:M.id)==null?void 0:E.startsWith)==null?void 0:D.call(E,"headlessui-focus-sentinel-"))||((Y=t.panel)==null?void 0:Y.contains(M))){let pe=d.indexOf(M);pe!==-1&&d.splice(pe,1)}K(d,N.First,{sorted:!1})},[U.Backwards]:()=>K(i,N.Last)})}m()});return h.createElement(ue.Provider,{value:t.panelId},T&&L&&h.createElement(te,{id:F,ref:t.beforePanelSentinel,features:oe.Focusable,as:"button",type:"button",onFocus:B}),$({ourProps:C,theirProps:o,slot:A,defaultTag:we,features:_e,visible:T,name:"Popover.Panel"}),T&&L&&h.createElement(te,{id:v,ref:t.afterPanelSentinel,features:oe.Focusable,as:"button",type:"button",onFocus:W}))}),Ke="div",Ue=V(function(n,f){let I=J(null),b=w(I,f),[S,o]=me([]),t=y(p=>{o(c=>{let T=c.indexOf(p);if(T!==-1){let g=c.slice();return g.splice(T,1),g}return c})}),P=y(p=>(o(c=>[...c,p]),()=>t(p))),a=y(()=>{var T;let p=Re(I);if(!p)return!1;let c=p.activeElement;return(T=I.current)!=null&&T.contains(c)?!0:S.some(g=>{var A,C;return((A=p.getElementById(g.buttonId.current))==null?void 0:A.contains(c))||((C=p.getElementById(g.panelId.current))==null?void 0:C.contains(c))})}),L=y(p=>{for(let c of S)c.buttonId.current!==p&&c.close()}),F=x(()=>({registerPopover:P,unregisterPopover:t,isFocusWithinPopoverGroup:a,closeOthers:L}),[P,t,a,L]),v=x(()=>({}),[]),u=n,s={ref:b};return h.createElement(ae.Provider,{value:F},$({ourProps:s,theirProps:u,slot:v,defaultTag:Ke,name:"Popover.Group"}))}),St=Object.assign(he,{Button:De,Overlay:Ge,Panel:Ne,Group:Ue});export{St as Popover}; | ||
"use client";import{useFocusRing as xe}from"@react-aria/focus";import{useHover as Oe}from"@react-aria/interactions";import E,{createContext as ee,createRef as ue,useContext as te,useEffect as oe,useMemo as L,useReducer as Le,useRef as X,useState as ge}from"react";import{useActivePress as Ie}from'../../hooks/use-active-press.js';import{useElementSize as De}from'../../hooks/use-element-size.js';import{useEvent as A}from'../../hooks/use-event.js';import{useEventListener as he}from'../../hooks/use-event-listener.js';import{useId as re}from'../../hooks/use-id.js';import{useIsoMorphicEffect as ke}from'../../hooks/use-iso-morphic-effect.js';import{useLatestValue as Se}from'../../hooks/use-latest-value.js';import{useOnDisappear as Ge}from'../../hooks/use-on-disappear.js';import{useOutsideClick as He}from'../../hooks/use-outside-click.js';import{useOwnerDocument as ie}from'../../hooks/use-owner.js';import{useResolveButtonType as Ne}from'../../hooks/use-resolve-button-type.js';import{useMainTreeNode as Ue,useRootContainers as we}from'../../hooks/use-root-containers.js';import{useScrollLock as Ke}from'../../hooks/use-scroll-lock.js';import{optionalRef as We,useSyncRefs as q}from'../../hooks/use-sync-refs.js';import{Direction as G,useTabDirection as Ae}from'../../hooks/use-tab-direction.js';import{transitionDataAttributes as Re,useTransition as Ce}from'../../hooks/use-transition.js';import{CloseProvider as je}from'../../internal/close-provider.js';import{FloatingProvider as Ve,useFloatingPanel as $e,useFloatingPanelProps as Je,useFloatingReference as Xe,useResolvedAnchor as qe}from'../../internal/floating.js';import{Hidden as de,HiddenFeatures as fe}from'../../internal/hidden.js';import{OpenClosedProvider as ze,ResetOpenClosedProvider as Ye,State as z,useOpenClosed as Be}from'../../internal/open-closed.js';import{isDisabledReactIssue7711 as _e}from'../../utils/bugs.js';import{Focus as H,FocusResult as Pe,FocusableMode as Qe,focusIn as U,getFocusableElements as ce,isFocusableElement as Ze}from'../../utils/focus-management.js';import{match as w}from'../../utils/match.js';import'../../utils/micro-task.js';import{getOwnerDocument as et}from'../../utils/owner.js';import{RenderFeatures as ne,forwardRefWithAs as Y,mergeProps as ve,render as Z,useMergeRefsFn as tt}from'../../utils/render.js';import{Keys as K}from'../keyboard.js';import{Portal as ot,useNestedPortals as rt}from'../portal/portal.js';var nt=(f=>(f[f.Open=0]="Open",f[f.Closed=1]="Closed",f))(nt||{}),lt=(u=>(u[u.TogglePopover=0]="TogglePopover",u[u.ClosePopover=1]="ClosePopover",u[u.SetButton=2]="SetButton",u[u.SetButtonId=3]="SetButtonId",u[u.SetPanel=4]="SetPanel",u[u.SetPanelId=5]="SetPanelId",u))(lt||{});let at={[0]:t=>({...t,popoverState:w(t.popoverState,{[0]:1,[1]:0}),__demoMode:!1}),[1](t){return t.popoverState===1?t:{...t,popoverState:1,__demoMode:!1}},[2](t,a){return t.button===a.button?t:{...t,button:a.button}},[3](t,a){return t.buttonId===a.buttonId?t:{...t,buttonId:a.buttonId}},[4](t,a){return t.panel===a.panel?t:{...t,panel:a.panel}},[5](t,a){return t.panelId===a.panelId?t:{...t,panelId:a.panelId}}},Te=ee(null);Te.displayName="PopoverContext";function le(t){let a=te(Te);if(a===null){let f=new Error(`<${t} /> is missing a parent <Popover /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(f,le),f}return a}let ae=ee(null);ae.displayName="PopoverAPIContext";function me(t){let a=te(ae);if(a===null){let f=new Error(`<${t} /> is missing a parent <Popover /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(f,me),f}return a}let ye=ee(null);ye.displayName="PopoverGroupContext";function Fe(){return te(ye)}let pe=ee(null);pe.displayName="PopoverPanelContext";function pt(){return te(pe)}function st(t,a){return w(a.type,at,t,a)}let ut="div";function it(t,a){var J;let{__demoMode:f=!1,...C}=t,m=X(null),R=q(a,We(e=>{m.current=e})),u=X([]),l=Le(st,{__demoMode:f,popoverState:f?0:1,buttons:u,button:null,buttonId:null,panel:null,panelId:null,beforePanelSentinel:ue(),afterPanelSentinel:ue(),afterButtonSentinel:ue()}),[{popoverState:c,button:P,buttonId:r,panel:i,panelId:B,beforePanelSentinel:y,afterPanelSentinel:I,afterButtonSentinel:d},n]=l,v=ie((J=m.current)!=null?J:P),_=L(()=>{if(!P||!i)return!1;for(let g of document.querySelectorAll("body > *"))if(Number(g==null?void 0:g.contains(P))^Number(g==null?void 0:g.contains(i)))return!0;let e=ce(),s=e.indexOf(P),o=(s+e.length-1)%e.length,p=(s+1)%e.length,S=e[o],b=e[p];return!i.contains(S)&&!i.contains(b)},[P,i]),F=Se(r),x=Se(B),W=L(()=>({buttonId:F,panelId:x,close:()=>n({type:1})}),[F,x,n]),T=Fe(),D=T==null?void 0:T.registerPopover,N=A(()=>{var e;return(e=T==null?void 0:T.isFocusWithinPopoverGroup())!=null?e:(v==null?void 0:v.activeElement)&&((P==null?void 0:P.contains(v.activeElement))||(i==null?void 0:i.contains(v.activeElement)))});oe(()=>D==null?void 0:D(W),[D,W]);let[M,j]=rt(),h=we({mainTreeNodeRef:T==null?void 0:T.mainTreeNodeRef,portals:M,defaultContainers:[P,i]});he(v==null?void 0:v.defaultView,"focus",e=>{var s,o,p,S,b,g;e.target!==window&&e.target instanceof HTMLElement&&c===0&&(N()||P&&i&&(h.contains(e.target)||(o=(s=y.current)==null?void 0:s.contains)!=null&&o.call(s,e.target)||(S=(p=I.current)==null?void 0:p.contains)!=null&&S.call(p,e.target)||(g=(b=d.current)==null?void 0:b.contains)!=null&&g.call(b,e.target)||n({type:1})))},!0),He(c===0,h.resolveContainers,(e,s)=>{n({type:1}),Ze(s,Qe.Loose)||(e.preventDefault(),P==null||P.focus())});let O=A(e=>{n({type:1});let s=(()=>e?e instanceof HTMLElement?e:"current"in e&&e.current instanceof HTMLElement?e.current:P:P)();s==null||s.focus()}),k=L(()=>({close:O,isPortalled:_}),[O,_]),V=L(()=>({open:c===0,close:O}),[c,O]),$={ref:R};return E.createElement(Ve,null,E.createElement(pe.Provider,{value:null},E.createElement(Te.Provider,{value:l},E.createElement(ae.Provider,{value:k},E.createElement(je,{value:O},E.createElement(ze,{value:w(c,{[0]:z.Open,[1]:z.Closed})},E.createElement(j,null,Z({ourProps:$,theirProps:C,slot:V,defaultTag:ut,name:"Popover"}),E.createElement(h.MainTreeNode,null))))))))}let dt="button";function ft(t,a){let f=re(),{id:C=`headlessui-popover-button-${f}`,disabled:m=!1,autoFocus:R=!1,...u}=t,[l,c]=le("Popover.Button"),{isPortalled:P}=me("Popover.Button"),r=X(null),i=`headlessui-focus-sentinel-${re()}`,B=Fe(),y=B==null?void 0:B.closeOthers,d=pt()!==null;oe(()=>{if(!d)return c({type:3,buttonId:C}),()=>{c({type:3,buttonId:null})}},[d,C,c]);let[n]=ge(()=>Symbol()),v=q(r,a,Xe(),d?null:o=>{if(o)l.buttons.current.push(n);else{let p=l.buttons.current.indexOf(n);p!==-1&&l.buttons.current.splice(p,1)}l.buttons.current.length>1&&console.warn("You are already using a <Popover.Button /> but only 1 <Popover.Button /> is supported."),o&&c({type:2,button:o})}),_=q(r,a),F=ie(r),x=A(o=>{var p,S,b;if(d){if(l.popoverState===1)return;switch(o.key){case K.Space:case K.Enter:o.preventDefault(),(S=(p=o.target).click)==null||S.call(p),c({type:1}),(b=l.button)==null||b.focus();break}}else switch(o.key){case K.Space:case K.Enter:o.preventDefault(),o.stopPropagation(),l.popoverState===1&&(y==null||y(l.buttonId)),c({type:0});break;case K.Escape:if(l.popoverState!==0)return y==null?void 0:y(l.buttonId);if(!r.current||F!=null&&F.activeElement&&!r.current.contains(F.activeElement))return;o.preventDefault(),o.stopPropagation(),c({type:1});break}}),W=A(o=>{d||o.key===K.Space&&o.preventDefault()}),T=A(o=>{var p,S;_e(o.currentTarget)||m||(d?(c({type:1}),(p=l.button)==null||p.focus()):(o.preventDefault(),o.stopPropagation(),l.popoverState===1&&(y==null||y(l.buttonId)),c({type:0}),(S=l.button)==null||S.focus()))}),D=A(o=>{o.preventDefault(),o.stopPropagation()}),{isFocusVisible:N,focusProps:M}=xe({autoFocus:R}),{isHovered:j,hoverProps:h}=Oe({isDisabled:m}),{pressed:Q,pressProps:O}=Ie({disabled:m}),k=l.popoverState===0,V=L(()=>({open:k,active:Q||k,disabled:m,hover:j,focus:N,autofocus:R}),[k,j,N,Q,m,R]),$=Ne(t,r),J=d?ve({ref:_,type:$,onKeyDown:x,onClick:T,disabled:m||void 0,autoFocus:R},M,h,O):ve({ref:v,id:l.buttonId,type:$,"aria-expanded":l.popoverState===0,"aria-controls":l.panel?l.panelId:void 0,disabled:m||void 0,autoFocus:R,onKeyDown:x,onKeyUp:W,onClick:T,onMouseDown:D},M,h,O),e=Ae(),s=A(()=>{let o=l.panel;if(!o)return;function p(){w(e.current,{[G.Forwards]:()=>U(o,H.First),[G.Backwards]:()=>U(o,H.Last)})===Pe.Error&&U(ce().filter(b=>b.dataset.headlessuiFocusGuard!=="true"),w(e.current,{[G.Forwards]:H.Next,[G.Backwards]:H.Previous}),{relativeTo:l.button})}p()});return E.createElement(E.Fragment,null,Z({ourProps:J,theirProps:u,slot:V,defaultTag:dt,name:"Popover.Button"}),k&&!d&&P&&E.createElement(de,{id:i,ref:l.afterButtonSentinel,features:fe.Focusable,"data-headlessui-focus-guard":!0,as:"button",type:"button",onFocus:s}))}let Pt="div",ct=ne.RenderStrategy|ne.Static;function Me(t,a){let f=re(),{id:C=`headlessui-popover-backdrop-${f}`,transition:m=!1,...R}=t,[{popoverState:u},l]=le("Popover.Backdrop"),c=X(null),P=q(a,c),r=Be(),[i,B]=Ce(m,c,r!==null?(r&z.Open)===z.Open:u===0),y=A(n=>{if(_e(n.currentTarget))return n.preventDefault();l({type:1})}),I=L(()=>({open:u===0}),[u]),d={ref:P,id:C,"aria-hidden":!0,onClick:y,...Re(B)};return Z({ourProps:d,theirProps:R,slot:I,defaultTag:Pt,features:ct,visible:i,name:"Popover.Backdrop"})}let vt="div",Tt=ne.RenderStrategy|ne.Static;function mt(t,a){let f=re(),{id:C=`headlessui-popover-panel-${f}`,focus:m=!1,anchor:R,portal:u=!1,modal:l=!1,transition:c=!1,...P}=t,[r,i]=le("Popover.Panel"),{close:B,isPortalled:y}=me("Popover.Panel"),I=`headlessui-focus-sentinel-before-${f}`,d=`headlessui-focus-sentinel-after-${f}`,n=X(null),v=qe(R),[_,F]=$e(v),x=Je();v&&(u=!0);let W=q(n,a,v?_:null,e=>{i({type:4,panel:e})}),T=ie(n),D=tt();ke(()=>(i({type:5,panelId:C}),()=>{i({type:5,panelId:null})}),[C,i]);let N=Be(),[M,j]=Ce(c,n,N!==null?(N&z.Open)===z.Open:r.popoverState===0);Ge(M,r.button,()=>{i({type:1})});let h=r.__demoMode?!1:l&&M;Ke(h,T);let Q=A(e=>{var s;switch(e.key){case K.Escape:if(r.popoverState!==0||!n.current||T!=null&&T.activeElement&&!n.current.contains(T.activeElement))return;e.preventDefault(),e.stopPropagation(),i({type:1}),(s=r.button)==null||s.focus();break}});oe(()=>{var e;t.static||r.popoverState===1&&((e=t.unmount)==null||e)&&i({type:4,panel:null})},[r.popoverState,t.unmount,t.static,i]),oe(()=>{if(r.__demoMode||!m||r.popoverState!==0||!n.current)return;let e=T==null?void 0:T.activeElement;n.current.contains(e)||U(n.current,H.First)},[r.__demoMode,m,n,r.popoverState]);let O=L(()=>({open:r.popoverState===0,close:B}),[r.popoverState,B]),k=ve(v?x():{},{ref:W,id:C,onKeyDown:Q,onBlur:m&&r.popoverState===0?e=>{var o,p,S,b,g;let s=e.relatedTarget;s&&n.current&&((o=n.current)!=null&&o.contains(s)||(i({type:1}),((S=(p=r.beforePanelSentinel.current)==null?void 0:p.contains)!=null&&S.call(p,s)||(g=(b=r.afterPanelSentinel.current)==null?void 0:b.contains)!=null&&g.call(b,s))&&s.focus({preventScroll:!0})))}:void 0,tabIndex:-1,style:{...P.style,...F,"--button-width":De(r.button,!0).width},...Re(j)}),V=Ae(),$=A(()=>{let e=n.current;if(!e)return;function s(){w(V.current,{[G.Forwards]:()=>{var p;U(e,H.First)===Pe.Error&&((p=r.afterPanelSentinel.current)==null||p.focus())},[G.Backwards]:()=>{var o;(o=r.button)==null||o.focus({preventScroll:!0})}})}s()}),J=A(()=>{let e=n.current;if(!e)return;function s(){w(V.current,{[G.Forwards]:()=>{var Ee;if(!r.button)return;let o=ce(),p=o.indexOf(r.button),S=o.slice(0,p+1),g=[...o.slice(p+1),...S];for(let se of g.slice())if(se.dataset.headlessuiFocusGuard==="true"||(Ee=r.panel)!=null&&Ee.contains(se)){let be=g.indexOf(se);be!==-1&&g.splice(be,1)}U(g,H.First,{sorted:!1})},[G.Backwards]:()=>{var p;U(e,H.Previous)===Pe.Error&&((p=r.button)==null||p.focus())}})}s()});return E.createElement(Ye,null,E.createElement(pe.Provider,{value:C},E.createElement(ae.Provider,{value:{close:B,isPortalled:y}},E.createElement(ot,{enabled:u?t.static||M:!1},M&&y&&E.createElement(de,{id:I,ref:r.beforePanelSentinel,features:fe.Focusable,"data-headlessui-focus-guard":!0,as:"button",type:"button",onFocus:$}),Z({mergeRefs:D,ourProps:k,theirProps:P,slot:O,defaultTag:vt,features:Tt,visible:M,name:"Popover.Panel"}),M&&y&&E.createElement(de,{id:d,ref:r.afterPanelSentinel,features:fe.Focusable,"data-headlessui-focus-guard":!0,as:"button",type:"button",onFocus:J})))))}let yt="div";function Et(t,a){let f=X(null),C=q(f,a),[m,R]=ge([]),u=Ue(),l=A(d=>{R(n=>{let v=n.indexOf(d);if(v!==-1){let _=n.slice();return _.splice(v,1),_}return n})}),c=A(d=>(R(n=>[...n,d]),()=>l(d))),P=A(()=>{var v;let d=et(f);if(!d)return!1;let n=d.activeElement;return(v=f.current)!=null&&v.contains(n)?!0:m.some(_=>{var F,x;return((F=d.getElementById(_.buttonId.current))==null?void 0:F.contains(n))||((x=d.getElementById(_.panelId.current))==null?void 0:x.contains(n))})}),r=A(d=>{for(let n of m)n.buttonId.current!==d&&n.close()}),i=L(()=>({registerPopover:c,unregisterPopover:l,isFocusWithinPopoverGroup:P,closeOthers:r,mainTreeNodeRef:u.mainTreeNodeRef}),[c,l,P,r,u.mainTreeNodeRef]),B=L(()=>({}),[]),y=t,I={ref:C};return E.createElement(ye.Provider,{value:i},Z({ourProps:I,theirProps:y,slot:B,defaultTag:yt,name:"Popover.Group"}),E.createElement(u.MainTreeNode,null))}let bt=Y(it),gt=Y(ft),St=Y(Me),At=Y(Me),Rt=Y(mt),Ct=Y(Et),no=Object.assign(bt,{Button:gt,Backdrop:At,Overlay:St,Panel:Rt,Group:Ct});export{no as Popover,At as PopoverBackdrop,gt as PopoverButton,Ct as PopoverGroup,St as PopoverOverlay,Rt as PopoverPanel}; |
@@ -1,26 +0,36 @@ | ||
import React, { MutableRefObject, Ref } from 'react'; | ||
import { Props } from '../../types.js'; | ||
interface PortalRenderPropArg { | ||
import React, { type ElementType, type MutableRefObject, type Ref } from 'react'; | ||
import type { Props } from '../../types.js'; | ||
import { type HasDisplayName, type RefProp } from '../../utils/render.js'; | ||
declare let DEFAULT_PORTAL_TAG: React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>; | ||
type PortalRenderPropArg = {}; | ||
type PortalPropsWeControl = never; | ||
export type PortalProps<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> = Props<TTag, PortalRenderPropArg, PortalPropsWeControl, { | ||
enabled?: boolean; | ||
}>; | ||
declare function PortalFn<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG>(props: PortalProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element | null; | ||
declare let DEFAULT_GROUP_TAG: React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>; | ||
type GroupRenderPropArg = {}; | ||
type GroupPropsWeControl = never; | ||
export type PortalGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag, GroupRenderPropArg, GroupPropsWeControl, { | ||
target: MutableRefObject<HTMLElement | null>; | ||
}>; | ||
declare function GroupFn<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: PortalGroupProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
export declare function useNestedPortals(): readonly [React.MutableRefObject<HTMLElement[]>, ({ children }: { | ||
children: React.ReactNode; | ||
}) => React.JSX.Element]; | ||
export interface _internal_ComponentPortal extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG>(props: PortalProps<TTag> & RefProp<typeof PortalFn>): JSX.Element; | ||
} | ||
interface GroupRenderPropArg { | ||
export interface _internal_ComponentPortalGroup extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: PortalGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element; | ||
} | ||
export declare let Portal: (<TTag extends React.ElementType<any> = React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>>(props: Props<TTag, PortalRenderPropArg, "1D45E01E-AF44-47C4-988A-19A94EBAF55C">, ref: Ref<HTMLElement>) => React.ReactPortal | null) & { | ||
displayName: string; | ||
} & { | ||
Group: (<TTag_1 extends React.ElementType<any> = React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>>(props: Omit<import('../../types.js').PropsOf<TTag_1>, "as" | "children" | "refName" | "className"> & { | ||
as?: TTag_1 | undefined; | ||
children?: React.ReactNode | ((bag: GroupRenderPropArg) => React.ReactElement<any, string | React.JSXElementConstructor<any>>); | ||
refName?: string | undefined; | ||
} & (true extends (import('../../types.js').PropsOf<TTag_1> extends never ? never : "className" extends keyof import('../../types.js').PropsOf<TTag_1> ? true : never) ? { | ||
className?: import('../../types.js').PropsOf<TTag_1>["className"] | ((bag: GroupRenderPropArg) => string) | undefined; | ||
} : {}) & { | ||
target: MutableRefObject<HTMLElement | null>; | ||
}, ref: Ref<HTMLElement>) => JSX.Element) & { | ||
displayName: string; | ||
}; | ||
export declare let PortalGroup: _internal_ComponentPortalGroup; | ||
export declare let Portal: _internal_ComponentPortal & { | ||
/** @deprecated use `<PortalGroup>` instead of `<Portal.Group>` */ | ||
Group: _internal_ComponentPortalGroup; | ||
}; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import h,{Fragment as s,createContext as L,useContext as y,useEffect as m,useRef as d,useState as T}from"react";import{createPortal as G}from"react-dom";import{forwardRefWithAs as P,render as R}from'../../utils/render.js';import{useIsoMorphicEffect as M}from'../../hooks/use-iso-morphic-effect.js';import{usePortalRoot as v}from'../../internal/portal-force-root.js';import{useServerHandoffComplete as C}from'../../hooks/use-server-handoff-complete.js';import{optionalRef as O,useSyncRefs as g}from'../../hooks/use-sync-refs.js';import{useOwnerDocument as c}from'../../hooks/use-owner.js';import{microTask as H}from'../../utils/micro-task.js';import{isServer as E}from'../../utils/ssr.js';function x(i){let u=v(),o=y(A),e=c(i),[r,f]=T(()=>{if(!u&&o!==null||E)return null;let n=e==null?void 0:e.getElementById("headlessui-portal-root");if(n)return n;if(e===null)return null;let t=e.createElement("div");return t.setAttribute("id","headlessui-portal-root"),e.body.appendChild(t)});return m(()=>{r!==null&&(e!=null&&e.body.contains(r)||e==null||e.body.appendChild(r))},[r,e]),m(()=>{u||o!==null&&f(o.current)},[o,f,u]),r}let _=s,U=P(function(u,o){let e=u,r=d(null),f=g(O(a=>{r.current=a}),o),n=c(r),t=x(r),[l]=T(()=>{var a;return E?null:(a=n==null?void 0:n.createElement("div"))!=null?a:null}),b=C(),p=d(!1);return M(()=>{if(p.current=!1,!(!t||!l))return t.contains(l)||(l.setAttribute("data-headlessui-portal",""),t.appendChild(l)),()=>{p.current=!0,H(()=>{var a;!p.current||!t||!l||(t.removeChild(l),t.childNodes.length<=0&&((a=t.parentElement)==null||a.removeChild(t)))})}},[t,l]),b?!t||!l?null:G(R({ourProps:{ref:f},theirProps:e,defaultTag:_,name:"Portal"}),l):null}),j=s,A=L(null),F=P(function(u,o){let{target:e,...r}=u,n={ref:g(o)};return h.createElement(A.Provider,{value:e},R({ourProps:n,theirProps:r,defaultTag:j,name:"Popover.Group"}))}),$=Object.assign(U,{Group:F});export{$ as Portal}; | ||
"use client";import f,{Fragment as g,createContext as E,useContext as T,useEffect as R,useMemo as c,useRef as A,useState as G}from"react";import{createPortal as H}from"react-dom";import{useEvent as L}from'../../hooks/use-event.js';import{useIsoMorphicEffect as x}from'../../hooks/use-iso-morphic-effect.js';import{useOnUnmount as O}from'../../hooks/use-on-unmount.js';import{useOwnerDocument as _}from'../../hooks/use-owner.js';import{useServerHandoffComplete as h}from'../../hooks/use-server-handoff-complete.js';import{optionalRef as F,useSyncRefs as P}from'../../hooks/use-sync-refs.js';import{usePortalRoot as U}from'../../internal/portal-force-root.js';import{env as C}from'../../utils/env.js';import{forwardRefWithAs as m,render as d}from'../../utils/render.js';function D(p){let r=U(),l=T(v),e=_(p),[o,n]=G(()=>{var t;if(!r&&l!==null)return(t=l.current)!=null?t:null;if(C.isServer)return null;let u=e==null?void 0:e.getElementById("headlessui-portal-root");if(u)return u;if(e===null)return null;let a=e.createElement("div");return a.setAttribute("id","headlessui-portal-root"),e.body.appendChild(a)});return R(()=>{o!==null&&(e!=null&&e.body.contains(o)||e==null||e.body.appendChild(o))},[o,e]),R(()=>{r||l!==null&&n(l.current)},[l,n,r]),o}let M=g,N=m(function(r,l){let e=r,o=A(null),n=P(F(i=>{o.current=i}),l),u=_(o),a=D(o),[t]=G(()=>{var i;return C.isServer?null:(i=u==null?void 0:u.createElement("div"))!=null?i:null}),s=T(y),b=h();return x(()=>{!a||!t||a.contains(t)||(t.setAttribute("data-headlessui-portal",""),a.appendChild(t))},[a,t]),x(()=>{if(t&&s)return s.register(t)},[s,t]),O(()=>{var i;!a||!t||(t instanceof Node&&a.contains(t)&&a.removeChild(t),a.childNodes.length<=0&&((i=a.parentElement)==null||i.removeChild(a)))}),b?!a||!t?null:H(d({ourProps:{ref:n},theirProps:e,slot:{},defaultTag:M,name:"Portal"}),t):null});function S(p,r){let l=P(r),{enabled:e=!0,...o}=p;return e?f.createElement(N,{...o,ref:l}):d({ourProps:{ref:l},theirProps:o,slot:{},defaultTag:M,name:"Portal"})}let j=g,v=E(null);function W(p,r){let{target:l,...e}=p,n={ref:P(r)};return f.createElement(v.Provider,{value:l},d({ourProps:n,theirProps:e,defaultTag:j,name:"Popover.Group"}))}let y=E(null);function ee(){let p=T(y),r=A([]),l=L(n=>(r.current.push(n),p&&p.register(n),()=>e(n))),e=L(n=>{let u=r.current.indexOf(n);u!==-1&&r.current.splice(u,1),p&&p.unregister(n)}),o=c(()=>({register:l,unregister:e,portals:r}),[l,e,r]);return[r,c(()=>function({children:u}){return f.createElement(y.Provider,{value:o},u)},[o])]}let I=m(S),J=m(W),te=Object.assign(I,{Group:J});export{te as Portal,J as PortalGroup,ee as useNestedPortals}; |
@@ -1,44 +0,85 @@ | ||
import React, { Ref } from 'react'; | ||
import { Props } from '../../types.js'; | ||
interface RadioGroupRenderPropArg<TType> { | ||
import React, { type ElementType, type Ref } from 'react'; | ||
import { type ByComparator } from '../../hooks/use-by-comparator.js'; | ||
import type { Props } from '../../types.js'; | ||
import { type HasDisplayName, type RefProp } from '../../utils/render.js'; | ||
import { type _internal_ComponentDescription } from '../description/description.js'; | ||
import { type _internal_ComponentLabel } from '../label/label.js'; | ||
declare let DEFAULT_RADIO_GROUP_TAG: "div"; | ||
type RadioGroupRenderPropArg<TType> = { | ||
value: TType; | ||
} | ||
declare type RadioGroupPropsWeControl = 'role' | 'aria-labelledby' | 'aria-describedby'; | ||
interface OptionRenderPropArg { | ||
}; | ||
type RadioGroupPropsWeControl = 'role' | 'aria-labelledby' | 'aria-describedby'; | ||
export type RadioGroupProps<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG, TType = string> = Props<TTag, RadioGroupRenderPropArg<TType>, RadioGroupPropsWeControl, { | ||
value?: TType; | ||
defaultValue?: TType; | ||
onChange?(value: TType): void; | ||
by?: ByComparator<TType>; | ||
disabled?: boolean; | ||
form?: string; | ||
name?: string; | ||
}>; | ||
declare function RadioGroupFn<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG, TType = string>(props: RadioGroupProps<TTag, TType>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_OPTION_TAG: "div"; | ||
type OptionRenderPropArg = { | ||
checked: boolean; | ||
/** @deprecated use `focus` instead */ | ||
active: boolean; | ||
hover: boolean; | ||
focus: boolean; | ||
autofocus: boolean; | ||
disabled: boolean; | ||
}; | ||
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>): React.JSX.Element; | ||
declare let DEFAULT_RADIO_TAG: "span"; | ||
type RadioRenderPropArg = { | ||
checked: boolean; | ||
hover: boolean; | ||
focus: boolean; | ||
autofocus: boolean; | ||
disabled: boolean; | ||
}; | ||
type RadioPropsWeControl = 'aria-checked' | 'aria-describedby' | 'aria-labelledby' | 'role' | 'tabIndex'; | ||
export type RadioProps<TTag extends ElementType = typeof DEFAULT_RADIO_TAG, TType = string> = Props<TTag, RadioRenderPropArg, RadioPropsWeControl, { | ||
value: TType; | ||
disabled?: boolean; | ||
autoFocus?: boolean; | ||
}>; | ||
declare function RadioFn<TTag extends ElementType = typeof DEFAULT_RADIO_TAG, TType = Parameters<typeof RadioGroupRoot>[0]['value']>(props: RadioProps<TTag, TType>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
export interface _internal_ComponentRadioGroup extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG, TType = string>(props: RadioGroupProps<TTag, TType> & RefProp<typeof RadioGroupFn>): JSX.Element; | ||
} | ||
declare type RadioPropsWeControl = 'aria-checked' | 'onBlur' | 'onClick' | 'onFocus' | 'ref' | 'role' | 'tabIndex'; | ||
export declare let RadioGroup: (<TTag extends React.ElementType<any> = "div", TType = string>(props: Props<TTag, RadioGroupRenderPropArg<TType>, "value" | "name" | "disabled" | "defaultValue" | "onChange" | "by" | RadioGroupPropsWeControl> & { | ||
value?: TType | undefined; | ||
defaultValue?: TType | undefined; | ||
onChange?(value: TType): void; | ||
by?: (keyof TType & string) | ((a: TType, z: TType) => boolean) | undefined; | ||
disabled?: boolean | undefined; | ||
name?: string | undefined; | ||
}, ref: Ref<HTMLElement>) => JSX.Element) & { | ||
displayName: string; | ||
} & { | ||
Option: (<TTag_1 extends React.ElementType<any> = "div", TType_1 = unknown>(props: Props<TTag_1, OptionRenderPropArg, "value" | "disabled" | RadioPropsWeControl> & { | ||
value: TType_1; | ||
disabled?: boolean | undefined; | ||
}, ref: Ref<HTMLElement>) => JSX.Element) & { | ||
displayName: string; | ||
}; | ||
Label: (<TTag_2 extends React.ElementType<any> = "label">(props: Omit<import('../../types.js').PropsOf<TTag_2>, "as" | "children" | "refName" | "className"> & { | ||
as?: TTag_2 | undefined; | ||
children?: React.ReactNode | ((bag: {}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>); | ||
refName?: string | undefined; | ||
} & (true extends (import('../../types.js').PropsOf<TTag_2> extends never ? never : "className" extends keyof import('../../types.js').PropsOf<TTag_2> ? true : never) ? { | ||
className?: import('../../types.js').PropsOf<TTag_2>["className"] | ((bag: {}) => string) | undefined; | ||
} : {}) & { | ||
passive?: boolean | undefined; | ||
}, ref: React.Ref<HTMLLabelElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Description: (<TTag_3 extends React.ElementType<any> = "p">(props: Props<TTag_3, {}, "1D45E01E-AF44-47C4-988A-19A94EBAF55C">, ref: React.Ref<HTMLParagraphElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
export interface _internal_ComponentRadioOption extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string>(props: RadioOptionProps<TTag, TType> & RefProp<typeof OptionFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentRadio extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_RADIO_TAG, TType = string>(props: RadioProps<TTag, TType> & RefProp<typeof RadioFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentRadioLabel extends _internal_ComponentLabel { | ||
} | ||
export interface _internal_ComponentRadioDescription extends _internal_ComponentDescription { | ||
} | ||
declare let RadioGroupRoot: _internal_ComponentRadioGroup; | ||
/** @deprecated use `<Radio>` instead of `<RadioGroupOption>` */ | ||
export declare let RadioGroupOption: _internal_ComponentRadioOption; | ||
export declare let Radio: _internal_ComponentRadio; | ||
/** @deprecated use `<Label>` instead of `<RadioGroupLabel>` */ | ||
export declare let RadioGroupLabel: _internal_ComponentRadioLabel; | ||
/** @deprecated use `<Description>` instead of `<RadioGroupDescription>` */ | ||
export declare let RadioGroupDescription: _internal_ComponentRadioDescription; | ||
export declare let RadioGroup: _internal_ComponentRadioGroup & { | ||
/** @deprecated use `<Radio>` instead of `<RadioGroup.Option>` */ | ||
Option: _internal_ComponentRadioOption; | ||
/** @deprecated use `<Radio>` instead of `<RadioGroup.Radio>` */ | ||
Radio: _internal_ComponentRadio; | ||
/** @deprecated use `<Label>` instead of `<RadioGroup.Label>` */ | ||
Label: _internal_ComponentRadioLabel; | ||
/** @deprecated use `<Description>` instead of `<RadioGroup.Description>` */ | ||
Description: _internal_ComponentRadioDescription; | ||
}; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import g,{createContext as J,useContext as q,useMemo as A,useReducer as se,useRef as B,useEffect as ue}from"react";import{forwardRefWithAs as Q,render as X,compact as de}from'../../utils/render.js';import{useId as Y}from'../../hooks/use-id.js';import{match as ce}from'../../utils/match.js';import{useIsoMorphicEffect as fe}from'../../hooks/use-iso-morphic-effect.js';import{Keys as P}from'../../components/keyboard.js';import{focusIn as Z,Focus as H,FocusResult as z,sortByDomNode as Te}from'../../utils/focus-management.js';import{useFlags as me}from'../../hooks/use-flags.js';import{Label as be,useLabels as ee}from'../../components/label/label.js';import{Description as Re,useDescriptions as te}from'../../components/description/description.js';import{useTreeWalker as ye}from'../../hooks/use-tree-walker.js';import{useSyncRefs as re}from'../../hooks/use-sync-refs.js';import{Hidden as ge,Features as ve}from'../../internal/hidden.js';import{attemptSubmit as Oe,objectToFormEntries as Ee}from'../../utils/form.js';import{getOwnerDocument as Ae}from'../../utils/owner.js';import{useEvent as v}from'../../hooks/use-event.js';import{useControllable as Pe}from'../../hooks/use-controllable.js';import{isDisabledReactIssue7711 as oe}from'../../utils/bugs.js';import{useLatestValue as De}from'../../hooks/use-latest-value.js';import{useDisposables as Ge}from'../../hooks/use-disposables.js';var he=(t=>(t[t.RegisterOption=0]="RegisterOption",t[t.UnregisterOption=1]="UnregisterOption",t))(he||{});let ke={[0](n,r){let t=[...n.options,{id:r.id,element:r.element,propsRef:r.propsRef}];return{...n,options:Te(t,d=>d.element.current)}},[1](n,r){let t=n.options.slice(),d=n.options.findIndex(c=>c.id===r.id);return d===-1?n:(t.splice(d,1),{...n,options:t})}},$=J(null);$.displayName="RadioGroupDataContext";function ne(n){let r=q($);if(r===null){let t=new Error(`<${n} /> is missing a parent <RadioGroup /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(t,ne),t}return r}let V=J(null);V.displayName="RadioGroupActionsContext";function ie(n){let r=q(V);if(r===null){let t=new Error(`<${n} /> is missing a parent <RadioGroup /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(t,ie),t}return r}function Fe(n,r){return ce(r.type,ke,n,r)}let Le="div",Ce=Q(function(r,t){let d=Y(),{id:c=`headlessui-radiogroup-${d}`,value:D,defaultValue:O,name:I,onChange:E,by:G=(e,i)=>e===i,disabled:h=!1,...U}=r,T=v(typeof G=="string"?(e,i)=>{let o=G;return(e==null?void 0:e[o])===(i==null?void 0:i[o])}:G),[k,F]=se(Fe,{options:[]}),a=k.options,[M,N]=ee(),[m,L]=te(),C=B(null),W=re(C,t),[l,x]=Pe(D,E,O),s=A(()=>a.find(e=>!e.propsRef.current.disabled),[a]),b=A(()=>a.some(e=>T(e.propsRef.current.value,l)),[a,l]),u=v(e=>{var o;if(h||T(e,l))return!1;let i=(o=a.find(f=>T(f.propsRef.current.value,e)))==null?void 0:o.propsRef.current;return i!=null&&i.disabled?!1:(x==null||x(e),!0)});ye({container:C.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 K=v(e=>{let i=C.current;if(!i)return;let o=Ae(i),f=a.filter(p=>p.propsRef.current.disabled===!1).map(p=>p.element.current);switch(e.key){case P.Enter:Oe(e.currentTarget);break;case P.ArrowLeft:case P.ArrowUp:if(e.preventDefault(),e.stopPropagation(),Z(f,H.Previous|H.WrapAround)===z.Success){let y=a.find(j=>j.element.current===(o==null?void 0:o.activeElement));y&&u(y.propsRef.current.value)}break;case P.ArrowRight:case P.ArrowDown:if(e.preventDefault(),e.stopPropagation(),Z(f,H.Next|H.WrapAround)===z.Success){let y=a.find(j=>j.element.current===(o==null?void 0:o.activeElement));y&&u(y.propsRef.current.value)}break;case P.Space:{e.preventDefault(),e.stopPropagation();let p=a.find(y=>y.element.current===(o==null?void 0:o.activeElement));p&&u(p.propsRef.current.value)}break}}),w=v(e=>(F({type:0,...e}),()=>F({type:1,id:e.id}))),R=A(()=>({value:l,firstOption:s,containsCheckedOption:b,disabled:h,compare:T,...k}),[l,s,b,h,T,k]),S=A(()=>({registerOption:w,change:u}),[w,u]),ae={ref:W,id:c,role:"radiogroup","aria-labelledby":M,"aria-describedby":m,onKeyDown:K},le=A(()=>({value:l}),[l]),_=B(null),pe=Ge();return ue(()=>{!_.current||O!==void 0&&pe.addEventListener(_.current,"reset",()=>{u(O)})},[_,u]),g.createElement(L,{name:"RadioGroup.Description"},g.createElement(N,{name:"RadioGroup.Label"},g.createElement(V.Provider,{value:S},g.createElement($.Provider,{value:R},I!=null&&l!=null&&Ee({[I]:l}).map(([e,i],o)=>g.createElement(ge,{features:ve.Hidden,ref:o===0?f=>{var p;_.current=(p=f==null?void 0:f.closest("form"))!=null?p:null}:void 0,...de({key:e,as:"input",type:"radio",checked:i!=null,hidden:!0,readOnly:!0,name:e,value:i})})),X({ourProps:ae,theirProps:U,slot:le,defaultTag:Le,name:"RadioGroup"})))))});var xe=(t=>(t[t.Empty=1]="Empty",t[t.Active=2]="Active",t))(xe||{});let we="div",Ie=Q(function(r,t){var w;let d=Y(),{id:c=`headlessui-radiogroup-option-${d}`,value:D,disabled:O=!1,...I}=r,E=B(null),G=re(E,t),[h,U]=ee(),[T,k]=te(),{addFlag:F,removeFlag:a,hasFlag:M}=me(1),N=De({value:D,disabled:O}),m=ne("RadioGroup.Option"),L=ie("RadioGroup.Option");fe(()=>L.registerOption({id:c,element:E,propsRef:N}),[c,L,E,r]);let C=v(R=>{var S;if(oe(R.currentTarget))return R.preventDefault();!L.change(D)||(F(2),(S=E.current)==null||S.focus())}),W=v(R=>{if(oe(R.currentTarget))return R.preventDefault();F(2)}),l=v(()=>a(2)),x=((w=m.firstOption)==null?void 0:w.id)===c,s=m.disabled||O,b=m.compare(m.value,D),u={ref:G,id:c,role:"radio","aria-checked":b?"true":"false","aria-labelledby":h,"aria-describedby":T,"aria-disabled":s?!0:void 0,tabIndex:(()=>s?-1:b||!m.containsCheckedOption&&x?0:-1)(),onClick:s?void 0:C,onFocus:s?void 0:W,onBlur:s?void 0:l},K=A(()=>({checked:b,disabled:s,active:M(2)}),[b,s,M]);return g.createElement(k,{name:"RadioGroup.Description"},g.createElement(U,{name:"RadioGroup.Label"},X({ourProps:u,theirProps:I,slot:K,defaultTag:we,name:"RadioGroup.Option"})))}),ut=Object.assign(Ce,{Option:Ie,Label:be,Description:Re});export{ut 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}; |
@@ -1,36 +0,58 @@ | ||
import React, { ElementType, Ref } from 'react'; | ||
import { Props } from '../../types.js'; | ||
import React, { type ElementType, type Ref } from 'react'; | ||
import type { Props } from '../../types.js'; | ||
import { type HasDisplayName, type RefProp } from '../../utils/render.js'; | ||
import { type _internal_ComponentDescription } from '../description/description.js'; | ||
import { type _internal_ComponentLabel } from '../label/label.js'; | ||
declare let DEFAULT_GROUP_TAG: React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>; | ||
declare function Group<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: Props<TTag>): JSX.Element; | ||
interface SwitchRenderPropArg { | ||
export type SwitchGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag>; | ||
declare function GroupFn<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: SwitchGroupProps<TTag>): React.JSX.Element; | ||
declare let DEFAULT_SWITCH_TAG: "button"; | ||
type SwitchRenderPropArg = { | ||
checked: boolean; | ||
hover: boolean; | ||
focus: boolean; | ||
active: boolean; | ||
autofocus: boolean; | ||
changing: boolean; | ||
disabled: boolean; | ||
}; | ||
type SwitchPropsWeControl = 'aria-checked' | 'aria-describedby' | 'aria-labelledby' | 'role'; | ||
export type SwitchProps<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> = Props<TTag, SwitchRenderPropArg, SwitchPropsWeControl, { | ||
checked?: boolean; | ||
defaultChecked?: boolean; | ||
onChange?(checked: boolean): void; | ||
name?: string; | ||
value?: string; | ||
form?: string; | ||
autoFocus?: boolean; | ||
disabled?: boolean; | ||
tabIndex?: number; | ||
}>; | ||
declare function SwitchFn<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(props: SwitchProps<TTag>, ref: Ref<HTMLButtonElement>): React.JSX.Element; | ||
export interface _internal_ComponentSwitch extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(props: SwitchProps<TTag> & RefProp<typeof SwitchFn>): JSX.Element; | ||
} | ||
declare type SwitchPropsWeControl = 'role' | 'tabIndex' | 'aria-checked' | 'aria-labelledby' | 'aria-describedby' | 'onClick' | 'onKeyUp' | 'onKeyPress'; | ||
export declare let Switch: (<TTag extends React.ElementType<any> = "button">(props: Props<TTag, SwitchRenderPropArg, "value" | "name" | "onChange" | "checked" | "defaultChecked" | SwitchPropsWeControl> & { | ||
checked?: boolean | undefined; | ||
defaultChecked?: boolean | undefined; | ||
onChange?(checked: boolean): void; | ||
name?: string | undefined; | ||
value?: string | undefined; | ||
}, ref: Ref<HTMLElement>) => JSX.Element) & { | ||
displayName: string; | ||
} & { | ||
Group: typeof Group; | ||
Label: (<TTag_1 extends React.ElementType<any> = "label">(props: Omit<import('../../types.js').PropsOf<TTag_1>, "as" | "children" | "refName" | "className"> & { | ||
as?: TTag_1 | undefined; | ||
children?: React.ReactNode | ((bag: {}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>); | ||
refName?: string | undefined; | ||
} & (true extends (import('../../types.js').PropsOf<TTag_1> extends never ? never : "className" extends keyof import('../../types.js').PropsOf<TTag_1> ? true : never) ? { | ||
className?: import('../../types.js').PropsOf<TTag_1>["className"] | ((bag: {}) => string) | undefined; | ||
} : {}) & { | ||
passive?: boolean | undefined; | ||
}, ref: React.Ref<HTMLLabelElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Description: (<TTag_2 extends React.ElementType<any> = "p">(props: Props<TTag_2, {}, "1D45E01E-AF44-47C4-988A-19A94EBAF55C">, ref: React.Ref<HTMLParagraphElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
export interface _internal_ComponentSwitchGroup extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: SwitchGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentSwitchLabel extends _internal_ComponentLabel { | ||
} | ||
export interface _internal_ComponentSwitchDescription extends _internal_ComponentDescription { | ||
} | ||
/** @deprecated use `<Field>` instead of `<SwitchGroup>` */ | ||
export declare let SwitchGroup: _internal_ComponentSwitchGroup; | ||
/** @deprecated use `<Label>` instead of `<SwitchLabel>` */ | ||
export declare let SwitchLabel: _internal_ComponentSwitchLabel; | ||
/** @deprecated use `<Description>` instead of `<SwitchDescription>` */ | ||
export declare let SwitchDescription: _internal_ComponentSwitchDescription; | ||
export declare let Switch: _internal_ComponentSwitch & { | ||
/** @deprecated use `<Field>` instead of `<Switch.Group>` */ | ||
Group: _internal_ComponentSwitchGroup; | ||
/** @deprecated use `<Label>` instead of `<Switch.Label>` */ | ||
Label: _internal_ComponentSwitchLabel; | ||
/** @deprecated use `<Description>` instead of `<Switch.Description>` */ | ||
Description: _internal_ComponentSwitchDescription; | ||
}; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import l,{Fragment as H,createContext as G,useContext as K,useMemo as S,useRef as M,useState as x,useEffect as U}from"react";import{forwardRefWithAs as _,render as w,compact as F}from'../../utils/render.js';import{useId as I}from'../../hooks/use-id.js';import{Keys as P}from'../keyboard.js';import{isDisabledReactIssue7711 as B}from'../../utils/bugs.js';import{Label as O,useLabels as W}from'../label/label.js';import{Description as j,useDescriptions as N}from'../description/description.js';import{useResolveButtonType as $}from'../../hooks/use-resolve-button-type.js';import{useSyncRefs as q}from'../../hooks/use-sync-refs.js';import{Hidden as z,Features as J}from'../../internal/hidden.js';import{attemptSubmit as Q}from'../../utils/form.js';import{useEvent as f}from'../../hooks/use-event.js';import{useControllable as V}from'../../hooks/use-controllable.js';import{useDisposables as X}from'../../hooks/use-disposables.js';let b=G(null);b.displayName="GroupContext";let Y=H;function Z(y){let[t,a]=x(null),[s,m]=W(),[c,o]=N(),p=S(()=>({switch:t,setSwitch:a,labelledby:s,describedby:c}),[t,a,s,c]),d={},h=y;return l.createElement(o,{name:"Switch.Description"},l.createElement(m,{name:"Switch.Label",props:{onClick(){!t||(t.click(),t.focus({preventScroll:!0}))}}},l.createElement(b.Provider,{value:p},w({ourProps:d,theirProps:h,defaultTag:Y,name:"Switch.Group"}))))}let ee="button",te=_(function(t,a){let s=I(),{id:m=`headlessui-switch-${s}`,checked:c,defaultChecked:o=!1,onChange:p,name:d,value:h,...v}=t,r=K(b),u=M(null),k=q(u,a,r===null?null:r.setSwitch),[n,i]=V(c,p,o),T=f(()=>i==null?void 0:i(!n)),g=f(e=>{if(B(e.currentTarget))return e.preventDefault();e.preventDefault(),T()}),C=f(e=>{e.key===P.Space?(e.preventDefault(),T()):e.key===P.Enter&&Q(e.currentTarget)}),D=f(e=>e.preventDefault()),L=S(()=>({checked:n}),[n]),R={id:m,ref:k,role:"switch",type:$(t,u),tabIndex:0,"aria-checked":n,"aria-labelledby":r==null?void 0:r.labelledby,"aria-describedby":r==null?void 0:r.describedby,onClick:g,onKeyUp:C,onKeyPress:D},A=X();return U(()=>{var E;let e=(E=u.current)==null?void 0:E.closest("form");!e||o!==void 0&&A.addEventListener(e,"reset",()=>{i(o)})},[u,i]),l.createElement(l.Fragment,null,d!=null&&n&&l.createElement(z,{features:J.Hidden,...F({as:"input",type:"checkbox",hidden:!0,readOnly:!0,checked:n,name:d,value:h})}),w({ourProps:R,theirProps:v,slot:L,defaultTag:ee,name:"Switch"}))}),Pe=Object.assign(te,{Group:Z,Label:O,Description:j});export{Pe 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}; |
@@ -1,61 +0,86 @@ | ||
import React, { Ref } from 'react'; | ||
import { Props } from '../../types.js'; | ||
import { PropsForFeatures } from '../../utils/render.js'; | ||
interface TabsRenderPropArg { | ||
import React, { type ElementType, type Ref } from 'react'; | ||
import type { Props } from '../../types.js'; | ||
import { type HasDisplayName, type PropsForFeatures, type RefProp } from '../../utils/render.js'; | ||
declare let DEFAULT_TABS_TAG: "div"; | ||
type TabsRenderPropArg = { | ||
selectedIndex: number; | ||
} | ||
interface ListRenderPropArg { | ||
}; | ||
type TabsPropsWeControl = never; | ||
export type TabGroupProps<TTag extends ElementType = typeof DEFAULT_TABS_TAG> = Props<TTag, TabsRenderPropArg, TabsPropsWeControl, { | ||
defaultIndex?: number; | ||
onChange?: (index: number) => void; | ||
selectedIndex?: number; | ||
vertical?: boolean; | ||
manual?: boolean; | ||
}>; | ||
declare function GroupFn<TTag extends ElementType = typeof DEFAULT_TABS_TAG>(props: TabGroupProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_LIST_TAG: "div"; | ||
type ListRenderPropArg = { | ||
selectedIndex: number; | ||
} | ||
declare type ListPropsWeControl = 'role' | 'aria-orientation'; | ||
interface TabRenderPropArg { | ||
}; | ||
type ListPropsWeControl = 'aria-orientation' | 'role'; | ||
export type TabListProps<TTag extends ElementType = typeof DEFAULT_LIST_TAG> = Props<TTag, ListRenderPropArg, ListPropsWeControl, {}>; | ||
declare function ListFn<TTag extends ElementType = typeof DEFAULT_LIST_TAG>(props: TabListProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
declare let DEFAULT_TAB_TAG: "button"; | ||
type TabRenderPropArg = { | ||
hover: boolean; | ||
focus: boolean; | ||
active: boolean; | ||
autofocus: boolean; | ||
selected: boolean; | ||
} | ||
declare type TabPropsWeControl = 'role' | 'type' | 'aria-controls' | 'aria-selected' | 'tabIndex'; | ||
interface PanelsRenderPropArg { | ||
disabled: boolean; | ||
}; | ||
type TabPropsWeControl = 'aria-controls' | 'aria-selected' | 'role' | 'tabIndex'; | ||
export type TabProps<TTag extends ElementType = typeof DEFAULT_TAB_TAG> = Props<TTag, TabRenderPropArg, TabPropsWeControl, { | ||
autoFocus?: boolean; | ||
disabled?: boolean; | ||
}>; | ||
declare function TabFn<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(props: TabProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
declare let DEFAULT_PANELS_TAG: "div"; | ||
type PanelsRenderPropArg = { | ||
selectedIndex: number; | ||
} | ||
interface PanelRenderPropArg { | ||
}; | ||
export type TabPanelsProps<TTag extends ElementType = typeof DEFAULT_PANELS_TAG> = Props<TTag, PanelsRenderPropArg>; | ||
declare function PanelsFn<TTag extends ElementType = typeof DEFAULT_PANELS_TAG>(props: TabPanelsProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
declare let DEFAULT_PANEL_TAG: "div"; | ||
type PanelRenderPropArg = { | ||
selected: boolean; | ||
focus: boolean; | ||
}; | ||
type PanelPropsWeControl = 'role' | 'aria-labelledby'; | ||
declare let PanelRenderFeatures: number; | ||
export type TabPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, PanelPropsWeControl, PropsForFeatures<typeof PanelRenderFeatures> & { | ||
id?: string; | ||
tabIndex?: number; | ||
}>; | ||
declare function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: TabPanelProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element | null; | ||
export interface _internal_ComponentTab extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(props: TabProps<TTag> & RefProp<typeof TabFn>): JSX.Element; | ||
} | ||
declare type PanelPropsWeControl = 'role' | 'aria-labelledby' | 'tabIndex'; | ||
declare let PanelRenderFeatures: number; | ||
export declare let Tab: (<TTag extends React.ElementType<any> = "button">(props: Props<TTag, TabRenderPropArg, TabPropsWeControl>, ref: Ref<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
} & { | ||
Group: (<TTag_1 extends React.ElementType<any> = React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>>(props: Omit<import('../../types.js').PropsOf<TTag_1>, "as" | "children" | "refName" | "className"> & { | ||
as?: TTag_1 | undefined; | ||
children?: React.ReactNode | ((bag: TabsRenderPropArg) => React.ReactElement<any, string | React.JSXElementConstructor<any>>); | ||
refName?: string | undefined; | ||
} & (true extends (import('../../types.js').PropsOf<TTag_1> extends never ? never : "className" extends keyof import('../../types.js').PropsOf<TTag_1> ? true : never) ? { | ||
className?: import('../../types.js').PropsOf<TTag_1>["className"] | ((bag: TabsRenderPropArg) => string) | undefined; | ||
} : {}) & { | ||
defaultIndex?: number | undefined; | ||
onChange?: ((index: number) => void) | undefined; | ||
selectedIndex?: number | undefined; | ||
vertical?: boolean | undefined; | ||
manual?: boolean | undefined; | ||
}, ref: Ref<HTMLElement>) => JSX.Element) & { | ||
displayName: string; | ||
}; | ||
List: (<TTag_2 extends React.ElementType<any> = "div">(props: Props<TTag_2, ListRenderPropArg, ListPropsWeControl> & {}, ref: Ref<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Panels: (<TTag_3 extends React.ElementType<any> = "div">(props: Props<TTag_3, PanelsRenderPropArg, "1D45E01E-AF44-47C4-988A-19A94EBAF55C">, ref: Ref<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Panel: (<TTag_4 extends React.ElementType<any> = "div">(props: Props<TTag_4, PanelRenderPropArg, PanelPropsWeControl> & (({ | ||
static?: undefined; | ||
} & { | ||
unmount?: boolean | undefined; | ||
}) | ({ | ||
unmount?: undefined; | ||
} & { | ||
static?: boolean | undefined; | ||
})), ref: Ref<HTMLElement>) => JSX.Element | null) & { | ||
displayName: string; | ||
}; | ||
export interface _internal_ComponentTabGroup extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_TABS_TAG>(props: TabGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentTabList extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_LIST_TAG>(props: TabListProps<TTag> & RefProp<typeof ListFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentTabPanels extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_PANELS_TAG>(props: TabPanelsProps<TTag> & RefProp<typeof PanelsFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentTabPanel extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: TabPanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element; | ||
} | ||
export declare let TabGroup: _internal_ComponentTabGroup; | ||
export declare let TabList: _internal_ComponentTabList; | ||
export declare let TabPanels: _internal_ComponentTabPanels; | ||
export declare let TabPanel: _internal_ComponentTabPanel; | ||
export declare let Tab: _internal_ComponentTab & { | ||
/** @deprecated use `<TabGroup>` instead of `<Tab.Group>` */ | ||
Group: _internal_ComponentTabGroup; | ||
/** @deprecated use `<TabList>` instead of `<Tab.List>` */ | ||
List: _internal_ComponentTabList; | ||
/** @deprecated use `<TabPanels>` instead of `<Tab.Panels>` */ | ||
Panels: _internal_ComponentTabPanels; | ||
/** @deprecated use `<TabPanel>` instead of `<Tab.Panel>` */ | ||
Panel: _internal_ComponentTabPanel; | ||
}; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import F,{Fragment as le,createContext as K,useContext as $,useMemo as h,useReducer as oe,useRef as H}from"react";import{render as _,Features as ee,forwardRefWithAs as U}from'../../utils/render.js';import{useId as te}from'../../hooks/use-id.js';import{match as re}from'../../utils/match.js';import{Keys as T}from'../../components/keyboard.js';import{focusIn as D,Focus as m,sortByDomNode as ne,FocusResult as O}from'../../utils/focus-management.js';import{useIsoMorphicEffect as z}from'../../hooks/use-iso-morphic-effect.js';import{useSyncRefs as w}from'../../hooks/use-sync-refs.js';import{useResolveButtonType as se}from'../../hooks/use-resolve-button-type.js';import{useLatestValue as V}from'../../hooks/use-latest-value.js';import{FocusSentinel as ie}from'../../internal/focus-sentinel.js';import{useEvent as S}from'../../hooks/use-event.js';import{microTask as ue}from'../../utils/micro-task.js';import{Hidden as ce}from'../../internal/hidden.js';import{getOwnerDocument as de}from'../../utils/owner.js';var pe=(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))(pe||{});let fe={[0](e,t){let r=e.tabs.filter(c=>{var s;return!((s=c.current)!=null&&s.hasAttribute("disabled"))});if(t.index<0)return{...e,selectedIndex:e.tabs.indexOf(r[0])};if(t.index>e.tabs.length)return{...e,selectedIndex:e.tabs.indexOf(r[r.length-1])};let i=e.tabs.slice(0,t.index),n=[...e.tabs.slice(t.index),...i].find(c=>r.includes(c));return n?{...e,selectedIndex:e.tabs.indexOf(n)}:e},[1](e,t){var n;if(e.tabs.includes(t.tab))return e;let r=e.tabs[e.selectedIndex],i=ne([...e.tabs,t.tab],c=>c.current),o=(n=i.indexOf(r))!=null?n:e.selectedIndex;return o===-1&&(o=e.selectedIndex),{...e,tabs:i,selectedIndex:o}},[2](e,t){return{...e,tabs:e.tabs.filter(r=>r!==t.tab)}},[3](e,t){return e.panels.includes(t.panel)?e:{...e,panels:ne([...e.panels,t.panel],r=>r.current)}},[4](e,t){return{...e,panels:e.panels.filter(r=>r!==t.panel)}}},q=K(null);q.displayName="TabsSSRContext";function J(e){let t=$(q);if(t===null){let r=new Error(`<${e} /> is missing a parent <Tab.Group /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,J),r}return t}let Q=K(null);Q.displayName="TabsDataContext";function M(e){let t=$(Q);if(t===null){let r=new Error(`<${e} /> is missing a parent <Tab.Group /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,M),r}return t}let X=K(null);X.displayName="TabsActionsContext";function Y(e){let t=$(X);if(t===null){let r=new Error(`<${e} /> is missing a parent <Tab.Group /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,Y),r}return t}function be(e,t){return re(t.type,fe,e,t)}let Te=le,me=U(function(t,r){let{defaultIndex:i=0,vertical:o=!1,manual:n=!1,onChange:c,selectedIndex:s=null,...L}=t;const g=o?"vertical":"horizontal",A=n?"manual":"auto";let d=s!==null,v=w(r),[p,l]=oe(be,{selectedIndex:s!=null?s:i,tabs:[],panels:[]}),P=h(()=>({selectedIndex:p.selectedIndex}),[p.selectedIndex]),E=V(c||(()=>{})),f=V(p.tabs),b=h(()=>({orientation:g,activation:A,...p}),[g,A,p]),y=S(u=>(l({type:1,tab:u}),()=>l({type:2,tab:u}))),I=S(u=>(l({type:3,panel:u}),()=>l({type:4,panel:u}))),R=S(u=>{k.current!==u&&E.current(u),d||l({type:0,index:u})}),k=V(d?t.selectedIndex:p.selectedIndex),G=h(()=>({registerTab:y,registerPanel:I,change:R}),[]);z(()=>{l({type:0,index:s!=null?s:i})},[s]);let j=H({tabs:[],panels:[]}),W={ref:v};return F.createElement(q.Provider,{value:j},F.createElement(X.Provider,{value:G},F.createElement(Q.Provider,{value:b},b.tabs.length<=0&&F.createElement(ie,{onFocus:()=>{var u,C;for(let a of f.current)if(((u=a.current)==null?void 0:u.tabIndex)===0)return(C=a.current)==null||C.focus(),!0;return!1}}),_({ourProps:W,theirProps:L,slot:P,defaultTag:Te,name:"Tabs"}))))}),Pe="div",xe=U(function(t,r){let{orientation:i,selectedIndex:o}=M("Tab.List"),n=w(r);return _({ourProps:{ref:n,role:"tablist","aria-orientation":i},theirProps:t,slot:{selectedIndex:o},defaultTag:Pe,name:"Tabs.List"})}),ge="button",ye=U(function(t,r){var u,C;let i=te(),{id:o=`headlessui-tabs-tab-${i}`,...n}=t,{orientation:c,activation:s,selectedIndex:L,tabs:g,panels:A}=M("Tab"),d=Y("Tab"),v=M("Tab"),p=J("Tab"),l=H(null),P=w(l,r);z(()=>d.registerTab(l),[d,l]);let E=p.current.tabs.indexOf(o);E===-1&&(E=p.current.tabs.push(o)-1);let f=g.indexOf(l);f===-1&&(f=E);let b=f===L,y=S(a=>{var N;let x=a();if(x===O.Success&&s==="auto"){let B=(N=de(l))==null?void 0:N.activeElement,Z=v.tabs.findIndex(ae=>ae.current===B);Z!==-1&&d.change(Z)}return x}),I=S(a=>{let x=g.map(B=>B.current).filter(Boolean);if(a.key===T.Space||a.key===T.Enter){a.preventDefault(),a.stopPropagation(),d.change(f);return}switch(a.key){case T.Home:case T.PageUp:return a.preventDefault(),a.stopPropagation(),y(()=>D(x,m.First));case T.End:case T.PageDown:return a.preventDefault(),a.stopPropagation(),y(()=>D(x,m.Last))}if(y(()=>re(c,{vertical(){return a.key===T.ArrowUp?D(x,m.Previous|m.WrapAround):a.key===T.ArrowDown?D(x,m.Next|m.WrapAround):O.Error},horizontal(){return a.key===T.ArrowLeft?D(x,m.Previous|m.WrapAround):a.key===T.ArrowRight?D(x,m.Next|m.WrapAround):O.Error}}))===O.Success)return a.preventDefault()}),R=H(!1),k=S(()=>{var a;R.current||(R.current=!0,(a=l.current)==null||a.focus(),d.change(f),ue(()=>{R.current=!1}))}),G=S(a=>{a.preventDefault()}),j=h(()=>({selected:b}),[b]),W={ref:P,onKeyDown:I,onMouseDown:G,onClick:k,id:o,role:"tab",type:se(t,l),"aria-controls":(C=(u=A[f])==null?void 0:u.current)==null?void 0:C.id,"aria-selected":b,tabIndex:b?0:-1};return _({ourProps:W,theirProps:n,slot:j,defaultTag:ge,name:"Tabs.Tab"})}),Re="div",Ae=U(function(t,r){let{selectedIndex:i}=M("Tab.Panels"),o=w(r),n=h(()=>({selectedIndex:i}),[i]);return _({ourProps:{ref:o},theirProps:t,slot:n,defaultTag:Re,name:"Tabs.Panels"})}),Ee="div",Se=ee.RenderStrategy|ee.Static,Le=U(function(t,r){var b,y,I,R;let i=te(),{id:o=`headlessui-tabs-panel-${i}`,...n}=t,{selectedIndex:c,tabs:s,panels:L}=M("Tab.Panel"),g=Y("Tab.Panel"),A=J("Tab.Panel"),d=H(null),v=w(d,r);z(()=>g.registerPanel(d),[g,d]);let p=A.current.panels.indexOf(o);p===-1&&(p=A.current.panels.push(o)-1);let l=L.indexOf(d);l===-1&&(l=p);let P=l===c,E=h(()=>({selected:P}),[P]),f={ref:v,id:o,role:"tabpanel","aria-labelledby":(y=(b=s[l])==null?void 0:b.current)==null?void 0:y.id,tabIndex:P?0:-1};return!P&&((I=n.unmount)!=null?I:!0)&&!((R=n.static)!=null&&R)?F.createElement(ce,{as:"span",...f}):_({ourProps:f,theirProps:n,slot:E,defaultTag:Ee,features:Se,visible:P,name:"Tabs.Panel"})}),Je=Object.assign(ye,{Group:me,List:xe,Panels:Ae,Panel:Le});export{Je 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}; |
@@ -1,40 +0,1 @@ | ||
import React, { MutableRefObject, Ref } from 'react'; | ||
import { Props, ReactTag } from '../../types.js'; | ||
import { Features, PropsForFeatures } 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; | ||
} | ||
declare type TransitionChildProps<TTag extends ReactTag> = Props<TTag, TransitionChildRenderPropArg> & PropsForFeatures<typeof TransitionChildRenderFeatures> & TransitionClasses & TransitionEvents & { | ||
appear?: boolean; | ||
}; | ||
declare type TransitionChildRenderPropArg = MutableRefObject<HTMLDivElement>; | ||
declare let TransitionChildRenderFeatures: Features; | ||
export declare let Transition: (<TTag extends React.ElementType<any> = "div">(props: TransitionChildProps<TTag> & { | ||
show?: boolean | undefined; | ||
appear?: boolean | undefined; | ||
}, ref: Ref<HTMLElement>) => JSX.Element) & { | ||
displayName: string; | ||
} & { | ||
Child: (<TTag_1 extends React.ElementType<any> = "div">(props: TransitionChildProps<TTag_1>, ref: MutableRefObject<HTMLElement>) => JSX.Element) & { | ||
displayName: string; | ||
}; | ||
Root: (<TTag extends React.ElementType<any> = "div">(props: TransitionChildProps<TTag> & { | ||
show?: boolean | undefined; | ||
appear?: boolean | undefined; | ||
}, ref: Ref<HTMLElement>) => JSX.Element) & { | ||
displayName: string; | ||
}; | ||
}; | ||
export {}; | ||
export * from '../transition/transition.js'; |
@@ -1,1 +0,1 @@ | ||
import T,{Fragment as Q,createContext as X,useContext as W,useEffect as y,useMemo as Y,useRef as c,useState as q}from"react";import{Features as fe,forwardRefWithAs as z,render as Z,RenderStrategy as g}from'../../utils/render.js';import{OpenClosedProvider as Te,State as O,useOpenClosed as $}from'../../internal/open-closed.js';import{match as H}from'../../utils/match.js';import{useIsMounted as ce}from'../../hooks/use-is-mounted.js';import{useIsoMorphicEffect as me}from'../../hooks/use-iso-morphic-effect.js';import{useLatestValue as F}from'../../hooks/use-latest-value.js';import{useServerHandoffComplete as ee}from'../../hooks/use-server-handoff-complete.js';import{useSyncRefs as te}from'../../hooks/use-sync-refs.js';import{useTransition as pe}from'../../hooks/use-transition.js';import{useEvent as N}from'../../hooks/use-event.js';import{useDisposables as ve}from'../../hooks/use-disposables.js';import{classNames as he}from'../../utils/class-names.js';function P(i=""){return i.split(" ").filter(e=>e.trim().length>1)}let A=X(null);A.displayName="TransitionContext";var Ce=(s=>(s.Visible="visible",s.Hidden="hidden",s))(Ce||{});function ge(){let i=W(A);if(i===null)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");return i}function be(){let i=W(M);if(i===null)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");return i}let M=X(null);M.displayName="NestingContext";function I(i){return"children"in i?I(i.children):i.current.filter(({el:e})=>e.current!==null).filter(({state:e})=>e==="visible").length>0}function ne(i,e){let s=F(i),n=c([]),m=ce(),R=ve(),b=N((l,r=g.Hidden)=>{let t=n.current.findIndex(({el:o})=>o===l);t!==-1&&(H(r,{[g.Unmount](){n.current.splice(t,1)},[g.Hidden](){n.current[t].state="hidden"}}),R.microTask(()=>{var o;!I(n)&&m.current&&((o=s.current)==null||o.call(s))}))}),E=N(l=>{let r=n.current.find(({el:t})=>t===l);return r?r.state!=="visible"&&(r.state="visible"):n.current.push({el:l,state:"visible"}),()=>b(l,g.Unmount)}),S=c([]),u=c(Promise.resolve()),p=c({enter:[],leave:[],idle:[]}),d=N((l,r,t)=>{S.current.splice(0),e&&(e.chains.current[r]=e.chains.current[r].filter(([o])=>o!==l)),e==null||e.chains.current[r].push([l,new Promise(o=>{S.current.push(o)})]),e==null||e.chains.current[r].push([l,new Promise(o=>{Promise.all(p.current[r].map(([f,a])=>a)).then(()=>o())})]),r==="enter"?u.current=u.current.then(()=>e==null?void 0:e.wait.current).then(()=>t(r)):t(r)}),v=N((l,r,t)=>{Promise.all(p.current[r].splice(0).map(([o,f])=>f)).then(()=>{var o;(o=S.current.shift())==null||o()}).then(()=>t(r))});return Y(()=>({children:n,register:E,unregister:b,onStart:d,onStop:v,wait:u,chains:p}),[E,b,n,d,v,p,u])}function Ee(){}let Se=["beforeEnter","afterEnter","beforeLeave","afterLeave"];function re(i){var s;let e={};for(let n of Se)e[n]=(s=i[n])!=null?s:Ee;return e}function xe(i){let e=c(re(i));return y(()=>{e.current=re(i)},[i]),e}let Pe="div",ie=fe.RenderStrategy,oe=z(function(e,s){let{beforeEnter:n,afterEnter:m,beforeLeave:R,afterLeave:b,enter:E,enterFrom:S,enterTo:u,entered:p,leave:d,leaveFrom:v,leaveTo:l,...r}=e,t=c(null),o=te(t,s),f=r.unmount?g.Unmount:g.Hidden,{show:a,appear:x,initial:se}=ge(),[h,_]=q(a?"visible":"hidden"),K=be(),{register:D,unregister:V}=K,j=c(null);y(()=>D(t),[D,t]),y(()=>{if(f===g.Hidden&&!!t.current){if(a&&h!=="visible"){_("visible");return}return H(h,{["hidden"]:()=>V(t),["visible"]:()=>D(t)})}},[h,t,D,V,a,f]);let U=F({enter:P(E),enterFrom:P(S),enterTo:P(u),entered:P(p),leave:P(d),leaveFrom:P(v),leaveTo:P(l)}),w=xe({beforeEnter:n,afterEnter:m,beforeLeave:R,afterLeave:b}),k=ee();y(()=>{if(k&&h==="visible"&&t.current===null)throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")},[t,h,k]);let G=se&&!x,le=(()=>!k||G||j.current===a?"idle":a?"enter":"leave")(),ae=N(C=>H(C,{enter:()=>w.current.beforeEnter(),leave:()=>w.current.beforeLeave(),idle:()=>{}})),ue=N(C=>H(C,{enter:()=>w.current.afterEnter(),leave:()=>w.current.afterLeave(),idle:()=>{}})),L=ne(()=>{_("hidden"),V(t)},K);pe({container:t,classes:U,direction:le,onStart:F(C=>{L.onStart(t,C,ae)}),onStop:F(C=>{L.onStop(t,C,ue),C==="leave"&&!I(L)&&(_("hidden"),V(t))})}),y(()=>{!G||(f===g.Hidden?j.current=null:j.current=a)},[a,G,h]);let B=r,de={ref:o};return x&&a&&(typeof window=="undefined"||typeof document=="undefined")&&(B={...B,className:he(r.className,...U.current.enter,...U.current.enterFrom)}),T.createElement(M.Provider,{value:L},T.createElement(Te,{value:H(h,{["visible"]:O.Open,["hidden"]:O.Closed})},Z({ourProps:de,theirProps:B,defaultTag:Pe,features:ie,visible:h==="visible",name:"Transition.Child"})))}),J=z(function(e,s){let{show:n,appear:m=!1,unmount:R,...b}=e,E=c(null),S=te(E,s);ee();let u=$();if(n===void 0&&u!==null&&(n=H(u,{[O.Open]:!0,[O.Closed]:!1})),![!0,!1].includes(n))throw new Error("A <Transition /> is used but it is missing a `show={true | false}` prop.");let[p,d]=q(n?"visible":"hidden"),v=ne(()=>{d("hidden")}),[l,r]=q(!0),t=c([n]);me(()=>{l!==!1&&t.current[t.current.length-1]!==n&&(t.current.push(n),r(!1))},[t,n]);let o=Y(()=>({show:n,appear:m,initial:l}),[n,m,l]);y(()=>{if(n)d("visible");else if(!I(v))d("hidden");else{let a=E.current;if(!a)return;let x=a.getBoundingClientRect();x.x===0&&x.y===0&&x.width===0&&x.height===0&&d("hidden")}},[n,v]);let f={unmount:R};return T.createElement(M.Provider,{value:v},T.createElement(A.Provider,{value:o},Z({ourProps:{...f,as:Q,children:T.createElement(oe,{ref:S,...f,...b})},theirProps:{},defaultTag:Q,features:ie,visible:p==="visible",name:"Transition"})))}),ye=z(function(e,s){let n=W(A)!==null,m=$()!==null;return T.createElement(T.Fragment,null,!n&&m?T.createElement(J,{ref:s,...e}):T.createElement(oe,{ref:s,...e}))}),Je=Object.assign(J,{Child:ye,Root:J});export{Je as Transition}; | ||
export*from'../transition/transition.js'; |
@@ -1,1 +0,1 @@ | ||
import"client-only";export*from'./components/combobox/combobox.js';export*from'./components/dialog/dialog.js';export*from'./components/disclosure/disclosure.js';export*from'./components/focus-trap/focus-trap.js';export*from'./components/listbox/listbox.js';export*from'./components/menu/menu.js';export*from'./components/popover/popover.js';export*from'./components/portal/portal.js';export*from'./components/radio-group/radio-group.js';export*from'./components/switch/switch.js';export*from'./components/tabs/tabs.js';export*from'./components/transitions/transition.js'; | ||
export*from'./components/button/button.js';export*from'./components/checkbox/checkbox.js';export*from'./components/close-button/close-button.js';export*from'./components/combobox/combobox.js';export*from'./components/data-interactive/data-interactive.js';import{Description as x}from'./components/description/description.js';export*from'./components/dialog/dialog.js';export*from'./components/disclosure/disclosure.js';export*from'./components/field/field.js';export*from'./components/fieldset/fieldset.js';export*from'./components/focus-trap/focus-trap.js';export*from'./components/input/input.js';import{Label as n}from'./components/label/label.js';export*from'./components/legend/legend.js';export*from'./components/listbox/listbox.js';export*from'./components/menu/menu.js';export*from'./components/popover/popover.js';import{Portal as d}from'./components/portal/portal.js';export*from'./components/radio-group/radio-group.js';export*from'./components/select/select.js';export*from'./components/switch/switch.js';export*from'./components/tabs/tabs.js';export*from'./components/textarea/textarea.js';import{useClose as w}from'./internal/close-provider.js';export*from'./components/transition/transition.js';export{x as Description,n as Label,d as Portal,w as useClose}; |
@@ -0,4 +1,7 @@ | ||
/** | ||
* The `useDisposables` hook returns a `disposables` object that is disposed | ||
* when the component is unmounted. | ||
*/ | ||
export declare function useDisposables(): { | ||
enqueue(fn: Function): void; | ||
addEventListener<TEventName extends keyof WindowEventMap>(element: HTMLElement | Window | Document, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions | undefined): () => void; | ||
addEventListener<TEventName extends keyof WindowEventMap>(element: Window | Document | HTMLElement, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions | undefined): () => void; | ||
requestAnimationFrame(callback: FrameRequestCallback): () => void; | ||
@@ -8,5 +11,16 @@ nextFrame(callback: FrameRequestCallback): () => void; | ||
microTask(cb: () => void): () => void; | ||
style(node: HTMLElement, property: string, value: string): () => void; | ||
group(cb: (d: { | ||
addEventListener<TEventName extends keyof WindowEventMap>(element: Window | Document | HTMLElement, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions | undefined): () => void; | ||
requestAnimationFrame(callback: FrameRequestCallback): () => void; | ||
nextFrame(callback: FrameRequestCallback): () => void; | ||
setTimeout(callback: (...args: any[]) => void, ms?: number | undefined, ...args: any[]): () => void; | ||
microTask(cb: () => void): () => void; | ||
style(node: HTMLElement, property: string, value: string): () => void; | ||
group(cb: any): () => void; | ||
add(cb: () => void): () => void; | ||
dispose(): void; | ||
}) => void): () => void; | ||
add(cb: () => void): () => void; | ||
dispose(): void; | ||
workQueue(): Promise<void>; | ||
}; |
@@ -1,1 +0,1 @@ | ||
import{useState as s,useEffect as o}from"react";import{disposables as t}from'../utils/disposables.js';function p(){let[e]=s(t);return o(()=>()=>e.dispose(),[e]),e}export{p as useDisposables}; | ||
import{useEffect as s,useState as o}from"react";import{disposables as t}from'../utils/disposables.js';function p(){let[e]=o(t);return s(()=>()=>e.dispose(),[e]),e}export{p as useDisposables}; |
@@ -1,1 +0,1 @@ | ||
export declare function useDocumentEvent<TType extends keyof DocumentEventMap>(type: TType, listener: (ev: DocumentEventMap[TType]) => any, options?: boolean | AddEventListenerOptions): void; | ||
export declare function useDocumentEvent<TType extends keyof DocumentEventMap>(enabled: boolean, type: TType, listener: (ev: DocumentEventMap[TType]) => any, options?: boolean | AddEventListenerOptions): void; |
@@ -1,1 +0,1 @@ | ||
import{useEffect as m}from"react";import{useLatestValue as c}from'./use-latest-value.js';function d(e,r,n){let o=c(r);m(()=>{function t(u){o.current(u)}return document.addEventListener(e,t,n),()=>document.removeEventListener(e,t,n)},[e,n])}export{d as useDocumentEvent}; | ||
import{useEffect as c}from"react";import{useLatestValue as a}from'./use-latest-value.js';function i(t,e,o,n){let u=a(o);c(()=>{if(!t)return;function r(m){u.current(m)}return document.addEventListener(e,r,n),()=>document.removeEventListener(e,r,n)},[t,e,n])}export{i as useDocumentEvent}; |
export declare function useFlags(initialFlags?: number): { | ||
flags: number; | ||
setFlag: (flag: number) => void; | ||
addFlag: (flag: number) => void; | ||
@@ -3,0 +5,0 @@ hasFlag: (flag: number) => boolean; |
@@ -1,1 +0,1 @@ | ||
import{useState as m,useCallback as t}from"react";function b(g=0){let[r,l]=m(g),u=t(e=>l(a=>a|e),[r]),n=t(e=>Boolean(r&e),[r]),o=t(e=>l(a=>a&~e),[l]),s=t(e=>l(a=>a^e),[l]);return{addFlag:u,hasFlag:n,removeFlag:o,toggleFlag:s}}export{b as useFlags}; | ||
import{useCallback as r,useState as b}from"react";function c(u=0){let[t,l]=b(u),g=r(e=>l(e),[t]),s=r(e=>l(a=>a|e),[t]),m=r(e=>(t&e)===e,[t]),n=r(e=>l(a=>a&~e),[l]),F=r(e=>l(a=>a^e),[l]);return{flags:t,setFlag:g,addFlag:s,hasFlag:m,removeFlag:n,toggleFlag:F}}export{c as useFlags}; |
@@ -1,1 +0,1 @@ | ||
export declare let useId: any; | ||
export { useId } from 'react'; |
@@ -1,1 +0,1 @@ | ||
var u;import t from"react";import{useIsoMorphicEffect as d}from'./use-iso-morphic-effect.js';import{useServerHandoffComplete as f}from'./use-server-handoff-complete.js';let l=0;function r(){return++l}let I=(u=t.useId)!=null?u:function(){let n=f(),[e,o]=t.useState(n?r:null);return d(()=>{e===null&&o(r())},[e]),e!=null?""+e:void 0};export{I as useId}; | ||
import{useId as r}from"react";export{r as useId}; |
@@ -1,2 +0,29 @@ | ||
import { MutableRefObject } from 'react'; | ||
export declare function useInertOthers<TElement extends HTMLElement>(container: MutableRefObject<TElement | null>, enabled?: boolean): void; | ||
/** | ||
* Mark all elements on the page as inert, except for the ones that are allowed. | ||
* | ||
* We move up the tree from the allowed elements, and mark all their siblings as | ||
* inert. If any of the children happens to be a parent of one of the elements, | ||
* then that child will not be marked as inert. | ||
* | ||
* E.g.: | ||
* | ||
* ```html | ||
* <body> <!-- Stop at body --> | ||
* <header></header> <!-- Inert, sibling of parent --> | ||
* <main> <!-- Not inert, parent of allowed element --> | ||
* <div>Sidebar</div> <!-- Inert, sibling of parent --> | ||
* <div> <!-- Not inert, parent of allowed element --> | ||
* <listbox> <!-- Not inert, parent of allowed element --> | ||
* <button></button> <!-- Not inert, allowed element --> | ||
* <options></options> <!-- Not inert, allowed element --> | ||
* </listbox> | ||
* </div> | ||
* </main> | ||
* <footer></footer> <!-- Inert, sibling of parent --> | ||
* </body> | ||
* ``` | ||
*/ | ||
export declare function useInertOthers(enabled: boolean, { allowed, disallowed, }?: { | ||
allowed?: () => (HTMLElement | null)[]; | ||
disallowed?: () => (HTMLElement | null)[]; | ||
}): void; |
@@ -1,1 +0,1 @@ | ||
import{getOwnerDocument as s}from'../utils/owner.js';import{useIsoMorphicEffect as d}from'./use-iso-morphic-effect.js';let i=new Set,r=new Map;function u(t){t.setAttribute("aria-hidden","true"),t.inert=!0}function l(t){let n=r.get(t);!n||(n["aria-hidden"]===null?t.removeAttribute("aria-hidden"):t.setAttribute("aria-hidden",n["aria-hidden"]),t.inert=n.inert)}function M(t,n=!0){d(()=>{if(!n||!t.current)return;let o=t.current,a=s(o);if(!!a){i.add(o);for(let e of r.keys())e.contains(o)&&(l(e),r.delete(e));return a.querySelectorAll("body > *").forEach(e=>{if(e instanceof HTMLElement){for(let f of i)if(e.contains(f))return;i.size===1&&(r.set(e,{"aria-hidden":e.getAttribute("aria-hidden"),inert:e.inert}),u(e))}}),()=>{if(i.delete(o),i.size>0)a.querySelectorAll("body > *").forEach(e=>{if(e instanceof HTMLElement&&!r.has(e)){for(let f of i)if(e.contains(f))return;r.set(e,{"aria-hidden":e.getAttribute("aria-hidden"),inert:e.inert}),u(e)}});else for(let e of r.keys())l(e),r.delete(e)}}},[n])}export{M as useInertOthers}; | ||
import{disposables as M}from'../utils/disposables.js';import{getOwnerDocument as b}from'../utils/owner.js';import{useIsTopLayer as L}from'./use-is-top-layer.js';import{useIsoMorphicEffect as T}from'./use-iso-morphic-effect.js';let f=new Map,u=new Map;function h(t){var e;let r=(e=u.get(t))!=null?e:0;return u.set(t,r+1),r!==0?()=>m(t):(f.set(t,{"aria-hidden":t.getAttribute("aria-hidden"),inert:t.inert}),t.setAttribute("aria-hidden","true"),t.inert=!0,()=>m(t))}function m(t){var i;let r=(i=u.get(t))!=null?i:1;if(r===1?u.delete(t):u.set(t,r-1),r!==1)return;let e=f.get(t);e&&(e["aria-hidden"]===null?t.removeAttribute("aria-hidden"):t.setAttribute("aria-hidden",e["aria-hidden"]),t.inert=e.inert,f.delete(t))}function y(t,{allowed:r,disallowed:e}={}){let i=L(t,"inert-others");T(()=>{var d,c;if(!i)return;let a=M();for(let n of(d=e==null?void 0:e())!=null?d:[])n&&a.add(h(n));let s=(c=r==null?void 0:r())!=null?c:[];for(let n of s){if(!n)continue;let l=b(n);if(!l)continue;let o=n.parentElement;for(;o&&o!==l.body;){for(let p of o.children)s.some(E=>p.contains(E))||a.add(h(p));o=o.parentElement}}return a.dispose},[i,r,e])}export{y as useInertOthers}; |
@@ -1,1 +0,1 @@ | ||
import{useRef as r,useEffect as t}from"react";function n(){let e=r(!0);return t(()=>(e.current=!1,()=>{e.current=!0}),[]),e.current}export{n as useIsInitialRender}; | ||
import{useEffect as r,useRef as t}from"react";function n(){let e=t(!0);return r(()=>(e.current=!1,()=>{e.current=!0}),[]),e.current}export{n as useIsInitialRender}; |
@@ -1,2 +0,2 @@ | ||
import { useEffect } from 'react'; | ||
export declare let useIsoMorphicEffect: typeof useEffect; | ||
import { type DependencyList, type EffectCallback } from 'react'; | ||
export declare let useIsoMorphicEffect: (effect: EffectCallback, deps?: DependencyList | undefined) => void; |
@@ -1,1 +0,1 @@ | ||
import{useLayoutEffect as e,useEffect as f}from"react";import{isServer as o}from'../utils/ssr.js';let s=o?f:e;export{s 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}; |
@@ -1,6 +0,6 @@ | ||
import { MutableRefObject } from 'react'; | ||
declare type Container = MutableRefObject<HTMLElement | null> | HTMLElement | null; | ||
declare type ContainerCollection = Container[] | Set<Container>; | ||
declare type ContainerInput = Container | ContainerCollection; | ||
export declare function useOutsideClick(containers: ContainerInput | (() => ContainerInput), cb: (event: MouseEvent | PointerEvent | FocusEvent, target: HTMLElement) => void, enabled?: boolean): void; | ||
import { type MutableRefObject } from 'react'; | ||
type Container = MutableRefObject<HTMLElement | null> | HTMLElement | null; | ||
type ContainerCollection = Container[] | Set<Container>; | ||
type ContainerInput = Container | ContainerCollection; | ||
export declare function useOutsideClick(enabled: boolean, containers: ContainerInput | (() => ContainerInput), cb: (event: MouseEvent | PointerEvent | FocusEvent | TouchEvent, target: HTMLElement) => void): void; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import{useEffect as d,useRef as s}from"react";import{FocusableMode as p,isFocusableElement as C}from'../utils/focus-management.js';import{useDocumentEvent as a}from'./use-document-event.js';function L(m,E,c=!0){let i=s(!1);d(()=>{requestAnimationFrame(()=>{i.current=c})},[c]);function f(e,o){if(!i.current||e.defaultPrevented)return;let l=function r(t){return typeof t=="function"?r(t()):Array.isArray(t)||t instanceof Set?t:[t]}(m),n=o(e);if(n!==null&&!!n.getRootNode().contains(n)){for(let r of l){if(r===null)continue;let t=r instanceof HTMLElement?r:r.current;if(t!=null&&t.contains(n)||e.composed&&e.composedPath().includes(t))return}return!C(n,p.Loose)&&n.tabIndex!==-1&&e.preventDefault(),E(e,n)}}let u=s(null);a("mousedown",e=>{var o,l;i.current&&(u.current=((l=(o=e.composedPath)==null?void 0:o.call(e))==null?void 0:l[0])||e.target)},!0),a("click",e=>{!u.current||(f(e,()=>u.current),u.current=null)},!0),a("blur",e=>f(e,()=>window.document.activeElement instanceof HTMLIFrameElement?window.document.activeElement:null),!0)}export{L as useOutsideClick}; | ||
import{useCallback as h,useRef as m}from"react";import{FocusableMode as M,isFocusableElement as b}from'../utils/focus-management.js';import{isMobile as y}from'../utils/platform.js';import{useDocumentEvent as c}from'./use-document-event.js';import{useIsTopLayer as L}from'./use-is-top-layer.js';import{useLatestValue as g}from'./use-latest-value.js';import{useWindowEvent as H}from'./use-window-event.js';const d=30;function F(E,p,C){let u=L(E,"outside-click"),f=g(C),s=h(function(e,o){if(e.defaultPrevented)return;let r=o(e);if(r===null||!r.getRootNode().contains(r)||!r.isConnected)return;let T=function i(n){return typeof n=="function"?i(n()):Array.isArray(n)||n instanceof Set?n:[n]}(p);for(let i of T){if(i===null)continue;let n=i instanceof HTMLElement?i:i.current;if(n!=null&&n.contains(r)||e.composed&&e.composedPath().includes(n))return}return!b(r,M.Loose)&&r.tabIndex!==-1&&e.preventDefault(),f.current(e,r)},[f]),l=m(null);c(u,"pointerdown",t=>{var e,o;l.current=((o=(e=t.composedPath)==null?void 0:e.call(t))==null?void 0:o[0])||t.target},!0),c(u,"mousedown",t=>{var e,o;l.current=((o=(e=t.composedPath)==null?void 0:e.call(t))==null?void 0:o[0])||t.target},!0),c(u,"click",t=>{y()||l.current&&(s(t,()=>l.current),l.current=null)},!0);let a=m({x:0,y:0});c(u,"touchstart",t=>{a.current.x=t.touches[0].clientX,a.current.y=t.touches[0].clientY},!0),c(u,"touchend",t=>{let e={x:t.changedTouches[0].clientX,y:t.changedTouches[0].clientY};if(!(Math.abs(e.x-a.current.x)>=d||Math.abs(e.y-a.current.y)>=d))return s(t,()=>t.target instanceof HTMLElement?t.target:null)},!0),H(u,"blur",t=>s(t,()=>window.document.activeElement instanceof HTMLIFrameElement?window.document.activeElement:null),!0)}export{F as useOutsideClick}; |
@@ -1,2 +0,2 @@ | ||
import { MutableRefObject } from 'react'; | ||
import { type MutableRefObject } from 'react'; | ||
export declare function useResolveButtonType<TTag>(props: { | ||
@@ -3,0 +3,0 @@ type?: string; |
@@ -1,1 +0,1 @@ | ||
import{useState as o}from"react";import{useIsoMorphicEffect as r}from'./use-iso-morphic-effect.js';function i(t){var n;if(t.type)return t.type;let e=(n=t.as)!=null?n:"button";if(typeof e=="string"&&e.toLowerCase()==="button")return"button"}function s(t,e){let[n,u]=o(()=>i(t));return r(()=>{u(i(t))},[t.type,t.as]),r(()=>{n||!e.current||e.current instanceof HTMLButtonElement&&!e.current.hasAttribute("type")&&u("button")},[n,e]),n}export{s as useResolveButtonType}; | ||
import{useState as o}from"react";import{useIsoMorphicEffect as r}from'./use-iso-morphic-effect.js';function i(t){var n;if(t.type)return t.type;let e=(n=t.as)!=null?n:"button";if(typeof e=="string"&&e.toLowerCase()==="button")return"button"}function T(t,e){let[n,u]=o(()=>i(t));return r(()=>{u(i(t))},[t.type,t.as]),r(()=>{n||e.current&&e.current instanceof HTMLButtonElement&&!e.current.hasAttribute("type")&&u("button")},[n,e]),n}export{T as useResolveButtonType}; |
@@ -1,1 +0,1 @@ | ||
import{useState as o,useEffect as t}from"react";let r={serverHandoffComplete:!1};function a(){let[e,f]=o(r.serverHandoffComplete);return t(()=>{e!==!0&&f(!0)},[e]),t(()=>{r.serverHandoffComplete===!1&&(r.serverHandoffComplete=!0)},[]),e}export{a as useServerHandoffComplete}; | ||
import*as t from"react";import{env as f}from'../utils/env.js';function s(){let r=typeof document=="undefined";return"useSyncExternalStore"in t?(o=>o.useSyncExternalStore)(t)(()=>()=>{},()=>!1,()=>!r):!1}function l(){let r=s(),[e,n]=t.useState(f.isHandoffComplete);return e&&f.isHandoffComplete===!1&&n(!1),t.useEffect(()=>{e!==!0&&n(!0)},[e]),t.useEffect(()=>f.handoff(),[]),r?!1:e}export{l as useServerHandoffComplete}; |
@@ -1,1 +0,1 @@ | ||
import{useRef as l,useEffect as i}from"react";import{useEvent as r}from'./use-event.js';let u=Symbol();function T(t,n=!0){return Object.assign(t,{[u]:n})}function y(...t){let n=l(t);i(()=>{n.current=t},[t]);let c=r(e=>{for(let o of n.current)o!=null&&(typeof o=="function"?o(e):o.current=e)});return t.every(e=>e==null||(e==null?void 0:e[u]))?void 0:c}export{T as optionalRef,y as useSyncRefs}; | ||
import{useEffect as l,useRef as i}from"react";import{useEvent as r}from'./use-event.js';let u=Symbol();function T(t,n=!0){return Object.assign(t,{[u]:n})}function y(...t){let n=i(t);l(()=>{n.current=t},[t]);let c=r(e=>{for(let o of n.current)o!=null&&(typeof o=="function"?o(e):o.current=e)});return t.every(e=>e==null||(e==null?void 0:e[u]))?void 0:c}export{T as optionalRef,y as useSyncRefs}; |
@@ -1,1 +0,1 @@ | ||
import{useRef as t}from"react";import{useWindowEvent as a}from'./use-window-event.js';var s=(r=>(r[r.Forwards=0]="Forwards",r[r.Backwards=1]="Backwards",r))(s||{});function n(){let e=t(0);return a("keydown",o=>{o.key==="Tab"&&(e.current=o.shiftKey?1:0)},!0),e}export{s as Direction,n as useTabDirection}; | ||
import{useRef as o}from"react";import{useWindowEvent as t}from'./use-window-event.js';var a=(r=>(r[r.Forwards=0]="Forwards",r[r.Backwards=1]="Backwards",r))(a||{});function u(){let e=o(0);return t(!0,"keydown",r=>{r.key==="Tab"&&(e.current=r.shiftKey?1:0)},!0),e}export{a as Direction,u as useTabDirection}; |
@@ -1,18 +0,13 @@ | ||
import { MutableRefObject } from 'react'; | ||
interface TransitionArgs { | ||
container: MutableRefObject<HTMLElement | null>; | ||
classes: MutableRefObject<{ | ||
enter: string[]; | ||
enterFrom: string[]; | ||
enterTo: string[]; | ||
leave: string[]; | ||
leaveFrom: string[]; | ||
leaveTo: string[]; | ||
entered: string[]; | ||
}>; | ||
direction: 'enter' | 'leave' | 'idle'; | ||
onStart: MutableRefObject<(direction: TransitionArgs['direction']) => void>; | ||
onStop: MutableRefObject<(direction: TransitionArgs['direction']) => void>; | ||
} | ||
export declare function useTransition({ container, direction, classes, onStart, onStop }: TransitionArgs): void; | ||
import { type MutableRefObject } from 'react'; | ||
type TransitionData = { | ||
closed?: boolean; | ||
enter?: boolean; | ||
leave?: boolean; | ||
transition?: boolean; | ||
}; | ||
export declare function transitionDataAttributes(data: TransitionData): Record<string, string>; | ||
export declare function useTransition(enabled: boolean, elementRef: MutableRefObject<HTMLElement | null>, show: boolean, events?: { | ||
start?(show: boolean): void; | ||
end?(show: boolean): void; | ||
}): [visible: boolean, data: TransitionData]; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import{transition as d}from'../components/transitions/utils/transition.js';import{disposables as l}from'../utils/disposables.js';import{useDisposables as f}from'./use-disposables.js';import{useIsMounted as m}from'./use-is-mounted.js';import{useIsoMorphicEffect as p}from'./use-iso-morphic-effect.js';import{useLatestValue as b}from'./use-latest-value.js';function D({container:i,direction:t,classes:o,onStart:s,onStop:u}){let a=m(),c=f(),r=b(t);p(()=>{let e=l();c.add(e.dispose);let n=i.current;if(!!n&&r.current!=="idle"&&!!a.current)return e.dispose(),s.current(r.current),e.add(d(n,o.current,r.current==="enter",()=>{e.dispose(),u.current(r.current)})),e.dispose},[t])}export{D as useTransition}; | ||
import{useRef as b,useState as S}from"react";import{disposables as E}from'../utils/disposables.js';import{once as g}from'../utils/once.js';import{useDisposables as L}from'./use-disposables.js';import{useFlags as y}from'./use-flags.js';import{useIsoMorphicEffect as C}from'./use-iso-morphic-effect.js';var D=(i=>(i[i.None=0]="None",i[i.Closed=1]="Closed",i[i.Enter=2]="Enter",i[i.Leave=4]="Leave",i))(D||{});function A(e){let a={};for(let t in e)e[t]===!0&&(a[`data-${t}`]="");return a}function V(e,a,t,r){let[i,u]=S(t),{hasFlag:d,addFlag:f,removeFlag:s}=y(e&&i?3:0),l=b(!1),n=b(!1),o=L();return C(function p(){var T;if(!e)return;t&&u(!0);let c=a.current;return c?((T=r==null?void 0:r.start)==null||T.call(r,t),M(c,{inFlight:l,prepare(){n.current?n.current=!1:n.current=l.current,l.current=!0,!n.current&&(t?(f(3),s(4)):(f(4),s(2)))},run(){n.current?t?(s(3),f(4)):(s(4),f(3)):t?s(1):f(1)},done(){var m;n.current&&typeof c.getAnimations=="function"&&c.getAnimations().length>0||(l.current=!1,s(7),t||u(!1),(m=r==null?void 0:r.end)==null||m.call(r,t))}})):t?(f(3),o.nextFrame(()=>p())):void 0},[e,t,a,o]),e?[i,{closed:d(1),enter:d(2),leave:d(4),transition:d(2)||d(4)}]:[t,{closed:void 0,enter:void 0,leave:void 0,transition:void 0}]}function M(e,{prepare:a,run:t,done:r,inFlight:i}){let u=E();return R(e,{prepare:a,inFlight:i}),u.nextFrame(()=>{u.add(F(e,r)),t()}),u.dispose}function F(e,a){let t=g(a),r=E();if(!e)return r.dispose;let{transitionDuration:i,transitionDelay:u}=getComputedStyle(e),[d,f]=[i,u].map(l=>{let[n=0]=l.split(",").filter(Boolean).map(o=>o.includes("ms")?parseFloat(o):parseFloat(o)*1e3).sort((o,p)=>p-o);return n}),s=d+f;if(s!==0){let l=r.group(n=>{let o=n.setTimeout(()=>{t(),n.dispose()},s);n.addEventListener(e,"transitionrun",p=>{p.target===p.currentTarget&&(o(),n.addEventListener(e,"transitioncancel",c=>{c.target===c.currentTarget&&(t(),l())}))})});r.addEventListener(e,"transitionend",n=>{n.target===n.currentTarget&&(t(),r.dispose())})}else t();return r.dispose}function R(e,{inFlight:a,prepare:t}){if(a!=null&&a.current){t();return}let r=e.style.transition;e.style.transition="none",t(),e.offsetHeight,e.style.transition=r}export{A as transitionDataAttributes,V as useTransition}; |
@@ -1,8 +0,7 @@ | ||
declare type AcceptNode = (node: HTMLElement) => typeof NodeFilter.FILTER_ACCEPT | typeof NodeFilter.FILTER_SKIP | typeof NodeFilter.FILTER_REJECT; | ||
export declare function useTreeWalker({ container, accept, walk, enabled, }: { | ||
type AcceptNode = (node: HTMLElement) => typeof NodeFilter.FILTER_ACCEPT | typeof NodeFilter.FILTER_SKIP | typeof NodeFilter.FILTER_REJECT; | ||
export declare function useTreeWalker(enabled: boolean, { container, accept, walk, }: { | ||
container: HTMLElement | null; | ||
accept: AcceptNode; | ||
walk(node: HTMLElement): void; | ||
enabled?: boolean; | ||
}): void; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import{useRef as E,useEffect as m}from"react";import{useIsoMorphicEffect as T}from'./use-iso-morphic-effect.js';import{getOwnerDocument as N}from'../utils/owner.js';function F({container:e,accept:t,walk:r,enabled:c=!0}){let o=E(t),l=E(r);m(()=>{o.current=t,l.current=r},[t,r]),T(()=>{if(!e||!c)return;let n=N(e);if(!n)return;let f=o.current,p=l.current,d=Object.assign(i=>f(i),{acceptNode:f}),u=n.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,d,!1);for(;u.nextNode();)p(u.currentNode)},[e,c,o,l])}export{F as useTreeWalker}; | ||
import{useEffect as T,useRef as E}from"react";import{getOwnerDocument as d}from'../utils/owner.js';import{useIsoMorphicEffect as N}from'./use-iso-morphic-effect.js';function F(c,{container:e,accept:t,walk:r}){let o=E(t),l=E(r);T(()=>{o.current=t,l.current=r},[t,r]),N(()=>{if(!e||!c)return;let n=d(e);if(!n)return;let f=o.current,p=l.current,i=Object.assign(m=>f(m),{acceptNode:f}),u=n.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,i,!1);for(;u.nextNode();)p(u.currentNode)},[e,c,o,l])}export{F as useTreeWalker}; |
@@ -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}; |
@@ -1,1 +0,1 @@ | ||
export declare function useWindowEvent<TType extends keyof WindowEventMap>(type: TType, listener: (ev: WindowEventMap[TType]) => any, options?: boolean | AddEventListenerOptions): void; | ||
export declare function useWindowEvent<TType extends keyof WindowEventMap>(enabled: boolean, type: TType, listener: (ev: WindowEventMap[TType]) => any, options?: boolean | AddEventListenerOptions): void; |
@@ -1,1 +0,1 @@ | ||
import{useEffect as d}from"react";import{useLatestValue as a}from'./use-latest-value.js';function s(e,r,n){let o=a(r);d(()=>{function t(i){o.current(i)}return window.addEventListener(e,t,n),()=>window.removeEventListener(e,t,n)},[e,n])}export{s as useWindowEvent}; | ||
import{useEffect as a}from"react";import{useLatestValue as f}from'./use-latest-value.js';function s(t,e,o,n){let i=f(o);a(()=>{if(!t)return;function r(d){i.current(d)}return window.addEventListener(e,r,n),()=>window.removeEventListener(e,r,n)},[t,e,n])}export{s as useWindowEvent}; |
@@ -1,13 +0,25 @@ | ||
import 'client-only'; | ||
export * from './components/button/button.js'; | ||
export * from './components/checkbox/checkbox.js'; | ||
export * from './components/close-button/close-button.js'; | ||
export * from './components/combobox/combobox.js'; | ||
export * from './components/data-interactive/data-interactive.js'; | ||
export { Description, type DescriptionProps } from './components/description/description.js'; | ||
export * from './components/dialog/dialog.js'; | ||
export * from './components/disclosure/disclosure.js'; | ||
export * from './components/field/field.js'; | ||
export * from './components/fieldset/fieldset.js'; | ||
export * from './components/focus-trap/focus-trap.js'; | ||
export * from './components/input/input.js'; | ||
export { Label, type LabelProps } from './components/label/label.js'; | ||
export * from './components/legend/legend.js'; | ||
export * from './components/listbox/listbox.js'; | ||
export * from './components/menu/menu.js'; | ||
export * from './components/popover/popover.js'; | ||
export * from './components/portal/portal.js'; | ||
export { Portal } from './components/portal/portal.js'; | ||
export * from './components/radio-group/radio-group.js'; | ||
export * from './components/select/select.js'; | ||
export * from './components/switch/switch.js'; | ||
export * from './components/tabs/tabs.js'; | ||
export * from './components/transitions/transition.js'; | ||
export * from './components/textarea/textarea.js'; | ||
export { useClose } from './internal/close-provider.js'; | ||
export * from './components/transition/transition.js'; |
@@ -1,1 +0,1 @@ | ||
import"client-only";export*from'./components/combobox/combobox.js';export*from'./components/dialog/dialog.js';export*from'./components/disclosure/disclosure.js';export*from'./components/focus-trap/focus-trap.js';export*from'./components/listbox/listbox.js';export*from'./components/menu/menu.js';export*from'./components/popover/popover.js';export*from'./components/portal/portal.js';export*from'./components/radio-group/radio-group.js';export*from'./components/switch/switch.js';export*from'./components/tabs/tabs.js';export*from'./components/transitions/transition.js'; | ||
export*from'./components/button/button.js';export*from'./components/checkbox/checkbox.js';export*from'./components/close-button/close-button.js';export*from'./components/combobox/combobox.js';export*from'./components/data-interactive/data-interactive.js';import{Description as x}from'./components/description/description.js';export*from'./components/dialog/dialog.js';export*from'./components/disclosure/disclosure.js';export*from'./components/field/field.js';export*from'./components/fieldset/fieldset.js';export*from'./components/focus-trap/focus-trap.js';export*from'./components/input/input.js';import{Label as n}from'./components/label/label.js';export*from'./components/legend/legend.js';export*from'./components/listbox/listbox.js';export*from'./components/menu/menu.js';export*from'./components/popover/popover.js';import{Portal as d}from'./components/portal/portal.js';export*from'./components/radio-group/radio-group.js';export*from'./components/select/select.js';export*from'./components/switch/switch.js';export*from'./components/tabs/tabs.js';export*from'./components/textarea/textarea.js';import{useClose as w}from'./internal/close-provider.js';export*from'./components/transition/transition.js';export{x as Description,n as Label,d as Portal,w as useClose}; |
@@ -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 {}; |
@@ -1,1 +0,1 @@ | ||
import i,{useState as s}from"react";import{Hidden as c,Features as l}from'./hidden.js';function p({onFocus:n}){let[r,o]=s(!0);return r?i.createElement(c,{as:"button",type:"button",features:l.Focusable,onFocus:a=>{a.preventDefault();let e,u=50;function t(){if(u--<=0){e&&cancelAnimationFrame(e);return}if(n()){o(!1),cancelAnimationFrame(e);return}e=requestAnimationFrame(t)}e=requestAnimationFrame(t)}}):null}export{p as FocusSentinel}; | ||
import s,{useState as c}from"react";import{useIsMounted as m}from'../hooks/use-is-mounted.js';import{Hidden as f,HiddenFeatures as l}from'./hidden.js';function b({onFocus:n}){let[r,o]=c(!0),u=m();return r?s.createElement(f,{as:"button",type:"button",features:l.Focusable,onFocus:a=>{a.preventDefault();let e,i=50;function t(){if(i--<=0){e&&cancelAnimationFrame(e);return}if(n()){if(cancelAnimationFrame(e),!u.current)return;o(!1);return}e=requestAnimationFrame(t)}e=requestAnimationFrame(t)}}):null}export{b as FocusSentinel}; |
@@ -1,4 +0,6 @@ |
import { ElementType, Ref } from 'react'; |
import { Props } from '../types.js'; |
export declare enum Features { |
import type { ElementType, Ref } from 'react'; |
import type { Props } from '../types.js'; |
import { type HasDisplayName, type RefProp } from '../utils/render.js'; |
declare let DEFAULT_VISUALLY_HIDDEN_TAG: "div"; |
export declare enum HiddenFeatures { |
None = 1, |
@@ -8,12 +10,12 @@ Focusable = 2, |
} |
export declare let Hidden: (<TTag extends ElementType<any> = "div">(props: Omit<import('../types.js').PropsOf<TTag>, "as" | "children" | "refName" | "className"> & { |
as?: TTag | undefined; |
children?: import("react").ReactNode | ((bag: {}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>); |
refName?: string | undefined; |
} & (true extends (import('../types.js').PropsOf<TTag> extends never ? never : "className" extends keyof import('../types.js').PropsOf<TTag> ? true : never) ? { |
className?: import('../types.js').PropsOf<TTag>["className"] | ((bag: {}) => string) | undefined; |
} : {}) & { |
features?: Features | undefined; |
}, ref: Ref<HTMLElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) & { |
displayName: string; |
}; |
type HiddenRenderPropArg = {}; |
type HiddenPropsWeControl = never; |
export type HiddenProps<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG> = Props<TTag, HiddenRenderPropArg, HiddenPropsWeControl, { |
features?: HiddenFeatures; |
}>; |
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; |
interface ComponentHidden extends HasDisplayName { |
<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG>(props: HiddenProps<TTag> & RefProp<typeof VisuallyHidden>): JSX.Element; |
} |
export declare let Hidden: ComponentHidden; |
export {}; |
@@ -1,1 +0,1 @@ |
import{forwardRefWithAs as i,render as n}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||{});let h=i(function(t,o){let{features:e=1,...r}=t,d={ref:o,"aria-hidden":(e&2)===2?!0:void 0,style:{position:"fixed",top:1,left:1,width:1,height:0,padding:0,margin:-1,overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",borderWidth:"0",...(e&4)===4&&(e&2)!==2&&{display:"none"}}};return n({ourProps:d,theirProps:r,slot:{},defaultTag:a,name:"Hidden"})});export{s as Features,h 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}; |
@@ -1,5 +0,7 @@ | ||
import { ReactNode, ReactElement } from 'react'; | ||
import React, { type ReactElement, type ReactNode } from 'react'; | ||
export declare enum State { | ||
Open = 0, | ||
Closed = 1 | ||
Open = 1, | ||
Closed = 2, | ||
Closing = 4, | ||
Opening = 8 | ||
} | ||
@@ -12,2 +14,5 @@ export declare function useOpenClosed(): State | null; | ||
export declare function OpenClosedProvider({ value, children }: Props): ReactElement; | ||
export declare function ResetOpenClosedProvider({ children }: { | ||
children: React.ReactNode; | ||
}): ReactElement; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import r,{createContext as l,useContext as d}from"react";let o=l(null);o.displayName="OpenClosedContext";var p=(e=>(e[e.Open=0]="Open",e[e.Closed=1]="Closed",e))(p||{});function s(){return d(o)}function C({value:t,children:n}){return r.createElement(o.Provider,{value:t},n)}export{C as OpenClosedProvider,p as State,s as useOpenClosed}; | ||
import r,{createContext as l,useContext as d}from"react";let n=l(null);n.displayName="OpenClosedContext";var i=(e=>(e[e.Open=1]="Open",e[e.Closed=2]="Closed",e[e.Closing=4]="Closing",e[e.Opening=8]="Opening",e))(i||{});function u(){return d(n)}function c({value:o,children:t}){return r.createElement(n.Provider,{value:o},t)}function s({children:o}){return r.createElement(n.Provider,{value:null},o)}export{c as OpenClosedProvider,s as ResetOpenClosedProvider,i as State,u as useOpenClosed}; |
@@ -1,2 +0,2 @@ | ||
import { ReactNode } from 'react'; | ||
import React, { type ReactNode } from 'react'; | ||
export declare function usePortalRoot(): boolean; | ||
@@ -7,3 +7,3 @@ interface ForcePortalRootProps { | ||
} | ||
export declare function ForcePortalRoot(props: ForcePortalRootProps): JSX.Element; | ||
export declare function ForcePortalRoot(props: ForcePortalRootProps): React.JSX.Element; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import t,{createContext as r,useContext as c}from"react";let e=r(!1);function l(){return c(e)}function P(o){return t.createElement(e.Provider,{value:o.force},o.children)}export{P as ForcePortalRoot,l as usePortalRoot}; | ||
import t,{createContext as r,useContext as c}from"react";let e=r(!1);function a(){return c(e)}function l(o){return t.createElement(e.Provider,{value:o.force},o.children)}export{l as ForcePortalRoot,a as usePortalRoot}; |
@@ -1,12 +0,10 @@ | ||
import { ReactNode, ReactElement, JSXElementConstructor } from 'react'; | ||
export declare type ReactTag = keyof JSX.IntrinsicElements | JSXElementConstructor<any>; | ||
declare let __: "1D45E01E-AF44-47C4-988A-19A94EBAF55C"; | ||
export declare type __ = typeof __; | ||
export declare type Expand<T> = T extends infer O ? { | ||
import type { JSXElementConstructor, ReactElement, ReactNode } from 'react'; | ||
export type ReactTag = keyof JSX.IntrinsicElements | JSXElementConstructor<any>; | ||
export type Expand<T> = T extends infer O ? { | ||
[K in keyof O]: O[K]; | ||
} : never; | ||
export declare type PropsOf<TTag extends ReactTag> = TTag extends React.ElementType ? React.ComponentProps<TTag> : never; | ||
declare type PropsWeControl = 'as' | 'children' | 'refName' | 'className'; | ||
declare type CleanProps<TTag extends ReactTag, TOmitableProps extends PropertyKey = __> = TOmitableProps extends __ ? Omit<PropsOf<TTag>, PropsWeControl> : Omit<PropsOf<TTag>, TOmitableProps | PropsWeControl>; | ||
declare type OurProps<TTag extends ReactTag, TSlot> = { | ||
export type PropsOf<TTag extends ReactTag> = TTag extends React.ElementType ? Omit<React.ComponentProps<TTag>, 'ref'> : never; | ||
type PropsWeControl = 'as' | 'children' | 'refName' | 'className'; | ||
type CleanProps<TTag extends ReactTag, TOmittableProps extends PropertyKey = never> = Omit<PropsOf<TTag>, TOmittableProps | PropsWeControl>; | ||
type OurProps<TTag extends ReactTag, TSlot> = { | ||
as?: TTag; | ||
@@ -16,13 +14,8 @@ children?: ReactNode | ((bag: TSlot) => ReactElement); | ||
}; | ||
declare type HasProperty<T extends object, K extends PropertyKey> = T extends never ? never : K extends keyof T ? true : never; | ||
declare type ClassNameOverride<TTag extends ReactTag, TSlot = {}> = true extends HasProperty<PropsOf<TTag>, 'className'> ? { | ||
type HasProperty<T extends object, K extends PropertyKey> = T extends never ? never : K extends keyof T ? true : never; | ||
type ClassNameOverride<TTag extends ReactTag, TSlot = {}> = true extends HasProperty<PropsOf<TTag>, 'className'> ? { | ||
className?: PropsOf<TTag>['className'] | ((bag: TSlot) => string); | ||
} : {}; | ||
export declare type Props<TTag extends ReactTag, TSlot = {}, TOmitableProps extends PropertyKey = __> = CleanProps<TTag, TOmitableProps> & OurProps<TTag, TSlot> & ClassNameOverride<TTag, TSlot>; | ||
declare type Without<T, U> = { | ||
[P in Exclude<keyof T, keyof U>]?: never; | ||
}; | ||
export declare type XOR<T, U> = T | U extends __ ? never : T extends __ ? U : U extends __ ? T : T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U; | ||
export declare type ByComparator<T> = (keyof T & string) | ((a: T, b: T) => boolean); | ||
export declare type EnsureArray<T> = T extends any[] ? T : Expand<T>[]; | ||
export type Props<TTag extends ReactTag, TSlot = {}, TOmittableProps extends PropertyKey = never, Overrides = {}> = CleanProps<TTag, TOmittableProps | keyof Overrides> & OurProps<TTag, TSlot> & ClassNameOverride<TTag, TSlot> & Overrides; | ||
export type EnsureArray<T> = T extends any[] ? T : Expand<T>[]; | ||
export {}; |
@@ -23,4 +23,4 @@ export declare enum Focus { | ||
resolveActiveIndex(): number | null; | ||
resolveId(item: TItem): string; | ||
resolveDisabled(item: TItem): boolean; | ||
resolveId(item: TItem, index: number, items: TItem[]): string; | ||
resolveDisabled(item: TItem, index: number, items: TItem[]): boolean; | ||
}): number | null; |
@@ -1,1 +0,1 @@ | ||
function f(r){throw new Error("Unexpected object: "+r)}var a=(e=>(e[e.First=0]="First",e[e.Previous=1]="Previous",e[e.Next=2]="Next",e[e.Last=3]="Last",e[e.Specific=4]="Specific",e[e.Nothing=5]="Nothing",e))(a||{});function x(r,n){let t=n.resolveItems();if(t.length<=0)return null;let l=n.resolveActiveIndex(),s=l!=null?l:-1,d=(()=>{switch(r.focus){case 0:return t.findIndex(e=>!n.resolveDisabled(e));case 1:{let e=t.slice().reverse().findIndex((i,c,u)=>s!==-1&&u.length-c-1>=s?!1:!n.resolveDisabled(i));return e===-1?e:t.length-1-e}case 2:return t.findIndex((e,i)=>i<=s?!1:!n.resolveDisabled(e));case 3:{let e=t.slice().reverse().findIndex(i=>!n.resolveDisabled(i));return e===-1?e:t.length-1-e}case 4:return t.findIndex(e=>n.resolveId(e)===r.id);case 5:return null;default:f(r)}})();return d===-1?l:d}export{a as Focus,x as calculateActiveIndex}; | ||
function u(l){throw new Error("Unexpected object: "+l)}var c=(i=>(i[i.First=0]="First",i[i.Previous=1]="Previous",i[i.Next=2]="Next",i[i.Last=3]="Last",i[i.Specific=4]="Specific",i[i.Nothing=5]="Nothing",i))(c||{});function f(l,n){let t=n.resolveItems();if(t.length<=0)return null;let r=n.resolveActiveIndex(),s=r!=null?r:-1;switch(l.focus){case 0:{for(let e=0;e<t.length;++e)if(!n.resolveDisabled(t[e],e,t))return e;return r}case 1:{s===-1&&(s=t.length);for(let e=s-1;e>=0;--e)if(!n.resolveDisabled(t[e],e,t))return e;return r}case 2:{for(let e=s+1;e<t.length;++e)if(!n.resolveDisabled(t[e],e,t))return e;return r}case 3:{for(let e=t.length-1;e>=0;--e)if(!n.resolveDisabled(t[e],e,t))return e;return r}case 4:{for(let e=0;e<t.length;++e)if(n.resolveId(t[e],e,t)===l.id)return e;return r}case 5:return null;default:u(l)}}export{c as Focus,f as calculateActiveIndex}; |
@@ -1,1 +0,1 @@ | ||
function e(...n){return n.filter(Boolean).join(" ")}export{e as classNames}; | ||
function t(...r){return Array.from(new Set(r.flatMap(n=>typeof n=="string"?n.split(" "):[]))).filter(Boolean).join(" ")}export{t as classNames}; |
@@ -0,4 +1,16 @@ | ||
export type Disposables = ReturnType<typeof disposables>; | ||
/** | ||
* Disposables are a way to manage event handlers and functions like | ||
* `setTimeout` and `requestAnimationFrame` that need to be cleaned up when they | ||
* are no longer needed. | ||
* | ||
* | ||
* When you register a disposable function, it is added to a collection of | ||
* disposables. Each disposable in the collection provides a `dispose` clean up | ||
* function that can be called when it's no longer needed. There is also a | ||
* `dispose` function on the collection itself that can be used to clean up all | ||
* pending disposables in that collection. | ||
*/ | ||
export declare function disposables(): { | ||
enqueue(fn: Function): void; | ||
addEventListener<TEventName extends keyof WindowEventMap>(element: HTMLElement | Window | Document, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions | undefined): () => void; | ||
addEventListener<TEventName extends keyof WindowEventMap>(element: HTMLElement | Window | Document, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions): () => void; | ||
requestAnimationFrame(callback: FrameRequestCallback): () => void; | ||
@@ -8,5 +20,6 @@ nextFrame(callback: FrameRequestCallback): () => void; | ||
microTask(cb: () => void): () => void; | ||
style(node: HTMLElement, property: string, value: string): () => void; | ||
group(cb: (d: typeof this) => void): () => void; | ||
add(cb: () => void): () => void; | ||
dispose(): void; | ||
workQueue(): Promise<void>; | ||
}; |
@@ -1,1 +0,1 @@ | ||
import{microTask as s}from'./micro-task.js';function m(){let n=[],i=[],r={enqueue(e){i.push(e)},addEventListener(e,t,a,o){return e.addEventListener(t,a,o),r.add(()=>e.removeEventListener(t,a,o))},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 s(()=>{t.current&&e[0]()}),r.add(()=>{t.current=!1})},add(e){return n.push(e),()=>{let t=n.indexOf(e);if(t>=0){let[a]=n.splice(t,1);a()}}},dispose(){for(let e of n.splice(0))e()},async workQueue(){for(let e of i.splice(0))await e()}};return r}export{m 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}; |
@@ -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; |
@@ -1,1 +0,1 @@ | ||
import{disposables as b}from'./disposables.js';import{match as M}from'./match.js';import{getOwnerDocument as m}from'./owner.js';let f=["[contentEditable=true]","[tabindex]","a[href]","area[href]","button:not([disabled])","iframe","input:not([disabled])","select:not([disabled])","textarea:not([disabled])"].map(e=>`${e}:not([tabindex='-1'])`).join(",");var L=(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))(L||{}),N=(o=>(o[o.Error=0]="Error",o[o.Overflow=1]="Overflow",o[o.Success=2]="Success",o[o.Underflow=3]="Underflow",o))(N||{}),T=(r=>(r[r.Previous=-1]="Previous",r[r.Next=1]="Next",r))(T||{});function E(e=document.body){return e==null?[]:Array.from(e.querySelectorAll(f)).sort((t,r)=>Math.sign((t.tabIndex||Number.MAX_SAFE_INTEGER)-(r.tabIndex||Number.MAX_SAFE_INTEGER)))}var F=(r=>(r[r.Strict=0]="Strict",r[r.Loose=1]="Loose",r))(F||{});function h(e,t=0){var r;return e===((r=m(e))==null?void 0:r.body)?!1:M(t,{[0](){return e.matches(f)},[1](){let l=e;for(;l!==null;){if(l.matches(f))return!0;l=l.parentElement}return!1}})}function v(e){let t=m(e);b().nextFrame(()=>{t&&!h(t.activeElement,0)&&S(e)})}function S(e){e==null||e.focus({preventScroll:!0})}let H=["textarea","input"].join(",");function w(e){var t,r;return(r=(t=e==null?void 0:e.matches)==null?void 0:t.call(e,H))!=null?r:!1}function A(e,t=r=>r){return e.slice().sort((r,l)=>{let o=t(r),i=t(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 g(e,t){return I(E(),t,{relativeTo:e})}function I(e,t,{sorted:r=!0,relativeTo:l=null,skipElements:o=[]}={}){let i=Array.isArray(e)?e.length>0?e[0].ownerDocument:document:e.ownerDocument,n=Array.isArray(e)?r?A(e):e:E(e);o.length>0&&(n=n.filter(s=>!o.includes(s))),l=l!=null?l:i.activeElement;let d=(()=>{if(t&5)return 1;if(t&10)return-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),x=(()=>{if(t&1)return 0;if(t&2)return Math.max(0,n.indexOf(l))-1;if(t&4)return Math.max(0,n.indexOf(l))+1;if(t&8)return n.length-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),p=t&32?{preventScroll:!0}:{},c=0,a=n.length,u;do{if(c>=a||c+a<=0)return 0;let s=x+c;if(t&16)s=(s+a)%a;else{if(s<0)return 3;if(s>=a)return 1}u=n[s],u==null||u.focus(p),c+=d}while(u!==i.activeElement);return t&6&&w(u)&&u.select(),u.hasAttribute("tabindex")||u.setAttribute("tabindex","0"),2}export{L as Focus,N as FocusResult,F as FocusableMode,S as focusElement,g as focusFrom,I as focusIn,E as getFocusableElements,h as isFocusableElement,v as restoreFocusIfNecessary,A 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}; |
@@ -1,4 +0,4 @@ | ||
declare type Entries = [string, string][]; | ||
type Entries = [string, string][]; | ||
export declare function objectToFormEntries(source?: Record<string, any>, parentKey?: string | null, entries?: Entries): Entries; | ||
export declare function attemptSubmit(element: HTMLElement): void; | ||
export declare function attemptSubmit(elementInForm: HTMLElement): void; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
function e(n={},r=null,t=[]){for(let[i,o]of Object.entries(n))f(t,s(r,i),o);return t}function s(n,r){return n?n+"["+r+"]":r}function f(n,r,t){if(Array.isArray(t))for(let[i,o]of t.entries())f(n,s(r,i.toString()),o);else t instanceof Date?n.push([r,t.toISOString()]):typeof t=="boolean"?n.push([r,t?"1":"0"]):typeof t=="string"?n.push([r,t]):typeof t=="number"?n.push([r,`${t}`]):t==null?n.push([r,""]):e(t,r,n)}function p(n){var t;let r=(t=n==null?void 0:n.form)!=null?t:n.closest("form");if(!!r){for(let i of r.elements)if(i.tagName==="INPUT"&&i.type==="submit"||i.tagName==="BUTTON"&&i.type==="submit"||i.nodeName==="INPUT"&&i.type==="image"){i.click();return}}}export{p as attemptSubmit,e as objectToFormEntries}; | ||
function e(i={},s=null,t=[]){for(let[r,n]of Object.entries(i))o(t,f(s,r),n);return t}function f(i,s){return i?i+"["+s+"]":s}function o(i,s,t){if(Array.isArray(t))for(let[r,n]of t.entries())o(i,f(s,r.toString()),n);else t instanceof Date?i.push([s,t.toISOString()]):typeof t=="boolean"?i.push([s,t?"1":"0"]):typeof t=="string"?i.push([s,t]):typeof t=="number"?i.push([s,`${t}`]):t==null?i.push([s,""]):e(t,s,i)}function p(i){var t,r;let s=(t=i==null?void 0:i.form)!=null?t:i.closest("form");if(s){for(let n of s.elements)if(n!==i&&(n.tagName==="INPUT"&&n.type==="submit"||n.tagName==="BUTTON"&&n.type==="submit"||n.nodeName==="INPUT"&&n.type==="image")){n.click();return}(r=s.requestSubmit)==null||r.call(s)}}export{p as attemptSubmit,e as objectToFormEntries}; |
@@ -1,2 +0,2 @@ | ||
import { MutableRefObject } from 'react'; | ||
import type { MutableRefObject } from 'react'; | ||
export declare function getOwnerDocument<T extends Element | MutableRefObject<Element | null>>(element: T | null | undefined): Document | null; |
@@ -1,1 +0,1 @@ | ||
import{isServer as n}from'./ssr.js';function e(r){return n?null:r instanceof Node?r.ownerDocument:r!=null&&r.hasOwnProperty("current")&&r.current instanceof Node?r.current.ownerDocument:document}export{e as getOwnerDocument}; | ||
import{env as n}from'./env.js';function u(r){return n.isServer?null:r instanceof Node?r.ownerDocument:r!=null&&r.hasOwnProperty("current")&&r.current instanceof Node?r.current.ownerDocument:document}export{u as getOwnerDocument}; |
export declare function isIOS(): boolean; | ||
export declare function isAndroid(): boolean; | ||
export declare function isMobile(): boolean; |
@@ -1,1 +0,1 @@ | ||
function o(){return/iPhone/gi.test(window.navigator.platform)||/Mac/gi.test(window.navigator.platform)&&window.navigator.maxTouchPoints>0}export{o as isIOS}; | ||
function t(){return/iPhone/gi.test(window.navigator.platform)||/Mac/gi.test(window.navigator.platform)&&window.navigator.maxTouchPoints>0}function i(){return/Android/gi.test(window.navigator.userAgent)}function n(){return t()||i()}export{i as isAndroid,t as isIOS,n as isMobile}; |
@@ -1,4 +0,4 @@ | ||
import { ElementType, ReactElement } from 'react'; | ||
import { Props, XOR, __, Expand } from '../types.js'; | ||
export declare enum Features { | ||
import { type ElementType, type ReactElement, type Ref } from 'react'; | ||
import type { Expand, Props } from '../types.js'; | ||
export declare enum RenderFeatures { | ||
/** No features at all */ | ||
@@ -24,12 +24,13 @@ None = 0, | ||
} | ||
declare type PropsForFeature<TPassedInFeatures extends Features, TForFeature extends Features, TProps> = { | ||
[P in TPassedInFeatures]: P extends TForFeature ? TProps : __; | ||
}[TPassedInFeatures]; | ||
export declare type PropsForFeatures<T extends Features> = XOR<PropsForFeature<T, Features.Static, { | ||
type UnionToIntersection<T> = (T extends any ? (x: T) => any : never) extends (x: infer R) => any ? R : never; | ||
type PropsForFeature<TPassedInFeatures extends RenderFeatures, TForFeature extends RenderFeatures, TProps> = TPassedInFeatures extends TForFeature ? TProps : {}; | ||
export type PropsForFeatures<T extends RenderFeatures> = Expand<UnionToIntersection<PropsForFeature<T, RenderFeatures.Static, { | ||
static?: boolean; | ||
}>, PropsForFeature<T, Features.RenderStrategy, { | ||
}> | PropsForFeature<T, RenderFeatures.RenderStrategy, { | ||
unmount?: boolean; | ||
}>>; | ||
export declare function render<TFeature extends Features, TTag extends ElementType, TSlot>({ ourProps, theirProps, slot, defaultTag, features, visible, name, }: { | ||
ourProps: Expand<Props<TTag, TSlot, any> & PropsForFeatures<TFeature>>; | ||
}>>>; | ||
export declare function render<TFeature extends RenderFeatures, TTag extends ElementType, TSlot>({ ourProps, theirProps, slot, defaultTag, features, visible, name, mergeRefs, }: { | ||
ourProps: Expand<Props<TTag, TSlot, any> & PropsForFeatures<TFeature>> & { | ||
ref?: Ref<HTMLElement | ElementType>; | ||
}; | ||
theirProps: Expand<Props<TTag, TSlot, any>>; | ||
@@ -41,4 +42,26 @@ slot?: TSlot; | ||
name: string; | ||
mergeRefs?: ReturnType<typeof useMergeRefsFn>; | ||
}): ReactElement<any, string | import("react").JSXElementConstructor<any>> | null; | ||
/** | ||
* This is a singleton hook. **You can ONLY call the returned | ||
* function *once* to produce expected results.** If you need | ||
* to call `mergeRefs()` multiple times you need to create a | ||
* separate function for each invocation. This happens as we | ||
* store the list of `refs` to update and always return the | ||
* same function that refers to that list of refs. | ||
* | ||
* You shouldn't normally read refs during render but this | ||
* should actually be okay because React itself is calling | ||
* the `function` that updates these refs and can only do | ||
* so once the ref that contains the list is updated. | ||
*/ | ||
export declare function useMergeRefsFn(): (...refs: any[]) => ((value: any) => void) | undefined; | ||
export type HasDisplayName = { | ||
displayName: string; | ||
}; | ||
export type RefProp<T extends Function> = T extends (props: any, ref: Ref<infer RefType>) => any ? { | ||
ref?: Ref<RefType>; | ||
} : never; | ||
export declare function mergeProps<T extends Props<any, any>[]>(...listOfProps: T): Props<any, any>; | ||
/** | ||
* This is a hack, but basically we want to keep the full 'API' of the component, but we do want to | ||
@@ -45,0 +68,0 @@ * wrap it in a forwardRef so that we _can_ passthrough the ref |
@@ -1,4 +0,4 @@ | ||
import{Fragment as c,cloneElement as P,createElement as b,forwardRef as E,isValidElement as x}from"react";import{match as R}from'./match.js';var S=(a=>(a[a.None=0]="None",a[a.RenderStrategy=1]="RenderStrategy",a[a.Static=2]="Static",a))(S||{}),j=(e=>(e[e.Unmount=0]="Unmount",e[e.Hidden=1]="Hidden",e))(j||{});function $({ourProps:r,theirProps:t,slot:e,defaultTag:a,features:o,visible:n=!0,name:l}){let s=T(t,r);if(n)return p(s,e,a,l);let u=o!=null?o:0;if(u&2){let{static:i=!1,...d}=s;if(i)return p(d,e,a,l)}if(u&1){let{unmount:i=!0,...d}=s;return R(i?0:1,{[0](){return null},[1](){return p({...d,hidden:!0,style:{display:"none"}},e,a,l)}})}return p(s,e,a,l)}function p(r,t={},e,a){let{as:o=e,children:n,refName:l="ref",...s}=m(r,["unmount","static"]),u=r.ref!==void 0?{[l]:r.ref}:{},i=typeof n=="function"?n(t):n;s.className&&typeof s.className=="function"&&(s.className=s.className(t));let d={};if(t){let f=!1,y=[];for(let[h,g]of Object.entries(t))typeof g=="boolean"&&(f=!0),g===!0&&y.push(h);f&&(d["data-headlessui-state"]=y.join(" "))}if(o===c&&Object.keys(F(s)).length>0){if(!x(i)||Array.isArray(i)&&i.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${a} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(s).map(f=>` - ${f}`).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(f=>` - ${f}`).join(` | ||
import{Fragment as R,cloneElement as P,createElement as E,forwardRef as j,isValidElement as v,useCallback as S,useRef as w}from"react";import{classNames as x}from'./class-names.js';import{match as k}from'./match.js';var M=(a=>(a[a.None=0]="None",a[a.RenderStrategy=1]="RenderStrategy",a[a.Static=2]="Static",a))(M||{}),O=(e=>(e[e.Unmount=0]="Unmount",e[e.Hidden=1]="Hidden",e))(O||{});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(!v(f)||Array.isArray(f)&&f.length>1){if(Object.keys(m(o)).length>0)throw new Error(['Passing props on "Fragment"!',"",`The current component <${a} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(m(o)).concat(Object.keys(m(u))).map(d=>` - ${d}`).join(` | ||
`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(d=>` - ${d}`).join(` | ||
`)].join(` | ||
`));return P(i,Object.assign({},T(i.props,F(m(s,["ref"]))),d,u,w(i.ref,u.ref)))}return b(o,Object.assign({},m(s,["ref"]),o!==c&&u,o!==c&&d),i)}function w(...r){return{ref:r.every(t=>t==null)?void 0:t=>{for(let e of r)e!=null&&(typeof e=="function"?e(t):e.current=t)}}}function T(...r){var a;if(r.length===0)return{};if(r.length===1)return r[0];let t={},e={};for(let o of r)for(let n in o)n.startsWith("on")&&typeof o[n]=="function"?((a=e[n])!=null||(e[n]=[]),e[n].push(o[n])):t[n]=o[n];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](n,...l){let s=e[o];for(let u of s){if((n instanceof Event||(n==null?void 0:n.nativeEvent)instanceof Event)&&n.defaultPrevented)return;u(n,...l)}}});return t}function C(r){var t;return Object.assign(E(r),{displayName:(t=r.displayName)!=null?t:r.name})}function F(r){let t=Object.assign({},r);for(let e in t)t[e]===void 0&&delete t[e];return t}function m(r,t=[]){let e=Object.assign({},r);for(let a of t)a in e&&delete e[a];return e}export{S as Features,j as RenderStrategy,F as compact,C as forwardRefWithAs,$ as render}; | ||
`))}else{let d=f.props,p=d==null?void 0:d.className,c=typeof p=="function"?(...F)=>x(p(...F),o.className):x(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 P(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 I(){let r=w([]),n=S(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 W(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{M as RenderFeatures,O as RenderStrategy,m as compact,W as forwardRefWithAs,D as mergeProps,H as render,I as useMergeRefsFn}; |
{ | ||
"name": "@headlessui/react", | ||
"version": "0.0.0-insiders.98b0817", | ||
"version": "0.0.0-insiders.990b179", | ||
"description": "A set of completely unstyled, fully accessible UI components for React, designed to integrate beautifully with Tailwind CSS.", | ||
@@ -14,5 +14,8 @@ "main": "dist/index.cjs", | ||
"exports": { | ||
"types": { | ||
"import": "./dist/index.d.ts", | ||
"require": "./dist/index.d.cts" | ||
}, | ||
"import": "./dist/headlessui.esm.js", | ||
"require": "./dist/index.cjs", | ||
"types": "./dist/index.d.ts" | ||
"require": "./dist/index.cjs" | ||
}, | ||
@@ -38,21 +41,24 @@ "type": "module", | ||
"lint": "../../scripts/lint.sh", | ||
"playground": "yarn workspace playground-react dev", | ||
"lint-types": "npm run attw -P --workspaces --if-present", | ||
"playground": "npm run dev --workspace=playground-react", | ||
"clean": "rimraf ./dist" | ||
}, | ||
"peerDependencies": { | ||
"react": "^16 || ^17 || ^18", | ||
"react-dom": "^16 || ^17 || ^18" | ||
"react": "^18", | ||
"react-dom": "^18" | ||
}, | ||
"devDependencies": { | ||
"@testing-library/react": "^13.0.0", | ||
"@types/react": "^17.0.43", | ||
"@types/react-dom": "^17.0.14", | ||
"esbuild": "^0.11.18", | ||
"react": "^18.0.0", | ||
"react-dom": "^18.0.0", | ||
"snapshot-diff": "^0.8.1" | ||
"@testing-library/react": "^15.0.7", | ||
"@types/react": "^18.3.3", | ||
"@types/react-dom": "^18.3.0", | ||
"react": "^18.3.1", | ||
"react-dom": "^18.3.1", | ||
"snapshot-diff": "^0.10.0" | ||
}, | ||
"dependencies": { | ||
"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" | ||
} | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
905084
6
299
16227
6
4
+ Added@floating-ui/react@^0.26.16
+ Added@react-aria/focus@^3.17.1
+ 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
- Removedclient-only@0.0.1(transitive)