@hitachivantara/uikit-react-lab 5.38.2 → 5.39.0

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 (16) hide show
  1. package/dist/cjs/Flow/base.cjs +7 -7
  2. package/dist/cjs/Flow/hooks/useFlowNode.cjs +37 -2
  3. package/dist/cjs/Flow/hooks/useNode.cjs +10 -2
  4. package/dist/cjs/StepNavigation/StepNavigation.cjs +5 -7
  5. package/dist/cjs/index.cjs +1 -0
  6. package/dist/esm/Flow/base.js +7 -7
  7. package/dist/esm/Flow/base.js.map +1 -1
  8. package/dist/esm/Flow/hooks/useFlowNode.js +37 -2
  9. package/dist/esm/Flow/hooks/useFlowNode.js.map +1 -1
  10. package/dist/esm/Flow/hooks/useNode.js +11 -3
  11. package/dist/esm/Flow/hooks/useNode.js.map +1 -1
  12. package/dist/esm/StepNavigation/StepNavigation.js +5 -7
  13. package/dist/esm/StepNavigation/StepNavigation.js.map +1 -1
  14. package/dist/esm/index.js +2 -1
  15. package/dist/types/index.d.ts +7 -0
  16. package/package.json +6 -5
package/dist/cjs/Flow/base.cjs CHANGED
@@ -231,8 +231,7 @@ const flowStyles = react.css`
231
231
  }
232
232
  .react-flow__node-default,
233
233
  .react-flow__node-input,
234
- .react-flow__node-output,
235
- .react-flow__node-group {
234
+ .react-flow__node-output {
236
235
  padding: ${uikitReactCore.theme.space.sm};
237
236
  border-radius: ${uikitReactCore.theme.radii.round};
238
237
  width: 150px;
@@ -241,6 +240,10 @@ const flowStyles = react.css`
241
240
  border: 1px solid ${uikitReactCore.theme.colors.negative};
242
241
  background-color: ${uikitReactCore.theme.colors.negative_20};
243
242
  }
243
+ .react-flow__node-group {
244
+ color: ${uikitReactCore.theme.colors.secondary};
245
+ text-align: center;
246
+ }
244
247
  .react-flow__node-default::before {
245
248
  content: "Unknown node type";
246
249
  display: block;
@@ -249,7 +252,6 @@ const flowStyles = react.css`
249
252
  .react-flow__node-input.selectable:hover,
250
253
  .react-flow__node-output.selectable:hover,
251
254
  .react-flow__node-group.selectable:hover {
252
- box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
253
255
  }
254
256
  .react-flow__node-default.selectable.selected,
255
257
  .react-flow__node-default.selectable:focus,
@@ -263,7 +265,6 @@ const flowStyles = react.css`
263
265
  .react-flow__node-group.selectable.selected,
264
266
  .react-flow__node-group.selectable:focus,
265
267
  .react-flow__node-group.selectable:focus-visible {
266
- box-shadow: 0 0 0 0.5px #1a192b;
267
268
  }
268
269
  .react-flow__node-group {
269
270
  background-color: rgba(240, 240, 240, 0.25);
@@ -271,7 +272,6 @@ const flowStyles = react.css`
271
272
  .react-flow__nodesselection-rect,
272
273
  .react-flow__selection {
273
274
  background: rgba(0, 89, 220, 0.08);
274
- border: 1px dotted rgba(0, 89, 220, 0.8);
275
275
  }
276
276
  .react-flow__nodesselection-rect:focus,
277
277
  .react-flow__nodesselection-rect:focus-visible,
@@ -373,9 +373,9 @@ const flowStyles = react.css`
373
373
  }
374
374
  /* line styles */
375
375
  .react-flow__resize-control.line {
376
- border-color: ${uikitReactCore.theme.colors.primary};
376
+ border-color: ${uikitReactCore.theme.colors.primary_80};
377
377
  border-width: 0;
378
- border-style: solid;
378
+ border-style: dashed;
379
379
  }
380
380
  .react-flow__resize-control.line.left,
381
381
  .react-flow__resize-control.line.right {
package/dist/cjs/Flow/hooks/useFlowNode.cjs CHANGED
@@ -5,6 +5,14 @@ const ReactFlow = require("reactflow");
5
5
  const shallow = require("zustand/shallow");
6
6
  const useFlowInstance = require("./useFlowInstance.cjs");
7
7
  const useNodeId = require("./useNodeId.cjs");
8
+ function relativePosition(positionA, positionB) {
9
+ if (positionA && positionB)
10
+ return {
11
+ x: positionB.x - positionA.x,
12
+ y: positionB.y - positionA.y
13
+ };
14
+ return { x: 0, y: 0 };
15
+ }
8
16
  function useFlowNode(id) {
9
17
  const nodeId = useNodeId.useNodeId(id);
10
18
  const nodeSelector = React.useCallback(
@@ -82,17 +90,44 @@ function useFlowNodeUtils(id) {
82
90
  },
83
91
  [nodeId, reactFlowInstance]
84
92
  );
93
+ const setNodeParent = React.useCallback(
94
+ (node, extent) => {
95
+ if (!nodeId) return;
96
+ reactFlowInstance.setNodes((nodes) => {
97
+ return nodes.map((n) => {
98
+ if (n.id === nodeId) {
99
+ return {
100
+ ...n,
101
+ parentId: node ? node.id : void 0,
102
+ extent,
103
+ position: node ? relativePosition(node.position, n.position) : n.positionAbsolute ?? n.position
104
+ };
105
+ }
106
+ return n;
107
+ });
108
+ });
109
+ },
110
+ [nodeId, reactFlowInstance]
111
+ );
85
112
  return React.useMemo(
86
113
  () => ({
87
- setNodeData
114
+ setNodeData,
115
+ setNodeParent
88
116
  }),
89
- [setNodeData]
117
+ [setNodeData, setNodeParent]
90
118
  );
91
119
  }
120
+ function useFlowNodeIntersections(id) {
121
+ const nodeId = useNodeId.useNodeId(id);
122
+ const node = useFlowNode(nodeId ?? "");
123
+ const reactFlowInstance = useFlowInstance.useFlowInstance();
124
+ return node ? reactFlowInstance.getIntersectingNodes(node, false) : [];
125
+ }
92
126
  exports.useFlowInputNodes = useFlowInputNodes;
93
127
  exports.useFlowNode = useFlowNode;
94
128
  exports.useFlowNodeEdges = useFlowNodeEdges;
95
129
  exports.useFlowNodeInputEdges = useFlowNodeInputEdges;
130
+ exports.useFlowNodeIntersections = useFlowNodeIntersections;
96
131
  exports.useFlowNodeOutputEdges = useFlowNodeOutputEdges;
97
132
  exports.useFlowNodeParents = useFlowNodeParents;
98
133
  exports.useFlowNodeUtils = useFlowNodeUtils;
package/dist/cjs/Flow/hooks/useNode.cjs CHANGED
@@ -36,6 +36,8 @@ function useHvNode(props) {
36
36
  const outputs = React.useMemo(() => utils.identifyHandles(outputsProp), [outputsProp]);
37
37
  const outputEdges = useFlowNode.useFlowNodeOutputEdges();
38
38
  const { nodeGroups } = useFlowContext.useFlowContext();
39
+ const intersections = useFlowNode.useFlowNodeIntersections();
40
+ const { setNodeParent, setNodeData } = useFlowNode.useFlowNodeUtils();
39
41
  const node = useFlowNode.useFlowNode();
40
42
  const reactFlowInstance = useFlowInstance.useFlowInstance();
41
43
  const nodeGroup = groupId && nodeGroups && nodeGroups[groupId] || void 0;
@@ -120,11 +122,14 @@ function useHvNode(props) {
120
122
  node,
121
123
  nodeActions,
122
124
  showActions,
125
+ intersections,
123
126
  // prop getters
124
127
  getNodeToolbarProps,
125
128
  // actions
126
129
  toggleShowActions,
127
- handleDefaultAction
130
+ handleDefaultAction,
131
+ setNodeData,
132
+ setNodeParent
128
133
  }),
129
134
  [
130
135
  id,
@@ -140,9 +145,12 @@ function useHvNode(props) {
140
145
  node,
141
146
  nodeActions,
142
147
  showActions,
148
+ intersections,
143
149
  getNodeToolbarProps,
144
150
  toggleShowActions,
145
- handleDefaultAction
151
+ handleDefaultAction,
152
+ setNodeData,
153
+ setNodeParent
146
154
  ]
147
155
  );
148
156
  }
package/dist/cjs/StepNavigation/StepNavigation.cjs CHANGED
@@ -69,13 +69,11 @@ const HvStepNavigation = ({
69
69
  const StepContainer = styledLi(containerSize);
70
70
  const Step = styledDiv(Math.max(containerSize, 30));
71
71
  const stepProps = {
72
- ...{
73
- size: stepSizeKey,
74
- state,
75
- title,
76
- number: index + 1,
77
- ...props
78
- }
72
+ size: stepSizeKey,
73
+ state,
74
+ title,
75
+ number: index + 1,
76
+ ...props
79
77
  };
80
78
  const stepElement = /* @__PURE__ */ jsxRuntime.jsx(StepContainer, { className: classes.li, children: hasTitles ? /* @__PURE__ */ jsxRuntime.jsx(
81
79
  StepComponent,
package/dist/cjs/index.cjs CHANGED
@@ -67,6 +67,7 @@ exports.useFlowInputNodes = useFlowNode.useFlowInputNodes;
67
67
  exports.useFlowNode = useFlowNode.useFlowNode;
68
68
  exports.useFlowNodeEdges = useFlowNode.useFlowNodeEdges;
69
69
  exports.useFlowNodeInputEdges = useFlowNode.useFlowNodeInputEdges;
70
+ exports.useFlowNodeIntersections = useFlowNode.useFlowNodeIntersections;
70
71
  exports.useFlowNodeOutputEdges = useFlowNode.useFlowNodeOutputEdges;
71
72
  exports.useFlowNodeParents = useFlowNode.useFlowNodeParents;
72
73
  exports.useFlowNodeUtils = useFlowNode.useFlowNodeUtils;
package/dist/esm/Flow/base.js CHANGED
@@ -229,8 +229,7 @@ const flowStyles = css`
229
229
  }
230
230
  .react-flow__node-default,
231
231
  .react-flow__node-input,
232
- .react-flow__node-output,
233
- .react-flow__node-group {
232
+ .react-flow__node-output {
234
233
  padding: ${theme.space.sm};
235
234
  border-radius: ${theme.radii.round};
236
235
  width: 150px;
@@ -239,6 +238,10 @@ const flowStyles = css`
239
238
  border: 1px solid ${theme.colors.negative};
240
239
  background-color: ${theme.colors.negative_20};
241
240
  }
241
+ .react-flow__node-group {
242
+ color: ${theme.colors.secondary};
243
+ text-align: center;
244
+ }
242
245
  .react-flow__node-default::before {
243
246
  content: "Unknown node type";
244
247
  display: block;
@@ -247,7 +250,6 @@ const flowStyles = css`
247
250
  .react-flow__node-input.selectable:hover,
248
251
  .react-flow__node-output.selectable:hover,
249
252
  .react-flow__node-group.selectable:hover {
250
- box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
251
253
  }
252
254
  .react-flow__node-default.selectable.selected,
253
255
  .react-flow__node-default.selectable:focus,
@@ -261,7 +263,6 @@ const flowStyles = css`
261
263
  .react-flow__node-group.selectable.selected,
262
264
  .react-flow__node-group.selectable:focus,
263
265
  .react-flow__node-group.selectable:focus-visible {
264
- box-shadow: 0 0 0 0.5px #1a192b;
265
266
  }
266
267
  .react-flow__node-group {
267
268
  background-color: rgba(240, 240, 240, 0.25);
@@ -269,7 +270,6 @@ const flowStyles = css`
269
270
  .react-flow__nodesselection-rect,
270
271
  .react-flow__selection {
271
272
  background: rgba(0, 89, 220, 0.08);
272
- border: 1px dotted rgba(0, 89, 220, 0.8);
273
273
  }
274
274
  .react-flow__nodesselection-rect:focus,
275
275
  .react-flow__nodesselection-rect:focus-visible,
@@ -371,9 +371,9 @@ const flowStyles = css`
371
371
  }
372
372
  /* line styles */
373
373
  .react-flow__resize-control.line {
374
- border-color: ${theme.colors.primary};
374
+ border-color: ${theme.colors.primary_80};
375
375
  border-width: 0;
376
- border-style: solid;
376
+ border-style: dashed;
377
377
  }
378
378
  .react-flow__resize-control.line.left,
379
379
  .react-flow__resize-control.line.right {
package/dist/esm/Flow/base.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base.js","sources":["../../../src/Flow/base.ts"],"sourcesContent":["import { css } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const flowStyles = css`\n /* this gets exported as style.css and can be used for the default theming */\n /* these are the necessary styles for React Flow, they get used by base.css and style.css */\n .react-flow__container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n }\n .react-flow__pane {\n z-index: 1;\n cursor: -webkit-grab;\n cursor: grab;\n }\n .react-flow__pane.selection {\n cursor: pointer;\n }\n .react-flow__pane.dragging {\n cursor: -webkit-grabbing;\n cursor: grabbing;\n }\n .react-flow__viewport {\n transform-origin: 0 0;\n z-index: 2;\n pointer-events: none;\n }\n .react-flow__renderer {\n z-index: 4;\n }\n .react-flow__selection {\n z-index: 6;\n }\n .react-flow__nodesselection-rect:focus,\n .react-flow__nodesselection-rect:focus-visible {\n outline: none;\n }\n .react-flow .react-flow__edges {\n pointer-events: none;\n overflow: visible;\n }\n .react-flow__edge-path,\n .react-flow__connection-path {\n stroke: ${theme.colors.secondary};\n stroke-width: 1;\n fill: none;\n }\n .react-flow__edge {\n pointer-events: visibleStroke;\n cursor: pointer;\n }\n .react-flow__edge.animated path {\n stroke-dasharray: 5;\n -webkit-animation: dashdraw 0.5s linear infinite;\n animation: dashdraw 0.5s linear infinite;\n }\n .react-flow__edge.animated path.react-flow__edge-interaction {\n stroke-dasharray: none;\n -webkit-animation: none;\n animation: none;\n }\n .react-flow__edge.inactive {\n pointer-events: none;\n }\n .react-flow__edge.selected,\n .react-flow__edge:focus,\n .react-flow__edge:focus-visible {\n outline: none;\n }\n .react-flow__edge.selected .react-flow__edge-path,\n .react-flow__edge:focus .react-flow__edge-path,\n .react-flow__edge:focus-visible .react-flow__edge-path {\n stroke: #555;\n }\n .react-flow__edge-textwrapper {\n pointer-events: all;\n }\n .react-flow__edge-textbg {\n fill: white;\n }\n .react-flow__edge .react-flow__edge-text {\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n .react-flow__connection {\n pointer-events: none;\n }\n .react-flow__connection .animated {\n stroke-dasharray: 5;\n -webkit-animation: dashdraw 0.5s linear infinite;\n animation: dashdraw 0.5s linear infinite;\n }\n .react-flow__connectionline {\n z-index: 1001;\n }\n .react-flow__nodes {\n pointer-events: none;\n transform-origin: 0 0;\n }\n .react-flow__node {\n position: absolute;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n pointer-events: all;\n transform-origin: 0 0;\n box-sizing: border-box;\n cursor: -webkit-grab;\n cursor: grab;\n }\n .react-flow__node.dragging {\n cursor: -webkit-grabbing;\n cursor: grabbing;\n }\n .react-flow__nodesselection {\n z-index: 3;\n transform-origin: left top;\n pointer-events: none;\n }\n .react-flow__nodesselection-rect {\n position: absolute;\n pointer-events: all;\n cursor: -webkit-grab;\n cursor: grab;\n }\n .react-flow__handle {\n position: absolute;\n pointer-events: none;\n min-width: 5px;\n min-height: 5px;\n width: 6px;\n height: 6px;\n background: #1a192b;\n border: 1px solid white;\n border-radius: 100%;\n }\n .react-flow__handle.connectionindicator {\n pointer-events: all;\n cursor: crosshair;\n }\n .react-flow__handle-bottom {\n top: auto;\n left: 50%;\n bottom: -4px;\n transform: translate(-50%, 0);\n }\n .react-flow__handle-top {\n left: 50%;\n top: -4px;\n transform: translate(-50%, 0);\n }\n .react-flow__handle-left {\n top: 50%;\n left: -4px;\n transform: translate(0, -50%);\n }\n .react-flow__handle-right {\n right: -4px;\n top: 50%;\n transform: translate(0, -50%);\n }\n .react-flow__edgeupdater {\n cursor: move;\n pointer-events: all;\n }\n .react-flow__panel {\n position: absolute;\n z-index: 5;\n margin: 15px;\n }\n .react-flow__panel.top {\n top: 0;\n }\n .react-flow__panel.bottom {\n bottom: 0;\n }\n .react-flow__panel.left {\n left: 0;\n }\n .react-flow__panel.right {\n right: 0;\n }\n .react-flow__panel.center {\n left: 50%;\n transform: translateX(-50%);\n }\n .react-flow__attribution {\n font-size: 10px;\n background: rgba(255, 255, 255, 0.5);\n padding: 2px 3px;\n margin: 0;\n }\n .react-flow__attribution a {\n text-decoration: none;\n color: #999;\n }\n @-webkit-keyframes dashdraw {\n from {\n stroke-dashoffset: 10;\n }\n }\n @keyframes dashdraw {\n from {\n stroke-dashoffset: 10;\n }\n }\n .react-flow__edgelabel-renderer {\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n .react-flow__edge.updating .react-flow__edge-path {\n stroke: #777;\n }\n .react-flow__edge-text {\n font-size: 10px;\n }\n .react-flow__node.selectable:focus,\n .react-flow__node.selectable:focus-visible {\n outline: none;\n }\n .react-flow__node-default,\n .react-flow__node-input,\n .react-flow__node-output,\n .react-flow__node-group {\n padding: ${theme.space.sm};\n border-radius: ${theme.radii.round};\n width: 150px;\n color: ${theme.colors.secondary};\n text-align: center;\n border: 1px solid ${theme.colors.negative};\n background-color: ${theme.colors.negative_20};\n }\n .react-flow__node-default::before {\n content: \"Unknown node type\";\n display: block;\n }\n .react-flow__node-default.selectable:hover,\n .react-flow__node-input.selectable:hover,\n .react-flow__node-output.selectable:hover,\n .react-flow__node-group.selectable:hover {\n box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);\n }\n .react-flow__node-default.selectable.selected,\n .react-flow__node-default.selectable:focus,\n .react-flow__node-default.selectable:focus-visible,\n .react-flow__node-input.selectable.selected,\n .react-flow__node-input.selectable:focus,\n .react-flow__node-input.selectable:focus-visible,\n .react-flow__node-output.selectable.selected,\n .react-flow__node-output.selectable:focus,\n .react-flow__node-output.selectable:focus-visible,\n .react-flow__node-group.selectable.selected,\n .react-flow__node-group.selectable:focus,\n .react-flow__node-group.selectable:focus-visible {\n box-shadow: 0 0 0 0.5px #1a192b;\n }\n .react-flow__node-group {\n background-color: rgba(240, 240, 240, 0.25);\n }\n .react-flow__nodesselection-rect,\n .react-flow__selection {\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n }\n .react-flow__nodesselection-rect:focus,\n .react-flow__nodesselection-rect:focus-visible,\n .react-flow__selection:focus,\n .react-flow__selection:focus-visible {\n outline: none;\n }\n .react-flow__controls {\n box-shadow: ${theme.colors.shadow};\n }\n .react-flow__controls-button {\n border: none;\n background: #fefefe;\n border-bottom: 1px solid #eee;\n box-sizing: content-box;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 16px;\n height: 16px;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n padding: 5px;\n }\n .react-flow__controls-button:hover {\n background: #f4f4f4;\n }\n .react-flow__controls-button svg {\n width: 100%;\n max-width: 12px;\n max-height: 12px;\n }\n .react-flow__controls-button:disabled {\n pointer-events: none;\n }\n .react-flow__controls-button:disabled svg {\n fill-opacity: 0.4;\n }\n .react-flow__minimap {\n background-color: #fff;\n }\n .react-flow__resize-control {\n position: absolute;\n }\n .react-flow__resize-control.left,\n .react-flow__resize-control.right {\n cursor: ew-resize;\n }\n .react-flow__resize-control.top,\n .react-flow__resize-control.bottom {\n cursor: ns-resize;\n }\n .react-flow__resize-control.top.left,\n .react-flow__resize-control.bottom.right {\n cursor: nwse-resize;\n }\n .react-flow__resize-control.bottom.left,\n .react-flow__resize-control.top.right {\n cursor: nesw-resize;\n }\n /* handle styles */\n .react-flow__resize-control.handle {\n width: 4px;\n height: 4px;\n border: 1px solid #fff;\n border-radius: 1px;\n background-color: ${theme.colors.primary};\n transform: translate(-50%, -50%);\n }\n .react-flow__resize-control.handle.left {\n left: 0;\n top: 50%;\n }\n .react-flow__resize-control.handle.right {\n left: 100%;\n top: 50%;\n }\n .react-flow__resize-control.handle.top {\n left: 50%;\n top: 0;\n }\n .react-flow__resize-control.handle.bottom {\n left: 50%;\n top: 100%;\n }\n .react-flow__resize-control.handle.top.left {\n left: 0;\n }\n .react-flow__resize-control.handle.bottom.left {\n left: 0;\n }\n .react-flow__resize-control.handle.top.right {\n left: 100%;\n }\n .react-flow__resize-control.handle.bottom.right {\n left: 100%;\n }\n /* line styles */\n .react-flow__resize-control.line {\n border-color: ${theme.colors.primary};\n border-width: 0;\n border-style: solid;\n }\n .react-flow__resize-control.line.left,\n .react-flow__resize-control.line.right {\n width: 1px;\n transform: translate(-50%, 0);\n top: 0;\n height: 100%;\n }\n .react-flow__resize-control.line.left {\n left: 0;\n border-left-width: 1px;\n }\n .react-flow__resize-control.line.right {\n left: 100%;\n border-right-width: 1px;\n }\n .react-flow__resize-control.line.top,\n .react-flow__resize-control.line.bottom {\n height: 1px;\n transform: translate(0, -50%);\n left: 0;\n width: 100%;\n }\n .react-flow__resize-control.line.top {\n top: 0;\n border-top-width: 1px;\n }\n .react-flow__resize-control.line.bottom {\n border-bottom-width: 1px;\n top: 100%;\n }\n`;\n"],"names":[],"mappings":";;AAGO,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cA2CZ,MAAM,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eA4LrB,MAAM,MAAM,EAAE;AAAA,qBACR,MAAM,MAAM,KAAK;AAAA;AAAA,aAEzB,MAAM,OAAO,SAAS;AAAA;AAAA,wBAEX,MAAM,OAAO,QAAQ;AAAA,wBACrB,MAAM,OAAO,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAyC9B,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA4Db,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAiCxB,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
1
+ {"version":3,"file":"base.js","sources":["../../../src/Flow/base.ts"],"sourcesContent":["import { css } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const flowStyles = css`\n /* this gets exported as style.css and can be used for the default theming */\n /* these are the necessary styles for React Flow, they get used by base.css and style.css */\n .react-flow__container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n }\n .react-flow__pane {\n z-index: 1;\n cursor: -webkit-grab;\n cursor: grab;\n }\n .react-flow__pane.selection {\n cursor: pointer;\n }\n .react-flow__pane.dragging {\n cursor: -webkit-grabbing;\n cursor: grabbing;\n }\n .react-flow__viewport {\n transform-origin: 0 0;\n z-index: 2;\n pointer-events: none;\n }\n .react-flow__renderer {\n z-index: 4;\n }\n .react-flow__selection {\n z-index: 6;\n }\n .react-flow__nodesselection-rect:focus,\n .react-flow__nodesselection-rect:focus-visible {\n outline: none;\n }\n .react-flow .react-flow__edges {\n pointer-events: none;\n overflow: visible;\n }\n .react-flow__edge-path,\n .react-flow__connection-path {\n stroke: ${theme.colors.secondary};\n stroke-width: 1;\n fill: none;\n }\n .react-flow__edge {\n pointer-events: visibleStroke;\n cursor: pointer;\n }\n .react-flow__edge.animated path {\n stroke-dasharray: 5;\n -webkit-animation: dashdraw 0.5s linear infinite;\n animation: dashdraw 0.5s linear infinite;\n }\n .react-flow__edge.animated path.react-flow__edge-interaction {\n stroke-dasharray: none;\n -webkit-animation: none;\n animation: none;\n }\n .react-flow__edge.inactive {\n pointer-events: none;\n }\n .react-flow__edge.selected,\n .react-flow__edge:focus,\n .react-flow__edge:focus-visible {\n outline: none;\n }\n .react-flow__edge.selected .react-flow__edge-path,\n .react-flow__edge:focus .react-flow__edge-path,\n .react-flow__edge:focus-visible .react-flow__edge-path {\n stroke: #555;\n }\n .react-flow__edge-textwrapper {\n pointer-events: all;\n }\n .react-flow__edge-textbg {\n fill: white;\n }\n .react-flow__edge .react-flow__edge-text {\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n .react-flow__connection {\n pointer-events: none;\n }\n .react-flow__connection .animated {\n stroke-dasharray: 5;\n -webkit-animation: dashdraw 0.5s linear infinite;\n animation: dashdraw 0.5s linear infinite;\n }\n .react-flow__connectionline {\n z-index: 1001;\n }\n .react-flow__nodes {\n pointer-events: none;\n transform-origin: 0 0;\n }\n .react-flow__node {\n position: absolute;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n pointer-events: all;\n transform-origin: 0 0;\n box-sizing: border-box;\n cursor: -webkit-grab;\n cursor: grab;\n }\n .react-flow__node.dragging {\n cursor: -webkit-grabbing;\n cursor: grabbing;\n }\n .react-flow__nodesselection {\n z-index: 3;\n transform-origin: left top;\n pointer-events: none;\n }\n .react-flow__nodesselection-rect {\n position: absolute;\n pointer-events: all;\n cursor: -webkit-grab;\n cursor: grab;\n }\n .react-flow__handle {\n position: absolute;\n pointer-events: none;\n min-width: 5px;\n min-height: 5px;\n width: 6px;\n height: 6px;\n background: #1a192b;\n border: 1px solid white;\n border-radius: 100%;\n }\n .react-flow__handle.connectionindicator {\n pointer-events: all;\n cursor: crosshair;\n }\n .react-flow__handle-bottom {\n top: auto;\n left: 50%;\n bottom: -4px;\n transform: translate(-50%, 0);\n }\n .react-flow__handle-top {\n left: 50%;\n top: -4px;\n transform: translate(-50%, 0);\n }\n .react-flow__handle-left {\n top: 50%;\n left: -4px;\n transform: translate(0, -50%);\n }\n .react-flow__handle-right {\n right: -4px;\n top: 50%;\n transform: translate(0, -50%);\n }\n .react-flow__edgeupdater {\n cursor: move;\n pointer-events: all;\n }\n .react-flow__panel {\n position: absolute;\n z-index: 5;\n margin: 15px;\n }\n .react-flow__panel.top {\n top: 0;\n }\n .react-flow__panel.bottom {\n bottom: 0;\n }\n .react-flow__panel.left {\n left: 0;\n }\n .react-flow__panel.right {\n right: 0;\n }\n .react-flow__panel.center {\n left: 50%;\n transform: translateX(-50%);\n }\n .react-flow__attribution {\n font-size: 10px;\n background: rgba(255, 255, 255, 0.5);\n padding: 2px 3px;\n margin: 0;\n }\n .react-flow__attribution a {\n text-decoration: none;\n color: #999;\n }\n @-webkit-keyframes dashdraw {\n from {\n stroke-dashoffset: 10;\n }\n }\n @keyframes dashdraw {\n from {\n stroke-dashoffset: 10;\n }\n }\n .react-flow__edgelabel-renderer {\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n .react-flow__edge.updating .react-flow__edge-path {\n stroke: #777;\n }\n .react-flow__edge-text {\n font-size: 10px;\n }\n .react-flow__node.selectable:focus,\n .react-flow__node.selectable:focus-visible {\n outline: none;\n }\n .react-flow__node-default,\n .react-flow__node-input,\n .react-flow__node-output {\n padding: ${theme.space.sm};\n border-radius: ${theme.radii.round};\n width: 150px;\n color: ${theme.colors.secondary};\n text-align: center;\n border: 1px solid ${theme.colors.negative};\n background-color: ${theme.colors.negative_20};\n }\n .react-flow__node-group {\n color: ${theme.colors.secondary};\n text-align: center;\n }\n .react-flow__node-default::before {\n content: \"Unknown node type\";\n display: block;\n }\n .react-flow__node-default.selectable:hover,\n .react-flow__node-input.selectable:hover,\n .react-flow__node-output.selectable:hover,\n .react-flow__node-group.selectable:hover {\n }\n .react-flow__node-default.selectable.selected,\n .react-flow__node-default.selectable:focus,\n .react-flow__node-default.selectable:focus-visible,\n .react-flow__node-input.selectable.selected,\n .react-flow__node-input.selectable:focus,\n .react-flow__node-input.selectable:focus-visible,\n .react-flow__node-output.selectable.selected,\n .react-flow__node-output.selectable:focus,\n .react-flow__node-output.selectable:focus-visible,\n .react-flow__node-group.selectable.selected,\n .react-flow__node-group.selectable:focus,\n .react-flow__node-group.selectable:focus-visible {\n }\n .react-flow__node-group {\n background-color: rgba(240, 240, 240, 0.25);\n }\n .react-flow__nodesselection-rect,\n .react-flow__selection {\n background: rgba(0, 89, 220, 0.08);\n }\n .react-flow__nodesselection-rect:focus,\n .react-flow__nodesselection-rect:focus-visible,\n .react-flow__selection:focus,\n .react-flow__selection:focus-visible {\n outline: none;\n }\n .react-flow__controls {\n box-shadow: ${theme.colors.shadow};\n }\n .react-flow__controls-button {\n border: none;\n background: #fefefe;\n border-bottom: 1px solid #eee;\n box-sizing: content-box;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 16px;\n height: 16px;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n padding: 5px;\n }\n .react-flow__controls-button:hover {\n background: #f4f4f4;\n }\n .react-flow__controls-button svg {\n width: 100%;\n max-width: 12px;\n max-height: 12px;\n }\n .react-flow__controls-button:disabled {\n pointer-events: none;\n }\n .react-flow__controls-button:disabled svg {\n fill-opacity: 0.4;\n }\n .react-flow__minimap {\n background-color: #fff;\n }\n .react-flow__resize-control {\n position: absolute;\n }\n .react-flow__resize-control.left,\n .react-flow__resize-control.right {\n cursor: ew-resize;\n }\n .react-flow__resize-control.top,\n .react-flow__resize-control.bottom {\n cursor: ns-resize;\n }\n .react-flow__resize-control.top.left,\n .react-flow__resize-control.bottom.right {\n cursor: nwse-resize;\n }\n .react-flow__resize-control.bottom.left,\n .react-flow__resize-control.top.right {\n cursor: nesw-resize;\n }\n /* handle styles */\n .react-flow__resize-control.handle {\n width: 4px;\n height: 4px;\n border: 1px solid #fff;\n border-radius: 1px;\n background-color: ${theme.colors.primary};\n transform: translate(-50%, -50%);\n }\n .react-flow__resize-control.handle.left {\n left: 0;\n top: 50%;\n }\n .react-flow__resize-control.handle.right {\n left: 100%;\n top: 50%;\n }\n .react-flow__resize-control.handle.top {\n left: 50%;\n top: 0;\n }\n .react-flow__resize-control.handle.bottom {\n left: 50%;\n top: 100%;\n }\n .react-flow__resize-control.handle.top.left {\n left: 0;\n }\n .react-flow__resize-control.handle.bottom.left {\n left: 0;\n }\n .react-flow__resize-control.handle.top.right {\n left: 100%;\n }\n .react-flow__resize-control.handle.bottom.right {\n left: 100%;\n }\n /* line styles */\n .react-flow__resize-control.line {\n border-color: ${theme.colors.primary_80};\n border-width: 0;\n border-style: dashed;\n }\n .react-flow__resize-control.line.left,\n .react-flow__resize-control.line.right {\n width: 1px;\n transform: translate(-50%, 0);\n top: 0;\n height: 100%;\n }\n .react-flow__resize-control.line.left {\n left: 0;\n border-left-width: 1px;\n }\n .react-flow__resize-control.line.right {\n left: 100%;\n border-right-width: 1px;\n }\n .react-flow__resize-control.line.top,\n .react-flow__resize-control.line.bottom {\n height: 1px;\n transform: translate(0, -50%);\n left: 0;\n width: 100%;\n }\n .react-flow__resize-control.line.top {\n top: 0;\n border-top-width: 1px;\n }\n .react-flow__resize-control.line.bottom {\n border-bottom-width: 1px;\n top: 100%;\n }\n`;\n"],"names":[],"mappings":";;AAGO,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cA2CZ,MAAM,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eA2LrB,MAAM,MAAM,EAAE;AAAA,qBACR,MAAM,MAAM,KAAK;AAAA;AAAA,aAEzB,MAAM,OAAO,SAAS;AAAA;AAAA,wBAEX,MAAM,OAAO,QAAQ;AAAA,wBACrB,MAAM,OAAO,WAAW;AAAA;AAAA;AAAA,aAGnC,MAAM,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAuCjB,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA4Db,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAiCxB,MAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
package/dist/esm/Flow/hooks/useFlowNode.js CHANGED
@@ -3,6 +3,14 @@ import { useStore, useNodes, useEdges } from "reactflow";
3
3
  import { shallow } from "zustand/shallow";
4
4
  import { useFlowInstance } from "./useFlowInstance.js";
5
5
  import { useNodeId } from "./useNodeId.js";
6
+ function relativePosition(positionA, positionB) {
7
+ if (positionA && positionB)
8
+ return {
9
+ x: positionB.x - positionA.x,
10
+ y: positionB.y - positionA.y
11
+ };
12
+ return { x: 0, y: 0 };
13
+ }
6
14
  function useFlowNode(id) {
7
15
  const nodeId = useNodeId(id);
8
16
  const nodeSelector = useCallback(
@@ -80,18 +88,45 @@ function useFlowNodeUtils(id) {
80
88
  },
81
89
  [nodeId, reactFlowInstance]
82
90
  );
91
+ const setNodeParent = useCallback(
92
+ (node, extent) => {
93
+ if (!nodeId) return;
94
+ reactFlowInstance.setNodes((nodes) => {
95
+ return nodes.map((n) => {
96
+ if (n.id === nodeId) {
97
+ return {
98
+ ...n,
99
+ parentId: node ? node.id : void 0,
100
+ extent,
101
+ position: node ? relativePosition(node.position, n.position) : n.positionAbsolute ?? n.position
102
+ };
103
+ }
104
+ return n;
105
+ });
106
+ });
107
+ },
108
+ [nodeId, reactFlowInstance]
109
+ );
83
110
  return useMemo(
84
111
  () => ({
85
- setNodeData
112
+ setNodeData,
113
+ setNodeParent
86
114
  }),
87
- [setNodeData]
115
+ [setNodeData, setNodeParent]
88
116
  );
89
117
  }
118
+ function useFlowNodeIntersections(id) {
119
+ const nodeId = useNodeId(id);
120
+ const node = useFlowNode(nodeId ?? "");
121
+ const reactFlowInstance = useFlowInstance();
122
+ return node ? reactFlowInstance.getIntersectingNodes(node, false) : [];
123
+ }
90
124
  export {
91
125
  useFlowInputNodes,
92
126
  useFlowNode,
93
127
  useFlowNodeEdges,
94
128
  useFlowNodeInputEdges,
129
+ useFlowNodeIntersections,
95
130
  useFlowNodeOutputEdges,
96
131
  useFlowNodeParents,
97
132
  useFlowNodeUtils,
package/dist/esm/Flow/hooks/useFlowNode.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useFlowNode.js","sources":["../../../../src/Flow/hooks/useFlowNode.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n Edge,\n Node,\n ReactFlowState,\n useEdges,\n useNodes,\n useStore,\n} from \"reactflow\";\nimport { shallow } from \"zustand/shallow\";\n\nimport { useFlowInstance } from \"./useFlowInstance\";\nimport { useNodeId } from \"./useNodeId\";\n\n/** Retrieves the node instance */\nexport function useFlowNode<T extends Node = Node>(id?: string) {\n const nodeId = useNodeId(id);\n\n const nodeSelector = useCallback(\n (state: ReactFlowState) =>\n state.getNodes().find((n: Node): n is T => n.id === nodeId),\n [nodeId],\n );\n return useStore<T | undefined>(nodeSelector, shallow);\n}\n\n/** Provides the input edges connected to the node */\nexport function useFlowNodeInputEdges(id?: string) {\n const nodeId = useNodeId(id);\n\n const inputEdgesSelector = useCallback(\n (state: ReactFlowState) =>\n state.edges.filter((e: Edge) => e.target === nodeId),\n [nodeId],\n );\n return useStore(inputEdgesSelector, shallow);\n}\n\n/** Gives the output edges connected from the node */\nexport function useFlowNodeOutputEdges(id?: string) {\n const nodeId = useNodeId(id);\n\n const outputEdgesSelector = useCallback(\n (state: ReactFlowState) =>\n state.edges.filter((e: Edge) => e.source === nodeId),\n [nodeId],\n );\n return useStore(outputEdgesSelector, shallow);\n}\n\n/** Offers both input and output edges of the node */\nexport function useFlowNodeEdges(id?: string) {\n const nodeId = useNodeId(id);\n\n const edgesSelector = useCallback(\n (state: ReactFlowState) =>\n state.edges.filter(\n (e: Edge) => e.source === nodeId || e.target === nodeId,\n ),\n [nodeId],\n );\n return useStore(edgesSelector, shallow);\n}\n\n/** Gets the parent nodes of a specified node (nodes that have an output connected to one of the inputs of the node) */\nexport function useFlowNodeParents(id?: string) {\n const inputEdges = useFlowNodeInputEdges(id);\n const parentNodesSelector = useCallback(\n (state: ReactFlowState) => {\n return inputEdges\n .map((e) => state.getNodes().find((n: Node) => n.id === e.source))\n .filter((n): n is Node => n !== null);\n },\n [inputEdges],\n );\n return useStore(parentNodesSelector, shallow);\n}\n\n/** Retrieves the nodes connected to the inputs of the node */\nexport function useFlowInputNodes<T = any>(id?: string) {\n const nodeId = useNodeId(id);\n const nodes = useNodes();\n const edges = useEdges();\n\n return useMemo(() => {\n return edges\n .filter((e) => e.target === nodeId)\n .map((e) => nodes.find((n) => n.id === e.source))\n .filter((n): n is Node<T> => n !== null);\n }, [edges, nodeId, nodes]);\n}\n\n/** Retrieves the nodes connected to the outputs of the node */\nexport function useFlowOutputNodes<T = any>(id?: string) {\n const nodeId = useNodeId(id);\n const nodes = useNodes();\n const edges = useEdges();\n\n return useMemo(() => {\n return edges\n .filter((e) => e.source === nodeId)\n .map((e) => nodes.find((n) => n.id === e.target))\n .filter((n): n is Node<T> => n !== null);\n }, [edges, nodeId, nodes]);\n}\n\n/** Utilities to manipulate a node in the flow */\nexport function useFlowNodeUtils<NodeData = any>(id?: string) {\n const nodeId = useNodeId(id);\n const reactFlowInstance = useFlowInstance<NodeData>();\n\n /** Mutate the node's `.data` object */\n const setNodeData = useCallback(\n (setNewData: (newData?: NodeData) => NodeData) => {\n if (!nodeId) return;\n\n reactFlowInstance.setNodes((nodes) => {\n return nodes.map((n) => {\n if (n.id === nodeId) {\n return { ...n, data: setNewData(n.data) };\n }\n return n;\n });\n });\n },\n [nodeId, reactFlowInstance],\n );\n\n return useMemo(\n () => ({\n setNodeData,\n }),\n [setNodeData],\n );\n}\n"],"names":[],"mappings":";;;;;AAeO,SAAS,YAAmC,IAAa;AACxD,QAAA,SAAS,UAAU,EAAE;AAE3B,QAAM,eAAe;AAAA,IACnB,CAAC,UACC,MAAM,WAAW,KAAK,CAAC,MAAoB,EAAE,OAAO,MAAM;AAAA,IAC5D,CAAC,MAAM;AAAA,EAAA;AAEF,SAAA,SAAwB,cAAc,OAAO;AACtD;AAGO,SAAS,sBAAsB,IAAa;AAC3C,QAAA,SAAS,UAAU,EAAE;AAE3B,QAAM,qBAAqB;AAAA,IACzB,CAAC,UACC,MAAM,MAAM,OAAO,CAAC,MAAY,EAAE,WAAW,MAAM;AAAA,IACrD,CAAC,MAAM;AAAA,EAAA;AAEF,SAAA,SAAS,oBAAoB,OAAO;AAC7C;AAGO,SAAS,uBAAuB,IAAa;AAC5C,QAAA,SAAS,UAAU,EAAE;AAE3B,QAAM,sBAAsB;AAAA,IAC1B,CAAC,UACC,MAAM,MAAM,OAAO,CAAC,MAAY,EAAE,WAAW,MAAM;AAAA,IACrD,CAAC,MAAM;AAAA,EAAA;AAEF,SAAA,SAAS,qBAAqB,OAAO;AAC9C;AAGO,SAAS,iBAAiB,IAAa;AACtC,QAAA,SAAS,UAAU,EAAE;AAE3B,QAAM,gBAAgB;AAAA,IACpB,CAAC,UACC,MAAM,MAAM;AAAA,MACV,CAAC,MAAY,EAAE,WAAW,UAAU,EAAE,WAAW;AAAA,IACnD;AAAA,IACF,CAAC,MAAM;AAAA,EAAA;AAEF,SAAA,SAAS,eAAe,OAAO;AACxC;AAGO,SAAS,mBAAmB,IAAa;AACxC,QAAA,aAAa,sBAAsB,EAAE;AAC3C,QAAM,sBAAsB;AAAA,IAC1B,CAAC,UAA0B;AAClB,aAAA,WACJ,IAAI,CAAC,MAAM,MAAM,SAAS,EAAE,KAAK,CAAC,MAAY,EAAE,OAAO,EAAE,MAAM,CAAC,EAChE,OAAO,CAAC,MAAiB,MAAM,IAAI;AAAA,IACxC;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAEN,SAAA,SAAS,qBAAqB,OAAO;AAC9C;AAGO,SAAS,kBAA2B,IAAa;AAChD,QAAA,SAAS,UAAU,EAAE;AAC3B,QAAM,QAAQ;AACd,QAAM,QAAQ;AAEd,SAAO,QAAQ,MAAM;AACZ,WAAA,MACJ,OAAO,CAAC,MAAM,EAAE,WAAW,MAAM,EACjC,IAAI,CAAC,MAAM,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EAC/C,OAAO,CAAC,MAAoB,MAAM,IAAI;AAAA,EACxC,GAAA,CAAC,OAAO,QAAQ,KAAK,CAAC;AAC3B;AAGO,SAAS,mBAA4B,IAAa;AACjD,QAAA,SAAS,UAAU,EAAE;AAC3B,QAAM,QAAQ;AACd,QAAM,QAAQ;AAEd,SAAO,QAAQ,MAAM;AACZ,WAAA,MACJ,OAAO,CAAC,MAAM,EAAE,WAAW,MAAM,EACjC,IAAI,CAAC,MAAM,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EAC/C,OAAO,CAAC,MAAoB,MAAM,IAAI;AAAA,EACxC,GAAA,CAAC,OAAO,QAAQ,KAAK,CAAC;AAC3B;AAGO,SAAS,iBAAiC,IAAa;AACtD,QAAA,SAAS,UAAU,EAAE;AAC3B,QAAM,oBAAoB;AAG1B,QAAM,cAAc;AAAA,IAClB,CAAC,eAAiD;AAChD,UAAI,CAAC,OAAQ;AAEK,wBAAA,SAAS,CAAC,UAAU;AAC7B,eAAA,MAAM,IAAI,CAAC,MAAM;AAClB,cAAA,EAAE,OAAO,QAAQ;AACnB,mBAAO,EAAE,GAAG,GAAG,MAAM,WAAW,EAAE,IAAI;UACxC;AACO,iBAAA;AAAA,QAAA,CACR;AAAA,MAAA,CACF;AAAA,IACH;AAAA,IACA,CAAC,QAAQ,iBAAiB;AAAA,EAAA;AAGrB,SAAA;AAAA,IACL,OAAO;AAAA,MACL;AAAA,IAAA;AAAA,IAEF,CAAC,WAAW;AAAA,EAAA;AAEhB;"}
1
+ {"version":3,"file":"useFlowNode.js","sources":["../../../../src/Flow/hooks/useFlowNode.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n CoordinateExtent,\n Edge,\n Node,\n ReactFlowState,\n useEdges,\n useNodes,\n useStore,\n XYPosition,\n} from \"reactflow\";\nimport { shallow } from \"zustand/shallow\";\n\nimport { useFlowInstance } from \"./useFlowInstance\";\nimport { useNodeId } from \"./useNodeId\";\n\n/** Uses coordinates to create the relative position vector */\nfunction relativePosition(positionA?: XYPosition, positionB?: XYPosition) {\n if (positionA && positionB)\n return {\n x: positionB.x - positionA.x,\n y: positionB.y - positionA.y,\n };\n return { x: 0, y: 0 };\n}\n\n/** Retrieves the node instance */\nexport function useFlowNode<T extends Node = Node>(id?: string) {\n const nodeId = useNodeId(id);\n\n const nodeSelector = useCallback(\n (state: ReactFlowState) =>\n state.getNodes().find((n: Node): n is T => n.id === nodeId),\n [nodeId],\n );\n return useStore<T | undefined>(nodeSelector, shallow);\n}\n\n/** Provides the input edges connected to the node */\nexport function useFlowNodeInputEdges(id?: string) {\n const nodeId = useNodeId(id);\n\n const inputEdgesSelector = useCallback(\n (state: ReactFlowState) =>\n state.edges.filter((e: Edge) => e.target === nodeId),\n [nodeId],\n );\n return useStore(inputEdgesSelector, shallow);\n}\n\n/** Gives the output edges connected from the node */\nexport function useFlowNodeOutputEdges(id?: string) {\n const nodeId = useNodeId(id);\n\n const outputEdgesSelector = useCallback(\n (state: ReactFlowState) =>\n state.edges.filter((e: Edge) => e.source === nodeId),\n [nodeId],\n );\n return useStore(outputEdgesSelector, shallow);\n}\n\n/** Offers both input and output edges of the node */\nexport function useFlowNodeEdges(id?: string) {\n const nodeId = useNodeId(id);\n\n const edgesSelector = useCallback(\n (state: ReactFlowState) =>\n state.edges.filter(\n (e: Edge) => e.source === nodeId || e.target === nodeId,\n ),\n [nodeId],\n );\n return useStore(edgesSelector, shallow);\n}\n\n/** Gets the parent nodes of a specified node (nodes that have an output connected to one of the inputs of the node) */\nexport function useFlowNodeParents(id?: string) {\n const inputEdges = useFlowNodeInputEdges(id);\n const parentNodesSelector = useCallback(\n (state: ReactFlowState) => {\n return inputEdges\n .map((e) => state.getNodes().find((n: Node) => n.id === e.source))\n .filter((n): n is Node => n !== null);\n },\n [inputEdges],\n );\n return useStore(parentNodesSelector, shallow);\n}\n\n/** Retrieves the nodes connected to the inputs of the node */\nexport function useFlowInputNodes<T = any>(id?: string) {\n const nodeId = useNodeId(id);\n const nodes = useNodes();\n const edges = useEdges();\n\n return useMemo(() => {\n return edges\n .filter((e) => e.target === nodeId)\n .map((e) => nodes.find((n) => n.id === e.source))\n .filter((n): n is Node<T> => n !== null);\n }, [edges, nodeId, nodes]);\n}\n\n/** Retrieves the nodes connected to the outputs of the node */\nexport function useFlowOutputNodes<T = any>(id?: string) {\n const nodeId = useNodeId(id);\n const nodes = useNodes();\n const edges = useEdges();\n\n return useMemo(() => {\n return edges\n .filter((e) => e.source === nodeId)\n .map((e) => nodes.find((n) => n.id === e.target))\n .filter((n): n is Node<T> => n !== null);\n }, [edges, nodeId, nodes]);\n}\n\n/** Utilities to manipulate a node in the flow */\nexport function useFlowNodeUtils<NodeData = any>(id?: string) {\n const nodeId = useNodeId(id);\n const reactFlowInstance = useFlowInstance<NodeData>();\n\n /** Mutate the node's `.data` object */\n const setNodeData = useCallback(\n (setNewData: (newData?: NodeData) => NodeData) => {\n if (!nodeId) return;\n\n reactFlowInstance.setNodes((nodes) => {\n return nodes.map((n) => {\n if (n.id === nodeId) {\n return { ...n, data: setNewData(n.data) };\n }\n return n;\n });\n });\n },\n [nodeId, reactFlowInstance],\n );\n\n const setNodeParent = useCallback(\n (node?: Node<any>, extent?: \"parent\" | CoordinateExtent) => {\n if (!nodeId) return;\n\n reactFlowInstance.setNodes((nodes) => {\n return nodes.map((n) => {\n if (n.id === nodeId) {\n return {\n ...n,\n parentId: node ? node.id : undefined,\n extent,\n position: node\n ? relativePosition(node.position, n.position)\n : (n.positionAbsolute ?? n.position),\n };\n }\n return n;\n });\n });\n },\n [nodeId, reactFlowInstance],\n );\n\n return useMemo(\n () => ({\n setNodeData,\n setNodeParent,\n }),\n [setNodeData, setNodeParent],\n );\n}\n\nexport function useFlowNodeIntersections<NodeData = any>(id?: string) {\n const nodeId = useNodeId(id);\n const node = useFlowNode(nodeId ?? \"\");\n const reactFlowInstance = useFlowInstance<NodeData>();\n\n return node ? reactFlowInstance.getIntersectingNodes(node, false) : [];\n}\n"],"names":[],"mappings":"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"}
package/dist/esm/Flow/hooks/useNode.js CHANGED
@@ -8,7 +8,7 @@ import { useNodeMetaRegistry } from "../FlowContext/NodeMetaContext.js";
8
8
  import { identifyHandles } from "../Node/utils.js";
9
9
  import { useFlowContext } from "./useFlowContext.js";
10
10
  import { useFlowInstance } from "./useFlowInstance.js";
11
- import { useFlowNodeInputEdges, useFlowNodeOutputEdges, useFlowNode } from "./useFlowNode.js";
11
+ import { useFlowNodeInputEdges, useFlowNodeOutputEdges, useFlowNodeIntersections, useFlowNodeUtils, useFlowNode } from "./useFlowNode.js";
12
12
  const DEFAULT_LABELS = {
13
13
  deleteActionLabel: "Delete",
14
14
  duplicateActionLabel: "Duplicate"
@@ -34,6 +34,8 @@ function useHvNode(props) {
34
34
  const outputs = useMemo(() => identifyHandles(outputsProp), [outputsProp]);
35
35
  const outputEdges = useFlowNodeOutputEdges();
36
36
  const { nodeGroups } = useFlowContext();
37
+ const intersections = useFlowNodeIntersections();
38
+ const { setNodeParent, setNodeData } = useFlowNodeUtils();
37
39
  const node = useFlowNode();
38
40
  const reactFlowInstance = useFlowInstance();
39
41
  const nodeGroup = groupId && nodeGroups && nodeGroups[groupId] || void 0;
@@ -118,11 +120,14 @@ function useHvNode(props) {
118
120
  node,
119
121
  nodeActions,
120
122
  showActions,
123
+ intersections,
121
124
  // prop getters
122
125
  getNodeToolbarProps,
123
126
  // actions
124
127
  toggleShowActions,
125
- handleDefaultAction
128
+ handleDefaultAction,
129
+ setNodeData,
130
+ setNodeParent
126
131
  }),
127
132
  [
128
133
  id,
@@ -138,9 +143,12 @@ function useHvNode(props) {
138
143
  node,
139
144
  nodeActions,
140
145
  showActions,
146
+ intersections,
141
147
  getNodeToolbarProps,
142
148
  toggleShowActions,
143
- handleDefaultAction
149
+ handleDefaultAction,
150
+ setNodeData,
151
+ setNodeParent
144
152
  ]
145
153
  );
146
154
  }
package/dist/esm/Flow/hooks/useNode.js.map CHANGED
@@ -1 +1 @@
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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"}
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 useFlowNodeIntersections,\n useFlowNodeOutputEdges,\n useFlowNodeUtils,\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 const intersections = useFlowNodeIntersections();\n const { setNodeParent, setNodeData } = useFlowNodeUtils();\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 intersections,\n // prop getters\n getNodeToolbarProps,\n // actions\n toggleShowActions,\n handleDefaultAction,\n setNodeData,\n setNodeParent,\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 intersections,\n getNodeToolbarProps,\n toggleShowActions,\n handleDefaultAction,\n setNodeData,\n setNodeParent,\n ],\n );\n}\n"],"names":[],"mappings":"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"}
package/dist/esm/StepNavigation/StepNavigation.js CHANGED
@@ -66,13 +66,11 @@ const HvStepNavigation = ({
66
66
  const StepContainer = styledLi(containerSize);
67
67
  const Step = styledDiv(Math.max(containerSize, 30));
68
68
  const stepProps = {
69
- ...{
70
- size: stepSizeKey,
71
- state,
72
- title,
73
- number: index + 1,
74
- ...props
75
- }
69
+ size: stepSizeKey,
70
+ state,
71
+ title,
72
+ number: index + 1,
73
+ ...props
76
74
  };
77
75
  const stepElement = /* @__PURE__ */ jsx(StepContainer, { className: classes.li, children: hasTitles ? /* @__PURE__ */ jsx(
78
76
  StepComponent,
package/dist/esm/StepNavigation/StepNavigation.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"StepNavigation.js","sources":["../../../src/StepNavigation/StepNavigation.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvBreakpoints,\n HvTooltip,\n HvTypography,\n useTheme,\n useWidth,\n} from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n HvDefaultNavigation,\n HvDefaultNavigationProps,\n HvStepProps,\n} from \"./DefaultNavigation\";\nimport {\n HvSimpleNavigation,\n HvSimpleNavigationProps,\n} from \"./SimpleNavigation\";\nimport { staticClasses, useClasses } from \"./StepNavigation.styles\";\nimport { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from \"./utils\";\n\nexport { staticClasses as stepNavigationClasses };\n\nexport type HvStepNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvStepNavigationProps extends HvBaseProps {\n /** Type of step navigation. Values = {\"Simple\", \"Default\"} */\n type?: \"Simple\" | \"Default\";\n /** Steps to show on the component. */\n steps: Array<\n Pick<\n HvStepProps,\n \"state\" | \"title\" | \"onClick\" | \"className\" | \"disabled\"\n > & {\n /** Class names to override styles on the separator component after the step. */\n separatorClassName?: string;\n /** Class names to override styles on the title component above the step. */\n titleClassName?: string;\n }\n >;\n /** Sets one of the standard sizes of the steps. */\n stepSize?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n /** Width of the component element on each breakpoint screen resolution. */\n width?: { [breakpoint in HvBreakpoints]?: number };\n /** Defines either show a title or only a tooltip on each step component. */\n showTitles?: boolean;\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvStepNavigationClasses;\n}\n\n/**\n * Navigation page with steps.\n *\n * You need to define the <b>steps<b/> displayed on the component so that itself can be drawn on the UI.\n * On each step, you need to define a <b>state</b> - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -\n * and a <b>title</b> to be shown as a tooltip or a text above of the step. You can also:\n * * Define a <b>className</b> on each step element;\n * * Define a <b>separatorClassName</b> to specify a className for the separator element. The default height\n * values of the separator element are 2px/3px on 'Simple'/'Default' layouts respectively;\n * * Define a <b>titleClassName</b> to specify a className for the title above each step element.\n *\n * For the root element, you can:\n * * Define a <b>className</b>;\n * * Choose a <b>type</b> of layout: 'Simple' or 'Default';\n * * Choose the <b>stepSize</b> of the step component: \"xs\", \"sm\", \"md\", \"lg\", \"xl\". The default size will be\n * correspondent to the current media breakpoint;\n * * Choose either you want to <b>showTitles</b> near to each step component or a tooltip on hover;\n * * Define a <b>width</b> of the component. If you don't define any value and the step component has no title\n * displayed above, the width of the separator element will be 100px.\n * If the step component has titles, each one will have 215px of width by default.\n */\nexport const HvStepNavigation = ({\n className,\n classes: classesProp,\n width,\n steps,\n stepSize,\n showTitles,\n type = \"Default\",\n \"aria-label\": ariaLabel,\n ...others\n}: HvStepNavigationProps) => {\n const { classes, css, cx } = useClasses(classesProp);\n\n const { activeTheme } = useTheme();\n\n // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n const breakpoint = useWidth();\n // step configurations\n const stepSizeKey =\n stepSize ?? ([\"xs\", \"sm\"].includes(breakpoint) ? \"sm\" : \"md\");\n const hasTitles = showTitles ?? ![\"xs\", \"sm\"].includes(breakpoint);\n\n const styledLi = (containerSize: any) =>\n styled(\"li\")({\n width: containerSize,\n height: containerSize,\n });\n\n const styledDiv = (containerSize: any) =>\n styled(\"div\")({\n width: containerSize,\n height: containerSize,\n });\n\n const styledSeparatorElement = (\n title: string,\n separatorClassName: string | undefined,\n separatorHeight: any,\n separatorWidth: any,\n backgroundColor: any,\n ) => {\n const widthValue =\n separatorWidth -\n 2 *\n Number(\n (activeTheme?.stepNavigation.separatorMargin || \"0px\").replace(\n \"px\",\n \"\",\n ),\n );\n\n return (\n <li\n aria-hidden\n key={`separator-${title}`}\n className={cx(\n css({\n height: separatorHeight,\n width: widthValue,\n backgroundColor,\n margin: `0 ${theme.stepNavigation.separatorMargin}`,\n }),\n classes.separator,\n )}\n >\n <div className={separatorClassName} />\n </li>\n );\n };\n\n const drawItems = ({\n separatorValues: { minWidth, maxWidth, getColor, height },\n stepValues: { minSize, maxSize, StepComponent },\n }: any) => {\n const items = steps.reduce<React.ReactNode[]>(\n (acc, { state, title, separatorClassName, ...props }, index): any => {\n const containerSize = state === \"Current\" ? maxSize : minSize;\n const StepContainer = styledLi(containerSize);\n const Step = styledDiv(Math.max(containerSize, 30));\n const stepProps = {\n ...{\n size: stepSizeKey,\n state,\n title,\n number: index + 1,\n ...props,\n },\n };\n const stepElement = (\n <StepContainer key={`step-${title}`} className={classes.li}>\n {hasTitles ? (\n <StepComponent\n key={`step-${title}`}\n aria-label={`${title}`}\n {...stepProps}\n />\n ) : (\n <HvTooltip\n placement=\"bottom\"\n title={<HvTypography>{`${index + 1}. ${title}`}</HvTypography>}\n >\n <div>\n <Step className={classes.li}>\n <StepComponent aria-label={`${title}`} {...stepProps} />\n </Step>\n </div>\n </HvTooltip>\n )}\n </StepContainer>\n );\n if (index < steps.length - 1) {\n const separatorElement = styledSeparatorElement(\n title,\n separatorClassName,\n height,\n [steps[index + 1].state, state].includes(\"Current\")\n ? minWidth\n : maxWidth,\n getColor(\n steps[index + 1].state === \"Disabled\" ? \"Disabled\" : state,\n theme,\n ),\n );\n\n acc.push(stepElement, separatorElement);\n return acc;\n }\n acc.push(stepElement);\n return acc;\n },\n [],\n );\n\n return <ol className={classes.ol}>{items}</ol>;\n };\n\n const getDynamicValues: HvDefaultNavigationProps[\"getDynamicValues\"] = (\n stepsWidth,\n ) => {\n const themeBreakpoints = activeTheme?.breakpoints.values || {};\n const maxWidth =\n width?.[breakpoint] ??\n Math.max(\n Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length -\n TITLE_MARGIN,\n SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth,\n );\n const next = Object.keys(themeBreakpoints).find((_, index, self) =>\n index - 1 >= 0 ? self[index - 1] === breakpoint : false,\n );\n const navWidth = Math.min(\n maxWidth,\n next ? (themeBreakpoints as any)[next] : maxWidth,\n );\n const titleWidth =\n Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);\n const separatorWidth =\n Number(!hasTitles) *\n Math.ceil((navWidth - stepsWidth) / (steps.length - 1));\n return { width: navWidth, titleWidth, separatorWidth };\n };\n\n const getTitles: HvSimpleNavigationProps[\"getTitles\"] = (\n getTitleProps,\n ): React.ReactNode =>\n hasTitles ? (\n <div className={classes.titles}>\n {steps.map(({ title: rawTitle, state, titleClassName }, index) => {\n const {\n variant = \"label\",\n title = rawTitle,\n titleWidth = 0,\n titleDisabled = false,\n } = getTitleProps?.({\n state,\n rawTitle,\n number: index + 1,\n }) ?? {};\n\n return (\n <HvTypography\n variant={variant}\n className={cx(\n css({\n textAlign: \"center\",\n width: titleWidth - TITLE_MARGIN,\n marginRight: TITLE_MARGIN,\n }),\n titleClassName,\n )}\n disabled={titleDisabled}\n key={title}\n >\n {title}\n </HvTypography>\n );\n })}\n </div>\n ) : null;\n\n const StepNavigation = {\n Default: HvDefaultNavigation,\n Simple: HvSimpleNavigation,\n }[type];\n\n return (\n <StepNavigation\n numSteps={steps.length}\n stepSize={stepSizeKey}\n getTitles={getTitles}\n getDynamicValues={getDynamicValues}\n className={cx(classes.root, className)}\n {...others}\n >\n {({ stepsWidth, navWidth, ...itemsProps }) => (\n <nav\n style={{\n width: `${navWidth}px`,\n margin: 0,\n }}\n aria-label={ariaLabel}\n >\n {drawItems(itemsProps)}\n </nav>\n )}\n </StepNavigation>\n );\n};\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"StepNavigation.js","sources":["../../../src/StepNavigation/StepNavigation.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvBreakpoints,\n HvTooltip,\n HvTypography,\n useTheme,\n useWidth,\n} from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n HvDefaultNavigation,\n HvDefaultNavigationProps,\n HvStepProps,\n} from \"./DefaultNavigation\";\nimport {\n HvSimpleNavigation,\n HvSimpleNavigationProps,\n} from \"./SimpleNavigation\";\nimport { staticClasses, useClasses } from \"./StepNavigation.styles\";\nimport { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from \"./utils\";\n\nexport { staticClasses as stepNavigationClasses };\n\nexport type HvStepNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvStepNavigationProps extends HvBaseProps {\n /** Type of step navigation. Values = {\"Simple\", \"Default\"} */\n type?: \"Simple\" | \"Default\";\n /** Steps to show on the component. */\n steps: Array<\n Pick<\n HvStepProps,\n \"state\" | \"title\" | \"onClick\" | \"className\" | \"disabled\"\n > & {\n /** Class names to override styles on the separator component after the step. */\n separatorClassName?: string;\n /** Class names to override styles on the title component above the step. */\n titleClassName?: string;\n }\n >;\n /** Sets one of the standard sizes of the steps. */\n stepSize?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n /** Width of the component element on each breakpoint screen resolution. */\n width?: { [breakpoint in HvBreakpoints]?: number };\n /** Defines either show a title or only a tooltip on each step component. */\n showTitles?: boolean;\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvStepNavigationClasses;\n}\n\n/**\n * Navigation page with steps.\n *\n * You need to define the <b>steps<b/> displayed on the component so that itself can be drawn on the UI.\n * On each step, you need to define a <b>state</b> - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -\n * and a <b>title</b> to be shown as a tooltip or a text above of the step. You can also:\n * * Define a <b>className</b> on each step element;\n * * Define a <b>separatorClassName</b> to specify a className for the separator element. The default height\n * values of the separator element are 2px/3px on 'Simple'/'Default' layouts respectively;\n * * Define a <b>titleClassName</b> to specify a className for the title above each step element.\n *\n * For the root element, you can:\n * * Define a <b>className</b>;\n * * Choose a <b>type</b> of layout: 'Simple' or 'Default';\n * * Choose the <b>stepSize</b> of the step component: \"xs\", \"sm\", \"md\", \"lg\", \"xl\". The default size will be\n * correspondent to the current media breakpoint;\n * * Choose either you want to <b>showTitles</b> near to each step component or a tooltip on hover;\n * * Define a <b>width</b> of the component. If you don't define any value and the step component has no title\n * displayed above, the width of the separator element will be 100px.\n * If the step component has titles, each one will have 215px of width by default.\n */\nexport const HvStepNavigation = ({\n className,\n classes: classesProp,\n width,\n steps,\n stepSize,\n showTitles,\n type = \"Default\",\n \"aria-label\": ariaLabel,\n ...others\n}: HvStepNavigationProps) => {\n const { classes, css, cx } = useClasses(classesProp);\n\n const { activeTheme } = useTheme();\n\n // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n const breakpoint = useWidth();\n // step configurations\n const stepSizeKey =\n stepSize ?? ([\"xs\", \"sm\"].includes(breakpoint) ? \"sm\" : \"md\");\n const hasTitles = showTitles ?? ![\"xs\", \"sm\"].includes(breakpoint);\n\n const styledLi = (containerSize: any) =>\n styled(\"li\")({\n width: containerSize,\n height: containerSize,\n });\n\n const styledDiv = (containerSize: any) =>\n styled(\"div\")({\n width: containerSize,\n height: containerSize,\n });\n\n const styledSeparatorElement = (\n title: string,\n separatorClassName: string | undefined,\n separatorHeight: any,\n separatorWidth: any,\n backgroundColor: any,\n ) => {\n const widthValue =\n separatorWidth -\n 2 *\n Number(\n (activeTheme?.stepNavigation.separatorMargin || \"0px\").replace(\n \"px\",\n \"\",\n ),\n );\n\n return (\n <li\n aria-hidden\n key={`separator-${title}`}\n className={cx(\n css({\n height: separatorHeight,\n width: widthValue,\n backgroundColor,\n margin: `0 ${theme.stepNavigation.separatorMargin}`,\n }),\n classes.separator,\n )}\n >\n <div className={separatorClassName} />\n </li>\n );\n };\n\n const drawItems = ({\n separatorValues: { minWidth, maxWidth, getColor, height },\n stepValues: { minSize, maxSize, StepComponent },\n }: any) => {\n const items = steps.reduce<React.ReactNode[]>(\n (acc, { state, title, separatorClassName, ...props }, index): any => {\n const containerSize = state === \"Current\" ? maxSize : minSize;\n const StepContainer = styledLi(containerSize);\n const Step = styledDiv(Math.max(containerSize, 30));\n const stepProps = {\n size: stepSizeKey,\n state,\n title,\n number: index + 1,\n ...props,\n };\n const stepElement = (\n <StepContainer key={`step-${title}`} className={classes.li}>\n {hasTitles ? (\n <StepComponent\n key={`step-${title}`}\n aria-label={`${title}`}\n {...stepProps}\n />\n ) : (\n <HvTooltip\n placement=\"bottom\"\n title={<HvTypography>{`${index + 1}. ${title}`}</HvTypography>}\n >\n <div>\n <Step className={classes.li}>\n <StepComponent aria-label={`${title}`} {...stepProps} />\n </Step>\n </div>\n </HvTooltip>\n )}\n </StepContainer>\n );\n if (index < steps.length - 1) {\n const separatorElement = styledSeparatorElement(\n title,\n separatorClassName,\n height,\n [steps[index + 1].state, state].includes(\"Current\")\n ? minWidth\n : maxWidth,\n getColor(\n steps[index + 1].state === \"Disabled\" ? \"Disabled\" : state,\n theme,\n ),\n );\n\n acc.push(stepElement, separatorElement);\n return acc;\n }\n acc.push(stepElement);\n return acc;\n },\n [],\n );\n\n return <ol className={classes.ol}>{items}</ol>;\n };\n\n const getDynamicValues: HvDefaultNavigationProps[\"getDynamicValues\"] = (\n stepsWidth,\n ) => {\n const themeBreakpoints = activeTheme?.breakpoints.values || {};\n const maxWidth =\n width?.[breakpoint] ??\n Math.max(\n Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length -\n TITLE_MARGIN,\n SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth,\n );\n const next = Object.keys(themeBreakpoints).find((_, index, self) =>\n index - 1 >= 0 ? self[index - 1] === breakpoint : false,\n );\n const navWidth = Math.min(\n maxWidth,\n next ? (themeBreakpoints as any)[next] : maxWidth,\n );\n const titleWidth =\n Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);\n const separatorWidth =\n Number(!hasTitles) *\n Math.ceil((navWidth - stepsWidth) / (steps.length - 1));\n return { width: navWidth, titleWidth, separatorWidth };\n };\n\n const getTitles: HvSimpleNavigationProps[\"getTitles\"] = (\n getTitleProps,\n ): React.ReactNode =>\n hasTitles ? (\n <div className={classes.titles}>\n {steps.map(({ title: rawTitle, state, titleClassName }, index) => {\n const {\n variant = \"label\",\n title = rawTitle,\n titleWidth = 0,\n titleDisabled = false,\n } = getTitleProps?.({\n state,\n rawTitle,\n number: index + 1,\n }) ?? {};\n\n return (\n <HvTypography\n variant={variant}\n className={cx(\n css({\n textAlign: \"center\",\n width: titleWidth - TITLE_MARGIN,\n marginRight: TITLE_MARGIN,\n }),\n titleClassName,\n )}\n disabled={titleDisabled}\n key={title}\n >\n {title}\n </HvTypography>\n );\n })}\n </div>\n ) : null;\n\n const StepNavigation = {\n Default: HvDefaultNavigation,\n Simple: HvSimpleNavigation,\n }[type];\n\n return (\n <StepNavigation\n numSteps={steps.length}\n stepSize={stepSizeKey}\n getTitles={getTitles}\n getDynamicValues={getDynamicValues}\n className={cx(classes.root, className)}\n {...others}\n >\n {({ stepsWidth, navWidth, ...itemsProps }) => (\n <nav\n style={{\n width: `${navWidth}px`,\n margin: 0,\n }}\n aria-label={ariaLabel}\n >\n {drawItems(itemsProps)}\n </nav>\n )}\n </StepNavigation>\n );\n};\n"],"names":[],"mappings":"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"}
package/dist/esm/index.js CHANGED
@@ -20,7 +20,7 @@ import { staticClasses as staticClasses8 } from "./Flow/Node/Node.styles.js";
20
20
  import { HvFlowNode } from "./Flow/Node/Node.js";
21
21
  import { staticClasses as staticClasses9 } from "./Flow/nodes/DashboardNode.styles.js";
22
22
  import { HvDashboardNode } from "./Flow/nodes/DashboardNode.js";
23
- import { useFlowInputNodes, useFlowNode, useFlowNodeEdges, useFlowNodeInputEdges, useFlowNodeOutputEdges, useFlowNodeParents, useFlowNodeUtils, useFlowOutputNodes } from "./Flow/hooks/useFlowNode.js";
23
+ import { useFlowInputNodes, useFlowNode, useFlowNodeEdges, useFlowNodeInputEdges, useFlowNodeIntersections, useFlowNodeOutputEdges, useFlowNodeParents, useFlowNodeUtils, useFlowOutputNodes } from "./Flow/hooks/useFlowNode.js";
24
24
  import { useFlowContext } from "./Flow/hooks/useFlowContext.js";
25
25
  import { useFlowNodeMeta } from "./Flow/hooks/useFlowNodeMeta.js";
26
26
  import { useFlowInstance } from "./Flow/hooks/useFlowInstance.js";
@@ -75,6 +75,7 @@ export {
75
75
  useFlowNode,
76
76
  useFlowNodeEdges,
77
77
  useFlowNodeInputEdges,
78
+ useFlowNodeIntersections,
78
79
  useFlowNodeMeta,
79
80
  useFlowNodeOutputEdges,
80
81
  useFlowNodeParents,
package/dist/types/index.d.ts CHANGED
@@ -6,6 +6,7 @@ import { ClipboardEventHandler } from 'react';
6
6
  import { CompositionEventHandler } from 'react';
7
7
  import { Context } from 'react';
8
8
  import { ControlProps } from 'reactflow';
9
+ import { CoordinateExtent } from 'reactflow';
9
10
  import { CSSProperties } from 'react';
10
11
  import { default as default_2 } from 'react';
11
12
  import { Dispatch } from 'react';
@@ -1153,6 +1154,8 @@ export declare function useFlowNodeEdges(id?: string): Edge[];
1153
1154
  /** Provides the input edges connected to the node */
1154
1155
  export declare function useFlowNodeInputEdges(id?: string): Edge[];
1155
1156
 
1157
+ export declare function useFlowNodeIntersections<NodeData = any>(id?: string): Node_2<NodeData>[];
1158
+
1156
1159
  export declare function useFlowNodeMeta(id?: string): HvFlowNodeMeta | undefined;
1157
1160
 
1158
1161
  /** Gives the output edges connected from the node */
@@ -1164,6 +1167,7 @@ export declare function useFlowNodeParents(id?: string): Node_2[];
1164
1167
  /** Utilities to manipulate a node in the flow */
1165
1168
  export declare function useFlowNodeUtils<NodeData = any>(id?: string): {
1166
1169
  setNodeData: (setNewData: (newData?: NodeData) => NodeData) => void;
1170
+ setNodeParent: (node?: Node_2<any>, extent?: "parent" | CoordinateExtent) => void;
1167
1171
  };
1168
1172
 
1169
1173
  /** Retrieves the nodes connected to the outputs of the node */
@@ -1195,6 +1199,7 @@ export declare function useHvNode(props: HvUseNodeParams): {
1195
1199
  node: Node_2 | undefined;
1196
1200
  nodeActions: HvFlowNodeAction[];
1197
1201
  showActions: boolean;
1202
+ intersections: Node_2<any>[];
1198
1203
  getNodeToolbarProps: () => {
1199
1204
  defaultChecked?: boolean | undefined;
1200
1205
  defaultValue?: string | number | readonly string[] | undefined;
@@ -1469,6 +1474,8 @@ export declare function useHvNode(props: HvUseNodeParams): {
1469
1474
  };
1470
1475
  toggleShowActions: () => void;
1471
1476
  handleDefaultAction: (action: HvFlowNodeAction) => void;
1477
+ setNodeData: (setNewData: (newData?: any) => any) => void;
1478
+ setNodeParent: (node?: Node_2<any>, extent?: "parent" | CoordinateExtent) => void;
1472
1479
  };
1473
1480
 
1474
1481
  export declare function useNodeMetaRegistry(): {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hitachivantara/uikit-react-lab",
3
- "version": "5.38.2",
3
+ "version": "5.39.0",
4
4
  "private": false,
5
5
  "author": "Hitachi Vantara UI Kit Team",
6
6
  "description": "Contributed React components for the NEXT UI Kit.",
@@ -33,9 +33,9 @@
33
33
  "@dnd-kit/core": "^6.1.0",
34
34
  "@dnd-kit/modifiers": "^6.0.1",
35
35
  "@emotion/css": "^11.11.0",
36
- "@hitachivantara/uikit-react-core": "^5.68.1",
37
- "@hitachivantara/uikit-react-icons": "^5.10.8",
38
- "@hitachivantara/uikit-styles": "^5.32.0",
36
+ "@hitachivantara/uikit-react-core": "^5.69.0",
37
+ "@hitachivantara/uikit-react-icons": "^5.10.9",
38
+ "@hitachivantara/uikit-styles": "^5.32.1",
39
39
  "@mui/base": "^5.0.0-beta.40",
40
40
  "@types/react-grid-layout": "^1.3.5",
41
41
  "react-grid-layout": "^1.4.4",
@@ -51,9 +51,10 @@
51
51
  "access": "public",
52
52
  "directory": "package"
53
53
  },
54
- "gitHead": "e6a4e1b89e4fec6bcebf1a88fcaab0ba41c0bda7",
54
+ "gitHead": "12e14ff262d62992cf3b833a4dd4cdac07541d51",
55
55
  "exports": {
56
56
  ".": {
57
+ "types": "./dist/types/index.d.ts",
57
58
  "require": "./dist/cjs/index.cjs",
58
59
  "import": "./dist/esm/index.js"
59
60
  }