@progress/kendo-react-dropdowns 7.2.4-develop.3 → 7.3.0-develop.1

package/DropDownTree/DropDownTree.mjs

@@ -0,0 +1,550 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as t from "react";
+import n from "prop-types";
+import { createPropsContext as Xe, validatePackage as Ye, usePropsContext as Ze, useId as et, getTabIndex as tt, useRtl as nt, canUseDOM as ot, Keys as c, noop as U, mapTree as at, extendDataItem as rt, classNames as ne, IconWrap as xe, kendoThemeMaps as it } from "@progress/kendo-react-common";
+import { Popup as lt } from "@progress/kendo-react-popup";
+import { useLocalization as st } from "@progress/kendo-react-intl";
+import { TreeView as we } from "@progress/kendo-react-treeview";
+import { packageMetadata as ct } from "../package-metadata.mjs";
+import { getItemValue as ut, areSame as Fe, isPresent as dt } from "../common/utils.mjs";
+import { useDropdownWidth as pt } from "./useDropdownWidth.mjs";
+import { ListNoData as ft } from "./ListNoData.mjs";
+import { clear as De, messages as oe, nodata as j } from "../messages/index.mjs";
+import { FloatingLabel as mt } from "@progress/kendo-react-labels";
+import Ie from "../common/ListFilter.mjs";
+import { Button as vt } from "@progress/kendo-react-buttons";
+import { xIcon as gt, caretAltDownIcon as bt } from "@progress/kendo-svg-icons";
+import { AdaptiveMode as ht } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as yt } from "@progress/kendo-react-layout";
+import { MOBILE_MEDIUM_DEVISE as Et } from "../common/constants.mjs";
+const { sizeMap: Ct, roundedMap: kt } = it, xt = "Please select a value from the list!", wt = (y) => /* @__PURE__ */ t.createElement("span", { className: "k-input-value-text" }, y.children), Se = (y) => y.split("_").map((F) => parseInt(F, 10)), Ft = (y, F) => {
+  const { validationMessage: r, valid: a, required: G } = y;
+  return {
+    customError: r !== void 0,
+    valid: !!(a !== void 0 ? a : !G || F),
+    valueMissing: !F
+  };
+}, Me = {
+  selectField: "selected",
+  subItemsField: "items",
+  popupSettings: {
+    animate: !0,
+    width: "200px",
+    height: "200px"
+  },
+  data: [],
+  required: !1,
+  style: {},
+  validityStyles: !0,
+  size: "medium",
+  rounded: "medium",
+  fillMode: "solid"
+}, Dt = Xe(), Re = t.forwardRef((y, F) => {
+  Ye(ct);
+  const r = Ze(Dt, y), a = {
+    ...Me,
+    ...r
+  }, G = et(), ae = a.id || G, {
+    data: T,
+    dataItemKey: N,
+    popupSettings: D = {},
+    style: P,
+    opened: u,
+    disabled: I,
+    onOpen: V = U,
+    onClose: f = U,
+    placeholder: re,
+    label: O,
+    name: Te,
+    selectField: z,
+    subItemsField: K,
+    validationMessage: H,
+    valid: Ne,
+    required: J,
+    validityStyles: Pe
+  } = a, Q = tt(a.tabIndex, I), i = t.useRef(null), m = t.useRef(null), S = t.useRef(null), X = t.useRef(null), _ = t.useRef(null), b = t.useRef(null), $ = t.useRef(!1), [ie, Ve] = t.useState(void 0), E = a.value !== void 0, v = E ? a.value : ie !== void 0 ? ie : a.defaultValue, B = dt(v), le = B ? ut(v, a.textField) : "", Y = Ft({ validationMessage: H, valid: Ne, required: J }, B), Oe = t.useCallback(() => m.current && m.current.focus(), []);
+  t.useImperativeHandle(
+    i,
+    () => ({
+      props: a,
+      element: m.current,
+      focus: Oe
+    })
+  ), t.useImperativeHandle(F, () => i.current);
+  const C = nt(m, a.dir), Ke = {
+    width: pt(m, Me, D, P),
+    ...C !== void 0 ? { direction: C } : {}
+  }, [Be, se] = t.useState(!1), l = u !== void 0 ? u : Be, [d, Z] = t.useState(!1), [ee, Le] = t.useState(), k = !!(ee && ee <= Et && a.adaptive), [ce, qe] = t.useState(""), We = t.useCallback(
+    () => {
+      _.current && _.current.setCustomValidity && _.current.setCustomValidity(
+        Y.valid ? "" : H === void 0 ? xt : H
+      );
+    },
+    [H, Y]
+  );
+  t.useEffect(We), t.useEffect(() => {
+    const e = ot && window.ResizeObserver && new window.ResizeObserver(Je.bind(void 0));
+    return document != null && document.body && e && e.observe(document.body), () => {
+      document != null && document.body && e && e.disconnect();
+    };
+  }, []);
+  const ue = t.useCallback(
+    (e) => {
+      if (!l) {
+        if (V) {
+          const o = { ...e };
+          V.call(void 0, o);
+        }
+        u === void 0 && se(!0);
+      }
+    },
+    [l, u, V]
+  ), x = t.useCallback(
+    (e) => {
+      if (l) {
+        if (f) {
+          const o = { ...e };
+          f.call(void 0, o);
+        }
+        u === void 0 && (se(!1), k && setTimeout(() => {
+          var o;
+          g((o = X.current) == null ? void 0 : o.element);
+        }, 300));
+      }
+    },
+    [l, u, f, k]
+  ), Ae = t.useCallback(
+    (e) => {
+      if (!e.isDefaultPrevented() && i.current) {
+        Z(!0);
+        const o = {
+          syntheticEvent: e,
+          nativeEvent: e.nativeEvent,
+          target: i.current
+        };
+        (l ? x : ue)(o);
+      }
+    },
+    [l, u, V, f]
+  ), M = t.useCallback(
+    (e) => {
+      $.current = !0, e(), window.setTimeout(() => $.current = !1, 0);
+    },
+    []
+  ), ze = t.useCallback(
+    (e) => {
+      var w, Ce;
+      const { keyCode: o, altKey: s } = e, p = b.current && b.current.element;
+      if (!i.current || e.isDefaultPrevented() && ((w = S.current) == null ? void 0 : w.element) === e.target)
+        return;
+      const R = {
+        syntheticEvent: e,
+        nativeEvent: e.nativeEvent,
+        target: i.current
+      };
+      if (l)
+        if (o === c.esc || s && o === c.up)
+          e.preventDefault(), x(R);
+        else if (p && p.querySelector(".k-focus") && (o === c.up || o === c.down || o === c.left || o === c.right || o === c.home || o === c.end)) {
+          if (o === c.up && ((Ce = S.current) != null && Ce.element)) {
+            const W = Array.from(p.querySelectorAll(".k-treeview-item")), ke = [...W].reverse().find((A) => !!(A && A.querySelector(".k-focus")));
+            if (ke && W.indexOf(ke) === 0)
+              return M(() => {
+                var A;
+                g((A = S.current) == null ? void 0 : A.element);
+              });
+          }
+          M(U);
+        } else
+          o === c.down && M(() => {
+            var W;
+            g(((W = S.current) == null ? void 0 : W.element) || p);
+          });
+      else
+        s && o === c.down ? (e.preventDefault(), ue(R)) : l || o === c.esc && me(e);
+    },
+    [l, u, V, f]
+  ), de = t.useCallback(
+    (e) => {
+      const { keyCode: o, altKey: s } = e;
+      s || o !== c.up && o !== c.down || (e.preventDefault(), M(
+        o === c.up ? () => {
+          g(m.current);
+        } : () => {
+          g(b.current && b.current.element);
+        }
+      ));
+    },
+    []
+  ), g = t.useCallback(
+    (e) => {
+      e && M(() => e.focus());
+    },
+    []
+  ), He = t.useCallback(
+    () => {
+      var e;
+      !d && l && !u ? x({ target: i.current }) : r.filterable ? g((e = S.current) == null ? void 0 : e.element) : g(b.current && b.current.element);
+    },
+    [f, r.filterable, d, u, l]
+  ), _e = t.useCallback(
+    () => {
+      d && g(m.current);
+    },
+    [d]
+  ), $e = t.useCallback(
+    (e) => {
+      if (!d && !$.current && (Z(!0), r.onFocus && i.current)) {
+        const o = {
+          syntheticEvent: e,
+          nativeEvent: e.nativeEvent,
+          target: i.current
+        };
+        r.onFocus.call(void 0, o);
+      }
+    },
+    [d, r.onFocus]
+  ), Ue = t.useCallback(
+    (e) => {
+      if (d && !$.current && i.current) {
+        Z(!1);
+        const o = {
+          syntheticEvent: e,
+          nativeEvent: e.nativeEvent,
+          target: i.current
+        };
+        if (r.onBlur) {
+          const s = { ...o };
+          r.onBlur.call(void 0, s);
+        }
+        k || x(o);
+      }
+    },
+    [d, r.onBlur, l, u, f]
+  ), je = t.useCallback(
+    () => {
+      d && M(U), k && setTimeout(() => {
+        var e;
+        g((e = X.current) == null ? void 0 : e.element);
+      }, 300);
+    },
+    [d, k]
+  ), pe = t.useCallback(
+    (e, o, s) => {
+      if (r.onChange) {
+        const p = {
+          value: o,
+          level: s ? Se(s) : [],
+          ...e
+        };
+        r.onChange.call(void 0, p);
+      }
+      E || Ve(o);
+    },
+    [r.onChange, E]
+  ), fe = t.useCallback(
+    (e) => {
+      if (Fe(e.item, v, N) || !i.current)
+        return;
+      const { item: o, itemHierarchicalIndex: s, nativeEvent: p, syntheticEvent: R } = e, w = {
+        syntheticEvent: R,
+        nativeEvent: p,
+        target: i.current
+      };
+      pe(w, o, s), x(w);
+    },
+    [E, v, r.onChange, N, l, u, f]
+  ), me = t.useCallback(
+    (e) => {
+      if (!i.current)
+        return;
+      const o = {
+        syntheticEvent: e,
+        nativeEvent: e.nativeEvent,
+        target: i.current
+      };
+      pe(o, null), x(o), e.preventDefault();
+    },
+    [E, r.onChange, l, u, f]
+  ), ve = t.useCallback(
+    (e) => {
+      if (e.syntheticEvent.stopPropagation(), r.onExpandChange && i.current) {
+        const { item: o, itemHierarchicalIndex: s, nativeEvent: p, syntheticEvent: R } = e, w = {
+          level: Se(s),
+          item: o,
+          nativeEvent: p,
+          syntheticEvent: R,
+          target: i.current
+        };
+        r.onExpandChange.call(void 0, w);
+      }
+    },
+    [r.onExpandChange]
+  ), ge = t.useCallback(
+    (e) => {
+      if (r.onFilterChange && i.current) {
+        const s = {
+          filter: { field: r.textField, operator: "contains", value: e.target.value },
+          syntheticEvent: e.syntheticEvent,
+          nativeEvent: e.nativeEvent,
+          target: i.current
+        };
+        r.onFilterChange.call(void 0, s), r.filter === void 0 && qe(e.target.value);
+      }
+    },
+    [r.onFilterChange, r.filter, r.textField]
+  ), Ge = () => {
+    const e = a.filterable ? /* @__PURE__ */ t.createElement(
+      Ie,
+      {
+        value: a.filter === void 0 ? ce : a.filter,
+        ref: X,
+        onChange: ge,
+        onKeyDown: de,
+        size: h,
+        rounded: L,
+        fillMode: q
+      }
+    ) : null, o = {
+      adaptiveTitle: a.adaptiveTitle,
+      expand: l,
+      onClose: (s) => x(s),
+      windowWidth: ee,
+      mobileFilter: e
+    };
+    return /* @__PURE__ */ t.createElement(ht, { ...o }, /* @__PURE__ */ t.createElement(yt, { className: "!k-overflow-hidden" }, /* @__PURE__ */ t.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ t.createElement("div", { className: "k-list k-list-lg" }, T.length > 0 ? /* @__PURE__ */ t.createElement(
+      we,
+      {
+        ref: b,
+        tabIndex: Q,
+        data: be,
+        focusIdField: N,
+        textField: a.textField,
+        selectField: z,
+        expandField: a.expandField,
+        childrenField: K,
+        expandIcons: !0,
+        onItemClick: fe,
+        onExpandChange: ve,
+        size: h,
+        item: a.item,
+        dir: C
+      }
+    ) : /* @__PURE__ */ t.createElement(he, null, te.toLanguageString(j, oe[j]))))));
+  }, Je = t.useCallback(
+    (e) => {
+      for (let o of e)
+        Le(o.target.clientWidth);
+    },
+    []
+  ), be = t.useMemo(
+    () => E || !B ? T : at(
+      T,
+      K,
+      (e) => rt(
+        e,
+        K,
+        { [z]: Fe(e, v, N) }
+      )
+    ),
+    [T, v, E, B, z, K]
+  ), he = a.listNoData || ft, Qe = a.valueHolder || wt, te = st(), ye = !Pe || Y.valid, { size: h, rounded: L, fillMode: q } = a, Ee = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
+    "span",
+    {
+      className: ne("k-dropdowntree k-picker", a.className, {
+        [`k-picker-${Ct[h] || h}`]: h,
+        [`k-rounded-${kt[L] || L}`]: L,
+        [`k-picker-${q}`]: q,
+        "k-focus": d,
+        "k-invalid": !ye,
+        "k-loading": a.loading,
+        "k-required": J,
+        "k-disabled": a.disabled
+      }),
+      tabIndex: Q,
+      accessKey: a.accessKey,
+      id: ae,
+      style: O ? { ...P, width: void 0 } : P,
+      dir: C,
+      ref: m,
+      onKeyDown: I ? void 0 : ze,
+      onMouseDown: je,
+      onClick: I ? void 0 : Ae,
+      onFocus: $e,
+      onBlur: Ue,
+      role: "combobox",
+      "aria-haspopup": "tree",
+      "aria-expanded": l,
+      "aria-disabled": I,
+      "aria-label": O,
+      "aria-labelledby": a.ariaLabelledBy,
+      "aria-describedby": a.ariaDescribedBy,
+      "aria-required": J
+    },
+    /* @__PURE__ */ t.createElement("span", { className: "k-input-inner" }, /* @__PURE__ */ t.createElement(Qe, { item: v }, le || re)),
+    a.loading && /* @__PURE__ */ t.createElement(xe, { className: "k-input-loading-icon", name: "loading" }),
+    B && !I && /* @__PURE__ */ t.createElement(
+      "span",
+      {
+        onClick: me,
+        className: "k-clear-value",
+        title: te.toLanguageString(De, oe[De]),
+        role: "button",
+        tabIndex: -1,
+        onMouseDown: (e) => e.preventDefault()
+      },
+      /* @__PURE__ */ t.createElement(xe, { name: "x", icon: gt })
+    ),
+    /* @__PURE__ */ t.createElement(
+      vt,
+      {
+        tabIndex: -1,
+        type: "button",
+        "aria-label": "select",
+        className: "k-input-button",
+        size: h,
+        fillMode: q,
+        themeColor: "base",
+        rounded: null,
+        icon: "caret-alt-down",
+        svgIcon: bt
+      }
+    ),
+    /* @__PURE__ */ t.createElement(
+      "select",
+      {
+        name: Te,
+        ref: _,
+        tabIndex: -1,
+        "aria-hidden": !0,
+        title: O,
+        style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: "absolute", left: "50%" }
+      },
+      /* @__PURE__ */ t.createElement("option", { value: a.valueMap ? a.valueMap.call(void 0, v) : v })
+    ),
+    !k && /* @__PURE__ */ t.createElement(
+      lt,
+      {
+        ...D,
+        className: ne(D.className, { "k-rtl": C === "rtl" }),
+        popupClass: ne(D.popupClass, "k-dropdowntree-popup"),
+        style: Ke,
+        anchor: D.anchor || m.current,
+        show: l,
+        onOpen: He,
+        onClose: _e
+      },
+      a.filterable && /* @__PURE__ */ t.createElement(
+        Ie,
+        {
+          value: a.filter === void 0 ? ce : a.filter,
+          ref: S,
+          onChange: ge,
+          onKeyDown: de,
+          size: h,
+          rounded: L,
+          fillMode: q
+        }
+      ),
+      T.length > 0 ? /* @__PURE__ */ t.createElement(
+        we,
+        {
+          style: { height: D.height },
+          ref: b,
+          tabIndex: Q,
+          data: be,
+          focusIdField: N,
+          textField: a.textField,
+          selectField: z,
+          expandField: a.expandField,
+          childrenField: K,
+          expandIcons: !0,
+          onItemClick: fe,
+          onExpandChange: ve,
+          size: h,
+          item: a.item,
+          dir: C
+        }
+      ) : /* @__PURE__ */ t.createElement(he, null, te.toLanguageString(j, oe[j]))
+    )
+  ), k && Ge());
+  return O ? /* @__PURE__ */ t.createElement(
+    mt,
+    {
+      label: O,
+      editorValue: le,
+      editorPlaceholder: re,
+      editorValid: ye,
+      editorDisabled: I,
+      editorId: ae,
+      style: { width: P ? P.width : void 0 },
+      children: Ee,
+      dir: C
+    }
+  ) : Ee;
+}), It = {
+  opened: n.bool,
+  disabled: n.bool,
+  dir: n.string,
+  tabIndex: n.number,
+  accessKey: n.string,
+  data: n.array,
+  value: n.any,
+  valueMap: n.func,
+  placeholder: n.string,
+  dataItemKey: n.string.isRequired,
+  textField: n.string.isRequired,
+  selectField: n.string,
+  expandField: n.string,
+  subItemsField: n.string,
+  className: n.string,
+  style: n.object,
+  label: n.string,
+  validationMessage: n.string,
+  validityStyles: n.bool,
+  valid: n.bool,
+  required: n.bool,
+  name: n.string,
+  id: n.string,
+  ariaLabelledBy: n.string,
+  ariaDescribedBy: n.string,
+  filterable: n.bool,
+  filter: n.string,
+  loading: n.bool,
+  popupSettings: n.shape({
+    animate: n.oneOfType([n.bool, n.shape({
+      openDuration: n.number,
+      closeDuration: n.number
+    })]),
+    popupClass: n.string,
+    className: n.string,
+    appendTo: n.any,
+    width: n.oneOfType([n.string, n.number]),
+    height: n.oneOfType([n.string, n.number])
+  }),
+  onOpen: n.func,
+  onClose: n.func,
+  onFocus: n.func,
+  onBlur: n.func,
+  onChange: n.func,
+  onFilterChange: n.func,
+  onExpandChange: n.func,
+  item: n.func,
+  valueHolder: n.func,
+  listNoData: n.func,
+  adaptiveTitle: n.string,
+  adaptive: n.bool
+};
+Re.displayName = "KendoReactDropDownTree";
+Re.propTypes = It;
+export {
+  Re as DropDownTree,
+  Dt as DropDownTreePropsContext
+};

package/DropDownTree/ListNoData.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react");function o(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const c=o(r),l=e=>c.createElement("div",{className:"k-nodata"},c.createElement("div",null,e.children));exports.ListNoData=l;

package/DropDownTree/ListNoData.mjs

@@ -0,0 +1,13 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as e from "react";
+const a = (t) => /* @__PURE__ */ e.createElement("div", { className: "k-nodata" }, /* @__PURE__ */ e.createElement("div", null, t.children));
+export {
+  a as ListNoData
+};

package/DropDownTree/useDropdownWidth.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react");function p(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const i in t)if(i!=="default"){const n=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(e,i,n.get?n:{enumerable:!0,get:()=>t[i]})}}return e.default=t,Object.freeze(e)}const u=p(s);function h(t,e,i){const[n,o]=u.useState(e);return u.useEffect(()=>{n!==void 0&&t.current&&o(t.current.offsetWidth)},i),n}function f(t,e,i,n){const o=i.width!==void 0&&i.width!==e.popupSettings.width,d=n.width!==void 0,r=o?i.width:d?n.width:e.popupSettings.width,c=h(t,r);return o||d?r:c&&c>e.popupSettings.width?c:e.popupSettings.width}exports.useDropdownWidth=f;

package/DropDownTree/useDropdownWidth.mjs

@@ -0,0 +1,25 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as p from "react";
+function u(d, t, i) {
+  const [n, e] = p.useState(t);
+  return p.useEffect(
+    () => {
+      n !== void 0 && d.current && e(d.current.offsetWidth);
+    },
+    i
+  ), n;
+}
+function c(d, t, i, n) {
+  const e = i.width !== void 0 && i.width !== t.popupSettings.width, o = n.width !== void 0, s = e ? i.width : o ? n.width : t.popupSettings.width, h = u(d, s);
+  return e || o ? s : h && h > t.popupSettings.width ? h : t.popupSettings.width;
+}
+export {
+  c as useDropdownWidth
+};

package/MultiColumnComboBox/MultiColumnComboBox.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ne=require("react"),le=require("prop-types"),se=require("@progress/kendo-react-popup"),ue=require("../common/MultiColumnList.js"),u=require("@progress/kendo-react-common"),j=require("../ComboBox/ComboBox.js"),ie=require("../common/utils.js"),K=require("../common/withCustomComponent.js");function de(a){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const e in a)if(e!=="default"){const d=Object.getOwnPropertyDescriptor(a,e);Object.defineProperty(i,e,d.get?d:{enumerable:!0,get:()=>a[e]})}}return i.default=a,Object.freeze(i)}const t=de(ne),ce=(a,i)=>a?typeof a=="number"?a+"px":a:i,G=u.createPropsContext(),k=t.forwardRef((a,i)=>{const e=u.usePropsContext(G,a),d=t.useRef(null),n=t.useRef(null),w=u.getScrollbarWidth(),{columns:l=m.columns,popupSettings:f=m.popupSettings,className:W,size:me,prefix:z=void 0,suffix:L=void 0,onOpen:M,onClose:S,onFocus:E,onBlur:F,onChange:N,onFilterChange:R,onPageChange:H,..._}=e;t.useImperativeHandle(d,()=>({element:n.current&&n.current.element,focus(){n.current&&n.current.focus()},get value(){return n.current&&n.current.value},get name(){return n.current&&n.current.name},props:e})),t.useImperativeHandle(i,()=>d.current);const g=t.useMemo(()=>{if(e.groupField!==void 0&&e.data)return ie.getItemValue(e.data[0],e.groupField)},[e.data,e.groupField]),[v,C]=t.useState(g),[q,B]=t.useState(!0),[$]=z?K(e.prefix||t.Fragment):[],[D]=L?K(e.suffix||t.Fragment):[],V=t.useMemo(()=>{const o=t.createElement("th",{className:"k-table-th",colSpan:l.length},v);return t.createElement(t.Fragment,null,e.header,t.createElement("div",{className:"k-table-header-wrap"},t.createElement("table",{className:"k-table",role:"presentation"},t.createElement("colgroup",null,l.map((r,c)=>t.createElement("col",{key:r.uniqueKey?r.uniqueKey:c,style:{width:r.width?r.width:m.width}}))),t.createElement("thead",{className:"k-table-thead"},t.createElement("tr",{className:"k-table-row"},l.map((r,c)=>t.createElement("th",{className:"k-table-th",key:r.uniqueKey?r.uniqueKey:c},r.header||" "))),v&&q&&t.createElement("tr",{className:"k-table-group-row"},e.groupStickyHeaderItemRender?e.groupStickyHeaderItemRender.call(void 0,o,{}):o)))))},[e.header,l,v,q]),A=t.useMemo(()=>`calc(${l.map(o=>ce(o.width,m.width)).filter(Boolean).join(" + ")} + ${w}px + 4px)`,[l,w]),P=e.virtual?e.virtual.skip:0,J=t.useCallback((o,r)=>{const c=l.map((p,ae)=>t.createElement("span",{className:e.itemRender?void 0:"k-table-td",style:e.itemRender?void 0:{width:p.width?p.width:m.width},key:p.uniqueKey?p.uniqueKey:ae},p.field?String(u.getter(p.field)(r.dataItem)):""));let b,h,x,y,I=e.data||[];const O=r.index-P;e.groupField!==void 0&&(y=u.getter(e.groupField),h=y(I[O]),x=y(I[O-1]),h&&x&&h!==x&&(b=h)),b&&e.groupMode==="classic"&&c.push(t.createElement("div",{key:"group",className:"k-table-td k-table-group-td"},t.createElement("span",null,b)));const T=t.cloneElement(o,{...o.props,className:u.classNames("k-table-row",{"k-table-alt-row":r.index%2!==0,"k-focus":r.focused,"k-selected":r.selected,"k-first":!!b,"k-disabled":r.dataItem.disabled})},c);return e.itemRender?e.itemRender.call(void 0,T,r):T},[l,e.groupField,e.itemRender,e.data,P]),s=t.useCallback((o,r)=>{o&&o.call(void 0,{...r,target:d.current})},[]),Q=t.useCallback(o=>(e.virtual||C(g),s(M,o)),[s,M,e.virtual,g]),U=t.useCallback(o=>s(S,o),[S]),X=t.useCallback(o=>s(E,o),[E]),Y=t.useCallback(o=>s(F,o),[F]),Z=t.useCallback(o=>s(N,o),[N]),ee=t.useCallback(o=>s(H,o),[H]),te=t.useCallback(o=>(C(g),s(R,{...o,mobileMode:o.target.mobileMode})),[R]),oe=t.useCallback(o=>{C(o.group)},[]);t.useEffect(()=>{u.setScrollbarWidth()}),t.useEffect(()=>{const o=e.data;C(g),o&&o.length!==0?B(!0):B(!1)},[e.data]);const re=t.useCallback(o=>t.createElement(ue.MultiColumnList,{...o}),[]);return t.createElement(se.PopupPropsContext.Provider,{value:o=>({...o,popupClass:`k-dropdowngrid-popup ${f.popupClass}`})},t.createElement(j.ComboBox,{..._,list:re,popupSettings:{...f,width:f.width||A,className:f.className},ref:n,header:V,itemRender:J,groupHeaderItemRender:e.groupHeaderItemRender,size:e.size,rounded:e.rounded,fillMode:e.fillMode,groupMode:e.groupMode,groupField:e.groupField,isMultiColumn:!0,onOpen:Q,onClose:U,onFocus:X,onBlur:Y,onChange:Z,onFilterChange:te,onPageChange:ee,onGroupScroll:oe,className:u.classNames("k-dropdowngrid",W),required:e.required,adaptive:e.adaptive,adaptiveFilter:e.adaptiveFilter,adaptiveTitle:e.adaptiveTitle,footer:e.footer,footerClassName:"k-table-footer",prefix:$,suffix:D}))}),pe={...j.ComboBoxWithoutContext.propTypes,columns:le.any.isRequired},m={columns:[],popupSettings:{},width:"200px",size:"medium",rounded:"medium",fillMode:"solid"};k.displayName="KendoMultiColumnComboBox";k.propTypes=pe;k.defaultProps=m;exports.MultiColumnComboBox=k;exports.MultiColumnComboBoxPropsContext=G;