@charcoal-ui/react 4.4.1 → 4.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "4.4.1",
+  "version": "4.5.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -49,7 +49,7 @@
     "tsup": "^6.5.0",
     "typescript": "^4.9.5",
     "vitest": "^2.0.1",
-    "@charcoal-ui/esbuild-plugin-styled-components": "4.4.1"
+    "@charcoal-ui/esbuild-plugin-styled-components": "4.5.0"
   },
   "dependencies": {
     "@react-aria/button": "^3.9.1",
@@ -67,10 +67,10 @@
     "react-spring": "^9.0.0",
     "react-stately": "^3.26.0",
     "warning": "^4.0.3",
-    "@charcoal-ui/foundation": "4.4.1",
-    "@charcoal-ui/icons": "4.4.1",
-    "@charcoal-ui/utils": "4.4.1",
-    "@charcoal-ui/theme": "4.4.1"
+    "@charcoal-ui/foundation": "4.5.0",
+    "@charcoal-ui/icons": "4.5.0",
+    "@charcoal-ui/theme": "4.5.0",
+    "@charcoal-ui/utils": "4.5.0"
   },
   "peerDependencies": {
     "react": ">=17.0.0",

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

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

package/src/components/Modal/index.tsx

@@ -1,6 +1,6 @@
 import { useContext, forwardRef, memo } from 'react'
 import * as React from 'react'
-import { AriaModalOverlayProps, Overlay } from '@react-aria/overlays'
+import { Overlay } from '@react-aria/overlays'
 import type { AriaDialogProps } from '@react-types/dialog'
 import { animated, useTransition, easings } from 'react-spring'
 import Button, { ButtonProps } from '../Button'
@@ -9,6 +9,7 @@ import { useObjectRef } from '@react-aria/utils'
 import { Dialog } from './Dialog'
 import { ModalBackgroundContext } from './ModalBackgroundContext'
 import {
+  CharcoalModalOverlayProps,
   useCharcoalModalOverlay,
   useWindowWidth,
 } from './useCustomModalOverlay'
@@ -18,7 +19,7 @@ import './index.css'
 export type BottomSheet = boolean | 'full'
 export type Size = 'S' | 'M' | 'L'
 
-export type ModalProps = AriaModalOverlayProps &
+export type ModalProps = CharcoalModalOverlayProps &
   AriaDialogProps & {
     children: React.ReactNode
     zIndex?: number

package/src/components/Modal/useCustomModalOverlay.tsx

@@ -13,8 +13,11 @@ import { usePreventScroll } from '../DropdownSelector/Popover/usePreventScroll'
  * but `useModalOverlay` (specifically, `useOverlay` within it) detects pointer events on the scrollbar.
  * Therefore, to prevent this issue, we need to override `shouldCloseOnInteractOutside` in `useModalOverlay`.
  */
+export type CharcoalModalOverlayProps = AriaModalOverlayProps & {
+  overflowClip?: boolean
+}
 export function useCharcoalModalOverlay(
-  props: AriaModalOverlayProps,
+  props: CharcoalModalOverlayProps,
   state: { isOpen: boolean; onClose: () => void },
   ref: React.RefObject<HTMLElement | null>
 ): ModalOverlayAria {
@@ -30,7 +33,8 @@ export function useCharcoalModalOverlay(
 
   usePreventScroll(
     typeof document !== 'undefined' ? document.body : null,
-    state.isOpen
+    state.isOpen,
+    props.overflowClip
   )
 
   useOverlayFocusContain()