@hitachivantara/uikit-react-core 2.23.2

package/dist/modern/FileUploader/DropZone/DropZone.js

@@ -0,0 +1,249 @@
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { useRef, useState } from "react";
+import PropTypes from "prop-types";
+import uniqueId from "lodash/uniqueId";
+import clsx from "clsx";
+import accept from "attr-accept";
+import { withStyles } from "@material-ui/core";
+import { Doc } from "@hitachivantara/uikit-react-icons";
+import { isKeypress, KeyboardCodes } from "../../utils";
+import HvTypography from "../../Typography";
+import { convertUnits } from "../utils";
+import { setId } from "../..";
+import withId from "../../withId";
+import styles from "./styles";
+
+const DropZone = ({
+  id,
+  classes,
+  labels,
+  multiple = true,
+  disabled = false,
+  acceptedFiles,
+  maxFileSize,
+  onFilesAdded
+}) => {
+  const [dragState, setDrag] = useState(false);
+  const inputRef = useRef();
+
+  const leaveDropArea = () => {
+    setDrag(false);
+  };
+
+  const enterDropArea = () => {
+    setDrag(true);
+  };
+
+  const onChangeHandler = evt => {
+    const filesToProcess = Object.keys(evt).map(e => evt[e]);
+    const newFiles = [];
+    filesToProcess.forEach(file => {
+      const newFile = file;
+      const isSizeAllowed = file.size <= maxFileSize;
+      const isFileAccepted = !acceptedFiles.length || acceptedFiles.indexOf(file.type.split("/")[1]) > -1 || acceptedFiles.some(acceptExtension => accept({
+        name: file.name,
+        type: file.type
+      }, acceptExtension));
+
+      if (!isFileAccepted) {
+        newFile.errorMessage = labels.fileTypeError;
+        newFile.status = "fail";
+      } else if (!isSizeAllowed) {
+        newFile.errorMessage = labels.fileSizeError;
+        newFile.status = "fail";
+      }
+
+      newFile.id = uniqueId("uploaded-file-data-");
+      newFiles.push(newFile);
+    });
+    onFilesAdded === null || onFilesAdded === void 0 ? void 0 : onFilesAdded(newFiles);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: classes.dropZoneLabelsGroup,
+    "aria-label": "File Dropzone"
+  }, /*#__PURE__*/React.createElement(HvTypography, {
+    variant: "labelText",
+    component: "label",
+    id: setId(id, "input-file-label"),
+    htmlFor: setId(id, "input-file")
+  }, labels.dropzone), /*#__PURE__*/React.createElement(HvTypography, {
+    variant: "sText"
+  }, `${labels.sizeWarning} ${convertUnits(maxFileSize)}`), labels.acceptedFilesCaption && /*#__PURE__*/React.createElement(HvTypography, {
+    variant: "sText"
+  }, labels.acceptedFilesCaption), !labels.acceptedFilesCaption && acceptedFiles.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HvTypography, {
+    variant: "labelText"
+  }, labels.acceptedFiles), /*#__PURE__*/React.createElement(HvTypography, {
+    variant: "sText"
+  }, acceptedFiles.join(", ")))), /*#__PURE__*/React.createElement("div", {
+    id: setId(id, "button"),
+    className: clsx(classes.dropZoneContainer, dragState && classes.dragAction, disabled && classes.dropZoneContainerDisabled),
+    role: "button",
+    tabIndex: 0,
+    onDragEnter: event => {
+      if (!disabled) {
+        enterDropArea();
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    },
+    onDragLeave: leaveDropArea,
+    onDropCapture: leaveDropArea,
+    onDragOver: event => {
+      if (!disabled) {
+        enterDropArea();
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    },
+    onDrop: event => {
+      if (!disabled) {
+        const {
+          files
+        } = event.dataTransfer;
+
+        if (multiple === true || files.length === 1) {
+          event.stopPropagation();
+          event.preventDefault();
+          onChangeHandler(files);
+        }
+      }
+    },
+    onKeyDown: e => {
+      if (isKeypress(e, KeyboardCodes.Enter) || isKeypress(e, 32)) {
+        inputRef.current.click();
+      }
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    id: setId(id, "input-file"),
+    tabIndex: -1,
+    className: classes.inputArea,
+    type: "file",
+    multiple: multiple,
+    disabled: disabled,
+    title: !disabled ? `${labels.drag}\xa0${labels.selectFiles}` : "",
+    onClick: () => {
+      inputRef.current.value = null;
+    },
+    onChange: () => {
+      if (!disabled) {
+        onChangeHandler(inputRef.current.files);
+      }
+    },
+    ref: inputRef,
+    accept: acceptedFiles.join(",")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classes.dropArea
+  }, dragState ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: classes.dropZoneAreaLabels
+  }, /*#__PURE__*/React.createElement(HvTypography, {
+    className: classes.dragText
+  }, labels.dropFiles))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Doc, {
+    iconSize: "M",
+    className: classes.dropZoneAreaIcon,
+    color: disabled ? "atmo6" : "acce1"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classes.dropZoneAreaLabels
+  }, /*#__PURE__*/React.createElement(HvTypography, {
+    className: classes.dragText
+  }, labels.drag, /*#__PURE__*/React.createElement("span", {
+    className: classes.selectFilesText
+  }, `\xa0${labels.selectFiles}`)))))));
+};
+
+process.env.NODE_ENV !== "production" ? DropZone.propTypes = {
+  /**
+   * Id to be applied to the root node.
+   */
+  id: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied to the Switch Component.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the container element.
+     */
+    dropZoneContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the labels group.
+     */
+    dropZoneLabelsGroup: PropTypes.string,
+
+    /**
+     * Style applied when dragging.
+     */
+    dragAction: PropTypes.string,
+
+    /**
+     * Style applied when the component is disabled.
+     */
+    dropZoneContainerDisabled: PropTypes.string,
+
+    /**
+     * Style applied to the input area.
+     */
+    inputArea: PropTypes.string,
+
+    /**
+     * Style applied to the drop area.
+     */
+    dropArea: PropTypes.string,
+
+    /**
+     * Style applied to the labels area.
+     */
+    dropZoneAreaLabels: PropTypes.string,
+
+    /**
+     * Style applied to the icon area.
+     */
+    dropZoneAreaIcon: PropTypes.string,
+
+    /**
+     * Style applied to the typography when dragging.
+     */
+    dragText: PropTypes.string,
+
+    /**
+     * Style applied to the selected files.
+     */
+    selectFilesText: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Labels to present in Fileuploader.
+   */
+  labels: PropTypes.instanceOf(Object).isRequired,
+
+  /**
+   * Whether the Dropzone should accept multiple files at once.
+   */
+  multiple: PropTypes.bool,
+
+  /**
+   * If the input is disabled or not
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Files extensions accepted for upload.
+   */
+  acceptedFiles: PropTypes.arrayOf(PropTypes.string).isRequired,
+
+  /**
+   * Max upload size
+   * */
+  maxFileSize: PropTypes.number.isRequired,
+
+  /**
+   * Function responsible for processing files added to the drop zone.
+   */
+  onFilesAdded: PropTypes.func
+} : void 0;
+export default withStyles(styles, {
+  name: "HvFileUploaderDropZone"
+})(withId(DropZone));
+//# sourceMappingURL=DropZone.js.map

package/dist/modern/FileUploader/DropZone/DropZone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropZone.js","names":["React","useRef","useState","PropTypes","uniqueId","clsx","accept","withStyles","Doc","isKeypress","KeyboardCodes","HvTypography","convertUnits","setId","withId","styles","DropZone","id","classes","labels","multiple","disabled","acceptedFiles","maxFileSize","onFilesAdded","dragState","setDrag","inputRef","leaveDropArea","enterDropArea","onChangeHandler","evt","filesToProcess","Object","keys","map","e","newFiles","forEach","file","newFile","isSizeAllowed","size","isFileAccepted","length","indexOf","type","split","some","acceptExtension","name","errorMessage","fileTypeError","status","fileSizeError","push","dropZoneLabelsGroup","dropzone","sizeWarning","acceptedFilesCaption","join","dropZoneContainer","dragAction","dropZoneContainerDisabled","event","stopPropagation","preventDefault","files","dataTransfer","Enter","current","click","inputArea","drag","selectFiles","value","dropArea","dropZoneAreaLabels","dragText","dropFiles","dropZoneAreaIcon","selectFilesText","propTypes","string","shape","isRequired","instanceOf","bool","arrayOf","number","func"],"sources":["../../../../src/FileUploader/DropZone/DropZone.js"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport uniqueId from \"lodash/uniqueId\";\nimport clsx from \"clsx\";\nimport accept from \"attr-accept\";\nimport { withStyles } from \"@material-ui/core\";\nimport { Doc } from \"@hitachivantara/uikit-react-icons\";\nimport { isKeypress, KeyboardCodes } from \"../../utils\";\nimport HvTypography from \"../../Typography\";\nimport { convertUnits } from \"../utils\";\nimport { setId } from \"../..\";\nimport withId from \"../../withId\";\nimport styles from \"./styles\";\n\nconst DropZone = ({\n  id,\n  classes,\n  labels,\n  multiple = true,\n  disabled = false,\n  acceptedFiles,\n  maxFileSize,\n  onFilesAdded,\n}) => {\n  const [dragState, setDrag] = useState(false);\n  const inputRef = useRef();\n\n  const leaveDropArea = () => {\n    setDrag(false);\n  };\n\n  const enterDropArea = () => {\n    setDrag(true);\n  };\n\n  const onChangeHandler = (evt) => {\n    const filesToProcess = Object.keys(evt).map((e) => evt[e]);\n\n    const newFiles = [];\n\n    filesToProcess.forEach((file) => {\n      const newFile = file;\n\n      const isSizeAllowed = file.size <= maxFileSize;\n      const isFileAccepted =\n        !acceptedFiles.length ||\n        acceptedFiles.indexOf(file.type.split(\"/\")[1]) > -1 ||\n        acceptedFiles.some((acceptExtension) =>\n          accept({ name: file.name, type: file.type }, acceptExtension)\n        );\n\n      if (!isFileAccepted) {\n        newFile.errorMessage = labels.fileTypeError;\n        newFile.status = \"fail\";\n      } else if (!isSizeAllowed) {\n        newFile.errorMessage = labels.fileSizeError;\n        newFile.status = \"fail\";\n      }\n\n      newFile.id = uniqueId(\"uploaded-file-data-\");\n      newFiles.push(newFile);\n    });\n\n    onFilesAdded?.(newFiles);\n  };\n\n  return (\n    <>\n      <div id={id} className={classes.dropZoneLabelsGroup} aria-label=\"File Dropzone\">\n        <HvTypography\n          variant=\"labelText\"\n          component=\"label\"\n          id={setId(id, \"input-file-label\")}\n          htmlFor={setId(id, \"input-file\")}\n        >\n          {labels.dropzone}\n        </HvTypography>\n\n        <HvTypography variant=\"sText\">\n          {`${labels.sizeWarning} ${convertUnits(maxFileSize)}`}\n        </HvTypography>\n        {labels.acceptedFilesCaption && (\n          <HvTypography variant=\"sText\">{labels.acceptedFilesCaption}</HvTypography>\n        )}\n        {!labels.acceptedFilesCaption && acceptedFiles.length > 0 && (\n          <>\n            <HvTypography variant=\"labelText\">{labels.acceptedFiles}</HvTypography>\n            <HvTypography variant=\"sText\">{acceptedFiles.join(\", \")}</HvTypography>\n          </>\n        )}\n      </div>\n\n      <div\n        id={setId(id, \"button\")}\n        className={clsx(classes.dropZoneContainer, {\n          [classes.dragAction]: dragState,\n          [classes.dropZoneContainerDisabled]: disabled,\n        })}\n        role=\"button\"\n        tabIndex={0}\n        onDragEnter={(event) => {\n          if (!disabled) {\n            enterDropArea();\n            event.stopPropagation();\n            event.preventDefault();\n          }\n        }}\n        onDragLeave={leaveDropArea}\n        onDropCapture={leaveDropArea}\n        onDragOver={(event) => {\n          if (!disabled) {\n            enterDropArea();\n            event.stopPropagation();\n            event.preventDefault();\n          }\n        }}\n        onDrop={(event) => {\n          if (!disabled) {\n            const { files } = event.dataTransfer;\n            if (multiple === true || files.length === 1) {\n              event.stopPropagation();\n              event.preventDefault();\n              onChangeHandler(files);\n            }\n          }\n        }}\n        onKeyDown={(e) => {\n          if (isKeypress(e, KeyboardCodes.Enter) || isKeypress(e, 32)) {\n            inputRef.current.click();\n          }\n        }}\n      >\n        <input\n          id={setId(id, \"input-file\")}\n          tabIndex={-1}\n          className={classes.inputArea}\n          type=\"file\"\n          multiple={multiple}\n          disabled={disabled}\n          title={!disabled ? `${labels.drag}\\xa0${labels.selectFiles}` : \"\"}\n          onClick={() => {\n            inputRef.current.value = null;\n          }}\n          onChange={() => {\n            if (!disabled) {\n              onChangeHandler(inputRef.current.files);\n            }\n          }}\n          ref={inputRef}\n          accept={acceptedFiles.join(\",\")}\n        />\n\n        <div className={classes.dropArea}>\n          {dragState ? (\n            <>\n              <div className={classes.dropZoneAreaLabels}>\n                <HvTypography className={classes.dragText}>{labels.dropFiles}</HvTypography>\n              </div>\n            </>\n          ) : (\n            <>\n              <Doc\n                iconSize=\"M\"\n                className={classes.dropZoneAreaIcon}\n                color={disabled ? \"atmo6\" : \"acce1\"}\n              />\n              <div className={classes.dropZoneAreaLabels}>\n                <HvTypography className={classes.dragText}>\n                  {labels.drag}\n                  <span className={classes.selectFilesText}>{`\\xa0${labels.selectFiles}`}</span>\n                </HvTypography>\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n    </>\n  );\n};\n\nDropZone.propTypes = {\n  /**\n   * Id to be applied to the root node.\n   */\n  id: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied to the Switch Component.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the container element.\n     */\n    dropZoneContainer: PropTypes.string,\n    /**\n     * Styles applied to the labels group.\n     */\n    dropZoneLabelsGroup: PropTypes.string,\n    /**\n     * Style applied when dragging.\n     */\n    dragAction: PropTypes.string,\n    /**\n     * Style applied when the component is disabled.\n     */\n    dropZoneContainerDisabled: PropTypes.string,\n    /**\n     * Style applied to the input area.\n     */\n    inputArea: PropTypes.string,\n    /**\n     * Style applied to the drop area.\n     */\n    dropArea: PropTypes.string,\n    /**\n     * Style applied to the labels area.\n     */\n    dropZoneAreaLabels: PropTypes.string,\n    /**\n     * Style applied to the icon area.\n     */\n    dropZoneAreaIcon: PropTypes.string,\n    /**\n     * Style applied to the typography when dragging.\n     */\n    dragText: PropTypes.string,\n    /**\n     * Style applied to the selected files.\n     */\n    selectFilesText: PropTypes.string,\n  }).isRequired,\n  /**\n   * Labels to present in Fileuploader.\n   */\n  labels: PropTypes.instanceOf(Object).isRequired,\n  /**\n   * Whether the Dropzone should accept multiple files at once.\n   */\n  multiple: PropTypes.bool,\n  /**\n   * If the input is disabled or not\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Files extensions accepted for upload.\n   */\n  acceptedFiles: PropTypes.arrayOf(PropTypes.string).isRequired,\n  /**\n   * Max upload size\n   * */\n  maxFileSize: PropTypes.number.isRequired,\n  /**\n   * Function responsible for processing files added to the drop zone.\n   */\n  onFilesAdded: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvFileUploaderDropZone\" })(withId(DropZone));\n"],"mappings":";AAAA,OAAOA,KAAP,IAAgBC,MAAhB,EAAwBC,QAAxB,QAAwC,OAAxC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,QAAP,MAAqB,iBAArB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AACA,OAAOC,MAAP,MAAmB,aAAnB;AACA,SAASC,UAAT,QAA2B,mBAA3B;AACA,SAASC,GAAT,QAAoB,mCAApB;AACA,SAASC,UAAT,EAAqBC,aAArB,QAA0C,aAA1C;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,SAASC,YAAT,QAA6B,UAA7B;AACA,SAASC,KAAT,QAAsB,OAAtB;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,OAAOC,MAAP,MAAmB,UAAnB;;AAEA,MAAMC,QAAQ,GAAG,CAAC;EAChBC,EADgB;EAEhBC,OAFgB;EAGhBC,MAHgB;EAIhBC,QAAQ,GAAG,IAJK;EAKhBC,QAAQ,GAAG,KALK;EAMhBC,aANgB;EAOhBC,WAPgB;EAQhBC;AARgB,CAAD,KASX;EACJ,MAAM,CAACC,SAAD,EAAYC,OAAZ,IAAuBxB,QAAQ,CAAC,KAAD,CAArC;EACA,MAAMyB,QAAQ,GAAG1B,MAAM,EAAvB;;EAEA,MAAM2B,aAAa,GAAG,MAAM;IAC1BF,OAAO,CAAC,KAAD,CAAP;EACD,CAFD;;EAIA,MAAMG,aAAa,GAAG,MAAM;IAC1BH,OAAO,CAAC,IAAD,CAAP;EACD,CAFD;;EAIA,MAAMI,eAAe,GAAIC,GAAD,IAAS;IAC/B,MAAMC,cAAc,GAAGC,MAAM,CAACC,IAAP,CAAYH,GAAZ,EAAiBI,GAAjB,CAAsBC,CAAD,IAAOL,GAAG,CAACK,CAAD,CAA/B,CAAvB;IAEA,MAAMC,QAAQ,GAAG,EAAjB;IAEAL,cAAc,CAACM,OAAf,CAAwBC,IAAD,IAAU;MAC/B,MAAMC,OAAO,GAAGD,IAAhB;MAEA,MAAME,aAAa,GAAGF,IAAI,CAACG,IAAL,IAAanB,WAAnC;MACA,MAAMoB,cAAc,GAClB,CAACrB,aAAa,CAACsB,MAAf,IACAtB,aAAa,CAACuB,OAAd,CAAsBN,IAAI,CAACO,IAAL,CAAUC,KAAV,CAAgB,GAAhB,EAAqB,CAArB,CAAtB,IAAiD,CAAC,CADlD,IAEAzB,aAAa,CAAC0B,IAAd,CAAoBC,eAAD,IACjB3C,MAAM,CAAC;QAAE4C,IAAI,EAAEX,IAAI,CAACW,IAAb;QAAmBJ,IAAI,EAAEP,IAAI,CAACO;MAA9B,CAAD,EAAuCG,eAAvC,CADR,CAHF;;MAOA,IAAI,CAACN,cAAL,EAAqB;QACnBH,OAAO,CAACW,YAAR,GAAuBhC,MAAM,CAACiC,aAA9B;QACAZ,OAAO,CAACa,MAAR,GAAiB,MAAjB;MACD,CAHD,MAGO,IAAI,CAACZ,aAAL,EAAoB;QACzBD,OAAO,CAACW,YAAR,GAAuBhC,MAAM,CAACmC,aAA9B;QACAd,OAAO,CAACa,MAAR,GAAiB,MAAjB;MACD;;MAEDb,OAAO,CAACvB,EAAR,GAAab,QAAQ,CAAC,qBAAD,CAArB;MACAiC,QAAQ,CAACkB,IAAT,CAAcf,OAAd;IACD,CArBD;IAuBAhB,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY,CAAGa,QAAH,CAAZ;EACD,CA7BD;;EA+BA,oBACE,uDACE;IAAK,EAAE,EAAEpB,EAAT;IAAa,SAAS,EAAEC,OAAO,CAACsC,mBAAhC;IAAqD,cAAW;EAAhE,gBACE,oBAAC,YAAD;IACE,OAAO,EAAC,WADV;IAEE,SAAS,EAAC,OAFZ;IAGE,EAAE,EAAE3C,KAAK,CAACI,EAAD,EAAK,kBAAL,CAHX;IAIE,OAAO,EAAEJ,KAAK,CAACI,EAAD,EAAK,YAAL;EAJhB,GAMGE,MAAM,CAACsC,QANV,CADF,eAUE,oBAAC,YAAD;IAAc,OAAO,EAAC;EAAtB,GACI,GAAEtC,MAAM,CAACuC,WAAY,IAAG9C,YAAY,CAACW,WAAD,CAAc,EADtD,CAVF,EAaGJ,MAAM,CAACwC,oBAAP,iBACC,oBAAC,YAAD;IAAc,OAAO,EAAC;EAAtB,GAA+BxC,MAAM,CAACwC,oBAAtC,CAdJ,EAgBG,CAACxC,MAAM,CAACwC,oBAAR,IAAgCrC,aAAa,CAACsB,MAAd,GAAuB,CAAvD,iBACC,uDACE,oBAAC,YAAD;IAAc,OAAO,EAAC;EAAtB,GAAmCzB,MAAM,CAACG,aAA1C,CADF,eAEE,oBAAC,YAAD;IAAc,OAAO,EAAC;EAAtB,GAA+BA,aAAa,CAACsC,IAAd,CAAmB,IAAnB,CAA/B,CAFF,CAjBJ,CADF,eAyBE;IACE,EAAE,EAAE/C,KAAK,CAACI,EAAD,EAAK,QAAL,CADX;IAEE,SAAS,EAAEZ,IAAI,CAACa,OAAO,CAAC2C,iBAAT,EACSpC,SADT,IACZP,OAAO,CAAC4C,UADI,EAEwBzC,QAFxB,IAEZH,OAAO,CAAC6C,yBAFI,CAFjB;IAME,IAAI,EAAC,QANP;IAOE,QAAQ,EAAE,CAPZ;IAQE,WAAW,EAAGC,KAAD,IAAW;MACtB,IAAI,CAAC3C,QAAL,EAAe;QACbQ,aAAa;QACbmC,KAAK,CAACC,eAAN;QACAD,KAAK,CAACE,cAAN;MACD;IACF,CAdH;IAeE,WAAW,EAAEtC,aAff;IAgBE,aAAa,EAAEA,aAhBjB;IAiBE,UAAU,EAAGoC,KAAD,IAAW;MACrB,IAAI,CAAC3C,QAAL,EAAe;QACbQ,aAAa;QACbmC,KAAK,CAACC,eAAN;QACAD,KAAK,CAACE,cAAN;MACD;IACF,CAvBH;IAwBE,MAAM,EAAGF,KAAD,IAAW;MACjB,IAAI,CAAC3C,QAAL,EAAe;QACb,MAAM;UAAE8C;QAAF,IAAYH,KAAK,CAACI,YAAxB;;QACA,IAAIhD,QAAQ,KAAK,IAAb,IAAqB+C,KAAK,CAACvB,MAAN,KAAiB,CAA1C,EAA6C;UAC3CoB,KAAK,CAACC,eAAN;UACAD,KAAK,CAACE,cAAN;UACApC,eAAe,CAACqC,KAAD,CAAf;QACD;MACF;IACF,CAjCH;IAkCE,SAAS,EAAG/B,CAAD,IAAO;MAChB,IAAI3B,UAAU,CAAC2B,CAAD,EAAI1B,aAAa,CAAC2D,KAAlB,CAAV,IAAsC5D,UAAU,CAAC2B,CAAD,EAAI,EAAJ,CAApD,EAA6D;QAC3DT,QAAQ,CAAC2C,OAAT,CAAiBC,KAAjB;MACD;IACF;EAtCH,gBAwCE;IACE,EAAE,EAAE1D,KAAK,CAACI,EAAD,EAAK,YAAL,CADX;IAEE,QAAQ,EAAE,CAAC,CAFb;IAGE,SAAS,EAAEC,OAAO,CAACsD,SAHrB;IAIE,IAAI,EAAC,MAJP;IAKE,QAAQ,EAAEpD,QALZ;IAME,QAAQ,EAAEC,QANZ;IAOE,KAAK,EAAE,CAACA,QAAD,GAAa,GAAEF,MAAM,CAACsD,IAAK,OAAMtD,MAAM,CAACuD,WAAY,EAApD,GAAwD,EAPjE;IAQE,OAAO,EAAE,MAAM;MACb/C,QAAQ,CAAC2C,OAAT,CAAiBK,KAAjB,GAAyB,IAAzB;IACD,CAVH;IAWE,QAAQ,EAAE,MAAM;MACd,IAAI,CAACtD,QAAL,EAAe;QACbS,eAAe,CAACH,QAAQ,CAAC2C,OAAT,CAAiBH,KAAlB,CAAf;MACD;IACF,CAfH;IAgBE,GAAG,EAAExC,QAhBP;IAiBE,MAAM,EAAEL,aAAa,CAACsC,IAAd,CAAmB,GAAnB;EAjBV,EAxCF,eA4DE;IAAK,SAAS,EAAE1C,OAAO,CAAC0D;EAAxB,GACGnD,SAAS,gBACR,uDACE;IAAK,SAAS,EAAEP,OAAO,CAAC2D;EAAxB,gBACE,oBAAC,YAAD;IAAc,SAAS,EAAE3D,OAAO,CAAC4D;EAAjC,GAA4C3D,MAAM,CAAC4D,SAAnD,CADF,CADF,CADQ,gBAOR,uDACE,oBAAC,GAAD;IACE,QAAQ,EAAC,GADX;IAEE,SAAS,EAAE7D,OAAO,CAAC8D,gBAFrB;IAGE,KAAK,EAAE3D,QAAQ,GAAG,OAAH,GAAa;EAH9B,EADF,eAME;IAAK,SAAS,EAAEH,OAAO,CAAC2D;EAAxB,gBACE,oBAAC,YAAD;IAAc,SAAS,EAAE3D,OAAO,CAAC4D;EAAjC,GACG3D,MAAM,CAACsD,IADV,eAEE;IAAM,SAAS,EAAEvD,OAAO,CAAC+D;EAAzB,GAA4C,OAAM9D,MAAM,CAACuD,WAAY,EAArE,CAFF,CADF,CANF,CARJ,CA5DF,CAzBF,CADF;AAgHD,CApKD;;AAsKA,wCAAA1D,QAAQ,CAACkE,SAAT,GAAqB;EACnB;AACF;AACA;EACEjE,EAAE,EAAEd,SAAS,CAACgF,MAJK;;EAKnB;AACF;AACA;EACEjE,OAAO,EAAEf,SAAS,CAACiF,KAAV,CAAgB;IACvB;AACJ;AACA;IACIvB,iBAAiB,EAAE1D,SAAS,CAACgF,MAJN;;IAKvB;AACJ;AACA;IACI3B,mBAAmB,EAAErD,SAAS,CAACgF,MARR;;IASvB;AACJ;AACA;IACIrB,UAAU,EAAE3D,SAAS,CAACgF,MAZC;;IAavB;AACJ;AACA;IACIpB,yBAAyB,EAAE5D,SAAS,CAACgF,MAhBd;;IAiBvB;AACJ;AACA;IACIX,SAAS,EAAErE,SAAS,CAACgF,MApBE;;IAqBvB;AACJ;AACA;IACIP,QAAQ,EAAEzE,SAAS,CAACgF,MAxBG;;IAyBvB;AACJ;AACA;IACIN,kBAAkB,EAAE1E,SAAS,CAACgF,MA5BP;;IA6BvB;AACJ;AACA;IACIH,gBAAgB,EAAE7E,SAAS,CAACgF,MAhCL;;IAiCvB;AACJ;AACA;IACIL,QAAQ,EAAE3E,SAAS,CAACgF,MApCG;;IAqCvB;AACJ;AACA;IACIF,eAAe,EAAE9E,SAAS,CAACgF;EAxCJ,CAAhB,EAyCNE,UAjDgB;;EAkDnB;AACF;AACA;EACElE,MAAM,EAAEhB,SAAS,CAACmF,UAAV,CAAqBrD,MAArB,EAA6BoD,UArDlB;;EAsDnB;AACF;AACA;EACEjE,QAAQ,EAAEjB,SAAS,CAACoF,IAzDD;;EA0DnB;AACF;AACA;EACElE,QAAQ,EAAElB,SAAS,CAACoF,IA7DD;;EA8DnB;AACF;AACA;EACEjE,aAAa,EAAEnB,SAAS,CAACqF,OAAV,CAAkBrF,SAAS,CAACgF,MAA5B,EAAoCE,UAjEhC;;EAkEnB;AACF;AACA;EACE9D,WAAW,EAAEpB,SAAS,CAACsF,MAAV,CAAiBJ,UArEX;;EAsEnB;AACF;AACA;EACE7D,YAAY,EAAErB,SAAS,CAACuF;AAzEL,CAArB;AA4EA,eAAenF,UAAU,CAACQ,MAAD,EAAS;EAAEmC,IAAI,EAAE;AAAR,CAAT,CAAV,CAAuDpC,MAAM,CAACE,QAAD,CAA7D,CAAf"}

package/dist/modern/FileUploader/DropZone/index.d.ts

@@ -0,0 +1,2 @@
+export { default as HvDropZone } from "./DropZone";
+export * from "./DropZone";

package/dist/modern/FileUploader/DropZone/index.js

@@ -0,0 +1,2 @@
+export { default } from "./DropZone";
+//# sourceMappingURL=index.js.map

package/dist/modern/FileUploader/DropZone/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default"],"sources":["../../../../src/FileUploader/DropZone/index.js"],"sourcesContent":["export { default } from \"./DropZone\";\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,YAAxB"}

package/dist/modern/FileUploader/DropZone/styles.js

@@ -0,0 +1,90 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { outlineStyles } from "../../Focus/styles";
+
+const styles = theme => ({
+  dropZoneContainer: {
+    position: "relative",
+    width: "100%",
+    display: "flex",
+    border: `1px dotted ${theme.hv.palette.atmosphere.atmo6}`,
+    cursor: "pointer",
+    background: `${theme.hv.palette.atmosphere.atmo2}`,
+    "&:hover": {
+      background: `${theme.hv.palette.atmosphere.atmo1}`,
+      border: `1px dotted ${theme.hv.palette.accent.acce1}`
+    },
+    "&:focus": _objectSpread({
+      background: `${theme.hv.palette.atmosphere.atmo1}`
+    }, outlineStyles)
+  },
+  dropZoneContainerDisabled: {
+    "&$dropZoneContainer": {
+      background: `${theme.hv.palette.atmosphere.atmo4}`,
+      border: `1px solid ${theme.hv.palette.atmosphere.atmo6}`,
+      cursor: "not-allowed",
+      "&:hover": {
+        background: `${theme.hv.palette.atmosphere.atmo4}`,
+        border: `1px solid ${theme.hv.palette.atmosphere.atmo6}`,
+        cursor: "not-allowed"
+      }
+    },
+    "& $dragText": {
+      color: theme.hv.palette.atmosphere.atmo6
+    },
+    "& $selectFilesText": {
+      color: theme.hv.palette.atmosphere.atmo6
+    }
+  },
+  dragAction: {
+    background: `${theme.hv.palette.atmosphere.atmo1}`,
+    border: `1px dotted ${theme.hv.palette.accent.acce1}`
+  },
+  inputArea: {
+    opacity: 0,
+    width: "100%",
+    position: "absolute",
+    height: "100%",
+    cursor: "pointer",
+    "&:disabled": {
+      cursor: "not-allowed"
+    }
+  },
+  dropArea: {
+    display: "flex",
+    margin: `${theme.hv.spacing.md}px auto`,
+    minHeight: 40
+  },
+  dropZoneLabelsGroup: {
+    display: "flex",
+    marginBottom: 5,
+    "& label:nth-child(1)": {
+      marginRight: `${theme.hv.spacing.sm}px`
+    },
+    "& p:nth-child(3)": {
+      marginRight: `${theme.hv.spacing.sm}px`,
+      marginLeft: "auto"
+    },
+    "& p:last-child": {
+      marginRight: 0
+    }
+  },
+  dropZoneAreaLabels: {
+    display: "flex",
+    width: 115,
+    margin: "auto"
+  },
+  dropZoneAreaIcon: {
+    margin: "auto",
+    marginRight: `${theme.hv.spacing.xs}px`
+  },
+  dragText: _objectSpread({}, theme.hv.typography.normalText),
+  selectFilesText: _objectSpread({}, theme.hv.typography.highlightText)
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/FileUploader/DropZone/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["outlineStyles","styles","theme","dropZoneContainer","position","width","display","border","hv","palette","atmosphere","atmo6","cursor","background","atmo2","atmo1","accent","acce1","dropZoneContainerDisabled","atmo4","color","dragAction","inputArea","opacity","height","dropArea","margin","spacing","md","minHeight","dropZoneLabelsGroup","marginBottom","marginRight","sm","marginLeft","dropZoneAreaLabels","dropZoneAreaIcon","xs","dragText","typography","normalText","selectFilesText","highlightText"],"sources":["../../../../src/FileUploader/DropZone/styles.js"],"sourcesContent":["import { outlineStyles } from \"../../Focus/styles\";\n\nconst styles = (theme) => ({\n  dropZoneContainer: {\n    position: \"relative\",\n    width: \"100%\",\n    display: \"flex\",\n    border: `1px dotted ${theme.hv.palette.atmosphere.atmo6}`,\n    cursor: \"pointer\",\n    background: `${theme.hv.palette.atmosphere.atmo2}`,\n    \"&:hover\": {\n      background: `${theme.hv.palette.atmosphere.atmo1}`,\n      border: `1px dotted ${theme.hv.palette.accent.acce1}`,\n    },\n    \"&:focus\": {\n      background: `${theme.hv.palette.atmosphere.atmo1}`,\n      ...outlineStyles,\n    },\n  },\n  dropZoneContainerDisabled: {\n    \"&$dropZoneContainer\": {\n      background: `${theme.hv.palette.atmosphere.atmo4}`,\n      border: `1px solid ${theme.hv.palette.atmosphere.atmo6}`,\n      cursor: \"not-allowed\",\n      \"&:hover\": {\n        background: `${theme.hv.palette.atmosphere.atmo4}`,\n        border: `1px solid ${theme.hv.palette.atmosphere.atmo6}`,\n        cursor: \"not-allowed\",\n      },\n    },\n    \"& $dragText\": {\n      color: theme.hv.palette.atmosphere.atmo6,\n    },\n    \"& $selectFilesText\": {\n      color: theme.hv.palette.atmosphere.atmo6,\n    },\n  },\n  dragAction: {\n    background: `${theme.hv.palette.atmosphere.atmo1}`,\n    border: `1px dotted ${theme.hv.palette.accent.acce1}`,\n  },\n  inputArea: {\n    opacity: 0,\n    width: \"100%\",\n    position: \"absolute\",\n    height: \"100%\",\n    cursor: \"pointer\",\n    \"&:disabled\": {\n      cursor: \"not-allowed\",\n    },\n  },\n  dropArea: {\n    display: \"flex\",\n    margin: `${theme.hv.spacing.md}px auto`,\n    minHeight: 40,\n  },\n  dropZoneLabelsGroup: {\n    display: \"flex\",\n    marginBottom: 5,\n    \"& label:nth-child(1)\": {\n      marginRight: `${theme.hv.spacing.sm}px`,\n    },\n    \"& p:nth-child(3)\": {\n      marginRight: `${theme.hv.spacing.sm}px`,\n      marginLeft: \"auto\",\n    },\n    \"& p:last-child\": {\n      marginRight: 0,\n    },\n  },\n  dropZoneAreaLabels: {\n    display: \"flex\",\n    width: 115,\n    margin: \"auto\",\n  },\n  dropZoneAreaIcon: {\n    margin: \"auto\",\n    marginRight: `${theme.hv.spacing.xs}px`,\n  },\n  dragText: {\n    ...theme.hv.typography.normalText,\n  },\n  selectFilesText: {\n    ...theme.hv.typography.highlightText,\n  },\n});\n\nexport default styles;\n"],"mappings":"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"}

package/dist/modern/FileUploader/File/File.d.ts

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+
+export interface File {
+  /**
+   * The file name.
+   */
+  name: string;
+  /**
+   * The upload status.
+   */
+  status: "progress" | "success" | "fail";
+  /**
+   * The file size in bytes.
+   */
+  size?: number;
+  /**
+   * Upload progress in bytes.
+   */
+  progress?: number;
+}
+
+export type FilesAddedEvent = (files: File[]) => void;
+
+export type FileRemovedEvent = (file: File) => void;
+
+export interface FileProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvFileClassKey> {
+  /**
+   * File information to be displayed
+   */
+  data: File;
+  /**
+   * Callback fired when file is removed from list.
+   */
+  onFileRemoved?: FileRemovedEvent;
+  /**
+   * File upload progress conjunction.
+   */
+  progressConjunctionLabel: string;
+  /**
+   * Value of aria-label to apply to remove file button in filelist
+   * */
+  removeFileButtonLabel: string;
+}
+
+export type HvFileClassKey =
+  | "progressbar"
+  | "progressbarBack"
+  | "nameText"
+  | "progressTextContainer"
+  | "removeButton";
+
+export default function HvFile(props: FileProps): JSX.Element | null;

package/dist/modern/FileUploader/File/File.js

@@ -0,0 +1,161 @@
+var _Close;
+
+import React from "react";
+import PropTypes from "prop-types";
+import { IconButton, withStyles } from "@material-ui/core";
+import { Fail, Close, Success } from "@hitachivantara/uikit-react-icons";
+import HvTypography from "../../Typography";
+import { setId } from "../../utils/setId";
+import { convertUnits } from "../utils";
+import styles from "./styles";
+
+const getStatusIcon = (classes, status) => {
+  switch (status) {
+    case "success":
+      return /*#__PURE__*/React.createElement(Success, {
+        className: classes.icon,
+        color: "sema1"
+      });
+
+    case "fail":
+      return /*#__PURE__*/React.createElement(Fail, {
+        className: classes.icon,
+        color: "sema4"
+      });
+
+    default:
+      return /*#__PURE__*/React.createElement("div", {
+        className: classes.icon
+      });
+  }
+};
+
+const getProgressText = (classes, data, progressConjunctionLabel) => {
+  const hasFailed = data.status === "fail";
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !hasFailed && data.progress != null && /*#__PURE__*/React.createElement(HvTypography, {
+    variant: "labelText"
+  }, `${convertUnits(data.progress)}`), !hasFailed && data.size && /*#__PURE__*/React.createElement(HvTypography, {
+    variant: "sText"
+  }, `\xa0${progressConjunctionLabel}\xa0${convertUnits(data.size)}`), hasFailed && data.errorMessage && /*#__PURE__*/React.createElement(HvTypography, {
+    variant: "sText",
+    className: classes.fail
+  }, data.errorMessage));
+};
+
+const getProgressBarWith = ({
+  size,
+  progress
+}) => {
+  const width = Math.round(progress * 100 / size);
+  return width;
+};
+
+const File = ({
+  id,
+  classes,
+  data,
+  progressConjunctionLabel,
+  onFileRemoved,
+  removeFileButtonLabel
+}) => {
+  const hasError = data.status === "fail";
+  const inProgress = data.status === "progress";
+  const progressText = getProgressText(classes, data, progressConjunctionLabel);
+  const statusIcon = getStatusIcon(classes, data.status);
+  const currentProgress = getProgressBarWith(data);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !hasError && inProgress && /*#__PURE__*/React.createElement("span", {
+    className: classes.progressbarBack
+  }), !hasError && inProgress && /*#__PURE__*/React.createElement("progress", {
+    className: classes.progressbar,
+    "aria-valuemin": "0",
+    "aria-valuemax": "100",
+    "aria-valuenow": currentProgress,
+    style: {
+      width: `${currentProgress}%`
+    }
+  }), statusIcon, /*#__PURE__*/React.createElement(HvTypography, {
+    className: classes.nameText,
+    variant: "sText"
+  }, data.name), /*#__PURE__*/React.createElement("span", {
+    className: classes.progressTextContainer
+  }, progressText), /*#__PURE__*/React.createElement(IconButton, {
+    id: setId(id, "remove-button"),
+    "aria-label": removeFileButtonLabel,
+    className: classes.removeButton,
+    category: "ghost",
+    onClick: () => onFileRemoved === null || onFileRemoved === void 0 ? void 0 : onFileRemoved(data)
+  }, _Close || (_Close = /*#__PURE__*/React.createElement(Close, {
+    iconSize: "XS"
+  }))));
+};
+
+process.env.NODE_ENV !== "production" ? File.propTypes = {
+  /**
+   * Id to be applied to the root node.
+   */
+  id: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied to the Switch Component.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Style applied to the progress bar.
+     */
+    progressbar: PropTypes.string,
+
+    /**
+     * Style applied to the progress bar background.
+     */
+    progressbarBack: PropTypes.string,
+
+    /**
+     * Style applied to the file name.
+     */
+    nameText: PropTypes.string,
+
+    /**
+     * Style applied to the container of the progress bar.
+     */
+    progressTextContainer: PropTypes.string,
+
+    /**
+     * Style applied to the remove button.
+     */
+    removeButton: PropTypes.string
+  }).isRequired,
+
+  /**
+   * File information to be displayed
+   */
+  data: PropTypes.shape({
+    /**
+     * The file name.
+     */
+    name: PropTypes.string,
+
+    /**
+     * The upload status.
+     */
+    status: PropTypes.oneOf(["progress", "success", "fail"])
+  }).isRequired,
+
+  /**
+   * Callback fired when file is removed from list.
+   */
+  onFileRemoved: PropTypes.func.isRequired,
+
+  /**
+   * File upload progress conjunction.
+   */
+  progressConjunctionLabel: PropTypes.string.isRequired,
+
+  /**
+   * Value of aria-label to apply to remove file button in filelist
+   * */
+  removeFileButtonLabel: PropTypes.string.isRequired
+} : void 0;
+export default withStyles(styles, {
+  name: "HvFileUploaderFile"
+})(File);
+//# sourceMappingURL=File.js.map

package/dist/modern/FileUploader/File/File.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"File.js","names":["React","PropTypes","IconButton","withStyles","Fail","Close","Success","HvTypography","setId","convertUnits","styles","getStatusIcon","classes","status","icon","getProgressText","data","progressConjunctionLabel","hasFailed","progress","size","errorMessage","fail","getProgressBarWith","width","Math","round","File","id","onFileRemoved","removeFileButtonLabel","hasError","inProgress","progressText","statusIcon","currentProgress","progressbarBack","progressbar","nameText","name","progressTextContainer","removeButton","propTypes","string","shape","isRequired","oneOf","func"],"sources":["../../../../src/FileUploader/File/File.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { IconButton, withStyles } from \"@material-ui/core\";\nimport { Fail, Close, Success } from \"@hitachivantara/uikit-react-icons\";\nimport HvTypography from \"../../Typography\";\nimport { setId } from \"../../utils/setId\";\nimport { convertUnits } from \"../utils\";\nimport styles from \"./styles\";\n\nconst getStatusIcon = (classes, status) => {\n  switch (status) {\n    case \"success\":\n      return <Success className={classes.icon} color=\"sema1\" />;\n    case \"fail\":\n      return <Fail className={classes.icon} color=\"sema4\" />;\n    default:\n      return <div className={classes.icon} />;\n  }\n};\n\nconst getProgressText = (classes, data, progressConjunctionLabel) => {\n  const hasFailed = data.status === \"fail\";\n\n  return (\n    <>\n      {!hasFailed && data.progress != null && (\n        <HvTypography variant=\"labelText\">{`${convertUnits(data.progress)}`}</HvTypography>\n      )}\n\n      {!hasFailed && data.size && (\n        <HvTypography variant=\"sText\">\n          {`\\xa0${progressConjunctionLabel}\\xa0${convertUnits(data.size)}`}\n        </HvTypography>\n      )}\n\n      {hasFailed && data.errorMessage && (\n        <HvTypography variant=\"sText\" className={classes.fail}>\n          {data.errorMessage}\n        </HvTypography>\n      )}\n    </>\n  );\n};\n\nconst getProgressBarWith = ({ size, progress }) => {\n  const width = Math.round((progress * 100) / size);\n\n  return width;\n};\n\nconst File = ({\n  id,\n  classes,\n  data,\n  progressConjunctionLabel,\n  onFileRemoved,\n  removeFileButtonLabel,\n}) => {\n  const hasError = data.status === \"fail\";\n  const inProgress = data.status === \"progress\";\n  const progressText = getProgressText(classes, data, progressConjunctionLabel);\n  const statusIcon = getStatusIcon(classes, data.status);\n\n  const currentProgress = getProgressBarWith(data);\n\n  return (\n    <>\n      {!hasError && inProgress && <span className={classes.progressbarBack} />}\n\n      {!hasError && inProgress && (\n        <progress\n          className={classes.progressbar}\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          aria-valuenow={currentProgress}\n          style={{ width: `${currentProgress}%` }}\n        />\n      )}\n\n      {statusIcon}\n\n      <HvTypography className={classes.nameText} variant=\"sText\">\n        {data.name}\n      </HvTypography>\n\n      <span className={classes.progressTextContainer}>{progressText}</span>\n\n      <IconButton\n        id={setId(id, \"remove-button\")}\n        aria-label={removeFileButtonLabel}\n        className={classes.removeButton}\n        category=\"ghost\"\n        onClick={() => onFileRemoved?.(data)}\n      >\n        <Close iconSize=\"XS\" />\n      </IconButton>\n    </>\n  );\n};\n\nFile.propTypes = {\n  /**\n   * Id to be applied to the root node.\n   */\n  id: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied to the Switch Component.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Style applied to the progress bar.\n     */\n    progressbar: PropTypes.string,\n    /**\n     * Style applied to the progress bar background.\n     */\n    progressbarBack: PropTypes.string,\n    /**\n     * Style applied to the file name.\n     */\n    nameText: PropTypes.string,\n    /**\n     * Style applied to the container of the progress bar.\n     */\n    progressTextContainer: PropTypes.string,\n    /**\n     * Style applied to the remove button.\n     */\n    removeButton: PropTypes.string,\n  }).isRequired,\n  /**\n   * File information to be displayed\n   */\n  data: PropTypes.shape({\n    /**\n     * The file name.\n     */\n    name: PropTypes.string,\n    /**\n     * The upload status.\n     */\n    status: PropTypes.oneOf([\"progress\", \"success\", \"fail\"]),\n  }).isRequired,\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved: PropTypes.func.isRequired,\n  /**\n   * File upload progress conjunction.\n   */\n  progressConjunctionLabel: PropTypes.string.isRequired,\n  /**\n   * Value of aria-label to apply to remove file button in filelist\n   * */\n  removeFileButtonLabel: PropTypes.string.isRequired,\n};\n\nexport default withStyles(styles, { name: \"HvFileUploaderFile\" })(File);\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAASC,UAAT,EAAqBC,UAArB,QAAuC,mBAAvC;AACA,SAASC,IAAT,EAAeC,KAAf,EAAsBC,OAAtB,QAAqC,mCAArC;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,SAASC,KAAT,QAAsB,mBAAtB;AACA,SAASC,YAAT,QAA6B,UAA7B;AACA,OAAOC,MAAP,MAAmB,UAAnB;;AAEA,MAAMC,aAAa,GAAG,CAACC,OAAD,EAAUC,MAAV,KAAqB;EACzC,QAAQA,MAAR;IACE,KAAK,SAAL;MACE,oBAAO,oBAAC,OAAD;QAAS,SAAS,EAAED,OAAO,CAACE,IAA5B;QAAkC,KAAK,EAAC;MAAxC,EAAP;;IACF,KAAK,MAAL;MACE,oBAAO,oBAAC,IAAD;QAAM,SAAS,EAAEF,OAAO,CAACE,IAAzB;QAA+B,KAAK,EAAC;MAArC,EAAP;;IACF;MACE,oBAAO;QAAK,SAAS,EAAEF,OAAO,CAACE;MAAxB,EAAP;EANJ;AAQD,CATD;;AAWA,MAAMC,eAAe,GAAG,CAACH,OAAD,EAAUI,IAAV,EAAgBC,wBAAhB,KAA6C;EACnE,MAAMC,SAAS,GAAGF,IAAI,CAACH,MAAL,KAAgB,MAAlC;EAEA,oBACE,0CACG,CAACK,SAAD,IAAcF,IAAI,CAACG,QAAL,IAAiB,IAA/B,iBACC,oBAAC,YAAD;IAAc,OAAO,EAAC;EAAtB,GAAoC,GAAEV,YAAY,CAACO,IAAI,CAACG,QAAN,CAAgB,EAAlE,CAFJ,EAKG,CAACD,SAAD,IAAcF,IAAI,CAACI,IAAnB,iBACC,oBAAC,YAAD;IAAc,OAAO,EAAC;EAAtB,GACI,OAAMH,wBAAyB,OAAMR,YAAY,CAACO,IAAI,CAACI,IAAN,CAAY,EADjE,CANJ,EAWGF,SAAS,IAAIF,IAAI,CAACK,YAAlB,iBACC,oBAAC,YAAD;IAAc,OAAO,EAAC,OAAtB;IAA8B,SAAS,EAAET,OAAO,CAACU;EAAjD,GACGN,IAAI,CAACK,YADR,CAZJ,CADF;AAmBD,CAtBD;;AAwBA,MAAME,kBAAkB,GAAG,CAAC;EAAEH,IAAF;EAAQD;AAAR,CAAD,KAAwB;EACjD,MAAMK,KAAK,GAAGC,IAAI,CAACC,KAAL,CAAYP,QAAQ,GAAG,GAAZ,GAAmBC,IAA9B,CAAd;EAEA,OAAOI,KAAP;AACD,CAJD;;AAMA,MAAMG,IAAI,GAAG,CAAC;EACZC,EADY;EAEZhB,OAFY;EAGZI,IAHY;EAIZC,wBAJY;EAKZY,aALY;EAMZC;AANY,CAAD,KAOP;EACJ,MAAMC,QAAQ,GAAGf,IAAI,CAACH,MAAL,KAAgB,MAAjC;EACA,MAAMmB,UAAU,GAAGhB,IAAI,CAACH,MAAL,KAAgB,UAAnC;EACA,MAAMoB,YAAY,GAAGlB,eAAe,CAACH,OAAD,EAAUI,IAAV,EAAgBC,wBAAhB,CAApC;EACA,MAAMiB,UAAU,GAAGvB,aAAa,CAACC,OAAD,EAAUI,IAAI,CAACH,MAAf,CAAhC;EAEA,MAAMsB,eAAe,GAAGZ,kBAAkB,CAACP,IAAD,CAA1C;EAEA,oBACE,0CACG,CAACe,QAAD,IAAaC,UAAb,iBAA2B;IAAM,SAAS,EAAEpB,OAAO,CAACwB;EAAzB,EAD9B,EAGG,CAACL,QAAD,IAAaC,UAAb,iBACC;IACE,SAAS,EAAEpB,OAAO,CAACyB,WADrB;IAEE,iBAAc,GAFhB;IAGE,iBAAc,KAHhB;IAIE,iBAAeF,eAJjB;IAKE,KAAK,EAAE;MAAEX,KAAK,EAAG,GAAEW,eAAgB;IAA5B;EALT,EAJJ,EAaGD,UAbH,eAeE,oBAAC,YAAD;IAAc,SAAS,EAAEtB,OAAO,CAAC0B,QAAjC;IAA2C,OAAO,EAAC;EAAnD,GACGtB,IAAI,CAACuB,IADR,CAfF,eAmBE;IAAM,SAAS,EAAE3B,OAAO,CAAC4B;EAAzB,GAAiDP,YAAjD,CAnBF,eAqBE,oBAAC,UAAD;IACE,EAAE,EAAEzB,KAAK,CAACoB,EAAD,EAAK,eAAL,CADX;IAEE,cAAYE,qBAFd;IAGE,SAAS,EAAElB,OAAO,CAAC6B,YAHrB;IAIE,QAAQ,EAAC,OAJX;IAKE,OAAO,EAAE,MAAMZ,aAAN,aAAMA,aAAN,uBAAMA,aAAa,CAAGb,IAAH;EAL9B,oCAOE,oBAAC,KAAD;IAAO,QAAQ,EAAC;EAAhB,EAPF,EArBF,CADF;AAiCD,CAhDD;;AAkDA,wCAAAW,IAAI,CAACe,SAAL,GAAiB;EACf;AACF;AACA;EACEd,EAAE,EAAE3B,SAAS,CAAC0C,MAJC;;EAKf;AACF;AACA;EACE/B,OAAO,EAAEX,SAAS,CAAC2C,KAAV,CAAgB;IACvB;AACJ;AACA;IACIP,WAAW,EAAEpC,SAAS,CAAC0C,MAJA;;IAKvB;AACJ;AACA;IACIP,eAAe,EAAEnC,SAAS,CAAC0C,MARJ;;IASvB;AACJ;AACA;IACIL,QAAQ,EAAErC,SAAS,CAAC0C,MAZG;;IAavB;AACJ;AACA;IACIH,qBAAqB,EAAEvC,SAAS,CAAC0C,MAhBV;;IAiBvB;AACJ;AACA;IACIF,YAAY,EAAExC,SAAS,CAAC0C;EApBD,CAAhB,EAqBNE,UA7BY;;EA8Bf;AACF;AACA;EACE7B,IAAI,EAAEf,SAAS,CAAC2C,KAAV,CAAgB;IACpB;AACJ;AACA;IACIL,IAAI,EAAEtC,SAAS,CAAC0C,MAJI;;IAKpB;AACJ;AACA;IACI9B,MAAM,EAAEZ,SAAS,CAAC6C,KAAV,CAAgB,CAAC,UAAD,EAAa,SAAb,EAAwB,MAAxB,CAAhB;EARY,CAAhB,EASHD,UA1CY;;EA2Cf;AACF;AACA;EACEhB,aAAa,EAAE5B,SAAS,CAAC8C,IAAV,CAAeF,UA9Cf;;EA+Cf;AACF;AACA;EACE5B,wBAAwB,EAAEhB,SAAS,CAAC0C,MAAV,CAAiBE,UAlD5B;;EAmDf;AACF;AACA;EACEf,qBAAqB,EAAE7B,SAAS,CAAC0C,MAAV,CAAiBE;AAtDzB,CAAjB;AAyDA,eAAe1C,UAAU,CAACO,MAAD,EAAS;EAAE6B,IAAI,EAAE;AAAR,CAAT,CAAV,CAAmDZ,IAAnD,CAAf"}

package/dist/modern/FileUploader/File/index.d.ts

@@ -0,0 +1,2 @@
+export { default as HvFile } from "./File";
+export * from "./File";

package/dist/modern/FileUploader/File/index.js

@@ -0,0 +1,2 @@
+export { default } from "./File";
+//# sourceMappingURL=index.js.map

package/dist/modern/FileUploader/File/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default"],"sources":["../../../../src/FileUploader/File/index.js"],"sourcesContent":["export { default } from \"./File\";\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,QAAxB"}