@truedat/core 8.12.8 → 8.12.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "8.12.8",
+  "version": "8.12.10",
   "description": "Truedat Web Core",
   "sideEffects": [
     "**/*.css",
@@ -72,16 +72,16 @@
     "@tiptap/starter-kit": "3.31.3",
     "@xyflow/react": "^12.6.4",
     "axios": "^1.20.0",
-    "dompurify": "^3.4.11",
+    "dompurify": "^3.4.16",
     "elkjs": "^0.10.0",
     "graphql": "^16.11.0",
     "lodash": "^4.17.21",
     "lucide-react": "^1.41.0",
     "marked": "^17.0.3",
-    "moment": "^2.30.1",
+    "moment": "^2.31.0",
     "path-to-regexp": "^8.2.0",
     "prop-types": "^15.8.1",
-    "query-string": "^7.1.3",
+    "query-string": "^9.5.1",
     "react": "^19.2.7",
     "react-csv": "^2.2.2",
     "react-dom": "^19.2.7",
@@ -99,5 +99,5 @@
     "swr": "^2.3.3",
     "turndown": "^7.2.2"
   },
-  "gitHead": "682b801555be3f898e0502fd70a48ea32110c327"
+  "gitHead": "ac5f172e0ff4c087ea040ae29d1f2ea822bcadb6"
 }

package/src/components/Graph.js

@@ -41,7 +41,7 @@ const DEFAULT_NODE_HEIGHT = 44;
 const TRANSLATE_EXTENT_MIN_PADDING = 8000;
 const TRANSLATE_EXTENT_SIZE_MULTIPLIER = 4;
 const DEFAULT_GRAPH_HEIGHT = "640px";
-const EXPANDED_GRAPH_HEIGHT = "82vh";
+const EXPANDED_GRAPH_HEIGHT = "100%";
 const DEFAULT_MIN_ZOOM = 0.03;
 const DEFAULT_MAX_ZOOM = 2;
 const FIT_VIEW_PADDING = 0.15;
@@ -1607,7 +1607,7 @@ const LayoutFlow = ({
           <GraphControlTooltip
             content={formatMessage({
               id: "graph.controls.return_normal",
-              defaultMessage: "Volver a vista normal",
+              defaultMessage: "Return to normal view",
             })}
           >
             <ControlButton
@@ -1615,7 +1615,7 @@ const LayoutFlow = ({
               onClick={onCloseExpanded}
               aria-label={formatMessage({
                 id: "graph.controls.return_normal",
-                defaultMessage: "Volver a vista normal",
+                defaultMessage: "Return to normal view",
               })}
             >
               <Minimize2 size={20} strokeWidth={2} />
@@ -1817,9 +1817,16 @@ export const Graph = ({
   graphOptions,
 }) => {
   const [expandedOpen, setExpandedOpen] = useState(false);
-
-  const openExpanded = useCallback(() => setExpandedOpen(true), []);
-  const closeExpanded = useCallback(() => setExpandedOpen(false), []);
+  const expandedTriggerRef = useRef(null);
+  const { formatMessage } = useIntl();
+  const openExpanded = useCallback((event) => {
+    expandedTriggerRef.current = event.currentTarget;
+    setExpandedOpen(true);
+  }, []);
+  const closeExpanded = useCallback(() => {
+    setExpandedOpen(false);
+    expandedTriggerRef.current?.focus();
+  }, []);
 
   return (
     <>
@@ -1843,7 +1850,6 @@ export const Graph = ({
         <Modal
           open={expandedOpen}
           onClose={closeExpanded}
-          closeIcon
           size="fullscreen"
           closeOnDimmerClick
           closeOnEscape
@@ -1866,6 +1872,17 @@ export const Graph = ({
               className={canvasClassName}
               graphOptions={graphOptions}
             />
+            <button
+              className="td-graph-expanded-return"
+              onClick={closeExpanded}
+              type="button"
+            >
+              <Minimize2 size={20} strokeWidth={2} aria-hidden="true" />
+              {formatMessage({
+                id: "graph.controls.return_normal",
+                defaultMessage: "Return to normal view",
+              })}
+            </button>
           </Modal.Content>
         </Modal>
       ) : null}

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

@@ -153,6 +153,27 @@ describe("<Graph />", () => {
     });
   });
 
+  it.each([0, 1])(
+    "returns from expanded view using exit %s and restores focus",
+    async (index) => {
+      render(<Graph {...props} />);
+      const trigger = screen.getByLabelText("graph.controls.open_expanded");
+      fireEvent.click(trigger);
+      const buttons = await screen.findAllByRole("button", {
+        name: "Return to normal view",
+      });
+      expect(buttons).toHaveLength(2);
+      expect(document.querySelector(".td-graph-modal > .close")).toBeNull();
+      fireEvent.click(buttons[index]);
+      await waitFor(() =>
+        expect(
+          screen.queryByRole("button", { name: "Return to normal view" }),
+        ).not.toBeInTheDocument(),
+      );
+      expect(trigger).toHaveFocus();
+    },
+  );
+
   it("uses horizontal controls by default and keeps vertical controls in fullscreen", async () => {
     render(
       <Graph {...props} graphOptions={{ controlsOrientation: "vertical" }} />,

package/src/styles/Graph.less

@@ -23,3 +23,63 @@
     }
   }
 }
+
+.ui.dimmer > .ui.fullscreen.modal.td-graph-modal--expanded {
+  position: fixed;
+  inset: 0 !important;
+  width: 100% !important;
+  max-width: none;
+  height: 100dvh;
+  margin: 0 !important;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+
+  > .content {
+    position: relative;
+    height: 100%;
+    padding: 0 !important;
+    border-radius: 0;
+    overflow: hidden;
+  }
+
+  .td-graph-container {
+    height: 100%;
+  }
+}
+
+.td-graph-expanded-return {
+  position: absolute;
+  bottom: max(20px, env(safe-area-inset-bottom));
+  left: 50%;
+  z-index: 500;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: max-content;
+  max-width: calc(100% - 32px);
+  min-height: 44px;
+  padding: 10px 20px;
+  transform: translateX(-50%);
+  border: 1px solid #d7dde6;
+  border-radius: 999px;
+  background: #fff;
+  color: #334155;
+  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.13);
+  font: inherit;
+  cursor: pointer;
+
+  &:hover {
+    background: #f1f5f9;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--td-graph-accent, #ed5c17);
+    outline-offset: 2px;
+  }
+
+  svg {
+    flex-shrink: 0;
+  }
+}