@growth-angels/ds-core 1.14.0 → 1.14.2

package/dist/hooks/useBreakPointObserver.d.ts

@@ -1,6 +1,10 @@
+type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export declare function useBreakpointObserver(breakpoints?: {
+    xs: number;
     sm: number;
     md: number;
     lg: number;
     xl: number;
-}): "sm" | "md" | "lg" | "xl";
+    xxl: number;
+}): Breakpoint;
+export {};

package/dist/hooks/useBreakPointObserver.js

@@ -1,13 +1,15 @@
 import { useReactAdapter } from './useReactAdaptater';
-export function useBreakpointObserver(breakpoints = { sm: 640, md: 1024, lg: 1280, xl: 1400 }) {
+export function useBreakpointObserver(breakpoints = { xs: 375, sm: 640, md: 1024, lg: 1280, xl: 1400, xxl: 1600 }) {
     const { useEffect, useState } = useReactAdapter();
     const [current, setCurrent] = useState('sm');
     useEffect(() => {
         let frameId;
         const check = () => {
             const width = window.innerWidth;
-            let bp = 'sm';
-            if (width >= breakpoints.xl)
+            let bp = 'xs';
+            if (width >= breakpoints.xxl)
+                bp = 'xxl';
+            else if (width >= breakpoints.xl)
                 bp = 'xl';
             else if (width >= breakpoints.lg)
                 bp = 'lg';
@@ -15,6 +17,8 @@ export function useBreakpointObserver(breakpoints = { sm: 640, md: 1024, lg: 128
                 bp = 'md';
             else if (width >= breakpoints.sm)
                 bp = 'sm';
+            else if (width < breakpoints.sm)
+                bp = 'xs';
             setCurrent((prev) => (prev !== bp ? bp : prev));
             frameId = requestAnimationFrame(check);
         };

package/dist/organisms/Carousel/Carousel.js

@@ -3,7 +3,7 @@ import { Button } from "../../atoms/atoms";
 import { useBreakpointObserver } from "../../hooks/useBreakPointObserver";
 import { useReactAdapter } from "../../hooks/useReactAdaptater";
 export const Carousel = (props) => {
-    const { children, slidesPerView = { sm: 1, md: 2, lg: 3, xl: 4 }, spaceBetween = 20, navigation, pagination, context, hasPagination, hasNavigation, loop = false, } = 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 { useEffect, useState, useRef, Children } = useReactAdapter();
     const trackRef = useRef(null);
     const isNavigatingRef = useRef(false);
@@ -29,9 +29,11 @@ export const Carousel = (props) => {
             setIsAtEnd(activeSlideIndex === totalPages - 1);
         }
     }, [activeSlideIndex, totalPages, loop]);
-    const breakpoint = useBreakpointObserver({ sm: 768, md: 992, lg: 1200, xl: 1400 });
+    const breakpoint = useBreakpointObserver({ xs: 375, sm: 576, md: 768, lg: 992, xl: 1200, xxl: 1440 });
     useEffect(() => {
-        setTotalPages(calculatePages(slides.length, slidesPerView[breakpoint], 1));
+        const currentSlidesPerView = slidesPerView[breakpoint] ??
+            (typeof slidesPerView === "number" ? slidesPerView : slidesPerView.xl ?? 1);
+        setTotalPages(calculatePages(slides.length, currentSlidesPerView, 1));
     }, [breakpoint, slidesPerView]);
     useEffect(() => {
         const track = trackRef.current;

package/package.json

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

package/src/hooks/useBreakPointObserver.ts

@@ -1,19 +1,24 @@
 import { useReactAdapter } from './useReactAdaptater'
 
-export function useBreakpointObserver(breakpoints = { sm: 640, md: 1024, lg: 1280, xl: 1400 }) {
+
+type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+
+export function useBreakpointObserver(breakpoints = { xs: 375, sm: 640, md: 1024, lg: 1280, xl: 1400, xxl: 1600 }): Breakpoint {
   const { useEffect, useState } = useReactAdapter()
-  const [current, setCurrent] = useState<'sm' | 'md' | 'lg' | 'xl'>('sm')
+  const [current, setCurrent] = useState<Breakpoint>('sm')
   useEffect(() => {
     let frameId: number
 
     const check = () => {
       const width = window.innerWidth
-      let bp: 'sm' | 'md' | 'lg' | 'xl' = 'sm'
-
-      if (width >= breakpoints.xl) bp = 'xl'
+      let bp: Breakpoint = 'xs'
+      
+      if (width >= breakpoints.xxl) bp = 'xxl'
+      else if (width >= breakpoints.xl) bp = 'xl'
       else if (width >= breakpoints.lg) bp = 'lg'
       else if (width >= breakpoints.md) bp = 'md'
       else if (width >= breakpoints.sm) bp = 'sm'
+      else if (width < breakpoints.sm) bp = 'xs'
 
       setCurrent((prev) => (prev !== bp ? bp : prev))
       frameId = requestAnimationFrame(check)

package/src/layout/Container/Container.scss

@@ -29,7 +29,7 @@
   }
 }
 
-@include bp-up("xl", $ga-breakpoints) {
+@include bp-up("xxl", $ga-breakpoints) {
   .ga-ds-container--small {
     &:not(.ga-ds-container-stretch--right) {
       padding-right: calc((100% - #{map.get($ga-containers, "sm")}) / 2);
@@ -40,7 +40,7 @@
   }
 }
 
-@include bp-up("xl", $ga-breakpoints) {
+@include bp-up("xxl", $ga-breakpoints) {
   .ga-ds-container--medium {
     &:not(.ga-ds-container-stretch--right) {
       padding-right: calc((100% - #{map.get($ga-containers, "md")}) / 2);
@@ -51,7 +51,7 @@
   }
 }
 
-@include bp-up("xl", $ga-breakpoints) {
+@include bp-up("xxl", $ga-breakpoints) {
   .ga-ds-container--large {
     &:not(.ga-ds-container-stretch--right) {
       padding-right: calc((100% - #{map.get($ga-containers, "lg")}) / 2);

package/src/organisms/Carousel/Carousel.tsx

@@ -6,7 +6,7 @@ import { CarouselProps } from "./Carousel.types"
 export const Carousel = (props: CarouselProps) => {
   const {
     children,
-    slidesPerView = { sm: 1, md: 2, lg: 3, xl: 4 },
+    slidesPerView = { xs: 1, sm: 1, md: 2, lg: 3, xl: 4, xxl: 5 },
     spaceBetween = 20,
     navigation,
     pagination,
@@ -44,10 +44,14 @@ export const Carousel = (props: CarouselProps) => {
     }
   }, [activeSlideIndex, totalPages, loop])
 
-  const breakpoint = useBreakpointObserver({ sm: 768, md: 992, lg: 1200, xl: 1400 })
+  const breakpoint = useBreakpointObserver({ xs: 375, sm: 576, md: 768, lg: 992, xl: 1200, xxl: 1440 })
 
   useEffect(() => {
-    setTotalPages(calculatePages(slides.length, slidesPerView[breakpoint], 1))
+    const currentSlidesPerView =
+      (slidesPerView as Record<string, number>)[breakpoint] ??
+      (typeof slidesPerView === "number" ? slidesPerView : (slidesPerView as any).xl ?? 1)
+
+    setTotalPages(calculatePages(slides.length, currentSlidesPerView, 1))
   }, [breakpoint, slidesPerView])
 
   useEffect(() => {