@plesk/ui-library 3.27.3 → 3.28.1

package/cjs/components/Section/Section.js

@@ -248,79 +248,79 @@ class Section extends _react.Component {
 }
 
 const propTypes = {
-  /**
-   * Title of the section.
-   * @since 0.0.54
+  /**
+   * Title of the section.
+   * @since 0.0.54
    */
   title: _propTypes.default.node,
 
-  /**
-   * Visual intent color to apply to component.
-   * @since 0.0.54
+  /**
+   * Visual intent color to apply to component.
+   * @since 0.0.54
    */
   intent: _propTypes.default.oneOf(['danger', 'warning', 'success', 'inactive']),
 
-  /**
-   * Is section collapsible.
-   * @since 0.0.54
+  /**
+   * Is section collapsible.
+   * @since 0.0.54
    */
   collapsible: _propTypes.default.bool,
 
-  /**
-   * Is section collapsed now.
-   * @since 0.0.54
+  /**
+   * Is section collapsed now.
+   * @since 0.0.54
    */
   collapsed: _propTypes.default.bool,
 
-  /**
-   * Event handler of title change with inline editing form.
-   * @since 0.0.54
+  /**
+   * Event handler of title change with inline editing form.
+   * @since 0.0.54
    */
   onTitleChange: _propTypes.default.func,
 
-  /**
-   * Event handler of closing section with X-sign at the right.
-   * @since 0.0.54
+  /**
+   * Event handler of closing section with X-sign at the right.
+   * @since 0.0.54
    */
   onClose: _propTypes.default.func,
 
-  /**
-   * A callback executed when the section collapsing.
-   * @since 3.26.0
+  /**
+   * A callback executed when the section collapsing.
+   * @since 3.26.0
    */
   onToggle: _propTypes.default.func,
 
-  /**
-   * Array of custom section action button at the right.
-   * @since 0.0.54
+  /**
+   * Array of custom section action button at the right.
+   * @since 0.0.54
    */
   buttons: _propTypes.default.arrayOf(_propTypes.default.element),
 
-  /**
-   * Vertical or horizontal section view.
-   * Section view will be automatically switched if this parameter is not specified explicitly.
-   * @since 0.3.0
+  /**
+   * Vertical or horizontal section view.
+   * Section view will be automatically switched if this parameter is not specified explicitly.
+   * @since 0.3.0
    */
   vertical: _propTypes.default.bool,
 
-  /**
-   * Content of the `Section`.
-   * @since 0.0.54
+  /**
+   * Content of the `Section`.
+   * @since 0.0.54
    */
   children: _propTypes.default.node,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   form: _propTypes.default.object
 };
@@ -341,10 +341,10 @@ const defaultProps = {
 };
 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
+/**
+ * `Section` component is used for dividing of complex content into groups for better readability
+ * and comprehension of the presented information.
+ * @since 0.0.54
  */
 
 const SectionWrapper = props => {

package/cjs/components/Section/SectionItem.js

@@ -25,9 +25,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-/**
- * `SectionItem` component is used for showing parameters and its values in [Section](#!/Section).
- * @since 0.0.54
+/**
+ * `SectionItem` component is used for showing parameters and its values in [Section](#!/Section).
+ * @since 0.0.54
  */
 const SectionItem = ({
   baseClassName,
@@ -52,36 +52,36 @@ const SectionItem = ({
 };
 
 SectionItem.propTypes = {
-  /**
-   * Content of the `SectionItem`.
-   * @since 0.0.54
+  /**
+   * Content of the `SectionItem`.
+   * @since 0.0.54
    */
   children: _propTypes.default.node,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: _propTypes.default.string,
 
-  /**
-   * Title of the section item.
-   * @since 0.0.54
+  /**
+   * Title of the section item.
+   * @since 0.0.54
    */
   title: _propTypes.default.node,
 
-  /**
-   * Is this section item contains actions? If it so than there should be extra whitespaces.
-   * @since 0.0.54
+  /**
+   * Is this section item contains actions? If it so than there should be extra whitespaces.
+   * @since 0.0.54
    */
   actions: _propTypes.default.bool,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   vertical: _propTypes.default.bool
 };

package/cjs/components/SegmentedControl/SegmentedControl.js

@@ -39,10 +39,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 /* eslint-disable react/no-deprecated */
 const alphaSort = (a, b) => a > b ? 1 : -1;
-/**
- *  `Segmented Control` is a group of several [Buttons](#!/Button)
- * each of which functions as a mutually exclusive option.
- * @since 0.0.68
+/**
+ *  `Segmented Control` is a group of several [Buttons](#!/Button)
+ * each of which functions as a mutually exclusive option.
+ * @since 0.0.68
  */
 
 
@@ -308,72 +308,72 @@ class SegmentedControl extends _react.Component {
 }
 
 SegmentedControl.propTypes = {
-  /**
-   * Label
-   * @since 0.0.68
+  /**
+   * Label
+   * @since 0.0.68
    */
   label: _propTypes.default.node,
 
-  /**
-   * Where to place label
-   * @since 0.0.68
+  /**
+   * Where to place label
+   * @since 0.0.68
    */
   labelPlacement: _propTypes.default.oneOf(['top', 'left']),
 
-  /**
-   * Array of buttons to display (every array item must contain an unique "value" property)
-   * @since 0.0.68
+  /**
+   * Array of buttons to display (every array item must contain an unique "value" property)
+   * @since 0.0.68
    */
   buttons: _propTypes.default.arrayOf(_propTypes.default.shape({
     value: _propTypes.default.any.isRequired,
     title: _propTypes.default.node
   })).isRequired,
 
-  /**
-   * Monospaced version of buttons (all button would have the same width).
-   * Attention: using it with buttons dynamic update may cause to wrong behavior!
-   * @since 0.0.68
+  /**
+   * Monospaced version of buttons (all button would have the same width).
+   * Attention: using it with buttons dynamic update may cause to wrong behavior!
+   * @since 0.0.68
    */
   monospaced: _propTypes.default.bool,
 
-  /**
-   * Multiple selected options version (any number of buttons can be selected)
-   * @since 0.0.68
+  /**
+   * Multiple selected options version (any number of buttons can be selected)
+   * @since 0.0.68
    */
   multiple: _propTypes.default.bool,
 
-  /**
-   * Selected value or an array of values (for multiple version).
-   * Used in controlled version or as default value in uncontrolled version (with onChange property)
-   * @since 0.0.68
+  /**
+   * Selected value or an array of values (for multiple version).
+   * Used in controlled version or as default value in uncontrolled version (with onChange property)
+   * @since 0.0.68
    */
   selected: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.arrayOf(_propTypes.default.any)]).isRequired,
 
-  /**
-   * On change selection callback for uncontrolled mode.
-   * @since 0.0.68
+  /**
+   * On change selection callback for uncontrolled mode.
+   * @since 0.0.68
    */
   onChange: _propTypes.default.func,
 
-  /**
-   * Should component displays as inline element?
-   * @since 0.0.68
+  /**
+   * Should component displays as inline element?
+   * @since 0.0.68
    */
   inline: _propTypes.default.bool,
 
-  /**
-   * Use buttons with transparent background (ghost buttons)
-   * @since 2.3.0
+  /**
+   * Use buttons with transparent background (ghost buttons)
+   * @since 2.3.0
    */
   ghost: _propTypes.default.bool,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: _propTypes.default.string
 };

package/cjs/components/Select/MultiValue.js

@@ -50,7 +50,7 @@ const MultiValue = ({
     focusable: "false",
     "aria-hidden": "true"
   }, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M3.85 8.854a.498.498 0 1 1-.704-.704L5.296 6l-2.15-2.15a.498.498 0 0 1 .704-.704L6 5.296l2.15-2.15a.498.498 0 1 1\r .704.704L6.704 6l2.15 2.15a.498.498 0 0 1-.704.704L6 6.704l-2.15 2.15z"
+    d: "M3.85 8.854a.498.498 0 1 1-.704-.704L5.296 6l-2.15-2.15a.498.498 0 0 1 .704-.704L6 5.296l2.15-2.15a.498.498 0 1 1 .704.704L6.704 6l2.15 2.15a.498.498 0 0 1-.704.704L6 6.704l-2.15 2.15z"
   })))));
 };
 

package/cjs/components/Select/Select.js

@@ -118,9 +118,9 @@ const getNextValue = (value, prevValue) => {
   return value;
 };
 
-/**
- * `Select` component is used for making a choice among a set of related options.
- * @since 2.3.0
+/**
+ * `Select` component is used for making a choice among a set of related options.
+ * @since 2.3.0
  */
 const Select = ({
   id,

package/cjs/components/Select/SelectControl.js

@@ -248,7 +248,7 @@ const SelectControl = /*#__PURE__*/(0, _react.forwardRef)(function SelectControl
     "aria-hidden": "true",
     focusable: "false"
   }, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M.85 7.854a.498.498 0 1 1-.704-.704L3.296 4 .146.85A.498.498 0 0 1 .85.146L4 3.296 7.15.146a.498.498 0 0 1\r .704.704L4.704 4l3.15 3.15a.498.498 0 0 1-.704.704L4 4.704.85 7.854z"
+    d: "M.85 7.854a.498.498 0 1 1-.704-.704L3.296 4 .146.85A.498.498 0 0 1 .85.146L4 3.296 7.15.146a.498.498 0 0 1 .704.704L4.704 4l3.15 3.15a.498.498 0 0 1-.704.704L4 4.704.85 7.854z"
   })))), /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: (0, _classnames.default)(`${baseClassName}__indicator`, `${baseClassName}__indicator--dropdown`),

package/cjs/components/Select/SelectOption.js

@@ -11,9 +11,9 @@ var _react = _interopRequireDefault(require("react"));
 
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-/**
- * `SelectOption` is a part of [SelectOptionGroup](#!/SelectOptionGroup) component.
- * @since 2.3.0
+/**
+ * `SelectOption` is a part of [SelectOptionGroup](#!/SelectOptionGroup) component.
+ * @since 2.3.0
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const SelectOption = _props => {

package/cjs/components/Select/SelectOptionGroup.js

@@ -11,9 +11,9 @@ var _react = _interopRequireDefault(require("react"));
 
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-/**
- * `SelectOptionGroup` is a part of [Select](#!/Select) component. It can be used for splitting the list of all options into groups.
- * @since 2.3.0
+/**
+ * `SelectOptionGroup` is a part of [Select](#!/Select) component. It can be used for splitting the list of all options into groups.
+ * @since 2.3.0
  */
 const SelectOptionGroup = _props => {
   // styleguidist doesn't show Props & Methods if component renders nothing

package/cjs/components/Skeleton/Skeleton.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _utils = require("../utils");
+
+var _constants = require("../../constants");
+
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+
+/**
+ * `Skeleton` (or content-placeholder) is placeholder preview of content before the data gets loaded to reduce load-time frustration.
+ * Skeleton is used for non-text components, images, media-objects, etc.
+ * @since 3.28.0
+ */
+const Skeleton = ({
+  width,
+  maxWidth,
+  height,
+  style,
+  component: Tag = 'span',
+  className,
+  baseClassName = `${_constants.CLS_PREFIX}skeleton`,
+  ...props
+}) => {
+  const finalStyle = { ...style,
+    width: (0, _utils.normalizeSize)(width),
+    maxWidth: (0, _utils.normalizeSize)(maxWidth),
+    height: (0, _utils.normalizeSize)(height)
+  };
+  return /*#__PURE__*/_react.default.createElement(Tag, (0, _extends2.default)({
+    className: (0, _classnames.default)(baseClassName, className),
+    style: finalStyle
+  }, props));
+};
+
+var _default = Skeleton;
+exports.default = _default;

package/cjs/components/Skeleton/Skeleton.stories.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomSize = exports.Basic = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+const Basic = args => /*#__PURE__*/_react.default.createElement(_Skeleton.default, args);
+
+exports.Basic = Basic;
+Basic.args = {};
+
+const CustomSize = args => /*#__PURE__*/_react.default.createElement(Basic, args);
+
+exports.CustomSize = CustomSize;
+CustomSize.args = {
+  width: 200,
+  height: 100
+};

package/cjs/components/Skeleton/SkeletonTabs.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _SkeletonText = _interopRequireDefault(require("./SkeletonText"));
+
+var _constants = require("../../constants");
+
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+
+/**
+ * Skeleton for tabs component
+ * @since `3.28.0
+ */
+const SkeletonTabs = ({
+  count = 3,
+  className,
+  baseClassName = `${_constants.CLS_PREFIX}skeleton-tabs`,
+  ...props
+}) => /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+  className: (0, _classnames.default)(baseClassName, className)
+}, props), /*#__PURE__*/_react.default.createElement(_SkeletonText.default, {
+  lineProps: {
+    maxWidth: 100
+  },
+  lines: count
+}));
+
+var _default = SkeletonTabs;
+exports.default = _default;

package/cjs/components/Skeleton/SkeletonTabs.stories.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Basic = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SkeletonTabs = _interopRequireDefault(require("./SkeletonTabs"));
+
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+const Basic = args => /*#__PURE__*/_react.default.createElement(_SkeletonTabs.default, args);
+
+exports.Basic = Basic;

package/cjs/components/Skeleton/SkeletonText.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+
+var _constants = require("../../constants");
+
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+
+/**
+ * Skeleton for text-containing components. Is can be used inside Paragraph, as title, or single text
+ * @since 3.28.0
+ */
+const SkeletonText = ({
+  lines = 3,
+  component: Tag = 'span',
+  className,
+  baseClassName = `${_constants.CLS_PREFIX}skeleton-text`,
+  lineProps = {},
+  ...props
+}) => /*#__PURE__*/_react.default.createElement(Tag, (0, _extends2.default)({
+  className: (0, _classnames.default)(baseClassName, className)
+}, props), Array.from({
+  length: lines
+}).map((_, key) => /*#__PURE__*/_react.default.createElement(_Skeleton.default // eslint-disable-next-line react/no-array-index-key
+, (0, _extends2.default)({
+  key: key
+}, lineProps, {
+  className: (0, _classnames.default)(`${baseClassName}__line`, lineProps === null || lineProps === void 0 ? void 0 : lineProps.className)
+}))));
+
+var _default = SkeletonText;
+exports.default = _default;

package/cjs/components/Skeleton/SkeletonText.stories.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinesCount = exports.Custom = exports.Basic = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SkeletonText = _interopRequireDefault(require("./SkeletonText"));
+
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+const Basic = args => /*#__PURE__*/_react.default.createElement(_SkeletonText.default, args);
+
+exports.Basic = Basic;
+Basic.args = {};
+
+const LinesCount = args => /*#__PURE__*/_react.default.createElement(Basic, args);
+
+exports.LinesCount = LinesCount;
+LinesCount.args = {
+  lines: 5
+};
+
+const Custom = args => /*#__PURE__*/_react.default.createElement(Basic, args);
+
+exports.Custom = Custom;
+Custom.args = {
+  lines: 5,
+  lineProps: {
+    width: 200
+  }
+};

package/cjs/components/Skeleton/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SkeletonTabs", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonTabs.default;
+  }
+});
+Object.defineProperty(exports, "SkeletonText", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonText.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Skeleton.default;
+  }
+});
+
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+
+var _SkeletonText = _interopRequireDefault(require("./SkeletonText"));
+
+var _SkeletonTabs = _interopRequireDefault(require("./SkeletonTabs"));

package/cjs/components/Spinner/Spinner.js

@@ -17,8 +17,8 @@ var _constants = require("../../constants");
 
 // Copyright 1999-2019. Plesk International GmbH. All rights reserved.
 
-/**
- * `Spinner` component.
+/**
+ * `Spinner` component.
  */
 const Spinner = ({
   baseClassName = `${_constants.CLS_PREFIX}spinner`,