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.modern.js
CHANGED
|
@@ -3,6 +3,7 @@ import styled, { useTheme as useTheme$1, css, keyframes, styled as styled$1 } fr
|
|
|
3
3
|
import { toast } from 'react-hot-toast';
|
|
4
4
|
import { useNavigate, NavLink, useLocation } from 'react-router-dom';
|
|
5
5
|
import { useTranslation } from 'react-i18next';
|
|
6
|
+
import { createPortal } from 'react-dom';
|
|
6
7
|
|
|
7
8
|
function _extends() {
|
|
8
9
|
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
@@ -6334,7 +6335,7 @@ var Container$1 = styled.div(_templateObject4$1 || (_templateObject4$1 = _tagged
|
|
|
6334
6335
|
var cursor = _ref9.cursor;
|
|
6335
6336
|
return cursor;
|
|
6336
6337
|
});
|
|
6337
|
-
var StyledButton = styled.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
|
|
6338
|
+
var StyledButton = styled.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) {
|
|
6338
6339
|
var $disabled = _ref10.$disabled;
|
|
6339
6340
|
return $disabled ? 'none' : 'auto';
|
|
6340
6341
|
}, function (_ref11) {
|
|
@@ -6362,21 +6363,21 @@ var StyledButton = styled.button(_templateObject5$1 || (_templateObject5$1 = _ta
|
|
|
6362
6363
|
theme = _ref15.theme;
|
|
6363
6364
|
switch ($variant) {
|
|
6364
6365
|
case 'primary':
|
|
6365
|
-
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
|
|
6366
|
+
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 ";
|
|
6366
6367
|
case 'secondary':
|
|
6367
|
-
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
|
|
6368
|
+
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 ";
|
|
6368
6369
|
case 'tertiary':
|
|
6369
|
-
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
|
|
6370
|
+
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 ";
|
|
6370
6371
|
case 'error':
|
|
6371
|
-
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
|
|
6372
|
+
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 ";
|
|
6372
6373
|
case 'outline-primary':
|
|
6373
|
-
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
|
|
6374
|
+
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 ";
|
|
6374
6375
|
case 'outline-secondary':
|
|
6375
|
-
return "\n
|
|
6376
|
+
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 ";
|
|
6376
6377
|
case 'outline-error':
|
|
6377
|
-
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
|
|
6378
|
+
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 ";
|
|
6378
6379
|
case 'custom':
|
|
6379
|
-
return "\n background: " + $background + ";\n color: " + $color + ";\n border: " + ("1px solid " + $borderDefault) + ";\n &:hover{\n border: 1px solid " + $borderHover + ";\n
|
|
6380
|
+
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 ";
|
|
6380
6381
|
default:
|
|
6381
6382
|
return '';
|
|
6382
6383
|
}
|
|
@@ -6454,10 +6455,10 @@ var ButtonComponent = function ButtonComponent(_ref21) {
|
|
|
6454
6455
|
"$padding": padding,
|
|
6455
6456
|
"$variant": variant,
|
|
6456
6457
|
onMouseEnter: function onMouseEnter() {
|
|
6457
|
-
|
|
6458
|
+
if (!disabled) setIsHovered(true);
|
|
6458
6459
|
},
|
|
6459
6460
|
onMouseLeave: function onMouseLeave() {
|
|
6460
|
-
|
|
6461
|
+
if (!disabled) setIsHovered(false);
|
|
6461
6462
|
}
|
|
6462
6463
|
}, React.createElement(Container$1, {
|
|
6463
6464
|
"$iconPosition": iconPos,
|
|
@@ -9323,7 +9324,7 @@ var TextContainer = styled.span(_templateObject6$7 || (_templateObject6$7 = _tag
|
|
|
9323
9324
|
var $fontWeight = _ref15.$fontWeight;
|
|
9324
9325
|
return $fontWeight || '500';
|
|
9325
9326
|
}, SidebarContainer);
|
|
9326
|
-
var NotificationBadge = styled.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n position: ", ";\n top: -4px;\n right:
|
|
9327
|
+
var NotificationBadge = styled.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) {
|
|
9327
9328
|
var $position = _ref16.$position;
|
|
9328
9329
|
return $position || 'absolute';
|
|
9329
9330
|
});
|
|
@@ -9339,7 +9340,17 @@ var Sidebar = function Sidebar(_ref17) {
|
|
|
9339
9340
|
var _useState = useState({}),
|
|
9340
9341
|
openMenus = _useState[0],
|
|
9341
9342
|
setOpenMenus = _useState[1];
|
|
9342
|
-
var isExpandedRef =
|
|
9343
|
+
var isExpandedRef = useRef(isExpanded);
|
|
9344
|
+
var _useState2 = useState(function () {
|
|
9345
|
+
var container = document.getElementById('badge-portal-container');
|
|
9346
|
+
if (!container) {
|
|
9347
|
+
container = document.createElement('div');
|
|
9348
|
+
container.id = 'badge-portal-container';
|
|
9349
|
+
document.body.appendChild(container);
|
|
9350
|
+
}
|
|
9351
|
+
return container;
|
|
9352
|
+
}),
|
|
9353
|
+
badgePortalContainer = _useState2[0];
|
|
9343
9354
|
useEffect(function () {
|
|
9344
9355
|
isExpandedRef.current = isExpanded;
|
|
9345
9356
|
if (!isExpanded) setOpenMenus({});
|
|
@@ -9451,7 +9462,18 @@ var Sidebar = function Sidebar(_ref17) {
|
|
|
9451
9462
|
"$cursor": 'pointer',
|
|
9452
9463
|
"$borderRadius": '4px'
|
|
9453
9464
|
}, React.createElement(Container, {
|
|
9454
|
-
"$position": 'relative'
|
|
9465
|
+
"$position": 'relative',
|
|
9466
|
+
id: "icon-container-" + item.id,
|
|
9467
|
+
ref: function ref(el) {
|
|
9468
|
+
if (el && _getTotalNotifications(item) > 0) {
|
|
9469
|
+
var rect = el.getBoundingClientRect();
|
|
9470
|
+
var badge = document.getElementById("badge-" + item.id);
|
|
9471
|
+
if (badge) {
|
|
9472
|
+
badge.style.top = rect.top - 4 + "px";
|
|
9473
|
+
badge.style.left = rect.right - 14 + "px";
|
|
9474
|
+
}
|
|
9475
|
+
}
|
|
9476
|
+
}
|
|
9455
9477
|
}, React.createElement(IconWrapper$2, {
|
|
9456
9478
|
"$selected": !!isActive
|
|
9457
9479
|
}, React.createElement(Icon, {
|
|
@@ -9460,7 +9482,12 @@ var Sidebar = function Sidebar(_ref17) {
|
|
|
9460
9482
|
size: 20,
|
|
9461
9483
|
weight: item.iconWeight,
|
|
9462
9484
|
color: isActive ? themeColors.vms.text.white : themeColors.vms.text.medium
|
|
9463
|
-
})), _getTotalNotifications(item) > 0 && React.createElement(NotificationBadge,
|
|
9485
|
+
})), _getTotalNotifications(item) > 0 && createPortal(React.createElement(NotificationBadge, {
|
|
9486
|
+
id: "badge-" + item.id,
|
|
9487
|
+
style: {
|
|
9488
|
+
position: 'fixed'
|
|
9489
|
+
}
|
|
9490
|
+
}, _getTotalNotifications(item) > 99 ? '99+' : _getTotalNotifications(item)), badgePortalContainer)), React.createElement(TextContainer, {
|
|
9464
9491
|
"$fontSize": '14px'
|
|
9465
9492
|
}, item.label)), hasChildren && React.createElement(Container, {
|
|
9466
9493
|
"$padding": '9px',
|
|
@@ -9502,6 +9529,26 @@ var Sidebar = function Sidebar(_ref17) {
|
|
|
9502
9529
|
setIsExpanded(expanded);
|
|
9503
9530
|
}
|
|
9504
9531
|
}, [setIsExpanded]);
|
|
9532
|
+
useEffect(function () {
|
|
9533
|
+
var updateBadgePositions = function updateBadgePositions() {
|
|
9534
|
+
content.forEach(function (item) {
|
|
9535
|
+
if (_getTotalNotifications(item) > 0) {
|
|
9536
|
+
var iconContainer = document.getElementById("icon-container-" + item.id);
|
|
9537
|
+
var badge = document.getElementById("badge-" + item.id);
|
|
9538
|
+
if (iconContainer && badge) {
|
|
9539
|
+
var rect = iconContainer.getBoundingClientRect();
|
|
9540
|
+
badge.style.top = rect.top - 4 + "px";
|
|
9541
|
+
badge.style.left = rect.right - 14 + "px";
|
|
9542
|
+
}
|
|
9543
|
+
}
|
|
9544
|
+
});
|
|
9545
|
+
};
|
|
9546
|
+
updateBadgePositions();
|
|
9547
|
+
window.addEventListener('resize', updateBadgePositions);
|
|
9548
|
+
return function () {
|
|
9549
|
+
window.removeEventListener('resize', updateBadgePositions);
|
|
9550
|
+
};
|
|
9551
|
+
}, [content, isExpanded, _getTotalNotifications]);
|
|
9505
9552
|
return React.createElement(SidebarContainer, {
|
|
9506
9553
|
"$background": background,
|
|
9507
9554
|
onMouseEnter: function onMouseEnter() {
|