Fix a bunch of react18 type errors

packages/playground/src/shared/image/index.tsx

@@ -5,7 +5,7 @@
 import {getProject, types} from '@theatre/core'
 import studio from '@theatre/studio'
 import React, {useEffect, useState} from 'react'
-import {render} from 'react-dom/client'
+import ReactDom from 'react-dom/client'
 import styled from 'styled-components'
 
 const project = getProject('Image type playground', {
@@ -66,7 +66,9 @@ const ImageTypeExample: React.FC<{}> = (props) => {
 
 project.ready
   .then(() => {
-    render(<ImageTypeExample />, document.getElementById('root'))
+    ReactDom.createRoot(document.getElementById('root')!).render(
+      <ImageTypeExample />,
+    )
   })
   .catch((err) => {
     console.error(err)

packages/playground/src/shared/theatric/index.tsx

@@ -1,5 +1,5 @@
 import {button, initialize, types, useControls} from 'theatric'
-import {render} from 'react-dom/client'
+import ReactDom from 'react-dom/client'
 import React, {useState} from 'react'
 import state from './state.json'
 
@@ -79,4 +79,4 @@ function App() {
   )
 }
 
-render(<App />, document.getElementById('root'))
+ReactDom.createRoot(document.getElementById('root')!).render(<App />)

packages/playground/src/shared/turtle/index.tsx

@@ -3,7 +3,7 @@
  * can be tweaked and animated.
  */
 import React, {useMemo, useState} from 'react'
-import {render} from 'react-dom/client'
+import ReactDom from 'react-dom/client'
 import {getProject} from '@theatre/core'
 import type {ITurtle} from './turtle'
 import TurtleRenderer from './TurtleRenderer'
@@ -52,4 +52,4 @@ const TurtleExample: React.FC<{}> = (props) => {
   )
 }
 
-render(<TurtleExample />, document.getElementById('root'))
+ReactDom.createRoot(document.getElementById('root')!).render(<TurtleExample />)

packages/r3f/src/extension/components/OrbitControls/index.tsx

@@ -65,7 +65,7 @@ export const OrbitControls = forwardRef<OrbitControlsImpl, OrbitControlsProps>(
         if (onChange) onChange(e)
       }
 
-      controls.connect(explDomElement)
+      controls.connect(explDomElement!)
       controls.addEventListener('change', callback)
 
       if (onStart) controls.addEventListener('start', onStart)

theatre/studio/src/UIRoot/PointerCapturing.tsx

@@ -100,9 +100,9 @@ const PointerCapturingContext = React.createContext<PointerCapturingFn>(
   null as $IntentionalAny,
 )
 
-const ProviderChildrenMemo: React.FC<{}> = React.memo(({children}) => (
-  <>{children}</>
-))
+const ProviderChildrenMemo: React.FC<{children?: React.ReactNode}> = React.memo(
+  ({children}) => <>{children}</>,
+)
 
 /**
  * See {@link PointerCapturing}.

theatre/studio/src/UIRoot/ProvideTheme.tsx

@@ -5,7 +5,7 @@ const Container = styled.div`
   --colors-panel-1: red;
 `
 
-const ProvideTheme: React.FC<{}> = (props) => {
+const ProvideTheme: React.FC<{children?: React.ReactNode}> = (props) => {
   return <Container>{props.children}</Container>
 }
 

theatre/studio/src/css.tsx

@@ -81,9 +81,10 @@ export const PortalLayer = styled.div`
   pointer-events: none;
 `
 
-export const ProvideStyles: React.FC<{target: undefined | HTMLElement}> = (
-  props,
-) => {
+export const ProvideStyles: React.FC<{
+  target: undefined | HTMLElement
+  children: React.ReactNode
+}> = (props) => {
   return (
     <StyleSheetManager disableVendorPrefixes target={props.target}>
       <>
@@ -104,7 +105,9 @@ export function withStyledShadow<Props>(
   )
 }
 
-const ProvideStyledShadow: React.FC<{}> = (props) => {
+const ProvideStyledShadow: React.FC<{
+  children: React.ReactNode
+}> = (props) => {
   const [template, ref] = useState<null | HTMLTemplateElement>(null)
   const [shadowRoot, setShadowRoot] = useState<null | ShadowRoot>(null)
 

theatre/studio/src/panels/BasePanel/BasePanel.tsx

@@ -68,6 +68,7 @@ const BasePanel: React.FC<{
   panelId: UIPanelId
   defaultPosition: PanelPosition
   minDims: {width: number; height: number}
+  children: React.ReactNode
 }> = ({panelId, children, defaultPosition, minDims}) => {
   const windowSize = useWindowSize(800, 200)
   const [boundsHighlighted, addBoundsHighlightLock] = useLockSet()

theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx

@@ -27,8 +27,6 @@ const minDims = {width: 300, height: 300}
 const ExtensionPaneWrapper: React.FC<{
   paneInstance: PaneInstance<$FixMe>
 }> = ({paneInstance}) => {
-  console.log(paneInstance)
-
   return (
     <BasePanel
       panelId={`pane-${paneInstance.instanceId}` as UIPanelId}

theatre/studio/src/panels/OutlinePanel/BaseItem.tsx

@@ -138,6 +138,7 @@ const BaseItem: React.FC<{
   depth: number
   selectionStatus: SelectionStatus
   labelDecoration?: React.ReactNode
+  children?: React.ReactNode | undefined
   collapsed?: boolean
   setIsCollapsed?: (v: boolean) => void
 }> = ({

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx

@@ -87,6 +87,7 @@ const AnyCompositeRow: React.FC<{
   isSelected?: boolean
   isSelectable?: boolean
   isCollapsed: boolean
+  children?: React.ReactNode
 }> = ({
   leaf,
   label,

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetSelectionView.tsx

@@ -35,6 +35,7 @@ const Container = styled.div<{isShiftDown: boolean}>`
 const DopeSheetSelectionView: React.FC<{
   layoutP: Pointer<SequenceEditorPanelLayout>
   height: number
+  children: React.ReactNode
 }> = ({layoutP, children, height}) => {
   const [containerRef, containerNode] = useRefAndState<HTMLDivElement | null>(
     null,

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.tsx

@@ -34,6 +34,7 @@ const Container = styled.div`
 const HorizontallyScrollableArea: React.FC<{
   layoutP: Pointer<SequenceEditorPanelLayout>
   height: number
+  children: React.ReactNode
 }> = React.memo(({layoutP, children, height}) => {
   const {width, unitSpaceToScaledSpaceMultiplier} = usePrism(
     () => ({

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/Row.tsx

@@ -51,6 +51,7 @@ const RightRow: React.FC<{
   leaf: SequenceEditorTree_Row<string>
   node: React.ReactElement
   isCollapsed: boolean
+  children?: React.ReactNode | undefined
 }> = ({leaf, children, node, isCollapsed}) => {
   const hasChildren = Array.isArray(children) && children.length > 0
 

theatre/studio/src/panels/SequenceEditorPanel/FrameStampPositionProvider.tsx

@@ -48,6 +48,7 @@ let lastLockId = 0
  */
 const FrameStampPositionProvider: React.FC<{
   layoutP: Pointer<SequenceEditorPanelLayout>
+  children: React.ReactNode
 }> = ({children, layoutP}) => {
   const locksAtom = useMemo(() => new Atom<LockItem[]>([]), [])
   const currentD = useMemo(

theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx

@@ -38,7 +38,9 @@ export const useReceiveVerticalWheelEvent = (): ReceiveVerticalWheelEventFn =>
  * the code that traps the wheel events to pass them to the vertical scroller root, which
  * we then use to manually dispatch scroll events.
  */
-const VerticalScrollContainer: React.FC<{}> = (props) => {
+const VerticalScrollContainer: React.FC<{
+  children: React.ReactNode
+}> = (props) => {
   const ref = useRef<HTMLDivElement | null>(null)
   const receiveVerticalWheelEvent = useCallback<ReceiveVerticalWheelEventFn>(
     (event) => {

theatre/studio/src/propEditors/simpleEditors/ImagePropEditor.tsx

@@ -1,4 +1,5 @@
 import type {PropTypeConfig_Image} from '@theatre/core/propTypes'
+import type {$FixMe} from '@theatre/shared/utils/types'
 import {Trash} from '@theatre/studio/uiComponents/icons'
 import React, {useCallback, useEffect} from 'react'
 import styled, {css} from 'styled-components'
@@ -114,7 +115,7 @@ function ImagePropEditor({
   }, [value])
 
   const onChange = useCallback(
-    async (event) => {
+    async (event: React.ChangeEvent<$FixMe>) => {
       const file = event.target.files[0]
       editingTools.permanentlySetValue({type: 'image', id: undefined})
       const imageId = await editingTools.createAsset(file)

theatre/studio/src/toolbars/GlobalToolbar.tsx

@@ -98,7 +98,9 @@ const GlobalToolbar: React.FC = () => {
             : `There are ${conflicts.length} projects that have state conflicts. They are highlighted in the outline below. `}
         </ErrorTooltip>
       ) : (
-        <BasicTooltip>Outline</BasicTooltip>
+        <BasicTooltip>
+          <>Outline</>
+        </BasicTooltip>
       ),
   )
 

theatre/studio/src/uiComponents/PointerEventsHandler.tsx

@@ -48,6 +48,7 @@ const context = createContext<Context>({} as $IntentionalAny)
 
 const PointerEventsHandler: React.FC<{
   className?: string
+  children?: React.ReactNode
 }> = (props) => {
   const [locks, setLocks] = useState<Lock[]>([])
   const contextValue = useMemo<Context>(() => {

theatre/studio/src/uiComponents/Popover/BasicPopover.tsx

@@ -34,6 +34,7 @@ const Container = styled.div`
 const BasicPopover: React.FC<{
   className?: string
   showPopoverEdgeTriangle?: boolean
+  children: React.ReactNode
 }> = React.forwardRef(
   (
     {

theatre/studio/src/uiComponents/Popover/TooltipContext.tsx

@@ -1,4 +1,4 @@
-import type { Prism} from '@theatre/dataverse';
+import type {Prism} from '@theatre/dataverse'
 import {Atom} from '@theatre/dataverse'
 import useRefAndState from '@theatre/studio/utils/useRefAndState'
 import React, {
@@ -39,7 +39,7 @@ export const useTooltipOpenState = (): [
   return [isOpen, setIsOpen]
 }
 
-const TooltipContext: React.FC<{}> = ({children}) => {
+const TooltipContext: React.FC<{children: React.ReactNode}> = ({children}) => {
   const currentTooltipId = useMemo(() => new Atom(-1), [])
   const cur = currentTooltipId.prism
 

theatre/studio/src/uiComponents/colorPicker/components/EditingProvider.tsx

@@ -11,7 +11,9 @@ const editingContext = createContext<{
  * stateful and disregard controlling props, while not editing, it should behave
  * in a controlled manner.
  */
-export const EditingProvider: FC = ({children}) => {
+export const EditingProvider: FC<{children: React.ReactNode}> = ({
+  children,
+}) => {
   const [editing, setEditing] = useState(false)
 
   return (

theatre/studio/src/uiComponents/selects/BasicSelect.tsx

@@ -38,7 +38,9 @@ const BasicSelect: React.FC<{
 
   return (
     <Container>
-      <Label>{props.label}</Label>
+      <Label>
+        <>{props.label}</>
+      </Label>
       <SelectedValueLabel>
         {selectedLabel}
         {/* <select

theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx

@@ -46,7 +46,9 @@ const Item: React.FC<{
       enabled={props.enabled}
       title={props.enabled ? undefined : 'Disabled'}
     >
-      <ItemLabel>{props.label}</ItemLabel>
+      <ItemLabel>
+        <>{props.label}</>
+      </ItemLabel>
     </ItemContainer>
   )
 }