@atom-learning/components 2.31.1 → 2.32.0

package/CHANGELOG.md

@@ -1,9 +1,15 @@
-## [2.31.1](https://github.com/Atom-Learning/components/compare/v2.31.0...v2.31.1) (2023-02-07)
+# [2.32.0](https://github.com/Atom-Learning/components/compare/v2.31.1...v2.32.0) (2023-02-14)
 
 
 ### Bug Fixes
 
-* useWindowScrollPosition add forgotten delay dependency to useEffect ([224f4ff](https://github.com/Atom-Learning/components/commit/224f4ff062f89031e0e0a1feb2123e03261d6fc2))
+* 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/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};