@plesk/ui-library 3.35.2 → 3.35.4

package/esm/components/InPlaceEdit/InPlaceEdit.js

@@ -1,8 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Button from '../Button';
@@ -49,7 +48,9 @@ class InPlaceEdit extends Component {
       });
     });
     _defineProperty(this, "handleEditOk", () => {
-      this.props.onChange(this.state.draft);
+      if (this.props.onChange) {
+        this.props.onChange(this.state.draft);
+      }
       this.handleEdit();
     });
   }
@@ -120,30 +121,10 @@ class InPlaceEdit extends Component {
     });
   }
 }
-InPlaceEdit.propTypes = {
-  /**
-   * Value of the component.
-   * @since 1.8.3
-   */
-  value: PropTypes.node,
-  /**
-   * Event handler of value change with inline editing form.
-   * @since 1.8.3
-   */
-  onChange: PropTypes.func,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
-InPlaceEdit.defaultProps = {
+_defineProperty(InPlaceEdit, "defaultProps", {
   value: null,
   onChange: null,
   className: null,
   baseClassName: `${CLS_PREFIX}in-place-edit`
-};
+});
 export default InPlaceEdit;

package/esm/components/Layout/Layout.js

@@ -1,119 +1,13 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { Component, createRef } from 'react';
-import PropTypes from 'prop-types';
+import { Component, createRef } from 'react';
 import Measure from 'react-measure';
 import classNames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
 import { CLS_PREFIX } from '../../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const propTypes = {
-  /**
-   * Type of the `Layout`
-   * @since 1.4.0
-   */
-  type: PropTypes.oneOf(['fluid', 'simplified']),
-  /**
-   * Header content.
-   * @since 1.4.0
-   */
-  header: PropTypes.node,
-  /**
-   * Define header position - always on top (fixed) or static.
-   * @since 1.4.0
-   */
-  headerFixed: PropTypes.bool,
-  /**
-   * Additional content at the top of the header.
-   * @since 3.2.0
-   */
-  headerAddon: PropTypes.node,
-  /**
-   * Sidebar content.
-   * @since 1.4.0
-   */
-  sidebar: PropTypes.node,
-  /**
-   * Sidebar type.
-   * @since 3.2.0
-   */
-  sidebarType: PropTypes.oneOf(['collapsed', 'folded']),
-  /**
-   * Define if sidebar can collapse.
-   * @since 1.4.0
-   */
-  sidebarCollapsible: PropTypes.bool,
-  /**
-   * Sidebar collapsed state.
-   * A boolean value is used for desktop mode only, but you can set an array with collapsed states for all modes, e.g. `['responsive', 'desktop']`.
-   *
-   * @since 1.4.0
-   */
-  sidebarCollapsed: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
-  /**
-   * Additional content between header and main content.
-   * @since 1.4.0
-   */
-  contentAddon: PropTypes.node,
-  /**
-   * Content header.
-   * @since 3.0.0
-   */
-  contentHeader: PropTypes.node,
-  /**
-   * Footer content.
-   * @since 1.4.0
-   */
-  footer: PropTypes.node,
-  /**
-   * Main content of the `Layout`.
-   * @since 1.4.0
-   */
-  children: PropTypes.node,
-  /**
-   * Width of the content
-   * @since 3.0.0
-   */
-  width: PropTypes.oneOf(['sm', 'md', 'lg']),
-  /**
-   * Sidebar onToggle handler.
-   * The handler is called with two args:
-   *
-   * * Whether collapsed or not.
-   * * In which mode: responsive or desktop.
-   *
-   * @since 1.4.0
-   */
-  onSidebarToggle: PropTypes.func,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
-const defaultProps = {
-  type: 'fluid',
-  header: undefined,
-  headerFixed: true,
-  headerAddon: undefined,
-  sidebar: undefined,
-  sidebarType: 'collapsed',
-  sidebarCollapsible: true,
-  sidebarCollapsed: false,
-  contentAddon: undefined,
-  contentHeader: undefined,
-  footer: undefined,
-  width: undefined,
-  onSidebarToggle: undefined,
-  children: undefined,
-  className: undefined,
-  baseClassName: `${CLS_PREFIX}layout`
-};
 const subscribeMatchMedia = (query, handler) => {
   const mq = window.matchMedia(query);
   handler(mq);
@@ -128,7 +22,7 @@ const subscribeClickOutside = (refs, handler) => {
       let {
         current
       } = _ref;
-      return !current || current.contains(event.target);
+      return current && current.contains(event.target);
     })) {
       return;
     }
@@ -141,18 +35,23 @@ const subscribeClickOutside = (refs, handler) => {
     document.removeEventListener('touchstart', listener);
   };
 };
-
 /**
  * @since 1.4.0
  */
 export default class Layout extends Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super(...arguments);
     _defineProperty(this, "state", {
+      isSidebarClosedDesktop: false,
       isSidebarClosedResponsive: true,
       headerHeight: null,
       isResponsive: window.matchMedia('(max-width: 1022px)').matches
     });
+    _defineProperty(this, "headerRef", /*#__PURE__*/createRef());
+    _defineProperty(this, "sidebarRef", /*#__PURE__*/createRef());
+    _defineProperty(this, "responsiveSidebarTogglerRef", /*#__PURE__*/createRef());
+    _defineProperty(this, "unsubscribeMatchMedia", void 0);
+    _defineProperty(this, "unsubscribeClickOutside", void 0);
     _defineProperty(this, "handleMatchMedia", _ref2 => {
       let {
         matches
@@ -188,7 +87,7 @@ export default class Layout extends Component {
         bounds
       } = _ref3;
       this.setState({
-        headerHeight: bounds.height
+        headerHeight: bounds?.height
       });
     });
     _defineProperty(this, "getSidebarClosed", () => {
@@ -199,9 +98,6 @@ export default class Layout extends Component {
       } = this.state;
       return isResponsive ? isSidebarClosedResponsive : isSidebarClosedDesktop;
     });
-    this.headerRef = /*#__PURE__*/createRef();
-    this.sidebarRef = /*#__PURE__*/createRef();
-    this.responsiveSidebarTogglerRef = /*#__PURE__*/createRef();
   }
   static getDerivedStateFromProps(props, state) {
     const {
@@ -227,8 +123,8 @@ export default class Layout extends Component {
     this.unsubscribeClickOutside = subscribeClickOutside([this.sidebarRef, this.responsiveSidebarTogglerRef], this.handleClickOutside);
   }
   componentWillUnmount() {
-    this.unsubscribeMatchMedia();
-    this.unsubscribeClickOutside();
+    this.unsubscribeMatchMedia?.();
+    this.unsubscribeClickOutside?.();
   }
   renderHeader(_ref4) {
     let {
@@ -471,8 +367,7 @@ export default class Layout extends Component {
         }), /*#__PURE__*/_jsxs("div", {
           className: `${baseClassName}__container`,
           children: [this.renderSidebar({
-            sidebar,
-            headerFixed: headerPositionFixed
+            sidebar
           }), /*#__PURE__*/_jsxs("div", {
             className: `${baseClassName}__content`,
             children: [this.renderContentAddon({
@@ -490,5 +385,21 @@ export default class Layout extends Component {
     });
   }
 }
-Layout.propTypes = propTypes;
-Layout.defaultProps = defaultProps;
+_defineProperty(Layout, "defaultProps", {
+  type: 'fluid',
+  header: undefined,
+  headerFixed: true,
+  headerAddon: undefined,
+  sidebar: undefined,
+  sidebarType: 'collapsed',
+  sidebarCollapsible: true,
+  sidebarCollapsed: false,
+  contentAddon: undefined,
+  contentHeader: undefined,
+  footer: undefined,
+  width: undefined,
+  onSidebarToggle: undefined,
+  children: undefined,
+  className: undefined,
+  baseClassName: `${CLS_PREFIX}layout`
+});

package/esm/components/List/List.js

@@ -1250,6 +1250,7 @@ class List extends Component {
           fill: true,
           children: content
         }), /*#__PURE__*/_jsx(Column, {
+          className: `${baseClassName}__sidebar`,
           children: sidebar
         })]
       });

package/esm/components/List/ListOperation.js

@@ -51,7 +51,7 @@ const ListOperation = _ref => {
     selectedRowTitle
   } = useContext(ListOperationContext);
   const [settings, setSettings] = useState(null);
-  const targetRef = useRef();
+  const targetRef = useRef(null);
   if (! /*#__PURE__*/isValidElement(children)) {
     throw new Error('The "children" property must be an element.');
   }

package/esm/components/Media/Media.js

@@ -1,11 +1,10 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { isValidElement, cloneElement, Children } from 'react';
-import PropTypes from 'prop-types';
+import { isValidElement, cloneElement, Children } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
-import Icon, { ICON_SIZE_12, ICON_SIZE_16, ICON_SIZE_24, ICON_SIZE_32, ICON_SIZE_48, ICON_SIZE_64, ICON_SIZE_96, ICON_SIZE_128, ICON_SIZE_192 } from '../Icon';
 import Heading from '../Heading';
+import Icon, { ICON_SIZE_12, ICON_SIZE_16, ICON_SIZE_24, ICON_SIZE_32, ICON_SIZE_48, ICON_SIZE_64, ICON_SIZE_96, ICON_SIZE_128, ICON_SIZE_192 } from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -16,7 +15,6 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
  */
 const Media = _ref => {
   let {
-    baseClassName,
     className,
     children,
     title,
@@ -26,7 +24,8 @@ const Media = _ref => {
     imageSpacing,
     imageAlign,
     align,
-    vertical,
+    vertical = false,
+    baseClassName = `${CLS_PREFIX}media`,
     ...props
   } = _ref;
   if (!imageSpacing && /*#__PURE__*/isValidElement(image) && image.type === Icon) {
@@ -90,73 +89,4 @@ const Media = _ref => {
     })]
   });
 };
-Media.propTypes = {
-  /**
-   * Title
-   * @since 0.0.45
-   */
-  title: PropTypes.node,
-  /**
-   * Title addon
-   * @since 0.0.68
-   */
-  titleAddon: PropTypes.node,
-  /**
-   * Title size
-   * @deprecated Pass a component as a title prop
-   * @since 0.0.68
-   */
-  titleSize: PropTypes.oneOf(['md', 'lg', 'xl']),
-  /**
-   * Image
-   * @since 0.0.45
-   */
-  image: PropTypes.any,
-  /**
-   * Spacings between image and content
-   * @since 0.3.0
-   */
-  imageSpacing: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
-  /**
-   * Media object and content alignment
-   * @since 3.19.0
-   */
-  align: PropTypes.oneOf(['start', 'center', 'end']),
-  /**
-   * Media object (image) alignment
-   * @since 3.19.0
-   */
-  imageAlign: PropTypes.oneOf(['start', 'center', 'end']),
-  /**
-   * Media vertical direction
-   * @since 3.19.0
-   */
-  vertical: PropTypes.bool,
-  /**
-   * Content of the `Media`.
-   * @since 0.0.45
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
-Media.defaultProps = {
-  title: null,
-  titleAddon: null,
-  titleSize: null,
-  image: null,
-  imageSpacing: null,
-  align: null,
-  imageAlign: null,
-  vertical: false,
-  children: null,
-  className: null,
-  baseClassName: `${CLS_PREFIX}media`
-};
 export default Media;

package/esm/components/Media/MediaSection.js

@@ -1,20 +1,17 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `MediaSection` is a part of [Media](#!/Media) component.
  * @since 0.0.68
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const MediaSection = _ref => {
   let {
-    baseClassName,
     className,
     children,
+    baseClassName = `${CLS_PREFIX}media-section`,
     ...props
   } = _ref;
   return /*#__PURE__*/_jsx("div", {
@@ -23,24 +20,4 @@ const MediaSection = _ref => {
     children: children
   });
 };
-MediaSection.propTypes = {
-  /**
-   * Content of the `MediaSection`.
-   * @since 0.0.68
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
-MediaSection.defaultProps = {
-  children: null,
-  className: null,
-  baseClassName: `${CLS_PREFIX}media-section`
-};
 export default MediaSection;

package/esm/components/Menu/Menu.js

@@ -1,12 +1,11 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { Children, cloneElement, isValidElement, forwardRef, useRef, useMemo } from 'react';
 import { wrapFunction, safeInvoke, createFocusManager } from '../utils';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import MenuItem from './MenuItem';
 import MenuSelectableItem from './MenuSelectableItem';
+import { Children, cloneElement, isValidElement, forwardRef, useRef, useMemo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 const hasIconItem = children => {
   let result = false;
@@ -17,7 +16,6 @@ const hasIconItem = children => {
   });
   return result;
 };
-
 /**
  * `Menu` component displays grouped controls for navigating the UI, performing actions on objects, or showing
  * options for [Lists](#!/List) (for example, sorting and filtering settings). `Menu` is most typically used in a
@@ -30,17 +28,17 @@ const hasIconItem = children => {
  */
 const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, ref) {
   let {
-    baseClassName,
     className,
     children,
     onItemClick,
-    overlay,
     onKeyDown,
     onFocus,
     autoFocus,
+    overlay = false,
+    baseClassName = `${CLS_PREFIX}menu`,
     ...props
   } = _ref;
-  const rootRef = useRef();
+  const rootRef = useRef(null);
   const {
     focusNext,
     focusPrev,
@@ -104,7 +102,7 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, ref) {
     ...props,
     ref: el => {
       rootRef.current = el;
-      if (ref) {
+      if (ref && typeof ref !== 'function') {
         ref.current = el;
       }
     },
@@ -115,51 +113,4 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, ref) {
   });
 });
 Menu.displayName = 'Menu';
-Menu.propTypes = {
-  /**
-   * Triggered when menu item was clicked.
-   * @since 0.0.56
-   */
-  onItemClick: PropTypes.func,
-  /**
-   * Content of the `Menu`.
-   * @since 0.0.55
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  onKeyDown: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onFocus: PropTypes.func,
-  /**
-   * @ignore
-   */
-  autoFocus: PropTypes.bool,
-  /**
-   * Show menu in overlay.
-   * @ignore
-   */
-  overlay: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
-Menu.defaultProps = {
-  onItemClick: null,
-  children: null,
-  overlay: false,
-  className: null,
-  baseClassName: `${CLS_PREFIX}menu`,
-  onKeyDown: undefined,
-  onFocus: undefined,
-  autoFocus: undefined
-};
 export default Menu;

package/esm/components/Menu/MenuBaseItem.js

@@ -1,25 +1,22 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Icon, { ICON_SIZE_16 } from '../Icon';
-
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * `MenuBaseItem` component.
  * @since 0.0.60
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const MenuBaseItem = _ref => {
   let {
-    baseClassName,
     className,
     children,
     icon,
     label,
-    component: Component,
+    component: Component = 'div',
+    baseClassName = `${CLS_PREFIX}menu__base-item`,
     ...props
   } = _ref;
   return /*#__PURE__*/_jsxs(Component, {
@@ -39,42 +36,4 @@ const MenuBaseItem = _ref => {
     })]
   });
 };
-MenuBaseItem.propTypes = {
-  /**
-   * Icon
-   * @since 0.0.60
-   */
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-  /**
-   * Right label of item.
-   * @since 0.0.60
-   */
-  label: PropTypes.node,
-  /**
-   * Content of the `MenuBaseItem`.
-   * @since 0.0.60
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string,
-  /**
-   * Component to render as the root element. Useful when rendering a `MenuBaseItem` as other component or tag.
-   * @since 1.9.1
-   */
-  component: PropTypes.elementType
-};
-MenuBaseItem.defaultProps = {
-  icon: null,
-  label: null,
-  children: null,
-  className: null,
-  baseClassName: `${CLS_PREFIX}menu__base-item`,
-  component: 'div'
-};
 export default MenuBaseItem;

package/esm/components/Menu/MenuDivider.js

@@ -1,19 +1,16 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `MenuDivider` is a part of [Menu](#!/Menu) component.
  * @since 0.0.57
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const MenuDivider = _ref => {
   let {
-    baseClassName,
     className,
+    baseClassName = `${CLS_PREFIX}menu__divider`,
     ...props
   } = _ref;
   return /*#__PURE__*/_jsx("div", {
@@ -22,18 +19,4 @@ const MenuDivider = _ref => {
     ...props
   });
 };
-MenuDivider.propTypes = {
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
-MenuDivider.defaultProps = {
-  className: null,
-  baseClassName: `${CLS_PREFIX}menu__divider`
-};
 export default MenuDivider;

package/esm/components/Menu/MenuHeader.js

@@ -1,21 +1,18 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import MenuBaseItem from './MenuBaseItem';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `MenuHeader` is a part of [Menu](#!/Menu) component.
  * @since 0.0.57
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const MenuHeader = _ref => {
   let {
-    baseClassName,
     className,
     children,
+    baseClassName = `${CLS_PREFIX}menu__header`,
     ...props
   } = _ref;
   return /*#__PURE__*/_jsx(MenuBaseItem, {
@@ -25,24 +22,4 @@ const MenuHeader = _ref => {
     children: children
   });
 };
-MenuHeader.propTypes = {
-  /**
-   * Content of the `MenuHeader`.
-   * @since 0.0.57
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
-MenuHeader.defaultProps = {
-  children: null,
-  className: null,
-  baseClassName: `${CLS_PREFIX}menu__header`
-};
 export default MenuHeader;