@jobber/components 6.13.2 → 6.14.1-aidenfix--e9ec00c.0

package/dist/Gallery/GalleryTypes.d.ts

@@ -11,7 +11,7 @@ export interface GalleryProps {
     /**
      * The files for the Gallery to display
      */
-    files: File[];
+    files: GalleryFile[];
     /**
      * The max number of thumbnails before no more thumbnails are displayed
      * unless the user clicks an action to display the rest
@@ -21,9 +21,9 @@ export interface GalleryProps {
      * onDelete callback - this function will be called when the delete action is
      * triggered on a Gallery image
      */
-    onDelete?(file: File): void;
+    onDelete?(file: GalleryFile): void;
 }
-export interface File extends Pick<FileUpload, "key" | "name" | "type" | "size" | "progress"> {
+export interface GalleryFile extends Pick<FileUpload, "key" | "name" | "type" | "size" | "progress"> {
     /**
      * The thumbnail url of the file.
      */
@@ -31,5 +31,5 @@ export interface File extends Pick<FileUpload, "key" | "name" | "type" | "size"
     /**
      * The data url of the file.
      */
-    readonly src: string;
+    readonly src: string | (() => Promise<string>);
 }

package/dist/Gallery/index.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var Gallery = require('../Gallery-cjs.js');
+require('../tslib.es6-cjs.js');
 require('react');
 require('classnames');
 require('../LightBox-cjs.js');
@@ -33,7 +34,6 @@ require('../Emphasis-cjs.js');
 require('../index-cjs.js');
 require('../_polyfill-node.process-cjs.js');
 require('../Glimmer-cjs.js');
-require('../tslib.es6-cjs.js');
 require('../ProgressBar-cjs.js');
 
 

package/dist/Gallery/index.d.ts

@@ -1 +1,2 @@
 export { Gallery } from "./Gallery";
+export type { GalleryFile, GalleryProps } from "./GalleryTypes";

package/dist/Gallery/index.mjs

@@ -1,4 +1,5 @@
 export { G as Gallery } from '../Gallery-es.js';
+import '../tslib.es6-es.js';
 import 'react';
 import 'classnames';
 import '../LightBox-es.js';
@@ -31,5 +32,4 @@ import '../Emphasis-es.js';
 import '../index-es.js';
 import '../_polyfill-node.process-es.js';
 import '../Glimmer-es.js';
-import '../tslib.es6-es.js';
 import '../ProgressBar-es.js';

package/dist/Gallery-cjs.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var classnames = require('classnames');
 var LightBox = require('./LightBox-cjs.js');
@@ -9,7 +10,14 @@ var Button = require('./Button-cjs.js');
 var styles = {"gallery":"_6UhvrmKZdns-","galleryLarge":"f0hnJ8v-iHE-","showMoreButton":"EvHA4-Q7O9g-","baseShowMoreButton":"VWW-3mSlumg-","largeShowMoreButton":"DNhegGxB75M-","spinning":"aqCoXiyvGKw-"};
 
 function Gallery({ files, size = "base", max, onDelete }) {
-    const { images, filesToImageIndex } = generateImagesArray(files);
+    const [images, setImages] = React.useState([]);
+    const [filesToImageIndex, setFilesToImageIndex] = React.useState([]);
+    React.useEffect(() => {
+        generateImagesArray(files).then(result => {
+            setImages(result.images);
+            setFilesToImageIndex(result.filesToImageIndex);
+        });
+    }, [files]);
     const [lightboxOpen, setLightboxOpen] = React.useState(false);
     const [lightboxIndex, setLightboxIndex] = React.useState(0);
     const [displayPastMax, setDisplayPastMax] = React.useState(max ? false : true);
@@ -17,7 +25,7 @@ function Gallery({ files, size = "base", max, onDelete }) {
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: size === "large" ? styles.galleryLarge : styles.gallery },
             visibleFiles.map((file, index) => {
-                return (React.createElement(FormatFile.FormatFile, { key: file.key, file: Object.assign(Object.assign({}, file), { src: () => Promise.resolve(file.thumbnailSrc || file.src) }), display: "compact", displaySize: size, onClick: () => {
+                return (React.createElement(FormatFile.FormatFile, { key: file.key, file: Object.assign(Object.assign({}, file), { src: () => Promise.resolve(file.thumbnailSrc || getFileSrc(file)) }), display: "compact", displaySize: size, onClick: () => {
                         handleThumbnailClicked(index);
                     }, onDelete: onDelete ? () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(file) : undefined }));
             }),
@@ -27,13 +35,15 @@ function Gallery({ files, size = "base", max, onDelete }) {
                     } })))),
         React.createElement(LightBox.LightBox, { open: lightboxOpen, images: images, imageIndex: lightboxIndex, onRequestClose: handleLightboxClose })));
     function handleThumbnailClicked(index) {
-        if (files[index].type.startsWith("image/") &&
-            isSupportedImageType(files[index])) {
-            handleLightboxOpen(index);
-        }
-        else {
-            window.open(files[index].src, "_blank");
-        }
+        return tslib_es6.__awaiter(this, void 0, void 0, function* () {
+            if (files[index].type.startsWith("image/") &&
+                isSupportedImageType(files[index])) {
+                handleLightboxOpen(index);
+            }
+            else {
+                window.open(yield getFileSrc(files[index]), "_blank");
+            }
+        });
     }
     function handleLightboxOpen(index) {
         const fileToImageIndex = filesToImageIndex[index];
@@ -46,6 +56,11 @@ function Gallery({ files, size = "base", max, onDelete }) {
         setLightboxOpen(false);
     }
 }
+function getFileSrc(file) {
+    return tslib_es6.__awaiter(this, void 0, void 0, function* () {
+        return typeof file.src === "string" ? file.src : file.src();
+    });
+}
 function isSupportedImageType(file) {
     const userAgent = typeof document === "undefined" ? "" : window.navigator.userAgent;
     const nonHeicImage = !file.type.startsWith("image/heic");
@@ -53,20 +68,22 @@ function isSupportedImageType(file) {
     return (nonHeicImage || FormatFile.isSafari(userAgent)) && nonSVGImage;
 }
 function generateImagesArray(files) {
-    const images = [];
-    const filesToImageIndex = [];
-    let imageIndex = 0;
-    for (let i = 0; i < files.length; i++) {
-        if (files[i].type.startsWith("image/") && isSupportedImageType(files[i])) {
-            images.push({ title: files[i].name, url: files[i].src });
-            filesToImageIndex.push(imageIndex);
-            imageIndex++;
+    return tslib_es6.__awaiter(this, void 0, void 0, function* () {
+        const images = [];
+        const filesToImageIndex = [];
+        let imageIndex = 0;
+        for (let i = 0; i < files.length; i++) {
+            if (files[i].type.startsWith("image/") && isSupportedImageType(files[i])) {
+                images.push({ title: files[i].name, url: yield getFileSrc(files[i]) });
+                filesToImageIndex.push(imageIndex);
+                imageIndex++;
+            }
+            else {
+                filesToImageIndex.push(undefined);
+            }
         }
-        else {
-            filesToImageIndex.push(undefined);
-        }
-    }
-    return { images, filesToImageIndex };
+        return { images, filesToImageIndex };
+    });
 }
 
 exports.Gallery = Gallery;

package/dist/Gallery-es.js

@@ -1,3 +1,4 @@
+import { a as __awaiter } from './tslib.es6-es.js';
 import React, { useState } from 'react';
 import classnames from 'classnames';
 import { L as LightBox } from './LightBox-es.js';
@@ -7,7 +8,14 @@ import { B as Button } from './Button-es.js';
 var styles = {"gallery":"_6UhvrmKZdns-","galleryLarge":"f0hnJ8v-iHE-","showMoreButton":"EvHA4-Q7O9g-","baseShowMoreButton":"VWW-3mSlumg-","largeShowMoreButton":"DNhegGxB75M-","spinning":"aqCoXiyvGKw-"};
 
 function Gallery({ files, size = "base", max, onDelete }) {
-    const { images, filesToImageIndex } = generateImagesArray(files);
+    const [images, setImages] = useState([]);
+    const [filesToImageIndex, setFilesToImageIndex] = useState([]);
+    React.useEffect(() => {
+        generateImagesArray(files).then(result => {
+            setImages(result.images);
+            setFilesToImageIndex(result.filesToImageIndex);
+        });
+    }, [files]);
     const [lightboxOpen, setLightboxOpen] = useState(false);
     const [lightboxIndex, setLightboxIndex] = useState(0);
     const [displayPastMax, setDisplayPastMax] = useState(max ? false : true);
@@ -15,7 +23,7 @@ function Gallery({ files, size = "base", max, onDelete }) {
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: size === "large" ? styles.galleryLarge : styles.gallery },
             visibleFiles.map((file, index) => {
-                return (React.createElement(FormatFile, { key: file.key, file: Object.assign(Object.assign({}, file), { src: () => Promise.resolve(file.thumbnailSrc || file.src) }), display: "compact", displaySize: size, onClick: () => {
+                return (React.createElement(FormatFile, { key: file.key, file: Object.assign(Object.assign({}, file), { src: () => Promise.resolve(file.thumbnailSrc || getFileSrc(file)) }), display: "compact", displaySize: size, onClick: () => {
                         handleThumbnailClicked(index);
                     }, onDelete: onDelete ? () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(file) : undefined }));
             }),
@@ -25,13 +33,15 @@ function Gallery({ files, size = "base", max, onDelete }) {
                     } })))),
         React.createElement(LightBox, { open: lightboxOpen, images: images, imageIndex: lightboxIndex, onRequestClose: handleLightboxClose })));
     function handleThumbnailClicked(index) {
-        if (files[index].type.startsWith("image/") &&
-            isSupportedImageType(files[index])) {
-            handleLightboxOpen(index);
-        }
-        else {
-            window.open(files[index].src, "_blank");
-        }
+        return __awaiter(this, void 0, void 0, function* () {
+            if (files[index].type.startsWith("image/") &&
+                isSupportedImageType(files[index])) {
+                handleLightboxOpen(index);
+            }
+            else {
+                window.open(yield getFileSrc(files[index]), "_blank");
+            }
+        });
     }
     function handleLightboxOpen(index) {
         const fileToImageIndex = filesToImageIndex[index];
@@ -44,6 +54,11 @@ function Gallery({ files, size = "base", max, onDelete }) {
         setLightboxOpen(false);
     }
 }
+function getFileSrc(file) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return typeof file.src === "string" ? file.src : file.src();
+    });
+}
 function isSupportedImageType(file) {
     const userAgent = typeof document === "undefined" ? "" : window.navigator.userAgent;
     const nonHeicImage = !file.type.startsWith("image/heic");
@@ -51,20 +66,22 @@ function isSupportedImageType(file) {
     return (nonHeicImage || isSafari(userAgent)) && nonSVGImage;
 }
 function generateImagesArray(files) {
-    const images = [];
-    const filesToImageIndex = [];
-    let imageIndex = 0;
-    for (let i = 0; i < files.length; i++) {
-        if (files[i].type.startsWith("image/") && isSupportedImageType(files[i])) {
-            images.push({ title: files[i].name, url: files[i].src });
-            filesToImageIndex.push(imageIndex);
-            imageIndex++;
+    return __awaiter(this, void 0, void 0, function* () {
+        const images = [];
+        const filesToImageIndex = [];
+        let imageIndex = 0;
+        for (let i = 0; i < files.length; i++) {
+            if (files[i].type.startsWith("image/") && isSupportedImageType(files[i])) {
+                images.push({ title: files[i].name, url: yield getFileSrc(files[i]) });
+                filesToImageIndex.push(imageIndex);
+                imageIndex++;
+            }
+            else {
+                filesToImageIndex.push(undefined);
+            }
         }
-        else {
-            filesToImageIndex.push(undefined);
-        }
-    }
-    return { images, filesToImageIndex };
+        return { images, filesToImageIndex };
+    });
 }
 
 export { Gallery as G };

package/dist/Popover/index.cjs

@@ -5,6 +5,7 @@ require('react');
 require('react-popper');
 require('../useRefocusOnActivator-cjs.js');
 require('classnames');
+require('react-dom');
 require('../ButtonDismiss-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');

package/dist/Popover/index.mjs

@@ -3,6 +3,7 @@ import 'react';
 import 'react-popper';
 import '../useRefocusOnActivator-es.js';
 import 'classnames';
+import 'react-dom';
 import '../ButtonDismiss-es.js';
 import '../Button-es.js';
 import 'react-router-dom';

package/dist/Popover-cjs.js

@@ -4,6 +4,7 @@ var React = require('react');
 var reactPopper = require('react-popper');
 var useRefocusOnActivator = require('./useRefocusOnActivator-cjs.js');
 var classnames = require('classnames');
+var ReactDOM = require('react-dom');
 var ButtonDismiss = require('./ButtonDismiss-cjs.js');
 
 var classes = {"popover":"rY8OtuArIi0-","header":"UI1AohefbSo-","dismissButton":"HyA0TM5soDM-","arrow":"uClo-5-xhAc-","spinning":"VA0ROLmpLPs-"};
@@ -20,11 +21,15 @@ function Popover({ onRequestClose, children, attachTo, open, preferredPlacement
     const popoverClassNames = classnames(classes.popover, UNSAFE_className.container);
     const dismissButtonClassNames = classnames(classes.dismissButton, UNSAFE_className.dismissButtonContainer);
     const arrowClassNames = classnames(classes.arrow, UNSAFE_className.arrow);
-    return (React.createElement(React.Fragment, null, open && (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), ((_a = UNSAFE_style.container) !== null && _a !== void 0 ? _a : {})), className: popoverClassNames }, attributes.popper, { "data-testid": "popover-container" }),
+    const popoverContent = (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), ((_a = UNSAFE_style.container) !== null && _a !== void 0 ? _a : {})), className: popoverClassNames }, attributes.popper, { "data-testid": "popover-container" }),
         React.createElement("div", { className: dismissButtonClassNames, style: (_b = UNSAFE_style.dismissButtonContainer) !== null && _b !== void 0 ? _b : {}, "data-testid": "popover-dismiss-button-container" },
             React.createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
         children,
-        React.createElement("div", { ref: setArrowElement, className: arrowClassNames, style: Object.assign(Object.assign({}, popperStyles.arrow), ((_c = UNSAFE_style.arrow) !== null && _c !== void 0 ? _c : {})), "data-testid": "popover-arrow" })))));
+        React.createElement("div", { ref: setArrowElement, className: arrowClassNames, style: Object.assign(Object.assign({}, popperStyles.arrow), ((_c = UNSAFE_style.arrow) !== null && _c !== void 0 ? _c : {})), "data-testid": "popover-arrow" })));
+    return React.createElement(React.Fragment, null, open && React.createElement(PopoverPortal, null, popoverContent));
+}
+function PopoverPortal({ children }) {
+    return ReactDOM.createPortal(children, document.body);
 }
 function buildModifiers(arrowElement) {
     const modifiers = [

package/dist/Popover-es.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { usePopper } from 'react-popper';
 import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
 import classnames from 'classnames';
+import ReactDOM from 'react-dom';
 import { B as ButtonDismiss } from './ButtonDismiss-es.js';
 
 var classes = {"popover":"rY8OtuArIi0-","header":"UI1AohefbSo-","dismissButton":"HyA0TM5soDM-","arrow":"uClo-5-xhAc-","spinning":"VA0ROLmpLPs-"};
@@ -18,11 +19,15 @@ function Popover({ onRequestClose, children, attachTo, open, preferredPlacement
     const popoverClassNames = classnames(classes.popover, UNSAFE_className.container);
     const dismissButtonClassNames = classnames(classes.dismissButton, UNSAFE_className.dismissButtonContainer);
     const arrowClassNames = classnames(classes.arrow, UNSAFE_className.arrow);
-    return (React.createElement(React.Fragment, null, open && (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), ((_a = UNSAFE_style.container) !== null && _a !== void 0 ? _a : {})), className: popoverClassNames }, attributes.popper, { "data-testid": "popover-container" }),
+    const popoverContent = (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), ((_a = UNSAFE_style.container) !== null && _a !== void 0 ? _a : {})), className: popoverClassNames }, attributes.popper, { "data-testid": "popover-container" }),
         React.createElement("div", { className: dismissButtonClassNames, style: (_b = UNSAFE_style.dismissButtonContainer) !== null && _b !== void 0 ? _b : {}, "data-testid": "popover-dismiss-button-container" },
             React.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
         children,
-        React.createElement("div", { ref: setArrowElement, className: arrowClassNames, style: Object.assign(Object.assign({}, popperStyles.arrow), ((_c = UNSAFE_style.arrow) !== null && _c !== void 0 ? _c : {})), "data-testid": "popover-arrow" })))));
+        React.createElement("div", { ref: setArrowElement, className: arrowClassNames, style: Object.assign(Object.assign({}, popperStyles.arrow), ((_c = UNSAFE_style.arrow) !== null && _c !== void 0 ? _c : {})), "data-testid": "popover-arrow" })));
+    return React.createElement(React.Fragment, null, open && React.createElement(PopoverPortal, null, popoverContent));
+}
+function PopoverPortal({ children }) {
+    return ReactDOM.createPortal(children, document.body);
 }
 function buildModifiers(arrowElement) {
     const modifiers = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.13.2",
+  "version": "6.14.1-aidenfix--e9ec00c.0+e9ec00ce",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -489,5 +489,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "baec68accebefa70b2f1234d757473e67a713ced"
+  "gitHead": "e9ec00ce31bcd08dc7f334f2f8c7672e133ed1a2"
 }