@react-three/uikit/dist/input.js

Build performant 3D user interfaces with react-three-fiber and yoga.

import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useEffect, useMemo, useRef } from 'react';
import { useParent } from './context.js';
import { AddHandlers, usePropertySignals } from './utils.js';
import { setupInput, createInputState, } from '@pmndrs/uikit/internals';
import { useComponentInternals } from './ref.js';
import { signal } from '@preact/signals-core';
import { useFontFamilies } from './font.js';
export const Input = forwardRef((properties, ref) => {
    const parent = useParent();
    const outerRef = useRef(null);
    const propertySignals = usePropertySignals(properties);
    const fontFamilies = useMemo(() => signal(undefined), []);
    fontFamilies.value = useFontFamilies();
    //allows to not get a eslint error because of dependencies (we deliberatly never update this ref)
    const internals = useMemo(() => createInputState(parent, fontFamilies, propertySignals.style, propertySignals.properties, propertySignals.default), 
    // eslint-disable-next-line react-hooks/exhaustive-deps
    []);
    internals.interactionPanel.name = properties.name ?? '';
    useEffect(() => {
        if (outerRef.current == null) {
            return;
        }
        const abortController = new AbortController();
        setupInput(internals, parent, propertySignals.style, propertySignals.properties, propertySignals.default, outerRef.current, abortController.signal);
        return () => abortController.abort();
    }, [parent, propertySignals, internals]);
    useComponentInternals(ref, parent.root, propertySignals.style, internals, internals.interactionPanel, useMemo(() => ({
        focus: internals.focus,
        blur: internals.blur,
        current: internals.valueSignal,
        element: internals.element,
        selectionRange: internals.selectionRange,
        caretTransformation: internals.caretTransformation,
        selectionTransformations: internals.selectionTransformations,
    }), [
        internals.focus,
        internals.blur,
        internals.valueSignal,
        internals.element,
        internals.caretTransformation,
        internals.selectionRange,
        internals.selectionTransformations,
    ]));
    return (_jsx(AddHandlers, { handlers: internals.handlers, ref: outerRef, children: _jsx("primitive", { object: internals.interactionPanel }) }));
});