@broberg/app-shell 0.19.0 → 0.20.1

package/dist/preact.d.cts

@@ -459,6 +459,34 @@ type PreactNavGroup = NavGroup<Icon>;
 type Navigate = (href: string) => void;
 /** True below 768px. Follows the window as it resizes. */
 declare function useIsMobile(): boolean;
+interface ItemActionsMenuProps {
+    /** The menu's items — the same NavAction[] a sidebar row takes (kbd, submenu, input, confirm, danger). */
+    actions: NavAction[];
+    /** What the menu opens from: positioned from it, and focus returns to it on close. */
+    anchor: HTMLElement;
+    /** An action was chosen (value = the text, for an input action). The menu has closed. */
+    onAction: (actionId: string, value?: string) => void;
+    /** The menu closed — by a pick, Escape, a click outside, scroll or resize. Unmount it here. */
+    onClose: () => void;
+    lang: Lang;
+    /** The menu's accessible name, e.g. the conversation's title. */
+    label: string;
+    /** "auto" (default): below the anchor if it fits, else above. "down": always below. */
+    placement?: "auto" | "down";
+    /** testids: `<prefix>-menu`, `<prefix>-action-<id>`, `<prefix>-back`, `<prefix>-input`, `<prefix>-save`. Default "item-actions". */
+    testidPrefix?: string;
+}
+/**
+ * F092.29 — the row-action menu on its own, so a title «⌄» and a sidebar row «…»
+ * open THE SAME menu (scout #2745). The sidebar's row menu is this component: one
+ * implementation, so keyboard, confirm, input and submenu cannot drift apart.
+ * Mount it while open; it closes itself through onClose.
+ *
+ * Keys (F092.21/.22): focus moves into the menu when it opens; arrows move real
+ * focus; Enter/Space act on the FOCUSED item; a kbd letter picks; ←/Backspace goes
+ * back from a submenu; Escape closes and returns focus to the anchor.
+ */
+declare function ItemActionsMenu(props: ItemActionsMenuProps): JSX.Element;
 interface SidebarProps {
     groups: PreactNavGroup[];
     footer?: PreactNavItem[];
@@ -774,4 +802,4 @@ interface ConfirmDialogProps {
 }
 declare function ConfirmDialog(p: ConfirmDialogProps): JSX.Element | null;
 
-export { AVATAR_MAX_BYTES, AVATAR_TYPES, type AccountAdapter, AccountError, AccountPage, type AccountPageProps, type AccountProfile, type AnalyticsAdapter, type AnalyticsData, type AnalyticsDay, AnalyticsError, AnalyticsPage, type AnalyticsPageProps, AppShell, type AppShellProps, Avatar, ConfirmDialog, type ConfirmDialogProps, type Lang, type NavAction, type NavGroup, type NavItem, type NavSection, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, type TenantAdapter, TenantLoadError, type TenantMembershipRow, TenantSwitcher, type TenantSwitcherProps, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuSection, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
+export { AVATAR_MAX_BYTES, AVATAR_TYPES, type AccountAdapter, AccountError, AccountPage, type AccountPageProps, type AccountProfile, type AnalyticsAdapter, type AnalyticsData, type AnalyticsDay, AnalyticsError, AnalyticsPage, type AnalyticsPageProps, AppShell, type AppShellProps, Avatar, ConfirmDialog, type ConfirmDialogProps, ItemActionsMenu, type ItemActionsMenuProps, type Lang, type NavAction, type NavGroup, type NavItem, type NavSection, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, type TenantAdapter, TenantLoadError, type TenantMembershipRow, TenantSwitcher, type TenantSwitcherProps, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuSection, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };

package/dist/preact.d.ts

@@ -459,6 +459,34 @@ type PreactNavGroup = NavGroup<Icon>;
 type Navigate = (href: string) => void;
 /** True below 768px. Follows the window as it resizes. */
 declare function useIsMobile(): boolean;
+interface ItemActionsMenuProps {
+    /** The menu's items — the same NavAction[] a sidebar row takes (kbd, submenu, input, confirm, danger). */
+    actions: NavAction[];
+    /** What the menu opens from: positioned from it, and focus returns to it on close. */
+    anchor: HTMLElement;
+    /** An action was chosen (value = the text, for an input action). The menu has closed. */
+    onAction: (actionId: string, value?: string) => void;
+    /** The menu closed — by a pick, Escape, a click outside, scroll or resize. Unmount it here. */
+    onClose: () => void;
+    lang: Lang;
+    /** The menu's accessible name, e.g. the conversation's title. */
+    label: string;
+    /** "auto" (default): below the anchor if it fits, else above. "down": always below. */
+    placement?: "auto" | "down";
+    /** testids: `<prefix>-menu`, `<prefix>-action-<id>`, `<prefix>-back`, `<prefix>-input`, `<prefix>-save`. Default "item-actions". */
+    testidPrefix?: string;
+}
+/**
+ * F092.29 — the row-action menu on its own, so a title «⌄» and a sidebar row «…»
+ * open THE SAME menu (scout #2745). The sidebar's row menu is this component: one
+ * implementation, so keyboard, confirm, input and submenu cannot drift apart.
+ * Mount it while open; it closes itself through onClose.
+ *
+ * Keys (F092.21/.22): focus moves into the menu when it opens; arrows move real
+ * focus; Enter/Space act on the FOCUSED item; a kbd letter picks; ←/Backspace goes
+ * back from a submenu; Escape closes and returns focus to the anchor.
+ */
+declare function ItemActionsMenu(props: ItemActionsMenuProps): JSX.Element;
 interface SidebarProps {
     groups: PreactNavGroup[];
     footer?: PreactNavItem[];
@@ -774,4 +802,4 @@ interface ConfirmDialogProps {
 }
 declare function ConfirmDialog(p: ConfirmDialogProps): JSX.Element | null;
 
-export { AVATAR_MAX_BYTES, AVATAR_TYPES, type AccountAdapter, AccountError, AccountPage, type AccountPageProps, type AccountProfile, type AnalyticsAdapter, type AnalyticsData, type AnalyticsDay, AnalyticsError, AnalyticsPage, type AnalyticsPageProps, AppShell, type AppShellProps, Avatar, ConfirmDialog, type ConfirmDialogProps, type Lang, type NavAction, type NavGroup, type NavItem, type NavSection, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, type TenantAdapter, TenantLoadError, type TenantMembershipRow, TenantSwitcher, type TenantSwitcherProps, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuSection, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
+export { AVATAR_MAX_BYTES, AVATAR_TYPES, type AccountAdapter, AccountError, AccountPage, type AccountPageProps, type AccountProfile, type AnalyticsAdapter, type AnalyticsData, type AnalyticsDay, AnalyticsError, AnalyticsPage, type AnalyticsPageProps, AppShell, type AppShellProps, Avatar, ConfirmDialog, type ConfirmDialogProps, ItemActionsMenu, type ItemActionsMenuProps, type Lang, type NavAction, type NavGroup, type NavItem, type NavSection, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, type TenantAdapter, TenantLoadError, type TenantMembershipRow, TenantSwitcher, type TenantSwitcherProps, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuSection, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };

package/dist/preact.js

@@ -1,8 +1,8 @@
-import { useState, useEffect, useRef, useMemo, useLayoutEffect } from 'preact/hooks';
+import { useState, useEffect, useRef, useLayoutEffect, useMemo } from 'preact/hooks';
 import { createBellShell } from '@broberg/notifications/shell';
 import { selectKeyReducer } from '@broberg/ui-controls-core';
 import { getPreference, getPalette, getSurfaces, getBackdrop, onThemeChange, onPaletteChange, onSurfacesChange, onBackdropChange, setPreference, setPalette, PALETTES, PALETTE_LABELS, setSurfaces, setBackdrop } from '@broberg/theme';
-import { jsxs, Fragment, jsx } from 'preact/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'preact/jsx-runtime';
 
 // src/preact.tsx
 
@@ -514,12 +514,17 @@ var IconBuilding = () => svg(/* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx("path", { d: "M9 22v-4h6v4" }),
   /* @__PURE__ */ jsx("path", { d: "M8 6h.01M16 6h.01M12 6h.01M12 10h.01M12 14h.01M16 10h.01M16 14h.01M8 10h.01M8 14h.01" })
 ] }), 15);
-function RowActions(props) {
+function ItemActionsMenu(props) {
   const t = TEXT[props.lang];
-  const id = props.item.id;
-  const btn = useRef(null);
+  const pre = props.testidPrefix ?? "item-actions";
   const menu = useRef(null);
-  const [stack, setStack] = useState([]);
+  const first = [{ kind: "list", actions: props.actions }];
+  const [stack, setStack] = useState(first);
+  const stackRef = useRef(first);
+  const setStackNow = (next) => {
+    stackRef.current = next;
+    setStack(next);
+  };
   const [hi, setHiState] = useState(0);
   const hiRef = useRef(0);
   const setHi = (n) => {
@@ -538,16 +543,12 @@ function RowActions(props) {
   const [value, setValue] = useState("");
   const [pos, setPos] = useState(void 0);
   const view = stack[stack.length - 1];
-  const open = !!view;
-  const stackRef = useRef([]);
-  const setStackNow = (next) => {
-    stackRef.current = next;
-    setStack(next);
-  };
+  const closed = useRef(false);
   const close = (refocus = true) => {
-    setStackNow([]);
-    setArmed(null);
-    if (refocus) btn.current?.focus();
+    if (closed.current) return;
+    closed.current = true;
+    if (refocus) props.anchor.focus();
+    props.onClose();
   };
   const show = (v) => {
     setStackNow([...stackRef.current, v]);
@@ -572,25 +573,24 @@ function RowActions(props) {
     props.onAction(a.id, value);
   };
   useLayoutEffect(() => {
-    if (!open || !btn.current) return setPos(void 0);
-    const r = btn.current.getBoundingClientRect();
+    const r = props.anchor.getBoundingClientRect();
     const vw = window.innerWidth, vh = window.innerHeight, m = 8;
     const w = Math.min(240, vw - 2 * m);
     const h = menu.current?.offsetHeight ?? 0;
     const left = Math.max(m, Math.min(r.right - w, vw - w - m));
-    const top = r.bottom + 4 + h <= vh - m || r.top - 4 - h < m ? Math.min(r.bottom + 4, vh - m - h) : r.top - 4 - h;
+    const fitsBelow = r.bottom + 4 + h <= vh - m;
+    const top = props.placement === "down" || fitsBelow || r.top - 4 - h < m ? Math.min(r.bottom + 4, vh - m - h) : r.top - 4 - h;
     setPos({ position: "fixed", left: `${left}px`, top: `${Math.max(m, top)}px`, width: `${w}px` });
-  }, [open, stack.length]);
+  }, [stack.length]);
   useLayoutEffect(() => {
-    if (!open || !pos) return;
-    if (view?.kind === "input") menu.current?.querySelector("input")?.focus();
+    if (!pos) return;
+    if (view.kind === "input") menu.current?.querySelector("input")?.focus();
     else items.current[hiRef.current]?.focus();
-  }, [open, pos, hi, stack.length]);
+  }, [pos, hi, stack.length]);
   useLayoutEffect(() => {
-    if (!open) return;
     const outside = (e) => {
       const n = e.target instanceof Node ? e.target : null;
-      if (n && (menu.current?.contains(n) || btn.current?.contains(n))) return;
+      if (n && (menu.current?.contains(n) || props.anchor.contains(n))) return;
       close(false);
     };
     const early = (e) => {
@@ -609,8 +609,9 @@ function RowActions(props) {
       window.removeEventListener("scroll", outside, true);
       window.removeEventListener("resize", outside);
     };
-  }, [open]);
+  }, []);
   const onKeyDown = (e) => {
+    if (closed.current) return;
     const stack2 = stackRef.current;
     const view2 = stack2[stack2.length - 1];
     if (!view2) return;
@@ -653,6 +654,82 @@ function RowActions(props) {
     }
   };
   onKeyDownRef.current = onKeyDown;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: menu,
+      class: "bas-rowmenu",
+      role: "menu",
+      tabIndex: -1,
+      "aria-label": view.kind === "list" && view.title ? view.title : props.label,
+      "data-testid": `${pre}-menu`,
+      style: pos ?? { position: "fixed", visibility: "hidden" },
+      onKeyDown,
+      children: [
+        stack.length > 1 ? /* @__PURE__ */ jsxs("button", { type: "button", class: "bas-rowmenu__back", "data-testid": `${pre}-back`, "aria-label": t.back, onClick: back, children: [
+          /* @__PURE__ */ jsx(IconChevronLeft, {}),
+          /* @__PURE__ */ jsx("span", { children: view.kind === "list" ? view.title : view.action.label })
+        ] }) : null,
+        view.kind === "list" ? view.actions.map((a, i) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            ref: (el) => {
+              items.current[i] = el;
+            },
+            tabIndex: i === hi ? 0 : -1,
+            class: "bas-rowmenu__item" + (i === hi ? " is-active" : "") + (a.danger ? " is-danger" : "") + (armed === a.id ? " is-armed" : ""),
+            "data-testid": `${pre}-action-${a.id}`,
+            onMouseEnter: () => setHi(i),
+            onFocus: () => setHi(i),
+            onClick: () => pick(a),
+            children: [
+              a.icon ? /* @__PURE__ */ jsx("span", { class: "bas-rowmenu__icon", children: a.icon }) : null,
+              /* @__PURE__ */ jsx("span", { class: "bas-rowmenu__label", children: armed === a.id && a.confirm ? a.confirm.label : a.label }),
+              a.submenu?.length ? /* @__PURE__ */ jsx(IconChevronRight, {}) : a.kbd ? /* @__PURE__ */ jsx("kbd", { class: "bas-rowmenu__kbd", children: a.kbd.toUpperCase() }) : null
+            ]
+          },
+          a.id
+        )) : /* @__PURE__ */ jsxs(
+          "form",
+          {
+            class: "bas-rowmenu__form",
+            "data-testid": `${pre}-form`,
+            onSubmit: (e) => {
+              e.preventDefault();
+              save(view.action);
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  class: "bas-rowmenu__input",
+                  "data-testid": `${pre}-input`,
+                  "aria-label": view.action.label,
+                  value,
+                  placeholder: view.action.input.placeholder,
+                  onInput: (e) => setValue(e.currentTarget.value)
+                }
+              ),
+              /* @__PURE__ */ jsx("button", { type: "submit", class: "bas-rowmenu__save", "data-testid": `${pre}-save`, children: view.action.input.saveLabel ?? t.save })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function RowActions(props) {
+  const t = TEXT[props.lang];
+  const id = props.item.id;
+  const btn = useRef(null);
+  const [open, setOpenState] = useState(false);
+  const openRef = useRef(false);
+  const setOpen = (v) => {
+    openRef.current = v;
+    setOpenState(v);
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -664,73 +741,24 @@ function RowActions(props) {
         "aria-label": `${t.moreFor} ${props.item.label}`,
         "aria-haspopup": "menu",
         "aria-expanded": open,
-        onClick: () => stackRef.current.length ? close() : show({ kind: "list", actions: props.item.actions }),
+        onClick: () => {
+          if (!openRef.current) return setOpen(true);
+          setOpen(false);
+          btn.current?.focus();
+        },
         children: /* @__PURE__ */ jsx(IconMore, {})
       }
     ),
-    view ? /* @__PURE__ */ jsxs(
-      "div",
+    open && btn.current ? /* @__PURE__ */ jsx(
+      ItemActionsMenu,
       {
-        ref: menu,
-        class: "bas-rowmenu",
-        role: "menu",
-        tabIndex: -1,
-        "aria-label": view.kind === "list" && view.title ? view.title : props.item.label,
-        "data-testid": `sidebar-item-${id}-menu`,
-        style: pos ?? { position: "fixed", visibility: "hidden" },
-        onKeyDown,
-        children: [
-          stack.length > 1 ? /* @__PURE__ */ jsxs("button", { type: "button", class: "bas-rowmenu__back", "data-testid": `sidebar-item-${id}-back`, "aria-label": t.back, onClick: back, children: [
-            /* @__PURE__ */ jsx(IconChevronLeft, {}),
-            /* @__PURE__ */ jsx("span", { children: view.kind === "list" ? view.title : view.action.label })
-          ] }) : null,
-          view.kind === "list" ? view.actions.map((a, i) => /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              role: "menuitem",
-              ref: (el) => {
-                items.current[i] = el;
-              },
-              tabIndex: i === hi ? 0 : -1,
-              class: "bas-rowmenu__item" + (i === hi ? " is-active" : "") + (a.danger ? " is-danger" : "") + (armed === a.id ? " is-armed" : ""),
-              "data-testid": `sidebar-item-${id}-action-${a.id}`,
-              onMouseEnter: () => setHi(i),
-              onFocus: () => setHi(i),
-              onClick: () => pick(a),
-              children: [
-                a.icon ? /* @__PURE__ */ jsx("span", { class: "bas-rowmenu__icon", children: a.icon }) : null,
-                /* @__PURE__ */ jsx("span", { class: "bas-rowmenu__label", children: armed === a.id && a.confirm ? a.confirm.label : a.label }),
-                a.submenu?.length ? /* @__PURE__ */ jsx(IconChevronRight, {}) : a.kbd ? /* @__PURE__ */ jsx("kbd", { class: "bas-rowmenu__kbd", children: a.kbd.toUpperCase() }) : null
-              ]
-            },
-            a.id
-          )) : /* @__PURE__ */ jsxs(
-            "form",
-            {
-              class: "bas-rowmenu__form",
-              "data-testid": `sidebar-item-${id}-form`,
-              onSubmit: (e) => {
-                e.preventDefault();
-                save(view.action);
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    class: "bas-rowmenu__input",
-                    "data-testid": `sidebar-item-${id}-input`,
-                    "aria-label": view.action.label,
-                    value,
-                    placeholder: view.action.input.placeholder,
-                    onInput: (e) => setValue(e.currentTarget.value)
-                  }
-                ),
-                /* @__PURE__ */ jsx("button", { type: "submit", class: "bas-rowmenu__save", "data-testid": `sidebar-item-${id}-save`, children: view.action.input.saveLabel ?? t.save })
-              ]
-            }
-          )
-        ]
+        actions: props.item.actions,
+        anchor: btn.current,
+        lang: props.lang,
+        label: props.item.label,
+        testidPrefix: `sidebar-item-${id}`,
+        onAction: props.onAction,
+        onClose: () => setOpen(false)
       }
     ) : null
   ] });
@@ -2026,6 +2054,6 @@ function ConfirmDialog(p) {
   );
 }
 
-export { AVATAR_MAX_BYTES, AVATAR_TYPES, AccountError, AccountPage, AnalyticsError, AnalyticsPage, AppShell, Avatar, ConfirmDialog, NotificationBell, PageHeader, PageTabs, Sidebar, TEXT, TenantLoadError, TenantSwitcher, TopBar, UserMenu, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
+export { AVATAR_MAX_BYTES, AVATAR_TYPES, AccountError, AccountPage, AnalyticsError, AnalyticsPage, AppShell, Avatar, ConfirmDialog, ItemActionsMenu, NotificationBell, PageHeader, PageTabs, Sidebar, TEXT, TenantLoadError, TenantSwitcher, TopBar, UserMenu, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
 //# sourceMappingURL=preact.js.map
 //# sourceMappingURL=preact.js.map