ydb-ui-components 4.6.0 → 5.0.0

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

@@ -1,11 +1,13 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmptyView = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const cn_1 = require("../../../utils/cn");
 const TreeView_1 = require("../../TreeView/TreeView");
-const i18n_1 = tslib_1.__importDefault(require("../i18n"));
+const i18n_1 = __importDefault(require("../i18n"));
 require("./EmptyView.css");
 const b = (0, cn_1.block)('ydb-navigation-tree-view-empty');
 function EmptyView({ level }) {

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

@@ -1,11 +1,13 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorView = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const cn_1 = require("../../../utils/cn");
 const TreeView_1 = require("../../TreeView/TreeView");
-const i18n_1 = tslib_1.__importDefault(require("../i18n"));
+const i18n_1 = __importDefault(require("../i18n"));
 require("./ErrorView.css");
 const b = (0, cn_1.block)('ydb-navigation-tree-view-error');
 function ErrorView({ level }) {

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/NavigationTree.js

@@ -1,10 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavigationTree = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const react_list_1 = tslib_1.__importDefault(require("react-list"));
+const react_1 = __importDefault(require("react"));
+const react_list_1 = __importDefault(require("react-list"));
 const EmptyView_1 = require("./EmptyView/EmptyView");
 const ErrorView_1 = require("./ErrorView/ErrorView");
 const LoaderView_1 = require("./LoaderView/LoaderView");

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

@@ -1,9 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavigationTreeNode = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = __importDefault(require("react"));
 const TreeView_1 = require("../TreeView/TreeView");
 const AsyncReplication_1 = require("../icons/AsyncReplication");
 const ColumnTable_1 = require("../icons/ColumnTable");
@@ -84,7 +86,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);
@@ -94,10 +105,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/i18n/index.d.ts

@@ -1,2 +1,6 @@
-declare const _default: (key: "label_error" | "label_empty", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: ((key: "label_error" | "label_empty", params?: import("@gravity-ui/i18n").Params | undefined) => string) & {
+    keysetData: {
+        "ydb-navigation-tree": Record<"label_error" | "label_empty", import("@gravity-ui/i18n").KeyData>;
+    };
+};
 export default _default;

package/build/cjs/components/NavigationTree/i18n/index.js

@@ -1,8 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const i18n_1 = require("@gravity-ui/uikit/i18n");
-const en_json_1 = tslib_1.__importDefault(require("./en.json"));
-const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+const en_json_1 = __importDefault(require("./en.json"));
+const ru_json_1 = __importDefault(require("./ru.json"));
 const COMPONENT = 'ydb-navigation-tree';
 exports.default = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, COMPONENT);

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

@@ -1,4 +1,17 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./NavigationTree"), exports);
+__exportStar(require("./NavigationTree"), exports);

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' | 'transfer' | 'view';
-export interface NavigationTreeDataItem {
+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/TreeView/TreeView.css

@@ -19,7 +19,7 @@
   background-color: var(--g-color-base-simple-hover);
 }
 .ydb-tree-view__item:hover .ydb-tree-view__actions {
-  display: flex;
+  visibility: visible;
 }
 .ydb-tree-view__item_active {
   font-weight: bold;
@@ -53,7 +53,8 @@
   text-overflow: ellipsis;
 }
 .ydb-tree-view__actions {
-  display: none;
+  display: flex;
+  visibility: hidden;
   margin-left: 6px;
   align-items: center;
 }

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

@@ -1,9 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeView = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = __importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../utils/cn");
 require("./TreeView.css");

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

@@ -1,4 +1,17 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./TreeView"), exports);
+__exportStar(require("./TreeView"), exports);

package/build/cjs/index.js

@@ -1,5 +1,18 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./components/NavigationTree"), exports);
-tslib_1.__exportStar(require("./components/TreeView"), exports);
+__exportStar(require("./components/NavigationTree"), exports);
+__exportStar(require("./components/TreeView"), exports);

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

@@ -80,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);
@@ -90,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/i18n/index.d.ts

@@ -1,2 +1,6 @@
-declare const _default: (key: "label_error" | "label_empty", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: ((key: "label_error" | "label_empty", params?: import("@gravity-ui/i18n").Params | undefined) => string) & {
+    keysetData: {
+        "ydb-navigation-tree": Record<"label_error" | "label_empty", import("@gravity-ui/i18n").KeyData>;
+    };
+};
 export default _default;

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' | 'transfer' | 'view';
-export interface NavigationTreeDataItem {
+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/TreeView/TreeView.css

@@ -19,7 +19,7 @@
   background-color: var(--g-color-base-simple-hover);
 }
 .ydb-tree-view__item:hover .ydb-tree-view__actions {
-  display: flex;
+  visibility: visible;
 }
 .ydb-tree-view__item_active {
   font-weight: bold;
@@ -53,7 +53,8 @@
   text-overflow: ellipsis;
 }
 .ydb-tree-view__actions {
-  display: none;
+  display: flex;
+  visibility: hidden;
   margin-left: 6px;
   align-items: center;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-ui-components",
-  "version": "4.6.0",
+  "version": "5.0.0",
   "description": "",
   "license": "MIT",
   "exports": {
@@ -37,7 +37,7 @@
     "lint": "run-p lint:*",
     "prettier": "prettier '**/*.{json,md,yaml,yml}'",
     "typecheck": "tsc --noEmit",
-    "start": "storybook dev -p 7002",
+    "start": "storybook dev -p 7003",
     "prepublishOnly": "npm run build",
     "prepare": "husky"
   },
@@ -57,7 +57,7 @@
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^6.1.1",
+    "@gravity-ui/uikit": "^7.11.0",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^7.6.17",
@@ -85,7 +85,7 @@
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "@gravity-ui/uikit": "^6.0.0",
+    "@gravity-ui/uikit": "^7.0.0",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },