@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/ListContainer/ListItem/ListItem.styles.js

@@ -1,80 +1,59 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../../utils/focusUtils.js";
-const { staticClasses, useClasses } = createClasses("HvListItem", {
-  root: {
-    ...theme.typography.body,
-    padding: 0,
-    display: "block",
-    height: "32px",
-    lineHeight: "32px",
-    listStyleType: "none",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    position: "relative",
-    alignContent: "center",
-    "&:not(:last-child)": {
-      marginBottom: "8px"
-    },
-    "&$condensed": {
-      marginBottom: 0
-    },
-    "&.HvIsFocused:focus-visible": {
-      ...outlineStyles,
-      backgroundColor: theme.colors.bgPageSecondary,
-      zIndex: 2
-    }
-  },
-  focus: {
-    "&:focus-visible": {
-      backgroundColor: theme.colors.bgPageSecondary,
-      zIndex: 2
-    }
-  },
-  gutters: {
-    padding: `0 ${theme.space.xs}`,
-    ":has($startAdornment)": {
-      paddingLeft: 0
-    },
-    ":has($endAdornment)": {
-      paddingRight: 0
-    }
-  },
-  condensed: {},
-  interactive: {
-    cursor: "pointer",
-    "&:not($disabled):not($selected):hover": {
-      backgroundColor: theme.colors.bgHover
-    },
-    "&$disabled": {
-      cursor: "not-allowed"
-    }
-  },
-  selected: { backgroundColor: theme.colors.bgHover },
-  disabled: {
-    color: theme.colors.textDisabled,
-    backgroundColor: theme.colors.bgDisabled
-  },
-  startAdornment: {
-    float: "left"
-  },
-  endAdornment: {
-    float: "right"
-  },
-  separator: {
-    height: 1,
-    backgroundColor: theme.colors.border,
-    margin: `${theme.space.xs} calc(${theme.space.sm} * -1)`,
-    border: "none",
-    padding: 0,
-    listStyleType: "none",
-    "&:last-child": {
-      display: "none"
-    }
-  }
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/ListContainer/ListItem/ListItem.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvListItem", {
+	root: {
+		...theme.typography.body,
+		padding: 0,
+		display: "block",
+		height: "32px",
+		lineHeight: "32px",
+		listStyleType: "none",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+		position: "relative",
+		alignContent: "center",
+		"&:not(:last-child)": { marginBottom: "8px" },
+		"&$condensed": { marginBottom: 0 },
+		"&.HvIsFocused:focus-visible": {
+			...outlineStyles,
+			backgroundColor: theme.colors.bgPageSecondary,
+			zIndex: 2
+		}
+	},
+	focus: { "&:focus-visible": {
+		backgroundColor: theme.colors.bgPageSecondary,
+		zIndex: 2
+	} },
+	gutters: {
+		padding: `0 ${theme.space.xs}`,
+		":has($startAdornment)": { paddingLeft: 0 },
+		":has($endAdornment)": { paddingRight: 0 }
+	},
+	condensed: {},
+	interactive: {
+		cursor: "pointer",
+		"&:not($disabled):not($selected):hover": { backgroundColor: theme.colors.bgHover },
+		"&$disabled": { cursor: "not-allowed" }
+	},
+	selected: { backgroundColor: theme.colors.bgHover },
+	disabled: {
+		color: theme.colors.textDisabled,
+		backgroundColor: theme.colors.bgDisabled
+	},
+	startAdornment: { float: "left" },
+	endAdornment: { float: "right" },
+	separator: {
+		height: 1,
+		backgroundColor: theme.colors.border,
+		margin: `${theme.space.xs} calc(${theme.space.sm} * -1)`,
+		border: "none",
+		padding: 0,
+		listStyleType: "none",
+		"&:last-child": { display: "none" }
+	}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/Loading/Loading.js

@@ -1,49 +1,34 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
-import { getColor } from "@hitachivantara/uikit-styles";
 import { range } from "../utils/helpers.js";
 import { useClasses } from "./Loading.styles.js";
-import { staticClasses } from "./Loading.styles.js";
-const HvLoading = forwardRef(function HvLoading2(props, ref) {
-  const {
-    color,
-    hidden,
-    small,
-    label,
-    classes: classesProp,
-    style,
-    className,
-    ...others
-  } = useDefaultProps("HvLoading", props);
-  const { classes, cx } = useClasses(classesProp);
-  const size = small ? "small" : "regular";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      hidden: !!hidden,
-      "data-size": size,
-      style: mergeStyles(style, {
-        color: getColor(color, small ? "text" : "brand"),
-        "--customColor": getColor(color)
-      }),
-      className: cx(
-        classes.root,
-        {
-          [classes.hidden]: hidden
-        },
-        className
-      ),
-      ...others,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: classes.barContainer, children: range(3).map((e) => /* @__PURE__ */ jsx("div", { className: classes.loadingBar }, e)) }),
-        label && /* @__PURE__ */ jsx("div", { className: classes.label, children: label })
-      ]
-    }
-  );
+import { getColor } from "@hitachivantara/uikit-styles";
+import { mergeStyles, useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Loading/Loading.tsx
+/**
+* Loading provides feedback about a process that is taking place in the application.
+*/
+var HvLoading = forwardRef(function HvLoading(props, ref) {
+	const { color, hidden, small, label, classes: classesProp, style, className, ...others } = useDefaultProps("HvLoading", props);
+	const { classes, cx } = useClasses(classesProp);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		hidden: !!hidden,
+		"data-size": small ? "small" : "regular",
+		style: mergeStyles(style, {
+			color: getColor(color, small ? "text" : "brand"),
+			"--customColor": getColor(color)
+		}),
+		className: cx(classes.root, { [classes.hidden]: hidden }, className),
+		...others,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: classes.barContainer,
+			children: range(3).map((e) => /* @__PURE__ */ jsx("div", { className: classes.loadingBar }, e))
+		}), label && /* @__PURE__ */ jsx("div", {
+			className: classes.label,
+			children: label
+		})]
+	});
 });
-export {
-  HvLoading,
-  staticClasses as loadingClasses
-};
+//#endregion
+export { HvLoading };

package/dist/Loading/Loading.styles.js

@@ -1,50 +1,43 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvLoading", {
-  root: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: theme.space.xs,
-    "&[data-size=small]": {
-      "--bar-size": "2px",
-      "--size": "18px",
-      "--height": "40%"
-    }
-  },
-  barContainer: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-around",
-    width: "var(--size, 30px)",
-    height: "var(--size, 30px)"
-  },
-  loadingBar: {
-    backgroundColor: "currentcolor",
-    display: "inline-block",
-    animation: "loading 1s ease-in-out infinite",
-    // TODO: make this the default when it has better support
-    // width: "round(up, 0.11em, 2px)",
-    width: "var(--bar-size, 4px)",
-    height: "100%",
-    "@keyframes loading": {
-      "50%": {
-        height: "var(--height, 60%)",
-        backgroundColor: `var(--customColor, ${theme.colors.text})`
-      }
-    },
-    ":nth-of-type(2)": { animationDelay: "0.22s" },
-    ":nth-of-type(3)": { animationDelay: "0.44s" }
-  },
-  label: {
-    ...theme.typography.caption1
-  },
-  overlay: {},
-  blur: {},
-  hidden: { display: "none" }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Loading/Loading.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvLoading", {
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: theme.space.xs,
+		"&[data-size=small]": {
+			"--bar-size": "2px",
+			"--size": "18px",
+			"--height": "40%"
+		}
+	},
+	barContainer: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-around",
+		width: "var(--size, 30px)",
+		height: "var(--size, 30px)"
+	},
+	loadingBar: {
+		backgroundColor: "currentcolor",
+		display: "inline-block",
+		animation: "loading 1s ease-in-out infinite",
+		width: "var(--bar-size, 4px)",
+		height: "100%",
+		"@keyframes loading": { "50%": {
+			height: "var(--height, 60%)",
+			backgroundColor: `var(--customColor, ${theme.colors.text})`
+		} },
+		":nth-of-type(2)": { animationDelay: "0.22s" },
+		":nth-of-type(3)": { animationDelay: "0.44s" }
+	},
+	label: { ...theme.typography.caption1 },
+	overlay: {},
+	blur: {},
+	hidden: { display: "none" }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/LoadingContainer/LoadingContainer.js

@@ -1,42 +1,36 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
-import { useClasses } from "./LoadingContainer.styles.js";
-import { staticClasses } from "./LoadingContainer.styles.js";
 import { HvLoading } from "../Loading/Loading.js";
-const HvLoadingContainer = forwardRef(function HvLoadingContainer2(props, ref) {
-  const {
-    children,
-    className,
-    classes: classesProp,
-    hidden,
-    small,
-    label,
-    "aria-label": ariaLabelProp,
-    opacity,
-    ...others
-  } = useDefaultProps("HvLoadingContainer", props);
-  const { classes, cx } = useClasses(classesProp);
-  const ariaLabel = ariaLabelProp || typeof label === "string" && label || "Loading";
-  return /* @__PURE__ */ jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
-    /* @__PURE__ */ jsx(
-      HvLoading,
-      {
-        className: classes.loading,
-        role: "progressbar",
-        small,
-        label,
-        hidden,
-        "aria-label": ariaLabel,
-        style: mergeStyles(void 0, {
-          "--opacity": opacity && `${opacity * 100}%`
-        })
-      }
-    ),
-    children
-  ] });
+import { useClasses } from "./LoadingContainer.styles.js";
+import { mergeStyles, useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/LoadingContainer/LoadingContainer.tsx
+/**
+* A component that wraps `children` with an `HvLoading` component and
+* and an overlay background with opacity.
+*
+* @example
+* <HvLoadingContainer label="Loading..." hidden={!isLoading}>
+*  <MyComponent>
+* </HvLoadingContainer>
+* */
+var HvLoadingContainer = forwardRef(function HvLoadingContainer(props, ref) {
+	const { children, className, classes: classesProp, hidden, small, label, "aria-label": ariaLabelProp, opacity, ...others } = useDefaultProps("HvLoadingContainer", props);
+	const { classes, cx } = useClasses(classesProp);
+	const ariaLabel = ariaLabelProp || typeof label === "string" && label || "Loading";
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx(classes.root, className),
+		...others,
+		children: [/* @__PURE__ */ jsx(HvLoading, {
+			className: classes.loading,
+			role: "progressbar",
+			small,
+			label,
+			hidden,
+			"aria-label": ariaLabel,
+			style: mergeStyles(void 0, { "--opacity": opacity && `${opacity * 100}%` })
+		}), children]
+	});
 });
-export {
-  HvLoadingContainer,
-  staticClasses as loadingContainerClasses
-};
+//#endregion
+export { HvLoadingContainer };

package/dist/LoadingContainer/LoadingContainer.styles.js

@@ -1,20 +1,19 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvLoadingContainer", {
-  root: {
-    position: "relative",
-    height: "inherit"
-  },
-  loading: {
-    position: "absolute",
-    userSelect: "none",
-    inset: 0,
-    zIndex: theme.zIndices.overlay,
-    transition: "background-color .2s ease",
-    backgroundColor: theme.alpha("bgContainer", "var(--opacity, 80%)")
-  }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/LoadingContainer/LoadingContainer.styles.ts
+var { staticClasses, useClasses } = createClasses("HvLoadingContainer", {
+	root: {
+		position: "relative",
+		height: "inherit"
+	},
+	loading: {
+		position: "absolute",
+		userSelect: "none",
+		inset: 0,
+		zIndex: theme.zIndices.overlay,
+		transition: "background-color .2s ease",
+		backgroundColor: theme.alpha("bgContainer", "var(--opacity, 80%)")
+	}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/Login/Login.js

@@ -1,31 +1,24 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./Login.styles.js";
-import { staticClasses } from "./Login.styles.js";
-const HvLogin = forwardRef(function HvLogin2(props, ref) {
-  const {
-    className,
-    classes: classesProp,
-    children,
-    background,
-    ...others
-  } = useDefaultProps("HvLogin", props);
-  const { classes, cx } = useClasses(classesProp);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cx(classes.root, className),
-      style: {
-        backgroundImage: background && `url(${background})`
-      },
-      ...others,
-      children: /* @__PURE__ */ jsx("div", { className: classes.formContainer, children })
-    }
-  );
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Login/Login.tsx
+/**
+* Container layout for the login form.
+*/
+var HvLogin = forwardRef(function HvLogin(props, ref) {
+	const { className, classes: classesProp, children, background, ...others } = useDefaultProps("HvLogin", props);
+	const { classes, cx } = useClasses(classesProp);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx(classes.root, className),
+		style: { backgroundImage: background && `url(${background})` },
+		...others,
+		children: /* @__PURE__ */ jsx("div", {
+			className: classes.formContainer,
+			children
+		})
+	});
 });
-export {
-  HvLogin,
-  staticClasses as loginClasses
-};
+//#endregion
+export { HvLogin };

package/dist/Login/Login.styles.js

@@ -1,23 +1,22 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvLogin", {
-  root: {
-    backgroundRepeat: "no-repeat",
-    backgroundPosition: "bottom",
-    backgroundSize: "cover",
-    width: "100%",
-    height: "100%",
-    padding: 0,
-    margin: "-1px 0 0 0"
-  },
-  formContainer: {
-    background: theme.colors.bgPage,
-    marginLeft: "auto",
-    maxWidth: 500,
-    height: "100%"
-  }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Login/Login.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvLogin", {
+	root: {
+		backgroundRepeat: "no-repeat",
+		backgroundPosition: "bottom",
+		backgroundSize: "cover",
+		width: "100%",
+		height: "100%",
+		padding: 0,
+		margin: "-1px 0 0 0"
+	},
+	formContainer: {
+		background: theme.colors.bgPage,
+		marginLeft: "auto",
+		maxWidth: 500,
+		height: "100%"
+	}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/MultiButton/MultiButton.js

@@ -1,61 +1,43 @@
-import { jsx } from "react/jsx-runtime";
-import { useMemo, Children, isValidElement, cloneElement } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./MultiButton.styles.js";
-import { staticClasses } from "./MultiButton.styles.js";
-const HvMultiButton = (props) => {
-  const {
-    className,
-    children,
-    classes: classesProp,
-    disabled = false,
-    vertical = false,
-    variant = "secondarySubtle",
-    size,
-    split,
-    ...others
-  } = useDefaultProps("HvMultiButton", props);
-  const { classes, cx } = useClasses(classesProp);
-  const buttons = useMemo(() => {
-    const btns = [];
-    Children.forEach(children, (child) => {
-      if (child && isValidElement(child)) {
-        btns.push(child);
-      }
-    });
-    return btns;
-  }, [children]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cx(
-        classes.root,
-        {
-          [classes.multiple]: !split,
-          [classes.vertical]: !split && vertical,
-          [classes.splitGroup]: split,
-          [classes.splitGroupDisabled]: split && disabled
-        },
-        className
-      ),
-      ...others,
-      children: buttons.map((child, index) => {
-        return cloneElement(child, {
-          key: index,
-          variant,
-          disabled: disabled || child.props.disabled,
-          size,
-          className: cx(classes.button, child.props.className, {
-            [classes.firstButton]: index === 0,
-            [classes.lastButton]: index === buttons.length - 1,
-            [classes.selected]: child.props.selected
-          })
-        });
-      })
-    }
-  );
-};
-export {
-  HvMultiButton,
-  staticClasses as multiButtonClasses
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { Children, cloneElement, isValidElement, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/MultiButton/MultiButton.tsx
+/**
+* Multi-buttons are grouped sets of buttons displayed horizontally or vertically in the same container.
+*/
+var HvMultiButton = (props) => {
+	const { className, children, classes: classesProp, disabled = false, vertical = false, variant = "secondarySubtle", size, split, ...others } = useDefaultProps("HvMultiButton", props);
+	const { classes, cx } = useClasses(classesProp);
+	const buttons = useMemo(() => {
+		const btns = [];
+		Children.forEach(children, (child) => {
+			if (child && isValidElement(child)) btns.push(child);
+		});
+		return btns;
+	}, [children]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(classes.root, {
+			[classes.multiple]: !split,
+			[classes.vertical]: !split && vertical,
+			[classes.splitGroup]: split,
+			[classes.splitGroupDisabled]: split && disabled
+		}, className),
+		...others,
+		children: buttons.map((child, index) => {
+			return cloneElement(child, {
+				key: index,
+				variant,
+				disabled: disabled || child.props.disabled,
+				size,
+				className: cx(classes.button, child.props.className, {
+					[classes.firstButton]: index === 0,
+					[classes.lastButton]: index === buttons.length - 1,
+					[classes.selected]: child.props.selected
+				})
+			});
+		})
+	});
 };
+//#endregion
+export { HvMultiButton };