@sonic-equipment/ui 167.0.0 → 169.0.0

package/dist/shared/api/bff/model/bff.model.d.ts

@@ -1,4 +1,5 @@
 import { CurrencyCode } from '../../../../intl/types';
+import { ImageType } from '../../../model/image';
 export interface PageModel {
     alternateLanguageUrls: {
         [key: string]: string;
@@ -175,4 +176,33 @@ export interface Country {
     languages: Language[];
     name: string;
 }
+interface Announcement {
+    endDate?: string;
+    href: string;
+    id: string;
+    startDate?: string;
+    subType: string;
+    text: string;
+    title: string;
+    type: string;
+}
+export type AnnouncementResponse = Announcement[];
+export interface NavigationLink {
+    external?: boolean;
+    image?: ImageType;
+    key: string;
+    links?: NavigationLink[];
+    openInNewTab?: boolean;
+    title: string;
+    type: 'link' | 'category' | 'section';
+    url?: string;
+}
+export interface NavigationLinkResponse {
+    footer: {
+        bottomLinks: NavigationLink[];
+        copyright: string;
+        linkBlocks: NavigationLink[];
+    };
+    header: NavigationLink[];
+}
 export {};

package/dist/shared/api/bff/services/bff-service.d.ts

@@ -1,7 +1,7 @@
 import { CultureCode } from '../../../../intl/types';
 import { ProductListingPageData } from '../../../../pages/product/product-listing-page/product-listing-page-data-types';
 import { AnnouncementObject } from '../../../model/announcement';
-import { ProductDetailsPageDataResponse } from '../model/bff.model';
+import { NavigationLinkResponse, ProductDetailsPageDataResponse } from '../model/bff.model';
 export interface FetchAnnouncementsArgs {
     cultureCode: CultureCode;
 }
@@ -12,3 +12,9 @@ export interface FetchProductPageDataArgs {
 }
 export declare function fetchProductDetailsPageData({ cultureCode, pageUrl, }: FetchProductPageDataArgs): Promise<ProductDetailsPageDataResponse>;
 export declare function fetchProductListingPageData({ cultureCode, pageUrl, }: FetchProductPageDataArgs): Promise<ProductListingPageData>;
+export type NavigationLinkSource = 'shop' | 'marketing';
+export interface FetchNavigationLinksArgs {
+    cultureCode: CultureCode;
+    source: NavigationLinkSource;
+}
+export declare function fetchNavigationLinks({ cultureCode, source, }: FetchNavigationLinksArgs): Promise<NavigationLinkResponse>;

package/dist/shared/api/bff/services/bff-service.js

@@ -70,5 +70,12 @@ async function fetchProductListingPageData({ cultureCode, pageUrl, }) {
         })),
     };
 }
+async function fetchNavigationLinks({ cultureCode, source, }) {
+    const { body } = await request({
+        headers: { 'Current-Language-Id': cultureCode, Source: source },
+        url: `${config.BFF_API_URL}/navigation`,
+    });
+    return body;
+}
 
-export { fetchAnnouncements, fetchProductDetailsPageData, fetchProductListingPageData };
+export { fetchAnnouncements, fetchNavigationLinks, fetchProductDetailsPageData, fetchProductListingPageData };

package/dist/shared/feature-flags/use-feature-flags.d.ts

@@ -3,6 +3,7 @@ declare const features: {
     readonly checkoutv1: "checkoutV1";
     readonly languagev1: "languageV1";
     readonly missing: "missing";
+    readonly navigation: "navigationV2";
     readonly pdpv1: "pdpV1";
     readonly plpv1: "plpV1";
     readonly searchv1: "searchV1";

package/dist/shared/feature-flags/use-feature-flags.js

@@ -6,6 +6,7 @@ const features = {
     checkoutv1: 'checkoutV1',
     languagev1: 'languageV1',
     missing: 'missing',
+    navigation: 'navigationV2',
     pdpv1: 'pdpV1',
     plpv1: 'plpV1',
     searchv1: 'searchV1',

package/dist/shared/ga/data-layer.js

@@ -7,8 +7,9 @@ _dataLayer.push = (function (_push) {
         return _push(...items);
     };
 })(_dataLayer.push.bind(_dataLayer));
-const dataLayer = 
-// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
-typeof window === 'undefined' ? _dataLayer : (window.dataLayer ?? _dataLayer);
+const dataLayer = typeof window === 'undefined'
+    ? _dataLayer
+    : // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+        (window.dataLayer = window.dataLayer || _dataLayer);
 
 export { dataLayer };

package/dist/shared/hooks/use-mutation-observer.d.ts

@@ -0,0 +1,3 @@
+export declare function useMutationObserver<T extends Node>(onChange: MutationCallback, options: MutationObserverInit): {
+    ref: (el: T | null) => void;
+};

package/dist/shared/hooks/use-mutation-observer.js

@@ -0,0 +1,27 @@
+import { useRef, useEffect } from 'react';
+
+function useMutationObserver(onChange, options) {
+    const mutationObserver = useRef(typeof MutationObserver === 'undefined'
+        ? undefined
+        : new MutationObserver(onChange));
+    const ref = useRef(document?.body);
+    useEffect(() => {
+        if (ref.current)
+            mutationObserver.current?.observe(ref.current, options);
+        return () => {
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            mutationObserver.current?.disconnect();
+        };
+    }, [options]);
+    return {
+        ref: (el) => {
+            ref.current = el;
+            mutationObserver.current?.disconnect();
+            if (!ref.current)
+                return;
+            mutationObserver.current?.observe(ref.current, options);
+        },
+    };
+}
+
+export { useMutationObserver };

package/dist/shared/hooks/use-resize-observer.js

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useRef, useEffect } from 'react';
 
 function useResizeObserver(resizeCallback) {
     let size;
@@ -15,6 +15,12 @@ function useResizeObserver(resizeCallback) {
         ? undefined
         : new ResizeObserver(onResize));
     const ref = useRef(null);
+    useEffect(() => {
+        return () => {
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            resizeObserver.current?.disconnect();
+        };
+    }, []);
     return {
         ref: (el) => {
             ref.current = el;

package/dist/shared/hooks/use-watch-css-property.js

@@ -10,7 +10,7 @@ function useWatchCssProperty(property) {
         const mutationObserver = new MutationObserver(() => {
             if (typeof document === 'undefined')
                 return;
-            const propertyValue = getComputedStyle?.(document.body).getPropertyValue(property);
+            const propertyValue = getCssPropertyValue(property);
             setValue(propertyValue);
         });
         mutationObserver.observe(document.body, {

package/dist/shared/routing/route-button.d.ts

@@ -1 +1 @@
-export declare const RouteButton: React.FC<import("../../buttons/button/button").ButtonProps & import("./with-routing").WithRoutingProps>;
+export declare const RouteButton: React.ForwardRefExoticComponent<import("../../buttons/button/button").ButtonProps & import("./with-routing").WithRoutingProps & React.RefAttributes<HTMLElement>>;

package/dist/shared/routing/route-icon-button.d.ts

@@ -1 +1 @@
-export declare const RouteIconButton: React.FC<import("../../buttons/icon-button/icon-button").IconButtonProps & import("./with-routing").WithRoutingProps>;
+export declare const RouteIconButton: React.ForwardRefExoticComponent<import("../../buttons/icon-button/icon-button").IconButtonProps & import("./with-routing").WithRoutingProps & React.RefAttributes<HTMLElement>>;

package/dist/shared/routing/route-link.d.ts

@@ -1 +1 @@
-export declare const RouteLink: React.FC<import("../../buttons/link/link").LinkProps & import("./with-routing").WithRoutingProps>;
+export declare const RouteLink: React.ForwardRefExoticComponent<Omit<import("../../buttons/link/link").LinkProps & React.RefAttributes<HTMLElement> & import("./with-routing").WithRoutingProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/shared/routing/with-routing.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, ComponentType, FC, MouseEventHandler } from 'react';
+import { ComponentProps, ComponentType, MouseEventHandler } from 'react';
 import { NavigateOptions } from './types';
 export interface WithRoutingProps {
     href?: string;
@@ -7,4 +7,4 @@ export interface WithRoutingProps {
 export declare function withRouting<TComponent extends ComponentType<TProps>, TProps extends {
     children: React.ReactNode;
     onClick?: MouseEventHandler<TElement> | undefined;
-}, TElement extends HTMLElement>(component: TComponent): FC<ComponentProps<TComponent> & WithRoutingProps>;
+}, TElement extends HTMLElement>(component: TComponent): React.ForwardRefExoticComponent<React.PropsWithoutRef<ComponentProps<TComponent> & WithRoutingProps> & React.RefAttributes<HTMLElement>>;

package/dist/shared/routing/with-routing.js

@@ -1,9 +1,9 @@
-import { createElement } from 'react';
+import { forwardRef, createElement } from 'react';
 import { useBasePath } from './use-base-path.js';
 import { useNavigate } from './use-navigate.js';
 
 function withRouting(component) {
-    const Component = ({ href, onClick, route, ...rest }) => {
+    const Component = forwardRef(({ href, onClick, route, ...rest }, ref) => {
         const { navigate } = useNavigate();
         const basePath = useBasePath();
         if (basePath &&
@@ -28,10 +28,11 @@ function withRouting(component) {
                 }
                 return navigate(href, route);
             },
+            ref,
         };
         return createElement(component, props);
-    };
-    Component.displayName = component.displayName;
+    });
+    Component.displayName = `WithRouting(${component.displayName || component.name})`;
     return Component;
 }
 

package/dist/shared/utils/css.js

@@ -1,9 +1,62 @@
+function evaluateCssCalc(expression, options = {}) {
+    const baseFontSize = options.baseFontSize ?? 16;
+    const percentBase = options.percentBase ?? 100;
+    const expr = expression
+        .replace(/^calc\(/, '')
+        .replace(/\)$/, '')
+        .trim();
+    const tokens = expr.split(/([*+/-])/).map(token => token.trim());
+    const toPx = (value = '0px') => {
+        const match = value.match(/^([+-]?[\d.]+)(px|rem|em|%)?$/);
+        if (!match)
+            throw new Error(`Unsupported or invalid token: "${value}"`);
+        const num = Number.parseFloat(match[1] || '0');
+        const unit = match[2] || 'px';
+        switch (unit) {
+            case 'px':
+                return num;
+            case 'rem':
+            case 'em':
+                return num * baseFontSize;
+            case '%':
+                return (num / 100) * percentBase;
+            default:
+                throw new Error(`Unsupported unit: ${unit}`);
+        }
+    };
+    // Evaluate left-to-right (no operator precedence)
+    let result = toPx(tokens[0]);
+    for (let i = 1; i < tokens.length; i += 2) {
+        const operator = tokens[i];
+        const nextValue = toPx(tokens[i + 1]);
+        switch (operator) {
+            case '+':
+                result += nextValue;
+                break;
+            case '-':
+                result -= nextValue;
+                break;
+            case '*':
+                result *= nextValue;
+                break;
+            case '/':
+                result /= nextValue;
+                break;
+            default:
+                throw new Error(`Unsupported operator: ${operator}`);
+        }
+    }
+    return result;
+}
 function getCssPropertyValue(property) {
     if (typeof document === 'undefined')
         return;
     const rawValue = getComputedStyle?.(document.body).getPropertyValue(property);
     if (!rawValue)
         return undefined;
+    if (/calc/i.test(rawValue)) {
+        return `${evaluateCssCalc(rawValue, { baseFontSize: 16, percentBase: 100 })}px`;
+    }
     if (rawValue && !/\D/.test(rawValue)) {
         const valueAsNumber = Number.parseFloat(rawValue);
         if (!Number.isNaN(valueAsNumber))