@malloy-publisher/sdk 0.0.31 → 0.0.32

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "@malloy-publisher/sdk",
    "description": "Malloy Publisher SDK",
-   "version": "0.0.31",
+   "version": "0.0.32",
    "type": "module",
    "main": "dist/index.cjs.js",
    "module": "dist/index.es.js",
@@ -28,7 +28,8 @@
    },
    "peerDependencies": {
       "react": "^19.1.0",
-      "react-dom": "^19.1.0"
+      "react-dom": "^19.1.0",
+      "react-router-dom": "^7.6.2"
    },
    "dependencies": {
       "@emotion/react": "^11.14.0",
@@ -45,8 +46,7 @@
       "@tanstack/react-query": "^5.59.16",
       "@uiw/react-md-editor": "^4.0.6",
       "axios": "^1.7.7",
-      "markdown-to-jsx": "^7.7.6",
-      "react-router-dom": "^7.6.2"
+      "markdown-to-jsx": "^7.7.6"
    },
    "devDependencies": {
       "@openapitools/openapi-generator-cli": "^2.13.5",

package/src/components/Home/Home.tsx

@@ -9,7 +9,7 @@ const queryClient = new QueryClient();
 
 interface HomeProps {
    server?: string;
-   navigate?: (to: string) => void;
+   navigate?: (to: string, event?: React.MouseEvent) => void;
 }
 
 export default function Home({ server, navigate }: HomeProps) {
@@ -44,7 +44,9 @@ export default function Home({ server, navigate }: HomeProps) {
                   <Grid key={project.name}>
                      <Typography
                         variant="h1"
-                        onClick={() => navigate(`/${project.name}/`)}
+                        onClick={(event) =>
+                           navigate(`/${project.name}/`, event)
+                        }
                      >
                         {project.name}
                      </Typography>

package/src/components/MutableNotebook/MutableCell.tsx

@@ -311,7 +311,9 @@ export function MutableCell({
 }
 
 function useDebounce<T>(callback: (value: T) => void, delay: number = 2000) {
-   const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>();
+   const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(
+      undefined,
+   );
 
    return React.useCallback(
       (value: T) => {

package/src/components/MutableNotebook/MutableNotebook.tsx

@@ -16,7 +16,7 @@ import {
 } from "@mui/material";
 import Stack from "@mui/material/Stack";
 import React from "react";
-import { useNavigate } from "react-router-dom";
+import { useRouterClickHandler } from "../click_helper";
 import { Configuration, ModelsApi } from "../../client";
 import { SourceAndPath } from "../Model/SourcesExplorer";
 import { NotebookManager } from "../NotebookManager";
@@ -46,7 +46,7 @@ export default function MutableNotebook({
    expandCodeCells,
    expandEmbeddings,
 }: MutableNotebookProps) {
-   const navigate = useNavigate();
+   const navigate = useRouterClickHandler();
    const { server, projectName, packageName, versionId, accessToken } =
       usePublisherPackage();
    if (!projectName || !packageName) {
@@ -107,12 +107,12 @@ export default function MutableNotebook({
       setDeleteDialogOpen(true);
    };
 
-   const handleDeleteConfirm = () => {
+   const handleDeleteConfirm = (event?: React.MouseEvent) => {
       if (notebookPath && notebookStorage && userContext) {
          notebookStorage.deleteNotebook(userContext, notebookPath);
       }
       setDeleteDialogOpen(false);
-      navigate(`/${projectName}/${packageName}`);
+      navigate(`/${projectName}/${packageName}`, event);
    };
 
    const handleDeleteCancel = () => {
@@ -286,7 +286,7 @@ export default function MutableNotebook({
                               Cancel
                            </Button>
                            <Button
-                              onClick={handleDeleteConfirm}
+                              onClick={(event) => handleDeleteConfirm(event)}
                               color="error"
                               autoFocus
                            >

package/src/components/Package/Connections.tsx

@@ -19,7 +19,7 @@ interface ConnectionsProps {
    server?: string;
    projectName: string;
    accessToken: string;
-   navigate: (to: string) => void;
+   navigate: (to: string, event?: React.MouseEvent) => void;
 }
 
 // TODO(jjs) - Move this UI to the ConnectionExplorer component

package/src/components/Package/FileTreeView.tsx

@@ -27,7 +27,7 @@ import { Typography } from "@mui/material";
 interface FiieTreeViewProps {
    items: Model[] | Database[];
    defaultExpandedItems: string[];
-   navigate?: (to: string) => void;
+   navigate?: (to: string, event?: React.MouseEvent) => void;
 }
 
 export function FileTreeView({
@@ -64,7 +64,7 @@ type ExtendedTreeItemProps = {
    label: string;
    fileType: FileType;
    selectable: boolean;
-   link: () => void | undefined;
+   link: ((event?: React.MouseEvent) => void) | undefined;
 };
 
 interface CustomLabelProps {
@@ -135,7 +135,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
             <TreeItem2Content
                {...getContentProps()}
                {...(item.link && {
-                  onClick: () => item.link(),
+                  onClick: (event) => item.link(event),
                })}
                sx={{
                   // If the item is not selectable, disable pointer events.
@@ -159,7 +159,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
 
 function getTreeView(
    metadataEntries: Model[] | Database[],
-   navigate: (to: string) => void,
+   navigate: (to: string, event?: React.MouseEvent) => void,
 ): TreeViewBaseItem<ExtendedTreeItemProps>[] {
    const tree = new Map<string, unknown>();
    metadataEntries.map((entry: Model | Database) => {
@@ -182,7 +182,7 @@ function getTreeView(
 function getTreeViewRecursive(
    node: Map<string, unknown>,
    path: string,
-   navigate: (to: string) => void,
+   navigate: (to: string, event?: React.MouseEvent) => void,
 ): TreeViewBaseItem<ExtendedTreeItemProps>[] {
    const treeViewItems: TreeViewBaseItem<ExtendedTreeItemProps>[] = [];
    node.forEach((value, key) => {
@@ -199,7 +199,7 @@ function getTreeViewRecursive(
             fileType: fileType,
             link:
                fileType === "model" || fileType === "notebook"
-                  ? navigate.bind(null, path + key)
+                  ? (event) => navigate(path + key, event)
                   : undefined,
             selectable: fileType === "model" || fileType === "notebook",
          });

package/src/components/Package/Models.tsx

@@ -16,7 +16,7 @@ interface ModelsProps {
    projectName: string;
    packageName: string;
    versionId?: string;
-   navigate: (to: string) => void;
+   navigate: (to: string, event?: React.MouseEvent) => void;
    accessToken?: string;
 }
 

package/src/components/Package/Notebooks.tsx

@@ -14,7 +14,7 @@ interface ModelsProps {
    projectName: string;
    packageName: string;
    versionId?: string;
-   navigate: (to: string) => void;
+   navigate: (to: string, event?: React.MouseEvent) => void;
    accessToken?: string;
 }
 

package/src/components/Package/Package.tsx

@@ -15,7 +15,7 @@ interface PackageProps {
    projectName: string;
    packageName: string;
    versionId?: string;
-   navigate?: (to: string) => void;
+   navigate?: (to: string, event?: React.MouseEvent) => void;
    accessToken?: string;
 }
 

package/src/components/Project/Packages.tsx

@@ -9,7 +9,7 @@ const queryClient = new QueryClient();
 interface ProjectProps {
    server?: string;
    projectName: string;
-   navigate?: (to: string) => void;
+   navigate: (to: string, event?: React.MouseEvent) => void;
    accessToken?: string;
 }
 
@@ -34,12 +34,6 @@ export default function Project({
       queryClient,
    );
 
-   if (!navigate) {
-      navigate = (to: string) => {
-         window.location.href = to;
-      };
-   }
-
    return (
       <>
          {!isSuccess && !isError && (
@@ -74,7 +68,9 @@ export default function Project({
                               <StyledCard
                                  variant="outlined"
                                  sx={{ padding: "10px", cursor: "pointer" }}
-                                 onClick={() => navigate(p.name + "/")}
+                                 onClick={(event) =>
+                                    navigate(p.name + "/", event)
+                                 }
                               >
                                  <StyledCardContent>
                                     <Typography

package/src/components/Project/Project.tsx

@@ -5,7 +5,7 @@ import Packages from "./Packages";
 interface ProjectProps {
    server?: string;
    projectName: string;
-   navigate?: (to: string) => void;
+   navigate: (to: string, event?: React.MouseEvent) => void;
    accessToken?: string;
 }
 

package/src/components/RenderedResult/ResultContainer.tsx

@@ -65,12 +65,6 @@ export default function ResultContainer({
       if (contentHeight < availableHeight) {
          setExplicitHeight(contentHeight + 20);
       }
-      console.log("Height comparison:", {
-         contentHeight,
-         minHeight,
-         availableHeight,
-         exceedsHeight,
-      });
       setShouldShowToggle(exceedsHeight);
    }, [contentHeight, minHeight]);
 
@@ -92,8 +86,8 @@ export default function ResultContainer({
                position: "relative",
                minHeight: `${minHeight}px`,
                maxHeight: `${isExpanded ? maxHeight : minHeight}px`,
-               border: "1px solid #e0e0e0",
-               borderRadius: 1,
+               border: "0px",
+               borderRadius: 0,
                overflow: "hidden",
                display: "flex",
                flexDirection: "column",

package/src/components/click_helper.ts

@@ -0,0 +1,37 @@
+import { useNavigate } from "react-router-dom";
+import { MouseEvent } from "react";
+
+/**
+ * Custom hook that returns a function for handling clicks with proper modifier key support.
+ * The returned function handles CMD/Ctrl clicks to open in new tabs, regular clicks for navigation.
+ *
+ * @returns A function that takes a relative URL and either navigates or opens in new tab
+ */
+export function useRouterClickHandler() {
+   const navigate = useNavigate();
+
+   return (to: string, event?: MouseEvent) => {
+      // If no event or no modifier keys, use normal navigation
+      if (
+         !event ||
+         (!event.metaKey &&
+            !event.ctrlKey &&
+            !event.shiftKey &&
+            event.button !== 1)
+      ) {
+         navigate(to);
+         return;
+      }
+
+      // For modifier keys or middle mouse, let browser handle it by opening URL
+      const href = new URL(to, window.location.href).href;
+
+      if (event.metaKey || event.ctrlKey || event.button === 1) {
+         // CMD/Ctrl click or middle mouse - open in new tab
+         window.open(href, "_blank");
+      } else if (event.shiftKey) {
+         // Shift click - open in new window
+         window.open(href, "_blank");
+      }
+   };
+}

package/src/components/index.ts

@@ -5,3 +5,4 @@ export * from "./Package";
 export * from "./Project";
 export * from "./QueryResult";
 export * from "./Home";
+export { useRouterClickHandler } from "./click_helper";

package/vite.config.ts

@@ -42,7 +42,6 @@ export default ({ mode }) => {
                      "@uiw/react-md-editor",
                      "axios",
                      "markdown-to-jsx",
-                     "react-router-dom",
                   ],
                },
             },