ydb-ui-components 4.5.0 → 4.7.0

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { NavigationTreeProps } from './types';
 export type { NavigationTreeProps };
-export declare function NavigationTree({ rootState: partialRootState, fetchPath, getActions, renderAdditionalNodeElements, activePath, onActionsOpenToggle, onActivePathUpdate, cache, virtualize, }: NavigationTreeProps): JSX.Element;
+export declare function NavigationTree<D = any, M = any>({ rootState: partialRootState, fetchPath, getActions, renderAdditionalNodeElements, activePath, onActionsOpenToggle, onActivePathUpdate, cache, virtualize, }: NavigationTreeProps<D, M>): JSX.Element;

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

@@ -16,12 +16,15 @@ const Index_1 = require("../icons/Index");
 const ResourcePool_1 = require("../icons/ResourcePool");
 const Table_1 = require("../icons/Table");
 const Topic_1 = require("../icons/Topic");
+const Transfer_1 = require("../icons/Transfer");
 const View_1 = require("../icons/View");
 const state_1 = require("./state");
 function renderIcon(type, collapsed) {
     switch (type) {
         case 'async_replication':
             return (0, jsx_runtime_1.jsx)(AsyncReplication_1.AsyncReplicationIcon, { height: 16 });
+        case 'transfer':
+            return (0, jsx_runtime_1.jsx)(Transfer_1.TransferIcon, { height: 16 });
         case 'database':
             // this icon is larger than the others, therefore 14 for a better fit
             return (0, jsx_runtime_1.jsx)(Database_1.DatabaseIcon, { height: 14 });
@@ -81,7 +84,16 @@ function NavigationTreeNode({ path, fetchPath, activePath, state, level, dispatc
                 payload: { path, error },
             });
         });
-    }, [nodeState.collapsed]);
+    }, [
+        activePath,
+        cache,
+        dispatch,
+        fetchPath,
+        nodeState.collapsed,
+        nodeState.loaded,
+        nodeState.loading,
+        path,
+    ]);
     const handleClick = react_1.default.useCallback(() => {
         if (onActivate) {
             onActivate(path);
@@ -91,10 +103,10 @@ function NavigationTreeNode({ path, fetchPath, activePath, state, level, dispatc
         dispatch({ type: state_1.NavigationTreeActionType.ToggleCollapsed, payload: { path } });
     }, [dispatch, path]);
     const additionalNodeElements = react_1.default.useMemo(() => {
-        return renderAdditionalNodeElements === null || renderAdditionalNodeElements === void 0 ? void 0 : renderAdditionalNodeElements(nodeState.path, nodeState.type);
+        return renderAdditionalNodeElements === null || renderAdditionalNodeElements === void 0 ? void 0 : renderAdditionalNodeElements(nodeState.path, nodeState.type, nodeState.meta);
     }, [renderAdditionalNodeElements, nodeState]);
     const actions = react_1.default.useMemo(() => {
-        return getActions === null || getActions === void 0 ? void 0 : getActions(nodeState.path, nodeState.type);
+        return getActions === null || getActions === void 0 ? void 0 : getActions(nodeState.path, nodeState.type, nodeState.meta);
     }, [getActions, nodeState]);
     const handleActionsOpenToggle = react_1.default.useCallback((isOpen) => {
         onActionsOpenToggle === null || onActionsOpenToggle === void 0 ? void 0 : onActionsOpenToggle({

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

@@ -1,11 +1,12 @@
 /// <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' | 'table' | 'topic' | 'view';
-export interface NavigationTreeDataItem {
+export type NavigationTreeNodeType = 'async_replication' | 'column_table' | 'resource_pool' | 'database' | 'directory' | 'external_data_source' | 'external_table' | 'index_table' | 'index' | 'stream' | 'table' | 'topic' | 'transfer' | 'view';
+export interface NavigationTreeDataItem<M = unknown> {
     name: string;
     type: NavigationTreeNodeType;
     /** determined by type by default */
     expandable?: boolean;
+    meta?: M;
 }
 export interface NavigationTreeState {
     [path: string]: NavigationTreeNodeState;
@@ -22,6 +23,7 @@ export interface NavigationTreeNodeState {
     error: boolean;
     children: string[];
     level?: number;
+    meta?: unknown;
 }
 export interface NavigationTreeServiceNode {
     path: string;
@@ -29,16 +31,16 @@ export interface NavigationTreeServiceNode {
     level?: number;
 }
 export type NavigationTreeNodePartialState = Omit<NavigationTreeNodeState, 'loading' | 'loaded' | 'error' | 'children'>;
-export interface NavigationTreeProps<D = any> {
+export interface NavigationTreeProps<D = any, M = any> {
     rootState: NavigationTreeNodePartialState;
-    fetchPath: (path: string) => Promise<NavigationTreeDataItem[]>;
+    fetchPath: (path: string) => Promise<NavigationTreeDataItem<M>[]>;
     onActionsOpenToggle?: (args: {
         path: string;
         type: NavigationTreeNodeType;
         isOpen: boolean;
     }) => void;
-    getActions?: (path: string, type: NavigationTreeNodeType) => DropdownMenuItemMixed<D>[];
-    renderAdditionalNodeElements?: (path: string, type: NavigationTreeNodeType) => JSX.Element | undefined;
+    getActions?: (path: string, type: NavigationTreeNodeType, meta: M) => DropdownMenuItemMixed<D>[];
+    renderAdditionalNodeElements?: (path: string, type: NavigationTreeNodeType, meta: M) => JSX.Element | undefined;
     activePath?: string;
     onActivePathUpdate?: (activePath: string) => void;
     cache?: boolean;

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

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

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransferIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function TransferIcon(props) {
+    return ((0, jsx_runtime_1.jsx)("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor" }, props, { children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.22 15.03s-.001 0 0 0a.75.75 0 0 0 1.06-1.06l-.47-.47H10a3.016 3.016 0 0 0 1.507-.405A2.999 2.999 0 0 0 13 10.5V7.896h.003a2.735 2.735 0 0 0 .785-.366 2.75 2.75 0 1 0-2.288.366V10.5A1.5 1.5 0 0 1 10 12h-.19l.47-.47s0 .001 0 0a.75.75 0 0 0-1.06-1.06l-.47.47-1.28 1.28a.75.75 0 0 0 0 1.06l1.75 1.75ZM5.72 2.97a.75.75 0 0 1 1.06 0l.47.47 1.28 1.28a.748.748 0 0 1 0 1.06L6.78 7.53c.001 0 0 0 0 0a.751.751 0 0 1-1.06-1.06L6.19 6H6a1.5 1.5 0 0 0-1.5 1.5v2.604a2.757 2.757 0 0 1 2 2.646 2.738 2.738 0 0 1-1.212 2.28 2.737 2.737 0 0 1-1.538.47A2.747 2.747 0 0 1 1 12.75a2.751 2.751 0 0 1 2-2.646V7.5a2.999 2.999 0 0 1 3-3h.19l-.47-.47a.75.75 0 0 1 0-1.06Zm-.908 9.121A1.246 1.246 0 0 1 5 12.75a1.25 1.25 0 1 1-.188-.659ZM11 5.25a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0Z" }) })));
+}
+exports.TransferIcon = TransferIcon;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { NavigationTreeProps } from './types';
 export type { NavigationTreeProps };
-export declare function NavigationTree({ rootState: partialRootState, fetchPath, getActions, renderAdditionalNodeElements, activePath, onActionsOpenToggle, onActivePathUpdate, cache, virtualize, }: NavigationTreeProps): JSX.Element;
+export declare function NavigationTree<D = any, M = any>({ rootState: partialRootState, fetchPath, getActions, renderAdditionalNodeElements, activePath, onActionsOpenToggle, onActivePathUpdate, cache, virtualize, }: NavigationTreeProps<D, M>): JSX.Element;

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

@@ -12,12 +12,15 @@ import { IndexIcon } from '../icons/Index';
 import { ResourcePoolIcon } from '../icons/ResourcePool';
 import { TableIcon } from '../icons/Table';
 import { TopicIcon } from '../icons/Topic';
+import { TransferIcon } from '../icons/Transfer';
 import { ViewIcon } from '../icons/View';
 import { NavigationTreeActionType } from './state';
 function renderIcon(type, collapsed) {
     switch (type) {
         case 'async_replication':
             return _jsx(AsyncReplicationIcon, { height: 16 });
+        case 'transfer':
+            return _jsx(TransferIcon, { height: 16 });
         case 'database':
             // this icon is larger than the others, therefore 14 for a better fit
             return _jsx(DatabaseIcon, { height: 14 });
@@ -77,7 +80,16 @@ export function NavigationTreeNode({ path, fetchPath, activePath, state, level,
                 payload: { path, error },
             });
         });
-    }, [nodeState.collapsed]);
+    }, [
+        activePath,
+        cache,
+        dispatch,
+        fetchPath,
+        nodeState.collapsed,
+        nodeState.loaded,
+        nodeState.loading,
+        path,
+    ]);
     const handleClick = React.useCallback(() => {
         if (onActivate) {
             onActivate(path);
@@ -87,10 +99,10 @@ export function NavigationTreeNode({ path, fetchPath, activePath, state, level,
         dispatch({ type: NavigationTreeActionType.ToggleCollapsed, payload: { path } });
     }, [dispatch, path]);
     const additionalNodeElements = React.useMemo(() => {
-        return renderAdditionalNodeElements === null || renderAdditionalNodeElements === void 0 ? void 0 : renderAdditionalNodeElements(nodeState.path, nodeState.type);
+        return renderAdditionalNodeElements === null || renderAdditionalNodeElements === void 0 ? void 0 : renderAdditionalNodeElements(nodeState.path, nodeState.type, nodeState.meta);
     }, [renderAdditionalNodeElements, nodeState]);
     const actions = React.useMemo(() => {
-        return getActions === null || getActions === void 0 ? void 0 : getActions(nodeState.path, nodeState.type);
+        return getActions === null || getActions === void 0 ? void 0 : getActions(nodeState.path, nodeState.type, nodeState.meta);
     }, [getActions, nodeState]);
     const handleActionsOpenToggle = React.useCallback((isOpen) => {
         onActionsOpenToggle === null || onActionsOpenToggle === void 0 ? void 0 : onActionsOpenToggle({

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

@@ -1,11 +1,12 @@
 /// <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' | 'table' | 'topic' | 'view';
-export interface NavigationTreeDataItem {
+export type NavigationTreeNodeType = 'async_replication' | 'column_table' | 'resource_pool' | 'database' | 'directory' | 'external_data_source' | 'external_table' | 'index_table' | 'index' | 'stream' | 'table' | 'topic' | 'transfer' | 'view';
+export interface NavigationTreeDataItem<M = unknown> {
     name: string;
     type: NavigationTreeNodeType;
     /** determined by type by default */
     expandable?: boolean;
+    meta?: M;
 }
 export interface NavigationTreeState {
     [path: string]: NavigationTreeNodeState;
@@ -22,6 +23,7 @@ export interface NavigationTreeNodeState {
     error: boolean;
     children: string[];
     level?: number;
+    meta?: unknown;
 }
 export interface NavigationTreeServiceNode {
     path: string;
@@ -29,16 +31,16 @@ export interface NavigationTreeServiceNode {
     level?: number;
 }
 export type NavigationTreeNodePartialState = Omit<NavigationTreeNodeState, 'loading' | 'loaded' | 'error' | 'children'>;
-export interface NavigationTreeProps<D = any> {
+export interface NavigationTreeProps<D = any, M = any> {
     rootState: NavigationTreeNodePartialState;
-    fetchPath: (path: string) => Promise<NavigationTreeDataItem[]>;
+    fetchPath: (path: string) => Promise<NavigationTreeDataItem<M>[]>;
     onActionsOpenToggle?: (args: {
         path: string;
         type: NavigationTreeNodeType;
         isOpen: boolean;
     }) => void;
-    getActions?: (path: string, type: NavigationTreeNodeType) => DropdownMenuItemMixed<D>[];
-    renderAdditionalNodeElements?: (path: string, type: NavigationTreeNodeType) => JSX.Element | undefined;
+    getActions?: (path: string, type: NavigationTreeNodeType, meta: M) => DropdownMenuItemMixed<D>[];
+    renderAdditionalNodeElements?: (path: string, type: NavigationTreeNodeType, meta: M) => JSX.Element | undefined;
     activePath?: string;
     onActivePathUpdate?: (activePath: string) => void;
     cache?: boolean;

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

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+export function TransferIcon(props) {
+    return (_jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor" }, props, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.22 15.03s-.001 0 0 0a.75.75 0 0 0 1.06-1.06l-.47-.47H10a3.016 3.016 0 0 0 1.507-.405A2.999 2.999 0 0 0 13 10.5V7.896h.003a2.735 2.735 0 0 0 .785-.366 2.75 2.75 0 1 0-2.288.366V10.5A1.5 1.5 0 0 1 10 12h-.19l.47-.47s0 .001 0 0a.75.75 0 0 0-1.06-1.06l-.47.47-1.28 1.28a.75.75 0 0 0 0 1.06l1.75 1.75ZM5.72 2.97a.75.75 0 0 1 1.06 0l.47.47 1.28 1.28a.748.748 0 0 1 0 1.06L6.78 7.53c.001 0 0 0 0 0a.751.751 0 0 1-1.06-1.06L6.19 6H6a1.5 1.5 0 0 0-1.5 1.5v2.604a2.757 2.757 0 0 1 2 2.646 2.738 2.738 0 0 1-1.212 2.28 2.737 2.737 0 0 1-1.538.47A2.747 2.747 0 0 1 1 12.75a2.751 2.751 0 0 1 2-2.646V7.5a2.999 2.999 0 0 1 3-3h.19l-.47-.47a.75.75 0 0 1 0-1.06Zm-.908 9.121A1.246 1.246 0 0 1 5 12.75a1.25 1.25 0 1 1-.188-.659ZM11 5.25a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0Z" }) })));
+}

package/package.json

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