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

package/dist/Flow/base.js

@@ -1,114 +1,8 @@
 import { css } from "@emotion/react";
-import { theme } from "@hitachivantara/uikit-styles";
+import { theme } from "@hitachivantara/uikit-react-core";
 const flowStyles = css`
   /* this gets exported as style.css and can be used for the default theming */
   /* these are the necessary styles for React Flow, they get used by base.css and style.css */
-  .react-flow {
-    direction: ltr;
-
-    --xy-edge-stroke-default: #b1b1b7;
-    --xy-edge-stroke-width-default: 1;
-    --xy-edge-stroke-selected-default: #555;
-
-    --xy-connectionline-stroke-default: #b1b1b7;
-    --xy-connectionline-stroke-width-default: 1;
-
-    --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);
-
-    --xy-minimap-background-color-default: #fff;
-    --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
-    --xy-minimap-mask-stroke-color-default: transparent;
-    --xy-minimap-mask-stroke-width-default: 1;
-    --xy-minimap-node-background-color-default: #e2e2e2;
-    --xy-minimap-node-stroke-color-default: transparent;
-    --xy-minimap-node-stroke-width-default: 2;
-
-    --xy-background-color-default: transparent;
-    --xy-background-pattern-dots-color-default: #91919a;
-    --xy-background-pattern-lines-color-default: #eee;
-    --xy-background-pattern-cross-color-default: #e2e2e2;
-    background-color: var(
-      --xy-background-color,
-      var(--xy-background-color-default)
-    );
-    --xy-node-color-default: inherit;
-    --xy-node-border-default: 1px solid #1a192b;
-    --xy-node-background-color-default: #fff;
-    --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
-    --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
-    --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
-    --xy-node-border-radius-default: 3px;
-
-    --xy-handle-background-color-default: #1a192b;
-    --xy-handle-border-color-default: #fff;
-
-    --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
-    --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);
-
-    --xy-controls-button-background-color-default: #fefefe;
-    --xy-controls-button-background-color-hover-default: #f4f4f4;
-    --xy-controls-button-color-default: inherit;
-    --xy-controls-button-color-hover-default: inherit;
-    --xy-controls-button-border-color-default: #eee;
-    --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
-
-    --xy-edge-label-background-color-default: #ffffff;
-    --xy-edge-label-color-default: inherit;
-    --xy-resize-background-color-default: #3367d9;
-  }
-  .react-flow.dark {
-    --xy-edge-stroke-default: #3e3e3e;
-    --xy-edge-stroke-width-default: 1;
-    --xy-edge-stroke-selected-default: #727272;
-
-    --xy-connectionline-stroke-default: #b1b1b7;
-    --xy-connectionline-stroke-width-default: 1;
-
-    --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);
-
-    --xy-minimap-background-color-default: #141414;
-    --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
-    --xy-minimap-mask-stroke-color-default: transparent;
-    --xy-minimap-mask-stroke-width-default: 1;
-    --xy-minimap-node-background-color-default: #2b2b2b;
-    --xy-minimap-node-stroke-color-default: transparent;
-    --xy-minimap-node-stroke-width-default: 2;
-
-    --xy-background-color-default: #141414;
-    --xy-background-pattern-dots-color-default: #777;
-    --xy-background-pattern-lines-color-default: #777;
-    --xy-background-pattern-cross-color-default: #777;
-    --xy-node-color-default: #f8f8f8;
-    --xy-node-border-default: 1px solid #3c3c3c;
-    --xy-node-background-color-default: #1e1e1e;
-    --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
-    --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
-    --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;
-
-    --xy-handle-background-color-default: #bebebe;
-    --xy-handle-border-color-default: #1e1e1e;
-
-    --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
-    --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);
-
-    --xy-controls-button-background-color-default: #2b2b2b;
-    --xy-controls-button-background-color-hover-default: #3e3e3e;
-    --xy-controls-button-color-default: #f8f8f8;
-    --xy-controls-button-color-hover-default: #fff;
-    --xy-controls-button-border-color-default: #5b5b5b;
-    --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
-
-    --xy-edge-label-background-color-default: #141414;
-    --xy-edge-label-color-default: #f8f8f8;
-  }
-  .react-flow__background {
-    background-color: var(
-      --xy-background-color-props,
-      var(--xy-background-color, var(--xy-background-color-default))
-    );
-    pointer-events: none;
-    z-index: -1;
-  }
   .react-flow__container {
     position: absolute;
     width: 100%;
@@ -118,16 +12,16 @@ const flowStyles = css`
   }
   .react-flow__pane {
     z-index: 1;
-  }
-  .react-flow__pane.draggable {
+    cursor: -webkit-grab;
     cursor: grab;
   }
-  .react-flow__pane.dragging {
-    cursor: grabbing;
-  }
   .react-flow__pane.selection {
     cursor: pointer;
   }
+  .react-flow__pane.dragging {
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+  }
   .react-flow__viewport {
     transform-origin: 0 0;
     z-index: 2;
@@ -153,41 +47,18 @@ const flowStyles = css`
     stroke-width: 1;
     fill: none;
   }
-  .react-flow__connection-path {
-    stroke: var(
-      --xy-connectionline-stroke,
-      var(--xy-connectionline-stroke-default)
-    );
-    stroke-width: var(
-      --xy-connectionline-stroke-width,
-      var(--xy-connectionline-stroke-width-default)
-    );
-    fill: none;
-  }
-  .react-flow .react-flow__edges {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-  .react-flow .react-flow__edges svg {
-    overflow: visible;
-    position: absolute;
-    pointer-events: none;
-  }
   .react-flow__edge {
     pointer-events: visibleStroke;
-  }
-  .react-flow__edge.selectable {
     cursor: pointer;
   }
   .react-flow__edge.animated path {
     stroke-dasharray: 5;
+    -webkit-animation: dashdraw 0.5s linear infinite;
     animation: dashdraw 0.5s linear infinite;
   }
   .react-flow__edge.animated path.react-flow__edge-interaction {
     stroke-dasharray: none;
+    -webkit-animation: none;
     animation: none;
   }
   .react-flow__edge.inactive {
@@ -199,16 +70,16 @@ const flowStyles = css`
     outline: none;
   }
   .react-flow__edge.selected .react-flow__edge-path,
-  .react-flow__edge.selectable:focus .react-flow__edge-path,
-  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
-    stroke: var(
-      --xy-edge-stroke-selected,
-      var(--xy-edge-stroke-selected-default)
-    );
+  .react-flow__edge:focus .react-flow__edge-path,
+  .react-flow__edge:focus-visible .react-flow__edge-path {
+    stroke: #555;
   }
   .react-flow__edge-textwrapper {
     pointer-events: all;
   }
+  .react-flow__edge-textbg {
+    fill: white;
+  }
   .react-flow__edge .react-flow__edge-text {
     pointer-events: none;
     -webkit-user-select: none;
@@ -220,12 +91,11 @@ const flowStyles = css`
   }
   .react-flow__connection .animated {
     stroke-dasharray: 5;
+    -webkit-animation: dashdraw 0.5s linear infinite;
     animation: dashdraw 0.5s linear infinite;
   }
-  svg.react-flow__connectionline {
+  .react-flow__connectionline {
     z-index: 1001;
-    overflow: visible;
-    position: absolute;
   }
   .react-flow__nodes {
     pointer-events: none;
@@ -239,16 +109,11 @@ const flowStyles = css`
     pointer-events: all;
     transform-origin: 0 0;
     box-sizing: border-box;
-    cursor: default;
-  }
-  .react-flow__node.selectable {
-    cursor: pointer;
-  }
-  .react-flow__node.draggable {
+    cursor: -webkit-grab;
     cursor: grab;
-    pointer-events: all;
   }
-  .react-flow__node.draggable.dragging {
+  .react-flow__node.dragging {
+    cursor: -webkit-grabbing;
     cursor: grabbing;
   }
   .react-flow__nodesselection {
@@ -259,6 +124,7 @@ const flowStyles = css`
   .react-flow__nodesselection-rect {
     position: absolute;
     pointer-events: all;
+    cursor: -webkit-grab;
     cursor: grab;
   }
   .react-flow__handle {
@@ -268,17 +134,10 @@ const flowStyles = css`
     min-height: 5px;
     width: 6px;
     height: 6px;
-    background-color: var(
-      --xy-handle-background-color,
-      var(--xy-handle-background-color-default)
-    );
-    border: 1px solid
-      var(--xy-handle-border-color, var(--xy-handle-border-color-default));
+    background: #1a192b;
+    border: 1px solid white;
     border-radius: 100%;
   }
-  .react-flow__handle.connectingfrom {
-    pointer-events: all;
-  }
   .react-flow__handle.connectionindicator {
     pointer-events: all;
     cursor: crosshair;
@@ -286,17 +145,17 @@ const flowStyles = css`
   .react-flow__handle-bottom {
     top: auto;
     left: 50%;
-    bottom: 0;
-    transform: translate(-50%, 50%);
+    bottom: -4px;
+    transform: translate(-50%, 0);
   }
   .react-flow__handle-top {
-    top: 0;
     left: 50%;
-    transform: translate(-50%, -50%);
+    top: -4px;
+    transform: translate(-50%, 0);
   }
   .react-flow__handle-left {
-    left: -4px;
     top: 50%;
+    left: -4px;
     transform: translate(0, -50%);
   }
   .react-flow__handle-right {
@@ -308,9 +167,6 @@ const flowStyles = css`
     cursor: move;
     pointer-events: all;
   }
-  .react-flow__pane.selection .react-flow__panel {
-    pointer-events: none;
-  }
   .react-flow__panel {
     position: absolute;
     z-index: 5;
@@ -322,28 +178,19 @@ const flowStyles = css`
   .react-flow__panel.bottom {
     bottom: 0;
   }
-  .react-flow__panel.top.center,
-  .react-flow__panel.bottom.center {
-    left: 50%;
-    transform: translateX(-15px) translateX(-50%);
-  }
   .react-flow__panel.left {
     left: 0;
   }
   .react-flow__panel.right {
     right: 0;
   }
-  .react-flow__panel.left.center,
-  .react-flow__panel.right.center {
-    top: 50%;
-    transform: translateY(-15px) translateY(-50%);
+  .react-flow__panel.center {
+    left: 50%;
+    transform: translateX(-50%);
   }
   .react-flow__attribution {
     font-size: 10px;
-    background: var(
-      --xy-attribution-background-color,
-      var(--xy-attribution-background-color-default)
-    );
+    background: rgba(255, 255, 255, 0.5);
     padding: 2px 3px;
     margin: 0;
   }
@@ -351,6 +198,11 @@ const flowStyles = css`
     text-decoration: none;
     color: #999;
   }
+  @-webkit-keyframes dashdraw {
+    from {
+      stroke-dashoffset: 10;
+    }
+  }
   @keyframes dashdraw {
     from {
       stroke-dashoffset: 10;
@@ -364,149 +216,6 @@ const flowStyles = css`
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
-    left: 0;
-    top: 0;
-  }
-  .react-flow__viewport-portal {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-  }
-  .react-flow__minimap {
-    background: var(
-      --xy-minimap-background-color-props,
-      var(
-        --xy-minimap-background-color,
-        var(--xy-minimap-background-color-default)
-      )
-    );
-  }
-  .react-flow__minimap-svg {
-    display: block;
-  }
-  .react-flow__minimap-mask {
-    fill: var(
-      --xy-minimap-mask-background-color-props,
-      var(
-        --xy-minimap-mask-background-color,
-        var(--xy-minimap-mask-background-color-default)
-      )
-    );
-    stroke: var(
-      --xy-minimap-mask-stroke-color-props,
-      var(
-        --xy-minimap-mask-stroke-color,
-        var(--xy-minimap-mask-stroke-color-default)
-      )
-    );
-    stroke-width: var(
-      --xy-minimap-mask-stroke-width-props,
-      var(
-        --xy-minimap-mask-stroke-width,
-        var(--xy-minimap-mask-stroke-width-default)
-      )
-    );
-  }
-  .react-flow__minimap-node {
-    fill: var(
-      --xy-minimap-node-background-color-props,
-      var(
-        --xy-minimap-node-background-color,
-        var(--xy-minimap-node-background-color-default)
-      )
-    );
-    stroke: var(
-      --xy-minimap-node-stroke-color-props,
-      var(
-        --xy-minimap-node-stroke-color,
-        var(--xy-minimap-node-stroke-color-default)
-      )
-    );
-    stroke-width: var(
-      --xy-minimap-node-stroke-width-props,
-      var(
-        --xy-minimap-node-stroke-width,
-        var(--xy-minimap-node-stroke-width-default)
-      )
-    );
-  }
-  .react-flow__background-pattern.dots {
-    fill: var(
-      --xy-background-pattern-color-props,
-      var(
-        --xy-background-pattern-color,
-        var(--xy-background-pattern-dots-color-default)
-      )
-    );
-  }
-  .react-flow__background-pattern.lines {
-    stroke: var(
-      --xy-background-pattern-color-props,
-      var(
-        --xy-background-pattern-color,
-        var(--xy-background-pattern-lines-color-default)
-      )
-    );
-  }
-  .react-flow__background-pattern.cross {
-    stroke: var(
-      --xy-background-pattern-color-props,
-      var(
-        --xy-background-pattern-color,
-        var(--xy-background-pattern-cross-color-default)
-      )
-    );
-  }
-  .react-flow__controls {
-    display: flex;
-    flex-direction: column;
-    box-shadow: var(
-      --xy-controls-box-shadow,
-      var(--xy-controls-box-shadow-default)
-    );
-  }
-  .react-flow__controls.horizontal {
-    flex-direction: row;
-  }
-  .react-flow__controls-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 26px;
-    width: 26px;
-    padding: 4px;
-    border: none;
-    background: var(
-      --xy-controls-button-background-color,
-      var(--xy-controls-button-background-color-default)
-    );
-    border-bottom: 1px solid
-      var(
-        --xy-controls-button-border-color-props,
-        var(
-          --xy-controls-button-border-color,
-          var(--xy-controls-button-border-color-default)
-        )
-      );
-    color: var(
-      --xy-controls-button-color-props,
-      var(--xy-controls-button-color, var(--xy-controls-button-color-default))
-    );
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-  }
-  .react-flow__controls-button svg {
-    width: 100%;
-    max-width: 12px;
-    max-height: 12px;
-    fill: currentColor;
   }
   .react-flow__edge.updating .react-flow__edge-path {
     stroke: #777;
@@ -518,6 +227,7 @@ const flowStyles = css`
   .react-flow__node.selectable:focus-visible {
     outline: none;
   }
+  .react-flow__node-default,
   .react-flow__node-input,
   .react-flow__node-output {
     padding: ${theme.space.sm};
@@ -531,51 +241,35 @@ const flowStyles = css`
   .react-flow__node-group {
     color: ${theme.colors.text};
     text-align: center;
-    border: var(--xy-node-border, var(--xy-node-border-default));
-    background-color: var(
-      --xy-node-background-color,
-      var(--xy-node-background-color-default)
-    );
   }
-  .react-flow__node-input.selectable:hover,
+  .react-flow__node-default::before {
+    content: "Unknown node type";
+    display: block;
+  }
   .react-flow__node-default.selectable:hover,
+  .react-flow__node-input.selectable:hover,
   .react-flow__node-output.selectable:hover,
   .react-flow__node-group.selectable:hover {
-    box-shadow: var(
-      --xy-node-boxshadow-hover,
-      var(--xy-node-boxshadow-hover-default)
-    );
   }
-  .react-flow__node-input.selectable.selected,
-  .react-flow__node-input.selectable:focus,
-  .react-flow__node-input.selectable:focus-visible,
   .react-flow__node-default.selectable.selected,
   .react-flow__node-default.selectable:focus,
   .react-flow__node-default.selectable:focus-visible,
+  .react-flow__node-input.selectable.selected,
+  .react-flow__node-input.selectable:focus,
+  .react-flow__node-input.selectable:focus-visible,
   .react-flow__node-output.selectable.selected,
   .react-flow__node-output.selectable:focus,
   .react-flow__node-output.selectable:focus-visible,
   .react-flow__node-group.selectable.selected,
   .react-flow__node-group.selectable:focus,
   .react-flow__node-group.selectable:focus-visible {
-    box-shadow: var(
-      --xy-node-boxshadow-selected,
-      var(--xy-node-boxshadow-selected-default)
-    );
   }
   .react-flow__node-group {
-    background-color: var(
-      --xy-node-group-background-color,
-      var(--xy-node-group-background-color-default)
-    );
+    background-color: rgba(240, 240, 240, 0.25);
   }
   .react-flow__nodesselection-rect,
   .react-flow__selection {
-    background: var(
-      --xy-selection-background-color,
-      var(--xy-selection-background-color-default)
-    );
-    border: var(--xy-selection-border, var(--xy-selection-border-default));
+    background: rgba(0, 89, 220, 0.08);
   }
   .react-flow__nodesselection-rect:focus,
   .react-flow__nodesselection-rect:focus-visible,
@@ -583,21 +277,32 @@ const flowStyles = css`
   .react-flow__selection:focus-visible {
     outline: none;
   }
+  .react-flow__controls {
+    box-shadow: ${theme.colors.shadow};
+  }
+  .react-flow__controls-button {
+    border: none;
+    background: #fefefe;
+    border-bottom: 1px solid #eee;
+    box-sizing: content-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    padding: 5px;
+  }
   .react-flow__controls-button:hover {
-    background: var(
-      --xy-controls-button-background-color-hover-props,
-      var(
-        --xy-controls-button-background-color-hover,
-        var(--xy-controls-button-background-color-hover-default)
-      )
-    );
-    color: var(
-      --xy-controls-button-color-hover-props,
-      var(
-        --xy-controls-button-color-hover,
-        var(--xy-controls-button-color-hover-default)
-      )
-    );
+    background: #f4f4f4;
+  }
+  .react-flow__controls-button svg {
+    width: 100%;
+    max-width: 12px;
+    max-height: 12px;
   }
   .react-flow__controls-button:disabled {
     pointer-events: none;
@@ -605,22 +310,8 @@ const flowStyles = css`
   .react-flow__controls-button:disabled svg {
     fill-opacity: 0.4;
   }
-  .react-flow__controls-button:last-child {
-    border-bottom: none;
-  }
-  .react-flow__controls.horizontal .react-flow__controls-button {
-    border-bottom: none;
-    border-right: 1px solid
-      var(
-        --xy-controls-button-border-color-props,
-        var(
-          --xy-controls-button-border-color,
-          var(--xy-controls-button-border-color-default)
-        )
-      );
-  }
-  .react-flow__controls.horizontal .react-flow__controls-button:last-child {
-    border-right: none;
+  .react-flow__minimap {
+    background-color: #fff;
   }
   .react-flow__resize-control {
     position: absolute;
@@ -643,15 +334,12 @@ const flowStyles = css`
   }
   /* handle styles */
   .react-flow__resize-control.handle {
-    width: 5px;
-    height: 5px;
+    width: 4px;
+    height: 4px;
     border: 1px solid #fff;
     border-radius: 1px;
-    background-color: var(
-      --xy-resize-background-color,
-      var(--xy-resize-background-color-default)
-    );
-    translate: -50% -50%;
+    background-color: ${theme.colors.primary};
+    transform: translate(-50%, -50%);
   }
   .react-flow__resize-control.handle.left {
     left: 0;
@@ -685,7 +373,7 @@ const flowStyles = css`
   .react-flow__resize-control.line {
     border-color: ${theme.colors.primaryStrong};
     border-width: 0;
-    border-style: solid;
+    border-style: dashed;
   }
   .react-flow__resize-control.line.left,
   .react-flow__resize-control.line.right {
@@ -717,15 +405,6 @@ const flowStyles = css`
     border-bottom-width: 1px;
     top: 100%;
   }
-  .react-flow__edge-textbg {
-    fill: var(
-      --xy-edge-label-background-color,
-      var(--xy-edge-label-background-color-default)
-    );
-  }
-  .react-flow__edge-text {
-    fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
-  }
 `;
 export {
   flowStyles

package/dist/Flow/hooks/useFlowInstance.js

@@ -1,4 +1,4 @@
-import { useReactFlow } from "@xyflow/react";
+import { useReactFlow } from "reactflow";
 function useFlowInstance() {
   return useReactFlow();
 }

package/dist/Flow/hooks/useFlowNode.js

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from "react";
-import { useStore, useNodes, useEdges } from "@xyflow/react";
+import { useStore, useNodes, useEdges } from "reactflow";
 import { shallow } from "zustand/shallow";
 import { useFlowInstance } from "./useFlowInstance.js";
 import { useNodeId } from "./useNodeId.js";
@@ -14,7 +14,7 @@ function relativePosition(positionA, positionB) {
 function useFlowNode(id) {
   const nodeId = useNodeId(id);
   const nodeSelector = useCallback(
-    (state) => state.nodes.find((n) => n.id === nodeId),
+    (state) => state.getNodes().find((n) => n.id === nodeId),
     [nodeId]
   );
   return useStore(nodeSelector, shallow);
@@ -49,7 +49,7 @@ function useFlowNodeParents(id) {
   const inputEdges = useFlowNodeInputEdges(id);
   const parentNodesSelector = useCallback(
     (state) => {
-      return inputEdges.map((e) => state.nodes.find((n) => n.id === e.source)).filter((n) => n !== null);
+      return inputEdges.map((e) => state.getNodes().find((n) => n.id === e.source)).filter((n) => n !== null);
     },
     [inputEdges]
   );
@@ -98,7 +98,7 @@ function useFlowNodeUtils(id) {
               ...n,
               parentId: node ? node.id : void 0,
               extent,
-              position: node ? relativePosition(node.position, n.position) : n.position
+              position: node ? relativePosition(node.position, n.position) : n.positionAbsolute ?? n.position
             };
           }
           return n;