Fix overlaping types

react/components/EXPERIMENTAL_Table/BulkActions/Actions.tsx

@@ -26,7 +26,12 @@ function Primary({ label, onClick }: PrimaryProps) {
   )
   return (
     <div className={className}>
-      <Button variation="secondary" size="small" onClick={onClick}>
+      <Button
+        type="button"
+        variation="secondary"
+        size="small"
+        onClick={onClick}
+      >
         {label}
       </Button>
     </div>

react/components/EXPERIMENTAL_Table/BulkActions/Tail.tsx

@@ -26,14 +26,22 @@ function Info({ children }: PropsWithChildren<{}>) {
   return <span className="mr4 c-muted-4">{children}</span>
 }
 
-function Toggle({ children, button, active }) {
+type ToggleProps = PropsWithChildren<{
+  button: {
+    onClick: () => void
+    text: string
+  }
+  active: boolean
+}>
+
+function Toggle({ children, button, active }: ToggleProps) {
   const { onClick, text } = button
   return (
     <span className="mr2">
       {active ? (
         children
       ) : (
-        <Button onClick={onClick}>
+        <Button type="button" onClick={onClick}>
           <span className="ttu">{text}</span>
         </Button>
       )}

react/components/EXPERIMENTAL_Table/BulkActions/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import React, { FC, PropsWithChildren } from 'react'
 import classNames from 'classnames'
 
 import { ORDER_CLASSNAMES, NAMESPACES } from '../constants'
@@ -27,10 +27,11 @@ const TRANSITIONS = [
   },
 ]
 
-const BulkActions: FC<BulkActionsProps> & Composites = ({
-  active = false,
-  children,
-}) => {
+type Props = PropsWithChildren<{
+  active: boolean
+}>
+
+function BulkActions({ active = false, children }: Props) {
   const motion = useTableMotion(TRANSITIONS)
   const positionFixer =
     React.Children.count(children) > 1 ? null : (
@@ -59,15 +60,13 @@ const BulkActions: FC<BulkActionsProps> & Composites = ({
   )
 }
 
-export type BulkActionsProps = {
-  active: boolean
-}
-
-type Composites = {
+interface Composites {
   Actions: FC
   Tail: FC
 }
 
+export type ComposableBulkActions = FC<Props> & Composites
+
 BulkActions.Actions = Actions
 BulkActions.Tail = Tail
 

react/components/EXPERIMENTAL_Table/Sections/Cell.tsx

@@ -14,7 +14,6 @@ import classNames from 'classnames'
 
 import CaretDown from '../../icon/CaretDown/index.js'
 import CaretUp from '../../icon/CaretUp/index.js'
-import { ComposableWithRef } from '../types'
 
 const HoverContext = createContext<boolean>(false)
 
@@ -131,15 +130,15 @@ function Eyesight({
 }
 
 interface SuffixProps {
-  sorting: boolean
-  ascending: boolean
+  sorting?: boolean
+  ascending?: boolean
 }
 
 function Suffix({ sorting, ascending }: SuffixProps) {
   const Caret = ascending ? CaretDown : CaretUp
   const hover = useContext(HoverContext)
   return (
-    <Eyesight visible={sorting || hover}>
+    <Eyesight visible={sorting ?? hover}>
       <Caret className="ml2" size={10} />
     </Eyesight>
   )
@@ -159,13 +158,9 @@ interface SpecificProps {
   header?: boolean
 }
 
-export type ComposableCell = ComposableWithRef<
-  HTMLTableCellElement,
-  Props,
-  Composites
->
+export type ComposableCell = FC<Props> & Composites
 
-const ForwardedCell: ComposableCell = forwardRef(Cell)
+const ForwardedCell = (forwardRef(Cell) as unknown) as ComposableCell
 
 ForwardedCell.Suffix = Suffix
 

react/components/EXPERIMENTAL_Table/Sections/Row.tsx

@@ -1,10 +1,10 @@
-import React, { forwardRef, Ref } from 'react'
+import React, { forwardRef, Ref, FC } from 'react'
 import classNames from 'classnames'
 import pick from 'lodash/pick'
 import get from 'lodash/get'
 
 import useTableMotion from '../hooks/useTableMotion'
-import { ComposableWithRef, Column, RenderProps, NativeTr } from '../types'
+import { Column, RenderProps, NativeTr } from '../types'
 import { useDataContext } from '../context/data'
 import { useBodyContext } from '../context/body'
 import { useMeasuresContext } from '../context/measures'
@@ -111,16 +111,12 @@ export const ROW_TRANSITIONS = [
 ]
 
 interface Composites {
-  Cell?: ComposableCell
+  Cell: ComposableCell
 }
 
-export type ComposableRow = ComposableWithRef<
-  HTMLTableRowElement,
-  Props,
-  Composites
->
+export type ComposableRow = FC<Props> & Composites
 
-const FowardedRow: ComposableRow = forwardRef(Row)
+const FowardedRow = (forwardRef(Row) as unknown) as ComposableRow
 
 FowardedRow.Cell = Cell
 

react/components/EXPERIMENTAL_Table/Sections/Tbody.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, Ref } from 'react'
+import React, { forwardRef, Ref, FC } from 'react'
 
 import { useBodyContext } from '../context/body'
 import { useDataContext } from '../context/data'
@@ -7,7 +7,7 @@ import { useTestingContext } from '../context/testing'
 import { useLoadingContext } from '../context/loading'
 import useTableMotion from '../hooks/useTableMotion'
 import Row, { ROW_TRANSITIONS, ComposableRow } from './Row'
-import { ComposableWithRef, RenderProps, NativeTableSection } from '../types'
+import { RenderProps, NativeTableSection } from '../types'
 
 interface BodyRenderProps {
   props: {
@@ -60,13 +60,9 @@ interface Composites {
   Row: ComposableRow
 }
 
-export type ComposableTbody = ComposableWithRef<
-  HTMLTableSectionElement,
-  Props,
-  Composites
->
+export type ComposableTbody = FC<Props> & Composites
 
-const FowardedTbody: ComposableTbody = forwardRef(Tbody)
+const FowardedTbody = (forwardRef(Tbody) as unknown) as ComposableTbody
 
 FowardedTbody.Row = Row
 

react/components/EXPERIMENTAL_Table/Sections/Thead.tsx

@@ -1,31 +1,26 @@
-import React, { forwardRef, ReactElement, Ref } from 'react'
+import React, { forwardRef, Ref, ReactNode, FC } from 'react'
 import classNames from 'classnames'
 
 import { useTestingContext } from '../context/testing'
 import { useHeadContext } from '../context/head'
 import { TABLE_HEADER_HEIGHT } from '../hooks/useTableMeasures'
 import Row from './Row'
 import Cell, { ComposableCell } from './Cell'
-import {
-  ComposableWithRef,
-  Column,
-  NativeTableSection,
-  RenderProps,
-} from '../types'
+import { Column, NativeTableSection, RenderProps } from '../types'
 
 interface HeadRenderProps {
   props: {
-    width: number | string
-    className: string
-    sorting: boolean
-    sortable: boolean
-    sticky: boolean
-    header: boolean
+    width?: number | string
+    className?: string
+    sorting?: boolean
+    sortable?: boolean
+    sticky?: boolean
+    header?: boolean
     onClick?: () => void
   }
   column: Column
   key: string
-  suffix: ReactElement
+  suffix: ReactNode
 }
 
 type Props = RenderProps<NativeTableSection, HeadRenderProps>
@@ -78,16 +73,12 @@ function Thead(
 }
 
 interface Composites {
-  Cell?: ComposableCell
+  Cell: ComposableCell
 }
 
-export type ComposableThead = ComposableWithRef<
-  HTMLTableSectionElement,
-  Props,
-  Composites
->
+export type ComposableThead = FC<Props> & Composites
 
-const ForwardedThead: ComposableThead = forwardRef(Thead)
+const ForwardedThead = (forwardRef(Thead) as unknown) as ComposableThead
 
 ForwardedThead.Cell = Row.Cell
 

react/components/EXPERIMENTAL_Table/Sections/index.tsx

@@ -1,16 +1,11 @@
-import React, { forwardRef, Ref, PropsWithChildren } from 'react'
+import React, { forwardRef, Ref, PropsWithChildren, FC } from 'react'
 import classNames from 'classnames'
 
 import EmptyState from '../../EmptyState/index.js'
 import { ORDER_CLASSNAMES } from '../constants'
 import { TABLE_HEADER_HEIGHT } from '../hooks/useTableMeasures'
 import Loading from './Loading'
-import {
-  E2ETestable,
-  ComposableWithRef,
-  HasMotion,
-  NativeTable,
-} from '../types'
+import { E2ETestable, HasMotion, NativeTable } from '../types'
 import { useMeasuresContext } from '../context/measures'
 import { useTestingContext } from '../context/testing'
 import { useLoadingContext } from '../context/loading'
@@ -64,17 +59,13 @@ function Sections(
 }
 
 interface Composites {
-  Head?: ComposableThead
-  Body?: ComposableTbody
+  Head: ComposableThead
+  Body: ComposableTbody
 }
 
-export type ComposableSections = ComposableWithRef<
-  HTMLTableElement,
-  Props,
-  Composites
->
+export type ComposableSections = FC<Props> & Composites
 
-const FowardedSections: ComposableSections = forwardRef(Sections)
+const FowardedSections = (forwardRef(Sections) as unknown) as ComposableSections
 
 FowardedSections.Head = Thead
 FowardedSections.Body = Tbody

react/components/EXPERIMENTAL_Table/index.tsx

@@ -1,15 +1,16 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { FC, Fragment, forwardRef, PropsWithChildren, Ref } from 'react'
 
 import Toolbar from './Toolbar/index'
 import Pagination, { PaginationProps } from './Pagination'
-import BulkActions from './BulkActions'
+import BulkActions, { ComposableBulkActions } from './BulkActions'
 import FilterBar, { FilterBarProps } from './FilterBar'
 import useTableMeasures from './hooks/useTableMeasures'
 import useTableMotion from './hooks/useTableMotion'
 import Totalizer, { TotalizerProps } from './Totalizer'
 import ActionBar, { ActionBarProps } from './ActionBar'
 import Sections, { ComposableSections } from './Sections'
-import { Column, Items, RFC, ComposableWithRef } from './types'
+import { Column, Items } from './types'
 import useTableSort from './hooks/useTableSort'
 import { MeasuresProvider, useMeasuresContext } from './context/measures'
 import { TestingProvider, useTestingContext } from './context/testing'
@@ -25,17 +26,17 @@ function Table(
     children,
     measures,
     isRowActive,
-    loading,
+    loading = false,
     emptyState,
     onRowClick,
     items,
-    empty,
-    rowKey,
-    highlightOnHover,
+    empty = false,
+    rowKey = ({ rowData }: { rowData: { id: string } }) => `row-${rowData.id}`,
+    highlightOnHover = false,
     columns,
     sorting,
-    testId,
-    stickyHeader,
+    testId = 'vtex-table-v2',
+    stickyHeader = false,
     composableSections,
   }: Props,
   ref: Ref<HTMLTableElement>
@@ -97,7 +98,7 @@ interface SpecificProps {
   /** Array of items */
   items: Items
   /** Function that generates row keys */
-  rowKey?: (data: { rowData: unknown }) => string
+  rowKey?: (data: { rowData: any }) => string
   /** If the table is empty or not */
   empty?: boolean
   /** If the Table is loading or not */
@@ -123,22 +124,18 @@ interface SpecificProps {
 }
 
 interface Composites {
-  Toolbar?: FC
-  FilterBar?: RFC<HTMLElement, FilterBarProps>
-  Pagination?: RFC<HTMLElement, PaginationProps>
-  Bulk?: FC
-  Totalizer?: RFC<HTMLElement, TotalizerProps>
-  ActionBar?: RFC<HTMLElement, ActionBarProps>
-  Sections?: ComposableSections
+  Toolbar: FC
+  FilterBar: FC<FilterBarProps>
+  Pagination: FC<PaginationProps>
+  Bulk: ComposableBulkActions
+  Totalizer: FC<TotalizerProps>
+  ActionBar: FC<ActionBarProps>
+  Sections: ComposableSections
 }
 
-export type ComposableTable = ComposableWithRef<
-  HTMLTableElement,
-  Props,
-  Composites
->
+export type ComposableTable = FC<Props> & Composites
 
-const FowardedTable: ComposableTable = forwardRef(Table)
+const FowardedTable = (forwardRef(Table) as unknown) as ComposableTable
 
 FowardedTable.Toolbar = Toolbar
 FowardedTable.FilterBar = FilterBar
@@ -148,13 +145,4 @@ FowardedTable.Bulk = BulkActions
 FowardedTable.ActionBar = ActionBar
 FowardedTable.Sections = Sections
 
-FowardedTable.defaultProps = {
-  rowKey: ({ rowData }: { rowData: { id: string } }) => `row-${rowData.id}`,
-  loading: false,
-  empty: false,
-  highlightOnHover: false,
-  testId: 'vtex-table-v2',
-  stickyHeader: false,
-}
-
 export default FowardedTable