@dnanpm/styleguide 3.9.4 → 3.9.5

package/build/cjs/components/Carousel/Carousel.d.ts

@@ -1,5 +1,11 @@
 import type { MouseEvent, ReactNode } from 'react';
 import React from 'react';
+interface Responsive {
+    minItems: number;
+    maxItems: number;
+    minWidth: number;
+    maxWidth: number;
+}
 interface Props {
     /**
      * Unique ID for the component
@@ -43,6 +49,11 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * Allows to define responsive configuration
+     * If not provided, visibleItems property will be used
+     */
+    responsive?: Partial<Responsive>;
 }
 /** @visibleName Carousel */
 declare const Carousel: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

package/build/cjs/components/Carousel/Carousel.js

@@ -55,6 +55,10 @@ const SlideItem = styled.default.div `
     flex-basis: calc(
         ${({ visibleItems, itemWidthCorrection }) => `(100% / ${visibleItems}) - ${itemWidthCorrection}px`}
     );
+
+    a {
+        pointer-events: ${({ isSwiping }) => (isSwiping ? 'none' : 'auto')};
+    }
 `;
 const Footer = styled.default.div `
     ${styledUtils.media.md `
@@ -146,9 +150,32 @@ const Carousel = (_a) => {
     const slidesWrapperRef = React.useRef(null);
     const scrollbarRef = React.useRef(null);
     const knobRef = React.useRef(null);
-    const { isMobile } = useWindowSize.default(theme.default.breakpoints.md);
+    const { isMobile, width } = useWindowSize.default(theme.default.breakpoints.md);
     const [currentIndex, setCurrentIndex] = React.useState(0);
-    const visibleItems = props.visibleItems || (isMobile ? 1.2 : 1);
+    const [isSwiping, setIsSwiping] = React.useState(false);
+    const [calculatedItems, setCalculatedItems] = React.useState(props.visibleItems || (isMobile ? 1.2 : 1));
+    React.useEffect(() => {
+        const calculateVisibleItems = () => {
+            const defaultValue = props.visibleItems || (isMobile ? 1.2 : 1);
+            const { minItems, maxItems, minWidth, maxWidth } = props.responsive || {};
+            if (!width || !minItems || !maxItems || !minWidth || !maxWidth) {
+                return defaultValue;
+            }
+            const calculatedMaxItems = React.Children.count(props.children) === 1 ? 1 : maxItems;
+            if (width < minWidth) {
+                return minItems;
+            }
+            if (width > maxWidth) {
+                return calculatedMaxItems;
+            }
+            return minItems + ((width - minWidth) / (maxWidth - minWidth)) * (maxItems - minItems);
+        };
+        const timeoutId = setTimeout(() => {
+            setCalculatedItems(calculateVisibleItems());
+        }, 100);
+        return () => clearTimeout(timeoutId);
+    }, [width, isMobile, props.responsive, props.visibleItems, props.children]);
+    const visibleItems = props.visibleItems || calculatedItems;
     const slidesWrapperGapSizePx = 20;
     const slideScreensCount = React.Children.count(props.children) - Math.floor(visibleItems) + 1;
     const itemWidthCorrectionRatio = (slidesWrapperGapSizePx * visibleItems) % Math.floor(visibleItems) === 0
@@ -238,6 +265,7 @@ const Carousel = (_a) => {
         }
         setElementTransform(slidesWrapperRef, data.currentTransform, 0);
         setElementTransform(knobRef, data.knobCurrentTransform, 0);
+        setIsSwiping(true);
     };
     const handlePointerUp = (e) => {
         const endTime = Date.now();
@@ -264,6 +292,7 @@ const Carousel = (_a) => {
         }
         document.removeEventListener('pointermove', handlePointerMove);
         document.removeEventListener('pointerup', handlePointerUp);
+        setIsSwiping(false);
     };
     const handleSlidesPointerDown = (e) => {
         if (slidesWrapperRef.current && scrollbarRef.current && knobRef.current) {
@@ -279,6 +308,9 @@ const Carousel = (_a) => {
     const handleScrollbarPointerDown = (e) => {
         handleSlidesPointerDown(e);
     };
+    const handlePointerDown = (e) => {
+        e.preventDefault();
+    };
     React.useEffect(() => {
         if (slidesWrapperRef.current && scrollbarRef.current) {
             const isRest = React.Children.count(props.children) - (currentIndex + visibleItems) < 0;
@@ -315,7 +347,7 @@ const Carousel = (_a) => {
                 React__default.default.createElement(ButtonArrow.default, { direction: "left", "aria-label": "Previous", onClick: handleNavigationButtonPreviousClick, disabled: currentIndex <= 0 }),
                 React__default.default.createElement(ButtonArrow.default, { direction: "right", "aria-label": "Next", onClick: handleNavigationButtonNextClick, disabled: currentIndex + visibleItems >= React.Children.count(props.children) }))),
         React__default.default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content` },
-            React__default.default.createElement(SlidesWrapper, { ref: slidesWrapperRef, onPointerDown: handleSlidesPointerDown, gap: slidesWrapperGapSizePx / 16 }, React.Children.map(props.children, child => (React__default.default.createElement(SlideItem, { visibleItems: visibleItems, itemWidthCorrection: itemWidthCorrection }, child))))),
+            React__default.default.createElement(SlidesWrapper, { ref: slidesWrapperRef, onPointerDown: handleSlidesPointerDown, gap: slidesWrapperGapSizePx / 16 }, React.Children.map(props.children, child => (React__default.default.createElement(SlideItem, { visibleItems: visibleItems, itemWidthCorrection: itemWidthCorrection, isSwiping: isSwiping, onPointerDown: handlePointerDown }, child))))),
         React__default.default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` },
             React__default.default.createElement(Pagination, null, [...Array(slideScreensCount).keys()].map((value, index) => (React__default.default.createElement(PaginationItem, { key: value, "aria-label": `Move to step ${index + 1}`, "aria-current": index === currentIndex, isActive: index === currentIndex, onClick: handlePaginationItemClick })))),
             React__default.default.createElement(Scrollbar, { ref: scrollbarRef, onPointerDown: handleScrollbarPointerDown },

package/build/cjs/themes/globalStyles.js

@@ -220,19 +220,20 @@ const CheckboxAndRadioInputCore = styled.default.input `
 
     &:disabled {
         cursor: not-allowed;
-        color: ${theme.default.color.line.L01}${theme.default.color.transparency.T30};
-        border-color: ${theme.default.color.line.L01}${theme.default.color.transparency.T30};
-        background-color: ${theme.default.color.background.white.default}${theme.default.color.transparency.T30};
+        color: ${theme.default.color.text.gray};
+        background-color: ${theme.default.color.line.L02};
+        border-color: ${theme.default.color.line.L01};
 
         & + label {
             cursor: not-allowed;
-            color: ${theme.default.color.text.black}${theme.default.color.transparency.T30};
+            color: ${theme.default.color.text.gray};
         }
     }
 
     &:disabled:checked {
         color: ${theme.default.color.default.pink}${theme.default.color.transparency.T30};
         border-color: ${theme.default.color.default.pink}${theme.default.color.transparency.T30};
+        background-color: ${theme.default.color.background.white.default};
     }
 `;
 styled.createGlobalStyle `

package/build/es/components/Carousel/Carousel.d.ts

@@ -1,5 +1,11 @@
 import type { MouseEvent, ReactNode } from 'react';
 import React from 'react';
+interface Responsive {
+    minItems: number;
+    maxItems: number;
+    minWidth: number;
+    maxWidth: number;
+}
 interface Props {
     /**
      * Unique ID for the component
@@ -43,6 +49,11 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * Allows to define responsive configuration
+     * If not provided, visibleItems property will be used
+     */
+    responsive?: Partial<Responsive>;
 }
 /** @visibleName Carousel */
 declare const Carousel: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

package/build/es/components/Carousel/Carousel.js

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import { ArrowRight } from '@dnanpm/icons';
-import React__default, { useRef, useState, Children, useMemo, useEffect } from 'react';
+import React__default, { useRef, useState, useEffect, Children, useMemo } from 'react';
 import useWindowSize from '../../hooks/useWindowSize.js';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
@@ -47,6 +47,10 @@ const SlideItem = styled.div `
     flex-basis: calc(
         ${({ visibleItems, itemWidthCorrection }) => `(100% / ${visibleItems}) - ${itemWidthCorrection}px`}
     );
+
+    a {
+        pointer-events: ${({ isSwiping }) => (isSwiping ? 'none' : 'auto')};
+    }
 `;
 const Footer = styled.div `
     ${media.md `
@@ -138,9 +142,32 @@ const Carousel = (_a) => {
     const slidesWrapperRef = useRef(null);
     const scrollbarRef = useRef(null);
     const knobRef = useRef(null);
-    const { isMobile } = useWindowSize(theme.breakpoints.md);
+    const { isMobile, width } = useWindowSize(theme.breakpoints.md);
     const [currentIndex, setCurrentIndex] = useState(0);
-    const visibleItems = props.visibleItems || (isMobile ? 1.2 : 1);
+    const [isSwiping, setIsSwiping] = useState(false);
+    const [calculatedItems, setCalculatedItems] = useState(props.visibleItems || (isMobile ? 1.2 : 1));
+    useEffect(() => {
+        const calculateVisibleItems = () => {
+            const defaultValue = props.visibleItems || (isMobile ? 1.2 : 1);
+            const { minItems, maxItems, minWidth, maxWidth } = props.responsive || {};
+            if (!width || !minItems || !maxItems || !minWidth || !maxWidth) {
+                return defaultValue;
+            }
+            const calculatedMaxItems = Children.count(props.children) === 1 ? 1 : maxItems;
+            if (width < minWidth) {
+                return minItems;
+            }
+            if (width > maxWidth) {
+                return calculatedMaxItems;
+            }
+            return minItems + ((width - minWidth) / (maxWidth - minWidth)) * (maxItems - minItems);
+        };
+        const timeoutId = setTimeout(() => {
+            setCalculatedItems(calculateVisibleItems());
+        }, 100);
+        return () => clearTimeout(timeoutId);
+    }, [width, isMobile, props.responsive, props.visibleItems, props.children]);
+    const visibleItems = props.visibleItems || calculatedItems;
     const slidesWrapperGapSizePx = 20;
     const slideScreensCount = Children.count(props.children) - Math.floor(visibleItems) + 1;
     const itemWidthCorrectionRatio = (slidesWrapperGapSizePx * visibleItems) % Math.floor(visibleItems) === 0
@@ -230,6 +257,7 @@ const Carousel = (_a) => {
         }
         setElementTransform(slidesWrapperRef, data.currentTransform, 0);
         setElementTransform(knobRef, data.knobCurrentTransform, 0);
+        setIsSwiping(true);
     };
     const handlePointerUp = (e) => {
         const endTime = Date.now();
@@ -256,6 +284,7 @@ const Carousel = (_a) => {
         }
         document.removeEventListener('pointermove', handlePointerMove);
         document.removeEventListener('pointerup', handlePointerUp);
+        setIsSwiping(false);
     };
     const handleSlidesPointerDown = (e) => {
         if (slidesWrapperRef.current && scrollbarRef.current && knobRef.current) {
@@ -271,6 +300,9 @@ const Carousel = (_a) => {
     const handleScrollbarPointerDown = (e) => {
         handleSlidesPointerDown(e);
     };
+    const handlePointerDown = (e) => {
+        e.preventDefault();
+    };
     useEffect(() => {
         if (slidesWrapperRef.current && scrollbarRef.current) {
             const isRest = Children.count(props.children) - (currentIndex + visibleItems) < 0;
@@ -307,7 +339,7 @@ const Carousel = (_a) => {
                 React__default.createElement(ButtonArrow, { direction: "left", "aria-label": "Previous", onClick: handleNavigationButtonPreviousClick, disabled: currentIndex <= 0 }),
                 React__default.createElement(ButtonArrow, { direction: "right", "aria-label": "Next", onClick: handleNavigationButtonNextClick, disabled: currentIndex + visibleItems >= Children.count(props.children) }))),
         React__default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content` },
-            React__default.createElement(SlidesWrapper, { ref: slidesWrapperRef, onPointerDown: handleSlidesPointerDown, gap: slidesWrapperGapSizePx / 16 }, Children.map(props.children, child => (React__default.createElement(SlideItem, { visibleItems: visibleItems, itemWidthCorrection: itemWidthCorrection }, child))))),
+            React__default.createElement(SlidesWrapper, { ref: slidesWrapperRef, onPointerDown: handleSlidesPointerDown, gap: slidesWrapperGapSizePx / 16 }, Children.map(props.children, child => (React__default.createElement(SlideItem, { visibleItems: visibleItems, itemWidthCorrection: itemWidthCorrection, isSwiping: isSwiping, onPointerDown: handlePointerDown }, child))))),
         React__default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` },
             React__default.createElement(Pagination, null, [...Array(slideScreensCount).keys()].map((value, index) => (React__default.createElement(PaginationItem, { key: value, "aria-label": `Move to step ${index + 1}`, "aria-current": index === currentIndex, isActive: index === currentIndex, onClick: handlePaginationItemClick })))),
             React__default.createElement(Scrollbar, { ref: scrollbarRef, onPointerDown: handleScrollbarPointerDown },

package/build/es/themes/globalStyles.js

@@ -218,19 +218,20 @@ const CheckboxAndRadioInputCore = styled.input `
 
     &:disabled {
         cursor: not-allowed;
-        color: ${theme.color.line.L01}${theme.color.transparency.T30};
-        border-color: ${theme.color.line.L01}${theme.color.transparency.T30};
-        background-color: ${theme.color.background.white.default}${theme.color.transparency.T30};
+        color: ${theme.color.text.gray};
+        background-color: ${theme.color.line.L02};
+        border-color: ${theme.color.line.L01};
 
         & + label {
             cursor: not-allowed;
-            color: ${theme.color.text.black}${theme.color.transparency.T30};
+            color: ${theme.color.text.gray};
         }
     }
 
     &:disabled:checked {
         color: ${theme.color.default.pink}${theme.color.transparency.T30};
         border-color: ${theme.color.default.pink}${theme.color.transparency.T30};
+        background-color: ${theme.color.background.white.default};
     }
 `;
 createGlobalStyle `

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "v3.9.4",
+    "version": "v3.9.5",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",