habarico 7.3.0-beta.4 → 7.3.0-beta.5

package/lib/index.cjs

@@ -55441,6 +55441,7 @@ const MenuItem = ({
   highlighted,
   sub,
   dropdown,
+  expanded,
   tooltip,
   onMouseEnter,
   onMouseLeave,
@@ -55450,12 +55451,13 @@ const MenuItem = ({
   const isLight = theme.palette.mode === "light";
   const activeText = isLight ? theme.palette.primary.dark : theme.palette.primary.light;
   const activeIcon = isLight ? theme.palette.primary.main : theme.palette.primary.lighter;
+  const isGroup = !!item.items?.length;
+  const linkProps = isGroup ? { "aria-expanded": !!expanded } : { component: RouterLink, href: item.href };
   return /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: tooltip, placement: "right", children: /* @__PURE__ */ jsxRuntime.jsxs(
     material.ListItemButton,
     {
       disableGutters: true,
-      component: RouterLink,
-      href: item.href,
+      ...linkProps,
       onMouseEnter,
       onMouseLeave,
       onClick,
@@ -55504,6 +55506,7 @@ const MenuItemWithPopper = ({ children, onClick, ...rest }) => {
   const isOverSubMenuRef = React.useRef(false);
   const openTimeoutRef = React.useRef(void 0);
   const closeTimeoutRef = React.useRef(void 0);
+  const openedByClickRef = React.useRef(false);
   const closeIfNotOver = React.useCallback(() => {
     clearTimeout(closeTimeoutRef.current);
     closeTimeoutRef.current = setTimeout(() => {
@@ -55517,9 +55520,22 @@ const MenuItemWithPopper = ({ children, onClick, ...rest }) => {
     isOverMenuRef.current = true;
     const target = e.currentTarget;
     openTimeoutRef.current = setTimeout(() => {
+      openedByClickRef.current = false;
       setAnchorEl(target);
     }, POPOVER_OPEN_DEBOUNCE);
   }, []);
+  const togglePopper = React.useCallback(
+    (e) => {
+      clearTimeout(openTimeoutRef.current);
+      clearTimeout(closeTimeoutRef.current);
+      const target = e.currentTarget;
+      const close = Boolean(anchorEl) && openedByClickRef.current;
+      openedByClickRef.current = !close;
+      setAnchorEl(close ? null : target);
+      onClick?.(e);
+    },
+    [anchorEl, onClick]
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       MenuItem,
@@ -55531,7 +55547,8 @@ const MenuItemWithPopper = ({ children, onClick, ...rest }) => {
           isOverMenuRef.current = false;
           closeIfNotOver();
         },
-        onClick
+        onClick: togglePopper,
+        expanded: Boolean(anchorEl)
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -55629,8 +55646,39 @@ const MenuListCollapsed = ({ items, level, onItemClick }) => {
 const SUB_INDENT = 40;
 const ELBOW_WIDTH = 16;
 const ELBOW_RADIUS = 10;
-const MenuListFull = ({ items, level, onItemClick }) => {
+const MenuListFullItem = ({ item, level, onItemClick }) => {
   const { isActive, isExpanded } = useActiveExpanded();
+  const pathname = usePathname();
+  const routeExpanded = isExpanded(item);
+  const [open, setOpen] = React.useState(routeExpanded);
+  const [syncedPathname, setSyncedPathname] = React.useState(pathname);
+  if (syncedPathname !== pathname) {
+    setSyncedPathname(pathname);
+    if (routeExpanded) setOpen(true);
+  }
+  const active = isActive(item);
+  const isGroup = !!item.items?.length;
+  const highlighted = !active && isGroup && open;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MenuItem,
+      {
+        item,
+        active,
+        highlighted,
+        expanded: isGroup ? open : void 0,
+        sub: level >= 1,
+        collapsed: false,
+        onClick: () => {
+          if (isGroup) setOpen((value) => !value);
+          onItemClick?.(item);
+        }
+      }
+    ),
+    isGroup && /* @__PURE__ */ jsxRuntime.jsx(material.Collapse, { in: open, children: /* @__PURE__ */ jsxRuntime.jsx(MenuListFull, { items: item.items, onItemClick, level: level + 1 }) })
+  ] });
+};
+const MenuListFull = ({ items, level, onItemClick }) => {
   const theme = material.useTheme();
   const isSub = level >= 1;
   const lineColor = varAlpha(theme.palette.grey["500Channel"], 0.32);
@@ -55651,9 +55699,7 @@ const MenuListFull = ({ items, level, onItemClick }) => {
         position: isSub ? "relative" : void 0
       },
       children: items.map((item, index) => {
-        const active = isActive(item);
-        const highlighted = !active && !!item.items?.length && isExpanded(item);
-        return /* @__PURE__ */ jsxRuntime.jsxs(
+        return /* @__PURE__ */ jsxRuntime.jsx(
           material.ListItem,
           {
             disableGutters: true,
@@ -55684,22 +55730,7 @@ const MenuListFull = ({ items, level, onItemClick }) => {
                 }
               }
             },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                MenuItem,
-                {
-                  item,
-                  active,
-                  highlighted,
-                  sub: isSub,
-                  collapsed: false,
-                  onClick: () => {
-                    onItemClick?.(item);
-                  }
-                }
-              ),
-              item.items && /* @__PURE__ */ jsxRuntime.jsx(material.Collapse, { in: isExpanded(item), children: /* @__PURE__ */ jsxRuntime.jsx(MenuListFull, { items: item.items, onItemClick, level: level + 1 }) })
-            ]
+            children: /* @__PURE__ */ jsxRuntime.jsx(MenuListFullItem, { item, level, onItemClick })
           },
           index
         );