@nexusui/components/cjs/core/SearchBar/SearchBar.component.js

These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.

"use client";
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),a=require("@mui/material/Button"),t=require("@mui/material/Stack"),s=require("@mui/material/Typography"),l=require("@mui/material/IconButton"),i=require("@mui/material/Input"),u=require("@mui/icons-material/Search"),n=require("lodash/debounce"),o=require("@mui/icons-material/KeyboardArrowUp"),c=require("@mui/icons-material/KeyboardArrowDown"),d=require("@mui/icons-material/Close"),m=require("./SearchBar.styles.js"),h=require("../locales/index.js"),x=require("./locale.json.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=f(r),y=f(a),j=f(t),b=f(s),q=f(l),v=f(i),S=f(u),$=f(n),w=f(o),B=f(c),C=f(d);const g="NexusSearchBar";exports.SearchBar=({defaultSearchExpression:a,searchInProgress:t,currentResult:s,onClick:l,placeholder:i,onClose:u,onClear:n,onNext:o,onPrevious:c,totalResults:d,onChange:f,debounce:k=500,buttonVariant:N="contained",sx:A,...D})=>{const[I,E]=r.useState(a||""),[K,P]=p.default.useState(!1),F=h.useTranslate(x.default),M=e=>{if(void 0!==s&&s>=0&&void 0!==d){const r=s+e;return r>d?0:r<0?d-1:r}return-1},R=void 0!==d&&d>0&&!t,T=()=>c&&R&&c(M(-1)),_=()=>o&&R&&o(M(1)),z=()=>u&&u(),O=e.jsxs(e.Fragment,{children:[K&&I&&e.jsxs(j.default,{direction:"row",alignItems:"center",children:[(s||0===s)&&e.jsx(b.default,{sx:{mr:1,whiteSpace:"nowrap"},children:`${null===s?0:s+1} ${F("of")} ${d||0}`}),c&&e.jsx(q.default,{className:`${g}-previous`,"data-testid":`${g}-previous`,onClick:T,"aria-label":"previous",sx:m.styles.upDownBtn,children:e.jsx(w.default,{})}),o&&e.jsx(q.default,{className:`${g}-next`,"data-testid":`${g}-next`,onClick:_,"aria-label":"next",sx:m.styles.upDownBtn,children:e.jsx(B.default,{})}),e.jsx(q.default,{sx:m.styles.upDownBtn,className:`${g}-clearSearch`,"data-testid":`${g}-clearSearch`,"aria-label":"clear search",onClick:()=>{n&&n(),z(),E(""),P(!1)},children:e.jsx(C.default,{})})]}),!I&&e.jsx(y.default,{variant:N,color:"primary",sx:m.styles.searchBtn,size:"large",endIcon:e.jsx(S.default,{}),className:`${g}-searchSubmit`,"data-testid":`${g}-searchSubmit`,"aria-label":"search submit"})]}),U=r.useCallback((e=>{f?.(e.target.value,e)}),[f]),V=r.useMemo((()=>$.default(U,"number"==typeof k?k:500)),[U,k]);return r.useEffect((()=>()=>{V.cancel()}),[V]),e.jsx(v.default,{onFocus:()=>{K||P(!0)},onBlur:()=>{I||P(!1)},placeholder:i||F("Search for a property"),value:I,onChange:e=>{E(e.target.value),k?V(e):U(e)},onKeyDown:e=>{"Enter"===e.key?e.shiftKey?T():_():"Escape"===e.key&&z()},endAdornment:O,sx:[m.styles.search,...Array.isArray(A)?A:[A]],...D})};