@atom-learning/components 2.31.1 → 2.31.2-beta.0

package/CHANGELOG.md

@@ -1,10 +1,3 @@
-## [2.31.1](https://github.com/Atom-Learning/components/compare/v2.31.0...v2.31.1) (2023-02-07)
-
-
-### Bug Fixes
-
-* useWindowScrollPosition add forgotten delay dependency to useEffect ([224f4ff](https://github.com/Atom-Learning/components/commit/224f4ff062f89031e0e0a1feb2123e03261d6fc2))
-
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 
 

package/dist/components/data-table/DataTableTable.js

@@ -1 +1 @@
-import*as e from"react";import{Table as i}from"../table/Table.js";import{DataTable as t}from"./DataTable.js";import{AsyncDataState as c}from"./DataTable.types.js";import{useDataTable as p}from"./DataTableContext.js";import{DataTableLoading as b}from"./DataTableLoading.js";const D=({sortable:a,striped:r,theme:o,css:m,...n})=>{const{asyncDataState:s}=p(),l=s===c.PENDING;return e.createElement(e.Fragment,null,e.createElement(b,null),e.createElement(i,{...n,css:{...m,...l&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(t.Head,{theme:o,sortable:a}),e.createElement(t.Body,{striped:r})))};export{D as DataTableTable};
+import*as e from"react";import{Table as c}from"../table/Table.js";import{DataTable as a}from"./DataTable.js";import{AsyncDataState as p}from"./DataTable.types.js";import{useDataTable as u}from"./DataTableContext.js";import{DataTableLoading as f}from"./DataTableLoading.js";const y=({sortable:m,striped:n,theme:o,css:r,numOfStickyColumns:t=0,...s})=>{const{asyncDataState:l}=u(),i=l===p.PENDING;return e.createElement(e.Fragment,null,e.createElement(f,null),e.createElement(c,{...s,numOfStickyColumns:t,css:{...r,...i&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(a.Head,{theme:o,sortable:m,numOfStickyColumns:t}),e.createElement(a.Body,{striped:n,numOfStickyColumns:t})))};export{y as DataTableTable};

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

@@ -6,6 +6,7 @@ import { TableFooterCell } from './TableFooterCell';
 import { TableHeader } from './TableHeader';
 import { TableHeaderCell } from './TableHeaderCell';
 import { TableRow } from './TableRow';
+import { TableStickyColumnsContainer } from './TableStickyColumnsContainer';
 declare type TableSubComponents = {
     Body: typeof TableBody;
     Cell: typeof TableCell;
@@ -14,6 +15,7 @@ declare type TableSubComponents = {
     Header: typeof TableHeader;
     HeaderCell: typeof TableHeaderCell;
     Row: typeof TableRow;
+    StickyColumnsContainer: typeof TableStickyColumnsContainer;
 };
 declare const StyledTable: import("@stitches/react/types/styled-component").StyledComponent<"table", {
     size?: "md" | "lg" | undefined;
@@ -194,6 +196,8 @@ declare const StyledTable: import("@stitches/react/types/styled-component").Styl
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-declare type TableProps = React.ComponentProps<typeof StyledTable>;
+declare type TableProps = React.ComponentProps<typeof StyledTable> & {
+    numOfStickyColumns?: number;
+};
 export declare const Table: React.FC<TableProps> & TableSubComponents;
 export {};

package/dist/components/table/Table.js

@@ -1 +1 @@
-import*as d from"react";import{styled as s}from"../../stitches.js";import{TableBody as m}from"./TableBody.js";import{TableCell as o}from"./TableCell.js";import{TableFooter as p}from"./TableFooter.js";import{TableFooterCell as t}from"./TableFooterCell.js";import{TableHeader as $}from"./TableHeader.js";import{TableHeaderCell as r}from"./TableHeaderCell.js";import{StyledRow as f,TableRow as b}from"./TableRow.js";const n=s("table",{borderCollapse:"separate",borderSpacing:0,fontFamily:"$sans",fontSize:"$sm",width:"100%",variants:{size:{md:{[`${o}, ${r}, ${t}`]:{height:"$4"}},lg:{[`${o}, ${r}, ${t}`]:{height:"$5"}}},corners:{round:{[`${r}`]:{"&:first-of-type":{borderTopLeftRadius:"$0"},"&:last-of-type":{borderTopRightRadius:"$0"}},[`${f}:last-child`]:{[`${o}:first-child`]:{borderBottomLeftRadius:"$0"},[`${o}:last-child`]:{borderBottomRightRadius:"$0"}}},square:{}}}}),e=({size:l="md",corners:a="round",...i})=>d.createElement(n,{size:l,corners:a,...i});e.Body=m,e.Cell=o,e.Footer=p,e.FooterCell=t,e.Header=$,e.HeaderCell=r,e.Row=b,e.displayName="Table";export{e as Table};
+import*as i from"react";import{styled as f}from"../../stitches.js";import{TableBody as p}from"./TableBody.js";import{TableCell as o}from"./TableCell.js";import{TableFooter as $}from"./TableFooter.js";import{TableFooterCell as t}from"./TableFooterCell.js";import{TableHeader as b}from"./TableHeader.js";import{TableHeaderCell as r}from"./TableHeaderCell.js";import{StyledRow as c,TableRow as u}from"./TableRow.js";import{TableStickyColumnsContainer as m}from"./TableStickyColumnsContainer.js";const C=f("table",{borderCollapse:"separate",borderSpacing:0,fontFamily:"$sans",fontSize:"$sm",width:"100%",variants:{size:{md:{[`${o}, ${r}, ${t}`]:{height:"$4"}},lg:{[`${o}, ${r}, ${t}`]:{height:"$5"}}},corners:{round:{[`${r}`]:{"&:first-of-type":{borderTopLeftRadius:"$0"},"&:last-of-type":{borderTopRightRadius:"$0"}},[`${c}:last-child`]:{[`${o}:first-child`]:{borderBottomLeftRadius:"$0"},[`${o}:last-child`]:{borderBottomRightRadius:"$0"}}},square:{}}}}),e=({size:s="md",corners:d="round",numOfStickyColumns:l=0,...n})=>{const a=i.createElement(C,{size:s,corners:d,...n});return l?i.createElement(m,{numOfStickyColumns:l},a):a};e.Body=p,e.Cell=o,e.Footer=$,e.FooterCell=t,e.Header=b,e.HeaderCell=r,e.Row=u,e.StickyColumnsContainer=m,e.displayName="Table";export{e as Table};

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

@@ -177,6 +177,8 @@ declare const StyledTableBody: import("@stitches/react/types/styled-component").
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-declare type TableBodyProps = React.ComponentProps<typeof StyledTableBody>;
+declare type TableBodyProps = React.ComponentProps<typeof StyledTableBody> & {
+    numOfStickyColumns?: number;
+};
 export declare const TableBody: React.FC<TableBodyProps>;
 export {};

package/dist/components/table/TableBody.js

@@ -1 +1 @@
-import*as d from"react";import{styled as r}from"../../stitches.js";import{StyledRow as i}from"./TableRow.js";const l=r("tbody",{variants:{striped:{true:{[`${i}`]:{"&:nth-child(odd)":{bg:"white"},"&:nth-child(even)":{bg:"$tonal50"}}},false:{bg:"white"}}}}),t=({striped:e=!0,...o})=>d.createElement(l,{striped:e,...o});t.displayName="TableBody";export{t as TableBody};
+import*as e from"react";import{styled as m}from"../../stitches.js";import{StyledRow as s}from"./TableRow.js";import{useStickyColumnsCss as a}from"./useStickyColumnsCss.js";const c=m("tbody",{variants:{striped:{true:{[`${s}`]:{"&:nth-child(odd)":{bg:"white"},"&:nth-child(even)":{bg:"$tonal50"}}},false:{[`${s}`]:{bg:"white"}}}}}),o=({striped:r=!0,numOfStickyColumns:i=0,css:n,...d})=>{const t=e.useRef(null),{columnsCss:l}=a(i,"td",t);return e.createElement(c,{striped:r,ref:t,css:{...l,...n,"& td":{bg:"inherit"}},...d})};o.displayName="TableBody";export{o as TableBody};

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

@@ -182,6 +182,8 @@ declare const StyledTableHeader: import("@stitches/react/types/styled-component"
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-declare type TableHeaderProps = React.ComponentProps<typeof StyledTableHeader>;
+declare type TableHeaderProps = React.ComponentProps<typeof StyledTableHeader> & {
+    numOfStickyColumns?: number;
+};
 export declare const TableHeader: React.FC<TableHeaderProps>;
 export {};

package/dist/components/table/TableHeader.js

@@ -1 +1 @@
-import o from"react";import{styled as l}from"../../stitches.js";import{TableHeaderCell as e}from"./TableHeaderCell.js";const r={PRIMARY:"primary",PRIMARY_DARK:"primaryDark",LIGHT:"light"},i=l("thead",{variants:{theme:{[r.PRIMARY]:{[`${e}`]:{bg:"$primary"}},[r.PRIMARY_DARK]:{[`${e}`]:{bg:"$primaryDark"}},[r.LIGHT]:{[`${e}`]:{bg:"$tonal50",color:"$tonal600"}}}}}),a=({theme:t="primaryDark",...m})=>o.createElement(i,{theme:t,...m});a.displayName="TableHeader";export{r as TABLE_HEADER_THEMES,a as TableHeader};
+import a from"react";import{styled as R}from"../../stitches.js";import{TableHeaderCell as e}from"./TableHeaderCell.js";import{useStickyColumnsCss as c}from"./useStickyColumnsCss.js";const r={PRIMARY:"primary",PRIMARY_DARK:"primaryDark",LIGHT:"light"},p=R("thead",{variants:{theme:{[r.PRIMARY]:{[`${e}`]:{bg:"$primary"}},[r.PRIMARY_DARK]:{[`${e}`]:{bg:"$primaryDark"}},[r.LIGHT]:{[`${e}`]:{bg:"$tonal50",color:"$tonal600"}}}}}),m=({theme:o="primaryDark",numOfStickyColumns:s=0,css:l,...i})=>{const t=a.useRef(null),{columnsCss:n}=c(s,"th",t);return a.createElement(p,{theme:o,ref:t,css:{...n,...l},...i})};m.displayName="TableHeader";export{r as TABLE_HEADER_THEMES,m as TableHeader};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { CSS } from '../../stitches';
+interface ITableStickyColumnsContainerProps {
+    children: React.ReactNode;
+    numOfStickyColumns?: number;
+    css?: CSS;
+}
+export declare const TableStickyColumnsContainer: React.FC<ITableStickyColumnsContainerProps>;
+export {};

package/dist/components/table/TableStickyColumnsContainer.js

@@ -0,0 +1 @@
+import o from"react";import{Box as a}from"../box/Box.js";const s=({children:t,numOfStickyColumns:r=0,css:e,...l})=>{const[c,n]=o.useState(!1);return o.createElement(a,{onScroll:p=>{n(p.currentTarget.scrollLeft>0)},role:"scrollbar",css:{overflow:"auto",maxWidth:"100%",...c&&{[`& th,td:nth-of-type(${r})`]:{boxShadow:"$colors$alpha200 -2px -3px 9px 1px",clipPath:"inset(0px -10px 0px 0px)"}},...e},...l},t)};export{s as TableStickyColumnsContainer};

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { CSS } from '../../stitches';
+interface IUseStickyColumnsCss {
+    columnsCss: CSS;
+}
+export declare const useStickyColumnsCss: (numOfStickyColumns: number, cellElement: 'th' | 'td', wrapperRef?: React.RefObject<HTMLTableSectionElement> | undefined) => IUseStickyColumnsCss;
+export {};

package/dist/components/table/useStickyColumnsCss.js

@@ -0,0 +1 @@
+import*as r from"react";const y=(s,t,e)=>{const[c,a]=r.useState([]),[f,v]=r.useState({});return r.useEffect(()=>{let l=0;v(c.reduce((n,u,o)=>{var i,d;const m={...n,[`& ${t}:nth-of-type(${o+1})`]:{position:"sticky",left:l,zIndex:"2"}};return l+=(((d=(i=e==null?void 0:e.current)==null?void 0:i.querySelectorAll(t))==null?void 0:d.item(o).clientWidth)||0)+.3,m},{}))},[c,e,t]),r.useLayoutEffect(()=>{const l=()=>{var n;const u=[];(n=e==null?void 0:e.current)==null||n.querySelectorAll(t).forEach(o=>u.push(o)),a(u.slice(0,s))};l(),window.addEventListener("resize",l)},[e,s,t]),{columnsCss:f}};export{y as useStickyColumnsCss};