labsense-ui-kit 1.3.89 → 1.3.91
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/Badge/IconTooltip.d.ts +1 -0
- package/dist/index.js +35 -28
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +35 -28
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.modern.js
CHANGED
|
@@ -7057,7 +7057,7 @@ var Badge = function Badge(_ref8) {
|
|
|
7057
7057
|
};
|
|
7058
7058
|
|
|
7059
7059
|
var _templateObject$4, _templateObject2$4, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
7060
|
-
var TooltipContainer = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: absolute;\n z-index: 10;\n align-items: center;\n justify-content: center;\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.3s;\n border-radius: ", ";\n padding: 6px 8px;\n border: ", ";\n min-width: ", ";\n max-width: ", ";\n background-color: ", ";\n gap: ", ";\n\n ", "\n\n &::after {\n content: '';\n position: absolute;\n width: 16px;\n height: 8px;\n background-color: ", ";\n clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n\n ", "\n }\n"])), function (_ref) {
|
|
7060
|
+
var TooltipContainer = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: absolute;\n z-index: 10;\n align-items: center;\n justify-content: center;\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.3s;\n border-radius: ", ";\n padding: 6px 8px;\n border: ", ";\n min-width: ", ";\n max-width: ", ";\n text-align: ", ";\n background-color: ", ";\n gap: ", ";\n\n ", "\n\n &::after {\n content: '';\n position: absolute;\n width: 16px;\n height: 8px;\n background-color: ", ";\n clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n\n ", "\n }\n"])), function (_ref) {
|
|
7061
7061
|
var $borderRadius = _ref.$borderRadius;
|
|
7062
7062
|
return $borderRadius != null ? $borderRadius : '4px';
|
|
7063
7063
|
}, function (_ref2) {
|
|
@@ -7070,25 +7070,28 @@ var TooltipContainer = styled.div(_templateObject$4 || (_templateObject$4 = _tag
|
|
|
7070
7070
|
var $maxWidth = _ref4.$maxWidth;
|
|
7071
7071
|
return $maxWidth != null ? $maxWidth : 'auto';
|
|
7072
7072
|
}, function (_ref5) {
|
|
7073
|
-
var $
|
|
7074
|
-
|
|
7075
|
-
return $background != null ? $background : theme.vms.accent.light_1;
|
|
7073
|
+
var $textAlign = _ref5.$textAlign;
|
|
7074
|
+
return $textAlign;
|
|
7076
7075
|
}, function (_ref6) {
|
|
7077
|
-
var $
|
|
7078
|
-
|
|
7076
|
+
var $background = _ref6.$background,
|
|
7077
|
+
theme = _ref6.theme;
|
|
7078
|
+
return $background != null ? $background : theme.vms.accent.light_1;
|
|
7079
7079
|
}, function (_ref7) {
|
|
7080
|
-
var $
|
|
7081
|
-
|
|
7082
|
-
|
|
7080
|
+
var $gap = _ref7.$gap;
|
|
7081
|
+
return $gap != null ? $gap : '16px';
|
|
7082
|
+
}, function (_ref8) {
|
|
7083
|
+
var $tooltipPosition = _ref8.$tooltipPosition,
|
|
7084
|
+
$iconSize = _ref8.$iconSize,
|
|
7085
|
+
$tooltipTop = _ref8.$tooltipTop;
|
|
7083
7086
|
var vertical = $tooltipPosition.startsWith('top') ? "bottom: " + ($tooltipTop != null ? $tooltipTop : "calc(50% + " + ($iconSize + 2) + "px)") + ";" : "top: " + ($tooltipTop != null ? $tooltipTop : "calc(50% + " + ($iconSize + 2) + "px)") + ";";
|
|
7084
7087
|
var horizontal = $tooltipPosition.endsWith('Left') ? css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["left: calc(100% + 10px); transform: translateX(-99%);"]))) : $tooltipPosition.endsWith('Center') ? css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["left: 50%; transform: translateX(-50%);"]))) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["right: calc(100% + 10px); transform: translateX(99%);"])));
|
|
7085
7088
|
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["", " ", ";"])), vertical, horizontal);
|
|
7086
|
-
}, function (_ref8) {
|
|
7087
|
-
var $background = _ref8.$background,
|
|
7088
|
-
theme = _ref8.theme;
|
|
7089
|
-
return $background != null ? $background : theme.vms.accent.light_1;
|
|
7090
7089
|
}, function (_ref9) {
|
|
7091
|
-
var $
|
|
7090
|
+
var $background = _ref9.$background,
|
|
7091
|
+
theme = _ref9.theme;
|
|
7092
|
+
return $background != null ? $background : theme.vms.accent.light_1;
|
|
7093
|
+
}, function (_ref10) {
|
|
7094
|
+
var $tooltipPosition = _ref10.$tooltipPosition;
|
|
7092
7095
|
if ($tooltipPosition.startsWith('top')) {
|
|
7093
7096
|
return $tooltipPosition.endsWith('Left') ? css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["top: 100%; right: 10px; transform: rotate(180deg);"]))) : $tooltipPosition.endsWith('Right') ? css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["top: 100%; left: 10px; transform: rotate(180deg);"]))) : css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["top: 100%; left: 50%; transform: translateX(-50%) rotate(180deg);"])));
|
|
7094
7097
|
} else {
|
|
@@ -7096,24 +7099,24 @@ var TooltipContainer = styled.div(_templateObject$4 || (_templateObject$4 = _tag
|
|
|
7096
7099
|
}
|
|
7097
7100
|
});
|
|
7098
7101
|
var TooltipWrapper$1 = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n align-items: center;\n cursor: pointer;\n\n &:hover ", " {\n visibility: visible;\n opacity: 1;\n }\n"])), TooltipContainer);
|
|
7099
|
-
var IconTooltip = function IconTooltip(
|
|
7102
|
+
var IconTooltip = function IconTooltip(_ref11) {
|
|
7100
7103
|
var _tooltipCSS$position;
|
|
7101
|
-
var
|
|
7102
|
-
icon =
|
|
7104
|
+
var _ref11$icon = _ref11.icon,
|
|
7105
|
+
icon = _ref11$icon === void 0 ? {
|
|
7103
7106
|
icon: 'Information',
|
|
7104
7107
|
size: 12,
|
|
7105
7108
|
weight: '0px'
|
|
7106
|
-
} :
|
|
7107
|
-
image =
|
|
7108
|
-
infoIcon =
|
|
7109
|
-
infoText =
|
|
7110
|
-
|
|
7111
|
-
tooltipCSS =
|
|
7109
|
+
} : _ref11$icon,
|
|
7110
|
+
image = _ref11.image,
|
|
7111
|
+
infoIcon = _ref11.infoIcon,
|
|
7112
|
+
infoText = _ref11.infoText,
|
|
7113
|
+
_ref11$tooltipCSS = _ref11.tooltipCSS,
|
|
7114
|
+
tooltipCSS = _ref11$tooltipCSS === void 0 ? {
|
|
7112
7115
|
gap: '4px',
|
|
7113
7116
|
minWidth: 'max-content',
|
|
7114
7117
|
position: 'bottomCenter',
|
|
7115
7118
|
tooltipTop: undefined
|
|
7116
|
-
} :
|
|
7119
|
+
} : _ref11$tooltipCSS;
|
|
7117
7120
|
var themeColors = useTheme$1();
|
|
7118
7121
|
return React.createElement(TooltipWrapper$1, null, image ? React.createElement("img", {
|
|
7119
7122
|
src: image.src,
|
|
@@ -7132,7 +7135,8 @@ var IconTooltip = function IconTooltip(_ref10) {
|
|
|
7132
7135
|
"$gap": tooltipCSS.gap,
|
|
7133
7136
|
"$iconSize": icon.size || 17,
|
|
7134
7137
|
"$border": tooltipCSS.border,
|
|
7135
|
-
"$borderRadius": tooltipCSS.borderRadius
|
|
7138
|
+
"$borderRadius": tooltipCSS.borderRadius,
|
|
7139
|
+
"$textAlign": tooltipCSS.textAlign
|
|
7136
7140
|
}, infoIcon && React.createElement(Icon, Object.assign({}, infoIcon)), infoText));
|
|
7137
7141
|
};
|
|
7138
7142
|
|
|
@@ -11037,7 +11041,8 @@ var Sidebar = function Sidebar(_ref26) {
|
|
|
11037
11041
|
return React.createElement(Container, {
|
|
11038
11042
|
"$padding": '0px 0px 0px 16px',
|
|
11039
11043
|
"$flexDirection": 'column',
|
|
11040
|
-
"$gap": '10px'
|
|
11044
|
+
"$gap": '10px',
|
|
11045
|
+
"$width": '100%'
|
|
11041
11046
|
}, children.map(function (child) {
|
|
11042
11047
|
return React.createElement(ChildLink, {
|
|
11043
11048
|
key: child.id,
|
|
@@ -11139,7 +11144,9 @@ var Sidebar = function Sidebar(_ref26) {
|
|
|
11139
11144
|
"$color": themeColors.vms.text.medium,
|
|
11140
11145
|
"$hoverColor": themeColors.vms.text.white,
|
|
11141
11146
|
"$width": '100%'
|
|
11142
|
-
}, ContentLayout), hasChildren && isExpanded && isOpen && renderChildLinks && React.createElement(Container,
|
|
11147
|
+
}, ContentLayout), hasChildren && isExpanded && isOpen && renderChildLinks && React.createElement(Container, {
|
|
11148
|
+
"$width": '100%'
|
|
11149
|
+
}, renderChildLinks(item.children)));
|
|
11143
11150
|
};
|
|
11144
11151
|
var handleSidebarExpansion = useCallback(function (expanded) {
|
|
11145
11152
|
if (isExpandedRef.current !== expanded) {
|
|
@@ -11187,7 +11194,7 @@ var Sidebar = function Sidebar(_ref26) {
|
|
|
11187
11194
|
return function () {
|
|
11188
11195
|
window.removeEventListener('resize', updateBadgePositions);
|
|
11189
11196
|
};
|
|
11190
|
-
}, [content, isExpanded, getTotalNotifications]);
|
|
11197
|
+
}, [content, isExpanded, isMobileOpen, getTotalNotifications]);
|
|
11191
11198
|
var themeColors = useTheme$1();
|
|
11192
11199
|
return React.createElement(React.Fragment, null, React.createElement(Container, {
|
|
11193
11200
|
"$width": '100%',
|