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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (135) hide show
  1. package/dist/{esm/Flow → Flow}/Background/Background.js +1 -1
  2. package/dist/{esm/Flow → Flow}/Controls/Controls.js +1 -1
  3. package/dist/{esm/Flow → Flow}/DroppableFlow.js +1 -1
  4. package/dist/{esm/Flow → Flow}/Empty/Empty.js +1 -1
  5. package/dist/{esm/Flow → Flow}/Empty/Empty.styles.js +1 -1
  6. package/dist/{esm/Flow → Flow}/Flow.js +1 -1
  7. package/dist/{esm/Flow → Flow}/Flow.styles.js +1 -1
  8. package/dist/{esm/Flow → Flow}/Minimap/Minimap.js +1 -1
  9. package/dist/{esm/Flow → Flow}/Node/BaseNode.js +1 -1
  10. package/dist/{esm/Flow → Flow}/Node/Node.js +0 -3
  11. package/dist/{esm/Flow → Flow}/Sidebar/Sidebar.js +1 -1
  12. package/dist/Flow/base.js +732 -0
  13. package/dist/{esm/Flow → Flow}/hooks/useFlowInstance.js +1 -1
  14. package/dist/{esm/Flow → Flow}/hooks/useFlowNode.js +4 -4
  15. package/dist/{esm/Flow → Flow}/hooks/useNodeId.js +1 -1
  16. package/dist/{esm/StepNavigation → StepNavigation}/DefaultNavigation/DefaultNavigation.js +1 -3
  17. package/dist/{esm/StepNavigation → StepNavigation}/SimpleNavigation/SimpleNavigation.js +1 -3
  18. package/dist/{esm/StepNavigation → StepNavigation}/StepNavigation.js +2 -7
  19. package/dist/{esm/Wizard → Wizard}/WizardTitle/WizardTitle.js +31 -47
  20. package/dist/{esm/Wizard → Wizard}/WizardTitle/WizardTitle.styles.js +0 -10
  21. package/dist/{types/index.d.ts → index.d.ts} +63 -178
  22. package/dist/{esm/index.js → index.js} +12 -18
  23. package/package.json +15 -15
  24. package/dist/cjs/Blade/Blade.cjs +0 -174
  25. package/dist/cjs/Blade/Blade.styles.cjs +0 -71
  26. package/dist/cjs/Blades/Blades.cjs +0 -104
  27. package/dist/cjs/Blades/Blades.styles.cjs +0 -11
  28. package/dist/cjs/Dashboard/Dashboard.cjs +0 -63
  29. package/dist/cjs/Dashboard/Dashboard.styles.cjs +0 -196
  30. package/dist/cjs/Flow/Background/Background.cjs +0 -19
  31. package/dist/cjs/Flow/Controls/Controls.cjs +0 -96
  32. package/dist/cjs/Flow/DroppableFlow.cjs +0 -204
  33. package/dist/cjs/Flow/Empty/Empty.cjs +0 -12
  34. package/dist/cjs/Flow/Empty/Empty.styles.cjs +0 -16
  35. package/dist/cjs/Flow/Flow.cjs +0 -33
  36. package/dist/cjs/Flow/Flow.styles.cjs +0 -19
  37. package/dist/cjs/Flow/FlowContext/FlowContext.cjs +0 -25
  38. package/dist/cjs/Flow/FlowContext/NodeMetaContext.cjs +0 -43
  39. package/dist/cjs/Flow/Minimap/Minimap.cjs +0 -30
  40. package/dist/cjs/Flow/Minimap/Minimap.styles.cjs +0 -10
  41. package/dist/cjs/Flow/Node/BaseNode.cjs +0 -192
  42. package/dist/cjs/Flow/Node/BaseNode.styles.cjs +0 -135
  43. package/dist/cjs/Flow/Node/Node.cjs +0 -115
  44. package/dist/cjs/Flow/Node/Node.styles.cjs +0 -42
  45. package/dist/cjs/Flow/Node/Parameters/ParamRenderer.cjs +0 -19
  46. package/dist/cjs/Flow/Node/Parameters/Select.cjs +0 -41
  47. package/dist/cjs/Flow/Node/Parameters/Slider.cjs +0 -33
  48. package/dist/cjs/Flow/Node/Parameters/Text.cjs +0 -19
  49. package/dist/cjs/Flow/Node/utils.cjs +0 -54
  50. package/dist/cjs/Flow/Sidebar/Sidebar.cjs +0 -141
  51. package/dist/cjs/Flow/Sidebar/Sidebar.styles.cjs +0 -24
  52. package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroup.cjs +0 -62
  53. package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.cjs +0 -34
  54. package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.cjs +0 -51
  55. package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.cjs +0 -35
  56. package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.cjs +0 -23
  57. package/dist/cjs/Flow/base.cjs +0 -411
  58. package/dist/cjs/Flow/hooks/useFlowContext.cjs +0 -6
  59. package/dist/cjs/Flow/hooks/useFlowInstance.cjs +0 -7
  60. package/dist/cjs/Flow/hooks/useFlowNode.cjs +0 -134
  61. package/dist/cjs/Flow/hooks/useFlowNodeMeta.cjs +0 -10
  62. package/dist/cjs/Flow/hooks/useNode.cjs +0 -159
  63. package/dist/cjs/Flow/hooks/useNodeId.cjs +0 -8
  64. package/dist/cjs/Flow/nodes/DashboardNode.cjs +0 -88
  65. package/dist/cjs/Flow/nodes/DashboardNode.styles.cjs +0 -16
  66. package/dist/cjs/Flow/nodes/StickyNode.cjs +0 -441
  67. package/dist/cjs/StepNavigation/DefaultNavigation/DefaultNavigation.cjs +0 -56
  68. package/dist/cjs/StepNavigation/DefaultNavigation/Step/Step.cjs +0 -78
  69. package/dist/cjs/StepNavigation/DefaultNavigation/Step/Step.styles.cjs +0 -35
  70. package/dist/cjs/StepNavigation/DefaultNavigation/utils.cjs +0 -34
  71. package/dist/cjs/StepNavigation/SimpleNavigation/Dot/Dot.cjs +0 -43
  72. package/dist/cjs/StepNavigation/SimpleNavigation/Dot/Dot.styles.cjs +0 -18
  73. package/dist/cjs/StepNavigation/SimpleNavigation/SimpleNavigation.cjs +0 -52
  74. package/dist/cjs/StepNavigation/SimpleNavigation/utils.cjs +0 -13
  75. package/dist/cjs/StepNavigation/StepNavigation.cjs +0 -188
  76. package/dist/cjs/StepNavigation/StepNavigation.styles.cjs +0 -34
  77. package/dist/cjs/StepNavigation/utils.cjs +0 -8
  78. package/dist/cjs/Wizard/Wizard.cjs +0 -108
  79. package/dist/cjs/Wizard/Wizard.styles.cjs +0 -8
  80. package/dist/cjs/Wizard/WizardActions/WizardActions.cjs +0 -132
  81. package/dist/cjs/Wizard/WizardActions/WizardActions.styles.cjs +0 -22
  82. package/dist/cjs/Wizard/WizardContainer/WizardContainer.cjs +0 -31
  83. package/dist/cjs/Wizard/WizardContainer/WizardContainer.styles.cjs +0 -15
  84. package/dist/cjs/Wizard/WizardContent/WizardContent.cjs +0 -121
  85. package/dist/cjs/Wizard/WizardContent/WizardContent.styles.cjs +0 -38
  86. package/dist/cjs/Wizard/WizardContext/WizardContext.cjs +0 -15
  87. package/dist/cjs/Wizard/WizardTitle/WizardTitle.cjs +0 -97
  88. package/dist/cjs/Wizard/WizardTitle/WizardTitle.styles.cjs +0 -27
  89. package/dist/cjs/index.cjs +0 -93
  90. package/dist/esm/Flow/base.js +0 -411
  91. package/dist/esm/Flow/nodes/DashboardNode.js +0 -89
  92. package/dist/esm/Flow/nodes/DashboardNode.styles.js +0 -16
  93. package/dist/esm/Flow/nodes/StickyNode.js +0 -439
  94. /package/dist/{esm/Blade → Blade}/Blade.js +0 -0
  95. /package/dist/{esm/Blade → Blade}/Blade.styles.js +0 -0
  96. /package/dist/{esm/Blades → Blades}/Blades.js +0 -0
  97. /package/dist/{esm/Blades → Blades}/Blades.styles.js +0 -0
  98. /package/dist/{esm/Dashboard → Dashboard}/Dashboard.js +0 -0
  99. /package/dist/{esm/Dashboard → Dashboard}/Dashboard.styles.js +0 -0
  100. /package/dist/{esm/Flow → Flow}/FlowContext/FlowContext.js +0 -0
  101. /package/dist/{esm/Flow → Flow}/FlowContext/NodeMetaContext.js +0 -0
  102. /package/dist/{esm/Flow → Flow}/Minimap/Minimap.styles.js +0 -0
  103. /package/dist/{esm/Flow → Flow}/Node/BaseNode.styles.js +0 -0
  104. /package/dist/{esm/Flow → Flow}/Node/Node.styles.js +0 -0
  105. /package/dist/{esm/Flow → Flow}/Node/Parameters/ParamRenderer.js +0 -0
  106. /package/dist/{esm/Flow → Flow}/Node/Parameters/Select.js +0 -0
  107. /package/dist/{esm/Flow → Flow}/Node/Parameters/Slider.js +0 -0
  108. /package/dist/{esm/Flow → Flow}/Node/Parameters/Text.js +0 -0
  109. /package/dist/{esm/Flow → Flow}/Node/utils.js +0 -0
  110. /package/dist/{esm/Flow → Flow}/Sidebar/Sidebar.styles.js +0 -0
  111. /package/dist/{esm/Flow → Flow}/Sidebar/SidebarGroup/SidebarGroup.js +0 -0
  112. /package/dist/{esm/Flow → Flow}/Sidebar/SidebarGroup/SidebarGroup.styles.js +0 -0
  113. /package/dist/{esm/Flow → Flow}/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.js +0 -0
  114. /package/dist/{esm/Flow → Flow}/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.js +0 -0
  115. /package/dist/{esm/Flow → Flow}/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.js +0 -0
  116. /package/dist/{esm/Flow → Flow}/hooks/useFlowContext.js +0 -0
  117. /package/dist/{esm/Flow → Flow}/hooks/useFlowNodeMeta.js +0 -0
  118. /package/dist/{esm/Flow → Flow}/hooks/useNode.js +0 -0
  119. /package/dist/{esm/StepNavigation → StepNavigation}/DefaultNavigation/Step/Step.js +0 -0
  120. /package/dist/{esm/StepNavigation → StepNavigation}/DefaultNavigation/Step/Step.styles.js +0 -0
  121. /package/dist/{esm/StepNavigation → StepNavigation}/DefaultNavigation/utils.js +0 -0
  122. /package/dist/{esm/StepNavigation → StepNavigation}/SimpleNavigation/Dot/Dot.js +0 -0
  123. /package/dist/{esm/StepNavigation → StepNavigation}/SimpleNavigation/Dot/Dot.styles.js +0 -0
  124. /package/dist/{esm/StepNavigation → StepNavigation}/SimpleNavigation/utils.js +0 -0
  125. /package/dist/{esm/StepNavigation → StepNavigation}/StepNavigation.styles.js +0 -0
  126. /package/dist/{esm/StepNavigation → StepNavigation}/utils.js +0 -0
  127. /package/dist/{esm/Wizard → Wizard}/Wizard.js +0 -0
  128. /package/dist/{esm/Wizard → Wizard}/Wizard.styles.js +0 -0
  129. /package/dist/{esm/Wizard → Wizard}/WizardActions/WizardActions.js +0 -0
  130. /package/dist/{esm/Wizard → Wizard}/WizardActions/WizardActions.styles.js +0 -0
  131. /package/dist/{esm/Wizard → Wizard}/WizardContainer/WizardContainer.js +0 -0
  132. /package/dist/{esm/Wizard → Wizard}/WizardContainer/WizardContainer.styles.js +0 -0
  133. /package/dist/{esm/Wizard → Wizard}/WizardContent/WizardContent.js +0 -0
  134. /package/dist/{esm/Wizard → Wizard}/WizardContent/WizardContent.styles.js +0 -0
  135. /package/dist/{esm/Wizard → Wizard}/WizardContext/WizardContext.js +0 -0
@@ -1,96 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("react/jsx-runtime");
4
- const reactflow = require("reactflow");
5
- const shallow = require("zustand/shallow");
6
- const uikitReactCore = require("@hitachivantara/uikit-react-core");
7
- const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
8
- const useFlowInstance = require("../hooks/useFlowInstance.cjs");
9
- const DEFAULT_LABELS = {
10
- fitView: "Fit view",
11
- zoomIn: "Zoom in",
12
- zoomOut: "Zoom out",
13
- interactive: "Interactive"
14
- };
15
- const selector = (state) => ({
16
- isInteractive: state.nodesDraggable || state.nodesConnectable || state.elementsSelectable,
17
- minZoomReached: state.transform[2] <= state.minZoom,
18
- maxZoomReached: state.transform[2] >= state.maxZoom
19
- });
20
- const HvFlowControls = ({
21
- onZoomIn: onZoomInProp,
22
- onZoomOut: onZoomOutProp,
23
- onFitView: onFitViewProp,
24
- labels: labelsProps,
25
- hideInteractive,
26
- hideFitView,
27
- hideZoom,
28
- position = "bottom-center",
29
- orientation = "horizontal",
30
- onInteractiveChange,
31
- fitViewOptions,
32
- children,
33
- ...others
34
- }) => {
35
- const { isInteractive, minZoomReached, maxZoomReached } = reactflow.useStore(
36
- selector,
37
- shallow.shallow
38
- );
39
- const store = reactflow.useStoreApi();
40
- const { zoomIn, zoomOut, fitView } = useFlowInstance.useFlowInstance();
41
- const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProps);
42
- const handleZoomIn = () => {
43
- zoomIn();
44
- onZoomInProp?.();
45
- };
46
- const handleZoomOut = () => {
47
- zoomOut();
48
- onZoomOutProp?.();
49
- };
50
- const handleFitView = () => {
51
- fitView(fitViewOptions);
52
- onFitViewProp?.();
53
- };
54
- const handleInteractive = () => {
55
- store.setState({
56
- nodesDraggable: !isInteractive,
57
- nodesConnectable: !isInteractive,
58
- elementsSelectable: !isInteractive
59
- });
60
- onInteractiveChange?.(!isInteractive);
61
- };
62
- return /* @__PURE__ */ jsxRuntime.jsx(reactflow.Panel, { position, ...others, children: /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvMultiButton, { vertical: orientation === "vertical", children: [
63
- !hideZoom && /* @__PURE__ */ jsxRuntime.jsx(
64
- uikitReactCore.HvButton,
65
- {
66
- icon: true,
67
- title: labels?.zoomIn,
68
- onClick: handleZoomIn,
69
- disabled: maxZoomReached,
70
- children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomIn, {})
71
- }
72
- ),
73
- !hideZoom && /* @__PURE__ */ jsxRuntime.jsx(
74
- uikitReactCore.HvButton,
75
- {
76
- icon: true,
77
- title: labels?.zoomOut,
78
- onClick: handleZoomOut,
79
- disabled: minZoomReached,
80
- children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomOut, {})
81
- }
82
- ),
83
- !hideFitView && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, title: labels?.fitView, onClick: handleFitView, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Focus, {}) }),
84
- !hideInteractive && /* @__PURE__ */ jsxRuntime.jsx(
85
- uikitReactCore.HvButton,
86
- {
87
- icon: true,
88
- title: labels?.interactive,
89
- onClick: handleInteractive,
90
- children: isInteractive ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Unlock, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Lock, {})
91
- }
92
- ),
93
- children
94
- ] }) });
95
- };
96
- exports.HvFlowControls = HvFlowControls;
@@ -1,204 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("react/jsx-runtime");
4
- const react = require("react");
5
- const core = require("@dnd-kit/core");
6
- const react$1 = require("@emotion/react");
7
- const reactflow = require("reactflow");
8
- const uid = require("uid");
9
- const uikitReactCore = require("@hitachivantara/uikit-react-core");
10
- const base = require("./base.cjs");
11
- const Flow_styles = require("./Flow.styles.cjs");
12
- const NodeMetaContext = require("./FlowContext/NodeMetaContext.cjs");
13
- const useFlowInstance = require("./hooks/useFlowInstance.cjs");
14
- const getNode = (nodes, nodeId) => {
15
- return nodes.find((n) => n.id === nodeId);
16
- };
17
- const validateEdge = (nodes, edges, connection, nodeMetaRegistry) => {
18
- const {
19
- source: sourceId,
20
- sourceHandle,
21
- target: targetId,
22
- targetHandle
23
- } = connection;
24
- if (!sourceHandle || !targetHandle || !sourceId || !targetId) return false;
25
- const sourceNode = getNode(nodes, sourceId);
26
- const targetNode = getNode(nodes, targetId);
27
- if (!sourceNode || !targetNode) return false;
28
- const sourceType = sourceNode.type;
29
- const targetType = targetNode.type;
30
- if (!sourceType || !targetType) return false;
31
- const inputs = nodeMetaRegistry[targetId]?.inputs || [];
32
- const outputs = nodeMetaRegistry[sourceId]?.outputs || [];
33
- const source = outputs.flatMap((out) => out.outputs || out).find((out) => out.id === sourceHandle);
34
- const target = inputs.flatMap((inp) => inp.inputs || inp).find((inp) => inp.id === targetHandle);
35
- const sourceProvides = source?.provides || "";
36
- const targetAccepts = target?.accepts || [];
37
- const sourceMaxConnections = source?.maxConnections;
38
- const targetMaxConnections = target?.maxConnections;
39
- let isValid = targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);
40
- if (isValid && targetMaxConnections != null) {
41
- const targetConnections = edges.filter(
42
- (edg) => edg.target === targetId && edg.targetHandle === targetHandle
43
- ).length;
44
- isValid = targetConnections < targetMaxConnections;
45
- }
46
- if (isValid && sourceMaxConnections != null) {
47
- const sourceConnections = edges.filter(
48
- (edg) => edg.source === sourceId && edg.sourceHandle === sourceHandle
49
- ).length;
50
- isValid = sourceConnections < sourceMaxConnections;
51
- }
52
- return isValid;
53
- };
54
- const HvDroppableFlow = ({
55
- id,
56
- className,
57
- children,
58
- onFlowChange,
59
- onDndDrop,
60
- classes: classesProp,
61
- nodes: initialNodes = [],
62
- edges: initialEdges = [],
63
- onConnect: onConnectProp,
64
- onNodesChange: onNodesChangeProp,
65
- onEdgesChange: onEdgesChangeProp,
66
- defaultEdgeOptions: defaultEdgeOptionsProp,
67
- nodeTypes,
68
- ...others
69
- }) => {
70
- const { classes, cx } = Flow_styles.useClasses(classesProp);
71
- const elementId = uikitReactCore.useUniqueId(id);
72
- const reactFlowInstance = useFlowInstance.useFlowInstance();
73
- const [nodes, setNodes] = react.useState(initialNodes);
74
- const [edges, setEdges] = react.useState(initialEdges);
75
- const nodesRef = react.useRef(initialNodes);
76
- const edgesRef = react.useRef(initialEdges);
77
- const updateNodes = (nds) => {
78
- setNodes(nds);
79
- nodesRef.current = nds;
80
- };
81
- const updateEdges = (eds) => {
82
- setEdges(eds);
83
- edgesRef.current = eds;
84
- };
85
- const { setNodeRef } = core.useDroppable({
86
- id: elementId
87
- });
88
- const handleDragEnd = react.useCallback(
89
- (event) => {
90
- if (event.over?.id !== elementId) return;
91
- const hvFlow = event.active.data.current?.hvFlow;
92
- const type = hvFlow?.type;
93
- if (!type || !nodeTypes?.[type]) {
94
- return;
95
- }
96
- const position = reactFlowInstance.screenToFlowPosition({
97
- x: hvFlow?.x || 0,
98
- y: hvFlow?.y || 0
99
- });
100
- const data = {
101
- nodeLabel: hvFlow?.label,
102
- ...hvFlow?.data
103
- };
104
- const newNode = {
105
- id: uid.uid(),
106
- position,
107
- data,
108
- type
109
- };
110
- if (onDndDrop) {
111
- onDndDrop(event, newNode);
112
- return;
113
- }
114
- updateNodes(nodes.concat(newNode));
115
- },
116
- [elementId, nodeTypes, nodes, onDndDrop, reactFlowInstance]
117
- );
118
- core.useDndMonitor({
119
- onDragEnd: handleDragEnd
120
- });
121
- const handleFlowChange = react.useCallback(
122
- (nds, eds) => {
123
- const isDragging = nds.find((node) => node.dragging);
124
- if (!isDragging) {
125
- onFlowChange?.(nds, eds);
126
- }
127
- },
128
- [onFlowChange]
129
- );
130
- const handleConnect = react.useCallback(
131
- (connection) => {
132
- const eds = reactflow.addEdge(connection, edgesRef.current);
133
- updateEdges(eds);
134
- handleFlowChange(nodesRef.current, eds);
135
- onConnectProp?.(connection);
136
- },
137
- [handleFlowChange, onConnectProp]
138
- );
139
- const handleNodesChange = react.useCallback(
140
- (changes) => {
141
- const nds = reactflow.applyNodeChanges(changes, nodesRef.current);
142
- updateNodes(nds);
143
- handleFlowChange(nds, edgesRef.current);
144
- onNodesChangeProp?.(changes);
145
- },
146
- [handleFlowChange, onNodesChangeProp]
147
- );
148
- const handleEdgesChange = react.useCallback(
149
- (changes) => {
150
- const eds = reactflow.applyEdgeChanges(changes, edgesRef.current);
151
- updateEdges(eds);
152
- handleFlowChange(nodesRef.current, eds);
153
- onEdgesChangeProp?.(changes);
154
- },
155
- [handleFlowChange, onEdgesChangeProp]
156
- );
157
- const { registry } = NodeMetaContext.useNodeMetaRegistry();
158
- const isValidConnection = (connection) => validateEdge(nodes, edges, connection, registry);
159
- const defaultEdgeOptions = {
160
- markerEnd: {
161
- type: reactflow.MarkerType.ArrowClosed,
162
- height: 20,
163
- width: 20
164
- },
165
- type: "smoothstep",
166
- pathOptions: {
167
- borderRadius: 40
168
- },
169
- ...defaultEdgeOptionsProp
170
- };
171
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
172
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Global, { styles: base.flowStyles }),
173
- /* @__PURE__ */ jsxRuntime.jsx(
174
- "div",
175
- {
176
- id: elementId,
177
- ref: setNodeRef,
178
- className: cx(classes.root, className),
179
- children: /* @__PURE__ */ jsxRuntime.jsx(
180
- reactflow.ReactFlow,
181
- {
182
- nodes,
183
- edges,
184
- nodeTypes,
185
- onNodesChange: handleNodesChange,
186
- onEdgesChange: handleEdgesChange,
187
- onConnect: handleConnect,
188
- isValidConnection,
189
- defaultEdgeOptions,
190
- snapGrid: [1, 1],
191
- snapToGrid: true,
192
- onError: (code, message) => {
193
- },
194
- ...others,
195
- children
196
- }
197
- )
198
- }
199
- )
200
- ] });
201
- };
202
- exports.flowClasses = Flow_styles.staticClasses;
203
- exports.HvDroppableFlow = HvDroppableFlow;
204
- exports.getNode = getNode;
@@ -1,12 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("react/jsx-runtime");
4
- const reactflow = require("reactflow");
5
- const uikitReactCore = require("@hitachivantara/uikit-react-core");
6
- const Empty_styles = require("./Empty.styles.cjs");
7
- const HvFlowEmpty = ({ className, ...others }) => {
8
- const { classes, cx } = Empty_styles.useClasses();
9
- const nodes = reactflow.useNodes();
10
- return !nodes || (nodes.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvEmptyState, { className: cx(classes.root, className), ...others }) : null);
11
- };
12
- exports.HvFlowEmpty = HvFlowEmpty;
@@ -1,16 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const uikitReactCore = require("@hitachivantara/uikit-react-core");
4
- const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlowEmpty", {
5
- root: {
6
- width: "100%",
7
- height: "100%",
8
- alignItems: "center",
9
- justifyContent: "center",
10
- backgroundColor: uikitReactCore.theme.colors.backgroundColor,
11
- position: "absolute",
12
- zIndex: uikitReactCore.theme.zIndices.popover
13
- }
14
- });
15
- exports.staticClasses = staticClasses;
16
- exports.useClasses = useClasses;
@@ -1,33 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("react/jsx-runtime");
4
- const core = require("@dnd-kit/core");
5
- const modifiers = require("@dnd-kit/modifiers");
6
- const reactflow = require("reactflow");
7
- const DroppableFlow = require("./DroppableFlow.cjs");
8
- const FlowContext = require("./FlowContext/FlowContext.cjs");
9
- const HvFlow = ({
10
- nodeGroups,
11
- sidebar,
12
- defaultActions,
13
- dndContextProps,
14
- ...others
15
- }) => {
16
- const sensors = core.useSensors(
17
- core.useSensor(core.PointerSensor),
18
- core.useSensor(core.KeyboardSensor)
19
- );
20
- return /* @__PURE__ */ jsxRuntime.jsx(reactflow.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(FlowContext.HvFlowProvider, { nodeGroups, defaultActions, children: /* @__PURE__ */ jsxRuntime.jsxs(
21
- core.DndContext,
22
- {
23
- sensors,
24
- modifiers: [modifiers.restrictToWindowEdges],
25
- ...dndContextProps,
26
- children: [
27
- /* @__PURE__ */ jsxRuntime.jsx(DroppableFlow.HvDroppableFlow, { ...others }),
28
- sidebar
29
- ]
30
- }
31
- ) }) });
32
- };
33
- exports.HvFlow = HvFlow;
@@ -1,19 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const uikitReactCore = require("@hitachivantara/uikit-react-core");
4
- const BaseNode_styles = require("./Node/BaseNode.styles.cjs");
5
- require("react/jsx-runtime");
6
- require("reactflow");
7
- require("@hitachivantara/uikit-react-utils");
8
- const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlow", {
9
- root: {
10
- height: "100%",
11
- [`& .selected > .${BaseNode_styles.staticClasses.root}`]: {
12
- border: `1px solid ${uikitReactCore.theme.colors.textDisabled}`,
13
- borderRadius: uikitReactCore.theme.radii.round,
14
- boxSizing: "border-box"
15
- }
16
- }
17
- });
18
- exports.staticClasses = staticClasses;
19
- exports.useClasses = useClasses;
@@ -1,25 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("react/jsx-runtime");
4
- const react = require("react");
5
- const NodeMetaContext = require("./NodeMetaContext.cjs");
6
- const HvFlowContext = react.createContext({});
7
- const HvFlowProvider = ({
8
- nodeGroups,
9
- defaultActions,
10
- children
11
- }) => {
12
- const [expandedNodeGroups, setExpandedNodeGroups] = react.useState([]);
13
- const value = react.useMemo(
14
- () => ({
15
- nodeGroups,
16
- defaultActions,
17
- expandedNodeGroups,
18
- setExpandedNodeGroups
19
- }),
20
- [nodeGroups, defaultActions, expandedNodeGroups]
21
- );
22
- return /* @__PURE__ */ jsxRuntime.jsx(NodeMetaContext.HvFlowNodeMetaProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(HvFlowContext.Provider, { value, children }) });
23
- };
24
- exports.HvFlowContext = HvFlowContext;
25
- exports.HvFlowProvider = HvFlowProvider;
@@ -1,43 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("react/jsx-runtime");
4
- const react = require("react");
5
- const HvFlowNodeMetaContext = react.createContext(void 0);
6
- const HvFlowNodeMetaProvider = ({
7
- children
8
- }) => {
9
- const registryRef = react.useRef({});
10
- const registerNode = react.useCallback((id, nodeInfo) => {
11
- registryRef.current[id] = nodeInfo;
12
- }, []);
13
- const unregisterNode = react.useCallback((id) => {
14
- delete registryRef.current[id];
15
- }, []);
16
- const getRegistry = react.useCallback(() => {
17
- return registryRef.current;
18
- }, []);
19
- const value = react.useMemo(
20
- () => ({
21
- registerNode,
22
- unregisterNode,
23
- getRegistry
24
- }),
25
- [registerNode, unregisterNode, getRegistry]
26
- );
27
- return /* @__PURE__ */ jsxRuntime.jsx(HvFlowNodeMetaContext.Provider, { value, children });
28
- };
29
- function useNodeMetaRegistry() {
30
- const context = react.useContext(HvFlowNodeMetaContext);
31
- if (context === void 0) {
32
- throw new Error(
33
- "useNodeRegistry must be used within a HvFlowNodeMetaProvider"
34
- );
35
- }
36
- return {
37
- registerNode: context.registerNode,
38
- unregisterNode: context.unregisterNode,
39
- registry: context.getRegistry()
40
- };
41
- }
42
- exports.HvFlowNodeMetaProvider = HvFlowNodeMetaProvider;
43
- exports.useNodeMetaRegistry = useNodeMetaRegistry;
@@ -1,30 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("react/jsx-runtime");
4
- const reactflow = require("reactflow");
5
- const uikitStyles = require("@hitachivantara/uikit-styles");
6
- const Minimap_styles = require("./Minimap.styles.cjs");
7
- const HvFlowMinimap = ({
8
- nodeColor = "border",
9
- maskColor = "borderSubtle",
10
- maskStrokeColor = "borderSubtle",
11
- nodeStrokeColor = "border",
12
- classes: classesProp,
13
- className,
14
- ...others
15
- }) => {
16
- const { classes, cx } = Minimap_styles.useClasses(classesProp);
17
- return /* @__PURE__ */ jsxRuntime.jsx(
18
- reactflow.MiniMap,
19
- {
20
- className: cx(classes.root, className),
21
- nodeColor: typeof nodeColor === "string" ? uikitStyles.getColor(nodeColor, "border") : nodeColor,
22
- nodeStrokeColor: typeof nodeStrokeColor === "string" ? uikitStyles.getColor(nodeStrokeColor, "border") : nodeStrokeColor,
23
- maskColor: uikitStyles.getColor(maskColor, "borderSubtle"),
24
- maskStrokeColor: uikitStyles.getColor(maskStrokeColor, "borderSubtle"),
25
- ...others
26
- }
27
- );
28
- };
29
- exports.flowMinimapClasses = Minimap_styles.staticClasses;
30
- exports.HvFlowMinimap = HvFlowMinimap;
@@ -1,10 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const uikitReactCore = require("@hitachivantara/uikit-react-core");
4
- const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlowMinimap", {
5
- root: {
6
- "&.react-flow__minimap": { backgroundColor: uikitReactCore.theme.colors.bgPage }
7
- }
8
- });
9
- exports.staticClasses = staticClasses;
10
- exports.useClasses = useClasses;
@@ -1,192 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("react/jsx-runtime");
4
- const reactflow = require("reactflow");
5
- const uikitReactCore = require("@hitachivantara/uikit-react-core");
6
- const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
7
- const BaseNode_styles = require("./BaseNode.styles.cjs");
8
- const utils = require("./utils.cjs");
9
- const useNode = require("../hooks/useNode.cjs");
10
- const DEFAULT_LABELS = {
11
- outputsTitle: "Outputs",
12
- inputsTitle: "Inputs",
13
- deleteActionLabel: "Delete",
14
- duplicateActionLabel: "Duplicate"
15
- };
16
- const HvFlowBaseNode = ({
17
- id,
18
- title: titleProp,
19
- headerItems,
20
- icon: iconProp,
21
- color: colorProp,
22
- inputs: inputsProp,
23
- outputs: outputsProp,
24
- nodeActions: nodeActionsProp,
25
- footer,
26
- classes: classesProp,
27
- labels: labelsProp,
28
- className,
29
- children
30
- }) => {
31
- const {
32
- toggleShowActions,
33
- getNodeToolbarProps,
34
- handleDefaultAction,
35
- nodeActions,
36
- title,
37
- icon,
38
- color,
39
- iconColor,
40
- inputEdges,
41
- inputs,
42
- outputEdges,
43
- outputs,
44
- node
45
- } = useNode.useHvNode({
46
- id,
47
- title: titleProp,
48
- inputs: inputsProp,
49
- outputs: outputsProp,
50
- icon: iconProp,
51
- color: colorProp,
52
- labels: labelsProp,
53
- nodeActions: nodeActionsProp
54
- });
55
- const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
56
- const { classes, cx } = BaseNode_styles.useClasses(classesProp);
57
- const renderOutput = (output) => {
58
- const edgeConnected = utils.isConnected(id, "source", output.id, outputEdges);
59
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.outputContainer, children: [
60
- /* @__PURE__ */ jsxRuntime.jsx(
61
- reactflow.Handle,
62
- {
63
- type: "source",
64
- isConnectableEnd: false,
65
- id: output.id,
66
- position: reactflow.Position.Right,
67
- className: cx(classes.handle, {
68
- [classes.handleConnected]: edgeConnected
69
- })
70
- }
71
- ),
72
- output.isMandatory && !edgeConnected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.mandatory }),
73
- /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "div", children: output.label })
74
- ] }, output.id);
75
- };
76
- const renderInput = (input) => {
77
- const edgeConnected = utils.isConnected(id, "target", input.id, inputEdges);
78
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.inputContainer, children: [
79
- /* @__PURE__ */ jsxRuntime.jsx(
80
- reactflow.Handle,
81
- {
82
- type: "target",
83
- isConnectableStart: false,
84
- id: input.id,
85
- position: reactflow.Position.Left,
86
- className: cx(classes.handle, {
87
- [classes.handleConnected]: edgeConnected
88
- })
89
- }
90
- ),
91
- /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "div", children: input.label }),
92
- input.isMandatory && !edgeConnected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.mandatory })
93
- ] }, input.id);
94
- };
95
- if (!node) return null;
96
- return /* @__PURE__ */ jsxRuntime.jsxs(
97
- "div",
98
- {
99
- style: uikitReactUtils.mergeStyles(void 0, {
100
- "--node-color": color
101
- }),
102
- className: cx(
103
- "nowheel",
104
- // Disables the default canvas pan behaviour when scrolling inside the node
105
- classes.root,
106
- className
107
- ),
108
- onMouseEnter: toggleShowActions,
109
- onMouseLeave: toggleShowActions,
110
- children: [
111
- /* @__PURE__ */ jsxRuntime.jsx(reactflow.NodeToolbar, { ...getNodeToolbarProps(), children: nodeActions?.map((action) => /* @__PURE__ */ jsxRuntime.jsx(
112
- uikitReactCore.HvIconButton,
113
- {
114
- title: action.label,
115
- onClick: () => handleDefaultAction(action),
116
- children: utils.renderedIcon(action.icon)
117
- },
118
- action.id
119
- )) }),
120
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.headerContainer, children: [
121
- /* @__PURE__ */ jsxRuntime.jsxs(
122
- "div",
123
- {
124
- style: uikitReactUtils.mergeStyles(void 0, {
125
- "--icon-color": iconColor
126
- }),
127
- className: classes.titleContainer,
128
- children: [
129
- icon,
130
- /* @__PURE__ */ jsxRuntime.jsx(
131
- uikitReactCore.HvTypography,
132
- {
133
- component: "p",
134
- variant: "title4",
135
- className: classes.title,
136
- children: title
137
- }
138
- )
139
- ]
140
- }
141
- ),
142
- headerItems && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex" }, children: headerItems })
143
- ] }),
144
- children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.contentContainer, children }),
145
- inputs && inputs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
146
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputsTitleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: labels?.inputsTitle }) }),
147
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputsContainer, children: inputs?.map((input, idx) => {
148
- if (!utils.isInputGroup(input)) return renderInput(input);
149
- return /* @__PURE__ */ jsxRuntime.jsxs(
150
- "div",
151
- {
152
- className: classes.inputGroupContainer,
153
- children: [
154
- /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "div", variant: "label", children: input.label }),
155
- input.inputs.map(
156
- (inp) => renderInput(inp)
157
- )
158
- ]
159
- },
160
- `group${idx}`
161
- );
162
- }) })
163
- ] }),
164
- outputs && outputs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
165
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.outputsTitleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: labels?.outputsTitle }) }),
166
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.outputsContainer, children: outputs?.map((output, idx) => {
167
- if (!utils.isOutputGroup(output)) {
168
- return renderOutput(output);
169
- }
170
- return /* @__PURE__ */ jsxRuntime.jsxs(
171
- "div",
172
- {
173
- className: classes.outputGroupContainer,
174
- children: [
175
- /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "div", variant: "label", children: output.label }),
176
- output.outputs.map((out) => {
177
- return renderOutput(out);
178
- })
179
- ]
180
- },
181
- `group${idx}`
182
- );
183
- }) })
184
- ] }),
185
- footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.footerContainer, children: footer })
186
- ]
187
- }
188
- );
189
- };
190
- exports.flowBaseNodeClasses = BaseNode_styles.staticClasses;
191
- exports.DEFAULT_LABELS = DEFAULT_LABELS;
192
- exports.HvFlowBaseNode = HvFlowBaseNode;