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

package/dist/cjs/Flow/nodes/StickyNode.cjs

@@ -1,439 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const css = require("@emotion/css");
-const material = require("@mui/material");
-const reactflow = require("reactflow");
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const defaultData = {
-  title: "Sticky Note",
-  backgroundColor: uikitReactCore.theme.colors.warningSubtle,
-  borderColor: uikitReactCore.theme.colors.warningSubtle,
-  textColor: uikitReactCore.theme.colors.text,
-  hasShadow: true,
-  bold: false,
-  italic: false,
-  fontSize: 14,
-  expanded: true,
-  visible: true
-};
-const classes = {
-  root: css.css({
-    width: "100%",
-    height: "100%",
-    position: "relative",
-    display: "flex",
-    outline: "none"
-  }),
-  nodeToolbar: css.css({
-    backgroundColor: "transparent",
-    borderRadius: uikitReactCore.theme.radii.full,
-    top: 10
-  }),
-  buttonsContainer: css.css({
-    padding: uikitReactCore.theme.space.xs
-  }),
-  textAreaRoot: css.css({
-    flex: 1,
-    width: "100%",
-    border: "none",
-    background: "transparent",
-    outline: "none"
-  }),
-  textAreaInput: css.css({
-    resize: "none",
-    height: "100%",
-    width: "100%",
-    padding: uikitReactCore.theme.space.xs,
-    "&:focus-visible": {
-      outline: "none"
-    },
-    paddingRight: 32
-  }),
-  textAreaInputFolded: css.css({
-    resize: "none",
-    width: "100%",
-    padding: 0,
-    border: "none",
-    overflow: "hidden",
-    minHeight: "1.5rem",
-    height: "auto"
-  }),
-  colorConfig: css.css({
-    display: "flex",
-    flexDirection: "column",
-    gap: uikitReactCore.theme.space.sm
-  }),
-  folded: css.css({
-    width: 34,
-    height: 34
-  }),
-  expandButton: css.css({
-    position: "absolute",
-    top: uikitReactCore.theme.space.xxs,
-    right: uikitReactCore.theme.space.xxs
-  }),
-  fontSizes: css.css({
-    maxHeight: 160,
-    overflowY: "auto",
-    padding: uikitReactCore.theme.space.xs
-  })
-};
-const colorsToConfig = ["textColor", "backgroundColor", "borderColor"];
-const fontSizes = [10, 11, 12, 14, 16, 20, 24, 32, 36, 40, 48, 64, 96, 128];
-const StickyNode = ({
-  id,
-  selected,
-  data = {}
-}) => {
-  const mergedData = react.useMemo(() => ({ ...defaultData, ...data }), [data]);
-  const [text, setText] = react.useState("");
-  const { setNodes } = reactflow.useReactFlow();
-  const [editing, setEditing] = react.useState(false);
-  const [toolbarVisible, setToolbarVisible] = react.useState(false);
-  const [colorsConfigOpen, setColorsConfigOpen] = react.useState(false);
-  const [fontSizeConfigOpen, setFontSizeConfigOpen] = react.useState(false);
-  const [fontSize, setFontSize] = react.useState(mergedData.fontSize ?? 14);
-  const colorConfigBtnRef = react.useRef(null);
-  const fontSizeConfigBtnRef = react.useRef(null);
-  const handleToggleBold = react.useCallback(() => {
-    setNodes(
-      (nds) => nds.map((node) => {
-        if (node.id === id) {
-          node.data = {
-            ...node.data,
-            bold: !node.data?.bold
-          };
-        }
-        return node;
-      })
-    );
-  }, [setNodes, id]);
-  const handleToggleItalic = react.useCallback(() => {
-    setNodes(
-      (nds) => nds.map((node) => {
-        if (node.id === id) {
-          node.data = {
-            ...node.data,
-            italic: !node.data?.italic
-          };
-        }
-        return node;
-      })
-    );
-  }, [setNodes, id]);
-  const handleChangeFontSize = react.useCallback(
-    (size) => {
-      setFontSize(size);
-      setNodes(
-        (nds) => nds.map((node) => {
-          if (node.id === id) {
-            node.data = {
-              ...node.data,
-              fontSize: size
-            };
-          }
-          return node;
-        })
-      );
-      setFontSizeConfigOpen(false);
-    },
-    [setNodes, id]
-  );
-  const handleToggleExpand = react.useCallback(() => {
-    setNodes(
-      (nds) => nds.map((node) => {
-        if (node.id === id) {
-          node.data = {
-            ...node.data,
-            expanded: !node.data?.expanded
-          };
-        }
-        return node;
-      })
-    );
-  }, [setNodes, id]);
-  const handleResetColors = react.useCallback(() => {
-    setNodes(
-      (nds) => nds.map((node) => {
-        if (node.id === id) {
-          node.data = {
-            ...node.data,
-            backgroundColor: defaultData.backgroundColor,
-            borderColor: defaultData.borderColor,
-            textColor: defaultData.textColor,
-            hasShadow: defaultData.hasShadow
-          };
-        }
-        return node;
-      })
-    );
-  }, [setNodes, id]);
-  const handleDeleteSticky = react.useCallback(() => {
-    setNodes((nds) => nds.filter((node) => node.id !== id));
-    mergedData.onDelete?.();
-  }, [mergedData, setNodes, id]);
-  if (!mergedData.visible) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      material.Popover,
-      {
-        open: colorsConfigOpen,
-        anchorEl: colorConfigBtnRef.current,
-        onClose: () => {
-          setColorsConfigOpen(false);
-          setEditing(false);
-        },
-        anchorOrigin: {
-          vertical: "bottom",
-          horizontal: "left"
-        },
-        transformOrigin: {
-          vertical: "top",
-          horizontal: "left"
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDialogTitle, { children: "Customize Colors" }),
-          /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDialogContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.colorConfig, children: [
-            colorsToConfig.map((c) => /* @__PURE__ */ jsxRuntime.jsx(
-              uikitReactCore.HvColorPicker,
-              {
-                label: `${c.charAt(0).toUpperCase() + c.slice(1).replace("Color", " Color")}`,
-                value: mergedData[c] ?? "",
-                onChange: (color) => {
-                  setNodes(
-                    (nds) => nds.map((node) => {
-                      if (node.id === id) {
-                        node.data = {
-                          ...node.data,
-                          [c]: color
-                        };
-                      }
-                      return node;
-                    })
-                  );
-                }
-              },
-              c
-            )),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              uikitReactCore.HvCheckBox,
-              {
-                label: "Drop Shadow",
-                defaultChecked: mergedData.hasShadow,
-                onChange: (_, checked) => {
-                  setNodes(
-                    (nds) => nds.map((node) => {
-                      if (node.id === id) {
-                        node.data = {
-                          ...node.data,
-                          hasShadow: checked
-                        };
-                      }
-                      return node;
-                    })
-                  );
-                }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { variant: "secondarySubtle", onClick: handleResetColors, children: "Reset to defaults" })
-          ] }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      material.Popover,
-      {
-        open: fontSizeConfigOpen,
-        anchorEl: fontSizeConfigBtnRef.current,
-        onClose: () => {
-          setFontSizeConfigOpen(false);
-          setEditing(false);
-        },
-        anchorOrigin: {
-          vertical: "bottom",
-          horizontal: "right"
-        },
-        transformOrigin: {
-          vertical: "top",
-          horizontal: "right"
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          uikitReactCore.HvSelectionList,
-          {
-            className: classes.fontSizes,
-            value: fontSize,
-            onChange: (evt, newValue) => {
-              handleChangeFontSize(newValue);
-            },
-            children: fontSizes.map((size) => /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvListItem, { value: size, children: size }, size))
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: css.cx(
-          classes.root,
-          "nowheel",
-          !mergedData.expanded && classes.folded
-        ),
-        style: {
-          backgroundColor: mergedData.backgroundColor ?? uikitReactCore.theme.colors.bgContainer,
-          boxShadow: mergedData.hasShadow ? "0 8px 12px rgba(65,65,65,0.25)" : "none",
-          border: mergedData.borderColor ? `1px solid ${mergedData.borderColor}` : "none",
-          fontSize: `${mergedData.fontSize ?? 14}px`,
-          lineHeight: `${mergedData.fontSize ?? 14}px`
-        },
-        children: [
-          mergedData.expanded && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              reactflow.NodeResizer,
-              {
-                isVisible: selected,
-                minWidth: 100,
-                minHeight: 75,
-                lineStyle: {
-                  color: uikitReactCore.theme.colors.primary,
-                  borderStyle: "solid"
-                },
-                handleStyle: {
-                  width: 6,
-                  height: 6,
-                  border: `1px solid ${uikitReactCore.theme.colors.primary}`,
-                  backgroundColor: mergedData.backgroundColor ?? "transparent",
-                  borderRadius: uikitReactCore.theme.radii.full
-                }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              reactflow.NodeToolbar,
-              {
-                isVisible: editing || toolbarVisible || selected,
-                position: reactflow.Position.Top,
-                className: classes.nodeToolbar,
-                onMouseEnter: () => setToolbarVisible(true),
-                onMouseLeave: () => setToolbarVisible(false),
-                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.buttonsContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvMultiButton, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    uikitReactCore.HvIconButton,
-                    {
-                      "aria-label": "Font Size",
-                      title: "Font Size",
-                      ref: fontSizeConfigBtnRef,
-                      onClick: () => {
-                        setEditing(true);
-                        setFontSizeConfigOpen(true);
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.FontSize, {})
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    uikitReactCore.HvIconButton,
-                    {
-                      "aria-label": "Bold",
-                      title: "Bold",
-                      selected: mergedData.bold,
-                      onClick: handleToggleBold,
-                      children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Bold, {})
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    uikitReactCore.HvIconButton,
-                    {
-                      "aria-label": "Italic",
-                      title: "Italic",
-                      selected: mergedData.italic,
-                      onClick: handleToggleItalic,
-                      children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Italic, {})
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    uikitReactCore.HvIconButton,
-                    {
-                      "aria-label": "Customize Colors",
-                      title: "Customize Colors",
-                      ref: colorConfigBtnRef,
-                      onClick: () => {
-                        setEditing(true);
-                        setColorsConfigOpen(true);
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Palette, {})
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    uikitReactCore.HvIconButton,
-                    {
-                      "aria-label": "Delete",
-                      title: "Delete",
-                      onClick: handleDeleteSticky,
-                      children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Delete, {})
-                    }
-                  )
-                ] }) })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                onMouseEnter: () => setToolbarVisible(true),
-                onMouseLeave: () => setToolbarVisible(false),
-                className: classes.textAreaRoot,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    uikitReactCore.HvIconButton,
-                    {
-                      className: classes.expandButton,
-                      title: "Fold",
-                      onClick: handleToggleExpand,
-                      children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ActualSize, {})
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "textarea",
-                    {
-                      id: `sticky-textarea-${id}`,
-                      value: text || "",
-                      onChange: (e) => setText(e.target.value),
-                      className: classes.textAreaInput,
-                      placeholder: "Type here...",
-                      style: {
-                        color: mergedData.textColor ?? uikitReactCore.theme.colors.text,
-                        fontWeight: mergedData.bold ? "bold" : "normal",
-                        fontStyle: mergedData.italic ? "italic" : "normal",
-                        fontSize: mergedData.fontSize ?? "14px"
-                      },
-                      onFocus: () => setEditing(true),
-                      onBlur: () => {
-                        setEditing(false);
-                        setColorsConfigOpen(false);
-                      }
-                    }
-                  )
-                ]
-              }
-            )
-          ] }),
-          !mergedData.expanded && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            uikitReactCore.HvIconButton,
-            {
-              title: /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  style: { whiteSpace: "pre-wrap", wordBreak: "break-word" },
-                  children: text
-                }
-              ),
-              onClick: handleToggleExpand,
-              children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Fullscreen, {})
-            }
-          ) })
-        ]
-      }
-    )
-  ] });
-};
-exports.StickyNode = StickyNode;

package/dist/cjs/StepNavigation/DefaultNavigation/DefaultNavigation.cjs

@@ -1,56 +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 Step = require("./Step/Step.cjs");
-const HvDefaultNavigation = ({
-  numSteps,
-  stepSize,
-  getTitles,
-  getDynamicValues,
-  className,
-  children,
-  ...other
-}) => {
-  const { activeTheme } = uikitReactCore.useTheme();
-  const { container: maxSize, avatar: minSize } = utils.stepSizes[stepSize];
-  const StepComponent = Step.HvStep;
-  const stepsWidth = maxSize + minSize * (numSteps - 1);
-  const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);
-  const maxWidth = Math.max(titleWidth - minSize, separatorWidth);
-  const minWidth = Math.max(
-    titleWidth - (maxSize + minSize) * 0.5,
-    separatorWidth
-  );
-  const Steps = children;
-  const titles = getTitles(({ state }) => ({
-    variant: "label",
-    titleWidth,
-    titleDisabled: state === "Disabled"
-  }));
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...other, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Steps,
-      {
-        ...{
-          stepsWidth,
-          navWidth: width,
-          separatorValues: {
-            minWidth,
-            maxWidth,
-            getColor: utils.getColor,
-            height: activeTheme?.stepNavigation.defaultSeparatorHeight || 0
-          },
-          stepValues: {
-            minSize,
-            maxSize,
-            StepComponent
-          }
-        }
-      }
-    ),
-    titles
-  ] });
-};
-exports.HvDefaultNavigation = HvDefaultNavigation;

package/dist/cjs/StepNavigation/DefaultNavigation/Step/Step.cjs

@@ -1,78 +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 uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const utils = require("../utils.cjs");
-const Step_styles = require("./Step.styles.cjs");
-const iconSizeObject = {
-  xs: "XS",
-  sm: "XS",
-  md: "S",
-  lg: "M",
-  xl: "M"
-};
-const stateObject = {
-  Pending: 16,
-  Failed: 24,
-  Completed: 24
-};
-const iconStateObject = {
-  Pending: uikitReactIcons.HourGlass,
-  Failed: uikitReactIcons.Level3Bad,
-  Completed: uikitReactIcons.Level0Good
-};
-const HvStep = ({
-  className,
-  classes: classesProp,
-  state,
-  title,
-  onClick,
-  disabled,
-  size = "md",
-  number = 1
-}) => {
-  const { classes, cx } = Step_styles.useClasses(classesProp);
-  const iconSize = iconSizeObject[size];
-  const squareL = stateObject[state];
-  const svgSize = {
-    xs: squareL - 8,
-    sm: squareL,
-    md: squareL + 8,
-    lg: squareL + 16,
-    xl: squareL + 24
-  }[size];
-  const backgroundColor = utils.getColor(state);
-  const color = state === "Pending" ? "bgPage" : utils.getSemantic(state);
-  const status = state === "Current" ? "textDisabled" : void 0;
-  const IconComponent = iconStateObject[state];
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    uikitReactCore.HvButtonBase,
-    {
-      className: cx(classes.root, className, {
-        [classes.notCurrent]: state !== "Current"
-      }),
-      "aria-label": title,
-      disabled: disabled ?? ["Current", "Disabled"].includes(state),
-      onClick,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        uikitReactCore.HvAvatar,
-        {
-          className: cx(classes.avatar, classes[size]),
-          backgroundColor,
-          status,
-          size,
-          children: IconComponent ? /* @__PURE__ */ jsxRuntime.jsx(
-            IconComponent,
-            {
-              color,
-              style: { fontSize: svgSize },
-              size: iconSize
-            }
-          ) : number
-        }
-      )
-    }
-  );
-};
-exports.HvStep = HvStep;

package/dist/cjs/StepNavigation/DefaultNavigation/Step/Step.styles.cjs

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const { staticClasses, useClasses } = uikitReactCore.createClasses("HvStep", {
-  root: {
-    width: "fit-content",
-    height: "fit-content",
-    fontWeight: uikitReactCore.theme.fontWeights.semibold
-  },
-  notCurrent: { margin: "-8px" },
-  xs: {},
-  sm: {},
-  md: {},
-  lg: {},
-  xl: {},
-  avatar: {
-    "&$xs": {
-      fontSize: "0.625rem"
-    },
-    "&$sm": {
-      fontSize: "1rem"
-    },
-    "&$md": {
-      fontSize: "1.5rem"
-    },
-    "&$lg": {
-      fontSize: "2rem"
-    },
-    "&$xl": {
-      fontSize: "2.5rem"
-    }
-  }
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/StepNavigation/DefaultNavigation/utils.cjs

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const getColor = (state) => ({
-  Pending: uikitStyles.theme.colors.warning ?? "warning",
-  Failed: uikitStyles.theme.colors.negative ?? "negative",
-  Completed: uikitStyles.theme.colors.positive ?? "positive",
-  Current: uikitStyles.theme.colors.text ?? "text",
-  Disabled: uikitStyles.theme.colors.textDisabled ?? "textDisabled",
-  Enabled: uikitStyles.theme.colors.text ?? "text"
-})[state];
-const getSemantic = (state) => ({
-  Pending: "warning",
-  Failed: "negative",
-  Completed: "positive",
-  Current: "text",
-  Disabled: "textDisabled",
-  Enabled: "text"
-})[state];
-const EXTRA_SMALL = { container: 32, avatar: 24 };
-const SMALL = { container: 40, avatar: 32 };
-const MEDIUM = { container: 48, avatar: 40 };
-const LARGE = { container: 60, avatar: 52 };
-const EXTRA_LARGE = { container: 96, avatar: 88 };
-const stepSizes = {
-  xs: EXTRA_SMALL,
-  sm: SMALL,
-  md: MEDIUM,
-  lg: LARGE,
-  xl: EXTRA_LARGE
-};
-exports.getColor = getColor;
-exports.getSemantic = getSemantic;
-exports.stepSizes = stepSizes;

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

@@ -1,43 +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 uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const utils = require("../utils.cjs");
-const Dot_styles = require("./Dot.styles.cjs");
-const HvDot = ({
-  classes: classesProp,
-  className,
-  state,
-  title,
-  size = "sm",
-  onClick,
-  disabled: disabledProp
-}) => {
-  const { classes, cx } = Dot_styles.useClasses(classesProp);
-  const dotSize = utils.dotSizes[size] * (state === "Current" ? 1.5 : 1);
-  const disabled = disabledProp ?? ["Current", "Disabled"].includes(state);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    uikitReactCore.HvButton,
-    {
-      style: uikitReactUtils.mergeStyles(void 0, {
-        "--dotColor": utils.getColor(state),
-        "--dotSize": `${dotSize}px`
-      }),
-      className: cx(
-        classes.root,
-        {
-          [classes.active]: state === "Current",
-          [classes.ghostDisabled]: disabled
-        },
-        className
-      ),
-      "aria-label": title,
-      icon: true,
-      disabled,
-      onClick
-    }
-  );
-};
-exports.dotClasses = Dot_styles.staticClasses;
-exports.HvDot = HvDot;