@jobber/components 4.4.7 → 4.4.9-pre.0

package/dist/FormatFile/InternalThumbnail.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
 import { FileUpload } from "../InputFile";
 interface InternalThumbnailProps {
-    readonly name?: string;
-    readonly hideName?: boolean;
+    readonly compact?: boolean;
     readonly size: "base" | "large";
     readonly file: FileUpload;
 }
-export declare function InternalThumbnail({ name, hideName, size, file, }: InternalThumbnailProps): JSX.Element;
+export declare function InternalThumbnail({ compact, size, file, }: InternalThumbnailProps): JSX.Element;
 export {};

package/dist/FormatFile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormatFile = require('../FormatFile-a23d9ccd.js');
+var FormatFile = require('../FormatFile-41867ef2.js');
 require('react');
 require('classnames');
 require('filesize');

package/dist/{FormatFile-a23d9ccd.js → FormatFile-41867ef2.js}

@@ -29,27 +29,33 @@ function FormatFileDeleteButton({ size, onDelete }) {
         React__default["default"].createElement(ConfirmationModal.ConfirmationModal, { title: "Confirm Deletion", message: `Are you sure you want to delete this file?`, confirmLabel: "Delete", variation: "destructive", open: deleteConfirmationOpen, onConfirm: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(), onRequestClose: () => setDeleteConfirmationOpen(false) })));
 }
 
-var css_248z = ".ixRsJ4LRvuA- {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n\n.I7bP1ZLIXQg- {\n  display: none;\n}\n\n.M9Y7sOk6lTc- {\n  display: -ms-flexbox;\n  display: flex;\n  width: inherit;\n  height: inherit;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.M9Y7sOk6lTc-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  border: var(--border-base);\n  border-radius: var(--radius-base);\n  background: linear-gradient(\n    270deg,\n    rgb(244, 244, 244) 38.46%,\n    rgba(244, 244, 244, 0) 100%\n  );\n}\n\n.M9Y7sOk6lTc-.psaqxO2Lu7E-::after {\n  width: var(--space-base);\n  height: var(--space-base);\n}\n\n.M9Y7sOk6lTc-.yReSfaruAh0-::after {\n  width: var(--space-large);\n  height: var(--space-large);\n}\n\n.YXN92rsh2eU- {\n  position: absolute;\n}\n\n.psaqxO2Lu7E- .YXN92rsh2eU- {\n  bottom: var(--space-smaller);\n  left: var(--space-smaller);\n  font-size: var(--typography--fontSize-smaller);\n}\n\n.yReSfaruAh0- .YXN92rsh2eU- {\n  bottom: var(--space-small);\n  left: var(--space-small);\n  font-size: var(--typography--fontSize-small);\n}\n";
-var styles = {"image":"ixRsJ4LRvuA-","loading":"I7bP1ZLIXQg-","content":"M9Y7sOk6lTc-","base":"psaqxO2Lu7E-","large":"yReSfaruAh0-","fileName":"YXN92rsh2eU-"};
+var css_248z = ".ixRsJ4LRvuA- {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n\n.I7bP1ZLIXQg- {\n  display: none;\n}\n\n.M9Y7sOk6lTc- {\n  display: grid;\n  grid-template-columns: auto;\n  grid-template-rows: auto -webkit-max-content;\n  grid-template-rows: auto max-content;\n  width: inherit;\n  height: inherit;\n  -ms-flex-align: center;\n      align-items: center;\n  justify-items: center;\n}\n\n.E4wclxY71oM-:not(.yReSfaruAh0-) {\n  -ms-flex-align: end;\n      align-items: end;\n}\n\n.YXN92rsh2eU- {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n}\n\n.psaqxO2Lu7E- .YXN92rsh2eU- {\n  padding: var(--space-smaller);\n  font-size: var(--typography--fontSize-smaller);\n}\n\n.yReSfaruAh0- .YXN92rsh2eU- {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  padding: var(--space-small);\n  font-size: var(--typography--fontSize-small);\n}\n";
+var styles = {"image":"ixRsJ4LRvuA-","loading":"I7bP1ZLIXQg-","content":"M9Y7sOk6lTc-","hasName":"E4wclxY71oM-","large":"yReSfaruAh0-","fileName":"YXN92rsh2eU-","base":"psaqxO2Lu7E-"};
 styleInject_es.styleInject(css_248z);
 
-function InternalThumbnail({ name, hideName = false, size, file, }) {
+function InternalThumbnail({ compact = false, size, file, }) {
+    const { name, type, src } = file;
     const [imageSource, setImageSource] = React.useState();
     const [imageLoaded, setImageLoaded] = React.useState(false);
-    const iconName = getIconNameFromType(file.type);
-    if (!imageSource && file.type.startsWith("image/")) {
-        file.src().then(src => setImageSource(src));
+    const iconName = getIconNameFromType(type);
+    const hasName = Boolean(name) && compact;
+    if (!imageSource && type.startsWith("image/")) {
+        src().then(url => setImageSource(url));
     }
-    const image = (React__default["default"].createElement("img", { src: imageSource, onLoad: () => {
-            setImageLoaded(true);
-        }, className: classnames__default["default"](styles.image, { [styles.loading]: !imageLoaded }), alt: name, "data-testid": "internalThumbnailImage" }));
+    const image = (React__default["default"].createElement("img", { src: imageSource, onLoad: handleImageLoad, className: classnames__default["default"](styles.image, { [styles.loading]: !imageLoaded }), alt: name, "data-testid": "internalThumbnailImage" }));
     if (imageLoaded) {
         return image;
     }
-    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles.content, styles[size]) },
+    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles.content, styles[size], {
+            [styles.hasName]: hasName,
+        }) },
         imageSource && image,
-        React__default["default"].createElement(Icon.Icon, { name: iconName, color: "greyBlue" }),
-        React__default["default"].createElement("div", { className: classnames__default["default"](styles.fileName) }, hideName && (React__default["default"].createElement(Typography.Typography, { element: "span", textColor: "text" }, name)))));
+        React__default["default"].createElement(Icon.Icon, { name: iconName, color: "greyBlue", size: size }),
+        hasName && (React__default["default"].createElement("div", { className: styles.fileName },
+            React__default["default"].createElement(Typography.Typography, { element: "span", textColor: "text", numberOfLines: 1 }, name)))));
+    function handleImageLoad() {
+        setImageLoaded(true);
+    }
 }
 function getIconNameFromType(mimeType) {
     if (mimeType.startsWith("image/"))
@@ -83,7 +89,7 @@ function FormatFile({ file, display = "expanded", displaySize = "base", onDelete
     return (React__default["default"].createElement("div", { className: wrapperClassNames },
         React__default["default"].createElement(DetailsContainer, { type: "button", className: detailsClassNames, onClick: isComplete ? onClick : undefined, tabIndex: 0, "aria-busy": !isComplete },
             React__default["default"].createElement("div", { className: thumbnailContainerClassNames },
-                React__default["default"].createElement(InternalThumbnail, { name: file.name, hideName: display === "compact", file: file, size: displaySize }),
+                React__default["default"].createElement(InternalThumbnail, { key: file.key, compact: display === "compact", file: file, size: displaySize }),
                 !isComplete && (React__default["default"].createElement("div", { className: styles$1.progress },
                     React__default["default"].createElement(ProgressBar.ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 })))),
             display === "expanded" && (React__default["default"].createElement("div", { className: styles$1.contentBlock },

package/dist/Gallery/index.js

@@ -6,7 +6,7 @@ var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var LightBox = require('../LightBox-3753b459.js');
-var FormatFile = require('../FormatFile-a23d9ccd.js');
+var FormatFile = require('../FormatFile-41867ef2.js');
 var Button = require('../Button-e2452625.js');
 require('framer-motion');
 require('react-dom');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.4.7",
+  "version": "4.4.9-pre.0+251cc8f0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,9 +17,9 @@
     "dist/*"
   ],
   "dependencies": {
-    "@jobber/design": "^0.31.2",
-    "@jobber/formatters": "*",
-    "@jobber/hooks": "*",
+    "@jobber/design": "^0.31.3-pre.1+251cc8f0",
+    "@jobber/formatters": "^0.2.3-pre.62+251cc8f0",
+    "@jobber/hooks": "^2.0.3-pre.35+251cc8f0",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
     "@tanstack/react-table": "8.5.13",
@@ -81,5 +81,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "a802e0ec59a1299d377881262b3f9e3e7ab44ce0"
+  "gitHead": "251cc8f0f8e59887d07eb55675be7bb507a3e412"
 }