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

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [2.32.0](https://github.com/Atom-Learning/components/compare/v2.31.1...v2.32.0) (2023-02-14)
+
+
+### Bug Fixes
+
+* defaultValue SearchInput ([92c0bcb](https://github.com/Atom-Learning/components/commit/92c0bcb35f9d09add21da8527c7cbd918e14457e))
+
+
+### Features
+
+* allow SearchInput to be both controller and uncontrolled ([6ba2454](https://github.com/Atom-Learning/components/commit/6ba24545c9bd756c984ceda5f5566287abcf687e))
+* better tests SearchInput ([61dd01f](https://github.com/Atom-Learning/components/commit/61dd01f47e75c7ecc6b816dd0436ebbd77025359))
+
 # [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 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};
+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};

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 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};

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

@@ -5,6 +5,8 @@ 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 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};
+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};

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

@@ -6,7 +6,6 @@ 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;
@@ -15,7 +14,6 @@ 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;
@@ -196,8 +194,6 @@ 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> & {
-    numOfStickyColumns?: number;
-};
+declare type TableProps = React.ComponentProps<typeof StyledTable>;
 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 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};

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 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};

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};