@sonic-equipment/ui 167.0.0 → 169.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (151) hide show
  1. package/dist/algolia/algolia-sonic-searchclient.d.ts +2 -1
  2. package/dist/algolia/algolia-sonic-searchclient.js +2 -2
  3. package/dist/background-overlay/background-overlay-manager.js +6 -0
  4. package/dist/background-overlay/background-overlay.d.ts +1 -1
  5. package/dist/base.css +59 -1
  6. package/dist/buttons/link/link.d.ts +1 -1
  7. package/dist/buttons/link/link.js +6 -4
  8. package/dist/cart-totals/cart-totals.js +1 -0
  9. package/dist/collapsables/accordion/accordion-item.js +3 -2
  10. package/dist/collapsables/cascading-component/cascading-component-container-context.js +1 -0
  11. package/dist/collapsables/cascading-component/cascading-component-container-provider.js +1 -0
  12. package/dist/collapsables/cascading-component/cascading-component-container.js +1 -0
  13. package/dist/collapsables/cascading-component/cascading-component.js +1 -0
  14. package/dist/collapsables/unmounter/unmounter.js +1 -0
  15. package/dist/config.js +12 -11
  16. package/dist/country-select/country-select.js +1 -0
  17. package/dist/country-selector/connected-country-selector.d.ts +6 -6
  18. package/dist/display/price/price.js +1 -0
  19. package/dist/drawer/drawer.d.ts +3 -2
  20. package/dist/drawer/drawer.js +15 -3
  21. package/dist/drawer/drawer.module.css.js +1 -1
  22. package/dist/drawer/use-drawer.js +1 -6
  23. package/dist/exports.d.ts +15 -5
  24. package/dist/footer/connected-footer.d.ts +6 -0
  25. package/dist/footer/connected-footer.js +13 -0
  26. package/dist/footer/footer.d.ts +8 -4
  27. package/dist/footer/footer.js +23 -2
  28. package/dist/footer/footer.model.d.ts +3 -15
  29. package/dist/forms/form/form.js +1 -0
  30. package/dist/forms/text-field/password-reveal-toggle/password-reveal-toggle.js +1 -0
  31. package/dist/global-search/global-search-provider/global-search-provider.d.ts +0 -6
  32. package/dist/global-search/global-search-provider/global-search-provider.js +3 -9
  33. package/dist/global-search/global-search-provider/use-search-disclosure.d.ts +1 -6
  34. package/dist/global-search/global-search-provider/use-search-disclosure.js +5 -9
  35. package/dist/global-search/global-search.d.ts +3 -1
  36. package/dist/global-search/global-search.js +7 -6
  37. package/dist/header/buttons/account/connected-account-button.d.ts +7 -0
  38. package/dist/header/buttons/account/connected-account-button.js +14 -0
  39. package/dist/header/buttons/cart/connected-cart-button.d.ts +7 -0
  40. package/dist/header/buttons/cart/connected-cart-button.js +14 -0
  41. package/dist/header/buttons/favorites/connected-favorites-button.d.ts +7 -0
  42. package/dist/header/buttons/favorites/connected-favorites-button.js +13 -0
  43. package/dist/header/{hamburger-button → buttons/hamburger}/hamburger-button.d.ts +2 -1
  44. package/dist/header/buttons/hamburger/hamburger-button.js +13 -0
  45. package/dist/header/buttons/hamburger/hamburger-button.module.css.js +3 -0
  46. package/dist/header/buttons/search/search-button.d.ts +7 -0
  47. package/dist/header/buttons/search/search-button.js +12 -0
  48. package/dist/header/connected-header.d.ts +5 -0
  49. package/dist/header/connected-header.js +12 -0
  50. package/dist/header/drawers/desktop-navigation-drawer.d.ts +8 -0
  51. package/dist/header/drawers/desktop-navigation-drawer.js +12 -0
  52. package/dist/header/drawers/desktop-navigation-drawer.module.css.js +3 -0
  53. package/dist/header/drawers/mobile-navigation-drawer.d.ts +7 -0
  54. package/dist/header/drawers/mobile-navigation-drawer.js +10 -0
  55. package/dist/header/drawers/mobile-navigation-drawer.module.css.js +3 -0
  56. package/dist/header/drawers/search-drawer.d.ts +5 -0
  57. package/dist/header/drawers/search-drawer.js +9 -0
  58. package/dist/header/header-layout/header-layout.d.ts +2 -1
  59. package/dist/header/header-layout/header-layout.js +3 -2
  60. package/dist/header/header-layout/header-layout.module.css.js +1 -1
  61. package/dist/header/header.d.ts +4 -2
  62. package/dist/header/header.js +64 -5
  63. package/dist/header/header.module.css.js +3 -0
  64. package/dist/header/link-list/navigation-link-list.d.ts +3 -2
  65. package/dist/header/link-list/navigation-link-list.js +3 -3
  66. package/dist/header/link-list/navigation-link-list.module.css.js +1 -1
  67. package/dist/header/sonic-logo/sonic-logo.d.ts +2 -1
  68. package/dist/header/sonic-logo/sonic-logo.js +4 -2
  69. package/dist/index.js +17 -6
  70. package/dist/intl/missing-translation-provider.js +1 -0
  71. package/dist/intl/translation-id.d.ts +1 -1
  72. package/dist/lists/menu-list/menu-list-back-button.js +1 -0
  73. package/dist/lists/menu-list/menu-list-item.d.ts +9 -21
  74. package/dist/lists/menu-list/menu-list-item.js +3 -8
  75. package/dist/lists/menu-list/menu-list.js +1 -0
  76. package/dist/lists/orderline-list/orderline-list.js +2 -2
  77. package/dist/media/zoom-image/zoom-image.js +1 -0
  78. package/dist/navigation/account-icon/account-icon.js +1 -0
  79. package/dist/navigation/cart-icon/cart-icon.js +2 -1
  80. package/dist/navigation/favorite-icon/favorite-icon.js +1 -0
  81. package/dist/navigation/mobile-navigation/mobile-navigation.d.ts +6 -3
  82. package/dist/navigation/mobile-navigation/mobile-navigation.js +8 -3
  83. package/dist/navigation/mobile-navigation/mobile-navigation.module.css.js +3 -0
  84. package/dist/navigation/panel-navigation/panel-navigation.d.ts +4 -16
  85. package/dist/navigation/panel-navigation/panel-navigation.js +5 -5
  86. package/dist/notifications/announcements/announcement-list.d.ts +7 -0
  87. package/dist/notifications/announcements/announcement-list.js +26 -0
  88. package/dist/notifications/announcements/announcement-list.module.css.js +3 -0
  89. package/dist/notifications/announcements/announcement.d.ts +2 -1
  90. package/dist/notifications/announcements/announcement.js +7 -3
  91. package/dist/notifications/announcements/announcement.module.css.js +1 -1
  92. package/dist/notifications/announcements/connected-announcement-list.d.ts +3 -0
  93. package/dist/notifications/announcements/connected-announcement-list.js +22 -0
  94. package/dist/notifications/announcements/use-filter-announcements.d.ts +2 -0
  95. package/dist/notifications/announcements/use-filter-announcements.js +35 -0
  96. package/dist/observers/intersection-observer.js +1 -0
  97. package/dist/pages/account/create-account-page/create-account-page.js +1 -0
  98. package/dist/pages/account/layouts/sign-in-page-layout/sign-in-page-layout.js +1 -0
  99. package/dist/pages/account/sign-in-page/sign-in-page.js +1 -0
  100. package/dist/pages/checkout/cart-page/cart-page.js +2 -1
  101. package/dist/pages/checkout/cart-page/components/empty-cart-page.js +1 -0
  102. package/dist/pages/checkout/components/billing-and-invoice-information.js +1 -0
  103. package/dist/pages/checkout/layouts/checkout-page-layout/checkout-page-layout.js +2 -1
  104. package/dist/pages/checkout/order-confirmation-page/order-confirmation-page-content.js +1 -0
  105. package/dist/pages/checkout/order-confirmation-page/order-confirmation-page.js +1 -0
  106. package/dist/pages/checkout/payment-page/components/adyen-payment.js +1 -0
  107. package/dist/pages/checkout/payment-page/components/payment.js +1 -0
  108. package/dist/pages/checkout/payment-page/payment-page-content.js +2 -1
  109. package/dist/pages/checkout/payment-page/payment-page.js +1 -0
  110. package/dist/pages/checkout/shipping-page/components/currency-change-dialog.js +1 -0
  111. package/dist/pages/checkout/shipping-page/components/edit-address-form.js +1 -0
  112. package/dist/pages/checkout/shipping-page/components/readonly-address.js +1 -0
  113. package/dist/pages/checkout/shipping-page/components/sonic-address.js +1 -0
  114. package/dist/pages/checkout/shipping-page/shipping-page-content.js +2 -1
  115. package/dist/pages/checkout/shipping-page/shipping-page.js +1 -0
  116. package/dist/pages/components/page-meta-data/page-meta-data.js +4 -0
  117. package/dist/pages/product/product-details-page/components/product-details-panel/product-details-panel.js +1 -0
  118. package/dist/shared/api/bff/hooks/use-fetch-navigation-links.d.ts +2 -0
  119. package/dist/shared/api/bff/hooks/use-fetch-navigation-links.js +15 -0
  120. package/dist/shared/api/bff/model/bff.model.d.ts +30 -0
  121. package/dist/shared/api/bff/services/bff-service.d.ts +7 -1
  122. package/dist/shared/api/bff/services/bff-service.js +8 -1
  123. package/dist/shared/feature-flags/use-feature-flags.d.ts +1 -0
  124. package/dist/shared/feature-flags/use-feature-flags.js +1 -0
  125. package/dist/shared/ga/data-layer.js +4 -3
  126. package/dist/shared/hooks/use-mutation-observer.d.ts +3 -0
  127. package/dist/shared/hooks/use-mutation-observer.js +27 -0
  128. package/dist/shared/hooks/use-resize-observer.js +7 -1
  129. package/dist/shared/hooks/use-watch-css-property.js +1 -1
  130. package/dist/shared/routing/route-button.d.ts +1 -1
  131. package/dist/shared/routing/route-icon-button.d.ts +1 -1
  132. package/dist/shared/routing/route-link.d.ts +1 -1
  133. package/dist/shared/routing/with-routing.d.ts +2 -2
  134. package/dist/shared/routing/with-routing.js +5 -4
  135. package/dist/shared/utils/css.js +53 -0
  136. package/dist/styles.css +696 -476
  137. package/dist/toast/toast-provider.js +1 -0
  138. package/dist/tooltip/tooltip.js +1 -0
  139. package/dist/typography/heading/heading.js +1 -0
  140. package/package.json +1 -1
  141. package/dist/header/cart-icon/connected-cart-icon.d.ts +0 -3
  142. package/dist/header/cart-icon/connected-cart-icon.js +0 -14
  143. package/dist/header/hamburger-button/hamburger-button.js +0 -14
  144. package/dist/header/hamburger-button/hamburger-button.module.css.js +0 -3
  145. package/dist/notifications/announcements/announcement-provider.d.ts +0 -1
  146. package/dist/notifications/announcements/announcement-provider.js +0 -29
  147. package/dist/notifications/announcements/announcement-provider.module.css.js +0 -3
  148. package/dist/notifications/announcements/connected-announcement.d.ts +0 -5
  149. package/dist/notifications/announcements/connected-announcement.js +0 -27
  150. package/dist/shared/api/bff/model/announcement.model.d.ts +0 -12
  151. package/dist/shared/model/link.d.ts +0 -15
@@ -1,9 +1,10 @@
1
1
  "use client";
2
2
  import { jsx, jsxs } from 'react/jsx-runtime';
3
- import { useEffect, useRef } from 'react';
4
- import { Transition, TransitionGroup } from 'react-transition-group';
3
+ import { useEffect } from 'react';
4
+ import { Transition } from 'react-transition-group';
5
5
  import clsx from 'clsx';
6
6
  import { useAlgoliaSearch } from '../algolia/use-algolia-search.js';
7
+ import { Drawer } from '../drawer/drawer.js';
7
8
  import { useOnNavigate } from '../shared/routing/use-on-navigate.js';
8
9
  import { useGlobalSearchDisclosure } from './global-search-provider/use-search-disclosure.js';
9
10
  import { ConnectedSearchInput } from './search-input/connected-search-input.js';
@@ -33,11 +34,11 @@ function SearchRoot() {
33
34
  * uses the autocomplete widgets
34
35
  * https://codesandbox.io/p/sandbox/github/algolia/autocomplete/tree/next/examples/two-column-layout
35
36
  */
36
- function GlobalSearch() {
37
- const panelRef = useRef(null);
38
- const { close, isOpen } = useGlobalSearchDisclosure();
37
+ // TODO: this is used in Header V1; header V2 only embeds a SearchRoot instance (perhaps use a more descriptive name)
38
+ function GlobalSearch({ className }) {
39
+ const { close, groupId, instanceId } = useGlobalSearchDisclosure();
39
40
  useOnNavigate(close);
40
- return (jsx(TransitionGroup, { children: jsx(Transition, { in: isOpen, nodeRef: panelRef, timeout: 300, children: state => (jsx("div", { ref: panelRef, className: state, children: jsx("div", { className: styles['search-wrapper'], children: jsx(SearchRoot, {}) }) })) }) }));
41
+ return (jsx(Drawer, { allowCloseOnBackgroundClick: true, showBackgroundOverlay: true, className: (className), groupId: groupId, instanceId: instanceId, position: "top", showUnder: "header", children: jsx(SearchRoot, {}) }));
41
42
  }
42
43
 
43
44
  export { GlobalSearch, SearchRoot };
@@ -0,0 +1,7 @@
1
+ export interface ConnectedAccountButtonProps {
2
+ className?: string;
3
+ 'data-test-selector'?: string;
4
+ href?: string;
5
+ onClick?: () => void;
6
+ }
7
+ export declare function ConnectedAccountButton({ className, 'data-test-selector': dataTestSelector, href, onClick, }: ConnectedAccountButtonProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,14 @@
1
+ "use client";
2
+ import { jsx } from 'react/jsx-runtime';
3
+ import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
4
+ import { AccountIcon } from '../../../navigation/account-icon/account-icon.js';
5
+ import { useFetchSession } from '../../../shared/api/storefront/hooks/authentication/use-fetch-session.js';
6
+ import { RouteIconButton } from '../../../shared/routing/route-icon-button.js';
7
+
8
+ function ConnectedAccountButton({ className, 'data-test-selector': dataTestSelector, href, onClick, }) {
9
+ const t = useFormattedMessage();
10
+ const { data: { isAuthenticated } = {} } = useFetchSession();
11
+ return (jsx(RouteIconButton, { className: className, "data-test-selector": dataTestSelector, href: href, onClick: onClick, children: jsx(AccountIcon, { "aria-label": isAuthenticated ? t('My account') : t('Sign in or create account'), isAuthenticated: isAuthenticated }) }));
12
+ }
13
+
14
+ export { ConnectedAccountButton };
@@ -0,0 +1,7 @@
1
+ export interface ConnectedCartButtonProps {
2
+ className?: string;
3
+ 'data-test-selector'?: string;
4
+ href?: string;
5
+ onClick?: () => void;
6
+ }
7
+ export declare function ConnectedCartButton({ className, 'data-test-selector': dataTestSelector, href, onClick, }: ConnectedCartButtonProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,14 @@
1
+ "use client";
2
+ import { jsx } from 'react/jsx-runtime';
3
+ import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
4
+ import { CartIcon } from '../../../navigation/cart-icon/cart-icon.js';
5
+ import { useFetchCurrentCartCount } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-count.js';
6
+ import { RouteIconButton } from '../../../shared/routing/route-icon-button.js';
7
+
8
+ function ConnectedCartButton({ className, 'data-test-selector': dataTestSelector, href, onClick, }) {
9
+ const count = useFetchCurrentCartCount();
10
+ const t = useFormattedMessage();
11
+ return (jsx(RouteIconButton, { className: className, "data-test-selector": dataTestSelector, href: href, onClick: onClick, children: jsx(CartIcon, { "aria-label": t('Shopping cart'), count: count }) }));
12
+ }
13
+
14
+ export { ConnectedCartButton };
@@ -0,0 +1,7 @@
1
+ export interface ConnectedFavoritesButtonProps {
2
+ className?: string;
3
+ 'data-test-selector'?: string;
4
+ href?: string;
5
+ onClick?: () => void;
6
+ }
7
+ export declare function ConnectedFavoritesButton({ className, 'data-test-selector': dataTestSelector, href, onClick, }: ConnectedFavoritesButtonProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,13 @@
1
+ "use client";
2
+ import { jsx } from 'react/jsx-runtime';
3
+ import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
4
+ import { FavoriteIcon } from '../../../navigation/favorite-icon/favorite-icon.js';
5
+ import { RouteIconButton } from '../../../shared/routing/route-icon-button.js';
6
+
7
+ function ConnectedFavoritesButton({ className, 'data-test-selector': dataTestSelector, href, onClick, }) {
8
+ const t = useFormattedMessage();
9
+ // TODO: add a count of total favorites
10
+ return (jsx(RouteIconButton, { className: className, "data-test-selector": dataTestSelector, href: href, onClick: onClick, children: jsx(FavoriteIcon, { "aria-label": t('Favorites') }) }));
11
+ }
12
+
13
+ export { ConnectedFavoritesButton };
@@ -1,6 +1,7 @@
1
1
  export interface HamburgerButtonProps {
2
2
  'aria-controls': string;
3
+ 'data-test-selector'?: string;
3
4
  isActive: boolean;
4
5
  onActiveChange: (isActive: boolean) => void;
5
6
  }
6
- export declare function HamburgerButton({ 'aria-controls': ariaControls, isActive, onActiveChange, }: HamburgerButtonProps): import("react/jsx-runtime").JSX.Element;
7
+ export declare function HamburgerButton({ 'aria-controls': ariaControls, 'data-test-selector': dataTestSelector, isActive, onActiveChange, }: HamburgerButtonProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,13 @@
1
+ "use client";
2
+ import { jsx, jsxs } from 'react/jsx-runtime';
3
+ import clsx from 'clsx';
4
+ import { IconButton } from '../../../buttons/icon-button/icon-button.js';
5
+ import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
6
+ import styles from './hamburger-button.module.css.js';
7
+
8
+ function HamburgerButton({ 'aria-controls': ariaControls, 'data-test-selector': dataTestSelector, isActive, onActiveChange, }) {
9
+ const t = useFormattedMessage();
10
+ return (jsx(IconButton, { "aria-controls": ariaControls, "aria-expanded": isActive, "aria-label": t('Navigation'), className: clsx(styles['hamburger-button'], isActive && styles['active']), "data-test-selector": dataTestSelector, onClick: () => onActiveChange(!isActive), title: t('Toggle navigation menu'), type: "button", children: jsxs("div", { className: styles['icon'], role: "presentation", children: [jsx("span", { "aria-hidden": "true" }), jsx("span", { "aria-hidden": "true" }), jsx("span", { "aria-hidden": "true" })] }) }));
11
+ }
12
+
13
+ export { HamburgerButton };
@@ -0,0 +1,3 @@
1
+ var styles = {"hamburger-button":"hamburger-button-module-W6FPI","icon":"hamburger-button-module-2h4ML","active":"hamburger-button-module-UXSUP"};
2
+
3
+ export { styles as default };
@@ -0,0 +1,7 @@
1
+ export interface SearchButtonProps {
2
+ 'aria-controls': string;
3
+ 'data-test-selector'?: string;
4
+ isActive: boolean;
5
+ onActiveChange: (isActive: boolean) => void;
6
+ }
7
+ export declare function SearchButton({ 'aria-controls': ariaControls, 'data-test-selector': dataTestSelector, isActive, onActiveChange, }: SearchButtonProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,12 @@
1
+ "use client";
2
+ import { jsx } from 'react/jsx-runtime';
3
+ import { StrokeSearchIcon } from '../../../icons/stroke/stroke-search-icon.js';
4
+ import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
5
+ import { RouteIconButton } from '../../../shared/routing/route-icon-button.js';
6
+
7
+ function SearchButton({ 'aria-controls': ariaControls, 'data-test-selector': dataTestSelector, isActive, onActiveChange, }) {
8
+ const t = useFormattedMessage();
9
+ return (jsx(RouteIconButton, { "aria-controls": ariaControls, "aria-expanded": typeof isActive === 'boolean' ? isActive : undefined, "aria-label": t('Search'), "data-test-selector": dataTestSelector, onClick: () => onActiveChange(!isActive), children: jsx(StrokeSearchIcon, { role: "presentation" }) }));
10
+ }
11
+
12
+ export { SearchButton };
@@ -0,0 +1,5 @@
1
+ import { NavigationLinkSource } from '../shared/api/bff/services/bff-service';
2
+ export declare function ConnectedHeader({ className, source, }: {
3
+ className?: string;
4
+ source: NavigationLinkSource;
5
+ }): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,12 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { useCultureCode } from '../intl/use-culture-code.js';
3
+ import { useFetchNavigationLinks } from '../shared/api/bff/hooks/use-fetch-navigation-links.js';
4
+ import { Header } from './header.js';
5
+
6
+ function ConnectedHeader({ className, source, }) {
7
+ const cultureCode = useCultureCode();
8
+ const { data } = useFetchNavigationLinks({ cultureCode, source });
9
+ return (jsx(Header, { className: className, links: data?.header ?? [], sticky: true }));
10
+ }
11
+
12
+ export { ConnectedHeader };
@@ -0,0 +1,8 @@
1
+ import { NavigationLink } from '../../shared/api/bff/model/bff.model';
2
+ export interface DesktopNavigationDrawerProps {
3
+ groupId?: string;
4
+ instanceId?: string;
5
+ onClosed?: () => void;
6
+ submenu?: NavigationLink;
7
+ }
8
+ export declare function DesktopNavigationDrawer({ groupId, instanceId, onClosed, submenu, }: DesktopNavigationDrawerProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,12 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { Drawer } from '../../drawer/drawer.js';
3
+ import { PanelNavigation } from '../../navigation/panel-navigation/panel-navigation.js';
4
+ import styles from './desktop-navigation-drawer.module.css.js';
5
+
6
+ function DesktopNavigationDrawer({ groupId, instanceId, onClosed, submenu, }) {
7
+ return (jsx(Drawer, { allowCloseOnBackgroundClick: true, showBackgroundOverlay: true, className: styles['desktop-navigation-drawer'], groupId: groupId, instanceId: instanceId, onClosed: onClosed, position: "top", showUnder: "header", children: submenu && (jsx(PanelNavigation, { header: submenu.url
8
+ ? { href: submenu.url, title: submenu.title }
9
+ : submenu.title, id: `panels-${submenu.key}`, links: submenu.links }, submenu.key)) }));
10
+ }
11
+
12
+ export { DesktopNavigationDrawer };
@@ -0,0 +1,3 @@
1
+ var styles = {"desktop-navigation-drawer":"desktop-navigation-drawer-module-rXWPO"};
2
+
3
+ export { styles as default };
@@ -0,0 +1,7 @@
1
+ import { NavigationLink } from '../../shared/api/bff/model/bff.model';
2
+ export interface MobileNavigationDrawerProps {
3
+ groupId?: string;
4
+ instanceId?: string;
5
+ links: NavigationLink[];
6
+ }
7
+ export declare function MobileNavigationDrawer({ groupId, instanceId, links, }: MobileNavigationDrawerProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,10 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { Drawer } from '../../drawer/drawer.js';
3
+ import { MobileNavigation } from '../../navigation/mobile-navigation/mobile-navigation.js';
4
+ import styles from './mobile-navigation-drawer.module.css.js';
5
+
6
+ function MobileNavigationDrawer({ groupId, instanceId, links, }) {
7
+ return (jsx(Drawer, { allowCloseOnBackgroundClick: true, showBackgroundOverlay: true, className: styles['mobile-navigation-drawer'], groupId: groupId, instanceId: instanceId, position: "left", showUnder: "announcement", children: ({ close, isOpen }) => (jsx(MobileNavigation, { id: "mobile-navigation", isActive: isOpen, links: links, onActiveChange: close })) }));
8
+ }
9
+
10
+ export { MobileNavigationDrawer };
@@ -0,0 +1,3 @@
1
+ var styles = {"mobile-navigation-drawer":"mobile-navigation-drawer-module-XR23R"};
2
+
3
+ export { styles as default };
@@ -0,0 +1,5 @@
1
+ export interface SearchDrawerProps {
2
+ groupId?: string;
3
+ instanceId?: string;
4
+ }
5
+ export declare function SearchDrawer({ groupId, instanceId }: SearchDrawerProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,9 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { Drawer } from '../../drawer/drawer.js';
3
+ import { SearchRoot } from '../../global-search/global-search.js';
4
+
5
+ function SearchDrawer({ groupId, instanceId }) {
6
+ return (jsx(Drawer, { allowCloseOnBackgroundClick: true, showBackgroundOverlay: true, groupId: groupId, instanceId: instanceId, position: "top", showUnder: "header", children: jsx(SearchRoot, {}) }));
7
+ }
8
+
9
+ export { SearchDrawer };
@@ -1,9 +1,10 @@
1
1
  import { ReactNode } from 'react';
2
2
  export interface HeaderLayoutProps {
3
3
  hamburgerButton?: ReactNode;
4
+ hasDrawersOpen?: boolean;
4
5
  logo: ReactNode;
5
6
  mainNavigation: ReactNode;
6
7
  navigationActions: ReactNode;
7
8
  search: ReactNode;
8
9
  }
9
- export declare function HeaderLayout({ hamburgerButton, logo, mainNavigation, navigationActions, search, }: HeaderLayoutProps): import("react/jsx-runtime").JSX.Element;
10
+ export declare function HeaderLayout({ hamburgerButton, hasDrawersOpen, logo, mainNavigation, navigationActions, search, }: HeaderLayoutProps): import("react/jsx-runtime").JSX.Element;
@@ -1,8 +1,9 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import clsx from 'clsx';
2
3
  import styles from './header-layout.module.css.js';
3
4
 
4
- function HeaderLayout({ hamburgerButton, logo, mainNavigation, navigationActions, search, }) {
5
- return (jsxs("header", { className: styles.header, children: [jsxs("div", { className: styles['mobile-menu-toggle'], children: [hamburgerButton && hamburgerButton, jsx("div", { className: styles.search, children: search })] }), jsx("div", { className: styles.logo, children: logo }), jsx("div", { className: styles['main-navigation'], children: mainNavigation }), jsxs("div", { className: styles['navigation-actions'], children: [jsx("div", { className: styles.search, children: search }), jsx("div", { className: styles.icons, children: navigationActions })] })] }));
5
+ function HeaderLayout({ hamburgerButton, hasDrawersOpen, logo, mainNavigation, navigationActions, search, }) {
6
+ return (jsxs("div", { className: clsx(styles['header-layout'], hasDrawersOpen && styles['has-drawers-open']), children: [jsx("div", { className: styles['logo'], children: logo }), jsx("nav", { className: styles['navigation'], children: mainNavigation }), jsx("div", { className: styles['hamburger'], children: hamburgerButton && hamburgerButton }), jsx("div", { className: styles['search'], children: search }), jsx("nav", { className: styles['actions'], children: navigationActions })] }));
6
7
  }
7
8
 
8
9
  export { HeaderLayout };
@@ -1,3 +1,3 @@
1
- var styles = {"header":"header-layout-module-VlTuk","logo":"header-layout-module-oKPyL","mobile-menu-toggle":"header-layout-module-aBOJL","main-navigation":"header-layout-module--ICLK","navigation-actions":"header-layout-module-HjY-a","search":"header-layout-module-fP3a6","icons":"header-layout-module-4Qp5b"};
1
+ var styles = {"header-layout":"header-layout-module-uGT3X","logo":"header-layout-module-oKPyL","hamburger":"header-layout-module-biHA2","search":"header-layout-module-fP3a6","navigation":"header-layout-module-vVRTn","actions":"header-layout-module-Ux7Uj","has-drawers-open":"header-layout-module-1qdd6"};
2
2
 
3
3
  export { styles as default };
@@ -1,5 +1,7 @@
1
- import { NavigationLink } from '../shared/model/link';
1
+ import { NavigationLink } from '../shared/api/bff/model/bff.model';
2
2
  export interface HeaderProps {
3
+ className?: string;
3
4
  links: NavigationLink[];
5
+ sticky?: boolean;
4
6
  }
5
- export declare function Header({ links }: HeaderProps): import("react/jsx-runtime").JSX.Element;
7
+ export declare function Header({ className, links, sticky }: HeaderProps): import("react/jsx-runtime").JSX.Element;
@@ -1,12 +1,71 @@
1
- import { jsx } from 'react/jsx-runtime';
1
+ "use client";
2
+ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
3
+ import { useState, useEffect } from 'react';
4
+ import clsx from 'clsx';
5
+ import { useDrawer } from '../drawer/use-drawer.js';
6
+ import { useGlobalSearchDisclosure } from '../global-search/global-search-provider/use-search-disclosure.js';
7
+ import { useFormattedMessage } from '../intl/use-formatted-message.js';
8
+ import { PATHS } from '../pages/paths.js';
9
+ import { useIsBreakpoint } from '../shared/hooks/use-is-breakpoint.js';
10
+ import { useResizeObserver } from '../shared/hooks/use-resize-observer.js';
11
+ import { useOnNavigate } from '../shared/routing/use-on-navigate.js';
12
+ import { ConnectedAccountButton } from './buttons/account/connected-account-button.js';
13
+ import { ConnectedCartButton } from './buttons/cart/connected-cart-button.js';
14
+ import { ConnectedFavoritesButton } from './buttons/favorites/connected-favorites-button.js';
15
+ import { HamburgerButton } from './buttons/hamburger/hamburger-button.js';
16
+ import { SearchButton } from './buttons/search/search-button.js';
17
+ import { DesktopNavigationDrawer } from './drawers/desktop-navigation-drawer.js';
18
+ import { MobileNavigationDrawer } from './drawers/mobile-navigation-drawer.js';
19
+ import { SearchDrawer } from './drawers/search-drawer.js';
2
20
  import { HeaderLayout } from './header-layout/header-layout.js';
3
21
  import { NavigationLinkList } from './link-list/navigation-link-list.js';
4
22
  import { SonicLogo } from './sonic-logo/sonic-logo.js';
23
+ import styles from './header.module.css.js';
5
24
 
6
- function Header({ links }) {
7
- return (jsx(HeaderLayout, { hamburgerButton: null, logo: jsx(SonicLogo, { href: "/" }), mainNavigation: jsx(NavigationLinkList, { links: links,
8
- // eslint-disable-next-line no-console
9
- onSubmenuToggle: link => console.log('open menu', link) }), navigationActions: null, search: null }));
25
+ function Header({ className, links, sticky }) {
26
+ const [activeSubmenu, setActiveSubmenu] = useState();
27
+ const t = useFormattedMessage();
28
+ const isXl = useIsBreakpoint('xl');
29
+ const { ref: headerRef } = useResizeObserver((_, size) => {
30
+ const height = Math.floor(size.height);
31
+ document?.documentElement.style.setProperty('--header-height', `${height}px`);
32
+ });
33
+ const { close: closeSearch, groupId: searchGroupId, instanceId: searchInstanceId, isOpen: searchOpen, setIsOpen: setSearchOpen, } = useGlobalSearchDisclosure();
34
+ const mobileNavigationDrawer = useDrawer({
35
+ groupId: 'drawers-header',
36
+ instanceId: 'mobileNavigationDrawer',
37
+ });
38
+ const mobileNavigationOpen = mobileNavigationDrawer.isOpen;
39
+ const setMobileNavigationOpen = mobileNavigationDrawer.setIsOpen;
40
+ const desktopNavigationDrawer = useDrawer({
41
+ groupId: 'drawers-header',
42
+ instanceId: 'desktopNavigationDrawer',
43
+ });
44
+ const setDesktopNavigationOpen = desktopNavigationDrawer.setIsOpen;
45
+ const desktopNavigationOpen = desktopNavigationDrawer.isOpen;
46
+ const toggleSearch = (isActive) => {
47
+ setSearchOpen(isActive);
48
+ };
49
+ const toggleMobileNavigation = (isActive) => {
50
+ setMobileNavigationOpen(isActive);
51
+ };
52
+ const toggleActiveSubmenu = (link) => {
53
+ if (link === activeSubmenu)
54
+ setDesktopNavigationOpen(false);
55
+ else
56
+ setActiveSubmenu(link);
57
+ };
58
+ const hasDrawersOpen = searchOpen || mobileNavigationOpen || desktopNavigationOpen;
59
+ useOnNavigate(() => {
60
+ closeSearch();
61
+ mobileNavigationDrawer.close();
62
+ desktopNavigationDrawer.close();
63
+ });
64
+ useEffect(() => {
65
+ if (activeSubmenu)
66
+ setDesktopNavigationOpen(true);
67
+ }, [activeSubmenu, setDesktopNavigationOpen]);
68
+ return (jsxs(Fragment, { children: [jsx("header", { ref: headerRef, className: clsx(styles['header'], sticky && styles['sticky'], className), children: jsx(HeaderLayout, { hamburgerButton: jsx(HamburgerButton, { "aria-controls": "mobile-navigation", isActive: mobileNavigationOpen, onActiveChange: toggleMobileNavigation }), hasDrawersOpen: hasDrawersOpen, logo: jsx(SonicLogo, { href: PATHS.HOME, title: t('Home') }), mainNavigation: jsx(NavigationLinkList, { activeLink: activeSubmenu, links: links, onSubmenuToggle: link => toggleActiveSubmenu(link) }), navigationActions: jsxs(Fragment, { children: [jsx(ConnectedAccountButton, { href: PATHS.ACCOUNT }), jsx(ConnectedFavoritesButton, { href: PATHS.FAVORITES }), jsx(ConnectedCartButton, { href: PATHS.CART })] }), search: jsx(SearchButton, { "aria-controls": "global-search", 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 }))] }));
10
69
  }
11
70
 
12
71
  export { Header };
@@ -0,0 +1,3 @@
1
+ var styles = {"header":"header-module--VpOI","sticky":"header-module-Zh4pu"};
2
+
3
+ export { styles as default };
@@ -1,6 +1,7 @@
1
- import { NavigationLink } from '../../shared/model/link';
1
+ import { NavigationLink } from '../../shared/api/bff/model/bff.model';
2
2
  export interface LinkListProps {
3
+ activeLink?: NavigationLink;
3
4
  links: NavigationLink[];
4
5
  onSubmenuToggle: (link: NavigationLink) => void;
5
6
  }
6
- export declare function NavigationLinkList({ links, onSubmenuToggle }: LinkListProps): import("react/jsx-runtime").JSX.Element;
7
+ export declare function NavigationLinkList({ activeLink, links, onSubmenuToggle, }: LinkListProps): import("react/jsx-runtime").JSX.Element;
@@ -3,10 +3,10 @@ import { GlyphsChevronsBoldDownIcon } from '../../icons/glyph/glyphs-chevrons-bo
3
3
  import { RouteLink } from '../../shared/routing/route-link.js';
4
4
  import styles from './navigation-link-list.module.css.js';
5
5
 
6
- function NavigationLinkList({ links, onSubmenuToggle }) {
6
+ function NavigationLinkList({ activeLink, links, onSubmenuToggle, }) {
7
7
  return (jsx("ul", { className: styles['navigation-link-list'], children: links.map(link => {
8
- if (link.links.length > 0) {
9
- return (jsx("li", { children: jsxs(RouteLink, { className: styles.link, onClick: () => onSubmenuToggle(link), children: [link.title, jsx(GlyphsChevronsBoldDownIcon, { className: styles.chevron })] }) }, link.key));
8
+ if (link.links && link.links.length > 0) {
9
+ return (jsx("li", { className: activeLink === link ? styles['active'] : undefined, children: jsxs(RouteLink, { "aria-controls": `panels-${link.key}`, "aria-expanded": activeLink === link, className: styles.link, onClick: () => onSubmenuToggle(link), target: link.openInNewTab ? '_blank' : undefined, children: [link.title, jsx(GlyphsChevronsBoldDownIcon, { className: styles.chevron })] }) }, link.key));
10
10
  }
11
11
  return (jsx("li", { children: jsx(RouteLink, { className: styles.link, href: link.url, children: link.title }) }, link.key));
12
12
  }) }));
@@ -1,3 +1,3 @@
1
- var styles = {"navigation-link-list":"navigation-link-list-module-Ku9Sa","link":"navigation-link-list-module-kj0Rj","chevron":"navigation-link-list-module-QiKiA"};
1
+ var styles = {"navigation-link-list":"navigation-link-list-module-Ku9Sa","link":"navigation-link-list-module-kj0Rj","chevron":"navigation-link-list-module-QiKiA","active":"navigation-link-list-module-jDgf0"};
2
2
 
3
3
  export { styles as default };
@@ -1,5 +1,6 @@
1
1
  export interface SonicLogoProps {
2
2
  className?: string;
3
3
  href?: string;
4
+ title?: string;
4
5
  }
5
- export declare function SonicLogo({ className, href }: SonicLogoProps): import("react/jsx-runtime").JSX.Element;
6
+ export declare function SonicLogo({ className, href, title }: SonicLogoProps): import("react/jsx-runtime").JSX.Element;
@@ -1,11 +1,13 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import clsx from 'clsx';
3
+ import { useFormattedMessage } from '../../intl/use-formatted-message.js';
3
4
  import { RouteLink } from '../../shared/routing/route-link.js';
4
5
  import styles from './sonic-logo.module.css.js';
5
6
 
6
- function SonicLogo({ className, href }) {
7
+ function SonicLogo({ className, href, title }) {
8
+ const t = useFormattedMessage();
7
9
  const Tag = href ? RouteLink : 'div';
8
- return (jsx(Tag, { "aria-label": "Sonic", className: clsx(styles.wrapper, className), href: href, children: jsx("svg", { className: styles['sonic-logo'], viewBox: "0 0 100 24", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { fill: "none", fillRule: "evenodd", children: [jsx("path", { className: styles.letters, d: "M11.87 8.65c1.815 0 3.286 1.482 3.286 3.311 0 6.595-5.325 11.962-11.87 11.962C1.471 23.923 0 22.44 0 20.612c0-1.766 1.372-3.21 3.1-3.307l.186-.005c2.848 0 5.179-2.277 5.293-5.12l.005-.219c0-1.829 1.471-3.311 3.286-3.311zm0-8.65c1.815 0 3.286 1.483 3.286 3.311 0 1.766-1.371 3.21-3.1 3.307l-.186.005c-2.849 0-5.178 2.277-5.293 5.118l-.004.22c0 1.829-1.472 3.311-3.287 3.311C1.472 15.272 0 13.79 0 11.961 0 5.366 5.325 0 11.87 0zm6.155 12.016c0 6.596 5.325 11.963 11.87 11.963 6.545 0 11.87-5.367 11.87-11.963 0-6.595-5.325-11.96-11.87-11.96-6.545 0-11.87 5.365-11.87 11.96zm6.572 0c0-2.943 2.376-5.338 5.298-5.338 2.92 0 5.297 2.395 5.297 5.338 0 2.945-2.376 5.34-5.297 5.34-2.922 0-5.298-2.395-5.298-5.34zM82.251 3.56c-4.628 4.663-4.628 12.251 0 16.915 4.628 4.663 12.158 4.663 16.786 0a3.33 3.33 0 0 0 .001-4.683 3.268 3.268 0 0 0-4.501-.138l-.146.138a5.278 5.278 0 0 1-7.494 0c-2.064-2.081-2.064-5.468.001-7.549a5.275 5.275 0 0 1 7.313-.174l.18.173a3.268 3.268 0 0 0 4.647 0 3.33 3.33 0 0 0 0-4.684c-4.63-4.663-12.16-4.662-16.787.002zm-12.868-.13v17.148c0 1.828 1.47 3.311 3.285 3.311 1.816 0 3.287-1.483 3.287-3.311V3.429c0-1.829-1.471-3.312-3.287-3.312-1.815 0-3.285 1.483-3.285 3.312zM48.063.075c-1.814 0-3.285 1.483-3.285 3.311V20.69c0 1.828 1.471 3.311 3.286 3.311s3.286-1.483 3.286-3.311V6.698h2.95c2.92 0 5.297 2.394 5.297 5.338v8.653c0 1.828 1.471 3.311 3.286 3.311s3.286-1.483 3.286-3.311v-8.653C66.17 5.44 60.844.075 54.3.075h-6.235z" }), jsx("path", { className: styles.dot, d: "M35.27 12.017c0 2.991-2.406 5.416-5.375 5.416-2.97 0-5.376-2.425-5.376-5.416 0-2.992 2.407-5.417 5.376-5.417 2.969 0 5.375 2.425 5.375 5.417" })] }) }) }));
10
+ return (jsx(Tag, { className: clsx(styles.wrapper, className), href: href, title: title, children: jsx("svg", { "aria-label": t('Sonic Equipment'), className: styles['sonic-logo'], viewBox: "0 0 100 24", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { fill: "none", fillRule: "evenodd", children: [jsx("path", { className: styles.letters, d: "M11.87 8.65c1.815 0 3.286 1.482 3.286 3.311 0 6.595-5.325 11.962-11.87 11.962C1.471 23.923 0 22.44 0 20.612c0-1.766 1.372-3.21 3.1-3.307l.186-.005c2.848 0 5.179-2.277 5.293-5.12l.005-.219c0-1.829 1.471-3.311 3.286-3.311zm0-8.65c1.815 0 3.286 1.483 3.286 3.311 0 1.766-1.371 3.21-3.1 3.307l-.186.005c-2.849 0-5.178 2.277-5.293 5.118l-.004.22c0 1.829-1.472 3.311-3.287 3.311C1.472 15.272 0 13.79 0 11.961 0 5.366 5.325 0 11.87 0zm6.155 12.016c0 6.596 5.325 11.963 11.87 11.963 6.545 0 11.87-5.367 11.87-11.963 0-6.595-5.325-11.96-11.87-11.96-6.545 0-11.87 5.365-11.87 11.96zm6.572 0c0-2.943 2.376-5.338 5.298-5.338 2.92 0 5.297 2.395 5.297 5.338 0 2.945-2.376 5.34-5.297 5.34-2.922 0-5.298-2.395-5.298-5.34zM82.251 3.56c-4.628 4.663-4.628 12.251 0 16.915 4.628 4.663 12.158 4.663 16.786 0a3.33 3.33 0 0 0 .001-4.683 3.268 3.268 0 0 0-4.501-.138l-.146.138a5.278 5.278 0 0 1-7.494 0c-2.064-2.081-2.064-5.468.001-7.549a5.275 5.275 0 0 1 7.313-.174l.18.173a3.268 3.268 0 0 0 4.647 0 3.33 3.33 0 0 0 0-4.684c-4.63-4.663-12.16-4.662-16.787.002zm-12.868-.13v17.148c0 1.828 1.47 3.311 3.285 3.311 1.816 0 3.287-1.483 3.287-3.311V3.429c0-1.829-1.471-3.312-3.287-3.312-1.815 0-3.285 1.483-3.285 3.312zM48.063.075c-1.814 0-3.285 1.483-3.285 3.311V20.69c0 1.828 1.471 3.311 3.286 3.311s3.286-1.483 3.286-3.311V6.698h2.95c2.92 0 5.297 2.394 5.297 5.338v8.653c0 1.828 1.471 3.311 3.286 3.311s3.286-1.483 3.286-3.311v-8.653C66.17 5.44 60.844.075 54.3.075h-6.235z" }), jsx("path", { className: styles.dot, d: "M35.27 12.017c0 2.991-2.406 5.416-5.375 5.416-2.97 0-5.376-2.425-5.376-5.416 0-2.992 2.407-5.417 5.376-5.417 2.969 0 5.375 2.425 5.375 5.417" })] }) }) }));
9
11
  }
10
12
 
11
13
  export { SonicLogo };
package/dist/index.js CHANGED
@@ -90,6 +90,7 @@ export { useDrawer } from './drawer/use-drawer.js';
90
90
  export { ActiveFilters } from './filters/active-filters/active-filters.js';
91
91
  export { MultiSelect } from './filters/multi-select/multi-select.js';
92
92
  export { Pagination } from './filters/pagination/pagination.js';
93
+ export { ConnectedFooter } from './footer/connected-footer.js';
93
94
  export { Footer } from './footer/footer.js';
94
95
  export { CheckboxField } from './forms/checkbox-field/checkbox-field.js';
95
96
  export { Checkbox } from './forms/checkbox/checkbox.js';
@@ -111,7 +112,7 @@ export { TextField } from './forms/text-field/text-field.js';
111
112
  export { TextArea } from './forms/textarea/textarea.js';
112
113
  export { CategoriesGrid } from './global-search/categories-grid/categories-grid.js';
113
114
  export { GlobalSearch, SearchRoot } from './global-search/global-search.js';
114
- export { GlobalSearchDisclosureContext, GlobalSearchProvider } from './global-search/global-search-provider/global-search-provider.js';
115
+ export { GlobalSearchProvider } from './global-search/global-search-provider/global-search-provider.js';
115
116
  export { useGlobalSearchDisclosure } from './global-search/global-search-provider/use-search-disclosure.js';
116
117
  export { categoriesPlugin } from './global-search/plugins/categories-plugin.js';
117
118
  export { popularCategoriesPlugin } from './global-search/plugins/popular-categories-plugin.js';
@@ -132,8 +133,15 @@ export { WithResults } from './global-search/search-result-panel/sections/with-r
132
133
  export { SearchList } from './global-search/search-section/search-list.js';
133
134
  export { SearchListItem } from './global-search/search-section/search-list-item.js';
134
135
  export { SearchSection } from './global-search/search-section/search-section.js';
135
- export { ConnectedCartIcon } from './header/cart-icon/connected-cart-icon.js';
136
- export { HamburgerButton } from './header/hamburger-button/hamburger-button.js';
136
+ export { ConnectedAccountButton } from './header/buttons/account/connected-account-button.js';
137
+ export { ConnectedCartButton } from './header/buttons/cart/connected-cart-button.js';
138
+ export { ConnectedFavoritesButton } from './header/buttons/favorites/connected-favorites-button.js';
139
+ export { HamburgerButton } from './header/buttons/hamburger/hamburger-button.js';
140
+ export { SearchButton } from './header/buttons/search/search-button.js';
141
+ export { ConnectedHeader } from './header/connected-header.js';
142
+ export { DesktopNavigationDrawer } from './header/drawers/desktop-navigation-drawer.js';
143
+ export { MobileNavigationDrawer } from './header/drawers/mobile-navigation-drawer.js';
144
+ export { SearchDrawer } from './header/drawers/search-drawer.js';
137
145
  export { Header } from './header/header.js';
138
146
  export { HeaderLayout } from './header/header-layout/header-layout.js';
139
147
  export { NavigationLinkList } from './header/link-list/navigation-link-list.js';
@@ -183,8 +191,9 @@ export { FavoriteIcon } from './navigation/favorite-icon/favorite-icon.js';
183
191
  export { MobileNavigation } from './navigation/mobile-navigation/mobile-navigation.js';
184
192
  export { PanelNavigation } from './navigation/panel-navigation/panel-navigation.js';
185
193
  export { Announcement } from './notifications/announcements/announcement.js';
186
- export { AnnouncementProvider } from './notifications/announcements/announcement-provider.js';
187
- export { ConnectedAnnouncement, now } from './notifications/announcements/connected-announcement.js';
194
+ export { AnnouncementList } from './notifications/announcements/announcement-list.js';
195
+ export { ConnectedAnnouncementList } from './notifications/announcements/connected-announcement-list.js';
196
+ export { useFilterAnnouncements } from './notifications/announcements/use-filter-announcements.js';
188
197
  export { IntersectionObserverComponent } from './observers/intersection-observer.js';
189
198
  export { CreateAccountForm } from './pages/account/components/create-account-form/create-account-form.js';
190
199
  export { SignInForm } from './pages/account/components/sign-in-form/sign-in-form.js';
@@ -243,9 +252,10 @@ export { PromoBanner } from './promos/promo-banner/promo-banner.js';
243
252
  export { PromoBanners } from './promos/promo-banners/promo-banners.js';
244
253
  export { PromoCard } from './promos/promo-card/promo-card.js';
245
254
  export { useFetchAnnouncements } from './shared/api/bff/hooks/use-fetch-announcements.js';
255
+ export { useFetchNavigationLinks } from './shared/api/bff/hooks/use-fetch-navigation-links.js';
246
256
  export { useFetchProductDetailsPageData } from './shared/api/bff/hooks/use-fetch-product-details-page-data.js';
247
257
  export { useFetchProductListingPageData } from './shared/api/bff/hooks/use-fetch-product-listing-page-data.js';
248
- export { fetchAnnouncements, fetchProductDetailsPageData, fetchProductListingPageData } from './shared/api/bff/services/bff-service.js';
258
+ export { fetchAnnouncements, fetchNavigationLinks, fetchProductDetailsPageData, fetchProductListingPageData } from './shared/api/bff/services/bff-service.js';
249
259
  export { useAwaitableMutation } from './shared/api/shared/hooks/use-awaitable-mutation.js';
250
260
  export { useCreateAccount } from './shared/api/storefront/hooks/authentication/use-create-account.js';
251
261
  export { useCreateGuestAccount } from './shared/api/storefront/hooks/authentication/use-create-guest-account.js';
@@ -319,6 +329,7 @@ export { useGlobalDisclosure } from './shared/hooks/use-global-disclosure.js';
319
329
  export { useIntersectionObserver } from './shared/hooks/use-intersection-observer.js';
320
330
  export { useIsBreakpoint } from './shared/hooks/use-is-breakpoint.js';
321
331
  export { useIsScrolledBeyondElement } from './shared/hooks/use-is-scrolled-beyond-element.js';
332
+ export { useMutationObserver } from './shared/hooks/use-mutation-observer.js';
322
333
  export { useResizeObserver } from './shared/hooks/use-resize-observer.js';
323
334
  export { useScript } from './shared/hooks/use-script.js';
324
335
  export { useScrollLock } from './shared/hooks/use-scroll-lock.js';
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, Fragment } from 'react/jsx-runtime';
2
3
  import { useCallback, useMemo } from 'react';
3
4
  import { useFetchTranslations } from '../shared/api/storefront/hooks/translation/use-fetch-translations.js';
@@ -1 +1 @@
1
- export type TranslationId = "'{0}' in all products" | "Try 'Search' and try to find the product you're looking for" | "Unfortnately, We found no articles for your search '{0}'" | ' to your account to manage your lists.' | 'Access denied.' | 'Add order notes' | 'Add to list' | 'Address' | 'Amount: {0}' | 'An error occurred while processing your payment. Please try again.' | 'An unexpected error occured' | 'An unexpected error occured. Please try again.' | 'Are you looking for information about our service? Please visit our customer support page' | 'Are you sure you want to remove all items from your cart?' | 'Are you sure you want to remove this item from your cart?' | 'article' | 'articles' | 'As soon as possible' | 'Attention' | 'Availability unknown, please contact customer support for lead time or alternatives.' | 'Billing address' | 'Billing and shipping address' | 'Billing and shipping information' | 'Cancel' | 'Cart' | 'Changing your address is currently not possible. Please contact customer support to change your address.' | 'Chosen filters' | 'City' | 'Clear filters' | 'Clear' | 'Click the button below to continue shopping.' | 'Client cases' | 'Close' | 'Company name' | 'Conceal value' | 'Confirm password' | 'Continue shopping' | 'Continue to sign in' | 'Continue' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Currency Change' | 'Current page' | 'Delivery date' | 'Delivery expected on {0}' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | 'Edit billing address' | 'Edit shipping address' | 'Email' | 'Enter your email address and we will send you an email that will allow you to recover your password.' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'Favorites' | 'Features' | 'First name' | 'Forgot password?' | 'Fulfillment method' | 'General' | 'Hide filters' | 'Home' | 'If an account matches the email address you entered, instructions on how to recover the password will be sent to that email address shortly. If you do not receive this email, please contact Customer Support.' | 'If you want to proceed, click the continue button. If you want to change your country, close this message and select a different country.' | 'Incl. VAT' | 'Includes' | 'Industry' | 'industry.PP' | 'industry.AU' | 'industry.MC' | 'industry.BC' | 'industry.TR' | 'industry.AG' | 'industry.AV' | 'industry.MA' | 'industry.OT' | 'Information' | 'Language' | 'Last name' | 'List name already exists' | 'Main menu' | 'More than {0} articles' | 'My account' | 'My Sonic' | 'Navigation' | 'New list name' | 'New user?' | 'Number of favorites' | 'Number of products' | 'of' | 'Or continue as guest' | 'Order confirmation' | 'Order date' | 'Order number' | 'Order number' | 'Order' | 'Order' | 'Our products' | 'Password does not meet requirements' | 'Password' | 'Passwords do not match' | 'Pay by invoice' | 'Pay' | 'Payment method' | 'Payment' | 'pc' | 'Phone' | 'Pick up' | 'Pickup address' | 'Please enter a valid email address' | 'Please enter a valid phone number' | 'please go back to your cart.' | 'Please Sign In' | 'PO Number' | 'Popular searches' | 'Postal Code' | 'Print' | 'Private account' | 'Processing' | 'Product Features' | 'Product' | 'Products' | 'Quantity' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Recover your password' | 'Remember me' | 'Remove all' | 'Requested delivery date' | 'Requested delivery date' | 'Reveal value' | 'Review and payment' | 'Save order' | 'Save' | 'Saved cart for later.' | 'Search' | 'Searching again using more general terms' | 'See all results' | 'Select a country' | 'Select a desired delivery date' | 'Select a language' | 'Select a list' | 'Select an industry' | 'Selecting As Soon As Possible will enable us to send the products to you as they become available.' | 'Selecting this country will result in your cart to be converted to the currency {0}' | 'Share your favorite list with others' | 'Ship' | 'Shipping address' | 'Shipping and handling' | 'Shipping details' | 'Shop more efficiently and quicker with a favorites list' | 'Shopping cart' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'sign in' | 'Sign in or create account' | 'Sign me up for newsletters and product updates' | 'Signed in' | 'Signed out' | 'Signing in…' | 'Sonic address' | 'Sonic Equipment' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'Specifications' | 'Submenu' | 'Submit email address' | 'Submit' | 'Submitting…' | 'Subtotal' | 'Support' | 'Suggestions' | 'tag.limited' | 'tag.new' | 'The email address you entered is already associated with an existing account. Please sign in to this account or contact Customer Support.' | 'The expected delivery is an indication based on the product availability and the shipping location.' | 'The product has been added to your cart.' | 'The product has been removed from your cart.' | 'The product has been updated in your cart.' | 'There are no products in your shopping cart.' | 'Toggle navigation menu' | 'Total amount is' | 'Total' | 'Try another search' | 'Unable to add the product to your cart.' | 'Unable to empty your cart.' | 'Unable to remove the product from your cart.' | 'Unable to save cart for later.' | 'Unable to update the product in your cart.' | 'Unknown' | 'Updating address' | 'Use billing address' | 'Use fewer keywords' | 'Validating' | 'validation.badInput' | 'validation.customError' | 'validation.invalid' | 'validation.patternMismatch' | 'validation.rangeOverflow' | 'validation.rangeUnderflow' | 'validation.stepMismatch' | 'validation.tooLong' | 'validation.tooShort' | 'validation.typeMismatch' | 'validation.valid' | 'validation.valueMissing' | 'VAT Number' | 'VAT' | 'Welcome to Sonic Equipment. Please choose your country and language below.' | 'What are you searching for?' | 'You could try checking the spelling of your search query' | 'You could try exploring our products by category' | 'You could try' | 'You have reached the end of the results, but there may be more articles available. Adjust your filters or search to discover more!' | 'You must ' | 'You selected a country where we invoice in a different currency. This will result in your cart being converted to the new currency. If you would like to review your order, ' | 'Your cart has been emptied.' | 'Your email and password were not recognized.' | 'Your favorites are available on multiple devices' | 'Your new Sonic Equipment account was succesfully created. You should receive an email soon with further instructions on how to activate this account. If you do not receive this email, please contact Customer Support.' | 'Your shopping cart is still empty';
1
+ export type TranslationId = "'{0}' in all products" | "Try 'Search' and try to find the product you're looking for" | "Unfortnately, We found no articles for your search '{0}'" | ' to your account to manage your lists.' | 'Access denied.' | 'Add order notes' | 'Add to list' | 'Address' | 'Amount: {0}' | 'An error occurred while processing your payment. Please try again.' | 'An unexpected error occured' | 'An unexpected error occured. Please try again.' | 'Are you looking for information about our service? Please visit our customer support page' | 'Are you sure you want to remove all items from your cart?' | 'Are you sure you want to remove this item from your cart?' | 'article' | 'articles' | 'As soon as possible' | 'Attention' | 'Availability unknown, please contact customer support for lead time or alternatives.' | 'Billing address' | 'Billing and shipping address' | 'Billing and shipping information' | 'Cancel' | 'Cart' | 'Changing your address is currently not possible. Please contact customer support to change your address.' | 'Checkout order' | 'Chosen filters' | 'City' | 'Clear filters' | 'Clear' | 'Click the button below to continue shopping.' | 'Client cases' | 'Close' | 'Company name' | 'Conceal value' | 'Confirm password' | 'Continue shopping' | 'Continue to sign in' | 'Continue' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Currency Change' | 'Current page' | 'Delivery date' | 'Delivery expected on {0}' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | 'Edit billing address' | 'Edit shipping address' | 'Email' | 'Enter your email address and we will send you an email that will allow you to recover your password.' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'Favorites' | 'Features' | 'Finalize order' | 'Finalize payment' | 'First name' | 'Forgot password?' | 'Fulfillment method' | 'General' | 'Hide filters' | 'Home' | 'If an account matches the email address you entered, instructions on how to recover the password will be sent to that email address shortly. If you do not receive this email, please contact Customer Support.' | 'If you want to proceed, click the continue button. If you want to change your country, close this message and select a different country.' | 'Incl. VAT' | 'Includes' | 'Industry' | 'industry.AG' | 'industry.AU' | 'industry.AV' | 'industry.BC' | 'industry.MA' | 'industry.MC' | 'industry.OT' | 'industry.PP' | 'industry.TR' | 'Information' | 'Language' | 'Last name' | 'List name already exists' | 'Main menu' | 'More than {0} articles' | 'My account' | 'My Sonic' | 'Navigation' | 'New list name' | 'New user?' | 'Number of favorites' | 'Number of products' | 'of' | 'Or continue as guest' | 'Order confirmation' | 'Order date' | 'Order number' | 'Order' | 'Our products' | 'Password does not meet requirements' | 'Password' | 'Passwords do not match' | 'Pay by invoice' | 'Payment method' | 'Payment' | 'pc' | 'Phone' | 'Pick up' | 'Pickup address' | 'Please enter a valid email address' | 'Please enter a valid phone number' | 'please go back to your cart.' | 'Please Sign In' | 'PO Number' | 'Popular searches' | 'Postal Code' | 'Print' | 'Private account' | 'Processing' | 'Product Features' | 'Product' | 'Products' | 'Quantity' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Recover your password' | 'Remember me' | 'Remove all' | 'Requested delivery date' | 'Reveal value' | 'Review and payment' | 'Save order' | 'Save' | 'Saved cart for later.' | 'Search' | 'Searching again using more general terms' | 'See all results' | 'Select a country' | 'Select a desired delivery date' | 'Select a language' | 'Select a list' | 'Select an industry' | 'Selecting As Soon As Possible will enable us to send the products to you as they become available.' | 'Selecting this country will result in your cart to be converted to the currency {0}' | 'Share your favorite list with others' | 'Ship' | 'Shipping address' | 'Shipping and handling' | 'Shipping details' | 'Shop more efficiently and quicker with a favorites list' | 'Shopping cart' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'Sign in or create account' | 'sign in' | 'Sign me up for newsletters and product updates' | 'Signed in' | 'Signed out' | 'Signing in…' | 'Sonic address' | 'Sonic Equipment' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'Specifications' | 'Start checkout' | 'Submenu' | 'Submit email address' | 'Submit' | 'Submitting…' | 'Subtotal' | 'Suggestions' | 'Support' | 'tag.limited' | 'tag.new' | 'The email address you entered is already associated with an existing account. Please sign in to this account or contact Customer Support.' | 'The expected delivery is an indication based on the product availability and the shipping location.' | 'The product has been added to your cart.' | 'The product has been removed from your cart.' | 'The product has been updated in your cart.' | 'There are no products in your shopping cart.' | 'Toggle navigation menu' | 'Total amount is' | 'Total' | 'Try another search' | 'Unable to add the product to your cart.' | 'Unable to empty your cart.' | 'Unable to remove the product from your cart.' | 'Unable to save cart for later.' | 'Unable to update the product in your cart.' | 'Unknown' | 'Updating address' | 'Use billing address' | 'Use fewer keywords' | 'Validating' | 'validation.badInput' | 'validation.customError' | 'validation.invalid' | 'validation.patternMismatch' | 'validation.rangeOverflow' | 'validation.rangeUnderflow' | 'validation.stepMismatch' | 'validation.tooLong' | 'validation.tooShort' | 'validation.typeMismatch' | 'validation.valid' | 'validation.valueMissing' | 'VAT Number' | 'VAT' | 'Welcome to Sonic Equipment. Please choose your country and language below.' | 'What are you searching for?' | 'You could try checking the spelling of your search query' | 'You could try exploring our products by category' | 'You could try' | 'You have reached the end of the results, but there may be more articles available. Adjust your filters or search to discover more!' | 'You must ' | 'You selected a country where we invoice in a different currency. This will result in your cart being converted to the new currency. If you would like to review your order, ' | 'Your cart has been emptied.' | 'Your email and password were not recognized.' | 'Your favorites are available on multiple devices' | 'Your new Sonic Equipment account was succesfully created. You should receive an email soon with further instructions on how to activate this account. If you do not receive this email, please contact Customer Support.' | 'Your shopping cart is still empty';
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsxs, jsx } from 'react/jsx-runtime';
2
3
  import { GlyphsChevronsSlimLeftIcon } from '../../icons/glyph/glyphs-chevrons-slim-left-icon.js';
3
4
  import styles from './menu-list.module.css.js';