@growth-angels/ds-core 1.14.2 → 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/dist/organisms/Tabs/Tabs.js

@@ -8,7 +8,7 @@ export const Tabs = ({ tabs, children, extraClassNames, edit }) => {
     if (extraClassNames) {
         classes.push(...extraClassNames);
     }
-    return (_jsxs("div", { className: classes.join(" "), children: [_jsx("div", { className: "ga-ds-tabs__list", role: "tablist", children: tabs.map((tab, index) => (_jsx("button", { ref: (el) => (tabsRef.current[index] = el), role: "tab", "aria-selected": activeTab === tab.id, "aria-controls": `ga-ds-tabpanel-${tab.id}`, id: `ga-ds-tab-${tab.id}`, tabIndex: activeTab === tab.id ? 0 : -1, className: `ga-ds-tabs__tab ${activeTab === tab.id ? "ga-ds-tabs__tab--active" : ""}`, onClick: () => setActiveTab(tab.id), children: tab.label }, tab.id))) }), _jsx("div", { className: "ga-ds-tabs__panels", children: !edit
+    return (_jsxs("div", { className: classes.join(" "), children: [_jsx("div", { className: "ga-ds-tabs__list", role: "tablist", children: _jsx("div", { className: "ga-ds-tabs__list-container", children: tabs.map((tab, index) => (_jsx("button", { ref: (el) => (tabsRef.current[index] = el), role: "tab", "aria-selected": activeTab === tab.id, "aria-controls": `ga-ds-tabpanel-${tab.id}`, id: `ga-ds-tab-${tab.id}`, tabIndex: activeTab === tab.id ? 0 : -1, className: `ga-ds-tabs__tab ${activeTab === tab.id ? "ga-ds-tabs__tab--active" : ""}`, onClick: () => setActiveTab(tab.id), children: tab.label }, tab.id))) }) }), _jsx("div", { className: "ga-ds-tabs__panels", children: !edit
                     ? Children.toArray(children).map((child) => (_jsx("div", { className: ["ga-ds-tabs__panel", activeTab === child.props.id ? "ga-ds-tabs__panel--active" : ""].join(" "), children: _jsx("div", { role: "tabpanel", id: `ga-ds-tabpanel-${child.props.id}`, "aria-labelledby": `ga-ds-tab-${child.props.id}`, children: child }) }, child.props.id)))
                     : children })] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-angels/ds-core",
-  "version": "1.14.2",
+  "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,7 +1,23 @@
 .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;
+    max-width: 100%;
+    &::-webkit-scrollbar {
+      display: none; // Safari and Chrome
+    }
+  }
+  &__list-container {
     display: flex;
+    flex-wrap: nowrap;
+    width: fit-content;
 
     #{$this}__tab {
       background: none;
@@ -9,6 +25,7 @@
       font-size: inherit;
       padding: inherit;
       cursor: pointer;
+      width: max-content;
     }
   }
 

package/src/organisms/Tabs/Tabs.tsx

@@ -13,21 +13,23 @@ export const Tabs = ({ tabs, children, extraClassNames, edit }: TabsProps) => {
   return (
     <div className={classes.join(" ")}>
       <div className="ga-ds-tabs__list" role="tablist">
-        {tabs.map((tab, index) => (
-          <button
-            key={tab.id}
-            ref={(el) => (tabsRef.current[index] = el)}
-            role="tab"
-            aria-selected={activeTab === tab.id}
-            aria-controls={`ga-ds-tabpanel-${tab.id}`}
-            id={`ga-ds-tab-${tab.id}`}
-            tabIndex={activeTab === tab.id ? 0 : -1}
-            className={`ga-ds-tabs__tab ${activeTab === tab.id ? "ga-ds-tabs__tab--active" : ""}`}
-            onClick={() => setActiveTab(tab.id)}
-          >
-            {tab.label}
-          </button>
-        ))}
+        <div className="ga-ds-tabs__list-container">
+          {tabs.map((tab, index) => (
+            <button
+              key={tab.id}
+              ref={(el) => (tabsRef.current[index] = el)}
+              role="tab"
+              aria-selected={activeTab === tab.id}
+              aria-controls={`ga-ds-tabpanel-${tab.id}`}
+              id={`ga-ds-tab-${tab.id}`}
+              tabIndex={activeTab === tab.id ? 0 : -1}
+              className={`ga-ds-tabs__tab ${activeTab === tab.id ? "ga-ds-tabs__tab--active" : ""}`}
+              onClick={() => setActiveTab(tab.id)}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
       </div>
       <div className="ga-ds-tabs__panels">
         {!edit