@codeleap/web 3.13.2 → 3.13.5

package/package.json

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

package/src/components/Modal/index.tsx

@@ -25,7 +25,6 @@ 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'
 
@@ -342,8 +341,6 @@ export const Modal = (props) => {
     }
   }, [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 { useLockScroll, usePopState } from '../../lib'
+import { usePopState } from '../../lib'
 
 export type OverlayProps<T extends NativeHTMLElement = 'div'> = {
   visible?: boolean
@@ -37,8 +37,6 @@ 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/components/Touchable/index.tsx

@@ -21,30 +21,53 @@ export type TouchableProps<T extends ElementType = 'button'> = ComponentPropsWit
   debounce?: number
   leadingDebounce?: boolean
   setPressed?: (pressed: boolean) => void
+  analyticsEnabled?: boolean
+  analyticsName?: string
+  analyticsData?: Record<string, any>
 } & ComponentVariants<typeof TouchablePresets>
 
+const defaultProps: TouchableProps<'button'> = {
+  propagate: true,
+  debounce: null,
+  component: View,
+  style: {},
+  styles: {},
+  responsiveVariants: {},
+  variants: [],
+  css: [],
+  analyticsEnabled: false,
+  analyticsName: null,
+  analyticsData: {},
+}
 export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
   touchableProps: TouchableProps<T>,
   ref,
 ) => {
+  const mergedProps: TouchableProps = {
+    ...(defaultProps),
+    ...(touchableProps),
+  }
   const {
-    propagate = true,
-    debounce = null,
+    propagate,
+    debounce,
     leadingDebounce,
     setPressed,
-    component: Component = View,
+    component: Component,
     disabled,
     onPress,
     onClick,
     debugName,
     debugComponent,
-    style = {},
-    styles = {},
-    responsiveVariants = {},
-    variants = [],
-    css = [],
+    style,
+    styles,
+    responsiveVariants,
+    variants,
+    css,
+    analyticsEnabled,
+    analyticsName,
+    analyticsData,
     ...props
-  } = touchableProps as TouchableProps
+  } = mergedProps
 
   const pressed = React.useRef(!!leadingDebounce)
 
@@ -60,7 +83,7 @@ export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
     responsiveVariants,
     variants,
     styles,
-    rootElement: 'wrapper'
+    rootElement: 'wrapper',
   })
 
   const { logger } = useCodeleapContext()
@@ -76,7 +99,7 @@ export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
       logger.warn(
         'No onPress passed to touchable',
         touchableProps,
-        'User interaction'
+        'User interaction',
       )
       return
     }
@@ -85,8 +108,14 @@ export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
       logger.log(
         `<${debugComponent || 'Touchable'}/> pressed`,
         { debugName, debugComponent },
-        'User interaction'
+        'User interaction',
       )
+      if (analyticsEnabled) {
+        const name = analyticsName || debugName
+        if (!!name?.trim?.()) {
+          logger.analytics?.interaction(name, analyticsData)
+        }
+      }
 
       if (TypeGuards.isFunction(onClick)) onClick?.(event)
       onPress?.()
@@ -127,6 +156,10 @@ export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
   )
 }
 
-export const Touchable = forwardRef(TouchableCP) as <T extends NativeHTMLElement = 'button'>(
+export const Touchable = forwardRef(TouchableCP) as (<T extends NativeHTMLElement = 'button'>(
   touchableProps: TouchableProps<T>
-) => JSX.Element
+) => JSX.Element) & {
+  defaultProps: Partial<TouchableProps<'button'>>
+}
+
+Touchable.defaultProps = defaultProps

package/src/lib/hooks.ts

@@ -1,4 +1,4 @@
-import { AnyFunction, onMount, onUpdate, range, useIsomorphicEffect, useUncontrolled } from '@codeleap/common'
+import { AnyFunction, onMount, onUpdate, range, 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,19 +352,3 @@ 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])
-}