@codeleap/web 3.4.0 → 3.5.0

package/src/components/Tooltip/index.tsx

@@ -1,155 +1,187 @@
-/** @jsx jsx */
-import { CSSObject, jsx } from '@emotion/react'
+import React, { useState } from 'react'
 import {
-  ComponentVariants,
-  useBooleanToggle,
-  useDefaultComponentStyle,
-  useDebounce,
-} from '@codeleap/common'
-import { ReactNode } from 'react'
-import { View } from '../View'
-
-import { StylesOf } from '../../types/utility'
-import { Touchable } from '../Touchable'
-import { useClickOutside } from '../../lib/hooks'
+  Provider as TooltipContainer,
+  Root as TooltipWrapper,
+  Trigger as TooltipTrigger,
+  Portal as TooltipPortal,
+  Content as TooltipContent,
+  Arrow as TooltipArrow,
+  TooltipProps as PrimitiveTooltipProps,
+  TooltipContentProps,
+  TooltipPortalProps,
+  TooltipArrowProps,
+  TooltipTriggerProps,
+  TooltipProviderProps,
+} from '@radix-ui/react-tooltip'
+
+import { AnyFunction, ComponentVariants, StylesOf, TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
 import { TooltipComposition, TooltipPresets } from './styles'
+import { ComponentCommonProps, ComponentWithDefaultProps } from '../../types/utility'
+import { View, ViewProps } from '../View'
 
-type TooltipPosition = 'left' | 'top' | 'bottom' | 'right'
-
-const arrowPositionStyles = {
-  left: {
-    right: `100%`,
-    top: '50%',
-    transform: 'translate(50%,-50%)',
-    borderRight: 'none',
-    borderTop: 'none',
-  },
-  right: {
-    left: `100%`,
-    top: '50%',
-    transform: 'translate(-50%,-50%)',
-    borderLeft: 'none',
-    borderBottom: 'none',
-  },
-  bottom: {
-    left: '50%',
-    top: `100%`,
-    transform: 'translate(-50%,-50%)',
-    borderTop: 'none',
-    borderLeft: 'none',
-  },
-  top: {
-    left: '50%',
-    bottom: `100%`,
-    transform: 'translate(-50%,50%)',
-    borderBottom: 'none',
-    borderRight: 'none',
-  },
+type TooltipComponentProps = {
+  contentProps?: TooltipContentProps
+  portalProps?: TooltipPortalProps
+  arrowProps?: TooltipArrowProps
+  triggerProps?: TooltipTriggerProps
+  providerProps?: TooltipProviderProps
 }
 
-const tooltipPositionStyles = {
-  left: (arrow = 0, visible = false) => ({
-    right: `calc(100% + ${arrow}px)`,
-    top: '50%',
-    transform: `translate(0%,-50%) scale(${visible ? '1' : '0'})`,
-  }),
-  right: (arrow = 0, visible = false) => ({
-    left: `calc(100% + ${arrow}px)`,
-    top: '50%',
-    transform: `translate(0%,-50%) scale(${visible ? '1' : '0'})`,
-  }),
-  bottom: (arrow = 0, visible = false) => ({
-    left: '50%',
-    top: `calc(100% + ${arrow}px)`,
-    transform: `translate(-50%,0%) scale(${visible ? '1' : '0'})`,
-  }),
-  top: (arrow = 0, visible = false) => ({
-    left: '50%',
-    bottom: `calc(100% + ${arrow}px)`,
-    transform: `translate(-50%,0%) scale(${visible ? '1' : '0'})`,
-  }),
+export type TooltipProps = PrimitiveTooltipProps & TooltipComponentProps & {
+  toggle?: AnyFunction
+  visible?: boolean
+  content: React.ReactNode | ((props: TooltipProps & { variantsStyles: StylesOf<TooltipComposition> }) => JSX.Element)
+  triggerWrapper?: React.ReactNode
+  triggerWrapperProps?: Partial<ViewProps<'div'>>
+  styles?: StylesOf<TooltipComposition>
+  side?: 'left' | 'right' | 'bottom' | 'top'
+  openOnPress?: boolean
+  openOnHover?: boolean
+  disabled?: boolean
+  delayDuration?: number
+  onOpen?: AnyFunction
+  onClose?: AnyFunction
+  onValueChange?: (value: boolean) => void
+  onHover?: (hoverType: 'enter' | 'leave', value: boolean) => void
+  onPress?: (value: boolean) => void
+  children?: React.ReactNode
+} & ComponentVariants<typeof TooltipPresets> & ComponentCommonProps
+
+const defaultProps: Partial<TooltipProps> = {
+  openOnPress: true,
+  openOnHover: true,
+  disabled: false,
+  delayDuration: 0,
+  side: 'bottom',
+  triggerWrapper: View,
 }
 
-export type TooltipProps = React.PropsWithChildren<{
-  position: TooltipPosition
-  styles?: StylesOf<TooltipComposition>
-  showOn?: 'click' | 'hover'
-  content?: string | ReactNode
-} & ComponentVariants<typeof TooltipPresets>
->
-const invert = (pos) => {
-  switch (pos) {
-    case 'left':
-      return 'right'
-    case 'right':
-      return 'left'
-    case 'top':
-      return 'bottom'
-    case 'bottom':
-      return 'top'
+export const Tooltip: ComponentWithDefaultProps<TooltipProps> = (props: TooltipProps) => {
+  const allProps = {
+    ...Tooltip.defaultProps,
+    ...props,
   }
-}
 
-export const Tooltip = (props:TooltipProps) => {
   const {
+    toggle: _toggle = null,
+    visible: _visible = null,
     children,
-    position = 'top',
-    styles,
-    variants,
-    responsiveVariants,
-    showOn,
-    content,
-  } = props
+    content: Content,
+    triggerWrapperProps = {},
+    triggerWrapper: TriggerWrapper,
+    side,
+    disabled,
+    delayDuration,
+    openOnPress,
+    openOnHover,
+    onOpen,
+    onClose,
+    onValueChange,
+    onHover,
+    onPress,
+    contentProps = {},
+    portalProps = {},
+    arrowProps = {},
+    triggerProps = {},
+    providerProps = {},
+    variants = [],
+    responsiveVariants = {},
+    styles = {},
+    ...rest
+  } = allProps
 
-  const [isVisible, setVisible] = useBooleanToggle(false)
-
-  const [debouncedVisible] = useDebounce(isVisible, 100)
-  const arrowPos = arrowPositionStyles[invert(position)]
-
-  const variantStyles = useDefaultComponentStyle('Tooltip', {
+  const variantsStyles = useDefaultComponentStyle<'u:Tooltip', typeof TooltipPresets>('u:Tooltip', {
     responsiveVariants,
     variants,
     styles,
   })
 
-  const style = {
-    transition: 'transform 0.2s ease',
-    '&:after': {
-      ...variantStyles.arrow,
-      ...arrowPos,
-      transform: arrowPos.transform + ' rotate(45deg)',
-    },
-    ...tooltipPositionStyles[position](10, debouncedVisible),
-    ...variantStyles.bubble,
-  } as CSSObject
-
-  const wrapperRef = useClickOutside(
-    () => {
-      if (isVisible) {
-        setVisible(false)
-      }
-    },
-  )
+  const hasStateProps = !TypeGuards.isNil(_visible) && TypeGuards.isFunction(_toggle)
 
-  if (showOn === 'click') {
-    return (
-      <Touchable
-        onPress={() => setVisible()}
-        ref={wrapperRef}
-        css={variantStyles.wrapper}
-      >
-        <View css={style}>{content}</View>
-        {children}
-      </Touchable>
-    )
+  const [visible, toggle] = hasStateProps ? [_visible, _toggle] : useState(false)
+
+  const tooltipDirectionStyle = React.useMemo(() => {
+    return side ? variantsStyles[`wrapper:${side}`] : variantsStyles.wrapper
+  }, [side, variantsStyles])
+
+  function handleToggle(_value: boolean, isToggle = true) {
+    if (disabled) return
+
+    if (_value === true) {
+      onOpen?.()
+    } else {
+      onClose?.()
+    }
+
+    if (isToggle) toggle(_value)
+
+    if (TypeGuards.isFunction(onValueChange)) onValueChange?.(_value)
+  }
+
+  const onOpenChange = React.useCallback((_open: boolean) => {
+    handleToggle(_open, false)
+  }, [handleToggle])
+
+  const _onHover = (type: 'enter' | 'leave') => {
+    if (!openOnHover || disabled) return
+
+    const value = !visible
+
+    if (type === 'leave' && visible === false) return
+
+    handleToggle(value)
+    if (TypeGuards.isFunction(onHover)) onHover?.(type, value)
+  }
+
+  const _onPress = () => {
+    if (!openOnPress || disabled) return
+
+    const value = !visible
+
+    handleToggle(value)
+    if (TypeGuards.isFunction(onPress)) onPress?.(value)
   }
 
   return (
-    <View onHover={setVisible} ref={wrapperRef} css={variantStyles.wrapper}>
-      <View css={style}>{content}</View>
-      {children}
-    </View>
+    <TooltipContainer {...providerProps}>
+      <TooltipWrapper
+        delayDuration={delayDuration}
+        open={visible}
+        onOpenChange={onOpenChange}
+        {...rest}
+      >
+        <TooltipTrigger
+          onClick={_onPress}
+          onMouseEnter={() => _onHover('enter')}
+          onMouseLeave={() => _onHover('leave')}
+          asChild
+          {...triggerProps}
+        >
+          <TriggerWrapper {...allProps as any} {...triggerWrapperProps}>
+            {children}
+          </TriggerWrapper>
+        </TooltipTrigger>
+        <TooltipPortal {...portalProps}>
+          <TooltipContent css={[tooltipDirectionStyle, variantsStyles.wrapper]} sideOffset={2} side={side} {...contentProps}>
+            {
+              TypeGuards.isFunction(Content)
+                ? <Content
+                  {...allProps}
+                  visible={visible}
+                  toggle={toggle}
+                  variantsStyles={variantsStyles}
+                />
+                : Content
+            }
+            <TooltipArrow {...arrowProps} />
+          </TooltipContent>
+        </TooltipPortal>
+      </TooltipWrapper>
+
+    </TooltipContainer>
   )
 }
 
-export * from './styles'
+Tooltip.defaultProps = defaultProps
+
+export * from './styles'

package/src/components/Tooltip/styles.ts

@@ -1,9 +1,13 @@
-import { createDefaultVariantFactory, includePresets } from "@codeleap/common"
-
-export type TooltipComposition = "wrapper" | "arrow" | "bubble"
-
-const createTooltipStyle = createDefaultVariantFactory<TooltipComposition>()
-
-export const TooltipPresets = includePresets((styles) => createTooltipStyle(() => ({
-  wrapper: styles,
-})) )
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type TooltipSide = 'left' | 'right' | 'bottom' | 'top'
+export type TooltipState = 'delayed-open' | 'closed' | 'instant-open' | 'disabled'
+export type TooltipParts = 'wrapper' | 'arrow'
+
+export type TooltipComposition = `wrapper:${TooltipSide}` | TooltipParts
+
+const createTooltipStyle = createDefaultVariantFactory<TooltipComposition>()
+
+export const TooltipPresets = includePresets((styles) => createTooltipStyle(() => ({
+  wrapper: styles,
+})))

package/src/components/Touchable/index.tsx

@@ -1,67 +1,129 @@
-/** @jsx jsx */
-import { CSSObject, jsx } from '@emotion/react'
-import { AnyFunction, useCodeleapContext } from '@codeleap/common'
-import React, { forwardRef } from 'react'
+import { AnyFunction, ComponentVariants, onMount, TypeGuards, useCodeleapContext, useDefaultComponentStyle } from '@codeleap/common'
+import React, { ComponentPropsWithRef, ElementType, forwardRef } from 'react'
 import { stopPropagation } from '../../lib'
 import { View } from '../View'
-import { TouchableComposition } from './styles'
-import { StylesOf, NativeHTMLElement, HTMLProps } from '../../types'
+import { TouchableComposition, TouchablePresets } from './styles'
+import { CSSInterpolation } from '@emotion/css'
+import { StylesOf, NativeHTMLElement } from '../../types'
 
 export * from './styles'
 
-export type TouchableProps<T extends NativeHTMLElement = 'button'> = Omit<HTMLProps<T>, 'style'> & {
+export type TouchableProps<T extends ElementType = 'button'> = ComponentPropsWithRef<T> & {
+  css?: CSSInterpolation | CSSInterpolation[]
   component?: T
   disabled?: boolean
   propagate?: boolean
-  style?: CSSObject
+  style?: React.CSSObject
   onPress?: AnyFunction
+  debugName: string
   debugComponent?: string
-  debugName?: string
   styles?: StylesOf<TouchableComposition>
-}
+  debounce?: number
+  leadingDebounce?: boolean
+  setPressed?: (pressed: boolean) => void
+} & ComponentVariants<typeof TouchablePresets>
 
 export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
   touchableProps: TouchableProps<T>,
   ref,
 ) => {
   const {
-
     propagate = true,
+    debounce = null,
+    leadingDebounce,
+    setPressed,
     component: Component = View,
     disabled,
     onPress,
     onClick,
-    debugComponent,
     debugName,
+    debugComponent,
+    style = {},
+    styles = {},
+    responsiveVariants = {},
+    variants = [],
+    css = [],
     ...props
-  } = touchableProps
+  } = touchableProps as TouchableProps
+
+  const pressed = React.useRef(!!leadingDebounce)
+
+  onMount(() => {
+    if (!!leadingDebounce && !!debounce) {
+      setTimeout(() => {
+        pressed.current = false
+      }, debounce)
+    }
+  })
+
+  const variantStyles = useDefaultComponentStyle<'u:Touchable', typeof TouchablePresets>('u:Touchable', {
+    responsiveVariants,
+    variants,
+    styles,
+    rootElement: 'wrapper'
+  })
 
   const { logger } = useCodeleapContext()
 
-  const handleClick = (event: React.MouseEvent<T>) => {
+  const notPressable = !TypeGuards.isFunction(onPress) && !TypeGuards.isFunction(onClick)
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     if (disabled) return
 
     if (!propagate) stopPropagation(event)
 
-    if (!onPress && !onClick) {
-      logger.warn('No onPress passed to touchable', touchableProps)
+    if (notPressable) {
+      logger.warn(
+        'No onPress passed to touchable',
+        touchableProps,
+        'User interaction'
+      )
       return
     }
 
-    logger.log(
-      `<${debugComponent || 'Touchable'}/>  pressed`,
-      { debugName, debugComponent },
-      'User interaction',
-    )
-    // @ts-ignore
-    onClick?.(event)
-    onPress && onPress()
+    const _onPress = () => {
+      logger.log(
+        `<${debugComponent || 'Touchable'}/> pressed`,
+        { debugName, debugComponent },
+        'User interaction'
+      )
+
+      if (TypeGuards.isFunction(onClick)) onClick?.(event)
+      onPress?.()
+    }
 
+    if (TypeGuards.isNumber(debounce)) {
+      if (pressed.current) {
+        return
+      }
+      setPressed?.(true)
+      pressed.current = true
+      _onPress()
+      setTimeout(() => {
+        setPressed?.(false)
+        pressed.current = false
+      }, debounce)
+    } else {
+      _onPress()
+    }
   }
 
+  const _styles = React.useMemo(() => ([
+    variantStyles.wrapper,
+    disabled && variantStyles['wrapper:disabled'],
+    css,
+    style,
+  ]), [variantStyles, disabled])
+
   return (
-    // @ts-ignore
-    <View component={Component || 'button'} {...props} debugName={debugName} onClick={handleClick} ref={ref}/>
+    <View
+      component={Component || 'button'}
+      {...props}
+      debugName={debugName}
+      onClick={handleClick}
+      ref={ref}
+      css={_styles}
+    />
   )
 }
 

package/src/components/Touchable/styles.ts

@@ -1,11 +1,9 @@
 import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-import { StylesOf } from '../../types'
 
-export type TouchableComposition = 'wrapper'
+export type TouchableState = 'disabled'
+export type TouchableParts = 'wrapper'
+export type TouchableComposition = TouchableParts | `${TouchableParts}:${TouchableState}`
 
-const createTouchableStyle = createDefaultVariantFactory<
-  TouchableComposition
->()
+const createTouchableStyle = createDefaultVariantFactory<TouchableComposition>()
 
 export const TouchablePresets = includePresets((styles) => createTouchableStyle(() => ({ wrapper: styles })))
-

package/src/components/View/index.tsx

@@ -90,7 +90,7 @@ export const ViewCP = (
       style,
       css,
     ]
-  }, [scroll, matches, css])
+  }, [variantStyles, scroll, matches, css])
 
   const onHoverProps = TypeGuards.isFunction(onHover) && {
     onMouseEnter: () => handleHover(true),

package/src/components/components.ts

@@ -18,12 +18,16 @@ export * from './RadioInput'
 export * from './Select'
 export * from './FileInput'
 export * from './Slider'
-export * from './Tooltip'
 export * from './List'
 export * from './LoadingOverlay'
 export * from './InputBase'
 export * from './Switch'
 export * from './NumberIncrement'
+export * from './SearchInput'
+export * from './Tooltip'
 export * from './SegmentedControl'
 export * from './Pager'
+export * from './EmptyPlaceholder'
+export * from './Grid'
+export * from './Badge'
 export * from './defaultStyles'

package/src/components/defaultStyles.ts

@@ -14,15 +14,18 @@ import { OverlayPresets } from './Overlay/styles'
 import { TextInputPresets } from './TextInput/styles'
 import { RadioInputPresets } from './RadioInput/styles'
 import { SelectPresets } from './Select/styles'
-import { TooltipPresets } from './Tooltip/styles'
-import { ListPresets } from './List/styles'
+import { ListPresets, PaginationIndicatorStyles } from './List'
 import { SliderPresets } from './Slider/styles'
 import { LoadingOverlayPresets } from './LoadingOverlay/styles'
 import { InputBasePresets } from './InputBase'
 import { SwitchPresets } from './Switch/styles'
 import { NumberIncrementPresets } from './NumberIncrement/styles'
+import { TooltipPresets } from './Tooltip/styles'
 import { SegmentedControlPresets } from './SegmentedControl/styles'
 import { PagerPresets } from './Pager/styles'
+import { EmptyPlaceholderPresets } from './EmptyPlaceholder/styles'
+import { GridPresets } from './Grid/styles'
+import { BadgePresets } from './Badge/styles'
 
 export const defaultStyles = {
   View: ViewPresets,
@@ -42,15 +45,19 @@ export const defaultStyles = {
   TextInput: TextInputPresets,
   RadioInput: RadioInputPresets,
   Select: SelectPresets,
-  Tooltip: TooltipPresets,
   List: ListPresets,
   Slider: SliderPresets,
   LoadingOverlay: LoadingOverlayPresets,
   InputBase: InputBasePresets,
   Switch: SwitchPresets,
   NumberIncrement: NumberIncrementPresets,
+  Tooltip: TooltipPresets,
   SegmentedControlPresets: SegmentedControlPresets,
   Pager: PagerPresets,
+  EmptyPlaceholder: EmptyPlaceholderPresets,
+  PaginationIndicator: PaginationIndicatorStyles,
+  Grid: GridPresets,
+  Badge: BadgePresets,
 }
 
 import createCache from '@emotion/cache'

package/src/index.ts

@@ -2,5 +2,7 @@ export * from './components/components'
 export * from './lib/hooks'
 export * from './lib/utils'
 export * from './types/utility'
+export * from './lib/useSearchParams'
+export * from './lib/useBreakpointMatch'
 export { default as Toast } from './lib/Toast'
 export { CreateOSAlert } from './lib/OSAlert'

package/src/lib/hooks.ts

@@ -236,7 +236,8 @@ export function usePagination({
 
 
 export interface UseMediaQueryOptions {
-  getInitialValueInEffect: boolean;
+  getInitialValueInEffect?: boolean
+  initialValue?: boolean
 }
 
 type MediaQueryCallback = (event: { matches: boolean; media: string }) => void;
@@ -245,7 +246,7 @@ type MediaQueryCallback = (event: { matches: boolean; media: string }) => void;
  * Older versions of Safari (shipped withCatalina and before) do not support addEventListener on matchMedia
  * https://stackoverflow.com/questions/56466261/matchmedia-addlistener-marked-as-deprecated-addeventlistener-equivalent
  * */
-function attachMediaListener(query: MediaQueryList, callback: MediaQueryCallback) {
+export function attachMediaListener(query: MediaQueryList, callback: MediaQueryCallback) {
   try {
     query.addEventListener('change', callback);
     return () => query.removeEventListener('change', callback);
@@ -267,35 +268,48 @@ function getInitialValue(query: string, initialValue?: boolean) {
   return false;
 }
 
+export function isMediaQuery(query: string, initialValue = false) {
+  const media = query.trim().replace('@media screen and ', '')
+
+  if (typeof window !== 'undefined' && 'matchMedia' in window) {
+    return window.matchMedia(media).matches
+  }
+
+  return initialValue
+}
+
 export function useMediaQuery(
   query: string,
-  initialValue?: boolean,
-  { getInitialValueInEffect }: UseMediaQueryOptions = {
-    getInitialValueInEffect: true,
-  }
+  queryOptions: UseMediaQueryOptions = {}
 ) {
+  const {
+    initialValue = false,
+    getInitialValueInEffect = true,
+  } = queryOptions
 
   const _query = useMemo(() => {
     return query.trim().replace('@media screen and ', '')
-    
   }, [query])
+
   const [matches, setMatches] = useState(
-    getInitialValueInEffect ? initialValue : getInitialValue(_query, initialValue)
-  );
-  const queryRef = useRef<MediaQueryList>();
+    getInitialValueInEffect ? initialValue : isMediaQuery(query, initialValue)
+  )
+
+  const queryRef = useRef<MediaQueryList>()
 
   useEffect(() => {
     if(query.trim() === '') return
+
     if ('matchMedia' in window) {
       queryRef.current = window.matchMedia(_query);
       setMatches(queryRef.current.matches);
       return attachMediaListener(queryRef.current, (event) => setMatches(event.matches));
     }
 
-    return undefined;
-  }, [_query]);
+    return undefined
+  }, [_query])
 
-  return matches;
+  return matches
 }
 
 type SelectProperties<T extends Record<string|number|symbol, any>, K extends keyof T> = {