use local state for transitions

This now relies on local state for transitions so that when the local state changes, the current component can re-render on its own already. Relying on state from the parent via context, requires the full component to re-render first which is not efficient enough for this case. We still need that more global state for cases where we want to reference an element in another component (e.g.: reference the panel id in a button's aria-controls attribute)
tailwindlabs · Sep 3, 2024 · c5c0682 · c5c0682
1 parent 7d923a7
commit c5c0682
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 17 deletions.
diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -1672,14 +1672,20 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
   }
 
   let [floatingRef, style] = useFloatingPanel(anchor)
+  let [localOptionsElement, setLocalOptionsElement] = useState<HTMLElement | null>(null)
   let getFloatingPanelProps = useFloatingPanelProps()
-  let optionsRef = useSyncRefs(ref, anchor ? floatingRef : null, actions.setOptionsElement)
+  let optionsRef = useSyncRefs(
+    ref,
+    anchor ? floatingRef : null,
+    actions.setOptionsElement,
+    setLocalOptionsElement
+  )
   let ownerDocument = useOwnerDocument(data.optionsElement)
 
   let usesOpenClosedState = useOpenClosed()
   let [visible, transitionData] = useTransition(
     transition,
-    data.optionsElement,
+    localOptionsElement,
     usesOpenClosedState !== null
       ? (usesOpenClosedState & State.Open) === State.Open
       : data.comboboxState === ComboboxState.Open

diff --git a/packages/@headlessui-react/src/components/disclosure/disclosure.tsx b/packages/@headlessui-react/src/components/disclosure/disclosure.tsx
@@ -11,6 +11,7 @@ import React, {
   useMemo,
   useReducer,
   useRef,
+  useState,
   type ContextType,
   type Dispatch,
   type ElementType,
@@ -450,12 +451,14 @@ function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
   let [state, dispatch] = useDisclosureContext('Disclosure.Panel')
   let { close } = useDisclosureAPIContext('Disclosure.Panel')
   let mergeRefs = useMergeRefsFn()
+  let [localPanelElement, setLocalPanelElement] = useState<HTMLElement | null>(null)
 
   let panelRef = useSyncRefs(
     ref,
     useEvent((element) => {
       startTransition(() => dispatch({ type: ActionTypes.SetPanelElement, element }))
-    })
+    }),
+    setLocalPanelElement
   )
 
   useEffect(() => {
@@ -468,7 +471,7 @@ function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
   let usesOpenClosedState = useOpenClosed()
   let [visible, transitionData] = useTransition(
     transition,
-    state.panelElement,
+    localPanelElement,
     usesOpenClosedState !== null
       ? (usesOpenClosedState & State.Open) === State.Open
       : state.disclosureState === DisclosureStates.Open

diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx
@@ -12,6 +12,7 @@ import React, {
   useMemo,
   useReducer,
   useRef,
+  useState,
   type CSSProperties,
   type ElementType,
   type MutableRefObject,
@@ -931,6 +932,7 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
     ...theirProps
   } = props
   let anchor = useResolvedAnchor(rawAnchor)
+  let [localOptionsElement, setLocalOptionsElement] = useState<HTMLElement | null>(null)
 
   // Always enable `portal` functionality, when `anchor` is enabled
   if (anchor) {
@@ -945,7 +947,7 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
   let usesOpenClosedState = useOpenClosed()
   let [visible, transitionData] = useTransition(
     transition,
-    data.optionsElement,
+    localOptionsElement,
     usesOpenClosedState !== null
       ? (usesOpenClosedState & State.Open) === State.Open
       : data.listboxState === ListboxStates.Open
@@ -1023,7 +1025,12 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
 
   let [floatingRef, style] = useFloatingPanel(anchorOptions)
   let getFloatingPanelProps = useFloatingPanelProps()
-  let optionsRef = useSyncRefs(ref, anchor ? floatingRef : null, actions.setOptionsElement)
+  let optionsRef = useSyncRefs(
+    ref,
+    anchor ? floatingRef : null,
+    actions.setOptionsElement,
+    setLocalOptionsElement
+  )
 
   let searchDisposables = useDisposables()
 

diff --git a/packages/@headlessui-react/src/components/menu/menu.tsx b/packages/@headlessui-react/src/components/menu/menu.tsx
@@ -12,6 +12,7 @@ import React, {
   useMemo,
   useReducer,
   useRef,
+  useState,
   type CSSProperties,
   type Dispatch,
   type ElementType,
@@ -620,10 +621,13 @@ function ItemsFn<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(
   let [state, dispatch] = useMenuContext('Menu.Items')
   let [floatingRef, style] = useFloatingPanel(anchor)
   let getFloatingPanelProps = useFloatingPanelProps()
+  let [localItemsElement, setLocalItemsElement] = useState<HTMLElement | null>(null)
+
   let itemsRef = useSyncRefs(
     ref,
     anchor ? floatingRef : null,
-    useEvent((element) => dispatch({ type: ActionTypes.SetItemsElement, element }))
+    useEvent((element) => dispatch({ type: ActionTypes.SetItemsElement, element })),
+    setLocalItemsElement
   )
   let ownerDocument = useOwnerDocument(state.itemsElement)
 
@@ -635,7 +639,7 @@ function ItemsFn<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(
   let usesOpenClosedState = useOpenClosed()
   let [visible, transitionData] = useTransition(
     transition,
-    state.itemsElement,
+    localItemsElement,
     usesOpenClosedState !== null
       ? (usesOpenClosedState & State.Open) === State.Open
       : state.menuState === MenuStates.Open

diff --git a/packages/@headlessui-react/src/components/popover/popover.tsx b/packages/@headlessui-react/src/components/popover/popover.tsx
@@ -763,13 +763,13 @@ function BackdropFn<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(
     ...theirProps
   } = props
   let [{ popoverState }, dispatch] = usePopoverContext('Popover.Backdrop')
-  let [backdropElement, setBackdropElement] = useState<HTMLElement | null>(null)
-  let backdropRef = useSyncRefs(ref, setBackdropElement)
+  let [localBackdropElement, setLocalBackdropElement] = useState<HTMLElement | null>(null)
+  let backdropRef = useSyncRefs(ref, setLocalBackdropElement)
 
   let usesOpenClosedState = useOpenClosed()
   let [visible, transitionData] = useTransition(
     transition,
-    backdropElement,
+    localBackdropElement,
     usesOpenClosedState !== null
       ? (usesOpenClosedState & State.Open) === State.Open
       : popoverState === PopoverStates.Open
@@ -865,11 +865,13 @@ function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
     portal = true
   }
 
+  let [localPanelElement, setLocalPanelElement] = useState<HTMLElement | null>(null)
   let panelRef = useSyncRefs(
     internalPanelRef,
     ref,
     anchor ? floatingRef : null,
-    useEvent((panel) => dispatch({ type: ActionTypes.SetPanel, panel }))
+    useEvent((panel) => dispatch({ type: ActionTypes.SetPanel, panel })),
+    setLocalPanelElement
   )
   let ownerDocument = useOwnerDocument(internalPanelRef)
   let mergeRefs = useMergeRefsFn()
@@ -884,7 +886,7 @@ function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
   let usesOpenClosedState = useOpenClosed()
   let [visible, transitionData] = useTransition(
     transition,
-    state.panel,
+    localPanelElement,
     usesOpenClosedState !== null
       ? (usesOpenClosedState & State.Open) === State.Open
       : state.popoverState === PopoverStates.Open
@@ -1028,7 +1030,10 @@ function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
 
           // Ignore sentinel buttons and items inside the panel
           for (let element of combined.slice()) {
-            if (element.dataset.headlessuiFocusGuard === 'true' || state.panel?.contains(element)) {
+            if (
+              element.dataset.headlessuiFocusGuard === 'true' ||
+              localPanelElement?.contains(element)
+            ) {
               let idx = combined.indexOf(element)
               if (idx !== -1) combined.splice(idx, 1)
             }

diff --git a/packages/@headlessui-react/src/components/transition/transition.tsx b/packages/@headlessui-react/src/components/transition/transition.tsx
@@ -319,12 +319,12 @@ function TransitionChildFn<TTag extends ElementType = typeof DEFAULT_TRANSITION_
 
     ...theirProps
   } = props as typeof props
-  let [containerElement, setContainerElement] = useState<HTMLElement | null>(null)
+  let [localContainerElement, setLocalContainerElement] = useState<HTMLElement | null>(null)
   let container = useRef<HTMLElement | null>(null)
   let requiresRef = shouldForwardRef(props)
 
   let transitionRef = useSyncRefs(
-    ...(requiresRef ? [container, ref, setContainerElement] : ref === null ? [] : [ref])
+    ...(requiresRef ? [container, ref, setLocalContainerElement] : ref === null ? [] : [ref])
   )
   let strategy = theirProps.unmount ?? true ? RenderStrategy.Unmount : RenderStrategy.Hidden
 
@@ -438,7 +438,7 @@ function TransitionChildFn<TTag extends ElementType = typeof DEFAULT_TRANSITION_
   // a leave transition on the `<Transition>` is done, but there is still a
   // child `<TransitionChild>` busy, then `visible` would be `false`, while
   // `state` would still be `TreeStates.Visible`.
-  let [, transitionData] = useTransition(enabled, containerElement, show, { start, end })
+  let [, transitionData] = useTransition(enabled, localContainerElement, show, { start, end })
 
   let ourProps = compact({
     ref: transitionRef,