@codeleap/web 3.8.0 → 3.10.0

package/package.json

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

package/src/components/Grid/index.tsx

@@ -34,7 +34,7 @@ const defaultProps: Partial<GridProps> = {
   ListSeparatorComponent: RenderSeparator,
   refreshDebounce: 3000,
   refreshSize: 40,
-  refreshThreshold: 1,
+  refreshThreshold: 0.5,
   refreshPosition: 2,
   refresh: true,
   numColumns: 2,

package/src/components/List/index.tsx

@@ -14,6 +14,8 @@ export * from './useInfiniteScroll'
 export * from './types'
 export * from './ListLayout'
 
+export type ListComponentType = <T extends any[] = any[]>(props: ListProps<T>) => React.ReactElement
+
 const RenderSeparator = (props: { separatorStyles: ViewProps<'div'>['css'] }) => {
   return (
     <View css={[props?.separatorStyles]}></View>
@@ -29,14 +31,14 @@ const defaultProps: Partial<ListProps> = {
   ListSeparatorComponent: RenderSeparator,
   refreshDebounce: 3000,
   refreshSize: 40,
-  refreshThreshold: 1,
+  refreshThreshold: 0.5,
   refreshPosition: 2,
   refresh: true,
 }
 
-const ListCP = React.forwardRef<'div', ListProps>((flatListProps, ref) => {
-  const allProps = {
-    ...defaultProps,
+export const List: ListComponentType = React.forwardRef<'div', ListProps>((flatListProps, ref) => {
+  const allProps = { // @ts-ignore
+    ...List.defaultProps,
     ...flatListProps,
   }
 
@@ -114,6 +116,5 @@ const ListCP = React.forwardRef<'div', ListProps>((flatListProps, ref) => {
   )
 })
 
-export type ListComponentType = <T extends any[] = any[]>(props: ListProps<T>) => React.ReactElement
-
-export const List = ListCP as unknown as ListComponentType
+// @ts-ignore
+List.defaultProps = defaultProps

package/src/components/Select/index.tsx

@@ -219,13 +219,17 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
       filterItems = null,
       itemProps = {},
       loadingIndicatorSize,
+      selectedOption: _selectedOption,
+      setSelectedOption: _setSelectedOption,
       ...otherProps
     } = selectProps
 
     const innerInputRef = useRef<any>(null)
     const innerWrapperRef = useRef(null)
 
-    const [selectedOption, setSelectedOption] = useState(value)
+    const hasSelectedOptionState = !TypeGuards.isNil(_selectedOption) && TypeGuards.isFunction(_setSelectedOption)
+
+    const [selectedOption, setSelectedOption] = hasSelectedOptionState ? [_selectedOption, _setSelectedOption] : useState(value)
 
     const [_isFocused, setIsFocused] = useState(false)
 

package/src/components/Select/types.ts

@@ -93,6 +93,8 @@ export type SelectProps<T = any, Multi extends boolean = false> = React.PropsWit
     itemProps?: ButtonProps
     loadingIndicatorSize?: number
     limit?: number
+    selectedOption?: ReactSelectProps<T>['value']
+    setSelectedOption?: ReactSelectProps<T>['onValueChange']
   } & Omit<
     ReactSelectProps<T, Multi>,
     'isSearchable' | 'isClearable' | 'isDisabled' | 'loadingMessage' | 'filterOption' |

package/src/components/Tooltip/index.tsx

@@ -18,6 +18,7 @@ import { AnyFunction, ComponentVariants, StylesOf, TypeGuards, useDefaultCompone
 import { TooltipComposition, TooltipPresets } from './styles'
 import { ComponentCommonProps, ComponentWithDefaultProps } from '../../types/utility'
 import { View, ViewProps } from '../View'
+import { useClickOutsideElement } from '../../lib'
 
 type TooltipComponentProps = {
   contentProps?: TooltipContentProps
@@ -39,6 +40,7 @@ export type TooltipProps = PrimitiveTooltipProps & TooltipComponentProps & {
   openOnHover?: boolean
   disabled?: boolean
   delayDuration?: number
+  closeOnClickOutside?: boolean
   onOpen?: AnyFunction
   onClose?: AnyFunction
   onValueChange?: (value: boolean) => void
@@ -52,6 +54,7 @@ const defaultProps: Partial<TooltipProps> = {
   openOnHover: true,
   disabled: false,
   delayDuration: 0,
+  closeOnClickOutside: false,
   side: 'bottom',
   triggerWrapper: View,
 }
@@ -87,6 +90,7 @@ export const Tooltip: ComponentWithDefaultProps<TooltipProps> = (props: TooltipP
     variants = [],
     responsiveVariants = {},
     styles = {},
+    closeOnClickOutside,
     ...rest
   } = allProps
 
@@ -142,6 +146,14 @@ export const Tooltip: ComponentWithDefaultProps<TooltipProps> = (props: TooltipP
     if (TypeGuards.isFunction(onPress)) onPress?.(value)
   }
 
+  const triggerRef = React.useRef(null)
+
+  const contentRef = useClickOutsideElement((isOutside) => {
+    if (isOutside && closeOnClickOutside && !openOnHover && visible) {
+      handleToggle(false)
+    }
+  }, [triggerRef])
+
   return (
     <TooltipContainer {...providerProps}>
       <TooltipWrapper
@@ -155,6 +167,7 @@ export const Tooltip: ComponentWithDefaultProps<TooltipProps> = (props: TooltipP
           onMouseEnter={() => _onHover('enter')}
           onMouseLeave={() => _onHover('leave')}
           asChild
+          ref={triggerRef}
           {...triggerProps}
         >
           <TriggerWrapper {...allProps as any} {...triggerWrapperProps}>
@@ -162,7 +175,7 @@ export const Tooltip: ComponentWithDefaultProps<TooltipProps> = (props: TooltipP
           </TriggerWrapper>
         </TooltipTrigger>
         <TooltipPortal {...portalProps}>
-          <TooltipContent css={[tooltipDirectionStyle, variantsStyles.wrapper]} sideOffset={2} side={side} {...contentProps}>
+          <TooltipContent ref={contentRef} css={[tooltipDirectionStyle, variantsStyles.wrapper]} sideOffset={2} side={side} {...contentProps}>
             {
               TypeGuards.isFunction(Content)
                 ? <Content

package/src/lib/index.ts

@@ -3,3 +3,4 @@ export * from './hooks'
 export * from './useSearchParams'
 export * from './usePopState'
 export * from './useBreakpointMatch'
+export * from './useClick'

package/src/lib/useBreakpointMatch.ts

@@ -1,15 +1,16 @@
-import { useCodeleapContext, useMemo } from '@codeleap/common'
+import React from 'react'
+import { TypeGuards, useCodeleapContext } from '@codeleap/common'
 import { useMediaQuery } from './hooks'
 
-export type BreakpointsMatch = Record<string, any> & {
-  defaultMedia: string
-}
+export type BreakpointsMatch<T extends string = string> = Record<T, any>
 
-export const useBreakpointMatch = (values: BreakpointsMatch) => {
+export function useBreakpointMatch<T extends string = string>(values: BreakpointsMatch<T>) {
   const { Theme } = useCodeleapContext()
 
-  const breakpoints = useMemo(() => {
-    const breaks = Object.entries(Theme.breakpoints as Record<string, number>)
+  const themeBreakpoints: Record<string, number> = Theme?.breakpoints
+
+  const breakpoints: Record<string, number> = React.useMemo(() => {
+    const breaks = Object.entries(themeBreakpoints)
 
     breaks?.sort((a, b) => a?.[1] - b?.[1])
 
@@ -18,16 +19,42 @@ export const useBreakpointMatch = (values: BreakpointsMatch) => {
     return sortBreakpoints
   }, [])
 
+  const breakpointValues: Array<string> = React.useMemo(() => {
+    const _breakpoints = Object.keys(breakpoints)
+
+    return _breakpoints.sort((a, b) => breakpoints?.[a] - breakpoints?.[b])
+  }, [])
+
   const breakpointMatches = {}
 
   for (const breakpoint in breakpoints) {
-    const matchesDown = useMediaQuery(Theme.media.down(breakpoint))
-    const matchesUp = useMediaQuery(Theme.media.up(breakpoint))
+    const matchesDown = useMediaQuery(Theme.media.down(breakpoint), { getInitialValueInEffect: false })
+    const matchesUp = useMediaQuery(Theme.media.up(breakpoint), { getInitialValueInEffect: false })
 
     breakpointMatches[breakpoint] = !matchesUp && matchesDown
   }
 
-  const breakpoint = Object.keys(breakpointMatches).find((key) => breakpointMatches[key])
+  const currentBreakpoint = Object.keys(breakpointMatches)?.find((key) => breakpointMatches?.[key])
+
+  const breakpoint = React.useMemo(() => {
+    const validBreakpointIndex = breakpointValues?.findIndex(_breakpoint => _breakpoint === currentBreakpoint)
+
+    const validBreakpoints = breakpointValues?.slice(validBreakpointIndex, 100)
+
+    let validBreakpoint = null
+
+    validBreakpoint = validBreakpoints?.find((currentValue) => {
+      if (Object?.keys(values)?.includes(currentValue)) {
+        return currentValue
+      }
+    })
+
+    if (TypeGuards.isNil(validBreakpoint)) {
+      validBreakpoint = breakpointValues?.reverse()?.find(_breakpoint => !!values?.[_breakpoint])
+    }
+
+    return validBreakpoint
+  }, [currentBreakpoint])
 
-  return values[breakpoint] ?? values[values.defaultMedia]
+  return values?.[breakpoint]
 }

package/src/lib/useClick.ts

@@ -0,0 +1,44 @@
+import { TypeGuards } from '@codeleap/common'
+import React, { useEffect } from 'react'
+
+type HandlerClickOutside = (clickedOutside: boolean) => void
+
+type UseClickOutsideElementReturn = React.MutableRefObject<any>
+
+export function useClickOutsideElement(
+  handler: HandlerClickOutside, 
+  elements: Array<React.MutableRefObject<any>> = null,
+): UseClickOutsideElementReturn {
+  const elementRef = React.useRef(null)
+
+  const handleClickOutside = React.useCallback((event: MouseEvent) => {
+    if (!elementRef.current) return
+
+    const clickedOutsideElement = !elementRef.current.contains(event?.target)
+    const clickedOutsideElements = [true]
+
+    if (TypeGuards?.isArray(elements)) {
+      elements?.forEach(element => {
+        if (element.current) {
+          clickedOutsideElements.push(!element.current.contains(event?.target))
+        }
+      })
+    }
+
+    if (clickedOutsideElement && clickedOutsideElements.every((clickedOutside) => !!clickedOutside)) {
+      handler(true)
+    } else {
+      handler(false)
+    }
+  }, [handler])
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside)
+    }
+  }, [handleClickOutside])
+
+  return elementRef
+}