fix: route onClick, ... event handlers through uikit so uikit is awar…

…e of them and can compute the ancestorsHaveListeners flag correctly

docs/getting-started/components-and-properties.md

@@ -529,7 +529,7 @@ All Components support [all R3F event handlers](https://docs.pmnd.rs/react-three
 
 ## Ref
 
-Each component exposes the `ComponentInternals` when using a `ref`. The component internals provide you with access to
+Each component exposes internal information when using a `ref`. For instance, the container component exposes internals of the type `ContainerRef`. The component internals provide you with access to
 
 | Property            | Explanation                                                                                                     |
 | ------------------- | --------------------------------------------------------------------------------------------------------------- |

examples/uikit/src/App.tsx

@@ -14,11 +14,10 @@ import {
   SuspendingImage,
   Input,
   FontFamilyProvider,
-  ComponentInternals,
-  ImageProperties,
   Video,
   useMeasureText,
   InputInternals,
+  ImageRef,
 } from '@react-three/uikit'
 import { Texture } from 'three'
 import { Skeleton } from '../../../packages/kits/default/src/skeleton.js'
@@ -31,7 +30,7 @@ export default function App() {
   const s = useMemo(() => signal(5), [])
   const x = useMemo(() => signal<string | undefined>('red'), [])
   const t = useMemo(() => signal('X X\nX X'), [])
-  const ref = useRef<ComponentInternals<ImageProperties>>(null)
+  const ref = useRef<ImageRef>(null)
   const [input, setInput] = useState<InputInternals | null>(null)
   const videoRef = useRef<HTMLVideoElement | undefined>()
   const [videoel, setVideoEl] = useState<HTMLVideoElement | undefined>()

examples/vanilla/index.ts

@@ -68,7 +68,7 @@ setTimeout(() => {
 const c = new Content({ flexShrink: 0, height: 100, backgroundColor: 'black' })
 const loader = new GLTFLoader()
 loader.load('example.glb', (gltf) => c.add(gltf.scene))
-const del = new Delete({ width: 100, flexShrink: 0 })
+const del = new Delete({ onClick: () => {}, width: 100, flexShrink: 0 })
 const svg = new Svg({ src: 'example.svg', width: 100, height: 100, flexShrink: 0 })
 const text = new Text('Hello World', { fontSize: 40, flexShrink: 0 })
 const a = new Container({ flexShrink: 0, alignSelf: 'stretch', flexGrow: 1, backgroundColor: 'blue' })

packages/icons/lucide/react/generate.ts

@@ -15,10 +15,10 @@ async function main() {
     const svg = raw.toString()
     const code = `
       /* eslint-disable no-shadow-restricted-names */
-      import { Icon, ComponentInternals, IconProperties } from "@react-three/uikit";
+      import { Icon, IconRef, IconProperties } from "@react-three/uikit";
       import { forwardRef } from "react"; 
       const text = \`${svg}\`;
-      export const ${name}Icon = /*@__PURE__*/ forwardRef<ComponentInternals<IconProperties>, Omit<IconProperties, "text" | "svgWidth" | "svgHeight">>((props, ref) => {
+      export const ${name}Icon = /*@__PURE__*/ forwardRef<IconRef, Omit<IconProperties, "text" | "svgWidth" | "svgHeight">>((props, ref) => {
         return <Icon {...props} ref={ref} text={text} svgWidth={24} svgHeight={24} />
       })
       export const ${name} = ${name}Icon

packages/kits/apfel/src/button.tsx

@@ -1,4 +1,4 @@
-import { ComponentInternals, Container, ContainerProperties, DefaultProperties } from '@react-three/uikit'
+import { Container, ContainerProperties, ContainerRef, DefaultProperties } from '@react-three/uikit'
 import React, { ReactNode, RefAttributes, forwardRef } from 'react'
 import { colors } from './theme.js'
 
@@ -61,7 +61,7 @@ export type ButtonProperties = ContainerProperties & {
   disabled?: boolean
 }
 
-export const Button: (props: ButtonProperties & RefAttributes<ComponentInternals>) => ReactNode = forwardRef(
+export const Button: (props: ButtonProperties & RefAttributes<ContainerRef>) => ReactNode = forwardRef(
   ({ children, size = 'md', variant = 'rect', platter, selected, disabled, ...props }, ref) => {
     const { borderRadius, fontSize, height, padding, iconSize } =
       typeof size === 'number' ? getAribtrarySize(size) : sizes[size]

packages/kits/apfel/src/card.tsx

@@ -1,10 +1,10 @@
-import { ComponentInternals, Container, ContainerProperties, DefaultProperties } from '@react-three/uikit'
+import { ContainerRef, Container, ContainerProperties, DefaultProperties } from '@react-three/uikit'
 import React, { ReactNode, RefAttributes, forwardRef } from 'react'
 import { GlassMaterial, colors } from './theme.js'
 
 export type CardProperties = ContainerProperties
 
-export const Card: (props: CardProperties & RefAttributes<ComponentInternals>) => ReactNode = forwardRef(
+export const Card: (props: CardProperties & RefAttributes<ContainerRef>) => ReactNode = forwardRef(
   ({ children, ...props }, ref) => {
     return (
       <Container

packages/kits/apfel/src/checkbox.tsx

@@ -1,4 +1,4 @@
-import { ComponentInternals, Container, ContainerProperties } from '@react-three/uikit'
+import { ContainerRef, Container, ContainerProperties } from '@react-three/uikit'
 import { Check } from '@react-three/uikit-lucide'
 import React, { ReactNode, RefAttributes, forwardRef, useState } from 'react'
 import { colors } from './theme.js'
@@ -10,7 +10,7 @@ type CheckboxProperties = ContainerProperties & {
   onSelectedChange?(value: boolean): void
 }
 
-export const Checkbox: (props: CheckboxProperties & RefAttributes<ComponentInternals>) => ReactNode = forwardRef(
+export const Checkbox: (props: CheckboxProperties & RefAttributes<ContainerRef>) => ReactNode = forwardRef(
   ({ selected, disabled = false, defaultSelected, onSelectedChange, ...props }, ref) => {
     const [internalValue, setInternalValue] = useState(defaultSelected ?? false)
     const value = selected != null ? selected : internalValue

packages/kits/apfel/src/input.tsx

@@ -7,7 +7,7 @@ import {
   Text,
   InputInternals,
   InputProperties as BaseInputProperties,
-  ComponentInternals,
+  ContainerRef,
 } from '@react-three/uikit'
 import React, { ReactNode, RefAttributes, forwardRef, useMemo, useState } from 'react'
 
@@ -16,7 +16,7 @@ export type InputProperties = BaseInputProperties & { placeholder?: string; vari
 
 //TODO: increase hitbox size (by increasing the size of the InputImpl)
 
-export const Input: (props: InputProperties & RefAttributes<ComponentInternals>) => ReactNode = forwardRef(
+export const Input: (props: InputProperties & RefAttributes<ContainerRef>) => ReactNode = forwardRef(
   (
     {
       variant = 'rect',

packages/kits/apfel/src/list.tsx

@@ -1,4 +1,4 @@
-import { ComponentInternals, Container, ContainerProperties, DefaultProperties } from '@react-three/uikit'
+import { ContainerRef, Container, ContainerProperties, DefaultProperties } from '@react-three/uikit'
 import React, { ReactNode, RefAttributes, createContext, forwardRef, useContext } from 'react'
 import { colors } from './theme.js'
 
@@ -10,7 +10,7 @@ type ListProperties = ContainerProperties & {
   type?: Type
 }
 
-export const List: (props: ListProperties & RefAttributes<ComponentInternals>) => ReactNode = forwardRef(
+export const List: (props: ListProperties & RefAttributes<ContainerRef>) => ReactNode = forwardRef(
   ({ type = 'plain', ...props }, ref) => {
     return (
       <ListContext.Provider value={type}>
@@ -29,7 +29,7 @@ export type ListItemProperties = ContainerProperties & {
   isLast?: boolean
 }
 
-export const ListItem: (props: ListItemProperties & RefAttributes<ComponentInternals>) => ReactNode = forwardRef(
+export const ListItem: (props: ListItemProperties & RefAttributes<ContainerRef>) => ReactNode = forwardRef(
   ({ children, subtitle, selected, leadingAccessory, trailingAccessory, isFirst, isLast, ...props }, ref) => {
     const type = useContext(ListContext)
 

packages/kits/apfel/src/loading.tsx

@@ -1,4 +1,4 @@
-import { ComponentInternals, Container, ContainerProperties } from '@react-three/uikit'
+import { ContainerRef, Container, ContainerProperties } from '@react-three/uikit'
 import { useFrame } from '@react-three/fiber'
 import React, { ReactNode, RefAttributes, forwardRef, useMemo } from 'react'
 import { signal } from '@preact/signals-core'
@@ -18,7 +18,7 @@ export type LoadingProperties = ContainerProperties & {
   size?: Size
 }
 
-export const Loading: (props: LoadingProperties & RefAttributes<ComponentInternals>) => ReactNode = forwardRef(
+export const Loading: (props: LoadingProperties & RefAttributes<ContainerRef>) => ReactNode = forwardRef(
   ({ size = 'md', ...props }, ref) => {
     const pillOpacities = useMemo(() => new Array(PILL_AMOUNT).fill(undefined).map(() => signal(0)), [])
 

packages/kits/apfel/src/progress.tsx

@@ -1,12 +1,12 @@
-import { ComponentInternals, Container, ContainerProperties } from '@react-three/uikit'
+import { ContainerRef, Container, ContainerProperties } from '@react-three/uikit'
 import React, { ReactNode, RefAttributes, forwardRef } from 'react'
 import { colors } from './theme.js'
 
 export type ProgressProperties = ContainerProperties & {
   value?: number
 }
 
-export const Progress: (props: ProgressProperties & RefAttributes<ComponentInternals>) => ReactNode = forwardRef(
+export const Progress: (props: ProgressProperties & RefAttributes<ContainerRef>) => ReactNode = forwardRef(
   ({ value = 0, ...props }, ref) => {
     return (
       <Container

packages/kits/apfel/src/slider.tsx

@@ -1,6 +1,6 @@
 import { ThreeEvent } from '@react-three/fiber'
 import type { EventHandlers } from '@react-three/fiber/dist/declarations/src/core/events'
-import { ComponentInternals, Container, ContainerProperties, DefaultProperties } from '@react-three/uikit'
+import { Container, ContainerProperties, ContainerRef, DefaultProperties } from '@react-three/uikit'
 import React, { ReactNode, RefAttributes, forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import { Vector3 } from 'three'
 import { clamp } from 'three/src/math/MathUtils.js'
@@ -29,7 +29,7 @@ export type SliderProperties = ContainerProperties & {
   icon?: ReactNode
 }
 
-export const Slider: (props: SliderProperties & RefAttributes<ComponentInternals>) => ReactNode = forwardRef(
+export const Slider: (props: SliderProperties & RefAttributes<ContainerRef>) => ReactNode = forwardRef(
   (
     {
       value: providedValue,
@@ -47,7 +47,7 @@ export const Slider: (props: SliderProperties & RefAttributes<ComponentInternals
   ) => {
     const [uncontrolled, setUncontrolled] = useState(defaultValue)
     const value = providedValue ?? uncontrolled ?? 50
-    const internalRef = useRef<ComponentInternals<ContainerProperties>>(null)
+    const internalRef = useRef<ContainerRef>(null)
     const onChange = useRef(onValueChange)
     onChange.current = onValueChange
     const hasProvidedValue = providedValue != null

packages/kits/apfel/src/tab-bar.tsx

@@ -1,4 +1,4 @@
-import { ComponentInternals, Container, ContainerProperties, DefaultProperties } from '@react-three/uikit'
+import { ContainerRef, Container, ContainerProperties, DefaultProperties } from '@react-three/uikit'
 import React, {
   ReactNode,
   RefAttributes,
@@ -28,7 +28,7 @@ export type TabBarProperties = ContainerProperties & {
   onValueChange?(value: string): void
 }
 
-export const TabBar: (props: TabBarProperties & RefAttributes<ComponentInternals>) => ReactNode = forwardRef(
+export const TabBar: (props: TabBarProperties & RefAttributes<ContainerRef>) => ReactNode = forwardRef(
   ({ value: valueProp, defaultValue, onValueChange, ...props }, ref) => {
     const [internalValue, setInternalValue] = useState<string | undefined>(defaultValue)
     const value = valueProp !== undefined ? valueProp : internalValue
@@ -82,7 +82,7 @@ export type TabBarItemProperties = ContainerProperties & {
   icon: ReactNode
 }
 
-export const TabBarItem: (props: TabBarItemProperties & RefAttributes<ComponentInternals>) => ReactNode = forwardRef(
+export const TabBarItem: (props: TabBarItemProperties & RefAttributes<ContainerRef>) => ReactNode = forwardRef(
   ({ value: tabValue, children, icon, ...props }, ref) => {
     const { isExpanded, value, setValue } = useContext(TabBarContext)!
     const isSelected = value === tabValue

packages/kits/apfel/src/tabs.tsx

@@ -1,4 +1,4 @@
-import { ComponentInternals, Container, ContainerProperties, DefaultProperties } from '@react-three/uikit'
+import { Container, ContainerProperties, ContainerRef, DefaultProperties } from '@react-three/uikit'
 import React, {
   ReactNode,
   RefAttributes,
@@ -26,7 +26,7 @@ export type TabsProperties = ContainerProperties & {
   disabled?: boolean
 }
 
-export const Tabs: (props: TabsProperties & RefAttributes<ComponentInternals>) => ReactNode = forwardRef(
+export const Tabs: (props: TabsProperties & RefAttributes<ContainerRef>) => ReactNode = forwardRef(
   ({ value, defaultValue, onValueChange, disabled, ...props }, ref) => {
     const [internalValue, setInternalValue] = useState<string | undefined>(defaultValue)
     const currentValue = value != null ? value : internalValue
@@ -74,7 +74,7 @@ type TabsButtonProperties = ContainerProperties & {
   disabled?: boolean
 }
 
-export const TabsButton: (props: TabsButtonProperties & RefAttributes<ComponentInternals>) => ReactNode = forwardRef(
+export const TabsButton: (props: TabsButtonProperties & RefAttributes<ContainerRef>) => ReactNode = forwardRef(
   ({ children, value, disabled, ...props }, ref) => {
     const { value: currentValue, onValueChange, disabled: tabsDisabled } = useContext(TabsContext) as TabsContext
 

packages/kits/default/src/accordion.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode, RefAttributes, createContext, forwardRef, useContext, useState } from 'react'
-import { ComponentInternals, Container, ContainerProperties, DefaultProperties } from '@react-three/uikit'
+import { ContainerRef, Container, ContainerProperties, DefaultProperties } from '@react-three/uikit'
 import { ChevronDown } from '@react-three/uikit-lucide'
 
 const AccordionContext = createContext<[string | undefined, (value: string | undefined) => void]>(null as any)
@@ -18,8 +18,8 @@ const AccordionItemContext = createContext<string>('')
 
 export type AccordionItemProperties = ContainerProperties & { value: string }
 
-export const AccordionItem: (props: RefAttributes<ComponentInternals> & AccordionItemProperties) => ReactNode =
-  forwardRef(({ children, ...props }, ref) => {
+export const AccordionItem: (props: RefAttributes<ContainerRef> & AccordionItemProperties) => ReactNode = forwardRef(
+  ({ children, ...props }, ref) => {
     const [value, setValue] = useContext(AccordionContext)
     const isSelected = props.value === value
     return (
@@ -34,11 +34,12 @@ export const AccordionItem: (props: RefAttributes<ComponentInternals> & Accordio
         <AccordionItemContext.Provider value={props.value}>{children}</AccordionItemContext.Provider>
       </Container>
     )
-  })
+  },
+)
 
 export type AccordionTriggerProperties = ContainerProperties
 
-export const AccordionTrigger: (props: RefAttributes<ComponentInternals> & AccordionTriggerProperties) => ReactNode =
+export const AccordionTrigger: (props: RefAttributes<ContainerRef> & AccordionTriggerProperties) => ReactNode =
   forwardRef(({ children, ...props }, ref) => {
     const itemValue = useContext(AccordionItemContext)
     const [value] = useContext(AccordionContext)
@@ -62,7 +63,7 @@ export const AccordionTrigger: (props: RefAttributes<ComponentInternals> & Accor
 
 export type AccordionContentProperties = ContainerProperties
 
-export const AccordionContent: (props: RefAttributes<ComponentInternals> & AccordionContentProperties) => ReactNode =
+export const AccordionContent: (props: RefAttributes<ContainerRef> & AccordionContentProperties) => ReactNode =
   forwardRef(({ children, ...props }, ref) => {
     const itemValue = useContext(AccordionItemContext)
     const [value] = useContext(AccordionContext)