basalt-ui 1.17.0 → 1.19.0

package/dist/shell/app-breadcrumbs.js

@@ -13,8 +13,8 @@ const currentStyle = {
 function AppBreadcrumbs({
   section,
   parent,
+  parentAnchor,
   parentHref,
-  renderBreadcrumbLink,
   page
 }) {
   if (!page) return null;
@@ -23,11 +23,15 @@ function AppBreadcrumbs({
       /* @__PURE__ */ jsx(Text, { style: crumbStyle, truncate: true, children: section }),
       /* @__PURE__ */ jsx(Text, { style: separatorStyle, children: "/" })
     ] }),
-    parent && parentHref && /* @__PURE__ */ jsxs(Fragment, { children: [
-      renderBreadcrumbLink ? renderBreadcrumbLink(parentHref, parent) : /* @__PURE__ */ jsx(Anchor, { style: crumbStyle, underline: "never", href: parentHref, truncate: true, children: parent }),
+    parent && parentAnchor && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Anchor, { style: crumbStyle, underline: "never", component: parentAnchor, truncate: true, children: parent }),
       /* @__PURE__ */ jsx(Text, { style: separatorStyle, children: "/" })
     ] }),
-    parent && !parentHref && /* @__PURE__ */ jsxs(Fragment, { children: [
+    parent && !parentAnchor && parentHref && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Anchor, { style: crumbStyle, underline: "never", href: parentHref, truncate: true, children: parent }),
+      /* @__PURE__ */ jsx(Text, { style: separatorStyle, children: "/" })
+    ] }),
+    parent && !parentAnchor && !parentHref && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Text, { style: crumbStyle, truncate: true, children: parent }),
       /* @__PURE__ */ jsx(Text, { style: separatorStyle, children: "/" })
     ] }),

package/dist/shell/app-mobile-nav.d.ts

@@ -1,26 +1,25 @@
-import type { MouseEvent, ReactNode } from 'react';
-export type MobileNavItem = {
-    key: string;
-    label: string;
-    icon: ReactNode;
-    href?: string;
-    active?: boolean;
-    onClick?: (e: MouseEvent) => void;
+import type { ReactElement } from 'react';
+import type { MobileNavConfig, MobileNavModel } from '../nav/types.js';
+import type { BasaltAccountProps } from './account-types.js';
+import type { SettingsMenuItem } from './index.js';
+export type MobileNavProps = {
+    /** The projection from `projectMobileNav` — `BasaltShell` builds it, memoized. */
+    model: MobileNavModel;
+    config?: MobileNavConfig | undefined;
+    /** Rendered as FLAT ROWS in the More surface, never by mounting `SidebarAccount` (which opens
+     *  its own `Menu` — a menu inside a menu). This is what makes the mobile sidebar drawer
+     *  deletable: everything it used to hold is reachable from More. */
+    account?: BasaltAccountProps | undefined;
+    settingsMenuItems?: SettingsMenuItem[] | undefined;
 };
-export type MobileNavSection = {
-    key: string;
-    label: string;
-    icon: ReactNode;
-    active: boolean;
-    items: MobileNavItem[];
-};
-/** Renders a single sheet row. The consumer's router `Link` lives here; `active` is precomputed. */
-export type MobileNavLinkRenderer = (item: MobileNavItem, opts: {
-    active: boolean;
-}) => ReactNode;
-export declare function MobileNav({ sections, onOpenMore, renderNavLink, }: {
-    sections: MobileNavSection[];
-    onOpenMore: () => void;
-    renderNavLink?: MobileNavLinkRenderer;
-}): import("react").JSX.Element;
+/**
+ * How many rows `account` contributes to the More surface — DELEGATED to `accountRows` rather than
+ * re-derived, because `BasaltShell` needs this number BEFORE the projection runs (it feeds
+ * `extraMoreRows`, which picks `menu` vs `sheet` against `menuMax`) while only this module knows
+ * how many rows an account actually expands into. Two independent counts is how a "1 row" account
+ * shipped a 9-row menu into headroom sized for 6, and how a `loading` account — which renders NO
+ * rows — still conjured a More slot that opened empty.
+ */
+export declare function accountRowCount(account: BasaltAccountProps | undefined): number;
+export declare function MobileNav({ model, config, account, settingsMenuItems, }: MobileNavProps): ReactElement;
 //# sourceMappingURL=app-mobile-nav.d.ts.map

package/dist/shell/app-mobile-nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-mobile-nav.d.ts","sourceRoot":"","sources":["../../src/shell/app-mobile-nav.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGlD,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,SAAS,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;CAClC,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,SAAS,CAAA;IACf,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,EAAE,aAAa,EAAE,CAAA;CACvB,CAAA;AAED,oGAAoG;AACpG,MAAM,MAAM,qBAAqB,GAAG,CAAC,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE;IAAE,MAAM,EAAE,OAAO,CAAA;CAAE,KAAK,SAAS,CAAA;AAwBjG,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,UAAU,EACV,aAAa,GACd,EAAE;IACD,QAAQ,EAAE,gBAAgB,EAAE,CAAA;IAC5B,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,aAAa,CAAC,EAAE,qBAAqB,CAAA;CACtC,+BA+EA"}
+{"version":3,"file":"app-mobile-nav.d.ts","sourceRoot":"","sources":["../../src/shell/app-mobile-nav.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAc,YAAY,EAAa,MAAM,OAAO,CAAA;AAChE,OAAO,KAAK,EACV,eAAe,EAEf,cAAc,EAGf,MAAM,cAAc,CAAA;AACrB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAiB/C,MAAM,MAAM,cAAc,GAAG;IAC3B,kFAAkF;IAClF,KAAK,EAAE,cAAc,CAAA;IACrB,MAAM,CAAC,EAAE,eAAe,GAAG,SAAS,CAAA;IACpC;;wEAEoE;IACpE,OAAO,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAA;IACxC,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,GAAG,SAAS,CAAA;CACnD,CAAA;AAkFD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,kBAAkB,GAAG,SAAS,GAAG,MAAM,CAE/E;AAsFD,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAM,EACN,OAAO,EACP,iBAAiB,GAClB,EAAE,cAAc,GAAG,YAAY,CAsO/B"}

package/dist/shell/app-mobile-nav.js

@@ -1,7 +1,11 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Box, Drawer, NavLink, Stack, Text, UnstyledButton } from "@mantine/core";
-import { useState } from "react";
+import { Drawer, Menu, NavLink, ScrollArea, Stack, Text, UnstyledButton } from "@mantine/core";
+import { useReducedMotion } from "@mantine/hooks";
+import { Fragment as Fragment2, useState } from "react";
+import { NavCountBadge } from "./nav-count-badge.js";
+import { useBasaltSpacing } from "../theme/index.js";
 import classes from "./app-mobile-nav.module.css";
+const MENU_MIDDLEWARES = { flip: false, shift: { padding: 8 } };
 function IconMore() {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -24,83 +28,301 @@ function IconMore() {
     }
   );
 }
+function accountRows(account) {
+  if (!account || account.state.status === "loading") return [];
+  const actions = account.actions;
+  if (account.state.status === "unauthenticated") {
+    return [{ key: "basalt-account-sign-in", label: "Sign in", onClick: actions?.onSignIn }];
+  }
+  const rows2 = [];
+  if (actions?.onManageAccount) {
+    rows2.push({
+      key: "basalt-account-manage",
+      label: "Account settings",
+      onClick: actions.onManageAccount
+    });
+  }
+  if (actions?.onManageBilling) {
+    rows2.push({
+      key: "basalt-account-billing",
+      label: "Billing & payment",
+      onClick: actions.onManageBilling
+    });
+  }
+  if (account.state.plan?.isFree && actions?.onUpgrade) {
+    rows2.push({ key: "basalt-account-upgrade", label: "Upgrade", onClick: actions.onUpgrade });
+  }
+  for (const item of actions?.extraMenuItems ?? []) {
+    rows2.push({
+      key: item.key,
+      label: item.label,
+      icon: item.icon,
+      ...item.danger !== void 0 && { danger: item.danger },
+      onClick: item.onClick
+    });
+  }
+  if (actions?.onSignOut) {
+    const onSignOut = actions.onSignOut;
+    rows2.push({
+      key: "basalt-account-sign-out",
+      label: "Sign out",
+      danger: true,
+      onClick: () => void onSignOut()
+    });
+  }
+  return rows2;
+}
+function accountRowCount(account) {
+  return accountRows(account).length;
+}
+function settingsRows(items) {
+  return (items ?? []).map((item) => ({
+    key: item.key,
+    label: item.label,
+    icon: item.icon,
+    onClick: item.onClick
+  }));
+}
+const menuRow = (item, depth) => {
+  const onClick = (event) => {
+    if (item.disabled) {
+      event.preventDefault();
+      return;
+    }
+    item.onClick?.(event);
+  };
+  const shared = {
+    className: depth > 0 ? `${classes.menuItem} ${classes.menuItemNested}` : classes.menuItem,
+    leftSection: item.icon,
+    disabled: Boolean(item.disabled),
+    // Mantine emits `data-disabled` (a STYLING hook) and nothing else, so the ARIA state is ours
+    // to set — a disabled destination still renders (§2.3 rule 11), so it has to announce itself.
+    "aria-disabled": item.disabled || void 0,
+    "aria-current": item.active ? "page" : void 0,
+    rightSection: item.count ? /* @__PURE__ */ jsx(NavCountBadge, { count: item.count }) : void 0,
+    onClick
+  };
+  const Anchor = item.Anchor;
+  if (Anchor && !item.disabled) {
+    return /* @__PURE__ */ jsx(Menu.Item, { component: Anchor, ...shared, children: item.label }, item.key);
+  }
+  return /* @__PURE__ */ jsx(
+    Menu.Item,
+    {
+      component: "a",
+      ...item.href !== void 0 && !item.disabled && { href: item.href },
+      ...shared,
+      children: item.label
+    },
+    item.key
+  );
+};
+const rows = (items, depth, render) => items.flatMap((item) => [render(item, depth), ...rows(item.children ?? [], depth + 1, render)]);
+const menuActionRow = (row) => /* @__PURE__ */ jsx(
+  Menu.Item,
+  {
+    className: classes.menuItem,
+    leftSection: row.icon,
+    ...row.danger ? { color: "red" } : {},
+    onClick: (event) => row.onClick?.(event),
+    children: row.label
+  },
+  row.key
+);
+const sheetGroupLabel = (group) => group.label ? /* @__PURE__ */ jsx(Text, { component: "div", className: classes.menuLabel, children: group.label }) : null;
 function MobileNav({
-  sections,
-  onOpenMore,
-  renderNavLink
+  model,
+  config,
+  account,
+  settingsMenuItems
 }) {
-  const [openSection, setOpenSection] = useState(null);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("nav", { className: classes.bar, children: [
-      sections.map((section) => /* @__PURE__ */ jsxs(
-        UnstyledButton,
-        {
-          onClick: () => setOpenSection(section),
-          className: classes.tab,
-          "data-active": section.active || void 0,
-          "aria-current": section.active ? "page" : void 0,
-          "aria-label": section.label,
-          children: [
-            section.icon,
-            /* @__PURE__ */ jsx(Text, { className: classes.label, children: section.label })
-          ]
-        },
-        section.key
-      )),
-      /* @__PURE__ */ jsxs(UnstyledButton, { onClick: onOpenMore, className: classes.tab, "aria-label": "More", children: [
-        /* @__PURE__ */ jsx(IconMore, {}),
-        /* @__PURE__ */ jsx(Text, { className: classes.label, children: "More" })
-      ] })
+  const [openKey, setOpenKey] = useState(null);
+  const reduceMotion = useReducedMotion();
+  const { step } = useBasaltSpacing();
+  const close = () => setOpenKey(null);
+  const scrollToTop = () => {
+    const target = config?.getScrollElement?.() ?? document.scrollingElement ?? document.documentElement;
+    target.scrollTo({ top: 0, behavior: reduceMotion ? "auto" : "smooth" });
+  };
+  const extraRows = [...accountRows(account), ...settingsRows(settingsMenuItems)];
+  const hasCount = (slot) => slot.kind === "link" ? Boolean(slot.item.count) : slot.groups.some((g) => groupHasCount(g.items));
+  const tabInner = (slot) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("span", { className: classes.tabIcon, children: [
+      slot.icon ?? (slot.kind !== "link" && slot.isMore ? /* @__PURE__ */ jsx(IconMore, {}) : null),
+      hasCount(slot) ? /* @__PURE__ */ jsx("span", { className: classes.tabDot, "aria-hidden": true }) : null
     ] }),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Text, { className: classes.label, children: slot.short })
+  ] });
+  const surfaceTab = (slot, onClick) => /* @__PURE__ */ jsx(
+    UnstyledButton,
+    {
+      className: classes.tab,
+      "data-active": slot.active || void 0,
+      "aria-current": slot.active ? "page" : void 0,
+      "aria-label": slot.label,
+      ...onClick ? { onClick } : {},
+      children: tabInner(slot)
+    }
+  );
+  const linkTab = (slot) => {
+    const onClick = (e) => {
+      if (slot.active) {
+        e.preventDefault();
+        scrollToTop();
+      }
+      slot.item.onClick?.(e);
+    };
+    const shared = {
+      className: classes.tab,
+      "data-active": slot.active || void 0,
+      "aria-current": slot.active ? "page" : void 0,
+      "aria-label": slot.label,
+      onClick
+    };
+    const Anchor = slot.item.Anchor;
+    if (Anchor) {
+      return /* @__PURE__ */ jsx(UnstyledButton, { component: Anchor, ...shared, children: tabInner(slot) }, slot.key);
+    }
+    return /* @__PURE__ */ jsx(
+      UnstyledButton,
+      {
+        component: "a",
+        ...slot.item.href !== void 0 && { href: slot.item.href },
+        ...shared,
+        children: tabInner(slot)
+      },
+      slot.key
+    );
+  };
+  const sheetRow = (item, depth) => {
+    const onClick = (e) => {
+      item.onClick?.(e);
+      close();
+    };
+    const shared = {
+      classNames: {
+        root: depth > 0 ? `${classes.row} ${classes.rowNested}` : classes.row
+      },
+      label: item.label,
+      leftSection: item.icon,
+      rightSection: item.count ? /* @__PURE__ */ jsx(NavCountBadge, { count: item.count }) : void 0,
+      active: Boolean(item.active),
+      disabled: Boolean(item.disabled),
+      // Same as the menu row above: `NavLink`'s `disabled` is a `mod`, i.e. `data-disabled` only.
+      "aria-disabled": item.disabled || void 0,
+      "aria-current": item.active ? "page" : void 0,
+      onClick
+    };
+    const Anchor = item.Anchor;
+    if (Anchor && !item.disabled) {
+      return /* @__PURE__ */ jsx(NavLink, { component: Anchor, ...shared }, item.key);
+    }
+    return /* @__PURE__ */ jsx(
+      NavLink,
+      {
+        component: "a",
+        ...item.href !== void 0 && !item.disabled && { href: item.href },
+        ...shared
+      },
+      item.key
+    );
+  };
+  const sheetActionRow = (row) => /* @__PURE__ */ jsx(
+    NavLink,
+    {
+      classNames: { root: classes.row },
+      label: row.label,
+      leftSection: row.icon,
+      ...row.danger ? { color: "red" } : {},
+      onClick: (event) => {
+        row.onClick?.(event);
+        close();
+      }
+    },
+    row.key
+  );
+  const menuSlot = (slot) => /* @__PURE__ */ jsxs(
+    Menu,
+    {
+      opened: openKey === slot.key,
+      onChange: (opened) => setOpenKey(opened ? slot.key : null),
+      position: slot.isMore ? "top-end" : "top",
+      offset: 8,
+      width: step.mobileNavMenuWidth,
+      withinPortal: true,
+      zIndex: 400,
+      middlewares: MENU_MIDDLEWARES,
+      trapFocus: true,
+      returnFocus: true,
+      closeOnItemClick: true,
+      closeOnClickOutside: true,
+      closeOnEscape: true,
+      menuItemTabIndex: 0,
+      transitionProps: {
+        transition: slot.isMore ? "pop-bottom-right" : "pop",
+        duration: reduceMotion ? 0 : 140,
+        exitDuration: reduceMotion ? 0 : 100
+      },
+      classNames: { dropdown: classes.menuDropdown, label: classes.menuLabel },
+      children: [
+        /* @__PURE__ */ jsx(Menu.Target, { children: surfaceTab(slot) }),
+        /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [
+          slot.groups.flatMap((group) => [
+            ...group.label ? [/* @__PURE__ */ jsx(Menu.Label, { children: group.label }, `${group.key}-label`)] : [],
+            ...rows(group.items, 0, menuRow)
+          ]),
+          slot.isMore && extraRows.length > 0 && slotHasRows(slot) ? /* @__PURE__ */ jsx(Menu.Divider, {}) : null,
+          slot.isMore ? extraRows.map(menuActionRow) : null,
+          slot.isMore ? config?.moreExtra : null
+        ] })
+      ]
+    },
+    slot.key
+  );
+  const sheetSlot = (slot) => /* @__PURE__ */ jsxs(Fragment2, { children: [
+    surfaceTab(slot, () => setOpenKey(slot.key)),
+    /* @__PURE__ */ jsxs(
       Drawer,
       {
-        opened: openSection !== null,
-        onClose: () => setOpenSection(null),
+        opened: openKey === slot.key,
+        onClose: close,
         position: "bottom",
         size: "auto",
         padding: "md",
-        title: openSection?.label,
+        title: slot.label,
         classNames: { content: classes.sheet, title: classes.sheetTitle },
-        children: /* @__PURE__ */ jsx(Stack, { gap: 2, children: openSection?.items.map((item) => {
-          const handleClick = (e) => {
-            item.onClick?.(e);
-            setOpenSection(null);
-          };
-          const active = Boolean(item.active);
-          if (renderNavLink) {
-            return /* @__PURE__ */ jsx(Box, { onClick: () => setOpenSection(null), children: renderNavLink(item, { active }) }, item.key);
-          }
-          return item.href ? /* @__PURE__ */ jsx(
-            NavLink,
-            {
-              classNames: { root: classes.row },
-              component: "a",
-              href: item.href,
-              label: item.label,
-              leftSection: item.icon,
-              active,
-              onClick: handleClick
-            },
-            item.key
-          ) : /* @__PURE__ */ jsxs(
-            UnstyledButton,
-            {
-              onClick: handleClick,
-              className: classes.row,
-              "data-active": active || void 0,
-              children: [
-                item.icon,
-                /* @__PURE__ */ jsx(Text, { className: classes.rowLabel, children: item.label })
-              ]
-            },
-            item.key
-          );
-        }) })
+        transitionProps: {
+          transition: "slide-up",
+          duration: reduceMotion ? 0 : 220,
+          timingFunction: "cubic-bezier(0.32, 0.72, 0, 1)"
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: classes.grabber, "aria-hidden": true }),
+          /* @__PURE__ */ jsx(ScrollArea.Autosize, { mah: "62dvh", type: "scroll", children: /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+            slot.groups.map((group) => /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+              sheetGroupLabel(group),
+              rows(group.items, 0, sheetRow)
+            ] }, group.key)),
+            slot.isMore && extraRows.length > 0 ? /* @__PURE__ */ jsx(Stack, { gap: 2, children: extraRows.map(sheetActionRow) }) : null,
+            slot.isMore ? config?.moreExtra : null
+          ] }) })
+        ]
       }
     )
-  ] });
+  ] }, slot.key);
+  return /* @__PURE__ */ jsx("nav", { className: classes.bar, "aria-label": "Primary", children: model.slots.map((slot) => {
+    if (slot.kind === "link") return linkTab(slot);
+    if (slot.kind === "menu") return menuSlot(slot);
+    return sheetSlot(slot);
+  }) });
+}
+function slotHasRows(slot) {
+  return slot.groups.some((group) => group.items.length > 0);
+}
+function groupHasCount(items) {
+  return items.some((item) => Boolean(item.count) || groupHasCount(item.children ?? []));
 }
 export {
-  MobileNav
+  MobileNav,
+  accountRowCount
 };