@codeleap/web 3.18.6 → 3.18.8

package/package.json

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

package/src/components/SegmentedControl/index.tsx

@@ -136,20 +136,22 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
   ]
 
   const onSelectTab = (option: SegmentedControlOptionProps, e?: React.KeyboardEvent<HTMLDivElement>) => {
-    if (!!e && e?.keyCode !== 13 || e?.key !== 'Enter') return null
+    if (!e || e?.keyCode === 13 || e?.key === 'Enter') {
+      if (!debounceEnabled || !TypeGuards.isNumber(debounce)) {
+        onValueChange(option.value)
+        return
+      }
+
+      if (sectionPressedRef.current !== null) return
 
-    if (!debounceEnabled || !TypeGuards.isNumber(debounce)) {
       onValueChange(option.value)
-      return
+      sectionPressedRef.current = setTimeout(() => {
+        clearTimeout(sectionPressedRef.current)
+        sectionPressedRef.current = null
+      }, debounce)
+    } else {
+      return null
     }
-
-    if (sectionPressedRef.current !== null) return
-
-    onValueChange(option.value)
-    sectionPressedRef.current = setTimeout(() => {
-      clearTimeout(sectionPressedRef.current)
-      sectionPressedRef.current = null
-    }, debounce)
   }
 
   return (

package/src/components/Slider/index.tsx

@@ -27,14 +27,14 @@ export type SliderProps = Partial<Omit<PrimitiveSliderProps, 'value' | 'onValueC
     separator?: string
     transformer?: (value: number[], defaultValue: PrimitiveSliderProps['defaultValue']) => string
   }
-  value: number[]
-  onValueChange: (val: number[]) => void
+  value: number | number[]
+  onValueChange: (val: number | number[]) => void
   styles?: StylesOf<SliderComposition>
   style?: PropsOf<typeof View>['style']
   trackMarks?: Record<number, string>
   trackMarkComponent?: React.ComponentType<TrackMarkProps>
   onPressThumbSetValue?: boolean
-  onPressThumb?: (value: number, thumbIndex: number) => void
+  onPressThumb?: (value: number | number[], thumbIndex: number) => void
 } & ComponentVariants<typeof SliderPresets>
 
 export type TrackMarkProps = {
@@ -67,7 +67,7 @@ export const Slider = (props: SliderProps) => {
   const {
     debounce = null,
     onValueChange,
-    value,
+    value: _value,
     label,
     debugName,
     styles = {},
@@ -77,7 +77,7 @@ export const Slider = (props: SliderProps) => {
     variants,
     trackMarks,
     trackMarkComponent = DefaultSliderTrackMark,
-    defaultValue: _defaultValue = [],
+    defaultValue: defaultSliderValue = [],
     max = 100,
     min = 0,
     indicatorLabel = null,
@@ -89,6 +89,10 @@ export const Slider = (props: SliderProps) => {
     ...sliderProps
   } = others
 
+  const isUniqueValue = !TypeGuards.isArray(_value)
+  const value = isUniqueValue ? [_value] : _value
+  const _defaultValue = TypeGuards.isArray(defaultSliderValue) ? defaultSliderValue : [defaultSliderValue]
+
   const defaultValueRef = useRef<PrimitiveSliderProps['defaultValue']>(_defaultValue)
   const defaultValue = defaultValueRef.current
 
@@ -102,9 +106,9 @@ export const Slider = (props: SliderProps) => {
 
   const currentThumbRef = useRef(null)
 
-  const handleChange: SliderProps['onValueChange'] = (newValue) => {
-    if (newValue.length <= 1) {
-      onValueChange(newValue)
+  const handleChange: SliderProps['onValueChange'] = (newValue: Array<number>) => {
+    if (isUniqueValue) {
+      onValueChange(newValue?.[0])
       return
     }
 
@@ -244,15 +248,15 @@ export const Slider = (props: SliderProps) => {
           <SliderRange style={selectedTrackStyle} />
         </SliderTrack>
 
-        {defaultValue.map((_thumbValue, i) => (
+        {defaultValue.map((_, i) => (
           <SliderThumb
             key={i}
-            // @ts-ignore
             index={i}
             style={thumbStyle}
             onClick={() => {
-              if (onPressThumbSetValue) onValueChange?.([Number(_thumbValue)])
-              if (TypeGuards.isFunction(onPressThumb)) onPressThumb?.(_thumbValue, i)
+              if (onPressThumbSetValue) onValueChange?.(value)
+              if (TypeGuards.isFunction(onPressThumb)) onPressThumb?.(value, i)
+
               currentThumbRef.current = i
             }}
             onMouseEnter={() => currentThumbRef.current = i}

package/src/components/Text/index.tsx

@@ -1,4 +1,5 @@
 import { TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
+import { motion } from 'framer-motion'
 import React, { ElementType } from 'react'
 import { TextPresets } from './styles'
 import { TextProps } from './types'
@@ -11,6 +12,8 @@ const defaultProps: Partial<TextProps<'p'>> = {
   component: 'p',
   debounce: null,
   pressDisabled: false,
+  animated: false,
+  animatedProps: {},
 }
 
 export const Text = <T extends ElementType>(textProps: TextProps<T>) => {
@@ -27,16 +30,20 @@ export const Text = <T extends ElementType>(textProps: TextProps<T>) => {
     css,
     text = null,
     children,
-    component: Component,
+    component,
     debugName,
     msg = null,
     onPress,
     debounce,
     pressDisabled,
     onClick,
+    animated,
+    animatedProps,
     ...props
   } = allProps
 
+  const Component = animated ? (motion?.[component] || motion.p) : (component || 'p')
+
   const pressedRef = React.useRef(false)
 
   const variantStyles = useDefaultComponentStyle<'u:Text', typeof TextPresets>('u:Text', {
@@ -89,6 +96,7 @@ export const Text = <T extends ElementType>(textProps: TextProps<T>) => {
       css={_styles}
       {...props}
       {...pressProps}
+      {...animatedProps}
     >
       {text || children}
     </Component>

package/src/components/Text/types.ts

@@ -1,16 +1,18 @@
 import { StylesOf, ComponentVariants } from '@codeleap/common'
+import { MotionProps } from 'framer-motion'
 import { ComponentPropsWithoutRef, ElementType } from 'react'
 import { TextComposition, TextPresets } from './styles'
 
-export type TextProps<T extends ElementType> =
-ComponentPropsWithoutRef<T> &
-ComponentVariants<typeof TextPresets> & {
-  component?: T
-  text: string
-  styles?: StylesOf<TextComposition>
-  msg?: string
-  debugName?: string
-  debounce?: number
-  pressDisabled?: boolean
-  onPress?: (event: React.MouseEventHandler<T>) => void
-}
+export type TextProps<T extends ElementType> = ComponentPropsWithoutRef<T> &
+  ComponentVariants<typeof TextPresets> & {
+    component?: T
+    text: string
+    styles?: StylesOf<TextComposition>
+    msg?: string
+    debugName?: string
+    debounce?: number
+    pressDisabled?: boolean
+    onPress?: (event: React.MouseEventHandler<T>) => void
+    animated?: boolean
+    animatedProps?: Partial<MotionProps>
+  }

package/src/components/View/index.tsx

@@ -1,49 +1,24 @@
 /** @jsx jsx */
 import { jsx, CSSObject } from '@emotion/react'
-import {
-  ComponentVariants,
-  useDefaultComponentStyle,
-  useCodeleapContext,
-  useMemo,
-  BreakpointPlaceholder,
-  BaseViewProps,
-
-  TypeGuards,
-} from '@codeleap/common'
-import {
-  forwardRef,
-  Ref,
-} from 'react'
+import { useDefaultComponentStyle, useCodeleapContext, useMemo, TypeGuards } from '@codeleap/common'
+import { forwardRef, Ref } from 'react'
 import { ViewPresets } from './styles'
 import { useMediaQuery } from '../../lib/hooks'
-import { HTMLProps, NativeHTMLElement } from '../../types'
+import { NativeHTMLElement } from '../../types'
+import { motion } from 'framer-motion'
+import { ViewProps } from './types'
 
 export * from './styles'
-
-export type ViewProps<T extends NativeHTMLElement> =
-  HTMLProps<T> &
-  ComponentVariants<typeof ViewPresets> &
-   {
-    component?: T
-    scroll?: boolean
-    debugName?: string
-    debug?: boolean
-    is?: BreakpointPlaceholder
-    not?: BreakpointPlaceholder
-    up?: BreakpointPlaceholder
-    down?: BreakpointPlaceholder
-    onHover?: (isMouseOverElement: boolean) => void
-  } & BaseViewProps
+export * from './types'
 
 export const ViewCP = (
   viewProps: ViewProps<'div'>,
   ref: Ref<any>,
 ) => {
-
   const {
     responsiveVariants = {},
     variants = [],
-    component: Component = 'div',
+    component = 'div',
     children,
     is,
     not,
@@ -54,10 +29,14 @@ export const ViewCP = (
     scroll = false,
     debug = false,
     style,
+    animated = false,
+    animatedProps = {},
     css = [],
     ...props
   } = viewProps
 
+  const Component = animated ? (motion?.[component] || motion.div) : (component || 'div')
+
   const variantStyles = useDefaultComponentStyle<'u:View', typeof ViewPresets>('u:View', {
     responsiveVariants,
     variants,
@@ -107,6 +86,7 @@ export const ViewCP = (
       ref={ref}
       {...onHoverProps}
       {...props}
+      {...animatedProps}
     >
       {children}
     </Component>

package/src/components/View/types.ts

@@ -0,0 +1,22 @@
+import { BaseViewProps, BreakpointPlaceholder, ComponentVariants } from '@codeleap/common'
+import { HTMLProps, NativeHTMLElement } from '../../types'
+import { AnimationProps, MotionProps } from 'framer-motion'
+import { ViewPresets } from './styles'
+
+export type ViewProps<T extends NativeHTMLElement> =
+  HTMLProps<T> &
+  ComponentVariants<typeof ViewPresets> &
+  Omit<AnimationProps, 'variants'> &
+  {
+    component?: T
+    scroll?: boolean
+    debugName?: string
+    debug?: boolean
+    is?: BreakpointPlaceholder
+    not?: BreakpointPlaceholder
+    up?: BreakpointPlaceholder
+    down?: BreakpointPlaceholder
+    onHover?: (isMouseOverElement: boolean) => void
+    animated?: boolean
+    animatedProps?: Partial<MotionProps>
+  } & BaseViewProps

package/src/index.ts

@@ -5,6 +5,7 @@ export * from './types/utility'
 export * from './lib/useSearchParams'
 export * from './lib/useBreakpointMatch'
 export * from './lib/usePopState'
+export * from './lib/useAnimatedStyle'
 export { default as Toast } from './lib/Toast'
 export { CreateOSAlert, useGlobalAlertComponent, AlertOutlet } from './lib/OSAlert'
 export type { GlobalAlertComponentProps, GlobalAlertType } from './lib/OSAlert'

package/src/lib/index.ts

@@ -6,3 +6,4 @@ export * from './useBreakpointMatch'
 export * from './useClick'
 export * from './ListMasonry'
 export * from './localStorage'
+export * from './useAnimatedStyle'

package/src/lib/useAnimatedStyle.ts

@@ -0,0 +1,28 @@
+import React, { useRef } from 'react'
+import { onUpdate, useState } from '@codeleap/common'
+import { AnimationProps } from 'framer-motion'
+
+type UpdaterReturn = Omit<AnimationProps['animate'], 'transition'> & {
+  transition: AnimationProps['transition']
+}
+
+type UseAnimatedStyleReturn = Pick<AnimationProps, 'animate' | 'initial' | 'transition'>
+
+export const useAnimatedStyle = (updater: () => UpdaterReturn, deps: Array<any>): UseAnimatedStyleReturn => {
+  const initialStyle = updater()
+  
+  const [animatedStyle, setAnimatedStyle] = useState(initialStyle)
+  const transition = useRef(initialStyle.transition)
+
+  onUpdate(() => {
+    const animatedStyleUpdated = updater()
+
+    setAnimatedStyle(animatedStyleUpdated)
+  }, deps)
+
+  return {
+    animate: animatedStyle,
+    transition: transition.current,
+    initial: false,
+  }
+}

package/src/lib/useBreakpointMatch.ts

@@ -4,7 +4,7 @@ import { useMediaQuery } from './hooks'
 
 export type BreakpointsMatch<T extends string = string> = Record<T, any>
 
-export function useBreakpointMatch<T extends string = string>(values: BreakpointsMatch<T>) {
+export function useBreakpointMatch<T extends string = string>(values: Partial<BreakpointsMatch<T>>) {
   const { Theme } = useCodeleapContext()
 
   const themeBreakpoints: Record<string, number> = Theme?.breakpoints