initial commit
This commit is contained in:
Dinawo committed
1 parent
6d8d5fcd6c
commit
8484a534db
3361 files changed
+493837
No files matched your search
+136
@@ -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
@@ -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
|
||||
Reference in new issue
Block a user