@codeleap/web 5.8.21 → 6.1.2

package/src/components/TextEditor/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { onUpdate, useCallback } from '@codeleap/hooks'
-import { BubbleMenu, FloatingMenu, EditorContent } from '@tiptap/react'
+// import { BubbleMenu, FloatingMenu, EditorContent } from '@tiptap/react'
 import { FileInput, Text, View } from '../components'
 import { TextEditorProps } from './types'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
@@ -49,25 +49,27 @@ export const TextEditor = (props: TextEditorProps) => {
   }, [editor, handleBlur, handleFocus])
 
   const _BubbleMenu = useCallback(() => {
-    return (
-      // @ts-expect-error icss type
-      <BubbleMenu css={[styles.bubbleMenu]} {...bubbleMenuProps} editor={editor}>
-        <View style={styles.bubbleMenuInnerWrapper}>
-          {bubbleMenuProps?.renderContent}
-        </View>
-      </BubbleMenu>
-    )
+    return null
+    // return (
+    //   // @ts-expect-error icss type
+    //   <BubbleMenu css={[styles.bubbleMenu]} {...bubbleMenuProps} editor={editor}>
+    //     <View style={styles.bubbleMenuInnerWrapper}>
+    //       {bubbleMenuProps?.renderContent}
+    //     </View>
+    //   </BubbleMenu>
+    // )
   }, [editor])
 
   const _FloatingMenu = useCallback(() => {
-    return (
-      // @ts-expect-error icss type
-      <FloatingMenu css={[styles.floatingMenu]} {...floatingMenuProps} editor={editor}>
-        <View style={styles.floatingMenuInnerWrapper}>
-          {floatingMenuProps?.renderContent}
-        </View>
-      </FloatingMenu>
-    )
+    return null
+    // return (
+    //   // @ts-expect-error icss type
+    //   <FloatingMenu css={[styles.floatingMenu]} {...floatingMenuProps} editor={editor}>
+    //     <View style={styles.floatingMenuInnerWrapper}>
+    //       {floatingMenuProps?.renderContent}
+    //     </View>
+    //   </FloatingMenu>
+    // )
   }, [editor])
 
   const editorStyles = [
@@ -92,7 +94,7 @@ export const TextEditor = (props: TextEditorProps) => {
       {children}
       <_BubbleMenu />
       <_FloatingMenu />
-      <EditorContent editor={editor} />
+      {/* <EditorContent editor={editor} /> */}
       {validation?.showError ? <Text text={validation?.message as string} style={styles['errorMessage:error']} /> : null}
       <FileInput ref={fileInputRef} />
     </View>

package/src/components/TextEditor/types.ts

@@ -1,22 +1,22 @@
 import { RefObject } from 'react'
 import { AnyFunction } from '@codeleap/types'
 import { StyledProp } from '@codeleap/styles'
-import { BubbleMenuProps, Editor, FloatingMenuProps } from '@tiptap/react'
+// import { BubbleMenuProps, Editor, FloatingMenuProps } from '@tiptap/react'
 import { FileInputRef } from '../FileInput'
 import { TextEditorComposition } from './styles'
 import { Validator } from '@codeleap/form'
 
 export type TextEditorProps = React.PropsWithChildren<{
-  editor: Editor & {
+  editor: any & {
     getText: AnyFunction
     isEditable: boolean
     on: AnyFunction
     off: AnyFunction
   }
   style?: StyledProp<TextEditorComposition>
-  bubbleMenuProps?: BubbleMenuProps & { renderContent: React.ReactNode }
-  floatingMenuProps?: FloatingMenuProps & { renderContent: React.ReactNode }
-  toolbarComponent?: JSX.Element
+  bubbleMenuProps?: any & { renderContent: React.ReactNode }
+  floatingMenuProps?: any & { renderContent: React.ReactNode }
+  toolbarComponent?: React.ReactElement
   fileInputRef?: RefObject<FileInputRef>
   validate?: Validator<string, any, any>
 }>

package/src/components/TextInput/index.tsx

@@ -1,12 +1,11 @@
 import { TypeGuards } from '@codeleap/types'
-import React, { forwardRef, useImperativeHandle } from 'react'
-import TextareaAutosize from 'react-autosize-textarea'
-import InputMask from 'react-input-mask'
+import React, { useImperativeHandle } from 'react'
+import TextareaAutosize from 'react-textarea-autosize'
 import { Touchable } from '../Touchable'
 import { InputBase, selectInputBaseProps } from '../InputBase'
 import { getTestId } from '../../lib/utils/test'
-import { InputRef, TextInputProps } from './types'
-import { AnyRecord, AppIcon, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
+import { TextInputProps } from './types'
+import { AnyRecord, AppIcon, IJSX, StyledComponentProps } from '@codeleap/styles'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
 import { useTextInput } from './useTextInput'
@@ -14,9 +13,8 @@ import { useInputBasePartialStyles } from '../InputBase/useInputBasePartialStyle
 
 export * from './types'
 export * from './styles'
-export * from './mask'
 
-export const TextInput = forwardRef<InputRef, TextInputProps>((props, inputRef) => {
+export const TextInput = (props: TextInputProps) => {
   const allProps = {
     ...TextInput.defaultProps,
     ...props,
@@ -37,6 +35,7 @@ export const TextInput = forwardRef<InputRef, TextInputProps>((props, inputRef)
     visibleIcon,
     hiddenIcon,
     focused,
+    ref: inputRef,
     ...textInputProps
   } = others as TextInputProps
 
@@ -44,13 +43,11 @@ export const TextInput = forwardRef<InputRef, TextInputProps>((props, inputRef)
 
   const {
     isMultiline,
-    isMasked,
     isFocused: isInputFocused,
     secureTextEntry,
     handleBlur,
     handleFocus,
     handleChange,
-    maskProps,
     innerInputRef,
     wrapperRef,
     errorMessage,
@@ -70,28 +67,13 @@ export const TextInput = forwardRef<InputRef, TextInputProps>((props, inputRef)
     focus: isFocused,
   })
 
-  const InputElement = isMasked ? InputMask : isMultiline ? TextareaAutosize : 'input'
+  const InputElement: any = isMultiline ? TextareaAutosize : 'input'
 
   const isPressable = TypeGuards.isFunction(onPress)
 
-  const focus = () => {
-    if (isMasked) {
-      // @ts-expect-error
-      innerInputRef.current?.getInputDOMNode()?.focus()
-    }
-
-    innerInputRef.current?.focus?.()
-  }
-
   useImperativeHandle(inputRef, () => {
-    return {
-      focus: () => focus(),
-      isTextInput: true,
-      getInputRef: () => {
-        return innerInputRef.current as unknown as HTMLInputElement
-      },
-    }
-  }, [!!innerInputRef?.current?.focus])
+    return innerInputRef?.current
+  }, [])
 
   const visibilityToggleProps = visibilityToggle ? {
     onPress: toggleSecureTextEntry,
@@ -149,8 +131,8 @@ export const TextInput = forwardRef<InputRef, TextInputProps>((props, inputRef)
         {...buttonModeProps}
         {...secureTextProps}
         {...textInputProps}
-        onBlur={handleBlur}
-        onFocus={handleFocus}
+        onBlur={handleBlur as any}
+        onFocus={handleFocus as any}
         css={[
           styles.input,
           isMultiline && styles['input:multiline'],
@@ -171,17 +153,16 @@ export const TextInput = forwardRef<InputRef, TextInputProps>((props, inputRef)
               caretColorStyle,
             ],
           },
-        ]}
-        {...maskProps}
-        value={inputValue}
+        ] as any}
         onChange={handleChange}
         ref={innerInputRef}
+        value={inputValue}
         data-testid={testId}
       />
     </InputBase>
   )
 
-}) as StyledComponentWithProps<TextInputProps>
+}
 
 TextInput.styleRegistryName = 'TextInput'
 TextInput.elements = [...InputBase.elements, 'input', 'placeholder', 'selection']
@@ -194,7 +175,6 @@ TextInput.withVariantTypes = <S extends AnyRecord>(styles: S) => {
 TextInput.defaultProps = {
   hiddenIcon: 'input-visiblity:hidden' as AppIcon,
   visibleIcon: 'input-visiblity:visible' as AppIcon,
-  masking: null,
 } as TextInputProps
 
 WebStyleRegistry.registerComponent(TextInput)

package/src/components/TextInput/types.ts

@@ -4,10 +4,12 @@ import { InputBaseProps } from '../InputBase'
 import { HTMLProps } from '../../types'
 import { TextInputComposition } from './styles'
 import { Field } from '@codeleap/form'
-import { AnyFunction } from '@codeleap/types'
+import { RefObject } from 'react'
 
 type NativeTextInputProps = HTMLProps<'input'>
 
+export type InputRef = HTMLInputElement
+
 export type TextInputProps =
   Omit<InputBaseProps, 'style' | 'ref'> &
   Omit<NativeTextInputProps, 'value' | 'crossOrigin' | 'ref' | 'style'> &
@@ -22,65 +24,11 @@ export type TextInputProps =
     focused?: boolean
     forceError?: string
     rows?: number
-    masking?: TextInputMaskingProps
     visibleIcon?: AppIcon
     hiddenIcon?: AppIcon
     field?: Field<string, any, any>
     value?: string
     onValueChange?: (value: string) => void
+    onChangeText?: NativeTextInputProps['onChange']
+    ref?: RefObject<InputRef | null>
   }
-
-export type InputRef = {
-  isTextInput?: boolean
-  focus: () => void
-  getInputRef: () => HTMLInputElement
-}
-
-type beforeMaskedValueChangeArgs = {
-  state: {
-    value: string | undefined
-    selection: {
-      start: number
-      end: number
-      length?: number
-    }
-  }
-  userInput: null | string
-}
-
-export type FormatChar = `[${string}]`
-
-export type MaskProps = {
-  obfuscated?: boolean
-  mask?: string
-  placeholder?: string
-  maskChar?: string
-  formatChars?: Record<string, FormatChar>
-  alwaysShowMask?: boolean
-  validator?: AnyFunction
-  maskType?: 'BRL' | 'INTERNATIONAL'
-  getRawValue?: (value: any) => string
-}
-
-export type TextInputMaskTypeProp =
-  | 'credit-card'
-  | 'cpf'
-  | 'cnpj'
-  | 'zip-code'
-  | 'cel-phone'
-  | 'custom'
-
-export interface TextInputMaskingProps {
-  type: TextInputMaskTypeProp
-  options?: MaskProps
-  onChangeMask?: (
-    newState: beforeMaskedValueChangeArgs['state'],
-    oldState: beforeMaskedValueChangeArgs['state'],
-    userInput: beforeMaskedValueChangeArgs['userInput']
-  ) => beforeMaskedValueChangeArgs['state']
-  saveFormatted?: boolean
-}
-
-export type InputMaskProps = {
-  masking: TextInputMaskingProps
-}

package/src/components/TextInput/useTextInput.ts

@@ -1,7 +1,6 @@
-import React, { useCallback, useState, useMemo } from 'react'
+import React, { useCallback, useState } from 'react'
 import { TextInputProps } from './types'
 import { TypeGuards } from '@codeleap/types'
-import { getMaskInputProps } from './mask'
 import { useInputBase } from '../InputBase/useInputBase'
 import { fields } from '@codeleap/form'
 
@@ -10,11 +9,11 @@ export function useTextInput(props: Partial<TextInputProps>) {
     onFocus,
     onBlur,
     field,
-    masking,
     multiline: isMultiline,
     forceError,
     value,
     onValueChange,
+    onChangeText,
     rows: providedRows,
   } = props
 
@@ -24,12 +23,6 @@ export function useTextInput(props: Partial<TextInputProps>) {
 
   const toggleSecureTextEntry = () => setSecureTextEntry(s => !s)
 
-  const isMasked = !TypeGuards.isNil(masking)
-
-  const maskProps = useMemo(() => {
-    return isMasked ? getMaskInputProps({ masking }) : null
-  }, [masking])
-
   const {
     fieldHandle,
     validation,
@@ -37,7 +30,11 @@ export function useTextInput(props: Partial<TextInputProps>) {
     wrapperRef,
     onInputValueChange,
     inputValue,
-  } = useInputBase<string>(field, fields.text, { value, onValueChange }, {
+  } = useInputBase<string>(
+    field,
+    fields.text,
+    { value, onValueChange: onValueChange ?? onChangeText as any },
+    {
     revealValue() {
       setSecureTextEntry(false)
     },
@@ -61,14 +58,10 @@ export function useTextInput(props: Partial<TextInputProps>) {
   }, [onFocus])
 
   const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    if (TypeGuards.isFunction(onChangeText)) return onChangeText(event)
     const inputValue = event?.target?.value
-
-    const value = isMasked && maskProps?.notSaveFormatted
-      ? maskProps?.getRawValue(inputValue)
-      : inputValue
-
-    onInputValueChange(value)
-  }, [onInputValueChange])
+    onInputValueChange(inputValue)
+  }, [onInputValueChange, onChangeText])
 
   const rows = providedRows ?? (isMultiline ? 2 : undefined)
 
@@ -79,9 +72,7 @@ export function useTextInput(props: Partial<TextInputProps>) {
   const errorMessage = validation?.message || forceError
 
   return {
-    maskProps,
     isMultiline,
-    isMasked,
     isFocused,
     secureTextEntry,
     handleBlur,

package/src/components/Tooltip/types.ts

@@ -26,7 +26,7 @@ export type TooltipProps =
   {
     toggle?: AnyFunction
     visible?: boolean
-    content: React.ReactNode | ((props: TooltipProps & { variantsStyles: StylesOf<TooltipComposition> }) => JSX.Element)
+    content: React.ReactNode | ((props: TooltipProps & { variantsStyles: StylesOf<TooltipComposition> }) => React.ReactElement)
     triggerWrapper?: React.ElementType
     triggerWrapperProps?: Partial<ViewProps>
     style?: StyledProp<TooltipComposition>

package/src/components/Touchable/index.tsx

@@ -12,7 +12,7 @@ import { logger } from '@codeleap/logger'
 export * from './styles'
 export * from './types'
 
-export const Touchable = forwardRef<HTMLButtonElement, TouchableProps>((touchableProps: TouchableProps, ref) => {
+export const Touchable = (touchableProps: TouchableProps) => {
   const allProps = {
     ...Touchable.defaultProps,
     ...touchableProps,
@@ -33,6 +33,7 @@ export const Touchable = forwardRef<HTMLButtonElement, TouchableProps>((touchabl
     analyticsEnabled,
     analyticsName,
     analyticsData,
+    ref,
     ...props
   } = allProps
 
@@ -48,7 +49,7 @@ export const Touchable = forwardRef<HTMLButtonElement, TouchableProps>((touchabl
     }
   })
 
-  const Component = component as unknown as ComponentType<HTMLAttributes<HTMLButtonElement>>
+  const Component: any = component as unknown as ComponentType<HTMLAttributes<HTMLButtonElement>>
 
   const notPressable = !TypeGuards.isFunction(onPress) && !TypeGuards.isFunction(onClick)
 
@@ -102,12 +103,11 @@ export const Touchable = forwardRef<HTMLButtonElement, TouchableProps>((touchabl
       onClick={handleClick}
       onKeyDown={handleClick}
       ref={ref}
-      // @ts-expect-error icss type
       css={[styles.wrapper, disabled && styles['wrapper:disabled']]}
       data-testid={testId}
     />
   )
-}) as StyledComponentWithProps<TouchableProps>
+}
 
 Touchable.styleRegistryName = 'Touchable'
 Touchable.elements = ['wrapper']

package/src/components/Touchable/types.ts

@@ -1,5 +1,5 @@
 import { AnyFunction } from '@codeleap/types'
-import { ComponentPropsWithRef, ElementType } from 'react'
+import { ComponentPropsWithRef, ElementType, ReactNode } from 'react'
 import { TouchableComposition } from './styles'
 import { AnyRecord, StyledProp } from '@codeleap/styles'
 
@@ -19,4 +19,5 @@ export type TouchableProps<T extends ElementType = 'button'> =
     analyticsEnabled?: boolean
     analyticsName?: string
     analyticsData?: Record<string, any>
+    children?: ReactNode
   }

package/src/components/View/index.tsx

@@ -1,6 +1,6 @@
 import { TypeGuards } from '@codeleap/types'
-import React, { ElementType, forwardRef } from 'react'
-import { motion } from 'framer-motion'
+import React, { ElementType } from 'react'
+import { motion } from 'motion/react'
 import { ViewProps } from './types'
 import { getTestId } from '../../lib/utils/test'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
@@ -10,7 +10,7 @@ import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps } from
 export * from './styles'
 export * from './types'
 
-export const View = forwardRef<HTMLDivElement, ViewProps>((viewProps, ref) => {
+export const View = (viewProps: ViewProps) => {
   const {
     component,
     children,
@@ -23,6 +23,7 @@ export const View = forwardRef<HTMLDivElement, ViewProps>((viewProps, ref) => {
     style,
     animated,
     animatedProps,
+    ref,
     ...props
   } = {
     ...View.defaultProps,
@@ -31,7 +32,7 @@ export const View = forwardRef<HTMLDivElement, ViewProps>((viewProps, ref) => {
 
   const styles = useStylesFor(View.styleRegistryName, style)
 
-  const Component: ElementType = animated ? (motion?.[component as string] || motion.div) : (component || 'div')
+  const Component: any = animated ? (motion?.[component as string] || motion.div) : (component || 'div')
 
   function handleHover(isMouseOverElement: boolean) {
     onHover?.(isMouseOverElement)
@@ -56,7 +57,7 @@ export const View = forwardRef<HTMLDivElement, ViewProps>((viewProps, ref) => {
       {children}
     </Component>
   )
-}) as StyledComponentWithProps<ViewProps>
+}
 
 View.styleRegistryName = 'View'
 View.elements = ['wrapper']

package/src/components/View/types.ts

@@ -1,11 +1,11 @@
-import { AnimationProps, MotionProps } from 'framer-motion'
+import { TargetAndTransition, MotionProps } from 'motion/react'
 import { AnyRecord, StyledProp } from '@codeleap/styles'
 import { ViewComposition } from './styles'
 import { ComponentPropsWithRef, ElementType } from 'react'
 
 export type ViewProps<T extends ElementType = 'div'> =
-  Omit<ComponentPropsWithRef<T>, 'style'> &
-  Omit<AnimationProps, 'style'> &
+  Omit<ComponentPropsWithRef<T>, 'style' | 'children'> &
+  Omit<TargetAndTransition, 'style' | 'children'> &
   {
     component?: ElementType<AnyRecord>
     debugName?: string

package/src/components/VirtualList/context.tsx

@@ -0,0 +1,93 @@
+import { useVirtualizer } from '@tanstack/react-virtual'
+import { useRef, useCallback, use, createContext } from 'react'
+import { VirtualListProps, VirtualListContextValue } from './types'
+
+const VirtualListContext = createContext<VirtualListContextValue<any> | null>(null)
+
+export function VirtualListProvider<T>(listProps: React.PropsWithChildren<VirtualListProps<T>>) {
+  const {
+    children,
+    estimateSize,
+    data,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+    ...virtualizerOptions
+  } = listProps
+
+  const scrollRef = useRef<HTMLDivElement | null>(null)
+
+  const listLength = data?.length ?? 0
+
+  const virtualizerItemCount = hasNextPage ? listLength + 1 : listLength
+
+  const paginationIndicatorIndex = hasNextPage ? virtualizerItemCount - 1 : null
+
+  const lastItemIndex = hasNextPage ? virtualizerItemCount - 2 : virtualizerItemCount - 1
+
+  const virtualizer = useVirtualizer({
+    gap: 16,
+    overscan: 5,
+    ...virtualizerOptions,
+    count: virtualizerItemCount,
+    getScrollElement: () => scrollRef.current,
+    estimateSize(index) {
+      if (index === paginationIndicatorIndex) {
+        return 100
+      }
+
+      const item = data?.[index]
+
+      return item && estimateSize ? estimateSize(item) : 100
+    },
+  })
+
+  const loadNextPage = useCallback(() => {
+    const items = virtualizer.getVirtualItems()
+
+    const [_, lastItem] = [...items].reverse()
+
+    if (!lastItem) {
+      return
+    }
+
+    if (
+      lastItem.index >= data.length - 1 &&
+      hasNextPage &&
+      !isFetchingNextPage
+    ) {
+      fetchNextPage?.()
+    }
+  }, [
+    virtualizer.getVirtualItems(),
+    data?.length,
+    hasNextPage,
+    isFetchingNextPage,
+    fetchNextPage,
+  ])
+
+  const contextValue = {
+    virtualizer,
+    loadNextPage,
+    scrollRef,
+    virtualizerItemCount,
+    paginationIndicatorIndex,
+    lastItemIndex,
+    list: {
+      data,
+      hasNextPage,
+      fetchNextPage,
+      isFetchingNextPage,
+    },
+  }
+
+  return <VirtualListContext value={contextValue}>
+    {children}
+  </VirtualListContext>
+}
+
+export function useVirtualListContext<T extends (val: VirtualListContextValue<any>) => any>(selector: T): ReturnType<T> {
+  const context = use(VirtualListContext)
+
+  return selector(context)
+}

package/src/components/VirtualList/index.tsx

@@ -0,0 +1,11 @@
+import { VirtualListContainer, VirtualListItems } from './list'
+import { VirtualListProvider } from './context'
+import { memo } from 'react'
+
+export function createVirtualList<T>() {
+  return {
+    Provider: VirtualListProvider<T>,
+    Container: memo(VirtualListContainer),
+    Items: memo(VirtualListItems<T>),
+  }
+}

package/src/components/VirtualList/list.tsx

@@ -0,0 +1,85 @@
+import { useVirtualListContext } from './context'
+import React, { useCallback, useEffect, useMemo } from 'react'
+import { VirtualItem } from '@tanstack/react-virtual'
+import { EmptyPlaceholder } from '../EmptyPlaceholder'
+import { VirtualListItemsProps, VirtualListContainerProps } from './types'
+
+export function VirtualListItems<T>(props: VirtualListItemsProps<T>) {
+  const { renderItem: Item, ListFooterComponent = () => null } = props
+
+  const virtualizer = useVirtualListContext(v => v.virtualizer)
+  const listItems = useVirtualListContext(v => v.list.data)
+  const paginationIndicatorIndex = useVirtualListContext(v => v.paginationIndicatorIndex)
+  const getNextPage = useVirtualListContext(v => v.loadNextPage)
+
+  const items = virtualizer.getVirtualItems()
+
+  useEffect(() => {
+    getNextPage()
+  }, [getNextPage])
+
+  const ItemWrapper = useCallback((props: React.PropsWithChildren<{ item: VirtualItem }>) => {
+    const { item, children } = props
+    
+    return <div
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        transform: `translateY(${item.start}px)`,
+      }}
+      ref={virtualizer.measureElement}
+      data-index={item.index}
+    >
+      {children}
+    </div>
+  }, [virtualizer.measureElement])
+
+  const renderItem = useCallback((item: VirtualItem) => {
+    const data = listItems[item.index]
+
+    const isPaginationIndicator = item.index === paginationIndicatorIndex
+
+    if (isPaginationIndicator) {
+      return <ItemWrapper key={item.key} item={item}>
+        <ListFooterComponent />
+      </ItemWrapper>
+    }
+
+    return <ItemWrapper key={item.key} item={item}>
+      <Item index={item.index} item={data} />
+    </ItemWrapper>
+
+  }, [Item, ItemWrapper, listItems, ListFooterComponent, paginationIndicatorIndex])
+
+  const containerStyle = useMemo(() => ({
+    height: `${virtualizer.getTotalSize()}px`,
+    width: '100%',
+    position: 'relative' as const,
+  }), [virtualizer.getTotalSize()])
+
+  return <div style={containerStyle}>
+    {items.map(renderItem)}
+  </div>
+}
+
+export const VirtualListContainer = (props: VirtualListContainerProps) => {
+  const { children, placeholder, ...rest } = props
+
+  const scrollRef = useVirtualListContext(ctx => ctx.scrollRef)
+
+  const totalItemCount = useVirtualListContext(ctx => ctx.list?.data?.length)
+
+  if (!totalItemCount || totalItemCount <= 0) {
+    if (React.isValidElement(placeholder)) {
+      return <>{placeholder}</>
+    }
+
+    return <EmptyPlaceholder {...placeholder} />
+  }
+
+  return <div ref={scrollRef} {...rest}>
+    {children}
+  </div>
+}