@sonic-equipment/ui 187.0.0 → 189.0.0

package/dist/cards/data-card/data-card.js

@@ -18,7 +18,7 @@ function renderValue(rendering, key, value) {
     const renderedValue = rendering?.value
         ? rendering.value({ key, value })
         : value !== undefined && value !== null
-            ? String(value)
+            ? value
             : null;
     if (renderedValue === null ||
         renderedValue === undefined ||

package/dist/country-selector/connected-country-selector.js

@@ -16,17 +16,6 @@ function ConnectedCountrySelector({ defaultCountryCode, defaultLanguageCode, onC
     const isCountryLanguageSelected = useMemo(() => selectedCountry !== undefined && selectedLanguage !== undefined, [selectedCountry, selectedLanguage]);
     const isDismissable = isCountryLanguageSelected;
     useEffect(() => {
-        if (!isFetching) {
-            if (selectedCountry === undefined && selectedLanguage === undefined) {
-                logger.info('Opening country selector dialog because no country or language is selected');
-            }
-            else if (selectedCountry === undefined) {
-                logger.info('Opening country selector dialog because no country is selected');
-            }
-            else if (selectedLanguage === undefined) {
-                logger.info('Opening country selector dialog because no language is selected');
-            }
-        }
         if (isOpen)
             return;
         setIsOpen(!isFetching && !isCountryLanguageSelected);

package/dist/country-selector/use-countries-languages.js

@@ -1,7 +1,6 @@
 "use client";
 import { useEffect } from 'react';
 import { config } from '../config.js';
-import { logger } from '../logging/logger.js';
 import { useFetchCountriesWithLanguages } from '../shared/api/storefront/hooks/website/use-fetch-countries-with-languages.js';
 import { updateLocale } from '../shared/api/storefront/services/website-service.js';
 import { useCookie } from '../shared/hooks/use-cookie.js';
@@ -38,16 +37,6 @@ function useCountriesLanguages({ defaultCountryCode, defaultLanguageCode, }) {
             languageId: language.id,
         });
     }
-    useEffect(() => {
-        logger.info('CountryID from cookie', currentCountryId, countries?.find(country => country.id === currentCountryId)?.name ||
-            'Unknown');
-    }, [countries, currentCountryId]);
-    useEffect(() => {
-        logger.info('LanguageID from cookie', currentLanguageId, countries
-            ?.find(country => country.id === currentCountryId)
-            ?.languages.find(language => language.id === currentLanguageId)
-            ?.description || 'Unknown');
-    }, [countries, currentCountryId, currentLanguageId]);
     try {
         if (error)
             throw error;

package/dist/delivery-time/delivery-time.js

@@ -3,14 +3,13 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { FormattedMessage } from '../intl/formatted-message.js';
 import { InfoIconTooltip } from '../info-icon-tooltip/info-icon-tooltip.js';
+import { useFormattedDate } from '../intl/use-formatted-date.js';
 import { useFormattedMessage } from '../intl/use-formatted-message.js';
-import { useIntl } from '../intl/use-intl.js';
-import { formatDateToLocaleString } from '../shared/utils/date.js';
 import styles from './delivery-time.module.css.js';
 
 function DeliveryTime({ className, deliveryDate }) {
-    const { cultureCode } = useIntl();
     const t = useFormattedMessage();
+    const formatDate = useFormattedDate();
     if (deliveryDate === undefined)
         return null;
     if (deliveryDate === null) {
@@ -20,7 +19,7 @@ function DeliveryTime({ className, deliveryDate }) {
                     __html: t('Availability unknown, please contact customer support for lead time or alternatives.'),
                 }, "data-test-selector": "deliveryTime_unknown" }) }));
     }
-    const localeDate = formatDateToLocaleString(deliveryDate, cultureCode, {
+    const localeDate = formatDate(deliveryDate, {
         day: 'numeric',
         month: 'short',
         year: 'numeric',

package/dist/exports.d.ts

@@ -149,6 +149,7 @@ export * from './header/header-layout/header-layout';
 export * from './header/link-list/navigation-link-list';
 export * from './header/sonic-logo/sonic-logo';
 export * from './info-icon-tooltip/info-icon-tooltip';
+export * from './intl/formatted-date';
 export * from './intl/formatted-message';
 export * from './intl/intl-context';
 export * from './intl/intl-provider';
@@ -158,6 +159,7 @@ export * from './intl/types';
 export * from './intl/use-country-code';
 export * from './intl/use-culture-code';
 export * from './intl/use-currency-code';
+export * from './intl/use-formatted-date';
 export * from './intl/use-formatted-message';
 export * from './intl/use-intl';
 export * from './intl/use-language-code';
@@ -170,11 +172,15 @@ export * from './lists/menu-list/menu-list';
 export * from './lists/menu-list/menu-list-back-button';
 export * from './lists/menu-list/menu-list-header';
 export * from './lists/menu-list/menu-list-item';
+export * from './lists/menu-list/menu-list-provider';
+export * from './lists/menu-list/use-menu-list';
+export * from './lists/menu-list/use-menu-list-item';
 export * from './lists/orderline-list/orderline-list';
 export * from './lists/product-overview-grid/product-overview-grid';
 export * from './lists/widget-grid/widget';
 export * from './lists/widget-grid/widget-grid';
 export * from './loading/blank-page-spacer';
+export * from './loading/dynamic-loading-overlay';
 export * from './loading/loading-overlay';
 export * from './loading/progress-circle';
 export * from './logging/logger';
@@ -255,6 +261,7 @@ export * from './pages/my-sonic/navigation/connected-my-sonic-navigation';
 export * from './pages/my-sonic/navigation/my-sonic-desktop-navigation';
 export * from './pages/my-sonic/navigation/my-sonic-mobile-navigation';
 export * from './pages/my-sonic/navigation/my-sonic-navigation-items';
+export * from './pages/my-sonic/pages/order-history/order-history';
 export * from './pages/my-sonic/widgets/components/address-data-card';
 export * from './pages/my-sonic/widgets/connected-bill-to-address-widget';
 export * from './pages/my-sonic/widgets/connected-customer-information-widget';
@@ -324,6 +331,7 @@ export * from './shared/api/storefront/hooks/customer/use-fetch-fulfillment-meth
 export * from './shared/api/storefront/hooks/customer/use-fetch-fulfillment-methods-for-current-cart';
 export * from './shared/api/storefront/hooks/customer/use-fetch-ship-to-addresses';
 export * from './shared/api/storefront/hooks/customer/use-patch-bill-to-address';
+export * from './shared/api/storefront/hooks/orders/use-fetch-orders';
 export * from './shared/api/storefront/hooks/payment/use-create-adyen-session';
 export * from './shared/api/storefront/hooks/payment/use-fetch-adyen-config';
 export * from './shared/api/storefront/hooks/payment/use-invalidate-adyen';
@@ -345,6 +353,7 @@ export * from './shared/api/storefront/services/authentication-service';
 export * from './shared/api/storefront/services/cart-service';
 export * from './shared/api/storefront/services/customer-service';
 export * from './shared/api/storefront/services/finance-service';
+export * from './shared/api/storefront/services/order-service';
 export * from './shared/api/storefront/services/payment-service';
 export * from './shared/api/storefront/services/product-service';
 export * from './shared/api/storefront/services/translation-service';
@@ -352,6 +361,7 @@ export * from './shared/api/storefront/services/website-service';
 export * from './shared/api/storefront/services/wishlist-service';
 export * from './shared/data/cart.data';
 export * from './shared/data/countries-languages.data';
+export * from './shared/data/navigation';
 export * from './shared/feature-flags/use-feature-flags';
 export * from './shared/fetch/request';
 export * from './shared/ga/data-layer';
@@ -372,7 +382,6 @@ export * from './shared/hooks/use-mutation-observer';
 export * from './shared/hooks/use-resize-observer';
 export * from './shared/hooks/use-script';
 export * from './shared/hooks/use-scroll-lock';
-export * from './shared/hooks/use-scroll-to';
 export * from './shared/hooks/use-session-storage';
 export * from './shared/hooks/use-watch-css-property';
 export * from './shared/model/account';
@@ -411,6 +420,7 @@ export * from './shared/utils/price';
 export * from './shared/utils/promise';
 export * from './shared/utils/random';
 export * from './shared/utils/refs';
+export * from './shared/utils/scrolling';
 export * from './shared/utils/string';
 export * from './shared/utils/time';
 export * from './shared/utils/types';
@@ -422,8 +432,8 @@ export * from './sidebar/types';
 export * from './sidebar/use-sidebar';
 export * from './table/data-table';
 export * from './table/elements/col';
+export * from './table/elements/switch-sort-direction';
 export * from './table/elements/table';
-export * from './table/elements/table-column-properties';
 export * from './table/elements/table-context';
 export * from './table/elements/table-provider';
 export * from './table/elements/table-row-context';
@@ -432,11 +442,11 @@ export * from './table/elements/table-sort-button';
 export * from './table/elements/td';
 export * from './table/elements/th';
 export * from './table/elements/tr';
+export * from './table/elements/types';
 export * from './table/elements/use-table';
 export * from './table/elements/use-table-row';
 export * from './table/elements/use-td';
 export * from './table/elements/use-th';
-export * from './table/elements/use-tr';
 export * from './text/highlight-text/highlight-text';
 export * from './text/truncated/truncated';
 export * from './toast/toast';

package/dist/footer/connected-footer.js

@@ -1,14 +1,21 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { ConnectedCountrySelector } from '../country-selector/connected-country-selector.js';
+import { FormattedMessage } from '../intl/formatted-message.js';
 import { useCultureCode } from '../intl/use-culture-code.js';
 import { useFetchNavigationLinks } from '../shared/api/bff/hooks/use-fetch-navigation-links.js';
+import { isNavigationSection } from '../shared/api/bff/model/bff.model.js';
 import { Footer } from './footer.js';
 
 function ConnectedFooter({ className, onCountryLanguageChange, source, }) {
     const cultureCode = useCultureCode();
     const { data } = useFetchNavigationLinks({ cultureCode, source });
-    return (jsx(Footer, { bottomLinks: data?.footer.bottomLinks || [], className: className, copyright: data?.footer.copyright || '', countrySelector: jsx(ConnectedCountrySelector, { defaultCountryCode: "NL", defaultLanguageCode: "EN", onChange: onCountryLanguageChange }), linkBlocks: data?.footer.linkBlocks || [] }));
+    if (data && data.key !== 'navigation')
+        throw new Error('Invalid navigation data');
+    const footerNavigationSection = data?.items
+        .filter(isNavigationSection)
+        .find(item => item.key === 'footer');
+    return (jsx(Footer, { className: className, copyright: jsx(FormattedMessage, { id: "Copyright \u00A9 Sonic Equipment B.V." }), countrySelector: jsx(ConnectedCountrySelector, { defaultCountryCode: "NL", defaultLanguageCode: "EN", onChange: onCountryLanguageChange }), footerNavigationSection: footerNavigationSection }));
 }
 
 export { ConnectedFooter };

package/dist/footer/footer.d.ts

@@ -1,14 +1,9 @@
 import { ReactNode } from 'react';
-import { NavigationLink } from '../shared/api/bff/model/bff.model';
-export interface FooterBottomSectionProps {
-    bottomLinks: NavigationLink[];
+import { NavigationSection } from '../shared/api/bff/model/bff.model';
+export interface FooterProps {
     className?: string;
-    copyright: string;
+    copyright: ReactNode;
     countrySelector: ReactNode;
+    footerNavigationSection: NavigationSection | undefined;
 }
-export interface FooterLinkBlockProps {
-    linkBlocks: NavigationLink[];
-}
-export interface FooterProps extends FooterBottomSectionProps, FooterLinkBlockProps {
-}
-export declare function Footer({ bottomLinks, className, copyright, countrySelector, linkBlocks, }: FooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function Footer({ className, copyright, countrySelector, footerNavigationSection, }: FooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/footer/footer.js

@@ -4,33 +4,38 @@ import clsx from 'clsx';
 import { Link } from '../buttons/link/link.js';
 import { Accordion } from '../collapsables/accordion/accordion.js';
 import { AccordionItem } from '../collapsables/accordion/accordion-item.js';
-import { logger } from '../logging/logger.js';
+import { isNavigationSection, isNavigationLinkItem, isNavigationLink } from '../shared/api/bff/model/bff.model.js';
 import { useIsBreakpoint } from '../shared/hooks/use-is-breakpoint.js';
 import styles from './footer.module.css.js';
 
-function BottomSection({ bottomLinks, copyright, countrySelector, }) {
-    return (jsxs("section", { className: styles['bottom-section'], children: [copyright && jsx("p", { className: styles.copyright, children: copyright }), bottomLinks.length > 0 && (jsx("ul", { className: styles['bottom-links'], role: "navigation", children: bottomLinks.map(link => (jsx("li", { children: jsx(Link, { href: link.url, target: link.openInNewTab ? '_blank' : undefined, children: link.title }) }, link.key))) })), countrySelector && (jsx("div", { className: styles['country-selector'], children: countrySelector }))] }));
+function BottomSection({ copyright, countrySelector, footerBottomSection, }) {
+    if (!footerBottomSection)
+        return null;
+    const links = footerBottomSection.items.filter(isNavigationLink);
+    return (jsxs("section", { className: styles['bottom-section'], children: [copyright && jsx("p", { className: styles.copyright, children: copyright }), footerBottomSection.items.length > 0 && (jsx("ul", { className: styles['bottom-links'], children: links.map(link => (jsx(Link, { className: styles['bottom-link'], href: link.href || undefined, target: link.openInNewTab ? '_blank' : undefined, children: link.label }, link.key))) })), countrySelector && (jsx("div", { className: styles['country-selector'], children: countrySelector }))] }));
 }
-function LinkSection({ link }) {
+function LinkSection({ linkGroup }) {
     const isXl = useIsBreakpoint('xl');
-    return (jsx("section", { className: styles['link-block'], children: jsx(Accordion, { color: "white", hasLineSeparator: false, size: "lg", children: jsx(AccordionItem, { allowCollapse: !isXl, id: `link-block-${link.key}`, initialIsOpen: isXl, title: link.title, children: jsx("ul", { className: styles['list'], children: link.links?.map(link => (jsx("li", { children: jsx(FooterLink, { link: link }) }, link.key))) }) }) }) }, link.key));
+    return (jsx("section", { className: styles['link-block'], children: jsx(Accordion, { color: "white", hasLineSeparator: false, size: "lg", children: jsx(AccordionItem, { allowCollapse: !isXl, id: `link-block-${linkGroup.key}`, initialIsOpen: isXl, title: linkGroup.header || linkGroup.label, children: jsx("ul", { className: styles['list'], children: linkGroup.items.filter(isNavigationLink).map(link => (jsx("li", { children: jsx(FooterLink, { link: link }) }, link.key))) }) }) }) }, linkGroup.key));
 }
 function FooterLink({ link }) {
-    const type = link.type;
-    if (type === 'link' || type === 'category') {
-        return (jsx(Link, { href: link.url, target: link.openInNewTab ? '_blank' : undefined, children: link.title }));
-    }
-    if (type === 'section') {
-        return jsx(LinkSection, { link: link });
-    }
-    logger.warn(`Unknown link type '${type}' in footer with key '${link.key}'`);
-    return null;
+    return (jsx(Link, { href: link.href || undefined, target: link.openInNewTab ? '_blank' : undefined, children: link.label }));
 }
-function FooterLinkBlock({ linkBlocks }) {
-    return (jsx("nav", { className: styles['main-links'], children: linkBlocks.map(link => (jsx(FooterLink, { link: link }, link.key))) }));
+function FooterLinkBlock({ footerLinkBlockSection }) {
+    if (!footerLinkBlockSection)
+        return null;
+    return (jsx("nav", { className: styles['main-links'], children: footerLinkBlockSection.items
+            .filter(isNavigationLinkItem)
+            .map(linkItem => isNavigationLink(linkItem) ? (jsx(FooterLink, { link: linkItem }, linkItem.key)) : (jsx(LinkSection, { linkGroup: linkItem }, linkItem.key))) }));
 }
-function Footer({ bottomLinks, className, copyright, countrySelector, linkBlocks, }) {
-    return (jsxs("footer", { className: clsx(styles.footer, className), children: [jsx(FooterLinkBlock, { linkBlocks: linkBlocks }), jsx(BottomSection, { bottomLinks: bottomLinks, copyright: copyright, countrySelector: countrySelector })] }));
+function Footer({ className, copyright, countrySelector, footerNavigationSection, }) {
+    const footerLinkBlockSection = footerNavigationSection?.items
+        .filter(isNavigationSection)
+        .find(section => section.key === 'footer-link-block');
+    const footerBottomSection = footerNavigationSection?.items
+        .filter(isNavigationSection)
+        .find(section => section.key === 'footer-bottom');
+    return (jsxs("footer", { className: clsx(styles.footer, className), children: [jsx(FooterLinkBlock, { footerLinkBlockSection: footerLinkBlockSection }), jsx(BottomSection, { copyright: copyright, countrySelector: countrySelector, footerBottomSection: footerBottomSection })] }));
 }
 
 export { Footer };

package/dist/forms/fields/select-field/select-field.js

@@ -26,7 +26,7 @@ function SelectField({ className, 'data-test-selector': dataTestSelector, defaul
             [styles['loading']]: isLoading,
         }, className), "data-test-selector": dataTestSelector, defaultSelectedKey: defaultSelectedOption === undefined
             ? undefined
-            : String(defaultSelectedOption), isDisabled: isDisabled, isInvalid: isInvalid, isRequired: isRequired, name: name, onSelectionChange: key => handleChange(key), placeholder: placeholder || label, selectedKey: selectedOption === undefined ? undefined : String(selectedOption), children: jsx(FormFieldLayout, { errorSlot: jsx(FieldError, {}), infoSlot: info && jsx(InfoIconTooltip, { children: info }), labelSlot: showLabel && jsx(Label, { isRequired: isRequired, children: label }), children: jsxs(Fragment, { children: [jsxs(Button, { className: styles.button, children: [jsx(SelectValue, { className: styles.value, "data-test-selector": "value" }), isLoading ? (jsx(ProgressCircle, { "aria-hidden": "true", className: styles.icon, variant: "gray" })) : (jsx(GlyphsChevronsSlimDownIcon, { "aria-hidden": "true", className: styles.icon }))] }), jsx(Popover, { className: clsx(styles.popover, styles[variant]), placement: "bottom left", children: jsx(ListBox, { className: styles.listbox, "data-test-selector": dataTestSelector ? `${dataTestSelector}_options` : undefined, children: jsxs(ListBoxSection, { children: [showPlaceholder && (jsx(Header, { className: styles.header, children: placeholder || label })), Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles.item, id: key, textValue: value, children: [selectedKey === key && (jsx("span", { slot: "description", children: jsx(StrokeCheckmarkIcon, { className: styles.check }) })), jsx("span", { slot: "label", children: value })] }, key)))] }) }) })] }) }) }));
+            : String(defaultSelectedOption), isDisabled: isDisabled, isInvalid: isInvalid, isRequired: isRequired, name: name, onSelectionChange: key => handleChange(key), placeholder: placeholder || label, selectedKey: selectedOption === undefined ? undefined : String(selectedOption), children: jsx(FormFieldLayout, { errorSlot: jsx(FieldError, {}), infoSlot: info && jsx(InfoIconTooltip, { children: info }), labelSlot: showLabel && jsx(Label, { isRequired: isRequired, children: label }), children: jsxs(Fragment, { children: [jsxs(Button, { className: styles.button, children: [jsx(SelectValue, { className: styles.value, "data-test-selector": "value" }), isLoading ? (jsx(ProgressCircle, { "aria-hidden": "true", className: styles.loading, variant: "gray" })) : (jsx(GlyphsChevronsSlimDownIcon, { "aria-hidden": "true", className: styles.icon }))] }), jsx(Popover, { className: clsx(styles.popover, styles[variant]), placement: "bottom left", children: jsx(ListBox, { className: styles.listbox, "data-test-selector": dataTestSelector ? `${dataTestSelector}_options` : undefined, children: jsxs(ListBoxSection, { children: [showPlaceholder && (jsx(Header, { className: styles.header, children: placeholder || label })), Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles.item, id: key, textValue: value, children: [selectedKey === key && (jsx("span", { slot: "description", children: jsx(StrokeCheckmarkIcon, { className: styles.check }) })), jsx("span", { slot: "label", children: value })] }, key)))] }) }) })] }) }) }));
 }
 
 export { SelectField };

package/dist/forms/layout/form/form.js

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 import { Form as Form$1 } from 'react-aria-components';
 import clsx from 'clsx';
 import { Message } from '../../../message/message.js';
-import { scrollToTop } from '../../../shared/hooks/use-scroll-to.js';
+import { scrollToTop } from '../../../shared/utils/scrolling.js';
 import styles from './form.module.css.js';
 
 function Form({ autoComplete = false, children, className, errorMessage, footer, header, onSubmit, title, validationErrors, }) {

package/dist/header/connected-header.js

@@ -2,12 +2,20 @@
 import { jsx } from 'react/jsx-runtime';
 import { useCultureCode } from '../intl/use-culture-code.js';
 import { useFetchNavigationLinks } from '../shared/api/bff/hooks/use-fetch-navigation-links.js';
+import { isNavigationSection } from '../shared/api/bff/model/bff.model.js';
 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 ?? [], sticky: true }));
+    if (data && data.key !== 'navigation')
+        throw new Error('Invalid navigation data');
+    const headerNavigationSection = data?.items
+        .filter(isNavigationSection)
+        .find(item => item.key === 'header');
+    if (data && !headerNavigationSection)
+        throw new Error('Header section not found in navigation data');
+    return (jsx(Header, { className: className, headerNavigationSection: headerNavigationSection, sticky: true }));
 }
 
 export { ConnectedHeader };

package/dist/header/drawers/desktop-navigation-drawer.d.ts

@@ -1,8 +1,8 @@
-import { NavigationLink } from '../../shared/api/bff/model/bff.model';
+import { NavigationLinkGroup } from '../../shared/api/bff/model/bff.model';
 export interface DesktopNavigationDrawerProps {
     groupId?: string;
     instanceId?: string;
+    linkGroup?: NavigationLinkGroup;
     onClosed?: () => void;
-    submenu?: NavigationLink;
 }
-export declare function DesktopNavigationDrawer({ groupId, instanceId, onClosed, submenu, }: DesktopNavigationDrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DesktopNavigationDrawer({ groupId, instanceId, linkGroup, onClosed, }: DesktopNavigationDrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/drawers/desktop-navigation-drawer.js

@@ -4,10 +4,8 @@ import { Drawer } from '../../drawer/drawer.js';
 import { PanelNavigation } from '../../navigation/panel-navigation/panel-navigation.js';
 import styles from './desktop-navigation-drawer.module.css.js';
 
-function DesktopNavigationDrawer({ groupId, instanceId, onClosed, submenu, }) {
-    return (jsx(Drawer, { allowCloseOnBackgroundClick: true, showBackgroundOverlay: true, className: styles['desktop-navigation-drawer'], "data-test-selector": "desktopNavigationDrawer", groupId: groupId, instanceId: instanceId, onClosed: onClosed, position: "top", showUnder: "header", children: submenu && (jsx(PanelNavigation, { "data-test-selector": "desktopNavigationPanel", header: submenu.url
-                ? { href: submenu.url, title: submenu.title }
-                : submenu.title, id: `panels-${submenu.key}`, links: submenu.links }, submenu.key)) }));
+function DesktopNavigationDrawer({ groupId, instanceId, linkGroup, onClosed, }) {
+    return (jsx(Drawer, { allowCloseOnBackgroundClick: true, showBackgroundOverlay: true, className: styles['desktop-navigation-drawer'], "data-test-selector": "desktopNavigationDrawer", groupId: groupId, instanceId: instanceId, onClosed: onClosed, position: "top", showUnder: "header", children: linkGroup && (jsx(PanelNavigation, { "data-test-selector": "desktopNavigationPanel", header: linkGroup, id: `panels-${linkGroup.key}`, linkItems: linkGroup.items }, linkGroup.key)) }));
 }
 
 export { DesktopNavigationDrawer };

package/dist/header/drawers/mobile-navigation-drawer.d.ts

@@ -1,7 +1,7 @@
-import { NavigationLink } from '../../shared/api/bff/model/bff.model';
+import { NavigationLinkItem } from '../../shared/api/bff/model/bff.model';
 export interface MobileNavigationDrawerProps {
     groupId?: string;
     instanceId?: string;
-    links: NavigationLink[];
+    linkItems: NavigationLinkItem[] | undefined;
 }
-export declare function MobileNavigationDrawer({ groupId, instanceId, links, }: MobileNavigationDrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function MobileNavigationDrawer({ groupId, instanceId, linkItems, }: MobileNavigationDrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/drawers/mobile-navigation-drawer.js

@@ -4,8 +4,8 @@ import { Drawer } from '../../drawer/drawer.js';
 import { MobileNavigation } from '../../navigation/mobile-navigation/mobile-navigation.js';
 import styles from './mobile-navigation-drawer.module.css.js';
 
-function MobileNavigationDrawer({ groupId, instanceId, links, }) {
-    return (jsx(Drawer, { allowCloseOnBackgroundClick: true, showBackgroundOverlay: true, className: styles['mobile-navigation-drawer'], "data-test-selector": "mobileNavigationDrawer", groupId: groupId, instanceId: instanceId, position: "left", showUnder: "announcement", children: ({ close, isOpen }) => (jsx(MobileNavigation, { id: "mobile-navigation", isActive: isOpen, links: links, onActiveChange: close })) }));
+function MobileNavigationDrawer({ groupId, instanceId, linkItems, }) {
+    return (jsx(Drawer, { allowCloseOnBackgroundClick: true, showBackgroundOverlay: true, className: styles['mobile-navigation-drawer'], "data-test-selector": "mobileNavigationDrawer", groupId: groupId, instanceId: instanceId, position: "left", showUnder: "announcement", children: ({ close, isOpen }) => (jsx(MobileNavigation, { id: "mobile-navigation", isActive: isOpen, linkItems: linkItems, onActiveChange: close })) }));
 }
 
 export { MobileNavigationDrawer };

package/dist/header/header.d.ts

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

package/dist/header/header.js

@@ -2,11 +2,11 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import clsx from 'clsx';
-import { config } from '../config.js';
 import { useDrawer } from '../drawer/use-drawer.js';
 import { useGlobalSearchDisclosure } from '../global-search/global-search-provider/use-search-disclosure.js';
 import { useFormattedMessage } from '../intl/use-formatted-message.js';
 import { PATHS } from '../pages/paths.js';
+import { isNavigationLink, isNavigationSection, isNavigationLinkItem } from '../shared/api/bff/model/bff.model.js';
 import { useIsBreakpoint } from '../shared/hooks/use-is-breakpoint.js';
 import { useResizeObserver } from '../shared/hooks/use-resize-observer.js';
 import { useOnNavigate } from '../shared/routing/use-on-navigate.js';
@@ -23,8 +23,8 @@ 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, sticky }) {
-    const [activeSubmenu, setActiveSubmenu] = useState();
+function Header({ className, headerNavigationSection, sticky, }) {
+    const [activeLinkGroup, setActiveLinkGroup] = useState();
     const t = useFormattedMessage();
     const isXl = useIsBreakpoint('xl');
     const { ref: headerRef } = useResizeObserver((_, size) => {
@@ -50,11 +50,11 @@ function Header({ className, links, sticky }) {
     const toggleMobileNavigation = (isActive) => {
         setMobileNavigationOpen(isActive);
     };
-    const toggleActiveSubmenu = (link) => {
-        if (link === activeSubmenu)
+    const toggleActiveSubmenu = (linkGroup) => {
+        if (linkGroup === activeLinkGroup)
             setDesktopNavigationOpen(false);
         else
-            setActiveSubmenu(link);
+            setActiveLinkGroup(linkGroup);
     };
     const hasDrawersOpen = searchOpen || mobileNavigationOpen || desktopNavigationOpen;
     useOnNavigate(() => {
@@ -63,10 +63,16 @@ function Header({ className, links, sticky }) {
         desktopNavigationDrawer.close();
     });
     useEffect(() => {
-        if (activeSubmenu)
+        if (activeLinkGroup)
             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: 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 }))] }));
+    }, [activeLinkGroup, setDesktopNavigationOpen]);
+    const homeLink = headerNavigationSection?.items
+        .filter(isNavigationLink)
+        .find(item => item.key === 'home');
+    const mainNavigationSection = headerNavigationSection?.items
+        .filter(isNavigationSection)
+        .find(item => item.key === 'main-navigation');
+    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: homeLink?.href || undefined, title: t('Home') }), mainNavigation: jsx(NavigationLinkList, { activeLink: activeLinkGroup, "data-test-selector": "pageHeaderMainNavigation", navigationSection: mainNavigationSection, onSubmenuToggle: toggleActiveSubmenu }), 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, linkItems: mainNavigationSection?.items.filter(isNavigationLinkItem) })), isXl && (jsx(DesktopNavigationDrawer, { groupId: desktopNavigationDrawer.groupId, instanceId: desktopNavigationDrawer.instanceId, linkGroup: activeLinkGroup, onClosed: () => setActiveLinkGroup(undefined) }))] }));
 }
 
 export { Header };

package/dist/header/link-list/navigation-link-list.d.ts

@@ -1,8 +1,8 @@
-import { NavigationLink } from '../../shared/api/bff/model/bff.model';
+import { NavigationLinkGroup, NavigationLinkItem, NavigationSection } from '../../shared/api/bff/model/bff.model';
 export interface LinkListProps {
-    activeLink?: NavigationLink;
+    activeLink?: NavigationLinkItem;
     'data-test-selector'?: string;
-    links: NavigationLink[];
-    onSubmenuToggle: (link: NavigationLink) => void;
+    navigationSection: NavigationSection | undefined;
+    onSubmenuToggle: (linkGroup: NavigationLinkGroup) => void;
 }
-export declare function NavigationLinkList({ activeLink, 'data-test-selector': dataTestSelector, links, onSubmenuToggle, }: LinkListProps): import("react/jsx-runtime").JSX.Element;
+export declare function NavigationLinkList({ activeLink, 'data-test-selector': dataTestSelector, navigationSection, onSubmenuToggle, }: LinkListProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/link-list/navigation-link-list.js

@@ -2,14 +2,29 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Link } from '../../buttons/link/link.js';
 import { GlyphsChevronsBoldDownIcon } from '../../icons/glyph/glyphs-chevrons-bold-down-icon.js';
+import { logger } from '../../logging/logger.js';
+import { isNavigationLinkGroup, isNavigationLink } from '../../shared/api/bff/model/bff.model.js';
 import styles from './navigation-link-list.module.css.js';
 
-function NavigationLinkList({ activeLink, 'data-test-selector': dataTestSelector, links, onSubmenuToggle, }) {
-    return (jsx("ul", { className: styles['navigation-link-list'], "data-test-selector": dataTestSelector, children: links.map(link => {
-            if (link.links && link.links.length > 0) {
-                return (jsx("li", { className: activeLink === link ? styles['active'] : undefined, children: jsxs(Link, { "aria-controls": `panels-${link.key}`, "aria-expanded": activeLink === link, className: styles.link, "data-test-selector": `navigationLink-${link.key}`, onClick: () => onSubmenuToggle(link), target: link.openInNewTab ? '_blank' : undefined, children: [link.title, jsx(GlyphsChevronsBoldDownIcon, { className: styles.chevron, role: "presentation" })] }) }, link.key));
+function NavigationLinkList({ activeLink, 'data-test-selector': dataTestSelector, navigationSection, onSubmenuToggle, }) {
+    const items = navigationSection?.items ?? [];
+    return (jsx("ul", { className: styles['navigation-link-list'], "data-test-selector": dataTestSelector, children: items.map(item => {
+            if (isNavigationLinkGroup(item)) {
+                if (item.items.length > 0) {
+                    return (jsx("li", { className: activeLink === item ? styles['active'] : undefined, children: jsxs(Link, { "aria-controls": `panels-${item.key}`, "aria-expanded": activeLink === item, className: styles.link, "data-test-selector": `navigationLink-${item.key}`, onClick: () => onSubmenuToggle(item), target: item.openInNewTab ? '_blank' : undefined, children: [item.label, jsx(GlyphsChevronsBoldDownIcon, { className: styles.chevron, role: "presentation" })] }) }, item.key));
+                }
+                else {
+                    logger.warn(`Link-group has no items: ${JSON.stringify(item, null, 2)}`);
+                    return null;
+                }
+            }
+            else if (isNavigationLink(item)) {
+                return (jsx("li", { children: jsx(Link, { className: styles.link, href: item.href, children: item.label }) }, item.key));
+            }
+            else {
+                logger.warn(`Unsupported link type: ${JSON.stringify(item, null, 2)}`);
+                return null;
             }
-            return (jsx("li", { children: jsx(Link, { className: styles.link, href: link.url, children: link.title }) }, link.key));
         }) }));
 }