Removed more unused code from r3f

packages/plugin-r3f/src/components/Editor.tsx

@@ -11,8 +11,6 @@ import UI from './UI'
 import ProxyManager from './ProxyManager'
 import studio from '@theatre/studio'
 import {useVal} from '@theatre/dataverse-react'
-import {IdProvider} from './elements/IdProvider'
-import PortalManager from './elements/PortalManager'
 
 const EditorScene = () => {
   const orbitControlsRef = useRef<typeof OrbitControls>()
@@ -69,8 +67,8 @@ const Editor: VFC = () => {
   return (
     <root.div>
       <div id="react-three-editable-editor-root">
-        <PortalManager>
+        <>
-          <IdProvider>
+          <>
             <div className="relative z-50">
               <div
                 className={`fixed ${editorOpen ? 'block' : 'hidden'} inset-0`}
@@ -102,8 +100,8 @@ const Editor: VFC = () => {
             </div>
 
             <style type="text/css">{styles}</style>
-          </IdProvider>
+          </>
-        </PortalManager>
+        </>
       </div>
     </root.div>
   )

packages/plugin-r3f/src/components/elements/CompactModeSelect.tsx

@@ -1,10 +1,8 @@
-import type {ReactElement, ReactNode, VFC} from 'react'
+import type {ReactElement, ReactNode} from 'react'
 import React from 'react'
 import type {IconType} from 'react-icons'
 import {Group, Button} from 'reakit'
 import {Tooltip, TooltipReference, useTooltipState} from './Tooltip'
-import {usePopoverState, PopoverDisclosure, Popover} from './Popover'
-import {FiChevronDown} from 'react-icons/all'
 
 interface OptionButtonProps<Option> {
   value: Option
@@ -42,44 +40,7 @@ function OptionButton<Option>({
   )
 }
 
-interface SettingsProps {
+interface CompactModeSelectProps<Option> {
-  children: ReactNode
-}
-
-const Settings: VFC<SettingsProps> = ({children}) => {
-  const tooltip = useTooltipState()
-  const popover = usePopoverState()
-
-  return (
-    <>
-      <TooltipReference
-        {...tooltip}
-        as={'div'}
-        tabIndex={-1}
-        className="focus:outline-none"
-      >
-        <PopoverDisclosure
-          // @ts-ignore
-          {...popover}
-          className={`flex relative items-center justify-center align-middle w-auto text-sm font-semibold h-7 px-1 rounded-r bg-gray-800 text-white hover:bg-gray-900 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-inset`}
-        >
-          <FiChevronDown />
-        </PopoverDisclosure>
-      </TooltipReference>
-      <Tooltip {...tooltip}>Settings</Tooltip>
-      <Popover
-        {...popover}
-        // this seems to be necessary to prevent the popup from forever being closed after the first opening
-        hideOnClickOutside={false}
-        aria-label="More options"
-      >
-        {children}
-      </Popover>
-    </>
-  )
-}
-
-export interface CompactModeSelectProps<Option> {
   value: Option
   onChange: (value: Option) => void
   options: {
@@ -94,7 +55,6 @@ const CompactModeSelect = <Option extends string | number>({
   value,
   onChange,
   options,
-  settingsPanel,
 }: CompactModeSelectProps<Option>) => {
   return (
     <Group
@@ -111,7 +71,6 @@ const CompactModeSelect = <Option extends string | number>({
           onClick={() => onChange(option)}
         />
       ))}
-      {settingsPanel && <Settings>{settingsPanel}</Settings>}
     </Group>
   )
 }

packages/plugin-r3f/src/components/elements/FormControl.tsx

@@ -1,22 +0,0 @@
-import type {ReactNode, VFC} from 'react'
-import React, {createContext, useContext} from 'react'
-import {useId} from './IdProvider'
-
-const FormControlContext = createContext<string | undefined>(undefined)
-
-interface FormControlProps {
-  id?: string
-  children: ReactNode
-}
-
-export const FormControl: VFC<FormControlProps> = ({children, ...props}) => {
-  const {id} = useId(props)
-
-  return (
-    <FormControlContext.Provider value={id}>
-      {children}
-    </FormControlContext.Provider>
-  )
-}
-
-export const useFormControlContext = () => useContext(FormControlContext)

packages/plugin-r3f/src/components/elements/IdProvider.ts

@@ -1,6 +0,0 @@
-export {
-  unstable_IdProvider as IdProvider,
-  unstable_useId as useId,
-} from 'reakit'
-
-export type {unstable_IdProviderProps as IdProviderProps} from 'reakit'

packages/plugin-r3f/src/components/elements/Popover.tsx

@@ -1,29 +0,0 @@
-import type {VFC} from 'react'
-import React from 'react'
-
-import {
-  usePopoverState,
-  Popover as PopoverImpl,
-  PopoverDisclosure,
-} from 'reakit'
-
-import type {PopoverProps} from 'reakit'
-
-export type {PopoverProps}
-
-export {PopoverDisclosure, usePopoverState}
-
-export const Popover: VFC<PopoverProps> = ({className, children, ...props}) => {
-  return (
-    <>
-      <PopoverImpl
-        // @ts-ignore
-        {...props}
-        className="flex p-4 w-80 rounded overflow-hidden shadow-2xl focus:outline-none bg-white"
-      >
-        {/* it seems that rendering Canvas in a display: none element permanently breaks its sizing, so we don't */}
-        {props.visible && children}
-      </PopoverImpl>
-    </>
-  )
-}

packages/plugin-r3f/src/components/elements/PortalManager.tsx

@@ -1,26 +0,0 @@
-import type {ReactNode} from 'react'
-import React, {useLayoutEffect, useState} from 'react'
-import {PortalContext} from 'reakit'
-
-export interface PortalManagerProps {
-  children: ReactNode
-}
-
-const PortalManager: React.VFC<PortalManagerProps> = ({children}) => {
-  const wrapperRef = React.useRef<HTMLDivElement>(null)
-
-  // force update on initial render
-  const [, forceUpdate] = useState(false)
-  useLayoutEffect(() => {
-    forceUpdate((i) => !i)
-  }, [])
-
-  return (
-    <PortalContext.Provider value={wrapperRef.current}>
-      {children}
-      <div ref={wrapperRef} className="relative z-50" />
-    </PortalContext.Provider>
-  )
-}
-
-export default PortalManager

packages/plugin-r3f/src/components/elements/Tooltip.tsx

@@ -2,9 +2,7 @@ import type {VFC} from 'react'
 import React from 'react'
 import {Tooltip as TooltipImpl, TooltipReference, useTooltipState} from 'reakit'
 
-import type {TooltipProps, TooltipReferenceProps} from 'reakit'
+import type {TooltipProps} from 'reakit'
-
-export type {TooltipProps, TooltipReferenceProps}
 
 export {TooltipReference, useTooltipState}