@plesk/ui-library 3.31.2 → 3.32.0

package/cjs/components/Menu/Menu.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("../utils");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -13,6 +12,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
 var _MenuItem = _interopRequireDefault(require("./MenuItem"));
 var _MenuSelectableItem = _interopRequireDefault(require("./MenuSelectableItem"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
@@ -104,13 +104,13 @@ const Menu = /*#__PURE__*/(0, _react.forwardRef)(function Menu(_ref, ref) {
     }
     return /*#__PURE__*/(0, _react.cloneElement)(child, props);
   });
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _classnames.default)(baseClassName, className, {
       [`${baseClassName}--icons`]: hasIconItem(children),
       [`${baseClassName}--overlay`]: overlay
     }),
-    role: "menu"
-  }, props, {
+    role: "menu",
+    ...props,
     ref: el => {
       rootRef.current = el;
       if (ref) {
@@ -119,8 +119,9 @@ const Menu = /*#__PURE__*/(0, _react.forwardRef)(function Menu(_ref, ref) {
     },
     onKeyDown: handleKeyDown,
     onFocus: handleFocus,
-    tabIndex: -1
-  }), items);
+    tabIndex: -1,
+    children: items
+  });
 });
 Menu.displayName = 'Menu';
 Menu.propTypes = {

package/cjs/components/Menu/Menu.stories.js

@@ -5,27 +5,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Tooltip = exports.FullFeatured = exports.Basic = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _ = _interopRequireWildcard(require("."));
 var _Label = _interopRequireDefault(require("../Label"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-const Basic = args => /*#__PURE__*/_react.default.createElement(_.default, args);
+const Basic = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+  ...args
+});
 exports.Basic = Basic;
 Basic.args = {
-  children: [/*#__PURE__*/_react.default.createElement(_.MenuItem, {
-    key: "1",
-    "data-test": "one"
-  }, 'One'), /*#__PURE__*/_react.default.createElement(_.MenuItem, {
-    key: "2",
-    "data-test": "two"
-  }, 'Two'), /*#__PURE__*/_react.default.createElement(_.MenuItem, {
-    key: "3",
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.MenuItem, {
+    "data-test": "one",
+    children: 'One'
+  }, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.MenuItem, {
+    "data-test": "two",
+    children: 'Two'
+  }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.MenuItem, {
     "data-test": "three",
-    disabled: true
-  }, 'Three')]
+    disabled: true,
+    children: 'Three'
+  }, "3")]
 };
 const Tooltip = Basic.bind(null);
 exports.Tooltip = Tooltip;
@@ -42,34 +45,33 @@ Tooltip.args = {
 const FullFeatured = Basic.bind(null);
 exports.FullFeatured = FullFeatured;
 FullFeatured.args = {
-  children: [/*#__PURE__*/_react.default.createElement(_.MenuHeader, {
-    key: "1"
-  }, 'Header 1'), /*#__PURE__*/_react.default.createElement(_.MenuItem, {
-    key: "2",
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.MenuHeader, {
+    children: 'Header 1'
+  }, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.MenuItem, {
     "data-test": "2",
     onClick: () => {},
-    icon: "folder-open"
-  }, 'One'), /*#__PURE__*/_react.default.createElement(_.MenuItem, {
-    key: "3",
+    icon: "folder-open",
+    children: 'One'
+  }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.MenuItem, {
     "data-test": "3",
     onClick: () => {},
     icon: "folder-open",
-    label: /*#__PURE__*/_react.default.createElement(_Label.default, {
-      intent: "danger"
-    }, '99')
-  }, 'Two'), /*#__PURE__*/_react.default.createElement(_.MenuDivider, {
-    key: "4"
-  }), /*#__PURE__*/_react.default.createElement(_.MenuHeader, {
-    key: "5"
-  }, 'Header 2'), /*#__PURE__*/_react.default.createElement(_.MenuItem, {
-    key: "6",
+    label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.default, {
+      intent: "danger",
+      children: '99'
+    }),
+    children: 'Two'
+  }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.MenuDivider, {}, "4"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.MenuHeader, {
+    children: 'Header 2'
+  }, "5"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.MenuItem, {
     "data-test": "6",
     onClick: () => {},
-    icon: "folder-open"
-  }, 'Three'), /*#__PURE__*/_react.default.createElement(_.MenuItem, {
-    key: "7",
+    icon: "folder-open",
+    children: 'Three'
+  }, "6"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.MenuItem, {
     "data-test": "7",
     onClick: () => {},
-    icon: "folder-open"
-  }, 'Four')]
+    icon: "folder-open",
+    children: 'Four'
+  }, "7")]
 };

package/cjs/components/Menu/MenuBaseItem.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
 var _Icon = _interopRequireWildcard(require("../Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
@@ -18,8 +18,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * `MenuBaseItem` component.
  * @since 0.0.60
- */
-const MenuBaseItem = _ref => {
+ */const MenuBaseItem = _ref => {
   let {
     baseClassName,
     className,
@@ -29,17 +28,22 @@ const MenuBaseItem = _ref => {
     component: Component,
     ...props
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    className: (0, _classnames.default)(baseClassName, className)
-  }, props), /*#__PURE__*/_react.default.createElement("div", {
-    className: `${baseClassName}-icon`
-  }, _Icon.default.create(icon, {
-    size: _Icon.ICON_SIZE_16
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: `${baseClassName}-content`
-  }, children), /*#__PURE__*/_react.default.createElement("div", {
-    className: `${baseClassName}-label`
-  }, label));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, {
+    className: (0, _classnames.default)(baseClassName, className),
+    ...props,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `${baseClassName}-icon`,
+      children: _Icon.default.create(icon, {
+        size: _Icon.ICON_SIZE_16
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `${baseClassName}-content`,
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `${baseClassName}-label`,
+      children: label
+    })]
+  });
 };
 MenuBaseItem.propTypes = {
   /**

package/cjs/components/Menu/MenuDivider.js

@@ -5,27 +5,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
+var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 /**
  * `MenuDivider` is a part of [Menu](#!/Menu) component.
  * @since 0.0.57
- */
-const MenuDivider = _ref => {
+ */const MenuDivider = _ref => {
   let {
     baseClassName,
     className,
     ...props
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _classnames.default)(baseClassName, className),
-    role: "separator"
-  }, props));
+    role: "separator",
+    ...props
+  });
 };
 MenuDivider.propTypes = {
   /**

package/cjs/components/Menu/MenuHeader.js

@@ -5,29 +5,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
 var _MenuBaseItem = _interopRequireDefault(require("./MenuBaseItem"));
+var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 /**
  * `MenuHeader` is a part of [Menu](#!/Menu) component.
  * @since 0.0.57
- */
-const MenuHeader = _ref => {
+ */const MenuHeader = _ref => {
   let {
     baseClassName,
     className,
     children,
     ...props
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_MenuBaseItem.default, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuBaseItem.default, {
     className: (0, _classnames.default)(baseClassName, className),
-    role: "none"
-  }, props), children);
+    role: "none",
+    ...props,
+    children: children
+  });
 };
 MenuHeader.propTypes = {
   /**

package/cjs/components/Menu/MenuItem.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -13,6 +12,7 @@ var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _constants = require("../../constants");
 var _utils = require("../utils");
 var _MenuBaseItem = _interopRequireDefault(require("./MenuBaseItem"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
@@ -20,8 +20,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * `MenuItem` is a part of [Menu](#!/Menu) component.
  * @since 0.0.55
- */
-const MenuItem = _ref => {
+ */const MenuItem = _ref => {
   let {
     baseClassName,
     className,
@@ -34,7 +33,7 @@ const MenuItem = _ref => {
     tooltip,
     ...props
   } = _ref;
-  const element = /*#__PURE__*/_react.default.createElement(_MenuBaseItem.default, (0, _extends2.default)({
+  const element = /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuBaseItem.default, {
     className: (0, _classnames.default)(baseClassName, className, {
       [`${baseClassName}--active`]: active,
       [`${baseClassName}--disabled`]: disabled
@@ -48,12 +47,15 @@ const MenuItem = _ref => {
     "aria-disabled": disabled ? 'true' : undefined,
     tabIndex: disabled ? -1 : 0,
     icon: icon,
-    label: label
-  }, props), children);
+    label: label,
+    ...props,
+    children: children
+  });
   if (tooltip) {
-    return (0, _utils.createProxyProps)(props => /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-      title: tooltip
-    }, /*#__PURE__*/(0, _react.cloneElement)(element, props)));
+    return (0, _utils.createProxyProps)(props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: tooltip,
+      children: /*#__PURE__*/(0, _react.cloneElement)(element, props)
+    }));
   }
   return element;
 };
@@ -82,6 +84,7 @@ MenuItem.propTypes = {
    * Tooltip for component.
    * @since 2.6.1
    */
+  // eslint-disable-next-line react/require-default-props
   tooltip: _propTypes.default.node,
   /**
    * Content of the `MenuItem`.

package/cjs/components/Menu/MenuSelectableItem.js

@@ -5,19 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
 var _MenuItem = _interopRequireDefault(require("./MenuItem"));
+var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 /**
  * `MenuSelectableItem` is a part of [Menu](#!/Menu) component.
  * @since 0.0.57
- */
-const MenuSelectableItem = _ref => {
+ */const MenuSelectableItem = _ref => {
   let {
     baseClassName,
     className,
@@ -25,12 +24,14 @@ const MenuSelectableItem = _ref => {
     selected,
     ...props
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_MenuItem.default, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
     className: (0, _classnames.default)(baseClassName, className),
     icon: selected ? 'check-mark' : null,
     role: "menuitemcheckbox",
-    "aria-checked": selected ? 'true' : 'false'
-  }, props), children);
+    "aria-checked": selected ? 'true' : 'false',
+    ...props,
+    children: children
+  });
 };
 MenuSelectableItem.propTypes = {
   /**

package/cjs/components/Overlay/Backdrop.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
+var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 const Backdrop = _ref => {
@@ -19,10 +19,11 @@ const Backdrop = _ref => {
     innerRef,
     ...props
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: innerRef,
-    className: (0, _classnames.default)(baseClassName, className)
-  }, props));
+    className: (0, _classnames.default)(baseClassName, className),
+    ...props
+  });
 };
 Backdrop.propTypes = {
   /**

package/cjs/components/Overlay/Overlay.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _utils = require("../../utils");
 var _react = _interopRequireWildcard(require("react"));
@@ -17,6 +16,7 @@ var _reactTransitionGroup = require("react-transition-group");
 var _Backdrop = _interopRequireDefault(require("./Backdrop"));
 var _Layer = _interopRequireDefault(require("../Layer"));
 var _FocusTrap = _interopRequireDefault(require("../FocusTrap"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
@@ -127,7 +127,7 @@ class Overlay extends _react.Component {
       canCloseOnEscapePress,
       sideBanner
     } = _ref;
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
       in: this.state.isOpened,
       classNames: `${baseClassName}-`,
       timeout: 300,
@@ -136,33 +136,37 @@ class Overlay extends _react.Component {
           isExist: false
         });
       },
-      nodeRef: this.contentRef
-    }, /*#__PURE__*/_react.default.createElement(_FocusTrap.default, {
-      className: `${baseClassName}__content`,
-      onKeyUp: canCloseOnEscapePress ? this.handleContentKeyUp : null,
-      ref: this.contentRef,
-      role: "dialog",
-      "aria-modal": "true"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: `${baseClassName}__body`
-    }, children), this.renderImage({
-      baseClassName,
-      image: sideBanner
-    }))));
+      nodeRef: this.contentRef,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FocusTrap.default, {
+        className: `${baseClassName}__content`,
+        onKeyUp: canCloseOnEscapePress ? this.handleContentKeyUp : null,
+        ref: this.contentRef,
+        role: "dialog",
+        "aria-modal": "true",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: `${baseClassName}__body`,
+          children: children
+        }), this.renderImage({
+          baseClassName,
+          image: sideBanner
+        })]
+      })
+    });
   }
   renderBackdrop(_ref2) {
     let {
       baseClassName
     } = _ref2;
-    return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
       in: this.state.isOpened,
       classNames: `${baseClassName}-`,
       timeout: 300,
-      nodeRef: this.backdropRef
-    }, /*#__PURE__*/_react.default.createElement(_Backdrop.default, {
-      onClick: () => this.handleBackdropClick(),
-      innerRef: this.backdropRef
-    }));
+      nodeRef: this.backdropRef,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
+        onClick: () => this.handleBackdropClick(),
+        innerRef: this.backdropRef
+      })
+    });
   }
   renderImage(_ref3) {
     let {
@@ -174,23 +178,27 @@ class Overlay extends _react.Component {
       return null;
     }
     if ( /*#__PURE__*/(0, _react.isValidElement)(image)) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: `${classPrefix}`
-      }, image);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${classPrefix}`,
+        children: image
+      });
     }
     if (typeof image === 'string') {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: classPrefix
-      }, /*#__PURE__*/_react.default.createElement("img", {
-        className: `${classPrefix}-image`,
-        src: image
-      }));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: classPrefix,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          className: `${classPrefix}-image`,
+          src: image
+        })
+      });
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classPrefix
-    }, /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({
-      className: `${classPrefix}-image`
-    }, image)));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classPrefix,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        className: `${classPrefix}-image`,
+        ...image
+      })
+    });
   }
   render() {
     const {
@@ -214,23 +222,26 @@ class Overlay extends _react.Component {
     if (!isExist) {
       return null;
     }
-    return /*#__PURE__*/_react.default.createElement(_Layer.default, {
-      level: _constants.Z_INDEX_OVERLAY
-    }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-      className: (0, _classnames.default)(baseClassName, `${baseClassName}--${placement}`, `${baseClassName}--${size}`, sideBanner && `${baseClassName}--side`, className),
-      style: {
-        '--sideBannerBackground': sideBannerContainer?.background,
-        '--sideBannerAlign': sideBannerContainer?.align,
-        ...style
-      }
-    }, props), this.renderBackdrop({
-      baseClassName
-    }), this.renderContent({
-      baseClassName,
-      children,
-      canCloseOnEscapePress,
-      sideBanner
-    })));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layer.default, {
+      level: _constants.Z_INDEX_OVERLAY,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(baseClassName, `${baseClassName}--${placement}`, `${baseClassName}--${size}`, sideBanner && `${baseClassName}--side`, className),
+        style: {
+          '--sideBannerBackground': sideBannerContainer?.background,
+          '--sideBannerAlign': sideBannerContainer?.align,
+          ...style
+        },
+        ...props,
+        children: [this.renderBackdrop({
+          baseClassName
+        }), this.renderContent({
+          baseClassName,
+          children,
+          canCloseOnEscapePress,
+          sideBanner
+        })]
+      })
+    });
   }
 }
 exports.default = Overlay;