labsense-ui-kit 1.2.97 → 1.2.99
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/dist/index.js +62 -15
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +62 -15
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -7,6 +7,7 @@ var styled__default = _interopDefault(styled);
|
|
|
7
7
|
var reactHotToast = require('react-hot-toast');
|
|
8
8
|
var reactRouterDom = require('react-router-dom');
|
|
9
9
|
var reactI18next = require('react-i18next');
|
|
10
|
+
var reactDom = require('react-dom');
|
|
10
11
|
|
|
11
12
|
function _extends() {
|
|
12
13
|
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
@@ -6338,7 +6339,7 @@ var Container$1 = styled__default.div(_templateObject4$1 || (_templateObject4$1
|
|
|
6338
6339
|
var cursor = _ref9.cursor;
|
|
6339
6340
|
return cursor;
|
|
6340
6341
|
});
|
|
6341
|
-
var StyledButton = styled__default.button(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n pointer-events: ", ";\n cursor: ", ";\n height: max-content;\n min-height: max-content;\n width: ", ";\n box-sizing: border-box;\n border-radius: ", ";\n outline: none;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n justify-content: center;\n\n padding: ", ";\n\n &:focus {\n outline: none;\n }\n\n
|
|
6342
|
+
var StyledButton = styled__default.button(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n // pointer-events: ", ";\n cursor: ", ";\n height: max-content;\n min-height: max-content;\n width: ", ";\n box-sizing: border-box;\n border-radius: ", ";\n outline: none;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n justify-content: center;\n\n padding: ", ";\n\n &:focus {\n outline: none;\n }\n\n ", " \n color: ", "; \n"])), function (_ref10) {
|
|
6342
6343
|
var $disabled = _ref10.$disabled;
|
|
6343
6344
|
return $disabled ? 'none' : 'auto';
|
|
6344
6345
|
}, function (_ref11) {
|
|
@@ -6366,21 +6367,21 @@ var StyledButton = styled__default.button(_templateObject5$1 || (_templateObject
|
|
|
6366
6367
|
theme = _ref15.theme;
|
|
6367
6368
|
switch ($variant) {
|
|
6368
6369
|
case 'primary':
|
|
6369
|
-
return "\n background: " + ($disabled ? theme.vms.disabled.primary : theme.vms["default"].primary) + ";\n color: " + theme.vms.text.white + ";\n border: " + ($disabled ? "1px solid " + theme.vms.disabled.primary : "1px solid " + theme.vms["default"].primary) + ";\n &:hover {\n background: " + theme.vms.hover.primary + ";\n
|
|
6370
|
+
return "\n background: " + ($disabled ? theme.vms.disabled.primary : theme.vms["default"].primary) + ";\n color: " + theme.vms.text.white + ";\n border: " + ($disabled ? "1px solid " + theme.vms.disabled.primary : "1px solid " + theme.vms["default"].primary) + ";\n &:hover {\n " + (!$disabled && "\n background: " + theme.vms.hover.primary + ";\n border: 1px solid " + theme.vms.hover.primary + ";\n ") + "\n }\n ";
|
|
6370
6371
|
case 'secondary':
|
|
6371
|
-
return "\n background: " + ($disabled ? theme.vms.disabled.secondary : theme.vms["default"].secondary) + "; \n color: " + theme.vms.text.white + ";\n border: " + ($disabled ? "1px solid " + theme.vms.disabled.secondary : "1px solid " + theme.vms["default"].secondary) + ";\n &:hover{\n
|
|
6372
|
+
return "\n background: " + ($disabled ? theme.vms.disabled.secondary : theme.vms["default"].secondary) + "; \n color: " + theme.vms.text.white + ";\n border: " + ($disabled ? "1px solid " + theme.vms.disabled.secondary : "1px solid " + theme.vms["default"].secondary) + ";\n &:hover{\n " + (!$disabled && "\n background: " + theme.vms.hover.secondary + ";\n border: 1px solid " + theme.vms.hover.secondary + ";\n ") + "\n }\n ";
|
|
6372
6373
|
case 'tertiary':
|
|
6373
|
-
return "\n background: " + theme.vms["default"].tertiary + ";\n color: " + ($disabled ? theme.vms.disabled.primary : theme.vms["default"].primary) + ";\n border: " + ($borderDefault ? "" + $borderDefault : "1px solid " + theme.vms["default"].tertiary) + ";\n &:hover {\n
|
|
6374
|
+
return "\n background: " + theme.vms["default"].tertiary + ";\n color: " + ($disabled ? theme.vms.disabled.primary : theme.vms["default"].primary) + ";\n border: " + ($borderDefault ? "" + $borderDefault : "1px solid " + theme.vms["default"].tertiary) + ";\n &:hover {\n " + (!$disabled && "\n color: " + ($borderHover ? (_$borderHover$match = $borderHover.match(/#\w+/)) === null || _$borderHover$match === void 0 ? void 0 : _$borderHover$match[0] : theme.vms.hover.primary) + ";\n border: " + ($borderHover ? $borderHover : "1px solid " + theme.vms.hover.primary) + ";\n ") + "\n }\n ";
|
|
6374
6375
|
case 'error':
|
|
6375
|
-
return "\n background: " + ($disabled ? theme.vms.disabled.error : theme.vms["default"].error) + "; \n color: " + theme.vms.text.white + ";\n border: " + ($disabled ? "1px solid " + theme.vms.disabled.error : "1px solid " + theme.vms["default"].error) + ";\n &:hover{\n
|
|
6376
|
+
return "\n background: " + ($disabled ? theme.vms.disabled.error : theme.vms["default"].error) + "; \n color: " + theme.vms.text.white + ";\n border: " + ($disabled ? "1px solid " + theme.vms.disabled.error : "1px solid " + theme.vms["default"].error) + ";\n &:hover{\n " + (!$disabled && "\n background: " + theme.vms.hover.error + ";\n border: 1px solid " + theme.vms.hover.error + ";\n ") + "\n }\n ";
|
|
6376
6377
|
case 'outline-primary':
|
|
6377
|
-
return "\n background: " + theme.vms["default"].tertiary + ";\n color: " + ($disabled ? theme.vms.disabled.primary : theme.vms["default"].primary) + ";\n border: " + ($disabled ? "1px solid " + theme.vms.disabled.primary : "1px solid " + theme.vms["default"].primary) + ";\n &:hover{\n border: 1px solid " + theme.vms.hover.primary + ";\n
|
|
6378
|
+
return "\n background: " + theme.vms["default"].tertiary + ";\n color: " + ($disabled ? theme.vms.disabled.primary : theme.vms["default"].primary) + ";\n border: " + ($disabled ? "1px solid " + theme.vms.disabled.primary : "1px solid " + theme.vms["default"].primary) + ";\n &:hover{\n " + (!$disabled && "\n border: 1px solid " + theme.vms.hover.primary + ";\n color: " + theme.vms.text.white + ";\n background: " + theme.vms.hover.primary + ";\n ") + "\n }\n ";
|
|
6378
6379
|
case 'outline-secondary':
|
|
6379
|
-
return "\n
|
|
6380
|
+
return "\n background: " + theme.vms["default"].tertiary + ";\n color: " + ($disabled ? theme.vms.disabled.secondary : theme.vms["default"].secondary) + ";\n border: " + ($disabled ? "1px solid " + theme.vms.disabled.secondary : "1px solid " + theme.vms["default"].secondary) + ";\n &:hover{\n " + (!$disabled && "\n border: 1px solid " + theme.vms.hover.secondary + ";\n color: " + theme.vms.text.white + ";\n background: " + theme.vms.hover.secondary + ";\n ") + "\n }\n ";
|
|
6380
6381
|
case 'outline-error':
|
|
6381
|
-
return "\n background: " + theme.vms["default"].tertiary + ";\n color: " + ($disabled ? theme.vms.disabled.error : theme.vms["default"].error) + ";\n border: " + ($disabled ? "1px solid " + theme.vms.disabled.error : "1px solid " + theme.vms["default"].error) + ";\n &:hover{\n border: 1px solid " + theme.vms.hover.error + ";\n
|
|
6382
|
+
return "\n background: " + theme.vms["default"].tertiary + ";\n color: " + ($disabled ? theme.vms.disabled.error : theme.vms["default"].error) + ";\n border: " + ($disabled ? "1px solid " + theme.vms.disabled.error : "1px solid " + theme.vms["default"].error) + ";\n &:hover{\n " + (!$disabled && "\n border: 1px solid " + theme.vms.hover.error + ";\n color: " + theme.vms.text.white + ";\n background: " + theme.vms.hover.error + ";\n ") + "\n }\n ";
|
|
6382
6383
|
case 'custom':
|
|
6383
|
-
return "\n background: " + $background + ";\n color: " + $color + ";\n border: " + ("1px solid " + $borderDefault) + ";\n &:hover{\n border: 1px solid " + $borderHover + ";\n
|
|
6384
|
+
return "\n background: " + $background + ";\n color: " + $color + ";\n border: " + ("1px solid " + $borderDefault) + ";\n &:hover{\n " + (!$disabled && "\n border: 1px solid " + $borderHover + ";\n color: " + $colorHover + ";\n background: " + $borderHover + ";\n ") + "\n }\n ";
|
|
6384
6385
|
default:
|
|
6385
6386
|
return '';
|
|
6386
6387
|
}
|
|
@@ -6458,10 +6459,10 @@ var ButtonComponent = function ButtonComponent(_ref21) {
|
|
|
6458
6459
|
"$padding": padding,
|
|
6459
6460
|
"$variant": variant,
|
|
6460
6461
|
onMouseEnter: function onMouseEnter() {
|
|
6461
|
-
|
|
6462
|
+
if (!disabled) setIsHovered(true);
|
|
6462
6463
|
},
|
|
6463
6464
|
onMouseLeave: function onMouseLeave() {
|
|
6464
|
-
|
|
6465
|
+
if (!disabled) setIsHovered(false);
|
|
6465
6466
|
}
|
|
6466
6467
|
}, React__default.createElement(Container$1, {
|
|
6467
6468
|
"$iconPosition": iconPos,
|
|
@@ -9327,7 +9328,7 @@ var TextContainer = styled__default.span(_templateObject6$7 || (_templateObject6
|
|
|
9327
9328
|
var $fontWeight = _ref15.$fontWeight;
|
|
9328
9329
|
return $fontWeight || '500';
|
|
9329
9330
|
}, SidebarContainer);
|
|
9330
|
-
var NotificationBadge = styled__default.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n position: ", ";\n top: -4px;\n right:
|
|
9331
|
+
var NotificationBadge = styled__default.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n position: ", ";\n // top: -4px;\n // right: 4px;\n background: red;\n color: white;\n font-size: 10px;\n font-weight: bold;\n border-radius: 50%;\n padding: 2px 5px;\n min-width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n width: max-content;\n"])), function (_ref16) {
|
|
9331
9332
|
var $position = _ref16.$position;
|
|
9332
9333
|
return $position || 'absolute';
|
|
9333
9334
|
});
|
|
@@ -9343,7 +9344,17 @@ var Sidebar = function Sidebar(_ref17) {
|
|
|
9343
9344
|
var _useState = React.useState({}),
|
|
9344
9345
|
openMenus = _useState[0],
|
|
9345
9346
|
setOpenMenus = _useState[1];
|
|
9346
|
-
var isExpandedRef =
|
|
9347
|
+
var isExpandedRef = React.useRef(isExpanded);
|
|
9348
|
+
var _useState2 = React.useState(function () {
|
|
9349
|
+
var container = document.getElementById('badge-portal-container');
|
|
9350
|
+
if (!container) {
|
|
9351
|
+
container = document.createElement('div');
|
|
9352
|
+
container.id = 'badge-portal-container';
|
|
9353
|
+
document.body.appendChild(container);
|
|
9354
|
+
}
|
|
9355
|
+
return container;
|
|
9356
|
+
}),
|
|
9357
|
+
badgePortalContainer = _useState2[0];
|
|
9347
9358
|
React.useEffect(function () {
|
|
9348
9359
|
isExpandedRef.current = isExpanded;
|
|
9349
9360
|
if (!isExpanded) setOpenMenus({});
|
|
@@ -9455,7 +9466,18 @@ var Sidebar = function Sidebar(_ref17) {
|
|
|
9455
9466
|
"$cursor": 'pointer',
|
|
9456
9467
|
"$borderRadius": '4px'
|
|
9457
9468
|
}, React__default.createElement(Container, {
|
|
9458
|
-
"$position": 'relative'
|
|
9469
|
+
"$position": 'relative',
|
|
9470
|
+
id: "icon-container-" + item.id,
|
|
9471
|
+
ref: function ref(el) {
|
|
9472
|
+
if (el && _getTotalNotifications(item) > 0) {
|
|
9473
|
+
var rect = el.getBoundingClientRect();
|
|
9474
|
+
var badge = document.getElementById("badge-" + item.id);
|
|
9475
|
+
if (badge) {
|
|
9476
|
+
badge.style.top = rect.top - 4 + "px";
|
|
9477
|
+
badge.style.left = rect.right - 14 + "px";
|
|
9478
|
+
}
|
|
9479
|
+
}
|
|
9480
|
+
}
|
|
9459
9481
|
}, React__default.createElement(IconWrapper$2, {
|
|
9460
9482
|
"$selected": !!isActive
|
|
9461
9483
|
}, React__default.createElement(Icon, {
|
|
@@ -9464,7 +9486,12 @@ var Sidebar = function Sidebar(_ref17) {
|
|
|
9464
9486
|
size: 20,
|
|
9465
9487
|
weight: item.iconWeight,
|
|
9466
9488
|
color: isActive ? themeColors.vms.text.white : themeColors.vms.text.medium
|
|
9467
|
-
})), _getTotalNotifications(item) > 0 &&
|
|
9489
|
+
})), _getTotalNotifications(item) > 0 && reactDom.createPortal(React__default.createElement(NotificationBadge, {
|
|
9490
|
+
id: "badge-" + item.id,
|
|
9491
|
+
style: {
|
|
9492
|
+
position: 'fixed'
|
|
9493
|
+
}
|
|
9494
|
+
}, _getTotalNotifications(item) > 99 ? '99+' : _getTotalNotifications(item)), badgePortalContainer)), React__default.createElement(TextContainer, {
|
|
9468
9495
|
"$fontSize": '14px'
|
|
9469
9496
|
}, item.label)), hasChildren && React__default.createElement(Container, {
|
|
9470
9497
|
"$padding": '9px',
|
|
@@ -9506,6 +9533,26 @@ var Sidebar = function Sidebar(_ref17) {
|
|
|
9506
9533
|
setIsExpanded(expanded);
|
|
9507
9534
|
}
|
|
9508
9535
|
}, [setIsExpanded]);
|
|
9536
|
+
React.useEffect(function () {
|
|
9537
|
+
var updateBadgePositions = function updateBadgePositions() {
|
|
9538
|
+
content.forEach(function (item) {
|
|
9539
|
+
if (_getTotalNotifications(item) > 0) {
|
|
9540
|
+
var iconContainer = document.getElementById("icon-container-" + item.id);
|
|
9541
|
+
var badge = document.getElementById("badge-" + item.id);
|
|
9542
|
+
if (iconContainer && badge) {
|
|
9543
|
+
var rect = iconContainer.getBoundingClientRect();
|
|
9544
|
+
badge.style.top = rect.top - 4 + "px";
|
|
9545
|
+
badge.style.left = rect.right - 14 + "px";
|
|
9546
|
+
}
|
|
9547
|
+
}
|
|
9548
|
+
});
|
|
9549
|
+
};
|
|
9550
|
+
updateBadgePositions();
|
|
9551
|
+
window.addEventListener('resize', updateBadgePositions);
|
|
9552
|
+
return function () {
|
|
9553
|
+
window.removeEventListener('resize', updateBadgePositions);
|
|
9554
|
+
};
|
|
9555
|
+
}, [content, isExpanded, _getTotalNotifications]);
|
|
9509
9556
|
return React__default.createElement(SidebarContainer, {
|
|
9510
9557
|
"$background": background,
|
|
9511
9558
|
onMouseEnter: function onMouseEnter() {
|