@plesk/ui-library 3.35.0 → 3.35.2

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

package/esm/components/SwitchesPanelItem/SwitchesPanelItem.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 Switch from '../Switch';
@@ -82,58 +81,7 @@ class SwitchesPanelItem extends Component {
     });
   }
 }
-SwitchesPanelItem.propTypes = {
-  /**
-   * A callback function, can be executed when the checked state is changing.
-   * @since 0.3.0
-   */
-  onChange: PropTypes.func.isRequired,
-  /**
-   * @ignore
-   */
-  defaultChecked: PropTypes.bool,
-  /**
-   * Visual intent color to apply to component.
-   * @since 0.3.0
-   */
-  intent: PropTypes.oneOf(['warning', 'danger']),
-  /**
-   * Title of the `SwitchesPanelItem`. Must be no longer than two lines.
-   * @since 0.3.0
-   */
-  title: PropTypes.node.isRequired,
-  /**
-   * `SwitchesPanelItem` description. Must be no longer than three lines.
-   * @since 0.3.0
-   */
-  description: PropTypes.node,
-  /**
-   * Rich full description of the `SwitchesPanelItem`.
-   * Adds control button with question mark that shows `Popover` on click.
-   * @since 0.3.0
-   */
-  fullDescription: PropTypes.node,
-  /**
-   * Props of underlying [Switch](#!/Switch) component.
-   * @since 0.5.0
-   */
-  switchProps: PropTypes.object,
-  /**
-   * Content of the control actions.
-   * Don't place here more than three buttons (with the one from 'fullDescription' property) or one link and one button.
-   * @since 0.3.0
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
-SwitchesPanelItem.defaultProps = {
+_defineProperty(SwitchesPanelItem, "defaultProps", {
   defaultChecked: false,
   intent: null,
   description: null,
@@ -142,5 +90,5 @@ SwitchesPanelItem.defaultProps = {
   children: null,
   className: null,
   baseClassName: `${CLS_PREFIX}switches-panel-item`
-};
+});
 export default SwitchesPanelItem;

package/esm/components/Toaster/Toaster.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _class;
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 import { render } from 'react-dom';
@@ -184,6 +185,7 @@ export default class Toaster extends Component {
     });
   }
 }
+_class = Toaster;
 // eslint-disable-next-line react/sort-comp
 _defineProperty(Toaster, "defaultProps", {
   position: 'top-end',
@@ -194,7 +196,7 @@ _defineProperty(Toaster, "create", function () {
   let container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document.body;
   const containerElement = document.createElement('div');
   container.appendChild(containerElement);
-  return render( /*#__PURE__*/_jsx(Toaster, {
+  return render( /*#__PURE__*/_jsx(_class, {
     ...props
   }), containerElement);
 });

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/index.js

@@ -98,6 +98,5 @@ export { default as Tooltip } from './Tooltip';
 export { default as Tour } from './Tour';
 export { default as Translate } from './Translate';
 export { default as Link } from './Link';
-export { default as Skeleton } from './Skeleton';
-export * from './Skeleton';
+export { default as Skeleton, SkeletonTabs, SkeletonText } from './Skeleton';
 export { PortalContext } from './Layer';

package/esm/index.js

@@ -1,6 +1,6 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 import svg4everybody from 'svg4everybody';
-const version = "3.35.0";
+const version = "3.35.2";
 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,25 @@
+// 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,
+    rerender
+  } = render( /*#__PURE__*/_jsx(Component, {
+    ...baseProps,
+    ...propOverrides
+  }));
+  return {
+    asFragment,
+    user: userEvent,
+    rerender: rerenderPropsOverrides => rerender( /*#__PURE__*/_jsx(Component, {
+      ...baseProps,
+      ...propOverrides,
+      ...rerenderPropsOverrides
+    })),
+    ...baseProps
+  };
+};
+export default renderer;