@hitachivantara/uikit-react-core 6.8.2 → 6.9.0

package/dist/Focus/Focus.styles.js

@@ -1,41 +1,30 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { outlineStyles } from "../utils/focusUtils.js";
-const { staticClasses, useClasses } = createClasses("HvFocus", {
-  root: {},
-  selected: {},
-  disabled: {},
-  focusDisabled: {
-    outline: "none",
-    "& *:focus": {
-      outline: "none"
-    },
-    "& *": {
-      outline: "none !important"
-    }
-  },
-  focused: {
-    ...outlineStyles,
-    "@media (-webkit-min-device-pixel-ratio:0)": {
-      ...outlineStyles
-    }
-  },
-  focusedVisible: {
-    "&:focus-visible": {
-      ...outlineStyles,
-      "@media (-webkit-min-device-pixel-ratio:0)": {
-        ...outlineStyles
-      }
-    },
-    "&:focus-within:has(:focus-visible)": {
-      ...outlineStyles,
-      "@media (-webkit-min-device-pixel-ratio:0)": {
-        ...outlineStyles
-      }
-    }
-  },
-  focus: {}
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Focus/Focus.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvFocus", {
+	root: {},
+	selected: {},
+	disabled: {},
+	focusDisabled: {
+		outline: "none",
+		"& *:focus": { outline: "none" },
+		"& *": { outline: "none !important" }
+	},
+	focused: {
+		...outlineStyles,
+		"@media (-webkit-min-device-pixel-ratio:0)": { ...outlineStyles }
+	},
+	focusedVisible: {
+		"&:focus-visible": {
+			...outlineStyles,
+			"@media (-webkit-min-device-pixel-ratio:0)": { ...outlineStyles }
+		},
+		"&:focus-within:has(:focus-visible)": {
+			...outlineStyles,
+			"@media (-webkit-min-device-pixel-ratio:0)": { ...outlineStyles }
+		}
+	},
+	focus: {}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/Focus/utils.js

@@ -1,22 +1,16 @@
-const getFocusableChildren = (el) => el?.querySelectorAll("input, button, select, textarea, a[href]") || [];
-const setFocusTo = (el) => {
-  el.focus();
+//#region src/Focus/utils.ts
+var getFocusableChildren = (el) => el?.querySelectorAll("input, button, select, textarea, a[href]") || [];
+var setFocusTo = (el) => {
+	el.focus();
 };
-const isBrowser = (browserId) => {
-  const userAgent = navigator.userAgent.toLowerCase();
-  switch (browserId) {
-    case "firefox":
-      return userAgent.includes("firefox");
-    case "chrome":
-      return userAgent.includes("chrome") && !userAgent.includes("chromium");
-    case "safari":
-      return userAgent.includes("safari") && !userAgent.includes("chrome");
-    default:
-      return false;
-  }
-};
-export {
-  getFocusableChildren,
-  isBrowser,
-  setFocusTo
+var isBrowser = (browserId) => {
+	const userAgent = navigator.userAgent.toLowerCase();
+	switch (browserId) {
+		case "firefox": return userAgent.includes("firefox");
+		case "chrome": return userAgent.includes("chrome") && !userAgent.includes("chromium");
+		case "safari": return userAgent.includes("safari") && !userAgent.includes("chrome");
+		default: return false;
+	}
 };
+//#endregion
+export { getFocusableChildren, isBrowser, setFocusTo };

package/dist/Footer/Footer.js

@@ -1,41 +1,39 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { HvTypography } from "../Typography/Typography.js";
+import { useClasses } from "./Footer.styles.js";
+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 { useClasses } from "./Footer.styles.js";
-import { staticClasses } from "./Footer.styles.js";
-import { HvTypography } from "../Typography/Typography.js";
-const HvFooter = forwardRef(function HvFooter2(props, ref) {
-  const {
-    name = "Hitachi Vantara",
-    copyright = `© Hitachi Vantara LLC ${(/* @__PURE__ */ new Date()).getFullYear()}. All Rights Reserved.`,
-    links,
-    classes: classesProp,
-    className,
-    ...others
-  } = useDefaultProps("HvFooter", props);
-  const muiTheme = useTheme();
-  const { classes, cx } = useClasses(classesProp);
-  const isSmDown = useMediaQuery(muiTheme.breakpoints.down("sm"));
-  return /* @__PURE__ */ jsxs(
-    "footer",
-    {
-      ref,
-      className: cx(classes.root, { [classes.small]: isSmDown }, className),
-      ...others,
-      children: [
-        /* @__PURE__ */ jsx(HvTypography, { variant: "label", className: classes.name, children: name }),
-        /* @__PURE__ */ jsxs("div", { className: classes.rightContainer, children: [
-          /* @__PURE__ */ jsx(HvTypography, { className: classes.copyright, children: copyright }),
-          links && /* @__PURE__ */ jsx("div", { className: classes.separator }),
-          links
-        ] })
-      ]
-    }
-  );
+//#region src/Footer/Footer.tsx
+/**
+* A Footer is a way of providing extra information at the end of a page.
+*/
+var HvFooter = forwardRef(function HvFooter(props, ref) {
+	const { name = "Hitachi Vantara", copyright = `© Hitachi Vantara LLC ${(/* @__PURE__ */ new Date()).getFullYear()}. All Rights Reserved.`, links, classes: classesProp, className, ...others } = useDefaultProps("HvFooter", props);
+	const muiTheme = useTheme$1();
+	const { classes, cx } = useClasses(classesProp);
+	const isSmDown = useMediaQuery(muiTheme.breakpoints.down("sm"));
+	return /* @__PURE__ */ jsxs("footer", {
+		ref,
+		className: cx(classes.root, { [classes.small]: isSmDown }, className),
+		...others,
+		children: [/* @__PURE__ */ jsx(HvTypography, {
+			variant: "label",
+			className: classes.name,
+			children: name
+		}), /* @__PURE__ */ jsxs("div", {
+			className: classes.rightContainer,
+			children: [
+				/* @__PURE__ */ jsx(HvTypography, {
+					className: classes.copyright,
+					children: copyright
+				}),
+				links && /* @__PURE__ */ jsx("div", { className: classes.separator }),
+				links
+			]
+		})]
+	});
 });
-export {
-  HvFooter,
-  staticClasses as footerClasses
-};
+//#endregion
+export { HvFooter };

package/dist/Footer/Footer.styles.js

@@ -1,45 +1,42 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvFooter", {
-  root: {
-    display: "flex",
-    alignItems: "center",
-    flexDirection: "row",
-    gap: theme.space.xs,
-    padding: theme.spacing("xs", "sm"),
-    height: 40,
-    bottom: 0,
-    zIndex: theme.zIndices.base,
-    backgroundColor: theme.colors.bgContainer,
-    boxShadow: `0 -1px 0 ${theme.colors.border}`
-  },
-  name: {},
-  rightContainer: {
-    display: "flex",
-    alignItems: "center",
-    flexDirection: "row",
-    marginLeft: "auto"
-  },
-  copyright: {},
-  separator: {
-    width: 1,
-    height: 16,
-    backgroundColor: theme.colors.text,
-    margin: theme.spacing("xs", "sm")
-  },
-  small: {
-    "&$root": {
-      height: "unset",
-      flexDirection: "column",
-      padding: theme.space.xs
-    },
-    "& $rightContainer": {
-      display: "contents"
-    },
-    "& $separator": { display: "none" }
-  }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Footer/Footer.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvFooter", {
+	root: {
+		display: "flex",
+		alignItems: "center",
+		flexDirection: "row",
+		gap: theme.space.xs,
+		padding: theme.spacing("xs", "sm"),
+		height: 40,
+		bottom: 0,
+		zIndex: theme.zIndices.base,
+		backgroundColor: theme.colors.bgContainer,
+		boxShadow: `0 -1px 0 ${theme.colors.border}`
+	},
+	name: {},
+	rightContainer: {
+		display: "flex",
+		alignItems: "center",
+		flexDirection: "row",
+		marginLeft: "auto"
+	},
+	copyright: {},
+	separator: {
+		width: 1,
+		height: 16,
+		backgroundColor: theme.colors.text,
+		margin: theme.spacing("xs", "sm")
+	},
+	small: {
+		"&$root": {
+			height: "unset",
+			flexDirection: "column",
+			padding: theme.space.xs
+		},
+		"& $rightContainer": { display: "contents" },
+		"& $separator": { display: "none" }
+	}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/FormElement/Adornment/Adornment.js

@@ -1,52 +1,41 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useContext } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvButtonBase } from "../../ButtonBase/ButtonBase.js";
 import { HvFormElementContext, HvFormElementDescriptorsContext } from "../context.js";
 import { useClasses } from "./Adornment.styles.js";
-import { staticClasses } from "./Adornment.styles.js";
-import { HvButtonBase } from "../../ButtonBase/ButtonBase.js";
-const HvAdornment = forwardRef(function HvAdornment2(props, ref) {
-  const {
-    classes: classesProp,
-    className,
-    icon,
-    showWhen,
-    onClick,
-    isVisible,
-    tabIndex,
-    ...others
-  } = useDefaultProps("HvAdornment", props);
-  const { classes, cx } = useClasses(classesProp);
-  const { status, disabled } = useContext(HvFormElementContext);
-  const { input } = useContext(HvFormElementDescriptorsContext);
-  const displayIcon = isVisible ?? (showWhen == null || status === showWhen);
-  const Component = onClick ? HvButtonBase : "div";
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      ref,
-      "aria-hidden": tabIndex == null || tabIndex < 0 ? true : void 0,
-      className: cx(
-        classes.root,
-        {
-          [classes.hideIcon]: !displayIcon,
-          [classes.disabled]: disabled
-        },
-        className
-      ),
-      ...onClick && {
-        disabled,
-        tabIndex: tabIndex ?? -1,
-        "aria-controls": input?.[0]?.id,
-        onClick,
-        onMouseDown: (event) => event.preventDefault()
-      },
-      ...others,
-      children: icon
-    }
-  );
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/FormElement/Adornment/Adornment.tsx
+/**
+* Allows to add a decorative icon or an action to a form element, usually on the right side of an input.
+* E.g., the reveal password button.
+*
+* This component disables keyboard navigation by default, ensuring that it doesn't steal focus from the input.
+* As such, its functionality, if any, for accessibility purposes must be provided through an alternative mean.
+* This behavior can be overridden by providing an a `tabIndex={0}`.
+*/
+var HvAdornment = forwardRef(function HvAdornment(props, ref) {
+	const { classes: classesProp, className, icon, showWhen, onClick, isVisible, tabIndex, ...others } = useDefaultProps("HvAdornment", props);
+	const { classes, cx } = useClasses(classesProp);
+	const { status, disabled } = useContext(HvFormElementContext);
+	const { input } = useContext(HvFormElementDescriptorsContext);
+	const displayIcon = isVisible ?? (showWhen == null || status === showWhen);
+	return /* @__PURE__ */ jsx(onClick ? HvButtonBase : "div", {
+		ref,
+		"aria-hidden": tabIndex == null || tabIndex < 0 ? true : void 0,
+		className: cx(classes.root, {
+			[classes.hideIcon]: !displayIcon,
+			[classes.disabled]: disabled
+		}, className),
+		...onClick && {
+			disabled,
+			tabIndex: tabIndex ?? -1,
+			"aria-controls": input?.[0]?.id,
+			onClick,
+			onMouseDown: (event) => event.preventDefault()
+		},
+		...others,
+		children: icon
+	});
 });
-export {
-  HvAdornment,
-  staticClasses as adornmentClasses
-};
+//#endregion
+export { HvAdornment };

package/dist/FormElement/Adornment/Adornment.styles.js

@@ -1,17 +1,16 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-const { staticClasses, useClasses } = createClasses("HvAdornment", {
-  root: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 32,
-    height: 30,
-    flexShrink: 0
-  },
-  hideIcon: { display: "none" },
-  disabled: {}
+//#region src/FormElement/Adornment/Adornment.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvAdornment", {
+	root: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		width: 32,
+		height: 30,
+		flexShrink: 0
+	},
+	hideIcon: { display: "none" },
+	disabled: {}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/FormElement/CharCounter/CharCounter.js

@@ -1,77 +1,55 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useContext } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvTypography } from "../../Typography/Typography.js";
 import { setId } from "../../utils/setId.js";
 import { HvFormElementContext } from "../context.js";
 import { useClasses } from "./CharCounter.styles.js";
-import { staticClasses } from "./CharCounter.styles.js";
-import { HvTypography } from "../../Typography/Typography.js";
-const HvCharCounter = (props) => {
-  const {
-    separator = "/",
-    maxCharQuantity,
-    currentCharQuantity = 0,
-    classes: classesProp,
-    className,
-    id: idProp,
-    disabled: disabledProp,
-    disableGutter,
-    ...others
-  } = useDefaultProps("HvCharCounter", props);
-  const { classes, cx } = useClasses(classesProp);
-  const context = useContext(HvFormElementContext);
-  const disabled = disabledProp ?? context.disabled;
-  const id = idProp ?? setId(context.id, "counter");
-  const currentId = setId(id, "currentQuantity");
-  const maxQuantityId = setId(id, "maxQuantity");
-  const isOverloaded = currentCharQuantity > maxCharQuantity;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      id,
-      className: cx(
-        classes.root,
-        {
-          [classes.counterDisabled]: disabled,
-          [classes.gutter]: !disableGutter
-        },
-        className
-      ),
-      "aria-live": "polite",
-      "aria-disabled": disabled,
-      ...others,
-      children: [
-        /* @__PURE__ */ jsx(
-          HvTypography,
-          {
-            id: currentId,
-            className: cx({
-              [classes.overloaded]: isOverloaded && !disabled,
-              [classes.counterDisabled]: disabled
-            }),
-            variant: "label",
-            component: "label",
-            children: currentCharQuantity
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          HvTypography,
-          {
-            id: maxQuantityId,
-            className: cx({
-              [classes.overloaded]: isOverloaded && !disabled,
-              [classes.counterDisabled]: disabled
-            }),
-            variant: "body",
-            component: "label",
-            children: ` ${separator} ${maxCharQuantity}`
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  HvCharCounter,
-  staticClasses as charCounterClasses
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/FormElement/CharCounter/CharCounter.tsx
+/**
+* Displays the capacity and current usage of a text input box (character count by default).
+*
+* Use the character counter when there is a character or word limit.
+* By itself it doesn't block the user from going above the limit.
+*/
+var HvCharCounter = (props) => {
+	const { separator = "/", maxCharQuantity, currentCharQuantity = 0, classes: classesProp, className, id: idProp, disabled: disabledProp, disableGutter, ...others } = useDefaultProps("HvCharCounter", props);
+	const { classes, cx } = useClasses(classesProp);
+	const context = useContext(HvFormElementContext);
+	const disabled = disabledProp ?? context.disabled;
+	const id = idProp ?? setId(context.id, "counter");
+	const currentId = setId(id, "currentQuantity");
+	const maxQuantityId = setId(id, "maxQuantity");
+	const isOverloaded = currentCharQuantity > maxCharQuantity;
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: cx(classes.root, {
+			[classes.counterDisabled]: disabled,
+			[classes.gutter]: !disableGutter
+		}, className),
+		"aria-live": "polite",
+		"aria-disabled": disabled,
+		...others,
+		children: [/* @__PURE__ */ jsx(HvTypography, {
+			id: currentId,
+			className: cx({
+				[classes.overloaded]: isOverloaded && !disabled,
+				[classes.counterDisabled]: disabled
+			}),
+			variant: "label",
+			component: "label",
+			children: currentCharQuantity
+		}), /* @__PURE__ */ jsx(HvTypography, {
+			id: maxQuantityId,
+			className: cx({
+				[classes.overloaded]: isOverloaded && !disabled,
+				[classes.counterDisabled]: disabled
+			}),
+			variant: "body",
+			component: "label",
+			children: ` ${separator} ${maxCharQuantity}`
+		})]
+	});
 };
+//#endregion
+export { HvCharCounter };

package/dist/FormElement/CharCounter/CharCounter.styles.js

@@ -1,12 +1,14 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvCharCounter", {
-  root: { display: "inline-block", float: "right" },
-  counterDisabled: { color: theme.colors.textDisabled },
-  gutter: { paddingLeft: "6px" },
-  overloaded: { color: theme.colors.negative }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/FormElement/CharCounter/CharCounter.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvCharCounter", {
+	root: {
+		display: "inline-block",
+		float: "right"
+	},
+	counterDisabled: { color: theme.colors.textDisabled },
+	gutter: { paddingLeft: "6px" },
+	overloaded: { color: theme.colors.negative }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/FormElement/FormElement.js

@@ -1,36 +1,58 @@
-import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvFormElementContext, HvFormElementDescriptorsContext, HvFormElementValueContext } from "./context.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
-import { HvFormElementContext, HvFormElementValueContext, HvFormElementDescriptorsContext } from "./context.js";
 import { useClasses } from "./FormElement.styles.js";
-import { staticClasses } from "./FormElement.styles.js";
 import { findDescriptors } from "./utils.js";
-const HvFormElement = (props) => {
-  const {
-    classes: classesProp,
-    className,
-    children,
-    id: idProp,
-    name,
-    value,
-    disabled,
-    required,
-    readOnly,
-    status = "standBy",
-    ...others
-  } = useDefaultProps("HvFormElement", props);
-  const { classes, cx } = useClasses(classesProp);
-  const id = useUniqueId(idProp);
-  const contextValue = useMemo(
-    () => ({ id, name, status, disabled, required, readOnly }),
-    [id, name, status, disabled, required, readOnly]
-  );
-  const descriptors = useMemo(() => findDescriptors(children), [children]);
-  return /* @__PURE__ */ jsx("div", { id, className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsx(HvFormElementContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(HvFormElementValueContext.Provider, { value, children: /* @__PURE__ */ jsx(HvFormElementDescriptorsContext.Provider, { value: descriptors, children }) }) }) });
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/FormElement/FormElement.tsx
+/**
+* Provides form-related context (ie. required/disabled/readOnly) for building form components,
+* analogous to MUI's [`FormControl`](https://mui.com/material-ui/api/form-control/) component.
+*
+* It is used internally to build UI Kit's form components (eg. `HvInput`, `HvDatePicker`), and can be used to build custom form components.
+*
+* It exposes the common properties to be shared between all form components: `required`, `disabled`, `readOnly`, and `status`.
+*
+* Along with the properties above, form components also share the `value`/`defaultValue` and `onChange` props,
+* used to control the value of the form component, analogous to the native `input` component.
+*/
+var HvFormElement = (props) => {
+	const { classes: classesProp, className, children, id: idProp, name, value, disabled, required, readOnly, status = "standBy", ...others } = useDefaultProps("HvFormElement", props);
+	const { classes, cx } = useClasses(classesProp);
+	const id = useUniqueId(idProp);
+	const contextValue = useMemo(() => ({
+		id,
+		name,
+		status,
+		disabled,
+		required,
+		readOnly
+	}), [
+		id,
+		name,
+		status,
+		disabled,
+		required,
+		readOnly
+	]);
+	const descriptors = useMemo(() => findDescriptors(children), [children]);
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		className: cx(classes.root, className),
+		...others,
+		children: /* @__PURE__ */ jsx(HvFormElementContext.Provider, {
+			value: contextValue,
+			children: /* @__PURE__ */ jsx(HvFormElementValueContext.Provider, {
+				value,
+				children: /* @__PURE__ */ jsx(HvFormElementDescriptorsContext.Provider, {
+					value: descriptors,
+					children
+				})
+			})
+		})
+	});
 };
 HvFormElement.formElementType = "formelement";
-export {
-  HvFormElement,
-  staticClasses as formElementClasses
-};
+//#endregion
+export { HvFormElement };