@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/types/generic.js

@@ -1,7 +1,8 @@
 import { forwardRef } from "react";
+//#region src/types/generic.ts
+/** React.forwardRef with fixed type declarations */
 function fixedForwardRef(render) {
-  return forwardRef(render);
+	return forwardRef(render);
 }
-export {
-  fixedForwardRef
-};
+//#endregion
+export { fixedForwardRef };

package/dist/utils/Callout.js

@@ -1,177 +1,129 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import SnackbarContent from "@mui/material/SnackbarContent";
-import { useDefaultProps, useTheme, createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { HvIcon } from "../icons.js";
-import { iconVariant } from "./iconVariant.js";
-import { HvActionsGeneric } from "../ActionsGeneric/ActionsGeneric.js";
 import { HvButton } from "../Button/Button.js";
+import { HvActionsGeneric } from "../ActionsGeneric/ActionsGeneric.js";
 import { HvStatusIcon } from "../StatusIcon/StatusIcon.js";
-const { useClasses } = createClasses("HvCallout", {
-  root: {
-    position: "relative",
-    boxShadow: "none",
-    flexWrap: "nowrap",
-    borderRadius: theme.radii.round,
-    alignItems: "center",
-    "&[data-size='large']": {
-      padding: theme.space.sm
-    },
-    "&[data-size='regular']": {
-      padding: theme.space.xs
-    },
-    "&[data-size='micro']": {
-      padding: 0
-    }
-  },
-  success: {
-    backgroundColor: theme.colors.positiveDimmed
-  },
-  warning: {
-    backgroundColor: theme.colors.warningDimmed
-  },
-  error: {
-    backgroundColor: theme.colors.negativeDimmed
-  },
-  info: {
-    backgroundColor: theme.colors.infoDimmed
-  },
-  accent: {
-    backgroundColor: theme.colors.accentDimmed
-  },
-  default: {
-    backgroundColor: theme.colors.infoDimmed
-  },
-  message: {
-    display: "flex",
-    alignItems: "center",
-    padding: 0,
-    color: theme.colors.textDark,
-    width: "100%"
-  },
-  messageContent: {
-    textWrap: "balance",
-    overflow: "hidden",
-    wordBreak: "break-word"
-  },
-  messageIcon: {},
-  messageTitle: {
-    display: "block",
-    fontWeight: theme.fontWeights.semibold
-  },
-  action: {
-    marginRight: 0
-  },
-  actionContent: {
-    display: "flex",
-    flexDirection: "column",
-    height: "100%",
-    justifyContent: "space-between",
-    gap: theme.space.xs,
-    alignItems: "flex-start"
-  },
-  actionCustom: {
-    flex: "0 0 auto"
-  },
-  actionClose: {
-    alignSelf: "flex-end"
-  }
+import { iconVariant } from "./iconVariant.js";
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses, useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import SnackbarContent from "@mui/material/SnackbarContent";
+//#region src/utils/Callout.tsx
+var { useClasses } = createClasses("HvCallout", {
+	root: {
+		position: "relative",
+		boxShadow: "none",
+		flexWrap: "nowrap",
+		borderRadius: theme.radii.round,
+		alignItems: "center",
+		"&[data-size='large']": { padding: theme.space.sm },
+		"&[data-size='regular']": { padding: theme.space.xs },
+		"&[data-size='micro']": { padding: 0 }
+	},
+	success: { backgroundColor: theme.colors.positiveDimmed },
+	warning: { backgroundColor: theme.colors.warningDimmed },
+	error: { backgroundColor: theme.colors.negativeDimmed },
+	info: { backgroundColor: theme.colors.infoDimmed },
+	accent: { backgroundColor: theme.colors.accentDimmed },
+	default: { backgroundColor: theme.colors.infoDimmed },
+	message: {
+		display: "flex",
+		alignItems: "center",
+		padding: 0,
+		color: theme.colors.textDark,
+		width: "100%"
+	},
+	messageContent: {
+		textWrap: "balance",
+		overflow: "hidden",
+		wordBreak: "break-word"
+	},
+	messageIcon: {},
+	messageTitle: {
+		display: "block",
+		fontWeight: theme.fontWeights.semibold
+	},
+	action: { marginRight: 0 },
+	actionContent: {
+		display: "flex",
+		flexDirection: "column",
+		height: "100%",
+		justifyContent: "space-between",
+		gap: theme.space.xs,
+		alignItems: "flex-start"
+	},
+	actionCustom: { flex: "0 0 auto" },
+	actionClose: { alignSelf: "flex-end" }
 });
-const getIconSize = (size) => {
-  switch (size) {
-    case "large":
-      return "md";
-    case "toast":
-      return "xs";
-    default:
-      return "sm";
-  }
+var getIconSize = (size) => {
+	switch (size) {
+		case "large": return "md";
+		case "toast": return "xs";
+		default: return "sm";
+	}
 };
-const HvCallout = forwardRef(function HvCallout2(props, ref) {
-  const {
-    id,
-    classes: classesProp,
-    className,
-    title,
-    showClose,
-    showIcon,
-    customIcon,
-    variant = "default",
-    onClose,
-    actions,
-    onAction,
-    actionsPosition: actionsPositionProp = "auto",
-    children,
-    actionProps,
-    size = "regular",
-    ...others
-  } = useDefaultProps("HvCallout", props);
-  const { classes, cx } = useClasses(classesProp, false);
-  const { activeTheme } = useTheme();
-  const icon = customIcon || showIcon && iconVariant(variant);
-  const actionsPosition = actionsPositionProp === "auto" ? "inline" : actionsPositionProp;
-  const actionsContent = /* @__PURE__ */ jsx(
-    HvActionsGeneric,
-    {
-      id,
-      className: classes.actionCustom,
-      variant: activeTheme?.snackbar.actionButtonVariant,
-      actions,
-      onAction,
-      style: {
-        marginTop: actionsPosition === "bottom-right" ? "auto" : void 0
-      }
-    }
-  );
-  const showCustomActions = actions && actionsPosition === "bottom-right";
-  return /* @__PURE__ */ jsx(
-    SnackbarContent,
-    {
-      ref,
-      id,
-      classes: {
-        root: cx(classes.root, classes[variant], className),
-        message: classes.message,
-        action: classes.action
-      },
-      "data-size": size,
-      message: /* @__PURE__ */ jsxs(Fragment, { children: [
-        icon && /* @__PURE__ */ jsx(
-          HvStatusIcon,
-          {
-            size: getIconSize(size),
-            className: classes.messageIcon,
-            variant: variant === "default" ? "info" : variant,
-            customIcon
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: classes.messageContent, children: [
-          title && /* @__PURE__ */ jsx("b", { className: classes.messageTitle, children: title }),
-          children
-        ] }),
-        /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
-        actions && actionsPosition === "inline" && actionsContent
-      ] }),
-      action: (showClose || showCustomActions) && /* @__PURE__ */ jsxs("div", { className: classes.actionContent, children: [
-        showClose && /* @__PURE__ */ jsx(
-          HvButton,
-          {
-            icon: true,
-            className: classes.actionClose,
-            variant: "semantic",
-            "aria-label": "Close",
-            onClick: (evt) => onClose?.(evt, "clickaway"),
-            ...actionProps,
-            children: /* @__PURE__ */ jsx(HvIcon, { size: "xs", name: "Close" })
-          }
-        ),
-        showCustomActions && actionsContent
-      ] }),
-      ...others
-    }
-  );
+/**
+* `HvCallout` is the internal content handler for the snackbars and banners. Might be promoted to a component.
+* @private @internal
+*/
+var HvCallout = forwardRef(function HvCallout(props, ref) {
+	const { id, classes: classesProp, className, title, showClose, showIcon, customIcon, variant = "default", onClose, actions, onAction, actionsPosition: actionsPositionProp = "auto", children, actionProps, size = "regular", ...others } = useDefaultProps("HvCallout", props);
+	const { classes, cx } = useClasses(classesProp, false);
+	const { activeTheme } = useTheme();
+	const icon = customIcon || showIcon && iconVariant(variant);
+	const actionsPosition = actionsPositionProp === "auto" ? "inline" : actionsPositionProp;
+	const actionsContent = /* @__PURE__ */ jsx(HvActionsGeneric, {
+		id,
+		className: classes.actionCustom,
+		variant: activeTheme?.snackbar.actionButtonVariant,
+		actions,
+		onAction,
+		style: { marginTop: actionsPosition === "bottom-right" ? "auto" : void 0 }
+	});
+	const showCustomActions = actions && actionsPosition === "bottom-right";
+	return /* @__PURE__ */ jsx(SnackbarContent, {
+		ref,
+		id,
+		classes: {
+			root: cx(classes.root, classes[variant], className),
+			message: classes.message,
+			action: classes.action
+		},
+		"data-size": size,
+		message: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			icon && /* @__PURE__ */ jsx(HvStatusIcon, {
+				size: getIconSize(size),
+				className: classes.messageIcon,
+				variant: variant === "default" ? "info" : variant,
+				customIcon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: classes.messageContent,
+				children: [title && /* @__PURE__ */ jsx("b", {
+					className: classes.messageTitle,
+					children: title
+				}), children]
+			}),
+			/* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+			actions && actionsPosition === "inline" && actionsContent
+		] }),
+		action: (showClose || showCustomActions) && /* @__PURE__ */ jsxs("div", {
+			className: classes.actionContent,
+			children: [showClose && /* @__PURE__ */ jsx(HvButton, {
+				icon: true,
+				className: classes.actionClose,
+				variant: "semantic",
+				"aria-label": "Close",
+				onClick: (evt) => onClose?.(evt, "clickaway"),
+				...actionProps,
+				children: /* @__PURE__ */ jsx(HvIcon, {
+					size: "xs",
+					name: "Close"
+				})
+			}), showCustomActions && actionsContent]
+		}),
+		...others
+	});
 });
-export {
-  HvCallout
-};
+//#endregion
+export { HvCallout };

package/dist/utils/CounterLabel.js

@@ -1,16 +1,15 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-const CounterLabel = ({
-  selected,
-  total,
-  conjunctionLabel = "/",
-  ...others
-}) => {
-  return /* @__PURE__ */ jsxs("span", { ...others, children: [
-    /* @__PURE__ */ jsx("b", { children: selected }),
-    " ",
-    ` ${conjunctionLabel} ${total}`
-  ] });
-};
-export {
-  CounterLabel
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/utils/CounterLabel.tsx
+/** A utility counter component (eg. X / Y) @private */
+var CounterLabel = ({ selected, total, conjunctionLabel = "/", ...others }) => {
+	return /* @__PURE__ */ jsxs("span", {
+		...others,
+		children: [
+			/* @__PURE__ */ jsx("b", { children: selected }),
+			" ",
+			` ${conjunctionLabel} ${total}`
+		]
+	});
 };
+//#endregion
+export { CounterLabel };

package/dist/utils/deepMerge.js

@@ -1,19 +1,17 @@
-const isObject = (val) => val && typeof val === "object" && !Array.isArray(val);
+//#region src/utils/deepMerge.ts
+var isObject = (val) => val && typeof val === "object" && !Array.isArray(val);
 function merge(target, source) {
-  Object.keys(source || {}).forEach((keyProp) => {
-    const key = keyProp;
-    if (isObject(target[key]) && isObject(source?.[key])) {
-      merge(target[key], source?.[key]);
-    } else {
-      target[key] = source?.[key];
-    }
-  });
+	Object.keys(source || {}).forEach((keyProp) => {
+		const key = keyProp;
+		if (isObject(target[key]) && isObject(source?.[key])) merge(target[key], source?.[key]);
+		else target[key] = source?.[key];
+	});
 }
+/** Merges recursively all keys of source into target returning the resulting object. */
 function deepMerge(target, source) {
-  const result = structuredClone(target);
-  merge(result, source);
-  return result;
+	const result = structuredClone(target);
+	merge(result, source);
+	return result;
 }
-export {
-  deepMerge
-};
+//#endregion
+export { deepMerge };

package/dist/utils/document.js

@@ -1,14 +1,14 @@
+//#region src/utils/document.ts
 function getDocument() {
-  return typeof window !== "undefined" ? document : void 0;
+	return typeof window !== "undefined" ? document : void 0;
 }
+/** Wrapper around `document.getElementById` */
 function getElementById(elementId) {
-  return elementId && getDocument()?.getElementById(elementId) || void 0;
+	return elementId && getDocument()?.getElementById(elementId) || void 0;
 }
+/** Get a container element by id, falling back to document-body */
 function getContainerElement(elementId) {
-  return getElementById(elementId) || getDocument()?.body;
+	return getElementById(elementId) || getDocument()?.body;
 }
-export {
-  getContainerElement,
-  getDocument,
-  getElementById
-};
+//#endregion
+export { getContainerElement, getDocument, getElementById };

package/dist/utils/focusUtils.js

@@ -1,8 +1,7 @@
-const outlineStyles = {
-  outline: "none",
-  // remove the default outlines
-  boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)"
-};
-export {
-  outlineStyles
+//#region src/utils/focusUtils.ts
+var outlineStyles = {
+	outline: "none",
+	boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)"
 };
+//#endregion
+export { outlineStyles };

package/dist/utils/focusableElementFinder.js

@@ -1,28 +1,25 @@
-const SELECTORS = 'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])';
-const getFocusableList = (node) => node?.querySelectorAll(SELECTORS) || [];
-const getPrevNextFocus = (nodeId) => {
-  const nodes = getFocusableList(document);
-  const nbNodes = nodes.length;
-  let index = 0;
-  for (; index < nbNodes; index += 1) {
-    if (nodes[index].id === nodeId) {
-      break;
-    }
-  }
-  return {
-    nextFocus: nodes[index + 1 > nbNodes - 1 ? 0 : index + 1],
-    prevFocus: nodes[index - 1 < 0 ? nbNodes - 1 : index - 1]
-  };
+//#region src/utils/focusableElementFinder.ts
+var SELECTORS = "input, button, select, textarea, a[href], [tabindex]:not([tabindex=\"-1\"])";
+/** Gets the list of focusable elements. */
+var getFocusableList = (node) => node?.querySelectorAll(SELECTORS) || [];
+/** Auxiliary function to find adjacent nodes to focus. */
+var getPrevNextFocus = (nodeId) => {
+	const nodes = getFocusableList(document);
+	const nbNodes = nodes.length;
+	let index = 0;
+	for (; index < nbNodes; index += 1) if (nodes[index].id === nodeId) break;
+	return {
+		nextFocus: nodes[index + 1 > nbNodes - 1 ? 0 : index + 1],
+		prevFocus: nodes[index - 1 < 0 ? nbNodes - 1 : index - 1]
+	};
 };
-const getFirstAndLastFocus = (node) => {
-  const focusableList = getFocusableList(node);
-  return {
-    first: focusableList[0] || null,
-    last: focusableList[focusableList.length - 1] || null
-  };
-};
-export {
-  getFirstAndLastFocus,
-  getFocusableList,
-  getPrevNextFocus
+/** Get the first and last focusable element from a node. */
+var getFirstAndLastFocus = (node) => {
+	const focusableList = getFocusableList(node);
+	return {
+		first: focusableList[0] || null,
+		last: focusableList[focusableList.length - 1] || null
+	};
 };
+//#endregion
+export { getPrevNextFocus as default, getFirstAndLastFocus };

package/dist/utils/helpers.js

@@ -1,28 +1,20 @@
-const uniqueId = (prefix = "") => {
-  return `${prefix}${Math.random().toString(36).slice(2, 9)}`;
+//#region src/utils/helpers.ts
+var uniqueId = (prefix = "") => {
+	return `${prefix}${Math.random().toString(36).slice(2, 9)}`;
 };
-const range = (length, start = 0) => {
-  return Array.from({ length: length - start }, (_, i) => i + start);
+var range = (length, start = 0) => {
+	return Array.from({ length: length - start }, (_, i) => i + start);
 };
-const capitalize = (string) => {
-  return string.charAt(0).toUpperCase() + string.slice(1);
+var capitalize = (string) => {
+	return string.charAt(0).toUpperCase() + string.slice(1);
 };
 function isEqual(obj1, obj2) {
-  if (!obj1 || !obj2 || typeof obj1 !== "object" || typeof obj2 !== "object") {
-    return obj1 === obj2;
-  }
-  const keys1 = Object.keys(obj1);
-  const keys2 = Object.keys(obj2);
-  if (keys1.length !== keys2.length) return false;
-  for (const key of keys1) {
-    if (!isEqual(obj1[key], obj2[key]))
-      return false;
-  }
-  return true;
+	if (!obj1 || !obj2 || typeof obj1 !== "object" || typeof obj2 !== "object") return obj1 === obj2;
+	const keys1 = Object.keys(obj1);
+	const keys2 = Object.keys(obj2);
+	if (keys1.length !== keys2.length) return false;
+	for (const key of keys1) if (!isEqual(obj1[key], obj2[key])) return false;
+	return true;
 }
-export {
-  capitalize,
-  isEqual,
-  range,
-  uniqueId
-};
+//#endregion
+export { capitalize, isEqual, range, uniqueId };

package/dist/utils/iconVariant.js

@@ -1,15 +1,18 @@
-import { jsx } from "react/jsx-runtime";
 import { HvIcon } from "../icons.js";
-const variantIconMap = {
-  success: "Success",
-  warning: "Caution",
-  error: "Fail",
-  info: "Info"
-};
-const iconVariant = (variant, color) => {
-  if (variant === "default" || variant === "accent") return null;
-  return /* @__PURE__ */ jsx(HvIcon, { name: variantIconMap[variant], color });
+import { jsx } from "react/jsx-runtime";
+//#region src/utils/iconVariant.tsx
+var variantIconMap = {
+	success: "Success",
+	warning: "Caution",
+	error: "Fail",
+	info: "Info"
 };
-export {
-  iconVariant
+var iconVariant = (variant, color) => {
+	if (variant === "default" || variant === "accent") return null;
+	return /* @__PURE__ */ jsx(HvIcon, {
+		name: variantIconMap[variant],
+		color
+	});
 };
+//#endregion
+export { iconVariant };

package/dist/utils/keyboardUtils.js

@@ -1,33 +1,33 @@
-const keyboardCodes = {
-  Backspace: "Backspace",
-  Tab: "Tab",
-  Enter: "Enter",
-  Shift: "ShiftLeft",
-  Ctrl: "ControlLeft",
-  Alt: "AltLeft",
-  Delete: "Delete",
-  Esc: "Escape",
-  ArrowLeft: "ArrowLeft",
-  ArrowUp: "ArrowUp",
-  ArrowRight: "ArrowRight",
-  ArrowDown: "ArrowDown",
-  Space: "Space",
-  PageUp: "PageUp",
-  PageDown: "PageDown",
-  Home: "Home",
-  End: "End"
+//#region src/utils/keyboardUtils.ts
+/** Map of keys to key `code` @see https://mdn.io/event/code */
+var keyboardCodes = {
+	Backspace: "Backspace",
+	Tab: "Tab",
+	Enter: "Enter",
+	Shift: "ShiftLeft",
+	Ctrl: "ControlLeft",
+	Alt: "AltLeft",
+	Delete: "Delete",
+	Esc: "Escape",
+	ArrowLeft: "ArrowLeft",
+	ArrowUp: "ArrowUp",
+	ArrowRight: "ArrowRight",
+	ArrowDown: "ArrowDown",
+	Space: "Space",
+	PageUp: "PageUp",
+	PageDown: "PageDown",
+	Home: "Home",
+	End: "End"
 };
-const isKey = (event, keyCode) => {
-  return event?.code === keyCode || event?.code === keyboardCodes[keyCode];
+/** Check whether a keyboard `event` is pressing the `keyCode` key. */
+var isKey = (event, keyCode) => {
+	return event?.code === keyCode || event?.code === keyboardCodes[keyCode];
 };
-const isOneOfKeys = (event, keys) => {
-  return keys.some((key) => isKey(event, key));
+var isOneOfKeys = (event, keys) => {
+	return keys.some((key) => isKey(event, key));
 };
 function isDeleteKey(event) {
-  return isOneOfKeys(event, ["Backspace", "Delete"]);
+	return isOneOfKeys(event, ["Backspace", "Delete"]);
 }
-export {
-  isDeleteKey,
-  isKey,
-  isOneOfKeys
-};
+//#endregion
+export { isDeleteKey, isKey, isOneOfKeys };