@sonic-equipment/ui 182.0.0 → 184.0.0

package/dist/collapsables/cascading-component/use-cascading-component-container.js

@@ -1,3 +1,4 @@
+"use client";
 import { useContext } from 'react';
 import { CascadingComponentContainerContext } from './cascading-component-container-context.js';
 

package/dist/collapsables/cascading-component/use-cascading-component.js

@@ -1,3 +1,4 @@
+"use client";
 import { useCascadingComponentContainer } from './use-cascading-component-container.js';
 
 function useCascadingComponent() {

package/dist/collapsables/cascading-component/use-has-cascading-component-container.js

@@ -1,3 +1,4 @@
+"use client";
 import { useCascadingComponentContainer } from './use-cascading-component-container.js';
 
 function useHasCascadingComponentContainer() {

package/dist/config.js

@@ -58,7 +58,7 @@ const configPerEnvironment = {
         ALGOLIA_HOST: 'shop.accept-sonic-equipment.com',
         BFF_API_URL: 'https://shop.accept-sonic-equipment.com/api/v1/bff',
         COOKIE_DOMAIN: '.accept-sonic-equipment.com',
-        HOME_PAGE_URL: 'https://accept.sonic-equipment.com/',
+        HOME_PAGE_URL: 'https://accept-sonic-equipment.com/',
         SHOP_API_URL: 'https://shop.accept-sonic-equipment.com',
     }),
     'sandbox-reverse-proxy': () => ({

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/logging/use-log-error.js

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect } from 'react';
 import { logger } from './logger.js';
 

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/api/shared/hooks/use-awaitable-mutation.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useCallback } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 

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

@@ -1,3 +1,4 @@
+"use client";
 import { useCallback, useEffect } from 'react';
 import { getCurrencyCodeBySymbol } from '../model/currency.js';
 import { dataLayer } from './data-layer.js';

package/dist/shared/hooks/use-breakpoint.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useCallback, useEffect } from 'react';
 import { getCurrentBreakpoints } from '../utils/breakpoints.js';
 

package/dist/shared/hooks/use-cookie.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState } from 'react';
 import Cookies from 'js-cookie';
 import { config } from '../../config.js';

package/dist/shared/hooks/use-css-link.js

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect } from 'react';
 
 const loadedCSS = {};

package/dist/shared/hooks/use-disclosure.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useCallback } from 'react';
 
 const useDisclosure = (initialState = false) => {

package/dist/shared/hooks/use-global-disclosure.js

@@ -1,3 +1,4 @@
+"use client";
 import { useCallback } from 'react';
 import { useGlobalState } from '../providers/global-state-provider.js';
 

package/dist/shared/hooks/use-is-breakpoint.js

@@ -1,3 +1,4 @@
+"use client";
 import { useCallback, useState, useEffect } from 'react';
 import { getCurrentBreakpoints } from '../utils/breakpoints.js';
 

package/dist/shared/hooks/use-is-scrolled-beyond-element.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useEffect } from 'react';
 
 function getElementYPosition(element) {

package/dist/shared/hooks/use-local-storage.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState } from 'react';
 
 function useLocalStorage(key, initialState) {

package/dist/shared/hooks/use-script.js

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect } from 'react';
 
 const loadedScripts = {};

package/dist/shared/hooks/use-scroll-lock.js

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect } from 'react';
 
 const useScrollLock = (lock) => {

package/dist/shared/hooks/use-session-storage.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState } from 'react';
 
 function useSessionStorage(key, initialState) {

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

@@ -1,8 +1,17 @@
+"use client";
 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/shared/utils/local-storage.js

@@ -1,7 +1,6 @@
+"use client";
 import { voidFunction } from '../model/defaults.js';
 
-/* eslint-disable import/no-unused-modules */
-/* eslint-disable no-prototype-builtins */
 /** Mocks the localStorage and sessionStorage API in Node.js
  * @see https://gitlab.com/kaictl/node/mock-local-storage */
 const HAS_LOCAL_STORAGE_SUPPORT = typeof localStorage !== '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/dist/table/data-table.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { DataCard } from '../cards/data-card/data-card.js';

package/dist/table/elements/table-context.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from 'react';
 import { voidFunction } from '../../shared/model/defaults.js';
 

package/dist/table/elements/table-provider.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useMemo } from 'react';
 import { TableContext } from './table-context.js';

package/dist/table/elements/table-row-context.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from 'react';
 import { voidFunction } from '../../shared/model/defaults.js';
 

package/dist/table/elements/table-row-provider.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useState, useEffect, useMemo } from 'react';
 import { TableRowContext } from './table-row-context.js';

package/dist/table/elements/table-sort-button.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { GlyphsChevronsBoldUpIcon } from '../../icons/glyph/glyphs-chevrons-bold-up-icon.js';

package/dist/table/elements/table.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useState, useCallback } from 'react';
 import clsx from 'clsx';

package/dist/table/elements/td.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { Truncated } from '../../text/truncated/truncated.js';

package/dist/table/elements/th.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { Truncated } from '../../text/truncated/truncated.js';

package/dist/table/elements/tr.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { TableRowProvider } from './table-row-provider.js';

package/package.json

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