chore: editing draft

.github/workflows/frontend-build.yml

@@ -49,14 +49,21 @@ jobs:
           node-version: "lts/*"
           cache: "yarn"
           cache-dependency-path: |
+            cloudbeaver/common-*/yarn.lock
             cloudbeaver/webapp/yarn.lock
 
+      - name: restore cloudbeaver-common typescript cache
+        uses: actions/cache@v4
+        with:
+          path: "cloudbeaver/common-*/**/*/lib"
+          key: ${{ runner.os }}-common-dist-${{ hashFiles('cloudbeaver/common-*/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-common-dist-
+
       - name: restore typescript cache
         uses: actions/cache@v4
         with:
-          path: |
-            "cloudbeaver/webapp/common-*/**/*/lib"
-            "cloudbeaver/webapp/**/packages/*/dist"
+          path: "cloudbeaver/webapp/**/packages/*/dist"
           key: ${{ runner.os }}-dist-${{ hashFiles('cloudbeaver/webapp/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-dist-
@@ -64,11 +71,23 @@ jobs:
       - if: inputs.clean-cache
         run: yarn clear
 
+      - run: yarn install --immutable
+        working-directory: ./cloudbeaver/common-typescript
+
+      - run: yarn install --immutable
+        working-directory: ./cloudbeaver/common-react
+
       - run: yarn install --immutable
 
       - run: yarn bundle
         working-directory: ./cloudbeaver/webapp/packages/product-default
 
+      - run: yarn test
+        working-directory: ./cloudbeaver/common-typescript
+
+      # - run: yarn test
+      #   working-directory: ./cloudbeaver/common-react
+
       - run: yarn test
 
       # - name: Archive build artifacts

.github/workflows/frontend-lint.yml

@@ -30,10 +30,10 @@ jobs:
           cache-dependency-path: "./cloudbeaver/webapp/yarn.lock"
 
       # - run: yarn install --immutable
-      #   working-directory: ./cloudbeaver/webapp/common-typescript
+      #   working-directory: ./cloudbeaver/common-typescript
 
       # - run: yarn install --immutable
-      #   working-directory: ./cloudbeaver/webapp/common-react
+      #   working-directory: ./cloudbeaver/common-react
 
       - run: |
           yarn install --immutable

.vscode/launch.json

@@ -48,7 +48,7 @@
         "-Declipse.pde.launch=true",
         "-XstartOnFirstThread",
         "-Dfile.encoding=UTF-8",
-        "--add-modules=ALL-DEFAULT",
+        "--add-modules=ALL-SYSTEM",
         "--add-opens=java.base/java.io=ALL-UNNAMED",
         "--add-opens=java.base/java.lang=ALL-UNNAMED",
         "--add-opens=java.base/java.lang.reflect=ALL-UNNAMED",

.vscode/tasks.json

@@ -19,26 +19,6 @@
       "group": "test",
       "args": ["test"]
     },
-    {
-      "label": "Run Tests Common Typescript",
-      "type": "shell",
-      "command": "yarn",
-      "group": "test",
-      "args": ["test"],
-      "options": {
-        "cwd": "${workspaceFolder}/webapp/common-typescript"
-      }
-    },
-    {
-      "label": "Run Tests Common React",
-      "type": "shell",
-      "command": "yarn",
-      "group": "test",
-      "args": ["test"],
-      "options": {
-        "cwd": "${workspaceFolder}/webapp/common-react"
-      }
-    },
     {
       "label": "Run DevServer CE",
       "group": "build",
@@ -92,10 +72,10 @@
       "label": "Run Backend CE",
       "type": "shell",
       "windows": {
-        "command": "./run-cloudbeaver-server.bat"
+        "command": "./run-server.bat"
       },
       "osx": {
-        "command": "./run-cloudbeaver-server.sh"
+        "command": "./run-server.sh"
       },
       "options": {
         "cwd": "${workspaceFolder}/deploy/cloudbeaver"
@@ -127,24 +107,6 @@
       "options": {
         "cwd": "${workspaceFolder}/webapp/packages"
       }
-    },
-    {
-      "label": "Run Ui Kit Preview",
-      "type": "shell",
-      "command": "yarn",
-      "options": {
-        "cwd": "${workspaceFolder}/webapp/common-react/@dbeaver/ui-kit"
-      },
-      "args": ["docs"]
-    },
-    {
-      "label": "Run Storybook",
-      "type": "shell",
-      "command": "yarn",
-      "options": {
-        "cwd": "${workspaceFolder}/webapp/packages/storybook"
-      },
-      "args": ["storybook"]
     }
   ],
   "inputs": [

README.md

@@ -25,57 +25,74 @@ You can see a live demo of CloudBeaver here: https://demo.cloudbeaver.io
 
 ## Changelog
 
-### 25.2.4 2025-11-03
-- A confirmation prompt has been added for potentially dangerous queries in the SQL Editor to help prevent unintended execution. You can customize this behavior in Preferences > SQL Editor;
-- The value panel in the Data Editor has been redesigned to provide users with more space for viewing and editing data. Tab buttons for different data type visualizations are now aligned on a single level, creating a cleaner layout;
-- Permission configuration for connections was simplified, providing a clearer appearance and improved performance.
+### 25.0.5 2025-05-19
+- Added the ability to configure the default database or schema in the connection configuration;
+- A new setting to autosave scripts in the SQL editor appeared in global and users' preferences;
+- SQLite: added information about a table Strict mode to the table metadata section (thanks to @eusebe-cda);
+- Vietnamese localization has been added (thanks to @0xhanh).
 
-### 25.2.3 2025-10-20
-- Added visualization for column reordering in the Data Editor;
-- Fixed the critical issue with duplicating the execution of queries executed by a shortcut in the SQL Editor;
-- Fixed the critical vulnerability (CVE-2025-61927) in the Happy DOM library. The library was updated to version 20.0.2.
+### 25.0.4 2025-05-05
+- Important:
+  -    Connection templates were removed from the application. You can use the Connection Editor to create new connections.
+- Databases and drivers:
+  -    LibSQL: added the ability to use token authentication for connecting;
+  -    Clickhouse: driver has been updated to version 0.8.5.
 
-### 25.2.2 2025-10-06
-- Replaced true/false text with intuitive checkboxes for boolean values in the metadata editor, making editing easier and faster;
-- Keyboard navigation was improved across the application. Additional shortcuts are available in the main info panel (top-right corner). To help you discover them faster, relevant keyboard shortcuts are also shown directly in the tooltips of Data Editor buttons;
-- Fixed an issue in the Data Editor where resizing one column in a wide table would cause previously resized columns to revert to their original width. Users can resize multiple columns as intended.
-
-### 25.2.1 2025-09-22
-- Autocomplete values in SQL Editor are ordered alphabetically to simplify object search;
-- "Show all databases" setting was added on the connection page for MySQL and MariaDB;
+### 25.0.3 2025-04-21
+- Administration: log records now capture create, update, and delete actions for users, teams, and connections for improved tracking and transparency;
+- SQL Editor: auto-completion has been improved for aliases and camelCase entities;
+- Users DDL in Oracle is displayed in metadata editor on corresponding tab for users with Oracle administration permissions;
 - Different bug fixes and enhancements have been made.
 
-### 25.2.0 2025-09-01
-### Changes since 25.1.0:
-- Administration:
-  -    Added support for multiple server URLs to accommodate different access policies for internal and external users, improving flexibility in network-restricted environments. To set it up, use the Allowed Server URLs field in the Server configuration within the Administration section;
-  -    Added the Force HTTPS mode setting in Server Configuration to enforce redirecting from HTTP to HTTPS. This setting helps avoid a potential man-in-the-middle attack. This setting is turned off by default. Please remember to configure your proxy before enabling;
-  -    Added the CLOUDBEAVER_BIND_SESSION_TO_IP option to improve session security by linking user sessions to their IP address. It is disabled by default. When enabled, this helps protect against certain types of session hijacking attacks, where an attacker could try to take over a user’s session. Note: Users will be logged out automatically on the IP address change (switching networks or using mobile data);
-  -    A password confirmation field has been added for administrators in the Easy Config section to prevent accidental misconfigurations.
-- SQL Editor:
-  -    Changed the default engine used for autocompletion in the SQL Editor. This Semantic engine offers improved suggestions for database objects, keywords, and functions. You can switch back to the Legacy engine in Preferences > SQL Editor;
-  -    A “Clear” button was added to the output panel.
-- Data Editor:
-  -    Column descriptions were added in the Data Editor under column names to provide more metadata context. You can disable this in Preferences > Data Viewer;
-  -    Added an ability to review the script before execution when users edit tables without primary keys.
+### 25.0.2 2025-04-07
+- Data Editor: improved table rendering to scale column width depending on the content.
+- Improved Navigation tree performance: lost connection does not lead to the application freezing anymore.
+- Different bug fixes and enhancements have been made.
+
+### 25.0.1 2025-03-24
+- Improved performance of the export/import functionality by optimizing disk memory consumption;
+- Enhanced initial configuration on stage security: if the initial setup time exceeds 1 hour, the server must be restarted.
+
+### 25.0 2025-03-03
+### Changes since 24.3.0:
 - General:
-  -    Added a new welcome screen for a freshly opened application. This screen contains shortcuts to create a new connection, open SQL Editor, or documentation;
-  -    Added a search panel for SQL Editor and Value panel: press Ctrl/Cmd + F to open a panel that allows searching and replacing by keyword or regular expression;
-  -    Changed the data transfer mechanism to avoid intermediate file creation. The parameter dataExportFileSizeLimit was removed from the server configuration as deprecated;
-  -    The CloudBeaver default theme matches the device theme by default now. You can change this behavior in user preferences under the Theme section;
-  -    Added the option to display tabs across multiple rows, allowing you to see all tabs without scrolling. You can enable this in Preferences > Interface;
-  -    Improved dark theme accessibility by enhancing color contrast across the app for better readability and compliance with accessibility standards;
-  -    The database navigator now automatically hides empty folders in shared projects, reducing visual clutter and speeding up the process of finding active connections.
-- Databases and drivers:
-  -    Clickhouse: fixed the presentation of tuples and map data types in the Data Editor;
-  -    Databend database support has been added (thanks to @hantmac);
-  -    DuckDB: driver has been updated to version 1.3;
-  -    MySQL: Improved performance when retrieving foreign keys metadata;
-  -    PostgreSQL: fixed misplaced comment for table DDL generation.
+  -    Added transaction log viewing for connections with manual commit mode. This allows users to see all modifying statements before committing;
+  -    Added an ability for all editors to reconnect if a connection has been lost;
+  -    Tooltips for metadata objects and SQL Editor tabs now include additional details about catalogs, schemas, and connections;
+  -    Added Ctrl + Shift + S (Cmd + Shift + S on Mac) shortcut for the "Save As Script" action;
+  -    Updated list of available shortcuts for macOS.
+- Administration:
+  -    Added system information data to the Product Information tab in the Administration panel. This provides administrators with quick access to essential system details, such as the server deployment type (e.g., Docker, Kubernetes), install path, Java version, and Java parameters;
+  -    The global access server URL has been added to the console log, making it easier to locate server installation information directly within the logs;
+  -    New environment variables were introduced for theme styling, SQL editor, and log viewer settings. You can use them for quick setup during the initial Docker configuration stage.
+- LDAP authorization:
+  -    Added the ability to match users from LDAP configuration with CloudBeaver users;
+  -    Added an option to specify a user login as an attribute parameter for LDAP providers;
+  -    CloudBeaver now uses EntityID or objectGUID to create new LDAP users in CloudBeaver to ensure uniqueness. This change enhances user identification and prevents conflicts while maintaining backward compatibility for existing users.
+- Deployment:
+  -    CloudBeaver now uses JDK 21 as its base Java image. If you use standard deployment and upgrade scripts, the new Java version will be applied automatically after the product update;
+  -    Changed the permission of the Docker volumes directory to enhance security and prevent any insecure actions by the "root" user. All new deployments will use the "dbeaver" user by default. For existing deployments running as the "root" user, this update will automatically adjust file permissions to ensure they are compatible with the new security model. There will be no manual intervention, and the service will continue to run as expected with the updated permissions.
+- Connections:
+  -    Enabled the possibility of switching a database connection to read-only mode. This mode can be activated in the connection dialog. Administrators can set this mode for any connection, while regular users can set it for their private connections only;
+  -    For Oracle and SQL Server connections, advanced database settings can now be used in the URL connection mode.
+- Data Editor:
+  -    Auto-suggestions for column names in the Data Editor filter field were introduced to avoid typing mistakes;
+  -    Introduced the ability to insert data in tables without unique keys: you can import data from CSV files or insert entire rows directly via UI;
+  -    The collapse of the grouping panel doesn't lead to the complete panel cleaning anymore.
+- Data transfer:
+  -    Added the ability to use default spreadsheet names (e.g. Sheet0, Sheet1) for exporting to XLSX;
+  -    An option to replace line break characters on any custom value was added when exporting to CSV.
+- Navigator tree: 
+  -    An option to show metadata object comments was added. You can enable it in the database navigator settings panel;
+  -    Introduced the ability to create connections not only on the initial level but in folders and sub-folders directly;
+  -    Fixed the display of objects with long names (more than 32 characters) - now, such names will be displayed entirely and not in a cropped format.
+- Drivers:
+  -    The MariaDB driver has been updated to version 3.5.1;
+  -    The SQLite driver has been updated to version 3.48.0.0.
 
 ## Contribution
 As a community-driven open-source project, we warmly welcome contributions through GitHub pull requests. 
 
 [We are happy to reward](https://dbeaver.com/help-dbeaver/) our most active contributors every major sprint.
-The most significant contribution to our code for the major release 25.2.0 was made by:
-1. [hantmac](https://github.com/hantmac) - added support for Databend in CloudBeaver Community Edition.
+The most significant contribution to our code for the major release 24.3.0 was made by:
+1. [cashlifei](https://github.com/cashlifei)

common-react/.vscode/extensions.json

@@ -1,7 +1,6 @@
 {
   "recommendations": [
     "arcanis.vscode-zipfs",
-    "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode"
   ]
 }

common-react/.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "search.exclude": {
+    "**/.yarn": true,
+    "**/.pnp.*": true
+  },
+  "typescript.tsdk": ".yarn/sdks/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "prettier.prettierPath": ".yarn/sdks/prettier/index.cjs"
+}

common-react/.yarn/sdks/prettier/bin/prettier.cjs

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, register} = require(`module`);
+const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
+const absRequire = createRequire(absPnpApiPath);
+
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require prettier/bin/prettier.cjs
+    require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
+  }
+}
+
+const wrapWithUserWrapper = existsSync(absUserWrapperPath)
+  ? exports => absRequire(absUserWrapperPath)(exports)
+  : exports => exports;
+
+// Defer to the real prettier/bin/prettier.cjs your application uses
+module.exports = wrapWithUserWrapper(absRequire(`prettier/bin/prettier.cjs`));

common-react/.yarn/sdks/prettier/index.cjs

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, register} = require(`module`);
+const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
+
+const relPnpApiPath = "../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
+const absRequire = createRequire(absPnpApiPath);
+
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require prettier
+    require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
+  }
+}
+
+const wrapWithUserWrapper = existsSync(absUserWrapperPath)
+  ? exports => absRequire(absUserWrapperPath)(exports)
+  : exports => exports;
+
+// Defer to the real prettier your application uses
+module.exports = wrapWithUserWrapper(absRequire(`prettier`));

common-react/.yarn/sdks/prettier/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "prettier",
+  "version": "3.5.3-sdk",
+  "main": "./index.cjs",
+  "type": "commonjs",
+  "bin": "./bin/prettier.cjs"
+}

common-react/.yarnrc.yml

@@ -1,6 +1,9 @@
 enableTelemetry: false
 preferReuse: true
 
+# pnpIgnorePatterns:
+#   - "**/cloudbeaver/common-typescript/**"
+
 plugins:
   - checksum: 50414773926286d8c0fc32e9936a799ad23296281046f03674bc33517b597e1ff7856092c3fcf8d5460a29549ef8b3dca3f59a1732b650a02bf523b255d726e7
     path: .yarn/plugins/@yarnpkg/plugin-ts-project-linker.cjs

common-react/@dbeaver/react-data-grid/artifacts/.gitignore

@@ -0,0 +1 @@
+!lib

common-react/@dbeaver/react-data-grid/artifacts/lib/index.d.ts

@@ -0,0 +1,490 @@
+import { Context } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import type { Key } from 'react';
+import type { ReactElement } from 'react';
+import { ReactNode } from 'react';
+
+declare interface BaseRenderRowProps<TRow, TSummaryRow = unknown> extends Omit_2<React.ComponentProps<'div'>, 'style' | 'children'>, Pick<DataGridProps<TRow, TSummaryRow>, 'onCellClick' | 'onCellDoubleClick' | 'onCellContextMenu'> {
+    viewportColumns: readonly CalculatedColumn<TRow, TSummaryRow>[];
+    rowIdx: number;
+    selectedCellIdx: number | undefined;
+    isRowSelectionDisabled: boolean;
+    isRowSelected: boolean;
+    gridRowStart: number;
+    selectCell: (position: Position, enableEditor?: Maybe<boolean>) => void;
+}
+
+export declare interface CalculatedColumn<TRow, TSummaryRow = unknown> extends Column<TRow, TSummaryRow> {
+    readonly parent: CalculatedColumnParent<TRow, TSummaryRow> | undefined;
+    readonly idx: number;
+    readonly level: number;
+    readonly width: number | string;
+    readonly minWidth: number;
+    readonly maxWidth: number | undefined;
+    readonly resizable: boolean;
+    readonly sortable: boolean;
+    readonly draggable: boolean;
+    readonly frozen: boolean;
+    readonly renderCell: (props: RenderCellProps<TRow, TSummaryRow>) => ReactNode;
+    readonly renderHeaderCell: (props: RenderHeaderCellProps<TRow, TSummaryRow>) => ReactNode;
+}
+
+export declare type CalculatedColumnOrColumnGroup<R, SR> = CalculatedColumnParent<R, SR> | CalculatedColumn<R, SR>;
+
+export declare interface CalculatedColumnParent<R, SR> {
+    readonly name: string | ReactElement;
+    readonly parent: CalculatedColumnParent<R, SR> | undefined;
+    readonly idx: number;
+    readonly colSpan: number;
+    readonly level: number;
+    readonly headerCellClass?: Maybe<string>;
+}
+
+export declare const Cell: <R, SR>(props: CellRendererProps<R, SR>) => React.JSX.Element;
+
+export declare interface CellClickArgs<TRow, TSummaryRow = unknown> {
+    rowIdx: number;
+    row: TRow;
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    selectCell: (enableEditor?: boolean) => void;
+}
+
+declare type CellEvent<E extends React.SyntheticEvent<HTMLDivElement>> = E & {
+    preventGridDefault: () => void;
+    isGridDefaultPrevented: () => boolean;
+};
+
+export declare type CellKeyboardEvent = CellEvent<React.KeyboardEvent<HTMLDivElement>>;
+
+export declare type CellKeyDownArgs<TRow, TSummaryRow = unknown> = SelectCellKeyDownArgs<TRow, TSummaryRow> | EditCellKeyDownArgs<TRow, TSummaryRow>;
+
+export declare type CellMouseEvent = CellEvent<React.MouseEvent<HTMLDivElement>>;
+
+export declare interface CellRendererProps<TRow, TSummaryRow> extends Pick<RenderRowProps<TRow, TSummaryRow>, 'row' | 'rowIdx' | 'selectCell'>, Omit_2<React.ComponentProps<'div'>, 'children' | 'onClick' | 'onDoubleClick' | 'onContextMenu'> {
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    colSpan: number | undefined;
+    isCopied: boolean;
+    isDraggedOver: boolean;
+    isCellSelected: boolean;
+    onClick: RenderRowProps<TRow, TSummaryRow>['onCellClick'];
+    onDoubleClick: RenderRowProps<TRow, TSummaryRow>['onCellDoubleClick'];
+    onContextMenu: RenderRowProps<TRow, TSummaryRow>['onCellContextMenu'];
+    onRowChange: (column: CalculatedColumn<TRow, TSummaryRow>, newRow: TRow) => void;
+}
+
+export declare interface CellSelectArgs<TRow, TSummaryRow = unknown> {
+    rowIdx: number;
+    row: TRow | undefined;
+    column: CalculatedColumn<TRow, TSummaryRow>;
+}
+
+export declare type ColSpanArgs<TRow, TSummaryRow> = {
+    type: 'HEADER';
+} | {
+    type: 'ROW';
+    row: TRow;
+} | {
+    type: 'SUMMARY';
+    row: TSummaryRow;
+};
+
+export declare interface Column<TRow, TSummaryRow = unknown> {
+    /** The name of the column. By default it will be displayed in the header cell */
+    readonly name: string | ReactElement;
+    /** A unique key to distinguish each column */
+    readonly key: string;
+    /**
+     * Column width. If not specified, it will be determined automatically based on grid width and specified widths of other columns
+     * @default 'auto'
+     */
+    readonly width?: Maybe<number | string>;
+    /**
+     * Minimum column width in px
+     * @default '50px'
+     */
+    readonly minWidth?: Maybe<number>;
+    /** Maximum column width in px. */
+    readonly maxWidth?: Maybe<number>;
+    readonly cellClass?: Maybe<string | ((row: TRow) => Maybe<string>)>;
+    readonly headerCellClass?: Maybe<string>;
+    readonly summaryCellClass?: Maybe<string | ((row: TSummaryRow) => Maybe<string>)>;
+    /** Render function used to render the content of cells */
+    readonly renderCell?: Maybe<(props: RenderCellProps<TRow, TSummaryRow>) => ReactNode>;
+    /** Render function used to render the content of the column's header cell */
+    readonly renderHeaderCell?: Maybe<(props: RenderHeaderCellProps<TRow, TSummaryRow>) => ReactNode>;
+    /** Render function used to render the content of summary cells */
+    readonly renderSummaryCell?: Maybe<(props: RenderSummaryCellProps<TSummaryRow, TRow>) => ReactNode>;
+    /** Render function used to render the content of group cells */
+    readonly renderGroupCell?: Maybe<(props: RenderGroupCellProps<TRow, TSummaryRow>) => ReactNode>;
+    /** Render function used to render the content of edit cells. When set, the column is automatically set to be editable */
+    readonly renderEditCell?: Maybe<(props: RenderEditCellProps<TRow, TSummaryRow>) => ReactNode>;
+    /** Enables cell editing. If set and no editor property specified, then a textinput will be used as the cell editor */
+    readonly editable?: Maybe<boolean | ((row: TRow) => boolean)>;
+    readonly colSpan?: Maybe<(args: ColSpanArgs<TRow, TSummaryRow>) => Maybe<number>>;
+    /** Determines whether column is frozen or not */
+    readonly frozen?: Maybe<boolean>;
+    /** Enable resizing of a column */
+    readonly resizable?: Maybe<boolean>;
+    /** Enable sorting of a column */
+    readonly sortable?: Maybe<boolean>;
+    /** Enable dragging of a column */
+    readonly draggable?: Maybe<boolean>;
+    /** Sets the column sort order to be descending instead of ascending the first time the column is sorted */
+    readonly sortDescendingFirst?: Maybe<boolean>;
+    readonly editorOptions?: Maybe<{
+        /**
+         * Render the cell content in addition to the edit cell.
+         * Enable this option when the editor is rendered outside the grid, like a modal for example.
+         * By default, the cell content is not rendered when the edit cell is open.
+         * @default false
+         */
+        readonly displayCellContent?: Maybe<boolean>;
+        /** @default true */
+        readonly commitOnOutsideClick?: Maybe<boolean>;
+    }>;
+}
+
+export declare interface ColumnGroup<R, SR = unknown> {
+    /** The name of the column group, it will be displayed in the header cell */
+    readonly name: string | ReactElement;
+    readonly headerCellClass?: Maybe<string>;
+    readonly children: readonly ColumnOrColumnGroup<R, SR>[];
+}
+
+export declare type ColumnOrColumnGroup<R, SR = unknown> = Column<R, SR> | ColumnGroup<R, SR>;
+
+export declare interface CopyEvent<TRow> {
+    sourceColumnKey: string;
+    sourceRow: TRow;
+}
+
+/**
+ * Main API Component to render a data grid of rows and columns
+ *
+ * @example
+ *
+ * <DataGrid columns={columns} rows={rows} />
+ */
+export declare function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridProps<R, SR, K>): JSX.Element;
+
+export declare const DataGridDefaultRenderersContext: Context<Maybe<Renderers<any, any>>>;
+
+export declare interface DataGridHandle {
+    element: HTMLDivElement | null;
+    scrollToCell: (position: PartialPosition) => void;
+    selectCell: (position: Position, enableEditor?: Maybe<boolean>) => void;
+}
+
+export declare interface DataGridProps<R, SR = unknown, K extends Key = Key> extends SharedDivProps {
+    ref?: Maybe<React.Ref<DataGridHandle>>;
+    /**
+     * Grid and data Props
+     */
+    /** An array of objects representing each column on the grid */
+    columns: readonly ColumnOrColumnGroup<NoInfer<R>, NoInfer<SR>>[];
+    /** A function called for each rendered row that should return a plain key/value pair object */
+    rows: readonly R[];
+    /**
+     * Rows to be pinned at the top of the rows view for summary, the vertical scroll bar will not scroll these rows.
+     */
+    topSummaryRows?: Maybe<readonly SR[]>;
+    /**
+     * Rows to be pinned at the bottom of the rows view for summary, the vertical scroll bar will not scroll these rows.
+     */
+    bottomSummaryRows?: Maybe<readonly SR[]>;
+    /** The getter should return a unique key for each row */
+    rowKeyGetter?: Maybe<(row: NoInfer<R>) => K>;
+    onRowsChange?: Maybe<(rows: NoInfer<R>[], data: RowsChangeData<NoInfer<R>, NoInfer<SR>>) => void>;
+    /**
+     * Dimensions props
+     */
+    /**
+     * The height of each row in pixels
+     * @default 35
+     */
+    rowHeight?: Maybe<number | ((row: NoInfer<R>) => number)>;
+    /**
+     * The height of the header row in pixels
+     * @default 35
+     */
+    headerRowHeight?: Maybe<number>;
+    /**
+     * The height of each summary row in pixels
+     * @default 35
+     */
+    summaryRowHeight?: Maybe<number>;
+    /**
+     * Feature props
+     */
+    /** Set of selected row keys */
+    selectedRows?: Maybe<ReadonlySet<K>>;
+    /** Determines if row selection is disabled, per row */
+    isRowSelectionDisabled?: Maybe<(row: NoInfer<R>) => boolean>;
+    /** Function called whenever row selection is changed */
+    onSelectedRowsChange?: Maybe<(selectedRows: Set<NoInfer<K>>) => void>;
+    /** Used for multi column sorting */
+    sortColumns?: Maybe<readonly SortColumn[]>;
+    onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>;
+    defaultColumnOptions?: Maybe<DefaultColumnOptions<NoInfer<R>, NoInfer<SR>>>;
+    onFill?: Maybe<(event: FillEvent<NoInfer<R>>) => NoInfer<R>>;
+    onCopy?: Maybe<(event: CopyEvent<NoInfer<R>>) => void>;
+    onPaste?: Maybe<(event: PasteEvent<NoInfer<R>>) => NoInfer<R>>;
+    /**
+     * Event props
+     */
+    /** Function called whenever a cell is clicked */
+    onCellClick?: Maybe<(args: CellClickArgs<NoInfer<R>, NoInfer<SR>>, event: CellMouseEvent) => void>;
+    /** Function called whenever a cell is double clicked */
+    onCellDoubleClick?: Maybe<(args: CellClickArgs<NoInfer<R>, NoInfer<SR>>, event: CellMouseEvent) => void>;
+    /** Function called whenever a cell is right clicked */
+    onCellContextMenu?: Maybe<(args: CellClickArgs<NoInfer<R>, NoInfer<SR>>, event: CellMouseEvent) => void>;
+    onCellKeyDown?: Maybe<(args: CellKeyDownArgs<NoInfer<R>, NoInfer<SR>>, event: CellKeyboardEvent) => void>;
+    /** Function called whenever cell selection is changed */
+    onSelectedCellChange?: Maybe<(args: CellSelectArgs<NoInfer<R>, NoInfer<SR>>) => void>;
+    /** Called when the grid is scrolled */
+    onScroll?: Maybe<(event: React.UIEvent<HTMLDivElement>) => void>;
+    /** Called when a column is resized */
+    onColumnResize?: Maybe<(column: CalculatedColumn<R, SR>, width: number) => void>;
+    /** Called when a column is reordered */
+    onColumnsReorder?: Maybe<(sourceColumnKey: string, targetColumnKey: string) => void>;
+    /**
+     * Toggles and modes
+     */
+    /** @default true */
+    enableVirtualization?: Maybe<boolean>;
+    /**
+     * The minimum number of rows to render when virtualization is enabled
+     */
+    minimumRowsToRender?: Maybe<number>;
+    /**
+     * Miscellaneous
+     */
+    renderers?: Maybe<Renderers<NoInfer<R>, NoInfer<SR>>>;
+    rowClass?: Maybe<(row: NoInfer<R>, rowIdx: number) => Maybe<string>>;
+    /** @default 'ltr' */
+    direction?: Maybe<Direction>;
+    'data-testid'?: Maybe<string>;
+    'data-cy'?: Maybe<string>;
+}
+
+export declare type DefaultColumnOptions<R, SR> = Pick<Column<R, SR>, 'renderCell' | 'renderHeaderCell' | 'width' | 'minWidth' | 'maxWidth' | 'resizable' | 'sortable' | 'draggable'>;
+
+declare type Direction = 'ltr' | 'rtl';
+
+declare interface EditCellKeyDownArgs<TRow, TSummaryRow = unknown> {
+    mode: 'EDIT';
+    row: TRow;
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    rowIdx: number;
+    navigate: () => void;
+    onClose: (commitChanges?: boolean, shouldFocusCell?: boolean) => void;
+}
+
+export declare interface FillEvent<TRow> {
+    columnKey: string;
+    sourceRow: TRow;
+    targetRow: TRow;
+}
+
+declare interface GroupRow<TRow> {
+    readonly childRows: readonly TRow[];
+    readonly id: string;
+    readonly parentId: unknown;
+    readonly groupKey: unknown;
+    readonly isExpanded: boolean;
+    readonly level: number;
+    readonly posInSet: number;
+    readonly setSize: number;
+    readonly startRowIndex: number;
+}
+
+declare type Maybe<T> = T | undefined | null;
+
+declare type Omit_2<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+
+declare interface PartialPosition {
+    readonly idx?: number | undefined;
+    readonly rowIdx?: number | undefined;
+}
+
+export declare interface PasteEvent<TRow> {
+    sourceColumnKey: string;
+    sourceRow: TRow;
+    targetColumnKey: string;
+    targetRow: TRow;
+}
+
+declare interface Position {
+    readonly idx: number;
+    readonly rowIdx: number;
+}
+
+export declare interface RenderCellProps<TRow, TSummaryRow = unknown> {
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    row: TRow;
+    rowIdx: number;
+    isCellEditable: boolean;
+    tabIndex: number;
+    onRowChange: (row: TRow) => void;
+}
+
+export declare function renderCheckbox({ onChange, indeterminate, ...props }: RenderCheckboxProps): JSX.Element;
+
+export declare interface RenderCheckboxProps extends Pick<React.ComponentProps<'input'>, 'aria-label' | 'aria-labelledby' | 'checked' | 'tabIndex' | 'disabled'> {
+    indeterminate?: boolean | undefined;
+    onChange: (checked: boolean, shift: boolean) => void;
+}
+
+export declare interface RenderEditCellProps<TRow, TSummaryRow = unknown> {
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    row: TRow;
+    rowIdx: number;
+    onRowChange: (row: TRow, commitChanges?: boolean) => void;
+    onClose: (commitChanges?: boolean, shouldFocusCell?: boolean) => void;
+}
+
+export declare interface Renderers<TRow, TSummaryRow> {
+    renderCell?: Maybe<(key: Key, props: CellRendererProps<TRow, TSummaryRow>) => ReactNode>;
+    renderCheckbox?: Maybe<(props: RenderCheckboxProps) => ReactNode>;
+    renderRow?: Maybe<(key: Key, props: RenderRowProps<TRow, TSummaryRow>) => ReactNode>;
+    renderSortStatus?: Maybe<(props: RenderSortStatusProps) => ReactNode>;
+    noRowsFallback?: Maybe<ReactNode>;
+}
+
+export declare interface RenderGroupCellProps<TRow, TSummaryRow = unknown> {
+    groupKey: unknown;
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    row: GroupRow<TRow>;
+    childRows: readonly TRow[];
+    isExpanded: boolean;
+    tabIndex: number;
+    toggleGroup: () => void;
+}
+
+export declare function renderHeaderCell<R, SR>({ column, sortDirection, priority }: RenderHeaderCellProps<R, SR>): string | JSX.Element;
+
+export declare interface RenderHeaderCellProps<TRow, TSummaryRow = unknown> {
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    sortDirection: SortDirection | undefined;
+    priority: number | undefined;
+    tabIndex: number;
+}
+
+export declare interface RenderRowProps<TRow, TSummaryRow = unknown> extends BaseRenderRowProps<TRow, TSummaryRow> {
+    row: TRow;
+    lastFrozenColumnIndex: number;
+    copiedCellIdx: number | undefined;
+    draggedOverCellIdx: number | undefined;
+    selectedCellEditor: ReactElement<RenderEditCellProps<TRow>> | undefined;
+    onRowChange: (column: CalculatedColumn<TRow, TSummaryRow>, rowIdx: number, newRow: TRow) => void;
+    rowClass: Maybe<(row: TRow, rowIdx: number) => Maybe<string>>;
+    setDraggedOverRowIdx: ((overRowIdx: number) => void) | undefined;
+}
+
+export declare function renderSortIcon({ sortDirection }: RenderSortIconProps): JSX.Element | null;
+
+export declare interface RenderSortIconProps {
+    sortDirection: SortDirection | undefined;
+}
+
+export declare function renderSortPriority({ priority }: RenderSortPriorityProps): number | undefined;
+
+export declare interface RenderSortPriorityProps {
+    priority: number | undefined;
+}
+
+export declare interface RenderSortStatusProps extends RenderSortIconProps, RenderSortPriorityProps {
+}
+
+export declare interface RenderSummaryCellProps<TSummaryRow, TRow = unknown> {
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    row: TSummaryRow;
+    tabIndex: number;
+}
+
+export declare function renderToggleGroup<R, SR>(props: RenderGroupCellProps<R, SR>): JSX.Element;
+
+export declare function renderValue<R, SR>(props: RenderCellProps<R, SR>): ReactNode;
+
+export declare const Row: <R, SR>(props: RenderRowProps<R, SR>) => React.JSX.Element;
+
+export declare type RowHeightArgs<TRow> = {
+    type: 'ROW';
+    row: TRow;
+} | {
+    type: 'GROUP';
+    row: GroupRow<TRow>;
+};
+
+export declare interface RowsChangeData<R, SR = unknown> {
+    indexes: number[];
+    column: CalculatedColumn<R, SR>;
+}
+
+export declare const SELECT_COLUMN_KEY = "rdg-select-column";
+
+export declare function SelectCellFormatter({ value, tabIndex, indeterminate, disabled, onChange, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }: SelectCellFormatterProps): ReactNode;
+
+declare interface SelectCellFormatterProps extends SharedInputProps {
+    value: boolean;
+}
+
+declare interface SelectCellKeyDownArgs<TRow, TSummaryRow = unknown> {
+    mode: 'SELECT';
+    row: TRow;
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    rowIdx: number;
+    selectCell: (position: Position, enableEditor?: Maybe<boolean>) => void;
+}
+
+export declare const SelectColumn: Column<any, any>;
+
+export declare interface SelectHeaderRowEvent {
+    checked: boolean;
+}
+
+export declare interface SelectRowEvent<TRow> {
+    row: TRow;
+    checked: boolean;
+    isShiftClick: boolean;
+}
+
+declare type SharedDivProps = Pick<React.ComponentProps<'div'>, 'role' | 'aria-label' | 'aria-labelledby' | 'aria-description' | 'aria-describedby' | 'aria-rowcount' | 'className' | 'style'>;
+
+declare type SharedInputProps = Pick<RenderCheckboxProps, 'disabled' | 'tabIndex' | 'aria-label' | 'aria-labelledby' | 'indeterminate' | 'onChange'>;
+
+export declare interface SortColumn {
+    readonly columnKey: string;
+    readonly direction: SortDirection;
+}
+
+export declare type SortDirection = 'ASC' | 'DESC';
+
+export declare function textEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose }: RenderEditCellProps<TRow, TSummaryRow>): JSX.Element;
+
+export declare function ToggleGroup<R, SR>({ groupKey, isExpanded, tabIndex, toggleGroup }: RenderGroupCellProps<R, SR>): JSX.Element;
+
+export declare function TreeDataGrid<R, SR = unknown, K extends Key = Key>({ columns: rawColumns, rows: rawRows, rowHeight: rawRowHeight, rowKeyGetter: rawRowKeyGetter, onCellKeyDown: rawOnCellKeyDown, onRowsChange, selectedRows: rawSelectedRows, onSelectedRowsChange: rawOnSelectedRowsChange, renderers, groupBy: rawGroupBy, rowGrouper, expandedGroupIds, onExpandedGroupIdsChange, ...props }: TreeDataGridProps<R, SR, K>): JSX.Element;
+
+export declare interface TreeDataGridProps<R, SR = unknown, K extends Key = Key> extends Omit_2<DataGridProps<R, SR, K>, 'columns' | 'role' | 'aria-rowcount' | 'rowHeight' | 'onFill' | 'isRowSelectionDisabled'> {
+    columns: readonly Column<NoInfer<R>, NoInfer<SR>>[];
+    rowHeight?: Maybe<number | ((args: RowHeightArgs<NoInfer<R>>) => number)>;
+    groupBy: readonly string[];
+    rowGrouper: (rows: readonly NoInfer<R>[], columnKey: string) => Record<string, readonly NoInfer<R>[]>;
+    expandedGroupIds: ReadonlySet<unknown>;
+    onExpandedGroupIdsChange: (expandedGroupIds: Set<unknown>) => void;
+}
+
+export declare function useHeaderRowSelection(): {
+    isIndeterminate: boolean;
+    isRowSelected: boolean;
+    onRowSelectionChange: (selectRowEvent: SelectHeaderRowEvent) => void;
+};
+
+export declare function useRowSelection(): {
+    isRowSelectionDisabled: boolean;
+    isRowSelected: boolean;
+    onRowSelectionChange: (selectRowEvent: SelectRowEvent<any>) => void;
+};
+
+export { }

common-react/@dbeaver/react-data-grid/artifacts/lib/styles.css

@@ -0,0 +1,451 @@
+@layer rdg {
+  @layer Defaults,
+    FocusSink,
+    CheckboxInput,
+    CheckboxIcon,
+    CheckboxLabel,
+    Cell,
+    HeaderCell,
+    SummaryCell,
+    EditCell,
+    Row,
+    HeaderRow,
+    SummaryRow,
+    GroupedRow,
+    Root;
+}
+
+.mlln6zg7-0-0-beta-50 {
+  @layer rdg.MeasuringCell {
+    contain: strict;
+    grid-row: 1;
+    visibility: hidden;
+  }
+}
+
+
+.cj343x07-0-0-beta-50 {
+  @layer rdg.Cell {
+    /* max-content does not work with size containment
+     * dynamically switching between different containment styles incurs a heavy relayout penalty
+     * Chromium bug: at odd zoom levels or subpixel positioning,
+     * layout/paint/style containment can make cell borders disappear
+     *   https://issues.chromium.org/issues/40840864
+     */
+    position: relative; /* needed for absolute positioning to work */
+    padding-block: 0;
+    padding-inline: 8px;
+    border-inline-end: 1px solid var(--rdg-border-color);
+    border-block-end: 1px solid var(--rdg-border-color);
+    grid-row-start: var(--rdg-grid-row-start);
+    align-content: center;
+    background-color: inherit;
+
+    white-space: nowrap;
+    overflow: clip;
+    text-overflow: ellipsis;
+    outline: none;
+
+    &[aria-selected='true'] {
+      outline: 2px solid var(--rdg-selection-color);
+      outline-offset: -2px;
+    }
+  }
+}
+
+.csofj7r7-0-0-beta-50 {
+  @layer rdg.Cell {
+    position: sticky;
+    /* Should have a higher value than 0 to show up above unfrozen cells */
+    z-index: 1;
+
+    /* Add box-shadow on the last frozen cell */
+    &:nth-last-child(1 of &) {
+      box-shadow: var(--rdg-cell-frozen-box-shadow);
+    }
+  }
+}
+
+
+.c1bn88vv7-0-0-beta-50 {
+  @layer rdg.CheckboxInput {
+    display: block;
+    margin: auto;
+    inline-size: 20px;
+    block-size: 20px;
+
+    &:focus-visible {
+      outline: 2px solid var(--rdg-checkbox-focus-color);
+      outline-offset: -3px;
+    }
+
+    &:enabled {
+      cursor: pointer;
+    }
+  }
+}
+
+
+.g1s9ylgp7-0-0-beta-50 {
+  @layer rdg.GroupCellContent {
+    outline: none;
+  }
+}
+
+.cz54e4y7-0-0-beta-50 {
+  @layer rdg.GroupCellCaret {
+    margin-inline-start: 4px;
+    stroke: currentColor;
+    stroke-width: 1.5px;
+    fill: transparent;
+    vertical-align: middle;
+
+    > path {
+      transition: d 0.1s;
+    }
+  }
+}
+
+
+.h44jtk67-0-0-beta-50 {
+  @layer rdg.SortableHeaderCell {
+    display: flex;
+  }
+}
+
+.hcgkhxz7-0-0-beta-50 {
+  @layer rdg.SortableHeaderCellName {
+    flex-grow: 1;
+    overflow: clip;
+    text-overflow: ellipsis;
+  }
+}
+
+
+.c6ra8a37-0-0-beta-50 {
+  @layer rdg.Cell {
+    background-color: #ccccff;
+  }
+}
+
+.cq910m07-0-0-beta-50 {
+  @layer rdg.Cell {
+    background-color: #ccccff;
+
+    &.c6ra8a37-0-0-beta-50 {
+      background-color: #9999ff;
+    }
+  }
+}
+
+
+.c1w9bbhr7-0-0-beta-50 {
+  @layer rdg.DragHandle {
+    --rdg-drag-handle-size: 8px;
+    z-index: 0;
+    cursor: move;
+    inline-size: var(--rdg-drag-handle-size);
+    block-size: var(--rdg-drag-handle-size);
+    background-color: var(--rdg-selection-color);
+    place-self: end;
+
+    &:hover {
+      --rdg-drag-handle-size: 16px;
+      border: 2px solid var(--rdg-selection-color);
+      background-color: var(--rdg-background-color);
+    }
+  }
+}
+
+.c1creorc7-0-0-beta-50 {
+  @layer rdg.DragHandle {
+    z-index: 1;
+    position: sticky;
+  }
+}
+
+
+.cis5rrm7-0-0-beta-50 {
+  @layer rdg.EditCell {
+    padding: 0;
+  }
+}
+
+
+.c6l2wv17-0-0-beta-50 {
+  @layer rdg.HeaderCell {
+    cursor: pointer;
+  }
+}
+
+.c1kqdw7y7-0-0-beta-50 {
+  @layer rdg.HeaderCell {
+    touch-action: none;
+  }
+}
+
+.r1y6ywlx7-0-0-beta-50 {
+  @layer rdg.HeaderCell {
+    cursor: col-resize;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
+    inline-size: 10px;
+  }
+}
+
+.c1bezg5o7-0-0-beta-50 {
+  opacity: 0.5;
+}
+
+.c1vc96037-0-0-beta-50 {
+  background-color: var(--rdg-header-draggable-background-color);
+}
+
+
+.r1upfr807-0-0-beta-50 {
+  @layer rdg.Row {
+    display: contents;
+    background-color: var(--rdg-background-color);
+
+    &:hover {
+      background-color: var(--rdg-row-hover-background-color);
+    }
+
+    &[aria-selected='true'] {
+      background-color: var(--rdg-row-selected-background-color);
+
+      &:hover {
+        background-color: var(--rdg-row-selected-hover-background-color);
+      }
+    }
+  }
+}
+
+.r190mhd37-0-0-beta-50 {
+  @layer rdg.FocusSink {
+    outline: 2px solid var(--rdg-selection-color);
+    outline-offset: -2px;
+  }
+}
+
+.r139qu9m7-0-0-beta-50 {
+  @layer rdg.FocusSink {
+    &::before {
+      content: '';
+      display: inline-block;
+      block-size: 100%;
+      position: sticky;
+      inset-inline-start: 0;
+      border-inline-start: 2px solid var(--rdg-selection-color);
+    }
+  }
+}
+
+
+.h10tskcx7-0-0-beta-50 {
+  @layer rdg.HeaderRow {
+    display: contents;
+    background-color: var(--rdg-header-background-color);
+    font-weight: bold;
+
+    & > .cj343x07-0-0-beta-50 {
+      /* Should have a higher value than 1 to show up above regular cells and the focus sink */
+      z-index: 2;
+      position: sticky;
+    }
+
+    & > .csofj7r7-0-0-beta-50 {
+      z-index: 3;
+    }
+  }
+}
+
+
+.a3ejtar7-0-0-beta-50 {
+  @layer rdg.SortIcon {
+    fill: currentColor;
+
+    > path {
+      transition: d 0.1s;
+    }
+  }
+}
+
+
+.rnvodz57-0-0-beta-50 {
+  @layer rdg.Defaults {
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+  }
+
+  @layer rdg.Root {
+    --rdg-color: #000;   --rdg-border-color: #ddd;   --rdg-summary-border-color: #aaa;   --rdg-background-color: hsl(0deg 0% 100%);   --rdg-header-background-color: hsl(0deg 0% 97.5%);   --rdg-header-draggable-background-color: hsl(0deg 0% 90.5%);   --rdg-row-hover-background-color: hsl(0deg 0% 96%);   --rdg-row-selected-background-color: hsl(207deg 76% 92%);   --rdg-row-selected-hover-background-color: hsl(207deg 76% 88%);   --rdg-checkbox-focus-color: hsl(207deg 100% 69%);
+    --rdg-selection-color: #66afe9;
+    --rdg-font-size: 14px;
+    --rdg-cell-frozen-box-shadow: 2px 0 5px -2px rgba(136, 136, 136, 0.3);
+
+    &:dir(rtl) {
+      --rdg-cell-frozen-box-shadow: -2px 0 5px -2px rgba(136, 136, 136, 0.3);
+    }
+
+    display: grid;
+
+    color-scheme: var(--rdg-color-scheme, light dark);
+    accent-color: light-dark(hsl(207deg 100% 29%), hsl(207deg 100% 79%));
+
+    /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context */
+    /* We set a stacking context so internal elements don't render on top of external elements. */
+    /* size containment is not used as it could break "width: min-content" for example, and the grid would infinitely resize on Chromium browsers */
+    contain: content;
+    content-visibility: auto;
+    block-size: 350px;
+    border: 1px solid var(--rdg-border-color);
+    box-sizing: border-box;
+    overflow: auto;
+    background-color: var(--rdg-background-color);
+    color: var(--rdg-color);
+    font-size: var(--rdg-font-size);
+
+    /* needed on Firefox to fix scrollbars */
+    &::before {
+      content: '';
+      grid-column: 1/-1;
+      grid-row: 1/-1;
+    }
+
+    &.rdg-dark {
+      --rdg-color-scheme: dark;
+      --rdg-color: #ddd;   --rdg-border-color: #444;   --rdg-summary-border-color: #555;   --rdg-background-color: hsl(0deg 0% 13%);   --rdg-header-background-color: hsl(0deg 0% 10.5%);   --rdg-header-draggable-background-color: hsl(0deg 0% 17.5%);   --rdg-row-hover-background-color: hsl(0deg 0% 9%);   --rdg-row-selected-background-color: hsl(207deg 76% 42%);   --rdg-row-selected-hover-background-color: hsl(207deg 76% 38%);   --rdg-checkbox-focus-color: hsl(207deg 100% 89%);
+    }
+
+    &.rdg-light {
+      --rdg-color-scheme: light;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      &:not(.rdg-light) {
+        --rdg-color: #ddd;   --rdg-border-color: #444;   --rdg-summary-border-color: #555;   --rdg-background-color: hsl(0deg 0% 13%);   --rdg-header-background-color: hsl(0deg 0% 10.5%);   --rdg-header-draggable-background-color: hsl(0deg 0% 17.5%);   --rdg-row-hover-background-color: hsl(0deg 0% 9%);   --rdg-row-selected-background-color: hsl(207deg 76% 42%);   --rdg-row-selected-hover-background-color: hsl(207deg 76% 38%);   --rdg-checkbox-focus-color: hsl(207deg 100% 89%);
+      }
+    }
+
+    > :nth-last-child(1 of .rdg-top-summary-row) {
+      > .cj343x07-0-0-beta-50 {
+        border-block-end: 2px solid var(--rdg-summary-border-color);
+      }
+    }
+
+    > :nth-child(1 of .rdg-bottom-summary-row) {
+      > .cj343x07-0-0-beta-50 {
+        border-block-start: 2px solid var(--rdg-summary-border-color);
+      }
+    }
+  }
+}
+
+.vlqv91k7-0-0-beta-50 {
+  @layer rdg.Root {
+    user-select: none;
+
+    & .r1upfr807-0-0-beta-50 {
+      cursor: move;
+    }
+  }
+}
+
+.f1lsfrzw7-0-0-beta-50 {
+  @layer rdg.FocusSink {
+    grid-column: 1/-1;
+    pointer-events: none;
+    /* Should have a higher value than 1 to show up above regular frozen cells */
+    z-index: 1;
+  }
+}
+
+.f1cte0lg7-0-0-beta-50 {
+  @layer rdg.FocusSink {
+    /* Should have a higher value than 3 to show up above header and summary rows */
+    z-index: 3;
+  }
+}
+
+
+.s8wc6fl7-0-0-beta-50 {
+  @layer rdg.SummaryCell {
+    inset-block-start: var(--rdg-summary-row-top);
+    inset-block-end: var(--rdg-summary-row-bottom);
+  }
+}
+
+
+.skuhp557-0-0-beta-50 {
+  @layer rdg.SummaryRow {
+    > .cj343x07-0-0-beta-50 {
+      position: sticky;
+    }
+  }
+}
+
+.tf8l5ub7-0-0-beta-50 {
+  @layer rdg.SummaryRow {
+    > .cj343x07-0-0-beta-50 {
+      z-index: 2;
+    }
+
+    > .csofj7r7-0-0-beta-50 {
+      z-index: 3;
+    }
+  }
+}
+
+
+.g1yxluv37-0-0-beta-50 {
+  @layer rdg.GroupedRow {
+    &:not([aria-selected='true']) {
+      background-color: var(--rdg-header-background-color);
+    }
+
+    > .cj343x07-0-0-beta-50:not(:last-child, .csofj7r7-0-0-beta-50),
+    > :nth-last-child(n + 2 of .csofj7r7-0-0-beta-50) {
+      border-inline-end: none;
+    }
+  }
+}
+
+
+.t7vyx3i7-0-0-beta-50 {
+  @layer rdg.TextEditor {
+    appearance: none;
+
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: 100%;
+    padding-block: 0;
+    padding-inline: 6px;
+    border: 2px solid #ccc;
+    vertical-align: top;
+    color: var(--rdg-color);
+    background-color: var(--rdg-background-color);
+
+    font-family: inherit;
+    font-size: var(--rdg-font-size);
+
+    &:focus {
+      border-color: var(--rdg-selection-color);
+      outline: none;
+    }
+
+    &::placeholder {
+      color: #999;
+      opacity: 1;
+    }
+  }
+}
+
+
+
+/*# sourceMappingURL=styles.css.map*/

common-react/@dbeaver/react-data-grid/artifacts/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "react-data-grid",
+  "version": "7.0.0-beta.50",
+  "type": "module",
+  "exports": {
+    "./lib/styles.css": "./lib/styles.css",
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/bundle.js"
+    }
+  },
+  "browser": "./lib/bundle.js",
+  "main": "./lib/bundle.js",
+  "module": "./lib/bundle.js",
+  "types": "./lib/index.d.ts",
+  "files": [
+    "lib"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "dependencies": {
+    "clsx": "^2.0.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0",
+    "react-dom": "^19.0"
+  }
+}

common-react/@dbeaver/react-data-grid/package.json

@@ -24,7 +24,7 @@
     "!lib/tests",
     "!.tsbuildinfo"
   ],
-  "packageManager": "yarn@4.9.2",
+  "packageManager": "yarn@4.6.0",
   "devDependencies": {
     "@dbeaver/tsconfig": "workspace:^",
     "@types/react": "^19",
@@ -36,7 +36,7 @@
     "@dbeaver/react-dnd": "workspace:^",
     "@dbeaver/ui-kit": "workspace:^",
     "react": "^19",
-    "react-data-grid": "7.0.0-beta.57",
+    "react-data-grid": "file:./artifacts",
     "react-dom": "^19"
   }
 }

common-react/@dbeaver/react-data-grid/src/BaseCell.tsx

@@ -1,11 +1,3 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
- *
- * Licensed under the Apache License, Version 2.0.
- * you may not use this file except in compliance with the License.
- */
-
 import { memo, use, useMemo } from 'react';
 import { Cell, type CellRendererProps } from 'react-data-grid';
 import { DataGridCellContext, type IDataGridCellRenderer } from './DataGridCellContext.js';
@@ -23,18 +15,13 @@ export const BaseCell = memo(function BaseCell<TRow, TSummaryRow>(props: CellRen
   const tooltip = useGridReactiveValue(cellContext?.cellTooltip, rowIdx, dataColIdx);
 
   function handleClick(event: React.MouseEvent<HTMLDivElement>) {
-    props.onCellClick?.(
+    props.onClick?.(
       {
         rowIdx,
         row: props.row,
         column: props.column,
         selectCell(enableEditor) {
-          props.selectCell(
-            { rowIdx, idx: virtualColIdx },
-            {
-              enableEditor,
-            },
-          );
+          props.selectCell({ rowIdx, idx: virtualColIdx }, enableEditor);
         },
       },
       createCellMouseEvent(event),
@@ -42,13 +29,13 @@ export const BaseCell = memo(function BaseCell<TRow, TSummaryRow>(props: CellRen
   }
 
   function handleDoubleClick(event: React.MouseEvent<HTMLDivElement>) {
-    props.onCellDoubleClick?.(
+    props.onDoubleClick?.(
       {
         rowIdx,
         row: props.row,
         column: props.column,
         selectCell(enableEditor) {
-          props.selectCell({ rowIdx, idx: virtualColIdx }, { enableEditor });
+          props.selectCell({ rowIdx, idx: virtualColIdx }, enableEditor);
         },
       },
       createCellMouseEvent(event),
@@ -56,13 +43,13 @@ export const BaseCell = memo(function BaseCell<TRow, TSummaryRow>(props: CellRen
   }
 
   function handleContextMenu(event: React.MouseEvent<HTMLDivElement>) {
-    props.onCellContextMenu?.(
+    props.onContextMenu?.(
       {
         rowIdx,
         row: props.row,
         column: props.column,
         selectCell(enableEditor) {
-          props.selectCell({ rowIdx, idx: virtualColIdx }, { enableEditor });
+          props.selectCell({ rowIdx, idx: virtualColIdx }, enableEditor);
         },
       },
       createCellMouseEvent(event),
@@ -70,32 +57,25 @@ export const BaseCell = memo(function BaseCell<TRow, TSummaryRow>(props: CellRen
   }
 
   const mappedProps = useMemo(
-    () => ({
-      ...props,
-      onCellClick: undefined,
-      onCellContextMenu: undefined,
-      onCellDoubleClick: undefined,
-      isFocused: props.isCellSelected,
-      onClick: handleClick,
-      onDoubleClick: handleDoubleClick,
-      onContextMenu: handleContextMenu,
-    }),
+    () => ({ ...props, isFocused: props.isCellSelected, onClick: handleClick, onDoubleClick: handleDoubleClick, onContextMenu: handleContextMenu }),
     Object.values(props),
   );
 
   const renderDefaultCell = useMemo<IDataGridCellRenderer>(
     () =>
-      ({ onClick, onDoubleClick, onContextMenu, ...rest }) => (
-        <Cell
-          {...props}
-          title={tooltip}
-          onCellClick={(_, event) => onClick?.(event)}
-          onCellDoubleClick={(_, event) => onDoubleClick?.(event)}
-          onCellContextMenu={(_, event) => onContextMenu?.(event)}
-          {...rest}
-          isCellSelected={props.isCellSelected || rest.isFocused || false}
-        />
-      ),
+      ({ onClick, onDoubleClick, onContextMenu, ...rest }) => {
+        return (
+          <Cell
+            {...props}
+            title={tooltip}
+            onClick={(_, event) => onClick?.(event)}
+            onDoubleClick={(_, event) => onDoubleClick?.(event)}
+            onContextMenu={(_, event) => onContextMenu?.(event)}
+            {...rest}
+            isCellSelected={props.isCellSelected || rest.isFocused || false}
+          />
+        );
+      },
     [...Object.values(props), tooltip],
   );
 

common-react/@dbeaver/react-data-grid/src/BaseRow.tsx

@@ -0,0 +1,16 @@
+import { Row, type RenderRowProps } from 'react-data-grid';
+import { DataGridRowContext } from './DataGridRowContext.js';
+import { memo, use, useEffect } from 'react';
+import { useGridReactiveValue } from './useGridReactiveValue.js';
+
+export const BaseRow = memo(function BaseRow<TRow, TSummaryRow>(props: RenderRowProps<TRow, TSummaryRow>) {
+  const rowContext = use(DataGridRowContext);
+  const rowsCount = useGridReactiveValue(rowContext?.onScrollToBottom ? rowContext?.rowCount : undefined);
+
+  useEffect(() => {
+    if (rowsCount === props.rowIdx + 1) {
+      rowContext?.onScrollToBottom?.();
+    }
+  }, [rowsCount]);
+  return <Row {...props} />;
+}) as <TRow, TSummaryRow>(props: RenderRowProps<TRow, TSummaryRow>) => React.ReactNode;

common-react/@dbeaver/react-data-grid/src/DataGrid.css

@@ -1,6 +1,12 @@
 @import url('@dbeaver/ui-kit/index.css');
 @import url('react-data-grid/lib/styles.css') layer(components);
 
+@layer components.rdg.MeasuringCell {
+  [data-measuring-cell] {
+    max-width: var(--rdg-max-auto-size, 350px);
+  }
+}
+
 @layer components.rdg.Cell {
   .rdg {
     --dbv-kit-icon-btn-outline-width: 1px;

common-react/@dbeaver/react-data-grid/src/DataGrid.tsx

@@ -1,20 +1,5 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
- *
- * Licensed under the Apache License, Version 2.0.
- * you may not use this file except in compliance with the License.
- */
-
-import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import {
-  DataGrid as DataGridBase,
-  type ColumnOrColumnGroup,
-  type CellSelectArgs,
-  type DataGridHandle,
-  type ColumnWidth,
-  type ColumnWidths,
-} from 'react-data-grid';
+import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import { DataGrid as DataGridBase, type ColumnOrColumnGroup, type CellSelectArgs, type DataGridHandle } from 'react-data-grid';
 import { rowRenderer } from './renderers/rowRenderer.js';
 import { cellRenderer } from './renderers/cellRenderer.js';
 import { DataGridCellHeaderContext, type IDataGridHeaderCellContext } from './DataGridHeaderCellContext.js';
@@ -42,7 +27,6 @@ export interface DataGridCellKeyboardEvent extends React.KeyboardEvent<HTMLDivEl
 export interface DataGridProps extends IDataGridCellContext, IDataGridRowContext, IDataGridHeaderCellContext, React.PropsWithChildren {
   getRowHeight?: (rowIdx: number) => number;
   getRowId?: (rowIdx: number) => React.Key;
-  getRowClass?: (rowIdx: number) => string | null;
   columnCount: IGridReactiveValue<number, []>;
   getColumnKey?: (colIdx: number) => string;
   onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
@@ -58,8 +42,6 @@ export interface DataGridRef {
   openEditor: (position: ICellPosition) => void;
 }
 
-const MAX_AUTO_SIZE_WIDTH = 350;
-
 export const DataGrid = forwardRef<DataGridRef, DataGridProps>(function DataGrid(
   {
     headerElement,
@@ -79,28 +61,25 @@ export const DataGrid = forwardRef<DataGridRef, DataGridProps>(function DataGrid
     getCellEditable,
     columnCount,
     getColumnKey,
-    rowElement,
     rowCount,
     getRowId,
     getRowHeight,
-    getRowClass,
     onHeaderReorder,
     onScroll,
     onScrollToBottom,
     onFocus,
     onCellChange,
     onColumnSort,
-    onHeaderKeyDown,
     children,
     className,
     onCellKeyDown,
   },
   ref,
 ) {
-  const [columnWidths, setColumnWidths] = useState<ColumnWidths>(() => new Map<string, ColumnWidth>());
   const rowsCount = useGridReactiveValue(rowCount);
   const columnsCount = useGridReactiveValue(columnCount);
 
+  const gridKey = useRef(0);
   const rowsCountRef = useRef(rowsCount);
   const innerGridRef = useRef<DataGridHandle>(null);
   const columns = new Array<ColumnOrColumnGroup<IInnerRow, unknown>>(columnsCount)
@@ -131,12 +110,7 @@ export const DataGrid = forwardRef<DataGridRef, DataGridProps>(function DataGrid
       innerGridRef.current?.scrollToCell({ idx: position.colIdx && dndHeaderContext.getDataColIdx(position.colIdx), rowIdx: position.rowIdx });
     },
     openEditor: (position: ICellPosition) => {
-      innerGridRef.current?.selectCell(
-        { idx: dndHeaderContext.getDataColIdx(position.colIdx), rowIdx: position.rowIdx },
-        {
-          enableEditor: true,
-        },
-      );
+      innerGridRef.current?.selectCell({ idx: dndHeaderContext.getDataColIdx(position.colIdx), rowIdx: position.rowIdx }, true);
     },
   }));
 
@@ -145,7 +119,8 @@ export const DataGrid = forwardRef<DataGridRef, DataGridProps>(function DataGrid
     rowsCountRef.current = rowsCount;
 
     if (previousRowCount === 0) {
-      setColumnWidths(new Map<string, ColumnWidth>());
+      // we trigger columns size recalculation when rows are added
+      gridKey.current++;
     }
   }
 
@@ -165,49 +140,29 @@ export const DataGrid = forwardRef<DataGridRef, DataGridProps>(function DataGrid
     onCellKeyDown?.({ colIdx: dndHeaderContext.getDataColIdx(args.column.idx), rowIdx: args.rowIdx }, event);
   }
 
-  // We need to patch auto-size width to avoid extremely large columns on table initialization
-  for (const [key, column] of columnWidths) {
-    const isMeasured = column.type === 'measured';
-    const isAutoSized = getHeaderWidth?.(Number(key)) === 'auto';
-    const isOversized = column.width > MAX_AUTO_SIZE_WIDTH;
-
-    if (isAutoSized || !isMeasured || !isOversized) {
-      continue;
-    }
-
-    (columnWidths as Map<string, ColumnWidth>).set(key, {
-      ...column,
-      type: 'resized',
-      width: MAX_AUTO_SIZE_WIDTH,
-    });
-  }
-
   return (
     <HeaderDnDContext value={dndHeaderContext}>
-      <DataGridRowContext value={{ rowElement, rowCount, onScrollToBottom }}>
+      <DataGridRowContext value={{ rowCount, onScrollToBottom }}>
         <DataGridCellContext value={{ cell, cellText, cellElement, cellTooltip, onCellChange }}>
-          <DataGridCellHeaderContext
-            value={{ headerElement, headerText, getHeaderDnD, columnSortable, onColumnSort, columnSortingState, onHeaderKeyDown }}
-          >
+          <DataGridCellHeaderContext value={{ headerElement, headerText, getHeaderDnD, columnSortable, onColumnSort, columnSortingState }}>
             <DataGridBase
+              key={gridKey.current}
               ref={innerGridRef}
               columns={dndHeaderContext.columns}
               rows={rows}
               className={className}
               headerRowHeight={getHeaderHeight?.()}
+              onScroll={onScroll}
               rowHeight={getRowHeight ? row => getRowHeight(row.idx) : undefined}
               rowKeyGetter={getRowId ? row => getRowId(row.idx) : undefined}
-              rowClass={getRowClass ? row => getRowClass(row.idx) : undefined}
-              columnWidths={columnWidths}
+              onSelectedCellChange={handleCellFocus}
+              onCellKeyDown={handleCellKeyDown}
               renderers={{
                 renderRow: rowRenderer,
                 renderCell: cellRenderer,
                 noRowsFallback: children,
               }}
-              onScroll={onScroll}
-              onSelectedCellChange={handleCellFocus}
-              onCellKeyDown={handleCellKeyDown}
-              onColumnWidthsChange={setColumnWidths}
+              minimumRowsToRender={100}
             />
           </DataGridCellHeaderContext>
         </DataGridCellContext>

common-react/@dbeaver/react-data-grid/src/DataGridCellContext.ts

@@ -1,11 +1,3 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
- *
- * Licensed under the Apache License, Version 2.0.
- * you may not use this file except in compliance with the License.
- */
-
 import { createContext } from 'react';
 import type { IGridReactiveValue } from './IGridReactiveValue.js';
 

common-react/@dbeaver/react-data-grid/src/DataGridHeaderCellContext.ts

@@ -14,7 +14,6 @@ export interface IDataGridHeaderCellContext {
   columnSortingState?: IGridReactiveValue<'asc' | 'desc' | undefined | null, [colIdx: number]>;
   columnSortable?: IGridReactiveValue<boolean, [colIdx: number]>;
   onColumnSort?: (colIdx: number, order: 'asc' | 'desc' | null, isMultiple: boolean) => void;
-  onHeaderKeyDown?: (event: React.KeyboardEvent) => void;
 }
 
 export const DataGridCellHeaderContext = createContext<IDataGridHeaderCellContext | null>(null);

common-react/@dbeaver/react-data-grid/src/DataGridRowContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+import type { IGridReactiveValue } from './IGridReactiveValue.js';
+
+export interface IDataGridRowContext {
+  rowCount: IGridReactiveValue<number, []>;
+  onScrollToBottom?: () => void;
+}
+
+export const DataGridRowContext = createContext<IDataGridRowContext | null>(null);

common-react/@dbeaver/react-data-grid/src/formatters/BooleanFormatter.tsx

@@ -4,12 +4,11 @@ import { Checkbox, clsx, Focusable } from '@dbeaver/ui-kit';
 interface Props {
   value: boolean | null;
   className?: string;
-  focusable?: boolean;
   onClick?: React.MouseEventHandler<HTMLElement>;
   onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
 }
 
-export function BooleanFormatter({ value, className, onClick, onKeyDown, focusable }: Props) {
+export function BooleanFormatter({ value, className, onClick, onKeyDown }: Props) {
   const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
     if (event.code === 'Enter' || event.code === 'Space') {
       event.preventDefault();
@@ -18,7 +17,6 @@ export function BooleanFormatter({ value, className, onClick, onKeyDown, focusab
   };
   return (
     <Focusable
-      focusable={focusable}
       className={clsx('tw:flex tw:items-center tw:outline-none tw:hover:cursor-pointer', className)}
       onKeyDown={handleKeyDown}
       onClick={onClick}

common-react/@dbeaver/react-data-grid/src/index.ts

@@ -1,13 +1,4 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
- *
- * Licensed under the Apache License, Version 2.0.
- * you may not use this file except in compliance with the License.
- */
-
 export * from './DataGrid.js';
-export * from './DataGridRowContext.js';
 export * from './DataGridCellContext.js';
 export * from './DataGridCellInnerContext.js';
 export * from './IGridReactiveValue.js';

common-react/@dbeaver/react-data-grid/src/renderers/HeaderCellContentRenderer.tsx

@@ -1,12 +1,4 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
- *
- * Licensed under the Apache License, Version 2.0.
- * you may not use this file except in compliance with the License.
- */
-
-import { memo, use } from 'react';
+import { memo, use, useRef } from 'react';
 import { useDrag, useDrop, type DnDStoreProvider } from '@dbeaver/react-dnd';
 import { DataGridCellHeaderContext } from '../DataGridHeaderCellContext.js';
 import { useGridReactiveValue } from '../useGridReactiveValue.js';
@@ -17,7 +9,6 @@ interface Props {
   colIdx: number;
   tabIndex?: number;
 }
-
 export const HeaderCellContentRenderer = memo(function HeaderCellContentRenderer({ colIdx, tabIndex }: Props) {
   const dndHeaderContext = use(HeaderDnDContext);
   const cellHeaderContext = use(DataGridCellHeaderContext);
@@ -25,9 +16,11 @@ export const HeaderCellContentRenderer = memo(function HeaderCellContentRenderer
   const getHeaderText = useGridReactiveValue(headerElement ? undefined : cellHeaderContext?.headerText, colIdx);
   const isColumnSortable = useGridReactiveValue(cellHeaderContext?.columnSortable, colIdx);
   const onColumnSort = cellHeaderContext?.onColumnSort;
-  const onHeaderKeyDown = cellHeaderContext?.onHeaderKeyDown;
   const sortingState = useGridReactiveValue(cellHeaderContext?.columnSortingState, colIdx);
 
+  const orderButtonRef = useRef<HTMLButtonElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
   const draggable = dndHeaderContext?.getCanDrag?.(colIdx) ?? false;
   const drag = useDrag({
     draggable,
@@ -62,32 +55,26 @@ export const HeaderCellContentRenderer = memo(function HeaderCellContentRenderer
     },
   });
 
-  function handleSort(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) {
-    if (!onColumnSort) return;
-
-    const nextSortState = sortingState === 'asc' ? 'desc' : sortingState === 'desc' ? null : 'asc';
-    onColumnSort(colIdx, nextSortState, e.ctrlKey || e.metaKey);
-  }
-
-  function onKeyDown(event: React.KeyboardEvent<HTMLElement>) {
-    onHeaderKeyDown?.(event);
-
-    if ((event.key === 'Enter' || event.key === ' ') && isColumnSortable && onColumnSort) {
-      event.preventDefault();
-      handleSort(event);
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Tab' && !e.shiftKey && isColumnSortable && onColumnSort && orderButtonRef.current !== document.activeElement) {
+      e.preventDefault();
+      e.stopPropagation();
+      containerRef.current?.parentElement?.setAttribute('aria-selected', 'false');
+      orderButtonRef.current?.focus();
     }
-  }
+  };
 
   return (
     <div
+      ref={containerRef}
       tabIndex={tabIndex}
+      onKeyDown={handleKeyDown}
       className="tw:w-full tw:h-full tw:content-center tw:flex tw:items-center tw:justify-between tw:gap-1 tw:outline-none tw:group"
       {...drag.props}
       {...drop.props}
-      onKeyDown={onKeyDown}
     >
       <span className="tw:overflow-hidden tw:text-ellipsis">{headerElement ?? getHeaderText ?? ''}</span>
-      {isColumnSortable && onColumnSort && <OrderButton sortState={sortingState} onClick={handleSort} />}
+      {isColumnSortable && onColumnSort && <OrderButton ref={orderButtonRef} colIdx={colIdx} sortState={sortingState} onSort={onColumnSort} />}
     </div>
   );
 });

common-react/@dbeaver/react-data-grid/src/renderers/OrderButton.tsx

@@ -0,0 +1,42 @@
+import { clsx, IconButton } from '@dbeaver/ui-kit';
+
+interface OrderButtonProps {
+  colIdx: number;
+  sortState?: 'asc' | 'desc' | null;
+  onSort: (attributePosition: number, order: 'asc' | 'desc' | null, isMultiple: boolean) => void;
+  tabIndex?: number;
+  ref: React.Ref<HTMLButtonElement>;
+}
+
+export function OrderButton({ colIdx, sortState, onSort, tabIndex, ref }: OrderButtonProps) {
+  function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
+    const nextSortState = sortState === 'asc' ? 'desc' : sortState === 'desc' ? null : 'asc';
+    onSort(colIdx, nextSortState, e.ctrlKey || e.metaKey);
+  }
+
+  const svgSortAsc = '#icon-sort-asc';
+  const svgSortDesc = '#icon-sort-desc';
+  const svgSortUnknown = '#icon-sort-unknown';
+
+  const iconSrc = sortState === 'asc' ? svgSortAsc : sortState === 'desc' ? svgSortDesc : svgSortUnknown;
+
+  return (
+    <IconButton
+      variant="secondary"
+      size="small"
+      onClick={handleClick}
+      tabIndex={tabIndex}
+      ref={ref}
+      title="Sort by column"
+      aria-label="Sort by column"
+      className={clsx(
+        'tw:opacity-0 tw:group-focus:opacity-100 tw:focus:opacity-100 tw:group-hover:opacity-100 tw:hover:opacity-100 tw:outline-offset-0',
+        sortState && 'tw:opacity-100',
+      )}
+    >
+      <svg width="16" height="16" viewBox="0 0 16 16">
+        <use href={iconSrc} />
+      </svg>
+    </IconButton>
+  );
+}

common-react/@dbeaver/react-dnd/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@dbeaver/react-translate",
+  "name": "@dbeaver/react-dnd",
   "type": "module",
   "sideEffects": [],
   "exports": {
@@ -23,7 +23,7 @@
     "!lib/tests",
     "!.tsbuildinfo"
   ],
-  "packageManager": "yarn@4.9.2",
+  "packageManager": "yarn@4.6.0",
   "devDependencies": {
     "@dbeaver/tsconfig": "workspace:^",
     "@types/react": "^19",

common-react/@dbeaver/react-dnd/src/store.ts

@@ -6,7 +6,7 @@ export interface DnDStoreProvider {
   removeData: () => void;
 }
 
-export class DnDStore {
+class DnDStore {
   private data: Map<string, Record<string, any>> = new Map();
   setData(id: string, key: string, value: any) {
     if (!this.data.has(id)) {

common-react/@dbeaver/ui-kit/.ladle/components.tsx

@@ -0,0 +1,2 @@
+import '../src/index.css';
+import './global.css';

common-react/@dbeaver/ui-kit/assets/icons/icons.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <symbol id="icon-sort-unknown" viewBox="0 0 24 24" fill="currentColor">
+        <polygon points="3.4 8.29 10.55 8.29 6.98 4 3.4 8.29" />
+        <rect x="6.26" y="5.43" width="1.43" height="15.71" />
+        <polygon points="20.55 16.86 13.4 16.86 16.98 21.14 20.55 16.86" />
+        <rect x="16.26" y="4" width="1.43" height="15.71" />
+    </symbol>
+    <symbol id="icon-sort-desc" viewBox="0 0 24 24"
+        fill="currentColor">
+        <polygon points="9.14 16.71 2 16.71 5.57 21 9.14 16.71" />
+        <rect x="4.86" y="3.86" width="1.43" height="15.71" />
+        <rect x="10.57" y="5.29" width="11.43" height="1.43" />
+        <rect x="10.57" y="11.71" width="8.57" height="1.43" />
+        <rect x="10.57" y="18.14" width="5.71" height="1.43" />
+    </symbol>
+    <symbol id="icon-sort-asc" viewBox="0 0 24 24" fill="currentColor">
+        <polygon points="2 8.14 9.14 8.14 5.57 3.86 2 8.14" />
+        <rect x="4.86" y="5.29" width="1.43" height="15.71" />
+        <rect x="10.57" y="5.29" width="11.43" height="1.43" />
+        <rect x="10.57" y="11.71" width="8.57" height="1.43" />
+        <rect x="10.57" y="18.14" width="5.71" height="1.43" />
+    </symbol>
+    <symbol id="icon-cross" viewBox="0 0 24 24">
+        <path xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M3.31579 3.31579C2.89474 3.73684 2.89474 4.42105 3.31579 4.84211L10.4737 12L3.31579 19.1579C2.89474 19.5789 2.89474 20.2632 3.31579 20.6842C3.73684 21.1053 4.42105 21.1053 4.84211 20.6842L12 13.5263L19.1579 20.6842C19.5789 21.1053 20.2632 21.1053 20.6842 20.6842C21.1053 20.2632 21.1053 19.5789 20.6842 19.1579L13.5263 12L20.6842 4.84211C21.1053 4.42105 21.1053 3.73684 20.6842 3.31579C20.2632 2.89474 19.5789 2.89474 19.1579 3.31579L12 10.4737L4.84211 3.31579C4.42105 2.89474 3.73684 2.89474 3.31579 3.31579Z" />
+    </symbol>
+</svg>  

common-react/@dbeaver/ui-kit/package.json

@@ -15,7 +15,7 @@
     "docs": "ladle serve",
     "clean": "rimraf --glob lib"
   },
-  "packageManager": "yarn@4.9.2",
+  "packageManager": "yarn@4.6.0",
   "devDependencies": {
     "@dbeaver/tsconfig": "workspace:^",
     "@ladle/react": "^5",
@@ -23,17 +23,14 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@wroud/vite-plugin-asset-resolver": "^0",
-    "@wroud/vite-plugin-tsc": "^0",
+    "@wroud/vite-plugin-tsc": "^0.11.6",
     "rimraf": "^6",
     "tailwindcss": "4.0.7",
     "typescript": "^5",
-    "vite": "^7",
-    "vite-plugin-svgr": "^4.3.0"
+    "vite": "^6"
   },
   "dependencies": {
     "@ariakit/react": "^0",
-    "@dbeaver/js-helpers": "workspace:*",
-    "@dbeaver/react-translate": "workspace:^",
     "clsx": "^2",
     "react": "^19",
     "react-dom": "^19"

common-react/@dbeaver/ui-kit/src/Button/Button.css

@@ -136,23 +136,6 @@
     }
   }
 
-  .dbv-kit-button--ghost {
-    --dbv-kit-btn-foreground: var(--dbv-kit-btn-ghost-foreground);
-    --dbv-kit-btn-foreground-hover: var(--dbv-kit-btn-ghost-foreground-hover);
-    --dbv-kit-btn-foreground-active: var(--dbv-kit-btn-ghost-foreground-active);
-
-    --dbv-kit-btn-background: var(--dbv-kit-btn-ghost-background);
-    --dbv-kit-btn-background-hover: var(--dbv-kit-btn-ghost-background-hover);
-    --dbv-kit-btn-background-active: var(--dbv-kit-btn-ghost-background-active);
-    --dbv-kit-btn-border-color: var(--dbv-kit-btn-ghost-border-color);
-
-    --dbv-kit-btn-loader-color: var(--dbv-kit-btn-ghost-foreground);
-
-    &:disabled {
-      color: var(--dbv-kit-control-disabled-foreground);
-    }
-  }
-
   /* ---------------------------- */
   /* Loader */
 
@@ -175,10 +158,6 @@
   /* ---------------------------- */
   /* Icon */
 
-  .dbv-kit-button:disabled .dbv-kit-button__icon {
-    opacity: 0.5;
-  }
-
   .dbv-kit-button__icon {
     display: flex;
     align-items: center;

common-react/@dbeaver/ui-kit/src/Button/Button.tsx

@@ -12,7 +12,7 @@ import { ButtonRoot, type ButtonRootProps } from './ButtonRoot.js';
 import './Button.css';
 
 export interface ButtonProps extends ButtonRootProps {
-  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+  variant?: 'primary' | 'secondary' | 'danger';
   size?: ControlSize;
 }
 

common-react/@dbeaver/ui-kit/src/Button/ButtonRoot.css

@@ -19,7 +19,6 @@
     justify-content: center;
     align-items: center;
     white-space: nowrap;
-    height: 100%;
     transition: opacity 0.2s ease-in-out;
     gap: var(--dbv-kit-btn-gap);
   }

common-react/@dbeaver/ui-kit/src/Button/_variants.css

@@ -27,15 +27,5 @@
     --dbv-kit-btn-danger-background-active: var(--tw-color-red-800);
     --dbv-kit-btn-danger-border-color: transparent;
     --dbv-kit-btn-danger-color-outline: var(--tw-color-red-300);
-
-    /* Ghost Button */
-    --dbv-kit-btn-ghost-foreground: var(--dbv-kit-color-primary-600);
-    --dbv-kit-btn-ghost-foreground-hover: var(--dbv-kit-color-primary-600);
-    --dbv-kit-btn-ghost-foreground-active: var(--dbv-kit-color-primary-600);
-    --dbv-kit-btn-ghost-background: transparent;
-    --dbv-kit-btn-ghost-background-hover: var(--dbv-kit-color-primary-50);
-    --dbv-kit-btn-ghost-background-active: var(--dbv-kit-color-primary-100);
-    --dbv-kit-btn-ghost-border-color: transparent;
-    --dbv-kit-btn-ghost-border-color-hover: var(--dbv-kit-color-primary-600);
   }
 }

common-react/@dbeaver/ui-kit/src/Checkbox/Checkbox.css

@@ -47,15 +47,12 @@
     outline-offset: var(--dbv-kit-control-outline-offset);
     outline-width: var(--dbv-kit-control-outline-width);
     outline-color: var(--dbv-kit-control-outline-color);
+    transition-property: stroke-dashoffset;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
     stroke-dasharray: 20;
     stroke-dashoffset: 20;
 
-    @media (prefers-reduced-motion: no-preference) {
-      transition-property: stroke-dashoffset;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      transition-duration: 150ms;
-    }
-
     &[data-focus-visible] {
       outline-style: solid;
     }

common-react/@dbeaver/ui-kit/src/ComponentProvider.ts

@@ -1,11 +1,3 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
- *
- * Licensed under the Apache License, Version 2.0.
- * you may not use this file except in compliance with the License.
- */
-
 import { createContext } from 'react';
 import type { ButtonBase, ButtonBaseIcon } from './Button/Button.js';
 import type { IconButtonBase } from './IconButton/IconButton.js';
@@ -15,14 +7,12 @@ import type { InputBase } from './Input/Input.js';
 import type { RadioGroup } from './Radio/RadioGroup.js';
 import type { Select } from './Select/Select.js';
 import type { SelectField } from './Select/SelectField.js';
-import type { ColorPickerBase } from './ColorPicker/ColorPickerBase.js';
 
 export interface IComponentProvider {
   Button?: typeof ButtonBase;
   ButtonIcon?: typeof ButtonBaseIcon;
   IconButton?: typeof IconButtonBase;
   Input?: typeof InputBase;
-  ColorPicker?: typeof ColorPickerBase;
   Checkbox?: typeof CheckboxBase;
   Radio?: typeof Radio;
   RadioGroup?: typeof RadioGroup;

common-react/@dbeaver/ui-kit/src/IconButton/IconButton.css

@@ -20,7 +20,7 @@
     cursor: pointer;
 
     &:focus-visible,
-    &[data-focus-visible='true'] {
+    &[data-focus-visible] {
       outline: var(--dbv-kit-icon-btn-outline-width) solid var(--dbv-kit-icon-btn-outline-color);
       outline-offset: var(--dbv-kit-icon-btn-outline-offset);
     }
@@ -33,7 +33,7 @@
     }
 
     &:active,
-    &[data-active='true'] {
+    &[data-active] {
       color: var(--dbv-kit-icon-btn-foreground-active);
       background-color: var(--dbv-kit-icon-btn-background-active);
     }

common-react/@dbeaver/ui-kit/src/Input/Input.css

@@ -63,12 +63,6 @@
     --dbv-kit-input-font-size: var(--dbv-kit-input-small-font-size);
   }
 
-  .dbv-kit-input--medium {
-    --dbv-kit-input-height: var(--dbv-kit-input-medium-height);
-    --dbv-kit-input-padding: var(--dbv-kit-input-medium-padding);
-    --dbv-kit-input-font-size: var(--dbv-kit-input-medium-font-size);
-  }
-
   .dbv-kit-input--large {
     --dbv-kit-input-height: var(--dbv-kit-input-large-height);
     --dbv-kit-input-padding: var(--dbv-kit-input-large-padding);