@sonic-equipment/ui 183.0.0 → 184.0.0

package/dist/header/connected-header.js

@@ -7,7 +7,7 @@ import { Header } from './header.js';
 function ConnectedHeader({ className, source, }) {
     const cultureCode = useCultureCode();
     const { data } = useFetchNavigationLinks({ cultureCode, source });
-    return (jsx(Header, { className: className, links: data?.header ?? [], source: source, sticky: true }));
+    return (jsx(Header, { className: className, links: data?.header ?? [], sticky: true }));
 }
 
 export { ConnectedHeader };

package/dist/header/header.d.ts

@@ -1,9 +1,7 @@
 import { NavigationLink } from '../shared/api/bff/model/bff.model';
-import { NavigationLinkSource } from '../shared/api/bff/services/bff-service';
 export interface HeaderProps {
     className?: string;
     links: NavigationLink[];
-    source: NavigationLinkSource;
     sticky?: boolean;
 }
-export declare function Header({ className, links, source, sticky }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ className, links, sticky }: HeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/header.js

@@ -23,7 +23,7 @@ import { NavigationLinkList } from './link-list/navigation-link-list.js';
 import { SonicLogo } from './sonic-logo/sonic-logo.js';
 import styles from './header.module.css.js';
 
-function Header({ className, links, source, sticky }) {
+function Header({ className, links, sticky }) {
     const [activeSubmenu, setActiveSubmenu] = useState();
     const t = useFormattedMessage();
     const isXl = useIsBreakpoint('xl');
@@ -66,7 +66,7 @@ function Header({ className, links, source, sticky }) {
         if (activeSubmenu)
             setDesktopNavigationOpen(true);
     }, [activeSubmenu, setDesktopNavigationOpen]);
-    return (jsxs(Fragment, { children: [jsx("header", { ref: headerRef, className: clsx(styles['header'], sticky && styles['sticky'], className), "data-test-selector": "pageHeader", children: jsx(HeaderLayout, { hamburgerButton: jsx(HamburgerButton, { "aria-controls": "mobile-navigation", "data-test-selector": "pageHeaderHamburgerButton", isActive: mobileNavigationOpen, onActiveChange: toggleMobileNavigation }), hasDrawersOpen: hasDrawersOpen, logo: jsx(SonicLogo, { "data-test-selector": "pageHeaderLogo", href: source === 'shop' ? config.HOME_PAGE_URL : '/', title: t('Home') }), mainNavigation: jsx(NavigationLinkList, { activeLink: activeSubmenu, "data-test-selector": "pageHeaderMainNavigation", links: links, onSubmenuToggle: link => toggleActiveSubmenu(link) }), navigationActions: jsxs(Fragment, { children: [jsx(ConnectedAccountButton, { "data-test-selector": "pageHeaderAccountButton", href: PATHS.ACCOUNT }), jsx(ConnectedFavoritesButton, { "data-test-selector": "pageHeaderFavoritesButton", href: PATHS.FAVORITES }), jsx(ConnectedCartButton, { "data-test-selector": "pageHeaderCartButton", href: PATHS.CART })] }), search: jsx(SearchButton, { "aria-controls": "global-search", "data-test-selector": "pageHeaderSearchButton", isActive: searchOpen, onActiveChange: toggleSearch }) }) }), jsx(SearchDrawer, { groupId: searchGroupId, instanceId: searchInstanceId }), !isXl && (jsx(MobileNavigationDrawer, { groupId: mobileNavigationDrawer.groupId, instanceId: mobileNavigationDrawer.instanceId, links: links })), isXl && (jsx(DesktopNavigationDrawer, { groupId: desktopNavigationDrawer.groupId, instanceId: desktopNavigationDrawer.instanceId, onClosed: () => setActiveSubmenu(undefined), submenu: activeSubmenu }))] }));
+    return (jsxs(Fragment, { children: [jsx("header", { ref: headerRef, className: clsx(styles['header'], sticky && styles['sticky'], className), "data-test-selector": "pageHeader", children: jsx(HeaderLayout, { hamburgerButton: jsx(HamburgerButton, { "aria-controls": "mobile-navigation", "data-test-selector": "pageHeaderHamburgerButton", isActive: mobileNavigationOpen, onActiveChange: toggleMobileNavigation }), hasDrawersOpen: hasDrawersOpen, logo: jsx(SonicLogo, { "data-test-selector": "pageHeaderLogo", href: config.HOME_PAGE_URL, title: t('Home') }), mainNavigation: jsx(NavigationLinkList, { activeLink: activeSubmenu, "data-test-selector": "pageHeaderMainNavigation", links: links, onSubmenuToggle: link => toggleActiveSubmenu(link) }), navigationActions: jsxs(Fragment, { children: [jsx(ConnectedAccountButton, { "data-test-selector": "pageHeaderAccountButton", href: PATHS.ACCOUNT }), jsx(ConnectedFavoritesButton, { "data-test-selector": "pageHeaderFavoritesButton", href: PATHS.FAVORITES }), jsx(ConnectedCartButton, { "data-test-selector": "pageHeaderCartButton", href: PATHS.CART })] }), search: jsx(SearchButton, { "aria-controls": "global-search", "data-test-selector": "pageHeaderSearchButton", isActive: searchOpen, onActiveChange: toggleSearch }) }) }), jsx(SearchDrawer, { groupId: searchGroupId, instanceId: searchInstanceId }), !isXl && (jsx(MobileNavigationDrawer, { groupId: mobileNavigationDrawer.groupId, instanceId: mobileNavigationDrawer.instanceId, links: links })), isXl && (jsx(DesktopNavigationDrawer, { groupId: desktopNavigationDrawer.groupId, instanceId: desktopNavigationDrawer.instanceId, onClosed: () => setActiveSubmenu(undefined), submenu: activeSubmenu }))] }));
 }
 
 export { Header };

package/dist/pages/checkout/layouts/checkout-page-layout/checkout-page-layout.js

@@ -13,6 +13,7 @@ function CheckoutPageLayout({ actions, children, mobileSummary, overview, }) {
     const topRef = useRef(null);
     const bottomRef = useRef(null);
     const headerHeight = useWatchCssProperty('--header-bottom');
+    const isObservingIntersection = Boolean(headerHeight);
     const isScrolledBeyond = useIsScrolledBeyondElement(bottomRef.current || undefined);
     const observables = useMemo(() => [
         {
@@ -27,7 +28,7 @@ function CheckoutPageLayout({ actions, children, mobileSummary, overview, }) {
         isDisabled: isXXL,
         observables,
     });
-    return (jsxs("div", { className: styles['checkout-page-layout'], children: [!isXXL && (jsxs(Fragment, { children: [mobileSummary, jsx("div", { ref: topRef }), jsxs("div", { className: clsx(styles['top-actions'], styles.actions), children: [actions?.primary, actions?.secondary] }), !isIntersecting && !isScrolledBeyond && (jsxs("div", { className: clsx(styles['top-actions-sticky'], styles.actions), children: [actions?.primary, actions?.secondary] }))] })), jsxs("div", { className: styles.wrapper, children: [jsx("div", { className: styles.main, children: children }), jsx("div", { className: styles.side, children: jsxs("div", { className: styles['sticky-side'], children: [overview, jsxs("div", { ref: bottomRef, className: styles.actions, children: [actions?.primary, actions?.secondary] })] }) })] })] }));
+    return (jsxs("div", { className: styles['checkout-page-layout'], children: [!isXXL && (jsxs(Fragment, { children: [mobileSummary, jsx("div", { ref: topRef }), jsxs("div", { className: clsx(styles['top-actions'], styles.actions), children: [actions?.primary, actions?.secondary] }), isObservingIntersection && !isIntersecting && !isScrolledBeyond && (jsxs("div", { className: clsx(styles['top-actions-sticky'], styles.actions), children: [actions?.primary, actions?.secondary] }))] })), jsxs("div", { className: styles.wrapper, children: [jsx("div", { className: styles.main, children: children }), jsx("div", { className: styles.side, children: jsxs("div", { className: styles['sticky-side'], children: [overview, jsxs("div", { ref: bottomRef, className: styles.actions, children: [actions?.primary, actions?.secondary] })] }) })] })] }));
 }
 
 export { CheckoutPageLayout };

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

@@ -3,7 +3,15 @@ import { useState, useEffect } from 'react';
 import { getCssPropertyValue } from '../utils/css.js';
 
 function useWatchCssProperty(property) {
-    const [value, setValue] = useState(() => getCssPropertyValue(property));
+    const [value, setValue] = useState(() => {
+        try {
+            return getCssPropertyValue(property);
+        }
+        catch {
+            // If the property can not be retrieved, return undefined
+            return;
+        }
+    });
     useEffect(() => {
         if (typeof MutationObserver === 'undefined' ||
             typeof document === 'undefined')

package/dist/styles.css

@@ -6331,7 +6331,9 @@ button.swiper-pagination-bullet {
 }
 
 :root {
-  --header-bottom: calc(var(--announcements-height) + var(--header-height));
+  --header-bottom: calc(
+    var(--announcements-height, 0px) + var(--header-height, 0px)
+  );
 }
 
 .header-layout-module-uGT3X {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "183.0.0",
+  "version": "184.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {