@atom-learning/components 2.3.0 → 2.4.0

package/CHANGELOG.md

@@ -1,9 +1,9 @@
-# [2.3.0](https://github.com/Atom-Learning/components/compare/v2.2.0...v2.3.0) (2022-09-20)
+# [2.4.0](https://github.com/Atom-Learning/components/compare/v2.3.0...v2.4.0) (2022-09-21)
 
 
 ### Features
 
-* added appbar component ([f5bd073](https://github.com/Atom-Learning/components/commit/f5bd073831de27bdf5bf8d371e2d612c350189af))
+* search field ([745c5bd](https://github.com/Atom-Learning/components/commit/745c5bd06206abbc5afc64399be3a9b5ee3d3db9))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/index.d.ts

@@ -47,6 +47,7 @@ export { RadioButton, RadioButtonGroup } from './radio-button';
 export { RadioButtonField } from './radio-button-field';
 export { RadioCard, RadioCardGroup } from './radio-card';
 export { SearchInput } from './search-input';
+export { SearchField } from './search-field';
 export { Select } from './select';
 export { SelectField } from './select-field';
 export { Slider } from './slider';

package/dist/components/search-field/SearchField.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ValidationOptions } from '../../components/form';
+import { SearchInputProps } from '../../components/search-input';
+declare type SearchFieldProps = SearchInputProps & {
+    description?: string;
+    label: string;
+    name: string;
+    prompt?: {
+        link: string;
+        label: string;
+    };
+    validation?: ValidationOptions;
+};
+export declare const SearchField: React.FC<SearchFieldProps>;
+export {};

package/dist/components/search-field/SearchField.js

@@ -0,0 +1 @@
+import*as i from"react";import{useFormContext as c}from"react-hook-form";import{FieldWrapper as f}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as u}from"../form/useFieldError.js";import{SearchInput as F}from"../search-input/SearchInput.js";const m=({css:p,label:a,name:r,validation:e,prompt:l,description:d,...n})=>{const{register:o}=c(),{error:t}=u(r),s=e?o(e):o;return i.createElement(f,{css:p,description:d,error:t,fieldId:r,label:a,prompt:l,required:Boolean(e==null?void 0:e.required)},i.createElement(F,{id:r,name:r,ref:s,...t&&{state:"error"},...n}))};m.displayName="SearchField";export{m as SearchField};

package/dist/components/search-field/index.d.ts

@@ -0,0 +1 @@
+export { SearchField } from './SearchField';

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Input } from '../../components/input';
 import { CSS } from '../../stitches';
-declare type SearchInputProps = React.ComponentProps<typeof Input> & {
+export declare type SearchInputProps = React.ComponentProps<typeof Input> & {
     size: 'sm' | 'md';
     css?: CSS;
     value?: string;
@@ -9,4 +9,3 @@ declare type SearchInputProps = React.ComponentProps<typeof Input> & {
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 export declare const SearchInput: React.FC<SearchInputProps>;
-export {};

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

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

@@ -1 +1,2 @@
 export { SearchInput } from './SearchInput';
+export type { SearchInputProps } from './SearchInput';