tanuki-ui
Version:
HTML-first React component library with semantic elements, multi-OS themes, and production-ready visual node editor
322 lines (321 loc) • 23.2 kB
TypeScript
import { default as React } from 'react';
type InputValue = string | number | readonly string[] | undefined;
export type Converter<T> = {
encode: (value: InputValue) => T;
decode: (value: T) => InputValue;
};
export declare const useMergedRef: <T extends any>(...refs: (React.ForwardedRef<T> | undefined)[]) => (node: T) => void;
export declare const useControlledInputState: <S extends any, C extends Converter<S> = Converter<S>>({ value, defaultValue, onChange, ref: forwardedRef, ...props }: React.InputHTMLAttributes<HTMLInputElement> & {
ref?: React.ForwardedRef<HTMLInputElement>;
}, convert?: C, areEqual?: (a: S, b: S) => boolean) => readonly [S, React.Dispatch<React.SetStateAction<S>>, {
readonly onChange: React.ChangeEventHandler<HTMLInputElement> | undefined;
readonly ref: (node: any) => void;
readonly style: {
display: string;
};
readonly readOnly: true;
readonly accept?: string | undefined;
readonly alt?: string | undefined;
readonly autoComplete?: React.HTMLInputAutoCompleteAttribute | undefined;
readonly capture?: boolean | "user" | "environment" | undefined;
readonly checked?: boolean | undefined;
readonly disabled?: boolean | undefined;
readonly form?: string | undefined;
readonly formAction?: string | ((formData: FormData) => void | Promise<void>) | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
readonly formEncType?: string | undefined;
readonly formMethod?: string | undefined;
readonly formNoValidate?: boolean | undefined;
readonly formTarget?: string | undefined;
readonly height?: number | string | undefined;
readonly list?: string | undefined;
readonly max?: number | string | undefined;
readonly maxLength?: number | undefined;
readonly min?: number | string | undefined;
readonly minLength?: number | undefined;
readonly multiple?: boolean | undefined;
readonly name?: string | undefined;
readonly pattern?: string | undefined;
readonly placeholder?: string | undefined;
readonly required?: boolean | undefined;
readonly size?: number | undefined;
readonly src?: string | undefined;
readonly step?: number | string | undefined;
readonly type?: React.HTMLInputTypeAttribute | undefined;
readonly width?: number | string | undefined;
readonly defaultChecked?: boolean | undefined;
readonly suppressContentEditableWarning?: boolean | undefined;
readonly suppressHydrationWarning?: boolean | undefined;
readonly accessKey?: string | undefined;
readonly autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
readonly autoFocus?: boolean | undefined;
readonly className?: string | undefined;
readonly contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
readonly contextMenu?: string | undefined;
readonly dir?: string | undefined;
readonly draggable?: (boolean | "true" | "false") | undefined;
readonly enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
readonly hidden?: boolean | undefined;
readonly id?: string | undefined;
readonly lang?: string | undefined;
readonly nonce?: string | undefined;
readonly slot?: string | undefined;
readonly spellCheck?: (boolean | "true" | "false") | undefined;
readonly tabIndex?: number | undefined;
readonly title?: string | undefined;
readonly translate?: "yes" | "no" | undefined;
readonly radioGroup?: string | undefined;
readonly role?: React.AriaRole | undefined;
readonly about?: string | undefined;
readonly content?: string | undefined;
readonly datatype?: string | undefined;
readonly inlist?: any;
readonly prefix?: string | undefined;
readonly property?: string | undefined;
readonly rel?: string | undefined;
readonly resource?: string | undefined;
readonly rev?: string | undefined;
readonly typeof?: string | undefined;
readonly vocab?: string | undefined;
readonly autoCorrect?: string | undefined;
readonly autoSave?: string | undefined;
readonly color?: string | undefined;
readonly itemProp?: string | undefined;
readonly itemScope?: boolean | undefined;
readonly itemType?: string | undefined;
readonly itemID?: string | undefined;
readonly itemRef?: string | undefined;
readonly results?: number | undefined;
readonly security?: string | undefined;
readonly unselectable?: "on" | "off" | undefined;
readonly popover?: "" | "auto" | "manual" | undefined;
readonly popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
readonly popoverTarget?: string | undefined;
readonly inert?: boolean | undefined;
readonly inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
readonly is?: string | undefined;
readonly "aria-activedescendant"?: string | undefined;
readonly "aria-atomic"?: (boolean | "true" | "false") | undefined;
readonly "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
readonly "aria-braillelabel"?: string | undefined;
readonly "aria-brailleroledescription"?: string | undefined;
readonly "aria-busy"?: (boolean | "true" | "false") | undefined;
readonly "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
readonly "aria-colcount"?: number | undefined;
readonly "aria-colindex"?: number | undefined;
readonly "aria-colindextext"?: string | undefined;
readonly "aria-colspan"?: number | undefined;
readonly "aria-controls"?: string | undefined;
readonly "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
readonly "aria-describedby"?: string | undefined;
readonly "aria-description"?: string | undefined;
readonly "aria-details"?: string | undefined;
readonly "aria-disabled"?: (boolean | "true" | "false") | undefined;
readonly "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
readonly "aria-errormessage"?: string | undefined;
readonly "aria-expanded"?: (boolean | "true" | "false") | undefined;
readonly "aria-flowto"?: string | undefined;
readonly "aria-grabbed"?: (boolean | "true" | "false") | undefined;
readonly "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
readonly "aria-hidden"?: (boolean | "true" | "false") | undefined;
readonly "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
readonly "aria-keyshortcuts"?: string | undefined;
readonly "aria-label"?: string | undefined;
readonly "aria-labelledby"?: string | undefined;
readonly "aria-level"?: number | undefined;
readonly "aria-live"?: "off" | "assertive" | "polite" | undefined;
readonly "aria-modal"?: (boolean | "true" | "false") | undefined;
readonly "aria-multiline"?: (boolean | "true" | "false") | undefined;
readonly "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
readonly "aria-orientation"?: "horizontal" | "vertical" | undefined;
readonly "aria-owns"?: string | undefined;
readonly "aria-placeholder"?: string | undefined;
readonly "aria-posinset"?: number | undefined;
readonly "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
readonly "aria-readonly"?: (boolean | "true" | "false") | undefined;
readonly "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
readonly "aria-required"?: (boolean | "true" | "false") | undefined;
readonly "aria-roledescription"?: string | undefined;
readonly "aria-rowcount"?: number | undefined;
readonly "aria-rowindex"?: number | undefined;
readonly "aria-rowindextext"?: string | undefined;
readonly "aria-rowspan"?: number | undefined;
readonly "aria-selected"?: (boolean | "true" | "false") | undefined;
readonly "aria-setsize"?: number | undefined;
readonly "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
readonly "aria-valuemax"?: number | undefined;
readonly "aria-valuemin"?: number | undefined;
readonly "aria-valuenow"?: number | undefined;
readonly "aria-valuetext"?: string | undefined;
readonly children?: React.ReactNode | undefined;
readonly dangerouslySetInnerHTML?: {
__html: string | TrustedHTML;
} | undefined;
readonly onCopy?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
readonly onCopyCapture?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
readonly onCut?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
readonly onCutCapture?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
readonly onPaste?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
readonly onPasteCapture?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
readonly onCompositionEnd?: React.CompositionEventHandler<HTMLInputElement> | undefined;
readonly onCompositionEndCapture?: React.CompositionEventHandler<HTMLInputElement> | undefined;
readonly onCompositionStart?: React.CompositionEventHandler<HTMLInputElement> | undefined;
readonly onCompositionStartCapture?: React.CompositionEventHandler<HTMLInputElement> | undefined;
readonly onCompositionUpdate?: React.CompositionEventHandler<HTMLInputElement> | undefined;
readonly onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLInputElement> | undefined;
readonly onFocus?: React.FocusEventHandler<HTMLInputElement> | undefined;
readonly onFocusCapture?: React.FocusEventHandler<HTMLInputElement> | undefined;
readonly onBlur?: React.FocusEventHandler<HTMLInputElement> | undefined;
readonly onBlurCapture?: React.FocusEventHandler<HTMLInputElement> | undefined;
readonly onChangeCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
readonly onBeforeInput?: React.FormEventHandler<HTMLInputElement> | undefined;
readonly onBeforeInputCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
readonly onInput?: React.FormEventHandler<HTMLInputElement> | undefined;
readonly onInputCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
readonly onReset?: React.FormEventHandler<HTMLInputElement> | undefined;
readonly onResetCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
readonly onSubmit?: React.FormEventHandler<HTMLInputElement> | undefined;
readonly onSubmitCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
readonly onInvalid?: React.FormEventHandler<HTMLInputElement> | undefined;
readonly onInvalidCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
readonly onLoad?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onLoadCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onError?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onErrorCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onKeyDown?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
readonly onKeyDownCapture?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
readonly onKeyPress?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
readonly onKeyPressCapture?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
readonly onKeyUp?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
readonly onKeyUpCapture?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
readonly onAbort?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onAbortCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onCanPlay?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onCanPlayCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onCanPlayThrough?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onCanPlayThroughCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onDurationChange?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onDurationChangeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onEmptied?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onEmptiedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onEncrypted?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onEncryptedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onEnded?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onEndedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onLoadedData?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onLoadedDataCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onLoadedMetadata?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onLoadedMetadataCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onLoadStart?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onLoadStartCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onPause?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onPauseCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onPlay?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onPlayCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onPlaying?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onPlayingCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onProgress?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onProgressCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onRateChange?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onRateChangeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onResize?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onResizeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onSeeked?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onSeekedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onSeeking?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onSeekingCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onStalled?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onStalledCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onSuspend?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onSuspendCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onTimeUpdate?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onTimeUpdateCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onVolumeChange?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onVolumeChangeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onWaiting?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onWaitingCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onAuxClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
readonly onAuxClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
readonly onClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
readonly onClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
readonly onContextMenu?: React.MouseEventHandler<HTMLInputElement> | undefined;
readonly onContextMenuCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
readonly onDoubleClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
readonly onDoubleClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
readonly onDrag?: React.DragEventHandler<HTMLInputElement> | undefined;
readonly onDragCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
readonly onDragEnd?: React.DragEventHandler<HTMLInputElement> | undefined;
readonly onDragEndCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
readonly onDragEnter?: React.DragEventHandler<HTMLInputElement> | undefined;
readonly onDragEnterCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
readonly onDragExit?: React.DragEventHandler<HTMLInputElement> | undefined;
readonly onDragExitCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
readonly onDragLeave?: React.DragEventHandler<HTMLInputElement> | undefined;
readonly onDragLeaveCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
readonly onDragOver?: React.DragEventHandler<HTMLInputElement> | undefined;
readonly onDragOverCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
readonly onDragStart?: React.DragEventHandler<HTMLInputElement> | undefined;
readonly onDragStartCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
readonly onDrop?: React.DragEventHandler<HTMLInputElement> | undefined;
readonly onDropCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
readonly onMouseDown?: React.MouseEventHandler<HTMLInputElement> | undefined;
readonly onMouseDownCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
readonly onMouseEnter?: React.MouseEventHandler<HTMLInputElement> | undefined;
readonly onMouseLeave?: React.MouseEventHandler<HTMLInputElement> | undefined;
readonly onMouseMove?: React.MouseEventHandler<HTMLInputElement> | undefined;
readonly onMouseMoveCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
readonly onMouseOut?: React.MouseEventHandler<HTMLInputElement> | undefined;
readonly onMouseOutCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
readonly onMouseOver?: React.MouseEventHandler<HTMLInputElement> | undefined;
readonly onMouseOverCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
readonly onMouseUp?: React.MouseEventHandler<HTMLInputElement> | undefined;
readonly onMouseUpCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
readonly onSelect?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onSelectCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
readonly onTouchCancel?: React.TouchEventHandler<HTMLInputElement> | undefined;
readonly onTouchCancelCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
readonly onTouchEnd?: React.TouchEventHandler<HTMLInputElement> | undefined;
readonly onTouchEndCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
readonly onTouchMove?: React.TouchEventHandler<HTMLInputElement> | undefined;
readonly onTouchMoveCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
readonly onTouchStart?: React.TouchEventHandler<HTMLInputElement> | undefined;
readonly onTouchStartCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
readonly onPointerDown?: React.PointerEventHandler<HTMLInputElement> | undefined;
readonly onPointerDownCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
readonly onPointerMove?: React.PointerEventHandler<HTMLInputElement> | undefined;
readonly onPointerMoveCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
readonly onPointerUp?: React.PointerEventHandler<HTMLInputElement> | undefined;
readonly onPointerUpCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
readonly onPointerCancel?: React.PointerEventHandler<HTMLInputElement> | undefined;
readonly onPointerCancelCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
readonly onPointerEnter?: React.PointerEventHandler<HTMLInputElement> | undefined;
readonly onPointerLeave?: React.PointerEventHandler<HTMLInputElement> | undefined;
readonly onPointerOver?: React.PointerEventHandler<HTMLInputElement> | undefined;
readonly onPointerOverCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
readonly onPointerOut?: React.PointerEventHandler<HTMLInputElement> | undefined;
readonly onPointerOutCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
readonly onGotPointerCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
readonly onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
readonly onLostPointerCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
readonly onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
readonly onScroll?: React.UIEventHandler<HTMLInputElement> | undefined;
readonly onScrollCapture?: React.UIEventHandler<HTMLInputElement> | undefined;
readonly onWheel?: React.WheelEventHandler<HTMLInputElement> | undefined;
readonly onWheelCapture?: React.WheelEventHandler<HTMLInputElement> | undefined;
readonly onAnimationStart?: React.AnimationEventHandler<HTMLInputElement> | undefined;
readonly onAnimationStartCapture?: React.AnimationEventHandler<HTMLInputElement> | undefined;
readonly onAnimationEnd?: React.AnimationEventHandler<HTMLInputElement> | undefined;
readonly onAnimationEndCapture?: React.AnimationEventHandler<HTMLInputElement> | undefined;
readonly onAnimationIteration?: React.AnimationEventHandler<HTMLInputElement> | undefined;
readonly onAnimationIterationCapture?: React.AnimationEventHandler<HTMLInputElement> | undefined;
readonly onToggle?: React.ToggleEventHandler<HTMLInputElement> | undefined;
readonly onBeforeToggle?: React.ToggleEventHandler<HTMLInputElement> | undefined;
readonly onTransitionCancel?: React.TransitionEventHandler<HTMLInputElement> | undefined;
readonly onTransitionCancelCapture?: React.TransitionEventHandler<HTMLInputElement> | undefined;
readonly onTransitionEnd?: React.TransitionEventHandler<HTMLInputElement> | undefined;
readonly onTransitionEndCapture?: React.TransitionEventHandler<HTMLInputElement> | undefined;
readonly onTransitionRun?: React.TransitionEventHandler<HTMLInputElement> | undefined;
readonly onTransitionRunCapture?: React.TransitionEventHandler<HTMLInputElement> | undefined;
readonly onTransitionStart?: React.TransitionEventHandler<HTMLInputElement> | undefined;
readonly onTransitionStartCapture?: React.TransitionEventHandler<HTMLInputElement> | undefined;
}];
export {};