ydb-ui-components 5.2.0 → 5.4.0

package/build/cjs/components/NavigationTree/NavigationTreeNode.js

@@ -34,6 +34,8 @@ function renderIcon(type, collapsed) {
             return (0, jsx_runtime_1.jsx)(icons_1.ExternalTableIcon, {});
         case 'external_data_source':
             return (0, jsx_runtime_1.jsx)(icons_1.ExternalDataSourceIcon, {});
+        case 'streaming_query':
+            return (0, jsx_runtime_1.jsx)(icons_1.StreamingQueryIcon, {});
         case 'view':
             return (0, jsx_runtime_1.jsx)(icons_1.ViewIcon, {});
         case 'resource_pool':

package/build/cjs/components/NavigationTree/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { DropdownMenuItemMixed } from '@gravity-ui/uikit';
-export type NavigationTreeNodeType = 'async_replication' | 'column_table' | 'resource_pool' | 'database' | 'directory' | 'external_data_source' | 'external_table' | 'index_table' | 'index' | 'stream' | 'system_table' | 'table' | 'topic' | 'transfer' | 'view';
+export type NavigationTreeNodeType = 'async_replication' | 'column_table' | 'resource_pool' | 'database' | 'directory' | 'external_data_source' | 'external_table' | 'index_table' | 'index' | 'stream' | 'system_table' | 'streaming_query' | 'table' | 'topic' | 'transfer' | 'view';
 export interface NavigationTreeDataItem<M = unknown> {
     name: string;
     type: NavigationTreeNodeType;

package/build/cjs/components/TreeView/TreeView.css

@@ -32,6 +32,7 @@
   flex-grow: 1;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   overflow: hidden;
 }
 .ydb-tree-view__icon {
@@ -46,8 +47,12 @@
 .ydb-tree-view__icon svg {
   display: block;
 }
+.ydb-tree-view__label {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
 .ydb-tree-view__text {
-  flex-grow: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

package/build/cjs/components/TreeView/TreeView.js

@@ -35,10 +35,12 @@ function TreeView({ children, name, title, icon, collapsed = true, active = fals
         arrowClassName += ' tree-view_arrow-collapsed';
         containerClassName += ' tree-view_children-collapsed';
     }
+    const tooltipContent = title !== null && title !== void 0 ? title : (typeof name === 'string' ? name : '');
+    const isTooltipDisabled = tooltipContent.trim().length === 0;
     return ((0, jsx_runtime_1.jsx)("div", { className: b(), style: { [TREE_LEVEL_CSS_VAR]: level }, children: (0, jsx_runtime_1.jsxs)("div", { className: "tree-view", children: [(0, jsx_runtime_1.jsxs)("div", { className: `${itemClassName} ${b('item', { active })}`, onClick: handleClick, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: `${arrowClassName} ${b('arrow', {
                                 collapsed,
                                 hidden: !hasArrow,
-                            })}`, disabled: !handleArrowClick, onClick: handleArrowClick }), (0, jsx_runtime_1.jsxs)("div", { className: b('content'), children: [icon && (0, jsx_runtime_1.jsx)("div", { className: b('icon'), children: icon }), (0, jsx_runtime_1.jsx)("div", { className: b('text'), title: title, children: name }), actions && actions.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: b('actions'), children: [additionalNodeElements, (0, jsx_runtime_1.jsx)(uikit_1.DropdownMenu, { onOpenToggle: onActionsOpenToggle, defaultSwitcherProps: {
+                            })}`, disabled: !handleArrowClick, onClick: handleArrowClick }), (0, jsx_runtime_1.jsxs)("div", { className: b('content'), children: [(0, jsx_runtime_1.jsx)(uikit_1.ActionTooltip, { title: tooltipContent, disabled: isTooltipDisabled, children: (0, jsx_runtime_1.jsxs)("div", { className: b('label'), children: [icon && (0, jsx_runtime_1.jsx)("div", { className: b('icon'), children: icon }), (0, jsx_runtime_1.jsx)("div", { className: b('text'), children: name })] }) }), actions && actions.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: b('actions'), children: [additionalNodeElements, (0, jsx_runtime_1.jsx)(uikit_1.DropdownMenu, { onOpenToggle: onActionsOpenToggle, defaultSwitcherProps: {
                                                 view: 'flat-secondary',
                                                 size: 's',
                                                 pin: 'brick-brick',

package/build/cjs/components/icons/StreamingQuery.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function StreamingQueryIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;

package/build/cjs/components/icons/StreamingQuery.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StreamingQueryIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function StreamingQueryIcon(props) {
+    return ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 16 16", fill: "currentColor" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M1.74736 10.2865C3.06151 9.1017 4.5271 8.93752 5.7625 9.14443C6.9676 9.34634 7.98265 9.90421 8.49297 10.1889C9.08861 10.5211 9.83649 10.9101 10.6673 11.0311C11.4608 11.1467 12.3492 11.0208 13.2747 10.2636C13.5952 10.0013 14.068 10.0481 14.3304 10.3685C14.5927 10.6891 14.5454 11.1619 14.2249 11.4242C12.9391 12.4764 11.6157 12.6852 10.451 12.5155C9.32352 12.3513 8.36538 11.8355 7.76201 11.4989C7.2599 11.2188 6.44194 10.7793 5.51445 10.6239C4.61708 10.4736 3.64946 10.5919 2.75225 11.4008C2.44461 11.678 1.97 11.6537 1.69268 11.3461C1.41543 11.0385 1.43991 10.5639 1.74736 10.2865Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M1.74736 4.62734C3.06151 3.44252 4.52711 3.27834 5.7625 3.48525C6.96757 3.68716 7.98264 4.24502 8.49297 4.52968C9.08861 4.86192 9.8365 5.25091 10.6673 5.37196C11.4608 5.48752 12.3492 5.36169 13.2747 4.60439C13.5952 4.34209 14.068 4.38896 14.3304 4.70937C14.5927 5.02991 14.5454 5.50269 14.2249 5.76503C12.9391 6.81728 11.6157 7.02598 10.451 6.85634C9.32352 6.69207 8.36538 6.17629 7.76201 5.83974C7.2599 5.55967 6.44192 5.1201 5.51445 4.96474C4.61709 4.81446 3.64946 4.93275 2.75225 5.74159C2.44461 6.01886 1.97001 5.99449 1.69268 5.68691C1.41547 5.37931 1.43989 4.90468 1.74736 4.62734Z" })] })));
+}
+exports.StreamingQueryIcon = StreamingQueryIcon;

package/build/cjs/components/icons/index.d.ts

@@ -11,3 +11,4 @@ export { TableIndexIcon } from './TableIndex';
 export { TopicIcon } from './Topic';
 export { TransferIcon } from './Transfer';
 export { ViewIcon } from './View';
+export { StreamingQueryIcon } from './StreamingQuery';

package/build/cjs/components/icons/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ViewIcon = exports.TransferIcon = exports.TopicIcon = exports.TableIndexIcon = exports.TableIcon = exports.ResourcePoolIcon = exports.FolderOpenIcon = exports.FolderIcon = exports.ExternalTableIcon = exports.ExternalDataSourceIcon = exports.DatabaseIcon = exports.ColumnTableIcon = exports.AsyncReplicationIcon = void 0;
+exports.StreamingQueryIcon = exports.ViewIcon = exports.TransferIcon = exports.TopicIcon = exports.TableIndexIcon = exports.TableIcon = exports.ResourcePoolIcon = exports.FolderOpenIcon = exports.FolderIcon = exports.ExternalTableIcon = exports.ExternalDataSourceIcon = exports.DatabaseIcon = exports.ColumnTableIcon = exports.AsyncReplicationIcon = void 0;
 var AsyncReplication_1 = require("./AsyncReplication");
 Object.defineProperty(exports, "AsyncReplicationIcon", { enumerable: true, get: function () { return AsyncReplication_1.AsyncReplicationIcon; } });
 var ColumnTable_1 = require("./ColumnTable");
@@ -27,3 +27,5 @@ var Transfer_1 = require("./Transfer");
 Object.defineProperty(exports, "TransferIcon", { enumerable: true, get: function () { return Transfer_1.TransferIcon; } });
 var View_1 = require("./View");
 Object.defineProperty(exports, "ViewIcon", { enumerable: true, get: function () { return View_1.ViewIcon; } });
+var StreamingQuery_1 = require("./StreamingQuery");
+Object.defineProperty(exports, "StreamingQueryIcon", { enumerable: true, get: function () { return StreamingQuery_1.StreamingQueryIcon; } });

package/build/esm/components/NavigationTree/NavigationTreeNode.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { TreeView } from '../TreeView/TreeView';
-import { AsyncReplicationIcon, ColumnTableIcon, DatabaseIcon, ExternalDataSourceIcon, ExternalTableIcon, FolderIcon, FolderOpenIcon, ResourcePoolIcon, TableIcon, TableIndexIcon, TopicIcon, TransferIcon, ViewIcon, } from '../icons';
+import { AsyncReplicationIcon, ColumnTableIcon, DatabaseIcon, ExternalDataSourceIcon, ExternalTableIcon, FolderIcon, FolderOpenIcon, ResourcePoolIcon, StreamingQueryIcon, TableIcon, TableIndexIcon, TopicIcon, TransferIcon, ViewIcon, } from '../icons';
 import { NavigationTreeActionType } from './state';
 function renderIcon(type, collapsed) {
     switch (type) {
@@ -28,6 +28,8 @@ function renderIcon(type, collapsed) {
             return _jsx(ExternalTableIcon, {});
         case 'external_data_source':
             return _jsx(ExternalDataSourceIcon, {});
+        case 'streaming_query':
+            return _jsx(StreamingQueryIcon, {});
         case 'view':
             return _jsx(ViewIcon, {});
         case 'resource_pool':

package/build/esm/components/NavigationTree/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { DropdownMenuItemMixed } from '@gravity-ui/uikit';
-export type NavigationTreeNodeType = 'async_replication' | 'column_table' | 'resource_pool' | 'database' | 'directory' | 'external_data_source' | 'external_table' | 'index_table' | 'index' | 'stream' | 'system_table' | 'table' | 'topic' | 'transfer' | 'view';
+export type NavigationTreeNodeType = 'async_replication' | 'column_table' | 'resource_pool' | 'database' | 'directory' | 'external_data_source' | 'external_table' | 'index_table' | 'index' | 'stream' | 'system_table' | 'streaming_query' | 'table' | 'topic' | 'transfer' | 'view';
 export interface NavigationTreeDataItem<M = unknown> {
     name: string;
     type: NavigationTreeNodeType;

package/build/esm/components/TreeView/TreeView.css

@@ -32,6 +32,7 @@
   flex-grow: 1;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   overflow: hidden;
 }
 .ydb-tree-view__icon {
@@ -46,8 +47,12 @@
 .ydb-tree-view__icon svg {
   display: block;
 }
+.ydb-tree-view__label {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
 .ydb-tree-view__text {
-  flex-grow: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

package/build/esm/components/TreeView/TreeView.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { DropdownMenu } from '@gravity-ui/uikit';
+import { ActionTooltip, DropdownMenu } from '@gravity-ui/uikit';
 import { block } from '../../utils/cn';
 import './TreeView.css';
 const TREE_LEVEL_CSS_VAR = '--ydb-tree-view-level';
@@ -29,10 +29,12 @@ export function TreeView({ children, name, title, icon, collapsed = true, active
         arrowClassName += ' tree-view_arrow-collapsed';
         containerClassName += ' tree-view_children-collapsed';
     }
+    const tooltipContent = title !== null && title !== void 0 ? title : (typeof name === 'string' ? name : '');
+    const isTooltipDisabled = tooltipContent.trim().length === 0;
     return (_jsx("div", { className: b(), style: { [TREE_LEVEL_CSS_VAR]: level }, children: _jsxs("div", { className: "tree-view", children: [_jsxs("div", { className: `${itemClassName} ${b('item', { active })}`, onClick: handleClick, children: [_jsx("button", { type: "button", className: `${arrowClassName} ${b('arrow', {
                                 collapsed,
                                 hidden: !hasArrow,
-                            })}`, disabled: !handleArrowClick, onClick: handleArrowClick }), _jsxs("div", { className: b('content'), children: [icon && _jsx("div", { className: b('icon'), children: icon }), _jsx("div", { className: b('text'), title: title, children: name }), actions && actions.length > 0 && (_jsxs("div", { className: b('actions'), children: [additionalNodeElements, _jsx(DropdownMenu, { onOpenToggle: onActionsOpenToggle, defaultSwitcherProps: {
+                            })}`, disabled: !handleArrowClick, onClick: handleArrowClick }), _jsxs("div", { className: b('content'), children: [_jsx(ActionTooltip, { title: tooltipContent, disabled: isTooltipDisabled, children: _jsxs("div", { className: b('label'), children: [icon && _jsx("div", { className: b('icon'), children: icon }), _jsx("div", { className: b('text'), children: name })] }) }), actions && actions.length > 0 && (_jsxs("div", { className: b('actions'), children: [additionalNodeElements, _jsx(DropdownMenu, { onOpenToggle: onActionsOpenToggle, defaultSwitcherProps: {
                                                 view: 'flat-secondary',
                                                 size: 's',
                                                 pin: 'brick-brick',

package/build/esm/components/icons/StreamingQuery.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function StreamingQueryIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;

package/build/esm/components/icons/StreamingQuery.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+export function StreamingQueryIcon(props) {
+    return (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 16 16", fill: "currentColor" }, props, { children: [_jsx("path", { d: "M1.74736 10.2865C3.06151 9.1017 4.5271 8.93752 5.7625 9.14443C6.9676 9.34634 7.98265 9.90421 8.49297 10.1889C9.08861 10.5211 9.83649 10.9101 10.6673 11.0311C11.4608 11.1467 12.3492 11.0208 13.2747 10.2636C13.5952 10.0013 14.068 10.0481 14.3304 10.3685C14.5927 10.6891 14.5454 11.1619 14.2249 11.4242C12.9391 12.4764 11.6157 12.6852 10.451 12.5155C9.32352 12.3513 8.36538 11.8355 7.76201 11.4989C7.2599 11.2188 6.44194 10.7793 5.51445 10.6239C4.61708 10.4736 3.64946 10.5919 2.75225 11.4008C2.44461 11.678 1.97 11.6537 1.69268 11.3461C1.41543 11.0385 1.43991 10.5639 1.74736 10.2865Z" }), _jsx("path", { d: "M1.74736 4.62734C3.06151 3.44252 4.52711 3.27834 5.7625 3.48525C6.96757 3.68716 7.98264 4.24502 8.49297 4.52968C9.08861 4.86192 9.8365 5.25091 10.6673 5.37196C11.4608 5.48752 12.3492 5.36169 13.2747 4.60439C13.5952 4.34209 14.068 4.38896 14.3304 4.70937C14.5927 5.02991 14.5454 5.50269 14.2249 5.76503C12.9391 6.81728 11.6157 7.02598 10.451 6.85634C9.32352 6.69207 8.36538 6.17629 7.76201 5.83974C7.2599 5.55967 6.44192 5.1201 5.51445 4.96474C4.61709 4.81446 3.64946 4.93275 2.75225 5.74159C2.44461 6.01886 1.97001 5.99449 1.69268 5.68691C1.41547 5.37931 1.43989 4.90468 1.74736 4.62734Z" })] })));
+}

package/build/esm/components/icons/index.d.ts

@@ -11,3 +11,4 @@ export { TableIndexIcon } from './TableIndex';
 export { TopicIcon } from './Topic';
 export { TransferIcon } from './Transfer';
 export { ViewIcon } from './View';
+export { StreamingQueryIcon } from './StreamingQuery';

package/build/esm/components/icons/index.js

@@ -11,3 +11,4 @@ export { TableIndexIcon } from './TableIndex';
 export { TopicIcon } from './Topic';
 export { TransferIcon } from './Transfer';
 export { ViewIcon } from './View';
+export { StreamingQueryIcon } from './StreamingQuery';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-ui-components",
-  "version": "5.2.0",
+  "version": "5.4.0",
   "description": "",
   "license": "MIT",
   "exports": {