@hitachivantara/uikit-react-core 3.52.5

package/dist/legacy/FileUploader/DropZone/DropZone.js

@@ -0,0 +1,280 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.split.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.number.is-integer.js";
+import "core-js/modules/es.number.constructor.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.join.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, HvLabel, HvInfoMessage } from "../..";
+import withId from "../../withId";
+import styles from "./styles";
+
+var DropZone = function DropZone(_ref) {
+  var id = _ref.id,
+      classes = _ref.classes,
+      labels = _ref.labels,
+      _ref$multiple = _ref.multiple,
+      multiple = _ref$multiple === void 0 ? true : _ref$multiple,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      acceptedFiles = _ref.acceptedFiles,
+      maxFileSize = _ref.maxFileSize,
+      onFilesAdded = _ref.onFilesAdded,
+      inputProps = _ref.inputProps,
+      hideLabels = _ref.hideLabels;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      dragState = _useState2[0],
+      setDrag = _useState2[1];
+
+  var inputRef = useRef();
+
+  var leaveDropArea = function leaveDropArea() {
+    setDrag(false);
+  };
+
+  var enterDropArea = function enterDropArea() {
+    setDrag(true);
+  };
+
+  var onChangeHandler = function onChangeHandler(evt) {
+    var filesToProcess = Object.keys(evt).map(function (e) {
+      return evt[e];
+    });
+    var newFiles = [];
+    filesToProcess.forEach(function (file) {
+      var newFile = file;
+      var isSizeAllowed = file.size <= maxFileSize;
+      var isFileAccepted = !acceptedFiles.length || acceptedFiles.indexOf(file.type.split("/")[1]) > -1 || acceptedFiles.some(function (acceptExtension) {
+        return 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, !hideLabels && /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: classes.dropZoneLabelsGroup,
+    "aria-label": "File Dropzone"
+  }, /*#__PURE__*/React.createElement(HvLabel, {
+    id: setId(id, "input-file-label"),
+    htmlFor: setId(id, "input-file"),
+    label: labels.dropzone,
+    className: classes.dropZoneLabel
+  }), /*#__PURE__*/React.createElement(HvInfoMessage, {
+    id: setId(id, "description")
+  }, Number.isInteger(maxFileSize) && "".concat(labels.sizeWarning, " ").concat(convertUnits(maxFileSize)), labels.acceptedFiles && labels.acceptedFiles, !labels.acceptedFiles && acceptedFiles.length > 0 && "\xA0(".concat(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: function onDragEnter(event) {
+      if (!disabled) {
+        enterDropArea();
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    },
+    onDragLeave: leaveDropArea,
+    onDropCapture: leaveDropArea,
+    onDragOver: function onDragOver(event) {
+      if (!disabled) {
+        enterDropArea();
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    },
+    onDrop: function onDrop(event) {
+      if (!disabled) {
+        var files = event.dataTransfer.files;
+
+        if (multiple === true || files.length === 1) {
+          event.stopPropagation();
+          event.preventDefault();
+          onChangeHandler(files);
+        }
+      }
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (isKeypress(e, KeyboardCodes.Enter) || isKeypress(e, 32)) {
+        inputRef.current.click();
+      }
+    }
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    id: setId(id, "input-file"),
+    tabIndex: -1,
+    className: classes.inputArea,
+    type: "file",
+    multiple: multiple,
+    disabled: disabled,
+    title: !disabled ? "".concat(labels.drag, "\xA0").concat(labels.selectFiles) : "",
+    onClick: function onClick() {
+      inputRef.current.value = null;
+    },
+    onChange: function onChange() {
+      if (!disabled) {
+        onChangeHandler(inputRef.current.files);
+      }
+    },
+    ref: inputRef,
+    accept: acceptedFiles.join(",")
+  }, inputProps)), /*#__PURE__*/React.createElement("div", {
+    className: classes.dropArea
+  }, dragState ? /*#__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 ? "atmo4" : "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".concat(labels.selectFiles))))))));
+};
+
+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 dropzone label.
+     */
+    dropZoneLabel: 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),
+
+  /**
+   * 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. Follows https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept
+   */
+  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,
+
+  /**
+   * Whether the DropZone should show labels or not.
+   */
+  hideLabels: PropTypes.bool,
+
+  /**
+   * Attributes applied to the input element.
+   */
+  inputProps: PropTypes.instanceOf(Object)
+};
+export default withStyles(styles, {
+  name: "HvFileUploaderDropZone"
+})(withId(DropZone));
+//# sourceMappingURL=DropZone.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/FileUploader/DropZone/DropZone.js"],"names":["React","useRef","useState","PropTypes","uniqueId","clsx","accept","withStyles","Doc","isKeypress","KeyboardCodes","HvTypography","convertUnits","setId","HvLabel","HvInfoMessage","withId","styles","DropZone","id","classes","labels","multiple","disabled","acceptedFiles","maxFileSize","onFilesAdded","inputProps","hideLabels","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","dropZoneLabel","Number","isInteger","sizeWarning","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"],"mappings":"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","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, HvLabel, HvInfoMessage } 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  inputProps,\n  hideLabels,\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      {!hideLabels && (\n        <div id={id} className={classes.dropZoneLabelsGroup} aria-label=\"File Dropzone\">\n          <HvLabel\n            id={setId(id, \"input-file-label\")}\n            htmlFor={setId(id, \"input-file\")}\n            label={labels.dropzone}\n            className={classes.dropZoneLabel}\n          />\n          <HvInfoMessage id={setId(id, \"description\")}>\n            {Number.isInteger(maxFileSize) && `${labels.sizeWarning} ${convertUnits(maxFileSize)}`}\n            {labels.acceptedFiles && labels.acceptedFiles}\n            {!labels.acceptedFiles &&\n              acceptedFiles.length > 0 &&\n              `\\u00A0(${acceptedFiles.join(\", \")})`}\n          </HvInfoMessage>\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          {...inputProps}\n        />\n\n        <div className={classes.dropArea}>\n          {dragState ? (\n            <div className={classes.dropZoneAreaLabels}>\n              <HvTypography className={classes.dragText}>{labels.dropFiles}</HvTypography>\n            </div>\n          ) : (\n            <>\n              <Doc\n                iconSize=\"M\"\n                className={classes.dropZoneAreaIcon}\n                color={disabled ? \"atmo4\" : \"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 dropzone label.\n     */\n    dropZoneLabel: 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),\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. Follows https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept\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   * Whether the DropZone should show labels or not.\n   */\n  hideLabels: PropTypes.bool,\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, { name: \"HvFileUploaderDropZone\" })(withId(DropZone));\n"],"file":"DropZone.js"}

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

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

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

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

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

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

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

@@ -0,0 +1,92 @@
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import { outlineStyles } from "../../Focus/styles";
+
+var styles = function styles(theme) {
+  return {
+    dropZoneContainer: {
+      position: "relative",
+      width: "100%",
+      display: "flex",
+      border: "1px dotted ".concat(theme.hv.palette.atmosphere.atmo4),
+      cursor: "pointer",
+      background: "".concat(theme.hv.palette.atmosphere.atmo2),
+      "&:hover": {
+        background: "".concat(theme.hv.palette.atmosphere.atmo1),
+        border: "1px dotted ".concat(theme.hv.palette.accent.acce1)
+      },
+      "&:focus": _objectSpread({
+        background: "".concat(theme.hv.palette.atmosphere.atmo1),
+        border: "1px dotted ".concat(theme.hv.palette.accent.acce1)
+      }, outlineStyles)
+    },
+    dropZoneLabel: {
+      paddingBottom: 6
+    },
+    dropZoneContainerDisabled: {
+      "&$dropZoneContainer": {
+        background: "".concat(theme.hv.palette.atmosphere.atmo3),
+        border: "1px dotted ".concat(theme.hv.palette.atmosphere.atmo4),
+        cursor: "not-allowed"
+      },
+      "& $dragText": {
+        color: theme.hv.palette.atmosphere.atmo5
+      },
+      "& $selectFilesText": {
+        color: theme.hv.palette.atmosphere.atmo5
+      }
+    },
+    dragAction: {
+      background: "".concat(theme.hv.palette.atmosphere.atmo1),
+      border: "1px dotted ".concat(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.hvSpacing("md", "auto"),
+      minHeight: 48
+    },
+    dropZoneLabelsGroup: {
+      display: "flex",
+      justifyContent: "start",
+      "& label:nth-child(1)": {},
+      "& p:nth-child(2)": {
+        marginLeft: "auto"
+      }
+    },
+    dropZoneAreaLabels: {
+      display: "flex",
+      width: 115,
+      margin: "auto"
+    },
+    dropZoneAreaIcon: {
+      margin: "auto",
+      marginRight: theme.hv.spacing.xs
+    },
+    dragText: _objectSpread({}, theme.hv.typography.normalText),
+    selectFilesText: _objectSpread({}, theme.hv.typography.highlightText)
+  };
+};
+
+export default styles;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/FileUploader/DropZone/styles.js"],"names":["outlineStyles","styles","theme","dropZoneContainer","position","width","display","border","hv","palette","atmosphere","atmo4","cursor","background","atmo2","atmo1","accent","acce1","dropZoneLabel","paddingBottom","dropZoneContainerDisabled","atmo3","color","atmo5","dragAction","inputArea","opacity","height","dropArea","margin","hvSpacing","minHeight","dropZoneLabelsGroup","justifyContent","marginLeft","dropZoneAreaLabels","dropZoneAreaIcon","marginRight","spacing","xs","dragText","typography","normalText","selectFilesText","highlightText"],"mappings":"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","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.atmo4}`,\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      border: `1px dotted ${theme.hv.palette.accent.acce1}`,\n      ...outlineStyles,\n    },\n  },\n  dropZoneLabel: {\n    paddingBottom: 6,\n  },\n  dropZoneContainerDisabled: {\n    \"&$dropZoneContainer\": {\n      background: `${theme.hv.palette.atmosphere.atmo3}`,\n      border: `1px dotted ${theme.hv.palette.atmosphere.atmo4}`,\n      cursor: \"not-allowed\",\n    },\n    \"& $dragText\": {\n      color: theme.hv.palette.atmosphere.atmo5,\n    },\n    \"& $selectFilesText\": {\n      color: theme.hv.palette.atmosphere.atmo5,\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.hvSpacing(\"md\", \"auto\"),\n    minHeight: 48,\n  },\n  dropZoneLabelsGroup: {\n    display: \"flex\",\n    justifyContent: \"start\",\n    \"& label:nth-child(1)\": {},\n    \"& p:nth-child(2)\": {\n      marginLeft: \"auto\",\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,\n  },\n  dragText: {\n    ...theme.hv.typography.normalText,\n  },\n  selectFilesText: {\n    ...theme.hv.typography.highlightText,\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

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

@@ -0,0 +1,55 @@
+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;
+  /**
+   * Optional node representing a preview of the uploaded file.
+   */
+  preview?: React.ReactNode;
+}
+
+export type FilesAddedEvent = (files: File[]) => void;
+
+export type FileRemovedEvent = (file: File) => void;
+
+export type HvFileClassKey =
+  | "progressbar"
+  | "progressbarBack"
+  | "nameText"
+  | "progressTextContainer"
+  | "previewContainer"
+  | "removeButton";
+
+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;
+  /**
+   * Value of aria-label to apply to remove file button in filelist
+   * */
+  removeFileButtonLabel: string;
+}
+
+export default function HvFile(props: FileProps): JSX.Element | null;

package/dist/legacy/FileUploader/File/File.js

@@ -0,0 +1,170 @@
+import "core-js/modules/es.function.name.js";
+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";
+
+var getStatusIcon = function 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
+      });
+  }
+};
+
+var getProgressText = function getProgressText(classes, data) {
+  var hasFailed = data.status === "fail";
+  var inProgress = data.status === "progress";
+  return /*#__PURE__*/React.createElement(React.Fragment, null, data.progress || data.size || data.errorMessage ? "\xA0|\xA0" : null, inProgress && data.progress != null && /*#__PURE__*/React.createElement(HvTypography, {
+    variant: "highlightText"
+  }, "".concat(convertUnits(data.progress), "\xA0/\xA0")), !hasFailed && data.size && /*#__PURE__*/React.createElement(HvTypography, null, "".concat(convertUnits(data.size))), hasFailed && data.errorMessage && /*#__PURE__*/React.createElement(HvTypography, {
+    className: classes.fail
+  }, data.errorMessage));
+};
+
+var getProgressBarWith = function getProgressBarWith(_ref) {
+  var size = _ref.size,
+      progress = _ref.progress;
+  var width = Math.round(progress * 100 / size);
+  return width;
+};
+
+var File = function File(_ref2) {
+  var id = _ref2.id,
+      classes = _ref2.classes,
+      data = _ref2.data,
+      onFileRemoved = _ref2.onFileRemoved,
+      removeFileButtonLabel = _ref2.removeFileButtonLabel;
+  var hasError = data.status === "fail";
+  var inProgress = data.status === "progress";
+  var progressText = getProgressText(classes, data);
+  var statusIcon = getStatusIcon(classes, data.status);
+  var currentProgress = getProgressBarWith(data);
+  return /*#__PURE__*/React.createElement("li", 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: "".concat(currentProgress, "%")
+    }
+  }), statusIcon, /*#__PURE__*/React.createElement(HvTypography, {
+    noWrap: true,
+    className: classes.nameText,
+    variant: "highlightText"
+  }, data.name), /*#__PURE__*/React.createElement("span", {
+    className: classes.progressTextContainer
+  }, progressText), data.preview && /*#__PURE__*/React.createElement("div", {
+    className: classes.previewContainer
+  }, data.preview), /*#__PURE__*/React.createElement(IconButton, {
+    id: setId(id, "remove-button"),
+    "aria-label": removeFileButtonLabel,
+    className: classes.removeButton,
+    category: "ghost",
+    onClick: function onClick() {
+      return onFileRemoved === null || onFileRemoved === void 0 ? void 0 : onFileRemoved(data);
+    }
+  }, /*#__PURE__*/React.createElement(Close, {
+    iconSize: "XS"
+  })));
+};
+
+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,
+
+    /**
+     * Style applied to the file preview container.
+     */
+    previewContainer: PropTypes.string
+  }).isRequired,
+
+  /**
+   * File information to be displayed
+   */
+  data: PropTypes.shape({
+    /**
+     * The file id.
+     */
+    id: PropTypes.string,
+
+    /**
+     * The file name.
+     */
+    name: PropTypes.string,
+
+    /**
+     * The upload status.
+     */
+    status: PropTypes.oneOf(["progress", "success", "fail"]),
+
+    /**
+     * Optional node representing a preview of the uploaded file.
+     */
+    preview: PropTypes.node
+  }).isRequired,
+
+  /**
+   * Callback fired when file is removed from list.
+   */
+  onFileRemoved: PropTypes.func.isRequired,
+
+  /**
+   * Value of aria-label to apply to remove file button in filelist
+   * */
+  removeFileButtonLabel: PropTypes.string.isRequired
+};
+export default withStyles(styles, {
+  name: "HvFileUploaderFile"
+})(File);
+//# sourceMappingURL=File.js.map