@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/FormElement/WarningText/WarningText.styles.js

@@ -1,30 +1,27 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvWarningText", {
-  root: {
-    display: "none",
-    color: theme.form.errorColor
-  },
-  defaultIcon: { margin: 6 },
-  warningText: {
-    ...theme.typography.caption1,
-    color: "inherit",
-    paddingRight: theme.space.xs
-  },
-  show: { display: "flex" },
-  topGutter: { paddingTop: "3px" },
-  hideText: {
-    // display none or visibility hidden prevents
-    // browser to trigger the aria-alert
-    width: 0,
-    height: 0,
-    padding: 0,
-    margin: 0,
-    overflow: "hidden"
-  },
-  topBorder: { borderTop: "1px solid currentcolor" }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/FormElement/WarningText/WarningText.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvWarningText", {
+	root: {
+		display: "none",
+		color: theme.form.errorColor
+	},
+	defaultIcon: { margin: 6 },
+	warningText: {
+		...theme.typography.caption1,
+		color: "inherit",
+		paddingRight: theme.space.xs
+	},
+	show: { display: "flex" },
+	topGutter: { paddingTop: "3px" },
+	hideText: {
+		width: 0,
+		height: 0,
+		padding: 0,
+		margin: 0,
+		overflow: "hidden"
+	},
+	topBorder: { borderTop: "1px solid currentcolor" }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/FormElement/context.js

@@ -1,11 +1,7 @@
 import { createContext } from "react";
-const HvFormElementContext = createContext(
-  {}
-);
-const HvFormElementDescriptorsContext = createContext({});
-const HvFormElementValueContext = createContext(void 0);
-export {
-  HvFormElementContext,
-  HvFormElementDescriptorsContext,
-  HvFormElementValueContext
-};
+//#region src/FormElement/context.ts
+var HvFormElementContext = createContext({});
+var HvFormElementDescriptorsContext = createContext({});
+var HvFormElementValueContext = createContext(void 0);
+//#endregion
+export { HvFormElementContext, HvFormElementDescriptorsContext, HvFormElementValueContext };

package/dist/FormElement/utils.js

@@ -1,65 +1,61 @@
 import { Children } from "react";
-const findDescriptors = (children, descriptors = {
-  input: [],
-  label: [],
-  description: [],
-  controlled: [],
-  errormessage: [],
-  // TODO: refactor this out
-  HvCalendarHeader: []
+//#region src/FormElement/utils.ts
+/**
+* Scans the element's children looking for the children IDs that match the different form element types.
+* This function will produce an object that has a key for each provided name
+* Inside each key there will be an array with each id of the found descriptor.
+*
+* @param {Array} children - The children inside the form element to scan.
+* @param {Object} descriptors - Initial descriptors map (used for recursion).
+*
+*/
+var findDescriptors = (children, descriptors = {
+	input: [],
+	label: [],
+	description: [],
+	controlled: [],
+	errormessage: [],
+	HvCalendarHeader: []
 }) => {
-  Children.forEach(children, (child) => {
-    if (child?.type?.formElementType && child.props?.id) {
-      descriptors[child.type.formElementType]?.push(
-        {
-          id: child.props?.id,
-          htmlFor: child.props?.htmlFor
-        }
-      );
-    }
-    if (child?.type?.formElementType !== "formelement") {
-      findDescriptors(child?.props?.children, descriptors);
-    }
-  });
-  return descriptors;
+	Children.forEach(children, (child) => {
+		if (child?.type?.formElementType && child.props?.id) descriptors[child.type.formElementType]?.push({
+			id: child.props?.id,
+			htmlFor: child.props?.htmlFor
+		});
+		if (child?.type?.formElementType !== "formelement") findDescriptors(child?.props?.children, descriptors);
+	});
+	return descriptors;
 };
-const getIdReferenceListFor = (formElementType, descriptors, filterFor = null) => {
-  const referenceList = descriptors?.[formElementType]?.filter((d) => d.htmlFor !== filterFor)?.map((d) => d.id).join(" ").trim();
-  return referenceList !== "" ? referenceList : void 0;
+var getIdReferenceListFor = (formElementType, descriptors, filterFor = null) => {
+	const referenceList = descriptors?.[formElementType]?.filter((d) => d.htmlFor !== filterFor)?.map((d) => d.id).join(" ").trim();
+	return referenceList !== "" ? referenceList : void 0;
 };
-const getIdReferenceFor = (formElementType, descriptors, filterFor = null) => {
-  const referenceList = descriptors?.[formElementType]?.filter((d) => d.htmlFor !== filterFor)?.map((d) => d.id)?.[0];
-  return referenceList !== "" ? referenceList : void 0;
+var getIdReferenceFor = (formElementType, descriptors, filterFor = null) => {
+	const referenceList = descriptors?.[formElementType]?.filter((d) => d.htmlFor !== filterFor)?.map((d) => d.id)?.[0];
+	return referenceList !== "" ? referenceList : void 0;
 };
-const buildFormElementPropsFromContext = (name, disabled, readOnly, required, context) => {
-  return {
-    name: name || context?.name,
-    disabled: disabled ?? context?.disabled,
-    readOnly: readOnly ?? context?.readOnly,
-    required: required ?? context?.required,
-    status: context?.status
-  };
+var buildFormElementPropsFromContext = (name, disabled, readOnly, required, context) => {
+	return {
+		name: name || context?.name,
+		disabled: disabled ?? context?.disabled,
+		readOnly: readOnly ?? context?.readOnly,
+		required: required ?? context?.required,
+		status: context?.status
+	};
 };
-const buildAriaPropsFromContext = (props, context, isInvalid2, inputId) => {
-  const arias = {
-    "aria-labelledby": props?.["aria-labelledby"] !== void 0 ? props?.["aria-labelledby"] : getIdReferenceListFor("label", context?.descriptors, inputId),
-    "aria-describedby": props?.["aria-describedby"] !== void 0 ? props?.["aria-describedby"] : getIdReferenceListFor("description", context?.descriptors),
-    "aria-controls": props?.["aria-controls"] !== void 0 ? props?.["aria-controls"] : getIdReferenceListFor("controlled", context?.descriptors)
-  };
-  if (isInvalid2) {
-    arias["aria-invalid"] = isInvalid2;
-    arias["aria-errormessage"] = props?.["aria-errormessage"] !== void 0 ? props?.["aria-errormessage"] : getIdReferenceFor("errormessage", context?.descriptors);
-  }
-  return arias;
-};
-const isValid = (state) => state === "valid";
-const isInvalid = (state) => state === "invalid";
-export {
-  buildAriaPropsFromContext,
-  buildFormElementPropsFromContext,
-  findDescriptors,
-  getIdReferenceFor,
-  getIdReferenceListFor,
-  isInvalid,
-  isValid
+var buildAriaPropsFromContext = (props, context, isInvalid, inputId) => {
+	const arias = {
+		"aria-labelledby": props?.["aria-labelledby"] !== void 0 ? props?.["aria-labelledby"] : getIdReferenceListFor("label", context?.descriptors, inputId),
+		"aria-describedby": props?.["aria-describedby"] !== void 0 ? props?.["aria-describedby"] : getIdReferenceListFor("description", context?.descriptors),
+		"aria-controls": props?.["aria-controls"] !== void 0 ? props?.["aria-controls"] : getIdReferenceListFor("controlled", context?.descriptors)
+	};
+	if (isInvalid) {
+		arias["aria-invalid"] = isInvalid;
+		arias["aria-errormessage"] = props?.["aria-errormessage"] !== void 0 ? props?.["aria-errormessage"] : getIdReferenceFor("errormessage", context?.descriptors);
+	}
+	return arias;
 };
+var isValid = (state) => state === "valid";
+var isInvalid = (state) => state === "invalid";
+//#endregion
+export { buildAriaPropsFromContext, buildFormElementPropsFromContext, findDescriptors, isInvalid, isValid };

package/dist/GlobalActions/GlobalActions.js

@@ -1,62 +1,56 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { HvTypography } from "../Typography/Typography.js";
+import { getBreakpointStyles, useClasses } from "./GlobalActions.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, getBreakpointStyles } from "./GlobalActions.styles.js";
-import { staticClasses } from "./GlobalActions.styles.js";
-import { HvTypography } from "../Typography/Typography.js";
-const HvGlobalActions = forwardRef(function HvGlobalActions2(props, ref) {
-  const {
-    children,
-    classes: classesProp,
-    className,
-    title,
-    variant = "global",
-    backButton,
-    headingLevel,
-    position: positionProp,
-    ...others
-  } = useDefaultProps("HvGlobalActions", props);
-  const muiTheme = useTheme();
-  const { classes, cx, css } = useClasses(classesProp);
-  const isSmDown = useMediaQuery(muiTheme.breakpoints.down("sm"));
-  const isUpMd = useMediaQuery(muiTheme.breakpoints.up("md"));
-  const headingLevelToApply = headingLevel || (variant === "global" ? 1 : 2);
-  const position = positionProp || (variant === "global" ? "sticky" : "relative");
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cx(
-        classes.root,
-        {
-          [classes.positionSticky]: position === "sticky",
-          [classes.positionFixed]: position === "fixed",
-          [classes.global]: variant === "global",
-          [classes.section]: variant === "section"
-        },
-        position === "fixed" && css(getBreakpointStyles(isUpMd, isSmDown)),
-        className
-      ),
-      ...others,
-      children: /* @__PURE__ */ jsxs("div", { className: classes.wrapper, children: [
-        variant === "global" && backButton && /* @__PURE__ */ jsx("div", { className: classes.backButton, children: backButton }),
-        typeof title !== "string" ? title : /* @__PURE__ */ jsx(
-          HvTypography,
-          {
-            variant: variant === "global" ? "title3" : "title4",
-            component: `h${headingLevelToApply}`,
-            className: classes.name,
-            children: title
-          }
-        ),
-        children && /* @__PURE__ */ jsx("div", { className: classes.actions, children })
-      ] })
-    }
-  );
+//#region src/GlobalActions/GlobalActions.tsx
+/**
+* Global Actions are actions that affect the entire page they live in.
+* They should persist while scrolling down the screen.
+*
+* It uses `variant="global"` by default, rendering an `h1` element and applying sticky positioning.
+* Use `variant="section"` to group related content blocks.
+* Use it sparingly, as it introduces strong visual separation, which may not always be necessary.
+*/
+var HvGlobalActions = forwardRef(function HvGlobalActions(props, ref) {
+	const { children, classes: classesProp, className, title, variant = "global", backButton, headingLevel, position: positionProp, ...others } = useDefaultProps("HvGlobalActions", props);
+	const muiTheme = useTheme$1();
+	const { classes, cx, css } = useClasses(classesProp);
+	const isSmDown = useMediaQuery(muiTheme.breakpoints.down("sm"));
+	const isUpMd = useMediaQuery(muiTheme.breakpoints.up("md"));
+	const headingLevelToApply = headingLevel || (variant === "global" ? 1 : 2);
+	const position = positionProp || (variant === "global" ? "sticky" : "relative");
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx(classes.root, {
+			[classes.positionSticky]: position === "sticky",
+			[classes.positionFixed]: position === "fixed",
+			[classes.global]: variant === "global",
+			[classes.section]: variant === "section"
+		}, position === "fixed" && css(getBreakpointStyles(isUpMd, isSmDown)), className),
+		...others,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: classes.wrapper,
+			children: [
+				variant === "global" && backButton && /* @__PURE__ */ jsx("div", {
+					className: classes.backButton,
+					children: backButton
+				}),
+				typeof title !== "string" ? title : /* @__PURE__ */ jsx(HvTypography, {
+					variant: variant === "global" ? "title3" : "title4",
+					component: `h${headingLevelToApply}`,
+					className: classes.name,
+					children: title
+				}),
+				children && /* @__PURE__ */ jsx("div", {
+					className: classes.actions,
+					children
+				})
+			]
+		})
+	});
 });
-export {
-  HvGlobalActions,
-  staticClasses as globalActionsClasses
-};
+//#endregion
+export { HvGlobalActions };

package/dist/GlobalActions/GlobalActions.styles.js

@@ -1,79 +1,70 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvGlobalActions", {
-  root: {
-    position: "relative"
-  },
-  positionSticky: {
-    width: "100%",
-    position: "sticky"
-  },
-  positionFixed: {
-    width: "100%",
-    position: "fixed"
-  },
-  global: {
-    zIndex: `calc(${theme.zIndices.banner} - 2)`,
-    top: 0,
-    left: 0,
-    padding: theme.spacing(1, 0),
-    backdropFilter: "blur(1px)",
-    "&:before": {
-      content: "''",
-      display: "flex",
-      position: "absolute",
-      inset: 0,
-      background: theme.colors.bgPage,
-      opacity: "75%"
-    },
-    "& $wrapper": {
-      top: 0,
-      left: 0,
-      backgroundColor: theme.colors.bgContainer,
-      width: "100%",
-      borderWidth: 1,
-      borderRadius: theme.radii.round
-    }
-  },
-  section: {
-    "& $wrapper": {
-      borderTopWidth: 1,
-      paddingLeft: 0
-    }
-  },
-  wrapper: {
-    padding: theme.space.xs,
-    position: "relative",
-    display: "flex",
-    justifyContent: "flex-start",
-    alignItems: "center",
-    gap: theme.space.xs,
-    borderColor: theme.colors.border,
-    paddingLeft: theme.space.sm
-  },
-  backButton: {},
-  name: {
-    flexGrow: 1
-  },
-  actions: {
-    display: "flex",
-    alignItems: "center",
-    gap: theme.space.xs,
-    // TODO: remove in v6 in favour of consistently setting `flexGrow: 1` in a title "wrapper"
-    marginLeft: "auto"
-  }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/GlobalActions/GlobalActions.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvGlobalActions", {
+	root: { position: "relative" },
+	positionSticky: {
+		width: "100%",
+		position: "sticky"
+	},
+	positionFixed: {
+		width: "100%",
+		position: "fixed"
+	},
+	global: {
+		zIndex: `calc(${theme.zIndices.banner} - 2)`,
+		top: 0,
+		left: 0,
+		padding: theme.spacing(1, 0),
+		backdropFilter: "blur(1px)",
+		"&:before": {
+			content: "''",
+			display: "flex",
+			position: "absolute",
+			inset: 0,
+			background: theme.colors.bgPage,
+			opacity: "75%"
+		},
+		"& $wrapper": {
+			top: 0,
+			left: 0,
+			backgroundColor: theme.colors.bgContainer,
+			width: "100%",
+			borderWidth: 1,
+			borderRadius: theme.radii.round
+		}
+	},
+	section: { "& $wrapper": {
+		borderTopWidth: 1,
+		paddingLeft: 0
+	} },
+	wrapper: {
+		padding: theme.space.xs,
+		position: "relative",
+		display: "flex",
+		justifyContent: "flex-start",
+		alignItems: "center",
+		gap: theme.space.xs,
+		borderColor: theme.colors.border,
+		paddingLeft: theme.space.sm
+	},
+	backButton: {},
+	name: { flexGrow: 1 },
+	actions: {
+		display: "flex",
+		alignItems: "center",
+		gap: theme.space.xs,
+		marginLeft: "auto"
+	}
 });
-const getBreakpointStyles = (isUpMd, isSmDown) => {
-  const unit = isUpMd ? 4 : isSmDown ? 2 : 0;
-  if (!unit) return {};
-  return {
-    width: `calc(100% - 2 * ${theme.spacing(unit)})`,
-    marginLeft: theme.spacing(unit),
-    marginRight: theme.spacing(unit)
-  };
-};
-export {
-  getBreakpointStyles,
-  staticClasses,
-  useClasses
+var getBreakpointStyles = (isUpMd, isSmDown) => {
+	const unit = isUpMd ? 4 : isSmDown ? 2 : 0;
+	if (!unit) return {};
+	return {
+		width: `calc(100% - 2 * ${theme.spacing(unit)})`,
+		marginLeft: theme.spacing(unit),
+		marginRight: theme.spacing(unit)
+	};
 };
+//#endregion
+export { getBreakpointStyles, staticClasses, useClasses };