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

package/CHANGELOG.md

@@ -1,10 +1,3 @@
-## [2.32.1](https://github.com/Atom-Learning/components/compare/v2.32.0...v2.32.1) (2023-02-16)
-
-
-### Bug Fixes
-
-* add important  to noCapsize CSS to prevent conflicts ([66d730a](https://github.com/Atom-Learning/components/commit/66d730adee94b237dbe58e1ab34518e25ae6790d))
-
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 
 

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

@@ -1 +1 @@
-import*as e from"react";import{debounce as p}from"throttle-debounce";import{OptionallyVisuallyHiddenContainer as u}from"../../utilities/optionally-visually-hidden-container/OptionallyVisuallyHiddenContainer.js";import{Label as d}from"../label/Label.js";import{SearchInput as f}from"../search-input/SearchInput.js";import{useDataTable as g}from"./DataTableContext.js";const h=({onChange:a,label:t,hideLabel:r=!1,...n})=>{const{setGlobalFilter:o,getState:m,resetPagination:i}=g(),{globalFilter:b}=m(),s=p(250,l=>{const{target:{value:c}}=l;a==null||a(l),i(),o(c)});return e.createElement(e.Fragment,null,e.createElement(u,{hidden:r},e.createElement(d,{css:{mb:"$3"},htmlFor:t},t)),e.createElement(f,{...n,defaultValue:b,onChange:s,name:t}))};export{h as DataTableGlobalFilter};
+import*as e from"react";import{debounce as p}from"throttle-debounce";import{OptionallyVisuallyHiddenContainer as u}from"../../utilities/optionally-visually-hidden-container/OptionallyVisuallyHiddenContainer.js";import{Label as g}from"../label/Label.js";import{SearchInput as d}from"../search-input/SearchInput.js";import{useDataTable as f}from"./DataTableContext.js";const h=({onChange:a,label:t,hideLabel:r=!1,...n})=>{const{setGlobalFilter:o,getState:m,resetPagination:i}=f(),{globalFilter:b}=m(),s=p(250,l=>{const{target:{value:c}}=l;a==null||a(l),i(),o(c)});return e.createElement(e.Fragment,null,e.createElement(u,{hidden:r},e.createElement(g,{css:{mb:"$3"},htmlFor:t},t)),e.createElement(d,{...n,value:b,onChange:s,name:t}))};export{h as DataTableGlobalFilter};

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 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/heading/Heading.js

@@ -1 +1 @@
-import*as i from"react";import{styled as f}from"../../stitches.js";import{capsize as e}from"../../utilities/style/capsize.js";const t=f("h2",{fontFamily:"$display",fontWeight:700,m:0,variants:{size:{xs:{fontFamily:"$body",fontWeight:600,fontSize:"$md",lineHeight:1.5,...e(.3864)},sm:{fontSize:"$lg",lineHeight:1.14,...e(.2174,.2254)},md:{fontSize:"$xl",lineHeight:1.14,...e(.2174,.2254)},lg:{fontSize:"$2xl",lineHeight:1.08,...e(.1865,.1945)},xl:{fontSize:"$3xl",lineHeight:1.12,...e(.206,.214)},xxl:{fontSize:"$4xl",lineHeight:1.06,...e(.1793,.1873)}},noCapsize:{true:{"&::before, &::after":{display:"none !important"}}}}}),n=i.forwardRef(({size:o="md",...l},a)=>i.createElement(t,{ref:a,size:o,...l}));n.displayName="Heading";export{n as Heading,t as StyledHeading};
+import*as i from"react";import{styled as a}from"../../stitches.js";import{capsize as e}from"../../utilities/style/capsize.js";const t=a("h2",{fontFamily:"$display",fontWeight:700,m:0,variants:{size:{xs:{fontFamily:"$body",fontWeight:600,fontSize:"$md",lineHeight:1.5,...e(.3864)},sm:{fontSize:"$lg",lineHeight:1.14,...e(.2174,.2254)},md:{fontSize:"$xl",lineHeight:1.14,...e(.2174,.2254)},lg:{fontSize:"$2xl",lineHeight:1.08,...e(.1865,.1945)},xl:{fontSize:"$3xl",lineHeight:1.12,...e(.206,.214)},xxl:{fontSize:"$4xl",lineHeight:1.06,...e(.1793,.1873)}},noCapsize:{true:{"&::before, &::after":{display:"none"}}}}}),n=i.forwardRef(({size:o="md",...l},f)=>i.createElement(t,{ref:f,size:o,...l}));n.displayName="Heading";export{n as Heading,t as StyledHeading};

package/dist/components/search-input/SearchInput.d.ts

@@ -5,8 +5,6 @@ export declare type SearchInputProps = React.ComponentProps<typeof Input> & {
     size?: 'sm' | 'md';
     css?: CSS;
     value?: string;
-    defaultValue?: string;
-    onValueChange?: (newValue: string) => void;
     clearText?: string;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };

package/dist/components/search-input/SearchInput.js

@@ -1 +1 @@
-import{Search as H,Close as I}from"@atom-learning/icons";import*as e from"react";import{ActionIcon as k}from"../action-icon/ActionIcon.js";import{Box as L}from"../box/Box.js";import{Icon as E}from"../icon/Icon.js";import{Input as $}from"../input/Input.js";import{styled as f}from"../../stitches.js";import{useCallbackRef as x}from"../../utilities/hooks/useCallbackRef.js";var N=(t=>(t.SEARCH="SEARCH",t.CLEAR="CLEAR",t))(N||{});const O=f(E,{color:"$tonal300",position:"absolute",pointerEvents:"none",variants:{size:{sm:{top:"$2",right:"$2",size:"$1"},md:{top:10,right:10,size:20}}}}),T=f($,{'&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, & input[type="search"]::-webkit-search-results-decoration':{display:"none"}}),h=e.forwardRef(({size:t="md",css:C,value:r,defaultValue:i="",onValueChange:n,clearText:b="Clear",onChange:c,...d},v)=>{const[u,R]=x(),[A,p]=e.useState(i),[S,m]=e.useState(i?"CLEAR":"SEARCH");e.useEffect(()=>{typeof r>"u"||(p(r),m(r?"CLEAR":"SEARCH"))},[r]),e.useImperativeHandle(v,()=>u.current);const w=()=>{var s,o;const a=u.current;if(!a)return;const l=(s=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:s.set;(o=l==null?void 0:l.call)==null||o.call(l,a,"");const z=new Event("input",{bubbles:!0});a.dispatchEvent(z),a.focus(),n==null||n("")},y=s=>{c==null||c(s);const o=s.target.value;p(o),n==null||n(o),m(o?"CLEAR":"SEARCH")},g=()=>S==="SEARCH"?e.createElement(O,{is:H,size:t,css:{size:t=="sm"?"$1":20}}):e.createElement(k,{label:b,theme:"neutral",size:t,css:{position:"absolute",top:"0",right:"$1"},onClick:w},e.createElement(E,{is:I}));return e.createElement(L,{css:{position:"relative",...C}},e.createElement(T,{ref:R,size:t,type:"search",...d,value:A,onChange:y,css:{pr:t==="sm"?"$5":"$6"}}),g())});h.displayName="SearchInput";export{h as SearchInput};
+import{Search as z,Close as y}from"@atom-learning/icons";import*as t from"react";import{ActionIcon as H}from"../action-icon/ActionIcon.js";import{Box as I}from"../box/Box.js";import{Icon as l}from"../icon/Icon.js";import{Input as k}from"../input/Input.js";import{styled as p}from"../../stitches.js";import{useCallbackRef as L}from"../../utilities/hooks/useCallbackRef.js";var $=(e=>(e.SEARCH="SEARCH",e.CLEAR="CLEAR",e))($||{});const x=p(l,{color:"$tonal300",position:"absolute",pointerEvents:"none",variants:{size:{sm:{top:"$2",right:"$2",size:"$1"},md:{top:10,right:10,size:20}}}}),O=p(k,{'&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, & input[type="search"]::-webkit-search-results-decoration':{display:"none"}}),u=t.forwardRef(({size:e="md",css:m,value:n,clearText:E="Clear",onChange:a,...h},b)=>{const[i,f]=L(),[v,C]=t.useState(n||""),[d,R]=t.useState(n?"CLEAR":"SEARCH");t.useImperativeHandle(b,()=>i.current);const A=()=>{var r,c;const o=i.current;if(!o)return;const s=(r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:r.set;(c=s==null?void 0:s.call)==null||c.call(s,o,"");const w=new Event("input",{bubbles:!0});o.dispatchEvent(w),o.focus()},S=r=>{C(r.target.value),R(r.target.value?"CLEAR":"SEARCH"),a==null||a(r)},g=()=>d==="SEARCH"?t.createElement(x,{is:z,size:e,css:{size:e=="sm"?"$1":20}}):t.createElement(H,{label:E,theme:"neutral",size:e,css:{position:"absolute",top:"0",right:"$1"},onClick:A},t.createElement(l,{is:y}));return t.createElement(I,{css:{position:"relative",...m}},t.createElement(O,{ref:f,size:e,type:"search",...h,value:v,onChange:S,css:{pr:e==="sm"?"$5":"$6"}}),g())});u.displayName="SearchInput";export{u as SearchInput};

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> & {
+    numberOfStickyColumns?: 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 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.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 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/TableStickyColumnsContainer.d.ts

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

package/dist/components/table/TableStickyColumnsContainer.js

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

package/dist/components/text/Text.js

@@ -1 +1 @@
-import*as o from"react";import{styled as f}from"../../stitches.js";import{capsize as e}from"../../utilities/style/capsize.js";const i={size:{xs:{fontSize:"$xs",lineHeight:1.6,...e(.4364)},sm:{fontSize:"$sm",lineHeight:1.53,...e(.4056)},md:{fontSize:"$md",lineHeight:1.5,...e(.3864)},lg:{fontSize:"$lg",lineHeight:1.52,...e(.3983)},xl:{fontSize:"$xl",lineHeight:1.42,...e(.3506)}},noCapsize:{true:{"&::before, &::after":{display:"none !important"}}}},l=({size:t,noCapsize:n})=>({...i.size[t],...i.noCapsize[`${n}`]}),a=f("p",{fontFamily:"$body",fontWeight:400,margin:0,"& > &":{"&:before, &:after":{display:"none"}},variants:i}),r=o.forwardRef(({size:t="md",...n},s)=>o.createElement(a,{size:t,...n,ref:s}));r.displayName="Text";export{a as StyledText,r as Text,l as getTextVariant,i as textVariants};
+import*as o from"react";import{styled as f}from"../../stitches.js";import{capsize as e}from"../../utilities/style/capsize.js";const i={size:{xs:{fontSize:"$xs",lineHeight:1.6,...e(.4364)},sm:{fontSize:"$sm",lineHeight:1.53,...e(.4056)},md:{fontSize:"$md",lineHeight:1.5,...e(.3864)},lg:{fontSize:"$lg",lineHeight:1.52,...e(.3983)},xl:{fontSize:"$xl",lineHeight:1.42,...e(.3506)}},noCapsize:{true:{"&::before, &::after":{display:"none"}}}},l=({size:t,noCapsize:n})=>({...i.size[t],...i.noCapsize[`${n}`]}),a=f("p",{fontFamily:"$body",fontWeight:400,margin:0,"& > &":{"&:before, &:after":{display:"none"}},variants:i}),s=o.forwardRef(({size:t="md",...n},r)=>o.createElement(a,{size:t,...n,ref:r}));s.displayName="Text";export{a as StyledText,s as Text,l as getTextVariant,i as textVariants};