labsense-ui-kit 1.3.73 → 1.3.75

package/dist/index.js

@@ -9,6 +9,28 @@ var reactHotToast = require('react-hot-toast');
 var reactRouterDom = require('react-router-dom');
 var reactI18next = require('react-i18next');
 
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _createForOfIteratorHelperLoose(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (t) return (t = t.call(r)).next.bind(t);
+  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
+    t && (r = t);
+    var o = 0;
+    return function () {
+      return o >= r.length ? {
+        done: !0
+      } : {
+        done: !1,
+        value: r[o++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
@@ -21,6 +43,13 @@ function _extends() {
 function _taggedTemplateLiteralLoose(e, t) {
   return t || (t = e.slice(0)), e.raw = t, e;
 }
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
 
 var Action = function Action(_ref) {
   var size = _ref.size,
@@ -10586,7 +10615,7 @@ var Pagination = function Pagination(_ref4) {
     "$fontWeight": '400',
     "$fontSize": '14px'
   }, t('Items_Per_Page')), React__default.createElement(Container, null, React__default.createElement(SelectOption, {
-    width: '54px',
+    width: 'max-content',
     size: 'small',
     value: itemsPerPage.toString(),
     onChange: function onChange(e) {
@@ -10740,7 +10769,7 @@ var ProgressBar = function ProgressBar(_ref3) {
 };
 
 var _templateObject$n, _templateObject2$j, _templateObject3$c, _templateObject4$9, _templateObject5$8, _templateObject6$8, _templateObject7$6;
-var SidebarContainer = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  width: 68px;\n  max-width: 68px;\n  height: 100vh;\n  background: ", ";\n  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 998;\n  justify-content: space-between;\n\n  /* Expand on hover */\n  &:hover {\n    width: max-content;\n    max-width: 400px;\n\n    /* You can also add a class for children */\n    span, .expandable {\n      opacity: 1;\n      visibility: visible;\n      transform: translateX(0);\n    }\n  }\n"])), function (_ref) {
+var SidebarContainer = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  width: 68px;\n  max-width: 68px;\n  height: 100vh;\n  background: ", ";\n  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 998;\n  justify-content: space-between;\n  gap: 24px;\n\n  /* Expand on hover */\n  &:hover {\n    width: max-content;\n    max-width: 400px;\n\n    /* You can also add a class for children */\n    span, .expandable {\n      opacity: 1;\n      visibility: visible;\n      transform: translateX(0);\n    }\n  }\n"])), function (_ref) {
   var $background = _ref.$background,
     theme = _ref.theme;
   return $background || theme.vms.accent.softBlue;
@@ -10819,6 +10848,7 @@ var Sidebar = function Sidebar(_ref20) {
     openMenus = _useState[0],
     setOpenMenus = _useState[1];
   var isExpandedRef = React.useRef(isExpanded);
+  var sidebarRef = React.useRef(null);
   var _useState2 = React.useState(function () {
       var container = document.getElementById('badge-portal-container');
       if (!container) {
@@ -10865,7 +10895,7 @@ var Sidebar = function Sidebar(_ref20) {
       return currentBase === getBasePath(child.activeUrl) || currentBase === getBasePath(child.url);
     }));
   };
-  var ChildLink = React__default.memo(function (_ref22) {
+  var ChildLink = function ChildLink(_ref22) {
     var child = _ref22.child;
     var themeColors = styled.useTheme();
     var location = reactRouterDom.useLocation();
@@ -10898,7 +10928,7 @@ var Sidebar = function Sidebar(_ref20) {
     }, child.label), getTotalNotifications(child) > 0 && React__default.createElement(NotificationBadge, {
       "$position": 'unset'
     }, getTotalNotifications(child) > 99 ? '99+' : getTotalNotifications(child))));
-  });
+  };
   var renderChildLinks = function renderChildLinks(children) {
     return React__default.createElement(Container, {
       "$padding": '0px 0px 0px 16px',
@@ -10912,7 +10942,7 @@ var Sidebar = function Sidebar(_ref20) {
       });
     }));
   };
-  var SidebarItem = React__default.memo(function (_ref23) {
+  var SidebarItem = function SidebarItem(_ref23) {
     var item = _ref23.item,
       isActive = _ref23.isActive,
       isOpen = _ref23.isOpen,
@@ -11005,12 +11035,33 @@ var Sidebar = function Sidebar(_ref20) {
       "$hoverColor": themeColors.vms.text.white,
       "$width": '100%'
     }, ContentLayout), hasChildren && isExpanded && isOpen && renderChildLinks && React__default.createElement(Container, null, renderChildLinks(item.children)));
-  });
+  };
   var handleSidebarExpansion = React.useCallback(function (expanded) {
     if (isExpandedRef.current !== expanded) {
       setIsExpanded(expanded);
+      isExpandedRef.current = expanded;
     }
   }, [setIsExpanded]);
+  React.useEffect(function () {
+    var sidebar = sidebarRef.current;
+    if (!sidebar) return;
+    if (typeof ResizeObserver === 'undefined') return;
+    var resizeObserver = new ResizeObserver(function (entries) {
+      for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
+        var entry = _step.value;
+        var width = entry.contentRect.width;
+        if (width > 70) {
+          handleSidebarExpansion(true);
+        } else {
+          handleSidebarExpansion(false);
+        }
+      }
+    });
+    resizeObserver.observe(sidebar);
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, [handleSidebarExpansion]);
   React.useEffect(function () {
     var updateBadgePositions = function updateBadgePositions() {
       content.forEach(function (item) {
@@ -11032,13 +11083,8 @@ var Sidebar = function Sidebar(_ref20) {
     };
   }, [content, isExpanded, getTotalNotifications]);
   return React__default.createElement(SidebarContainer, {
-    "$background": background,
-    onMouseEnter: function onMouseEnter() {
-      return handleSidebarExpansion(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return handleSidebarExpansion(false);
-    }
+    ref: sidebarRef,
+    "$background": background
   }, React__default.createElement(Container, {
     "$flexDirection": 'column',
     "$gap": '28px',
@@ -11055,7 +11101,9 @@ var Sidebar = function Sidebar(_ref20) {
   }))), React__default.createElement(Container, {
     "$flexDirection": 'column',
     "$gap": '16px',
-    "$width": '100%'
+    "$width": '100%',
+    "$overflow": 'auto',
+    "$scrollbarWidth": 'none'
   }, content.map(function (item) {
     var _item$children3;
     var active = isRouteActive(item) || false;