@trafilea/afrodita-components 6.2.0 → 6.4.0

package/build/index.d.ts

@@ -72,7 +72,7 @@ declare type IconProps$1 = {
     className?: string;
 } & StyledIconProps;
 
-declare const Icon$1: React__default.FC<IconProps$1>;
+declare const Icon$1: React__default.NamedExoticComponent<IconProps$1>;
 
 declare type Props$1 = Omit<IconProps$1, 'name'>;
 declare type IconComponent = React__default.FC<Props$1>;
@@ -1219,7 +1219,7 @@ declare type Theme = {
 };
 declare type ThemeBreakpoints = {
     mobile: number;
-    tablet?: number;
+    tablet: number;
     desktop: number;
 };
 declare type ThemeBasicPallete = {
@@ -1943,7 +1943,14 @@ declare type ThemeAssets = {
         };
     };
     [key: string]: any;
-};
+};
+declare const Viewports: {
+    readonly mobile: "mobile";
+    readonly tablet: "tablet";
+    readonly desktop: "desktop";
+    readonly desktopLarge: "desktopLarge";
+};
+declare type Viewport = typeof Viewports[keyof typeof Viewports];
 
 declare type ThemeProviderProps = {
     isSameOriginIcons?: boolean;
@@ -3338,13 +3345,19 @@ declare const Spinner: React.FC<SpinnerProps>;
 
 declare const useOnClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: Event) => void) => void;
 
-declare const useWindowDimensions: (breakpoints: ThemeBreakpoints) => {
+declare type UseWindowDimensions = (breakpoints?: ThemeBreakpoints, options?: {
+    shouldListenChanges?: boolean;
+}) => {
+    viewport: Viewport;
     isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
     windowDimensions: {
         width: number;
         height: number;
     };
-};
+};
+declare const useWindowDimensions: UseWindowDimensions;
 
 declare global {
     interface Events {

package/build/index.esm.js

@@ -3107,6 +3107,20 @@ var formatPrice = function (value, _a) {
     }).format(valueToFormat);
 };
 
+var Viewports = {
+    mobile: 'mobile',
+    tablet: 'tablet',
+    desktop: 'desktop',
+    desktopLarge: 'desktopLarge',
+};
+
+//ANNOTATION: Those values are up to.
+var DEFAULT_BREAKPOINTS = {
+    mobile: 640,
+    tablet: 1024,
+    desktop: 1280,
+};
+
 var Container$17 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n  @keyframes shimmer {\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  display: inline-block;\n  height: ", ";\n  width: ", ";\n  position: relative;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n\n  ::after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    transform: translateX(-100%);\n    background-image: linear-gradient(\n      90deg,\n      ", ",\n      ", ",\n      ", "\n    );\n    animation: shimmer 2s infinite;\n    content: '';\n    box-sizing: border-box;\n  }\n"], ["\n  @keyframes shimmer {\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  display: inline-block;\n  height: ", ";\n  width: ", ";\n  position: relative;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n\n  ::after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    transform: translateX(-100%);\n    background-image: linear-gradient(\n      90deg,\n      ", ",\n      ", ",\n      ", "\n    );\n    animation: shimmer 2s infinite;\n    content: '';\n    box-sizing: border-box;\n  }\n"])), function (_a) {
     var height = _a.height;
     return (height ? height : '1.5em');
@@ -3201,19 +3215,26 @@ var fetchWithCache = function (request, saveToCacheFn) {
 var createIconImage = function (_a) {
     var src = _a.src;
     return __awaiter(void 0, void 0, void 0, function () {
-        var blob, localUrl_1, cleanup, error_1;
+        var localUrl, error_1;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
                     _b.trys.push([0, 2, , 3]);
-                    return [4 /*yield*/, fetchWithCache(src, function (response) { return response.blob(); })];
+                    return [4 /*yield*/, fetchWithCache(src, function (response) { return __awaiter(void 0, void 0, void 0, function () {
+                            var blob;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, response.blob()];
+                                    case 1:
+                                        blob = _a.sent();
+                                        return [2 /*return*/, URL.createObjectURL(blob)];
+                                }
+                            });
+                        }); })];
                 case 1:
-                    blob = _b.sent();
-                    localUrl_1 = URL.createObjectURL(blob);
-                    cleanup = function () { return URL.revokeObjectURL(localUrl_1); };
+                    localUrl = _b.sent();
                     return [2 /*return*/, {
-                            src: localUrl_1,
-                            cleanup: cleanup,
+                            src: localUrl,
                         }];
                 case 2:
                     error_1 = _b.sent();
@@ -3262,11 +3283,10 @@ var IconFromExtSource = function (_a) {
         if (!localSource) {
             fetchIcon();
         }
-        return localSource === null || localSource === void 0 ? void 0 : localSource.cleanup;
-    }, [iconURL, localSource === null || localSource === void 0 ? void 0 : localSource.cleanup]);
+    }, [iconURL]);
     var imageProperties = __assign$1({ alt: title !== null && title !== void 0 ? title : name, 'data-testid': testId, height: height, width: width }, rest);
     if (error) {
-        return jsx$1(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: iconURL }), void 0);
+        return jsx$1(StyledImageWrapper, __assign$1({}, imageProperties, { src: iconURL }), void 0);
     }
     if (!localSource) {
         return jsx$1(SkeletonBox, { width: width, height: height }, void 0);
@@ -3278,7 +3298,7 @@ var IconFromExtSource = function (_a) {
 };
 
 /* eslint-disable react/forbid-component-props */
-var Icon$1 = function (_a) {
+var UnmemoIcon = function (_a) {
     var height = _a.height, _b = _a.width, width = _b === void 0 ? 1 : _b, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps"]);
     var assets = useTheme().assets;
     var newWidth = width && getIconDimension(width);
@@ -3290,7 +3310,8 @@ var Icon$1 = function (_a) {
         return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { children: [jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { xlinkHref: "".concat(iconURL, "#").concat(svgId) }, void 0)] }), void 0));
     }
     return (jsx$1(IconFromExtSource, __assign$1({ svgId: svgId, iconURL: iconURL, testId: testId, fill: fill, height: newHeight, svgProps: svgProps, width: newWidth, name: name, title: title }, rest), void 0));
-};
+};
+var Icon$1 = React__default.memo(UnmemoIcon, function (prevProps, nextProps) { return prevProps.name !== nextProps.name; });
 
 var Add = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
 
@@ -5210,27 +5231,56 @@ var DiscountTag = function (_a) {
 var templateObject_1$1A, templateObject_2$10;
 
 function getWindowDimensions() {
+    if (typeof window === 'undefined')
+        return { width: 0, height: 0 };
     var width = window.innerWidth, height = window.innerHeight;
     return {
         width: width,
         height: height,
     };
 }
-var useWindowDimensions = function (breakpoints) {
-    var _a = useState({ width: 0, height: 0 }), windowDimensions = _a[0], setWindowDimensions = _a[1];
+var getViewport = function (breakpoints, width) {
+    if (width <= breakpoints.mobile)
+        return Viewports.mobile;
+    if (width <= breakpoints.tablet)
+        return Viewports.tablet;
+    if (width <= breakpoints.desktop)
+        return Viewports.desktop;
+    return Viewports.desktopLarge;
+};
+var useWindowDimensions = function (breakpoints, _a) {
+    if (breakpoints === void 0) { breakpoints = DEFAULT_BREAKPOINTS; }
+    var _b = _a === void 0 ? {} : _a, shouldListenChanges = _b.shouldListenChanges;
+    var _c = useState(function () {
+        var dimension = getWindowDimensions();
+        return {
+            windowDimensions: dimension,
+            viewport: getViewport(breakpoints, dimension.width),
+        };
+    }), state = _c[0], setState = _c[1];
     useEffect(function () {
         function handleResize() {
-            setWindowDimensions(getWindowDimensions());
+            var newDimension = getWindowDimensions();
+            var newViewport = getViewport(breakpoints, newDimension.width);
+            setState(function (oldState) {
+                if (shouldListenChanges || oldState.viewport !== newViewport) {
+                    return {
+                        windowDimensions: newDimension,
+                        viewport: newViewport,
+                    };
+                }
+                return oldState;
+            });
         }
-        // calling it here updates the dimensions on first render
         handleResize();
         window.addEventListener('resize', handleResize);
         return function () { return window.removeEventListener('resize', handleResize); };
-    }, []);
-    return {
-        isMobile: windowDimensions.width < breakpoints.desktop,
-        windowDimensions: windowDimensions,
-    };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [shouldListenChanges]);
+    var isMobile = state.viewport === Viewports.mobile;
+    var isTablet = state.viewport === Viewports.tablet;
+    var isDesktop = state.viewport === Viewports.desktop || state.viewport === Viewports.desktopLarge;
+    return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
 };
 
 var getStylesBySize$c = function (size, theme) {
@@ -5313,7 +5363,7 @@ function getTestId() {
 var PriceLabel = function (_a) {
     var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _b = _a.finalPriceStyled, finalPriceStyled = _b === void 0 ? false : _b, finalPriceStyle = _a.finalPriceStyle, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, _f = _a.clubStyle, clubStyle = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "color", "testId", "finalPriceStyled", "finalPriceStyle", "originalPriceStyled", "originalPriceUnderlined", "size", "clubStyle"]);
     var theme = useTheme();
-    var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
+    var isMobile = useWindowDimensions().isMobile;
     var priceCommonProps = {
         size: finalPriceStyled ? ComponentSize.Small : size,
         color: color || theme.colors.pallete.secondary.color,
@@ -5859,7 +5909,7 @@ var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$e || (templateObj
 var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n  font-size: 13px;\n"], ["\n  font-size: 13px;\n"])));
 var ClubPriceLabel = function (_a) {
     var clubPrice = _a.clubPrice;
-    var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
+    var isMobile = useWindowDimensions().isMobile;
     return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$S, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
 };
 var templateObject_1$1h, templateObject_2$T, templateObject_3$I, templateObject_4$x, templateObject_5$m, templateObject_6$k, templateObject_7$e, templateObject_8$a;
@@ -6056,7 +6106,7 @@ var ProductItemMobile = function (_a) {
     } : _g, _h = _a.clubPrice, clubPrice = _h === void 0 ? '' : _h, _j = _a.showClubPriceLabel, showClubPriceLabel = _j === void 0 ? false : _j, isRatingLoading = _a.isRatingLoading;
     var theme = useTheme();
     var styles = getStylesBySize$9(size);
-    var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
+    var isMobile = useWindowDimensions().isMobile;
     var space = useMemo(function () {
         var _a;
         return (_a = {},
@@ -6155,7 +6205,7 @@ var ProductItemTK = function (_a) {
     } : _h, _j = _a.clubPrice, clubPrice = _j === void 0 ? '' : _j, _k = _a.showClubPriceLabel, showClubPriceLabel = _k === void 0 ? false : _k;
     var theme = useTheme();
     var styles = getStylesBySize$8(size);
-    var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
+    var isMobile = useWindowDimensions().isMobile;
     var space = useMemo(function () {
         var _a;
         return (_a = {},
@@ -13041,7 +13091,7 @@ var IconWrapper = newStyled.div(function (props) { return ({
 var IconsWithTitle = function (_a) {
     var _b;
     var iconName = _a.iconName, iconTitle = _a.iconTitle, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'MyAccount' : _c, _d = _a.withWrapper, withWrapper = _d === void 0 ? true : _d, backgroundColor = _a.backgroundColor, iconColor = _a.iconColor, _e = _a.iconSizeDesktop, iconSizeDesktop = _e === void 0 ? 4 : _e, _f = _a.iconSizeMobile, iconSizeMobile = _f === void 0 ? 3 : _f, _g = _a.iconTitlePosition, iconTitlePosition = _g === void 0 ? 'bottom' : _g, _h = _a.iconTitleStyle, iconTitleStyle = _h === void 0 ? '' : _h, _j = _a.iconStyle, iconStyle = _j === void 0 ? '' : _j, _k = _a.isTitleInnerHtml, isTitleInnerHtml = _k === void 0 ? false : _k;
-    var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
+    var isMobile = useWindowDimensions().isMobile;
     // @ts-ignore
     var IconComponent = (_b = Icon[iconFolder][iconName]) !== null && _b !== void 0 ? _b : (function () { return 'Not found'; });
     if (IconComponent == null) {
@@ -13076,7 +13126,7 @@ var StyledTitle = newStyled.div(templateObject_3$s || (templateObject_3$s = __ma
 });
 var ImageCardWithDescription = function (_a) {
     var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
-    var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
+    var isMobile = useWindowDimensions().isMobile;
     return (jsxs$1(Container$B, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$8, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$8, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$8, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
 };
 var templateObject_1$P, templateObject_2$y, templateObject_3$s;
@@ -13701,9 +13751,9 @@ var range = function (limit) { return __spreadArray([], new Array(limit), true).
 var SlideDots = function (_a) {
     var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
     var theme = useTheme();
-    return (jsx$1(Container$u, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
+    return (jsx$1(Container$u, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon$1, { name: "navigation/slide_dot".concat(index === selectedIndex ? '_solid' : ''), height: 0.75, width: 0.75, fill: index === selectedIndex
                 ? theme.component.slideNavigation.slideDots.selectedDotColor
-                : theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
+                : theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, "Icon-".concat(index, "-navigation/slide_dot").concat(index === selectedIndex ? '_solid' : ''))); }) }), void 0));
 };
 var templateObject_1$E;
 
@@ -18946,7 +18996,7 @@ var TextContainer = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __
 var TextWithImage = function (_a) {
     var _b, _c, _d, _e;
     var title = _a.title, text = _a.text, children = _a.children, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, _f = _a.buttonWideOnMobile, buttonWideOnMobile = _f === void 0 ? false : _f, props = __rest(_a, ["title", "text", "children", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle", "buttonWideOnMobile"]);
-    var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
+    var isMobile = useWindowDimensions().isMobile;
     var ImageTitle = function () { return (jsx(Fragment, { children: !isMobile ? (jsx(Text$8, __assign$1({ variant: "heading2", weight: "bold", style: titleStyle
                 ? titleStyle
                 : {
@@ -19201,7 +19251,7 @@ var getDefaultCountdown = function () {
 var HurryUp = function (_a) {
     var hurryUpText = _a.hurryUpText, backgroundColor = _a.backgroundColor, _b = _a.iconSize, iconSize = _b === void 0 ? 1.5 : _b, _c = _a.textPosition, textPosition = _c === void 0 ? 'center' : _c, _d = _a.showTimer, showTimer = _d === void 0 ? false : _d, _e = _a.clockPosition, clockPosition = _e === void 0 ? 'left' : _e, _f = _a.countdown, countdown = _f === void 0 ? getDefaultCountdown() : _f, timerProps = __rest(_a, ["hurryUpText", "backgroundColor", "iconSize", "textPosition", "showTimer", "clockPosition", "countdown"]);
     var theme = useTheme();
-    return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$8, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps), void 0)] }), void 0));
+    return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$8, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps), void 0)] }), void 0));
 };
 
 var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  svg {\n    vertical-align: unset;\n  }\n"], ["\n  width: ", ";\n  height: ", ";\n  svg {\n    vertical-align: unset;\n  }\n"])), function (_a) {