@datalayer/core 0.0.3 → 0.0.4

package/lib/hooks/useCellOutputshot.js

@@ -10,7 +10,8 @@ const useCellOutputshot = () => {
     const [error, setError] = useState();
     const { update } = useCellStore();
     const takeOutputshot = (node) => {
-        takeHTMLNodeScreenshot(node).then(outputshotData => {
+        takeHTMLNodeScreenshot(node)
+            .then(outputshotData => {
             setOutputshot(outputshotData);
             update({
                 outputshotData,
@@ -19,10 +20,6 @@ const useCellOutputshot = () => {
         })
             .catch(reason => setError(reason));
     };
-    return [
-        outputshot,
-        takeOutputshot,
-        { error }
-    ];
+    return [outputshot, takeOutputshot, { error }];
 };
 export default useCellOutputshot;

package/lib/hooks/useContainsFocus.js

@@ -26,7 +26,8 @@ export const useContainsFocus = (containerRef, onFocusChange) => {
             updateState(true);
         };
         const handleFocusOut = (event) => {
-            if (containerRef.current && !containerRef.current.contains(event.relatedTarget)) {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.relatedTarget)) {
                 updateState(false);
             }
         };

package/lib/hooks/useDatalayer.js

@@ -2,11 +2,11 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useLocation } from 'react-router-dom';
+import { useLocation } from './useLocation';
 import { useNavigate } from './useNavigate';
 import { useToast } from './useToast';
 // import { useRuMnock } from './../mocks';
-import { useIAMStore, } from '../state';
+import { useIAMStore } from '../state';
 import { requestDatalayerAPI } from '../api';
 export function useDatalayer(props = {}) {
     const { loginRoute = '/login', notifyOnError = true } = props;
@@ -57,7 +57,9 @@ export function useDatalayer(props = {}) {
                             enqueueToast(`API Error`, { variant: 'error' });
                         }
                         if (responseError.exceptionMessage) {
-                            enqueueToast(`${responseError.exceptionMessage}`, { variant: 'error' });
+                            enqueueToast(`${responseError.exceptionMessage}`, {
+                                variant: 'error',
+                            });
                         }
                     }
                 }

package/lib/hooks/useError.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 export declare const ErrorMessage: React.FC<{
     message: Array<string> | string | null;
 }>;

package/lib/hooks/useError.js

@@ -3,11 +3,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useState } from "react";
+import { useState } from 'react';
 import { Flash } from '@primer/react';
 export const ErrorMessage = ({ message }) => {
     if (message instanceof Array) {
-        return _jsx("div", { children: message.map((m, i) => _jsx(Flash, { variant: "danger", children: m }, i)) });
+        return (_jsx("div", { children: message.map((m, i) => (_jsx(Flash, { variant: "danger", children: m }, i))) }));
     }
     else {
         return _jsx(Flash, { variant: "danger", children: message });

package/lib/hooks/useExternalScript.js

@@ -2,12 +2,12 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useEffect } from "react";
+import { useEffect } from 'react';
 const useExternalScript = (url) => {
     useEffect(() => {
-        const head = document.querySelector("head");
-        const script = document.createElement("script");
-        script.setAttribute("src", url);
+        const head = document.querySelector('head');
+        const script = document.createElement('script');
+        script.setAttribute('src', url);
         head.appendChild(script);
         return () => {
             head.removeChild(script);

package/lib/hooks/useFocusTrap.js

@@ -24,7 +24,8 @@ export function useFocusTrap(settings, dependencies = []) {
     // to the previously-focused element (if necessary).
     function disableTrap() {
         abortController.current?.abort();
-        if (settings?.restoreFocusOnCleanUp && previousFocusedElement.current instanceof HTMLElement) {
+        if (settings?.restoreFocusOnCleanUp &&
+            previousFocusedElement.current instanceof HTMLElement) {
             previousFocusedElement.current.focus();
             previousFocusedElement.current = null;
         }

package/lib/hooks/useIAM.js

@@ -4,8 +4,8 @@
  */
 import { useEffect, useState } from 'react';
 import { useCache } from './useCache';
-import { coreStore, useIAMStore, useLayoutStore, useOrganizationStore, useSpaceStore } from '../state';
-import { asUser, ANONYMOUS_USER, ANONYMOUS_USER_TOKEN } from '../models';
+import { coreStore, useIAMStore, useLayoutStore, useOrganizationStore, useSpaceStore, } from '../state';
+import { asUser, ANONYMOUS_USER, ANONYMOUS_USER_TOKEN, } from '../models';
 import { requestDatalayerAPI } from '../api';
 export const useIAM = (props = { user: undefined, token: undefined }) => {
     const { token } = props;
@@ -65,8 +65,7 @@ export const useIAM = (props = { user: undefined, token: undefined }) => {
     };
     useEffect(() => {
         if (token) {
-            whoami()
-                .then(resp => {
+            whoami().then(resp => {
                 if (resp.success) {
                     const user = asUser(resp.profile);
                     setIAMState({ user, token });
@@ -87,7 +86,7 @@ export const useIAM = (props = { user: undefined, token: undefined }) => {
         token: iamState.token,
         loginAndNavigate,
         setLogin,
-        logout
+        logout,
     };
 };
 export default useIAM;

package/lib/hooks/useId.js

@@ -58,8 +58,8 @@
  * server hydration and never again, SO BACK OFF ALRIGHT?
  */
 /* eslint-disable react-hooks/rules-of-hooks */
-import * as React from "react";
-import { useLayoutEffect } from "react";
+import * as React from 'react';
+import { useLayoutEffect } from 'react';
 let serverHandoffComplete = false;
 let id = 0;
 function genId() {
@@ -67,7 +67,7 @@ function genId() {
 }
 // Workaround for https://github.com/webpack/webpack/issues/14814
 // https://github.com/eps1lon/material-ui/blob/8d5f135b4d7a58253a99ab56dce4ac8de61f5dc1/packages/mui-utils/src/useId.ts#L21
-const maybeReactUseId = React["useId".toString()];
+const maybeReactUseId = React['useId'.toString()];
 function useId(providedId) {
     if (maybeReactUseId !== undefined) {
         const generatedId = maybeReactUseId();

package/lib/hooks/useJupyterLabTheme.js

@@ -9,7 +9,9 @@ export var JupyterLabTheme;
     JupyterLabTheme["DARK"] = "JupyterLab Dark";
 })(JupyterLabTheme || (JupyterLabTheme = {}));
 export const useJupyterLabTheme = (themeManager) => {
-    const isLight = themeManager && themeManager.theme ? themeManager.isLight(themeManager.theme) : true;
+    const isLight = themeManager && themeManager.theme
+        ? themeManager.isLight(themeManager.theme)
+        : true;
     const [theme, setTheme] = useState(isLight ? JupyterLabTheme.LIGHT : JupyterLabTheme.DARK);
     useEffect(() => {
         const handleThemeChange = (newTheme, event) => {

package/lib/hooks/useLocation.d.ts

@@ -0,0 +1,22 @@
+export interface Location {
+    pathname: string;
+    search: string;
+    hash: string;
+    state: any;
+    key: string;
+}
+/**
+ * Hook to get current location
+ * Detects and uses React Router when available, falls back to native browser location
+ */
+export declare const useLocation: () => Location;
+/**
+ * Hook to get history functions
+ * Detects and uses React Router history when available, falls back to browser history
+ */
+export declare const useHistory: () => {
+    back: () => void;
+    forward: () => void;
+    replace: (to: string, state?: any) => void;
+    push: (to: string, state?: any) => void;
+};

package/lib/hooks/useLocation.js

@@ -0,0 +1,149 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useEffect, useState } from 'react';
+// Import React Router hooks from our wrapper
+import { useLocationRR, useNavigateRR, } from '../navigation/adapters/react-router';
+// Import Next.js hooks from our wrapper
+// Currently not used but kept for future Next.js support
+// import {
+//   usePathnameNext,
+//   useSearchParamsNext,
+// } from '../navigation/adapters/nextjs';
+/**
+ * Hook to get current location
+ * Detects and uses React Router when available, falls back to native browser location
+ */
+export const useLocation = () => {
+    // Native location state for fallback
+    const [nativeLocation, setNativeLocation] = useState(() => {
+        if (typeof window === 'undefined') {
+            return {
+                pathname: '/',
+                search: '',
+                hash: '',
+                state: null,
+                key: 'default',
+            };
+        }
+        return {
+            pathname: window.location.pathname,
+            search: window.location.search,
+            hash: window.location.hash,
+            state: window.history.state,
+            key: 'default',
+        };
+    });
+    // Detect environment
+    const isNextJs = typeof window !== 'undefined' && !!window.__NEXT_DATA__;
+    const isClient = typeof window !== 'undefined';
+    // Try to use React Router if available
+    let routerLocation = null;
+    let isReactRouter = false;
+    try {
+        // Only actually use the hook if we have it and not in Next.js
+        if (!isNextJs && useLocationRR && isClient) {
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            routerLocation = useLocationRR();
+            isReactRouter = !!routerLocation;
+        }
+    }
+    catch {
+        // Not in a Router context, fallback to native
+    }
+    useEffect(() => {
+        // Only set up native listeners if not using React Router
+        if (isReactRouter)
+            return;
+        // Listen to popstate for browser navigation changes
+        const handleLocationChange = () => {
+            setNativeLocation({
+                pathname: window.location.pathname,
+                search: window.location.search,
+                hash: window.location.hash,
+                state: window.history.state,
+                key: 'native-' + Date.now(),
+            });
+        };
+        window.addEventListener('popstate', handleLocationChange);
+        // Also listen for custom navigation events if needed
+        window.addEventListener('pushstate', handleLocationChange);
+        window.addEventListener('replacestate', handleLocationChange);
+        return () => {
+            window.removeEventListener('popstate', handleLocationChange);
+            window.removeEventListener('pushstate', handleLocationChange);
+            window.removeEventListener('replacestate', handleLocationChange);
+        };
+    }, [isReactRouter]);
+    // Return React Router location if available, otherwise native location
+    return isReactRouter && routerLocation ? routerLocation : nativeLocation;
+};
+/**
+ * Hook to get history functions
+ * Detects and uses React Router history when available, falls back to browser history
+ */
+export const useHistory = () => {
+    // Detect environment
+    const isNextJs = typeof window !== 'undefined' && !!window.__NEXT_DATA__;
+    const isClient = typeof window !== 'undefined';
+    // Try to use React Router if available
+    let routerNavigate = null;
+    let isReactRouter = false;
+    try {
+        if (!isNextJs && useNavigateRR && isClient) {
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            routerNavigate = useNavigateRR();
+            isReactRouter = true;
+        }
+    }
+    catch {
+        // Not in a Router context
+    }
+    if (isReactRouter && routerNavigate) {
+        // Use React Router navigation
+        return {
+            back: () => {
+                routerNavigate(-1);
+            },
+            forward: () => {
+                routerNavigate(1);
+            },
+            replace: (to, state) => {
+                routerNavigate(to, { replace: true, state });
+            },
+            push: (to, state) => {
+                routerNavigate(to, { state });
+            },
+        };
+    }
+    // Fall back to native browser history
+    return {
+        back: () => {
+            if (typeof window !== 'undefined') {
+                window.history.back();
+            }
+        },
+        forward: () => {
+            if (typeof window !== 'undefined') {
+                window.history.forward();
+            }
+        },
+        replace: (to, state) => {
+            if (typeof window !== 'undefined') {
+                const url = new URL(to, window.location.href);
+                window.history.replaceState(state || null, '', url.href);
+                // Dispatch custom event for location hooks
+                window.dispatchEvent(new Event('replacestate'));
+            }
+        },
+        push: (to, state) => {
+            if (typeof window !== 'undefined') {
+                const url = new URL(to, window.location.href);
+                window.history.pushState(state || null, '', url.href);
+                // Dispatch custom event for location hooks
+                window.dispatchEvent(new Event('pushstate'));
+            }
+        },
+    };
+};

package/lib/hooks/useLocationHandles.d.ts

@@ -3,8 +3,8 @@ export declare const useLocationHandles: () => {
     spaceHandler: string | undefined;
     spaceHandle?: undefined;
 } | {
-    accountHandle: string | undefined;
-    spaceHandle: string | undefined;
+    accountHandle: string;
+    spaceHandle: string;
     spaceHandler?: undefined;
 };
 export default useLocationHandles;

package/lib/hooks/useLocationHandles.js

@@ -2,13 +2,15 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useLocation, useParams } from "react-router-dom";
-import { useRunStore } from "../state";
+import { useLocation } from './useLocation';
+import { useParams } from './useParams';
+import { useRunStore } from '../state';
 export const useLocationHandles = () => {
-    const { accountHandle, spaceHandle } = useParams();
+    const params = useParams();
+    const { accountHandle, spaceHandle } = params;
     const { pathname } = useLocation();
     const runStore = useRunStore();
-    if (pathname.startsWith("/public")) {
+    if (pathname.startsWith('/public')) {
         return {
             accountHandle: runStore.iam().user?.handle,
             spaceHandler: runStore.layout().space?.handle,

package/lib/hooks/useNavigate.d.ts

@@ -1,2 +1,6 @@
-export declare const useNavigate: () => (location: string, e?: any, resetPortals?: boolean, options?: any) => void;
+/**
+ * Main navigation hook that provides a universal navigate function
+ * Works with React Router, Next.js, or native browser navigation
+ */
+export declare const useNavigate: () => (location: string, optionsOrEvent?: any, resetPortals?: boolean, extraOptions?: any) => void;
 export default useNavigate;

package/lib/hooks/useNavigate.js

@@ -2,14 +2,68 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useNavigate as useRouterNavigate } from "react-router-dom";
+import { useCallback } from 'react';
 import { useLayoutStore } from '../state';
+import { createNativeNavigate } from '../navigation/adapters/native';
+// Import React Router hooks from our wrapper
+import { useNavigateRR } from '../navigation/adapters/react-router';
+// Import Next.js hooks from our wrapper
+// Currently not used but kept for future Next.js support
+// import { useRouterNext } from '../navigation/adapters/nextjs';
+/**
+ * Main navigation hook that provides a universal navigate function
+ * Works with React Router, Next.js, or native browser navigation
+ */
 export const useNavigate = () => {
-    const routerNavigate = useRouterNavigate();
     const layoutStore = useLayoutStore();
-    const navigate = (location, e = undefined, resetPortals = true, options = undefined) => {
-        if (e) {
-            e.preventDefault();
+    // Detect environment
+    const isNextJs = typeof window !== 'undefined' && !!window.__NEXT_DATA__;
+    const isClient = typeof window !== 'undefined';
+    // Try to use React Router's useNavigate if available
+    let rrNavigate = null;
+    let isReactRouter = false;
+    if (!isNextJs && useNavigateRR && isClient) {
+        try {
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            rrNavigate = useNavigateRR();
+            isReactRouter = !!rrNavigate;
+        }
+        catch {
+            // Not in a Router context
+        }
+    }
+    // If React Router is available, return it directly (wrapped for consistency)
+    if (isReactRouter && rrNavigate) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        return useCallback((to, options) => {
+            // For React Router, just pass through directly without side effects
+            return rrNavigate(to, options);
+        }, [rrNavigate]);
+    }
+    // Otherwise use native navigation with our custom behavior
+    const baseNavigate = createNativeNavigate();
+    // Wrap with our custom behavior for native navigation
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const navigate = useCallback((location, optionsOrEvent, resetPortals = true, extraOptions) => {
+        // Handle different call signatures for native navigation
+        let options = undefined;
+        let event = undefined;
+        if (optionsOrEvent && optionsOrEvent.preventDefault) {
+            // Legacy signature with event as second parameter
+            event = optionsOrEvent;
+            options = extraOptions;
+        }
+        else if (typeof optionsOrEvent === 'boolean') {
+            // Legacy signature with resetPortals as second parameter
+            resetPortals = optionsOrEvent;
+            options = extraOptions;
+        }
+        else {
+            // Standard signature with options as second parameter
+            options = optionsOrEvent;
+        }
+        if (event) {
+            event.preventDefault();
         }
         if (resetPortals) {
             layoutStore.resetLeftPortal();
@@ -17,8 +71,9 @@ export const useNavigate = () => {
         }
         window.scrollTo(0, 0);
         document.body.scrollTop = 0;
-        routerNavigate(location, options);
-    };
+        // Use native navigation
+        baseNavigate(location, options);
+    }, [baseNavigate, layoutStore]);
     return navigate;
 };
 export default useNavigate;

package/lib/hooks/useNotebookAIAgent.js

@@ -19,7 +19,9 @@ export function useNotebookAIAgent(notebookId) {
         const refreshAIAgent = async () => {
             abortController = new AbortController();
             try {
-                const response = await getAIAgent(notebookId, { signal: abortController.signal });
+                const response = await getAIAgent(notebookId, {
+                    signal: abortController.signal,
+                });
                 if (!response.success) {
                     deleteAIAgent(notebookId);
                     return;

package/lib/hooks/useParams.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hook to get URL parameters
+ * Works with Next.js App Router, React Router, or falls back to URL parsing
+ */
+export declare const useParams: () => Record<string, string>;

package/lib/hooks/useParams.js

@@ -0,0 +1,152 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useEffect, useState, useMemo } from 'react';
+import { useParamsRR } from '../navigation/adapters/react-router';
+import { useParamsNext, useSearchParamsNext, } from '../navigation/adapters/nextjs';
+/**
+ * Hook to get URL parameters
+ * Works with Next.js App Router, React Router, or falls back to URL parsing
+ */
+export const useParams = () => {
+    // State for fallback URL search params
+    const [searchParams, setSearchParams] = useState({});
+    // Detect environment
+    const isNextJs = typeof window !== 'undefined' && !!window.__NEXT_DATA__;
+    const isClient = typeof window !== 'undefined';
+    // Try to get params from different sources
+    let routeParams = {};
+    const queryParams = {};
+    let paramsSource = 'fallback';
+    // 1. Try Next.js first (if detected)
+    if (isNextJs && useParamsNext) {
+        try {
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            routeParams = useParamsNext() || {};
+            paramsSource = 'nextjs';
+            // Also get search params in Next.js
+            if (useSearchParamsNext) {
+                try {
+                    // eslint-disable-next-line react-hooks/rules-of-hooks
+                    const searchParamsObj = useSearchParamsNext();
+                    if (searchParamsObj) {
+                        searchParamsObj.forEach((value, key) => {
+                            queryParams[key] = value;
+                        });
+                    }
+                }
+                catch {
+                    // Not in Next.js context or search params not available
+                }
+            }
+        }
+        catch {
+            // Not in Next.js router context
+        }
+    }
+    // 2. Try React Router (if not Next.js)
+    if (paramsSource === 'fallback' && !isNextJs && useParamsRR) {
+        try {
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            routeParams = useParamsRR() || {};
+            paramsSource = 'react-router';
+        }
+        catch {
+            // Not in React Router context
+        }
+    }
+    // 3. Get URL search params (for React Router and fallback)
+    useEffect(() => {
+        if (!isClient || paramsSource === 'nextjs')
+            return;
+        const updateSearchParams = () => {
+            const params = {};
+            const urlParams = new URLSearchParams(window.location.search);
+            urlParams.forEach((value, key) => {
+                params[key] = value;
+            });
+            setSearchParams(params);
+        };
+        updateSearchParams();
+        // Listen for URL changes
+        window.addEventListener('popstate', updateSearchParams);
+        window.addEventListener('pushstate', updateSearchParams);
+        window.addEventListener('replacestate', updateSearchParams);
+        return () => {
+            window.removeEventListener('popstate', updateSearchParams);
+            window.removeEventListener('pushstate', updateSearchParams);
+            window.removeEventListener('replacestate', updateSearchParams);
+        };
+    }, [isClient, paramsSource]);
+    // 4. For fallback, also try to parse route params from URL path
+    const fallbackRouteParams = useMemo(() => {
+        if (!isClient || paramsSource !== 'fallback')
+            return {};
+        const pathname = window.location.pathname;
+        const params = {};
+        // Common patterns to match
+        // /products/123 -> { id: '123' }
+        // /users/john-doe -> { username: 'john-doe' }
+        // /blog/2024/01/my-post -> { year: '2024', month: '01', slug: 'my-post' }
+        const patterns = [
+            { regex: /^\/products\/([^/]+)$/, params: ['id'] },
+            { regex: /^\/products\/([^/]+)\/reviews$/, params: ['id'] },
+            { regex: /^\/users\/([^/]+)$/, params: ['username'] },
+            {
+                regex: /^\/blog\/(\d{4})\/(\d{2})\/([^/]+)$/,
+                params: ['year', 'month', 'slug'],
+            },
+            { regex: /^\/posts\/([^/]+)$/, params: ['slug'] },
+            { regex: /^\/([^/]+)\/([^/]+)$/, params: ['category', 'id'] },
+        ];
+        for (const pattern of patterns) {
+            const match = pathname.match(pattern.regex);
+            if (match) {
+                pattern.params.forEach((paramName, index) => {
+                    if (match[index + 1]) {
+                        params[paramName] = match[index + 1];
+                    }
+                });
+                break;
+            }
+        }
+        return params;
+    }, [isClient, paramsSource, isClient ? window.location.pathname : '']);
+    // Combine all params with proper memoization to prevent re-renders
+    const combinedParams = useMemo(() => {
+        const result = {};
+        // Add route params
+        for (const [key, value] of Object.entries(routeParams)) {
+            if (value !== undefined) {
+                // Handle array values (Next.js catch-all routes)
+                result[key] = Array.isArray(value) ? value.join('/') : String(value);
+            }
+        }
+        // Add query params (Next.js)
+        for (const [key, value] of Object.entries(queryParams)) {
+            result[key] = value;
+        }
+        // Add search params (React Router and fallback)
+        if (paramsSource !== 'nextjs') {
+            for (const [key, value] of Object.entries(searchParams)) {
+                result[key] = value;
+            }
+        }
+        // Add fallback route params
+        if (paramsSource === 'fallback') {
+            for (const [key, value] of Object.entries(fallbackRouteParams)) {
+                result[key] = value;
+            }
+        }
+        return result;
+    }, [
+        // Use JSON.stringify for deep comparison
+        JSON.stringify(routeParams),
+        JSON.stringify(queryParams),
+        JSON.stringify(searchParams),
+        JSON.stringify(fallbackRouteParams),
+        paramsSource,
+    ]);
+    return combinedParams;
+};

package/lib/hooks/useRuntimes.js

@@ -16,7 +16,7 @@ export const useRuntimes = () => {
     };
     const unmountLocalFolder = (kernelId) => {
         requestJupyterKernelsExtension(`jump/${kernelId}`, {
-            method: 'DELETE'
+            method: 'DELETE',
         })
             .then(data => {
             //        console.log('--- Unmount Local Folder', data);
@@ -28,7 +28,7 @@ export const useRuntimes = () => {
     // --------------------------------------------------------------------------
     return {
         mountLocalFolder,
-        unmountLocalFolder
+        unmountLocalFolder,
     };
 };
 export default useRuntimes;