@bigbinary/neeto-molecules 1.1.10 → 1.1.12

package/dist/Sidebar/FeaturedTooltip.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Typography } from "@bigbinary/neetoui";
+var FeaturedTooltip = function FeaturedTooltip(_ref) {
+  var label = _ref.label,
+    description = _ref.description;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-flex neeto-ui-flex-col sidebar-featured-tooltip"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-center sidebar-featured-tooltip__title",
+    lineHeight: "tight",
+    style: "h5",
+    weight: "semibold"
+  }, label), description && /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-center neeto-ui-text-gray-400 sidebar-featured-tooltip__description",
+    lineHeight: "normal",
+    style: "body3"
+  }, description));
+};
+export default /*#__PURE__*/React.memo(FeaturedTooltip);

package/dist/Sidebar/Footer/AppSwitcherButton.js

@@ -0,0 +1,48 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from "react";
+import { useFetchNeetoApps } from "@bigbinary/neeto-commons-frontend/react-utils";
+import { AppSwitcher as NeetoUIAppSwitcherIcon } from "@bigbinary/neeto-icons";
+import { Typography, Spinner } from "@bigbinary/neetoui";
+import { useTranslation } from "react-i18next";
+import "../sidebar.scss";
+var AppSwitcherButton = function AppSwitcherButton(_ref) {
+  var onAppSwitcherToggle = _ref.onAppSwitcherToggle;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasHovered = _useState2[0],
+    setHasHovered = _useState2[1];
+  var _useFetchNeetoApps = useFetchNeetoApps(),
+    data = _useFetchNeetoApps.data,
+    refetchNeetoApps = _useFetchNeetoApps.refetch,
+    isStale = _useFetchNeetoApps.isStale,
+    isLoading = _useFetchNeetoApps.isLoading;
+  var handleAppSwitcherToggle = function handleAppSwitcherToggle(event) {
+    if (!data) event.stopPropagation();else onAppSwitcherToggle();
+  };
+  return /*#__PURE__*/React.createElement("button", {
+    className: "neeto-molecules-sidebar__link neeto-molecules-sidebar__link--app-switcher neeto-molecules-sidebar__link--button neeto-ui-flex neeto-ui-w-full neeto-ui-select-none neeto-ui-items-center neeto-ui-justify-start neeto-ui-shadow-none",
+    "data-cy": "app-switcher-button",
+    "data-testid": "app-switcher-button",
+    onClick: handleAppSwitcherToggle,
+    onMouseEnter: function onMouseEnter() {
+      if (!hasHovered && isStale) {
+        refetchNeetoApps();
+        setHasHovered(true);
+      }
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "neeto-molecules-sidebar__link-icon neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center h-6 w-6"
+  }, hasHovered && isLoading ? /*#__PURE__*/React.createElement("span", {
+    "data-testid": "app-switcher-button-loader"
+  }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement(NeetoUIAppSwitcherIcon, {
+    size: 24
+  })), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-molecules-sidebar__link-label",
+    component: "span",
+    style: "body2",
+    weight: "normal"
+  }, t("neetoMolecules.sidebar.productSwitcher")));
+};
+export default AppSwitcherButton;

package/dist/Sidebar/Footer/ProfileButton.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { useFetchNeetoApps } from "@bigbinary/neeto-commons-frontend/react-utils";
+import { Tooltip } from "@bigbinary/neetoui";
+import { getProfileInfo } from "./utils";
+import ProfileSection from "../ProfileSection";
+import ProfileMenu from "../ProfileSection/ProfileMenu";
+var ProfileButton = function ProfileButton(_ref) {
+  var extraTopLinks = _ref.extraTopLinks,
+    profileInfoOverrides = _ref.profileInfoOverrides;
+  var _useFetchNeetoApps = useFetchNeetoApps(),
+    data = _useFetchNeetoApps.data;
+  var profileInfo = getProfileInfo(data === null || data === void 0 ? void 0 : data.isOwner, profileInfoOverrides);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    interactive: true,
+    className: "neeto-molecules-profile-popup-wrapper",
+    content: /*#__PURE__*/React.createElement(ProfileMenu, {
+      extraTopLinks: extraTopLinks,
+      profileInfo: profileInfo
+    }),
+    disabled: !data,
+    hideOnClick: false,
+    interactiveDebounce: 20,
+    offset: [0, -70],
+    position: "right",
+    theme: "light"
+  }, /*#__PURE__*/React.createElement(ProfileSection, {
+    profileInfo: profileInfo
+  }));
+};
+export default ProfileButton;

package/dist/Sidebar/Footer/index.js

@@ -0,0 +1,56 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useState } from "react";
+import { Tooltip } from "@bigbinary/neetoui";
+import AppSwitcherButton from "./AppSwitcherButton";
+import ProfileButton from "./ProfileButton";
+import HelpSection from "../HelpSection";
+import HelpSectionMenu from "../HelpSection/HelpSectionMenu";
+import "../sidebar.scss";
+var Footer = function Footer(_ref) {
+  var extraTopLinks = _ref.extraTopLinks,
+    helpLinkOverrides = _ref.helpLinkOverrides,
+    profileInfoOverrides = _ref.profileInfoOverrides,
+    _ref$showAppSwitcher = _ref.showAppSwitcher,
+    showAppSwitcher = _ref$showAppSwitcher === void 0 ? false : _ref$showAppSwitcher,
+    onAppSwitcherToggle = _ref.onAppSwitcherToggle;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    changesCount = _useState2[0],
+    setChangesCount = _useState2[1];
+  useEffect(function () {
+    var Nv = {
+      onReceiveData: function onReceiveData(data) {
+        if (data.unreadCount) {
+          setChangesCount(data.unreadCount);
+        }
+      },
+      onShow: function onShow() {
+        setChangesCount(null);
+      }
+    };
+    window.Nv = window.Nv ? Object.assign(window.Nv, Nv) : Nv;
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-sidebar__footer neeto-molecules-sidebar__no-shrinkable"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    interactive: true,
+    className: "neeto-molecules-help-popup-wrapper",
+    content: /*#__PURE__*/React.createElement(HelpSectionMenu, {
+      changesCount: changesCount,
+      helpLinkOverrides: helpLinkOverrides
+    }),
+    hideOnClick: false,
+    interactiveDebounce: 20,
+    offset: [0, -70],
+    position: "right",
+    theme: "light"
+  }, /*#__PURE__*/React.createElement(HelpSection, {
+    changesCount: changesCount
+  })), showAppSwitcher && /*#__PURE__*/React.createElement(AppSwitcherButton, {
+    onAppSwitcherToggle: onAppSwitcherToggle
+  }), /*#__PURE__*/React.createElement(ProfileButton, {
+    extraTopLinks: extraTopLinks,
+    profileInfoOverrides: profileInfoOverrides
+  }));
+};
+export default Footer;

package/dist/Sidebar/Footer/utils.js

@@ -0,0 +1,39 @@
+import { t } from "i18next";
+import { resetAuthTokens } from "@bigbinary/neeto-commons-frontend/utils";
+import { User, Settings, LeftArrow } from "@bigbinary/neeto-icons";
+import { mergeDeepLeft } from "ramda";
+import { MY_PROFILE_URL, MY_ORGANIZATION_URL } from "../constants";
+import { getSidebarStateLocalStorageKey } from "../utils";
+export var getProfileInfo = function getProfileInfo(isOwner, profileInfoOverrides) {
+  var _globalProps$user, _globalProps$user2, _globalProps$user3, _globalProps$user4, _globalProps$user5;
+  return mergeDeepLeft(profileInfoOverrides, {
+    name: "".concat((_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.firstName, " ").concat((_globalProps$user2 = globalProps.user) === null || _globalProps$user2 === void 0 ? void 0 : _globalProps$user2.lastName),
+    imageUrl: (_globalProps$user3 = globalProps.user) === null || _globalProps$user3 === void 0 ? void 0 : _globalProps$user3.profileImageUrl,
+    email: ((_globalProps$user4 = globalProps.user) === null || _globalProps$user4 === void 0 ? void 0 : _globalProps$user4.email) || ((_globalProps$user5 = globalProps.user) === null || _globalProps$user5 === void 0 ? void 0 : _globalProps$user5.phoneNumber),
+    topLinks: [{
+      label: t("neetoMolecules.sidebar.myProfile"),
+      icon: User,
+      onClick: function onClick() {
+        return window.open(MY_PROFILE_URL, "_blank");
+      },
+      "data-cy": "my-profile-button"
+    }, isOwner && {
+      label: t("neetoMolecules.sidebar.myOrganization"),
+      icon: Settings,
+      onClick: function onClick() {
+        return window.open(MY_ORGANIZATION_URL, "_blank");
+      },
+      "data-cy": "profile-organization-settings-button"
+    }].filter(Boolean),
+    bottomLinks: [{
+      icon: LeftArrow,
+      label: t("neetoMolecules.sidebar.logout"),
+      onClick: function onClick() {
+        resetAuthTokens();
+        localStorage.removeItem(getSidebarStateLocalStorageKey());
+        window.location.href = "/logout";
+      },
+      "data-cy": "profile-logout-button"
+    }]
+  });
+};

package/dist/Sidebar/Header.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { capitalize, findBy } from "@bigbinary/neeto-commons-frontend/pure";
+import { useFetchNeetoApps } from "@bigbinary/neeto-commons-frontend/react-utils";
+import { Neeto } from "@bigbinary/neeto-icons/typeface-logos";
+import * as ProductTypefaceLogos from "@bigbinary/neeto-icons/typeface-logos";
+import { Link } from "react-router-dom";
+var Header = function Header(_ref) {
+  var _ProductTypefaceLogos;
+  var customLogo = _ref.customLogo;
+  var productName = globalProps.appName.substr(5);
+  var logoName = "Neeto".concat(capitalize(productName.toLowerCase()));
+  var ProductTypefaceLogo = (_ProductTypefaceLogos = ProductTypefaceLogos[logoName]) !== null && _ProductTypefaceLogos !== void 0 ? _ProductTypefaceLogos : Neeto;
+  var LogoComponent = customLogo !== null && customLogo !== void 0 ? customLogo : ProductTypefaceLogo;
+  var _useFetchNeetoApps = useFetchNeetoApps(),
+    data = _useFetchNeetoApps.data;
+  var homePath = "/";
+  if (data !== null && data !== void 0 && data.neetoApps) {
+    var thisApp = findBy({
+      name: productName
+    }, data.neetoApps);
+    if (thisApp !== null && thisApp !== void 0 && thisApp.url) {
+      homePath = new URL(thisApp === null || thisApp === void 0 ? void 0 : thisApp.url).pathname;
+    }
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-sidebar__header neeto-molecules-sidebar__no-shrinkable",
+    "data-cy": "sidebar-info"
+  }, /*#__PURE__*/React.createElement(Link, {
+    className: "neeto-molecules-sidebar__logo neeto-ui-w-full",
+    to: homePath
+  }, /*#__PURE__*/React.createElement(LogoComponent, null)));
+};
+export default /*#__PURE__*/React.memo(Header);

package/dist/Sidebar/HelpSection/HelpSectionMenu.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["label"];
+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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React from "react";
+import { isPresent } from "@bigbinary/neeto-commons-frontend/pure";
+import { Button } from "@bigbinary/neetoui";
+import KeyboardShortcuts from "../../KeyboardShortcuts";
+import { DEFAULT_HELP_LINK_PROPS } from "../constants";
+import "../sidebar.scss";
+var HelpSectionMenu = function HelpSectionMenu(_ref) {
+  var helpLinkOverrides = _ref.helpLinkOverrides,
+    changesCount = _ref.changesCount;
+  var _KeyboardShortcuts$us = KeyboardShortcuts.usePaneState(),
+    _KeyboardShortcuts$us2 = _slicedToArray(_KeyboardShortcuts$us, 2),
+    setIsOpen = _KeyboardShortcuts$us2[1];
+  var helpLinks = Object.keys(DEFAULT_HELP_LINK_PROPS).map(function (key) {
+    return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, DEFAULT_HELP_LINK_PROPS[key]), helpLinkOverrides[key]), key === "keyboardShortcutProps" && {
+      onClick: function onClick() {
+        return setIsOpen(true);
+      }
+    }), key === "changelogProps" && changesCount && {
+      changesCount: changesCount
+    });
+  }).filter(function (_ref2) {
+    var hide = _ref2.hide;
+    return !hide;
+  });
+  return /*#__PURE__*/React.createElement("ul", {
+    className: "neeto-molecules-help-sublist"
+  }, helpLinks.map(function (_ref3, idx) {
+    var label = _ref3.label,
+      buttonProps = _objectWithoutProperties(_ref3, _excluded);
+    return /*#__PURE__*/React.createElement("li", {
+      className: "neeto-molecules-help-sublist__item",
+      key: idx
+    }, /*#__PURE__*/React.createElement(Button, _extends({
+      fullWidth: true,
+      className: "neeto-molecules-help-sublist__item-btn",
+      iconPosition: "left",
+      iconSize: 18,
+      style: "text"
+    }, buttonProps), label, isPresent(buttonProps.changesCount) && /*#__PURE__*/React.createElement("span", {
+      className: "neeto-molecules-help-sublist__item-btn-count",
+      "data-testid": "help-section-menu-changes-count"
+    }, buttonProps.changesCount)));
+  }));
+};
+export default HelpSectionMenu;

package/dist/Sidebar/HelpSection/index.js

@@ -0,0 +1,32 @@
+import React, { forwardRef } from "react";
+import { isPresent } from "@bigbinary/neeto-commons-frontend/pure";
+import { Help } from "@bigbinary/neeto-icons";
+import { Typography } from "@bigbinary/neetoui";
+import { useTranslation } from "react-i18next";
+import "../sidebar.scss";
+
+// Rule can be enabled once the ticket - https://github.com/bigbinary/neeto-commons-frontend/issues/905 is closed.
+// eslint-disable-next-line @bigbinary/neeto/no-dumb-components-with-use-translation
+var HelpSection = function HelpSection(_ref, ref) {
+  var changesCount = _ref.changesCount;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React.createElement("button", {
+    className: "neeto-molecules-sidebar__link neeto-molecules-sidebar__link--button neeto-ui-shadow-none neeto-ui-flex neeto-ui-items-center neeto-ui-no-underline neeto-ui-select-none",
+    "data-cy": "help-button",
+    ref: ref
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "neeto-molecules-sidebar__link-icon neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center"
+  }, /*#__PURE__*/React.createElement(Help, {
+    size: 24
+  }), isPresent(changesCount) && /*#__PURE__*/React.createElement("span", {
+    className: "neeto-molecules-sidebar__notif-count",
+    "data-testid": "help-icon-changes-count"
+  }, changesCount)), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-molecules-sidebar__link-label",
+    component: "span",
+    style: "body2",
+    weight: "normal"
+  }, t("neetoMolecules.sidebar.helpLinks.helpCenter")));
+};
+export default /*#__PURE__*/forwardRef(HelpSection);

package/dist/Sidebar/Links.js

@@ -0,0 +1,112 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["label", "to", "icon", "items"],
+  _excluded2 = ["label", "to", "count", "dataCy"];
+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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { useState } from "react";
+import classnames from "classnames";
+import { globalProps } from "@bigbinary/neeto-commons-frontend/initializers";
+import { isNotPresent } from "@bigbinary/neeto-commons-frontend/pure";
+import { Down } from "@bigbinary/neeto-icons";
+import { Typography } from "@bigbinary/neetoui";
+import { __, curry, includes, is, not } from "ramda";
+import { NavLink, useLocation } from "react-router-dom";
+import { isSubRouteActive } from "./utils";
+var Links = function Links(_ref) {
+  var navLinks = _ref.navLinks;
+  var location = useLocation();
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isActiveLinkExpanded = _useState2[0],
+    setIsActiveLinkExpanded = _useState2[1];
+  var filterByPermissions = curry(function (_ref2) {
+    var permissions = _ref2.permissions;
+    if (permissions) {
+      return is(Array, permissions) ? permissions.some(includes(__, globalProps.permissions)) : globalProps.permissions.includes(permissions);
+    }
+    return true;
+  });
+  var handleNavLinkClick = function handleNavLinkClick(event, isActive, items) {
+    if (isNotPresent(items)) return;
+    if (isActive()) {
+      setIsActiveLinkExpanded(not);
+      event.preventDefault();
+      return;
+    }
+    setIsActiveLinkExpanded(true);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-sidebar__links neeto-molecules-sidebar__no-shrinkable"
+  }, navLinks.filter(filterByPermissions).map(function (_ref3, mainIndex) {
+    var label = _ref3.label,
+      to = _ref3.to,
+      icon = _ref3.icon,
+      items = _ref3.items,
+      otherProps = _objectWithoutProperties(_ref3, _excluded);
+    var IconSVG = icon;
+    var url = new URL(to, window.location.href);
+    var isActive = function isActive() {
+      return is(Function, otherProps.isActive) ? otherProps.isActive() : location.pathname.startsWith(url.pathname);
+    };
+    var isMenuExpanded = isActive() && isActiveLinkExpanded;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: mainIndex
+    }, /*#__PURE__*/React.createElement(NavLink, _extends({
+      activeClassName: "active",
+      className: "neeto-ui-flex neeto-ui-items-center neeto-ui-no-underline neeto-ui-select-none neeto-molecules-sidebar__link",
+      onClick: function onClick(event) {
+        return handleNavLinkClick(event, isActive, items);
+      }
+    }, _objectSpread({
+      isActive: isActive,
+      to: to
+    }, otherProps)), icon && /*#__PURE__*/React.createElement("span", {
+      className: "neeto-molecules-sidebar__link-icon",
+      "data-testid": label
+    }, /*#__PURE__*/React.createElement(IconSVG, null)), /*#__PURE__*/React.createElement(Typography, {
+      className: "neeto-molecules-sidebar__link-label",
+      component: "span",
+      style: "body2",
+      weight: "normal"
+    }, label), items && /*#__PURE__*/React.createElement("span", {
+      className: classnames("neeto-molecules-sidebar__link-icon neeto-molecules-sidebar__link-icon--caret", {
+        "neeto-molecules-sidebar__link-icon--rotate": isMenuExpanded
+      })
+    }, /*#__PURE__*/React.createElement(Down, {
+      size: 16
+    }))), items && isMenuExpanded && /*#__PURE__*/React.createElement("div", {
+      className: "neeto-molecules-sidebar__sublink-wrapper",
+      "data-cy": "sidebar-sub-link-wrapper"
+    }, items.filter(filterByPermissions).map(function (_ref4, subIndex) {
+      var subLabel = _ref4.label,
+        subRoute = _ref4.to,
+        count = _ref4.count,
+        dataCy = _ref4.dataCy,
+        otherProps = _objectWithoutProperties(_ref4, _excluded2);
+      return /*#__PURE__*/React.createElement(NavLink, _extends({
+        activeClassName: "active",
+        className: "neeto-molecules-sidebar__sublink neeto-ui-flex neeto-ui-items-center neeto-ui-select-none",
+        "data-cy": "".concat(dataCy, "-sub-link"),
+        isActive: function isActive() {
+          return isSubRouteActive(subRoute, location);
+        },
+        key: subIndex,
+        to: subRoute
+      }, otherProps), /*#__PURE__*/React.createElement(Typography, {
+        className: "neeto-molecules-sidebar__link-sub-label neeto-ui-flex-grow",
+        component: "span",
+        "data-cy": "".concat(dataCy, "-sub-link-label"),
+        style: "body2"
+      }, subLabel), /*#__PURE__*/React.createElement(Typography, {
+        className: "neeto-molecules-sidebar__link-sub-count neeto-ui-flex-shrink-0",
+        component: "span",
+        "data-cy": "".concat(dataCy, "-sub-link-count"),
+        style: "body2"
+      }, count > 999 ? "999+" : count));
+    })));
+  }));
+};
+export default Links;

package/dist/Sidebar/NavIconWrapper.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Tooltip } from "@bigbinary/neetoui";
+import FeaturedTooltip from "./FeaturedTooltip";
+var NavIconWrapper = function NavIconWrapper(_ref) {
+  var description = _ref.description,
+    label = _ref.label,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    className: "sidebar-featured-tooltip__content",
+    content: /*#__PURE__*/React.createElement(FeaturedTooltip, {
+      description: description,
+      label: label
+    }),
+    delay: [400, 40],
+    distance: "20rem",
+    duration: [200, 200],
+    position: "right"
+  }, children);
+};
+export default NavIconWrapper;

package/dist/Sidebar/ProfileSection/LinkSection.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onClick", "label", "icon"];
+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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React from "react";
+import { Button } from "@bigbinary/neetoui";
+import "../sidebar.scss";
+var LinkSection = function LinkSection(_ref) {
+  var links = _ref.links;
+  return /*#__PURE__*/React.createElement("ul", {
+    className: "neeto-molecules-profile-sublist"
+  }, links.map(function (_ref2, idx) {
+    var onClick = _ref2.onClick,
+      label = _ref2.label,
+      _ref2$icon = _ref2.icon,
+      icon = _ref2$icon === void 0 ? null : _ref2$icon,
+      otherProps = _objectWithoutProperties(_ref2, _excluded);
+    return /*#__PURE__*/React.createElement("li", {
+      className: "neeto-molecules-profile-sublist__item",
+      key: idx
+    }, /*#__PURE__*/React.createElement(Button, _extends({
+      fullWidth: true,
+      className: "neeto-molecules-profile-sublist__item-btn",
+      iconPosition: "left",
+      iconSize: 18,
+      style: "text"
+    }, _objectSpread({
+      icon: icon,
+      label: label,
+      onClick: onClick
+    }, otherProps))));
+  }));
+};
+export default LinkSection;

package/dist/Sidebar/ProfileSection/ProfileMenu.js

@@ -0,0 +1,48 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import React from "react";
+import classnames from "classnames";
+import { truncate } from "@bigbinary/neeto-commons-frontend/pure";
+import { Avatar, Typography } from "@bigbinary/neetoui";
+import LinkSection from "./LinkSection";
+import "../sidebar.scss";
+var ProfileMenu = function ProfileMenu(_ref) {
+  var profileInfo = _ref.profileInfo,
+    extraTopLinks = _ref.extraTopLinks;
+  var name = profileInfo.name,
+    email = profileInfo.email,
+    topLinks = profileInfo.topLinks,
+    bottomLinks = profileInfo.bottomLinks,
+    customContent = profileInfo.customContent;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-flex neeto-ui-flex-col neeto-molecules-profile-popup",
+    "data-cy": "profile-popup",
+    "data-testid": "profile-popup"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classnames("neeto-ui-relative neeto-ui-flex neeto-ui-items-center neeto-ui-p-3 neeto-ui-bg-primary-100 neeto-molecules-profile-popup__top-section")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "top-0 left-0"
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    size: "large",
+    user: profileInfo
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-flex neeto-ui-flex-col neeto-ui-flex-grow neeto-ui-min-w-0 neeto-ui-pl-3"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-m-0",
+    component: "h2",
+    lineHeight: "tight",
+    style: "h5",
+    title: name,
+    weight: "semibold"
+  }, truncate(name, 18)), email && /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-w-full neeto-ui-truncate neeto-ui-text-gray-700",
+    lineHeight: "tight",
+    style: "body3"
+  }, email))), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-sidebar__profile-wrapper-custom-content"
+  }, customContent), topLinks && /*#__PURE__*/React.createElement(LinkSection, {
+    links: [].concat(_toConsumableArray(extraTopLinks), _toConsumableArray(topLinks))
+  }), bottomLinks && /*#__PURE__*/React.createElement(LinkSection, {
+    links: bottomLinks
+  }));
+};
+export default ProfileMenu;

package/dist/Sidebar/ProfileSection/index.js

@@ -0,0 +1,42 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { forwardRef, useState } from "react";
+import { truncate } from "@bigbinary/neeto-commons-frontend/pure";
+import { useFetchNeetoApps } from "@bigbinary/neeto-commons-frontend/react-utils";
+import { Avatar, Typography, Spinner } from "@bigbinary/neetoui";
+import "../sidebar.scss";
+var ProfileSection = function ProfileSection(_ref, ref) {
+  var profileInfo = _ref.profileInfo;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasHovered = _useState2[0],
+    setHasHovered = _useState2[1];
+  var _useFetchNeetoApps = useFetchNeetoApps(),
+    refetchNeetoApps = _useFetchNeetoApps.refetch,
+    isLoading = _useFetchNeetoApps.isLoading,
+    isStale = _useFetchNeetoApps.isStale;
+  return /*#__PURE__*/React.createElement("button", {
+    className: "neeto-molecules-sidebar__link neeto-molecules-sidebar__link--button neeto-ui-shadow-none neeto-ui-flex neeto-ui-items-center neeto-ui-no-underline neeto-ui-select-none",
+    "data-cy": "profile-section",
+    "data-testid": "profile-section",
+    ref: ref,
+    onMouseEnter: function onMouseEnter() {
+      if (!hasHovered && isStale) {
+        refetchNeetoApps();
+        setHasHovered(true);
+      }
+    }
+  }, isLoading && hasHovered ? /*#__PURE__*/React.createElement("span", {
+    "data-testid": "profile-avatar-loader"
+  }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Avatar, {
+    className: "neeto-ui-flex-shrink-0 neeto-molecules-sidebar__profile-avatar",
+    "data-testid": "profile-avatar",
+    size: "small",
+    user: profileInfo
+  }), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-molecules-sidebar__link-label",
+    component: "span",
+    style: "body2",
+    weight: "normal"
+  }, truncate(profileInfo.name, 18))));
+};
+export default /*#__PURE__*/forwardRef(ProfileSection);

package/dist/Sidebar/constants.js

@@ -0,0 +1,40 @@
+import { t } from "i18next";
+import { Book, Keyboard, Gift, ChatEmpty } from "@bigbinary/neeto-icons";
+import { toLower } from "ramda";
+export var MY_PROFILE_URL = "/auth/profile/edit";
+export var MY_ORGANIZATION_URL = "/auth/organization/edit";
+export var CHANGELOG_WIDGET_TRIGGER_ID = "neetochangelog-trigger";
+export var PRODUCT_LOGO_WIDTH = 40;
+export var PRODUCT_LOGO_HEIGHT = 40;
+export var DEFAULT_HELP_LINK_PROPS = {
+  liveChatProps: {
+    label: t("neetoMolecules.sidebar.helpLinks.liveChat"),
+    icon: ChatEmpty,
+    "data-cy": "help-link-live-chat-button",
+    onClick: function onClick() {
+      var _window$NeetoChat, _window$NeetoChat$con, _window$NeetoChat2, _window$NeetoChat2$co;
+      (_window$NeetoChat = window.NeetoChat) === null || _window$NeetoChat === void 0 ? void 0 : (_window$NeetoChat$con = _window$NeetoChat.contextualHelp) === null || _window$NeetoChat$con === void 0 ? void 0 : _window$NeetoChat$con.maximizeWidget();
+      (_window$NeetoChat2 = window.NeetoChat) === null || _window$NeetoChat2 === void 0 ? void 0 : (_window$NeetoChat2$co = _window$NeetoChat2.contextualHelp) === null || _window$NeetoChat2$co === void 0 ? void 0 : _window$NeetoChat2$co.openWidget();
+    }
+  },
+  helpCenterProps: {
+    label: t("neetoMolecules.sidebar.helpLinks.helpArticles"),
+    icon: Book,
+    "data-cy": "help-link-help-center-button",
+    href: "https://help.".concat(toLower(globalProps.appName), ".com/"),
+    target: "_blank"
+  },
+  changelogProps: {
+    id: CHANGELOG_WIDGET_TRIGGER_ID,
+    label: t("neetoMolecules.sidebar.helpLinks.whatsNew"),
+    icon: Gift,
+    "data-cy": "help-link-changelog-button"
+  },
+  keyboardShortcutProps: {
+    label: t("neetoMolecules.sidebar.helpLinks.keyboardShortcuts"),
+    icon: Keyboard,
+    "data-cy": "help-link-keyboard-shortcut-button"
+  }
+};
+export var QUERY_CACHE_KEY = "queryCache";
+export var NEETO_APPS_QUERY_KEY = "neeto-apps-list";