@atom-learning/components 5.1.0 → 5.2.0-beta.2

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 r}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[t,f]=u();e.useImperativeHandle(m,()=>t,[t]);const{stickyCss:C,stickyColumnsWidth:p,stickyRowsHeight:b}=S({numberOfStickyColumns:s,numberOfStickyRows:l,wrapperEl:t});return e.createElement(r,{ref:f,scrollContainerCss:n,css:{width:"100%",...C,...i},...c},a,e.createElement(r.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={{ width: '100%', ...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,EAAAA,EACxCV,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,MAAO,OAAQ,GAAGQ,EAAW,GAAGP,CAAI,EAC1C,GAAGE,CAAAA,EAEHD,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/index.d.ts

@@ -0,0 +1 @@
+export { Table } from './Table';

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 o from"react";import{useResizeObserver as x}from"../../utilities/hooks/useResizeObserver.js";const $=({numberOfStickyColumns:u,numberOfStickyRows:l,wrapperEl:i})=>{const[R,S]=o.useState({stickyCss:{},stickyColumnsWidth:0,stickyRowsHeight:0}),[k,w]=o.useState([]),[h,H]=o.useState([]),[m,b]=o.useState([]);o.useEffect(()=>{if(i){if(u){const c=i.querySelectorAll("th"),e=Array.from(c||[]).slice(0,u);w(e)}if(l){const c=i.querySelectorAll("thead tr"),e=Array.from(c||[]).slice(0,l);H(e);const d=l-e.length,f=i.querySelectorAll("tbody tr"),t=Array.from(f||[]).slice(0,d);b(t)}}},[u,l,i]);const g=o.useCallback(()=>{const{stickyColumnsWidth:c=0,stickyColumnsCss:e={}}=(()=>{let t=0;const p=k.reduce((C,r,n)=>{const s=n+1,y={...C,[`& td:nth-of-type(${s}), th:nth-of-type(${s})`]:{position:"sticky",left:`${t}px`,zIndex:1}};return t+=r.clientWidth||0,y},{});return{stickyColumnsWidth:t,stickyColumnsCss:p}})(),{stickyRowsHeight:d=0,stickyRowsCss:f={}}=(()=>{let t=0;const p=h.reduce((r,n,s)=>{const y=s+1,a={...r,[`& thead tr:nth-of-type(${y})`]:{position:"sticky",top:`${t}px`,zIndex:2}};return t+=n.clientHeight||0,a},{}),C=m.reduce((r,n,s)=>{const y=s+1,a={...r,[`& tbody tr:nth-of-type(${y})`]:{position:"sticky",top:`${t}px`,zIndex:2}};return t+=n.clientHeight||0,a},{});return{stickyRowsHeight:t,stickyRowsCss:{...p,...C}}})();S({stickyCss:{...e,...f},stickyColumnsWidth:c,stickyRowsHeight:d})},[m,k,h]);return x({delay:0,elements:[...m,...h,...k],onResize:()=>{g()}}),R};export{$ 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'\nimport { useResizeObserver } from '~/utilities/hooks/useResizeObserver'\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 [value, setValue] = React.useState<UseStickyColumnsValue>({\n    stickyCss: {},\n    stickyColumnsWidth: 0,\n    stickyRowsHeight: 0\n  })\n\n  const [stickyColumnHeaderEls, setStickyColumnHeaderEls] = React.useState<HTMLTableCellElement[]>([])\n  const [stickyHeaderRowEls, setStickyHeaderRowEls] = React.useState<HTMLTableRowElement[]>([])\n  const [stickyBodyRowEls, setStickyBodyRowEls] = React.useState<HTMLTableRowElement[]>([])\n\n  React.useEffect(() => {\n    if (!wrapperEl) return\n    if (numberOfStickyColumns) {\n      const tableHeaderCells = wrapperEl.querySelectorAll<HTMLTableCellElement>('th')\n      const tableHeaderElements = Array.from(tableHeaderCells || [])\n      const stickyColumnsHeaderElements = tableHeaderElements.slice(0, numberOfStickyColumns)\n      setStickyColumnHeaderEls(stickyColumnsHeaderElements)\n    }\n\n    if (numberOfStickyRows) {\n      const tableHeaderRows = wrapperEl.querySelectorAll<HTMLTableRowElement>('thead tr')\n      const tableHeaderRowElements = Array.from(tableHeaderRows || [])\n      const stickyHeaderRowElements = tableHeaderRowElements.slice(0, numberOfStickyRows)\n      setStickyHeaderRowEls(stickyHeaderRowElements)\n\n      const remainingStickyRows = numberOfStickyRows - stickyHeaderRowElements.length\n      const tableBodyRows = wrapperEl.querySelectorAll<HTMLTableRowElement>('tbody tr')\n      const tableBodyRowElements = Array.from(tableBodyRows || [])\n      const stickyBodyRowElements = tableBodyRowElements.slice(0, remainingStickyRows)\n      setStickyBodyRowEls(stickyBodyRowElements)\n    }\n  }, [numberOfStickyColumns, numberOfStickyRows, wrapperEl])\n\n  const runStickyCalcs = React.useCallback(() => {\n    /* COLUMNS */\n    const { stickyColumnsWidth = 0, stickyColumnsCss = {} } = (() => {\n      let accStickyColumnsWidth = 0\n\n      const newStickyColumnsCss = stickyColumnHeaderEls.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              zIndex: 1\n            }\n          }\n\n          accStickyColumnsWidth += column.clientWidth || 0\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      let accStickyRowsHeight = 0\n\n      const newStickyHeaderRowsCss = stickyHeaderRowEls.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              zIndex: 2\n            }\n          }\n\n          accStickyRowsHeight += row.clientHeight || 0\n\n          return cssObject\n        },\n        {} as CSS\n      )\n\n      const newStickyBodyRowsCss = stickyBodyRowEls.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              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    setValue({\n      stickyCss: { ...stickyColumnsCss, ...stickyRowsCss },\n      stickyColumnsWidth,\n      stickyRowsHeight\n    })\n  }, [stickyBodyRowEls, stickyColumnHeaderEls, stickyHeaderRowEls])\n\n  useResizeObserver({\n    delay: 0,\n    elements: [...stickyBodyRowEls, ...stickyHeaderRowEls, ...stickyColumnHeaderEls],\n    onResize: () => {\n      runStickyCalcs()\n    }\n  })\n\n  return value\n}\n"],"names":["useSticky","numberOfStickyColumns","numberOfStickyRows","wrapperEl","value","setValue","React","stickyColumnHeaderEls","setStickyColumnHeaderEls","stickyHeaderRowEls","setStickyHeaderRowEls","stickyBodyRowEls","setStickyBodyRowEls","tableHeaderCells","stickyColumnsHeaderElements","tableHeaderRows","stickyHeaderRowElements","remainingStickyRows","tableBodyRows","stickyBodyRowElements","runStickyCalcs","stickyColumnsWidth","stickyColumnsCss","accStickyColumnsWidth","newStickyColumnsCss","acc","column","index","elementNumber","cssObject","stickyRowsHeight","stickyRowsCss","accStickyRowsHeight","newStickyHeaderRowsCss","row","newStickyBodyRowsCss","useResizeObserver"],"mappings":"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"}