fix(example-apps): focus state does not update on active

xyflow · Nov 14, 2024 · 043dfdf · 043dfdf
1 parent 212ee9e
commit 043dfdf
Show file tree

Hide file tree

Showing 49 changed files with 249 additions and 0 deletions.
diff --git a/apps/example-apps/react/examples/edges/animating-edges-node/xy-theme.css b/apps/example-apps/react/examples/edges/animating-edges-node/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/edges/animating-edges-svg/xy-theme.css b/apps/example-apps/react/examples/edges/animating-edges-svg/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/edges/custom-connectionline/xy-theme.css b/apps/example-apps/react/examples/edges/custom-connectionline/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/edges/custom-edges/xy-theme.css b/apps/example-apps/react/examples/edges/custom-edges/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/edges/delete-edge-on-drop/xy-theme.css b/apps/example-apps/react/examples/edges/delete-edge-on-drop/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/edges/edge-label-renderer/xy-theme.css b/apps/example-apps/react/examples/edges/edge-label-renderer/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/edges/edge-types/xy-theme.css b/apps/example-apps/react/examples/edges/edge-types/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/edges/floating-edges/xy-theme.css b/apps/example-apps/react/examples/edges/floating-edges/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/edges/markers/xy-theme.css b/apps/example-apps/react/examples/edges/markers/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/edges/multi-connection-line/xy-theme.css b/apps/example-apps/react/examples/edges/multi-connection-line/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/edges/reconnect-edge/xy-theme.css b/apps/example-apps/react/examples/edges/reconnect-edge/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/edges/simple-floating-edges/xy-theme.css b/apps/example-apps/react/examples/edges/simple-floating-edges/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/edges/temporary-edges/xy-theme.css b/apps/example-apps/react/examples/edges/temporary-edges/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/interaction/computing-flows/xy-theme.css b/apps/example-apps/react/examples/interaction/computing-flows/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/interaction/connection-events/xy-theme.css b/apps/example-apps/react/examples/interaction/connection-events/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/interaction/context-menu/xy-theme.css b/apps/example-apps/react/examples/interaction/context-menu/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/interaction/contextual-zoom/xy-theme.css b/apps/example-apps/react/examples/interaction/contextual-zoom/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/interaction/drag-and-drop/xy-theme.css b/apps/example-apps/react/examples/interaction/drag-and-drop/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/interaction/interaction-props/xy-theme.css b/apps/example-apps/react/examples/interaction/interaction-props/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/interaction/prevent-cycles/xy-theme.css b/apps/example-apps/react/examples/interaction/prevent-cycles/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/interaction/save-and-restore/xy-theme.css b/apps/example-apps/react/examples/interaction/save-and-restore/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/interaction/touch-device/xy-theme.css b/apps/example-apps/react/examples/interaction/touch-device/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/interaction/validation/xy-theme.css b/apps/example-apps/react/examples/interaction/validation/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/interaction/zoom-transitions/xy-theme.css b/apps/example-apps/react/examples/interaction/zoom-transitions/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/layout/dagre/xy-theme.css b/apps/example-apps/react/examples/layout/dagre/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/layout/elkjs-multiple-handles/xy-theme.css b/apps/example-apps/react/examples/layout/elkjs-multiple-handles/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/layout/elkjs/xy-theme.css b/apps/example-apps/react/examples/layout/elkjs/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/layout/entitree-flex/xy-theme.css b/apps/example-apps/react/examples/layout/entitree-flex/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/layout/horizontal/xy-theme.css b/apps/example-apps/react/examples/layout/horizontal/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/layout/sub-flows/xy-theme.css b/apps/example-apps/react/examples/layout/sub-flows/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/misc/download-image/xy-theme.css b/apps/example-apps/react/examples/misc/download-image/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/misc/overview/xy-theme.css b/apps/example-apps/react/examples/misc/overview/xy-theme.css
@@ -53,6 +53,15 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);

diff --git a/apps/example-apps/react/examples/misc/provider/xy-theme.css b/apps/example-apps/react/examples/misc/provider/xy-theme.css
@@ -53,6 +53,11 @@
     border-color: #d9d9d9;
 }
 
+.react-flow__node.selectable:focus:active {
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+
 .react-flow__node.selectable:hover, 
 .react-flow__node.draggable:hover {
     border-color: var(--xy-theme-hover);