@lanaco/lnc-react-ui/dist/SearchBar.cjs

React component library

"use strict";const h=require("react/jsx-runtime"),d=require("react"),x=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),oe=require("./Chip.cjs"),se=require("./emotion-react.browser.esm-Cvnp-zmB.cjs"),ae=require("./ThemeProvider.cjs"),_=require("./objectWithoutPropertiesLoose-BLga_MQA.cjs"),j=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),G=require("./setPrototypeOf-4aSEnBDm.cjs"),c=require("./index-BpbMKBf_.cjs"),$=require("./index-7Jsjuf-Q.cjs"),le=se.keyframes`
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
`,pe=x.styled.div`
  @media (prefers-reduced-motion: no-preference) {
    animation-name: ${le};
    animation-fill-mode: backwards;
  }
`,ce=({duration:e=300,delay:o=0,children:l,...n})=>h.jsx(pe,{...n,style:{...n.style||{},animationDuration:e+"ms",animationDelay:o+"ms"},children:l});function M(e,o){e.prototype=Object.create(o.prototype),e.prototype.constructor=e,G._setPrototypeOf(e,o)}function ue(e,o){return e.classList?!!o&&e.classList.contains(o):(" "+(e.className.baseVal||e.className)+" ").indexOf(" "+o+" ")!==-1}function de(e,o){e.classList?e.classList.add(o):ue(e,o)||(typeof e.className=="string"?e.className=e.className+" "+o:e.setAttribute("class",(e.className&&e.className.baseVal||"")+" "+o))}function U(e,o){return e.replace(new RegExp("(^|\\s)"+o+"(?:\\s|$)","g"),"$1").replace(/\s+/g," ").replace(/^\s*|\s*$/g,"")}function fe(e,o){e.classList?e.classList.remove(o):typeof e.className=="string"?e.className=U(e.className,o):e.setAttribute("class",U(e.className&&e.className.baseVal||"",o))}const W={disabled:!1};var me=process.env.NODE_ENV!=="production"?c.PropTypes.oneOfType([c.PropTypes.number,c.PropTypes.shape({enter:c.PropTypes.number,exit:c.PropTypes.number,appear:c.PropTypes.number}).isRequired]):null,he=process.env.NODE_ENV!=="production"?c.PropTypes.oneOfType([c.PropTypes.string,c.PropTypes.shape({enter:c.PropTypes.string,exit:c.PropTypes.string,active:c.PropTypes.string}),c.PropTypes.shape({enter:c.PropTypes.string,enterDone:c.PropTypes.string,enterActive:c.PropTypes.string,exit:c.PropTypes.string,exitDone:c.PropTypes.string,exitActive:c.PropTypes.string})]):null;const R=d.createContext(null);var B=function(o){return o.scrollTop},D="unmounted",C="exited",T="entering",S="entered",I="exiting",y=function(e){M(o,e);function o(n,r){var t;t=e.call(this,n,r)||this;var i=r,s=i&&!i.isMounting?n.enter:n.appear,a;return t.appearStatus=null,n.in?s?(a=C,t.appearStatus=T):a=S:n.unmountOnExit||n.mountOnEnter?a=D:a=C,t.state={status:a},t.nextCallback=null,t}o.getDerivedStateFromProps=function(r,t){var i=r.in;return i&&t.status===D?{status:C}:null};var l=o.prototype;return l.componentDidMount=function(){this.updateStatus(!0,this.appearStatus)},l.componentDidUpdate=function(r){var t=null;if(r!==this.props){var i=this.state.status;this.props.in?i!==T&&i!==S&&(t=T):(i===T||i===S)&&(t=I)}this.updateStatus(!1,t)},l.componentWillUnmount=function(){this.cancelNextCallback()},l.getTimeouts=function(){var r=this.props.timeout,t,i,s;return t=i=s=r,r!=null&&typeof r!="number"&&(t=r.exit,i=r.enter,s=r.appear!==void 0?r.appear:i),{exit:t,enter:i,appear:s}},l.updateStatus=function(r,t){if(r===void 0&&(r=!1),t!==null)if(this.cancelNextCallback(),t===T){if(this.props.unmountOnExit||this.props.mountOnEnter){var i=this.props.nodeRef?this.props.nodeRef.current:$.ReactDOM.findDOMNode(this);i&&B(i)}this.performEnter(r)}else this.performExit();else this.props.unmountOnExit&&this.state.status===C&&this.setState({status:D})},l.performEnter=function(r){var t=this,i=this.props.enter,s=this.context?this.context.isMounting:r,a=this.props.nodeRef?[s]:[$.ReactDOM.findDOMNode(this),s],p=a[0],f=a[1],v=this.getTimeouts(),E=s?v.appear:v.enter;if(!r&&!i||W.disabled){this.safeSetState({status:S},function(){t.props.onEntered(p)});return}this.props.onEnter(p,f),this.safeSetState({status:T},function(){t.props.onEntering(p,f),t.onTransitionEnd(E,function(){t.safeSetState({status:S},function(){t.props.onEntered(p,f)})})})},l.performExit=function(){var r=this,t=this.props.exit,i=this.getTimeouts(),s=this.props.nodeRef?void 0:$.ReactDOM.findDOMNode(this);if(!t||W.disabled){this.safeSetState({status:C},function(){r.props.onExited(s)});return}this.props.onExit(s),this.safeSetState({status:I},function(){r.props.onExiting(s),r.onTransitionEnd(i.exit,function(){r.safeSetState({status:C},function(){r.props.onExited(s)})})})},l.cancelNextCallback=function(){this.nextCallback!==null&&(this.nextCallback.cancel(),this.nextCallback=null)},l.safeSetState=function(r,t){t=this.setNextCallback(t),this.setState(r,t)},l.setNextCallback=function(r){var t=this,i=!0;return this.nextCallback=function(s){i&&(i=!1,t.nextCallback=null,r(s))},this.nextCallback.cancel=function(){i=!1},this.nextCallback},l.onTransitionEnd=function(r,t){this.setNextCallback(t);var i=this.props.nodeRef?this.props.nodeRef.current:$.ReactDOM.findDOMNode(this),s=r==null&&!this.props.addEndListener;if(!i||s){setTimeout(this.nextCallback,0);return}if(this.props.addEndListener){var a=this.props.nodeRef?[this.nextCallback]:[i,this.nextCallback],p=a[0],f=a[1];this.props.addEndListener(p,f)}r!=null&&setTimeout(this.nextCallback,r)},l.render=function(){var r=this.state.status;if(r===D)return null;var t=this.props,i=t.children;t.in,t.mountOnEnter,t.unmountOnExit,t.appear,t.enter,t.exit,t.timeout,t.addEndListener,t.onEnter,t.onEntering,t.onEntered,t.onExit,t.onExiting,t.onExited,t.nodeRef;var s=_._objectWithoutPropertiesLoose(t,["children","in","mountOnEnter","unmountOnExit","appear","enter","exit","timeout","addEndListener","onEnter","onEntering","onEntered","onExit","onExiting","onExited","nodeRef"]);return d.createElement(R.Provider,{value:null},typeof i=="function"?i(r,s):d.cloneElement(d.Children.only(i),s))},o}(d.Component);y.contextType=R;y.propTypes=process.env.NODE_ENV!=="production"?{nodeRef:c.PropTypes.shape({current:typeof Element>"u"?c.PropTypes.any:function(e,o,l,n,r,t){var i=e[o];return c.PropTypes.instanceOf(i&&"ownerDocument"in i?i.ownerDocument.defaultView.Element:Element)(e,o,l,n,r,t)}}),children:c.PropTypes.oneOfType([c.PropTypes.func.isRequired,c.PropTypes.element.isRequired]).isRequired,in:c.PropTypes.bool,mountOnEnter:c.PropTypes.bool,unmountOnExit:c.PropTypes.bool,appear:c.PropTypes.bool,enter:c.PropTypes.bool,exit:c.PropTypes.bool,timeout:function(o){var l=me;o.addEndListener||(l=l.isRequired);for(var n=arguments.length,r=new Array(n>1?n-1:0),t=1;t<n;t++)r[t-1]=arguments[t];return l.apply(void 0,[o].concat(r))},addEndListener:c.PropTypes.func,onEnter:c.PropTypes.func,onEntering:c.PropTypes.func,onEntered:c.PropTypes.func,onExit:c.PropTypes.func,onExiting:c.PropTypes.func,onExited:c.PropTypes.func}:{};function N(){}y.defaultProps={in:!1,mountOnEnter:!1,unmountOnExit:!1,appear:!1,enter:!0,exit:!0,onEnter:N,onEntering:N,onEntered:N,onExit:N,onExiting:N,onExited:N};y.UNMOUNTED=D;y.EXITED=C;y.ENTERING=T;y.ENTERED=S;y.EXITING=I;var ve=function(o,l){return o&&l&&l.split(" ").forEach(function(n){return de(o,n)})},w=function(o,l){return o&&l&&l.split(" ").forEach(function(n){return fe(o,n)})},z=function(e){M(o,e);function o(){for(var n,r=arguments.length,t=new Array(r),i=0;i<r;i++)t[i]=arguments[i];return n=e.call.apply(e,[this].concat(t))||this,n.appliedClasses={appear:{},enter:{},exit:{}},n.onEnter=function(s,a){var p=n.resolveArguments(s,a),f=p[0],v=p[1];n.removeClasses(f,"exit"),n.addClass(f,v?"appear":"enter","base"),n.props.onEnter&&n.props.onEnter(s,a)},n.onEntering=function(s,a){var p=n.resolveArguments(s,a),f=p[0],v=p[1],E=v?"appear":"enter";n.addClass(f,E,"active"),n.props.onEntering&&n.props.onEntering(s,a)},n.onEntered=function(s,a){var p=n.resolveArguments(s,a),f=p[0],v=p[1],E=v?"appear":"enter";n.removeClasses(f,E),n.addClass(f,E,"done"),n.props.onEntered&&n.props.onEntered(s,a)},n.onExit=function(s){var a=n.resolveArguments(s),p=a[0];n.removeClasses(p,"appear"),n.removeClasses(p,"enter"),n.addClass(p,"exit","base"),n.props.onExit&&n.props.onExit(s)},n.onExiting=function(s){var a=n.resolveArguments(s),p=a[0];n.addClass(p,"exit","active"),n.props.onExiting&&n.props.onExiting(s)},n.onExited=function(s){var a=n.resolveArguments(s),p=a[0];n.removeClasses(p,"exit"),n.addClass(p,"exit","done"),n.props.onExited&&n.props.onExited(s)},n.resolveArguments=function(s,a){return n.props.nodeRef?[n.props.nodeRef.current,s]:[s,a]},n.getClassNames=function(s){var a=n.props.classNames,p=typeof a=="string",f=p&&a?a+"-":"",v=p?""+f+s:a[s],E=p?v+"-active":a[s+"Active"],b=p?v+"-done":a[s+"Done"];return{baseClassName:v,activeClassName:E,doneClassName:b}},n}var l=o.prototype;return l.addClass=function(r,t,i){var s=this.getClassNames(t)[i+"ClassName"],a=this.getClassNames("enter"),p=a.doneClassName;t==="appear"&&i==="done"&&p&&(s+=" "+p),i==="active"&&r&&B(r),s&&(this.appliedClasses[t][i]=s,ve(r,s))},l.removeClasses=function(r,t){var i=this.appliedClasses[t],s=i.base,a=i.active,p=i.done;this.appliedClasses[t]={},s&&w(r,s),a&&w(r,a),p&&w(r,p)},l.render=function(){var r=this.props;r.classNames;var t=_._objectWithoutPropertiesLoose(r,["classNames"]);return d.createElement(y,j._extends({},t,{onEnter:this.onEnter,onEntered:this.onEntered,onEntering:this.onEntering,onExit:this.onExit,onExiting:this.onExiting,onExited:this.onExited}))},o}(d.Component);z.defaultProps={classNames:""};z.propTypes=process.env.NODE_ENV!=="production"?j._extends({},y.propTypes,{classNames:he,onEnter:c.PropTypes.func,onEntering:c.PropTypes.func,onEntered:c.PropTypes.func,onExit:c.PropTypes.func,onExiting:c.PropTypes.func,onExited:c.PropTypes.func}):{};function A(e,o){var l=function(t){return o&&d.isValidElement(t)?o(t):t},n=Object.create(null);return e&&d.Children.map(e,function(r){return r}).forEach(function(r){n[r.key]=l(r)}),n}function Ee(e,o){e=e||{},o=o||{};function l(f){return f in o?o[f]:e[f]}var n=Object.create(null),r=[];for(var t in e)t in o?r.length&&(n[t]=r,r=[]):r.push(t);var i,s={};for(var a in o){if(n[a])for(i=0;i<n[a].length;i++){var p=n[a][i];s[n[a][i]]=l(p)}s[a]=l(a)}for(i=0;i<r.length;i++)s[r[i]]=l(r[i]);return s}function P(e,o,l){return l[o]!=null?l[o]:e.props[o]}function ge(e,o){return A(e.children,function(l){return d.cloneElement(l,{onExited:o.bind(null,l),in:!0,appear:P(l,"appear",e),enter:P(l,"enter",e),exit:P(l,"exit",e)})})}function xe(e,o,l){var n=A(e.children),r=Ee(o,n);return Object.keys(r).forEach(function(t){var i=r[t];if(d.isValidElement(i)){var s=t in o,a=t in n,p=o[t],f=d.isValidElement(p)&&!p.props.in;a&&(!s||f)?r[t]=d.cloneElement(i,{onExited:l.bind(null,i),in:!0,exit:P(i,"exit",e),enter:P(i,"enter",e)}):!a&&s&&!f?r[t]=d.cloneElement(i,{in:!1}):a&&s&&d.isValidElement(p)&&(r[t]=d.cloneElement(i,{onExited:l.bind(null,i),in:p.props.in,exit:P(i,"exit",e),enter:P(i,"enter",e)}))}}),r}var ye=Object.values||function(e){return Object.keys(e).map(function(o){return e[o]})},be={component:"div",childFactory:function(o){return o}},L=function(e){M(o,e);function o(n,r){var t;t=e.call(this,n,r)||this;var i=t.handleExited.bind(G._assertThisInitialized(t));return t.state={contextValue:{isMounting:!0},handleExited:i,firstRender:!0},t}var l=o.prototype;return l.componentDidMount=function(){this.mounted=!0,this.setState({contextValue:{isMounting:!1}})},l.componentWillUnmount=function(){this.mounted=!1},o.getDerivedStateFromProps=function(r,t){var i=t.children,s=t.handleExited,a=t.firstRender;return{children:a?ge(r,s):xe(r,i,s),firstRender:!1}},l.handleExited=function(r,t){var i=A(this.props.children);r.key in i||(r.props.onExited&&r.props.onExited(t),this.mounted&&this.setState(function(s){var a=j._extends({},s.children);return delete a[r.key],{children:a}}))},l.render=function(){var r=this.props,t=r.component,i=r.childFactory,s=_._objectWithoutPropertiesLoose(r,["component","childFactory"]),a=this.state.contextValue,p=ye(this.state.children).map(i);return delete s.appear,delete s.enter,delete s.exit,t===null?d.createElement(R.Provider,{value:a},p):d.createElement(R.Provider,{value:a},d.createElement(t,s,p))},o}(d.Component);L.propTypes=process.env.NODE_ENV!=="production"?{component:c.PropTypes.any,children:c.PropTypes.node,appear:c.PropTypes.bool,enter:c.PropTypes.bool,exit:c.PropTypes.bool,childFactory:c.PropTypes.func}:{};L.defaultProps=be;const X=e=>{if(e.size==="small")return e.theme.typography.medium.fontSize;if(e.size==="medium")return e.theme.typography.large.fontSize;if(e.size==="large")return"1.3125rem"},Ce=e=>{if(e==="small")return"0.40625rem 0.375rem";if(e==="medium")return"0.46875rem 0.375rem";if(e==="large")return"0.53125rem 0.375rem"},H=e=>{if(e==="small")return"0.625rem 0.5rem 0.375rem 0.5rem";if(e==="medium")return"0.71875rem 0.5625rem 0.375rem 0.5625rem";if(e==="large")return"0.78125rem 0.625rem 0.375rem 0.625rem"},Te=x.styled.div`
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  border: 0.09375rem solid #bfbfbf;
  background-color: white;
  border-radius: 0.1875rem;
  width: 100%;
  transition: all 250ms ease;
`,Pe=x.styled.div`
  padding: 0.15rem;
  transition: all 250ms ease;
  display: inline-block;
`,Ne=x.styled.div`
  display: inline-block;
  margin: 0.125rem;
  flex-grow: 1;
  transition: all 250ms ease;
  width: fit-content;
  & > div {
    width: 100%;
  }
`,Se=x.styled.div`
  display: inline-block;
  box-sizing: border-box;
  margin: 0.125rem;
  margin-left: 0.25rem;
  flex-grow: 1;
  transition: all 250ms ease;
`,De=x.styled.input`
  width: 100%;
  transition: all 250ms ease;
  text-decoration: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  outline: none;
  border: none;
  padding: ${e=>Ce(e.size)};
  background-color: transparent;
  font-family: ${e=>e.theme.typography.fontFamily};
  font-size: ${e=>e.theme.typography[e.size].fontSize};
  color: ${e=>e.theme.palette[e.color].textDark};
  border-radius: 0.1875rem;
`,Oe=x.styled.div`
  display: flex;
  width: 100%;
`,$e=x.styled.div`
  padding: ${e=>H(e.size)};
  color: ${e=>e.disabled?e.theme.palette.gray[800]:e.theme.palette[e.color].main};
  font-size: ${e=>X(e)};
  background-color: whitesmoke;
  transition: all 250ms ease;
`,Re=x.styled.div`
  padding: ${e=>H(e.size)};
  color: ${e=>e.disabled?e.theme.palette.gray[800]:e.theme.palette[e.color].main};
  font-size: ${e=>X(e)};
  background-color: whitesmoke;
  transition: all 250ms ease;
  cursor: ${e=>e.disabled===!0?"default":"pointer"};
  margin-right: 0;
  margin-left: auto;
`,ke=x.styled.div`
  position: absolute;
  background-color: white;
  z-index: 1;
  margin-top: 0.25rem;
  padding: 0.1875rem;
  width: calc(100% - 0.625rem);
  border-radius: 0.15625rem;
  box-shadow: 0 0 0.375rem #bebebe;
  border: 0.125rem solid ${e=>e.theme.palette[e.color].main};
  display: flex;
  flex-direction: column;
  transition: all 250ms ease;
`,we=x.styled.div`
  font-family: ${e=>e.theme.typography.fontFamily};
  font-size: ${e=>e.theme.typography[e.size].fontSize};
  padding: 0.375rem;
  cursor: pointer;
  background-color: ${e=>e.hover?"whitesmoke":"inherit"};
  color: ${e=>e.hover?e.theme.palette[e.color].main:"inherit"};

  &:hover {
    background-color: whitesmoke;
    color: ${e=>e.theme.palette[e.color].main};
  }
`,J=e=>{const{items:o,suggestions:l,onChange:n,id:r,disabled:t,className:i,size:s,color:a}=e,[p,f]=d.useState(""),[v,E]=d.useState(!1),[b,O]=d.useState(0);let V=d.createRef();const{theme:Q}=ae.useTheme();let g={size:s,color:a,theme:Q};const Y=()=>("10000000-1000-4000-8000"+-1e11).replace(/[018]/g,u=>(u^crypto.getRandomValues(new Uint8Array(1))[0]&15>>u/4).toString(16)),Z=u=>{u.keyCode===27&&V.current.blur(),(u.keyCode===38||u.keyCode===40)&&u.preventDefault(),u.keyCode===38&&b>0&&O(b-1),u.keyCode===40&&b<l.length-1&&O(b+1),u.key==="Enter"&&l.length>0&&p&&p.length>0&&q(l[b]),u.key==="Backspace"&&o.length>0&&p===""&&F(o.length-1)},q=u=>{te({id:Y(),field:u.field,description:u.description,value:p,active:!0,dataType:u.dataType,operation:u.operation,operationDescription:u.operationDescription}),f(""),E(!1),O(0)},K=()=>{E(!1)},ee=u=>{E(!0),O(0),f(u.target.value)},F=u=>{let m=[...o].find((ie,k)=>k!==u);n(r,[...o].filter((ie,k)=>k!==u),m)},te=u=>{n(r,[...o,u],u)},ne=u=>{let m=[...o];m[u]={...m[u],active:!m[u].active},n(r,m,m[u])},re=()=>{if(v)return h.jsx(ce,{children:h.jsx(ke,{...g,children:l.map((u,m)=>d.createElement(we,{...g,key:m,onMouseDown:()=>q(u),hover:b===m},`${u.description} - ${u.operationDescription}`))})})};return h.jsxs(Te,{className:i,...g,children:[h.jsxs(Oe,{...g,children:[h.jsx($e,{...g,disabled:t,children:h.jsx("i",{className:"fas fa-search fa-fw"})}),h.jsxs(Pe,{...g,children:[h.jsx(L,{component:null,children:o.map((u,m)=>h.jsx(z,{timeout:200,classNames:"item",children:d.createElement(Ne,{...g,key:m,first:m===0,title:`${u.description} - ${u.operationDescription}:  ${u.value}`},h.jsx(oe,{...g,id:u.id,text:u.description,additionalInfo:u.value,inactive:!u.active,onRemove:()=>t?{}:F(m),onClick:()=>t?{}:ne(m),disabled:t}))},m))}),h.jsx(Se,{...g,children:h.jsx(De,{...g,ref:V,value:p,onBlur:K,onChange:ee,onKeyDown:Z,disabled:t})})]}),h.jsx(Re,{...g,disabled:t,children:h.jsx("i",{className:"fas fa-times fa-fw",onClick:()=>t?{}:n(r,[])})})]}),re()]})};J.defaultProps={id:"",disabled:!1,onChange:()=>{},items:[],suggestions:[],className:"",size:"small",color:"primary"};module.exports=J;