ydb-ui-components 3.6.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/build/cjs/components/NavigationTree/EmptyView/EmptyView.d.ts +1 -1
  2. package/build/cjs/components/NavigationTree/EmptyView/EmptyView.js +12 -28
  3. package/build/cjs/components/NavigationTree/ErrorView/ErrorView.d.ts +1 -1
  4. package/build/cjs/components/NavigationTree/ErrorView/ErrorView.js +12 -28
  5. package/build/cjs/components/NavigationTree/LoaderView/LoaderView.d.ts +1 -1
  6. package/build/cjs/components/NavigationTree/LoaderView/LoaderView.js +11 -30
  7. package/build/cjs/components/NavigationTree/NavigationTree.js +36 -116
  8. package/build/cjs/components/NavigationTree/NavigationTreeNode.d.ts +2 -2
  9. package/build/cjs/components/NavigationTree/NavigationTreeNode.js +86 -173
  10. package/build/cjs/components/NavigationTree/i18n/index.d.ts +1 -1
  11. package/build/cjs/components/NavigationTree/i18n/index.js +7 -25
  12. package/build/cjs/components/NavigationTree/index.d.ts +1 -1
  13. package/build/cjs/components/NavigationTree/index.js +3 -30
  14. package/build/cjs/components/NavigationTree/state.d.ts +31 -5
  15. package/build/cjs/components/NavigationTree/state.js +58 -122
  16. package/build/cjs/components/NavigationTree/types.d.ts +3 -3
  17. package/build/cjs/components/NavigationTree/types.js +1 -4
  18. package/build/cjs/components/NavigationTree/utils.d.ts +1 -1
  19. package/build/cjs/components/NavigationTree/utils.js +42 -72
  20. package/build/cjs/components/TreeView/TreeView.d.ts +2 -2
  21. package/build/cjs/components/TreeView/TreeView.js +43 -104
  22. package/build/cjs/components/TreeView/index.js +3 -17
  23. package/build/cjs/components/icons/ColumnTable.js +6 -22
  24. package/build/cjs/components/icons/Database.js +6 -20
  25. package/build/cjs/components/icons/ExternalDataSource.js +6 -22
  26. package/build/cjs/components/icons/ExternalTable.js +6 -22
  27. package/build/cjs/components/icons/Folder.js +6 -20
  28. package/build/cjs/components/icons/FolderOpen.js +6 -20
  29. package/build/cjs/components/icons/Index.js +6 -22
  30. package/build/cjs/components/icons/Table.js +6 -22
  31. package/build/cjs/components/icons/Topic.js +6 -36
  32. package/build/cjs/index.d.ts +0 -1
  33. package/build/cjs/index.js +4 -43
  34. package/build/cjs/utils/cn.d.ts +1 -0
  35. package/build/cjs/utils/cn.js +5 -0
  36. package/build/esm/components/NavigationTree/EmptyView/EmptyView.d.ts +1 -1
  37. package/build/esm/components/NavigationTree/EmptyView/EmptyView.js +7 -13
  38. package/build/esm/components/NavigationTree/ErrorView/ErrorView.d.ts +1 -1
  39. package/build/esm/components/NavigationTree/ErrorView/ErrorView.js +7 -13
  40. package/build/esm/components/NavigationTree/LoaderView/LoaderView.d.ts +1 -1
  41. package/build/esm/components/NavigationTree/LoaderView/LoaderView.js +6 -14
  42. package/build/esm/components/NavigationTree/NavigationTree.js +29 -98
  43. package/build/esm/components/NavigationTree/NavigationTreeNode.d.ts +2 -2
  44. package/build/esm/components/NavigationTree/NavigationTreeNode.js +76 -142
  45. package/build/esm/components/NavigationTree/i18n/index.d.ts +1 -1
  46. package/build/esm/components/NavigationTree/i18n/index.js +3 -6
  47. package/build/esm/components/NavigationTree/index.d.ts +1 -1
  48. package/build/esm/components/NavigationTree/index.js +0 -1
  49. package/build/esm/components/NavigationTree/state.d.ts +31 -5
  50. package/build/esm/components/NavigationTree/state.js +51 -106
  51. package/build/esm/components/NavigationTree/types.d.ts +3 -3
  52. package/build/esm/components/NavigationTree/types.js +1 -1
  53. package/build/esm/components/NavigationTree/utils.d.ts +1 -1
  54. package/build/esm/components/NavigationTree/utils.js +37 -62
  55. package/build/esm/components/TreeView/TreeView.d.ts +2 -2
  56. package/build/esm/components/TreeView/TreeView.js +38 -84
  57. package/build/esm/components/TreeView/index.js +1 -1
  58. package/build/esm/components/icons/ColumnTable.js +3 -12
  59. package/build/esm/components/icons/Database.js +3 -10
  60. package/build/esm/components/icons/ExternalDataSource.js +3 -12
  61. package/build/esm/components/icons/ExternalTable.js +3 -12
  62. package/build/esm/components/icons/Folder.js +3 -10
  63. package/build/esm/components/icons/FolderOpen.js +3 -10
  64. package/build/esm/components/icons/Index.js +3 -12
  65. package/build/esm/components/icons/Table.js +3 -12
  66. package/build/esm/components/icons/Topic.js +3 -26
  67. package/build/esm/index.d.ts +0 -1
  68. package/build/esm/index.js +0 -1
  69. package/build/esm/utils/cn.d.ts +1 -0
  70. package/build/esm/utils/cn.js +2 -0
  71. package/package.json +52 -29
  72. package/CHANGELOG.md +0 -233
  73. package/build/cjs/components/i18n.d.ts +0 -2
  74. package/build/cjs/components/i18n.js +0 -19
  75. package/build/cjs/utils/configure.d.ts +0 -12
  76. package/build/cjs/utils/configure.js +0 -42
  77. package/build/cjs/utils/index.d.ts +0 -1
  78. package/build/cjs/utils/index.js +0 -19
  79. package/build/esm/components/i18n.d.ts +0 -2
  80. package/build/esm/components/i18n.js +0 -9
  81. package/build/esm/utils/configure.d.ts +0 -12
  82. package/build/esm/utils/configure.js +0 -26
  83. package/build/esm/utils/index.d.ts +0 -1
  84. package/build/esm/utils/index.js +0 -1
@@ -1,86 +1,40 @@
1
- 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; }
2
-
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import React from 'react';
3
3
  import { DropdownMenu } from '@gravity-ui/uikit';
4
- import block from 'bem-cn-lite';
5
- import React, { useCallback } from 'react';
4
+ import { block } from '../../utils/cn';
6
5
  import './TreeView.css';
7
- var TREE_LEVEL_CSS_VAR = '--ydb-tree-view-level';
8
- var b = block('ydb-tree-view');
9
- export function TreeView(_ref) {
10
- var children = _ref.children,
11
- name = _ref.name,
12
- title = _ref.title,
13
- icon = _ref.icon,
14
- _ref$collapsed = _ref.collapsed,
15
- collapsed = _ref$collapsed === void 0 ? true : _ref$collapsed,
16
- _ref$active = _ref.active,
17
- active = _ref$active === void 0 ? false : _ref$active,
18
- onClick = _ref.onClick,
19
- onArrowClick = _ref.onArrowClick,
20
- _ref$hasArrow = _ref.hasArrow,
21
- hasArrow = _ref$hasArrow === void 0 ? false : _ref$hasArrow,
22
- actions = _ref.actions,
23
- additionalNodeElements = _ref.additionalNodeElements,
24
- level = _ref.level;
25
- var handleClick = useCallback(function (event) {
26
- if (!onClick) return;
27
- var shouldSkip = event.nativeEvent.composedPath().some(function (target) {
28
- return target instanceof HTMLElement && (target.nodeName === 'BUTTON' && !target.hasAttribute('disabled') || target.hasAttribute('tabindex') && target.tabIndex > -1);
29
- });
30
- if (!shouldSkip) onClick();
31
- }, [onClick]);
32
- var handleArrowClick = onArrowClick || onClick;
33
- /**
34
- * These `className`s are left here for backward compatibility of CSS selectors.
35
- * @link https://github.com/ydb-platform/ydb-ui-components/pull/64
36
- */
37
-
38
- var itemClassName = 'tree-view_item';
39
- var arrowClassName = 'tree-view_arrow';
40
- var containerClassName = 'tree-view_children';
41
-
42
- if (collapsed) {
43
- arrowClassName += ' tree-view_arrow-collapsed';
44
- containerClassName += ' tree-view_children-collapsed';
45
- }
46
-
47
- return /*#__PURE__*/React.createElement("div", {
48
- className: b(),
49
- style: _defineProperty({}, TREE_LEVEL_CSS_VAR, level)
50
- }, /*#__PURE__*/React.createElement("div", {
51
- className: "tree-view"
52
- }, /*#__PURE__*/React.createElement("div", {
53
- className: "".concat(itemClassName, " ").concat(b('item', {
54
- active: active
55
- })),
56
- onClick: handleClick
57
- }, /*#__PURE__*/React.createElement("button", {
58
- type: "button",
59
- className: "".concat(arrowClassName, " ").concat(b('arrow', {
60
- collapsed: collapsed,
61
- hidden: !hasArrow
62
- })),
63
- disabled: !handleArrowClick,
64
- onClick: handleArrowClick
65
- }), /*#__PURE__*/React.createElement("div", {
66
- className: b('content')
67
- }, icon && /*#__PURE__*/React.createElement("div", {
68
- className: b('icon')
69
- }, icon), /*#__PURE__*/React.createElement("div", {
70
- className: b('text'),
71
- title: title
72
- }, name), actions && actions.length > 0 && /*#__PURE__*/React.createElement("div", {
73
- className: b('actions')
74
- }, additionalNodeElements, /*#__PURE__*/React.createElement(DropdownMenu, {
75
- defaultSwitcherProps: {
76
- view: 'flat-secondary',
77
- size: 's',
78
- pin: 'brick-brick'
79
- },
80
- items: actions
81
- })))), /*#__PURE__*/React.createElement("div", {
82
- className: "".concat(containerClassName, " ").concat(b('container', {
83
- collapsed: collapsed
84
- }))
85
- }, collapsed ? null : children)));
86
- }
6
+ const TREE_LEVEL_CSS_VAR = '--ydb-tree-view-level';
7
+ const b = block('ydb-tree-view');
8
+ export function TreeView({ children, name, title, icon, collapsed = true, active = false, onClick, onArrowClick, hasArrow = false, actions, additionalNodeElements, level, }) {
9
+ const handleClick = React.useCallback((event) => {
10
+ if (!onClick)
11
+ return;
12
+ const shouldSkip = event.nativeEvent
13
+ .composedPath()
14
+ .some((target) => target instanceof HTMLElement &&
15
+ ((target.nodeName === 'BUTTON' && !target.hasAttribute('disabled')) ||
16
+ (target.hasAttribute('tabindex') && target.tabIndex > -1)));
17
+ if (!shouldSkip)
18
+ onClick();
19
+ }, [onClick]);
20
+ const handleArrowClick = onArrowClick || onClick;
21
+ /**
22
+ * These `className`s are left here for backward compatibility of CSS selectors.
23
+ * @link https://github.com/ydb-platform/ydb-ui-components/pull/64
24
+ */
25
+ const itemClassName = 'tree-view_item';
26
+ let arrowClassName = 'tree-view_arrow';
27
+ let containerClassName = 'tree-view_children';
28
+ if (collapsed) {
29
+ arrowClassName += ' tree-view_arrow-collapsed';
30
+ containerClassName += ' tree-view_children-collapsed';
31
+ }
32
+ return (_jsx("div", { className: b(), style: { [TREE_LEVEL_CSS_VAR]: level }, children: _jsxs("div", { className: "tree-view", children: [_jsxs("div", { className: `${itemClassName} ${b('item', { active })}`, onClick: handleClick, children: [_jsx("button", { type: "button", className: `${arrowClassName} ${b('arrow', {
33
+ collapsed,
34
+ hidden: !hasArrow,
35
+ })}`, disabled: !handleArrowClick, onClick: handleArrowClick }), _jsxs("div", { className: b('content'), children: [icon && _jsx("div", { className: b('icon'), children: icon }), _jsx("div", { className: b('text'), title: title, children: name }), actions && actions.length > 0 && (_jsxs("div", { className: b('actions'), children: [additionalNodeElements, _jsx(DropdownMenu, { defaultSwitcherProps: {
36
+ view: 'flat-secondary',
37
+ size: 's',
38
+ pin: 'brick-brick',
39
+ }, items: actions })] }))] })] }), _jsx("div", { className: `${containerClassName} ${b('container', { collapsed })}`, children: collapsed ? null : children })] }) }));
40
+ }
@@ -1 +1 @@
1
- export * from './TreeView';
1
+ export * from './TreeView';
@@ -1,14 +1,5 @@
1
- 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); }
2
-
1
+ import { jsx as _jsx } from "react/jsx-runtime";
3
2
  import React from 'react';
4
3
  export function ColumnTableIcon(props) {
5
- return /*#__PURE__*/React.createElement("svg", _extends({
6
- xmlns: "http://www.w3.org/2000/svg",
7
- viewBox: "0 0 16 16",
8
- fill: "currentColor"
9
- }, props), /*#__PURE__*/React.createElement("path", {
10
- fillRule: "evenodd",
11
- clipRule: "evenodd",
12
- d: "M2.01033 3.79551C2.11275 2.787 2.96447 2 4 2H5.5H7H9H10.5H12C13.1046 2 14 2.89543 14 4V5.5V12C14 13.1046 13.1046 14 12 14H10.5H9H7H5.5H4C2.89543 14 2 13.1046 2 12V5.5V4C2 3.93096 2.0035 3.86275 2.01033 3.79551ZM10.5 12.5H11.5C12.0523 12.5 12.5 12.0523 12.5 11.5V5.5H10.5L10.5 12.5ZM9 5.5L9 12.5H7L7 5.5H9ZM3.5 5.5H5.5L5.5 12.5H4.5C3.94772 12.5 3.5 12.0523 3.5 11.5V5.5Z"
13
- }));
14
- }
4
+ return (_jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor" }, props, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.01033 3.79551C2.11275 2.787 2.96447 2 4 2H5.5H7H9H10.5H12C13.1046 2 14 2.89543 14 4V5.5V12C14 13.1046 13.1046 14 12 14H10.5H9H7H5.5H4C2.89543 14 2 13.1046 2 12V5.5V4C2 3.93096 2.0035 3.86275 2.01033 3.79551ZM10.5 12.5H11.5C12.0523 12.5 12.5 12.0523 12.5 11.5V5.5H10.5L10.5 12.5ZM9 5.5L9 12.5H7L7 5.5H9ZM3.5 5.5H5.5L5.5 12.5H4.5C3.94772 12.5 3.5 12.0523 3.5 11.5V5.5Z" }) })));
5
+ }
@@ -1,12 +1,5 @@
1
- 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); }
2
-
1
+ import { jsx as _jsx } from "react/jsx-runtime";
3
2
  import React from 'react';
4
3
  export function DatabaseIcon(props) {
5
- return /*#__PURE__*/React.createElement("svg", _extends({
6
- xmlns: "http://www.w3.org/2000/svg",
7
- viewBox: "0 0 448 512",
8
- fill: "currentColor"
9
- }, props), /*#__PURE__*/React.createElement("path", {
10
- d: "M448 80V128C448 172.2 347.7 208 224 208C100.3 208 0 172.2 0 128V80C0 35.82 100.3 0 224 0C347.7 0 448 35.82 448 80zM393.2 214.7C413.1 207.3 433.1 197.8 448 186.1V288C448 332.2 347.7 368 224 368C100.3 368 0 332.2 0 288V186.1C14.93 197.8 34.02 207.3 54.85 214.7C99.66 230.7 159.5 240 224 240C288.5 240 348.3 230.7 393.2 214.7V214.7zM54.85 374.7C99.66 390.7 159.5 400 224 400C288.5 400 348.3 390.7 393.2 374.7C413.1 367.3 433.1 357.8 448 346.1V432C448 476.2 347.7 512 224 512C100.3 512 0 476.2 0 432V346.1C14.93 357.8 34.02 367.3 54.85 374.7z"
11
- }));
12
- }
4
+ return (_jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", fill: "currentColor" }, props, { children: _jsx("path", { d: "M448 80V128C448 172.2 347.7 208 224 208C100.3 208 0 172.2 0 128V80C0 35.82 100.3 0 224 0C347.7 0 448 35.82 448 80zM393.2 214.7C413.1 207.3 433.1 197.8 448 186.1V288C448 332.2 347.7 368 224 368C100.3 368 0 332.2 0 288V186.1C14.93 197.8 34.02 207.3 54.85 214.7C99.66 230.7 159.5 240 224 240C288.5 240 348.3 230.7 393.2 214.7V214.7zM54.85 374.7C99.66 390.7 159.5 400 224 400C288.5 400 348.3 390.7 393.2 374.7C413.1 367.3 433.1 357.8 448 346.1V432C448 476.2 347.7 512 224 512C100.3 512 0 476.2 0 432V346.1C14.93 357.8 34.02 367.3 54.85 374.7z" }) })));
5
+ }
@@ -1,14 +1,5 @@
1
- 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); }
2
-
1
+ import { jsx as _jsx } from "react/jsx-runtime";
3
2
  import React from 'react';
4
3
  export function ExternalDataSourceIcon(props) {
5
- return /*#__PURE__*/React.createElement("svg", _extends({
6
- xmlns: "http://www.w3.org/2000/svg",
7
- viewBox: "0 0 16 16",
8
- fill: "currentColor"
9
- }, props), /*#__PURE__*/React.createElement("path", {
10
- fillRule: "evenodd",
11
- clipRule: "evenodd",
12
- d: "M0 6.75C0 6.35156 0.338542 6 0.722222 6L3.61111 6V3L0.722222 3C0.338542 3 0 2.67188 0 2.25C0 1.85156 0.338542 1.5 0.722222 1.5L3.61111 1.5V0.750001C3.61111 0.351563 3.94965 0 4.33333 0C4.73958 0 5.05556 0.351563 5.05556 0.750001H5.77778C7.53819 0.750001 8.98264 2.03906 9.32118 3.75H12V5.25H9.32118C9.29095 5.4049 9.25189 5.55606 9.20457 5.70291C9.10459 5.73587 9.00778 5.77066 8.9144 5.80723C8.505 5.96755 8.12646 6.17556 7.83841 6.44187C7.5498 6.70871 7.3 7.08678 7.3 7.56255V7.90902C6.83862 8.12843 6.32337 8.25 5.77778 8.25H5.05556C5.05556 8.67188 4.73958 9 4.33333 9C3.94965 9 3.61111 8.67188 3.61111 8.25V7.5L0.722222 7.5C0.338542 7.5 0 7.17188 0 6.75ZM16 8.5V7.5625C16 6.70312 14.1964 6 12 6C9.78571 6 8 6.70312 8 7.5625V8.5C8 9.37891 9.78571 10.0625 12 10.0625C14.1964 10.0625 16 9.37891 16 8.5ZM16 9.65234C15.7321 9.86719 15.375 10.0625 15.0179 10.1992C14.2143 10.5117 13.1429 10.6875 12 10.6875C10.8393 10.6875 9.76786 10.5117 8.96429 10.1992C8.60714 10.0625 8.25 9.86719 8 9.65234V11.625C8 12.5039 9.78571 13.1875 12 13.1875C14.1964 13.1875 16 12.5039 16 11.625V9.65234ZM12 13.8125C10.8393 13.8125 9.76786 13.6367 8.96429 13.3242C8.60714 13.1875 8.25 12.9922 8 12.7773V14.4375C8 15.3164 9.78571 16 12 16C14.1964 16 16 15.3164 16 14.4375V12.7773C15.7321 12.9922 15.375 13.1875 15.0179 13.3242C14.2143 13.6367 13.1429 13.8125 12 13.8125Z"
13
- }));
14
- }
4
+ return (_jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor" }, props, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 6.75C0 6.35156 0.338542 6 0.722222 6L3.61111 6V3L0.722222 3C0.338542 3 0 2.67188 0 2.25C0 1.85156 0.338542 1.5 0.722222 1.5L3.61111 1.5V0.750001C3.61111 0.351563 3.94965 0 4.33333 0C4.73958 0 5.05556 0.351563 5.05556 0.750001H5.77778C7.53819 0.750001 8.98264 2.03906 9.32118 3.75H12V5.25H9.32118C9.29095 5.4049 9.25189 5.55606 9.20457 5.70291C9.10459 5.73587 9.00778 5.77066 8.9144 5.80723C8.505 5.96755 8.12646 6.17556 7.83841 6.44187C7.5498 6.70871 7.3 7.08678 7.3 7.56255V7.90902C6.83862 8.12843 6.32337 8.25 5.77778 8.25H5.05556C5.05556 8.67188 4.73958 9 4.33333 9C3.94965 9 3.61111 8.67188 3.61111 8.25V7.5L0.722222 7.5C0.338542 7.5 0 7.17188 0 6.75ZM16 8.5V7.5625C16 6.70312 14.1964 6 12 6C9.78571 6 8 6.70312 8 7.5625V8.5C8 9.37891 9.78571 10.0625 12 10.0625C14.1964 10.0625 16 9.37891 16 8.5ZM16 9.65234C15.7321 9.86719 15.375 10.0625 15.0179 10.1992C14.2143 10.5117 13.1429 10.6875 12 10.6875C10.8393 10.6875 9.76786 10.5117 8.96429 10.1992C8.60714 10.0625 8.25 9.86719 8 9.65234V11.625C8 12.5039 9.78571 13.1875 12 13.1875C14.1964 13.1875 16 12.5039 16 11.625V9.65234ZM12 13.8125C10.8393 13.8125 9.76786 13.6367 8.96429 13.3242C8.60714 13.1875 8.25 12.9922 8 12.7773V14.4375C8 15.3164 9.78571 16 12 16C14.1964 16 16 15.3164 16 14.4375V12.7773C15.7321 12.9922 15.375 13.1875 15.0179 13.3242C14.2143 13.6367 13.1429 13.8125 12 13.8125Z" }) })));
5
+ }
@@ -1,14 +1,5 @@
1
- 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); }
2
-
1
+ import { jsx as _jsx } from "react/jsx-runtime";
3
2
  import React from 'react';
4
3
  export function ExternalTableIcon(props) {
5
- return /*#__PURE__*/React.createElement("svg", _extends({
6
- xmlns: "http://www.w3.org/2000/svg",
7
- viewBox: "0 0 16 16",
8
- fill: "currentColor"
9
- }, props), /*#__PURE__*/React.createElement("path", {
10
- fillRule: "evenodd",
11
- clipRule: "evenodd",
12
- d: "M0 6.75C0 6.35156 0.351562 6 0.75 6L3.75 6V3L0.75 3C0.351562 3 0 2.67188 0 2.25C0 1.85156 0.351562 1.5 0.75 1.5L3.75 1.5V0.750001C3.75 0.351563 4.10156 0 4.5 0C4.92188 0 5.25 0.351563 5.25 0.750001H6C7.82812 0.750001 9.32812 2.03906 9.67969 3.75H12V5.25H9.67969C9.60376 5.62455 9.47428 5.97724 9.2995 6.30005H7.19969C6.09701 6.30005 5.26846 7.20143 5.25 8.25C5.25 8.67188 4.92188 9 4.5 9C4.10156 9 3.75 8.67188 3.75 8.25V7.5L0.75 7.5C0.351562 7.5 0 7.17188 0 6.75ZM16 8.28571C16 7.58259 15.4336 7 14.75 7H7.25C6.54688 7 6 7.58259 6 8.28571V14.7143C6 15.4375 6.54688 16 7.25 16H14.75C15.4336 16 16 15.4375 16 14.7143V8.28571ZM10.375 9.57143V11.5H7.25V9.57143H10.375ZM7.25 14.7143V12.7857H10.375V14.7143H7.25ZM14.75 14.7143H11.625V12.7857H14.75V14.7143ZM14.75 9.57143V11.5H11.625V9.57143H14.75Z"
13
- }));
14
- }
4
+ return (_jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor" }, props, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 6.75C0 6.35156 0.351562 6 0.75 6L3.75 6V3L0.75 3C0.351562 3 0 2.67188 0 2.25C0 1.85156 0.351562 1.5 0.75 1.5L3.75 1.5V0.750001C3.75 0.351563 4.10156 0 4.5 0C4.92188 0 5.25 0.351563 5.25 0.750001H6C7.82812 0.750001 9.32812 2.03906 9.67969 3.75H12V5.25H9.67969C9.60376 5.62455 9.47428 5.97724 9.2995 6.30005H7.19969C6.09701 6.30005 5.26846 7.20143 5.25 8.25C5.25 8.67188 4.92188 9 4.5 9C4.10156 9 3.75 8.67188 3.75 8.25V7.5L0.75 7.5C0.351562 7.5 0 7.17188 0 6.75ZM16 8.28571C16 7.58259 15.4336 7 14.75 7H7.25C6.54688 7 6 7.58259 6 8.28571V14.7143C6 15.4375 6.54688 16 7.25 16H14.75C15.4336 16 16 15.4375 16 14.7143V8.28571ZM10.375 9.57143V11.5H7.25V9.57143H10.375ZM7.25 14.7143V12.7857H10.375V14.7143H7.25ZM14.75 14.7143H11.625V12.7857H14.75V14.7143ZM14.75 9.57143V11.5H11.625V9.57143H14.75Z" }) })));
5
+ }
@@ -1,12 +1,5 @@
1
- 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); }
2
-
1
+ import { jsx as _jsx } from "react/jsx-runtime";
3
2
  import React from 'react';
4
3
  export function FolderIcon(props) {
5
- return /*#__PURE__*/React.createElement("svg", _extends({
6
- xmlns: "http://www.w3.org/2000/svg",
7
- viewBox: "0 0 16 16",
8
- fill: "currentColor"
9
- }, props), /*#__PURE__*/React.createElement("path", {
10
- 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"
11
- }));
12
- }
4
+ return (_jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor" }, props, { children: _jsx("path", { 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" }) })));
5
+ }
@@ -1,12 +1,5 @@
1
- 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); }
2
-
1
+ import { jsx as _jsx } from "react/jsx-runtime";
3
2
  import React from 'react';
4
3
  export function FolderOpenIcon(props) {
5
- return /*#__PURE__*/React.createElement("svg", _extends({
6
- xmlns: "http://www.w3.org/2000/svg",
7
- viewBox: "0 0 16 16",
8
- fill: "currentColor"
9
- }, props), /*#__PURE__*/React.createElement("path", {
10
- 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"
11
- }));
12
- }
4
+ return (_jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor" }, props, { children: _jsx("path", { 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" }) })));
5
+ }
@@ -1,14 +1,5 @@
1
- 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); }
2
-
1
+ import { jsx as _jsx } from "react/jsx-runtime";
3
2
  import React from 'react';
4
3
  export function IndexIcon(props) {
5
- return /*#__PURE__*/React.createElement("svg", _extends({
6
- xmlns: "http://www.w3.org/2000/svg",
7
- viewBox: "0 0 16 16",
8
- fill: "currentColor"
9
- }, props), /*#__PURE__*/React.createElement("path", {
10
- fillRule: "evenodd",
11
- clipRule: "evenodd",
12
- d: "M9.24935 2.94323L8.5 9.5H12.1L11.1446 14.2772C11.0322 14.839 11.7994 15.1177 12.0738 14.6147L15.9111 7.57956C16.1765 7.09311 15.8244 6.5 15.2703 6.5H12.9L13.5325 3.33728C13.6192 2.90413 13.2879 2.5 12.8461 2.5H9.74611C9.49194 2.5 9.27821 2.69069 9.24935 2.94323ZM7.40003 10.5L8.25717 3H1.625C0.710938 3 0 3.73633 0 4.625V12.75C0 13.6641 0.710938 14.375 1.625 14.375H10.1517C10.1538 14.2803 10.1646 14.1822 10.1848 14.0811L10.901 10.5H7.40003ZM5.6875 8.6875V6.25H1.625V8.6875H5.6875ZM1.625 10.3125V12.75H5.6875V10.3125H1.625Z"
13
- }));
14
- }
4
+ return (_jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor" }, props, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.24935 2.94323L8.5 9.5H12.1L11.1446 14.2772C11.0322 14.839 11.7994 15.1177 12.0738 14.6147L15.9111 7.57956C16.1765 7.09311 15.8244 6.5 15.2703 6.5H12.9L13.5325 3.33728C13.6192 2.90413 13.2879 2.5 12.8461 2.5H9.74611C9.49194 2.5 9.27821 2.69069 9.24935 2.94323ZM7.40003 10.5L8.25717 3H1.625C0.710938 3 0 3.73633 0 4.625V12.75C0 13.6641 0.710938 14.375 1.625 14.375H10.1517C10.1538 14.2803 10.1646 14.1822 10.1848 14.0811L10.901 10.5H7.40003ZM5.6875 8.6875V6.25H1.625V8.6875H5.6875ZM1.625 10.3125V12.75H5.6875V10.3125H1.625Z" }) })));
5
+ }
@@ -1,14 +1,5 @@
1
- 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); }
2
-
1
+ import { jsx as _jsx } from "react/jsx-runtime";
3
2
  import React from 'react';
4
3
  export function TableIcon(props) {
5
- return /*#__PURE__*/React.createElement("svg", _extends({
6
- xmlns: "http://www.w3.org/2000/svg",
7
- viewBox: "0 0 16 16",
8
- fill: "currentColor"
9
- }, props), /*#__PURE__*/React.createElement("path", {
10
- fillRule: "evenodd",
11
- clipRule: "evenodd",
12
- d: "M2.01033 3.79551C2.11275 2.787 2.96447 2 4 2H7.3H8.8H12C13.1046 2 14 2.89543 14 4V5.5V8.2002V9.7002V12C14 13.1046 13.1046 14 12 14H8.8H7.3H4C2.89543 14 2 13.1046 2 12V9.7002V8.2002V5.5V4C2 3.93096 2.0035 3.86275 2.01033 3.79551ZM8.8 12.5H11.5C12.0523 12.5 12.5 12.0523 12.5 11.5V9.7002H8.8V12.5ZM7.3 9.7002V12.5H4.5C3.94772 12.5 3.5 12.0523 3.5 11.5V9.7002H7.3ZM8.8 8.2002H12.5V5.5H8.8L8.8 8.2002ZM7.3 5.5L7.3 8.2002H3.5V5.5H7.3Z"
13
- }));
14
- }
4
+ return (_jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor" }, props, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.01033 3.79551C2.11275 2.787 2.96447 2 4 2H7.3H8.8H12C13.1046 2 14 2.89543 14 4V5.5V8.2002V9.7002V12C14 13.1046 13.1046 14 12 14H8.8H7.3H4C2.89543 14 2 13.1046 2 12V9.7002V8.2002V5.5V4C2 3.93096 2.0035 3.86275 2.01033 3.79551ZM8.8 12.5H11.5C12.0523 12.5 12.5 12.0523 12.5 11.5V9.7002H8.8V12.5ZM7.3 9.7002V12.5H4.5C3.94772 12.5 3.5 12.0523 3.5 11.5V9.7002H7.3ZM8.8 8.2002H12.5V5.5H8.8L8.8 8.2002ZM7.3 5.5L7.3 8.2002H3.5V5.5H7.3Z" }) })));
5
+ }
@@ -1,28 +1,5 @@
1
- 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); }
2
-
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
2
  import React from 'react';
4
3
  export function TopicIcon(props) {
5
- return /*#__PURE__*/React.createElement("svg", _extends({
6
- xmlns: "http://www.w3.org/2000/svg",
7
- viewBox: "0 0 16 16",
8
- fill: "currentColor"
9
- }, props), /*#__PURE__*/React.createElement("rect", {
10
- x: "2",
11
- y: "2.20001",
12
- width: "9",
13
- height: "2.5",
14
- rx: "0.5"
15
- }), /*#__PURE__*/React.createElement("rect", {
16
- x: "5",
17
- y: "6.70001",
18
- width: "9",
19
- height: "2.5",
20
- rx: "0.5"
21
- }), /*#__PURE__*/React.createElement("rect", {
22
- x: "2",
23
- y: "11.2",
24
- width: "9",
25
- height: "2.5",
26
- rx: "0.5"
27
- }));
28
- }
4
+ return (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor" }, props, { children: [_jsx("rect", { x: "2", y: "2.20001", width: "9", height: "2.5", rx: "0.5" }), _jsx("rect", { x: "5", y: "6.70001", width: "9", height: "2.5", rx: "0.5" }), _jsx("rect", { x: "2", y: "11.2", width: "9", height: "2.5", rx: "0.5" })] })));
5
+ }
@@ -1,3 +1,2 @@
1
1
  export * from './components/NavigationTree';
2
2
  export * from './components/TreeView';
3
- export * from './utils';
@@ -1,3 +1,2 @@
1
1
  export * from './components/NavigationTree';
2
2
  export * from './components/TreeView';
3
- export * from './utils';
@@ -0,0 +1 @@
1
+ export declare const block: import("@bem-react/classname").ClassNameInitilizer;
@@ -0,0 +1,2 @@
1
+ import { withNaming } from '@bem-react/classname';
2
+ export const block = withNaming({ e: '__', m: '_' });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ydb-ui-components",
3
- "version": "3.6.0",
3
+ "version": "4.0.0",
4
4
  "description": "",
5
5
  "license": "MIT",
6
6
  "exports": {
@@ -20,61 +20,84 @@
20
20
  "files": [
21
21
  "build"
22
22
  ],
23
+ "repository": {
24
+ "type": "git",
25
+ "url": "git+https://github.com/ydb-platform/ydb-ui-components.git"
26
+ },
27
+ "bugs": {
28
+ "url": "https://github.com/ydb-platform/ydb-ui-components/issues"
29
+ },
23
30
  "scripts": {
24
31
  "clean": "gulp clean",
25
32
  "build": "gulp",
26
33
  "test": "echo \"Error: no test specified\" && exit 0",
27
34
  "lint:js": "eslint --ext .js,.jsx,.ts,.tsx .",
28
35
  "lint:styles": "stylelint 'src/**/*.scss'",
36
+ "lint:other": "npm run prettier -- --check",
29
37
  "lint": "run-p lint:*",
30
- "start": "start-storybook -p 7002",
31
- "prepublishOnly": "npm run build"
38
+ "prettier": "prettier '**/*.{json,md,yaml,yml}'",
39
+ "typecheck": "tsc --noEmit",
40
+ "start": "storybook dev -p 7002",
41
+ "prepublishOnly": "npm run build",
42
+ "prepare": "husky"
32
43
  },
33
44
  "dependencies": {
34
- "@gravity-ui/i18n": "^1.0.0",
35
- "bem-cn-lite": "^4.1.0",
36
- "react-list": "^0.8.17"
45
+ "@bem-react/classname": "^1.6.0",
46
+ "react-list": "^0.8.17",
47
+ "tslib": "^2.6.2"
37
48
  },
38
49
  "devDependencies": {
39
50
  "@babel/core": "^7.17.8",
40
51
  "@babel/preset-env": "^7.16.11",
41
52
  "@babel/preset-react": "^7.16.7",
42
53
  "@babel/preset-typescript": "^7.16.7",
43
- "@commitlint/cli": "^16.2.3",
44
- "@commitlint/config-conventional": "^16.2.1",
45
- "@gravity-ui/eslint-config": "^1.0.2",
46
- "@gravity-ui/prettier-config": "^1.0.1",
47
- "@gravity-ui/stylelint-config": "^1.0.1",
54
+ "@commitlint/cli": "^19.0.3",
55
+ "@commitlint/config-conventional": "^19.0.3",
56
+ "@gravity-ui/eslint-config": "^3.1.1",
57
+ "@gravity-ui/prettier-config": "^1.1.0",
58
+ "@gravity-ui/stylelint-config": "^4.0.1",
48
59
  "@gravity-ui/tsconfig": "^1.0.0",
49
- "@gravity-ui/uikit": "^5.24.0",
50
- "@storybook/addon-essentials": "^6.4.19",
60
+ "@gravity-ui/uikit": "^6.1.1",
61
+ "@storybook/addon-essentials": "^7.6.17",
51
62
  "@storybook/preset-scss": "^1.0.3",
52
- "@storybook/react": "^6.4.19",
53
- "@types/react-list": "^0.8.7",
54
- "@types/react-treeview": "^0.4.3",
55
- "css-loader": "^5.2.7",
56
- "eslint": "^8.11.0",
63
+ "@storybook/react": "^7.6.17",
64
+ "@storybook/react-webpack5": "^7.6.17",
65
+ "@types/react-list": "^0.8.11",
66
+ "css-loader": "^6.10.0",
67
+ "eslint": "^8.57.0",
57
68
  "gulp": "^4.0.2",
58
- "gulp-babel": "^8.0.0",
59
69
  "gulp-cli": "^2.3.0",
60
70
  "gulp-dart-sass": "^1.0.2",
61
71
  "gulp-replace": "^1.1.3",
62
- "gulp-typescript": "^6.0.0-alpha.1",
72
+ "gulp-typescript": "^5.0.1",
73
+ "husky": "^9.0.11",
74
+ "nano-staged": "^0.8.0",
63
75
  "npm-run-all": "^4.1.5",
64
- "prettier": "^2.5.1",
76
+ "prettier": "^3.2.5",
65
77
  "react": "^18.2.0",
66
- "react-docgen-typescript": "^2.2.2",
67
78
  "react-dom": "^18.2.0",
68
- "rimraf": "^3.0.2",
69
- "sass": "^1.49.9",
70
- "sass-loader": "^10.2.1",
71
- "style-loader": "^2.0.0",
72
- "stylelint": "^14.5.3",
73
- "typescript": "^4.6.2"
79
+ "rimraf": "^5.0.5",
80
+ "sass": "^1.71.1",
81
+ "sass-loader": "^14.1.1",
82
+ "storybook": "^7.6.17",
83
+ "style-loader": "^3.3.4",
84
+ "stylelint": "^15.11.0",
85
+ "typescript": "^5.3.3"
74
86
  },
75
87
  "peerDependencies": {
76
- "@gravity-ui/uikit": "^5.0.0",
88
+ "@gravity-ui/uikit": "^6.0.0",
77
89
  "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
78
90
  "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
91
+ },
92
+ "nano-staged": {
93
+ "*.{js,jsx,ts,tsx}": [
94
+ "eslint --fix --quiet"
95
+ ],
96
+ "*.{css,scss}": [
97
+ "stylelint --fix --quiet"
98
+ ],
99
+ "*.{json,md,yaml,yml}": [
100
+ "prettier --write"
101
+ ]
79
102
  }
80
103
  }