Revert "fix: BodyScrollSuppressor を styled-components に依存しない形で実装 (#4492…

…)" (#4559)

This reverts commit 11fc83e.

src/components/Dialog/useBodyScrollLock.ts → src/components/Dialog/BodyScrollSuppressor.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useState } from 'react'
+import React, { FC, useEffect, useState } from 'react'
+import { createGlobalStyle, css } from 'styled-components'
 
-export const useBodyScrollLock = () => {
+export const BodyScrollSuppressor: FC = () => {
   const [scrollBarWidth, setScrollBarWidth] = useState<number | null>(null)
   const [paddingRight, setPaddingRight] = useState<number | null>(null)
 
@@ -16,15 +17,21 @@ export const useBodyScrollLock = () => {
     setPaddingRight(scrollBarWidth + parseInt(originalPaddingRight, 10))
   }, [scrollBarWidth])
 
-  useEffect(() => {
-    if (paddingRight !== null) {
-      document.body.style.paddingInlineEnd = `${paddingRight}px`
-    }
-    document.body.style.overflow = 'hidden'
-
-    return () => {
-      document.body.style.paddingInlineEnd = ''
-      document.body.style.overflow = ''
-    }
-  }, [paddingRight])
+  if (scrollBarWidth === null) {
+    return null
+  }
+  return <ScrollSuppressing paddingRight={paddingRight} />
 }
+
+const ScrollSuppressing = createGlobalStyle<{
+  paddingRight: number | null
+}>`
+  body {
+    overflow: hidden;
+    ${({ paddingRight }) =>
+      paddingRight &&
+      css`
+        padding-right: ${paddingRight}px !important;
+      `}
+  }
+`

src/components/Dialog/DialogContentInner.tsx

@@ -12,10 +12,10 @@ import { tv } from 'tailwind-variants'
 import { useHandleEscape } from '../../hooks/useHandleEscape'
 import { useTheme } from '../../hooks/useTailwindTheme'
 
+import { BodyScrollSuppressor } from './BodyScrollSuppressor'
 import { DialogOverlap } from './DialogOverlap'
 import { DialogPositionProvider } from './DialogPositionProvider'
 import { FocusTrap } from './FocusTrap'
-import { useBodyScrollLock } from './useBodyScrollLock'
 
 export type DialogContentInnerProps = PropsWithChildren<{
   /**
@@ -148,8 +148,6 @@ export const DialogContentInner: FC<DialogContentInnerProps & ElementProps> = ({
     onClickOverlay && onClickOverlay()
   }, [isOpen, onClickOverlay])
 
-  useBodyScrollLock()
-
   return (
     <DialogPositionProvider top={top} bottom={bottom}>
       <DialogOverlap isOpen={isOpen}>
@@ -167,6 +165,8 @@ export const DialogContentInner: FC<DialogContentInnerProps & ElementProps> = ({
           >
             <FocusTrap firstFocusTarget={firstFocusTarget}>{children}</FocusTrap>
           </div>
+          {/* Suppresses scrolling of body while modal is displayed */}
+          <BodyScrollSuppressor />
         </div>
       </DialogOverlap>
     </DialogPositionProvider>