@jobber/components 4.71.8 → 4.72.0

package/dist/InputAvatar/index.js

@@ -6,7 +6,7 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Avatar = require('../Avatar-76a799fa.js');
-var InputFile = require('../InputFile-271f6d31.js');
+var InputFile = require('../InputFile-8767b7fd.js');
 var ProgressBar = require('../ProgressBar-b68edc8f.js');
 var Button = require('../Button-b73a5e01.js');
 require('classnames');
@@ -16,8 +16,11 @@ require('@jobber/design');
 require('react-dropzone');
 require('axios');
 require('uuid');
-require('../Content-2ca1ffe1.js');
+require('../InputValidation-a7a737f9.js');
+require('framer-motion');
+require('../Text-259af966.js');
 require('../Typography-c45bf216.js');
+require('../Content-2ca1ffe1.js');
 require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/InputFile/InputFile.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { FileError } from "react-dropzone";
 export interface FileUpload {
     /**
      * File Identifier
@@ -113,8 +114,16 @@ interface InputFileProps {
      * Upload event handler. Triggered on upload completion.
      */
     onUploadComplete?(file: FileUpload): void;
+    /**
+     *  Upload event handler. Triggered on upload error.
+     */
+    onUploadError?(error: Error): void;
+    /**
+     * Pass a custom validator function that will be called when a file is dropped.
+     */
+    readonly validator?: <T extends File>(file: T) => FileError | FileError[] | null;
 }
-export declare function InputFile({ variation, size, buttonLabel: providedButtonLabel, allowMultiple, allowedTypes, getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, }: InputFileProps): JSX.Element;
+export declare function InputFile({ variation, size, buttonLabel: providedButtonLabel, allowMultiple, allowedTypes, getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, validator, }: InputFileProps): JSX.Element;
 /**
  * Upsert a given `FileUpload` into an array of `FileUpload`s.
  * `key` is used to uniquely identify files.

package/dist/InputFile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputFile = require('../InputFile-271f6d31.js');
+var InputFile = require('../InputFile-8767b7fd.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('classnames');
@@ -10,11 +10,14 @@ require('react-dropzone');
 require('axios');
 require('uuid');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Button-b73a5e01.js');
-require('react-router-dom');
+require('../InputValidation-a7a737f9.js');
+require('framer-motion');
+require('../Text-259af966.js');
+require('../Typography-c45bf216.js');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-c45bf216.js');
+require('../Button-b73a5e01.js');
+require('react-router-dom');
 require('../Content-2ca1ffe1.js');
 
 

package/dist/{InputFile-271f6d31.js → InputFile-8767b7fd.js}

@@ -7,6 +7,7 @@ var reactDropzone = require('react-dropzone');
 var axios = require('axios');
 var uuid = require('uuid');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var InputValidation = require('./InputValidation-a7a737f9.js');
 var Button = require('./Button-b73a5e01.js');
 var Content = require('./Content-2ca1ffe1.js');
 var Typography = require('./Typography-c45bf216.js');
@@ -17,14 +18,15 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 
-var css_248z = ".grljXfTWj84- {\n  font-size: 0;\n  line-height: 0;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: pointer;\n}\n\n.grljXfTWj84-:focus,\n.grljXfTWj84-:focus-within {\n  border-color: rgb(147, 161, 169);\n  border-color: var(--color-focus);\n  outline: none;\n}\n\n.WHhHWgaoXk4- {\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  border: rgb(217, 223, 225) dashed calc(16px / 8);\n  border: var(--color-border) dashed var(--border-thick);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  text-align: center;\n}\n\n.WHhHWgaoXk4-.n1h-T2metRA- {\n  border-color: rgb(147, 161, 169);\n  border-color: var(--color-focus);\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n";
-var styles = {"dropZoneBase":"grljXfTWj84-","dropZone":"WHhHWgaoXk4-","active":"n1h-T2metRA-"};
+var css_248z = ".grljXfTWj84- {\n  font-size: 0;\n  line-height: 0;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: pointer;\n}\n\n.grljXfTWj84-:focus,\n.grljXfTWj84-:focus-within {\n  border-color: rgb(147, 161, 169);\n  border-color: var(--color-focus);\n  outline: none;\n}\n\n.WHhHWgaoXk4- {\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  border: rgb(217, 223, 225) dashed calc(16px / 8);\n  border: var(--color-border) dashed var(--border-thick);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  text-align: center;\n}\n\n.WHhHWgaoXk4-.n1h-T2metRA- {\n  border-color: rgb(147, 161, 169);\n  border-color: var(--color-focus);\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n.WHhHWgaoXk4-.MRRclAp51-w- {\n  border-color: rgb(201, 66, 33);\n  border-color: var(--color-critical);\n}\n\n.TIbSRNvDK10- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n}\n";
+var styles = {"dropZoneBase":"grljXfTWj84-","dropZone":"WHhHWgaoXk4-","active":"n1h-T2metRA-","error":"MRRclAp51-w-","validationErrors":"TIbSRNvDK10-"};
 styleInject_es.styleInject(css_248z);
 
-function InputFile({ variation = "dropzone", size = "base", buttonLabel: providedButtonLabel, allowMultiple = false, allowedTypes = "all", getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, }) {
+function InputFile({ variation = "dropzone", size = "base", buttonLabel: providedButtonLabel, allowMultiple = false, allowedTypes = "all", getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, validator, }) {
     const options = {
         multiple: allowMultiple,
         onDrop: React.useCallback(handleDrop, [uploadFile]),
+        validator: validator && React.useCallback(validator, []),
     };
     if (allowedTypes === "images") {
         options.accept = "image/*";
@@ -35,18 +37,26 @@ function InputFile({ variation = "dropzone", size = "base", buttonLabel: provide
     else if (Array.isArray(allowedTypes)) {
         options.accept = allowedTypes.join(",");
     }
-    const { getRootProps, getInputProps, isDragActive } = reactDropzone.useDropzone(options);
+    const { getRootProps, getInputProps, isDragActive, fileRejections } = reactDropzone.useDropzone(options);
+    const validationErrors = fileRejections === null || fileRejections === void 0 ? void 0 : fileRejections.map(({ file, errors }) => {
+        return errors.map(error => {
+            return (React__default["default"].createElement(InputValidation.InputValidation, { message: `${file.name} ${error.message}`, key: `${file.name}${error.code}` }));
+        });
+    });
     const { buttonLabel, hintText } = getLabels(providedButtonLabel, allowMultiple, allowedTypes);
     const dropZone = classnames__default["default"](styles.dropZoneBase, {
         [styles.dropZone]: variation === "dropzone",
         [styles.active]: isDragActive,
+        [styles.error]: (fileRejections === null || fileRejections === void 0 ? void 0 : fileRejections.length) > 0,
     });
-    return (React__default["default"].createElement("div", Object.assign({}, getRootProps({ className: dropZone }), { tabIndex: variation === "button" ? -1 : 0 }),
-        React__default["default"].createElement("input", Object.assign({}, getInputProps())),
-        variation === "dropzone" && (React__default["default"].createElement(Content.Content, { spacing: "small" },
-            React__default["default"].createElement(Button.Button, { label: buttonLabel, size: "small", type: "secondary" }),
-            size === "base" && (React__default["default"].createElement(Typography.Typography, { size: "small", textColor: "textSecondary" }, hintText)))),
-        variation === "button" && (React__default["default"].createElement(Button.Button, { label: buttonLabel, size: size, type: "secondary", fullWidth: true }))));
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", Object.assign({}, getRootProps({ className: dropZone }), { tabIndex: variation === "button" ? -1 : 0 }),
+            React__default["default"].createElement("input", Object.assign({}, getInputProps())),
+            variation === "dropzone" && (React__default["default"].createElement(Content.Content, { spacing: "small" },
+                React__default["default"].createElement(Button.Button, { label: buttonLabel, size: "small", type: "secondary" }),
+                size === "base" && (React__default["default"].createElement(Typography.Typography, { size: "small", textColor: "textSecondary" }, hintText)))),
+            variation === "button" && (React__default["default"].createElement(Button.Button, { label: buttonLabel, size: size, type: "secondary", fullWidth: true }))),
+        (fileRejections === null || fileRejections === void 0 ? void 0 : fileRejections.length) > 0 && (React__default["default"].createElement("div", { className: styles.validationErrors }, validationErrors))));
     function handleDrop(acceptedFiles) {
         acceptedFiles.forEach(file => {
             uploadFile(file);
@@ -54,7 +64,15 @@ function InputFile({ variation = "dropzone", size = "base", buttonLabel: provide
     }
     function uploadFile(file) {
         return tslib_es6.__awaiter(this, void 0, void 0, function* () {
-            const { url, key = uuid.v1(), fields = {}, httpMethod = "POST", } = yield getUploadParams(file);
+            let params;
+            try {
+                params = yield getUploadParams(file);
+            }
+            catch (_a) {
+                onUploadError && onUploadError(new Error("Failed to get upload params"));
+                return;
+            }
+            const { url, key = uuid.v1(), fields = {}, httpMethod = "POST" } = params;
             const fileUpload = getFileUpload(file, key, url);
             onUploadStart && onUploadStart(Object.assign({}, fileUpload));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -72,7 +90,12 @@ function InputFile({ variation = "dropzone", size = "base", buttonLabel: provide
                 file,
                 handleUploadProgress,
             });
-            axios__default["default"].request(axiosConfig).then(handleUploadComplete);
+            axios__default["default"]
+                .request(axiosConfig)
+                .then(handleUploadComplete)
+                .catch(() => {
+                onUploadError && onUploadError(new Error("Failed to upload file"));
+            });
         });
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.71.8",
+  "version": "4.72.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -83,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "0c486c394963e801f8fac71487ae9e3f7d788370"
+  "gitHead": "58a975b16f769405c26ebad6b5b8d8e699edbd04"
 }