exposed useTopLayer scope to consuming components

Author: rkoval

packages/@headlessui-react/src/components/combobox/combobox.tsx

@@ -659,7 +659,7 @@ export type ComboboxProps<
     } | null
 
     onClose?(): void
-
+    outsideClickScope?: string
     __demoMode?: boolean
   }
 >
@@ -806,7 +806,8 @@ function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_T
   useOutsideClick(
     outsideClickEnabled,
     [data.buttonElement, data.inputElement, data.optionsElement],
-    () => actions.closeCombobox()
+    () => actions.closeCombobox(),
+    outsideClickScope
   )
 
   let slot = useMemo(() => {

packages/@headlessui-react/src/components/dialog/dialog.tsx

@@ -126,6 +126,7 @@ let InternalDialog = forwardRefWithAs(function InternalDialog<
     autoFocus = true,
     __demoMode = false,
     unmount = false,
+    outsideClickScope,
     ...theirProps
   } = props
 
@@ -213,10 +214,15 @@ let InternalDialog = forwardRefWithAs(function InternalDialog<
   })
 
   // Close Dialog on outside click
-  useOutsideClick(enabled, resolveRootContainers, (event) => {
-    event.preventDefault()
-    close()
-  })
+  useOutsideClick(
+    enabled,
+    resolveRootContainers,
+    (event) => {
+      event.preventDefault()
+      close()
+    },
+    outsideClickScope
+  )
 
   // Handle `Escape` to close
   useEscape(enabled, ownerDocument?.defaultView, (event) => {
@@ -347,6 +353,7 @@ export type DialogProps<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> =
     role?: 'dialog' | 'alertdialog'
     autoFocus?: boolean
     transition?: boolean
+    outsideClickScope?: string
     __demoMode?: boolean
   }
 >

packages/@headlessui-react/src/components/listbox/listbox.tsx

@@ -492,7 +492,7 @@ export type ListboxProps<
     form?: string
     name?: string
     multiple?: boolean
-
+    outsideClickScope?: string
     __demoMode?: boolean
   }
 >
@@ -515,6 +515,7 @@ function ListboxFn<
     horizontal = false,
     multiple = false,
     __demoMode = false,
+    outsideClickScope,
     ...theirProps
   } = props
 
@@ -592,7 +593,8 @@ function ListboxFn<
         event.preventDefault()
         data.buttonElement?.focus()
       }
-    }
+    },
+    outsideClickScope
   )
 
   let slot = useMemo(() => {

packages/@headlessui-react/src/components/menu/menu.tsx

@@ -382,14 +382,15 @@ export type MenuProps<TTag extends ElementType = typeof DEFAULT_MENU_TAG> = Prop
   MenuPropsWeControl,
   {
     __demoMode?: boolean
+    outsideClickScope?: string
   }
 >
 
 function MenuFn<TTag extends ElementType = typeof DEFAULT_MENU_TAG>(
   props: MenuProps<TTag>,
   ref: Ref<HTMLElement>
 ) {
-  let { __demoMode = false, ...theirProps } = props
+  let { __demoMode = false, outsideClickScope, ...theirProps } = props
   let reducerBag = useReducer(stateReducer, {
     __demoMode,
     menuState: __demoMode ? MenuStates.Open : MenuStates.Closed,
@@ -405,14 +406,19 @@ function MenuFn<TTag extends ElementType = typeof DEFAULT_MENU_TAG>(
 
   // Handle outside click
   let outsideClickEnabled = menuState === MenuStates.Open
-  useOutsideClick(outsideClickEnabled, [buttonElement, itemsElement], (event, target) => {
-    dispatch({ type: ActionTypes.CloseMenu })
+  useOutsideClick(
+    outsideClickEnabled,
+    [buttonElement, itemsElement],
+    (event, target) => {
+      dispatch({ type: ActionTypes.CloseMenu })
 
-    if (!isFocusableElement(target, FocusableMode.Loose)) {
-      event.preventDefault()
-      buttonElement?.focus()
-    }
-  })
+      if (!isFocusableElement(target, FocusableMode.Loose)) {
+        event.preventDefault()
+        buttonElement?.focus()
+      }
+    },
+    outsideClickScope
+  )
 
   let close = useEvent(() => {
     dispatch({ type: ActionTypes.CloseMenu })

packages/@headlessui-react/src/components/popover/popover.tsx

@@ -238,14 +238,15 @@ export type PopoverProps<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>
   PopoverPropsWeControl,
   {
     __demoMode?: boolean
+    outsideClickScope?: string
   }
 >
 
 function PopoverFn<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(
   props: PopoverProps<TTag>,
   ref: Ref<HTMLElement>
 ) {
-  let { __demoMode = false, ...theirProps } = props
+  let { __demoMode = false, outsideClickScope, ...theirProps } = props
   let internalPopoverRef = useRef<HTMLElement | null>(null)
   let popoverRef = useSyncRefs(
     ref,
@@ -375,14 +376,19 @@ function PopoverFn<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(
 
   // Handle outside click
   let outsideClickEnabled = popoverState === PopoverStates.Open
-  useOutsideClick(outsideClickEnabled, root.resolveContainers, (event, target) => {
-    dispatch({ type: ActionTypes.ClosePopover })
+  useOutsideClick(
+    outsideClickEnabled,
+    root.resolveContainers,
+    (event, target) => {
+      dispatch({ type: ActionTypes.ClosePopover })
 
-    if (!isFocusableElement(target, FocusableMode.Loose)) {
-      event.preventDefault()
-      button?.focus()
-    }
-  })
+      if (!isFocusableElement(target, FocusableMode.Loose)) {
+        event.preventDefault()
+        button?.focus()
+      }
+    },
+    outsideClickScope
+  )
 
   let close = useEvent(
     (

packages/@headlessui-react/src/hooks/use-outside-click.ts

@@ -21,9 +21,10 @@ const MOVE_THRESHOLD_PX = 30
 export function useOutsideClick(
   enabled: boolean,
   containers: ContainerInput | (() => ContainerInput),
-  cb: (event: MouseEvent | PointerEvent | FocusEvent | TouchEvent, target: HTMLElement) => void
+  cb: (event: MouseEvent | PointerEvent | FocusEvent | TouchEvent, target: HTMLElement) => void,
+  topLayerScope = 'outside-click'
 ) {
-  let isTopLayer = useIsTopLayer(enabled, 'outside-click')
+  let isTopLayer = useIsTopLayer(enabled, topLayerScope)
   let cbRef = useLatestValue(cb)
 
   let handleOutsideClick = useCallback(