@progress/kendo-react-grid/toolbar-tools/smartbox/SmartBox.js

React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Ze=require("react"),et=require("./SegmentedControl.js"),me=require("@progress/kendo-react-buttons"),K=require("@progress/kendo-svg-icons"),d=require("@progress/kendo-react-common"),tt=require("@progress/kendo-react-intl"),nt=require("../../hooks/useGridAIRequest.js"),st=require("../../utils/GridContext.js"),_=require("@progress/kendo-react-dropdowns"),rt=require("@progress/kendo-react-popup"),R=require("./listItemRenders.js"),o=require("../../messages/index.js"),at=require("./hooks/useSmartBoxModes.js"),ot=require("./hooks/useSmartBoxHistory.js"),ct=require("./hooks/useSmartBoxPopup.js"),it=require("./hooks/useSmartBoxGridState.js"),lt=require("./hooks/useSmartBoxLabels.js"),ut=require("./hooks/useSmartBoxListData.js"),pt=require("./hooks/useSmartBoxSegmentedControl.js"),dt=require("./hooks/useSmartBoxSearch.js"),mt=require("./hooks/useDebounce.js");function gt(m){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(m){for(const f in m)if(f!=="default"){const I=Object.getOwnPropertyDescriptor(m,f);Object.defineProperty(b,f,I.get?I:{enumerable:!0,get:()=>m[f]})}}return b.default=m,Object.freeze(b)}const e=gt(Ze),ge=e.forwardRef((m,b)=>{var pe;const{searchConfig:f,semanticSearchConfig:I,aiAssistantConfig:he,activeMode:fe,dir:Se="ltr",size:M="medium",placeholder:ke,history:be,loading:xe=!1,promptSuggestionRender:A,historyItemRender:J,onOpen:Ce,onClose:Be,onFocus:q,onBlur:v,onSearch:Re,onSemanticSearch:Ie,onAIPromptRequest:H,onAIResponseSuccess:N,onAIResponseError:F,onAICancelRequest:w}=m,x=tt.useLocalization(),C=e.useContext(st.GridContext),qe=e.useRef(`k-${d.guid()}`),S=e.useRef(null),B=e.useRef(null),Q=e.useRef(null),[c,g]=e.useState(""),[ve,P]=e.useState(!1),[we,X]=e.useState(void 0),[Pe,Y]=e.useState(null),{searchMode:i,semanticSearchMode:u,aiAssistantMode:r,selectedView:n,setSelectedViewState:O,lastSearchMode:De,searchHistorySettings:Z,semanticSearchHistorySettings:ee,aiAssistantHistorySettings:z,speechToTextButtonSettings:te,currentSearchDelay:ye}=at.useSmartBoxModes({searchConfigProp:f,semanticSearchConfigProp:I,aiAssistantConfigProp:he,activeModeProp:fe,sharedHistory:be}),{currentHistory:D,currentHistorySettings:Ee,addToHistory:G}=ot.useSmartBoxHistory({selectedView:n,searchHistorySettings:Z,semanticSearchHistorySettings:ee,aiAssistantHistorySettings:z}),{isOpen:V,togglePopup:a}=ct.useSmartBoxPopup({onOpen:Ce,onClose:Be}),{columns:ne,gridState:Le,gridRef:Te,handleStateChange:He}=it.useSmartBoxGridState(C),W=e.useMemo(()=>(r==null?void 0:r.promptSuggestions)||[],[r==null?void 0:r.promptSuggestions]),{inputPlaceholder:Ne,prefixIcon:Fe}=lt.useSmartBoxLabels({selectedView:n,searchMode:i,semanticSearchMode:u,aiAssistantMode:r,sharedPlaceholder:ke}),{searchListData:k,aiAssistantListData:y,searchHistoryListData:E}=ut.useSmartBoxListData({selectedView:n,searchModeEnabled:i==null?void 0:i.enabled,semanticSearchModeEnabled:u==null?void 0:u.enabled,promptSuggestions:W,currentHistory:D,currentHistorySettings:Ee}),se=pt.useSmartBoxSegmentedControl({searchMode:i,semanticSearchMode:u,aiAssistantMode:r,selectedView:n,lastSearchMode:De,setSelectedViewState:O,setInputValue:g});e.useEffect(()=>{const t=S.current;if(!t)return;X(t.offsetWidth);const s=new ResizeObserver(()=>{t&&X(t.offsetWidth)});return s.observe(t),()=>{s.disconnect()}},[]);const h=xe||ve,j=!n,Oe=!(i!=null&&i.enabled)&&!(u!=null&&u.enabled)&&!(r!=null&&r.enabled),ze=d.kendoThemeMaps.sizeMap[M]||"md",{emitSearchEvent:p}=dt.useSmartBoxSearch({selectedView:n,searchMode:i,columns:ne,gridContext:C,searchHistorySettings:Z,semanticSearchHistorySettings:ee,addToHistory:G,onSearch:Re,onSemanticSearch:Ie}),{sendRequest:re,cancelRequest:ae}=nt.useGridAIRequest({requestUrl:r==null?void 0:r.requestUrl,requestOptions:r==null?void 0:r.requestOptions,columns:ne,gridState:Le,gridRef:Te,onPromptRequest:t=>{H==null||H({requestData:t})},onResponseSuccess:t=>{P(!1),N==null||N({response:t})},onResponseError:t=>{P(!1),F==null||F({error:t})},onStateChange:He,onExportPdf:()=>C==null?void 0:C.exportAsPdf()});e.useImperativeHandle(b,()=>({show:()=>a(!0),hide:()=>a(!1)}),[a]);const U=mt.useDebounce(Pe,ye),oe=e.useRef(p);oe.current=p,e.useEffect(()=>{U!==null&&oe.current(U)},[U]);const Ge=e.useCallback(t=>{const s=t.target.value;g(s),a(!s),(n==="search"||n==="semanticSearch")&&Y(s)},[a,n]),Ve=e.useCallback(()=>{q==null||q(),c||a(!0)},[q,a,c]),We=e.useCallback(t=>{var de;const s=S.current,l=(de=Q.current)==null?void 0:de.element,T=t.relatedTarget,Xe=T&&(s==null?void 0:s.contains(T)),Ye=T&&(l==null?void 0:l.contains(T));!Xe&&!Ye&&(v==null||v(),a(!1))},[v,a]),je=e.useCallback(()=>{c||a(!0)},[a,c]),ce=!!((pe=r==null?void 0:r.requestOptions)!=null&&pe.url||r!=null&&r.requestUrl),$=e.useCallback(()=>{if(h){w==null||w(),ae(),P(!1);return}c.trim()&&(ce&&P(!0),G("aiAssistant",c,z),a(!1),re(c.trim()),g(""))},[h,c,z,a,G,re,ae,ce,w]),Ue=e.useCallback(t=>{t.key==="Enter"&&(n==="aiAssistant"?$():n==="semanticSearch"&&p(c))},[n,c,p,$]),$e=e.useCallback(()=>{var t;a(!V),(t=B.current)==null||t.focus()},[V,a]),Ke=e.useCallback(t=>{var s;t.stopPropagation(),t.preventDefault(),g(""),(s=B.current)==null||s.focus(),a(!0),p("")},[a,p]),ie=e.useCallback(t=>{var s;O(t),g(""),Y(null),(s=B.current)==null||s.focus()},[O]),L=e.useCallback(t=>{var s;g(t),a(!1),(s=B.current)==null||s.focus(),n!=="aiAssistant"&&p(t)},[n,a,p]),_e=e.useCallback(t=>{if(t.isFinal&&t.alternatives.length>0){const s=t.alternatives[0].transcript;g(l=>l?`${l} ${s}`:s)}},[]),Me=e.useMemo(()=>n==="aiAssistant"?D.length===0&&W.length===0:n==="search"||n==="semanticSearch"?D.length===0&&k.length===0:!1,[n,D.length,W.length,k.length]),le=e.useCallback(t=>{const l=(n==="aiAssistant"?y:E)[t];l&&L(l.text)},[n,y,E,L]),Ae=e.useCallback(t=>{const s=k[t];s&&ie(s.mode)},[k,ie]),ue=e.useMemo(()=>R.createListItemRender({historyItemRender:J,promptSuggestionRender:A,handleListItemClick:L}),[J,A,L]),Je=V&&!Oe,Qe=()=>e.createElement(e.Fragment,null,se.length>0&&e.createElement(et.SegmentedControl,{buttons:se,size:M,stretched:!0}),(n==="search"||n==="semanticSearch")&&k.length>0&&e.createElement(_.List,{data:k,textField:"text",descriptionField:"description",onClick:Ae,itemRender:R.searchModeItemRender,show:!0,wrapperCssClass:"k-list k-list-md"}),n==="aiAssistant"&&y.length>0&&e.createElement(_.List,{data:y,textField:"text",groupField:"group",svgIconField:"groupSvgIcon",descriptionField:"description",onClick:le,itemRender:ue,groupHeaderItemRender:R.listGroupHeaderRender,showFirstGroupHeader:!0,show:!0,wrapperCssClass:"k-list k-list-md"}),(n==="search"||n==="semanticSearch")&&E.length>0&&e.createElement(_.List,{data:E,textField:"text",groupField:"group",svgIconField:"groupSvgIcon",descriptionField:"description",onClick:le,itemRender:ue,groupHeaderItemRender:R.listGroupHeaderRender,showFirstGroupHeader:!0,show:!0,wrapperCssClass:"k-list k-list-md"}),Me&&e.createElement(R.NoDataRender,{selectedView:n}));return e.createElement("div",{ref:S,className:"k-smart-box-wrapper",dir:Se,onBlur:We},e.createElement("span",{className:d.classNames("k-smart-box","k-input",`k-input-${ze}`,{"k-loading":h})},!j&&e.createElement("span",{className:"k-input-prefix k-input-prefix-horizontal"},e.createElement(d.IconWrap,{className:d.classNames("k-icon",{"k-accent-icon":n==="aiAssistant"||n==="semanticSearch"}),icon:Fe.svgIcon,onClick:$e,onMouseDown:t=>{"preventDefault"in t&&t.preventDefault()}})),e.createElement("input",{ref:B,type:"text",className:d.classNames("k-input-inner",{"k-disabled":j}),id:qe.current,placeholder:Ne,value:c,disabled:j,onChange:Ge,onFocus:Ve,onClick:je,onKeyDown:Ue}),c.length>0&&(n==="search"||n==="semanticSearch")&&e.createElement("span",{className:"k-clear-value",title:x.toLanguageString(o.smartBoxClearTitle,o.messages[o.smartBoxClearTitle]),role:"button",tabIndex:-1,onClick:Ke,onMouseDown:t=>t.preventDefault()},e.createElement(d.IconWrap,{className:"k-icon",icon:K.xIcon})),n==="aiAssistant"&&e.createElement("span",{className:"k-input-suffix k-input-suffix-horizontal"},te&&e.createElement(me.SpeechToTextButton,{...te,"aria-label":x.toLanguageString(o.smartBoxSpeechToTextButton,o.messages[o.smartBoxSpeechToTextButton]),title:x.toLanguageString(o.smartBoxSpeechToTextButton,o.messages[o.smartBoxSpeechToTextButton]),onResult:_e}),e.createElement(me.Button,{className:d.classNames("k-smart-box-send",{"k-processing":h,"k-active":h}),type:"button",rounded:"full",size:"small",title:x.toLanguageString(o.smartBoxSubmitPromptButton,o.messages[o.smartBoxSubmitPromptButton]),"aria-label":x.toLanguageString(o.smartBoxSubmitPromptButton,o.messages[o.smartBoxSubmitPromptButton]),"aria-disabled":c.length===0,svgIcon:h?K.stopSmIcon:K.arrowUpOutlineIcon,disabled:c.length===0&&!h,onClick:$}))),e.createElement(rt.Popup,{ref:Q,anchor:S.current,show:Je,popupClass:"k-smart-box-popup",style:{width:we},anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},margin:{horizontal:0,vertical:2},onMouseDownOutside:t=>{const s=t.event.target;S.current&&!S.current.contains(s)&&a(!1)}},Qe()))});ge.displayName="KendoReactSmartBox";exports.SmartBox=ge;