@atom-learning/components 6.0.0-beta.18 → 6.0.0-beta.19
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.d.ts +3 -8
- 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/dist/styled.js +1 -1
- package/dist/styled.js.map +1 -1
- package/package.json +4 -3
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import i from"clsx";import _ from"react";import{useStickyColumnsStyle as a}from"./useStickyColumnsCss.js";const d=({children:o,numberOfStickyColumns:t=0,className:l,...n})=>{const[p,e]=_.useState(!1),x=_.useRef(null),{columnsStyle:s}=a({numberOfStickyColumns:t,wrapperRef:x});return _.createElement("div",{onScroll:c=>{const h=c.currentTarget.scrollLeft>0;h!==p&&e(h)},role:"scrollbar",ref:x,style:s,className:i("overflow-auto","max-w-full","relative","overscroll-x-contain","[&_td]:bg-inherit",l,t===1&&["[&_td]:nth-[1]:sticky","[&_td]:nth-[1]:left-(--sticky-offset-left-1)","[&_td]:nth-[1]:width-(--sticky-column-width-1)","[&_td]:nth-[1]:z-2"],t===2&&["[&_td]:nth-[2]:sticky","[&_td]:nth-[2]:left-(--sticky-offset-left-2)","[&_td]:nth-[2]:width-(--sticky-column-width-2)","[&_td]:nth-[2]:z-2"],t===3&&["[&_td]:nth-[3]:sticky","[&_td]:nth-[3]:left-(--sticky-offset-left-3)","[&_td]:nth-[3]:width-(--sticky-column-width-3)","[&_td]:nth-[3]:z-2"],t===4&&["[&_td]:nth-[4]:sticky","[&_td]:nth-[4]:left-(--sticky-offset-left-4)","[&_td]:nth-[4]:width-(--sticky-column-width-4)","[&_td]:nth-[4]:z-2"],t===1&&p&&["[&_td]:nth-[1]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td]:nth-[1]:[clip-path:inset(0px_-10px_0px_0px)","[&_th]:nth-[1]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_th]:nth-[1]:[clip-path:inset(0px_-10px_0px_0px)"],t===2&&p&&["[&_td]:nth-[2]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td]:nth-[2]:[clip-path:inset(0px_-10px_0px_0px)","[&_th]:nth-[2]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_th]:nth-[2]:[clip-path:inset(0px_-10px_0px_0px)"],t===3&&p&&["[&_td]:nth-[3]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td]:nth-[3]:[clip-path:inset(0px_-10px_0px_0px)","[&_th]:nth-[3]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_th]:nth-[3]:[clip-path:inset(0px_-10px_0px_0px)"],t===4&&p&&["[&_td]:nth-[4]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td]:nth-[4]:[clip-path:inset(0px_-10px_0px_0px)","[&_th]:nth-[4]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_th]:nth-[4]:[clip-path:inset(0px_-10px_0px_0px)"]),...n},o)};export{d 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 {
|
|
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 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]:bg-inherit',\n className,\n numberOfStickyColumns === 1 && [\n '[&_td]:nth-[1]:sticky',\n '[&_td]:nth-[1]:left-(--sticky-offset-left-1)',\n '[&_td]:nth-[1]:width-(--sticky-column-width-1)',\n '[&_td]:nth-[1]:z-2'\n ],\n numberOfStickyColumns === 2 && [\n '[&_td]:nth-[2]:sticky',\n '[&_td]:nth-[2]:left-(--sticky-offset-left-2)',\n '[&_td]:nth-[2]:width-(--sticky-column-width-2)',\n '[&_td]:nth-[2]:z-2'\n ],\n numberOfStickyColumns === 3 && [\n '[&_td]:nth-[3]:sticky',\n '[&_td]:nth-[3]:left-(--sticky-offset-left-3)',\n '[&_td]:nth-[3]:width-(--sticky-column-width-3)',\n '[&_td]:nth-[3]:z-2'\n ],\n numberOfStickyColumns === 4 && [\n '[&_td]:nth-[4]:sticky',\n '[&_td]:nth-[4]:left-(--sticky-offset-left-4)',\n '[&_td]:nth-[4]:width-(--sticky-column-width-4)',\n '[&_td]:nth-[4]:z-2'\n ],\n numberOfStickyColumns === 1 &&\n hasScroll && [\n '[&_td]:nth-[1]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n '[&_td]:nth-[1]:[clip-path:inset(0px_-10px_0px_0px)',\n '[&_th]:nth-[1]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n '[&_th]:nth-[1]:[clip-path:inset(0px_-10px_0px_0px)'\n ],\n numberOfStickyColumns === 2 &&\n hasScroll && [\n '[&_td]:nth-[2]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n '[&_td]:nth-[2]:[clip-path:inset(0px_-10px_0px_0px)',\n '[&_th]:nth-[2]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n '[&_th]:nth-[2]:[clip-path:inset(0px_-10px_0px_0px)'\n ],\n numberOfStickyColumns === 3 &&\n hasScroll && [\n '[&_td]:nth-[3]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n '[&_td]:nth-[3]:[clip-path:inset(0px_-10px_0px_0px)',\n '[&_th]:nth-[3]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n '[&_th]:nth-[3]:[clip-path:inset(0px_-10px_0px_0px)'\n ],\n numberOfStickyColumns === 4 &&\n hasScroll && [\n '[&_td]:nth-[4]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n '[&_td]:nth-[4]:[clip-path:inset(0px_-10px_0px_0px)',\n '[&_th]:nth-[4]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n '[&_th]:nth-[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":"gHAKaA,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,EAKI,KAAK,YACL,IAAKJ,EACL,MAAOC,EACP,UAAWI,EACT,gBACA,aACA,WACA,uBACA,oBACAV,EACAD,IAA0B,GAAK,CAC7B,wBACA,+CACA,iDACA,oBACF,EACAA,IAA0B,GAAK,CAC7B,wBACA,+CACA,iDACA,oBACF,EACAA,IAA0B,GAAK,CAC7B,wBACA,+CACA,iDACA,oBACF,EACAA,IAA0B,GAAK,CAC7B,wBACA,+CACA,iDACA,oBACF,EACAA,IAA0B,GACxBG,GAAa,CACX,oEACA,qDACA,oEACA,oDACF,EACFH,IAA0B,GACxBG,GAAa,CACX,oEACA,qDACA,oEACA,oDACF,EACFH,IAA0B,GACxBG,GAAa,CACX,oEACA,qDACA,oEACA,oDACF,EACFH,IAA0B,GACxBG,GAAa,CACX,oEACA,qDACA,oEACA,oDACF,CACJ,EACC,GAAGD,CAAAA,EAEHH,CACH,CAEJ"}
|
|
@@ -1,14 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
type
|
|
3
|
-
position: 'sticky';
|
|
4
|
-
left: string;
|
|
5
|
-
minWidth: string;
|
|
6
|
-
zIndex: string;
|
|
7
|
-
}>;
|
|
2
|
+
type ColumnStyle = Record<`--sticky-column-width-${number}` | `--sticky-offset-left-${number}`, string>;
|
|
8
3
|
interface IUseStickyColumnsCss {
|
|
9
|
-
|
|
4
|
+
columnsStyle?: ColumnStyle;
|
|
10
5
|
}
|
|
11
|
-
export declare const
|
|
6
|
+
export declare const useStickyColumnsStyle: ({ numberOfStickyColumns, wrapperRef }: {
|
|
12
7
|
numberOfStickyColumns: number;
|
|
13
8
|
wrapperRef: React.RefObject<HTMLTableSectionElement>;
|
|
14
9
|
}) => IUseStickyColumnsCss;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as r from"react";const y=({numberOfStickyColumns:t,wrapperRef:c})=>{const[i,a]=r.useState({}),n=r.useCallback(()=>{var e;let l=0;const o=(e=c.current)==null?void 0:e.querySelectorAll("th");return Array.from(o||[]).slice(0,t).reduce((S,f,s)=>{const u=s+1,m={["--sticky-column-width-".concat(u)]:"".concat(f.offsetWidth,"px"),["--sticky-offset-left-".concat(u)]:"".concat(l,"px")};return l+=(o==null?void 0:o.item(s).clientWidth)||0,m},{})},[t,c]);return r.useLayoutEffect(()=>{if(!t)return;const e=n();a(e)},[t,c,n]),{columnsStyle:i}};export{y 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
|
|
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,EAAE,EAEhEC,EAAuBD,EAAM,YAAY,IAAM,CApBvD,IAAAE,EAqBI,IAAIC,EAAW,EAGf,MAAMC,GAAmBF,EAAAL,EAAW,UAAX,KAAAK,OAAAA,EAAoB,iBAAiB,IAAA,EAkB9D,OAjB4B,MAAM,KAAKE,GAAoB,CAAE,CAAA,EAGnB,MAAM,EAAGR,CAAqB,EAElC,OAAO,CAACS,EAAKC,EAAQC,IAAU,CACnE,MAAMC,EAAgBD,EAAQ,EACxBE,EAAc,CAClB,CAAC,yBAAyB,OAAAD,CAAe,CAAA,EAAG,GAAG,OAAAF,EAAO,YAAW,IACjE,EAAA,CAAC,wBAAwB,OAAAE,CAAe,CAAA,EAAG,GAAG,OAAAL,EAAQ,IAAA,CACxD,EAEA,OAAAA,IAAYC,GAAA,KAAAA,OAAAA,EAAkB,KAAKG,CAAAA,EAAO,cAAe,EAElDE,CACT,EAAG,CAAA,CAAE,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"}
|