@trafilea/afrodita-components 6.2.0 → 6.3.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>;
@@ -3338,13 +3338,18 @@ 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 Viewport = 'mobile' | 'tablet' | 'desktop';
+declare type UseWindowDimensions = (breakpoints: ThemeBreakpoints, 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

@@ -3201,19 +3201,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 +3269,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 +3284,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 +3296,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); };
 
@@ -5209,28 +5216,60 @@ var DiscountTag = function (_a) {
 };
 var templateObject_1$1A, templateObject_2$10;
 
+//TODO Move this to types with ThemeBreakpoints
+var Viewports = {
+    mobile: 'mobile',
+    tablet: 'tablet',
+    desktop: 'desktop',
+};
 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 (breakpoints.tablet && width <= breakpoints.tablet) {
+        return Viewports.tablet;
+    }
+    return Viewports.desktop;
+};
+var useWindowDimensions = function (breakpoints, shouldListenChanges) {
+    var _a = useState(function () {
+        var dimension = getWindowDimensions();
+        return {
+            windowDimensions: dimension,
+            viewport: getViewport(breakpoints, dimension.width),
+        };
+    }), state = _a[0], setState = _a[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;
+    return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
 };
 
 var getStylesBySize$c = function (size, theme) {
@@ -13701,9 +13740,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;
 
@@ -19201,7 +19240,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) {