@progress/kendo-react-dialogs 5.10.0-dev.202301091032 → 5.10.0-dev.202301092204

package/dist/es/Dialog.js

@@ -29,7 +29,7 @@ import * as ReactDOM from 'react-dom';
 import * as PropTypes from 'prop-types';
 import { DialogTitleBar } from './DialogTitleBar';
 import { DialogActionsBar } from './DialogActionsBar';
-import { guid, dispatchEvent, Keys, canUseDOM, ZIndexContext, createPropsContext, withPropsContext } from '@progress/kendo-react-common';
+import { guid, dispatchEvent, Keys, canUseDOM, ZIndexContext, createPropsContext, withPropsContext, classNames } from '@progress/kendo-react-common';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from './package-metadata';
 import { getMaxZIndex } from './utils';
@@ -113,10 +113,10 @@ var DialogWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     DialogWithoutContext.prototype.render = function () {
-        var _a;
+        var _a, _b;
         var _this = this;
         var id = this.props.id !== undefined ? this.props.id : this.titleId;
-        var _b = this.props, title = _b.title, width = _b.width, height = _b.height, children = _b.children, minWidth = _b.minWidth, dir = _b.dir, style = _b.style, contentStyle = _b.contentStyle;
+        var _c = this.props, title = _c.title, width = _c.width, height = _c.height, children = _c.children, minWidth = _c.minWidth, dir = _c.dir, style = _c.style, contentStyle = _c.contentStyle;
         var elementsArray = React.Children.toArray(children);
         var content = this.getContent(elementsArray);
         var actions = this.getActionBar(elementsArray);
@@ -128,7 +128,9 @@ var DialogWithoutContext = /** @class */ (function (_super) {
         var dialogElement = (React.createElement(ZIndexContext.Provider, { value: currentZIndex },
             React.createElement("div", __assign({}, (_a = {}, _a[DATA_DIALOGS_ID] = this._id, _a), { className: 'k-dialog-wrapper' + (this.props.className ? ' ' + this.props.className : ''), onKeyDown: this.onKeyDown, tabIndex: 0, dir: dir, style: __assign({ zIndex: currentZIndex }, style), ref: (function (el) { return _this.element = el; }) }),
                 React.createElement("div", { className: "k-overlay" }),
-                React.createElement("div", __assign({}, aria, { className: "k-widget k-window k-dialog", role: "dialog", "aria-modal": true, "aria-describedby": this.contentId, style: { width: width, height: height, minWidth: minWidth } }),
+                React.createElement("div", __assign({}, aria, { className: classNames('k-window k-dialog', (_b = {},
+                        _b["k-window-".concat(this.props.themeColor)] = this.props.themeColor,
+                        _b)), role: "dialog", "aria-modal": true, "aria-describedby": this.contentId, style: { width: width, height: height, minWidth: minWidth } }),
                     this.props.title &&
                         React.createElement(DialogTitleBar, { closeIcon: closeIcon, onCloseButtonClick: this.onCloseDialog, id: id }, title),
                     React.createElement("div", { className: "k-window-content k-dialog-content", style: contentStyle, id: this.contentId }, content),

package/dist/es/DialogActionsBar.js

@@ -9,7 +9,7 @@ import { classNames } from '@progress/kendo-react-common';
 export var DialogActionsBar = function (props) {
     var _a;
     var _b = props.layout, layout = _b === void 0 ? defaultProps.layout : _b, children = props.children;
-    var wrapperClasses = classNames('k-dialog-buttongroup', 'k-actions', (_a = {},
+    var wrapperClasses = classNames('k-actions', 'k-actions-horizontal', 'k-window-actions k-dialog-actions', (_a = {},
         _a["k-actions-".concat(layout)] = layout,
         _a));
     return (React.createElement("div", { className: wrapperClasses }, children));

package/dist/es/DialogProps.d.ts

@@ -61,4 +61,14 @@ export interface DialogProps {
      * * If set to `null` the Dialog will be rendered without React Portal.
      */
     appendTo?: any;
+    /**
+     * Configures the `themeColor` of the Dialog.
+     *
+     * The available options are:
+     * - primary
+     * - dark
+     * - light
+     *
+     */
+    themeColor?: 'primary' | 'dark' | 'light';
 }

package/dist/es/DialogTitleBar.js

@@ -7,6 +7,6 @@ export var DialogTitleBar = function (_a) {
     var children = _a.children, onCloseButtonClick = _a.onCloseButtonClick, id = _a.id, closeIcon = _a.closeIcon;
     return (React.createElement("div", { className: "k-window-titlebar k-dialog-titlebar", id: id },
         React.createElement("div", { className: "k-window-title k-dialog-title" }, children),
-        React.createElement("div", { className: "k-window-actions k-dialog-actions" }, closeIcon &&
-            React.createElement(Button, { role: "button", "aria-label": "Close", onClick: onCloseButtonClick, icon: "x", fillMode: "flat", className: "k-window-action k-dialog-action" }))));
+        React.createElement("div", { className: "k-window-titlebar-actions k-dialog-titlebar-actions" }, closeIcon &&
+            React.createElement(Button, { role: "button", "aria-label": "Close", onClick: onCloseButtonClick, icon: "x", fillMode: "flat", className: "k-window-titlebar-action k-dialog-titlebar-action" }))));
 };

package/dist/es/Window.js

@@ -466,17 +466,21 @@ var WindowWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     WindowWithoutContext.prototype.render = function () {
-        var _a;
+        var _a, _b;
         var _this = this;
         var elementsArray = React.Children.toArray(this.props.children);
         var content = this.getContent(elementsArray);
         var actions = this.getActionBar(elementsArray);
         var currentZIndex = this.getCurrentZIndex();
-        var classNamesWindow = classNames('k-widget', 'k-window', this.props.className, { 'k-window-minimized': this.state.stage === 'MINIMIZED' }, { 'k-window-focused': this.state.focused });
+        var classNamesWindow = classNames('k-window', this.props.className, (_a = {},
+            _a["k-window-".concat(this.props.themeColor)] = this.props.themeColor,
+            _a['k-window-minimized'] = this.state.stage === 'MINIMIZED',
+            _a['k-window-focused'] = this.state.focused,
+            _a));
         var windowElement = (React.createElement(ZIndexContext.Provider, { value: currentZIndex },
             React.createElement(React.Fragment, null,
                 this.props.modal && (React.createElement("div", { className: "k-overlay", style: __assign({ zIndex: currentZIndex }, this.props.overlayStyle) })),
-                React.createElement("div", __assign({}, (_a = {}, _a[DATA_DIALOGS_ID] = this._id, _a), { tabIndex: 0, role: 'dialog', "aria-labelledby": this.titleId, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, ref: function (el) {
+                React.createElement("div", __assign({}, (_b = {}, _b[DATA_DIALOGS_ID] = this._id, _b), { tabIndex: 0, role: 'dialog', "aria-labelledby": this.titleId, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, ref: function (el) {
                         _this.windowElement = el;
                         _this.element = el;
                     }, className: classNamesWindow, style: __assign({ top: this.top, left: this.left, width: this.width, height: this.height || '', zIndex: currentZIndex }, this.props.style) }),

package/dist/es/WindowActionsBar.js

@@ -8,7 +8,7 @@ import { classNames } from '@progress/kendo-react-common';
  */
 export var WindowActionsBar = function (props) {
     var _a = props.layout, layout = _a === void 0 ? defaultProps.layout : _a, children = props.children;
-    var wrapperClasses = classNames('k-window-buttongroup', 'k-actions', 'k-hstack', {
+    var wrapperClasses = classNames('k-actions', 'k-window-actions', 'k-actions-horizontal', 'k-hstack', {
         'k-justify-content-start': layout === 'start',
         'k-justify-content-center': layout === 'center',
         'k-justify-content-end': layout === 'end',

package/dist/es/WindowProps.d.ts

@@ -115,6 +115,16 @@ export interface WindowProps {
      * Sets a class of the Window DOM element.
      */
     className?: string;
+    /**
+     * Configures the `themeColor` of the Window.
+     *
+     * The available options are:
+     * - primary
+     * - dark
+     * - light
+     *
+     */
+    themeColor?: 'primary' | 'dark' | 'light';
     /**
      * Fires when the **Close** button in the title is clicked or when the `Esc` button is pressed.
      */

package/dist/es/WindowResizeHandlers.js

@@ -29,7 +29,7 @@ var ResizeHandlers = /** @class */ (function (_super) {
     }
     ResizeHandlers.prototype.render = function () {
         var _this = this;
-        return (React.createElement("div", null,
+        return (React.createElement("div", { className: 'k-resize-handles-wrapper' },
             " ",
             keys.map(function (key, index) {
                 return (React.createElement(Draggable, { key: index, onDrag: function (data) {

package/dist/es/WindowTitlebar.js

@@ -22,19 +22,19 @@ var WindowTitleBarComponent = function (props) {
     var localization = useLocalization();
     var minimizeButtonRender = props.minimizeButton ?
         React.createElement(props.minimizeButton, { onClick: onMinimizeButtonClick, stage: stage }) :
-        (React.createElement(Button, { fillMode: "flat", icon: "window-minimize", className: "k-window-action", onClick: onMinimizeButtonClick, "aria-label": localization.toLanguageString(dialogsWindowMinimizeButton, messages[dialogsWindowMinimizeButton]) }));
+        (React.createElement(Button, { fillMode: "flat", icon: "window-minimize", className: "k-window-titlebar-action", onClick: onMinimizeButtonClick, "aria-label": localization.toLanguageString(dialogsWindowMinimizeButton, messages[dialogsWindowMinimizeButton]) }));
     var maximizeButtonRender = props.maximizeButton ?
         React.createElement(props.maximizeButton, { onClick: onFullScreenButtonClick, stage: stage }) :
-        (React.createElement(Button, { fillMode: "flat", icon: "window-maximize", className: "k-window-action", onClick: onFullScreenButtonClick, "aria-label": localization.toLanguageString(dialogsWindowMaximizeButton, messages[dialogsWindowMaximizeButton]) }));
+        (React.createElement(Button, { fillMode: "flat", icon: "window-maximize", className: "k-window-titlebar-action", onClick: onFullScreenButtonClick, "aria-label": localization.toLanguageString(dialogsWindowMaximizeButton, messages[dialogsWindowMaximizeButton]) }));
     var restoreButtonRender = props.restoreButton ?
         React.createElement(props.restoreButton, { onClick: onRestoreButtonClick, stage: stage }) :
-        (React.createElement(Button, { fillMode: "flat", icon: "window-restore", className: "k-window-action", onClick: onRestoreButtonClick, "aria-label": localization.toLanguageString(dialogsWindowRestoreButton, messages[dialogsWindowRestoreButton]) }));
+        (React.createElement(Button, { fillMode: "flat", icon: "window-restore", className: "k-window-titlebar-action", onClick: onRestoreButtonClick, "aria-label": localization.toLanguageString(dialogsWindowRestoreButton, messages[dialogsWindowRestoreButton]) }));
     var closeButtonRender = props.closeButton ?
         React.createElement(props.closeButton, { onClick: onCloseButtonClick, stage: stage }) :
-        (React.createElement(Button, { fillMode: "flat", icon: "close", className: "k-window-action", onClick: onCloseButtonClick, "aria-label": localization.toLanguageString(dialogsWindowCloseButton, messages[dialogsWindowCloseButton]) }));
-    return (React.createElement("div", { className: "k-window-titlebar k-dialog-titlebar", style: { touchAction: 'none' }, ref: forwardedRef, onDoubleClick: onDoubleClick },
+        (React.createElement(Button, { fillMode: "flat", icon: "x", className: "k-window-titlebar-action", onClick: onCloseButtonClick, "aria-label": localization.toLanguageString(dialogsWindowCloseButton, messages[dialogsWindowCloseButton]) }));
+    return (React.createElement("div", { className: "k-window-titlebar", style: { touchAction: 'none' }, ref: forwardedRef, onDoubleClick: onDoubleClick },
         React.createElement("div", { className: "k-window-title", id: id }, children ? children : ''),
-        React.createElement("div", { className: "k-window-actions" },
+        React.createElement("div", { className: "k-window-titlebar-actions" },
             (stage === windowStage.DEFAULT) && minimizeButtonRender,
             (stage === windowStage.DEFAULT) && maximizeButtonRender,
             (stage !== windowStage.DEFAULT) && restoreButtonRender,

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-dialogs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1673259113,
+    publishDate: 1673300652,
     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'
 };

package/dist/npm/Dialog.js

@@ -116,10 +116,10 @@ var DialogWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     DialogWithoutContext.prototype.render = function () {
-        var _a;
+        var _a, _b;
         var _this = this;
         var id = this.props.id !== undefined ? this.props.id : this.titleId;
-        var _b = this.props, title = _b.title, width = _b.width, height = _b.height, children = _b.children, minWidth = _b.minWidth, dir = _b.dir, style = _b.style, contentStyle = _b.contentStyle;
+        var _c = this.props, title = _c.title, width = _c.width, height = _c.height, children = _c.children, minWidth = _c.minWidth, dir = _c.dir, style = _c.style, contentStyle = _c.contentStyle;
         var elementsArray = React.Children.toArray(children);
         var content = this.getContent(elementsArray);
         var actions = this.getActionBar(elementsArray);
@@ -131,7 +131,9 @@ var DialogWithoutContext = /** @class */ (function (_super) {
         var dialogElement = (React.createElement(kendo_react_common_1.ZIndexContext.Provider, { value: currentZIndex },
             React.createElement("div", __assign({}, (_a = {}, _a[constants_1.DATA_DIALOGS_ID] = this._id, _a), { className: 'k-dialog-wrapper' + (this.props.className ? ' ' + this.props.className : ''), onKeyDown: this.onKeyDown, tabIndex: 0, dir: dir, style: __assign({ zIndex: currentZIndex }, style), ref: (function (el) { return _this.element = el; }) }),
                 React.createElement("div", { className: "k-overlay" }),
-                React.createElement("div", __assign({}, aria, { className: "k-widget k-window k-dialog", role: "dialog", "aria-modal": true, "aria-describedby": this.contentId, style: { width: width, height: height, minWidth: minWidth } }),
+                React.createElement("div", __assign({}, aria, { className: (0, kendo_react_common_1.classNames)('k-window k-dialog', (_b = {},
+                        _b["k-window-".concat(this.props.themeColor)] = this.props.themeColor,
+                        _b)), role: "dialog", "aria-modal": true, "aria-describedby": this.contentId, style: { width: width, height: height, minWidth: minWidth } }),
                     this.props.title &&
                         React.createElement(DialogTitleBar_1.DialogTitleBar, { closeIcon: closeIcon, onCloseButtonClick: this.onCloseDialog, id: id }, title),
                     React.createElement("div", { className: "k-window-content k-dialog-content", style: contentStyle, id: this.contentId }, content),

package/dist/npm/DialogActionsBar.js

@@ -12,7 +12,7 @@ var kendo_react_common_1 = require("@progress/kendo-react-common");
 var DialogActionsBar = function (props) {
     var _a;
     var _b = props.layout, layout = _b === void 0 ? defaultProps.layout : _b, children = props.children;
-    var wrapperClasses = (0, kendo_react_common_1.classNames)('k-dialog-buttongroup', 'k-actions', (_a = {},
+    var wrapperClasses = (0, kendo_react_common_1.classNames)('k-actions', 'k-actions-horizontal', 'k-window-actions k-dialog-actions', (_a = {},
         _a["k-actions-".concat(layout)] = layout,
         _a));
     return (React.createElement("div", { className: wrapperClasses }, children));

package/dist/npm/DialogProps.d.ts

@@ -61,4 +61,14 @@ export interface DialogProps {
      * * If set to `null` the Dialog will be rendered without React Portal.
      */
     appendTo?: any;
+    /**
+     * Configures the `themeColor` of the Dialog.
+     *
+     * The available options are:
+     * - primary
+     * - dark
+     * - light
+     *
+     */
+    themeColor?: 'primary' | 'dark' | 'light';
 }

package/dist/npm/DialogTitleBar.js

@@ -10,7 +10,7 @@ var DialogTitleBar = function (_a) {
     var children = _a.children, onCloseButtonClick = _a.onCloseButtonClick, id = _a.id, closeIcon = _a.closeIcon;
     return (React.createElement("div", { className: "k-window-titlebar k-dialog-titlebar", id: id },
         React.createElement("div", { className: "k-window-title k-dialog-title" }, children),
-        React.createElement("div", { className: "k-window-actions k-dialog-actions" }, closeIcon &&
-            React.createElement(kendo_react_buttons_1.Button, { role: "button", "aria-label": "Close", onClick: onCloseButtonClick, icon: "x", fillMode: "flat", className: "k-window-action k-dialog-action" }))));
+        React.createElement("div", { className: "k-window-titlebar-actions k-dialog-titlebar-actions" }, closeIcon &&
+            React.createElement(kendo_react_buttons_1.Button, { role: "button", "aria-label": "Close", onClick: onCloseButtonClick, icon: "x", fillMode: "flat", className: "k-window-titlebar-action k-dialog-titlebar-action" }))));
 };
 exports.DialogTitleBar = DialogTitleBar;

package/dist/npm/Window.js

@@ -469,17 +469,21 @@ var WindowWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     WindowWithoutContext.prototype.render = function () {
-        var _a;
+        var _a, _b;
         var _this = this;
         var elementsArray = React.Children.toArray(this.props.children);
         var content = this.getContent(elementsArray);
         var actions = this.getActionBar(elementsArray);
         var currentZIndex = this.getCurrentZIndex();
-        var classNamesWindow = (0, kendo_react_common_1.classNames)('k-widget', 'k-window', this.props.className, { 'k-window-minimized': this.state.stage === 'MINIMIZED' }, { 'k-window-focused': this.state.focused });
+        var classNamesWindow = (0, kendo_react_common_1.classNames)('k-window', this.props.className, (_a = {},
+            _a["k-window-".concat(this.props.themeColor)] = this.props.themeColor,
+            _a['k-window-minimized'] = this.state.stage === 'MINIMIZED',
+            _a['k-window-focused'] = this.state.focused,
+            _a));
         var windowElement = (React.createElement(kendo_react_common_1.ZIndexContext.Provider, { value: currentZIndex },
             React.createElement(React.Fragment, null,
                 this.props.modal && (React.createElement("div", { className: "k-overlay", style: __assign({ zIndex: currentZIndex }, this.props.overlayStyle) })),
-                React.createElement("div", __assign({}, (_a = {}, _a[constants_1.DATA_DIALOGS_ID] = this._id, _a), { tabIndex: 0, role: 'dialog', "aria-labelledby": this.titleId, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, ref: function (el) {
+                React.createElement("div", __assign({}, (_b = {}, _b[constants_1.DATA_DIALOGS_ID] = this._id, _b), { tabIndex: 0, role: 'dialog', "aria-labelledby": this.titleId, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, ref: function (el) {
                         _this.windowElement = el;
                         _this.element = el;
                     }, className: classNamesWindow, style: __assign({ top: this.top, left: this.left, width: this.width, height: this.height || '', zIndex: currentZIndex }, this.props.style) }),

package/dist/npm/WindowActionsBar.js

@@ -11,7 +11,7 @@ var kendo_react_common_1 = require("@progress/kendo-react-common");
  */
 var WindowActionsBar = function (props) {
     var _a = props.layout, layout = _a === void 0 ? defaultProps.layout : _a, children = props.children;
-    var wrapperClasses = (0, kendo_react_common_1.classNames)('k-window-buttongroup', 'k-actions', 'k-hstack', {
+    var wrapperClasses = (0, kendo_react_common_1.classNames)('k-actions', 'k-window-actions', 'k-actions-horizontal', 'k-hstack', {
         'k-justify-content-start': layout === 'start',
         'k-justify-content-center': layout === 'center',
         'k-justify-content-end': layout === 'end',

package/dist/npm/WindowProps.d.ts

@@ -115,6 +115,16 @@ export interface WindowProps {
      * Sets a class of the Window DOM element.
      */
     className?: string;
+    /**
+     * Configures the `themeColor` of the Window.
+     *
+     * The available options are:
+     * - primary
+     * - dark
+     * - light
+     *
+     */
+    themeColor?: 'primary' | 'dark' | 'light';
     /**
      * Fires when the **Close** button in the title is clicked or when the `Esc` button is pressed.
      */

package/dist/npm/WindowResizeHandlers.js

@@ -32,7 +32,7 @@ var ResizeHandlers = /** @class */ (function (_super) {
     }
     ResizeHandlers.prototype.render = function () {
         var _this = this;
-        return (React.createElement("div", null,
+        return (React.createElement("div", { className: 'k-resize-handles-wrapper' },
             " ",
             keys.map(function (key, index) {
                 return (React.createElement(kendo_react_common_1.Draggable, { key: index, onDrag: function (data) {

package/dist/npm/WindowTitlebar.js

@@ -25,19 +25,19 @@ var WindowTitleBarComponent = function (props) {
     var localization = (0, kendo_react_intl_1.useLocalization)();
     var minimizeButtonRender = props.minimizeButton ?
         React.createElement(props.minimizeButton, { onClick: onMinimizeButtonClick, stage: stage }) :
-        (React.createElement(kendo_react_buttons_1.Button, { fillMode: "flat", icon: "window-minimize", className: "k-window-action", onClick: onMinimizeButtonClick, "aria-label": localization.toLanguageString(messages_1.dialogsWindowMinimizeButton, messages_1.messages[messages_1.dialogsWindowMinimizeButton]) }));
+        (React.createElement(kendo_react_buttons_1.Button, { fillMode: "flat", icon: "window-minimize", className: "k-window-titlebar-action", onClick: onMinimizeButtonClick, "aria-label": localization.toLanguageString(messages_1.dialogsWindowMinimizeButton, messages_1.messages[messages_1.dialogsWindowMinimizeButton]) }));
     var maximizeButtonRender = props.maximizeButton ?
         React.createElement(props.maximizeButton, { onClick: onFullScreenButtonClick, stage: stage }) :
-        (React.createElement(kendo_react_buttons_1.Button, { fillMode: "flat", icon: "window-maximize", className: "k-window-action", onClick: onFullScreenButtonClick, "aria-label": localization.toLanguageString(messages_1.dialogsWindowMaximizeButton, messages_1.messages[messages_1.dialogsWindowMaximizeButton]) }));
+        (React.createElement(kendo_react_buttons_1.Button, { fillMode: "flat", icon: "window-maximize", className: "k-window-titlebar-action", onClick: onFullScreenButtonClick, "aria-label": localization.toLanguageString(messages_1.dialogsWindowMaximizeButton, messages_1.messages[messages_1.dialogsWindowMaximizeButton]) }));
     var restoreButtonRender = props.restoreButton ?
         React.createElement(props.restoreButton, { onClick: onRestoreButtonClick, stage: stage }) :
-        (React.createElement(kendo_react_buttons_1.Button, { fillMode: "flat", icon: "window-restore", className: "k-window-action", onClick: onRestoreButtonClick, "aria-label": localization.toLanguageString(messages_1.dialogsWindowRestoreButton, messages_1.messages[messages_1.dialogsWindowRestoreButton]) }));
+        (React.createElement(kendo_react_buttons_1.Button, { fillMode: "flat", icon: "window-restore", className: "k-window-titlebar-action", onClick: onRestoreButtonClick, "aria-label": localization.toLanguageString(messages_1.dialogsWindowRestoreButton, messages_1.messages[messages_1.dialogsWindowRestoreButton]) }));
     var closeButtonRender = props.closeButton ?
         React.createElement(props.closeButton, { onClick: onCloseButtonClick, stage: stage }) :
-        (React.createElement(kendo_react_buttons_1.Button, { fillMode: "flat", icon: "close", className: "k-window-action", onClick: onCloseButtonClick, "aria-label": localization.toLanguageString(messages_1.dialogsWindowCloseButton, messages_1.messages[messages_1.dialogsWindowCloseButton]) }));
-    return (React.createElement("div", { className: "k-window-titlebar k-dialog-titlebar", style: { touchAction: 'none' }, ref: forwardedRef, onDoubleClick: onDoubleClick },
+        (React.createElement(kendo_react_buttons_1.Button, { fillMode: "flat", icon: "x", className: "k-window-titlebar-action", onClick: onCloseButtonClick, "aria-label": localization.toLanguageString(messages_1.dialogsWindowCloseButton, messages_1.messages[messages_1.dialogsWindowCloseButton]) }));
+    return (React.createElement("div", { className: "k-window-titlebar", style: { touchAction: 'none' }, ref: forwardedRef, onDoubleClick: onDoubleClick },
         React.createElement("div", { className: "k-window-title", id: id }, children ? children : ''),
-        React.createElement("div", { className: "k-window-actions" },
+        React.createElement("div", { className: "k-window-titlebar-actions" },
             (stage === StageEnum_1.windowStage.DEFAULT) && minimizeButtonRender,
             (stage === StageEnum_1.windowStage.DEFAULT) && maximizeButtonRender,
             (stage !== StageEnum_1.windowStage.DEFAULT) && restoreButtonRender,

package/dist/npm/package-metadata.js

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