@growth-angels/ds-core 1.15.0 → 1.15.1

package/dist/organisms/Carousel/Carousel.js

@@ -8,8 +8,10 @@ export const Carousel = (props) => {
     const trackRef = useRef(null);
     const isNavigatingRef = useRef(false);
     const slides = Children.toArray(children);
-    const calculatePages = (totalSlides = 0, slidesPerView = 0, step = 1) => {
-        return Math.max(1, Math.ceil((totalSlides - slidesPerView) / step) + 1);
+    const calculatePages = (totalSlides = 0, slidesPerView = 0) => {
+        if (slidesPerView <= 0)
+            return 1;
+        return Math.ceil(totalSlides / slidesPerView);
     };
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
     const [activeDOMIndex, setActiveDOMIndex] = useState(0);
@@ -33,8 +35,8 @@ export const Carousel = (props) => {
     useEffect(() => {
         const currentSlidesPerView = slidesPerView[breakpoint] ??
             (typeof slidesPerView === "number" ? slidesPerView : slidesPerView.xl ?? 1);
-        setTotalPages(calculatePages(slides.length, currentSlidesPerView, 1));
-    }, [breakpoint, slidesPerView]);
+        setTotalPages(calculatePages(slides.length, currentSlidesPerView));
+    }, [breakpoint, slidesPerView, slides.length]);
     useEffect(() => {
         const track = trackRef.current;
         if (!track)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-angels/ds-core",
-  "version": "1.15.0",
+  "version": "1.15.1",
   "description": "Design system by Growth Angels",
   "license": "MIT",
   "private": false,

package/src/organisms/Carousel/Carousel.tsx

@@ -20,8 +20,9 @@ export const Carousel = (props: CarouselProps) => {
   const isNavigatingRef = useRef(false)
   const slides = Children.toArray(children)
 
-  const calculatePages = (totalSlides = 0, slidesPerView = 0, step = 1) => {
-    return Math.max(1, Math.ceil((totalSlides - slidesPerView) / step) + 1)
+  const calculatePages = (totalSlides = 0, slidesPerView = 0) => {
+    if (slidesPerView <= 0) return 1
+    return Math.ceil(totalSlides / slidesPerView)
   }
 
   const [activeSlideIndex, setActiveSlideIndex] = useState(0)
@@ -51,8 +52,8 @@ export const Carousel = (props: CarouselProps) => {
       (slidesPerView as Record<string, number>)[breakpoint] ??
       (typeof slidesPerView === "number" ? slidesPerView : (slidesPerView as any).xl ?? 1)
 
-    setTotalPages(calculatePages(slides.length, currentSlidesPerView, 1))
-  }, [breakpoint, slidesPerView])
+    setTotalPages(calculatePages(slides.length, currentSlidesPerView))
+  }, [breakpoint, slidesPerView, slides.length])
 
   useEffect(() => {
     const track = trackRef.current

package/src/organisms/Tabs/Tabs.scss

@@ -1,10 +1,15 @@
 .ga-ds-tabs {
   $this: &;
-
+  &__list-wrapper {
+    max-width: 100%;
+    overflow: hidden;
+  }
   &__list {
     overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
     -webkit-overflow-scrolling: touch;
-    scrollbar-width: none; // Firefox
+    max-width: 100%;
     &::-webkit-scrollbar {
       display: none; // Safari and Chrome
     }
@@ -12,6 +17,7 @@
   &__list-container {
     display: flex;
     flex-wrap: nowrap;
+    width: fit-content;
 
     #{$this}__tab {
       background: none;
@@ -19,7 +25,7 @@
       font-size: inherit;
       padding: inherit;
       cursor: pointer;
-      width: fit-content;
+      width: max-content;
     }
   }