@plesk/ui-library 3.34.2 → 3.35.1

package/esm/components/ProgressStep/index.js

@@ -1,4 +1,3 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-export { default } from './ProgressStep';
-export * from './ProgressStep';
+export { default, STATUS_RUNNING, STATUS_DONE, STATUS_ERROR, STATUS_WARNING, STATUS_CANCELED, STATUS_NOT_STARTED } from './ProgressStep';

package/esm/components/Section/Section.js

@@ -139,8 +139,7 @@ class Section extends Component {
       value: title,
       onChange: onTitleChange,
       onClick: e => {
-        var _e$target$closest$que;
-        (_e$target$closest$que = e.target.closest(`.${baseClassName}__header`).querySelector(`.${baseClassName}__control-button`)) === null || _e$target$closest$que === void 0 ? void 0 : _e$target$closest$que.click();
+        e.target.closest(`.${baseClassName}__header`).querySelector(`.${baseClassName}__control-button`)?.click();
       }
     });
   }

package/esm/components/Skeleton/SkeletonText.js

@@ -26,7 +26,7 @@ const SkeletonText = _ref => {
     // eslint-disable-next-line react/no-array-index-key
     , {
       ...lineProps,
-      className: classNames(`${baseClassName}__line`, lineProps === null || lineProps === void 0 ? void 0 : lineProps.className)
+      className: classNames(`${baseClassName}__line`, lineProps?.className)
     }, key))
   });
 };

package/esm/components/SplitButton/SplitButton.js

@@ -1,7 +1,6 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
+import { useRef } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Button from '../Button';
@@ -32,25 +31,26 @@ const focusStrategy = {
     return container.children[1].querySelector('button');
   }
 };
-
 /**
  * `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 {
-    baseClassName,
+    baseClassName = `${CLS_PREFIX}split-button`,
     className,
     menu,
     children,
-    opened,
     onClick,
     onKeyDown,
+    icon,
+    size,
     ...props
   } = _ref;
-  const rootRef = useRef();
+  const rootRef = useRef(null);
   const {
     focusNext,
     focusPrev
@@ -74,6 +74,8 @@ const SplitButton = _ref => {
     onKeyDown: handleKeyDown,
     ...props,
     children: [/*#__PURE__*/_jsx(Button, {
+      icon: icon,
+      size: size,
       tabIndex: 0,
       onClick: onClick,
       children: children
@@ -82,50 +84,11 @@ const SplitButton = _ref => {
       menu: menu,
       menuPlacement: "bottom-end",
       children: /*#__PURE__*/_jsx(Button, {
+        size: size,
         caret: true,
         tabIndex: -1
       })
     })]
   });
 };
-SplitButton.propTypes = {
-  /**
-   * @since 0.0.47
-   */
-  menu: PropTypes.any,
-  /**
-   * @since 0.0.47
-   */
-  opened: PropTypes.bool,
-  /**
-   * Content of the button group
-   * @since 0.0.40
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onKeyDown: PropTypes.func
-};
-SplitButton.defaultProps = {
-  menu: null,
-  opened: false,
-  children: null,
-  className: null,
-  baseClassName: `${CLS_PREFIX}split-button`,
-  onClick: undefined,
-  onKeyDown: undefined
-};
 export default SplitButton;

package/esm/components/SplitButton/index.js

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

package/esm/components/Switch/Switch.js

@@ -1,8 +1,5 @@
-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 classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Tooltip from '../Tooltip';
@@ -13,120 +10,50 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
  * It provides immediate results that is why it should not be used in Form.
  * @since 0.0.42
  */
-class Switch extends Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "handleChange", event => {
-      const {
-        disabled,
-        onChange
-      } = this.props;
-      if (!disabled && onChange) {
-        onChange(event.target.checked);
-      }
-    });
-  }
-  render() {
-    const {
-      baseClassName,
-      className,
-      children,
-      onChange,
-      tooltip,
-      intent,
-      checked,
-      defaultChecked,
-      disabled,
-      loading,
-      ...props
-    } = this.props;
-    let result = /*#__PURE__*/_jsxs("label", {
-      className: classNames(baseClassName, {
-        [`${baseClassName}--${intent}`]: intent,
-        [`${baseClassName}--loading`]: loading
-      }, className),
-      ...props,
-      children: [children ? /*#__PURE__*/_jsx("span", {
-        className: `${baseClassName}__label`,
-        children: children
-      }) : null, /*#__PURE__*/_jsx("input", {
-        type: "checkbox",
-        onChange: this.handleChange,
-        checked: checked,
-        defaultChecked: checked === null || checked === undefined ? defaultChecked : undefined,
-        disabled: disabled || loading
-      }), /*#__PURE__*/_jsx("span", {
-        className: `${baseClassName}__indicator`
-      })]
-    });
-    if (tooltip) {
-      result = /*#__PURE__*/_jsx(Tooltip, {
-        title: tooltip,
-        children: result
-      });
+const Switch = _ref => {
+  let {
+    className,
+    children,
+    onChange,
+    tooltip,
+    intent,
+    checked,
+    defaultChecked,
+    baseClassName = `${CLS_PREFIX}switch`,
+    disabled = false,
+    loading = false,
+    ...props
+  } = _ref;
+  const handleChange = event => {
+    if (!disabled && onChange) {
+      onChange(event.target.checked);
     }
-    return result;
+  };
+  const result = /*#__PURE__*/_jsxs("label", {
+    className: classNames(baseClassName, {
+      [`${baseClassName}--${intent}`]: intent,
+      [`${baseClassName}--loading`]: loading
+    }, className),
+    ...props,
+    children: [children ? /*#__PURE__*/_jsx("span", {
+      className: `${baseClassName}__label`,
+      children: children
+    }) : null, /*#__PURE__*/_jsx("input", {
+      type: "checkbox",
+      onChange: handleChange,
+      checked: checked,
+      defaultChecked: checked === null || checked === undefined ? defaultChecked : undefined,
+      disabled: disabled || loading
+    }), /*#__PURE__*/_jsx("span", {
+      className: `${baseClassName}__indicator`
+    })]
+  });
+  if (tooltip) {
+    return /*#__PURE__*/_jsx(Tooltip, {
+      title: tooltip,
+      children: result
+    });
   }
-}
-Switch.propTypes = {
-  /**
-   * Determine whether the `Switch` is checked.
-   * @since 0.0.42
-   */
-  checked: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  defaultChecked: PropTypes.bool,
-  /**
-   * A callback function, can be executed when the checked state is changing.
-   * @since 0.0.42
-   */
-  onChange: PropTypes.func,
-  /**
-   * Tooltip for component
-   * @since 0.0.42
-   */
-  tooltip: PropTypes.any,
-  /**
-   * Visual intent color to apply to component.
-   * @since 0.3.0
-   */
-  intent: PropTypes.oneOf(['warning', 'danger']),
-  /**
-   * Is `Switch` disabled?
-   * @since 0.0.42
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Loading indication
-   * @since 0.3.0
-   */
-  loading: PropTypes.bool,
-  /**
-   * Label of the `Switch`
-   * @since 0.0.42
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
-Switch.defaultProps = {
-  checked: undefined,
-  defaultChecked: undefined,
-  onChange: undefined,
-  tooltip: undefined,
-  intent: undefined,
-  disabled: false,
-  loading: false,
-  children: undefined,
-  className: undefined,
-  baseClassName: `${CLS_PREFIX}switch`
+  return result;
 };
 export default Switch;

package/esm/components/Tooltip/Tooltip.js

@@ -1,13 +1,13 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { cloneElement, Component, Fragment } from 'react';
 import Layer from '../Layer';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX, Z_INDEX_TOOLTIP } from '../../constants';
 import { wrapFunction } from '../utils';
+import { cloneElement, Component, createRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const createRectFactory = (width, height) => (left, top) => ({
   top,
@@ -84,7 +84,6 @@ const determinePosition = _ref => {
     left: targetRect.left + X_EXTRA_SPACE
   };
 };
-
 /**
  * `Tooltip` component is used for providing information about an interface element
  * while user hovers the pointer over the element.
@@ -99,42 +98,44 @@ class Tooltip extends Component {
       ready: false,
       visible: false
     });
-    _defineProperty(this, "handleShow", () => {
-      if (this.showTimer) {
-        clearTimeout(this.showTimer);
-        this.showTimer = null;
+    _defineProperty(this, "timer", null);
+    _defineProperty(this, "tooltipRef", /*#__PURE__*/createRef());
+    _defineProperty(this, "clearTimer", () => {
+      if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
       }
+    });
+    _defineProperty(this, "handleShow", () => {
+      this.clearTimer();
       this.setState({
         visible: true
       });
     });
     _defineProperty(this, "handleHide", () => {
-      if (this.showTimer) {
-        clearTimeout(this.showTimer);
-        this.showTimer = null;
-      }
+      this.clearTimer();
       this.setState({
         visible: false,
         ready: false
       });
     });
     _defineProperty(this, "handleMouseEnter", () => {
-      if (this.showTimer) {
+      if (this.timer) {
         return;
       }
       this.setState({
         ready: true
       });
-      this.showTimer = setTimeout(() => this.handleShow(), this.props.delay);
+      this.timer = setTimeout(() => this.handleShow(), this.props.delay);
     });
     _defineProperty(this, "handleMouseMove", e => {
       // TODO: try to add throttle
-      if (this.tooltipEl) {
-        const targetRect = e.target.getBoundingClientRect();
+      if (this.tooltipRef.current) {
+        const targetRect = e.currentTarget.getBoundingClientRect();
         const {
           width: tooltipWidth,
           height: tooltipHeight
-        } = this.tooltipEl.getBoundingClientRect();
+        } = this.tooltipRef.current.getBoundingClientRect();
         const position = determinePosition({
           clientX: e.clientX,
           clientY: e.clientY,
@@ -149,9 +150,14 @@ class Tooltip extends Component {
     });
   }
   componentWillUnmount() {
-    clearTimeout(this.showTimer);
+    this.clearTimer();
   }
   renderTooltip() {
+    const {
+      left,
+      top,
+      visible
+    } = this.state;
     const {
       baseClassName,
       className,
@@ -161,17 +167,10 @@ class Tooltip extends Component {
       delay,
       ...props
     } = this.props;
-    const {
-      left,
-      top,
-      visible
-    } = this.state;
     return /*#__PURE__*/_jsx(Layer, {
       level: Z_INDEX_TOOLTIP,
       children: /*#__PURE__*/_jsx("span", {
-        ref: el => {
-          this.tooltipEl = el;
-        },
+        ref: this.tooltipRef,
         className: classNames(baseClassName, className),
         style: {
           ...style,
@@ -188,49 +187,24 @@ class Tooltip extends Component {
     const {
       ready
     } = this.state;
-    return /*#__PURE__*/_jsxs(Fragment, {
-      children: [/*#__PURE__*/cloneElement(this.props.children, {
-        onMouseEnter: wrapFunction(this.props.children.props.onMouseEnter, this.handleMouseEnter),
-        onMouseMove: wrapFunction(this.props.children.props.onMouseMove, this.handleMouseMove),
-        onMouseLeave: wrapFunction(this.props.children.props.onMouseLeave, this.handleHide),
-        onMouseDown: wrapFunction(this.props.children.props.onMouseDown, this.handleHide)
+    const {
+      children
+    } = this.props;
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/cloneElement(children, {
+        onMouseEnter: wrapFunction(children.props.onMouseEnter, this.handleMouseEnter),
+        onMouseMove: wrapFunction(children.props.onMouseMove, this.handleMouseMove),
+        onMouseLeave: wrapFunction(children.props.onMouseLeave, this.handleHide),
+        onMouseDown: wrapFunction(children.props.onMouseDown, this.handleHide)
       }), ready && this.renderTooltip()]
     });
   }
 }
-Tooltip.propTypes = {
-  /**
-   * Content of the tooltip
-   * @since 0.0.42
-   */
-  title: PropTypes.node.isRequired,
-  /**
-   * Show delay (ms)
-   * @since 0.0.50
-   */
-  delay: PropTypes.number,
-  /**
-   * Element with tooltip
-   * @since 0.0.42
-   */
-  children: PropTypes.element.isRequired,
-  /**
-   * @ignore
-   */
-  style: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
-Tooltip.defaultProps = {
+_defineProperty(Tooltip, "defaultProps", {
+  // in ms.
   delay: 550,
   style: undefined,
   className: undefined,
   baseClassName: `${CLS_PREFIX}tooltip`
-};
+});
 export default Tooltip;

package/esm/components/Translate/Translate.js

@@ -1,32 +1,14 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { isValidElement } from 'react';
-import PropTypes from 'prop-types';
 import { useTranslate } from '../LocaleProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const isLikeText = node => {
-  if (typeof node === 'string') {
-    return true;
-  }
-  if ( /*#__PURE__*/isValidElement(node) && node.type === Translate) {
-    const {
-      component,
-      children
-    } = node.props;
-    if (component === 'span' && (typeof children === 'string' || typeof children === 'undefined' || children === null)) {
-      return true;
-    }
-  }
-  return false;
-};
-
 /**
  * `Translate` component.
  * @since 0.0.42
  */
 const Translate = _ref => {
   let {
-    component: Tag,
+    component,
     content,
     children,
     params,
@@ -36,8 +18,9 @@ const Translate = _ref => {
     translators,
     ...props
   } = _ref;
+  const Tag = component || 'span';
   const translate = useTranslate(namespace);
-  const key = content || children;
+  const key = content || children || '';
   const translator = translators && translators[key];
   if (translator) {
     if (typeof translator === 'function') {
@@ -46,65 +29,18 @@ const Translate = _ref => {
     return translator;
   }
   const message = translate(key, params, fallback);
+  const tagProps = {
+    ...props
+  };
   if (unsafe) {
-    props.dangerouslySetInnerHTML = {
+    tagProps.dangerouslySetInnerHTML = {
       __html: message
     };
   } else {
-    props.children = message;
+    tagProps.children = message;
   }
   return /*#__PURE__*/_jsx(Tag, {
-    ...props
+    ...tagProps
   });
 };
-Translate.propTypes = {
-  /**
-   * A some prefix for the message key.
-   * @since 2.6.0
-   */
-  namespace: PropTypes.string,
-  /**
-   * Translatable content or message key.
-   * @since 0.0.42
-   */
-  content: PropTypes.string,
-  /**
-   * Message params
-   * @since 0.0.42
-   */
-  params: PropTypes.object,
-  /**
-   * Fallback translation value.
-   * @since 0.0.47
-   */
-  fallback: PropTypes.string,
-  /**
-   * Component to render as the root element. Useful when rendering a `Translate` as `<option>`.
-   * @since 0.0.42
-   */
-  component: PropTypes.elementType,
-  /**
-   * A set of translation messages. If the set contains a message key, the component uses an item from the set for rendering.
-   * @ignore
-   */
-  translators: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.func, PropTypes.node])),
-  /**
-   * @ignore
-   */
-  unsafe: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  children: PropTypes.string
-};
-Translate.defaultProps = {
-  namespace: undefined,
-  content: undefined,
-  params: undefined,
-  component: 'span',
-  unsafe: undefined,
-  fallback: undefined,
-  children: undefined,
-  translators: undefined
-};
 export default Translate;

package/esm/components/Translate/index.js

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

package/esm/components/Translate/isLikeText.js

@@ -0,0 +1,19 @@
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+import { isValidElement } from 'react';
+import Translate from './Translate';
+export const isLikeText = node => {
+  if (typeof node === 'string') {
+    return true;
+  }
+  if ( /*#__PURE__*/isValidElement(node) && node.type === Translate) {
+    const {
+      component,
+      children
+    } = node.props;
+    if (typeof component === 'undefined' && (typeof children === 'string' || typeof children === 'undefined' || children === null)) {
+      return true;
+    }
+  }
+  return false;
+};

package/esm/components/utils.js

@@ -109,7 +109,7 @@ const createStrategy = () => {
   };
 };
 export const createFocusManager = function (containerRef) {
-  let isFitForFocus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _node => true;
+  let isFitForFocus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => true;
   let strategy = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : createStrategy();
   const tryFocus = node => {
     if (isFitForFocus(node) && node instanceof HTMLElement) {

package/esm/index.js

@@ -1,6 +1,6 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 import svg4everybody from 'svg4everybody';
-const version = "3.34.2";
+const version = "3.35.1";
 export * from './publicPath';
 export { version };
 export * from './utils';

package/esm/tests/index.js

@@ -0,0 +1,3 @@
+// Copyright 2023. Plesk International GmbH. All rights reserved.
+
+export { default } from './renderer';

package/esm/tests/renderer.js

@@ -0,0 +1,19 @@
+// Copyright 2023. Plesk International GmbH. All rights reserved.
+
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { jsx as _jsx } from "react/jsx-runtime";
+const renderer = (Component, baseProps) => propOverrides => {
+  const {
+    asFragment
+  } = render( /*#__PURE__*/_jsx(Component, {
+    ...baseProps,
+    ...propOverrides
+  }));
+  return {
+    asFragment,
+    user: userEvent,
+    ...baseProps
+  };
+};
+export default renderer;