@truedat/core 8.12.11 → 8.12.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "8.12.11",
+  "version": "8.12.12",
   "description": "Truedat Web Core",
   "sideEffects": [
     "**/*.css",
@@ -57,7 +57,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.12.11",
+    "@truedat/test": "8.12.12",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -99,5 +99,5 @@
     "swr": "^2.3.3",
     "turndown": "^7.2.2"
   },
-  "gitHead": "48671e0f1467f7713019ab8d729818c741fa9bc7"
+  "gitHead": "b6e3413dae81b2e28e98a21cf371174caa30ab4b"
 }

package/src/components/Graph.js

@@ -1671,37 +1671,44 @@ const LayoutFlow = ({
               />
             </button>
           </div>
-          {!isMinimapCollapsed ? (
-            <div className="td-graph-minimap-body">
-              <MiniMap
-                position="bottom-left"
-                pannable
-                zoomable
-                maskColor="rgba(15, 23, 42, 0.08)"
-                nodeColor={minimapNodeColor}
-                nodeStrokeColor="rgba(15, 23, 42, 0.12)"
-                className="td-graph-minimap"
-              />
-              <button
-                type="button"
-                className="td-graph-minimap-expand"
-                aria-label={
-                  isMinimapExpanded ? "Reducir mini-mapa" : "Expandir mini-mapa"
-                }
-                onClick={(event) => {
-                  event.stopPropagation();
-                  setIsMinimapExpanded((prev) => !prev);
-                }}
-                onMouseDown={(event) => event.stopPropagation()}
-              >
-                {isMinimapExpanded ? (
-                  <Minimize2 size={12} strokeWidth={2} />
-                ) : (
-                  <Expand size={12} strokeWidth={2} />
-                )}
-              </button>
-            </div>
-          ) : null}
+          <div
+            className="td-graph-minimap-body"
+            aria-hidden={isMinimapCollapsed}
+            inert={isMinimapCollapsed}
+          >
+            <MiniMap
+              position="bottom-left"
+              pannable
+              zoomable
+              maskColor="rgba(15, 23, 42, 0.08)"
+              nodeColor={minimapNodeColor}
+              nodeStrokeColor="rgba(15, 23, 42, 0.12)"
+              className="td-graph-minimap"
+              style={
+                isMinimapExpanded
+                  ? { width: 288, height: 200 }
+                  : { width: 200, height: 150 }
+              }
+            />
+            <button
+              type="button"
+              className="td-graph-minimap-expand"
+              aria-label={
+                isMinimapExpanded ? "Reducir mini-mapa" : "Expandir mini-mapa"
+              }
+              onClick={(event) => {
+                event.stopPropagation();
+                setIsMinimapExpanded((prev) => !prev);
+              }}
+              onMouseDown={(event) => event.stopPropagation()}
+            >
+              {isMinimapExpanded ? (
+                <Minimize2 size={12} strokeWidth={2} />
+              ) : (
+                <Expand size={12} strokeWidth={2} />
+              )}
+            </button>
+          </div>
         </div>
       )}
       {bottomControls && (

package/src/components/__tests__/Graph.spec.js

@@ -61,6 +61,9 @@ jest.mock("@xyflow/react", () => ({
       {children}
     </button>
   ),
+  MiniMap: ({ style, className, ...props }) => (
+    <div data-testid="mini-map" className={className} style={style} />
+  ),
   Background: () => null,
   BackgroundVariant: {
     Dots: "dots",
@@ -286,4 +289,57 @@ describe("<Graph />", () => {
     expect(mockSetCenter).not.toHaveBeenCalled();
     expect(mockSetViewport).not.toHaveBeenCalled();
   });
+
+  describe("mini-map", () => {
+    const minimapProps = {
+      ...props,
+      graphOptions: {
+        minimapNodeColor: () => "#ffffff",
+      },
+    };
+
+    it("is not rendered without minimapNodeColor", () => {
+      render(<Graph {...props} />);
+
+      expect(screen.queryByTestId("mini-map")).not.toBeInTheDocument();
+    });
+
+    it("collapses and expands the shell from the header toggle", () => {
+      const { container } = render(<Graph {...minimapProps} />);
+
+      const shell = container.querySelector(".td-graph-minimap-shell");
+      const toggle = container.querySelector(".td-graph-minimap-toggle");
+      const body = container.querySelector(".td-graph-minimap-body");
+
+      expect(shell).not.toHaveClass("td-graph-minimap-shell--collapsed");
+      expect(toggle).toHaveAttribute("aria-expanded", "true");
+      expect(body).not.toHaveAttribute("inert");
+      expect(body).toHaveAttribute("aria-hidden", "false");
+
+      fireEvent.click(toggle);
+
+      expect(shell).toHaveClass("td-graph-minimap-shell--collapsed");
+      expect(toggle).toHaveAttribute("aria-expanded", "false");
+      expect(body).toHaveAttribute("inert");
+      expect(body).toHaveAttribute("aria-hidden", "true");
+    });
+
+    it("resizes the mini-map with the expand button", () => {
+      const { container } = render(<Graph {...minimapProps} />);
+
+      const expandButton = container.querySelector(".td-graph-minimap-expand");
+
+      expect(screen.getByTestId("mini-map")).toHaveStyle({
+        width: "200px",
+        height: "150px",
+      });
+
+      fireEvent.click(expandButton);
+
+      expect(screen.getByTestId("mini-map")).toHaveStyle({
+        width: "288px",
+        height: "200px",
+      });
+    });
+  });
 });

package/src/styles/Graph.less

@@ -1,8 +1,3 @@
-.td-graph-minimap-shell--expanded .td-graph-minimap {
-  width: 288px;
-  height: 200px;
-}
-
 .td-graph__space-pan-active {
   .react-flow__node,
   .react-flow__node *,