@sonic-equipment/ui 167.0.0 → 168.0.0

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/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;
 }