@codeleap/web 3.12.22 → 3.13.0-touchable-analytics.0

package/package.json

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

package/src/components/Modal/index.tsx

@@ -335,9 +335,11 @@ export const Modal = (props) => {
     if (visible) {
       document.body.style.overflowY = 'hidden'
       document.body.style.overflowX = 'hidden'
+      document.body.style.maxHeight = '100svh'
     } else {
       document.body.style.overflowY = 'visible'
       document.body.style.overflowX = 'hidden'
+      document.body.style.maxHeight = 'unset'
     }
   }, [visible])
 

package/src/components/Select/index.tsx

@@ -273,11 +273,8 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
         focus: () => {
           innerInputRef.current?.focus?.()
         },
-        blur: () => {
-          innerInputRef.current?.blur?.()
-        },
       }
-    }, [!!innerInputRef?.current?.focus, !!innerInputRef?.current?.blur])
+    }, [!!innerInputRef?.current?.focus])
 
     const onLoadOptions = async (inputValue, cb) => {
       if (!!loadOptions) {
@@ -380,7 +377,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
 
     const MenuComponent = React.useCallback((props) => {
       return <CustomMenu {...props} Footer={FooterComponent} />
-    }, [FooterComponent])
+    }, [])
 
     const MenuListComponent = React.useCallback((props) => {
       return <CustomMenuList {...props} defaultStyles={menuWrapperStyles} />
@@ -412,7 +409,6 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
           hideSelectedOptions={false}
           tabSelectsValue={false}
           tabIndex={0}
-          backspaceRemovesValue={true}
           {...otherProps}
           {..._props}
           onKeyDown={isFocused ? handleKeyDown : null}

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,8 @@ 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'>>
+}