@jetshop/ui 6.3.9-alpha.0 → 6.3.9-alpha.2

package/Gallery/constructGallery.js

@@ -0,0 +1,40 @@
+import { getFullUrl } from '../Image/utils/getFullUrl';
+import { getImageWidths } from '../Image/utils/getImageWidths';
+import { getLargestSize } from '../Image/utils/getLargestSize';
+import { getSizesMap } from '../Image/utils/getSizesMap';
+import { getSmallestSize } from '../Image/utils/getSmallestSize';
+import { getSrcSetFromWidths } from '../Image/utils/getSrcSetFromWidths';
+export function constructGallery(images, sizes, aspect, baseUrl, breakpoints) {
+    const calculatedSizes = getSizesMap(breakpoints, sizes);
+    // Get required set of image widths
+    const widths = getImageWidths(breakpoints, sizes);
+    return images.map((img, index) => {
+        const url = img.url || img.sizes;
+        let imageSrc;
+        let thumbSrc;
+        if (Array.isArray(url)) {
+            // maintain support for deprecated image sizes object
+            imageSrc = getFullUrl(getLargestSize(url), baseUrl);
+            thumbSrc = getFullUrl(getSmallestSize(url), baseUrl);
+        }
+        else {
+            imageSrc = getFullUrl(url, baseUrl);
+            thumbSrc = imageSrc;
+        }
+        // Generate image urls for the required image sizes
+        const srcSet = getSrcSetFromWidths(imageSrc, widths, aspect, { crop: false, webp: false }, img.modifiedDate);
+        return {
+            index,
+            original: imageSrc,
+            originalAlt: img.alt,
+            originalTitle: img.title,
+            thumbnail: thumbSrc,
+            thumbnailAlt: img.alt,
+            thumbnailTitle: img.title,
+            sizes: calculatedSizes,
+            srcSet,
+            modifiedDate: img.modifiedDate
+        };
+    });
+}
+//# sourceMappingURL=constructGallery.js.map

package/Gallery/constructGallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constructGallery.js","sourceRoot":"","sources":["constructGallery.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAEzE,MAAM,UAAU,gBAAgB,CAC9B,MAAsB,EACtB,KAAe,EACf,MAAc,EACd,OAAe,EACf,WAAwC;IAExC,MAAM,eAAe,GAAG,WAAW,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IACxD,mCAAmC;IACnC,MAAM,MAAM,GAAG,cAAc,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IAClD,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;QAC/B,MAAM,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC;QAEjC,IAAI,QAAgB,CAAC;QACrB,IAAI,QAAgB,CAAC;QAErB,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACtB,qDAAqD;YACrD,QAAQ,GAAG,UAAU,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,CAAC;YACpD,QAAQ,GAAG,UAAU,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,CAAC;SACtD;aAAM;YACL,QAAQ,GAAG,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;YACpC,QAAQ,GAAG,QAAQ,CAAC;SACrB;QAED,mDAAmD;QACnD,MAAM,MAAM,GAAG,mBAAmB,CAChC,QAAQ,EACR,MAAM,EACN,MAAM,EACN,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAC5B,GAAG,CAAC,YAAY,CACjB,CAAC;QACF,OAAO;YACL,KAAK;YACL,QAAQ,EAAE,QAAQ;YAClB,WAAW,EAAE,GAAG,CAAC,GAAG;YACpB,aAAa,EAAE,GAAG,CAAC,KAAK;YACxB,SAAS,EAAE,QAAQ;YACnB,YAAY,EAAE,GAAG,CAAC,GAAG;YACrB,cAAc,EAAE,GAAG,CAAC,KAAK;YACzB,KAAK,EAAE,eAAe;YACtB,MAAM;YACN,YAAY,EAAE,GAAG,CAAC,YAAY;SAC/B,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC"}

package/Image/BaseImage.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { ProductImageSize } from '@jetshop/core/types';
+export type ImageSrcType = string | ProductImageSize[];
+export type BreakpointValues = string[];
+export type ImageBreakpointSize = number | string;
+export type ImageBreakpointSizes = ImageBreakpointSize | ImageBreakpointSize[];
+export type AspectRatio = string | number;
+export declare const transparentDataImg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
+export interface ImageParameters {
+    src: string | boolean;
+    sizes: string;
+    hasFalsySrc: boolean;
+    srcset: string;
+    webpSrcset: string;
+    lqip: string;
+    /**
+     * The aspect ratio of the image
+     * If unknown, use null to preserve original aspect ratio
+     */
+    aspect?: string;
+    critical?: boolean;
+}
+export interface ImageProps extends ImageParameters {
+    /** Whether or not to use `background-size: cover` */
+    cover?: boolean;
+    error?: (args: any) => React.ReactElement<any>;
+    alt?: string;
+    title?: string;
+    /**
+     * Useful for banner images. Sets the following CSS automatically:
+     * object-fit: cover
+     * padding-top: 0;
+     */
+    fillAvailableSpace?: boolean;
+    className?: string;
+    badges?: React.ReactElement<any>;
+}
+declare const Image: React.FC<ImageProps>;
+export default Image;

package/Image/BaseImage.js

@@ -0,0 +1,192 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { useInView } from 'react-intersection-observer';
+import { paddingForAspectRatio } from './utils/paddingForAspectRatio';
+export const transparentDataImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
+const defaultImageState = {
+    imgLoaded: false,
+    error: false
+};
+const loadedImageState = {
+    imgLoaded: true,
+    error: false
+};
+let hydrated = false;
+const imageCache = Object.create({});
+function isInCache(src) {
+    return src in imageCache;
+}
+function cacheImage(src) {
+    imageCache[src] = true;
+}
+function imageStateReducer(_, action) {
+    switch (action.type) {
+        case 'reset':
+            return defaultImageState;
+        case 'loaded':
+            cacheImage(action.cacheKey);
+            return loadedImageState;
+        case 'error':
+            return { imgLoaded: false, error: true };
+        default:
+            console.error(`Action ${action.type} is invalid for image reducer`);
+            return;
+    }
+}
+function useObjectFitPolyfill(imageRefs) {
+    const [polyfilled, setPolyfilled] = React.useState(false);
+    React.useEffect(() => {
+        const testImg = document.createElement(`img`);
+        if (typeof testImg.style.objectFit === `undefined` ||
+            typeof testImg.style.objectPosition === `undefined`) {
+            import(`object-fit-images`).then(({ default: ObjectFitImages }) => {
+                imageRefs.forEach((imageRef) => {
+                    imageRef.current && ObjectFitImages(imageRef.current);
+                });
+                setPolyfilled(true);
+            });
+        }
+    }, [imageRefs]);
+    return polyfilled;
+}
+function getTypeByExtension(src) {
+    // Identifying type by extension, based on common image file types
+    // https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
+    const extensionRegex = /\.(jpg|jpeg|jfif|pjpeg|pjp|png|gif|bmp|webp|svg|apng|ico|cur)(?:\?.*)?$/i;
+    const formatMatch = extensionRegex.exec(src);
+    if (!formatMatch)
+        return null;
+    let type = null;
+    switch (formatMatch[1]) {
+        case 'jpg':
+        case 'jpeg':
+        case 'jfif':
+        case 'pjpeg':
+        case 'pjp':
+            type = 'image/jpeg';
+            break;
+        case 'png':
+            type = 'image/png';
+            break;
+        case 'gif':
+            type = 'image/gif';
+            break;
+        case 'bmp':
+            type = 'image/bmp';
+            break;
+        case 'webp':
+            type = 'image/webp';
+            break;
+        case 'svg':
+            type = 'image/svg+xml';
+            break;
+        case 'apng':
+            type = 'image/apng';
+            break;
+        case 'ico':
+        case 'cur':
+            type = 'image/x-icon';
+            break;
+        default:
+            break;
+    }
+    return type;
+}
+const Img = React.forwardRef((props, ref) => {
+    const { sizes, srcSet, src, style, alt, onLoad, onError, objectFit, critical } = props, otherProps = __rest(props, ["sizes", "srcSet", "src", "style", "alt", "onLoad", "onError", "objectFit", "critical"]);
+    const imgStyle = Object.assign({ position: 'absolute', top: 0, left: 0, width: `100%`, height: `100%`, paddingTop: 0, objectPosition: `center`, objectFit }, style);
+    return (React.createElement("img", Object.assign({ alt: alt, sizes: sizes, srcSet: srcSet, src: src, onLoad: onLoad, onError: onError, loading: critical ? 'eager' : 'lazy' }, otherProps, { ref: ref, style: imgStyle })));
+});
+const Placeholder = React.forwardRef((props, ref) => {
+    return (React.createElement("picture", { "data-flight-image-placeholder": "" },
+        React.createElement(Img, Object.assign({ loading: "lazy" }, props, { ref: ref }))));
+});
+const Image = function Image(_a) {
+    var { src, hasFalsySrc, lqip, sizes, srcset, webpSrcset, critical, aspect, cover = false, alt = '', fillAvailableSpace = false, children, error: ErrorComp, className, badges } = _a, rest = __rest(_a, ["src", "hasFalsySrc", "lqip", "sizes", "srcset", "webpSrcset", "critical", "aspect", "cover", "alt", "fillAvailableSpace", "children", "error", "className", "badges"]);
+    // Set up the IntersectionObserver
+    const [ref, inView] = useInView({ triggerOnce: true });
+    // Check if the browser supports loading="lazy". In that case, we don't need
+    // the IntersectionObserver
+    const nativeLazyLoading = typeof HTMLImageElement !== 'undefined' &&
+        'loading' in HTMLImageElement.prototype;
+    const imageRef = React.createRef();
+    const placeholderRef = React.createRef();
+    useObjectFitPolyfill([imageRef, placeholderRef]);
+    const [{ imgLoaded, error }, dispatch] = React.useReducer(imageStateReducer, critical ? loadedImageState : defaultImageState);
+    const cacheKey = srcset;
+    const handleImgLoad = React.useCallback(function handleImgLoad() {
+        dispatch({ type: 'loaded', cacheKey });
+    }, [cacheKey]);
+    function handleImgError() {
+        dispatch({ type: 'error' });
+    }
+    // Treat critical images as always cached
+    const isCached = critical || isInCache(cacheKey);
+    React.useEffect(() => {
+        hydrated = true;
+    }, []);
+    React.useEffect(() => {
+        dispatch({ type: 'reset' });
+    }, [src]);
+    React.useEffect(() => {
+        // Handle case where image onLoad fires during SSR
+        if (imageRef.current && imageRef.current.complete && !isCached) {
+            handleImgLoad();
+        }
+    }, [handleImgLoad, imageRef, isCached]);
+    // Render nothing if src is boolean
+    if (typeof src === 'boolean' && !src) {
+        return null;
+    }
+    const loaded = imgLoaded || hasFalsySrc || isCached;
+    const objectFit = cover || fillAvailableSpace ? 'cover' : 'contain';
+    const objectFitPolyfillStyles = { fontFamily: `"object-fit: ${objectFit}"` };
+    const type = getTypeByExtension(src);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", Object.assign({ key: src, ref: 
+            // If we have native lazyloading, by not applying the `ref` from
+            // useInView we don't use IntersectionObserver at all
+            nativeLazyLoading ? undefined : ref, "data-flight-image-container": "", "data-flight-image-loaded": loaded, className: className }, rest, { style: {
+                position: `relative`,
+                overflow: `hidden`,
+                width: `100%`,
+                height: fillAvailableSpace ? '100%' : 'auto',
+                paddingBottom: fillAvailableSpace
+                    ? 0
+                    : !aspect
+                        ? '100%'
+                        : paddingForAspectRatio(aspect)
+            } }),
+            error ? (React.createElement(ErrorComp, null)) : (React.createElement(React.Fragment, null,
+                React.createElement(Placeholder, { src: critical ? transparentDataImg : lqip || transparentDataImg, ref: placeholderRef, alt: "", "aria-hidden": "true", style: Object.assign({ objectFit, opacity: loaded ? 0 : 0.6, transitionDelay: `500ms` }, objectFitPolyfillStyles) }),
+                (inView || nativeLazyLoading || !hydrated || isCached) && (React.createElement("picture", { "data-flight-image": "" },
+                    React.createElement("source", { type: "image/webp", srcSet: webpSrcset, sizes: sizes }),
+                    React.createElement("source", { type: type, srcSet: srcset, sizes: sizes }),
+                    React.createElement(Img, { srcSet: srcset, src: src || transparentDataImg, sizes: sizes, onLoad: handleImgLoad, onError: handleImgError, alt: alt, ref: imageRef, style: Object.assign({ objectFit, opacity: loaded ? 1 : 0, transition: `opacity 500ms` }, objectFitPolyfillStyles), critical: critical, fetchpriority: critical ? 'high' : 'auto' }))),
+                React.createElement("noscript", null,
+                    React.createElement("picture", null,
+                        React.createElement(Img, { srcSet: srcset, src: src, sizes: sizes, alt: alt, style: {
+                                objectFit
+                            }, critical: critical, fetchpriority: critical ? 'high' : 'auto' }))))),
+            children && (React.createElement("div", { "data-flight-image-children": "", style: {
+                    position: 'relative',
+                    zIndex: 2,
+                    width: '100%',
+                    height: '100%'
+                } }, children)),
+            badges && (React.createElement("div", { "data-flight-image-badges": "", style: {
+                    zIndex: 2
+                } }, badges)))));
+};
+export default Image;
+//# sourceMappingURL=BaseImage.js.map

package/Image/BaseImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseImage.js","sourceRoot":"","sources":["BaseImage.tsx"],"names":[],"mappings":"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"}

package/Image/Fallback.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/** Display this if JS is disabled. */
+export declare const Fallback: ({ children }: {
+    children: React.ReactElement<{}>;
+}) => React.JSX.Element;

package/Image/Fallback.js

@@ -0,0 +1,4 @@
+import React from 'react';
+/** Display this if JS is disabled. */
+export const Fallback = ({ children }) => React.createElement("noscript", null, children);
+//# sourceMappingURL=Fallback.js.map

package/Image/Fallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fallback.js","sourceRoot":"","sources":["Fallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,sCAAsC;AAEtC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,QAAQ,EAGT,EAAE,EAAE,CAAC,sCAAW,QAAQ,CAAY,CAAC"}

package/Image/FlightImage.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { ProductImageSize } from '@jetshop/core/types';
+export type ImageSrcType = string | ProductImageSize[];
+export type ImageBreakpointSize = number | string;
+export type ImageBreakpointSizes = ImageBreakpointSize | ImageBreakpointSize[];
+export type AspectRatio = string | number;
+export type Gravity = 'north' | 'south' | 'west' | 'east' | 'centre' | 'smart';
+export declare const transparentDataImg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
+interface ImageParameters {
+    /** The image src
+     * Also accepts an array of objects with `url` keys (deprecated image field)
+     */
+    src: ImageSrcType;
+    /**
+     * Whether to crop the image instead of resizing it when aspect ratio is provided
+     * @default false
+     */
+    crop?: boolean;
+    gravity?: Gravity;
+    quality?: number;
+    /** An array of image sizes, will be mapped against breakpoints.
+     * @see https://docs.dev.jetshop.se/ui/image#the-sizes-prop
+     */
+    sizes: ImageBreakpointSizes;
+    /**
+     * The aspect ratio of the image
+     * If unknown, use null to preserve original aspect ratio
+     */
+    aspect?: string;
+    critical?: boolean;
+    modifiedDate?: string;
+    focalPointX?: number;
+    focalPointY?: number;
+}
+interface ImageProps extends ImageParameters {
+    /** Whether or not to use `background-size: cover` */
+    cover?: boolean;
+    error?: (args: any) => React.ReactElement<any>;
+    alt?: string;
+    title?: string;
+    /**
+     * Useful for banner images. Sets the following CSS automatically:
+     * object-fit: cover
+     * padding-top: 0;
+     */
+    fillAvailableSpace?: boolean;
+    className?: string;
+    badges?: React.ReactElement<any>;
+}
+declare function FlightImage(props: ImageProps): React.JSX.Element;
+export default FlightImage;

package/Image/FlightImage.js

@@ -0,0 +1,59 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useShopConfig } from '@jetshop/core/hooks/useShopConfig';
+import Image from './BaseImage';
+import React from 'react';
+import t from '@jetshop/intl';
+import { useConstructImage } from './useConstructImage';
+import ChannelContext from '@jetshop/core/components/ChannelContext';
+import { Below } from '../Breakpoints';
+export const transparentDataImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
+function Error() {
+    return (React.createElement("div", { style: {
+            background: '#e2e2e2',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: `absolute`,
+            top: 0,
+            left: 0,
+            width: `100%`,
+            height: `100%`
+        } }, t('Image Not Found')));
+}
+function FlightImage(props) {
+    const { gravity, crop, src: originalSrc, sizes: sizesArray = [1], aspect, quality, critical, modifiedDate, error: ErrorComp = Error, focalPointX, focalPointY } = props, rest = __rest(props, ["gravity", "crop", "src", "sizes", "aspect", "quality", "critical", "modifiedDate", "error", "focalPointX", "focalPointY"]);
+    const { theme: { breakpoints }, useMobileImageSizes = false } = useShopConfig();
+    // The baseUrl will change based on the currently-selected channel.
+    // We need it to correctly construct the image url
+    const { selectedChannel } = React.useContext(ChannelContext);
+    const baseUrl = (selectedChannel === null || selectedChannel === void 0 ? void 0 : selectedChannel.imageUrl)
+        ? String(selectedChannel.imageUrl)
+        : null;
+    const { src, hasFalsySrc, lqip, sizes, sizesMobile, srcset, webpSrcset, srcsetMobile, webpSrcsetMobile } = useConstructImage({
+        gravity,
+        crop,
+        src: originalSrc,
+        sizes: sizesArray,
+        aspect,
+        quality,
+        critical,
+        modifiedDate,
+        breakpoints,
+        baseUrl,
+        focalPointX,
+        focalPointY
+    });
+    return (React.createElement(Below, { breakpoint: 'sm' }, (matches) => (React.createElement(Image, Object.assign({}, rest, { critical: critical, aspect: aspect, src: hasFalsySrc && typeof originalSrc === 'boolean' ? false : src, hasFalsySrc: hasFalsySrc, lqip: lqip, sizes: matches && useMobileImageSizes ? sizesMobile : sizes, srcset: matches && useMobileImageSizes ? srcsetMobile : srcset, webpSrcset: matches && useMobileImageSizes ? webpSrcsetMobile : webpSrcset, error: ErrorComp })))));
+}
+export default FlightImage;
+//# sourceMappingURL=FlightImage.js.map

package/Image/FlightImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlightImage.js","sourceRoot":"","sources":["FlightImage.tsx"],"names":[],"mappings":"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"}

package/Image/Image.d.ts

@@ -0,0 +1,2 @@
+export * from './FlightImage';
+export { default } from './FlightImage';

package/Image/Image.js

@@ -0,0 +1,3 @@
+export * from './FlightImage';
+export { default } from './FlightImage';
+//# sourceMappingURL=Image.js.map

package/Image/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["Image.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}

package/Image/index.d.ts

@@ -0,0 +1 @@
+export { default } from './FlightImage';

package/Image/index.js

@@ -0,0 +1,2 @@
+export { default } from './FlightImage';
+//# sourceMappingURL=index.js.map

package/Image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}

package/Image/useConstructImage.d.ts

@@ -0,0 +1,49 @@
+import { ImageValue, ProductImageSize } from '@jetshop/core/types';
+type ImageSrcType = string | ProductImageSize[] | ImageValue;
+export type Gravity = 'north' | 'south' | 'west' | 'east' | 'centre' | 'smart';
+export type ImageBreakpointSize = number | string;
+export type ImageBreakpointSizes = ImageBreakpointSize | ImageBreakpointSize[];
+interface ImageParameters {
+    /** The image src
+     * Also accepts an array of objects with `url` keys (deprecated image field)
+     */
+    src: ImageSrcType;
+    /**
+     * Whether to crop the image instead of resizing it when aspect ratio is provided
+     * @default false
+     */
+    crop?: boolean;
+    gravity?: Gravity;
+    quality?: number;
+    /** An array of image sizes, will be mapped against breakpoints.
+     * @see https://docs.dev.jetshop.se/ui/image#the-sizes-prop
+     */
+    sizes: ImageBreakpointSizes;
+    /**
+     * The aspect ratio of the image
+     * If unknown, use null to preserve original aspect ratio
+     */
+    aspect?: string;
+    critical?: boolean;
+    modifiedDate?: string;
+    breakpoints: Record<string, string>;
+    baseUrl: string;
+    focalPointX?: number;
+    focalPointY?: number;
+}
+/**
+ * Dynamically constructs the query parameters used by ImageMagick to size the image appropriately.
+ * Also generates a LQIP using query parameters, to display while the full image loads.
+ */
+export declare function useConstructImage({ gravity, crop, src, sizes, aspect, critical, quality, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }: ImageParameters): {
+    srcset: string;
+    webpSrcset: string;
+    sizes: string;
+    sizesMobile: string;
+    lqip: string;
+    src: string;
+    hasFalsySrc: boolean;
+    srcsetMobile: string;
+    webpSrcsetMobile: string;
+};
+export {};

package/Image/useConstructImage.js

@@ -0,0 +1,122 @@
+import useWarningInDev from '@jetshop/core/hooks/useWarningInDev';
+import { getFullUrl } from './utils/getFullUrl';
+import { getImageWidths } from './utils/getImageWidths';
+import { getLargestSize } from './utils/getLargestSize';
+import { getLQIP } from './utils/getLQIP';
+import { getSizesMap } from './utils/getSizesMap';
+import { getSrcSetFromWidths } from './utils/getSrcSetFromWidths';
+import React from 'react';
+/**
+ * Dynamically constructs the query parameters used by ImageMagick to size the image appropriately.
+ * Also generates a LQIP using query parameters, to display while the full image loads.
+ */
+export function useConstructImage({ gravity, crop, src, sizes, aspect, critical, quality, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }) {
+    // Warn if gravity was provided but crop was not
+    useWarningInDev(gravity && !crop, 'You have provided a gravity without setting crop to true. Your image will not be cropped, and the `gravity` prop will do nothing. Please remove the `gravity` prop.');
+    // Warn if the src is a falsy value
+    useWarningInDev(!!!src, 'You have provided a falsy value to the Image component. If you intentionally want to display a blank Image component, you may import `transparentDataImg` and use it for the src. Otherwise, this is probably a bug.');
+    /*
+      For backwards-compatibility (and dev convenience) reasons, we accept a
+      falsy `src` prop on Image. undefined | null will act just like the normal
+      Image component does, except that it will show a transparent image where
+      the image would normally load. This may be useful in cases where the end
+      user is lazy and wants to do this:
+  
+      const { imageSrc } = someDataRequest();
+      <Image src={imageSrc} />
+  
+      Where imageSrc may be undefined | null while the request is occurring. The
+      preferred method is to be more explicit:
+  
+      const {imageSrc, loading} = someDataRequest();
+      <Image src={loading ? transparentDataImg : imageSrc } />
+  
+      Therefore, whilst we will handle a null | undefined src, we will warn
+      against its usage in dev.
+    */
+    let hasFalsySrc = true;
+    let imageSrc = '';
+    if (Array.isArray(src)) {
+        // maintain support for deprecated image sizes array
+        hasFalsySrc = false;
+        imageSrc = getFullUrl(getLargestSize(src), baseUrl);
+    }
+    // When we have a string for the src
+    if (!!src && typeof src === 'string') {
+        hasFalsySrc = false;
+        imageSrc = getFullUrl(src, baseUrl);
+    }
+    if (!!src && typeof src === 'object' && src.value) {
+        hasFalsySrc = false;
+        imageSrc = getFullUrl(src.value, baseUrl);
+    }
+    // useMemo so this runs only if the image props change. It calculates the
+    // strings used for `sizes`, `srcset`, and the `lqip`
+    const { sizesMap, sizesMapMobile, srcset, lqip, webpSrcset, srcsetMobile, webpSrcsetMobile } = React.useMemo(() => {
+        if (hasFalsySrc) {
+            return {};
+        }
+        const widths = getImageWidths(breakpoints, sizes);
+        const mobileWidths = getImageWidths(breakpoints, sizes, true);
+        const srcSetFromWidths = ({ webp }) => getSrcSetFromWidths(imageSrc, widths, aspect, {
+            crop,
+            gravity,
+            quality,
+            webp,
+            focalPointX,
+            focalPointY
+        }, modifiedDate);
+        const mobileSrcSetFromWidths = ({ webp }) => getSrcSetFromWidths(imageSrc, mobileWidths, aspect, {
+            crop,
+            gravity,
+            quality,
+            webp,
+            focalPointX,
+            focalPointY
+        }, modifiedDate);
+        const srcset = srcSetFromWidths({ webp: false });
+        const webpSrcset = srcSetFromWidths({ webp: true });
+        const srcsetMobile = mobileSrcSetFromWidths({ webp: false });
+        const webpSrcsetMobile = mobileSrcSetFromWidths({ webp: true });
+        // If this is a critical image, don't calculate LQIP
+        const lqip = critical
+            ? null
+            : getLQIP(imageSrc, widths, aspect, crop, modifiedDate);
+        const sizesMap = getSizesMap(breakpoints, sizes);
+        const sizesMapMobile = getSizesMap(breakpoints, sizes, true);
+        return {
+            sizesMap,
+            sizesMapMobile,
+            srcset,
+            lqip,
+            webpSrcset,
+            srcsetMobile,
+            webpSrcsetMobile
+        };
+    }, [
+        aspect,
+        breakpoints,
+        crop,
+        gravity,
+        hasFalsySrc,
+        imageSrc,
+        quality,
+        sizes,
+        critical,
+        modifiedDate,
+        focalPointX,
+        focalPointY
+    ]);
+    return {
+        srcset,
+        webpSrcset,
+        sizes: sizesMap,
+        sizesMobile: sizesMapMobile,
+        lqip,
+        src: imageSrc,
+        hasFalsySrc,
+        srcsetMobile,
+        webpSrcsetMobile
+    };
+}
+//# sourceMappingURL=useConstructImage.js.map

package/Image/useConstructImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConstructImage.js","sourceRoot":"","sources":["useConstructImage.tsx"],"names":[],"mappings":"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"}

package/Image/utils/aspectRatioToFraction.d.ts

@@ -0,0 +1,2 @@
+import { AspectRatio } from '../Image';
+export declare const aspectRatioToFraction: (aspect: AspectRatio) => number;

package/Image/utils/aspectRatioToFraction.js

@@ -0,0 +1,11 @@
+export const aspectRatioToFraction = (aspect) => {
+    if (typeof aspect === 'string' && aspect.indexOf(':') > 0) {
+        const [a, b] = aspect.split(':');
+        return b / a;
+    }
+    else if (typeof aspect === 'number') {
+        return aspect;
+    }
+    throw new TypeError('Aspect ratio is not a Number or String with the format n:m');
+};
+//# sourceMappingURL=aspectRatioToFraction.js.map