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