@sonic-equipment/ui 138.0.0 → 139.0.0

package/dist/collapsables/accordion/accordion-item.d.ts

@@ -7,10 +7,11 @@ export interface AccordionItemProps {
     borderType?: BorderType | BorderType[];
     children: ReactNode;
     className?: string;
+    'data-test-selector'?: string;
     id: string;
     initialIsOpen?: boolean;
     isDisabled?: boolean;
     size?: 'md' | 'lg';
     title: ReactNode;
 }
-export declare function AccordionItem({ _pseudo, allowCollapse, allowToggle, borderType, children, className, id, initialIsOpen, isDisabled, size, title, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionItem({ _pseudo, allowCollapse, allowToggle, borderType, children, className, 'data-test-selector': dataTestSelector, id, initialIsOpen, isDisabled, size, title, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/collapsables/accordion/accordion-item.js

@@ -8,7 +8,7 @@ import { useDisclosure } from '../../shared/hooks/use-disclosure.js';
 import { ensureArray } from '../../shared/utils/array.js';
 import styles from './accordion.module.css.js';
 
-function AccordionItem({ _pseudo = 'none', allowCollapse = true, allowToggle = true, borderType = 'bottom', children, className, id, initialIsOpen = false, isDisabled = false, size, title, }) {
+function AccordionItem({ _pseudo = 'none', allowCollapse = true, allowToggle = true, borderType = 'bottom', children, className, 'data-test-selector': dataTestSelector, id, initialIsOpen = false, isDisabled = false, size, title, }) {
     const { close, isOpen, open, toggle } = useDisclosure(initialIsOpen);
     useEffect(() => {
         if (initialIsOpen) {
@@ -22,7 +22,7 @@ function AccordionItem({ _pseudo = 'none', allowCollapse = true, allowToggle = t
     return (jsxs("div", { className: clsx(className, ...ensureArray(borderType).map(type => styles[`border-type-${type}`]), styles['accordion-item'], isDisabled && styles.disabled, {
             [styles['is-open']]: isOpen,
             [styles['allow-toggle']]: allowToggle,
-        }), children: [jsx("h3", { children: allowCollapse ? (jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles.button, styles[_pseudo]), disabled: isDisabled, id: id, onClick: () => {
+        }), "data-test-selector": dataTestSelector, children: [jsx("h3", { children: allowCollapse ? (jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles.button, styles[_pseudo]), disabled: isDisabled, id: id, onClick: () => {
                         if (allowToggle)
                             toggle();
                     }, type: "button", children: [title, jsx("span", { className: styles.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] })) : (jsx("span", { className: styles.button, children: title })) }), jsx("div", { "aria-labelledby": id, className: styles.panel, id: panelId, role: "region", children: jsx("div", { className: styles.content, children: children }) })] }));

package/dist/index.js

@@ -261,7 +261,7 @@ export { WishListNameAlreadyExistsError, addWishListItemToWishList, createWishLi
 export { useFeatureFlags } from './shared/feature-flags/use-feature-flags.js';
 export { BadRequestError, ForbiddenRequestError, InternalServerErrorRequestError, NotFoundRequestError, RequestError, TimeoutRequestError, UnauthorizedRequestError, UnprocessableContentRequestError, isFormData, isJsonBody, isRequestError, request } from './shared/fetch/request.js';
 export { dataLayer } from './shared/ga/data-layer.js';
-export { GoogleAnalyticsProvider, useGoogleAnalyticsProvider } from './shared/ga/google-analytics-provider.js';
+export { GoogleAnalyticsProvider, InitializeGoogleAnalyticsProvider, useGoogleAnalyticsProvider } from './shared/ga/google-analytics-provider.js';
 export { isGAEvent } from './shared/ga/types.js';
 export { useDataLayer } from './shared/ga/use-data-layer.js';
 export { useBreakpoint } from './shared/hooks/use-breakpoint.js';

package/dist/media/image/image.js

@@ -34,20 +34,30 @@ function createSrcSet(image) {
         .filter(Boolean)
         .join(', ') || undefined);
 }
+function getPrimarySrc(image) {
+    if (image === undefined)
+        return undefined;
+    if (isResponsiveImage(image)) {
+        return (getPrimarySrc(image.sm) ||
+            getPrimarySrc(image.md) ||
+            getPrimarySrc(image.lg));
+    }
+    return image[3] || image[2] || image[1];
+}
 function ImageComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
-    if (!image)
+    if (!image || (!image[1] && !image[2] && !image[3]))
         return (jsx("img", { alt: "Missing", className: clsx(styles.image, className, styles[fit], styles['has-error']), src: fallbackSrc, ...rest }));
     const srcSet = hasError ? undefined : createSrcSet(image);
     return (jsx("img", { alt: image.altText, className: clsx(styles.image, className, styles[fit], {
             [styles['has-error']]: hasError,
-        }), src: fallbackSrc, srcSet: srcSet, ...rest }));
+        }), src: hasError ? fallbackSrc : getPrimarySrc(image), srcSet: srcSet, ...rest }));
 }
 function PictureComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
-    if (!image)
+    if (!image || (!image.sm && !image.md && !image.lg))
         return (jsx("picture", { className: clsx(styles.picture, className), children: jsx("img", { alt: "Missing", className: clsx(styles.image, styles[fit], styles['has-error']), src: fallbackSrc, ...rest }) }));
     return (jsxs("picture", { className: clsx(styles.picture, className), children: [image.sm && (jsx("source", { media: "(max-width: 768px)", srcSet: createSrcSet(image.sm) })), image.md && (jsx("source", { media: "(max-width: 1439px)", srcSet: createSrcSet(image.md) })), image.lg && (jsx("source", { media: "(min-width: 1440px)", srcSet: createSrcSet(image.lg) })), jsx("img", { alt: image.altText, className: clsx(styles.image, styles[fit], {
                     [styles['has-error']]: hasError,
-                }), src: fallbackSrc, ...rest })] }));
+                }), src: hasError ? fallbackSrc : getPrimarySrc(image), ...rest })] }));
 }
 
 export { Image };

package/dist/modals/dialog/dialog.js

@@ -11,10 +11,10 @@ import { Modal } from '../modal/modal.js';
 import styles from './dialog.module.css.js';
 
 function Footer({ cancelLabel, close, submitLabel }) {
-    return (jsxs(Fragment, { children: [jsx(Button, { withArrow: true, color: "primary", size: "md", type: "submit", children: jsx(FormattedMessage, { id: submitLabel }) }), jsx(Button, { color: "secondary", onClick: close, size: "md", variant: "outline", children: jsx(FormattedMessage, { id: cancelLabel }) })] }));
+    return (jsxs(Fragment, { children: [jsx(Button, { withArrow: true, color: "primary", "data-test-selector": "dialogSubmit", size: "md", type: "submit", children: jsx(FormattedMessage, { id: submitLabel }) }), jsx(Button, { color: "secondary", "data-test-selector": "dialogCancel", onClick: close, size: "md", variant: "outline", children: jsx(FormattedMessage, { id: cancelLabel }) })] }));
 }
 function Dialog({ allowClose = true, cancelLabel = 'Close', children, className, footer = Footer, hasCloseButton = true, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, submitLabel = 'Submit', title, validationErrors, }) {
-    return (jsx(Modal, { className: clsx(styles['modal-overlay'], typeof className === 'string' ? className : className?.modal), hasCloseButton: false, isDismissable: isDismissable, isFullScreen: isFullScreen, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: shouldCloseOnInteractOutside, children: jsx(Dialog$1, { "aria-label": title, className: clsx(styles.dialog, typeof className === 'string' ? undefined : className?.dialog), children: ({ close }) => (jsxs(Form, { className: clsx(styles.form, typeof className === 'string' ? undefined : className?.form), onSubmit: e => {
+    return (jsx(Modal, { className: clsx(styles['modal-overlay'], typeof className === 'string' ? className : className?.modal), hasCloseButton: false, isDismissable: isDismissable, isFullScreen: isFullScreen, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: shouldCloseOnInteractOutside, children: jsx(Dialog$1, { "aria-label": title, className: clsx(styles.dialog, typeof className === 'string' ? undefined : className?.dialog), "data-test-selector": "dialog", children: ({ close }) => (jsxs(Form, { className: clsx(styles.form, typeof className === 'string' ? undefined : className?.form), onSubmit: e => {
                     e.preventDefault();
                     e.stopPropagation();
                     onSubmit?.(e);

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

@@ -273,7 +273,7 @@ function Payment({ atp, cart: _cart, form, isProcessing, isValidatingVAT, onErro
                 /* eslint-disable ssr-friendly/no-dom-globals-in-react-fc */
                 typeof window === 'undefined'
                     ? ''
-                    : `${window.location.pathname}${window.location.search}` })), Boolean(paymentError) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An error occurred while processing your payment. Please try again." }) })), jsx(InfoDisplay, { id: "shipping-and-invoice-information", label: t('Billing and shipping address'), value: jsx(Accordion, { variant: "select", children: jsx(AccordionItem, { id: "invoice-and-shipping", isDisabled: isDisabled, title: "Factuur- en verzendinformatie", children: jsx(BillingAndInvoiceInformation, { billToAddress: {
+                    : `${window.location.pathname}${window.location.search}` })), Boolean(paymentError) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An error occurred while processing your payment. Please try again." }) })), jsx(InfoDisplay, { id: "shipping-and-invoice-information", label: t('Billing and shipping address'), value: jsx(Accordion, { variant: "select", children: jsx(AccordionItem, { "data-test-selector": "billingAndShippingInformation", id: "invoice-and-shipping", isDisabled: isDisabled, title: t('Billing and shipping information'), children: jsx(BillingAndInvoiceInformation, { billToAddress: {
                                 address1: cart.billTo?.address1,
                                 address2: cart.billTo?.address2,
                                 address3: cart.billTo?.address3,

package/dist/shared/ga/google-analytics-provider.d.ts

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
 export declare function useGoogleAnalyticsProvider(): {
     customerNumber: string | undefined;
-    isFetching: boolean;
+    isLoading: boolean;
 };
+export declare function InitializeGoogleAnalyticsProvider(): null;
 export declare function GoogleAnalyticsProvider({ children }?: {
     children?: ReactNode;
 }): JSX.Element | null;

package/dist/shared/ga/google-analytics-provider.js

@@ -1,16 +1,17 @@
 "use client";
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useFetchSession } from '../api/storefront/hooks/authentication/use-fetch-session.js';
 
 function useGoogleAnalyticsProvider() {
-    const { data: session, isFetching } = useFetchSession();
-    return { customerNumber: session?.billTo?.customerNumber, isFetching };
+    const { data: session, isLoading } = useFetchSession();
+    return { customerNumber: session?.billTo?.customerNumber, isLoading };
+}
+function InitializeGoogleAnalyticsProvider() {
+    useGoogleAnalyticsProvider();
+    return null;
 }
 function GoogleAnalyticsProvider({ children = null } = { children: null }) {
-    const { isFetching } = useGoogleAnalyticsProvider();
-    if (isFetching)
-        return null;
-    return jsx(Fragment, { children: children });
+    return (jsxs(Fragment, { children: [jsx(InitializeGoogleAnalyticsProvider, {}), children] }));
 }
 
-export { GoogleAnalyticsProvider, useGoogleAnalyticsProvider };
+export { GoogleAnalyticsProvider, InitializeGoogleAnalyticsProvider, useGoogleAnalyticsProvider };

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

@@ -23,4 +23,4 @@ export interface ResponsiveImageType {
     md?: DPRSrcSet;
     sm?: DPRSrcSet;
 }
-export declare function isResponsiveImage(image: ImageType | ResponsiveImageType | undefined): image is ResponsiveImageType;
+export declare function isResponsiveImage(image: unknown): image is ResponsiveImageType;

package/dist/shared/model/image.js

@@ -1,5 +1,7 @@
 function isResponsiveImage(image) {
-    return Boolean(image?.lg);
+    return Boolean(image?.lg ||
+        image?.md ||
+        image?.sm);
 }
 
 export { isResponsiveImage };

package/dist/styles.css

@@ -5768,11 +5768,11 @@ button.swiper-pagination-bullet {
   display: grid;
   overflow: clip;
   font-family: var(--font-family-sonic);
+  grid-template: minmax(0, min-content) 1fr minmax(0, min-content) / 100%;
   grid-template-areas:
     'page-header'
     'page-main'
     'page-footer';
-  grid-template-rows: minmax(0, min-content) 1fr minmax(0, min-content);
 }
 
   /* main area, between page header and footer */
@@ -5782,11 +5782,11 @@ button.swiper-pagination-bullet {
     box-sizing: border-box;
     margin: 0 auto;
     grid-area: page-main;
+    grid-template: minmax(0, max-content) minmax(0, max-content) 1fr / 100%;
     grid-template-areas:
       'breadcrumbs'
       'title'
       'content';
-    grid-template-rows: minmax(0, max-content) minmax(0, max-content) 1fr;
     inline-size: 100%;
     max-inline-size: var(--page-container-max-width);
     padding-inline: var(--page-container-padding-inline);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "138.0.0",
+  "version": "139.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {