@hitachivantara/uikit-react-lab 6.1.9 → 6.1.10

package/dist/StepNavigation/StepNavigation.js

@@ -1,182 +1,139 @@
+import { HvDefaultNavigation } from "./DefaultNavigation/DefaultNavigation.js";
+import { HvSimpleNavigation } from "./SimpleNavigation/SimpleNavigation.js";
+import { useClasses } from "./StepNavigation.styles.js";
+import { HvTooltip, HvTypography, useTheme, useWidth } from "@hitachivantara/uikit-react-core";
+import { theme as theme$1 } from "@hitachivantara/uikit-styles";
 import { jsx } from "react/jsx-runtime";
 import styled from "@emotion/styled";
-import { useTheme, useWidth, HvTypography, HvTooltip } from "@hitachivantara/uikit-react-core";
-import { theme } from "@hitachivantara/uikit-styles";
-import { useClasses } from "./StepNavigation.styles.js";
-import { staticClasses } from "./StepNavigation.styles.js";
-import { TITLE_WIDTH, TITLE_MARGIN, SEPARATOR_WIDTH } from "./utils.js";
-import { HvSimpleNavigation } from "./SimpleNavigation/SimpleNavigation.js";
-import { HvDefaultNavigation } from "./DefaultNavigation/DefaultNavigation.js";
-const HvStepNavigation = ({
-  className,
-  classes: classesProp,
-  width,
-  steps,
-  stepSize,
-  showTitles,
-  type = "Default",
-  "aria-label": ariaLabel,
-  ...others
-}) => {
-  const { classes, css, cx } = useClasses(classesProp);
-  const { activeTheme } = useTheme();
-  const breakpoint = useWidth();
-  const stepSizeKey = stepSize ?? (["xs", "sm"].includes(breakpoint) ? "sm" : "md");
-  const hasTitles = showTitles ?? !["xs", "sm"].includes(breakpoint);
-  const styledLi = (containerSize) => styled("li")({
-    width: containerSize,
-    height: containerSize
-  });
-  const styledDiv = (containerSize) => styled("div")({
-    width: containerSize,
-    height: containerSize
-  });
-  const styledSeparatorElement = (title, separatorClassName, separatorHeight, separatorWidth, backgroundColor) => {
-    const widthValue = separatorWidth - 2 * 4;
-    return /* @__PURE__ */ jsx(
-      "li",
-      {
-        "aria-hidden": true,
-        className: cx(
-          css({
-            height: separatorHeight,
-            width: widthValue,
-            backgroundColor,
-            margin: `0 4px`
-          }),
-          classes.separator
-        ),
-        children: /* @__PURE__ */ jsx("div", { className: separatorClassName })
-      },
-      `separator-${title}`
-    );
-  };
-  const drawItems = ({
-    separatorValues: { minWidth, maxWidth, getColor, height },
-    stepValues: { minSize, maxSize, StepComponent }
-  }) => {
-    const items = steps.reduce(
-      (acc, { state, title, separatorClassName, ...props }, index) => {
-        const containerSize = state === "Current" ? maxSize : minSize;
-        const StepContainer = styledLi(containerSize);
-        const Step = styledDiv(Math.max(containerSize, 30));
-        const stepProps = {
-          size: stepSizeKey,
-          state,
-          title,
-          number: index + 1,
-          ...props
-        };
-        const stepElement = /* @__PURE__ */ jsx(StepContainer, { className: classes.li, children: hasTitles ? /* @__PURE__ */ jsx(
-          StepComponent,
-          {
-            "aria-label": `${title}`,
-            ...stepProps
-          },
-          `step-${title}`
-        ) : /* @__PURE__ */ jsx(
-          HvTooltip,
-          {
-            placement: "bottom",
-            title: /* @__PURE__ */ jsx(HvTypography, { children: `${index + 1}. ${title}` }),
-            children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Step, { className: classes.li, children: /* @__PURE__ */ jsx(StepComponent, { "aria-label": `${title}`, ...stepProps }) }) })
-          }
-        ) }, `step-${title}`);
-        if (index < steps.length - 1) {
-          const separatorElement = styledSeparatorElement(
-            title,
-            separatorClassName,
-            height,
-            [steps[index + 1].state, state].includes("Current") ? minWidth : maxWidth,
-            getColor(
-              steps[index + 1].state === "Disabled" ? "Disabled" : state,
-              theme
-            )
-          );
-          acc.push(stepElement, separatorElement);
-          return acc;
-        }
-        acc.push(stepElement);
-        return acc;
-      },
-      []
-    );
-    return /* @__PURE__ */ jsx("ol", { className: classes.ol, children: items });
-  };
-  const getDynamicValues = (stepsWidth) => {
-    const themeBreakpoints = activeTheme?.breakpoints.values || {};
-    const maxWidth = width?.[breakpoint] ?? Math.max(
-      Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length - TITLE_MARGIN,
-      SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth
-    );
-    const next = Object.keys(themeBreakpoints).find(
-      (_, index, self) => index - 1 >= 0 ? self[index - 1] === breakpoint : false
-    );
-    const navWidth = Math.min(
-      maxWidth,
-      next ? themeBreakpoints[next] : maxWidth
-    );
-    const titleWidth = Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);
-    const separatorWidth = Number(!hasTitles) * Math.ceil((navWidth - stepsWidth) / (steps.length - 1));
-    return { width: navWidth, titleWidth, separatorWidth };
-  };
-  const getTitles = (getTitleProps) => hasTitles ? /* @__PURE__ */ jsx("div", { className: classes.titles, children: steps.map(({ title: rawTitle, state, titleClassName }, index) => {
-    const {
-      variant = "label",
-      title = rawTitle,
-      titleWidth = 0,
-      titleDisabled = false
-    } = getTitleProps?.({
-      state,
-      rawTitle,
-      number: index + 1
-    }) ?? {};
-    return /* @__PURE__ */ jsx(
-      HvTypography,
-      {
-        variant,
-        className: cx(
-          css({
-            textAlign: "center",
-            width: titleWidth - TITLE_MARGIN,
-            marginRight: TITLE_MARGIN
-          }),
-          titleClassName
-        ),
-        disabled: titleDisabled,
-        children: title
-      },
-      title
-    );
-  }) }) : null;
-  const StepNavigation = {
-    Default: HvDefaultNavigation,
-    Simple: HvSimpleNavigation
-  }[type];
-  return /* @__PURE__ */ jsx(
-    StepNavigation,
-    {
-      numSteps: steps.length,
-      stepSize: stepSizeKey,
-      getTitles,
-      getDynamicValues,
-      className: cx(classes.root, className),
-      ...others,
-      children: ({ stepsWidth, navWidth, ...itemsProps }) => /* @__PURE__ */ jsx(
-        "nav",
-        {
-          style: {
-            width: `${navWidth}px`,
-            margin: 0
-          },
-          "aria-label": ariaLabel,
-          children: drawItems(itemsProps)
-        }
-      )
-    }
-  );
-};
-export {
-  HvStepNavigation,
-  staticClasses as stepNavigationClasses
+//#region src/StepNavigation/StepNavigation.tsx
+/**
+* Navigation page with steps.
+*
+* You need to define the `steps` displayed on the component so that itself can be drawn on the UI.
+* On each step, you need to define a `state` - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -
+* and a `title` to be shown as a tooltip or a text above of the step. You can also defined `className`, `separatorClassName`, and `titleClassName` to override the default styles.
+*
+* If the step component has titles, each one will have 215px of width by default.
+*/
+var HvStepNavigation = ({ className, classes: classesProp, width, steps, stepSize, showTitles, type = "Default", "aria-label": ariaLabel, ...others }) => {
+	const { classes, css, cx } = useClasses(classesProp);
+	const { activeTheme } = useTheme();
+	const breakpoint = useWidth();
+	const stepSizeKey = stepSize ?? (["xs", "sm"].includes(breakpoint) ? "sm" : "md");
+	const hasTitles = showTitles ?? !["xs", "sm"].includes(breakpoint);
+	const styledLi = (containerSize) => styled("li")({
+		width: containerSize,
+		height: containerSize
+	});
+	const styledDiv = (containerSize) => styled("div")({
+		width: containerSize,
+		height: containerSize
+	});
+	const styledSeparatorElement = (title, separatorClassName, separatorHeight, separatorWidth, backgroundColor) => {
+		return /* @__PURE__ */ jsx("li", {
+			"aria-hidden": true,
+			className: cx(css({
+				height: separatorHeight,
+				width: separatorWidth - 8,
+				backgroundColor,
+				margin: `0 4px`
+			}), classes.separator),
+			children: /* @__PURE__ */ jsx("div", { className: separatorClassName })
+		}, `separator-${title}`);
+	};
+	const drawItems = ({ separatorValues: { minWidth, maxWidth, getColor, height }, stepValues: { minSize, maxSize, StepComponent } }) => {
+		const items = steps.reduce((acc, { state, title, separatorClassName, ...props }, index) => {
+			const containerSize = state === "Current" ? maxSize : minSize;
+			const StepContainer = styledLi(containerSize);
+			const Step = styledDiv(Math.max(containerSize, 30));
+			const stepProps = {
+				size: stepSizeKey,
+				state,
+				title,
+				number: index + 1,
+				...props
+			};
+			const stepElement = /* @__PURE__ */ jsx(StepContainer, {
+				className: classes.li,
+				children: hasTitles ? /* @__PURE__ */ jsx(StepComponent, {
+					"aria-label": `${title}`,
+					...stepProps
+				}, `step-${title}`) : /* @__PURE__ */ jsx(HvTooltip, {
+					placement: "bottom",
+					title: /* @__PURE__ */ jsx(HvTypography, { children: `${index + 1}. ${title}` }),
+					children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Step, {
+						className: classes.li,
+						children: /* @__PURE__ */ jsx(StepComponent, {
+							"aria-label": `${title}`,
+							...stepProps
+						})
+					}) })
+				})
+			}, `step-${title}`);
+			if (index < steps.length - 1) {
+				const separatorElement = styledSeparatorElement(title, separatorClassName, height, [steps[index + 1].state, state].includes("Current") ? minWidth : maxWidth, getColor(steps[index + 1].state === "Disabled" ? "Disabled" : state, theme$1));
+				acc.push(stepElement, separatorElement);
+				return acc;
+			}
+			acc.push(stepElement);
+			return acc;
+		}, []);
+		return /* @__PURE__ */ jsx("ol", {
+			className: classes.ol,
+			children: items
+		});
+	};
+	const getDynamicValues = (stepsWidth) => {
+		const themeBreakpoints = activeTheme?.breakpoints.values || {};
+		const maxWidth = width?.[breakpoint] ?? Math.max(Number(hasTitles) * 235 * steps.length - 20, 100 * (steps.length - 1) + stepsWidth);
+		const next = Object.keys(themeBreakpoints).find((_, index, self) => index - 1 >= 0 ? self[index - 1] === breakpoint : false);
+		const navWidth = Math.min(maxWidth, next ? themeBreakpoints[next] : maxWidth);
+		return {
+			width: navWidth,
+			titleWidth: Number(hasTitles) * Math.ceil((navWidth + 20) / steps.length),
+			separatorWidth: Number(!hasTitles) * Math.ceil((navWidth - stepsWidth) / (steps.length - 1))
+		};
+	};
+	const getTitles = (getTitleProps) => hasTitles ? /* @__PURE__ */ jsx("div", {
+		className: classes.titles,
+		children: steps.map(({ title: rawTitle, state, titleClassName }, index) => {
+			const { variant = "label", title = rawTitle, titleWidth = 0, titleDisabled = false } = getTitleProps?.({
+				state,
+				rawTitle,
+				number: index + 1
+			}) ?? {};
+			return /* @__PURE__ */ jsx(HvTypography, {
+				variant,
+				className: cx(css({
+					textAlign: "center",
+					width: titleWidth - 20,
+					marginRight: 20
+				}), titleClassName),
+				disabled: titleDisabled,
+				children: title
+			}, title);
+		})
+	}) : null;
+	const StepNavigation = {
+		Default: HvDefaultNavigation,
+		Simple: HvSimpleNavigation
+	}[type];
+	return /* @__PURE__ */ jsx(StepNavigation, {
+		numSteps: steps.length,
+		stepSize: stepSizeKey,
+		getTitles,
+		getDynamicValues,
+		className: cx(classes.root, className),
+		...others,
+		children: ({ stepsWidth, navWidth, ...itemsProps }) => /* @__PURE__ */ jsx("nav", {
+			style: {
+				width: `${navWidth}px`,
+				margin: 0
+			},
+			"aria-label": ariaLabel,
+			children: drawItems(itemsProps)
+		})
+	});
 };
+//#endregion
+export { HvStepNavigation };

package/dist/StepNavigation/StepNavigation.styles.js

@@ -1,34 +1,31 @@
 import { createClasses } from "@hitachivantara/uikit-react-core";
-const { staticClasses, useClasses } = createClasses("HvStepNavigation", {
-  root: {
-    display: "flex",
-    flexDirection: "column"
-  },
-  titles: {
-    marginTop: 8,
-    display: "flex"
-  },
-  ol: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexWrap: "wrap",
-    padding: 0,
-    listStyle: "none"
-  },
-  li: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  separator: {
-    userSelect: "none",
-    "& > div": {
-      display: "flex"
-    }
-  }
+//#region src/StepNavigation/StepNavigation.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvStepNavigation", {
+	root: {
+		display: "flex",
+		flexDirection: "column"
+	},
+	titles: {
+		marginTop: 8,
+		display: "flex"
+	},
+	ol: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		flexWrap: "wrap",
+		padding: 0,
+		listStyle: "none"
+	},
+	li: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center"
+	},
+	separator: {
+		userSelect: "none",
+		"& > div": { display: "flex" }
+	}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/Wizard/Wizard.js

@@ -1,109 +1,86 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useEffect, useMemo } from "react";
 import { useClasses } from "./Wizard.styles.js";
-import { staticClasses } from "./Wizard.styles.js";
 import HvWizardContext from "./WizardContext/WizardContext.js";
+import { HvWizardActions } from "./WizardActions/WizardActions.js";
 import { HvWizardContainer } from "./WizardContainer/WizardContainer.js";
-import { HvWizardTitle } from "./WizardTitle/WizardTitle.js";
 import { HvWizardContent } from "./WizardContent/WizardContent.js";
-import { HvWizardActions } from "./WizardActions/WizardActions.js";
-const HvWizard = ({
-  className,
-  children,
-  onClose,
-  handleSubmit,
-  title,
-  open,
-  skippable = true,
-  loading = false,
-  hasSummary = false,
-  summaryContent,
-  labels = {
-    cancel: "Cancel",
-    next: "Next",
-    previous: "Previous",
-    skip: "Skip",
-    submit: "Submit",
-    summary: "Summary"
-  },
-  fixedHeight = false,
-  customStep,
-  classes: classesProp,
-  ...others
-}) => {
-  const { classes, cx } = useClasses(classesProp);
-  const [context, setContext] = useState({});
-  const [summary, setSummary] = useState(false);
-  const [tab, setTab] = useState(0);
-  const handleClose = useCallback(
-    (evt, reason) => {
-      if (reason !== "backdropClick") {
-        onClose?.(evt, reason);
-      }
-    },
-    [onClose]
-  );
-  useEffect(() => {
-    return () => {
-      if (!open) {
-        setContext(
-          (c) => Object.entries(c).reduce((acc, [key, child]) => {
-            acc[+key] = {
-              ...child,
-              touched: false
-            };
-            return acc;
-          }, {})
-        );
-        setTab(0);
-      }
-    };
-  }, [open]);
-  const value = useMemo(
-    () => ({ context, setContext, summary, setSummary, tab, setTab }),
-    [context, setContext, summary, setSummary, tab, setTab]
-  );
-  return /* @__PURE__ */ jsx(HvWizardContext.Provider, { value, children: /* @__PURE__ */ jsxs(
-    HvWizardContainer,
-    {
-      className: cx(classes.root, className),
-      onClose: handleClose,
-      open,
-      ...others,
-      children: [
-        /* @__PURE__ */ jsx(
-          HvWizardTitle,
-          {
-            title,
-            hasSummary,
-            labels,
-            customStep
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          HvWizardContent,
-          {
-            loading,
-            fixedHeight,
-            summaryContent,
-            children
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          HvWizardActions,
-          {
-            loading,
-            skippable,
-            labels,
-            handleClose,
-            handleSubmit
-          }
-        )
-      ]
-    }
-  ) });
-};
-export {
-  HvWizard,
-  staticClasses as wizardClasses
+import { HvWizardTitle } from "./WizardTitle/WizardTitle.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Wizard/Wizard.tsx
+var HvWizard = ({ className, children, onClose, handleSubmit, title, open, skippable = true, loading = false, hasSummary = false, summaryContent, labels = {
+	cancel: "Cancel",
+	next: "Next",
+	previous: "Previous",
+	skip: "Skip",
+	submit: "Submit",
+	summary: "Summary"
+}, fixedHeight = false, customStep, classes: classesProp, ...others }) => {
+	const { classes, cx } = useClasses(classesProp);
+	const [context, setContext] = useState({});
+	const [summary, setSummary] = useState(false);
+	const [tab, setTab] = useState(0);
+	const handleClose = useCallback((evt, reason) => {
+		if (reason !== "backdropClick") onClose?.(evt, reason);
+	}, [onClose]);
+	useEffect(() => {
+		return () => {
+			if (!open) {
+				setContext((c) => Object.entries(c).reduce((acc, [key, child]) => {
+					acc[+key] = {
+						...child,
+						touched: false
+					};
+					return acc;
+				}, {}));
+				setTab(0);
+			}
+		};
+	}, [open]);
+	const value = useMemo(() => ({
+		context,
+		setContext,
+		summary,
+		setSummary,
+		tab,
+		setTab
+	}), [
+		context,
+		setContext,
+		summary,
+		setSummary,
+		tab,
+		setTab
+	]);
+	return /* @__PURE__ */ jsx(HvWizardContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsxs(HvWizardContainer, {
+			className: cx(classes.root, className),
+			onClose: handleClose,
+			open,
+			...others,
+			children: [
+				/* @__PURE__ */ jsx(HvWizardTitle, {
+					title,
+					hasSummary,
+					labels,
+					customStep
+				}),
+				/* @__PURE__ */ jsx(HvWizardContent, {
+					loading,
+					fixedHeight,
+					summaryContent,
+					children
+				}),
+				/* @__PURE__ */ jsx(HvWizardActions, {
+					loading,
+					skippable,
+					labels,
+					handleClose,
+					handleSubmit
+				})
+			]
+		})
+	});
 };
+//#endregion
+export { HvWizard };

package/dist/Wizard/Wizard.styles.js

@@ -1,8 +1,5 @@
 import { createClasses } from "@hitachivantara/uikit-react-core";
-const { staticClasses, useClasses } = createClasses("HvWizard", {
-  root: {}
-});
-export {
-  staticClasses,
-  useClasses
-};
+//#region src/Wizard/Wizard.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvWizard", { root: {} });
+//#endregion
+export { staticClasses, useClasses };