@plesk/ui-library 3.38.0 → 3.38.1

package/cjs/components/Carousel/Carousel.js

@@ -30,7 +30,9 @@ const calcWidths = node => {
  */
 class Carousel extends _react.Component {
   constructor() {
+    var _this;
     super(...arguments);
+    _this = this;
     (0, _defineProperty2.default)(this, "state", {
       showControls: false,
       current: 0,
@@ -83,9 +85,14 @@ class Carousel extends _react.Component {
         showControls: (bounds?.width || 0) < totalWidth
       });
     });
+    (0, _defineProperty2.default)(this, "getChildrenCount", () => {
+      const {
+        children
+      } = this.props;
+      return Array.isArray(children) ? children?.reduce((prev, curr) => Array.isArray(curr) ? prev + curr.length : prev + 1, 0) : 0;
+    });
     (0, _defineProperty2.default)(this, "renderNavigationDots", () => {
       const {
-        children,
         baseClassName,
         dots,
         items
@@ -96,18 +103,17 @@ class Carousel extends _react.Component {
       const {
         current
       } = this.state;
-      const childrenCount = children?.length ?? 1;
-      const pages = Math.ceil(childrenCount / items);
-      if (pages <= 1) {
+      const childrenCount = this.getChildrenCount();
+      if (childrenCount <= 1) {
         return null;
       }
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: `${baseClassName}__dots`,
         children: Array.from({
-          length: pages
+          length: childrenCount
         }).map((_, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           role: "button",
-          className: (0, _classnames.default)(`${baseClassName}__dots--dot`, current === idx ? `${baseClassName}__dots--dot-current` : null),
+          className: (0, _classnames.default)(`${baseClassName}__dot`, current === idx ? `${baseClassName}__dot--current` : null),
           "aria-current": current === idx,
           onClick: () => this.setCurrentSlide(idx)
           // eslint-disable-next-line react/no-array-index-key
@@ -154,19 +160,23 @@ class Carousel extends _react.Component {
         })]
       });
     });
-    (0, _defineProperty2.default)(this, "renderSliderItems", () => {
+    (0, _defineProperty2.default)(this, "renderSliderItems", function () {
+      let showCurrent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       const {
         children,
         baseClassName,
         items
-      } = this.props;
-      const childrenCount = children?.length ?? 1;
+      } = _this.props;
+      const {
+        current
+      } = _this.state;
+      const childrenCount = _this.getChildrenCount();
       let width = '';
       if (items) {
-        width = `calc(100% / ${Math.min(childrenCount, items)})`;
+        width = `${Math.ceil(100 / Math.min(childrenCount, items))}%`;
       }
-      return _react.Children.map(children, item => item && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: `${baseClassName}__item`,
+      return _react.Children.map(children, (item, idx) => item && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames.default)(`${baseClassName}__item`, showCurrent && idx === current ? `${baseClassName}__item--current` : null),
         style: {
           width
         },
@@ -187,23 +197,6 @@ class Carousel extends _react.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
@@ -237,7 +230,7 @@ class Carousel extends _react.Component {
     if (current >= slideWidths.length) {
       current = 0;
     }
-    this.props.onSlide?.(next);
+    this.props.onSlide?.(current);
     this.setState({
       current,
       next,
@@ -323,7 +316,7 @@ class Carousel extends _react.Component {
               children: [showControls && this.renderSliderItems(), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                 className: `${baseClassName}__genuine-slides`,
                 ref: this.genuineRef,
-                children: this.renderSliderItems()
+                children: this.renderSliderItems(true)
               }), showControls && this.renderSliderItems()]
             }), this.renderNavigationArrows()]
           }), this.renderNavigationDots()]

package/cjs/index.js

@@ -46,5 +46,5 @@ Object.keys(_components).forEach(function (key) {
   });
 });
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-const version = exports.version = "3.38.0";
+const version = exports.version = "3.38.1";
 (0, _svg4everybody.default)();