@adecore/database 0.19.0 → 0.20.1

package/dist/explorer/DatabaseExplorer.d.ts

@@ -1,16 +1,19 @@
-import { type Ref } from 'react';
+import { type DragEvent, type Ref } from 'react';
 import type { ExplorerSelection } from '../actions.ts';
-import type { Connection } from '../client/types.ts';
+import type { Connection, TableRef } from '../client/types.ts';
+import type { TableKind } from '../protocol/index.ts';
 import type { ExplorerFolder } from './folders.ts';
 export interface DatabaseExplorerProps {
     connections: readonly Connection[];
     value?: ExplorerSelection | null;
     defaultValue?: ExplorerSelection | null;
     onValueChange?(selection: ExplorerSelection | null): void;
+    onTableDragStart?(ref: TableRef, event: DragEvent<HTMLElement>, kind: TableKind): void;
+    onTableDragEnd?(event: DragEvent<HTMLElement>): void;
     showSystemSchemas?: boolean;
     openOnClick?: boolean;
     folders?: Readonly<Record<string, readonly ExplorerFolder[]>>;
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
-export declare function DatabaseExplorer({ connections, value, defaultValue, onValueChange, showSystemSchemas, openOnClick, folders, className, ref }: DatabaseExplorerProps): import("react").JSX.Element;
+export declare function DatabaseExplorer({ connections, value, defaultValue, onValueChange, onTableDragStart, onTableDragEnd, showSystemSchemas, openOnClick, folders, className, ref }: DatabaseExplorerProps): import("react").JSX.Element;

package/dist/explorer/DatabaseExplorer.js

@@ -20,7 +20,7 @@ import { useStoredExpansion } from './use-stored-expansion.js';
  * selects; a double click or Enter on a table asks the app to open it through `useDatabaseAction`,
  * and on an item of a folder the app added opens it through the item's own `onOpen`.
  */
-export function DatabaseExplorer({ connections, value, defaultValue = null, onValueChange, showSystemSchemas = false, openOnClick = false, folders, className, ref }) {
+export function DatabaseExplorer({ connections, value, defaultValue = null, onValueChange, onTableDragStart, onTableDragEnd, showSystemSchemas = false, openOnClick = false, folders, className, ref }) {
     const { t } = useTranslation('database');
     const client = useDatabaseClient();
     const act = useDatabaseAction();
@@ -210,6 +210,11 @@ export function DatabaseExplorer({ connections, value, defaultValue = null, onVa
                     rowElements.current.set(row.key, element);
                 }
             },
+            draggable: row.kind === 'table' && onTableDragStart !== undefined,
+            onDragStart: row.kind === 'table' && onTableDragStart !== undefined
+                ? (event) => onTableDragStart(row.ref, event, row.table.kind)
+                : undefined,
+            onDragEnd: row.kind === 'table' && onTableDragStart !== undefined ? onTableDragEnd : undefined,
             onClick: (event) => click(row, event.detail),
             onDoubleClick: tableOf(row) === null && row.kind !== 'appItem' ? undefined : () => open(row),
             onFocus: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/database",
-  "version": "0.19.0",
+  "version": "0.20.1",
   "description": "Browse, query and edit SQLite and MySQL databases: React views for the page, a host for the backend and a native helper that talks to the server.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",
@@ -61,13 +61,13 @@
     "lucide-react": "^1.47.0"
   },
   "optionalDependencies": {
-    "@adecore/database-darwin-arm64": "0.19.0",
-    "@adecore/database-linux-arm64": "0.19.0",
-    "@adecore/database-linux-x64": "0.19.0",
-    "@adecore/database-win32-x64": "0.19.0"
+    "@adecore/database-darwin-arm64": "0.20.1",
+    "@adecore/database-linux-arm64": "0.20.1",
+    "@adecore/database-linux-x64": "0.20.1",
+    "@adecore/database-win32-x64": "0.20.1"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.19.0",
+    "@adecore/ui": "^0.20.1",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",

package/src/explorer/DatabaseExplorer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, type KeyboardEvent, type MouseEvent, type ReactNode, type Ref } from 'react';
+import { useEffect, useRef, useState, type DragEvent, type KeyboardEvent, type MouseEvent, type ReactNode, type Ref } from 'react';
 import clsx from 'clsx';
 import { CircleAlert, Columns2, Database, Eye, Folder, KeyRound, ListOrdered, Lock, Search, ShieldCheck, Table, Zap, type LucideIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
@@ -6,7 +6,8 @@ import { Button, ContextMenu, EmptyState, Icon, Input, Spinner, Tooltip, Tree }
 import { formatNumber } from '@adecore/ui/format';
 import type { ExplorerSelection } from '../actions.ts';
 import { useDatabaseAction, useDatabaseClient } from '../client-context.ts';
-import type { Connection } from '../client/types.ts';
+import type { Connection, TableRef } from '../client/types.ts';
+import type { TableKind } from '../protocol/index.ts';
 import { EngineIcon } from '../connections/EngineIcon.tsx';
 import { keyLabelOf, type ColumnKeys } from '../column-keys.ts';
 import { KeyIcon } from '../KeyIcon.tsx';
@@ -44,6 +45,9 @@ export interface DatabaseExplorerProps {
     value?: ExplorerSelection | null;
     defaultValue?: ExplorerSelection | null;
     onValueChange?(selection: ExplorerSelection | null): void;
+    /* Providing a handler makes table and view rows draggable; the app writes its own payload. */
+    onTableDragStart?(ref: TableRef, event: DragEvent<HTMLElement>, kind: TableKind): void;
+    onTableDragEnd?(event: DragEvent<HTMLElement>): void;
     showSystemSchemas?: boolean;
     /* Opens a table on a click too, with `preview: true`; a double click or Enter then sends `preview: false`. */
     openOnClick?: boolean;
@@ -63,6 +67,8 @@ export function DatabaseExplorer({
     value,
     defaultValue = null,
     onValueChange,
+    onTableDragStart,
+    onTableDragEnd,
     showSystemSchemas = false,
     openOnClick = false,
     folders,
@@ -275,6 +281,12 @@ export function DatabaseExplorer({
                     rowElements.current.set(row.key, element);
                 }
             },
+            draggable: row.kind === 'table' && onTableDragStart !== undefined,
+            onDragStart:
+                row.kind === 'table' && onTableDragStart !== undefined
+                    ? (event: DragEvent<HTMLElement>) => onTableDragStart(row.ref, event, row.table.kind)
+                    : undefined,
+            onDragEnd: row.kind === 'table' && onTableDragStart !== undefined ? onTableDragEnd : undefined,
             onClick: (event: MouseEvent) => click(row, event.detail),
             onDoubleClick: tableOf(row) === null && row.kind !== 'appItem' ? undefined : () => open(row),
             onFocus: () => {