@plesk/ui-library 3.38.0 → 3.38.1

package/esm/components/Carousel/Carousel.js

@@ -24,7 +24,9 @@ const calcWidths = node => {
  */
 class Carousel extends Component {
   constructor() {
+    var _this;
     super(...arguments);
+    _this = this;
     _defineProperty(this, "state", {
       showControls: false,
       current: 0,
@@ -77,9 +79,14 @@ class Carousel extends Component {
         showControls: (bounds?.width || 0) < totalWidth
       });
     });
+    _defineProperty(this, "getChildrenCount", () => {
+      const {
+        children
+      } = this.props;
+      return Array.isArray(children) ? children?.reduce((prev, curr) => Array.isArray(curr) ? prev + curr.length : prev + 1, 0) : 0;
+    });
     _defineProperty(this, "renderNavigationDots", () => {
       const {
-        children,
         baseClassName,
         dots,
         items
@@ -90,18 +97,17 @@ class Carousel extends 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__*/_jsx("div", {
         className: `${baseClassName}__dots`,
         children: Array.from({
-          length: pages
+          length: childrenCount
         }).map((_, idx) => /*#__PURE__*/_jsx("div", {
           role: "button",
-          className: classNames(`${baseClassName}__dots--dot`, current === idx ? `${baseClassName}__dots--dot-current` : null),
+          className: classNames(`${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
@@ -148,19 +154,23 @@ class Carousel extends Component {
         })]
       });
     });
-    _defineProperty(this, "renderSliderItems", () => {
+    _defineProperty(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 Children.map(children, item => item && /*#__PURE__*/_jsx("div", {
-        className: `${baseClassName}__item`,
+      return Children.map(children, (item, idx) => item && /*#__PURE__*/_jsx("div", {
+        className: classNames(`${baseClassName}__item`, showCurrent && idx === current ? `${baseClassName}__item--current` : null),
         style: {
           width
         },
@@ -181,23 +191,6 @@ 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
@@ -231,7 +224,7 @@ class Carousel extends Component {
     if (current >= slideWidths.length) {
       current = 0;
     }
-    this.props.onSlide?.(next);
+    this.props.onSlide?.(current);
     this.setState({
       current,
       next,
@@ -317,7 +310,7 @@ class Carousel extends Component {
               children: [showControls && this.renderSliderItems(), /*#__PURE__*/_jsx("div", {
                 className: `${baseClassName}__genuine-slides`,
                 ref: this.genuineRef,
-                children: this.renderSliderItems()
+                children: this.renderSliderItems(true)
               }), showControls && this.renderSliderItems()]
             }), this.renderNavigationArrows()]
           }), this.renderNavigationDots()]

package/esm/index.js

@@ -1,6 +1,6 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 import svg4everybody from 'svg4everybody';
-const version = "3.38.0";
+const version = "3.38.1";
 export * from './publicPath';
 export { version };
 export * from './utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plesk/ui-library",
-  "version": "3.38.0",
+  "version": "3.38.1",
   "description": "Plesk UI Library",
   "main": "index.js",
   "module": "esm/index.js",