@plesk/ui-library 3.35.2 → 3.35.4

package/esm/components/Menu/MenuItem.js

@@ -1,29 +1,27 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { cloneElement } from 'react';
-import PropTypes from 'prop-types';
+import { cloneElement } from 'react';
 import classNames from 'classnames';
 import Tooltip from '../Tooltip';
 import { CLS_PREFIX } from '../../constants';
 import { createProxyProps } from '../utils';
 import MenuBaseItem from './MenuBaseItem';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `MenuItem` is a part of [Menu](#!/Menu) component.
  * @since 0.0.55
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const MenuItem = _ref => {
   let {
-    baseClassName,
     className,
     children,
     onClick,
-    active,
-    disabled,
     icon,
     label,
     tooltip,
+    baseClassName = `${CLS_PREFIX}menu__item`,
+    disabled = false,
+    active = false,
     ...props
   } = _ref;
   const element = /*#__PURE__*/_jsx(MenuBaseItem, {
@@ -52,59 +50,4 @@ const MenuItem = _ref => {
   }
   return element;
 };
-MenuItem.propTypes = {
-  /**
-   * Whether item is active.
-   * @since 0.0.55
-   */
-  active: PropTypes.bool,
-  /**
-   * Whether item is disabled.
-   * @since 0.0.55
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Icon
-   * @since 0.0.55
-   */
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-  /**
-   * Right label of item.
-   * @since 0.0.57
-   */
-  label: PropTypes.node,
-  /**
-   * Tooltip for component.
-   * @since 2.6.1
-   */
-  // eslint-disable-next-line react/require-default-props
-  tooltip: PropTypes.node,
-  /**
-   * Content of the `MenuItem`.
-   * @since 0.0.55
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func
-};
-MenuItem.defaultProps = {
-  active: false,
-  disabled: false,
-  icon: null,
-  label: null,
-  children: null,
-  className: null,
-  baseClassName: `${CLS_PREFIX}menu__item`,
-  onClick: null
-};
 export default MenuItem;

package/esm/components/Menu/MenuSelectableItem.js

@@ -1,22 +1,19 @@
 // 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 MenuItem from './MenuItem';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `MenuSelectableItem` is a part of [Menu](#!/Menu) component.
  * @since 0.0.57
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const MenuSelectableItem = _ref => {
   let {
-    baseClassName,
     className,
     children,
-    selected,
+    selected = false,
+    baseClassName = `${CLS_PREFIX}menu__item`,
     ...props
   } = _ref;
   return /*#__PURE__*/_jsx(MenuItem, {
@@ -28,30 +25,4 @@ const MenuSelectableItem = _ref => {
     children: children
   });
 };
-MenuSelectableItem.propTypes = {
-  /**
-   * Whether item is selected.
-   * @since 0.0.57
-   */
-  selected: PropTypes.bool,
-  /**
-   * Content of the `MenuSelectableItem`.
-   * @since 0.0.57
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
-MenuSelectableItem.defaultProps = {
-  selected: false,
-  children: null,
-  className: null,
-  baseClassName: `${CLS_PREFIX}menu__item`
-};
 export default MenuSelectableItem;

package/esm/components/Plaintext/Plaintext.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";
@@ -11,32 +9,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 const Plaintext = _ref => {
   let {
-    baseClassName,
     className,
-    children
+    children,
+    baseClassName = `${CLS_PREFIX}plaintext`
   } = _ref;
   return /*#__PURE__*/_jsx("pre", {
     className: classNames(baseClassName, className),
     children: children
   });
 };
-Plaintext.propTypes = {
-  /**
-   * Content of the Plaintext
-   * @since 0.0.42
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
-Plaintext.defaultProps = {
-  className: null,
-  baseClassName: `${CLS_PREFIX}plaintext`
-};
 export default Plaintext;

package/esm/components/Popover/Popover.js

@@ -1,9 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { cloneElement, Component, createRef } from 'react';
 import { findDOMNode } from 'react-dom';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Measure from 'react-measure';
 import { CLS_PREFIX, Z_INDEX_POPOVER } from '../../constants';
@@ -15,6 +13,7 @@ import { isLikeText } from '../Translate';
 import { wrapFunction } from '../utils';
 import OnDarkContext from '../OnDarkContext';
 import FocusTrap from '../FocusTrap';
+import { cloneElement, Component, createRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PLACEMENT_MAP = {
@@ -25,12 +24,16 @@ const PLACEMENT_MAP = {
   'bottom-left': 'bottom-end',
   'bottom-right': 'bottom-start',
   'left-top': 'left-end',
-  'left-bottom': 'left-start'
+  'left-bottom': 'left-start',
+  top: 'top',
+  right: 'right',
+  bottom: 'bottom',
+  left: 'left',
+  auto: 'auto'
 };
 const ARROW_HEIGHT = 26;
 const isControlled = props => props.visible !== null;
 const normalize = value => String(Number(value)) === String(value) ? `${value}px` : value;
-
 /**
  * `Popover` component is non-modal pop-up window used for providing additional information
  * for an interface element. It also may contain Form with few fields or any other small content.
@@ -45,6 +48,9 @@ class Popover extends Component {
     });
     _defineProperty(this, "contentRef", /*#__PURE__*/createRef());
     _defineProperty(this, "targetRef", /*#__PURE__*/createRef());
+    _defineProperty(this, "prevFocusElement", void 0);
+    _defineProperty(this, "popperData", void 0);
+    _defineProperty(this, "headerBounds", void 0);
     _defineProperty(this, "checkArrowPosition", () => {
       const {
         title
@@ -60,10 +66,8 @@ class Popover extends Component {
         actualPlacement,
         arrowStyle
       } = this.popperData;
-      const {
-        top
-      } = arrowStyle;
-      const [direction] = actualPlacement.split('-');
+      const top = parseInt(arrowStyle?.top || '');
+      const [direction] = actualPlacement?.split('-') || [];
       let newArrowInHeader = false;
       const directionBottomOrPopoverLowEnough = direction === 'bottom' || top !== null && this.headerBounds && top < this.headerBounds.height - ARROW_HEIGHT / 2;
       const rightDirection = direction !== 'top' && directionBottomOrPopoverLowEnough;
@@ -109,7 +113,7 @@ class Popover extends Component {
         canCloseOnEscapePress,
         autoFocus
       } = this.props;
-      const isNeedFocus = autoFocus && canCloseOnEscapePress && this.prevFocusElement && (!document.activeElement || this.contentRef.current.contains(document.activeElement));
+      const isNeedFocus = autoFocus && canCloseOnEscapePress && this.prevFocusElement && (!document.activeElement || this.contentRef.current?.contains(document.activeElement));
       if (onClose) {
         onClose();
       } else {
@@ -118,7 +122,7 @@ class Popover extends Component {
         });
       }
       if (isNeedFocus) {
-        this.prevFocusElement.focus();
+        this.prevFocusElement?.focus();
       }
     });
     _defineProperty(this, "handleHeaderResize", contentRect => {
@@ -144,7 +148,7 @@ class Popover extends Component {
       show: isControlled(props) ? props.visible : state.show
     };
   }
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(_, prevState) {
     const {
       canCloseOnEscapePress,
       autoFocus
@@ -198,7 +202,7 @@ class Popover extends Component {
     } = this.state;
     let behavior;
     if (placement !== 'auto') {
-      const [direction] = placement.split('-');
+      const [direction] = placement?.split('-') || [];
       if (direction === 'top') {
         behavior = ['top', 'bottom', 'right', 'left'];
       } else if (direction === 'right') {
@@ -229,7 +233,7 @@ class Popover extends Component {
           ref: measureRef,
           className: `${baseClassName}__heading`,
           children: [isLikeText(title) ? /*#__PURE__*/_jsx(Heading, {
-            level: "5",
+            level: 5,
             className: `${baseClassName}__title`,
             children: title
           }) : title, /*#__PURE__*/_jsxs("div", {
@@ -243,7 +247,7 @@ class Popover extends Component {
       className: classNames(target.props.className, `${baseClassName}__target`),
       onClick: wrapFunction(target.props.onClick, this.handleTargetClick)
     });
-    const popperPlacement = PLACEMENT_MAP[placement] || placement;
+    const popperPlacement = placement ? PLACEMENT_MAP[placement] : undefined;
     let wrapperStyle;
     if (height) {
       wrapperStyle = {
@@ -252,7 +256,7 @@ class Popover extends Component {
     }
     const content = /*#__PURE__*/_jsxs(FocusTrap, {
       ref: this.contentRef,
-      onKeyUp: canCloseOnEscapePress && show ? this.hotkeyHandler : null,
+      onKeyUp: canCloseOnEscapePress && show ? this.hotkeyHandler : undefined,
       className: `${baseClassName}__inner`,
       style: wrapperStyle,
       children: [height ? heading : heading || close, /*#__PURE__*/_jsx("div", {
@@ -296,104 +300,7 @@ class Popover extends Component {
 }
 // eslint-disable-next-line react/sort-comp
 _defineProperty(Popover, "contextType", OnDarkContext);
-Popover.propTypes = {
-  /**
-   * The reference element used to position the popover.
-   * @since 0.0.65
-   */
-  target: PropTypes.element.isRequired,
-  /**
-   * A React reference to the DOM element that needs for calculating the position of the popup.
-   * It is required only when visible or defaultVisible props are provided.
-   * @since 3.12.0
-   */
-  targetRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(HTMLElement)
-  })]),
-  /**
-   * Popover visibility. For controlled component only.
-   * @since 0.0.65
-   */
-  visible: PropTypes.bool,
-  /**
-   * Popover default (on init) visibility. For uncontrolled component only.
-   * @since 0.0.66
-   */
-  defaultVisible: PropTypes.bool,
-  /**
-   * Popover title. Header will only be rendered if this prop is defined.
-   * @since 0.0.42
-   */
-  title: PropTypes.node,
-  /**
-   * Click handler for close button. If it is not defined then default behavior (hide popover) will be used.
-   * @since 0.0.42
-   */
-  onClose: PropTypes.func,
-  /**
-   * Popover placement
-   * @since 0.0.42
-   */
-  placement: PropTypes.oneOf(['auto', 'top-left', 'top', 'top-right', 'right-top', 'right', 'right-bottom', 'bottom-right', 'bottom', 'bottom-left', 'left-bottom', 'left', 'left-top']),
-  /**
-   * Indicating if clicking outside the popover should close it.
-   * @since 0.0.65
-   */
-  canCloseOnOutsideClick: PropTypes.bool,
-  /**
-   * Indicating if pressing the escape key should close the popover.
-   * @since 0.0.65
-   */
-  canCloseOnEscapePress: PropTypes.bool,
-  /**
-   * Content of the Popover
-   * @since 0.0.42
-   */
-  children: PropTypes.node,
-  /**
-   * Visual intent color to apply to component.
-   * @since 0.0.59
-   */
-  intent: PropTypes.oneOf(['info', 'success', 'warning', 'danger']),
-  /**
-   * Undo predefined max-width.
-   * @since 2.4.0
-   */
-  wide: PropTypes.bool,
-  /**
-   * Define the popover width.
-   * @since 3.2.0
-   */
-  width: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-  /**
-   * Define the popover height.
-   * @since 3.3.0
-   */
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * A slot for buttons or links in the header.
-   * @since 3.16.0
-   */
-  extra: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string,
-  /**
-   * Boundaries element for preventOverflow property.
-   * @since 1.12.4
-   */
-  boundariesElement: PropTypes.oneOfType([PropTypes.oneOf(['scrollParent', 'window', 'viewport']), PropTypes.instanceOf(HTMLElement)]),
-  /**
-   * @ignore
-   */
-  autoFocus: PropTypes.bool
-};
-Popover.defaultProps = {
+_defineProperty(Popover, "defaultProps", {
   visible: null,
   defaultVisible: false,
   title: undefined,
@@ -412,5 +319,5 @@ Popover.defaultProps = {
   boundariesElement: undefined,
   autoFocus: true,
   targetRef: undefined
-};
+});
 export default Popover;

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';