ydb-ui-components 3.5.0 → 3.6.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [3.6.0](https://github.com/ydb-platform/ydb-ui-components/compare/v3.5.0...v3.6.0) (2024-01-15)
+
+
+### Features
+
+* **TreeView:** remove `react-treeview` package to avoid using native `addEventListener` ([#64](https://github.com/ydb-platform/ydb-ui-components/issues/64)) ([48d0e4e](https://github.com/ydb-platform/ydb-ui-components/commit/48d0e4e32e28c3d0bebcbeaa086c3b82312f0848))
+
 ## [3.5.0](https://github.com/ydb-platform/ydb-ui-components/compare/v3.4.0...v3.5.0) (2023-12-12)
 
 

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

@@ -57,20 +57,25 @@
   margin-left: 6px;
   align-items: center;
 }
-.ydb-tree-view .tree-view_arrow {
+.ydb-tree-view__arrow {
   flex-shrink: 0;
   width: 24px;
   height: 24px;
+  padding: 0;
   cursor: pointer;
+  border: none;
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 12" width="6" height="12"><path d="M0.192529 10.7483C-0.0845649 11.0562 -0.0596061 11.5304 0.248276 11.8075C0.556159 12.0846 1.03038 12.0596 1.30747 11.7517L0.192529 10.7483ZM5.25 6.25L5.80747 6.75172C6.06418 6.46649 6.06418 6.0335 5.80747 5.74828L5.25 6.25ZM1.30747 0.748277C1.03038 0.440394 0.556159 0.415435 0.248276 0.69253C-0.0596065 0.969624 -0.0845653 1.44384 0.192529 1.75172L1.30747 0.748277ZM1.30747 11.7517L5.80747 6.75172L4.69253 5.74828L0.192529 10.7483L1.30747 11.7517ZM5.80747 5.74828L1.30747 0.748277L0.192529 1.75172L4.69253 6.75172L5.80747 5.74828Z" fill="rgba(0, 0, 0, 0.85)"/></svg>') no-repeat center center;
 }
-.g-root_theme_dark .ydb-tree-view .tree-view_arrow {
+.g-root_theme_dark .ydb-tree-view__arrow {
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 12" width="6" height="12"><path d="M0.192529 10.7483C-0.0845649 11.0562 -0.0596061 11.5304 0.248276 11.8075C0.556159 12.0846 1.03038 12.0596 1.30747 11.7517L0.192529 10.7483ZM5.25 6.25L5.80747 6.75172C6.06418 6.46649 6.06418 6.0335 5.80747 5.74828L5.25 6.25ZM1.30747 0.748277C1.03038 0.440394 0.556159 0.415435 0.248276 0.69253C-0.0596065 0.969624 -0.0845653 1.44384 0.192529 1.75172L1.30747 0.748277ZM1.30747 11.7517L5.80747 6.75172L4.69253 5.74828L0.192529 10.7483L1.30747 11.7517ZM5.80747 5.74828L1.30747 0.748277L0.192529 1.75172L4.69253 6.75172L5.80747 5.74828Z" fill="rgba(255, 255, 255, 0.85)"/></svg>') no-repeat center center;
 }
-.ydb-tree-view .tree-view_arrow:not(.tree-view_arrow-collapsed) {
+.ydb-tree-view__arrow:focus-visible {
+  outline: 2px solid var(--g-color-line-focus);
+}
+.ydb-tree-view__arrow:not(.ydb-tree-view__arrow_collapsed) {
   transform: rotate(90deg);
 }
-.ydb-tree-view_no-arrow .tree-view_arrow {
+.ydb-tree-view__arrow_hidden {
   visibility: hidden;
 }
 .ydb-tree-view .ydb-tree-view .ydb-tree-view__item {

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

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

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

@@ -1,20 +1,24 @@
 "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 _react = _interopRequireDefault(require("react"));
+var _uikit = require("@gravity-ui/uikit");
 
 var _bemCnLite = _interopRequireDefault(require("bem-cn-lite"));
 
-var _reactTreeview = _interopRequireDefault(require("react-treeview"));
-
-var _uikit = require("@gravity-ui/uikit");
+var _react = _interopRequireWildcard(require("react"));
 
 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; }
@@ -38,10 +42,47 @@ function TreeView(_ref) {
       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';
 
-  var rootRef = _react["default"].useRef(null);
+  if (collapsed) {
+    arrowClassName += ' tree-view_arrow-collapsed';
+    containerClassName += ' tree-view_children-collapsed';
+  }
 
-  var nodeLabel = /*#__PURE__*/_react["default"].createElement("div", {
+  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')
@@ -57,49 +98,9 @@ function TreeView(_ref) {
       pin: 'brick-brick'
     },
     items: actions
-  })));
-
-  _react["default"].useEffect(function () {
-    var rootEl = rootRef.current;
-    var itemEl = rootEl && rootEl.querySelector(".".concat(b('item')));
-
-    if (!onClick || !itemEl) {
-      return;
-    }
-
-    var skipClicksSelector = ".tree-view_arrow, .".concat(b('actions'));
-
-    function handleClick(event) {
-      var path = event.composedPath().filter(function (item) {
-        return item.nodeType === Node.ELEMENT_NODE;
-      });
-      var hasSkipped = path.some(function (el) {
-        return el.matches(skipClicksSelector);
-      });
-
-      if (!hasSkipped) {
-        onClick();
-      }
-    }
-
-    itemEl.addEventListener('click', handleClick);
-    return function () {
-      itemEl.removeEventListener('click', handleClick);
-    };
-  }, [onClick]);
-
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    ref: rootRef,
-    className: b({
-      'no-arrow': !hasArrow
-    }),
-    style: _defineProperty({}, TREE_LEVEL_CSS_VAR, level)
-  }, /*#__PURE__*/_react["default"].createElement(_reactTreeview["default"], {
-    collapsed: collapsed,
-    itemClassName: b('item', {
-      active: active
-    }),
-    nodeLabel: nodeLabel,
-    onClick: onArrowClick
-  }, children));
+  })))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(containerClassName, " ").concat(b('container', {
+      collapsed: collapsed
+    }))
+  }, collapsed ? null : children)));
 }

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

@@ -57,20 +57,25 @@
   margin-left: 6px;
   align-items: center;
 }
-.ydb-tree-view .tree-view_arrow {
+.ydb-tree-view__arrow {
   flex-shrink: 0;
   width: 24px;
   height: 24px;
+  padding: 0;
   cursor: pointer;
+  border: none;
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 12" width="6" height="12"><path d="M0.192529 10.7483C-0.0845649 11.0562 -0.0596061 11.5304 0.248276 11.8075C0.556159 12.0846 1.03038 12.0596 1.30747 11.7517L0.192529 10.7483ZM5.25 6.25L5.80747 6.75172C6.06418 6.46649 6.06418 6.0335 5.80747 5.74828L5.25 6.25ZM1.30747 0.748277C1.03038 0.440394 0.556159 0.415435 0.248276 0.69253C-0.0596065 0.969624 -0.0845653 1.44384 0.192529 1.75172L1.30747 0.748277ZM1.30747 11.7517L5.80747 6.75172L4.69253 5.74828L0.192529 10.7483L1.30747 11.7517ZM5.80747 5.74828L1.30747 0.748277L0.192529 1.75172L4.69253 6.75172L5.80747 5.74828Z" fill="rgba(0, 0, 0, 0.85)"/></svg>') no-repeat center center;
 }
-.g-root_theme_dark .ydb-tree-view .tree-view_arrow {
+.g-root_theme_dark .ydb-tree-view__arrow {
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 12" width="6" height="12"><path d="M0.192529 10.7483C-0.0845649 11.0562 -0.0596061 11.5304 0.248276 11.8075C0.556159 12.0846 1.03038 12.0596 1.30747 11.7517L0.192529 10.7483ZM5.25 6.25L5.80747 6.75172C6.06418 6.46649 6.06418 6.0335 5.80747 5.74828L5.25 6.25ZM1.30747 0.748277C1.03038 0.440394 0.556159 0.415435 0.248276 0.69253C-0.0596065 0.969624 -0.0845653 1.44384 0.192529 1.75172L1.30747 0.748277ZM1.30747 11.7517L5.80747 6.75172L4.69253 5.74828L0.192529 10.7483L1.30747 11.7517ZM5.80747 5.74828L1.30747 0.748277L0.192529 1.75172L4.69253 6.75172L5.80747 5.74828Z" fill="rgba(255, 255, 255, 0.85)"/></svg>') no-repeat center center;
 }
-.ydb-tree-view .tree-view_arrow:not(.tree-view_arrow-collapsed) {
+.ydb-tree-view__arrow:focus-visible {
+  outline: 2px solid var(--g-color-line-focus);
+}
+.ydb-tree-view__arrow:not(.ydb-tree-view__arrow_collapsed) {
   transform: rotate(90deg);
 }
-.ydb-tree-view_no-arrow .tree-view_arrow {
+.ydb-tree-view__arrow_hidden {
   visibility: hidden;
 }
 .ydb-tree-view .ydb-tree-view .ydb-tree-view__item {

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

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

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

@@ -1,9 +1,8 @@
 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; }
 
-import React from 'react';
-import block from 'bem-cn-lite';
-import ReactTreeView from 'react-treeview';
 import { DropdownMenu } from '@gravity-ui/uikit';
+import block from 'bem-cn-lite';
+import React, { useCallback } from 'react';
 import './TreeView.css';
 var TREE_LEVEL_CSS_VAR = '--ydb-tree-view-level';
 var b = block('ydb-tree-view');
@@ -23,8 +22,47 @@ export function TreeView(_ref) {
       actions = _ref.actions,
       additionalNodeElements = _ref.additionalNodeElements,
       level = _ref.level;
-  var rootRef = React.useRef(null);
-  var nodeLabel = /*#__PURE__*/React.createElement("div", {
+  var handleClick = 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.createElement("div", {
+    className: b(),
+    style: _defineProperty({}, TREE_LEVEL_CSS_VAR, level)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tree-view"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(itemClassName, " ").concat(b('item', {
+      active: active
+    })),
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "".concat(arrowClassName, " ").concat(b('arrow', {
+      collapsed: collapsed,
+      hidden: !hasArrow
+    })),
+    disabled: !handleArrowClick,
+    onClick: handleArrowClick
+  }), /*#__PURE__*/React.createElement("div", {
     className: b('content')
   }, icon && /*#__PURE__*/React.createElement("div", {
     className: b('icon')
@@ -40,47 +78,9 @@ export function TreeView(_ref) {
       pin: 'brick-brick'
     },
     items: actions
-  })));
-  React.useEffect(function () {
-    var rootEl = rootRef.current;
-    var itemEl = rootEl && rootEl.querySelector(".".concat(b('item')));
-
-    if (!onClick || !itemEl) {
-      return;
-    }
-
-    var skipClicksSelector = ".tree-view_arrow, .".concat(b('actions'));
-
-    function handleClick(event) {
-      var path = event.composedPath().filter(function (item) {
-        return item.nodeType === Node.ELEMENT_NODE;
-      });
-      var hasSkipped = path.some(function (el) {
-        return el.matches(skipClicksSelector);
-      });
-
-      if (!hasSkipped) {
-        onClick();
-      }
-    }
-
-    itemEl.addEventListener('click', handleClick);
-    return function () {
-      itemEl.removeEventListener('click', handleClick);
-    };
-  }, [onClick]);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: rootRef,
-    className: b({
-      'no-arrow': !hasArrow
-    }),
-    style: _defineProperty({}, TREE_LEVEL_CSS_VAR, level)
-  }, /*#__PURE__*/React.createElement(ReactTreeView, {
-    collapsed: collapsed,
-    itemClassName: b('item', {
-      active: active
-    }),
-    nodeLabel: nodeLabel,
-    onClick: onArrowClick
-  }, children));
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(containerClassName, " ").concat(b('container', {
+      collapsed: collapsed
+    }))
+  }, collapsed ? null : children)));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-ui-components",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "",
   "license": "MIT",
   "exports": {
@@ -33,8 +33,7 @@
   "dependencies": {
     "@gravity-ui/i18n": "^1.0.0",
     "bem-cn-lite": "^4.1.0",
-    "react-list": "^0.8.17",
-    "react-treeview": "^0.4.7"
+    "react-list": "^0.8.17"
   },
   "devDependencies": {
     "@babel/core": "^7.17.8",