@charcoal-ui/react 3.9.0 → 3.10.0

package/src/components/Modal/index.story.tsx

@@ -243,4 +243,27 @@ export const NotDismmissableStory: StoryObj<typeof Modal> = {
   },
 }
 
+export const BackgroundScroll: StoryObj<typeof Modal> = {
+  render: function Render(args) {
+    const state = useOverlayTriggerState({})
+    return (
+      <OverlayProvider>
+        <div
+          style={{
+            height: 1024,
+          }}
+        >
+          <Button onClick={() => state.open()}>Open Modal</Button>
+        </div>
+        <M
+          {...args}
+          isDismissable
+          isOpen={state.isOpen}
+          onClose={() => state.close()}
+        />
+      </OverlayProvider>
+    )
+  },
+}
+
 export { InternalScrollStory as InternalScroll } from './__stories__/InternalScrollStory'

package/src/components/Modal/useCustomModalOverlay.tsx

@@ -5,6 +5,7 @@ import {
   ariaHideOutside,
   useOverlay,
   useOverlayFocusContain,
+  usePreventScroll,
 } from '@react-aria/overlays'
 
 /**
@@ -27,6 +28,10 @@ export function useCharcoalModalOverlay(
     ref
   )
 
+  usePreventScroll({
+    isDisabled: !state.isOpen,
+  })
+
   useOverlayFocusContain()
 
   React.useEffect(() => {