@sonic-equipment/ui 188.0.0 → 189.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 (82) hide show
  1. package/dist/cards/data-card/data-card.js +1 -1
  2. package/dist/country-selector/connected-country-selector.js +0 -11
  3. package/dist/country-selector/use-countries-languages.js +0 -11
  4. package/dist/delivery-time/delivery-time.js +3 -4
  5. package/dist/exports.d.ts +12 -3
  6. package/dist/forms/fields/select-field/select-field.js +1 -1
  7. package/dist/forms/layout/form/form.js +1 -1
  8. package/dist/header/link-list/navigation-link-list.js +14 -4
  9. package/dist/index.js +13 -4
  10. package/dist/intl/formatted-date.d.ts +4 -0
  11. package/dist/intl/formatted-date.js +8 -0
  12. package/dist/intl/translation-id.d.ts +1 -1
  13. package/dist/intl/use-formatted-date.d.ts +6 -0
  14. package/dist/intl/use-formatted-date.js +19 -0
  15. package/dist/lists/menu-list/menu-list-item.js +3 -1
  16. package/dist/lists/menu-list/menu-list-provider.d.ts +11 -0
  17. package/dist/lists/menu-list/menu-list-provider.js +30 -0
  18. package/dist/lists/menu-list/menu-list.d.ts +2 -1
  19. package/dist/lists/menu-list/menu-list.js +4 -3
  20. package/dist/lists/menu-list/menu-list.module.css.js +1 -1
  21. package/dist/lists/menu-list/use-menu-list-item.d.ts +5 -0
  22. package/dist/lists/menu-list/use-menu-list-item.js +12 -0
  23. package/dist/lists/menu-list/use-menu-list.d.ts +1 -0
  24. package/dist/lists/menu-list/use-menu-list.js +11 -0
  25. package/dist/loading/dynamic-loading-overlay.d.ts +5 -0
  26. package/dist/loading/dynamic-loading-overlay.js +26 -0
  27. package/dist/loading/dynamic-loading-overlay.module.css.js +3 -0
  28. package/dist/pages/checkout/cart-page/cart-page.js +1 -1
  29. package/dist/pages/checkout/order-confirmation-page/order-confirmation-page-content.js +2 -4
  30. package/dist/pages/error-page/error-page.js +2 -7
  31. package/dist/pages/my-sonic/actions/change-password/connected-change-password-dialog.js +0 -2
  32. package/dist/pages/my-sonic/navigation/my-sonic-desktop-navigation.js +1 -1
  33. package/dist/pages/my-sonic/pages/order-history/order-history.d.ts +1 -0
  34. package/dist/pages/my-sonic/pages/order-history/order-history.js +166 -0
  35. package/dist/pages/my-sonic/pages/order-history/order-history.module.css.js +3 -0
  36. package/dist/pages/product/product-listing-page/product-listing.js +1 -1
  37. package/dist/pages/product/search-result-page/search-results-page.js +1 -1
  38. package/dist/shared/api/storefront/hooks/orders/use-fetch-orders.d.ts +10 -0
  39. package/dist/shared/api/storefront/hooks/orders/use-fetch-orders.js +13 -0
  40. package/dist/shared/api/storefront/model/storefront.model.d.ts +13 -1
  41. package/dist/shared/api/storefront/model/storefront.model.js +28 -1
  42. package/dist/shared/api/storefront/services/order-service.d.ts +12 -0
  43. package/dist/shared/api/storefront/services/order-service.js +29 -0
  44. package/dist/shared/hooks/use-intersection-observer.d.ts +3 -1
  45. package/dist/shared/hooks/use-intersection-observer.js +3 -2
  46. package/dist/shared/utils/date.d.ts +4 -1
  47. package/dist/shared/utils/date.js +6 -5
  48. package/dist/shared/utils/price.d.ts +1 -1
  49. package/dist/shared/{hooks/use-scroll-to.d.ts → utils/scrolling.d.ts} +1 -1
  50. package/dist/shared/utils/scrolling.js +16 -0
  51. package/dist/shared/utils/uuid.d.ts +2 -1
  52. package/dist/styles.css +894 -634
  53. package/dist/table/data-table.d.ts +37 -10
  54. package/dist/table/data-table.js +72 -17
  55. package/dist/table/data-table.module.css.js +1 -1
  56. package/dist/table/elements/switch-sort-direction.d.ts +2 -0
  57. package/dist/table/elements/switch-sort-direction.js +11 -0
  58. package/dist/table/elements/table-context.d.ts +6 -5
  59. package/dist/table/elements/table-context.js +1 -16
  60. package/dist/table/elements/table-provider.d.ts +6 -5
  61. package/dist/table/elements/table-provider.js +23 -17
  62. package/dist/table/elements/table-row-context.d.ts +2 -2
  63. package/dist/table/elements/table-row-provider.js +4 -4
  64. package/dist/table/elements/table-sort-button.d.ts +8 -7
  65. package/dist/table/elements/table-sort-button.js +5 -4
  66. package/dist/table/elements/table.d.ts +1 -1
  67. package/dist/table/elements/table.js +2 -2
  68. package/dist/table/elements/table.module.css.js +1 -1
  69. package/dist/table/elements/td.d.ts +1 -1
  70. package/dist/table/elements/th.d.ts +1 -7
  71. package/dist/table/elements/th.js +2 -3
  72. package/dist/table/elements/tr.d.ts +2 -8
  73. package/dist/table/elements/tr.js +1 -3
  74. package/dist/table/elements/types.d.ts +36 -0
  75. package/dist/table/elements/use-table.js +1 -3
  76. package/dist/table/elements/use-td.d.ts +1 -1
  77. package/dist/table/elements/use-th.d.ts +2 -2
  78. package/package.json +1 -1
  79. package/dist/shared/hooks/use-scroll-to.js +0 -19
  80. package/dist/table/elements/table-column-properties.d.ts +0 -10
  81. package/dist/table/elements/use-tr.d.ts +0 -2
  82. package/dist/table/elements/use-tr.js +0 -16
@@ -18,7 +18,7 @@ function renderValue(rendering, key, value) {
18
18
  const renderedValue = rendering?.value
19
19
  ? rendering.value({ key, value })
20
20
  : value !== undefined && value !== null
21
- ? String(value)
21
+ ? value
22
22
  : null;
23
23
  if (renderedValue === null ||
24
24
  renderedValue === undefined ||
@@ -16,17 +16,6 @@ function ConnectedCountrySelector({ defaultCountryCode, defaultLanguageCode, onC
16
16
  const isCountryLanguageSelected = useMemo(() => selectedCountry !== undefined && selectedLanguage !== undefined, [selectedCountry, selectedLanguage]);
17
17
  const isDismissable = isCountryLanguageSelected;
18
18
  useEffect(() => {
19
- if (!isFetching) {
20
- if (selectedCountry === undefined && selectedLanguage === undefined) {
21
- logger.info('Opening country selector dialog because no country or language is selected');
22
- }
23
- else if (selectedCountry === undefined) {
24
- logger.info('Opening country selector dialog because no country is selected');
25
- }
26
- else if (selectedLanguage === undefined) {
27
- logger.info('Opening country selector dialog because no language is selected');
28
- }
29
- }
30
19
  if (isOpen)
31
20
  return;
32
21
  setIsOpen(!isFetching && !isCountryLanguageSelected);
@@ -1,7 +1,6 @@
1
1
  "use client";
2
2
  import { useEffect } from 'react';
3
3
  import { config } from '../config.js';
4
- import { logger } from '../logging/logger.js';
5
4
  import { useFetchCountriesWithLanguages } from '../shared/api/storefront/hooks/website/use-fetch-countries-with-languages.js';
6
5
  import { updateLocale } from '../shared/api/storefront/services/website-service.js';
7
6
  import { useCookie } from '../shared/hooks/use-cookie.js';
@@ -38,16 +37,6 @@ function useCountriesLanguages({ defaultCountryCode, defaultLanguageCode, }) {
38
37
  languageId: language.id,
39
38
  });
40
39
  }
41
- useEffect(() => {
42
- logger.info('CountryID from cookie', currentCountryId, countries?.find(country => country.id === currentCountryId)?.name ||
43
- 'Unknown');
44
- }, [countries, currentCountryId]);
45
- useEffect(() => {
46
- logger.info('LanguageID from cookie', currentLanguageId, countries
47
- ?.find(country => country.id === currentCountryId)
48
- ?.languages.find(language => language.id === currentLanguageId)
49
- ?.description || 'Unknown');
50
- }, [countries, currentCountryId, currentLanguageId]);
51
40
  try {
52
41
  if (error)
53
42
  throw error;
@@ -3,14 +3,13 @@ import { jsx, jsxs } from 'react/jsx-runtime';
3
3
  import clsx from 'clsx';
4
4
  import { FormattedMessage } from '../intl/formatted-message.js';
5
5
  import { InfoIconTooltip } from '../info-icon-tooltip/info-icon-tooltip.js';
6
+ import { useFormattedDate } from '../intl/use-formatted-date.js';
6
7
  import { useFormattedMessage } from '../intl/use-formatted-message.js';
7
- import { useIntl } from '../intl/use-intl.js';
8
- import { formatDateToLocaleString } from '../shared/utils/date.js';
9
8
  import styles from './delivery-time.module.css.js';
10
9
 
11
10
  function DeliveryTime({ className, deliveryDate }) {
12
- const { cultureCode } = useIntl();
13
11
  const t = useFormattedMessage();
12
+ const formatDate = useFormattedDate();
14
13
  if (deliveryDate === undefined)
15
14
  return null;
16
15
  if (deliveryDate === null) {
@@ -20,7 +19,7 @@ function DeliveryTime({ className, deliveryDate }) {
20
19
  __html: t('Availability unknown, please contact customer support for lead time or alternatives.'),
21
20
  }, "data-test-selector": "deliveryTime_unknown" }) }));
22
21
  }
23
- const localeDate = formatDateToLocaleString(deliveryDate, cultureCode, {
22
+ const localeDate = formatDate(deliveryDate, {
24
23
  day: 'numeric',
25
24
  month: 'short',
26
25
  year: 'numeric',
package/dist/exports.d.ts CHANGED
@@ -149,6 +149,7 @@ export * from './header/header-layout/header-layout';
149
149
  export * from './header/link-list/navigation-link-list';
150
150
  export * from './header/sonic-logo/sonic-logo';
151
151
  export * from './info-icon-tooltip/info-icon-tooltip';
152
+ export * from './intl/formatted-date';
152
153
  export * from './intl/formatted-message';
153
154
  export * from './intl/intl-context';
154
155
  export * from './intl/intl-provider';
@@ -158,6 +159,7 @@ export * from './intl/types';
158
159
  export * from './intl/use-country-code';
159
160
  export * from './intl/use-culture-code';
160
161
  export * from './intl/use-currency-code';
162
+ export * from './intl/use-formatted-date';
161
163
  export * from './intl/use-formatted-message';
162
164
  export * from './intl/use-intl';
163
165
  export * from './intl/use-language-code';
@@ -170,11 +172,15 @@ export * from './lists/menu-list/menu-list';
170
172
  export * from './lists/menu-list/menu-list-back-button';
171
173
  export * from './lists/menu-list/menu-list-header';
172
174
  export * from './lists/menu-list/menu-list-item';
175
+ export * from './lists/menu-list/menu-list-provider';
176
+ export * from './lists/menu-list/use-menu-list';
177
+ export * from './lists/menu-list/use-menu-list-item';
173
178
  export * from './lists/orderline-list/orderline-list';
174
179
  export * from './lists/product-overview-grid/product-overview-grid';
175
180
  export * from './lists/widget-grid/widget';
176
181
  export * from './lists/widget-grid/widget-grid';
177
182
  export * from './loading/blank-page-spacer';
183
+ export * from './loading/dynamic-loading-overlay';
178
184
  export * from './loading/loading-overlay';
179
185
  export * from './loading/progress-circle';
180
186
  export * from './logging/logger';
@@ -255,6 +261,7 @@ export * from './pages/my-sonic/navigation/connected-my-sonic-navigation';
255
261
  export * from './pages/my-sonic/navigation/my-sonic-desktop-navigation';
256
262
  export * from './pages/my-sonic/navigation/my-sonic-mobile-navigation';
257
263
  export * from './pages/my-sonic/navigation/my-sonic-navigation-items';
264
+ export * from './pages/my-sonic/pages/order-history/order-history';
258
265
  export * from './pages/my-sonic/widgets/components/address-data-card';
259
266
  export * from './pages/my-sonic/widgets/connected-bill-to-address-widget';
260
267
  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
324
331
  export * from './shared/api/storefront/hooks/customer/use-fetch-fulfillment-methods-for-current-cart';
325
332
  export * from './shared/api/storefront/hooks/customer/use-fetch-ship-to-addresses';
326
333
  export * from './shared/api/storefront/hooks/customer/use-patch-bill-to-address';
334
+ export * from './shared/api/storefront/hooks/orders/use-fetch-orders';
327
335
  export * from './shared/api/storefront/hooks/payment/use-create-adyen-session';
328
336
  export * from './shared/api/storefront/hooks/payment/use-fetch-adyen-config';
329
337
  export * from './shared/api/storefront/hooks/payment/use-invalidate-adyen';
@@ -345,6 +353,7 @@ export * from './shared/api/storefront/services/authentication-service';
345
353
  export * from './shared/api/storefront/services/cart-service';
346
354
  export * from './shared/api/storefront/services/customer-service';
347
355
  export * from './shared/api/storefront/services/finance-service';
356
+ export * from './shared/api/storefront/services/order-service';
348
357
  export * from './shared/api/storefront/services/payment-service';
349
358
  export * from './shared/api/storefront/services/product-service';
350
359
  export * from './shared/api/storefront/services/translation-service';
@@ -373,7 +382,6 @@ export * from './shared/hooks/use-mutation-observer';
373
382
  export * from './shared/hooks/use-resize-observer';
374
383
  export * from './shared/hooks/use-script';
375
384
  export * from './shared/hooks/use-scroll-lock';
376
- export * from './shared/hooks/use-scroll-to';
377
385
  export * from './shared/hooks/use-session-storage';
378
386
  export * from './shared/hooks/use-watch-css-property';
379
387
  export * from './shared/model/account';
@@ -412,6 +420,7 @@ export * from './shared/utils/price';
412
420
  export * from './shared/utils/promise';
413
421
  export * from './shared/utils/random';
414
422
  export * from './shared/utils/refs';
423
+ export * from './shared/utils/scrolling';
415
424
  export * from './shared/utils/string';
416
425
  export * from './shared/utils/time';
417
426
  export * from './shared/utils/types';
@@ -423,8 +432,8 @@ export * from './sidebar/types';
423
432
  export * from './sidebar/use-sidebar';
424
433
  export * from './table/data-table';
425
434
  export * from './table/elements/col';
435
+ export * from './table/elements/switch-sort-direction';
426
436
  export * from './table/elements/table';
427
- export * from './table/elements/table-column-properties';
428
437
  export * from './table/elements/table-context';
429
438
  export * from './table/elements/table-provider';
430
439
  export * from './table/elements/table-row-context';
@@ -433,11 +442,11 @@ export * from './table/elements/table-sort-button';
433
442
  export * from './table/elements/td';
434
443
  export * from './table/elements/th';
435
444
  export * from './table/elements/tr';
445
+ export * from './table/elements/types';
436
446
  export * from './table/elements/use-table';
437
447
  export * from './table/elements/use-table-row';
438
448
  export * from './table/elements/use-td';
439
449
  export * from './table/elements/use-th';
440
- export * from './table/elements/use-tr';
441
450
  export * from './text/highlight-text/highlight-text';
442
451
  export * from './text/truncated/truncated';
443
452
  export * from './toast/toast';
@@ -26,7 +26,7 @@ function SelectField({ className, 'data-test-selector': dataTestSelector, defaul
26
26
  [styles['loading']]: isLoading,
27
27
  }, className), "data-test-selector": dataTestSelector, defaultSelectedKey: defaultSelectedOption === undefined
28
28
  ? undefined
29
- : 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)))] }) }) })] }) }) }));
29
+ : 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)))] }) }) })] }) }) }));
30
30
  }
31
31
 
32
32
  export { SelectField };
@@ -4,7 +4,7 @@ import { useEffect } from 'react';
4
4
  import { Form as Form$1 } from 'react-aria-components';
5
5
  import clsx from 'clsx';
6
6
  import { Message } from '../../../message/message.js';
7
- import { scrollToTop } from '../../../shared/hooks/use-scroll-to.js';
7
+ import { scrollToTop } from '../../../shared/utils/scrolling.js';
8
8
  import styles from './form.module.css.js';
9
9
 
10
10
  function Form({ autoComplete = false, children, className, errorMessage, footer, header, onSubmit, title, validationErrors, }) {
@@ -2,19 +2,29 @@
2
2
  import { jsx, jsxs } from 'react/jsx-runtime';
3
3
  import { Link } from '../../buttons/link/link.js';
4
4
  import { GlyphsChevronsBoldDownIcon } from '../../icons/glyph/glyphs-chevrons-bold-down-icon.js';
5
+ import { logger } from '../../logging/logger.js';
5
6
  import { isNavigationLinkGroup, isNavigationLink } from '../../shared/api/bff/model/bff.model.js';
6
7
  import styles from './navigation-link-list.module.css.js';
7
8
 
8
9
  function NavigationLinkList({ activeLink, 'data-test-selector': dataTestSelector, navigationSection, onSubmenuToggle, }) {
9
10
  const items = navigationSection?.items ?? [];
10
11
  return (jsx("ul", { className: styles['navigation-link-list'], "data-test-selector": dataTestSelector, children: items.map(item => {
11
- if (isNavigationLinkGroup(item) && item.items.length > 0) {
12
- 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));
12
+ if (isNavigationLinkGroup(item)) {
13
+ if (item.items.length > 0) {
14
+ 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));
15
+ }
16
+ else {
17
+ logger.warn(`Link-group has no items: ${JSON.stringify(item, null, 2)}`);
18
+ return null;
19
+ }
13
20
  }
14
- if (isNavigationLink(item)) {
21
+ else if (isNavigationLink(item)) {
15
22
  return (jsx("li", { children: jsx(Link, { className: styles.link, href: item.href, children: item.label }) }, item.key));
16
23
  }
17
- throw new Error(`Unsupported link type: ${JSON.stringify(item, null, 2)}`);
24
+ else {
25
+ logger.warn(`Unsupported link type: ${JSON.stringify(item, null, 2)}`);
26
+ return null;
27
+ }
18
28
  }) }));
19
29
  }
20
30
 
package/dist/index.js CHANGED
@@ -152,6 +152,7 @@ export { HeaderLayout } from './header/header-layout/header-layout.js';
152
152
  export { NavigationLinkList } from './header/link-list/navigation-link-list.js';
153
153
  export { SonicLogo } from './header/sonic-logo/sonic-logo.js';
154
154
  export { InfoIconTooltip } from './info-icon-tooltip/info-icon-tooltip.js';
155
+ export { FormattedDate } from './intl/formatted-date.js';
155
156
  export { FormattedMessage } from './intl/formatted-message.js';
156
157
  export { IntlContext } from './intl/intl-context.js';
157
158
  export { IntlProvider } from './intl/intl-provider.js';
@@ -160,6 +161,7 @@ export { isCountryCode, isCultureCode, isCurrencyCode, isLanguageCode } from './
160
161
  export { useCountryCode, useUpdateCountryCode } from './intl/use-country-code.js';
161
162
  export { useCultureCode, useUpdateCultureCode } from './intl/use-culture-code.js';
162
163
  export { useCurrencyCode, useUpdateCurrencyCode } from './intl/use-currency-code.js';
164
+ export { useFormattedDate } from './intl/use-formatted-date.js';
163
165
  export { useFormattedMessage } from './intl/use-formatted-message.js';
164
166
  export { useIntl } from './intl/use-intl.js';
165
167
  export { useLanguageCode } from './intl/use-language-code.js';
@@ -172,11 +174,15 @@ export { MenuList } from './lists/menu-list/menu-list.js';
172
174
  export { MenuListBackButton } from './lists/menu-list/menu-list-back-button.js';
173
175
  export { MenuListHeader } from './lists/menu-list/menu-list-header.js';
174
176
  export { MenuListItem } from './lists/menu-list/menu-list-item.js';
177
+ export { MenuListContext, MenuListProvider } from './lists/menu-list/menu-list-provider.js';
178
+ export { useMenuList } from './lists/menu-list/use-menu-list.js';
179
+ export { useMenuListItem } from './lists/menu-list/use-menu-list-item.js';
175
180
  export { OrderLineList } from './lists/orderline-list/orderline-list.js';
176
181
  export { ProductOverviewGrid } from './lists/product-overview-grid/product-overview-grid.js';
177
182
  export { Widget } from './lists/widget-grid/widget.js';
178
183
  export { WidgetGrid } from './lists/widget-grid/widget-grid.js';
179
184
  export { BlankPageSpacer } from './loading/blank-page-spacer.js';
185
+ export { DynamicLoadingOverlay } from './loading/dynamic-loading-overlay.js';
180
186
  export { LoadingOverlay } from './loading/loading-overlay.js';
181
187
  export { ProgressCircle } from './loading/progress-circle.js';
182
188
  export { consoleLogger, initLogger, logger } from './logging/logger.js';
@@ -257,6 +263,7 @@ export { ConnectedMySonicNavigation } from './pages/my-sonic/navigation/connecte
257
263
  export { MySonicDesktopNavigation } from './pages/my-sonic/navigation/my-sonic-desktop-navigation.js';
258
264
  export { MySonicMobileNavigation } from './pages/my-sonic/navigation/my-sonic-mobile-navigation.js';
259
265
  export { mySonicNavigationItems } from './pages/my-sonic/navigation/my-sonic-navigation-items.js';
266
+ export { OrderHistory } from './pages/my-sonic/pages/order-history/order-history.js';
260
267
  export { AddressDataCard } from './pages/my-sonic/widgets/components/address-data-card.js';
261
268
  export { ConnectedBillToAddressWidget } from './pages/my-sonic/widgets/connected-bill-to-address-widget.js';
262
269
  export { ConnectedCustomerInformationWidget } from './pages/my-sonic/widgets/connected-customer-information-widget.js';
@@ -325,6 +332,7 @@ export { useFetchFulfillmentMethodsByCustomerId } from './shared/api/storefront/
325
332
  export { useFetchFulfillmentMethodsForCurrentCart } from './shared/api/storefront/hooks/customer/use-fetch-fulfillment-methods-for-current-cart.js';
326
333
  export { useFetchShipToAddresses } from './shared/api/storefront/hooks/customer/use-fetch-ship-to-addresses.js';
327
334
  export { usePatchBillToAddress } from './shared/api/storefront/hooks/customer/use-patch-bill-to-address.js';
335
+ export { useFetchOrders } from './shared/api/storefront/hooks/orders/use-fetch-orders.js';
328
336
  export { useCreateAdyenSession } from './shared/api/storefront/hooks/payment/use-create-adyen-session.js';
329
337
  export { useFetchAdyenConfig } from './shared/api/storefront/hooks/payment/use-fetch-adyen-config.js';
330
338
  export { useInvalidateAdyen } from './shared/api/storefront/hooks/payment/use-invalidate-adyen.js';
@@ -346,6 +354,7 @@ export { InvalidPasswordError, NonUniquePasswordError, createSession, fetchSessi
346
354
  export { addProductToCurrentCart, convertToMinorUnits, deleteCartLineById, deleteCurrentCart, fetchCart, fetchCurrentCart, fetchCurrentCartLines, fetchCurrentCartProductAtp, fetchCurrentCartPromotions, fetchCurrentCheckoutAtp, getAdyenPaymentDetails, patchCart, patchCartLineById, placeOrder, postAdyenPayment, saveCartForLater } from './shared/api/storefront/services/cart-service.js';
347
355
  export { fetchBillToAddresses, fetchCurrentBillToAddress, fetchCurrentShipToAddress, fetchFulfillmentMethods, fetchShipToAddresses, patchBillToAddress } from './shared/api/storefront/services/customer-service.js';
348
356
  export { validateVATNumber } from './shared/api/storefront/services/finance-service.js';
357
+ export { fetchOrders } from './shared/api/storefront/services/order-service.js';
349
358
  export { createAdyenSession, fetchAdyenConfig } from './shared/api/storefront/services/payment-service.js';
350
359
  export { markProductAsRecentlyViewed } from './shared/api/storefront/services/product-service.js';
351
360
  export { fetchTranslations } from './shared/api/storefront/services/translation-service.js';
@@ -374,7 +383,6 @@ export { useMutationObserver } from './shared/hooks/use-mutation-observer.js';
374
383
  export { useResizeObserver } from './shared/hooks/use-resize-observer.js';
375
384
  export { useScript } from './shared/hooks/use-script.js';
376
385
  export { useScrollLock } from './shared/hooks/use-scroll-lock.js';
377
- export { scrollTo, scrollToTop } from './shared/hooks/use-scroll-to.js';
378
386
  export { useSessionStorage } from './shared/hooks/use-session-storage.js';
379
387
  export { useWatchCssProperty } from './shared/hooks/use-watch-css-property.js';
380
388
  export { validatePassword } from './shared/model/account.js';
@@ -401,7 +409,7 @@ export { withRouting } from './shared/routing/with-routing.js';
401
409
  export { ensureArray } from './shared/utils/array.js';
402
410
  export { breakpoints, getCurrentBreakpoints } from './shared/utils/breakpoints.js';
403
411
  export { getCssPropertyValue } from './shared/utils/css.js';
404
- export { formatDateToLocaleString } from './shared/utils/date.js';
412
+ export { formatDate } from './shared/utils/date.js';
405
413
  export { trackPropertyChange } from './shared/utils/debug.js';
406
414
  export { environment, environments } from './shared/utils/environment.js';
407
415
  export { EventEmitter } from './shared/utils/event-emitter.js';
@@ -411,6 +419,7 @@ export { formatCurrency, getCurrencyByCountryCode, parseCurrency } from './share
411
419
  export { isPromise, wait } from './shared/utils/promise.js';
412
420
  export { random, randomInt } from './shared/utils/random.js';
413
421
  export { multiRef } from './shared/utils/refs.js';
422
+ export { scrollIntoViewRef, scrollToTop } from './shared/utils/scrolling.js';
414
423
  export { camelCase } from './shared/utils/string.js';
415
424
  export { TIME } from './shared/utils/time.js';
416
425
  export { has, hasNo } from './shared/utils/types.js';
@@ -419,8 +428,9 @@ export { Sidebar } from './sidebar/sidebar.js';
419
428
  export { SidebarDetectBreakpoint, SidebarProvider } from './sidebar/sidebar-provider.js';
420
429
  export { ToggleSidebarButton } from './sidebar/toggle-sidebar-button.js';
421
430
  export { useSidebar, useSidebarActions } from './sidebar/use-sidebar.js';
422
- export { DataTable } from './table/data-table.js';
431
+ export { DataTable, SortWrapper } from './table/data-table.js';
423
432
  export { Col } from './table/elements/col.js';
433
+ export { switchSortDirection } from './table/elements/switch-sort-direction.js';
424
434
  export { Table } from './table/elements/table.js';
425
435
  export { TableContext } from './table/elements/table-context.js';
426
436
  export { TableProvider } from './table/elements/table-provider.js';
@@ -434,7 +444,6 @@ export { useTable } from './table/elements/use-table.js';
434
444
  export { useTableRow } from './table/elements/use-table-row.js';
435
445
  export { useTD } from './table/elements/use-td.js';
436
446
  export { useTH } from './table/elements/use-th.js';
437
- export { useTR } from './table/elements/use-tr.js';
438
447
  export { HighlightText } from './text/highlight-text/highlight-text.js';
439
448
  export { Truncated } from './text/truncated/truncated.js';
440
449
  export { Toast } from './toast/toast.js';
@@ -0,0 +1,4 @@
1
+ export declare const FormattedDate: ({ date, options, }: {
2
+ date: Date | string;
3
+ options?: Intl.DateTimeFormatOptions;
4
+ }) => string | undefined;
@@ -0,0 +1,8 @@
1
+ "use client";
2
+ import { useFormattedDate } from './use-formatted-date.js';
3
+
4
+ const FormattedDate = ({ date, options, }) => {
5
+ return useFormattedDate()(date, options);
6
+ };
7
+
8
+ export { FormattedDate };
@@ -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.' | 'Account' | 'active' | 'Add order notes' | 'Add to list' | 'Address 1' | 'Address 2' | 'Address 3' | 'Address 4' | 'Address' | 'All payment methods are unavailable at this time. Please contact customer support.' | 'Amount: {0}' | 'An error occurred while changing the customer.' | 'An error occurred while fetching customers. Please try again later.' | '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' | 'ascending' | 'Attention' | 'Availability unknown, please contact customer support for lead time or alternatives.' | 'Billing address' | 'Billing and shipping address' | 'Billing and shipping information' | 'Billing' | 'Cancel' | 'Cart' | 'Change customer' | 'Change password' | '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' | 'CoC number' | 'Company name' | 'Conceal value' | 'Confirm password' | 'Continue shopping' | 'Continue to sign in' | 'Continue' | 'Copyright © Sonic Equipment B.V.' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Currency Change' | 'Current page' | 'Current Password is invalid' | 'Delivery date' | 'Delivery expected on {0}' | 'descending' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | 'Edit billing address' | 'Edit shipping address' | 'Edit Sonic account' | 'Edit' | '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' | 'Log out' | 'Main menu' | 'Make this the default customer' | 'More than {0} articles' | 'My Sonic' | 'Name' | 'Navigate to...' | 'Navigation' | 'New list name' | 'New Password is required and must be different than Current Password' | 'New password' | 'New user?' | 'No results found. Please refine your search.' | 'Number of favorites' | 'Number of products' | 'of' | 'Or continue as guest' | 'Order confirmation' | 'Order date' | 'Order number' | 'Order' | 'Orders' | 'Our products' | 'Overview' | 'Password changed. Please sign in again.' | '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 for a customer' | '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' | 'Select other customer' | 'Selected customer' | '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 account' | '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 more customers, please refine your search if needed.' | 'There are no products in your shopping cart.' | 'There is no information to display' | 'This email is already in use' | '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' | 'Username' | '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 are not authorized to access this information.' | 'You are not authorized to perform this action' | 'You are not authorized to view customers. Please log in or contact support.' | '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.' | 'Account' | 'active' | 'Add order notes' | 'Add to list' | 'Address 1' | 'Address 2' | 'Address 3' | 'Address 4' | 'Address' | 'All payment methods are unavailable at this time. Please contact customer support.' | 'Amount: {0}' | 'An error occurred while changing the customer.' | 'An error occurred while fetching customers. Please try again later.' | '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' | 'ASC' | 'Attention' | 'Availability unknown, please contact customer support for lead time or alternatives.' | 'Billing address' | 'Billing and shipping address' | 'Billing and shipping information' | 'Billing' | 'Cancel' | 'Cart' | 'Change customer' | 'Change password' | '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' | 'CoC number' | 'Company name' | 'Conceal value' | 'Confirm password' | 'Continue shopping' | 'Continue to sign in' | 'Continue' | 'Copyright © Sonic Equipment B.V.' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Currency Change' | 'Current page' | 'Current Password is invalid' | 'Date' | 'Delivery date' | 'Delivery expected on {0}' | 'DESC' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | 'Edit billing address' | 'Edit shipping address' | 'Edit Sonic account' | 'Edit' | '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' | 'Log out' | 'Main menu' | 'Make this the default customer' | 'More than {0} articles' | 'My Sonic' | 'Name' | 'Navigate to...' | 'Navigation' | 'New list name' | 'New Password is required and must be different than Current Password' | 'New password' | 'New user?' | 'No results found. Please refine your search.' | 'Number of favorites' | 'Number of products' | 'of' | 'Or continue as guest' | 'Order confirmation' | 'Order date' | 'Order number' | 'Order#' | 'Order' | 'Orders' | 'orderStatus.Any' | 'orderStatus.Cancelled' | 'orderStatus.Fulfilled' | 'orderStatus.Partially fulfilled' | 'orderStatus.Processing' | 'orderStatus.Saved' | 'orderStatus.Waiting for customer service' | 'Our products' | 'Overview' | 'Password changed. Please sign in again.' | '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' | 'PO#' | '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' | 'Reorder' | 'Requested delivery date' | 'Reveal value' | 'Review and payment' | 'Save order' | 'Save' | 'Saved cart for later.' | 'Search for a customer' | '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' | 'Select other customer' | 'Selected customer' | '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 account' | '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' | 'Status' | '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 more customers, please refine your search if needed.' | 'There are no products in your shopping cart.' | 'There is no information to display' | 'This email is already in use' | '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' | 'Username' | '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 are not authorized to access this information.' | 'You are not authorized to perform this action' | 'You are not authorized to view customers. Please log in or contact support.' | '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';
@@ -0,0 +1,6 @@
1
+ export declare function useFormattedDate(): {
2
+ (date: Date, options?: Intl.DateTimeFormatOptions): string;
3
+ (date: string, options?: Intl.DateTimeFormatOptions): string | undefined;
4
+ (date: null | undefined, options?: Intl.DateTimeFormatOptions): undefined;
5
+ (date: Date | string | null | undefined, options?: Intl.DateTimeFormatOptions): string | undefined;
6
+ };
@@ -0,0 +1,19 @@
1
+ import { useCallback } from 'react';
2
+ import { formatDate } from '../shared/utils/date.js';
3
+ import { useIntl } from './use-intl.js';
4
+
5
+ function useFormattedDate() {
6
+ const { cultureCode } = useIntl();
7
+ function format(date, options = {
8
+ day: 'numeric',
9
+ month: 'long',
10
+ weekday: 'long',
11
+ year: 'numeric',
12
+ }) {
13
+ return formatDate(date, cultureCode, options);
14
+ }
15
+ // eslint-disable-next-line react-hooks/exhaustive-deps
16
+ return useCallback(format, [cultureCode]);
17
+ }
18
+
19
+ export { useFormattedDate };
@@ -5,11 +5,13 @@ import { Link } from '../../buttons/link/link.js';
5
5
  import { GlyphsChevronsSlimRightIcon } from '../../icons/glyph/glyphs-chevrons-slim-right-icon.js';
6
6
  import { useFormattedMessage } from '../../intl/use-formatted-message.js';
7
7
  import { Image } from '../../media/image/image.js';
8
+ import { useMenuListItem } from './use-menu-list-item.js';
8
9
  import styles from './menu-list.module.css.js';
9
10
 
10
11
  function MenuListItem({ 'aria-controls': ariaControls, badge, children, className, 'data-test-selector': dataTestSelector, hasChildren, href, image, isSelected, onClick, openInNewTab, ...rest }) {
11
12
  const t = useFormattedMessage();
12
- return (jsxs("li", { "aria-owns": ariaControls, className: clsx(styles['menu-list-item'], isSelected && styles['selected'], hasChildren && styles['has-children'], className), "data-test-selector": dataTestSelector, ...rest, children: [image && (jsx("span", { className: styles['image'], role: "presentation", children: jsx(Image, { fit: "contain", image: image, title: "" }) })), badge && jsx("span", { className: styles['badge'], children: badge }), jsx(Link, { "aria-controls": ariaControls, "aria-expanded": ariaControls && isSelected, "aria-haspopup": hasChildren ? 'true' : undefined, className: styles['label'], href: href || undefined, onClick: onClick, role: hasChildren ? 'menuitem' : undefined, target: openInNewTab ? '_blank' : undefined, children: children }), hasChildren && (jsx(GlyphsChevronsSlimRightIcon, { "aria-description": `(${t('Submenu')})`, className: styles['icon'] }))] }));
13
+ useMenuListItem({ canCollapse: Boolean(badge) });
14
+ return (jsxs("li", { "aria-owns": ariaControls, className: clsx(styles['menu-list-item'], isSelected && styles['selected'], hasChildren && styles['has-children'], className), "data-test-selector": dataTestSelector, ...rest, children: [image && (jsx("span", { className: styles['image'], role: "presentation", children: jsx(Image, { fit: "contain", image: image, title: "" }) })), badge && jsx("span", { className: styles['badge'], children: badge }), jsx(Link, { "aria-controls": ariaControls, "aria-expanded": ariaControls && isSelected, "aria-haspopup": hasChildren ? 'true' : undefined, className: styles['label'], href: href || undefined, onClick: onClick, role: hasChildren ? 'menuitem' : undefined, target: openInNewTab ? '_blank' : undefined, children: jsx("span", { children: children }) }), hasChildren && (jsx(GlyphsChevronsSlimRightIcon, { "aria-description": `(${t('Submenu')})`, className: styles['icon'] }))] }));
13
15
  }
14
16
 
15
17
  export { MenuListItem };
@@ -0,0 +1,11 @@
1
+ import { ReactNode } from 'react';
2
+ export interface MenuListContextValue {
3
+ canCollapse: boolean;
4
+ registerCanCollapse: (canCollapse: boolean) => () => void;
5
+ }
6
+ export declare const MenuListContext: React.Context<MenuListContextValue | undefined>;
7
+ export declare function MenuListProvider({ children, }: {
8
+ children: ReactNode | ((args: {
9
+ canCollapse: boolean;
10
+ }) => ReactNode);
11
+ }): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,30 @@
1
+ "use client";
2
+ import { jsx } from 'react/jsx-runtime';
3
+ import { createContext, useState, useCallback, useMemo } from 'react';
4
+ import { createUUID } from '../../shared/utils/uuid.js';
5
+
6
+ const MenuListContext = createContext(undefined);
7
+ function MenuListProvider({ children, }) {
8
+ const [menuListItems, setMenuListItems] = useState({});
9
+ const registerCanCollapse = useCallback((canCollapse) => {
10
+ const id = createUUID();
11
+ setMenuListItems(prev => ({ ...prev, [id]: canCollapse }));
12
+ return () => {
13
+ setMenuListItems(prev => {
14
+ const newItems = { ...prev };
15
+ delete newItems[id];
16
+ return newItems;
17
+ });
18
+ };
19
+ }, []);
20
+ const canCollapse = useMemo(() => Object.values(menuListItems).every(Boolean), [menuListItems]);
21
+ const value = useMemo(() => {
22
+ return {
23
+ canCollapse,
24
+ registerCanCollapse,
25
+ };
26
+ }, [registerCanCollapse, canCollapse]);
27
+ return (jsx(MenuListContext.Provider, { value: value, children: children instanceof Function ? children({ canCollapse }) : children }));
28
+ }
29
+
30
+ export { MenuListContext, MenuListProvider };
@@ -12,8 +12,9 @@ export interface MenuListProps {
12
12
  };
13
13
  children: ReactNode;
14
14
  className?: string;
15
+ collapsible?: boolean;
15
16
  header?: MenuHeader;
16
17
  scrollable?: boolean;
17
18
  variant?: MenuListVariant;
18
19
  }
19
- export declare function MenuList({ back, children, className, header, scrollable, variant, }: MenuListProps): import("react/jsx-runtime").JSX.Element;
20
+ export declare function MenuList({ back, children, className, collapsible, header, scrollable, variant, }: MenuListProps): import("react/jsx-runtime").JSX.Element;
@@ -1,14 +1,15 @@
1
1
  "use client";
2
- import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { jsx, jsxs } from 'react/jsx-runtime';
3
3
  import clsx from 'clsx';
4
4
  import { MenuListBackButton } from './menu-list-back-button.js';
5
5
  import { MenuListHeader } from './menu-list-header.js';
6
+ import { MenuListProvider } from './menu-list-provider.js';
6
7
  import styles from './menu-list.module.css.js';
7
8
 
8
- function MenuList({ back, children, className, header, scrollable = true, variant = 'default', }) {
9
+ function MenuList({ back, children, className, collapsible, header, scrollable = true, variant = 'default', }) {
9
10
  const headerTitle = header?.header || header?.label;
10
11
  const headerHref = header?.href;
11
- return (jsxs("section", { className: clsx(styles['menu-list'], styles[variant], scrollable && styles['scrollable'], className), role: "menu", children: [back && (jsx(MenuListBackButton, { "data-test-selector": "menuListBackButton", onClick: back.onClick, children: back.title })), jsxs("div", { className: styles['scroll-area'], "data-test-selector": "menuListScrollArea", children: [header && headerTitle && (jsx(MenuListHeader, { "data-test-selector": "menuListHeader", href: headerHref, children: headerTitle })), jsx("ul", { className: styles['list'], children: children })] })] }));
12
+ return (jsx(MenuListProvider, { children: ({ canCollapse }) => (jsxs("section", { className: clsx(styles['menu-list'], styles[variant], scrollable && styles['scrollable'], canCollapse && collapsible && styles['collapsible'], className), role: "menu", children: [back && (jsx(MenuListBackButton, { "data-test-selector": "menuListBackButton", onClick: back.onClick, children: back.title })), jsxs("div", { className: styles['scroll-area'], "data-test-selector": "menuListScrollArea", children: [headerTitle && (jsx(MenuListHeader, { "data-test-selector": "menuListHeader", href: headerHref, children: headerTitle })), jsx("ul", { className: styles['list'], children: children })] })] })) }));
12
13
  }
13
14
 
14
15
  export { MenuList };
@@ -1,3 +1,3 @@
1
- var styles = {"menu-list":"menu-list-module-TloB9","primary":"menu-list-module-xUg6i","scrollable":"menu-list-module-AiDgG","scroll-area":"menu-list-module-x3D-V","list":"menu-list-module-m3rpo","menu-list-back-button":"menu-list-module-eKDL9","icon":"menu-list-module-syyw9","menu-list-header":"menu-list-module-S08LI","menu-list-item":"menu-list-module-4QhF4","label":"menu-list-module-xFYyo","image":"menu-list-module-ELekn","badge":"menu-list-module-4PbP-","selected":"menu-list-module-hiMca","has-children":"menu-list-module-61uJb"};
1
+ var styles = {"menu-list":"menu-list-module-TloB9","scrollable":"menu-list-module-AiDgG","scroll-area":"menu-list-module-x3D-V","list":"menu-list-module-m3rpo","primary":"menu-list-module-xUg6i","collapsible":"menu-list-module-vd14x","menu-list-item":"menu-list-module-4QhF4","label":"menu-list-module-xFYyo","badge":"menu-list-module-4PbP-","has-children":"menu-list-module-61uJb","icon":"menu-list-module-syyw9","menu-list-back-button":"menu-list-module-eKDL9","menu-list-header":"menu-list-module-S08LI","image":"menu-list-module-ELekn","selected":"menu-list-module-hiMca"};
2
2
 
3
3
  export { styles as default };
@@ -0,0 +1,5 @@
1
+ export declare function useMenuListItem({ canCollapse }: {
2
+ canCollapse: boolean;
3
+ }): {
4
+ canCollapse: boolean;
5
+ };
@@ -0,0 +1,12 @@
1
+ import { useEffect } from 'react';
2
+ import { useMenuList } from './use-menu-list.js';
3
+
4
+ function useMenuListItem({ canCollapse }) {
5
+ const { registerCanCollapse } = useMenuList();
6
+ useEffect(() => {
7
+ return registerCanCollapse(canCollapse);
8
+ }, [registerCanCollapse, canCollapse]);
9
+ return { canCollapse };
10
+ }
11
+
12
+ export { useMenuListItem };
@@ -0,0 +1 @@
1
+ export declare function useMenuList(): import("./menu-list-provider").MenuListContextValue;
@@ -0,0 +1,11 @@
1
+ import { useContext } from 'react';
2
+ import { MenuListContext } from './menu-list-provider.js';
3
+
4
+ function useMenuList() {
5
+ const context = useContext(MenuListContext);
6
+ if (!context)
7
+ throw new Error('useMenuList must be used within a MenuListProvider');
8
+ return context;
9
+ }
10
+
11
+ export { useMenuList };
@@ -0,0 +1,5 @@
1
+ export declare function DynamicLoadingOverlay({ children, className, isLoading, }: {
2
+ children?: React.ReactNode;
3
+ className?: string;
4
+ isLoading?: boolean;
5
+ }): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,26 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { useState, useRef } from 'react';
3
+ import clsx from 'clsx';
4
+ import { useIntersectionObserver } from '../shared/hooks/use-intersection-observer.js';
5
+ import { ProgressCircle } from './progress-circle.js';
6
+ import styles from './dynamic-loading-overlay.module.css.js';
7
+
8
+ const thresholdEntries = 1000;
9
+ const threshold = Array.from({ length: thresholdEntries }, (_, i) => i / thresholdEntries);
10
+ function DynamicLoadingOverlay({ children, className, isLoading, }) {
11
+ const [intersectedHeight, setIntersectedHeight] = useState(0);
12
+ const container = useRef(null);
13
+ useIntersectionObserver({
14
+ isDisabled: !isLoading,
15
+ observables: [{ ref: container }],
16
+ onCallback: entries => {
17
+ entries.forEach(entry => {
18
+ setIntersectedHeight(entry.intersectionRect.height);
19
+ });
20
+ },
21
+ threshold,
22
+ });
23
+ return (jsxs("div", { ref: container, className: clsx(styles['dynamic-loading-overlay'], isLoading && styles['is-loading'], className), style: { '--intersected-height': `${intersectedHeight}px` }, children: [jsx("div", { className: styles['content'], children: children }), jsx("div", { className: styles['loading-indicator'], children: jsx(ProgressCircle, { className: styles['spinner'], variant: "gray" }) })] }));
24
+ }
25
+
26
+ export { DynamicLoadingOverlay };