@atom-learning/components 4.0.0-beta.9 → 4.1.0

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 | undefined;
-    maxRowDepth?: number | undefined;
 }) => 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"}