@codeleap/web 3.13.1 → 3.13.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.13.1",
+  "version": "3.13.2",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",

package/src/components/Modal/index.tsx

@@ -25,6 +25,7 @@ import { ActionIcon, ActionIconProps } from '../ActionIcon'
 import { Scroll } from '../Scroll'
 import { ComponentCommonProps } from '../../types'
 import { Touchable, TouchableProps } from '../Touchable'
+import { useLockScroll } from '../../lib'
 
 export * from './styles'
 
@@ -332,23 +333,17 @@ export const Modal = (props) => {
       appRoot.setAttribute('tabindex', `${-1}`)
     }
 
-    const htmlElement = document.documentElement
-
     if (visible) {
       document.body.style.overflowY = 'hidden'
       document.body.style.overflowX = 'hidden'
-      
-      htmlElement.style.overflowX = 'hidden'
-      htmlElement.style.overflowY = 'hidden'
     } else {
       document.body.style.overflowY = 'visible'
       document.body.style.overflowX = 'hidden'
-      
-      htmlElement.style.overflowX = 'hidden'
-      htmlElement.style.overflowY = 'auto'
     }
   }, [visible])
 
+  useLockScroll(visible)
+
   const content = <ModalContent {...props} id={modalId.current} />
 
   // if (renderStatus === 'unmounted') return null

package/src/components/Overlay/index.tsx

@@ -8,7 +8,7 @@ import { Touchable, TouchableProps } from '../Touchable'
 import { View, ViewProps } from '../View'
 import { OverlayComposition, OverlayPresets } from './styles'
 import { NativeHTMLElement } from '../../types'
-import { usePopState } from '../../lib'
+import { useLockScroll, usePopState } from '../../lib'
 
 export type OverlayProps<T extends NativeHTMLElement = 'div'> = {
   visible?: boolean
@@ -37,6 +37,8 @@ export const Overlay = <T extends NativeHTMLElement>(overlayProps:OverlayProps<T
 
   usePopState(visible, props.onPress, scrollLocked)
 
+  useLockScroll(visible)
+
   const Component = props.onClick || props.onPress ? Touchable : View
 
   return (

package/src/lib/hooks.ts

@@ -1,4 +1,4 @@
-import { AnyFunction, onMount, onUpdate, range, useUncontrolled } from '@codeleap/common'
+import { AnyFunction, onMount, onUpdate, range, useIsomorphicEffect, useUncontrolled } from '@codeleap/common'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { v4 } from 'uuid'
 import { easeInOut, EasingFunction, AnimationProps, useAnimate, useAnimation, animate } from 'framer-motion'
@@ -352,3 +352,19 @@ export function useAnimatedVariantStyles<T extends Record<string|number|symbol,
 
   return animated
 }
+
+export function useLockScroll(isLock: boolean) {
+  useIsomorphicEffect(() => {
+    const htmlElement = document.documentElement
+
+    if (htmlElement.style.overflowX !== 'hidden') {
+      htmlElement.style.overflowX = 'hidden'
+    }
+
+    if (isLock) {
+      htmlElement.style.overflowY = 'hidden'
+    } else {
+      htmlElement.style.overflowY = 'auto'
+    }
+  }, [isLock])
+}