@progress/kendo-react-grid 14.1.2-develop.2 → 14.2.0

package/toolbar-tools/smartbox/SmartBox.mjs

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