@sonic-equipment/ui 164.0.0 → 166.0.0

package/dist/navigation/mobile-navigation/mobile-navigation.d.ts

@@ -0,0 +1,5 @@
+import { NavigationMenuLink } from '../panel-navigation/panel-navigation';
+export interface MobileNavigationProps {
+    links: NavigationMenuLink[];
+}
+export declare function MobileNavigation({ links }: MobileNavigationProps): import("react/jsx-runtime").JSX.Element;

package/dist/navigation/mobile-navigation/mobile-navigation.js

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { MenuList } from '../../lists/menu-list/menu-list.js';
+import { MenuListItem } from '../../lists/menu-list/menu-list-item.js';
+import { PATHS } from '../../pages/paths.js';
+import { useFetchSession } from '../../shared/api/storefront/hooks/authentication/use-fetch-session.js';
+import { useFetchCurrentCartCount } from '../../shared/api/storefront/hooks/cart/use-fetch-current-cart-count.js';
+import { AccountIcon } from '../account-icon/account-icon.js';
+import { CartIcon } from '../cart-icon/cart-icon.js';
+import { FavoriteIcon } from '../favorite-icon/favorite-icon.js';
+import { PanelNavigation } from '../panel-navigation/panel-navigation.js';
+
+function MobileNavigation({ links }) {
+    const t = useFormattedMessage();
+    const { data: { isAuthenticated } = {} } = useFetchSession();
+    const cartCount = useFetchCurrentCartCount();
+    return (jsx(PanelNavigation, { allowBack: true, isNarrow: true, links: links, variant: "primary", children: jsxs(MenuList, { header: t('My Sonic'), scrollable: false, children: [jsx(MenuListItem, { badge: jsx(AccountIcon, { isAuthenticated: isAuthenticated }), href: PATHS.ACCOUNT, children: isAuthenticated ? t('My account') : t('Sign in or create account') }), jsx(MenuListItem, { badge: jsx(FavoriteIcon, {}), href: PATHS.FAVORITES, children: t('Favorites') }), jsx(MenuListItem, { badge: jsx(CartIcon, { count: cartCount }), href: PATHS.CART, children: t('Shopping cart') })] }) }));
+}
+
+export { MobileNavigation };

package/dist/navigation/panel-navigation/panel-navigation.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { ImageType } from '../../shared/model/image';
+import { NavigationLink } from '../../shared/model/link';
+interface NavigationMenuLinkBase extends Omit<NavigationLink, 'external' | 'openInNewTab' | 'type' | 'url' | 'links'> {
+    image?: ImageType;
+}
+interface MenuListItemWithChildrenProps {
+    links: NavigationMenuLink[];
+    url?: string;
+}
+interface MenuListItemWithoutChildrenProps {
+    url: string;
+}
+export type NavigationMenuLink = NavigationMenuLinkBase & (MenuListItemWithChildrenProps | MenuListItemWithoutChildrenProps);
+export interface PanelNavigationProps {
+    allowBack?: boolean;
+    children?: ReactNode;
+    className?: string;
+    header?: string | {
+        href: string;
+        title: string;
+    };
+    isNarrow?: boolean;
+    links?: NavigationMenuLink[];
+    variant?: 'primary';
+}
+export declare function PanelNavigation({ allowBack, children, className, header, isNarrow, links, variant, }: PanelNavigationProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/navigation/panel-navigation/panel-navigation.js

@@ -0,0 +1,69 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
+import clsx from 'clsx';
+import { CascadingComponent } from '../../collapsables/cascading-component/cascading-component.js';
+import { CascadingComponentContainer } from '../../collapsables/cascading-component/cascading-component-container.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { MenuList } from '../../lists/menu-list/menu-list.js';
+import { MenuListItem } from '../../lists/menu-list/menu-list-item.js';
+import { multiRef } from '../../shared/utils/refs.js';
+import styles from './panel-navigation.module.css.js';
+
+const focusableSelectors = [
+    'a[href]',
+    'button:not([disabled])',
+    'textarea:not([disabled])',
+    'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
+const NavigationMenu = forwardRef(({ allowBack, back, children, className, header, id, isNarrow, links, scrollable, variant, }, ref) => {
+    const menuRef = useRef();
+    const submenuRef = useRef(null);
+    const [selectedNavigationLink, setSelectedNavigationLink] = useState();
+    const [selectedNavigationVisible, setSelectedNavigationVisible] = useState(false);
+    const onUnmounted = useCallback(() => {
+        setSelectedNavigationLink(undefined);
+    }, []);
+    const onFocus = useCallback((ref) => () => {
+        if (!ref.current)
+            return;
+        const focusable = ref.current.querySelector(focusableSelectors);
+        focusable?.focus();
+    }, []);
+    useEffect(() => {
+        // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+        setSelectedNavigationVisible(Boolean(selectedNavigationLink));
+    }, [selectedNavigationLink]);
+    const t = useFormattedMessage();
+    return (jsxs(Fragment, { children: [jsxs("div", { ref: multiRef(ref, menuRef), className: clsx(styles['panel'], isNarrow && styles['narrow'], className), id: id, children: [jsx(MenuList, { back: back, header: header, scrollable: scrollable, variant: variant, children: links?.map(link => 'links' in link ? (jsx(MenuListItem, { hasChildren: true, "aria-controls": `menu-${link.key}`, image: link.image, isSelected: selectedNavigationLink?.key === link.key, onClick: () => setSelectedNavigationLink(selectedNavigationLink?.key === link.key
+                                ? undefined
+                                : link), children: link.title }, link.key)) : (jsx(MenuListItem, { href: link.url, image: link.image, children: link.title }, link.key))) }), children] }), jsx(CascadingComponent, { isVisible: selectedNavigationVisible, nodeRef: submenuRef, onEntered: onFocus(submenuRef), onExited: onFocus(menuRef), onUnmounted: onUnmounted, children: jsx(NavigationMenu, { ref: submenuRef, allowBack: allowBack, back: allowBack
+                        ? {
+                            onClick: () => {
+                                setSelectedNavigationVisible(false);
+                            },
+                            title: header
+                                ? typeof header === 'string'
+                                    ? header
+                                    : header.title
+                                : t('Main menu'),
+                        }
+                        : undefined, header: selectedNavigationLink?.url
+                        ? {
+                            href: selectedNavigationLink.url,
+                            title: selectedNavigationLink.title,
+                        }
+                        : selectedNavigationLink?.title, id: selectedNavigationLink?.key
+                        ? `menu-${selectedNavigationLink.key}`
+                        : undefined, isNarrow: isNarrow, links: selectedNavigationLink && 'links' in selectedNavigationLink
+                        ? selectedNavigationLink.links
+                        : [] }, selectedNavigationLink?.key) })] }));
+});
+NavigationMenu.displayName = 'NavigationMenu';
+function PanelNavigation({ allowBack, children, className, header, isNarrow, links, variant, }) {
+    const t = useFormattedMessage();
+    return (jsx("section", { "aria-label": t('Navigation'), className: clsx(styles['panel-navigation'], className), children: jsx(CascadingComponentContainer, { children: jsx("div", { className: clsx(styles['panels'], isNarrow && styles['narrow']), children: jsx(NavigationMenu, { allowBack: allowBack, className: children ? styles['top-panel'] : undefined, header: header, id: "panel-navigation-first-level", isNarrow: isNarrow, links: links, scrollable: children ? false : undefined, variant: variant, children: children }) }) }) }));
+}
+
+export { PanelNavigation };

package/dist/navigation/panel-navigation/panel-navigation.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"panel-navigation":"panel-navigation-module-FnSua","panels":"panel-navigation-module-torfG","narrow":"panel-navigation-module-7K80h","panel":"panel-navigation-module-j3ZBu","top-panel":"panel-navigation-module-1yGRP"};
+
+export { styles as default };

package/dist/pages/checkout/payment-page/components/payment.js

@@ -304,7 +304,7 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
                                     setAsSoonAsPossible(checked);
                                     if (checked)
                                         setDeliveryDate('');
-                                }, children: t('As soon as possible') }), jsx(InfoIconTooltip, { variant: "stroke", children: t('Selecting As Soon As Possible will enable us to send the products to you as they become available.') })] })] })), jsx(Select, { isRequired: true, "data-test-selector": "industrySelect", defaultSelectedOption: cart.properties.industry, isDisabled: isDisabled, label: t('Industry'), name: "industry", options: {
+                                }, children: t('As soon as possible') }), jsx(InfoIconTooltip, { variant: "stroke", children: t('Selecting As Soon As Possible will enable us to send the products to you as they become available.') })] })] })), jsx(Select, { isRequired: true, showLabel: true, "data-test-selector": "industrySelect", defaultSelectedOption: cart.properties.industry, isDisabled: isDisabled, label: t('Industry'), name: "industry", options: {
                     /* eslint-disable sort-keys-fix/sort-keys-fix */
                     PP: t('industry.PP'),
                     AU: t('industry.AU'),

package/dist/pages/paths.d.ts

@@ -5,6 +5,7 @@ export declare const PATHS: {
     readonly CART: "/Cart";
     readonly CHECKOUT_SHIPPING: "/CheckoutShipping";
     readonly CHECKOUT_SHIPPING_VIA_SIGNIN: "/SignIn?returnUrl=/CheckoutShipping";
+    readonly FAVORITES: "/MyAccount/MyLists";
     readonly HOME: "/";
     readonly ORDER_CONFIRMATION: "/OrderConfirmation";
     readonly REVIEW_AND_SUBMIT: "/CheckoutReviewAndSubmit";

package/dist/pages/paths.js

@@ -5,6 +5,7 @@ const PATHS = {
     CART: '/Cart',
     CHECKOUT_SHIPPING: '/CheckoutShipping',
     CHECKOUT_SHIPPING_VIA_SIGNIN: '/SignIn?returnUrl=/CheckoutShipping',
+    FAVORITES: '/MyAccount/MyLists',
     HOME: '/',
     ORDER_CONFIRMATION: '/OrderConfirmation',
     REVIEW_AND_SUBMIT: '/CheckoutReviewAndSubmit',

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

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

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

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+import { useGlobalState } from '../providers/global-state-provider.js';
+
+const useGlobalDisclosure = (key, isInitialOpen = false) => {
+    const [isOpen, setIsOpen] = useGlobalState(key, isInitialOpen);
+    const open = useCallback(() => {
+        setIsOpen(true);
+    }, [setIsOpen]);
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, [setIsOpen]);
+    const toggle = useCallback(() => {
+        setIsOpen(prevIsOpen => !prevIsOpen);
+    }, [setIsOpen]);
+    return {
+        close,
+        isClosed: !isOpen,
+        isOpen,
+        open,
+        setIsOpen,
+        toggle,
+    };
+};
+
+export { useGlobalDisclosure };

package/dist/shared/hooks/use-watch-css-property.d.ts

@@ -1 +1 @@
-export declare function useWatchCssProperty(property: string): string | undefined;
+export declare function useWatchCssProperty(property: string): string | number | undefined;

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

@@ -1,9 +1,8 @@
 import { useState, useEffect } from 'react';
+import { getCssPropertyValue } from '../utils/css.js';
 
 function useWatchCssProperty(property) {
-    const [value, setValue] = useState(document?.body
-        ? getComputedStyle?.(document.body).getPropertyValue(property)
-        : undefined);
+    const [value, setValue] = useState(() => getCssPropertyValue(property));
     useEffect(() => {
         if (typeof MutationObserver === 'undefined' ||
             typeof document === 'undefined')

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

@@ -6,6 +6,7 @@ export interface Category {
     title: string;
 }
 export declare function transformAlgoliaCategoryData(categories: RefinementListItem[]): {
+    count: number;
     href: string;
     image: {
         1: string;
@@ -13,6 +14,10 @@ export declare function transformAlgoliaCategoryData(categories: RefinementListI
         3: string;
         altText: string;
     } | undefined;
+    isRefined: boolean;
+    label: string;
     name: string;
     path: string[];
+    sortOrder: number;
+    value: string;
 }[];

package/dist/shared/model/category.js

@@ -3,6 +3,7 @@ function transformAlgoliaCategoryData(categories) {
         .map(item => {
         const data = JSON.parse(item.value);
         return {
+            count: item.count,
             href: data.href,
             image: data.images.length > 0
                 ? {
@@ -15,11 +16,16 @@ function transformAlgoliaCategoryData(categories) {
                     altText: data.name,
                 }
                 : undefined,
+            isRefined: item.isRefined,
+            label: item.label,
             name: data.name,
             path: data.path.split(' > '),
+            sortOrder: data.sortOrder,
+            value: item.value,
         };
     })
-        .sort((a, b) => a.name.localeCompare(b.name));
+        .sort((a, b) => (a.sortOrder || 100_000) - (b.sortOrder || 100_000) ||
+        a.name.localeCompare(b.name));
 }
 
 export { transformAlgoliaCategoryData };

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

@@ -1,12 +1,12 @@
 import { CurrencyCode } from '../../intl/types';
 export interface ProductPriceType {
-    currencyCode: CurrencyCode;
+    currencyCode?: CurrencyCode;
     isVatIncluded: boolean;
     originalPrice?: number;
     price: number;
 }
 export interface ProductTotalPriceType {
-    currencyCode: CurrencyCode;
+    currencyCode?: CurrencyCode;
     originalTotalPrice?: number;
     pricePerUnit?: number;
     totalPrice: number;

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

@@ -0,0 +1 @@
+export declare function getCssPropertyValue(property: string): string | number | undefined;

package/dist/shared/utils/css.js

@@ -0,0 +1,15 @@
+function getCssPropertyValue(property) {
+    if (typeof document === 'undefined')
+        return;
+    const rawValue = getComputedStyle?.(document.body).getPropertyValue(property);
+    if (!rawValue)
+        return undefined;
+    if (rawValue && !/\D/.test(rawValue)) {
+        const valueAsNumber = Number.parseFloat(rawValue);
+        if (!Number.isNaN(valueAsNumber))
+            return valueAsNumber;
+    }
+    return rawValue;
+}
+
+export { getCssPropertyValue };

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

@@ -0,0 +1,2 @@
+import { ForwardedRef, LegacyRef, MutableRefObject } from 'react';
+export declare function multiRef<T extends HTMLElement>(...refs: (ForwardedRef<T> | MutableRefObject<T | undefined>)[]): LegacyRef<T>;

package/dist/shared/utils/refs.js

@@ -0,0 +1,14 @@
+function multiRef(...refs) {
+    return function (el) {
+        for (const ref of refs) {
+            if (ref && ref instanceof Function) {
+                ref(el);
+            }
+            else if (ref) {
+                ref.current = el;
+            }
+        }
+    };
+}
+
+export { multiRef };

package/dist/sidebar/sidebar-provider.js

@@ -43,7 +43,7 @@ function SidebarProvider({ children }) {
             [styles['transition']]: transition,
             [styles['docked']]: isDocked,
             [styles['open']]: isOpen,
-        }), children: [jsx(SidebarDetectBreakpoint, {}), children, isDocked && isOpen && (jsx(BackgroundOverlay, { isOpen: isOpen, onClose: close }))] }));
+        }), children: [jsx(SidebarDetectBreakpoint, {}), children, jsx(BackgroundOverlay, { isOpen: isDocked && isOpen, onClick: close })] }));
 }
 
 export { SidebarDetectBreakpoint, SidebarProvider };