@leafygreen-ui/search-input
Advanced tools
Comparing version 2.0.6-next.1 to 2.0.6-next.2
| # @leafygreen-ui/search-input | ||
| ## 2.0.6-next.2 | ||
| ### Patch Changes | ||
| - b060d06ce: Updates story files for Storybook 7.x | ||
| - Updated dependencies [6a3f03fd2] | ||
| - Updated dependencies [b060d06ce] | ||
| - Updated dependencies [b060d06ce] | ||
| - @leafygreen-ui/typography@16.4.1-next.2 | ||
| - @leafygreen-ui/hooks@7.7.4-next.2 | ||
| - @leafygreen-ui/icon@11.16.1-next.2 | ||
| - @leafygreen-ui/icon-button@15.0.11-next.2 | ||
| - @leafygreen-ui/input-option@1.0.4-next.2 | ||
| - @leafygreen-ui/leafygreen-provider@3.1.3-next.2 | ||
| - @leafygreen-ui/lib@10.3.4-next.2 | ||
| - @leafygreen-ui/polymorphic@1.3.2-next.2 | ||
| - @leafygreen-ui/popover@11.0.10-next.2 | ||
| ## 2.0.6-next.1 | ||
@@ -4,0 +22,0 @@ |
@@ -0,1 +1,2 @@ | ||
| /// <reference types="react" /> | ||
| import { SearchResultGroupProps } from './SearchResultGroup.types'; | ||
@@ -2,0 +3,0 @@ export declare const SearchResultGroup: { |
@@ -0,2 +1,3 @@ | ||
| /// <reference types="react" /> | ||
| export declare const EmptyOption: () => JSX.Element; | ||
| //# sourceMappingURL=EmptyOption.d.ts.map |
@@ -0,2 +1,3 @@ | ||
| /// <reference types="react" /> | ||
| export declare const LoadingOption: () => JSX.Element; | ||
| //# sourceMappingURL=LoadingOption.d.ts.map |
@@ -6,3 +6,3 @@ import React from 'react'; | ||
| */ | ||
| export declare const SearchResultsMenu: React.ForwardRefExoticComponent<Pick<SearchResultsMenuProps, "key" | "portalContainer" | "scrollContainer" | keyof React.HTMLAttributes<HTMLUListElement> | "open" | "refEl" | "usePortal" | "portalClassName"> & React.RefAttributes<HTMLUListElement>>; | ||
| export declare const SearchResultsMenu: React.ForwardRefExoticComponent<Pick<SearchResultsMenuProps, "key" | "open" | keyof React.HTMLAttributes<HTMLUListElement> | "refEl" | "usePortal" | "portalClassName" | "portalContainer" | "scrollContainer"> & React.RefAttributes<HTMLUListElement>>; | ||
| //# sourceMappingURL=SearchResultsMenu.d.ts.map |
| { | ||
| "name": "@leafygreen-ui/search-input", | ||
| "version": "2.0.6-next.1", | ||
| "version": "2.0.6-next.2", | ||
| "description": "leafyGreen UI Kit Search Input", | ||
@@ -33,12 +33,12 @@ "main": "./dist/index.js", | ||
| "@leafygreen-ui/emotion": "^4.0.4", | ||
| "@leafygreen-ui/hooks": "^7.7.4-next.1", | ||
| "@leafygreen-ui/icon": "^11.16.1-next.1", | ||
| "@leafygreen-ui/icon-button": "^15.0.11-next.1", | ||
| "@leafygreen-ui/input-option": "^1.0.4-next.1", | ||
| "@leafygreen-ui/lib": "^10.3.4-next.1", | ||
| "@leafygreen-ui/hooks": "^7.7.4-next.2", | ||
| "@leafygreen-ui/icon": "^11.16.1-next.2", | ||
| "@leafygreen-ui/icon-button": "^15.0.11-next.2", | ||
| "@leafygreen-ui/input-option": "^1.0.4-next.2", | ||
| "@leafygreen-ui/lib": "^10.3.4-next.2", | ||
| "@leafygreen-ui/palette": "^4.0.4", | ||
| "@leafygreen-ui/polymorphic": "^1.3.2-next.1", | ||
| "@leafygreen-ui/popover": "^11.0.10-next.1", | ||
| "@leafygreen-ui/polymorphic": "^1.3.2-next.2", | ||
| "@leafygreen-ui/popover": "^11.0.10-next.2", | ||
| "@leafygreen-ui/tokens": "^2.1.0", | ||
| "@leafygreen-ui/typography": "^16.4.1-next.1", | ||
| "@leafygreen-ui/typography": "^16.4.1-next.2", | ||
| "lodash": "^4.17.21", | ||
@@ -48,4 +48,4 @@ "polished": "^4.2.2" | ||
| "peerDependencies": { | ||
| "@leafygreen-ui/leafygreen-provider": "^3.1.3-next.1" | ||
| "@leafygreen-ui/leafygreen-provider": "^3.1.3-next.2" | ||
| } | ||
| } |
@@ -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{palette as k}from"@leafygreen-ui/palette";import{Overline as x,H1 as E,Body as S}from"@leafygreen-ui/typography";import O from"lodash/isUndefined";import{useAvailableSpace as j,useForwardedRef as C,useDynamicRefs as A,useControlledValue as N,useAutoScroll as D,useBackdropClick as P}from"@leafygreen-ui/hooks";import z from"@leafygreen-ui/icon/dist/MagnifyingGlass";import L from"@leafygreen-ui/icon/dist/XWithCircle";import M from"@leafygreen-ui/icon-button";import I,{useDarkMode as T}from"@leafygreen-ui/leafygreen-provider";import R from"@leafygreen-ui/popover";import{spacing as G,transitionDuration as U,typeScales as B,hoverRing as W,focusRing as H,fontFamilies as q,fontWeights as F}from"@leafygreen-ui/tokens";import{InputOption as J}from"@leafygreen-ui/input-option";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,Ce,Ae,Ne,De,Pe,ze,Le,Me,Ie,Te,Re,Ge,Ue,Be,We,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"])),G[2],G[1]),dn=(Y(le={},p.Light,s(oe||(oe=ee(["\n color: ",";\n "])),k.gray.dark1)),Y(le,p.Dark,s(ie||(ie=ee(["\n color: ",";\n "])),k.gray.light1)),le),un=function(){var n=T().theme;return e.createElement(J,{"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"])),G[2],G[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=T().darkMode;return e.createElement(J,{"data-testid":"lg-search-input-loading-option","aria-label":"Loading results",isInteractive:!1,className:pn},e.createElement(K,{color:n?k.blue.light1:k.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 "])),k.white)),Y(ke,p.Dark,s(we||(we=ee(["\n background-color: ",";\n "])),k.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=T().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=j(c),g=O(f)?"unset":"".concat(Math.min(f,256),"px");return e.createElement(R,{"data-testid":"lg-search-input-popover",spacing:G[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"])),U.default),En=(Y(De={},se,s(Ce||(Ce=ee(["\n font-size: ","px;\n line-height: ","px;\n height: 28px;\n grid-template-columns: 28px 1fr;\n grid-auto-columns: 28px;\n "])),B.body1.fontSize,B.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 "])),B.body1.fontSize,B.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 "])),k.black,k.white,k.gray.base)),Y(Le,p.Dark,s(ze||(ze=ee(["\n color: ",";\n background-color: ",";\n border-color: ",";\n "])),k.gray.light2,k.gray.dark4,k.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 "])),H.light.input,k.white)),Y(Ue,p.Dark,s(Ge||(Ge=ee(["\n &:not(:disabled):focus-within {\n box-shadow: ",";\n border-color: ",";\n }\n "])),H.dark.input,k.gray.dark4)),Ue),Cn=(Y(He={},p.Light,s(Be||(Be=ee(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n "])),k.gray.base,k.gray.light2,k.gray.light1)),Y(He,p.Dark,s(We||(We=ee(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n "])),k.gray.dark2,k.gray.dark3,k.gray.dark2)),He),An=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 &:disabled {\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"])),q.default,F.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 &:not(:disabled) {\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 &:disabled {\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(k.white),wn(k.white),H.light.input,wn(k.white),W.light.gray,k.gray.base,F.regular,k.gray.base,k.gray.base,k.gray.base,wn(k.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 &:not(:disabled) {\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 &:disabled {\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 "])),k.gray.light3,wn(k.gray.dark4),wn(k.gray.dark4),H.dark.input,k.blue.light1,wn(k.gray.dark4),W.dark.gray,k.gray.base,F.regular,k.gray.base,k.gray.dark1,k.gray.dark1,wn(k.gray.dark2))),Ke),Dn=(Y($e={},p.Light,s(Ve||(Ve=ee(["\n color: ",";\n "])),k.gray.dark1)),Y($e,p.Dark,s(Xe||(Xe=ee(["\n color: ",";\n "])),k.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 "])),k.gray.base)),Y(rn,p.Dark,s(nn||(nn=ee(["\n color: ",";\n "])),k.gray.dark1)),rn);s(tn||(tn=ee([""])));var Ln,Mn,In,Tn,Rn,Gn,Un,Bn,Wn=(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,S=n.onChange,j=n.onSubmit,R=n["aria-label"],G=n["aria-labelledby"],U=_(n,Hn),B=T(p),W=B.theme,H=B.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=C(r,null),ie=o(null),le=A({prefix:"result"}),se=ne(a(),2),ue=se[0],pe=se[1],he=le("".concat(V)),ge=!O(w),me=N(E,S),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=!O(V)&&V+1<Ee?V+1:0;X(n);break;case"prev":var r=!O(V)&&V-1>=0?V-1:Ee-1;X(r)}};return D(he,ae,12),P((function(){$()}),[te,ae],F&&ge),e.createElement(I,{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==j||j(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.keyCode){case m.Enter:var a;e.stopPropagation(),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[W],(l={},Y(l,jn[W],ue===oe.current),Y(l,Cn[W],v),Y(l,On[W],!v),l)),"aria-label":R,"aria-labelledby":G},e.createElement(z,{className:d(Dn[W],Pn[y],Y({},zn[W],v)),role:"presentation"}),e.createElement("input",{type:"search",className:d(An,Nn[W]),value:be,onChange:function(e){null==ye||ye(e)},placeholder:s,ref:oe,readOnly:v}),be&&e.createElement(M,{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:Wn[y],tabIndex:v?-1:0,disabled:v},e.createElement(L,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"])),q.default,B.body1.fontSize,G[3],G[1],G[3],Xn,F.bold),Yn=(Y(Tn={},p.Light,s(Mn||(Mn=ee(["\n & ."," {\n color: ",";\n }\n & ."," {\n color: ",";\n }\n "])),Xn,k.black,$n,k.gray.dark1)),Y(Tn,p.Dark,s(In||(In=ee(["\n & ."," {\n color: ",";\n }\n & ."," {\n color: ",";\n }\n "])),Xn,k.gray.light2,$n,k.gray.light1)),Tn),Zn=(Y(Un={},p.Light,s(Rn||(Rn=ee(["\n & ."," {\n color: ",";\n }\n & ."," {\n color: ",";\n }\n "])),Xn,k.gray.light1,$n,k.gray.light1)),Y(Un,p.Dark,s(Gn||(Gn=ee(["\n & ."," {\n color: ",";\n }\n & ."," {\n color: ",";\n }\n "])),Xn,k.gray.dark1,$n,k.gray.dark1)),Un),_n=s(Bn||(Bn=ee(["\n max-height: ","px;\n overflow: hidden;\n text-overflow: ellipsis;\n"])),3*G[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=T(u).theme,f=g(i),m=null!==(t=p["aria-label"])&&void 0!==t?t:p["aria-labelledby"]?"":f;return e.createElement(J,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 "])),k.gray.dark1)),Y(Vn,p.Dark,s(Kn||(Kn=ee(["\n color: ",";\n "])),k.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=T().theme;return e.createElement("div",null,e.createElement(J,Z({"aria-label":t,isInteractive:!1,className:ir},a),e.createElement(x,{className:lr[i]},t)),o)};sr.displayName="SearchResultGroup";var dr,ur={title:"Components/SearchInput",component:qn,argTypes:{darkMode:v.darkMode,state:{control:"select",options:Object.values(ce)},placeholder:{control:"text"},disabled:{control:"boolean"}},parameters:{default:"Basic",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"])}}},pr=function(n){return e.createElement(qn,Z({className:s(rr||(rr=ee(["\n width: 200px;\n "])))},n))},hr=function(n){return e.createElement(qn,Z({className:s(tr||(tr=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")))},fr=[{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"}],gr=function(n){var r=ne(a(),2),t=r[0],o=r[1],i=ne(a(fr),2),d=i[0],u=i[1];return e.createElement("div",{className:s(ar||(ar=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(fr.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(fr.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(or||(or=ee(["\n min-width: min-content;\n margin-block: 20px;\n padding: 20px;\n outline: 1px solid ",";\n "])),k.green.dark2)},e.createElement(E,null,l(t.name)),e.createElement(S,null,t.description)))};gr.argTypes={onChange:{action:"Change"},onSubmit:{action:"Submit"},onClick:{action:"Click"}};export{pr as Basic,gr as LiveSearch,hr 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}from"@leafygreen-ui/lib";import{palette as w}from"@leafygreen-ui/palette";import{Overline as k,H1 as x,Body as E}from"@leafygreen-ui/typography";import O from"lodash/isUndefined";import{useAvailableSpace as S,useForwardedRef as j,useDynamicRefs as C,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 R}from"@leafygreen-ui/leafygreen-provider";import T from"@leafygreen-ui/popover";import{spacing as I,transitionDuration as G,typeScales as U,hoverRing as B,focusRing as W,fontFamilies as H,fontWeights as q}from"@leafygreen-ui/tokens";import{InputOption as F}from"@leafygreen-ui/input-option";import J from"@leafygreen-ui/icon/dist/Refresh";import{transparentize as K}from"polished";import{InferredPolymorphic as V}from"@leafygreen-ui/polymorphic";function X(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 $(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?X(Object(r),!0).forEach((function(n){Q(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):X(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function Q(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 Y(){return Y=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},Y.apply(this,arguments)}function Z(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 _(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function ee(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)||function(e,n){if(!e)return;if("string"==typeof e)return ne(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 ne(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 ne(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 re,te,ae,oe,ie={Unset:"unset",Loading:"loading"},le="small",ce="default",se="large",de=["children"],ue=r({});function pe(n){var r=n.children,t=Z(n,de);return e.createElement(ue.Provider,{value:t},r)}var he,fe,ge,me,be,ye,ve,we,ke,xe,Ee,Oe,Se,je,Ce,Ae,Ne,De,Pe,ze,Le,Me,Re,Te,Ie,Ge,Ue,Be,We,He,qe,Fe,Je,Ke,Ve,Xe,$e,Qe,Ye,Ze,_e,en,nn,rn,tn,an,on,ln=s(re||(re=_(["\n display: flex;\n align-items: center;\n gap: ","px;\n font-style: italic;\n font-weight: 300;\n padding-block: ","px;\n"])),I[2],I[1]),cn=(Q(oe={},p.Light,s(te||(te=_(["\n color: ",";\n "])),w.gray.dark1)),Q(oe,p.Dark,s(ae||(ae=_(["\n color: ",";\n "])),w.gray.light1)),oe),sn=function(){var n=R().theme;return e.createElement(F,{"aria-label":"No results found",isInteractive:!1,className:d(ln,cn[n])},e.createElement("span",null,"No results found"))},dn=s(he||(he=_(["\n display: flex;\n align-items: center;\n gap: ","px;\n padding-block: ","px;\n"])),I[2],I[1]),un=u(fe||(fe=_(["\n from {\n transform: rotate(0deg);\n } \n to {\n transform: rotate(360deg);\n }\n"]))),pn=s(ge||(ge=_(["\n height: 16px;\n width: 16px;\n animation: "," 1.5s linear infinite;\n"])),un),hn=function(){var n=R().darkMode;return e.createElement(F,{"data-testid":"lg-search-input-loading-option","aria-label":"Loading results",isInteractive:!1,className:dn},e.createElement(J,{color:n?w.blue.light1:w.blue.base,className:pn}),e.createElement("span",null,"Loading results"))},fn=s(me||(me=_(["\n box-shadow: 0px 4px 7px ",";\n padding: 12px 0;\n border-radius: 12px;\n"])),K(.75,"#000000")),gn=(Q(ve={},p.Light,s(be||(be=_(["\n background-color: ",";\n "])),w.white)),Q(ve,p.Dark,s(ye||(ye=_(["\n background-color: ",";\n "])),w.gray.dark3)),ve),mn=s(we||(we=_(["\n padding: 0;\n margin: 0;\n border-radius: inherit;\n overflow-y: auto;\n scroll-behavior: smooth;\n"]))),bn=e.forwardRef((function(r,a){var o=r.children,i=r.open,l=void 0!==i&&i,c=r.refEl,u=R().theme,p=n(ue).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=S(c),g=O(f)?"unset":"".concat(Math.min(f,256),"px");return e.createElement(T,{"data-testid":"lg-search-input-popover",spacing:I[2],active:l,align:"bottom",justify:"start",className:d(fn,gn[u],s(ke||(ke=_(["\n width: ","px;\n min-width: ","px;\n "])),h,h)),refEl:c},"loading"===p?e.createElement(hn,null):e.createElement("ul",{role:"listbox","aria-live":"polite","aria-relevant":"additions removals","aria-expanded":l,ref:a,className:d(mn,s(xe||(xe=_(["\n max-height: ",";\n "])),g))},e.Children.count(o)?o:e.createElement(sn,null)))}));bn.displayName="SearchResultsMenu";var yn=function(e){return"0 0 0 100px ".concat(e," inset")},vn=s(Ee||(Ee=_(["\n outline: none;\n"]))),wn=s(Oe||(Oe=_(["\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),kn=(Q(Ae={},le,s(Se||(Se=_(["\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)),Q(Ae,ce,s(je||(je=_(["\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)),Q(Ae,se,s(Ce||(Ce=_(["\n font-size: 18px;\n line-height: 32px;\n height: 48px;\n grid-template-columns: 48px 1fr;\n grid-auto-columns: 48px;\n "])))),Ae),xn=(Q(Pe={},p.Light,s(Ne||(Ne=_(["\n color: ",";\n background: ",";\n border-color: ",";\n "])),w.black,w.white,w.gray.base)),Q(Pe,p.Dark,s(De||(De=_(["\n color: ",";\n background-color: ",";\n border-color: ",";\n "])),w.gray.light2,w.gray.dark4,w.gray.base)),Pe),En=(Q(Me={},p.Light,s(ze||(ze=_(["\n &:hover,\n &:active {\n &:not(:disabled):not(:focus-within) {\n box-shadow: ",";\n }\n }\n "])),B.light.gray)),Q(Me,p.Dark,s(Le||(Le=_(["\n &:hover,\n &:active {\n &:not(:disabled):not(:focus-within) {\n box-shadow: ",";\n }\n }\n "])),B.dark.gray)),Me),On=(Q(Ie={},p.Light,s(Re||(Re=_(["\n &:not(:disabled):focus-within {\n box-shadow: ",";\n border-color: ",";\n }\n "])),W.light.input,w.white)),Q(Ie,p.Dark,s(Te||(Te=_(["\n &:not(:disabled):focus-within {\n box-shadow: ",";\n border-color: ",";\n }\n "])),W.dark.input,w.gray.dark4)),Ie),Sn=(Q(Be={},p.Light,s(Ge||(Ge=_(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n "])),w.gray.base,w.gray.light2,w.gray.light1)),Q(Be,p.Dark,s(Ue||(Ue=_(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n "])),w.gray.dark2,w.gray.dark3,w.gray.dark2)),Be),jn=s(We||(We=_(["\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 &:disabled {\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),Cn=(Q(Fe={},p.Light,s(He||(He=_(["\n &:-webkit-autofill {\n color: inherit;\n background: transparent;\n border: none;\n -webkit-text-fill-color: inherit;\n\n &:not(:disabled) {\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 &:disabled {\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 "])),yn(w.white),yn(w.white),W.light.input,yn(w.white),B.light.gray,w.gray.base,q.regular,w.gray.base,w.gray.base,w.gray.base,yn(w.gray.light2))),Q(Fe,p.Dark,s(qe||(qe=_(["\n &:-webkit-autofill {\n color: inherit;\n background: transparent;\n border: none;\n -webkit-text-fill-color: ",";\n &:not(:disabled) {\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 &:disabled {\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 "])),w.gray.light3,yn(w.gray.dark4),yn(w.gray.dark4),W.dark.input,w.blue.light1,yn(w.gray.dark4),B.dark.gray,w.gray.base,q.regular,w.gray.base,w.gray.dark1,w.gray.dark1,yn(w.gray.dark2))),Fe),An=(Q(Ve={},p.Light,s(Je||(Je=_(["\n color: ",";\n "])),w.gray.dark1)),Q(Ve,p.Dark,s(Ke||(Ke=_(["\n color: ",";\n "])),w.gray.light1)),Ve),Nn=(Q(Ye={},le,s(Xe||(Xe=_(["\n left: 10px;\n "])))),Q(Ye,ce,s($e||($e=_(["\n left: 12px;\n "])))),Q(Ye,se,s(Qe||(Qe=_(["\n left: 16px;\n "])))),Ye),Dn=(Q(en={},p.Light,s(Ze||(Ze=_(["\n color: ",";\n "])),w.gray.base)),Q(en,p.Dark,s(_e||(_e=_(["\n color: ",";\n "])),w.gray.dark1)),en);s(nn||(nn=_([""])));var Pn,zn,Ln,Mn,Rn,Tn,In,Gn,Un=(Q(on={},le,s(rn||(rn=_(["\n height: 26px;\n width: 26px;\n "])))),Q(on,ce,s(tn||(tn=_(["\n height: 28px;\n width: 28px;\n "])))),Q(on,se,s(an||(an=_(["\n height: 28px;\n width: 28px;\n "])))),on),Bn=["placeholder","className","darkMode","size","disabled","children","state","value","onChange","onSubmit","aria-label","aria-labelledby"],Wn=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?ce:b,v=n.disabled,w=n.children,k=n.state,x=void 0===k?ie.Unset:k,E=n.value,S=n.onChange,T=n.onSubmit,I=n["aria-label"],G=n["aria-labelledby"],U=Z(n,Bn),B=R(p),W=B.theme,H=B.darkMode,q=ee(a(!1),2),F=q[0],J=q[1],K=ee(a(0),2),V=K[0],X=K[1],_=function(){return J(!1)},ne=function(){return J(!0)},re=o(null),te=o(null),ae=o(null),oe=j(r,null),le=o(null),se=C({prefix:"result"}),de=ee(a(),2),ue=de[0],he=de[1],fe=se("".concat(V)),ge=!O(w),me=A(E,S),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,$($({},t.props),{},{id:"result-".concat(o),key:"result-".concat(o),ref:null!==(a=t.props.ref)&&void 0!==a?a:null==se?void 0:se("".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,$($({},t.props),{},{children:l}))}}));return{resultsCount:n,updatedChildren:r}}),[w,V,oe,se,ve]),ke=t((function(){return we()}),[we]),xe=ke.updatedChildren,Ee=ke.resultsCount,Oe=function(e){switch(e){case"first":X(0);break;case"last":X(Ee);break;case"next":var n=!O(V)&&V+1<Ee?V+1:0;X(n);break;case"prev":var r=!O(V)&&V-1>=0?V-1:Ee-1;X(r)}};return N(fe,ae,12),D((function(){_()}),[te,ae],F&&ge),e.createElement(M,{darkMode:H},e.createElement(pe,{state:x,highlight:V,resultDynamicRefs:se},e.createElement("form",Y({role:"search",ref:re,className:d(vn,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()):ne()}(e)},onFocus:function(e){var n,r=e.target,t=r===le.current?le.current:null!==(n=oe.current)&&void 0!==n?n:r;t.focus(),he(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.keyCode){case m.Enter:var a;e.stopPropagation(),null==fe||null===(a=fe.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(),ne(),e.preventDefault(),Oe("next");break;case m.ArrowUp:var l;if(ge)null===(l=oe.current)||void 0===l||l.focus(),ne(),e.preventDefault(),Oe("prev");break;case m.Tab:F&&_();break;default:ge&&ne()}},className:d(wn,kn[y],xn[W],(l={},Q(l,On[W],ue===oe.current),Q(l,Sn[W],v),Q(l,En[W],!v),l)),"aria-label":I,"aria-labelledby":G},e.createElement(P,{className:d(An[W],Nn[y],Q({},Dn[W],v)),role:"presentation"}),e.createElement("input",{type:"search",className:d(jn,Cn[W]),value:be,onChange:function(e){null==ye||ye(e)},placeholder:s,ref:oe,readOnly:v}),be&&e.createElement(L,{ref:le,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:Un[y],tabIndex:v?-1:0,disabled:v},e.createElement(z,null))),ge&&e.createElement(bn,{open:F,refEl:te,ref:ae},xe))))}));Wn.displayName="SearchInput";var Hn,qn,Fn,Jn,Kn=b("search-result-title"),Vn=b("search-result-description"),Xn=s(Pn||(Pn=_(["\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,I[3],I[1],I[3],Kn,q.bold),$n=(Q(Mn={},p.Light,s(zn||(zn=_(["\n & ."," {\n color: ",";\n }\n & ."," {\n color: ",";\n }\n "])),Kn,w.black,Vn,w.gray.dark1)),Q(Mn,p.Dark,s(Ln||(Ln=_(["\n & ."," {\n color: ",";\n }\n & ."," {\n color: ",";\n }\n "])),Kn,w.gray.light2,Vn,w.gray.light1)),Mn),Qn=(Q(In={},p.Light,s(Rn||(Rn=_(["\n & ."," {\n color: ",";\n }\n & ."," {\n color: ",";\n }\n "])),Kn,w.gray.light1,Vn,w.gray.light1)),Q(In,p.Dark,s(Tn||(Tn=_(["\n & ."," {\n color: ",";\n }\n & ."," {\n color: ",";\n }\n "])),Kn,w.gray.dark1,Vn,w.gray.dark1)),In),Yn=s(Gn||(Gn=_(["\n max-height: ","px;\n overflow: hidden;\n text-overflow: ellipsis;\n"])),3*I[3]),Zn=["as","children","description","disabled","className","darkMode"],_n=V((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=Z(n,Zn),h=R(u).theme,f=g(i),m=null!==(t=p["aria-label"])&&void 0!==t?t:p["aria-labelledby"]?"":f;return e.createElement(F,Y({},p,{as:o,ref:r,className:d(Xn,$n[h],Q({},Qn[h],c),s),disabled:c,"aria-labelledby":p["aria-labelledby"],"aria-label":m}),e.createElement("div",{className:Kn},i),l&&e.createElement("div",{className:d(Vn,Yn)},l))}),"SearchResult");_n.displayName="SearchResult";var er,nr,rr,tr,ar=s(Hn||(Hn=_(["\n padding-top: 12px;\n padding-bottom: 0;\n"]))),or=(Q(Jn={},p.Light,s(qn||(qn=_(["\n color: ",";\n "])),w.gray.dark1)),Q(Jn,p.Dark,s(Fn||(Fn=_(["\n color: ",";\n "])),w.gray.base)),Jn),ir=["children","label"],lr=function(n){var r=n.children,t=n.label,a=Z(n,ir),o=y(r,["SearchResult","SearchResultGroup"]),i=R().theme;return e.createElement("div",null,e.createElement(F,Y({"aria-label":t,isInteractive:!1,className:ar},a),e.createElement(k,{className:or[i]},t)),o)};lr.displayName="SearchResultGroup";var cr={title:"Components/SearchInput",component:Wn,argTypes:{darkMode:v.darkMode,state:{control:"select",options:Object.values(ie)},placeholder:{control:"text"},disabled:{control:"boolean"}},parameters:{default:"Basic",controls:{exclude:["value","id","showWedge"]}}},sr=function(n){return e.createElement(Wn,Y({className:s(er||(er=_(["\n width: 200px;\n "])))},n))},dr=function(n){return e.createElement(Wn,Y({className:s(nr||(nr=_(["\n width: 200px;\n "]))),onChange:function(){console.log("SB: Change")}},n),e.createElement(_n,{onClick:function(){console.log("SB: Click Apple")},description:"This is a description"},"Apple"),e.createElement(_n,null,"Banana"),e.createElement(_n,{as:"a",href:"#",description:"This is a link"},"Carrot"),e.createElement(_n,{description:"This is a very very long description. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."},"Dragonfruit"),e.createElement(lr,{label:"Peppers"},e.createElement(_n,{description:"A moderately hot chili pepper used to flavor dishes"},"Cayenne"),e.createElement(_n,null,"Ghost pepper"),e.createElement(_n,null,"Habanero"),e.createElement(_n,null,"Jalapeño"),e.createElement(_n,null,"Red pepper"),e.createElement(_n,null,"Scotch bonnet")))},ur=[{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"}],pr=function(n){var r=ee(a(),2),t=r[0],o=r[1],i=ee(a(ur),2),d=i[0],u=i[1];return e.createElement("div",{className:s(rr||(rr=_(["\n width: 256px;\n "])))},e.createElement(Wn,Y({"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(ur.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(ur.find((function(e){return c(e.name)===c(t)})))}},n),d.map((function(n){return e.createElement(_n,{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=_(["\n min-width: min-content;\n margin-block: 20px;\n padding: 20px;\n outline: 1px solid ",";\n "])),w.green.dark2)},e.createElement(x,null,l(t.name)),e.createElement(E,null,t.description)))};pr.argTypes={onChange:{action:"Change"},onSubmit:{action:"Submit"},onClick:{action:"Click"}};export{sr as Basic,pr as LiveSearch,dr as WithResults,cr as default}; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-0.34%
388253
- Lines of code
- decreased by-0.5%
2972