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

Comparing version 2.0.17 to 2.1.0

CHANGELOG.md

 # @leafygreen-ui/search-input
 
+## 2.1.0
+
+### Minor Changes
+
+- f6698369: SearchResultMenu now supports a footer slot prop for children rendered under the list of search results. Popover props are also now correctly passed to the Popover component.
+
+### Patch Changes
+
+- Updated dependencies [f8c77c5d]
+- Updated dependencies [1c7c9608]
+- Updated dependencies [827060f6]
+  - @leafygreen-ui/popover@11.1.0
+  - @leafygreen-ui/icon@11.24.0
+
 ## 2.0.17
@@ -4,0 +18,0 @@

dist/esm/index.js

@@ -1,2 +0,2 @@
-import e,{useContext as n,createContext as r,useMemo as t,useState as a,useRef as o,useCallback as l}from"react";import i from"lodash/isUndefined";import{css as c,cx as u,keyframes as s}from"@leafygreen-ui/emotion";import{useAvailableSpace as d,useForwardedRef as f,useDynamicRefs as h,useControlledValue as p,useAutoScroll as g,useBackdropClick as b}from"@leafygreen-ui/hooks";import m from"@leafygreen-ui/icon/dist/MagnifyingGlass";import y from"@leafygreen-ui/icon/dist/XWithCircle";import v from"@leafygreen-ui/icon-button";import k,{useDarkMode as x}from"@leafygreen-ui/leafygreen-provider";import{Theme as w,createSyntheticEvent as E,isComponentType as O,getNodeTextContent as S,keyMap as j,createUniqueClassName as D,validateChildren as N}from"@leafygreen-ui/lib";import L from"@leafygreen-ui/popover";import{spacing as C,transitionDuration as P,typeScales as z,hoverRing as M,focusRing as R,fontFamilies as I,fontWeights as A}from"@leafygreen-ui/tokens";import{InputOption as U}from"@leafygreen-ui/input-option";import{palette as G}from"@leafygreen-ui/palette";import T from"@leafygreen-ui/icon/dist/Refresh";import{transparentize as H}from"polished";import{InferredPolymorphic as W}from"@leafygreen-ui/polymorphic";import{Overline as F}from"@leafygreen-ui/typography";function K(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 X(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?K(Object(r),!0).forEach((function(n){$(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):K(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function $(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 q(){return q=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},q.apply(this,arguments)}function B(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 J(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function Q(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,l,i=[],c=!0,u=!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)&&(i.push(t.value),i.length!==n);c=!0);}catch(e){u=!0,a=e}finally{try{if(!c&&null!=r.return&&(l=r.return(),Object(l)!==l))return}finally{if(u)throw a}}return i}}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return V(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return V(e,n)}(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 V(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 Y,Z,_,ee,ne=["children"],re=r({});function te(n){var r=n.children,t=B(n,ne);return e.createElement(re.Provider,{value:t},r)}var ae,oe,le,ie,ce,ue,se,de,fe,he,pe=c(Y||(Y=J(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n  font-style: italic;\n  font-weight: 300;\n  padding-block: ","px;\n"])),C[2],C[1]),ge=($(ee={},w.Light,c(Z||(Z=J(["\n    color: ",";\n  "])),G.gray.dark1)),$(ee,w.Dark,c(_||(_=J(["\n    color: ",";\n  "])),G.gray.light1)),ee),be=function(){var n=x().theme;return e.createElement(U,{"aria-label":"No results found",isInteractive:!1,className:u(pe,ge[n])},e.createElement("span",null,"No results found"))},me=c(ae||(ae=J(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n  padding-block: ","px;\n"])),C[2],C[1]),ye=s(oe||(oe=J(["\n  from {\n    transform: rotate(0deg);\n  } \n  to {\n    transform: rotate(360deg);\n  }\n"]))),ve=c(le||(le=J(["\n  height: 16px;\n  width: 16px;\n  animation: "," 1.5s linear infinite;\n"])),ye),ke=function(){var n=x().darkMode;return e.createElement(U,{"data-testid":"lg-search-input-loading-option","aria-label":"Loading results",isInteractive:!1,className:me},e.createElement(T,{color:n?G.blue.light1:G.blue.base,className:ve}),e.createElement("span",null,"Loading results"))},xe=c(ie||(ie=J(["\n  box-shadow: 0px 4px 7px ",";\n  padding: 12px 0;\n  border-radius: 12px;\n"])),H(.75,"#000000")),we=($(se={},w.Light,c(ce||(ce=J(["\n    background-color: ",";\n  "])),G.white)),$(se,w.Dark,c(ue||(ue=J(["\n    background-color: ",";\n  "])),G.gray.dark3)),se),Ee=c(de||(de=J(["\n  padding: 0;\n  margin: 0;\n  border-radius: inherit;\n  overflow-y: auto;\n  scroll-behavior: smooth;\n"]))),Oe=e.forwardRef((function(r,a){var o=r.children,l=r.open,s=void 0!==l&&l,f=r.refEl,h=x().theme,p=n(re).state,g=t((function(){var e,n;return null!==(e=null===(n=f.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0}),[f,s]),b=d(f),m=i(b)?"unset":"".concat(Math.min(b,256),"px");return e.createElement(L,{"data-testid":"lg-search-input-popover",spacing:C[2],active:s,align:"bottom",justify:"start",className:u(xe,we[h],c(fe||(fe=J(["\n          width: ","px;\n          min-width: ","px;\n        "])),g,g)),refEl:f},"loading"===p?e.createElement(ke,null):e.createElement("ul",{role:"listbox","aria-live":"polite","aria-relevant":"additions removals","aria-expanded":s,ref:a,className:u(Ee,c(he||(he=J(["\n              max-height: ",";\n            "])),m))},e.Children.count(o)?o:e.createElement(be,null)))}));Oe.displayName="SearchResultsMenu";var Se,je,De,Ne,Le,Ce,Pe,ze,Me,Re,Ie,Ae,Ue,Ge,Te,He,We,Fe,Ke,Xe,$e,qe,Be,Je,Qe,Ve,Ye,Ze,_e,en,nn,rn,tn,an,on,ln,cn,un={Unset:"unset",Loading:"loading"},sn={Small:"small",Default:"default",Large:"large"},dn=function(e){return"0 0 0 100px ".concat(e," inset")},fn=c(Se||(Se=J(["\n  outline: none;\n"]))),hn=c(je||(je=J(["\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"])),P.default),pn=($(Ce={},sn.Small,c(De||(De=J(["\n    font-size: ","px;\n    line-height: ","px;\n    height: 28px;\n    grid-template-columns: 28px 1fr;\n    grid-auto-columns: 28px;\n  "])),z.body1.fontSize,z.body1.lineHeight)),$(Ce,sn.Default,c(Ne||(Ne=J(["\n    font-size: ","px;\n    line-height: ","px;\n    height: 36px;\n    grid-template-columns: 36px 1fr;\n    grid-auto-columns: 36px;\n  "])),z.body1.fontSize,z.body1.lineHeight)),$(Ce,sn.Large,c(Le||(Le=J(["\n    font-size: 18px;\n    line-height: 32px;\n    height: 48px;\n    grid-template-columns: 48px 1fr;\n    grid-auto-columns: 48px;\n  "])))),Ce),gn=($(Me={},w.Light,c(Pe||(Pe=J(["\n    color: ",";\n    background: ",";\n    border-color: ",";\n  "])),G.black,G.white,G.gray.base)),$(Me,w.Dark,c(ze||(ze=J(["\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n  "])),G.gray.light2,G.gray.dark4,G.gray.base)),Me),bn=($(Ae={},w.Light,c(Re||(Re=J(["\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus-within) {\n        box-shadow: ",";\n      }\n    }\n  "])),M.light.gray)),$(Ae,w.Dark,c(Ie||(Ie=J(["\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus-within) {\n        box-shadow: ",";\n      }\n    }\n  "])),M.dark.gray)),Ae),mn=($(Te={},w.Light,c(Ue||(Ue=J(["\n    &:not(:disabled):focus-within {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),R.light.input,G.white)),$(Te,w.Dark,c(Ge||(Ge=J(["\n    &:not(:disabled):focus-within {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),R.dark.input,G.gray.dark4)),Te),yn=($(Fe={},w.Light,c(He||(He=J(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n  "])),G.gray.base,G.gray.light2,G.gray.light1)),$(Fe,w.Dark,c(We||(We=J(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n  "])),G.gray.dark2,G.gray.dark3,G.gray.dark2)),Fe),vn=c(Ke||(Ke=J(["\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"])),I.default,A.regular),kn=($(qe={},w.Light,c(Xe||(Xe=J(["\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  "])),dn(G.white),dn(G.white),R.light.input,dn(G.white),M.light.gray,G.gray.base,A.regular,G.gray.base,G.gray.base,G.gray.base,dn(G.gray.light2))),$(qe,w.Dark,c($e||($e=J(["\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  "])),G.gray.light3,dn(G.gray.dark4),dn(G.gray.dark4),R.dark.input,G.blue.light1,dn(G.gray.dark4),M.dark.gray,G.gray.base,A.regular,G.gray.dark1,G.gray.dark1,G.gray.dark1,dn(G.gray.dark2))),qe),xn=($(Qe={},w.Light,c(Be||(Be=J(["\n    color: ",";\n  "])),G.gray.dark1)),$(Qe,w.Dark,c(Je||(Je=J(["\n    color: ",";\n  "])),G.gray.light1)),Qe),wn=($(_e={},sn.Small,c(Ve||(Ve=J(["\n    left: 10px;\n  "])))),$(_e,sn.Default,c(Ye||(Ye=J(["\n    left: 12px;\n  "])))),$(_e,sn.Large,c(Ze||(Ze=J(["\n    left: 16px;\n  "])))),_e),En=($(rn={},w.Light,c(en||(en=J(["\n    color: ",";\n  "])),G.gray.base)),$(rn,w.Dark,c(nn||(nn=J(["\n    color: ",";\n  "])),G.gray.dark1)),rn);c(tn||(tn=J([""])));var On,Sn,jn,Dn,Nn,Ln,Cn,Pn,zn=($(cn={},sn.Small,c(an||(an=J(["\n    height: 26px;\n    width: 26px;\n  "])))),$(cn,sn.Default,c(on||(on=J(["\n    height: 28px;\n    width: 28px;\n  "])))),$(cn,sn.Large,c(ln||(ln=J(["\n    height: 28px;\n    width: 28px;\n  "])))),cn),Mn=["placeholder","className","darkMode","size","disabled","children","state","value","onChange","onSubmit","aria-label","aria-labelledby"],Rn=e.forwardRef((function(n,r){var c,s=n.placeholder,d=void 0===s?"Search":s,w=n.className,D=n.darkMode,N=n.size,L=void 0===N?sn.Default:N,C=n.disabled,P=n.children,z=n.state,M=void 0===z?un.Unset:z,R=n.value,I=n.onChange,A=n.onSubmit,U=n["aria-label"],G=n["aria-labelledby"],T=B(n,Mn),H=x(D),W=H.theme,F=H.darkMode,K=Q(a(!1),2),J=K[0],V=K[1],Y=Q(a(0),2),Z=Y[0],_=Y[1],ee=function(){return V(!1)},ne=function(){return V(!0)},re=o(null),ae=o(null),oe=o(null),le=f(r,null),ie=o(null),ce=h({prefix:"result"}),ue=Q(a(),2),se=ue[0],de=ue[1],fe=ce("".concat(Z)),he=!i(P),pe=p(R,I),ge=pe.value,be=pe.handleChange,me=l((function(e){le.current&&(le.current.value=e,be(E(new Event("change",{cancelable:!0,bubbles:!0}),le.current)))}),[be,le]),ye=l((function(){var n=0,r=e.Children.map(P,(function r(t){if(O(t,"SearchResult")){var a,o=(n+=1)-1,l=S(t);return e.cloneElement(t,X(X({},t.props),{},{id:"result-".concat(o),key:"result-".concat(o),ref:null!==(a=t.props.ref)&&void 0!==a?a:null==ce?void 0:ce("".concat(o)),highlighted:o===Z,onClick:function(e){var n,r;if(null===(n=(r=t.props).onClick)||void 0===n||n.call(r,e),me(l),e.detail>=1&&re.current&&le.current){var a,o=new Event("submit",{cancelable:!0,bubbles:!0});null===(a=re.current)||void 0===a||a.dispatchEvent(o)}}}))}if(O(t,"SearchResultGroup")){var i=e.Children.map(t.props.children,r);if(i&&i.length>0)return e.cloneElement(t,X(X({},t.props),{},{children:i}))}}));return{resultsCount:n,updatedChildren:r}}),[P,Z,le,ce,me]),ve=t((function(){return ye()}),[ye]),ke=ve.updatedChildren,xe=ve.resultsCount,we=function(e){switch(e){case"first":_(0);break;case"last":_(xe);break;case"next":var n=!i(Z)&&Z+1<xe?Z+1:0;_(n);break;case"prev":var r=!i(Z)&&Z-1>=0?Z-1:xe-1;_(r)}};return g(fe,oe,12),b((function(){ee()}),[ae,oe],J&&he),e.createElement(k,{darkMode:F},e.createElement(te,{state:M,highlight:Z,resultDynamicRefs:ce},e.createElement("form",q({role:"search",ref:re,className:u(fn,w),onSubmit:function(e){e.preventDefault(),null==A||A(e),he&&(ee(),me(""))}},T),e.createElement("div",{ref:ae,role:"searchbox",tabIndex:-1,onMouseDown:function(e){C&&e.preventDefault()},onClick:function(e){!function(e){C?(e.preventDefault(),e.stopPropagation()):ne()}(e)},onFocus:function(e){var n,r=e.target,t=r===ie.current?ie.current:null!==(n=le.current)&&void 0!==n?n:r;t.focus(),de(t)},onKeyDown:function(e){var n,r,t=null===(n=oe.current)||void 0===n?void 0:n.contains(document.activeElement);if((null===(r=ae.current)||void 0===r?void 0:r.contains(document.activeElement))||t)switch(e.key){case j.Enter:var a;null==fe||null===(a=fe.current)||void 0===a||a.click();break;case j.Escape:var o;ee(),null===(o=le.current)||void 0===o||o.focus();break;case j.ArrowDown:var l;if(he)null===(l=le.current)||void 0===l||l.focus(),ne(),e.preventDefault(),we("next");break;case j.ArrowUp:var i;if(he)null===(i=le.current)||void 0===i||i.focus(),ne(),e.preventDefault(),we("prev");break;case j.Tab:J&&ee();break;default:he&&ne()}},className:u(hn,pn[L],gn[W],(c={},$(c,mn[W],se===le.current),$(c,yn[W],C),$(c,bn[W],!C),c)),"aria-label":U,"aria-labelledby":G},e.createElement(m,{className:u(xn[W],wn[L],$({},En[W],C)),role:"presentation"}),e.createElement("input",{type:"search",className:u(vn,kn[W]),value:ge,onChange:function(e){null==be||be(e)},placeholder:d,ref:le,readOnly:C,"aria-disabled":C}),ge&&e.createElement(v,{ref:ie,type:"button","aria-label":"Clear search",onClick:function(e){var n;e.stopPropagation(),me(""),null==le||null===(n=le.current)||void 0===n||n.focus()},className:zn[L],tabIndex:C?-1:0,disabled:C},e.createElement(y,null))),he&&e.createElement(Oe,{open:J,refEl:ae,ref:oe},ke))))}));Rn.displayName="SearchInput";var In,An,Un,Gn,Tn=D("search-result-title"),Hn=D("search-result-description"),Wn=c(On||(On=J(["\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"])),I.default,z.body1.fontSize,C[3],C[1],C[3],Tn,A.bold),Fn=($(Dn={},w.Light,c(Sn||(Sn=J(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),Tn,G.black,Hn,G.gray.dark1)),$(Dn,w.Dark,c(jn||(jn=J(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),Tn,G.gray.light2,Hn,G.gray.light1)),Dn),Kn=($(Cn={},w.Light,c(Nn||(Nn=J(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),Tn,G.gray.light1,Hn,G.gray.light1)),$(Cn,w.Dark,c(Ln||(Ln=J(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),Tn,G.gray.dark1,Hn,G.gray.dark1)),Cn),Xn=c(Pn||(Pn=J(["\n  max-height: ","px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])),3*C[3]),$n=["as","children","description","disabled","className","darkMode"],qn=W((function(n,r){var t,a=n.as,o=void 0===a?"li":a,l=n.children,i=n.description,c=n.disabled,s=n.className,d=n.darkMode,f=B(n,$n),h=x(d).theme,p=S(l),g=null!==(t=f["aria-label"])&&void 0!==t?t:f["aria-labelledby"]?"":p;return e.createElement(U,q({},f,{as:o,ref:r,className:u(Wn,Fn[h],$({},Kn[h],c),s),disabled:c,"aria-labelledby":f["aria-labelledby"],"aria-label":g}),e.createElement("div",{className:Tn},l),i&&e.createElement("div",{className:u(Hn,Xn)},i))}),"SearchResult");qn.displayName="SearchResult";var Bn=c(In||(In=J(["\n  padding-top: 12px;\n  padding-bottom: 0;\n"]))),Jn=($(Gn={},w.Light,c(An||(An=J(["\n    color: ",";\n  "])),G.gray.dark1)),$(Gn,w.Dark,c(Un||(Un=J(["\n    color: ",";\n  "])),G.gray.base)),Gn),Qn=["children","label"],Vn=function(n){var r=n.children,t=n.label,a=B(n,Qn),o=N(r,["SearchResult","SearchResultGroup"]),l=x().theme;return e.createElement("div",null,e.createElement(U,q({"aria-label":t,isInteractive:!1,className:Bn},a),e.createElement(F,{className:Jn[l]},t)),o)};Vn.displayName="SearchResultGroup";export{Rn as SearchInput,qn as SearchResult,Vn as SearchResultGroup,Oe as SearchResultsMenu,sn as Size,un as State};
+import e,{useContext as n,createContext as r,useMemo as t,useState as a,useRef as o,useCallback as l}from"react";import i from"lodash/isUndefined";import{css as c,cx as u,keyframes as s}from"@leafygreen-ui/emotion";import{useAvailableSpace as d,useForwardedRef as f,useDynamicRefs as p,useControlledValue as h,useAutoScroll as g,useBackdropClick as b}from"@leafygreen-ui/hooks";import m from"@leafygreen-ui/icon/dist/MagnifyingGlass";import y from"@leafygreen-ui/icon/dist/XWithCircle";import v from"@leafygreen-ui/icon-button";import k,{useDarkMode as x}from"@leafygreen-ui/leafygreen-provider";import{Theme as w,createSyntheticEvent as E,isComponentType as O,getNodeTextContent as S,keyMap as j,createUniqueClassName as D,validateChildren as N}from"@leafygreen-ui/lib";import C from"@leafygreen-ui/popover";import{spacing as P,transitionDuration as L,typeScales as z,hoverRing as M,focusRing as R,fontFamilies as I,fontWeights as A}from"@leafygreen-ui/tokens";import{InputOption as U}from"@leafygreen-ui/input-option";import{palette as G}from"@leafygreen-ui/palette";import T from"@leafygreen-ui/icon/dist/Refresh";import{transparentize as F}from"polished";import{InferredPolymorphic as H}from"@leafygreen-ui/polymorphic";import{Overline as W}from"@leafygreen-ui/typography";function K(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 X(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?K(Object(r),!0).forEach((function(n){$(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):K(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function $(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 q(){return q=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},q.apply(this,arguments)}function B(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 J(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function Q(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,l,i=[],c=!0,u=!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)&&(i.push(t.value),i.length!==n);c=!0);}catch(e){u=!0,a=e}finally{try{if(!c&&null!=r.return&&(l=r.return(),Object(l)!==l))return}finally{if(u)throw a}}return i}}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return V(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return V(e,n)}(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 V(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 Y,Z,_,ee,ne=["children"],re=r({});function te(n){var r=n.children,t=B(n,ne);return e.createElement(re.Provider,{value:t},r)}var ae,oe,le,ie,ce,ue,se,de,fe,pe,he=c(Y||(Y=J(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n  font-style: italic;\n  font-weight: 300;\n  padding-block: ","px;\n"])),P[2],P[1]),ge=($(ee={},w.Light,c(Z||(Z=J(["\n    color: ",";\n  "])),G.gray.dark1)),$(ee,w.Dark,c(_||(_=J(["\n    color: ",";\n  "])),G.gray.light1)),ee),be=function(){var n=x().theme;return e.createElement(U,{"aria-label":"No results found",isInteractive:!1,className:u(he,ge[n])},e.createElement("span",null,"No results found"))},me=c(ae||(ae=J(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n  padding-block: ","px;\n"])),P[2],P[1]),ye=s(oe||(oe=J(["\n  from {\n    transform: rotate(0deg);\n  } \n  to {\n    transform: rotate(360deg);\n  }\n"]))),ve=c(le||(le=J(["\n  height: 16px;\n  width: 16px;\n  animation: "," 1.5s linear infinite;\n"])),ye),ke=function(){var n=x().darkMode;return e.createElement(U,{"data-testid":"lg-search-input-loading-option","aria-label":"Loading results",isInteractive:!1,className:me},e.createElement(T,{color:n?G.blue.light1:G.blue.base,className:ve}),e.createElement("span",null,"Loading results"))},xe=c(ie||(ie=J(["\n  box-shadow: 0px 4px 7px ",";\n  padding: 12px 0;\n  border-radius: 12px;\n"])),F(.75,"#000000")),we=($(se={},w.Light,c(ce||(ce=J(["\n    background-color: ",";\n  "])),G.white)),$(se,w.Dark,c(ue||(ue=J(["\n    background-color: ",";\n  "])),G.gray.dark3)),se),Ee=c(de||(de=J(["\n  padding: 0;\n  margin: 0;\n  border-radius: inherit;\n  overflow-y: auto;\n  scroll-behavior: smooth;\n"]))),Oe=["children","open","refEl","usePortal","portalClassName","portalContainer","scrollContainer","footerSlot"],Se=e.forwardRef((function(r,a){var o=r.children,l=r.open,s=void 0!==l&&l,f=r.refEl,p=r.usePortal,h=r.portalClassName,g=r.portalContainer,b=r.scrollContainer,m=r.footerSlot,y=B(r,Oe),v=x().theme,k=n(re).state,w=t((function(){var e,n;return null!==(e=null===(n=f.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0}),[f,s]),E=d(f),O=i(E)?"unset":"".concat(Math.min(E,256),"px");return e.createElement(C,{"data-testid":"lg-search-input-popover",spacing:P[2],active:s,align:"bottom",justify:"start",className:u(xe,we[v],c(fe||(fe=J(["\n            width: ","px;\n            min-width: ","px;\n          "])),w,w)),refEl:f,usePortal:p,portalClassName:p?h:void 0,portalContainer:p?g:null,scrollContainer:p?b:null},"loading"===k?e.createElement(ke,null):e.createElement(e.Fragment,null,e.createElement("ul",q({role:"listbox","aria-live":"polite","aria-relevant":"additions removals","aria-expanded":s,ref:a,className:u(Ee,c(pe||(pe=J(["\n                  max-height: ",";\n                "])),O))},y),e.Children.count(o)?o:e.createElement(be,null)),m))}));Se.displayName="SearchResultsMenu";var je,De,Ne,Ce,Pe,Le,ze,Me,Re,Ie,Ae,Ue,Ge,Te,Fe,He,We,Ke,Xe,$e,qe,Be,Je,Qe,Ve,Ye,Ze,_e,en,nn,rn,tn,an,on,ln,cn,un,sn={Unset:"unset",Loading:"loading"},dn={Small:"small",Default:"default",Large:"large"},fn=function(e){return"0 0 0 100px ".concat(e," inset")},pn=c(je||(je=J(["\n  outline: none;\n"]))),hn=c(De||(De=J(["\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"])),L.default),gn=($(Le={},dn.Small,c(Ne||(Ne=J(["\n    font-size: ","px;\n    line-height: ","px;\n    height: 28px;\n    grid-template-columns: 28px 1fr;\n    grid-auto-columns: 28px;\n  "])),z.body1.fontSize,z.body1.lineHeight)),$(Le,dn.Default,c(Ce||(Ce=J(["\n    font-size: ","px;\n    line-height: ","px;\n    height: 36px;\n    grid-template-columns: 36px 1fr;\n    grid-auto-columns: 36px;\n  "])),z.body1.fontSize,z.body1.lineHeight)),$(Le,dn.Large,c(Pe||(Pe=J(["\n    font-size: 18px;\n    line-height: 32px;\n    height: 48px;\n    grid-template-columns: 48px 1fr;\n    grid-auto-columns: 48px;\n  "])))),Le),bn=($(Re={},w.Light,c(ze||(ze=J(["\n    color: ",";\n    background: ",";\n    border-color: ",";\n  "])),G.black,G.white,G.gray.base)),$(Re,w.Dark,c(Me||(Me=J(["\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n  "])),G.gray.light2,G.gray.dark4,G.gray.base)),Re),mn=($(Ue={},w.Light,c(Ie||(Ie=J(["\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus-within) {\n        box-shadow: ",";\n      }\n    }\n  "])),M.light.gray)),$(Ue,w.Dark,c(Ae||(Ae=J(["\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus-within) {\n        box-shadow: ",";\n      }\n    }\n  "])),M.dark.gray)),Ue),yn=($(Fe={},w.Light,c(Ge||(Ge=J(["\n    &:not(:disabled):focus-within {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),R.light.input,G.white)),$(Fe,w.Dark,c(Te||(Te=J(["\n    &:not(:disabled):focus-within {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),R.dark.input,G.gray.dark4)),Fe),vn=($(Ke={},w.Light,c(He||(He=J(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n  "])),G.gray.base,G.gray.light2,G.gray.light1)),$(Ke,w.Dark,c(We||(We=J(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n  "])),G.gray.dark2,G.gray.dark3,G.gray.dark2)),Ke),kn=c(Xe||(Xe=J(["\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"])),I.default,A.regular),xn=($(Be={},w.Light,c($e||($e=J(["\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  "])),fn(G.white),fn(G.white),R.light.input,fn(G.white),M.light.gray,G.gray.base,A.regular,G.gray.base,G.gray.base,G.gray.base,fn(G.gray.light2))),$(Be,w.Dark,c(qe||(qe=J(["\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  "])),G.gray.light3,fn(G.gray.dark4),fn(G.gray.dark4),R.dark.input,G.blue.light1,fn(G.gray.dark4),M.dark.gray,G.gray.base,A.regular,G.gray.dark1,G.gray.dark1,G.gray.dark1,fn(G.gray.dark2))),Be),wn=($(Ve={},w.Light,c(Je||(Je=J(["\n    color: ",";\n  "])),G.gray.dark1)),$(Ve,w.Dark,c(Qe||(Qe=J(["\n    color: ",";\n  "])),G.gray.light1)),Ve),En=($(en={},dn.Small,c(Ye||(Ye=J(["\n    left: 10px;\n  "])))),$(en,dn.Default,c(Ze||(Ze=J(["\n    left: 12px;\n  "])))),$(en,dn.Large,c(_e||(_e=J(["\n    left: 16px;\n  "])))),en),On=($(tn={},w.Light,c(nn||(nn=J(["\n    color: ",";\n  "])),G.gray.base)),$(tn,w.Dark,c(rn||(rn=J(["\n    color: ",";\n  "])),G.gray.dark1)),tn);c(an||(an=J([""])));var Sn,jn,Dn,Nn,Cn,Pn,Ln,zn,Mn=($(un={},dn.Small,c(on||(on=J(["\n    height: 26px;\n    width: 26px;\n  "])))),$(un,dn.Default,c(ln||(ln=J(["\n    height: 28px;\n    width: 28px;\n  "])))),$(un,dn.Large,c(cn||(cn=J(["\n    height: 28px;\n    width: 28px;\n  "])))),un),Rn=["placeholder","className","darkMode","size","disabled","children","state","value","onChange","onSubmit","aria-label","aria-labelledby"],In=e.forwardRef((function(n,r){var c,s=n.placeholder,d=void 0===s?"Search":s,w=n.className,D=n.darkMode,N=n.size,C=void 0===N?dn.Default:N,P=n.disabled,L=n.children,z=n.state,M=void 0===z?sn.Unset:z,R=n.value,I=n.onChange,A=n.onSubmit,U=n["aria-label"],G=n["aria-labelledby"],T=B(n,Rn),F=x(D),H=F.theme,W=F.darkMode,K=Q(a(!1),2),J=K[0],V=K[1],Y=Q(a(0),2),Z=Y[0],_=Y[1],ee=function(){return V(!1)},ne=function(){return V(!0)},re=o(null),ae=o(null),oe=o(null),le=f(r,null),ie=o(null),ce=p({prefix:"result"}),ue=Q(a(),2),se=ue[0],de=ue[1],fe=ce("".concat(Z)),pe=!i(L),he=h(R,I),ge=he.value,be=he.handleChange,me=l((function(e){le.current&&(le.current.value=e,be(E(new Event("change",{cancelable:!0,bubbles:!0}),le.current)))}),[be,le]),ye=l((function(){var n=0,r=e.Children.map(L,(function r(t){if(O(t,"SearchResult")){var a,o=(n+=1)-1,l=S(t);return e.cloneElement(t,X(X({},t.props),{},{id:"result-".concat(o),key:"result-".concat(o),ref:null!==(a=t.props.ref)&&void 0!==a?a:null==ce?void 0:ce("".concat(o)),highlighted:o===Z,onClick:function(e){var n,r;if(null===(n=(r=t.props).onClick)||void 0===n||n.call(r,e),me(l),e.detail>=1&&re.current&&le.current){var a,o=new Event("submit",{cancelable:!0,bubbles:!0});null===(a=re.current)||void 0===a||a.dispatchEvent(o)}}}))}if(O(t,"SearchResultGroup")){var i=e.Children.map(t.props.children,r);if(i&&i.length>0)return e.cloneElement(t,X(X({},t.props),{},{children:i}))}}));return{resultsCount:n,updatedChildren:r}}),[L,Z,le,ce,me]),ve=t((function(){return ye()}),[ye]),ke=ve.updatedChildren,xe=ve.resultsCount,we=function(e){switch(e){case"first":_(0);break;case"last":_(xe);break;case"next":var n=!i(Z)&&Z+1<xe?Z+1:0;_(n);break;case"prev":var r=!i(Z)&&Z-1>=0?Z-1:xe-1;_(r)}};return g(fe,oe,12),b((function(){ee()}),[ae,oe],J&&pe),e.createElement(k,{darkMode:W},e.createElement(te,{state:M,highlight:Z,resultDynamicRefs:ce},e.createElement("form",q({role:"search",ref:re,className:u(pn,w),onSubmit:function(e){e.preventDefault(),null==A||A(e),pe&&(ee(),me(""))}},T),e.createElement("div",{ref:ae,role:"searchbox",tabIndex:-1,onMouseDown:function(e){P&&e.preventDefault()},onClick:function(e){!function(e){P?(e.preventDefault(),e.stopPropagation()):ne()}(e)},onFocus:function(e){var n,r=e.target,t=r===ie.current?ie.current:null!==(n=le.current)&&void 0!==n?n:r;t.focus(),de(t)},onKeyDown:function(e){var n,r,t=null===(n=oe.current)||void 0===n?void 0:n.contains(document.activeElement);if((null===(r=ae.current)||void 0===r?void 0:r.contains(document.activeElement))||t)switch(e.key){case j.Enter:var a;null==fe||null===(a=fe.current)||void 0===a||a.click();break;case j.Escape:var o;ee(),null===(o=le.current)||void 0===o||o.focus();break;case j.ArrowDown:var l;if(pe)null===(l=le.current)||void 0===l||l.focus(),ne(),e.preventDefault(),we("next");break;case j.ArrowUp:var i;if(pe)null===(i=le.current)||void 0===i||i.focus(),ne(),e.preventDefault(),we("prev");break;case j.Tab:J&&ee();break;default:pe&&ne()}},className:u(hn,gn[C],bn[H],(c={},$(c,yn[H],se===le.current),$(c,vn[H],P),$(c,mn[H],!P),c)),"aria-label":U,"aria-labelledby":G},e.createElement(m,{className:u(wn[H],En[C],$({},On[H],P)),role:"presentation"}),e.createElement("input",{type:"search",className:u(kn,xn[H]),value:ge,onChange:function(e){null==be||be(e)},placeholder:d,ref:le,readOnly:P,"aria-disabled":P}),ge&&e.createElement(v,{ref:ie,type:"button","aria-label":"Clear search",onClick:function(e){var n;e.stopPropagation(),me(""),null==le||null===(n=le.current)||void 0===n||n.focus()},className:Mn[C],tabIndex:P?-1:0,disabled:P},e.createElement(y,null))),pe&&e.createElement(Se,{open:J,refEl:ae,ref:oe},ke))))}));In.displayName="SearchInput";var An,Un,Gn,Tn,Fn=D("search-result-title"),Hn=D("search-result-description"),Wn=c(Sn||(Sn=J(["\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"])),I.default,z.body1.fontSize,P[3],P[1],P[3],Fn,A.bold),Kn=($(Nn={},w.Light,c(jn||(jn=J(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),Fn,G.black,Hn,G.gray.dark1)),$(Nn,w.Dark,c(Dn||(Dn=J(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),Fn,G.gray.light2,Hn,G.gray.light1)),Nn),Xn=($(Ln={},w.Light,c(Cn||(Cn=J(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),Fn,G.gray.light1,Hn,G.gray.light1)),$(Ln,w.Dark,c(Pn||(Pn=J(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),Fn,G.gray.dark1,Hn,G.gray.dark1)),Ln),$n=c(zn||(zn=J(["\n  max-height: ","px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])),3*P[3]),qn=["as","children","description","disabled","className","darkMode"],Bn=H((function(n,r){var t,a=n.as,o=void 0===a?"li":a,l=n.children,i=n.description,c=n.disabled,s=n.className,d=n.darkMode,f=B(n,qn),p=x(d).theme,h=S(l),g=null!==(t=f["aria-label"])&&void 0!==t?t:f["aria-labelledby"]?"":h;return e.createElement(U,q({},f,{as:o,ref:r,className:u(Wn,Kn[p],$({},Xn[p],c),s),disabled:c,"aria-labelledby":f["aria-labelledby"],"aria-label":g}),e.createElement("div",{className:Fn},l),i&&e.createElement("div",{className:u(Hn,$n)},i))}),"SearchResult");Bn.displayName="SearchResult";var Jn=c(An||(An=J(["\n  padding-top: 12px;\n  padding-bottom: 0;\n"]))),Qn=($(Tn={},w.Light,c(Un||(Un=J(["\n    color: ",";\n  "])),G.gray.dark1)),$(Tn,w.Dark,c(Gn||(Gn=J(["\n    color: ",";\n  "])),G.gray.base)),Tn),Vn=["children","label"],Yn=function(n){var r=n.children,t=n.label,a=B(n,Vn),o=N(r,["SearchResult","SearchResultGroup"]),l=x().theme;return e.createElement("div",null,e.createElement(U,q({"aria-label":t,isInteractive:!1,className:Jn},a),e.createElement(W,{className:Qn[l]},t)),o)};Yn.displayName="SearchResultGroup";export{In as SearchInput,Bn as SearchResult,Yn as SearchResultGroup,Se as SearchResultsMenu,dn as Size,sn as State};
 //# sourceMappingURL=index.js.map

dist/index.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("lodash/isUndefined"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/hooks"),require("@leafygreen-ui/icon/dist/MagnifyingGlass"),require("@leafygreen-ui/icon/dist/XWithCircle"),require("@leafygreen-ui/icon-button"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/popover"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/input-option"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/icon/dist/Refresh"),require("polished"),require("@leafygreen-ui/polymorphic"),require("@leafygreen-ui/typography")):"function"==typeof define&&define.amd?define(["exports","react","lodash/isUndefined","@leafygreen-ui/emotion","@leafygreen-ui/hooks","@leafygreen-ui/icon/dist/MagnifyingGlass","@leafygreen-ui/icon/dist/XWithCircle","@leafygreen-ui/icon-button","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/lib","@leafygreen-ui/popover","@leafygreen-ui/tokens","@leafygreen-ui/input-option","@leafygreen-ui/palette","@leafygreen-ui/icon/dist/Refresh","polished","@leafygreen-ui/polymorphic","@leafygreen-ui/typography"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/search-input"]={},e.React,e["/isUndefined"],e["@leafygreen-ui/emotion"],e["@leafygreen-ui/hooks"],e.MagnifyingGlass,e.XWithCircle,e["@leafygreen-ui/icon-button"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/popover"],e["@leafygreen-ui/tokens"],e["@leafygreen-ui/input-option"],e["@leafygreen-ui/palette"],e.Refresh,e.polished,e["@leafygreen-ui/polymorphic"],e["@leafygreen-ui/typography"])}(this,(function(e,n,t,r,a,l,i,o,s,c,u,d,f,p,h,g,b,y){"use strict";function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=m(n),k=m(t),x=m(l),w=m(i),S=m(o),E=m(s),O=m(u),D=m(h);function j(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function C(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?j(Object(t),!0).forEach((function(n){T(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):j(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function T(e,n,t){return(n=function(e){var n=function(e,n){if("object"!=typeof e||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!=typeof r)return r;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:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function R(){return R=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},R.apply(this,arguments)}function N(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)t=l[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)t=l[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}function M(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function q(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,a,l,i,o=[],s=!0,c=!1;try{if(l=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;s=!1}else for(;!(s=(r=l.call(t)).done)&&(o.push(r.value),o.length!==n);s=!0);}catch(e){c=!0,a=e}finally{try{if(!s&&null!=t.return&&(i=t.return(),Object(i)!==i))return}finally{if(c)throw a}}return o}}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return L(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return L(e,n)}(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 L(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var P,z,I,A,U=["children"],W=n.createContext({});function G(e){var n=e.children,t=N(e,U);return v.default.createElement(W.Provider,{value:t},n)}var F,X,H,B,K,V,$,J,Q,Y,Z=r.css(P||(P=M(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n  font-style: italic;\n  font-weight: 300;\n  padding-block: ","px;\n"])),d.spacing[2],d.spacing[1]),_=(T(A={},c.Theme.Light,r.css(z||(z=M(["\n    color: ",";\n  "])),p.palette.gray.dark1)),T(A,c.Theme.Dark,r.css(I||(I=M(["\n    color: ",";\n  "])),p.palette.gray.light1)),A),ee=function(){var e=s.useDarkMode().theme;return v.default.createElement(f.InputOption,{"aria-label":"No results found",isInteractive:!1,className:r.cx(Z,_[e])},v.default.createElement("span",null,"No results found"))},ne=r.css(F||(F=M(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n  padding-block: ","px;\n"])),d.spacing[2],d.spacing[1]),te=r.keyframes(X||(X=M(["\n  from {\n    transform: rotate(0deg);\n  } \n  to {\n    transform: rotate(360deg);\n  }\n"]))),re=r.css(H||(H=M(["\n  height: 16px;\n  width: 16px;\n  animation: "," 1.5s linear infinite;\n"])),te),ae=function(){var e=s.useDarkMode().darkMode;return v.default.createElement(f.InputOption,{"data-testid":"lg-search-input-loading-option","aria-label":"Loading results",isInteractive:!1,className:ne},v.default.createElement(D.default,{color:e?p.palette.blue.light1:p.palette.blue.base,className:re}),v.default.createElement("span",null,"Loading results"))},le=r.css(B||(B=M(["\n  box-shadow: 0px 4px 7px ",";\n  padding: 12px 0;\n  border-radius: 12px;\n"])),g.transparentize(.75,"#000000")),ie=(T($={},c.Theme.Light,r.css(K||(K=M(["\n    background-color: ",";\n  "])),p.palette.white)),T($,c.Theme.Dark,r.css(V||(V=M(["\n    background-color: ",";\n  "])),p.palette.gray.dark3)),$),oe=r.css(J||(J=M(["\n  padding: 0;\n  margin: 0;\n  border-radius: inherit;\n  overflow-y: auto;\n  scroll-behavior: smooth;\n"]))),se=v.default.forwardRef((function(e,t){var l=e.children,i=e.open,o=void 0!==i&&i,c=e.refEl,u=s.useDarkMode().theme,f=n.useContext(W).state,p=n.useMemo((function(){var e,n;return null!==(e=null===(n=c.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0}),[c,o]),h=a.useAvailableSpace(c),g=k.default(h)?"unset":"".concat(Math.min(h,256),"px");return v.default.createElement(O.default,{"data-testid":"lg-search-input-popover",spacing:d.spacing[2],active:o,align:"bottom",justify:"start",className:r.cx(le,ie[u],r.css(Q||(Q=M(["\n          width: ","px;\n          min-width: ","px;\n        "])),p,p)),refEl:c},"loading"===f?v.default.createElement(ae,null):v.default.createElement("ul",{role:"listbox","aria-live":"polite","aria-relevant":"additions removals","aria-expanded":o,ref:t,className:r.cx(oe,r.css(Y||(Y=M(["\n              max-height: ",";\n            "])),g))},v.default.Children.count(l)?l:v.default.createElement(ee,null)))}));se.displayName="SearchResultsMenu";var ce,ue,de,fe,pe,he,ge,be,ye,me,ve,ke,xe,we,Se,Ee,Oe,De,je,Ce,Te,Re,Ne,Me,qe,Le,Pe,ze,Ie,Ae,Ue,We,Ge,Fe,Xe,He,Be,Ke={Unset:"unset",Loading:"loading"},Ve={Small:"small",Default:"default",Large:"large"},$e=function(e){return"0 0 0 100px ".concat(e," inset")},Je=r.css(ce||(ce=M(["\n  outline: none;\n"]))),Qe=r.css(ue||(ue=M(["\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"])),d.transitionDuration.default),Ye=(T(he={},Ve.Small,r.css(de||(de=M(["\n    font-size: ","px;\n    line-height: ","px;\n    height: 28px;\n    grid-template-columns: 28px 1fr;\n    grid-auto-columns: 28px;\n  "])),d.typeScales.body1.fontSize,d.typeScales.body1.lineHeight)),T(he,Ve.Default,r.css(fe||(fe=M(["\n    font-size: ","px;\n    line-height: ","px;\n    height: 36px;\n    grid-template-columns: 36px 1fr;\n    grid-auto-columns: 36px;\n  "])),d.typeScales.body1.fontSize,d.typeScales.body1.lineHeight)),T(he,Ve.Large,r.css(pe||(pe=M(["\n    font-size: 18px;\n    line-height: 32px;\n    height: 48px;\n    grid-template-columns: 48px 1fr;\n    grid-auto-columns: 48px;\n  "])))),he),Ze=(T(ye={},c.Theme.Light,r.css(ge||(ge=M(["\n    color: ",";\n    background: ",";\n    border-color: ",";\n  "])),p.palette.black,p.palette.white,p.palette.gray.base)),T(ye,c.Theme.Dark,r.css(be||(be=M(["\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n  "])),p.palette.gray.light2,p.palette.gray.dark4,p.palette.gray.base)),ye),_e=(T(ke={},c.Theme.Light,r.css(me||(me=M(["\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus-within) {\n        box-shadow: ",";\n      }\n    }\n  "])),d.hoverRing.light.gray)),T(ke,c.Theme.Dark,r.css(ve||(ve=M(["\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus-within) {\n        box-shadow: ",";\n      }\n    }\n  "])),d.hoverRing.dark.gray)),ke),en=(T(Se={},c.Theme.Light,r.css(xe||(xe=M(["\n    &:not(:disabled):focus-within {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),d.focusRing.light.input,p.palette.white)),T(Se,c.Theme.Dark,r.css(we||(we=M(["\n    &:not(:disabled):focus-within {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),d.focusRing.dark.input,p.palette.gray.dark4)),Se),nn=(T(De={},c.Theme.Light,r.css(Ee||(Ee=M(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n  "])),p.palette.gray.base,p.palette.gray.light2,p.palette.gray.light1)),T(De,c.Theme.Dark,r.css(Oe||(Oe=M(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n  "])),p.palette.gray.dark2,p.palette.gray.dark3,p.palette.gray.dark2)),De),tn=r.css(je||(je=M(["\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"])),d.fontFamilies.default,d.fontWeights.regular),rn=(T(Re={},c.Theme.Light,r.css(Ce||(Ce=M(["\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  "])),$e(p.palette.white),$e(p.palette.white),d.focusRing.light.input,$e(p.palette.white),d.hoverRing.light.gray,p.palette.gray.base,d.fontWeights.regular,p.palette.gray.base,p.palette.gray.base,p.palette.gray.base,$e(p.palette.gray.light2))),T(Re,c.Theme.Dark,r.css(Te||(Te=M(["\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  "])),p.palette.gray.light3,$e(p.palette.gray.dark4),$e(p.palette.gray.dark4),d.focusRing.dark.input,p.palette.blue.light1,$e(p.palette.gray.dark4),d.hoverRing.dark.gray,p.palette.gray.base,d.fontWeights.regular,p.palette.gray.dark1,p.palette.gray.dark1,p.palette.gray.dark1,$e(p.palette.gray.dark2))),Re),an=(T(qe={},c.Theme.Light,r.css(Ne||(Ne=M(["\n    color: ",";\n  "])),p.palette.gray.dark1)),T(qe,c.Theme.Dark,r.css(Me||(Me=M(["\n    color: ",";\n  "])),p.palette.gray.light1)),qe),ln=(T(Ie={},Ve.Small,r.css(Le||(Le=M(["\n    left: 10px;\n  "])))),T(Ie,Ve.Default,r.css(Pe||(Pe=M(["\n    left: 12px;\n  "])))),T(Ie,Ve.Large,r.css(ze||(ze=M(["\n    left: 16px;\n  "])))),Ie),on=(T(We={},c.Theme.Light,r.css(Ae||(Ae=M(["\n    color: ",";\n  "])),p.palette.gray.base)),T(We,c.Theme.Dark,r.css(Ue||(Ue=M(["\n    color: ",";\n  "])),p.palette.gray.dark1)),We);r.css(Ge||(Ge=M([""])));var sn,cn,un,dn,fn,pn,hn,gn,bn=(T(Be={},Ve.Small,r.css(Fe||(Fe=M(["\n    height: 26px;\n    width: 26px;\n  "])))),T(Be,Ve.Default,r.css(Xe||(Xe=M(["\n    height: 28px;\n    width: 28px;\n  "])))),T(Be,Ve.Large,r.css(He||(He=M(["\n    height: 28px;\n    width: 28px;\n  "])))),Be),yn=["placeholder","className","darkMode","size","disabled","children","state","value","onChange","onSubmit","aria-label","aria-labelledby"],mn=v.default.forwardRef((function(e,t){var l,i=e.placeholder,o=void 0===i?"Search":i,u=e.className,d=e.darkMode,f=e.size,p=void 0===f?Ve.Default:f,h=e.disabled,g=e.children,b=e.state,y=void 0===b?Ke.Unset:b,m=e.value,O=e.onChange,D=e.onSubmit,j=e["aria-label"],M=e["aria-labelledby"],L=N(e,yn),P=s.useDarkMode(d),z=P.theme,I=P.darkMode,A=q(n.useState(!1),2),U=A[0],W=A[1],F=q(n.useState(0),2),X=F[0],H=F[1],B=function(){return W(!1)},K=function(){return W(!0)},V=n.useRef(null),$=n.useRef(null),J=n.useRef(null),Q=a.useForwardedRef(t,null),Y=n.useRef(null),Z=a.useDynamicRefs({prefix:"result"}),_=q(n.useState(),2),ee=_[0],ne=_[1],te=Z("".concat(X)),re=!k.default(g),ae=a.useControlledValue(m,O),le=ae.value,ie=ae.handleChange,oe=n.useCallback((function(e){Q.current&&(Q.current.value=e,ie(c.createSyntheticEvent(new Event("change",{cancelable:!0,bubbles:!0}),Q.current)))}),[ie,Q]),ce=n.useCallback((function(){var e=0,n=v.default.Children.map(g,(function n(t){if(c.isComponentType(t,"SearchResult")){var r,a=(e+=1)-1,l=c.getNodeTextContent(t);return v.default.cloneElement(t,C(C({},t.props),{},{id:"result-".concat(a),key:"result-".concat(a),ref:null!==(r=t.props.ref)&&void 0!==r?r:null==Z?void 0:Z("".concat(a)),highlighted:a===X,onClick:function(e){var n,r;if(null===(n=(r=t.props).onClick)||void 0===n||n.call(r,e),oe(l),e.detail>=1&&V.current&&Q.current){var a,i=new Event("submit",{cancelable:!0,bubbles:!0});null===(a=V.current)||void 0===a||a.dispatchEvent(i)}}}))}if(c.isComponentType(t,"SearchResultGroup")){var i=v.default.Children.map(t.props.children,n);if(i&&i.length>0)return v.default.cloneElement(t,C(C({},t.props),{},{children:i}))}}));return{resultsCount:e,updatedChildren:n}}),[g,X,Q,Z,oe]),ue=n.useMemo((function(){return ce()}),[ce]),de=ue.updatedChildren,fe=ue.resultsCount,pe=function(e){switch(e){case"first":H(0);break;case"last":H(fe);break;case"next":var n=!k.default(X)&&X+1<fe?X+1:0;H(n);break;case"prev":var t=!k.default(X)&&X-1>=0?X-1:fe-1;H(t)}};return a.useAutoScroll(te,J,12),a.useBackdropClick((function(){B()}),[$,J],U&&re),v.default.createElement(E.default,{darkMode:I},v.default.createElement(G,{state:y,highlight:X,resultDynamicRefs:Z},v.default.createElement("form",R({role:"search",ref:V,className:r.cx(Je,u),onSubmit:function(e){e.preventDefault(),null==D||D(e),re&&(B(),oe(""))}},L),v.default.createElement("div",{ref:$,role:"searchbox",tabIndex:-1,onMouseDown:function(e){h&&e.preventDefault()},onClick:function(e){!function(e){h?(e.preventDefault(),e.stopPropagation()):K()}(e)},onFocus:function(e){var n,t=e.target,r=t===Y.current?Y.current:null!==(n=Q.current)&&void 0!==n?n:t;r.focus(),ne(r)},onKeyDown:function(e){var n,t,r=null===(n=J.current)||void 0===n?void 0:n.contains(document.activeElement);if((null===(t=$.current)||void 0===t?void 0:t.contains(document.activeElement))||r)switch(e.key){case c.keyMap.Enter:var a;null==te||null===(a=te.current)||void 0===a||a.click();break;case c.keyMap.Escape:var l;B(),null===(l=Q.current)||void 0===l||l.focus();break;case c.keyMap.ArrowDown:var i;if(re)null===(i=Q.current)||void 0===i||i.focus(),K(),e.preventDefault(),pe("next");break;case c.keyMap.ArrowUp:var o;if(re)null===(o=Q.current)||void 0===o||o.focus(),K(),e.preventDefault(),pe("prev");break;case c.keyMap.Tab:U&&B();break;default:re&&K()}},className:r.cx(Qe,Ye[p],Ze[z],(l={},T(l,en[z],ee===Q.current),T(l,nn[z],h),T(l,_e[z],!h),l)),"aria-label":j,"aria-labelledby":M},v.default.createElement(x.default,{className:r.cx(an[z],ln[p],T({},on[z],h)),role:"presentation"}),v.default.createElement("input",{type:"search",className:r.cx(tn,rn[z]),value:le,onChange:function(e){null==ie||ie(e)},placeholder:o,ref:Q,readOnly:h,"aria-disabled":h}),le&&v.default.createElement(S.default,{ref:Y,type:"button","aria-label":"Clear search",onClick:function(e){var n;e.stopPropagation(),oe(""),null==Q||null===(n=Q.current)||void 0===n||n.focus()},className:bn[p],tabIndex:h?-1:0,disabled:h},v.default.createElement(w.default,null))),re&&v.default.createElement(se,{open:U,refEl:$,ref:J},de))))}));mn.displayName="SearchInput";var vn,kn,xn,wn,Sn=c.createUniqueClassName("search-result-title"),En=c.createUniqueClassName("search-result-description"),On=r.css(sn||(sn=M(["\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"])),d.fontFamilies.default,d.typeScales.body1.fontSize,d.spacing[3],d.spacing[1],d.spacing[3],Sn,d.fontWeights.bold),Dn=(T(dn={},c.Theme.Light,r.css(cn||(cn=M(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),Sn,p.palette.black,En,p.palette.gray.dark1)),T(dn,c.Theme.Dark,r.css(un||(un=M(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),Sn,p.palette.gray.light2,En,p.palette.gray.light1)),dn),jn=(T(hn={},c.Theme.Light,r.css(fn||(fn=M(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),Sn,p.palette.gray.light1,En,p.palette.gray.light1)),T(hn,c.Theme.Dark,r.css(pn||(pn=M(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),Sn,p.palette.gray.dark1,En,p.palette.gray.dark1)),hn),Cn=r.css(gn||(gn=M(["\n  max-height: ","px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])),3*d.spacing[3]),Tn=["as","children","description","disabled","className","darkMode"],Rn=b.InferredPolymorphic((function(e,n){var t,a=e.as,l=void 0===a?"li":a,i=e.children,o=e.description,u=e.disabled,d=e.className,p=e.darkMode,h=N(e,Tn),g=s.useDarkMode(p).theme,b=c.getNodeTextContent(i),y=null!==(t=h["aria-label"])&&void 0!==t?t:h["aria-labelledby"]?"":b;return v.default.createElement(f.InputOption,R({},h,{as:l,ref:n,className:r.cx(On,Dn[g],T({},jn[g],u),d),disabled:u,"aria-labelledby":h["aria-labelledby"],"aria-label":y}),v.default.createElement("div",{className:Sn},i),o&&v.default.createElement("div",{className:r.cx(En,Cn)},o))}),"SearchResult");Rn.displayName="SearchResult";var Nn=r.css(vn||(vn=M(["\n  padding-top: 12px;\n  padding-bottom: 0;\n"]))),Mn=(T(wn={},c.Theme.Light,r.css(kn||(kn=M(["\n    color: ",";\n  "])),p.palette.gray.dark1)),T(wn,c.Theme.Dark,r.css(xn||(xn=M(["\n    color: ",";\n  "])),p.palette.gray.base)),wn),qn=["children","label"],Ln=function(e){var n=e.children,t=e.label,r=N(e,qn),a=c.validateChildren(n,["SearchResult","SearchResultGroup"]),l=s.useDarkMode().theme;return v.default.createElement("div",null,v.default.createElement(f.InputOption,R({"aria-label":t,isInteractive:!1,className:Nn},r),v.default.createElement(y.Overline,{className:Mn[l]},t)),a)};Ln.displayName="SearchResultGroup",e.SearchInput=mn,e.SearchResult=Rn,e.SearchResultGroup=Ln,e.SearchResultsMenu=se,e.Size=Ve,e.State=Ke}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("lodash/isUndefined"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/hooks"),require("@leafygreen-ui/icon/dist/MagnifyingGlass"),require("@leafygreen-ui/icon/dist/XWithCircle"),require("@leafygreen-ui/icon-button"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/popover"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/input-option"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/icon/dist/Refresh"),require("polished"),require("@leafygreen-ui/polymorphic"),require("@leafygreen-ui/typography")):"function"==typeof define&&define.amd?define(["exports","react","lodash/isUndefined","@leafygreen-ui/emotion","@leafygreen-ui/hooks","@leafygreen-ui/icon/dist/MagnifyingGlass","@leafygreen-ui/icon/dist/XWithCircle","@leafygreen-ui/icon-button","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/lib","@leafygreen-ui/popover","@leafygreen-ui/tokens","@leafygreen-ui/input-option","@leafygreen-ui/palette","@leafygreen-ui/icon/dist/Refresh","polished","@leafygreen-ui/polymorphic","@leafygreen-ui/typography"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/search-input"]={},e.React,e["/isUndefined"],e["@leafygreen-ui/emotion"],e["@leafygreen-ui/hooks"],e.MagnifyingGlass,e.XWithCircle,e["@leafygreen-ui/icon-button"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/popover"],e["@leafygreen-ui/tokens"],e["@leafygreen-ui/input-option"],e["@leafygreen-ui/palette"],e.Refresh,e.polished,e["@leafygreen-ui/polymorphic"],e["@leafygreen-ui/typography"])}(this,(function(e,n,t,r,a,l,o,i,s,c,u,d,f,p,h,g,b,y){"use strict";function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=m(n),k=m(t),x=m(l),w=m(o),S=m(i),E=m(s),O=m(u),C=m(h);function D(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function j(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?D(Object(t),!0).forEach((function(n){N(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):D(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function N(e,n,t){return(n=function(e){var n=function(e,n){if("object"!=typeof e||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!=typeof r)return r;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:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function T(){return T=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},T.apply(this,arguments)}function R(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)t=l[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)t=l[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}function M(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function P(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,a,l,o,i=[],s=!0,c=!1;try{if(l=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;s=!1}else for(;!(s=(r=l.call(t)).done)&&(i.push(r.value),i.length!==n);s=!0);}catch(e){c=!0,a=e}finally{try{if(!s&&null!=t.return&&(o=t.return(),Object(o)!==o))return}finally{if(c)throw a}}return i}}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return q(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return q(e,n)}(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 q(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var L,z,I,A,U=["children"],W=n.createContext({});function G(e){var n=e.children,t=R(e,U);return v.default.createElement(W.Provider,{value:t},n)}var F,X,H,B,K,V,$,J,Q,Y,Z=r.css(L||(L=M(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n  font-style: italic;\n  font-weight: 300;\n  padding-block: ","px;\n"])),d.spacing[2],d.spacing[1]),_=(N(A={},c.Theme.Light,r.css(z||(z=M(["\n    color: ",";\n  "])),p.palette.gray.dark1)),N(A,c.Theme.Dark,r.css(I||(I=M(["\n    color: ",";\n  "])),p.palette.gray.light1)),A),ee=function(){var e=s.useDarkMode().theme;return v.default.createElement(f.InputOption,{"aria-label":"No results found",isInteractive:!1,className:r.cx(Z,_[e])},v.default.createElement("span",null,"No results found"))},ne=r.css(F||(F=M(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n  padding-block: ","px;\n"])),d.spacing[2],d.spacing[1]),te=r.keyframes(X||(X=M(["\n  from {\n    transform: rotate(0deg);\n  } \n  to {\n    transform: rotate(360deg);\n  }\n"]))),re=r.css(H||(H=M(["\n  height: 16px;\n  width: 16px;\n  animation: "," 1.5s linear infinite;\n"])),te),ae=function(){var e=s.useDarkMode().darkMode;return v.default.createElement(f.InputOption,{"data-testid":"lg-search-input-loading-option","aria-label":"Loading results",isInteractive:!1,className:ne},v.default.createElement(C.default,{color:e?p.palette.blue.light1:p.palette.blue.base,className:re}),v.default.createElement("span",null,"Loading results"))},le=r.css(B||(B=M(["\n  box-shadow: 0px 4px 7px ",";\n  padding: 12px 0;\n  border-radius: 12px;\n"])),g.transparentize(.75,"#000000")),oe=(N($={},c.Theme.Light,r.css(K||(K=M(["\n    background-color: ",";\n  "])),p.palette.white)),N($,c.Theme.Dark,r.css(V||(V=M(["\n    background-color: ",";\n  "])),p.palette.gray.dark3)),$),ie=r.css(J||(J=M(["\n  padding: 0;\n  margin: 0;\n  border-radius: inherit;\n  overflow-y: auto;\n  scroll-behavior: smooth;\n"]))),se=["children","open","refEl","usePortal","portalClassName","portalContainer","scrollContainer","footerSlot"],ce=v.default.forwardRef((function(e,t){var l=e.children,o=e.open,i=void 0!==o&&o,c=e.refEl,u=e.usePortal,f=e.portalClassName,p=e.portalContainer,h=e.scrollContainer,g=e.footerSlot,b=R(e,se),y=s.useDarkMode().theme,m=n.useContext(W).state,x=n.useMemo((function(){var e,n;return null!==(e=null===(n=c.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0}),[c,i]),w=a.useAvailableSpace(c),S=k.default(w)?"unset":"".concat(Math.min(w,256),"px");return v.default.createElement(O.default,{"data-testid":"lg-search-input-popover",spacing:d.spacing[2],active:i,align:"bottom",justify:"start",className:r.cx(le,oe[y],r.css(Q||(Q=M(["\n            width: ","px;\n            min-width: ","px;\n          "])),x,x)),refEl:c,usePortal:u,portalClassName:u?f:void 0,portalContainer:u?p:null,scrollContainer:u?h:null},"loading"===m?v.default.createElement(ae,null):v.default.createElement(v.default.Fragment,null,v.default.createElement("ul",T({role:"listbox","aria-live":"polite","aria-relevant":"additions removals","aria-expanded":i,ref:t,className:r.cx(ie,r.css(Y||(Y=M(["\n                  max-height: ",";\n                "])),S))},b),v.default.Children.count(l)?l:v.default.createElement(ee,null)),g))}));ce.displayName="SearchResultsMenu";var ue,de,fe,pe,he,ge,be,ye,me,ve,ke,xe,we,Se,Ee,Oe,Ce,De,je,Ne,Te,Re,Me,Pe,qe,Le,ze,Ie,Ae,Ue,We,Ge,Fe,Xe,He,Be,Ke,Ve={Unset:"unset",Loading:"loading"},$e={Small:"small",Default:"default",Large:"large"},Je=function(e){return"0 0 0 100px ".concat(e," inset")},Qe=r.css(ue||(ue=M(["\n  outline: none;\n"]))),Ye=r.css(de||(de=M(["\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"])),d.transitionDuration.default),Ze=(N(ge={},$e.Small,r.css(fe||(fe=M(["\n    font-size: ","px;\n    line-height: ","px;\n    height: 28px;\n    grid-template-columns: 28px 1fr;\n    grid-auto-columns: 28px;\n  "])),d.typeScales.body1.fontSize,d.typeScales.body1.lineHeight)),N(ge,$e.Default,r.css(pe||(pe=M(["\n    font-size: ","px;\n    line-height: ","px;\n    height: 36px;\n    grid-template-columns: 36px 1fr;\n    grid-auto-columns: 36px;\n  "])),d.typeScales.body1.fontSize,d.typeScales.body1.lineHeight)),N(ge,$e.Large,r.css(he||(he=M(["\n    font-size: 18px;\n    line-height: 32px;\n    height: 48px;\n    grid-template-columns: 48px 1fr;\n    grid-auto-columns: 48px;\n  "])))),ge),_e=(N(me={},c.Theme.Light,r.css(be||(be=M(["\n    color: ",";\n    background: ",";\n    border-color: ",";\n  "])),p.palette.black,p.palette.white,p.palette.gray.base)),N(me,c.Theme.Dark,r.css(ye||(ye=M(["\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n  "])),p.palette.gray.light2,p.palette.gray.dark4,p.palette.gray.base)),me),en=(N(xe={},c.Theme.Light,r.css(ve||(ve=M(["\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus-within) {\n        box-shadow: ",";\n      }\n    }\n  "])),d.hoverRing.light.gray)),N(xe,c.Theme.Dark,r.css(ke||(ke=M(["\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus-within) {\n        box-shadow: ",";\n      }\n    }\n  "])),d.hoverRing.dark.gray)),xe),nn=(N(Ee={},c.Theme.Light,r.css(we||(we=M(["\n    &:not(:disabled):focus-within {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),d.focusRing.light.input,p.palette.white)),N(Ee,c.Theme.Dark,r.css(Se||(Se=M(["\n    &:not(:disabled):focus-within {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),d.focusRing.dark.input,p.palette.gray.dark4)),Ee),tn=(N(De={},c.Theme.Light,r.css(Oe||(Oe=M(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n  "])),p.palette.gray.base,p.palette.gray.light2,p.palette.gray.light1)),N(De,c.Theme.Dark,r.css(Ce||(Ce=M(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n  "])),p.palette.gray.dark2,p.palette.gray.dark3,p.palette.gray.dark2)),De),rn=r.css(je||(je=M(["\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"])),d.fontFamilies.default,d.fontWeights.regular),an=(N(Re={},c.Theme.Light,r.css(Ne||(Ne=M(["\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  "])),Je(p.palette.white),Je(p.palette.white),d.focusRing.light.input,Je(p.palette.white),d.hoverRing.light.gray,p.palette.gray.base,d.fontWeights.regular,p.palette.gray.base,p.palette.gray.base,p.palette.gray.base,Je(p.palette.gray.light2))),N(Re,c.Theme.Dark,r.css(Te||(Te=M(["\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  "])),p.palette.gray.light3,Je(p.palette.gray.dark4),Je(p.palette.gray.dark4),d.focusRing.dark.input,p.palette.blue.light1,Je(p.palette.gray.dark4),d.hoverRing.dark.gray,p.palette.gray.base,d.fontWeights.regular,p.palette.gray.dark1,p.palette.gray.dark1,p.palette.gray.dark1,Je(p.palette.gray.dark2))),Re),ln=(N(qe={},c.Theme.Light,r.css(Me||(Me=M(["\n    color: ",";\n  "])),p.palette.gray.dark1)),N(qe,c.Theme.Dark,r.css(Pe||(Pe=M(["\n    color: ",";\n  "])),p.palette.gray.light1)),qe),on=(N(Ae={},$e.Small,r.css(Le||(Le=M(["\n    left: 10px;\n  "])))),N(Ae,$e.Default,r.css(ze||(ze=M(["\n    left: 12px;\n  "])))),N(Ae,$e.Large,r.css(Ie||(Ie=M(["\n    left: 16px;\n  "])))),Ae),sn=(N(Ge={},c.Theme.Light,r.css(Ue||(Ue=M(["\n    color: ",";\n  "])),p.palette.gray.base)),N(Ge,c.Theme.Dark,r.css(We||(We=M(["\n    color: ",";\n  "])),p.palette.gray.dark1)),Ge);r.css(Fe||(Fe=M([""])));var cn,un,dn,fn,pn,hn,gn,bn,yn=(N(Ke={},$e.Small,r.css(Xe||(Xe=M(["\n    height: 26px;\n    width: 26px;\n  "])))),N(Ke,$e.Default,r.css(He||(He=M(["\n    height: 28px;\n    width: 28px;\n  "])))),N(Ke,$e.Large,r.css(Be||(Be=M(["\n    height: 28px;\n    width: 28px;\n  "])))),Ke),mn=["placeholder","className","darkMode","size","disabled","children","state","value","onChange","onSubmit","aria-label","aria-labelledby"],vn=v.default.forwardRef((function(e,t){var l,o=e.placeholder,i=void 0===o?"Search":o,u=e.className,d=e.darkMode,f=e.size,p=void 0===f?$e.Default:f,h=e.disabled,g=e.children,b=e.state,y=void 0===b?Ve.Unset:b,m=e.value,O=e.onChange,C=e.onSubmit,D=e["aria-label"],M=e["aria-labelledby"],q=R(e,mn),L=s.useDarkMode(d),z=L.theme,I=L.darkMode,A=P(n.useState(!1),2),U=A[0],W=A[1],F=P(n.useState(0),2),X=F[0],H=F[1],B=function(){return W(!1)},K=function(){return W(!0)},V=n.useRef(null),$=n.useRef(null),J=n.useRef(null),Q=a.useForwardedRef(t,null),Y=n.useRef(null),Z=a.useDynamicRefs({prefix:"result"}),_=P(n.useState(),2),ee=_[0],ne=_[1],te=Z("".concat(X)),re=!k.default(g),ae=a.useControlledValue(m,O),le=ae.value,oe=ae.handleChange,ie=n.useCallback((function(e){Q.current&&(Q.current.value=e,oe(c.createSyntheticEvent(new Event("change",{cancelable:!0,bubbles:!0}),Q.current)))}),[oe,Q]),se=n.useCallback((function(){var e=0,n=v.default.Children.map(g,(function n(t){if(c.isComponentType(t,"SearchResult")){var r,a=(e+=1)-1,l=c.getNodeTextContent(t);return v.default.cloneElement(t,j(j({},t.props),{},{id:"result-".concat(a),key:"result-".concat(a),ref:null!==(r=t.props.ref)&&void 0!==r?r:null==Z?void 0:Z("".concat(a)),highlighted:a===X,onClick:function(e){var n,r;if(null===(n=(r=t.props).onClick)||void 0===n||n.call(r,e),ie(l),e.detail>=1&&V.current&&Q.current){var a,o=new Event("submit",{cancelable:!0,bubbles:!0});null===(a=V.current)||void 0===a||a.dispatchEvent(o)}}}))}if(c.isComponentType(t,"SearchResultGroup")){var o=v.default.Children.map(t.props.children,n);if(o&&o.length>0)return v.default.cloneElement(t,j(j({},t.props),{},{children:o}))}}));return{resultsCount:e,updatedChildren:n}}),[g,X,Q,Z,ie]),ue=n.useMemo((function(){return se()}),[se]),de=ue.updatedChildren,fe=ue.resultsCount,pe=function(e){switch(e){case"first":H(0);break;case"last":H(fe);break;case"next":var n=!k.default(X)&&X+1<fe?X+1:0;H(n);break;case"prev":var t=!k.default(X)&&X-1>=0?X-1:fe-1;H(t)}};return a.useAutoScroll(te,J,12),a.useBackdropClick((function(){B()}),[$,J],U&&re),v.default.createElement(E.default,{darkMode:I},v.default.createElement(G,{state:y,highlight:X,resultDynamicRefs:Z},v.default.createElement("form",T({role:"search",ref:V,className:r.cx(Qe,u),onSubmit:function(e){e.preventDefault(),null==C||C(e),re&&(B(),ie(""))}},q),v.default.createElement("div",{ref:$,role:"searchbox",tabIndex:-1,onMouseDown:function(e){h&&e.preventDefault()},onClick:function(e){!function(e){h?(e.preventDefault(),e.stopPropagation()):K()}(e)},onFocus:function(e){var n,t=e.target,r=t===Y.current?Y.current:null!==(n=Q.current)&&void 0!==n?n:t;r.focus(),ne(r)},onKeyDown:function(e){var n,t,r=null===(n=J.current)||void 0===n?void 0:n.contains(document.activeElement);if((null===(t=$.current)||void 0===t?void 0:t.contains(document.activeElement))||r)switch(e.key){case c.keyMap.Enter:var a;null==te||null===(a=te.current)||void 0===a||a.click();break;case c.keyMap.Escape:var l;B(),null===(l=Q.current)||void 0===l||l.focus();break;case c.keyMap.ArrowDown:var o;if(re)null===(o=Q.current)||void 0===o||o.focus(),K(),e.preventDefault(),pe("next");break;case c.keyMap.ArrowUp:var i;if(re)null===(i=Q.current)||void 0===i||i.focus(),K(),e.preventDefault(),pe("prev");break;case c.keyMap.Tab:U&&B();break;default:re&&K()}},className:r.cx(Ye,Ze[p],_e[z],(l={},N(l,nn[z],ee===Q.current),N(l,tn[z],h),N(l,en[z],!h),l)),"aria-label":D,"aria-labelledby":M},v.default.createElement(x.default,{className:r.cx(ln[z],on[p],N({},sn[z],h)),role:"presentation"}),v.default.createElement("input",{type:"search",className:r.cx(rn,an[z]),value:le,onChange:function(e){null==oe||oe(e)},placeholder:i,ref:Q,readOnly:h,"aria-disabled":h}),le&&v.default.createElement(S.default,{ref:Y,type:"button","aria-label":"Clear search",onClick:function(e){var n;e.stopPropagation(),ie(""),null==Q||null===(n=Q.current)||void 0===n||n.focus()},className:yn[p],tabIndex:h?-1:0,disabled:h},v.default.createElement(w.default,null))),re&&v.default.createElement(ce,{open:U,refEl:$,ref:J},de))))}));vn.displayName="SearchInput";var kn,xn,wn,Sn,En=c.createUniqueClassName("search-result-title"),On=c.createUniqueClassName("search-result-description"),Cn=r.css(cn||(cn=M(["\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"])),d.fontFamilies.default,d.typeScales.body1.fontSize,d.spacing[3],d.spacing[1],d.spacing[3],En,d.fontWeights.bold),Dn=(N(fn={},c.Theme.Light,r.css(un||(un=M(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),En,p.palette.black,On,p.palette.gray.dark1)),N(fn,c.Theme.Dark,r.css(dn||(dn=M(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),En,p.palette.gray.light2,On,p.palette.gray.light1)),fn),jn=(N(gn={},c.Theme.Light,r.css(pn||(pn=M(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),En,p.palette.gray.light1,On,p.palette.gray.light1)),N(gn,c.Theme.Dark,r.css(hn||(hn=M(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),En,p.palette.gray.dark1,On,p.palette.gray.dark1)),gn),Nn=r.css(bn||(bn=M(["\n  max-height: ","px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])),3*d.spacing[3]),Tn=["as","children","description","disabled","className","darkMode"],Rn=b.InferredPolymorphic((function(e,n){var t,a=e.as,l=void 0===a?"li":a,o=e.children,i=e.description,u=e.disabled,d=e.className,p=e.darkMode,h=R(e,Tn),g=s.useDarkMode(p).theme,b=c.getNodeTextContent(o),y=null!==(t=h["aria-label"])&&void 0!==t?t:h["aria-labelledby"]?"":b;return v.default.createElement(f.InputOption,T({},h,{as:l,ref:n,className:r.cx(Cn,Dn[g],N({},jn[g],u),d),disabled:u,"aria-labelledby":h["aria-labelledby"],"aria-label":y}),v.default.createElement("div",{className:En},o),i&&v.default.createElement("div",{className:r.cx(On,Nn)},i))}),"SearchResult");Rn.displayName="SearchResult";var Mn=r.css(kn||(kn=M(["\n  padding-top: 12px;\n  padding-bottom: 0;\n"]))),Pn=(N(Sn={},c.Theme.Light,r.css(xn||(xn=M(["\n    color: ",";\n  "])),p.palette.gray.dark1)),N(Sn,c.Theme.Dark,r.css(wn||(wn=M(["\n    color: ",";\n  "])),p.palette.gray.base)),Sn),qn=["children","label"],Ln=function(e){var n=e.children,t=e.label,r=R(e,qn),a=c.validateChildren(n,["SearchResult","SearchResultGroup"]),l=s.useDarkMode().theme;return v.default.createElement("div",null,v.default.createElement(f.InputOption,T({"aria-label":t,isInteractive:!1,className:Mn},r),v.default.createElement(y.Overline,{className:Pn[l]},t)),a)};Ln.displayName="SearchResultGroup",e.SearchInput=vn,e.SearchResult=Rn,e.SearchResultGroup=Ln,e.SearchResultsMenu=ce,e.Size=$e,e.State=Ve}));
 //# sourceMappingURL=index.js.map

dist/SearchResultsMenu/SearchResultsMenu.d.ts

@@ -18,2 +18,3 @@ import React from 'react';
     open?: boolean | undefined;
+    footerSlot?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
 }, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
@@ -32,3 +33,4 @@ children?: React.ReactNode;
     open?: boolean | undefined;
+    footerSlot?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
 }, "ref">) & React.RefAttributes<HTMLUListElement>>;
 //# sourceMappingURL=SearchResultsMenu.d.ts.map

dist/SearchResultsMenu/SearchResultsMenu.types.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { HTMLElementProps } from '@leafygreen-ui/lib';
@@ -7,3 +7,4 @@ import { PortalControlProps } from '@leafygreen-ui/popover';
     open?: boolean;
+    footerSlot?: ReactElement;
 };
 //# sourceMappingURL=SearchResultsMenu.types.d.ts.map

package.json

 {
   "name": "@leafygreen-ui/search-input",
-  "version": "2.0.17",
+  "version": "2.1.0",
   "description": "leafyGreen UI Kit Search Input",
@@ -36,3 +36,3 @@ "main": "./dist/index.js",
     "@leafygreen-ui/hooks": "^8.0.0",
-    "@leafygreen-ui/icon": "^11.23.0",
+    "@leafygreen-ui/icon": "^11.24.0",
     "@leafygreen-ui/icon-button": "^15.0.18",
@@ -43,3 +43,3 @@ "@leafygreen-ui/input-option": "^1.0.11",
     "@leafygreen-ui/polymorphic": "^1.3.6",
-    "@leafygreen-ui/popover": "^11.0.18",
+    "@leafygreen-ui/popover": "^11.1.0",
     "@leafygreen-ui/tokens": "^2.2.0",
@@ -46,0 +46,0 @@ "@leafygreen-ui/typography": "^17.0.1",

src/SearchResultsMenu/SearchResultsMenu.types.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 
@@ -10,2 +10,3 @@ import { HTMLElementProps } from '@leafygreen-ui/lib';
     open?: boolean;
+    footerSlot?: ReactElement;
   };

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 O,useForwardedRef as j,useDynamicRefs as A,useControlledValue as C,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,Oe,je,Ae,Ce,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  "])),J.white)),Y(ke,p.Dark,s(we||(we=ee(["\n    background-color: ",";\n  "])),J.gray.dark3)),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=e.forwardRef((function(r,a){var o=r.children,i=r.open,l=void 0!==i&&i,c=r.refEl,u=I().theme,p=n(he).state,h=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]),f=O(c),g=S(f)?"unset":"".concat(Math.min(f,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[u],s(Ee||(Ee=ee(["\n          width: ","px;\n          min-width: ","px;\n        "])),h,h)),refEl:c},"loading"===p?e.createElement(gn,null):e.createElement("ul",{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            "])),g))},e.Children.count(o)?o:e.createElement(un,null)))}));vn.displayName="SearchResultsMenu";var wn=function(e){return"0 0 0 100px ".concat(e," inset")},kn=s(Oe||(Oe=ee(["\n  outline: none;\n"]))),xn=s(je||(je=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),En=(Y(De={},se,s(Ae||(Ae=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(Ce||(Ce=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),Sn=(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),Cn=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),Nn=(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  "])),wn(J.white),wn(J.white),B.light.input,wn(J.white),W.light.gray,J.gray.base,q.regular,J.gray.base,J.gray.base,J.gray.base,wn(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,wn(J.gray.dark4),wn(J.gray.dark4),B.dark.input,J.blue.light1,wn(J.gray.dark4),W.dark.gray,J.gray.base,q.regular,J.gray.dark1,J.gray.dark1,J.gray.dark1,wn(J.gray.dark2))),Ke),Dn=(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),Pn=(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),zn=(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 Ln,Mn,In,Tn,Rn,Gn,Un,Wn,Bn=(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),Hn=["placeholder","className","darkMode","size","disabled","children","state","value","onChange","onSubmit","aria-label","aria-labelledby"],qn=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,O=n.onChange,T=n.onSubmit,R=n["aria-label"],G=n["aria-labelledby"],U=_(n,Hn),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=j(r,null),ie=o(null),le=A({prefix:"result"}),se=ne(a(),2),ue=se[0],pe=se[1],he=le("".concat(V)),ge=!S(w),me=C(E,O),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(kn,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(xn,En[y],Sn[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(Dn[B],Pn[y],Y({},zn[B],v)),role:"presentation"}),e.createElement("input",{type:"search",className:d(Cn,Nn[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:Bn[y],tabIndex:v?-1:0,disabled:v},e.createElement(z,null))),ge&&e.createElement(vn,{open:F,refEl:te,ref:ae},xe))))}));qn.displayName="SearchInput";var Fn,Jn,Kn,Vn,Xn=b("search-result-title"),$n=b("search-result-description"),Qn=s(Ln||(Ln=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],Xn,q.bold),Yn=(Y(Tn={},p.Light,s(Mn||(Mn=ee(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),Xn,J.black,$n,J.gray.dark1)),Y(Tn,p.Dark,s(In||(In=ee(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),Xn,J.gray.light2,$n,J.gray.light1)),Tn),Zn=(Y(Un={},p.Light,s(Rn||(Rn=ee(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),Xn,J.gray.light1,$n,J.gray.light1)),Y(Un,p.Dark,s(Gn||(Gn=ee(["\n    & ."," {\n      color: ",";\n    }\n    & ."," {\n      color: ",";\n    }\n  "])),Xn,J.gray.dark1,$n,J.gray.dark1)),Un),_n=s(Wn||(Wn=ee(["\n  max-height: ","px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])),3*R[3]),er=["as","children","description","disabled","className","darkMode"],nr=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,er),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(Qn,Yn[h],Y({},Zn[h],c),s),disabled:c,"aria-labelledby":p["aria-labelledby"],"aria-label":m}),e.createElement("div",{className:Xn},i),l&&e.createElement("div",{className:d($n,_n)},l))}),"SearchResult");nr.displayName="SearchResult";var rr,tr,ar,or,ir=s(Fn||(Fn=ee(["\n  padding-top: 12px;\n  padding-bottom: 0;\n"]))),lr=(Y(Vn={},p.Light,s(Jn||(Jn=ee(["\n    color: ",";\n  "])),J.gray.dark1)),Y(Vn,p.Dark,s(Kn||(Kn=ee(["\n    color: ",";\n  "])),J.gray.base)),Vn),cr=["children","label"],sr=function(n){var r=n.children,t=n.label,a=_(n,cr),o=y(r,["SearchResult","SearchResultGroup"]),i=I().theme;return e.createElement("div",null,e.createElement(F,Z({"aria-label":t,isInteractive:!1,className:ir},a),e.createElement(k,{className:lr[i]},t)),o)};sr.displayName="SearchResultGroup";var dr,ur={title:"Components/SearchInput",component:qn,parameters:{default:"LiveExample",controls:{exclude:[].concat((dr=w,function(e){if(Array.isArray(e))return te(e)}(dr)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(dr)||re(dr)||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"}}},pr=[{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"}],hr=function(n){var r=ne(a(),2),t=r[0],o=r[1],i=ne(a(pr),2),d=i[0],u=i[1];return e.createElement("div",{className:s(rr||(rr=ee(["\n        width: 256px;\n      "])))},e.createElement(qn,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(pr.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(pr.find((function(e){return c(e.name)===c(t)})))}},n),d.map((function(n){return e.createElement(nr,{key:n.name,description:n.description,onClick:function(){return console.log("Storybook: Clicked",n.name)}},l(n.name))}))),t&&e.createElement("div",{className:s(tr||(tr=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)))};hr.parameters={chromatic:{disableSnapshot:!0}},hr.argTypes={onChange:{action:"Change"},onSubmit:{action:"Submit"},onClick:{action:"Click"}};var fr=function(n){return e.createElement(qn,Z({className:s(ar||(ar=ee(["\n      width: 200px;\n    "])))},n))};fr.parameters={chromatic:{disableSnapshot:!0}};var gr=function(n){return e.createElement(qn,Z({className:s(or||(or=ee(["\n      width: 200px;\n    "]))),onChange:function(){console.log("SB: Change")}},n),e.createElement(nr,{onClick:function(){console.log("SB: Click Apple")},description:"This is a description"},"Apple"),e.createElement(nr,null,"Banana"),e.createElement(nr,{as:"a",href:"#",description:"This is a link"},"Carrot"),e.createElement(nr,{description:"This is a very very long description. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."},"Dragonfruit"),e.createElement(sr,{label:"Peppers"},e.createElement(nr,{description:"A moderately hot chili pepper used to flavor dishes"},"Cayenne"),e.createElement(nr,null,"Ghost pepper"),e.createElement(nr,null,"Habanero"),e.createElement(nr,null,"Jalapeño"),e.createElement(nr,null,"Red pepper"),e.createElement(nr,null,"Scotch bonnet")))};gr.parameters={chromatic:{disableSnapshot:!0}};var mr=function(){};export{fr as Basic,mr as Generated,hr as LiveExample,gr as WithResults,ur 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{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  "])),J.white)),Y(ke,p.Dark,s(we||(we=ee(["\n    background-color: ",";\n  "])),J.gray.dark3)),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};

No alert changes

Improved metrics

Total package byte prevSize

315599

increased by1.58%

Lines of code

3794

increased by0.82%

Dependency changes

• Updated@leafygreen-ui/icon@^11.24.0

• Updated@leafygreen-ui/popover@^11.1.0