@plesk/ui-library 3.36.1 → 3.37.0

package/esm/components/Carousel/Carousel.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 import { isRtl } from '../../utils';
-import { Component, createRef } from 'react';
+import { Children, Component, createRef } from 'react';
 import classNames from 'classnames';
 import Measure from 'react-measure';
 import { CLS_PREFIX } from '../../constants';
@@ -17,14 +17,14 @@ const calcWidths = node => {
     totalWidth
   };
 };
-/**
- * Carousel component is used for optimizing page space by displaying only some parts
- * of entire content in a cyclic view.
- * @since 0.0.42
+/**
+ * Carousel component is used for optimizing page space by displaying only some parts
+ * of entire content in a cyclic view.
+ * @since 0.0.42
  */
 class Carousel extends Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super(...arguments);
     _defineProperty(this, "state", {
       showControls: false,
       current: 0,
@@ -34,21 +34,145 @@ class Carousel extends Component {
       totalWidth: 0
     });
     _defineProperty(this, "speed", 500);
-    _defineProperty(this, "playSpeed", 5000);
     _defineProperty(this, "isRtl", void 0);
     _defineProperty(this, "playTimer", null);
     _defineProperty(this, "movingCallback", null);
     _defineProperty(this, "rootRef", /*#__PURE__*/createRef());
     _defineProperty(this, "genuineRef", /*#__PURE__*/createRef());
-    this.handlePrevClick = this.handlePrevClick.bind(this);
-    this.handleNextClick = this.handleNextClick.bind(this);
-    this.stop = this.stop.bind(this);
-    this.play = this.play.bind(this);
-    this.handleResize = this.handleResize.bind(this);
+    _defineProperty(this, "handlePrevClick", () => {
+      this.stop();
+      this.setCurrentSlide(this.state.current - 1);
+    });
+    _defineProperty(this, "handleNextClick", () => {
+      this.stop();
+      this.setCurrentSlide(this.state.current + 1);
+    });
+    _defineProperty(this, "play", () => {
+      this.playTimer = setTimeout(() => {
+        this.setCurrentSlide(this.state.current + 1);
+        this.play();
+      }, this.props.autoplayInterval);
+    });
+    _defineProperty(this, "stop", () => {
+      if (this.playTimer) {
+        clearTimeout(this.playTimer);
+        this.playTimer = null;
+      }
+    });
+    _defineProperty(this, "handleResize", _ref => {
+      let {
+        bounds
+      } = _ref;
+      const node = this.genuineRef.current;
+      if (!node) {
+        return;
+      }
+      const {
+        slideWidths,
+        totalWidth
+      } = calcWidths(node);
+      this.setState({
+        slideWidths,
+        totalWidth,
+        showControls: (bounds?.width || 0) < totalWidth
+      });
+    });
+    _defineProperty(this, "renderNavigationDots", () => {
+      const {
+        children,
+        baseClassName,
+        dots,
+        items
+      } = this.props;
+      if (!dots || !items) {
+        return null;
+      }
+      const {
+        current
+      } = this.state;
+      const childrenCount = children?.length ?? 1;
+      const pages = Math.ceil(childrenCount / items);
+      if (pages <= 1) {
+        return null;
+      }
+      return /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__dots`,
+        children: Array.from({
+          length: pages
+        }).map((_, idx) => /*#__PURE__*/_jsx("div", {
+          role: "button",
+          className: classNames(`${baseClassName}__dots--dot`, current === idx ? `${baseClassName}__dots--dot-current` : null),
+          "aria-current": current === idx,
+          onClick: () => this.setCurrentSlide(idx)
+          // eslint-disable-next-line react/no-array-index-key
+          ,
+          children: /*#__PURE__*/_jsx(Icon, {
+            name: "dot-big"
+          })
+        }, idx))
+      });
+    });
+    _defineProperty(this, "renderNavigationArrows", () => {
+      const {
+        baseClassName,
+        arrows
+      } = this.props;
+      const {
+        showControls
+      } = this.state;
+      if (!arrows || !showControls) {
+        return null;
+      }
+      return /*#__PURE__*/_jsxs("div", {
+        className: `${baseClassName}__controls`,
+        children: [/*#__PURE__*/_jsx("button", {
+          type: "button",
+          "aria-label": "previous slide",
+          className: classNames(`${baseClassName}__control`, `${baseClassName}__control--previous`),
+          onClick: this.handlePrevClick,
+          children: /*#__PURE__*/_jsx(Icon, {
+            name: "chevron-left",
+            flipHorizontal: this.isRtl,
+            className: `${baseClassName}__control-icon`
+          })
+        }), /*#__PURE__*/_jsx("button", {
+          type: "button",
+          "aria-label": "next slide",
+          className: classNames(`${baseClassName}__control`, `${baseClassName}__control--next`),
+          onClick: this.handleNextClick,
+          children: /*#__PURE__*/_jsx(Icon, {
+            name: "chevron-right",
+            flipHorizontal: this.isRtl,
+            className: `${baseClassName}__control-icon`
+          })
+        })]
+      });
+    });
+    _defineProperty(this, "renderSliderItems", () => {
+      const {
+        children,
+        baseClassName,
+        items
+      } = this.props;
+      const childrenCount = children?.length ?? 1;
+      let width = '';
+      if (items) {
+        width = `calc(100% / ${Math.min(childrenCount, items)})`;
+      }
+      return Children.map(children, item => item && /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__item`,
+        style: {
+          width
+        },
+        children: item
+      }));
+    });
   }
   componentDidMount() {
     this.isRtl = isRtl();
-    this.play();
+    if (this.props.autoplay) {
+      this.play();
+    }
   }
   componentDidUpdate() {
     if (!this.rootRef.current || !this.genuineRef.current) {
@@ -57,6 +181,23 @@ class Carousel extends Component {
     const {
       width
     } = this.rootRef.current.getBoundingClientRect();
+    const {
+      items,
+      children
+    } = this.props;
+    if (items) {
+      const slideItems = items;
+      const childrenCount = children?.length ?? 1;
+      const totalWidth = childrenCount * (width / slideItems);
+      if (this.state.totalWidth !== totalWidth) {
+        this.setState({
+          slideWidths: new Array(childrenCount).fill(width),
+          totalWidth,
+          showControls: childrenCount > slideItems
+        });
+      }
+      return;
+    }
     const {
       slideWidths,
       totalWidth
@@ -75,26 +216,6 @@ class Carousel extends Component {
       clearTimeout(this.movingCallback);
     }
   }
-  handlePrevClick() {
-    this.stop();
-    this.setCurrentSlide(this.state.current - 1);
-  }
-  handleNextClick() {
-    this.stop();
-    this.setCurrentSlide(this.state.current + 1);
-  }
-  play() {
-    this.playTimer = setTimeout(() => {
-      this.setCurrentSlide(this.state.current + 1);
-      this.play();
-    }, this.playSpeed);
-  }
-  stop() {
-    if (this.playTimer) {
-      clearTimeout(this.playTimer);
-      this.playTimer = null;
-    }
-  }
   setCurrentSlide(next) {
     const {
       slideWidths,
@@ -110,6 +231,7 @@ class Carousel extends Component {
     if (current >= slideWidths.length) {
       current = 0;
     }
+    this.props.onSlide?.(next);
     this.setState({
       current,
       next,
@@ -122,25 +244,10 @@ class Carousel extends Component {
       });
     }, this.speed);
   }
-  handleResize(_ref) {
-    let {
-      bounds
-    } = _ref;
-    const node = this.genuineRef.current;
-    if (!node) {
-      return;
-    }
-    const {
-      slideWidths,
-      totalWidth
-    } = calcWidths(node);
-    this.setState({
-      slideWidths,
-      totalWidth,
-      showControls: (bounds?.width || 0) < totalWidth
-    });
-  }
   listStyle() {
+    const {
+      arrows
+    } = this.props;
     const {
       current,
       next,
@@ -149,7 +256,12 @@ class Carousel extends Component {
       totalWidth
     } = this.state;
     const moveTo = moving ? next : current;
-    let x = -totalWidth + 26;
+    let x = -totalWidth;
+
+    // navigation arrows width
+    if (arrows) {
+      x += 26;
+    }
     if (moveTo < 0) {
       for (let i = moveTo; i < 0; i++) {
         x += slideWidths[i + slideWidths.length];
@@ -177,6 +289,12 @@ class Carousel extends Component {
       baseClassName,
       className,
       children,
+      autoplay,
+      autoplayInterval,
+      items,
+      onSlide,
+      dots,
+      arrows,
       ...props
     } = this.props;
     return /*#__PURE__*/_jsx(Measure, {
@@ -192,35 +310,17 @@ class Carousel extends Component {
           className: classNames(baseClassName, className),
           ...props,
           children: [/*#__PURE__*/_jsxs("div", {
-            className: `${baseClassName}__slides`,
-            style: showControls ? this.listStyle() : undefined,
-            children: [showControls && children, /*#__PURE__*/_jsx("div", {
-              className: `${baseClassName}__genuine-slides`,
-              ref: this.genuineRef,
-              children: children
-            }), showControls && children]
-          }), showControls && /*#__PURE__*/_jsxs("div", {
-            className: `${baseClassName}__controls`,
-            children: [/*#__PURE__*/_jsx("button", {
-              type: "button",
-              className: classNames(`${baseClassName}__control`, `${baseClassName}__control--previous`),
-              onClick: this.handlePrevClick,
-              children: /*#__PURE__*/_jsx(Icon, {
-                name: "chevron-left",
-                flipHorizontal: this.isRtl,
-                className: `${baseClassName}__control-icon`
-              })
-            }), /*#__PURE__*/_jsx("button", {
-              type: "button",
-              className: classNames(`${baseClassName}__control`, `${baseClassName}__control--next`),
-              onClick: this.handleNextClick,
-              children: /*#__PURE__*/_jsx(Icon, {
-                name: "chevron-right",
-                flipHorizontal: this.isRtl,
-                className: `${baseClassName}__control-icon`
-              })
-            })]
-          })]
+            className: `${baseClassName}__wrap`,
+            children: [/*#__PURE__*/_jsxs("div", {
+              className: `${baseClassName}__slides`,
+              style: showControls ? this.listStyle() : undefined,
+              children: [showControls && this.renderSliderItems(), /*#__PURE__*/_jsx("div", {
+                className: `${baseClassName}__genuine-slides`,
+                ref: this.genuineRef,
+                children: this.renderSliderItems()
+              }), showControls && this.renderSliderItems()]
+            }), this.renderNavigationArrows()]
+          }), this.renderNavigationDots()]
         });
       }
     });
@@ -228,6 +328,11 @@ class Carousel extends Component {
 }
 _defineProperty(Carousel, "defaultProps", {
   children: null,
+  arrows: true,
+  dots: false,
+  autoplay: true,
+  autoplayInterval: 5000,
+  onSlide: null,
   className: null,
   baseClassName: `${CLS_PREFIX}carousel`
 });

package/esm/components/Checkbox/Checkbox.js

@@ -5,9 +5,9 @@ import { CLS_PREFIX } from '../../constants';
 import Tooltip from '../Tooltip';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * `Checkbox` component is used for turning an option on or off and selecting or deselecting an item.
- * @since 0.0.55
+/**
+ * `Checkbox` component is used for turning an option on or off and selecting or deselecting an item.
+ * @since 0.0.55
  */
 const Checkbox = _ref => {
   let {

package/esm/components/CodeEditor/CodeEditor.js

@@ -7,9 +7,9 @@ import { isRtl } from '../../utils';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * `CodeEditor` component is used for editing text as code with proper color highlighting according to selected programming language.
- * @since 0.0.61
+/**
+ * `CodeEditor` component is used for editing text as code with proper color highlighting according to selected programming language.
+ * @since 0.0.61
  */
 class CodeEditor extends Component {
   constructor() {

package/esm/components/Columns/Column.js

@@ -7,9 +7,9 @@ import VerticalContext from '../VerticalContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 const normalize = value => String(Number(value)) === String(value) ? `${value}px` : value;
 
-/**
- * `Column` component is a part of [Columns](#!/Columns).
- * @since 2.6.0
+/**
+ * `Column` component is a part of [Columns](#!/Columns).
+ * @since 2.6.0
  */
 const Column = _ref => {
   let {

package/esm/components/Columns/Columns.js

@@ -6,9 +6,9 @@ import Measure from 'react-measure';
 import { CLS_PREFIX } from '../../constants';
 import VerticalContext, { VERTICAL_BREAKPOINT } from '../VerticalContext';
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * `Columns` component is used for creating of multi-column layouts.
- * @since 2.6.0
+/**
+ * `Columns` component is used for creating of multi-column layouts.
+ * @since 2.6.0
  */
 const Columns = _ref => {
   let {

package/esm/components/ComboBox/ComboBox.js

@@ -36,10 +36,10 @@ const collect = function (children) {
     options
   };
 };
-/**
- * `ComboBox` component is a combination of [Select](#!/Select) and [Input](#!/Input)
- *  which allows to either enter a value directly into the field or choose from a list of existing options.
- * @since 2.6.0
+/**
+ * `ComboBox` component is a combination of [Select](#!/Select) and [Input](#!/Input)
+ *  which allows to either enter a value directly into the field or choose from a list of existing options.
+ * @since 2.6.0
  */
 const ComboBox = _ref => {
   let {

package/esm/components/ComboBox/ComboBoxOption.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-/**
- * `ComboBoxOption` is a part of [ComboBox](#!/ComboBox) component.
- * @since 2.6.0
- */ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+/**
+ * `ComboBoxOption` is a part of [ComboBox](#!/ComboBox) component.
+ * @since 2.6.0
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const ComboBoxOption = _props => {
   // styleguidist doesn't show Props & Methods if component renders nothing
   // eslint-disable-next-line no-constant-condition

package/esm/components/ConsoleOutput/ConsoleOutput.js

@@ -9,9 +9,9 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const scrollToBottom = el => {
   el.scrollTop = el.scrollHeight;
 };
-/**
- * `ConsoleOutput` component is used for showing dynamically updating data from console output.
- * @since 0.0.35
+/**
+ * `ConsoleOutput` component is used for showing dynamically updating data from console output.
+ * @since 0.0.35
  */
 class ConsoleOutput extends PureComponent {
   constructor() {

package/esm/components/ContentLoader/ContentLoader.js

@@ -25,9 +25,9 @@ const getLoader = loader => {
   };
 };
 
-/**
- * `ContentLoader` component is used as placeholder which indicates that the system is loading requested content.
- * @since 1.1.0
+/**
+ * `ContentLoader` component is used as placeholder which indicates that the system is loading requested content.
+ * @since 1.1.0
  */
 const ContentLoader = _ref => {
   let {

package/esm/components/Cuttable/Cuttable.js

@@ -9,9 +9,9 @@ import Translate from '../Translate';
 import Link from '../Link';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * `Cuttable` component is used for showing and hiding part of content.
- * @since 0.0.42
+/**
+ * `Cuttable` component is used for showing and hiding part of content.
+ * @since 0.0.42
  */
 class Cuttable extends Component {
   constructor() {

package/esm/components/Dialog/Dialog.js

@@ -15,9 +15,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const isProps = value => value && typeof value === 'object' && ! /*#__PURE__*/isValidElement(value);
 
-/**
- * `Dialog` is a modal window that asks users to make a decision or enter additional information.
- * @since 0.0.68
+/**
+ * `Dialog` is a modal window that asks users to make a decision or enter additional information.
+ * @since 0.0.68
  */
 const Dialog = _ref => {
   let {

package/esm/components/Drawer/Drawer.js

@@ -31,10 +31,10 @@ const defaultProps = {
   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).
- * @since 0.0.65
+/**
+ * `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).
+ * @since 0.0.65
  */
 const Drawer = _ref => {
   let {

package/esm/components/Dropdown/Dropdown.js

@@ -119,11 +119,11 @@ const useEnhancedMenu = (menu, _ref2) => {
   };
 };
 
-/**
- * `Dropdown` component is a [Button](#!/Button) that opens a drop-down (nested) [Menu](#!/Menu).
- * Use dropdown for grouping actions that are not used often or are less important than others -- in other words,
- * for stuff that you don't want to show users all the time, especially if you have limited screen space.
- * @since 0.0.57
+/**
+ * `Dropdown` component is a [Button](#!/Button) that opens a drop-down (nested) [Menu](#!/Menu).
+ * Use dropdown for grouping actions that are not used often or are less important than others -- in other words,
+ * for stuff that you don't want to show users all the time, especially if you have limited screen space.
+ * @since 0.0.57
  */
 const Dropdown = _ref3 => {
   let {

package/esm/components/ExtendedStatusMessage/ExtendedStatusMessage.js

@@ -5,10 +5,10 @@ import ContentLoader from '../ContentLoader';
 import { CLS_PREFIX } from '../../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * `ExtendedStatusMessage` component is similar to regular [StatusMessage](#!/StatusMessage)
- * but it is used when the message itself is the primary content on the page.
- * @since 0.0.35
+/**
+ * `ExtendedStatusMessage` component is similar to regular [StatusMessage](#!/StatusMessage)
+ * but it is used when the message itself is the primary content on the page.
+ * @since 0.0.35
  */
 const ExtendedStatusMessage = _ref => {
   let {

package/esm/components/ExtendedStatusMessage/ExtendedStatusMessageActions.js

@@ -3,9 +3,9 @@
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * `ExtendedStatusMessageActions` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
- * @since 0.0.35
+/**
+ * `ExtendedStatusMessageActions` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
+ * @since 0.0.35
  */
 
 const ExtendedStatusMessageActions = _ref => {

package/esm/components/ExtendedStatusMessage/ExtendedStatusMessageDescription.js

@@ -3,9 +3,9 @@
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * `ExtendedStatusMessageDescription` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
- * @since 0.0.35
+/**
+ * `ExtendedStatusMessageDescription` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
+ * @since 0.0.35
  */
 
 const ExtendedStatusMessageDescription = _ref => {

package/esm/components/ExtendedStatusMessage/ExtendedStatusMessageSeparator.js

@@ -2,9 +2,9 @@
 
 import classNames from 'classnames';
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * `ExtendedStatusMessageSeparator` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
- * @since 0.0.35
+/**
+ * `ExtendedStatusMessageSeparator` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
+ * @since 0.0.35
  */
 
 const ExtendedStatusMessageSeparator = _ref => {

package/esm/components/ExtendedStatusMessage/ExtendedStatusMessageTitle.js

@@ -4,9 +4,9 @@ import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Heading from '../Heading';
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * `ExtendedStatusMessageTitle` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
- * @since 0.0.35
+/**
+ * `ExtendedStatusMessageTitle` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
+ * @since 0.0.35
  */
 
 const ExtendedStatusMessageTitle = _ref => {

package/esm/components/Figure/Figure.js

@@ -4,9 +4,9 @@ import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Figure component.
- * @since 0.0.42
+/**
+ * Figure component.
+ * @since 0.0.42
  */
 const Figure = _ref => {
   let {

package/esm/components/Form/Form.js

@@ -405,9 +405,9 @@ const RefForwardingForm = /*#__PURE__*/forwardRef((props, ref) => {
   });
 });
 RefForwardingForm.displayName = 'Form';
-/**
- * `Form` component is used for entering and submitting of user data.
- * [More details about designing of forms.](#!/Good%20Forms)
- * @since 0.0.54
+/**
+ * `Form` component is used for entering and submitting of user data.
+ * [More details about designing of forms.](#!/Good%20Forms)
+ * @since 0.0.54
  */
 export default RefForwardingForm;