@plesk/ui-library 3.35.1 → 3.35.3

package/esm/components/ProgressDialog/ProgressDialog.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 Dialog from '../Dialog';
 import { CLS_PREFIX } from '../../constants';
@@ -44,7 +43,7 @@ class ProgressDialog extends Component {
         isFinished,
         isFailed
       } = this.state;
-      clearTimeout(this.closeTimeout);
+      this.clearCloseTimeout();
       if (!isOpen) {
         return;
       }
@@ -68,7 +67,7 @@ class ProgressDialog extends Component {
       isOpen
     };
   }
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(_, prevState) {
     const {
       isFinished
     } = this.state;
@@ -76,13 +75,19 @@ class ProgressDialog extends Component {
       autoCloseTimeout
     } = this.props;
     if (prevState.isFinished === false && isFinished === true) {
-      clearTimeout(this.closeTimeout);
+      this.clearCloseTimeout();
       if (autoCloseTimeout) {
         this.closeTimeout = setTimeout(this.handleClose, autoCloseTimeout);
       }
     }
   }
   componentWillUnmount() {
+    this.clearCloseTimeout();
+  }
+  clearCloseTimeout() {
+    if (!this.closeTimeout) {
+      return;
+    }
     clearTimeout(this.closeTimeout);
   }
   render() {
@@ -133,83 +138,7 @@ class ProgressDialog extends Component {
     });
   }
 }
-ProgressDialog.propTypes = {
-  /**
-   * Toggles visibility.
-   * @since 1.2.0
-   */
-  isOpen: PropTypes.bool,
-  /**
-   * Banner. Renders in front of content as wide as dialog.
-   * @since 1.2.0
-   */
-  banner: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-  /**
-   * Image. Renders into content.
-   * @since 1.2.0
-   */
-  image: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-  /**
-   * Title
-   * @since 1.2.0
-   */
-  title: PropTypes.node,
-  /**
-   * Description of the `ProgressDialog`.
-   * @since 1.2.0
-   */
-  description: PropTypes.node,
-  /**
-   * Actions which will be shown in Dialog header.
-   * @since 1.2.0
-   */
-  actions: PropTypes.node,
-  /**
-   * Whether the dialog should be canceled with the cancel button.
-   * @since 1.2.0
-   */
-  cancelable: PropTypes.bool,
-  /**
-   * The interval of time to auto close dialog when it successful finished.
-   * Set `null` for disable auto close.
-   * @since 1.2.0
-   */
-  autoCloseTimeout: PropTypes.number,
-  /**
-   * On cancel event handler.
-   * @since 1.2.0
-   */
-  onCancel: PropTypes.func,
-  /**
-   * On close event handler.
-   * @since 1.2.0
-   */
-  onClose: PropTypes.func,
-  /**
-   * On finish event handler.
-   * @since 1.2.0
-   */
-  onFinish: PropTypes.func,
-  /**
-   * On fail event handler.
-   * @since 1.2.0
-   */
-  onFail: PropTypes.func,
-  /**
-   * Content of the `ProgressDialog`.
-   * @since 1.2.0
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
-ProgressDialog.defaultProps = {
+_defineProperty(ProgressDialog, "defaultProps", {
   isOpen: false,
   banner: null,
   image: null,
@@ -225,5 +154,5 @@ ProgressDialog.defaultProps = {
   children: null,
   className: null,
   baseClassName: `${CLS_PREFIX}progress-dialog`
-};
+});
 export default ProgressDialog;

package/esm/components/Rating/Rating.js

@@ -1,7 +1,5 @@
 // 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";
@@ -14,25 +12,22 @@ const width = value => {
   }
   return result;
 };
-
 /**
  * `Rating` component is used for showing and collecting feedback of users' opinion in 0-5 grade scale.
  * @since 0.0.42
  */
 const Rating = _ref => {
   let {
-    baseClassName,
+    baseClassName = `${CLS_PREFIX}rating`,
     className,
-    value,
-    small,
+    value = 0,
+    small = false,
     ...props
   } = _ref;
   return /*#__PURE__*/_jsx("div", {
-    className: classNames({
-      [baseClassName]: true,
+    className: classNames(baseClassName, className, {
       [`${baseClassName}--static`]: true,
-      [`${baseClassName}--small`]: small,
-      [className]: true
+      [`${baseClassName}--small`]: small
     }),
     ...props,
     children: /*#__PURE__*/_jsx("div", {
@@ -43,30 +38,4 @@ const Rating = _ref => {
     })
   });
 };
-Rating.propTypes = {
-  /**
-   * Rating value from 0 to 5.
-   * @since 0.0.42
-   */
-  value: PropTypes.number,
-  /**
-   * Small variant.
-   * @since 0.0.42
-   */
-  small: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
-Rating.defaultProps = {
-  value: 0,
-  small: false,
-  className: null,
-  baseClassName: `${CLS_PREFIX}rating`
-};
 export default Rating;

package/esm/components/Section/Section.js

@@ -1,16 +1,15 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { Component, Children, isValidElement, useContext } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { Children, Component, isValidElement, useContext } from 'react';
 import Measure from 'react-measure';
 import { CLS_PREFIX } from '../../constants';
-import { isClickable } from '../utils';
-import InPlaceEdit from '../InPlaceEdit';
 import Button from '../Button';
-import VerticalContext, { VERTICAL_BREAKPOINT } from '../VerticalContext';
 import FormContext from '../Form/FormContext';
+import InPlaceEdit from '../InPlaceEdit';
+import { isClickable } from '../utils';
+import VerticalContext, { VERTICAL_BREAKPOINT } from '../VerticalContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getErrorsForChildren = (form, children) => {
@@ -34,6 +33,22 @@ const getErrorsForChildren = (form, children) => {
   });
   return errors;
 };
+export const SECTION_BASE_CLASS_NAME = `${CLS_PREFIX}section`;
+const DEFAULT_PROPS = {
+  title: undefined,
+  intent: undefined,
+  collapsible: false,
+  collapsed: false,
+  onTitleChange: undefined,
+  onClose: undefined,
+  onToggle: undefined,
+  buttons: undefined,
+  vertical: undefined,
+  children: undefined,
+  className: undefined,
+  baseClassName: SECTION_BASE_CLASS_NAME,
+  form: undefined
+};
 class Section extends Component {
   constructor() {
     super(...arguments);
@@ -44,7 +59,7 @@ class Section extends Component {
       let {
         bounds
       } = _ref;
-      if (this.props.vertical !== undefined) {
+      if (this.props.vertical !== undefined || !bounds) {
         return;
       }
       this.setState({
@@ -63,9 +78,7 @@ class Section extends Component {
           collapsed: !collapsed
         };
       }, () => {
-        if (this.props.onToggle) {
-          this.props.onToggle(this.state.collapsed);
-        }
+        this.props.onToggle?.(this.state.collapsed ?? false);
       });
     });
   }
@@ -139,7 +152,8 @@ class Section extends Component {
       value: title,
       onChange: onTitleChange,
       onClick: e => {
-        e.target.closest(`.${baseClassName}__header`).querySelector(`.${baseClassName}__control-button`)?.click();
+        const button = e.target?.closest(`.${baseClassName}__header`)?.querySelector(`.${baseClassName}__control-button`);
+        button?.click();
       }
     });
   }
@@ -158,10 +172,10 @@ class Section extends Component {
   }
   render() {
     const {
-      baseClassName,
+      baseClassName = SECTION_BASE_CLASS_NAME,
       className,
       intent,
-      collapsible,
+      collapsible = false,
       title,
       collapsed,
       onTitleChange,
@@ -216,95 +230,13 @@ class Section extends Component {
     });
   }
 }
-const propTypes = {
-  /**
-   * Title of the section.
-   * @since 0.0.54
-   */
-  title: PropTypes.node,
-  /**
-   * Visual intent color to apply to component.
-   * @since 0.0.54
-   */
-  intent: PropTypes.oneOf(['danger', 'warning', 'success', 'inactive']),
-  /**
-   * Is section collapsible.
-   * @since 0.0.54
-   */
-  collapsible: PropTypes.bool,
-  /**
-   * Is section collapsed now.
-   * @since 0.0.54
-   */
-  collapsed: PropTypes.bool,
-  /**
-   * Event handler of title change with inline editing form.
-   * @since 0.0.54
-   */
-  onTitleChange: PropTypes.func,
-  /**
-   * Event handler of closing section with X-sign at the right.
-   * @since 0.0.54
-   */
-  onClose: PropTypes.func,
-  /**
-   * A callback executed when the section collapsing.
-   * @since 3.26.0
-   */
-  onToggle: PropTypes.func,
-  /**
-   * Array of custom section action button at the right.
-   * @since 0.0.54
-   */
-  buttons: PropTypes.arrayOf(PropTypes.element),
-  /**
-   * Vertical or horizontal section view.
-   * Section view will be automatically switched if this parameter is not specified explicitly.
-   * @since 0.3.0
-   */
-  vertical: PropTypes.bool,
-  /**
-   * Content of the `Section`.
-   * @since 0.0.54
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string,
-  /**
-   * @ignore
-   */
-  form: PropTypes.object
-};
-const defaultProps = {
-  title: undefined,
-  intent: undefined,
-  collapsible: false,
-  collapsed: false,
-  onTitleChange: undefined,
-  onClose: undefined,
-  onToggle: undefined,
-  buttons: undefined,
-  vertical: undefined,
-  children: undefined,
-  className: undefined,
-  baseClassName: `${CLS_PREFIX}section`,
-  form: undefined
-};
-Section.propTypes = propTypes;
-Section.defaultProps = defaultProps;
 
 /**
  * `Section` component is used for dividing of complex content into groups for better readability
  * and comprehension of the presented information.
  * @since 0.0.54
  */
-
+_defineProperty(Section, "defaultProps", DEFAULT_PROPS);
 const SectionWrapper = props => {
   const form = useContext(FormContext);
   const verticalContext = useContext(VerticalContext);
@@ -316,7 +248,6 @@ const SectionWrapper = props => {
   });
 };
 SectionWrapper.displayName = 'Section';
-SectionWrapper.propTypes = propTypes;
-SectionWrapper.defaultProps = defaultProps;
+SectionWrapper.defaultProps = DEFAULT_PROPS;
 SectionWrapper.WrappedComponent = Section;
 export default SectionWrapper;

package/esm/components/Section/SectionItem.js

@@ -1,23 +1,24 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { useContext } from 'react';
 import { CLS_PREFIX } from '../../constants';
 import VerticalContext from '../VerticalContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export const SECTION_ITEM_BASE_CLASS_NAME = `${CLS_PREFIX}section-item`;
+
 /**
  * `SectionItem` component is used for showing parameters and its values in [Section](#!/Section).
  * @since 0.0.54
  */
 const SectionItem = _ref => {
   let {
-    baseClassName,
+    baseClassName = SECTION_ITEM_BASE_CLASS_NAME,
     className,
     children,
     title,
-    actions,
+    actions = false,
     vertical,
     ...props
   } = _ref;
@@ -37,41 +38,4 @@ const SectionItem = _ref => {
     })]
   });
 };
-SectionItem.propTypes = {
-  /**
-   * Content of the `SectionItem`.
-   * @since 0.0.54
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string,
-  /**
-   * Title of the section item.
-   * @since 0.0.54
-   */
-  title: PropTypes.node,
-  /**
-   * Is this section item contains actions? If it so than there should be extra whitespaces.
-   * @since 0.0.54
-   */
-  actions: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  vertical: PropTypes.bool
-};
-SectionItem.defaultProps = {
-  children: undefined,
-  className: undefined,
-  baseClassName: `${CLS_PREFIX}section-item`,
-  title: undefined,
-  actions: false,
-  vertical: undefined
-};
 export default SectionItem;

package/esm/components/Section/index.js

@@ -1,4 +1,5 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 export { default } from './Section';
-export { default as SectionItem } from './SectionItem';
+export { SECTION_BASE_CLASS_NAME } from './Section';
+export { default as SectionItem, SECTION_ITEM_BASE_CLASS_NAME } from './SectionItem';

package/esm/components/Skeleton/index.js

@@ -1,5 +1,5 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 export { default } from './Skeleton';
-export { default as SkeletonText } from './SkeletonText';
-export { default as SkeletonTabs } from './SkeletonTabs';
+export { default as SkeletonTabs } from './SkeletonTabs';
+export { default as SkeletonText } from './SkeletonText';

package/esm/components/SplitButton/SplitButton.js

@@ -35,8 +35,7 @@ const focusStrategy = {
  * `Split Button` is a combination of a standard [Button](#!/Button) with a [Dropdown](#!/Dropdown) menu.
  * It is used for grouping several related actions when one of the actions should be accessible immediately
  * because it is used more often than others.
- *
- * Since: 0.0.40
+ * @since 0.0.40
  */
 const SplitButton = _ref => {
   let {

package/esm/components/Subnav/Subnav.js

@@ -1,10 +1,9 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { cloneElement, Children, isValidElement, useRef, useMemo } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import { safeInvoke, createFocusManager } from '../utils';
+import { cloneElement, Children, isValidElement, useRef, useMemo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `Subnav` component is used when you need a second level navigation under [Tabs](#!/Tabs) on the screen.
@@ -12,13 +11,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 const Subnav = _ref => {
   let {
-    baseClassName,
     className,
     children,
     onKeyDown,
+    baseClassName = `${CLS_PREFIX}subnav`,
     ...props
   } = _ref;
-  const rootRef = useRef();
+  const rootRef = useRef(null);
   const {
     focusNext,
     focusPrev,
@@ -47,7 +46,9 @@ const Subnav = _ref => {
         break;
       case 'Enter':
         e.preventDefault();
-        e.target.click();
+        if (e.target instanceof HTMLElement) {
+          e.target.click();
+        }
         break;
     }
     safeInvoke(onKeyDown, e);
@@ -67,6 +68,9 @@ const Subnav = _ref => {
   });
   const items = Children.map(children, (child, index) => {
     if (itemIndex === index) {
+      if (! /*#__PURE__*/isValidElement(child)) {
+        return child;
+      }
       return /*#__PURE__*/cloneElement(child, {
         tabIndex: 0
       });
@@ -81,41 +85,15 @@ const Subnav = _ref => {
     children: items
   });
 };
-Subnav.propTypes = {
-  /**
-   * Subnav items
-   * @since 0.0.42
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string,
-  /**
-   * @ignore
-   */
-  onKeyDown: PropTypes.string
-};
-Subnav.defaultProps = {
-  children: null,
-  className: null,
-  baseClassName: `${CLS_PREFIX}subnav`,
-  onKeyDown: undefined
-};
-
 /**
  * SubnavItem component.
  */
 const SubnavItem = _ref2 => {
   let {
-    baseClassName,
     className,
     active,
     children,
+    baseClassName = `${CLS_PREFIX}subnav__item`,
     ...props
   } = _ref2;
   return /*#__PURE__*/cloneElement(children, {
@@ -124,27 +102,5 @@ const SubnavItem = _ref2 => {
     ...props
   });
 };
-SubnavItem.propTypes = {
-  /**
-   * Is item active.
-   */
-  active: PropTypes.bool,
-  /**
-   * Content of the item
-   */
-  children: PropTypes.element.isRequired,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
-SubnavItem.defaultProps = {
-  className: null,
-  baseClassName: `${CLS_PREFIX}subnav__item`
-};
 export default Subnav;
 export { SubnavItem };

package/esm/components/Subnav/index.js

@@ -1,4 +1,3 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-export { default } from './Subnav';
-export * from './Subnav';
+export { default, SubnavItem } from './Subnav';

package/esm/components/SwitchesPanel/SwitchesPanel.js

@@ -1,7 +1,6 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { Children, cloneElement } from 'react';
-import PropTypes from 'prop-types';
+import { Children, cloneElement } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Section from '../Section';
@@ -12,7 +11,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 const SwitchesPanel = _ref => {
   let {
-    baseClassName,
+    baseClassName = `${CLS_PREFIX}switches-panel`,
     className,
     children,
     ...props
@@ -22,30 +21,10 @@ const SwitchesPanel = _ref => {
     ...props,
     children: /*#__PURE__*/_jsx("div", {
       className: `${baseClassName}__items`,
-      children: Children.map(children, child => /*#__PURE__*/cloneElement(child, {
+      children: children && Children.map(children, child => /*#__PURE__*/cloneElement(child, {
         className: classNames(child.props.className, `${baseClassName}__item`)
       }))
     })
   });
 };
-SwitchesPanel.propTypes = {
-  /**
-   * Content of the `SwitchesPanel`. Recommended to use [SwitchesPanelItem](#!/SwitchesPanelItem) components.
-   * @since 0.3.0
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
-SwitchesPanel.defaultProps = {
-  children: null,
-  className: null,
-  baseClassName: `${CLS_PREFIX}switches-panel`
-};
 export default SwitchesPanel;