@hitachivantara/uikit-react-lab 5.46.13 → 6.0.0-next.1

package/dist/cjs/StepNavigation/SimpleNavigation/Dot/Dot.styles.cjs

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const { staticClasses, useClasses } = uikitReactCore.createClasses("HvDot", {
-  root: {
-    borderRadius: uikitReactCore.theme.radii.full,
-    zIndex: 1,
-    width: "var(--dotSize)",
-    height: "var(--dotSize)",
-    "&,:hover,:disabled": {
-      backgroundColor: "var(--dotColor)"
-    }
-  },
-  active: {},
-  ghostDisabled: {}
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/StepNavigation/SimpleNavigation/SimpleNavigation.cjs

@@ -1,52 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const utils = require("./utils.cjs");
-const Dot = require("./Dot/Dot.cjs");
-const HvSimpleNavigation = ({
-  numSteps,
-  stepSize = "sm",
-  getTitles,
-  getDynamicValues,
-  children,
-  ...others
-}) => {
-  const { activeTheme } = uikitReactCore.useTheme();
-  const dotSize = utils.dotSizes[stepSize];
-  const StepComponent = Dot.HvDot;
-  const stepsWidth = (numSteps + 0.5) * dotSize;
-  const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);
-  const maxWidth = Math.max(titleWidth - dotSize, separatorWidth);
-  const minWidth = Math.max(titleWidth - dotSize * 1.25, separatorWidth);
-  const Steps = children;
-  const titles = getTitles(({ rawTitle, number }) => ({
-    variant: "label",
-    title: `${number}. ${rawTitle}`,
-    titleWidth
-  }));
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...others, children: [
-    titles,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Steps,
-      {
-        ...{
-          stepsWidth,
-          navWidth: width,
-          separatorValues: {
-            minWidth,
-            maxWidth,
-            getColor: utils.getColor,
-            height: activeTheme?.stepNavigation.simpleSeparatorHeight || 0
-          },
-          stepValues: {
-            minSize: dotSize,
-            maxSize: 1.5 * dotSize,
-            StepComponent
-          }
-        }
-      }
-    )
-  ] });
-};
-exports.HvSimpleNavigation = HvSimpleNavigation;

package/dist/cjs/StepNavigation/SimpleNavigation/utils.cjs

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const dotSizes = {
-  xs: 8,
-  sm: 10,
-  md: 12,
-  lg: 14,
-  xl: 16
-};
-const getColor = (state) => state === "Disabled" ? uikitStyles.theme.colors.textDisabled : uikitStyles.theme.colors.text;
-exports.dotSizes = dotSizes;
-exports.getColor = getColor;

package/dist/cjs/StepNavigation/StepNavigation.cjs

@@ -1,188 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const styled = require("@emotion/styled");
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const StepNavigation_styles = require("./StepNavigation.styles.cjs");
-const utils = require("./utils.cjs");
-const SimpleNavigation = require("./SimpleNavigation/SimpleNavigation.cjs");
-const DefaultNavigation = require("./DefaultNavigation/DefaultNavigation.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
-const HvStepNavigation = ({
-  className,
-  classes: classesProp,
-  width,
-  steps,
-  stepSize,
-  showTitles,
-  type = "Default",
-  "aria-label": ariaLabel,
-  ...others
-}) => {
-  const { classes, css, cx } = StepNavigation_styles.useClasses(classesProp);
-  const { activeTheme } = uikitReactCore.useTheme();
-  const breakpoint = uikitReactCore.useWidth();
-  const stepSizeKey = stepSize ?? (["xs", "sm"].includes(breakpoint) ? "sm" : "md");
-  const hasTitles = showTitles ?? !["xs", "sm"].includes(breakpoint);
-  const styledLi = (containerSize) => styled__default.default("li")({
-    width: containerSize,
-    height: containerSize
-  });
-  const styledDiv = (containerSize) => styled__default.default("div")({
-    width: containerSize,
-    height: containerSize
-  });
-  const styledSeparatorElement = (title, separatorClassName, separatorHeight, separatorWidth, backgroundColor) => {
-    const widthValue = separatorWidth - 2 * Number(
-      (activeTheme?.stepNavigation.separatorMargin || "0px").replace(
-        "px",
-        ""
-      )
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "li",
-      {
-        "aria-hidden": true,
-        className: cx(
-          css({
-            height: separatorHeight,
-            width: widthValue,
-            backgroundColor,
-            margin: `0 ${uikitStyles.theme.stepNavigation.separatorMargin}`
-          }),
-          classes.separator
-        ),
-        children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(StepContainer, { className: classes.li, children: hasTitles ? /* @__PURE__ */ jsxRuntime.jsx(
-          StepComponent,
-          {
-            "aria-label": `${title}`,
-            ...stepProps
-          },
-          `step-${title}`
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          uikitReactCore.HvTooltip,
-          {
-            placement: "bottom",
-            title: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: `${index + 1}. ${title}` }),
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Step, { className: classes.li, children: /* @__PURE__ */ jsxRuntime.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,
-              uikitStyles.theme
-            )
-          );
-          acc.push(stepElement, separatorElement);
-          return acc;
-        }
-        acc.push(stepElement);
-        return acc;
-      },
-      []
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: classes.ol, children: items });
-  };
-  const getDynamicValues = (stepsWidth) => {
-    const themeBreakpoints = activeTheme?.breakpoints.values || {};
-    const maxWidth = width?.[breakpoint] ?? Math.max(
-      Number(hasTitles) * (utils.TITLE_WIDTH + utils.TITLE_MARGIN) * steps.length - utils.TITLE_MARGIN,
-      utils.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 + utils.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-      uikitReactCore.HvTypography,
-      {
-        variant,
-        className: cx(
-          css({
-            textAlign: "center",
-            width: titleWidth - utils.TITLE_MARGIN,
-            marginRight: utils.TITLE_MARGIN
-          }),
-          titleClassName
-        ),
-        disabled: titleDisabled,
-        children: title
-      },
-      title
-    );
-  }) }) : null;
-  const StepNavigation = {
-    Default: DefaultNavigation.HvDefaultNavigation,
-    Simple: SimpleNavigation.HvSimpleNavigation
-  }[type];
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    StepNavigation,
-    {
-      numSteps: steps.length,
-      stepSize: stepSizeKey,
-      getTitles,
-      getDynamicValues,
-      className: cx(classes.root, className),
-      ...others,
-      children: ({ stepsWidth, navWidth, ...itemsProps }) => /* @__PURE__ */ jsxRuntime.jsx(
-        "nav",
-        {
-          style: {
-            width: `${navWidth}px`,
-            margin: 0
-          },
-          "aria-label": ariaLabel,
-          children: drawItems(itemsProps)
-        }
-      )
-    }
-  );
-};
-exports.stepNavigationClasses = StepNavigation_styles.staticClasses;
-exports.HvStepNavigation = HvStepNavigation;

package/dist/cjs/StepNavigation/StepNavigation.styles.cjs

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const { staticClasses, useClasses } = uikitReactCore.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"
-    }
-  }
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/StepNavigation/utils.cjs

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const TITLE_MARGIN = 20;
-const TITLE_WIDTH = 215;
-const SEPARATOR_WIDTH = 100;
-exports.SEPARATOR_WIDTH = SEPARATOR_WIDTH;
-exports.TITLE_MARGIN = TITLE_MARGIN;
-exports.TITLE_WIDTH = TITLE_WIDTH;

package/dist/cjs/Wizard/Wizard.cjs

@@ -1,108 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const Wizard_styles = require("./Wizard.styles.cjs");
-const WizardContext = require("./WizardContext/WizardContext.cjs");
-const WizardContainer = require("./WizardContainer/WizardContainer.cjs");
-const WizardTitle = require("./WizardTitle/WizardTitle.cjs");
-const WizardContent = require("./WizardContent/WizardContent.cjs");
-const WizardActions = require("./WizardActions/WizardActions.cjs");
-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 } = Wizard_styles.useClasses(classesProp);
-  const [context, setContext] = react.useState({});
-  const [summary, setSummary] = react.useState(false);
-  const [tab, setTab] = react.useState(0);
-  const handleClose = react.useCallback(
-    (evt, reason) => {
-      if (reason !== "backdropClick") {
-        onClose?.(evt, reason);
-      }
-    },
-    [onClose]
-  );
-  react.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 = react.useMemo(
-    () => ({ context, setContext, summary, setSummary, tab, setTab }),
-    [context, setContext, summary, setSummary, tab, setTab]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(WizardContext.default.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    WizardContainer.HvWizardContainer,
-    {
-      className: cx(classes.root, className),
-      handleClose,
-      open,
-      ...others,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          WizardTitle.HvWizardTitle,
-          {
-            title,
-            hasSummary,
-            labels,
-            customStep
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          WizardContent.HvWizardContent,
-          {
-            loading,
-            fixedHeight,
-            summaryContent,
-            children
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          WizardActions.HvWizardActions,
-          {
-            loading,
-            skippable,
-            labels,
-            handleClose,
-            handleSubmit
-          }
-        )
-      ]
-    }
-  ) });
-};
-exports.wizardClasses = Wizard_styles.staticClasses;
-exports.HvWizard = HvWizard;

package/dist/cjs/Wizard/Wizard.styles.cjs

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const { staticClasses, useClasses } = uikitReactCore.createClasses("HvWizard", {
-  root: {}
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Wizard/WizardActions/WizardActions.cjs

@@ -1,132 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const WizardActions_styles = require("./WizardActions.styles.cjs");
-const WizardContext = require("../WizardContext/WizardContext.cjs");
-const HvWizardActions = ({
-  classes: classesProp,
-  handleClose,
-  handleSubmit,
-  loading = false,
-  skippable = false,
-  labels = {
-    cancel: "Cancel",
-    next: "Next",
-    previous: "Previous",
-    skip: "Skip",
-    submit: "Submit"
-  },
-  handleBeforeNext,
-  handleBeforePrevious
-}) => {
-  const { classes, css, cx } = WizardActions_styles.useClasses(classesProp);
-  const { context, setContext, tab, setTab } = react.useContext(WizardContext.default);
-  const [pages, setPages] = react.useState(0);
-  const [canSubmit, setCanSubmit] = react.useState(false);
-  react.useEffect(() => {
-    const contextEntries = Object.entries(context);
-    if (contextEntries.length) {
-      setPages(contextEntries.length);
-      const validWizard = Object.entries(context).every(
-        ([, value]) => value?.valid
-      );
-      if (validWizard !== canSubmit) {
-        setCanSubmit(validWizard);
-      }
-    }
-  }, [context, canSubmit, setCanSubmit, setPages]);
-  const lastPage = pages - 1;
-  const isLastPage = tab >= lastPage;
-  const handleSkip = react.useCallback(() => {
-    setContext(
-      (c) => Object.entries(c).reduce((acc, [key, child]) => {
-        acc[+key] = {
-          ...child,
-          valid: child?.valid !== false
-        };
-        return acc;
-      }, {})
-    );
-    setTab(lastPage);
-  }, [setTab, lastPage, setContext]);
-  const handleSubmitInternal = react.useCallback(
-    () => handleSubmit(context),
-    [handleSubmit, context]
-  );
-  const nextDisabled = react.useMemo(() => {
-    if (loading) return true;
-    return !skippable && !context?.[tab]?.valid;
-  }, [context, loading, skippable, tab]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvDialogActions, { className: classes.actionsContainer, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      uikitReactCore.HvButton,
-      {
-        variant: "secondaryGhost",
-        onClick: handleClose,
-        className: classes.buttonWidth,
-        children: labels.cancel ?? "Cancel"
-      }
-    ),
-    skippable && /* @__PURE__ */ jsxRuntime.jsx(
-      uikitReactCore.HvButton,
-      {
-        variant: "secondaryGhost",
-        disabled: isLastPage,
-        className: classes.buttonWidth,
-        onClick: handleSkip,
-        children: labels.skip ?? "Skip"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: css({ flex: 1 }), children: " " }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.buttonsContainer, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        uikitReactCore.HvButton,
-        {
-          variant: "secondaryGhost",
-          className: classes.buttonWidth,
-          disabled: tab <= 0,
-          onClick: () => {
-            if (handleBeforePrevious) {
-              handleBeforePrevious();
-            } else {
-              setTab((t) => t - 1);
-            }
-          },
-          startIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, {}),
-          children: labels.previous ?? "Previous"
-        }
-      ),
-      isLastPage ? /* @__PURE__ */ jsxRuntime.jsx(
-        uikitReactCore.HvButton,
-        {
-          variant: "primary",
-          className: classes.buttonWidth,
-          disabled: loading || !canSubmit,
-          onClick: handleSubmitInternal,
-          children: labels.submit ?? "Submit"
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(
-        uikitReactCore.HvButton,
-        {
-          variant: "secondaryGhost",
-          className: cx(classes.buttonWidth, classes.buttonSpacing),
-          onClick: () => {
-            if (handleBeforeNext) {
-              handleBeforeNext();
-            } else {
-              setTab((t) => t + 1);
-            }
-          },
-          disabled: nextDisabled,
-          endIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, {}),
-          children: labels.next ?? "Next"
-        }
-      )
-    ] })
-  ] });
-};
-exports.wizardActionsClasses = WizardActions_styles.staticClasses;
-exports.HvWizardActions = HvWizardActions;

package/dist/cjs/Wizard/WizardActions/WizardActions.styles.cjs

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const { staticClasses, useClasses } = uikitReactCore.createClasses("HvWizardActions", {
-  actionsContainer: {},
-  buttonWidth: {
-    width: 120,
-    "& span": {
-      whiteSpace: "normal",
-      lineHeight: uikitStyles.theme.lineHeights.sm
-    }
-  },
-  buttonsContainer: {
-    display: "flex",
-    alignItems: "center",
-    gap: uikitStyles.theme.space.xs
-  },
-  buttonSpacing: {}
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Wizard/WizardContainer/WizardContainer.cjs

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const WizardContainer_styles = require("./WizardContainer.styles.cjs");
-const HvWizardContainer = (props) => {
-  const {
-    classes: classesProp,
-    children,
-    handleClose,
-    ...others
-  } = uikitReactCore.useDefaultProps("HvWizardContainer", props);
-  const { classes } = WizardContainer_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    uikitReactCore.HvDialog,
-    {
-      classes: {
-        root: classes.root,
-        closeButton: classes.closeButton,
-        paper: classes.paper
-      },
-      onClose: handleClose,
-      fullWidth: true,
-      maxWidth: "lg",
-      ...others,
-      children
-    }
-  );
-};
-exports.wizardContainerClasses = WizardContainer_styles.staticClasses;
-exports.HvWizardContainer = HvWizardContainer;

package/dist/cjs/Wizard/WizardContainer/WizardContainer.styles.cjs

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const { staticClasses, useClasses } = uikitReactCore.createClasses(
-  "HvWizardContainer",
-  {
-    root: {},
-    paper: {},
-    closeButton: {
-      display: "none"
-    }
-  }
-);
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;