@bigbinary/neeto-molecules 4.1.45 → 4.1.47

package/dist/cjs/v2/Sidebar.js

@@ -0,0 +1,648 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var neetoAtoms = require('@bigbinary/neeto-atoms');
+var neetoCist = require('@bigbinary/neeto-cist');
+var useLocalStorage = require('@bigbinary/neeto-commons-frontend/react-utils/useLocalStorage');
+var ramda = require('ramda');
+var reactI18next = require('react-i18next');
+var reactRouterDom = require('react-router-dom');
+var useKeyboardShortcutsPaneState = require('../useKeyboardShortcutsPaneState-BrgdLb9F.js');
+var ConfigureView = require('../ConfigureView-CIHmB-58.js');
+var classnames = require('classnames');
+var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
+var Neeto = require('@bigbinary/neeto-icons/typeface-logos/Neeto');
+var AppIcons = require('@bigbinary/neeto-icons/typeface-logos');
+var jsxRuntime = require('react/jsx-runtime');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+require('zustand/shallow');
+require('@bigbinary/neeto-commons-frontend/react-utils/withImmutableActions');
+require('zustand');
+require('@bigbinary/neeto-commons-frontend/react-utils');
+require('@bigbinary/neeto-commons-frontend/utils/general');
+require('@bigbinary/neeto-commons-frontend/react-utils/useRegisterNavigationCheckpoint');
+require('@bigbinary/neeto-filters-frontend/Segments');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var AppIcons__namespace = /*#__PURE__*/_interopNamespaceDefault(AppIcons);
+
+/**
+ * @license lucide-react v1.7.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$2 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = ConfigureView.createLucideIcon("chevron-right", __iconNode$2);
+
+/**
+ * @license lucide-react v1.7.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$1 = [
+  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
+  ["circle", { cx: "19", cy: "12", r: "1", key: "1wjl8i" }],
+  ["circle", { cx: "5", cy: "12", r: "1", key: "1pcz8c" }]
+];
+const Ellipsis = ConfigureView.createLucideIcon("ellipsis", __iconNode$1);
+
+/**
+ * @license lucide-react v1.7.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["path", { d: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "M12 5v14", key: "s699le" }]
+];
+const Plus = ConfigureView.createLucideIcon("plus", __iconNode);
+
+var Header$1 = function Header(_ref) {
+  var _ProductTypefaceLogos;
+  var customLogo = _ref.customLogo,
+    clearSettingsNav = _ref.clearSettingsNav;
+  var productName = initializers.globalProps.appName.substr(5);
+  var normalizedName = (productName || "").trim().toLowerCase();
+  var specialCase = ConfigureView.SPECIAL_APP_NAMES[normalizedName];
+  var logoName = specialCase ? "Neeto".concat(specialCase) : "Neeto".concat(neetoCist.capitalize(normalizedName));
+  var ProductTypefaceLogo = (_ProductTypefaceLogos = AppIcons__namespace[logoName]) !== null && _ProductTypefaceLogos !== void 0 ? _ProductTypefaceLogos : Neeto;
+  var LogoComponent = customLogo !== null && customLogo !== void 0 ? customLogo : ProductTypefaceLogo;
+  var isOnboarded = initializers.globalProps.user.isOnboarded !== false;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "px-4 py-3",
+    "data-testid": "sidebar-info",
+    children: /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Link, {
+      to: ConfigureView.DEFAULT_HOME_PATH,
+      className: classnames("block w-full", {
+        "cursor-pointer": isOnboarded,
+        "pointer-events-none": !isOnboarded
+      }),
+      onClick: clearSettingsNav,
+      children: initializers.globalProps.sidebarTitle ? /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-sidebar-foreground text-xl leading-9 font-bold",
+        children: initializers.globalProps.sidebarTitle
+      }) : /*#__PURE__*/jsxRuntime.jsx(LogoComponent, {
+        className: "h-9 w-auto max-w-full"
+      })
+    })
+  });
+};
+var Header = /*#__PURE__*/React.memo(Header$1);
+
+/* eslint-disable @bigbinary/neeto/use-neetoui-classes */
+var AddAction = function AddAction(_ref) {
+  var actions = _ref.actions;
+  return /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.DropdownMenu, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenuTrigger, {
+      asChild: true,
+      children: /*#__PURE__*/jsxRuntime.jsx("button", {
+        className: "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-sidebar-ring absolute end-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden focus-visible:ring-2 md:opacity-0 md:group-focus-within/menu-item:opacity-100 md:group-hover/menu-item:opacity-100",
+        "data-testid": "add-dropdown-trigger",
+        onClick: function onClick(e) {
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(Plus, {})
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenuContent, {
+      align: "end",
+      side: "bottom",
+      children: actions.map(function (action) {
+        return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenuItem, {
+          onSelect: function onSelect() {
+            var _action$onClick;
+            (_action$onClick = action.onClick) === null || _action$onClick === void 0 || _action$onClick.call(action);
+          },
+          children: action.label
+        }, action.key);
+      })
+    })]
+  });
+};
+
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var PinIcon = function PinIcon(_ref) {
+  var size = _ref.size,
+    otherProps = _ref.otherProps;
+  return /*#__PURE__*/jsxRuntime.jsx("svg", _objectSpread$3(_objectSpread$3({
+    fill: "currentColor",
+    height: size,
+    viewBox: "0 -960 960 960",
+    width: size,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, otherProps), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "m640-480 80 80v80H520v240l-40 40-40-40v-240H240v-80l80-80v-280h-40v-80h400v80h-40zm-286 80h252l-46-46v-314H400v314zm126 0"
+    })
+  }));
+};
+
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var UnpinIcon = function UnpinIcon(_ref) {
+  var size = _ref.size,
+    otherProps = _ref.otherProps;
+  return /*#__PURE__*/jsxRuntime.jsx("svg", _objectSpread$2(_objectSpread$2({
+    fill: "currentColor",
+    height: size,
+    viewBox: "0 -960 960 960",
+    width: size,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, otherProps), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "m640-480 80 80v80H520v240l-40 40-40-40v-240H240v-80l80-80v-280h-40v-80h400v80h-40z"
+    })
+  }));
+};
+
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var MoreDropdown = function MoreDropdown(_ref) {
+  var moreNavLinks = _ref.moreNavLinks,
+    isNavLinkPinned = _ref.isNavLinkPinned,
+    handleTogglePin = _ref.handleTogglePin;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var isRTL = document.documentElement.dir === "rtl";
+  return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.SidebarMenuItem, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.DropdownMenu, {
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenuTrigger, {
+        asChild: true,
+        children: /*#__PURE__*/jsxRuntime.jsxs("button", {
+          className: "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex w-full items-center gap-2 rounded-md p-2 text-sm outline-hidden",
+          "data-testid": "more-nav-links-dropdown-button",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Ellipsis, {}), /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "truncate",
+            children: t("neetoMolecules.sidebar.more")
+          })]
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenuContent, {
+        align: "start",
+        className: "z-[99999] p-0",
+        "data-testid": "more-nav-links-dropdown-menu",
+        side: isRTL ? "left" : "right",
+        children: moreNavLinks.filter(ConfigureView.filterByPermissions).map(function (navLink, index) {
+          var label = navLink.label,
+            icon = navLink.icon,
+            navLinkKey = navLink.key,
+            to = navLink.to,
+            onClick = navLink.onClick,
+            tag = navLink.tag;
+          var IconSVG = icon;
+          var isPinned = isNavLinkPinned(navLink);
+          return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenuItem, {
+            "data-testid": label,
+            onSelect: function onSelect(e) {
+              return e.preventDefault();
+            },
+            children: /*#__PURE__*/jsxRuntime.jsxs(ConfigureView.CheckPointNavLinks, {
+              onClick: onClick,
+              to: to,
+              className: "flex w-full cursor-pointer items-center justify-between gap-2 px-2 py-1",
+              children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
+                className: "flex min-w-0 flex-grow items-center gap-2",
+                children: [icon && /*#__PURE__*/jsxRuntime.jsx(IconSVG, {
+                  className: "flex-shrink-0",
+                  size: 20
+                }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+                  className: "flex min-w-0 flex-grow items-center gap-2",
+                  children: [label, tag && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Badge, _objectSpread$1({}, tag))]
+                })]
+              }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.TooltipProvider, {
+                children: /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Tooltip, {
+                  children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.TooltipTrigger, {
+                    asChild: true,
+                    children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+                      className: "flex-shrink-0",
+                      "data-testid": "pin-button",
+                      size: "icon-sm",
+                      variant: "ghost",
+                      onClick: function onClick(event) {
+                        return handleTogglePin(navLink, event);
+                      },
+                      children: isPinned ? /*#__PURE__*/jsxRuntime.jsx(UnpinIcon, {
+                        otherProps: {},
+                        size: 16
+                      }) : /*#__PURE__*/jsxRuntime.jsx(PinIcon, {
+                        otherProps: {},
+                        size: 16
+                      })
+                    })
+                  }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.TooltipContent, {
+                    side: "right",
+                    children: isPinned ? t("neetoMolecules.sidebar.unpin") : t("neetoMolecules.sidebar.pin")
+                  })]
+                })
+              })]
+            })
+          }, navLinkKey || index);
+        })
+      })]
+    })
+  });
+};
+
+var _excluded = ["label", "to", "icon", "items", "isConfigureNavLink", "isCountsLoading", "count", "component", "onClick", "addActions", "tag"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var renderCount = function renderCount(count) {
+  return count > 999 ? "999+" : count;
+};
+var NavLinks = function NavLinks(_ref) {
+  var navLinks = _ref.navLinks,
+    moreNavLinks = _ref.moreNavLinks,
+    isCountsLoadingDeprecated = _ref.isCountsLoading,
+    setSelectedNavLinkRoute = _ref.setSelectedNavLinkRoute;
+  var location = reactRouterDom.useLocation();
+  var _useState = React.useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    expandedNavLinkKeys = _useState2[0],
+    setExpandedNavLinkKeys = _useState2[1];
+  var _useLocalStorage = useLocalStorage(ConfigureView.PINNED_MORE_NAV_LINKS_KEY, []),
+    _useLocalStorage2 = _slicedToArray(_useLocalStorage, 2),
+    pinnedNavLinks = _useLocalStorage2[0],
+    setPinnedNavLinks = _useLocalStorage2[1];
+  var handleNavLinkClick = function handleNavLinkClick(_ref2) {
+    var event = _ref2.event,
+      isActive = _ref2.isActive,
+      navLink = _ref2.navLink;
+    var isExpandable = neetoCist.isPresent(navLink.items) || neetoCist.isPresent(navLink.component);
+    if (!isExpandable) {
+      setExpandedNavLinkKeys([]);
+      return;
+    }
+    if (navLink.isConfigureNavLink && neetoCist.isNotEmpty(navLink.items)) {
+      setSelectedNavLinkRoute(navLink.to);
+    }
+    var navLinkKey = navLink.key || navLink.to;
+    if (isActive()) {
+      var isExpanded = expandedNavLinkKeys.includes(navLinkKey);
+      setExpandedNavLinkKeys(isExpanded ? [] : [navLinkKey]);
+      navLink.resetPath !== true && event.preventDefault();
+      return;
+    }
+    setExpandedNavLinkKeys([navLinkKey]);
+  };
+  var handleTogglePin = function handleTogglePin(navLink, event) {
+    event.preventDefault();
+    event.stopPropagation();
+    var navLinkKey = navLink.key || navLink.to;
+    var isPinned = pinnedNavLinks.includes(navLinkKey);
+    if (isPinned) {
+      setPinnedNavLinks(pinnedNavLinks.filter(neetoCist.isNot(navLinkKey)));
+    } else {
+      setPinnedNavLinks([].concat(_toConsumableArray(pinnedNavLinks), [navLinkKey]));
+    }
+  };
+  var isNavLinkPinned = function isNavLinkPinned(navLink) {
+    if (!navLink) return false;
+    var navLinkKey = navLink.key || navLink.to;
+    return pinnedNavLinks.includes(navLinkKey);
+  };
+  var pinnedItems = moreNavLinks ? moreNavLinks.filter(isNavLinkPinned) : [];
+  var activeMoreNavLink = moreNavLinks ? moreNavLinks.find(function (navLink) {
+    return navLink && (location.pathname + location.search).startsWith(navLink.to);
+  }) : null;
+  var additionalItems = _toConsumableArray(pinnedItems);
+  if (activeMoreNavLink && !isNavLinkPinned(activeMoreNavLink)) {
+    additionalItems.push(activeMoreNavLink);
+  }
+  var combinedNavLinks = [].concat(_toConsumableArray(navLinks), _toConsumableArray(additionalItems));
+  return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.SidebarGroup, {
+    children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.SidebarGroupContent, {
+      children: /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.SidebarMenu, {
+        className: "gap-1",
+        children: [combinedNavLinks.filter(ConfigureView.filterByPermissions).map(function (navLink, index) {
+          var label = navLink.label,
+            to = navLink.to,
+            icon = navLink.icon,
+            items = navLink.items,
+            isConfigureNavLink = navLink.isConfigureNavLink,
+            _navLink$isCountsLoad = navLink.isCountsLoading,
+            isCountsLoading = _navLink$isCountsLoad === void 0 ? false : _navLink$isCountsLoad,
+            _navLink$count = navLink.count,
+            count = _navLink$count === void 0 ? null : _navLink$count,
+            Component = navLink.component,
+            _onClick = navLink.onClick,
+            _navLink$addActions = navLink.addActions,
+            addActions = _navLink$addActions === void 0 ? [] : _navLink$addActions,
+            tag = navLink.tag,
+            otherProps = _objectWithoutProperties(navLink, _excluded);
+          var IconSVG = icon;
+          var url = new URL(to, window.location.href);
+          var isActive = function isActive() {
+            return ramda.is(Function, otherProps.isActive) ? otherProps.isActive() : location.pathname.startsWith(url.pathname);
+          };
+          var isExpandable = items || Component;
+          var navLinkKey = navLink.key || navLink.to;
+          var isMenuExpanded = expandedNavLinkKeys.includes(navLinkKey) && !isCountsLoadingDeprecated;
+          var handleCaretClick = function handleCaretClick(event) {
+            event.preventDefault();
+            event.stopPropagation();
+            setExpandedNavLinkKeys(function (keys) {
+              return keys.includes(navLinkKey) ? keys.filter(neetoCist.isNot(navLinkKey)) : ramda.append(navLinkKey, keys);
+            });
+          };
+          return /*#__PURE__*/jsxRuntime.jsxs(React.Fragment, {
+            children: [/*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.SidebarMenuItem, {
+              children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.SidebarMenuButton, {
+                asChild: true,
+                isActive: isActive(),
+                children: /*#__PURE__*/jsxRuntime.jsxs(ConfigureView.CheckPointNavLinks, _objectSpread(_objectSpread({
+                  activeClassName: "active",
+                  className: "font-medium",
+                  "data-testid": "navlink-".concat(neetoCist.hyphenate(label)),
+                  onClick: function onClick(event) {
+                    handleNavLinkClick({
+                      event: event,
+                      isActive: isActive,
+                      navLink: navLink
+                    });
+                    _onClick === null || _onClick === void 0 || _onClick(event);
+                  }
+                }, _objectSpread({
+                  isActive: isActive,
+                  to: to
+                }, otherProps)), {}, {
+                  children: [icon && /*#__PURE__*/jsxRuntime.jsxs("span", {
+                    className: "relative",
+                    "data-testid": label,
+                    children: [/*#__PURE__*/jsxRuntime.jsx(IconSVG, {}), neetoCist.isPresent(count) && !isCountsLoading && /*#__PURE__*/jsxRuntime.jsx("span", {
+                      className: "bg-destructive text-destructive-foreground absolute -end-1.5 -top-1.5 flex h-4 min-w-4 items-center justify-center rounded-full px-0.5 text-[10px]",
+                      children: renderCount(count)
+                    })]
+                  }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                    className: "flex-grow truncate",
+                    children: label
+                  }), tag && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Badge, _objectSpread({}, tag)), isExpandable && !isConfigureNavLink && /*#__PURE__*/jsxRuntime.jsx("span", {
+                    className: "ms-auto shrink-0 transition-transform duration-200",
+                    role: "button",
+                    tabIndex: -1,
+                    style: {
+                      transform: isMenuExpanded ? "rotate(90deg)" : "rotate(0deg)"
+                    },
+                    onClick: handleCaretClick,
+                    children: /*#__PURE__*/jsxRuntime.jsx(ChevronRight, {
+                      className: "rtl:rotate-180"
+                    })
+                  })]
+                }))
+              }), neetoCist.isNotEmpty(addActions) && /*#__PURE__*/jsxRuntime.jsx(AddAction, {
+                actions: addActions
+              })]
+            }), isExpandable && !isConfigureNavLink && isMenuExpanded && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [items && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.SidebarMenuSub, {
+                children: items.filter(ConfigureView.filterByPermissions).map(function (subItem, subIndex) {
+                  var _subItem$to;
+                  return /*#__PURE__*/jsxRuntime.jsx(ConfigureView.SubLinkItem, _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, subItem), {}, {
+                    isCountsLoading: isCountsLoading
+                  })), {}, {
+                    href: subItem.href,
+                    isActive: subItem.isActive,
+                    isSectionHeader: neetoCist.isPresent(subItem.item),
+                    to: (_subItem$to = subItem.to) !== null && _subItem$to !== void 0 ? _subItem$to : subItem.path,
+                    onClick: subItem.onClick
+                  }), subIndex);
+                })
+              }), Component && /*#__PURE__*/jsxRuntime.jsx(Component, {
+                navLink: navLink
+              })]
+            })]
+          }, navLink.key || index);
+        }), neetoCist.isNotEmpty(moreNavLinks) && /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
+          handleTogglePin: handleTogglePin,
+          isNavLinkPinned: isNavLinkPinned,
+          moreNavLinks: moreNavLinks
+        })]
+      })
+    })
+  });
+};
+
+var Sidebar = function Sidebar(_ref) {
+  var navLinks = _ref.navLinks,
+    _ref$moreNavLinks = _ref.moreNavLinks,
+    moreNavLinks = _ref$moreNavLinks === void 0 ? [] : _ref$moreNavLinks,
+    customLogo = _ref.customLogo,
+    _ref$isCountsLoading = _ref.isCountsLoading,
+    isCountsLoading = _ref$isCountsLoading === void 0 ? false : _ref$isCountsLoading,
+    _ref$showWorkspaceNam = _ref.showWorkspaceName,
+    showWorkspaceName = _ref$showWorkspaceNam === void 0 ? false : _ref$showWorkspaceNam,
+    _ref$isExpandable = _ref.isExpandable,
+    isExpandable = _ref$isExpandable === void 0 ? true : _ref$isExpandable;
+  var _useKeyboardShortcuts = useKeyboardShortcutsPaneState.useKeyboardShortcutsPaneState(),
+    _useKeyboardShortcuts2 = _slicedToArray(_useKeyboardShortcuts, 1),
+    isKeyboardShortcutsPaneOpen = _useKeyboardShortcuts2[0];
+  var _useLocalStorage = useLocalStorage(ConfigureView.SELECTED_NAV_LINK_ROUTE_STORAGE_KEY, null),
+    _useLocalStorage2 = _slicedToArray(_useLocalStorage, 2),
+    selectedNavLinkRoute = _useLocalStorage2[0],
+    setSelectedNavLinkRoute = _useLocalStorage2[1];
+  var _useLocalStorage3 = useLocalStorage(ConfigureView.getSidebarStateLocalStorageKey(), false),
+    _useLocalStorage4 = _slicedToArray(_useLocalStorage3, 2),
+    isSidebarCollapsed = _useLocalStorage4[0],
+    setIsSidebarCollapsed = _useLocalStorage4[1];
+  var _useLocalStorage5 = useLocalStorage(ConfigureView.SIDEBAR_WIDTH_KEY, ConfigureView.DEFAULT_SIDEBAR_WIDTH),
+    _useLocalStorage6 = _slicedToArray(_useLocalStorage5, 2),
+    sidebarWidthRaw = _useLocalStorage6[0],
+    setSidebarWidth = _useLocalStorage6[1];
+  var sidebarWidth = typeof sidebarWidthRaw === "string" ? parseInt(sidebarWidthRaw, 10) || ConfigureView.DEFAULT_SIDEBAR_WIDTH : sidebarWidthRaw || ConfigureView.DEFAULT_SIDEBAR_WIDTH;
+  var isDraggingRef = React.useRef(false);
+  var hasDraggedRef = React.useRef(false);
+  var startXRef = React.useRef(null);
+  var startWidthRef = React.useRef(null);
+  var location = reactRouterDom.useLocation();
+  var history = reactRouterDom.useHistory();
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var isRTL = document.documentElement.dir === "rtl";
+  var sidebarSide = isRTL ? "right" : "left";
+  React.useEffect(function () {
+    if (isKeyboardShortcutsPaneOpen) {
+      setIsSidebarCollapsed(true);
+    } else if (window.innerWidth > 768) {
+      setIsSidebarCollapsed(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- setIsSidebarCollapsed may not be stable across renders
+  }, [isKeyboardShortcutsPaneOpen]);
+  React.useEffect(function () {
+    if (!neetoCist.isPresent(navLinks)) return;
+    var currentLink = ramda.findLast(function (_ref2) {
+      var to = _ref2.to,
+        isActive = _ref2.isActive;
+      var url = new URL(to, window.location.href);
+      return ramda.is(Function, isActive) ? isActive() : location.pathname.includes(url.pathname);
+    })(navLinks);
+    if (neetoCist.isPresent(currentLink)) {
+      setSelectedNavLinkRoute(currentLink.isConfigureNavLink ? currentLink.to : null);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only: sets initial selected route from current URL
+  }, []);
+
+  // Drag-to-resize via SidebarRail: intercept mousedown to start drag,
+  // update --sidebar-width directly on DOM for instant feedback,
+  // persist to localStorage on mouseup.
+  var handleRailMouseDown = React.useCallback(function (e) {
+    if (!isExpandable) return;
+    isDraggingRef.current = true;
+    hasDraggedRef.current = false;
+    startXRef.current = e.clientX;
+    startWidthRef.current = sidebarWidth;
+    var wrapper = document.querySelector("[data-slot='sidebar-wrapper']");
+    if (wrapper) wrapper.dataset.resizing = "true";
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    e.preventDefault();
+  }, [sidebarWidth, isExpandable]);
+
+  // Prevent SidebarRail's built-in toggle when user dragged to resize
+  var handleRailClick = React.useCallback(function (e) {
+    if (!hasDraggedRef.current) return;
+    e.preventDefault();
+    e.stopPropagation();
+    hasDraggedRef.current = false;
+  }, []);
+  React.useEffect(function () {
+    if (!isExpandable) return undefined;
+    var onMouseMove = function onMouseMove(e) {
+      if (!isDraggingRef.current) return;
+      hasDraggedRef.current = true;
+      var dx = e.clientX - startXRef.current;
+      // In RTL, dragging right shrinks, dragging left expands
+      var rtl = document.documentElement.dir === "rtl";
+      var newWidth = startWidthRef.current + (rtl ? -dx : dx);
+      newWidth = Math.max(ConfigureView.MIN_SIDEBAR_WIDTH, Math.min(newWidth, ConfigureView.MAX_SIDEBAR_WIDTH));
+      var widthRem = "".concat(newWidth / 16, "rem");
+      var wrapper = document.querySelector("[data-slot='sidebar-wrapper']");
+      if (wrapper) wrapper.style.setProperty("--sidebar-width", widthRem);
+      document.documentElement.style.setProperty("--neeto-molecules-sidebar-width", widthRem);
+    };
+    var onMouseUp = function onMouseUp(e) {
+      if (!isDraggingRef.current) return;
+      var dx = e.clientX - startXRef.current;
+      var rtlUp = document.documentElement.dir === "rtl";
+      var finalWidth = startWidthRef.current + (rtlUp ? -dx : dx);
+      finalWidth = Math.round(Math.max(ConfigureView.MIN_SIDEBAR_WIDTH, Math.min(finalWidth, ConfigureView.MAX_SIDEBAR_WIDTH)));
+      setSidebarWidth(finalWidth);
+      var wrapper = document.querySelector("[data-slot='sidebar-wrapper']");
+      if (wrapper) delete wrapper.dataset.resizing;
+      isDraggingRef.current = false;
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    return function () {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+  }, [isExpandable, setSidebarWidth]);
+  React.useEffect(function () {
+    document.documentElement.style.setProperty("--neeto-molecules-sidebar-width", "".concat(sidebarWidth / 16, "rem"));
+  }, [sidebarWidth]);
+  var handleGoBack = function handleGoBack(event) {
+    event.preventDefault();
+    setSelectedNavLinkRoute(null);
+    var configureNavLink = ConfigureView.getActiveConfigurePageLink({
+      navLinks: navLinks,
+      location: location
+    });
+    if (configureNavLink !== null && configureNavLink !== void 0 && configureNavLink.to) {
+      history.push(configureNavLink.to);
+    }
+  };
+  var activeLink = React.useMemo(function () {
+    return navLinks.find(function (link) {
+      if (ramda.is(Function, link.isActive)) return link.isActive();
+      var url = new URL(link.to, window.location.href);
+      return location.pathname.startsWith(url.pathname);
+    });
+  }, [location.pathname, navLinks]);
+  var isSelectedNavLinkVisible = selectedNavLinkRoute && (activeLink === null || activeLink === void 0 ? void 0 : activeLink.to) === selectedNavLinkRoute && neetoCist.isNotEmpty(navLinks);
+  return /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.SidebarProvider, {
+    className: "!w-auto",
+    open: !isSidebarCollapsed,
+    style: {
+      "--sidebar-width": "".concat(sidebarWidth / 16, "rem")
+    },
+    onOpenChange: function onOpenChange(open) {
+      return setIsSidebarCollapsed(!open);
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Sidebar, {
+      collapsible: "offcanvas",
+      side: sidebarSide,
+      children: [/*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.SidebarHeader, {
+        className: "relative p-0",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Header, {
+          customLogo: customLogo,
+          clearSettingsNav: function clearSettingsNav() {
+            return setSelectedNavLinkRoute(null);
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.SidebarTrigger, {
+          className: "absolute end-2 top-3"
+        }), showWorkspaceName && /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "border-sidebar-border border-b px-4 py-2",
+          children: [/*#__PURE__*/jsxRuntime.jsx("h5", {
+            className: "text-sidebar-foreground mb-1 text-sm font-semibold",
+            children: t("neetoMolecules.sidebar.myWorkspace")
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "text-sidebar-foreground/70 truncate text-xs",
+            children: globalProps.organization.name
+          })]
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.SidebarContent, {
+        children: isSelectedNavLinkVisible ? /*#__PURE__*/jsxRuntime.jsx(ConfigureView.ConfigureView, {
+          handleGoBack: handleGoBack,
+          navLink: activeLink
+        }) : /*#__PURE__*/jsxRuntime.jsx(NavLinks, {
+          isCountsLoading: isCountsLoading,
+          moreNavLinks: moreNavLinks,
+          navLinks: navLinks,
+          setSelectedNavLinkRoute: setSelectedNavLinkRoute
+        })
+      }), isExpandable && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.SidebarRail, {
+        onClickCapture: handleRailClick,
+        onMouseDown: handleRailMouseDown
+      })]
+    }), isSidebarCollapsed && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.SidebarTrigger, {
+      className: "fixed start-2 top-3 z-50"
+    })]
+  });
+};
+
+module.exports = Sidebar;
+//# sourceMappingURL=Sidebar.js.map