@progress/kendo-react-dropdowns 4.10.0-dev.202110050803 → 4.10.0-dev.202110151005

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 (34) hide show
  1. package/README.md +43 -11
  2. package/dist/cdn/js/kendo-react-dropdowns.js +1 -1
  3. package/dist/es/AutoComplete/AutoComplete.d.ts +1 -0
  4. package/dist/es/AutoComplete/AutoComplete.js +1 -0
  5. package/dist/es/ComboBox/ComboBox.d.ts +1 -0
  6. package/dist/es/ComboBox/ComboBox.js +1 -0
  7. package/dist/es/DropDownList/DropDownList.d.ts +2 -3
  8. package/dist/es/DropDownList/DropDownList.js +1 -0
  9. package/dist/es/DropDownTree/DropDownTree.js +2 -1
  10. package/dist/es/MultiColumnComboBox/MultiColumnComboBox.js +1 -1
  11. package/dist/es/MultiSelect/MultiSelect.d.ts +1 -0
  12. package/dist/es/MultiSelect/MultiSelect.js +1 -0
  13. package/dist/es/MultiSelectTree/MultiSelectTree.js +2 -1
  14. package/dist/es/common/DropDownBase.d.ts +2 -0
  15. package/dist/es/common/DropDownBase.js +1 -0
  16. package/dist/es/common/settings.d.ts +4 -0
  17. package/dist/es/package-metadata.js +1 -1
  18. package/dist/npm/AutoComplete/AutoComplete.d.ts +1 -0
  19. package/dist/npm/AutoComplete/AutoComplete.js +1 -0
  20. package/dist/npm/ComboBox/ComboBox.d.ts +1 -0
  21. package/dist/npm/ComboBox/ComboBox.js +1 -0
  22. package/dist/npm/DropDownList/DropDownList.d.ts +2 -3
  23. package/dist/npm/DropDownList/DropDownList.js +1 -0
  24. package/dist/npm/DropDownTree/DropDownTree.js +2 -1
  25. package/dist/npm/MultiColumnComboBox/MultiColumnComboBox.js +1 -1
  26. package/dist/npm/MultiSelect/MultiSelect.d.ts +1 -0
  27. package/dist/npm/MultiSelect/MultiSelect.js +1 -0
  28. package/dist/npm/MultiSelectTree/MultiSelectTree.js +2 -1
  29. package/dist/npm/common/DropDownBase.d.ts +2 -0
  30. package/dist/npm/common/DropDownBase.js +1 -0
  31. package/dist/npm/common/settings.d.ts +4 -0
  32. package/dist/npm/package-metadata.js +1 -1
  33. package/dist/systemjs/kendo-react-dropdowns.js +1 -1
  34. package/package.json +7 -7
@@ -71,6 +71,7 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, Aut
71
71
  openDuration: PropTypes.Requireable<number>;
72
72
  closeDuration: PropTypes.Requireable<number>;
73
73
  }>>;
74
+ popupClass: PropTypes.Requireable<string>;
74
75
  className: PropTypes.Requireable<string>;
75
76
  appendTo: PropTypes.Requireable<any>;
76
77
  width: PropTypes.Requireable<string | number>;
@@ -392,6 +392,7 @@ var AutoComplete = /** @class */ (function (_super) {
392
392
  animate: popupSettings.animate,
393
393
  anchor: this.element,
394
394
  show: opened,
395
+ popupClass: popupSettings.popupClass,
395
396
  className: classNames('k-list-container k-reset', popupSettings.className),
396
397
  appendTo: popupSettings.appendTo
397
398
  }, dir: dir !== undefined ? dir : this.base.dirCalculated, itemsCount: [data.length] },
@@ -84,6 +84,7 @@ export default class ComboBox extends React.Component<ComboBoxProps, ComboBoxSta
84
84
  openDuration: PropTypes.Requireable<number>;
85
85
  closeDuration: PropTypes.Requireable<number>;
86
86
  }>>;
87
+ popupClass: PropTypes.Requireable<string>;
87
88
  className: PropTypes.Requireable<string>;
88
89
  appendTo: PropTypes.Requireable<any>;
89
90
  width: PropTypes.Requireable<string | number>;
@@ -530,6 +530,7 @@ var ComboBox = /** @class */ (function (_super) {
530
530
  animate: popupSettings.animate,
531
531
  anchor: this.element,
532
532
  show: opened,
533
+ popupClass: popupSettings.popupClass,
533
534
  className: classNames('k-list-container k-reset', popupSettings.className),
534
535
  appendTo: popupSettings.appendTo
535
536
  }, dir: dir !== undefined ? dir : this.base.dirCalculated, itemsCount: [data.length] },
@@ -62,6 +62,7 @@ export default class DropDownList extends React.Component<DropDownListProps, Dro
62
62
  openDuration: PropTypes.Requireable<number>;
63
63
  closeDuration: PropTypes.Requireable<number>;
64
64
  }>>;
65
+ popupClass: PropTypes.Requireable<string>;
65
66
  className: PropTypes.Requireable<string>;
66
67
  appendTo: PropTypes.Requireable<any>;
67
68
  width: PropTypes.Requireable<string | number>;
@@ -97,9 +98,7 @@ export default class DropDownList extends React.Component<DropDownListProps, Dro
97
98
  static defaultProps: {
98
99
  required: boolean;
99
100
  popupSettings: {
100
- height: string; /**
101
- * @hidden
102
- */
101
+ height: string;
103
102
  };
104
103
  validityStyles: boolean;
105
104
  delay: number;
@@ -130,6 +130,7 @@ var DropDownList = /** @class */ (function (_super) {
130
130
  dir: dir !== undefined ? dir : base.dirCalculated,
131
131
  width: popupWidth,
132
132
  popupSettings: {
133
+ popupClass: popupSettings.popupClass,
133
134
  className: classNames('k-list-container k-reset', popupSettings.className),
134
135
  animate: popupSettings.animate,
135
136
  anchor: _this.element,
@@ -320,7 +320,7 @@ export var DropDownTree = React.forwardRef(function (props, ref) {
320
320
  React.createElement("span", { className: classNames('k-icon', { 'k-i-arrow-60-down': !props.loading, 'k-i-loading': props.loading }) })),
321
321
  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%' } },
322
322
  React.createElement("option", { value: props.valueMap ? props.valueMap.call(undefined, value) : value }))),
323
- React.createElement(Popup, { className: classNames('k-list-container k-group k-reset k-popup-dropdowntree', popupSettings.className, { 'k-rtl': dir === 'rtl' }), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
323
+ React.createElement(Popup, { className: classNames('k-list-container k-group k-reset k-popup-dropdowntree', popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: popupSettings.popupClass, style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
324
324
  props.filterable && (React.createElement("span", { className: "k-list-filter" },
325
325
  React.createElement("input", { className: "k-textbox", tabIndex: tabIndex, ref: inputRef, value: props.filter === undefined ? filter : props.filter, onChange: onFilterChange, onKeyDown: onInputKeyDown }),
326
326
  React.createElement("span", { className: "k-icon k-i-zoom" }))),
@@ -361,6 +361,7 @@ var propTypes = {
361
361
  openDuration: PropTypes.number,
362
362
  closeDuration: PropTypes.number
363
363
  })]),
364
+ popupClass: PropTypes.string,
364
365
  className: PropTypes.string,
365
366
  appendTo: PropTypes.any,
366
367
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -101,7 +101,7 @@ export var MultiColumnComboBox = React.forwardRef(function (props, ref) {
101
101
  var onPageChangeHandler = React.useCallback(function (event) { return handleEvent(onPageChange, event); }, [onPageChange]);
102
102
  React.useEffect(function () { setScrollbarWidth(); });
103
103
  var List = React.useCallback(function (listProps) { return React.createElement(MultiColumnList, __assign({}, listProps)); }, []);
104
- return (React.createElement(ComboBox, __assign({}, other, { list: List, popupSettings: __assign({ width: popupWidth }, popupSettings, { className: classNames('k-dropdowngrid-popup k-popup-flush', popupSettings.className) }), ref: comboBoxRef, header: header, itemRender: itemRender, onOpen: onOpenHandler, onClose: onCloseHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, onChange: onChangeHandler, onFilterChange: onFilterChangeHandler, onPageChange: onPageChangeHandler })));
104
+ return (React.createElement(ComboBox, __assign({}, other, { list: List, popupSettings: __assign({ width: popupWidth }, popupSettings, { popupClass: 'k-dropdowngrid-popup', className: classNames('k-popup-flush', popupSettings.className) }), ref: comboBoxRef, header: header, itemRender: itemRender, onOpen: onOpenHandler, onClose: onCloseHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, onChange: onChangeHandler, onFilterChange: onFilterChangeHandler, onPageChange: onPageChangeHandler })));
105
105
  });
106
106
  var propTypes = __assign({}, ComboBox.propTypes, { columns: PropTypes.any.isRequired });
107
107
  var defaultProps = {
@@ -85,6 +85,7 @@ export default class MultiSelect extends React.Component<MultiSelectProps, Multi
85
85
  openDuration: PropTypes.Requireable<number>;
86
86
  closeDuration: PropTypes.Requireable<number>;
87
87
  }>>;
88
+ popupClass: PropTypes.Requireable<string>;
88
89
  className: PropTypes.Requireable<string>;
89
90
  appendTo: PropTypes.Requireable<any>;
90
91
  width: PropTypes.Requireable<string | number>;
@@ -260,6 +260,7 @@ var MultiSelect = /** @class */ (function (_super) {
260
260
  dir: dir !== undefined ? dir : base.dirCalculated,
261
261
  width: popupWidth,
262
262
  popupSettings: {
263
+ popupClass: popupSettings.popupClass,
263
264
  className: classNames('k-list-container k-reset', popupSettings.className),
264
265
  animate: popupSettings.animate,
265
266
  anchor: _this.element,
@@ -372,7 +372,7 @@ export var MultiSelectTree = React.forwardRef(function (props, ref) {
372
372
  hasValue && !disabled && (React.createElement("span", { onClick: onClear, className: "k-icon k-clear-value k-i-close", title: localization.toLanguageString(clear, messages[clear]), role: "button", tabIndex: -1, onMouseDown: function (e) { return e.preventDefault(); } })),
373
373
  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%' } },
374
374
  React.createElement("option", { value: props.valueMap ? props.valueMap.call(undefined, value) : value }))),
375
- React.createElement(Popup, { className: classNames('k-list-container k-group k-reset k-popup-dropdowntree', 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 },
375
+ React.createElement(Popup, { popupClass: popupSettings.popupClass, className: classNames('k-list-container k-group k-reset k-popup-dropdowntree', 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 },
376
376
  props.filterable && (React.createElement("span", { className: "k-list-filter" },
377
377
  React.createElement("input", { className: "k-textbox", tabIndex: tabIndex, ref: inputRef, value: props.filter === undefined ? filterState : props.filter, onChange: onFilterChange, onKeyDown: onInputKeyDown }),
378
378
  React.createElement("span", { className: "k-icon k-i-zoom" }))),
@@ -418,6 +418,7 @@ var propTypes = {
418
418
  openDuration: PropTypes.number,
419
419
  closeDuration: PropTypes.number
420
420
  })]),
421
+ popupClass: PropTypes.string,
421
422
  className: PropTypes.string,
422
423
  appendTo: PropTypes.any,
423
424
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -66,6 +66,7 @@ export default class DropDownBase {
66
66
  openDuration: PropTypes.Requireable<number>;
67
67
  closeDuration: PropTypes.Requireable<number>;
68
68
  }>>;
69
+ popupClass: PropTypes.Requireable<string>;
69
70
  className: PropTypes.Requireable<string>;
70
71
  appendTo: PropTypes.Requireable<any>;
71
72
  width: PropTypes.Requireable<string | number>;
@@ -109,6 +110,7 @@ export default class DropDownBase {
109
110
  openDuration: PropTypes.Requireable<number>;
110
111
  closeDuration: PropTypes.Requireable<number>;
111
112
  }>>;
113
+ popupClass: PropTypes.Requireable<string>;
112
114
  className: PropTypes.Requireable<string>;
113
115
  appendTo: PropTypes.Requireable<any>;
114
116
  width: PropTypes.Requireable<string | number>;
@@ -231,6 +231,7 @@ var DropDownBase = /** @class */ (function () {
231
231
  openDuration: PropTypes.number,
232
232
  closeDuration: PropTypes.number
233
233
  })]),
234
+ popupClass: PropTypes.string,
234
235
  className: PropTypes.string,
235
236
  appendTo: PropTypes.any,
236
237
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -42,6 +42,10 @@ export interface DropDownsPopupSettings {
42
42
  * Specifies a list of CSS classes that will be added to the Popup element.
43
43
  */
44
44
  className?: string | Array<string>;
45
+ /**
46
+ * Specifies a list of CSS classes that are used for styling the popup inner element.
47
+ */
48
+ popupClass?: string;
45
49
  /**
46
50
  * Sets the width of the popup container. By default, the width of the host element is used.
47
51
  */
@@ -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: 1633420239,
8
+ publishDate: 1634291501,
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
  };
@@ -71,6 +71,7 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, Aut
71
71
  openDuration: PropTypes.Requireable<number>;
72
72
  closeDuration: PropTypes.Requireable<number>;
73
73
  }>>;
74
+ popupClass: PropTypes.Requireable<string>;
74
75
  className: PropTypes.Requireable<string>;
75
76
  appendTo: PropTypes.Requireable<any>;
76
77
  width: PropTypes.Requireable<string | number>;
@@ -394,6 +394,7 @@ var AutoComplete = /** @class */ (function (_super) {
394
394
  animate: popupSettings.animate,
395
395
  anchor: this.element,
396
396
  show: opened,
397
+ popupClass: popupSettings.popupClass,
397
398
  className: kendo_react_common_1.classNames('k-list-container k-reset', popupSettings.className),
398
399
  appendTo: popupSettings.appendTo
399
400
  }, dir: dir !== undefined ? dir : this.base.dirCalculated, itemsCount: [data.length] },
@@ -84,6 +84,7 @@ export default class ComboBox extends React.Component<ComboBoxProps, ComboBoxSta
84
84
  openDuration: PropTypes.Requireable<number>;
85
85
  closeDuration: PropTypes.Requireable<number>;
86
86
  }>>;
87
+ popupClass: PropTypes.Requireable<string>;
87
88
  className: PropTypes.Requireable<string>;
88
89
  appendTo: PropTypes.Requireable<any>;
89
90
  width: PropTypes.Requireable<string | number>;
@@ -532,6 +532,7 @@ var ComboBox = /** @class */ (function (_super) {
532
532
  animate: popupSettings.animate,
533
533
  anchor: this.element,
534
534
  show: opened,
535
+ popupClass: popupSettings.popupClass,
535
536
  className: kendo_react_common_1.classNames('k-list-container k-reset', popupSettings.className),
536
537
  appendTo: popupSettings.appendTo
537
538
  }, dir: dir !== undefined ? dir : this.base.dirCalculated, itemsCount: [data.length] },
@@ -62,6 +62,7 @@ export default class DropDownList extends React.Component<DropDownListProps, Dro
62
62
  openDuration: PropTypes.Requireable<number>;
63
63
  closeDuration: PropTypes.Requireable<number>;
64
64
  }>>;
65
+ popupClass: PropTypes.Requireable<string>;
65
66
  className: PropTypes.Requireable<string>;
66
67
  appendTo: PropTypes.Requireable<any>;
67
68
  width: PropTypes.Requireable<string | number>;
@@ -97,9 +98,7 @@ export default class DropDownList extends React.Component<DropDownListProps, Dro
97
98
  static defaultProps: {
98
99
  required: boolean;
99
100
  popupSettings: {
100
- height: string; /**
101
- * @hidden
102
- */
101
+ height: string;
103
102
  };
104
103
  validityStyles: boolean;
105
104
  delay: number;
@@ -132,6 +132,7 @@ var DropDownList = /** @class */ (function (_super) {
132
132
  dir: dir !== undefined ? dir : base.dirCalculated,
133
133
  width: popupWidth,
134
134
  popupSettings: {
135
+ popupClass: popupSettings.popupClass,
135
136
  className: kendo_react_common_1.classNames('k-list-container k-reset', popupSettings.className),
136
137
  animate: popupSettings.animate,
137
138
  anchor: _this.element,
@@ -322,7 +322,7 @@ exports.DropDownTree = React.forwardRef(function (props, ref) {
322
322
  React.createElement("span", { className: kendo_react_common_1.classNames('k-icon', { 'k-i-arrow-60-down': !props.loading, 'k-i-loading': props.loading }) })),
323
323
  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%' } },
324
324
  React.createElement("option", { value: props.valueMap ? props.valueMap.call(undefined, value) : value }))),
325
- React.createElement(kendo_react_popup_1.Popup, { className: kendo_react_common_1.classNames('k-list-container k-group k-reset k-popup-dropdowntree', popupSettings.className, { 'k-rtl': dir === 'rtl' }), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
325
+ React.createElement(kendo_react_popup_1.Popup, { className: kendo_react_common_1.classNames('k-list-container k-group k-reset k-popup-dropdowntree', popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: popupSettings.popupClass, style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
326
326
  props.filterable && (React.createElement("span", { className: "k-list-filter" },
327
327
  React.createElement("input", { className: "k-textbox", tabIndex: tabIndex, ref: inputRef, value: props.filter === undefined ? filter : props.filter, onChange: onFilterChange, onKeyDown: onInputKeyDown }),
328
328
  React.createElement("span", { className: "k-icon k-i-zoom" }))),
@@ -363,6 +363,7 @@ var propTypes = {
363
363
  openDuration: PropTypes.number,
364
364
  closeDuration: PropTypes.number
365
365
  })]),
366
+ popupClass: PropTypes.string,
366
367
  className: PropTypes.string,
367
368
  appendTo: PropTypes.any,
368
369
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -103,7 +103,7 @@ exports.MultiColumnComboBox = React.forwardRef(function (props, ref) {
103
103
  var onPageChangeHandler = React.useCallback(function (event) { return handleEvent(onPageChange, event); }, [onPageChange]);
104
104
  React.useEffect(function () { kendo_react_common_1.setScrollbarWidth(); });
105
105
  var List = React.useCallback(function (listProps) { return React.createElement(MultiColumnList_1.MultiColumnList, __assign({}, listProps)); }, []);
106
- return (React.createElement(ComboBox_1.default, __assign({}, other, { list: List, popupSettings: __assign({ width: popupWidth }, popupSettings, { className: kendo_react_common_1.classNames('k-dropdowngrid-popup k-popup-flush', popupSettings.className) }), ref: comboBoxRef, header: header, itemRender: itemRender, onOpen: onOpenHandler, onClose: onCloseHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, onChange: onChangeHandler, onFilterChange: onFilterChangeHandler, onPageChange: onPageChangeHandler })));
106
+ return (React.createElement(ComboBox_1.default, __assign({}, other, { list: List, popupSettings: __assign({ width: popupWidth }, popupSettings, { popupClass: 'k-dropdowngrid-popup', className: kendo_react_common_1.classNames('k-popup-flush', popupSettings.className) }), ref: comboBoxRef, header: header, itemRender: itemRender, onOpen: onOpenHandler, onClose: onCloseHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, onChange: onChangeHandler, onFilterChange: onFilterChangeHandler, onPageChange: onPageChangeHandler })));
107
107
  });
108
108
  var propTypes = __assign({}, ComboBox_1.default.propTypes, { columns: PropTypes.any.isRequired });
109
109
  var defaultProps = {
@@ -85,6 +85,7 @@ export default class MultiSelect extends React.Component<MultiSelectProps, Multi
85
85
  openDuration: PropTypes.Requireable<number>;
86
86
  closeDuration: PropTypes.Requireable<number>;
87
87
  }>>;
88
+ popupClass: PropTypes.Requireable<string>;
88
89
  className: PropTypes.Requireable<string>;
89
90
  appendTo: PropTypes.Requireable<any>;
90
91
  width: PropTypes.Requireable<string | number>;
@@ -262,6 +262,7 @@ var MultiSelect = /** @class */ (function (_super) {
262
262
  dir: dir !== undefined ? dir : base.dirCalculated,
263
263
  width: popupWidth,
264
264
  popupSettings: {
265
+ popupClass: popupSettings.popupClass,
265
266
  className: kendo_react_common_1.classNames('k-list-container k-reset', popupSettings.className),
266
267
  animate: popupSettings.animate,
267
268
  anchor: _this.element,
@@ -374,7 +374,7 @@ exports.MultiSelectTree = React.forwardRef(function (props, ref) {
374
374
  hasValue && !disabled && (React.createElement("span", { onClick: onClear, className: "k-icon k-clear-value k-i-close", title: localization.toLanguageString(messages_1.clear, messages_1.messages[messages_1.clear]), role: "button", tabIndex: -1, onMouseDown: function (e) { return e.preventDefault(); } })),
375
375
  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%' } },
376
376
  React.createElement("option", { value: props.valueMap ? props.valueMap.call(undefined, value) : value }))),
377
- React.createElement(kendo_react_popup_1.Popup, { className: kendo_react_common_1.classNames('k-list-container k-group k-reset k-popup-dropdowntree', 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 },
377
+ React.createElement(kendo_react_popup_1.Popup, { popupClass: popupSettings.popupClass, className: kendo_react_common_1.classNames('k-list-container k-group k-reset k-popup-dropdowntree', 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 },
378
378
  props.filterable && (React.createElement("span", { className: "k-list-filter" },
379
379
  React.createElement("input", { className: "k-textbox", tabIndex: tabIndex, ref: inputRef, value: props.filter === undefined ? filterState : props.filter, onChange: onFilterChange, onKeyDown: onInputKeyDown }),
380
380
  React.createElement("span", { className: "k-icon k-i-zoom" }))),
@@ -420,6 +420,7 @@ var propTypes = {
420
420
  openDuration: PropTypes.number,
421
421
  closeDuration: PropTypes.number
422
422
  })]),
423
+ popupClass: PropTypes.string,
423
424
  className: PropTypes.string,
424
425
  appendTo: PropTypes.any,
425
426
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -66,6 +66,7 @@ export default class DropDownBase {
66
66
  openDuration: PropTypes.Requireable<number>;
67
67
  closeDuration: PropTypes.Requireable<number>;
68
68
  }>>;
69
+ popupClass: PropTypes.Requireable<string>;
69
70
  className: PropTypes.Requireable<string>;
70
71
  appendTo: PropTypes.Requireable<any>;
71
72
  width: PropTypes.Requireable<string | number>;
@@ -109,6 +110,7 @@ export default class DropDownBase {
109
110
  openDuration: PropTypes.Requireable<number>;
110
111
  closeDuration: PropTypes.Requireable<number>;
111
112
  }>>;
113
+ popupClass: PropTypes.Requireable<string>;
112
114
  className: PropTypes.Requireable<string>;
113
115
  appendTo: PropTypes.Requireable<any>;
114
116
  width: PropTypes.Requireable<string | number>;
@@ -233,6 +233,7 @@ var DropDownBase = /** @class */ (function () {
233
233
  openDuration: PropTypes.number,
234
234
  closeDuration: PropTypes.number
235
235
  })]),
236
+ popupClass: PropTypes.string,
236
237
  className: PropTypes.string,
237
238
  appendTo: PropTypes.any,
238
239
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -42,6 +42,10 @@ export interface DropDownsPopupSettings {
42
42
  * Specifies a list of CSS classes that will be added to the Popup element.
43
43
  */
44
44
  className?: string | Array<string>;
45
+ /**
46
+ * Specifies a list of CSS classes that are used for styling the popup inner element.
47
+ */
48
+ popupClass?: string;
45
49
  /**
46
50
  * Sets the width of the popup container. By default, the width of the host element is used.
47
51
  */
@@ -7,7 +7,7 @@ exports.packageMetadata = {
7
7
  name: '@progress/kendo-react-dropdowns',
8
8
  productName: 'KendoReact',
9
9
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
10
- publishDate: 1633420239,
10
+ publishDate: 1634291501,
11
11
  version: '',
12
12
  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'
13
13
  };