linear-react-components-ui 1.1.20-beta.23 → 1.1.20-beta.25

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 (128) hide show
  1. package/lib/alerts/BaseAlert.js +1 -1
  2. package/lib/alerts/Message.js +1 -1
  3. package/lib/avatar/index.js +9 -8
  4. package/lib/badge/index.js +4 -4
  5. package/lib/buttons/DangerButton.js +1 -1
  6. package/lib/buttons/DefaultButton.js +22 -3
  7. package/lib/buttons/InfoButton.js +1 -1
  8. package/lib/buttons/PrimaryButton.js +1 -1
  9. package/lib/buttons/SuccessButton.js +1 -1
  10. package/lib/buttons/WarningButton.js +1 -1
  11. package/lib/buttons/button_container/index.js +1 -1
  12. package/lib/buttons/split_button/index.js +1 -1
  13. package/lib/calendar/base/Day.js +1 -1
  14. package/lib/calendar/base/Month.js +1 -1
  15. package/lib/calendar/base/helpers.js +2 -2
  16. package/lib/calendar/base/index.js +1 -1
  17. package/lib/checkbox/index.js +1 -1
  18. package/lib/dialog/Custom.js +1 -1
  19. package/lib/dialog/Question.js +2 -4
  20. package/lib/dialog/base/Content.js +1 -1
  21. package/lib/dialog/base/Header.js +2 -2
  22. package/lib/dialog/base/index.js +8 -5
  23. package/lib/dialog/form/index.js +2 -2
  24. package/lib/dialog/types.d.ts +1 -0
  25. package/lib/dialog/wizard/progressbar.js +1 -1
  26. package/lib/dialog/wizard/step.js +1 -1
  27. package/lib/drawer/Drawer.js +3 -3
  28. package/lib/drawer/Header.js +1 -1
  29. package/lib/dropdown/Popup.js +6 -6
  30. package/lib/dropdown/helper.js +1 -1
  31. package/lib/dropdown/withDropdown.js +2 -2
  32. package/lib/fieldset/index.js +7 -7
  33. package/lib/form/FieldArray.js +1 -1
  34. package/lib/form/FieldNumber.js +7 -10
  35. package/lib/form/FieldPeriod.js +2 -2
  36. package/lib/form/index.js +20 -15
  37. package/lib/gridlayout/GridCol.js +5 -5
  38. package/lib/gridlayout/GridRow.js +4 -1
  39. package/lib/hint/index.js +7 -1
  40. package/lib/icons/index.js +24 -27
  41. package/lib/inputs/base/InputTextBase.js +6 -8
  42. package/lib/inputs/base/Label.js +1 -1
  43. package/lib/inputs/base/helpers.js +7 -3
  44. package/lib/inputs/date/helpers.js +4 -1
  45. package/lib/inputs/date/index.js +9 -15
  46. package/lib/inputs/errorMessage/index.js +1 -1
  47. package/lib/inputs/file/DefaultFile.js +5 -6
  48. package/lib/inputs/file/DragDropFile.js +15 -17
  49. package/lib/inputs/file/File.js +3 -4
  50. package/lib/inputs/mask/BaseMask.js +4 -1
  51. package/lib/inputs/mask/helpers.d.ts +1 -1
  52. package/lib/inputs/multiSelect/Dropdown.js +9 -10
  53. package/lib/inputs/multiSelect/helper.js +1 -2
  54. package/lib/inputs/multiSelect/index.js +7 -9
  55. package/lib/inputs/period/PeriodList.js +1 -1
  56. package/lib/inputs/period/helper.js +3 -1
  57. package/lib/inputs/period/index.js +9 -14
  58. package/lib/inputs/search/index.js +1 -1
  59. package/lib/inputs/select/Dropdown.js +1 -1
  60. package/lib/inputs/select/helper.js +10 -13
  61. package/lib/inputs/select/multiple/Selecteds.js +1 -1
  62. package/lib/inputs/select/multiple/index.js +9 -14
  63. package/lib/inputs/select/simple/index.js +10 -17
  64. package/lib/inputs/textarea/index.js +1 -1
  65. package/lib/internals/withTooltip.js +9 -9
  66. package/lib/labelMessages/index.js +4 -3
  67. package/lib/labels/DefaultLabel.js +4 -1
  68. package/lib/labels/label_container/index.js +1 -1
  69. package/lib/list/Header.js +1 -1
  70. package/lib/list/Item.js +9 -7
  71. package/lib/list/index.js +2 -1
  72. package/lib/menus/float/MenuItem.js +2 -2
  73. package/lib/menus/float/SubMenuContainer.js +1 -1
  74. package/lib/menus/float/index.js +1 -1
  75. package/lib/menus/sidenav/ExpandMenu.js +1 -1
  76. package/lib/menus/sidenav/NavMenuGroup.js +1 -1
  77. package/lib/menus/sidenav/NavMenuItem.js +7 -9
  78. package/lib/menus/sidenav/NavSubMenuItem.js +1 -1
  79. package/lib/menus/sidenav/helpers.js +1 -1
  80. package/lib/menus/sidenav/index.js +5 -5
  81. package/lib/panel/Content.js +5 -7
  82. package/lib/panel/Default.js +2 -2
  83. package/lib/panel/Header.js +3 -3
  84. package/lib/permissionValidations.js +1 -1
  85. package/lib/popover/index.js +1 -1
  86. package/lib/progress/Bar.js +6 -6
  87. package/lib/radio/index.js +2 -2
  88. package/lib/shortcuts/index.js +1 -1
  89. package/lib/skeleton/SkeletonContainer.js +2 -1
  90. package/lib/skeleton/index.js +4 -1
  91. package/lib/spinner/index.js +2 -2
  92. package/lib/split/Split.js +1 -1
  93. package/lib/split/SplitSide.js +3 -3
  94. package/lib/table/Body.js +3 -3
  95. package/lib/table/Header.js +8 -11
  96. package/lib/table/HeaderColumn.js +1 -1
  97. package/lib/table/Row.js +3 -3
  98. package/lib/table/RowColumn.js +1 -1
  99. package/lib/table/index.js +6 -1
  100. package/lib/tabs/DropdownTabs.js +1 -1
  101. package/lib/tabs/Menu.js +1 -1
  102. package/lib/tabs/MenuTabs.js +2 -2
  103. package/lib/tabs/Panel.js +5 -7
  104. package/lib/tabs/context.js +3 -6
  105. package/lib/textContent/index.js +4 -2
  106. package/lib/toolbar/ButtonBar.js +1 -1
  107. package/lib/toolbar/index.js +1 -1
  108. package/lib/tooltip/index.js +7 -7
  109. package/lib/treetable/Body.js +1 -1
  110. package/lib/treetable/Header.js +2 -2
  111. package/lib/treetable/Row.d.ts +1 -1
  112. package/lib/treetable/Row.js +9 -13
  113. package/lib/treetable/helpers.d.ts +1 -1
  114. package/lib/treetable/index.d.ts +2 -2
  115. package/lib/treeview/Header.js +1 -1
  116. package/lib/treeview/Node.js +5 -5
  117. package/lib/treeview/index.js +4 -4
  118. package/lib/{types.d-3d9e44cd.d.ts → types.d-73cece43.d.ts} +0 -1
  119. package/lib/uitour/index.js +6 -8
  120. package/package.json +1 -1
  121. package/lib/checkbox/Label.js +0 -31
  122. package/lib/inputs/mask/imaskHOC.js +0 -203
  123. package/lib/menus/sidenav/popup_menu_help/index.js +0 -85
  124. package/lib/tabs/DropdownItems.js +0 -62
  125. package/lib/tabs/MenuItems.js +0 -70
  126. package/lib/treeview_old/Header.js +0 -29
  127. package/lib/treeview_old/Node.js +0 -68
  128. package/lib/treeview_old/index.js +0 -43
package/lib/list/Item.js CHANGED
@@ -60,7 +60,8 @@ const Item = props => {
60
60
  const disabledByPermission = onDenied.disabled;
61
61
  const shouldDisable = () => disabled || onDenied.disabled;
62
62
  const disabledIconColor = 'rgb(193, 193, 193)';
63
- const getClass = () => "item ".concat(customClass, " ").concat(separator && 'list-separator', " ").concat(shouldDisable() && 'disabled', "\n ").concat(displayCheckbox && 'list-checkbox');
63
+ const getClass = () => `item ${customClass} ${separator && 'list-separator'} ${shouldDisable() && 'disabled'}
64
+ ${displayCheckbox && 'list-checkbox'}`;
64
65
  const getIcon = (iconName, icon) => {
65
66
  const noIconDisabledByPermission = !icon && !displayCheckbox && !leftElement && !leftIconName && !leftIcon && onDenied.disabled;
66
67
  if (icon) {
@@ -131,22 +132,23 @@ const Item = props => {
131
132
  return itemId && selectedItemId === itemId ? selectedItemRef : null;
132
133
  },
133
134
  style: style,
134
- className: "item-container ".concat(hovered && 'hovered', "\n ").concat(itemId && selectedItemId === itemId ? '-activedlist' : '')
135
+ className: `item-container ${hovered && 'hovered'}
136
+ ${itemId && selectedItemId === itemId ? '-activedlist' : ''}`
135
137
  }, getProps(), {
136
138
  key: itemId
137
139
  }), url && !shouldDisable() && /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
138
140
  className: "linkitem",
139
141
  to: url
140
142
  }), (displayCheckbox || leftElement || leftIconName || leftIcon) && /*#__PURE__*/_react.default.createElement("div", {
141
- className: "".concat(getClass(), " -icon-left")
143
+ className: `${getClass()} -icon-left`
142
144
  }, renderCheckBox, leftElement, getIcon(leftIconName, leftIcon)), (text || subText || children) && /*#__PURE__*/_react.default.createElement("div", {
143
- className: "".concat(getClass())
145
+ className: `${getClass()}`
144
146
  }, /*#__PURE__*/_react.default.createElement("p", {
145
- className: "".concat(text && 'text')
147
+ className: `${text && 'text'}`
146
148
  }, text), /*#__PURE__*/_react.default.createElement("p", {
147
- className: "".concat(subText && 'subtext')
149
+ className: `${subText && 'subtext'}`
148
150
  }, subText), children), (rightIconName || rightIcon || rightElement || disabledByPermission) && /*#__PURE__*/_react.default.createElement("div", {
149
- className: "".concat(getClass(), " -icon-right")
151
+ className: `${getClass()} -icon-right`
150
152
  }, getIcon(rightIconName, rightIcon), rightElement));
151
153
  };
152
154
  var _default = exports.default = (0, _withTooltip.default)(Item);
package/lib/list/index.js CHANGED
@@ -175,7 +175,8 @@ const List = props => {
175
175
  "data-testid": "list-component",
176
176
  style: style,
177
177
  ref: listRef,
178
- className: "list-component ".concat(condensed && '-condensed', "\n ").concat(customClass, " ").concat(!transparent && '-listbackground')
178
+ className: `list-component ${condensed && '-condensed'}
179
+ ${customClass} ${!transparent && '-listbackground'}`
179
180
  }, newChildren));
180
181
  };
181
182
  var _default = exports.default = List;
@@ -29,7 +29,7 @@ const MenuItem = _ref => {
29
29
  const dropdownContext = (0, _react.useContext)(_withDropdown.WithDropdownContext);
30
30
  const handleOnClick = () => {
31
31
  if (onClick) {
32
- onClick(dropdownContext === null || dropdownContext === void 0 ? void 0 : dropdownContext.handleDropdownClose);
32
+ onClick(dropdownContext?.handleDropdownClose);
33
33
  return;
34
34
  }
35
35
  if (dropdownContext) dropdownContext.handleDropdownClose();
@@ -37,7 +37,7 @@ const MenuItem = _ref => {
37
37
  return /*#__PURE__*/_react.default.createElement("div", {
38
38
  className: "floatmenuitem"
39
39
  }, /*#__PURE__*/_react.default.createElement("div", {
40
- className: "".concat(customClassMenuItem, " -items")
40
+ className: `${customClassMenuItem} -items`
41
41
  }, !_lodash.default.isEmpty(dropdownMenu) && !onClick && /*#__PURE__*/_react.default.createElement(_buttons.default, {
42
42
  customClass: "floatmenudropdown",
43
43
  iconName: "more1",
@@ -46,7 +46,7 @@ const SubMenuContainer = _ref => {
46
46
  handlerGoBack();
47
47
  }, []);
48
48
  return /*#__PURE__*/_react.default.createElement("div", {
49
- className: "floatsubmenu ".concat(customClass)
49
+ className: `floatsubmenu ${customClass}`
50
50
  }, /*#__PURE__*/_react.default.createElement("div", {
51
51
  className: "submenuheader"
52
52
  }, /*#__PURE__*/_react.default.createElement(_icons.default, {
@@ -47,7 +47,7 @@ const FloatMenu = props => {
47
47
  return /*#__PURE__*/_react.default.createElement(_helpers.default.Provider, {
48
48
  value: contextValues
49
49
  }, /*#__PURE__*/_react.default.createElement("div", {
50
- className: "floatmenu-component ".concat(customClass)
50
+ className: `floatmenu-component ${customClass}`
51
51
  }, /*#__PURE__*/_react.default.createElement(_buttons.default, {
52
52
  transparent: true,
53
53
  key: "button-",
@@ -14,7 +14,7 @@ const ExpandMenu = _ref => {
14
14
  iconName
15
15
  } = _ref;
16
16
  return /*#__PURE__*/_react.default.createElement("div", {
17
- className: "openclosemenu ".concat(expandMenuCustomClass),
17
+ className: `openclosemenu ${expandMenuCustomClass}`,
18
18
  role: "button",
19
19
  tabIndex: 0,
20
20
  onClick: onExpandMenu,
@@ -20,7 +20,7 @@ const NavMenuGroup = _ref => {
20
20
  } = (0, _react.useContext)(_helpers.SideNavContext);
21
21
  return /*#__PURE__*/_react.default.createElement("ul", {
22
22
  style: style,
23
- className: "".concat(scrollable && 'customscroll', " ").concat((0, _helpers.default)(isExpanded, menuSize))
23
+ className: `${scrollable && 'customscroll'} ${(0, _helpers.default)(isExpanded, menuSize)}`
24
24
  }, children);
25
25
  };
26
26
  var _default = exports.default = NavMenuGroup;
@@ -76,19 +76,17 @@ const NavMenuItem = props => {
76
76
  (0, _react.useEffect)(() => {
77
77
  if (showSubMenu && showDropdownOnClick) {
78
78
  document.addEventListener('click', e => {
79
- var _menuItemRef$current;
80
79
  const target = e.target;
81
- const insideMenu = (_menuItemRef$current = menuItemRef.current) === null || _menuItemRef$current === void 0 ? void 0 : _menuItemRef$current.contains(target);
80
+ const insideMenu = menuItemRef.current?.contains(target);
82
81
  if (!insideMenu) setShowSubMenu(false);
83
82
  });
84
83
  }
85
84
  }, [showSubMenu, showDropdownOnClick]);
86
85
  (0, _react.useEffect)(() => {
87
- var _submenuContainerRef$, _submenuContentRef$cu, _submenuContentRef$cu2;
88
- const heigthSubmenuContainer = ((_submenuContainerRef$ = submenuContainerRef.current) === null || _submenuContainerRef$ === void 0 ? void 0 : _submenuContainerRef$.clientHeight) || 0;
89
- const heigthSubmenuContent = ((_submenuContentRef$cu = submenuContentRef.current) === null || _submenuContentRef$cu === void 0 ? void 0 : _submenuContentRef$cu.clientHeight) || 0;
86
+ const heigthSubmenuContainer = submenuContainerRef.current?.clientHeight || 0;
87
+ const heigthSubmenuContent = submenuContentRef.current?.clientHeight || 0;
90
88
  const maxHeigthSubMenu = isOnEndWindow ? '100%' : (window.innerHeight - targetDimensions.top - (heigthSubmenuContainer - heigthSubmenuContent) - 1).toString().concat('px') || '0px';
91
- (_submenuContentRef$cu2 = submenuContentRef.current) === null || _submenuContentRef$cu2 === void 0 ? void 0 : _submenuContentRef$cu2.style.setProperty('max-height', maxHeigthSubMenu);
89
+ submenuContentRef.current?.style.setProperty('max-height', maxHeigthSubMenu);
92
90
  }, [showSubMenu]);
93
91
  if (unvisible) return null;
94
92
  return /*#__PURE__*/_react.default.createElement(_helpers.SubMenuContext.Provider, {
@@ -99,7 +97,7 @@ const NavMenuItem = props => {
99
97
  menuItemRef.current = r;
100
98
  if (targetRef) targetRef(r);
101
99
  },
102
- className: "item ".concat(url && !disabled && '-withlink', " ").concat(customClass, " ").concat(disabled && '-disabled'),
100
+ className: `item ${url && !disabled && '-withlink'} ${customClass} ${disabled && '-disabled'}`,
103
101
  onMouseEnter: onMouseEnter,
104
102
  onMouseLeave: () => {
105
103
  if (showDropdownOnClick) return;
@@ -123,7 +121,7 @@ const NavMenuItem = props => {
123
121
  className: "title"
124
122
  }, title), !childrenIsSubMenu && children)), showSubMenu && children && childrenIsSubMenu && !disabled && !openSearchMenuPopup && /*#__PURE__*/_react.default.createElement("div", {
125
123
  ref: submenuContainerRef,
126
- className: "".concat(customClassForDropdown, " ").concat(disableDefaultStyle ? '' : 'submenu-container'),
124
+ className: `${customClassForDropdown} ${disableDefaultStyle ? '' : 'submenu-container'}`,
127
125
  style: isOnEndWindow ? {
128
126
  marginLeft: targetDimensions.width,
129
127
  bottom: '0',
@@ -141,7 +139,7 @@ const NavMenuItem = props => {
141
139
  ref: submenuContentRef,
142
140
  className: "submenu",
143
141
  style: {
144
- gridTemplateColumns: "repeat(".concat(columnsQtty, ", 1fr)")
142
+ gridTemplateColumns: `repeat(${columnsQtty}, 1fr)`
145
143
  }
146
144
  }, children))));
147
145
  };
@@ -28,7 +28,7 @@ const NavSubMenuItem = _ref => {
28
28
  } = onDenied;
29
29
  if (unvisible) return null;
30
30
  return /*#__PURE__*/_react.default.createElement("div", {
31
- className: "item hvr-forward ".concat(disabled && '-disabled'),
31
+ className: `item hvr-forward ${disabled && '-disabled'}`,
32
32
  onKeyDown: () => {},
33
33
  role: "button",
34
34
  tabIndex: -1,
@@ -9,7 +9,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
9
9
  const getCssClassMenu = (isExpanded, size) => {
10
10
  let cssClass = 'expandedmenu';
11
11
  if (!isExpanded) {
12
- cssClass = "collapsedmenu -".concat(size);
12
+ cssClass = `collapsedmenu -${size}`;
13
13
  }
14
14
  return cssClass;
15
15
  };
@@ -70,7 +70,7 @@ const SideNav = props => {
70
70
  width,
71
71
  height
72
72
  } = sideNavDimensions;
73
- const style = "left: ".concat(left + width + 5, "px; top: ").concat(top + 1, "px; height: ").concat(height - 8, "px;");
73
+ const style = `left: ${left + width + 5}px; top: ${top + 1}px; height: ${height - 8}px;`;
74
74
  return style;
75
75
  };
76
76
  const closeSearchMenuPopup = () => {
@@ -82,7 +82,7 @@ const SideNav = props => {
82
82
  } = child;
83
83
  if ((type === _NavMenuItem.default || type === _NavSubMenuItem.default) && !child.props.children) {
84
84
  setMenuItemsContent(prevState => [...prevState, {
85
- id: "".concat(child.props.title, "-").concat(uuid.v1()),
85
+ id: `${child.props.title}-${uuid.v1()}`,
86
86
  content: child.props.title,
87
87
  url: child.props.url
88
88
  }]);
@@ -127,7 +127,7 @@ const SideNav = props => {
127
127
  }, [expanded]);
128
128
  const returnMenuItems = () => menuItemsContent.filter(item => item.content !== '');
129
129
  const getPopupMenuSearch = () => /*#__PURE__*/_react.default.createElement(_NavMenuGroup.default, {
130
- key: "popup-menusearch-".concat(uuid.v1())
130
+ key: `popup-menusearch-${uuid.v1()}`
131
131
  }, /*#__PURE__*/_react.default.createElement(_NavMenuItem.default, {
132
132
  childrenIsSubMenu: false,
133
133
  customClass: "-customsidenavitem",
@@ -165,10 +165,10 @@ const SideNav = props => {
165
165
  return /*#__PURE__*/_react.default.createElement(_helpers.SideNavContext.Provider, {
166
166
  value: contextValues
167
167
  }, /*#__PURE__*/_react.default.createElement("div", {
168
- className: "sidenav-component ".concat(isExpanded ? '-expanded' : '', " ").concat(openSearchMenuPopup ? '-blocked' : '', " ").concat(customClass),
168
+ className: `sidenav-component ${isExpanded ? '-expanded' : ''} ${openSearchMenuPopup ? '-blocked' : ''} ${customClass}`,
169
169
  ref: sideNavRef
170
170
  }, showExpandMenu && /*#__PURE__*/_react.default.createElement(_ExpandMenu.default, {
171
- expandMenuCustomClass: "".concat(isExpanded && 'closefromexpanded', " ").concat(expandMenuCustomClass),
171
+ expandMenuCustomClass: `${isExpanded && 'closefromexpanded'} ${expandMenuCustomClass}`,
172
172
  onExpandMenu: onHeaderClick,
173
173
  iconName: isExpanded ? 'arrow_left' : 'arrow_right'
174
174
  }), getSideNavContent()));
@@ -56,9 +56,8 @@ const PanelContent = _ref => {
56
56
  scrollHeight
57
57
  } = rootElementRef.current;
58
58
  if (scrollHeight !== lastScrollHeight.current) {
59
- var _observer;
60
59
  enableOnEndReached.current = true;
61
- (_observer = observer) === null || _observer === void 0 ? void 0 : _observer.disconnect();
60
+ observer?.disconnect();
62
61
  }
63
62
  });
64
63
  observer.observe(rootElementRef.current);
@@ -66,16 +65,15 @@ const PanelContent = _ref => {
66
65
  rootElementRef.current.addEventListener('resize', onScrollEndReached);
67
66
  }
68
67
  return () => {
69
- var _rootElementRef$curre, _rootElementRef$curre2, _observer2;
70
- (_rootElementRef$curre = rootElementRef.current) === null || _rootElementRef$curre === void 0 ? void 0 : _rootElementRef$curre.removeEventListener('scroll', onScrollEndReached);
71
- (_rootElementRef$curre2 = rootElementRef.current) === null || _rootElementRef$curre2 === void 0 ? void 0 : _rootElementRef$curre2.removeEventListener('resize', onScrollEndReached);
72
- (_observer2 = observer) === null || _observer2 === void 0 ? void 0 : _observer2.disconnect();
68
+ rootElementRef.current?.removeEventListener('scroll', onScrollEndReached);
69
+ rootElementRef.current?.removeEventListener('resize', onScrollEndReached);
70
+ observer?.disconnect();
73
71
  };
74
72
  }, [onScrollEndReached]);
75
73
  if (!opened) return null;
76
74
  return hideContent ? /*#__PURE__*/_react.default.createElement(_noPermission.default, null) : /*#__PURE__*/_react.default.createElement("div", _extends({
77
75
  ref: rootElementRef,
78
- className: "panel-content ".concat(customClass !== null && customClass !== void 0 ? customClass : '')
76
+ className: `panel-content ${customClass ?? ''}`
79
77
  }, rest), opened && children);
80
78
  };
81
79
  var _default = exports.default = PanelContent;
@@ -37,8 +37,8 @@ const DefaultPanel = _ref => {
37
37
  } = _permissionValidations.OPTIONS_ON_DENIED;
38
38
  const [onDenied] = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)([hideContent, unvisible], permissionAttr));
39
39
  const getCssClass = () => {
40
- let cssClass = "panel-component ".concat(customClass);
41
- cssClass += colorStyle !== '' ? " -".concat(colorStyle) : '';
40
+ let cssClass = `panel-component ${customClass}`;
41
+ cssClass += colorStyle !== '' ? ` -${colorStyle}` : '';
42
42
  return cssClass;
43
43
  };
44
44
  const renderContent = () => /*#__PURE__*/_react.default.createElement("div", _extends({
@@ -32,7 +32,7 @@ const getClassName = _ref => {
32
32
  customClass,
33
33
  headerColored = true
34
34
  } = _ref;
35
- let className = "panel-header ".concat(customClass !== null && customClass !== void 0 ? customClass : '');
35
+ let className = `panel-header ${customClass ?? ''}`;
36
36
  if (!headerColored) className += ' -uncolored';
37
37
  return className;
38
38
  };
@@ -56,9 +56,9 @@ const PanelHeader = props => {
56
56
  return /*#__PURE__*/_react.default.createElement("div", _extends({
57
57
  className: getClassName(props)
58
58
  }, rest), (icon || titleIcon) && /*#__PURE__*/_react.default.createElement("div", {
59
- className: "".concat(icon !== null || titleIcon !== null ? 'icon-left-panel' : '')
59
+ className: `${icon !== null || titleIcon !== null ? 'icon-left-panel' : ''}`
60
60
  }, getIcon(titleIcon, icon)), title && /*#__PURE__*/_react.default.createElement("h1", {
61
- className: "title ".concat(customClassForTitle !== null && customClassForTitle !== void 0 ? customClassForTitle : ''),
61
+ className: `title ${customClassForTitle ?? ''}`,
62
62
  style: styleForTitle
63
63
  }, title), toggleable && /*#__PURE__*/_react.default.createElement(_buttons.ButtonContainer, {
64
64
  position: "right"
@@ -45,7 +45,7 @@ const actionsOnPermissionDenied = (options, permissionAttr) => {
45
45
  }
46
46
  const result = {};
47
47
  options.forEach(option => {
48
- result[option] = hasPermission ? false : option === (permissionsAttr === null || permissionsAttr === void 0 ? void 0 : permissionsAttr[0].onDenied);
48
+ result[option] = hasPermission ? false : option === permissionsAttr?.[0].onDenied;
49
49
  });
50
50
  return result;
51
51
  };
@@ -56,7 +56,7 @@ const Popover = _ref => {
56
56
  e.preventDefault();
57
57
  }
58
58
  }, /*#__PURE__*/_react.default.createElement("div", {
59
- className: "".concat(customClass, " popovercontainer -").concat(theme),
59
+ className: `${customClass} popovercontainer -${theme}`,
60
60
  "data-testid": "popover-container"
61
61
  }, children));
62
62
  };
@@ -18,8 +18,8 @@ const getPercentage = _ref => {
18
18
  };
19
19
  const getClass = props => {
20
20
  let style = 'bar';
21
- if (props.customClass) style += "".concat(props.customClass);
22
- if (props.type) style += " -".concat(props.type);
21
+ if (props.customClass) style += `${props.customClass}`;
22
+ if (props.type) style += ` -${props.type}`;
23
23
  if (props.effect) style += ' -effect';
24
24
  if (props.animated) style += ' -animated';
25
25
  if (props.indeterminate) style += ' -indeterminate';
@@ -28,7 +28,7 @@ const getClass = props => {
28
28
  const getLabel = progress => {
29
29
  let value = progress.label;
30
30
  if (!progress.label) {
31
- value = "".concat(getPercentage(progress), "%");
31
+ value = `${getPercentage(progress)}%`;
32
32
  }
33
33
  return /*#__PURE__*/_react.default.createElement("span", {
34
34
  className: "progressbar-label "
@@ -46,12 +46,12 @@ const getStyle = props => {
46
46
  return {
47
47
  width: progressWidth,
48
48
  height,
49
- animationDuration: "".concat(indeterminateDuration, "s"),
50
- animationDelay: "".concat(indeterminateDelay, "s")
49
+ animationDuration: `${indeterminateDuration}s`,
50
+ animationDelay: `${indeterminateDelay}s`
51
51
  };
52
52
  }
53
53
  return {
54
- width: "".concat(getPercentage(props), "%"),
54
+ width: `${getPercentage(props)}%`,
55
55
  height
56
56
  };
57
57
  };
@@ -79,7 +79,7 @@ const Radio = _ref => {
79
79
  alignItems: 'center'
80
80
  }
81
81
  }, /*#__PURE__*/_react.default.createElement("div", {
82
- className: "radio-button ".concat(disabled ? 'disabled' : '', " ").concat(skeletonize ? '-skeletonized' : '')
82
+ className: `radio-button ${disabled ? 'disabled' : ''} ${skeletonize ? '-skeletonized' : ''}`
83
83
  }, /*#__PURE__*/_react.default.createElement("input", _extends({}, getCustomProps(), {
84
84
  ref: inputRef,
85
85
  className: "radio-component",
@@ -90,7 +90,7 @@ const Radio = _ref => {
90
90
  required: required,
91
91
  disabled: shouldDisable()
92
92
  })), /*#__PURE__*/_react.default.createElement("label", {
93
- className: "description ".concat(size && "-".concat(size)),
93
+ className: `description ${size && `-${size}`}`,
94
94
  htmlFor: id
95
95
  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_textContent.default, {
96
96
  required: required,
@@ -21,7 +21,7 @@ const Shortcuts = _ref => {
21
21
  style: style
22
22
  }, /*#__PURE__*/_react.default.createElement("kbd", {
23
23
  "data-testid": "shortcut",
24
- className: "shortcut-component ".concat(type && "-".concat(type)),
24
+ className: `shortcut-component ${type && `-${type}`}`,
25
25
  style: styleShortcut
26
26
  }, shortcut), ":\xA0", description);
27
27
  };
@@ -13,7 +13,8 @@ const SkeletonContainer = _ref => {
13
13
  customClass,
14
14
  style
15
15
  } = _ref;
16
- const getClass = () => "skeletoncontainer-component ".concat(customClass, "\n ").concat(row && '-row');
16
+ const getClass = () => `skeletoncontainer-component ${customClass}
17
+ ${row && '-row'}`;
17
18
  return /*#__PURE__*/_react.default.createElement("div", {
18
19
  className: getClass(),
19
20
  style: style
@@ -35,7 +35,10 @@ const Skeleton = props => {
35
35
  width,
36
36
  height
37
37
  };
38
- const getClass = () => "skeleton-component ".concat(customClass, "\n ").concat(color && "-".concat(color), "\n ").concat(round && '-round', "\n ").concat(round && size && "-".concat(size));
38
+ const getClass = () => `skeleton-component ${customClass}
39
+ ${color && `-${color}`}
40
+ ${round && '-round'}
41
+ ${round && size && `-${size}`}`;
39
42
  const renderContent = () => /*#__PURE__*/_react.default.createElement("div", {
40
43
  className: getClass(),
41
44
  style: _objectSpread(_objectSpread({}, customStyles), style)
@@ -37,8 +37,8 @@ const Spinner = props => {
37
37
  };
38
38
  }, []);
39
39
  const getCssClass = () => {
40
- let css = "spinner-component -".concat(align, " ").concat(customClass, " ");
41
- if (heightAuto) css = "".concat(css, " -heightauto");
40
+ let css = `spinner-component -${align} ${customClass} `;
41
+ if (heightAuto) css = `${css} -heightauto`;
42
42
  return css;
43
43
  };
44
44
  if (delay) return null;
@@ -246,7 +246,7 @@ const Split = _ref => {
246
246
  } = state;
247
247
  let containerClasses = 'split-component';
248
248
  if (customClass) {
249
- containerClasses += " ".concat(customClass);
249
+ containerClasses += ` ${customClass}`;
250
250
  }
251
251
  if (vertical) {
252
252
  containerClasses += ' splitter-layout-vertical';
@@ -27,15 +27,15 @@ const SplitSide = _ref => {
27
27
  const splitSideStyle = {};
28
28
  if (!primary) {
29
29
  if (vertical) {
30
- splitSideStyle.height = "".concat(sizeSplitSide).concat(unit);
30
+ splitSideStyle.height = `${sizeSplitSide}${unit}`;
31
31
  } else {
32
- splitSideStyle.width = "".concat(sizeSplitSide).concat(unit);
32
+ splitSideStyle.width = `${sizeSplitSide}${unit}`;
33
33
  }
34
34
  } else {
35
35
  classes += ' layout-pane-primary';
36
36
  }
37
37
  return /*#__PURE__*/_react.default.createElement("div", {
38
- className: "".concat(classes, " ").concat(customClass),
38
+ className: `${classes} ${customClass}`,
39
39
  style: Object.assign({}, splitSideStyle, style)
40
40
  }, children);
41
41
  };
package/lib/table/Body.js CHANGED
@@ -28,7 +28,7 @@ const renderChildren = (children, _ref) => {
28
28
  key: index
29
29
  }, columns.map(id => /*#__PURE__*/_react.default.createElement(_index.Td, {
30
30
  style: {
31
- width: columnsWidth === null || columnsWidth === void 0 ? void 0 : columnsWidth[id - 1]
31
+ width: columnsWidth?.[id - 1]
32
32
  },
33
33
  key: id
34
34
  }, /*#__PURE__*/_react.default.createElement(_skeleton.default, {
@@ -63,9 +63,9 @@ const TableBody = _ref2 => {
63
63
  contain: strict ? 'strict' : 'size layout style'
64
64
  }
65
65
  }, /*#__PURE__*/_react.default.createElement("tbody", {
66
- className: "tbody ".concat(isSkeletonized ? 'skeleton-transparency' : '', " ").concat(customClass)
66
+ className: `tbody ${isSkeletonized ? 'skeleton-transparency' : ''} ${customClass}`
67
67
  }, renderChildren(children, context)))) : /*#__PURE__*/_react.default.createElement("tbody", {
68
- className: "tbody ".concat(isSkeletonized ? 'skeleton-transparency' : '', " ").concat(customClass)
68
+ className: `tbody ${isSkeletonized ? 'skeleton-transparency' : ''} ${customClass}`
69
69
  }, renderChildren(children, context));
70
70
  };
71
71
  var _default = exports.default = TableBody;
@@ -12,7 +12,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
12
12
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
13
13
  const getColumnsWidth = children => {
14
14
  const columnsWidth = [];
15
- if ( /*#__PURE__*/(0, _react.isValidElement)(children) && children.props) {
15
+ if (/*#__PURE__*/(0, _react.isValidElement)(children) && children.props) {
16
16
  let columns = children.props.children;
17
17
  if (!_lodash.default.isArray(columns)) columns = [columns];
18
18
  columns.forEach(element => {
@@ -20,14 +20,12 @@ const getColumnsWidth = children => {
20
20
  if (_lodash.default.isArray(element)) {
21
21
  element.forEach(elementArray => {
22
22
  if (elementArray && elementArray.props) {
23
- var _elementArray$props, _elementArray$props$s;
24
- colWidth = (_elementArray$props = elementArray.props) === null || _elementArray$props === void 0 ? void 0 : (_elementArray$props$s = _elementArray$props.style) === null || _elementArray$props$s === void 0 ? void 0 : _elementArray$props$s.width;
23
+ colWidth = elementArray.props?.style?.width;
25
24
  }
26
25
  columnsWidth.push(colWidth);
27
26
  });
28
27
  } else if (element && element.props) {
29
- var _element$props, _element$props$style;
30
- colWidth = (_element$props = element.props) === null || _element$props === void 0 ? void 0 : (_element$props$style = _element$props.style) === null || _element$props$style === void 0 ? void 0 : _element$props$style.width;
28
+ colWidth = element.props?.style?.width;
31
29
  columnsWidth.push(colWidth);
32
30
  }
33
31
  });
@@ -36,9 +34,8 @@ const getColumnsWidth = children => {
36
34
  };
37
35
  const countColumnsFromChildren = (element, columnsCount) => {
38
36
  const count = columnsCount;
39
- if ( /*#__PURE__*/(0, _react.isValidElement)(element)) {
40
- var _element$props2;
41
- if (_lodash.default.isArray(element === null || element === void 0 ? void 0 : (_element$props2 = element.props) === null || _element$props2 === void 0 ? void 0 : _element$props2.children)) {
37
+ if (/*#__PURE__*/(0, _react.isValidElement)(element)) {
38
+ if (_lodash.default.isArray(element?.props?.children)) {
42
39
  const currentElement = element.props;
43
40
  currentElement.children.forEach(child => countColumnsFromChildren(child, count));
44
41
  } else if (element) {
@@ -51,7 +48,7 @@ const countColumnsFromChildren = (element, columnsCount) => {
51
48
  const getColumnsCount = (children, columnsCount) => {
52
49
  if (_lodash.default.isArray(children) && children.length > 0 && children[0].props) {
53
50
  countColumnsFromChildren(children[0].props.children, columnsCount);
54
- } else if ( /*#__PURE__*/(0, _react.isValidElement)(children) && children.props && children.props.children) {
51
+ } else if (/*#__PURE__*/(0, _react.isValidElement)(children) && children.props && children.props.children) {
55
52
  countColumnsFromChildren(children.props.children, columnsCount);
56
53
  }
57
54
  return columnsCount.current;
@@ -85,9 +82,9 @@ const Header = _ref => {
85
82
  tableLayout: 'fixed'
86
83
  }
87
84
  }, /*#__PURE__*/_react.default.createElement("thead", {
88
- className: "theader ".concat(customClass)
85
+ className: `theader ${customClass}`
89
86
  }, children))) : /*#__PURE__*/_react.default.createElement("thead", {
90
- className: "theader ".concat(customClass)
87
+ className: `theader ${customClass}`
91
88
  }, children);
92
89
  };
93
90
  var _default = exports.default = Header;
@@ -44,7 +44,7 @@ const HeaderColumn = props => {
44
44
  return /*#__PURE__*/_react.default.createElement("th", _extends({}, getProps(), {
45
45
  id: id,
46
46
  style: style,
47
- className: "headercolumn ".concat(customClass, " text-align-").concat(textAlign, " ").concat(isMenuColumn && 'menu-column')
47
+ className: `headercolumn ${customClass} text-align-${textAlign} ${isMenuColumn && 'menu-column'}`
48
48
  }), skeletonize && (skeletonInHeader || !skeletonInRows) && !vertical ? /*#__PURE__*/_react.default.createElement(_skeleton.default, {
49
49
  height: style && style.height ? undefined : 16,
50
50
  style: {
package/lib/table/Row.js CHANGED
@@ -53,7 +53,7 @@ const Row = props => {
53
53
  }, !divider ? /*#__PURE__*/_react.default.createElement("tr", {
54
54
  onMouseEnter: onMouseEnter,
55
55
  onMouseLeave: onMouseLeave,
56
- className: "trow ".concat(customClass, " ").concat(rowId && selectedRowId === rowId ? '-selected' : ''),
56
+ className: `trow ${customClass} ${rowId && selectedRowId === rowId ? '-selected' : ''}`,
57
57
  onClick: e => {
58
58
  if (handleSelectRow && (rowId !== undefined || rowId !== null)) handleSelectRow(rowId);
59
59
  if (handleTableRowClick) handleTableRowClick(e, dataId);
@@ -67,11 +67,11 @@ const Row = props => {
67
67
  className: "trow trow-divider"
68
68
  }, vertical ? /*#__PURE__*/_react.default.createElement("th", {
69
69
  colSpan: dividerColSpan,
70
- className: "-divider -".concat(dividerColor),
70
+ className: `-divider -${dividerColor}`,
71
71
  style: dividerStyle
72
72
  }, dividerTitle || '') : /*#__PURE__*/_react.default.createElement("td", {
73
73
  colSpan: dividerColSpan,
74
- className: "-divider -".concat(dividerColor),
74
+ className: `-divider -${dividerColor}`,
75
75
  style: dividerStyle
76
76
  }, dividerTitle || '')));
77
77
  };
@@ -71,7 +71,7 @@ const RowColumn = props => {
71
71
  return /*#__PURE__*/_react.default.createElement("td", {
72
72
  rowSpan: rowSpan,
73
73
  colSpan: colSpan,
74
- className: "rowcolumn ".concat(customClass, " text-align-").concat(textAlign, " ").concat(!context.rowBorder && ' -noborder', " ").concat(!rowSpan ? ' -norowspan' : '', " ").concat(isMenuColumn && 'menu-column'),
74
+ className: `rowcolumn ${customClass} text-align-${textAlign} ${!context.rowBorder && ' -noborder'} ${!rowSpan ? ' -norowspan' : ''} ${isMenuColumn && 'menu-column'}`,
75
75
  style: style,
76
76
  onClick: e => getColClickEvent(e, _objectSpread(_objectSpread({}, context), props)),
77
77
  role: "presentation",
@@ -65,7 +65,12 @@ const getClass = _ref => {
65
65
  bodyScrollable,
66
66
  skeletonInRows = 10
67
67
  } = _ref;
68
- return "table-component ".concat(customClass, " ").concat(striped && '-striped', " \n ").concat(bordered && '-bordered', " ").concat(hovered && '-hovered', " ").concat(headerColored && '-headercolor', "\n ").concat(condensed && '-condensed', "\n ").concat(vertical && '-vertical', "\n ").concat(skeletonize && !skeletonInRows ? '-skeletonized' : '', "\n ").concat(bodyScrollable ? '-scrollable' : '');
68
+ return `table-component ${customClass} ${striped && '-striped'}
69
+ ${bordered && '-bordered'} ${hovered && '-hovered'} ${headerColored && '-headercolor'}
70
+ ${condensed && '-condensed'}
71
+ ${vertical && '-vertical'}
72
+ ${skeletonize && !skeletonInRows ? '-skeletonized' : ''}
73
+ ${bodyScrollable ? '-scrollable' : ''}`;
69
74
  };
70
75
  const Table = _ref2 => {
71
76
  let {
@@ -62,7 +62,7 @@ const DropdownTabs = _ref2 => {
62
62
  transparent: true,
63
63
  boxShadow: false,
64
64
  size: "large",
65
- customClass: "dropdownbutton ".concat(hasTabs ? 'show' : '')
65
+ customClass: `dropdownbutton ${hasTabs ? 'show' : ''}`
66
66
  }, /*#__PURE__*/_react.default.createElement(_list.default, {
67
67
  customClass: "dropdown-hide-tabs"
68
68
  }, uniqueTabs.map(tab => /*#__PURE__*/_react.default.createElement(DropdownTab, _extends({
package/lib/tabs/Menu.js CHANGED
@@ -40,7 +40,7 @@ const Menu = _ref => {
40
40
  tabMenuAlign: props.tabMenuAlign,
41
41
  firstTabIdent: props.firstTabIdent
42
42
  }), toolbar && /*#__PURE__*/_react.default.cloneElement(toolbar, {
43
- customClass: "menubar ".concat(customClassForToolBar)
43
+ customClass: `menubar ${customClassForToolBar}`
44
44
  }));
45
45
  };
46
46
  var _default = exports.default = Menu;