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

+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