@pmndrs/uikit/dist/components/input.d.ts

Build performant 3D user interfaces with Three.js and yoga.

import { FlexNodeState, YogaProperties } from '../flex/index.js';
import { ScrollbarProperties } from '../scroll.js';
import { WithAllAliases } from '../properties/alias.js';
import { PanelProperties } from '../panel/instanced-panel.js';
import { TransformProperties } from '../transform.js';
import { AllOptionalProperties, WithClasses, WithReactive } from '../properties/index.js';
import { ZIndexProperties } from '../order.js';
import { ReadonlySignal, Signal } from '@preact/signals-core';
import { UpdateMatrixWorldProperties, VisibilityProperties, WithConditionals } from './utils.js';
import { Listeners } from '../listeners.js';
import { ParentContext } from '../context.js';
import { PanelGroupProperties } from '../panel/instanced-panel-group.js';
import { EventHandlers, ThreeEventMap } from '../events.js';
import { Vector2Tuple, Object3D } from 'three';
import { CaretProperties, CaretTransformation } from '../caret.js';
import { SelectionTransformation, SelectionProperties } from '../selection.js';
import { WithFocus } from '../focus.js';
import { FontFamilies, InstancedText, InstancedTextProperties } from '../text/index.js';
import { PointerEventsProperties } from '../panel/index.js';
export type InheritableInputProperties = WithClasses<WithFocus<WithConditionals<WithAllAliases<WithReactive<YogaProperties & PanelProperties & ZIndexProperties & TransformProperties & ScrollbarProperties & CaretProperties & SelectionProperties & PanelGroupProperties & InstancedTextProperties & DisabledProperties & VisibilityProperties & UpdateMatrixWorldProperties & PointerEventsProperties & AutocompleteProperties>>>>>;
export type DisabledProperties = {
    disabled?: boolean;
};
export type AutocompleteProperties = {
    autocomplete?: AutoFill;
};
export declare const canvasInputProps: {
    onPointerDown: (e: {
        nativeEvent: any;
        preventDefault: () => void;
    }) => void;
};
export type InputType = 'text' | 'password';
export type InputProperties<EM extends ThreeEventMap = ThreeEventMap> = InheritableInputProperties & Listeners & {
    onValueChange?: (value: string) => void;
} & WithReactive<{
    type?: InputType;
    value?: string;
    tabIndex?: number;
    disabled?: boolean;
}> & {
    multiline?: boolean;
    defaultValue?: string;
} & EventHandlers<EM>;
export declare function createInputState<EM extends ThreeEventMap = ThreeEventMap>(parentCtx: ParentContext, fontFamilies: Signal<FontFamilies | undefined>, style: Signal<InputProperties<EM> | undefined>, properties: Signal<InputProperties<EM> | undefined>, defaultProperties: Signal<AllOptionalProperties | undefined>): {
    node: Signal<import("../internals.js").FlexNode | undefined>;
    size: Signal<Vector2Tuple | undefined>;
    relativeCenter: Signal<Vector2Tuple | undefined>;
    borderInset: Signal<import("../internals.js").Inset | undefined>;
    overflow: Signal<import("yoga-layout/load").Overflow>;
    displayed: Signal<boolean>;
    scrollable: Signal<[boolean, boolean]>;
    paddingInset: Signal<import("../internals.js").Inset | undefined>;
    maxScrollPosition: Signal<[(number | undefined)?, (number | undefined)?]>;
} & {
    multiline: boolean;
    element: HTMLTextAreaElement | HTMLInputElement;
    instancedTextRef: {
        current?: InstancedText;
    };
    interactionPanel: import("three").Mesh<import("three").PlaneGeometry, import("three").Material | import("three").Material[], import("three").Object3DEventMap> & {
        boundingSphere: import("three").Sphere;
    };
    hoveredSignal: Signal<number[]>;
    activeSignal: Signal<number[]>;
    hasFocusSignal: Signal<boolean>;
    mergedProperties: ReadonlySignal<import("../internals.js").MergedProperties>;
    transformMatrix: Signal<import("three").Matrix4 | undefined>;
    globalMatrix: Signal<import("three").Matrix4 | undefined>;
    isClipped: Signal<boolean>;
    isVisible: ReadonlySignal<boolean>;
    backgroundGroupDeps: ReadonlySignal<Required<PanelGroupProperties>>;
    backgroundOrderInfo: Signal<import("../order.js").OrderInfo | undefined>;
    orderInfo: Signal<import("../order.js").OrderInfo | undefined>;
    selectionTransformations: Signal<SelectionTransformation[]>;
    caretTransformation: Signal<CaretTransformation | undefined>;
    selectionRange: Signal<Vector2Tuple | undefined>;
    fontSignal: Signal<import("../internals.js").Font | undefined>;
    valueSignal: ReadonlySignal<string>;
    writeValue: Signal<string> | undefined;
    type: Signal<InputType>;
    displayValueSignal: ReadonlySignal<string>;
    disabled: Signal<boolean>;
    updateMatrixWorld: Signal<boolean>;
    root: import("../context.js").RootContext;
    handlers: ReadonlySignal<EventHandlers>;
    focus: (start?: number, end?: number, direction?: "forward" | "backward" | "none") => void;
    blur(): void;
};
export declare function setupInput<EM extends ThreeEventMap = ThreeEventMap>(state: ReturnType<typeof createInputState>, parentCtx: ParentContext, style: Signal<InputProperties<EM> | undefined>, properties: Signal<InputProperties<EM> | undefined>, defaultProperties: Signal<AllOptionalProperties | undefined>, object: Object3D, abortSignal: AbortSignal): void;
export declare function computedSelectionHandlers(type: Signal<InputType>, text: ReadonlySignal<string>, flexState: FlexNodeState, instancedTextRef: {
    current?: InstancedText;
}, focus: (start?: number, end?: number, direction?: 'forward' | 'backward' | 'none') => void, disabled: Signal<boolean>): ReadonlySignal<EventHandlers | undefined>;
export declare function createHtmlInputElement(selectionRange: Signal<Vector2Tuple | undefined>, onChange: (value: string) => void, multiline: boolean): HTMLTextAreaElement | HTMLInputElement;