@datalayer/core 1.0.11 → 1.0.12

package/lib/hooks/index.d.ts

@@ -11,6 +11,8 @@ export * from './useIAM';
 export * from './useId';
 export * from './useIsomorphicLayoutEffect';
 export * from './useJupyterLabTheme';
+export * from './useHighZIndexPortal';
+export * from './useKeyboardShortcuts';
 export * from './useKeyboardEscape';
 export * from './useLocation';
 export * from './useLocationHandles';
@@ -25,5 +27,6 @@ export * from './useUpload';
 export * from './useUser';
 export * from './useProjects';
 export * from './useProjectStore';
+export * from './useMobile';
 export * from './useVisibilityObserver';
 export * from './useWindowSize';

package/lib/hooks/index.js

@@ -16,6 +16,8 @@ export * from './useIAM';
 export * from './useId';
 export * from './useIsomorphicLayoutEffect';
 export * from './useJupyterLabTheme';
+export * from './useHighZIndexPortal';
+export * from './useKeyboardShortcuts';
 export * from './useKeyboardEscape';
 export * from './useLocation';
 export * from './useLocationHandles';
@@ -30,5 +32,6 @@ export * from './useUpload';
 export * from './useUser';
 export * from './useProjects';
 export * from './useProjectStore';
+export * from './useMobile';
 export * from './useVisibilityObserver';
 export * from './useWindowSize';

package/lib/hooks/useHighZIndexPortal.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Ensure Primer portal root has a high z-index so overlays render above chat.
+ */
+export declare function useHighZIndexPortal(): void;

package/lib/hooks/useHighZIndexPortal.js

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useEffect } from 'react';
+const PRIMER_PORTAL_ROOT_ID = 'primer-portal-root';
+/**
+ * Ensure Primer portal root has a high z-index so overlays render above chat.
+ */
+export function useHighZIndexPortal() {
+    useEffect(() => {
+        const setPortalZIndex = () => {
+            const portalRoot = document.getElementById(PRIMER_PORTAL_ROOT_ID);
+            if (portalRoot) {
+                portalRoot.style.zIndex = '9999';
+                return true;
+            }
+            return false;
+        };
+        if (setPortalZIndex()) {
+            return;
+        }
+        const observer = new MutationObserver(() => {
+            if (setPortalZIndex()) {
+                observer.disconnect();
+            }
+        });
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+}

package/lib/hooks/useKeyboardShortcuts.d.ts

@@ -0,0 +1,23 @@
+export interface KeyboardShortcut {
+    key: string;
+    ctrlOrCmd?: boolean;
+    shift?: boolean;
+    alt?: boolean;
+    handler: () => void;
+    description?: string;
+    allowInInput?: boolean;
+}
+export interface UseKeyboardShortcutsOptions {
+    enabled?: boolean;
+    shortcuts: KeyboardShortcut[];
+}
+export declare function useKeyboardShortcuts({ enabled, shortcuts, }: UseKeyboardShortcutsOptions): void;
+export declare function useChatKeyboardShortcuts({ onToggle, onNewChat, onClear, onFocusInput, enabled, }: {
+    onToggle?: () => void;
+    onNewChat?: () => void;
+    onClear?: () => void;
+    onFocusInput?: () => void;
+    enabled?: boolean;
+}): void;
+export declare function getShortcutDisplay(shortcut: KeyboardShortcut): string;
+export default useKeyboardShortcuts;

package/lib/hooks/useKeyboardShortcuts.js

@@ -0,0 +1,124 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useEffect, useCallback } from 'react';
+function isMacOS() {
+    if (typeof navigator === 'undefined')
+        return false;
+    return /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+}
+export function useKeyboardShortcuts({ enabled = true, shortcuts, }) {
+    const handleKeyDown = useCallback((event) => {
+        if (!enabled)
+            return;
+        const target = event.target;
+        const isInInput = target.tagName === 'INPUT' ||
+            target.tagName === 'SELECT' ||
+            target.tagName === 'TEXTAREA' ||
+            target.isContentEditable;
+        for (const shortcut of shortcuts) {
+            if (isInInput && !shortcut.allowInInput) {
+                if (shortcut.key !== 'Escape') {
+                    continue;
+                }
+            }
+            if (event.key.toLowerCase() !== shortcut.key.toLowerCase()) {
+                continue;
+            }
+            const ctrlOrCmdPressed = isMacOS() ? event.metaKey : event.ctrlKey;
+            if (shortcut.ctrlOrCmd && !ctrlOrCmdPressed) {
+                continue;
+            }
+            if (!shortcut.ctrlOrCmd &&
+                ctrlOrCmdPressed &&
+                shortcut.key !== 'Escape') {
+                continue;
+            }
+            if (shortcut.shift && !event.shiftKey) {
+                continue;
+            }
+            if (shortcut.alt && !event.altKey) {
+                continue;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            shortcut.handler();
+            break;
+        }
+    }, [enabled, shortcuts]);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [enabled, handleKeyDown]);
+}
+export function useChatKeyboardShortcuts({ onToggle, onNewChat, onClear, onFocusInput, enabled = true, }) {
+    const shortcuts = [];
+    if (onToggle) {
+        shortcuts.push({
+            key: 'k',
+            ctrlOrCmd: true,
+            handler: onToggle,
+            description: 'Toggle chat sidebar',
+        });
+    }
+    if (onNewChat) {
+        shortcuts.push({
+            key: 'n',
+            ctrlOrCmd: true,
+            shift: true,
+            handler: onNewChat,
+            description: 'Start new chat',
+        });
+    }
+    if (onClear) {
+        shortcuts.push({
+            key: 'Backspace',
+            ctrlOrCmd: true,
+            shift: true,
+            handler: onClear,
+            description: 'Clear chat messages',
+        });
+    }
+    if (onFocusInput) {
+        shortcuts.push({
+            key: '/',
+            handler: onFocusInput,
+            description: 'Focus chat input',
+        });
+    }
+    if (onToggle) {
+        shortcuts.push({
+            key: 'Escape',
+            handler: onToggle,
+            description: 'Close chat sidebar',
+            allowInInput: true,
+        });
+    }
+    useKeyboardShortcuts({ enabled, shortcuts });
+}
+export function getShortcutDisplay(shortcut) {
+    const parts = [];
+    const isMac = isMacOS();
+    if (shortcut.ctrlOrCmd) {
+        parts.push(isMac ? '⌘' : 'Ctrl');
+    }
+    if (shortcut.shift) {
+        parts.push(isMac ? '⇧' : 'Shift');
+    }
+    if (shortcut.alt) {
+        parts.push(isMac ? '⌥' : 'Alt');
+    }
+    let keyDisplay = shortcut.key.toUpperCase();
+    if (shortcut.key === 'Escape')
+        keyDisplay = 'Esc';
+    if (shortcut.key === 'Backspace')
+        keyDisplay = isMac ? '⌫' : 'Del';
+    parts.push(keyDisplay);
+    return parts.join(isMac ? '' : '+');
+}
+export default useKeyboardShortcuts;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/core",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "type": "module",
   "workspaces": [
     ".",