@jetshop/ui 5.13.12-0 → 5.14.0-alpha.49df897e

package/ErrorBoundary/Generic.js

@@ -1,69 +1,69 @@
-import * as React from 'react';
-import report from '@jetshop/core/errorReporting';
-import { styled } from 'linaria/react';
-const Wrapper = styled('section') `
-  width: 57ch;
-  max-width: 100%;
-  margin: 4rem auto;
-  padding: 1rem;
-  a {
-    display: inline-block;
-    margin: 1rem 0 3rem 0;
-    border-radius: 3px;
-    padding: 0.5rem;
-    text-decoration: none;
-    font-weight: 600;
-    background: #e2e2e2;
-    border: 1px solid #c3c3c3;
-    color: #000;
-    :hover {
-      background: #eaeaea;
-    }
-  }
-  h1 {
-    font-size: 1.5rem;
-    margin-bottom: 2rem;
-  }
-  pre {
-    font-size: 0.875rem;
-    line-height: 1.5;
-    color: #585858;
-  }
-`;
-export const DefaultError = ({ error, info }) => (React.createElement(Wrapper, null,
-    React.createElement("h1", null, "Something went wrong!"),
-    React.createElement("p", null, "Sorry! Our developers have been notified."),
-    React.createElement("div", null,
-        React.createElement("a", { href: "/" }, "Go back to the start page")),
-    process.env.NODE_ENV !== 'production' && (React.createElement("div", null,
-        error && React.createElement("p", null,
-            "Error: ",
-            error.message),
-        info && React.createElement("pre", null, info.componentStack)))));
-class ErrorBoundary extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            error: undefined,
-            info: undefined
-        };
-    }
-    componentDidCatch(error, info) {
-        const { extraInfo = {} } = this.props;
-        // Report to Sentry
-        report(error, Object.assign(Object.assign({}, extraInfo), { reactInfo: info }));
-        this.setState({ error, info });
-    }
-    render() {
-        const Comp = this.props.component;
-        if (!this.state.error) {
-            return this.props.children;
-        }
-        return React.createElement(Comp, Object.assign({}, this.state));
-    }
-}
-ErrorBoundary.defaultProps = {
-    component: DefaultError
-};
-export default ErrorBoundary;
+import * as React from 'react';
+import report from '@jetshop/core/errorReporting';
+import { styled } from 'linaria/react';
+const Wrapper = styled('section') `
+  width: 57ch;
+  max-width: 100%;
+  margin: 4rem auto;
+  padding: 1rem;
+  a {
+    display: inline-block;
+    margin: 1rem 0 3rem 0;
+    border-radius: 3px;
+    padding: 0.5rem;
+    text-decoration: none;
+    font-weight: 600;
+    background: #e2e2e2;
+    border: 1px solid #c3c3c3;
+    color: #000;
+    :hover {
+      background: #eaeaea;
+    }
+  }
+  h1 {
+    font-size: 1.5rem;
+    margin-bottom: 2rem;
+  }
+  pre {
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: #585858;
+  }
+`;
+export const DefaultError = ({ error, info }) => (React.createElement(Wrapper, null,
+    React.createElement("h1", null, "Something went wrong!"),
+    React.createElement("p", null, "Sorry! Our developers have been notified."),
+    React.createElement("div", null,
+        React.createElement("a", { href: "/" }, "Go back to the start page")),
+    process.env.NODE_ENV !== 'production' && (React.createElement("div", null,
+        error && React.createElement("p", null,
+            "Error: ",
+            error.message),
+        info && React.createElement("pre", null, info.componentStack)))));
+class ErrorBoundary extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            error: undefined,
+            info: undefined
+        };
+    }
+    componentDidCatch(error, info) {
+        const { extraInfo = {} } = this.props;
+        // Report to Sentry
+        report(error, Object.assign(Object.assign({}, extraInfo), { reactInfo: info }));
+        this.setState({ error, info });
+    }
+    render() {
+        const Comp = this.props.component;
+        if (!this.state.error) {
+            return this.props.children;
+        }
+        return React.createElement(Comp, Object.assign({}, this.state));
+    }
+}
+ErrorBoundary.defaultProps = {
+    component: DefaultError
+};
+export default ErrorBoundary;
 //# sourceMappingURL=Generic.js.map

package/ErrorBoundary/PassThrough.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-declare const PassThrough: React.FC;
-export default PassThrough;
+import React from 'react';
+declare const PassThrough: React.FC;
+export default PassThrough;

package/ErrorBoundary/PassThrough.js

@@ -1,7 +1,7 @@
-// This should be used in cases where it is more desired to render nothing
-// rather than rendering a message when an error boundary is hit.
-const PassThrough = () => {
-    return null;
-};
-export default PassThrough;
+// This should be used in cases where it is more desired to render nothing
+// rather than rendering a message when an error boundary is hit.
+const PassThrough = () => {
+    return null;
+};
+export default PassThrough;
 //# sourceMappingURL=PassThrough.js.map

package/Gallery/Gallery.d.ts

@@ -1,39 +1,39 @@
-import { ProductImage } from '@jetshop/core/types';
-import * as React from 'react';
-import 'react-image-gallery/styles/css/image-gallery.css';
-export interface GalleryProps {
-    images: ProductImage[];
-    /** @default null
-     * The aspect ratio used for the gallery images. If unknown, pass `null` */
-    aspect?: string;
-    /**
-     * @default [1, 1, 1, 1 / 2, 1 / 2]
-     * An array of sizes to be used for the img
-     * srcSet. Each size maps to a breakpoint */
-    sizes?: number[];
-    /**
-     * @default ['5rem']
-     */
-    thumbnailSizes?: number[];
-    /**
-     * @default [1, 1, 1, 1 ]
-     */
-    fullScreenSizes?: number[];
-    /** @default bottom
-     * The position of image thumbnails */
-    thumbnailPosition?: 'top' | 'right' | 'bottom' | 'left';
-    /** The desired background colour for the gallery */
-    backgroundColor?: string;
-    /** A ref to forward on to the image gallery in order to access imperative functions */
-    galleryRef?: {
-        current: any;
-    };
-    quality?: number;
-    thumbnailQuality?: number;
-    eagerlyLoad?: number[];
-}
-export interface GalleryState {
-    isFullscreen: boolean;
-}
-declare const Gallery: React.FC<GalleryProps>;
-export default Gallery;
+import { ProductImage } from '@jetshop/core/types';
+import * as React from 'react';
+import 'react-image-gallery/styles/css/image-gallery.css';
+export interface GalleryProps {
+    images: ProductImage[];
+    /** @default null
+     * The aspect ratio used for the gallery images. If unknown, pass `null` */
+    aspect?: string;
+    /**
+     * @default [1, 1, 1, 1 / 2, 1 / 2]
+     * An array of sizes to be used for the img
+     * srcSet. Each size maps to a breakpoint */
+    sizes?: number[];
+    /**
+     * @default ['5rem']
+     */
+    thumbnailSizes?: number[];
+    /**
+     * @default [1, 1, 1, 1 ]
+     */
+    fullScreenSizes?: number[];
+    /** @default bottom
+     * The position of image thumbnails */
+    thumbnailPosition?: 'top' | 'right' | 'bottom' | 'left';
+    /** The desired background colour for the gallery */
+    backgroundColor?: string;
+    /** A ref to forward on to the image gallery in order to access imperative functions */
+    galleryRef?: {
+        current: any;
+    };
+    quality?: number;
+    thumbnailQuality?: number;
+    eagerlyLoad?: number[];
+}
+export interface GalleryState {
+    isFullscreen: boolean;
+}
+declare const Gallery: React.FC<GalleryProps>;
+export default Gallery;

package/Gallery/Gallery.js

@@ -1,122 +1,122 @@
-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 { styled } from 'linaria/react';
-import { css } from 'linaria';
-import ImageGallery from 'react-image-gallery';
-import 'react-image-gallery/styles/css/image-gallery.css';
-import { constructGallery } from './constructGallery';
-import Image from '@jetshop/ui/Image/Image';
-import ChannelContext from '@jetshop/core/components/ChannelContext';
-import { useShopConfig } from '@jetshop/core/hooks/useShopConfig';
-const wrapperStyles = css `
-  position: relative;
-  img {
-    max-height: 100vh;
-  }
-  .image-gallery {
-    z-index: 140;
-  }
-  .image-gallery-image {
-    text-align: center;
-  }
-  .image-gallery-thumbnail-inner {
-    font-size: 10px;
-  }
-  .image-gallery-right-nav,
-  .image-gallery-left-nav,
-  .image-gallery-fullscreen-button {
-    z-index: 2;
-    font-size: 2rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-    height: 2.5rem;
-    width: 2.5rem;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.4);
-    transition: background 0.3s ease-in-out;
-    margin: 0 0.5rem;
-    &:hover {
-      background: rgba(255, 255, 255, 0.8);
-    }
-    &:before {
-      color: black;
-      text-shadow: none;
-    }
-  }
-  .image-gallery-fullscreen-button {
-    margin-bottom: 0.5rem;
-  }
-  .image-gallery-fullscreen-button:before {
-    text-shadow: none;
-    font-size: 0.7em;
-    padding: 0;
-  }
-  .image-gallery-thumbnail.active {
-    border-width: 1px;
-  }
-  .image-gallery-thumbnails-wrapper.left .image-gallery-thumbnails,
-  .image-gallery-thumbnails-wrapper.right .image-gallery-thumbnails {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-  .fullscreen {
-    .image-gallery-fullscreen-button {
-      margin: 2rem;
-    }
-    .image-gallery-right-nav,
-    .image-gallery-left-nav {
-      margin: 0 2rem;
-    }
-    img {
-      width: auto;
-      max-width: 100%;
-    }
-    .image-gallery-thumbnails-wrapper {
-      display: none;
-    }
-  }
-  .image-gallery-slide {
-    background-color: var(--slide-bg);
-  }
-`;
-const Overlay = styled('div') `
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-`;
-const Gallery = function Gallery(props) {
-    const { sizes = [1, 1, 1, 1 / 2, 1 / 2], fullScreenSizes = [1, 1, 1, 1], thumbnailSizes = ['5rem'], aspect = '1:1', thumbnailPosition = 'bottom', backgroundColor = 'white', thumbnailQuality, quality, images, galleryRef, eagerlyLoad = [0] } = props, rest = __rest(props, ["sizes", "fullScreenSizes", "thumbnailSizes", "aspect", "thumbnailPosition", "backgroundColor", "thumbnailQuality", "quality", "images", "galleryRef", "eagerlyLoad"]);
-    const { theme: { breakpoints } } = useShopConfig();
-    const { selectedChannel } = React.useContext(ChannelContext);
-    const baseUrl = (selectedChannel === null || selectedChannel === void 0 ? void 0 : selectedChannel.url) ? String(selectedChannel.url) : null;
-    const [isFullscreen, setFullscreen] = React.useState(false);
-    const galleryImages = React.useMemo(() => constructGallery(images, fullScreenSizes, aspect, baseUrl, breakpoints), [aspect, baseUrl, breakpoints, fullScreenSizes, images]);
-    return (React.createElement("div", { className: wrapperStyles, style: { ['--slide-bg']: backgroundColor } },
-        React.createElement(ImageGallery, Object.assign({ ref: (r) => (galleryRef ? (galleryRef.current = r) : null), thumbnailPosition: thumbnailPosition, items: galleryImages, autoPlay: false, showPlayButton: false, showThumbnails: galleryImages.length > 1, useBrowserFullscreen: false, preventDefaultTouchmoveEvent: isFullscreen, onScreenChange: (el) => setFullscreen(!!el), renderItem: (item) => {
-                return (React.createElement("div", { className: "image-gallery-image" }, isFullscreen ? (React.createElement("img", { src: item.original, alt: item.originalAlt, srcSet: item.srcSet, sizes: item.sizes, title: item.originalTitle })) : (React.createElement(React.Fragment, null,
-                    React.createElement(Image, { src: item.original, alt: item.originalAlt, sizes: sizes, title: item.originalTitle, aspect: aspect, quality: quality, modifiedDate: item.modifiedDate, critical: eagerlyLoad.includes(item.index) }),
-                    props.children && React.createElement(Overlay, null, props.children)))));
-            }, renderThumbInner: (item) => {
-                return (React.createElement("div", { className: "image-gallery-thumbnail-inner" },
-                    React.createElement(Image, { src: item.thumbnail, alt: item.thumbnailAlt, title: item.thumbnailTitle, sizes: thumbnailSizes, aspect: aspect, quality: thumbnailQuality }),
-                    item.thumbnailLabel && (React.createElement("div", { className: "image-gallery-thumbnail-label" }, item.thumbnailLabel))));
-            } }, rest))));
-};
-export default Gallery;
+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 { styled } from 'linaria/react';
+import { css } from 'linaria';
+import ImageGallery from 'react-image-gallery';
+import 'react-image-gallery/styles/css/image-gallery.css';
+import { constructGallery } from './constructGallery';
+import Image from '@jetshop/ui/Image/Image';
+import ChannelContext from '@jetshop/core/components/ChannelContext';
+import { useShopConfig } from '@jetshop/core/hooks/useShopConfig';
+const wrapperStyles = css `
+  position: relative;
+  img {
+    max-height: 100vh;
+  }
+  .image-gallery {
+    z-index: 140;
+  }
+  .image-gallery-image {
+    text-align: center;
+  }
+  .image-gallery-thumbnail-inner {
+    font-size: 10px;
+  }
+  .image-gallery-right-nav,
+  .image-gallery-left-nav,
+  .image-gallery-fullscreen-button {
+    z-index: 2;
+    font-size: 2rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    height: 2.5rem;
+    width: 2.5rem;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.4);
+    transition: background 0.3s ease-in-out;
+    margin: 0 0.5rem;
+    &:hover {
+      background: rgba(255, 255, 255, 0.8);
+    }
+    &:before {
+      color: black;
+      text-shadow: none;
+    }
+  }
+  .image-gallery-fullscreen-button {
+    margin-bottom: 0.5rem;
+  }
+  .image-gallery-fullscreen-button:before {
+    text-shadow: none;
+    font-size: 0.7em;
+    padding: 0;
+  }
+  .image-gallery-thumbnail.active {
+    border-width: 1px;
+  }
+  .image-gallery-thumbnails-wrapper.left .image-gallery-thumbnails,
+  .image-gallery-thumbnails-wrapper.right .image-gallery-thumbnails {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .fullscreen {
+    .image-gallery-fullscreen-button {
+      margin: 2rem;
+    }
+    .image-gallery-right-nav,
+    .image-gallery-left-nav {
+      margin: 0 2rem;
+    }
+    img {
+      width: auto;
+      max-width: 100%;
+    }
+    .image-gallery-thumbnails-wrapper {
+      display: none;
+    }
+  }
+  .image-gallery-slide {
+    background-color: var(--slide-bg);
+  }
+`;
+const Overlay = styled('div') `
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+`;
+const Gallery = function Gallery(props) {
+    const { sizes = [1, 1, 1, 1 / 2, 1 / 2], fullScreenSizes = [1, 1, 1, 1], thumbnailSizes = ['5rem'], aspect = '1:1', thumbnailPosition = 'bottom', backgroundColor = 'white', thumbnailQuality, quality, images, galleryRef, eagerlyLoad = [0] } = props, rest = __rest(props, ["sizes", "fullScreenSizes", "thumbnailSizes", "aspect", "thumbnailPosition", "backgroundColor", "thumbnailQuality", "quality", "images", "galleryRef", "eagerlyLoad"]);
+    const { theme: { breakpoints } } = useShopConfig();
+    const { selectedChannel } = React.useContext(ChannelContext);
+    const baseUrl = (selectedChannel === null || selectedChannel === void 0 ? void 0 : selectedChannel.url) ? String(selectedChannel.url) : null;
+    const [isFullscreen, setFullscreen] = React.useState(false);
+    const galleryImages = React.useMemo(() => constructGallery(images, fullScreenSizes, aspect, baseUrl, breakpoints), [aspect, baseUrl, breakpoints, fullScreenSizes, images]);
+    return (React.createElement("div", { className: wrapperStyles, style: { ['--slide-bg']: backgroundColor } },
+        React.createElement(ImageGallery, Object.assign({ ref: (r) => (galleryRef ? (galleryRef.current = r) : null), thumbnailPosition: thumbnailPosition, items: galleryImages, autoPlay: false, showPlayButton: false, showThumbnails: galleryImages.length > 1, useBrowserFullscreen: false, preventDefaultTouchmoveEvent: isFullscreen, onScreenChange: (el) => setFullscreen(!!el), renderItem: (item) => {
+                return (React.createElement("div", { className: "image-gallery-image" }, isFullscreen ? (React.createElement("img", { src: item.original, alt: item.originalAlt, srcSet: item.srcSet, sizes: item.sizes, title: item.originalTitle })) : (React.createElement(React.Fragment, null,
+                    React.createElement(Image, { src: item.original, alt: item.originalAlt, sizes: sizes, title: item.originalTitle, aspect: aspect, quality: quality, modifiedDate: item.modifiedDate, critical: eagerlyLoad.includes(item.index) }),
+                    props.children && React.createElement(Overlay, null, props.children)))));
+            }, renderThumbInner: (item) => {
+                return (React.createElement("div", { className: "image-gallery-thumbnail-inner" },
+                    React.createElement(Image, { src: item.thumbnail, alt: item.thumbnailAlt, title: item.thumbnailTitle, sizes: thumbnailSizes, aspect: aspect, quality: thumbnailQuality }),
+                    item.thumbnailLabel && (React.createElement("div", { className: "image-gallery-thumbnail-label" }, item.thumbnailLabel))));
+            } }, rest))));
+};
+export default Gallery;
 //# sourceMappingURL=Gallery.js.map

package/Gallery/constructGallery.d.ts

@@ -1,15 +1,15 @@
-import { ProductImage } from '@jetshop/core/types';
-export declare function constructGallery(images: ProductImage[], sizes: number[], aspect: string, baseUrl: string, breakpoints: {
-    [label: string]: string;
-}): {
-    index: number;
-    original: string;
-    originalAlt: string;
-    originalTitle: string;
-    thumbnail: string;
-    thumbnailAlt: string;
-    thumbnailTitle: string;
-    sizes: string;
-    srcSet: string;
-    modifiedDate: string;
-}[];
+import { ProductImage } from '@jetshop/core/types';
+export declare function constructGallery(images: ProductImage[], sizes: number[], aspect: string, baseUrl: string, breakpoints: {
+    [label: string]: string;
+}): {
+    index: number;
+    original: string;
+    originalAlt: string;
+    originalTitle: string;
+    thumbnail: string;
+    thumbnailAlt: string;
+    thumbnailTitle: string;
+    sizes: string;
+    srcSet: string;
+    modifiedDate: string;
+}[];

package/Gallery/constructGallery.js

@@ -1,41 +1,41 @@
-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 breakpointValues = Object.values(breakpoints);
-    const calculatedSizes = getSizesMap(breakpointValues, sizes);
-    // Get required set of image widths
-    const widths = getImageWidths(breakpointValues, 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
-        };
-    });
-}
+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 breakpointValues = Object.values(breakpoints);
+    const calculatedSizes = getSizesMap(breakpointValues, sizes);
+    // Get required set of image widths
+    const widths = getImageWidths(breakpointValues, 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