@hitachivantara/uikit-react-lab 5.35.12 → 5.36.1

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/Toolbar/Toolbar.styles.js";
+import { HvCanvasToolbar } from "./Canvas/Toolbar/Toolbar.js";
+import { staticClasses as staticClasses4 } from "./Canvas/Panel/Panel.styles.js";
+import { HvCanvasPanel } from "./Canvas/Panel/Panel.js";
+import { staticClasses as staticClasses5 } from "./Canvas/Tabs/Tabs.styles.js";
+import { HvCanvasTabs } from "./Canvas/Tabs/Tabs.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}