@plesk/ui-library 3.36.0 → 3.37.0

package/esm/components/Card/helpers.js

@@ -6,7 +6,6 @@ const loadImage = (src, _ref) => {
     onFailure
   } = _ref;
   const image = new Image();
-  image.loading = 'lazy';
   image.onload = onSuccess;
   image.onerror = onFailure;
   image.src = src;

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';
@@ -23,8 +23,8 @@ const calcWidths = node => {
  * @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/ComboBox/ComboBoxOption.js

@@ -4,7 +4,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `ComboBoxOption` is a part of [ComboBox](#!/ComboBox) component.
  * @since 2.6.0
- */ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ */
+// 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/Drawer/DrawerProgress.js

@@ -79,7 +79,7 @@ class DrawerProgress extends Component {
     } = this.state;
     if (prevState.status !== STATUS_DONE && status === STATUS_DONE) {
       window.clearTimeout(this.closeTimeout);
-      if (autoCloseTimeout !== undefined) {
+      if (autoCloseTimeout !== null) {
         this.closeTimeout = window.setTimeout(this.handleClose, autoCloseTimeout);
       }
     }