@mdbase-dev/ui 0.1.0-beta.126 → 0.1.0-beta.148

package/dist/collections/CollectionSwitcher.js

@@ -0,0 +1,598 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { anchoredPlacement } from "../popover.js";
+import { RowDialogs, SignOutDialog } from "./dialogs.js";
+import { AccountLine, ActionButton, CollectionMark, ItemCopy, ItemMore, NoticeBlock, PrivateMark, RowCopy, RowMore } from "./parts.js";
+import { useCollectionUi } from "./use-collection-ui.js";
+/** Collections worth a filter box; fewer fit at a glance. */
+const FILTER_THRESHOLD = 7;
+const NARROW = "(max-width: 639.98px)";
+/**
+ * The in-app collection switcher: a trigger that opens the approved collections
+ * (one click switches, no Connect window), "Add a collection…", "Manage access"
+ * and the account. A popover on wide screens, a bottom sheet on narrow ones.
+ *
+ * Pass `open` and `onOpenChange` to control it. With `variant="none"` it has no
+ * trigger, so an app can open it from its own control and pass that control's
+ * element (or the menu button that held it) as `anchorRef`.
+ */
+export function CollectionSwitcher({
+  variant = "full",
+  className,
+  icon,
+  open: openProp,
+  onOpenChange,
+  anchorRef,
+  ...options
+}) {
+  const ui = useCollectionUi(options);
+  const [ownOpen, setOwnOpen] = useState(false);
+  const open = openProp ?? ownOpen;
+  const setOpen = next => {
+    if (next === open) return;
+    if (openProp === undefined) setOwnOpen(next);
+    onOpenChange?.(next);
+  };
+  const [dialog, setDialog] = useState(null);
+  const trigger = useRef(null);
+  // The element the panel is placed against and hands focus back to.
+  const anchor = anchorRef ?? trigger;
+  const panelId = useId();
+  const narrow = useNarrow();
+  const {
+    view,
+    copy,
+    say,
+    busy
+  } = ui;
+  const app = ui.appOpen?.item ?? null;
+  const current = app ? null : view.current;
+  const currentName = app?.name ?? current?.name ?? null;
+  const name = currentName ?? copy.switchCollectionNone;
+  const markOf = app ?? current;
+  const leading = icon === "mark" ? markOf ? _jsx(CollectionMark, {
+    row: markOf
+  }) : _jsx(CollectionsGlyph, {}) : icon;
+  const close = refocus => {
+    setOpen(false);
+    if (refocus) anchor.current?.focus();
+  };
+  const toDialog = next => {
+    setOpen(false);
+    setDialog(next);
+  };
+  // The popover that held the row is gone: a closed row dialog hands focus to the anchor.
+  const returnFocus = useRef(false);
+  useEffect(() => {
+    if (dialog || !returnFocus.current) return;
+    returnFocus.current = false;
+    const active = document.activeElement;
+    if (!active || active === document.body) anchor.current?.focus();
+  }, [dialog, anchor]);
+  const content = _jsx(SwitcherContent, {
+    ui: ui,
+    onDone: () => close(false),
+    onDialog: toDialog
+  });
+  return _jsxs("span", {
+    className: ["mdbase-collections", "mdbase-collections-switcher", className].filter(Boolean).join(" "),
+    "data-variant": variant,
+    children: [variant !== "none" && _jsxs("button", {
+      ref: trigger,
+      type: "button",
+      className: "mdbase-collections-trigger",
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      "aria-controls": open ? panelId : undefined,
+      "aria-label": currentName ? say("switchCollection", {
+        collection: currentName
+      }) : copy.switchCollectionNone,
+      title: name,
+      onClick: () => setOpen(!open),
+      children: [busy === "select" || busy === "add" || view.kind === "opening" ? _jsx("span", {
+        className: "mdbase-collections-spinner",
+        "aria-hidden": "true"
+      }) : leading !== undefined && leading !== null ? _jsx("span", {
+        className: "mdbase-collections-trigger-icon",
+        "aria-hidden": "true",
+        children: leading
+      }) : variant === "icon" ? _jsx(CollectionsGlyph, {}) : null, variant !== "icon" && _jsx("span", {
+        className: "mdbase-collections-trigger-name",
+        children: name
+      }), variant === "full" && current && _jsx("span", {
+        className: "mdbase-collections-trigger-role",
+        children: current.roleLabel
+      }), _jsx("svg", {
+        className: "mdbase-collections-chevron",
+        viewBox: "0 0 16 16",
+        "aria-hidden": "true",
+        children: _jsx("path", {
+          d: "m4 6 4 4 4-4"
+        })
+      })]
+    }), open && (narrow ? _jsx(SwitcherSheet, {
+      id: panelId,
+      ui: ui,
+      onClose: close,
+      children: content
+    }) : _jsx(SwitcherPopover, {
+      id: panelId,
+      ui: ui,
+      anchorRef: anchor,
+      onClose: close,
+      children: content
+    })), _jsx(RowDialogs, {
+      ui: ui,
+      dialog: dialog,
+      onClose: () => {
+        returnFocus.current = true;
+        setDialog(null);
+      }
+    }), _jsx(SignOutDialog, {
+      ui: ui
+    })]
+  });
+}
+/** The switcher's list and actions, also shown inline by `CollectionPanel`. */
+export function SwitcherContent({
+  ui,
+  onDone,
+  onDialog
+}) {
+  const {
+    view,
+    copy,
+    say,
+    busy,
+    actions
+  } = ui;
+  const [query, setQuery] = useState("");
+  const [focused, setFocused] = useState(null);
+  const lists = useRef(null);
+  const listLabel = useId();
+  const app = ui.appOpen;
+  const sections = (ui.options.sections ?? []).filter(section => section.items.length > 0 || section.empty);
+  const needle = query.trim().toLocaleLowerCase();
+  const matches = name => !needle || name.toLocaleLowerCase().includes(needle);
+  const total = view.collections.length + sections.reduce((sum, section) => sum + section.items.length, 0);
+  const signIn = view.signedIn ? null : _jsxs(_Fragment, {
+    children: [_jsx("p", {
+      className: "mdbase-collections-lead",
+      children: say("signedOutLead")
+    }), _jsx("div", {
+      className: "mdbase-collections-actions",
+      children: _jsx(ActionButton, {
+        tone: "primary",
+        progress: busy === "sign_in" ? copy.addingCollection : null,
+        inert: busy !== null,
+        onClick: () => {
+          actions.signIn();
+          onDone();
+        },
+        children: copy.signIn
+      })
+    })]
+  });
+  const appSections = sections.map(section => _jsx(SwitcherSection, {
+    ui: ui,
+    section: section,
+    matches: matches,
+    focused: focused,
+    onFocusItem: setFocused,
+    onDone: onDone,
+    onDialog: onDialog
+  }, section.id));
+  if (!view.signedIn) {
+    return _jsxs("div", {
+      className: "mdbase-collections-switcher-content",
+      children: [signIn, appSections.length > 0 && _jsx("div", {
+        ref: lists,
+        className: "mdbase-collections-switcher-lists",
+        onKeyDown: moveAmongRadios,
+        children: appSections
+      })]
+    });
+  }
+  const rows = view.collections.filter(row => matches(row.name));
+  const isCurrent = row => row.current && !app;
+  const sdkKey = row => `sdk:${row.id}`;
+  const rovingId = rows.some(row => sdkKey(row) === focused) ? focused : rows.find(isCurrent) ?? rows[0] ? sdkKey(rows.find(isCurrent) ?? rows[0]) : null;
+  const shown = rows.length + sections.reduce((sum, section) => sum + section.items.filter(item => matches(item.name)).length, 0);
+  return _jsxs("div", {
+    className: "mdbase-collections-switcher-content",
+    children: [_jsxs("div", {
+      className: "mdbase-collections-switcher-header",
+      children: [_jsx("span", {
+        className: "mdbase-collections-eyebrow",
+        children: copy.collectionLabel
+      }), app ? _jsxs("span", {
+        className: "mdbase-collections-switcher-current",
+        children: [_jsx("strong", {
+          children: app.item.name
+        }), app.item.detail && _jsx("span", {
+          className: "mdbase-collections-row-meta",
+          children: app.item.detail
+        })]
+      }) : view.current ? _jsxs("span", {
+        className: "mdbase-collections-switcher-current",
+        children: [_jsx("strong", {
+          children: view.current.name
+        }), view.current.private && _jsx(PrivateMark, {
+          ui: ui
+        }), _jsx("span", {
+          className: "mdbase-collections-chip",
+          children: view.current.roleLabel
+        }), view.current.status && _jsx("span", {
+          className: "mdbase-collections-row-meta",
+          children: view.current.status
+        })]
+      }) : _jsx("span", {
+        className: "mdbase-collections-row-meta",
+        children: view.heading
+      })]
+    }), total >= FILTER_THRESHOLD && _jsx("input", {
+      className: "mdbase-collections-field mdbase-collections-filter",
+      type: "search",
+      inputMode: "search",
+      "aria-label": copy.findCollection,
+      placeholder: copy.findCollection,
+      value: query,
+      onChange: event => setQuery(event.target.value),
+      onKeyDown: event => {
+        if (event.key === "ArrowDown") {
+          event.preventDefault();
+          lists.current?.querySelector('[role="radio"][tabindex="0"]')?.focus();
+        }
+      }
+    }), _jsxs("div", {
+      ref: lists,
+      className: "mdbase-collections-switcher-lists",
+      onKeyDown: moveAmongRadios,
+      children: [view.collections.length > 0 && _jsxs(_Fragment, {
+        children: [_jsx("span", {
+          id: listLabel,
+          className: "mdbase-collections-visually-hidden",
+          children: copy.yourCollections
+        }), _jsx("div", {
+          role: "radiogroup",
+          "aria-labelledby": listLabel,
+          className: "mdbase-collections-switcher-list",
+          children: rows.map(row => {
+            const detailId = row.statusDetail ? `${listLabel}-${row.id}` : undefined;
+            const checked = isCurrent(row);
+            return _jsxs("div", {
+              className: "mdbase-collections-item",
+              children: [_jsxs("button", {
+                type: "button",
+                role: "radio",
+                "aria-checked": checked,
+                "aria-disabled": !row.available || undefined,
+                "aria-describedby": detailId,
+                tabIndex: sdkKey(row) === rovingId ? 0 : -1,
+                className: "mdbase-collections-row",
+                onFocus: () => setFocused(sdkKey(row)),
+                onClick: () => {
+                  if (!row.available || busy !== null) return;
+                  actions.select(row.id);
+                  onDone();
+                },
+                children: [_jsx(CollectionMark, {
+                  row: row
+                }), _jsx(RowCopy, {
+                  row: row,
+                  ui: ui,
+                  current: checked,
+                  ...(detailId ? {
+                    detailId
+                  } : {})
+                }), checked && _jsx(CheckGlyph, {})]
+              }), _jsx(RowMore, {
+                row: row,
+                ui: ui,
+                onDialog: onDialog,
+                tabbable: sdkKey(row) === rovingId
+              })]
+            }, row.id);
+          })
+        })]
+      }), appSections, needle && shown === 0 && _jsx("p", {
+        className: "mdbase-collections-empty",
+        children: say("noMatches", {
+          query: query.trim()
+        })
+      })]
+    }), ui.error && _jsx(NoticeBlock, {
+      notice: ui.error,
+      ui: ui,
+      variant: "inline"
+    }), _jsxs("div", {
+      className: "mdbase-collections-switcher-actions",
+      children: [app && _jsx(ActionButton, {
+        tone: "quiet",
+        inert: busy !== null,
+        onClick: () => {
+          actions.chooseAnother();
+          onDone();
+        },
+        children: copy.chooseAnother
+      }), _jsxs(ActionButton, {
+        tone: "quiet",
+        className: "is-add",
+        inert: busy !== null && busy !== "add",
+        progress: busy === "add" ? copy.addingCollection : null,
+        onClick: () => {
+          actions.addCollection();
+          onDone();
+        },
+        children: [_jsx("svg", {
+          viewBox: "0 0 16 16",
+          "aria-hidden": "true",
+          children: _jsx("path", {
+            d: "M8 3v10M3 8h10"
+          })
+        }), copy.addCollection]
+      }), view.links && _jsx("a", {
+        className: "mdbase-collections-link",
+        href: view.links.manageAccess,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: copy.manageAccess
+      })]
+    }), _jsx("div", {
+      className: "mdbase-collections-switcher-footer",
+      children: _jsx(AccountLine, {
+        ui: ui
+      })
+    })]
+  });
+}
+/** One app section as its own labelled radio group. */
+function SwitcherSection({
+  ui,
+  section,
+  matches,
+  focused,
+  onFocusItem,
+  onDone,
+  onDialog
+}) {
+  const label = useId();
+  const items = section.items.filter(item => matches(item.name));
+  if (section.items.length > 0 && items.length === 0) return null;
+  const key = id => `${section.id}:${id}`;
+  const roving = items.some(item => key(item.id) === focused) ? focused : key((items.find(item => item.current) ?? items[0])?.id ?? "");
+  return _jsxs("div", {
+    className: "mdbase-collections-switcher-section",
+    children: [_jsx("span", {
+      id: label,
+      className: "mdbase-collections-section-title",
+      children: section.title
+    }), items.length === 0 ? _jsx("p", {
+      className: "mdbase-collections-empty",
+      children: section.empty
+    }) : _jsx("div", {
+      role: "radiogroup",
+      "aria-labelledby": label,
+      className: "mdbase-collections-switcher-list",
+      children: items.map(item => _jsxs("div", {
+        className: "mdbase-collections-item",
+        children: [_jsxs("button", {
+          type: "button",
+          role: "radio",
+          "aria-checked": item.current === true,
+          "aria-disabled": item.disabled || undefined,
+          tabIndex: key(item.id) === roving ? 0 : -1,
+          className: "mdbase-collections-row",
+          onFocus: () => onFocusItem(key(item.id)),
+          onClick: () => {
+            if (item.disabled || ui.busy !== null) return;
+            ui.actions.selectItem(section, item);
+            onDone();
+          },
+          children: [_jsx(CollectionMark, {
+            row: item
+          }), _jsx(ItemCopy, {
+            item: item,
+            ui: ui
+          }), item.current && _jsx(CheckGlyph, {})]
+        }), _jsx(ItemMore, {
+          item: item,
+          ui: ui,
+          onDialog: onDialog,
+          tabbable: key(item.id) === roving
+        })]
+      }, item.id))
+    })]
+  });
+}
+/** Arrow keys within the focused row's radio group; Right and Left between a row and its menu button. */
+function moveAmongRadios(event) {
+  const target = event.target;
+  if (event.key === "ArrowRight" && target.getAttribute("role") === "radio") {
+    const more = target.parentElement?.querySelector(".mdbase-collections-more");
+    if (more) {
+      more.focus();
+      event.preventDefault();
+    }
+    return;
+  }
+  if (event.key === "ArrowLeft" && target.classList.contains("mdbase-collections-more")) {
+    target.parentElement?.querySelector('[role="radio"]')?.focus();
+    event.preventDefault();
+    return;
+  }
+  const group = target.closest('[role="radiogroup"]');
+  if (!group || !["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+  const radios = [...group.querySelectorAll('[role="radio"]')];
+  if (radios.length === 0) return;
+  event.preventDefault();
+  const index = radios.indexOf(target);
+  const from = index >= 0 ? index : radios.findIndex(radio => radio.parentElement?.contains(target));
+  const next = event.key === "Home" ? 0 : event.key === "End" ? radios.length - 1 : (from + (event.key === "ArrowDown" ? 1 : -1) + radios.length) % radios.length;
+  radios[next]?.focus();
+}
+/** Where focus starts in the list: the open collection, else the first group's row. */
+function firstRadio(root) {
+  return root.querySelector('[role="radio"][aria-checked="true"]') ?? root.querySelector('[role="radio"][tabindex="0"]');
+}
+function CheckGlyph() {
+  return _jsx("svg", {
+    className: "mdbase-collections-check",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true",
+    children: _jsx("path", {
+      d: "m3.5 8.5 3 3 6-7"
+    })
+  });
+}
+/**
+ * Wide screens: a non-modal dialog anchored to the trigger (or the app's
+ * anchor), in the top layer where supported. Pointer presses and focus on the
+ * anchor count as inside, so the trigger can toggle it.
+ */
+function SwitcherPopover({
+  id,
+  ui,
+  anchorRef,
+  onClose,
+  children
+}) {
+  const ref = useRef(null);
+  const closeRef = useRef(onClose);
+  closeRef.current = onClose;
+  useLayoutEffect(() => {
+    const panel = ref.current;
+    const anchor = anchorRef.current;
+    if (!panel || !anchor) return undefined;
+    if (typeof panel.showPopover === "function") panel.showPopover();
+    const box = anchor.getBoundingClientRect();
+    const width = Math.min(340, window.innerWidth - 16);
+    panel.style.width = `${width}px`;
+    const place = anchoredPlacement(box, {
+      width,
+      height: panel.scrollHeight
+    }, {
+      width: window.innerWidth,
+      height: window.innerHeight
+    }, {
+      gap: 6
+    });
+    panel.style.top = `${place.top}px`;
+    panel.style.left = `${place.left}px`;
+    panel.style.maxHeight = `${place.maxHeight}px`;
+    (firstRadio(panel) ?? panel.querySelector("button") ?? panel).focus({
+      preventScroll: true
+    });
+    return () => {
+      if (typeof panel.hidePopover === "function" && panel.matches(":popover-open")) panel.hidePopover();
+    };
+  }, [anchorRef]);
+  useEffect(() => {
+    const outside = event => {
+      const target = event.target;
+      if (target && !ref.current?.contains(target) && !anchorRef.current?.contains(target)) closeRef.current(false);
+    };
+    const resize = () => closeRef.current(false);
+    document.addEventListener("pointerdown", outside, true);
+    window.addEventListener("resize", resize);
+    return () => {
+      document.removeEventListener("pointerdown", outside, true);
+      window.removeEventListener("resize", resize);
+    };
+  }, [anchorRef]);
+  return _jsx("div", {
+    ref: ref,
+    id: id,
+    className: "mdbase-collections-popover",
+    popover: "manual",
+    role: "dialog",
+    "aria-label": ui.copy.collectionsLabel,
+    tabIndex: -1,
+    onKeyDown: event => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopPropagation();
+      onClose(true);
+    },
+    onBlur: event => {
+      const next = event.relatedTarget;
+      if (next && !ref.current?.contains(next) && !anchorRef.current?.contains(next)) onClose(false);
+    },
+    children: children
+  });
+}
+/** Narrow screens: a modal bottom sheet on the native <dialog>. */
+function SwitcherSheet({
+  id,
+  ui,
+  onClose,
+  children
+}) {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    const sheet = ref.current;
+    if (!sheet) return undefined;
+    if (!sheet.open) {
+      if (typeof sheet.showModal === "function") sheet.showModal();else sheet.setAttribute("open", "");
+    }
+    firstRadio(sheet)?.focus({
+      preventScroll: true
+    });
+    return () => {
+      if (sheet.open && typeof sheet.close === "function") sheet.close();
+    };
+  }, []);
+  return _jsx("dialog", {
+    ref: ref,
+    id: id,
+    className: "mdbase-collections mdbase-collections-sheet",
+    "aria-label": ui.copy.collectionsLabel,
+    onCancel: event => {
+      event.preventDefault();
+      onClose(true);
+    },
+    onClick: event => {
+      if (event.target === event.currentTarget) onClose(true);
+    },
+    children: _jsxs("div", {
+      className: "mdbase-collections-sheet-body",
+      children: [_jsxs("div", {
+        className: "mdbase-collections-sheet-header",
+        children: [_jsx("span", {
+          className: "mdbase-collections-sheet-title",
+          children: ui.copy.collectionsLabel
+        }), _jsx("button", {
+          type: "button",
+          className: "mdbase-collections-more",
+          "aria-label": ui.copy.close,
+          onClick: () => onClose(true),
+          children: _jsx("svg", {
+            viewBox: "0 0 16 16",
+            "aria-hidden": "true",
+            children: _jsx("path", {
+              d: "m4 4 8 8M12 4l-8 8"
+            })
+          })
+        })]
+      }), children]
+    })
+  });
+}
+function CollectionsGlyph() {
+  return _jsx("svg", {
+    className: "mdbase-collections-glyph",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true",
+    children: _jsx("path", {
+      d: "M2.5 4.5h4l1.2 1.5h5.8v6.5h-11z"
+    })
+  });
+}
+function subscribeNarrow(listener) {
+  const query = typeof window.matchMedia === "function" ? window.matchMedia(NARROW) : null;
+  query?.addEventListener("change", listener);
+  return () => query?.removeEventListener("change", listener);
+}
+function useNarrow() {
+  return useSyncExternalStore(subscribeNarrow, () => typeof window.matchMedia === "function" && window.matchMedia(NARROW).matches, () => false);
+}

package/dist/collections/SetupReview.d.ts

@@ -0,0 +1,9 @@
+import { type JSX } from "react";
+import type { CollectionUi } from "./use-collection-ui.js";
+/**
+ * Reviewable setup: `setup.plan()` (read-only, so it starts at once), then
+ * `setup.apply(plan)` only from the person's click. Never configures silently.
+ */
+export declare function SetupReview({ ui }: {
+    readonly ui: CollectionUi;
+}): JSX.Element;