@progress/kendo-react-dropdowns 13.3.0 → 13.4.0-develop.1

package/MultiColumnComboBox/MultiColumnComboBox.d.ts

@@ -0,0 +1,299 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { CustomComponent } from '@progress/kendo-react-common';
+import { ComboBoxBlurEvent, ComboBoxChangeEvent, ComboBoxCloseEvent, ComboBoxFilterChangeEvent, ComboBoxFocusEvent, ComboBoxOpenEvent, ComboBoxPageChangeEvent, ComboBoxProps } from '../ComboBox/ComboBoxProps.js';
+import { DropDownsPopupSettings, VirtualizationSettings } from '../common/settings.js';
+import { ListItemProps } from '../common/ListItem.js';
+import * as React from 'react';
+/**
+ * The represents the interface of the MultiColumnComboBox columns.
+ */
+export interface MultiColumnComboBoxColumn {
+    /**
+     * The unique id of the column.
+     */
+    uniqueKey?: string;
+    /**
+     * The field of the column.
+     */
+    field?: string;
+    /**
+     * The header of the column.
+     */
+    header?: React.ReactNode;
+    /**
+     * Represents the width of the column. If the width is not specified it is applied the default width of `200px`.
+     */
+    width?: string | number;
+}
+/**
+ * Represents the properties of the [MultiColumnComboBox](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/multicolumncombobox) component.
+ */
+export interface MultiColumnComboBoxProps extends ComboBoxProps {
+    /**
+     * Determines the columns array of the MultiColumnComboBox.
+     */
+    columns: MultiColumnComboBoxColumn[];
+    /**
+     * Sets the data of the MultiColumnComboBox.
+     */
+    data?: any[];
+    /**
+     * Sets the opened and closed state of the MultiColumnComboBox.
+     */
+    opened?: boolean;
+    /**
+     * The styles that are applied to the MultiColumnComboBox.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the value of the MultiColumnComboBox. It can either be of the primitive (string, numbers) or of the complex (objects) type.
+     */
+    value?: any;
+    /**
+     * Sets the default value of the MultiColumnComboBox. Similar to the native `select` HTML element.
+     */
+    defaultValue?: any;
+    /**
+     * Sets additional classes to the MultiColumnComboBox.
+     */
+    className?: string;
+    /**
+     * If `clearButton` is set to `true`, the MultiColumnComboBox renders a button on hovering over the component. Clicking this button resets the value of the MultiColumnComboBox to `undefined` and triggers the `change` event.
+     */
+    clearButton?: boolean;
+    /**
+     * The hint that is displayed when the MultiColumnComboBox is empty.
+     */
+    placeholder?: string;
+    /**
+     * Specifies whether the MultiColumnComboBox allows user-defined values that are not present in the dataset. Defaults to `false`.
+     */
+    allowCustom?: boolean;
+    /**
+     * Sets the disabled state of the MultiColumnComboBox.
+     */
+    disabled?: boolean;
+    /**
+     * Enables the filtering functionality of the MultiColumnComboBox.
+     */
+    filterable?: boolean;
+    /**
+     * Sets the value of MultiColumnComboBox input. Useful for making the MultiColumnComboBox input a controlled component.
+     */
+    filter?: string | null;
+    /**
+     * Sets the loading state of the MultiColumnComboBox.
+     */
+    loading?: boolean;
+    /**
+     * Specifies the `tabIndex` of the MultiColumnComboBox.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the `accessKey` of the MultiColumnComboBox.
+     */
+    accessKey?: string;
+    /**
+     * Sets the key for comparing the data items of the MultiColumnComboBox. If `dataItemKey` is not set, the MultiColumnComboBox compares the items by reference.
+     */
+    dataItemKey?: string;
+    /**
+     * Renders a floating label for the MultiColumnComboBox.
+     */
+    label?: string;
+    /**
+     * Configures the popup of the MultiColumnComboBox.
+     */
+    popupSettings?: DropDownsPopupSettings;
+    /**
+     * Configures the virtual scrolling of the MultiColumnComboBox.
+     */
+    virtual?: VirtualizationSettings;
+    /**
+     * If set, the MultiColumnComboBox will use it to get the focused item index. Default functionality returns the first item which starts with the input text.
+     */
+    focusedItemIndex?: (data: any, inputText: string, textField?: string) => number;
+    /**
+     * Fires each time the popup of the MultiColumnComboBox is about to open.
+     */
+    onOpen?: (event: ComboBoxOpenEvent) => void;
+    /**
+     * Fires each time the popup of the MultiColumnComboBox is about to close.
+     */
+    onClose?: (event: ComboBoxCloseEvent) => void;
+    /**
+     * Fires each time the user focuses the MultiColumnComboBox.
+     */
+    onFocus?: (event: ComboBoxFocusEvent) => void;
+    /**
+     * Fires each time the MultiColumnComboBox gets blurred.
+     */
+    onBlur?: (event: ComboBoxBlurEvent) => void;
+    /**
+     * Fires each time the value of the MultiColumnComboBox is about to change.
+     */
+    onChange?: (event: ComboBoxChangeEvent) => void;
+    /**
+     * Fires each time the user types in the filter input. You can filter the source based on the passed filtration value.
+     */
+    onFilterChange?: (event: ComboBoxFilterChangeEvent) => void;
+    /**
+     * Fires when both the virtual scrolling of the MultiColumnComboBox is enabled and the component requires data for another page.
+     */
+    onPageChange?: (event: ComboBoxPageChangeEvent) => void;
+    /**
+     * @hidden
+     */
+    onGroupScroll?: (event: {
+        group?: string;
+    }) => void;
+    /**
+     * Fires when a MultiColumnComboBox list item is about to be rendered. Used to override the default appearance of the list items.
+     */
+    itemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React.ReactNode;
+    /**
+     * Sets the header component of the MultiColumnComboBox.
+     */
+    header?: React.ReactNode;
+    /**
+     * Sets the footer component of the MultiColumnComboBox.
+     */
+    footer?: React.ReactNode;
+    /**
+     * Configures the `size` of the MultiColumnComboBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     *
+     * @default undefined (theme-controlled)
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the MultiColumnComboBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     *
+     * @default undefined (theme-controlled)
+     */
+    rounded?: 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the MultiColumnComboBox.
+     *
+     * The available options are:
+     * - solid
+     * - flat
+     * - outline
+     *
+     * @default undefined (theme-controlled)
+     */
+    fillMode?: 'solid' | 'flat' | 'outline';
+    /**
+     * Sets a custom prefix to the MultiColumnComboBox component.
+     */
+    prefix?: CustomComponent<any> | undefined;
+    /**
+     * Sets a custom suffix to the MultiColumnComboBox component.
+     */
+    suffix?: CustomComponent<any> | undefined;
+}
+/**
+ * Represents the target(element and props) of the MultiColumnComboBoxChangeEvent.
+ */
+export interface MultiColumnComboBoxHandle {
+    /**
+     * The current element or `null` of there is no one.
+     */
+    element: HTMLSpanElement | null;
+    /**
+     * The value of the MultiColumnComboBox.
+     */
+    value: any;
+    /**
+     * The props values of the MultiColumnComboBox.
+     */
+    props: MultiColumnComboBoxProps;
+    /**
+     * The focus event callback.
+     */
+    focus: () => void;
+}
+/**
+ * Represents the type of the MultiColumnComboBoxChangeEvent.
+ */
+export interface MultiColumnComboBoxChangeEvent {
+    /**
+     * The value of the MultiColumnComboBoxChangeEvent.
+     */
+    value: any;
+    /**
+     * The target of the MultiColumnComboBoxChangeEvent from MultiColumnComboBoxHandle.
+     */
+    target: MultiColumnComboBoxHandle;
+    /**
+     * The event of the MultiColumnComboBoxChangeEvent.
+     */
+    syntheticEvent: React.SyntheticEvent<any>;
+}
+/**
+ * Represents the PropsContext of the `MultiColumnComboBox` component.
+ * Used for global configuration of all `MultiColumnComboBox` instances.
+ *
+ * For more information, refer to the [Dropdowns Props Context](https://www.telerik.com/kendo-react-ui/components/dropdowns/props-context) article.
+ */
+export declare const MultiColumnComboBoxPropsContext: React.Context<(p: MultiColumnComboBoxProps) => MultiColumnComboBoxProps>;
+/**
+ * Represents the MultiColumnComboBox component.
+ *
+ * Accepts properties of type [MultiColumnComboBoxProps](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/multicolumncomboboxprops).
+ * Obtaining the `ref` returns an object of type [MultiColumnComboBoxHandle](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/multicolumncomboboxhandle).
+ *
+ * @example
+ * ```jsx
+ * const columns = [
+ *  {
+ *    field: "id",
+ *    header: "ID",
+ *    width: "100px",
+ *  },
+ *  {
+ *    field: "name",
+ *    header: "Name",
+ *    width: "300px",
+ *  },
+ *  {
+ *    field: "position",
+ *    header: "Position",
+ *    width: "300px",
+ *   },
+ * ];
+ * const App = () => {
+ *   return (
+ *     <div>
+ *       <div>Employees:</div>
+ *       <MultiColumnComboBox
+ *         data={employees}
+ *         columns={columns}
+ *         textField={"name"}
+ *         style={{
+ *           width: "300px",
+ *         }}
+ *         placeholder="Please select ..."
+ *       />
+ *     </div>
+ *   );
+ * };
+ * ```
+ */
+export declare const MultiColumnComboBox: React.ForwardRefExoticComponent<MultiColumnComboBoxProps & React.RefAttributes<MultiColumnComboBoxHandle | null>>;

package/MultiColumnComboBox/MultiColumnComboBox.js

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

package/MultiColumnComboBox/MultiColumnComboBox.mjs

@@ -8,13 +8,13 @@
 import * as e from "react";
 import se from "prop-types";
 import { MultiColumnList as ie } from "../common/MultiColumnList.mjs";
-import { createPropsContext as ue, usePropsContext as de, getScrollbarWidth as ce, getter as T, classNames as x, setScrollbarWidth as pe } from "@progress/kendo-react-common";
+import { createPropsContext as ue, usePropsContext as de, getScrollbarWidth as ce, getter as T, classNames as v, setScrollbarWidth as pe } from "@progress/kendo-react-common";
 import { ComboBox as me, ComboBoxWithoutContext as fe } from "../ComboBox/ComboBox.mjs";
 import { getItemValue as ge } from "../common/utils.mjs";
 import W from "../common/withCustomComponent.mjs";
-const he = (s, h) => s ? typeof s == "number" ? s + "px" : s : h, be = ue(), P = e.forwardRef(
-  (s, h) => {
-    const t = de(be, s), b = e.useRef(null), i = e.useRef(null), y = ce(), {
+const he = (s, g) => s ? typeof s == "number" ? s + "px" : s : g, Ce = ue(), P = e.forwardRef(
+  (s, g) => {
+    const t = de(Ce, s), h = e.useRef(null), i = e.useRef(null), x = ce(), {
       columns: r = l.columns,
       popupSettings: p = l.popupSettings,
       size: z = l.size,
@@ -23,16 +23,16 @@ const he = (s, h) => s ? typeof s == "number" ? s + "px" : s : h, be = ue(), P =
       className: $,
       prefix: j = void 0,
       suffix: V = void 0,
-      onOpen: w,
-      onClose: E,
+      onOpen: y,
+      onClose: w,
       onFocus: F,
       onBlur: S,
       onChange: H,
-      onFilterChange: N,
-      onPageChange: M,
+      onFilterChange: E,
+      onPageChange: N,
       ...A
     } = t;
-    e.useImperativeHandle(b, () => {
+    e.useImperativeHandle(h, () => {
       var o;
       return {
         element: ((o = i.current) == null ? void 0 : o.element) || null,
@@ -50,74 +50,72 @@ const he = (s, h) => s ? typeof s == "number" ? s + "px" : s : h, be = ue(), P =
         props: t
       };
     }), e.useImperativeHandle(
-      h,
-      () => b.current
+      g,
+      () => h.current
     );
-    const c = e.useMemo(() => {
+    const d = e.useMemo(() => {
       if (t.groupField !== void 0 && t.data)
         return ge(t.data[0], t.groupField);
-    }, [t.data, t.groupField]), [C, m] = e.useState(c), [R, B] = e.useState(!0), [D] = j ? W(t.prefix || e.Fragment) : [], [J] = V ? W(t.suffix || e.Fragment) : [], Q = e.useMemo(() => {
+    }, [t.data, t.groupField]), [C, m] = e.useState(d), [R, M] = e.useState(!0), [D] = j ? W(t.prefix || e.Fragment) : [], [J] = V ? W(t.suffix || e.Fragment) : [], Q = e.useMemo(() => {
       const o = /* @__PURE__ */ e.createElement("th", { className: "k-table-th", colSpan: r.length }, C);
-      return /* @__PURE__ */ e.createElement(e.Fragment, null, t.header, /* @__PURE__ */ e.createElement("div", { className: "k-table-header-wrap k-table-scroller" }, /* @__PURE__ */ e.createElement("table", { className: "k-table", role: "presentation" }, /* @__PURE__ */ e.createElement("colgroup", null, r.map((a, u) => /* @__PURE__ */ e.createElement(
+      return /* @__PURE__ */ e.createElement(e.Fragment, null, t.header, /* @__PURE__ */ e.createElement("div", { className: "k-table-header-wrap k-table-scroller" }, /* @__PURE__ */ e.createElement("table", { className: "k-table", role: "presentation" }, /* @__PURE__ */ e.createElement("colgroup", null, r.map((a, c) => /* @__PURE__ */ e.createElement(
         "col",
         {
-          key: a.uniqueKey ? a.uniqueKey : u,
+          key: a.uniqueKey ? a.uniqueKey : c,
           style: { width: a.width ? a.width : l.width }
         }
-      ))), /* @__PURE__ */ e.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ e.createElement("tr", { className: "k-table-row" }, r.map((a, u) => /* @__PURE__ */ e.createElement("th", { className: "k-table-th", key: a.uniqueKey ? a.uniqueKey : u }, a.header || " "))), C && R && /* @__PURE__ */ e.createElement("tr", { className: "k-table-group-row" }, t.groupStickyHeaderItemRender ? t.groupStickyHeaderItemRender.call(void 0, o, {}) : o)))));
+      ))), /* @__PURE__ */ e.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ e.createElement("tr", { className: "k-table-row" }, r.map((a, c) => /* @__PURE__ */ e.createElement("th", { className: "k-table-th", key: a.uniqueKey ? a.uniqueKey : c }, a.header || " "))), C && R && /* @__PURE__ */ e.createElement("tr", { className: "k-table-group-row" }, t.groupStickyHeaderItemRender ? t.groupStickyHeaderItemRender.call(void 0, o, {}) : o)))));
     }, [t.header, r, C, R]), U = e.useMemo(
       () => (
         // These additional 4px are coming from the child elements side borders (fixes horizontal scrollbar)
-        `calc(${r.map((o) => he(o.width, l.width)).filter(Boolean).join(" + ")} + ${y}px + 4px)`
+        `calc(${r.map((o) => he(o.width, l.width)).filter(Boolean).join(" + ")} + ${x}px + 4px)`
       ),
-      [r, y]
-    ), q = t.virtual ? t.virtual.skip : 0, X = e.useCallback(
+      [r, x]
+    ), B = t.virtual ? t.virtual.skip : 0, X = e.useCallback(
       (o, a) => {
-        const u = r.map((d, le) => /* @__PURE__ */ e.createElement(
+        const c = r.map((u, le) => /* @__PURE__ */ e.createElement(
           "span",
           {
             className: t.itemRender ? void 0 : "k-table-td",
-            style: t.itemRender ? void 0 : { width: d.width ? d.width : l.width },
-            key: d.uniqueKey ? d.uniqueKey : le
+            style: t.itemRender ? void 0 : { width: u.width ? u.width : l.width },
+            key: u.uniqueKey ? u.uniqueKey : le
           },
-          d.field ? String(T(d.field)(a.dataItem)) : ""
+          u.field ? String(T(u.field)(a.dataItem)) : ""
         ));
-        let f, g, k, v, I = t.data || [];
-        const K = a.index - q;
-        t.groupField !== void 0 && (v = T(t.groupField), g = v(I[K]), k = v(I[K - 1]), g && k && g !== k && (f = g)), f && t.groupMode === "classic" && u.push(
-          /* @__PURE__ */ e.createElement("div", { key: "group", className: "k-table-td k-table-group-td" }, /* @__PURE__ */ e.createElement("span", null, f))
-        );
+        let q, f, b, k, I = t.data || [];
+        const K = a.index - B;
+        t.groupField !== void 0 && (k = T(t.groupField), f = k(I[K]), b = k(I[K - 1]), f && b && f !== b && (q = f));
         const G = e.cloneElement(
           o,
           {
             ...o.props,
-            className: x("k-table-row", {
+            className: v("k-table-row", {
               "k-table-alt-row": a.index % 2 !== 0,
               "k-focus": a.focused,
               "k-selected": a.selected,
-              "k-first": !!f,
+              "k-first": !!q,
               "k-disabled": a.dataItem.disabled
             })
           },
-          u
+          c
         );
         return t.itemRender ? t.itemRender.call(void 0, G, a) : G;
       },
-      [r, t.groupField, t.itemRender, t.data, q]
+      [r, t.groupField, t.itemRender, t.data, B]
     ), n = e.useCallback((o, a) => {
       o && o.call(void 0, {
         ...a,
-        target: b.current
+        target: h.current
       });
     }, []), Y = e.useCallback(
-      (o) => (t.virtual || m(c), n(w, o)),
-      [n, w, t.virtual, c]
-    ), Z = e.useCallback((o) => n(E, o), [E]), _ = e.useCallback((o) => n(F, o), [F]), ee = e.useCallback((o) => n(S, o), [S]), te = e.useCallback((o) => n(H, o), [H]), oe = e.useCallback((o) => n(M, o), [M]), ae = e.useCallback(
-      (o) => (m(c), n(N, {
+      (o) => (t.virtual || m(d), n(y, o)),
+      [n, y, t.virtual, d]
+    ), Z = e.useCallback((o) => n(w, o), [w]), _ = e.useCallback((o) => n(F, o), [F]), ee = e.useCallback((o) => n(S, o), [S]), te = e.useCallback((o) => n(H, o), [H]), oe = e.useCallback((o) => n(N, o), [N]), ae = e.useCallback(
+      (o) => (m(d), n(E, {
         ...o,
         mobileMode: o.target.mobileMode
       })),
-      [N]
+      [E]
     ), re = e.useCallback((o) => {
       m(o.group);
     }, []);
@@ -125,7 +123,7 @@ const he = (s, h) => s ? typeof s == "number" ? s + "px" : s : h, be = ue(), P =
       pe();
     }), e.useEffect(() => {
       const o = t.data;
-      m(c), o && o.length !== 0 ? B(!0) : B(!1);
+      m(d), o && o.length !== 0 ? M(!0) : M(!1);
     }, [t.data]);
     const ne = e.useCallback((o) => /* @__PURE__ */ e.createElement(ie, { ...o }), []);
     return /* @__PURE__ */ e.createElement(
@@ -135,7 +133,7 @@ const he = (s, h) => s ? typeof s == "number" ? s + "px" : s : h, be = ue(), P =
         list: ne,
         popupSettings: {
           ...p,
-          popupClass: x("k-dropdowngrid-popup", p.popupClass),
+          popupClass: v("k-dropdowngrid-popup", p.popupClass),
           width: p.width || U,
           className: p.className
         },
@@ -146,7 +144,6 @@ const he = (s, h) => s ? typeof s == "number" ? s + "px" : s : h, be = ue(), P =
         size: z,
         rounded: O,
         fillMode: L,
-        groupMode: t.groupMode,
         groupField: t.groupField,
         isMultiColumn: !0,
         onOpen: Y,
@@ -157,7 +154,7 @@ const he = (s, h) => s ? typeof s == "number" ? s + "px" : s : h, be = ue(), P =
         onFilterChange: ae,
         onPageChange: oe,
         onGroupScroll: re,
-        className: x("k-dropdowngrid", $),
+        className: v("k-dropdowngrid", $),
         required: t.required,
         adaptive: t.adaptive,
         adaptiveFilter: t.adaptiveFilter,
@@ -170,20 +167,20 @@ const he = (s, h) => s ? typeof s == "number" ? s + "px" : s : h, be = ue(), P =
       }
     );
   }
-), Ce = {
+), be = {
   ...fe.propTypes,
   columns: se.any.isRequired
 }, l = {
   columns: [],
   popupSettings: {},
   width: "200px",
-  size: "medium",
-  rounded: "medium",
-  fillMode: "solid"
+  size: void 0,
+  rounded: void 0,
+  fillMode: void 0
 };
 P.displayName = "KendoMultiColumnComboBox";
-P.propTypes = Ce;
+P.propTypes = be;
 export {
   P as MultiColumnComboBox,
-  be as MultiColumnComboBoxPropsContext
+  Ce as MultiColumnComboBoxPropsContext
 };