ydb-ui-components 3.6.0 → 4.0.0

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

@@ -1,31 +1,4 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _NavigationTree = require("./NavigationTree");
-
-Object.keys(_NavigationTree).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _NavigationTree[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _NavigationTree[key];
-    }
-  });
-});
-
-var _types = require("./types");
-
-Object.keys(_types).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _types[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _types[key];
-    }
-  });
-});
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./NavigationTree"), exports);

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

@@ -1,14 +1,40 @@
-import type { NavigationTreeNodeState, NavigationTreeNodePartialState, NavigationTreeState, NavigationTreeServiceNode } from './types';
+import type { NavigationTreeDataItem, NavigationTreeNodePartialState, NavigationTreeNodeState, NavigationTreeServiceNode, NavigationTreeState } from './types';
 export declare enum NavigationTreeActionType {
     ToggleCollapsed = "toggle-collapsed",
     StartLoading = "start-loading",
     FinishLoading = "finish-loading",
+    ErrorLoading = "error-loading",
     ResetNode = "reset-node"
 }
-export interface NavigationTreeAction {
-    type: NavigationTreeActionType;
-    payload: any;
-}
+export type NavigationTreeAction = {
+    type: NavigationTreeActionType.ToggleCollapsed;
+    payload: {
+        path: string;
+    };
+} | {
+    type: NavigationTreeActionType.StartLoading;
+    payload: {
+        path: string;
+    };
+} | {
+    type: NavigationTreeActionType.FinishLoading;
+    payload: {
+        path: string;
+        activePath?: string;
+        data: NavigationTreeDataItem[];
+    };
+} | {
+    type: NavigationTreeActionType.ErrorLoading;
+    payload: {
+        path: string;
+        error: unknown;
+    };
+} | {
+    type: NavigationTreeActionType.ResetNode;
+    payload: {
+        path: string;
+    };
+};
 export declare function getDefaultNodeState(): {
     collapsed: boolean;
     loading: boolean;

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

@@ -1,134 +1,70 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NavigationTreeActionType = void 0;
-exports.getDefaultNodeState = getDefaultNodeState;
-exports.getNodeState = getNodeState;
-exports.reducer = reducer;
-exports.selectTreeAsList = selectTreeAsList;
-
-var _utils = require("./utils");
-
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-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; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectTreeAsList = exports.reducer = exports.getNodeState = exports.getDefaultNodeState = exports.NavigationTreeActionType = void 0;
+const utils_1 = require("./utils");
 var NavigationTreeActionType;
-exports.NavigationTreeActionType = NavigationTreeActionType;
-
 (function (NavigationTreeActionType) {
-  NavigationTreeActionType["ToggleCollapsed"] = "toggle-collapsed";
-  NavigationTreeActionType["StartLoading"] = "start-loading";
-  NavigationTreeActionType["FinishLoading"] = "finish-loading";
-  NavigationTreeActionType["ResetNode"] = "reset-node";
+    NavigationTreeActionType["ToggleCollapsed"] = "toggle-collapsed";
+    NavigationTreeActionType["StartLoading"] = "start-loading";
+    NavigationTreeActionType["FinishLoading"] = "finish-loading";
+    NavigationTreeActionType["ErrorLoading"] = "error-loading";
+    NavigationTreeActionType["ResetNode"] = "reset-node";
 })(NavigationTreeActionType || (exports.NavigationTreeActionType = NavigationTreeActionType = {}));
-
 function getDefaultNodeState() {
-  return {
-    collapsed: true,
-    loading: false,
-    loaded: false,
-    error: false,
-    children: []
-  };
+    return {
+        collapsed: true,
+        loading: false,
+        loaded: false,
+        error: false,
+        children: [],
+    };
 }
-
+exports.getDefaultNodeState = getDefaultNodeState;
 function getNodeState(partialState) {
-  return _objectSpread(_objectSpread({}, getDefaultNodeState()), {}, {
-    expandable: partialState.type === 'database' || partialState.type === 'directory'
-  }, partialState);
+    return Object.assign(Object.assign(Object.assign({}, getDefaultNodeState()), { expandable: partialState.type === 'database' || partialState.type === 'directory' }), partialState);
 }
-
-function reducer() {
-  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var action = arguments.length > 1 ? arguments[1] : undefined;
-
-  switch (action.type) {
-    case NavigationTreeActionType.ToggleCollapsed:
-      return _objectSpread(_objectSpread({}, state), {}, _defineProperty({}, action.payload.path, _objectSpread(_objectSpread({}, state[action.payload.path]), {}, {
-        collapsed: !state[action.payload.path].collapsed
-      })));
-
-    case NavigationTreeActionType.StartLoading:
-      return _objectSpread(_objectSpread({}, state), {}, _defineProperty({}, action.payload.path, _objectSpread(_objectSpread({}, state[action.payload.path]), {}, {
-        loading: true,
-        loaded: false,
-        error: false,
-        children: []
-      })));
-
-    case NavigationTreeActionType.FinishLoading:
-      {
-        var newState = _objectSpread(_objectSpread({}, state), {}, _defineProperty({}, action.payload.path, _objectSpread(_objectSpread({}, state[action.payload.path]), {}, {
-          loading: false,
-          loaded: Boolean(action.payload.data),
-          error: Boolean(action.payload.error)
-        })));
-
-        if (action.payload.data) {
-          newState[action.payload.path].children = action.payload.data.map(function (_ref) {
-            var name = _ref.name;
-            return name;
-          });
-
-          var _iterator = _createForOfIteratorHelper(action.payload.data),
-              _step;
-
-          try {
-            for (_iterator.s(); !(_step = _iterator.n()).done;) {
-              var _state$path$collapsed, _state$path;
-
-              var item = _step.value;
-              var path = "".concat(action.payload.path, "/").concat(item.name); // expand the tree according to the active path
-              // prioritize the existing state to expand the tree only on first load
-
-              var _action$payload$activ = action.payload.activePath,
-                  activePath = _action$payload$activ === void 0 ? '' : _action$payload$activ;
-              var collapsed = (_state$path$collapsed = (_state$path = state[path]) === null || _state$path === void 0 ? void 0 : _state$path.collapsed) !== null && _state$path$collapsed !== void 0 ? _state$path$collapsed : !activePath.startsWith("".concat(path, "/"));
-              newState[path] = getNodeState(_objectSpread(_objectSpread({}, item), {}, {
-                collapsed: collapsed,
-                path: path
-              }));
+exports.getNodeState = getNodeState;
+function reducer(state = {}, action) {
+    var _a, _b;
+    switch (action.type) {
+        case NavigationTreeActionType.ToggleCollapsed:
+            return Object.assign(Object.assign({}, state), { [action.payload.path]: Object.assign(Object.assign({}, state[action.payload.path]), { collapsed: !state[action.payload.path].collapsed }) });
+        case NavigationTreeActionType.StartLoading:
+            return Object.assign(Object.assign({}, state), { [action.payload.path]: Object.assign(Object.assign({}, state[action.payload.path]), { loading: true, loaded: false, error: false, children: [] }) });
+        case NavigationTreeActionType.FinishLoading: {
+            const newState = Object.assign(Object.assign({}, state), { [action.payload.path]: Object.assign(Object.assign({}, state[action.payload.path]), { loading: false, loaded: Boolean(action.payload.data), error: false }) });
+            if (action.payload.data) {
+                newState[action.payload.path].children = action.payload.data.map(({ name }) => name);
+                for (const item of action.payload.data) {
+                    const path = `${action.payload.path}/${item.name}`;
+                    // expand the tree according to the active path
+                    // prioritize the existing state to expand the tree only on first load
+                    const { activePath = '' } = action.payload;
+                    const collapsed = (_b = (_a = state[path]) === null || _a === void 0 ? void 0 : _a.collapsed) !== null && _b !== void 0 ? _b : !activePath.startsWith(`${path}/`);
+                    newState[path] = getNodeState(Object.assign(Object.assign({}, item), { collapsed,
+                        path }));
+                }
             }
-          } catch (err) {
-            _iterator.e(err);
-          } finally {
-            _iterator.f();
-          }
+            return newState;
         }
-
-        return newState;
-      }
-
-    case NavigationTreeActionType.ResetNode:
-      return _objectSpread(_objectSpread({}, state), {}, _defineProperty({}, action.payload.path, _objectSpread(_objectSpread({}, state[action.payload.path]), getDefaultNodeState())));
-
-    default:
-      return state;
-  }
+        case NavigationTreeActionType.ErrorLoading:
+            return Object.assign(Object.assign({}, state), { [action.payload.path]: Object.assign(Object.assign({}, state[action.payload.path]), { loading: false, loaded: false, error: true }) });
+        case NavigationTreeActionType.ResetNode:
+            return Object.assign(Object.assign({}, state), { [action.payload.path]: Object.assign(Object.assign({}, state[action.payload.path]), getDefaultNodeState()) });
+        default:
+            return state;
+    }
 }
-
+exports.reducer = reducer;
 function selectTreeAsList(state, rootPath) {
-  var list = [];
-  (0, _utils.traverseDFS)(state, rootPath, function (node, level) {
-    list.push(_objectSpread(_objectSpread({}, node), {}, {
-      level: level
-    }));
-    var serviceNode = (0, _utils.getServiceNode)(node, level);
-
-    if (serviceNode) {
-      list.push(serviceNode);
-    }
-  });
-  return list;
-}
+    const list = [];
+    (0, utils_1.traverseDFS)(state, rootPath, (node, level) => {
+        list.push(Object.assign(Object.assign({}, node), { level }));
+        const serviceNode = (0, utils_1.getServiceNode)(node, level);
+        if (serviceNode) {
+            list.push(serviceNode);
+        }
+    });
+    return list;
+}
+exports.selectTreeAsList = selectTreeAsList;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { DropdownMenuItemMixed } from '@gravity-ui/uikit';
-export declare type NavigationTreeNodeType = 'database' | 'directory' | 'table' | 'column_table' | 'index_table' | 'index' | 'topic' | 'stream' | 'external_table' | 'external_data_source';
+import type { DropdownMenuItemMixed } from '@gravity-ui/uikit';
+export type NavigationTreeNodeType = 'database' | 'directory' | 'table' | 'column_table' | 'index_table' | 'index' | 'topic' | 'stream' | 'external_table' | 'external_data_source';
 export interface NavigationTreeDataItem {
     name: string;
     type: NavigationTreeNodeType;
@@ -28,7 +28,7 @@ export interface NavigationTreeServiceNode {
     status: 'loading' | 'error' | 'empty';
     level?: number;
 }
-export declare type NavigationTreeNodePartialState = Omit<NavigationTreeNodeState, 'loading' | 'loaded' | 'error' | 'children'>;
+export type NavigationTreeNodePartialState = Omit<NavigationTreeNodeState, 'loading' | 'loaded' | 'error' | 'children'>;
 export interface NavigationTreeProps<D = any> {
     rootState: NavigationTreeNodePartialState;
     fetchPath: (path: string) => Promise<NavigationTreeDataItem[]>;

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

@@ -1,5 +1,2 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,6 +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;
+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/cjs/components/NavigationTree/utils.js

@@ -1,79 +1,49 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getServiceNode = getServiceNode;
-exports.isServiceNode = isServiceNode;
-exports.traverseDFS = traverseDFS;
-
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.traverseDFS = exports.getServiceNode = exports.isServiceNode = void 0;
 function isServiceNode(node) {
-  return 'status' in node;
+    return 'status' in node;
 }
-
+exports.isServiceNode = isServiceNode;
 function getServiceNode(node, level) {
-  if (node.collapsed) {
+    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;
-  }
-
-  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) {
-  var level = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-  var currentNode = state[path];
-
-  if (!currentNode) {
-    return;
-  }
-
-  visit(currentNode, level, path, state);
-
-  if (currentNode.collapsed) {
-    return;
-  }
-
-  var _iterator = _createForOfIteratorHelper(currentNode.children),
-      _step;
-
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var childPath = _step.value;
-      traverseDFS(state, "".concat(path, "/").concat(childPath), visit, level + 1);
+exports.getServiceNode = getServiceNode;
+function traverseDFS(state, path, visit, level = 0) {
+    const currentNode = state[path];
+    if (!currentNode) {
+        return;
+    }
+    visit(currentNode, level, path, state);
+    if (currentNode.collapsed) {
+        return;
     }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
-}
+    for (const childPath of currentNode.children) {
+        traverseDFS(state, `${path}/${childPath}`, visit, level + 1);
+    }
+}
+exports.traverseDFS = traverseDFS;

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

@@ -1,6 +1,6 @@
-import { DropdownMenuItemMixed } from '@gravity-ui/uikit';
 import React from 'react';
-import './TreeView.scss';
+import type { DropdownMenuItemMixed } from '@gravity-ui/uikit';
+import './TreeView.css';
 export interface TreeViewProps {
     children?: React.ReactNode;
     name: React.ReactNode;

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

@@ -1,106 +1,45 @@
 "use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TreeView = TreeView;
-
-var _uikit = require("@gravity-ui/uikit");
-
-var _bemCnLite = _interopRequireDefault(require("bem-cn-lite"));
-
-var _react = _interopRequireWildcard(require("react"));
-
+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 uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../utils/cn");
 require("./TreeView.css");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var TREE_LEVEL_CSS_VAR = '--ydb-tree-view-level';
-var b = (0, _bemCnLite["default"])('ydb-tree-view');
-
-function TreeView(_ref) {
-  var children = _ref.children,
-      name = _ref.name,
-      title = _ref.title,
-      icon = _ref.icon,
-      _ref$collapsed = _ref.collapsed,
-      collapsed = _ref$collapsed === void 0 ? true : _ref$collapsed,
-      _ref$active = _ref.active,
-      active = _ref$active === void 0 ? false : _ref$active,
-      onClick = _ref.onClick,
-      onArrowClick = _ref.onArrowClick,
-      _ref$hasArrow = _ref.hasArrow,
-      hasArrow = _ref$hasArrow === void 0 ? false : _ref$hasArrow,
-      actions = _ref.actions,
-      additionalNodeElements = _ref.additionalNodeElements,
-      level = _ref.level;
-  var handleClick = (0, _react.useCallback)(function (event) {
-    if (!onClick) return;
-    var shouldSkip = event.nativeEvent.composedPath().some(function (target) {
-      return target instanceof HTMLElement && (target.nodeName === 'BUTTON' && !target.hasAttribute('disabled') || target.hasAttribute('tabindex') && target.tabIndex > -1);
-    });
-    if (!shouldSkip) onClick();
-  }, [onClick]);
-  var handleArrowClick = onArrowClick || onClick;
-  /**
-   * These `className`s are left here for backward compatibility of CSS selectors.
-   * @link https://github.com/ydb-platform/ydb-ui-components/pull/64
-   */
-
-  var itemClassName = 'tree-view_item';
-  var arrowClassName = 'tree-view_arrow';
-  var containerClassName = 'tree-view_children';
-
-  if (collapsed) {
-    arrowClassName += ' tree-view_arrow-collapsed';
-    containerClassName += ' tree-view_children-collapsed';
-  }
-
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: b(),
-    style: _defineProperty({}, TREE_LEVEL_CSS_VAR, level)
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "tree-view"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(itemClassName, " ").concat(b('item', {
-      active: active
-    })),
-    onClick: handleClick
-  }, /*#__PURE__*/_react["default"].createElement("button", {
-    type: "button",
-    className: "".concat(arrowClassName, " ").concat(b('arrow', {
-      collapsed: collapsed,
-      hidden: !hasArrow
-    })),
-    disabled: !handleArrowClick,
-    onClick: handleArrowClick
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: b('content')
-  }, icon && /*#__PURE__*/_react["default"].createElement("div", {
-    className: b('icon')
-  }, icon), /*#__PURE__*/_react["default"].createElement("div", {
-    className: b('text'),
-    title: title
-  }, name), actions && actions.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
-    className: b('actions')
-  }, additionalNodeElements, /*#__PURE__*/_react["default"].createElement(_uikit.DropdownMenu, {
-    defaultSwitcherProps: {
-      view: 'flat-secondary',
-      size: 's',
-      pin: 'brick-brick'
-    },
-    items: actions
-  })))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(containerClassName, " ").concat(b('container', {
-      collapsed: collapsed
-    }))
-  }, collapsed ? null : children)));
-}
+const TREE_LEVEL_CSS_VAR = '--ydb-tree-view-level';
+const b = (0, cn_1.block)('ydb-tree-view');
+function TreeView({ children, name, title, icon, collapsed = true, active = false, onClick, onArrowClick, hasArrow = false, actions, additionalNodeElements, level, }) {
+    const handleClick = react_1.default.useCallback((event) => {
+        if (!onClick)
+            return;
+        const shouldSkip = event.nativeEvent
+            .composedPath()
+            .some((target) => target instanceof HTMLElement &&
+            ((target.nodeName === 'BUTTON' && !target.hasAttribute('disabled')) ||
+                (target.hasAttribute('tabindex') && target.tabIndex > -1)));
+        if (!shouldSkip)
+            onClick();
+    }, [onClick]);
+    const handleArrowClick = onArrowClick || onClick;
+    /**
+     * These `className`s are left here for backward compatibility of CSS selectors.
+     * @link https://github.com/ydb-platform/ydb-ui-components/pull/64
+     */
+    const itemClassName = 'tree-view_item';
+    let arrowClassName = 'tree-view_arrow';
+    let containerClassName = 'tree-view_children';
+    if (collapsed) {
+        arrowClassName += ' tree-view_arrow-collapsed';
+        containerClassName += ' tree-view_children-collapsed';
+    }
+    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, { defaultSwitcherProps: {
+                                                view: 'flat-secondary',
+                                                size: 's',
+                                                pin: 'brick-brick',
+                                            }, items: actions })] }))] })] }), (0, jsx_runtime_1.jsx)("div", { className: `${containerClassName} ${b('container', { collapsed })}`, children: collapsed ? null : children })] }) }));
+}
+exports.TreeView = TreeView;

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

@@ -1,18 +1,4 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _TreeView = require("./TreeView");
-
-Object.keys(_TreeView).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _TreeView[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _TreeView[key];
-    }
-  });
-});
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./TreeView"), exports);