ydb-ui-components 2.2.0 → 2.4.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [2.4.1](https://github.com/ydb-platform/ydb-ui-components/compare/v2.4.0...v2.4.1) (2022-08-02)
+
+
+### Bug Fixes
+
+* **NavigationTree:** add node types & update icons ([909b560](https://github.com/ydb-platform/ydb-ui-components/commit/909b5607b6309cb42401afdb7b869f2a2e8ab908))
+
+## [2.4.0](https://github.com/ydb-platform/ydb-ui-components/compare/v2.3.0...v2.4.0) (2022-07-28)
+
+
+### Features
+
+* **NavigationTree:** virtualized render ([7388ff5](https://github.com/ydb-platform/ydb-ui-components/commit/7388ff5a5b05ffa30b86fb4ae2d8e52a7bd9dad8))
+* **TreeView:** a prop to determine tree view nesting level ([2e5d42a](https://github.com/ydb-platform/ydb-ui-components/commit/2e5d42abf78e81fdd61747958822dc3b96eab42f))
+
+## [2.3.0](https://github.com/ydb-platform/ydb-ui-components/compare/v2.2.0...v2.3.0) (2022-07-18)
+
+
+### Features
+
+* **i18n:** add configure function ([c48e58e](https://github.com/ydb-platform/ydb-ui-components/commit/c48e58e33e361cf4f507190cd0a8d0a896975fb1))
+
 ## [2.2.0](https://github.com/ydb-platform/ydb-ui-components/compare/v2.1.0...v2.2.0) (2022-07-05)
 
 

package/README.md

@@ -1 +1,31 @@
 # ydb-ui-components
+
+A set of React components used in YDB interfaces.
+
+## Install
+
+```shell
+npm install --save-dev ydb-ui-components @yandex-cloud/uikit @yandex-cloud/i18n @yandex-cloud/browserslist-config
+```
+
+## I18N
+
+Some components contain prepared text. For changing language use `configure` function.
+
+**index.js**
+
+```js
+import {configure} from 'ydb-ui-components';
+
+configure({
+  lang: 'en',
+});
+```
+
+## Development
+
+To start the dev storybook
+
+```shell
+npm run start
+```

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

@@ -1,3 +1,7 @@
 /// <reference types="react" />
 import './EmptyView.scss';
-export declare function EmptyView(): JSX.Element;
+interface EmptyViewProps {
+    level?: number;
+}
+export declare function EmptyView({ level }: EmptyViewProps): JSX.Element;
+export {};

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

@@ -19,10 +19,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const b = (0, _bemCnLite.default)('ydb-navigation-tree-view-empty');
 
-function EmptyView() {
+function EmptyView(_ref) {
+  let {
+    level
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_TreeView.TreeView, {
     name: /*#__PURE__*/_react.default.createElement("span", {
       className: b()
-    }, (0, _i18n.default)('label_empty'))
+    }, (0, _i18n.default)('label_empty')),
+    level: level
   });
 }

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

@@ -1,3 +1,7 @@
 /// <reference types="react" />
 import './ErrorView.scss';
-export declare function ErrorView(): JSX.Element;
+interface ErrorViewProps {
+    level?: number;
+}
+export declare function ErrorView({ level }: ErrorViewProps): JSX.Element;
+export {};

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

@@ -19,10 +19,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const b = (0, _bemCnLite.default)('ydb-navigation-tree-view-error');
 
-function ErrorView() {
+function ErrorView(_ref) {
+  let {
+    level
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_TreeView.TreeView, {
     name: /*#__PURE__*/_react.default.createElement("span", {
       className: b()
-    }, (0, _i18n.default)('label_error'))
+    }, (0, _i18n.default)('label_error')),
+    level: level
   });
 }

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

@@ -1,3 +1,7 @@
 /// <reference types="react" />
 import './LoaderView.scss';
-export declare function LoaderView(): JSX.Element;
+interface LoaderViewProps {
+    level?: number;
+}
+export declare function LoaderView({ level }: LoaderViewProps): JSX.Element;
+export {};

package/build/components/NavigationTree/LoaderView/LoaderView.js

@@ -19,12 +19,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const b = (0, _bemCnLite.default)('ydb-navigation-tree-view-loader');
 
-function LoaderView() {
+function LoaderView(_ref) {
+  let {
+    level
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_TreeView.TreeView, {
     name: /*#__PURE__*/_react.default.createElement("div", {
       className: b()
     }, /*#__PURE__*/_react.default.createElement(_uikit.Spin, {
       size: "xs"
-    }))
+    })),
+    level: level
   });
 }

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

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

package/build/components/NavigationTree/NavigationTree.js

@@ -7,14 +7,45 @@ exports.NavigationTree = NavigationTree;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactList = _interopRequireDefault(require("react-list"));
+
 var _state = require("./state");
 
+var _utils = require("./utils");
+
 var _NavigationTreeNode = require("./NavigationTreeNode");
 
-var _NavigationTreeDirectory = require("./NavigationTreeDirectory");
+var _LoaderView = require("./LoaderView/LoaderView");
+
+var _ErrorView = require("./ErrorView/ErrorView");
+
+var _EmptyView = require("./EmptyView/EmptyView");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const renderServiceNode = node => {
+  const key = `${node.path}|${node.status}`;
+
+  if (node.status === 'loading') {
+    return /*#__PURE__*/_react.default.createElement(_LoaderView.LoaderView, {
+      key: key,
+      level: node.level
+    });
+  }
+
+  if (node.status === 'error') {
+    return /*#__PURE__*/_react.default.createElement(_ErrorView.ErrorView, {
+      key: key,
+      level: node.level
+    });
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_EmptyView.EmptyView, {
+    key: key,
+    level: node.level
+  });
+};
+
 function NavigationTree(_ref) {
   let {
     rootState: partialRootState,
@@ -22,29 +53,42 @@ function NavigationTree(_ref) {
     getActions,
     activePath,
     onActivePathUpdate,
-    cache = true
+    cache = true,
+    virtualize = false
   } = _ref;
 
   const [state, dispatch] = _react.default.useReducer(_state.reducer, {
     [partialRootState.path]: (0, _state.getNodeState)(partialRootState)
   });
 
-  const rootState = state[partialRootState.path];
-  return /*#__PURE__*/_react.default.createElement(_NavigationTreeNode.NavigationTreeNode, {
-    path: rootState.path,
-    state: state,
-    dispatch: dispatch,
-    active: rootState.path === activePath,
-    onActivate: onActivePathUpdate,
-    getActions: getActions
-  }, /*#__PURE__*/_react.default.createElement(_NavigationTreeDirectory.NavigationTreeDirectory, {
-    state: state,
-    dispatch: dispatch,
-    path: rootState.path,
-    fetchPath: fetchPath,
-    activePath: activePath,
-    onItemActivate: onActivePathUpdate,
-    getActions: getActions,
-    cache: cache
-  }));
+  const nodesList = _react.default.useMemo(() => (0, _state.selectTreeAsList)(state, partialRootState.path), [state]);
+
+  const renderNode = node => {
+    return /*#__PURE__*/_react.default.createElement(_NavigationTreeNode.NavigationTreeNode, {
+      key: node.path,
+      state: state,
+      path: node.path,
+      activePath: activePath,
+      fetchPath: fetchPath,
+      dispatch: dispatch,
+      onActivate: onActivePathUpdate,
+      getActions: getActions,
+      cache: cache,
+      level: node.level
+    });
+  };
+
+  const renderVirtualizedTree = () => /*#__PURE__*/_react.default.createElement(_reactList.default, {
+    type: "uniform",
+    length: nodesList.length,
+    useStaticSize: true,
+    itemRenderer: index => {
+      const node = nodesList[index];
+      return (0, _utils.isServiceNode)(node) ? renderServiceNode(node) : renderNode(node);
+    }
+  });
+
+  const renderSimpleTree = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, nodesList.map(node => (0, _utils.isServiceNode)(node) ? renderServiceNode(node) : renderNode(node)));
+
+  return virtualize ? renderVirtualizedTree() : renderSimpleTree();
 }

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

@@ -3,11 +3,14 @@ import { NavigationTreeState, NavigationTreeProps } from './types';
 import { NavigationTreeAction } from './state';
 export interface NavigationTreeNodeProps {
     path: string;
+    fetchPath: NavigationTreeProps['fetchPath'];
+    activePath?: string;
     state: NavigationTreeState;
+    level?: number;
     dispatch: React.Dispatch<NavigationTreeAction>;
     children?: React.ReactNode;
-    active?: boolean;
     onActivate?: (path: string) => void;
     getActions?: NavigationTreeProps['getActions'];
+    cache?: boolean;
 }
-export declare function NavigationTreeNode({ path, state, dispatch, children, active, onActivate, getActions, }: NavigationTreeNodeProps): JSX.Element;
+export declare function NavigationTreeNode({ path, fetchPath, activePath, state, level, dispatch, children, onActivate, getActions, cache, }: NavigationTreeNodeProps): JSX.Element;

package/build/components/NavigationTree/NavigationTreeNode.js

@@ -17,6 +17,12 @@ var _FolderOpen = require("../icons/FolderOpen");
 
 var _Table = require("../icons/Table");
 
+var _Topic = require("../icons/Topic");
+
+var _Index = require("../icons/Index");
+
+var _ColumnTable = require("../icons/ColumnTable");
+
 var _TreeView = require("../TreeView/TreeView");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -24,22 +30,37 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function renderIcon(type, collapsed) {
   switch (type) {
     case 'database':
+      // this icon is larger than the others, therefore 14 for a better fit
       return /*#__PURE__*/_react.default.createElement(_Database.DatabaseIcon, {
         height: 14
       });
 
     case 'directory':
-    case 'index':
       return collapsed ? /*#__PURE__*/_react.default.createElement(_Folder.FolderIcon, {
-        height: 14
+        height: 16
       }) : /*#__PURE__*/_react.default.createElement(_FolderOpen.FolderOpenIcon, {
-        height: 14
+        height: 16
+      });
+
+    case 'index':
+      return /*#__PURE__*/_react.default.createElement(_Index.IndexIcon, {
+        height: 16
       });
 
     case 'table':
     case 'index_table':
       return /*#__PURE__*/_react.default.createElement(_Table.TableIcon, {
-        height: 14
+        height: 16
+      });
+
+    case 'column_table':
+      return /*#__PURE__*/_react.default.createElement(_ColumnTable.ColumnTableIcon, {
+        height: 16
+      });
+
+    case 'topic':
+      return /*#__PURE__*/_react.default.createElement(_Topic.TopicIcon, {
+        height: 16
       });
 
     default:
@@ -50,15 +71,62 @@ function renderIcon(type, collapsed) {
 function NavigationTreeNode(_ref) {
   let {
     path,
+    fetchPath,
+    activePath,
     state,
+    level,
     dispatch,
     children,
-    active,
     onActivate,
-    getActions
+    getActions,
+    cache
   } = _ref;
   const nodeState = state[path];
 
+  _react.default.useEffect(() => {
+    if (nodeState.collapsed) {
+      if (!cache) {
+        dispatch({
+          type: _state.NavigationTreeActionType.ResetNode,
+          payload: {
+            path
+          }
+        });
+      }
+
+      return;
+    }
+
+    if (nodeState.loaded || nodeState.loading) {
+      return;
+    }
+
+    dispatch({
+      type: _state.NavigationTreeActionType.StartLoading,
+      payload: {
+        path
+      }
+    });
+    fetchPath(path).then(data => {
+      dispatch({
+        type: _state.NavigationTreeActionType.FinishLoading,
+        payload: {
+          path,
+          activePath,
+          data
+        }
+      });
+    }).catch(error => {
+      dispatch({
+        type: _state.NavigationTreeActionType.FinishLoading,
+        payload: {
+          path,
+          error
+        }
+      });
+    });
+  }, [nodeState.collapsed]);
+
   const handleClick = _react.default.useCallback(() => {
     if (onActivate) {
       onActivate(path);
@@ -82,10 +150,11 @@ function NavigationTreeNode(_ref) {
     name: nodeState.name,
     icon: renderIcon(nodeState.type, nodeState.collapsed),
     collapsed: nodeState.collapsed,
-    active: active,
+    active: nodeState.path === activePath,
     actions: actions,
     hasArrow: nodeState.expandable,
     onClick: handleClick,
-    onArrowClick: handleArrowClick
+    onArrowClick: handleArrowClick,
+    level: level
   }, children);
 }

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

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _i18n = require("../../i18n");
 
+var _utils = require("../../../utils");
+
 var _en = _interopRequireDefault(require("./en.json"));
 
 var _ru = _interopRequireDefault(require("./ru.json"));
@@ -15,9 +17,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const COMPONENT = 'ydb-navigation-tree';
 
-_i18n.i18n.registerKeyset('en', COMPONENT, _en.default);
+_i18n.i18n.registerKeyset(_utils.Lang.En, COMPONENT, _en.default);
 
-_i18n.i18n.registerKeyset('ru', COMPONENT, _ru.default);
+_i18n.i18n.registerKeyset(_utils.Lang.Ru, COMPONENT, _ru.default);
 
 var _default = _i18n.i18n.keyset(COMPONENT);
 

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

@@ -1,8 +1,9 @@
-import { NavigationTreeNodeState, NavigationTreeNodePartialState, NavigationTreeState } from './types';
+import type { NavigationTreeNodeState, NavigationTreeNodePartialState, NavigationTreeState, NavigationTreeServiceNode } from './types';
 export declare enum NavigationTreeActionType {
     ToggleCollapsed = "toggle-collapsed",
     StartLoading = "start-loading",
-    FinishLoading = "finish-loading"
+    FinishLoading = "finish-loading",
+    ResetNode = "reset-node"
 }
 export interface NavigationTreeAction {
     type: NavigationTreeActionType;
@@ -17,3 +18,4 @@ export declare function getDefaultNodeState(): {
 };
 export declare function getNodeState(partialState: NavigationTreeNodePartialState): NavigationTreeNodeState;
 export declare function reducer(state: NavigationTreeState | undefined, action: NavigationTreeAction): NavigationTreeState;
+export declare function selectTreeAsList(state: NavigationTreeState, rootPath: string): (NavigationTreeNodeState | NavigationTreeServiceNode)[];

package/build/components/NavigationTree/state.js

@@ -7,6 +7,9 @@ exports.NavigationTreeActionType = void 0;
 exports.getDefaultNodeState = getDefaultNodeState;
 exports.getNodeState = getNodeState;
 exports.reducer = reducer;
+exports.selectTreeAsList = selectTreeAsList;
+
+var _utils = require("./utils");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -21,6 +24,7 @@ exports.NavigationTreeActionType = NavigationTreeActionType;
   NavigationTreeActionType["ToggleCollapsed"] = "toggle-collapsed";
   NavigationTreeActionType["StartLoading"] = "start-loading";
   NavigationTreeActionType["FinishLoading"] = "finish-loading";
+  NavigationTreeActionType["ResetNode"] = "reset-node";
 })(NavigationTreeActionType || (exports.NavigationTreeActionType = NavigationTreeActionType = {}));
 
 function getDefaultNodeState() {
@@ -99,7 +103,27 @@ function reducer() {
         return newState;
       }
 
+    case NavigationTreeActionType.ResetNode:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        [action.payload.path]: _objectSpread(_objectSpread({}, state[action.payload.path]), getDefaultNodeState())
+      });
+
     default:
       return state;
   }
+}
+
+function selectTreeAsList(state, rootPath) {
+  const list = [];
+  (0, _utils.traverseDFS)(state, rootPath, (node, level) => {
+    list.push(_objectSpread(_objectSpread({}, node), {}, {
+      level
+    }));
+    const serviceNode = (0, _utils.getServiceNode)(node, level);
+
+    if (serviceNode) {
+      list.push(serviceNode);
+    }
+  });
+  return list;
 }

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

@@ -1,5 +1,5 @@
 import { DropdownMenuItemMixed } from '@yandex-cloud/uikit';
-export declare type NavigationTreeNodeType = 'database' | 'directory' | 'table' | 'index_table' | 'index';
+export declare type NavigationTreeNodeType = 'database' | 'directory' | 'table' | 'column_table' | 'index_table' | 'index' | 'topic';
 export interface NavigationTreeDataItem {
     name: string;
     type: NavigationTreeNodeType;
@@ -20,6 +20,12 @@ export interface NavigationTreeNodeState {
     loaded: boolean;
     error: boolean;
     children: string[];
+    level?: number;
+}
+export interface NavigationTreeServiceNode {
+    path: string;
+    status: 'loading' | 'error' | 'empty';
+    level?: number;
 }
 export declare type NavigationTreeNodePartialState = Omit<NavigationTreeNodeState, 'loading' | 'loaded' | 'error' | 'children'>;
 export interface NavigationTreeProps<D = any> {
@@ -29,4 +35,5 @@ export interface NavigationTreeProps<D = any> {
     activePath?: string;
     onActivePathUpdate?: (activePath: string) => void;
     cache?: boolean;
+    virtualize?: boolean;
 }

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

@@ -0,0 +1,6 @@
+import type { NavigationTreeNodeState, NavigationTreeServiceNode, NavigationTreeState } from './types';
+export declare function isServiceNode(node: NavigationTreeNodeState | NavigationTreeServiceNode): node is NavigationTreeServiceNode;
+export declare function getServiceNode(node: NavigationTreeNodeState, level: number): NavigationTreeServiceNode | void;
+declare type TraverseDFSVisit = (node: NavigationTreeNodeState, level: number, path: string, state: NavigationTreeState) => void;
+export declare function traverseDFS(state: NavigationTreeState, path: string, visit: TraverseDFSVisit, level?: number): void;
+export {};

package/build/components/NavigationTree/utils.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getServiceNode = getServiceNode;
+exports.isServiceNode = isServiceNode;
+exports.traverseDFS = traverseDFS;
+
+function isServiceNode(node) {
+  return 'status' in node;
+}
+
+function getServiceNode(node, level) {
+  if (node.collapsed) {
+    return undefined;
+  }
+
+  if (node.loading) {
+    return {
+      path: node.path,
+      status: 'loading',
+      level: level + 1
+    };
+  }
+
+  if (node.error) {
+    return {
+      path: node.path,
+      status: 'error',
+      level: level + 1
+    };
+  }
+
+  if (node.loaded && node.children.length === 0) {
+    return {
+      path: node.path,
+      status: 'empty',
+      level: level + 1
+    };
+  }
+
+  return undefined;
+}
+
+function traverseDFS(state, path, visit) {
+  let level = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  const currentNode = state[path];
+
+  if (!currentNode) {
+    return;
+  }
+
+  visit(currentNode, level, path, state);
+
+  if (currentNode.collapsed) {
+    return;
+  }
+
+  for (const childPath of currentNode.children) {
+    traverseDFS(state, `${path}/${childPath}`, visit, level + 1);
+  }
+}

package/build/components/TreeView/TreeView.css

@@ -1,4 +1,5 @@
 .ydb-tree-view {
+  --ydb-tree-view-level: 0;
   font-size: 13px;
   line-height: 18px;
 }
@@ -9,6 +10,7 @@
   display: flex;
   align-items: center;
   height: 24px;
+  padding-left: calc(24px * var(--ydb-tree-view-level));
   padding-right: 3px;
   border-bottom: 1px solid var(--yc-color-line-solid);
   cursor: pointer;

package/build/components/TreeView/TreeView.d.ts

@@ -12,5 +12,6 @@ export interface TreeViewProps {
     onArrowClick?: () => void;
     hasArrow?: boolean;
     actions?: DropdownMenuItemMixed<any>[];
+    level?: number;
 }
-export declare function TreeView({ children, name, title, icon, collapsed, active, onClick, onArrowClick, hasArrow, actions, }: TreeViewProps): JSX.Element;
+export declare function TreeView({ children, name, title, icon, collapsed, active, onClick, onArrowClick, hasArrow, actions, level, }: TreeViewProps): JSX.Element;

package/build/components/TreeView/TreeView.js

@@ -17,6 +17,7 @@ require("./TreeView.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const TREE_LEVEL_CSS_VAR = '--ydb-tree-view-level';
 const b = (0, _bemCnLite.default)('ydb-tree-view');
 
 function TreeView(_ref) {
@@ -30,7 +31,8 @@ function TreeView(_ref) {
     onClick,
     onArrowClick,
     hasArrow = false,
-    actions
+    actions,
+    level
   } = _ref;
 
   const rootRef = _react.default.useRef(null);
@@ -82,7 +84,10 @@ function TreeView(_ref) {
     ref: rootRef,
     className: b({
       'no-arrow': !hasArrow
-    })
+    }),
+    style: {
+      [TREE_LEVEL_CSS_VAR]: level
+    }
   }, /*#__PURE__*/_react.default.createElement(_reactTreeview.default, {
     collapsed: collapsed,
     itemClassName: b('item', {

package/build/components/i18n.d.ts

@@ -1,3 +1,2 @@
 import { I18N } from '@yandex-cloud/i18n';
 export declare const i18n: I18N;
-export { I18N } from '@yandex-cloud/i18n';

package/build/components/i18n.js

@@ -3,15 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "I18N", {
-  enumerable: true,
-  get: function () {
-    return _i18n.I18N;
-  }
-});
 exports.i18n = void 0;
 
 var _i18n = require("@yandex-cloud/i18n");
 
+var _configure = require("../utils/configure");
+
 const i18n = new _i18n.I18N();
-exports.i18n = i18n;
+exports.i18n = i18n;
+i18n.setLang((0, _configure.getConfig)().lang || _configure.Lang.En);
+(0, _configure.subscribeConfigure)(config => {
+  if (config.lang) {
+    i18n.setLang(config.lang);
+  }
+});

package/build/components/icons/ColumnTable.d.ts

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

package/build/components/icons/ColumnTable.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColumnTableIcon = ColumnTableIcon;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ColumnTableIcon(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor"
+  }, props), /*#__PURE__*/_react.default.createElement("rect", {
+    x: "2",
+    y: "3",
+    width: "5",
+    height: "2.5",
+    rx: "0.5"
+  }), /*#__PURE__*/_react.default.createElement("rect", {
+    x: "2",
+    y: "7",
+    width: "5",
+    height: "2.5",
+    rx: "0.5"
+  }), /*#__PURE__*/_react.default.createElement("rect", {
+    x: "2",
+    y: "11",
+    width: "5",
+    height: "2.5",
+    rx: "0.5"
+  }), /*#__PURE__*/_react.default.createElement("rect", {
+    x: "9",
+    y: "3",
+    width: "5",
+    height: "2.5",
+    rx: "0.5"
+  }), /*#__PURE__*/_react.default.createElement("rect", {
+    x: "9",
+    y: "7",
+    width: "5",
+    height: "2.5",
+    rx: "0.5"
+  }), /*#__PURE__*/_react.default.createElement("rect", {
+    x: "9",
+    y: "11",
+    width: "5",
+    height: "2.5",
+    rx: "0.5"
+  }));
+}

package/build/components/icons/Folder.js

@@ -14,9 +14,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 function FolderIcon(props) {
   return /*#__PURE__*/_react.default.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 512 512",
+    viewBox: "0 0 16 16",
     fill: "currentColor"
   }, props), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M512 144v288c0 26.5-21.5 48-48 48h-416C21.5 480 0 458.5 0 432v-352C0 53.5 21.5 32 48 32h160l64 64h192C490.5 96 512 117.5 512 144z"
+    d: "M13.2812 4.875H8.40625L6.78125 3.25H2.71875C2.0332 3.25 1.5 3.80859 1.5 4.46875V11.7812C1.5 12.4668 2.0332 13 2.71875 13H13.2812C13.9414 13 14.5 12.4668 14.5 11.7812V6.09375C14.5 5.43359 13.9414 4.875 13.2812 4.875Z"
   }));
 }

package/build/components/icons/FolderOpen.js

@@ -14,9 +14,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 function FolderOpenIcon(props) {
   return /*#__PURE__*/_react.default.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 576 512",
+    viewBox: "0 0 16 16",
     fill: "currentColor"
   }, props), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M147.8 192H480V144C480 117.5 458.5 96 432 96h-160l-64-64h-160C21.49 32 0 53.49 0 80v328.4l90.54-181.1C101.4 205.6 123.4 192 147.8 192zM543.1 224H147.8C135.7 224 124.6 230.8 119.2 241.7L0 480h447.1c12.12 0 23.2-6.852 28.62-17.69l96-192C583.2 249 567.7 224 543.1 224z"
+    d: "M15.2109 9.06445C15.4648 8.6582 15.1602 8.125 14.6777 8.125H4.54688C4.01367 8.125 3.37891 8.50586 3.125 8.9375L1.29688 12.0859C1.04297 12.4922 1.34766 13 1.83008 13H11.9609C12.4941 13 13.1289 12.6445 13.3828 12.2129L15.2109 9.06445ZM4.54688 7.3125H12.875V6.09375C12.875 5.43359 12.3164 4.875 11.6562 4.875H7.59375L5.96875 3.25H1.90625C1.2207 3.25 0.6875 3.80859 0.6875 4.46875V11.5527L2.43945 8.53125C2.87109 7.79492 3.6582 7.3125 4.54688 7.3125Z"
   }));
 }

package/build/components/icons/Index.d.ts

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

package/build/components/icons/Index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IndexIcon = IndexIcon;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function IndexIcon(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor"
+  }, props), /*#__PURE__*/_react.default.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2.21875 2H9.97675L6.6875 7.29469V5.25H2.625V7.6875H6.44347L6.10429 8.23348V8.23454C5.9286 8.50001 5.92847 8.93002 5.9286 9.03845C5.9286 9.13568 5.9579 9.2302 6.01212 9.3125H2.625V11.75H6.6875V9.57909L8.3125 9.60141V11.75H8.96364L8.68578 13.375H2.21875C1.5332 13.375 1 12.8418 1 12.1562V3.21875C1 2.55859 1.5332 2 2.21875 2ZM12.7812 13.375H11.5739L14 9.27358V12.1562C14 12.8418 13.4414 13.375 12.7812 13.375ZM14 3.21875V6H12L12.6784 2H12.7812C13.4414 2 14 2.55859 14 3.21875ZM10.962 2.06484C11.034 2.02249 11.1162 2.00009 11.2 2C11.3238 2 11.4425 2.04863 11.53 2.13518C11.6175 2.22174 11.6667 2.33913 11.6667 2.46154C11.6666 2.50769 11.6595 2.55358 11.6457 2.59766L10.9667 7.07692H13.5333C13.7909 7.07692 14 7.28369 14 7.53846C14 7.63899 13.9604 7.72676 13.9052 7.80258L13.9098 7.8107L10.2129 13.7539H10.212C10.1724 13.8281 10.1131 13.8902 10.0405 13.9335C9.96796 13.9769 9.8848 13.9999 9.8 14C9.67623 14 9.55753 13.9514 9.47002 13.8648C9.3825 13.7783 9.33333 13.6609 9.33333 13.5385C9.33325 13.5076 9.33631 13.4768 9.34245 13.4465L10.0333 8.92308H7.46667C7.3429 8.92308 7.2242 8.87445 7.13668 8.7879C7.04917 8.70134 7 8.58395 7 8.46154C6.9999 8.3686 7.02818 8.2778 7.08112 8.20102V8.20012L10.7908 2.24069C10.8308 2.16793 10.89 2.10719 10.962 2.06484Z"
+  }));
+}

package/build/components/icons/Table.js

@@ -14,9 +14,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 function TableIcon(props) {
   return /*#__PURE__*/_react.default.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 512 512",
+    viewBox: "0 0 16 16",
     fill: "currentColor"
   }, props), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M448 32C483.3 32 512 60.65 512 96V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V96C0 60.65 28.65 32 64 32H448zM224 256V160H64V256H224zM64 320V416H224V320H64zM288 416H448V320H288V416zM448 256V160H288V256H448z"
+    d: "M12.7812 2.4375H2.21875C1.5332 2.4375 1 2.99609 1 3.65625V12.5938C1 13.2793 1.5332 13.8125 2.21875 13.8125H12.7812C13.4414 13.8125 14 13.2793 14 12.5938V3.65625C14 2.99609 13.4414 2.4375 12.7812 2.4375ZM6.6875 12.1875H2.625V9.75H6.6875V12.1875ZM6.6875 8.125H2.625V5.6875H6.6875V8.125ZM12.375 12.1875H8.3125V9.75H12.375V12.1875ZM12.375 8.125H8.3125V5.6875H12.375V8.125Z"
   }));
 }

package/build/components/icons/Topic.d.ts

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

package/build/components/icons/Topic.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TopicIcon = TopicIcon;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function TopicIcon(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor"
+  }, props), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M1.90625 4.875H12.4688C12.6719 4.875 12.875 4.69727 12.875 4.46875V2.84375C12.875 2.64062 12.6719 2.4375 12.4688 2.4375H1.90625C1.67773 2.4375 1.5 2.64062 1.5 2.84375V4.46875C1.5 4.69727 1.67773 4.875 1.90625 4.875ZM14.0938 6.90625H3.53125C3.30273 6.90625 3.125 7.10938 3.125 7.3125V8.9375C3.125 9.16602 3.30273 9.34375 3.53125 9.34375H14.0938C14.2969 9.34375 14.5 9.16602 14.5 8.9375V7.3125C14.5 7.10938 14.2969 6.90625 14.0938 6.90625ZM12.4688 11.375H1.90625C1.67773 11.375 1.5 11.5781 1.5 11.7812V13.4062C1.5 13.6348 1.67773 13.8125 1.90625 13.8125H12.4688C12.6719 13.8125 12.875 13.6348 12.875 13.4062V11.7812C12.875 11.5781 12.6719 11.375 12.4688 11.375Z"
+  }));
+}

package/build/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components/NavigationTree';
 export * from './components/TreeView';
 export { i18n } from './components/i18n';
+export * from './utils';

package/build/index.js

@@ -41,4 +41,18 @@ Object.keys(_TreeView).forEach(function (key) {
   });
 });
 
-var _i18n = require("./components/i18n");
+var _i18n = require("./components/i18n");
+
+var _utils = require("./utils");
+
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
+});

package/build/utils/configure.d.ts

@@ -0,0 +1,12 @@
+export declare enum Lang {
+    Ru = "ru",
+    En = "en"
+}
+interface Config {
+    lang?: Lang;
+}
+declare type Subscriber = (config: Config) => void;
+export declare const configure: (newConfig: Config) => void;
+export declare const subscribeConfigure: (sub: Subscriber) => () => void;
+export declare const getConfig: () => Config;
+export {};

package/build/utils/configure.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.subscribeConfigure = exports.getConfig = exports.configure = exports.Lang = void 0;
+let Lang;
+exports.Lang = Lang;
+
+(function (Lang) {
+  Lang["Ru"] = "ru";
+  Lang["En"] = "en";
+})(Lang || (exports.Lang = Lang = {}));
+
+let subs = [];
+const config = {};
+
+const configure = newConfig => {
+  Object.assign(config, newConfig);
+  subs.forEach(sub => {
+    sub(config);
+  });
+};
+
+exports.configure = configure;
+
+const subscribeConfigure = sub => {
+  subs.push(sub);
+  return () => {
+    subs = subs.filter(item => item !== sub);
+  };
+};
+
+exports.subscribeConfigure = subscribeConfigure;
+
+const getConfig = () => config;
+
+exports.getConfig = getConfig;

package/build/utils/index.d.ts

@@ -0,0 +1 @@
+export { configure, Lang } from './configure';

package/build/utils/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Lang", {
+  enumerable: true,
+  get: function () {
+    return _configure.Lang;
+  }
+});
+Object.defineProperty(exports, "configure", {
+  enumerable: true,
+  get: function () {
+    return _configure.configure;
+  }
+});
+
+var _configure = require("./configure");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-ui-components",
-  "version": "2.2.0",
+  "version": "2.4.1",
   "description": "",
   "license": "MIT",
   "main": "build/index.js",
@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "bem-cn-lite": "^4.1.0",
+    "react-list": "^0.8.17",
     "react-treeview": "^0.4.7"
   },
   "devDependencies": {
@@ -36,6 +37,7 @@
     "@storybook/addon-essentials": "^6.4.19",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.4.19",
+    "@types/react-list": "^0.8.7",
     "@types/react-treeview": "^0.4.3",
     "@yandex-cloud/browserslist-config": "^1.0.1",
     "@yandex-cloud/eslint-config": "^1.0.0",

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

@@ -1,14 +0,0 @@
-import React from 'react';
-import { NavigationTreeState, NavigationTreeProps } from './types';
-import { NavigationTreeAction } from './state';
-export interface NavigationTreeDirectoryProps {
-    state: NavigationTreeState;
-    dispatch: React.Dispatch<NavigationTreeAction>;
-    path: string;
-    fetchPath: NavigationTreeProps['fetchPath'];
-    activePath?: string;
-    onItemActivate?: (itemPath: string) => void;
-    getActions?: NavigationTreeProps['getActions'];
-    cache?: boolean;
-}
-export declare function NavigationTreeDirectory({ state, dispatch, path, fetchPath, activePath, onItemActivate, getActions, cache, }: NavigationTreeDirectoryProps): JSX.Element;

package/build/components/NavigationTree/NavigationTreeDirectory.js

@@ -1,106 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NavigationTreeDirectory = NavigationTreeDirectory;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _state = require("./state");
-
-var _NavigationTreeNode = require("./NavigationTreeNode");
-
-var _LoaderView = require("./LoaderView/LoaderView");
-
-var _ErrorView = require("./ErrorView/ErrorView");
-
-var _EmptyView = require("./EmptyView/EmptyView");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function NavigationTreeDirectory(_ref) {
-  let {
-    state,
-    dispatch,
-    path,
-    fetchPath,
-    activePath,
-    onItemActivate,
-    getActions,
-    cache
-  } = _ref;
-  const nodeState = state[path];
-
-  _react.default.useEffect(() => {
-    if (nodeState.loaded && cache || nodeState.loading) {
-      return;
-    }
-
-    dispatch({
-      type: _state.NavigationTreeActionType.StartLoading,
-      payload: {
-        path
-      }
-    });
-    fetchPath(path).then(data => {
-      dispatch({
-        type: _state.NavigationTreeActionType.FinishLoading,
-        payload: {
-          path,
-          activePath,
-          data
-        }
-      });
-    }).catch(error => {
-      dispatch({
-        type: _state.NavigationTreeActionType.FinishLoading,
-        payload: {
-          path,
-          error
-        }
-      });
-    });
-  }, []);
-
-  if (nodeState.loading) {
-    return /*#__PURE__*/_react.default.createElement(_LoaderView.LoaderView, null);
-  }
-
-  if (nodeState.error) {
-    return /*#__PURE__*/_react.default.createElement(_ErrorView.ErrorView, null);
-  }
-
-  if (nodeState.loaded && nodeState.children.length > 0) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, nodeState.children.map(childName => {
-      const childPath = `${path}/${childName}`;
-      let children;
-
-      if (state[childPath].expandable) {
-        children = /*#__PURE__*/_react.default.createElement(NavigationTreeDirectory, {
-          state: state,
-          dispatch: dispatch,
-          path: childPath,
-          fetchPath: fetchPath,
-          activePath: activePath,
-          onItemActivate: onItemActivate,
-          getActions: getActions,
-          cache: cache
-        });
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_NavigationTreeNode.NavigationTreeNode, {
-        key: childPath,
-        path: childPath,
-        state: state,
-        dispatch: dispatch,
-        active: childPath === activePath,
-        onActivate: onItemActivate,
-        getActions: getActions,
-        children: children
-      });
-    }));
-  }
-
-  return /*#__PURE__*/_react.default.createElement(_EmptyView.EmptyView, null);
-}