@toptal/picasso-table 3.0.23 → 3.0.24

package/dist-package/src/TableSectionHead/TableSectionHead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableSectionHead.d.ts","sourceRoot":"","sources":["../../../src/TableSectionHead/TableSectionHead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAE5E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AASvD,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,CAAC,uBAAuB,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,KAAK,CAyBpD,CAAA;AAQF,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"TableSectionHead.d.ts","sourceRoot":"","sources":["../../../src/TableSectionHead/TableSectionHead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAE5E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAUvD,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,CAAC,uBAAuB,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,KAAK,CA4BpD,CAAA;AAQF,eAAe,gBAAgB,CAAA"}

package/dist-package/src/TableSectionHead/TableSectionHead.js

@@ -1,13 +1,14 @@
 import React, { forwardRef } from 'react';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 import { TableSection, TableSectionContext } from '../Table';
 import { TableCell } from '../TableCell';
 import { TableRow } from '../TableRow';
 import { TableBody } from '../TableBody';
 const MAX_COL_SPAN = 100;
 export const TableSectionHead = forwardRef(function TableSectionHead(props, ref) {
-    const { colSpan, icon, children, style } = props;
+    const { colSpan, icon, children, style, className } = props;
     return (React.createElement(TableBody, { ref: ref },
-        React.createElement(TableRow, { className: 'min-h-10 border-y border-solid border-gray-200', style: style },
+        React.createElement(TableRow, { className: twMerge('min-h-10 border-y border-solid border-gray-200', className), style: style },
             React.createElement(TableSectionContext.Provider, { value: TableSection.HEAD },
                 React.createElement(TableCell, { colSpan: colSpan },
                     icon && (React.createElement("span", { className: 'inline-block align-middle mr-3 -mt-[1px]' }, icon)),

package/dist-package/src/TableSectionHead/TableSectionHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSectionHead.js","sourceRoot":"","sources":["../../../src/TableSectionHead/TableSectionHead.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,MAAM,YAAY,GAAG,GAAG,CAAA;AASxB,MAAM,CAAC,MAAM,gBAAgB,GAA6B,UAAU,CAGlE,SAAS,gBAAgB,CAAC,KAAK,EAAE,GAAG;IACpC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IAEhD,OAAO,CACL,oBAAC,SAAS,IAAC,GAAG,EAAE,GAAG;QACjB,oBAAC,QAAQ,IACP,SAAS,EAAC,gDAAgD,EAC1D,KAAK,EAAE,KAAK;YAEZ,oBAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,CAAC,IAAI;gBACpD,oBAAC,SAAS,IAAC,OAAO,EAAE,OAAO;oBACxB,IAAI,IAAI,CACP,8BAAM,SAAS,EAAC,0CAA0C,IACvD,IAAI,CACA,CACR;oBACA,QAAQ,CACC,CACiB,CACtB,CACD,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,gBAAgB,CAAC,YAAY,GAAG;IAC9B,OAAO,EAAE,YAAY;CACtB,CAAA;AAED,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAEjD,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"TableSectionHead.js","sourceRoot":"","sources":["../../../src/TableSectionHead/TableSectionHead.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,MAAM,YAAY,GAAG,GAAG,CAAA;AASxB,MAAM,CAAC,MAAM,gBAAgB,GAA6B,UAAU,CAGlE,SAAS,gBAAgB,CAAC,KAAK,EAAE,GAAG;IACpC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IAE3D,OAAO,CACL,oBAAC,SAAS,IAAC,GAAG,EAAE,GAAG;QACjB,oBAAC,QAAQ,IACP,SAAS,EAAE,OAAO,CAChB,gDAAgD,EAChD,SAAS,CACV,EACD,KAAK,EAAE,KAAK;YAEZ,oBAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,CAAC,IAAI;gBACpD,oBAAC,SAAS,IAAC,OAAO,EAAE,OAAO;oBACxB,IAAI,IAAI,CACP,8BAAM,SAAS,EAAC,0CAA0C,IACvD,IAAI,CACA,CACR;oBACA,QAAQ,CACC,CACiB,CACtB,CACD,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,gBAAgB,CAAC,YAAY,GAAG;IAC9B,OAAO,EAAE,YAAY;CACtB,CAAA;AAED,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAEjD,eAAe,gBAAgB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-table",
-  "version": "3.0.23",
+  "version": "3.0.24",
   "description": "Toptal UI components library - Table",
   "publishConfig": {
     "access": "public"

package/src/TableSectionHead/TableSectionHead.tsx

@@ -1,6 +1,7 @@
 import type { ReactElement, HTMLAttributes, FunctionComponent } from 'react'
 import React, { forwardRef } from 'react'
 import type { BaseProps } from '@toptal/picasso-shared'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 import { TableSection, TableSectionContext } from '../Table'
 import { TableCell } from '../TableCell'
@@ -20,12 +21,15 @@ export const TableSectionHead: FunctionComponent<Props> = forwardRef<
   HTMLTableSectionElement,
   Props
 >(function TableSectionHead(props, ref) {
-  const { colSpan, icon, children, style } = props
+  const { colSpan, icon, children, style, className } = props
 
   return (
     <TableBody ref={ref}>
       <TableRow
-        className='min-h-10 border-y border-solid border-gray-200'
+        className={twMerge(
+          'min-h-10 border-y border-solid border-gray-200',
+          className
+        )}
         style={style}
       >
         <TableSectionContext.Provider value={TableSection.HEAD}>

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

@@ -10,7 +10,7 @@ exports[`TableSectionHead renders 1`] = `
     >
       <tbody>
         <tr
-          class="border-0 min-h border-y border-solid border-gray"
+          class="border-0 min-h border-y border-solid border-gray bg-red"
         >
           <th
             class="h-10 py-2 border-none px-4 text-left"

package/src/TableSectionHead/test.tsx

@@ -7,7 +7,7 @@ import { TableCompound as Table } from '../TableCompound'
 const renderTableSectionHead = () => {
   return render(
     <Table>
-      <Table.SectionHead>Test</Table.SectionHead>
+      <Table.SectionHead className='bg-red-500'>Test</Table.SectionHead>
     </Table>
   )
 }