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