@progress/kendo-react-dropdowns 5.6.0-dev.202208291054 → 5.6.0-next.202208310638

package/dist/npm/DropDownList/DropDownList.js

@@ -39,6 +39,7 @@ var DropDownBase_1 = require("../common/DropDownBase");
 var utils_1 = require("../common/utils");
 var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../package-metadata");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap, roundedMap = kendo_react_common_1.kendoThemeMaps.roundedMap;
 /**
@@ -487,8 +488,8 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     DropDownListWithoutContext.prototype.render = function () {
-        var _a, _b;
-        var _c = this.props, style = _c.style, className = _c.className, label = _c.label, dir = _c.dir, virtual = _c.virtual, size = _c.size, rounded = _c.rounded, fillMode = _c.fillMode;
+        var _a;
+        var _b = this.props, style = _b.style, className = _b.className, label = _b.label, dir = _b.dir, virtual = _b.virtual, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var value = this.value;
         var text = (0, utils_1.getItemValue)(value, this.props.textField);
@@ -501,7 +502,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             base.vs.total = virtual.total;
             base.vs.pageSize = virtual.pageSize;
         }
-        var _d = this.props, dataItemKey = _d.dataItemKey, _e = _d.data, data = _e === void 0 ? [] : _e, disabled = _d.disabled, tabIndex = _d.tabIndex, loading = _d.loading, iconClassName = _d.iconClassName, valueRender = _d.valueRender;
+        var _c = this.props, dataItemKey = _c.dataItemKey, _d = _c.data, data = _d === void 0 ? [] : _d, disabled = _c.disabled, tabIndex = _c.tabIndex, loading = _c.loading, iconClassName = _c.iconClassName, valueRender = _c.valueRender;
         var focused = this.state.focused;
         var selectedIndex = data.findIndex(function (i) { return (0, utils_1.areSame)(i, value, dataItemKey); });
         var valueDefaultRendering = (React.createElement("span", { className: "k-input-inner" },
@@ -522,12 +523,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 : __assign(__assign({}, style), { width: undefined }), dir: dir, onMouseDown: opened ? utils_1.preventDefaultNonInputs : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: (0, kendo_react_common_1.getTabIndex)(tabIndex, disabled), accessKey: this.props.accessKey, onKeyDown: this.handleKeyDown, onKeyPress: this.handleKeyPress, onClick: disabled ? undefined : this.handleWrapperClick, role: 'combobox', "aria-required": this.required, "aria-disabled": disabled || undefined, "aria-haspopup": 'listbox', "aria-expanded": opened || false, "aria-owns": this.base.listBoxId, "aria-activedescendant": opened ? ('option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0))) : undefined, "aria-label": this.props.ariaLabel || this.props.label, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, id: this.props.id, title: this.props.title },
             valueElement,
             loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon", key: "loading" }),
-            React.createElement("button", { tabIndex: -1, type: "button", "aria-hidden": true, className: (0, kendo_react_common_1.classNames)('k-input-button k-button k-icon-button', (_b = {},
-                    _b["k-button-".concat(sizeMap[size] || size)] = size,
-                    _b["k-button-".concat(fillMode)] = fillMode,
-                    _b["k-button-".concat(fillMode, "-base")] = fillMode,
-                    _b)) },
-                React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-button-icon k-icon k-i-arrow-s', iconClassName) })),
+            React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", "aria-hidden": true, size: size, fillMode: fillMode, iconClass: iconClassName, className: "k-input-button", themeColor: 'base', icon: "caret-alt-down" }),
             this.dummySelect(value),
             this.renderListContainer()));
         return label ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorValue: text, editorValid: isValid, editorDisabled: this.props.disabled, style: { width: style ? style.width : undefined }, children: dropdownlist })) : dropdownlist;

package/dist/npm/DropDownTree/DropDownTree.js

@@ -35,6 +35,7 @@ var ListNoData_1 = require("./ListNoData");
 var messages_1 = require("./../messages");
 var kendo_react_labels_1 = require("@progress/kendo-react-labels");
 var ListFilter_1 = require("../common/ListFilter");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap, roundedMap = kendo_react_common_1.kendoThemeMaps.roundedMap;
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 var ValueHolder = function (props) {
@@ -79,12 +80,12 @@ exports.DropDownTreePropsContext = (0, kendo_react_common_1.createPropsContext)(
  * Obtaining the `ref` returns an object of type [DropDownTreeHandle]({% slug api_dropdowns_dropdowntreehandle %}).
  */
 exports.DropDownTree = React.forwardRef(function (directProps, ref) {
-    var _a, _b;
+    var _a;
     (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
     var props = (0, kendo_react_common_1.usePropsContext)(exports.DropDownTreePropsContext, directProps);
     var calculatedId = React.useMemo(function () { return (0, kendo_react_common_1.guid)(); }, []);
     var id = props.id || calculatedId;
-    var _c = props.data, data = _c === void 0 ? [] : _c, dataItemKey = props.dataItemKey, _d = props.popupSettings, popupSettings = _d === void 0 ? {} : _d, _e = props.style, style = _e === void 0 ? {} : _e, opened = props.opened, disabled = props.disabled, _f = props.onOpen, onOpen = _f === void 0 ? kendo_react_common_1.noop : _f, _g = props.onClose, onClose = _g === void 0 ? kendo_react_common_1.noop : _g, placeholder = props.placeholder, label = props.label, name = props.name, _h = props.selectField, selectField = _h === void 0 ? defaultProps.selectField : _h, _j = props.subItemsField, subItemsField = _j === void 0 ? defaultProps.subItemsField : _j, validationMessage = props.validationMessage, valid = props.valid, required = props.required, validityStyles = props.validityStyles;
+    var _b = props.data, data = _b === void 0 ? [] : _b, dataItemKey = props.dataItemKey, _c = props.popupSettings, popupSettings = _c === void 0 ? {} : _c, _d = props.style, style = _d === void 0 ? {} : _d, opened = props.opened, disabled = props.disabled, _e = props.onOpen, onOpen = _e === void 0 ? kendo_react_common_1.noop : _e, _f = props.onClose, onClose = _f === void 0 ? kendo_react_common_1.noop : _f, placeholder = props.placeholder, label = props.label, name = props.name, _g = props.selectField, selectField = _g === void 0 ? defaultProps.selectField : _g, _h = props.subItemsField, subItemsField = _h === void 0 ? defaultProps.subItemsField : _h, validationMessage = props.validationMessage, valid = props.valid, required = props.required, validityStyles = props.validityStyles;
     var tabIndex = (0, kendo_react_common_1.getTabIndex)(props.tabIndex, disabled);
     var target = React.useRef(null);
     var elementRef = React.useRef(null);
@@ -92,7 +93,7 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
     var selectRef = React.useRef(null);
     var treeViewRef = React.useRef(null);
     var skipFocusRef = React.useRef(false);
-    var _k = React.useState(undefined), stateValue = _k[0], setStateValue = _k[1];
+    var _j = React.useState(undefined), stateValue = _j[0], setStateValue = _j[1];
     var controlled = props.value !== undefined;
     var value = controlled ? props.value : (stateValue !== undefined ? stateValue : props.defaultValue);
     var hasValue = (0, utils_1.isPresent)(value);
@@ -110,10 +111,10 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
         popupSettings.width : (style.width !== undefined ? style.width : defaultProps.popupSettings.width);
     var popupWidth = (0, useDropdownWidth_1.useDropdownWidth)(elementRef, initialStyleWidth);
     var popupStyles = __assign({ width: popupWidth }, (dir !== undefined ? { direction: dir } : {}));
-    var _l = React.useState(false), open = _l[0], setOpen = _l[1];
+    var _k = React.useState(false), open = _k[0], setOpen = _k[1];
     var isOpen = opened !== undefined ? opened : open;
-    var _m = React.useState(false), focused = _m[0], setFocused = _m[1];
-    var _o = React.useState(''), filter = _o[0], setFilter = _o[1];
+    var _l = React.useState(false), focused = _l[0], setFocused = _l[1];
+    var _m = React.useState(''), filter = _m[0], setFilter = _m[1];
     var setValidity = React.useCallback(function () {
         if (selectRef.current && selectRef.current.setCustomValidity) {
             selectRef.current.setCustomValidity(validity.valid
@@ -359,15 +360,10 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
         props.loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon" }),
         hasValue && !disabled && (React.createElement("span", { onClick: onClear, className: "k-clear-value", title: localization.toLanguageString(messages_1.clear, messages_1.messages[messages_1.clear]), role: "button", tabIndex: -1, onMouseDown: function (e) { return e.preventDefault(); } },
             React.createElement("span", { className: "k-icon k-i-x" }))),
-        React.createElement("button", { tabIndex: -1, type: "button", "aria-label": "select", className: (0, kendo_react_common_1.classNames)('k-input-button k-button k-icon-button', (_b = {},
-                _b["k-button-".concat(sizeMap[size] || size)] = size,
-                _b["k-button-".concat(fillMode)] = fillMode,
-                _b["k-button-".concat(fillMode, "-base")] = fillMode,
-                _b)) },
-            React.createElement("span", { className: "k-button-icon k-icon k-i-arrow-s" })),
+        React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", "aria-label": "select", className: "k-input-button", size: size, fillMode: fillMode, themeColor: "base", rounded: null, icon: "caret-alt-down" }),
         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%' } },
             React.createElement("option", { value: props.valueMap ? props.valueMap.call(undefined, value) : value })),
-        React.createElement(kendo_react_popup_1.Popup, { className: (0, kendo_react_common_1.classNames)(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 },
+        React.createElement(kendo_react_popup_1.Popup, { className: (0, kendo_react_common_1.classNames)(popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container'), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
             props.filterable && (React.createElement(ListFilter_1.default, { value: props.filter === undefined ? filter : props.filter, inputRef: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })),
             data.length > 0 ? (React.createElement(kendo_react_treeview_1.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(messages_1.nodata, messages_1.messages[messages_1.nodata]))))));
     return label ? (React.createElement(kendo_react_labels_1.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/npm/MultiSelect/MultiSelect.d.ts

@@ -61,15 +61,15 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
         label: PropTypes.Requireable<string>;
         loading: PropTypes.Requireable<boolean>;
         popupSettings: PropTypes.Requireable<PropTypes.InferProps<{
-            animate: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
+            animate: PropTypes.Requireable<boolean | PropTypes.InferProps<{
                 openDuration: PropTypes.Requireable<number>;
                 closeDuration: PropTypes.Requireable<number>;
-            }> | null | undefined>>;
+            }>>;
             popupClass: PropTypes.Requireable<string>;
             className: PropTypes.Requireable<string>;
             appendTo: PropTypes.Requireable<any>;
-            width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-            height: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+            width: PropTypes.Requireable<string | number>;
+            height: PropTypes.Requireable<string | number>;
         }>>;
         onOpen: PropTypes.Requireable<(...args: any[]) => any>;
         onClose: PropTypes.Requireable<(...args: any[]) => any>;

package/dist/npm/MultiSelect/MultiSelect.js

@@ -261,7 +261,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 dir: dir !== undefined ? dir : base.dirCalculated,
                 width: popupWidth,
                 popupSettings: {
-                    popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass),
+                    popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container'),
                     className: popupSettings.className,
                     animate: popupSettings.animate,
                     anchor: _this.element,

package/dist/npm/MultiSelect/TagList.js

@@ -31,7 +31,7 @@ var TagList = /** @class */ (function (_super) {
         var _a = this.props, data = _a.data, guid = _a.guid, focused = _a.focused, tagRender = _a.tagRender, TagComponent = _a.tag, onTagDelete = _a.onTagDelete, size = _a.size;
         return (React.createElement(React.Fragment, null,
             data.map(function (tagData, index) {
-                var tag = TagComponent ? (React.createElement(TagComponent, { key: tagData.text + index, tagData: tagData, guid: guid, focusedTag: focused, onTagDelete: onTagDelete })) : (React.createElement(kendo_react_buttons_1.Chip, { id: "tag-".concat(guid, "-").concat(tagData.text.replace(/\s+/g, '-')), "aria-selected": true, role: "option", "aria-setsize": data.length, key: tagData.text + index, text: tagData.text, removable: true, removeIcon: 'k-i-close', onRemove: function (e) { return onTagDelete.call(undefined, tagData.data, e.syntheticEvent); }, onMouseDown: preventDefault, onClick: stopPropagation, className: tagData === focused ? 'k-focus' : undefined, size: size }));
+                var tag = TagComponent ? (React.createElement(TagComponent, { key: tagData.text + index, tagData: tagData, guid: guid, focusedTag: focused, onTagDelete: onTagDelete })) : (React.createElement(kendo_react_buttons_1.Chip, { id: "tag-".concat(guid, "-").concat(tagData.text.replace(/\s+/g, '-')), "aria-selected": true, role: "option", "aria-setsize": data.length, key: tagData.text + index, text: tagData.text, removable: true, onRemove: function (e) { return onTagDelete.call(undefined, tagData.data, e.syntheticEvent); }, onMouseDown: preventDefault, onClick: stopPropagation, className: tagData === focused ? 'k-focus' : undefined, size: size }));
                 return tagRender ? tagRender(tagData, tag) : tag;
             }),
             this.props.children));

package/dist/npm/MultiSelectTree/MultiSelectTree.js

@@ -412,7 +412,7 @@ exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
         hasValue && !disabled && React.createElement(ClearButton_1.default, { onClick: onClear }),
         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%' } },
             React.createElement("option", { value: props.valueMap ? props.valueMap.call(undefined, value) : value })),
-        React.createElement(kendo_react_popup_1.Popup, { popupClass: popupSettings.popupClass, className: (0, kendo_react_common_1.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 },
+        React.createElement(kendo_react_popup_1.Popup, { popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container'), className: (0, kendo_react_common_1.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 },
             props.filterable && (React.createElement(ListFilter_1.default, { value: props.filter === undefined ? filterState : props.filter, inputRef: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, tabIndex: tabIndex, size: size, rounded: rounded, fillMode: fillMode })),
             data.length > 0 ? (React.createElement(kendo_react_treeview_1.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(messages_1.nodata, messages_1.messages[messages_1.nodata]))))));
     return label ? (React.createElement(kendo_react_labels_1.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/npm/common/DropDownBase.d.ts

@@ -62,15 +62,15 @@ export default class DropDownBase {
         label: PropTypes.Requireable<string>;
         loading: PropTypes.Requireable<boolean>;
         popupSettings: PropTypes.Requireable<PropTypes.InferProps<{
-            animate: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
+            animate: PropTypes.Requireable<boolean | PropTypes.InferProps<{
                 openDuration: PropTypes.Requireable<number>;
                 closeDuration: PropTypes.Requireable<number>;
-            }> | null | undefined>>;
+            }>>;
             popupClass: PropTypes.Requireable<string>;
             className: PropTypes.Requireable<string>;
             appendTo: PropTypes.Requireable<any>;
-            width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-            height: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+            width: PropTypes.Requireable<string | number>;
+            height: PropTypes.Requireable<string | number>;
         }>>;
         onOpen: PropTypes.Requireable<(...args: any[]) => any>;
         onClose: PropTypes.Requireable<(...args: any[]) => any>;
@@ -106,15 +106,15 @@ export default class DropDownBase {
         label: PropTypes.Requireable<string>;
         loading: PropTypes.Requireable<boolean>;
         popupSettings: PropTypes.Requireable<PropTypes.InferProps<{
-            animate: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
+            animate: PropTypes.Requireable<boolean | PropTypes.InferProps<{
                 openDuration: PropTypes.Requireable<number>;
                 closeDuration: PropTypes.Requireable<number>;
-            }> | null | undefined>>;
+            }>>;
             popupClass: PropTypes.Requireable<string>;
             className: PropTypes.Requireable<string>;
             appendTo: PropTypes.Requireable<any>;
-            width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-            height: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+            width: PropTypes.Requireable<string | number>;
+            height: PropTypes.Requireable<string | number>;
         }>>;
         onOpen: PropTypes.Requireable<(...args: any[]) => any>;
         onClose: PropTypes.Requireable<(...args: any[]) => any>;

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-dropdowns',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1661769243,
+    publishDate: 1661926803,
     version: '',
     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'
 };