@charcoal-ui/react 3.3.0 → 3.4.0

package/src/components/DropdownSelector/Popover/index.tsx

@@ -1,8 +1,10 @@
-import { RefObject, useRef } from 'react'
+import { RefObject, useContext, useRef } from 'react'
 import { ReactNode } from 'react'
 import { DismissButton, Overlay, usePopover } from '@react-aria/overlays'
 import styled from 'styled-components'
 import { theme } from '../../../styled'
+import { ModalBackgroundContext } from '../../Modal/ModalBackgroundContext'
+import { usePreventScroll } from './usePreventScroll'
 
 export type PopoverProps = {
   isOpen: boolean
@@ -40,11 +42,24 @@ export default function Popover(props: PopoverProps) {
     }
   )
 
+  const modalBackground = useContext(ModalBackgroundContext)
+  usePreventScroll(modalBackground, props.isOpen)
+
   if (!props.isOpen) return null
 
   return (
     <Overlay portalContainer={document.body}>
-      <div {...underlayProps} style={{ position: 'fixed', inset: 0 }} />
+      <div
+        {...underlayProps}
+        style={{
+          position: 'fixed',
+          zIndex:
+            typeof popoverProps.style?.zIndex === 'number'
+              ? popoverProps.style.zIndex - 1
+              : 99999,
+          inset: 0,
+        }}
+      />
       <DropdownPopoverDiv {...popoverProps} ref={finalPopoverRef}>
         <DismissButton onDismiss={() => props.onClose()} />
         {props.children}

package/src/components/DropdownSelector/Popover/usePreventScroll.tsx

@@ -0,0 +1,18 @@
+import { useEffect } from 'react'
+
+export function usePreventScroll(element: HTMLElement | null, isOpen: boolean) {
+  useEffect(() => {
+    if (isOpen && element) {
+      const defaultPaddingRight = element.style.paddingRight
+      const defaultOverflow = element.style.overflow
+      element.style.paddingRight = `${
+        window.innerWidth - element.clientWidth
+      }px`
+      element.style.overflow = 'hidden'
+      return () => {
+        element.style.paddingRight = defaultPaddingRight
+        element.style.overflow = defaultOverflow
+      }
+    }
+  }, [element, isOpen])
+}