@sonic-equipment/ui 259.0.4 → 260.0.1

package/dist/pages/countries-page/countries-page.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { ConnectedCountryLanguageSelectionList } from '../../country-language-selection-list/connected-country-language-selection-list.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { usePaths } from '../../shared/routing/use-paths.js';
+import { Page } from '../components/page/page.js';
+
+function CountriesPage() {
+    const paths = usePaths();
+    const t = useFormattedMessage();
+    const title = t('Choose your country or region…');
+    return (jsx(Page, { breadcrumb: [
+            { href: paths.HOME, label: 'Home' },
+            { href: '', label: 'Countries' },
+        ], "data-test-selector": "countriesPage", title: title, children: jsx(ConnectedCountryLanguageSelectionList, {}) }));
+}
+
+export { CountriesPage };

package/dist/pages/error-page/error-page.js

@@ -13,7 +13,7 @@ function ErrorPage({ error, title = 'Something went wrong', }) {
     }, [error]);
     return (jsx(Page, { breadcrumb: [
             { href: paths.HOME, label: 'Home' },
-            { href: paths.HOME, label: 'Error' },
+            { href: '', label: 'Error' },
         ], "data-test-selector": "errorPage", title: title, children: jsx(DefaultErrorView, { error: error, title: "" }) }));
 }
 

package/dist/pages/my-sonic/actions/change-customer/change-customer.js

@@ -5,7 +5,7 @@ import { ListBox, ListBoxItem, Text } from 'react-aria-components';
 import clsx from 'clsx';
 import { Checkbox } from '../../../../forms/elements/checkbox/checkbox.js';
 import { SearchField } from '../../../../forms/fields/search-field/search-field.js';
-import { SolidRatingIcon } from '../../../../icons/solid/solid-rating-icon.js';
+import { Icon } from '../../../../icon/icon.js';
 import { FormattedMessage } from '../../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
 import { Message } from '../../../../message/message.js';
@@ -57,7 +57,7 @@ function ChangeCustomer({ allowSetDefault = false, className, data, defaultCusto
                     if (key === 'ArrowDown') {
                         listBoxRef.current?.focus();
                     }
-                }, placeholder: t('Search for a customer'), showLabel: false, size: "md", value: filter, variant: "outline" }), jsx(ListBox, { ref: listBoxRef, "aria-label": "List of customers", "aria-live": "polite", className: styles['list-box'], id: "filtered-customer-results-list", items: listBoxItems, onAction: key => onCustomerSelected?.(String(key)), onSelectionChange: keys => onCustomerSelectionChanged(String([...keys][0])), renderEmptyState: () => !isLoading && (jsx(Message, { type: "info", children: jsx(FormattedMessage, { id: "No results found. Please refine your search." }) })), selectionBehavior: "replace", selectionMode: "single", children: listBoxItem => 'type' in listBoxItem ? (jsx(ListBoxItem, { isDisabled: true, textValue: listBoxItem.id, children: jsx(Message, { type: listBoxItem.type, children: jsx(Text, { slot: "description", children: listBoxItem.message }) }) }, "marker")) : (jsxs(ListBoxItem, { className: styles['list-box-item'], id: listBoxItem.id, textValue: listBoxItem.id, children: [jsxs(Text, { slot: "label", children: [jsxs("div", { className: styles['company-name'], children: [jsx(HighlightText, { className: styles['company-name-text'], highlightText: filter, text: `${listBoxItem.companyName}` }), defaultCustomerId === listBoxItem.id && (jsx(SolidRatingIcon, { className: styles['selected-icon'] }))] }), jsx(HighlightText, { className: styles['customer-number'], highlightText: filter, text: `${listBoxItem.customerNumber}` })] }), jsxs(Text, { slot: "description", children: [jsx("div", { children: jsx(HighlightText, { highlightText: filter, text: [
+                }, placeholder: t('Search for a customer'), showLabel: false, size: "md", value: filter, variant: "outline" }), jsx(ListBox, { ref: listBoxRef, "aria-label": "List of customers", "aria-live": "polite", className: styles['list-box'], id: "filtered-customer-results-list", items: listBoxItems, onAction: key => onCustomerSelected?.(String(key)), onSelectionChange: keys => onCustomerSelectionChanged(String([...keys][0])), renderEmptyState: () => !isLoading && (jsx(Message, { type: "info", children: jsx(FormattedMessage, { id: "No results found. Please refine your search." }) })), selectionBehavior: "replace", selectionMode: "single", children: listBoxItem => 'type' in listBoxItem ? (jsx(ListBoxItem, { isDisabled: true, textValue: listBoxItem.id, children: jsx(Message, { type: listBoxItem.type, children: jsx(Text, { slot: "description", children: listBoxItem.message }) }) }, "marker")) : (jsxs(ListBoxItem, { className: styles['list-box-item'], id: listBoxItem.id, textValue: listBoxItem.id, children: [jsxs(Text, { slot: "label", children: [jsxs("div", { className: styles['company-name'], children: [jsx(HighlightText, { className: styles['company-name-text'], highlightText: filter, text: `${listBoxItem.companyName}` }), defaultCustomerId === listBoxItem.id && (jsx(Icon, { className: styles['selected-icon'], name: "StarSolid" }))] }), jsx(HighlightText, { className: styles['customer-number'], highlightText: filter, text: `${listBoxItem.customerNumber}` })] }), jsxs(Text, { slot: "description", children: [jsx("div", { children: jsx(HighlightText, { highlightText: filter, text: [
                                             [listBoxItem.firstName, listBoxItem.lastName].join(' '),
                                         ]
                                             .filter(Boolean)

package/dist/pages/my-sonic/navigation/my-sonic-desktop-navigation.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { Icon } from '../../../icon/icon.js';
 import { FormattedMessage } from '../../../intl/formatted-message.js';
 import { MenuList } from '../../../lists/menu-list/menu-list.js';
 import { MenuListItem } from '../../../lists/menu-list/menu-list-item.js';
@@ -10,7 +11,7 @@ import styles from './my-sonic-desktop-navigation.module.css.js';
 function MySonicDesktopNavigation({ className, currentPath, onSignOut, }) {
     const mySonicNavigationItems = useMySonicNavigationItems();
     const { basePathname } = useLocation();
-    return (jsx(MenuList, { collapsible: true, className: className, children: mySonicNavigationItems.map(item => (jsx(MenuListItem, { badge: jsx(item.Icon, {}), "data-test-selector": item['data-test-selector'], ...(item.type === 'action'
+    return (jsx(MenuList, { collapsible: true, className: className, children: mySonicNavigationItems.map(item => (jsx(MenuListItem, { badge: jsx(Icon, { name: item.icon }), "data-test-selector": item['data-test-selector'], ...(item.type === 'action'
                 ? item.action === 'signout'
                     ? { onClick: onSignOut }
                     : {}

package/dist/pages/my-sonic/navigation/my-sonic-navigation-items.d.ts

@@ -1,8 +1,8 @@
-import { ComponentType } from 'react';
+import { IconName } from '../../../icons';
 import { TranslationId } from '../../../intl/translation-id';
 interface MySonicNavigationItemBase {
-    Icon: ComponentType;
     'data-test-selector'?: string;
+    icon: IconName;
     label: TranslationId;
     type: 'link' | 'action';
 }

package/dist/pages/my-sonic/navigation/my-sonic-navigation-items.js

@@ -1,8 +1,4 @@
 "use client";
-import { SolidCartIcon } from '../../../icons/solid/solid-cart-icon.js';
-import { SolidFavoriteIcon } from '../../../icons/solid/solid-favorite-icon.js';
-import { SolidLoginIcon } from '../../../icons/solid/solid-login-icon.js';
-import { SolidLogOutIcon } from '../../../icons/solid/solid-logout-icon.js';
 import { usePaths } from '../../../shared/routing/use-paths.js';
 import { isObject } from '../../../shared/utils/types.js';
 
@@ -16,30 +12,30 @@ function useMySonicNavigationItems() {
     const paths = usePaths();
     return [
         {
-            Icon: SolidLoginIcon,
             'data-test-selector': 'accountLink',
+            icon: 'UserSolid',
             label: 'Account',
             path: paths.ACCOUNT,
             type: 'link',
         },
         {
-            Icon: SolidFavoriteIcon,
             'data-test-selector': 'favoritesLink',
+            icon: 'FavoriteSolid',
             label: 'Favorites',
             path: paths.ACCOUNT_MY_LISTS,
             type: 'link',
         },
         {
-            Icon: SolidCartIcon,
             'data-test-selector': 'ordersLink',
+            icon: 'CartSolid',
             label: 'Orders',
             path: paths.ACCOUNT_ORDERS,
             type: 'link',
         },
         {
-            Icon: SolidLogOutIcon,
             action: 'signout',
             'data-test-selector': 'logoutButton',
+            icon: 'SignOutSolid',
             label: 'Log out',
             type: 'action',
         },

package/dist/pages/my-sonic/widgets/connected-address-book-widget.js

@@ -5,8 +5,8 @@ import { Button } from '../../../buttons/button/button.js';
 import { TableCard } from '../../../cards/table-card/table-card.js';
 import { Pagination } from '../../../filters/pagination/pagination.js';
 import { SearchField } from '../../../forms/fields/search-field/search-field.js';
+import { Icon } from '../../../icon/icon.js';
 import { SolidEditIcon } from '../../../icons/solid/solid-edit-icon.js';
-import { SolidRatingIcon } from '../../../icons/solid/solid-rating-icon.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { DynamicLoadingOverlay } from '../../../loading/dynamic-loading-overlay.js';
 import { useFetchPagedShipToAddresses } from '../../../shared/api/storefront/hooks/customer/use-fetch-paged-ship-to-addresses.js';
@@ -73,7 +73,7 @@ function ConnectedAddressBookWidget() {
                             },
                             value: {
                                 render: address => {
-                                    return (address.isDefault && (jsx(SolidRatingIcon, { "aria-label": `(${t('addressProperty.Default')})`, className: styles['default-icon'], "data-test-selector": "default-address" })));
+                                    return (address.isDefault && (jsx(Icon, { className: styles['default-icon'], "data-test-selector": "default-address", label: `(${t('addressProperty.Default')})`, name: "StarSolid" })));
                                 },
                             },
                         },

package/dist/shared/api/storefront/hooks/authentication/use-patch-session.d.ts

@@ -4,11 +4,14 @@ export declare function usePatchSession(): {
     isLoading: boolean;
     isSuccess: boolean;
     mutate: (args_0: {
-        session: Partial<Omit<import("../../model/storefront.model").SessionModel, "billTo" | "shipTo"> & {
+        session: Partial<Omit<import("../../model/storefront.model").SessionModel, "billTo" | "shipTo" | "language"> & {
             billTo?: import("../../model/storefront.model").BillToModel | {
                 id: string;
             } | null;
             billToId?: string | null;
+            language?: import("../../model/storefront.model").LanguageModel | {
+                id: string;
+            } | null;
             shipTo?: import("../../model/storefront.model").ShipToModel | {
                 id: string;
             } | null;

package/dist/shared/api/storefront/model/storefront.model.d.ts

@@ -159,11 +159,14 @@ export interface SessionModel extends BaseModel {
     userRoles: string;
     userRolesTranslated: string;
 }
-export type PatchSessionModel = Partial<Omit<SessionModel, 'billTo' | 'shipTo'> & {
+export type PatchSessionModel = Partial<Omit<SessionModel, 'billTo' | 'shipTo' | 'language'> & {
     billTo?: BillToModel | {
         id: string;
     } | null;
     billToId?: string | null;
+    language?: LanguageModel | {
+        id: string;
+    } | null;
     shipTo?: ShipToModel | {
         id: string;
     } | null;

package/dist/shared/error/default-error-view.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { Button } from '../../buttons/button/button.js';
 import { Details } from '../../display/details/details.js';
-import { StrokeRecentIcon } from '../../icons/stroke/stroke-recent-icon.js';
+import { Icon } from '../../icon/icon.js';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import { Heading } from '../../typography/heading/heading.js';
 import { isProductionEnvironment } from '../utils/environment.js';
@@ -11,7 +11,7 @@ import styles from './default-error-view.module.css.js';
 
 function DefaultErrorView({ className, error, errorInfo, resetError, resetLabel, showErrorDetails = !isProductionEnvironment, showReset, title, }) {
     const t = useFormattedMessage();
-    return (jsxs("section", { className: clsx(styles['default-error-view'], className), children: [title && (jsx(Heading, { className: styles['title'], size: "s", tag: "h1", children: title || t('Something went wrong') })), jsx("p", { children: error.message || t('An unexpected error occured. Please try again.') }), showErrorDetails && (jsxs(Details, { className: styles['error-details'], lang: "en", summary: "Technical Details (only visible in development mode)", children: [jsx("output", { className: styles['error-kind'], children: error.toString() }), error.stack && (jsxs("div", { className: styles['error-info'], children: [jsx(Heading, { className: styles['error-info-title'], size: "xs", tag: "h2", children: "Stack:" }), jsx("pre", { className: styles['error-info-data'], children: error.stack })] })), errorInfo?.componentStack && (jsxs("div", { className: styles['component-info'], children: [jsx(Heading, { className: styles['error-info-title'], size: "xs", tag: "h2", children: "Component stack:" }), jsx("pre", { className: styles['error-info-data'], children: errorInfo.componentStack })] }))] })), showReset && resetError && (jsx(Button, { light: true, className: styles['reset-button'], color: "secondary", icon: jsx(StrokeRecentIcon, {}), onClick: resetError, size: "sm", type: "button", variant: "outline", children: resetLabel || t('Reset') }))] }));
+    return (jsxs("section", { className: clsx(styles['default-error-view'], className), children: [title && (jsx(Heading, { className: styles['title'], size: "s", tag: "h1", children: title || t('Something went wrong') })), jsx("p", { children: error.message || t('An unexpected error occured. Please try again.') }), showErrorDetails && (jsxs(Details, { className: styles['error-details'], lang: "en", summary: "Technical Details (only visible in development mode)", children: [jsx("output", { className: styles['error-kind'], children: error.toString() }), error.stack && (jsxs("div", { className: styles['error-info'], children: [jsx(Heading, { className: styles['error-info-title'], size: "xs", tag: "h2", children: "Stack:" }), jsx("pre", { className: styles['error-info-data'], children: error.stack })] })), errorInfo?.componentStack && (jsxs("div", { className: styles['component-info'], children: [jsx(Heading, { className: styles['error-info-title'], size: "xs", tag: "h2", children: "Component stack:" }), jsx("pre", { className: styles['error-info-data'], children: errorInfo.componentStack })] }))] })), showReset && resetError && (jsx(Button, { light: true, className: styles['reset-button'], color: "secondary", icon: jsx(Icon, { name: "Refresh", size: "sm" }), onClick: resetError, size: "sm", type: "button", variant: "outline", children: resetLabel || t('Reset') }))] }));
 }
 
 export { DefaultErrorView };

package/dist/shared/hooks/use-resize-observer.js

@@ -1,6 +1,7 @@
 "use client";
 import { useRef, useEffect } from 'react';
 
+// Note on this hook: it does not seem to work on a component that is mounted conditionally
 function useResizeObserver(resizeCallback) {
     let size;
     function onResize(entries, _observer) {

package/dist/shared/routing/route-provider.d.ts

@@ -6,6 +6,7 @@ export interface RouteProviderProps {
     navigate: NavigateFunction;
     paths: Paths;
     url: {
+        alternativeHrefs?: Record<string, string>;
         basePathname?: string;
         href: string;
         pathname: string;

package/dist/shared/routing/route-utils.d.ts

@@ -1,4 +1,5 @@
-export declare function buildHref({ basePathname, href, }: {
+export declare function buildHref({ basePathname, href, ignoreLocalePrefix, }: {
     basePathname?: string;
     href: string;
+    ignoreLocalePrefix?: boolean;
 }): string;

package/dist/shared/routing/route-utils.js

@@ -1,7 +1,8 @@
-function buildHref({ basePathname, href, }) {
+function buildHref({ basePathname, href, ignoreLocalePrefix, }) {
     if (!href.startsWith('http') &&
         basePathname &&
         basePathname !== '/' &&
+        !ignoreLocalePrefix &&
         !href.startsWith(`/${basePathname}`)) {
         return `/${basePathname.replace(/^\//, '')}/${href.replace(/^\//, '')}`;
     }

package/dist/shared/routing/types.d.ts

@@ -24,6 +24,7 @@ export interface RouteContextValue {
     navigate: NavigateFunction;
     paths: Paths;
     url: {
+        alternativeHrefs?: Record<string, string>;
         basePathname?: string;
         href: string;
         pathname: string;
@@ -36,6 +37,7 @@ export interface RouteLinkElementProps extends React.HTMLProps<HTMLAnchorElement
     route?: NavigateOptions;
 }
 export interface NavigateOptions {
+    ignoreLocalePrefix?: boolean;
     prefetch?: boolean;
     reload?: boolean;
     replace?: boolean;

package/dist/shared/routing/use-route-link.d.ts

@@ -1,5 +1,5 @@
 import { NavigateOptions } from './types';
-export declare function useRouteLink(): {
+export declare function useRouteLink(ignoreLocalePrefix?: boolean): {
     RouteLinkElement: React.ElementType<import("./types").RouteLinkElementProps>;
     getRouteLinkProps: (href: string, route?: NavigateOptions) => {
         href: string;

package/dist/shared/routing/use-route-link.js

@@ -5,18 +5,18 @@ import { useLocation } from './use-location.js';
 import { useOnNavigate } from './use-on-navigate.js';
 import { useRouteLinkElement } from './use-route-link-element.js';
 
-function useRouteLink() {
+function useRouteLink(ignoreLocalePrefix) {
     const { basePathname } = useLocation();
     const RouteLinkElement = useRouteLinkElement();
     const triggerCallbacks = useOnNavigate();
     const getRouteLinkProps = useCallback((href, route) => {
-        href = buildHref({ basePathname, href });
+        href = buildHref({ basePathname, href, ignoreLocalePrefix });
         return {
             href,
             onNavigate: () => triggerCallbacks(href, route),
             route,
         };
-    }, [basePathname, triggerCallbacks]);
+    }, [basePathname, triggerCallbacks, ignoreLocalePrefix]);
     return {
         RouteLinkElement,
         getRouteLinkProps,

package/dist/shared/utils/css.js

@@ -1,61 +1,17 @@
-function evaluateCssCalc(expression, options = {}) {
-    const baseFontSize = options.baseFontSize ?? 16;
-    const percentBase = options.percentBase ?? 100;
-    const expr = expression
-        .replace(/^calc\(/, '')
-        .replace(/\)$/, '')
-        .trim();
-    const tokens = expr.split(/([*+/-])/).map(token => token.trim());
-    const toPx = (value = '0px') => {
-        const match = value.match(/^([+-]?[\d.]+)(px|rem|em|%)?$/);
-        if (!match)
-            throw new Error(`Unsupported or invalid token: "${value}"`);
-        const num = Number.parseFloat(match[1] || '0');
-        const unit = match[2] || 'px';
-        switch (unit) {
-            case 'px':
-                return num;
-            case 'rem':
-            case 'em':
-                return num * baseFontSize;
-            case '%':
-                return (num / 100) * percentBase;
-            default:
-                throw new Error(`Unsupported unit: ${unit}`);
-        }
-    };
-    // Evaluate left-to-right (no operator precedence)
-    let result = toPx(tokens[0]);
-    for (let i = 1; i < tokens.length; i += 2) {
-        const operator = tokens[i];
-        const nextValue = toPx(tokens[i + 1]);
-        switch (operator) {
-            case '+':
-                result += nextValue;
-                break;
-            case '-':
-                result -= nextValue;
-                break;
-            case '*':
-                result *= nextValue;
-                break;
-            case '/':
-                result /= nextValue;
-                break;
-            default:
-                throw new Error(`Unsupported operator: ${operator}`);
-        }
-    }
-    return result;
-}
 function getCssPropertyValue(property) {
-    if (typeof document === 'undefined')
+    if (typeof document === 'undefined' || !getComputedStyle)
         return;
-    const rawValue = getComputedStyle?.(document.body).getPropertyValue(property);
+    const rawValue = getComputedStyle(document.body).getPropertyValue(property);
     if (!rawValue)
         return undefined;
     if (/calc/i.test(rawValue)) {
-        return `${evaluateCssCalc(rawValue, { baseFontSize: 16, percentBase: 100 })}px`;
+        const el = document.createElement('div');
+        el.style.cssText = 'position:fixed;visibility:hidden;pointer-events:none';
+        el.style.top = rawValue;
+        document.body.append(el);
+        const px = Number.parseFloat(getComputedStyle(el).top);
+        el.remove();
+        return Number.isNaN(px) ? undefined : `${px}px`;
     }
     if (rawValue && !/\D/.test(rawValue)) {
         const valueAsNumber = Number.parseFloat(rawValue);

package/dist/sidebar/sidebar.js

@@ -2,12 +2,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { IconButton } from '../buttons/icon-button/icon-button.js';
-import { StrokeCloseboxIcon } from '../icons/stroke/stroke-closebox-icon.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
 import { useInert } from '../shared/hooks/use-inert.js';
 import { useSidebar } from './use-sidebar.js';
 import styles from './sidebar.module.css.js';
 
 function Sidebar({ children, className }) {
+    const t = useFormattedMessage();
     const { isDocked, isOpen, toggle, transition } = useSidebar();
     const { ref: sidebarRef } = useInert(isOpen);
     return (jsxs("aside", { ref: sidebarRef, "aria-hidden": !isOpen.toString(), className: clsx(styles.sidebar, {
@@ -16,7 +17,7 @@ function Sidebar({ children, className }) {
             [styles['is-closed']]: !isOpen,
             [styles['is-docked']]: isDocked,
             [styles['is-not-docked']]: !isDocked,
-        }, className), children: [jsx(IconButton, { className: styles.close, color: "secondary", onClick: toggle, children: jsx(StrokeCloseboxIcon, {}) }), jsx("div", { className: styles['content'], children: children })] }));
+        }, className), children: [jsx(IconButton, { className: styles.close, icon: "Close", label: t('Close'), onClick: toggle, size: "lg", theme: "secondary" }), jsx("div", { className: styles['content'], children: children })] }));
 }
 
 export { Sidebar };

package/dist/sidebar/toggle-sidebar-button.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { Button } from '../buttons/button/button.js';
-import { StrokeFilterIcon } from '../icons/stroke/stroke-filter-icon.js';
+import { Icon } from '../icon/icon.js';
 import { FormattedMessage } from '../intl/formatted-message.js';
 import { useSidebar } from './use-sidebar.js';
 
 const ToggleSidebarButton = () => {
     const { isOpen, toggle } = useSidebar();
-    return (jsx(Button, { light: true, color: "secondary", icon: jsx(StrokeFilterIcon, {}), onClick: toggle, size: "sm", variant: "outline", children: isOpen ? (jsx(FormattedMessage, { id: "Hide filters" })) : (jsx(FormattedMessage, { id: "Show filters" })) }));
+    return (jsx(Button, { light: true, color: "secondary", icon: jsx(Icon, { name: "Filter", size: "sm" }), onClick: toggle, size: "sm", variant: "outline", children: isOpen ? (jsx(FormattedMessage, { id: "Hide filters" })) : (jsx(FormattedMessage, { id: "Show filters" })) }));
 };
 
 export { ToggleSidebarButton };