@atom-learning/components 5.0.1 → 5.2.0-beta.1

package/dist/components/table/TableScrollableContainer.js

@@ -0,0 +1,2 @@
+import*as e from"react";import{useCallbackRefState as u}from"../../utilities/hooks/useCallbackRef.js";import{ScrollableContainer as t}from"../scrollable-container/ScrollableContainer.js";import"../scrollable-container/ScrollableContainer.context.js";import{useSticky as S}from"./useSticky.js";const o=e.forwardRef(({numberOfStickyColumns:s=0,numberOfStickyRows:l=0,scrollContainerCss:n,css:i,children:a,...c},m)=>{const[r,f]=u();e.useImperativeHandle(m,()=>r,[r]);const{stickyCss:C,stickyColumnsWidth:p,stickyRowsHeight:b}=S({numberOfStickyColumns:s,numberOfStickyRows:l,wrapperEl:r});return e.createElement(t,{ref:f,scrollContainerCss:n,css:{...C,...i},...c},a,e.createElement(t.Shadow,{inset:{left:p,top:b},css:{zIndex:2}}))});o.displayName="TableScrollableContainer";export{o as TableScrollableContainer};
+//# sourceMappingURL=TableScrollableContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableScrollableContainer.js","sources":["../../../src/components/table/TableScrollableContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\n\nimport { ScrollableContainer } from '../scrollable-container'\nimport { useSticky } from './useSticky'\n\ntype scrollableProps = {\n  numberOfStickyColumns?: number\n  numberOfStickyRows?: number\n  scrollContainerCss?: CSS\n}\n\ntype TableScrollableContainerProps = React.ComponentProps<\n  typeof ScrollableContainer\n> &\n  scrollableProps\n\nexport const TableScrollableContainer = React.forwardRef(\n  (\n    {\n      numberOfStickyColumns = 0,\n      numberOfStickyRows = 0,\n      scrollContainerCss,\n      css,\n      children,\n      ...rest\n    }: TableScrollableContainerProps,\n    ref\n  ) => {\n    const [scrollableEl, setScrollableEl] = useCallbackRefState()\n    React.useImperativeHandle(ref, () => scrollableEl, [scrollableEl])\n\n    const { stickyCss, stickyColumnsWidth, stickyRowsHeight } = useSticky({\n      numberOfStickyColumns,\n      numberOfStickyRows,\n      wrapperEl: scrollableEl\n    })\n\n    return (\n      <ScrollableContainer\n        ref={setScrollableEl}\n        scrollContainerCss={scrollContainerCss}\n        css={{ ...stickyCss, ...css }}\n        {...rest}\n      >\n        {children}\n        <ScrollableContainer.Shadow\n          inset={{ left: stickyColumnsWidth, top: stickyRowsHeight }}\n          css={{ zIndex: 2 }}\n        />\n      </ScrollableContainer>\n    )\n  }\n)\n\nTableScrollableContainer.displayName = 'TableScrollableContainer'\n"],"names":["TableScrollableContainer","React","numberOfStickyColumns","numberOfStickyRows","scrollContainerCss","css","children","rest","ref","scrollableEl","setScrollableEl","useCallbackRefState","stickyCss","stickyColumnsWidth","stickyRowsHeight","useSticky","ScrollableContainer"],"mappings":"qSAmBO,MAAMA,EAA2BC,EAAM,WAC5C,CACE,CACE,sBAAAC,EAAwB,EACxB,mBAAAC,EAAqB,EACrB,mBAAAC,EACA,IAAAC,EACA,SAAAC,KACGC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAcC,CAAe,EAAIC,IACxCV,EAAM,oBAAoBO,EAAK,IAAMC,EAAc,CAACA,CAAY,CAAC,EAEjE,KAAM,CAAE,UAAAG,EAAW,mBAAAC,EAAoB,iBAAAC,CAAiB,EAAIC,EAAU,CACpE,sBAAAb,EACA,mBAAAC,EACA,UAAWM,CACb,CAAC,EAED,OACER,EAAA,cAACe,EAAA,CACC,IAAKN,EACL,mBAAoBN,EACpB,IAAK,CAAE,GAAGQ,EAAW,GAAGP,CAAI,EAC3B,GAAGE,CAEHD,EAAAA,EACDL,EAAA,cAACe,EAAoB,OAApB,CACC,MAAO,CAAE,KAAMH,EAAoB,IAAKC,CAAiB,EACzD,IAAK,CAAE,OAAQ,CAAE,CACnB,CAAA,CACF,CAEJ,CACF,EAEAd,EAAyB,YAAc"}

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

@@ -0,0 +1,12 @@
+import { CSS } from '../../stitches';
+interface UseStickyColumnsValue {
+    stickyCss: CSS;
+    stickyColumnsWidth: number;
+    stickyRowsHeight: number;
+}
+export declare const useSticky: ({ numberOfStickyColumns, numberOfStickyRows, wrapperEl }: {
+    numberOfStickyColumns: number;
+    numberOfStickyRows: number;
+    wrapperEl: HTMLElement | null;
+}) => UseStickyColumnsValue;
+export {};

package/dist/components/table/useSticky.js

@@ -0,0 +1,2 @@
+import*as a from"react";const R=({numberOfStickyColumns:l,numberOfStickyRows:o,wrapperEl:s})=>{const{stickyCss:m,stickyColumnsWidth:C,stickyRowsHeight:f}=a.useMemo(()=>{const{stickyColumnsWidth:g=0,stickyColumnsCss:w={}}=(()=>{if(!s)return{};if(!l)return{};let t=0;const i=s.querySelectorAll("th"),n=Array.from(i||[]).slice(0,l).reduce((h,u,c)=>{const y=c+1,e={...h,[`& td:nth-of-type(${y}), th:nth-of-type(${y})`]:{position:"sticky",left:`${t}px`,width:`${u.clientWidth}px`,zIndex:1}};return t+=(i==null?void 0:i.item(c).clientWidth)||0,e},{});return{stickyColumnsWidth:t,stickyColumnsCss:n}})(),{stickyRowsHeight:x=0,stickyRowsCss:H={}}=(()=>{if(!s)return{};if(!o)return{};let t=0;const i=s.querySelectorAll("thead tr"),n=Array.from(i||[]).slice(0,o),h=o-n.length,u=n.reduce((e,r,k)=>{const d=k+1,p={...e,[`& thead tr:nth-of-type(${d})`]:{position:"sticky",top:`${t}px`,height:`${r.clientHeight}px`,zIndex:2}};return t+=r.clientHeight||0,p},{}),c=s.querySelectorAll("tbody tr"),y=Array.from(c||[]).slice(0,h).reduce((e,r,k)=>{const d=k+1,p={...e,[`& tbody tr:nth-of-type(${d})`]:{position:"sticky",top:`${t}px`,height:`${r.clientHeight}px`,zIndex:2}};return t+=r.clientHeight||0,p},{});return{stickyRowsHeight:t,stickyRowsCss:{...u,...y}}})();return{stickyCss:{...w,...H},stickyColumnsWidth:g,stickyRowsHeight:x}},[l,o,s]);return{stickyCss:m,stickyColumnsWidth:C,stickyRowsHeight:f}};export{R as useSticky};
+//# sourceMappingURL=useSticky.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSticky.js","sources":["../../../src/components/table/useSticky.ts"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '../../stitches'\n\ninterface UseStickyColumnsValue {\n  stickyCss: CSS\n  stickyColumnsWidth: number\n  stickyRowsHeight: number\n}\n\nexport const useSticky = ({\n  numberOfStickyColumns,\n  numberOfStickyRows,\n  wrapperEl\n}: {\n  numberOfStickyColumns: number\n  numberOfStickyRows: number\n  wrapperEl: HTMLElement | null\n}): UseStickyColumnsValue => {\n  const { stickyCss, stickyColumnsWidth, stickyRowsHeight } =\n    React.useMemo(() => {\n      /* COLUMNS */\n      const { stickyColumnsWidth = 0, stickyColumnsCss = {} } = (() => {\n        if (!wrapperEl) return {}\n        if (!numberOfStickyColumns) return {}\n\n        let accStickyColumnsWidth = 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 = wrapperEl.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(\n          0,\n          numberOfStickyColumns\n        )\n\n        const newStickyColumnsCss = stickyColumns.reduce(\n          (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: `${accStickyColumnsWidth}px`,\n                  width: `${column.clientWidth}px`, // fixing width for sticky columns\n                  zIndex: 1\n                }\n            }\n\n            accStickyColumnsWidth +=\n              tableHeaderCells?.item(index).clientWidth || 0\n\n            return cssObject\n          },\n          {} as CSS\n        )\n\n        return {\n          stickyColumnsWidth: accStickyColumnsWidth,\n          stickyColumnsCss: newStickyColumnsCss\n        }\n      })()\n\n      /* ROWS */\n      const { stickyRowsHeight = 0, stickyRowsCss = {} } = (() => {\n        if (!wrapperEl) return {}\n        if (!numberOfStickyRows) return {}\n\n        let accStickyRowsHeight = 0\n\n        // Getting the table header cells elements to use their width to set the left position in the sticky columns.\n        const tableHeaderRows = wrapperEl.querySelectorAll('thead tr')\n        const tableHeaderRowElements = Array.from(tableHeaderRows || [])\n\n        // Getting only the number of sticky columns from the elements array that is what we are interested in.\n        const stickyHeaderRows = tableHeaderRowElements.slice(\n          0,\n          numberOfStickyRows\n        )\n        const remainingStickyRows = numberOfStickyRows - stickyHeaderRows.length\n\n        const newStickyHeaderRowsCss = stickyHeaderRows.reduce(\n          (acc: CSS, row, index) => {\n            const elementNumber = index + 1\n            const cssObject = {\n              ...acc,\n              [`& thead tr:nth-of-type(${elementNumber})`]: {\n                position: 'sticky',\n                top: `${accStickyRowsHeight}px`,\n                height: `${row.clientHeight}px`, // fixing width for sticky rows\n                zIndex: 2\n              }\n            }\n\n            accStickyRowsHeight += row.clientHeight || 0\n\n            return cssObject\n          },\n          {} as CSS\n        )\n\n        const tableBodyRows = wrapperEl.querySelectorAll('tbody tr')\n        const tableBodyRowElements = Array.from(tableBodyRows || [])\n        const stickyBodyRows = tableBodyRowElements.slice(\n          0,\n          remainingStickyRows\n        )\n        const newStickyBodyRowsCss = stickyBodyRows.reduce(\n          (acc: CSS, row, index) => {\n            const elementNumber = index + 1\n            const cssObject = {\n              ...acc,\n              [`& tbody tr:nth-of-type(${elementNumber})`]: {\n                position: 'sticky',\n                top: `${accStickyRowsHeight}px`,\n                height: `${row.clientHeight}px`, // fixing width for sticky rows\n                zIndex: 2\n              }\n            }\n\n            accStickyRowsHeight += row.clientHeight || 0\n\n            return cssObject\n          },\n          {} as CSS\n        )\n\n        return {\n          stickyRowsHeight: accStickyRowsHeight,\n          stickyRowsCss: { ...newStickyHeaderRowsCss, ...newStickyBodyRowsCss }\n        }\n      })()\n\n      return {\n        stickyCss: { ...stickyColumnsCss, ...stickyRowsCss },\n        stickyColumnsWidth,\n        stickyRowsHeight\n      }\n    }, [numberOfStickyColumns, numberOfStickyRows, wrapperEl])\n\n  return {\n    stickyCss,\n    stickyColumnsWidth,\n    stickyRowsHeight\n  }\n}\n"],"names":["useSticky","numberOfStickyColumns","numberOfStickyRows","wrapperEl","stickyCss","stickyColumnsWidth","stickyRowsHeight","React","stickyColumnsCss","accStickyColumnsWidth","tableHeaderCells","newStickyColumnsCss","acc","column","index","elementNumber","cssObject","stickyRowsCss","accStickyRowsHeight","tableHeaderRows","stickyHeaderRows","remainingStickyRows","newStickyHeaderRowsCss","row","tableBodyRows","newStickyBodyRowsCss"],"mappings":"wBAUO,MAAMA,EAAY,CAAC,CACxB,sBAAAC,EACA,mBAAAC,EACA,UAAAC,CACF,IAI6B,CAC3B,KAAM,CAAE,UAAAC,EAAW,mBAAAC,EAAoB,iBAAAC,CAAiB,EACtDC,EAAM,QAAQ,IAAM,CAElB,KAAM,CAAE,mBAAAF,EAAqB,EAAG,iBAAAG,EAAmB,CAAA,CAAG,GAAK,IAAM,CAC/D,GAAI,CAACL,EAAW,MAAO,GACvB,GAAI,CAACF,EAAuB,MAAO,GAEnC,IAAIQ,EAAwB,EAG5B,MAAMC,EAAmBP,EAAU,iBAAiB,IAAI,EASlDQ,EARsB,MAAM,KAAKD,GAAoB,CAAA,CAAE,EAGnB,MACxC,EACAT,CACF,EAE0C,OACxC,CAACW,EAAUC,EAAQC,IAAU,CAC3B,MAAMC,EAAgBD,EAAQ,EACxBE,EAAY,CAChB,GAAGJ,EACH,CAAC,oBAAoBG,sBAAkCA,MACrD,CACE,SAAU,SACV,KAAM,GAAGN,MACT,MAAO,GAAGI,EAAO,gBACjB,OAAQ,CACV,CACJ,EAEA,OAAAJ,IACEC,GAAA,KAAAA,OAAAA,EAAkB,KAAKI,CAAAA,EAAO,cAAe,EAExCE,CACT,EACA,EACF,EAEA,MAAO,CACL,mBAAoBP,EACpB,iBAAkBE,CACpB,CACF,GAAA,EAGM,CAAE,iBAAAL,EAAmB,EAAG,cAAAW,EAAgB,CAAA,CAAG,GAAK,IAAM,CAC1D,GAAI,CAACd,EAAW,MAAO,CAAA,EACvB,GAAI,CAACD,EAAoB,MAAO,CAEhC,EAAA,IAAIgB,EAAsB,EAG1B,MAAMC,EAAkBhB,EAAU,iBAAiB,UAAU,EAIvDiB,EAHyB,MAAM,KAAKD,GAAmB,CAAA,CAAE,EAGf,MAC9C,EACAjB,CACF,EACMmB,EAAsBnB,EAAqBkB,EAAiB,OAE5DE,EAAyBF,EAAiB,OAC9C,CAACR,EAAUW,EAAKT,IAAU,CACxB,MAAMC,EAAgBD,EAAQ,EACxBE,EAAY,CAChB,GAAGJ,EACH,CAAC,0BAA0BG,MAAmB,CAC5C,SAAU,SACV,IAAK,GAAGG,MACR,OAAQ,GAAGK,EAAI,iBACf,OAAQ,CACV,CACF,EAEA,OAAAL,GAAuBK,EAAI,cAAgB,EAEpCP,CACT,EACA,CAAA,CACF,EAEMQ,EAAgBrB,EAAU,iBAAiB,UAAU,EAMrDsB,EALuB,MAAM,KAAKD,GAAiB,CAAA,CAAE,EACf,MAC1C,EACAH,CACF,EAC4C,OAC1C,CAACT,EAAUW,EAAKT,IAAU,CACxB,MAAMC,EAAgBD,EAAQ,EACxBE,EAAY,CAChB,GAAGJ,EACH,CAAC,0BAA0BG,MAAmB,CAC5C,SAAU,SACV,IAAK,GAAGG,MACR,OAAQ,GAAGK,EAAI,iBACf,OAAQ,CACV,CACF,EAEA,OAAAL,GAAuBK,EAAI,cAAgB,EAEpCP,CACT,EACA,CACF,CAAA,EAEA,MAAO,CACL,iBAAkBE,EAClB,cAAe,CAAE,GAAGI,EAAwB,GAAGG,CAAqB,CACtE,CACF,KAEA,MAAO,CACL,UAAW,CAAE,GAAGjB,EAAkB,GAAGS,CAAc,EACnD,mBAAAZ,EACA,iBAAAC,CACF,CACF,EAAG,CAACL,EAAuBC,EAAoBC,CAAS,CAAC,EAE3D,MAAO,CACL,UAAAC,EACA,mBAAAC,EACA,iBAAAC,CACF,CACF"}