@toptal/picasso-table 1.1.21 → 2.0.0

package/src/TableCell/TableCell.tsx

@@ -1,8 +1,5 @@
 import type { HTMLAttributes, ReactNode } from 'react'
 import React, { forwardRef, useContext } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import { TableCell as MUITableCell } from '@material-ui/core'
 import type {
   BaseProps,
   ColorType,
@@ -10,11 +7,9 @@ import type {
   TextLabelProps,
 } from '@toptal/picasso-shared'
 import { useTitleCase } from '@toptal/picasso-shared'
-import cx from 'classnames'
-import { toTitleCase } from '@toptal/picasso-utils'
 import { Typography } from '@toptal/picasso-typography'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
-import styles from './styles'
 import { TableContext, TableSectionContext, TableSection } from '../Table'
 
 type AlignType = 'inherit' | 'left' | 'center' | 'right' | 'justify'
@@ -32,8 +27,6 @@ export interface Props
   adornment?: ReactNode
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoTableCell' })
-
 type TypographySettings = {
   color: ColorType
   size: SizeType<'xsmall' | 'small'>
@@ -78,35 +71,40 @@ export const TableCell = forwardRef<HTMLTableCellElement, Props>(
       ...rest
     } = props
 
-    const {
-      compact: compactClass,
-      narrow: narrowClass,
-      ...muiClasses
-    } = useStyles()
     const { spacing } = useContext(TableContext)
     const tableSection = useContext(TableSectionContext)
     const isHead = tableSection === TableSection.HEAD
     const titleCase = useTitleCase(propsTitleCase)
 
-    const renderChildren = () =>
-      isHead && titleCase ? toTitleCase(children) : children
-
     const tooltipWithChildren = (
-      <Typography as='div' {...getTypographySettings(tableSection)}>
-        {renderChildren()}
+      <Typography
+        align={align}
+        as='div'
+        titleCase={isHead && titleCase}
+        {...getTypographySettings(tableSection)}
+      >
+        {children}
       </Typography>
     )
 
+    const Component = isHead ? 'th' : 'td'
+
+    const spacingClasses = {
+      narrow: '',
+      regular: 'px-4',
+      compact: 'h-6 py-[1px] last:pr-3',
+    }
+
     return (
-      <MUITableCell
+      <Component
         {...rest}
         ref={ref}
-        align={align}
-        classes={muiClasses}
-        className={cx(className, {
-          [compactClass]: spacing === 'compact',
-          [narrowClass]: spacing === 'narrow',
-        })}
+        className={twMerge(
+          'h-10 px-2 py-2 border-none last:pr-6',
+          spacingClasses[spacing],
+          isHead && 'text-left',
+          className
+        )}
         style={style}
         colSpan={colSpan}
         rowSpan={rowSpan}
@@ -119,7 +117,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, Props>(
         ) : (
           tooltipWithChildren
         )}
-      </MUITableCell>
+      </Component>
     )
   }
 )

package/src/TableCell/__snapshots__/test.tsx.snap

@@ -6,19 +6,17 @@ exports[`TableCell renders 1`] = `
     class="Picasso-root"
   >
     <table
-      class="MuiTable-root"
+      class="w-full border-collapse border-spacing"
     >
-      <tbody
-        class="MuiTableBody-root"
-      >
+      <tbody>
         <tr
-          class="MuiTableRow-root PicassoTableRow-root PicassoTableRow-bordered"
+          class="border-0 border-solid border-b border-gray"
         >
           <td
-            class="MuiTableCell-root PicassoTableCell-root MuiTableCell-body"
+            class="h-10 py-2 border-none last:pr-6 px-4"
           >
             <div
-              class="m-0 text-sm text-graphite font-inherit"
+              class="m-0 text-sm text-graphite font-inherit text-align"
             >
               Cell
             </div>
@@ -36,19 +34,17 @@ exports[`TableCell renders compact 1`] = `
     class="Picasso-root"
   >
     <table
-      class="MuiTable-root"
+      class="w-full border-collapse border-spacing"
     >
-      <tbody
-        class="MuiTableBody-root"
-      >
+      <tbody>
         <tr
-          class="MuiTableRow-root PicassoTableRow-root PicassoTableRow-bordered"
+          class="border-0 border-solid border-b border-gray"
         >
           <td
-            class="MuiTableCell-root PicassoTableCell-root MuiTableCell-body"
+            class="h-10 py-2 border-none last:pr-6 px-4"
           >
             <div
-              class="m-0 text-sm text-graphite font-inherit"
+              class="m-0 text-sm text-graphite font-inherit text-align"
             >
               Cell
             </div>
@@ -66,19 +62,17 @@ exports[`TableCell renders narrow 1`] = `
     class="Picasso-root"
   >
     <table
-      class="MuiTable-root"
+      class="w-full border-collapse border-spacing"
     >
-      <tbody
-        class="MuiTableBody-root"
-      >
+      <tbody>
         <tr
-          class="MuiTableRow-root PicassoTableRow-root PicassoTableRow-bordered"
+          class="border-0 border-solid border-b border-gray"
         >
           <td
-            class="MuiTableCell-root PicassoTableCell-root MuiTableCell-body"
+            class="h-10 py-2 border-none last:pr-6 px-4"
           >
             <div
-              class="m-0 text-sm text-graphite font-inherit"
+              class="m-0 text-sm text-graphite font-inherit text-align"
             >
               Cell
             </div>

package/src/TableExpandableRow/TableExpandableRow.tsx

@@ -1,21 +1,14 @@
 import type { ReactNode, HTMLAttributes } from 'react'
 import React, { forwardRef, useRef, useEffect } from 'react'
-import cx from 'classnames'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import { Collapse as MUICollapse } from '@material-ui/core'
-import type { BaseProps } from '@toptal/picasso-shared'
+import { Collapse } from '@toptal/picasso-collapse'
+import { type BaseProps } from '@toptal/picasso-shared'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 
 import { TableRow } from '../TableRow'
 import { TableCell } from '../TableCell'
-import styles from './styles'
 
 const MAX_COL_SPAN = 100
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoTableExpandableRow',
-})
-
 export interface Props extends BaseProps, HTMLAttributes<HTMLTableRowElement> {
   /** Should be valid `<tr>` children such as `Table.Cell`. */
   children: ReactNode
@@ -41,7 +34,6 @@ export const TableExpandableRow = forwardRef<HTMLTableRowElement, Props>(
       style,
       ...rest
     } = props
-    const classes = useStyles()
 
     const wasExpandedOnce = useRef(false)
     const shouldTransition = !defaultExpanded || wasExpandedOnce.current
@@ -69,15 +61,16 @@ export const TableExpandableRow = forwardRef<HTMLTableRowElement, Props>(
         {row}
         {expanded && (
           <TableRow
-            className={cx(className, {
-              [classes.stripeEven]: stripeEven,
-            })}
+            className={twJoin(
+              className,
+              stripeEven && 'bg-gray-200 bg-opacity-[32]'
+            )}
             style={style}
           >
-            <TableCell className={classes.noPadding} colSpan={MAX_COL_SPAN}>
-              <MUICollapse appear={shouldTransition} in>
+            <TableCell className='p-0 last:pr-0' colSpan={MAX_COL_SPAN}>
+              <Collapse appear={shouldTransition} in>
                 {content}
-              </MUICollapse>
+              </Collapse>
             </TableCell>
           </TableRow>
         )}

package/src/TableFooter/TableFooter.tsx

@@ -1,11 +1,8 @@
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import { TableFooter as MUITableFooter } from '@material-ui/core'
 import type { ReactNode, HTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
 import type { BaseProps } from '@toptal/picasso-shared'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
-import styles from './styles'
 import { TableSection, TableSectionContext } from '../Table'
 
 export interface Props
@@ -15,26 +12,23 @@ export interface Props
   children: ReactNode
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoTableFooter',
-})
-
 export const TableFooter = forwardRef<HTMLTableSectionElement, Props>(
   function TableFooter(props, ref) {
     const { className, style, children, ...rest } = props
-    const classes = useStyles()
 
     return (
       <TableSectionContext.Provider value={TableSection.FOOTER}>
-        <MUITableFooter
+        <tfoot
           {...rest}
           ref={ref}
-          classes={classes}
-          className={className}
+          className={twMerge(
+            'border-0 border-solid border-t border-gray-200',
+            className
+          )}
           style={style}
         >
           {children}
-        </MUITableFooter>
+        </tfoot>
       </TableSectionContext.Provider>
     )
   }

package/src/TableFooter/__snapshots__/test.tsx.snap

@@ -6,19 +6,19 @@ exports[`TableFooter renders 1`] = `
     class="Picasso-root"
   >
     <table
-      class="MuiTable-root"
+      class="w-full border-collapse border-spacing"
     >
       <tfoot
-        class="MuiTableFooter-root PicassoTableFooter-root"
+        class="border-0 border-solid border-t border-gray"
       >
         <tr
-          class="MuiTableRow-root PicassoTableRow-root PicassoTableRow-bordered MuiTableRow-footer"
+          class="border-0 border-solid border-b border-gray"
         >
           <td
-            class="MuiTableCell-root PicassoTableCell-root MuiTableCell-footer"
+            class="h-10 py-2 border-none last:pr-6 px-4"
           >
             <div
-              class="m-0 text-sm text-black font-semibold"
+              class="m-0 text-sm text-black font-semibold text-align"
             >
               Footer test
             </div>

package/src/TableHead/TableHead.tsx

@@ -1,11 +1,8 @@
 import type { ReactNode, HTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import { TableHead as MUITableHead } from '@material-ui/core'
 import type { BaseProps } from '@toptal/picasso-shared'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
-import styles from './styles'
 import { TableSectionContext, TableSection } from '../Table'
 
 export interface Props
@@ -15,24 +12,23 @@ export interface Props
   children: ReactNode
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoTableHead' })
-
 export const TableHead = forwardRef<HTMLTableSectionElement, Props>(
   function TableHead(props, ref) {
     const { className, style, children, ...rest } = props
-    const classes = useStyles()
 
     return (
       <TableSectionContext.Provider value={TableSection.HEAD}>
-        <MUITableHead
+        <thead
           {...rest}
           ref={ref}
-          classes={classes}
-          className={className}
+          className={twMerge(
+            'border-0 border-solid border-b border-gray-200',
+            className
+          )}
           style={style}
         >
           {children}
-        </MUITableHead>
+        </thead>
       </TableSectionContext.Provider>
     )
   }

package/src/TableHead/__snapshots__/test.tsx.snap

@@ -6,20 +6,19 @@ exports[`TableHead renders 1`] = `
     class="Picasso-root"
   >
     <table
-      class="MuiTable-root"
+      class="w-full border-collapse border-spacing"
     >
       <thead
-        class="MuiTableHead-root PicassoTableHead-root"
+        class="border-0 border-solid border-b border-gray"
       >
         <tr
-          class="MuiTableRow-root PicassoTableRow-root PicassoTableRow-bordered MuiTableRow-head"
+          class="border-0 border-solid border-b border-gray"
         >
           <th
-            class="MuiTableCell-root PicassoTableCell-root MuiTableCell-head"
-            scope="col"
+            class="h-10 py-2 border-none last:pr-6 px-4 text-left"
           >
             <div
-              class="m-0 text-xxs text-graphite font-semibold"
+              class="m-0 text-xxs text-graphite font-semibold text-align"
             >
               Head test
             </div>

package/src/TableRow/TableRow.tsx

@@ -1,12 +1,8 @@
 import type { ReactNode, MouseEvent, HTMLAttributes } from 'react'
 import React, { forwardRef, useContext } from 'react'
-import cx from 'classnames'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import { TableRow as MUITableRow } from '@material-ui/core'
 import type { BaseProps } from '@toptal/picasso-shared'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
-import styles from './styles'
 import { TableContext } from '../Table'
 
 export interface Props extends BaseProps, HTMLAttributes<HTMLTableRowElement> {
@@ -22,8 +18,6 @@ export interface Props extends BaseProps, HTMLAttributes<HTMLTableRowElement> {
   stripeEven?: boolean
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoTableRow' })
-
 export const TableRow = forwardRef<HTMLTableRowElement, Props>(
   function TableRow(props, ref) {
     const {
@@ -36,30 +30,26 @@ export const TableRow = forwardRef<HTMLTableRowElement, Props>(
       onClick,
       ...rest
     } = props
-    const {
-      stripeEven: stripeEvenClass,
-      bordered: borderedClass,
-      ...muiClasses
-    } = useStyles()
+
     const { variant } = useContext(TableContext)
     const isBordered = variant === 'bordered' || variant === 'striped'
 
     return (
-      <MUITableRow
+      <tr
         {...rest}
         ref={ref}
-        classes={muiClasses}
-        className={cx(className, {
-          [stripeEvenClass]: stripeEven,
-          [borderedClass]: isBordered,
-        })}
+        className={twMerge(
+          isBordered && 'border-0 border-solid border-b border-gray-200',
+          stripeEven && 'bg-gray-100',
+          hover && 'hover:bg-blue-100 transition-colors',
+          selected && 'bg-blue-100',
+          className
+        )}
         style={style}
-        hover={hover}
-        selected={selected}
         onClick={onClick}
       >
         {children}
-      </MUITableRow>
+      </tr>
     )
   }
 )

package/src/TableRow/__snapshots__/test.tsx.snap

@@ -6,19 +6,17 @@ exports[`TableRow renders 1`] = `
     class="Picasso-root"
   >
     <table
-      class="MuiTable-root"
+      class="w-full border-collapse border-spacing"
     >
-      <tbody
-        class="MuiTableBody-root"
-      >
+      <tbody>
         <tr
-          class="MuiTableRow-root PicassoTableRow-root PicassoTableRow-bordered"
+          class="border-0 border-solid border-b border-gray"
         >
           <td
-            class="MuiTableCell-root PicassoTableCell-root MuiTableCell-body"
+            class="h-10 py-2 border-none last:pr-6 px-4"
           >
             <div
-              class="m-0 text-sm text-graphite font-inherit"
+              class="m-0 text-sm text-graphite font-inherit text-align"
             >
               Row test
             </div>

package/src/TableSectionHead/TableSectionHead.tsx

@@ -1,14 +1,11 @@
 import type { ReactElement, HTMLAttributes, FunctionComponent } from 'react'
 import React, { forwardRef } from 'react'
 import type { BaseProps } from '@toptal/picasso-shared'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 
 import { TableSection, TableSectionContext } from '../Table'
 import { TableCell } from '../TableCell'
 import { TableRow } from '../TableRow'
 import { TableBody } from '../TableBody'
-import styles from './styles'
 
 const MAX_COL_SPAN = 100
 
@@ -19,24 +16,25 @@ export interface Props
   icon?: ReactElement
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoTableSectionHead',
-})
-
 export const TableSectionHead: FunctionComponent<Props> = forwardRef<
   HTMLTableSectionElement,
   Props
 >(function TableSectionHead(props, ref) {
   const { colSpan, icon, children, style } = props
 
-  const classes = useStyles()
-
   return (
     <TableBody ref={ref}>
-      <TableRow className={classes.sectionHeaderRow} style={style}>
+      <TableRow
+        className='min-h-10 border-y border-solid border-gray-200'
+        style={style}
+      >
         <TableSectionContext.Provider value={TableSection.HEAD}>
           <TableCell colSpan={colSpan}>
-            {icon && <span className={classes.iconWrapper}>{icon}</span>}
+            {icon && (
+              <span className='inline-block align-middle mr-3 -mt-[1px]'>
+                {icon}
+              </span>
+            )}
             {children}
           </TableCell>
         </TableSectionContext.Provider>

package/src/TableSectionHead/__snapshots__/test.tsx.snap

@@ -6,24 +6,22 @@ exports[`TableSectionHead renders 1`] = `
     class="Picasso-root"
   >
     <table
-      class="MuiTable-root"
+      class="w-full border-collapse border-spacing"
     >
-      <tbody
-        class="MuiTableBody-root"
-      >
+      <tbody>
         <tr
-          class="MuiTableRow-root PicassoTableRow-root PicassoTableSectionHead-sectionHeaderRow PicassoTableRow-bordered"
+          class="border-0 min-h border-y border-solid border-gray"
         >
-          <td
-            class="MuiTableCell-root PicassoTableCell-root MuiTableCell-body"
+          <th
+            class="h-10 py-2 border-none last:pr-6 px-4 text-left"
             colspan="100"
           >
             <div
-              class="m-0 text-xxs text-graphite font-semibold"
+              class="m-0 text-xxs text-graphite font-semibold text-align"
             >
               Test
             </div>
-          </td>
+          </th>
         </tr>
       </tbody>
     </table>

package/src/TableSortableCell/__snapshots__/test.tsx.snap

@@ -9,13 +9,13 @@ exports[`TableCell sort direction is asc renders with a sort button in the right
       <tbody>
         <tr>
           <td
-            class="MuiTableCell-root PicassoTableCell-root group hover:bg-gray"
+            class="h-10 py-2 border-none last:pr-6 px-4 group hover:bg-gray"
           >
             <div
               class="flex items-center"
             >
               <div
-                class="m-0 text-sm text-graphite font-inherit"
+                class="m-0 text-sm text-graphite font-inherit text-align"
               >
                 Cell
               </div>
@@ -28,7 +28,7 @@ exports[`TableCell sort direction is asc renders with a sort button in the right
                 type="button"
               >
                 <span
-                  class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+                  class="items-center inline-flex font-semibold whitespace-nowrap text-button"
                 >
                   <svg
                     class="PicassoSvgArrowLongUp16-root text-[1.2em] flex-1"
@@ -59,13 +59,13 @@ exports[`TableCell sort direction is desc renders with a sort button in the righ
       <tbody>
         <tr>
           <td
-            class="MuiTableCell-root PicassoTableCell-root group hover:bg-gray"
+            class="h-10 py-2 border-none last:pr-6 px-4 group hover:bg-gray"
           >
             <div
               class="flex items-center"
             >
               <div
-                class="m-0 text-sm text-graphite font-inherit"
+                class="m-0 text-sm text-graphite font-inherit text-align"
               />
               <button
                 aria-disabled="false"
@@ -76,7 +76,7 @@ exports[`TableCell sort direction is desc renders with a sort button in the righ
                 type="button"
               >
                 <span
-                  class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+                  class="items-center inline-flex font-semibold whitespace-nowrap text-button"
                 >
                   <svg
                     class="PicassoSvgArrowLongDown16-root text-[1.2em] flex-1"

package/dist-package/src/Table/styles.d.ts

@@ -1,3 +0,0 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, never>;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/Table/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Table/styles.ts"],"names":[],"mappings":";AAKA,wBAAqC"}

package/dist-package/src/Table/styles.js

@@ -1,5 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-import { PicassoProvider } from '@toptal/picasso-provider';
-PicassoProvider.override(() => ({}));
-export default () => createStyles({});
-//# sourceMappingURL=styles.js.map

package/dist-package/src/Table/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,eAAe,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AAEpC,eAAe,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,CAAA"}

package/dist-package/src/TableBody/styles.d.ts

@@ -1,3 +0,0 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, never>;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/TableBody/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/TableBody/styles.ts"],"names":[],"mappings":";AAKA,wBAAqC"}

package/dist-package/src/TableBody/styles.js

@@ -1,5 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-import { PicassoProvider } from '@toptal/picasso-provider';
-PicassoProvider.override(() => ({}));
-export default () => createStyles({});
-//# sourceMappingURL=styles.js.map

package/dist-package/src/TableBody/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/TableBody/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,eAAe,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AAEpC,eAAe,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,CAAA"}

package/dist-package/src/TableCell/styles.d.ts

@@ -1,3 +0,0 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "compact" | "narrow" | "root">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/TableCell/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/TableCell/styles.ts"],"names":[],"mappings":";AAiCA,wBAKI"}