@leafygreen-ui/search-input - npm Package Compare versions

Comparing version 2.1.3-popover.0 to 2.1.3

CHANGELOG.md

 # @leafygreen-ui/search-input
 
-## 2.1.3-popover.0
+## 2.1.3
 
 ### Patch Changes
 
-- Updated dependencies [778fe691f]
-  - @leafygreen-ui/popover@11.2.2-popover.0
+- 2bceccb1: Fixes `lodash` imports to use default exports of specific functions to reduce component's bundle size.
+- Updated dependencies [2bceccb1]
+- Updated dependencies [2645cd50]
+  - @leafygreen-ui/hooks@8.1.1
+  - @leafygreen-ui/lib@13.2.1
+  - @leafygreen-ui/tokens@2.3.0
 
@@ -10,0 +14,0 @@ ## 2.1.2

package.json

 {
   "name": "@leafygreen-ui/search-input",
-  "version": "2.1.3-popover.0",
+  "version": "2.1.3",
   "description": "leafyGreen UI Kit Search Input",
@@ -35,11 +35,11 @@ "main": "./dist/index.js",
     "@leafygreen-ui/emotion": "^4.0.7",
-    "@leafygreen-ui/hooks": "^8.0.0",
+    "@leafygreen-ui/hooks": "^8.1.1",
     "@leafygreen-ui/icon": "^11.24.0",
     "@leafygreen-ui/icon-button": "^15.0.19",
     "@leafygreen-ui/input-option": "^1.0.13",
-    "@leafygreen-ui/lib": "^13.0.0",
+    "@leafygreen-ui/lib": "^13.2.1",
     "@leafygreen-ui/palette": "^4.0.7",
     "@leafygreen-ui/polymorphic": "^1.3.6",
-    "@leafygreen-ui/popover": "^11.2.2-popover.0",
-    "@leafygreen-ui/tokens": "^2.2.0",
+    "@leafygreen-ui/popover": "^11.1.1",
+    "@leafygreen-ui/tokens": "^2.3.0",
     "@leafygreen-ui/typography": "^18.0.0",
@@ -46,0 +46,0 @@ "lodash": "^4.17.21",

stories.js

@@ -1,1 +0,1 @@
-import e,{useContext as n,createContext as r,useMemo as t,useState as a,useRef as o,useCallback as i}from"react";import{startCase as l,kebabCase as c}from"lodash";import{css as s,cx as d,keyframes as u}from"@leafygreen-ui/emotion";import{Theme as p,createSyntheticEvent as h,isComponentType as f,getNodeTextContent as g,keyMap as m,createUniqueClassName as b,validateChildren as y,storybookArgTypes as v,storybookExcludedControlParams as w}from"@leafygreen-ui/lib";import{Overline as k,H2 as x,Body as E}from"@leafygreen-ui/typography";import S from"lodash/isUndefined";import{useAvailableSpace as C,useForwardedRef as O,useDynamicRefs as j,useControlledValue as A,useAutoScroll as N,useBackdropClick as D}from"@leafygreen-ui/hooks";import P from"@leafygreen-ui/icon/dist/MagnifyingGlass";import z from"@leafygreen-ui/icon/dist/XWithCircle";import L from"@leafygreen-ui/icon-button";import M,{useDarkMode as I}from"@leafygreen-ui/leafygreen-provider";import T from"@leafygreen-ui/popover";import{spacing as R,transitionDuration as G,typeScales as U,hoverRing as W,focusRing as B,fontFamilies as H,fontWeights as q}from"@leafygreen-ui/tokens";import{InputOption as F}from"@leafygreen-ui/input-option";import{palette as J}from"@leafygreen-ui/palette";import K from"@leafygreen-ui/icon/dist/Refresh";import{transparentize as V}from"polished";import{InferredPolymorphic as X}from"@leafygreen-ui/polymorphic";function $(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function Q(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?$(Object(r),!0).forEach((function(n){Y(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):$(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function Y(e,n,r){return(n=function(e){var n=function(e,n){if("object"!=typeof e||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,n||"default");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:String(n)}(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function Z(){return Z=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},Z.apply(this,arguments)}function _(e,n){if(null==e)return{};var r,t,a=function(e,n){if(null==e)return{};var r,t,a={},o=Object.keys(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}function ee(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function ne(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var t,a,o,i,l=[],c=!0,s=!1;try{if(o=(r=r.call(e)).next,0===n){if(Object(r)!==r)return;c=!1}else for(;!(c=(t=o.call(r)).done)&&(l.push(t.value),l.length!==n);c=!0);}catch(e){s=!0,a=e}finally{try{if(!c&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(s)throw a}}return l}}(e,n)||re(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function re(e,n){if(e){if("string"==typeof e)return te(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?te(e,n):void 0}}function te(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,t=new Array(n);r<n;r++)t[r]=e[r];return t}var ae,oe,ie,le,ce={Unset:"unset",Loading:"loading"},se="small",de="default",ue="large",pe=["children"],he=r({});function fe(n){var r=n.children,t=_(n,pe);return e.createElement(he.Provider,{value:t},r)}var ge,me,be,ye,ve,we,ke,xe,Ee,Se,Ce,Oe,je,Ae,Ne,De,Pe,ze,Le,Me,Ie,Te,Re,Ge,Ue,We,Be,He,qe,Fe,Je,Ke,Ve,Xe,$e,Qe,Ye,Ze,_e,en,nn,rn,tn,an,on,ln,cn,sn=s(ae||(ae=ee(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n  font-style: italic;\n  font-weight: 300;\n  padding-block: ","px;\n"])),R[2],R[1]),dn=(Y(le={},p.Light,s(oe||(oe=ee(["\n    color: ",";\n  "])),J.gray.dark1)),Y(le,p.Dark,s(ie||(ie=ee(["\n    color: ",";\n  "])),J.gray.light1)),le),un=function(){var n=I().theme;return e.createElement(F,{"aria-label":"No results found",isInteractive:!1,className:d(sn,dn[n])},e.createElement("span",null,"No results found"))},pn=s(ge||(ge=ee(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n  padding-block: ","px;\n"])),R[2],R[1]),hn=u(me||(me=ee(["\n  from {\n    transform: rotate(0deg);\n  } \n  to {\n    transform: rotate(360deg);\n  }\n"]))),fn=s(be||(be=ee(["\n  height: 16px;\n  width: 16px;\n  animation: "," 1.5s linear infinite;\n"])),hn),gn=function(){var n=I().darkMode;return e.createElement(F,{"data-testid":"lg-search-input-loading-option","aria-label":"Loading results",isInteractive:!1,className:pn},e.createElement(K,{color:n?J.blue.light1:J.blue.base,className:fn}),e.createElement("span",null,"Loading results"))},mn=s(ye||(ye=ee(["\n  box-shadow: 0px 4px 7px ",";\n  padding: 12px 0;\n  border-radius: 12px;\n"])),V(.75,"#000000")),bn=(Y(ke={},p.Light,s(ve||(ve=ee(["\n    background-color: ",";\n    border: 1px solid ",";\n  "])),J.white,J.gray.light2)),Y(ke,p.Dark,s(we||(we=ee(["\n    background-color: ",";\n    border: 1px solid ",";\n  "])),J.gray.dark3,J.gray.dark2)),ke),yn=s(xe||(xe=ee(["\n  padding: 0;\n  margin: 0;\n  border-radius: inherit;\n  overflow-y: auto;\n  scroll-behavior: smooth;\n"]))),vn=["children","open","refEl","usePortal","portalClassName","portalContainer","scrollContainer","footerSlot"],wn=e.forwardRef((function(r,a){var o=r.children,i=r.open,l=void 0!==i&&i,c=r.refEl,u=r.usePortal,p=r.portalClassName,h=r.portalContainer,f=r.scrollContainer,g=r.footerSlot,m=_(r,vn),b=I().theme,y=n(he).state,v=t((function(){var e,n;return null!==(e=null===(n=c.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0}),[c,l]),w=C(c),k=S(w)?"unset":"".concat(Math.min(w,256),"px");return e.createElement(T,{"data-testid":"lg-search-input-popover",spacing:R[2],active:l,align:"bottom",justify:"start",className:d(mn,bn[b],s(Ee||(Ee=ee(["\n            width: ","px;\n            min-width: ","px;\n          "])),v,v)),refEl:c,usePortal:u,portalClassName:u?p:void 0,portalContainer:u?h:null,scrollContainer:u?f:null},"loading"===y?e.createElement(gn,null):e.createElement(e.Fragment,null,e.createElement("ul",Z({role:"listbox","aria-live":"polite","aria-relevant":"additions removals","aria-expanded":l,ref:a,className:d(yn,s(Se||(Se=ee(["\n                  max-height: ",";\n                "])),k))},m),e.Children.count(o)?o:e.createElement(un,null)),g))}));wn.displayName="SearchResultsMenu";var kn=function(e){return"0 0 0 100px ".concat(e," inset")},xn=s(Ce||(Ce=ee(["\n  outline: none;\n"]))),En=s(Oe||(Oe=ee(["\n  position: relative;\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  justify-items: center;\n  border: 1px solid;\n  border-radius: 6px;\n  z-index: 0;\n  transition: ","ms ease-in-out;\n  transition-property: border-color, box-shadow;\n"])),G.default),Sn=(Y(De={},se,s(je||(je=ee(["\n    font-size: ","px;\n    line-height: ","px;\n    height: 28px;\n    grid-template-columns: 28px 1fr;\n    grid-auto-columns: 28px;\n  "])),U.body1.fontSize,U.body1.lineHeight)),Y(De,de,s(Ae||(Ae=ee(["\n    font-size: ","px;\n    line-height: ","px;\n    height: 36px;\n    grid-template-columns: 36px 1fr;\n    grid-auto-columns: 36px;\n  "])),U.body1.fontSize,U.body1.lineHeight)),Y(De,ue,s(Ne||(Ne=ee(["\n    font-size: 18px;\n    line-height: 32px;\n    height: 48px;\n    grid-template-columns: 48px 1fr;\n    grid-auto-columns: 48px;\n  "])))),De),Cn=(Y(Le={},p.Light,s(Pe||(Pe=ee(["\n    color: ",";\n    background: ",";\n    border-color: ",";\n  "])),J.black,J.white,J.gray.base)),Y(Le,p.Dark,s(ze||(ze=ee(["\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n  "])),J.gray.light2,J.gray.dark4,J.gray.base)),Le),On=(Y(Te={},p.Light,s(Me||(Me=ee(["\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus-within) {\n        box-shadow: ",";\n      }\n    }\n  "])),W.light.gray)),Y(Te,p.Dark,s(Ie||(Ie=ee(["\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus-within) {\n        box-shadow: ",";\n      }\n    }\n  "])),W.dark.gray)),Te),jn=(Y(Ue={},p.Light,s(Re||(Re=ee(["\n    &:not(:disabled):focus-within {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),B.light.input,J.white)),Y(Ue,p.Dark,s(Ge||(Ge=ee(["\n    &:not(:disabled):focus-within {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),B.dark.input,J.gray.dark4)),Ue),An=(Y(He={},p.Light,s(We||(We=ee(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n  "])),J.gray.base,J.gray.light2,J.gray.light1)),Y(He,p.Dark,s(Be||(Be=ee(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n  "])),J.gray.dark2,J.gray.dark3,J.gray.dark2)),He),Nn=s(qe||(qe=ee(["\n  font-size: inherit;\n  line-height: inherit;\n  color: inherit;\n  background-color: inherit;\n  font-family: ",";\n  width: 100%;\n  height: 1.5em;\n  font-weight: ",";\n  z-index: 1;\n  outline: none;\n  border: none;\n  padding: 0;\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n\n    &:hover,\n    &:active {\n      box-shadow: none;\n    }\n  }\n\n  &::placeholder {\n    font-size: inherit;\n    line-height: inherit;\n  }\n  &::-ms-clear,\n  &::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    display: none;\n  }\n"])),H.default,q.regular),Dn=(Y(Ke={},p.Light,s(Fe||(Fe=ee(["\n    &:-webkit-autofill {\n      color: inherit;\n      background: transparent;\n      border: none;\n      -webkit-text-fill-color: inherit;\n\n      &[aria-disabled='false'] {\n        box-shadow: ",";\n\n        &:focus {\n          box-shadow: ",",\n            ",";\n        }\n\n        &:hover:not(:focus) {\n          box-shadow: ",",\n            ",";\n        }\n      }\n    }\n\n    &::placeholder {\n      color: ",";\n      font-weight: ",";\n    }\n\n    &[aria-disabled='true'] {\n      &::placeholder {\n        color: ",";\n      }\n\n      &:-webkit-autofill {\n        &,\n        &:hover,\n        &:focus {\n          appearance: none;\n          border: 1px solid ",";\n          -webkit-text-fill-color: ",";\n          box-shadow: ",";\n        }\n      }\n    }\n  "])),kn(J.white),kn(J.white),B.light.input,kn(J.white),W.light.gray,J.gray.base,q.regular,J.gray.base,J.gray.base,J.gray.base,kn(J.gray.light2))),Y(Ke,p.Dark,s(Je||(Je=ee(["\n    &:-webkit-autofill {\n      color: inherit;\n      background: transparent;\n      border: none;\n      -webkit-text-fill-color: ",";\n      &[aria-disabled='false'] {\n        box-shadow: ",";\n\n        &:focus {\n          box-shadow: ",",\n            ",";\n          border-color: ",";\n        }\n\n        &:hover:not(:focus) {\n          box-shadow: ",",\n            ",";\n        }\n      }\n    }\n\n    &::placeholder {\n      color: ",";\n      font-weight: ",";\n    }\n\n    &[aria-disabled='true'] {\n      &::placeholder {\n        color: ",";\n      }\n\n      &:-webkit-autofill {\n        &,\n        &:hover,\n        &:focus {\n          appearance: none;\n          border: 1px solid ",";\n          -webkit-text-fill-color: ",";\n          box-shadow: ",";\n        }\n      }\n    }\n  "])),J.gray.light3,kn(J.gray.dark4),kn(J.gray.dark4),B.dark.input,J.blue.light1,kn(J.gray.dark4),W.dark.gray,J.gray.base,q.regular,J.gray.dark1,J.gray.dark1,J.gray.dark1,kn(J.gray.dark2))),Ke),Pn=(Y($e={},p.Light,s(Ve||(Ve=ee(["\n    color: ",";\n  "])),J.gray.dark1)),Y($e,p.Dark,s(Xe||(Xe=ee(["\n    color: ",";\n  "])),J.gray.light1)),$e),zn=(Y(_e={},se,s(Qe||(Qe=ee(["\n    left: 10px;\n  "])))),Y(_e,de,s(Ye||(Ye=ee(["\n    left: 12px;\n  "])))),Y(_e,ue,s(Ze||(Ze=ee(["\n    left: 16px;\n  "])))),_e),Ln=(Y(rn={},p.Light,s(en||(en=ee(["\n    color: ",";\n  "])),J.gray.base)),Y(rn,p.Dark,s(nn||(nn=ee(["\n    color: ",";\n  "])),J.gray.dark1)),rn);s(tn||(tn=ee([""])));var Mn,In,Tn,Rn,Gn,Un,Wn,Bn,Hn=(Y(cn={},se,s(an||(an=ee(["\n    height: 26px;\n    width: 26px;\n  "])))),Y(cn,de,s(on||(on=ee(["\n    height: 28px;\n    width: 28px;\n  "])))),Y(cn,ue,s(ln||(ln=ee(["\n    height: 28px;\n    width: 28px;\n  "])))),cn),qn=["placeholder","className","darkMode","size","disabled","children","state","value","onChange","onSubmit","aria-label","aria-labelledby"],Fn=e.forwardRef((function(n,r){var l,c=n.placeholder,s=void 0===c?"Search":c,u=n.className,p=n.darkMode,b=n.size,y=void 0===b?de:b,v=n.disabled,w=n.children,k=n.state,x=void 0===k?ce.Unset:k,E=n.value,C=n.onChange,T=n.onSubmit,R=n["aria-label"],G=n["aria-labelledby"],U=_(n,qn),W=I(p),B=W.theme,H=W.darkMode,q=ne(a(!1),2),F=q[0],J=q[1],K=ne(a(0),2),V=K[0],X=K[1],$=function(){return J(!1)},ee=function(){return J(!0)},re=o(null),te=o(null),ae=o(null),oe=O(r,null),ie=o(null),le=j({prefix:"result"}),se=ne(a(),2),ue=se[0],pe=se[1],he=le("".concat(V)),ge=!S(w),me=A(E,C),be=me.value,ye=me.handleChange,ve=i((function(e){oe.current&&(oe.current.value=e,ye(h(new Event("change",{cancelable:!0,bubbles:!0}),oe.current)))}),[ye,oe]),we=i((function(){var n=0,r=e.Children.map(w,(function r(t){if(f(t,"SearchResult")){var a,o=(n+=1)-1,i=g(t);return e.cloneElement(t,Q(Q({},t.props),{},{id:"result-".concat(o),key:"result-".concat(o),ref:null!==(a=t.props.ref)&&void 0!==a?a:null==le?void 0:le("".concat(o)),highlighted:o===V,onClick:function(e){var n,r;if(null===(n=(r=t.props).onClick)||void 0===n||n.call(r,e),ve(i),e.detail>=1&&re.current&&oe.current){var a,o=new Event("submit",{cancelable:!0,bubbles:!0});null===(a=re.current)||void 0===a||a.dispatchEvent(o)}}}))}if(f(t,"SearchResultGroup")){var l=e.Children.map(t.props.children,r);if(l&&l.length>0)return e.cloneElement(t,Q(Q({},t.props),{},{children:l}))}}));return{resultsCount:n,updatedChildren:r}}),[w,V,oe,le,ve]),ke=t((function(){return we()}),[we]),xe=ke.updatedChildren,Ee=ke.resultsCount,Se=function(e){switch(e){case"first":X(0);break;case"last":X(Ee);break;case"next":var n=!S(V)&&V+1<Ee?V+1:0;X(n);break;case"prev":var r=!S(V)&&V-1>=0?V-1:Ee-1;X(r)}};return N(he,ae,12),D((function(){$()}),[te,ae],F&&ge),e.createElement(M,{darkMode:H},e.createElement(fe,{state:x,highlight:V,resultDynamicRefs:le},e.createElement("form",Z({role:"search",ref:re,className:d(xn,u),onSubmit:function(e){e.preventDefault(),null==T||T(e),ge&&($(),ve(""))}},U),e.createElement("div",{ref:te,role:"searchbox",tabIndex:-1,onMouseDown:function(e){v&&e.preventDefault()},onClick:function(e){!function(e){v?(e.preventDefault(),e.stopPropagation()):ee()}(e)},onFocus:function(e){var n,r=e.target,t=r===ie.current?ie.current:null!==(n=oe.current)&&void 0!==n?n:r;t.focus(),pe(t)},onKeyDown:function(e){var n,r,t=null===(n=ae.current)||void 0===n?void 0:n.contains(document.activeElement);if((null===(r=te.current)||void 0===r?void 0:r.contains(document.activeElement))||t)switch(e.key){case m.Enter:var a;null==he||null===(a=he.current)||void 0===a||a.click();break;case m.Escape:var o;$(),null===(o=oe.current)||void 0===o||o.focus();break;case m.ArrowDown:var i;if(ge)null===(i=oe.current)||void 0===i||i.focus(),ee(),e.preventDefault(),Se("next");break;case m.ArrowUp:var l;if(ge)null===(l=oe.current)||void 0===l||l.focus(),ee(),e.preventDefault(),Se("prev");break;case m.Tab:F&&$();break;default:ge&&ee()}},className:d(En,Sn[y],Cn[B],(l={},Y(l,jn[B],ue===oe.current),Y(l,An[B],v),Y(l,On[B],!v),l)),"aria-label":R,"aria-labelledby":G},e.createElement(P,{className:d(Pn[B],zn[y],Y({},Ln[B],v)),role:"presentation"}),e.createElement("input",{type:"search",className:d(Nn,Dn[B]),value:be,onChange:function(e){null==ye||ye(e)},placeholder:s,ref:oe,readOnly:v,"aria-disabled":v}),be&&e.createElement(L,{ref:ie,type:"button","aria-label":"Clear search",onClick:function(e){var n;e.stopPropagation(),ve(""),null==oe||null===(n=oe.current)||void 0===n||n.focus()},className:Hn[y],tabIndex:v?-1:0,disabled:v},e.createElement(z,null))),ge&&e.createElement(wn,{open:F,refEl:te,ref:ae},xe))))}));Fn.displayName="SearchInput";var Jn,Kn,Vn,Xn,$n=b("search-result-title"),Qn=b("search-result-description"),Yn=s(Mn||(Mn=ee(["\n  display: block;\n  font-family: ",";\n  font-size: ","px;\n  line-height: ","px;\n  padding: ","px ","px;\n\n  & ."," {\n    font-weight: ",";\n  }\n"])),H.default,U.body1.fontSize,R[3],R[1],R[3],$n,q.bold),Zn=(Y(Rn={},p.Light,s(In||(In=ee(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),$n,J.black,Qn,J.gray.dark1)),Y(Rn,p.Dark,s(Tn||(Tn=ee(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),$n,J.gray.light2,Qn,J.gray.light1)),Rn),_n=(Y(Wn={},p.Light,s(Gn||(Gn=ee(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),$n,J.gray.light1,Qn,J.gray.light1)),Y(Wn,p.Dark,s(Un||(Un=ee(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),$n,J.gray.dark1,Qn,J.gray.dark1)),Wn),er=s(Bn||(Bn=ee(["\n  max-height: ","px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])),3*R[3]),nr=["as","children","description","disabled","className","darkMode"],rr=X((function(n,r){var t,a=n.as,o=void 0===a?"li":a,i=n.children,l=n.description,c=n.disabled,s=n.className,u=n.darkMode,p=_(n,nr),h=I(u).theme,f=g(i),m=null!==(t=p["aria-label"])&&void 0!==t?t:p["aria-labelledby"]?"":f;return e.createElement(F,Z({},p,{as:o,ref:r,className:d(Yn,Zn[h],Y({},_n[h],c),s),disabled:c,"aria-labelledby":p["aria-labelledby"],"aria-label":m}),e.createElement("div",{className:$n},i),l&&e.createElement("div",{className:d(Qn,er)},l))}),"SearchResult");rr.displayName="SearchResult";var tr,ar,or,ir,lr=s(Jn||(Jn=ee(["\n  padding-top: 12px;\n  padding-bottom: 0;\n"]))),cr=(Y(Xn={},p.Light,s(Kn||(Kn=ee(["\n    color: ",";\n  "])),J.gray.dark1)),Y(Xn,p.Dark,s(Vn||(Vn=ee(["\n    color: ",";\n  "])),J.gray.base)),Xn),sr=["children","label"],dr=function(n){var r=n.children,t=n.label,a=_(n,sr),o=y(r,["SearchResult","SearchResultGroup"]),i=I().theme;return e.createElement("div",null,e.createElement(F,Z({"aria-label":t,isInteractive:!1,className:lr},a),e.createElement(k,{className:cr[i]},t)),o)};dr.displayName="SearchResultGroup";var ur,pr={title:"Components/SearchInput",component:Fn,parameters:{default:"LiveExample",controls:{exclude:[].concat((ur=w,function(e){if(Array.isArray(e))return te(e)}(ur)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(ur)||re(ur)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),["value","id","showWedge","onSubmit"])},generate:{combineArgs:{darkMode:[!1,!0],disabled:[!1,!0]}}},argTypes:{darkMode:v.darkMode,state:{control:"select",options:Object.values(ce)},placeholder:{control:"text"},disabled:{control:"boolean"}}},hr=[{name:"apple",description:"A round fruit which typically has thin red or green skin and crisp flesh"},{name:"banana",description:" Along curved fruit which grows in clusters"},{name:"carrot",description:"A tapering orange-colored root eaten as a vegetable"},{name:"dragonfruit",description:"The fruit of a pitahaya cactus, with leathery red, pink, or yellow skin "},{name:"eggplant",description:"The purple egg-shaped fruit of a tropical Old World plant"},{name:"fig",description:"A soft pear-shaped fruit with sweet dark flesh and many small seeds"},{name:"grape",description:"A berry, typically green, purple, red, or black, growing in clusters on a vine"},{name:"honeydew",description:"A melon of a variety with smooth pale skin and sweet green flesh"},{name:"iceberg-lettuce",description:"A lettuce of a variety having a dense round head of crisp pale leaves."},{name:"jalapeño",description:"A very hot green chili pepper, used especially in Mexican-style cooking"},{name:"kiwi",description:"A fruit with a thin hairy skin, green flesh, and black seeds"},{name:"lemon",description:"A yellow, oval citrus fruit with thick skin and fragrant, acidic juice:"},{name:"melon",description:"The large round fruit of a plant of the gourd family, with sweet pulpy flesh and many seeds"},{name:"nectarine",description:"A peach of a variety with smooth, thin, brightly colored skin and rich firm flesh."},{name:"orange",description:"A round juicy citrus fruit with a tough bright reddish-yellow rind"},{name:"pomegranate",description:"An orange-sized fruit with a tough reddish outer skin and sweet red gelatinous flesh containing many seeds"},{name:"quince",description:"A hard, acid pear-shaped fruit used in preserves or as flavoring"},{name:"raspberry",description:"An edible soft fruit related to the blackberry, consisting of a cluster of reddish-pink drupelets"},{name:"strawberry",description:"A sweet soft red fruit with a seed-studded surface"},{name:"tomato",description:"A glossy red, or occasionally yellow, pulpy edible fruit that is eaten as a vegetable or in salad"},{name:"ugli-fruit",description:"A mottled green and yellow citrus fruit which is a hybrid of a grapefruit and a tangerine"},{name:"vanilla",description:"A tropical climbing orchid that has fragrant flowers and long podlike fruit"},{name:"watermelon",description:"The large fruit of a plant of the gourd family, with smooth green skin, red pulp, and watery juice"},{name:"ximenia",description:"Can be eaten raw and can be used to make juice, jams or intoxicating drinks"},{name:"yam",description:"The edible starchy tuber of a climbing plant that is widely grown in tropical and subtropical countries"},{name:"zucchini",description:"A green variety of smooth-skinned summer squash"}],fr=function(n){var r=ne(a(),2),t=r[0],o=r[1],i=ne(a(hr),2),d=i[0],u=i[1];return e.createElement("div",{className:s(tr||(tr=ee(["\n        width: 256px;\n      "])))},e.createElement(Fn,Z({"aria-label":"Item",onChange:function(e){var r,t=e.target.value;console.log("Storybook: handleChange",{value:t}),null===(r=n.onChange)||void 0===r||r.call(n,e),u(hr.filter((function(e){return e.name.includes(c(t))})))},onSubmit:function(e){var r,t=e.target[0].value;null===(r=n.onSelect)||void 0===r||r.call(n,e),console.log("Storybook: handleSelect",{value:t}),o(hr.find((function(e){return c(e.name)===c(t)})))}},n),d.map((function(n){return e.createElement(rr,{key:n.name,description:n.description,onClick:function(){return console.log("Storybook: Clicked",n.name)}},l(n.name))}))),t&&e.createElement("div",{className:s(ar||(ar=ee(["\n            min-width: min-content;\n            margin-block: 20px;\n            padding: 20px;\n            outline: 1px solid green;\n          "])))},e.createElement(x,null,l(t.name)),e.createElement(E,null,t.description)))};fr.parameters={chromatic:{disableSnapshot:!0}},fr.argTypes={onChange:{action:"Change"},onSubmit:{action:"Submit"},onClick:{action:"Click"}};var gr=function(n){return e.createElement(Fn,Z({className:s(or||(or=ee(["\n      width: 200px;\n    "])))},n))};gr.parameters={chromatic:{disableSnapshot:!0}};var mr=function(n){return e.createElement(Fn,Z({className:s(ir||(ir=ee(["\n      width: 200px;\n    "]))),onChange:function(){console.log("SB: Change")}},n),e.createElement(rr,{onClick:function(){console.log("SB: Click Apple")},description:"This is a description"},"Apple"),e.createElement(rr,null,"Banana"),e.createElement(rr,{as:"a",href:"#",description:"This is a link"},"Carrot"),e.createElement(rr,{description:"This is a very very long description. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."},"Dragonfruit"),e.createElement(dr,{label:"Peppers"},e.createElement(rr,{description:"A moderately hot chili pepper used to flavor dishes"},"Cayenne"),e.createElement(rr,null,"Ghost pepper"),e.createElement(rr,null,"Habanero"),e.createElement(rr,null,"Jalapeño"),e.createElement(rr,null,"Red pepper"),e.createElement(rr,null,"Scotch bonnet")))};mr.parameters={chromatic:{disableSnapshot:!0}};var br=function(){};export{gr as Basic,br as Generated,fr as LiveExample,mr as WithResults,pr as default};
+import e,{useContext as n,createContext as r,useMemo as t,useState as a,useRef as o,useCallback as i}from"react";import l from"lodash/kebabCase";import c from"lodash/startCase";import{css as s,cx as d,keyframes as u}from"@leafygreen-ui/emotion";import{Theme as p,createSyntheticEvent as h,isComponentType as f,getNodeTextContent as g,keyMap as m,createUniqueClassName as b,validateChildren as y,storybookArgTypes as v,storybookExcludedControlParams as w}from"@leafygreen-ui/lib";import{Overline as k,H2 as x,Body as E}from"@leafygreen-ui/typography";import S from"lodash/isUndefined";import{useAvailableSpace as C,useForwardedRef as O,useDynamicRefs as j,useControlledValue as A,useAutoScroll as N,useBackdropClick as D}from"@leafygreen-ui/hooks";import P from"@leafygreen-ui/icon/dist/MagnifyingGlass";import z from"@leafygreen-ui/icon/dist/XWithCircle";import L from"@leafygreen-ui/icon-button";import M,{useDarkMode as I}from"@leafygreen-ui/leafygreen-provider";import T from"@leafygreen-ui/popover";import{spacing as R,transitionDuration as G,typeScales as U,hoverRing as W,focusRing as B,fontFamilies as H,fontWeights as q}from"@leafygreen-ui/tokens";import{InputOption as F}from"@leafygreen-ui/input-option";import{palette as J}from"@leafygreen-ui/palette";import K from"@leafygreen-ui/icon/dist/Refresh";import{transparentize as V}from"polished";import{InferredPolymorphic as X}from"@leafygreen-ui/polymorphic";function $(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function Q(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?$(Object(r),!0).forEach((function(n){Y(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):$(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function Y(e,n,r){return(n=function(e){var n=function(e,n){if("object"!=typeof e||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,n||"default");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:String(n)}(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function Z(){return Z=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},Z.apply(this,arguments)}function _(e,n){if(null==e)return{};var r,t,a=function(e,n){if(null==e)return{};var r,t,a={},o=Object.keys(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}function ee(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function ne(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var t,a,o,i,l=[],c=!0,s=!1;try{if(o=(r=r.call(e)).next,0===n){if(Object(r)!==r)return;c=!1}else for(;!(c=(t=o.call(r)).done)&&(l.push(t.value),l.length!==n);c=!0);}catch(e){s=!0,a=e}finally{try{if(!c&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(s)throw a}}return l}}(e,n)||re(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function re(e,n){if(e){if("string"==typeof e)return te(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?te(e,n):void 0}}function te(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,t=new Array(n);r<n;r++)t[r]=e[r];return t}var ae,oe,ie,le,ce={Unset:"unset",Loading:"loading"},se="small",de="default",ue="large",pe=["children"],he=r({});function fe(n){var r=n.children,t=_(n,pe);return e.createElement(he.Provider,{value:t},r)}var ge,me,be,ye,ve,we,ke,xe,Ee,Se,Ce,Oe,je,Ae,Ne,De,Pe,ze,Le,Me,Ie,Te,Re,Ge,Ue,We,Be,He,qe,Fe,Je,Ke,Ve,Xe,$e,Qe,Ye,Ze,_e,en,nn,rn,tn,an,on,ln,cn,sn=s(ae||(ae=ee(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n  font-style: italic;\n  font-weight: 300;\n  padding-block: ","px;\n"])),R[2],R[1]),dn=(Y(le={},p.Light,s(oe||(oe=ee(["\n    color: ",";\n  "])),J.gray.dark1)),Y(le,p.Dark,s(ie||(ie=ee(["\n    color: ",";\n  "])),J.gray.light1)),le),un=function(){var n=I().theme;return e.createElement(F,{"aria-label":"No results found",isInteractive:!1,className:d(sn,dn[n])},e.createElement("span",null,"No results found"))},pn=s(ge||(ge=ee(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n  padding-block: ","px;\n"])),R[2],R[1]),hn=u(me||(me=ee(["\n  from {\n    transform: rotate(0deg);\n  } \n  to {\n    transform: rotate(360deg);\n  }\n"]))),fn=s(be||(be=ee(["\n  height: 16px;\n  width: 16px;\n  animation: "," 1.5s linear infinite;\n"])),hn),gn=function(){var n=I().darkMode;return e.createElement(F,{"data-testid":"lg-search-input-loading-option","aria-label":"Loading results",isInteractive:!1,className:pn},e.createElement(K,{color:n?J.blue.light1:J.blue.base,className:fn}),e.createElement("span",null,"Loading results"))},mn=s(ye||(ye=ee(["\n  box-shadow: 0px 4px 7px ",";\n  padding: 12px 0;\n  border-radius: 12px;\n"])),V(.75,"#000000")),bn=(Y(ke={},p.Light,s(ve||(ve=ee(["\n    background-color: ",";\n    border: 1px solid ",";\n  "])),J.white,J.gray.light2)),Y(ke,p.Dark,s(we||(we=ee(["\n    background-color: ",";\n    border: 1px solid ",";\n  "])),J.gray.dark3,J.gray.dark2)),ke),yn=s(xe||(xe=ee(["\n  padding: 0;\n  margin: 0;\n  border-radius: inherit;\n  overflow-y: auto;\n  scroll-behavior: smooth;\n"]))),vn=["children","open","refEl","usePortal","portalClassName","portalContainer","scrollContainer","footerSlot"],wn=e.forwardRef((function(r,a){var o=r.children,i=r.open,l=void 0!==i&&i,c=r.refEl,u=r.usePortal,p=r.portalClassName,h=r.portalContainer,f=r.scrollContainer,g=r.footerSlot,m=_(r,vn),b=I().theme,y=n(he).state,v=t((function(){var e,n;return null!==(e=null===(n=c.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0}),[c,l]),w=C(c),k=S(w)?"unset":"".concat(Math.min(w,256),"px");return e.createElement(T,{"data-testid":"lg-search-input-popover",spacing:R[2],active:l,align:"bottom",justify:"start",className:d(mn,bn[b],s(Ee||(Ee=ee(["\n            width: ","px;\n            min-width: ","px;\n          "])),v,v)),refEl:c,usePortal:u,portalClassName:u?p:void 0,portalContainer:u?h:null,scrollContainer:u?f:null},"loading"===y?e.createElement(gn,null):e.createElement(e.Fragment,null,e.createElement("ul",Z({role:"listbox","aria-live":"polite","aria-relevant":"additions removals","aria-expanded":l,ref:a,className:d(yn,s(Se||(Se=ee(["\n                  max-height: ",";\n                "])),k))},m),e.Children.count(o)?o:e.createElement(un,null)),g))}));wn.displayName="SearchResultsMenu";var kn=function(e){return"0 0 0 100px ".concat(e," inset")},xn=s(Ce||(Ce=ee(["\n  outline: none;\n"]))),En=s(Oe||(Oe=ee(["\n  position: relative;\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  justify-items: center;\n  border: 1px solid;\n  border-radius: 6px;\n  z-index: 0;\n  transition: ","ms ease-in-out;\n  transition-property: border-color, box-shadow;\n"])),G.default),Sn=(Y(De={},se,s(je||(je=ee(["\n    font-size: ","px;\n    line-height: ","px;\n    height: 28px;\n    grid-template-columns: 28px 1fr;\n    grid-auto-columns: 28px;\n  "])),U.body1.fontSize,U.body1.lineHeight)),Y(De,de,s(Ae||(Ae=ee(["\n    font-size: ","px;\n    line-height: ","px;\n    height: 36px;\n    grid-template-columns: 36px 1fr;\n    grid-auto-columns: 36px;\n  "])),U.body1.fontSize,U.body1.lineHeight)),Y(De,ue,s(Ne||(Ne=ee(["\n    font-size: 18px;\n    line-height: 32px;\n    height: 48px;\n    grid-template-columns: 48px 1fr;\n    grid-auto-columns: 48px;\n  "])))),De),Cn=(Y(Le={},p.Light,s(Pe||(Pe=ee(["\n    color: ",";\n    background: ",";\n    border-color: ",";\n  "])),J.black,J.white,J.gray.base)),Y(Le,p.Dark,s(ze||(ze=ee(["\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n  "])),J.gray.light2,J.gray.dark4,J.gray.base)),Le),On=(Y(Te={},p.Light,s(Me||(Me=ee(["\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus-within) {\n        box-shadow: ",";\n      }\n    }\n  "])),W.light.gray)),Y(Te,p.Dark,s(Ie||(Ie=ee(["\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus-within) {\n        box-shadow: ",";\n      }\n    }\n  "])),W.dark.gray)),Te),jn=(Y(Ue={},p.Light,s(Re||(Re=ee(["\n    &:not(:disabled):focus-within {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),B.light.input,J.white)),Y(Ue,p.Dark,s(Ge||(Ge=ee(["\n    &:not(:disabled):focus-within {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),B.dark.input,J.gray.dark4)),Ue),An=(Y(He={},p.Light,s(We||(We=ee(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n  "])),J.gray.base,J.gray.light2,J.gray.light1)),Y(He,p.Dark,s(Be||(Be=ee(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n  "])),J.gray.dark2,J.gray.dark3,J.gray.dark2)),He),Nn=s(qe||(qe=ee(["\n  font-size: inherit;\n  line-height: inherit;\n  color: inherit;\n  background-color: inherit;\n  font-family: ",";\n  width: 100%;\n  height: 1.5em;\n  font-weight: ",";\n  z-index: 1;\n  outline: none;\n  border: none;\n  padding: 0;\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n\n    &:hover,\n    &:active {\n      box-shadow: none;\n    }\n  }\n\n  &::placeholder {\n    font-size: inherit;\n    line-height: inherit;\n  }\n  &::-ms-clear,\n  &::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    display: none;\n  }\n"])),H.default,q.regular),Dn=(Y(Ke={},p.Light,s(Fe||(Fe=ee(["\n    &:-webkit-autofill {\n      color: inherit;\n      background: transparent;\n      border: none;\n      -webkit-text-fill-color: inherit;\n\n      &[aria-disabled='false'] {\n        box-shadow: ",";\n\n        &:focus {\n          box-shadow: ",",\n            ",";\n        }\n\n        &:hover:not(:focus) {\n          box-shadow: ",",\n            ",";\n        }\n      }\n    }\n\n    &::placeholder {\n      color: ",";\n      font-weight: ",";\n    }\n\n    &[aria-disabled='true'] {\n      &::placeholder {\n        color: ",";\n      }\n\n      &:-webkit-autofill {\n        &,\n        &:hover,\n        &:focus {\n          appearance: none;\n          border: 1px solid ",";\n          -webkit-text-fill-color: ",";\n          box-shadow: ",";\n        }\n      }\n    }\n  "])),kn(J.white),kn(J.white),B.light.input,kn(J.white),W.light.gray,J.gray.base,q.regular,J.gray.base,J.gray.base,J.gray.base,kn(J.gray.light2))),Y(Ke,p.Dark,s(Je||(Je=ee(["\n    &:-webkit-autofill {\n      color: inherit;\n      background: transparent;\n      border: none;\n      -webkit-text-fill-color: ",";\n      &[aria-disabled='false'] {\n        box-shadow: ",";\n\n        &:focus {\n          box-shadow: ",",\n            ",";\n          border-color: ",";\n        }\n\n        &:hover:not(:focus) {\n          box-shadow: ",",\n            ",";\n        }\n      }\n    }\n\n    &::placeholder {\n      color: ",";\n      font-weight: ",";\n    }\n\n    &[aria-disabled='true'] {\n      &::placeholder {\n        color: ",";\n      }\n\n      &:-webkit-autofill {\n        &,\n        &:hover,\n        &:focus {\n          appearance: none;\n          border: 1px solid ",";\n          -webkit-text-fill-color: ",";\n          box-shadow: ",";\n        }\n      }\n    }\n  "])),J.gray.light3,kn(J.gray.dark4),kn(J.gray.dark4),B.dark.input,J.blue.light1,kn(J.gray.dark4),W.dark.gray,J.gray.base,q.regular,J.gray.dark1,J.gray.dark1,J.gray.dark1,kn(J.gray.dark2))),Ke),Pn=(Y($e={},p.Light,s(Ve||(Ve=ee(["\n    color: ",";\n  "])),J.gray.dark1)),Y($e,p.Dark,s(Xe||(Xe=ee(["\n    color: ",";\n  "])),J.gray.light1)),$e),zn=(Y(_e={},se,s(Qe||(Qe=ee(["\n    left: 10px;\n  "])))),Y(_e,de,s(Ye||(Ye=ee(["\n    left: 12px;\n  "])))),Y(_e,ue,s(Ze||(Ze=ee(["\n    left: 16px;\n  "])))),_e),Ln=(Y(rn={},p.Light,s(en||(en=ee(["\n    color: ",";\n  "])),J.gray.base)),Y(rn,p.Dark,s(nn||(nn=ee(["\n    color: ",";\n  "])),J.gray.dark1)),rn);s(tn||(tn=ee([""])));var Mn,In,Tn,Rn,Gn,Un,Wn,Bn,Hn=(Y(cn={},se,s(an||(an=ee(["\n    height: 26px;\n    width: 26px;\n  "])))),Y(cn,de,s(on||(on=ee(["\n    height: 28px;\n    width: 28px;\n  "])))),Y(cn,ue,s(ln||(ln=ee(["\n    height: 28px;\n    width: 28px;\n  "])))),cn),qn=["placeholder","className","darkMode","size","disabled","children","state","value","onChange","onSubmit","aria-label","aria-labelledby"],Fn=e.forwardRef((function(n,r){var l,c=n.placeholder,s=void 0===c?"Search":c,u=n.className,p=n.darkMode,b=n.size,y=void 0===b?de:b,v=n.disabled,w=n.children,k=n.state,x=void 0===k?ce.Unset:k,E=n.value,C=n.onChange,T=n.onSubmit,R=n["aria-label"],G=n["aria-labelledby"],U=_(n,qn),W=I(p),B=W.theme,H=W.darkMode,q=ne(a(!1),2),F=q[0],J=q[1],K=ne(a(0),2),V=K[0],X=K[1],$=function(){return J(!1)},ee=function(){return J(!0)},re=o(null),te=o(null),ae=o(null),oe=O(r,null),ie=o(null),le=j({prefix:"result"}),se=ne(a(),2),ue=se[0],pe=se[1],he=le("".concat(V)),ge=!S(w),me=A(E,C),be=me.value,ye=me.handleChange,ve=i((function(e){oe.current&&(oe.current.value=e,ye(h(new Event("change",{cancelable:!0,bubbles:!0}),oe.current)))}),[ye,oe]),we=i((function(){var n=0,r=e.Children.map(w,(function r(t){if(f(t,"SearchResult")){var a,o=(n+=1)-1,i=g(t);return e.cloneElement(t,Q(Q({},t.props),{},{id:"result-".concat(o),key:"result-".concat(o),ref:null!==(a=t.props.ref)&&void 0!==a?a:null==le?void 0:le("".concat(o)),highlighted:o===V,onClick:function(e){var n,r;if(null===(n=(r=t.props).onClick)||void 0===n||n.call(r,e),ve(i),e.detail>=1&&re.current&&oe.current){var a,o=new Event("submit",{cancelable:!0,bubbles:!0});null===(a=re.current)||void 0===a||a.dispatchEvent(o)}}}))}if(f(t,"SearchResultGroup")){var l=e.Children.map(t.props.children,r);if(l&&l.length>0)return e.cloneElement(t,Q(Q({},t.props),{},{children:l}))}}));return{resultsCount:n,updatedChildren:r}}),[w,V,oe,le,ve]),ke=t((function(){return we()}),[we]),xe=ke.updatedChildren,Ee=ke.resultsCount,Se=function(e){switch(e){case"first":X(0);break;case"last":X(Ee);break;case"next":var n=!S(V)&&V+1<Ee?V+1:0;X(n);break;case"prev":var r=!S(V)&&V-1>=0?V-1:Ee-1;X(r)}};return N(he,ae,12),D((function(){$()}),[te,ae],F&&ge),e.createElement(M,{darkMode:H},e.createElement(fe,{state:x,highlight:V,resultDynamicRefs:le},e.createElement("form",Z({role:"search",ref:re,className:d(xn,u),onSubmit:function(e){e.preventDefault(),null==T||T(e),ge&&($(),ve(""))}},U),e.createElement("div",{ref:te,role:"searchbox",tabIndex:-1,onMouseDown:function(e){v&&e.preventDefault()},onClick:function(e){!function(e){v?(e.preventDefault(),e.stopPropagation()):ee()}(e)},onFocus:function(e){var n,r=e.target,t=r===ie.current?ie.current:null!==(n=oe.current)&&void 0!==n?n:r;t.focus(),pe(t)},onKeyDown:function(e){var n,r,t=null===(n=ae.current)||void 0===n?void 0:n.contains(document.activeElement);if((null===(r=te.current)||void 0===r?void 0:r.contains(document.activeElement))||t)switch(e.key){case m.Enter:var a;null==he||null===(a=he.current)||void 0===a||a.click();break;case m.Escape:var o;$(),null===(o=oe.current)||void 0===o||o.focus();break;case m.ArrowDown:var i;if(ge)null===(i=oe.current)||void 0===i||i.focus(),ee(),e.preventDefault(),Se("next");break;case m.ArrowUp:var l;if(ge)null===(l=oe.current)||void 0===l||l.focus(),ee(),e.preventDefault(),Se("prev");break;case m.Tab:F&&$();break;default:ge&&ee()}},className:d(En,Sn[y],Cn[B],(l={},Y(l,jn[B],ue===oe.current),Y(l,An[B],v),Y(l,On[B],!v),l)),"aria-label":R,"aria-labelledby":G},e.createElement(P,{className:d(Pn[B],zn[y],Y({},Ln[B],v)),role:"presentation"}),e.createElement("input",{type:"search",className:d(Nn,Dn[B]),value:be,onChange:function(e){null==ye||ye(e)},placeholder:s,ref:oe,readOnly:v,"aria-disabled":v}),be&&e.createElement(L,{ref:ie,type:"button","aria-label":"Clear search",onClick:function(e){var n;e.stopPropagation(),ve(""),null==oe||null===(n=oe.current)||void 0===n||n.focus()},className:Hn[y],tabIndex:v?-1:0,disabled:v},e.createElement(z,null))),ge&&e.createElement(wn,{open:F,refEl:te,ref:ae},xe))))}));Fn.displayName="SearchInput";var Jn,Kn,Vn,Xn,$n=b("search-result-title"),Qn=b("search-result-description"),Yn=s(Mn||(Mn=ee(["\n  display: block;\n  font-family: ",";\n  font-size: ","px;\n  line-height: ","px;\n  padding: ","px ","px;\n\n  & ."," {\n    font-weight: ",";\n  }\n"])),H.default,U.body1.fontSize,R[3],R[1],R[3],$n,q.bold),Zn=(Y(Rn={},p.Light,s(In||(In=ee(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),$n,J.black,Qn,J.gray.dark1)),Y(Rn,p.Dark,s(Tn||(Tn=ee(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),$n,J.gray.light2,Qn,J.gray.light1)),Rn),_n=(Y(Wn={},p.Light,s(Gn||(Gn=ee(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),$n,J.gray.light1,Qn,J.gray.light1)),Y(Wn,p.Dark,s(Un||(Un=ee(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),$n,J.gray.dark1,Qn,J.gray.dark1)),Wn),er=s(Bn||(Bn=ee(["\n  max-height: ","px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])),3*R[3]),nr=["as","children","description","disabled","className","darkMode"],rr=X((function(n,r){var t,a=n.as,o=void 0===a?"li":a,i=n.children,l=n.description,c=n.disabled,s=n.className,u=n.darkMode,p=_(n,nr),h=I(u).theme,f=g(i),m=null!==(t=p["aria-label"])&&void 0!==t?t:p["aria-labelledby"]?"":f;return e.createElement(F,Z({},p,{as:o,ref:r,className:d(Yn,Zn[h],Y({},_n[h],c),s),disabled:c,"aria-labelledby":p["aria-labelledby"],"aria-label":m}),e.createElement("div",{className:$n},i),l&&e.createElement("div",{className:d(Qn,er)},l))}),"SearchResult");rr.displayName="SearchResult";var tr,ar,or,ir,lr=s(Jn||(Jn=ee(["\n  padding-top: 12px;\n  padding-bottom: 0;\n"]))),cr=(Y(Xn={},p.Light,s(Kn||(Kn=ee(["\n    color: ",";\n  "])),J.gray.dark1)),Y(Xn,p.Dark,s(Vn||(Vn=ee(["\n    color: ",";\n  "])),J.gray.base)),Xn),sr=["children","label"],dr=function(n){var r=n.children,t=n.label,a=_(n,sr),o=y(r,["SearchResult","SearchResultGroup"]),i=I().theme;return e.createElement("div",null,e.createElement(F,Z({"aria-label":t,isInteractive:!1,className:lr},a),e.createElement(k,{className:cr[i]},t)),o)};dr.displayName="SearchResultGroup";var ur,pr={title:"Components/SearchInput",component:Fn,parameters:{default:"LiveExample",controls:{exclude:[].concat((ur=w,function(e){if(Array.isArray(e))return te(e)}(ur)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(ur)||re(ur)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),["value","id","showWedge","onSubmit"])},generate:{combineArgs:{darkMode:[!1,!0],disabled:[!1,!0]}}},argTypes:{darkMode:v.darkMode,state:{control:"select",options:Object.values(ce)},placeholder:{control:"text"},disabled:{control:"boolean"}}},hr=[{name:"apple",description:"A round fruit which typically has thin red or green skin and crisp flesh"},{name:"banana",description:" Along curved fruit which grows in clusters"},{name:"carrot",description:"A tapering orange-colored root eaten as a vegetable"},{name:"dragonfruit",description:"The fruit of a pitahaya cactus, with leathery red, pink, or yellow skin "},{name:"eggplant",description:"The purple egg-shaped fruit of a tropical Old World plant"},{name:"fig",description:"A soft pear-shaped fruit with sweet dark flesh and many small seeds"},{name:"grape",description:"A berry, typically green, purple, red, or black, growing in clusters on a vine"},{name:"honeydew",description:"A melon of a variety with smooth pale skin and sweet green flesh"},{name:"iceberg-lettuce",description:"A lettuce of a variety having a dense round head of crisp pale leaves."},{name:"jalapeño",description:"A very hot green chili pepper, used especially in Mexican-style cooking"},{name:"kiwi",description:"A fruit with a thin hairy skin, green flesh, and black seeds"},{name:"lemon",description:"A yellow, oval citrus fruit with thick skin and fragrant, acidic juice:"},{name:"melon",description:"The large round fruit of a plant of the gourd family, with sweet pulpy flesh and many seeds"},{name:"nectarine",description:"A peach of a variety with smooth, thin, brightly colored skin and rich firm flesh."},{name:"orange",description:"A round juicy citrus fruit with a tough bright reddish-yellow rind"},{name:"pomegranate",description:"An orange-sized fruit with a tough reddish outer skin and sweet red gelatinous flesh containing many seeds"},{name:"quince",description:"A hard, acid pear-shaped fruit used in preserves or as flavoring"},{name:"raspberry",description:"An edible soft fruit related to the blackberry, consisting of a cluster of reddish-pink drupelets"},{name:"strawberry",description:"A sweet soft red fruit with a seed-studded surface"},{name:"tomato",description:"A glossy red, or occasionally yellow, pulpy edible fruit that is eaten as a vegetable or in salad"},{name:"ugli-fruit",description:"A mottled green and yellow citrus fruit which is a hybrid of a grapefruit and a tangerine"},{name:"vanilla",description:"A tropical climbing orchid that has fragrant flowers and long podlike fruit"},{name:"watermelon",description:"The large fruit of a plant of the gourd family, with smooth green skin, red pulp, and watery juice"},{name:"ximenia",description:"Can be eaten raw and can be used to make juice, jams or intoxicating drinks"},{name:"yam",description:"The edible starchy tuber of a climbing plant that is widely grown in tropical and subtropical countries"},{name:"zucchini",description:"A green variety of smooth-skinned summer squash"}],fr=function(n){var r=ne(a(),2),t=r[0],o=r[1],i=ne(a(hr),2),d=i[0],u=i[1];return e.createElement("div",{className:s(tr||(tr=ee(["\n        width: 256px;\n      "])))},e.createElement(Fn,Z({"aria-label":"Item",onChange:function(e){var r,t=e.target.value;console.log("Storybook: handleChange",{value:t}),null===(r=n.onChange)||void 0===r||r.call(n,e),u(hr.filter((function(e){return e.name.includes(l(t))})))},onSubmit:function(e){var r,t=e.target[0].value;null===(r=n.onSelect)||void 0===r||r.call(n,e),console.log("Storybook: handleSelect",{value:t}),o(hr.find((function(e){return l(e.name)===l(t)})))}},n),d.map((function(n){return e.createElement(rr,{key:n.name,description:n.description,onClick:function(){return console.log("Storybook: Clicked",n.name)}},c(n.name))}))),t&&e.createElement("div",{className:s(ar||(ar=ee(["\n            min-width: min-content;\n            margin-block: 20px;\n            padding: 20px;\n            outline: 1px solid green;\n          "])))},e.createElement(x,null,c(t.name)),e.createElement(E,null,t.description)))};fr.parameters={chromatic:{disableSnapshot:!0}},fr.argTypes={onChange:{action:"Change"},onSubmit:{action:"Submit"},onClick:{action:"Click"}};var gr=function(n){return e.createElement(Fn,Z({className:s(or||(or=ee(["\n      width: 200px;\n    "])))},n))};gr.parameters={chromatic:{disableSnapshot:!0}};var mr=function(n){return e.createElement(Fn,Z({className:s(ir||(ir=ee(["\n      width: 200px;\n    "]))),onChange:function(){console.log("SB: Change")}},n),e.createElement(rr,{onClick:function(){console.log("SB: Click Apple")},description:"This is a description"},"Apple"),e.createElement(rr,null,"Banana"),e.createElement(rr,{as:"a",href:"#",description:"This is a link"},"Carrot"),e.createElement(rr,{description:"This is a very very long description. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."},"Dragonfruit"),e.createElement(dr,{label:"Peppers"},e.createElement(rr,{description:"A moderately hot chili pepper used to flavor dishes"},"Cayenne"),e.createElement(rr,null,"Ghost pepper"),e.createElement(rr,null,"Habanero"),e.createElement(rr,null,"Jalapeño"),e.createElement(rr,null,"Red pepper"),e.createElement(rr,null,"Scotch bonnet")))};mr.parameters={chromatic:{disableSnapshot:!0}};var br=function(){};export{gr as Basic,br as Generated,fr as LiveExample,mr as WithResults,pr as default};

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Lines of code

3797

increased by0.03%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

317249

decreased by-28.47%

Number of package files

90

decreased by-4.26%

Dependency changes

• Updated@leafygreen-ui/hooks@^8.1.1

• Updated@leafygreen-ui/lib@^13.2.1

• Updated@leafygreen-ui/popover@^11.1.1

• Updated@leafygreen-ui/tokens@^2.3.0