@hitachivantara/uikit-react-core 3.52.5

package/dist/modern/EmptyState/EmptyState.js

@@ -0,0 +1,117 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["classes", "className", "title", "message", "action", "icon"];
+import React from "react";
+import clsx from "clsx";
+import PropTypes from "prop-types";
+import { withStyles } from "@material-ui/core";
+import HvTypography from "../Typography";
+import styles from "./styles";
+
+const renderNode = (node, className, variant) => node && /*#__PURE__*/React.createElement(HvTypography, {
+  component: "div",
+  className: className,
+  variant: variant
+}, node);
+/**
+ * Empty states communicate that there’s no information, data or values to display in a given context.
+ */
+
+
+const EmptyState = props => {
+  const {
+    classes,
+    className,
+    title,
+    message,
+    action,
+    icon
+  } = props,
+        others = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx(className, classes.root)
+  }, others), /*#__PURE__*/React.createElement("div", {
+    className: clsx(classes.container, message && !(title || action) && classes.containerMessageOnly)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.iconContainer
+  }, icon), /*#__PURE__*/React.createElement("div", {
+    className: classes.textContainer
+  }, renderNode(title, classes.titleContainer, "xxsTitle"), renderNode(message, classes.messageContainer, "normalText"), renderNode(action, classes.actionContainer, "normalText"))));
+};
+
+EmptyState.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied to the empty state component.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the component root class.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Styles applied to the component container class.
+     */
+    container: PropTypes.string,
+
+    /**
+     * Styles applied to the component container class, when there is no title or action.
+     */
+    containerMessageOnly: PropTypes.string,
+
+    /**
+     * Styles applied to the icon container class.
+     */
+    iconContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the text container class.
+     */
+    textContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the title container class.
+     */
+    titleContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the message container class.
+     */
+    messageContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the action message container class.
+     */
+    actionContainer: PropTypes.string
+  }).isRequired,
+
+  /**
+   * The title to be shown.
+   */
+  title: PropTypes.node,
+
+  /**
+   * The message to be shown.
+   */
+  message: PropTypes.node.isRequired,
+
+  /**
+   * The action message to be shown.
+   */
+  action: PropTypes.node,
+
+  /**
+   *  Icon to be presented.
+   */
+  icon: PropTypes.element.isRequired
+};
+export default withStyles(styles, {
+  name: "HvEmptyState"
+})(EmptyState);
+//# sourceMappingURL=EmptyState.js.map

package/dist/modern/EmptyState/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/EmptyState/EmptyState.js"],"names":["React","clsx","PropTypes","withStyles","HvTypography","styles","renderNode","node","className","variant","EmptyState","props","classes","title","message","action","icon","others","root","container","containerMessageOnly","iconContainer","textContainer","titleContainer","messageContainer","actionContainer","propTypes","string","shape","isRequired","element","name"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport HvTypography from \"../Typography\";\nimport styles from \"./styles\";\n\nconst renderNode = (node, className, variant) =>\n  node && (\n    <HvTypography component=\"div\" className={className} variant={variant}>\n      {node}\n    </HvTypography>\n  );\n\n/**\n * Empty states communicate that there’s no information, data or values to display in a given context.\n */\nconst EmptyState = (props) => {\n  const { classes, className, title, message, action, icon, ...others } = props;\n  return (\n    <div className={clsx(className, classes.root)} {...others}>\n      <div\n        className={clsx(classes.container, {\n          [classes.containerMessageOnly]: message && !(title || action),\n        })}\n      >\n        <div className={classes.iconContainer}>{icon}</div>\n        <div className={classes.textContainer}>\n          {renderNode(title, classes.titleContainer, \"xxsTitle\")}\n          {renderNode(message, classes.messageContainer, \"normalText\")}\n          {renderNode(action, classes.actionContainer, \"normalText\")}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nEmptyState.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied to the empty state component.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the component container class.\n     */\n    container: PropTypes.string,\n    /**\n     * Styles applied to the component container class, when there is no title or action.\n     */\n    containerMessageOnly: PropTypes.string,\n    /**\n     * Styles applied to the icon container class.\n     */\n    iconContainer: PropTypes.string,\n    /**\n     * Styles applied to the text container class.\n     */\n    textContainer: PropTypes.string,\n    /**\n     * Styles applied to the title container class.\n     */\n    titleContainer: PropTypes.string,\n    /**\n     * Styles applied to the message container class.\n     */\n    messageContainer: PropTypes.string,\n    /**\n     * Styles applied to the action message container class.\n     */\n    actionContainer: PropTypes.string,\n  }).isRequired,\n  /**\n   * The title to be shown.\n   */\n  title: PropTypes.node,\n  /**\n   * The message to be shown.\n   */\n  message: PropTypes.node.isRequired,\n  /**\n   * The action message to be shown.\n   */\n  action: PropTypes.node,\n  /**\n   *  Icon to be presented.\n   */\n  icon: PropTypes.element.isRequired,\n};\n\nexport default withStyles(styles, { name: \"HvEmptyState\" })(EmptyState);\n"],"file":"EmptyState.js"}

package/dist/modern/EmptyState/index.d.ts

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

package/dist/modern/EmptyState/index.js

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

package/dist/modern/EmptyState/index.js.map

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

package/dist/modern/EmptyState/styles.js

@@ -0,0 +1,56 @@
+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; }
+
+const styles = theme => ({
+  root: {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    justifyContent: "center"
+  },
+  container: {
+    display: "flex",
+    flexDirection: "row",
+    [theme.breakpoints.only("xs")]: {
+      flexDirection: "column",
+      alignItems: "center",
+      textAlign: "center"
+    }
+  },
+  containerMessageOnly: {
+    alignItems: "center",
+    [theme.breakpoints.only("xs")]: {
+      flexDirection: "row"
+    },
+    "& $textContainer": {
+      marginLeft: 0
+    }
+  },
+  iconContainer: {},
+  textContainer: {
+    background: "transparent",
+    maxWidth: "510px",
+    overflow: "hidden",
+    fontFamily: theme.hv.typography.fontFamily,
+    [theme.breakpoints.up("sm")]: {
+      marginLeft: theme.hvSpacing("xs")
+    },
+    "& a": _objectSpread(_objectSpread({}, theme.hv.typography.link), {}, {
+      textDecoration: "none"
+    })
+  },
+  titleContainer: {
+    marginTop: 2,
+    marginBottom: theme.hv.spacing.sm
+  },
+  messageContainer: {},
+  actionContainer: {
+    marginTop: theme.hvSpacing("sm")
+  }
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/EmptyState/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/EmptyState/styles.js"],"names":["styles","theme","root","width","height","display","justifyContent","container","flexDirection","breakpoints","only","alignItems","textAlign","containerMessageOnly","marginLeft","iconContainer","textContainer","background","maxWidth","overflow","fontFamily","hv","typography","up","hvSpacing","link","textDecoration","titleContainer","marginTop","marginBottom","spacing","sm","messageContainer","actionContainer"],"mappings":";;;;;;AAAA,MAAMA,MAAM,GAAIC,KAAD,KAAY;AACzBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,KAAK,EAAE,MADH;AAEJC,IAAAA,MAAM,EAAE,MAFJ;AAGJC,IAAAA,OAAO,EAAE,MAHL;AAIJC,IAAAA,cAAc,EAAE;AAJZ,GADmB;AAOzBC,EAAAA,SAAS,EAAE;AACTF,IAAAA,OAAO,EAAE,MADA;AAETG,IAAAA,aAAa,EAAE,KAFN;AAGT,KAACP,KAAK,CAACQ,WAAN,CAAkBC,IAAlB,CAAuB,IAAvB,CAAD,GAAgC;AAC9BF,MAAAA,aAAa,EAAE,QADe;AAE9BG,MAAAA,UAAU,EAAE,QAFkB;AAG9BC,MAAAA,SAAS,EAAE;AAHmB;AAHvB,GAPc;AAgBzBC,EAAAA,oBAAoB,EAAE;AACpBF,IAAAA,UAAU,EAAE,QADQ;AAEpB,KAACV,KAAK,CAACQ,WAAN,CAAkBC,IAAlB,CAAuB,IAAvB,CAAD,GAAgC;AAC9BF,MAAAA,aAAa,EAAE;AADe,KAFZ;AAKpB,wBAAoB;AAClBM,MAAAA,UAAU,EAAE;AADM;AALA,GAhBG;AAyBzBC,EAAAA,aAAa,EAAE,EAzBU;AA0BzBC,EAAAA,aAAa,EAAE;AACbC,IAAAA,UAAU,EAAE,aADC;AAEbC,IAAAA,QAAQ,EAAE,OAFG;AAGbC,IAAAA,QAAQ,EAAE,QAHG;AAIbC,IAAAA,UAAU,EAAEnB,KAAK,CAACoB,EAAN,CAASC,UAAT,CAAoBF,UAJnB;AAKb,KAACnB,KAAK,CAACQ,WAAN,CAAkBc,EAAlB,CAAqB,IAArB,CAAD,GAA8B;AAC5BT,MAAAA,UAAU,EAAEb,KAAK,CAACuB,SAAN,CAAgB,IAAhB;AADgB,KALjB;AAQb,2CACKvB,KAAK,CAACoB,EAAN,CAASC,UAAT,CAAoBG,IADzB;AAEEC,MAAAA,cAAc,EAAE;AAFlB;AARa,GA1BU;AAuCzBC,EAAAA,cAAc,EAAE;AACdC,IAAAA,SAAS,EAAE,CADG;AAEdC,IAAAA,YAAY,EAAE5B,KAAK,CAACoB,EAAN,CAASS,OAAT,CAAiBC;AAFjB,GAvCS;AA2CzBC,EAAAA,gBAAgB,EAAE,EA3CO;AA4CzBC,EAAAA,eAAe,EAAE;AACfL,IAAAA,SAAS,EAAE3B,KAAK,CAACuB,SAAN,CAAgB,IAAhB;AADI;AA5CQ,CAAZ,CAAf;;AAiDA,eAAexB,MAAf","sourcesContent":["const styles = (theme) => ({\n  root: {\n    width: \"100%\",\n    height: \"100%\",\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n  container: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    [theme.breakpoints.only(\"xs\")]: {\n      flexDirection: \"column\",\n      alignItems: \"center\",\n      textAlign: \"center\",\n    },\n  },\n  containerMessageOnly: {\n    alignItems: \"center\",\n    [theme.breakpoints.only(\"xs\")]: {\n      flexDirection: \"row\",\n    },\n    \"& $textContainer\": {\n      marginLeft: 0,\n    },\n  },\n  iconContainer: {},\n  textContainer: {\n    background: \"transparent\",\n    maxWidth: \"510px\",\n    overflow: \"hidden\",\n    fontFamily: theme.hv.typography.fontFamily,\n    [theme.breakpoints.up(\"sm\")]: {\n      marginLeft: theme.hvSpacing(\"xs\"),\n    },\n    \"& a\": {\n      ...theme.hv.typography.link,\n      textDecoration: \"none\",\n    },\n  },\n  titleContainer: {\n    marginTop: 2,\n    marginBottom: theme.hv.spacing.sm,\n  },\n  messageContainer: {},\n  actionContainer: {\n    marginTop: theme.hvSpacing(\"sm\"),\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

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

@@ -0,0 +1,89 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+import { FilesAddedEvent } from "../File";
+
+export interface HvDropZoneLabelsProp {
+  /**
+   * Extensions of the accepted file types
+   */
+  acceptedFiles?: string;
+  /**
+   * Dropzone area label.
+   */
+  dropzone?: string;
+  /**
+   * Size file warning label.
+   */
+  sizeWarning?: string;
+  /**
+   * Size file warning label.
+   */
+  drag?: string;
+  /**
+   * Size file warning label.
+   */
+  selectFiles?: string;
+  /**
+   * Theming sheet used to style components
+   * */
+  dropFiles?: string;
+  /**
+   * Message to display when file size is greater than allowed
+   * */
+  fileSizeError?: string;
+  /**
+   * Message to display when file type is greater than allowed
+   * */
+  fileTypeError?: string;
+}
+
+export type HvDropZoneClassKey =
+  | "dropZoneContainer"
+  | "dropZoneLabelsGroup"
+  | "dragAction"
+  | "dropZoneContainerDisabled"
+  | "inputArea"
+  | "dropArea"
+  | "dropZoneAreaLabels"
+  | "dropZoneAreaIcon"
+  | "dropZoneLabel"
+  | "dragText"
+  | "selectFilesText";
+
+export interface DropZoneProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvDropZoneClassKey> {
+  /**
+   * Labels to present in FileUploader.
+   */
+  labels?: HvDropZoneLabelsProp;
+  /**
+   * Whether the Dropzone should accept multiple files at once.
+   */
+  multiple?: boolean;
+  /**
+   * If the input is disabled or not
+   */
+  disabled?: boolean;
+  /**
+   * Files extensions accepted for upload.
+   */
+  acceptedFiles: string[];
+  /**
+   * Max upload size
+   * */
+  maxFileSize: number;
+  /**
+   * Function responsible for processing files added to the drop zone.
+   */
+  onFilesAdded?: FilesAddedEvent;
+  /**
+   * Whether the DropZone should hide labels or not.
+   */
+  hideLabels?: boolean;
+  /**
+   * Attributes applied to the input element.
+   */
+  inputProps?: object;
+}
+
+export default function DropZone(props: DropZoneProps): JSX.Element | null;

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

@@ -0,0 +1,261 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+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, HvLabel, HvInfoMessage } from "../..";
+import withId from "../../withId";
+import styles from "./styles";
+
+const DropZone = ({
+  id,
+  classes,
+  labels,
+  multiple = true,
+  disabled = false,
+  acceptedFiles,
+  maxFileSize,
+  onFilesAdded,
+  inputProps,
+  hideLabels
+}) => {
+  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, !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) && `${labels.sizeWarning} ${convertUnits(maxFileSize)}`, labels.acceptedFiles && labels.acceptedFiles, !labels.acceptedFiles && acceptedFiles.length > 0 && `\u00A0(${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", _extends({
+    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(",")
+  }, 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${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/modern/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/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,"sources":["../../../../src/FileUploader/DropZone/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,YAAxB","sourcesContent":["export { default } from \"./DropZone\";\n"],"file":"index.js"}