Revert "Fix popover behavior when open and clicking on trigger"

This reverts commit 935ac36467.

theatre/studio/src/panels/DetailPanel/ProjectDetails.tsx

@@ -55,7 +55,7 @@ const ProjectDetails: React.FC<{
     }, 40000)
   }, [])
 
-  const {node: tooltip, open: openExportTooltip} = usePopover(
+  const [tooltip, openExportTooltip] = usePopover(
     {debugName: 'ProjectDetails', pointerDistanceThreshold: 50},
     () => (
       <ExportTooltip>

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeConnector.tsx

@@ -55,11 +55,7 @@ export const AggregateKeyframeConnector: React.VFC<IAggregateKeyframeConnectorPr
     const [contextMenu] = useConnectorContextMenu(props, node)
     const [isDragging] = useDragKeyframe(node, props.editorProps)
 
-    const {
+    const [popoverNode, openPopover, closePopover] = usePopover(
-      node: popoverNode,
-      toggle: togglePopover,
-      close: closePopover,
-    } = usePopover(
       () => {
         const rightDims = val(editorProps.layoutP.rightDims)
 
@@ -93,7 +89,7 @@ export const AggregateKeyframeConnector: React.VFC<IAggregateKeyframeConnectorPr
           isSelected={connected ? connected.selected : false}
           isPopoverOpen={isAggregateEditingInCurvePopover}
           openPopover={(e) => {
-            if (node) togglePopover(e, node)
+            if (node) openPopover(e, node)
           }}
         />
         {popoverNode}

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/BasicKeyframeConnector.tsx

@@ -41,11 +41,7 @@ const BasicKeyframeConnector: React.VFC<IBasicKeyframeConnectorProps> = (
 
   const [nodeRef, node] = useRefAndState<HTMLDivElement | null>(null)
 
-  const {
+  const [popoverNode, openPopover, closePopover, isPopoverOpen] = usePopover(
-    node: popoverNode,
-    toggle: togglePopover,
-    close: closePopover,
-  } = usePopover(
     () => {
       const rightDims = val(props.layoutP.rightDims)
       return {
@@ -87,7 +83,7 @@ const BasicKeyframeConnector: React.VFC<IBasicKeyframeConnectorProps> = (
         connectorLengthInUnitSpace={connectorLengthInUnitSpace}
         {...themeValues}
         openPopover={(e) => {
-          if (node) togglePopover(e, node)
+          if (node) openPopover(e, node)
         }}
       >
         {popoverNode}

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx

@@ -94,14 +94,11 @@ const SingleKeyframeDot: React.VFC<ISingleKeyframeDotProps> = (props) => {
   const [ref, node] = useRefAndState<HTMLDivElement | null>(null)
 
   const [contextMenu] = useSingleKeyframeContextMenu(node, logger, props)
-  const {
+  const [inlineEditorPopover, openEditor, _, isInlineEditorPopoverOpen] =
-    node: inlineEditorPopover,
+    useSingleKeyframeInlineEditorPopover(props)
-    toggle: toggleEditor,
-    isOpen: isInlineEditorPopoverOpen,
-  } = useSingleKeyframeInlineEditorPopover(props)
   const [isDragging] = useDragForSingleKeyframeDot(node, props, {
     onClickFromDrag(dragStartEvent) {
-      toggleEditor(dragStartEvent, ref.current!)
+      openEditor(dragStartEvent, ref.current!)
     },
   })
 
@@ -230,8 +227,6 @@ function useDragForSingleKeyframeDot(
   const propsRef = useRef(props)
   propsRef.current = props
 
-  const {onClickFromDrag} = options
-
   const useDragOpts = useMemo<UseDragOpts>(() => {
     return {
       debugName: 'KeyframeDot/useDragKeyframe',
@@ -287,7 +282,7 @@ function useDragForSingleKeyframeDot(
           return (
             handlers && {
               ...handlers,
-              onClick: onClickFromDrag,
+              onClick: options.onClickFromDrag,
               onDragEnd: (...args) => {
                 handlers.onDragEnd?.(...args)
                 snapToNone()
@@ -343,12 +338,12 @@ function useDragForSingleKeyframeDot(
             snapToNone()
           },
           onClick(ev) {
-            onClickFromDrag(ev)
+            options.onClickFromDrag(ev)
           },
         }
       },
     }
-  }, [onClickFromDrag])
+  }, [])
 
   const [isDragging] = useDrag(node, useDragOpts)
 

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthEditorPopover.tsx

@@ -32,7 +32,7 @@ const LengthEditorPopover: React.FC<{
    * Called when user hits enter/escape
    */
   onRequestClose: (reason: string) => void
-}> = ({layoutP}) => {
+}> = ({layoutP, onRequestClose}) => {
   const sheet = useVal(layoutP.sheet)
 
   const fns = useMemo(() => {
@@ -89,6 +89,7 @@ const LengthEditorPopover: React.FC<{
           {...fns}
           isValid={greaterThanZero}
           inputRef={inputRef}
+          onBlur={onRequestClose.bind(null, 'length editor number input blur')}
           nudge={nudge}
         />
       </Container>

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

@@ -138,17 +138,19 @@ const RENDER_OUT_OF_VIEW_X = -10000
 const LengthIndicator: React.FC<IProps> = ({layoutP}) => {
   const [nodeRef, node] = useRefAndState<HTMLDivElement | null>(null)
   const [isDragging] = useDragBulge(node, {layoutP})
-  const {
+  const [popoverNode, openPopover, closePopover, isPopoverOpen] = usePopover(
-    node: popoverNode,
+    {debugName: 'LengthIndicator'},
-    toggle: togglePopover,
+    () => {
-    close: closePopover,
+      return (
-  } = usePopover({debugName: 'LengthIndicator'}, () => {
+        <BasicPopover>
-    return (
+          <LengthEditorPopover
-      <BasicPopover>
+            layoutP={layoutP}
-        <LengthEditorPopover layoutP={layoutP} onRequestClose={closePopover} />
+            onRequestClose={closePopover}
-      </BasicPopover>
+          />
-    )
+        </BasicPopover>
-  })
+      )
+    },
+  )
 
   return usePrism(() => {
     const sheet = val(layoutP.sheet)
@@ -189,7 +191,7 @@ const LengthIndicator: React.FC<IProps> = ({layoutP}) => {
               ref={nodeRef}
               // title="Length of the sequence. Drag or click to change."
               onClick={(e) => {
-                togglePopover(e, node!)
+                openPopover(e, node!)
               }}
               {...includeLockFrameStampAttrs('hide')}
             >

theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx

@@ -193,20 +193,19 @@ const Playhead: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
 }) => {
   const [thumbRef, thumbNode] = useRefAndState<HTMLElement | null>(null)
 
-  const {
+  const [popoverNode, openPopover, closePopover, isPopoverOpen] = usePopover(
-    node: popoverNode,
+    {debugName: 'Playhead'},
-    toggle: togglePopover,
+    () => {
-    close: closePopover,
+      return (
-  } = usePopover({debugName: 'Playhead'}, () => {
+        <BasicPopover>
-    return (
+          <PlayheadPositionPopover
-      <BasicPopover>
+            layoutP={layoutP}
-        <PlayheadPositionPopover
+            onRequestClose={closePopover}
-          layoutP={layoutP}
+          />
-          onRequestClose={closePopover}
+        </BasicPopover>
-        />
+      )
-      </BasicPopover>
+    },
-    )
+  )
-  })
 
   const gestureHandlers = useMemo((): Parameters<typeof useDrag>[1] => {
     return {
@@ -237,7 +236,7 @@ const Playhead: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
             snapToNone()
           },
           onClick(e) {
-            togglePopover(e, thumbRef.current!)
+            openPopover(e, thumbRef.current!)
           },
         }
       },

theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/PlayheadPositionPopover.tsx

@@ -33,7 +33,7 @@ const PlayheadPositionPopover: React.FC<{
    * Called when user hits enter/escape
    */
   onRequestClose: (reason: string) => void
-}> = ({layoutP}) => {
+}> = ({layoutP, onRequestClose}) => {
   const sheet = val(layoutP.sheet)
   const sequence = sheet.getSequence()
 
@@ -80,6 +80,7 @@ const PlayheadPositionPopover: React.FC<{
           {...fns}
           isValid={greaterThanZero}
           inputRef={inputRef}
+          onBlur={onRequestClose.bind(null, 'number input blur')}
           nudge={nudge}
         />
       </Container>

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

@@ -74,7 +74,7 @@ function RgbaPropEditor({
     [editingTools],
   )
 
-  const {node: popoverNode, toggle: togglePopover} = usePopover(
+  const [popoverNode, openPopover] = usePopover(
     {debugName: 'RgbaPropEditor'},
     () => (
       <RgbaPopover>
@@ -107,7 +107,7 @@ function RgbaPropEditor({
           rgbaColor={value}
           ref={containerRef}
           onClick={(e) => {
-            togglePopover(e, containerRef.current)
+            openPopover(e, containerRef.current)
           }}
         />
         <HexInput

theatre/studio/src/toolbars/GlobalToolbar.tsx

@@ -88,7 +88,7 @@ const GlobalToolbar: React.FC = () => {
   const hasUpdates =
     useVal(getStudio().atomP.ahistoric.updateChecker.result.hasUpdates) === true
 
-  const {node: moreMenu, toggle: toggleMenu} = usePopover(
+  const [moreMenu, openMoreMenu] = usePopover(
     () => {
       const triggerBounds = moreMenuTriggerRef.current!.getBoundingClientRect()
       return {
@@ -138,7 +138,7 @@ const GlobalToolbar: React.FC = () => {
         <ToolbarIconButton
           ref={moreMenuTriggerRef}
           onClick={(e) => {
-            toggleMenu(e, moreMenuTriggerRef.current!)
+            openMoreMenu(e, moreMenuTriggerRef.current!)
           }}
         >
           <Ellipsis />

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

@@ -138,10 +138,7 @@ const TooltipWrapper: React.FC<{
     props.onPointerOutside,
   ])
 
-  useOnClickOutside(
+  useOnClickOutside(container, props.onClickOutside ?? noop)
-    [container, props.target ?? null],
-    props.onClickOutside ?? noop,
-  )
 
   return (
     <ArrowContext.Provider value={arrowContextValue}>

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

@@ -51,13 +51,7 @@ type Opts = {
 export default function usePopover(
   opts: Opts | (() => Opts),
   render: () => React.ReactElement,
-): {
+): [node: React.ReactNode, open: OpenFn, close: CloseFn, isOpen: boolean] {
-  node: React.ReactNode
-  open: OpenFn
-  close: CloseFn
-  toggle: OpenFn
-  isOpen: boolean
-} {
   const _debug = (...args: any) => {}
 
   // want to make sure that we don't close a popover when dragging something (like a curve editor handle)
@@ -110,14 +104,6 @@ export default function usePopover(
     }
   }, [])
 
-  const toggle = useCallback<OpenFn>((...args) => {
-    if (stateRef.current.isOpen) {
-      close('toggled')
-    } else {
-      open(...args)
-    }
-  }, [])
-
   /**
    * See doc comment on {@link useAutoCloseLockState}.
    * Used to ensure that moving far away from a parent popover doesn't
@@ -160,7 +146,7 @@ export default function usePopover(
     <></>
   )
 
-  return {node, open, close, toggle, isOpen: state.isOpen}
+  return [node, open, close, state.isOpen]
 }
 
 /**

theatre/studio/src/uiComponents/useOnClickOutside.ts

@@ -2,24 +2,15 @@ import type {$IntentionalAny} from '@theatre/shared/utils/types'
 import {useEffect} from 'react'
 
 export default function useOnClickOutside(
-  container: Element | null | (Element | null)[],
+  container: Element | null,
   onOutside: (e: MouseEvent) => void,
   enabled?: boolean,
-  // Can be used e.g. to prevent unexpected closing-reopening when clicking on a
-  // popover's trigger.
 ) {
   useEffect(() => {
     if (!container || enabled === false) return
 
-    const containers = Array.isArray(container)
-      ? (container.filter((container) => container) as Element[])
-      : [container]
-
     const onMouseDown = (e: MouseEvent) => {
-      if (
+      if (!e.composedPath().includes(container)) {
-        containers.every((container) => !e.composedPath().includes(container))
-      ) {
-        console.log('outside')
         onOutside(e)
       }
     }