@onewelcome/react-lib-components 12.0.0 → 12.0.1

package/dist/components/Form/FileUpload/FileItem/FileItem.es.js

@@ -0,0 +1,224 @@
+import React, { Fragment } from "react";
+import classes from "./FileItem.module.scss.es.js";
+import { Typography } from "../../../Typography/Typography.es.js";
+import { Icons, Icon } from "../../../Icon/Icon.es.js";
+import { ProgressBar } from "../../../ProgressBar/ProgressBar.es.js";
+import { Button } from "../../../Button/Button.es.js";
+import { Link } from "../../../Link/Link.es.js";
+import { withReadOnly } from "../../../withReadOnly.es.js";
+var FILE_ACTION = /* @__PURE__ */ ((FILE_ACTION2) => {
+  FILE_ACTION2["DELETE"] = "delete";
+  FILE_ACTION2["DOWNLOAD"] = "download";
+  FILE_ACTION2["REMOVE"] = "remove";
+  FILE_ACTION2["ABORT"] = "abort";
+  FILE_ACTION2["RETRY"] = "retry";
+  return FILE_ACTION2;
+})(FILE_ACTION || {});
+var ACTION_STATUS = /* @__PURE__ */ ((ACTION_STATUS2) => {
+  ACTION_STATUS2["COMPLETED"] = "completed";
+  ACTION_STATUS2["UPLOADING"] = "uploading";
+  ACTION_STATUS2["ERROR"] = "error";
+  ACTION_STATUS2["RETRY"] = "retry";
+  ACTION_STATUS2["READONLY"] = "readonly";
+  return ACTION_STATUS2;
+})(ACTION_STATUS || {});
+const FileItemComponent = ({
+  name,
+  status,
+  error,
+  progress,
+  onDownloadFile,
+  downloadFileLink,
+  totalPercentage,
+  onRequestedFileAction,
+  ...rest
+}, ref) => {
+  const determineIcons = (status2) => {
+    switch (status2) {
+      case "completed":
+        return {
+          fileIcon: Icons.FileAltIcon,
+          actionIcons: [
+            {
+              type: Icons.Trash,
+              action: "delete"
+              /* DELETE */
+            },
+            {
+              type: Icons.DownloadFile,
+              action: "download"
+              /* DOWNLOAD */
+            }
+          ]
+        };
+      case "error":
+        return {
+          fileIcon: Icons.Error,
+          actionIcons: [
+            {
+              type: Icons.Times,
+              action: "remove"
+              /* REMOVE */
+            }
+          ]
+        };
+      case "uploading":
+        return {
+          fileIcon: Icons.FileAltIcon,
+          actionIcons: [
+            {
+              type: Icons.AbortFile,
+              action: "abort"
+              /* ABORT */
+            }
+          ]
+        };
+      case "retry":
+        return {
+          fileIcon: Icons.FileAltIcon,
+          actionIcons: [
+            {
+              type: Icons.Refresh,
+              action: "retry"
+              /* RETRY */
+            },
+            {
+              type: Icons.Trash,
+              action: "remove"
+              /* REMOVE */
+            }
+          ]
+        };
+      case "readonly":
+      default:
+        return { fileIcon: Icons.FileAltIcon };
+    }
+  };
+  const icons = determineIcons(status);
+  const getFriendlyNameAndExtension = (name2) => {
+    const index = name2.indexOf(".");
+    return { friendlyName: name2.slice(0, index), extension: name2.slice(index + 1) };
+  };
+  const { friendlyName, extension } = getFriendlyNameAndExtension(name);
+  const getStartIcon = (icon) => /* @__PURE__ */ React.createElement(
+    Icon,
+    {
+      key: icon.action,
+      title: icon.action,
+      icon: icon.type,
+      className: classes["action-icon"]
+    }
+  );
+  const renderActionIcons = (actionIcons) => {
+    return actionIcons.map((icon) => /* @__PURE__ */ React.createElement(Fragment, { key: icon.action }, icon.action !== "download" && /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        color: "primary",
+        startIcon: getStartIcon(icon),
+        title: icon.action !== "abort" ? icon.action : "",
+        type: "button",
+        variant: "text",
+        onClick: () => icon && onRequestedFileAction && onRequestedFileAction(icon.action, name)
+      },
+      icon.action !== "abort" ? icon.action : ""
+    ), icon.action === "download" && downloadFileLink && !onDownloadFile && /* @__PURE__ */ React.createElement(
+      Link,
+      {
+        color: "primary",
+        display: "link",
+        to: downloadFileLink,
+        type: "download",
+        target: "_blank",
+        prefixIcon: /* @__PURE__ */ React.createElement(
+          Icon,
+          {
+            key: icon.action,
+            className: classes["action-icon"],
+            title: icon.action,
+            icon: icon.type
+          }
+        )
+      },
+      icon.action
+    ), icon.action === "download" && onDownloadFile && /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        color: "primary",
+        onClick: onDownloadFile,
+        type: "button",
+        variant: "text",
+        startIcon: getStartIcon(icon)
+      },
+      icon.action
+    )));
+  };
+  const getUploadedFileInfo = () => {
+    return /* @__PURE__ */ React.createElement(
+      Typography,
+      {
+        variant: "body",
+        title: name,
+        className: `${classes["file-name"]} ${status ? classes[status] : ""}`
+      },
+      status === "retry" && /* @__PURE__ */ React.createElement(
+        Icon,
+        {
+          icon: Icons.Error,
+          className: `${classes["file-icon"]} ${status ? classes[status] : ""}`
+        }
+      ),
+      /* @__PURE__ */ React.createElement(Icon, { icon: icons.fileIcon, className: classes["file-icon"] }),
+      /* @__PURE__ */ React.createElement("span", { className: classes["friendly-name"] }, friendlyName, ".", extension)
+    );
+  };
+  const getProgressBar = () => {
+    return /* @__PURE__ */ React.createElement(
+      ProgressBar,
+      {
+        className: classes["progress-bar"],
+        completed: progress,
+        label: `${friendlyName}.${extension}`,
+        percentage: totalPercentage
+      }
+    );
+  };
+  const restPropsWithoutPointerEvents = () => {
+    var _a;
+    const props = rest;
+    (_a = rest == null ? void 0 : rest.style) == null ? true : delete _a.pointerEvents;
+    return props;
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      className: classes["file-item-wrapper"],
+      "aria-label": `${name}-wrapper`,
+      tabIndex: 0,
+      ...restPropsWithoutPointerEvents()
+    },
+    /* @__PURE__ */ React.createElement("div", { className: classes["file-list-container"] }, status !== "uploading" && getUploadedFileInfo(), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: `${status === "uploading" ? classes["progress-with-action"] : ""}`
+      },
+      status === "uploading" && getProgressBar(),
+      /* @__PURE__ */ React.createElement("div", { className: classes["action-button-wrapper"] }, icons.actionIcons && renderActionIcons(icons.actionIcons))
+    )),
+    error && /* @__PURE__ */ React.createElement(
+      Typography,
+      {
+        variant: "sub-text",
+        className: `${classes["file-subtitle"]} ${status ? classes[status] : ""}`
+      },
+      error
+    )
+  );
+};
+const FileItem = withReadOnly(React.forwardRef(FileItemComponent));
+export {
+  ACTION_STATUS,
+  FILE_ACTION,
+  FileItem
+};
+//# sourceMappingURL=FileItem.es.js.map

package/dist/components/Form/FileUpload/FileItem/FileItem.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileItem.es.js","sources":["../../../../../src/components/Form/FileUpload/FileItem/FileItem.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { ComponentPropsWithRef, ForwardRefRenderFunction, Fragment } from \"react\";\nimport classes from \"./FileItem.module.scss\";\nimport { Typography } from \"../../../Typography/Typography\";\nimport { Icon, Icons } from \"../../../Icon/Icon\";\nimport { ProgressBar } from \"../../../ProgressBar/ProgressBar\";\nimport { FileType } from \"../FileUpload\";\nimport { Button } from \"../../../Button/Button\";\nimport { Link } from \"../../../Link/Link\";\nimport { withReadOnly } from \"../../../withReadOnly\";\nexport type UploadProgress = \"uploading\" | \"completed\" | \"error\" | \"readonly\" | \"retry\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  name: string;\n  status?: UploadProgress;\n  progress?: number;\n  error?: string;\n  downloadFileLink?: string;\n  onDownloadFile?: () => void;\n  totalPercentage?: number;\n  onRequestedFileAction?: (action: FILE_ACTION, name: FileType[\"name\"]) => void;\n}\ninterface FileItemIcons {\n  fileIcon: Icons;\n  actionIcons?: { type: Icons; action: FILE_ACTION }[];\n}\n\nexport enum FILE_ACTION {\n  DELETE = \"delete\",\n  DOWNLOAD = \"download\",\n  REMOVE = \"remove\",\n  ABORT = \"abort\",\n  RETRY = \"retry\"\n}\n\nexport enum ACTION_STATUS {\n  COMPLETED = \"completed\",\n  UPLOADING = \"uploading\",\n  ERROR = \"error\",\n  RETRY = \"retry\",\n  READONLY = \"readonly\"\n}\n\nconst FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    name,\n    status,\n    error,\n    progress,\n    onDownloadFile,\n    downloadFileLink,\n    totalPercentage,\n    onRequestedFileAction,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const determineIcons = (status?: UploadProgress): FileItemIcons => {\n    switch (status) {\n      case ACTION_STATUS.COMPLETED:\n        return {\n          fileIcon: Icons.FileAltIcon,\n          actionIcons: [\n            {\n              type: Icons.Trash,\n              action: FILE_ACTION.DELETE\n            },\n            {\n              type: Icons.DownloadFile,\n              action: FILE_ACTION.DOWNLOAD\n            }\n          ]\n        };\n      case ACTION_STATUS.ERROR:\n        return {\n          fileIcon: Icons.Error,\n          actionIcons: [\n            {\n              type: Icons.Times,\n              action: FILE_ACTION.REMOVE\n            }\n          ]\n        };\n      case ACTION_STATUS.UPLOADING:\n        return {\n          fileIcon: Icons.FileAltIcon,\n          actionIcons: [\n            {\n              type: Icons.AbortFile,\n              action: FILE_ACTION.ABORT\n            }\n          ]\n        };\n      case ACTION_STATUS.RETRY:\n        return {\n          fileIcon: Icons.FileAltIcon,\n          actionIcons: [\n            {\n              type: Icons.Refresh,\n              action: FILE_ACTION.RETRY\n            },\n            {\n              type: Icons.Trash,\n              action: FILE_ACTION.REMOVE\n            }\n          ]\n        };\n      case ACTION_STATUS.READONLY:\n      default:\n        return { fileIcon: Icons.FileAltIcon };\n    }\n  };\n\n  const icons = determineIcons(status);\n\n  const getFriendlyNameAndExtension = (name: string) => {\n    const index = name.indexOf(\".\");\n    return { friendlyName: name.slice(0, index), extension: name.slice(index + 1) };\n  };\n\n  const { friendlyName, extension } = getFriendlyNameAndExtension(name);\n\n  const getStartIcon = (icon: { type: Icons; action: FILE_ACTION }) => (\n    <Icon\n      key={icon.action}\n      title={icon.action}\n      icon={icon.type}\n      className={classes[\"action-icon\"]}\n    ></Icon>\n  );\n\n  const renderActionIcons = (actionIcons: { type: Icons; action: FILE_ACTION }[]) => {\n    return actionIcons.map(icon => (\n      <Fragment key={icon.action}>\n        {icon.action !== FILE_ACTION.DOWNLOAD && (\n          <Button\n            color=\"primary\"\n            startIcon={getStartIcon(icon)}\n            title={icon.action !== FILE_ACTION.ABORT ? icon.action : \"\"}\n            type=\"button\"\n            variant=\"text\"\n            onClick={() =>\n              icon && onRequestedFileAction && onRequestedFileAction(icon.action, name)\n            }\n          >\n            {icon.action !== FILE_ACTION.ABORT ? icon.action : \"\"}\n          </Button>\n        )}\n\n        {icon.action === FILE_ACTION.DOWNLOAD && downloadFileLink && !onDownloadFile && (\n          <Link\n            color=\"primary\"\n            display=\"link\"\n            to={downloadFileLink}\n            type=\"download\"\n            target=\"_blank\"\n            prefixIcon={\n              <Icon\n                key={icon.action}\n                className={classes[\"action-icon\"]}\n                title={icon.action}\n                icon={icon.type}\n              ></Icon>\n            }\n          >\n            {icon.action}\n          </Link>\n        )}\n\n        {icon.action === FILE_ACTION.DOWNLOAD && onDownloadFile && (\n          <Button\n            color=\"primary\"\n            onClick={onDownloadFile}\n            type=\"button\"\n            variant=\"text\"\n            startIcon={getStartIcon(icon)}\n          >\n            {icon.action}\n          </Button>\n        )}\n      </Fragment>\n    ));\n  };\n\n  const getUploadedFileInfo = () => {\n    return (\n      <Typography\n        variant={\"body\"}\n        title={name}\n        className={`${classes[\"file-name\"]} ${status ? classes[status] : \"\"}`}\n      >\n        {status === \"retry\" && (\n          <Icon\n            icon={Icons.Error}\n            className={`${classes[\"file-icon\"]} ${status ? classes[status] : \"\"}`}\n          />\n        )}\n        <Icon icon={icons.fileIcon} className={classes[\"file-icon\"]} />\n        <span className={classes[\"friendly-name\"]}>\n          {friendlyName}.{extension}\n        </span>\n      </Typography>\n    );\n  };\n\n  const getProgressBar = () => {\n    return (\n      <ProgressBar\n        className={classes[\"progress-bar\"]}\n        completed={progress}\n        label={`${friendlyName}.${extension}`}\n        percentage={totalPercentage}\n      />\n    );\n  };\n\n  const restPropsWithoutPointerEvents = () => {\n    const props = rest;\n    delete rest?.style?.pointerEvents;\n    return props;\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={classes[\"file-item-wrapper\"]}\n      aria-label={`${name}-wrapper`}\n      tabIndex={0}\n      {...restPropsWithoutPointerEvents()}\n    >\n      <div className={classes[\"file-list-container\"]}>\n        {status !== ACTION_STATUS.UPLOADING && getUploadedFileInfo()}\n\n        <div\n          className={`${status === ACTION_STATUS.UPLOADING ? classes[\"progress-with-action\"] : \"\"}`}\n        >\n          {status === ACTION_STATUS.UPLOADING && getProgressBar()}\n\n          <div className={classes[\"action-button-wrapper\"]}>\n            {icons.actionIcons && renderActionIcons(icons.actionIcons)}\n          </div>\n        </div>\n      </div>\n      {error && (\n        <Typography\n          variant={\"sub-text\"}\n          className={`${classes[\"file-subtitle\"]} ${status ? classes[status] : \"\"}`}\n        >\n          {error}\n        </Typography>\n      )}\n    </div>\n  );\n};\n\nexport const FileItem = withReadOnly(React.forwardRef(FileItemComponent));\n"],"names":["FILE_ACTION","ACTION_STATUS","status","name"],"mappings":"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"}

package/dist/components/Form/FileUpload/FileItem/FileItem.module.scss.cjs.js

@@ -0,0 +1,3 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.FileItem_sr-only_gFXfX{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.FileItem_hidden_gFXfX{display:none}.FileItem_slide-in_gFXfX{animation:FileItem_slide-in_gFXfX .5s forwards}@media (prefers-reduced-motion: reduce){.FileItem_slide-in_gFXfX{animation-duration:.1ms}}.FileItem_slide-out_gFXfX{animation:FileItem_slide-out_gFXfX .5s forwards}@media (prefers-reduced-motion: reduce){.FileItem_slide-out_gFXfX{animation-duration:.1ms}}@keyframes FileItem_slide-in_gFXfX{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes FileItem_slide-out_gFXfX{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.FileItem_file-item-wrapper_gFXfX{padding:0;border-radius:var(--input-border-radius);transition-property:all;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.FileItem_file-item-wrapper_gFXfX{transition-duration:.1ms}}.FileItem_file-item-wrapper_gFXfX [class*=icon]{font-size:var(--font-size-big)}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX{background-color:var(--color-blue-grey25);padding:.25rem .75rem;display:flex;justify-content:space-between;flex-wrap:wrap;min-height:2.875rem}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_action-button-wrapper_gFXfX{margin:.25rem 0;display:flex}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_action-button-wrapper_gFXfX button{margin-left:.5rem}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_action-button-wrapper_gFXfX button span{font-size:var(--button-font-size);text-transform:capitalize}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_action-button-wrapper_gFXfX a{padding-left:.75rem;padding-right:1.25rem;font-weight:500;cursor:pointer;display:flex;align-items:center;text-decoration:none;margin-left:.5rem}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_action-button-wrapper_gFXfX a span.FileItem_action-icon_gFXfX{display:flex;justify-content:center;width:calc(1.71 * var(--button-font-size));margin-right:.25rem;font-size:var(--button-font-size);padding-left:0}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_action-button-wrapper_gFXfX a span{font-size:var(--button-font-size);text-transform:capitalize}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_action-button-wrapper_gFXfX a:hover{color:var(--button-primary-hover-color);background-color:var(--color-black10)}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_action-button-wrapper_gFXfX a:focus{outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:2px;border-radius:var(--focus-border-radius)}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_progress-with-action_gFXfX{width:100%;display:flex;align-items:center}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_progress-with-action_gFXfX .FileItem_progress-bar_gFXfX{min-height:3rem;width:100%;background:transparent}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_progress-with-action_gFXfX .FileItem_progress-bar_gFXfX>span{height:.3rem;border-radius:var(--input-border-radius)}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_progress-with-action_gFXfX .FileItem_progress-bar_gFXfX p{font-size:var(--button-font-size)}.FileItem_file-item-wrapper_gFXfX .FileItem_progress-bar_gFXfX{background-color:var(--color-black10)}.FileItem_file-item-wrapper_gFXfX span[class*=bar--]{border-radius:var(--input-border-radius);height:1rem}.FileItem_file-item-wrapper_gFXfX .FileItem_file-name_gFXfX{margin:0;display:flex;align-items:center;font-size:var(--form-control-font-size)}.FileItem_file-item-wrapper_gFXfX .FileItem_file-name_gFXfX .FileItem_friendly-name_gFXfX{overflow-wrap:anywhere;text-overflow:ellipsis;text-wrap:wrap}.FileItem_file-item-wrapper_gFXfX .FileItem_file-name_gFXfX.FileItem_error_gFXfX span:before{color:var(--error)}.FileItem_file-item-wrapper_gFXfX .FileItem_action-icon_gFXfX{margin-left:auto;color:var(--color-primary);cursor:pointer;padding-left:1.25rem;margin-right:1rem}.FileItem_file-item-wrapper_gFXfX .FileItem_action-icon_gFXfX label,.FileItem_file-item-wrapper_gFXfX .FileItem_action-icon_gFXfX a{text-transform:capitalize;padding-left:.5rem;cursor:pointer;color:var(--color-primary);text-decoration:none}.FileItem_file-item-wrapper_gFXfX .FileItem_file-icon_gFXfX{margin-right:.5rem}.FileItem_file-item-wrapper_gFXfX .FileItem_file-icon_gFXfX:before{color:var(--color-primary500)}.FileItem_file-item-wrapper_gFXfX .FileItem_file-icon_gFXfX.FileItem_retry_gFXfX:before{color:var(--error)}.FileItem_file-item-wrapper_gFXfX .FileItem_file-subtitle_gFXfX,.FileItem_file-item-wrapper_gFXfX .FileItem_progress-bar_gFXfX{display:block;margin:.3125rem 1.75rem;padding:0;overflow-wrap:anywhere;text-overflow:ellipsis;text-wrap:wrap}.FileItem_file-item-wrapper_gFXfX .FileItem_error_gFXfX,.FileItem_file-item-wrapper_gFXfX .FileItem_retry_gFXfX{color:var(--error)}.FileItem_file-item-wrapper_gFXfX .FileItem_readonly_gFXfX{color:var(--greyed-out)}.FileItem_file-item-wrapper_gFXfX .FileItem_file-subtitle_gFXfX{margin-left:0}.FileItem_file-item-wrapper_gFXfX[data-readonlyview=true] .FileItem_file-list-container_gFXfX p span:before{color:var(--font-family)}.FileItem_file-item-wrapper_gFXfX[data-readonlyview=true] .FileItem_file-list-container_gFXfX button{visibility:hidden}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="FileItem_hidden_gFXfX",i="FileItem_error_gFXfX",t="FileItem_retry_gFXfX",r="FileItem_readonly_gFXfX",l={"sr-only":"FileItem_sr-only_gFXfX",hidden:e,"slide-in":"FileItem_slide-in_gFXfX","slide-out":"FileItem_slide-out_gFXfX","file-item-wrapper":"FileItem_file-item-wrapper_gFXfX","file-list-container":"FileItem_file-list-container_gFXfX","action-button-wrapper":"FileItem_action-button-wrapper_gFXfX","action-icon":"FileItem_action-icon_gFXfX","progress-with-action":"FileItem_progress-with-action_gFXfX","progress-bar":"FileItem_progress-bar_gFXfX","file-name":"FileItem_file-name_gFXfX","friendly-name":"FileItem_friendly-name_gFXfX",error:i,"file-icon":"FileItem_file-icon_gFXfX",retry:t,"file-subtitle":"FileItem_file-subtitle_gFXfX",readonly:r};exports.default=l,exports.error=i,exports.hidden=e,exports.readonly=r,exports.retry=t;
+//# sourceMappingURL=FileItem.module.scss.cjs.js.map

package/dist/components/Form/FileUpload/FileItem/FileItem.module.scss.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileItem.module.scss.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Form/FileUpload/FileItem/FileItem.module.scss.es.js

@@ -0,0 +1,32 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.FileItem_sr-only_gFXfX{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.FileItem_hidden_gFXfX{display:none}.FileItem_slide-in_gFXfX{animation:FileItem_slide-in_gFXfX .5s forwards}@media (prefers-reduced-motion: reduce){.FileItem_slide-in_gFXfX{animation-duration:.1ms}}.FileItem_slide-out_gFXfX{animation:FileItem_slide-out_gFXfX .5s forwards}@media (prefers-reduced-motion: reduce){.FileItem_slide-out_gFXfX{animation-duration:.1ms}}@keyframes FileItem_slide-in_gFXfX{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes FileItem_slide-out_gFXfX{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.FileItem_file-item-wrapper_gFXfX{padding:0;border-radius:var(--input-border-radius);transition-property:all;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.FileItem_file-item-wrapper_gFXfX{transition-duration:.1ms}}.FileItem_file-item-wrapper_gFXfX [class*=icon]{font-size:var(--font-size-big)}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX{background-color:var(--color-blue-grey25);padding:.25rem .75rem;display:flex;justify-content:space-between;flex-wrap:wrap;min-height:2.875rem}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_action-button-wrapper_gFXfX{margin:.25rem 0;display:flex}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_action-button-wrapper_gFXfX button{margin-left:.5rem}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_action-button-wrapper_gFXfX button span{font-size:var(--button-font-size);text-transform:capitalize}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_action-button-wrapper_gFXfX a{padding-left:.75rem;padding-right:1.25rem;font-weight:500;cursor:pointer;display:flex;align-items:center;text-decoration:none;margin-left:.5rem}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_action-button-wrapper_gFXfX a span.FileItem_action-icon_gFXfX{display:flex;justify-content:center;width:calc(1.71 * var(--button-font-size));margin-right:.25rem;font-size:var(--button-font-size);padding-left:0}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_action-button-wrapper_gFXfX a span{font-size:var(--button-font-size);text-transform:capitalize}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_action-button-wrapper_gFXfX a:hover{color:var(--button-primary-hover-color);background-color:var(--color-black10)}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_action-button-wrapper_gFXfX a:focus{outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:2px;border-radius:var(--focus-border-radius)}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_progress-with-action_gFXfX{width:100%;display:flex;align-items:center}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_progress-with-action_gFXfX .FileItem_progress-bar_gFXfX{min-height:3rem;width:100%;background:transparent}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_progress-with-action_gFXfX .FileItem_progress-bar_gFXfX>span{height:.3rem;border-radius:var(--input-border-radius)}.FileItem_file-item-wrapper_gFXfX .FileItem_file-list-container_gFXfX .FileItem_progress-with-action_gFXfX .FileItem_progress-bar_gFXfX p{font-size:var(--button-font-size)}.FileItem_file-item-wrapper_gFXfX .FileItem_progress-bar_gFXfX{background-color:var(--color-black10)}.FileItem_file-item-wrapper_gFXfX span[class*=bar--]{border-radius:var(--input-border-radius);height:1rem}.FileItem_file-item-wrapper_gFXfX .FileItem_file-name_gFXfX{margin:0;display:flex;align-items:center;font-size:var(--form-control-font-size)}.FileItem_file-item-wrapper_gFXfX .FileItem_file-name_gFXfX .FileItem_friendly-name_gFXfX{overflow-wrap:anywhere;text-overflow:ellipsis;text-wrap:wrap}.FileItem_file-item-wrapper_gFXfX .FileItem_file-name_gFXfX.FileItem_error_gFXfX span:before{color:var(--error)}.FileItem_file-item-wrapper_gFXfX .FileItem_action-icon_gFXfX{margin-left:auto;color:var(--color-primary);cursor:pointer;padding-left:1.25rem;margin-right:1rem}.FileItem_file-item-wrapper_gFXfX .FileItem_action-icon_gFXfX label,.FileItem_file-item-wrapper_gFXfX .FileItem_action-icon_gFXfX a{text-transform:capitalize;padding-left:.5rem;cursor:pointer;color:var(--color-primary);text-decoration:none}.FileItem_file-item-wrapper_gFXfX .FileItem_file-icon_gFXfX{margin-right:.5rem}.FileItem_file-item-wrapper_gFXfX .FileItem_file-icon_gFXfX:before{color:var(--color-primary500)}.FileItem_file-item-wrapper_gFXfX .FileItem_file-icon_gFXfX.FileItem_retry_gFXfX:before{color:var(--error)}.FileItem_file-item-wrapper_gFXfX .FileItem_file-subtitle_gFXfX,.FileItem_file-item-wrapper_gFXfX .FileItem_progress-bar_gFXfX{display:block;margin:.3125rem 1.75rem;padding:0;overflow-wrap:anywhere;text-overflow:ellipsis;text-wrap:wrap}.FileItem_file-item-wrapper_gFXfX .FileItem_error_gFXfX,.FileItem_file-item-wrapper_gFXfX .FileItem_retry_gFXfX{color:var(--error)}.FileItem_file-item-wrapper_gFXfX .FileItem_readonly_gFXfX{color:var(--greyed-out)}.FileItem_file-item-wrapper_gFXfX .FileItem_file-subtitle_gFXfX{margin-left:0}.FileItem_file-item-wrapper_gFXfX[data-readonlyview=true] .FileItem_file-list-container_gFXfX p span:before{color:var(--font-family)}.FileItem_file-item-wrapper_gFXfX[data-readonlyview=true] .FileItem_file-list-container_gFXfX button{visibility:hidden}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
+const hidden = "FileItem_hidden_gFXfX";
+const error = "FileItem_error_gFXfX";
+const retry = "FileItem_retry_gFXfX";
+const readonly = "FileItem_readonly_gFXfX";
+const classes = {
+  "sr-only": "FileItem_sr-only_gFXfX",
+  hidden,
+  "slide-in": "FileItem_slide-in_gFXfX",
+  "slide-out": "FileItem_slide-out_gFXfX",
+  "file-item-wrapper": "FileItem_file-item-wrapper_gFXfX",
+  "file-list-container": "FileItem_file-list-container_gFXfX",
+  "action-button-wrapper": "FileItem_action-button-wrapper_gFXfX",
+  "action-icon": "FileItem_action-icon_gFXfX",
+  "progress-with-action": "FileItem_progress-with-action_gFXfX",
+  "progress-bar": "FileItem_progress-bar_gFXfX",
+  "file-name": "FileItem_file-name_gFXfX",
+  "friendly-name": "FileItem_friendly-name_gFXfX",
+  error,
+  "file-icon": "FileItem_file-icon_gFXfX",
+  retry,
+  "file-subtitle": "FileItem_file-subtitle_gFXfX",
+  readonly
+};
+export {
+  classes as default,
+  error,
+  hidden,
+  readonly,
+  retry
+};
+//# sourceMappingURL=FileItem.module.scss.es.js.map

package/dist/components/Form/FileUpload/FileItem/FileItem.module.scss.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileItem.module.scss.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Form/FileUpload/FileUpload.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),a=require("../../Button/Button.cjs.js"),t=require("./FileItem/FileItem.cjs.js"),l=require("../../Typography/Typography.cjs.js"),r=require("./FileUpload.module.scss.cjs.js"),s=require("../../../hooks/useDetermineStatusIcon.cjs.js"),n=require("../Label/Label.cjs.js"),o=require("../../withReadOnly.cjs.js").withReadOnly(e.forwardRef((({name:o,accept:i,error:u,success:d,maxFileSizeInBytes:p,multiple:c,id:f,title:m,labeledBy:g,disabled:v=!1,onChange:h,dragAndDropText:y="Drag and drop or",selectButtonText:E="Browse file",readOnlyViewMessage:b="No file uploaded",onDragOver:j,onDragLeave:x,wrapperProps:D,onDrop:F,onRequestedFileAction:w,exceedingMaxSizeErrorText:N,fileList:T,onDownloadFile:q,downloadFileLink:$,isRequired:z=!0,invalidDropErrorMessage:S="Invalid file format. Supported formats are: $accept.",noMultipleFileDropErrorMessage:B="You can upload only a single file.",helperText:L,...I},M)=>{const P=e.useRef(null),[R,k]=e.useState(!1),[O,A]=e.useState(""),[C,U]=e.useState(!1),K=s.useDetermineStatusIcon({success:d,error:u}),V=[r.default["file-dropzone"]],Y=[r.default["upload-button-wrapper"]],_=[r.default["file-selector-sub-text"]],G=[r.default["file-selector-sub-text"]];R&&Y.push(r.default["drag-active"]);const H=C||u||O,J=I["data-readonlyview"];if(H){const e=r.default.error;V.push(e),_.push(e),G.push(e)}v&&Y.push(r.default.disabled),d&&!u&&V.push(r.default.success);const Q=`input-${o}`,W=[r.default["file-upload-title"]];z&&W.push(r.default.required);const X=e=>{let a=T?[...T]:[];const t=T.map((e=>e.name));return(null==e?void 0:e.length)&&Array.from(e).forEach((e=>{t.includes(e.name)||(a=c?[...a,{...Z(e),data:e}]:[{...Z(e),data:e}])})),a},Z=e=>{const a={name:e.name,size:e.size,type:e.type};let t=!1;if(p&&e.size&&e.size>=p){let e;e=p>=1048576?`${parseFloat((p/1048576).toFixed(2))}MB`:`${parseFloat((p/1024).toFixed(2))}KB`,a.error=N??`The maximum allowed file size is ${e}. Upload a smaller file.`,a.status="error",t=!0}return U(t),a};return e.useEffect((()=>{if(T.length){const e=T.map((e=>Z(e)));null==h||h(e)}}),[]),e.createElement("div",{className:r.default["file-upload-wrapper"],...D},e.createElement("div",{className:r.default["dropzone-wrapper"]},e.createElement("div",{className:V.join(" "),"data-readonlyview":J},e.createElement(n.Label,{ref:P,className:`${W.join(" ")}`,htmlFor:Q},m),(null==T?void 0:T.length)>0&&e.createElement("ul",{className:r.default["file-list"]},T.map((({name:a,status:l,progress:r,error:s})=>e.createElement("li",{key:a,className:l,id:a},e.createElement(t.FileItem,{name:a,key:`${a}_${l}`,status:l,progress:r,error:s,downloadFileLink:$,onDownloadFile:q,onRequestedFileAction:w}))))),e.createElement("div",{className:Y.join(" "),onDragOver:e=>!v&&(e=>{e.preventDefault(),e.stopPropagation(),R||k(!0),null==j||j(e)})(e),onDragLeave:e=>!v&&(e=>{var a;e.preventDefault(),e.stopPropagation();const t=e.target;(null==(a=null==t?void 0:t.offsetParent)?void 0:a.classList.contains(r.default["file-dropzone"]))&&k(!1),null==x||x(e)})(e),onDrop:e=>!v&&(e=>{var a,t,l;if(e.preventDefault(),e.stopPropagation(),(null==(a=null==e?void 0:e.dataTransfer)?void 0:a.files)&&e.dataTransfer.files.length){const a=null==(l=null==(t=null==e?void 0:e.dataTransfer)?void 0:t.files[0])?void 0:l.name.split(".").pop();if(a&&i&&!i.includes(a))return A(S.replace("$accept",i)),void k(!1);if(!c&&e.dataTransfer.files.length>1)return A(B),void k(!1);A("");const r=X(e.dataTransfer.files);F?null==F||F(r):null==h||h(r)}k(!1)})(e),tabIndex:J?0:-1},e.createElement("div",{className:r.default["file-select"]},e.createElement(l.Typography,{variant:"body",className:"drag-and-drop-text"},J?b:y),e.createElement("div",{className:r.default["file-upload-btn"]},e.createElement(a.Button,{variant:"outline",disabled:v},E,e.createElement("input",{...I,className:`${r.default["upload-input"]} ${I.className}`,ref:M,"aria-labelledby":g,type:"file",id:Q,name:o,multiple:c,disabled:v,accept:i,onChange:e=>{e.preventDefault(),e.stopPropagation();const a=X(e.target.files);a.length&&(e=>{const a=e.name.split(".").pop();return a&&i.includes(a)})(a[a.length-1])&&(A(""),e.target.value="",null==h||h(a))},spellCheck:!1}))),!v&&K,e.createElement("span",{className:r.default.outline})))),O&&e.createElement(l.Typography,{variant:"sub-text",className:G.join(" ")},O),L&&e.createElement(l.Typography,{variant:"sub-text",className:_.join(" ")},L)))})));exports.FileUpload=o;
+//# sourceMappingURL=FileUpload.cjs.js.map

package/dist/components/Form/FileUpload/FileUpload.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.cjs.js","sources":["../../../../src/components/Form/FileUpload/FileUpload.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  DragEvent,\n  DragEventHandler,\n  ForwardRefRenderFunction,\n  useEffect,\n  useRef,\n  useState\n} from \"react\";\nimport { Button } from \"../../Button/Button\";\nimport { FILE_ACTION, FileItem, Props as FileConfig } from \"./FileItem/FileItem\";\nimport { Props as InputProps } from \"../Input/Input\";\nimport { Typography } from \"../../Typography/Typography\";\nimport classes from \"./FileUpload.module.scss\";\nimport { useDetermineStatusIcon } from \"../../../hooks/useDetermineStatusIcon\";\nimport { Label } from \"../Label/Label\";\nimport { withReadOnly } from \"../../withReadOnly\";\n\ntype FileUploadType = Omit<InputProps, \"onDrop\" | \"type\" | \"onChange\" | \"suffix\" | \"prefix\">;\nexport type FileType = Omit<FileConfig, \"onRequestedFileAction\"> &\n  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n  Pick<File, \"size\" | \"type\"> & { data?: any };\n\nexport interface Props extends FileUploadType {\n  accept: string;\n  title: string;\n  multiple: boolean;\n  fileList: FileType[];\n  exceedingMaxSizeErrorText?: string;\n  maxFileSizeInBytes?: number;\n  selectButtonText?: string;\n  dragAndDropText?: string;\n  onDragOver?: DragEventHandler;\n  onDragEnter?: DragEventHandler;\n  onDragLeave?: DragEventHandler;\n  onDrop?: (e: FileType[]) => void;\n  onChange?: (e: FileType[]) => void;\n  onRequestedFileAction?: (action: FILE_ACTION, name: FileType[\"name\"]) => void;\n  downloadFileLink?: string;\n  onDownloadFile?: () => void;\n  isRequired?: boolean;\n  invalidDropErrorMessage?: string;\n  noMultipleFileDropErrorMessage?: string;\n  readOnlyViewMessage?: string;\n  helperText?: string;\n}\n\nconst FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (\n  {\n    name,\n    accept,\n    error,\n    success,\n    maxFileSizeInBytes,\n    multiple,\n    id,\n    title,\n    labeledBy,\n    disabled = false,\n    onChange,\n    dragAndDropText = \"Drag and drop or\",\n    selectButtonText = \"Browse file\",\n    readOnlyViewMessage = \"No file uploaded\",\n    onDragOver,\n    onDragLeave,\n    wrapperProps,\n    onDrop,\n    onRequestedFileAction,\n    exceedingMaxSizeErrorText,\n    fileList,\n    onDownloadFile,\n    downloadFileLink,\n    isRequired = true,\n    invalidDropErrorMessage = \"Invalid file format. Supported formats are: $accept.\",\n    noMultipleFileDropErrorMessage = \"You can upload only a single file.\",\n    helperText,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const labelRef = useRef(null);\n  const [dragActive, setDragActive] = useState(false);\n  const [errorMsg, setErrorMsg] = useState(\"\");\n  const [inputError, setInputError] = useState(false);\n  const icon = useDetermineStatusIcon({ success, error });\n  const dropzoneClassNames = [classes[\"file-dropzone\"]];\n  const dropzoneContainerClassNames = [classes[\"upload-button-wrapper\"]];\n  const subTextClass = [classes[\"file-selector-sub-text\"]];\n  const errorTextClass = [classes[\"file-selector-sub-text\"]];\n  dragActive && dropzoneContainerClassNames.push(classes[\"drag-active\"]);\n  const hasError = inputError || error || errorMsg;\n  const readOnlyView = rest[\"data-readonlyview\"];\n  if (hasError) {\n    const errorClass = classes[\"error\"];\n    dropzoneClassNames.push(errorClass);\n    subTextClass.push(errorClass);\n    errorTextClass.push(errorClass);\n  }\n  disabled && dropzoneContainerClassNames.push(classes[\"disabled\"]);\n  success && !error && dropzoneClassNames.push(classes[\"success\"]);\n  const inputId = `input-${name}`;\n  const labelClasses = [classes[\"file-upload-title\"]];\n  isRequired && labelClasses.push(classes[\"required\"]);\n\n  const getFileList = (files: FileList | null): FileType[] => {\n    let savedFiles = fileList ? [...fileList] : [];\n    const fileNames = fileList.map(el => el.name);\n    files?.length &&\n      Array.from(files as ArrayLike<File>).forEach(el => {\n        if (!fileNames.includes(el.name)) {\n          savedFiles = multiple\n            ? [\n                ...savedFiles,\n                {\n                  ...validateUpload(el),\n                  data: el\n                }\n              ]\n            : [\n                {\n                  ...validateUpload(el),\n                  data: el\n                }\n              ];\n        }\n      });\n    return savedFiles;\n  };\n  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    const files = getFileList(e.target.files);\n    const isFileValid = files.length && verifyExtensionValidity(files[files.length - 1]);\n\n    if (isFileValid) {\n      setErrorMsg(\"\");\n      e.target.value = \"\";\n      onChange?.(files);\n    }\n  };\n\n  const verifyExtensionValidity = (file: FileType) => {\n    const extension = file.name.split(\".\").pop();\n    return extension && accept.includes(extension);\n  };\n\n  const validateUpload = (file: FileType) => {\n    const result: FileType = {\n      name: file.name,\n      size: file.size,\n      type: file.type\n    };\n\n    let err = false;\n\n    if (maxFileSizeInBytes && file.size && file.size >= maxFileSizeInBytes) {\n      let sizeMessage: string;\n      const isAtLeastOneMb = maxFileSizeInBytes >= 1024 * 1024;\n\n      if (isAtLeastOneMb) {\n        sizeMessage = `${parseFloat((maxFileSizeInBytes / (1024 * 1024)).toFixed(2))}MB`;\n      } else {\n        sizeMessage = `${parseFloat((maxFileSizeInBytes / 1024).toFixed(2))}KB`;\n      }\n\n      result.error =\n        exceedingMaxSizeErrorText ??\n        `The maximum allowed file size is ${sizeMessage}. Upload a smaller file.`;\n      result.status = \"error\";\n      err = true;\n    }\n\n    setInputError(err);\n    return result;\n  };\n\n  useEffect(() => {\n    if (fileList.length) {\n      const validatedFiles = fileList.map(file => validateUpload(file));\n      onChange?.(validatedFiles);\n    }\n  }, []);\n\n  const handleOnDragOver = (e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (!dragActive) {\n      setDragActive(true);\n    }\n    onDragOver?.(e);\n  };\n\n  const handleOnDragLeave = (e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    const target = e.target as HTMLElement;\n    if (target?.offsetParent?.classList.contains(classes[\"file-dropzone\"])) {\n      setDragActive(false);\n    }\n    onDragLeave?.(e);\n  };\n\n  const handleOnDrop = (e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (e?.dataTransfer?.files && e.dataTransfer.files.length) {\n      const extension = e?.dataTransfer?.files[0]?.name.split(\".\").pop();\n      if (extension && accept && !accept.includes(extension)) {\n        setErrorMsg(invalidDropErrorMessage.replace(\"$accept\", accept));\n        setDragActive(false);\n        return;\n      } else if (!multiple && e.dataTransfer.files.length > 1) {\n        setErrorMsg(noMultipleFileDropErrorMessage);\n        setDragActive(false);\n        return;\n      } else {\n        setErrorMsg(\"\");\n      }\n      const validatedFiles = getFileList(e.dataTransfer.files);\n      onDrop ? onDrop?.(validatedFiles) : onChange?.(validatedFiles);\n    }\n    setDragActive(false);\n  };\n\n  return (\n    <div className={classes[\"file-upload-wrapper\"]} {...wrapperProps}>\n      <div className={classes[\"dropzone-wrapper\"]}>\n        <div className={dropzoneClassNames.join(\" \")} data-readonlyview={readOnlyView}>\n          <Label ref={labelRef} className={`${labelClasses.join(\" \")}`} htmlFor={inputId}>\n            {title}\n          </Label>\n          {fileList?.length > 0 && (\n            <ul className={classes[\"file-list\"]}>\n              {fileList.map(({ name, status, progress, error }) => (\n                <li key={name} className={status} id={name}>\n                  <FileItem\n                    name={name}\n                    key={`${name}_${status}`}\n                    status={status}\n                    progress={progress}\n                    error={error}\n                    downloadFileLink={downloadFileLink}\n                    onDownloadFile={onDownloadFile}\n                    onRequestedFileAction={onRequestedFileAction}\n                  />\n                </li>\n              ))}\n            </ul>\n          )}\n\n          <div\n            className={dropzoneContainerClassNames.join(\" \")}\n            onDragOver={e => !disabled && handleOnDragOver(e)}\n            onDragLeave={e => !disabled && handleOnDragLeave(e)}\n            onDrop={e => !disabled && handleOnDrop(e)}\n            tabIndex={readOnlyView ? 0 : -1}\n          >\n            <div className={classes[\"file-select\"]}>\n              <Typography variant=\"body\" className={\"drag-and-drop-text\"}>\n                {readOnlyView ? readOnlyViewMessage : dragAndDropText}\n              </Typography>\n\n              <div className={classes[\"file-upload-btn\"]}>\n                <Button variant=\"outline\" disabled={disabled}>\n                  {selectButtonText}\n                  <input\n                    {...rest}\n                    className={`${classes[\"upload-input\"]} ${rest.className}`}\n                    ref={ref}\n                    aria-labelledby={labeledBy}\n                    type=\"file\"\n                    id={inputId}\n                    name={name}\n                    multiple={multiple}\n                    disabled={disabled}\n                    accept={accept}\n                    onChange={onInputChange}\n                    spellCheck={false}\n                  />\n                </Button>\n              </div>\n              {!disabled && icon}\n              <span className={classes[\"outline\"]}></span>\n            </div>\n          </div>\n        </div>\n        {errorMsg && (\n          <Typography variant={\"sub-text\"} className={errorTextClass.join(\" \")}>\n            {errorMsg}\n          </Typography>\n        )}\n        {helperText && (\n          <Typography variant={\"sub-text\"} className={subTextClass.join(\" \")}>\n            {helperText}\n          </Typography>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const FileUpload = withReadOnly(React.forwardRef(FileUploadComponent));\n"],"names":["FileUpload","withReadOnly","React","forwardRef","name","accept","error","success","maxFileSizeInBytes","multiple","id","title","labeledBy","disabled","onChange","dragAndDropText","selectButtonText","readOnlyViewMessage","onDragOver","onDragLeave","wrapperProps","onDrop","onRequestedFileAction","exceedingMaxSizeErrorText","fileList","onDownloadFile","downloadFileLink","isRequired","invalidDropErrorMessage","noMultipleFileDropErrorMessage","helperText","rest","ref","labelRef","useRef","dragActive","setDragActive","useState","errorMsg","setErrorMsg","inputError","setInputError","icon","useDetermineStatusIcon","dropzoneClassNames","classes","dropzoneContainerClassNames","subTextClass","errorTextClass","push","default","hasError","readOnlyView","errorClass","inputId","labelClasses","getFileList","files","savedFiles","fileNames","map","el","length","Array","from","forEach","includes","validateUpload","data","file","result","size","type","err","sizeMessage","parseFloat","toFixed","status","useEffect","validatedFiles","createElement","className","join","Label","htmlFor","progress","key","FileItem","e","preventDefault","stopPropagation","handleOnDragOver","target","_a","offsetParent","classList","contains","handleOnDragLeave","dataTransfer","extension","_c","_b","split","pop","replace","handleOnDrop","tabIndex","Typography","variant","Button","verifyExtensionValidity","value","spellCheck"],"mappings":"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"}

package/dist/components/Form/FileUpload/FileUpload.es.js

@@ -0,0 +1,210 @@
+import React, { useRef, useState, useEffect } from "react";
+import { Button } from "../../Button/Button.es.js";
+import { FileItem } from "./FileItem/FileItem.es.js";
+import { Typography } from "../../Typography/Typography.es.js";
+import classes from "./FileUpload.module.scss.es.js";
+import { useDetermineStatusIcon } from "../../../hooks/useDetermineStatusIcon.es.js";
+import { Label } from "../Label/Label.es.js";
+import { withReadOnly } from "../../withReadOnly.es.js";
+const FileUploadComponent = ({
+  name,
+  accept,
+  error,
+  success,
+  maxFileSizeInBytes,
+  multiple,
+  id,
+  title,
+  labeledBy,
+  disabled = false,
+  onChange,
+  dragAndDropText = "Drag and drop or",
+  selectButtonText = "Browse file",
+  readOnlyViewMessage = "No file uploaded",
+  onDragOver,
+  onDragLeave,
+  wrapperProps,
+  onDrop,
+  onRequestedFileAction,
+  exceedingMaxSizeErrorText,
+  fileList,
+  onDownloadFile,
+  downloadFileLink,
+  isRequired = true,
+  invalidDropErrorMessage = "Invalid file format. Supported formats are: $accept.",
+  noMultipleFileDropErrorMessage = "You can upload only a single file.",
+  helperText,
+  ...rest
+}, ref) => {
+  const labelRef = useRef(null);
+  const [dragActive, setDragActive] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
+  const [inputError, setInputError] = useState(false);
+  const icon = useDetermineStatusIcon({ success, error });
+  const dropzoneClassNames = [classes["file-dropzone"]];
+  const dropzoneContainerClassNames = [classes["upload-button-wrapper"]];
+  const subTextClass = [classes["file-selector-sub-text"]];
+  const errorTextClass = [classes["file-selector-sub-text"]];
+  dragActive && dropzoneContainerClassNames.push(classes["drag-active"]);
+  const hasError = inputError || error || errorMsg;
+  const readOnlyView = rest["data-readonlyview"];
+  if (hasError) {
+    const errorClass = classes["error"];
+    dropzoneClassNames.push(errorClass);
+    subTextClass.push(errorClass);
+    errorTextClass.push(errorClass);
+  }
+  disabled && dropzoneContainerClassNames.push(classes["disabled"]);
+  success && !error && dropzoneClassNames.push(classes["success"]);
+  const inputId = `input-${name}`;
+  const labelClasses = [classes["file-upload-title"]];
+  isRequired && labelClasses.push(classes["required"]);
+  const getFileList = (files) => {
+    let savedFiles = fileList ? [...fileList] : [];
+    const fileNames = fileList.map((el) => el.name);
+    (files == null ? void 0 : files.length) && Array.from(files).forEach((el) => {
+      if (!fileNames.includes(el.name)) {
+        savedFiles = multiple ? [
+          ...savedFiles,
+          {
+            ...validateUpload(el),
+            data: el
+          }
+        ] : [
+          {
+            ...validateUpload(el),
+            data: el
+          }
+        ];
+      }
+    });
+    return savedFiles;
+  };
+  const onInputChange = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const files = getFileList(e.target.files);
+    const isFileValid = files.length && verifyExtensionValidity(files[files.length - 1]);
+    if (isFileValid) {
+      setErrorMsg("");
+      e.target.value = "";
+      onChange == null ? void 0 : onChange(files);
+    }
+  };
+  const verifyExtensionValidity = (file) => {
+    const extension = file.name.split(".").pop();
+    return extension && accept.includes(extension);
+  };
+  const validateUpload = (file) => {
+    const result = {
+      name: file.name,
+      size: file.size,
+      type: file.type
+    };
+    let err = false;
+    if (maxFileSizeInBytes && file.size && file.size >= maxFileSizeInBytes) {
+      let sizeMessage;
+      const isAtLeastOneMb = maxFileSizeInBytes >= 1024 * 1024;
+      if (isAtLeastOneMb) {
+        sizeMessage = `${parseFloat((maxFileSizeInBytes / (1024 * 1024)).toFixed(2))}MB`;
+      } else {
+        sizeMessage = `${parseFloat((maxFileSizeInBytes / 1024).toFixed(2))}KB`;
+      }
+      result.error = exceedingMaxSizeErrorText ?? `The maximum allowed file size is ${sizeMessage}. Upload a smaller file.`;
+      result.status = "error";
+      err = true;
+    }
+    setInputError(err);
+    return result;
+  };
+  useEffect(() => {
+    if (fileList.length) {
+      const validatedFiles = fileList.map((file) => validateUpload(file));
+      onChange == null ? void 0 : onChange(validatedFiles);
+    }
+  }, []);
+  const handleOnDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!dragActive) {
+      setDragActive(true);
+    }
+    onDragOver == null ? void 0 : onDragOver(e);
+  };
+  const handleOnDragLeave = (e) => {
+    var _a;
+    e.preventDefault();
+    e.stopPropagation();
+    const target = e.target;
+    if ((_a = target == null ? void 0 : target.offsetParent) == null ? void 0 : _a.classList.contains(classes["file-dropzone"])) {
+      setDragActive(false);
+    }
+    onDragLeave == null ? void 0 : onDragLeave(e);
+  };
+  const handleOnDrop = (e) => {
+    var _a, _b, _c;
+    e.preventDefault();
+    e.stopPropagation();
+    if (((_a = e == null ? void 0 : e.dataTransfer) == null ? void 0 : _a.files) && e.dataTransfer.files.length) {
+      const extension = (_c = (_b = e == null ? void 0 : e.dataTransfer) == null ? void 0 : _b.files[0]) == null ? void 0 : _c.name.split(".").pop();
+      if (extension && accept && !accept.includes(extension)) {
+        setErrorMsg(invalidDropErrorMessage.replace("$accept", accept));
+        setDragActive(false);
+        return;
+      } else if (!multiple && e.dataTransfer.files.length > 1) {
+        setErrorMsg(noMultipleFileDropErrorMessage);
+        setDragActive(false);
+        return;
+      } else {
+        setErrorMsg("");
+      }
+      const validatedFiles = getFileList(e.dataTransfer.files);
+      onDrop ? onDrop == null ? void 0 : onDrop(validatedFiles) : onChange == null ? void 0 : onChange(validatedFiles);
+    }
+    setDragActive(false);
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: classes["file-upload-wrapper"], ...wrapperProps }, /* @__PURE__ */ React.createElement("div", { className: classes["dropzone-wrapper"] }, /* @__PURE__ */ React.createElement("div", { className: dropzoneClassNames.join(" "), "data-readonlyview": readOnlyView }, /* @__PURE__ */ React.createElement(Label, { ref: labelRef, className: `${labelClasses.join(" ")}`, htmlFor: inputId }, title), (fileList == null ? void 0 : fileList.length) > 0 && /* @__PURE__ */ React.createElement("ul", { className: classes["file-list"] }, fileList.map(({ name: name2, status, progress, error: error2 }) => /* @__PURE__ */ React.createElement("li", { key: name2, className: status, id: name2 }, /* @__PURE__ */ React.createElement(
+    FileItem,
+    {
+      name: name2,
+      key: `${name2}_${status}`,
+      status,
+      progress,
+      error: error2,
+      downloadFileLink,
+      onDownloadFile,
+      onRequestedFileAction
+    }
+  )))), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: dropzoneContainerClassNames.join(" "),
+      onDragOver: (e) => !disabled && handleOnDragOver(e),
+      onDragLeave: (e) => !disabled && handleOnDragLeave(e),
+      onDrop: (e) => !disabled && handleOnDrop(e),
+      tabIndex: readOnlyView ? 0 : -1
+    },
+    /* @__PURE__ */ React.createElement("div", { className: classes["file-select"] }, /* @__PURE__ */ React.createElement(Typography, { variant: "body", className: "drag-and-drop-text" }, readOnlyView ? readOnlyViewMessage : dragAndDropText), /* @__PURE__ */ React.createElement("div", { className: classes["file-upload-btn"] }, /* @__PURE__ */ React.createElement(Button, { variant: "outline", disabled }, selectButtonText, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        ...rest,
+        className: `${classes["upload-input"]} ${rest.className}`,
+        ref,
+        "aria-labelledby": labeledBy,
+        type: "file",
+        id: inputId,
+        name,
+        multiple,
+        disabled,
+        accept,
+        onChange: onInputChange,
+        spellCheck: false
+      }
+    ))), !disabled && icon, /* @__PURE__ */ React.createElement("span", { className: classes["outline"] }))
+  )), errorMsg && /* @__PURE__ */ React.createElement(Typography, { variant: "sub-text", className: errorTextClass.join(" ") }, errorMsg), helperText && /* @__PURE__ */ React.createElement(Typography, { variant: "sub-text", className: subTextClass.join(" ") }, helperText)));
+};
+const FileUpload = withReadOnly(React.forwardRef(FileUploadComponent));
+export {
+  FileUpload
+};
+//# sourceMappingURL=FileUpload.es.js.map

package/dist/components/Form/FileUpload/FileUpload.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.es.js","sources":["../../../../src/components/Form/FileUpload/FileUpload.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  DragEvent,\n  DragEventHandler,\n  ForwardRefRenderFunction,\n  useEffect,\n  useRef,\n  useState\n} from \"react\";\nimport { Button } from \"../../Button/Button\";\nimport { FILE_ACTION, FileItem, Props as FileConfig } from \"./FileItem/FileItem\";\nimport { Props as InputProps } from \"../Input/Input\";\nimport { Typography } from \"../../Typography/Typography\";\nimport classes from \"./FileUpload.module.scss\";\nimport { useDetermineStatusIcon } from \"../../../hooks/useDetermineStatusIcon\";\nimport { Label } from \"../Label/Label\";\nimport { withReadOnly } from \"../../withReadOnly\";\n\ntype FileUploadType = Omit<InputProps, \"onDrop\" | \"type\" | \"onChange\" | \"suffix\" | \"prefix\">;\nexport type FileType = Omit<FileConfig, \"onRequestedFileAction\"> &\n  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n  Pick<File, \"size\" | \"type\"> & { data?: any };\n\nexport interface Props extends FileUploadType {\n  accept: string;\n  title: string;\n  multiple: boolean;\n  fileList: FileType[];\n  exceedingMaxSizeErrorText?: string;\n  maxFileSizeInBytes?: number;\n  selectButtonText?: string;\n  dragAndDropText?: string;\n  onDragOver?: DragEventHandler;\n  onDragEnter?: DragEventHandler;\n  onDragLeave?: DragEventHandler;\n  onDrop?: (e: FileType[]) => void;\n  onChange?: (e: FileType[]) => void;\n  onRequestedFileAction?: (action: FILE_ACTION, name: FileType[\"name\"]) => void;\n  downloadFileLink?: string;\n  onDownloadFile?: () => void;\n  isRequired?: boolean;\n  invalidDropErrorMessage?: string;\n  noMultipleFileDropErrorMessage?: string;\n  readOnlyViewMessage?: string;\n  helperText?: string;\n}\n\nconst FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (\n  {\n    name,\n    accept,\n    error,\n    success,\n    maxFileSizeInBytes,\n    multiple,\n    id,\n    title,\n    labeledBy,\n    disabled = false,\n    onChange,\n    dragAndDropText = \"Drag and drop or\",\n    selectButtonText = \"Browse file\",\n    readOnlyViewMessage = \"No file uploaded\",\n    onDragOver,\n    onDragLeave,\n    wrapperProps,\n    onDrop,\n    onRequestedFileAction,\n    exceedingMaxSizeErrorText,\n    fileList,\n    onDownloadFile,\n    downloadFileLink,\n    isRequired = true,\n    invalidDropErrorMessage = \"Invalid file format. Supported formats are: $accept.\",\n    noMultipleFileDropErrorMessage = \"You can upload only a single file.\",\n    helperText,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const labelRef = useRef(null);\n  const [dragActive, setDragActive] = useState(false);\n  const [errorMsg, setErrorMsg] = useState(\"\");\n  const [inputError, setInputError] = useState(false);\n  const icon = useDetermineStatusIcon({ success, error });\n  const dropzoneClassNames = [classes[\"file-dropzone\"]];\n  const dropzoneContainerClassNames = [classes[\"upload-button-wrapper\"]];\n  const subTextClass = [classes[\"file-selector-sub-text\"]];\n  const errorTextClass = [classes[\"file-selector-sub-text\"]];\n  dragActive && dropzoneContainerClassNames.push(classes[\"drag-active\"]);\n  const hasError = inputError || error || errorMsg;\n  const readOnlyView = rest[\"data-readonlyview\"];\n  if (hasError) {\n    const errorClass = classes[\"error\"];\n    dropzoneClassNames.push(errorClass);\n    subTextClass.push(errorClass);\n    errorTextClass.push(errorClass);\n  }\n  disabled && dropzoneContainerClassNames.push(classes[\"disabled\"]);\n  success && !error && dropzoneClassNames.push(classes[\"success\"]);\n  const inputId = `input-${name}`;\n  const labelClasses = [classes[\"file-upload-title\"]];\n  isRequired && labelClasses.push(classes[\"required\"]);\n\n  const getFileList = (files: FileList | null): FileType[] => {\n    let savedFiles = fileList ? [...fileList] : [];\n    const fileNames = fileList.map(el => el.name);\n    files?.length &&\n      Array.from(files as ArrayLike<File>).forEach(el => {\n        if (!fileNames.includes(el.name)) {\n          savedFiles = multiple\n            ? [\n                ...savedFiles,\n                {\n                  ...validateUpload(el),\n                  data: el\n                }\n              ]\n            : [\n                {\n                  ...validateUpload(el),\n                  data: el\n                }\n              ];\n        }\n      });\n    return savedFiles;\n  };\n  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    const files = getFileList(e.target.files);\n    const isFileValid = files.length && verifyExtensionValidity(files[files.length - 1]);\n\n    if (isFileValid) {\n      setErrorMsg(\"\");\n      e.target.value = \"\";\n      onChange?.(files);\n    }\n  };\n\n  const verifyExtensionValidity = (file: FileType) => {\n    const extension = file.name.split(\".\").pop();\n    return extension && accept.includes(extension);\n  };\n\n  const validateUpload = (file: FileType) => {\n    const result: FileType = {\n      name: file.name,\n      size: file.size,\n      type: file.type\n    };\n\n    let err = false;\n\n    if (maxFileSizeInBytes && file.size && file.size >= maxFileSizeInBytes) {\n      let sizeMessage: string;\n      const isAtLeastOneMb = maxFileSizeInBytes >= 1024 * 1024;\n\n      if (isAtLeastOneMb) {\n        sizeMessage = `${parseFloat((maxFileSizeInBytes / (1024 * 1024)).toFixed(2))}MB`;\n      } else {\n        sizeMessage = `${parseFloat((maxFileSizeInBytes / 1024).toFixed(2))}KB`;\n      }\n\n      result.error =\n        exceedingMaxSizeErrorText ??\n        `The maximum allowed file size is ${sizeMessage}. Upload a smaller file.`;\n      result.status = \"error\";\n      err = true;\n    }\n\n    setInputError(err);\n    return result;\n  };\n\n  useEffect(() => {\n    if (fileList.length) {\n      const validatedFiles = fileList.map(file => validateUpload(file));\n      onChange?.(validatedFiles);\n    }\n  }, []);\n\n  const handleOnDragOver = (e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (!dragActive) {\n      setDragActive(true);\n    }\n    onDragOver?.(e);\n  };\n\n  const handleOnDragLeave = (e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    const target = e.target as HTMLElement;\n    if (target?.offsetParent?.classList.contains(classes[\"file-dropzone\"])) {\n      setDragActive(false);\n    }\n    onDragLeave?.(e);\n  };\n\n  const handleOnDrop = (e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (e?.dataTransfer?.files && e.dataTransfer.files.length) {\n      const extension = e?.dataTransfer?.files[0]?.name.split(\".\").pop();\n      if (extension && accept && !accept.includes(extension)) {\n        setErrorMsg(invalidDropErrorMessage.replace(\"$accept\", accept));\n        setDragActive(false);\n        return;\n      } else if (!multiple && e.dataTransfer.files.length > 1) {\n        setErrorMsg(noMultipleFileDropErrorMessage);\n        setDragActive(false);\n        return;\n      } else {\n        setErrorMsg(\"\");\n      }\n      const validatedFiles = getFileList(e.dataTransfer.files);\n      onDrop ? onDrop?.(validatedFiles) : onChange?.(validatedFiles);\n    }\n    setDragActive(false);\n  };\n\n  return (\n    <div className={classes[\"file-upload-wrapper\"]} {...wrapperProps}>\n      <div className={classes[\"dropzone-wrapper\"]}>\n        <div className={dropzoneClassNames.join(\" \")} data-readonlyview={readOnlyView}>\n          <Label ref={labelRef} className={`${labelClasses.join(\" \")}`} htmlFor={inputId}>\n            {title}\n          </Label>\n          {fileList?.length > 0 && (\n            <ul className={classes[\"file-list\"]}>\n              {fileList.map(({ name, status, progress, error }) => (\n                <li key={name} className={status} id={name}>\n                  <FileItem\n                    name={name}\n                    key={`${name}_${status}`}\n                    status={status}\n                    progress={progress}\n                    error={error}\n                    downloadFileLink={downloadFileLink}\n                    onDownloadFile={onDownloadFile}\n                    onRequestedFileAction={onRequestedFileAction}\n                  />\n                </li>\n              ))}\n            </ul>\n          )}\n\n          <div\n            className={dropzoneContainerClassNames.join(\" \")}\n            onDragOver={e => !disabled && handleOnDragOver(e)}\n            onDragLeave={e => !disabled && handleOnDragLeave(e)}\n            onDrop={e => !disabled && handleOnDrop(e)}\n            tabIndex={readOnlyView ? 0 : -1}\n          >\n            <div className={classes[\"file-select\"]}>\n              <Typography variant=\"body\" className={\"drag-and-drop-text\"}>\n                {readOnlyView ? readOnlyViewMessage : dragAndDropText}\n              </Typography>\n\n              <div className={classes[\"file-upload-btn\"]}>\n                <Button variant=\"outline\" disabled={disabled}>\n                  {selectButtonText}\n                  <input\n                    {...rest}\n                    className={`${classes[\"upload-input\"]} ${rest.className}`}\n                    ref={ref}\n                    aria-labelledby={labeledBy}\n                    type=\"file\"\n                    id={inputId}\n                    name={name}\n                    multiple={multiple}\n                    disabled={disabled}\n                    accept={accept}\n                    onChange={onInputChange}\n                    spellCheck={false}\n                  />\n                </Button>\n              </div>\n              {!disabled && icon}\n              <span className={classes[\"outline\"]}></span>\n            </div>\n          </div>\n        </div>\n        {errorMsg && (\n          <Typography variant={\"sub-text\"} className={errorTextClass.join(\" \")}>\n            {errorMsg}\n          </Typography>\n        )}\n        {helperText && (\n          <Typography variant={\"sub-text\"} className={subTextClass.join(\" \")}>\n            {helperText}\n          </Typography>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const FileUpload = withReadOnly(React.forwardRef(FileUploadComponent));\n"],"names":["name","error"],"mappings":"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"}