@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/FileUploader/File/File.js

@@ -1,82 +1,92 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvTypography } from "../../Typography/Typography.js";
 import { HvIcon } from "../../icons.js";
+import { HvIconButton } from "../../IconButton/IconButton.js";
+import { HvProgressBar } from "../../ProgressBar/ProgressBar.js";
 import { convertUnits } from "../utils.js";
 import { useClasses } from "./File.styles.js";
-import { staticClasses } from "./File.styles.js";
-import { HvProgressBar } from "../../ProgressBar/ProgressBar.js";
-import { HvTypography } from "../../Typography/Typography.js";
-import { HvIconButton } from "../../IconButton/IconButton.js";
-const getStatusIcon = (classes, status) => {
-  switch (status) {
-    case "success":
-      return /* @__PURE__ */ jsx(HvIcon, { name: "Success", className: classes?.icon, color: "positive" });
-    case "fail":
-      return /* @__PURE__ */ jsx(HvIcon, { name: "Fail", className: classes?.icon, color: "negative" });
-    default:
-      return /* @__PURE__ */ jsx("div", { className: 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?.fail, children: data.errorMessage })
-  ] });
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/FileUploader/File/File.tsx
+var getStatusIcon = (classes, status) => {
+	switch (status) {
+		case "success": return /* @__PURE__ */ jsx(HvIcon, {
+			name: "Success",
+			className: classes?.icon,
+			color: "positive"
+		});
+		case "fail": return /* @__PURE__ */ jsx(HvIcon, {
+			name: "Fail",
+			className: classes?.icon,
+			color: "negative"
+		});
+		default: return /* @__PURE__ */ jsx("div", { className: classes?.icon });
+	}
 };
-const getProgressBarWith = ({ size, progress }) => {
-  const width = progress != null && size != null ? Math.round(progress * 100 / size) : 0;
-  return width;
+var 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(HvTypography, {
+			className: classes?.fail,
+			children: data.errorMessage
+		})
+	] });
 };
-const HvFile = (props) => {
-  const {
-    classes: classesProp,
-    data,
-    onFileRemoved,
-    removeFileButtonLabel
-  } = useDefaultProps("HvFile", props);
-  const { classes, cx } = useClasses(classesProp);
-  const hasError = data.status === "fail";
-  const inProgress = data.status === "progress";
-  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__ */ jsxs("div", { className: classes.nameText, children: [
-      /* @__PURE__ */ jsx(HvTypography, { noWrap: true, 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(
-      HvIconButton,
-      {
-        title: removeFileButtonLabel,
-        className: classes.removeButton,
-        onClick: () => onFileRemoved?.(data),
-        children: /* @__PURE__ */ jsx(HvIcon, { name: "Close", size: "xs" })
-      }
-    )
-  ] });
+var getProgressBarWith = ({ size, progress }) => {
+	return progress != null && size != null ? Math.round(progress * 100 / size) : 0;
 };
-export {
-  HvFile,
-  staticClasses as fileClasses
+var HvFile = (props) => {
+	const { classes: classesProp, data, onFileRemoved, removeFileButtonLabel } = useDefaultProps("HvFile", props);
+	const { classes, cx } = useClasses(classesProp);
+	const hasError = data.status === "fail";
+	const inProgress = data.status === "progress";
+	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__ */ jsxs("div", {
+				className: classes.nameText,
+				children: [/* @__PURE__ */ jsx(HvTypography, {
+					noWrap: true,
+					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(HvIconButton, {
+				title: removeFileButtonLabel,
+				className: classes.removeButton,
+				onClick: () => onFileRemoved?.(data),
+				children: /* @__PURE__ */ jsx(HvIcon, {
+					name: "Close",
+					size: "xs"
+				})
+			})
+		]
+	});
 };
+//#endregion
+export { HvFile };

package/dist/FileUploader/File/File.styles.js

@@ -1,62 +1,57 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvFile", {
-  root: {
-    position: "relative",
-    display: "flex",
-    gap: theme.space.xs,
-    alignItems: "center",
-    backgroundColor: theme.colors.bgContainer,
-    padding: theme.space.xs,
-    border: `1px solid ${theme.colors.border}`,
-    borderRadius: `0px 0px ${theme.radii.round} ${theme.radii.round}`
-  },
-  progressbar: {
-    position: "absolute",
-    top: "-1px"
-  },
-  progressbarContainer: {
-    height: "4px"
-  },
-  progressbarBack: {},
-  nameText: {
-    display: "flex",
-    alignItems: "center",
-    flex: 1
-  },
-  progressTextContainer: {
-    display: "flex",
-    flexGrow: 1,
-    alignItems: "center"
-  },
-  removeButton: {},
-  previewContainer: {
-    display: "flex",
-    width: "48px",
-    height: "48px",
-    justifyContent: "center",
-    alignItems: "center",
-    "& span": {
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      width: "100%",
-      height: "100%"
-    },
-    "& img": {
-      width: "40px",
-      height: "40px",
-      objectFit: "cover",
-      objectPosition: "center",
-      alignSelf: "center"
-    }
-  },
-  icon: {
-    margin: theme.space.xs
-  },
-  fail: {}
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/FileUploader/File/File.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvFile", {
+	root: {
+		position: "relative",
+		display: "flex",
+		gap: theme.space.xs,
+		alignItems: "center",
+		backgroundColor: theme.colors.bgContainer,
+		padding: theme.space.xs,
+		border: `1px solid ${theme.colors.border}`,
+		borderRadius: `0px 0px ${theme.radii.round} ${theme.radii.round}`
+	},
+	progressbar: {
+		position: "absolute",
+		top: "-1px"
+	},
+	progressbarContainer: { height: "4px" },
+	progressbarBack: {},
+	nameText: {
+		display: "flex",
+		alignItems: "center",
+		flex: 1
+	},
+	progressTextContainer: {
+		display: "flex",
+		flexGrow: 1,
+		alignItems: "center"
+	},
+	removeButton: {},
+	previewContainer: {
+		display: "flex",
+		width: "48px",
+		height: "48px",
+		justifyContent: "center",
+		alignItems: "center",
+		"& span": {
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+			width: "100%",
+			height: "100%"
+		},
+		"& img": {
+			width: "40px",
+			height: "40px",
+			objectFit: "cover",
+			objectPosition: "center",
+			alignSelf: "center"
+		}
+	},
+	icon: { margin: theme.space.xs },
+	fail: {}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/FileUploader/FileList/FileList.js

@@ -1,30 +1,21 @@
-import { jsx } from "react/jsx-runtime";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useClasses } from "./FileList.styles.js";
-import { staticClasses } from "./FileList.styles.js";
 import { HvFile } from "../File/File.js";
-const HvFileList = (props) => {
-  const {
-    classes: classesProp,
-    list = [],
-    removeFileButtonLabel,
-    onFileRemoved
-  } = useDefaultProps("HvFileList", props);
-  const { classes } = useClasses(classesProp);
-  const hasFiles = list.length > 0;
-  if (!hasFiles) return null;
-  return /* @__PURE__ */ jsx("ul", { className: classes.root, children: list.map((data) => /* @__PURE__ */ jsx(
-    HvFile,
-    {
-      classes: { root: classes?.listItem },
-      data,
-      onFileRemoved,
-      removeFileButtonLabel
-    },
-    data.id
-  )) });
-};
-export {
-  HvFileList,
-  staticClasses as fileListClasses
+import { useClasses } from "./FileList.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { jsx } from "react/jsx-runtime";
+//#region src/FileUploader/FileList/FileList.tsx
+var HvFileList = (props) => {
+	const { classes: classesProp, list = [], removeFileButtonLabel, onFileRemoved } = useDefaultProps("HvFileList", props);
+	const { classes } = useClasses(classesProp);
+	if (!(list.length > 0)) return null;
+	return /* @__PURE__ */ jsx("ul", {
+		className: classes.root,
+		children: list.map((data) => /* @__PURE__ */ jsx(HvFile, {
+			classes: { root: classes?.listItem },
+			data,
+			onFileRemoved,
+			removeFileButtonLabel
+		}, data.id))
+	});
 };
+//#endregion
+export { HvFileList };

package/dist/FileUploader/FileList/FileList.styles.js

@@ -1,18 +1,17 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvFileList", {
-  root: {
-    display: "flex",
-    flexDirection: "column",
-    gap: theme.space.xs,
-    margin: 0,
-    padding: 0,
-    marginTop: theme.space.sm,
-    listStyle: "none"
-  },
-  listItem: {}
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/FileUploader/FileList/FileList.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvFileList", {
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: theme.space.xs,
+		margin: 0,
+		padding: 0,
+		marginTop: theme.space.sm,
+		listStyle: "none"
+	},
+	listItem: {}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { useClasses };

package/dist/FileUploader/FileUploader.js

@@ -1,59 +1,39 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useLabels } from "../hooks/useLabels.js";
-import { useClasses } from "./FileUploader.styles.js";
-import { staticClasses } from "./FileUploader.styles.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
+import { useLabels } from "../hooks/useLabels.js";
 import { HvDropZone } from "./DropZone/DropZone.js";
 import { HvFileList } from "./FileList/FileList.js";
-const DEFAULT_LABELS = {
-  removeFileButtonLabel: "Remove File"
-};
-const HvFileUploader = (props) => {
-  const {
-    id,
-    className,
-    classes: classesProp,
-    labels: labelsProp,
-    fileList,
-    multiple = true,
-    label,
-    hideLabels,
-    maxFileSize = Infinity,
-    inputProps = {},
-    accept,
-    // TODO: consider adding/replacing with onFilesChange
-    onFilesAdded,
-    onFileRemoved,
-    ...others
-  } = useDefaultProps("HvFileUploader", props);
-  const { classes, cx } = useClasses(classesProp);
-  const labels = useLabels(DEFAULT_LABELS, labelsProp);
-  return /* @__PURE__ */ jsxs(HvFormElement, { id, className: cx(classes.root, className), ...others, children: [
-    /* @__PURE__ */ jsx(
-      HvDropZone,
-      {
-        label,
-        labels,
-        multiple,
-        accept,
-        maxFileSize,
-        onFilesAdded,
-        inputProps,
-        hideLabels
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      HvFileList,
-      {
-        list: fileList,
-        onFileRemoved,
-        removeFileButtonLabel: labels?.removeFileButtonLabel
-      }
-    )
-  ] });
-};
-export {
-  HvFileUploader,
-  staticClasses as fileUploaderClasses
+import { useClasses } from "./FileUploader.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/FileUploader/FileUploader.tsx
+var DEFAULT_LABELS = { removeFileButtonLabel: "Remove File" };
+/**
+* Lets the user choose one or more files from their device storage. Once chosen,
+* the files can be uploaded to a server or manipulated on the client side.
+*/
+var HvFileUploader = (props) => {
+	const { id, className, classes: classesProp, labels: labelsProp, fileList, multiple = true, label, hideLabels, maxFileSize = Infinity, inputProps = {}, accept, onFilesAdded, onFileRemoved, ...others } = useDefaultProps("HvFileUploader", props);
+	const { classes, cx } = useClasses(classesProp);
+	const labels = useLabels(DEFAULT_LABELS, labelsProp);
+	return /* @__PURE__ */ jsxs(HvFormElement, {
+		id,
+		className: cx(classes.root, className),
+		...others,
+		children: [/* @__PURE__ */ jsx(HvDropZone, {
+			label,
+			labels,
+			multiple,
+			accept,
+			maxFileSize,
+			onFilesAdded,
+			inputProps,
+			hideLabels
+		}), /* @__PURE__ */ jsx(HvFileList, {
+			list: fileList,
+			onFileRemoved,
+			removeFileButtonLabel: labels?.removeFileButtonLabel
+		})]
+	});
 };
+//#endregion
+export { HvFileUploader };

package/dist/FileUploader/FileUploader.styles.js

@@ -1,8 +1,5 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-const { staticClasses, useClasses } = createClasses("HvFileUploader", {
-  root: {}
-});
-export {
-  staticClasses,
-  useClasses
-};
+//#region src/FileUploader/FileUploader.styles.ts
+var { staticClasses, useClasses } = createClasses("HvFileUploader", { root: {} });
+//#endregion
+export { staticClasses, useClasses };

package/dist/FileUploader/Preview/Preview.js

@@ -1,55 +1,40 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useEffect } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvButton } from "../../Button/Button.js";
 import { EyeIcon } from "../../Input/icons.js";
 import { useClasses } from "./Preview.styles.js";
-import { staticClasses } from "./Preview.styles.js";
-import { HvButton } from "../../Button/Button.js";
-const HvFileUploaderPreview = (props) => {
-  const {
-    className,
-    children,
-    classes: classesProp,
-    disableOverlay = false,
-    onUnload,
-    onClick,
-    ...others
-  } = useDefaultProps("HvFileUploaderPreview", props);
-  const { classes, cx, css } = useClasses(classesProp);
-  useEffect(() => {
-    return () => {
-      onUnload?.();
-    };
-  }, [onUnload]);
-  if (onClick) {
-    return /* @__PURE__ */ jsxs(
-      HvButton,
-      {
-        icon: true,
-        className: cx(classes.previewButton, className),
-        onClick,
-        ...others,
-        children: [
-          children,
-          !disableOverlay && /* @__PURE__ */ jsx("div", { className: classes.overlay, "aria-hidden": "true", children: /* @__PURE__ */ jsx(
-            EyeIcon,
-            {
-              className: css({
-                position: "absolute",
-                left: "50%",
-                top: "50%",
-                transform: "translate(-50%, -50%)",
-                display: "none"
-              })
-            }
-          ) })
-        ]
-      }
-    );
-  }
-  return children;
-};
-export {
-  HvFileUploaderPreview,
-  staticClasses as fileUploaderPreviewClasses
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/FileUploader/Preview/Preview.tsx
+/**
+* The `HvFileUploaderPreview` component is available to facilitate the styling
+* of the button (when clickable) and the detection of image unloading.
+*/
+var HvFileUploaderPreview = (props) => {
+	const { className, children, classes: classesProp, disableOverlay = false, onUnload, onClick, ...others } = useDefaultProps("HvFileUploaderPreview", props);
+	const { classes, cx, css } = useClasses(classesProp);
+	useEffect(() => {
+		return () => {
+			onUnload?.();
+		};
+	}, [onUnload]);
+	if (onClick) return /* @__PURE__ */ jsxs(HvButton, {
+		icon: true,
+		className: cx(classes.previewButton, className),
+		onClick,
+		...others,
+		children: [children, !disableOverlay && /* @__PURE__ */ jsx("div", {
+			className: classes.overlay,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(EyeIcon, { className: css({
+				position: "absolute",
+				left: "50%",
+				top: "50%",
+				transform: "translate(-50%, -50%)",
+				display: "none"
+			}) })
+		})]
+	});
+	return children;
 };
+//#endregion
+export { HvFileUploaderPreview };

package/dist/FileUploader/Preview/Preview.styles.js

@@ -1,29 +1,23 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses(
-  "HvFileUploaderPreview",
-  {
-    previewButton: {
-      position: "relative",
-      width: "48px",
-      height: "48px",
-      "&:hover *": {
-        display: "flex"
-      }
-    },
-    overlay: {
-      position: "absolute",
-      inset: 0,
-      display: "none",
-      justifyContent: "center",
-      alignItems: "center",
-      backgroundColor: theme.colors.primaryDimmed,
-      opacity: "1",
-      borderRadius: theme.radii.base
-    }
-  }
-);
-export {
-  staticClasses,
-  useClasses
-};
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/FileUploader/Preview/Preview.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvFileUploaderPreview", {
+	previewButton: {
+		position: "relative",
+		width: "48px",
+		height: "48px",
+		"&:hover *": { display: "flex" }
+	},
+	overlay: {
+		position: "absolute",
+		inset: 0,
+		display: "none",
+		justifyContent: "center",
+		alignItems: "center",
+		backgroundColor: theme.colors.primaryDimmed,
+		opacity: "1",
+		borderRadius: theme.radii.base
+	}
+});
+//#endregion
+export { staticClasses, useClasses };