@sonic-equipment/ui 0.0.76 → 0.0.77

package/dist/index.d.ts

@@ -4213,7 +4213,7 @@ interface ImageSource {
   fallbackSrc?: string
   fit?: 'contain' | 'cover'
   height?: number
-  image: Image$1 | ResponsiveImage
+  image: Image$1 | ResponsiveImage | undefined
   loading?: 'lazy' | 'eager'
   onError?: () => void
   title: string
@@ -4542,7 +4542,17 @@ interface ProgressCircleProps {
 }
 declare function ProgressCircle({ className }: ProgressCircleProps): react_jsx_runtime.JSX.Element;
 
-type ImageProps = ImageSource;
+interface ImageProps {
+    className?: string;
+    fallbackSrc?: string;
+    fit?: 'contain' | 'cover';
+    height?: number;
+    image: Image$1 | ResponsiveImage | undefined;
+    loading?: 'lazy' | 'eager';
+    onError?: () => void;
+    title: string;
+    width?: number;
+}
 declare function Image({ className, fallbackSrc, fit, height, image, loading, title, width, }: ImageProps): react_jsx_runtime.JSX.Element;
 
 declare function PageContainer({ children, className, }: {

package/dist/index.js

@@ -1597,7 +1597,7 @@ function ProductSku({ sku }) {
 }
 
 function isResponsiveImage(image) {
-    return Boolean(image.lg);
+    return Boolean(image?.lg);
 }
 
 var styles$K = {"image":"image-module-lg7Kj","contain":"image-module-KFEgG","cover":"image-module-tVKFe","has-error":"image-module-LM93B","picture":"image-module-pNYjR"};
@@ -1612,18 +1612,19 @@ function Image({ className, fallbackSrc = 'https://res.cloudinary.com/dkz9eknwh/
         fallbackSrc,
         fit,
         height,
-        image,
         loading,
         onError: handleError,
         title,
         width,
     };
     if (isResponsiveImage(image)) {
-        return jsx(PictureComponent, { ...props, hasError: hasError });
+        return jsx(PictureComponent, { ...props, hasError: hasError, image: image });
     }
-    return jsx(ImageComponent, { ...props, hasError: hasError });
+    return jsx(ImageComponent, { ...props, hasError: hasError, image: image });
 }
 function ImageComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
+    if (!image)
+        return (jsx("img", { className: clsx(styles$K.image, className, styles$K[fit], styles$K['has-error']), src: fallbackSrc, ...rest }));
     const srcSet = !hasError
         ? `${image[1]} 1x, ${image[2]} 2x, ${image[3]} 3x`
         : undefined;
@@ -1632,8 +1633,8 @@ function ImageComponent({ className, fallbackSrc, fit = 'cover', hasError, image
         }), src: !hasError ? image[3] : fallbackSrc, srcSet: srcSet, ...rest }));
 }
 function PictureComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
-    if (!isResponsiveImage(image))
-        return null;
+    if (!image)
+        return (jsx("picture", { className: clsx(styles$K.picture, className), children: jsx("img", { className: clsx(styles$K[fit], styles$K['has-error']), src: fallbackSrc, ...rest }) }));
     return (jsxs("picture", { className: clsx(styles$K.picture, className), children: [jsx("source", { media: "(max-width: 768px)", srcSet: `${image.sm[1]} 1x, ${image.sm[2]} 2x, ${image.sm[3]} 3x` }), jsx("source", { media: "(max-width: 1439px)", srcSet: `${image.md[1]} 1x, ${image.md[2]} 2x, ${image.md[3]} 3x` }), jsx("source", { media: "(min-width: 1440px)", srcSet: `${image.lg[1]} 1x, ${image.lg[2]} 2x, ${image.lg[3]} 3x` }), jsx("img", { className: clsx(styles$K[fit], {
                     [styles$K['has-error']]: hasError,
                 }), src: !hasError ? image.lg[3] : fallbackSrc, ...rest })] }));
@@ -7604,12 +7605,12 @@ function ProductDetailsPage({ pageUrl }) {
                 Boolean(included.length) && (jsxs(Fragment, { children: [jsx(Heading, { size: "s", tag: "h2", children: jsx(FormattedMessage, { id: "Includes" }) }), jsx(ProductCarousel, { allowExpandToGrid: true, hasOverflow: true, productCards: included.map(product => (jsx(ConnectedProductCard, { href: product.href, image: {
                                 fit: 'contain',
                                 image: product.image,
-                                title: product.image.altText,
+                                title: product.image?.altText || product.title,
                             }, price: product.price, productId: product.productId, sku: product.sku, tags: product.tags, title: product.title }, product.storefrontId))) })] })), productInformation: jsx(ProductDetailsPanel, { product: product }), recentlyViewed: recentlyViewed !== undefined &&
                 Boolean(recentlyViewed.length) && (jsxs(Fragment, { children: [jsx(Heading, { size: "s", tag: "h2", children: jsx(FormattedMessage, { id: "Recently viewed" }) }), jsx(ProductCarousel, { hasOverflow: true, productCards: recentlyViewed.map(product => (jsx(ConnectedProductCard, { href: product.href, image: {
                                 fit: 'contain',
                                 image: product.image,
-                                title: product.image.altText,
+                                title: product.image?.altText || product.title,
                             }, price: product.price, productId: product.productId, sku: product.sku, tags: product.tags, title: product.title }, product.storefrontId))) })] })), usp: jsx("div", { style: {
                     backgroundColor: '#bcbcbc',
                     display: 'grid',

package/dist/src/media/image/image.d.ts

@@ -1,4 +1,14 @@
-import { type ImageSource } from 'shared/model/image';
-type ImageProps = ImageSource;
+import { type Image as ImageType, ResponsiveImage } from 'shared/model/image';
+interface ImageProps {
+    className?: string;
+    fallbackSrc?: string;
+    fit?: 'contain' | 'cover';
+    height?: number;
+    image: ImageType | ResponsiveImage | undefined;
+    loading?: 'lazy' | 'eager';
+    onError?: () => void;
+    title: string;
+    width?: number;
+}
 export declare function Image({ className, fallbackSrc, fit, height, image, loading, title, width, }: ImageProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/shared/api/bff/model/bff.model.d.ts

@@ -58,7 +58,7 @@ interface ProductPrice {
 }
 interface ProductSummary {
     href: string;
-    image: Image;
+    image: Image | undefined;
     price: ProductPrice;
     productId: string;
     sku: string;

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

@@ -11,7 +11,7 @@ export interface ImageSource {
     fallbackSrc?: string;
     fit?: 'contain' | 'cover';
     height?: number;
-    image: Image | ResponsiveImage;
+    image: Image | ResponsiveImage | undefined;
     loading?: 'lazy' | 'eager';
     onError?: () => void;
     title: string;
@@ -23,5 +23,5 @@ export interface ResponsiveImage {
     md: DPRSrcSet;
     sm: DPRSrcSet;
 }
-export declare function isResponsiveImage(image: Image | ResponsiveImage): image is ResponsiveImage;
+export declare function isResponsiveImage(image: Image | ResponsiveImage | undefined): image is ResponsiveImage;
 export {};

package/package.json

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