@codeleap/web 3.23.5 → 3.24.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.23.5",
+  "version": "3.24.2",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
@@ -10,6 +10,7 @@
   "license": "UNLICENSED",
   "devDependencies": {
     "@codeleap/config": "*",
+    "@codeleap/common": "*",
     "@emotion/react": "link:../../apps/web/node_modules/@emotion/react",
     "@types/react-slick": "^0.23.10",
     "react": "link:../../apps/web/node_modules/react"
@@ -47,9 +48,9 @@
     "axios": "1.3.5",
     "gatsby-plugin-intl": "^0.3.3",
     "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react-dom": "18.2.0",
     "react-helmet": "^6.1.0",
     "react-select": "*",
-    "typescript": "4.5.4"
+    "typescript": "5.0.4"
   }
 }

package/src/components/ActivityIndicator/index.tsx

@@ -70,6 +70,6 @@ export const ActivityIndicator = React.forwardRef<typeof View, ActivityIndicator
 }) as ComponentWithDefaultProps<ActivityIndicatorProps>
 
 ActivityIndicator.defaultProps = {
-  component: View,
+  component: View as ActivityIndicatorProps['component'],
   size: null,
 }

package/src/components/Checkbox/index.tsx

@@ -114,8 +114,9 @@ export const Checkbox = (props: CheckboxProps) => {
   const _checkboxOnLeft = checkboxOnLeft ?? variantStyles.__props?.checkboxOnLeft
 
   const handleChange = (e) => {
+    const isSpaceBarClick = e?.keyCode === 32
     if (disabled) return
-    if (onValueChange && (e?.type === 'click' || e?.keyCode === 13 || e?.key === 'Enter')) onValueChange?.(!value)
+    if (onValueChange && (e?.type === 'click' || e?.keyCode === 13 || isSpaceBarClick || e?.key === 'Enter')) onValueChange?.(!value)
   }
 
   return <InputBase

package/src/components/ColorPicker/types.ts

@@ -21,5 +21,5 @@ export type ColorPickerProps = React.PropsWithChildren<{
   onClear?: () => void
   openPickerComponent?: (props: { color: ColorTypes; visible: boolean; toggle: (v?: boolean) => void }) => JSX.Element
   pickerComponent?: (props: any) => JSX.Element
-  footerComponent?: (props: {color: string | RgbColor | RgbColor; handleConfirmation: () => void; handleClear: () => void}) => JSX.Element
+  footerComponent?: (props: {color: ColorTypes; handleConfirmation: () => void; handleClear: () => void}) => JSX.Element
 } & ComponentVariants<typeof ColorPickerPresets>>

package/src/components/CropPicker/index.tsx

@@ -8,9 +8,8 @@ import { CropPickerProps } from './types'
 import { useCropPicker } from './useCropPicker'
 import { Modal, Button, FileInput, FileInputRef, LoadingOverlay } from '../components'
 
-const ReactCrop: React.Component = require('react-image-crop').Component
+const ReactCrop: React.ElementType = require('react-image-crop').Component
 import 'react-image-crop/dist/ReactCrop.css'
-import { ComponentWithDefaultProps } from '../../types'
 
 export * from './styles'
 export * from './types'
@@ -20,6 +19,7 @@ export * from './useCropPicker'
 export const _CropPicker = forwardRef<FileInputRef, CropPickerProps>(
   (props: CropPickerProps, ref) => {
     const allProps = {
+      // @ts-ignore
       ...CropPicker.defaultProps,
       ...props,
     }
@@ -114,4 +114,4 @@ export const _CropPicker = forwardRef<FileInputRef, CropPickerProps>(
   },
 )
 
-export const CropPicker = React.memo(_CropPicker) as ComponentWithDefaultProps<CropPickerProps>
+export const CropPicker = React.memo(_CropPicker)

package/src/components/CropPicker/useCropPicker.tsx

@@ -70,7 +70,7 @@ export function useCropPicker({
           width: 100,
           height: (naturalWidth / aspect / naturalHeight) * 100,
         }
-    const initialCrop = {
+    const initialCrop: Crop = {
       ...v,
       x: (100 - v.width) / 2,
       y: (100 - v.height) / 2,

package/src/components/DatePicker/index.tsx

@@ -119,7 +119,7 @@ export function DatePicker(props: DatePickerProps) {
 
       return (
         <View css={getStyles('dayWrapper')}>
-          <Text style={getStyles('day')} disabled={isDisabled} text={day} />
+          <Text style={getStyles('day')} disabled={isDisabled} text={String(day)} />
         </View>
       )
     },

package/src/components/DatePicker/types.ts

@@ -28,11 +28,11 @@ type RootStyles = ComponentVariants<typeof DatePickerPresets>
 
 export type DayComponentProps = {
   day: string | number
-  value: Date
+  value?: Date
   date: Date
-  disabled: boolean
-  selected: boolean
-  variantStyles: any
+  disabled?: boolean
+  selected?: boolean
+  variantStyles?: any
 }
 
 export type YearComponentProps = {

package/src/components/Dropzone/index.tsx

@@ -5,7 +5,6 @@ import { FileRejection, useDropzone } from 'react-dropzone'
 import { View, ViewProps } from '../View'
 import { Text } from '../Text'
 import { Icon } from '../Icon'
-
 import { forwardRef, useImperativeHandle, useState, HTMLProps } from 'react'
 import { ActionIcon } from '../ActionIcon'
 
@@ -16,7 +15,6 @@ const defaultProps: Partial<DropzoneProps> = {
   fileLeftIcon: 'file' as IconPlaceholder,
   fileRightIcon: 'x' as IconPlaceholder,
   withImagePreview: true,
-
 }
 
 function isImage(file) {
@@ -83,7 +81,7 @@ const FilePreview = (props: DropzoneFilePreviewProps) => {
   const _isImage = isImage(file)
   const isPreview = withImagePreview && _isImage
 
-  const [imageUrl, setImageUrl] = useState()
+  const [imageUrl, setImageUrl] = useState<string>()
 
   const revokeImageUrl = () => {
     URL.revokeObjectURL(imageUrl)
@@ -110,7 +108,7 @@ const FilePreview = (props: DropzoneFilePreviewProps) => {
 
 const DropzoneComponent = (props: DropzoneProps, ref: React.ForwardedRef<DropzoneRef>) => {
   const allProps = {
-    ...defaultProps,
+    ...DropzoneComponent.defaultProps,
     ...props,
   }
   const {
@@ -133,17 +131,15 @@ const DropzoneComponent = (props: DropzoneProps, ref: React.ForwardedRef<Dropzon
     FilePreviewComponent,
     ...rest } = allProps
 
-  const [rejectedFilesState,
-    setRejectedFilesState] = useState<DropzoneProps['rejectedFiles']>([])
+  const [rejectedFilesState, setRejectedFilesState] = useState<DropzoneProps['rejectedFiles']>([])
   const [rejectedFiles, setRejectedFiles] = [rejectedFilesProps || rejectedFilesState, setRejectedFilesProps || setRejectedFilesState]
 
-  const variantStyles = useDefaultComponentStyle<'u:Dropzone',
-    typeof DropzonePresets>('u:Dropzone', {
-      responsiveVariants,
-      variants,
-      styles,
-      rootElement: 'wrapper',
-    })
+  const variantStyles = useDefaultComponentStyle<'u:Dropzone', typeof DropzonePresets>('u:Dropzone', {
+    responsiveVariants,
+    variants,
+    styles,
+    rootElement: 'wrapper',
+  })
 
   const fileRightIconStyles = useNestedStylesByKey('fileRightIcon', variantStyles)
 
@@ -235,4 +231,5 @@ export * from './types'
 
 DropzoneComponent.defaultProps = defaultProps
 
+// @ts-ignore
 export const Dropzone = forwardRef(DropzoneComponent)

package/src/components/Dropzone/types.ts

@@ -11,7 +11,6 @@ import {
   FileRejection,
   DropzoneRef as ReactDropzoneRef,
 } from 'react-dropzone'
-import { ReactDispatch } from 'react'
 import { ActionIconComposition } from '../ActionIcon'
 
 export type DropzoneFile = File
@@ -26,10 +25,8 @@ export type DropzoneProps = ComponentVariants<typeof DropzonePresets> &
     placeholder?: string
     acceptedFiles: File[]
     rejectedFiles?: DropzoneFileRejection[]
-    setAcceptedFiles: ReactDispatch<React.SetStateAction<DropzoneFile[]>>
-    setRejectedFiles?: ReactDispatch<
-      React.SetStateAction<DropzoneFileRejection[]>
-    >
+    setAcceptedFiles: React.Dispatch<React.SetStateAction<DropzoneFile[]>>
+    setRejectedFiles?: React.Dispatch<React.SetStateAction<DropzoneFileRejection[]>>
     onRemove?: (file: DropzoneFile) => void
     children?: React.ReactNode
     fileRightIcon?: IconPlaceholder

package/src/components/EmptyPlaceholder/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Icon } from '../Icon'
-import { View, ViewProps } from '../View'
+import { View } from '../View'
 import { Text } from '../Text'
 import { ActivityIndicator, ActivityIndicatorComposition, ActivityIndicatorProps } from '../ActivityIndicator'
 import { EmptyPlaceholderComposition, EmptyPlaceholderPresets } from './styles'
@@ -32,7 +32,7 @@ export type EmptyPlaceholderProps = ComponentVariants<typeof EmptyPlaceholderPre
   loading?: boolean
   styles?: StylesOf<EmptyPlaceholderComposition>
   style?: React.CSSProperties
-  renderEmpty?: (props: RenderEmptyProps) => React.ReactElement
+  renderEmpty?: (props: RenderEmptyProps) => JSX.Element
   wrapperProps?: Partial<typeof View>
   imageWrapperProps?: Partial<typeof View>
   indicatorProps?: Partial<ActivityIndicatorProps>
@@ -81,9 +81,6 @@ export const EmptyPlaceholder = (props: EmptyPlaceholderProps) => {
     if (TypeGuards.isString(IconEmpty)) {
       return <Icon debugName={debugName} name={IconEmpty as IconPlaceholder} forceStyle={variantStyles.icon} />
     } else if (React.isValidElement(IconEmpty)) {
-      // @ts-ignore
-      return <IconEmpty {...props} />
-    } else {
       return <IconEmpty {...props} />
     }
   }, [IconEmpty])
@@ -119,14 +116,14 @@ export const EmptyPlaceholder = (props: EmptyPlaceholderProps) => {
         {_Image}
       </View>
 
-      {React.isValidElement(emptyText) 
-        ? emptyText 
-        : <Text debugName={debugName} text={emptyText} css={variantStyles.title}/>
+      {TypeGuards.isString(emptyText) 
+        ? <Text debugName={debugName} text={emptyText} css={variantStyles.title}/>
+        : React.isValidElement(emptyText) ? emptyText : null
       }
       
-      {React.isValidElement(description) 
-        ? description 
-        : TypeGuards.isString(description) && <Text debugName={debugName} text={description} css={variantStyles.description}/>
+      {TypeGuards.isString(description) 
+        ? <Text debugName={debugName} text={description} css={variantStyles.description}/>
+        : React.isValidElement(description) ? description : null
       }
     </View>
   )

package/src/components/List/ListLayout.tsx

@@ -76,6 +76,7 @@ export const ListLayout = (props: ListLayoutProps) => {
   ]), [isLoading, isEmpty])
 
   return (
+    // @ts-ignore
     <View css={[getKeyStyle('wrapper'), style]} ref={scrollableRef}>
       {!!ListHeaderComponent ? <ListHeaderComponent /> : null}
 

package/src/components/Progress/Circle/index.tsx

@@ -92,7 +92,7 @@ export const ProgressCircle = (props: ProgressCircleProps) => {
         {TypeGuards.isString(text) || showProgress ? (
           <Text
             style={variantStyles.text}
-            text={showProgress ? formatProgress(progress) : text}
+            text={showProgress ? formatProgress(progress) : String(text)}
             {...textProps}
           />
         ) : text}

package/src/components/SearchInput/index.tsx

@@ -64,7 +64,7 @@ export const SearchInput: ComponentWithDefaultProps<SearchInputProps> = (props)
     if (TypeGuards.isFunction(onClear)) onClear?.()
   }
 
-  const showClearIcon = !!search?.trim() && clearable
+  const showClearIcon = !!String(search)?.trim() && clearable
 
   return (
     <TextInput
@@ -76,10 +76,12 @@ export const SearchInput: ComponentWithDefaultProps<SearchInputProps> = (props)
       }}
       debugName={`Search ${debugName}`}
       rightIcon={showClearIcon && {
+        debugName: `Search ${debugName} right icon`,
         name: clearIcon,
         onPress: handleClear,
       }}
       leftIcon={{
+        debugName: `Search ${debugName} left icon`,
         name: searchIcon,
       }}
       {...rest}

package/src/components/SegmentedControl/SegmentedControlOption.tsx

@@ -51,7 +51,7 @@ const SegmentedControlOptionCP = (props: SegmentedControlOptionProps, ref: Optio
         variantStyles.button,
         selected && variantStyles['button:selected'],
         disabled && variantStyles['button:disabled'],
-        style,
+        style as any,
       ]}
       onPress={onPress}
       disabled={disabled}

package/src/components/SegmentedControl/index.tsx

@@ -135,7 +135,7 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
     largestWidth,
   ]
 
-  const onSelectTab = (option: SegmentedControlOptionProps, e?: React.KeyboardEvent<HTMLDivElement>) => {
+  const onSelectTab = (option: SegmentedControlOptionProps, e?: React.KeyboardEvent<HTMLButtonElement>) => {
     if (!e || e?.keyCode === 13 || e?.key === 'Enter') {
       if (!debounceEnabled || !TypeGuards.isNumber(debounce)) {
         onValueChange(option.value)

package/src/components/Select/index.tsx

@@ -418,8 +418,8 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
           tabSelectsValue={false}
           tabIndex={0}
           backspaceRemovesValue={true}
-          escapeRemoves={true}
-          deleteRemoves={true}
+          // escapeRemoves={true}
+          // deleteRemoves={true}
           {...otherProps}
           {..._props}
           onKeyDown={isFocused ? handleKeyDown : null}

package/src/components/Select/types.ts

@@ -1,6 +1,7 @@
 import { ComponentVariants, FormTypes, StylesOf, yup } from '@codeleap/common'
 import { CSSInterpolation } from '@emotion/css'
 import { CSSObject } from '@emotion/react'
+import { MutableRefObject } from 'react'
 import { GroupBase, NoticeProps, OptionProps, Props } from 'react-select'
 import { AsyncProps } from 'react-select/async'
 import { ComponentCommonProps } from '../../types'
@@ -95,8 +96,9 @@ export type SelectProps<T = any, Multi extends boolean = false> = React.PropsWit
     limit?: number
     loadInitialValue?: boolean
     loadingMessage?: string
-    selectedOption?: ReactSelectProps<T>['value']
-    setSelectedOption?: ReactSelectProps<T>['onValueChange']
+    selectedOption?: { label: FormTypes.Label; value: T; } | SelectValue<T, Multi>
+    selectRef?: MutableRefObject<any>
+    setSelectedOption?: (value: { label: FormTypes.Label; value: T; } | SelectValue<T, Multi>) => void
   } & Omit<
     ReactSelectProps<T, Multi>,
     'isSearchable' | 'isClearable' | 'isDisabled' | 'loadingMessage' | 'filterOption' |

package/src/components/Slider/index.tsx

@@ -229,7 +229,6 @@ export const Slider = (props: SliderProps) => {
         {defaultValue.map((_, i) => (
           <SliderThumb
             key={i}
-            index={i}
             style={thumbStyle}
             onClick={() => {
               if (onPressThumbSetValue) onValueChange?.(value)

package/src/components/Switch/index.tsx

@@ -89,7 +89,7 @@ export const Switch = (props: SwitchProps) => {
 
   const _switchOnLeft = switchOnLeft ?? variantStyles.__props?.switchOnLeft
 
-  const handleChange = (e?: React.KeyboardEvent<HTMLDivElement>) => {
+  const handleChange = (e) => {
     if (disabled) return
     if (e?.type === 'click' || e?.keyCode === 13 || e?.key === 'Enter') {
       if (onValueChange) onValueChange?.(!value)

package/src/components/Text/index.tsx

@@ -57,7 +57,7 @@ export const Text = <T extends ElementType>(textProps: TextProps<T>) => {
 
   const disabled = isPressable === false
 
-  const _onPress = (e: React.MouseEventHandler<T>) => {
+  const _onPress = (e) => {
     if (disabled) return
 
     const handlePress = () => {
@@ -91,12 +91,16 @@ export const Text = <T extends ElementType>(textProps: TextProps<T>) => {
     onClick: disabled ? null : _onPress,
   } : {}
 
+  const componentProps: any = {
+    ...props,
+    ...pressProps,
+    ...animatedProps
+  }
+
   return (
     <Component
       css={_styles}
-      {...props}
-      {...pressProps}
-      {...animatedProps}
+      {...componentProps}
     >
       {text || children}
     </Component>

package/src/components/Text/types.ts

@@ -6,7 +6,7 @@ import { TextComposition, TextPresets } from './styles'
 export type TextProps<T extends ElementType> = ComponentPropsWithoutRef<T> &
   ComponentVariants<typeof TextPresets> & {
     component?: T
-    text: string
+    text?: string
     styles?: StylesOf<TextComposition>
     msg?: string
     debugName?: string

package/src/components/TextEditor/index.tsx

@@ -99,7 +99,7 @@ export const TextEditor = (props: TextEditorProps) => {
       <_BubbleMenu />
       <_FloatingMenu />
       <EditorContent editor={editor} />
-      {hasError ? <Text text={errorMessage} css={variantStyles['errorMessage:error']} /> : null}
+      {hasError ? <Text text={errorMessage as string} css={variantStyles['errorMessage:error']} /> : null}
       <FileInput
         ref={fileInputRef}
       />

package/src/components/TextInput/index.tsx

@@ -34,7 +34,7 @@ type NativeTextInputProps = HTMLProps<'input'>
 
 export type TextInputProps =
   Omit<InputBaseProps, 'styles' | 'variants'> &
-  Omit<NativeTextInputProps, 'value' | 'crossOrigin'> & {
+  Omit<NativeTextInputProps, 'value' | 'crossOrigin' | 'ref'> & {
     styles?: StylesOf<TextInputComposition>
     password?: boolean
     validate?: FormTypes.ValidatorWithoutForm<string> | yup.SchemaOf<string>
@@ -114,10 +114,12 @@ export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, i
     styles,
   })
 
+  // @ts-ignore
   useImperativeHandle(inputRef, () => {
     return {
       focus: () => {
         if (isMasked) {
+          // @ts-expect-error
           innerInputRef.current?.getInputDOMNode()?.focus()
         }
         
@@ -226,6 +228,7 @@ export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, i
         ...(inputBaseProps.innerWrapperProps || {}),
         [inputBaseAction]: () => {
           if (isMasked) {
+            // @ts-expect-error
             innerInputRef.current?.getInputDOMNode()?.focus()
           }
           innerInputRef.current?.focus?.()
@@ -277,6 +280,6 @@ export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, i
   )
 })
 
-export const TextInput = TextInputComponent as ComponentWithDefaultProps<TextInputProps>
+export const TextInput = TextInputComponent as unknown as ComponentWithDefaultProps<TextInputProps>
 
-TextInput.defaultProps = defaultProps
+TextInput.defaultProps = defaultProps as TextInputProps

package/src/components/Tooltip/index.tsx

@@ -32,7 +32,7 @@ export type TooltipProps = PrimitiveTooltipProps & TooltipComponentProps & {
   toggle?: AnyFunction
   visible?: boolean
   content: React.ReactNode | ((props: TooltipProps & { variantsStyles: StylesOf<TooltipComposition> }) => JSX.Element)
-  triggerWrapper?: React.ReactNode
+  triggerWrapper?: React.ElementType
   triggerWrapperProps?: Partial<ViewProps<'div'>>
   styles?: StylesOf<TooltipComposition>
   side?: 'left' | 'right' | 'bottom' | 'top'
@@ -57,7 +57,7 @@ const defaultProps: Partial<TooltipProps> = {
   delayDuration: 0,
   closeOnClickOutside: false,
   side: 'bottom',
-  triggerWrapper: View,
+  triggerWrapper: View as unknown as React.ElementType,
 }
 
 export const Tooltip: ComponentWithDefaultProps<TooltipProps> = (props: TooltipProps) => {
@@ -163,6 +163,7 @@ export const Tooltip: ComponentWithDefaultProps<TooltipProps> = (props: TooltipP
         open={visible}
         onOpenChange={onOpenChange}
         {...rest}
+        // @ts-ignore expected error
         css={[variantsStyles.wrapper, style]}
       >
         <TooltipTrigger

package/src/components/Touchable/index.tsx

@@ -13,7 +13,7 @@ export type TouchableProps<T extends ElementType = 'button'> = ComponentPropsWit
   component?: T
   disabled?: boolean
   propagate?: boolean
-  style?: React.CSSObject
+  style?: React.CSSProperties
   onPress?: AnyFunction
   debugName: string
   debugComponent?: string
@@ -26,10 +26,10 @@ export type TouchableProps<T extends ElementType = 'button'> = ComponentPropsWit
   analyticsData?: Record<string, any>
 } & ComponentVariants<typeof TouchablePresets>
 
-const defaultProps: TouchableProps<'button'> = {
+const defaultProps: Partial<TouchableProps<'button'>> = {
   propagate: true,
   debounce: null,
-  component: View,
+  component: View as unknown as 'button',
   style: {},
   styles: {},
   responsiveVariants: {},
@@ -44,7 +44,7 @@ export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
   touchableProps: TouchableProps<T>,
   ref,
 ) => {
-  const mergedProps: TouchableProps = {
+  const mergedProps = {
     ...(defaultProps),
     ...(touchableProps),
   }
@@ -91,7 +91,7 @@ export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
 
   const notPressable = !TypeGuards.isFunction(onPress) && !TypeGuards.isFunction(onClick)
 
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+  const handleClick = (event) => {
     if (disabled) return
 
     if (!propagate) stopPropagation(event)
@@ -150,6 +150,7 @@ export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
   const testId = getTestId(mergedProps)
 
   return (
+    // @ts-ignore
     <View
       component={Component || 'button'}
       {...props}

package/src/components/View/index.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx, CSSObject } from '@emotion/react'
 import { useDefaultComponentStyle, useCodeleapContext, useMemo, TypeGuards } from '@codeleap/common'
-import { forwardRef, Ref } from 'react'
+import React, { forwardRef, Ref } from 'react'
 import { ViewPresets } from './styles'
 import { useMediaQuery } from '../../lib/hooks'
 import { NativeHTMLElement } from '../../types'
@@ -14,7 +14,7 @@ export * from './types'
 
 export const ViewCP = (
   viewProps: ViewProps<'div'>,
-  ref: Ref<any>,
+  ref: React.Ref<any>,
 ) => {
   const {
     responsiveVariants = {},
@@ -86,6 +86,7 @@ export const ViewCP = (
   return (
     <Component
       css={componentStyles}
+      // @ts-expect-error
       ref={ref}
       {...onHoverProps}
       {...props}