@atom-learning/components 2.32.2-beta.0 → 2.32.3-beta.0

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

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

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

@@ -197,7 +197,7 @@ declare const StyledTable: import("@stitches/react/types/styled-component").Styl
     };
 }>>;
 declare type TableProps = React.ComponentProps<typeof StyledTable> & {
-    numOfStickyColumns?: number;
+    numberOfStickyColumns?: number;
 };
 export declare const Table: React.FC<TableProps> & TableSubComponents;
 export {};

package/dist/components/table/Table.js

@@ -1 +1 @@
-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};
+import*as i from"react";import{styled as f}from"../../stitches.js";import{TableBody as b}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 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",numberOfStickyColumns:l=0,...n})=>{const a=i.createElement(C,{size:s,corners:d,...n});return l?i.createElement(m,{numberOfStickyColumns:l},a):a};e.Body=b,e.Cell=o,e.Footer=p,e.FooterCell=t,e.Header=$,e.HeaderCell=r,e.Row=u,e.StickyColumnsContainer=m,e.displayName="Table";export{e as Table};

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

@@ -177,8 +177,6 @@ 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> & {
-    numOfStickyColumns?: number;
-};
+declare type TableBodyProps = React.ComponentProps<typeof StyledTableBody>;
 export declare const TableBody: React.FC<TableBodyProps>;
 export {};

package/dist/components/table/TableBody.js

@@ -1 +1 @@
-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};
+import*as r from"react";import{styled as i}from"../../stitches.js";import{StyledRow as t}from"./TableRow.js";const l=i("tbody",{variants:{striped:{true:{[`${t}`]:{"&:nth-child(odd)":{bg:"white"},"&:nth-child(even)":{bg:"$tonal50"}}},false:{[`${t}`]:{bg:"white"}}}}}),e=({striped:o=!0,...d})=>r.createElement(l,{striped:o,...d});e.displayName="TableBody";export{e as TableBody};

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

@@ -182,8 +182,6 @@ 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> & {
-    numOfStickyColumns?: number;
-};
+declare type TableHeaderProps = React.ComponentProps<typeof StyledTableHeader>;
 export declare const TableHeader: React.FC<TableHeaderProps>;
 export {};

package/dist/components/table/TableHeader.js

@@ -1 +1 @@
-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};
+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};

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

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

package/dist/components/table/TableStickyColumnsContainer.js

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