@progress/kendo-react-dropdowns 5.13.1 → 5.14.0-dev.202305100720

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/cdn/js/kendo-react-dropdowns.js +1 -1
  2. package/dist/es/ComboBox/ComboBox.d.ts +1 -1
  3. package/dist/es/ComboBox/ComboBox.js +10 -7
  4. package/dist/es/ComboBox/ComboBoxProps.d.ts +4 -0
  5. package/dist/es/DropDownList/DropDownList.d.ts +3 -0
  6. package/dist/es/DropDownList/DropDownList.js +2 -2
  7. package/dist/es/DropDownTree/DropDownTree.js +17 -13
  8. package/dist/es/MultiColumnComboBox/MultiColumnComboBox.js +3 -1
  9. package/dist/es/MultiSelect/MultiSelect.js +3 -3
  10. package/dist/es/MultiSelectTree/MultiSelectTree.js +21 -17
  11. package/dist/es/common/ListFilter.d.ts +5 -7
  12. package/dist/es/common/ListFilter.js +30 -38
  13. package/dist/es/common/MultiColumnList.js +4 -1
  14. package/dist/es/package-metadata.js +1 -1
  15. package/dist/npm/ComboBox/ComboBox.d.ts +1 -1
  16. package/dist/npm/ComboBox/ComboBox.js +9 -6
  17. package/dist/npm/ComboBox/ComboBoxProps.d.ts +4 -0
  18. package/dist/npm/DropDownList/DropDownList.d.ts +3 -0
  19. package/dist/npm/DropDownList/DropDownList.js +2 -2
  20. package/dist/npm/DropDownTree/DropDownTree.js +17 -13
  21. package/dist/npm/MultiColumnComboBox/MultiColumnComboBox.js +3 -1
  22. package/dist/npm/MultiSelect/MultiSelect.js +3 -3
  23. package/dist/npm/MultiSelectTree/MultiSelectTree.js +21 -17
  24. package/dist/npm/common/ListFilter.d.ts +5 -7
  25. package/dist/npm/common/ListFilter.js +29 -37
  26. package/dist/npm/common/MultiColumnList.js +4 -1
  27. package/dist/npm/package-metadata.js +1 -1
  28. package/dist/systemjs/kendo-react-dropdowns.js +1 -1
  29. package/package.json +16 -13
package/dist/es/ComboBox/ComboBox.d.ts CHANGED
@@ -58,7 +58,7 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
58
58
  opened: PropTypes.Requireable<boolean>;
59
59
  disabled: PropTypes.Requireable<boolean>;
60
60
  dir: PropTypes.Requireable<string>;
61
- tabIndex: PropTypes.Requireable<number>; /** @hidden */
61
+ tabIndex: PropTypes.Requireable<number>;
62
62
  accessKey: PropTypes.Requireable<string>;
63
63
  data: PropTypes.Requireable<any[]>;
64
64
  textField: PropTypes.Requireable<string>;
package/dist/es/ComboBox/ComboBox.js CHANGED
@@ -35,7 +35,7 @@ import ListContainer from '../common/ListContainer';
35
35
  import List from '../common/List';
36
36
  import ListFilter from '../common/ListFilter';
37
37
  import GroupStickyHeader from '../common/GroupStickyHeader';
38
- import { validatePackage, canUseDOM } from '@progress/kendo-react-common';
38
+ import { validatePackage, canUseDOM, IconWrap } from '@progress/kendo-react-common';
39
39
  import { packageMetadata } from '../package-metadata';
40
40
  import ClearButton from '../common/ClearButton';
41
41
  import { Button } from '@progress/kendo-react-buttons';
@@ -109,11 +109,11 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
109
109
  var mobileText = _this.props.adaptiveFilter !== undefined ? _this.props.adaptiveFilter : _this.state.text;
110
110
  var selectedItemText = getItemValue(_this.value, _this.props.textField);
111
111
  var mobileInputText = isPresent(mobileText) ? mobileText : selectedItemText;
112
- return (React.createElement(ListFilter, { value: mobileInputText, ref: function (filter) { return _this._adaptiveFilterInput = filter && filter.input; }, onChange: _this.handleMobileFilterChange, onKeyDown: _this.onInputKeyDown, size: _this.props.size, rounded: _this.props.rounded, fillMode: _this.props.fillMode }));
112
+ return (React.createElement(ListFilter, { value: mobileInputText, ref: function (filter) { return _this._adaptiveFilterInput = filter && filter.element; }, onChange: _this.handleMobileFilterChange, onKeyDown: _this.onInputKeyDown, size: _this.props.size, rounded: _this.props.rounded, fillMode: _this.props.fillMode }));
113
113
  };
114
114
  _this.handleMobileFilterChange = function (event) {
115
115
  var state = _this.base.initState();
116
- state.syntheticEvent = event;
116
+ state.syntheticEvent = event.syntheticEvent;
117
117
  state.data.text = event.target.value;
118
118
  _this.base.filterChanged(event.target.value, state);
119
119
  _this.applyState(state);
@@ -475,7 +475,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
475
475
  _a), className), ref: this.componentRef, style: !label ? style : __assign(__assign({}, style), { width: undefined }), dir: dir },
476
476
  this.renderSearchBar(inputText || '', id, placeholder),
477
477
  renderClearButton && !loading && React.createElement(ClearButton, { onClick: this.clearButtonClick, key: "clearbutton" }),
478
- loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon", key: "loading" }),
478
+ loading && React.createElement(IconWrap, { className: "k-input-loading-icon", name: 'loading', key: "loading" }),
479
479
  React.createElement(Button, { tabIndex: -1, type: "button", "aria-label": opened ? btnAriaLabelCollapse : btnAriaLabelExpand, icon: !iconClassName ? 'caret-alt-down' : undefined, svgIcon: !iconClassName ? caretAltDownIcon : this.props.svgIcon, iconClass: iconClassName, size: size, fillMode: fillMode, rounded: null, themeColor: 'base', className: "k-input-button", onClick: this.toggleBtnClick, onMouseDown: function (e) { return e.preventDefault(); } }),
480
480
  !renderAdaptive && this.renderListContainer()),
481
481
  renderAdaptive && this.renderAdaptiveListContainer()));
@@ -638,9 +638,9 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
638
638
  footer && React.createElement("div", { className: "k-list-footer" }, footer)))))));
639
639
  };
640
640
  ComboBoxWithoutContext.prototype.renderListContainer = function () {
641
- var _a;
641
+ var _a, _b;
642
642
  var base = this.base;
643
- var _b = this.props, dir = _b.dir, header = _b.header, footer = _b.footer, _c = _b.data, data = _c === void 0 ? [] : _c, groupField = _b.groupField, groupMode = _b.groupMode, size = _b.size, list = _b.list, virtual = _b.virtual, groupStickyHeaderItemRender = _b.groupStickyHeaderItemRender;
643
+ var _c = this.props, dir = _c.dir, header = _c.header, footer = _c.footer, _d = _c.data, data = _d === void 0 ? [] : _d, groupField = _c.groupField, groupMode = _c.groupMode, size = _c.size, list = _c.list, virtual = _c.virtual, groupStickyHeaderItemRender = _c.groupStickyHeaderItemRender;
644
644
  var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
645
645
  var popupSettings = base.getPopupSettings();
646
646
  var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
@@ -666,7 +666,10 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
666
666
  header && React.createElement("div", { className: "k-table-header" }, header),
667
667
  !list && group && data.length !== 0 && React.createElement(GroupStickyHeader, { group: group, groupMode: groupMode, render: groupStickyHeaderItemRender }),
668
668
  this.renderList(),
669
- footer && React.createElement("div", { className: "k-list-footer" }, footer))));
669
+ footer &&
670
+ React.createElement("div", { className: classNames((_b = {},
671
+ _b['k-list-footer'] = !this.props.footerClassName,
672
+ _b), this.props.footerClassName) }, footer))));
670
673
  };
671
674
  ComboBoxWithoutContext.prototype.renderList = function () {
672
675
  var _a;
package/dist/es/ComboBox/ComboBoxProps.d.ts CHANGED
@@ -249,6 +249,10 @@ export interface ComboBoxProps extends FormComponentProps {
249
249
  * Sets the footer component of the ComboBox ([see example]({% slug customrendering_combobox %}#toc-headers-and-footers)).
250
250
  */
251
251
  footer?: React.ReactNode;
252
+ /**
253
+ * @hidden
254
+ */
255
+ footerClassName?: string;
252
256
  /**
253
257
  * @hidden
254
258
  */
package/dist/es/DropDownList/DropDownList.d.ts CHANGED
@@ -58,6 +58,9 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
58
58
  onChange: PropTypes.Requireable<(...args: any[]) => any>;
59
59
  itemRender: PropTypes.Requireable<(...args: any[]) => any>;
60
60
  listNoDataRender: PropTypes.Requireable<(...args: any[]) => any>;
61
+ /**
62
+ * @hidden
63
+ */
61
64
  focusedItemIndex: PropTypes.Requireable<(...args: any[]) => any>;
62
65
  header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
63
66
  footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
package/dist/es/DropDownList/DropDownList.js CHANGED
@@ -172,7 +172,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
172
172
  };
173
173
  _this.renderListFilter = function () {
174
174
  var filterText = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
175
- return _this.props.filterable && (React.createElement(ListFilter, { value: filterText, ref: function (filter) { return _this._filterInput = filter && filter.input; }, onChange: _this.handleListFilterChange, onKeyDown: _this.handleKeyDown, size: _this.props.size, rounded: _this.props.rounded, fillMode: _this.props.fillMode }));
175
+ return _this.props.filterable && (React.createElement(ListFilter, { value: filterText, ref: function (filter) { return _this._filterInput = filter && filter.element; }, onChange: _this.handleListFilterChange, onKeyDown: _this.handleKeyDown, size: _this.props.size, rounded: _this.props.rounded, fillMode: _this.props.fillMode }));
176
176
  };
177
177
  _this.renderDefaultItem = function () {
178
178
  var _a = _this.props, textField = _a.textField, defaultItem = _a.defaultItem, dataItemKey = _a.dataItemKey;
@@ -341,7 +341,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
341
341
  };
342
342
  _this.handleListFilterChange = function (event) {
343
343
  var state = _this.base.initState();
344
- state.syntheticEvent = event;
344
+ state.syntheticEvent = event.syntheticEvent;
345
345
  if (_this.props.filter === undefined) {
346
346
  state.data.text = event.target.value;
347
347
  }
package/dist/es/DropDownTree/DropDownTree.js CHANGED
@@ -117,9 +117,9 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
117
117
  var _k = React.useState(false), open = _k[0], setOpen = _k[1];
118
118
  var isOpen = opened !== undefined ? opened : open;
119
119
  var _l = React.useState(false), focused = _l[0], setFocused = _l[1];
120
- var _m = React.useState(''), filter = _m[0], setFilter = _m[1];
121
- var _o = React.useState(), windowWidth = _o[0], setWindowWidth = _o[1];
120
+ var _m = React.useState(), windowWidth = _m[0], setWindowWidth = _m[1];
122
121
  var isAdaptive = !!(windowWidth && windowWidth <= MOBILE_MEDIUM_DEVISE && props.adaptive);
122
+ var _o = React.useState(''), filter = _o[0], setFilter = _o[1];
123
123
  var setValidity = React.useCallback(function () {
124
124
  if (selectRef.current && selectRef.current.setCustomValidity) {
125
125
  selectRef.current.setCustomValidity(validity.valid
@@ -160,7 +160,8 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
160
160
  setOpen(false);
161
161
  if (isAdaptive) {
162
162
  setTimeout(function () {
163
- focusElement(adaptiveInputRef.current);
163
+ var _a;
164
+ focusElement((_a = adaptiveInputRef.current) === null || _a === void 0 ? void 0 : _a.element);
164
165
  }, 300);
165
166
  }
166
167
  }
@@ -183,9 +184,10 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
183
184
  window.setTimeout(function () { return skipFocusRef.current = false; }, 0);
184
185
  }, []);
185
186
  var onWrapperKeyDown = React.useCallback(function (event) {
187
+ var _a, _b;
186
188
  var keyCode = event.keyCode, altKey = event.altKey;
187
189
  var treeview = treeViewRef.current && treeViewRef.current.element;
188
- if (!target.current || (event.isDefaultPrevented() && inputRef.current === event.target)) {
190
+ if (!target.current || (event.isDefaultPrevented() && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element) === event.target)) {
189
191
  return;
190
192
  }
191
193
  var ev = {
@@ -202,17 +204,17 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
202
204
  (keyCode === Keys.up || keyCode === Keys.down ||
203
205
  keyCode === Keys.left || keyCode === Keys.right ||
204
206
  keyCode === Keys.home || keyCode === Keys.end)) {
205
- if (keyCode === Keys.up && inputRef.current) {
207
+ if (keyCode === Keys.up && ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.element)) {
206
208
  var items = Array.from(treeview.querySelectorAll('.k-treeview-item'));
207
209
  var focusedItem = __spreadArray([], items, true).reverse().find(function (i) { return Boolean(i && i.querySelector('.k-focus')); });
208
210
  if (focusedItem && items.indexOf(focusedItem) === 0) {
209
- return switchFocus(function () { focusElement(inputRef.current); });
211
+ return switchFocus(function () { var _a; focusElement((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element); });
210
212
  }
211
213
  }
212
214
  switchFocus(noop);
213
215
  }
214
216
  else if (keyCode === Keys.down) {
215
- switchFocus(function () { focusElement(inputRef.current || treeview); });
217
+ switchFocus(function () { var _a; focusElement(((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element) || treeview); });
216
218
  }
217
219
  }
218
220
  else {
@@ -238,12 +240,13 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
238
240
  }
239
241
  }, []);
240
242
  var onPopupOpened = React.useCallback(function () {
243
+ var _a;
241
244
  if (!focused && isOpen && !opened) {
242
245
  closePopup({ target: target.current });
243
246
  }
244
247
  else {
245
248
  if (props.filterable) {
246
- focusElement(inputRef.current);
249
+ focusElement((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element);
247
250
  }
248
251
  else {
249
252
  focusElement(treeViewRef.current && treeViewRef.current.element);
@@ -293,7 +296,8 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
293
296
  }
294
297
  if (isAdaptive) {
295
298
  setTimeout(function () {
296
- focusElement(adaptiveInputRef.current);
299
+ var _a;
300
+ focusElement((_a = adaptiveInputRef.current) === null || _a === void 0 ? void 0 : _a.element);
297
301
  }, 300);
298
302
  }
299
303
  }, [focused, isAdaptive]);
@@ -351,7 +355,7 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
351
355
  var filterDesc = { field: props.textField, operator: 'contains', value: event.target.value };
352
356
  var ev = {
353
357
  filter: filterDesc,
354
- syntheticEvent: event,
358
+ syntheticEvent: event.syntheticEvent,
355
359
  nativeEvent: event.nativeEvent,
356
360
  target: target.current
357
361
  };
@@ -362,7 +366,7 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
362
366
  }
363
367
  }, [props.onFilterChange, props.filter, props.textField]);
364
368
  var renderAdaptiveListContainer = function () {
365
- var mobileFilter = props.filterable ? (React.createElement(ListFilter, { value: props.filter === undefined ? filter : props.filter, inputRef: adaptiveInputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })) : null;
369
+ var mobileFilter = props.filterable ? (React.createElement(ListFilter, { value: props.filter === undefined ? filter : props.filter, ref: adaptiveInputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })) : null;
366
370
  var actionSheetProps = {
367
371
  adaptiveTitle: props.adaptiveTitle,
368
372
  expand: isOpen,
@@ -413,8 +417,8 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
413
417
  React.createElement(Button, { tabIndex: -1, type: "button", "aria-label": "select", className: "k-input-button", size: size, fillMode: fillMode, themeColor: "base", rounded: null, icon: "caret-alt-down", svgIcon: caretAltDownIcon }),
414
418
  React.createElement("select", { name: name, ref: selectRef, tabIndex: -1, "aria-hidden": true, title: label, style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: 'absolute', left: '50%' } },
415
419
  React.createElement("option", { value: props.valueMap ? props.valueMap.call(undefined, value) : value })),
416
- !isAdaptive && React.createElement(Popup, { className: classNames(popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: classNames(popupSettings.popupClass, 'k-list-container', 'k-dropdowntree-popup'), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
417
- props.filterable && (React.createElement(ListFilter, { value: props.filter === undefined ? filter : props.filter, inputRef: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })),
420
+ !isAdaptive && React.createElement(Popup, { className: classNames(popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: classNames(popupSettings.popupClass, 'k-dropdowntree-popup'), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
421
+ props.filterable && (React.createElement(ListFilter, { value: props.filter === undefined ? filter : props.filter, ref: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })),
418
422
  data.length > 0 ? (React.createElement(TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: treeViewData, focusIdField: dataItemKey, textField: props.textField, selectField: selectField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onExpandChange: onExpand, size: size, item: props.item })) : (React.createElement(NoData, null, localization.toLanguageString(nodata, messages[nodata]))))),
419
423
  isAdaptive && renderAdaptiveListContainer()));
420
424
  return label ? (React.createElement(FloatingLabel, { label: label, editorValue: currentValueText, editorPlaceholder: placeholder, editorValid: isValid, editorDisabled: disabled, editorId: id, style: { width: style ? style.width : undefined }, children: dropdowntree, dir: dir })) : dropdowntree;
package/dist/es/MultiColumnComboBox/MultiColumnComboBox.js CHANGED
@@ -22,6 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import * as React from 'react';
24
24
  import * as PropTypes from 'prop-types';
25
+ import { PopupPropsContext } from '@progress/kendo-react-popup';
25
26
  import { MultiColumnList } from './../common/MultiColumnList';
26
27
  import { classNames, getScrollbarWidth, setScrollbarWidth, getter, usePropsContext, createPropsContext } from '@progress/kendo-react-common';
27
28
  import { ComboBox, ComboBoxWithoutContext } from '../ComboBox/ComboBox';
@@ -156,7 +157,8 @@ export var MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
156
157
  ;
157
158
  }, [props.data]);
158
159
  var List = React.useCallback(function (listProps) { return React.createElement(MultiColumnList, __assign({}, listProps)); }, []);
159
- 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, adaptive: props.adaptive, adaptiveFilter: props.adaptiveFilter, adaptiveTitle: props.adaptiveTitle })));
160
+ return (React.createElement(PopupPropsContext.Provider, { value: function (PopupProps) { return (__assign(__assign({}, PopupProps), { popupClass: 'k-dropdowngrid-popup' })); } },
161
+ React.createElement(ComboBox, __assign({}, other, { list: List, popupSettings: __assign(__assign({ width: popupWidth }, popupSettings), { 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, adaptive: props.adaptive, adaptiveFilter: props.adaptiveFilter, adaptiveTitle: props.adaptiveTitle, footer: props.footer, footerClassName: 'k-table-footer' }))));
160
162
  });
161
163
  var propTypes = __assign(__assign({}, ComboBoxWithoutContext.propTypes), { columns: PropTypes.any.isRequired });
162
164
  var defaultProps = {
package/dist/es/MultiSelect/MultiSelect.js CHANGED
@@ -303,7 +303,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
303
303
  var _b = _this.state.windowWidth, windowWidth = _b === void 0 ? 0 : _b;
304
304
  var mobileText = filter !== undefined ? filter : _this.state.text;
305
305
  _this.localization = provideLocalizationService(_this);
306
- var mobileFilter = filterable ? (React.createElement(ListFilter, { value: mobileText, ref: function (adaptiveFilter) { return _this._adaptiveInput = adaptiveFilter && adaptiveFilter.input; }, onChange: _this.onChangeHandler, onKeyDown: _this.onInputKeyDown, size: _this.props.size, rounded: _this.props.rounded, fillMode: _this.props.fillMode })) : null;
306
+ var mobileFilter = filterable ? (React.createElement(ListFilter, { value: mobileText, ref: function (adaptiveFilter) { return _this._adaptiveInput = adaptiveFilter && adaptiveFilter.element; }, onChange: _this.onChangeHandler, onKeyDown: _this.onInputKeyDown, size: _this.props.size, rounded: _this.props.rounded, fillMode: _this.props.fillMode })) : null;
307
307
  var actionSheetProps = {
308
308
  adaptiveTitle: adaptiveTitle,
309
309
  expand: _this.opened,
@@ -319,8 +319,8 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
319
319
  };
320
320
  return (React.createElement(AdaptiveMode, __assign({}, actionSheetProps),
321
321
  React.createElement(ActionSheetContent, { className: '!k-overflow-hidden' },
322
- React.createElement("div", { className: 'k-list-container' },
323
- React.createElement("div", { className: 'k-list k-list-lg' }, _this.listContainerContent())))));
322
+ filterable && React.createElement(ListFilter, { value: mobileText, ref: function (adaptiveFilter) { return _this._adaptiveInput = adaptiveFilter && adaptiveFilter.element; }, onChange: _this.onChangeHandler, onKeyDown: _this.onInputKeyDown, size: _this.props.size, rounded: _this.props.rounded, fillMode: _this.props.fillMode }),
323
+ _this.listContainerContent())));
324
324
  };
325
325
  _this.closePopup = function (event) {
326
326
  var state = _this.base.initState();
package/dist/es/MultiSelectTree/MultiSelectTree.js CHANGED
@@ -99,9 +99,9 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
99
99
  var _o = React.useState(), focusedTagState = _o[0], setFocusedTagState = _o[1];
100
100
  var _p = React.useState(false), openState = _p[0], setOpenState = _p[1];
101
101
  var _q = React.useState(false), focusedState = _q[0], setFocusedState = _q[1];
102
- var _r = React.useState(''), filterState = _r[0], setFilterState = _r[1];
103
- var _s = React.useState(), windowWidth = _s[0], setWindowWidth = _s[1];
104
- var _t = React.useState([]), currentTreeValue = _t[0], setCurrentTreeValue = _t[1];
102
+ var _r = React.useState(), windowWidth = _r[0], setWindowWidth = _r[1];
103
+ var _s = React.useState([]), currentTreeValue = _s[0], setCurrentTreeValue = _s[1];
104
+ var _t = React.useState(''), filterState = _t[0], setFilterState = _t[1];
105
105
  var isAdaptive = !!(windowWidth && windowWidth <= MOBILE_MEDIUM_DEVISE && props.adaptive);
106
106
  var isOpen = opened !== undefined ? opened : openState;
107
107
  var hasValue = Boolean(Array.isArray(value) && value.length);
@@ -171,12 +171,13 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
171
171
  setCurrentTreeValue(value || []);
172
172
  if (isAdaptive) {
173
173
  setTimeout(function () {
174
- focusElement(adaptiveInputRef.current);
174
+ var _a;
175
+ focusElement((_a = adaptiveInputRef.current) === null || _a === void 0 ? void 0 : _a.element);
175
176
  }, 300);
176
177
  }
177
178
  }
178
179
  }
179
- }, [isOpen, opened, onOpen, isAdaptive]);
180
+ }, [isOpen, opened, onOpen, isAdaptive, adaptiveInputRef]);
180
181
  var closePopup = React.useCallback(function (event) {
181
182
  if (isOpen) {
182
183
  if (onClose) {
@@ -199,12 +200,13 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
199
200
  }
200
201
  }, [switchFocus]);
201
202
  var onPopupOpened = React.useCallback(function () {
203
+ var _a;
202
204
  if (!focusedState && isOpen) {
203
205
  closePopup({ target: targetRef.current });
204
206
  }
205
207
  else {
206
208
  if (props.filterable) {
207
- focusElement(inputRef.current);
209
+ focusElement((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element);
208
210
  }
209
211
  else {
210
212
  focusElement(treeViewRef.current && treeViewRef.current.element);
@@ -267,9 +269,10 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
267
269
  }
268
270
  }, [isOpen, openPopup]);
269
271
  var onWrapperKeyDown = React.useCallback(function (event) {
272
+ var _a, _b;
270
273
  var keyCode = event.keyCode, altKey = event.altKey;
271
274
  var treeviewElement = treeViewRef.current && treeViewRef.current.element;
272
- if (!targetRef.current || (event.isDefaultPrevented() && inputRef.current === event.target)) {
275
+ if (!targetRef.current || (event.isDefaultPrevented() && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element) === event.target)) {
273
276
  return;
274
277
  }
275
278
  var ev = {
@@ -328,17 +331,17 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
328
331
  (keyCode === Keys.up || keyCode === Keys.down ||
329
332
  keyCode === Keys.left || keyCode === Keys.right ||
330
333
  keyCode === Keys.home || keyCode === Keys.end)) {
331
- if (keyCode === Keys.up && inputRef.current) {
334
+ if (keyCode === Keys.up && ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.element)) {
332
335
  var items = Array.from(treeviewElement.querySelectorAll('.k-treeview-item'));
333
336
  var focusedItem = __spreadArray([], items, true).reverse().find(function (i) { return Boolean(i && i.querySelector('.k-focus')); });
334
337
  if (focusedItem && items.indexOf(focusedItem) === 0) {
335
- return switchFocus(function () { focusElement(inputRef.current); });
338
+ return switchFocus(function () { var _a; focusElement((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element); });
336
339
  }
337
340
  }
338
341
  switchFocus(noop);
339
342
  }
340
343
  else if (keyCode === Keys.down) {
341
- switchFocus(function () { focusElement(inputRef.current || treeviewElement); });
344
+ switchFocus(function () { var _a; focusElement(((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element) || treeviewElement); });
342
345
  }
343
346
  }
344
347
  else {
@@ -372,9 +375,10 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
372
375
  event.preventDefault();
373
376
  }, [changeValue, closePopup]);
374
377
  var onTagDelete = React.useCallback(function (itemsToRemove, event) {
378
+ var _a;
375
379
  closePopup({ target: targetRef.current });
376
380
  if (!focusedState) {
377
- focusElement(inputRef.current);
381
+ focusElement((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element);
378
382
  }
379
383
  changeValue({
380
384
  syntheticEvent: event,
@@ -400,7 +404,7 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
400
404
  var filterDesc = { field: props.textField, operator: 'contains', value: event.target.value };
401
405
  var ev = {
402
406
  filter: filterDesc,
403
- syntheticEvent: event,
407
+ syntheticEvent: event.syntheticEvent,
404
408
  nativeEvent: event.nativeEvent,
405
409
  target: targetRef.current
406
410
  };
@@ -427,7 +431,7 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
427
431
  event.preventDefault();
428
432
  }, [props.onCancel, closePopup]);
429
433
  var renderAdaptiveListContainer = function () {
430
- var mobileFilter = props.filterable ? (React.createElement(ListFilter, { value: props.filter === undefined ? filterState : props.filter, inputRef: adaptiveInputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })) : null;
434
+ var mobileFilter = props.filterable ? (React.createElement(ListFilter, { value: props.filter === undefined ? filterState : props.filter, ref: adaptiveInputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })) : null;
431
435
  var actionSheetProps = {
432
436
  adaptiveTitle: props.adaptiveTitle,
433
437
  expand: isOpen,
@@ -459,7 +463,7 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
459
463
  var size = props.size, rounded = props.rounded, fillMode = props.fillMode;
460
464
  var currentTagsToRender = isAdaptive && isOpen ? currentTreeValue : tagsToRenderRef.current;
461
465
  var multiselecttree = (React.createElement(React.Fragment, null,
462
- React.createElement("span", { className: classNames('k-multiselect k-input', props.className, (_a = {},
466
+ React.createElement("span", { className: classNames('k-multiselecttree k-input', props.className, (_a = {},
463
467
  _a["k-input-".concat(sizeMap[size] || size)] = size,
464
468
  _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded,
465
469
  _a["k-input-".concat(fillMode)] = fillMode,
@@ -468,7 +472,7 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
468
472
  _a['k-disabled'] = disabled,
469
473
  _a['k-loading'] = props.loading,
470
474
  _a['k-required'] = required,
471
- _a)), tabIndex: tabIndex, accessKey: props.accessKey, id: id, style: label ? __assign(__assign({}, style), { width: undefined }) : style, dir: dir, ref: elementRef, onKeyDown: disabled ? undefined : onWrapperKeyDown, onMouseDown: onWrapperMouseDown, onFocus: onFocus, onBlur: onBlur, role: "combobox", "aria-haspopup": "true", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, "aria-required": props.required, onClick: disabled ? undefined : onWrapperClick },
475
+ _a)), tabIndex: tabIndex, accessKey: props.accessKey, id: id, style: label ? __assign(__assign({}, style), { width: undefined }) : style, dir: dir, ref: elementRef, onKeyDown: disabled ? undefined : onWrapperKeyDown, onMouseDown: onWrapperMouseDown, onFocus: onFocus, onBlur: onBlur, role: "combobox", "aria-haspopup": "tree", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy ? props.ariaDescribedBy : 'tagslist-' + id, "aria-required": props.required, onClick: disabled ? undefined : onWrapperClick },
472
476
  React.createElement("div", { id: 'tagslist-' + id, className: classNames('k-input-values k-chip-list k-selection-multiple', (_b = {},
473
477
  _b["k-chip-list-".concat(sizeMap[size] || size)] = size,
474
478
  _b)) }, currentTagsToRender.length > 0 && (React.createElement(TagList, { tag: props.tag, onTagDelete: onTagDelete, data: currentTagsToRender, guid: id, focused: focusedTagState ? tagsToRenderRef.current.find(function (t) { return matchTags(t, focusedTagState, dataItemKey); }) : undefined, size: size }))),
@@ -480,8 +484,8 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
480
484
  React.createElement(ClearButton, { onClick: onClear }),
481
485
  React.createElement("select", { name: name, ref: selectRef, tabIndex: -1, "aria-hidden": true, title: label, style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: 'absolute', left: '50%' } },
482
486
  React.createElement("option", { value: props.valueMap ? props.valueMap.call(undefined, value) : value })),
483
- !isAdaptive && React.createElement(Popup, { popupClass: classNames(popupSettings.popupClass, 'k-list-container', 'k-multiselecttree-popup'), className: classNames(popupSettings.className, { 'k-rtl': dir === 'rtl' }), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo, ref: popupRef },
484
- props.filterable && (React.createElement(ListFilter, { value: props.filter === undefined ? filterState : props.filter, inputRef: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, tabIndex: tabIndex, size: size, rounded: rounded, fillMode: fillMode })),
487
+ !isAdaptive && React.createElement(Popup, { popupClass: classNames(popupSettings.popupClass, 'k-multiselecttree-popup'), className: classNames(popupSettings.className, { 'k-rtl': dir === 'rtl' }), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo, ref: popupRef },
488
+ props.filterable && (React.createElement(ListFilter, { value: props.filter === undefined ? filterState : props.filter, ref: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, tabIndex: tabIndex, size: size, rounded: rounded, fillMode: fillMode })),
485
489
  data.length > 0 ? (React.createElement(TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: data, focusIdField: dataItemKey, textField: props.textField, checkField: checkField, checkIndeterminateField: checkIndeterminateField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onCheckChange: onChange, onExpandChange: onExpand, checkboxes: true, size: size, item: props.item })) : (React.createElement(NoData, null, localization.toLanguageString(nodata, messages[nodata]))))),
486
490
  isAdaptive && renderAdaptiveListContainer()));
487
491
  return label ? (React.createElement(FloatingLabel, { label: label, editorValue: hasValue, editorPlaceholder: placeholder, editorValid: isValid, editorDisabled: disabled, editorId: id, style: { width: style ? style.width : undefined }, children: multiselecttree, dir: dir })) : multiselecttree;
package/dist/es/common/ListFilter.d.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  import * as React from 'react';
2
+ import { TextBoxChangeEvent, TextBoxHandle } from '@progress/kendo-react-inputs';
2
3
  /**
3
4
  * @hidden
4
5
  */
5
6
  export interface ListFilterProps {
6
- value?: string;
7
- inputRef?: any;
7
+ value?: string | number | readonly string[] | undefined;
8
8
  tabIndex?: number;
9
- onChange?: React.ChangeEventHandler<HTMLInputElement>;
9
+ onChange?: (event: TextBoxChangeEvent) => void;
10
10
  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
11
11
  size?: null | 'small' | 'medium' | 'large';
12
12
  rounded?: null | 'small' | 'medium' | 'large' | 'full';
@@ -15,7 +15,5 @@ export interface ListFilterProps {
15
15
  /**
16
16
  * @hidden
17
17
  */
18
- export default class ListFilter extends React.Component<ListFilterProps, {}> {
19
- input: HTMLInputElement | null;
20
- render(): JSX.Element;
21
- }
18
+ declare const ListFilter: React.ForwardRefExoticComponent<ListFilterProps & React.RefAttributes<TextBoxHandle | null>>;
19
+ export default ListFilter;
package/dist/es/common/ListFilter.js CHANGED
@@ -1,45 +1,37 @@
1
- var __extends = (this && this.__extends) || (function () {
2
- var extendStatics = function (d, b) {
3
- extendStatics = Object.setPrototypeOf ||
4
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
5
- function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
6
- return extendStatics(d, b);
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
7
9
  };
8
- return function (d, b) {
9
- if (typeof b !== "function" && b !== null)
10
- throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
11
- extendStatics(d, b);
12
- function __() { this.constructor = d; }
13
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
14
- };
15
- })();
10
+ return __assign.apply(this, arguments);
11
+ };
16
12
  import * as React from 'react';
13
+ import * as PropTypes from 'prop-types';
14
+ import { TextBox, InputPrefix } from '@progress/kendo-react-inputs';
17
15
  import { searchIcon } from '@progress/kendo-svg-icons';
18
- import { kendoThemeMaps, classNames, IconWrap } from '@progress/kendo-react-common';
19
- var sizeMap = kendoThemeMaps.sizeMap, roundedMap = kendoThemeMaps.roundedMap;
16
+ import { IconWrap } from '@progress/kendo-react-common';
20
17
  /**
21
18
  * @hidden
22
19
  */
23
- var ListFilter = /** @class */ (function (_super) {
24
- __extends(ListFilter, _super);
25
- function ListFilter() {
26
- var _this = _super !== null && _super.apply(this, arguments) || this;
27
- _this.input = null;
28
- return _this;
29
- }
30
- ListFilter.prototype.render = function () {
31
- var _a;
32
- var _this = this;
33
- var _b = this.props, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode, inputRef = _b.inputRef;
34
- return (React.createElement("div", { className: "k-list-filter" },
35
- React.createElement("span", { className: classNames('k-searchbox k-input', (_a = {},
36
- _a["k-input-".concat(sizeMap[size] || size)] = size,
37
- _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded,
38
- _a["k-input-".concat(fillMode)] = fillMode,
39
- _a)) },
40
- React.createElement(IconWrap, { className: "k-input-icon", name: 'search', icon: searchIcon }),
41
- React.createElement("input", { ref: inputRef ? inputRef : function (input) { return _this.input = input; }, value: this.props.value || '', className: "k-input-inner", onChange: this.props.onChange, onKeyDown: this.props.onKeyDown, tabIndex: this.props.tabIndex, onClick: function (e) { return e.stopPropagation(); } }))));
42
- };
43
- return ListFilter;
44
- }(React.Component));
20
+ var ListFilter = React.forwardRef(function (props, ref) {
21
+ var input = React.useRef(null);
22
+ React.useImperativeHandle(ref, function () { return input.current; });
23
+ return (React.createElement("div", { className: "k-list-filter" },
24
+ React.createElement(TextBox, __assign({}, props, { ref: input, value: props.value || '', onChange: props.onChange, onKeyDown: props.onKeyDown, tabIndex: props.tabIndex, onClick: function (e) { return e.stopPropagation(); }, size: props.size, fillMode: props.fillMode, rounded: props.rounded, prefix: function () { return (React.createElement(InputPrefix, null,
25
+ React.createElement(IconWrap, { name: 'search', icon: searchIcon }))); } }))));
26
+ });
27
+ ListFilter.propTypes = {
28
+ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
29
+ tabIndex: PropTypes.number,
30
+ onChange: PropTypes.func,
31
+ onKeyDown: PropTypes.func,
32
+ size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
33
+ rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
34
+ fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline'])
35
+ };
36
+ ListFilter.displayName = 'KendoReactListFilter';
45
37
  export default ListFilter;
package/dist/es/common/MultiColumnList.js CHANGED
@@ -11,9 +11,12 @@ var __assign = (this && this.__assign) || function () {
11
11
  };
12
12
  import * as React from 'react';
13
13
  import List from './List';
14
+ import { classNames } from '@progress/kendo-react-common';
14
15
  /**
15
16
  * @hidden
16
17
  */
17
18
  export var MultiColumnList = function (props) {
18
- return (React.createElement(List, __assign({}, props, { wrapperCssClass: "k-table-body k-table-scroller", listClassName: "k-table k-table-list", listStyle: __assign({}, props.listStyle) })));
19
+ return (React.createElement(List, __assign({}, props, { wrapperCssClass: "k-table-body k-table-scroller", listClassName: classNames('k-table k-table-list', {
20
+ 'k-virtual-table': props.virtual !== undefined
21
+ }), listStyle: __assign({}, props.listStyle) })));
19
22
  };
package/dist/es/package-metadata.js CHANGED
@@ -5,7 +5,7 @@ export var packageMetadata = {
5
5
  name: '@progress/kendo-react-dropdowns',
6
6
  productName: 'KendoReact',
7
7
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
8
- publishDate: 1682926031,
8
+ publishDate: 1683701306,
9
9
  version: '',
10
10
  licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
11
11
  };
package/dist/npm/ComboBox/ComboBox.d.ts CHANGED
@@ -58,7 +58,7 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
58
58
  opened: PropTypes.Requireable<boolean>;
59
59
  disabled: PropTypes.Requireable<boolean>;
60
60
  dir: PropTypes.Requireable<string>;
61
- tabIndex: PropTypes.Requireable<number>; /** @hidden */
61
+ tabIndex: PropTypes.Requireable<number>;
62
62
  accessKey: PropTypes.Requireable<string>;
63
63
  data: PropTypes.Requireable<any[]>;
64
64
  textField: PropTypes.Requireable<string>;
package/dist/npm/ComboBox/ComboBox.js CHANGED
@@ -112,11 +112,11 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
112
112
  var mobileText = _this.props.adaptiveFilter !== undefined ? _this.props.adaptiveFilter : _this.state.text;
113
113
  var selectedItemText = (0, utils_1.getItemValue)(_this.value, _this.props.textField);
114
114
  var mobileInputText = (0, utils_1.isPresent)(mobileText) ? mobileText : selectedItemText;
115
- return (React.createElement(ListFilter_1.default, { value: mobileInputText, ref: function (filter) { return _this._adaptiveFilterInput = filter && filter.input; }, onChange: _this.handleMobileFilterChange, onKeyDown: _this.onInputKeyDown, size: _this.props.size, rounded: _this.props.rounded, fillMode: _this.props.fillMode }));
115
+ return (React.createElement(ListFilter_1.default, { value: mobileInputText, ref: function (filter) { return _this._adaptiveFilterInput = filter && filter.element; }, onChange: _this.handleMobileFilterChange, onKeyDown: _this.onInputKeyDown, size: _this.props.size, rounded: _this.props.rounded, fillMode: _this.props.fillMode }));
116
116
  };
117
117
  _this.handleMobileFilterChange = function (event) {
118
118
  var state = _this.base.initState();
119
- state.syntheticEvent = event;
119
+ state.syntheticEvent = event.syntheticEvent;
120
120
  state.data.text = event.target.value;
121
121
  _this.base.filterChanged(event.target.value, state);
122
122
  _this.applyState(state);
@@ -478,7 +478,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
478
478
  _a), className), ref: this.componentRef, style: !label ? style : __assign(__assign({}, style), { width: undefined }), dir: dir },
479
479
  this.renderSearchBar(inputText || '', id, placeholder),
480
480
  renderClearButton && !loading && React.createElement(ClearButton_1.default, { onClick: this.clearButtonClick, key: "clearbutton" }),
481
- loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon", key: "loading" }),
481
+ loading && React.createElement(kendo_react_common_2.IconWrap, { className: "k-input-loading-icon", name: 'loading', key: "loading" }),
482
482
  React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", "aria-label": opened ? btnAriaLabelCollapse : btnAriaLabelExpand, icon: !iconClassName ? 'caret-alt-down' : undefined, svgIcon: !iconClassName ? kendo_svg_icons_1.caretAltDownIcon : this.props.svgIcon, iconClass: iconClassName, size: size, fillMode: fillMode, rounded: null, themeColor: 'base', className: "k-input-button", onClick: this.toggleBtnClick, onMouseDown: function (e) { return e.preventDefault(); } }),
483
483
  !renderAdaptive && this.renderListContainer()),
484
484
  renderAdaptive && this.renderAdaptiveListContainer()));
@@ -641,9 +641,9 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
641
641
  footer && React.createElement("div", { className: "k-list-footer" }, footer)))))));
642
642
  };
643
643
  ComboBoxWithoutContext.prototype.renderListContainer = function () {
644
- var _a;
644
+ var _a, _b;
645
645
  var base = this.base;
646
- var _b = this.props, dir = _b.dir, header = _b.header, footer = _b.footer, _c = _b.data, data = _c === void 0 ? [] : _c, groupField = _b.groupField, groupMode = _b.groupMode, size = _b.size, list = _b.list, virtual = _b.virtual, groupStickyHeaderItemRender = _b.groupStickyHeaderItemRender;
646
+ var _c = this.props, dir = _c.dir, header = _c.header, footer = _c.footer, _d = _c.data, data = _d === void 0 ? [] : _d, groupField = _c.groupField, groupMode = _c.groupMode, size = _c.size, list = _c.list, virtual = _c.virtual, groupStickyHeaderItemRender = _c.groupStickyHeaderItemRender;
647
647
  var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
648
648
  var popupSettings = base.getPopupSettings();
649
649
  var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
@@ -669,7 +669,10 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
669
669
  header && React.createElement("div", { className: "k-table-header" }, header),
670
670
  !list && group && data.length !== 0 && React.createElement(GroupStickyHeader_1.default, { group: group, groupMode: groupMode, render: groupStickyHeaderItemRender }),
671
671
  this.renderList(),
672
- footer && React.createElement("div", { className: "k-list-footer" }, footer))));
672
+ footer &&
673
+ React.createElement("div", { className: (0, kendo_react_common_1.classNames)((_b = {},
674
+ _b['k-list-footer'] = !this.props.footerClassName,
675
+ _b), this.props.footerClassName) }, footer))));
673
676
  };
674
677
  ComboBoxWithoutContext.prototype.renderList = function () {
675
678
  var _a;
package/dist/npm/ComboBox/ComboBoxProps.d.ts CHANGED
@@ -249,6 +249,10 @@ export interface ComboBoxProps extends FormComponentProps {
249
249
  * Sets the footer component of the ComboBox ([see example]({% slug customrendering_combobox %}#toc-headers-and-footers)).
250
250
  */
251
251
  footer?: React.ReactNode;
252
+ /**
253
+ * @hidden
254
+ */
255
+ footerClassName?: string;
252
256
  /**
253
257
  * @hidden
254
258
  */
package/dist/npm/DropDownList/DropDownList.d.ts CHANGED
@@ -58,6 +58,9 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
58
58
  onChange: PropTypes.Requireable<(...args: any[]) => any>;
59
59
  itemRender: PropTypes.Requireable<(...args: any[]) => any>;
60
60
  listNoDataRender: PropTypes.Requireable<(...args: any[]) => any>;
61
+ /**
62
+ * @hidden
63
+ */
61
64
  focusedItemIndex: PropTypes.Requireable<(...args: any[]) => any>;
62
65
  header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
63
66
  footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;