@saas-ui/search-input/dist/index.modern.mjs

A search input for Chakra UI

import*as e from"react";import{forwardRef as t,useMultiStyleConfig as n,useControllableState as r,InputGroup as a,InputLeftElement as l,Input as o,InputRightElement as c,IconButton as i}from"@chakra-ui/react";import{callAllHandlers as s,__DEV__ as u}from"@chakra-ui/utils";import{SearchIcon as m,CloseIcon as h}from"@chakra-ui/icons";function p(){return p=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},p.apply(this,arguments)}const f=["value","size","variant","icon","resetIcon","rightElement","onChange","onReset","onKeyDown"],g=t((t,u)=>{const{value:g,size:v,icon:y,resetIcon:E,rightElement:b,onChange:k,onReset:d,onKeyDown:x}=t,C=function(e,t){if(null==e)return{};var n,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)t.indexOf(n=l[r])>=0||(a[n]=e[n]);return a}(t,f),O=n("SearchInput",t),[z,j]=r({value:g,defaultValue:""}),w=e.useCallback(e=>{j(e.target.value)},[j]),I=e.useCallback(e=>{"Escape"===e.key&&(j(""),null==d||d())},[d,j]),D="lg"===v?"sm":"xs";/*#__PURE__*/return e.createElement(a,{size:v},/*#__PURE__*/e.createElement(l,null,y||/*#__PURE__*/e.createElement(m,null)),/*#__PURE__*/e.createElement(o,p({type:"text",size:v,value:z,ref:u,sx:O.input,onChange:s(w,k),onKeyDown:s(I,x)},C)),/*#__PURE__*/e.createElement(c,null,z?/*#__PURE__*/e.createElement(i,{onClick:d,size:D,variant:"ghost","aria-label":"Reset search",icon:E||/*#__PURE__*/e.createElement(h,null),sx:O.reset}):b))});g.defaultProps={placeholder:"Search"},u&&(g.displayName="SearchInput");export{g as SearchInput};
//# sourceMappingURL=index.modern.mjs.map