@atom-learning/components 2.39.0 → 2.40.0

package/CHANGELOG.md

@@ -1,11 +1,11 @@
-# [2.39.0](https://github.com/Atom-Learning/components/compare/v2.38.1...v2.39.0) (2023-03-02)
+# [2.40.0](https://github.com/Atom-Learning/components/compare/v2.39.0...v2.40.0) (2023-03-02)
 
 
 ### Features
 
-* add .gitkeep for documentation images folder so it can be synced ([42c2e96](https://github.com/Atom-Learning/components/commit/42c2e966cc6ff8b7a08cdca5a1ca9e64dd5493a0))
-* custom commit_messages for NetlifyCMS actions ([e4bc6bd](https://github.com/Atom-Learning/components/commit/e4bc6bde5e60bed0389cfa798842d56a77e7e752))
-* use branch documentation-content for edits via NetlifyCMS ([17f8000](https://github.com/Atom-Learning/components/commit/17f80006924af814cc9c443489f3306b4a0b8ecd))
+* **data-table:** adding support to multiple sticky columns ([dbb79b7](https://github.com/Atom-Learning/components/commit/dbb79b74031fb465e07080aa77b7b30c96d27d8f))
+* **data-table:** addressing review comments ([b0eb9e8](https://github.com/Atom-Learning/components/commit/b0eb9e83099462518f6149f6013694236412b2fa))
+* **data-table:** improving code readability and addressing feedbacks ([d76d600](https://github.com/Atom-Learning/components/commit/d76d600d5d2723f507a309686841059388873363))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/table/TableStickyColumnsContainer.js

@@ -1,2 +1,2 @@
-import n from"react";import{Box as p}from"../box/Box.js";const a=({children:l,numberOfStickyColumns:t=0,css:c,...i})=>{const[o,s]=n.useState(!1);return n.createElement(p,{onScroll:r=>{const e=r.currentTarget.scrollWidth>r.currentTarget.clientWidth;e!==o&&s(e)},role:"scrollbar",css:{overflow:"auto",maxWidth:"100%",[`& td:nth-of-type(${t}), th:nth-of-type(${t})`]:{...o&&{boxShadow:"$colors$alpha200 -2px -3px 9px 1px",clipPath:"inset(0px -10px 0px 0px)"},...t===1&&{position:"sticky",left:"0",zIndex:"2"}},"& td":{bg:"inherit"},...c},...i},l)};export{a as TableStickyColumnsContainer};
+import e from"react";import{Box as u}from"../box/Box.js";import{useStickyColumnsCss as h}from"./useStickyColumnsCss.js";const m=({children:s,numberOfStickyColumns:t=0,css:c,...i})=>{const[o,p]=e.useState(!1),r=e.useRef(null),{columnsCss:a}=h(t,r);return e.createElement(u,{onScroll:l=>{const n=l.currentTarget.scrollWidth>l.currentTarget.clientWidth;n!==o&&p(n)},role:"scrollbar",ref:r,css:{overflow:"auto",maxWidth:"100%",...a,[`& td:nth-child(${t}), th:nth-child(${t})`]:{...o&&{boxShadow:"$colors$alpha200 -2px -3px 9px 1px",clipPath:"inset(0px -10px 0px 0px)"}},"& td":{bg:"inherit"},...c},...i},s)};export{m 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'\n\ninterface ITableStickyColumnsContainerProps {\n  children: React.ReactNode\n  numberOfStickyColumns?: number\n  css?: CSS\n}\n\nexport const TableStickyColumnsContainer: React.FC<\n  ITableStickyColumnsContainerProps\n> = ({ children, numberOfStickyColumns = 0, css, ...restProps }) => {\n  const [hasScroll, setHasScroll] = React.useState<boolean>(false)\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      css={{\n        overflow: 'auto',\n        maxWidth: '100%',\n        [`& td:nth-of-type(${numberOfStickyColumns}), th:nth-of-type(${numberOfStickyColumns})`]:\n          {\n            ...(hasScroll && {\n              boxShadow: '$colors$alpha200 -2px -3px 9px 1px',\n              clipPath: 'inset(0px -10px 0px 0px)'\n            }),\n            ...(numberOfStickyColumns === 1 && {\n              position: 'sticky',\n              left: '0',\n              zIndex: '2'\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","Box","event","newHasScroll"],"mappings":"yDAYO,MAAMA,EAET,CAAC,CAAE,SAAAC,EAAU,sBAAAC,EAAwB,EAAG,IAAAC,KAAQC,CAAU,IAAM,CAClE,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EAU/D,OACEA,EAAA,cAACC,EAAA,CACC,SAVkBC,GAAyC,CAC7D,MAAMC,EACJD,EAAM,cAAc,YAAcA,EAAM,cAAc,YACpDC,IAAiBL,GACnBC,EAAaI,CAAY,CAE7B,EAKI,KAAK,YACL,IAAK,CACH,SAAU,OACV,SAAU,OACV,CAAC,oBAAoBR,sBAA0CA,MAC7D,CACE,GAAIG,GAAa,CACf,UAAW,qCACX,SAAU,0BACZ,EACA,GAAIH,IAA0B,GAAK,CACjC,SAAU,SACV,KAAM,IACN,OAAQ,GACV,CACF,EACF,OAAQ,CACN,GAAI,SACN,EACA,GAAGC,CACL,EACC,GAAGC,CAEHH,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'\n\nimport { useStickyColumnsCss } from './useStickyColumnsCss'\ninterface ITableStickyColumnsContainerProps {\n  children: React.ReactNode\n  numberOfStickyColumns?: number\n  css?: CSS\n}\n\nexport const TableStickyColumnsContainer: React.FC<\n  ITableStickyColumnsContainerProps\n> = ({ children, numberOfStickyColumns = 0, css, ...restProps }) => {\n  const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n  const scrollContainerRef = React.useRef(null)\n  const { columnsCss } = useStickyColumnsCss(\n    numberOfStickyColumns,\n    scrollContainerRef\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={scrollContainerRef}\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","scrollContainerRef","columnsCss","useStickyColumnsCss","Box","event","newHasScroll"],"mappings":"wHAaO,MAAMA,EAET,CAAC,CAAE,SAAAC,EAAU,sBAAAC,EAAwB,EAAG,IAAAC,KAAQC,CAAU,IAAM,CAClE,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzDC,EAAqBD,EAAM,OAAO,IAAI,EACtC,CAAE,WAAAE,CAAW,EAAIC,EACrBR,EACAM,CACF,EAUA,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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { CSS } from '../../stitches';
+interface IUseStickyColumnsCss {
+    columnsCss: CSS;
+}
+export declare const useStickyColumnsCss: (numberOfStickyColumns: number, wrapperRef: React.RefObject<HTMLTableSectionElement>) => IUseStickyColumnsCss;
+export {};

package/dist/components/table/useStickyColumnsCss.js

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

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

@@ -0,0 +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\nexport const useStickyColumnsCss = (\n  numberOfStickyColumns: number,\n  wrapperRef: React.RefObject<HTMLTableSectionElement>\n): IUseStickyColumnsCss => {\n  const [columnsCss, setColumnsCss] = React.useState<CSS>({})\n\n  React.useLayoutEffect(() => {\n    if (!numberOfStickyColumns) return\n\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    setColumnsCss(newColumnsCss)\n  }, [numberOfStickyColumns, wrapperRef])\n\n  return {\n    columnsCss\n  }\n}\n"],"names":["useStickyColumnsCss","numberOfStickyColumns","wrapperRef","columnsCss","setColumnsCss","React","_a","accWidth","tableHeaderCells","newColumnsCss","acc","column","index","elementNumber","cssObject"],"mappings":"wBAQO,MAAMA,EAAsB,CACjCC,EACAC,IACyB,CACzB,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAAc,EAAE,EAE1D,OAAAA,EAAM,gBAAgB,IAAM,CAd9B,IAAAC,EAeI,GAAI,CAACL,EAAuB,OAE5B,IAAIM,EAAW,EAGf,MAAMC,GAAmBF,EAAAJ,EAAW,UAAX,KAAA,OAAAI,EAAoB,iBAAiB,MAMxDG,EALsB,MAAM,KAAKD,GAAoB,EAAE,EAGnB,MAAM,EAAGP,CAAqB,EAEpC,OAAO,CAACS,EAAUC,EAAQC,IAAU,CACtE,MAAMC,EAAgBD,EAAQ,EACxBE,EAAY,CAChB,GAAGJ,EACH,CAAC,oBAAoBG,sBAAkCA,MACrD,CACE,SAAU,SACV,KAAM,GAAGN,MACT,SAAU,GAAGI,EAAO,gBACpB,OAAQ,GACV,CACJ,EAEA,OAAAJ,IAAYC,GAAA,KAAA,OAAAA,EAAkB,KAAKI,GAAO,cAAe,EAElDE,CACT,EAAG,EAAS,EAEZV,EAAcK,CAAa,CAC7B,EAAG,CAACR,EAAuBC,CAAU,CAAC,EAE/B,CACL,WAAAC,CACF,CACF"}