@hitachivantara/uikit-react-lab 5.35.11 → 5.36.0

package/dist/esm/Flow/Node/BaseNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.js","sources":["../../../../src/Flow/Node/BaseNode.tsx"],"sourcesContent":["import React, {\n  isValidElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { Handle, NodeProps, NodeToolbar, Position } from \"reactflow\";\nimport { uid } from \"uid\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvIconButton,\n  HvTypography,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Delete, Duplicate } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor, HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\nimport { useFlowInstance } from \"../hooks\";\nimport {\n  useFlowNode,\n  useFlowNodeInputEdges,\n  useFlowNodeOutputEdges,\n} from \"../hooks/useFlowNode\";\nimport {\n  HvFlowNodeAction,\n  HvFlowNodeInput,\n  HvFlowNodeInputGroup,\n  HvFlowNodeOutput,\n  HvFlowNodeOutputGroup,\n} from \"../types\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\nimport {\n  identifyHandles,\n  isConnected,\n  isInputGroup,\n  isOutputGroup,\n  renderedIcon,\n} from \"./utils\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport const DEFAULT_LABELS = {\n  outputsTitle: \"Outputs\",\n  inputsTitle: \"Inputs\",\n  deleteActionLabel: \"Delete\",\n  duplicateActionLabel: \"Duplicate\",\n};\n\nexport interface HvFlowBaseNodeProps<T = any>\n  extends Omit<HvBaseProps, \"id\">,\n    NodeProps<T> {\n  /** Header title */\n  title?: string;\n  /** Header icon */\n  icon?: React.ReactNode;\n  /** Header color */\n  color?: HvColorAny;\n  /** Header items */\n  headerItems?: React.ReactNode;\n  /** Node inputs */\n  inputs?: (HvFlowNodeInput | HvFlowNodeInputGroup)[];\n  /** Node outputs */\n  outputs?: (HvFlowNodeOutput | HvFlowNodeOutputGroup)[];\n  /** Node actions */\n  nodeActions?: HvFlowNodeAction[];\n  /** The content of the node footer */\n  footer?: React.ReactNode;\n  /** Labels used on the node. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowBaseNodeClasses;\n}\n\nexport const HvFlowBaseNode = ({\n  id,\n  title,\n  headerItems,\n  icon,\n  color: colorProp,\n  inputs: inputsProp,\n  outputs: outputsProp,\n  nodeActions: nodeActionsProp,\n  footer,\n  classes: classesProp,\n  labels: labelsProps,\n  className,\n  children,\n}: HvFlowBaseNodeProps<unknown>) => {\n  const { registerNode, unregisterNode } = useNodeMetaRegistry();\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const inputs = useMemo(() => identifyHandles(inputsProp), [inputsProp]);\n\n  const outputs = useMemo(() => identifyHandles(outputsProp), [outputsProp]);\n\n  const nodeActions = useMemo(\n    () =>\n      nodeActionsProp || [\n        { id: \"delete\", label: labels?.deleteActionLabel, icon: <Delete /> },\n        {\n          id: \"duplicate\",\n          label: labels?.duplicateActionLabel,\n          icon: <Duplicate />,\n        },\n      ],\n    [labels?.deleteActionLabel, labels?.duplicateActionLabel, nodeActionsProp],\n  );\n\n  useEffect(() => {\n    registerNode(id, {\n      label: title || \"\",\n      inputs,\n      outputs,\n    });\n    return () => unregisterNode(id);\n  }, [id, title, inputs, outputs, registerNode, unregisterNode]);\n\n  const [showActions, setShowActions] = useState(false);\n  const reactFlowInstance = useFlowInstance();\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const node = useFlowNode();\n  const inputEdges = useFlowNodeInputEdges();\n  const outputEdges = useFlowNodeOutputEdges();\n\n  const handleDefaultAction = useCallback(\n    (action: HvFlowNodeAction) => {\n      if (!node) return;\n\n      if (action.callback) {\n        action.callback(node);\n        return;\n      }\n\n      // built-in actions\n      switch (action.id) {\n        case \"delete\":\n          reactFlowInstance.deleteElements({ nodes: [node] });\n          break;\n        case \"duplicate\":\n          reactFlowInstance.addNodes([\n            {\n              ...node,\n              id: uid(),\n              position: {\n                x: node.position.x,\n                y: node.position.y + (node.height || 0) + 20,\n              },\n              selected: false,\n              zIndex: Number(theme.zIndices.overlay),\n            },\n          ]);\n          break;\n        default:\n          break;\n      }\n    },\n    [node, reactFlowInstance],\n  );\n\n  const renderOutput = (output: HvFlowNodeOutput) => {\n    const edgeConnected = isConnected(id, \"source\", output.id!, outputEdges);\n\n    return (\n      <div className={classes.outputContainer} key={output.id}>\n        <Handle\n          type=\"source\"\n          isConnectableEnd={false}\n          id={output.id}\n          position={Position.Right}\n          className={cx(classes.handle, {\n            [classes.handleConnected]: edgeConnected,\n          })}\n        />\n        {output.isMandatory && !edgeConnected && (\n          <div className={classes.mandatory} />\n        )}\n        <HvTypography component=\"div\">{output.label}</HvTypography>\n      </div>\n    );\n  };\n\n  const renderInput = (input: HvFlowNodeInput) => {\n    const edgeConnected = isConnected(id, \"target\", input.id!, inputEdges);\n\n    return (\n      <div className={classes.inputContainer} key={input.id}>\n        <Handle\n          type=\"target\"\n          isConnectableStart={false}\n          id={input.id}\n          position={Position.Left}\n          className={cx(classes.handle, {\n            [classes.handleConnected]: edgeConnected,\n          })}\n        />\n        <HvTypography component=\"div\">{input.label}</HvTypography>\n        {input.isMandatory && !edgeConnected && (\n          <div className={classes.mandatory} />\n        )}\n      </div>\n    );\n  };\n\n  if (!node) return null;\n\n  const color = getColor(colorProp);\n  const iconColor = isValidElement(icon)\n    ? getColor(icon.props.color || \"base_dark\")\n    : getColor(\"base_dark\");\n\n  return (\n    <div\n      className={cx(\n        \"nowheel\", // Disables the default canvas pan behaviour when scrolling inside the node\n        css({ border: `1px solid ${color}` }),\n        classes.root,\n        className,\n      )}\n      onMouseEnter={() => setShowActions(true)}\n      onMouseLeave={() => setShowActions(false)}\n    >\n      <NodeToolbar isVisible={showActions} offset={0}>\n        {nodeActions?.map((action) => (\n          <HvIconButton\n            key={action.id}\n            title={action.label}\n            onClick={() => handleDefaultAction(action)}\n          >\n            {renderedIcon(action.icon)}\n          </HvIconButton>\n        ))}\n      </NodeToolbar>\n      <div\n        className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n      >\n        <div\n          className={cx(\n            classes.titleContainer,\n            css({ \"& svg *.color0\": { fill: iconColor } }),\n          )}\n        >\n          {icon}\n          <HvTypography\n            component=\"p\"\n            variant=\"title4\"\n            className={classes.title}\n          >\n            {title}\n          </HvTypography>\n        </div>\n        {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>{labels?.inputsTitle}</HvTypography>\n          </div>\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => {\n              if (!isInputGroup(input)) return renderInput(input);\n\n              return (\n                <div\n                  className={classes.inputGroupContainer}\n                  key={`group${idx}`}\n                >\n                  <HvTypography component=\"div\" variant=\"label\">\n                    {input.label}\n                  </HvTypography>\n                  {(input as HvFlowNodeInputGroup).inputs.map((inp) =>\n                    renderInput(inp),\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </>\n      )}\n      {outputs && outputs.length > 0 && (\n        <>\n          <div className={classes.outputsTitleContainer}>\n            <HvTypography>{labels?.outputsTitle}</HvTypography>\n          </div>\n          <div className={classes.outputsContainer}>\n            {outputs?.map((output, idx) => {\n              if (!isOutputGroup(output)) {\n                return renderOutput(output);\n              }\n\n              return (\n                <div\n                  className={classes.outputGroupContainer}\n                  key={`group${idx}`}\n                >\n                  <HvTypography component=\"div\" variant=\"label\">\n                    {output.label}\n                  </HvTypography>\n                  {(output as HvFlowNodeOutputGroup).outputs.map((out) => {\n                    return renderOutput(out);\n                  })}\n                </div>\n              );\n            })}\n          </div>\n        </>\n      )}\n      {footer && <div className={classes.footerContainer}>{footer}</div>}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseNode.js","sources":["../../../../src/Flow/Node/BaseNode.tsx"],"sourcesContent":["import { Handle, NodeProps, NodeToolbar, Position } from \"reactflow\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvIconButton,\n  HvTypography,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvUseNodeParams, useHvNode } from \"../hooks\";\nimport {\n  HvFlowNodeInput,\n  HvFlowNodeInputGroup,\n  HvFlowNodeOutput,\n  HvFlowNodeOutputGroup,\n} from \"../types\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\nimport {\n  isConnected,\n  isInputGroup,\n  isOutputGroup,\n  renderedIcon,\n} from \"./utils\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport const DEFAULT_LABELS = {\n  outputsTitle: \"Outputs\",\n  inputsTitle: \"Inputs\",\n  deleteActionLabel: \"Delete\",\n  duplicateActionLabel: \"Duplicate\",\n};\n\nexport interface HvFlowBaseNodeProps<T = any>\n  extends Omit<HvBaseProps, \"id\" | \"color\">,\n    Omit<HvUseNodeParams, \"id\">,\n    NodeProps<T> {\n  /** Header items */\n  headerItems?: React.ReactNode;\n  /** The content of the node footer */\n  footer?: React.ReactNode;\n  /** Labels used on the node. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowBaseNodeClasses;\n}\n\nexport const HvFlowBaseNode = ({\n  id,\n  title: titleProp,\n  headerItems,\n  icon: iconProp,\n  color: colorProp,\n  inputs: inputsProp,\n  outputs: outputsProp,\n  nodeActions: nodeActionsProp,\n  footer,\n  classes: classesProp,\n  labels: labelsProp,\n  className,\n  children,\n}: HvFlowBaseNodeProps<unknown>) => {\n  const {\n    toggleShowActions,\n    getNodeToolbarProps,\n    handleDefaultAction,\n    nodeActions,\n    title,\n    icon,\n    color,\n    iconColor,\n    inputEdges,\n    inputs,\n    outputEdges,\n    outputs,\n    node,\n  } = useHvNode({\n    id,\n    title: titleProp,\n    inputs: inputsProp,\n    outputs: outputsProp,\n    icon: iconProp,\n    color: colorProp,\n    labels: labelsProp,\n    nodeActions: nodeActionsProp,\n  });\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const renderOutput = (output: HvFlowNodeOutput) => {\n    const edgeConnected = isConnected(id, \"source\", output.id!, outputEdges);\n\n    return (\n      <div className={classes.outputContainer} key={output.id}>\n        <Handle\n          type=\"source\"\n          isConnectableEnd={false}\n          id={output.id}\n          position={Position.Right}\n          className={cx(classes.handle, {\n            [classes.handleConnected]: edgeConnected,\n          })}\n        />\n        {output.isMandatory && !edgeConnected && (\n          <div className={classes.mandatory} />\n        )}\n        <HvTypography component=\"div\">{output.label}</HvTypography>\n      </div>\n    );\n  };\n\n  const renderInput = (input: HvFlowNodeInput) => {\n    const edgeConnected = isConnected(id, \"target\", input.id!, inputEdges);\n\n    return (\n      <div className={classes.inputContainer} key={input.id}>\n        <Handle\n          type=\"target\"\n          isConnectableStart={false}\n          id={input.id}\n          position={Position.Left}\n          className={cx(classes.handle, {\n            [classes.handleConnected]: edgeConnected,\n          })}\n        />\n        <HvTypography component=\"div\">{input.label}</HvTypography>\n        {input.isMandatory && !edgeConnected && (\n          <div className={classes.mandatory} />\n        )}\n      </div>\n    );\n  };\n\n  if (!node) return null;\n\n  return (\n    <div\n      className={cx(\n        \"nowheel\", // Disables the default canvas pan behaviour when scrolling inside the node\n        css({ border: `1px solid ${color}` }),\n        classes.root,\n        className,\n      )}\n      onMouseEnter={toggleShowActions}\n      onMouseLeave={toggleShowActions}\n    >\n      <NodeToolbar {...getNodeToolbarProps()}>\n        {nodeActions?.map((action) => (\n          <HvIconButton\n            key={action.id}\n            title={action.label}\n            onClick={() => handleDefaultAction(action)}\n          >\n            {renderedIcon(action.icon)}\n          </HvIconButton>\n        ))}\n      </NodeToolbar>\n      <div\n        className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n      >\n        <div\n          className={cx(\n            classes.titleContainer,\n            css({ \"& svg *.color0\": { fill: iconColor } }),\n          )}\n        >\n          {icon}\n          <HvTypography\n            component=\"p\"\n            variant=\"title4\"\n            className={classes.title}\n          >\n            {title}\n          </HvTypography>\n        </div>\n        {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>{labels?.inputsTitle}</HvTypography>\n          </div>\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => {\n              if (!isInputGroup(input)) return renderInput(input);\n\n              return (\n                <div\n                  className={classes.inputGroupContainer}\n                  key={`group${idx}`}\n                >\n                  <HvTypography component=\"div\" variant=\"label\">\n                    {input.label}\n                  </HvTypography>\n                  {(input as HvFlowNodeInputGroup).inputs.map((inp) =>\n                    renderInput(inp),\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </>\n      )}\n      {outputs && outputs.length > 0 && (\n        <>\n          <div className={classes.outputsTitleContainer}>\n            <HvTypography>{labels?.outputsTitle}</HvTypography>\n          </div>\n          <div className={classes.outputsContainer}>\n            {outputs?.map((output, idx) => {\n              if (!isOutputGroup(output)) {\n                return renderOutput(output);\n              }\n\n              return (\n                <div\n                  className={classes.outputGroupContainer}\n                  key={`group${idx}`}\n                >\n                  <HvTypography component=\"div\" variant=\"label\">\n                    {output.label}\n                  </HvTypography>\n                  {(output as HvFlowNodeOutputGroup).outputs.map((out) => {\n                    return renderOutput(out);\n                  })}\n                </div>\n              );\n            })}\n          </div>\n        </>\n      )}\n      {footer && <div className={classes.footerContainer}>{footer}</div>}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Flow/hooks/useNode.js

@@ -0,0 +1,150 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useMemo, isValidElement, useState, useCallback, useEffect } from "react";
+import { uid } from "uid";
+import { useLabels } from "@hitachivantara/uikit-react-core";
+import { Delete, Duplicate } from "@hitachivantara/uikit-react-icons";
+import { getColor, theme } from "@hitachivantara/uikit-styles";
+import { useNodeMetaRegistry } from "../FlowContext/NodeMetaContext.js";
+import { identifyHandles } from "../Node/utils.js";
+import { useFlowContext } from "./useFlowContext.js";
+import { useFlowInstance } from "./useFlowInstance.js";
+import { useFlowNodeInputEdges, useFlowNodeOutputEdges, useFlowNode } from "./useFlowNode.js";
+const DEFAULT_LABELS = {
+  deleteActionLabel: "Delete",
+  duplicateActionLabel: "Duplicate"
+};
+function useHvNode(props) {
+  const {
+    id,
+    title: titleProp,
+    icon: iconProp,
+    color: colorProp,
+    subtitle: subtitleProp,
+    nodeActions: nodeActionsProp,
+    inputs: inputsProp,
+    outputs: outputsProp,
+    groupId,
+    labels: labelsProps,
+    nodeToolbarProps
+  } = props;
+  const { registerNode, unregisterNode } = useNodeMetaRegistry();
+  const labels = useLabels(DEFAULT_LABELS, labelsProps);
+  const inputs = useMemo(() => identifyHandles(inputsProp), [inputsProp]);
+  const inputEdges = useFlowNodeInputEdges();
+  const outputs = useMemo(() => identifyHandles(outputsProp), [outputsProp]);
+  const outputEdges = useFlowNodeOutputEdges();
+  const { nodeGroups } = useFlowContext();
+  const node = useFlowNode();
+  const reactFlowInstance = useFlowInstance();
+  const nodeGroup = groupId && nodeGroups && nodeGroups[groupId] || void 0;
+  const title = titleProp || nodeGroup?.label;
+  const icon = iconProp || nodeGroup?.icon;
+  const color = getColor(colorProp || nodeGroup?.color);
+  const iconColor = isValidElement(icon) ? getColor(icon.props.color || "base_dark") : getColor("base_dark");
+  const subtitle = subtitleProp || node?.data.nodeLabel;
+  const [showActions, setShowActions] = useState(false);
+  const toggleShowActions = useCallback(() => {
+    setShowActions(!showActions);
+  }, [showActions]);
+  const getNodeToolbarProps = useCallback(
+    () => ({
+      offset: 0,
+      isVisible: showActions,
+      ...nodeToolbarProps
+    }),
+    [nodeToolbarProps, showActions]
+  );
+  const nodeActions = useMemo(
+    () => nodeActionsProp || [
+      { id: "delete", label: labels?.deleteActionLabel, icon: /* @__PURE__ */ jsx(Delete, {}) },
+      {
+        id: "duplicate",
+        label: labels?.duplicateActionLabel,
+        icon: /* @__PURE__ */ jsx(Duplicate, {})
+      }
+    ],
+    [labels?.deleteActionLabel, labels?.duplicateActionLabel, nodeActionsProp]
+  );
+  useEffect(() => {
+    registerNode(id, {
+      label: title || "",
+      inputs,
+      outputs
+    });
+    return () => unregisterNode(id);
+  }, [id, title, inputs, outputs, registerNode, unregisterNode]);
+  const handleDefaultAction = useCallback(
+    (action) => {
+      if (!node)
+        return;
+      if (action.callback) {
+        action.callback(node);
+        return;
+      }
+      switch (action.id) {
+        case "delete":
+          reactFlowInstance.deleteElements({ nodes: [node] });
+          break;
+        case "duplicate":
+          reactFlowInstance.addNodes([
+            {
+              ...node,
+              id: uid(),
+              position: {
+                x: node.position.x,
+                y: node.position.y + (node.height || 0) + 20
+              },
+              selected: false,
+              zIndex: Number(theme.zIndices.overlay)
+            }
+          ]);
+          break;
+      }
+    },
+    [node, reactFlowInstance]
+  );
+  return useMemo(
+    () => ({
+      // state
+      id,
+      title,
+      icon,
+      color,
+      iconColor,
+      subtitle,
+      inputs,
+      inputEdges,
+      outputs,
+      outputEdges,
+      node,
+      nodeActions,
+      showActions,
+      // prop getters
+      getNodeToolbarProps,
+      // actions
+      toggleShowActions,
+      handleDefaultAction
+    }),
+    [
+      id,
+      title,
+      icon,
+      color,
+      iconColor,
+      subtitle,
+      inputs,
+      inputEdges,
+      outputs,
+      outputEdges,
+      node,
+      nodeActions,
+      showActions,
+      getNodeToolbarProps,
+      toggleShowActions,
+      handleDefaultAction
+    ]
+  );
+}
+export {
+  useHvNode
+};

package/dist/esm/Flow/hooks/useNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNode.js","sources":["../../../../src/Flow/hooks/useNode.tsx"],"sourcesContent":["import {\n  isValidElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { NodeToolbarProps } from \"reactflow\";\nimport { uid } from \"uid\";\nimport { useLabels } from \"@hitachivantara/uikit-react-core\";\nimport { Delete, Duplicate } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor, HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\nimport { identifyHandles } from \"../Node/utils\";\nimport {\n  HvFlowNodeAction,\n  HvFlowNodeInput,\n  HvFlowNodeInputGroup,\n  HvFlowNodeOutput,\n  HvFlowNodeOutputGroup,\n} from \"../types\";\nimport { useFlowContext } from \"./useFlowContext\";\nimport { useFlowInstance } from \"./useFlowInstance\";\nimport {\n  useFlowNode,\n  useFlowNodeInputEdges,\n  useFlowNodeOutputEdges,\n} from \"./useFlowNode\";\n\nconst DEFAULT_LABELS = {\n  deleteActionLabel: \"Delete\",\n  duplicateActionLabel: \"Duplicate\",\n};\n\nexport interface HvUseNodeParams {\n  id: string;\n  /** Node group ID */\n  groupId?: string;\n\n  title?: string;\n\n  subtitle?: string;\n\n  icon?: React.ReactNode;\n\n  color?: HvColorAny;\n  /** Node inputs */\n  inputs?: (HvFlowNodeInput | HvFlowNodeInputGroup)[];\n  /** Node outputs */\n  outputs?: (HvFlowNodeOutput | HvFlowNodeOutputGroup)[];\n  /** Node actions */\n  nodeActions?: HvFlowNodeAction[];\n  /** Labels used on the default actions. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /** Props for the NodeToolbar Component */\n  nodeToolbarProps?: NodeToolbarProps;\n}\n\nexport function useHvNode(props: HvUseNodeParams) {\n  const {\n    id,\n    title: titleProp,\n    icon: iconProp,\n    color: colorProp,\n    subtitle: subtitleProp,\n    nodeActions: nodeActionsProp,\n    inputs: inputsProp,\n    outputs: outputsProp,\n    groupId,\n    labels: labelsProps,\n    nodeToolbarProps,\n  } = props;\n\n  const { registerNode, unregisterNode } = useNodeMetaRegistry();\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n  const inputs = useMemo(() => identifyHandles(inputsProp), [inputsProp]);\n  const inputEdges = useFlowNodeInputEdges();\n  const outputs = useMemo(() => identifyHandles(outputsProp), [outputsProp]);\n  const outputEdges = useFlowNodeOutputEdges();\n  const { nodeGroups } = useFlowContext();\n\n  const node = useFlowNode();\n\n  const reactFlowInstance = useFlowInstance();\n\n  const nodeGroup = (groupId && nodeGroups && nodeGroups[groupId]) || undefined;\n\n  const title = titleProp || nodeGroup?.label;\n  const icon = iconProp || nodeGroup?.icon;\n  const color = getColor(colorProp || nodeGroup?.color);\n  const iconColor = isValidElement(icon)\n    ? getColor(icon.props.color || \"base_dark\")\n    : getColor(\"base_dark\");\n  const subtitle = subtitleProp || node?.data.nodeLabel;\n\n  const [showActions, setShowActions] = useState(false);\n\n  const toggleShowActions = useCallback(() => {\n    setShowActions(!showActions);\n  }, [showActions]);\n\n  const getNodeToolbarProps = useCallback(\n    () => ({\n      offset: 0,\n      isVisible: showActions,\n      ...nodeToolbarProps,\n    }),\n    [nodeToolbarProps, showActions],\n  );\n\n  const nodeActions = useMemo<HvFlowNodeAction[]>(\n    () =>\n      nodeActionsProp || [\n        { id: \"delete\", label: labels?.deleteActionLabel, icon: <Delete /> },\n        {\n          id: \"duplicate\",\n          label: labels?.duplicateActionLabel,\n          icon: <Duplicate />,\n        },\n      ],\n    [labels?.deleteActionLabel, labels?.duplicateActionLabel, nodeActionsProp],\n  );\n\n  useEffect(() => {\n    registerNode(id, {\n      label: title || \"\",\n      inputs,\n      outputs,\n    });\n    return () => unregisterNode(id);\n  }, [id, title, inputs, outputs, registerNode, unregisterNode]);\n\n  const handleDefaultAction = useCallback(\n    (action: HvFlowNodeAction) => {\n      if (!node) return;\n\n      if (action.callback) {\n        action.callback(node);\n        return;\n      }\n\n      // built-in actions\n      switch (action.id) {\n        case \"delete\":\n          reactFlowInstance.deleteElements({ nodes: [node] });\n          break;\n        case \"duplicate\":\n          reactFlowInstance.addNodes([\n            {\n              ...node,\n              id: uid(),\n              position: {\n                x: node.position.x,\n                y: node.position.y + (node.height || 0) + 20,\n              },\n              selected: false,\n              zIndex: Number(theme.zIndices.overlay),\n            },\n          ]);\n          break;\n        default:\n          break;\n      }\n    },\n    [node, reactFlowInstance],\n  );\n\n  return useMemo(\n    () => ({\n      // state\n      id,\n      title,\n      icon,\n      color,\n      iconColor,\n      subtitle,\n      inputs,\n      inputEdges,\n      outputs,\n      outputEdges,\n      node,\n      nodeActions,\n      showActions,\n      // prop getters\n      getNodeToolbarProps,\n      // actions\n      toggleShowActions,\n      handleDefaultAction,\n    }),\n    [\n      id,\n      title,\n      icon,\n      color,\n      iconColor,\n      subtitle,\n      inputs,\n      inputEdges,\n      outputs,\n      outputEdges,\n      node,\n      nodeActions,\n      showActions,\n      getNodeToolbarProps,\n      toggleShowActions,\n      handleDefaultAction,\n    ],\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/index.js

@@ -2,45 +2,55 @@ import { staticClasses } from "./Blade/Blade.styles.js";
 import { HvBlade } from "./Blade/Blade.js";
 import { staticClasses as staticClasses2 } from "./Blades/Blades.styles.js";
 import { HvBlades } from "./Blades/Blades.js";
-import { staticClasses as staticClasses3 } from "./Dashboard/Dashboard.styles.js";
+import { staticClasses as staticClasses3 } from "./Canvas/CanvasToolbar/CanvasToolbar.styles.js";
+import { HvCanvasToolbar } from "./Canvas/CanvasToolbar/CanvasToolbar.js";
+import { staticClasses as staticClasses4 } from "./Canvas/CanvasPanel/CanvasPanel.styles.js";
+import { HvCanvasPanel } from "./Canvas/CanvasPanel/CanvasPanel.js";
+import { staticClasses as staticClasses5 } from "./Canvas/CanvasTabs/CanvasTabs.styles.js";
+import { HvCanvasTabs } from "./Canvas/CanvasTabs/CanvasTabs.js";
+import { staticClasses as staticClasses6 } from "./Dashboard/Dashboard.styles.js";
 import { HvDashboard } from "./Dashboard/Dashboard.js";
-import { staticClasses as staticClasses4 } from "./Flow/Flow.styles.js";
+import { staticClasses as staticClasses7 } from "./Flow/Flow.styles.js";
 import { useNodeMetaRegistry } from "./Flow/FlowContext/NodeMetaContext.js";
 import { HvFlowBackground } from "./Flow/Background/Background.js";
 import { HvFlowControls } from "./Flow/Controls/Controls.js";
-import { staticClasses as staticClasses5 } from "./Flow/Minimap/Minimap.styles.js";
+import { staticClasses as staticClasses8 } from "./Flow/Minimap/Minimap.styles.js";
 import { HvFlowMinimap } from "./Flow/Minimap/Minimap.js";
-import { staticClasses as staticClasses6 } from "./Flow/Sidebar/Sidebar.styles.js";
+import { staticClasses as staticClasses9 } from "./Flow/Sidebar/Sidebar.styles.js";
 import { HvFlowSidebar } from "./Flow/Sidebar/Sidebar.js";
 import { HvFlowEmpty } from "./Flow/Empty/Empty.js";
 import { HvFlow } from "./Flow/Flow.js";
-import { staticClasses as staticClasses7 } from "./Flow/Node/BaseNode.styles.js";
+import { staticClasses as staticClasses10 } from "./Flow/Node/BaseNode.styles.js";
 import { DEFAULT_LABELS, HvFlowBaseNode } from "./Flow/Node/BaseNode.js";
-import { staticClasses as staticClasses8 } from "./Flow/Node/Node.styles.js";
+import { staticClasses as staticClasses11 } from "./Flow/Node/Node.styles.js";
 import { HvFlowNode } from "./Flow/Node/Node.js";
-import { staticClasses as staticClasses9 } from "./Flow/nodes/DashboardNode.styles.js";
+import { staticClasses as staticClasses12 } from "./Flow/nodes/DashboardNode.styles.js";
 import { HvDashboardNode } from "./Flow/nodes/DashboardNode.js";
 import { useFlowInputNodes, useFlowNode, useFlowNodeEdges, useFlowNodeInputEdges, useFlowNodeOutputEdges, useFlowNodeParents, useFlowNodeUtils, useFlowOutputNodes } from "./Flow/hooks/useFlowNode.js";
 import { useFlowContext } from "./Flow/hooks/useFlowContext.js";
 import { useFlowNodeMeta } from "./Flow/hooks/useFlowNodeMeta.js";
 import { useFlowInstance } from "./Flow/hooks/useFlowInstance.js";
-import { staticClasses as staticClasses10 } from "./StepNavigation/StepNavigation.styles.js";
+import { useHvNode } from "./Flow/hooks/useNode.js";
+import { staticClasses as staticClasses13 } from "./StepNavigation/StepNavigation.styles.js";
 import { HvStepNavigation } from "./StepNavigation/StepNavigation.js";
-import { staticClasses as staticClasses11 } from "./Wizard/Wizard.styles.js";
+import { staticClasses as staticClasses14 } from "./Wizard/Wizard.styles.js";
 import { HvWizard } from "./Wizard/Wizard.js";
-import { staticClasses as staticClasses12 } from "./Wizard/WizardActions/WizardActions.styles.js";
+import { staticClasses as staticClasses15 } from "./Wizard/WizardActions/WizardActions.styles.js";
 import { HvWizardActions } from "./Wizard/WizardActions/WizardActions.js";
-import { staticClasses as staticClasses13 } from "./Wizard/WizardContainer/WizardContainer.styles.js";
+import { staticClasses as staticClasses16 } from "./Wizard/WizardContainer/WizardContainer.styles.js";
 import { HvWizardContainer } from "./Wizard/WizardContainer/WizardContainer.js";
-import { staticClasses as staticClasses14 } from "./Wizard/WizardContent/WizardContent.styles.js";
+import { staticClasses as staticClasses17 } from "./Wizard/WizardContent/WizardContent.styles.js";
 import { HvWizardContent } from "./Wizard/WizardContent/WizardContent.js";
 import { default as default2 } from "./Wizard/WizardContext/WizardContext.js";
-import { staticClasses as staticClasses15 } from "./Wizard/WizardTitle/WizardTitle.styles.js";
+import { staticClasses as staticClasses18 } from "./Wizard/WizardTitle/WizardTitle.styles.js";
 import { HvWizardTitle } from "./Wizard/WizardTitle/WizardTitle.js";
 export {
   DEFAULT_LABELS,
   HvBlade,
   HvBlades,
+  HvCanvasPanel,
+  HvCanvasTabs,
+  HvCanvasToolbar,
   HvDashboard,
   HvDashboardNode,
   HvFlow,
@@ -60,14 +70,17 @@ export {
   HvWizardTitle,
   staticClasses as bladeClasses,
   staticClasses2 as bladesClasses,
-  staticClasses3 as dashboardClasses,
-  staticClasses7 as flowBaseNodeClasses,
-  staticClasses4 as flowClasses,
-  staticClasses5 as flowMinimapClasses,
-  staticClasses8 as flowNodeClasses,
-  staticClasses6 as flowSidebarClasses,
-  staticClasses9 as hvDashboardNodeClasses,
-  staticClasses10 as stepNavigationClasses,
+  staticClasses4 as canvasPanelClasses,
+  staticClasses5 as canvasTabsClasses,
+  staticClasses3 as canvasToolbarClasses,
+  staticClasses6 as dashboardClasses,
+  staticClasses10 as flowBaseNodeClasses,
+  staticClasses7 as flowClasses,
+  staticClasses8 as flowMinimapClasses,
+  staticClasses11 as flowNodeClasses,
+  staticClasses9 as flowSidebarClasses,
+  staticClasses12 as hvDashboardNodeClasses,
+  staticClasses13 as stepNavigationClasses,
   useFlowContext,
   useFlowInputNodes,
   useFlowInstance,
@@ -79,10 +92,11 @@ export {
   useFlowNodeParents,
   useFlowNodeUtils,
   useFlowOutputNodes,
+  useHvNode,
   useNodeMetaRegistry,
-  staticClasses12 as wizardActionsClasses,
-  staticClasses11 as wizardClasses,
-  staticClasses13 as wizardContainerClasses,
-  staticClasses14 as wizardContentClasses,
-  staticClasses15 as wizardTitleClasses
+  staticClasses15 as wizardActionsClasses,
+  staticClasses14 as wizardClasses,
+  staticClasses16 as wizardContainerClasses,
+  staticClasses17 as wizardContentClasses,
+  staticClasses18 as wizardTitleClasses
 };

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}