@plesk/ui-library 3.34.0 → 3.34.2

package/esm/components/Button/Button.js

@@ -1,7 +1,6 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { cloneElement, forwardRef, isValidElement, useContext, useState } from 'react';
-import PropTypes from 'prop-types';
+import { cloneElement, forwardRef, isValidElement, useContext, useState } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Icon from '../Icon';
@@ -65,32 +64,27 @@ const renderCaret = _ref2 => {
   }
   return caretElement;
 };
-
-/**
- * `Button` component is used for executing actions, changing the application state, opening forms or dialog windows, and submitting data.
- * As a rule, you should not use buttons for navigation between individual pages (use `Link` instead).
- * @since 0.0.37
- */
 const Button = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
-    baseClassName,
+    baseClassName = `${CLS_PREFIX}button`,
     className,
-    component: Tag,
+    component,
     size: propsSize,
     intent,
-    ghost,
+    ghost = false,
     selected: selectedProp,
     onToggle,
     state,
     icon,
     caret,
-    fill,
+    fill = false,
     tooltip,
     children,
     arrow,
-    disabled,
+    disabled = false,
     ...props
   } = _ref3;
+  const Tag = component || 'button';
   const [selectedState, setSelectedState] = useState(false);
   const handleToggle = () => {
     setSelectedState(!selectedState);
@@ -130,7 +124,7 @@ const Button = /*#__PURE__*/forwardRef((_ref3, ref) => {
   }
   const selected = selectedProp === undefined ? selectedState : selectedProp;
   if (selectedProp !== undefined || onToggle) {
-    componentProps['aria-pressed'] = String(selected);
+    componentProps['aria-pressed'] = `${selected}`;
   }
   const isArrowButton = arrow === 'forward' || arrow === 'backward';
   const hasAriaDisabled = Tag === 'button' && disabled && tooltip;
@@ -182,90 +176,8 @@ const Button = /*#__PURE__*/forwardRef((_ref3, ref) => {
   return button;
 });
 Button.displayName = 'Button';
-Button.propTypes = {
-  /**
-   * Button size.
-   * @since 2.5.0
-   */
-  size: PropTypes.oneOf(['md', 'lg']),
-  /**
-   * Visual intent color to apply to component.
-   * @since 0.0.42
-   */
-  intent: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'info']),
-  /**
-   * Display button with transparent background.
-   * @since 2.1.0
-   */
-  ghost: PropTypes.bool,
-  /**
-   * Arrow button.
-   * @since 2.6.0
-   */
-  arrow: PropTypes.oneOf(['forward', 'backward']),
-  /**
-   * Selected state of toggle button. Used in controlled component mode.
-   * @since 0.0.68
-   */
-  selected: PropTypes.bool,
-  /**
-   * Toggle button callback. Used in uncontrolled component mode.
-   * @since 0.0.68
-   */
-  onToggle: PropTypes.func,
-  /**
-   * State of the button
-   * @since 0.0.42
-   */
-  state: PropTypes.oneOf(['active', 'loading', 'hovered', 'focused']),
-  /**
-   * Is button disabled?
-   * @since 0.0.42
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Tooltip for component
-   * @since 0.0.42
-   */
-  tooltip: PropTypes.node,
-  /**
-   * Name of icon or [Icon](#!/Icon) component
-   * @since 0.0.42
-   */
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-  /**
-   * Show caret
-   * @since 0.0.42
-   */
-  caret: PropTypes.oneOfType([PropTypes.bool, PropTypes.element]),
-  /**
-   * Dynamically expand the button to fill out the whole available width of its parent container.
-   * @since 1.8.0
-   */
-  fill: PropTypes.bool,
-  /**
-   * Content of the button
-   * @since 0.0.37
-   */
-  children: PropTypes.node,
-  /**
-   * Component to render as the root element. Useful when rendering a `Button` as `<a>` or `<Link>`.
-   * @since 0.0.42
-   */
-  component: PropTypes.elementType,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func
-};
+
+// For ToolbarMenu backward compatibility purposes
 Button.defaultProps = {
   size: undefined,
   intent: undefined,
@@ -285,4 +197,11 @@ Button.defaultProps = {
   arrow: undefined,
   onClick: undefined
 };
+
+/**
+ * `Button` component is used for executing actions, changing the application state, opening forms or dialog windows, and submitting data.
+ * As a rule, you should not use buttons for navigation between individual pages (use `Link` instead).
+ *
+ * Since: 0.0.37
+ */
 export default Button;

package/esm/components/ContentLoader/IconsLoader.js

@@ -30,6 +30,7 @@ const useIconCursor = (icons, initialCursor, isSync) => {
   return [icons[cursor], targetRef];
 };
 const IconsLoader = _ref => {
+  var _icons;
   let {
     baseClassName = `${CLS_PREFIX}icons-loader`,
     className,
@@ -39,7 +40,7 @@ const IconsLoader = _ref => {
     ...props
   } = _ref;
   const syncRef = useRef('icon1');
-  if (!icons?.length) {
+  if (!((_icons = icons) !== null && _icons !== void 0 && _icons.length)) {
     icons = DEFAULT_ICONS;
   } else if (icons.length === 1) {
     icons = [icons[0], icons[0]];

package/esm/components/Dialog/Dialog.js

@@ -1,7 +1,6 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { isValidElement, cloneElement, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import { isValidElement, cloneElement, useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Overlay from '../Overlay';
@@ -68,6 +67,7 @@ const Dialog = _ref => {
       return /*#__PURE__*/_jsx("div", {
         className: classPrefix,
         children: /*#__PURE__*/_jsx("img", {
+          alt: "",
           className: `${classPrefix}-inner`,
           src: image
         })
@@ -76,6 +76,7 @@ const Dialog = _ref => {
     return /*#__PURE__*/_jsx("div", {
       className: classPrefix,
       children: /*#__PURE__*/_jsx("img", {
+        alt: "",
         className: `${classPrefix}-inner`,
         ...image
       })
@@ -165,7 +166,7 @@ const Dialog = _ref => {
           children: [/*#__PURE__*/_jsxs("div", {
             className: `${baseClassName}__header-content`,
             children: [isLikeText(title) ? /*#__PURE__*/_jsx(Heading, {
-              level: "2",
+              level: 2,
               className: `${baseClassName}__title`,
               children: title
             }) : /*#__PURE__*/_jsx("div", {
@@ -197,116 +198,6 @@ const Dialog = _ref => {
     }), closingConfirmationDialog]
   });
 };
-Dialog.propTypes = {
-  /**
-   * Toggles visibility.
-   * @since 0.0.68
-   */
-  isOpen: PropTypes.bool,
-  /**
-   * Banner. Renders in front of content as wide as dialog.
-   * @since 0.0.68
-   */
-  banner: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-  /**
-   * Block with an image, placed at the side of the component
-   * @since 3.25.0
-   */
-  sideBanner: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-  /**
-   * Additional properties for the sideBanner
-   * @since 3.25.0
-   */
-  sideBannerContainer: PropTypes.shape({
-    /**
-     * Values for css background property
-     */
-    background: PropTypes.string,
-    /**
-     * One of: center, flex-start, flex-end
-     */
-    align: PropTypes.oneOf(['center', 'flex-start', 'flex-end'])
-  }),
-  /**
-   * Image. Renders into content.
-   * @since 0.0.68
-   */
-  image: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-  /**
-   * Title
-   * @since 0.0.68
-   */
-  title: PropTypes.node,
-  /**
-   * The subtitle of the `Dialog`.
-   * @since 4.0.0
-   */
-  subtitle: PropTypes.node,
-  /**
-   * Title of "cancel" button
-   * @since 0.0.68
-   * @deprecated Use `cancelButton` instead.
-   */
-  cancelTitle: PropTypes.node,
-  /**
-   * Cancel button visibility or custom configuration. It accepts all props of the `Button` component.
-   * @since 3.13.0
-   */
-  cancelButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-  /**
-   * Buttons except "cancel" button
-   * @since 0.0.68
-   */
-  buttons: PropTypes.node,
-  /**
-   * Actions which will be shown in Dialog header
-   * @since 1.2.0
-   */
-  actions: PropTypes.node,
-  /**
-   * Wraps children into [Form](#!/Form) if not empty.
-   * @since 0.0.68
-   */
-  form: PropTypes.oneOfType([PropTypes.object, PropTypes.element]),
-  /**
-   * Dialog width
-   * @since 0.0.68
-   */
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-  /**
-   * If the value is false, the dialog cannot be closed and the Close button is hidden.
-   * @since 1.2.0
-   */
-  closable: PropTypes.bool,
-  /**
-   * Disable close dialog button
-   * @since 4.0.0
-   */
-  canClose: PropTypes.bool,
-  /**
-   * On close event handler. Called immediately after dialog closed by "cancel" button or "Esc" key.
-   * @since 0.0.68
-   */
-  onClose: PropTypes.func,
-  /**
-   * Whether show or not a confirmation dialog on close.
-   * @since 3.21.0
-   */
-  closingConfirmation: PropTypes.bool,
-  /**
-   * Content of the `DialogWindow`.
-   * @since 0.0.68
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
 Dialog.defaultProps = {
   isOpen: false,
   banner: undefined,

package/esm/components/Drawer/Drawer.js

@@ -1,7 +1,6 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { Fragment, isValidElement, cloneElement, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
+import { Fragment, isValidElement, cloneElement, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Overlay from '../Overlay';
@@ -14,153 +13,24 @@ import ScrollableElementFormContext from '../Form/ScrollableElementFormContext';
 import DrawerProgress from './DrawerProgress';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const propTypes = {
-  /**
-   * Toggles visibility.
-   * @since 0.0.65
-   */
-  isOpen: PropTypes.bool,
-  /**
-   * The title of the `Drawer`.
-   * @since 0.0.65
-   */
-  title: PropTypes.node.isRequired,
-  /**
-   * The subtitle of the `Drawer`.
-   * @since 0.0.65
-   */
-  subtitle: PropTypes.node,
-  /**
-   * Show the minimize button and the inactive close button.
-   * @since 1.4.1
-   */
-  hideButton: PropTypes.bool,
-  /**
-   * Show back button in the header. If true the close button is not show.
-   * @deprecated Not recommended to use. Use default close button instead.
-   * @since 0.0.65
-   */
-  backButton: PropTypes.bool,
-  /**
-   * A slot for `Tabs` component.
-   * @since 3.26.0
-   */
-  tabs: PropTypes.node,
-  /**
-   * Overlay placement.
-   * @since 0.0.65
-   */
-  placement: PropTypes.oneOf(['left', 'right']),
-  /**
-   * Overlay size.
-   * @since 0.0.65
-   */
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-  /**
-   * onClose handler.
-   * @since 0.0.65
-   */
-  onClose: PropTypes.func,
-  /**
-   * Whether show or not a confirmation dialog on close.
-   * @since 3.21.0
-   */
-  closingConfirmation: PropTypes.bool,
-  /**
-   * Wraps children into [Form](#!/Form) if not empty.<br>
-   * **Note:** in case of *element* you should take care of providing additional form props from [Drawer](#!/Drawer) through your custom component. See example below for more details
-   *
-   * @since 0.0.66
-   */
-  form: PropTypes.oneOfType([PropTypes.object, PropTypes.element]),
-  /**
-   * Block with an image, placed at the side of the component
-   * @since 3.25.0
-   */
-  sideBanner: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-  /**
-   * Additional properties for the sideBanner
-   * @since 3.25.0
-   */
-  sideBannerContainer: PropTypes.shape({
-    /**
-     * Values for css background property
-     */
-    background: PropTypes.string,
-    /**
-     * One of: center, flex-start, flex-end
-     */
-    align: PropTypes.oneOf(['center', 'flex-start', 'flex-end'])
-  }),
-  /**
-   * Content of the `Drawer`.
-   * @since 0.0.65
-   */
-  children: PropTypes.node,
-  /**
-   * Adds [Progress](#!/Progress) into footer.
-   * @since 1.11.0
-   */
-  progress: PropTypes.shape({
-    /**
-     * A title for the progress.
-     */
-    title: PropTypes.string,
-    /**
-     * An array of [ProgressStep](#!/ProgressStep) props.
-     */
-    steps: PropTypes.arrayOf(PropTypes.shape({
-      title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-      status: PropTypes.string,
-      progress: PropTypes.number,
-      icon: PropTypes.string
-    })).isRequired,
-    /**
-     * An option that controls drawer closing ability.
-     */
-    cancelable: PropTypes.bool,
-    /**
-     * On overall status event handler.
-     * @since 3.8.0
-     */
-    onStatusChange: PropTypes.func,
-    /**
-     * @ignore
-     */
-    onClose: PropTypes.func,
-    /**
-     * @ignore
-     */
-    onClosableChange: PropTypes.func
-  }),
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
 const defaultProps = {
   isOpen: false,
-  subtitle: '',
+  subtitle: undefined,
   backButton: undefined,
   hideButton: undefined,
   tabs: undefined,
   placement: 'left',
   size: 'md',
-  onClose: null,
+  onClose: undefined,
   closingConfirmation: undefined,
-  form: null,
+  form: undefined,
   sideBanner: undefined,
   sideBannerContainer: undefined,
-  progress: null,
+  progress: undefined,
   children: null,
-  className: null,
+  className: undefined,
   baseClassName: `${CLS_PREFIX}drawer`
 };
-
 /**
  * `Drawer` component is used for working with properties of an object (or system) without leaving the context of the object.
  * [Read more when to use Drawer](#!/Drawers%2C%20pages%2C%20popovers).
@@ -182,7 +52,7 @@ const Drawer = _ref => {
     closingConfirmation,
     ...props
   } = _ref;
-  const scrollableRef = useRef();
+  const scrollableRef = useRef(null);
   const [isClosable, setIsClosable] = useState(true);
   const {
     onCloseWithConfirmation,
@@ -219,7 +89,7 @@ const Drawer = _ref => {
           className: classNames(`${baseClassName}__form`, form.props.className),
           cancelButton: form.props.cancelButton === false ? false : {
             onClick: onCloseWithConfirmation,
-            ...form.props.cancelButton
+            ...(typeof form.props.cancelButton === 'object' && form.props.cancelButton)
           },
           render: _ref3 => {
             let {
@@ -238,7 +108,7 @@ const Drawer = _ref => {
         if (form.cancelButton !== false) {
           form.cancelButton = {
             onClick: onCloseWithConfirmation,
-            ...form.cancelButton
+            ...(typeof form.cancelButton === 'object' && form.cancelButton)
           };
         }
         return /*#__PURE__*/_jsx(Form, {
@@ -283,7 +153,7 @@ const Drawer = _ref => {
           onClose: onCloseWithConfirmation,
           tabs: tabs,
           children: [isLikeText(title) ? /*#__PURE__*/_jsx(Heading, {
-            level: "2",
+            level: 2,
             className: `${baseClassName}__title`,
             children: title
           }) : /*#__PURE__*/_jsx("div", {
@@ -311,6 +181,5 @@ const Drawer = _ref => {
     }), closingConfirmationDialog]
   });
 };
-Drawer.propTypes = propTypes;
 Drawer.defaultProps = defaultProps;
 export default Drawer;

package/esm/components/Drawer/Header.js

@@ -2,8 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 import { isRtl } from '../../utils';
-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';
@@ -11,6 +10,10 @@ import Icon from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default class Header extends Component {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "isRtl", false);
+  }
   componentDidMount() {
     this.isRtl = isRtl();
   }
@@ -119,14 +122,6 @@ export default class Header extends Component {
     });
   }
 }
-_defineProperty(Header, "propTypes", {
-  baseClassName: PropTypes.string,
-  onClose: PropTypes.func,
-  children: PropTypes.node.isRequired,
-  backButton: PropTypes.bool,
-  hideButton: PropTypes.bool,
-  tabs: PropTypes.node
-});
 _defineProperty(Header, "defaultProps", {
   onClose: null,
   baseClassName: `${CLS_PREFIX}drawer-header`,

package/esm/components/Dropdown/Dropdown.js

@@ -1,9 +1,8 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 import { isRtl } from '../../utils';
-import React, { cloneElement, isValidElement, useState, useEffect, useRef } from 'react';
+import { cloneElement, isValidElement, useState, useEffect, useRef } from 'react';
 import { wrapFunction } from '../utils';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX, Z_INDEX_DROPDOWN, Z_INDEX_OVERLAY } from '../../constants';
 import Button from '../Button';
@@ -13,6 +12,8 @@ import Layer from '../Layer';
 import { MenuItem, MenuDivider } from '../Menu';
 import Translate from '../Translate';
 import localeFallback from './locale/en-US';
+
+// TODO: move to Popover
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -21,7 +22,7 @@ const createTarget = (node, _ref) => {
     onToggle,
     targetRef
   } = _ref;
-  if (false === ( /*#__PURE__*/isValidElement(node) && node.type !== Translate)) {
+  if (!( /*#__PURE__*/isValidElement(node) && node.type !== Translate)) {
     node = /*#__PURE__*/_jsx(Button, {
       caret: true,
       children: node
@@ -202,43 +203,6 @@ const Dropdown = _ref3 => {
     })
   });
 };
-Dropdown.propTypes = {
-  /**
-   * Dropdown [menu](#!/Menu).
-   * @since 0.0.57
-   */
-  menu: PropTypes.element.isRequired,
-  /**
-   * Menu placement.
-   * @since 0.0.60
-   */
-  menuPlacement: PropTypes.string,
-  /**
-   * Content of the `Dropdown`.
-   * @since 0.0.57
-   */
-  children: PropTypes.node,
-  /**
-   * Custom localization messages.
-   * @since 3.6.0
-   */
-  locale: PropTypes.shape({
-    close: PropTypes.node
-  }),
-  /**
-   * Display menu as overlay.
-   * @ignore
-   */
-  overlay: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
 Dropdown.defaultProps = {
   menuPlacement: 'bottom-start',
   children: undefined,

package/esm/components/Form/Form.js

@@ -399,7 +399,8 @@ const RefForwardingForm = /*#__PURE__*/forwardRef((props, ref) => {
   const innerRef = useRef(null);
   useImperativeHandle(ref, () => ({
     submit() {
-      innerRef.current?.dispatchEvent(new Event('submit', {
+      var _innerRef$current;
+      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.dispatchEvent(new Event('submit', {
         cancelable: true,
         bubbles: true
       }));

package/esm/components/FormFieldPassword/PasswordMeter.js

@@ -40,19 +40,19 @@ const PasswordMeter = _ref => {
     canCloseOnOutsideClick: false,
     canCloseOnEscapePress: false,
     ...props,
-    children: [result?.strength ? /*#__PURE__*/_jsx(Translate, {
+    children: [result !== null && result !== void 0 && result.strength ? /*#__PURE__*/_jsx(Translate, {
       component: "div",
       content: "FormFieldPassword.passwordStrength",
       fallback: locale.passwordStrength,
       params: {
         strength: /*#__PURE__*/_jsx("b", {
           children: /*#__PURE__*/_jsx(Translate, {
-            content: `FormFieldPassword.strength${result?.strength}`,
-            fallback: locale[`strength${result?.strength}`]
+            content: `FormFieldPassword.strength${result === null || result === void 0 ? void 0 : result.strength}`,
+            fallback: locale[`strength${result === null || result === void 0 ? void 0 : result.strength}`]
           })
         })
       }
-    }) : null, result?.suggestions.length ? /*#__PURE__*/_jsxs(_Fragment, {
+    }) : null, result !== null && result !== void 0 && result.suggestions.length ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Translate, {
         content: "FormFieldPassword.improvePassword",
         fallback: locale.improvePassword