habarico 7.3.0-beta.3 → 7.3.0-beta.5

package/README.md

@@ -11,7 +11,7 @@ or 19.
 ## Installation
 
 ```bash
-pnpm add habarico
+npm install habarico
 ```
 
 Peer dependencies (React, React Admin, MUI) are not bundled — install them in the project at the
@@ -21,28 +21,6 @@ same versions the library declares.
 > data router. Let `SchemaAdmin` create one itself, or wrap it in `createBrowserRouter` — a legacy
 > `<BrowserRouter>` silently disables the guard.
 
-## Local development against a checkout
-
-To run a project against your working copy instead of the published package, link it from the
-project directory — the free library first, the paid one second:
-
-```bash
-pydev link-library <path-to-libs>/habarico-base/node <path-to-libs>/habarico-enterprise/node-enterprise
-```
-
-`<path-to-libs>` is the directory holding your library checkouts — the same placeholder the Ruby services use in their compose files. Relative or absolute, both work.
-
-Link only what you develop; either package works on its own. When you link both, the order matters —
-`habarico-enterprise` resolves its own `habarico` through the project, so the free library
-has to be linked first or both end up with their own copy of React.
-
-```bash
-pnpm watch          # in the library you edit
-pydev unlink-library <same paths>
-```
-
-See [Installation](https://docs.habarico.com/node/installation) for the details.
-
 ## Quick start
 
 ```tsx
@@ -77,7 +55,7 @@ is only a quick start.
 
 | Section | What it covers |
 | --- | --- |
-| [Installation](https://docs.habarico.com/node/installation) | Packages, the router requirement, local development against a checkout |
+| [Installation](https://docs.habarico.com/node/installation) | Peer dependencies and the router requirement |
 | [Base components](https://docs.habarico.com/node/base-components/) | `SchemaAdmin` and `SchemaResource` — every prop |
 | [View components](https://docs.habarico.com/node/view-components/) | List, show, create, edit and action views |
 | [Providers](https://docs.habarico.com/node/providers/) | Auth, data and schema providers, and the customisation registries |
@@ -91,10 +69,6 @@ The backends serving those schemas are documented at
 [docs.habarico.com/ruby/intro](https://docs.habarico.com/ruby/intro); the contract between them is the
 [API reference](https://docs.habarico.com/api).
 
-The architecture of the library itself — its four layers and what belongs where — is documented in
-`src/foundation/README.md`, `src/design/README.md`, `src/admin/README.md` and
-`src/schema/README.md`, next to the code they describe.
-
 ## License
 
 [MIT](LICENSE)

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
         );