@progress/kendo-react-dropdowns 5.13.0-dev.202304200559 → 5.13.0-dev.202304201241

package/dist/es/MultiColumnComboBox/MultiColumnComboBox.js

@@ -73,6 +73,9 @@ export var MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
     }, [props.data, props.groupField]);
     var _c = React.useState(initialGroupHeader), groupHeader = _c[0], setGroupHeader = _c[1];
     var header = React.useMemo(function () {
+        var renderer = (React.createElement("th", { className: 'k-table-th', colSpan: columns.length },
+            groupHeader,
+            "    "));
         return (React.createElement(React.Fragment, null,
             props.header,
             React.createElement("div", { className: "k-table-header-wrap" },
@@ -84,8 +87,7 @@ export var MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
                         React.createElement("tr", { className: 'k-table-row' }, columns.map(function (column, i) {
                             return (React.createElement("th", { className: "k-table-th", key: column.uniqueKey ? column.uniqueKey : i }, column.header || '\u00A0'));
                         })),
-                        groupHeader && React.createElement("tr", { className: 'k-table-group-row' },
-                            React.createElement("th", { className: 'k-table-th', colSpan: columns.length }, groupHeader)))))));
+                        groupHeader && React.createElement("tr", { className: 'k-table-group-row' }, props.groupStickyHeaderItemRender ? props.groupStickyHeaderItemRender.call(undefined, renderer, {}) : renderer))))));
     }, [props.header, columns, groupHeader]);
     var popupWidth = React.useMemo(function () {
         // These additional 4px are coming from the child elements side borders (fixes horizontal scrollbar)
@@ -93,7 +95,7 @@ export var MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
     }, [columns, scrollbarWidth]);
     var skip = props.virtual ? props.virtual.skip : 0;
     var itemRender = React.useCallback(function (li, liProps) {
-        var children = columns.map(function (column, i) { return (React.createElement("span", { className: "k-table-td", style: { width: column.width ? column.width : defaultProps.width }, key: column.uniqueKey ? column.uniqueKey : i }, column.field ? getter(column.field)(liProps.dataItem) : '')); });
+        var children = columns.map(function (column, i) { return (React.createElement("span", { className: !props.itemRender ? 'k-table-td' : undefined, style: !props.itemRender ? { width: column.width ? column.width : defaultProps.width } : undefined, key: column.uniqueKey ? column.uniqueKey : i }, column.field ? getter(column.field)(liProps.dataItem) : '')); });
         var group = undefined;
         var curGroup, prevGroup, groupGetter, data = props.data || [];
         var index = liProps.index - skip;
@@ -105,7 +107,7 @@ export var MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
                 group = curGroup;
             }
         }
-        if (group) {
+        if (group && props.groupMode === 'classic') {
             children.push(React.createElement("div", { key: "group", className: "k-table-td k-table-group-td" },
                 React.createElement("span", null, group)));
         }
@@ -134,7 +136,7 @@ export var MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
     }, []);
     React.useEffect(function () { setScrollbarWidth(); });
     var List = React.useCallback(function (listProps) { return React.createElement(MultiColumnList, __assign({}, listProps)); }, []);
-    return (React.createElement(ComboBox, __assign({}, other, { list: List, popupSettings: __assign(__assign({ width: popupWidth }, popupSettings), { popupClass: 'k-dropdowngrid-popup k-reset', className: popupSettings.className }), ref: comboBoxRef, header: header, itemRender: itemRender, size: props.size, rounded: props.rounded, fillMode: props.fillMode, onOpen: onOpenHandler, onClose: onCloseHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, onChange: onChangeHandler, onFilterChange: onFilterChangeHandler, onPageChange: onPageChangeHandler, onGroupScroll: onGroupScroll, className: classNames('k-dropdowngrid', className), required: props.required })));
+    return (React.createElement(ComboBox, __assign({}, other, { list: List, popupSettings: __assign(__assign({ width: popupWidth }, popupSettings), { popupClass: 'k-dropdowngrid-popup k-reset', className: popupSettings.className }), ref: comboBoxRef, header: header, itemRender: itemRender, groupHeaderItemRender: props.groupHeaderItemRender, size: props.size, rounded: props.rounded, fillMode: props.fillMode, groupMode: props.groupMode, groupField: props.groupField, isMultiColumn: true, onOpen: onOpenHandler, onClose: onCloseHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, onChange: onChangeHandler, onFilterChange: onFilterChangeHandler, onPageChange: onPageChangeHandler, onGroupScroll: onGroupScroll, className: classNames('k-dropdowngrid', className), required: props.required })));
 });
 var propTypes = __assign(__assign({}, ComboBoxWithoutContext.propTypes), { columns: PropTypes.any.isRequired });
 var defaultProps = {

package/dist/es/MultiSelect/MultiSelect.d.ts

@@ -5,28 +5,24 @@ import { TagData } from './TagList';
 import DropDownBase from '../common/DropDownBase';
 import { MultiSelectProps } from './MultiSelectProps';
 import { DropDownStateBase, InternalState, ActiveDescendant } from './../common/settings';
-/**
- * @hidden
- */
+/** @hidden */
 export interface MultiSelectState extends DropDownStateBase {
     selectedItems?: Array<any>;
     focusedIndex?: number;
     focusedTag?: TagData;
     activedescendant?: ActiveDescendant;
     value?: Array<any>;
+    currentTreeValue?: Array<any>;
+    windowWidth?: number;
 }
-/**
- * @hidden
- */
+/** @hidden */
 export interface MultiSelectInternalState extends InternalState {
     data: MultiSelectState;
 }
 /** @hidden */
 export declare class MultiSelectWithoutContext extends React.Component<MultiSelectProps, MultiSelectState> implements FormComponent {
     static displayName: string;
-    /**
-     * @hidden
-     */
+    /** @hidden */
     static propTypes: {
         autoClose: PropTypes.Requireable<boolean>;
         value: PropTypes.Requireable<any[]>;
@@ -41,6 +37,11 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
         id: PropTypes.Requireable<string>;
         ariaLabelledBy: PropTypes.Requireable<string>;
         ariaDescribedBy: PropTypes.Requireable<string>;
+        groupField: PropTypes.Requireable<string>;
+        list: PropTypes.Requireable<any>;
+        adaptive: PropTypes.Requireable<boolean>;
+        adaptiveTitle: PropTypes.Requireable<string>;
+        onCancel: PropTypes.Requireable<(...args: any[]) => any>;
         filterable: PropTypes.Requireable<boolean>;
         filter: PropTypes.Requireable<string>;
         virtual: PropTypes.Requireable<PropTypes.InferProps<{
@@ -82,23 +83,20 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
         header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
-    /**
-     * @hidden
-     */
+    /** @hidden */
     static defaultProps: {
         autoClose: boolean;
         required: boolean;
         size: "small" | "medium" | "large" | null | undefined;
         rounded: "small" | "medium" | "full" | "large" | null | undefined;
         fillMode: "flat" | "outline" | "solid" | null | undefined;
+        groupMode: string | undefined;
         popupSettings: {
             height: string;
         };
         validityStyles: boolean;
     };
-    /**
-     * @hidden
-     */
+    /** @hidden */
     readonly state: MultiSelectState;
     private _element;
     private _valueItemsDuringOnChange;
@@ -106,17 +104,26 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
     protected readonly base: DropDownBase;
     private readonly _tags;
     private _input;
+    private _adaptiveInput;
     private _skipFocusEvent;
+    private itemHeight;
     protected scrollToFocused: boolean;
+    private localization;
+    private observerResize?;
+    private get document();
     constructor(props: MultiSelectProps);
-    /**
-     * @hidden
-     */
+    /** @hidden */
     focus: () => void;
+    /** @hidden */
+    get element(): HTMLSpanElement | null;
+    /** @hidden */
+    get opened(): boolean;
+    /** @hidden */
+    get tagsToRender(): Array<TagData>;
     /**
-     * @hidden
+     * The mobile mode of the ComboBox.
      */
-    get element(): HTMLSpanElement | null;
+    get mobileMode(): boolean;
     /**
      * Represents the value of the MultiSelect.
      */
@@ -129,41 +136,27 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
      * Represents the validity state into which the MultiSelect is set.
      */
     get validity(): FormComponentValidity;
-    /**
-     * @hidden
-     */
+    /** @hidden */
     protected get required(): boolean;
     protected get validityStyles(): boolean;
-    /**
-     * @hidden
-     */
+    /** @hidden */
     componentDidUpdate(prevProps: MultiSelectProps, prevState: MultiSelectState): void;
-    /**
-     * @hidden
-     */
+    /** @hidden */
     componentDidMount(): void;
-    /**
-     * @hidden
-     */
+    /** @hidden */
+    componentWillUnmount(): void;
+    /** @hidden */
     handleItemSelect: (index: number, state: MultiSelectInternalState) => void;
-    /**
-     * @hidden
-     */
+    /** @hidden */
     onTagDelete: (itemsToRemove: Array<any>, event: React.MouseEvent<HTMLSpanElement>) => void;
-    /**
-     * @hidden
-     */
+    /** @hidden */
     onNavigate(state: MultiSelectInternalState, keyCode: number): void;
-    /**
-     * @hidden
-     */
+    /** @hidden */
     itemFocus: (index: number, state: MultiSelectInternalState) => void;
-    /**
-     * @hidden
-     */
+    /** @hidden */
     render(): JSX.Element;
     private componentRef;
-    private renderSearchbar;
+    private renderSearchBar;
     private searchbarRef;
     private onChangeHandler;
     private clearButtonClick;
@@ -173,8 +166,13 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
     private selectFocusedItem;
     private setItems;
     private getFocusedState;
+    private listContainerContent;
     private renderListContainer;
+    private renderAdaptiveListContainer;
+    private closePopup;
+    private onCancel;
     private renderList;
+    private onScroll;
     private customItemSelect;
     private handleWrapperClick;
     private handleItemClick;
@@ -185,6 +183,7 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
     private focusElement;
     private applyState;
     private setValidity;
+    private calculateMedia;
 }
 /**
  * Represents the PropsContext of the `MultiSelect` component.