initial commit

This commit is contained in:
Dinawo committed 2024-06-11 23:18:25 +02:00
1 parent 6d8d5fcd6c
commit 8484a534db
3361 files changed
+493837

No files matched your search

+34
View File
@@ -0,0 +1,34 @@
<h3 align="center">
@headlessui/react
</h3>
<p align="center">
A set of completely unstyled, fully accessible UI components for React, designed to integrate
beautifully with Tailwind CSS.
</p>
<p align="center">
<a href="https://www.npmjs.com/package/@headlessui/react"><img src="https://img.shields.io/npm/dt/@headlessui/react.svg" alt="Total Downloads"></a>
<a href="https://github.com/tailwindlabs/headlessui/releases"><img src="https://img.shields.io/npm/v/@headlessui/react.svg" alt="Latest Release"></a>
<a href="https://github.com/tailwindlabs/headlessui/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@headlessui/react.svg" alt="License"></a>
</p>
## Installation
```sh
npm install @headlessui/react
```
## Documentation
For full documentation, visit [headlessui.dev](https://headlessui.dev/react/menu).
## Community
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
[Discuss Headless UI on GitHub](https://github.com/tailwindlabs/headlessui/discussions)
For casual chit-chat with others using the library:
[Join the Tailwind CSS Discord Server](https://discord.gg/7NF8GNe)
+136
View File
@@ -0,0 +1,136 @@
import React, { ElementType, Ref } from 'react';
import { ByComparator, EnsureArray, Expand, Props } from '../../types.js';
import { PropsForFeatures, HasDisplayName, RefProp } from '../../utils/render.js';
declare let DEFAULT_COMBOBOX_TAG: React.ExoticComponent<{
children?: React.ReactNode;
}>;
interface ComboboxRenderPropArg<TValue, TActive = TValue> {
open: boolean;
disabled: boolean;
activeIndex: number | null;
activeOption: TActive | null;
value: TValue;
}
type O = 'value' | 'defaultValue' | 'nullable' | 'multiple' | 'onChange' | 'by';
type ComboboxValueProps<TValue, TNullable extends boolean | undefined, TMultiple extends boolean | undefined, TTag extends ElementType> = Extract<({
value?: EnsureArray<TValue>;
defaultValue?: EnsureArray<TValue>;
nullable: true;
multiple: true;
onChange?(value: EnsureArray<TValue>): void;
by?: ByComparator<TValue>;
} & Props<TTag, ComboboxRenderPropArg<EnsureArray<TValue>, TValue>, O>) | ({
value?: TValue | null;
defaultValue?: TValue | null;
nullable: true;
multiple?: false;
onChange?(value: TValue | null): void;
by?: ByComparator<TValue | null>;
} & Expand<Props<TTag, ComboboxRenderPropArg<TValue | null>, O>>) | ({
value?: EnsureArray<TValue>;
defaultValue?: EnsureArray<TValue>;
nullable?: false;
multiple: true;
onChange?(value: EnsureArray<TValue>): void;
by?: ByComparator<TValue extends Array<infer U> ? U : TValue>;
} & Expand<Props<TTag, ComboboxRenderPropArg<EnsureArray<TValue>, TValue>, O>>) | ({
value?: TValue;
nullable?: false;
multiple?: false;
defaultValue?: TValue;
onChange?(value: TValue): void;
by?: ByComparator<TValue>;
} & Props<TTag, ComboboxRenderPropArg<TValue>, O>), {
nullable?: TNullable;
multiple?: TMultiple;
}>;
export type ComboboxProps<TValue, TNullable extends boolean | undefined, TMultiple extends boolean | undefined, TTag extends ElementType> = ComboboxValueProps<TValue, TNullable, TMultiple, TTag> & {
disabled?: boolean;
__demoMode?: boolean;
form?: string;
name?: string;
};
declare function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, true, true, TTag>, ref: Ref<HTMLElement>): JSX.Element;
declare function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, true, false, TTag>, ref: Ref<HTMLElement>): JSX.Element;
declare function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, false, false, TTag>, ref: Ref<HTMLElement>): JSX.Element;
declare function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, false, true, TTag>, ref: Ref<HTMLElement>): JSX.Element;
declare let DEFAULT_INPUT_TAG: "input";
interface InputRenderPropArg {
open: boolean;
disabled: boolean;
}
type InputPropsWeControl = 'aria-activedescendant' | 'aria-autocomplete' | 'aria-controls' | 'aria-expanded' | 'aria-labelledby' | 'disabled' | 'role';
export type ComboboxInputProps<TTag extends ElementType, TType> = Props<TTag, InputRenderPropArg, InputPropsWeControl, {
defaultValue?: TType;
displayValue?(item: TType): string;
onChange?(event: React.ChangeEvent<HTMLInputElement>): void;
}>;
declare function InputFn<TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TType = Parameters<typeof ComboboxRoot>[0]['value']>(props: ComboboxInputProps<TTag, TType>, ref: Ref<HTMLInputElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
declare let DEFAULT_BUTTON_TAG: "button";
interface ButtonRenderPropArg {
open: boolean;
disabled: boolean;
value: any;
}
type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded' | 'aria-haspopup' | 'aria-labelledby' | 'disabled' | 'tabIndex';
export type ComboboxButtonProps<TTag extends ElementType> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl>;
declare function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ComboboxButtonProps<TTag>, ref: Ref<HTMLButtonElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
declare let DEFAULT_LABEL_TAG: "label";
interface LabelRenderPropArg {
open: boolean;
disabled: boolean;
}
export type ComboboxLabelProps<TTag extends ElementType> = Props<TTag, LabelRenderPropArg>;
declare function LabelFn<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: ComboboxLabelProps<TTag>, ref: Ref<HTMLLabelElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
declare let DEFAULT_OPTIONS_TAG: "ul";
interface OptionsRenderPropArg {
open: boolean;
}
type OptionsPropsWeControl = 'aria-labelledby' | 'aria-multiselectable' | 'role' | 'tabIndex';
declare let OptionsRenderFeatures: number;
export type ComboboxOptionsProps<TTag extends ElementType> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl, PropsForFeatures<typeof OptionsRenderFeatures> & {
hold?: boolean;
}>;
declare function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ComboboxOptionsProps<TTag>, ref: Ref<HTMLUListElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
declare let DEFAULT_OPTION_TAG: "li";
interface OptionRenderPropArg {
active: boolean;
selected: boolean;
disabled: boolean;
}
type OptionPropsWeControl = 'role' | 'tabIndex' | 'aria-disabled' | 'aria-selected';
export type ComboboxOptionProps<TTag extends ElementType, TType> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, {
disabled?: boolean;
value: TType;
}>;
declare function OptionFn<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = Parameters<typeof ComboboxRoot>[0]['value']>(props: ComboboxOptionProps<TTag, TType>, ref: Ref<HTMLLIElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
interface ComponentCombobox extends HasDisplayName {
<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, true, true, TTag> & RefProp<typeof ComboboxFn>): JSX.Element;
<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, true, false, TTag> & RefProp<typeof ComboboxFn>): JSX.Element;
<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, false, true, TTag> & RefProp<typeof ComboboxFn>): JSX.Element;
<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(props: ComboboxProps<TValue, false, false, TTag> & RefProp<typeof ComboboxFn>): JSX.Element;
}
interface ComponentComboboxButton extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ComboboxButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element;
}
interface ComponentComboboxInput extends HasDisplayName {
<TType, TTag extends ElementType = typeof DEFAULT_INPUT_TAG>(props: ComboboxInputProps<TTag, TType> & RefProp<typeof InputFn>): JSX.Element;
}
interface ComponentComboboxLabel extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: ComboboxLabelProps<TTag> & RefProp<typeof LabelFn>): JSX.Element;
}
interface ComponentComboboxOptions extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ComboboxOptionsProps<TTag> & RefProp<typeof OptionsFn>): JSX.Element;
}
interface ComponentComboboxOption extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = Parameters<typeof ComboboxRoot>[0]['value']>(props: ComboboxOptionProps<TTag, TType> & RefProp<typeof OptionFn>): JSX.Element;
}
declare let ComboboxRoot: ComponentCombobox;
export declare let Combobox: ComponentCombobox & {
Input: ComponentComboboxInput;
Button: ComponentComboboxButton;
Label: ComponentComboboxLabel;
Options: ComponentComboboxOptions;
Option: ComponentComboboxOption;
};
export {};
+1
View File
@@ -0,0 +1 @@
import ee,{Fragment as xe,createContext as pe,createRef as Ce,useCallback as Oe,useContext as se,useEffect as be,useMemo as M,useReducer as ge,useRef as S}from"react";import{useComputed as ne}from'../../hooks/use-computed.js';import{useDisposables as re}from'../../hooks/use-disposables.js';import{useEvent as x}from'../../hooks/use-event.js';import{useId as Q}from'../../hooks/use-id.js';import{useIsoMorphicEffect as k}from'../../hooks/use-iso-morphic-effect.js';import{useLatestValue as ye}from'../../hooks/use-latest-value.js';import{useOutsideClick as Re}from'../../hooks/use-outside-click.js';import{useResolveButtonType as ve}from'../../hooks/use-resolve-button-type.js';import{useSyncRefs as Y}from'../../hooks/use-sync-refs.js';import{useTreeWalker as Pe}from'../../hooks/use-tree-walker.js';import{calculateActiveIndex as Ae,Focus as R}from'../../utils/calculate-active-index.js';import{disposables as de}from'../../utils/disposables.js';import{forwardRefWithAs as G,render as X,compact as Ee,Features as fe}from'../../utils/render.js';import{isDisabledReactIssue7711 as Se}from'../../utils/bugs.js';import{match as j}from'../../utils/match.js';import{objectToFormEntries as Ie}from'../../utils/form.js';import{sortByDomNode as Le}from'../../utils/focus-management.js';import{Hidden as Ve,Features as De}from'../../internal/hidden.js';import{useOpenClosed as Fe,State as oe,OpenClosedProvider as Me}from'../../internal/open-closed.js';import{Keys as I}from'../keyboard.js';import{useControllable as _e}from'../../hooks/use-controllable.js';import{useWatch as ce}from'../../hooks/use-watch.js';import{useTrackedPointer as he}from'../../hooks/use-tracked-pointer.js';import{isMobile as Be}from'../../utils/platform.js';import{useOwnerDocument as ke}from'../../hooks/use-owner.js';var we=(e=>(e[e.Open=0]="Open",e[e.Closed=1]="Closed",e))(we||{}),Ue=(e=>(e[e.Single=0]="Single",e[e.Multi=1]="Multi",e))(Ue||{}),Ne=(e=>(e[e.Pointer=0]="Pointer",e[e.Other=1]="Other",e))(Ne||{}),He=(n=>(n[n.OpenCombobox=0]="OpenCombobox",n[n.CloseCombobox=1]="CloseCombobox",n[n.GoToOption=2]="GoToOption",n[n.RegisterOption=3]="RegisterOption",n[n.UnregisterOption=4]="UnregisterOption",n[n.RegisterLabel=5]="RegisterLabel",n))(He||{});function ae(t,a=e=>e){let e=t.activeOptionIndex!==null?t.options[t.activeOptionIndex]:null,r=Le(a(t.options.slice()),b=>b.dataRef.current.domRef.current),l=e?r.indexOf(e):null;return l===-1&&(l=null),{options:r,activeOptionIndex:l}}let Ge={[1](t){var a;return(a=t.dataRef.current)!=null&&a.disabled||t.comboboxState===1?t:{...t,activeOptionIndex:null,comboboxState:1}},[0](t){var e;if((e=t.dataRef.current)!=null&&e.disabled||t.comboboxState===0)return t;let a=t.activeOptionIndex;if(t.dataRef.current){let{isSelected:r}=t.dataRef.current,l=t.options.findIndex(b=>r(b.dataRef.current.value));l!==-1&&(a=l)}return{...t,comboboxState:0,activeOptionIndex:a}},[2](t,a){var l,b,n,d;if((l=t.dataRef.current)!=null&&l.disabled||(b=t.dataRef.current)!=null&&b.optionsRef.current&&!((n=t.dataRef.current)!=null&&n.optionsPropsRef.current.static)&&t.comboboxState===1)return t;let e=ae(t);if(e.activeOptionIndex===null){let o=e.options.findIndex(i=>!i.dataRef.current.disabled);o!==-1&&(e.activeOptionIndex=o)}let r=Ae(a,{resolveItems:()=>e.options,resolveActiveIndex:()=>e.activeOptionIndex,resolveId:o=>o.id,resolveDisabled:o=>o.dataRef.current.disabled});return{...t,...e,activeOptionIndex:r,activationTrigger:(d=a.trigger)!=null?d:1}},[3]:(t,a)=>{var b,n;let e={id:a.id,dataRef:a.dataRef},r=ae(t,d=>[...d,e]);t.activeOptionIndex===null&&(b=t.dataRef.current)!=null&&b.isSelected(a.dataRef.current.value)&&(r.activeOptionIndex=r.options.indexOf(e));let l={...t,...r,activationTrigger:1};return(n=t.dataRef.current)!=null&&n.__demoMode&&t.dataRef.current.value===void 0&&(l.activeOptionIndex=0),l},[4]:(t,a)=>{let e=ae(t,r=>{let l=r.findIndex(b=>b.id===a.id);return l!==-1&&r.splice(l,1),r});return{...t,...e,activationTrigger:1}},[5]:(t,a)=>({...t,labelId:a.id})},le=pe(null);le.displayName="ComboboxActionsContext";function Z(t){let a=se(le);if(a===null){let e=new Error(`<${t} /> is missing a parent <Combobox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(e,Z),e}return a}let ie=pe(null);ie.displayName="ComboboxDataContext";function J(t){let a=se(ie);if(a===null){let e=new Error(`<${t} /> is missing a parent <Combobox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(e,J),e}return a}function Xe(t,a){return j(a.type,Ge,t,a)}let je=xe;function Je(t,a){let{value:e,defaultValue:r,onChange:l,form:b,name:n,by:d=(u,T)=>u===T,disabled:o=!1,__demoMode:i=!1,nullable:A=!1,multiple:O=!1,...C}=t,[f=O?[]:void 0,g]=_e(e,l,r),[m,c]=ge(Xe,{dataRef:Ce(),comboboxState:i?0:1,options:[],activeOptionIndex:null,activationTrigger:1,labelId:null}),D=S(!1),_=S({static:!1,hold:!1}),w=S(null),U=S(null),N=S(null),K=S(null),h=x(typeof d=="string"?(u,T)=>{let v=d;return(u==null?void 0:u[v])===(T==null?void 0:T[v])}:d),H=Oe(u=>j(p.mode,{[1]:()=>f.soLine truncated
@@ -0,0 +1,23 @@
import React, { ElementType, ReactNode, Ref } from 'react';
import { Props } from '../../types.js';
import { HasDisplayName, RefProp } from '../../utils/render.js';
interface SharedData {
slot?: {};
name?: string;
props?: {};
}
interface DescriptionProviderProps extends SharedData {
children: ReactNode;
}
export declare function useDescriptions(): [
string | undefined,
(props: DescriptionProviderProps) => JSX.Element
];
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<HTMLParagraphElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
export interface ComponentDescription extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG>(props: DescriptionProps<TTag> & RefProp<typeof DescriptionFn>): JSX.Element;
}
export declare let Description: ComponentDescription;
export {};
@@ -0,0 +1 @@
import u,{createContext as m,useContext as D,useMemo as l,useState as T}from"react";import{useId as P}from'../../hooks/use-id.js';import{forwardRefWithAs as g,render as E}from'../../utils/render.js';import{useIsoMorphicEffect as x}from'../../hooks/use-iso-morphic-effect.js';import{useSyncRefs as R}from'../../hooks/use-sync-refs.js';import{useEvent as I}from'../../hooks/use-event.js';let d=m(null);function f(){let r=D(d);if(r===null){let t=new Error("You used a <Description /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(t,f),t}return r}function M(){let[r,t]=T([]);return[r.length>0?r.join(" "):void 0,l(()=>function(e){let i=I(s=>(t(o=>[...o,s]),()=>t(o=>{let p=o.slice(),c=p.indexOf(s);return c!==-1&&p.splice(c,1),p}))),n=l(()=>({register:i,slot:e.slot,name:e.name,props:e.props}),[i,e.slot,e.name,e.props]);return u.createElement(d.Provider,{value:n},e.children)},[t])]}let S="p";function h(r,t){let a=P(),{id:e=`headlessui-description-${a}`,...i}=r,n=f(),s=R(t);x(()=>n.register(e),[e,n.register]);let o={ref:s,...n.props,id:e};return E({ourProps:o,theirProps:i,slot:n.slot||{},defaultTag:S,name:n.name||"Description"})}let y=g(h),b=Object.assign(y,{});export{b as Description,M as useDescriptions};
+68
View File
@@ -0,0 +1,68 @@
import React, { ElementType, MutableRefObject, Ref } from 'react';
import { Props } from '../../types.js';
import { PropsForFeatures, HasDisplayName, RefProp } from '../../utils/render.js';
import { ComponentDescription } from '../description/description.js';
declare let DEFAULT_DIALOG_TAG: "div";
interface DialogRenderPropArg {
open: boolean;
}
type DialogPropsWeControl = 'role' | 'aria-describedby' | 'aria-labelledby' | 'aria-modal';
declare let DialogRenderFeatures: number;
export type DialogProps<TTag extends ElementType> = Props<TTag, DialogRenderPropArg, DialogPropsWeControl, PropsForFeatures<typeof DialogRenderFeatures> & {
open?: boolean;
onClose(value: boolean): void;
initialFocus?: MutableRefObject<HTMLElement | null>;
__demoMode?: boolean;
}>;
declare function DialogFn<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(props: DialogProps<TTag>, ref: Ref<HTMLDivElement>): JSX.Element;
declare let DEFAULT_OVERLAY_TAG: "div";
interface OverlayRenderPropArg {
open: boolean;
}
type OverlayPropsWeControl = 'aria-hidden';
export type DialogOverlayProps<TTag extends ElementType> = Props<TTag, OverlayRenderPropArg, OverlayPropsWeControl>;
declare function OverlayFn<TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(props: DialogOverlayProps<TTag>, ref: Ref<HTMLDivElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
declare let DEFAULT_BACKDROP_TAG: "div";
interface BackdropRenderPropArg {
open: boolean;
}
type BackdropPropsWeControl = 'aria-hidden';
export type DialogBackdropProps<TTag extends ElementType> = Props<TTag, BackdropRenderPropArg, BackdropPropsWeControl>;
declare function BackdropFn<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(props: DialogBackdropProps<TTag>, ref: Ref<HTMLDivElement>): JSX.Element;
declare let DEFAULT_PANEL_TAG: "div";
interface PanelRenderPropArg {
open: boolean;
}
export type DialogPanelProps<TTag extends ElementType> = Props<TTag, PanelRenderPropArg>;
declare function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DialogPanelProps<TTag>, ref: Ref<HTMLDivElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
declare let DEFAULT_TITLE_TAG: "h2";
interface TitleRenderPropArg {
open: boolean;
}
export type DialogTitleProps<TTag extends ElementType> = Props<TTag, TitleRenderPropArg>;
declare function TitleFn<TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(props: DialogTitleProps<TTag>, ref: Ref<HTMLHeadingElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
interface ComponentDialog extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(props: DialogProps<TTag> & RefProp<typeof DialogFn>): JSX.Element;
}
interface ComponentDialogBackdrop extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(props: DialogBackdropProps<TTag> & RefProp<typeof BackdropFn>): JSX.Element;
}
interface ComponentDialogPanel extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DialogPanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element;
}
interface ComponentDialogOverlay extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(props: DialogOverlayProps<TTag> & RefProp<typeof OverlayFn>): JSX.Element;
}
interface ComponentDialogTitle extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(props: DialogTitleProps<TTag> & RefProp<typeof TitleFn>): JSX.Element;
}
interface ComponentDialogDescription extends ComponentDescription {
}
export declare let Dialog: ComponentDialog & {
Backdrop: ComponentDialogBackdrop;
Panel: ComponentDialogPanel;
Overlay: ComponentDialogOverlay;
Title: ComponentDialogTitle;
Description: ComponentDialogDescription;
};
export {};
+1
View File
@@ -0,0 +1 @@
import u,{createContext as ce,createRef as De,useCallback as j,useContext as K,useEffect as w,useMemo as y,useReducer as me,useRef as Pe,useState as ye}from"react";import{match as B}from'../../utils/match.js';import{forwardRefWithAs as E,render as A,Features as V}from'../../utils/render.js';import{useSyncRefs as R}from'../../hooks/use-sync-refs.js';import{Keys as Ee}from'../keyboard.js';import{isDisabledReactIssue7711 as Ae}from'../../utils/bugs.js';import{useId as C}from'../../hooks/use-id.js';import{FocusTrap as v}from'../../components/focus-trap/focus-trap.js';import{Portal as H,useNestedPortals as Re}from'../../components/portal/portal.js';import{ForcePortalRoot as G}from'../../internal/portal-force-root.js';import{Description as Ce,useDescriptions as ve}from'../description/description.js';import{useOpenClosed as Oe,State as _}from'../../internal/open-closed.js';import{useServerHandoffComplete as be}from'../../hooks/use-server-handoff-complete.js';import{StackProvider as he,StackMessage as q}from'../../internal/stack-context.js';import{useOutsideClick as Se}from'../../hooks/use-outside-click.js';import{useOwnerDocument as Le}from'../../hooks/use-owner.js';import{useEventListener as Fe}from'../../hooks/use-event-listener.js';import{useEvent as O}from'../../hooks/use-event.js';import{useDocumentOverflowLockedEffect as ke}from'../../hooks/document-overflow/use-document-overflow.js';import{useInert as z}from'../../hooks/use-inert.js';import{useRootContainers as xe}from'../../hooks/use-root-containers.js';var _e=(o=>(o[o.Open=0]="Open",o[o.Closed=1]="Closed",o))(_e||{}),Ie=(e=>(e[e.SetTitleId=0]="SetTitleId",e))(Ie||{});let Me={[0](t,e){return t.titleId===e.id?t:{...t,titleId:e.id}}},I=ce(null);I.displayName="DialogContext";function b(t){let e=K(I);if(e===null){let o=new Error(`<${t} /> is missing a parent <Dialog /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,b),o}return e}function we(t,e,o=()=>[document.body]){ke(t,e,i=>{var n;return{containers:[...(n=i.containers)!=null?n:[],o]}})}function Be(t,e){return B(e.type,Me,t,e)}let He="div",Ge=V.RenderStrategy|V.Static;function Ne(t,e){var X;let o=C(),{id:i=`headlessui-dialog-${o}`,open:n,onClose:l,initialFocus:s,__demoMode:g=!1,...T}=t,[m,h]=ye(0),a=Oe();n===void 0&&a!==null&&(n=(a&_.Open)===_.Open);let D=Pe(null),Q=R(D,e),f=Le(D),N=t.hasOwnProperty("open")||a!==null,U=t.hasOwnProperty("onClose");if(!N&&!U)throw new Error("You have to provide an `open` and an `onClose` prop to the `Dialog` component.");if(!N)throw new Error("You provided an `onClose` prop to the `Dialog`, but forgot an `open` prop.");if(!U)throw new Error("You provided an `open` prop to the `Dialog`, but forgot an `onClose` prop.");if(typeof n!="boolean")throw new Error(`You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${n}`);if(typeof l!="function")throw new Error(`You provided an \`onClose\` prop to the \`Dialog\`, but the value is not a function. Received: ${l}`);let p=n?0:1,[S,Z]=me(Be,{titleId:null,descriptionId:null,panelRef:De()}),P=O(()=>l(!1)),W=O(r=>Z({type:0,id:r})),L=be()?g?!1:p===0:!1,F=m>1,Y=K(I)!==null,[ee,te]=Re(),{resolveContainers:M,mainTreeNodeRef:k,MainTreeNode:oe}=xe({portals:ee,defaultContainers:[(X=S.panelRef.current)!=null?X:D.current]}),re=F?"parent":"leaf",$=a!==null?(a&_.Closing)===_.Closing:!1,ne=(()=>Y||$?!1:L)(),le=j(()=>{var r,c;return(c=Array.from((r=f==null?void 0:f.querySelectorAll("body > *"))!=null?r:[]).find(d=>d.id==="headlessui-portal-root"?!1:d.contains(k.current)&&d instanceof HTMLElement))!=null?c:null},[k]);z(le,ne);let ae=(()=>F?!0:L)(),ie=j(()=>{var r,c;return(c=Array.from((r=f==null?void 0:f.querySelectorAll("[data-headlessui-portal]"))!=null?r:[]).find(d=>d.contains(k.current)&&d instanceof HTMLElement))!=null?c:null},[k]);z(ie,ae);let se=(()=>!(!L||F))();Se(M,P,se);let pe=(()=>!(F||p!==0))();Fe(f==null?void 0:f.defaultView,"keydown",r=>{pe&&(r.defaultPrevented||r.key===Ee.Escape&&(r.preventDefault(),r.stopPropagation(),P()))});let de=(()=>!($||p!==0||Y))();we(f,de,M),w(()=>{if(p!==0||!D.current)return;let r=new ResizeObserver(c=>{for(let d of c){let x=d.target.getBoundingClientRect();x.x===0&&x.y===0&&x.width===0&&x.height===0&&P()}});return r.observe(D.current),()=>r.disconnect()},[p,D,P]);let[ue,fe]=ve(),ge=y(()=>[{dialogState:p,close:P,setTitleId:W},S],[p,S,P,W]),J=y(()=>({open:p===0}),[p]),Te={ref:Q,id:i,role:"dialog","aria-modal":p===0?!0:void 0,"aria-labelledby":S.titleId,"aria-describedby":ue};return u.createElement(he,{type:"Dialog",enabled:p===0,element:D,onUpdate:O((r,c)=>{c==="Dialog"&&B(r,{[q.Add]:()=>h(d=>d+1),[q.Remove]:()=>h(d=>d-1)})})},u.createElement(G,{force:!0},u.createElement(H,null,u.createElement(I.Provider,{value:ge},u.createElement(H.Group,{target:D},u.createElement(G,{force:!1},u.createElement(fe,{slot:J,name:"Dialog.Description"},u.createElement(v,{initialFocus:s,containers:M,features:L?B(re,{parent:v.features.RestoreFocus,leaf:v.features.All&~v.featureLine truncated
@@ -0,0 +1,45 @@
import React, { ElementType, MutableRefObject, Ref } from 'react';
import { Props } from '../../types.js';
import { PropsForFeatures, HasDisplayName, RefProp } from '../../utils/render.js';
declare let DEFAULT_DISCLOSURE_TAG: React.ExoticComponent<{
children?: React.ReactNode;
}>;
interface DisclosureRenderPropArg {
open: boolean;
close(focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null>): void;
}
export type DisclosureProps<TTag extends ElementType> = Props<TTag, DisclosureRenderPropArg> & {
defaultOpen?: boolean;
};
declare function DisclosureFn<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG>(props: DisclosureProps<TTag>, ref: Ref<HTMLElement>): JSX.Element;
declare let DEFAULT_BUTTON_TAG: "button";
interface ButtonRenderPropArg {
open: boolean;
}
type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded';
export type DisclosureButtonProps<TTag extends ElementType> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, {
disabled?: boolean;
}>;
declare function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: DisclosureButtonProps<TTag>, ref: Ref<HTMLButtonElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
declare let DEFAULT_PANEL_TAG: "div";
interface PanelRenderPropArg {
open: boolean;
close: (focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null>) => void;
}
declare let PanelRenderFeatures: number;
export type DisclosurePanelProps<TTag extends ElementType> = Props<TTag, PanelRenderPropArg> & PropsForFeatures<typeof PanelRenderFeatures>;
declare function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DisclosurePanelProps<TTag>, ref: Ref<HTMLDivElement>): JSX.Element;
interface ComponentDisclosure extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG>(props: DisclosureProps<TTag> & RefProp<typeof DisclosureFn>): JSX.Element;
}
interface ComponentDisclosureButton extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: DisclosureButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element;
}
interface ComponentDisclosurePanel extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: DisclosurePanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element;
}
export declare let Disclosure: ComponentDisclosure & {
Button: ComponentDisclosureButton;
Panel: ComponentDisclosurePanel;
};
export {};
@@ -0,0 +1 @@
import E,{Fragment as F,createContext as C,useContext as I,useEffect as h,useMemo as S,useReducer as N,useRef as g}from"react";import{match as x}from'../../utils/match.js';import{forwardRefWithAs as L,render as O,Features as U}from'../../utils/render.js';import{optionalRef as K,useSyncRefs as B}from'../../hooks/use-sync-refs.js';import{useId as _}from'../../hooks/use-id.js';import{Keys as m}from'../keyboard.js';import{isDisabledReactIssue7711 as G}from'../../utils/bugs.js';import{OpenClosedProvider as j,State as R,useOpenClosed as W}from'../../internal/open-closed.js';import{useResolveButtonType as $}from'../../hooks/use-resolve-button-type.js';import{getOwnerDocument as J}from'../../utils/owner.js';import{useEvent as A}from'../../hooks/use-event.js';import{startTransition as X}from'../../utils/start-transition.js';var q=(o=>(o[o.Open=0]="Open",o[o.Closed=1]="Closed",o))(q||{}),z=(t=>(t[t.ToggleDisclosure=0]="ToggleDisclosure",t[t.CloseDisclosure=1]="CloseDisclosure",t[t.SetButtonId=2]="SetButtonId",t[t.SetPanelId=3]="SetPanelId",t[t.LinkPanel=4]="LinkPanel",t[t.UnlinkPanel=5]="UnlinkPanel",t))(z||{});let Q={[0]:e=>({...e,disclosureState:x(e.disclosureState,{[0]:1,[1]:0})}),[1]:e=>e.disclosureState===1?e:{...e,disclosureState:1},[4](e){return e.linkedPanel===!0?e:{...e,linkedPanel:!0}},[5](e){return e.linkedPanel===!1?e:{...e,linkedPanel:!1}},[2](e,n){return e.buttonId===n.buttonId?e:{...e,buttonId:n.buttonId}},[3](e,n){return e.panelId===n.panelId?e:{...e,panelId:n.panelId}}},k=C(null);k.displayName="DisclosureContext";function M(e){let n=I(k);if(n===null){let o=new Error(`<${e} /> is missing a parent <Disclosure /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,M),o}return n}let v=C(null);v.displayName="DisclosureAPIContext";function w(e){let n=I(v);if(n===null){let o=new Error(`<${e} /> is missing a parent <Disclosure /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,w),o}return n}let H=C(null);H.displayName="DisclosurePanelContext";function V(){return I(H)}function Y(e,n){return x(n.type,Q,e,n)}let Z=F;function ee(e,n){let{defaultOpen:o=!1,...u}=e,T=g(null),l=B(n,K(a=>{T.current=a},e.as===void 0||e.as===F)),t=g(null),f=g(null),s=N(Y,{disclosureState:o?0:1,linkedPanel:!1,buttonRef:f,panelRef:t,buttonId:null,panelId:null}),[{disclosureState:i,buttonId:c},D]=s,d=A(a=>{D({type:1});let r=J(T);if(!r||!c)return;let p=(()=>a?a instanceof HTMLElement?a:a.current instanceof HTMLElement?a.current:r.getElementById(c):r.getElementById(c))();p==null||p.focus()}),P=S(()=>({close:d}),[d]),b=S(()=>({open:i===0,close:d}),[i,d]),y={ref:l};return E.createElement(k.Provider,{value:s},E.createElement(v.Provider,{value:P},E.createElement(j,{value:x(i,{[0]:R.Open,[1]:R.Closed})},O({ourProps:y,theirProps:u,slot:b,defaultTag:Z,name:"Disclosure"}))))}let te="button";function ne(e,n){let o=_(),{id:u=`headlessui-disclosure-button-${o}`,...T}=e,[l,t]=M("Disclosure.Button"),f=V(),s=f===null?!1:f===l.panelId,i=g(null),c=B(i,n,s?null:l.buttonRef);h(()=>{if(!s)return t({type:2,buttonId:u}),()=>{t({type:2,buttonId:null})}},[u,t,s]);let D=A(r=>{var p;if(s){if(l.disclosureState===1)return;switch(r.key){case m.Space:case m.Enter:r.preventDefault(),r.stopPropagation(),t({type:0}),(p=l.buttonRef.current)==null||p.focus();break}}else switch(r.key){case m.Space:case m.Enter:r.preventDefault(),r.stopPropagation(),t({type:0});break}}),d=A(r=>{switch(r.key){case m.Space:r.preventDefault();break}}),P=A(r=>{var p;G(r.currentTarget)||e.disabled||(s?(t({type:0}),(p=l.buttonRef.current)==null||p.focus()):t({type:0}))}),b=S(()=>({open:l.disclosureState===0}),[l]),y=$(e,i),a=s?{ref:c,type:y,onKeyDown:D,onClick:P}:{ref:c,id:u,type:y,"aria-expanded":l.disclosureState===0,"aria-controls":l.linkedPanel?l.panelId:void 0,onKeyDown:D,onKeyUp:d,onClick:P};return O({ourProps:a,theirProps:T,slot:b,defaultTag:te,name:"Disclosure.Button"})}let le="div",oe=U.RenderStrategy|U.Static;function re(e,n){let o=_(),{id:u=`headlessui-disclosure-panel-${o}`,...T}=e,[l,t]=M("Disclosure.Panel"),{close:f}=w("Disclosure.Panel"),s=B(n,l.panelRef,P=>{X(()=>t({type:P?4:5}))});h(()=>(t({type:3,panelId:u}),()=>{t({type:3,panelId:null})}),[u,t]);let i=W(),c=(()=>i!==null?(i&R.Open)===R.Open:l.disclosureState===0)(),D=S(()=>({open:l.disclosureState===0,close:f}),[l,f]),d={ref:s,id:u};return E.createElement(H.Provider,{value:l.panelId},O({ourProps:d,theirProps:T,slot:D,defaultTag:le,features:oe,visible:c,name:"Disclosure.Panel"}))}let se=L(ee),ue=L(ne),ie=L(re),ve=Object.assign(se,{Button:ue,Panel:ie});export{ve as Disclosure};
@@ -0,0 +1,32 @@
import { ElementType, MutableRefObject, Ref } from 'react';
import { Props } from '../../types.js';
import { HasDisplayName, RefProp } from '../../utils/render.js';
type Containers = (() => Iterable<HTMLElement>) | MutableRefObject<Set<MutableRefObject<HTMLElement | null>>>;
declare let DEFAULT_FOCUS_TRAP_TAG: "div";
declare enum Features {
/** No features enabled for the focus trap. */
None = 1,
/** Ensure that we move focus initially into the container. */
InitialFocus = 2,
/** Ensure that pressing `Tab` and `Shift+Tab` is trapped within the container. */
TabLock = 4,
/** Ensure that programmatically moving focus outside of the container is disallowed. */
FocusLock = 8,
/** Ensure that we restore the focus when unmounting the focus trap. */
RestoreFocus = 16,
/** Enable all features. */
All = 30
}
export type FocusTrapProps<TTag extends ElementType> = Props<TTag> & {
initialFocus?: MutableRefObject<HTMLElement | null>;
features?: Features;
containers?: Containers;
};
declare function FocusTrapFn<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(props: FocusTrapProps<TTag>, ref: Ref<HTMLDivElement>): JSX.Element;
interface ComponentFocusTrap extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(props: FocusTrapProps<TTag> & RefProp<typeof FocusTrapFn>): JSX.Element;
}
export declare let FocusTrap: ComponentFocusTrap & {
features: typeof Features;
};
export {};
@@ -0,0 +1 @@
import E,{useRef as L}from"react";import{forwardRefWithAs as U,render as N}from'../../utils/render.js';import{useServerHandoffComplete as I}from'../../hooks/use-server-handoff-complete.js';import{useSyncRefs as x}from'../../hooks/use-sync-refs.js';import{Features as R,Hidden as g}from'../../internal/hidden.js';import{focusElement as f,focusIn as M,Focus as p,FocusResult as w}from'../../utils/focus-management.js';import{match as k}from'../../utils/match.js';import{useEvent as A}from'../../hooks/use-event.js';import{useTabDirection as G,Direction as H}from'../../hooks/use-tab-direction.js';import{useIsMounted as C}from'../../hooks/use-is-mounted.js';import{useOwnerDocument as K}from'../../hooks/use-owner.js';import{useEventListener as W}from'../../hooks/use-event-listener.js';import{microTask as O}from'../../utils/micro-task.js';import{useWatch as F}from'../../hooks/use-watch.js';import{useDisposables as V}from'../../hooks/use-disposables.js';import{onDocumentReady as q}from'../../utils/document-ready.js';import{useOnUnmount as D}from'../../hooks/use-on-unmount.js';function P(t){if(!t)return new Set;if(typeof t=="function")return new Set(t());let r=new Set;for(let e of t.current)e.current instanceof HTMLElement&&r.add(e.current);return r}let J="div";var h=(n=>(n[n.None=1]="None",n[n.InitialFocus=2]="InitialFocus",n[n.TabLock=4]="TabLock",n[n.FocusLock=8]="FocusLock",n[n.RestoreFocus=16]="RestoreFocus",n[n.All=30]="All",n))(h||{});function X(t,r){let e=L(null),o=x(e,r),{initialFocus:u,containers:i,features:n=30,...l}=t;I()||(n=1);let m=K(e);Y({ownerDocument:m},Boolean(n&16));let c=Z({ownerDocument:m,container:e,initialFocus:u},Boolean(n&2));$({ownerDocument:m,container:e,containers:i,previousActiveElement:c},Boolean(n&8));let v=G(),y=A(s=>{let T=e.current;if(!T)return;(B=>B())(()=>{k(v.current,{[H.Forwards]:()=>{M(T,p.First,{skipElements:[s.relatedTarget]})},[H.Backwards]:()=>{M(T,p.Last,{skipElements:[s.relatedTarget]})}})})}),_=V(),b=L(!1),j={ref:o,onKeyDown(s){s.key=="Tab"&&(b.current=!0,_.requestAnimationFrame(()=>{b.current=!1}))},onBlur(s){let T=P(i);e.current instanceof HTMLElement&&T.add(e.current);let d=s.relatedTarget;d instanceof HTMLElement&&d.dataset.headlessuiFocusGuard!=="true"&&(S(T,d)||(b.current?M(e.current,k(v.current,{[H.Forwards]:()=>p.Next,[H.Backwards]:()=>p.Previous})|p.WrapAround,{relativeTo:s.target}):s.target instanceof HTMLElement&&f(s.target)))}};return E.createElement(E.Fragment,null,Boolean(n&4)&&E.createElement(g,{as:"button",type:"button","data-headlessui-focus-guard":!0,onFocus:y,features:R.Focusable}),N({ourProps:j,theirProps:l,defaultTag:J,name:"FocusTrap"}),Boolean(n&4)&&E.createElement(g,{as:"button",type:"button","data-headlessui-focus-guard":!0,onFocus:y,features:R.Focusable}))}let z=U(X),ge=Object.assign(z,{features:h}),a=[];q(()=>{function t(r){r.target instanceof HTMLElement&&r.target!==document.body&&a[0]!==r.target&&(a.unshift(r.target),a=a.filter(e=>e!=null&&e.isConnected),a.splice(10))}window.addEventListener("click",t,{capture:!0}),window.addEventListener("mousedown",t,{capture:!0}),window.addEventListener("focus",t,{capture:!0}),document.body.addEventListener("click",t,{capture:!0}),document.body.addEventListener("mousedown",t,{capture:!0}),document.body.addEventListener("focus",t,{capture:!0})});function Q(t=!0){let r=L(a.slice());return F(([e],[o])=>{o===!0&&e===!1&&O(()=>{r.current.splice(0)}),o===!1&&e===!0&&(r.current=a.slice())},[t,a,r]),A(()=>{var e;return(e=r.current.find(o=>o!=null&&o.isConnected))!=null?e:null})}function Y({ownerDocument:t},r){let e=Q(r);F(()=>{r||(t==null?void 0:t.activeElement)===(t==null?void 0:t.body)&&f(e())},[r]),D(()=>{r&&f(e())})}function Z({ownerDocument:t,container:r,initialFocus:e},o){let u=L(null),i=C();return F(()=>{if(!o)return;let n=r.current;n&&O(()=>{if(!i.current)return;let l=t==null?void 0:t.activeElement;if(e!=null&&e.current){if((e==null?void 0:e.current)===l){u.current=l;return}}else if(n.contains(l)){u.current=l;return}e!=null&&e.current?f(e.current):M(n,p.First)===w.Error&&console.warn("There are no focusable elements inside the <FocusTrap />"),u.current=t==null?void 0:t.activeElement})},[o]),u}function $({ownerDocument:t,container:r,containers:e,previousActiveElement:o},u){let i=C();W(t==null?void 0:t.defaultView,"focus",n=>{if(!u||!i.current)return;let l=P(e);r.current instanceof HTMLElement&&l.add(r.current);let m=o.current;if(!m)return;let c=n.target;c&&c instanceof HTMLElement?S(l,c)?(o.current=c,f(c)):(n.preventDefault(),n.stopPropagation(),f(m)):f(o.current)},!0)}function S(t,r){for(let e of t)if(e.contains(r))return!0;return!1}export{ge as FocusTrap};
+16
View File
@@ -0,0 +1,16 @@
export declare enum Keys {
Space = " ",
Enter = "Enter",
Escape = "Escape",
Backspace = "Backspace",
Delete = "Delete",
ArrowLeft = "ArrowLeft",
ArrowUp = "ArrowUp",
ArrowRight = "ArrowRight",
ArrowDown = "ArrowDown",
Home = "Home",
End = "End",
PageUp = "PageUp",
PageDown = "PageDown",
Tab = "Tab"
}
+1
View File
@@ -0,0 +1 @@
var o=(r=>(r.Space=" ",r.Enter="Enter",r.Escape="Escape",r.Backspace="Backspace",r.Delete="Delete",r.ArrowLeft="ArrowLeft",r.ArrowUp="ArrowUp",r.ArrowRight="ArrowRight",r.ArrowDown="ArrowDown",r.Home="Home",r.End="End",r.PageUp="PageUp",r.PageDown="PageDown",r.Tab="Tab",r))(o||{});export{o as Keys};
+22
View File
@@ -0,0 +1,22 @@
import React, { ElementType, ReactNode, Ref } from 'react';
import { Props } from '../../types.js';
import { HasDisplayName, RefProp } from '../../utils/render.js';
interface SharedData {
slot?: {};
name?: string;
props?: {};
}
interface LabelProviderProps extends SharedData {
children: ReactNode;
}
export declare function useLabels(): [string | undefined, (props: LabelProviderProps) => JSX.Element];
declare let DEFAULT_LABEL_TAG: "label";
export type LabelProps<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> = Props<TTag> & {
passive?: boolean;
};
declare function LabelFn<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: LabelProps<TTag>, ref: Ref<HTMLLabelElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
export interface ComponentLabel extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: LabelProps<TTag> & RefProp<typeof LabelFn>): JSX.Element;
}
export declare let Label: ComponentLabel;
export {};
+1
View File
@@ -0,0 +1 @@
import c,{createContext as m,useContext as L,useMemo as f,useState as b}from"react";import{useId as T}from'../../hooks/use-id.js';import{forwardRefWithAs as E,render as g}from'../../utils/render.js';import{useIsoMorphicEffect as x}from'../../hooks/use-iso-morphic-effect.js';import{useSyncRefs as P}from'../../hooks/use-sync-refs.js';import{useEvent as y}from'../../hooks/use-event.js';let d=m(null);function u(){let o=L(d);if(o===null){let t=new Error("You used a <Label /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(t,u),t}return o}function H(){let[o,t]=b([]);return[o.length>0?o.join(" "):void 0,f(()=>function(e){let s=y(r=>(t(l=>[...l,r]),()=>t(l=>{let n=l.slice(),p=n.indexOf(r);return p!==-1&&n.splice(p,1),n}))),a=f(()=>({register:s,slot:e.slot,name:e.name,props:e.props}),[s,e.slot,e.name,e.props]);return c.createElement(d.Provider,{value:a},e.children)},[t])]}let A="label";function h(o,t){let i=T(),{id:e=`headlessui-label-${i}`,passive:s=!1,...a}=o,r=u(),l=P(t);x(()=>r.register(e),[e,r.register]);let n={ref:l,...r.props,id:e};return s&&("onClick"in n&&(delete n.htmlFor,delete n.onClick),"onClick"in a&&delete a.onClick),g({ourProps:n,theirProps:a,slot:r.slot||{},defaultTag:A,name:r.name||"Label"})}let v=E(h),M=Object.assign(v,{});export{M as Label,H as useLabels};
+82
View File
@@ -0,0 +1,82 @@
import React, { ElementType, Ref } from 'react';
import { Props } from '../../types.js';
import { PropsForFeatures, HasDisplayName, RefProp } from '../../utils/render.js';
declare let DEFAULT_LISTBOX_TAG: React.ExoticComponent<{
children?: React.ReactNode;
}>;
interface ListboxRenderPropArg<T> {
open: boolean;
disabled: boolean;
value: T;
}
export type ListboxProps<TTag extends ElementType, TType, TActualType> = Props<TTag, ListboxRenderPropArg<TType>, 'value' | 'defaultValue' | 'onChange' | 'by' | 'disabled' | 'horizontal' | 'name' | 'multiple'> & {
value?: TType;
defaultValue?: TType;
onChange?(value: TType): void;
by?: (keyof TActualType & string) | ((a: TActualType, z: TActualType) => boolean);
disabled?: boolean;
horizontal?: boolean;
form?: string;
name?: string;
multiple?: boolean;
};
declare function ListboxFn<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType extends (infer U)[] ? U : TType>(props: ListboxProps<TTag, TType, TActualType>, ref: Ref<HTMLElement>): JSX.Element;
declare let DEFAULT_BUTTON_TAG: "button";
interface ButtonRenderPropArg {
open: boolean;
disabled: boolean;
value: any;
}
type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded' | 'aria-haspopup' | 'aria-labelledby' | 'disabled';
export type ListboxButtonProps<TTag extends ElementType> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl>;
declare function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ListboxButtonProps<TTag>, ref: Ref<HTMLButtonElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
declare let DEFAULT_LABEL_TAG: "label";
interface LabelRenderPropArg {
open: boolean;
disabled: boolean;
}
export type ListboxLabelProps<TTag extends ElementType> = Props<TTag, LabelRenderPropArg>;
declare function LabelFn<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: ListboxLabelProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
declare let DEFAULT_OPTIONS_TAG: "ul";
interface OptionsRenderPropArg {
open: boolean;
}
type OptionsPropsWeControl = 'aria-activedescendant' | 'aria-labelledby' | 'aria-multiselectable' | 'aria-orientation' | 'role' | 'tabIndex';
declare let OptionsRenderFeatures: number;
export type ListboxOptionsProps<TTag extends ElementType> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl> & PropsForFeatures<typeof OptionsRenderFeatures>;
declare function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ListboxOptionsProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
declare let DEFAULT_OPTION_TAG: "li";
interface OptionRenderPropArg {
active: boolean;
selected: boolean;
disabled: boolean;
}
type OptionPropsWeControl = 'aria-disabled' | 'aria-selected' | 'role' | 'tabIndex';
export type ListboxOptionProps<TTag extends ElementType, TType> = 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;
interface ComponentListbox extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType extends (infer U)[] ? U : TType>(props: ListboxProps<TTag, TType, TActualType> & RefProp<typeof ListboxFn>): JSX.Element;
}
interface ComponentListboxButton extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: ListboxButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element;
}
interface ComponentListboxLabel extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(props: ListboxLabelProps<TTag> & RefProp<typeof LabelFn>): JSX.Element;
}
interface ComponentListboxOptions extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(props: ListboxOptionsProps<TTag> & RefProp<typeof OptionsFn>): JSX.Element;
}
interface ComponentListboxOption extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = Parameters<typeof ListboxRoot>[0]['value']>(props: ListboxOptionProps<TTag, TType> & RefProp<typeof OptionFn>): JSX.Element;
}
declare let ListboxRoot: ComponentListbox;
export declare let Listbox: ComponentListbox & {
Button: ComponentListboxButton;
Label: ComponentListboxLabel;
Options: ComponentListboxOptions;
Option: ComponentListboxOption;
};
export {};
+1
View File
@@ -0,0 +1 @@
import N,{Fragment as xe,createContext as Z,createRef as ye,useCallback as ge,useContext as ee,useEffect as te,useMemo as h,useReducer as Le,useRef as D}from"react";import{useDisposables as j}from'../../hooks/use-disposables.js';import{useId as V}from'../../hooks/use-id.js';import{useIsoMorphicEffect as K}from'../../hooks/use-iso-morphic-effect.js';import{useComputed as oe}from'../../hooks/use-computed.js';import{useSyncRefs as M}from'../../hooks/use-sync-refs.js';import{Features as ne,forwardRefWithAs as k,render as w,compact as Oe}from'../../utils/render.js';import{match as I}from'../../utils/match.js';import{disposables as $}from'../../utils/disposables.js';import{Keys as g}from'../keyboard.js';import{Focus as v,calculateActiveIndex as me}from'../../utils/calculate-active-index.js';import{isDisabledReactIssue7711 as Re}from'../../utils/bugs.js';import{isFocusableElement as ve,FocusableMode as Ae,sortByDomNode as Se}from'../../utils/focus-management.js';import{useOpenClosed as Pe,State as Q,OpenClosedProvider as Ee}from'../../internal/open-closed.js';import{useResolveButtonType as he}from'../../hooks/use-resolve-button-type.js';import{useOutsideClick as De}from'../../hooks/use-outside-click.js';import{Hidden as Ie,Features as Ce}from'../../internal/hidden.js';import{objectToFormEntries as Fe}from'../../utils/form.js';import{getOwnerDocument as Me}from'../../utils/owner.js';import{useEvent as f}from'../../hooks/use-event.js';import{useControllable as ke}from'../../hooks/use-controllable.js';import{useLatestValue as we}from'../../hooks/use-latest-value.js';import{useTrackedPointer as _e}from'../../hooks/use-tracked-pointer.js';import{useTextValue as Ue}from'../../hooks/use-text-value.js';var Be=(n=>(n[n.Open=0]="Open",n[n.Closed=1]="Closed",n))(Be||{}),He=(n=>(n[n.Single=0]="Single",n[n.Multi=1]="Multi",n))(He||{}),Ge=(n=>(n[n.Pointer=0]="Pointer",n[n.Other=1]="Other",n))(Ge||{}),Ne=(i=>(i[i.OpenListbox=0]="OpenListbox",i[i.CloseListbox=1]="CloseListbox",i[i.GoToOption=2]="GoToOption",i[i.Search=3]="Search",i[i.ClearSearch=4]="ClearSearch",i[i.RegisterOption=5]="RegisterOption",i[i.UnregisterOption=6]="UnregisterOption",i[i.RegisterLabel=7]="RegisterLabel",i))(Ne||{});function z(e,a=n=>n){let n=e.activeOptionIndex!==null?e.options[e.activeOptionIndex]:null,r=Se(a(e.options.slice()),t=>t.dataRef.current.domRef.current),l=n?r.indexOf(n):null;return l===-1&&(l=null),{options:r,activeOptionIndex:l}}let je={[1](e){return e.dataRef.current.disabled||e.listboxState===1?e:{...e,activeOptionIndex:null,listboxState:1}},[0](e){if(e.dataRef.current.disabled||e.listboxState===0)return e;let a=e.activeOptionIndex,{isSelected:n}=e.dataRef.current,r=e.options.findIndex(l=>n(l.dataRef.current.value));return r!==-1&&(a=r),{...e,listboxState:0,activeOptionIndex:a}},[2](e,a){var l;if(e.dataRef.current.disabled||e.listboxState===1)return e;let n=z(e),r=me(a,{resolveItems:()=>n.options,resolveActiveIndex:()=>n.activeOptionIndex,resolveId:t=>t.id,resolveDisabled:t=>t.dataRef.current.disabled});return{...e,...n,searchQuery:"",activeOptionIndex:r,activationTrigger:(l=a.trigger)!=null?l:1}},[3]:(e,a)=>{if(e.dataRef.current.disabled||e.listboxState===1)return e;let r=e.searchQuery!==""?0:1,l=e.searchQuery+a.value.toLowerCase(),p=(e.activeOptionIndex!==null?e.options.slice(e.activeOptionIndex+r).concat(e.options.slice(0,e.activeOptionIndex+r)):e.options).find(i=>{var b;return!i.dataRef.current.disabled&&((b=i.dataRef.current.textValue)==null?void 0:b.startsWith(l))}),u=p?e.options.indexOf(p):-1;return u===-1||u===e.activeOptionIndex?{...e,searchQuery:l}:{...e,searchQuery:l,activeOptionIndex:u,activationTrigger:1}},[4](e){return e.dataRef.current.disabled||e.listboxState===1||e.searchQuery===""?e:{...e,searchQuery:""}},[5]:(e,a)=>{let n={id:a.id,dataRef:a.dataRef},r=z(e,l=>[...l,n]);return e.activeOptionIndex===null&&e.dataRef.current.isSelected(a.dataRef.current.value)&&(r.activeOptionIndex=r.options.indexOf(n)),{...e,...r}},[6]:(e,a)=>{let n=z(e,r=>{let l=r.findIndex(t=>t.id===a.id);return l!==-1&&r.splice(l,1),r});return{...e,...n,activationTrigger:1}},[7]:(e,a)=>({...e,labelId:a.id})},J=Z(null);J.displayName="ListboxActionsContext";function _(e){let a=ee(J);if(a===null){let n=new Error(`<${e} /> is missing a parent <Listbox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(n,_),n}return a}let q=Z(null);q.displayName="ListboxDataContext";function U(e){let a=ee(q);if(a===null){let n=new Error(`<${e} /> is missing a parent <Listbox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(n,U),n}return a}function Ve(e,a){return I(a.type,je,e,a)}let Ke=xe;function Qe(e,a){let{value:n,defaultValue:r,form:l,name:t,onChange:p,by:u=(s,c)=>s===c,disabled:i=!1,horizontal:b=!1,multiple:R=!1,...m}=e;const P=b?"horizontal":"vertical";let S=M(a),[L=R?[]:void 0,y]=ke(n,p,r),[T,o]=Le(Ve,{dataRef:ye(),listboxState:1,options:[],searchQuery:"",labelId:null,activeOptionIndex:null,activationTrigger:1}),x=D({static:!1,Line truncated
+62
View File
@@ -0,0 +1,62 @@
import React, { ElementType, Ref } from 'react';
import { Props } from '../../types.js';
import { PropsForFeatures, HasDisplayName, RefProp } from '../../utils/render.js';
declare let DEFAULT_MENU_TAG: React.ExoticComponent<{
children?: React.ReactNode;
}>;
interface MenuRenderPropArg {
open: boolean;
close: () => void;
}
export type MenuProps<TTag extends ElementType> = Props<TTag, MenuRenderPropArg, never, {
__demoMode?: boolean;
}>;
declare function MenuFn<TTag extends ElementType = typeof DEFAULT_MENU_TAG>(props: MenuProps<TTag>, ref: Ref<HTMLElement>): JSX.Element;
declare let DEFAULT_BUTTON_TAG: "button";
interface ButtonRenderPropArg {
open: boolean;
}
type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded' | 'aria-haspopup';
export type MenuButtonProps<TTag extends ElementType> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, {
disabled?: boolean;
}>;
declare function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: MenuButtonProps<TTag>, ref: Ref<HTMLButtonElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
declare let DEFAULT_ITEMS_TAG: "div";
interface ItemsRenderPropArg {
open: boolean;
}
type ItemsPropsWeControl = 'aria-activedescendant' | 'aria-labelledby' | 'role' | 'tabIndex';
declare let ItemsRenderFeatures: number;
export type MenuItemsProps<TTag extends ElementType> = Props<TTag, ItemsRenderPropArg, ItemsPropsWeControl> & PropsForFeatures<typeof ItemsRenderFeatures>;
declare function ItemsFn<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(props: MenuItemsProps<TTag>, ref: Ref<HTMLDivElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
declare let DEFAULT_ITEM_TAG: React.ExoticComponent<{
children?: React.ReactNode;
}>;
interface ItemRenderPropArg {
active: boolean;
disabled: boolean;
close: () => void;
}
type ItemPropsWeControl = 'aria-disabled' | 'role' | 'tabIndex';
export type MenuItemProps<TTag extends ElementType> = Props<TTag, ItemRenderPropArg, ItemPropsWeControl> & {
disabled?: boolean;
};
declare function ItemFn<TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(props: MenuItemProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
interface ComponentMenu extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_MENU_TAG>(props: MenuProps<TTag> & RefProp<typeof MenuFn>): JSX.Element;
}
interface ComponentMenuButton extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: MenuButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element;
}
interface ComponentMenuItems extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(props: MenuItemsProps<TTag> & RefProp<typeof ItemsFn>): JSX.Element;
}
interface ComponentMenuItem extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(props: MenuItemProps<TTag> & RefProp<typeof ItemFn>): JSX.Element;
}
export declare let Menu: ComponentMenu & {
Button: ComponentMenuButton;
Items: ComponentMenuItems;
Item: ComponentMenuItem;
};
export {};
+1
View File
@@ -0,0 +1 @@
import G,{Fragment as N,createContext as X,createRef as H,useContext as $,useEffect as q,useMemo as x,useReducer as z,useRef as K}from"react";import{match as j}from'../../utils/match.js';import{forwardRefWithAs as h,render as D,Features as Q}from'../../utils/render.js';import{disposables as _}from'../../utils/disposables.js';import{useDisposables as W}from'../../hooks/use-disposables.js';import{useIsoMorphicEffect as L}from'../../hooks/use-iso-morphic-effect.js';import{useSyncRefs as F}from'../../hooks/use-sync-refs.js';import{useId as k}from'../../hooks/use-id.js';import{Keys as c}from'../keyboard.js';import{Focus as y,calculateActiveIndex as Y}from'../../utils/calculate-active-index.js';import{isDisabledReactIssue7711 as Z}from'../../utils/bugs.js';import{isFocusableElement as ee,FocusableMode as te,sortByDomNode as ne,Focus as V,focusFrom as re,restoreFocusIfNecessary as J}from'../../utils/focus-management.js';import{useOutsideClick as oe}from'../../hooks/use-outside-click.js';import{useTreeWalker as ae}from'../../hooks/use-tree-walker.js';import{useOpenClosed as se,State as C,OpenClosedProvider as ie}from'../../internal/open-closed.js';import{useResolveButtonType as ue}from'../../hooks/use-resolve-button-type.js';import{useOwnerDocument as le}from'../../hooks/use-owner.js';import{useEvent as d}from'../../hooks/use-event.js';import{useTrackedPointer as pe}from'../../hooks/use-tracked-pointer.js';import{useTextValue as ce}from'../../hooks/use-text-value.js';var me=(r=>(r[r.Open=0]="Open",r[r.Closed=1]="Closed",r))(me||{}),de=(r=>(r[r.Pointer=0]="Pointer",r[r.Other=1]="Other",r))(de||{}),fe=(a=>(a[a.OpenMenu=0]="OpenMenu",a[a.CloseMenu=1]="CloseMenu",a[a.GoToItem=2]="GoToItem",a[a.Search=3]="Search",a[a.ClearSearch=4]="ClearSearch",a[a.RegisterItem=5]="RegisterItem",a[a.UnregisterItem=6]="UnregisterItem",a))(fe||{});function w(e,u=r=>r){let r=e.activeItemIndex!==null?e.items[e.activeItemIndex]:null,i=ne(u(e.items.slice()),t=>t.dataRef.current.domRef.current),s=r?i.indexOf(r):null;return s===-1&&(s=null),{items:i,activeItemIndex:s}}let Te={[1](e){return e.menuState===1?e:{...e,activeItemIndex:null,menuState:1}},[0](e){return e.menuState===0?e:{...e,__demoMode:!1,menuState:0}},[2]:(e,u)=>{var s;let r=w(e),i=Y(u,{resolveItems:()=>r.items,resolveActiveIndex:()=>r.activeItemIndex,resolveId:t=>t.id,resolveDisabled:t=>t.dataRef.current.disabled});return{...e,...r,searchQuery:"",activeItemIndex:i,activationTrigger:(s=u.trigger)!=null?s:1}},[3]:(e,u)=>{let i=e.searchQuery!==""?0:1,s=e.searchQuery+u.value.toLowerCase(),o=(e.activeItemIndex!==null?e.items.slice(e.activeItemIndex+i).concat(e.items.slice(0,e.activeItemIndex+i)):e.items).find(l=>{var m;return((m=l.dataRef.current.textValue)==null?void 0:m.startsWith(s))&&!l.dataRef.current.disabled}),a=o?e.items.indexOf(o):-1;return a===-1||a===e.activeItemIndex?{...e,searchQuery:s}:{...e,searchQuery:s,activeItemIndex:a,activationTrigger:1}},[4](e){return e.searchQuery===""?e:{...e,searchQuery:"",searchActiveItemIndex:null}},[5]:(e,u)=>{let r=w(e,i=>[...i,{id:u.id,dataRef:u.dataRef}]);return{...e,...r}},[6]:(e,u)=>{let r=w(e,i=>{let s=i.findIndex(t=>t.id===u.id);return s!==-1&&i.splice(s,1),i});return{...e,...r,activationTrigger:1}}},U=X(null);U.displayName="MenuContext";function O(e){let u=$(U);if(u===null){let r=new Error(`<${e} /> is missing a parent <Menu /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,O),r}return u}function ye(e,u){return j(u.type,Te,e,u)}let Ie=N;function Me(e,u){let{__demoMode:r=!1,...i}=e,s=z(ye,{__demoMode:r,menuState:r?0:1,buttonRef:H(),itemsRef:H(),items:[],searchQuery:"",activeItemIndex:null,activationTrigger:1}),[{menuState:t,itemsRef:o,buttonRef:a},l]=s,m=F(u);oe([a,o],(g,R)=>{var p;l({type:1}),ee(R,te.Loose)||(g.preventDefault(),(p=a.current)==null||p.focus())},t===0);let I=d(()=>{l({type:1})}),A=x(()=>({open:t===0,close:I}),[t,I]),f={ref:m};return G.createElement(U.Provider,{value:s},G.createElement(ie,{value:j(t,{[0]:C.Open,[1]:C.Closed})},D({ourProps:f,theirProps:i,slot:A,defaultTag:Ie,name:"Menu"})))}let ge="button";function Re(e,u){var R;let r=k(),{id:i=`headlessui-menu-button-${r}`,...s}=e,[t,o]=O("Menu.Button"),a=F(t.buttonRef,u),l=W(),m=d(p=>{switch(p.key){case c.Space:case c.Enter:case c.ArrowDown:p.preventDefault(),p.stopPropagation(),o({type:0}),l.nextFrame(()=>o({type:2,focus:y.First}));break;case c.ArrowUp:p.preventDefault(),p.stopPropagation(),o({type:0}),l.nextFrame(()=>o({type:2,focus:y.Last}));break}}),I=d(p=>{switch(p.key){case c.Space:p.preventDefault();break}}),A=d(p=>{if(Z(p.currentTarget))return p.preventDefault();e.disabled||(t.menuState===0?(o({type:1}),l.nextFrame(()=>{var M;return(M=t.buttonRef.current)==null?void 0:M.focus({preventScroll:!0})})):(p.preventDefault(),o({type:0})))}),f=x(()=>({open:t.menuState===0}),[t]),g={ref:a,id:i,type:ue(e,t.buttonRef),"aria-haspopup":"menu","aria-controls":(R=t.itemsRef.current)==null?void 0:R.id,"aria-expanded":t.menuState===0,onKeyDown:m,onKeyUp:I,Line truncated
+68
View File
@@ -0,0 +1,68 @@
import React, { ElementType, MutableRefObject, Ref, MouseEventHandler } from 'react';
import { Props } from '../../types.js';
import { PropsForFeatures, HasDisplayName, RefProp } from '../../utils/render.js';
type MouseEvent<T> = Parameters<MouseEventHandler<T>>[0];
declare let DEFAULT_POPOVER_TAG: "div";
interface PopoverRenderPropArg {
open: boolean;
close(focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null> | MouseEvent<HTMLElement>): void;
}
export type PopoverProps<TTag extends ElementType> = Props<TTag, PopoverRenderPropArg, never, {
__demoMode?: boolean;
}>;
declare function PopoverFn<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(props: PopoverProps<TTag>, ref: Ref<HTMLElement>): JSX.Element;
declare let DEFAULT_BUTTON_TAG: "button";
interface ButtonRenderPropArg {
open: boolean;
}
type ButtonPropsWeControl = 'aria-controls' | 'aria-expanded';
export type PopoverButtonProps<TTag extends ElementType> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, {
disabled?: boolean;
}>;
declare function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: PopoverButtonProps<TTag>, ref: Ref<HTMLButtonElement>): JSX.Element;
declare let DEFAULT_OVERLAY_TAG: "div";
interface OverlayRenderPropArg {
open: boolean;
}
type OverlayPropsWeControl = 'aria-hidden';
declare let OverlayRenderFeatures: number;
export type PopoverOverlayProps<TTag extends ElementType> = Props<TTag, OverlayRenderPropArg, OverlayPropsWeControl> & PropsForFeatures<typeof OverlayRenderFeatures>;
declare function OverlayFn<TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(props: PopoverOverlayProps<TTag>, ref: Ref<HTMLDivElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
declare let DEFAULT_PANEL_TAG: "div";
interface PanelRenderPropArg {
open: boolean;
close: (focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null>) => void;
}
declare let PanelRenderFeatures: number;
type PanelPropsWeControl = 'tabIndex';
export type PopoverPanelProps<TTag extends ElementType> = Props<TTag, PanelRenderPropArg, PanelPropsWeControl, PropsForFeatures<typeof PanelRenderFeatures> & {
focus?: boolean;
}>;
declare function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: PopoverPanelProps<TTag>, ref: Ref<HTMLDivElement>): JSX.Element;
declare let DEFAULT_GROUP_TAG: "div";
interface GroupRenderPropArg {
}
export type PopoverGroupProps<TTag extends ElementType> = Props<TTag, GroupRenderPropArg>;
declare function GroupFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: PopoverGroupProps<TTag>, ref: Ref<HTMLElement>): JSX.Element;
interface ComponentPopover extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(props: PopoverProps<TTag> & RefProp<typeof PopoverFn>): JSX.Element;
}
interface ComponentPopoverButton extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: PopoverButtonProps<TTag> & RefProp<typeof ButtonFn>): JSX.Element;
}
interface ComponentPopoverOverlay extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(props: PopoverOverlayProps<TTag> & RefProp<typeof OverlayFn>): JSX.Element;
}
interface ComponentPopoverPanel extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: PopoverPanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element;
}
interface ComponentPopoverGroup extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: PopoverGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element;
}
export declare let Popover: ComponentPopover & {
Button: ComponentPopoverButton;
Overlay: ComponentPopoverOverlay;
Panel: ComponentPopoverPanel;
Group: ComponentPopoverGroup;
};
export {};
+1
View File
@@ -0,0 +1 @@
import A,{createContext as Q,createRef as de,useContext as Z,useEffect as ee,useMemo as _,useReducer as ge,useRef as J,useState as ce}from"react";import{match as k}from'../../utils/match.js';import{forwardRefWithAs as X,render as Y,Features as te}from'../../utils/render.js';import{optionalRef as Se,useSyncRefs as j}from'../../hooks/use-sync-refs.js';import{useId as V}from'../../hooks/use-id.js';import{Keys as w}from'../keyboard.js';import{isDisabledReactIssue7711 as ve}from'../../utils/bugs.js';import{getFocusableElements as ne,Focus as G,focusIn as U,isFocusableElement as Ae,FocusableMode as Re,FocusResult as le}from'../../utils/focus-management.js';import{OpenClosedProvider as Oe,State as $,useOpenClosed as Te}from'../../internal/open-closed.js';import{useResolveButtonType as Ce}from'../../hooks/use-resolve-button-type.js';import{useOutsideClick as Me}from'../../hooks/use-outside-click.js';import{getOwnerDocument as Fe}from'../../utils/owner.js';import{useOwnerDocument as ae}from'../../hooks/use-owner.js';import{useEventListener as Ie}from'../../hooks/use-event-listener.js';import{Hidden as pe,Features as se}from'../../internal/hidden.js';import{useEvent as g}from'../../hooks/use-event.js';import{useTabDirection as me,Direction as N}from'../../hooks/use-tab-direction.js';import'../../utils/micro-task.js';import{useLatestValue as ye}from'../../hooks/use-latest-value.js';import{useIsoMorphicEffect as xe}from'../../hooks/use-iso-morphic-effect.js';import{useMainTreeNode as Le,useRootContainers as Be}from'../../hooks/use-root-containers.js';import{useNestedPortals as De}from'../../components/portal/portal.js';var he=(u=>(u[u.Open=0]="Open",u[u.Closed=1]="Closed",u))(he||{}),He=(e=>(e[e.TogglePopover=0]="TogglePopover",e[e.ClosePopover=1]="ClosePopover",e[e.SetButton=2]="SetButton",e[e.SetButtonId=3]="SetButtonId",e[e.SetPanel=4]="SetPanel",e[e.SetPanelId=5]="SetPanelId",e))(He||{});let _e={[0]:t=>{let o={...t,popoverState:k(t.popoverState,{[0]:1,[1]:0})};return o.popoverState===0&&(o.__demoMode=!1),o},[1](t){return t.popoverState===1?t:{...t,popoverState:1}},[2](t,o){return t.button===o.button?t:{...t,button:o.button}},[3](t,o){return t.buttonId===o.buttonId?t:{...t,buttonId:o.buttonId}},[4](t,o){return t.panel===o.panel?t:{...t,panel:o.panel}},[5](t,o){return t.panelId===o.panelId?t:{...t,panelId:o.panelId}}},ue=Q(null);ue.displayName="PopoverContext";function oe(t){let o=Z(ue);if(o===null){let u=new Error(`<${t} /> is missing a parent <Popover /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(u,oe),u}return o}let ie=Q(null);ie.displayName="PopoverAPIContext";function fe(t){let o=Z(ie);if(o===null){let u=new Error(`<${t} /> is missing a parent <Popover /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(u,fe),u}return o}let Pe=Q(null);Pe.displayName="PopoverGroupContext";function Ee(){return Z(Pe)}let re=Q(null);re.displayName="PopoverPanelContext";function Ge(){return Z(re)}function Ne(t,o){return k(o.type,_e,t,o)}let ke="div";function we(t,o){var D;let{__demoMode:u=!1,...R}=t,O=J(null),n=j(o,Se(l=>{O.current=l})),e=J([]),v=ge(Ne,{__demoMode:u,popoverState:u?0:1,buttons:e,button:null,buttonId:null,panel:null,panelId:null,beforePanelSentinel:de(),afterPanelSentinel:de()}),[{popoverState:P,button:s,buttonId:I,panel:p,panelId:T,beforePanelSentinel:m,afterPanelSentinel:S},i]=v,a=ae((D=O.current)!=null?D:s),E=_(()=>{if(!s||!p)return!1;for(let K of document.querySelectorAll("body > *"))if(Number(K==null?void 0:K.contains(s))^Number(K==null?void 0:K.contains(p)))return!0;let l=ne(),F=l.indexOf(s),q=(F+l.length-1)%l.length,W=(F+1)%l.length,z=l[q],be=l[W];return!p.contains(z)&&!p.contains(be)},[s,p]),C=ye(I),H=ye(T),x=_(()=>({buttonId:C,panelId:H,close:()=>i({type:1})}),[C,H,i]),M=Ee(),h=M==null?void 0:M.registerPopover,f=g(()=>{var l;return(l=M==null?void 0:M.isFocusWithinPopoverGroup())!=null?l:(a==null?void 0:a.activeElement)&&((s==null?void 0:s.contains(a.activeElement))||(p==null?void 0:p.contains(a.activeElement)))});ee(()=>h==null?void 0:h(x),[h,x]);let[y,b]=De(),d=Be({mainTreeNodeRef:M==null?void 0:M.mainTreeNodeRef,portals:y,defaultContainers:[s,p]});Ie(a==null?void 0:a.defaultView,"focus",l=>{var F,q,W,z;l.target!==window&&l.target instanceof HTMLElement&&P===0&&(f()||s&&p&&(d.contains(l.target)||(q=(F=m.current)==null?void 0:F.contains)!=null&&q.call(F,l.target)||(z=(W=S.current)==null?void 0:W.contains)!=null&&z.call(W,l.target)||i({type:1})))},!0),Me(d.resolveContainers,(l,F)=>{i({type:1}),Ae(F,Re.Loose)||(l.preventDefault(),s==null||s.focus())},P===0);let L=g(l=>{i({type:1});let F=(()=>l?l instanceof HTMLElement?l:"current"in l&&l.current instanceof HTMLElement?l.current:s:s)();F==null||F.focus()}),r=_(()=>({close:L,isPortalled:E}),[L,E]),c=_(()=>({open:P===0,close:L}),[P,L]),B={ref:n};return A.createElement(re.Provider,{value:null},A.createElement(ue.Provider,{value:v},A.createElement(ie.Provider,{value:r},A.createElement(Oe,{value:k(P,{[0]:$.Open,[1]:$.Closed}Line truncated
+32
View File
@@ -0,0 +1,32 @@
import React, { ElementType, MutableRefObject, Ref } from 'react';
import { Props } from '../../types.js';
import { RefProp, HasDisplayName } from '../../utils/render.js';
declare let DEFAULT_PORTAL_TAG: React.ExoticComponent<{
children?: React.ReactNode;
}>;
interface PortalRenderPropArg {
}
export type PortalProps<TTag extends ElementType> = Props<TTag, PortalRenderPropArg>;
declare function PortalFn<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG>(props: PortalProps<TTag>, ref: Ref<HTMLElement>): React.ReactPortal | null;
declare let DEFAULT_GROUP_TAG: React.ExoticComponent<{
children?: React.ReactNode;
}>;
interface GroupRenderPropArg {
}
export type PortalGroupProps<TTag extends ElementType> = Props<TTag, GroupRenderPropArg> & {
target: MutableRefObject<HTMLElement | null>;
};
declare function GroupFn<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: PortalGroupProps<TTag>, ref: Ref<HTMLElement>): JSX.Element;
export declare function useNestedPortals(): readonly [React.MutableRefObject<HTMLElement[]>, ({ children }: {
children: React.ReactNode;
}) => JSX.Element];
interface ComponentPortal extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG>(props: PortalProps<TTag> & RefProp<typeof PortalFn>): JSX.Element;
}
interface ComponentPortalGroup extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: PortalGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element;
}
export declare let Portal: ComponentPortal & {
Group: ComponentPortalGroup;
};
export {};
+1
View File
@@ -0,0 +1 @@
import T,{Fragment as P,createContext as m,useContext as s,useEffect as d,useRef as g,useState as R,useMemo as E}from"react";import{createPortal as H}from"react-dom";import{forwardRefWithAs as c,render as y}from'../../utils/render.js';import{useIsoMorphicEffect as x}from'../../hooks/use-iso-morphic-effect.js';import{usePortalRoot as b}from'../../internal/portal-force-root.js';import{useServerHandoffComplete as h}from'../../hooks/use-server-handoff-complete.js';import{optionalRef as O,useSyncRefs as L}from'../../hooks/use-sync-refs.js';import{useOnUnmount as _}from'../../hooks/use-on-unmount.js';import{useOwnerDocument as A}from'../../hooks/use-owner.js';import{env as G}from'../../utils/env.js';import{useEvent as M}from'../../hooks/use-event.js';function F(p){let l=b(),n=s(v),e=A(p),[a,o]=R(()=>{if(!l&&n!==null||G.isServer)return null;let t=e==null?void 0:e.getElementById("headlessui-portal-root");if(t)return t;if(e===null)return null;let r=e.createElement("div");return r.setAttribute("id","headlessui-portal-root"),e.body.appendChild(r)});return d(()=>{a!==null&&(e!=null&&e.body.contains(a)||e==null||e.body.appendChild(a))},[a,e]),d(()=>{l||n!==null&&o(n.current)},[n,o,l]),a}let U=P;function N(p,l){let n=p,e=g(null),a=L(O(u=>{e.current=u}),l),o=A(e),t=F(e),[r]=R(()=>{var u;return G.isServer?null:(u=o==null?void 0:o.createElement("div"))!=null?u:null}),i=s(f),C=h();return x(()=>{!t||!r||t.contains(r)||(r.setAttribute("data-headlessui-portal",""),t.appendChild(r))},[t,r]),x(()=>{if(r&&i)return i.register(r)},[i,r]),_(()=>{var u;!t||!r||(r instanceof Node&&t.contains(r)&&t.removeChild(r),t.childNodes.length<=0&&((u=t.parentElement)==null||u.removeChild(t)))}),C?!t||!r?null:H(y({ourProps:{ref:a},theirProps:n,defaultTag:U,name:"Portal"}),r):null}let S=P,v=m(null);function j(p,l){let{target:n,...e}=p,o={ref:L(l)};return T.createElement(v.Provider,{value:n},y({ourProps:o,theirProps:e,defaultTag:S,name:"Popover.Group"}))}let f=m(null);function ae(){let p=s(f),l=g([]),n=M(o=>(l.current.push(o),p&&p.register(o),()=>e(o))),e=M(o=>{let t=l.current.indexOf(o);t!==-1&&l.current.splice(t,1),p&&p.unregister(o)}),a=E(()=>({register:n,unregister:e,portals:l}),[n,e,l]);return[l,E(()=>function({children:t}){return T.createElement(f.Provider,{value:a},t)},[a])]}let D=c(N),I=c(j),pe=Object.assign(D,{Group:I});export{pe as Portal,ae as useNestedPortals};
@@ -0,0 +1,49 @@
import { ElementType, Ref } from 'react';
import { Props } from '../../types.js';
import { RefProp, HasDisplayName } from '../../utils/render.js';
import { ComponentLabel } from '../../components/label/label.js';
import { ComponentDescription } from '../../components/description/description.js';
declare let DEFAULT_RADIO_GROUP_TAG: "div";
interface RadioGroupRenderPropArg<TType> {
value: TType;
}
type RadioGroupPropsWeControl = 'role' | 'aria-labelledby' | 'aria-describedby';
export type RadioGroupProps<TTag extends ElementType, TType> = Props<TTag, RadioGroupRenderPropArg<TType>, RadioGroupPropsWeControl, {
value?: TType;
defaultValue?: TType;
onChange?(value: TType): void;
by?: (keyof TType & string) | ((a: TType, z: TType) => boolean);
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>): JSX.Element;
declare let DEFAULT_OPTION_TAG: "div";
interface OptionRenderPropArg {
checked: boolean;
active: boolean;
disabled: boolean;
}
type OptionPropsWeControl = 'aria-checked' | 'aria-describedby' | 'aria-lablledby' | 'role' | 'tabIndex';
export type RadioOptionProps<TTag extends ElementType, TType> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, {
value: TType;
disabled?: boolean;
}>;
declare function OptionFn<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = Parameters<typeof RadioGroupRoot>[0]['value']>(props: RadioOptionProps<TTag, TType>, ref: Ref<HTMLElement>): JSX.Element;
interface ComponentRadioGroup extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG, TType = string>(props: RadioGroupProps<TTag, TType> & RefProp<typeof RadioGroupFn>): JSX.Element;
}
interface ComponentRadioOption extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string>(props: RadioOptionProps<TTag, TType> & RefProp<typeof OptionFn>): JSX.Element;
}
interface ComponentRadioLabel extends ComponentLabel {
}
interface ComponentRadioDescription extends ComponentDescription {
}
declare let RadioGroupRoot: ComponentRadioGroup;
export declare let RadioGroup: ComponentRadioGroup & {
Option: ComponentRadioOption;
Label: ComponentRadioLabel;
Description: ComponentRadioDescription;
};
export {};
@@ -0,0 +1 @@
import O,{createContext as J,useContext as V,useMemo as A,useReducer as se,useRef as j,useEffect as ue}from"react";import{forwardRefWithAs as X,render as q,compact as de}from'../../utils/render.js';import{useId as Q}from'../../hooks/use-id.js';import{match as ce}from'../../utils/match.js';import{useIsoMorphicEffect as fe}from'../../hooks/use-iso-morphic-effect.js';import{Keys as D}from'../../components/keyboard.js';import{focusIn as Y,Focus as I,FocusResult as Z,sortByDomNode as Te}from'../../utils/focus-management.js';import{useFlags as me}from'../../hooks/use-flags.js';import{Label as ye,useLabels as z}from'../../components/label/label.js';import{Description as Re,useDescriptions as ee}from'../../components/description/description.js';import{useTreeWalker as be}from'../../hooks/use-tree-walker.js';import{useSyncRefs as te}from'../../hooks/use-sync-refs.js';import{Hidden as ge,Features as Oe}from'../../internal/hidden.js';import{attemptSubmit as Ee,objectToFormEntries as ve}from'../../utils/form.js';import{getOwnerDocument as Pe}from'../../utils/owner.js';import{useEvent as E}from'../../hooks/use-event.js';import{useControllable as Ae}from'../../hooks/use-controllable.js';import{isDisabledReactIssue7711 as re}from'../../utils/bugs.js';import{useLatestValue as De}from'../../hooks/use-latest-value.js';import{useDisposables as Ge}from'../../hooks/use-disposables.js';var Ce=(t=>(t[t.RegisterOption=0]="RegisterOption",t[t.UnregisterOption=1]="UnregisterOption",t))(Ce||{});let ke={[0](r,o){let t=[...r.options,{id:o.id,element:o.element,propsRef:o.propsRef}];return{...r,options:Te(t,p=>p.element.current)}},[1](r,o){let t=r.options.slice(),p=r.options.findIndex(T=>T.id===o.id);return p===-1?r:(t.splice(p,1),{...r,options:t})}},B=J(null);B.displayName="RadioGroupDataContext";function oe(r){let o=V(B);if(o===null){let t=new Error(`<${r} /> is missing a parent <RadioGroup /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(t,oe),t}return o}let $=J(null);$.displayName="RadioGroupActionsContext";function ne(r){let o=V($);if(o===null){let t=new Error(`<${r} /> is missing a parent <RadioGroup /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(t,ne),t}return o}function Le(r,o){return ce(o.type,ke,r,o)}let he="div";function Fe(r,o){let t=Q(),{id:p=`headlessui-radiogroup-${t}`,value:T,defaultValue:v,form:S,name:m,onChange:M,by:G=(e,i)=>e===i,disabled:C=!1,...H}=r,y=E(typeof G=="string"?(e,i)=>{let n=G;return(e==null?void 0:e[n])===(i==null?void 0:i[n])}:G),[P,h]=se(Le,{options:[]}),a=P.options,[N,R]=z(),[k,U]=ee(),L=j(null),W=te(L,o),[l,s]=Ae(T,M,v),b=A(()=>a.find(e=>!e.propsRef.current.disabled),[a]),F=A(()=>a.some(e=>y(e.propsRef.current.value,l)),[a,l]),d=E(e=>{var n;if(C||y(e,l))return!1;let i=(n=a.find(f=>y(f.propsRef.current.value,e)))==null?void 0:n.propsRef.current;return i!=null&&i.disabled?!1:(s==null||s(e),!0)});be({container:L.current,accept(e){return e.getAttribute("role")==="radio"?NodeFilter.FILTER_REJECT:e.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(e){e.setAttribute("role","none")}});let x=E(e=>{let i=L.current;if(!i)return;let n=Pe(i),f=a.filter(u=>u.propsRef.current.disabled===!1).map(u=>u.element.current);switch(e.key){case D.Enter:Ee(e.currentTarget);break;case D.ArrowLeft:case D.ArrowUp:if(e.preventDefault(),e.stopPropagation(),Y(f,I.Previous|I.WrapAround)===Z.Success){let g=a.find(K=>K.element.current===(n==null?void 0:n.activeElement));g&&d(g.propsRef.current.value)}break;case D.ArrowRight:case D.ArrowDown:if(e.preventDefault(),e.stopPropagation(),Y(f,I.Next|I.WrapAround)===Z.Success){let g=a.find(K=>K.element.current===(n==null?void 0:n.activeElement));g&&d(g.propsRef.current.value)}break;case D.Space:{e.preventDefault(),e.stopPropagation();let u=a.find(g=>g.element.current===(n==null?void 0:n.activeElement));u&&d(u.propsRef.current.value)}break}}),c=E(e=>(h({type:0,...e}),()=>h({type:1,id:e.id}))),_=A(()=>({value:l,firstOption:b,containsCheckedOption:F,disabled:C,compare:y,...P}),[l,b,F,C,y,P]),ie=A(()=>({registerOption:c,change:d}),[c,d]),ae={ref:W,id:p,role:"radiogroup","aria-labelledby":N,"aria-describedby":k,onKeyDown:x},pe=A(()=>({value:l}),[l]),w=j(null),le=Ge();return ue(()=>{w.current&&v!==void 0&&le.addEventListener(w.current,"reset",()=>{d(v)})},[w,d]),O.createElement(U,{name:"RadioGroup.Description"},O.createElement(R,{name:"RadioGroup.Label"},O.createElement($.Provider,{value:ie},O.createElement(B.Provider,{value:_},m!=null&&l!=null&&ve({[m]:l}).map(([e,i],n)=>O.createElement(ge,{features:Oe.Hidden,ref:n===0?f=>{var u;w.current=(u=f==null?void 0:f.closest("form"))!=null?u:null}:void 0,...de({key:e,as:"input",type:"radio",checked:i!=null,hidden:!0,readOnly:!0,form:S,name:e,value:i})})),q({ourProps:ae,theirProps:H,slot:pe,defaultTag:he,name:"RadioGroup"})))))}var xe=(t=>(t[t.Empty=1]="Empty",t[t.Active=2]="Active",t))(xe||{});let _e="div";function we(r,o){var x;let t=Q(),{id:p=`headlessui-radiogroup-option-${t}`,value:Line truncated
+40
View File
@@ -0,0 +1,40 @@
import React, { ElementType, Ref } from 'react';
import { Props } from '../../types.js';
import { HasDisplayName, RefProp } from '../../utils/render.js';
import { ComponentLabel } from '../label/label.js';
import { ComponentDescription } from '../description/description.js';
declare let DEFAULT_GROUP_TAG: React.ExoticComponent<{
children?: React.ReactNode;
}>;
export type SwitchGroupProps<TTag extends ElementType> = Props<TTag>;
declare function GroupFn<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: SwitchGroupProps<TTag>): JSX.Element;
declare let DEFAULT_SWITCH_TAG: "button";
interface SwitchRenderPropArg {
checked: boolean;
}
type SwitchPropsWeControl = 'aria-checked' | 'aria-describedby' | 'aria-labelledby' | 'role' | 'tabIndex';
export type SwitchProps<TTag extends ElementType> = Props<TTag, SwitchRenderPropArg, SwitchPropsWeControl, {
checked?: boolean;
defaultChecked?: boolean;
onChange?(checked: boolean): void;
name?: string;
value?: string;
form?: string;
}>;
declare function SwitchFn<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(props: SwitchProps<TTag>, ref: Ref<HTMLButtonElement>): JSX.Element;
interface ComponentSwitch extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(props: SwitchProps<TTag> & RefProp<typeof SwitchFn>): JSX.Element;
}
interface ComponentSwitchGroup extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: SwitchGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element;
}
interface ComponentSwitchLabel extends ComponentLabel {
}
interface ComponentSwitchDescription extends ComponentDescription {
}
export declare let Switch: ComponentSwitch & {
Group: ComponentSwitchGroup;
Label: ComponentSwitchLabel;
Description: ComponentSwitchDescription;
};
export {};
+1
View File
@@ -0,0 +1 @@
import i,{Fragment as x,createContext as A,useContext as H,useMemo as E,useRef as F,useState as M,useEffect as _}from"react";import{forwardRefWithAs as U,render as P,compact as K}from'../../utils/render.js';import{useId as B}from'../../hooks/use-id.js';import{Keys as g}from'../keyboard.js';import{isDisabledReactIssue7711 as I}from'../../utils/bugs.js';import{Label as O,useLabels as W}from'../label/label.js';import{Description as N,useDescriptions as J}from'../description/description.js';import{useResolveButtonType as X}from'../../hooks/use-resolve-button-type.js';import{useSyncRefs as j}from'../../hooks/use-sync-refs.js';import{Hidden as $,Features as q}from'../../internal/hidden.js';import{attemptSubmit as z}from'../../utils/form.js';import{useEvent as m}from'../../hooks/use-event.js';import{useControllable as Q}from'../../hooks/use-controllable.js';import{useDisposables as V}from'../../hooks/use-disposables.js';let y=A(null);y.displayName="GroupContext";let Y=x;function Z(s){var d;let[n,p]=M(null),[c,f]=W(),[r,h]=J(),l=E(()=>({switch:n,setSwitch:p,labelledby:c,describedby:r}),[n,p,c,r]),T={},b=s;return i.createElement(h,{name:"Switch.Description"},i.createElement(f,{name:"Switch.Label",props:{htmlFor:(d=l.switch)==null?void 0:d.id,onClick(t){n&&(t.currentTarget.tagName==="LABEL"&&t.preventDefault(),n.click(),n.focus({preventScroll:!0}))}}},i.createElement(y.Provider,{value:l},P({ourProps:T,theirProps:b,defaultTag:Y,name:"Switch.Group"}))))}let ee="button";function te(s,n){let p=B(),{id:c=`headlessui-switch-${p}`,checked:f,defaultChecked:r=!1,onChange:h,name:l,value:T,form:b,...d}=s,t=H(y),u=F(null),D=j(u,n,t===null?null:t.setSwitch),[o,a]=Q(f,h,r),S=m(()=>a==null?void 0:a(!o)),C=m(e=>{if(I(e.currentTarget))return e.preventDefault();e.preventDefault(),S()}),L=m(e=>{e.key===g.Space?(e.preventDefault(),S()):e.key===g.Enter&&z(e.currentTarget)}),v=m(e=>e.preventDefault()),G=E(()=>({checked:o}),[o]),R={id:c,ref:D,role:"switch",type:X(s,u),tabIndex:0,"aria-checked":o,"aria-labelledby":t==null?void 0:t.labelledby,"aria-describedby":t==null?void 0:t.describedby,onClick:C,onKeyUp:L,onKeyPress:v},k=V();return _(()=>{var w;let e=(w=u.current)==null?void 0:w.closest("form");e&&r!==void 0&&k.addEventListener(e,"reset",()=>{a(r)})},[u,a]),i.createElement(i.Fragment,null,l!=null&&o&&i.createElement($,{features:q.Hidden,...K({as:"input",type:"checkbox",hidden:!0,readOnly:!0,form:b,checked:o,name:l,value:T})}),P({ourProps:R,theirProps:d,slot:G,defaultTag:ee,name:"Switch"}))}let ne=U(te),re=Z,Ge=Object.assign(ne,{Group:re,Label:O,Description:N});export{Ge as Switch};
+70
View File
@@ -0,0 +1,70 @@
import React, { ElementType, Ref } from 'react';
import { Props } from '../../types.js';
import { PropsForFeatures, RefProp, HasDisplayName } from '../../utils/render.js';
declare let DEFAULT_TABS_TAG: React.ExoticComponent<{
children?: React.ReactNode;
}>;
interface TabsRenderPropArg {
selectedIndex: number;
}
export type TabGroupProps<TTag extends ElementType> = Props<TTag, TabsRenderPropArg, never, {
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>): JSX.Element;
declare let DEFAULT_LIST_TAG: "div";
interface ListRenderPropArg {
selectedIndex: number;
}
type ListPropsWeControl = 'aria-orientation' | 'role';
export type TabListProps<TTag extends ElementType> = Props<TTag, ListRenderPropArg, ListPropsWeControl, {}>;
declare function ListFn<TTag extends ElementType = typeof DEFAULT_LIST_TAG>(props: TabListProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
declare let DEFAULT_TAB_TAG: "button";
interface TabRenderPropArg {
selected: boolean;
}
type TabPropsWeControl = 'aria-controls' | 'aria-selected' | 'role' | 'tabIndex';
export type TabProps<TTag extends ElementType> = Props<TTag, TabRenderPropArg, TabPropsWeControl> & {};
declare function TabFn<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(props: TabProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
declare let DEFAULT_PANELS_TAG: "div";
interface PanelsRenderPropArg {
selectedIndex: number;
}
export type TabPanelsProps<TTag extends ElementType> = Props<TTag, PanelsRenderPropArg>;
declare function PanelsFn<TTag extends ElementType = typeof DEFAULT_PANELS_TAG>(props: TabPanelsProps<TTag>, ref: Ref<HTMLElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
declare let DEFAULT_PANEL_TAG: "div";
interface PanelRenderPropArg {
selected: boolean;
}
type PanelPropsWeControl = 'role' | 'aria-labelledby';
declare let PanelRenderFeatures: number;
export type TabPanelProps<TTag extends ElementType> = Props<TTag, PanelRenderPropArg, PanelPropsWeControl, PropsForFeatures<typeof PanelRenderFeatures> & {
id?: string;
tabIndex?: number;
}>;
declare function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: TabPanelProps<TTag>, ref: Ref<HTMLElement>): JSX.Element | null;
interface ComponentTab extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(props: TabProps<TTag> & RefProp<typeof TabFn>): JSX.Element;
}
interface ComponentTabGroup extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_TABS_TAG>(props: TabGroupProps<TTag> & RefProp<typeof GroupFn>): JSX.Element;
}
interface ComponentTabList extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_LIST_TAG>(props: TabListProps<TTag> & RefProp<typeof ListFn>): JSX.Element;
}
interface ComponentTabPanels extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_PANELS_TAG>(props: TabPanelsProps<TTag> & RefProp<typeof PanelsFn>): JSX.Element;
}
interface ComponentTabPanel extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(props: TabPanelProps<TTag> & RefProp<typeof PanelFn>): JSX.Element;
}
export declare let Tab: ComponentTab & {
Group: ComponentTabGroup;
List: ComponentTabList;
Panels: ComponentTabPanels;
Panel: ComponentTabPanel;
};
export {};
+1
View File
@@ -0,0 +1 @@
import _,{Fragment as ne,createContext as V,useContext as Q,useMemo as F,useReducer as re,useRef as K}from"react";import{render as w,Features as Y,forwardRefWithAs as v}from'../../utils/render.js';import{useId as Z}from'../../hooks/use-id.js';import{match as G}from'../../utils/match.js';import{Keys as P}from'../../components/keyboard.js';import{focusIn as h,Focus as x,sortByDomNode as H,FocusResult as k}from'../../utils/focus-management.js';import{useIsoMorphicEffect as O}from'../../hooks/use-iso-morphic-effect.js';import{useSyncRefs as U}from'../../hooks/use-sync-refs.js';import{useResolveButtonType as ae}from'../../hooks/use-resolve-button-type.js';import{useLatestValue as J}from'../../hooks/use-latest-value.js';import{FocusSentinel as le}from'../../internal/focus-sentinel.js';import{useEvent as S}from'../../hooks/use-event.js';import{microTask as oe}from'../../utils/micro-task.js';import{Hidden as se}from'../../internal/hidden.js';import{getOwnerDocument as ie}from'../../utils/owner.js';import{StableCollection as pe,useStableCollectionIndex as ee}from'../../utils/stable-collection.js';var ue=(t=>(t[t.Forwards=0]="Forwards",t[t.Backwards=1]="Backwards",t))(ue||{}),Te=(o=>(o[o.Less=-1]="Less",o[o.Equal=0]="Equal",o[o.Greater=1]="Greater",o))(Te||{}),de=(r=>(r[r.SetSelectedIndex=0]="SetSelectedIndex",r[r.RegisterTab=1]="RegisterTab",r[r.UnregisterTab=2]="UnregisterTab",r[r.RegisterPanel=3]="RegisterPanel",r[r.UnregisterPanel=4]="UnregisterPanel",r))(de||{});let ce={[0](e,n){var u;let t=H(e.tabs,T=>T.current),o=H(e.panels,T=>T.current),s=t.filter(T=>{var l;return!((l=T.current)!=null&&l.hasAttribute("disabled"))}),r={...e,tabs:t,panels:o};if(n.index<0||n.index>t.length-1){let T=G(Math.sign(n.index-e.selectedIndex),{[-1]:()=>1,[0]:()=>G(Math.sign(n.index),{[-1]:()=>0,[0]:()=>0,[1]:()=>1}),[1]:()=>0});if(s.length===0)return r;let l=G(T,{[0]:()=>t.indexOf(s[0]),[1]:()=>t.indexOf(s[s.length-1])});return{...r,selectedIndex:l===-1?e.selectedIndex:l}}let i=t.slice(0,n.index),b=[...t.slice(n.index),...i].find(T=>s.includes(T));if(!b)return r;let c=(u=t.indexOf(b))!=null?u:e.selectedIndex;return c===-1&&(c=e.selectedIndex),{...r,selectedIndex:c}},[1](e,n){var r;if(e.tabs.includes(n.tab))return e;let t=e.tabs[e.selectedIndex],o=H([...e.tabs,n.tab],i=>i.current),s=(r=o.indexOf(t))!=null?r:e.selectedIndex;return s===-1&&(s=e.selectedIndex),{...e,tabs:o,selectedIndex:s}},[2](e,n){return{...e,tabs:e.tabs.filter(t=>t!==n.tab)}},[3](e,n){return e.panels.includes(n.panel)?e:{...e,panels:H([...e.panels,n.panel],t=>t.current)}},[4](e,n){return{...e,panels:e.panels.filter(t=>t!==n.panel)}}},X=V(null);X.displayName="TabsDataContext";function M(e){let n=Q(X);if(n===null){let t=new Error(`<${e} /> is missing a parent <Tab.Group /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(t,M),t}return n}let $=V(null);$.displayName="TabsActionsContext";function q(e){let n=Q($);if(n===null){let t=new Error(`<${e} /> is missing a parent <Tab.Group /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(t,q),t}return n}function fe(e,n){return G(n.type,ce,e,n)}let be=ne;function me(e,n){let{defaultIndex:t=0,vertical:o=!1,manual:s=!1,onChange:r,selectedIndex:i=null,...R}=e;const b=o?"vertical":"horizontal",c=s?"manual":"auto";let u=i!==null,T=U(n),[l,d]=re(fe,{selectedIndex:i!=null?i:t,tabs:[],panels:[]}),g=F(()=>({selectedIndex:l.selectedIndex}),[l.selectedIndex]),m=J(r||(()=>{})),y=J(l.tabs),E=F(()=>({orientation:b,activation:c,...l}),[b,c,l]),I=S(p=>(d({type:1,tab:p}),()=>d({type:2,tab:p}))),A=S(p=>(d({type:3,panel:p}),()=>d({type:4,panel:p}))),L=S(p=>{C.current!==p&&m.current(p),u||d({type:0,index:p})}),C=J(u?e.selectedIndex:l.selectedIndex),N=F(()=>({registerTab:I,registerPanel:A,change:L}),[]);O(()=>{d({type:0,index:i!=null?i:t})},[i]),O(()=>{if(C.current===void 0||l.tabs.length<=0)return;let p=H(l.tabs,a=>a.current);p.some((a,f)=>l.tabs[f]!==a)&&L(p.indexOf(l.tabs[C.current]))});let B={ref:T};return _.createElement(pe,null,_.createElement($.Provider,{value:N},_.createElement(X.Provider,{value:E},E.tabs.length<=0&&_.createElement(le,{onFocus:()=>{var p,D;for(let a of y.current)if(((p=a.current)==null?void 0:p.tabIndex)===0)return(D=a.current)==null||D.focus(),!0;return!1}}),w({ourProps:B,theirProps:R,slot:g,defaultTag:be,name:"Tabs"}))))}let Pe="div";function xe(e,n){let{orientation:t,selectedIndex:o}=M("Tab.List"),s=U(n);return w({ourProps:{ref:s,role:"tablist","aria-orientation":t},theirProps:e,slot:{selectedIndex:o},defaultTag:Pe,name:"Tabs.List"})}let ge="button";function ye(e,n){var p,D;let t=Z(),{id:o=`headlessui-tabs-tab-${t}`,...s}=e,{orientation:r,activation:i,selectedIndex:R,tabs:b,panels:c}=M("Tab"),u=q("Tab"),T=M("Tab"),l=K(null),d=U(l,n);O(()=>u.registerTab(l),[u,l]);let g=ee("tabs"),m=b.indexOf(l);m===-1&&(m=g);let y=m===R,E=S(a=>{var j;let f=a();if(f===k.Success&&i==="auto"){let W=(j=ie(l))==null?void 0:j.activeElement,z=T.tabs.findIndex(te=>te.current===W);z!==-1&&u.change(z)}return f}),I=Line truncated
@@ -0,0 +1,41 @@
import { ElementType, MutableRefObject, Ref } from 'react';
import { Props, ReactTag } from '../../types.js';
import { Features, HasDisplayName, PropsForFeatures, RefProp } from '../../utils/render.js';
export interface TransitionClasses {
enter?: string;
enterFrom?: string;
enterTo?: string;
entered?: string;
leave?: string;
leaveFrom?: string;
leaveTo?: string;
}
export interface TransitionEvents {
beforeEnter?: () => void;
afterEnter?: () => void;
beforeLeave?: () => void;
afterLeave?: () => void;
}
export type TransitionChildProps<TTag extends ReactTag> = Props<TTag, TransitionChildRenderPropArg, never, PropsForFeatures<typeof TransitionChildRenderFeatures> & TransitionClasses & TransitionEvents & {
appear?: boolean;
}>;
declare let DEFAULT_TRANSITION_CHILD_TAG: "div";
type TransitionChildRenderPropArg = MutableRefObject<HTMLDivElement>;
declare let TransitionChildRenderFeatures: Features;
declare function TransitionChildFn<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionChildProps<TTag>, ref: Ref<HTMLElement>): JSX.Element;
export type TransitionRootProps<TTag extends ElementType> = TransitionChildProps<TTag> & {
show?: boolean;
appear?: boolean;
};
declare function TransitionRootFn<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionRootProps<TTag>, ref: Ref<HTMLElement>): JSX.Element;
interface ComponentTransitionRoot extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionRootProps<TTag> & RefProp<typeof TransitionRootFn>): JSX.Element;
}
interface ComponentTransitionChild extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionChildProps<TTag> & RefProp<typeof TransitionChildFn>): JSX.Element;
}
export declare let Transition: ComponentTransitionRoot & {
Child: ComponentTransitionChild;
Root: ComponentTransitionRoot;
};
export {};
@@ -0,0 +1 @@
import m,{Fragment as Y,createContext as Z,useContext as B,useEffect as F,useMemo as $,useRef as C,useState as J}from"react";import{Features as ce,forwardRefWithAs as X,render as ee,RenderStrategy as N}from'../../utils/render.js';import{OpenClosedProvider as pe,State as E,useOpenClosed as te}from'../../internal/open-closed.js';import{match as L}from'../../utils/match.js';import{useIsMounted as he}from'../../hooks/use-is-mounted.js';import{useIsoMorphicEffect as ve}from'../../hooks/use-iso-morphic-effect.js';import{useLatestValue as I}from'../../hooks/use-latest-value.js';import{useServerHandoffComplete as ne}from'../../hooks/use-server-handoff-complete.js';import{useSyncRefs as re}from'../../hooks/use-sync-refs.js';import{useTransition as ge}from'../../hooks/use-transition.js';import{useEvent as b}from'../../hooks/use-event.js';import{useDisposables as Ce}from'../../hooks/use-disposables.js';import{classNames as ie}from'../../utils/class-names.js';import{useFlags as Ee}from'../../hooks/use-flags.js';function S(t=""){return t.split(" ").filter(n=>n.trim().length>1)}let _=Z(null);_.displayName="TransitionContext";var be=(r=>(r.Visible="visible",r.Hidden="hidden",r))(be||{});function Se(){let t=B(_);if(t===null)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");return t}function Ne(){let t=B(M);if(t===null)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");return t}let M=Z(null);M.displayName="NestingContext";function U(t){return"children"in t?U(t.children):t.current.filter(({el:n})=>n.current!==null).filter(({state:n})=>n==="visible").length>0}function oe(t,n){let r=I(t),s=C([]),y=he(),D=Ce(),c=b((i,e=N.Hidden)=>{let a=s.current.findIndex(({el:o})=>o===i);a!==-1&&(L(e,{[N.Unmount](){s.current.splice(a,1)},[N.Hidden](){s.current[a].state="hidden"}}),D.microTask(()=>{var o;!U(s)&&y.current&&((o=r.current)==null||o.call(r))}))}),x=b(i=>{let e=s.current.find(({el:a})=>a===i);return e?e.state!=="visible"&&(e.state="visible"):s.current.push({el:i,state:"visible"}),()=>c(i,N.Unmount)}),p=C([]),h=C(Promise.resolve()),u=C({enter:[],leave:[],idle:[]}),v=b((i,e,a)=>{p.current.splice(0),n&&(n.chains.current[e]=n.chains.current[e].filter(([o])=>o!==i)),n==null||n.chains.current[e].push([i,new Promise(o=>{p.current.push(o)})]),n==null||n.chains.current[e].push([i,new Promise(o=>{Promise.all(u.current[e].map(([f,P])=>P)).then(()=>o())})]),e==="enter"?h.current=h.current.then(()=>n==null?void 0:n.wait.current).then(()=>a(e)):a(e)}),d=b((i,e,a)=>{Promise.all(u.current[e].splice(0).map(([o,f])=>f)).then(()=>{var o;(o=p.current.shift())==null||o()}).then(()=>a(e))});return $(()=>({children:s,register:x,unregister:c,onStart:v,onStop:d,wait:h,chains:u}),[x,c,s,v,d,u,h])}function xe(){}let Pe=["beforeEnter","afterEnter","beforeLeave","afterLeave"];function se(t){var r;let n={};for(let s of Pe)n[s]=(r=t[s])!=null?r:xe;return n}function Re(t){let n=C(se(t));return F(()=>{n.current=se(t)},[t]),n}let ye="div",ae=ce.RenderStrategy;function De(t,n){var K,Q;let{beforeEnter:r,afterEnter:s,beforeLeave:y,afterLeave:D,enter:c,enterFrom:x,enterTo:p,entered:h,leave:u,leaveFrom:v,leaveTo:d,...i}=t,e=C(null),a=re(e,n),o=(K=i.unmount)==null||K?N.Unmount:N.Hidden,{show:f,appear:P,initial:T}=Se(),[l,j]=J(f?"visible":"hidden"),q=Ne(),{register:O,unregister:V}=q;F(()=>O(e),[O,e]),F(()=>{if(o===N.Hidden&&e.current){if(f&&l!=="visible"){j("visible");return}return L(l,{["hidden"]:()=>V(e),["visible"]:()=>O(e)})}},[l,e,O,V,f,o]);let k=I({base:S(i.className),enter:S(c),enterFrom:S(x),enterTo:S(p),entered:S(h),leave:S(u),leaveFrom:S(v),leaveTo:S(d)}),w=Re({beforeEnter:r,afterEnter:s,beforeLeave:y,afterLeave:D}),G=ne();F(()=>{if(G&&l==="visible"&&e.current===null)throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")},[e,l,G]);let ue=T&&!P,z=P&&f&&T,Te=(()=>!G||ue?"idle":f?"enter":"leave")(),H=Ee(0),de=b(g=>L(g,{enter:()=>{H.addFlag(E.Opening),w.current.beforeEnter()},leave:()=>{H.addFlag(E.Closing),w.current.beforeLeave()},idle:()=>{}})),fe=b(g=>L(g,{enter:()=>{H.removeFlag(E.Opening),w.current.afterEnter()},leave:()=>{H.removeFlag(E.Closing),w.current.afterLeave()},idle:()=>{}})),A=oe(()=>{j("hidden"),V(e)},q);ge({immediate:z,container:e,classes:k,direction:Te,onStart:I(g=>{A.onStart(e,g,de)}),onStop:I(g=>{A.onStop(e,g,fe),g==="leave"&&!U(A)&&(j("hidden"),V(e))})});let R=i,me={ref:a};return z?R={...R,className:ie(i.className,...k.current.enter,...k.current.enterFrom)}:(R.className=ie(i.className,(Q=e.current)==null?void 0:Q.className),R.className===""&&delete R.className),m.createElement(M.Provider,{value:A},m.createElement(pe,{value:L(l,{["visible"]:E.Open,["hidden"]:E.Closed})|H.flags},ee({ourProps:me,theirProps:R,defaultTag:ye,features:ae,visible:l==="visible",name:"Transition.Child"})))}function He(t,n){let{show:r,appear:s=!1,unmount:y=!0,...D}=t,c=C(null),x=re(c,n);ne();let p=te();if(r===void 0Line truncated
@@ -0,0 +1,10 @@
export declare function transition(node: HTMLElement, classes: {
base: string[];
enter: string[];
enterFrom: string[];
enterTo: string[];
leave: string[];
leaveFrom: string[];
leaveTo: string[];
entered: string[];
}, show: boolean, done?: () => void): () => void;
@@ -0,0 +1 @@
import{once as s}from'../../../utils/once.js';import{disposables as f}from'../../../utils/disposables.js';import{match as d}from'../../../utils/match.js';function g(t,...e){t&&e.length>0&&t.classList.add(...e)}function v(t,...e){t&&e.length>0&&t.classList.remove(...e)}function b(t,e){let n=f();if(!t)return n.dispose;let{transitionDuration:m,transitionDelay:a}=getComputedStyle(t),[u,p]=[m,a].map(l=>{let[r=0]=l.split(",").filter(Boolean).map(i=>i.includes("ms")?parseFloat(i):parseFloat(i)*1e3).sort((i,T)=>T-i);return r}),o=u+p;if(o!==0){n.group(r=>{r.setTimeout(()=>{e(),r.dispose()},o),r.addEventListener(t,"transitionrun",i=>{i.target===i.currentTarget&&r.dispose()})});let l=n.addEventListener(t,"transitionend",r=>{r.target===r.currentTarget&&(e(),l())})}else e();return n.add(()=>e()),n.dispose}function M(t,e,n,m){let a=n?"enter":"leave",u=f(),p=m!==void 0?s(m):()=>{};a==="enter"&&(t.removeAttribute("hidden"),t.style.display="");let o=d(a,{enter:()=>e.enter,leave:()=>e.leave}),l=d(a,{enter:()=>e.enterTo,leave:()=>e.leaveTo}),r=d(a,{enter:()=>e.enterFrom,leave:()=>e.leaveFrom});return v(t,...e.base,...e.enter,...e.enterTo,...e.enterFrom,...e.leave,...e.leaveFrom,...e.leaveTo,...e.entered),g(t,...e.base,...o,...r),u.nextFrame(()=>{v(t,...e.base,...o,...r),g(t,...e.base,...o,...l),b(t,()=>(v(t,...e.base,...o),g(t,...e.base,...e.entered),p()))}),u.dispose}export{M as transition};
File diff suppressed because it is too large. Load diff
+1
View File
@@ -0,0 +1 @@
import"client-only";export*from'./components/combobox/combobox.js';export*from'./components/dialog/dialog.js';export*from'./components/disclosure/disclosure.js';export*from'./components/focus-trap/focus-trap.js';export*from'./components/listbox/listbox.js';export*from'./components/menu/menu.js';export*from'./components/popover/popover.js';export*from'./components/radio-group/radio-group.js';export*from'./components/switch/switch.js';export*from'./components/tabs/tabs.js';export*from'./components/transitions/transition.js';import{Portal as d}from'./components/portal/portal.js';export{d as Portal};
+4
View File
@@ -0,0 +1,4 @@
"use strict";var Zo=Object.create;var mt=Object.defineProperty;var er=Object.getOwnPropertyDescriptor;var tr=Object.getOwnPropertyNames;var nr=Object.getPrototypeOf,or=Object.prototype.hasOwnProperty;var rr=(e,t,n)=>t in e?mt(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;var ar=(e,t)=>{for(var n in t)mt(e,n,{get:t[n],enumerable:!0})},Un=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of tr(t))!or.call(e,l)&&l!==n&&mt(e,l,{get:()=>t[l],enumerable:!(o=er(t,l))||o.enumerable});return e};var re=(e,t,n)=>(n=e!=null?Zo(nr(e)):{},Un(t||!e||!e.__esModule?mt(n,"default",{value:e,enumerable:!0}):n,e)),lr=e=>Un(mt({},"__esModule",{value:!0}),e);var Lt=(e,t,n)=>(rr(e,typeof t!="symbol"?t+"":t,n),n);var Ji={};ar(Ji,{Combobox:()=>kr,Dialog:()=>Fa,Disclosure:()=>$a,FocusTrap:()=>qe,Listbox:()=>cl,Menu:()=>Cl,Popover:()=>ql,Portal:()=>pt,RadioGroup:()=>ii,Switch:()=>mi,Tab:()=>Hi,Transition:()=>$i});module.exports=lr(Ji);var B=re(require("react"),1);var Vn=require("react");var At=require("react");var Qt=class{constructor(){Lt(this,"current",this.detect());Lt(this,"handoffState","pending");Lt(this,"currentId",0)}set(t){this.current!==t&&(this.handoffState="pending",this.currentId=0,this.current=t)}reset(){this.set(this.detect())}nextId(){return++this.currentId}get isServer(){return this.current==="server"}get isClient(){return this.current==="client"}detect(){return typeof window=="undefined"||typeof document=="undefined"?"server":"client"}handoff(){this.handoffState==="pending"&&(this.handoffState="complete")}get isHandoffComplete(){return this.handoffState==="complete"}},Pe=new Qt;var w=(e,t)=>{Pe.isServer?(0,At.useEffect)(e,t):(0,At.useLayoutEffect)(e,t)};var Bn=require("react");function z(e){let t=(0,Bn.useRef)(e);return w(()=>{t.current=e},[e]),t}function je(e,t){let[n,o]=(0,Vn.useState)(e),l=z(e);return w(()=>o(l.current),[l,o,...t]),n}var Ct=require("react");function we(e){typeof queueMicrotask=="function"?queueMicrotask(e):Promise.resolve().then(e).catch(t=>setTimeout(()=>{throw t}))}function le(){let e=[],t={addEventListener(n,o,l,r){return n.addEventListener(o,l,r),t.add(()=>n.removeEventListener(o,l,r))},requestAnimationFrame(...n){let o=requestAnimationFrame(...n);return t.add(()=>cancelAnimationFrame(o))},nextFrame(...n){return t.requestAnimationFrame(()=>t.requestAnimationFrame(...n))},setTimeout(...n){let o=setTimeout(...n);return t.add(()=>clearTimeout(o))},microTask(...n){let o={current:!0};return we(()=>{o.current&&n[0]()}),t.add(()=>{o.current=!1})},style(n,o,l){let r=n.style.getPropertyValue(o);return Object.assign(n.style,{[o]:l}),this.add(()=>{Object.assign(n.style,{[o]:r})})},group(n){let o=le();return n(o),this.add(()=>o.dispose())},add(n){return e.push(n),()=>{let o=e.indexOf(n);if(o>=0)for(let l of e.splice(o,1))l()}},dispose(){for(let n of e.splice(0))n()}};return t}function pe(){let[e]=(0,Ct.useState)(le);return(0,Ct.useEffect)(()=>()=>e.dispose(),[e]),e}var jn=re(require("react"),1);var y=function(t){let n=z(t);return jn.default.useCallback((...o)=>n.current(...o),[n])};var zt=re(require("react"),1);var We=re(require("react"),1);function ir(){let e=typeof document=="undefined";return"useSyncExternalStore"in We?(o=>o.useSyncExternalStore)(We)(()=>()=>{},()=>!1,()=>!e):!1}function Le(){let e=ir(),[t,n]=We.useState(Pe.isHandoffComplete);return t&&Pe.isHandoffComplete===!1&&n(!1),We.useEffect(()=>{t!==!0&&n(!0)},[t]),We.useEffect(()=>Pe.handoff(),[]),e?!1:t}var Wn,V=(Wn=zt.default.useId)!=null?Wn:function(){let t=Le(),[n,o]=zt.default.useState(t?()=>Pe.nextId():null);return w(()=>{n===null&&o(Pe.nextId())},[n]),n!=null?""+n:void 0};var bt=require("react");function I(e,t,...n){if(e in t){let l=t[e];return typeof l=="function"?l(...n):l}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(l=>`"${l}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,I),o}function Te(e){return Pe.isServer?null:e instanceof Node?e.ownerDocument:e!=null&&e.hasOwnProperty("current")&&e.current instanceof Node?e.current.ownerDocument:document}var Zt=["[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(",");function ze(e=document.body){return e==null?[]:Array.from(e.querySelectorAll(Zt)).sort((t,n)=>Math.sign((t.tabIndex||Number.MAX_SAFE_INTEGER)-(n.tabIndex||Number.MAX_SAFE_INTEGER)))}function He(e,t=0){var n;return e===((n=Te(e))==null?void 0:n.body)?!1:I(t,{[0](){return e.matches(Zt)},[1](){let o=e;for(;o!==null;){if(o.matches(Zt))return!0;o=o.parentElement}return!1}})}function en(e){let t=Te(e);le().nextFrame(()=>{t&&!He(t.activeElement,0)&&_e(e)})}typeof window!="undefined"&&typeof document!="undefined"&&(document.addEventListener("keydown",e=>{e.metaKey||e.altKey||e.ctrlKey||(document.documentElement.dataset.headlessuiFocusVisible=Line truncated
`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(d=>` - ${d}`).join(`
`)].join(`
`));let p=u.props,f=typeof(p==null?void 0:p.className)=="function"?(...d)=>nt(p==null?void 0:p.className(...d),s.className):nt(p==null?void 0:p.className,s.className),g=f?{className:f}:{};return(0,Re.cloneElement)(u,Object.assign({},Qn(u.props,Me(nn(s,["ref"]))),m,i,dr(u.ref,i.ref),g))}return(0,Re.createElement)(l,Object.assign({},nn(s,["ref"]),l!==Re.Fragment&&i,l!==Re.Fragment&&m),u)}function dr(...e){return{ref:e.every(t=>t==null)?void 0:t=>{for(let n of e)n!=null&&(typeof n=="function"?n(t):n.current=t)}}}function Qn(...e){var o;if(e.length===0)return{};if(e.length===1)return e[0];let t={},n={};for(let l of e)for(let r in l)r.startsWith("on")&&typeof l[r]=="function"?((o=n[r])!=null||(n[r]=[]),n[r].push(l[r])):t[r]=l[r];if(t.disabled||t["aria-disabled"])return Object.assign(t,Object.fromEntries(Object.keys(n).map(l=>[l,void 0])));for(let l in n)Object.assign(t,{[l](r,...a){let s=n[l];for(let i of s){if((r instanceof Event||(r==null?void 0:r.nativeEvent)instanceof Event)&&r.defaultPrevented)return;i(r,...a)}}});return t}function D(e){var t;return Object.assign((0,Re.forwardRef)(e),{displayName:(t=e.displayName)!=null?t:e.name})}function Me(e){let t=Object.assign({},e);for(let n in t)t[n]===void 0&&delete t[n];return t}function nn(e,t=[]){let n=Object.assign({},e);for(let o of t)o in n&&delete n[o];return n}function fe(e){let t=e.parentElement,n=null;for(;t&&!(t instanceof HTMLFieldSetElement);)t instanceof HTMLLegendElement&&(n=t),t=t.parentElement;let o=(t==null?void 0:t.getAttribute("disabled"))==="";return o&&cr(n)?!1:o}function cr(e){if(!e)return!1;let t=e.previousElementSibling;for(;t!==null;){if(t instanceof HTMLLegendElement)return!1;t=t.previousElementSibling}return!0}function Ke(e={},t=null,n=[]){for(let[o,l]of Object.entries(e))Zn(n,zn(t,o),l);return n}function zn(e,t){return e?e+"["+t+"]":t}function Zn(e,t,n){if(Array.isArray(n))for(let[o,l]of n.entries())Zn(e,zn(t,o.toString()),l);else n instanceof Date?e.push([t,n.toISOString()]):typeof n=="boolean"?e.push([t,n?"1":"0"]):typeof n=="string"?e.push([t,n]):typeof n=="number"?e.push([t,`${n}`]):n==null?e.push([t,""]):Ke(n,t,e)}function It(e){var n,o;let t=(n=e==null?void 0:e.form)!=null?n:e.closest("form");if(t){for(let l of t.elements)if(l!==e&&(l.tagName==="INPUT"&&l.type==="submit"||l.tagName==="BUTTON"&&l.type==="submit"||l.nodeName==="INPUT"&&l.type==="image")){l.click();return}(o=t.requestSubmit)==null||o.call(t)}}var fr="div";function mr(e,t){let{features:n=1,...o}=e,l={ref:t,"aria-hidden":(n&2)===2?!0:void 0,style:{position:"fixed",top:1,left:1,width:1,height:0,padding:0,margin:-1,overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",borderWidth:"0",...(n&4)===4&&(n&2)!==2&&{display:"none"}}};return h({ourProps:l,theirProps:o,slot:{},defaultTag:fr,name:"Hidden"})}var de=D(mr);var ot=re(require("react"),1),on=(0,ot.createContext)(null);on.displayName="OpenClosedContext";function ye(){return(0,ot.useContext)(on)}function Se({value:e,children:t}){return ot.default.createElement(on.Provider,{value:e},t)}var rt=require("react");function Ne(e,t,n){let[o,l]=(0,rt.useState)(n),r=e!==void 0,a=(0,rt.useRef)(r),s=(0,rt.useRef)(!1),i=(0,rt.useRef)(!1);return r&&!a.current&&!s.current?(s.current=!0,a.current=r,console.error("A component is changing from uncontrolled to controlled. This may be caused by the value changing from undefined to a defined value, which should not happen.")):!r&&a.current&&!i.current&&(i.current=!0,a.current=r,console.error("A component is changing from controlled to uncontrolled. This may be caused by the value changing from a defined value to undefined, which should not happen.")),[r?e:o,y(u=>(r||l(u),t==null?void 0:t(u)))]}var Ft=require("react");function Xe(e,t){let n=(0,Ft.useRef)([]),o=y(e);(0,Ft.useEffect)(()=>{let l=[...n.current];for(let[r,a]of t.entries())if(n.current[r]!==a){let s=o(t,l);return n.current=t,s}},[o,...t])}var to=require("react");function eo(e){return[e.screenX,e.screenY]}function at(){let e=(0,to.useRef)([-1,-1]);return{wasMoved(t){let n=eo(t);return e.current[0]===n[0]&&e.current[1]===n[1]?!1:(e.current=n,!0)},update(t){e.current=eo(t)}}}function rn(){return/iPhone/gi.test(window.navigator.platform)||/Mac/gi.test(window.navigator.platform)&&window.navigator.maxTouchPoints>0}function Tr(){return/Android/gi.test(window.navigator.userAgent)}function no(){return rn()||Tr()}var oo=require("react");function be(...e){return(0,oo.useMemo)(()=>Te(...e),[...e])}function an(e,t=n=>n){let n=e.activeOptionIndex!==null?e.options[e.activeOptionIndex]:null,o=ge(t(e.options.slice()),r=>r.dataRef.current.domRef.current),l=n?o.indexOf(n):null;return l===-1&&(l=null),{options:o,activeOptionIndex:l}}var br={[1](e){var t;return(t=e.dataRef.current)!=null&&t.disabled||e.comboboxState===1?e:{...e,activeOptionIndex:null,comboboxState:1}},[0](e){var n;if((n=e.dataRef.current)!=null&&n.disabled||e.comboboxState===0)return e;let t=e.activeOptionIndex;if(e.dataRef.current){let{isSelected:o}=e.dataRef.current,l=e.option Line truncated
+1
View File
@@ -0,0 +1 @@
export declare function useId(): number;
@@ -0,0 +1,2 @@
import { ScrollLockStep } from './overflow-store.js';
export declare function adjustScrollbarPadding(): ScrollLockStep;
@@ -0,0 +1 @@
function c(){let o;return{before({doc:e}){var l;let n=e.documentElement;o=((l=e.defaultView)!=null?l:window).innerWidth-n.clientWidth},after({doc:e,d:n}){let t=e.documentElement,l=t.clientWidth-t.offsetWidth,r=o-l;n.style(t,"paddingRight",`${r}px`)}}}export{c as adjustScrollbarPadding};
@@ -0,0 +1,6 @@
import { ScrollLockStep } from './overflow-store.js';
interface ContainerMetadata {
containers: (() => HTMLElement[])[];
}
export declare function handleIOSLocking(): ScrollLockStep<ContainerMetadata>;
export {};
@@ -0,0 +1 @@
import{disposables as m}from'../../utils/disposables.js';import{isIOS as f}from'../../utils/platform.js';function T(){if(!f())return{};let l;return{before(){l=window.pageYOffset},after({doc:o,d:t,meta:s}){function i(n){return s.containers.flatMap(e=>e()).some(e=>e.contains(n))}t.microTask(()=>{if(window.getComputedStyle(o.documentElement).scrollBehavior!=="auto"){let e=m();e.style(o.documentElement,"scroll-behavior","auto"),t.add(()=>t.microTask(()=>e.dispose()))}t.style(o.body,"marginTop",`-${l}px`),window.scrollTo(0,0);let n=null;t.addEventListener(o,"click",e=>{if(e.target instanceof HTMLElement)try{let r=e.target.closest("a");if(!r)return;let{hash:c}=new URL(r.href),a=o.querySelector(c);a&&!i(a)&&(n=a)}catch{}},!0),t.addEventListener(o,"touchmove",e=>{e.target instanceof HTMLElement&&!i(e.target)&&e.preventDefault()},{passive:!1}),t.add(()=>{window.scrollTo(0,window.pageYOffset+l),n&&n.isConnected&&(n.scrollIntoView({block:"nearest"}),n=null)})})}}}export{T as handleIOSLocking};
@@ -0,0 +1,19 @@
import { Disposables } from '../../utils/disposables.js';
interface DocEntry {
doc: Document;
count: number;
d: Disposables;
meta: Set<MetaFn>;
}
export type MetaFn = (meta: Record<string, any>) => Record<string, any>;
export interface Context<MetaType extends Record<string, any> = any> {
doc: Document;
d: Disposables;
meta: MetaType;
}
export interface ScrollLockStep<MetaType extends Record<string, any> = any> {
before?(ctx: Context<MetaType>): void;
after?(ctx: Context<MetaType>): void;
}
export declare let overflows: import('../../utils/store.js').Store<Map<Document, DocEntry>, "PUSH" | "POP" | "SCROLL_PREVENT" | "SCROLL_ALLOW" | "TEARDOWN">;
export {};
@@ -0,0 +1 @@
import{disposables as s}from'../../utils/disposables.js';import{createStore as i}from'../../utils/store.js';import{adjustScrollbarPadding as l}from'./adjust-scrollbar-padding.js';import{handleIOSLocking as d}from'./handle-ios-locking.js';import{preventScroll as p}from'./prevent-scroll.js';function m(e){let n={};for(let t of e)Object.assign(n,t(n));return n}let a=i(()=>new Map,{PUSH(e,n){var o;let t=(o=this.get(e))!=null?o:{doc:e,count:0,d:s(),meta:new Set};return t.count++,t.meta.add(n),this.set(e,t),this},POP(e,n){let t=this.get(e);return t&&(t.count--,t.meta.delete(n)),this},SCROLL_PREVENT({doc:e,d:n,meta:t}){let o={doc:e,d:n,meta:m(t)},c=[d(),l(),p()];c.forEach(({before:r})=>r==null?void 0:r(o)),c.forEach(({after:r})=>r==null?void 0:r(o))},SCROLL_ALLOW({d:e}){e.dispose()},TEARDOWN({doc:e}){this.delete(e)}});a.subscribe(()=>{let e=a.getSnapshot(),n=new Map;for(let[t]of e)n.set(t,t.documentElement.style.overflow);for(let t of e.values()){let o=n.get(t.doc)==="hidden",c=t.count!==0;(c&&!o||!c&&o)&&a.dispatch(t.count>0?"SCROLL_PREVENT":"SCROLL_ALLOW",t),t.count===0&&a.dispatch("TEARDOWN",t)}});export{a as overflows};
@@ -0,0 +1,2 @@
import { ScrollLockStep } from './overflow-store.js';
export declare function preventScroll(): ScrollLockStep;
@@ -0,0 +1 @@
function l(){return{before({doc:e,d:o}){o.style(e.documentElement,"overflow","hidden")}}}export{l as preventScroll};
@@ -0,0 +1 @@
export declare function useDocumentOverflowLockedEffect(doc: Document | null, shouldBeLocked: boolean, meta: (meta: Record<string, any>) => Record<string, any>): boolean;
@@ -0,0 +1 @@
import{useIsoMorphicEffect as u}from'../use-iso-morphic-effect.js';import{useStore as s}from'../../hooks/use-store.js';import{overflows as t}from'./overflow-store.js';function p(e,r,n){let f=s(t),o=e?f.get(e):void 0,i=o?o.count>0:!1;return u(()=>{if(!(!e||!r))return t.dispatch("PUSH",e,n),()=>t.dispatch("POP",e,n)},[r,e]),i}export{p as useDocumentOverflowLockedEffect};
+2
View File
@@ -0,0 +1,2 @@
/// <reference types="react" />
export declare function useComputed<T>(cb: () => T, dependencies: React.DependencyList): T;
+1
View File
@@ -0,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};
+1
View File
@@ -0,0 +1 @@
export declare function useControllable<T>(controlledValue: T | undefined, onChange?: (value: T) => void, defaultValue?: T): readonly [NonNullable<T>, (value: any) => void | undefined];
+1
View File
@@ -0,0 +1 @@
import{useRef as o,useState as f}from"react";import{useEvent as a}from'./use-event.js';function T(l,r,c){let[i,s]=f(c),e=l!==void 0,t=o(e),u=o(!1),d=o(!1);return e&&!t.current&&!u.current?(u.current=!0,t.current=e,console.error("A component is changing from uncontrolled to controlled. This may be caused by the value changing from undefined to a defined value, which should not happen.")):!e&&t.current&&!d.current&&(d.current=!0,t.current=e,console.error("A component is changing from controlled to uncontrolled. This may be caused by the value changing from a defined value to undefined, which should not happen.")),[e?l:i,a(n=>(e||s(n),r==null?void 0:r(n)))]}export{T as useControllable};
+21
View File
@@ -0,0 +1,21 @@
export declare function useDisposables(): {
addEventListener<TEventName extends keyof WindowEventMap>(element: HTMLElement | Window | Document, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions | undefined): () => void;
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: HTMLElement | Window | Document, 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;
};
+1
View File
@@ -0,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};
+1
View File
@@ -0,0 +1 @@
export declare function useDocumentEvent<TType extends keyof DocumentEventMap>(type: TType, listener: (ev: DocumentEventMap[TType]) => any, options?: boolean | AddEventListenerOptions): void;
+1
View File
@@ -0,0 +1 @@
import{useEffect as m}from"react";import{useLatestValue as c}from'./use-latest-value.js';function d(e,r,n){let o=c(r);m(()=>{function t(u){o.current(u)}return document.addEventListener(e,t,n),()=>document.removeEventListener(e,t,n)},[e,n])}export{d as useDocumentEvent};
+1
View File
@@ -0,0 +1 @@
export declare function useEventListener<TType extends keyof WindowEventMap>(element: HTMLElement | Document | Window | EventTarget | null | undefined, type: TType, listener: (event: WindowEventMap[TType]) => any, options?: boolean | AddEventListenerOptions): void;
+1
View File
@@ -0,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};
+1
View File
@@ -0,0 +1 @@
export declare let useEvent: <F extends (...args: any[]) => any, P extends any[] = Parameters<F>, R = ReturnType<F>>(cb: (...args: P) => R) => (...args: P) => R;
+1
View File
@@ -0,0 +1 @@
import a from"react";import{useLatestValue as n}from'./use-latest-value.js';let o=function(t){let e=n(t);return a.useCallback((...r)=>e.current(...r),[e])};export{o as useEvent};
+7
View File
@@ -0,0 +1,7 @@
export declare function useFlags(initialFlags?: number): {
flags: number;
addFlag: (flag: number) => void;
hasFlag: (flag: number) => boolean;
removeFlag: (flag: number) => void;
toggleFlag: (flag: number) => void;
};
+1
View File
@@ -0,0 +1 @@
import{useState as f,useCallback as n}from"react";import{useIsMounted as i}from'./use-is-mounted.js';function c(a=0){let[l,r]=f(a),t=i(),o=n(e=>{t.current&&r(u=>u|e)},[l,t]),m=n(e=>Boolean(l&e),[l]),s=n(e=>{t.current&&r(u=>u&~e)},[r,t]),g=n(e=>{t.current&&r(u=>u^e)},[r]);return{flags:l,addFlag:o,hasFlag:m,removeFlag:s,toggleFlag:g}}export{c as useFlags};
+1
View File
@@ -0,0 +1 @@
export declare let useId: any;
+1
View File
@@ -0,0 +1 @@
var o;import t from"react";import{useIsoMorphicEffect as d}from'./use-iso-morphic-effect.js';import{useServerHandoffComplete as f}from'./use-server-handoff-complete.js';import{env as r}from'../utils/env.js';let I=(o=t.useId)!=null?o:function(){let n=f(),[e,u]=t.useState(n?()=>r.nextId():null);return d(()=>{e===null&&u(r.nextId())},[e]),e!=null?""+e:void 0};export{I as useId};
+2
View File
@@ -0,0 +1,2 @@
import { MutableRefObject } from 'react';
export declare function useInert<TElement extends HTMLElement>(node: MutableRefObject<TElement | null> | (() => TElement | null), enabled?: boolean): void;
+1
View File
@@ -0,0 +1 @@
import{useIsoMorphicEffect as s}from'./use-iso-morphic-effect.js';let u=new Map,t=new Map;function h(r,l=!0){s(()=>{var o;if(!l)return;let e=typeof r=="function"?r():r.current;if(!e)return;function a(){var d;if(!e)return;let i=(d=t.get(e))!=null?d:1;if(i===1?t.delete(e):t.set(e,i-1),i!==1)return;let n=u.get(e);n&&(n["aria-hidden"]===null?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden",n["aria-hidden"]),e.inert=n.inert,u.delete(e))}let f=(o=t.get(e))!=null?o:0;return t.set(e,f+1),f!==0||(u.set(e,{"aria-hidden":e.getAttribute("aria-hidden"),inert:e.inert}),e.setAttribute("aria-hidden","true"),e.inert=!0),a},[r,l])}export{h as useInert};
+1
View File
@@ -0,0 +1 @@
export declare function useIsInitialRender(): boolean;
+1
View File
@@ -0,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};
+2
View File
@@ -0,0 +1,2 @@
/// <reference types="react" />
export declare function useIsMounted(): import("react").MutableRefObject<boolean>;
+1
View File
@@ -0,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};
@@ -0,0 +1,2 @@
import { EffectCallback, DependencyList } from 'react';
export declare let useIsoMorphicEffect: (effect: EffectCallback, deps?: DependencyList | undefined) => void;
+1
View File
@@ -0,0 +1 @@
import{useLayoutEffect as t,useEffect as c}from"react";import{env as i}from'../utils/env.js';let l=(e,f)=>{i.isServer?c(e,f):t(e,f)};export{l as useIsoMorphicEffect};
+2
View File
@@ -0,0 +1,2 @@
/// <reference types="react" />
export declare function useLatestValue<T>(value: T): import("react").MutableRefObject<T>;
+1
View File
@@ -0,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};
+1
View File
@@ -0,0 +1 @@
export declare function useOnUnmount(cb: () => void): void;
+1
View File
@@ -0,0 +1 @@
import{useRef as u,useEffect as n}from"react";import{microTask as o}from'../utils/micro-task.js';import{useEvent as f}from'./use-event.js';function c(t){let r=f(t),e=u(!1);n(()=>(e.current=!1,()=>{e.current=!0,o(()=>{e.current&&r()})}),[r])}export{c as useOnUnmount};
+6
View File
@@ -0,0 +1,6 @@
import { MutableRefObject } from 'react';
type Container = MutableRefObject<HTMLElement | null> | HTMLElement | null;
type ContainerCollection = Container[] | Set<Container>;
type ContainerInput = Container | ContainerCollection;
export declare function useOutsideClick(containers: ContainerInput | (() => ContainerInput), cb: (event: MouseEvent | PointerEvent | FocusEvent | TouchEvent, target: HTMLElement) => void, enabled?: boolean): void;
export {};
+1
View File
@@ -0,0 +1 @@
import{useEffect as d,useRef as f}from"react";import{FocusableMode as p,isFocusableElement as C}from'../utils/focus-management.js';import{useDocumentEvent as l}from'./use-document-event.js';import{useWindowEvent as M}from'./use-window-event.js';function h(s,m,a=!0){let i=f(!1);d(()=>{requestAnimationFrame(()=>{i.current=a})},[a]);function c(e,r){if(!i.current||e.defaultPrevented)return;let t=r(e);if(t===null||!t.getRootNode().contains(t)||!t.isConnected)return;let E=function u(n){return typeof n=="function"?u(n()):Array.isArray(n)||n instanceof Set?n:[n]}(s);for(let u of E){if(u===null)continue;let n=u instanceof HTMLElement?u:u.current;if(n!=null&&n.contains(t)||e.composed&&e.composedPath().includes(n))return}return!C(t,p.Loose)&&t.tabIndex!==-1&&e.preventDefault(),m(e,t)}let o=f(null);l("pointerdown",e=>{var r,t;i.current&&(o.current=((t=(r=e.composedPath)==null?void 0:r.call(e))==null?void 0:t[0])||e.target)},!0),l("mousedown",e=>{var r,t;i.current&&(o.current=((t=(r=e.composedPath)==null?void 0:r.call(e))==null?void 0:t[0])||e.target)},!0),l("click",e=>{o.current&&(c(e,()=>o.current),o.current=null)},!0),l("touchend",e=>c(e,()=>e.target instanceof HTMLElement?e.target:null),!0),M("blur",e=>c(e,()=>window.document.activeElement instanceof HTMLIFrameElement?window.document.activeElement:null),!0)}export{h as useOutsideClick};
+2
View File
@@ -0,0 +1,2 @@
import { getOwnerDocument } from '../utils/owner.js';
export declare function useOwnerDocument(...args: Parameters<typeof getOwnerDocument>): Document | null;
+1
View File
@@ -0,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};
@@ -0,0 +1,5 @@
import { MutableRefObject } from 'react';
export declare function useResolveButtonType<TTag>(props: {
type?: string;
as?: TTag;
}, ref: MutableRefObject<HTMLElement | null>): string | undefined;
+1
View File
@@ -0,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};
+15
View File
@@ -0,0 +1,15 @@
import React, { MutableRefObject } from 'react';
export declare function useRootContainers({ defaultContainers, portals, mainTreeNodeRef: _mainTreeNodeRef, }?: {
defaultContainers?: (HTMLElement | null | MutableRefObject<HTMLElement | null>)[];
portals?: MutableRefObject<HTMLElement[]>;
mainTreeNodeRef?: MutableRefObject<HTMLElement | null>;
}): {
resolveContainers: () => HTMLElement[];
contains: (element: HTMLElement) => boolean;
mainTreeNodeRef: React.MutableRefObject<HTMLElement | null>;
MainTreeNode: () => JSX.Element | null;
};
export declare function useMainTreeNode(): {
mainTreeNodeRef: React.MutableRefObject<HTMLElement | null>;
MainTreeNode: () => JSX.Element;
};
+1
View File
@@ -0,0 +1 @@
import s,{useRef as a,useMemo as m}from"react";import{Hidden as M,Features as d}from'../internal/hidden.js';import{useEvent as H}from'./use-event.js';import{useOwnerDocument as E}from'./use-owner.js';function j({defaultContainers:t=[],portals:r,mainTreeNodeRef:u}={}){var c;let o=a((c=u==null?void 0:u.current)!=null?c:null),l=E(o),f=H(()=>{var i;let n=[];for(let e of t)e!==null&&(e instanceof HTMLElement?n.push(e):"current"in e&&e.current instanceof HTMLElement&&n.push(e.current));if(r!=null&&r.current)for(let e of r.current)n.push(e);for(let e of(i=l==null?void 0:l.querySelectorAll("html > *, body > *"))!=null?i:[])e!==document.body&&e!==document.head&&e instanceof HTMLElement&&e.id!=="headlessui-portal-root"&&(e.contains(o.current)||n.some(T=>e.contains(T))||n.push(e));return n});return{resolveContainers:f,contains:H(n=>f().some(i=>i.contains(n))),mainTreeNodeRef:o,MainTreeNode:m(()=>function(){return u!=null?null:s.createElement(M,{features:d.Hidden,ref:o})},[o,u])}}function y(){let t=a(null);return{mainTreeNodeRef:t,MainTreeNode:m(()=>function(){return s.createElement(M,{features:d.Hidden,ref:t})},[t])}}export{y as useMainTreeNode,j as useRootContainers};
@@ -0,0 +1 @@
export declare function useServerHandoffComplete(): boolean;
@@ -0,0 +1 @@
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};
+2
View File
@@ -0,0 +1,2 @@
import { Store } from '../utils/store.js';
export declare function useStore<T>(store: Store<T, any>): T;
+1
View File
@@ -0,0 +1 @@
import{useSyncExternalStore as r}from'../use-sync-external-store-shim/index.js';function S(t){return r(t.subscribe,t.getSnapshot,t.getSnapshot)}export{S as useStore};
+5
View File
@@ -0,0 +1,5 @@
/// <reference types="react" />
export declare function optionalRef<T>(cb: (ref: T) => void, isOptional?: boolean): ((ref: T) => void) & {
[x: symbol]: boolean;
};
export declare function useSyncRefs<TType>(...refs: (React.MutableRefObject<TType | null> | ((instance: TType) => void) | null)[]): ((value: TType) => void) | undefined;
+1
View File
@@ -0,0 +1 @@
import{useRef as l,useEffect as i}from"react";import{useEvent as r}from'./use-event.js';let u=Symbol();function T(t,n=!0){return Object.assign(t,{[u]:n})}function y(...t){let n=l(t);i(()=>{n.current=t},[t]);let c=r(e=>{for(let o of n.current)o!=null&&(typeof o=="function"?o(e):o.current=e)});return t.every(e=>e==null||(e==null?void 0:e[u]))?void 0:c}export{T as optionalRef,y as useSyncRefs};
+6
View File
@@ -0,0 +1,6 @@
/// <reference types="react" />
export declare enum Direction {
Forwards = 0,
Backwards = 1
}
export declare function useTabDirection(): import("react").MutableRefObject<Direction>;
+1
View File
@@ -0,0 +1 @@
import{useRef as t}from"react";import{useWindowEvent as a}from'./use-window-event.js';var s=(r=>(r[r.Forwards=0]="Forwards",r[r.Backwards=1]="Backwards",r))(s||{});function n(){let e=t(0);return a("keydown",o=>{o.key==="Tab"&&(e.current=o.shiftKey?1:0)},!0),e}export{s as Direction,n as useTabDirection};
+2
View File
@@ -0,0 +1,2 @@
import { MutableRefObject } from 'react';
export declare function useTextValue(element: MutableRefObject<HTMLElement | null>): () => string;
+1
View File
@@ -0,0 +1 @@
import{useRef as l}from"react";import{getTextValue as i}from'../utils/get-text-value.js';import{useEvent as o}from'./use-event.js';function b(c){let t=l(""),r=l("");return o(()=>{let e=c.current;if(!e)return"";let u=e.innerText;if(t.current===u)return r.current;let n=i(e).trim().toLowerCase();return t.current=u,r.current=n,n})}export{b as useTextValue};
+4
View File
@@ -0,0 +1,4 @@
export declare function useTrackedPointer(): {
wasMoved(evt: PointerEvent): boolean;
update(evt: PointerEvent): void;
};
+1
View File
@@ -0,0 +1 @@
import{useRef as o}from"react";function t(e){return[e.screenX,e.screenY]}function u(){let e=o([-1,-1]);return{wasMoved(r){let n=t(r);return e.current[0]===n[0]&&e.current[1]===n[1]?!1:(e.current=n,!0)},update(r){e.current=t(r)}}}export{u as useTrackedPointer};
+20
View File
@@ -0,0 +1,20 @@
import { MutableRefObject } from 'react';
interface TransitionArgs {
immediate: boolean;
container: MutableRefObject<HTMLElement | null>;
classes: MutableRefObject<{
base: string[];
enter: string[];
enterFrom: string[];
enterTo: string[];
leave: string[];
leaveFrom: string[];
leaveTo: string[];
entered: string[];
}>;
direction: 'enter' | 'leave' | 'idle';
onStart: MutableRefObject<(direction: TransitionArgs['direction']) => void>;
onStop: MutableRefObject<(direction: TransitionArgs['direction']) => void>;
}
export declare function useTransition({ immediate, container, direction, classes, onStart, onStop, }: TransitionArgs): void;
export {};
+1
View File
@@ -0,0 +1 @@
import{transition as f}from'../components/transitions/utils/transition.js';import{disposables as m}from'../utils/disposables.js';import{useDisposables as p}from'./use-disposables.js';import{useIsMounted as b}from'./use-is-mounted.js';import{useIsoMorphicEffect as o}from'./use-iso-morphic-effect.js';import{useLatestValue as g}from'./use-latest-value.js';function E({immediate:t,container:s,direction:n,classes:u,onStart:a,onStop:c}){let l=b(),d=p(),e=g(n);o(()=>{t&&(e.current="enter")},[t]),o(()=>{let r=m();d.add(r.dispose);let i=s.current;if(i&&e.current!=="idle"&&l.current)return r.dispose(),a.current(e.current),r.add(f(i,u.current,e.current==="enter",()=>{r.dispose(),c.current(e.current)})),r.dispose},[n])}export{E as useTransition};
+8
View File
@@ -0,0 +1,8 @@
type AcceptNode = (node: HTMLElement) => typeof NodeFilter.FILTER_ACCEPT | typeof NodeFilter.FILTER_SKIP | typeof NodeFilter.FILTER_REJECT;
export declare function useTreeWalker({ container, accept, walk, enabled, }: {
container: HTMLElement | null;
accept: AcceptNode;
walk(node: HTMLElement): void;
enabled?: boolean;
}): void;
export {};
+1
View File
@@ -0,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};
+1
View File
@@ -0,0 +1 @@
export declare function useWatch<T extends any[]>(cb: (newValues: [...T], oldValues: [...T]) => void | (() => void), dependencies: [...T]): void;
Loaded 100 of 3361 files, more files were not shown because too many files have changed in this diff. Show more