@atom-learning/components 3.30.0 → 3.31.0

package/CHANGELOG.md

@@ -1,14 +1,9 @@
-# [3.30.0](https://github.com/Atom-Learning/components/compare/v3.29.3...v3.30.0) (2024-08-29)
-
-
-### Bug Fixes
-
-* set specific version in resolutions ([9a6d3ef](https://github.com/Atom-Learning/components/commit/9a6d3ef6067fe1d0e8da0f05b2f185da870da037))
+# [3.31.0](https://github.com/Atom-Learning/components/compare/v3.30.1...v3.31.0) (2024-09-18)
 
 
 ### Features
 
-* upgrade NextJS, Typescript and React to the latest versions ([80f48af](https://github.com/Atom-Learning/components/commit/80f48afd77772a5110569d4d850777a4ce29a47b))
+* focusVisibleStyleBlock allow boxShadow to be passed in ([cc6a85c](https://github.com/Atom-Learning/components/commit/cc6a85c554d596bcd386bedd5647fd263bd6262c))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/data-table/DataTable.d.ts

@@ -1044,7 +1044,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
     } & {
         numberOfStickyColumns?: number;
         scrollContainerCss?: import("../..").CSS;
-        controlColumnCount?: number;
+        scrollContainerkey?: string;
         maxRowDepth?: number;
     }, "children" | "numberOfStickyColumns"> & Partial<Pick<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
         ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;

package/dist/components/data-table/DataTableTable.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{Table as h}from"../table/Table.js";import{DataTable as l}from"./DataTable.js";import{AsyncDataState as D}from"./DataTable.types.js";import{useDataTable as E}from"./DataTableContext.js";import{DataTableLoading as T}from"./DataTableLoading.js";const k=({sortable:m,striped:c,theme:i,css:p,scrollOptions:t={numberOfStickyColumns:0,hasStickyHeader:!1},...d})=>{const{asyncDataState:u,getTotalRows:b,getCanSomeRowsExpand:o,getGroupedRowModel:y,enableRowSelection:r}=E(),n=u===D.PENDING,C=!n&&b()===0,f=()=>y().flatRows.reduce((a,s)=>(s.depth>a&&(a=s.depth),a),0),S=()=>o()&&!!r?2:o()||!!r?1:0;return C?null:e.createElement(e.Fragment,null,e.createElement(T,null),e.createElement(h,{...d,numberOfStickyColumns:t.numberOfStickyColumns,scrollContainerCss:t.scrollContainerCss,controlColumnCount:S(),maxRowDepth:f(),css:{...p,...n&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(l.Head,{theme:i,sortable:m,isSticky:t.hasStickyHeader,css:t.headerCss}),e.createElement(l.Body,{striped:c})))};export{k as DataTableTable};
+import*as e from"react";import{Table as f}from"../table/Table.js";import{DataTable as s}from"./DataTable.js";import{AsyncDataState as S}from"./DataTable.types.js";import{useDataTable as E}from"./DataTableContext.js";import{DataTableLoading as k}from"./DataTableLoading.js";const D=({sortable:l,striped:m,theme:c,css:i,scrollOptions:t={numberOfStickyColumns:0,hasStickyHeader:!1},...p})=>{const{asyncDataState:u,getTotalRows:b,getCanSomeRowsExpand:r,enableRowSelection:n,tableId:y}=E(),o=u===S.PENDING,C=!o&&b()===0,d=()=>{let a=0;return r()&&!!n?a=2:(r()||!!n)&&(a=1),`${y}_${a}_control_columns`};return C?null:e.createElement(e.Fragment,null,e.createElement(k,null),e.createElement(f,{...p,numberOfStickyColumns:t.numberOfStickyColumns,scrollContainerCss:t.scrollContainerCss,scrollContainerkey:d(),css:{...i,...o&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(s.Head,{theme:c,sortable:l,isSticky:t.hasStickyHeader,css:t.headerCss}),e.createElement(s.Body,{striped:m})))};export{D as DataTableTable};
 //# sourceMappingURL=DataTableTable.js.map

package/dist/components/data-table/DataTableTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      headerCss?: CSS\n      numberOfStickyColumns?: number\n      scrollContainerCss?: CSS\n    }\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme,\n  css,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    hasStickyHeader: false\n  },\n  ...props\n}: DataTableTableProps) => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    getGroupedRowModel,\n    enableRowSelection\n  } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  const getMaxRowDepth = () => {\n    return getGroupedRowModel().flatRows.reduce((acc, curr) => {\n      if (curr.depth > acc) {\n        acc = curr.depth\n      }\n\n      return acc\n    }, 0)\n  }\n\n  const getControlColumnsCount = (): number => {\n    if (getCanSomeRowsExpand() && !!enableRowSelection) return 2\n\n    if (getCanSomeRowsExpand() || !!enableRowSelection) return 1\n\n    return 0\n  }\n\n  if (isEmpty) return null\n\n  return (\n    <>\n      <DataTableLoading />\n\n      <Table\n        {...props}\n        numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n        scrollContainerCss={scrollOptions.scrollContainerCss}\n        controlColumnCount={getControlColumnsCount()}\n        maxRowDepth={getMaxRowDepth()}\n        css={{\n          ...css,\n          ...(isPending && {\n            opacity: 0.5,\n            pointerEvents: 'none',\n            transition: 'opacity 250ms linear 150ms'\n          })\n        }}\n      >\n        <DataTable.Head\n          theme={theme}\n          sortable={sortable}\n          isSticky={scrollOptions.hasStickyHeader}\n          css={scrollOptions.headerCss}\n        />\n        <DataTable.Body striped={striped} />\n      </Table>\n    </>\n  )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","scrollOptions","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","getGroupedRowModel","enableRowSelection","useDataTable","isPending","AsyncDataState","isEmpty","getMaxRowDepth","acc","curr","getControlColumnsCount","React","DataTableLoading","Table","DataTable"],"mappings":"uRA4BaA,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,EACA,cAAAC,EAAgB,CACd,sBAAuB,EACvB,gBAAiB,EACnB,KACGC,CACL,IAA2B,CACzB,KAAM,CACJ,eAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,mBAAAC,EACA,mBAAAC,CACF,EAAIC,EACEC,EAAAA,EAAYN,IAAmBO,EAAe,QAC9CC,EAAU,CAACF,GAAaL,MAAmB,EAE3CQ,EAAiB,IACdN,IAAqB,SAAS,OAAO,CAACO,EAAKC,KAC5CA,EAAK,MAAQD,IACfA,EAAMC,EAAK,OAGND,GACN,CAAC,EAGAE,EAAyB,IACzBV,EAAAA,GAA0B,CAAC,CAACE,EAA2B,EAEvDF,KAA0B,CAAC,CAACE,EAA2B,EAEpD,EAGT,OAAII,EAAgB,KAGlBK,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAA,IAAiB,EAElBD,EAAA,cAACE,EAAA,CACE,GAAGhB,EACJ,sBAAuBD,EAAc,sBACrC,mBAAoBA,EAAc,mBAClC,mBAAoBc,EAAuB,EAC3C,YAAaH,IACb,IAAK,CACH,GAAGZ,EACH,GAAIS,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAEAO,EAAAA,EAAA,cAACG,EAAU,KAAV,CACC,MAAOpB,EACP,SAAUF,EACV,SAAUI,EAAc,gBACxB,IAAKA,EAAc,SAAA,CACrB,EACAe,EAAA,cAACG,EAAU,KAAV,CAAe,QAASrB,CAAS,CAAA,CACpC,CACF,CAEJ"}
+{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      headerCss?: CSS\n      numberOfStickyColumns?: number\n      scrollContainerCss?: CSS\n    }\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme,\n  css,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    hasStickyHeader: false\n  },\n  ...props\n}: DataTableTableProps) => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    enableRowSelection,\n    tableId\n  } = useDataTable()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  const buildScrollContainerKey = (): string => {\n    let controlColumnCount = 0\n\n    if (getCanSomeRowsExpand() && !!enableRowSelection) {\n      controlColumnCount = 2\n    } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n      controlColumnCount = 1\n    }\n\n    return `${tableId}_${controlColumnCount}_control_columns`\n  }\n\n  if (isEmpty) return null\n\n  return (\n    <>\n      <DataTableLoading />\n\n      <Table\n        {...props}\n        numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n        scrollContainerCss={scrollOptions.scrollContainerCss}\n        scrollContainerkey={buildScrollContainerKey()}\n        css={{\n          ...css,\n          ...(isPending && {\n            opacity: 0.5,\n            pointerEvents: 'none',\n            transition: 'opacity 250ms linear 150ms'\n          })\n        }}\n      >\n        <DataTable.Head\n          theme={theme}\n          sortable={sortable}\n          isSticky={scrollOptions.hasStickyHeader}\n          css={scrollOptions.headerCss}\n        />\n        <DataTable.Body striped={striped} />\n      </Table>\n    </>\n  )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","scrollOptions","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","enableRowSelection","tableId","useDataTable","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","React","DataTableLoading","Table","DataTable"],"mappings":"iRA4BO,MAAMA,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,EACA,cAAAC,EAAgB,CACd,sBAAuB,EACvB,gBAAiB,EACnB,KACGC,CACL,IAA2B,CACzB,KAAM,CACJ,eAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,mBAAAC,EACA,QAAAC,CACF,EAAIC,EAAa,EAEXC,EAAYN,IAAmBO,EAAe,QAC9CC,EAAU,CAACF,GAAaL,EAAmB,IAAA,EAE3CQ,EAA0B,IAAc,CAC5C,IAAIC,EAAqB,EAEzB,OAAIR,EAAAA,GAA0B,CAAC,CAACC,EAC9BO,EAAqB,GACZR,EAAqB,GAAK,CAAC,CAACC,KACrCO,EAAqB,GAGhB,GAAGN,KAAWM,mBACvB,EAEA,OAAIF,EAAgB,KAGlBG,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACC,EAAA,IAAiB,EAElBD,EAAA,cAACE,EAAA,CACE,GAAGd,EACJ,sBAAuBD,EAAc,sBACrC,mBAAoBA,EAAc,mBAClC,mBAAoBW,EAAwB,EAC5C,IAAK,CACH,GAAGZ,EACH,GAAIS,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAAA,EAEAK,EAAA,cAACG,EAAU,KAAV,CACC,MAAOlB,EACP,SAAUF,EACV,SAAUI,EAAc,gBACxB,IAAKA,EAAc,SACrB,CAAA,EACAa,EAAA,cAACG,EAAU,KAAV,CAAe,QAASnB,CAAS,CAAA,CACpC,CACF,CAEJ"}

package/dist/components/table/Table.d.ts

@@ -373,11 +373,11 @@ declare const StyledTable: import("@atom-learning/stitches-react/types/styled-co
 type TableProps = React.ComponentProps<typeof StyledTable> & {
     numberOfStickyColumns?: number;
     scrollContainerCss?: CSS;
-    controlColumnCount?: number;
+    scrollContainerkey?: string;
     maxRowDepth?: number;
 };
 export declare const Table: {
-    ({ size, corners, numberOfStickyColumns, scrollContainerCss, controlColumnCount, maxRowDepth, ...rest }: TableProps): React.JSX.Element;
+    ({ size, corners, numberOfStickyColumns, scrollContainerCss, scrollContainerkey, ...rest }: TableProps): React.JSX.Element;
     displayName: string;
 } & {
     Body: {
@@ -2972,11 +2972,9 @@ export declare const Table: {
             };
         }> | undefined;
     }>;
-    StickyColumnsContainer: ({ children, numberOfStickyColumns, controlColumnCount, maxRowDepth, css, ...restProps }: React.PropsWithChildren<{
+    StickyColumnsContainer: ({ children, numberOfStickyColumns, css, ...restProps }: React.PropsWithChildren<{
         numberOfStickyColumns?: number;
         css?: CSS;
-        controlColumnCount?: number;
-        maxRowDepth?: number;
     }>) => React.JSX.Element;
 };
 export {};

package/dist/components/table/Table.js

@@ -1,2 +1,2 @@
-import*as a from"react";import{styled as b}from"../../stitches.js";import{TableBody as f}from"./TableBody.js";import{TableCell as o}from"./TableCell.js";import{TableFooter as C}from"./TableFooter.js";import{TableFooterCell as r}from"./TableFooterCell.js";import{TableHeader as u}from"./TableHeader.js";import{TableHeaderCell as e}from"./TableHeaderCell.js";import{StyledRow as h,TableRow as y}from"./TableRow.js";import{TableStickyColumnsContainer as i}from"./TableStickyColumnsContainer.js";const T=b("table",{borderCollapse:"separate",borderSpacing:0,fontFamily:"$sans",fontSize:"$sm",width:"100%",variants:{size:{md:{[`${o}, ${e}, ${r}`]:{height:"$4",padding:"$1 $3"}},lg:{[`${o}, ${e}, ${r}`]:{height:"$5",padding:"$2 $3"}},xl:{[`${o}, ${e}, ${r}`]:{height:"$6",padding:"$4 $3"}}},corners:{round:{[`${e}`]:{"&:first-of-type":{borderTopLeftRadius:"$0"},"&:last-of-type":{borderTopRightRadius:"$0"}},[`${h}:last-child`]:{[`${o}:first-child`]:{borderBottomLeftRadius:"$0"},[`${o}:last-child`]:{borderBottomRightRadius:"$0"}}},square:{}}}}),m=({size:s="md",corners:n="round",numberOfStickyColumns:t=0,scrollContainerCss:d,controlColumnCount:$,maxRowDepth:p,...c})=>{const l=a.createElement(T,{size:s,corners:n,...c});return t?a.createElement(i,{css:d,numberOfStickyColumns:t,controlColumnCount:$,maxRowDepth:p},l):l},g=Object.assign(m,{Body:f,Cell:o,Footer:C,FooterCell:r,Header:u,HeaderCell:e,Row:y,StickyColumnsContainer:i});m.displayName="Table";export{g as Table};
+import*as i from"react";import{styled as b}from"../../stitches.js";import{TableBody as c}from"./TableBody.js";import{TableCell as e}from"./TableCell.js";import{TableFooter as f}from"./TableFooter.js";import{TableFooterCell as r}from"./TableFooterCell.js";import{TableHeader as C}from"./TableHeader.js";import{TableHeaderCell as o}from"./TableHeaderCell.js";import{StyledRow as u,TableRow as y}from"./TableRow.js";import{TableStickyColumnsContainer as a}from"./TableStickyColumnsContainer.js";const h=b("table",{borderCollapse:"separate",borderSpacing:0,fontFamily:"$sans",fontSize:"$sm",width:"100%",variants:{size:{md:{[`${e}, ${o}, ${r}`]:{height:"$4",padding:"$1 $3"}},lg:{[`${e}, ${o}, ${r}`]:{height:"$5",padding:"$2 $3"}},xl:{[`${e}, ${o}, ${r}`]:{height:"$6",padding:"$4 $3"}}},corners:{round:{[`${o}`]:{"&:first-of-type":{borderTopLeftRadius:"$0"},"&:last-of-type":{borderTopRightRadius:"$0"}},[`${u}:last-child`]:{[`${e}:first-child`]:{borderBottomLeftRadius:"$0"},[`${e}:last-child`]:{borderBottomRightRadius:"$0"}}},square:{}}}}),s=({size:m="md",corners:n="round",numberOfStickyColumns:t=0,scrollContainerCss:d,scrollContainerkey:$,...p})=>{const l=i.createElement(h,{size:m,corners:n,...p});return t?i.createElement(a,{key:$,css:d,numberOfStickyColumns:t},l):l},T=Object.assign(s,{Body:c,Cell:e,Footer:f,FooterCell:r,Header:C,HeaderCell:o,Row:y,StickyColumnsContainer:a});s.displayName="Table";export{T as Table};
 //# sourceMappingURL=Table.js.map

package/dist/components/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\n\nimport { TableBody } from './TableBody'\nimport { TableCell } from './TableCell'\nimport { TableFooter } from './TableFooter'\nimport { TableFooterCell } from './TableFooterCell'\nimport { TableHeader } from './TableHeader'\nimport { TableHeaderCell } from './TableHeaderCell'\nimport { StyledRow, TableRow } from './TableRow'\nimport { TableStickyColumnsContainer } from './TableStickyColumnsContainer'\n\nconst StyledTable = styled('table', {\n  borderCollapse: 'separate',\n  borderSpacing: 0,\n  fontFamily: '$sans',\n  fontSize: '$sm',\n  width: '100%',\n  variants: {\n    size: {\n      md: {\n        [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n          height: '$4',\n          padding: '$1 $3'\n        }\n      },\n      lg: {\n        [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n          height: '$5',\n          padding: '$2 $3'\n        }\n      },\n      xl: {\n        [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n          height: '$6',\n          padding: '$4 $3'\n        }\n      }\n    },\n    corners: {\n      round: {\n        [`${TableHeaderCell}`]: {\n          '&:first-of-type': { borderTopLeftRadius: '$0' },\n          '&:last-of-type': { borderTopRightRadius: '$0' }\n        },\n        [`${StyledRow}:last-child`]: {\n          [`${TableCell}:first-child`]: { borderBottomLeftRadius: '$0' },\n          [`${TableCell}:last-child`]: { borderBottomRightRadius: '$0' }\n        }\n      },\n      square: {}\n    }\n  }\n})\n\ntype TableProps = React.ComponentProps<typeof StyledTable> & {\n  numberOfStickyColumns?: number\n  scrollContainerCss?: CSS\n  controlColumnCount?: number\n  maxRowDepth?: number\n}\n\nconst TableComponent = ({\n  size = 'md',\n  corners = 'round',\n  numberOfStickyColumns = 0,\n  scrollContainerCss,\n  controlColumnCount,\n  maxRowDepth,\n  ...rest\n}: TableProps) => {\n  const tableComponent = <StyledTable size={size} corners={corners} {...rest} />\n\n  if (numberOfStickyColumns) {\n    return (\n      <TableStickyColumnsContainer\n        css={scrollContainerCss}\n        numberOfStickyColumns={numberOfStickyColumns}\n        controlColumnCount={controlColumnCount}\n        maxRowDepth={maxRowDepth}\n      >\n        {tableComponent}\n      </TableStickyColumnsContainer>\n    )\n  }\n\n  return tableComponent\n}\n\nexport const Table = Object.assign(TableComponent, {\n  Body: TableBody,\n  Cell: TableCell,\n  Footer: TableFooter,\n  FooterCell: TableFooterCell,\n  Header: TableHeader,\n  HeaderCell: TableHeaderCell,\n  Row: TableRow,\n  StickyColumnsContainer: TableStickyColumnsContainer\n})\n\nTableComponent.displayName = 'Table'\n"],"names":["StyledTable","styled","TableCell","TableHeaderCell","TableFooterCell","StyledRow","TableComponent","size","corners","numberOfStickyColumns","scrollContainerCss","controlColumnCount","maxRowDepth","rest","tableComponent","React","TableStickyColumnsContainer","Table","TableBody","TableFooter","TableHeader","TableRow"],"mappings":"4eAaA,MAAMA,EAAcC,EAAO,QAAS,CAClC,eAAgB,WAChB,cAAe,EACf,WAAY,QACZ,SAAU,MACV,MAAO,OACP,SAAU,CACR,KAAM,CACJ,GAAI,CACF,CAAC,GAAGC,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,EACA,GAAI,CACF,CAAC,GAAGF,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,EACA,GAAI,CACF,CAAC,GAAGF,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,CACF,EACA,QAAS,CACP,MAAO,CACL,CAAC,GAAGD,KAAoB,CACtB,kBAAmB,CAAE,oBAAqB,IAAK,EAC/C,iBAAkB,CAAE,qBAAsB,IAAK,CACjD,EACA,CAAC,GAAGE,gBAAyB,CAC3B,CAAC,GAAGH,iBAA0B,CAAE,uBAAwB,IAAK,EAC7D,CAAC,GAAGA,gBAAyB,CAAE,wBAAyB,IAAK,CAC/D,CACF,EACA,OAAQ,EACV,CACF,CACF,CAAC,EASKI,EAAiB,CAAC,CACtB,KAAAC,EAAO,KACP,QAAAC,EAAU,QACV,sBAAAC,EAAwB,EACxB,mBAAAC,EACA,mBAAAC,EACA,YAAAC,KACGC,CACL,IAAkB,CAChB,MAAMC,EAAiBC,EAAA,cAACf,EAAA,CAAY,KAAMO,EAAM,QAASC,EAAU,GAAGK,CAAAA,CAAM,EAE5E,OAAIJ,EAEAM,EAAA,cAACC,EAAA,CACC,IAAKN,EACL,sBAAuBD,EACvB,mBAAoBE,EACpB,YAAaC,CAAAA,EAEZE,CACH,EAIGA,CACT,EAEaG,EAAQ,OAAO,OAAOX,EAAgB,CACjD,KAAMY,EACN,KAAMhB,EACN,OAAQiB,EACR,WAAYf,EACZ,OAAQgB,EACR,WAAYjB,EACZ,IAAKkB,EACL,uBAAwBL,CAC1B,CAAC,EAEDV,EAAe,YAAc"}
+{"version":3,"file":"Table.js","sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\n\nimport { TableBody } from './TableBody'\nimport { TableCell } from './TableCell'\nimport { TableFooter } from './TableFooter'\nimport { TableFooterCell } from './TableFooterCell'\nimport { TableHeader } from './TableHeader'\nimport { TableHeaderCell } from './TableHeaderCell'\nimport { StyledRow, TableRow } from './TableRow'\nimport { TableStickyColumnsContainer } from './TableStickyColumnsContainer'\n\nconst StyledTable = styled('table', {\n  borderCollapse: 'separate',\n  borderSpacing: 0,\n  fontFamily: '$sans',\n  fontSize: '$sm',\n  width: '100%',\n  variants: {\n    size: {\n      md: {\n        [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n          height: '$4',\n          padding: '$1 $3'\n        }\n      },\n      lg: {\n        [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n          height: '$5',\n          padding: '$2 $3'\n        }\n      },\n      xl: {\n        [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n          height: '$6',\n          padding: '$4 $3'\n        }\n      }\n    },\n    corners: {\n      round: {\n        [`${TableHeaderCell}`]: {\n          '&:first-of-type': { borderTopLeftRadius: '$0' },\n          '&:last-of-type': { borderTopRightRadius: '$0' }\n        },\n        [`${StyledRow}:last-child`]: {\n          [`${TableCell}:first-child`]: { borderBottomLeftRadius: '$0' },\n          [`${TableCell}:last-child`]: { borderBottomRightRadius: '$0' }\n        }\n      },\n      square: {}\n    }\n  }\n})\n\ntype TableProps = React.ComponentProps<typeof StyledTable> & {\n  numberOfStickyColumns?: number\n  scrollContainerCss?: CSS\n  scrollContainerkey?: string\n  maxRowDepth?: number\n}\n\nconst TableComponent = ({\n  size = 'md',\n  corners = 'round',\n  numberOfStickyColumns = 0,\n  scrollContainerCss,\n  scrollContainerkey,\n  ...rest\n}: TableProps) => {\n  const tableComponent = <StyledTable size={size} corners={corners} {...rest} />\n\n  if (numberOfStickyColumns) {\n    return (\n      <TableStickyColumnsContainer\n        key={scrollContainerkey}\n        css={scrollContainerCss}\n        numberOfStickyColumns={numberOfStickyColumns}\n      >\n        {tableComponent}\n      </TableStickyColumnsContainer>\n    )\n  }\n\n  return tableComponent\n}\n\nexport const Table = Object.assign(TableComponent, {\n  Body: TableBody,\n  Cell: TableCell,\n  Footer: TableFooter,\n  FooterCell: TableFooterCell,\n  Header: TableHeader,\n  HeaderCell: TableHeaderCell,\n  Row: TableRow,\n  StickyColumnsContainer: TableStickyColumnsContainer\n})\n\nTableComponent.displayName = 'Table'\n"],"names":["StyledTable","styled","TableCell","TableHeaderCell","TableFooterCell","StyledRow","TableComponent","size","corners","numberOfStickyColumns","scrollContainerCss","scrollContainerkey","rest","tableComponent","React","TableStickyColumnsContainer","Table","TableBody","TableFooter","TableHeader","TableRow"],"mappings":"4eAaA,MAAMA,EAAcC,EAAO,QAAS,CAClC,eAAgB,WAChB,cAAe,EACf,WAAY,QACZ,SAAU,MACV,MAAO,OACP,SAAU,CACR,KAAM,CACJ,GAAI,CACF,CAAC,GAAGC,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,EACA,GAAI,CACF,CAAC,GAAGF,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,EACA,GAAI,CACF,CAAC,GAAGF,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,CACF,EACA,QAAS,CACP,MAAO,CACL,CAAC,GAAGD,KAAoB,CACtB,kBAAmB,CAAE,oBAAqB,IAAK,EAC/C,iBAAkB,CAAE,qBAAsB,IAAK,CACjD,EACA,CAAC,GAAGE,gBAAyB,CAC3B,CAAC,GAAGH,iBAA0B,CAAE,uBAAwB,IAAK,EAC7D,CAAC,GAAGA,gBAAyB,CAAE,wBAAyB,IAAK,CAC/D,CACF,EACA,OAAQ,CAAA,CACV,CACF,CACF,CAAC,EASKI,EAAiB,CAAC,CACtB,KAAAC,EAAO,KACP,QAAAC,EAAU,QACV,sBAAAC,EAAwB,EACxB,mBAAAC,EACA,mBAAAC,KACGC,CACL,IAAkB,CAChB,MAAMC,EAAiBC,EAAA,cAACd,EAAA,CAAY,KAAMO,EAAM,QAASC,EAAU,GAAGI,CAAM,CAAA,EAE5E,OAAIH,EAEAK,EAAA,cAACC,EAAA,CACC,IAAKJ,EACL,IAAKD,EACL,sBAAuBD,CAAAA,EAEtBI,CACH,EAIGA,CACT,EAEaG,EAAQ,OAAO,OAAOV,EAAgB,CACjD,KAAMW,EACN,KAAMf,EACN,OAAQgB,EACR,WAAYd,EACZ,OAAQe,EACR,WAAYhB,EACZ,IAAKiB,EACL,uBAAwBL,CAC1B,CAAC,EAEDT,EAAe,YAAc"}

package/dist/components/table/TableStickyColumnsContainer.d.ts

@@ -1,8 +1,6 @@
 import React from 'react';
 import { CSS } from '../../stitches';
-export declare const TableStickyColumnsContainer: ({ children, numberOfStickyColumns, controlColumnCount, maxRowDepth, css, ...restProps }: React.PropsWithChildren<{
+export declare const TableStickyColumnsContainer: ({ children, numberOfStickyColumns, css, ...restProps }: React.PropsWithChildren<{
     numberOfStickyColumns?: number;
     css?: CSS;
-    controlColumnCount?: number;
-    maxRowDepth?: number;
 }>) => React.JSX.Element;

package/dist/components/table/TableStickyColumnsContainer.js

@@ -1,2 +1,2 @@
-import o from"react";import{Box as h}from"../box/Box.js";import{useStickyColumnsCss as x}from"./useStickyColumnsCss.js";const C=({children:c,numberOfStickyColumns:t=0,controlColumnCount:s,maxRowDepth:m,css:u,...i})=>{const[r,p]=o.useState(!1),e=o.useRef(null),{columnsCss:a}=x({numberOfStickyColumns:t,wrapperRef:e,controlColumnCount:s,maxRowDepth:m});return o.createElement(h,{onScroll:n=>{const l=n.currentTarget.scrollWidth>n.currentTarget.clientWidth;l!==r&&p(l)},role:"scrollbar",ref:e,css:{overflow:"auto",maxWidth:"100%",...a,[`& td:nth-child(${t}), th:nth-child(${t})`]:{...r&&{boxShadow:"$colors$alpha200 -2px -3px 9px 1px",clipPath:"inset(0px -10px 0px 0px)"}},"& td":{bg:"inherit"},...u},...i},c)};export{C as TableStickyColumnsContainer};
+import r from"react";import{Box as a}from"../box/Box.js";import{useStickyColumnsCss as m}from"./useStickyColumnsCss.js";const h=({children:s,numberOfStickyColumns:t=0,css:c,...i})=>{const[e,p]=r.useState(!1),o=r.useRef(null),{columnsCss:u}=m({numberOfStickyColumns:t,wrapperRef:o});return r.createElement(a,{onScroll:l=>{const n=l.currentTarget.scrollWidth>l.currentTarget.clientWidth;n!==e&&p(n)},role:"scrollbar",ref:o,css:{overflow:"auto",maxWidth:"100%",...u,[`& td:nth-child(${t}), th:nth-child(${t})`]:{...e&&{boxShadow:"$colors$alpha200 -2px -3px 9px 1px",clipPath:"inset(0px -10px 0px 0px)"}},"& td":{bg:"inherit"},...c},...i},s)};export{h as TableStickyColumnsContainer};
 //# sourceMappingURL=TableStickyColumnsContainer.js.map

package/dist/components/table/TableStickyColumnsContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableStickyColumnsContainer.js","sources":["../../../src/components/table/TableStickyColumnsContainer.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Box } from '../box'\nimport { useStickyColumnsCss } from './useStickyColumnsCss'\n\nexport const TableStickyColumnsContainer = ({\n  children,\n  numberOfStickyColumns = 0,\n  controlColumnCount,\n  maxRowDepth,\n  css,\n  ...restProps\n}: React.PropsWithChildren<{\n  numberOfStickyColumns?: number\n  css?: CSS\n  controlColumnCount?: number\n  maxRowDepth?: number\n}>) => {\n  const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n  const wrapperRef = React.useRef(null)\n  const { columnsCss } = useStickyColumnsCss({\n    numberOfStickyColumns,\n    wrapperRef,\n    controlColumnCount,\n    maxRowDepth\n  })\n\n  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n    const newHasScroll =\n      event.currentTarget.scrollWidth > event.currentTarget.clientWidth\n    if (newHasScroll !== hasScroll) {\n      setHasScroll(newHasScroll)\n    }\n  }\n\n  return (\n    <Box\n      onScroll={handleScroll}\n      role=\"scrollbar\"\n      ref={wrapperRef}\n      css={{\n        overflow: 'auto',\n        maxWidth: '100%',\n        ...columnsCss,\n        [`& td:nth-child(${numberOfStickyColumns}), th:nth-child(${numberOfStickyColumns})`]:\n          {\n            ...(hasScroll && {\n              boxShadow: '$colors$alpha200 -2px -3px 9px 1px',\n              clipPath: 'inset(0px -10px 0px 0px)'\n            })\n          },\n        '& td': {\n          bg: 'inherit'\n        },\n        ...css\n      }}\n      {...restProps}\n    >\n      {children}\n    </Box>\n  )\n}\n"],"names":["TableStickyColumnsContainer","children","numberOfStickyColumns","controlColumnCount","maxRowDepth","css","restProps","hasScroll","setHasScroll","React","wrapperRef","columnsCss","useStickyColumnsCss","Box","event","newHasScroll"],"mappings":"wHAOO,MAAMA,EAA8B,CAAC,CAC1C,SAAAC,EACA,sBAAAC,EAAwB,EACxB,mBAAAC,EACA,YAAAC,EACA,IAAAC,KACGC,CACL,IAKO,CACL,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzDC,EAAaD,EAAM,OAAO,IAAI,EAC9B,CAAE,WAAAE,CAAW,EAAIC,EAAoB,CACzC,sBAAAV,EACA,WAAAQ,EACA,mBAAAP,EACA,YAAAC,CACF,CAAC,EAUD,OACEK,EAAA,cAACI,EAAA,CACC,SAVkBC,GAAyC,CAC7D,MAAMC,EACJD,EAAM,cAAc,YAAcA,EAAM,cAAc,YACpDC,IAAiBR,GACnBC,EAAaO,CAAY,CAE7B,EAKI,KAAK,YACL,IAAKL,EACL,IAAK,CACH,SAAU,OACV,SAAU,OACV,GAAGC,EACH,CAAC,kBAAkBT,oBAAwCA,MACzD,CACE,GAAIK,GAAa,CACf,UAAW,qCACX,SAAU,0BACZ,CACF,EACF,OAAQ,CACN,GAAI,SACN,EACA,GAAGF,CACL,EACC,GAAGC,CAEHL,EAAAA,CACH,CAEJ"}
+{"version":3,"file":"TableStickyColumnsContainer.js","sources":["../../../src/components/table/TableStickyColumnsContainer.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Box } from '../box'\nimport { useStickyColumnsCss } from './useStickyColumnsCss'\n\nexport const TableStickyColumnsContainer = ({\n  children,\n  numberOfStickyColumns = 0,\n  css,\n  ...restProps\n}: React.PropsWithChildren<{\n  numberOfStickyColumns?: number\n  css?: CSS\n}>) => {\n  const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n  const wrapperRef = React.useRef(null)\n  const { columnsCss } = useStickyColumnsCss({\n    numberOfStickyColumns,\n    wrapperRef\n  })\n\n  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n    const newHasScroll =\n      event.currentTarget.scrollWidth > event.currentTarget.clientWidth\n    if (newHasScroll !== hasScroll) {\n      setHasScroll(newHasScroll)\n    }\n  }\n\n  return (\n    <Box\n      onScroll={handleScroll}\n      role=\"scrollbar\"\n      ref={wrapperRef}\n      css={{\n        overflow: 'auto',\n        maxWidth: '100%',\n        ...columnsCss,\n        [`& td:nth-child(${numberOfStickyColumns}), th:nth-child(${numberOfStickyColumns})`]:\n          {\n            ...(hasScroll && {\n              boxShadow: '$colors$alpha200 -2px -3px 9px 1px',\n              clipPath: 'inset(0px -10px 0px 0px)'\n            })\n          },\n        '& td': {\n          bg: 'inherit'\n        },\n        ...css\n      }}\n      {...restProps}\n    >\n      {children}\n    </Box>\n  )\n}\n"],"names":["TableStickyColumnsContainer","children","numberOfStickyColumns","css","restProps","hasScroll","setHasScroll","React","wrapperRef","columnsCss","useStickyColumnsCss","Box","event","newHasScroll"],"mappings":"wHAOa,MAAAA,EAA8B,CAAC,CAC1C,SAAAC,EACA,sBAAAC,EAAwB,EACxB,IAAAC,KACGC,CACL,IAGO,CACL,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzDC,EAAaD,EAAM,OAAO,IAAI,EAC9B,CAAE,WAAAE,CAAW,EAAIC,EAAoB,CACzC,sBAAAR,EACA,WAAAM,CACF,CAAC,EAUD,OACED,EAAA,cAACI,EAAA,CACC,SAVkBC,GAAyC,CAC7D,MAAMC,EACJD,EAAM,cAAc,YAAcA,EAAM,cAAc,YACpDC,IAAiBR,GACnBC,EAAaO,CAAY,CAE7B,EAKI,KAAK,YACL,IAAKL,EACL,IAAK,CACH,SAAU,OACV,SAAU,OACV,GAAGC,EACH,CAAC,kBAAkBP,oBAAwCA,MACzD,CACE,GAAIG,GAAa,CACf,UAAW,qCACX,SAAU,0BACZ,CACF,EACF,OAAQ,CACN,GAAI,SACN,EACA,GAAGF,CACL,EACC,GAAGC,CAEHH,EAAAA,CACH,CAEJ"}

package/dist/components/table/useStickyColumnsCss.d.ts

@@ -3,10 +3,8 @@ import { CSS } from '../../stitches';
 interface IUseStickyColumnsCss {
     columnsCss: CSS;
 }
-export declare const useStickyColumnsCss: ({ numberOfStickyColumns, wrapperRef, controlColumnCount, maxRowDepth }: {
+export declare const useStickyColumnsCss: ({ numberOfStickyColumns, wrapperRef }: {
     numberOfStickyColumns: number;
     wrapperRef: React.RefObject<HTMLTableSectionElement>;
-    controlColumnCount?: number;
-    maxRowDepth?: number;
 }) => IUseStickyColumnsCss;
 export {};

package/dist/components/table/useStickyColumnsCss.js

@@ -1,2 +1,2 @@
-import*as l from"react";const a=40,x=8,S=({numberOfStickyColumns:e,wrapperRef:u,controlColumnCount:t=0,maxRowDepth:c})=>{const[y,C]=l.useState({}),f=(o,s)=>{const r=s+1;return t&&r<=t&&!c?a:t&&r<=t&&c?a+c*x:o.offsetWidth},i=l.useCallback(()=>{var o;let s=0;const r=(o=u.current)==null?void 0:o.querySelectorAll("th");return Array.from(r||[]).slice(0,e).reduce((d,m,n)=>{const p=n+1,h={...d,[`& td:nth-of-type(${p}), th:nth-of-type(${p})`]:{position:"sticky",left:t&&n===0?0:`${s}px`,minWidth:`${f(m,n)}px`,zIndex:"2"}};return s+=f(m,n),h},{})},[e,u,t]);return l.useLayoutEffect(()=>{if(!e)return;const o=i();C(o)},[e,u,i]),{columnsCss:y}};export{S as useStickyColumnsCss};
+import*as n from"react";const d=({numberOfStickyColumns:t,wrapperRef:r})=>{const[i,f]=n.useState({}),u=n.useCallback(()=>{var e;let s=0;const o=(e=r.current)==null?void 0:e.querySelectorAll("th");return Array.from(o||[]).slice(0,t).reduce((m,p,c)=>{const l=c+1,a={...m,[`& td:nth-of-type(${l}), th:nth-of-type(${l})`]:{position:"sticky",left:`${s}px`,minWidth:`${p.offsetWidth}px`,zIndex:"2"}};return s+=(o==null?void 0:o.item(c).clientWidth)||0,a},{})},[t,r]);return n.useLayoutEffect(()=>{if(!t)return;const e=u();f(e)},[t,r,u]),{columnsCss:i}};export{d as useStickyColumnsCss};
 //# sourceMappingURL=useStickyColumnsCss.js.map

package/dist/components/table/useStickyColumnsCss.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStickyColumnsCss.js","sources":["../../../src/components/table/useStickyColumnsCss.ts"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '../../stitches'\n\ninterface IUseStickyColumnsCss {\n  columnsCss: CSS\n}\n\nconst CONTROL_ELEMENT_WIDTH = 40\nconst SUBROW_PROGRESSIVE_OFFSET_STEP = 8\n\nexport const useStickyColumnsCss = ({\n  numberOfStickyColumns,\n  wrapperRef,\n  controlColumnCount = 0,\n  maxRowDepth\n}: {\n  numberOfStickyColumns: number\n  wrapperRef: React.RefObject<HTMLTableSectionElement>\n  controlColumnCount?: number\n  maxRowDepth?: number\n}): IUseStickyColumnsCss => {\n  const [columnsCss, setColumnsCss] = React.useState<CSS>({})\n\n  const getColumnWidth = (\n    column: HTMLTableCellElement,\n    columnIndex: number\n  ) => {\n    const elementNumber = columnIndex + 1\n\n    if (\n      controlColumnCount &&\n      elementNumber <= controlColumnCount &&\n      !maxRowDepth\n    ) {\n      return CONTROL_ELEMENT_WIDTH\n    }\n    if (\n      controlColumnCount &&\n      elementNumber <= controlColumnCount &&\n      maxRowDepth\n    ) {\n      return (\n        CONTROL_ELEMENT_WIDTH + maxRowDepth * SUBROW_PROGRESSIVE_OFFSET_STEP\n      )\n    }\n    return column.offsetWidth\n  }\n\n  const generateColumnsCss = React.useCallback(() => {\n    let accWidth = 0\n\n    // Getting the table header cells elements to use their width to set the left position in the sticky columns.\n    const tableHeaderCells = wrapperRef.current?.querySelectorAll('th')\n    const tableHeaderElements = Array.from(tableHeaderCells || [])\n\n    // Getting only the number of sticky columns from the elements array that is what we are interested in.\n    const stickyColumns = tableHeaderElements.slice(0, numberOfStickyColumns)\n\n    const newColumnsCss = stickyColumns.reduce((acc: CSS, column, index) => {\n      const elementNumber = index + 1\n      const cssObject = {\n        ...acc,\n        [`& td:nth-of-type(${elementNumber}), th:nth-of-type(${elementNumber})`]:\n          {\n            position: 'sticky',\n            left: controlColumnCount && index === 0 ? 0 : `${accWidth}px`,\n            minWidth: `${getColumnWidth(column, index)}px`, // fixing width for sticky columns\n            zIndex: '2'\n          }\n      }\n\n      accWidth += getColumnWidth(column, index)\n\n      return cssObject\n    }, {} as CSS)\n\n    return newColumnsCss\n  }, [numberOfStickyColumns, wrapperRef, controlColumnCount])\n\n  React.useLayoutEffect(() => {\n    if (!numberOfStickyColumns) return\n    const newColumnsCss = generateColumnsCss()\n\n    setColumnsCss(newColumnsCss)\n  }, [numberOfStickyColumns, wrapperRef, generateColumnsCss])\n\n  return {\n    columnsCss\n  }\n}\n"],"names":["CONTROL_ELEMENT_WIDTH","SUBROW_PROGRESSIVE_OFFSET_STEP","useStickyColumnsCss","numberOfStickyColumns","wrapperRef","controlColumnCount","maxRowDepth","columnsCss","setColumnsCss","React","getColumnWidth","column","columnIndex","elementNumber","generateColumnsCss","_a","accWidth","tableHeaderCells","acc","index","cssObject","newColumnsCss"],"mappings":"wBAQA,MAAMA,EAAwB,GACxBC,EAAiC,EAE1BC,EAAsB,CAAC,CAClC,sBAAAC,EACA,WAAAC,EACA,mBAAAC,EAAqB,EACrB,YAAAC,CACF,IAK4B,CAC1B,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAAc,CAAA,CAAE,EAEpDC,EAAiB,CACrBC,EACAC,IACG,CACH,MAAMC,EAAgBD,EAAc,EAEpC,OACEP,GACAQ,GAAiBR,GACjB,CAACC,EAEMN,EAGPK,GACAQ,GAAiBR,GACjBC,EAGEN,EAAwBM,EAAcL,EAGnCU,EAAO,WAChB,EAEMG,EAAqBL,EAAM,YAAY,IAAM,CAjDrD,IAAAM,EAkDI,IAAIC,EAAW,EAGf,MAAMC,GAAmBF,EAAAX,EAAW,UAAX,KAAA,OAAAW,EAAoB,iBAAiB,MAwB9D,OAvB4B,MAAM,KAAKE,GAAoB,CAAA,CAAE,EAGnB,MAAM,EAAGd,CAAqB,EAEpC,OAAO,CAACe,EAAUP,EAAQQ,IAAU,CACtE,MAAMN,EAAgBM,EAAQ,EACxBC,EAAY,CAChB,GAAGF,EACH,CAAC,oBAAoBL,sBAAkCA,MACrD,CACE,SAAU,SACV,KAAMR,GAAsBc,IAAU,EAAI,EAAI,GAAGH,MACjD,SAAU,GAAGN,EAAeC,EAAQQ,CAAK,MACzC,OAAQ,GACV,CACJ,EAEA,OAAAH,GAAYN,EAAeC,EAAQQ,CAAK,EAEjCC,CACT,EAAG,CAAS,CAAA,CAGd,EAAG,CAACjB,EAAuBC,EAAYC,CAAkB,CAAC,EAE1D,OAAAI,EAAM,gBAAgB,IAAM,CAC1B,GAAI,CAACN,EAAuB,OAC5B,MAAMkB,EAAgBP,IAEtBN,EAAca,CAAa,CAC7B,EAAG,CAAClB,EAAuBC,EAAYU,CAAkB,CAAC,EAEnD,CACL,WAAAP,CACF,CACF"}
+{"version":3,"file":"useStickyColumnsCss.js","sources":["../../../src/components/table/useStickyColumnsCss.ts"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '../../stitches'\n\ninterface IUseStickyColumnsCss {\n  columnsCss: CSS\n}\n\nexport const useStickyColumnsCss = ({\n  numberOfStickyColumns,\n  wrapperRef\n}: {\n  numberOfStickyColumns: number\n  wrapperRef: React.RefObject<HTMLTableSectionElement>\n}): IUseStickyColumnsCss => {\n  const [columnsCss, setColumnsCss] = React.useState<CSS>({})\n\n  const generateColumnsCss = React.useCallback(() => {\n    let accWidth = 0\n\n    // Getting the table header cells elements to use their width to set the left position in the sticky columns.\n    const tableHeaderCells = wrapperRef.current?.querySelectorAll('th')\n    const tableHeaderElements = Array.from(tableHeaderCells || [])\n\n    // Getting only the number of sticky columns from the elements array that is what we are interested in.\n    const stickyColumns = tableHeaderElements.slice(0, numberOfStickyColumns)\n\n    const newColumnsCss = stickyColumns.reduce((acc: CSS, column, index) => {\n      const elementNumber = index + 1\n      const cssObject = {\n        ...acc,\n        [`& td:nth-of-type(${elementNumber}), th:nth-of-type(${elementNumber})`]:\n          {\n            position: 'sticky',\n            left: `${accWidth}px`,\n            minWidth: `${column.offsetWidth}px`, // fixing width for sticky columns\n            zIndex: '2'\n          }\n      }\n\n      accWidth += tableHeaderCells?.item(index).clientWidth || 0\n\n      return cssObject\n    }, {} as CSS)\n\n    return newColumnsCss\n  }, [numberOfStickyColumns, wrapperRef])\n\n  React.useLayoutEffect(() => {\n    if (!numberOfStickyColumns) return\n    const newColumnsCss = generateColumnsCss()\n\n    setColumnsCss(newColumnsCss)\n  }, [numberOfStickyColumns, wrapperRef, generateColumnsCss])\n\n  return {\n    columnsCss\n  }\n}\n"],"names":["useStickyColumnsCss","numberOfStickyColumns","wrapperRef","columnsCss","setColumnsCss","React","generateColumnsCss","_a","accWidth","tableHeaderCells","acc","column","index","elementNumber","cssObject","newColumnsCss"],"mappings":"wBAQa,MAAAA,EAAsB,CAAC,CAClC,sBAAAC,EACA,WAAAC,CACF,IAG4B,CAC1B,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAAc,CAAA,CAAE,EAEpDC,EAAqBD,EAAM,YAAY,IAAM,CAjBrD,IAAAE,EAkBI,IAAIC,EAAW,EAGf,MAAMC,GAAmBF,EAAAL,EAAW,UAAX,KAAAK,OAAAA,EAAoB,iBAAiB,IAAA,EAwB9D,OAvB4B,MAAM,KAAKE,GAAoB,CAAE,CAAA,EAGnB,MAAM,EAAGR,CAAqB,EAEpC,OAAO,CAACS,EAAUC,EAAQC,IAAU,CACtE,MAAMC,EAAgBD,EAAQ,EACxBE,EAAY,CAChB,GAAGJ,EACH,CAAC,oBAAoBG,sBAAkCA,MACrD,CACE,SAAU,SACV,KAAM,GAAGL,MACT,SAAU,GAAGG,EAAO,gBACpB,OAAQ,GACV,CACJ,EAEA,OAAAH,IAAYC,GAAA,KAAAA,OAAAA,EAAkB,KAAKG,CAAAA,EAAO,cAAe,EAElDE,CACT,EAAG,EAAS,CAGd,EAAG,CAACb,EAAuBC,CAAU,CAAC,EAEtC,OAAAG,EAAM,gBAAgB,IAAM,CAC1B,GAAI,CAACJ,EAAuB,OAC5B,MAAMc,EAAgBT,EAAmB,EAEzCF,EAAcW,CAAa,CAC7B,EAAG,CAACd,EAAuBC,EAAYI,CAAkB,CAAC,EAEnD,CACL,WAAAH,CACF,CACF"}