@hitachivantara/uikit-react-lab 6.1.9 → 6.1.10

package/dist/Flow/Minimap/Minimap.styles.js

@@ -1,10 +1,5 @@
 import { createClasses, theme } from "@hitachivantara/uikit-react-core";
-const { staticClasses, useClasses } = createClasses("HvFlowMinimap", {
-  root: {
-    "&.react-flow__minimap": { backgroundColor: theme.colors.bgPage }
-  }
-});
-export {
-  staticClasses,
-  useClasses
-};
+//#region src/Flow/Minimap/Minimap.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvFlowMinimap", { root: { "&.react-flow__minimap": { backgroundColor: theme.colors.bgPage } } });
+//#endregion
+export { staticClasses, useClasses };

package/dist/Flow/Node/BaseNode.js

@@ -1,193 +1,147 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { NodeToolbar, Handle, Position } from "reactflow";
-import { useLabels, HvIconButton, HvTypography } from "@hitachivantara/uikit-react-core";
-import { mergeStyles } from "@hitachivantara/uikit-react-utils";
-import { useClasses } from "./BaseNode.styles.js";
-import { staticClasses } from "./BaseNode.styles.js";
-import { renderedIcon, isInputGroup, isOutputGroup, isConnected } from "./utils.js";
+import { isConnected, isInputGroup, isOutputGroup, renderedIcon } from "./utils.js";
 import { useHvNode } from "../hooks/useNode.js";
-const DEFAULT_LABELS = {
-  outputsTitle: "Outputs",
-  inputsTitle: "Inputs",
-  deleteActionLabel: "Delete",
-  duplicateActionLabel: "Duplicate"
-};
-const HvFlowBaseNode = ({
-  id,
-  title: titleProp,
-  headerItems,
-  icon: iconProp,
-  color: colorProp,
-  inputs: inputsProp,
-  outputs: outputsProp,
-  nodeActions: nodeActionsProp,
-  footer,
-  classes: classesProp,
-  labels: labelsProp,
-  className,
-  children
-}) => {
-  const {
-    toggleShowActions,
-    getNodeToolbarProps,
-    handleDefaultAction,
-    nodeActions,
-    title,
-    icon,
-    color,
-    iconColor,
-    inputEdges,
-    inputs,
-    outputEdges,
-    outputs,
-    node
-  } = useHvNode({
-    id,
-    title: titleProp,
-    inputs: inputsProp,
-    outputs: outputsProp,
-    icon: iconProp,
-    color: colorProp,
-    labels: labelsProp,
-    nodeActions: nodeActionsProp
-  });
-  const labels = useLabels(DEFAULT_LABELS, labelsProp);
-  const { classes, cx } = useClasses(classesProp);
-  const renderOutput = (output) => {
-    const edgeConnected = isConnected(id, "source", output.id, outputEdges);
-    return /* @__PURE__ */ jsxs("div", { className: classes.outputContainer, children: [
-      /* @__PURE__ */ jsx(
-        Handle,
-        {
-          type: "source",
-          isConnectableEnd: false,
-          id: output.id,
-          position: Position.Right,
-          className: cx(classes.handle, {
-            [classes.handleConnected]: edgeConnected
-          })
-        }
-      ),
-      output.isMandatory && !edgeConnected && /* @__PURE__ */ jsx("div", { className: classes.mandatory }),
-      /* @__PURE__ */ jsx(HvTypography, { component: "div", children: output.label })
-    ] }, output.id);
-  };
-  const renderInput = (input) => {
-    const edgeConnected = isConnected(id, "target", input.id, inputEdges);
-    return /* @__PURE__ */ jsxs("div", { className: classes.inputContainer, children: [
-      /* @__PURE__ */ jsx(
-        Handle,
-        {
-          type: "target",
-          isConnectableStart: false,
-          id: input.id,
-          position: Position.Left,
-          className: cx(classes.handle, {
-            [classes.handleConnected]: edgeConnected
-          })
-        }
-      ),
-      /* @__PURE__ */ jsx(HvTypography, { component: "div", children: input.label }),
-      input.isMandatory && !edgeConnected && /* @__PURE__ */ jsx("div", { className: classes.mandatory })
-    ] }, input.id);
-  };
-  if (!node) return null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: mergeStyles(void 0, {
-        "--node-color": color
-      }),
-      className: cx(
-        "nowheel",
-        // Disables the default canvas pan behaviour when scrolling inside the node
-        classes.root,
-        className
-      ),
-      onMouseEnter: toggleShowActions,
-      onMouseLeave: toggleShowActions,
-      children: [
-        /* @__PURE__ */ jsx(NodeToolbar, { ...getNodeToolbarProps(), children: nodeActions?.map((action) => /* @__PURE__ */ jsx(
-          HvIconButton,
-          {
-            title: action.label,
-            onClick: () => handleDefaultAction(action),
-            children: renderedIcon(action.icon)
-          },
-          action.id
-        )) }),
-        /* @__PURE__ */ jsxs("div", { className: classes.headerContainer, children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: mergeStyles(void 0, {
-                "--icon-color": iconColor
-              }),
-              className: classes.titleContainer,
-              children: [
-                icon,
-                /* @__PURE__ */ jsx(
-                  HvTypography,
-                  {
-                    component: "p",
-                    variant: "title4",
-                    className: classes.title,
-                    children: title
-                  }
-                )
-              ]
-            }
-          ),
-          headerItems && /* @__PURE__ */ jsx("div", { style: { display: "flex" }, children: headerItems })
-        ] }),
-        children && /* @__PURE__ */ jsx("div", { className: classes.contentContainer, children }),
-        inputs && inputs.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: classes.inputsTitleContainer, children: /* @__PURE__ */ jsx(HvTypography, { children: labels?.inputsTitle }) }),
-          /* @__PURE__ */ jsx("div", { className: classes.inputsContainer, children: inputs?.map((input, idx) => {
-            if (!isInputGroup(input)) return renderInput(input);
-            return /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: classes.inputGroupContainer,
-                children: [
-                  /* @__PURE__ */ jsx(HvTypography, { component: "div", variant: "label", children: input.label }),
-                  input.inputs.map(
-                    (inp) => renderInput(inp)
-                  )
-                ]
-              },
-              `group${idx}`
-            );
-          }) })
-        ] }),
-        outputs && outputs.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: classes.outputsTitleContainer, children: /* @__PURE__ */ jsx(HvTypography, { children: labels?.outputsTitle }) }),
-          /* @__PURE__ */ jsx("div", { className: classes.outputsContainer, children: outputs?.map((output, idx) => {
-            if (!isOutputGroup(output)) {
-              return renderOutput(output);
-            }
-            return /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: classes.outputGroupContainer,
-                children: [
-                  /* @__PURE__ */ jsx(HvTypography, { component: "div", variant: "label", children: output.label }),
-                  output.outputs.map((out) => {
-                    return renderOutput(out);
-                  })
-                ]
-              },
-              `group${idx}`
-            );
-          }) })
-        ] }),
-        footer && /* @__PURE__ */ jsx("div", { className: classes.footerContainer, children: footer })
-      ]
-    }
-  );
+import { useClasses } from "./BaseNode.styles.js";
+import { HvIconButton, HvTypography, useLabels } from "@hitachivantara/uikit-react-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Handle, NodeToolbar, Position } from "reactflow";
+import { mergeStyles } from "@hitachivantara/uikit-react-utils";
+//#region src/Flow/Node/BaseNode.tsx
+var DEFAULT_LABELS = {
+	outputsTitle: "Outputs",
+	inputsTitle: "Inputs",
+	deleteActionLabel: "Delete",
+	duplicateActionLabel: "Duplicate"
 };
-export {
-  DEFAULT_LABELS,
-  HvFlowBaseNode,
-  staticClasses as flowBaseNodeClasses
+var HvFlowBaseNode = ({ id, title: titleProp, headerItems, icon: iconProp, color: colorProp, inputs: inputsProp, outputs: outputsProp, nodeActions: nodeActionsProp, footer, classes: classesProp, labels: labelsProp, className, children }) => {
+	const { toggleShowActions, getNodeToolbarProps, handleDefaultAction, nodeActions, title, icon, color, iconColor, inputEdges, inputs, outputEdges, outputs, node } = useHvNode({
+		id,
+		title: titleProp,
+		inputs: inputsProp,
+		outputs: outputsProp,
+		icon: iconProp,
+		color: colorProp,
+		labels: labelsProp,
+		nodeActions: nodeActionsProp
+	});
+	const labels = useLabels(DEFAULT_LABELS, labelsProp);
+	const { classes, cx } = useClasses(classesProp);
+	const renderOutput = (output) => {
+		const edgeConnected = isConnected(id, "source", output.id, outputEdges);
+		return /* @__PURE__ */ jsxs("div", {
+			className: classes.outputContainer,
+			children: [
+				/* @__PURE__ */ jsx(Handle, {
+					type: "source",
+					isConnectableEnd: false,
+					id: output.id,
+					position: Position.Right,
+					className: cx(classes.handle, { [classes.handleConnected]: edgeConnected })
+				}),
+				output.isMandatory && !edgeConnected && /* @__PURE__ */ jsx("div", { className: classes.mandatory }),
+				/* @__PURE__ */ jsx(HvTypography, {
+					component: "div",
+					children: output.label
+				})
+			]
+		}, output.id);
+	};
+	const renderInput = (input) => {
+		const edgeConnected = isConnected(id, "target", input.id, inputEdges);
+		return /* @__PURE__ */ jsxs("div", {
+			className: classes.inputContainer,
+			children: [
+				/* @__PURE__ */ jsx(Handle, {
+					type: "target",
+					isConnectableStart: false,
+					id: input.id,
+					position: Position.Left,
+					className: cx(classes.handle, { [classes.handleConnected]: edgeConnected })
+				}),
+				/* @__PURE__ */ jsx(HvTypography, {
+					component: "div",
+					children: input.label
+				}),
+				input.isMandatory && !edgeConnected && /* @__PURE__ */ jsx("div", { className: classes.mandatory })
+			]
+		}, input.id);
+	};
+	if (!node) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		style: mergeStyles(void 0, { "--node-color": color }),
+		className: cx("nowheel", classes.root, className),
+		onMouseEnter: toggleShowActions,
+		onMouseLeave: toggleShowActions,
+		children: [
+			/* @__PURE__ */ jsx(NodeToolbar, {
+				...getNodeToolbarProps(),
+				children: nodeActions?.map((action) => /* @__PURE__ */ jsx(HvIconButton, {
+					title: action.label,
+					onClick: () => handleDefaultAction(action),
+					children: renderedIcon(action.icon)
+				}, action.id))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: classes.headerContainer,
+				children: [/* @__PURE__ */ jsxs("div", {
+					style: mergeStyles(void 0, { "--icon-color": iconColor }),
+					className: classes.titleContainer,
+					children: [icon, /* @__PURE__ */ jsx(HvTypography, {
+						component: "p",
+						variant: "title4",
+						className: classes.title,
+						children: title
+					})]
+				}), headerItems && /* @__PURE__ */ jsx("div", {
+					style: { display: "flex" },
+					children: headerItems
+				})]
+			}),
+			children && /* @__PURE__ */ jsx("div", {
+				className: classes.contentContainer,
+				children
+			}),
+			inputs && inputs.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+				className: classes.inputsTitleContainer,
+				children: /* @__PURE__ */ jsx(HvTypography, { children: labels?.inputsTitle })
+			}), /* @__PURE__ */ jsx("div", {
+				className: classes.inputsContainer,
+				children: inputs?.map((input, idx) => {
+					if (!isInputGroup(input)) return renderInput(input);
+					return /* @__PURE__ */ jsxs("div", {
+						className: classes.inputGroupContainer,
+						children: [/* @__PURE__ */ jsx(HvTypography, {
+							component: "div",
+							variant: "label",
+							children: input.label
+						}), input.inputs.map((inp) => renderInput(inp))]
+					}, `group${idx}`);
+				})
+			})] }),
+			outputs && outputs.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+				className: classes.outputsTitleContainer,
+				children: /* @__PURE__ */ jsx(HvTypography, { children: labels?.outputsTitle })
+			}), /* @__PURE__ */ jsx("div", {
+				className: classes.outputsContainer,
+				children: outputs?.map((output, idx) => {
+					if (!isOutputGroup(output)) return renderOutput(output);
+					return /* @__PURE__ */ jsxs("div", {
+						className: classes.outputGroupContainer,
+						children: [/* @__PURE__ */ jsx(HvTypography, {
+							component: "div",
+							variant: "label",
+							children: output.label
+						}), output.outputs.map((out) => {
+							return renderOutput(out);
+						})]
+					}, `group${idx}`);
+				})
+			})] }),
+			footer && /* @__PURE__ */ jsx("div", {
+				className: classes.footerContainer,
+				children: footer
+			})
+		]
+	});
 };
+//#endregion
+export { DEFAULT_LABELS, HvFlowBaseNode };

package/dist/Flow/Node/BaseNode.styles.js

@@ -1,135 +1,124 @@
 import { createClasses, theme } from "@hitachivantara/uikit-react-core";
-const { staticClasses, useClasses } = createClasses("HvFlowBaseNode", {
-  root: {
-    borderRadius: theme.radii.round,
-    backgroundColor: theme.colors.bgContainer,
-    boxShadow: theme.colors.shadow,
-    minWidth: "250px",
-    border: "1px solid var(--node-color)"
-  },
-  headerContainer: {
-    padding: theme.spacing(0.5, 1),
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    borderTopLeftRadius: "inherit",
-    borderTopRightRadius: "inherit",
-    backgroundColor: "var(--node-color)"
-  },
-  titleContainer: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    "& svg *.color0": { fill: "var(--icon-color)" }
-  },
-  title: {
-    color: theme.colors.textDark
-  },
-  inputsTitleContainer: {
-    display: "flex",
-    justifyContent: "center",
-    padding: theme.space.xs,
-    backgroundColor: theme.colors.bgPage,
-    borderTop: `1px solid ${theme.colors.borderSubtle}`,
-    borderBottom: `1px solid ${theme.colors.borderSubtle}`
-  },
-  outputsTitleContainer: {
-    display: "flex",
-    justifyContent: "center",
-    padding: theme.space.xs,
-    backgroundColor: theme.colors.bgPage,
-    borderTop: `1px solid ${theme.colors.borderSubtle}`,
-    borderBottom: `1px solid ${theme.colors.borderSubtle}`
-  },
-  contentContainer: {},
-  inputsContainer: {
-    display: "flex",
-    flexDirection: "column",
-    padding: theme.space.sm,
-    gap: theme.space.xs,
-    alignItems: "flex-start"
-  },
-  outputsContainer: {
-    display: "flex",
-    flexDirection: "column",
-    padding: theme.space.sm,
-    gap: theme.space.xs,
-    alignItems: "flex-end"
-  },
-  inputGroupContainer: {
-    display: "flex",
-    flexDirection: "column",
-    gap: theme.space.xs,
-    alignItems: "flex-start"
-  },
-  outputGroupContainer: {
-    display: "flex",
-    flexDirection: "column",
-    gap: theme.space.xs,
-    alignItems: "flex-end"
-  },
-  inputContainer: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    position: "relative"
-  },
-  outputContainer: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    position: "relative"
-  },
-  handle: {
-    zIndex: theme.zIndices.overlay,
-    marginLeft: 2,
-    backgroundColor: theme.colors.bgContainer,
-    height: 10,
-    width: 10,
-    border: `1px solid ${theme.colors.textDisabled}`,
-    "&.react-flow__handle-left": {
-      left: -23
-    },
-    "&.react-flow__handle-right": {
-      right: -21
-    },
-    "&.react-flow__handle-connecting": {
-      backgroundColor: theme.colors.negativeDimmed
-    },
-    "&.react-flow__handle-valid": {
-      backgroundColor: theme.colors.positiveDimmed
-    },
-    "::before": {
-      fontSize: 14,
-      color: theme.colors.textDisabled,
-      content: '"+"',
-      marginTop: -7,
-      position: "absolute"
-    }
-  },
-  handleConnected: {
-    backgroundColor: theme.colors.textDisabled,
-    width: 8,
-    height: 8,
-    "::before": {
-      fontSize: 11,
-      marginTop: -8
-    }
-  },
-  mandatory: {
-    width: 10,
-    height: 10,
-    margin: theme.spacing(0, theme.space.xs),
-    borderRadius: theme.radii.full,
-    backgroundColor: theme.colors.negativeDimmed
-  },
-  footerContainer: {
-    padding: theme.space.sm,
-    borderTop: `1px solid ${theme.colors.borderSubtle}`
-  }
+//#region src/Flow/Node/BaseNode.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvFlowBaseNode", {
+	root: {
+		borderRadius: theme.radii.round,
+		backgroundColor: theme.colors.bgContainer,
+		boxShadow: theme.colors.shadow,
+		minWidth: "250px",
+		border: "1px solid var(--node-color)"
+	},
+	headerContainer: {
+		padding: theme.spacing(.5, 1),
+		display: "flex",
+		flexDirection: "row",
+		justifyContent: "space-between",
+		alignItems: "center",
+		borderTopLeftRadius: "inherit",
+		borderTopRightRadius: "inherit",
+		backgroundColor: "var(--node-color)"
+	},
+	titleContainer: {
+		display: "flex",
+		flexDirection: "row",
+		alignItems: "center",
+		"& svg *.color0": { fill: "var(--icon-color)" }
+	},
+	title: { color: theme.colors.textDark },
+	inputsTitleContainer: {
+		display: "flex",
+		justifyContent: "center",
+		padding: theme.space.xs,
+		backgroundColor: theme.colors.bgPage,
+		borderTop: `1px solid ${theme.colors.borderSubtle}`,
+		borderBottom: `1px solid ${theme.colors.borderSubtle}`
+	},
+	outputsTitleContainer: {
+		display: "flex",
+		justifyContent: "center",
+		padding: theme.space.xs,
+		backgroundColor: theme.colors.bgPage,
+		borderTop: `1px solid ${theme.colors.borderSubtle}`,
+		borderBottom: `1px solid ${theme.colors.borderSubtle}`
+	},
+	contentContainer: {},
+	inputsContainer: {
+		display: "flex",
+		flexDirection: "column",
+		padding: theme.space.sm,
+		gap: theme.space.xs,
+		alignItems: "flex-start"
+	},
+	outputsContainer: {
+		display: "flex",
+		flexDirection: "column",
+		padding: theme.space.sm,
+		gap: theme.space.xs,
+		alignItems: "flex-end"
+	},
+	inputGroupContainer: {
+		display: "flex",
+		flexDirection: "column",
+		gap: theme.space.xs,
+		alignItems: "flex-start"
+	},
+	outputGroupContainer: {
+		display: "flex",
+		flexDirection: "column",
+		gap: theme.space.xs,
+		alignItems: "flex-end"
+	},
+	inputContainer: {
+		display: "flex",
+		flexDirection: "row",
+		alignItems: "center",
+		position: "relative"
+	},
+	outputContainer: {
+		display: "flex",
+		flexDirection: "row",
+		alignItems: "center",
+		position: "relative"
+	},
+	handle: {
+		zIndex: theme.zIndices.overlay,
+		marginLeft: 2,
+		backgroundColor: theme.colors.bgContainer,
+		height: 10,
+		width: 10,
+		border: `1px solid ${theme.colors.textDisabled}`,
+		"&.react-flow__handle-left": { left: -23 },
+		"&.react-flow__handle-right": { right: -21 },
+		"&.react-flow__handle-connecting": { backgroundColor: theme.colors.negativeDimmed },
+		"&.react-flow__handle-valid": { backgroundColor: theme.colors.positiveDimmed },
+		"::before": {
+			fontSize: 14,
+			color: theme.colors.textDisabled,
+			content: "\"+\"",
+			marginTop: -7,
+			position: "absolute"
+		}
+	},
+	handleConnected: {
+		backgroundColor: theme.colors.textDisabled,
+		width: 8,
+		height: 8,
+		"::before": {
+			fontSize: 11,
+			marginTop: -8
+		}
+	},
+	mandatory: {
+		width: 10,
+		height: 10,
+		margin: theme.spacing(0, theme.space.xs),
+		borderRadius: theme.radii.full,
+		backgroundColor: theme.colors.negativeDimmed
+	},
+	footerContainer: {
+		padding: theme.space.sm,
+		borderTop: `1px solid ${theme.colors.borderSubtle}`
+	}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };