@bigbinary/neeto-molecules 1.0.89-beta → 1.0.90-beta

package/dist/Sidebar.js

@@ -1,10 +1,10 @@
 import React, { useRef, useCallback, useEffect, Children, isValidElement, cloneElement, forwardRef, useState } from 'react';
 import { globalProps as globalProps$1 } from '@bigbinary/neeto-commons-frontend/initializers';
+import { useFetchNeetoApps, useLocalStorage } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { Typography, Button, Input, Spinner, Avatar, Tooltip } from '@bigbinary/neetoui';
-import { toLower, mergeDeepLeft, all, curry, is, includes, __, not } from 'ramda';
+import { toLower, all, mergeDeepLeft, curry, is, includes, __, not } from 'ramda';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation, NavLink } from 'react-router-dom';
-import { useFetchNeetoApps } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { NeetoIcon, Close, Search, AppSwitcher as AppSwitcher$1, ChatEmpty, Book, Gift, Keyboard, User, Settings, LeftArrow, Help, Down } from '@bigbinary/neeto-icons';
 import { capitalize, truncate, findBy, isNotPresent } from '@bigbinary/neeto-commons-frontend/pure';
 import * as AppIcons from '@bigbinary/neeto-icons/app-icons';
@@ -31486,7 +31486,7 @@ SwitchTransition.defaultProps = {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css$1 = ".neeto-molecules-app-switcher__backdrop{align-items:center;background-color:rgba(27,31,35,.867);flex-direction:row;left:240px;overflow:hidden;position:fixed;top:0;width:100vw;z-index:99996}.neeto-molecules-app-switcher__backdrop,.neeto-molecules-app-switcher__wrapper{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;height:100vh;justify-content:flex-start;transition:all .3s}.neeto-molecules-app-switcher__wrapper{align-items:flex-start;animation:nuifadeIn .3s ease-in;background-color:rgb(var(--neeto-ui-white));flex-direction:column;max-width:100%;overflow-y:auto;padding:72px;position:relative;width:calc(100% - 240px)}.neeto-molecules-app-switcher__grid{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}.neeto-molecules-app-switcher__header{align-items:center;display:flex;gap:16px;justify-content:space-between;margin-bottom:32px;position:relative;width:100%}.neeto-molecules-app-switcher__close-btn{position:absolute;right:24px;top:24px}.neeto-molecules-app-switcher__search-wrapper{width:316px}.neeto-molecules-app-switcher__body{display:flex;flex-direction:column;font-size:var(--neeto-ui-text-sm);gap:12px;margin-bottom:24px;width:100%}.neeto-molecules-app-switcher-link{align-items:center;background-color:rgb(var(--neeto-ui-gray-100));border-color:rgb(var(--neeto-ui-gray-100));border-radius:var(--neeto-ui-rounded-lg);border-style:solid;border-width:2px;cursor:pointer;display:flex;gap:12px;max-width:100%;padding:12px 16px;text-decoration:none;transition:background-color .3s ease-in-out;width:100%}.neeto-molecules-app-switcher-link:focus,.neeto-molecules-app-switcher-link:focus-visible{outline:none}.neeto-molecules-app-switcher-link:focus-visible{background-color:rgb(var(--neeto-ui-gray-200))}.neeto-molecules-app-switcher-link:not(.neeto-molecules-app-switcher-link--active):hover{background-color:rgb(var(--neeto-ui-gray-200))}.neeto-molecules-app-switcher-link--active{background:rgb(var(--neeto-ui-primary-100));border-color:rgb(var(--neeto-ui-primary-600))}.neeto-molecules-app-switcher-link__icon-holder{align-items:center;border-radius:var(--neeto-ui-rounded-lg);display:flex;flex-shrink:0;height:42px;justify-content:center;width:42px}.neeto-molecules-app-switcher-link__content{flex-grow:1}.neeto-molecules-app-switcher-link__content span{display:block}.neeto-molecules-app-switcher-enter.neeto-molecules-app-switcher__backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0}.neeto-molecules-app-switcher-enter-active.neeto-molecules-app-switcher__backdrop,.neeto-molecules-app-switcher-enter-done.neeto-molecules-app-switcher__backdrop,.neeto-molecules-app-switcher-exit.neeto-molecules-app-switcher__backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:1}.neeto-molecules-app-switcher-exit-active.neeto-molecules-app-switcher__backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0}";
+var css$1 = ".neeto-molecules-app-switcher__backdrop{align-items:center;background-color:rgba(27,31,35,.867);flex-direction:row;left:240px;overflow:hidden;position:fixed;top:0;width:100vw;z-index:99996}.neeto-molecules-app-switcher__backdrop,.neeto-molecules-app-switcher__wrapper{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;height:100vh;justify-content:flex-start;transition:all .3s}.neeto-molecules-app-switcher__wrapper{align-items:flex-start;animation:nuifadeIn .3s ease-in;background-color:rgb(var(--neeto-ui-white));flex-direction:column;max-width:100%;overflow-y:auto;padding:40px;position:relative;width:calc(100% - 240px)}.neeto-molecules-app-switcher__grid{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}.neeto-molecules-app-switcher__header{align-items:center;display:flex;gap:16px;justify-content:space-between;margin-bottom:32px;position:relative;width:100%}.neeto-molecules-app-switcher__header h1{font-size:40px;line-height:var(--neeto-ui-leading-tight);margin-top:-16px}.neeto-molecules-app-switcher__close-btn{position:absolute;right:12px;top:12px}.neeto-molecules-app-switcher__search-wrapper{width:316px}.neeto-molecules-app-switcher__body{display:flex;flex-direction:column;font-size:var(--neeto-ui-text-sm);gap:12px;margin-bottom:24px;width:100%}.neeto-molecules-app-switcher-link{align-items:center;background-color:rgb(var(--neeto-ui-gray-100));border-color:rgb(var(--neeto-ui-gray-100));border-radius:var(--neeto-ui-rounded-lg);border-style:solid;border-width:2px;cursor:pointer;display:flex;gap:12px;max-width:100%;padding:12px 16px;text-decoration:none;transition:background-color .3s ease-in-out;width:100%}.neeto-molecules-app-switcher-link:focus,.neeto-molecules-app-switcher-link:focus-visible{outline:none}.neeto-molecules-app-switcher-link:focus-visible{background-color:rgb(var(--neeto-ui-gray-200))}.neeto-molecules-app-switcher-link:not(.neeto-molecules-app-switcher-link--active):hover{background-color:rgb(var(--neeto-ui-gray-200))}.neeto-molecules-app-switcher-link--active{background:rgb(var(--neeto-ui-primary-100));border-color:rgb(var(--neeto-ui-primary-600))}.neeto-molecules-app-switcher-link__icon-holder{align-items:center;border-radius:var(--neeto-ui-rounded-lg);display:flex;flex-shrink:0;height:42px;justify-content:center;width:42px}.neeto-molecules-app-switcher-link__content{flex-grow:1}.neeto-molecules-app-switcher-link__content span{display:block}.neeto-molecules-app-switcher-enter.neeto-molecules-app-switcher__backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0}.neeto-molecules-app-switcher-enter-active.neeto-molecules-app-switcher__backdrop,.neeto-molecules-app-switcher-enter-done.neeto-molecules-app-switcher__backdrop,.neeto-molecules-app-switcher-exit.neeto-molecules-app-switcher__backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:1}.neeto-molecules-app-switcher-exit-active.neeto-molecules-app-switcher__backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0}";
 n(css$1,{});
 
 function _extends() {
@@ -31614,7 +31614,7 @@ var Body = function Body(_ref) {
     className: "neeto-molecules-app-switcher__header",
     "data-cy": "app-switcher-body-wrapper"
   }, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2"
+    style: "h1"
   }, t("neetoMolecules.appSwitcher.chooseNeetoProduct")), /*#__PURE__*/React.createElement("div", {
     className: "neeto-molecules-app-switcher__search-wrapper"
   }, /*#__PURE__*/React.createElement(Input, {
@@ -31799,6 +31799,24 @@ var DEFAULT_HELP_LINK_PROPS = {
   }
 };
 
+var isSubRouteActive = function isSubRouteActive(subRoute, location) {
+  var currentBrowserUrl = new URL(location.pathname + location.search, window.location.origin);
+  var targetUrl = new URL(subRoute, window.location.origin);
+  if (!currentBrowserUrl.pathname.startsWith(targetUrl.pathname)) {
+    return false;
+  }
+  var targetSearchParams = targetUrl.searchParams;
+  var targetSearchKeys = Array.from(targetSearchParams.keys());
+  return all(function (key) {
+    return currentBrowserUrl.searchParams.get(key) === targetSearchParams.get(key);
+  }, targetSearchKeys);
+};
+var getSidebarStateLocalStorageKey = function getSidebarStateLocalStorageKey() {
+  var _globalProps$user, _globalProps$user2;
+  var user = ((_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.email) || ((_globalProps$user2 = globalProps.user) === null || _globalProps$user2 === void 0 ? void 0 : _globalProps$user2.phoneNumber);
+  return "sidebarState-".concat(user);
+};
+
 var getProfileInfo = function getProfileInfo(isOwner, profileInfoOverrides) {
   var _globalProps$user, _globalProps$user2, _globalProps$user3, _globalProps$user4, _globalProps$user5;
   return mergeDeepLeft(profileInfoOverrides, {
@@ -31825,6 +31843,7 @@ var getProfileInfo = function getProfileInfo(isOwner, profileInfoOverrides) {
       label: t$1("neetoMolecules.sidebar.logout"),
       onClick: function onClick() {
         resetAuthTokens();
+        localStorage.removeItem(getSidebarStateLocalStorageKey());
         window.location.href = "/logout";
       },
       "data-cy": "profile-logout-button"
@@ -32149,19 +32168,6 @@ var Header = function Header() {
 };
 var Header$1 = /*#__PURE__*/React.memo(Header);
 
-var isSubRouteActive = function isSubRouteActive(subRoute, location) {
-  var currentBrowserUrl = new URL(location.pathname + location.search, window.location.origin);
-  var targetUrl = new URL(subRoute, window.location.origin);
-  if (!currentBrowserUrl.pathname.startsWith(targetUrl.pathname)) {
-    return false;
-  }
-  var targetSearchParams = targetUrl.searchParams;
-  var targetSearchKeys = Array.from(targetSearchParams.keys());
-  return all(function (key) {
-    return currentBrowserUrl.searchParams.get(key) === targetSearchParams.get(key);
-  }, targetSearchKeys);
-};
-
 var _excluded = ["label", "to", "icon", "items"],
   _excluded2 = ["label", "to", "count"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -32270,10 +32276,10 @@ var Sidebar = function Sidebar(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isAppSwitcherOpen = _useState2[0],
     setIsAppSwitcherOpen = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isSidebarCollapsed = _useState4[0],
-    setIsSidebarCollapsed = _useState4[1];
+  var _useLocalStorage = useLocalStorage(getSidebarStateLocalStorageKey(), false),
+    _useLocalStorage2 = _slicedToArray(_useLocalStorage, 2),
+    isSidebarCollapsed = _useLocalStorage2[0],
+    setIsSidebarCollapsed = _useLocalStorage2[1];
   var location = useLocation();
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -32283,6 +32289,7 @@ var Sidebar = function Sidebar(_ref) {
   }, [location]);
   var productName = globalProps$1.appName.substr(5).toLowerCase();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    "data-testid": "sidebar-container",
     className: classnames("neeto-molecules-sidebar__wrapper", {
       "neeto-molecules-sidebar__wrapper--collapsed": isSidebarCollapsed
     })
@@ -32304,6 +32311,7 @@ var Sidebar = function Sidebar(_ref) {
     className: "neeto-molecules-sidebar__toggler-hover-area"
   }), /*#__PURE__*/React.createElement(Button, {
     className: "neeto-molecules-sidebar__toggler",
+    "data-testid": "sidebar-toggleButton",
     style: "text",
     icon: function icon() {
       return /*#__PURE__*/React.createElement(Chevron, {
@@ -32317,7 +32325,7 @@ var Sidebar = function Sidebar(_ref) {
       position: "bottom"
     },
     onClick: function onClick() {
-      return setIsSidebarCollapsed(!isSidebarCollapsed);
+      setIsSidebarCollapsed(!isSidebarCollapsed);
     }
   })), showAppSwitcher && /*#__PURE__*/React.createElement(AppSwitcher, {
     isOpen: isAppSwitcherOpen,