@plesk/ui-library 3.31.2 → 3.32.0

package/esm/components/Pagination/Pagination.js

@@ -1,7 +1,5 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import InputNumber from '../InputNumber';
@@ -12,6 +10,8 @@ import Popover from '../Popover';
 import SegmentedControl from '../SegmentedControl';
 import ContentLoader from '../ContentLoader';
 import { safeInvoke } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export const ITEMS_PER_PAGE_OPTIONS = [25, 100, 'all'];
 const VIEW_DEFAULT = 'default';
 const VIEW_POPOVER = 'popover';
@@ -38,74 +38,81 @@ const Pagination = _ref => {
   } = _ref;
   const handleSelect = page => safeInvoke(onSelect, page);
   const handleItemsPerPageChange = option => safeInvoke(onItemsPerPageChange, option);
-  const pagination = /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames(baseClassName, className)
-  }, props), /*#__PURE__*/React.createElement("div", {
-    className: `${baseClassName}__pages`
-  }, /*#__PURE__*/React.createElement(ContentLoader, {
-    loading: loading,
-    overlay: true,
-    spinner: {
-      size: 'sm'
-    },
-    className: `${baseClassName}__loader`
-  }, /*#__PURE__*/React.createElement(InputNumber, {
-    value: loading ? undefined : current,
-    onChange: handleSelect,
-    min: 1,
-    max: total,
-    decrementIcon: "arrow-left",
-    incrementIcon: "arrow-right",
-    className: `${baseClassName}__input`
-  })), /*#__PURE__*/React.createElement(Translate, {
-    content: "Pagination.totalShort",
-    fallback: "of %%total%%",
-    params: {
-      total
-    },
-    className: `${baseClassName}__text`
-  })), onItemsPerPageChange ? /*#__PURE__*/React.createElement("div", {
-    className: `${baseClassName}__options`
-  }, /*#__PURE__*/React.createElement(Translate, {
-    content: "Pagination.itemsPerPage",
-    fallback: "Items per page",
-    className: `${baseClassName}__text`
-  }), /*#__PURE__*/React.createElement(SegmentedControl, {
-    ghost: true,
-    buttons: itemsPerPageOptions.map(value => {
-      let title = value;
-      if (value === 'all') {
-        title = /*#__PURE__*/React.createElement(Translate, {
-          content: "Pagination.all",
-          fallback: "All"
-        });
-      }
-      return {
-        value,
-        title
-      };
-    }),
-    selected: itemsPerPage,
-    onChange: handleItemsPerPageChange,
-    className: `${baseClassName}__control`
-  })) : null);
+  const pagination = /*#__PURE__*/_jsxs("div", {
+    className: classNames(baseClassName, className),
+    ...props,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: `${baseClassName}__pages`,
+      children: [/*#__PURE__*/_jsx(ContentLoader, {
+        loading: loading,
+        overlay: true,
+        spinner: {
+          size: 'sm'
+        },
+        className: `${baseClassName}__loader`,
+        children: /*#__PURE__*/_jsx(InputNumber, {
+          value: loading ? undefined : current,
+          onChange: handleSelect,
+          min: 1,
+          max: total,
+          decrementIcon: "arrow-left",
+          incrementIcon: "arrow-right",
+          className: `${baseClassName}__input`
+        })
+      }), /*#__PURE__*/_jsx(Translate, {
+        content: "Pagination.totalShort",
+        fallback: "of %%total%%",
+        params: {
+          total
+        },
+        className: `${baseClassName}__text`
+      })]
+    }), onItemsPerPageChange ? /*#__PURE__*/_jsxs("div", {
+      className: `${baseClassName}__options`,
+      children: [/*#__PURE__*/_jsx(Translate, {
+        content: "Pagination.itemsPerPage",
+        fallback: "Items per page",
+        className: `${baseClassName}__text`
+      }), /*#__PURE__*/_jsx(SegmentedControl, {
+        ghost: true,
+        buttons: itemsPerPageOptions.map(value => {
+          let title = value;
+          if (value === 'all') {
+            title = /*#__PURE__*/_jsx(Translate, {
+              content: "Pagination.all",
+              fallback: "All"
+            });
+          }
+          return {
+            value,
+            title
+          };
+        }),
+        selected: itemsPerPage,
+        onChange: handleItemsPerPageChange,
+        className: `${baseClassName}__control`
+      })]
+    }) : null]
+  });
   if (view === VIEW_POPOVER) {
-    return /*#__PURE__*/React.createElement(Popover, {
-      target: /*#__PURE__*/React.createElement(Text, {
+    return /*#__PURE__*/_jsx(Popover, {
+      target: /*#__PURE__*/_jsx(Text, {
         fontSize: "sm",
         component: Link,
-        nowrap: true
-      }, /*#__PURE__*/React.createElement(Translate, {
-        content: "Pagination.total",
-        fallback: "Page %%current%% of %%total%%",
-        params: {
-          current,
-          total
-        }
-      })),
+        nowrap: true,
+        children: /*#__PURE__*/_jsx(Translate, {
+          content: "Pagination.total",
+          fallback: "Page %%current%% of %%total%%",
+          params: {
+            current,
+            total
+          }
+        })
+      }),
       placement: "top",
-      className: `${baseClassName}__popover`
-    }, pagination);
+      className: `${baseClassName}__popover`,
+      children: pagination
+    });
   }
   return pagination;
 };

package/esm/components/Panel/Panel.js

@@ -1,10 +1,7 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 
-/* eslint-disable react/no-deprecated */
-
-import React, { Component, createRef } from 'react';
+import { Component, createRef } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import { CSSTransition } from 'react-transition-group';
@@ -12,6 +9,8 @@ import { isLikeText } from '../Translate';
 import Heading from '../Heading';
 import Button from '../Button';
 import { isClickable } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * `Panel` component is used for visually grouping some content.
  * @since 0.0.35
@@ -69,39 +68,45 @@ class Panel extends Component {
     } = this.state;
     const handleToggle = collapsible ? this.handleToggle : undefined;
     const rootRef = /*#__PURE__*/createRef();
-    return /*#__PURE__*/React.createElement(CSSTransition, {
+    return /*#__PURE__*/_jsx(CSSTransition, {
       classNames: `${baseClassName}-`,
       in: !collapsed,
       timeout: 300,
-      nodeRef: rootRef
-    }, /*#__PURE__*/React.createElement("div", _extends({
-      className: classNames(baseClassName, {
-        [`${baseClassName}--collapsible`]: collapsible,
-        [`${baseClassName}--collapsed`]: collapsed,
-        [`${baseClassName}--expanded`]: !collapsed
-      }, className)
-    }, props, {
-      ref: rootRef
-    }), title && /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__header`,
-      onClick: handleToggle
-    }, isLikeText(title) ? /*#__PURE__*/React.createElement(Heading, {
-      component: "div",
-      level: 4,
-      className: `${baseClassName}__title`
-    }, title) : title, (extra || collapsible) && /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__extra`
-    }, extra, collapsible && /*#__PURE__*/React.createElement(Button, {
-      ghost: true,
-      className: `${baseClassName}__control-button`,
-      icon: {
-        name: 'chevron-up',
-        flipVertical: collapsed
-      },
-      onClick: handleToggle
-    }))), /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__content`
-    }, children)));
+      nodeRef: rootRef,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: classNames(baseClassName, {
+          [`${baseClassName}--collapsible`]: collapsible,
+          [`${baseClassName}--collapsed`]: collapsed,
+          [`${baseClassName}--expanded`]: !collapsed
+        }, className),
+        ...props,
+        ref: rootRef,
+        children: [title && /*#__PURE__*/_jsxs("div", {
+          className: `${baseClassName}__header`,
+          onClick: handleToggle,
+          children: [isLikeText(title) ? /*#__PURE__*/_jsx(Heading, {
+            component: "div",
+            level: 4,
+            className: `${baseClassName}__title`,
+            children: title
+          }) : title, (extra || collapsible) && /*#__PURE__*/_jsxs("div", {
+            className: `${baseClassName}__extra`,
+            children: [extra, collapsible && /*#__PURE__*/_jsx(Button, {
+              ghost: true,
+              className: `${baseClassName}__control-button`,
+              icon: {
+                name: 'chevron-up',
+                flipVertical: collapsed
+              },
+              onClick: handleToggle
+            })]
+          })]
+        }), /*#__PURE__*/_jsx("div", {
+          className: `${baseClassName}__content`,
+          children: children
+        })]
+      })
+    });
   }
 }
 _defineProperty(Panel, "defaultProps", {

package/esm/components/Paragraph/Paragraph.js

@@ -1,9 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `Paragraph` is a block containing a single paragraph of [Text](#!/Text).
  * @since 1.1.0
@@ -16,8 +15,10 @@ const Paragraph = _ref => {
     component: Tag = 'p',
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement(Tag, _extends({
-    className: classNames(baseClassName, className)
-  }, props), children);
+  return /*#__PURE__*/_jsx(Tag, {
+    className: classNames(baseClassName, className),
+    ...props,
+    children: children
+  });
 };
 export default Paragraph;

package/esm/components/Plaintext/Plaintext.js

@@ -4,6 +4,7 @@ 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";
 /**
  * `Plaintext` component is used to show regular text, without any formatting options and ignoring html tags.
  * @since 0.0.42
@@ -14,9 +15,10 @@ const Plaintext = _ref => {
     className,
     children
   } = _ref;
-  return /*#__PURE__*/React.createElement("pre", {
-    className: classNames(baseClassName, className)
-  }, children);
+  return /*#__PURE__*/_jsx("pre", {
+    className: classNames(baseClassName, className),
+    children: children
+  });
 };
 Plaintext.propTypes = {
   /**

package/esm/components/Popover/Popover.js

@@ -1,9 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-/* eslint-disable react/no-deprecated */
-
 import React, { cloneElement, Component, createRef } from 'react';
 import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
@@ -18,6 +15,8 @@ import { isLikeText } from '../Translate';
 import { wrapFunction } from '../utils';
 import OnDarkContext from '../OnDarkContext';
 import FocusTrap from '../FocusTrap';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const PLACEMENT_MAP = {
   'top-left': 'top-end',
   'top-right': 'top-start',
@@ -210,7 +209,7 @@ class Popover extends Component {
         behavior = ['left', 'right', 'top', 'bottom'];
       }
     }
-    const close = /*#__PURE__*/React.createElement(Button, {
+    const close = /*#__PURE__*/_jsx(Button, {
       className: classNames(`${baseClassName}__close`, title && `${baseClassName}__close--heading`),
       onClick: this.handleClose,
       ghost: true,
@@ -219,22 +218,26 @@ class Popover extends Component {
         size: title ? 16 : 12
       }
     });
-    const heading = title && /*#__PURE__*/React.createElement(Measure, {
+    const heading = title && /*#__PURE__*/_jsx(Measure, {
       onResize: this.handleHeaderResize,
-      bounds: true
-    }, _ref => {
-      let {
-        measureRef
-      } = _ref;
-      return /*#__PURE__*/React.createElement("div", {
-        ref: measureRef,
-        className: `${baseClassName}__heading`
-      }, isLikeText(title) ? /*#__PURE__*/React.createElement(Heading, {
-        level: "5",
-        className: `${baseClassName}__title`
-      }, title) : title, /*#__PURE__*/React.createElement("div", {
-        className: `${baseClassName}__extra`
-      }, extra, close));
+      bounds: true,
+      children: _ref => {
+        let {
+          measureRef
+        } = _ref;
+        return /*#__PURE__*/_jsxs("div", {
+          ref: measureRef,
+          className: `${baseClassName}__heading`,
+          children: [isLikeText(title) ? /*#__PURE__*/_jsx(Heading, {
+            level: "5",
+            className: `${baseClassName}__title`,
+            children: title
+          }) : title, /*#__PURE__*/_jsxs("div", {
+            className: `${baseClassName}__extra`,
+            children: [extra, close]
+          })]
+        });
+      }
     });
     const trigger = isControlled(this.props) ? target : /*#__PURE__*/cloneElement(target, {
       className: classNames(target.props.className, `${baseClassName}__target`),
@@ -247,20 +250,23 @@ class Popover extends Component {
         height: normalize(height)
       };
     }
-    const content = /*#__PURE__*/React.createElement(FocusTrap, {
+    const content = /*#__PURE__*/_jsxs(FocusTrap, {
       ref: this.contentRef,
       onKeyUp: canCloseOnEscapePress && show ? this.hotkeyHandler : null,
       className: `${baseClassName}__inner`,
-      style: wrapperStyle
-    }, height ? heading : heading || close, /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__content`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__content-inner`
-    }, children)));
-    return /*#__PURE__*/React.createElement(Popper, _extends({
+      style: wrapperStyle,
+      children: [height ? heading : heading || close, /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__content`,
+        children: /*#__PURE__*/_jsx("div", {
+          className: `${baseClassName}__content-inner`,
+          children: children
+        })
+      })]
+    });
+    return /*#__PURE__*/_jsx(Popper, {
       target: trigger,
       targetRef: targetRef ? targetRef : this.targetRef,
-      arrow: /*#__PURE__*/React.createElement("span", {
+      arrow: /*#__PURE__*/_jsx("span", {
         className: classNames(`${baseClassName}__arrow`, arrowInHeader && `${baseClassName}__arrow--heading`)
       }),
       placement: popperPlacement,
@@ -275,14 +281,18 @@ class Popover extends Component {
       baseClassName: baseClassName,
       behavior: behavior,
       zIndex: Z_INDEX_POPOVER,
-      show: show
-    }, props), canCloseOnOutsideClick ? /*#__PURE__*/React.createElement(AutoClosable, {
-      onClose: this.handleClose,
-      ignoreNodes: this.getIgnoreNodes,
-      nodeRef: this.contentRef
-    }, content) : content);
+      show: show,
+      ...props,
+      children: canCloseOnOutsideClick ? /*#__PURE__*/_jsx(AutoClosable, {
+        onClose: this.handleClose,
+        ignoreNodes: this.getIgnoreNodes,
+        nodeRef: this.contentRef,
+        children: content
+      }) : content
+    });
   }
 }
+// eslint-disable-next-line react/sort-comp
 _defineProperty(Popover, "contextType", OnDarkContext);
 Popover.propTypes = {
   /**

package/esm/components/Popover/Popover.stories.js

@@ -1,32 +1,52 @@
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 import Link from '../Link';
 import Button from '../Button';
 import Paragraph from '../Paragraph';
 import Popover from './Popover';
-export const Basic = args => /*#__PURE__*/React.createElement(Popover, args);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const Basic = args => /*#__PURE__*/_jsx(Popover, {
+  ...args
+});
 Basic.args = {
-  target: /*#__PURE__*/React.createElement(Link, {
-    "data-id": "trigger"
-  }, 'Trigger'),
+  target: /*#__PURE__*/_jsx(Link, {
+    "data-id": "trigger",
+    children: 'Trigger'
+  }),
   children: 'Content'
 };
-export const ThreeButtons = args => /*#__PURE__*/React.createElement(Basic, args);
+export const ThreeButtons = args => /*#__PURE__*/_jsx(Basic, {
+  ...args
+});
 ThreeButtons.args = {
   ...Basic.args,
-  children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Paragraph, null, 'Enim ea occaecat dolor veniam.'), /*#__PURE__*/React.createElement(Button, {
-    "data-id": "button-1"
-  }, 'Button 1'), /*#__PURE__*/React.createElement(Paragraph, null, 'Incididunt ipsum nulla officia adipisicing voluptate enim reprehenderit.'), /*#__PURE__*/React.createElement(Button, {
-    "data-id": "button-2"
-  }, 'Button 2'), ` `, /*#__PURE__*/React.createElement(Button, {
-    "data-id": "button-3"
-  }, 'Button 3'), /*#__PURE__*/React.createElement(Paragraph, null, 'Cillum sunt nisi aute amet elit ut sit dolor in aliqua minim.'))
+  children: /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Paragraph, {
+      children: 'Enim ea occaecat dolor veniam.'
+    }), /*#__PURE__*/_jsx(Button, {
+      "data-id": "button-1",
+      children: 'Button 1'
+    }), /*#__PURE__*/_jsx(Paragraph, {
+      children: 'Incididunt ipsum nulla officia adipisicing voluptate enim reprehenderit.'
+    }), /*#__PURE__*/_jsx(Button, {
+      "data-id": "button-2",
+      children: 'Button 2'
+    }), ` `, /*#__PURE__*/_jsx(Button, {
+      "data-id": "button-3",
+      children: 'Button 3'
+    }), /*#__PURE__*/_jsx(Paragraph, {
+      children: 'Cillum sunt nisi aute amet elit ut sit dolor in aliqua minim.'
+    })]
+  })
 };
-export const Autofocus = args => /*#__PURE__*/React.createElement(Basic, args);
+export const Autofocus = args => /*#__PURE__*/_jsx(Basic, {
+  ...args
+});
 Autofocus.args = {
   ...Basic.args,
-  children: /*#__PURE__*/React.createElement("input", {
+  children: /*#__PURE__*/_jsx("input", {
     autoFocus: true
   })
 };

package/esm/components/Popper/Popper.js

@@ -1,9 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-/* eslint-disable react/no-deprecated */
-
 import React, { cloneElement, Component, Fragment, createRef } from 'react';
 import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
@@ -15,6 +12,8 @@ import Layer from '../Layer';
 /**
  * `Popper` component.
  */
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 class Popper extends Component {
   constructor() {
     super(...arguments);
@@ -160,19 +159,24 @@ class Popper extends Component {
       ref: ref => this.arrowRef = ref,
       style: arrowStyle
     });
-    return /*#__PURE__*/React.createElement(Fragment, null, target, show ? /*#__PURE__*/React.createElement(Layer, {
-      level: zIndex
-    }, /*#__PURE__*/React.createElement("div", _extends({
-      ref: this.contentRef,
-      className: classNames(baseClassName, className, `${baseClassName}--placement-${actualPlacement}`),
-      style: {
-        ...style,
-        ...(popperStyle ? popperStyle : {
-          position: 'fixed',
-          opacity: 0
+    return /*#__PURE__*/_jsxs(Fragment, {
+      children: [target, show ? /*#__PURE__*/_jsx(Layer, {
+        level: zIndex,
+        children: /*#__PURE__*/_jsxs("div", {
+          ref: this.contentRef,
+          className: classNames(baseClassName, className, `${baseClassName}--placement-${actualPlacement}`),
+          style: {
+            ...style,
+            ...(popperStyle ? popperStyle : {
+              position: 'fixed',
+              opacity: 0
+            })
+          },
+          ...props,
+          children: [children, arrowElement]
         })
-      }
-    }, props), children, arrowElement)) : null);
+      }) : null]
+    });
   }
 }
 Popper.propTypes = {

package/esm/components/Progress/Progress.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
@@ -8,6 +7,7 @@ import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import { safeInvoke } from '../utils';
 import { STATUS_NOT_STARTED, STATUS_RUNNING, STATUS_DONE, STATUS_ERROR } from '../ProgressStep';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `Progress` is used for showing progress of performing long operations.
  * @since 1.10.0
@@ -82,9 +82,11 @@ class Progress extends Component {
       onStatusChange,
       ...props
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", _extends({
-      className: classNames(baseClassName, className)
-    }, props), children);
+    return /*#__PURE__*/_jsx("div", {
+      className: classNames(baseClassName, className),
+      ...props,
+      children: children
+    });
   }
 }
 Progress.propTypes = {

package/esm/components/ProgressBar/ProgressBar.js

@@ -1,11 +1,11 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import ProgressIndicator from './ProgressIndicator';
 import OnDarkContext from '../OnDarkContext';
+import { jsx as _jsx } from "react/jsx-runtime";
 const ProgressBar = _ref => {
   let {
     baseClassName = `${CLS_PREFIX}progress-bar`,
@@ -14,17 +14,19 @@ const ProgressBar = _ref => {
     progress = -1,
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/_jsx("div", {
     className: classNames(baseClassName, {
       [`${baseClassName}--on-dark`]: useContext(OnDarkContext)
     }, className),
     "aria-valuemin": 0,
     "aria-valuemax": 100,
     "aria-valuenow": progress >= 0 && progress <= 100 ? progress : undefined,
-    role: "progressbar"
-  }, props), /*#__PURE__*/React.createElement(ProgressIndicator, {
-    intent: intent,
-    progress: progress
-  }));
+    role: "progressbar",
+    ...props,
+    children: /*#__PURE__*/_jsx(ProgressIndicator, {
+      intent: intent,
+      progress: progress
+    })
+  });
 };
 export default ProgressBar;