linear-react-components-ui 1.1.20-beta.10 → 1.1.20-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.
- package/lib/alerts/BaseAlert.js +1 -1
- package/lib/alerts/Message.js +1 -1
- package/lib/assets/styles/button.scss +1 -0
- package/lib/assets/styles/select.scss +1 -2
- package/lib/assets/styles/table.scss +6 -10
- package/lib/assets/styles/toolbar.scss +0 -3
- package/lib/avatar/index.js +9 -8
- package/lib/badge/index.js +4 -4
- package/lib/buttons/DangerButton.js +1 -1
- package/lib/buttons/DefaultButton.js +17 -5
- package/lib/buttons/InfoButton.js +1 -1
- package/lib/buttons/PrimaryButton.js +1 -1
- package/lib/buttons/SuccessButton.js +1 -1
- package/lib/buttons/WarningButton.js +1 -1
- package/lib/buttons/button_container/index.js +1 -1
- package/lib/buttons/split_button/index.js +1 -1
- package/lib/buttons/types.d.ts +1 -0
- package/lib/calendar/base/Day.js +1 -1
- package/lib/calendar/base/Month.js +1 -1
- package/lib/calendar/base/helpers.js +2 -2
- package/lib/calendar/base/index.js +1 -1
- package/lib/dialog/Custom.js +1 -1
- package/lib/dialog/base/Content.d.ts +1 -1
- package/lib/dialog/base/Content.js +2 -3
- package/lib/dialog/base/Header.js +2 -2
- package/lib/dialog/base/index.js +4 -6
- package/lib/dialog/form/index.js +3 -8
- package/lib/dialog/types.d.ts +4 -34
- package/lib/drawer/Drawer.js +3 -3
- package/lib/drawer/Header.js +1 -1
- package/lib/dropdown/Popup.d.ts +1 -1
- package/lib/dropdown/Popup.js +43 -22
- package/lib/dropdown/helper.js +1 -1
- package/lib/dropdown/types.d.ts +6 -2
- package/lib/dropdown/withDropdown.js +7 -6
- package/lib/fieldset/index.js +7 -7
- package/lib/form/Field.js +24 -11
- package/lib/form/FieldArray.js +25 -10
- package/lib/form/FieldNumber.js +21 -9
- package/lib/form/FieldPeriod.js +5 -5
- package/lib/form/index.js +6 -9
- package/lib/form/types.d.ts +6 -10
- package/lib/form/withFieldHOC.js +2 -2
- package/lib/gridlayout/GridCol.js +5 -5
- package/lib/gridlayout/GridRow.js +4 -1
- package/lib/gridlayout/types.d.ts +1 -1
- package/lib/hint/index.js +7 -1
- package/lib/icons/helper.d.ts +0 -20
- package/lib/icons/helper.js +0 -20
- package/lib/icons/index.js +24 -27
- package/lib/inputs/base/InputTextBase.js +6 -9
- package/lib/inputs/base/Label.js +1 -1
- package/lib/inputs/base/helpers.js +7 -3
- package/lib/inputs/date/helpers.js +4 -1
- package/lib/inputs/date/index.js +9 -15
- package/lib/inputs/errorMessage/index.js +1 -1
- package/lib/inputs/file/DefaultFile.js +5 -6
- package/lib/inputs/file/DragDropFile.js +15 -17
- package/lib/inputs/file/File.js +3 -4
- package/lib/inputs/mask/BaseMask.js +1 -1
- package/lib/inputs/multiSelect/Dropdown.js +9 -10
- package/lib/inputs/multiSelect/helper.js +1 -2
- package/lib/inputs/multiSelect/index.js +7 -9
- package/lib/inputs/number/BaseNumber.d.ts +1 -1
- package/lib/inputs/number/BaseNumber.js +9 -2
- package/lib/inputs/number/Currency.d.ts +1 -1
- package/lib/inputs/number/Currency.js +11 -4
- package/lib/inputs/number/index.js +1 -1
- package/lib/inputs/period/PeriodList.js +1 -1
- package/lib/inputs/period/helper.js +3 -1
- package/lib/inputs/period/index.js +9 -14
- package/lib/inputs/search/index.js +1 -1
- package/lib/inputs/select/Dropdown.js +1 -1
- package/lib/inputs/select/helper.js +10 -13
- package/lib/inputs/select/multiple/Selecteds.js +1 -1
- package/lib/inputs/select/multiple/index.js +12 -19
- package/lib/inputs/select/simple/index.js +13 -22
- package/lib/inputs/select/types.d.ts +0 -1
- package/lib/inputs/textarea/index.js +1 -1
- package/lib/internals/withTooltip.js +9 -9
- package/lib/labelMessages/index.js +4 -3
- package/lib/labels/DefaultLabel.js +4 -1
- package/lib/labels/label_container/index.js +1 -1
- package/lib/list/Header.js +1 -1
- package/lib/list/Item.js +9 -7
- package/lib/list/index.js +1 -1
- package/lib/menus/float/MenuItem.js +2 -2
- package/lib/menus/float/SubMenuContainer.js +1 -1
- package/lib/menus/float/index.js +1 -1
- package/lib/menus/sidenav/ExpandMenu.js +1 -1
- package/lib/menus/sidenav/NavMenuGroup.js +1 -1
- package/lib/menus/sidenav/NavMenuItem.js +7 -9
- package/lib/menus/sidenav/NavSubMenuItem.js +1 -1
- package/lib/menus/sidenav/helpers.js +1 -1
- package/lib/menus/sidenav/index.js +5 -5
- package/lib/panel/Content.js +5 -7
- package/lib/panel/Default.js +2 -2
- package/lib/panel/Header.js +3 -3
- package/lib/permissionValidations.js +1 -1
- package/lib/popover/PopoverText.d.ts +3 -2
- package/lib/popover/PopoverText.js +5 -8
- package/lib/popover/PopoverTitle.d.ts +1 -0
- package/lib/popover/index.d.ts +3 -5
- package/lib/popover/index.js +20 -14
- package/lib/popover/types.d.ts +12 -1
- package/lib/progress/Bar.js +6 -6
- package/lib/radio/index.js +2 -2
- package/lib/shortcuts/index.js +1 -1
- package/lib/skeleton/SkeletonContainer.js +2 -1
- package/lib/skeleton/index.js +4 -1
- package/lib/spinner/index.js +2 -2
- package/lib/split/Split.js +1 -1
- package/lib/split/SplitSide.js +3 -3
- package/lib/table/Body.js +3 -3
- package/lib/table/Header.js +8 -11
- package/lib/table/HeaderColumn.d.ts +1 -1
- package/lib/table/HeaderColumn.js +6 -7
- package/lib/table/Row.js +3 -3
- package/lib/table/RowColumn.js +2 -3
- package/lib/table/index.js +6 -1
- package/lib/table/types.d.ts +2 -4
- package/lib/tabs/DropdownTabs.js +1 -1
- package/lib/tabs/Menu.js +1 -1
- package/lib/tabs/MenuTabs.js +2 -2
- package/lib/tabs/Panel.js +5 -7
- package/lib/tabs/context.js +3 -6
- package/lib/textContent/index.js +1 -1
- package/lib/toolbar/ButtonBar.js +1 -1
- package/lib/toolbar/index.js +1 -1
- package/lib/tooltip/index.js +7 -7
- package/lib/treetable/Body.js +1 -1
- package/lib/treetable/Header.js +2 -2
- package/lib/treetable/Row.js +8 -8
- package/lib/treeview/Header.js +1 -1
- package/lib/treeview/Node.js +11 -15
- package/lib/treeview/index.js +7 -11
- package/lib/treeview/types.d.ts +0 -4
- package/lib/uitour/index.js +6 -8
- package/package.json +2 -2
- package/lib/assets/styles/wizard.scss +0 -125
- package/lib/dialog/wizard/index.d.ts +0 -13
- package/lib/dialog/wizard/index.js +0 -74
- package/lib/dialog/wizard/progressbar.d.ts +0 -13
- package/lib/dialog/wizard/progressbar.js +0 -36
- package/lib/dialog/wizard/step.d.ts +0 -9
- package/lib/dialog/wizard/step.js +0 -22
- package/lib/dialog/wizard/useWizard.d.ts +0 -9
- package/lib/dialog/wizard/useWizard.js +0 -48
- package/lib/inputs/mask/imaskHOC.js +0 -203
- package/lib/menus/sidenav/popup_menu_help/index.js +0 -85
- package/lib/tabs/DropdownItems.js +0 -62
- package/lib/tabs/MenuItems.js +0 -70
- package/lib/treeview_old/Header.js +0 -29
- package/lib/treeview_old/Node.js +0 -68
- package/lib/treeview_old/index.js +0 -43
|
@@ -87,23 +87,23 @@ const withTooltip = WrappedComponent => {
|
|
|
87
87
|
const targetDimensions = targetElement.current.getBoundingClientRect();
|
|
88
88
|
const targetVerticalCenter = (targetDimensions.top + targetDimensions.bottom) / 2;
|
|
89
89
|
const tooltipClientWidth = tooltipElement.current.clientWidth;
|
|
90
|
-
let style =
|
|
90
|
+
let style = `width: ${typeof width === 'string' ? width : `${width}px`}`;
|
|
91
91
|
let left = targetDimensions.left + targetDimensions.width / 2 - tooltipClientWidth / 2;
|
|
92
92
|
left = Math.min(left, document.body.clientWidth - tooltipClientWidth - space);
|
|
93
|
-
style +=
|
|
93
|
+
style += `; left: ${Math.max(space, left)}px`;
|
|
94
94
|
switch (stateTooltipPosition) {
|
|
95
95
|
case 'top':
|
|
96
96
|
if (targetDimensions.top < height) {
|
|
97
97
|
setStateTooltipPosition('bottom');
|
|
98
98
|
} else {
|
|
99
|
-
style +=
|
|
99
|
+
style += `; top: ${targetDimensions.top + window.scrollY - height - 5}px`;
|
|
100
100
|
}
|
|
101
101
|
break;
|
|
102
102
|
case 'bottom':
|
|
103
103
|
if (window.innerHeight - targetDimensions.bottom < height) {
|
|
104
104
|
setStateTooltipPosition('top');
|
|
105
105
|
} else {
|
|
106
|
-
style +=
|
|
106
|
+
style += `; top: ${targetDimensions.top + window.scrollY + targetDimensions.height + 5}px`;
|
|
107
107
|
}
|
|
108
108
|
break;
|
|
109
109
|
case 'left':
|
|
@@ -114,16 +114,16 @@ const withTooltip = WrappedComponent => {
|
|
|
114
114
|
setStateTooltipPosition('right');
|
|
115
115
|
}
|
|
116
116
|
} else {
|
|
117
|
-
style +=
|
|
118
|
-
style +=
|
|
117
|
+
style += `; top: ${targetVerticalCenter + window.scrollY - height / 2}px`;
|
|
118
|
+
style += `; left: ${targetDimensions.left - tooltipClientWidth - 6}px`;
|
|
119
119
|
}
|
|
120
120
|
break;
|
|
121
121
|
case 'right':
|
|
122
122
|
if (window.innerWidth - targetDimensions.right < tooltipClientWidth) {
|
|
123
123
|
setStateTooltipPosition('left');
|
|
124
124
|
} else {
|
|
125
|
-
style +=
|
|
126
|
-
style +=
|
|
125
|
+
style += `; top: ${targetVerticalCenter + window.scrollY - height / 2}px`;
|
|
126
|
+
style += `; left: ${targetDimensions.left + targetDimensions.width + 5}px`;
|
|
127
127
|
}
|
|
128
128
|
break;
|
|
129
129
|
default:
|
|
@@ -166,7 +166,7 @@ const withTooltip = WrappedComponent => {
|
|
|
166
166
|
targetRef: getTarget
|
|
167
167
|
})), showTooltip && getTooltip());
|
|
168
168
|
};
|
|
169
|
-
EnhancedComponent.displayName =
|
|
169
|
+
EnhancedComponent.displayName = `withTooltip(${getDisplayName(WrappedComponent)})`;
|
|
170
170
|
return EnhancedComponent;
|
|
171
171
|
};
|
|
172
172
|
var _default = exports.default = withTooltip;
|
|
@@ -25,7 +25,8 @@ const LabelMessages = _ref => {
|
|
|
25
25
|
showCloseButton = false
|
|
26
26
|
} = _ref;
|
|
27
27
|
const [closed, setClosed] = (0, _react.useState)(false);
|
|
28
|
-
const getClass = () =>
|
|
28
|
+
const getClass = () => `labelmessages-component -${type} ${customClass}
|
|
29
|
+
${square && '-square'} ${flat && '-flat'}`;
|
|
29
30
|
const getIcon = () => {
|
|
30
31
|
if (icon) {
|
|
31
32
|
return icon;
|
|
@@ -34,14 +35,14 @@ const LabelMessages = _ref => {
|
|
|
34
35
|
name: iconName,
|
|
35
36
|
size: 16,
|
|
36
37
|
color: "#ffffff",
|
|
37
|
-
customClass:
|
|
38
|
+
customClass: `-${type}svg`
|
|
38
39
|
});
|
|
39
40
|
}
|
|
40
41
|
return null;
|
|
41
42
|
};
|
|
42
43
|
if (closed || !visible) return null;
|
|
43
44
|
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
44
|
-
className:
|
|
45
|
+
className: `${getClass()} ${customClass}`,
|
|
45
46
|
style: style
|
|
46
47
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
47
48
|
className: "labelmessagesitem text"
|
|
@@ -30,7 +30,10 @@ const DefaultLabel = _ref => {
|
|
|
30
30
|
} = _ref;
|
|
31
31
|
const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];
|
|
32
32
|
const [onDenied] = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr));
|
|
33
|
-
const getClass = () =>
|
|
33
|
+
const getClass = () => `label-component ${className} ${customClass} ${bordered ? '-bordered' : ''} ${disabled ? '-disabled' : ''}
|
|
34
|
+
${skeletonize ? '-skeletonized' : ''}
|
|
35
|
+
${size ? `-${size}` : ''}
|
|
36
|
+
${iconAlign ? `icon-${iconAlign}` : ''}`;
|
|
34
37
|
const getIcon = () => {
|
|
35
38
|
if (icon) {
|
|
36
39
|
return icon;
|
package/lib/list/Header.js
CHANGED
|
@@ -14,7 +14,7 @@ const Header = _ref => {
|
|
|
14
14
|
customClass
|
|
15
15
|
} = _ref;
|
|
16
16
|
return /*#__PURE__*/_react.default.createElement("li", {
|
|
17
|
-
className:
|
|
17
|
+
className: `list-header ${customClass}`,
|
|
18
18
|
style: style
|
|
19
19
|
}, /*#__PURE__*/_react.default.createElement("h1", {
|
|
20
20
|
className: "title"
|
package/lib/list/Item.js
CHANGED
|
@@ -54,7 +54,8 @@ const Item = props => {
|
|
|
54
54
|
const disabledByPermission = onDenied.disabled;
|
|
55
55
|
const shouldDisable = () => disabled || onDenied.disabled;
|
|
56
56
|
const disabledIconColor = 'rgb(193, 193, 193)';
|
|
57
|
-
const getClass = () =>
|
|
57
|
+
const getClass = () => `item ${customClass} ${separator && 'list-separator'} ${shouldDisable() && 'disabled'}
|
|
58
|
+
${displayCheckbox && 'list-checkbox'}`;
|
|
58
59
|
const getIcon = (iconName, icon) => {
|
|
59
60
|
const noIconDisabledByPermission = !icon && !displayCheckbox && !leftElement && !leftIconName && !leftIcon && onDenied.disabled;
|
|
60
61
|
if (icon) {
|
|
@@ -119,22 +120,23 @@ const Item = props => {
|
|
|
119
120
|
return /*#__PURE__*/_react.default.createElement("li", _extends({
|
|
120
121
|
ref: itemId && selectedItemId === itemId ? selectedItemRef : null,
|
|
121
122
|
style: style,
|
|
122
|
-
className:
|
|
123
|
+
className: `item-container ${hovered && 'hovered'}
|
|
124
|
+
${itemId && selectedItemId === itemId ? '-activedlist' : ''}`
|
|
123
125
|
}, getProps(), {
|
|
124
126
|
key: itemId
|
|
125
127
|
}), url && !shouldDisable() && /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
|
|
126
128
|
className: "linkitem",
|
|
127
129
|
to: url
|
|
128
130
|
}), (displayCheckbox || leftElement || leftIconName || leftIcon) && /*#__PURE__*/_react.default.createElement("div", {
|
|
129
|
-
className:
|
|
131
|
+
className: `${getClass()} -icon-left`
|
|
130
132
|
}, renderCheckBox, leftElement, getIcon(leftIconName, leftIcon)), (text || subText || children) && /*#__PURE__*/_react.default.createElement("div", {
|
|
131
|
-
className:
|
|
133
|
+
className: `${getClass()}`
|
|
132
134
|
}, /*#__PURE__*/_react.default.createElement("p", {
|
|
133
|
-
className:
|
|
135
|
+
className: `${text && 'text'}`
|
|
134
136
|
}, text), /*#__PURE__*/_react.default.createElement("p", {
|
|
135
|
-
className:
|
|
137
|
+
className: `${subText && 'subtext'}`
|
|
136
138
|
}, subText), children), (rightIconName || rightIcon || rightElement || disabledByPermission) && /*#__PURE__*/_react.default.createElement("div", {
|
|
137
|
-
className:
|
|
139
|
+
className: `${getClass()} -icon-right`
|
|
138
140
|
}, getIcon(rightIconName, rightIcon), rightElement));
|
|
139
141
|
};
|
|
140
142
|
var _default = exports.default = Item;
|
package/lib/list/index.js
CHANGED
|
@@ -175,7 +175,7 @@ const List = props => {
|
|
|
175
175
|
"data-testid": "list-component",
|
|
176
176
|
style: style,
|
|
177
177
|
ref: listRef,
|
|
178
|
-
className:
|
|
178
|
+
className: `list-component ${condensed && '-condensed'} ${!transparent && '-listbackground'} ${customClass}`
|
|
179
179
|
}, newChildren));
|
|
180
180
|
};
|
|
181
181
|
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
|
|
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:
|
|
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:
|
|
49
|
+
className: `floatsubmenu ${customClass}`
|
|
50
50
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
51
51
|
className: "submenuheader"
|
|
52
52
|
}, /*#__PURE__*/_react.default.createElement(_icons.default, {
|
package/lib/menus/float/index.js
CHANGED
|
@@ -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:
|
|
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:
|
|
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:
|
|
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 =
|
|
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
|
-
|
|
88
|
-
const
|
|
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
|
-
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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 =
|
|
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 =
|
|
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:
|
|
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:
|
|
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:
|
|
168
|
+
className: `sidenav-component ${isExpanded ? '-expanded' : ''} ${openSearchMenuPopup ? '-blocked' : ''} ${customClass}`,
|
|
169
169
|
ref: sideNavRef
|
|
170
170
|
}, showExpandMenu && /*#__PURE__*/_react.default.createElement(_ExpandMenu.default, {
|
|
171
|
-
expandMenuCustomClass:
|
|
171
|
+
expandMenuCustomClass: `${isExpanded && 'closefromexpanded'} ${expandMenuCustomClass}`,
|
|
172
172
|
onExpandMenu: onHeaderClick,
|
|
173
173
|
iconName: isExpanded ? 'arrow_left' : 'arrow_right'
|
|
174
174
|
}), getSideNavContent()));
|
package/lib/panel/Content.js
CHANGED
|
@@ -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
|
-
|
|
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
|
-
|
|
70
|
-
|
|
71
|
-
(
|
|
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:
|
|
76
|
+
className: `panel-content ${customClass ?? ''}`
|
|
79
77
|
}, rest), opened && children);
|
|
80
78
|
};
|
|
81
79
|
var _default = exports.default = PanelContent;
|
package/lib/panel/Default.js
CHANGED
|
@@ -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 =
|
|
41
|
-
cssClass += 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({
|
package/lib/panel/Header.js
CHANGED
|
@@ -32,7 +32,7 @@ const getClassName = _ref => {
|
|
|
32
32
|
customClass,
|
|
33
33
|
headerColored = true
|
|
34
34
|
} = _ref;
|
|
35
|
-
let className =
|
|
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:
|
|
59
|
+
className: `${icon !== null || titleIcon !== null ? 'icon-left-panel' : ''}`
|
|
60
60
|
}, getIcon(titleIcon, icon)), title && /*#__PURE__*/_react.default.createElement("h1", {
|
|
61
|
-
className:
|
|
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 ===
|
|
48
|
+
result[option] = hasPermission ? false : option === permissionsAttr?.[0].onDenied;
|
|
49
49
|
});
|
|
50
50
|
return result;
|
|
51
51
|
};
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import React__default from 'react';
|
|
2
1
|
import { PopoverTextProps } from './types.js';
|
|
2
|
+
import 'react';
|
|
3
3
|
import '../@types/Position.js';
|
|
4
4
|
import '../@types/SizePixels.js';
|
|
5
5
|
import '../@types/Icon.js';
|
|
6
6
|
import '../icons/helper.js';
|
|
7
|
+
import '../@types/PermissionAttr.js';
|
|
7
8
|
|
|
8
|
-
declare const PopoverText:
|
|
9
|
+
declare const PopoverText: ({ children }: PopoverTextProps) => JSX.Element;
|
|
9
10
|
|
|
10
11
|
export { PopoverText as default };
|
|
@@ -4,17 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var _react =
|
|
8
|
-
function
|
|
9
|
-
|
|
10
|
-
const PopoverText = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
|
+
const PopoverText = _ref => {
|
|
11
10
|
let {
|
|
12
11
|
children
|
|
13
12
|
} = _ref;
|
|
14
13
|
return /*#__PURE__*/_react.default.createElement("p", {
|
|
15
|
-
className: "text"
|
|
16
|
-
ref: ref
|
|
14
|
+
className: "text"
|
|
17
15
|
}, children);
|
|
18
|
-
}
|
|
19
|
-
PopoverText.displayName = 'PopoverText';
|
|
16
|
+
};
|
|
20
17
|
var _default = exports.default = PopoverText;
|
package/lib/popover/index.d.ts
CHANGED
|
@@ -6,10 +6,8 @@ import '../@types/Position.js';
|
|
|
6
6
|
import '../@types/SizePixels.js';
|
|
7
7
|
import '../@types/Icon.js';
|
|
8
8
|
import '../icons/helper.js';
|
|
9
|
+
import '../@types/PermissionAttr.js';
|
|
9
10
|
|
|
10
|
-
declare const
|
|
11
|
-
(props: IPopoverProps): JSX.Element;
|
|
12
|
-
displayName: string;
|
|
13
|
-
};
|
|
11
|
+
declare const Popover: ({ children, align, theme, iconName, iconSize, iconColor, customClass, customStyle, ...rest }: IPopoverProps) => JSX.Element;
|
|
14
12
|
|
|
15
|
-
export {
|
|
13
|
+
export { Popover as default };
|
package/lib/popover/index.js
CHANGED
|
@@ -21,20 +21,25 @@ var _buttons = _interopRequireDefault(require("../buttons"));
|
|
|
21
21
|
var _icons = _interopRequireDefault(require("../icons"));
|
|
22
22
|
var _PopoverText = _interopRequireDefault(require("./PopoverText"));
|
|
23
23
|
var _PopoverTitle = _interopRequireDefault(require("./PopoverTitle"));
|
|
24
|
-
var _withDropdown = _interopRequireDefault(require("../dropdown/withDropdown"));
|
|
25
24
|
require("../assets/styles/popover.scss");
|
|
25
|
+
const _excluded = ["children", "align", "theme", "iconName", "iconSize", "iconColor", "customClass", "customStyle"];
|
|
26
26
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
27
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
28
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
29
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
|
|
27
30
|
const Popover = _ref => {
|
|
28
31
|
let {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
32
|
+
children,
|
|
33
|
+
align = 'left',
|
|
34
|
+
theme = 'dark',
|
|
35
|
+
iconName,
|
|
36
|
+
iconSize = 16,
|
|
37
|
+
iconColor = '',
|
|
38
|
+
customClass = '',
|
|
39
|
+
customStyle
|
|
40
|
+
} = _ref,
|
|
41
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
42
|
+
return /*#__PURE__*/_react.default.createElement(_buttons.default, _extends({
|
|
38
43
|
round: true,
|
|
39
44
|
dropdown: true,
|
|
40
45
|
transparent: true,
|
|
@@ -57,9 +62,10 @@ const Popover = _ref => {
|
|
|
57
62
|
onClick: e => {
|
|
58
63
|
e.preventDefault();
|
|
59
64
|
}
|
|
60
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
61
|
-
className:
|
|
62
|
-
"data-testid": "popover-container"
|
|
65
|
+
}, rest), /*#__PURE__*/_react.default.createElement("div", {
|
|
66
|
+
className: `popovercontainer -${theme} ${customClass}`,
|
|
67
|
+
"data-testid": "popover-container",
|
|
68
|
+
style: customStyle
|
|
63
69
|
}, children));
|
|
64
70
|
};
|
|
65
|
-
var _default = exports.default =
|
|
71
|
+
var _default = exports.default = Popover;
|
package/lib/popover/types.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { ReactNode, CSSProperties } from 'react';
|
|
2
2
|
import { Position } from '../@types/Position.js';
|
|
3
3
|
import { SizePixels } from '../@types/SizePixels.js';
|
|
4
4
|
import { IconNames } from '../@types/Icon.js';
|
|
5
|
+
import { PermissionAttr } from '../@types/PermissionAttr.js';
|
|
5
6
|
import '../icons/helper.js';
|
|
6
7
|
|
|
7
8
|
interface PopoverTitleProps {
|
|
@@ -18,6 +19,16 @@ interface IPopoverProps {
|
|
|
18
19
|
theme?: 'light' | 'dark';
|
|
19
20
|
align?: Extract<Position, 'left' | 'right'>;
|
|
20
21
|
iconSize?: Extract<SizePixels, 10 | 16 | 24 | 32 | 40 | 64>;
|
|
22
|
+
disabled?: boolean;
|
|
23
|
+
customStyle?: CSSProperties;
|
|
24
|
+
isLoading?: boolean;
|
|
25
|
+
visible?: boolean;
|
|
26
|
+
skeletonize?: boolean;
|
|
27
|
+
tooltipPosition?: Exclude<Position, 'center'>;
|
|
28
|
+
tooltipWidth?: string | number;
|
|
29
|
+
tooltip?: string;
|
|
30
|
+
handlerClose?: (cb: () => void) => void;
|
|
31
|
+
permissionAttr?: PermissionAttr | PermissionAttr[];
|
|
21
32
|
}
|
|
22
33
|
|
|
23
34
|
export { IPopoverProps, PopoverTextProps, PopoverTitleProps };
|
package/lib/progress/Bar.js
CHANGED
|
@@ -18,8 +18,8 @@ const getPercentage = _ref => {
|
|
|
18
18
|
};
|
|
19
19
|
const getClass = props => {
|
|
20
20
|
let style = 'bar';
|
|
21
|
-
if (props.customClass) style +=
|
|
22
|
-
if (props.type) style +=
|
|
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 =
|
|
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:
|
|
50
|
-
animationDelay:
|
|
49
|
+
animationDuration: `${indeterminateDuration}s`,
|
|
50
|
+
animationDelay: `${indeterminateDelay}s`
|
|
51
51
|
};
|
|
52
52
|
}
|
|
53
53
|
return {
|
|
54
|
-
width:
|
|
54
|
+
width: `${getPercentage(props)}%`,
|
|
55
55
|
height
|
|
56
56
|
};
|
|
57
57
|
};
|
package/lib/radio/index.js
CHANGED
|
@@ -64,7 +64,7 @@ const Radio = _ref => {
|
|
|
64
64
|
};
|
|
65
65
|
if (onDenied.unvisible) return null;
|
|
66
66
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
67
|
-
className:
|
|
67
|
+
className: `radio-button ${disabled ? 'disabled' : ''} ${skeletonize ? '-skeletonized' : ''}`
|
|
68
68
|
}, /*#__PURE__*/_react.default.createElement("input", _extends({}, getCustomProps(), {
|
|
69
69
|
ref: forwardedRef,
|
|
70
70
|
className: "radio-component",
|
|
@@ -75,7 +75,7 @@ const Radio = _ref => {
|
|
|
75
75
|
required: required,
|
|
76
76
|
disabled: shouldDisable()
|
|
77
77
|
})), /*#__PURE__*/_react.default.createElement("label", {
|
|
78
|
-
className:
|
|
78
|
+
className: `description ${size && `-${size}`}`,
|
|
79
79
|
htmlFor: id
|
|
80
80
|
}, /*#__PURE__*/_react.default.createElement("span", null, label)));
|
|
81
81
|
};
|