@react-three/uikit/dist/custom.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 { ParentProvider, useParent } from './context.js';
import { AddHandlers, usePropertySignals } from './utils.js';
import { createCustomContainerState, panelGeometry, setupCustomContainer, } from '@pmndrs/uikit/internals';
import { useComponentInternals } from './ref.js';
export const CustomContainer = forwardRef((properties, ref) => {
    const parent = useParent();
    const outerRef = useRef(null);
    const innerRef = useRef(null);
    const propertySignals = usePropertySignals(properties);
    const internals = useMemo(() => createCustomContainerState(parent, propertySignals.style, propertySignals.properties, propertySignals.default), [parent, propertySignals]);
    useEffect(() => {
        if (outerRef.current == null || innerRef.current == null) {
            return;
        }
        const abortController = new AbortController();
        setupCustomContainer(internals, parent, propertySignals.style, propertySignals.properties, outerRef.current, innerRef.current, abortController.signal);
        return () => abortController.abort();
    }, [internals, parent, propertySignals]);
    useComponentInternals(ref, parent.root, propertySignals.style, internals, innerRef);
    useEffect(() => {
        if (innerRef.current == null) {
            return;
        }
        innerRef.current.name = properties.name ?? '';
    }, [properties.name]);
    return (_jsx(AddHandlers, { handlers: internals.handlers, ref: outerRef, children: _jsx(ParentProvider, { value: undefined, children: _jsx("mesh", { ref: innerRef, matrixAutoUpdate: false, geometry: panelGeometry, customDepthMaterial: properties.customDepthMaterial, customDistanceMaterial: properties.customDistanceMaterial, children: properties.children }) }) }));
});