@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/EmptyState/EmptyState.js

@@ -1,64 +1,51 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { HvTypography } from "../Typography/Typography.js";
+import { useClasses } from "./EmptyState.styles.js";
+import { theme } from "@hitachivantara/uikit-styles";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { forwardRef } from "react";
-import { useTheme } from "@mui/material/styles";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme as useTheme$1 } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
-import { useClasses } from "./EmptyState.styles.js";
-import { staticClasses } from "./EmptyState.styles.js";
-import { HvTypography } from "../Typography/Typography.js";
-const HvEmptyState = forwardRef(function HvEmptyState2(props, ref) {
-  const {
-    action,
-    icon,
-    title,
-    message,
-    classes: classesProp,
-    className,
-    ...others
-  } = useDefaultProps("HvEmptyState", props);
-  const { classes, cx, css } = useClasses(classesProp);
-  const muiTheme = useTheme();
-  const onlyXs = useMediaQuery(muiTheme.breakpoints.only("xs"));
-  const upSm = useMediaQuery(muiTheme.breakpoints.up("sm"));
-  const messageOnly = !!(message && !(title || action));
-  const renderNode = (variant, node, style) => node && /* @__PURE__ */ jsx(HvTypography, { component: "div", variant, className: style, children: node });
-  return /* @__PURE__ */ jsx("div", { ref, className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cx(
-        classes.container,
-        onlyXs && css({
-          flexDirection: "column",
-          alignItems: "center",
-          textAlign: "center"
-        }),
-        {
-          [classes.containerMessageOnly]: messageOnly
-        },
-        onlyXs && messageOnly && css({ flexDirection: "row" })
-      ),
-      children: [
-        /* @__PURE__ */ jsx("div", { className: classes.iconContainer, children: icon }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cx(
-              classes.textContainer,
-              upSm && css({ marginLeft: theme.space.xs })
-            ),
-            children: [
-              renderNode("title4", title, classes.titleContainer),
-              renderNode("body", message, classes.messageContainer),
-              renderNode("body", action, classes.actionContainer)
-            ]
-          }
-        )
-      ]
-    }
-  ) });
+//#region src/EmptyState/EmptyState.tsx
+/**
+* Empty states communicate that there’s no information, data or values to display in a given context.
+*/
+var HvEmptyState = forwardRef(function HvEmptyState(props, ref) {
+	const { action, icon, title, message, classes: classesProp, className, ...others } = useDefaultProps("HvEmptyState", props);
+	const { classes, cx, css } = useClasses(classesProp);
+	const muiTheme = useTheme$1();
+	const onlyXs = useMediaQuery(muiTheme.breakpoints.only("xs"));
+	const upSm = useMediaQuery(muiTheme.breakpoints.up("sm"));
+	const messageOnly = !!(message && !(title || action));
+	const renderNode = (variant, node, style) => node && /* @__PURE__ */ jsx(HvTypography, {
+		component: "div",
+		variant,
+		className: style,
+		children: node
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx(classes.root, className),
+		...others,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cx(classes.container, onlyXs && css({
+				flexDirection: "column",
+				alignItems: "center",
+				textAlign: "center"
+			}), { [classes.containerMessageOnly]: messageOnly }, onlyXs && messageOnly && css({ flexDirection: "row" })),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: classes.iconContainer,
+				children: icon
+			}), /* @__PURE__ */ jsxs("div", {
+				className: cx(classes.textContainer, upSm && css({ marginLeft: theme.space.xs })),
+				children: [
+					renderNode("title4", title, classes.titleContainer),
+					renderNode("body", message, classes.messageContainer),
+					renderNode("body", action, classes.actionContainer)
+				]
+			})]
+		})
+	});
 });
-export {
-  HvEmptyState,
-  staticClasses as emptyStateClasses
-};
+//#endregion
+export { HvEmptyState };

package/dist/EmptyState/EmptyState.styles.js

@@ -1,33 +1,33 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvEmptyState", {
-  root: {
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    justifyContent: "center"
-  },
-  container: { display: "flex", flexDirection: "row" },
-  containerMessageOnly: {
-    alignItems: "center",
-    "& $textContainer": {
-      marginLeft: 0
-    }
-  },
-  iconContainer: {},
-  titleContainer: {
-    marginTop: theme.space.xxs,
-    marginBottom: theme.space.sm
-  },
-  textContainer: {
-    background: "transparent",
-    maxWidth: "510px",
-    overflow: "hidden"
-  },
-  messageContainer: {},
-  actionContainer: { marginTop: theme.space.sm }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/EmptyState/EmptyState.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvEmptyState", {
+	root: {
+		width: "100%",
+		height: "100%",
+		display: "flex",
+		justifyContent: "center"
+	},
+	container: {
+		display: "flex",
+		flexDirection: "row"
+	},
+	containerMessageOnly: {
+		alignItems: "center",
+		"& $textContainer": { marginLeft: 0 }
+	},
+	iconContainer: {},
+	titleContainer: {
+		marginTop: theme.space.xxs,
+		marginBottom: theme.space.sm
+	},
+	textContainer: {
+		background: "transparent",
+		maxWidth: "510px",
+		overflow: "hidden"
+	},
+	messageContainer: {},
+	actionContainer: { marginTop: theme.space.sm }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/FileUploader/DropZone/DropZone.js

@@ -1,188 +1,150 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useContext, useState, useRef } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { HvLabelContainer } from "../../FormElement/LabelContainer.js";
-import { useLabels } from "../../hooks/useLabels.js";
+import { setId } from "../../utils/setId.js";
+import { HvFormElementContext } from "../../FormElement/context.js";
 import { useUniqueId } from "../../hooks/useUniqueId.js";
 import { HvIcon } from "../../icons.js";
+import { HvLabelContainer } from "../../FormElement/LabelContainer.js";
+import { useLabels } from "../../hooks/useLabels.js";
 import { uniqueId } from "../../utils/helpers.js";
-import { setId } from "../../utils/setId.js";
 import { convertUnits } from "../utils.js";
 import { useClasses } from "./DropZone.styles.js";
-import { staticClasses } from "./DropZone.styles.js";
-import { HvFormElementContext } from "../../FormElement/context.js";
-const DEFAULT_LABELS = {
-  /** Extensions of the accepted file types */
-  acceptedFiles: "",
-  /** Size file warning label. */
-  sizeWarning: "Max. file size:",
-  /** Size file warning label. */
-  drag: "Drop files here or",
-  /** Size file warning label. */
-  selectFiles: "click to upload",
-  /** Theming sheet used to style components */
-  dropFiles: "Drop files here",
-  /** Message to display when file size is greater than allowed */
-  fileSizeError: "The file exceeds the maximum upload size",
-  /** Message to display when file type is greater than allowed */
-  fileTypeError: "File type not allowed for upload",
-  removeFileButtonLabel: "Remove File"
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useContext, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/FileUploader/DropZone/DropZone.tsx
+var DEFAULT_LABELS = {
+	/** Extensions of the accepted file types */
+	acceptedFiles: "",
+	/** Size file warning label. */
+	sizeWarning: "Max. file size:",
+	/** Size file warning label. */
+	drag: "Drop files here or",
+	/** Size file warning label. */
+	selectFiles: "click to upload",
+	/** Theming sheet used to style components */
+	dropFiles: "Drop files here",
+	/** Message to display when file size is greater than allowed */
+	fileSizeError: "The file exceeds the maximum upload size",
+	/** Message to display when file type is greater than allowed */
+	fileTypeError: "File type not allowed for upload",
+	removeFileButtonLabel: "Remove File"
 };
 function validateAccept(file, acceptAttr) {
-  if (!file || !acceptAttr) return true;
-  const acceptEntries = acceptAttr.split(",");
-  const fileName = file.name || "";
-  const mimeType = (file.type || "").toLowerCase();
-  const baseMimeType = mimeType.replace(/\/.*$/, "");
-  return acceptEntries.some((type) => {
-    const validType = type.trim().toLowerCase();
-    if (validType.charAt(0) === ".") {
-      return fileName.toLowerCase().endsWith(validType);
-    }
-    if (validType.endsWith("/*")) {
-      return baseMimeType === validType.replace(/\/.*$/, "");
-    }
-    return mimeType === validType;
-  });
+	if (!file || !acceptAttr) return true;
+	const acceptEntries = acceptAttr.split(",");
+	const fileName = file.name || "";
+	const mimeType = (file.type || "").toLowerCase();
+	const baseMimeType = mimeType.replace(/\/.*$/, "");
+	return acceptEntries.some((type) => {
+		const validType = type.trim().toLowerCase();
+		if (validType.charAt(0) === ".") return fileName.toLowerCase().endsWith(validType);
+		if (validType.endsWith("/*")) return baseMimeType === validType.replace(/\/.*$/, "");
+		return mimeType === validType;
+	});
 }
-const HvDropZone = (props) => {
-  const {
-    id: idProp,
-    classes: classesProp,
-    label = "Label",
-    labels: labelsProp,
-    accept,
-    maxFileSize,
-    inputProps,
-    hideLabels,
-    multiple = true,
-    onFilesAdded
-  } = useDefaultProps("HvDropZone", props);
-  const id = useUniqueId(idProp);
-  const labels = useLabels(DEFAULT_LABELS, labelsProp);
-  const { classes, cx } = useClasses(classesProp);
-  const { disabled } = useContext(HvFormElementContext);
-  const [dragState, setDragState] = useState(false);
-  const inputRef = useRef(null);
-  const handleDragLeave = () => {
-    setDragState(false);
-  };
-  const handleDragEnter = (event) => {
-    if (disabled) return;
-    event.stopPropagation();
-    event.preventDefault();
-    setDragState(true);
-  };
-  const onChangeHandler = (filesList) => {
-    const filesToProcess = Object.values(filesList);
-    const newFiles = filesToProcess.map((file) => {
-      const newFile = new File([file], file.name, {
-        type: file.type,
-        lastModified: file.lastModified
-      });
-      newFile.id = uniqueId("uploaded-file-data-");
-      const isSizeAllowed = file.size <= maxFileSize;
-      const isFileAccepted = !accept || validateAccept(file, accept);
-      if (!isFileAccepted) {
-        newFile.errorMessage = labels?.fileTypeError;
-        newFile.status = "fail";
-      } else if (!isSizeAllowed) {
-        newFile.errorMessage = labels?.fileSizeError;
-        newFile.status = "fail";
-      }
-      return newFile;
-    });
-    onFilesAdded?.(newFiles);
-  };
-  const description = /* @__PURE__ */ jsxs(Fragment, { children: [
-    Number.isInteger(maxFileSize) && `${labels.sizeWarning} ${convertUnits(maxFileSize)}`,
-    labels.acceptedFiles || accept && ` (${accept?.replaceAll(",", ", ")})`
-  ] });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !hideLabels && /* @__PURE__ */ jsx(
-      HvLabelContainer,
-      {
-        id,
-        label,
-        description,
-        inputId: setId(id, "input-file"),
-        classes: {
-          root: classes.dropZoneLabelsGroup,
-          label: classes.dropZoneLabel
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cx(classes.dropZoneContainer, {
-          [classes.dragAction]: dragState,
-          [classes.dropZoneContainerDisabled]: disabled
-        }),
-        children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              id: setId(id, "input-file"),
-              className: classes.inputArea,
-              type: "file",
-              multiple,
-              disabled,
-              title: !disabled ? `${labels?.drag} ${labels?.selectFiles}` : "",
-              onClick: () => {
-                if (inputRef.current) {
-                  inputRef.current.value = "";
-                }
-              },
-              onChange: () => {
-                if (!disabled && inputRef.current?.files) {
-                  onChangeHandler(inputRef.current.files);
-                }
-              },
-              onDragEnter: handleDragEnter,
-              onDragOver: handleDragEnter,
-              onDragLeave: handleDragLeave,
-              onDropCapture: handleDragLeave,
-              onDrop: (event) => {
-                if (disabled) return;
-                const { files } = event.dataTransfer;
-                if (multiple === true || files.length === 1) {
-                  event.stopPropagation();
-                  event.preventDefault();
-                  onChangeHandler(files);
-                }
-              },
-              ref: inputRef,
-              accept,
-              ...inputProps
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: classes?.dropArea, children: dragState ? /* @__PURE__ */ jsx("div", { className: classes.dropZoneAreaLabels, children: /* @__PURE__ */ jsx("div", { className: classes.dragText, children: labels?.dropFiles }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              HvIcon,
-              {
-                name: "Doc",
-                size: "md",
-                className: classes.dropZoneAreaIcon
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { className: classes.dropZoneAreaLabels, children: /* @__PURE__ */ jsxs("div", { className: classes.dragText, children: [
-              labels?.drag,
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: classes.selectFilesText,
-                  children: ` ${labels?.selectFiles}`
-                }
-              )
-            ] }) })
-          ] }) })
-        ]
-      }
-    )
-  ] });
-};
-export {
-  HvDropZone,
-  staticClasses as dropZoneClasses
+var HvDropZone = (props) => {
+	const { id: idProp, classes: classesProp, label = "Label", labels: labelsProp, accept, maxFileSize, inputProps, hideLabels, multiple = true, onFilesAdded } = useDefaultProps("HvDropZone", props);
+	const id = useUniqueId(idProp);
+	const labels = useLabels(DEFAULT_LABELS, labelsProp);
+	const { classes, cx } = useClasses(classesProp);
+	const { disabled } = useContext(HvFormElementContext);
+	const [dragState, setDragState] = useState(false);
+	const inputRef = useRef(null);
+	const handleDragLeave = () => {
+		setDragState(false);
+	};
+	const handleDragEnter = (event) => {
+		if (disabled) return;
+		event.stopPropagation();
+		event.preventDefault();
+		setDragState(true);
+	};
+	const onChangeHandler = (filesList) => {
+		const newFiles = Object.values(filesList).map((file) => {
+			const newFile = new File([file], file.name, {
+				type: file.type,
+				lastModified: file.lastModified
+			});
+			newFile.id = uniqueId("uploaded-file-data-");
+			const isSizeAllowed = file.size <= maxFileSize;
+			if (!(!accept || validateAccept(file, accept))) {
+				newFile.errorMessage = labels?.fileTypeError;
+				newFile.status = "fail";
+			} else if (!isSizeAllowed) {
+				newFile.errorMessage = labels?.fileSizeError;
+				newFile.status = "fail";
+			}
+			return newFile;
+		});
+		onFilesAdded?.(newFiles);
+	};
+	const description = /* @__PURE__ */ jsxs(Fragment$1, { children: [Number.isInteger(maxFileSize) && `${labels.sizeWarning} ${convertUnits(maxFileSize)}`, labels.acceptedFiles || accept && `\u00A0(${accept?.replaceAll(",", ", ")})`] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [!hideLabels && /* @__PURE__ */ jsx(HvLabelContainer, {
+		id,
+		label,
+		description,
+		inputId: setId(id, "input-file"),
+		classes: {
+			root: classes.dropZoneLabelsGroup,
+			label: classes.dropZoneLabel
+		}
+	}), /* @__PURE__ */ jsxs("div", {
+		className: cx(classes.dropZoneContainer, {
+			[classes.dragAction]: dragState,
+			[classes.dropZoneContainerDisabled]: disabled
+		}),
+		children: [/* @__PURE__ */ jsx("input", {
+			id: setId(id, "input-file"),
+			className: classes.inputArea,
+			type: "file",
+			multiple,
+			disabled,
+			title: !disabled ? `${labels?.drag}\xa0${labels?.selectFiles}` : "",
+			onClick: () => {
+				if (inputRef.current) inputRef.current.value = "";
+			},
+			onChange: () => {
+				if (!disabled && inputRef.current?.files) onChangeHandler(inputRef.current.files);
+			},
+			onDragEnter: handleDragEnter,
+			onDragOver: handleDragEnter,
+			onDragLeave: handleDragLeave,
+			onDropCapture: handleDragLeave,
+			onDrop: (event) => {
+				if (disabled) return;
+				const { files } = event.dataTransfer;
+				if (multiple === true || files.length === 1) {
+					event.stopPropagation();
+					event.preventDefault();
+					onChangeHandler(files);
+				}
+			},
+			ref: inputRef,
+			accept,
+			...inputProps
+		}), /* @__PURE__ */ jsx("div", {
+			className: classes?.dropArea,
+			children: dragState ? /* @__PURE__ */ jsx("div", {
+				className: classes.dropZoneAreaLabels,
+				children: /* @__PURE__ */ jsx("div", {
+					className: classes.dragText,
+					children: labels?.dropFiles
+				})
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(HvIcon, {
+				name: "Doc",
+				size: "md",
+				className: classes.dropZoneAreaIcon
+			}), /* @__PURE__ */ jsx("div", {
+				className: classes.dropZoneAreaLabels,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: classes.dragText,
+					children: [labels?.drag, /* @__PURE__ */ jsx("span", {
+						className: classes.selectFilesText,
+						children: `\xa0${labels?.selectFiles}`
+					})]
+				})
+			})] })
+		})]
+	})] });
 };
+//#endregion
+export { HvDropZone };

package/dist/FileUploader/DropZone/DropZone.styles.js

@@ -1,70 +1,57 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../../utils/focusUtils.js";
-const { staticClasses, useClasses } = createClasses("HvDropZone", {
-  dropZoneContainer: {
-    position: "relative",
-    width: "100%",
-    display: "flex",
-    border: `1px dashed ${theme.colors.textDisabled}`,
-    cursor: "pointer",
-    backgroundColor: theme.colors.bgContainer,
-    borderRadius: theme.radii.round,
-    "&:hover": {
-      borderColor: theme.colors.text
-    },
-    "&:focus-within": {
-      borderColor: theme.colors.text,
-      ...outlineStyles
-    }
-  },
-  dropZoneLabelsGroup: {
-    "& p:nth-of-type(2)": {
-      marginLeft: "auto"
-    }
-  },
-  dragAction: {
-    backgroundColor: theme.colors.bgContainer,
-    borderColor: theme.colors.primary
-  },
-  dropZoneContainerDisabled: {
-    color: theme.colors.textDisabled,
-    backgroundColor: theme.colors.bgDisabled,
-    borderColor: "currentcolor",
-    cursor: "not-allowed",
-    "&:hover": {
-      borderColor: "currentcolor"
-    }
-  },
-  inputArea: {
-    opacity: 0,
-    width: "100%",
-    position: "absolute",
-    height: "100%",
-    cursor: "pointer",
-    "&:disabled": {
-      cursor: "not-allowed"
-    }
-  },
-  dropArea: {
-    display: "flex",
-    margin: theme.spacing("md", "auto"),
-    gap: theme.space.xs,
-    minHeight: 48
-  },
-  dropZoneAreaLabels: {
-    display: "flex",
-    maxWidth: 120,
-    margin: "auto"
-  },
-  dropZoneAreaIcon: {},
-  dropZoneLabel: {},
-  dragText: {},
-  selectFilesText: {
-    fontWeight: theme.typography.label.fontWeight
-  }
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/FileUploader/DropZone/DropZone.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvDropZone", {
+	dropZoneContainer: {
+		position: "relative",
+		width: "100%",
+		display: "flex",
+		border: `1px dashed ${theme.colors.textDisabled}`,
+		cursor: "pointer",
+		backgroundColor: theme.colors.bgContainer,
+		borderRadius: theme.radii.round,
+		"&:hover": { borderColor: theme.colors.text },
+		"&:focus-within": {
+			borderColor: theme.colors.text,
+			...outlineStyles
+		}
+	},
+	dropZoneLabelsGroup: { "& p:nth-of-type(2)": { marginLeft: "auto" } },
+	dragAction: {
+		backgroundColor: theme.colors.bgContainer,
+		borderColor: theme.colors.primary
+	},
+	dropZoneContainerDisabled: {
+		color: theme.colors.textDisabled,
+		backgroundColor: theme.colors.bgDisabled,
+		borderColor: "currentcolor",
+		cursor: "not-allowed",
+		"&:hover": { borderColor: "currentcolor" }
+	},
+	inputArea: {
+		opacity: 0,
+		width: "100%",
+		position: "absolute",
+		height: "100%",
+		cursor: "pointer",
+		"&:disabled": { cursor: "not-allowed" }
+	},
+	dropArea: {
+		display: "flex",
+		margin: theme.spacing("md", "auto"),
+		gap: theme.space.xs,
+		minHeight: 48
+	},
+	dropZoneAreaLabels: {
+		display: "flex",
+		maxWidth: 120,
+		margin: "auto"
+	},
+	dropZoneAreaIcon: {},
+	dropZoneLabel: {},
+	dragText: {},
+	selectFilesText: { fontWeight: theme.typography.label.fontWeight }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { useClasses };