@atom-learning/components 6.0.0-beta.41 → 6.0.0-beta.42
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/table/TableStickyColumnsContainer.js +1 -1
- package/dist/components/table/TableStickyColumnsContainer.js.map +1 -1
- package/dist/components/table/useStickyColumnsCss.js +1 -1
- package/dist/components/table/useStickyColumnsCss.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import c from"clsx";import e from"react";import{useStickyColumnsStyle as i}from"./useStickyColumnsCss.js";const r=({children:h,numberOfStickyColumns:t=0,className:n,...l})=>{const[_,f]=e.useState(!1),p=e.useRef(null),{columnsStyle:s}=i({numberOfStickyColumns:t,wrapperRef:p});return e.createElement("div",{onScroll:y=>{const o=y.currentTarget.scrollLeft>0;o!==_&&f(o)},role:"scrollbar",ref:p,style:s,className:c("overflow-auto","max-w-full","relative","overscroll-x-contain","[&_td,&_th]:bg-inherit",n,t
|
|
1
|
+
import c from"clsx";import e from"react";import{useStickyColumnsStyle as i}from"./useStickyColumnsCss.js";const r=({children:h,numberOfStickyColumns:t=0,className:n,...l})=>{const[_,f]=e.useState(!1),p=e.useRef(null),{columnsStyle:s}=i({numberOfStickyColumns:t,wrapperRef:p});return e.createElement("div",{onScroll:y=>{const o=y.currentTarget.scrollLeft>0;o!==_&&f(o)},role:"scrollbar",ref:p,style:s,className:c("overflow-auto","max-w-full","relative","overscroll-x-contain","[&_td,&_th]:bg-inherit",n,t>=1&&["[&_td,&_th]:nth-of-type-[1]:sticky","[&_td,&_th]:nth-of-type-[1]:left-(--sticky-offset-left-1)","[&_td,&_th]:nth-of-type-[1]:w-(--sticky-column-width-1)","[&_td,&_th]:nth-of-type-[1]:z-2"],t>=2&&["[&_td,&_th]:nth-of-type-[2]:sticky","[&_td,&_th]:nth-of-type-[2]:left-(--sticky-offset-left-2)","[&_td,&_th]:nth-of-type-[2]:w-(--sticky-column-width-2)","[&_td,&_th]:nth-of-type-[2]:z-2"],t>=3&&["[&_td,&_th]:nth-of-type-[3]:sticky","[&_td,&_th]:nth-of-type-[3]:left-(--sticky-offset-left-3)","[&_td,&_th]:nth-of-type-[3]:w-(--sticky-column-width-3)","[&_td,&_th]:nth-of-type-[3]:z-2"],t>=4&&["[&_td,&_th]:nth-of-type-[4]:sticky","[&_td,&_th]:nth-of-type-[4]:left-(--sticky-offset-left-4)","[&_td,&_th]:nth-of-type-[4]:w-(--sticky-column-width-4)","[&_td,&_th]:nth-of-type-[4]:z-2"],t===1&&_&&["[&_td,&_th]:nth-of-type-[1]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td,&_th]:nth-of-type-[1]:[clip-path:inset(0px_-10px_0px_0px)]"],t===2&&_&&["[&_td,&_th]:nth-of-type-[2]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td,&_th]:nth-of-type-[2]:[clip-path:inset(0px_-10px_0px_0px)]"],t===3&&_&&["[&_td,&_th]:nth-of-type-[3]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td,&_th]:nth-of-type-[3]:[clip-path:inset(0px_-10px_0px_0px)]"],t===4&&_&&["[&_td,&_th]:nth-of-type-[4]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td,&_th]:nth-of-type-[4]:[clip-path:inset(0px_-10px_0px_0px)]"]),...l},h)};export{r as TableStickyColumnsContainer};
|
|
2
2
|
//# sourceMappingURL=TableStickyColumnsContainer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableStickyColumnsContainer.js","sources":["../../../src/components/table/TableStickyColumnsContainer.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { useStickyColumnsStyle } from './useStickyColumnsCss'\n\nexport const TableStickyColumnsContainer = ({\n children,\n numberOfStickyColumns = 0,\n className,\n ...restProps\n}: React.PropsWithChildren<{\n numberOfStickyColumns?: number\n className?: string\n}>) => {\n const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n const wrapperRef = React.useRef(null)\n const { columnsStyle } = useStickyColumnsStyle({\n numberOfStickyColumns,\n wrapperRef\n })\n\n const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n const newHasScroll = event.currentTarget.scrollLeft > 0\n if (newHasScroll !== hasScroll) {\n setHasScroll(newHasScroll)\n }\n }\n\n return (\n <div\n onScroll={handleScroll}\n // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n role=\"scrollbar\"\n ref={wrapperRef}\n style={columnsStyle}\n className={clsx(\n 'overflow-auto',\n 'max-w-full',\n 'relative',\n 'overscroll-x-contain',\n '[&_td,&_th]:bg-inherit',\n className,\n numberOfStickyColumns
|
|
1
|
+
{"version":3,"file":"TableStickyColumnsContainer.js","sources":["../../../src/components/table/TableStickyColumnsContainer.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { useStickyColumnsStyle } from './useStickyColumnsCss'\n\nexport const TableStickyColumnsContainer = ({\n children,\n numberOfStickyColumns = 0,\n className,\n ...restProps\n}: React.PropsWithChildren<{\n numberOfStickyColumns?: number\n className?: string\n}>) => {\n const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n const wrapperRef = React.useRef(null)\n const { columnsStyle } = useStickyColumnsStyle({\n numberOfStickyColumns,\n wrapperRef\n })\n\n const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n const newHasScroll = event.currentTarget.scrollLeft > 0\n if (newHasScroll !== hasScroll) {\n setHasScroll(newHasScroll)\n }\n }\n\n return (\n <div\n onScroll={handleScroll}\n // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n role=\"scrollbar\"\n ref={wrapperRef}\n style={columnsStyle}\n className={clsx(\n 'overflow-auto',\n 'max-w-full',\n 'relative',\n 'overscroll-x-contain',\n '[&_td,&_th]:bg-inherit',\n className,\n numberOfStickyColumns >= 1 && [\n '[&_td,&_th]:nth-of-type-[1]:sticky',\n '[&_td,&_th]:nth-of-type-[1]:left-(--sticky-offset-left-1)',\n '[&_td,&_th]:nth-of-type-[1]:w-(--sticky-column-width-1)',\n '[&_td,&_th]:nth-of-type-[1]:z-2'\n ],\n numberOfStickyColumns >= 2 && [\n '[&_td,&_th]:nth-of-type-[2]:sticky',\n '[&_td,&_th]:nth-of-type-[2]:left-(--sticky-offset-left-2)',\n '[&_td,&_th]:nth-of-type-[2]:w-(--sticky-column-width-2)',\n '[&_td,&_th]:nth-of-type-[2]:z-2'\n ],\n numberOfStickyColumns >= 3 && [\n '[&_td,&_th]:nth-of-type-[3]:sticky',\n '[&_td,&_th]:nth-of-type-[3]:left-(--sticky-offset-left-3)',\n '[&_td,&_th]:nth-of-type-[3]:w-(--sticky-column-width-3)',\n '[&_td,&_th]:nth-of-type-[3]:z-2'\n ],\n numberOfStickyColumns >= 4 && [\n '[&_td,&_th]:nth-of-type-[4]:sticky',\n '[&_td,&_th]:nth-of-type-[4]:left-(--sticky-offset-left-4)',\n '[&_td,&_th]:nth-of-type-[4]:w-(--sticky-column-width-4)',\n '[&_td,&_th]:nth-of-type-[4]:z-2'\n ],\n numberOfStickyColumns === 1 &&\n hasScroll && [\n '[&_td,&_th]:nth-of-type-[1]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n '[&_td,&_th]:nth-of-type-[1]:[clip-path:inset(0px_-10px_0px_0px)]'\n ],\n numberOfStickyColumns === 2 &&\n hasScroll && [\n '[&_td,&_th]:nth-of-type-[2]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n '[&_td,&_th]:nth-of-type-[2]:[clip-path:inset(0px_-10px_0px_0px)]'\n ],\n numberOfStickyColumns === 3 &&\n hasScroll && [\n '[&_td,&_th]:nth-of-type-[3]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n '[&_td,&_th]:nth-of-type-[3]:[clip-path:inset(0px_-10px_0px_0px)]'\n ],\n numberOfStickyColumns === 4 &&\n hasScroll && [\n '[&_td,&_th]:nth-of-type-[4]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n '[&_td,&_th]:nth-of-type-[4]:[clip-path:inset(0px_-10px_0px_0px)]'\n ]\n )}\n {...restProps}\n >\n {children}\n </div>\n )\n}\n"],"names":["TableStickyColumnsContainer","children","numberOfStickyColumns","className","restProps","hasScroll","setHasScroll","React","wrapperRef","columnsStyle","useStickyColumnsStyle","event","newHasScroll","clsx"],"mappings":"0GAKa,MAAAA,EAA8B,CAAC,CAC1C,SAAAC,EACA,sBAAAC,EAAwB,EACxB,UAAAC,EACA,GAAGC,CACL,IAGO,CACL,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzDC,EAAaD,EAAM,OAAO,IAAI,EAC9B,CAAE,aAAAE,CAAa,EAAIC,EAAsB,CAC7C,sBAAAR,EACA,WAAAM,CACF,CAAC,EASD,OACED,EAAA,cAAC,MAAA,CACC,SATkBI,GAAyC,CAC7D,MAAMC,EAAeD,EAAM,cAAc,WAAa,EAClDC,IAAiBP,GACnBC,EAAaM,CAAY,CAE7B,EAMI,KAAK,YACL,IAAKJ,EACL,MAAOC,EACP,UAAWI,EACT,gBACA,aACA,WACA,uBACA,yBACAV,EACAD,GAAyB,GAAK,CAC5B,qCACA,4DACA,0DACA,iCACF,EACAA,GAAyB,GAAK,CAC5B,qCACA,4DACA,0DACA,iCACF,EACAA,GAAyB,GAAK,CAC5B,qCACA,4DACA,0DACA,iCACF,EACAA,GAAyB,GAAK,CAC5B,qCACA,4DACA,0DACA,iCACF,EACAA,IAA0B,GACxBG,GAAa,CACX,gFACA,kEACF,EACFH,IAA0B,GACxBG,GAAa,CACX,gFACA,kEACF,EACFH,IAA0B,GACxBG,GAAa,CACX,gFACA,kEACF,EACFH,IAA0B,GACxBG,GAAa,CACX,gFACA,kEACF,CACJ,EACC,GAAGD,CAAAA,EAEHH,CACH,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as c from"react";const
|
|
1
|
+
import*as c from"react";const d=({numberOfStickyColumns:e,wrapperRef:r})=>{const[i,f]=c.useState({}),l=c.useCallback(()=>{var t;let s=0;const o=(t=r.current)==null?void 0:t.querySelectorAll("th");return Array.from(o||[]).slice(0,e).reduce((m,y,u)=>{const n=u+1,a={...m,[`--sticky-column-width-${n}`]:`${y.offsetWidth}px`,[`--sticky-offset-left-${n}`]:`${s}px`};return s+=(o==null?void 0:o.item(u).clientWidth)||0,a},{})},[e,r]);return c.useLayoutEffect(()=>{if(!e)return;const t=l();f(t)},[e,r,l]),{columnsStyle:i}};export{d as useStickyColumnsStyle};
|
|
2
2
|
//# sourceMappingURL=useStickyColumnsCss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useStickyColumnsCss.js","sources":["../../../src/components/table/useStickyColumnsCss.ts"],"sourcesContent":["import * as React from 'react'\n\ntype ColumnStyle = Record<\n `--sticky-column-width-${number}` | `--sticky-offset-left-${number}`,\n string\n>\n\ninterface IUseStickyColumnsCss {\n columnsStyle?: ColumnStyle\n}\n\nexport const useStickyColumnsStyle = ({\n numberOfStickyColumns,\n wrapperRef\n}: {\n numberOfStickyColumns: number\n wrapperRef: React.RefObject<HTMLTableSectionElement>\n}): IUseStickyColumnsCss => {\n const [columnsStyle, setColumnsStyle] = React.useState<ColumnStyle>({})\n\n const generateColumnsStyle = 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 newColumnsStyle = stickyColumns.reduce((acc, column, index) => {\n const elementNumber = index + 1\n const styleObject = {\n [`--sticky-column-width-${elementNumber}`]: `${column.offsetWidth}px`,\n [`--sticky-offset-left-${elementNumber}`]: `${accWidth}px`\n }\n\n accWidth += tableHeaderCells?.item(index).clientWidth || 0\n\n return styleObject\n }, {})\n\n return newColumnsStyle\n }, [numberOfStickyColumns, wrapperRef])\n\n React.useLayoutEffect(() => {\n if (!numberOfStickyColumns) return\n const newColumnsStyle = generateColumnsStyle()\n\n setColumnsStyle(newColumnsStyle)\n }, [numberOfStickyColumns, wrapperRef, generateColumnsStyle])\n\n return {\n columnsStyle\n }\n}\n"],"names":["useStickyColumnsStyle","numberOfStickyColumns","wrapperRef","columnsStyle","setColumnsStyle","React","generateColumnsStyle","_a","accWidth","tableHeaderCells","acc","column","index","elementNumber","styleObject","newColumnsStyle"],"mappings":"wBAWa,MAAAA,EAAwB,CAAC,CACpC,sBAAAC,EACA,WAAAC,CACF,IAG4B,CAC1B,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAAM,SAAsB,
|
|
1
|
+
{"version":3,"file":"useStickyColumnsCss.js","sources":["../../../src/components/table/useStickyColumnsCss.ts"],"sourcesContent":["import * as React from 'react'\n\ntype ColumnStyle = Record<\n `--sticky-column-width-${number}` | `--sticky-offset-left-${number}`,\n string\n>\n\ninterface IUseStickyColumnsCss {\n columnsStyle?: ColumnStyle\n}\n\nexport const useStickyColumnsStyle = ({\n numberOfStickyColumns,\n wrapperRef\n}: {\n numberOfStickyColumns: number\n wrapperRef: React.RefObject<HTMLTableSectionElement>\n}): IUseStickyColumnsCss => {\n const [columnsStyle, setColumnsStyle] = React.useState<ColumnStyle>({})\n\n const generateColumnsStyle = 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 newColumnsStyle = stickyColumns.reduce((acc, column, index) => {\n const elementNumber = index + 1\n const styleObject = {\n ...acc,\n [`--sticky-column-width-${elementNumber}`]: `${column.offsetWidth}px`,\n [`--sticky-offset-left-${elementNumber}`]: `${accWidth}px`\n }\n\n accWidth += tableHeaderCells?.item(index).clientWidth || 0\n\n return styleObject\n }, {})\n\n return newColumnsStyle\n }, [numberOfStickyColumns, wrapperRef])\n\n React.useLayoutEffect(() => {\n if (!numberOfStickyColumns) return\n const newColumnsStyle = generateColumnsStyle()\n\n setColumnsStyle(newColumnsStyle)\n }, [numberOfStickyColumns, wrapperRef, generateColumnsStyle])\n\n return {\n columnsStyle\n }\n}\n"],"names":["useStickyColumnsStyle","numberOfStickyColumns","wrapperRef","columnsStyle","setColumnsStyle","React","generateColumnsStyle","_a","accWidth","tableHeaderCells","acc","column","index","elementNumber","styleObject","newColumnsStyle"],"mappings":"wBAWa,MAAAA,EAAwB,CAAC,CACpC,sBAAAC,EACA,WAAAC,CACF,IAG4B,CAC1B,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAAM,SAAsB,EAAE,EAEhEC,EAAuBD,EAAM,YAAY,IAAM,CApBvD,IAAAE,EAqBI,IAAIC,EAAW,EAGf,MAAMC,GAAmBF,EAAAL,EAAW,UAAX,KAAAK,OAAAA,EAAoB,iBAAiB,IAAA,EAmB9D,OAlB4B,MAAM,KAAKE,GAAoB,CAAE,CAAA,EAGnB,MAAM,EAAGR,CAAqB,EAElC,OAAO,CAACS,EAAKC,EAAQC,IAAU,CACnE,MAAMC,EAAgBD,EAAQ,EACxBE,EAAc,CAClB,GAAGJ,EACH,CAAC,yBAAyBG,CAAa,EAAE,EAAG,GAAGF,EAAO,WAAW,KACjE,CAAC,wBAAwBE,CAAa,EAAE,EAAG,GAAGL,CAAQ,IACxD,EAEA,OAAAA,IAAYC,GAAA,KAAAA,OAAAA,EAAkB,KAAKG,CAAAA,EAAO,cAAe,EAElDE,CACT,EAAG,CAAE,CAAA,CAGP,EAAG,CAACb,EAAuBC,CAAU,CAAC,EAEtC,OAAAG,EAAM,gBAAgB,IAAM,CAC1B,GAAI,CAACJ,EAAuB,OAC5B,MAAMc,EAAkBT,EAAqB,EAE7CF,EAAgBW,CAAe,CACjC,EAAG,CAACd,EAAuBC,EAAYI,CAAoB,CAAC,EAErD,CACL,aAAAH,CACF,CACF"}
|