@growth-angels/ds-core 1.15.0 → 1.16.0

package/dist/organisms/Carousel/Carousel.js

@@ -3,22 +3,27 @@ import { Button } from "../../atoms/atoms";
 import { useBreakpointObserver } from "../../hooks/useBreakPointObserver";
 import { useReactAdapter } from "../../hooks/useReactAdaptater";
 export const Carousel = (props) => {
-    const { children, slidesPerView = { xs: 1, sm: 1, md: 2, lg: 3, xl: 4, xxl: 5 }, spaceBetween = 20, navigation, pagination, context, hasPagination, hasNavigation, loop = false, } = props;
+    const { children, slidesPerView: slidesPerViewDefault, spaceBetween = 20, navigation, pagination, context, hasPagination, hasNavigation, loop = false, } = props;
+    const slidesPerView = { xs: 1, ...slidesPerViewDefault };
     const { useEffect, useState, useRef, Children } = useReactAdapter();
     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 totalSlides = slides.length;
+    const calculatePages = (slidesPerView = 0) => {
+        let pagesArr = [];
+        for (let i = slidesPerView; i < totalSlides; i++) {
+            pagesArr.push({});
+        }
+        return pagesArr.length + 1;
     };
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
     const [activeDOMIndex, setActiveDOMIndex] = useState(0);
     const [isAtEnd, setIsAtEnd] = useState(false);
     const [isAtStart, setIsAtStart] = useState(true);
     const [totalPages, setTotalPages] = useState(0);
-    const [isOverflowing, setIsOverflowing] = useState(false);
-    const displayNavigation = hasNavigation && (loop || isOverflowing);
-    const displayPagination = hasPagination && (loop || isOverflowing);
+    const displayNavigation = hasNavigation;
+    const displayPagination = hasPagination;
     useEffect(() => {
         if (loop) {
             setIsAtStart(false);
@@ -33,8 +38,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(currentSlidesPerView));
+    }, [breakpoint, slidesPerView, slides.length]);
     useEffect(() => {
         const track = trackRef.current;
         if (!track)
@@ -76,18 +81,6 @@ export const Carousel = (props) => {
         }
         return () => track.removeEventListener("scroll", handleScroll);
     }, [slides.length, loop]);
-    // Check if the slides overflow the container
-    useEffect(() => {
-        const track = trackRef.current;
-        if (!track)
-            return;
-        const handleResize = () => {
-            setIsOverflowing(track.scrollWidth > track.clientWidth);
-        };
-        handleResize(); // Initial check
-        window.addEventListener("resize", handleResize);
-        return () => window.removeEventListener("resize", handleResize);
-    }, [loop]);
     const style = Object.fromEntries(Object.entries(slidesPerView).map(([key, value]) => [`--ga-ds-slides-per-view-${key}`, `${value}`]));
     const goPrev = () => {
         if (!trackRef.current)

package/package.json

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

package/src/organisms/Carousel/Carousel.tsx

@@ -6,7 +6,7 @@ import { CarouselProps } from "./Carousel.types"
 export const Carousel = (props: CarouselProps) => {
   const {
     children,
-    slidesPerView = { xs: 1, sm: 1, md: 2, lg: 3, xl: 4, xxl: 5 },
+    slidesPerView: slidesPerViewDefault,
     spaceBetween = 20,
     navigation,
     pagination,
@@ -15,13 +15,18 @@ export const Carousel = (props: CarouselProps) => {
     hasNavigation,
     loop = false,
   } = props
+  const slidesPerView = { xs: 1, ...slidesPerViewDefault }
   const { useEffect, useState, useRef, Children } = useReactAdapter()
   const trackRef = useRef<HTMLDivElement>(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 totalSlides = slides.length
+  const calculatePages = (slidesPerView = 0) => {
+    let pagesArr = []
+    for (let i = slidesPerView; i < totalSlides; i++) {
+      pagesArr.push({})
+    }
+    return pagesArr.length + 1
   }
 
   const [activeSlideIndex, setActiveSlideIndex] = useState(0)
@@ -29,10 +34,9 @@ export const Carousel = (props: CarouselProps) => {
   const [isAtEnd, setIsAtEnd] = useState(false)
   const [isAtStart, setIsAtStart] = useState(true)
   const [totalPages, setTotalPages] = useState(0)
-  const [isOverflowing, setIsOverflowing] = useState(false)
 
-  const displayNavigation = hasNavigation && (loop || isOverflowing)
-  const displayPagination = hasPagination && (loop || isOverflowing)
+  const displayNavigation = hasNavigation
+  const displayPagination = hasPagination
 
   useEffect(() => {
     if (loop) {
@@ -51,8 +55,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(currentSlidesPerView))
+  }, [breakpoint, slidesPerView, slides.length])
 
   useEffect(() => {
     const track = trackRef.current
@@ -99,21 +103,6 @@ export const Carousel = (props: CarouselProps) => {
     return () => track.removeEventListener("scroll", handleScroll)
   }, [slides.length, loop])
 
-  // Check if the slides overflow the container
-  useEffect(() => {
-    const track = trackRef.current
-    if (!track) return
-
-    const handleResize = () => {
-      setIsOverflowing(track.scrollWidth > track.clientWidth)
-    }
-
-    handleResize() // Initial check
-
-    window.addEventListener("resize", handleResize)
-    return () => window.removeEventListener("resize", handleResize)
-  }, [loop])
-
   const style = Object.fromEntries(
     Object.entries(slidesPerView).map(([key, value]) => [`--ga-ds-slides-per-view-${key}`, `${value}`])
   )

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;
     }
   }