@growth-angels/ds-core 1.12.10 → 1.14.0

package/dist/hooks/useReactAdaptater.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 type ReactType = typeof import('react');
 type ExtendedReactType = ReactType & {
     createRoot: (container: Element | DocumentFragment) => {

package/dist/hooks/useReactAdaptater.js

@@ -1,3 +1,4 @@
+import React from 'react';
 export const useReactAdapter = () => {
     // Check if WordPress element is available (WordPress context)
     if (typeof window !== 'undefined' && window.wp?.element) {
@@ -5,5 +6,5 @@ export const useReactAdapter = () => {
     }
     // Fallback for non-WordPress environments (Storybook, tests, SSR)
     // This will bundle React only in non-WordPress builds
-    return import('react');
+    return React;
 };

package/dist/organisms/Carousel/Carousel.js

@@ -16,8 +16,9 @@ export const Carousel = (props) => {
     const [isAtEnd, setIsAtEnd] = useState(false);
     const [isAtStart, setIsAtStart] = useState(true);
     const [totalPages, setTotalPages] = useState(0);
-    const displayNavigation = hasNavigation;
-    const displayPagination = hasPagination;
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    const displayNavigation = hasNavigation && (loop || isOverflowing);
+    const displayPagination = hasPagination && (loop || isOverflowing);
     useEffect(() => {
         if (loop) {
             setIsAtStart(false);
@@ -73,6 +74,18 @@ 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/dist/organisms/Carousel/Carousel.types.d.ts

@@ -2,6 +2,7 @@ import { WordpressDefault } from "../../global.types";
 export type CarouselAttributes = {
     context?: 'wp-editor';
     slidesPerView?: {
+        xs?: number;
         sm: number;
         md: number;
         lg: number;

package/package.json

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

package/src/hooks/useReactAdaptater.ts

@@ -1,3 +1,4 @@
+import React from 'react'
 // @ts-ignore - React types from window.wp.element
 type ReactType = typeof import('react')
 
@@ -27,6 +28,6 @@ export const useReactAdapter = (): ExtendedReactType => {
   
   // Fallback for non-WordPress environments (Storybook, tests, SSR)
   // This will bundle React only in non-WordPress builds
-  return import('react') as unknown as ExtendedReactType
+  return React as ExtendedReactType
 }
 

package/src/organisms/Carousel/Carousel.scss

@@ -46,9 +46,6 @@
     flex: 0 0 auto;
     width: 100%;
     scroll-snap-align: start;
-    width: 100%;
-    max-width: 100%;
-    min-width: 0;
   }
 
   &__arrows {

package/src/organisms/Carousel/Carousel.tsx

@@ -29,9 +29,10 @@ 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
-  const displayPagination = hasPagination
+  const displayNavigation = hasNavigation && (loop || isOverflowing)
+  const displayPagination = hasPagination && (loop || isOverflowing)
 
   useEffect(() => {
     if (loop) {
@@ -94,6 +95,21 @@ 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/Carousel/Carousel.types.ts

@@ -3,6 +3,7 @@ import { WordpressDefault } from "../../global.types"
 export type CarouselAttributes = {
   context?: 'wp-editor'
   slidesPerView?: {
+    xs?: number
     sm: number
     md: number
     lg: number