@codeleap/web 3.13.1 → 3.13.3

package/package.json

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

package/src/components/Modal/index.tsx

@@ -332,20 +332,12 @@ 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])
 

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,23 @@ export function useAnimatedVariantStyles<T extends Record<string|number|symbol,
 
   return animated
 }
+
+export function useLockScroll(isLock: boolean) {
+  useIsomorphicEffect(() => {
+    const htmlStyle = document?.documentElement?.style
+
+    if (!!htmlStyle) {
+      if (htmlStyle.overflowX !== 'hidden') {
+        htmlStyle.overflowX = 'hidden'
+      }
+
+      console.log({ isLock, flow: htmlStyle.overflowY })
+  
+      if (isLock) {
+        htmlStyle.overflowY = 'hidden'
+      } else if (!isLock && htmlStyle.overflowY === 'hidden') {
+        htmlStyle.overflowY = 'auto'
+      }
+    }
+  }, [isLock])
+}