@hitachivantara/uikit-react-core 5.0.0-next.8 → 5.0.0-next.9

package/dist/esm/components/Dropdown/List/List.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.styles.js","sources":["../../../../../src/components/Dropdown/List/List.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvList } from \"components\";\nimport { transientOptions } from \"utils/transientOptions\";\n\nexport const StyledRootList = styled(\"div\")({\n  width: \"100%\",\n  backgroundColor: theme.dropdown.listBackgroundColor,\n  border: theme.dropdown.listBorder,\n  borderTop: \"none\",\n  borderRadius: theme.dropdown.listBorderRadius,\n});\n\nexport const StyledListContainer = styled(\"div\")({\n  padding: theme.dropdown.listContainerPadding,\n});\n\nexport const StyledSearchContainer = styled(\"div\")({\n  marginBottom: theme.dropdown.searchContainerMargin,\n});\n\nexport const StyledList = styled(\n  (props) => <HvList {...props} />,\n  transientOptions\n)(\n  ({\n    $dropdownHeight,\n    $virtualized,\n    $height,\n    $width,\n    $maxHeight,\n  }: {\n    $dropdownHeight?: number;\n    $virtualized?: boolean;\n    $height?: number;\n    $width?: number;\n    $maxHeight?: number;\n  }) => ({\n    maxWidth: $width,\n    maxHeight:\n      $maxHeight ??\n      `calc(${$height}px - 32px - ${theme.space.xs} - ${theme.space.sm})`,\n    overflow: \"auto\",\n    padding: 5,\n\n    ...($dropdownHeight && { height: $dropdownHeight }),\n\n    ...($virtualized && {\n      maxWidth: \"inherit\",\n      maxHeight: \"inherit\",\n      overflow: \"inherit\",\n      padding: 0,\n    }),\n  })\n);\n"],"names":["StyledRootList","process","env","NODE_ENV","target","label","width","backgroundColor","theme","dropdown","listBackgroundColor","border","listBorder","borderTop","borderRadius","listBorderRadius","StyledListContainer","padding","listContainerPadding","StyledSearchContainer","marginBottom","searchContainerMargin","StyledList","_styled","props","_jsx","HvList","_extends","transientOptions","$dropdownHeight","$virtualized","$height","$width","$maxHeight","maxWidth","maxHeight","space","xs","sm","overflow","height"],"mappings":";;;;;;;;;;;;;;;;;;;AAKO,MAAMA,iBAAwB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAC1CC,OAAO;AAAA,EACPC,iBAAiBC,MAAMC,SAASC;AAAAA,EAChCC,QAAQH,MAAMC,SAASG;AAAAA,EACvBC,WAAW;AAAA,EACXC,cAAcN,MAAMC,SAASM;AAC/B,GAACd,QAAAC,IAAAC,aAAC,eAAA,KAAA,6yEAAA;AAEK,MAAMa,sBAA6B,wBAAA,OAAKf,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAC/CY,SAAST,MAAMC,SAASS;AAC1B,GAACjB,QAAAC,IAAAC,aAAC,eAAA,KAAA,6yEAAA;AAEK,MAAMgB,wBAA+B,wBAAA,OAAKlB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACjDe,cAAcZ,MAAMC,SAASY;AAC/B,GAACpB,QAAAC,IAAAC,aAAC,eAAA,KAAA,izEAAA;AAEK,MAAMmB,aAAaC,wBACvBC,CAAUC,UAAAA,oBAACC,QAAM;AAAA,EAAA,GAAKF;AAAK,CAAA,GAAIvB,QAAAC,IAAAC,4BAAAwB,SAAA,IAAA;AAAA,EAAAvB,QAAA;AAAA,GAChCwB,gBAAgB,IAAAD,SAAA,IAAA;AAAA,EAAAvB,QAAA;AAAA,EAAAC,OAAA;AAAA,GAAhBuB,gBAAgB,CACjB,EACC,CAAC;AAAA,EACCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAOF,OAAO;AAAA,EACLC,UAAUF;AAAAA,EACVG,WACEF,kCACC,QAAOF,sBAAsBvB,MAAM4B,MAAMC,QAAQ7B,MAAM4B,MAAME;AAAAA,EAChEC,UAAU;AAAA,EACVtB,SAAS;AAAA,EAET,GAAIY,mBAAmB;AAAA,IAAEW,QAAQX;AAAAA,EAAgB;AAAA,EAEjD,GAAIC,gBAAgB;AAAA,IAClBI,UAAU;AAAA,IACVC,WAAW;AAAA,IACXI,UAAU;AAAA,IACVtB,SAAS;AAAA,EACX;AACF,IAAEhB,QAAAC,IAAAC,aACH,eAAA,KAAA,izEAAA;"}
+{"version":3,"file":"List.styles.js","sources":["../../../../../src/components/Dropdown/List/List.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvList } from \"components\";\nimport { transientOptions } from \"utils/transientOptions\";\n\nexport const StyledRootList = styled(\"div\")({\n  width: \"100%\",\n  backgroundColor: theme.dropdown.listBackgroundColor,\n  border: theme.dropdown.listBorder,\n  borderTop: \"none\",\n  borderRadius: theme.dropdown.listBorderRadius,\n});\n\nexport const StyledListContainer = styled(\"div\")({\n  padding: theme.dropdown.listContainerPadding,\n});\n\nexport const StyledSearchContainer = styled(\"div\")({\n  marginBottom: theme.dropdown.searchContainerMargin,\n});\n\nexport const StyledList = styled(\n  (props) => <HvList {...props} />,\n  transientOptions\n)(\n  ({\n    $dropdownHeight,\n    $virtualized,\n    $height,\n    $width,\n    $maxHeight,\n  }: {\n    $dropdownHeight?: number;\n    $virtualized?: boolean;\n    $height?: number;\n    $width?: number;\n    $maxHeight?: number;\n  }) => ({\n    maxWidth: $width,\n    maxHeight:\n      $maxHeight ??\n      `calc(${$height}px - 32px - ${theme.space.xs} - ${theme.space.sm})`,\n    overflow: \"auto\",\n    padding: 5,\n\n    ...($dropdownHeight && { height: $dropdownHeight }),\n\n    ...($virtualized && {\n      maxWidth: \"inherit\",\n      maxHeight: \"inherit\",\n      overflow: \"inherit\",\n      padding: 0,\n    }),\n  })\n);\n"],"names":["StyledRootList","process","env","NODE_ENV","target","label","width","backgroundColor","theme","dropdown","listBackgroundColor","border","listBorder","borderTop","borderRadius","listBorderRadius","StyledListContainer","padding","listContainerPadding","StyledSearchContainer","marginBottom","searchContainerMargin","StyledList","_styled","props","_extends","transientOptions","$dropdownHeight","$virtualized","$height","$width","$maxHeight","maxWidth","maxHeight","space","xs","sm","overflow","height"],"mappings":";;;;;;;;;;;;;;;;;;;AAKO,MAAMA,iBAAwB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAC1CC,OAAO;AAAA,EACPC,iBAAiBC,MAAMC,SAASC;AAAAA,EAChCC,QAAQH,MAAMC,SAASG;AAAAA,EACvBC,WAAW;AAAA,EACXC,cAAcN,MAAMC,SAASM;AAC/B,GAACd,QAAAC,IAAAC,aAAC,eAAA,KAAA,6yEAAA;AAEK,MAAMa,sBAA6B,wBAAA,OAAKf,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAC/CY,SAAST,MAAMC,SAASS;AAC1B,GAACjB,QAAAC,IAAAC,aAAC,eAAA,KAAA,6yEAAA;AAEK,MAAMgB,wBAA+B,wBAAA,OAAKlB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACjDe,cAAcZ,MAAMC,SAASY;AAC/B,GAACpB,QAAAC,IAAAC,aAAC,eAAA,KAAA,izEAAA;AAEK,MAAMmB,aAAaC,wBACvBC,CAAU,UAAA,oBAAC,aAAWA,UAASvB,QAAAC,IAAAC,aAAA,eAAAsB,SAAA,CAAA,GAAA;AAAA,EAAArB,QAAA;AAAA,GAChCsB,gBAAgB,IAAAD,SAAA,IAAA;AAAA,EAAArB,QAAA;AAAA,EAAAC,OAAA;AAAA,GAAhBqB,gBAAgB,CACjB,EACC,CAAC;AAAA,EACCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAOF,OAAO;AAAA,EACLC,UAAUF;AAAAA,EACVG,WACEF,kCACC,QAAOF,sBAAsBrB,MAAM0B,MAAMC,QAAQ3B,MAAM0B,MAAME;AAAAA,EAChEC,UAAU;AAAA,EACVpB,SAAS;AAAA,EAET,GAAIU,mBAAmB;AAAA,IAAEW,QAAQX;AAAAA,EAAgB;AAAA,EAEjD,GAAIC,gBAAgB;AAAA,IAClBI,UAAU;AAAA,IACVC,WAAW;AAAA,IACXI,UAAU;AAAA,IACVpB,SAAS;AAAA,EACX;AACF,IAAEhB,QAAAC,IAAAC,aACH,eAAA,KAAA,izEAAA;"}

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

@@ -1,22 +1,17 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useTheme } from "@mui/material/styles";
 import clsx from "clsx";
 import { useContext } from "react";
 import emptyStateClasses from "./emptyStateClasses.js";
 import { StyledRoot, StyledContainer, StyledTextContainer, StyledTypography } from "./EmptyState.styles.js";
 import "@hitachivantara/uikit-styles";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { HvThemeContext } from "../../providers/ThemeProvider.js";
 const HvEmptyState = (props) => {
   const {
     activeTheme
   } = useContext(HvThemeContext);
   const muiTheme = useTheme();
-  const renderNode = (type, variant, node, className2) => node && /* @__PURE__ */ jsx(StyledTypography, {
-    $type: type,
-    variant,
-    className: className2,
-    children: node
-  });
+  const renderNode = (type, variant, node, className2) => node && /* @__PURE__ */ jsx(StyledTypography, { $type: type, variant, className: className2, children: node });
   const {
     action,
     icon,
@@ -26,23 +21,14 @@ const HvEmptyState = (props) => {
     className,
     ...others
   } = props;
-  return /* @__PURE__ */ jsx(StyledRoot, {
-    className: clsx(className, emptyStateClasses.root, classes == null ? void 0 : classes.root),
-    ...others,
-    children: /* @__PURE__ */ jsxs(StyledContainer, {
-      className: clsx(emptyStateClasses.container, classes == null ? void 0 : classes.container, !!(message && !(title || action)) && clsx(emptyStateClasses.containerMessageOnly, classes == null ? void 0 : classes.containerMessageOnly)),
-      $breakpoints: muiTheme.breakpoints,
-      $messageOnly: !!(message && !(title || action)),
-      children: [/* @__PURE__ */ jsx("div", {
-        className: clsx(emptyStateClasses.iconContainer, classes == null ? void 0 : classes.iconContainer),
-        children: icon
-      }), /* @__PURE__ */ jsxs(StyledTextContainer, {
-        $breakpoints: muiTheme.breakpoints,
-        className: clsx(emptyStateClasses.textContainer, classes == null ? void 0 : classes.textContainer),
-        children: [renderNode("title", activeTheme == null ? void 0 : activeTheme.emptyState.titleVariant, title, clsx(emptyStateClasses.titleContainer, classes == null ? void 0 : classes.titleContainer)), renderNode("message", "body", message, clsx(emptyStateClasses.messageContainer, classes == null ? void 0 : classes.messageContainer)), renderNode("action", "body", action, clsx(emptyStateClasses.actionContainer, classes == null ? void 0 : classes.actionContainer))]
-      })]
-    })
-  });
+  return /* @__PURE__ */ jsx(StyledRoot, { className: clsx(className, emptyStateClasses.root, classes == null ? void 0 : classes.root), ...others, children: /* @__PURE__ */ jsxs(StyledContainer, { className: clsx(emptyStateClasses.container, classes == null ? void 0 : classes.container, !!(message && !(title || action)) && clsx(emptyStateClasses.containerMessageOnly, classes == null ? void 0 : classes.containerMessageOnly)), $breakpoints: muiTheme.breakpoints, $messageOnly: !!(message && !(title || action)), children: [
+    /* @__PURE__ */ jsx("div", { className: clsx(emptyStateClasses.iconContainer, classes == null ? void 0 : classes.iconContainer), children: icon }),
+    /* @__PURE__ */ jsxs(StyledTextContainer, { $breakpoints: muiTheme.breakpoints, className: clsx(emptyStateClasses.textContainer, classes == null ? void 0 : classes.textContainer), children: [
+      renderNode("title", activeTheme == null ? void 0 : activeTheme.emptyState.titleVariant, title, clsx(emptyStateClasses.titleContainer, classes == null ? void 0 : classes.titleContainer)),
+      renderNode("message", "body", message, clsx(emptyStateClasses.messageContainer, classes == null ? void 0 : classes.messageContainer)),
+      renderNode("action", "body", action, clsx(emptyStateClasses.actionContainer, classes == null ? void 0 : 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 { useTheme } from \"@mui/material/styles\";\nimport clsx from \"clsx\";\nimport React, { useContext } from \"react\";\nimport { HvBaseProps } from \"../../types\";\nimport emptyStateClasses, { HvEmptyStateClasses } from \"./emptyStateClasses\";\nimport {\n  StyledContainer,\n  StyledRoot,\n  StyledTextContainer,\n  StyledTypography,\n} from \"./EmptyState.styles\";\nimport { HvTypographyProps } from \"components\";\nimport { HvThemeContext } from \"index\";\n\nexport type HvEmptyStateProps = 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 { activeTheme } = useContext(HvThemeContext);\n\n  const muiTheme = useTheme();\n\n  const renderNode = (\n    type: \"action\" | \"message\" | \"title\",\n    variant?: HvTypographyProps[\"variant\"],\n    node?: string | React.ReactNode,\n    className?: string\n  ) =>\n    node && (\n      <StyledTypography $type={type} variant={variant} className={className}>\n        {node}\n      </StyledTypography>\n    );\n\n  const { action, icon, title, message, classes, className, ...others } = props;\n\n  return (\n    <StyledRoot\n      className={clsx(className, emptyStateClasses.root, classes?.root)}\n      {...others}\n    >\n      <StyledContainer\n        className={clsx(\n          emptyStateClasses.container,\n          classes?.container,\n          !!(message && !(title || action)) &&\n            clsx(\n              emptyStateClasses.containerMessageOnly,\n              classes?.containerMessageOnly\n            )\n        )}\n        $breakpoints={muiTheme.breakpoints}\n        $messageOnly={!!(message && !(title || action))}\n      >\n        <div\n          className={clsx(\n            emptyStateClasses.iconContainer,\n            classes?.iconContainer\n          )}\n        >\n          {icon}\n        </div>\n        <StyledTextContainer\n          $breakpoints={muiTheme.breakpoints}\n          className={clsx(\n            emptyStateClasses.textContainer,\n            classes?.textContainer\n          )}\n        >\n          {renderNode(\n            \"title\",\n            activeTheme?.emptyState.titleVariant,\n            title,\n            clsx(emptyStateClasses.titleContainer, classes?.titleContainer)\n          )}\n          {renderNode(\n            \"message\",\n            \"body\",\n            message,\n            clsx(emptyStateClasses.messageContainer, classes?.messageContainer)\n          )}\n          {renderNode(\n            \"action\",\n            \"body\",\n            action,\n            clsx(emptyStateClasses.actionContainer, classes?.actionContainer)\n          )}\n        </StyledTextContainer>\n      </StyledContainer>\n    </StyledRoot>\n  );\n};\n"],"names":["HvEmptyState","props","activeTheme","useContext","HvThemeContext","muiTheme","useTheme","renderNode","type","variant","node","className","StyledTypography","$type","children","action","icon","title","message","classes","others","StyledRoot","clsx","emptyStateClasses","root","StyledContainer","container","containerMessageOnly","$breakpoints","breakpoints","$messageOnly","_jsx","iconContainer","_jsxs","StyledTextContainer","textContainer","emptyState","titleVariant","titleContainer","messageContainer","actionContainer"],"mappings":";;;;;;;;AA8BaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAgBC,WAAWC,cAAc;AAEjD,QAAMC,WAAWC;AAEXC,QAAAA,aAAaA,CACjBC,MACAC,SACAC,MACAC,eAEAD,4BACGE,kBAAgB;AAAA,IAACC,OAAOL;AAAAA,IAAMC;AAAAA,IAAkBE,WAAWA;AAAAA,IAAUG,UACnEJ;AAAAA,EAAAA,CAEJ;AAEG,QAAA;AAAA,IAAEK;AAAAA,IAAQC;AAAAA,IAAMC;AAAAA,IAAOC;AAAAA,IAASC;AAAAA,IAASR;AAAAA,OAAcS;AAAAA,EAAWnB,IAAAA;AAExE,6BACGoB,YAAU;AAAA,IACTV,WAAWW,KAAKX,WAAWY,kBAAkBC,MAAML,mCAASK,IAAI;AAAA,IAAE,GAC9DJ;AAAAA,IAAMN,+BAETW,iBAAe;AAAA,MACdd,WAAWW,KACTC,kBAAkBG,WAClBP,mCAASO,WACT,CAAC,EAAER,WAAW,EAAED,SAASF,YACvBO,KACEC,kBAAkBI,sBAClBR,mCAASQ,oBAAoB,CAC9B;AAAA,MAELC,cAAcvB,SAASwB;AAAAA,MACvBC,cAAc,CAAC,EAAEZ,WAAW,EAAED,SAASF;AAAAA,MAASD,WAEhDiB,oBAAA,OAAA;AAAA,QACEpB,WAAWW,KACTC,kBAAkBS,eAClBb,mCAASa,aAAa;AAAA,QACtBlB,UAEDE;AAAAA,MAAAA,CACG,GACNiB,qBAACC,qBAAmB;AAAA,QAClBN,cAAcvB,SAASwB;AAAAA,QACvBlB,WAAWW,KACTC,kBAAkBY,eAClBhB,mCAASgB,aAAa;AAAA,QACtBrB,UAEDP,CAAAA,WACC,SACAL,2CAAakC,WAAWC,cACxBpB,OACAK,KAAKC,kBAAkBe,gBAAgBnB,mCAASmB,cAAc,CAAC,GAEhE/B,WACC,WACA,QACAW,SACAI,KAAKC,kBAAkBgB,kBAAkBpB,mCAASoB,gBAAgB,CAAC,GAEpEhC,WACC,UACA,QACAQ,QACAO,KAAKC,kBAAkBiB,iBAAiBrB,mCAASqB,eAAe,CAAC,CAClE;AAAA,MAAA,CACmB,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAEb;AAEjB;"}
+{"version":3,"file":"EmptyState.js","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import { useTheme } from \"@mui/material/styles\";\nimport clsx from \"clsx\";\nimport React, { useContext } from \"react\";\nimport { HvBaseProps } from \"../../types\";\nimport emptyStateClasses, { HvEmptyStateClasses } from \"./emptyStateClasses\";\nimport {\n  StyledContainer,\n  StyledRoot,\n  StyledTextContainer,\n  StyledTypography,\n} from \"./EmptyState.styles\";\nimport { HvTypographyProps } from \"components\";\nimport { HvThemeContext } from \"index\";\n\nexport type HvEmptyStateProps = 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 { activeTheme } = useContext(HvThemeContext);\n\n  const muiTheme = useTheme();\n\n  const renderNode = (\n    type: \"action\" | \"message\" | \"title\",\n    variant?: HvTypographyProps[\"variant\"],\n    node?: string | React.ReactNode,\n    className?: string\n  ) =>\n    node && (\n      <StyledTypography $type={type} variant={variant} className={className}>\n        {node}\n      </StyledTypography>\n    );\n\n  const { action, icon, title, message, classes, className, ...others } = props;\n\n  return (\n    <StyledRoot\n      className={clsx(className, emptyStateClasses.root, classes?.root)}\n      {...others}\n    >\n      <StyledContainer\n        className={clsx(\n          emptyStateClasses.container,\n          classes?.container,\n          !!(message && !(title || action)) &&\n            clsx(\n              emptyStateClasses.containerMessageOnly,\n              classes?.containerMessageOnly\n            )\n        )}\n        $breakpoints={muiTheme.breakpoints}\n        $messageOnly={!!(message && !(title || action))}\n      >\n        <div\n          className={clsx(\n            emptyStateClasses.iconContainer,\n            classes?.iconContainer\n          )}\n        >\n          {icon}\n        </div>\n        <StyledTextContainer\n          $breakpoints={muiTheme.breakpoints}\n          className={clsx(\n            emptyStateClasses.textContainer,\n            classes?.textContainer\n          )}\n        >\n          {renderNode(\n            \"title\",\n            activeTheme?.emptyState.titleVariant,\n            title,\n            clsx(emptyStateClasses.titleContainer, classes?.titleContainer)\n          )}\n          {renderNode(\n            \"message\",\n            \"body\",\n            message,\n            clsx(emptyStateClasses.messageContainer, classes?.messageContainer)\n          )}\n          {renderNode(\n            \"action\",\n            \"body\",\n            action,\n            clsx(emptyStateClasses.actionContainer, classes?.actionContainer)\n          )}\n        </StyledTextContainer>\n      </StyledContainer>\n    </StyledRoot>\n  );\n};\n"],"names":["HvEmptyState","props","activeTheme","useContext","HvThemeContext","muiTheme","useTheme","renderNode","type","variant","node","className","action","icon","title","message","classes","others","clsx","emptyStateClasses","root","container","containerMessageOnly","breakpoints","iconContainer","textContainer","emptyState","titleVariant","titleContainer","messageContainer","actionContainer"],"mappings":";;;;;;;;AA8BaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAgBC,WAAWC,cAAc;AAEjD,QAAMC,WAAWC;AAEjB,QAAMC,aAAaA,CACjBC,MACAC,SACAC,MACAC,eAEAD,QACG,oBAAA,kBAAA,EAAiB,OAAOF,MAAM,SAAkB,WAAWG,YACzDD,UACH,KAAA,CAAA;AAGE,QAAA;AAAA,IAAEE;AAAAA,IAAQC;AAAAA,IAAMC;AAAAA,IAAOC;AAAAA,IAASC;AAAAA,IAASL;AAAAA,OAAcM;AAAAA,EAAWhB,IAAAA;AAExE,6BACG,YACC,EAAA,WAAWiB,KAAKP,WAAWQ,kBAAkBC,MAAMJ,mCAASI,IAAI,GAC5DH,GAAAA,QAEJ,+BAAC,iBACC,EAAA,WAAWC,KACTC,kBAAkBE,WAClBL,mCAASK,WACT,CAAC,EAAEN,WAAW,EAAED,SAASF,YACvBM,KACEC,kBAAkBG,sBAClBN,mCAASM,oBAAoB,CAC9B,GAEL,cAAcjB,SAASkB,aACvB,cAAc,CAAC,EAAER,WAAW,EAAED,SAASF,UAEvC,UAAA;AAAA,IAAC,oBAAA,OAAA,EACC,WAAWM,KACTC,kBAAkBK,eAClBR,mCAASQ,aAAa,GAGvBX,UACH,KAAA,CAAA;AAAA,IACA,qBAAC,qBACC,EAAA,cAAcR,SAASkB,aACvB,WAAWL,KACTC,kBAAkBM,eAClBT,mCAASS,aAAa,GAGvBlB,UAAAA;AAAAA,MACC,WAAA,SACAL,2CAAawB,WAAWC,cACxBb,OACAI,KAAKC,kBAAkBS,gBAAgBZ,mCAASY,cAAc,CAAC;AAAA,MAEhErB,WACC,WACA,QACAQ,SACAG,KAAKC,kBAAkBU,kBAAkBb,mCAASa,gBAAgB,CAAC;AAAA,MAEpEtB,WACC,UACA,QACAK,QACAM,KAAKC,kBAAkBW,iBAAiBd,mCAASc,eAAe,CAAC;AAAA,IAAA,GAErE;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 dropZoneClasses from "./dropZoneClasses.js";
 import { useState, useRef } from "react";
 import { uniqueId } from "lodash";
@@ -5,7 +6,6 @@ import accept from "attr-accept";
 import { StyledDropZoneLabelsGroup, StyledLabel, StyledInfoMessage, StyledDropZoneContainer, StyledInput, StyledDropArea, StyledDropAreaLabel, StyledDragText, StyledDropAreaIcon, StyledDropAreaLabels, StyledSelectedFilesText } from "./DropZone.styles.js";
 import clsx from "clsx";
 import { convertUnits } from "../utils.js";
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
 import withId from "../../../hocs/withId.js";
 import { setId } from "../../../utils/setId.js";
 import { isKeypress } from "../../../utils/keyboardUtils/keyCheck.js";
@@ -52,112 +52,63 @@ const HvDropZone = withId(({
     });
     onFilesAdded == null ? void 0 : onFilesAdded(newFiles);
   };
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [!hideLabels && /* @__PURE__ */ jsxs(StyledDropZoneLabelsGroup, {
-      id,
-      className: clsx(classes == null ? void 0 : classes.dropZoneLabelsGroup, dropZoneClasses.dropZoneLabelsGroup),
-      "aria-label": "File Dropzone",
-      children: [/* @__PURE__ */ jsx(StyledLabel, {
-        id: setId(id, "input-file-label"),
-        htmlFor: setId(id, "input-file"),
-        label: labels == null ? void 0 : labels.dropzone,
-        className: clsx(classes == null ? void 0 : classes.dropZoneLabel, dropZoneClasses.dropZoneLabel),
-        $disabled: disabled
-      }), /* @__PURE__ */ jsxs(StyledInfoMessage, {
-        $disabled: disabled,
-        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 && `\xA0(${acceptedFiles.join(", ")})`]
-      })]
-    }), /* @__PURE__ */ jsxs(StyledDropZoneContainer, {
-      id: setId(id, "button"),
-      className: clsx(classes == null ? void 0 : classes.dropZoneContainer, dropZoneClasses.dropZoneContainer, dragState && clsx(classes == null ? void 0 : classes.dragAction, dropZoneClasses.dragAction), disabled && clsx(classes == null ? void 0 : classes.dropZoneContainerDisabled, dropZoneClasses.dropZoneContainerDisabled)),
-      $drag: dragState,
-      $disabled: disabled,
-      role: "button",
-      tabIndex: 0,
-      onDragEnter: (event) => {
-        if (!disabled) {
-          enterDropArea();
-          event.stopPropagation();
-          event.preventDefault();
-        }
-      },
-      onDragLeave: leaveDropArea,
-      onDropCapture: leaveDropArea,
-      onDragOver: (event) => {
-        if (!disabled) {
-          enterDropArea();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !hideLabels && /* @__PURE__ */ jsxs(StyledDropZoneLabelsGroup, { id, className: clsx(classes == null ? void 0 : classes.dropZoneLabelsGroup, dropZoneClasses.dropZoneLabelsGroup), "aria-label": "File Dropzone", children: [
+      /* @__PURE__ */ jsx(StyledLabel, { id: setId(id, "input-file-label"), htmlFor: setId(id, "input-file"), label: labels == null ? void 0 : labels.dropzone, className: clsx(classes == null ? void 0 : classes.dropZoneLabel, dropZoneClasses.dropZoneLabel), $disabled: disabled }),
+      /* @__PURE__ */ jsxs(StyledInfoMessage, { $disabled: disabled, 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 && `\xA0(${acceptedFiles.join(", ")})`
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(StyledDropZoneContainer, { id: setId(id, "button"), className: clsx(classes == null ? void 0 : classes.dropZoneContainer, dropZoneClasses.dropZoneContainer, dragState && clsx(classes == null ? void 0 : classes.dragAction, dropZoneClasses.dragAction), disabled && clsx(classes == null ? void 0 : classes.dropZoneContainerDisabled, dropZoneClasses.dropZoneContainerDisabled)), $drag: dragState, $disabled: disabled, role: "button", tabIndex: 0, onDragEnter: (event) => {
+      if (!disabled) {
+        enterDropArea();
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    }, onDragLeave: leaveDropArea, onDropCapture: leaveDropArea, onDragOver: (event) => {
+      if (!disabled) {
+        enterDropArea();
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    }, onDrop: (event) => {
+      if (!disabled) {
+        const {
+          files
+        } = event.dataTransfer;
+        if (multiple === true || files.length === 1) {
           event.stopPropagation();
           event.preventDefault();
+          onChangeHandler(files);
         }
-      },
-      onDrop: (event) => {
-        if (!disabled) {
-          const {
-            files
-          } = event.dataTransfer;
-          if (multiple === true || files.length === 1) {
-            event.stopPropagation();
-            event.preventDefault();
-            onChangeHandler(files);
-          }
+      }
+    }, onKeyDown: (e) => {
+      var _a;
+      if (isKeypress(e, keyboardCodes.Enter) || isKeypress(e, 32)) {
+        (_a = inputRef.current) == null ? void 0 : _a.click();
+      }
+    }, children: [
+      /* @__PURE__ */ jsx(StyledInput, { id: setId(id, "input-file"), tabIndex: -1, className: clsx(classes == null ? void 0 : classes.inputArea, dropZoneClasses.inputArea), type: "file", multiple, disabled, title: !disabled ? `${labels == null ? void 0 : labels.drag}\xA0${labels == null ? void 0 : labels.selectFiles}` : "", onClick: () => {
+        if (inputRef.current) {
+          inputRef.current.value = "";
         }
-      },
-      onKeyDown: (e) => {
+      }, onChange: () => {
         var _a;
-        if (isKeypress(e, keyboardCodes.Enter) || isKeypress(e, 32)) {
-          (_a = inputRef.current) == null ? void 0 : _a.click();
+        if (!disabled && ((_a = inputRef.current) == null ? void 0 : _a.files)) {
+          onChangeHandler(inputRef.current.files);
         }
-      },
-      children: [/* @__PURE__ */ jsx(StyledInput, {
-        id: setId(id, "input-file"),
-        tabIndex: -1,
-        className: clsx(classes == null ? void 0 : classes.inputArea, dropZoneClasses.inputArea),
-        type: "file",
-        multiple,
-        disabled,
-        title: !disabled ? `${labels == null ? void 0 : labels.drag}\xA0${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);
-          }
-        },
-        ref: inputRef,
-        accept: acceptedFiles.join(","),
-        ...inputProps
-      }), /* @__PURE__ */ jsx(StyledDropArea, {
-        className: clsx(classes == null ? void 0 : classes.dropArea, dropZoneClasses.dropArea),
-        children: dragState ? /* @__PURE__ */ jsx(StyledDropAreaLabel, {
-          className: clsx(classes == null ? void 0 : classes.dropZoneAreaLabels, dropZoneClasses.dropZoneAreaLabels),
-          children: /* @__PURE__ */ jsx(StyledDragText, {
-            className: clsx(classes == null ? void 0 : classes.dragText, dropZoneClasses.dragText),
-            children: labels == null ? void 0 : labels.dropFiles
-          })
-        }) : /* @__PURE__ */ jsxs(Fragment, {
-          children: [/* @__PURE__ */ jsx(StyledDropAreaIcon, {
-            iconSize: "M",
-            className: clsx(classes == null ? void 0 : classes.dropZoneAreaIcon, dropZoneClasses.dropZoneAreaIcon),
-            color: disabled ? "atmo5" : "acce1"
-          }), /* @__PURE__ */ jsx(StyledDropAreaLabels, {
-            className: clsx(classes == null ? void 0 : classes.dropZoneAreaLabels, dropZoneClasses.dropZoneAreaLabels),
-            children: /* @__PURE__ */ jsxs(StyledDragText, {
-              className: clsx(classes == null ? void 0 : classes.dragText, dropZoneClasses.dragText),
-              children: [labels == null ? void 0 : labels.drag, /* @__PURE__ */ jsx(StyledSelectedFilesText, {
-                className: clsx(classes == null ? void 0 : classes.selectFilesText, dropZoneClasses.selectFilesText),
-                children: `\xA0${labels == null ? void 0 : labels.selectFiles}`
-              })]
-            })
-          })]
-        })
-      })]
-    })]
-  });
+      }, ref: inputRef, accept: acceptedFiles.join(","), ...inputProps }),
+      /* @__PURE__ */ jsx(StyledDropArea, { className: clsx(classes == null ? void 0 : classes.dropArea, dropZoneClasses.dropArea), children: dragState ? /* @__PURE__ */ jsx(StyledDropAreaLabel, { className: clsx(classes == null ? void 0 : classes.dropZoneAreaLabels, dropZoneClasses.dropZoneAreaLabels), children: /* @__PURE__ */ jsx(StyledDragText, { className: clsx(classes == null ? void 0 : classes.dragText, dropZoneClasses.dragText), children: labels == null ? void 0 : labels.dropFiles }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(StyledDropAreaIcon, { iconSize: "M", className: clsx(classes == null ? void 0 : classes.dropZoneAreaIcon, dropZoneClasses.dropZoneAreaIcon), color: disabled ? "atmo5" : "acce1" }),
+        /* @__PURE__ */ jsx(StyledDropAreaLabels, { className: clsx(classes == null ? void 0 : classes.dropZoneAreaLabels, dropZoneClasses.dropZoneAreaLabels), children: /* @__PURE__ */ jsxs(StyledDragText, { className: clsx(classes == null ? void 0 : classes.dragText, dropZoneClasses.dragText), children: [
+          labels == null ? void 0 : labels.drag,
+          /* @__PURE__ */ jsx(StyledSelectedFilesText, { className: clsx(classes == null ? void 0 : classes.selectFilesText, dropZoneClasses.selectFilesText), children: `\xA0${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 { HvFileData, HvFilesAddedEvent } from \"../File\";\nimport dropZoneClasses, { HvDropZoneClasses } from \"./dropZoneClasses\";\nimport React, { useRef, useState } from \"react\";\nimport { uniqueId } from \"lodash\";\nimport accept from \"attr-accept\";\nimport {\n  StyledDragText,\n  StyledDropArea,\n  StyledDropAreaIcon,\n  StyledDropAreaLabel,\n  StyledDropAreaLabels,\n  StyledDropZoneContainer,\n  StyledDropZoneLabelsGroup,\n  StyledInfoMessage,\n  StyledInput,\n  StyledLabel,\n  StyledSelectedFilesText,\n} from \"./DropZone.styles\";\nimport clsx from \"clsx\";\nimport { isKeypress, keyboardCodes, setId } from \"utils\";\nimport { convertUnits } from \"../utils\";\nimport { withId } from \"hocs\";\n\nexport type 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 type 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 = withId(\n  ({\n    id,\n    classes,\n    labels,\n    acceptedFiles,\n    maxFileSize,\n    inputProps,\n    hideLabels,\n    multiple = true,\n    disabled = false,\n    onFilesAdded,\n  }: HvDropZoneProps) => {\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          <StyledDropZoneLabelsGroup\n            id={id}\n            className={clsx(\n              classes?.dropZoneLabelsGroup,\n              dropZoneClasses.dropZoneLabelsGroup\n            )}\n            aria-label=\"File Dropzone\"\n          >\n            <StyledLabel\n              id={setId(id, \"input-file-label\")}\n              htmlFor={setId(id, \"input-file\")}\n              label={labels?.dropzone}\n              className={clsx(\n                classes?.dropZoneLabel,\n                dropZoneClasses.dropZoneLabel\n              )}\n              $disabled={disabled}\n            />\n            <StyledInfoMessage\n              $disabled={disabled}\n              id={setId(id, \"description\")}\n            >\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            </StyledInfoMessage>\n          </StyledDropZoneLabelsGroup>\n        )}\n        <StyledDropZoneContainer\n          id={setId(id, \"button\")}\n          className={clsx(\n            classes?.dropZoneContainer,\n            dropZoneClasses.dropZoneContainer,\n            dragState && clsx(classes?.dragAction, dropZoneClasses.dragAction),\n            disabled &&\n              clsx(\n                classes?.dropZoneContainerDisabled,\n                dropZoneClasses.dropZoneContainerDisabled\n              )\n          )}\n          $drag={dragState}\n          $disabled={disabled}\n          role=\"button\"\n          tabIndex={0}\n          onDragEnter={(event) => {\n            if (!disabled) {\n              enterDropArea();\n              event.stopPropagation();\n              event.preventDefault();\n            }\n          }}\n          onDragLeave={leaveDropArea}\n          onDropCapture={leaveDropArea}\n          onDragOver={(event) => {\n            if (!disabled) {\n              enterDropArea();\n              event.stopPropagation();\n              event.preventDefault();\n            }\n          }}\n          onDrop={(event) => {\n            if (!disabled) {\n              const { files } = event.dataTransfer;\n              if (multiple === true || files.length === 1) {\n                event.stopPropagation();\n                event.preventDefault();\n                onChangeHandler(files);\n              }\n            }\n          }}\n          onKeyDown={(e) => {\n            if (isKeypress(e, keyboardCodes.Enter) || isKeypress(e, 32)) {\n              inputRef.current?.click();\n            }\n          }}\n        >\n          <StyledInput\n            id={setId(id, \"input-file\")}\n            tabIndex={-1}\n            className={clsx(classes?.inputArea, dropZoneClasses.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            ref={inputRef}\n            accept={acceptedFiles.join(\",\")}\n            {...inputProps}\n          />\n          <StyledDropArea\n            className={clsx(classes?.dropArea, dropZoneClasses.dropArea)}\n          >\n            {dragState ? (\n              <StyledDropAreaLabel\n                className={clsx(\n                  classes?.dropZoneAreaLabels,\n                  dropZoneClasses.dropZoneAreaLabels\n                )}\n              >\n                <StyledDragText\n                  className={clsx(classes?.dragText, dropZoneClasses.dragText)}\n                >\n                  {labels?.dropFiles}\n                </StyledDragText>\n              </StyledDropAreaLabel>\n            ) : (\n              <>\n                <StyledDropAreaIcon\n                  iconSize=\"M\"\n                  className={clsx(\n                    classes?.dropZoneAreaIcon,\n                    dropZoneClasses.dropZoneAreaIcon\n                  )}\n                  color={disabled ? \"atmo5\" : \"acce1\"}\n                />\n                <StyledDropAreaLabels\n                  className={clsx(\n                    classes?.dropZoneAreaLabels,\n                    dropZoneClasses.dropZoneAreaLabels\n                  )}\n                >\n                  <StyledDragText\n                    className={clsx(\n                      classes?.dragText,\n                      dropZoneClasses.dragText\n                    )}\n                  >\n                    {labels?.drag}\n                    <StyledSelectedFilesText\n                      className={clsx(\n                        classes?.selectFilesText,\n                        dropZoneClasses.selectFilesText\n                      )}\n                    >{`\\xa0${labels?.selectFiles}`}</StyledSelectedFilesText>\n                  </StyledDragText>\n                </StyledDropAreaLabels>\n              </>\n            )}\n          </StyledDropArea>\n        </StyledDropZoneContainer>\n      </>\n    );\n  }\n);\n"],"names":["HvDropZone","withId","id","classes","labels","acceptedFiles","maxFileSize","inputProps","hideLabels","multiple","disabled","onFilesAdded","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","StyledDropZoneLabelsGroup","className","clsx","dropZoneLabelsGroup","dropZoneClasses","_jsx","StyledLabel","setId","htmlFor","label","dropzone","dropZoneLabel","$disabled","_jsxs","StyledInfoMessage","Number","isInteger","sizeWarning","convertUnits","join","StyledDropZoneContainer","dropZoneContainer","dragAction","dropZoneContainerDisabled","$drag","role","tabIndex","onDragEnter","event","stopPropagation","preventDefault","onDragLeave","onDropCapture","onDragOver","onDrop","files","dataTransfer","onKeyDown","isKeypress","keyboardCodes","Enter","current","click","StyledInput","inputArea","title","drag","selectFiles","onClick","value","onChange","ref","StyledDropArea","dropArea","StyledDropAreaLabel","dropZoneAreaLabels","StyledDragText","dragText","dropFiles","StyledDropAreaIcon","iconSize","dropZoneAreaIcon","color","StyledDropAreaLabels","StyledSelectedFilesText","selectFilesText"],"mappings":"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"}
+{"version":3,"file":"DropZone.js","sources":["../../../../../src/components/FileUploader/DropZone/DropZone.tsx"],"sourcesContent":["import { HvFileData, HvFilesAddedEvent } from \"../File\";\nimport dropZoneClasses, { HvDropZoneClasses } from \"./dropZoneClasses\";\nimport React, { useRef, useState } from \"react\";\nimport { uniqueId } from \"lodash\";\nimport accept from \"attr-accept\";\nimport {\n  StyledDragText,\n  StyledDropArea,\n  StyledDropAreaIcon,\n  StyledDropAreaLabel,\n  StyledDropAreaLabels,\n  StyledDropZoneContainer,\n  StyledDropZoneLabelsGroup,\n  StyledInfoMessage,\n  StyledInput,\n  StyledLabel,\n  StyledSelectedFilesText,\n} from \"./DropZone.styles\";\nimport clsx from \"clsx\";\nimport { isKeypress, keyboardCodes, setId } from \"utils\";\nimport { convertUnits } from \"../utils\";\nimport { withId } from \"hocs\";\n\nexport type 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 type 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 = withId(\n  ({\n    id,\n    classes,\n    labels,\n    acceptedFiles,\n    maxFileSize,\n    inputProps,\n    hideLabels,\n    multiple = true,\n    disabled = false,\n    onFilesAdded,\n  }: HvDropZoneProps) => {\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          <StyledDropZoneLabelsGroup\n            id={id}\n            className={clsx(\n              classes?.dropZoneLabelsGroup,\n              dropZoneClasses.dropZoneLabelsGroup\n            )}\n            aria-label=\"File Dropzone\"\n          >\n            <StyledLabel\n              id={setId(id, \"input-file-label\")}\n              htmlFor={setId(id, \"input-file\")}\n              label={labels?.dropzone}\n              className={clsx(\n                classes?.dropZoneLabel,\n                dropZoneClasses.dropZoneLabel\n              )}\n              $disabled={disabled}\n            />\n            <StyledInfoMessage\n              $disabled={disabled}\n              id={setId(id, \"description\")}\n            >\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            </StyledInfoMessage>\n          </StyledDropZoneLabelsGroup>\n        )}\n        <StyledDropZoneContainer\n          id={setId(id, \"button\")}\n          className={clsx(\n            classes?.dropZoneContainer,\n            dropZoneClasses.dropZoneContainer,\n            dragState && clsx(classes?.dragAction, dropZoneClasses.dragAction),\n            disabled &&\n              clsx(\n                classes?.dropZoneContainerDisabled,\n                dropZoneClasses.dropZoneContainerDisabled\n              )\n          )}\n          $drag={dragState}\n          $disabled={disabled}\n          role=\"button\"\n          tabIndex={0}\n          onDragEnter={(event) => {\n            if (!disabled) {\n              enterDropArea();\n              event.stopPropagation();\n              event.preventDefault();\n            }\n          }}\n          onDragLeave={leaveDropArea}\n          onDropCapture={leaveDropArea}\n          onDragOver={(event) => {\n            if (!disabled) {\n              enterDropArea();\n              event.stopPropagation();\n              event.preventDefault();\n            }\n          }}\n          onDrop={(event) => {\n            if (!disabled) {\n              const { files } = event.dataTransfer;\n              if (multiple === true || files.length === 1) {\n                event.stopPropagation();\n                event.preventDefault();\n                onChangeHandler(files);\n              }\n            }\n          }}\n          onKeyDown={(e) => {\n            if (isKeypress(e, keyboardCodes.Enter) || isKeypress(e, 32)) {\n              inputRef.current?.click();\n            }\n          }}\n        >\n          <StyledInput\n            id={setId(id, \"input-file\")}\n            tabIndex={-1}\n            className={clsx(classes?.inputArea, dropZoneClasses.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            ref={inputRef}\n            accept={acceptedFiles.join(\",\")}\n            {...inputProps}\n          />\n          <StyledDropArea\n            className={clsx(classes?.dropArea, dropZoneClasses.dropArea)}\n          >\n            {dragState ? (\n              <StyledDropAreaLabel\n                className={clsx(\n                  classes?.dropZoneAreaLabels,\n                  dropZoneClasses.dropZoneAreaLabels\n                )}\n              >\n                <StyledDragText\n                  className={clsx(classes?.dragText, dropZoneClasses.dragText)}\n                >\n                  {labels?.dropFiles}\n                </StyledDragText>\n              </StyledDropAreaLabel>\n            ) : (\n              <>\n                <StyledDropAreaIcon\n                  iconSize=\"M\"\n                  className={clsx(\n                    classes?.dropZoneAreaIcon,\n                    dropZoneClasses.dropZoneAreaIcon\n                  )}\n                  color={disabled ? \"atmo5\" : \"acce1\"}\n                />\n                <StyledDropAreaLabels\n                  className={clsx(\n                    classes?.dropZoneAreaLabels,\n                    dropZoneClasses.dropZoneAreaLabels\n                  )}\n                >\n                  <StyledDragText\n                    className={clsx(\n                      classes?.dragText,\n                      dropZoneClasses.dragText\n                    )}\n                  >\n                    {labels?.drag}\n                    <StyledSelectedFilesText\n                      className={clsx(\n                        classes?.selectFilesText,\n                        dropZoneClasses.selectFilesText\n                      )}\n                    >{`\\xa0${labels?.selectFiles}`}</StyledSelectedFilesText>\n                  </StyledDragText>\n                </StyledDropAreaLabels>\n              </>\n            )}\n          </StyledDropArea>\n        </StyledDropZoneContainer>\n      </>\n    );\n  }\n);\n"],"names":["HvDropZone","withId","id","classes","labels","acceptedFiles","maxFileSize","inputProps","hideLabels","multiple","disabled","onFilesAdded","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","clsx","dropZoneLabelsGroup","dropZoneClasses","setId","dropzone","dropZoneLabel","Number","isInteger","sizeWarning","convertUnits","join","dropZoneContainer","dragAction","dropZoneContainerDisabled","event","stopPropagation","preventDefault","files","dataTransfer","isKeypress","keyboardCodes","Enter","current","click","inputArea","drag","selectFiles","value","dropArea","dropZoneAreaLabels","dragText","dropFiles","dropZoneAreaIcon","selectFilesText"],"mappings":"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"}

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

@@ -1,43 +1,30 @@
+import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
 import { Close } from "@hitachivantara/uikit-react-icons";
 import clsx from "clsx";
 import fileClasses from "./fileClasses.js";
 import { convertUnits } from "../utils.js";
 import { StyledProgressBarBack, StyledProgressBar, StyledNameText, StyledProgressTextContainer, StyledPreviewContainer, StyledIconButton, StyledEmptyIcon, StyledFail, StyledSuccess, StyledErrorMessage } from "./File.styles.js";
-import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
 import { setId } from "../../../utils/setId.js";
 import { HvTypography } from "../../Typography/Typography.js";
 const getStatusIcon = (classes, status) => {
   switch (status) {
     case "success":
-      return /* @__PURE__ */ jsx(StyledSuccess, {
-        className: clsx(classes == null ? void 0 : classes.icon, fileClasses.icon),
-        color: "sema1"
-      });
+      return /* @__PURE__ */ jsx(StyledSuccess, { className: clsx(classes == null ? void 0 : classes.icon, fileClasses.icon), color: "sema1" });
     case "fail":
-      return /* @__PURE__ */ jsx(StyledFail, {
-        className: clsx(classes == null ? void 0 : classes.icon, fileClasses.icon),
-        color: "sema4"
-      });
+      return /* @__PURE__ */ jsx(StyledFail, { className: clsx(classes == null ? void 0 : classes.icon, fileClasses.icon), color: "sema4" });
     default:
-      return /* @__PURE__ */ jsx(StyledEmptyIcon, {
-        className: clsx(classes == null ? void 0 : classes.icon, fileClasses.icon)
-      });
+      return /* @__PURE__ */ jsx(StyledEmptyIcon, { className: clsx(classes == null ? void 0 : classes.icon, fileClasses.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 ? `\xA0|\xA0` : null, inProgress && data.progress != null && /* @__PURE__ */ jsx(HvTypography, {
-      variant: "label",
-      children: `${convertUnits(data.progress)}\xA0/\xA0`
-    }), !hasFailed && data.size && /* @__PURE__ */ jsx(HvTypography, {
-      children: `${convertUnits(data.size)}`
-    }), hasFailed && data.errorMessage && /* @__PURE__ */ jsx(StyledErrorMessage, {
-      className: clsx(classes == null ? void 0 : classes.fail, fileClasses.fail),
-      children: data.errorMessage
-    })]
-  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    data.progress || data.size || data.errorMessage ? `\xA0|\xA0` : null,
+    inProgress && data.progress != null && /* @__PURE__ */ jsx(HvTypography, { variant: "label", children: `${convertUnits(data.progress)}\xA0/\xA0` }),
+    !hasFailed && data.size && /* @__PURE__ */ jsx(HvTypography, { children: `${convertUnits(data.size)}` }),
+    hasFailed && data.errorMessage && /* @__PURE__ */ jsx(StyledErrorMessage, { className: clsx(classes == null ? void 0 : classes.fail, fileClasses.fail), children: data.errorMessage })
+  ] });
 };
 const getProgressBarWith = ({
   size,
@@ -58,40 +45,17 @@ const HvFile = ({
   const progressText = getProgressText(data, classes);
   const statusIcon = getStatusIcon(classes, data.status);
   const currentProgress = getProgressBarWith(data);
-  return /* @__PURE__ */ jsxs("li", {
-    className: clsx(classes == null ? void 0 : classes.root, fileClasses.root),
-    children: [!hasError && inProgress && /* @__PURE__ */ jsx(StyledProgressBarBack, {
-      className: clsx(classes == null ? void 0 : classes.progressbarBack, fileClasses.progressbarBack)
-    }), !hasError && inProgress && /* @__PURE__ */ jsx(StyledProgressBar, {
-      className: clsx(classes == null ? void 0 : classes.progressbar, fileClasses.progressbar),
-      "aria-valuemin": 0,
-      "aria-valuemax": 100,
-      "aria-valuenow": currentProgress,
-      style: {
-        width: `${currentProgress}%`
-      }
-    }), statusIcon, /* @__PURE__ */ jsx(StyledNameText, {
-      className: clsx(classes == null ? void 0 : classes.nameText, fileClasses.nameText),
-      variant: "label",
-      children: data.name
-    }), /* @__PURE__ */ jsx(StyledProgressTextContainer, {
-      className: clsx(classes == null ? void 0 : classes.progressTextContainer, fileClasses.progressTextContainer),
-      children: progressText
-    }), data.preview && /* @__PURE__ */ jsx(StyledPreviewContainer, {
-      className: clsx(classes == null ? void 0 : classes.previewContainer, fileClasses.previewContainer),
-      children: data.preview
-    }), /* @__PURE__ */ jsx(StyledIconButton, {
-      id: setId(id, "remove-button"),
-      "aria-label": removeFileButtonLabel,
-      className: clsx(classes == null ? void 0 : classes.removeButton, fileClasses.removeButton),
-      onClick: () => onFileRemoved == null ? void 0 : onFileRemoved(data),
-      variant: "secondaryGhost",
-      icon: true,
-      children: /* @__PURE__ */ jsx(Close, {
-        iconSize: "XS"
-      })
-    })]
-  });
+  return /* @__PURE__ */ jsxs("li", { className: clsx(classes == null ? void 0 : classes.root, fileClasses.root), children: [
+    !hasError && inProgress && /* @__PURE__ */ jsx(StyledProgressBarBack, { className: clsx(classes == null ? void 0 : classes.progressbarBack, fileClasses.progressbarBack) }),
+    !hasError && inProgress && /* @__PURE__ */ jsx(StyledProgressBar, { className: clsx(classes == null ? void 0 : classes.progressbar, fileClasses.progressbar), "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": currentProgress, style: {
+      width: `${currentProgress}%`
+    } }),
+    statusIcon,
+    /* @__PURE__ */ jsx(StyledNameText, { className: clsx(classes == null ? void 0 : classes.nameText, fileClasses.nameText), variant: "label", children: data.name }),
+    /* @__PURE__ */ jsx(StyledProgressTextContainer, { className: clsx(classes == null ? void 0 : classes.progressTextContainer, fileClasses.progressTextContainer), children: progressText }),
+    data.preview && /* @__PURE__ */ jsx(StyledPreviewContainer, { className: clsx(classes == null ? void 0 : classes.previewContainer, fileClasses.previewContainer), children: data.preview }),
+    /* @__PURE__ */ jsx(StyledIconButton, { id: setId(id, "remove-button"), "aria-label": removeFileButtonLabel, className: clsx(classes == null ? void 0 : classes.removeButton, fileClasses.removeButton), onClick: () => onFileRemoved == null ? void 0 : onFileRemoved(data), variant: "secondaryGhost", 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 } from \"@hitachivantara/uikit-react-icons\";\nimport clsx from \"clsx\";\nimport { setId } from \"utils\";\nimport fileClasses, { HvFileClasses } from \"./fileClasses\";\nimport { HvTypography } from \"components\";\nimport { convertUnits } from \"../utils\";\nimport {\n  StyledFail,\n  StyledErrorMessage,\n  StyledSuccess,\n  StyledProgressBarBack,\n  StyledProgressBar,\n  StyledNameText,\n  StyledProgressTextContainer,\n  StyledPreviewContainer,\n  StyledIconButton,\n  StyledEmptyIcon,\n} from \"./File.styles\";\n\nexport type HvFileData = File & {\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 (\n        <StyledSuccess\n          className={clsx(classes?.icon, fileClasses.icon)}\n          color=\"sema1\"\n        />\n      );\n    case \"fail\":\n      return (\n        <StyledFail\n          className={clsx(classes?.icon, fileClasses.icon)}\n          color=\"sema4\"\n        />\n      );\n    default:\n      return (\n        <StyledEmptyIcon className={clsx(classes?.icon, fileClasses.icon)} />\n      );\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        <StyledErrorMessage className={clsx(classes?.fail, fileClasses.fail)}>\n          {data.errorMessage}\n        </StyledErrorMessage>\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,\n  data,\n  onFileRemoved,\n  removeFileButtonLabel,\n}: HvFileProps) => {\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={clsx(classes?.root, fileClasses.root)}>\n      {!hasError && inProgress && (\n        <StyledProgressBarBack\n          className={clsx(\n            classes?.progressbarBack,\n            fileClasses.progressbarBack\n          )}\n        />\n      )}\n\n      {!hasError && inProgress && (\n        <StyledProgressBar\n          className={clsx(classes?.progressbar, fileClasses.progressbar)}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuenow={currentProgress}\n          style={{ width: `${currentProgress}%` }}\n        />\n      )}\n\n      {statusIcon}\n\n      <StyledNameText\n        className={clsx(classes?.nameText, fileClasses.nameText)}\n        variant=\"label\"\n      >\n        {data.name}\n      </StyledNameText>\n\n      <StyledProgressTextContainer\n        className={clsx(\n          classes?.progressTextContainer,\n          fileClasses.progressTextContainer\n        )}\n      >\n        {progressText}\n      </StyledProgressTextContainer>\n\n      {data.preview && (\n        <StyledPreviewContainer\n          className={clsx(\n            classes?.previewContainer,\n            fileClasses.previewContainer\n          )}\n        >\n          {data.preview}\n        </StyledPreviewContainer>\n      )}\n\n      <StyledIconButton\n        id={setId(id, \"remove-button\")}\n        aria-label={removeFileButtonLabel}\n        className={clsx(classes?.removeButton, fileClasses.removeButton)}\n        onClick={() => onFileRemoved?.(data)}\n        variant=\"secondaryGhost\"\n        icon\n      >\n        <Close iconSize=\"XS\" />\n      </StyledIconButton>\n    </li>\n  );\n};\n"],"names":["getStatusIcon","classes","status","StyledSuccess","className","clsx","icon","fileClasses","color","StyledFail","StyledEmptyIcon","getProgressText","data","hasFailed","inProgress","_Fragment","children","progress","size","errorMessage","HvTypography","variant","convertUnits","StyledErrorMessage","fail","getProgressBarWith","width","Math","round","HvFile","id","onFileRemoved","removeFileButtonLabel","hasError","progressText","statusIcon","currentProgress","root","StyledProgressBarBack","progressbarBack","StyledProgressBar","progressbar","style","_jsx","StyledNameText","nameText","name","StyledProgressTextContainer","progressTextContainer","preview","StyledPreviewContainer","previewContainer","StyledIconButton","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 } from \"@hitachivantara/uikit-react-icons\";\nimport clsx from \"clsx\";\nimport { setId } from \"utils\";\nimport fileClasses, { HvFileClasses } from \"./fileClasses\";\nimport { HvTypography } from \"components\";\nimport { convertUnits } from \"../utils\";\nimport {\n  StyledFail,\n  StyledErrorMessage,\n  StyledSuccess,\n  StyledProgressBarBack,\n  StyledProgressBar,\n  StyledNameText,\n  StyledProgressTextContainer,\n  StyledPreviewContainer,\n  StyledIconButton,\n  StyledEmptyIcon,\n} from \"./File.styles\";\n\nexport type HvFileData = File & {\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 (\n        <StyledSuccess\n          className={clsx(classes?.icon, fileClasses.icon)}\n          color=\"sema1\"\n        />\n      );\n    case \"fail\":\n      return (\n        <StyledFail\n          className={clsx(classes?.icon, fileClasses.icon)}\n          color=\"sema4\"\n        />\n      );\n    default:\n      return (\n        <StyledEmptyIcon className={clsx(classes?.icon, fileClasses.icon)} />\n      );\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        <StyledErrorMessage className={clsx(classes?.fail, fileClasses.fail)}>\n          {data.errorMessage}\n        </StyledErrorMessage>\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,\n  data,\n  onFileRemoved,\n  removeFileButtonLabel,\n}: HvFileProps) => {\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={clsx(classes?.root, fileClasses.root)}>\n      {!hasError && inProgress && (\n        <StyledProgressBarBack\n          className={clsx(\n            classes?.progressbarBack,\n            fileClasses.progressbarBack\n          )}\n        />\n      )}\n\n      {!hasError && inProgress && (\n        <StyledProgressBar\n          className={clsx(classes?.progressbar, fileClasses.progressbar)}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuenow={currentProgress}\n          style={{ width: `${currentProgress}%` }}\n        />\n      )}\n\n      {statusIcon}\n\n      <StyledNameText\n        className={clsx(classes?.nameText, fileClasses.nameText)}\n        variant=\"label\"\n      >\n        {data.name}\n      </StyledNameText>\n\n      <StyledProgressTextContainer\n        className={clsx(\n          classes?.progressTextContainer,\n          fileClasses.progressTextContainer\n        )}\n      >\n        {progressText}\n      </StyledProgressTextContainer>\n\n      {data.preview && (\n        <StyledPreviewContainer\n          className={clsx(\n            classes?.previewContainer,\n            fileClasses.previewContainer\n          )}\n        >\n          {data.preview}\n        </StyledPreviewContainer>\n      )}\n\n      <StyledIconButton\n        id={setId(id, \"remove-button\")}\n        aria-label={removeFileButtonLabel}\n        className={clsx(classes?.removeButton, fileClasses.removeButton)}\n        onClick={() => onFileRemoved?.(data)}\n        variant=\"secondaryGhost\"\n        icon\n      >\n        <Close iconSize=\"XS\" />\n      </StyledIconButton>\n    </li>\n  );\n};\n"],"names":["getStatusIcon","classes","status","clsx","icon","fileClasses","getProgressText","data","hasFailed","inProgress","progress","size","errorMessage","convertUnits","fail","getProgressBarWith","width","Math","round","HvFile","id","onFileRemoved","removeFileButtonLabel","hasError","progressText","statusIcon","currentProgress","root","progressbarBack","progressbar","nameText","name","progressTextContainer","preview","previewContainer","setId","removeButton"],"mappings":";;;;;;;;AA6EA,MAAMA,gBAAgBA,CACpBC,SACAC,WACG;AACH,UAAQA,QAAM;AAAA,IACZ,KAAK;AAED,aAAA,oBAAC,eACC,EAAA,WAAWC,KAAKF,mCAASG,MAAMC,YAAYD,IAAI,GAC/C,OAAM,QACN,CAAA;AAAA,IAEN,KAAK;AAED,aAAA,oBAAC,YACC,EAAA,WAAWD,KAAKF,mCAASG,MAAMC,YAAYD,IAAI,GAC/C,OAAM,QACN,CAAA;AAAA,IAEN;AAEI,aAAA,oBAAC,mBAAgB,WAAWD,KAAKF,mCAASG,MAAMC,YAAYD,IAAI,EAAK,CAAA;AAAA,EACrE;AAER;AAEA,MAAME,kBAAkBA,CAACC,MAAkBN,YAA4B;AAC/DO,QAAAA,YAAYD,KAAKL,WAAW;AAC5BO,QAAAA,aAAaF,KAAKL,WAAW;AAEnC,SAEKK,qBAAAA,UAAAA,EAAAA,UAAAA;AAAAA,IAAAA,KAAKG,YAAYH,KAAKI,QAAQJ,KAAKK,eAAgB,cAAa;AAAA,IAEhEH,cAAcF,KAAKG,YAAY,QAC7B,oBAAA,cAAA,EAAa,SAAQ,SAClB,UAAEG,GAAAA,aAAaN,KAAKG,QAAQ,cAChC;AAAA,IAGD,CAACF,aAAaD,KAAKI,QAClB,oBAAC,gBAAe,UAAEE,GAAAA,aAAaN,KAAKI,IAAI,IAAI,CAAA;AAAA,IAG7CH,aAAaD,KAAKK,gBACjB,oBAAC,oBAAmB,EAAA,WAAWT,KAAKF,mCAASa,MAAMT,YAAYS,IAAI,GAChEP,eAAKK,cACR;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,EACAnB;AAAAA,EACAM;AAAAA,EACAc;AAAAA,EACAC;AACW,MAAM;AACXC,QAAAA,WAAWhB,KAAKL,WAAW;AAE3BO,QAAAA,aAAaF,KAAKL,WAAW;AAE7BsB,QAAAA,eAAelB,gBAAgBC,MAAMN,OAAO;AAElD,QAAMwB,aAAazB,cAAcC,SAASM,KAAKL,MAAM;AAE/CwB,QAAAA,kBAAkBX,mBAAmBR,IAAI;AAG7C,SAAA,qBAAC,QAAG,WAAWJ,KAAKF,mCAAS0B,MAAMtB,YAAYsB,IAAI,GAChD,UAAA;AAAA,IAACJ,CAAAA,YAAYd,cACZ,oBAAC,uBACC,EAAA,WAAWN,KACTF,mCAAS2B,iBACTvB,YAAYuB,eAAe,EAGhC,CAAA;AAAA,IAEA,CAACL,YAAYd,kCACX,mBACC,EAAA,WAAWN,KAAKF,mCAAS4B,aAAaxB,YAAYwB,WAAW,GAC7D,iBAAe,GACf,iBAAe,KACf,iBAAeH,iBACf,OAAO;AAAA,MAAEV,OAAQ,GAAEU;AAAAA,IAAAA,GAEtB;AAAA,IAEAD;AAAAA,IAEA,oBAAA,gBAAA,EACC,WAAWtB,KAAKF,mCAAS6B,UAAUzB,YAAYyB,QAAQ,GACvD,SAAQ,SAEPvB,UAAAA,KAAKwB,KACR,CAAA;AAAA,IAEA,oBAAC,+BACC,WAAW5B,KACTF,mCAAS+B,uBACT3B,YAAY2B,qBAAqB,GAGlCR,UACH,aAAA,CAAA;AAAA,IAECjB,KAAK0B,WACH,oBAAA,wBAAA,EACC,WAAW9B,KACTF,mCAASiC,kBACT7B,YAAY6B,gBAAgB,GAG7B3B,UAAAA,KAAK0B,QACR,CAAA;AAAA,IAGD,oBAAA,kBAAA,EACC,IAAIE,MAAMf,IAAI,eAAe,GAC7B,cAAYE,uBACZ,WAAWnB,KAAKF,mCAASmC,cAAc/B,YAAY+B,YAAY,GAC/D,SAAS,MAAMf,+CAAgBd,OAC/B,SAAQ,kBACR,MAAI,MAEJ,UAAA,oBAAC,OAAM,EAAA,UAAS,MAAI,EACtB,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}

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

@@ -1,7 +1,7 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import fileListClasses from "./fileListClasses.js";
 import { StyledList } from "./FileList.styles.js";
 import clsx from "clsx";
-import { jsx } from "@emotion/react/jsx-runtime";
 import useUniqueId from "../../../hooks/useUniqueId.js";
 import { HvFile } from "../File/File.js";
 import { setId } from "../../../utils/setId.js";
@@ -16,19 +16,9 @@ const HvFileList = ({
   const hasFiles = list.length > 0;
   if (!hasFiles)
     return null;
-  return /* @__PURE__ */ jsx(StyledList, {
-    id: setId(id, "list"),
-    className: clsx(classes == null ? void 0 : classes.list, fileListClasses.list),
-    children: list.map((data) => /* @__PURE__ */ jsx(HvFile, {
-      classes: {
-        root: clsx(classes == null ? void 0 : classes.listItem, fileListClasses.listItem)
-      },
-      id: setId(elementId, "values"),
-      data,
-      onFileRemoved,
-      removeFileButtonLabel
-    }, data.id))
-  });
+  return /* @__PURE__ */ jsx(StyledList, { id: setId(id, "list"), className: clsx(classes == null ? void 0 : classes.list, fileListClasses.list), children: list.map((data) => /* @__PURE__ */ jsx(HvFile, { classes: {
+    root: clsx(classes == null ? void 0 : classes.listItem, fileListClasses.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 { HvFile, HvFileData, HvFileRemovedEvent } from \"../File\";\nimport fileListClasses, { HvFileListClasses } from \"./fileListClasses\";\nimport { useUniqueId } from \"hooks\";\nimport { setId } from \"utils\";\nimport { StyledList } from \"./FileList.styles\";\nimport clsx from \"clsx\";\n\nexport type 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,\n  list = [],\n  removeFileButtonLabel,\n  onFileRemoved,\n}: HvFileListProps) => {\n  const elementId = useUniqueId(id, \"hvfilelist\");\n\n  const hasFiles = list.length > 0;\n  if (!hasFiles) return null;\n\n  return (\n    <StyledList\n      id={setId(id, \"list\")}\n      className={clsx(classes?.list, fileListClasses.list)}\n    >\n      {list.map((data) => (\n        <HvFile\n          key={data.id}\n          classes={{ root: clsx(classes?.listItem, fileListClasses.listItem) }}\n          id={setId(elementId, \"values\")}\n          data={data}\n          onFileRemoved={onFileRemoved}\n          removeFileButtonLabel={removeFileButtonLabel}\n        />\n      ))}\n    </StyledList>\n  );\n};\n"],"names":["HvFileList","id","classes","list","removeFileButtonLabel","onFileRemoved","elementId","useUniqueId","hasFiles","length","StyledList","setId","className","clsx","fileListClasses","children","map","data","HvFile","root","listItem"],"mappings":";;;;;;;AA8BO,MAAMA,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC,OAAO,CAAE;AAAA,EACTC;AAAAA,EACAC;AACe,MAAM;AACfC,QAAAA,YAAYC,YAAYN,IAAI,YAAY;AAExCO,QAAAA,WAAWL,KAAKM,SAAS;AAC/B,MAAI,CAACD;AAAiB,WAAA;AAEtB,6BACGE,YAAU;AAAA,IACTT,IAAIU,MAAMV,IAAI,MAAM;AAAA,IACpBW,WAAWC,KAAKX,mCAASC,MAAMW,gBAAgBX,IAAI;AAAA,IAAEY,UAEpDZ,KAAKa,IAAKC,CAAAA,6BACRC,QAAM;AAAA,MAELhB,SAAS;AAAA,QAAEiB,MAAMN,KAAKX,mCAASkB,UAAUN,gBAAgBM,QAAQ;AAAA,MAAE;AAAA,MACnEnB,IAAIU,MAAML,WAAW,QAAQ;AAAA,MAC7BW;AAAAA,MACAZ;AAAAA,MACAD;AAAAA,IAAAA,GALKa,KAAKhB,EAAE,CAOf;AAAA,EAAA,CACU;AAEjB;"}
+{"version":3,"file":"FileList.js","sources":["../../../../../src/components/FileUploader/FileList/FileList.tsx"],"sourcesContent":["import { HvFile, HvFileData, HvFileRemovedEvent } from \"../File\";\nimport fileListClasses, { HvFileListClasses } from \"./fileListClasses\";\nimport { useUniqueId } from \"hooks\";\nimport { setId } from \"utils\";\nimport { StyledList } from \"./FileList.styles\";\nimport clsx from \"clsx\";\n\nexport type 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,\n  list = [],\n  removeFileButtonLabel,\n  onFileRemoved,\n}: HvFileListProps) => {\n  const elementId = useUniqueId(id, \"hvfilelist\");\n\n  const hasFiles = list.length > 0;\n  if (!hasFiles) return null;\n\n  return (\n    <StyledList\n      id={setId(id, \"list\")}\n      className={clsx(classes?.list, fileListClasses.list)}\n    >\n      {list.map((data) => (\n        <HvFile\n          key={data.id}\n          classes={{ root: clsx(classes?.listItem, fileListClasses.listItem) }}\n          id={setId(elementId, \"values\")}\n          data={data}\n          onFileRemoved={onFileRemoved}\n          removeFileButtonLabel={removeFileButtonLabel}\n        />\n      ))}\n    </StyledList>\n  );\n};\n"],"names":["HvFileList","id","classes","list","removeFileButtonLabel","onFileRemoved","elementId","useUniqueId","hasFiles","length","setId","clsx","fileListClasses","map","data","root","listItem"],"mappings":";;;;;;;AA8BO,MAAMA,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC,OAAO,CAAE;AAAA,EACTC;AAAAA,EACAC;AACe,MAAM;AACfC,QAAAA,YAAYC,YAAYN,IAAI,YAAY;AAExCO,QAAAA,WAAWL,KAAKM,SAAS;AAC/B,MAAI,CAACD;AAAiB,WAAA;AAEtB,6BACG,YACC,EAAA,IAAIE,MAAMT,IAAI,MAAM,GACpB,WAAWU,KAAKT,mCAASC,MAAMS,gBAAgBT,IAAI,GAElDA,UAAAA,KAAKU,IAAKC,CACT,SAAA,oBAAC,UAEC,SAAS;AAAA,IAAEC,MAAMJ,KAAKT,mCAASc,UAAUJ,gBAAgBI,QAAQ;AAAA,EACjE,GAAA,IAAIN,MAAMJ,WAAW,QAAQ,GAC7B,MACA,eACA,sBALKQ,GAAAA,KAAKb,GAOb,EACH,CAAA;AAEJ;"}