@hitachivantara/uikit-react-core 5.27.6 → 5.27.7

package/dist/esm/components/EmptyState/EmptyState.js

@@ -1,3 +1,4 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useTheme as useTheme$1 } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { theme } from "@hitachivantara/uikit-styles";
@@ -5,7 +6,6 @@ import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useTheme } from "../../hooks/useTheme.js";
 import { useClasses } from "./EmptyState.styles.js";
 import { staticClasses } from "./EmptyState.styles.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { HvTypography } from "../Typography/Typography.js";
 const HvEmptyState = (props) => {
   const {
@@ -29,35 +29,25 @@ const HvEmptyState = (props) => {
   const onlyXs = useMediaQuery(muiTheme.breakpoints.only("xs"));
   const upSm = useMediaQuery(muiTheme.breakpoints.up("sm"));
   const messageOnly = !!(message && !(title || action));
-  const renderNode = (variant, node, style) => node && /* @__PURE__ */ jsx(HvTypography, {
-    variant,
-    className: style,
-    children: node
-  });
-  return /* @__PURE__ */ jsx("div", {
-    className: cx(classes.root, className),
-    ...others,
-    children: /* @__PURE__ */ jsxs("div", {
-      className: cx(classes.container, onlyXs && css({
-        flexDirection: "column",
-        alignItems: "center",
-        textAlign: "center"
-      }), {
-        [classes.containerMessageOnly]: messageOnly
-      }, onlyXs && messageOnly && css({
-        flexDirection: "row"
-      })),
-      children: [/* @__PURE__ */ jsx("div", {
-        className: classes.iconContainer,
-        children: icon
-      }), /* @__PURE__ */ jsxs("div", {
-        className: cx(classes.textContainer, upSm && css({
-          marginLeft: theme.space.xs
-        })),
-        children: [renderNode(activeTheme == null ? void 0 : activeTheme.emptyState.titleVariant, title, classes.titleContainer), renderNode("body", message, classes.messageContainer), renderNode("body", action, classes.actionContainer)]
-      })]
-    })
-  });
+  const renderNode = (variant, node, style) => node && /* @__PURE__ */ jsx(HvTypography, { variant, className: style, children: node });
+  return /* @__PURE__ */ jsx("div", { className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsxs("div", { className: cx(classes.container, onlyXs && css({
+    flexDirection: "column",
+    alignItems: "center",
+    textAlign: "center"
+  }), {
+    [classes.containerMessageOnly]: messageOnly
+  }, onlyXs && messageOnly && css({
+    flexDirection: "row"
+  })), children: [
+    /* @__PURE__ */ jsx("div", { className: classes.iconContainer, children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: cx(classes.textContainer, upSm && css({
+      marginLeft: theme.space.xs
+    })), children: [
+      renderNode(activeTheme == null ? void 0 : activeTheme.emptyState.titleVariant, title, classes.titleContainer),
+      renderNode("body", message, classes.messageContainer),
+      renderNode("body", action, classes.actionContainer)
+    ] })
+  ] }) });
 };
 export {
   HvEmptyState,

package/dist/esm/components/EmptyState/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography, HvTypographyProps } from \"@core/components/Typography\";\nimport { useTheme as useHvTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./EmptyState.styles\";\n\nexport { staticClasses as emptyStateClasses };\n\nexport type HvEmptyStateClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvEmptyStateProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Icon to be presented. */\n  icon: React.ReactNode;\n  /** The title to be shown. */\n  title?: string | React.ReactNode;\n  /** The message to be shown. */\n  message?: string | React.ReactNode;\n  /** The action message to be shown. */\n  action?: string | React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvEmptyStateClasses;\n}\n\n/**\n * Empty states communicate that there’s no information, data or values to display in a given context.\n */\nexport const HvEmptyState = (props: HvEmptyStateProps) => {\n  const {\n    action,\n    icon,\n    title,\n    message,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvEmptyState\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { activeTheme } = useHvTheme();\n\n  const muiTheme = useTheme();\n\n  const onlyXs = useMediaQuery(muiTheme.breakpoints.only(\"xs\"));\n  const upSm = useMediaQuery(muiTheme.breakpoints.up(\"sm\"));\n\n  const messageOnly = !!(message && !(title || action));\n\n  const renderNode = (\n    variant?: HvTypographyProps[\"variant\"],\n    node?: React.ReactNode,\n    style?: string\n  ) =>\n    node && (\n      <HvTypography variant={variant} className={style}>\n        {node}\n      </HvTypography>\n    );\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      <div\n        className={cx(\n          classes.container,\n          onlyXs &&\n            css({\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              textAlign: \"center\",\n            }),\n          {\n            [classes.containerMessageOnly]: messageOnly,\n          },\n          onlyXs && messageOnly && css({ flexDirection: \"row\" })\n        )}\n      >\n        <div className={classes.iconContainer}>{icon}</div>\n        <div\n          className={cx(\n            classes.textContainer,\n            upSm && css({ marginLeft: theme.space.xs })\n          )}\n        >\n          {renderNode(\n            activeTheme?.emptyState.titleVariant,\n            title,\n            classes.titleContainer\n          )}\n          {renderNode(\"body\", message, classes.messageContainer)}\n          {renderNode(\"body\", action, classes.actionContainer)}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["HvEmptyState","props","action","icon","title","message","classes","classesProp","className","others","useDefaultProps","cx","css","useClasses","activeTheme","useHvTheme","muiTheme","useTheme","onlyXs","useMediaQuery","breakpoints","only","upSm","up","messageOnly","renderNode","variant","node","style","HvTypography","children","root","container","flexDirection","alignItems","textAlign","containerMessageOnly","_jsx","iconContainer","_jsxs","textContainer","marginLeft","theme","space","xs","emptyState","titleVariant","titleContainer","messageContainer","actionContainer"],"mappings":";;;;;;;;;AAoCaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAgBT,KAAK;AAEnC,QAAA;AAAA,IAAEK;AAAAA,IAASK;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWN,WAAW;AAE7C,QAAA;AAAA,IAAEO;AAAAA,MAAgBC,SAAW;AAEnC,QAAMC,WAAWC;AAEjB,QAAMC,SAASC,cAAcH,SAASI,YAAYC,KAAK,IAAI,CAAC;AAC5D,QAAMC,OAAOH,cAAcH,SAASI,YAAYG,GAAG,IAAI,CAAC;AAExD,QAAMC,cAAc,CAAC,EAAEnB,WAAW,EAAED,SAASF;AAE7C,QAAMuB,aAAaA,CACjBC,SACAC,MACAC,UAEAD,4BACGE,cAAY;AAAA,IAACH;AAAAA,IAAkBlB,WAAWoB;AAAAA,IAAME,UAC9CH;AAAAA,EAAAA,CACW;AAGlB,6BACE,OAAA;AAAA,IAAKnB,WAAWG,GAAGL,QAAQyB,MAAMvB,SAAS;AAAA,IAAE,GAAKC;AAAAA,IAAMqB,+BACrD,OAAA;AAAA,MACEtB,WAAWG,GACTL,QAAQ0B,WACRd,UACEN,IAAI;AAAA,QACFqB,eAAe;AAAA,QACfC,YAAY;AAAA,QACZC,WAAW;AAAA,MAAA,CACZ,GACH;AAAA,QACE,CAAC7B,QAAQ8B,oBAAoB,GAAGZ;AAAAA,MAAAA,GAElCN,UAAUM,eAAeZ,IAAI;AAAA,QAAEqB,eAAe;AAAA,MAAA,CAAO,CACvD;AAAA,MAAEH,WAEFO,oBAAA,OAAA;AAAA,QAAK7B,WAAWF,QAAQgC;AAAAA,QAAcR,UAAE3B;AAAAA,MAAAA,CAAU,GAClDoC,qBAAA,OAAA;AAAA,QACE/B,WAAWG,GACTL,QAAQkC,eACRlB,QAAQV,IAAI;AAAA,UAAE6B,YAAYC,MAAMC,MAAMC;AAAAA,QAAAA,CAAI,CAC5C;AAAA,QAAEd,WAEDL,WACCX,2CAAa+B,WAAWC,cACxB1C,OACAE,QAAQyC,cACV,GACCtB,WAAW,QAAQpB,SAASC,QAAQ0C,gBAAgB,GACpDvB,WAAW,QAAQvB,QAAQI,QAAQ2C,eAAe,CAAC;AAAA,MAAA,CACjD,CAAC;AAAA,IAAA,CACH;AAAA,EAAA,CACF;AAET;"}
+{"version":3,"file":"EmptyState.js","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography, HvTypographyProps } from \"@core/components/Typography\";\nimport { useTheme as useHvTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./EmptyState.styles\";\n\nexport { staticClasses as emptyStateClasses };\n\nexport type HvEmptyStateClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvEmptyStateProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Icon to be presented. */\n  icon: React.ReactNode;\n  /** The title to be shown. */\n  title?: string | React.ReactNode;\n  /** The message to be shown. */\n  message?: string | React.ReactNode;\n  /** The action message to be shown. */\n  action?: string | React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvEmptyStateClasses;\n}\n\n/**\n * Empty states communicate that there’s no information, data or values to display in a given context.\n */\nexport const HvEmptyState = (props: HvEmptyStateProps) => {\n  const {\n    action,\n    icon,\n    title,\n    message,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvEmptyState\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { activeTheme } = useHvTheme();\n\n  const muiTheme = useTheme();\n\n  const onlyXs = useMediaQuery(muiTheme.breakpoints.only(\"xs\"));\n  const upSm = useMediaQuery(muiTheme.breakpoints.up(\"sm\"));\n\n  const messageOnly = !!(message && !(title || action));\n\n  const renderNode = (\n    variant?: HvTypographyProps[\"variant\"],\n    node?: React.ReactNode,\n    style?: string\n  ) =>\n    node && (\n      <HvTypography variant={variant} className={style}>\n        {node}\n      </HvTypography>\n    );\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      <div\n        className={cx(\n          classes.container,\n          onlyXs &&\n            css({\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              textAlign: \"center\",\n            }),\n          {\n            [classes.containerMessageOnly]: messageOnly,\n          },\n          onlyXs && messageOnly && css({ flexDirection: \"row\" })\n        )}\n      >\n        <div className={classes.iconContainer}>{icon}</div>\n        <div\n          className={cx(\n            classes.textContainer,\n            upSm && css({ marginLeft: theme.space.xs })\n          )}\n        >\n          {renderNode(\n            activeTheme?.emptyState.titleVariant,\n            title,\n            classes.titleContainer\n          )}\n          {renderNode(\"body\", message, classes.messageContainer)}\n          {renderNode(\"body\", action, classes.actionContainer)}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["HvEmptyState","props","action","icon","title","message","classes","classesProp","className","others","useDefaultProps","cx","css","useClasses","activeTheme","useHvTheme","muiTheme","useTheme","onlyXs","useMediaQuery","breakpoints","only","upSm","up","messageOnly","renderNode","variant","node","style","root","container","flexDirection","alignItems","textAlign","containerMessageOnly","iconContainer","textContainer","marginLeft","theme","space","xs","emptyState","titleVariant","titleContainer","messageContainer","actionContainer"],"mappings":";;;;;;;;;AAoCaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAgBT,KAAK;AAEnC,QAAA;AAAA,IAAEK;AAAAA,IAASK;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWN,WAAW;AAE7C,QAAA;AAAA,IAAEO;AAAAA,MAAgBC,SAAW;AAEnC,QAAMC,WAAWC;AAEjB,QAAMC,SAASC,cAAcH,SAASI,YAAYC,KAAK,IAAI,CAAC;AAC5D,QAAMC,OAAOH,cAAcH,SAASI,YAAYG,GAAG,IAAI,CAAC;AAExD,QAAMC,cAAc,CAAC,EAAEnB,WAAW,EAAED,SAASF;AAEvCuB,QAAAA,aAAaA,CACjBC,SACAC,MACAC,UAEAD,QACE,oBAAC,cAAa,EAAA,SAAkB,WAAWC,OACxCD,UACH,KAAA,CAAA;AAGJ,6BACG,OAAI,EAAA,WAAWhB,GAAGL,QAAQuB,MAAMrB,SAAS,GAAG,GAAIC,QAC/C,+BAAC,OACC,EAAA,WAAWE,GACTL,QAAQwB,WACRZ,UACEN,IAAI;AAAA,IACFmB,eAAe;AAAA,IACfC,YAAY;AAAA,IACZC,WAAW;AAAA,EAAA,CACZ,GACH;AAAA,IACE,CAAC3B,QAAQ4B,oBAAoB,GAAGV;AAAAA,EAAAA,GAElCN,UAAUM,eAAeZ,IAAI;AAAA,IAAEmB,eAAe;AAAA,EAAA,CAAO,CACvD,GAEA,UAAA;AAAA,IAAA,oBAAC,OAAI,EAAA,WAAWzB,QAAQ6B,eAAgBhC,UAAK,MAAA;AAAA,yBAC5C,OACC,EAAA,WAAWQ,GACTL,QAAQ8B,eACRd,QAAQV,IAAI;AAAA,MAAEyB,YAAYC,MAAMC,MAAMC;AAAAA,IAAAA,CAAI,CAC5C,GAECf,UAAAA;AAAAA,MAAAA,WACCX,2CAAa2B,WAAWC,cACxBtC,OACAE,QAAQqC,cACV;AAAA,MACClB,WAAW,QAAQpB,SAASC,QAAQsC,gBAAgB;AAAA,MACpDnB,WAAW,QAAQvB,QAAQI,QAAQuC,eAAe;AAAA,IAAA,GACrD;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}

package/dist/esm/components/FileUploader/DropZone/DropZone.js

@@ -1,3 +1,4 @@
+import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
 import { useState, useRef } from "react";
 import uniqueId from "lodash/uniqueId";
 import accept from "attr-accept";
@@ -7,7 +8,6 @@ import { Doc } from "@hitachivantara/uikit-react-icons";
 import { convertUnits } from "../utils.js";
 import { useClasses } from "./DropZone.styles.js";
 import { staticClasses } from "./DropZone.styles.js";
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
 import { HvLabel } from "../../Forms/Label/Label.js";
 import { HvInfoMessage } from "../../Forms/InfoMessage/InfoMessage.js";
 import { HvTypography } from "../../Typography/Typography.js";
@@ -58,101 +58,61 @@ const HvDropZone = ({
     });
     onFilesAdded == null ? void 0 : onFilesAdded(newFiles);
   };
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [!hideLabels && /* @__PURE__ */ jsxs("div", {
-      id,
-      className: classes.dropZoneLabelsGroup,
-      children: [/* @__PURE__ */ jsx(HvLabel, {
-        id: setId(id, "input-file-label"),
-        htmlFor: setId(id, "input-file"),
-        label: labels == null ? void 0 : labels.dropzone,
-        className: classes.dropZoneLabel
-      }), /* @__PURE__ */ jsxs(HvInfoMessage, {
-        id: setId(id, "description"),
-        children: [Number.isInteger(maxFileSize) && `${labels == null ? void 0 : labels.sizeWarning} ${convertUnits(maxFileSize)}`, (labels == null ? void 0 : labels.acceptedFiles) && labels.acceptedFiles, !(labels == null ? void 0 : labels.acceptedFiles) && acceptedFiles.length > 0 && ` (${acceptedFiles.join(", ")})`]
-      })]
-    }), /* @__PURE__ */ jsxs("div", {
-      id: setId(id, "input-file-container"),
-      className: cx(classes.dropZoneContainer, {
-        [classes.dragAction]: dragState,
-        [classes.dropZoneContainerDisabled]: disabled
-      }),
-      children: [/* @__PURE__ */ jsx("input", {
-        id: setId(id, "input-file"),
-        className: classes.inputArea,
-        type: "file",
-        multiple,
-        disabled,
-        title: !disabled ? `${labels == null ? void 0 : labels.drag} ${labels == null ? void 0 : labels.selectFiles}` : "",
-        onClick: () => {
-          if (inputRef.current) {
-            inputRef.current.value = "";
-          }
-        },
-        onChange: () => {
-          var _a;
-          if (!disabled && ((_a = inputRef.current) == null ? void 0 : _a.files)) {
-            onChangeHandler(inputRef.current.files);
-          }
-        },
-        onDragEnter: (event) => {
-          if (!disabled) {
-            enterDropArea();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !hideLabels && /* @__PURE__ */ jsxs("div", { id, className: classes.dropZoneLabelsGroup, children: [
+      /* @__PURE__ */ jsx(HvLabel, { id: setId(id, "input-file-label"), htmlFor: setId(id, "input-file"), label: labels == null ? void 0 : labels.dropzone, className: classes.dropZoneLabel }),
+      /* @__PURE__ */ jsxs(HvInfoMessage, { id: setId(id, "description"), children: [
+        Number.isInteger(maxFileSize) && `${labels == null ? void 0 : labels.sizeWarning} ${convertUnits(maxFileSize)}`,
+        (labels == null ? void 0 : labels.acceptedFiles) && labels.acceptedFiles,
+        !(labels == null ? void 0 : labels.acceptedFiles) && acceptedFiles.length > 0 && ` (${acceptedFiles.join(", ")})`
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { id: setId(id, "input-file-container"), className: cx(classes.dropZoneContainer, {
+      [classes.dragAction]: dragState,
+      [classes.dropZoneContainerDisabled]: disabled
+    }), children: [
+      /* @__PURE__ */ jsx("input", { id: setId(id, "input-file"), className: classes.inputArea, type: "file", multiple, disabled, title: !disabled ? `${labels == null ? void 0 : labels.drag} ${labels == null ? void 0 : labels.selectFiles}` : "", onClick: () => {
+        if (inputRef.current) {
+          inputRef.current.value = "";
+        }
+      }, onChange: () => {
+        var _a;
+        if (!disabled && ((_a = inputRef.current) == null ? void 0 : _a.files)) {
+          onChangeHandler(inputRef.current.files);
+        }
+      }, 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);
           }
-        },
-        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);
-            }
-          }
-        },
-        ref: inputRef,
-        accept: acceptedFiles.join(","),
-        ...inputProps
-      }), /* @__PURE__ */ jsx("div", {
-        className: classes == null ? void 0 : classes.dropArea,
-        children: dragState ? /* @__PURE__ */ jsx("div", {
-          className: classes.dropZoneAreaLabels,
-          children: /* @__PURE__ */ jsx(HvTypography, {
-            className: classes.dragText,
-            children: labels == null ? void 0 : labels.dropFiles
-          })
-        }) : /* @__PURE__ */ jsxs(Fragment, {
-          children: [/* @__PURE__ */ jsx(Doc, {
-            iconSize: "M",
-            className: classes.dropZoneAreaIcon,
-            color: disabled ? "secondary_60" : "secondary"
-          }), /* @__PURE__ */ jsx("div", {
-            className: classes.dropZoneAreaLabels,
-            children: /* @__PURE__ */ jsxs(HvTypography, {
-              className: classes.dragText,
-              children: [labels == null ? void 0 : labels.drag, /* @__PURE__ */ jsx("span", {
-                className: classes.selectFilesText,
-                children: ` ${labels == null ? void 0 : labels.selectFiles}`
-              })]
-            })
-          })]
-        })
-      })]
-    })]
-  });
+        }
+      }, ref: inputRef, accept: acceptedFiles.join(","), ...inputProps }),
+      /* @__PURE__ */ jsx("div", { className: classes == null ? void 0 : classes.dropArea, children: dragState ? /* @__PURE__ */ jsx("div", { className: classes.dropZoneAreaLabels, children: /* @__PURE__ */ jsx(HvTypography, { className: classes.dragText, children: labels == null ? void 0 : labels.dropFiles }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Doc, { iconSize: "M", className: classes.dropZoneAreaIcon, color: disabled ? "secondary_60" : "secondary" }),
+        /* @__PURE__ */ jsx("div", { className: classes.dropZoneAreaLabels, children: /* @__PURE__ */ jsxs(HvTypography, { className: classes.dragText, children: [
+          labels == null ? void 0 : labels.drag,
+          /* @__PURE__ */ jsx("span", { className: classes.selectFilesText, children: ` ${labels == null ? void 0 : labels.selectFiles}` })
+        ] }) })
+      ] }) })
+    ] })
+  ] });
 };
 export {
   HvDropZone,

package/dist/esm/components/FileUploader/DropZone/DropZone.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropZone.js","sources":["../../../../../src/components/FileUploader/DropZone/DropZone.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\n\nimport uniqueId from \"lodash/uniqueId\";\n\nimport accept from \"attr-accept\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { Doc } from \"@hitachivantara/uikit-react-icons\";\nimport { HvInfoMessage, HvLabel } from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { convertUnits } from \"../utils\";\nimport { HvFileData, HvFilesAddedEvent } from \"../File\";\n\nimport { staticClasses, useClasses } from \"./DropZone.styles\";\n\nexport { staticClasses as dropZoneClasses };\n\nexport type HvDropZoneClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropZoneLabels {\n  /**\n   * Extensions of the accepted file types\n   */\n  acceptedFiles?: string;\n  /**\n   * Dropzone area label.\n   */\n  dropzone?: string;\n  /**\n   * Size file warning label.\n   */\n  sizeWarning?: string;\n  /**\n   * Size file warning label.\n   */\n  drag?: string;\n  /**\n   * Size file warning label.\n   */\n  selectFiles?: string;\n  /**\n   * Theming sheet used to style components\n   * */\n  dropFiles?: string;\n  /**\n   * Message to display when file size is greater than allowed\n   * */\n  fileSizeError?: string;\n  /**\n   * Message to display when file type is greater than allowed\n   * */\n  fileTypeError?: string;\n}\n\nexport interface HvDropZoneProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Labels to present in FileUploader.\n   */\n  labels?: HvDropZoneLabels;\n  /**\n   * Whether the Dropzone should accept multiple files at once.\n   */\n  multiple?: boolean;\n  /**\n   * If the input is disabled or not\n   */\n  disabled?: boolean;\n  /**\n   * Files extensions accepted for upload.\n   */\n  acceptedFiles: string[];\n  /**\n   * Max upload size\n   * */\n  maxFileSize: number;\n  /**\n   * Function responsible for processing files added to the drop zone.\n   */\n  onFilesAdded?: HvFilesAddedEvent;\n  /**\n   * Whether the DropZone should hide labels or not.\n   */\n  hideLabels?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvDropZoneClasses;\n}\n\nexport const HvDropZone = ({\n  id: idProp,\n  classes: classesProp,\n  labels,\n  acceptedFiles,\n  maxFileSize,\n  inputProps,\n  hideLabels,\n  multiple = true,\n  disabled = false,\n  onFilesAdded,\n}: HvDropZoneProps) => {\n  const id = useUniqueId(idProp, \"dropzone\");\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [dragState, setDrag] = useState<boolean>(false);\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const leaveDropArea = () => {\n    setDrag(false);\n  };\n\n  const enterDropArea = () => {\n    setDrag(true);\n  };\n\n  const onChangeHandler = (filesList: FileList) => {\n    const filesToProcess = Object.keys(filesList).map((e) => filesList[e]);\n\n    const newFiles: HvFileData[] = [];\n\n    filesToProcess.forEach((file: File) => {\n      const newFile: HvFileData = 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}>\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) &&\n              `${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, \"input-file-container\")}\n        className={cx(classes.dropZoneContainer, {\n          [classes.dragAction]: dragState,\n          [classes.dropZoneContainerDisabled]: disabled,\n        })}\n      >\n        <input\n          id={setId(id, \"input-file\")}\n          className={classes.inputArea}\n          type=\"file\"\n          multiple={multiple}\n          disabled={disabled}\n          title={!disabled ? `${labels?.drag}\\xa0${labels?.selectFiles}` : \"\"}\n          onClick={() => {\n            if (inputRef.current) {\n              inputRef.current.value = \"\";\n            }\n          }}\n          onChange={() => {\n            if (!disabled && inputRef.current?.files) {\n              onChangeHandler(inputRef.current.files);\n            }\n          }}\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          ref={inputRef}\n          accept={acceptedFiles.join(\",\")}\n          {...inputProps}\n        />\n        <div className={classes?.dropArea}>\n          {dragState ? (\n            <div className={classes.dropZoneAreaLabels}>\n              <HvTypography className={classes.dragText}>\n                {labels?.dropFiles}\n              </HvTypography>\n            </div>\n          ) : (\n            <>\n              <Doc\n                iconSize=\"M\"\n                className={classes.dropZoneAreaIcon}\n                color={disabled ? \"secondary_60\" : \"secondary\"}\n              />\n              <div className={classes.dropZoneAreaLabels}>\n                <HvTypography className={classes.dragText}>\n                  {labels?.drag}\n                  <span\n                    className={classes.selectFilesText}\n                  >{`\\xa0${labels?.selectFiles}`}</span>\n                </HvTypography>\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":["HvDropZone","id","idProp","classes","classesProp","labels","acceptedFiles","maxFileSize","inputProps","hideLabels","multiple","disabled","onFilesAdded","useUniqueId","cx","useClasses","dragState","setDrag","useState","inputRef","useRef","leaveDropArea","enterDropArea","onChangeHandler","filesList","filesToProcess","Object","keys","map","e","newFiles","forEach","file","newFile","isSizeAllowed","size","isFileAccepted","length","indexOf","type","split","some","acceptExtension","accept","name","errorMessage","fileTypeError","status","fileSizeError","uniqueId","push","_Fragment","children","className","dropZoneLabelsGroup","_jsx","HvLabel","setId","htmlFor","label","dropzone","dropZoneLabel","_jsxs","HvInfoMessage","Number","isInteger","sizeWarning","convertUnits","join","dropZoneContainer","dragAction","dropZoneContainerDisabled","inputArea","title","drag","selectFiles","onClick","current","value","onChange","files","onDragEnter","event","stopPropagation","preventDefault","onDragLeave","onDropCapture","onDragOver","onDrop","dataTransfer","ref","dropArea","dropZoneAreaLabels","HvTypography","dragText","dropFiles","Doc","iconSize","dropZoneAreaIcon","color","selectFilesText"],"mappings":"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"}
+{"version":3,"file":"DropZone.js","sources":["../../../../../src/components/FileUploader/DropZone/DropZone.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\n\nimport uniqueId from \"lodash/uniqueId\";\n\nimport accept from \"attr-accept\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { Doc } from \"@hitachivantara/uikit-react-icons\";\nimport { HvInfoMessage, HvLabel } from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { convertUnits } from \"../utils\";\nimport { HvFileData, HvFilesAddedEvent } from \"../File\";\n\nimport { staticClasses, useClasses } from \"./DropZone.styles\";\n\nexport { staticClasses as dropZoneClasses };\n\nexport type HvDropZoneClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropZoneLabels {\n  /**\n   * Extensions of the accepted file types\n   */\n  acceptedFiles?: string;\n  /**\n   * Dropzone area label.\n   */\n  dropzone?: string;\n  /**\n   * Size file warning label.\n   */\n  sizeWarning?: string;\n  /**\n   * Size file warning label.\n   */\n  drag?: string;\n  /**\n   * Size file warning label.\n   */\n  selectFiles?: string;\n  /**\n   * Theming sheet used to style components\n   * */\n  dropFiles?: string;\n  /**\n   * Message to display when file size is greater than allowed\n   * */\n  fileSizeError?: string;\n  /**\n   * Message to display when file type is greater than allowed\n   * */\n  fileTypeError?: string;\n}\n\nexport interface HvDropZoneProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Labels to present in FileUploader.\n   */\n  labels?: HvDropZoneLabels;\n  /**\n   * Whether the Dropzone should accept multiple files at once.\n   */\n  multiple?: boolean;\n  /**\n   * If the input is disabled or not\n   */\n  disabled?: boolean;\n  /**\n   * Files extensions accepted for upload.\n   */\n  acceptedFiles: string[];\n  /**\n   * Max upload size\n   * */\n  maxFileSize: number;\n  /**\n   * Function responsible for processing files added to the drop zone.\n   */\n  onFilesAdded?: HvFilesAddedEvent;\n  /**\n   * Whether the DropZone should hide labels or not.\n   */\n  hideLabels?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvDropZoneClasses;\n}\n\nexport const HvDropZone = ({\n  id: idProp,\n  classes: classesProp,\n  labels,\n  acceptedFiles,\n  maxFileSize,\n  inputProps,\n  hideLabels,\n  multiple = true,\n  disabled = false,\n  onFilesAdded,\n}: HvDropZoneProps) => {\n  const id = useUniqueId(idProp, \"dropzone\");\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [dragState, setDrag] = useState<boolean>(false);\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const leaveDropArea = () => {\n    setDrag(false);\n  };\n\n  const enterDropArea = () => {\n    setDrag(true);\n  };\n\n  const onChangeHandler = (filesList: FileList) => {\n    const filesToProcess = Object.keys(filesList).map((e) => filesList[e]);\n\n    const newFiles: HvFileData[] = [];\n\n    filesToProcess.forEach((file: File) => {\n      const newFile: HvFileData = 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}>\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) &&\n              `${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, \"input-file-container\")}\n        className={cx(classes.dropZoneContainer, {\n          [classes.dragAction]: dragState,\n          [classes.dropZoneContainerDisabled]: disabled,\n        })}\n      >\n        <input\n          id={setId(id, \"input-file\")}\n          className={classes.inputArea}\n          type=\"file\"\n          multiple={multiple}\n          disabled={disabled}\n          title={!disabled ? `${labels?.drag}\\xa0${labels?.selectFiles}` : \"\"}\n          onClick={() => {\n            if (inputRef.current) {\n              inputRef.current.value = \"\";\n            }\n          }}\n          onChange={() => {\n            if (!disabled && inputRef.current?.files) {\n              onChangeHandler(inputRef.current.files);\n            }\n          }}\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          ref={inputRef}\n          accept={acceptedFiles.join(\",\")}\n          {...inputProps}\n        />\n        <div className={classes?.dropArea}>\n          {dragState ? (\n            <div className={classes.dropZoneAreaLabels}>\n              <HvTypography className={classes.dragText}>\n                {labels?.dropFiles}\n              </HvTypography>\n            </div>\n          ) : (\n            <>\n              <Doc\n                iconSize=\"M\"\n                className={classes.dropZoneAreaIcon}\n                color={disabled ? \"secondary_60\" : \"secondary\"}\n              />\n              <div className={classes.dropZoneAreaLabels}>\n                <HvTypography className={classes.dragText}>\n                  {labels?.drag}\n                  <span\n                    className={classes.selectFilesText}\n                  >{`\\xa0${labels?.selectFiles}`}</span>\n                </HvTypography>\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":["HvDropZone","id","idProp","classes","classesProp","labels","acceptedFiles","maxFileSize","inputProps","hideLabels","multiple","disabled","onFilesAdded","useUniqueId","cx","useClasses","dragState","setDrag","useState","inputRef","useRef","leaveDropArea","enterDropArea","onChangeHandler","filesList","filesToProcess","Object","keys","map","e","newFiles","forEach","file","newFile","isSizeAllowed","size","isFileAccepted","length","indexOf","type","split","some","acceptExtension","accept","name","errorMessage","fileTypeError","status","fileSizeError","uniqueId","push","dropZoneLabelsGroup","setId","dropzone","dropZoneLabel","Number","isInteger","sizeWarning","convertUnits","join","dropZoneContainer","dragAction","dropZoneContainerDisabled","inputArea","drag","selectFiles","current","value","files","event","stopPropagation","preventDefault","dataTransfer","dropArea","dropZoneAreaLabels","dragText","dropFiles","dropZoneAreaIcon","selectFilesText"],"mappings":"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"}

package/dist/esm/components/FileUploader/File/File.js

@@ -1,45 +1,32 @@
+import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
 import { Close, Fail, Success } from "@hitachivantara/uikit-react-icons";
 import { setId } from "../../../utils/setId.js";
 import { cx } from "@emotion/css";
 import { convertUnits } from "../utils.js";
 import { useClasses } from "./File.styles.js";
 import { staticClasses } from "./File.styles.js";
-import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
 import { HvProgressBar } from "../../ProgressBar/ProgressBar.js";
 import { HvButton } from "../../Button/Button.js";
 import { HvTypography } from "../../Typography/Typography.js";
 const getStatusIcon = (classes, status) => {
   switch (status) {
     case "success":
-      return /* @__PURE__ */ jsx(Success, {
-        className: classes == null ? void 0 : classes.icon,
-        color: "positive"
-      });
+      return /* @__PURE__ */ jsx(Success, { className: classes == null ? void 0 : classes.icon, color: "positive" });
     case "fail":
-      return /* @__PURE__ */ jsx(Fail, {
-        className: classes == null ? void 0 : classes.icon,
-        color: "negative"
-      });
+      return /* @__PURE__ */ jsx(Fail, { className: classes == null ? void 0 : classes.icon, color: "negative" });
     default:
-      return /* @__PURE__ */ jsx("div", {
-        className: classes == null ? void 0 : classes.icon
-      });
+      return /* @__PURE__ */ jsx("div", { className: classes == null ? void 0 : classes.icon });
   }
 };
 const getProgressText = (data, classes) => {
   const hasFailed = data.status === "fail";
   const inProgress = data.status === "progress";
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [data.progress || data.size || data.errorMessage ? ` | ` : null, inProgress && data.progress != null && /* @__PURE__ */ jsx(HvTypography, {
-      variant: "label",
-      children: `${convertUnits(data.progress)} / `
-    }), !hasFailed && data.size && /* @__PURE__ */ jsx(HvTypography, {
-      children: `${convertUnits(data.size)}`
-    }), hasFailed && data.errorMessage && /* @__PURE__ */ jsx(HvTypography, {
-      className: classes == null ? void 0 : classes.fail,
-      children: data.errorMessage
-    })]
-  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    data.progress || data.size || data.errorMessage ? ` | ` : null,
+    inProgress && data.progress != null && /* @__PURE__ */ jsx(HvTypography, { variant: "label", children: `${convertUnits(data.progress)} / ` }),
+    !hasFailed && data.size && /* @__PURE__ */ jsx(HvTypography, { children: `${convertUnits(data.size)}` }),
+    hasFailed && data.errorMessage && /* @__PURE__ */ jsx(HvTypography, { className: classes == null ? void 0 : classes.fail, children: data.errorMessage })
+  ] });
 };
 const getProgressBarWith = ({
   size,
@@ -63,36 +50,17 @@ const HvFile = ({
   const progressText = getProgressText(data, classes);
   const statusIcon = getStatusIcon(classes, data.status);
   const currentProgress = getProgressBarWith(data);
-  return /* @__PURE__ */ jsxs("li", {
-    className: classes.root,
-    children: [!hasError && inProgress && /* @__PURE__ */ jsx(HvProgressBar, {
-      classes: {
-        root: classes.progressbar,
-        progressBarContainer: cx(classes.progressbarContainer, classes.progressbarBack)
-      },
-      value: currentProgress,
-      hideLabel: true
-    }), statusIcon, /* @__PURE__ */ jsx(HvTypography, {
-      className: classes.nameText,
-      variant: "label",
-      children: data.name
-    }), /* @__PURE__ */ jsx("span", {
-      className: classes.progressTextContainer,
-      children: progressText
-    }), data.preview && /* @__PURE__ */ jsx("div", {
-      className: classes.previewContainer,
-      children: data.preview
-    }), /* @__PURE__ */ jsx(HvButton, {
-      id: setId(id, "remove-button"),
-      "aria-label": removeFileButtonLabel,
-      className: classes.removeButton,
-      onClick: () => onFileRemoved == null ? void 0 : onFileRemoved(data),
-      icon: true,
-      children: /* @__PURE__ */ jsx(Close, {
-        iconSize: "XS"
-      })
-    })]
-  });
+  return /* @__PURE__ */ jsxs("li", { className: classes.root, children: [
+    !hasError && inProgress && /* @__PURE__ */ jsx(HvProgressBar, { classes: {
+      root: classes.progressbar,
+      progressBarContainer: cx(classes.progressbarContainer, classes.progressbarBack)
+    }, value: currentProgress, hideLabel: true }),
+    statusIcon,
+    /* @__PURE__ */ jsx(HvTypography, { className: classes.nameText, variant: "label", children: data.name }),
+    /* @__PURE__ */ jsx("span", { className: classes.progressTextContainer, children: progressText }),
+    data.preview && /* @__PURE__ */ jsx("div", { className: classes.previewContainer, children: data.preview }),
+    /* @__PURE__ */ jsx(HvButton, { id: setId(id, "remove-button"), "aria-label": removeFileButtonLabel, className: classes.removeButton, onClick: () => onFileRemoved == null ? void 0 : onFileRemoved(data), icon: true, children: /* @__PURE__ */ jsx(Close, { iconSize: "XS" }) })
+  ] });
 };
 export {
   HvFile,

package/dist/esm/components/FileUploader/File/File.js.map

@@ -1 +1 @@
-{"version":3,"file":"File.js","sources":["../../../../../src/components/FileUploader/File/File.tsx"],"sourcesContent":["import { Close, Fail, Success } from \"@hitachivantara/uikit-react-icons\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvProgressBar } from \"@core/components/ProgressBar\";\nimport { cx } from \"@emotion/css\";\nimport { convertUnits } from \"../utils\";\nimport { staticClasses, useClasses } from \"./File.styles\";\n\nexport { staticClasses as fileClasses };\n\nexport type HvFileClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileData extends Omit<File, \"name\" | \"size\"> {\n  /**\n   * The file id.\n   */\n  id?: string;\n  /**\n   * The file name.\n   */\n  name?: string;\n  /**\n   * The upload status.\n   */\n  status?: \"progress\" | \"success\" | \"fail\";\n  /**\n   * The file size in bytes.\n   */\n  size?: number;\n  /**\n   * Upload progress in bytes.\n   */\n  progress?: number;\n  /**\n   * Optional node representing a preview of the uploaded file.\n   */\n  preview?: React.ReactNode;\n  /**\n   * Error message when the upload failed.\n   */\n  errorMessage?: string;\n}\n\nexport type HvFilesAddedEvent = (files: HvFileData[]) => void;\n\nexport type HvFileRemovedEvent = (file: HvFileData) => void;\n\nexport type HvFileProps = {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * File information to be displayed.\n   */\n  data: HvFileData;\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Value of aria-label to apply to remove file button in file list.\n   * */\n  removeFileButtonLabel?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileClasses;\n};\n\nconst getStatusIcon = (\n  classes?: HvFileClasses,\n  status?: HvFileData[\"status\"]\n) => {\n  switch (status) {\n    case \"success\":\n      return <Success className={classes?.icon} color=\"positive\" />;\n    case \"fail\":\n      return <Fail className={classes?.icon} color=\"negative\" />;\n    default:\n      return <div className={classes?.icon} />;\n  }\n};\n\nconst getProgressText = (data: HvFileData, classes?: HvFileClasses) => {\n  const hasFailed = data.status === \"fail\";\n  const inProgress = data.status === \"progress\";\n\n  return (\n    <>\n      {data.progress || data.size || data.errorMessage ? `\\xa0|\\xa0` : null}\n\n      {inProgress && data.progress != null && (\n        <HvTypography variant=\"label\">\n          {`${convertUnits(data.progress)}\\xa0/\\xa0`}\n        </HvTypography>\n      )}\n\n      {!hasFailed && data.size && (\n        <HvTypography>{`${convertUnits(data.size)}`}</HvTypography>\n      )}\n\n      {hasFailed && data.errorMessage && (\n        <HvTypography className={classes?.fail}>\n          {data.errorMessage}\n        </HvTypography>\n      )}\n    </>\n  );\n};\n\nconst getProgressBarWith = ({ size, progress }: HvFileData) => {\n  const width =\n    progress != null && size != null ? Math.round((progress * 100) / size) : 0;\n\n  return width;\n};\n\nexport const HvFile = ({\n  id,\n  classes: classesProp,\n  data,\n  onFileRemoved,\n  removeFileButtonLabel,\n}: HvFileProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const hasError = data.status === \"fail\";\n\n  const inProgress = data.status === \"progress\";\n\n  const progressText = getProgressText(data, classes);\n\n  const statusIcon = getStatusIcon(classes, data.status);\n\n  const currentProgress = getProgressBarWith(data);\n\n  return (\n    <li className={classes.root}>\n      {!hasError && inProgress && (\n        <HvProgressBar\n          classes={{\n            root: classes.progressbar,\n            progressBarContainer: cx(\n              classes.progressbarContainer,\n              classes.progressbarBack\n            ),\n          }}\n          value={currentProgress}\n          hideLabel\n        />\n      )}\n\n      {statusIcon}\n\n      <HvTypography className={classes.nameText} variant=\"label\">\n        {data.name}\n      </HvTypography>\n\n      <span className={classes.progressTextContainer}>{progressText}</span>\n\n      {data.preview && (\n        <div className={classes.previewContainer}>{data.preview}</div>\n      )}\n\n      <HvButton\n        id={setId(id, \"remove-button\")}\n        aria-label={removeFileButtonLabel}\n        className={classes.removeButton}\n        onClick={() => onFileRemoved?.(data)}\n        icon\n      >\n        <Close iconSize=\"XS\" />\n      </HvButton>\n    </li>\n  );\n};\n"],"names":["getStatusIcon","classes","status","Success","className","icon","color","Fail","getProgressText","data","hasFailed","inProgress","_Fragment","children","progress","size","errorMessage","HvTypography","variant","convertUnits","fail","getProgressBarWith","width","Math","round","HvFile","id","classesProp","onFileRemoved","removeFileButtonLabel","useClasses","hasError","progressText","statusIcon","currentProgress","root","HvProgressBar","progressbar","progressBarContainer","cx","progressbarContainer","progressbarBack","value","hideLabel","_jsx","nameText","name","progressTextContainer","preview","previewContainer","HvButton","setId","removeButton","onClick","Close","iconSize"],"mappings":"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"}
+{"version":3,"file":"File.js","sources":["../../../../../src/components/FileUploader/File/File.tsx"],"sourcesContent":["import { Close, Fail, Success } from \"@hitachivantara/uikit-react-icons\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvProgressBar } from \"@core/components/ProgressBar\";\nimport { cx } from \"@emotion/css\";\nimport { convertUnits } from \"../utils\";\nimport { staticClasses, useClasses } from \"./File.styles\";\n\nexport { staticClasses as fileClasses };\n\nexport type HvFileClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileData extends Omit<File, \"name\" | \"size\"> {\n  /**\n   * The file id.\n   */\n  id?: string;\n  /**\n   * The file name.\n   */\n  name?: string;\n  /**\n   * The upload status.\n   */\n  status?: \"progress\" | \"success\" | \"fail\";\n  /**\n   * The file size in bytes.\n   */\n  size?: number;\n  /**\n   * Upload progress in bytes.\n   */\n  progress?: number;\n  /**\n   * Optional node representing a preview of the uploaded file.\n   */\n  preview?: React.ReactNode;\n  /**\n   * Error message when the upload failed.\n   */\n  errorMessage?: string;\n}\n\nexport type HvFilesAddedEvent = (files: HvFileData[]) => void;\n\nexport type HvFileRemovedEvent = (file: HvFileData) => void;\n\nexport type HvFileProps = {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * File information to be displayed.\n   */\n  data: HvFileData;\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Value of aria-label to apply to remove file button in file list.\n   * */\n  removeFileButtonLabel?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileClasses;\n};\n\nconst getStatusIcon = (\n  classes?: HvFileClasses,\n  status?: HvFileData[\"status\"]\n) => {\n  switch (status) {\n    case \"success\":\n      return <Success className={classes?.icon} color=\"positive\" />;\n    case \"fail\":\n      return <Fail className={classes?.icon} color=\"negative\" />;\n    default:\n      return <div className={classes?.icon} />;\n  }\n};\n\nconst getProgressText = (data: HvFileData, classes?: HvFileClasses) => {\n  const hasFailed = data.status === \"fail\";\n  const inProgress = data.status === \"progress\";\n\n  return (\n    <>\n      {data.progress || data.size || data.errorMessage ? `\\xa0|\\xa0` : null}\n\n      {inProgress && data.progress != null && (\n        <HvTypography variant=\"label\">\n          {`${convertUnits(data.progress)}\\xa0/\\xa0`}\n        </HvTypography>\n      )}\n\n      {!hasFailed && data.size && (\n        <HvTypography>{`${convertUnits(data.size)}`}</HvTypography>\n      )}\n\n      {hasFailed && data.errorMessage && (\n        <HvTypography className={classes?.fail}>\n          {data.errorMessage}\n        </HvTypography>\n      )}\n    </>\n  );\n};\n\nconst getProgressBarWith = ({ size, progress }: HvFileData) => {\n  const width =\n    progress != null && size != null ? Math.round((progress * 100) / size) : 0;\n\n  return width;\n};\n\nexport const HvFile = ({\n  id,\n  classes: classesProp,\n  data,\n  onFileRemoved,\n  removeFileButtonLabel,\n}: HvFileProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const hasError = data.status === \"fail\";\n\n  const inProgress = data.status === \"progress\";\n\n  const progressText = getProgressText(data, classes);\n\n  const statusIcon = getStatusIcon(classes, data.status);\n\n  const currentProgress = getProgressBarWith(data);\n\n  return (\n    <li className={classes.root}>\n      {!hasError && inProgress && (\n        <HvProgressBar\n          classes={{\n            root: classes.progressbar,\n            progressBarContainer: cx(\n              classes.progressbarContainer,\n              classes.progressbarBack\n            ),\n          }}\n          value={currentProgress}\n          hideLabel\n        />\n      )}\n\n      {statusIcon}\n\n      <HvTypography className={classes.nameText} variant=\"label\">\n        {data.name}\n      </HvTypography>\n\n      <span className={classes.progressTextContainer}>{progressText}</span>\n\n      {data.preview && (\n        <div className={classes.previewContainer}>{data.preview}</div>\n      )}\n\n      <HvButton\n        id={setId(id, \"remove-button\")}\n        aria-label={removeFileButtonLabel}\n        className={classes.removeButton}\n        onClick={() => onFileRemoved?.(data)}\n        icon\n      >\n        <Close iconSize=\"XS\" />\n      </HvButton>\n    </li>\n  );\n};\n"],"names":["getStatusIcon","classes","status","icon","getProgressText","data","hasFailed","inProgress","progress","size","errorMessage","convertUnits","fail","getProgressBarWith","width","Math","round","HvFile","id","classesProp","onFileRemoved","removeFileButtonLabel","useClasses","hasError","progressText","statusIcon","currentProgress","root","progressbar","progressBarContainer","cx","progressbarContainer","progressbarBack","nameText","name","progressTextContainer","preview","previewContainer","setId","removeButton"],"mappings":";;;;;;;;;;AAyEA,MAAMA,gBAAgBA,CACpBC,SACAC,WACG;AACH,UAAQA,QAAM;AAAA,IACZ,KAAK;AACH,iCAAQ,SAAQ,EAAA,WAAWD,mCAASE,MAAM,OAAM,WAAa,CAAA;AAAA,IAC/D,KAAK;AACH,iCAAQ,MAAK,EAAA,WAAWF,mCAASE,MAAM,OAAM,WAAa,CAAA;AAAA,IAC5D;AACE,aAAQ,oBAAA,OAAA,EAAI,WAAWF,mCAASE,KAAQ,CAAA;AAAA,EAC5C;AACF;AAEA,MAAMC,kBAAkBA,CAACC,MAAkBJ,YAA4B;AAC/DK,QAAAA,YAAYD,KAAKH,WAAW;AAC5BK,QAAAA,aAAaF,KAAKH,WAAW;AAEnC,SAEKG,qBAAAA,UAAAA,EAAAA,UAAAA;AAAAA,IAAAA,KAAKG,YAAYH,KAAKI,QAAQJ,KAAKK,eAAgB,QAAa;AAAA,IAEhEH,cAAcF,KAAKG,YAAY,QAC7B,oBAAA,cAAA,EAAa,SAAQ,SAClB,UAAEG,GAAAA,aAAaN,KAAKG,QAAQ,CAAE,OAClC;AAAA,IAGD,CAACF,aAAaD,KAAKI,QAClB,oBAAC,cAAe,EAAA,UAAA,GAAEE,aAAaN,KAAKI,IAAI,CAAE,GAAE,CAAA;AAAA,IAG7CH,aAAaD,KAAKK,gBACjB,oBAAC,gBAAa,WAAWT,mCAASW,MAC/BP,UAAAA,KAAKK,aACR,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;AAEA,MAAMG,qBAAqBA,CAAC;AAAA,EAAEJ;AAAAA,EAAMD;AAAqB,MAAM;AACvDM,QAAAA,QACJN,YAAY,QAAQC,QAAQ,OAAOM,KAAKC,MAAOR,WAAW,MAAOC,IAAI,IAAI;AAEpEK,SAAAA;AACT;AAEO,MAAMG,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAjB,SAASkB;AAAAA,EACTd;AAAAA,EACAe;AAAAA,EACAC;AACW,MAAM;AACX,QAAA;AAAA,IAAEpB;AAAAA,EAAAA,IAAYqB,WAAWH,WAAW;AAEpCI,QAAAA,WAAWlB,KAAKH,WAAW;AAE3BK,QAAAA,aAAaF,KAAKH,WAAW;AAE7BsB,QAAAA,eAAepB,gBAAgBC,MAAMJ,OAAO;AAElD,QAAMwB,aAAazB,cAAcC,SAASI,KAAKH,MAAM;AAE/CwB,QAAAA,kBAAkBb,mBAAmBR,IAAI;AAE/C,SACG,qBAAA,MAAA,EAAG,WAAWJ,QAAQ0B,MACpB,UAAA;AAAA,IAAA,CAACJ,YAAYhB,cACX,oBAAA,eAAA,EACC,SAAS;AAAA,MACPoB,MAAM1B,QAAQ2B;AAAAA,MACdC,sBAAsBC,GACpB7B,QAAQ8B,sBACR9B,QAAQ+B,eACV;AAAA,IAEF,GAAA,OAAON,iBACP,WAAS,KAEZ,CAAA;AAAA,IAEAD;AAAAA,IAED,oBAAC,gBAAa,WAAWxB,QAAQgC,UAAU,SAAQ,SAChD5B,eAAK6B,KACR,CAAA;AAAA,IAEC,oBAAA,QAAA,EAAK,WAAWjC,QAAQkC,uBAAwBX,UAAa,cAAA;AAAA,IAE7DnB,KAAK+B,WACH,oBAAA,OAAA,EAAI,WAAWnC,QAAQoC,kBAAmBhC,eAAK+B,QAAQ,CAAA;AAAA,IAG1D,oBAAC,YACC,IAAIE,MAAMpB,IAAI,eAAe,GAC7B,cAAYG,uBACZ,WAAWpB,QAAQsC,cACnB,SAAS,MAAMnB,+CAAgBf,OAC/B,MAAI,MAEJ,UAAC,oBAAA,OAAA,EAAM,UAAS,KAAA,CAAI,EACtB,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/FileUploader/FileList/FileList.js

@@ -1,8 +1,8 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { useUniqueId } from "../../../hooks/useUniqueId.js";
 import { setId } from "../../../utils/setId.js";
 import { useClasses } from "./FileList.styles.js";
 import { staticClasses } from "./FileList.styles.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { HvFile } from "../File/File.js";
 const HvFileList = ({
   id,
@@ -18,19 +18,9 @@ const HvFileList = ({
   const hasFiles = list.length > 0;
   if (!hasFiles)
     return null;
-  return /* @__PURE__ */ jsx("ul", {
-    id: setId(id, "list"),
-    className: classes.list,
-    children: list.map((data) => /* @__PURE__ */ jsx(HvFile, {
-      classes: {
-        root: classes == null ? void 0 : classes.listItem
-      },
-      id: setId(elementId, "values"),
-      data,
-      onFileRemoved,
-      removeFileButtonLabel
-    }, data.id))
-  });
+  return /* @__PURE__ */ jsx("ul", { id: setId(id, "list"), className: classes.list, children: list.map((data) => /* @__PURE__ */ jsx(HvFile, { classes: {
+    root: classes == null ? void 0 : classes.listItem
+  }, id: setId(elementId, "values"), data, onFileRemoved, removeFileButtonLabel }, data.id)) });
 };
 export {
   HvFileList,

package/dist/esm/components/FileUploader/FileList/FileList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileList.js","sources":["../../../../../src/components/FileUploader/FileList/FileList.tsx"],"sourcesContent":["import { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvFile, HvFileData, HvFileRemovedEvent } from \"../File\";\nimport { staticClasses, useClasses } from \"./FileList.styles\";\n\nexport { staticClasses as fileListClasses };\n\nexport type HvFileListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileListProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The files to upload.\n   */\n  list?: HvFileData[];\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Value of aria-label to apply to remove file button in FileList\n   * */\n  removeFileButtonLabel?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileListClasses;\n}\n\nexport const HvFileList = ({\n  id,\n  classes: classesProp,\n  list = [],\n  removeFileButtonLabel,\n  onFileRemoved,\n}: HvFileListProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvfilelist\");\n\n  const hasFiles = list.length > 0;\n  if (!hasFiles) return null;\n\n  return (\n    <ul id={setId(id, \"list\")} className={classes.list}>\n      {list.map((data) => (\n        <HvFile\n          key={data.id}\n          classes={{ root: classes?.listItem }}\n          id={setId(elementId, \"values\")}\n          data={data}\n          onFileRemoved={onFileRemoved}\n          removeFileButtonLabel={removeFileButtonLabel}\n        />\n      ))}\n    </ul>\n  );\n};\n"],"names":["HvFileList","id","classes","classesProp","list","removeFileButtonLabel","onFileRemoved","useClasses","elementId","useUniqueId","hasFiles","length","setId","className","children","map","data","HvFile","root","listItem"],"mappings":";;;;;;AAkCO,MAAMA,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC,SAASC;AAAAA,EACTC,OAAO,CAAE;AAAA,EACTC;AAAAA,EACAC;AACe,MAAM;AACf,QAAA;AAAA,IAAEJ;AAAAA,EAAAA,IAAYK,WAAWJ,WAAW;AAEpCK,QAAAA,YAAYC,YAAYR,IAAI,YAAY;AAExCS,QAAAA,WAAWN,KAAKO,SAAS;AAC/B,MAAI,CAACD;AAAiB,WAAA;AAEtB,6BACE,MAAA;AAAA,IAAIT,IAAIW,MAAMX,IAAI,MAAM;AAAA,IAAGY,WAAWX,QAAQE;AAAAA,IAAKU,UAChDV,KAAKW,IAAKC,CAAAA,6BACRC,QAAM;AAAA,MAELf,SAAS;AAAA,QAAEgB,MAAMhB,mCAASiB;AAAAA,MAAS;AAAA,MACnClB,IAAIW,MAAMJ,WAAW,QAAQ;AAAA,MAC7BQ;AAAAA,MACAV;AAAAA,MACAD;AAAAA,IAAAA,GALKW,KAAKf,EAMX,CACF;AAAA,EAAA,CACC;AAER;"}
+{"version":3,"file":"FileList.js","sources":["../../../../../src/components/FileUploader/FileList/FileList.tsx"],"sourcesContent":["import { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvFile, HvFileData, HvFileRemovedEvent } from \"../File\";\nimport { staticClasses, useClasses } from \"./FileList.styles\";\n\nexport { staticClasses as fileListClasses };\n\nexport type HvFileListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileListProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The files to upload.\n   */\n  list?: HvFileData[];\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Value of aria-label to apply to remove file button in FileList\n   * */\n  removeFileButtonLabel?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileListClasses;\n}\n\nexport const HvFileList = ({\n  id,\n  classes: classesProp,\n  list = [],\n  removeFileButtonLabel,\n  onFileRemoved,\n}: HvFileListProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvfilelist\");\n\n  const hasFiles = list.length > 0;\n  if (!hasFiles) return null;\n\n  return (\n    <ul id={setId(id, \"list\")} className={classes.list}>\n      {list.map((data) => (\n        <HvFile\n          key={data.id}\n          classes={{ root: classes?.listItem }}\n          id={setId(elementId, \"values\")}\n          data={data}\n          onFileRemoved={onFileRemoved}\n          removeFileButtonLabel={removeFileButtonLabel}\n        />\n      ))}\n    </ul>\n  );\n};\n"],"names":["HvFileList","id","classes","classesProp","list","removeFileButtonLabel","onFileRemoved","useClasses","elementId","useUniqueId","hasFiles","length","setId","map","data","root","listItem"],"mappings":";;;;;;AAkCO,MAAMA,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC,SAASC;AAAAA,EACTC,OAAO,CAAE;AAAA,EACTC;AAAAA,EACAC;AACe,MAAM;AACf,QAAA;AAAA,IAAEJ;AAAAA,EAAAA,IAAYK,WAAWJ,WAAW;AAEpCK,QAAAA,YAAYC,YAAYR,IAAI,YAAY;AAExCS,QAAAA,WAAWN,KAAKO,SAAS;AAC/B,MAAI,CAACD;AAAiB,WAAA;AAEtB,SACG,oBAAA,MAAA,EAAG,IAAIE,MAAMX,IAAI,MAAM,GAAG,WAAWC,QAAQE,MAC3CA,UAAKS,KAAAA,IAAKC,CACT,SAAA,oBAAC,UAEC,SAAS;AAAA,IAAEC,MAAMb,mCAASc;AAAAA,EAC1B,GAAA,IAAIJ,MAAMJ,WAAW,QAAQ,GAC7B,MACA,eACA,sBALKM,GAAAA,KAAKb,GAOb,EACH,CAAA;AAEJ;"}

package/dist/esm/components/FileUploader/FileUploader.js

@@ -1,7 +1,7 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { useLabels } from "../../hooks/useLabels.js";
 import { setId } from "../../utils/setId.js";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { HvDropZone } from "./DropZone/DropZone.js";
 import { HvFileList } from "./FileList/FileList.js";
 const DEFAULT_LABELS = {
@@ -31,27 +31,10 @@ const HvFileUploader = (props) => {
     ...others
   } = useDefaultProps("HvFileUploader", props);
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
-  return /* @__PURE__ */ jsxs("div", {
-    id,
-    className,
-    ...others,
-    children: [/* @__PURE__ */ jsx(HvDropZone, {
-      id: setId(id, "dropzone"),
-      labels,
-      multiple,
-      disabled,
-      acceptedFiles,
-      maxFileSize,
-      onFilesAdded,
-      inputProps,
-      hideLabels
-    }), /* @__PURE__ */ jsx(HvFileList, {
-      id: setId(id, "filelist"),
-      list: fileList,
-      onFileRemoved,
-      removeFileButtonLabel: labels == null ? void 0 : labels.removeFileButtonLabel
-    })]
-  });
+  return /* @__PURE__ */ jsxs("div", { id, className, ...others, children: [
+    /* @__PURE__ */ jsx(HvDropZone, { id: setId(id, "dropzone"), labels, multiple, disabled, acceptedFiles, maxFileSize, onFilesAdded, inputProps, hideLabels }),
+    /* @__PURE__ */ jsx(HvFileList, { id: setId(id, "filelist"), list: fileList, onFileRemoved, removeFileButtonLabel: labels == null ? void 0 : labels.removeFileButtonLabel })
+  ] });
 };
 export {
   HvFileUploader

package/dist/esm/components/FileUploader/FileUploader.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploader.js","sources":["../../../../src/components/FileUploader/FileUploader.tsx"],"sourcesContent":["import { useLabels } from \"@core/hooks/useLabels\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvDropZone, HvDropZoneLabels } from \"./DropZone\";\nimport { HvFileData, HvFileRemovedEvent, HvFilesAddedEvent } from \"./File\";\nimport { HvFileList } from \"./FileList\";\n\nexport interface HvFileUploaderLabels extends HvDropZoneLabels {\n  /**\n   * Value of aria-label to apply to remove file button in FileList\n   * */\n  removeFileButtonLabel?: string;\n}\n\nexport interface HvFileUploaderProps extends HvBaseProps {\n  /**\n   * An object containing all the labels.\n   */\n  labels?: HvFileUploaderLabels;\n  /**\n   * The files to upload.\n   */\n  fileList?: HvFileData[];\n  /**\n   * Whether the Dropzone should accept multiple files at once.\n   */\n  multiple?: boolean;\n  /**\n   * If the input is disabled or not\n   */\n  disabled?: boolean;\n  /**\n   * Max upload size\n   * */\n  maxFileSize?: number;\n  /**\n   * Files extensions accepted for upload.\n   */\n  acceptedFiles?: string[];\n  /**\n   * Callback fired when files are added.\n   */\n  onFilesAdded?: HvFilesAddedEvent;\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Whether the DropZone should hide labels or not.\n   */\n  hideLabels?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n}\n\n// TODO: This component needs to adopt the Form element shape and deprecate its way of composing labels\n\nconst DEFAULT_LABELS: HvFileUploaderLabels = {\n  dropzone: \"Label\",\n  sizeWarning: \"Max. file size:\",\n  drag: \"Drop files here or\",\n  selectFiles: \"click to upload\",\n  dropFiles: \"Drop files here\",\n  fileSizeError: \"The file exceeds the maximum upload size\",\n  fileTypeError: \"File type not allowed for upload\",\n  removeFileButtonLabel: \"Remove File\",\n};\n\n/**\n * Lets the user choose one or more files from their device storage. Once chosen,\n * the files can be uploaded to a server or manipulated on the client side.\n *\n * Accepted file types follow the format of the html input accept attribute. Please check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file for more details.\n */\nexport const HvFileUploader = (props: HvFileUploaderProps) => {\n  const {\n    id,\n    className,\n    labels: labelsProp,\n    fileList,\n    multiple = true,\n    disabled = false,\n    hideLabels = false,\n    maxFileSize = Infinity,\n    inputProps = {},\n    acceptedFiles = [],\n    onFilesAdded,\n    onFileRemoved,\n    ...others\n  } = useDefaultProps(\"HvFileUploader\", props);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  return (\n    <div id={id} className={className} {...others}>\n      <HvDropZone\n        id={setId(id, \"dropzone\")}\n        labels={labels}\n        multiple={multiple}\n        disabled={disabled}\n        acceptedFiles={acceptedFiles}\n        maxFileSize={maxFileSize}\n        onFilesAdded={onFilesAdded}\n        inputProps={inputProps}\n        hideLabels={hideLabels}\n      />\n      <HvFileList\n        id={setId(id, \"filelist\")}\n        list={fileList}\n        onFileRemoved={onFileRemoved}\n        removeFileButtonLabel={labels?.removeFileButtonLabel}\n      />\n    </div>\n  );\n};\n"],"names":["DEFAULT_LABELS","dropzone","sizeWarning","drag","selectFiles","dropFiles","fileSizeError","fileTypeError","removeFileButtonLabel","HvFileUploader","props","id","className","labels","labelsProp","fileList","multiple","disabled","hideLabels","maxFileSize","Infinity","inputProps","acceptedFiles","onFilesAdded","onFileRemoved","others","useDefaultProps","useLabels","children","_jsx","HvDropZone","setId","HvFileList","list"],"mappings":";;;;;;AA6DA,MAAMA,iBAAuC;AAAA,EAC3CC,UAAU;AAAA,EACVC,aAAa;AAAA,EACbC,MAAM;AAAA,EACNC,aAAa;AAAA,EACbC,WAAW;AAAA,EACXC,eAAe;AAAA,EACfC,eAAe;AAAA,EACfC,uBAAuB;AACzB;AAQaC,MAAAA,iBAAiBA,CAACC,UAA+B;AACtD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,QAAQC;AAAAA,IACRC;AAAAA,IACAC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,aAAa;AAAA,IACbC,cAAcC;AAAAA,IACdC,aAAa,CAAC;AAAA,IACdC,gBAAgB,CAAE;AAAA,IAClBC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,kBAAkBhB,KAAK;AACrCG,QAAAA,SAASc,UAAU3B,gBAAgBc,UAAU;AAEnD,8BACE,OAAA;AAAA,IAAKH;AAAAA,IAAQC;AAAAA,IAAqB,GAAKa;AAAAA,IAAMG,UAAA,CAC3CC,oBAACC,YAAU;AAAA,MACTnB,IAAIoB,MAAMpB,IAAI,UAAU;AAAA,MACxBE;AAAAA,MACAG;AAAAA,MACAC;AAAAA,MACAK;AAAAA,MACAH;AAAAA,MACAI;AAAAA,MACAF;AAAAA,MACAH;AAAAA,IAAAA,CACD,GACDW,oBAACG,YAAU;AAAA,MACTrB,IAAIoB,MAAMpB,IAAI,UAAU;AAAA,MACxBsB,MAAMlB;AAAAA,MACNS;AAAAA,MACAhB,uBAAuBK,iCAAQL;AAAAA,IAAAA,CAChC,CAAC;AAAA,EAAA,CACC;AAET;"}
+{"version":3,"file":"FileUploader.js","sources":["../../../../src/components/FileUploader/FileUploader.tsx"],"sourcesContent":["import { useLabels } from \"@core/hooks/useLabels\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvDropZone, HvDropZoneLabels } from \"./DropZone\";\nimport { HvFileData, HvFileRemovedEvent, HvFilesAddedEvent } from \"./File\";\nimport { HvFileList } from \"./FileList\";\n\nexport interface HvFileUploaderLabels extends HvDropZoneLabels {\n  /**\n   * Value of aria-label to apply to remove file button in FileList\n   * */\n  removeFileButtonLabel?: string;\n}\n\nexport interface HvFileUploaderProps extends HvBaseProps {\n  /**\n   * An object containing all the labels.\n   */\n  labels?: HvFileUploaderLabels;\n  /**\n   * The files to upload.\n   */\n  fileList?: HvFileData[];\n  /**\n   * Whether the Dropzone should accept multiple files at once.\n   */\n  multiple?: boolean;\n  /**\n   * If the input is disabled or not\n   */\n  disabled?: boolean;\n  /**\n   * Max upload size\n   * */\n  maxFileSize?: number;\n  /**\n   * Files extensions accepted for upload.\n   */\n  acceptedFiles?: string[];\n  /**\n   * Callback fired when files are added.\n   */\n  onFilesAdded?: HvFilesAddedEvent;\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Whether the DropZone should hide labels or not.\n   */\n  hideLabels?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n}\n\n// TODO: This component needs to adopt the Form element shape and deprecate its way of composing labels\n\nconst DEFAULT_LABELS: HvFileUploaderLabels = {\n  dropzone: \"Label\",\n  sizeWarning: \"Max. file size:\",\n  drag: \"Drop files here or\",\n  selectFiles: \"click to upload\",\n  dropFiles: \"Drop files here\",\n  fileSizeError: \"The file exceeds the maximum upload size\",\n  fileTypeError: \"File type not allowed for upload\",\n  removeFileButtonLabel: \"Remove File\",\n};\n\n/**\n * Lets the user choose one or more files from their device storage. Once chosen,\n * the files can be uploaded to a server or manipulated on the client side.\n *\n * Accepted file types follow the format of the html input accept attribute. Please check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file for more details.\n */\nexport const HvFileUploader = (props: HvFileUploaderProps) => {\n  const {\n    id,\n    className,\n    labels: labelsProp,\n    fileList,\n    multiple = true,\n    disabled = false,\n    hideLabels = false,\n    maxFileSize = Infinity,\n    inputProps = {},\n    acceptedFiles = [],\n    onFilesAdded,\n    onFileRemoved,\n    ...others\n  } = useDefaultProps(\"HvFileUploader\", props);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  return (\n    <div id={id} className={className} {...others}>\n      <HvDropZone\n        id={setId(id, \"dropzone\")}\n        labels={labels}\n        multiple={multiple}\n        disabled={disabled}\n        acceptedFiles={acceptedFiles}\n        maxFileSize={maxFileSize}\n        onFilesAdded={onFilesAdded}\n        inputProps={inputProps}\n        hideLabels={hideLabels}\n      />\n      <HvFileList\n        id={setId(id, \"filelist\")}\n        list={fileList}\n        onFileRemoved={onFileRemoved}\n        removeFileButtonLabel={labels?.removeFileButtonLabel}\n      />\n    </div>\n  );\n};\n"],"names":["DEFAULT_LABELS","dropzone","sizeWarning","drag","selectFiles","dropFiles","fileSizeError","fileTypeError","removeFileButtonLabel","HvFileUploader","props","id","className","labels","labelsProp","fileList","multiple","disabled","hideLabels","maxFileSize","Infinity","inputProps","acceptedFiles","onFilesAdded","onFileRemoved","others","useDefaultProps","useLabels","setId"],"mappings":";;;;;;AA6DA,MAAMA,iBAAuC;AAAA,EAC3CC,UAAU;AAAA,EACVC,aAAa;AAAA,EACbC,MAAM;AAAA,EACNC,aAAa;AAAA,EACbC,WAAW;AAAA,EACXC,eAAe;AAAA,EACfC,eAAe;AAAA,EACfC,uBAAuB;AACzB;AAQaC,MAAAA,iBAAiBA,CAACC,UAA+B;AACtD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,QAAQC;AAAAA,IACRC;AAAAA,IACAC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,aAAa;AAAA,IACbC,cAAcC;AAAAA,IACdC,aAAa,CAAC;AAAA,IACdC,gBAAgB,CAAE;AAAA,IAClBC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,kBAAkBhB,KAAK;AACrCG,QAAAA,SAASc,UAAU3B,gBAAgBc,UAAU;AAEnD,SACG,qBAAA,OAAA,EAAI,IAAQ,WAAsB,GAAIW,QACrC,UAAA;AAAA,IAAA,oBAAC,YACC,EAAA,IAAIG,MAAMjB,IAAI,UAAU,GACxB,QACA,UACA,UACA,eACA,aACA,cACA,YACA,YAAuB;AAAA,IAExB,oBAAA,YAAA,EACC,IAAIiB,MAAMjB,IAAI,UAAU,GACxB,MAAMI,UACN,eACA,uBAAuBF,iCAAQL,sBAAsB,CAAA;AAAA,EAEzD,EAAA,CAAA;AAEJ;"}