@jobber/components 2.83.1 → 2.84.2

package/CHANGELOG.md

@@ -8,6 +8,33 @@ menu: Changelog
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.84.2](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.84.1...@jobber/components@2.84.2) (2022-06-10)
+
+**Note:** Version bump only for package @jobber/components
+
+
+
+
+
+## [2.84.1](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.84.0...@jobber/components@2.84.1) (2022-06-09)
+
+**Note:** Version bump only for package @jobber/components
+
+
+
+
+
+# [2.84.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.83.1...@jobber/components@2.84.0) (2022-06-07)
+
+
+### Features
+
+* **components:** JOB-40406 Allow PUT requests in InputFile component ([#895](https://github.com/GetJobber/atlantis/issues/895)) ([4101f44](https://github.com/GetJobber/atlantis/commit/4101f441327ecfebb55ce868dbd9bf7d3d9ec837))
+
+
+
+
+
 ## [2.83.1](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.83.0...@jobber/components@2.83.1) (2022-06-03)
 
 

package/dist/FormatFile/FormatFile.d.ts

@@ -1,13 +1,30 @@
+import React from "react";
 import { FileUpload } from "../InputFile";
 interface FormatFileProps {
     /**
      * File upload details object. (See FileUpload type.)
      */
     readonly file: FileUpload;
+    /**
+     * To display as either a file row or thumbnail
+     *
+     * @default "expanded"
+     */
+    readonly display?: "expanded" | "compact";
+    /**
+     * The base dimensions of the thumbnail
+     *
+     * @default "default"
+     */
+    readonly displaySize?: "base" | "large";
+    /**
+     * Function to execute when format file is clicked
+     */
+    onClick?(event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>): void;
     /**
      * onDelete callback - this function will be called when the delete action is triggered
      */
     onDelete?(): void;
 }
-export declare function FormatFile({ file, onDelete }: FormatFileProps): JSX.Element;
+export declare function FormatFile({ file, display, displaySize, onDelete, onClick, }: FormatFileProps): JSX.Element;
 export {};

package/dist/FormatFile/FormatFileDeleteButton.d.ts

@@ -0,0 +1,6 @@
+interface DeleteButtonProps {
+    size?: "base" | "large";
+    onDelete?: () => void;
+}
+export declare function FormatFileDeleteButton({ size, onDelete }: DeleteButtonProps): JSX.Element;
+export {};

package/dist/FormatFile/InternalThumbnail.d.ts

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

package/dist/FormatFile/index.js

@@ -8,43 +8,63 @@ var __chunk_1 = require('../chunk-b67af3cb.js');
 var React = require('react');
 var React__default = _interopDefault(React);
 var __chunk_2 = require('../chunk-17e02351.js');
-require('classnames');
+var classnames = _interopDefault(require('classnames'));
 var index = require('../Typography/index.js');
+var index$1 = require('../Text/index.js');
 require('@jobber/design');
 var index$2 = require('../Icon/index.js');
+require('../Heading/index.js');
 require('react-router-dom');
 var index$5 = require('../Button/index.js');
-var filesize = _interopDefault(require('filesize'));
-var index$1 = require('../ProgressBar/index.js');
+require('framer-motion');
+require('@jobber/hooks');
+require('../ButtonDismiss/index.js');
+require('react-dom');
+require('../Modal/index.js');
+require('../Content/index.js');
+require('react-markdown');
+require('../Emphasis/index.js');
+require('../Markdown/index.js');
+var index$7 = require('../ConfirmationModal/index.js');
+var getHumanReadableFileSize = _interopDefault(require('filesize'));
+var index$8 = require('../ProgressBar/index.js');
 
-var css = ":root {\n  --file-card--height: calc(var(--space-base) * 3.5);\n  --file-card--background-color: var(--color-white);\n  --file-card--header-background-color: var(--color-greyBlue--lighter);\n  --file-card--content-background-color: var(--color-white);\n  --file-card--border-color: var(--color-border);\n  --file-card--accent-color: var(--color-grey);\n  --file-card--base-padding: var(--space-small);\n}\n\n.iLkdDSChG7LfdxCDYHOWO {\n  display: -ms-flexbox;\n  display: flex;\n  height: calc(var(--space-base) * 3.5);\n  height: calc(var(--space-base) * 3.5);\n  height: var(--file-card--height);\n  border: var(--border-base) solid var(--color-border);\n  border: var(--border-base) solid var(--color-border);\n  border: var(--border-base) solid var(--file-card--border-color);\n  border-radius: var(--radius-base);\n  overflow: hidden;\n  background-color: var(--color-white);\n  background-color: var(--color-white);\n  background-color: var(--file-card--background-color);\n  -ms-flex-align: center;\n      align-items: center;\n  outline-color: var(--color-focus);\n}\n\n._1ymfz_xMgvlX6LtB6_4GUG {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  width: calc(var(--space-base) * 3.5);\n  width: calc(var(--space-base) * 3.5);\n  width: var(--file-card--height);\n  height: 100%;\n  box-sizing: border-box;\n  padding: 0;\n  background-color: var(--color-greyBlue--lighter);\n  background-color: var(--color-greyBlue--lighter);\n  background-color: var(--file-card--header-background-color);\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  -ms-flex-align: center;\n      align-items: center;\n  -o-object-fit: cover;\n     object-fit: cover;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n}\n\n._1ymfz_xMgvlX6LtB6_4GUG::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--color-overlay);\n  mix-blend-mode: multiply;\n}\n\n.h_QOL0uORy7gKva__GUUe {\n  margin: 0 auto;\n}\n\n._3Sb6hKDYDXwDcc69ByIdyl {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  padding: var(--space-small);\n  padding: var(--space-small);\n  padding: var(--file-card--base-padding);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._2My-AZfFXfluwQURTvc6Z9 {\n  -ms-flex-positive: 1;\n      flex-grow: 1;\n  padding: 0 var(--space-small);\n  padding: 0 var(--space-small);\n  padding: 0 var(--file-card--base-padding);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n._2My-AZfFXfluwQURTvc6Z9 p {\n  margin: 0;\n}\n\n._1Mt_GBuDbKYkP4ijp0-848 {\n  padding: 0 var(--space-small) 0 0;\n  padding: 0 var(--space-small) 0 0;\n  padding: 0 var(--file-card--base-padding) 0 0;\n}\n";
-var styles = {"formatFile":"iLkdDSChG7LfdxCDYHOWO","imageBlock":"_1ymfz_xMgvlX6LtB6_4GUG","icon":"h_QOL0uORy7gKva__GUUe","progress":"_3Sb6hKDYDXwDcc69ByIdyl","contentBlock":"_2My-AZfFXfluwQURTvc6Z9","actionBlock":"_1Mt_GBuDbKYkP4ijp0-848"};
+var css = ":root {\n  --file-card--height: calc(var(--space-base) * 3.5);\n  --file-card--background-color: var(--color-white);\n  --file-card--header-background-color: var(--color-greyBlue--lighter);\n  --file-card--content-background-color: var(--color-white);\n  --file-card--border-color: var(--color-border);\n  --file-card--accent-color: var(--color-grey);\n  --file-card--base-padding: var(--space-small);\n}\n\n._9dGq9pkZYNxwlhRwaVaWH {\n  display: grid;\n  position: relative;\n  grid-template-columns: auto -webkit-max-content;\n  grid-template-columns: auto max-content;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-gap: var(--space-small);\n  grid-gap: var(--file-card--base-padding);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-gap: var(--file-card--base-padding);\n  gap: var(--file-card--base-padding);\n  -ms-flex-align: center;\n      align-items: center;\n  padding-right: var(--space-small);\n  border: var(--border-base) solid var(--color-border);\n  border: var(--border-base) solid var(--color-border);\n  border: var(--border-base) solid var(--file-card--border-color);\n  border-radius: var(--radius-base);\n  background-color: var(--color-white);\n  background-color: var(--color-white);\n  background-color: var(--file-card--background-color);\n}\n\n._24PiUzD_Hoe3p6hD_OxjbH {\n  position: relative;\n}\n\n._26euKXXdGUFmchTL7YqSO7 {\n  display: grid;\n  grid-template-columns: -webkit-max-content auto;\n  grid-template-columns: max-content auto;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-gap: var(--space-small);\n  grid-gap: var(--file-card--base-padding);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-gap: var(--file-card--base-padding);\n  gap: var(--file-card--base-padding);\n  -ms-flex-align: center;\n      align-items: center;\n  padding: 0;\n  border: none;\n  text-align: left;\n  background-color: var(--color-transparent);\n}\n\n._2OuJNJWNnBmTTzGAUfSaM7 {\n  width: 168px;\n  height: 168px;\n}\n\n._2GSQaEqbKQHd7Tf2XqJ5i1 {\n  width: 56px;\n  height: 56px;\n}\n\n._1JreUit2_KSn_-iQ3vBhUn {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-sizing: border-box;\n  padding: 0;\n  overflow: hidden;\n  background-color: var(--color-surface--background);\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n._9dGq9pkZYNxwlhRwaVaWH ._26euKXXdGUFmchTL7YqSO7 {\n  outline: none;\n}\n\n._24PiUzD_Hoe3p6hD_OxjbH ._26euKXXdGUFmchTL7YqSO7:focus {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n._24PiUzD_Hoe3p6hD_OxjbH ._1JreUit2_KSn_-iQ3vBhUn {\n  border-radius: var(--radius-base);\n}\n\n._9dGq9pkZYNxwlhRwaVaWH ._26euKXXdGUFmchTL7YqSO7:focus::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  box-shadow: var(--shadow-focus);\n}\n\n._9dGq9pkZYNxwlhRwaVaWH ._1JreUit2_KSn_-iQ3vBhUn {\n  border-right: none;\n  border-bottom-left-radius: var(--radius-base);\n  border-top-left-radius: var(--radius-base);\n}\n\n._3_8YVeas_gdmexLUKZ3mpR {\n  cursor: pointer;\n}\n\n._15spVvfm0lqLuhAwuIuWrm ._1JreUit2_KSn_-iQ3vBhUn::after,\n._3Sb6hKDYDXwDcc69ByIdyl {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-overlay);\n  opacity: 0;\n  transition: all var(--timing-base);\n}\n\n._15spVvfm0lqLuhAwuIuWrm:hover ._1JreUit2_KSn_-iQ3vBhUn::after,\n._15spVvfm0lqLuhAwuIuWrm:focus ._1JreUit2_KSn_-iQ3vBhUn::after,\n._3Sb6hKDYDXwDcc69ByIdyl {\n  opacity: 1;\n}\n\n._3Sb6hKDYDXwDcc69ByIdyl {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: var(--space-small);\n  padding: var(--space-small);\n  padding: var(--file-card--base-padding);\n}\n\n._2My-AZfFXfluwQURTvc6Z9 {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  min-width: 0;\n}\n\n._2My-AZfFXfluwQURTvc6Z9 p {\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n._24PiUzD_Hoe3p6hD_OxjbH ._2pUMiqf0oiCus7WkVuTt57 {\n  position: absolute;\n  top: var(--space-smaller);\n  right: var(--space-smaller);\n}\n\n._2g5hRVudATuiROg0LStgTs ~ ._2pUMiqf0oiCus7WkVuTt57 {\n  visibility: hidden;\n}\n\n._2pUMiqf0oiCus7WkVuTt57[focus-within],\n._2pUMiqf0oiCus7WkVuTt57:hover,\n._2g5hRVudATuiROg0LStgTs:hover ~ ._2pUMiqf0oiCus7WkVuTt57,\n._2g5hRVudATuiROg0LStgTs:focus ~ ._2pUMiqf0oiCus7WkVuTt57 {\n  visibility: visible;\n}\n\n._2pUMiqf0oiCus7WkVuTt57[focus-within],\n._2pUMiqf0oiCus7WkVuTt57:hover,\n._2g5hRVudATuiROg0LStgTs:hover ~ ._2pUMiqf0oiCus7WkVuTt57,\n._2g5hRVudATuiROg0LStgTs:focus ~ ._2pUMiqf0oiCus7WkVuTt57 {\n  visibility: visible;\n}\n\n._2pUMiqf0oiCus7WkVuTt57:focus-within,\n._2pUMiqf0oiCus7WkVuTt57:hover,\n._2g5hRVudATuiROg0LStgTs:hover ~ ._2pUMiqf0oiCus7WkVuTt57,\n._2g5hRVudATuiROg0LStgTs:focus ~ ._2pUMiqf0oiCus7WkVuTt57 {\n  visibility: visible;\n}\n";
+var styles = {"expanded":"_9dGq9pkZYNxwlhRwaVaWH","compact":"_24PiUzD_Hoe3p6hD_OxjbH","wrapper":"_26euKXXdGUFmchTL7YqSO7","large":"_2OuJNJWNnBmTTzGAUfSaM7","base":"_2GSQaEqbKQHd7Tf2XqJ5i1","thumbnail":"_1JreUit2_KSn_-iQ3vBhUn","clickable":"_3_8YVeas_gdmexLUKZ3mpR","hoverable":"_15spVvfm0lqLuhAwuIuWrm","progress":"_3Sb6hKDYDXwDcc69ByIdyl","contentBlock":"_2My-AZfFXfluwQURTvc6Z9","deleteButton":"_2pUMiqf0oiCus7WkVuTt57","deleteable":"_2g5hRVudATuiROg0LStgTs"};
 __chunk_2.styleInject(css);
 
-function FormatFile(_a) {
-    var file = _a.file, onDelete = _a.onDelete;
-    var _b = __chunk_1.__read(React.useState(), 2), imageSource = _b[0], setImageSource = _b[1];
-    var isComplete = file.progress >= 1;
+function FormatFileDeleteButton(_a) {
+    var size = _a.size, onDelete = _a.onDelete;
+    var buttonSize = size === "base" ? "small" : "base";
+    var _b = __chunk_1.__read(React.useState(false), 2), deleteConfirmationOpen = _b[0], setDeleteConfirmationOpen = _b[1];
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(index$5.Button, { onClick: function () { return setDeleteConfirmationOpen(true); }, variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete Thumbnail", size: buttonSize }),
+        React__default.createElement(index$7.ConfirmationModal, { title: "Confirm Deletion", message: "Are you sure you want to delete this file?", confirmLabel: "Delete", variation: "destructive", open: deleteConfirmationOpen, onConfirm: function () { return onDelete === null || onDelete === void 0 ? void 0 : onDelete(); }, onRequestClose: function () { return setDeleteConfirmationOpen(false); } })));
+}
+
+var css$1 = "._15Z4SPrC7I2WxqMysdwQxX {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n\n.VMZPGfgfpCH2eH5Mv9zgO {\n  display: none;\n}\n\n.Z-gb7-3W6CcFd5uSiosLe {\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.Z-gb7-3W6CcFd5uSiosLe::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.Z-gb7-3W6CcFd5uSiosLe._3NVQrEqP9hGjbdbpOXGHQd::after {\n  width: var(--space-base);\n  height: var(--space-base);\n}\n\n.Z-gb7-3W6CcFd5uSiosLe._2AI9R5gNW3y8vFV4ev1tge::after {\n  width: var(--space-large);\n  height: var(--space-large);\n}\n\n._3VjXRD4ob2Fdq9YxmNRy2S {\n  position: absolute;\n}\n\n._3NVQrEqP9hGjbdbpOXGHQd ._3VjXRD4ob2Fdq9YxmNRy2S {\n  bottom: var(--space-smaller);\n  left: var(--space-smaller);\n  font-size: calc(var(--base-unit) * 0.625);\n}\n\n._2AI9R5gNW3y8vFV4ev1tge ._3VjXRD4ob2Fdq9YxmNRy2S {\n  bottom: var(--space-small);\n  left: var(--space-small);\n  font-size: var(--typography--fontSize-small);\n}\n";
+var styles$1 = {"image":"_15Z4SPrC7I2WxqMysdwQxX","loading":"VMZPGfgfpCH2eH5Mv9zgO","content":"Z-gb7-3W6CcFd5uSiosLe","base":"_3NVQrEqP9hGjbdbpOXGHQd","large":"_2AI9R5gNW3y8vFV4ev1tge","fileName":"_3VjXRD4ob2Fdq9YxmNRy2S"};
+__chunk_2.styleInject(css$1);
+
+function InternalThumbnail(_a) {
+    var _b;
+    var name = _a.name, _c = _a.hideName, hideName = _c === void 0 ? false : _c, size = _a.size, file = _a.file;
+    var _d = __chunk_1.__read(React.useState(), 2), imageSource = _d[0], setImageSource = _d[1];
+    var _e = __chunk_1.__read(React.useState(false), 2), imageLoaded = _e[0], setImageLoaded = _e[1];
     var iconName = getIconNameFromType(file.type);
-    var fileSize = getHumanReadableFileSize(file.size);
-    if (!imageSource && file.type.startsWith("image/") && file.src) {
+    if (!imageSource && file.type.startsWith("image/")) {
         file.src().then(function (src) { return setImageSource(src); });
     }
-    var style = imageSource ? { backgroundImage: "url(" + imageSource + ")" } : {};
-    return (React__default.createElement("div", { className: styles.formatFile },
-        React__default.createElement("div", { className: styles.imageBlock, style: style, "data-testid": "imageBlock" },
-            !imageSource && (React__default.createElement("div", { className: styles.icon },
-                React__default.createElement(index$2.Icon, { name: iconName }))),
-            !isComplete && (React__default.createElement("div", { className: styles.progress },
-                React__default.createElement(index$1.ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 })))),
-        React__default.createElement("div", { className: styles.contentBlock },
-            React__default.createElement(index.Typography, { element: "span" }, file.name),
-            React__default.createElement(index.Typography, { element: "p", size: "small", textColor: "greyBlueDark" }, fileSize)),
-        isComplete && onDelete && (React__default.createElement("div", { className: styles.actionBlock },
-            React__default.createElement(index$5.Button, { onClick: onDelete, type: "tertiary", variation: "destructive", icon: "trash", ariaLabel: "Delete" })))));
-}
-function getHumanReadableFileSize(sizeInBytes) {
-    return filesize(sizeInBytes);
+    var image = (React__default.createElement("img", { src: imageSource, onLoad: function () {
+            setImageLoaded(true);
+        }, className: classnames(styles$1.image, (_b = {}, _b[styles$1.loading] = !imageLoaded, _b)), alt: name, "data-testid": "internalThumbnailImage" }));
+    if (imageLoaded) {
+        return image;
+    }
+    return (React__default.createElement("div", { className: classnames(styles$1.content, styles$1[size]) },
+        imageSource && image,
+        React__default.createElement(index$2.Icon, { name: iconName, color: "greyBlue" }),
+        React__default.createElement("div", { className: classnames(styles$1.fileName) }, hideName && (React__default.createElement(index.Typography, { element: "span", textColor: "text" }, name)))));
 }
 function getIconNameFromType(mimeType) {
     if (mimeType.startsWith("image/"))
@@ -61,4 +81,43 @@ function getIconNameFromType(mimeType) {
     }
 }
 
+function FormatFile(_a) {
+    var _b, _c;
+    var file = _a.file, _d = _a.display, display = _d === void 0 ? "expanded" : _d, _e = _a.displaySize, displaySize = _e === void 0 ? "base" : _e, onDelete = _a.onDelete, onClick = _a.onClick;
+    var isComplete = file.progress >= 1;
+    var fileSize = getHumanReadableFileSize(file.size);
+    var wrapperClassNames = classnames(styles[display], (_b = {},
+        _b[styles[displaySize]] = display === "compact",
+        _b));
+    var DetailsContainer = isComplete && onClick ? "button" : "div";
+    var detailsClassNames = classnames(styles.wrapper, (_c = {},
+        _c[styles[displaySize]] = display === "compact",
+        _c[styles.hoverable] = isHoverable({ display: display, isComplete: isComplete, onClick: onClick, onDelete: onDelete }),
+        _c[styles.clickable] = onClick,
+        _c[styles.deleteable] = display === "compact",
+        _c));
+    var thumbnailContainerClassNames = classnames(styles.thumbnail, styles[displaySize]);
+    return (React__default.createElement("div", { className: wrapperClassNames },
+        React__default.createElement(DetailsContainer, { className: detailsClassNames, onClick: isComplete ? onClick : undefined, tabIndex: 0, "aria-busy": !isComplete },
+            React__default.createElement("div", { className: thumbnailContainerClassNames },
+                React__default.createElement(InternalThumbnail, { name: file.name, hideName: display === "compact", file: file, size: displaySize }),
+                !isComplete && (React__default.createElement("div", { className: styles.progress },
+                    React__default.createElement(index$8.ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 })))),
+            display === "expanded" && (React__default.createElement("div", { className: styles.contentBlock },
+                React__default.createElement(index$1.Text, { size: "large" }, file.name),
+                React__default.createElement(index$1.Text, { size: "small" }, fileSize)))),
+        isComplete && onDelete && (React__default.createElement("div", { className: styles.deleteButton },
+            React__default.createElement(FormatFileDeleteButton, { size: display === "expanded" ? "large" : displaySize, onDelete: onDelete })))));
+}
+function isHoverable(_a) {
+    var display = _a.display, isComplete = _a.isComplete, onClick = _a.onClick, onDelete = _a.onDelete;
+    if (display === "compact") {
+        return Boolean(isComplete && (onClick || onDelete));
+    }
+    else if (display === "expanded") {
+        return Boolean(isComplete && onClick);
+    }
+    return false;
+}
+
 exports.FormatFile = FormatFile;

package/dist/InputAvatar/index.js

@@ -18,10 +18,10 @@ var index$5 = require('../Button/index.js');
 var index$3 = require('../Avatar/index.js');
 require('color');
 require('../Content/index.js');
-var index$1 = require('../ProgressBar/index.js');
+var index$8 = require('../ProgressBar/index.js');
 require('react-dropzone');
 require('axios');
-var index$4 = require('../InputFile/index.js');
+var index$1 = require('../InputFile/index.js');
 
 var css = "._1e1D2becaB2vzZJ8QkTQFY {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._1e1D2becaB2vzZJ8QkTQFY > *:not(:last-child) {\n  margin-right: var(--space-small);\n}\n\n.TQgDlkCH4_o4LkH2hOqde {\n  position: relative;\n}\n\n.zq7uZTFFJ0aS_hIEAvVPX {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  height: 100%;\n  margin: 0 var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._3wSTh_yNalSZ5i5bnf_clw {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n._3wSTh_yNalSZ5i5bnf_clw::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: var(--radius-circle);\n  background-color: var(--color-blue--dark);\n  opacity: 0.3;\n  mix-blend-mode: multiply;\n}\n";
 var styles = {"inputAvatar":"_1e1D2becaB2vzZJ8QkTQFY","preview":"TQgDlkCH4_o4LkH2hOqde","centered":"zq7uZTFFJ0aS_hIEAvVPX","overlay":"_3wSTh_yNalSZ5i5bnf_clw"};
@@ -35,8 +35,8 @@ function InputAvatar(_a) {
             React__default.createElement(index$3.Avatar, __chunk_1.__assign({ size: "large" }, avatarProps)),
             progress < 1 && (React__default.createElement(Overlay, null,
                 React__default.createElement(Centered, null,
-                    React__default.createElement(index$1.ProgressBar, { size: "small", currentStep: progress * 100, totalSteps: 100 }))))),
-        React__default.createElement(index$4.InputFile, { variation: "button", buttonLabel: avatarProps.imageUrl ? "Change Image" : undefined, size: "small", allowedTypes: "images", getUploadParams: getUploadParams, onUploadStart: handleChange, onUploadProgress: handleUpload, onUploadComplete: handleUploadComplete }),
+                    React__default.createElement(index$8.ProgressBar, { size: "small", currentStep: progress * 100, totalSteps: 100 }))))),
+        React__default.createElement(index$1.InputFile, { variation: "button", buttonLabel: avatarProps.imageUrl ? "Change Image" : undefined, size: "small", allowedTypes: "images", getUploadParams: getUploadParams, onUploadStart: handleChange, onUploadProgress: handleUpload, onUploadComplete: handleUploadComplete }),
         avatarProps.imageUrl != undefined && progress === 1 && (React__default.createElement(index$5.Button, { label: "Remove", size: "small", type: "secondary", variation: "destructive", onClick: clearAvatar }))));
     function handleChange(newFile) {
         onChange && onChange(newFile);

package/dist/InputFile/InputFile.d.ts

@@ -37,12 +37,24 @@ export interface UploadParams {
      */
     readonly key?: string;
     /**
-     * Any extra fields to send with the upload POST.
+     * Any extra fields or headers to send with the upload.
      * If unspecified only the file will be included.
      */
     readonly fields?: {
         [field: string]: string;
     };
+    /**
+     * The HTTP method which we wish to use for the upload
+     *
+     * When the HTTP method is `"PUT"`, the `fields` will
+     * be used as headers for the request
+     *
+     * When the HTTP method is `"POST"` the `fields` are
+     * form fields
+     *
+     * @default "POST"
+     */
+    readonly httpMethod?: "POST" | "PUT";
 }
 interface InputFileProps {
     /**

package/dist/InputFile/index.js

@@ -55,37 +55,61 @@ function InputFile(_a) {
     }
     function uploadFile(file) {
         return __chunk_1.__awaiter(this, void 0, void 0, function () {
-            var _a, url, _b, key, _c, fields, fileUpload, formData;
-            return __chunk_1.__generator(this, function (_d) {
-                switch (_d.label) {
+            var _a, url, _b, key, _c, fields, _d, httpMethod, fileUpload, handleUploadProgress, handleUploadComplete, axiosConfig;
+            return __chunk_1.__generator(this, function (_e) {
+                switch (_e.label) {
                     case 0: return [4 /*yield*/, getUploadParams(file)];
                     case 1:
-                        _a = _d.sent(), url = _a.url, _b = _a.key, key = _b === void 0 ? uuid.v1() : _b, _c = _a.fields, fields = _c === void 0 ? {} : _c;
+                        _a = _e.sent(), url = _a.url, _b = _a.key, key = _b === void 0 ? uuid.v1() : _b, _c = _a.fields, fields = _c === void 0 ? {} : _c, _d = _a.httpMethod, httpMethod = _d === void 0 ? "POST" : _d;
                         fileUpload = getFileUpload(file, key);
                         onUploadStart && onUploadStart(__chunk_1.__assign({}, fileUpload));
-                        formData = new FormData();
-                        Object.entries(fields).forEach(function (_a) {
-                            var _b = __chunk_1.__read(_a, 2), field = _b[0], value = _b[1];
-                            return formData.append(field, value);
-                        });
-                        formData.append("file", file);
-                        axios
-                            .post(url, formData, {
-                            headers: { "X-Requested-With": "XMLHttpRequest" },
-                            onUploadProgress: function (progressEvent) {
-                                return onUploadProgress &&
-                                    onUploadProgress(__chunk_1.__assign(__chunk_1.__assign({}, fileUpload), { progress: progressEvent.loaded / progressEvent.total }));
-                            },
-                        })
-                            .then(function () {
-                            onUploadComplete && onUploadComplete(__chunk_1.__assign(__chunk_1.__assign({}, fileUpload), { progress: 1 }));
+                        handleUploadProgress = function (progressEvent) {
+                            onUploadProgress &&
+                                onUploadProgress(__chunk_1.__assign(__chunk_1.__assign({}, fileUpload), { progress: progressEvent.loaded / progressEvent.total }));
+                        };
+                        handleUploadComplete = function () {
+                            onUploadComplete === null || onUploadComplete === void 0 ? void 0 : onUploadComplete(__chunk_1.__assign(__chunk_1.__assign({}, fileUpload), { progress: 1 }));
+                        };
+                        axiosConfig = createAxiosConfig({
+                            url: url,
+                            httpMethod: httpMethod,
+                            fields: fields,
+                            file: file,
+                            handleUploadProgress: handleUploadProgress,
                         });
+                        axios.request(axiosConfig).then(handleUploadComplete);
                         return [2 /*return*/];
                 }
             });
         });
     }
 }
+function createAxiosConfig(_a) {
+    var url = _a.url, _b = _a.httpMethod, httpMethod = _b === void 0 ? "POST" : _b, _c = _a.fields, fields = _c === void 0 ? {} : _c, file = _a.file, handleUploadProgress = _a.handleUploadProgress;
+    var data;
+    var headers;
+    if (httpMethod === "POST") {
+        var formData_1 = new FormData();
+        Object.entries(fields).forEach(function (_a) {
+            var _b = __chunk_1.__read(_a, 2), field = _b[0], value = _b[1];
+            return formData_1.append(field, value);
+        });
+        formData_1.append("file", file);
+        data = formData_1;
+        headers = { "X-Requested-With": "XMLHttpRequest" };
+    }
+    else {
+        data = file;
+        headers = fields;
+    }
+    return {
+        method: httpMethod,
+        url: url,
+        headers: headers,
+        data: data,
+        onUploadProgress: handleUploadProgress,
+    };
+}
 function getLabels(providedButtonLabel, multiple, allowedTypes) {
     var buttonLabel = multiple ? "Upload Files" : "Upload File";
     var hintText = multiple

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "2.83.1",
+  "version": "2.84.2",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,7 +17,7 @@
     "dist/*"
   ],
   "dependencies": {
-    "@jobber/design": "^0.25.0",
+    "@jobber/design": "^0.25.1",
     "@jobber/formatters": "^0.2.0",
     "@jobber/hooks": "^1.11.0",
     "@popperjs/core": "^2.0.6",
@@ -85,5 +85,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "6cc8ee125a496fcffaea2e9514e6e58dff9ebd6f"
+  "gitHead": "2dcbd8ec263a87a9072bd519a3563e9cfc97715d"
 }