@headlessui/react
Advanced tools
Comparing version 0.0.0-insiders.fe876e2 to 0.0.0-insiders.ff41b27
@@ -1,81 +0,135 @@ | ||
import React, { Ref } from 'react'; | ||
import { Props } from '../../types'; | ||
import { PropsForFeatures } from '../../utils/render'; | ||
interface ComboboxRenderPropArg<T> { | ||
import React, { type ElementType, type Ref } from 'react'; | ||
import { type ByComparator } from '../../hooks/use-by-comparator.js'; | ||
import { type AnchorProps } from '../../internal/floating.js'; | ||
import type { EnsureArray, Props } from '../../types.js'; | ||
import { type HasDisplayName, type PropsForFeatures, type RefProp } from '../../utils/render.js'; | ||
import { type _internal_ComponentLabel } from '../label/label.js'; | ||
declare let DEFAULT_COMBOBOX_TAG: React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>; | ||
type ComboboxRenderPropArg<TValue, TActive = TValue> = { | ||
open: boolean; | ||
disabled: boolean; | ||
activeIndex: number | null; | ||
activeOption: T | null; | ||
} | ||
interface InputRenderPropArg { | ||
activeOption: TActive | null; | ||
value: TValue; | ||
}; | ||
export type ComboboxProps<TValue, TMultiple extends boolean | undefined, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG> = Props<TTag, ComboboxRenderPropArg<NoInfer<TValue>>, 'value' | 'defaultValue' | 'multiple' | 'onChange' | 'by', { | ||
value?: TMultiple extends true ? EnsureArray<TValue> : TValue; | ||
defaultValue?: TMultiple extends true ? EnsureArray<NoInfer<TValue>> : NoInfer<TValue>; | ||
onChange?(value: TMultiple extends true ? EnsureArray<NoInfer<TValue>> : NoInfer<TValue> | null): void; | ||
by?: ByComparator<TMultiple extends true ? EnsureArray<NoInfer<TValue>>[number] : NoInfer<TValue>>; | ||
/** @deprecated The `<Combobox />` is now nullable default */ | ||
nullable?: boolean; | ||
multiple?: TMultiple; | ||
disabled?: boolean; | ||
form?: string; | ||
name?: string; | ||
immediate?: boolean; | ||
virtual?: { | ||
options: NoInfer<TValue>[]; | ||
disabled?: (value: NoInfer<TValue>) => boolean; | ||
} | null; | ||
onClose?(): void; | ||
__demoMode?: boolean; | ||
}>; | ||
declare function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, boolean | undefined, TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_INPUT_TAG: "input"; | ||
type InputRenderPropArg = { | ||
open: boolean; | ||
disabled: boolean; | ||
} | ||
declare type InputPropsWeControl = 'id' | 'role' | 'type' | 'aria-labelledby' | 'aria-expanded' | 'aria-activedescendant' | 'onKeyDown' | 'onChange' | 'displayValue'; | ||
interface ButtonRenderPropArg { | ||
hover: boolean; | ||
focus: boolean; | ||
autofocus: boolean; | ||
}; | ||
type InputPropsWeControl = 'aria-activedescendant' | 'aria-autocomplete' | 'aria-controls' | 'aria-expanded' | 'aria-labelledby' | 'disabled' | 'role'; | ||
export type ComboboxInputProps<TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TType = string> = Props<TTag, InputRenderPropArg, InputPropsWeControl, { | ||
defaultValue?: TType; | ||
disabled?: boolean; | ||
displayValue?(item: TType): string; | ||
onChange?(event: React.ChangeEvent<HTMLInputElement>): void; | ||
autoFocus?: boolean; | ||
}>; | ||
declare function InputFn<TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TType = Parameters<typeof ComboboxRoot>[0]['value']>(props: ComboboxInputProps<TTag, TType>, ref: Ref<HTMLInputElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
declare let DEFAULT_BUTTON_TAG: "button"; | ||
type ButtonRenderPropArg = { | ||
open: boolean; | ||
active: boolean; | ||
disabled: boolean; | ||
} | ||
declare type ButtonPropsWeControl = 'id' | 'type' | 'tabIndex' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded' | 'aria-labelledby' | 'disabled' | 'onClick' | 'onKeyDown'; | ||
interface LabelRenderPropArg { | ||
value: any; | ||
focus: boolean; | ||
hover: boolean; | ||
}; | ||
type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded' | 'aria-haspopup' | 'aria-labelledby' | 'disabled' | 'tabIndex'; | ||
export type ComboboxButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, { | ||
autoFocus?: boolean; | ||
disabled?: boolean; | ||
}>; | ||
declare function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ComboboxButtonProps<TTag>, ref: Ref<HTMLButtonElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
declare let DEFAULT_OPTIONS_TAG: "div"; | ||
type OptionsRenderPropArg = { | ||
open: boolean; | ||
disabled: boolean; | ||
} | ||
declare type LabelPropsWeControl = 'id' | 'ref' | 'onClick'; | ||
interface OptionsRenderPropArg { | ||
open: boolean; | ||
} | ||
declare type OptionsPropsWeControl = 'aria-activedescendant' | 'aria-labelledby' | 'hold' | 'id' | 'onKeyDown' | 'role' | 'tabIndex'; | ||
option: unknown; | ||
}; | ||
type OptionsPropsWeControl = 'aria-labelledby' | 'aria-multiselectable' | 'role' | 'tabIndex'; | ||
declare let OptionsRenderFeatures: number; | ||
interface OptionRenderPropArg { | ||
export type ComboboxOptionsProps<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl, PropsForFeatures<typeof OptionsRenderFeatures> & { | ||
hold?: boolean; | ||
anchor?: AnchorProps; | ||
portal?: boolean; | ||
modal?: boolean; | ||
transition?: boolean; | ||
}>; | ||
declare function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ComboboxOptionsProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_OPTION_TAG: "div"; | ||
type OptionRenderPropArg = { | ||
focus: boolean; | ||
/** @deprecated use `focus` instead */ | ||
active: boolean; | ||
selected: boolean; | ||
disabled: boolean; | ||
}; | ||
type OptionPropsWeControl = 'role' | 'tabIndex' | 'aria-disabled' | 'aria-selected'; | ||
export type ComboboxOptionProps<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, { | ||
disabled?: boolean; | ||
value: TType; | ||
order?: number; | ||
}>; | ||
declare function OptionFn<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = Parameters<typeof ComboboxRoot>[0]['value']>(props: ComboboxOptionProps<TTag, TType>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
export interface _internal_ComponentCombobox extends HasDisplayName { | ||
<TValue, TMultiple extends boolean | undefined = false, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, TMultiple, TTag> & RefProp<typeof ComboboxFn>): JSX.Element; | ||
} | ||
declare type ComboboxOptionPropsWeControl = 'id' | 'role' | 'tabIndex' | 'aria-disabled' | 'aria-selected' | 'onPointerLeave' | 'onMouseLeave' | 'onPointerMove' | 'onMouseMove'; | ||
export declare let Combobox: (<TTag extends React.ElementType<any> = React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>, TType = string, TActualType = TType extends (infer U)[] ? U : TType>(props: Props<TTag, ComboboxRenderPropArg<TType>, "value" | "name" | "disabled" | "onChange" | "nullable" | "multiple"> & { | ||
value: TType; | ||
onChange(value: TType): void; | ||
disabled?: boolean | undefined; | ||
__demoMode?: boolean | undefined; | ||
name?: string | undefined; | ||
nullable?: boolean | undefined; | ||
multiple?: boolean | undefined; | ||
}, ref: React.Ref<TTag>) => JSX.Element) & { | ||
displayName: string; | ||
} & { | ||
Input: (<TTag_1 extends React.ElementType<any> = "input", TType_1 = unknown>(props: Props<TTag_1, InputRenderPropArg, InputPropsWeControl> & { | ||
displayValue?(item: TType_1): string; | ||
onChange(event: React.ChangeEvent<HTMLInputElement>): void; | ||
}, ref: Ref<HTMLInputElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Button: (<TTag_2 extends React.ElementType<any> = "button">(props: Props<TTag_2, ButtonRenderPropArg, ButtonPropsWeControl>, ref: Ref<HTMLButtonElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Label: (<TTag_3 extends React.ElementType<any> = "label">(props: Props<TTag_3, LabelRenderPropArg, LabelPropsWeControl>, ref: Ref<HTMLLabelElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Options: (<TTag_4 extends React.ElementType<any> = "ul">(props: Props<TTag_4, OptionsRenderPropArg, OptionsPropsWeControl> & (({ | ||
static?: undefined; | ||
} & { | ||
unmount?: boolean | undefined; | ||
}) | ({ | ||
unmount?: undefined; | ||
} & { | ||
static?: boolean | undefined; | ||
})) & { | ||
hold?: boolean | undefined; | ||
}, ref: Ref<HTMLUListElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Option: (<TTag_5 extends React.ElementType<any> = "li", TType_2 = unknown>(props: Props<TTag_5, OptionRenderPropArg, "value" | ComboboxOptionPropsWeControl> & { | ||
disabled?: boolean | undefined; | ||
value: TType_2; | ||
}, ref: Ref<HTMLLIElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
export interface _internal_ComponentComboboxButton extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ComboboxButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentComboboxInput extends HasDisplayName { | ||
<TType, TTag extends ElementType = typeof DEFAULT_INPUT_TAG>(props: ComboboxInputProps<TTag, TType> & RefProp<typeof InputFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentComboboxLabel extends _internal_ComponentLabel { | ||
} | ||
export interface _internal_ComponentComboboxOptions extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ComboboxOptionsProps<TTag> & RefProp<typeof OptionsFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentComboboxOption extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = Parameters<typeof ComboboxRoot>[0]['value']>(props: ComboboxOptionProps<TTag, TType> & RefProp<typeof OptionFn>): JSX.Element; | ||
} | ||
declare let ComboboxRoot: _internal_ComponentCombobox; | ||
export declare let ComboboxButton: _internal_ComponentComboboxButton; | ||
export declare let ComboboxInput: _internal_ComponentComboboxInput; | ||
/** @deprecated use `<Label>` instead of `<ComboboxLabel>` */ | ||
export declare let ComboboxLabel: _internal_ComponentComboboxLabel; | ||
export declare let ComboboxOptions: _internal_ComponentComboboxOptions; | ||
export declare let ComboboxOption: _internal_ComponentComboboxOption; | ||
export declare let Combobox: _internal_ComponentCombobox & { | ||
/** @deprecated use `<ComboboxInput>` instead of `<Combobox.Input>` */ | ||
Input: _internal_ComponentComboboxInput; | ||
/** @deprecated use `<ComboboxButton>` instead of `<Combobox.Button>` */ | ||
Button: _internal_ComponentComboboxButton; | ||
/** @deprecated use `<Label>` instead of `<Combobox.Label>` */ | ||
Label: _internal_ComponentComboboxLabel; | ||
/** @deprecated use `<ComboboxOptions>` instead of `<Combobox.Options>` */ | ||
Options: _internal_ComponentComboboxOptions; | ||
/** @deprecated use `<ComboboxOption>` instead of `<Combobox.Option>` */ | ||
Option: _internal_ComponentComboboxOption; | ||
}; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import B,{Fragment as pe,createContext as $,createRef as K,useCallback as A,useContext as q,useMemo as D,useReducer as se,useRef as L}from"react";import{useDisposables as ne}from"../../hooks/use-disposables.js";import{useId as N}from"../../hooks/use-id.js";import{useIsoMorphicEffect as I}from"../../hooks/use-iso-morphic-effect.js";import{useComputed as X}from"../../hooks/use-computed.js";import{useSyncRefs as j}from"../../hooks/use-sync-refs.js";import{Features as re,forwardRefWithAs as k,render as V,compact as be}from"../../utils/render.js";import{match as E}from"../../utils/match.js";import{disposables as J}from"../../utils/disposables.js";import{Keys as P}from"../keyboard.js";import{Focus as C,calculateActiveIndex as de}from"../../utils/calculate-active-index.js";import{isDisabledReactIssue7711 as ce}from"../../utils/bugs.js";import{useOutsideClick as fe}from"../../hooks/use-outside-click.js";import{useOpenClosed as me,State as z,OpenClosedProvider as xe}from"../../internal/open-closed.js";import{useResolveButtonType as Te}from"../../hooks/use-resolve-button-type.js";import{useLatestValue as Oe}from"../../hooks/use-latest-value.js";import{useTreeWalker as ge}from"../../hooks/use-tree-walker.js";import{sortByDomNode as Ce}from"../../utils/focus-management.js";import{VisuallyHidden as Re}from"../../internal/visually-hidden.js";import{objectToFormEntries as ve}from"../../utils/form.js";var ye=(n=>(n[n.Open=0]="Open",n[n.Closed=1]="Closed",n))(ye||{}),Pe=(n=>(n[n.Single=0]="Single",n[n.Multi=1]="Multi",n))(Pe||{}),Se=(n=>(n[n.Pointer=0]="Pointer",n[n.Other=1]="Other",n))(Se||{}),Ae=(i=>(i[i.OpenCombobox=0]="OpenCombobox",i[i.CloseCombobox=1]="CloseCombobox",i[i.SetDisabled=2]="SetDisabled",i[i.GoToOption=3]="GoToOption",i[i.RegisterOption=4]="RegisterOption",i[i.UnregisterOption=5]="UnregisterOption",i))(Ae||{});function Q(o,a=n=>n){let n=o.activeOptionIndex!==null?o.options[o.activeOptionIndex]:null,e=Ce(a(o.options.slice()),t=>t.dataRef.current.domRef.current),l=n?e.indexOf(n):null;return l===-1&&(l=null),{options:e,activeOptionIndex:l}}let Ie={[1](o){return o.disabled||o.comboboxState===1?o:{...o,activeOptionIndex:null,comboboxState:1}},[0](o){if(o.disabled||o.comboboxState===0)return o;let a=o.activeOptionIndex,{value:n,mode:e}=o.comboboxPropsRef.current,l=o.options.findIndex(t=>{let i=t.dataRef.current.value;return E(e,{[1]:()=>n.includes(i),[0]:()=>n===i})});return l!==-1&&(a=l),{...o,comboboxState:0,activeOptionIndex:a}},[2](o,a){return o.disabled===a.disabled?o:{...o,disabled:a.disabled}},[3](o,a){var l;if(o.disabled||o.optionsRef.current&&!o.optionsPropsRef.current.static&&o.comboboxState===1)return o;let n=Q(o);if(n.activeOptionIndex===null){let t=n.options.findIndex(i=>!i.dataRef.current.disabled);t!==-1&&(n.activeOptionIndex=t)}let e=de(a,{resolveItems:()=>n.options,resolveActiveIndex:()=>n.activeOptionIndex,resolveId:t=>t.id,resolveDisabled:t=>t.dataRef.current.disabled});return{...o,...n,activeOptionIndex:e,activationTrigger:(l=a.trigger)!=null?l:1}},[4]:(o,a)=>{let n={id:a.id,dataRef:a.dataRef},e=Q(o,t=>[...t,n]);if(o.activeOptionIndex===null){let{value:t,mode:i}=o.comboboxPropsRef.current,r=a.dataRef.current.value;E(i,{[1]:()=>t.includes(r),[0]:()=>t===r})&&(e.activeOptionIndex=e.options.indexOf(n))}let l={...o,...e,activationTrigger:1};return o.comboboxPropsRef.current.__demoMode&&o.comboboxPropsRef.current.value===void 0&&(l.activeOptionIndex=0),l},[5]:(o,a)=>{let n=Q(o,e=>{let l=e.findIndex(t=>t.id===a.id);return l!==-1&&e.splice(l,1),e});return{...o,...n,activationTrigger:1}}},Y=$(null);Y.displayName="ComboboxContext";function U(o){let a=q(Y);if(a===null){let n=new Error(`<${o} /> is missing a parent <Combobox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(n,U),n}return a}let Z=$(null);Z.displayName="ComboboxActions";function W(){let o=q(Z);if(o===null){let a=new Error("ComboboxActions is missing a parent <Combobox /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(a,W),a}return o}let ee=$(null);ee.displayName="ComboboxData";function G(){let o=q(ee);if(o===null){let a=new Error("ComboboxData is missing a parent <Combobox /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(a,G),a}return o}function Me(o,a){return E(a.type,Ie,o,a)}let De=pe,Ee=k(function(a,n){let{name:e,value:l,onChange:t,disabled:i=!1,__demoMode:r=!1,nullable:u=!1,multiple:p=!1,...x}=a,R=L(!1),c=L({value:l,mode:p?1:0,onChange:t,nullable:u,__demoMode:r});c.current.value=l,c.current.mode=p?1:0,c.current.nullable=u;let O=L({static:!1,hold:!1}),v=L({displayValue:void 0}),S=se(Me,{comboboxState:r?0:1,comboboxPropsRef:c,optionsPropsRef:O,inputPropsRef:v,labelRef:K(),inputRef:K(),buttonRef:K(),optionsRef:K(),disabled:i,options:[],activeOptionIndex:null,activationTrigger:1}),[{comboboxState:s,options:b,activeOptionIndex:M,optionsRef:F,inputRef:y,buttonRef:_},d]=S,f=D(()=>({value:l,mode:p?1:0,get activeOptionIndex(){if(R.current&&M===null&&b.length>0){let m=b.findIndex(T=>!T.dataRef.current.disabled);if(m!==-1)return m}return M}}),[l,M,b]),g=f.activeOptionIndex;I(()=>{c.current.onChange=m=>E(f.mode,{[0](){return t(m)},[1](){let T=f.value.slice(),h=T.indexOf(m);return h===-1?T.push(m):T.splice(h,1),t(T)}})},[f,t,c,f]),I(()=>d({type:2,disabled:i}),[i]),fe([_,y,F],()=>{s===0&&d({type:1})});let H=g===null?null:b[g].dataRef.current.value,ie=D(()=>({open:s===0,disabled:i,activeIndex:g,activeOption:H}),[s,i,b,g]),w=A(()=>{var T;if(!y.current)return;let m=v.current.displayValue;typeof m=="function"?y.current.value=(T=m(l))!=null?T:"":typeof l=="string"?y.current.value=l:y.current.value=""},[l,y,v]),oe=A(m=>{let T=b.find(ue=>ue.id===m);if(!T)return;let{dataRef:h}=T;c.current.onChange(h.current.value),w()},[b,c,y]),te=A(()=>{if(g!==null){let{dataRef:m,id:T}=b[g];c.current.onChange(m.current.value),w(),d({type:3,focus:C.Specific,id:T})}},[g,b,c,y]),ae=D(()=>({selectOption:oe,selectActiveOption:te,openCombobox(){d({type:0}),R.current=!0},closeCombobox(){d({type:1}),R.current=!1},goToOption(m,T,h){return R.current=!1,m===C.Specific?d({type:3,focus:C.Specific,id:T,trigger:h}):d({type:3,focus:m,trigger:h})},registerOption(m,T){return d({type:4,id:m,dataRef:T}),()=>d({type:5,id:m})}}),[oe,te,d]);I(()=>{s===1&&w()},[w,s]),I(w,[w]);let le=n===null?{}:{ref:n};return B.createElement(Z.Provider,{value:ae},B.createElement(ee.Provider,{value:f},B.createElement(Y.Provider,{value:S},B.createElement(xe,{value:E(s,{[0]:z.Open,[1]:z.Closed})},e!=null&&l!=null&&ve({[e]:l}).map(([m,T])=>B.createElement(Re,{...be({key:m,as:"input",type:"hidden",hidden:!0,readOnly:!0,name:m,value:T})})),V({ourProps:le,theirProps:x,slot:ie,defaultTag:De,name:"Combobox"})))))}),he="input",Le=k(function(a,n){var y,_;let{value:e,onChange:l,displayValue:t,...i}=a,[r]=U("Combobox.Input"),u=G(),p=W(),x=j(r.inputRef,n),R=r.inputPropsRef,c=`headlessui-combobox-input-${N()}`,O=ne(),v=Oe(l);I(()=>{R.current.displayValue=t},[t,R]);let S=A(d=>{switch(d.key){case P.Backspace:case P.Delete:if(u.mode!==0||!r.comboboxPropsRef.current.nullable)return;let f=d.currentTarget;O.requestAnimationFrame(()=>{f.value===""&&(r.comboboxPropsRef.current.onChange(null),r.optionsRef.current&&(r.optionsRef.current.scrollTop=0),p.goToOption(C.Nothing))});break;case P.Enter:if(r.comboboxState!==0)return;if(d.preventDefault(),d.stopPropagation(),u.activeOptionIndex===null){p.closeCombobox();return}p.selectActiveOption(),u.mode===0&&p.closeCombobox();break;case P.ArrowDown:return d.preventDefault(),d.stopPropagation(),E(r.comboboxState,{[0]:()=>{p.goToOption(C.Next)},[1]:()=>{p.openCombobox(),O.nextFrame(()=>{u.value||p.goToOption(C.Next)})}});case P.ArrowUp:return d.preventDefault(),d.stopPropagation(),E(r.comboboxState,{[0]:()=>{p.goToOption(C.Previous)},[1]:()=>{p.openCombobox(),O.nextFrame(()=>{u.value||p.goToOption(C.Last)})}});case P.Home:case P.PageUp:return d.preventDefault(),d.stopPropagation(),p.goToOption(C.First);case P.End:case P.PageDown:return d.preventDefault(),d.stopPropagation(),p.goToOption(C.Last);case P.Escape:return d.preventDefault(),r.optionsRef.current&&!r.optionsPropsRef.current.static&&d.stopPropagation(),p.closeCombobox();case P.Tab:p.selectActiveOption(),p.closeCombobox();break}},[O,r,p,u]),s=A(d=>{var f;p.openCombobox(),(f=v.current)==null||f.call(v,d)},[p,v]),b=X(()=>{if(!!r.labelRef.current)return[r.labelRef.current.id].join(" ")},[r.labelRef.current]),M=D(()=>({open:r.comboboxState===0,disabled:r.disabled}),[r]),F={ref:x,id:c,role:"combobox",type:"text","aria-controls":(y=r.optionsRef.current)==null?void 0:y.id,"aria-expanded":r.disabled?void 0:r.comboboxState===0,"aria-activedescendant":u.activeOptionIndex===null||(_=r.options[u.activeOptionIndex])==null?void 0:_.id,"aria-multiselectable":u.mode===1?!0:void 0,"aria-labelledby":b,disabled:r.disabled,onKeyDown:S,onChange:s};return V({ourProps:F,theirProps:i,slot:M,defaultTag:he,name:"Combobox.Input"})}),Fe="button",_e=k(function(a,n){var S;let[e]=U("Combobox.Button"),l=G(),t=W(),i=j(e.buttonRef,n),r=`headlessui-combobox-button-${N()}`,u=ne(),p=A(s=>{switch(s.key){case P.ArrowDown:return s.preventDefault(),s.stopPropagation(),e.comboboxState===1&&(t.openCombobox(),u.nextFrame(()=>{l.value||t.goToOption(C.First)})),u.nextFrame(()=>{var b;return(b=e.inputRef.current)==null?void 0:b.focus({preventScroll:!0})});case P.ArrowUp:return s.preventDefault(),s.stopPropagation(),e.comboboxState===1&&(t.openCombobox(),u.nextFrame(()=>{l.value||t.goToOption(C.Last)})),u.nextFrame(()=>{var b;return(b=e.inputRef.current)==null?void 0:b.focus({preventScroll:!0})});case P.Escape:return s.preventDefault(),e.optionsRef.current&&!e.optionsPropsRef.current.static&&s.stopPropagation(),t.closeCombobox(),u.nextFrame(()=>{var b;return(b=e.inputRef.current)==null?void 0:b.focus({preventScroll:!0})});default:return}},[u,e,t,l]),x=A(s=>{if(ce(s.currentTarget))return s.preventDefault();e.comboboxState===0?t.closeCombobox():(s.preventDefault(),t.openCombobox()),u.nextFrame(()=>{var b;return(b=e.inputRef.current)==null?void 0:b.focus({preventScroll:!0})})},[t,u,e]),R=X(()=>{if(!!e.labelRef.current)return[e.labelRef.current.id,r].join(" ")},[e.labelRef.current,r]),c=D(()=>({open:e.comboboxState===0,disabled:e.disabled}),[e]),O=a,v={ref:i,id:r,type:Te(a,e.buttonRef),tabIndex:-1,"aria-haspopup":!0,"aria-controls":(S=e.optionsRef.current)==null?void 0:S.id,"aria-expanded":e.disabled?void 0:e.comboboxState===0,"aria-labelledby":R,disabled:e.disabled,onClick:x,onKeyDown:p};return V({ourProps:v,theirProps:O,slot:c,defaultTag:Fe,name:"Combobox.Button"})}),we="label",ke=k(function(a,n){let[e]=U("Combobox.Label"),l=`headlessui-combobox-label-${N()}`,t=j(e.labelRef,n),i=A(()=>{var x;return(x=e.inputRef.current)==null?void 0:x.focus({preventScroll:!0})},[e.inputRef]),r=D(()=>({open:e.comboboxState===0,disabled:e.disabled}),[e]);return V({ourProps:{ref:t,id:l,onClick:i},theirProps:a,slot:r,defaultTag:we,name:"Combobox.Label"})}),Ve="ul",Ue=re.RenderStrategy|re.Static,Be=k(function(a,n){var S;let{hold:e=!1,...l}=a,[t]=U("Combobox.Options"),i=G(),{optionsPropsRef:r}=t,u=j(t.optionsRef,n),p=`headlessui-combobox-options-${N()}`,x=me(),R=(()=>x!==null?x===z.Open:t.comboboxState===0)();I(()=>{var s;r.current.static=(s=a.static)!=null?s:!1},[r,a.static]),I(()=>{r.current.hold=e},[e,r]),ge({container:t.optionsRef.current,enabled:t.comboboxState===0,accept(s){return s.getAttribute("role")==="option"?NodeFilter.FILTER_REJECT:s.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(s){s.setAttribute("role","none")}});let c=X(()=>{var s,b,M;return(M=(s=t.labelRef.current)==null?void 0:s.id)!=null?M:(b=t.buttonRef.current)==null?void 0:b.id},[t.labelRef.current,t.buttonRef.current]),O=D(()=>({open:t.comboboxState===0}),[t]),v={"aria-activedescendant":i.activeOptionIndex===null||(S=t.options[i.activeOptionIndex])==null?void 0:S.id,"aria-labelledby":c,role:"listbox",id:p,ref:u};return V({ourProps:v,theirProps:l,slot:O,defaultTag:Ve,features:Ue,visible:R,name:"Combobox.Options"})}),Ne="li",je=k(function(a,n){let{disabled:e=!1,value:l,...t}=a,[i]=U("Combobox.Option"),r=G(),u=W(),p=`headlessui-combobox-option-${N()}`,x=r.activeOptionIndex!==null?i.options[r.activeOptionIndex].id===p:!1,R=E(r.mode,{[1]:()=>r.value.includes(l),[0]:()=>r.value===l}),c=L(null),O=L({disabled:e,value:l,domRef:c}),v=j(n,c);I(()=>{O.current.disabled=e},[O,e]),I(()=>{O.current.value=l},[O,l]),I(()=>{var f,g;O.current.textValue=(g=(f=c.current)==null?void 0:f.textContent)==null?void 0:g.toLowerCase()},[O,c]);let S=A(()=>u.selectOption(p),[u,p]);I(()=>u.registerOption(p,O),[O,p]);let s=L(!i.comboboxPropsRef.current.__demoMode);I(()=>{if(!i.comboboxPropsRef.current.__demoMode)return;let f=J();return f.requestAnimationFrame(()=>{s.current=!0}),f.dispose},[]),I(()=>{if(i.comboboxState!==0||!x||!s.current||i.activationTrigger===0)return;let f=J();return f.requestAnimationFrame(()=>{var g,H;(H=(g=c.current)==null?void 0:g.scrollIntoView)==null||H.call(g,{block:"nearest"})}),f.dispose},[c,x,i.comboboxState,i.activationTrigger,r.activeOptionIndex]);let b=A(f=>{if(e)return f.preventDefault();S(),r.mode===0&&(u.closeCombobox(),J().nextFrame(()=>{var g;return(g=i.inputRef.current)==null?void 0:g.focus({preventScroll:!0})}))},[u,i.inputRef,e,S]),M=A(()=>{if(e)return u.goToOption(C.Nothing);u.goToOption(C.Specific,p)},[e,p,u]),F=A(()=>{e||x||u.goToOption(C.Specific,p,0)},[e,x,p,u]),y=A(()=>{e||!x||i.optionsPropsRef.current.hold||u.goToOption(C.Nothing)},[e,x,u,i.comboboxState,i.comboboxPropsRef]),_=D(()=>({active:x,selected:R,disabled:e}),[x,R,e]);return V({ourProps:{id:p,ref:v,role:"option",tabIndex:e===!0?void 0:-1,"aria-disabled":e===!0?!0:void 0,"aria-selected":R===!0?!0:void 0,disabled:void 0,onClick:b,onFocus:M,onPointerMove:F,onMouseMove:F,onPointerLeave:y,onMouseLeave:y},theirProps:t,slot:_,defaultTag:Ne,name:"Combobox.Option"})}),go=Object.assign(Ee,{Input:Le,Button:_e,Label:ke,Options:Be,Option:je});export{go as Combobox}; | ||
"use client";import{useFocusRing as ye}from"@react-aria/focus";import{useHover as Ce}from"@react-aria/interactions";import{useVirtualizer as ke}from"@tanstack/react-virtual";import 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'; | ||
import React, { type ElementType, type ReactNode, type Ref } from 'react'; | ||
import type { Props } from '../../types.js'; | ||
import { type HasDisplayName, type RefProp } from '../../utils/render.js'; | ||
interface SharedData { | ||
@@ -8,4 +9,6 @@ slot?: {}; | ||
} | ||
export declare function useDescribedBy(): string | undefined; | ||
interface DescriptionProviderProps extends SharedData { | ||
children: ReactNode; | ||
value?: string | undefined; | ||
} | ||
@@ -16,5 +19,9 @@ export declare function useDescriptions(): [ | ||
]; | ||
export declare let Description: (<TTag extends React.ElementType<any> = "p">(props: Props<TTag, {}, "id">, ref: Ref<HTMLParagraphElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
declare let DEFAULT_DESCRIPTION_TAG: "p"; | ||
export type DescriptionProps<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG> = Props<TTag>; | ||
declare function DescriptionFn<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG>(props: DescriptionProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
export interface _internal_ComponentDescription extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG>(props: DescriptionProps<TTag> & RefProp<typeof DescriptionFn>): JSX.Element; | ||
} | ||
export declare let Description: _internal_ComponentDescription; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import f,{createContext as m,useCallback as D,useContext as P,useMemo as p,useState as T}from"react";import{useId as g}from"../../hooks/use-id.js";import{forwardRefWithAs as x,render as h}from"../../utils/render.js";import{useIsoMorphicEffect as E}from"../../hooks/use-iso-morphic-effect.js";import{useSyncRefs as S}from"../../hooks/use-sync-refs.js";let d=m(null);function u(){let r=P(d);if(r===null){let t=new Error("You used a <Description /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(t,u),t}return r}function M(){let[r,t]=T([]);return[r.length>0?r.join(" "):void 0,p(()=>function(e){let i=D(o=>(t(n=>[...n,o]),()=>t(n=>{let a=n.slice(),l=a.indexOf(o);return l!==-1&&a.splice(l,1),a})),[]),s=p(()=>({register:i,slot:e.slot,name:e.name,props:e.props}),[i,e.slot,e.name,e.props]);return f.createElement(d.Provider,{value:s},e.children)},[t])]}let v="p",O=x(function(t,c){let e=u(),i=`headlessui-description-${g()}`,s=S(c);E(()=>e.register(i),[i,e.register]);let o=t,n={ref:s,...e.props,id:i};return h({ourProps:n,theirProps:o,slot:e.slot||{},defaultTag:v,name:e.name||"Description"})});export{O as Description,M as useDescriptions}; | ||
"use client";import m,{createContext as T,useContext as u,useMemo as c,useState as P}from"react";import{useEvent as g}from'../../hooks/use-event.js';import{useId as x}from'../../hooks/use-id.js';import{useIsoMorphicEffect as y}from'../../hooks/use-iso-morphic-effect.js';import{useSyncRefs as E}from'../../hooks/use-sync-refs.js';import{useDisabled as v}from'../../internal/disabled.js';import{forwardRefWithAs as R,render as I}from'../../utils/render.js';let a=T(null);a.displayName="DescriptionContext";function f(){let r=u(a);if(r===null){let e=new Error("You used a <Description /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(e,f),e}return r}function G(){var r,e;return(e=(r=u(a))==null?void 0:r.value)!=null?e:void 0}function U(){let[r,e]=P([]);return[r.length>0?r.join(" "):void 0,c(()=>function(t){let i=g(n=>(e(s=>[...s,n]),()=>e(s=>{let o=s.slice(),p=o.indexOf(n);return p!==-1&&o.splice(p,1),o}))),l=c(()=>({register:i,slot:t.slot,name:t.name,props:t.props,value:t.value}),[i,t.slot,t.name,t.props,t.value]);return m.createElement(a.Provider,{value:l},t.children)},[e])]}let S="p";function C(r,e){let d=x(),t=v(),{id:i=`headlessui-description-${d}`,...l}=r,n=f(),s=E(e);y(()=>n.register(i),[i,n.register]);let o=t||!1,p=c(()=>({...n.slot,disabled:o}),[n.slot,o]),D={ref:s,...n.props,id:i};return I({ourProps:D,theirProps:l,slot:p,defaultTag:S,name:n.name||"Description"})}let _=R(C),w=Object.assign(_,{});export{w as Description,G as useDescribedBy,U as useDescriptions}; |
@@ -1,56 +0,70 @@ | ||
import React, { MutableRefObject, Ref } from 'react'; | ||
import { Props } from '../../types'; | ||
import { PropsForFeatures } from '../../utils/render'; | ||
interface DialogRenderPropArg { | ||
import React, { type ElementType, type MutableRefObject, type Ref } from 'react'; | ||
import type { Props } from '../../types.js'; | ||
import { type HasDisplayName, type PropsForFeatures, type RefProp } from '../../utils/render.js'; | ||
import { type _internal_ComponentDescription } from '../description/description.js'; | ||
declare let DEFAULT_DIALOG_TAG: "div"; | ||
type DialogRenderPropArg = { | ||
open: boolean; | ||
} | ||
declare type DialogPropsWeControl = 'id' | 'role' | 'aria-modal' | 'aria-describedby' | 'aria-labelledby' | 'onClick'; | ||
}; | ||
type DialogPropsWeControl = 'aria-describedby' | 'aria-labelledby' | 'aria-modal'; | ||
declare let DialogRenderFeatures: number; | ||
interface OverlayRenderPropArg { | ||
export type DialogProps<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> = Props<TTag, DialogRenderPropArg, DialogPropsWeControl, PropsForFeatures<typeof DialogRenderFeatures> & { | ||
open?: boolean; | ||
onClose(value: boolean): void; | ||
initialFocus?: MutableRefObject<HTMLElement | null>; | ||
role?: 'dialog' | 'alertdialog'; | ||
autoFocus?: boolean; | ||
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 = 'id' | '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 = 'id' | '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; | ||
} | ||
declare type TitlePropsWeControl = 'id'; | ||
export declare let Dialog: (<TTag extends React.ElementType<any> = "div">(props: Props<TTag, DialogRenderPropArg, DialogPropsWeControl> & (({ | ||
static?: undefined; | ||
} & { | ||
unmount?: boolean | undefined; | ||
}) | ({ | ||
unmount?: undefined; | ||
} & { | ||
static?: boolean | undefined; | ||
})) & { | ||
open?: boolean | undefined; | ||
onClose(value: boolean): void; | ||
initialFocus?: React.MutableRefObject<HTMLElement | null> | undefined; | ||
__demoMode?: boolean | undefined; | ||
}, ref: Ref<HTMLDivElement>) => JSX.Element) & { | ||
displayName: string; | ||
} & { | ||
Backdrop: (<TTag_1 extends React.ElementType<any> = "div">(props: Props<TTag_1, BackdropRenderPropArg, BackdropPropsWeControl>, ref: Ref<HTMLDivElement>) => JSX.Element) & { | ||
displayName: string; | ||
}; | ||
Panel: (<TTag_2 extends React.ElementType<any> = "div">(props: Props<TTag_2, PanelRenderPropArg, "1D45E01E-AF44-47C4-988A-19A94EBAF55C">, ref: Ref<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Overlay: (<TTag_3 extends React.ElementType<any> = "div">(props: Props<TTag_3, OverlayRenderPropArg, OverlayPropsWeControl>, ref: Ref<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Title: (<TTag_4 extends React.ElementType<any> = "h2">(props: Props<TTag_4, TitleRenderPropArg, "id">, ref: Ref<HTMLHeadingElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Description: (<TTag_5 extends React.ElementType<any> = "p">(props: Props<TTag_5, {}, "id">, ref: React.Ref<HTMLParagraphElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
export interface _internal_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 T,{createContext as le,useCallback as w,useContext as N,useEffect as F,useMemo as h,useReducer as ne,useRef as j,useState as ie,createRef as ae}from"react";import{match as L}from"../../utils/match.js";import{forwardRefWithAs as v,render as A,Features as V}from"../../utils/render.js";import{useSyncRefs as E}from"../../hooks/use-sync-refs.js";import{Keys as se}from"../keyboard.js";import{isDisabledReactIssue7711 as pe}from"../../utils/bugs.js";import{useId as b}from"../../hooks/use-id.js";import{useFocusTrap as de,Features as k}from"../../hooks/use-focus-trap.js";import{useInertOthers as ue}from"../../hooks/use-inert-others.js";import{Portal as M}from"../../components/portal/portal.js";import{ForcePortalRoot as I}from"../../internal/portal-force-root.js";import{Description as fe,useDescriptions as ge}from"../description/description.js";import{useOpenClosed as ce,State as K}from"../../internal/open-closed.js";import{useServerHandoffComplete as Te}from"../../hooks/use-server-handoff-complete.js";import{StackProvider as me,StackMessage as q}from"../../internal/stack-context.js";import{useOutsideClick as De,Features as Pe}from"../../hooks/use-outside-click.js";import{getOwnerDocument as ye}from"../../utils/owner.js";import{useOwnerDocument as Re}from"../../hooks/use-owner.js";import{useEventListener as he}from"../../hooks/use-event-listener.js";var ve=(t=>(t[t.Open=0]="Open",t[t.Closed=1]="Closed",t))(ve||{}),Ae=(e=>(e[e.SetTitleId=0]="SetTitleId",e))(Ae||{});let Ee={[0](a,e){return a.titleId===e.id?a:{...a,titleId:e.id}}},_=le(null);_.displayName="DialogContext";function C(a){let e=N(_);if(e===null){let t=new Error(`<${a} /> is missing a parent <Dialog /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(t,C),t}return e}function be(a,e){return L(e.type,Ee,a,e)}let Ce="div",Oe=V.RenderStrategy|V.Static,Se=v(function(e,t){let{open:o,onClose:l,initialFocus:p,__demoMode:f=!1,...g}=e,[m,D]=ie(0),O=ce();o===void 0&&O!==null&&(o=L(O,{[K.Open]:!0,[K.Closed]:!1}));let u=j(new Set),d=j(null),z=E(d,t),P=Re(d),x=e.hasOwnProperty("open")||O!==null,G=e.hasOwnProperty("onClose");if(!x&&!G)throw new Error("You have to provide an `open` and an `onClose` prop to the `Dialog` component.");if(!x)throw new Error("You provided an `onClose` prop to the `Dialog`, but forgot an `open` prop.");if(!G)throw new Error("You provided an `open` prop to the `Dialog`, but forgot an `onClose` prop.");if(typeof o!="boolean")throw new Error(`You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${o}`);if(typeof l!="function")throw new Error(`You provided an \`onClose\` prop to the \`Dialog\`, but the value is not a function. Received: ${l}`);let i=o?0:1,[y,B]=ne(be,{titleId:null,descriptionId:null,panelRef:ae()}),R=w(()=>l(!1),[l]),H=w(r=>B({type:0,id:r}),[B]),W=Te()?f?!1:i===0:!1,S=m>1,U=N(_)!==null,J=de(d,W?L(S?"parent":"leaf",{parent:k.RestoreFocus,leaf:k.All&~k.FocusLock}):k.None,{initialFocus:p,containers:u});ue(d,S?W:!1),De(()=>{var n,s;return[...Array.from((n=P==null?void 0:P.querySelectorAll("body > *"))!=null?n:[]).filter(c=>!(!(c instanceof HTMLElement)||c.contains(J.current)||y.panelRef.current&&c.contains(y.panelRef.current))),(s=y.panelRef.current)!=null?s:d.current]},()=>{i===0&&(S||R())},Pe.IgnoreScrollbars),he(P==null?void 0:P.defaultView,"keydown",r=>{r.key===se.Escape&&i===0&&(S||(r.preventDefault(),r.stopPropagation(),R()))}),F(()=>{var Y;if(i!==0||U)return;let r=ye(d);if(!r)return;let n=r.documentElement,s=(Y=r.defaultView)!=null?Y:window,c=n.style.overflow,oe=n.style.paddingRight,re=s.innerWidth-n.clientWidth;return n.style.overflow="hidden",n.style.paddingRight=`${re}px`,()=>{n.style.overflow=c,n.style.paddingRight=oe}},[i,U]),F(()=>{if(i!==0||!d.current)return;let r=new IntersectionObserver(n=>{for(let s of n)s.boundingClientRect.x===0&&s.boundingClientRect.y===0&&s.boundingClientRect.width===0&&s.boundingClientRect.height===0&&R()});return r.observe(d.current),()=>r.disconnect()},[i,d,R]);let[Q,X]=ge(),Z=`headlessui-dialog-${b()}`,ee=h(()=>[{dialogState:i,close:R,setTitleId:H},y],[i,y,R,H]),$=h(()=>({open:i===0}),[i]),te={ref:z,id:Z,role:"dialog","aria-modal":i===0?!0:void 0,"aria-labelledby":y.titleId,"aria-describedby":Q,onClick(r){r.stopPropagation()}};return T.createElement(me,{type:"Dialog",element:d,onUpdate:w((r,n,s)=>{n==="Dialog"&&L(r,{[q.Add](){u.current.add(s),D(c=>c+1)},[q.Remove](){u.current.add(s),D(c=>c-1)}})},[])},T.createElement(I,{force:!0},T.createElement(M,null,T.createElement(_.Provider,{value:ee},T.createElement(M.Group,{target:d},T.createElement(I,{force:!1},T.createElement(X,{slot:$,name:"Dialog.Description"},A({ourProps:te,theirProps:g,slot:$,defaultTag:Ce,features:Oe,visible:i===0,name:"Dialog"}))))))))}),we="div",Fe=v(function(e,t){let[{dialogState:o,close:l}]=C("Dialog.Overlay"),p=E(t),f=`headlessui-dialog-overlay-${b()}`,g=w(u=>{if(u.target===u.currentTarget){if(pe(u.currentTarget))return u.preventDefault();u.preventDefault(),u.stopPropagation(),l()}},[l]),m=h(()=>({open:o===0}),[o]);return A({ourProps:{ref:p,id:f,"aria-hidden":!0,onClick:g},theirProps:e,slot:m,defaultTag:we,name:"Dialog.Overlay"})}),Le="div",ke=v(function(e,t){let[{dialogState:o},l]=C("Dialog.Backdrop"),p=E(t),f=`headlessui-dialog-backdrop-${b()}`;F(()=>{if(l.panelRef.current===null)throw new Error("A <Dialog.Backdrop /> component is being used, but a <Dialog.Panel /> component is missing.")},[l.panelRef]);let g=h(()=>({open:o===0}),[o]);return T.createElement(I,{force:!0},T.createElement(M,null,A({ourProps:{ref:p,id:f,"aria-hidden":!0},theirProps:e,slot:g,defaultTag:Le,name:"Dialog.Backdrop"})))}),_e="div",Me=v(function(e,t){let[{dialogState:o},l]=C("Dialog.Panel"),p=E(t,l.panelRef),f=`headlessui-dialog-panel-${b()}`,g=h(()=>({open:o===0}),[o]);return A({ourProps:{ref:p,id:f},theirProps:e,slot:g,defaultTag:_e,name:"Dialog.Panel"})}),Ie="h2",xe=v(function(e,t){let[{dialogState:o,setTitleId:l}]=C("Dialog.Title"),p=`headlessui-dialog-title-${b()}`,f=E(t);F(()=>(l(p),()=>l(null)),[p,l]);let g=h(()=>({open:o===0}),[o]);return A({ourProps:{ref:f,id:p},theirProps:e,slot:g,defaultTag:Ie,name:"Dialog.Title"})}),ft=Object.assign(Se,{Backdrop:ke,Panel:Me,Overlay:Fe,Title:xe,Description:fe});export{ft as Dialog}; | ||
"use client";import n,{Fragment as H,createContext as re,createRef as le,useContext as ae,useEffect as ie,useMemo as y,useReducer as pe,useRef as B}from"react";import{useEscape as se}from'../../hooks/use-escape.js';import{useEvent as E}from'../../hooks/use-event.js';import{useId as h}from'../../hooks/use-id.js';import{useInertOthers as de}from'../../hooks/use-inert-others.js';import{useIsTouchDevice as ue}from'../../hooks/use-is-touch-device.js';import{useOnDisappear as Te}from'../../hooks/use-on-disappear.js';import{useOutsideClick as fe}from'../../hooks/use-outside-click.js';import{useOwnerDocument as ge}from'../../hooks/use-owner.js';import{useRootContainers as me}from'../../hooks/use-root-containers.js';import{useScrollLock as ce}from'../../hooks/use-scroll-lock.js';import{useServerHandoffComplete as De}from'../../hooks/use-server-handoff-complete.js';import{useSyncRefs as S}from'../../hooks/use-sync-refs.js';import{CloseProvider as Pe}from'../../internal/close-provider.js';import{HoistFormFields as ye}from'../../internal/form-fields.js';import{ResetOpenClosedProvider as Ee,State as R,useOpenClosed as U}from'../../internal/open-closed.js';import{ForcePortalRoot as N}from'../../internal/portal-force-root.js';import{match as Ae}from'../../utils/match.js';import{RenderFeatures as W,forwardRefWithAs as A,render as v}from'../../utils/render.js';import{Description as $,useDescriptions as _e}from'../description/description.js';import{FocusTrap as Ce,FocusTrapFeatures as _}from'../focus-trap/focus-trap.js';import{Portal as Fe,PortalGroup as be,useNestedPortals as Re}from'../portal/portal.js';import{Transition as ve,TransitionChild as j}from'../transition/transition.js';var xe=(o=>(o[o.Open=0]="Open",o[o.Closed=1]="Closed",o))(xe||{}),Le=(t=>(t[t.SetTitleId=0]="SetTitleId",t))(Le||{});let Oe={[0](e,t){return e.titleId===t.id?e:{...e,titleId:t.id}}},I=re(null);I.displayName="DialogContext";function x(e){let t=ae(I);if(t===null){let o=new Error(`<${e} /> is missing a parent <Dialog /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,x),o}return t}function he(e,t){return Ae(t.type,Oe,e,t)}let Y=A(function(t,o){let a=h(),{id:i=`headlessui-dialog-${a}`,open:l,onClose:p,initialFocus:d,role:s="dialog",autoFocus:C=!0,__demoMode:f=!1,...G}=t,L=B(!1);s=function(){return s==="dialog"||s==="alertdialog"?s:(L.current||(L.current=!0,console.warn(`Invalid role [${s}] passed to <Dialog />. Only \`dialog\` and and \`alertdialog\` are supported. Using \`dialog\` instead.`)),"dialog")}();let g=U();l===void 0&&g!==null&&(l=(g&R.Open)===R.Open);let u=B(null),J=S(u,o),F=ge(u),T=l?0:1,[b,K]=pe(he,{titleId:null,descriptionId:null,panelRef:le()}),m=E(()=>p(!1)),k=E(r=>K({type:0,id:r})),c=De()?T===0:!1,[X,V]=Re(),q={get current(){var r;return(r=b.panelRef.current)!=null?r:u.current}},{resolveContainers:O,mainTreeNodeRef:z,MainTreeNode:Q}=me({portals:X,defaultContainers:[q]}),M=g!==null?(g&R.Closing)===R.Closing:!1;de(f||M?!1:c,{allowed:E(()=>{var r,P;return[(P=(r=u.current)==null?void 0:r.closest("[data-headlessui-portal]"))!=null?P:null]}),disallowed:E(()=>{var r,P;return[(P=(r=z.current)==null?void 0:r.closest("body > *:not(#headlessui-portal-root)"))!=null?P:null]})}),fe(c,O,r=>{r.preventDefault(),m()}),se(c,F==null?void 0:F.defaultView,r=>{r.preventDefault(),r.stopPropagation(),document.activeElement&&"blur"in document.activeElement&&typeof document.activeElement.blur=="function"&&document.activeElement.blur(),m()}),ce(f||M?!1:c,F,O),Te(c,u,m);let[Z,ee]=_e(),te=y(()=>[{dialogState:T,close:m,setTitleId:k},b],[T,b,m,k]),w=y(()=>({open:T===0}),[T]),oe={ref:J,id:i,role:s,tabIndex:-1,"aria-modal":f?void 0:T===0?!0:void 0,"aria-labelledby":b.titleId,"aria-describedby":Z},ne=!ue(),D=_.None;return c&&!f&&(D|=_.RestoreFocus,D|=_.TabLock,C&&(D|=_.AutoFocus),ne&&(D|=_.InitialFocus)),n.createElement(Ee,null,n.createElement(N,{force:!0},n.createElement(Fe,null,n.createElement(I.Provider,{value:te},n.createElement(be,{target:u},n.createElement(N,{force:!1},n.createElement(ee,{slot:w},n.createElement(V,null,n.createElement(Ce,{initialFocus:d,initialFocusFallback:u,containers:O,features:D},n.createElement(Pe,{value:m},v({ourProps:oe,theirProps:G,slot:w,defaultTag:Se,features:Ie,visible:T===0,name:"Dialog"})))))))))),n.createElement(ye,null,n.createElement(Q,null)))}),Se="div",Ie=W.RenderStrategy|W.Static;function Ge(e,t){let{transition:o=!1,open:a,...i}=e,l=U(),p=e.hasOwnProperty("open")||l!==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(!l&&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!(l!==null)&&a!==void 0&&!i.static?n.createElement(ve,{show:a,transition:o,unmount:i.unmount},n.createElement(Y,{ref:t,...i})):n.createElement(Y,{ref:t,open:a,...i})}let ke="div";function Me(e,t){let o=h(),{id:a=`headlessui-dialog-panel-${o}`,transition:i=!1,...l}=e,[{dialogState:p},d]=x("Dialog.Panel"),s=S(t,d.panelRef),C=y(()=>({open:p===0}),[p]),f=E(g=>{g.stopPropagation()});return n.createElement(i?j:H,null,v({ourProps:{ref:s,id:a,onClick:f},theirProps:l,slot:C,defaultTag:ke,name:"Dialog.Panel"}))}let we="div";function He(e,t){let{transition:o=!1,...a}=e,[{dialogState:i}]=x("Dialog.Backdrop"),l=y(()=>({open:i===0}),[i]);return n.createElement(o?j:H,null,v({ourProps:{ref:t,"aria-hidden":!0},theirProps:a,slot:l,defaultTag:we,name:"Dialog.Backdrop"}))}let Be="h2";function Ue(e,t){let o=h(),{id:a=`headlessui-dialog-title-${o}`,...i}=e,[{dialogState:l,setTitleId:p}]=x("Dialog.Title"),d=S(t);ie(()=>(p(a),()=>p(null)),[a,p]);let s=y(()=>({open:l===0}),[l]);return v({ourProps:{ref:d,id:a},theirProps:i,slot:s,defaultTag:Be,name:"Dialog.Title"})}let Ne=A(Ge),We=A(Me),ct=A(He),$e=A(Ue),Dt=$,Pt=Object.assign(Ne,{Panel:We,Title:$e,Description:$});export{Pt as Dialog,ct as DialogBackdrop,Dt as DialogDescription,We as DialogPanel,$e as DialogTitle}; |
@@ -1,56 +0,59 @@ | ||
import React, { Ref, MutableRefObject } from 'react'; | ||
import { Props } from '../../types'; | ||
import { PropsForFeatures } from '../../utils/render'; | ||
interface DisclosureRenderPropArg { | ||
import React, { type ElementType, type MutableRefObject, type Ref } from 'react'; | ||
import type { Props } from '../../types.js'; | ||
import { type HasDisplayName, type PropsForFeatures, type RefProp } from '../../utils/render.js'; | ||
declare let DEFAULT_DISCLOSURE_TAG: React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>; | ||
type DisclosureRenderPropArg = { | ||
open: boolean; | ||
close(focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null>): void; | ||
} | ||
interface ButtonRenderPropArg { | ||
}; | ||
type DisclosurePropsWeControl = never; | ||
export type DisclosureProps<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG> = Props<TTag, DisclosureRenderPropArg, DisclosurePropsWeControl, { | ||
defaultOpen?: boolean; | ||
}>; | ||
declare function DisclosureFn<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG>(props: DisclosureProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_BUTTON_TAG: "button"; | ||
type ButtonRenderPropArg = { | ||
open: boolean; | ||
} | ||
declare type ButtonPropsWeControl = 'id' | 'type' | 'aria-expanded' | 'aria-controls' | 'onKeyDown' | 'onClick'; | ||
interface PanelRenderPropArg { | ||
hover: boolean; | ||
active: boolean; | ||
disabled: boolean; | ||
focus: boolean; | ||
autofocus: boolean; | ||
}; | ||
type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded'; | ||
export type DisclosureButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, { | ||
disabled?: boolean; | ||
autoFocus?: boolean; | ||
}>; | ||
declare function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: DisclosureButtonProps<TTag>, ref: Ref<HTMLButtonElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
declare let DEFAULT_PANEL_TAG: "div"; | ||
type PanelRenderPropArg = { | ||
open: boolean; | ||
close: (focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null>) => void; | ||
}; | ||
type DisclosurePanelPropsWeControl = never; | ||
declare let PanelRenderFeatures: number; | ||
export type DisclosurePanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, DisclosurePanelPropsWeControl, { | ||
transition?: boolean; | ||
} & PropsForFeatures<typeof PanelRenderFeatures>>; | ||
declare function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DisclosurePanelProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
export interface _internal_ComponentDisclosure extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG>(props: DisclosureProps<TTag> & RefProp<typeof DisclosureFn>): JSX.Element; | ||
} | ||
declare type PanelPropsWeControl = 'id'; | ||
declare let PanelRenderFeatures: number; | ||
export declare let Disclosure: (<TTag extends React.ElementType<any> = React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>>(props: Omit<import("../../types").PropsOf<TTag>, "as" | "children" | "refName" | "className"> & { | ||
as?: TTag | undefined; | ||
children?: React.ReactNode | ((bag: DisclosureRenderPropArg) => React.ReactElement<any, string | React.JSXElementConstructor<any>>); | ||
refName?: string | undefined; | ||
} & (import("../../types").PropsOf<TTag> extends { | ||
className?: any; | ||
} ? { | ||
className?: string | ((bag: DisclosureRenderPropArg) => string) | undefined; | ||
} : {}) & { | ||
defaultOpen?: boolean | undefined; | ||
}, ref: React.Ref<TTag>) => JSX.Element) & { | ||
displayName: string; | ||
} & { | ||
Button: (<TTag_1 extends React.ElementType<any> = "button">(props: Props<TTag_1, ButtonRenderPropArg, ButtonPropsWeControl>, ref: Ref<HTMLButtonElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Panel: (<TTag_2 extends React.ElementType<any> = "div">(props: Omit<import("../../types").PropsOf<TTag_2>, "id" | ("as" | "children" | "refName" | "className")> & { | ||
as?: TTag_2 | undefined; | ||
children?: React.ReactNode | ((bag: PanelRenderPropArg) => React.ReactElement<any, string | React.JSXElementConstructor<any>>); | ||
refName?: string | undefined; | ||
} & (import("../../types").PropsOf<TTag_2> extends { | ||
className?: any; | ||
} ? { | ||
className?: string | ((bag: PanelRenderPropArg) => string) | undefined; | ||
} : {}) & (({ | ||
static?: undefined; | ||
} & { | ||
unmount?: boolean | undefined; | ||
}) | ({ | ||
unmount?: undefined; | ||
} & { | ||
static?: boolean | undefined; | ||
})), ref: Ref<HTMLDivElement>) => JSX.Element) & { | ||
displayName: string; | ||
}; | ||
export interface _internal_ComponentDisclosureButton extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: DisclosureButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentDisclosurePanel extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DisclosurePanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element; | ||
} | ||
export declare let DisclosureButton: _internal_ComponentDisclosureButton; | ||
export declare let DisclosurePanel: _internal_ComponentDisclosurePanel; | ||
export declare let Disclosure: _internal_ComponentDisclosure & { | ||
/** @deprecated use `<DisclosureButton>` instead of `<Disclosure.Button>` */ | ||
Button: _internal_ComponentDisclosureButton; | ||
/** @deprecated use `<DisclosurePanel>` instead of `<Disclosure.Panel>` */ | ||
Panel: _internal_ComponentDisclosurePanel; | ||
}; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import m,{Fragment as j,createContext as k,useCallback as g,useContext as L,useEffect as R,useMemo as b,useReducer as N,useRef as E}from"react";import{match as O}from"../../utils/match.js";import{forwardRefWithAs as M,render as x,Features as F}from"../../utils/render.js";import{optionalRef as G,useSyncRefs as B}from"../../hooks/use-sync-refs.js";import{useId as _}from"../../hooks/use-id.js";import{Keys as S}from"../keyboard.js";import{isDisabledReactIssue7711 as W}from"../../utils/bugs.js";import{OpenClosedProvider as $,State as v,useOpenClosed as q}from"../../internal/open-closed.js";import{useResolveButtonType as z}from"../../hooks/use-resolve-button-type.js";import{getOwnerDocument as J}from"../../utils/owner.js";var Q=(o=>(o[o.Open=0]="Open",o[o.Closed=1]="Closed",o))(Q||{}),V=(l=>(l[l.ToggleDisclosure=0]="ToggleDisclosure",l[l.CloseDisclosure=1]="CloseDisclosure",l[l.SetButtonId=2]="SetButtonId",l[l.SetPanelId=3]="SetPanelId",l[l.LinkPanel=4]="LinkPanel",l[l.UnlinkPanel=5]="UnlinkPanel",l))(V||{});let X={[0]:e=>({...e,disclosureState:O(e.disclosureState,{[0]:1,[1]:0})}),[1]:e=>e.disclosureState===1?e:{...e,disclosureState:1},[4](e){return e.linkedPanel===!0?e:{...e,linkedPanel:!0}},[5](e){return e.linkedPanel===!1?e:{...e,linkedPanel:!1}},[2](e,t){return e.buttonId===t.buttonId?e:{...e,buttonId:t.buttonId}},[3](e,t){return e.panelId===t.panelId?e:{...e,panelId:t.panelId}}},h=k(null);h.displayName="DisclosureContext";function H(e){let t=L(h);if(t===null){let o=new Error(`<${e} /> is missing a parent <Disclosure /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,H),o}return t}let U=k(null);U.displayName="DisclosureAPIContext";function K(e){let t=L(U);if(t===null){let o=new Error(`<${e} /> is missing a parent <Disclosure /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,K),o}return t}let w=k(null);w.displayName="DisclosurePanelContext";function Y(){return L(w)}function Z(e,t){return O(t.type,X,e,t)}let ee=j,te=M(function(t,o){let{defaultOpen:n=!1,...r}=t,u=`headlessui-disclosure-button-${_()}`,l=`headlessui-disclosure-panel-${_()}`,a=E(null),D=B(o,G(f=>{a.current=f},t.as===void 0||t.as===m.Fragment)),P=E(null),y=E(null),d=N(Z,{disclosureState:n?0:1,linkedPanel:!1,buttonRef:y,panelRef:P,buttonId:u,panelId:l}),[{disclosureState:c},i]=d;R(()=>i({type:2,buttonId:u}),[u,i]),R(()=>i({type:3,panelId:l}),[l,i]);let T=g(f=>{i({type:1});let A=J(a);if(!A)return;let I=(()=>f?f instanceof HTMLElement?f:f.current instanceof HTMLElement?f.current:A.getElementById(u):A.getElementById(u))();I==null||I.focus()},[i,u]),C=b(()=>({close:T}),[T]),s=b(()=>({open:c===0,close:T}),[c,T]),p={ref:D};return m.createElement(h.Provider,{value:d},m.createElement(U.Provider,{value:C},m.createElement($,{value:O(c,{[0]:v.Open,[1]:v.Closed})},x({ourProps:p,theirProps:r,slot:s,defaultTag:ee,name:"Disclosure"}))))}),ne="button",le=M(function(t,o){let[n,r]=H("Disclosure.Button"),u=Y(),l=u===null?!1:u===n.panelId,a=E(null),D=B(a,o,l?null:n.buttonRef),P=g(s=>{var p;if(l){if(n.disclosureState===1)return;switch(s.key){case S.Space:case S.Enter:s.preventDefault(),s.stopPropagation(),r({type:0}),(p=n.buttonRef.current)==null||p.focus();break}}else switch(s.key){case S.Space:case S.Enter:s.preventDefault(),s.stopPropagation(),r({type:0});break}},[r,l,n.disclosureState,n.buttonRef]),y=g(s=>{switch(s.key){case S.Space:s.preventDefault();break}},[]),d=g(s=>{var p;W(s.currentTarget)||t.disabled||(l?(r({type:0}),(p=n.buttonRef.current)==null||p.focus()):r({type:0}))},[r,t.disabled,n.buttonRef,l]),c=b(()=>({open:n.disclosureState===0}),[n]),i=z(t,a),T=t,C=l?{ref:D,type:i,onKeyDown:P,onClick:d}:{ref:D,id:n.buttonId,type:i,"aria-expanded":t.disabled?void 0:n.disclosureState===0,"aria-controls":n.linkedPanel?n.panelId:void 0,onKeyDown:P,onKeyUp:y,onClick:d};return x({ourProps:C,theirProps:T,slot:c,defaultTag:ne,name:"Disclosure.Button"})}),oe="div",re=F.RenderStrategy|F.Static,se=M(function(t,o){let[n,r]=H("Disclosure.Panel"),{close:u}=K("Disclosure.Panel"),l=B(o,n.panelRef,()=>{n.linkedPanel||r({type:4})}),a=q(),D=(()=>a!==null?a===v.Open:n.disclosureState===0)();R(()=>()=>r({type:5}),[r]),R(()=>{var c;n.disclosureState===1&&((c=t.unmount)!=null?c:!0)&&r({type:5})},[n.disclosureState,t.unmount,r]);let P=b(()=>({open:n.disclosureState===0,close:u}),[n,u]),y=t,d={ref:l,id:n.panelId};return m.createElement(w.Provider,{value:n.panelId},x({ourProps:d,theirProps:y,slot:P,defaultTag:oe,features:re,visible:D,name:"Disclosure.Panel"}))}),ke=Object.assign(te,{Button:le,Panel:se});export{ke as Disclosure}; | ||
"use client";import{useFocusRing as Q}from"@react-aria/focus";import{useHover as Y}from"@react-aria/interactions";import 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,15 +0,36 @@ | ||
import { ElementType, MutableRefObject, Ref } from 'react'; | ||
import { Props } from '../../types'; | ||
export declare let FocusTrap: (<TTag extends ElementType<any> = "div">(props: Omit<import("../../types").PropsOf<TTag>, "as" | "children" | "refName" | "className"> & { | ||
as?: TTag | undefined; | ||
children?: import("react").ReactNode | ((bag: any) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>); | ||
refName?: string | undefined; | ||
} & (import("../../types").PropsOf<TTag> extends { | ||
className?: any; | ||
} ? { | ||
className?: string | ((bag: any) => string) | undefined; | ||
} : {}) & { | ||
initialFocus?: MutableRefObject<HTMLElement | null> | undefined; | ||
}, ref: Ref<HTMLElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
import React, { type ElementType, type MutableRefObject, type Ref } from 'react'; | ||
import type { Props } from '../../types.js'; | ||
import { type HasDisplayName, type RefProp } from '../../utils/render.js'; | ||
type Containers = (() => Iterable<HTMLElement>) | MutableRefObject<Set<MutableRefObject<HTMLElement | null>>>; | ||
declare let DEFAULT_FOCUS_TRAP_TAG: "div"; | ||
export declare enum FocusTrapFeatures { | ||
/** No features enabled for the focus trap. */ | ||
None = 0, | ||
/** Ensure that we move focus initially into the container. */ | ||
InitialFocus = 1, | ||
/** Ensure that pressing `Tab` and `Shift+Tab` is trapped within the container. */ | ||
TabLock = 2, | ||
/** Ensure that programmatically moving focus outside of the container is disallowed. */ | ||
FocusLock = 4, | ||
/** Ensure that we restore the focus when unmounting the focus trap. */ | ||
RestoreFocus = 8, | ||
/** Initial focus should look for the `data-autofocus` */ | ||
AutoFocus = 16 | ||
} | ||
type FocusTrapRenderPropArg = {}; | ||
type FocusTrapPropsWeControl = never; | ||
export type FocusTrapProps<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG> = Props<TTag, FocusTrapRenderPropArg, FocusTrapPropsWeControl, { | ||
initialFocus?: MutableRefObject<HTMLElement | null>; | ||
initialFocusFallback?: MutableRefObject<HTMLElement | null>; | ||
features?: FocusTrapFeatures; | ||
containers?: Containers; | ||
}>; | ||
declare function FocusTrapFn<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(props: FocusTrapProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
export interface _internal_ComponentFocusTrap extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(props: FocusTrapProps<TTag> & RefProp<typeof FocusTrapFn>): JSX.Element; | ||
} | ||
export declare let FocusTrap: _internal_ComponentFocusTrap & { | ||
/** @deprecated use `FocusTrapFeatures` instead of `FocusTrap.features` */ | ||
features: typeof FocusTrapFeatures; | ||
}; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import{useRef as f}from"react";import{forwardRefWithAs as n,render as p}from"../../utils/render.js";import{useFocusTrap as T,Features as r}from"../../hooks/use-focus-trap.js";import{useServerHandoffComplete as m}from"../../hooks/use-server-handoff-complete.js";import{useSyncRefs as i}from"../../hooks/use-sync-refs.js";let c="div",O=n(function(t,o){let e=f(null),l=i(e,o),{initialFocus:s,...u}=t,a=m();return T(e,a?r.All:r.None,{initialFocus:s}),p({ourProps:{ref:l},theirProps:u,defaultTag:c,name:"FocusTrap"})});export{O as FocusTrap}; | ||
"use client";import L,{useRef as M}from"react";import{useDisposables as G}from'../../hooks/use-disposables.js';import{useEvent as A}from'../../hooks/use-event.js';import{useEventListener as W}from'../../hooks/use-event-listener.js';import{useIsMounted as P}from'../../hooks/use-is-mounted.js';import{useIsTopLayer as O}from'../../hooks/use-is-top-layer.js';import{useOnUnmount as K}from'../../hooks/use-on-unmount.js';import{useOwnerDocument as V}from'../../hooks/use-owner.js';import{useServerHandoffComplete as q}from'../../hooks/use-server-handoff-complete.js';import{useSyncRefs as J}from'../../hooks/use-sync-refs.js';import{Direction as H,useTabDirection as X}from'../../hooks/use-tab-direction.js';import{useWatch as y}from'../../hooks/use-watch.js';import{Hidden as C,HiddenFeatures as _}from'../../internal/hidden.js';import{history as b}from'../../utils/active-element-history.js';import{Focus as T,FocusResult as S,focusElement as p,focusIn as E}from'../../utils/focus-management.js';import{match as h}from'../../utils/match.js';import{microTask as j}from'../../utils/micro-task.js';import{forwardRefWithAs as z,render as Q}from'../../utils/render.js';function U(o){if(!o)return new Set;if(typeof o=="function")return new Set(o());let e=new Set;for(let t of o.current)t.current instanceof HTMLElement&&e.add(t.current);return e}let Y="div";var x=(n=>(n[n.None=0]="None",n[n.InitialFocus=1]="InitialFocus",n[n.TabLock=2]="TabLock",n[n.FocusLock=4]="FocusLock",n[n.RestoreFocus=8]="RestoreFocus",n[n.AutoFocus=16]="AutoFocus",n))(x||{});function Z(o,e){let t=M(null),r=J(t,e),{initialFocus:s,initialFocusFallback:a,containers:n,features:u=15,...f}=o;q()||(u=0);let l=V(t);w(u,{ownerDocument:l});let i=ee(u,{ownerDocument:l,container:t,initialFocus:s,initialFocusFallback:a});te(u,{ownerDocument:l,container:t,containers:n,previousActiveElement:i});let R=X(),g=A(c=>{let m=t.current;if(!m)return;(B=>B())(()=>{h(R.current,{[H.Forwards]:()=>{E(m,T.First,{skipElements:[c.relatedTarget,a]})},[H.Backwards]:()=>{E(m,T.Last,{skipElements:[c.relatedTarget,a]})}})})}),v=O(!!(u&2),"focus-trap#tab-lock"),N=G(),F=M(!1),k={ref:r,onKeyDown(c){c.key=="Tab"&&(F.current=!0,N.requestAnimationFrame(()=>{F.current=!1}))},onBlur(c){if(!(u&4))return;let m=U(n);t.current instanceof HTMLElement&&m.add(t.current);let d=c.relatedTarget;d instanceof HTMLElement&&d.dataset.headlessuiFocusGuard!=="true"&&(I(m,d)||(F.current?E(t.current,h(R.current,{[H.Forwards]:()=>T.Next,[H.Backwards]:()=>T.Previous})|T.WrapAround,{relativeTo:c.target}):c.target instanceof HTMLElement&&p(c.target)))}};return L.createElement(L.Fragment,null,v&&L.createElement(C,{as:"button",type:"button","data-headlessui-focus-guard":!0,onFocus:g,features:_.Focusable}),Q({ourProps:k,theirProps:f,defaultTag:Y,name:"FocusTrap"}),v&&L.createElement(C,{as:"button",type:"button","data-headlessui-focus-guard":!0,onFocus:g,features:_.Focusable}))}let $=z(Z),Fe=Object.assign($,{features:x});function D(o=!0){let e=M(b.slice());return y(([t],[r])=>{r===!0&&t===!1&&j(()=>{e.current.splice(0)}),r===!1&&t===!0&&(e.current=b.slice())},[o,b,e]),A(()=>{var t;return(t=e.current.find(r=>r!=null&&r.isConnected))!=null?t:null})}function w(o,{ownerDocument:e}){let t=!!(o&8),r=D(t);y(()=>{t||(e==null?void 0:e.activeElement)===(e==null?void 0:e.body)&&p(r())},[t]),K(()=>{t&&p(r())})}function ee(o,{ownerDocument:e,container:t,initialFocus:r,initialFocusFallback:s}){let a=M(null),n=O(!!(o&1),"focus-trap#initial-focus"),u=P();return y(()=>{if(o===0)return;if(!n){s!=null&&s.current&&p(s.current);return}let f=t.current;f&&j(()=>{if(!u.current)return;let l=e==null?void 0:e.activeElement;if(r!=null&&r.current){if((r==null?void 0:r.current)===l){a.current=l;return}}else if(f.contains(l)){a.current=l;return}if(r!=null&&r.current)p(r.current);else{if(o&16){if(E(f,T.First|T.AutoFocus)!==S.Error)return}else if(E(f,T.First)!==S.Error)return;if(s!=null&&s.current&&(p(s.current),(e==null?void 0:e.activeElement)===s.current))return;console.warn("There are no focusable elements inside the <FocusTrap />")}a.current=e==null?void 0:e.activeElement})},[s,n,o]),a}function te(o,{ownerDocument:e,container:t,containers:r,previousActiveElement:s}){let a=P(),n=!!(o&4);W(e==null?void 0:e.defaultView,"focus",u=>{if(!n||!a.current)return;let f=U(r);t.current instanceof HTMLElement&&f.add(t.current);let l=s.current;if(!l)return;let i=u.target;i&&i instanceof HTMLElement?I(f,i)?(s.current=i,p(i)):(u.preventDefault(),u.stopPropagation(),p(l)):p(s.current)},!0)}function I(o,e){for(let t of o)if(t.contains(e))return!0;return!1}export{Fe as FocusTrap,x as FocusTrapFeatures}; |
@@ -1,25 +0,36 @@ | ||
import React, { ReactNode, Ref } from 'react'; | ||
import { Props } from '../../types'; | ||
import React, { type ElementType, type ReactNode, type Ref } from 'react'; | ||
import type { Props } from '../../types.js'; | ||
import { type HasDisplayName, type RefProp } from '../../utils/render.js'; | ||
interface SharedData { | ||
slot?: {}; | ||
name?: string; | ||
props?: {}; | ||
props?: Record<string, any>; | ||
} | ||
export declare function useLabelContext(): { | ||
value: string | undefined; | ||
register(value: string): () => void; | ||
} & SharedData; | ||
export declare function useLabelledBy(alwaysAvailableIds?: (string | undefined | null)[]): string | undefined; | ||
interface LabelProviderProps extends SharedData { | ||
children: ReactNode; | ||
value?: string | undefined; | ||
} | ||
export declare function useLabels(): [string | undefined, (props: LabelProviderProps) => JSX.Element]; | ||
export declare let Label: (<TTag extends React.ElementType<any> = "label">(props: Omit<import("../../types").PropsOf<TTag>, "id" | ("as" | "children" | "refName" | "className")> & { | ||
as?: TTag | undefined; | ||
children?: React.ReactNode | ((bag: {}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>); | ||
refName?: string | undefined; | ||
} & (import("../../types").PropsOf<TTag> extends { | ||
className?: any; | ||
} ? { | ||
className?: string | ((bag: {}) => string) | undefined; | ||
} : {}) & { | ||
passive?: boolean | undefined; | ||
}, ref: Ref<HTMLLabelElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
export declare function useLabels({ inherit }?: { | ||
inherit?: boolean | undefined; | ||
}): [ | ||
string | undefined, | ||
(props: LabelProviderProps & { | ||
inherit?: boolean; | ||
}) => JSX.Element | ||
]; | ||
declare let DEFAULT_LABEL_TAG: "label"; | ||
export type LabelProps<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> = Props<TTag> & { | ||
passive?: boolean; | ||
htmlFor?: string; | ||
}; | ||
declare function LabelFn<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: LabelProps<TTag>, ref: Ref<HTMLLabelElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
export interface _internal_ComponentLabel extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: LabelProps<TTag> & RefProp<typeof LabelFn>): JSX.Element; | ||
} | ||
export declare let Label: _internal_ComponentLabel; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import p,{createContext as m,useCallback as b,useContext as L,useMemo as u,useState as g}from"react";import{useId as x}from"../../hooks/use-id.js";import{forwardRefWithAs as T,render as P}from"../../utils/render.js";import{useIsoMorphicEffect as E}from"../../hooks/use-iso-morphic-effect.js";import{useSyncRefs as h}from"../../hooks/use-sync-refs.js";let c=m(null);function f(){let l=L(c);if(l===null){let t=new Error("You used a <Label /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(t,f),t}return l}function B(){let[l,t]=g([]);return[l.length>0?l.join(" "):void 0,u(()=>function(e){let o=b(a=>(t(i=>[...i,a]),()=>t(i=>{let n=i.slice(),d=n.indexOf(a);return d!==-1&&n.splice(d,1),n})),[]),r=u(()=>({register:o,slot:e.slot,name:e.name,props:e.props}),[o,e.slot,e.name,e.props]);return p.createElement(c.Provider,{value:r},e.children)},[t])]}let v="label",M=T(function(t,s){let{passive:e=!1,...o}=t,r=f(),a=`headlessui-label-${x()}`,i=h(s);E(()=>r.register(a),[a,r.register]);let n={ref:i,...r.props,id:a};return e&&("onClick"in n&&delete n.onClick,"onClick"in o&&delete o.onClick),P({ourProps:n,theirProps:o,slot:r.slot||{},defaultTag:v,name:r.name||"Label"})});export{M as Label,B as useLabels}; | ||
"use client";import k,{createContext as D,useContext as h,useMemo as T,useState as R}from"react";import{useEvent as v}from'../../hooks/use-event.js';import{useId as _}from'../../hooks/use-id.js';import{useIsoMorphicEffect as A}from'../../hooks/use-iso-morphic-effect.js';import{useSyncRefs as B}from'../../hooks/use-sync-refs.js';import{useDisabled as F}from'../../internal/disabled.js';import{useProvidedId as S}from'../../internal/id.js';import{forwardRefWithAs as M,render as H}from'../../utils/render.js';let c=D(null);c.displayName="LabelContext";function P(){let r=h(c);if(r===null){let l=new Error("You used a <Label /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(l,P),l}return r}function I(r){var a,e,o;let l=(e=(a=h(c))==null?void 0:a.value)!=null?e:void 0;return((o=r==null?void 0:r.length)!=null?o:0)>0?[l,...r].filter(Boolean).join(" "):l}function z({inherit:r=!1}={}){let l=I(),[a,e]=R([]),o=r?[l,...a].filter(Boolean):a;return[o.length>0?o.join(" "):void 0,T(()=>function(t){let s=v(i=>(e(p=>[...p,i]),()=>e(p=>{let u=p.slice(),d=u.indexOf(i);return d!==-1&&u.splice(d,1),u}))),m=T(()=>({register:s,slot:t.slot,name:t.name,props:t.props,value:t.value}),[s,t.slot,t.name,t.props,t.value]);return k.createElement(c.Provider,{value:m},t.children)},[e])]}let N="label";function G(r,l){var y;let a=_(),e=P(),o=S(),g=F(),{id:t=`headlessui-label-${a}`,htmlFor:s=o!=null?o:(y=e.props)==null?void 0:y.htmlFor,passive:m=!1,...i}=r,p=B(l);A(()=>e.register(t),[t,e.register]);let u=v(L=>{let b=L.currentTarget;if(b instanceof HTMLLabelElement&&L.preventDefault(),e.props&&"onClick"in e.props&&typeof e.props.onClick=="function"&&e.props.onClick(L),b instanceof HTMLLabelElement){let n=document.getElementById(b.htmlFor);if(n){let E=n.getAttribute("disabled");if(E==="true"||E==="")return;let x=n.getAttribute("aria-disabled");if(x==="true"||x==="")return;(n instanceof HTMLInputElement&&(n.type==="radio"||n.type==="checkbox")||n.role==="radio"||n.role==="checkbox"||n.role==="switch")&&n.click(),n.focus({preventScroll:!0})}}}),d=g||!1,C=T(()=>({...e.slot,disabled:d}),[e.slot,d]),f={ref:p,...e.props,id:t,htmlFor:s,onClick:u};return m&&("onClick"in f&&(delete f.htmlFor,delete f.onClick),"onClick"in i&&delete i.onClick),H({ourProps:f,theirProps:i,slot:C,defaultTag:s?N:"div",name:e.name||"Label"})}let U=M(G),K=Object.assign(U,{});export{K as Label,P as useLabelContext,I as useLabelledBy,z as useLabels}; |
@@ -1,65 +0,121 @@ | ||
import React, { Ref } from 'react'; | ||
import { Props } from '../../types'; | ||
import { PropsForFeatures } from '../../utils/render'; | ||
interface ListboxRenderPropArg { | ||
import React, { type ElementType, type Ref } from 'react'; | ||
import { type ByComparator } from '../../hooks/use-by-comparator.js'; | ||
import { type AnchorPropsWithSelection } from '../../internal/floating.js'; | ||
import type { Props } from '../../types.js'; | ||
import { type HasDisplayName, type PropsForFeatures, type RefProp } from '../../utils/render.js'; | ||
import { type _internal_ComponentLabel } from '../label/label.js'; | ||
declare let DEFAULT_LISTBOX_TAG: React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>; | ||
type ListboxRenderPropArg<T> = { | ||
open: boolean; | ||
disabled: boolean; | ||
} | ||
interface ButtonRenderPropArg { | ||
open: boolean; | ||
invalid: boolean; | ||
value: T; | ||
}; | ||
export type ListboxProps<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType> = Props<TTag, ListboxRenderPropArg<TType>, 'value' | 'defaultValue' | 'onChange' | 'by' | 'disabled' | 'horizontal' | 'name' | 'multiple', { | ||
value?: TType; | ||
defaultValue?: TType; | ||
onChange?(value: TType): void; | ||
by?: ByComparator<TActualType>; | ||
disabled?: boolean; | ||
invalid?: boolean; | ||
horizontal?: boolean; | ||
form?: string; | ||
name?: string; | ||
multiple?: boolean; | ||
__demoMode?: boolean; | ||
}>; | ||
declare function ListboxFn<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType extends (infer U)[] ? U : TType>(props: ListboxProps<TTag, TType, TActualType>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_BUTTON_TAG: "button"; | ||
type ButtonRenderPropArg = { | ||
disabled: boolean; | ||
} | ||
declare type ButtonPropsWeControl = 'id' | 'type' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded' | 'aria-labelledby' | 'disabled' | 'onKeyDown' | 'onClick'; | ||
interface LabelRenderPropArg { | ||
invalid: boolean; | ||
hover: boolean; | ||
focus: boolean; | ||
autofocus: boolean; | ||
open: boolean; | ||
disabled: boolean; | ||
} | ||
declare type LabelPropsWeControl = 'id' | 'ref' | 'onClick'; | ||
interface OptionsRenderPropArg { | ||
active: boolean; | ||
value: any; | ||
}; | ||
type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded' | 'aria-haspopup' | 'aria-labelledby' | 'disabled'; | ||
export type ListboxButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, { | ||
autoFocus?: boolean; | ||
disabled?: boolean; | ||
}>; | ||
declare function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ListboxButtonProps<TTag>, ref: Ref<HTMLButtonElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
declare let DEFAULT_OPTIONS_TAG: "div"; | ||
type OptionsRenderPropArg = { | ||
open: boolean; | ||
} | ||
declare type OptionsPropsWeControl = 'aria-activedescendant' | 'aria-labelledby' | 'aria-orientation' | 'id' | 'onKeyDown' | 'role' | 'tabIndex'; | ||
}; | ||
type OptionsPropsWeControl = 'aria-activedescendant' | 'aria-labelledby' | 'aria-multiselectable' | 'aria-orientation' | 'role' | 'tabIndex'; | ||
declare let OptionsRenderFeatures: number; | ||
interface OptionRenderPropArg { | ||
export type ListboxOptionsProps<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl, { | ||
anchor?: AnchorPropsWithSelection; | ||
portal?: boolean; | ||
modal?: boolean; | ||
transition?: boolean; | ||
} & PropsForFeatures<typeof OptionsRenderFeatures>>; | ||
declare function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ListboxOptionsProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_OPTION_TAG: "div"; | ||
type OptionRenderPropArg = { | ||
/** @deprecated use `focus` instead */ | ||
active: boolean; | ||
focus: boolean; | ||
selected: boolean; | ||
disabled: boolean; | ||
selectedOption: boolean; | ||
}; | ||
type OptionPropsWeControl = 'aria-disabled' | 'aria-selected' | 'role' | 'tabIndex'; | ||
export type ListboxOptionProps<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, { | ||
disabled?: boolean; | ||
value: TType; | ||
}>; | ||
declare function OptionFn<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = Parameters<typeof ListboxRoot>[0]['value']>(props: ListboxOptionProps<TTag, TType>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
declare let DEFAULT_SELECTED_OPTION_TAG: React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>; | ||
type SelectedOptionRenderPropArg = {}; | ||
type SelectedOptionPropsWeControl = never; | ||
export type ListboxSelectedOptionProps<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG> = Props<TTag, SelectedOptionRenderPropArg, SelectedOptionPropsWeControl, { | ||
options: React.ReactNode; | ||
placeholder?: React.ReactNode; | ||
}>; | ||
declare function SelectedFn<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG>(props: ListboxSelectedOptionProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
export interface _internal_ComponentListbox extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType extends (infer U)[] ? U : TType>(props: ListboxProps<TTag, TType, TActualType> & RefProp<typeof ListboxFn>): JSX.Element; | ||
} | ||
declare type ListboxOptionPropsWeControl = 'id' | 'role' | 'tabIndex' | 'aria-disabled' | 'aria-selected' | 'onPointerLeave' | 'onMouseLeave' | 'onPointerMove' | 'onMouseMove' | 'onFocus'; | ||
export declare let Listbox: (<TTag extends React.ElementType<any> = React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>, TType = string, TActualType = TType extends (infer U)[] ? U : TType>(props: Props<TTag, ListboxRenderPropArg, "value" | "name" | "disabled" | "onChange" | "multiple" | "horizontal"> & { | ||
value: TType; | ||
onChange(value: TType): void; | ||
disabled?: boolean | undefined; | ||
horizontal?: boolean | undefined; | ||
name?: string | undefined; | ||
multiple?: boolean | undefined; | ||
}, ref: React.Ref<TTag>) => JSX.Element) & { | ||
displayName: string; | ||
} & { | ||
Button: (<TTag_1 extends React.ElementType<any> = "button">(props: Props<TTag_1, ButtonRenderPropArg, ButtonPropsWeControl>, ref: Ref<HTMLButtonElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Label: (<TTag_2 extends React.ElementType<any> = "label">(props: Props<TTag_2, LabelRenderPropArg, LabelPropsWeControl>, ref: Ref<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Options: (<TTag_3 extends React.ElementType<any> = "ul">(props: Props<TTag_3, OptionsRenderPropArg, OptionsPropsWeControl> & (({ | ||
static?: undefined; | ||
} & { | ||
unmount?: boolean | undefined; | ||
}) | ({ | ||
unmount?: undefined; | ||
} & { | ||
static?: boolean | undefined; | ||
})), ref: Ref<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Option: (<TTag_4 extends React.ElementType<any> = "li", TType_1 = unknown>(props: Props<TTag_4, OptionRenderPropArg, "value" | ListboxOptionPropsWeControl> & { | ||
disabled?: boolean | undefined; | ||
value: TType_1; | ||
}, ref: Ref<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
export interface _internal_ComponentListboxButton extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ListboxButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentListboxLabel extends _internal_ComponentLabel { | ||
} | ||
export interface _internal_ComponentListboxOptions extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ListboxOptionsProps<TTag> & RefProp<typeof OptionsFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentListboxOption extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = Parameters<typeof ListboxRoot>[0]['value']>(props: ListboxOptionProps<TTag, TType> & RefProp<typeof OptionFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentListboxSelectedOption extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG>(props: ListboxSelectedOptionProps<TTag> & RefProp<typeof SelectedFn>): JSX.Element; | ||
} | ||
declare let ListboxRoot: _internal_ComponentListbox; | ||
export declare let ListboxButton: _internal_ComponentListboxButton; | ||
/** @deprecated use `<Label>` instead of `<ListboxLabel>` */ | ||
export declare let ListboxLabel: _internal_ComponentListboxLabel; | ||
export declare let ListboxOptions: _internal_ComponentListboxOptions; | ||
export declare let ListboxOption: _internal_ComponentListboxOption; | ||
export declare let ListboxSelectedOption: _internal_ComponentListboxSelectedOption; | ||
export declare let Listbox: _internal_ComponentListbox & { | ||
/** @deprecated use `<ListboxButton>` instead of `<Listbox.Button>` */ | ||
Button: _internal_ComponentListboxButton; | ||
/** @deprecated use `<Label>` instead of `<Listbox.Label>` */ | ||
Label: _internal_ComponentListboxLabel; | ||
/** @deprecated use `<ListboxOptions>` instead of `<Listbox.Options>` */ | ||
Options: _internal_ComponentListboxOptions; | ||
/** @deprecated use `<ListboxOption>` instead of `<Listbox.Option>` */ | ||
Option: _internal_ComponentListboxOption; | ||
/** @deprecated use `<ListboxSelectedOption>` instead of `<Listbox.SelectedOption>` */ | ||
SelectedOption: _internal_ComponentListboxSelectedOption; | ||
}; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import w,{Fragment as W,createContext as Q,createRef as k,useCallback as R,useContext as z,useMemo as D,useReducer as $,useRef as H,useEffect as X}from"react";import{useDisposables as U}from"../../hooks/use-disposables.js";import{useId as F}from"../../hooks/use-id.js";import{useIsoMorphicEffect as A}from"../../hooks/use-iso-morphic-effect.js";import{useComputed as K}from"../../hooks/use-computed.js";import{useSyncRefs as C}from"../../hooks/use-sync-refs.js";import{Features as N,forwardRefWithAs as M,render as E,compact as q}from"../../utils/render.js";import{match as h}from"../../utils/match.js";import{disposables as G}from"../../utils/disposables.js";import{Keys as b}from"../keyboard.js";import{Focus as m,calculateActiveIndex as J}from"../../utils/calculate-active-index.js";import{isDisabledReactIssue7711 as Y}from"../../utils/bugs.js";import{isFocusableElement as Z,FocusableMode as ee,sortByDomNode as te}from"../../utils/focus-management.js";import{useOpenClosed as oe,State as B,OpenClosedProvider as ne}from"../../internal/open-closed.js";import{useResolveButtonType as re}from"../../hooks/use-resolve-button-type.js";import{useOutsideClick as ie}from"../../hooks/use-outside-click.js";import{VisuallyHidden as ae}from"../../internal/visually-hidden.js";import{objectToFormEntries as le}from"../../utils/form.js";import{getOwnerDocument as se}from"../../utils/owner.js";var pe=(n=>(n[n.Open=0]="Open",n[n.Closed=1]="Closed",n))(pe||{}),ue=(n=>(n[n.Single=0]="Single",n[n.Multi=1]="Multi",n))(ue||{}),de=(n=>(n[n.Pointer=0]="Pointer",n[n.Other=1]="Other",n))(de||{}),ce=(a=>(a[a.OpenListbox=0]="OpenListbox",a[a.CloseListbox=1]="CloseListbox",a[a.SetDisabled=2]="SetDisabled",a[a.SetOrientation=3]="SetOrientation",a[a.GoToOption=4]="GoToOption",a[a.Search=5]="Search",a[a.ClearSearch=6]="ClearSearch",a[a.RegisterOption=7]="RegisterOption",a[a.UnregisterOption=8]="UnregisterOption",a))(ce||{});function _(t,i=n=>n){let n=t.activeOptionIndex!==null?t.options[t.activeOptionIndex]:null,e=te(i(t.options.slice()),p=>p.dataRef.current.domRef.current),o=n?e.indexOf(n):null;return o===-1&&(o=null),{options:e,activeOptionIndex:o}}let fe={[1](t){return t.disabled||t.listboxState===1?t:{...t,activeOptionIndex:null,listboxState:1}},[0](t){if(t.disabled||t.listboxState===0)return t;let i=t.activeOptionIndex,{value:n,mode:e}=t.propsRef.current,o=t.options.findIndex(p=>{let r=p.dataRef.current.value;return h(e,{[1]:()=>n.includes(r),[0]:()=>n===r})});return o!==-1&&(i=o),{...t,listboxState:0,activeOptionIndex:i}},[2](t,i){return t.disabled===i.disabled?t:{...t,disabled:i.disabled}},[3](t,i){return t.orientation===i.orientation?t:{...t,orientation:i.orientation}},[4](t,i){var o;if(t.disabled||t.listboxState===1)return t;let n=_(t),e=J(i,{resolveItems:()=>n.options,resolveActiveIndex:()=>n.activeOptionIndex,resolveId:p=>p.id,resolveDisabled:p=>p.dataRef.current.disabled});return{...t,...n,searchQuery:"",activeOptionIndex:e,activationTrigger:(o=i.trigger)!=null?o:1}},[5]:(t,i)=>{if(t.disabled||t.listboxState===1)return t;let e=t.searchQuery!==""?0:1,o=t.searchQuery+i.value.toLowerCase(),r=(t.activeOptionIndex!==null?t.options.slice(t.activeOptionIndex+e).concat(t.options.slice(0,t.activeOptionIndex+e)):t.options).find(u=>{var a;return!u.dataRef.current.disabled&&((a=u.dataRef.current.textValue)==null?void 0:a.startsWith(o))}),s=r?t.options.indexOf(r):-1;return s===-1||s===t.activeOptionIndex?{...t,searchQuery:o}:{...t,searchQuery:o,activeOptionIndex:s,activationTrigger:1}},[6](t){return t.disabled||t.listboxState===1||t.searchQuery===""?t:{...t,searchQuery:""}},[7]:(t,i)=>{let n={id:i.id,dataRef:i.dataRef},e=_(t,o=>[...o,n]);if(t.activeOptionIndex===null){let{value:o,mode:p}=t.propsRef.current,r=i.dataRef.current.value;h(p,{[1]:()=>o.includes(r),[0]:()=>o===r})&&(e.activeOptionIndex=e.options.indexOf(n))}return{...t,...e}},[8]:(t,i)=>{let n=_(t,e=>{let o=e.findIndex(p=>p.id===i.id);return o!==-1&&e.splice(o,1),e});return{...t,...n,activationTrigger:1}}},V=Q(null);V.displayName="ListboxContext";function I(t){let i=z(V);if(i===null){let n=new Error(`<${t} /> is missing a parent <Listbox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(n,I),n}return i}function be(t,i){return h(i.type,fe,t,i)}let Te=W,xe=M(function(i,n){let{value:e,name:o,onChange:p,disabled:r=!1,horizontal:s=!1,multiple:u=!1,...a}=i;const y=s?"horizontal":"vertical";let g=C(n),v=$(be,{listboxState:1,propsRef:{current:{value:e,onChange:p,mode:u?1:0}},labelRef:k(),buttonRef:k(),optionsRef:k(),disabled:r,orientation:y,options:[],searchQuery:"",activeOptionIndex:null,activationTrigger:1}),[{listboxState:f,propsRef:O,optionsRef:S,buttonRef:d},l]=v;O.current.value=e,O.current.mode=u?1:0,A(()=>{O.current.onChange=L=>h(O.current.mode,{[0](){return p(L)},[1](){let T=O.current.value.slice(),x=T.indexOf(L);return x===-1?T.push(L):T.splice(x,1),p(T)}})},[p,O]),A(()=>l({type:2,disabled:r}),[r]),A(()=>l({type:3,orientation:y}),[y]),ie([d,S],(L,T)=>{var x;f===0&&(l({type:1}),Z(T,ee.Loose)||(L.preventDefault(),(x=d.current)==null||x.focus()))});let c=D(()=>({open:f===0,disabled:r}),[f,r]),P={ref:g};return w.createElement(V.Provider,{value:v},w.createElement(ne,{value:h(f,{[0]:B.Open,[1]:B.Closed})},o!=null&&e!=null&&le({[o]:e}).map(([L,T])=>w.createElement(ae,{...q({key:L,as:"input",type:"hidden",hidden:!0,readOnly:!0,name:L,value:T})})),E({ourProps:P,theirProps:a,slot:c,defaultTag:Te,name:"Listbox"})))}),ye="button",Oe=M(function(i,n){var S;let[e,o]=I("Listbox.Button"),p=C(e.buttonRef,n),r=`headlessui-listbox-button-${F()}`,s=U(),u=R(d=>{switch(d.key){case b.Space:case b.Enter:case b.ArrowDown:d.preventDefault(),o({type:0}),s.nextFrame(()=>{e.propsRef.current.value||o({type:4,focus:m.First})});break;case b.ArrowUp:d.preventDefault(),o({type:0}),s.nextFrame(()=>{e.propsRef.current.value||o({type:4,focus:m.Last})});break}},[o,e,s]),a=R(d=>{switch(d.key){case b.Space:d.preventDefault();break}},[]),y=R(d=>{if(Y(d.currentTarget))return d.preventDefault();e.listboxState===0?(o({type:1}),s.nextFrame(()=>{var l;return(l=e.buttonRef.current)==null?void 0:l.focus({preventScroll:!0})})):(d.preventDefault(),o({type:0}))},[o,s,e]),g=K(()=>{if(!!e.labelRef.current)return[e.labelRef.current.id,r].join(" ")},[e.labelRef.current,r]),v=D(()=>({open:e.listboxState===0,disabled:e.disabled}),[e]),f=i,O={ref:p,id:r,type:re(i,e.buttonRef),"aria-haspopup":!0,"aria-controls":(S=e.optionsRef.current)==null?void 0:S.id,"aria-expanded":e.disabled?void 0:e.listboxState===0,"aria-labelledby":g,disabled:e.disabled,onKeyDown:u,onKeyUp:a,onClick:y};return E({ourProps:O,theirProps:f,slot:v,defaultTag:ye,name:"Listbox.Button"})}),ge="label",Re=M(function(i,n){let[e]=I("Listbox.Label"),o=`headlessui-listbox-label-${F()}`,p=C(e.labelRef,n),r=R(()=>{var y;return(y=e.buttonRef.current)==null?void 0:y.focus({preventScroll:!0})},[e.buttonRef]),s=D(()=>({open:e.listboxState===0,disabled:e.disabled}),[e]);return E({ourProps:{ref:p,id:o,onClick:r},theirProps:i,slot:s,defaultTag:ge,name:"Listbox.Label"})}),me="ul",Le=N.RenderStrategy|N.Static,ve=M(function(i,n){var d;let[e,o]=I("Listbox.Options"),p=C(e.optionsRef,n),r=`headlessui-listbox-options-${F()}`,s=U(),u=U(),a=oe(),y=(()=>a!==null?a===B.Open:e.listboxState===0)();X(()=>{var c;let l=e.optionsRef.current;!l||e.listboxState===0&&l!==((c=se(l))==null?void 0:c.activeElement)&&l.focus({preventScroll:!0})},[e.listboxState,e.optionsRef]);let g=R(l=>{switch(u.dispose(),l.key){case b.Space:if(e.searchQuery!=="")return l.preventDefault(),l.stopPropagation(),o({type:5,value:l.key});case b.Enter:if(l.preventDefault(),l.stopPropagation(),e.activeOptionIndex!==null){let{dataRef:c}=e.options[e.activeOptionIndex];e.propsRef.current.onChange(c.current.value)}e.propsRef.current.mode===0&&(o({type:1}),G().nextFrame(()=>{var c;return(c=e.buttonRef.current)==null?void 0:c.focus({preventScroll:!0})}));break;case h(e.orientation,{vertical:b.ArrowDown,horizontal:b.ArrowRight}):return l.preventDefault(),l.stopPropagation(),o({type:4,focus:m.Next});case h(e.orientation,{vertical:b.ArrowUp,horizontal:b.ArrowLeft}):return l.preventDefault(),l.stopPropagation(),o({type:4,focus:m.Previous});case b.Home:case b.PageUp:return l.preventDefault(),l.stopPropagation(),o({type:4,focus:m.First});case b.End:case b.PageDown:return l.preventDefault(),l.stopPropagation(),o({type:4,focus:m.Last});case b.Escape:return l.preventDefault(),l.stopPropagation(),o({type:1}),s.nextFrame(()=>{var c;return(c=e.buttonRef.current)==null?void 0:c.focus({preventScroll:!0})});case b.Tab:l.preventDefault(),l.stopPropagation();break;default:l.key.length===1&&(o({type:5,value:l.key}),u.setTimeout(()=>o({type:6}),350));break}},[s,o,u,e]),v=K(()=>{var l,c,P;return(P=(l=e.labelRef.current)==null?void 0:l.id)!=null?P:(c=e.buttonRef.current)==null?void 0:c.id},[e.labelRef.current,e.buttonRef.current]),f=D(()=>({open:e.listboxState===0}),[e]),O=i,S={"aria-activedescendant":e.activeOptionIndex===null||(d=e.options[e.activeOptionIndex])==null?void 0:d.id,"aria-multiselectable":e.propsRef.current.mode===1?!0:void 0,"aria-labelledby":v,"aria-orientation":e.orientation,id:r,onKeyDown:g,role:"listbox",tabIndex:0,ref:p};return E({ourProps:S,theirProps:O,slot:f,defaultTag:me,features:Le,visible:y,name:"Listbox.Options"})}),Se="li",Ae=M(function(i,n){let{disabled:e=!1,value:o,...p}=i,[r,s]=I("Listbox.Option"),u=`headlessui-listbox-option-${F()}`,a=r.activeOptionIndex!==null?r.options[r.activeOptionIndex].id===u:!1,y=h(r.propsRef.current.mode,{[1]:()=>r.propsRef.current.value.includes(o),[0]:()=>r.propsRef.current.value===o}),g=H(null),v=C(n,g);A(()=>{if(r.listboxState!==0||!a||r.activationTrigger===0)return;let T=G();return T.requestAnimationFrame(()=>{var x,j;(j=(x=g.current)==null?void 0:x.scrollIntoView)==null||j.call(x,{block:"nearest"})}),T.dispose},[g,a,r.listboxState,r.activationTrigger,r.activeOptionIndex]);let f=H({disabled:e,value:o,domRef:g});A(()=>{f.current.disabled=e},[f,e]),A(()=>{f.current.value=o},[f,o]),A(()=>{var T,x;f.current.textValue=(x=(T=g.current)==null?void 0:T.textContent)==null?void 0:x.toLowerCase()},[f,g]);let O=R(()=>r.propsRef.current.onChange(o),[r.propsRef,o]);A(()=>(s({type:7,id:u,dataRef:f}),()=>s({type:8,id:u})),[f,u]);let S=R(T=>{if(e)return T.preventDefault();O(),r.propsRef.current.mode===0&&(s({type:1}),G().nextFrame(()=>{var x;return(x=r.buttonRef.current)==null?void 0:x.focus({preventScroll:!0})}))},[s,r.buttonRef,e,O]),d=R(()=>{if(e)return s({type:4,focus:m.Nothing});s({type:4,focus:m.Specific,id:u})},[e,u,s]),l=R(()=>{e||a||s({type:4,focus:m.Specific,id:u,trigger:0})},[e,a,u,s]),c=R(()=>{e||!a||s({type:4,focus:m.Nothing})},[e,a,s]),P=D(()=>({active:a,selected:y,disabled:e}),[a,y,e]);return E({ourProps:{id:u,ref:v,role:"option",tabIndex:e===!0?void 0:-1,"aria-disabled":e===!0?!0:void 0,"aria-selected":y===!0?!0:void 0,disabled:void 0,onClick:S,onFocus:d,onPointerMove:l,onMouseMove:l,onPointerLeave:c,onMouseLeave:c},theirProps:p,slot:P,defaultTag:Se,name:"Listbox.Option"})}),et=Object.assign(xe,{Button:Oe,Label:Re,Options:ve,Option:Ae});export{et as Listbox}; | ||
"use client";import{useFocusRing as 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(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,48 +0,117 @@ | ||
import React, { Ref } from 'react'; | ||
import { Props } from '../../types'; | ||
import { PropsForFeatures } from '../../utils/render'; | ||
interface MenuRenderPropArg { | ||
import React, { type ElementType, type Ref } from 'react'; | ||
import { type AnchorProps } from '../../internal/floating.js'; | ||
import type { Props } from '../../types.js'; | ||
import { type HasDisplayName, type RefProp } from '../../utils/render.js'; | ||
declare let DEFAULT_MENU_TAG: React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>; | ||
type MenuRenderPropArg = { | ||
open: boolean; | ||
} | ||
interface ButtonRenderPropArg { | ||
close: () => void; | ||
}; | ||
type MenuPropsWeControl = never; | ||
export type MenuProps<TTag extends ElementType = typeof DEFAULT_MENU_TAG> = Props<TTag, MenuRenderPropArg, MenuPropsWeControl, { | ||
__demoMode?: boolean; | ||
}>; | ||
declare function MenuFn<TTag extends ElementType = typeof DEFAULT_MENU_TAG>(props: MenuProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_BUTTON_TAG: "button"; | ||
type ButtonRenderPropArg = { | ||
open: boolean; | ||
} | ||
declare type ButtonPropsWeControl = 'id' | 'type' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded' | 'onKeyDown' | 'onClick'; | ||
interface ItemsRenderPropArg { | ||
active: boolean; | ||
hover: boolean; | ||
focus: boolean; | ||
disabled: boolean; | ||
autofocus: boolean; | ||
}; | ||
type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded' | 'aria-haspopup'; | ||
export type MenuButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, { | ||
disabled?: boolean; | ||
autoFocus?: boolean; | ||
}>; | ||
declare function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: MenuButtonProps<TTag>, ref: Ref<HTMLButtonElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
declare let DEFAULT_ITEMS_TAG: "div"; | ||
type ItemsRenderPropArg = { | ||
open: boolean; | ||
} | ||
declare type ItemsPropsWeControl = 'aria-activedescendant' | 'aria-labelledby' | 'id' | 'onKeyDown' | 'role' | 'tabIndex'; | ||
declare let ItemsRenderFeatures: number; | ||
interface ItemRenderPropArg { | ||
}; | ||
type ItemsPropsWeControl = 'aria-activedescendant' | 'aria-labelledby' | 'role' | 'tabIndex'; | ||
export type MenuItemsProps<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG> = Props<TTag, ItemsRenderPropArg, ItemsPropsWeControl, { | ||
anchor?: AnchorProps; | ||
portal?: boolean; | ||
modal?: boolean; | ||
transition?: boolean; | ||
static?: boolean; | ||
unmount?: boolean; | ||
}>; | ||
declare function ItemsFn<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(props: MenuItemsProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_ITEM_TAG: React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>; | ||
type ItemRenderPropArg = { | ||
/** @deprecated use `focus` instead */ | ||
active: boolean; | ||
focus: boolean; | ||
disabled: boolean; | ||
close: () => void; | ||
}; | ||
type ItemPropsWeControl = 'aria-describedby' | 'aria-disabled' | 'aria-labelledby' | 'role' | 'tabIndex'; | ||
export type MenuItemProps<TTag extends ElementType = typeof DEFAULT_ITEM_TAG> = Props<TTag, ItemRenderPropArg, ItemPropsWeControl, { | ||
disabled?: boolean; | ||
}>; | ||
declare function ItemFn<TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(props: MenuItemProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_SECTION_TAG: "div"; | ||
type SectionRenderPropArg = {}; | ||
type SectionPropsWeControl = 'role' | 'aria-labelledby'; | ||
export type MenuSectionProps<TTag extends ElementType = typeof DEFAULT_SECTION_TAG> = Props<TTag, SectionRenderPropArg, SectionPropsWeControl>; | ||
declare function SectionFn<TTag extends ElementType = typeof DEFAULT_SECTION_TAG>(props: MenuSectionProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_HEADING_TAG: "header"; | ||
type HeadingRenderPropArg = {}; | ||
type HeadingPropsWeControl = 'role'; | ||
export type MenuHeadingProps<TTag extends ElementType = typeof DEFAULT_HEADING_TAG> = Props<TTag, HeadingRenderPropArg, HeadingPropsWeControl>; | ||
declare function HeadingFn<TTag extends ElementType = typeof DEFAULT_HEADING_TAG>(props: MenuHeadingProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
declare let DEFAULT_SEPARATOR_TAG: "div"; | ||
type SeparatorRenderPropArg = {}; | ||
type SeparatorPropsWeControl = 'role'; | ||
export type MenuSeparatorProps<TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG> = Props<TTag, SeparatorRenderPropArg, SeparatorPropsWeControl>; | ||
declare function SeparatorFn<TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG>(props: MenuSeparatorProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
export interface _internal_ComponentMenu extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_MENU_TAG>(props: MenuProps<TTag> & RefProp<typeof MenuFn>): JSX.Element; | ||
} | ||
declare type MenuItemPropsWeControl = 'id' | 'role' | 'tabIndex' | 'aria-disabled' | 'onPointerLeave' | 'onPointerMove' | 'onMouseLeave' | 'onMouseMove' | 'onFocus'; | ||
export declare let Menu: (<TTag extends React.ElementType<any> = React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>>(props: Props<TTag, MenuRenderPropArg, "1D45E01E-AF44-47C4-988A-19A94EBAF55C">, ref: Ref<HTMLElement>) => JSX.Element) & { | ||
displayName: string; | ||
} & { | ||
Button: (<TTag_1 extends React.ElementType<any> = "button">(props: Props<TTag_1, ButtonRenderPropArg, ButtonPropsWeControl>, ref: Ref<HTMLButtonElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Items: (<TTag_2 extends React.ElementType<any> = "div">(props: Props<TTag_2, ItemsRenderPropArg, ItemsPropsWeControl> & (({ | ||
static?: undefined; | ||
} & { | ||
unmount?: boolean | undefined; | ||
}) | ({ | ||
unmount?: undefined; | ||
} & { | ||
static?: boolean | undefined; | ||
})), ref: Ref<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Item: (<TTag_3 extends React.ElementType<any> = React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>>(props: Props<TTag_3, ItemRenderPropArg, MenuItemPropsWeControl> & { | ||
disabled?: boolean | undefined; | ||
}, ref: Ref<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
export interface _internal_ComponentMenuButton extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: MenuButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentMenuItems extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(props: MenuItemsProps<TTag> & RefProp<typeof ItemsFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentMenuItem extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(props: MenuItemProps<TTag> & RefProp<typeof ItemFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentMenuSection extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_SECTION_TAG>(props: MenuSectionProps<TTag> & RefProp<typeof SectionFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentMenuHeading extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_HEADING_TAG>(props: MenuHeadingProps<TTag> & RefProp<typeof HeadingFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentMenuSeparator extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG>(props: MenuSeparatorProps<TTag> & RefProp<typeof SeparatorFn>): JSX.Element; | ||
} | ||
export declare let MenuButton: _internal_ComponentMenuButton; | ||
export declare let MenuItems: _internal_ComponentMenuItems; | ||
export declare let MenuItem: _internal_ComponentMenuItem; | ||
export declare let MenuSection: _internal_ComponentMenuSection; | ||
export declare let MenuHeading: _internal_ComponentMenuHeading; | ||
export declare let MenuSeparator: _internal_ComponentMenuSeparator; | ||
export declare let Menu: _internal_ComponentMenu & { | ||
/** @deprecated use `<MenuButton>` instead of `<Menu.Button>` */ | ||
Button: _internal_ComponentMenuButton; | ||
/** @deprecated use `<MenuItems>` instead of `<Menu.Items>` */ | ||
Items: _internal_ComponentMenuItems; | ||
/** @deprecated use `<MenuItem>` instead of `<Menu.Item>` */ | ||
Item: _internal_ComponentMenuItem; | ||
/** @deprecated use `<MenuSection>` instead of `<Menu.Section>` */ | ||
Section: _internal_ComponentMenuSection; | ||
/** @deprecated use `<MenuHeading>` instead of `<Menu.Heading>` */ | ||
Heading: _internal_ComponentMenuHeading; | ||
/** @deprecated use `<MenuSeparator>` instead of `<Menu.Separator>` */ | ||
Separator: _internal_ComponentMenuSeparator; | ||
}; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import U,{Fragment as G,createContext as j,createRef as B,useCallback as y,useContext as Q,useEffect as W,useMemo as v,useReducer as V,useRef as _}from"react";import{match as K}from"../../utils/match.js";import{forwardRefWithAs as h,render as P,Features as H}from"../../utils/render.js";import{disposables as x}from"../../utils/disposables.js";import{useDisposables as N}from"../../hooks/use-disposables.js";import{useIsoMorphicEffect as E}from"../../hooks/use-iso-morphic-effect.js";import{useSyncRefs as D}from"../../hooks/use-sync-refs.js";import{useId as F}from"../../hooks/use-id.js";import{Keys as d}from"../keyboard.js";import{Focus as I,calculateActiveIndex as $}from"../../utils/calculate-active-index.js";import{isDisabledReactIssue7711 as q}from"../../utils/bugs.js";import{isFocusableElement as J,FocusableMode as z,sortByDomNode as X}from"../../utils/focus-management.js";import{useOutsideClick as Y}from"../../hooks/use-outside-click.js";import{useTreeWalker as Z}from"../../hooks/use-tree-walker.js";import{useOpenClosed as ee,State as L,OpenClosedProvider as te}from"../../internal/open-closed.js";import{useResolveButtonType as re}from"../../hooks/use-resolve-button-type.js";import{useOwnerDocument as ne}from"../../hooks/use-owner.js";var oe=(a=>(a[a.Open=0]="Open",a[a.Closed=1]="Closed",a))(oe||{}),ae=(a=>(a[a.Pointer=0]="Pointer",a[a.Other=1]="Other",a))(ae||{}),ie=(o=>(o[o.OpenMenu=0]="OpenMenu",o[o.CloseMenu=1]="CloseMenu",o[o.GoToItem=2]="GoToItem",o[o.Search=3]="Search",o[o.ClearSearch=4]="ClearSearch",o[o.RegisterItem=5]="RegisterItem",o[o.UnregisterItem=6]="UnregisterItem",o))(ie||{});function k(t,i=a=>a){let a=t.activeItemIndex!==null?t.items[t.activeItemIndex]:null,e=X(i(t.items.slice()),u=>u.dataRef.current.domRef.current),r=a?e.indexOf(a):null;return r===-1&&(r=null),{items:e,activeItemIndex:r}}let ue={[1](t){return t.menuState===1?t:{...t,activeItemIndex:null,menuState:1}},[0](t){return t.menuState===0?t:{...t,menuState:0}},[2]:(t,i)=>{var r;let a=k(t),e=$(i,{resolveItems:()=>a.items,resolveActiveIndex:()=>a.activeItemIndex,resolveId:u=>u.id,resolveDisabled:u=>u.dataRef.current.disabled});return{...t,...a,searchQuery:"",activeItemIndex:e,activationTrigger:(r=i.trigger)!=null?r:1}},[3]:(t,i)=>{let e=t.searchQuery!==""?0:1,r=t.searchQuery+i.value.toLowerCase(),s=(t.activeItemIndex!==null?t.items.slice(t.activeItemIndex+e).concat(t.items.slice(0,t.activeItemIndex+e)):t.items).find(l=>{var p;return((p=l.dataRef.current.textValue)==null?void 0:p.startsWith(r))&&!l.dataRef.current.disabled}),o=s?t.items.indexOf(s):-1;return o===-1||o===t.activeItemIndex?{...t,searchQuery:r}:{...t,searchQuery:r,activeItemIndex:o,activationTrigger:1}},[4](t){return t.searchQuery===""?t:{...t,searchQuery:"",searchActiveItemIndex:null}},[5]:(t,i)=>{let a=k(t,e=>[...e,{id:i.id,dataRef:i.dataRef}]);return{...t,...a}},[6]:(t,i)=>{let a=k(t,e=>{let r=e.findIndex(u=>u.id===i.id);return r!==-1&&e.splice(r,1),e});return{...t,...a,activationTrigger:1}}},w=j(null);w.displayName="MenuContext";function C(t){let i=Q(w);if(i===null){let a=new Error(`<${t} /> is missing a parent <Menu /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(a,C),a}return i}function se(t,i){return K(i.type,ue,t,i)}let le=G,ce=h(function(i,a){let e=V(se,{menuState:1,buttonRef:B(),itemsRef:B(),items:[],searchQuery:"",activeItemIndex:null,activationTrigger:1}),[{menuState:r,itemsRef:u,buttonRef:s},o]=e,l=D(a);Y([s,u],(M,R)=>{var T;r===0&&(o({type:1}),J(R,z.Loose)||(M.preventDefault(),(T=s.current)==null||T.focus()))});let p=v(()=>({open:r===0}),[r]),g=i,f={ref:l};return U.createElement(w.Provider,{value:e},U.createElement(te,{value:K(r,{[0]:L.Open,[1]:L.Closed})},P({ourProps:f,theirProps:g,slot:p,defaultTag:le,name:"Menu"})))}),pe="button",de=h(function(i,a){var T;let[e,r]=C("Menu.Button"),u=D(e.buttonRef,a),s=`headlessui-menu-button-${F()}`,o=N(),l=y(c=>{switch(c.key){case d.Space:case d.Enter:case d.ArrowDown:c.preventDefault(),c.stopPropagation(),r({type:0}),o.nextFrame(()=>r({type:2,focus:I.First}));break;case d.ArrowUp:c.preventDefault(),c.stopPropagation(),r({type:0}),o.nextFrame(()=>r({type:2,focus:I.Last}));break}},[r,o]),p=y(c=>{switch(c.key){case d.Space:c.preventDefault();break}},[]),g=y(c=>{if(q(c.currentTarget))return c.preventDefault();i.disabled||(e.menuState===0?(r({type:1}),o.nextFrame(()=>{var b;return(b=e.buttonRef.current)==null?void 0:b.focus({preventScroll:!0})})):(c.preventDefault(),c.stopPropagation(),r({type:0})))},[r,o,e,i.disabled]),f=v(()=>({open:e.menuState===0}),[e]),M=i,R={ref:u,id:s,type:re(i,e.buttonRef),"aria-haspopup":!0,"aria-controls":(T=e.itemsRef.current)==null?void 0:T.id,"aria-expanded":i.disabled?void 0:e.menuState===0,onKeyDown:l,onKeyUp:p,onClick:g};return P({ourProps:R,theirProps:M,slot:f,defaultTag:pe,name:"Menu.Button"})}),me="div",fe=H.RenderStrategy|H.Static,Te=h(function(i,a){var b,O;let[e,r]=C("Menu.Items"),u=D(e.itemsRef,a),s=ne(e.itemsRef),o=`headlessui-menu-items-${F()}`,l=N(),p=ee(),g=(()=>p!==null?p===L.Open:e.menuState===0)();W(()=>{let n=e.itemsRef.current;!n||e.menuState===0&&n!==(s==null?void 0:s.activeElement)&&n.focus({preventScroll:!0})},[e.menuState,e.itemsRef,s]),Z({container:e.itemsRef.current,enabled:e.menuState===0,accept(n){return n.getAttribute("role")==="menuitem"?NodeFilter.FILTER_REJECT:n.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(n){n.setAttribute("role","none")}});let f=y(n=>{var m,S;switch(l.dispose(),n.key){case d.Space:if(e.searchQuery!=="")return n.preventDefault(),n.stopPropagation(),r({type:3,value:n.key});case d.Enter:if(n.preventDefault(),n.stopPropagation(),r({type:1}),e.activeItemIndex!==null){let{dataRef:A}=e.items[e.activeItemIndex];(S=(m=A.current)==null?void 0:m.domRef.current)==null||S.click()}x().nextFrame(()=>{var A;return(A=e.buttonRef.current)==null?void 0:A.focus({preventScroll:!0})});break;case d.ArrowDown:return n.preventDefault(),n.stopPropagation(),r({type:2,focus:I.Next});case d.ArrowUp:return n.preventDefault(),n.stopPropagation(),r({type:2,focus:I.Previous});case d.Home:case d.PageUp:return n.preventDefault(),n.stopPropagation(),r({type:2,focus:I.First});case d.End:case d.PageDown:return n.preventDefault(),n.stopPropagation(),r({type:2,focus:I.Last});case d.Escape:n.preventDefault(),n.stopPropagation(),r({type:1}),x().nextFrame(()=>{var A;return(A=e.buttonRef.current)==null?void 0:A.focus({preventScroll:!0})});break;case d.Tab:n.preventDefault(),n.stopPropagation();break;default:n.key.length===1&&(r({type:3,value:n.key}),l.setTimeout(()=>r({type:4}),350));break}},[r,l,e,s]),M=y(n=>{switch(n.key){case d.Space:n.preventDefault();break}},[]),R=v(()=>({open:e.menuState===0}),[e]),T=i,c={"aria-activedescendant":e.activeItemIndex===null||(b=e.items[e.activeItemIndex])==null?void 0:b.id,"aria-labelledby":(O=e.buttonRef.current)==null?void 0:O.id,id:o,onKeyDown:f,onKeyUp:M,role:"menu",tabIndex:0,ref:u};return P({ourProps:c,theirProps:T,slot:R,defaultTag:me,features:fe,visible:g,name:"Menu.Items"})}),Ie=G,ye=h(function(i,a){let{disabled:e=!1,...r}=i,[u,s]=C("Menu.Item"),o=`headlessui-menu-item-${F()}`,l=u.activeItemIndex!==null?u.items[u.activeItemIndex].id===o:!1,p=_(null),g=D(a,p);E(()=>{if(u.menuState!==0||!l||u.activationTrigger===0)return;let n=x();return n.requestAnimationFrame(()=>{var m,S;(S=(m=p.current)==null?void 0:m.scrollIntoView)==null||S.call(m,{block:"nearest"})}),n.dispose},[p,l,u.menuState,u.activationTrigger,u.activeItemIndex]);let f=_({disabled:e,domRef:p});E(()=>{f.current.disabled=e},[f,e]),E(()=>{var n,m;f.current.textValue=(m=(n=p.current)==null?void 0:n.textContent)==null?void 0:m.toLowerCase()},[f,p]),E(()=>(s({type:5,id:o,dataRef:f}),()=>s({type:6,id:o})),[f,o]);let M=y(n=>{if(e)return n.preventDefault();s({type:1}),x().nextFrame(()=>{var m;return(m=u.buttonRef.current)==null?void 0:m.focus({preventScroll:!0})})},[s,u.buttonRef,e]),R=y(()=>{if(e)return s({type:2,focus:I.Nothing});s({type:2,focus:I.Specific,id:o})},[e,o,s]),T=y(()=>{e||l||s({type:2,focus:I.Specific,id:o,trigger:0})},[e,l,o,s]),c=y(()=>{e||!l||s({type:2,focus:I.Nothing})},[e,l,s]),b=v(()=>({active:l,disabled:e}),[l,e]);return P({ourProps:{id:o,ref:g,role:"menuitem",tabIndex:e===!0?void 0:-1,"aria-disabled":e===!0?!0:void 0,disabled:void 0,onClick:M,onFocus:R,onPointerMove:T,onMouseMove:T,onPointerLeave:c,onMouseLeave:c},theirProps:r,slot:b,defaultTag:Ie,name:"Menu.Item"})}),Qe=Object.assign(ce,{Button:de,Items:Te,Item:ye});export{Qe as Menu}; | ||
"use client";import{useFocusRing as le}from"@react-aria/focus";import{useHover as ue}from"@react-aria/interactions";import 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,60 +0,96 @@ | ||
import React, { Ref, MutableRefObject } from 'react'; | ||
import { Props } from '../../types'; | ||
import { PropsForFeatures } from '../../utils/render'; | ||
interface PopoverRenderPropArg { | ||
import React, { type ElementType, type MouseEventHandler, type MutableRefObject, type Ref } from 'react'; | ||
import { type AnchorProps } from '../../internal/floating.js'; | ||
import type { Props } from '../../types.js'; | ||
import { type HasDisplayName, type PropsForFeatures, type RefProp } from '../../utils/render.js'; | ||
type MouseEvent<T> = Parameters<MouseEventHandler<T>>[0]; | ||
declare let DEFAULT_POPOVER_TAG: "div"; | ||
type PopoverRenderPropArg = { | ||
open: boolean; | ||
close(focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null>): void; | ||
} | ||
interface ButtonRenderPropArg { | ||
close(focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null> | MouseEvent<HTMLElement>): void; | ||
}; | ||
type PopoverPropsWeControl = never; | ||
export type PopoverProps<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG> = Props<TTag, PopoverRenderPropArg, PopoverPropsWeControl, { | ||
__demoMode?: boolean; | ||
}>; | ||
declare function PopoverFn<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(props: PopoverProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_BUTTON_TAG: "button"; | ||
type ButtonRenderPropArg = { | ||
open: boolean; | ||
} | ||
declare type ButtonPropsWeControl = 'id' | 'type' | 'aria-expanded' | 'aria-controls' | 'onKeyDown' | 'onClick'; | ||
interface OverlayRenderPropArg { | ||
active: boolean; | ||
hover: boolean; | ||
focus: boolean; | ||
disabled: boolean; | ||
autofocus: boolean; | ||
}; | ||
type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded'; | ||
export type PopoverButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, { | ||
disabled?: boolean; | ||
autoFocus?: boolean; | ||
}>; | ||
declare function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: PopoverButtonProps<TTag>, ref: Ref<HTMLButtonElement>): React.JSX.Element; | ||
declare let DEFAULT_BACKDROP_TAG: "div"; | ||
type BackdropRenderPropArg = { | ||
open: boolean; | ||
} | ||
declare type OverlayPropsWeControl = 'id' | '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 = 'id' | 'onKeyDown'; | ||
declare let PanelRenderFeatures: number; | ||
interface GroupRenderPropArg { | ||
export interface _internal_ComponentPopoverButton extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: PopoverButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element; | ||
} | ||
declare type GroupPropsWeControl = 'id'; | ||
export declare let Popover: (<TTag extends React.ElementType<any> = "div">(props: Props<TTag, PopoverRenderPropArg, "1D45E01E-AF44-47C4-988A-19A94EBAF55C">, ref: Ref<HTMLElement>) => JSX.Element) & { | ||
displayName: string; | ||
} & { | ||
Button: (<TTag_1 extends React.ElementType<any> = "button">(props: Props<TTag_1, ButtonRenderPropArg, ButtonPropsWeControl>, ref: Ref<HTMLButtonElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Overlay: (<TTag_2 extends React.ElementType<any> = "div">(props: Props<TTag_2, OverlayRenderPropArg, OverlayPropsWeControl> & (({ | ||
static?: undefined; | ||
} & { | ||
unmount?: boolean | undefined; | ||
}) | ({ | ||
unmount?: undefined; | ||
} & { | ||
static?: boolean | undefined; | ||
})), ref: Ref<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Panel: (<TTag_3 extends React.ElementType<any> = "div">(props: Props<TTag_3, PanelRenderPropArg, PanelPropsWeControl> & (({ | ||
static?: undefined; | ||
} & { | ||
unmount?: boolean | undefined; | ||
}) | ({ | ||
unmount?: undefined; | ||
} & { | ||
static?: boolean | undefined; | ||
})) & { | ||
focus?: boolean | undefined; | ||
}, ref: Ref<HTMLDivElement>) => JSX.Element) & { | ||
displayName: string; | ||
}; | ||
Group: (<TTag_4 extends React.ElementType<any> = "div">(props: Props<TTag_4, GroupRenderPropArg, "id">, ref: Ref<HTMLElement>) => JSX.Element) & { | ||
displayName: string; | ||
}; | ||
export interface _internal_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 F,{createContext as D,useCallback as m,useContext as _,useEffect as x,useMemo as O,useReducer as le,useRef as M,useState as pe}from"react";import{match as j}from"../../utils/match.js";import{forwardRefWithAs as G,render as H,Features as K}from"../../utils/render.js";import{useSyncRefs as B}from"../../hooks/use-sync-refs.js";import{useId as $}from"../../hooks/use-id.js";import{Keys as A}from"../keyboard.js";import{isDisabledReactIssue7711 as ee}from"../../utils/bugs.js";import{getFocusableElements as w,Focus as I,focusIn as L,FocusResult as Y,isFocusableElement as ae,FocusableMode as ue}from"../../utils/focus-management.js";import{OpenClosedProvider as ie,State as U,useOpenClosed as te}from"../../internal/open-closed.js";import{useResolveButtonType as se}from"../../hooks/use-resolve-button-type.js";import{useOutsideClick as fe}from"../../hooks/use-outside-click.js";import{getOwnerDocument as Pe}from"../../utils/owner.js";import{useOwnerDocument as q}from"../../hooks/use-owner.js";import{useEventListener as W}from"../../hooks/use-event-listener.js";var ve=(f=>(f[f.Open=0]="Open",f[f.Closed=1]="Closed",f))(ve||{}),ce=(l=>(l[l.TogglePopover=0]="TogglePopover",l[l.ClosePopover=1]="ClosePopover",l[l.SetButton=2]="SetButton",l[l.SetButtonId=3]="SetButtonId",l[l.SetPanel=4]="SetPanel",l[l.SetPanelId=5]="SetPanelId",l))(ce||{});let de={[0]:a=>({...a,popoverState:j(a.popoverState,{[0]:1,[1]:0})}),[1](a){return a.popoverState===1?a:{...a,popoverState:1}},[2](a,o){return a.button===o.button?a:{...a,button:o.button}},[3](a,o){return a.buttonId===o.buttonId?a:{...a,buttonId:o.buttonId}},[4](a,o){return a.panel===o.panel?a:{...a,panel:o.panel}},[5](a,o){return a.panelId===o.panelId?a:{...a,panelId:o.panelId}}},z=D(null);z.displayName="PopoverContext";function N(a){let o=_(z);if(o===null){let f=new Error(`<${a} /> is missing a parent <Popover /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(f,N),f}return o}let J=D(null);J.displayName="PopoverAPIContext";function oe(a){let o=_(J);if(o===null){let f=new Error(`<${a} /> is missing a parent <Popover /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(f,oe),f}return o}let Q=D(null);Q.displayName="PopoverGroupContext";function re(){return _(Q)}let X=D(null);X.displayName="PopoverPanelContext";function ye(){return _(X)}function Te(a,o){return j(o.type,de,a,o)}let Ee="div",Se=G(function(o,f){let e=`headlessui-popover-button-${$()}`,P=`headlessui-popover-panel-${$()}`,n=M(null),l=B(f,n),i=q(n),s=le(Te,{popoverState:1,button:null,buttonId:e,panel:null,panelId:P}),[{popoverState:v,button:t,panel:E},u]=s;x(()=>u({type:3,buttonId:e}),[e,u]),x(()=>u({type:5,panelId:P}),[P,u]);let S=O(()=>({buttonId:e,panelId:P,close:()=>u({type:1})}),[e,P,u]),c=re(),d=c==null?void 0:c.registerPopover,p=m(()=>{var r;return(r=c==null?void 0:c.isFocusWithinPopoverGroup())!=null?r:(i==null?void 0:i.activeElement)&&((t==null?void 0:t.contains(i.activeElement))||(E==null?void 0:E.contains(i.activeElement)))},[c,t,E]);x(()=>d==null?void 0:d(S),[d,S]),W(i==null?void 0:i.defaultView,"focus",()=>{v===0&&(p()||!t||!E||u({type:1}))},!0),fe([t,E],(r,T)=>{v===0&&(u({type:1}),ae(T,ue.Loose)||(r.preventDefault(),t==null||t.focus()))});let y=m(r=>{u({type:1});let T=(()=>r?r instanceof HTMLElement?r:r.current instanceof HTMLElement?r.current:t:t)();T==null||T.focus()},[u,t]),b=O(()=>({close:y}),[y]),g=O(()=>({open:v===0,close:y}),[v,y]),C=o,h={ref:l};return F.createElement(z.Provider,{value:s},F.createElement(J.Provider,{value:b},F.createElement(ie,{value:j(v,{[0]:U.Open,[1]:U.Closed})},H({ourProps:h,theirProps:C,slot:g,defaultTag:Ee,name:"Popover"}))))}),be="button",me=G(function(o,f){let[e,P]=N("Popover.Button"),n=M(null),l=re(),i=l==null?void 0:l.closeOthers,s=ye(),v=s===null?!1:s===e.panelId,t=B(n,f,v?null:r=>P({type:2,button:r})),E=B(n,f),u=q(n),S=M(null),c=M(null);W(u==null?void 0:u.defaultView,"focus",()=>{c.current=S.current,S.current=u==null?void 0:u.activeElement},!0);let d=m(r=>{var T,R,k,V;if(v){if(e.popoverState===1)return;switch(r.key){case A.Space:case A.Enter:r.preventDefault(),(R=(T=r.target).click)==null||R.call(T),P({type:1}),(k=e.button)==null||k.focus();break}}else switch(r.key){case A.Space:case A.Enter:r.preventDefault(),r.stopPropagation(),e.popoverState===1&&(i==null||i(e.buttonId)),P({type:0});break;case A.Escape:if(e.popoverState!==0)return i==null?void 0:i(e.buttonId);if(!n.current||(u==null?void 0:u.activeElement)&&!n.current.contains(u.activeElement))return;r.preventDefault(),r.stopPropagation(),P({type:1});break;case A.Tab:if(e.popoverState!==0||!e.panel||!e.button)return;if(r.shiftKey){if(!c.current||(V=e.button)!=null&&V.contains(c.current)||e.panel.contains(c.current))return;let Z=w(u==null?void 0:u.body),ne=Z.indexOf(c.current);if(Z.indexOf(e.button)>ne)return;r.preventDefault(),r.stopPropagation(),L(e.panel,I.Last)}else r.preventDefault(),r.stopPropagation(),L(e.panel,I.First);break}},[P,e.popoverState,e.buttonId,e.button,e.panel,n,i,v]),p=m(r=>{var T;if(!v&&(r.key===A.Space&&r.preventDefault(),e.popoverState===0&&!!e.panel&&!!e.button))switch(r.key){case A.Tab:if(!c.current||(T=e.button)!=null&&T.contains(c.current)||e.panel.contains(c.current))return;let R=w(u==null?void 0:u.body),k=R.indexOf(c.current);if(R.indexOf(e.button)>k)return;r.preventDefault(),r.stopPropagation(),L(e.panel,I.Last);break}},[e.popoverState,e.panel,e.button,v]),y=m(r=>{var T,R;ee(r.currentTarget)||o.disabled||(v?(P({type:1}),(T=e.button)==null||T.focus()):(r.preventDefault(),r.stopPropagation(),e.popoverState===1&&(i==null||i(e.buttonId)),(R=e.button)==null||R.focus(),P({type:0})))},[P,e.button,e.popoverState,e.buttonId,o.disabled,i,v]),b=O(()=>({open:e.popoverState===0}),[e]),g=se(o,n),C=o,h=v?{ref:E,type:g,onKeyDown:d,onClick:y}:{ref:t,id:e.buttonId,type:g,"aria-expanded":o.disabled?void 0:e.popoverState===0,"aria-controls":e.panel?e.panelId:void 0,onKeyDown:d,onKeyUp:p,onClick:y};return H({ourProps:h,theirProps:C,slot:b,defaultTag:be,name:"Popover.Button"})}),ge="div",Ae=K.RenderStrategy|K.Static,Ce=G(function(o,f){let[{popoverState:e},P]=N("Popover.Overlay"),n=B(f),l=`headlessui-popover-overlay-${$()}`,i=te(),s=(()=>i!==null?i===U.Open:e===0)(),v=m(S=>{if(ee(S.currentTarget))return S.preventDefault();P({type:1})},[P]),t=O(()=>({open:e===0}),[e]);return H({ourProps:{ref:n,id:l,"aria-hidden":!0,onClick:v},theirProps:o,slot:t,defaultTag:ge,features:Ae,visible:s,name:"Popover.Overlay"})}),Re="div",Oe=K.RenderStrategy|K.Static,Ie=G(function(o,f){let{focus:e=!1,...P}=o,[n,l]=N("Popover.Panel"),{close:i}=oe("Popover.Panel"),s=M(null),v=B(s,f,p=>{l({type:4,panel:p})}),t=q(s),E=te(),u=(()=>E!==null?E===U.Open:n.popoverState===0)(),S=m(p=>{var y;switch(p.key){case A.Escape:if(n.popoverState!==0||!s.current||(t==null?void 0:t.activeElement)&&!s.current.contains(t.activeElement))return;p.preventDefault(),p.stopPropagation(),l({type:1}),(y=n.button)==null||y.focus();break}},[n,s,l]);x(()=>()=>l({type:4,panel:null}),[l]),x(()=>{var p;o.static||n.popoverState===1&&((p=o.unmount)!=null?p:!0)&&l({type:4,panel:null})},[n.popoverState,o.unmount,o.static,l]),x(()=>{if(!e||n.popoverState!==0||!s.current)return;let p=t==null?void 0:t.activeElement;s.current.contains(p)||L(s.current,I.First)},[e,s,n.popoverState]),W(t==null?void 0:t.defaultView,"keydown",p=>{var b;if(n.popoverState!==0||!s.current||p.key!==A.Tab||!(t!=null&&t.activeElement)||!s.current||!s.current.contains(t.activeElement))return;p.preventDefault();let y=L(s.current,p.shiftKey?I.Previous:I.Next);if(y===Y.Underflow)return(b=n.button)==null?void 0:b.focus();if(y===Y.Overflow){if(!n.button)return;let g=w(t.body),C=g.indexOf(n.button),h=g.splice(C+1).filter(r=>{var T;return!((T=s.current)!=null&&T.contains(r))});L(h,I.First)===Y.Error&&L(t.body,I.First)}}),W(t==null?void 0:t.defaultView,"focus",()=>{var p;!e||n.popoverState===0&&(!s.current||(t==null?void 0:t.activeElement)&&((p=s.current)==null?void 0:p.contains(t.activeElement))||l({type:1}))},!0);let c=O(()=>({open:n.popoverState===0,close:i}),[n,i]),d={ref:v,id:n.panelId,onKeyDown:S};return F.createElement(X.Provider,{value:n.panelId},H({ourProps:d,theirProps:P,slot:c,defaultTag:Re,features:Oe,visible:u,name:"Popover.Panel"}))}),Le="div",xe=G(function(o,f){let e=M(null),P=B(e,f),[n,l]=pe([]),i=m(d=>{l(p=>{let y=p.indexOf(d);if(y!==-1){let b=p.slice();return b.splice(y,1),b}return p})},[l]),s=m(d=>(l(p=>[...p,d]),()=>i(d)),[l,i]),v=m(()=>{var y;let d=Pe(e);if(!d)return!1;let p=d.activeElement;return(y=e.current)!=null&&y.contains(p)?!0:n.some(b=>{var g,C;return((g=d.getElementById(b.buttonId))==null?void 0:g.contains(p))||((C=d.getElementById(b.panelId))==null?void 0:C.contains(p))})},[e,n]),t=m(d=>{for(let p of n)p.buttonId!==d&&p.close()},[n]),E=O(()=>({registerPopover:s,unregisterPopover:i,isFocusWithinPopoverGroup:v,closeOthers:t}),[s,i,v,t]),u=O(()=>({}),[]),S=o,c={ref:P};return F.createElement(Q.Provider,{value:E},H({ourProps:c,theirProps:S,slot:u,defaultTag:Le,name:"Popover.Group"}))}),tt=Object.assign(Se,{Button:me,Overlay:Ce,Panel:Ie,Group:xe});export{tt as Popover}; | ||
"use client";import{useFocusRing as 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,28 +0,36 @@ | ||
import React, { MutableRefObject, Ref } from 'react'; | ||
import { Props } from '../../types'; | ||
interface PortalRenderPropArg { | ||
import React, { type ElementType, type MutableRefObject, type Ref } from 'react'; | ||
import type { Props } from '../../types.js'; | ||
import { type HasDisplayName, type RefProp } from '../../utils/render.js'; | ||
declare let DEFAULT_PORTAL_TAG: React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>; | ||
type PortalRenderPropArg = {}; | ||
type PortalPropsWeControl = never; | ||
export type PortalProps<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> = Props<TTag, PortalRenderPropArg, PortalPropsWeControl, { | ||
enabled?: boolean; | ||
}>; | ||
declare function PortalFn<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG>(props: PortalProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element | null; | ||
declare let DEFAULT_GROUP_TAG: React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>; | ||
type GroupRenderPropArg = {}; | ||
type GroupPropsWeControl = never; | ||
export type PortalGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag, GroupRenderPropArg, GroupPropsWeControl, { | ||
target: MutableRefObject<HTMLElement | null>; | ||
}>; | ||
declare function GroupFn<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: PortalGroupProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
export declare function useNestedPortals(): readonly [React.MutableRefObject<HTMLElement[]>, ({ children }: { | ||
children: React.ReactNode; | ||
}) => React.JSX.Element]; | ||
export interface _internal_ComponentPortal extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG>(props: PortalProps<TTag> & RefProp<typeof PortalFn>): JSX.Element; | ||
} | ||
interface GroupRenderPropArg { | ||
export interface _internal_ComponentPortalGroup extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: PortalGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element; | ||
} | ||
export declare let Portal: (<TTag extends React.ElementType<any> = React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>>(props: Props<TTag, PortalRenderPropArg, "1D45E01E-AF44-47C4-988A-19A94EBAF55C">, ref: Ref<HTMLElement>) => React.ReactPortal | null) & { | ||
displayName: string; | ||
} & { | ||
Group: (<TTag_1 extends React.ElementType<any> = React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>>(props: Omit<import("../../types").PropsOf<TTag_1>, "as" | "children" | "refName" | "className"> & { | ||
as?: TTag_1 | undefined; | ||
children?: React.ReactNode | ((bag: GroupRenderPropArg) => React.ReactElement<any, string | React.JSXElementConstructor<any>>); | ||
refName?: string | undefined; | ||
} & (import("../../types").PropsOf<TTag_1> extends { | ||
className?: any; | ||
} ? { | ||
className?: string | ((bag: GroupRenderPropArg) => string) | undefined; | ||
} : {}) & { | ||
target: MutableRefObject<HTMLElement | null>; | ||
}, ref: Ref<HTMLElement>) => JSX.Element) & { | ||
displayName: string; | ||
}; | ||
export declare let PortalGroup: _internal_ComponentPortalGroup; | ||
export declare let Portal: _internal_ComponentPortal & { | ||
/** @deprecated use `<PortalGroup>` instead of `<Portal.Group>` */ | ||
Group: _internal_ComponentPortalGroup; | ||
}; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import c,{Fragment as p,createContext as A,useContext as y,useEffect as d,useState as m,useRef as L}from"react";import{createPortal as b}from"react-dom";import{forwardRefWithAs as s,render as T}from"../../utils/render.js";import{useIsoMorphicEffect as h}from"../../hooks/use-iso-morphic-effect.js";import{usePortalRoot as G}from"../../internal/portal-force-root.js";import{useServerHandoffComplete as M}from"../../hooks/use-server-handoff-complete.js";import{optionalRef as v,useSyncRefs as P}from"../../hooks/use-sync-refs.js";import{useOwnerDocument as R}from"../../hooks/use-owner.js";function C(i){let n=G(),l=y(g),e=R(i),[r,a]=m(()=>{if(!n&&l!==null||typeof window=="undefined")return null;let o=e==null?void 0:e.getElementById("headlessui-portal-root");if(o)return o;if(e===null)return null;let t=e.createElement("div");return t.setAttribute("id","headlessui-portal-root"),e.body.appendChild(t)});return d(()=>{r!==null&&(e!=null&&e.body.contains(r)||e==null||e.body.appendChild(r))},[r,e]),d(()=>{n||l!==null&&a(l.current)},[l,a,n]),r}let O=p,H=s(function(n,l){let e=n,r=L(null),a=P(v(f=>{r.current=f}),l),o=R(r),t=C(r),[u]=m(()=>{var f;return typeof window=="undefined"?null:(f=o==null?void 0:o.createElement("div"))!=null?f:null}),E=M();return h(()=>{if(!!t&&!!u)return t.appendChild(u),()=>{var f;!t||!u||(t.removeChild(u),t.childNodes.length<=0&&((f=t.parentElement)==null||f.removeChild(t)))}},[t,u]),E?!t||!u?null:b(T({ourProps:{ref:a},theirProps:e,defaultTag:O,name:"Portal"}),u):null}),x=p,g=A(null),_=s(function(n,l){let{target:e,...r}=n,o={ref:P(l)};return c.createElement(g.Provider,{value:e},T({ourProps:o,theirProps:r,defaultTag:x,name:"Popover.Group"}))}),K=Object.assign(H,{Group:_});export{K as Portal}; | ||
"use client";import f,{Fragment as g,createContext as E,useContext as T,useEffect as R,useMemo as c,useRef as A,useState as G}from"react";import{createPortal as H}from"react-dom";import{useEvent as L}from'../../hooks/use-event.js';import{useIsoMorphicEffect as x}from'../../hooks/use-iso-morphic-effect.js';import{useOnUnmount as O}from'../../hooks/use-on-unmount.js';import{useOwnerDocument as _}from'../../hooks/use-owner.js';import{useServerHandoffComplete as h}from'../../hooks/use-server-handoff-complete.js';import{optionalRef as F,useSyncRefs as P}from'../../hooks/use-sync-refs.js';import{usePortalRoot as U}from'../../internal/portal-force-root.js';import{env as C}from'../../utils/env.js';import{forwardRefWithAs as m,render as d}from'../../utils/render.js';function D(p){let r=U(),l=T(v),e=_(p),[o,n]=G(()=>{var t;if(!r&&l!==null)return(t=l.current)!=null?t:null;if(C.isServer)return null;let u=e==null?void 0:e.getElementById("headlessui-portal-root");if(u)return u;if(e===null)return null;let a=e.createElement("div");return a.setAttribute("id","headlessui-portal-root"),e.body.appendChild(a)});return R(()=>{o!==null&&(e!=null&&e.body.contains(o)||e==null||e.body.appendChild(o))},[o,e]),R(()=>{r||l!==null&&n(l.current)},[l,n,r]),o}let M=g,N=m(function(r,l){let e=r,o=A(null),n=P(F(i=>{o.current=i}),l),u=_(o),a=D(o),[t]=G(()=>{var i;return C.isServer?null:(i=u==null?void 0:u.createElement("div"))!=null?i:null}),s=T(y),b=h();return x(()=>{!a||!t||a.contains(t)||(t.setAttribute("data-headlessui-portal",""),a.appendChild(t))},[a,t]),x(()=>{if(t&&s)return s.register(t)},[s,t]),O(()=>{var i;!a||!t||(t instanceof Node&&a.contains(t)&&a.removeChild(t),a.childNodes.length<=0&&((i=a.parentElement)==null||i.removeChild(a)))}),b?!a||!t?null:H(d({ourProps:{ref:n},theirProps:e,slot:{},defaultTag:M,name:"Portal"}),t):null});function S(p,r){let l=P(r),{enabled:e=!0,...o}=p;return e?f.createElement(N,{...o,ref:l}):d({ourProps:{ref:l},theirProps:o,slot:{},defaultTag:M,name:"Portal"})}let j=g,v=E(null);function W(p,r){let{target:l,...e}=p,n={ref:P(r)};return f.createElement(v.Provider,{value:l},d({ourProps:n,theirProps:e,defaultTag:j,name:"Popover.Group"}))}let y=E(null);function ee(){let p=T(y),r=A([]),l=L(n=>(r.current.push(n),p&&p.register(n),()=>e(n))),e=L(n=>{let u=r.current.indexOf(n);u!==-1&&r.current.splice(u,1),p&&p.unregister(n)}),o=c(()=>({register:l,unregister:e,portals:r}),[l,e,r]);return[r,c(()=>function({children:u}){return f.createElement(y.Provider,{value:o},u)},[o])]}let I=m(S),J=m(W),te=Object.assign(I,{Group:J});export{te as Portal,J as PortalGroup,ee as useNestedPortals}; |
@@ -1,43 +0,85 @@ | ||
import React, { Ref } from 'react'; | ||
import { Props } from '../../types'; | ||
interface RadioGroupRenderPropArg { | ||
} | ||
declare type RadioGroupPropsWeControl = 'role' | 'aria-labelledby' | 'aria-describedby' | 'id'; | ||
interface OptionRenderPropArg { | ||
import React, { type ElementType, type Ref } from 'react'; | ||
import { type ByComparator } from '../../hooks/use-by-comparator.js'; | ||
import type { Props } from '../../types.js'; | ||
import { type HasDisplayName, type RefProp } from '../../utils/render.js'; | ||
import { type _internal_ComponentDescription } from '../description/description.js'; | ||
import { type _internal_ComponentLabel } from '../label/label.js'; | ||
declare let DEFAULT_RADIO_GROUP_TAG: "div"; | ||
type RadioGroupRenderPropArg<TType> = { | ||
value: TType; | ||
}; | ||
type RadioGroupPropsWeControl = 'role' | 'aria-labelledby' | 'aria-describedby'; | ||
export type RadioGroupProps<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG, TType = string> = Props<TTag, RadioGroupRenderPropArg<TType>, RadioGroupPropsWeControl, { | ||
value?: TType; | ||
defaultValue?: TType; | ||
onChange?(value: TType): void; | ||
by?: ByComparator<TType>; | ||
disabled?: boolean; | ||
form?: string; | ||
name?: string; | ||
}>; | ||
declare function RadioGroupFn<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG, TType = string>(props: RadioGroupProps<TTag, TType>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_OPTION_TAG: "div"; | ||
type OptionRenderPropArg = { | ||
checked: boolean; | ||
/** @deprecated use `focus` instead */ | ||
active: boolean; | ||
hover: boolean; | ||
focus: boolean; | ||
autofocus: boolean; | ||
disabled: boolean; | ||
} | ||
declare type RadioPropsWeControl = 'aria-checked' | 'id' | 'onBlur' | 'onClick' | 'onFocus' | 'ref' | 'role' | 'tabIndex'; | ||
export declare let RadioGroup: (<TTag extends React.ElementType<any> = "div", TType = string>(props: Props<TTag, RadioGroupRenderPropArg, "value" | "name" | "disabled" | "onChange" | RadioGroupPropsWeControl> & { | ||
}; | ||
type OptionPropsWeControl = 'aria-checked' | 'aria-describedby' | 'aria-labelledby' | 'role' | 'tabIndex'; | ||
export type RadioOptionProps<TTag extends ElementType, TType> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, { | ||
value: TType; | ||
onChange(value: TType): void; | ||
disabled?: boolean | undefined; | ||
name?: string | undefined; | ||
}, ref: Ref<HTMLElement>) => JSX.Element) & { | ||
displayName: string; | ||
} & { | ||
Option: (<TTag_1 extends React.ElementType<any> = "div", TType_1 = unknown>(props: Props<TTag_1, OptionRenderPropArg, "value" | "disabled" | RadioPropsWeControl> & { | ||
value: TType_1; | ||
disabled?: boolean | undefined; | ||
}, ref: Ref<HTMLElement>) => JSX.Element) & { | ||
displayName: string; | ||
}; | ||
Label: (<TTag_2 extends React.ElementType<any> = "label">(props: Omit<import("../../types").PropsOf<TTag_2>, "id" | ("as" | "children" | "refName" | "className")> & { | ||
as?: TTag_2 | undefined; | ||
children?: React.ReactNode | ((bag: {}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>); | ||
refName?: string | undefined; | ||
} & (import("../../types").PropsOf<TTag_2> extends { | ||
className?: any; | ||
} ? { | ||
className?: string | ((bag: {}) => string) | undefined; | ||
} : {}) & { | ||
passive?: boolean | undefined; | ||
}, ref: React.Ref<HTMLLabelElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Description: (<TTag_3 extends React.ElementType<any> = "p">(props: Props<TTag_3, {}, "id">, ref: React.Ref<HTMLParagraphElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
disabled?: boolean; | ||
autoFocus?: boolean; | ||
}>; | ||
declare function OptionFn<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = Parameters<typeof RadioGroupRoot>[0]['value']>(props: RadioOptionProps<TTag, TType>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_RADIO_TAG: "span"; | ||
type RadioRenderPropArg = { | ||
checked: boolean; | ||
hover: boolean; | ||
focus: boolean; | ||
autofocus: boolean; | ||
disabled: boolean; | ||
}; | ||
type RadioPropsWeControl = 'aria-checked' | 'aria-describedby' | 'aria-labelledby' | 'role' | 'tabIndex'; | ||
export type RadioProps<TTag extends ElementType = typeof DEFAULT_RADIO_TAG, TType = string> = Props<TTag, RadioRenderPropArg, RadioPropsWeControl, { | ||
value: TType; | ||
disabled?: boolean; | ||
autoFocus?: boolean; | ||
}>; | ||
declare function RadioFn<TTag extends ElementType = typeof DEFAULT_RADIO_TAG, TType = Parameters<typeof RadioGroupRoot>[0]['value']>(props: RadioProps<TTag, TType>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
export interface _internal_ComponentRadioGroup extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG, TType = string>(props: RadioGroupProps<TTag, TType> & RefProp<typeof RadioGroupFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentRadioOption extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string>(props: RadioOptionProps<TTag, TType> & RefProp<typeof OptionFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentRadio extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_RADIO_TAG, TType = string>(props: RadioProps<TTag, TType> & RefProp<typeof RadioFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentRadioLabel extends _internal_ComponentLabel { | ||
} | ||
export interface _internal_ComponentRadioDescription extends _internal_ComponentDescription { | ||
} | ||
declare let RadioGroupRoot: _internal_ComponentRadioGroup; | ||
/** @deprecated use `<Radio>` instead of `<RadioGroupOption>` */ | ||
export declare let RadioGroupOption: _internal_ComponentRadioOption; | ||
export declare let Radio: _internal_ComponentRadio; | ||
/** @deprecated use `<Label>` instead of `<RadioGroupLabel>` */ | ||
export declare let RadioGroupLabel: _internal_ComponentRadioLabel; | ||
/** @deprecated use `<Description>` instead of `<RadioGroupDescription>` */ | ||
export declare let RadioGroupDescription: _internal_ComponentRadioDescription; | ||
export declare let RadioGroup: _internal_ComponentRadioGroup & { | ||
/** @deprecated use `<Radio>` instead of `<RadioGroup.Option>` */ | ||
Option: _internal_ComponentRadioOption; | ||
/** @deprecated use `<Radio>` instead of `<RadioGroup.Radio>` */ | ||
Radio: _internal_ComponentRadio; | ||
/** @deprecated use `<Label>` instead of `<RadioGroup.Label>` */ | ||
Label: _internal_ComponentRadioLabel; | ||
/** @deprecated use `<Description>` instead of `<RadioGroup.Description>` */ | ||
Description: _internal_ComponentRadioDescription; | ||
}; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import O,{createContext as Q,useCallback as v,useContext as V,useMemo as F,useReducer as X,useRef as M}from"react";import{forwardRefWithAs as N,render as W,compact as Y}from"../../utils/render.js";import{useId as K}from"../../hooks/use-id.js";import{match as Z}from"../../utils/match.js";import{useIsoMorphicEffect as w}from"../../hooks/use-iso-morphic-effect.js";import{Keys as P}from"../../components/keyboard.js";import{focusIn as j,Focus as x,FocusResult as B,sortByDomNode as ee}from"../../utils/focus-management.js";import{useFlags as te}from"../../hooks/use-flags.js";import{Label as re,useLabels as $}from"../../components/label/label.js";import{Description as oe,useDescriptions as J}from"../../components/description/description.js";import{useTreeWalker as ie}from"../../hooks/use-tree-walker.js";import{useSyncRefs as q}from"../../hooks/use-sync-refs.js";import{VisuallyHidden as ne}from"../../internal/visually-hidden.js";import{attemptSubmit as ae,objectToFormEntries as le}from"../../utils/form.js";import{getOwnerDocument as pe}from"../../utils/owner.js";var de=(t=>(t[t.RegisterOption=0]="RegisterOption",t[t.UnregisterOption=1]="UnregisterOption",t))(de||{});let se={[0](n,o){let t=[...n.options,{id:o.id,element:o.element,propsRef:o.propsRef}];return{...n,options:ee(t,r=>r.element.current)}},[1](n,o){let t=n.options.slice(),r=n.options.findIndex(m=>m.id===o.id);return r===-1?n:(t.splice(r,1),{...n,options:t})}},U=Q(null);U.displayName="RadioGroupContext";function z(n){let o=V(U);if(o===null){let t=new Error(`<${n} /> is missing a parent <RadioGroup /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(t,z),t}return o}function ue(n,o){return Z(o.type,se,n,o)}let ce="div",fe=N(function(o,t){let{value:r,name:m,onChange:f,disabled:R=!1,...I}=o,[{options:a},A]=X(ue,{options:[]}),[T,C]=$(),[k,c]=J(),y=`headlessui-radiogroup-${K()}`,g=M(null),b=q(g,t),E=F(()=>a.find(e=>!e.propsRef.current.disabled),[a]),D=F(()=>a.some(e=>e.propsRef.current.value===r),[a,r]),s=v(e=>{var i;if(R||e===r)return!1;let d=(i=a.find(p=>p.propsRef.current.value===e))==null?void 0:i.propsRef.current;return d!=null&&d.disabled?!1:(f(e),!0)},[f,r,R,a]);ie({container:g.current,accept(e){return e.getAttribute("role")==="radio"?NodeFilter.FILTER_REJECT:e.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(e){e.setAttribute("role","none")}});let h=v(e=>{let d=g.current;if(!d)return;let i=pe(d),p=a.filter(l=>l.propsRef.current.disabled===!1).map(l=>l.element.current);switch(e.key){case P.Enter:ae(e.currentTarget);break;case P.ArrowLeft:case P.ArrowUp:if(e.preventDefault(),e.stopPropagation(),j(p,x.Previous|x.WrapAround)===B.Success){let u=a.find(G=>G.element.current===(i==null?void 0:i.activeElement));u&&s(u.propsRef.current.value)}break;case P.ArrowRight:case P.ArrowDown:if(e.preventDefault(),e.stopPropagation(),j(p,x.Next|x.WrapAround)===B.Success){let u=a.find(G=>G.element.current===(i==null?void 0:i.activeElement));u&&s(u.propsRef.current.value)}break;case P.Space:{e.preventDefault(),e.stopPropagation();let l=a.find(u=>u.element.current===(i==null?void 0:i.activeElement));l&&s(l.propsRef.current.value)}break}},[g,a,s]),L=v(e=>(A({type:0,...e}),()=>A({type:1,id:e.id})),[A]),S=F(()=>({registerOption:L,firstOption:E,containsCheckedOption:D,change:s,disabled:R,value:r}),[L,E,D,s,R,r]),_={ref:b,id:y,role:"radiogroup","aria-labelledby":T,"aria-describedby":k,onKeyDown:h};return O.createElement(c,{name:"RadioGroup.Description"},O.createElement(C,{name:"RadioGroup.Label"},O.createElement(U.Provider,{value:S},m!=null&&r!=null&&le({[m]:r}).map(([e,d])=>O.createElement(ne,{...Y({key:e,as:"input",type:"radio",checked:d!=null,hidden:!0,readOnly:!0,name:e,value:d})})),W({ourProps:_,theirProps:I,defaultTag:ce,name:"RadioGroup"}))))});var be=(t=>(t[t.Empty=1]="Empty",t[t.Active=2]="Active",t))(be||{});let me="div",Re=N(function(o,t){let r=M(null),m=q(r,t),f=`headlessui-radiogroup-option-${K()}`,[R,I]=$(),[a,A]=J(),{addFlag:T,removeFlag:C,hasFlag:k}=te(1),{value:c,disabled:y=!1,...g}=o,b=M({value:c,disabled:y});w(()=>{b.current.value=c},[c,b]),w(()=>{b.current.disabled=y},[y,b]);let{registerOption:E,disabled:D,change:s,firstOption:h,containsCheckedOption:L,value:S}=z("RadioGroup.Option");w(()=>E({id:f,element:r,propsRef:b}),[f,E,r,o]);let _=v(()=>{var H;!s(c)||(T(2),(H=r.current)==null||H.focus())},[T,s,c]),e=v(()=>T(2),[T]),d=v(()=>C(2),[C]),i=(h==null?void 0:h.id)===f,p=D||y,l=S===c,u={ref:m,id:f,role:"radio","aria-checked":l?"true":"false","aria-labelledby":R,"aria-describedby":a,"aria-disabled":p?!0:void 0,tabIndex:(()=>p?-1:l||!L&&i?0:-1)(),onClick:p?void 0:_,onFocus:p?void 0:e,onBlur:p?void 0:d},G=F(()=>({checked:l,disabled:p,active:k(2)}),[l,p,k]);return O.createElement(A,{name:"RadioGroup.Description"},O.createElement(I,{name:"RadioGroup.Label"},W({ourProps:u,theirProps:g,slot:G,defaultTag:me,name:"RadioGroup.Option"})))}),Ne=Object.assign(fe,{Option:Re,Label:re,Description:oe});export{Ne as RadioGroup}; | ||
"use client";import{useFocusRing as Q}from"@react-aria/focus";import{useHover as Y}from"@react-aria/interactions";import G,{createContext as Z,useCallback as ye,useContext as ee,useMemo as x,useReducer as Re,useRef as W}from"react";import{useByComparator as be}from'../../hooks/use-by-comparator.js';import{useControllable as ge}from'../../hooks/use-controllable.js';import{useDefaultValue as Oe}from'../../hooks/use-default-value.js';import{useEvent as S}from'../../hooks/use-event.js';import{useId as B}from'../../hooks/use-id.js';import{useIsoMorphicEffect as te}from'../../hooks/use-iso-morphic-effect.js';import{useLatestValue as oe}from'../../hooks/use-latest-value.js';import{useSyncRefs as V}from'../../hooks/use-sync-refs.js';import{useDisabled as re}from'../../internal/disabled.js';import{FormFields as Pe}from'../../internal/form-fields.js';import{useProvidedId as ve}from'../../internal/id.js';import{isDisabledReactIssue7711 as ie}from'../../utils/bugs.js';import{Focus as w,FocusResult as ne,focusIn as ae,sortByDomNode as De}from'../../utils/focus-management.js';import{attemptSubmit as Ae}from'../../utils/form.js';import{match as _e}from'../../utils/match.js';import{getOwnerDocument as Ee}from'../../utils/owner.js';import{forwardRefWithAs as K,mergeProps as pe,render as $}from'../../utils/render.js';import{Description as Ge,useDescribedBy as xe,useDescriptions as le}from'../description/description.js';import{Keys as F}from'../keyboard.js';import{Label as Ce,useLabelledBy as he,useLabels as se}from'../label/label.js';var Le=(e=>(e[e.RegisterOption=0]="RegisterOption",e[e.UnregisterOption=1]="UnregisterOption",e))(Le||{});let ke={[0](o,t){let e=[...o.options,{id:t.id,element:t.element,propsRef:t.propsRef}];return{...o,options:De(e,a=>a.element.current)}},[1](o,t){let e=o.options.slice(),a=o.options.findIndex(O=>O.id===t.id);return a===-1?o:(e.splice(a,1),{...o,options:e})}},j=Z(null);j.displayName="RadioGroupDataContext";function J(o){let t=ee(j);if(t===null){let e=new Error(`<${o} /> is missing a parent <RadioGroup /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(e,J),e}return t}let X=Z(null);X.displayName="RadioGroupActionsContext";function z(o){let t=ee(X);if(t===null){let e=new Error(`<${o} /> is missing a parent <RadioGroup /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(e,z),e}return t}function Fe(o,t){return _e(t.type,ke,o,t)}let Ie="div";function Ue(o,t){let e=B(),a=re(),{id:O=`headlessui-radiogroup-${e}`,value:m,form:P,name:i,onChange:f,by:c,disabled:p=a||!1,defaultValue:I,...y}=o,T=be(c),[v,C]=Re(Fe,{options:[]}),n=v.options,[U,h]=se(),[D,L]=le(),A=W(null),M=V(A,t),l=Oe(I),[s,_]=ge(m,f,l),R=x(()=>n.find(r=>!r.propsRef.current.disabled),[n]),b=x(()=>n.some(r=>T(r.propsRef.current.value,s)),[n,s]),d=S(r=>{var u;if(p||T(r,s))return!1;let k=(u=n.find(H=>T(H.propsRef.current.value,r)))==null?void 0:u.propsRef.current;return k!=null&&k.disabled?!1:(_==null||_(r),!0)}),de=S(r=>{let k=A.current;if(!k)return;let u=Ee(k),H=n.filter(g=>g.propsRef.current.disabled===!1).map(g=>g.element.current);switch(r.key){case F.Enter:Ae(r.currentTarget);break;case F.ArrowLeft:case F.ArrowUp:if(r.preventDefault(),r.stopPropagation(),ae(H,w.Previous|w.WrapAround)===ne.Success){let E=n.find(N=>N.element.current===(u==null?void 0:u.activeElement));E&&d(E.propsRef.current.value)}break;case F.ArrowRight:case F.ArrowDown:if(r.preventDefault(),r.stopPropagation(),ae(H,w.Next|w.WrapAround)===ne.Success){let E=n.find(N=>N.element.current===(u==null?void 0:u.activeElement));E&&d(E.propsRef.current.value)}break;case F.Space:{r.preventDefault(),r.stopPropagation();let g=n.find(E=>E.element.current===(u==null?void 0:u.activeElement));g&&d(g.propsRef.current.value)}break}}),q=S(r=>(C({type:0,...r}),()=>C({type:1,id:r.id}))),ue=x(()=>({value:s,firstOption:R,containsCheckedOption:b,disabled:p,compare:T,...v}),[s,R,b,p,T,v]),ce=x(()=>({registerOption:q,change:d}),[q,d]),fe={ref:M,id:O,role:"radiogroup","aria-labelledby":U,"aria-describedby":D,onKeyDown:de},Te=x(()=>({value:s}),[s]),me=ye(()=>{if(l!==void 0)return d(l)},[d,l]);return G.createElement(L,{name:"RadioGroup.Description"},G.createElement(h,{name:"RadioGroup.Label"},G.createElement(X.Provider,{value:ce},G.createElement(j.Provider,{value:ue},i!=null&&G.createElement(Pe,{disabled:p,data:{[i]:s||"on"},overrides:{type:"radio",checked:s!=null},form:P,onReset:me}),$({ourProps:fe,theirProps:y,slot:Te,defaultTag:Ie,name:"RadioGroup"})))))}let Me="div";function Se(o,t){var R;let e=J("RadioGroup.Option"),a=z("RadioGroup.Option"),O=B(),{id:m=`headlessui-radiogroup-option-${O}`,value:P,disabled:i=e.disabled||!1,autoFocus:f=!1,...c}=o,p=W(null),I=V(p,t),[y,T]=se(),[v,C]=le(),n=oe({value:P,disabled:i});te(()=>a.registerOption({id:m,element:p,propsRef:n}),[m,a,p,n]);let U=S(b=>{var d;if(ie(b.currentTarget))return b.preventDefault();a.change(P)&&((d=p.current)==null||d.focus())}),h=((R=e.firstOption)==null?void 0:R.id)===m,{isFocusVisible:D,focusProps:L}=Q({autoFocus:f}),{isHovered:A,hoverProps:M}=Y({isDisabled:i}),l=e.compare(e.value,P),s=pe({ref:I,id:m,role:"radio","aria-checked":l?"true":"false","aria-labelledby":y,"aria-describedby":v,"aria-disabled":i?!0:void 0,tabIndex:(()=>i?-1:l||!e.containsCheckedOption&&h?0:-1)(),onClick:i?void 0:U,autoFocus:f},L,M),_=x(()=>({checked:l,disabled:i,active:D,hover:A,focus:D,autofocus:f}),[l,i,A,D,f]);return G.createElement(C,{name:"RadioGroup.Description"},G.createElement(T,{name:"RadioGroup.Label"},$({ourProps:s,theirProps:c,slot:_,defaultTag:Me,name:"RadioGroup.Option"})))}let He="span";function we(o,t){var R;let e=J("Radio"),a=z("Radio"),O=B(),m=ve(),P=re(),{id:i=m||`headlessui-radio-${O}`,value:f,disabled:c=e.disabled||P||!1,autoFocus:p=!1,...I}=o,y=W(null),T=V(y,t),v=he(),C=xe(),n=oe({value:f,disabled:c});te(()=>a.registerOption({id:i,element:y,propsRef:n}),[i,a,y,n]);let U=S(b=>{var d;if(ie(b.currentTarget))return b.preventDefault();a.change(f)&&((d=y.current)==null||d.focus())}),{isFocusVisible:h,focusProps:D}=Q({autoFocus:p}),{isHovered:L,hoverProps:A}=Y({isDisabled:c}),M=((R=e.firstOption)==null?void 0:R.id)===i,l=e.compare(e.value,f),s=pe({ref:T,id:i,role:"radio","aria-checked":l?"true":"false","aria-labelledby":v,"aria-describedby":C,"aria-disabled":c?!0:void 0,tabIndex:(()=>c?-1:l||!e.containsCheckedOption&&M?0:-1)(),autoFocus:p,onClick:c?void 0:U},D,A),_=x(()=>({checked:l,disabled:c,hover:L,focus:h,autofocus:p}),[l,c,L,h,p]);return $({ourProps:s,theirProps:I,slot:_,defaultTag:He,name:"Radio"})}let Ne=K(Ue),We=K(Se),Be=K(we),Ve=Ce,Ke=Ge,Tt=Object.assign(Ne,{Option:We,Radio:Be,Label:Ve,Description:Ke});export{Be as Radio,Tt as RadioGroup,Ke as RadioGroupDescription,Ve as RadioGroupLabel,We as RadioGroupOption}; |
@@ -1,37 +0,58 @@ | ||
import React, { ElementType, Ref } from 'react'; | ||
import { Props } from '../../types'; | ||
import React, { type ElementType, type Ref } from 'react'; | ||
import type { Props } from '../../types.js'; | ||
import { type HasDisplayName, type RefProp } from '../../utils/render.js'; | ||
import { type _internal_ComponentDescription } from '../description/description.js'; | ||
import { type _internal_ComponentLabel } from '../label/label.js'; | ||
declare let DEFAULT_GROUP_TAG: React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>; | ||
declare function Group<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: Props<TTag>): JSX.Element; | ||
interface SwitchRenderPropArg { | ||
export type SwitchGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag>; | ||
declare function GroupFn<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: SwitchGroupProps<TTag>): React.JSX.Element; | ||
declare let DEFAULT_SWITCH_TAG: "button"; | ||
type SwitchRenderPropArg = { | ||
checked: boolean; | ||
hover: boolean; | ||
focus: boolean; | ||
active: boolean; | ||
autofocus: boolean; | ||
changing: boolean; | ||
disabled: boolean; | ||
}; | ||
type SwitchPropsWeControl = 'aria-checked' | 'aria-describedby' | 'aria-labelledby' | 'role'; | ||
export type SwitchProps<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> = Props<TTag, SwitchRenderPropArg, SwitchPropsWeControl, { | ||
checked?: boolean; | ||
defaultChecked?: boolean; | ||
onChange?(checked: boolean): void; | ||
name?: string; | ||
value?: string; | ||
form?: string; | ||
autoFocus?: boolean; | ||
disabled?: boolean; | ||
tabIndex?: number; | ||
}>; | ||
declare function SwitchFn<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(props: SwitchProps<TTag>, ref: Ref<HTMLButtonElement>): React.JSX.Element; | ||
export interface _internal_ComponentSwitch extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(props: SwitchProps<TTag> & RefProp<typeof SwitchFn>): JSX.Element; | ||
} | ||
declare type SwitchPropsWeControl = 'id' | 'role' | 'tabIndex' | 'aria-checked' | 'aria-labelledby' | 'aria-describedby' | 'onClick' | 'onKeyUp' | 'onKeyPress'; | ||
export declare let Switch: (<TTag extends React.ElementType<any> = "button">(props: Props<TTag, SwitchRenderPropArg, "value" | "name" | "onChange" | "checked" | SwitchPropsWeControl> & { | ||
checked: boolean; | ||
onChange(checked: boolean): void; | ||
name?: string | undefined; | ||
value?: string | undefined; | ||
}, ref: Ref<HTMLElement>) => JSX.Element) & { | ||
displayName: string; | ||
} & { | ||
Group: typeof Group; | ||
Label: (<TTag_1 extends React.ElementType<any> = "label">(props: Omit<import("../../types").PropsOf<TTag_1>, "id" | ("as" | "children" | "refName" | "className")> & { | ||
as?: TTag_1 | undefined; | ||
children?: React.ReactNode | ((bag: {}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>); | ||
refName?: string | undefined; | ||
} & (import("../../types").PropsOf<TTag_1> extends { | ||
className?: any; | ||
} ? { | ||
className?: string | ((bag: {}) => string) | undefined; | ||
} : {}) & { | ||
passive?: boolean | undefined; | ||
}, ref: React.Ref<HTMLLabelElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Description: (<TTag_2 extends React.ElementType<any> = "p">(props: Props<TTag_2, {}, "id">, ref: React.Ref<HTMLParagraphElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
export interface _internal_ComponentSwitchGroup extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: SwitchGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentSwitchLabel extends _internal_ComponentLabel { | ||
} | ||
export interface _internal_ComponentSwitchDescription extends _internal_ComponentDescription { | ||
} | ||
/** @deprecated use `<Field>` instead of `<SwitchGroup>` */ | ||
export declare let SwitchGroup: _internal_ComponentSwitchGroup; | ||
/** @deprecated use `<Label>` instead of `<SwitchLabel>` */ | ||
export declare let SwitchLabel: _internal_ComponentSwitchLabel; | ||
/** @deprecated use `<Description>` instead of `<SwitchDescription>` */ | ||
export declare let SwitchDescription: _internal_ComponentSwitchDescription; | ||
export declare let Switch: _internal_ComponentSwitch & { | ||
/** @deprecated use `<Field>` instead of `<Switch.Group>` */ | ||
Group: _internal_ComponentSwitchGroup; | ||
/** @deprecated use `<Label>` instead of `<Switch.Label>` */ | ||
Label: _internal_ComponentSwitchLabel; | ||
/** @deprecated use `<Description>` instead of `<Switch.Description>` */ | ||
Description: _internal_ComponentSwitchDescription; | ||
}; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import l,{Fragment as D,createContext as k,useCallback as c,useContext as L,useMemo as b,useState as R,useRef as C}from"react";import{forwardRefWithAs as A,render as y,compact as G}from"../../utils/render.js";import{useId as K}from"../../hooks/use-id.js";import{Keys as T}from"../keyboard.js";import{isDisabledReactIssue7711 as M}from"../../utils/bugs.js";import{Label as H,useLabels as x}from"../label/label.js";import{Description as U,useDescriptions as _}from"../description/description.js";import{useResolveButtonType as B}from"../../hooks/use-resolve-button-type.js";import{useSyncRefs as I}from"../../hooks/use-sync-refs.js";import{VisuallyHidden as F}from"../../internal/visually-hidden.js";import{attemptSubmit as W}from"../../utils/form.js";let m=k(null);m.displayName="GroupContext";let O=D;function j(f){let[n,i]=R(null),[e,a]=x(),[o,d]=_(),u=b(()=>({switch:n,setSwitch:i,labelledby:e,describedby:o}),[n,i,e,o]),p={},t=f;return l.createElement(d,{name:"Switch.Description"},l.createElement(a,{name:"Switch.Label",props:{onClick(){!n||(n.click(),n.focus({preventScroll:!0}))}}},l.createElement(m.Provider,{value:u},y({ourProps:p,theirProps:t,defaultTag:O,name:"Switch.Group"}))))}let N="button",V=A(function(n,i){let{checked:e,onChange:a,name:o,value:d,...u}=n,p=`headlessui-switch-${K()}`,t=L(m),h=C(null),S=I(h,i,t===null?null:t.setSwitch),s=c(()=>a(!e),[a,e]),w=c(r=>{if(M(r.currentTarget))return r.preventDefault();r.preventDefault(),s()},[s]),E=c(r=>{r.key===T.Space?(r.preventDefault(),s()):r.key===T.Enter&&W(r.currentTarget)},[s]),P=c(r=>r.preventDefault(),[]),v=b(()=>({checked:e}),[e]),g={id:p,ref:S,role:"switch",type:B(n,h),tabIndex:0,"aria-checked":e,"aria-labelledby":t==null?void 0:t.labelledby,"aria-describedby":t==null?void 0:t.describedby,onClick:w,onKeyUp:E,onKeyPress:P};return l.createElement(l.Fragment,null,o!=null&&e&&l.createElement(F,{...G({as:"input",type:"checkbox",hidden:!0,readOnly:!0,checked:e,name:o,value:d})}),y({ourProps:g,theirProps:u,slot:v,defaultTag:N,name:"Switch"}))}),ce=Object.assign(V,{Group:j,Label:H,Description:U});export{ce as Switch}; | ||
"use client";import{useFocusRing as $}from"@react-aria/focus";import{useHover as q}from"@react-aria/interactions";import i,{Fragment as z,createContext as Q,useCallback as Y,useContext as Z,useMemo as L,useRef as ee,useState as G}from"react";import{useActivePress as te}from'../../hooks/use-active-press.js';import{useControllable as oe}from'../../hooks/use-controllable.js';import{useDefaultValue as re}from'../../hooks/use-default-value.js';import{useDisposables as ne}from'../../hooks/use-disposables.js';import{useEvent as m}from'../../hooks/use-event.js';import{useId as le}from'../../hooks/use-id.js';import{useResolveButtonType as ie}from'../../hooks/use-resolve-button-type.js';import{useSyncRefs as ae}from'../../hooks/use-sync-refs.js';import{useDisabled as se}from'../../internal/disabled.js';import{FormFields as pe}from'../../internal/form-fields.js';import{useProvidedId as ce}from'../../internal/id.js';import{isDisabledReactIssue7711 as ue}from'../../utils/bugs.js';import{attemptSubmit as de}from'../../utils/form.js';import{forwardRefWithAs as me,mergeProps as fe,render as R}from'../../utils/render.js';import{Description as be,useDescribedBy as he,useDescriptions as Te}from'../description/description.js';import{Keys as A}from'../keyboard.js';import{Label as ye,useLabelledBy as Se,useLabels as we}from'../label/label.js';let S=Q(null);S.displayName="GroupContext";let _e=z;function Pe(n){var a;let[o,p]=G(null),[f,b]=we(),[h,t]=Te(),c=L(()=>({switch:o,setSwitch:p}),[o,p]),T={},y=n;return i.createElement(t,{name:"Switch.Description",value:h},i.createElement(b,{name:"Switch.Label",value:f,props:{htmlFor:(a=c.switch)==null?void 0:a.id,onClick(u){o&&(u.currentTarget instanceof HTMLLabelElement&&u.preventDefault(),o.click(),o.focus({preventScroll:!0}))}}},i.createElement(S.Provider,{value:c},R({ourProps:T,theirProps:y,slot:{},defaultTag:_e,name:"Switch.Group"}))))}let Ee="button";function De(n,o){var C;let p=le(),f=ce(),b=se(),{id:h=f||`headlessui-switch-${p}`,disabled:t=b||!1,checked:c,defaultChecked:T,onChange:y,name:a,value:u,form:F,autoFocus:d=!1,...k}=n,w=Z(S),_=ee(null),H=ae(_,o,w===null?null:w.setSwitch),l=re(T),[s,r]=oe(c,y,l!=null?l:!1),M=ne(),[P,E]=G(!1),D=m(()=>{E(!0),r==null||r(!s),M.nextFrame(()=>{E(!1)})}),U=m(e=>{if(ue(e.currentTarget))return e.preventDefault();e.preventDefault(),D()}),I=m(e=>{e.key===A.Space?(e.preventDefault(),D()):e.key===A.Enter&&de(e.currentTarget)}),B=m(e=>e.preventDefault()),K=Se(),W=he(),{isFocusVisible:g,focusProps:O}=$({autoFocus:d}),{isHovered:v,hoverProps:N}=q({isDisabled:t}),{pressed:x,pressProps:J}=te({disabled:t}),V=L(()=>({checked:s,disabled:t,hover:v,focus:g,active:x,autofocus:d,changing:P}),[s,v,g,x,t,P,d]),X=fe({id:h,ref:H,role:"switch",type:ie(n,_),tabIndex:n.tabIndex===-1?0:(C=n.tabIndex)!=null?C:0,"aria-checked":s,"aria-labelledby":K,"aria-describedby":W,disabled:t||void 0,autoFocus:d,onClick:U,onKeyUp:I,onKeyPress:B},O,N,J),j=Y(()=>{if(l!==void 0)return r==null?void 0:r(l)},[r,l]);return i.createElement(i.Fragment,null,a!=null&&i.createElement(pe,{disabled:t,data:{[a]:u||"on"},overrides:{type:"checkbox",checked:s},form:F,onReset:j}),R({ourProps:X,theirProps:k,slot:V,defaultTag:Ee,name:"Switch"}))}let ge=me(De),ve=Pe,xe=ye,Ce=be,qe=Object.assign(ge,{Group:ve,Label:xe,Description:Ce});export{qe as Switch,Ce as SwitchDescription,ve as SwitchGroup,xe as SwitchLabel}; |
@@ -1,63 +0,86 @@ | ||
import React, { Ref } from 'react'; | ||
import { Props } from '../../types'; | ||
import { PropsForFeatures } from '../../utils/render'; | ||
interface TabsRenderPropArg { | ||
import React, { type ElementType, type Ref } from 'react'; | ||
import type { Props } from '../../types.js'; | ||
import { type HasDisplayName, type PropsForFeatures, type RefProp } from '../../utils/render.js'; | ||
declare let DEFAULT_TABS_TAG: "div"; | ||
type TabsRenderPropArg = { | ||
selectedIndex: number; | ||
} | ||
interface ListRenderPropArg { | ||
}; | ||
type TabsPropsWeControl = never; | ||
export type TabGroupProps<TTag extends ElementType = typeof DEFAULT_TABS_TAG> = Props<TTag, TabsRenderPropArg, TabsPropsWeControl, { | ||
defaultIndex?: number; | ||
onChange?: (index: number) => void; | ||
selectedIndex?: number; | ||
vertical?: boolean; | ||
manual?: boolean; | ||
}>; | ||
declare function GroupFn<TTag extends ElementType = typeof DEFAULT_TABS_TAG>(props: TabGroupProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element; | ||
declare let DEFAULT_LIST_TAG: "div"; | ||
type ListRenderPropArg = { | ||
selectedIndex: number; | ||
} | ||
declare type ListPropsWeControl = 'role' | 'aria-orientation'; | ||
interface TabRenderPropArg { | ||
}; | ||
type ListPropsWeControl = 'aria-orientation' | 'role'; | ||
export type TabListProps<TTag extends ElementType = typeof DEFAULT_LIST_TAG> = Props<TTag, ListRenderPropArg, ListPropsWeControl, {}>; | ||
declare function ListFn<TTag extends ElementType = typeof DEFAULT_LIST_TAG>(props: TabListProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
declare let DEFAULT_TAB_TAG: "button"; | ||
type TabRenderPropArg = { | ||
hover: boolean; | ||
focus: boolean; | ||
active: boolean; | ||
autofocus: boolean; | ||
selected: boolean; | ||
} | ||
declare type TabPropsWeControl = 'id' | 'role' | 'type' | 'aria-controls' | 'aria-selected' | 'tabIndex'; | ||
interface PanelsRenderPropArg { | ||
disabled: boolean; | ||
}; | ||
type TabPropsWeControl = 'aria-controls' | 'aria-selected' | 'role' | 'tabIndex'; | ||
export type TabProps<TTag extends ElementType = typeof DEFAULT_TAB_TAG> = Props<TTag, TabRenderPropArg, TabPropsWeControl, { | ||
autoFocus?: boolean; | ||
disabled?: boolean; | ||
}>; | ||
declare function TabFn<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(props: TabProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
declare let DEFAULT_PANELS_TAG: "div"; | ||
type PanelsRenderPropArg = { | ||
selectedIndex: number; | ||
} | ||
interface PanelRenderPropArg { | ||
}; | ||
export type TabPanelsProps<TTag extends ElementType = typeof DEFAULT_PANELS_TAG> = Props<TTag, PanelsRenderPropArg>; | ||
declare function PanelsFn<TTag extends ElementType = typeof DEFAULT_PANELS_TAG>(props: TabPanelsProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null; | ||
declare let DEFAULT_PANEL_TAG: "div"; | ||
type PanelRenderPropArg = { | ||
selected: boolean; | ||
focus: boolean; | ||
}; | ||
type PanelPropsWeControl = 'role' | 'aria-labelledby'; | ||
declare let PanelRenderFeatures: number; | ||
export type TabPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, PanelPropsWeControl, PropsForFeatures<typeof PanelRenderFeatures> & { | ||
id?: string; | ||
tabIndex?: number; | ||
}>; | ||
declare function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: TabPanelProps<TTag>, ref: Ref<HTMLElement>): React.JSX.Element | null; | ||
export interface _internal_ComponentTab extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(props: TabProps<TTag> & RefProp<typeof TabFn>): JSX.Element; | ||
} | ||
declare type PanelPropsWeControl = 'id' | 'role' | 'aria-labelledby' | 'tabIndex'; | ||
declare let PanelRenderFeatures: number; | ||
export declare let Tab: (<TTag extends React.ElementType<any> = "button">(props: Props<TTag, TabRenderPropArg, TabPropsWeControl>, ref: Ref<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
} & { | ||
Group: (<TTag_1 extends React.ElementType<any> = React.ExoticComponent<{ | ||
children?: React.ReactNode; | ||
}>>(props: Omit<import("../../types").PropsOf<TTag_1>, "as" | "children" | "refName" | "className"> & { | ||
as?: TTag_1 | undefined; | ||
children?: React.ReactNode | ((bag: TabsRenderPropArg) => React.ReactElement<any, string | React.JSXElementConstructor<any>>); | ||
refName?: string | undefined; | ||
} & (import("../../types").PropsOf<TTag_1> extends { | ||
className?: any; | ||
} ? { | ||
className?: string | ((bag: TabsRenderPropArg) => string) | undefined; | ||
} : {}) & { | ||
defaultIndex?: number | undefined; | ||
onChange?: ((index: number) => void) | undefined; | ||
selectedIndex?: number | undefined; | ||
vertical?: boolean | undefined; | ||
manual?: boolean | undefined; | ||
}, ref: Ref<HTMLElement>) => JSX.Element) & { | ||
displayName: string; | ||
}; | ||
List: (<TTag_2 extends React.ElementType<any> = "div">(props: Props<TTag_2, ListRenderPropArg, ListPropsWeControl> & {}, ref: Ref<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Panels: (<TTag_3 extends React.ElementType<any> = "div">(props: Props<TTag_3, PanelsRenderPropArg, "1D45E01E-AF44-47C4-988A-19A94EBAF55C">, ref: Ref<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
Panel: (<TTag_4 extends React.ElementType<any> = "div">(props: Props<TTag_4, PanelRenderPropArg, PanelPropsWeControl> & (({ | ||
static?: undefined; | ||
} & { | ||
unmount?: boolean | undefined; | ||
}) | ({ | ||
unmount?: undefined; | ||
} & { | ||
static?: boolean | undefined; | ||
})), ref: Ref<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & { | ||
displayName: string; | ||
}; | ||
export interface _internal_ComponentTabGroup extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_TABS_TAG>(props: TabGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentTabList extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_LIST_TAG>(props: TabListProps<TTag> & RefProp<typeof ListFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentTabPanels extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_PANELS_TAG>(props: TabPanelsProps<TTag> & RefProp<typeof PanelsFn>): JSX.Element; | ||
} | ||
export interface _internal_ComponentTabPanel extends HasDisplayName { | ||
<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: TabPanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element; | ||
} | ||
export declare let TabGroup: _internal_ComponentTabGroup; | ||
export declare let TabList: _internal_ComponentTabList; | ||
export declare let TabPanels: _internal_ComponentTabPanels; | ||
export declare let TabPanel: _internal_ComponentTabPanel; | ||
export declare let Tab: _internal_ComponentTab & { | ||
/** @deprecated use `<TabGroup>` instead of `<Tab.Group>` */ | ||
Group: _internal_ComponentTabGroup; | ||
/** @deprecated use `<TabList>` instead of `<Tab.List>` */ | ||
List: _internal_ComponentTabList; | ||
/** @deprecated use `<TabPanels>` instead of `<Tab.Panels>` */ | ||
Panels: _internal_ComponentTabPanels; | ||
/** @deprecated use `<TabPanel>` instead of `<Tab.Panel>` */ | ||
Panel: _internal_ComponentTabPanel; | ||
}; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import H,{Fragment as Y,createContext as K,useCallback as O,useContext as $,useMemo as h,useReducer as Z,useRef as U,useEffect as w}from"react";import{render as I,Features as z,forwardRefWithAs as v}from"../../utils/render.js";import{useId as V}from"../../hooks/use-id.js";import{match as q}from"../../utils/match.js";import{Keys as m}from"../../components/keyboard.js";import{focusIn as L,Focus as P,sortByDomNode as J}from"../../utils/focus-management.js";import{useIsoMorphicEffect as k}from"../../hooks/use-iso-morphic-effect.js";import{useSyncRefs as D}from"../../hooks/use-sync-refs.js";import{useResolveButtonType as ee}from"../../hooks/use-resolve-button-type.js";import{useLatestValue as Q}from"../../hooks/use-latest-value.js";import{FocusSentinel as te}from"../../internal/focus-sentinel.js";var ne=(r=>(r[r.SetSelectedIndex=0]="SetSelectedIndex",r[r.SetOrientation=1]="SetOrientation",r[r.SetActivation=2]="SetActivation",r[r.RegisterTab=3]="RegisterTab",r[r.UnregisterTab=4]="UnregisterTab",r[r.RegisterPanel=5]="RegisterPanel",r[r.UnregisterPanel=6]="UnregisterPanel",r[r.ForceRerender=7]="ForceRerender",r))(ne||{});let re={[0](e,t){let n=e.tabs.filter(u=>{var l;return!((l=u.current)!=null&&l.hasAttribute("disabled"))});if(t.index<0)return{...e,selectedIndex:e.tabs.indexOf(n[0])};if(t.index>e.tabs.length)return{...e,selectedIndex:e.tabs.indexOf(n[n.length-1])};let i=e.tabs.slice(0,t.index),s=[...e.tabs.slice(t.index),...i].find(u=>n.includes(u));return s?{...e,selectedIndex:e.tabs.indexOf(s)}:e},[1](e,t){return e.orientation===t.orientation?e:{...e,orientation:t.orientation}},[2](e,t){return e.activation===t.activation?e:{...e,activation:t.activation}},[3](e,t){return e.tabs.includes(t.tab)?e:{...e,tabs:J([...e.tabs,t.tab],n=>n.current)}},[4](e,t){return{...e,tabs:J(e.tabs.filter(n=>n!==t.tab),n=>n.current)}},[5](e,t){return e.panels.includes(t.panel)?e:{...e,panels:[...e.panels,t.panel]}},[6](e,t){return{...e,panels:e.panels.filter(n=>n!==t.panel)}},[7](e){return{...e}}},G=K(null);G.displayName="TabsContext";let W=K(null);W.displayName="TabsSSRContext";function j(e){let t=$(W);if(t===null){let n=new Error(`<${e} /> is missing a parent <Tab.Group /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(n,j),n}return t}function M(e){let t=$(G);if(t===null){let n=new Error(`<${e} /> is missing a parent <Tab.Group /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(n,M),n}return t}function ae(e,t){return q(t.type,re,e,t)}let oe=Y,le=v(function(t,n){let{defaultIndex:i=0,vertical:T=!1,manual:s=!1,onChange:u,selectedIndex:l=null,...r}=t;const c=T?"vertical":"horizontal",b=s?"manual":"auto";let y=D(n),[a,p]=Z(ae,{selectedIndex:l!=null?l:i,tabs:[],panels:[],orientation:c,activation:b}),A=h(()=>({selectedIndex:a.selectedIndex}),[a.selectedIndex]),d=Q(u||(()=>{})),x=Q(a.tabs);w(()=>{p({type:1,orientation:c})},[c]),w(()=>{p({type:2,activation:b})},[b]),k(()=>{let f=l!=null?l:i;p({type:0,index:f})},[l]);let R=U(a.selectedIndex);w(()=>{R.current=a.selectedIndex},[a.selectedIndex]);let g=h(()=>[a,{dispatch:p,change(f){R.current!==f&&d.current(f),R.current=f,p({type:0,index:f})}}],[a,p]),S=U({tabs:[],panels:[]}),_={ref:y};return H.createElement(W.Provider,{value:S},H.createElement(G.Provider,{value:g},H.createElement(te,{onFocus:()=>{var f,F;for(let C of x.current)if(((f=C.current)==null?void 0:f.tabIndex)===0)return(F=C.current)==null||F.focus(),!0;return!1}}),I({ourProps:_,theirProps:r,slot:A,defaultTag:oe,name:"Tabs"})))}),ie="div",se=v(function(t,n){let[{selectedIndex:i,orientation:T}]=M("Tab.List"),s=D(n);return I({ourProps:{ref:s,role:"tablist","aria-orientation":T},theirProps:t,slot:{selectedIndex:i},defaultTag:ie,name:"Tabs.List"})}),ue="button",ce=v(function(t,n){var N,B;let i=`headlessui-tabs-tab-${V()}`,[{selectedIndex:T,tabs:s,panels:u,orientation:l,activation:r},{dispatch:c,change:b}]=M("Tab"),y=j("Tab"),a=U(null),p=D(a,n,o=>{!o||c({type:7})});k(()=>(c({type:3,tab:a}),()=>c({type:4,tab:a})),[c,a]);let A=y.current.tabs.indexOf(i);A===-1&&(A=y.current.tabs.push(i)-1);let d=s.indexOf(a);d===-1&&(d=A);let x=d===T,R=O(o=>{let E=s.map(X=>X.current).filter(Boolean);if(o.key===m.Space||o.key===m.Enter){o.preventDefault(),o.stopPropagation(),b(d);return}switch(o.key){case m.Home:case m.PageUp:return o.preventDefault(),o.stopPropagation(),L(E,P.First);case m.End:case m.PageDown:return o.preventDefault(),o.stopPropagation(),L(E,P.Last)}return q(l,{vertical(){if(o.key===m.ArrowUp)return L(E,P.Previous|P.WrapAround);if(o.key===m.ArrowDown)return L(E,P.Next|P.WrapAround)},horizontal(){if(o.key===m.ArrowLeft)return L(E,P.Previous|P.WrapAround);if(o.key===m.ArrowRight)return L(E,P.Next|P.WrapAround)}})},[s,l,d,b]),g=O(()=>{var o;(o=a.current)==null||o.focus()},[a]),S=O(()=>{var o;(o=a.current)==null||o.focus(),b(d)},[b,d,a]),_=O(o=>{o.preventDefault()},[]),f=h(()=>({selected:x}),[x]),F=t,C={ref:p,onKeyDown:R,onFocus:r==="manual"?g:S,onMouseDown:_,onClick:S,id:i,role:"tab",type:ee(t,a),"aria-controls":(B=(N=u[d])==null?void 0:N.current)==null?void 0:B.id,"aria-selected":x,tabIndex:x?0:-1};return I({ourProps:C,theirProps:F,slot:f,defaultTag:ue,name:"Tabs.Tab"})}),pe="div",de=v(function(t,n){let[{selectedIndex:i}]=M("Tab.Panels"),T=D(n),s=h(()=>({selectedIndex:i}),[i]);return I({ourProps:{ref:T},theirProps:t,slot:s,defaultTag:pe,name:"Tabs.Panels"})}),fe="div",Te=z.RenderStrategy|z.Static,be=v(function(t,n){var R,g;let[{selectedIndex:i,tabs:T,panels:s},{dispatch:u}]=M("Tab.Panel"),l=j("Tab.Panel"),r=`headlessui-tabs-panel-${V()}`,c=U(null),b=D(c,n,S=>{!S||u({type:7})});k(()=>(u({type:5,panel:c}),()=>u({type:6,panel:c})),[u,c]);let y=l.current.panels.indexOf(r);y===-1&&(y=l.current.panels.push(r)-1);let a=s.indexOf(c);a===-1&&(a=y);let p=a===i,A=h(()=>({selected:p}),[p]),d=t,x={ref:b,id:r,role:"tabpanel","aria-labelledby":(g=(R=T[a])==null?void 0:R.current)==null?void 0:g.id,tabIndex:p?0:-1};return I({ourProps:x,theirProps:d,slot:A,defaultTag:fe,features:Te,visible:p,name:"Tabs.Panel"})}),we=Object.assign(ce,{Group:le,List:se,Panels:de,Panel:be});export{we 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, { ElementType, MutableRefObject, Ref } from 'react'; | ||
import { Props } from '../../types'; | ||
import { Features, PropsForFeatures } from '../../utils/render'; | ||
export interface TransitionClasses { | ||
enter?: string; | ||
enterFrom?: string; | ||
enterTo?: string; | ||
entered?: string; | ||
leave?: string; | ||
leaveFrom?: string; | ||
leaveTo?: string; | ||
} | ||
export interface TransitionEvents { | ||
beforeEnter?: () => void; | ||
afterEnter?: () => void; | ||
beforeLeave?: () => void; | ||
afterLeave?: () => void; | ||
} | ||
declare type TransitionChildProps<TTag> = Props<TTag, TransitionChildRenderPropArg> & PropsForFeatures<typeof TransitionChildRenderFeatures> & TransitionClasses & TransitionEvents & { | ||
appear?: boolean; | ||
}; | ||
declare let DEFAULT_TRANSITION_CHILD_TAG: "div"; | ||
declare type TransitionChildRenderPropArg = MutableRefObject<HTMLDivElement>; | ||
declare let TransitionChildRenderFeatures: Features; | ||
declare function Child<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionChildProps<TTag>): JSX.Element; | ||
export declare let Transition: (<TTag extends React.ElementType<any> = "div">(props: TransitionChildProps<TTag> & { | ||
show?: boolean | undefined; | ||
appear?: boolean | undefined; | ||
}, ref: Ref<HTMLElement>) => JSX.Element) & { | ||
displayName: string; | ||
} & { | ||
Child: typeof Child; | ||
Root: (<TTag extends React.ElementType<any> = "div">(props: TransitionChildProps<TTag> & { | ||
show?: boolean | undefined; | ||
appear?: boolean | undefined; | ||
}, ref: Ref<HTMLElement>) => JSX.Element) & { | ||
displayName: string; | ||
}; | ||
}; | ||
export {}; | ||
export * from '../transition/transition.js'; |
@@ -1,1 +0,1 @@ | ||
import l,{Fragment as G,createContext as B,useContext as _,useEffect as v,useMemo as W,useRef as C,useState as U}from"react";import{Features as ue,forwardRefWithAs as q,render as z,RenderStrategy as T}from"../../utils/render.js";import{OpenClosedProvider as de,State as V,useOpenClosed as J}from"../../internal/open-closed.js";import{match as I}from"../../utils/match.js";import{microTask as fe}from"../../utils/micro-task.js";import{useId as Te}from"../../hooks/use-id.js";import{useIsMounted as pe}from"../../hooks/use-is-mounted.js";import{useIsoMorphicEffect as ce}from"../../hooks/use-iso-morphic-effect.js";import{useLatestValue as b}from"../../hooks/use-latest-value.js";import{useServerHandoffComplete as K}from"../../hooks/use-server-handoff-complete.js";import{useSyncRefs as Q}from"../../hooks/use-sync-refs.js";import{useTransition as me}from"../../hooks/use-transition.js";function c(e=""){return e.split(" ").filter(r=>r.trim().length>1)}let N=B(null);N.displayName="TransitionContext";var he=(t=>(t.Visible="visible",t.Hidden="hidden",t))(he||{});function ge(){let e=_(N);if(e===null)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");return e}function ve(){let e=_(R);if(e===null)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");return e}let R=B(null);R.displayName="NestingContext";function F(e){return"children"in e?F(e.children):e.current.filter(({state:r})=>r==="visible").length>0}function X(e){let r=b(e),t=C([]),n=pe(),u=b((s,o=T.Hidden)=>{let i=t.current.findIndex(({id:d})=>d===s);i!==-1&&(I(o,{[T.Unmount](){t.current.splice(i,1)},[T.Hidden](){t.current[i].state="hidden"}}),fe(()=>{var d;!F(t)&&n.current&&((d=r.current)==null||d.call(r))}))}),m=b(s=>{let o=t.current.find(({id:i})=>i===s);return o?o.state!=="visible"&&(o.state="visible"):t.current.push({id:s,state:"visible"}),()=>u.current(s,T.Unmount)});return W(()=>({children:t,register:m,unregister:u}),[m,u,t])}function Ce(){}let be=["beforeEnter","afterEnter","beforeLeave","afterLeave"];function Y(e){var t;let r={};for(let n of be)r[n]=(t=e[n])!=null?t:Ce;return r}function Se(e){let r=C(Y(e));return v(()=>{r.current=Y(e)},[e]),r}let xe="div",Z=ue.RenderStrategy,$=q(function(r,t){let{beforeEnter:n,afterEnter:u,beforeLeave:m,afterLeave:s,enter:o,enterFrom:i,enterTo:d,entered:S,leave:x,leaveFrom:E,leaveTo:L,...p}=r,h=C(null),y=Q(h,t),[f,A]=U("visible"),D=p.unmount?T.Unmount:T.Hidden,{show:g,appear:ee,initial:te}=ge(),{register:P,unregister:H}=ve(),O=C(null),a=Te(),re=C(!1),k=X(()=>{re.current||(A("hidden"),H.current(a))});v(()=>{if(!!a)return P.current(a)},[P,a]),v(()=>{if(D===T.Hidden&&!!a){if(g&&f!=="visible"){A("visible");return}I(f,{["hidden"]:()=>H.current(a),["visible"]:()=>P.current(a)})}},[f,a,P,H,g,D]);let ne=b({enter:c(o),enterFrom:c(i),enterTo:c(d),entered:c(S),leave:c(x),leaveFrom:c(E),leaveTo:c(L)}),ie=Se({beforeEnter:n,afterEnter:u,beforeLeave:m,afterLeave:s}),w=K();v(()=>{if(w&&f==="visible"&&h.current===null)throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")},[h,f,w]);let M=te&&!ee,se=(()=>!w||M||O.current===g?"idle":g?"enter":"leave")();me({container:h,classes:ne,events:ie,direction:se,onStart:b(()=>{}),onStop:b(le=>{le==="leave"&&!F(k)&&(A("hidden"),H.current(a))})}),v(()=>{!M||(D===T.Hidden?O.current=null:O.current=g)},[g,M,f]);let oe=p,ae={ref:y};return l.createElement(R.Provider,{value:k},l.createElement(de,{value:I(f,{["visible"]:V.Open,["hidden"]:V.Closed})},z({ourProps:ae,theirProps:oe,defaultTag:xe,features:Z,visible:f==="visible",name:"Transition.Child"})))}),j=q(function(r,t){let{show:n,appear:u=!1,unmount:m,...s}=r,o=Q(t);K();let i=J();if(n===void 0&&i!==null&&(n=I(i,{[V.Open]:!0,[V.Closed]:!1})),![!0,!1].includes(n))throw new Error("A <Transition /> is used but it is missing a `show={true | false}` prop.");let[d,S]=U(n?"visible":"hidden"),x=X(()=>{S("hidden")}),[E,L]=U(!0),p=C([n]);ce(()=>{E!==!1&&p.current[p.current.length-1]!==n&&(p.current.push(n),L(!1))},[p,n]);let h=W(()=>({show:n,appear:u,initial:E}),[n,u,E]);v(()=>{n?S("visible"):F(x)||S("hidden")},[n,x]);let y={unmount:m};return l.createElement(R.Provider,{value:x},l.createElement(N.Provider,{value:h},z({ourProps:{...y,as:G,children:l.createElement($,{ref:o,...y,...s})},theirProps:{},defaultTag:G,features:Z,visible:d==="visible",name:"Transition"})))});function Ee(e){let r=_(N)!==null,t=J()!==null;return l.createElement(l.Fragment,null,!r&&t?l.createElement(j,{...e}):l.createElement($,{...e}))}let Ge=Object.assign(j,{Child:Ee,Root:j});export{Ge as Transition}; | ||
export*from'../transition/transition.js'; |
@@ -1,1 +0,1 @@ | ||
export*from"./components/combobox/combobox.js";export*from"./components/dialog/dialog.js";export*from"./components/disclosure/disclosure.js";export*from"./components/focus-trap/focus-trap.js";export*from"./components/listbox/listbox.js";export*from"./components/menu/menu.js";export*from"./components/popover/popover.js";export*from"./components/portal/portal.js";export*from"./components/radio-group/radio-group.js";export*from"./components/switch/switch.js";export*from"./components/tabs/tabs.js";export*from"./components/transitions/transition.js"; | ||
export*from'./components/button/button.js';export*from'./components/checkbox/checkbox.js';export*from'./components/close-button/close-button.js';export*from'./components/combobox/combobox.js';export*from'./components/data-interactive/data-interactive.js';import{Description as x}from'./components/description/description.js';export*from'./components/dialog/dialog.js';export*from'./components/disclosure/disclosure.js';export*from'./components/field/field.js';export*from'./components/fieldset/fieldset.js';export*from'./components/focus-trap/focus-trap.js';export*from'./components/input/input.js';import{Label as n}from'./components/label/label.js';export*from'./components/legend/legend.js';export*from'./components/listbox/listbox.js';export*from'./components/menu/menu.js';export*from'./components/popover/popover.js';import{Portal as d}from'./components/portal/portal.js';export*from'./components/radio-group/radio-group.js';export*from'./components/select/select.js';export*from'./components/switch/switch.js';export*from'./components/tabs/tabs.js';export*from'./components/textarea/textarea.js';import{useClose as w}from'./internal/close-provider.js';export*from'./components/transition/transition.js';export{x as Description,n as Label,d as Portal,w as useClose}; |
@@ -1,1 +0,1 @@ | ||
import{useState as s}from"react";import{useIsoMorphicEffect as f}from"./use-iso-morphic-effect.js";import{useLatestValue as m}from"./use-latest-value.js";function i(e,o){let[u,t]=s(e),r=m(e);return f(()=>t(r.current),[r,t,...o]),u}export{i as useComputed}; | ||
import{useState as s}from"react";import{useIsoMorphicEffect as f}from'./use-iso-morphic-effect.js';import{useLatestValue as m}from'./use-latest-value.js';function i(e,o){let[u,t]=s(e),r=m(e);return f(()=>t(r.current),[r,t,...o]),u}export{i as useComputed}; |
@@ -0,10 +1,25 @@ | ||
/** | ||
* The `useDisposables` hook returns a `disposables` object that is disposed | ||
* when the component is unmounted. | ||
*/ | ||
export declare function useDisposables(): { | ||
enqueue(fn: Function): void; | ||
addEventListener<TEventName extends keyof WindowEventMap>(element: HTMLElement, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions | undefined): () => void; | ||
addEventListener<TEventName extends keyof WindowEventMap>(element: Window | Document | HTMLElement, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions | undefined): () => void; | ||
requestAnimationFrame(callback: FrameRequestCallback): () => void; | ||
nextFrame(callback: FrameRequestCallback): () => void; | ||
setTimeout(callback: (...args: any[]) => void, ms?: number | undefined, ...args: any[]): () => void; | ||
microTask(cb: () => void): () => void; | ||
style(node: HTMLElement, property: string, value: string): () => void; | ||
group(cb: (d: { | ||
addEventListener<TEventName extends keyof WindowEventMap>(element: Window | Document | HTMLElement, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions | undefined): () => void; | ||
requestAnimationFrame(callback: FrameRequestCallback): () => void; | ||
nextFrame(callback: FrameRequestCallback): () => void; | ||
setTimeout(callback: (...args: any[]) => void, ms?: number | undefined, ...args: any[]): () => void; | ||
microTask(cb: () => void): () => void; | ||
style(node: HTMLElement, property: string, value: string): () => void; | ||
group(cb: any): () => void; | ||
add(cb: () => void): () => void; | ||
dispose(): void; | ||
}) => void): () => void; | ||
add(cb: () => void): () => void; | ||
dispose(): void; | ||
workQueue(): Promise<void>; | ||
}; |
@@ -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 @@ | ||
import{useEffect as d}from"react";import{useLatestValue as s}from"./use-latest-value.js";function E(n,e,a,t){let i=s(a);d(()=>{n=n!=null?n:window;function r(o){i.current(o)}return n.addEventListener(e,r,t),()=>n.removeEventListener(e,r,t)},[n,e,t])}export{E as useEventListener}; | ||
import{useEffect as d}from"react";import{useLatestValue as s}from'./use-latest-value.js';function E(n,e,a,t){let i=s(a);d(()=>{n=n!=null?n:window;function r(o){i.current(o)}return n.addEventListener(e,r,t),()=>n.removeEventListener(e,r,t)},[n,e,t])}export{E as useEventListener}; |
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),[l]),n=t(e=>Boolean(r&e),[r]),o=t(e=>l(a=>a&~e),[l]),s=t(e=>l(a=>a^e),[l]);return{addFlag:u,hasFlag:n,removeFlag:o,toggleFlag:s}}export{b as useFlags}; | ||
import{useCallback as r,useState as b}from"react";function c(u=0){let[t,l]=b(u),g=r(e=>l(e),[t]),s=r(e=>l(a=>a|e),[t]),m=r(e=>(t&e)===e,[t]),n=r(e=>l(a=>a&~e),[l]),F=r(e=>l(a=>a^e),[l]);return{flags:t,setFlag:g,addFlag:s,hasFlag:m,removeFlag:n,toggleFlag:F}}export{c as useFlags}; |
@@ -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,1 +0,1 @@ | ||
import{useRef as r}from"react";import{useIsoMorphicEffect as t}from"./use-iso-morphic-effect.js";function f(){let e=r(!1);return t(()=>(e.current=!0,()=>{e.current=!1}),[]),e}export{f as useIsMounted}; | ||
import{useRef as r}from"react";import{useIsoMorphicEffect as t}from'./use-iso-morphic-effect.js';function f(){let e=r(!1);return t(()=>(e.current=!0,()=>{e.current=!1}),[]),e}export{f as useIsMounted}; |
@@ -1,2 +0,2 @@ | ||
import { useEffect } from 'react'; | ||
export declare const useIsoMorphicEffect: typeof useEffect; | ||
import { type DependencyList, type EffectCallback } from 'react'; | ||
export declare let useIsoMorphicEffect: (effect: EffectCallback, deps?: DependencyList | undefined) => void; |
@@ -1,1 +0,1 @@ | ||
import{useLayoutEffect as e,useEffect as f}from"react";const t=typeof window!="undefined"?e:f;export{t as useIsoMorphicEffect}; | ||
import{useEffect as f,useLayoutEffect as c}from"react";import{env as i}from'../utils/env.js';let n=(e,t)=>{i.isServer?f(e,t):c(e,t)};export{n as useIsoMorphicEffect}; |
@@ -1,1 +0,1 @@ | ||
import{useRef as t}from"react";import{useIsoMorphicEffect as o}from"./use-iso-morphic-effect.js";function s(e){let r=t(e);return o(()=>{r.current=e},[e]),r}export{s as useLatestValue}; | ||
import{useRef as t}from"react";import{useIsoMorphicEffect as o}from'./use-iso-morphic-effect.js';function s(e){let r=t(e);return o(()=>{r.current=e},[e]),r}export{s as useLatestValue}; |
@@ -1,10 +0,6 @@ | ||
import { MutableRefObject } from 'react'; | ||
declare type Container = MutableRefObject<HTMLElement | null> | HTMLElement | null; | ||
declare type ContainerCollection = Container[] | Set<Container>; | ||
declare type ContainerInput = Container | ContainerCollection; | ||
export declare enum Features { | ||
None = 1, | ||
IgnoreScrollbars = 2 | ||
} | ||
export declare function useOutsideClick(containers: ContainerInput | (() => ContainerInput), cb: (event: MouseEvent | PointerEvent, target: HTMLElement) => void, features?: Features): void; | ||
import { type MutableRefObject } from 'react'; | ||
type Container = MutableRefObject<HTMLElement | null> | HTMLElement | null; | ||
type ContainerCollection = Container[] | Set<Container>; | ||
type ContainerInput = Container | ContainerCollection; | ||
export declare function useOutsideClick(enabled: boolean, containers: ContainerInput | (() => ContainerInput), cb: (event: MouseEvent | PointerEvent | FocusEvent | TouchEvent, target: HTMLElement) => void): void; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
import{useRef as m}from"react";import{microTask as s}from"../utils/micro-task.js";import{useLatestValue as p}from"./use-latest-value.js";import{useWindowEvent as u}from"./use-window-event.js";var C=(r=>(r[r.None=1]="None",r[r.IgnoreScrollbars=2]="IgnoreScrollbars",r))(C||{});function w(c,a,r=1){let i=m(!1),l=p(n=>{if(i.current)return;i.current=!0,s(()=>{i.current=!1});let f=function t(e){return typeof e=="function"?t(e()):Array.isArray(e)||e instanceof Set?e:[e]}(c),o=n.target;if(!!o.ownerDocument.documentElement.contains(o)){if((r&2)===2){let t=20,e=o.ownerDocument.documentElement;if(n.clientX>e.clientWidth-t||n.clientX<t||n.clientY>e.clientHeight-t||n.clientY<t)return}for(let t of f){if(t===null)continue;let e=t instanceof HTMLElement?t:t.current;if(e!=null&&e.contains(o))return}return a(n,o)}});u("pointerdown",(...n)=>l.current(...n)),u("mousedown",(...n)=>l.current(...n))}export{C as Features,w as useOutsideClick}; | ||
import{useCallback as h,useRef as m}from"react";import{FocusableMode as M,isFocusableElement as b}from'../utils/focus-management.js';import{isMobile as y}from'../utils/platform.js';import{useDocumentEvent as c}from'./use-document-event.js';import{useIsTopLayer as L}from'./use-is-top-layer.js';import{useLatestValue as g}from'./use-latest-value.js';import{useWindowEvent as H}from'./use-window-event.js';const d=30;function F(E,p,C){let u=L(E,"outside-click"),f=g(C),s=h(function(e,o){if(e.defaultPrevented)return;let r=o(e);if(r===null||!r.getRootNode().contains(r)||!r.isConnected)return;let T=function i(n){return typeof n=="function"?i(n()):Array.isArray(n)||n instanceof Set?n:[n]}(p);for(let i of T){if(i===null)continue;let n=i instanceof HTMLElement?i:i.current;if(n!=null&&n.contains(r)||e.composed&&e.composedPath().includes(n))return}return!b(r,M.Loose)&&r.tabIndex!==-1&&e.preventDefault(),f.current(e,r)},[f]),l=m(null);c(u,"pointerdown",t=>{var e,o;l.current=((o=(e=t.composedPath)==null?void 0:e.call(t))==null?void 0:o[0])||t.target},!0),c(u,"mousedown",t=>{var e,o;l.current=((o=(e=t.composedPath)==null?void 0:e.call(t))==null?void 0:o[0])||t.target},!0),c(u,"click",t=>{y()||l.current&&(s(t,()=>l.current),l.current=null)},!0);let a=m({x:0,y:0});c(u,"touchstart",t=>{a.current.x=t.touches[0].clientX,a.current.y=t.touches[0].clientY},!0),c(u,"touchend",t=>{let e={x:t.changedTouches[0].clientX,y:t.changedTouches[0].clientY};if(!(Math.abs(e.x-a.current.x)>=d||Math.abs(e.y-a.current.y)>=d))return s(t,()=>t.target instanceof HTMLElement?t.target:null)},!0),H(u,"blur",t=>s(t,()=>window.document.activeElement instanceof HTMLIFrameElement?window.document.activeElement:null),!0)}export{F as useOutsideClick}; |
@@ -1,2 +0,2 @@ | ||
import { getOwnerDocument } from '../utils/owner'; | ||
import { getOwnerDocument } from '../utils/owner.js'; | ||
export declare function useOwnerDocument(...args: Parameters<typeof getOwnerDocument>): Document | null; |
@@ -1,1 +0,1 @@ | ||
import{useMemo as t}from"react";import{getOwnerDocument as o}from"../utils/owner.js";function n(...e){return t(()=>o(...e),[...e])}export{n as useOwnerDocument}; | ||
import{useMemo as t}from"react";import{getOwnerDocument as o}from'../utils/owner.js';function n(...e){return t(()=>o(...e),[...e])}export{n as useOwnerDocument}; |
@@ -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 o,useEffect as i,useCallback as f}from"react";let l=Symbol();function p(n,t=!0){return Object.assign(n,{[l]:t})}function T(...n){let t=o(n);i(()=>{t.current=n},[n]);let c=f(e=>{for(let u of t.current)u!=null&&(typeof u=="function"?u(e):u.current=e)},[t]);return n.every(e=>e==null||(e==null?void 0:e[l]))?void 0:c}export{p as optionalRef,T as useSyncRefs}; | ||
import{useEffect as l,useRef as i}from"react";import{useEvent as r}from'./use-event.js';let u=Symbol();function T(t,n=!0){return Object.assign(t,{[u]:n})}function y(...t){let n=i(t);l(()=>{n.current=t},[t]);let c=r(e=>{for(let o of n.current)o!=null&&(typeof o=="function"?o(e):o.current=e)});return t.every(e=>e==null||(e==null?void 0:e[u]))?void 0:c}export{T as optionalRef,y as useSyncRefs}; |
@@ -1,24 +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[]; | ||
}>; | ||
events: MutableRefObject<{ | ||
beforeEnter: () => void; | ||
afterEnter: () => void; | ||
beforeLeave: () => void; | ||
afterLeave: () => void; | ||
}>; | ||
direction: 'enter' | 'leave' | 'idle'; | ||
onStart: MutableRefObject<(direction: TransitionArgs['direction']) => void>; | ||
onStop: MutableRefObject<(direction: TransitionArgs['direction']) => void>; | ||
} | ||
export declare function useTransition({ container, direction, classes, events, 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{Reason as a,transition as g}from"../components/transitions/utils/transition.js";import{disposables as E}from"../utils/disposables.js";import{match as n}from"../utils/match.js";import{useDisposables as M}from"./use-disposables.js";import{useIsMounted as T}from"./use-is-mounted.js";import{useIsoMorphicEffect as R}from"./use-iso-morphic-effect.js";import{useLatestValue as i}from"./use-latest-value.js";function x({container:u,direction:o,classes:c,events:t,onStart:d,onStop:l}){let f=T(),m=M(),e=i(o),b=i(()=>n(e.current,{enter:()=>t.current.beforeEnter(),leave:()=>t.current.beforeLeave(),idle:()=>{}})),p=i(()=>n(e.current,{enter:()=>t.current.afterEnter(),leave:()=>t.current.afterLeave(),idle:()=>{}}));R(()=>{let r=E();m.add(r.dispose);let s=u.current;if(!!s&&e.current!=="idle"&&!!f.current)return r.dispose(),b.current(),d.current(e.current),r.add(g(s,c.current,e.current==="enter",v=>{r.dispose(),n(v,{[a.Ended](){p.current(),l.current(e.current)},[a.Cancelled]:()=>{}})})),r.dispose},[o])}export{x as useTransition}; | ||
import{useRef as 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 @@ | ||
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,12 +0,25 @@ | ||
export * from './components/combobox/combobox'; | ||
export * from './components/dialog/dialog'; | ||
export * from './components/disclosure/disclosure'; | ||
export * from './components/focus-trap/focus-trap'; | ||
export * from './components/listbox/listbox'; | ||
export * from './components/menu/menu'; | ||
export * from './components/popover/popover'; | ||
export * from './components/portal/portal'; | ||
export * from './components/radio-group/radio-group'; | ||
export * from './components/switch/switch'; | ||
export * from './components/tabs/tabs'; | ||
export * from './components/transitions/transition'; | ||
export * from './components/button/button.js'; | ||
export * from './components/checkbox/checkbox.js'; | ||
export * from './components/close-button/close-button.js'; | ||
export * from './components/combobox/combobox.js'; | ||
export * from './components/data-interactive/data-interactive.js'; | ||
export { Description, type DescriptionProps } from './components/description/description.js'; | ||
export * from './components/dialog/dialog.js'; | ||
export * from './components/disclosure/disclosure.js'; | ||
export * from './components/field/field.js'; | ||
export * from './components/fieldset/fieldset.js'; | ||
export * from './components/focus-trap/focus-trap.js'; | ||
export * from './components/input/input.js'; | ||
export { Label, type LabelProps } from './components/label/label.js'; | ||
export * from './components/legend/legend.js'; | ||
export * from './components/listbox/listbox.js'; | ||
export * from './components/menu/menu.js'; | ||
export * from './components/popover/popover.js'; | ||
export { Portal } from './components/portal/portal.js'; | ||
export * from './components/radio-group/radio-group.js'; | ||
export * from './components/select/select.js'; | ||
export * from './components/switch/switch.js'; | ||
export * from './components/tabs/tabs.js'; | ||
export * from './components/textarea/textarea.js'; | ||
export { useClose } from './internal/close-provider.js'; | ||
export * from './components/transition/transition.js'; |
@@ -1,1 +0,1 @@ | ||
export*from"./components/combobox/combobox.js";export*from"./components/dialog/dialog.js";export*from"./components/disclosure/disclosure.js";export*from"./components/focus-trap/focus-trap.js";export*from"./components/listbox/listbox.js";export*from"./components/menu/menu.js";export*from"./components/popover/popover.js";export*from"./components/portal/portal.js";export*from"./components/radio-group/radio-group.js";export*from"./components/switch/switch.js";export*from"./components/tabs/tabs.js";export*from"./components/transitions/transition.js"; | ||
export*from'./components/button/button.js';export*from'./components/checkbox/checkbox.js';export*from'./components/close-button/close-button.js';export*from'./components/combobox/combobox.js';export*from'./components/data-interactive/data-interactive.js';import{Description as x}from'./components/description/description.js';export*from'./components/dialog/dialog.js';export*from'./components/disclosure/disclosure.js';export*from'./components/field/field.js';export*from'./components/fieldset/fieldset.js';export*from'./components/focus-trap/focus-trap.js';export*from'./components/input/input.js';import{Label as n}from'./components/label/label.js';export*from'./components/legend/legend.js';export*from'./components/listbox/listbox.js';export*from'./components/menu/menu.js';export*from'./components/popover/popover.js';import{Portal as d}from'./components/portal/portal.js';export*from'./components/radio-group/radio-group.js';export*from'./components/select/select.js';export*from'./components/switch/switch.js';export*from'./components/tabs/tabs.js';export*from'./components/textarea/textarea.js';import{useClose as w}from'./internal/close-provider.js';export*from'./components/transition/transition.js';export{x as Description,n as Label,d as Portal,w as useClose}; |
@@ -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{VisuallyHidden as c}from"./visually-hidden.js";function F({onFocus:n}){let[o,r]=s(!0);return o?i.createElement(c,{as:"button",type:"button",onFocus:a=>{a.preventDefault();let e,u=50;function t(){if(u--<=0){e&&cancelAnimationFrame(e);return}if(n()){r(!1),cancelAnimationFrame(e);return}e=requestAnimationFrame(t)}e=requestAnimationFrame(t)}}):null}export{F as FocusSentinel}; | ||
import s,{useState as c}from"react";import{useIsMounted as m}from'../hooks/use-is-mounted.js';import{Hidden as f,HiddenFeatures as l}from'./hidden.js';function b({onFocus:n}){let[r,o]=c(!0),u=m();return r?s.createElement(f,{as:"button",type:"button",features:l.Focusable,onFocus:a=>{a.preventDefault();let e,i=50;function t(){if(i--<=0){e&&cancelAnimationFrame(e);return}if(n()){if(cancelAnimationFrame(e),!u.current)return;o(!1);return}e=requestAnimationFrame(t)}e=requestAnimationFrame(t)}}):null}export{b as FocusSentinel}; |
@@ -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,11 +0,10 @@ | ||
import { ReactNode, ReactElement } from 'react'; | ||
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 = any> = TTag extends React.ElementType ? React.ComponentProps<TTag> : never; | ||
declare type PropsWeControl = 'as' | 'children' | 'refName' | 'className'; | ||
declare type CleanProps<TTag, TOmitableProps extends keyof any = __> = TOmitableProps extends __ ? Omit<PropsOf<TTag>, PropsWeControl> : Omit<PropsOf<TTag>, TOmitableProps | PropsWeControl>; | ||
declare type OurProps<TTag, TSlot = any> = { | ||
export type PropsOf<TTag extends ReactTag> = TTag extends React.ElementType ? Omit<React.ComponentProps<TTag>, 'ref'> : never; | ||
type PropsWeControl = 'as' | 'children' | 'refName' | 'className'; | ||
type CleanProps<TTag extends ReactTag, TOmittableProps extends PropertyKey = never> = Omit<PropsOf<TTag>, TOmittableProps | PropsWeControl>; | ||
type OurProps<TTag extends ReactTag, TSlot> = { | ||
as?: TTag; | ||
@@ -15,12 +14,8 @@ children?: ReactNode | ((bag: TSlot) => ReactElement); | ||
}; | ||
declare type ClassNameOverride<TTag, TSlot = any> = PropsOf<TTag> extends { | ||
className?: any; | ||
} ? { | ||
className?: string | ((bag: TSlot) => string); | ||
type HasProperty<T extends object, K extends PropertyKey> = T extends never ? never : K extends keyof T ? true : never; | ||
type ClassNameOverride<TTag extends ReactTag, TSlot = {}> = true extends HasProperty<PropsOf<TTag>, 'className'> ? { | ||
className?: PropsOf<TTag>['className'] | ((bag: TSlot) => string); | ||
} : {}; | ||
export declare type Props<TTag, TSlot = any, TOmitableProps extends keyof any = __> = CleanProps<TTag, TOmitableProps> & OurProps<TTag, TSlot> & ClassNameOverride<TTag, TSlot>; | ||
declare type Without<T, U> = { | ||
[P in Exclude<keyof T, keyof U>]?: never; | ||
}; | ||
export declare type XOR<T, U> = T | U extends __ ? never : T extends __ ? U : U extends __ ? T : T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U; | ||
export type 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,10 +1,24 @@ | ||
export type Disposables = ReturnType<typeof disposables>; | ||
/** | ||
* Disposables are a way to manage event handlers and functions like | ||
* `setTimeout` and `requestAnimationFrame` that need to be cleaned up when they | ||
* are no longer needed. | ||
* | ||
* | ||
* When you register a disposable function, it is added to a collection of | ||
* disposables. Each disposable in the collection provides a `dispose` clean up | ||
* function that can be called when it's no longer needed. There is also a | ||
* `dispose` function on the collection itself that can be used to clean up all | ||
* pending disposables in that collection. | ||
*/ | ||
export declare function disposables(): { | ||
enqueue(fn: Function): void; | ||
addEventListener<TEventName extends keyof WindowEventMap>(element: HTMLElement, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions | undefined): () => void; | ||
addEventListener<TEventName extends keyof WindowEventMap>(element: HTMLElement | Window | Document, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions): () => void; | ||
requestAnimationFrame(callback: FrameRequestCallback): () => void; | ||
nextFrame(callback: FrameRequestCallback): () => void; | ||
setTimeout(callback: (...args: any[]) => void, ms?: number | undefined, ...args: any[]): () => void; | ||
microTask(cb: () => void): () => void; | ||
style(node: HTMLElement, property: string, value: string): () => void; | ||
group(cb: (d: typeof this) => void): () => void; | ||
add(cb: () => void): () => void; | ||
dispose(): void; | ||
workQueue(): Promise<void>; | ||
}; |
@@ -1,1 +0,1 @@ | ||
function o(){let a=[],i=[],n={enqueue(e){i.push(e)},addEventListener(e,t,r,s){return e.addEventListener(t,r,s),n.add(()=>e.removeEventListener(t,r,s))},requestAnimationFrame(...e){let t=requestAnimationFrame(...e);return n.add(()=>cancelAnimationFrame(t))},nextFrame(...e){return n.requestAnimationFrame(()=>n.requestAnimationFrame(...e))},setTimeout(...e){let t=setTimeout(...e);return n.add(()=>clearTimeout(t))},add(e){return a.push(e),()=>{let t=a.indexOf(e);if(t>=0){let[r]=a.splice(t,1);r()}}},dispose(){for(let e of a.splice(0))e()},async workQueue(){for(let e of i.splice(0))await e()}};return n}export{o as disposables}; | ||
import{microTask as i}from'./micro-task.js';function o(){let n=[],r={addEventListener(e,t,s,a){return e.addEventListener(t,s,a),r.add(()=>e.removeEventListener(t,s,a))},requestAnimationFrame(...e){let t=requestAnimationFrame(...e);return r.add(()=>cancelAnimationFrame(t))},nextFrame(...e){return r.requestAnimationFrame(()=>r.requestAnimationFrame(...e))},setTimeout(...e){let t=setTimeout(...e);return r.add(()=>clearTimeout(t))},microTask(...e){let t={current:!0};return i(()=>{t.current&&e[0]()}),r.add(()=>{t.current=!1})},style(e,t,s){let a=e.style.getPropertyValue(t);return Object.assign(e.style,{[t]:s}),this.add(()=>{Object.assign(e.style,{[t]:a})})},group(e){let t=o();return e(t),this.add(()=>t.dispose())},add(e){return n.includes(e)||n.push(e),()=>{let t=n.indexOf(e);if(t>=0)for(let s of n.splice(t,1))s()}},dispose(){for(let e of n.splice(0))e()}};return r}export{o as disposables}; |
@@ -0,1 +1,2 @@ | ||
import type { MutableRefObject } from 'react'; | ||
export declare enum Focus { | ||
@@ -13,3 +14,5 @@ /** Focus the first non-disabled element */ | ||
/** Prevent scrolling the focusable elements into view */ | ||
NoScroll = 32 | ||
NoScroll = 32, | ||
/** Focus the first focusable element with the `data-autofocus` attribute. */ | ||
AutoFocus = 64 | ||
} | ||
@@ -27,2 +30,3 @@ export declare enum FocusResult { | ||
export declare function getFocusableElements(container?: HTMLElement | null): HTMLElement[]; | ||
export declare function getAutoFocusableElements(container?: HTMLElement | null): HTMLElement[]; | ||
export declare enum FocusableMode { | ||
@@ -35,4 +39,10 @@ /** The element itself must be focusable. */ | ||
export declare function isFocusableElement(element: HTMLElement, mode?: FocusableMode): boolean; | ||
export declare function restoreFocusIfNecessary(element: HTMLElement | null): void; | ||
export declare function focusElement(element: HTMLElement | null): void; | ||
export declare function sortByDomNode<T>(nodes: T[], resolveKey?: (item: T) => HTMLElement | null): T[]; | ||
export declare function focusIn(container: HTMLElement | HTMLElement[], focus: Focus): FocusResult; | ||
export declare function focusFrom(current: HTMLElement | null, focus: Focus): FocusResult; | ||
export declare function focusIn(container: HTMLElement | HTMLElement[], focus: Focus, { sorted, relativeTo, skipElements, }?: Partial<{ | ||
sorted: boolean; | ||
relativeTo: HTMLElement | null; | ||
skipElements: (HTMLElement | MutableRefObject<HTMLElement | null>)[]; | ||
}>): FocusResult; |
@@ -1,1 +0,1 @@ | ||
import{match as m}from"./match.js";import{getOwnerDocument as x}from"./owner.js";let f=["[contentEditable=true]","[tabindex]","a[href]","area[href]","button:not([disabled])","iframe","input:not([disabled])","select:not([disabled])","textarea:not([disabled])"].map(e=>`${e}:not([tabindex='-1'])`).join(",");var E=(n=>(n[n.First=1]="First",n[n.Previous=2]="Previous",n[n.Next=4]="Next",n[n.Last=8]="Last",n[n.WrapAround=16]="WrapAround",n[n.NoScroll=32]="NoScroll",n))(E||{}),p=(o=>(o[o.Error=0]="Error",o[o.Overflow=1]="Overflow",o[o.Success=2]="Success",o[o.Underflow=3]="Underflow",o))(p||{}),L=(t=>(t[t.Previous=-1]="Previous",t[t.Next=1]="Next",t))(L||{});function N(e=document.body){return e==null?[]:Array.from(e.querySelectorAll(f))}var T=(t=>(t[t.Strict=0]="Strict",t[t.Loose=1]="Loose",t))(T||{});function O(e,r=0){var t;return e===((t=x(e))==null?void 0:t.body)?!1:m(r,{[0](){return e.matches(f)},[1](){let l=e;for(;l!==null;){if(l.matches(f))return!0;l=l.parentElement}return!1}})}function S(e){e==null||e.focus({preventScroll:!0})}let b=["textarea","input"].join(",");function M(e){var r,t;return(t=(r=e==null?void 0:e.matches)==null?void 0:r.call(e,b))!=null?t:!1}function h(e,r=t=>t){return e.slice().sort((t,l)=>{let o=r(t),a=r(l);if(o===null||a===null)return 0;let n=o.compareDocumentPosition(a);return n&Node.DOCUMENT_POSITION_FOLLOWING?-1:n&Node.DOCUMENT_POSITION_PRECEDING?1:0})}function F(e,r){let t=Array.isArray(e)?e.length>0?e[0].ownerDocument:document:e.ownerDocument,l=Array.isArray(e)?h(e):N(e),o=t.activeElement,a=(()=>{if(r&5)return 1;if(r&10)return-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),n=(()=>{if(r&1)return 0;if(r&2)return Math.max(0,l.indexOf(o))-1;if(r&4)return Math.max(0,l.indexOf(o))+1;if(r&8)return l.length-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),d=r&32?{preventScroll:!0}:{},c=0,i=l.length,u;do{if(c>=i||c+i<=0)return 0;let s=n+c;if(r&16)s=(s+i)%i;else{if(s<0)return 3;if(s>=i)return 1}u=l[s],u==null||u.focus(d),c+=a}while(u!==t.activeElement);return r&6&&M(u)&&u.select(),u.hasAttribute("tabindex")||u.setAttribute("tabindex","0"),2}export{E as Focus,p as FocusResult,T as FocusableMode,S as focusElement,F as focusIn,N as getFocusableElements,O as isFocusableElement,h as sortByDomNode}; | ||
import{disposables as N}from'./disposables.js';import{match as L}from'./match.js';import{getOwnerDocument as E}from'./owner.js';let f=["[contentEditable=true]","[tabindex]","a[href]","area[href]","button:not([disabled])","iframe","input:not([disabled])","select:not([disabled])","textarea:not([disabled])"].map(e=>`${e}:not([tabindex='-1'])`).join(","),p=["[data-autofocus]"].map(e=>`${e}:not([tabindex='-1'])`).join(",");var F=(n=>(n[n.First=1]="First",n[n.Previous=2]="Previous",n[n.Next=4]="Next",n[n.Last=8]="Last",n[n.WrapAround=16]="WrapAround",n[n.NoScroll=32]="NoScroll",n[n.AutoFocus=64]="AutoFocus",n))(F||{}),T=(o=>(o[o.Error=0]="Error",o[o.Overflow=1]="Overflow",o[o.Success=2]="Success",o[o.Underflow=3]="Underflow",o))(T||{}),y=(t=>(t[t.Previous=-1]="Previous",t[t.Next=1]="Next",t))(y||{});function b(e=document.body){return e==null?[]:Array.from(e.querySelectorAll(f)).sort((r,t)=>Math.sign((r.tabIndex||Number.MAX_SAFE_INTEGER)-(t.tabIndex||Number.MAX_SAFE_INTEGER)))}function S(e=document.body){return e==null?[]:Array.from(e.querySelectorAll(p)).sort((r,t)=>Math.sign((r.tabIndex||Number.MAX_SAFE_INTEGER)-(t.tabIndex||Number.MAX_SAFE_INTEGER)))}var h=(t=>(t[t.Strict=0]="Strict",t[t.Loose=1]="Loose",t))(h||{});function A(e,r=0){var t;return e===((t=E(e))==null?void 0:t.body)?!1:L(r,{[0](){return e.matches(f)},[1](){let u=e;for(;u!==null;){if(u.matches(f))return!0;u=u.parentElement}return!1}})}function G(e){let r=E(e);N().nextFrame(()=>{r&&!A(r.activeElement,0)&&I(e)})}var H=(t=>(t[t.Keyboard=0]="Keyboard",t[t.Mouse=1]="Mouse",t))(H||{});typeof window!="undefined"&&typeof document!="undefined"&&(document.addEventListener("keydown",e=>{e.metaKey||e.altKey||e.ctrlKey||(document.documentElement.dataset.headlessuiFocusVisible="")},!0),document.addEventListener("click",e=>{e.detail===1?delete document.documentElement.dataset.headlessuiFocusVisible:e.detail===0&&(document.documentElement.dataset.headlessuiFocusVisible="")},!0));function I(e){e==null||e.focus({preventScroll:!0})}let w=["textarea","input"].join(",");function O(e){var r,t;return(t=(r=e==null?void 0:e.matches)==null?void 0:r.call(e,w))!=null?t:!1}function _(e,r=t=>t){return e.slice().sort((t,u)=>{let o=r(t),c=r(u);if(o===null||c===null)return 0;let l=o.compareDocumentPosition(c);return l&Node.DOCUMENT_POSITION_FOLLOWING?-1:l&Node.DOCUMENT_POSITION_PRECEDING?1:0})}function j(e,r){return P(b(),r,{relativeTo:e})}function P(e,r,{sorted:t=!0,relativeTo:u=null,skipElements:o=[]}={}){let c=Array.isArray(e)?e.length>0?e[0].ownerDocument:document:e.ownerDocument,l=Array.isArray(e)?t?_(e):e:r&64?S(e):b(e);o.length>0&&l.length>1&&(l=l.filter(s=>!o.some(a=>a!=null&&"current"in a?(a==null?void 0:a.current)===s:a===s))),u=u!=null?u:c.activeElement;let n=(()=>{if(r&5)return 1;if(r&10)return-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),x=(()=>{if(r&1)return 0;if(r&2)return Math.max(0,l.indexOf(u))-1;if(r&4)return Math.max(0,l.indexOf(u))+1;if(r&8)return l.length-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),M=r&32?{preventScroll:!0}:{},m=0,d=l.length,i;do{if(m>=d||m+d<=0)return 0;let s=x+m;if(r&16)s=(s+d)%d;else{if(s<0)return 3;if(s>=d)return 1}i=l[s],i==null||i.focus(M),m+=n}while(i!==c.activeElement);return r&6&&O(i)&&i.select(),2}export{F as Focus,T as FocusResult,h as FocusableMode,I as focusElement,j as focusFrom,P as focusIn,S as getAutoFocusableElements,b as getFocusableElements,A as isFocusableElement,G as restoreFocusIfNecessary,_ as sortByDomNode}; |
@@ -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 @@ | ||
function t(n){return typeof window=="undefined"?null:n instanceof Node?n.ownerDocument:n!=null&&n.hasOwnProperty("current")&&n.current instanceof Node?n.current.ownerDocument:document}export{t as getOwnerDocument}; | ||
import{env as n}from'./env.js';function u(r){return n.isServer?null:r instanceof Node?r.ownerDocument:r!=null&&r.hasOwnProperty("current")&&r.current instanceof Node?r.current.ownerDocument:document}export{u as getOwnerDocument}; |
@@ -1,4 +0,4 @@ | ||
import { ElementType, ReactElement } from 'react'; | ||
import { Props, XOR, __, Expand } from '../types'; | ||
export declare enum Features { | ||
import { type ElementType, type ReactElement, type Ref } from 'react'; | ||
import type { Expand, Props } 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 T,createElement as g,forwardRef as F,isValidElement as h}from"react";import{match as P}from"./match.js";var b=(n=>(n[n.None=0]="None",n[n.RenderStrategy=1]="RenderStrategy",n[n.Static=2]="Static",n))(b||{}),x=(e=>(e[e.Unmount=0]="Unmount",e[e.Hidden=1]="Hidden",e))(x||{});function A({ourProps:r,theirProps:t,slot:e,defaultTag:n,features:o,visible:a=!0,name:l}){let s=m(t,r);if(a)return p(s,e,n,l);let u=o!=null?o:0;if(u&2){let{static:i=!1,...d}=s;if(i)return p(d,e,n,l)}if(u&1){let{unmount:i=!0,...d}=s;return P(i?0:1,{[0](){return null},[1](){return p({...d,hidden:!0,style:{display:"none"}},e,n,l)}})}return p(s,e,n,l)}function p(r,t={},e,n){let{as:o=e,children:a,refName:l="ref",...s}=f(r,["unmount","static"]),u=r.ref!==void 0?{[l]:r.ref}:{},i=typeof a=="function"?a(t):a;if(s.className&&typeof s.className=="function"&&(s.className=s.className(t)),o===c&&Object.keys(y(s)).length>0){if(!h(i)||Array.isArray(i)&&i.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${n} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(s).map(d=>` - ${d}`).join(` | ||
import{Fragment as R,cloneElement as 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 T(i,Object.assign({},m(i.props,y(f(s,["ref"]))),u))}return g(o,Object.assign({},f(s,["ref"]),o!==c&&u),i)}function m(...r){var n;if(r.length===0)return{};if(r.length===1)return r[0];let t={},e={};for(let o of r)for(let a in o)a.startsWith("on")&&typeof o[a]=="function"?((n=e[a])!=null||(e[a]=[]),e[a].push(o[a])):t[a]=o[a];if(t.disabled||t["aria-disabled"])return Object.assign(t,Object.fromEntries(Object.keys(e).map(o=>[o,void 0])));for(let o in e)Object.assign(t,{[o](a){let l=e[o];for(let s of l){if(a.defaultPrevented)return;s(a)}}});return t}function H(r){var t;return Object.assign(F(r),{displayName:(t=r.displayName)!=null?t:r.name})}function y(r){let t=Object.assign({},r);for(let e in t)t[e]===void 0&&delete t[e];return t}function f(r,t=[]){let e=Object.assign({},r);for(let n of t)n in e&&delete e[n];return e}export{b as Features,x as RenderStrategy,y as compact,H as forwardRefWithAs,A as render}; | ||
`))}else{let d=f.props,p=d==null?void 0:d.className,c=typeof p=="function"?(...F)=>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.fe876e2", | ||
"version": "0.0.0-insiders.ff41b27", | ||
"description": "A set of completely unstyled, fully accessible UI components for React, designed to integrate beautifully with Tailwind CSS.", | ||
@@ -14,5 +14,8 @@ "main": "dist/index.cjs", | ||
"exports": { | ||
"types": { | ||
"import": "./dist/index.d.ts", | ||
"require": "./dist/index.d.cts" | ||
}, | ||
"import": "./dist/headlessui.esm.js", | ||
"require": "./dist/index.cjs", | ||
"types": "./dist/index.d.ts" | ||
"require": "./dist/index.cjs" | ||
}, | ||
@@ -38,18 +41,24 @@ "type": "module", | ||
"lint": "../../scripts/lint.sh", | ||
"playground": "yarn workspace playground-react dev", | ||
"lint-types": "npm run attw -P --workspaces --if-present", | ||
"playground": "npm run dev --workspace=playground-react", | ||
"clean": "rimraf ./dist" | ||
}, | ||
"peerDependencies": { | ||
"react": "^16 || ^17 || ^18", | ||
"react-dom": "^16 || ^17 || ^18" | ||
"react": "^18", | ||
"react-dom": "^18" | ||
}, | ||
"devDependencies": { | ||
"@testing-library/react": "^13.0.0", | ||
"@types/react": "^17.0.43", | ||
"@types/react-dom": "^17.0.14", | ||
"esbuild": "^0.11.18", | ||
"react": "^18.0.0", | ||
"react-dom": "^18.0.0", | ||
"snapshot-diff": "^0.8.1" | ||
"@testing-library/react": "^15.0.7", | ||
"@types/react": "^18.3.3", | ||
"@types/react-dom": "^18.3.0", | ||
"react": "^18.3.1", | ||
"react-dom": "^18.3.1", | ||
"snapshot-diff": "^0.10.0" | ||
}, | ||
"dependencies": { | ||
"@floating-ui/react": "^0.26.16", | ||
"@tanstack/react-virtual": "3.5.0", | ||
"@react-aria/focus": "^3.17.1", | ||
"@react-aria/interactions": "^3.21.3" | ||
} | ||
} |
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
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Environment variable access
Supply chain 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
904785
6
299
16224
6
4
1
+ Added@floating-ui/react@^0.26.16
+ Added@react-aria/focus@^3.17.1
+ Added@floating-ui/core@1.6.7(transitive)
+ Added@floating-ui/dom@1.6.10(transitive)
+ Added@floating-ui/react@0.26.23(transitive)
+ Added@floating-ui/react-dom@2.1.1(transitive)
+ Added@floating-ui/utils@0.2.7(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)