@sonic-equipment/ui 141.0.0 → 142.0.0

package/dist/shared/data/countries-languages.data.js

@@ -0,0 +1,61 @@
+const english = {
+    cultureCode: 'en-GB',
+    description: 'English',
+    id: '1',
+    languageCode: 'EN',
+};
+const dutch = {
+    cultureCode: 'nl-NL',
+    description: 'Dutch',
+    id: '2',
+    languageCode: 'NL',
+};
+const french = {
+    cultureCode: 'fr-FR',
+    description: 'French',
+    id: '3',
+    languageCode: 'FR',
+};
+const german = {
+    cultureCode: 'de-DE',
+    description: 'German',
+    id: '4',
+    languageCode: 'DE',
+};
+const netherlands = {
+    abbreviation: 'NL',
+    currencyCode: 'EUR',
+    id: '423f6a9b-0b7b-4b3b-8b3b-3b7b0b9a6f43',
+    languages: [dutch, english],
+    name: 'Netherlands',
+};
+const unitedKingdom = {
+    abbreviation: 'UK',
+    currencyCode: 'GBP',
+    id: '423f6a9b-0b7b-4b3b-8b3b-3b7b0b9a6f42',
+    languages: [english],
+    name: 'United Kingdom',
+};
+const germany = {
+    abbreviation: 'DE',
+    currencyCode: 'EUR',
+    id: '423f6a9b-0b7b-4b3b-8b3b-3b7b0b9a6f45',
+    languages: [german, english],
+    name: 'Germany',
+};
+const france = {
+    abbreviation: 'FR',
+    currencyCode: 'EUR',
+    id: '423f6a9b-0b7b-4b3b-8b3b-3b7b0b9a6f44',
+    languages: [french, english],
+    name: 'France',
+};
+const countries = [
+    netherlands,
+    unitedKingdom,
+    germany,
+    france,
+];
+const languages = [english, dutch, french, german];
+
+export { countries, dutch, english, france, french, german, germany, languages, netherlands, unitedKingdom };

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

@@ -2,7 +2,7 @@ import { useState, useCallback, useEffect } from 'react';
 import { getCurrentBreakpoints } from '../utils/breakpoints.js';
 
 const useBreakpoint = () => {
-    const [device, setDevice] = useState(getCurrentBreakpoints());
+    const [device, setDevice] = useState(getCurrentBreakpoints);
     const handleResize = useCallback(() => {
         const breakpoints = getCurrentBreakpoints();
         setDevice(previousBreakpoints => {
@@ -14,7 +14,7 @@ const useBreakpoint = () => {
     useEffect(() => {
         if (typeof window === 'undefined')
             return;
-        handleResize();
+        // handleResize()
         window.addEventListener('resize', handleResize);
         return () => window?.removeEventListener('resize', handleResize);
     }, [handleResize]);

package/dist/shared/hooks/use-cookie.d.ts

@@ -1,4 +1,5 @@
 import { CookieAttributes } from 'js-cookie';
+export declare const defaultCookieOptions: CookieAttributes;
 interface SetValueFn {
     (value: string | undefined): void;
     (fn: (value: string | undefined) => string | undefined): void;

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

@@ -1,14 +1,20 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import Cookies from 'js-cookie';
+import { config } from '../../config.js';
 
-function useCookie(name, options) {
+const defaultCookieOptions = {
+    domain: config.COOKIE_DOMAIN,
+    expires: 365,
+    path: '/',
+    sameSite: 'None',
+    secure: true,
+};
+function useCookie(name, options = defaultCookieOptions) {
     const cookieValue = Cookies.get()[name];
     const [stateValue, setStateValue] = useState(cookieValue);
-    useEffect(() => {
-        if (cookieValue === stateValue)
-            return;
+    if (cookieValue !== stateValue) {
         setStateValue(cookieValue);
-    }, [cookieValue, stateValue]);
+    }
     function setValue(valueOrFn) {
         setStateValue(oldValue => {
             const newValue = typeof valueOrFn === 'function' ? valueOrFn(oldValue) : valueOrFn;
@@ -24,4 +30,4 @@ function useCookie(name, options) {
     return [stateValue, setValue];
 }
 
-export { useCookie };
+export { defaultCookieOptions, useCookie };

package/dist/shared/hooks/use-disclosure.d.ts

@@ -1,10 +1,10 @@
 interface UseDisclosureReturnType {
-    close: () => void;
+    close: VoidFunction;
     isClosed: boolean;
     isOpen: boolean;
-    open: () => void;
+    open: VoidFunction;
     setIsOpen: (isOpen: boolean) => void;
-    toggle: () => void;
+    toggle: VoidFunction;
 }
 export declare const useDisclosure: (initialState?: boolean) => UseDisclosureReturnType;
 export {};

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

@@ -3,7 +3,7 @@ import { getCurrentBreakpoints } from '../utils/breakpoints.js';
 
 function useIsBreakpoint(breakpoint) {
     const checkIsMatch = useCallback(() => getCurrentBreakpoints()[breakpoint], [breakpoint]);
-    const [isMatch, setIsMatch] = useState(checkIsMatch());
+    const [isMatch, setIsMatch] = useState(checkIsMatch);
     const handleResize = useCallback(() => setIsMatch(checkIsMatch()), [checkIsMatch]);
     useEffect(() => {
         if (typeof window === 'undefined')

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

@@ -0,0 +1 @@
+export declare function useIsScrolledBeyondElement(element: HTMLElement | undefined): boolean;

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

@@ -0,0 +1,26 @@
+import { useState, useEffect } from 'react';
+
+function getElementYPosition(element) {
+    if (!element)
+        return undefined;
+    const rect = element.getBoundingClientRect();
+    return rect.top + (window?.scrollY || 0);
+}
+function useIsScrolledBeyondElement(element) {
+    const [isScrolledBeyond, setIsScrolledBeyond] = useState(() => (window?.scrollY || 0) > (getElementYPosition(element) || 0));
+    useEffect(() => {
+        if (!element)
+            return;
+        function handleScroll() {
+            const elementY = getElementYPosition(element);
+            setIsScrolledBeyond((window?.scrollY || 0) + (window?.innerHeight || 0) > (elementY || 0));
+        }
+        window?.addEventListener('scroll', handleScroll);
+        return () => {
+            window?.removeEventListener('scroll', handleScroll);
+        };
+    }, [element]);
+    return isScrolledBeyond;
+}
+
+export { useIsScrolledBeyondElement };

package/dist/shared/hooks/use-scroll-to.d.ts

@@ -4,5 +4,5 @@ interface ScrollOptions {
     scrollPadding?: number;
 }
 export declare const scrollToTop: (scrollOptions?: ScrollToOptions) => void;
-export declare const useScrollTo: (ref: RefObject<HTMLElement>, scrollOptions?: ScrollOptions) => () => void;
+export declare const scrollTo: (ref: RefObject<HTMLElement>, scrollOptions?: ScrollOptions) => () => void;
 export {};

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

@@ -4,7 +4,7 @@ const scrollToTop = (scrollOptions) => {
         top: 0,
     });
 };
-const useScrollTo = (ref, scrollOptions) => () => {
+const scrollTo = (ref, scrollOptions) => () => {
     if (!ref.current)
         return;
     const rect = ref.current.getBoundingClientRect();
@@ -16,4 +16,4 @@ const useScrollTo = (ref, scrollOptions) => () => {
     });
 };
 
-export { scrollToTop, useScrollTo };
+export { scrollTo, scrollToTop };

package/dist/shared/model/countries-languages.d.ts

@@ -7,8 +7,10 @@ export interface Language {
 }
 export interface Country {
     abbreviation: CountryCode;
+    currencyCode: string;
     id: string;
     languages: Language[];
     name: string;
 }
-export type CountriesLanguages = Country[];
+export declare function isLanguage(language: unknown): language is Language;
+export declare function isCountry(country: unknown): country is Country;

package/dist/shared/model/countries-languages.js

@@ -0,0 +1,32 @@
+import { isCultureCode, isLanguageCode, isCountryCode } from '../../intl/types.js';
+
+function isLanguage(language) {
+    if (typeof language !== 'object' || language === null)
+        return false;
+    if (!('cultureCode' in language) || !isCultureCode(language.cultureCode))
+        return false;
+    if (!('description' in language) || typeof language.description !== 'string')
+        return false;
+    if (!('id' in language) || typeof language.id !== 'string')
+        return false;
+    if (!('languageCode' in language) || !isLanguageCode(language.languageCode))
+        return false;
+    return true;
+}
+function isCountry(country) {
+    if (typeof country !== 'object' || country === null)
+        return false;
+    if (!('abbreviation' in country) || isCountryCode(country.abbreviation))
+        return false;
+    if (!('id' in country) || typeof country.id !== 'string')
+        return false;
+    if (!('name' in country) || typeof country.name !== 'string')
+        return false;
+    if (!('currencyCode' in country) || typeof country.currencyCode !== 'string')
+        return false;
+    if (!('languages' in country) || !Array.isArray(country.languages))
+        return false;
+    return country.languages.every(isLanguage);
+}
+
+export { isCountry, isLanguage };

package/dist/shared/model/defaults.d.ts

@@ -0,0 +1 @@
+export declare const voidFunction: VoidFunction;

package/dist/shared/model/defaults.js

@@ -0,0 +1,3 @@
+const voidFunction = () => { };
+
+export { voidFunction };

package/dist/shared/model/image.d.ts

@@ -13,7 +13,7 @@ export interface ImageSourceType {
     height?: number;
     image: ImageType | ResponsiveImageType | undefined;
     loading?: 'lazy' | 'eager';
-    onError?: () => void;
+    onError?: VoidFunction;
     title: string;
     width?: number;
 }

package/dist/shared/model/link.d.ts

@@ -0,0 +1,15 @@
+export interface NavigationLink {
+    external: boolean;
+    key: string;
+    links: NavigationLink[];
+    openInNewTab: boolean;
+    title: string;
+    type: string;
+    url: string;
+}
+export interface LinkBlock {
+    key: string;
+    links: NavigationLink[];
+    title: string;
+    type: string;
+}

package/dist/shared/providers/favorite-provider.d.ts

@@ -1,8 +1,8 @@
 import { WishListLineModel, WishListModel } from '../api/storefront/model/storefront.model';
 interface Props {
-    onFavoriteAdded?: () => void;
-    onFavoriteListAdded?: () => void;
-    onFavoriteRemoved?: () => void;
+    onFavoriteAdded?: VoidFunction;
+    onFavoriteListAdded?: VoidFunction;
+    onFavoriteRemoved?: VoidFunction;
     signInUrl: string;
 }
 export declare function FavoriteProvider(props: Props): null;

package/dist/shared/providers/global-state-provider.js

@@ -66,7 +66,8 @@ function useGlobalState(key, initialState) {
     const [rerenderState, setRerenderState] = useState(state.value);
     useEffect(() => {
         const updateState = (value) => {
-            setTimeout(() => setRerenderState(value), 0);
+            const timeoutId = setTimeout(() => setRerenderState(value), 0);
+            return () => clearTimeout(timeoutId);
         };
         state.addEventListener('stateChanged', updateState);
         return () => {

package/dist/shared/reset.module.css.js

@@ -0,0 +1,3 @@
+var resetStyles = {"reset":"reset-module-GKAEu"};
+
+export { resetStyles as default };

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

@@ -14,6 +14,7 @@ function withRouting(component) {
         }
         const props = {
             ...rest,
+            href,
             onClick(e) {
                 onClick?.(e);
                 if (!href)

package/dist/shared/utils/local-storage.d.ts

@@ -1,7 +1 @@
-/** Mocks the localStorage and sessionStorage API in Node.js
- * @see https://gitlab.com/kaictl/node/mock-local-storage */
-declare const HAS_LOCAL_STORAGE_SUPPORT: boolean;
-declare function mockStorage(): void;
-declare const noopCallback: () => void;
-declare function createStorage(): Record<string, string>;
-declare const _: void;
+export {};

package/dist/shared/utils/local-storage.js

@@ -1,4 +1,5 @@
-"use strict";
+import { voidFunction } from '../model/defaults.js';
+
 /* eslint-disable no-prototype-builtins */
 /** Mocks the localStorage and sessionStorage API in Node.js
  * @see https://gitlab.com/kaictl/node/mock-local-storage */
@@ -37,11 +38,10 @@ function mockStorage() {
         value: global.sessionStorage,
     });
 }
-const noopCallback = () => { };
 function createStorage() {
     const UNSET = Symbol();
     const s = {};
-    let _itemInsertionCallback = noopCallback;
+    let _itemInsertionCallback = voidFunction;
     Object.defineProperty(s, 'setItem', {
         get: () => {
             return (k, v = UNSET) => {
@@ -96,7 +96,7 @@ function createStorage() {
         },
         set: v => {
             if (!v || typeof v != 'function') {
-                v = noopCallback;
+                v = voidFunction;
             }
             _itemInsertionCallback = v;
         },

package/dist/shared/utils/number.d.ts

@@ -0,0 +1 @@
+export declare const ensureNumber: (value: unknown, defaultNumber?: number) => number;

package/dist/shared/utils/number.js

@@ -0,0 +1,10 @@
+const ensureNumber = (value, defaultNumber = 0) => {
+    if (typeof value === 'number')
+        return value;
+    if (typeof value !== 'string')
+        return defaultNumber;
+    const numberValue = Number.parseFloat(value);
+    return Number.isNaN(numberValue) ? defaultNumber : numberValue;
+};
+
+export { ensureNumber };

package/dist/sidebar/sidebar-provider.js

@@ -28,7 +28,10 @@ function SidebarDetectBreakpoint() {
     useEffect(() => {
         if (transition)
             return;
-        setTimeout(() => setState(state => ({ ...state, transition: true })), 10);
+        const timeoutId = setTimeout(() => setState(state => ({ ...state, transition: true })), 10);
+        return () => {
+            clearTimeout(timeoutId);
+        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [transition]);
     return null;

package/dist/sidebar/use-sidebar.js

@@ -1,5 +1,6 @@
 "use client";
 import { useCallback } from 'react';
+import { voidFunction } from '../shared/model/defaults.js';
 import { useGlobalState } from '../shared/providers/global-state-provider.js';
 import { getCurrentBreakpoints } from '../shared/utils/breakpoints.js';
 
@@ -28,9 +29,9 @@ const useSidebar = () => {
 };
 const useSidebarActions = () => {
     const [actions] = useGlobalState('sidebar-actions', {
-        close: () => { },
-        open: () => { },
-        toggle: () => { },
+        close: voidFunction,
+        open: voidFunction,
+        toggle: voidFunction,
     });
     return actions;
 };

package/dist/sign-in-form/sign-in-form.js

@@ -9,12 +9,13 @@ import { TextField } from '../forms/text-field/text-field.js';
 import { useFormattedMessage } from '../intl/use-formatted-message.js';
 import { Message } from '../message/message.js';
 import { validateEmail } from '../shared/model/address.js';
+import { voidFunction } from '../shared/model/defaults.js';
 import { RouteLink } from '../shared/routing/route-link.js';
 import { Heading } from '../typography/heading/heading.js';
 import styles from './sign-in-form.module.css.js';
 
 const GUEST_SIGN_IN_BUTTON_NAME = 'guestSignin';
-function SignInForm({ allowGuestSignIn = false, createAccountPath, errorMessage, initialEmail, initialRememberMe, isDisabled: _isDisabled = false, isPendingGuestSignIn = false, isPendingUserSignIn = false, onRecoverPasswordDialogOpen = () => { }, onSubmit = () => { }, }) {
+function SignInForm({ allowGuestSignIn = false, createAccountPath, errorMessage, initialEmail, initialRememberMe, isDisabled: _isDisabled = false, isPendingGuestSignIn = false, isPendingUserSignIn = false, onRecoverPasswordDialogOpen = voidFunction, onSubmit = voidFunction, }) {
     const t = useFormattedMessage();
     const title = t('sign in');
     const isDisabled = isPendingUserSignIn || isPendingGuestSignIn || _isDisabled;

package/dist/styles.css

@@ -259,12 +259,12 @@
     linear-gradient(0deg, #000, #000);
 }
 
-.address-module-vt62a {
+.address-info-display-module-CbRth {
   font: inherit;
   line-height: 1.5;
 }
 
-  .address-module-vt62a p {
+  .address-info-display-module-CbRth p {
     margin: 0;
   }
 
@@ -292,6 +292,10 @@
     width: 12px;
     height: 12px;
   }
+.link-module-xLqBn:focus-visible {
+    box-shadow: var(--shadow-focus-outline);
+    outline: none;
+  }
 .link-module-xLqBn:where([data-disabled]) {
     cursor: default;
     opacity: 0.4;
@@ -1242,6 +1246,11 @@
     color: var(--color-brand-dark-gray);
   }
 /* Don't show value-reveal button on empty password fields  */
+.input-module-2woJR .input-module-zjVxG input[type='password'] {
+    /* TODO: overwriting forced Spire style, remove !important in the future */
+    font-family: 'Verdana', sans-serif !important;
+    font-size: inherit !important;
+  }
 .input-module-2woJR .input-module-zjVxG input[type='password'] + .input-module-oeAz2 {
       transition: all 0.2s ease;
     }
@@ -1290,7 +1299,7 @@
     }
 
   .number-field-module-gmnog .number-field-module-8Lvgh:has(button[data-pressed]) input {
-        animation: number-field-module-OlEoa 100ms infinite;
+        animation: number-field-module-OlEoa 100ms;
       }
 
   .number-field-module-gmnog .number-field-module-8Lvgh button {
@@ -1554,7 +1563,8 @@
   }
 
   .badge-module-X5Au9:where(.badge-module-Q03Go) {
-    animation: badge-module-YSs-l var(--animation-duration) ease-in-out infinite;
+    animation: badge-module-YSs-l var(--animation-duration) ease-in-out;
+    animation-iteration-count: 3;
   }
 
   .badge-module-X5Au9:where(.badge-module-kqfth) {
@@ -2094,6 +2104,18 @@
     }
   }
 
+/*  Styles set as a module to PageContainer and Modal to override Spire's global styles
+    Remove this file and references to it when we drop Spire.
+    Also, see base.css (only used in Storybook) for more details */
+.reset-module-GKAEu {
+  font-family: var(--font-family-sonic);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-24);
+}
+.reset-module-GKAEu :where(p) {
+    margin-block: var(--space-16);
+  }
+
 .modal-module-rVFJc {
   position: fixed;
   z-index: calc(var(--modal-layer) - 1);
@@ -4985,6 +5007,10 @@ button.swiper-pagination-bullet {
     padding-inline: var(--space-32)
 }
 
+    .header-layout-module-VlTuk .header-layout-module-oKPyL {
+      inline-size: var(--space-100);
+    }
+
     .header-layout-module-VlTuk .header-layout-module-aBOJL {
       display: none;
     }
@@ -4997,6 +5023,40 @@ button.swiper-pagination-bullet {
       }
   }
 
+.navigation-link-list-module-Ku9Sa {
+  --max-width: 200px;
+
+  display: flex;
+  padding: 0;
+  margin: 0;
+  gap: var(--space-40);
+  list-style: none;
+}
+
+  .navigation-link-list-module-Ku9Sa .navigation-link-list-module-kj0Rj {
+    display: flex;
+    align-items: baseline;
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--color-black);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: var(--font-size-18);
+    font-weight: var(--font-weight-bold);
+    max-inline-size: var(--max-width);
+    text-decoration: none;
+  }
+
+  .navigation-link-list-module-Ku9Sa .navigation-link-list-module-kj0Rj:hover {
+      color: var(--color-brand-red);
+    }
+
+  .navigation-link-list-module-Ku9Sa .navigation-link-list-module-kj0Rj .navigation-link-list-module-QiKiA {
+      flex-shrink: 0;
+      margin-inline-start: var(--space-4);
+    }
+
 .sonic-logo-module-5zzhF {
   display: block;
 }
@@ -5766,7 +5826,6 @@ button.swiper-pagination-bullet {
 
   display: grid;
   overflow: clip;
-  font-family: var(--font-family-sonic);
   grid-template: minmax(0, min-content) 1fr minmax(0, min-content) / 100%;
   grid-template-areas:
     'page-header'
@@ -6077,6 +6136,10 @@ button.swiper-pagination-bullet {
     }
   }
 
+.edit-address-form-module-lLT5t {
+  margin-block-start: var(--space-8);
+}
+
 .edit-address-form-module-2bfdq {
   display: flex;
   flex-wrap: wrap;

package/dist/tooltip/tooltip.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useMemo, cloneElement } from 'react';
 import { usePress } from 'react-aria';
 import { DialogTrigger, Popover, OverlayArrow, Dialog } from 'react-aria-components';
@@ -13,12 +13,15 @@ function InfoIcon(props) {
 }
 function TriggerButton({ buttonRef, className, trigger, }) {
     const { pressProps } = usePress({ ref: buttonRef });
-    const triggerWithHandler = useMemo(() => cloneElement(trigger, {
+    const triggerWithHandler = useMemo(() => 
+    // eslint-disable-next-line @eslint-react/no-clone-element
+    cloneElement(trigger, {
         ...pressProps,
     }), [trigger, pressProps]);
     return (jsx("div", { ref: buttonRef, className: clsx(className, styles['trigger-wrapper']), children: triggerWithHandler }));
 }
-function Tooltip({ children, className, offset, placement = 'bottom', trigger = jsx(InfoIcon, {}), }) {
+const defaultTrigger = jsx(InfoIcon, {});
+function Tooltip({ children, className, offset, placement = 'bottom', trigger = defaultTrigger, }) {
     const { isOpen, setIsOpen } = useDisclosure();
     const triggerRef = useRef(null);
     return (jsxs(DialogTrigger, { isOpen: isOpen, onOpenChange: setIsOpen, children: [jsx(TriggerButton, { buttonRef: triggerRef, className: className, trigger: trigger }), jsxs(Popover, { className: styles.popover, offset: offset, placement: placement, triggerRef: triggerRef, children: [jsx(OverlayArrow, { className: styles.arrow, children: jsx("svg", { height: 12, viewBox: "0 0 12 12", width: 12, children: jsx("path", { d: "M0 0 L6 6 L12 0" }) }) }), jsx(Dialog, { className: styles.dialog, children: children })] })] }));