linear-react-components-ui 0.4.76-beta.0 → 0.4.76-beta.12

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 (69) hide show
  1. package/.vscode/settings.json +2 -1
  2. package/README.md +0 -33
  3. package/lib/assets/styles/dropdown.scss +2 -25
  4. package/lib/assets/styles/effects.scss +0 -12
  5. package/lib/assets/styles/floatMenu.scss +1 -0
  6. package/lib/assets/styles/panel.scss +1 -0
  7. package/lib/assets/styles/progress.scss +1 -8
  8. package/lib/assets/styles/select.scss +0 -1
  9. package/lib/assets/styles/table.scss +5 -13
  10. package/lib/assets/styles/tabs.scss +43 -77
  11. package/lib/assets/styles/treeview.scss +0 -32
  12. package/lib/avatar/avatar.spec.js +6 -17
  13. package/lib/avatar/index.js +1 -1
  14. package/lib/buttons/DefaultButton.js +1 -7
  15. package/lib/checkbox/index.js +6 -20
  16. package/lib/dialog/base/index.js +6 -15
  17. package/lib/dialog/form/index.js +3 -16
  18. package/lib/drawer/index.js +1 -4
  19. package/lib/form/Field.js +0 -2
  20. package/lib/form/FieldNumber.js +2 -10
  21. package/lib/form/helpers.js +1 -9
  22. package/lib/form/index.js +10 -76
  23. package/lib/form/withFieldHOC.js +0 -2
  24. package/lib/icons/helper.js +0 -16
  25. package/lib/inputs/base/InputTextBase.js +10 -1
  26. package/lib/inputs/base/helpers.js +13 -2
  27. package/lib/inputs/number/BaseNumber.js +1 -1
  28. package/lib/inputs/number/index.js +5 -7
  29. package/lib/inputs/select/Dropdown.js +4 -4
  30. package/lib/inputs/select/index.js +3 -26
  31. package/lib/inputs/select/multiple/index.js +7 -9
  32. package/lib/inputs/select/simple/index.js +18 -30
  33. package/lib/internals/withTooltip.js +81 -83
  34. package/lib/list/Item.js +3 -3
  35. package/lib/list/index.js +10 -20
  36. package/lib/list/list.spec.js +85 -129
  37. package/lib/menus/float/MenuItem.js +8 -25
  38. package/lib/menus/sidenav/index.js +3 -7
  39. package/lib/menus/sidenav/popup_menu_search/index.js +1 -1
  40. package/lib/progress/Bar.js +9 -40
  41. package/lib/progress/index.js +4 -12
  42. package/lib/spinner/index.js +1 -6
  43. package/lib/split/Split.js +11 -5
  44. package/lib/table/Row.js +1 -1
  45. package/lib/tabs/Menu.js +5 -18
  46. package/lib/tabs/MenuItems.js +7 -7
  47. package/lib/tabs/Panel.js +3 -1
  48. package/lib/tabs/index.js +17 -126
  49. package/lib/toolbar/index.js +4 -8
  50. package/lib/tooltip/index.js +0 -12
  51. package/lib/treeview/Node.js +18 -288
  52. package/lib/treeview/index.js +35 -448
  53. package/package.json +8 -9
  54. package/.tool-versions +0 -1
  55. package/lib/assets/styles/multiSelect.scss +0 -105
  56. package/lib/assets/styles/periodpicker.scss +0 -65
  57. package/lib/checkbox/Label.js +0 -37
  58. package/lib/form/FieldPeriod.js +0 -100
  59. package/lib/form/withFormSecurity.js +0 -106
  60. package/lib/inputs/multiSelect/ActionButtons.js +0 -68
  61. package/lib/inputs/multiSelect/Dropdown.js +0 -200
  62. package/lib/inputs/multiSelect/helper.js +0 -18
  63. package/lib/inputs/multiSelect/index.js +0 -343
  64. package/lib/inputs/period/Dialog.js +0 -38
  65. package/lib/inputs/period/Dropdown.js +0 -90
  66. package/lib/inputs/period/PeriodList.js +0 -79
  67. package/lib/inputs/period/helper.js +0 -118
  68. package/lib/inputs/period/index.js +0 -490
  69. package/lib/tabs/DropdownItems.js +0 -84
@@ -35,8 +35,6 @@ var _react = _interopRequireWildcard(require("react"));
35
35
 
36
36
  var _propTypes = _interopRequireDefault(require("prop-types"));
37
37
 
38
- var _uuid = _interopRequireDefault(require("uuid"));
39
-
40
38
  var _NavMenuItem = _interopRequireDefault(require("./NavMenuItem"));
41
39
 
42
40
  var _NavSubMenuItem = _interopRequireDefault(require("./NavSubMenuItem"));
@@ -235,9 +233,7 @@ var SideNav = function SideNav(props) {
235
233
  };
236
234
 
237
235
  var getPopupMenuSearch = function getPopupMenuSearch() {
238
- return /*#__PURE__*/_react["default"].createElement(_NavMenuGroup["default"], {
239
- key: "popup-menusearch-".concat(_uuid["default"].v1())
240
- }, /*#__PURE__*/_react["default"].createElement(_NavMenuItem["default"], {
236
+ return /*#__PURE__*/_react["default"].createElement(_NavMenuGroup["default"], null, /*#__PURE__*/_react["default"].createElement(_NavMenuItem["default"], {
241
237
  childrenIsSubMenu: false,
242
238
  customClass: "-customsidenavitem"
243
239
  }, /*#__PURE__*/_react["default"].createElement(_text["default"], _extends({
@@ -256,15 +252,15 @@ var SideNav = function SideNav(props) {
256
252
  },
257
253
  inputRef: searchFieldRef,
258
254
  onChange: function onChange(e) {
259
- setSearchContent(e.target.value);
260
255
  setOpenSearchMenuPopup(e.target.value !== '');
261
256
  setSideNavDimensions(sideNavRef.current.getBoundingClientRect());
257
+ setSearchContent(e.target.value);
262
258
  }
263
259
  }, returnLeftElements())), openSearchMenuPopup && /*#__PURE__*/_react["default"].createElement(_popup_menu_search["default"], _extends({}, props, {
264
260
  style: getPopupMenuSearchStyle(),
265
261
  searchContent: searchContent,
266
262
  handlerClose: closeSearchMenuPopup,
267
- menuItemsContent: menuItemsContent && returnMenuItems()
263
+ menuItemsContent: returnMenuItems()
268
264
  }))));
269
265
  };
270
266
 
@@ -84,7 +84,7 @@ var PopupMenuSearch = function PopupMenuSearch(props) {
84
84
 
85
85
  var search = function search(value) {
86
86
  var filter = value.toLowerCase();
87
- var result = menuItemsContent && menuItemsContent.filter(function (item) {
87
+ var result = menuItemsContent.filter(function (item) {
88
88
  return item.content.toLowerCase().includes(filter);
89
89
  });
90
90
  setSearchFieldContent(value);
@@ -18,16 +18,6 @@ var getPercentage = function getPercentage(props) {
18
18
  return Math.round(percentage * ROUND_PRECISION) / ROUND_PRECISION;
19
19
  };
20
20
 
21
- var getClass = function getClass(props) {
22
- var style = 'bar';
23
- if (props.customClass) style += "".concat(props.customClass);
24
- if (props.type) style += " -".concat(props.type);
25
- if (props.effect) style += ' -effect';
26
- if (props.animated) style += ' -animated';
27
- if (props.indeterminate) style += ' -indeterminate';
28
- return style;
29
- };
30
-
31
21
  var getLabel = function getLabel(progress) {
32
22
  var value = progress.label;
33
23
 
@@ -40,64 +30,43 @@ var getLabel = function getLabel(progress) {
40
30
  }, value);
41
31
  };
42
32
 
43
- var getStyle = function getStyle(props) {
44
- if (props.indeterminate) {
45
- return {
46
- width: props.progressWidth,
47
- height: props.height,
48
- animationDuration: "".concat(props.indeterminateDuration, "s"),
49
- animationDelay: "".concat(props.indeterminateDelay, "s")
50
- };
51
- }
52
-
53
- return {
54
- width: "".concat(getPercentage(props), "%"),
55
- height: props.height
56
- };
57
- };
58
-
59
33
  var ProgressBar = function ProgressBar(props) {
60
34
  return /*#__PURE__*/_react["default"].createElement("div", {
61
35
  role: "progressbar",
62
- className: getClass(props),
63
- style: getStyle(props),
36
+ className: "bar -".concat(props.type, " ").concat(props.customClass, " -").concat(props.effect && '-effect', " -").concat(props.animated && '-animated'),
37
+ style: {
38
+ width: "".concat(getPercentage(props), "%"),
39
+ height: "".concat(props.height)
40
+ },
64
41
  "aria-valuenow": props.value,
65
42
  "aria-valuemin": props.min,
66
43
  "aria-valuemax": props.max
67
- }, props.showLabel && !props.indeterminate && getLabel(props));
44
+ }, props.showLabel && getLabel(props));
68
45
  };
69
46
 
70
47
  ProgressBar.defaultProps = {
71
48
  min: 0,
72
49
  max: 100,
73
50
  value: 0,
74
- progressWidth: '100%',
75
51
  height: '100%',
76
52
  effect: false,
77
53
  customClass: '',
78
54
  type: '',
79
55
  showLabel: true,
80
56
  label: '',
81
- animated: false,
82
- indeterminate: false,
83
- indeterminateDuration: 1.5,
84
- indeterminateDelay: 1
57
+ animated: false
85
58
  };
86
59
  ProgressBar.propTypes = {
87
60
  label: _propTypes["default"].string,
88
61
  min: _propTypes["default"].number,
89
62
  value: _propTypes["default"].number,
90
63
  max: _propTypes["default"].number,
91
- progressWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
92
- height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
64
+ height: _propTypes["default"].string,
93
65
  showLabel: _propTypes["default"].bool,
94
66
  effect: _propTypes["default"].bool,
95
67
  type: _propTypes["default"].string,
96
68
  customClass: _propTypes["default"].string,
97
- animated: _propTypes["default"].bool,
98
- indeterminate: _propTypes["default"].bool,
99
- indeterminateDuration: _propTypes["default"].number,
100
- indeterminateDelay: _propTypes["default"].number
69
+ animated: _propTypes["default"].bool
101
70
  };
102
71
  var _default = ProgressBar;
103
72
  exports["default"] = _default;
@@ -21,32 +21,24 @@ require("../assets/styles/progress.scss");
21
21
 
22
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
23
23
 
24
- 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); }
25
-
26
24
  var ProgressBar = function ProgressBar(props) {
27
25
  var style = props.style,
28
26
  children = props.children;
29
-
30
- var getStyle = _extends({}, style, {
31
- width: props.width,
32
- height: props.height
33
- });
34
-
35
27
  return /*#__PURE__*/_react["default"].createElement("div", {
36
28
  className: "container-progress",
37
- style: getStyle
29
+ style: style
38
30
  }, children || /*#__PURE__*/_react["default"].createElement(_Bar["default"], props));
39
31
  };
40
32
 
41
33
  ProgressBar.propTypes = {
42
- width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
43
- height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
34
+ width: _propTypes["default"].string,
35
+ height: _propTypes["default"].string,
44
36
  style: _propTypes["default"].object,
45
37
  children: _propTypes["default"].any
46
38
  };
47
39
  ProgressBar.defaultProps = {
48
40
  width: '100%',
49
- height: '24px',
41
+ height: '100%',
50
42
  children: null,
51
43
  style: {}
52
44
  };
@@ -47,17 +47,12 @@ var Spinner = function Spinner(props) {
47
47
  delay = _useState2[0],
48
48
  setDelay = _useState2[1];
49
49
 
50
- var delayTimeout = (0, _react.useRef)(null);
51
50
  (0, _react.useEffect)(function () {
52
51
  if (delayTime) {
53
- delayTimeout.current = setTimeout(function () {
52
+ setTimeout(function () {
54
53
  setDelay(false);
55
54
  }, delayTime);
56
55
  }
57
-
58
- return function () {
59
- clearTimeout(delayTimeout.current);
60
- };
61
56
  }, []);
62
57
 
63
58
  var getCssClass = function getCssClass() {
@@ -49,6 +49,8 @@ var Split = function Split(props) {
49
49
  var hotKey = props.hotKey,
50
50
  secondaryInitialSize = props.secondaryInitialSize,
51
51
  onSecondaryPaneSizeChange = props.onSecondaryPaneSizeChange,
52
+ onDragStart = props.onDragStart,
53
+ onDragEnd = props.onDragEnd,
52
54
  vertical = props.vertical,
53
55
  primaryIndex = props.primaryIndex,
54
56
  percentage = props.percentage,
@@ -269,6 +271,9 @@ var Split = function Split(props) {
269
271
  (0, _react.useEffect)(function () {
270
272
  if (state.resizing) {
271
273
  document.addEventListener('mousemove', handleMouseMove);
274
+ if (onDragStart) onDragStart();
275
+ } else if (onDragEnd) {
276
+ onDragEnd();
272
277
  }
273
278
 
274
279
  return function () {
@@ -329,11 +334,8 @@ var Split = function Split(props) {
329
334
  role: "button",
330
335
  tabIndex: "-1",
331
336
  onDoubleClick: function onDoubleClick() {
332
- return state.secondaryPaneSize === 100 ? setState(_extends({}, state, {
333
- secondaryPaneSize: 50,
334
- resizing: false
335
- })) : setState(_extends({}, state, {
336
- secondaryPaneSize: 100,
337
+ return setState(_extends({}, state, {
338
+ visibleSplitSide: !visibleSplitSide,
337
339
  resizing: false
338
340
  }));
339
341
  },
@@ -352,6 +354,8 @@ Split.propTypes = {
352
354
  secondaryInitialSize: _propTypes["default"].number,
353
355
  secondaryMinSize: _propTypes["default"].number,
354
356
  hideSplitSideOnToggleClick: _propTypes["default"].string,
357
+ onDragStart: _propTypes["default"].func,
358
+ onDragEnd: _propTypes["default"].func,
355
359
  onSecondaryPaneSizeChange: _propTypes["default"].func,
356
360
  children: _propTypes["default"].arrayOf(_propTypes["default"].node)
357
361
  };
@@ -365,6 +369,8 @@ Split.defaultProps = {
365
369
  secondaryInitialSize: undefined,
366
370
  secondaryMinSize: 0,
367
371
  hideSplitSideOnToggleClick: 'primary',
372
+ onDragStart: null,
373
+ onDragEnd: null,
368
374
  onSecondaryPaneSizeChange: null,
369
375
  children: [],
370
376
  hotKey: false
package/lib/table/Row.js CHANGED
@@ -59,7 +59,7 @@ Row.propTypes = {
59
59
  children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].arrayOf(_propTypes["default"].object)]).isRequired,
60
60
  customClass: _propTypes["default"].string,
61
61
  rowId: _propTypes["default"].string,
62
- dataId: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
62
+ dataId: _propTypes["default"].number,
63
63
  onClick: _propTypes["default"].func,
64
64
  rowBorder: _propTypes["default"].bool,
65
65
  height: _propTypes["default"].string
package/lib/tabs/Menu.js CHANGED
@@ -11,23 +11,15 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
11
11
 
12
12
  var _MenuItems = _interopRequireDefault(require("./MenuItems"));
13
13
 
14
- var _DropdownItems = _interopRequireDefault(require("./DropdownItems"));
15
-
16
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
17
15
 
18
16
  var Menu = function Menu(props) {
19
17
  var toolbar = props.toolbar,
20
18
  customClassForToolBar = props.customClassForToolBar,
21
- menuRef = props.menuRef,
22
- toolBarRef = props.toolBarRef;
19
+ menuRef = props.menuRef;
23
20
 
24
21
  if (!toolbar) {
25
- return /*#__PURE__*/_react["default"].createElement("div", {
26
- className: "menucontainer",
27
- ref: function ref(r) {
28
- menuRef(r);
29
- }
30
- }, /*#__PURE__*/_react["default"].createElement(_MenuItems["default"], props), /*#__PURE__*/_react["default"].createElement(_DropdownItems["default"], props));
22
+ return /*#__PURE__*/_react["default"].createElement(_MenuItems["default"], props);
31
23
  }
32
24
 
33
25
  return /*#__PURE__*/_react["default"].createElement("div", {
@@ -35,23 +27,18 @@ var Menu = function Menu(props) {
35
27
  ref: function ref(r) {
36
28
  menuRef(r);
37
29
  }
38
- }, /*#__PURE__*/_react["default"].createElement(_MenuItems["default"], props), /*#__PURE__*/_react["default"].createElement(_DropdownItems["default"], props), /*#__PURE__*/_react["default"].cloneElement(toolbar, {
39
- customClass: "menubar ".concat(customClassForToolBar),
40
- innerRef: toolBarRef ? function (r) {
41
- toolBarRef(r);
42
- } : undefined
30
+ }, /*#__PURE__*/_react["default"].createElement(_MenuItems["default"], props), /*#__PURE__*/_react["default"].cloneElement(toolbar, {
31
+ customClass: "menubar ".concat(customClassForToolBar)
43
32
  }));
44
33
  };
45
34
 
46
35
  Menu.propTypes = {
47
36
  toolbar: _propTypes["default"].object,
48
37
  customClassForToolBar: _propTypes["default"].string,
49
- menuRef: _propTypes["default"].func.isRequired,
50
- toolBarRef: _propTypes["default"].func
38
+ menuRef: _propTypes["default"].func.isRequired
51
39
  };
52
40
  Menu.defaultProps = {
53
41
  toolbar: undefined,
54
- toolBarRef: null,
55
42
  customClassForToolBar: ''
56
43
  };
57
44
  var _default = Menu;
@@ -24,17 +24,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
24
24
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
25
25
 
26
26
  var MenuItems = function MenuItems(_ref) {
27
- var selectedTabId = _ref.selectedTabId,
27
+ var panels = _ref.panels,
28
+ selectedTabId = _ref.selectedTabId,
28
29
  handlerClick = _ref.handlerClick,
29
30
  handlerRemovePanel = _ref.handlerRemovePanel,
30
31
  tabMenuAlign = _ref.tabMenuAlign,
31
32
  firstTabIdent = _ref.firstTabIdent,
32
- tabMenuSize = _ref.tabMenuSize,
33
- currentPanels = _ref.currentPanels;
33
+ tabMenuSize = _ref.tabMenuSize;
34
34
  return /*#__PURE__*/_react["default"].createElement("ul", {
35
35
  className: "menu ".concat(firstTabIdent && '-firsttabident'),
36
36
  style: helpers.menuStyles(tabMenuAlign)
37
- }, currentPanels.map(function (panel, index) {
37
+ }, panels.map(function (panel, index) {
38
38
  var _panel$props = panel.props,
39
39
  id = _panel$props.id,
40
40
  title = _panel$props.title,
@@ -63,10 +63,10 @@ var MenuItems = function MenuItems(_ref) {
63
63
  disabled: disabled || onDenied.disabled,
64
64
  label: title,
65
65
  size: tabMenuSize,
66
- tooltip: tooltip || title,
66
+ tooltip: tooltip,
67
67
  tooltipPosition: tooltipPosition,
68
68
  tooltipWidth: tooltipWidth
69
- }), closeable && currentPanels.length > 1 && /*#__PURE__*/_react["default"].createElement("button", {
69
+ }), closeable && panels.length > 1 && /*#__PURE__*/_react["default"].createElement("button", {
70
70
  className: "closepanel",
71
71
  onClick: function onClick() {
72
72
  handlerRemovePanel(id, index);
@@ -76,7 +76,7 @@ var MenuItems = function MenuItems(_ref) {
76
76
  };
77
77
 
78
78
  MenuItems.propTypes = {
79
- currentPanels: _propTypes["default"].arrayOf(_propTypes["default"].element).isRequired,
79
+ panels: _propTypes["default"].arrayOf(_propTypes["default"].element).isRequired,
80
80
  selectedTabId: _propTypes["default"].string,
81
81
  handlerClick: _propTypes["default"].func.isRequired,
82
82
  handlerRemovePanel: _propTypes["default"].func,
package/lib/tabs/Panel.js CHANGED
@@ -110,7 +110,8 @@ Panel.defaultProps = {
110
110
  iconAlign: 'left',
111
111
  customClass: '',
112
112
  children: undefined,
113
- tooltipPosition: 'bottom',
113
+ tooltip: '',
114
+ tooltipPosition: 'top',
114
115
  tooltipWidth: 'auto',
115
116
  onEndReached: undefined,
116
117
  onEndReachedThreshold: 0.1,
@@ -130,6 +131,7 @@ Panel.propTypes = {
130
131
  icon: _propTypes["default"].instanceOf(Object),
131
132
  iconName: _propTypes["default"].string,
132
133
  iconAlign: _propTypes["default"].string,
134
+ tooltip: _propTypes["default"].string,
133
135
  tooltipPosition: _propTypes["default"].string,
134
136
  tooltipWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
135
137
  onEndReached: _propTypes["default"].func,
package/lib/tabs/index.js CHANGED
@@ -33,14 +33,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
33
33
 
34
34
  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); }
35
35
 
36
- function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
37
-
38
- function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
39
-
40
- function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
41
-
42
- function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
43
-
44
36
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
45
37
 
46
38
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -59,142 +51,48 @@ var Tabs = function Tabs(props) {
59
51
  handlerCloseTab = props.handlerCloseTab,
60
52
  tabMenuPosition = props.tabMenuPosition,
61
53
  style = props.style,
62
- selectedTab = props.selectedTab,
63
- toolbar = props.toolbar;
54
+ selectedTab = props.selectedTab;
64
55
 
65
56
  var _useState = (0, _react.useState)((0, _tabHelpers.buildPanels)(children) || []),
66
57
  _useState2 = _slicedToArray(_useState, 2),
67
58
  panels = _useState2[0],
68
59
  setPanels = _useState2[1];
69
60
 
70
- var _useState3 = (0, _react.useState)([]),
61
+ var _useState3 = (0, _react.useState)(selectedTab || panels[0].props.id),
71
62
  _useState4 = _slicedToArray(_useState3, 2),
72
- currentPanels = _useState4[0],
73
- setCurrentPanels = _useState4[1];
63
+ selectedTabId = _useState4[0],
64
+ setSelectedTabId = _useState4[1];
74
65
 
75
- var _useState5 = (0, _react.useState)([]),
76
- _useState6 = _slicedToArray(_useState5, 2),
77
- dropdownPanels = _useState6[0],
78
- setDropdownPanels = _useState6[1];
66
+ var _useState5 = (0, _react.useState)(''),
67
+ _useState6 = _slicedToArray(_useState5, 1),
68
+ customClass = _useState6[0];
79
69
 
80
- var _useState7 = (0, _react.useState)(selectedTab || panels[0].props.id),
70
+ var _useState7 = (0, _react.useState)(undefined),
81
71
  _useState8 = _slicedToArray(_useState7, 2),
82
- selectedTabId = _useState8[0],
83
- setSelectedTabId = _useState8[1];
84
-
85
- var _useState9 = (0, _react.useState)(''),
86
- _useState10 = _slicedToArray(_useState9, 1),
87
- customClass = _useState10[0];
88
-
89
- var _useState11 = (0, _react.useState)(undefined),
90
- _useState12 = _slicedToArray(_useState11, 2),
91
- contentHeight = _useState12[0],
92
- setContentHeight = _useState12[1];
93
-
94
- var _useState13 = (0, _react.useState)(0),
95
- _useState14 = _slicedToArray(_useState13, 2),
96
- tabsContentWidth = _useState14[0],
97
- setTabsContentWidth = _useState14[1];
72
+ contentHeight = _useState8[0],
73
+ setContentHeight = _useState8[1];
98
74
 
99
75
  var componentRef = (0, _react.useRef)();
100
76
 
101
77
  var _menuRef = (0, _react.useRef)();
102
78
 
103
- var _toolBarRef = (0, _react.useRef)();
104
-
105
79
  var onMenuClick = function onMenuClick(tabId) {
106
- var includedInDropdown = dropdownPanels.filter(function (item) {
107
- return item.props.id === tabId;
108
- });
109
-
110
- if (includedInDropdown.length > 0) {
111
- var newDropdownPanels = dropdownPanels.filter(function (item) {
112
- return item.props.id !== tabId;
113
- });
114
- var newPanels = panels.filter(function (item) {
115
- return item.props.id !== tabId;
116
- });
117
- var newCurrentPanels = currentPanels.slice(0, -1);
118
- newDropdownPanels.push(currentPanels.pop());
119
- newPanels.unshift(includedInDropdown[0]);
120
- newCurrentPanels.unshift(includedInDropdown[0]);
121
- setPanels(newPanels);
122
- setDropdownPanels(newDropdownPanels);
123
- setCurrentPanels(newCurrentPanels);
124
- }
125
-
126
- if (handlerTabClick) handlerTabClick(tabId);
127
80
  setSelectedTabId(tabId);
81
+ if (handlerTabClick) handlerTabClick(tabId);
128
82
  };
129
83
 
130
84
  var onRemovePanel = function onRemovePanel(closedPanelId, panelIndex) {
131
- var fromDropdownPanels = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
132
- var newSelectedTabId = selectedTabId;
133
- var remainPanels;
134
-
135
- if (!fromDropdownPanels) {
136
- remainPanels = panels.filter(function (panel) {
137
- return panel.props.id !== closedPanelId;
138
- });
139
- newSelectedTabId = selectedTabId === closedPanelId ? remainPanels[panelIndex - (panelIndex === 0 ? 0 : 1)].props.id : selectedTabId;
140
- setSelectedTabId(newSelectedTabId);
141
- } else {
142
- remainPanels = dropdownPanels.filter(function (panel) {
143
- return panel.props.id !== closedPanelId;
144
- });
145
- setDropdownPanels(remainPanels);
146
- }
147
-
85
+ var remainPanels = panels.filter(function (panel) {
86
+ return panel.props.id !== closedPanelId;
87
+ });
88
+ var newSelectedTabId = selectedTabId === closedPanelId ? remainPanels[panelIndex - (panelIndex === 0 ? 0 : 1)].props.id : selectedTabId;
89
+ setSelectedTabId(newSelectedTabId);
148
90
  if (handlerCloseTab) handlerCloseTab(closedPanelId, newSelectedTabId);
149
91
  };
150
92
 
151
- var getMenuAttributes = function getMenuAttributes() {
152
- var menuSize = _menuRef.current.clientWidth;
153
- var dropdownWidth = dropdownPanels.length > 0 ? _menuRef.current.children[1].clientWidth : 0;
154
- var toolbarSize = toolbar && _toolBarRef ? _toolBarRef.current.clientWidth : 0;
155
- var contentWidth = (toolbar ? menuSize - toolbarSize : menuSize) - dropdownWidth;
156
- setTabsContentWidth(contentWidth);
157
- };
158
-
159
- var getTabsList = function getTabsList() {
160
- var tabMenu = _menuRef.current.children[0];
161
-
162
- var tabList = _toConsumableArray(tabMenu.children);
163
-
164
- var tabsListWidth = tabList.reduce(function (total, tab) {
165
- return total + tab.clientWidth;
166
- }, 0);
167
-
168
- var dropdownTabs = _toConsumableArray(dropdownPanels);
169
-
170
- var currentTabs = _toConsumableArray(panels);
171
-
172
- if (dropdownTabs.length) {
173
- var dropDownTabsIds = dropdownTabs.map(function (dd) {
174
- return dd.props.id;
175
- });
176
- currentTabs = currentTabs.filter(function (tab) {
177
- return !dropDownTabsIds.includes(tab.props.id);
178
- });
179
- }
180
-
181
- if (tabsListWidth > tabsContentWidth) {
182
- var lastPanel = currentTabs[currentTabs.length - 1];
183
- dropdownTabs.push(lastPanel);
184
- currentTabs.pop();
185
- } else if (tabsListWidth + 110 < tabsContentWidth && dropdownTabs.length) {
186
- currentTabs.push(dropdownTabs[0]);
187
- dropdownTabs.shift();
188
- }
189
-
190
- setCurrentPanels(currentTabs);
191
- setDropdownPanels(dropdownTabs);
192
- };
193
-
194
93
  var onResize = function onResize() {
195
94
  if (componentRef.current && _menuRef.current) {
196
95
  setContentHeight(componentRef.current.offsetHeight - _menuRef.current.offsetHeight);
197
- getMenuAttributes();
198
96
  }
199
97
  };
200
98
 
@@ -203,12 +101,8 @@ var Tabs = function Tabs(props) {
203
101
  menuRef: function menuRef(ref) {
204
102
  _menuRef.current = ref;
205
103
  },
206
- toolBarRef: function toolBarRef(ref) {
207
- _toolBarRef.current = ref;
208
- },
209
104
  customClass: customClass,
210
- currentPanels: currentPanels,
211
- dropdownPanels: dropdownPanels,
105
+ panels: panels,
212
106
  selectedTabId: selectedTabId,
213
107
  handlerClick: onMenuClick,
214
108
  handlerRemovePanel: onRemovePanel
@@ -236,9 +130,6 @@ var Tabs = function Tabs(props) {
236
130
  if (selectedTab) setSelectedTabId(selectedTab);
237
131
  if (children) setPanels((0, _tabHelpers.buildPanels)(children));
238
132
  }, [selectedTab, children]);
239
- (0, _react.useEffect)(function () {
240
- getTabsList();
241
- }, [panels.length, currentPanels.length]);
242
133
 
243
134
  var getContextValues = function getContextValues() {
244
135
  return {
@@ -49,12 +49,10 @@ var ToolBar = function ToolBar(_ref) {
49
49
  var size = _ref.size,
50
50
  customClass = _ref.customClass,
51
51
  style = _ref.style,
52
- children = _ref.children,
53
- innerRef = _ref.innerRef;
52
+ children = _ref.children;
54
53
  return /*#__PURE__*/_react["default"].createElement("div", {
55
54
  className: "toolbar-component ".concat(size && "".concat(size, "-bar"), " ").concat(customClass),
56
- style: style,
57
- ref: innerRef
55
+ style: style
58
56
  }, children);
59
57
  };
60
58
 
@@ -62,14 +60,12 @@ ToolBar.propTypes = {
62
60
  size: _propTypes["default"].oneOf(['small', 'large']),
63
61
  style: _propTypes["default"].object,
64
62
  children: _propTypes["default"].any.isRequired,
65
- customClass: _propTypes["default"].string,
66
- innerRef: _propTypes["default"].func
63
+ customClass: _propTypes["default"].string
67
64
  };
68
65
  ToolBar.defaultProps = {
69
66
  size: null,
70
67
  style: {},
71
- customClass: '',
72
- innerRef: null
68
+ customClass: ''
73
69
  };
74
70
  var _default = ToolBar;
75
71
  exports["default"] = _default;
@@ -25,7 +25,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
25
25
 
26
26
  var Tooltip = function Tooltip(props) {
27
27
  var className = props.className,
28
- tooltipDimensions = props.tooltipDimensions,
29
28
  handlerSetDimensions = props.handlerSetDimensions,
30
29
  style = props.style,
31
30
  text = props.text;
@@ -35,17 +34,9 @@ var Tooltip = function Tooltip(props) {
35
34
  tooltipComponent.current.dataset.testid = 'tooltip-component';
36
35
  tooltipComponent.current.style = style;
37
36
  (0, _react.useEffect)(function () {
38
- tooltipComponent.current.id = "tooltip-".concat(_uuid["default"].v1());
39
- tooltipComponent.current.className = "tooltip-component ".concat(className, " ");
40
- tooltipComponent.current.style = style;
41
37
  document.body.appendChild(tooltipComponent.current);
42
38
  var tooltipEl = document.querySelector("div#".concat(tooltipComponent.current.id));
43
39
  var width = tooltipEl.offsetWidth;
44
-
45
- if (tooltipDimensions.width && tooltipDimensions.width !== 'auto') {
46
- width = typeof tooltipDimensions.width === 'string' ? Number(tooltipDimensions.width.slice(0, -2)) : tooltipDimensions.width;
47
- }
48
-
49
40
  var height = tooltipEl.offsetHeight;
50
41
  handlerSetDimensions({
51
42
  width: width,
@@ -55,9 +46,6 @@ var Tooltip = function Tooltip(props) {
55
46
  return document.body.removeChild(tooltipComponent.current);
56
47
  };
57
48
  }, []);
58
- (0, _react.useEffect)(function () {
59
- tooltipComponent.current.className = "tooltip-component ".concat(className, " ");
60
- }, [className]);
61
49
  (0, _react.useEffect)(function () {
62
50
  tooltipComponent.current.style = style;
63
51
  }, [style]);