@colixsystems/widget-sdk 0.245.0 → 0.247.0

package/dist/people-picker-view.js

@@ -0,0 +1,247 @@
+// The ONE implementation behind the `<PeoplePicker>` SDK primitive: a
+// searchable `<Select>` over the workspace's users, its groups, or one
+// table's records, read through the SDK's own directory and datastore hooks.
+// The platform bindings (`people-picker.js` / `people-picker.native.js`)
+// differ only in which host's `<Select>` and `<Avatar>` they pass.
+//
+// Nothing is fetched until the sheet first opens; each pause in typing asks
+// the server again. A saved choice the page does not hold is looked up once
+// by id, so the trigger names it and never shows the raw id.
+
+import React from "react";
+import {
+  useDatastoreQuery,
+  useDatastoreRecord,
+  useDatastoreSchema,
+  useDirectory,
+  useGroups,
+} from "./hooks.js";
+import {
+  answersQuery,
+  lookupableIds,
+  offeredRows,
+  pageQuery,
+  pickedIds,
+  pickedLabels,
+  pickerSource,
+  queueLookups,
+  recordLabelColumn,
+  rememberRows,
+  rowLabel,
+  settleLookup,
+  unresolvedIds,
+} from "./people-picker-logic.js";
+
+const h = React.createElement;
+const NO_ROWS = Object.freeze([]);
+const NO_LOOKUPS = Object.freeze({ pending: [], next: 0 });
+
+function serialize(query) {
+  try {
+    return JSON.stringify(query);
+  } catch (_e) {
+    return null;
+  }
+}
+
+/**
+ * Bind the shared people picker to one host's `<Select>` and `<Avatar>`.
+ *
+ * @param {{View: any, Select: any, Avatar: any}} rn
+ */
+export function makePeoplePicker(rn) {
+  const { View, Select, Avatar } = rn;
+
+  // Hands one hook result up once it answers the current query.
+  function useReport(onReport, query, rows, loading, error, sent) {
+    const queryKey = serialize(query);
+    const last = React.useRef(null);
+    React.useEffect(() => {
+      const now = { queryKey, rows, error, loading };
+      if (!answersQuery(last.current, now)) return;
+      last.current = now;
+      onReport({ rows: Array.isArray(rows) ? rows : NO_ROWS, loading, error: error || null, query: sent });
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [queryKey, rows, loading, error, sent]);
+  }
+
+  function UsersPage({ query, sent, onReport }) {
+    const { users, loading, error } = useDirectory(query);
+    useReport(onReport, query, users, loading, error, sent);
+    return null;
+  }
+
+  function GroupsPage({ query, sent, onReport }) {
+    const { groups, loading, error } = useGroups(query);
+    useReport(onReport, query, groups, loading, error, sent);
+    return null;
+  }
+
+  function RecordsPage({ table, query, sent, onReport }) {
+    const { data, loading, fetching, error } = useDatastoreQuery(table, query);
+    useReport(onReport, query, data, loading || fetching, error, sent);
+    return null;
+  }
+
+  // A lookup reports once it settles; a failed one names nothing.
+  function useResolved(onResolved, lookup, settled, rows) {
+    React.useEffect(() => {
+      if (settled) onResolved(lookup, rows || NO_ROWS);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [settled]);
+  }
+
+  function UsersLookup({ lookup, onResolved }) {
+    const { users, loading, error } = useDirectory({ ids: lookup.ids, limit: lookup.ids.length });
+    useResolved(onResolved, lookup, !loading, error ? null : users);
+    return null;
+  }
+
+  function GroupsLookup({ lookup, onResolved }) {
+    const { groups, loading, error } = useGroups({ ids: lookup.ids, limit: lookup.ids.length });
+    useResolved(onResolved, lookup, !loading, error ? null : groups);
+    return null;
+  }
+
+  // The datastore list filters no system `id`, so each saved record is read alone.
+  function RecordLookup({ table, lookup, onResolved }) {
+    const { data, loading, error } = useDatastoreRecord(table, lookup.ids[0]);
+    useResolved(onResolved, lookup, !loading, error || !data ? null : [data]);
+    return null;
+  }
+
+  const LOOKUPS = { users: UsersLookup, groups: GroupsLookup, records: RecordLookup };
+
+  function avatarFor(source, row, label, avatarColumn) {
+    if (source === "records") {
+      if (!avatarColumn) return undefined;
+      const fileId = typeof row[avatarColumn] === "string" ? row[avatarColumn] : null;
+      return h(Avatar, { name: label, fileId, seed: String(row.id), size: "sm" });
+    }
+    return h(Avatar, {
+      name: label,
+      seed: String(row.id),
+      size: "sm",
+      shape: source === "groups" ? "rounded" : "circle",
+    });
+  }
+
+  // The row's name is its text; the picture only decorates it.
+  function decoration(node) {
+    if (!node) return undefined;
+    return h(
+      View,
+      {
+        "aria-hidden": true,
+        importantForAccessibility: "no-hide-descendants",
+        accessibilityElementsHidden: true,
+      },
+      node,
+    );
+  }
+
+  function SourcePicker(props) {
+    const {
+      source,
+      table,
+      labelColumn,
+      avatarColumn,
+      groupId,
+      filter,
+      excludeIds,
+      pageSize,
+      showAvatars = true,
+      unknownText = "Unknown",
+      loadingText = "Loading…",
+      multiple = false,
+      value,
+      values,
+      forwardedRef,
+      ...rest
+    } = props;
+    const [sent, setSent] = React.useState(null);
+    const [page, setPage] = React.useState({ rows: NO_ROWS, loading: false, error: null, query: null });
+    const [knownRows, setKnownRows] = React.useState(() => new Map());
+    const [attempted, setAttempted] = React.useState(() => new Set());
+    const [lookups, setLookups] = React.useState(NO_LOOKUPS);
+
+    const how = { source, labelColumn, unknownText };
+    const nameOf = (row) => rowLabel(row, how);
+    const toOption = (row) => {
+      const label = nameOf(row);
+      return {
+        value: row.id,
+        label,
+        ...(showAvatars ? { leading: decoration(avatarFor(source, row, label, avatarColumn)) } : null),
+      };
+    };
+
+    const onReport = React.useCallback((result) => {
+      setPage(result);
+      if (result.rows.length) setKnownRows((own) => rememberRows(own, result.rows));
+    }, []);
+    const onResolved = React.useCallback((lookup, rows) => {
+      setKnownRows((own) => rememberRows(own, rows));
+      setAttempted((own) => new Set([...own, ...lookup.ids.map(String)]));
+      setLookups((own) => settleLookup(own, lookup.key));
+    }, []);
+
+    // A record source with no table bound yet has nothing to read.
+    const readable = source !== "records" || (typeof table === "string" && table !== "");
+    const ids = pickedIds({ multiple, value, values });
+    const missing = readable ? unresolvedIds(ids, knownRows, attempted) : [];
+    const { lookup, unknown } = lookupableIds(missing, source);
+    const named = unknown.length ? new Set([...attempted, ...unknown.map(String)]) : attempted;
+    const query = sent === null || !readable ? null : pageQuery(source, { query: sent, pageSize, groupId, filter });
+    const options = offeredRows(page.rows, excludeIds).map(toOption);
+    const selectedOptions = pickedLabels(ids, { knownRows, attempted: named, nameOf, loadingText, unknownText }).map(
+      (own) => (own.row ? toOption(own.row) : own),
+    );
+
+    const lookupKey = lookup.join(",");
+    React.useEffect(() => {
+      if (lookup.length) setLookups((own) => queueLookups(own, lookup, source === "records" ? 1 : undefined));
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [lookupKey]);
+
+    const pages = { users: UsersPage, groups: GroupsPage, records: RecordsPage };
+    const Lookup = LOOKUPS[source];
+
+    return h(
+      React.Fragment,
+      null,
+      h(Select, {
+        ...rest,
+        ref: forwardedRef,
+        multiple,
+        value,
+        values,
+        options,
+        selectedOptions,
+        onSearch: setSent,
+        loading: sent !== null && (page.query !== sent || page.loading),
+        optionsError: !!page.error,
+        loadingText,
+      }),
+      query ? h(pages[source], { table, query, sent, onReport }) : null,
+      ...lookups.pending.map((own) => h(Lookup, { key: own.key, table, lookup: own, onResolved })),
+    );
+  }
+
+  // A record source names rows by a column, so it waits for the table's schema.
+  function RecordsPicker(props) {
+    const { schema } = useDatastoreSchema(props.table || null);
+    return h(SourcePicker, { ...props, labelColumn: recordLabelColumn(schema, props.labelColumn) });
+  }
+
+  const PeoplePicker = React.forwardRef(function PeoplePicker(props, ref) {
+    const source = pickerSource(props.source);
+    const own = { ...props, source, forwardedRef: ref };
+    // Changing the source starts a fresh picker rather than mixing rows.
+    if (source === "records") return h(RecordsPicker, { ...own, key: `records:${props.table}` });
+    return h(SourcePicker, { ...own, key: source });
+  });
+
+  PeoplePicker.displayName = "PeoplePicker";
+  return PeoplePicker;
+}

package/dist/people-picker.js

@@ -0,0 +1,11 @@
+// `<PeoplePicker>` (web). Binds ./people-picker-view.js to the web `<Select>`
+// and `<Avatar>`; see ./primitives.js for why not the bare specifier.
+
+import * as ReactNative from "react-native-web";
+import { makePeoplePicker } from "./people-picker-view.js";
+import { Select } from "./select.js";
+import { Avatar } from "./detail-parts.js";
+
+const { View } = ReactNative;
+
+export const PeoplePicker = makePeoplePicker({ View, Select, Avatar });

package/dist/people-picker.native.js

@@ -0,0 +1,9 @@
+// `<PeoplePicker>` (native). Binds ./people-picker-view.js to the native
+// `<Select>` and `<Avatar>`; only the imports differ from ./people-picker.js.
+
+import { View } from "react-native";
+import { makePeoplePicker } from "./people-picker-view.js";
+import { Select } from "./select.native.js";
+import { Avatar } from "./detail-parts.native.js";
+
+export const PeoplePicker = makePeoplePicker({ View, Select, Avatar });

package/dist/popover-tokens.js

@@ -0,0 +1,145 @@
+// The values `<Menu>`, `<Popover>` and `<Tooltip>` paint and place with, and
+// the `popover` scope look `<Select>`'s option sheet shares. No renderer and
+// no React here, so both hosts share it and the node suite tests it.
+
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+import { isNarrowWidth } from "./container-width.js";
+import { overlayCornerStyle } from "./overlay-tokens.js";
+import { normaliseThemeComponents } from "./theme-components.js";
+
+export const POPOVER_PLACEMENTS = Object.freeze(["bottom", "top"]);
+export const POPOVER_BORDER_WIDTH = 1;
+
+export const POPOVER_DEFAULTS = Object.freeze({
+  // Between the trigger and the panel.
+  gap: 4,
+  // The closest a panel comes to a screen edge.
+  screenMargin: 8,
+  menuMinWidth: 180,
+  menuMaxWidth: 320,
+  popoverMaxWidth: 360,
+  tooltipMaxWidth: 240,
+  // A pointer passing over must not flash a tooltip; leaving waits a beat so
+  // the pointer can cross the gap onto the bubble.
+  tooltipShowDelayMs: 400,
+  tooltipHideDelayMs: 150,
+});
+
+// A themed shadow replaces the overlay's, so a lower level must zero each key.
+const NO_SHADOW = Object.freeze({ shadowOpacity: 0, shadowRadius: 0, elevation: 0 });
+
+export function normalisePopoverPlacement(placement) {
+  return POPOVER_PLACEMENTS.includes(placement) ? placement : "bottom";
+}
+
+/** The theme's validated `popover` scope (Design > Components > Dropdown menus). */
+export function popoverThemeScope(theme) {
+  const components = theme && typeof theme === "object" ? theme.components : null;
+  return normaliseThemeComponents({ popover: components && components.popover }).popover || {};
+}
+
+/**
+ * Resolve the `popover` scope. `radius` and `shadow` stay null while unset,
+ * so the panel keeps the `<Overlay>` look every option sheet had before.
+ *
+ * @param {object} theme — the resolved workspace theme (`useTheme()` shape).
+ */
+export function resolvePopoverTokens(theme) {
+  const base = theme && typeof theme === "object" ? theme : DEFAULT_THEME_TOKENS;
+  const colors = base.colors || DEFAULT_THEME_TOKENS.colors;
+  const levels = base.elevation || DEFAULT_THEME_TOKENS.elevation;
+  const scope = popoverThemeScope(base);
+  return {
+    background: scope.background || colors.surface,
+    textColor: scope.textColor || colors.onSurface,
+    borderColor: scope.borderColor || colors.border,
+    radius: scope.radius ?? null,
+    shadow: scope.shadow ? { ...NO_SHADOW, ...levels[scope.shadow] } : null,
+    dangerColor: colors.danger || DEFAULT_THEME_TOKENS.colors.danger,
+    mutedColor: colors.onSurfaceMuted || DEFAULT_THEME_TOKENS.colors.onSurfaceMuted,
+  };
+}
+
+/**
+ * The style a `popover`-scope panel lays over the `<Overlay>` panel.
+ *
+ * @param {object} popover — `resolvePopoverTokens()`'s result.
+ * @param {"dialog"|"sheet"} presentation — a sheet rounds its top corners only.
+ */
+export function popoverPanelStyle(popover, presentation) {
+  return {
+    backgroundColor: popover.background,
+    borderWidth: POPOVER_BORDER_WIDTH,
+    borderColor: popover.borderColor,
+    ...(popover.radius === null ? null : overlayCornerStyle(popover.radius, presentation)),
+    ...popover.shadow,
+  };
+}
+
+/**
+ * Whether an anchored surface opens as a bottom sheet instead: always on a
+ * device, where a sheet is the platform's own menu, and in a narrow window.
+ *
+ * @param {string} os — `Platform.OS`.
+ * @param {number} windowWidth
+ */
+export function presentsAsSheet(os, windowWidth) {
+  return os !== "web" || isNarrowWidth(windowWidth);
+}
+
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(value, max));
+}
+
+/**
+ * Where a panel goes beside its trigger, in window coordinates. It opens on
+ * the preferred side, flips to the other when that side is short of room and
+ * the other has more, lines up with the trigger's start edge (its end edge
+ * when that would run off screen), and never leaves the screen margin.
+ *
+ * @param {{x: number, y: number, width: number, height: number}} anchor
+ * @param {{width: number, height: number}} panel
+ * @param {{width: number, height: number}} viewport
+ * @param {{placement?: string, gap?: number, margin?: number}} [options]
+ * @returns {{top: number, left: number, placement: "bottom"|"top", maxHeight: number}}
+ */
+export function placePopover(anchor, panel, viewport, options = {}) {
+  const gap = options.gap ?? POPOVER_DEFAULTS.gap;
+  const margin = options.margin ?? POPOVER_DEFAULTS.screenMargin;
+  const preferred = normalisePopoverPlacement(options.placement);
+  const below = viewport.height - margin - (anchor.y + anchor.height + gap);
+  const above = anchor.y - gap - margin;
+  const fitsPreferred = (preferred === "bottom" ? below : above) >= panel.height;
+  const flips = !fitsPreferred && (preferred === "bottom" ? above > below : below > above);
+  const placement = flips ? (preferred === "bottom" ? "top" : "bottom") : preferred;
+  const room = Math.max(0, placement === "bottom" ? below : above);
+  const height = Math.min(panel.height, room);
+  const top =
+    placement === "bottom" ? anchor.y + anchor.height + gap : anchor.y - gap - height;
+
+  const endAligned = anchor.x + anchor.width - panel.width;
+  const startFits = anchor.x + panel.width <= viewport.width - margin;
+  const left = clamp(
+    startFits ? anchor.x : endAligned,
+    margin,
+    Math.max(margin, viewport.width - margin - panel.width),
+  );
+  return { top: Math.max(margin, top), left, placement, maxHeight: room };
+}
+
+/**
+ * A `<Menu>`'s items as it draws them: falsy entries and entries with no
+ * label dropped, `disabled` a boolean, and a stable `key` on each.
+ *
+ * @param {Array<object|null|false|undefined>} items
+ */
+export function menuItemList(items) {
+  const hasLabel = (item) => typeof item.label === "string" ? item.label !== "" : typeof item.label === "number";
+  return (Array.isArray(items) ? items : [])
+    .filter((item) => item && typeof item === "object" && hasLabel(item))
+    .map((item, index) => ({
+      ...item,
+      disabled: Boolean(item.disabled),
+      key: item.key !== undefined && item.key !== null ? String(item.key) : `${index}:${item.label}`,
+    }));
+}

package/dist/popover-view.js

@@ -0,0 +1,252 @@
+// The ONE implementation behind `<Popover>`, and the anchored surface that
+// `<Menu>` and `<Tooltip>` open with. It is drawn in `<Overlay>`, so no card
+// or scroll container clips it on either host. It sits beside its trigger,
+// measured with `measureInWindow`, and flips at the screen edge. On a device
+// and in a narrow window it is a bottom sheet instead.
+//
+// Bound per host by popover.js / popover.native.js, which differ only in
+// where the primitives come from.
+
+import React from "react";
+import { ThemeScope, useHostTheme } from "./hooks.js";
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+import {
+  POPOVER_BORDER_WIDTH,
+  POPOVER_DEFAULTS,
+  placePopover,
+  popoverPanelStyle,
+  popoverThemeScope,
+  presentsAsSheet,
+  resolvePopoverTokens,
+} from "./popover-tokens.js";
+import { compositeOver } from "./readable-ink.js";
+import { surfaceAwareTheme } from "./surface-theme.js";
+
+const h = React.createElement;
+const UNMEASURABLE = "unmeasurable";
+const HIDDEN = Object.freeze({ opacity: 0 });
+const useNoInsets = () => null;
+const sameSize = (a, b) => Math.abs(a.width - b.width) <= 1 && Math.abs(a.height - b.height) <= 1;
+
+/** The ref an element was created with, on React 18 and on React 19. */
+export function elementRef(element) {
+  const major = Number(String(React.version).split(".")[0]);
+  return major >= 19 ? element.props.ref : element.ref;
+}
+
+/** One callback ref that feeds every ref given, function or object. */
+export function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(node);
+      else if (ref && typeof ref === "object") ref.current = node;
+    }
+  };
+}
+
+/**
+ * The trigger element, cloned so a press opens the surface and the surface
+ * can measure it. Its own `onPress` still runs first.
+ */
+export function triggerWith(trigger, { anchorRef, onOpen, extraProps }) {
+  if (!React.isValidElement(trigger)) return null;
+  const own = trigger.props.onPress;
+  return React.cloneElement(trigger, {
+    ref: mergeRefs(elementRef(trigger), anchorRef),
+    onPress: (...args) => {
+      if (typeof own === "function") own(...args);
+      onOpen();
+    },
+    ...extraProps,
+  });
+}
+
+// The trigger's window rectangle, measured each time the surface opens.
+function useAnchorRect(anchorRef, open, windowWidth, windowHeight) {
+  const [rect, setRect] = React.useState(null);
+  React.useEffect(() => {
+    if (!open) {
+      setRect(null);
+      return undefined;
+    }
+    const node = anchorRef.current;
+    if (!node || typeof node.measureInWindow !== "function") {
+      setRect(UNMEASURABLE);
+      return undefined;
+    }
+    let live = true;
+    node.measureInWindow((x, y, width, height) => {
+      if (live) setRect({ x, y, width, height });
+    });
+    return () => {
+      live = false;
+    };
+  }, [anchorRef, open, windowWidth, windowHeight]);
+  return rect;
+}
+
+// A popover scope background re-inks what is drawn on it, as `<Modal>` does.
+function usePanelTheme(theme) {
+  return React.useMemo(() => {
+    const { background } = popoverThemeScope(theme);
+    if (!background) return null;
+    const surface = (theme.colors || DEFAULT_THEME_TOKENS.colors).surface;
+    return surfaceAwareTheme(theme, compositeOver(background, surface));
+  }, [theme]);
+}
+
+/**
+ * Bind the shared surface and `<Popover>` to one platform's primitives.
+ *
+ * @param {{View: any, Platform: any, useWindowDimensions: () => {width: number,
+ *   height: number}, useSafeAreaInsets?: () => ({bottom: number}|null)}} rn
+ * @param {any} Overlay — the host's bound `<Overlay>`.
+ */
+export function makePopover(rn, Overlay) {
+  const { View, Platform, useWindowDimensions } = rn;
+  const useSafeAreaInsets = rn.useSafeAreaInsets || useNoInsets;
+
+  /**
+   * @internal The panel `<Popover>`, `<Menu>` and `<Tooltip>` open. `passive`
+   * (a hovered tooltip) never takes focus or blocks the pointer. `onDismiss`
+   * runs once a closed panel has left the screen (see `<Overlay>`).
+   */
+  function AnchoredSurface({
+    visible,
+    onRequestClose,
+    onDismiss,
+    anchorRef,
+    placement,
+    passive = false,
+    padding = 0,
+    minWidth,
+    maxWidth,
+    accessibilityLabel,
+    closeAccessibilityLabel,
+    testID,
+    children,
+  }) {
+    const theme = useHostTheme() || DEFAULT_THEME_TOKENS;
+    const { width, height } = useWindowDimensions();
+    const insets = useSafeAreaInsets();
+    const popover = React.useMemo(() => resolvePopoverTokens(theme), [theme]);
+    const panelTheme = usePanelTheme(theme);
+    const rect = useAnchorRect(anchorRef, visible, width, height);
+    const [size, setSize] = React.useState(null);
+    React.useEffect(() => setSize(null), [visible]);
+
+    // Still rendered while closed, so the overlay can report its dismissal.
+    if (!visible) return h(Overlay, { visible: false, onDismiss });
+    const body = h(ThemeScope, { theme: panelTheme }, children);
+    const shared = { visible: true, onRequestClose, onDismiss, accessibilityLabel, testID };
+    if (closeAccessibilityLabel) shared.closeAccessibilityLabel = closeAccessibilityLabel;
+
+    if (passive && rect === UNMEASURABLE) return null;
+    if (!passive && (presentsAsSheet(Platform.OS, width) || rect === UNMEASURABLE)) {
+      const bottom = (insets && insets.bottom) || 0;
+      return h(
+        Overlay,
+        {
+          ...shared,
+          presentation: "sheet",
+          style: { ...popoverPanelStyle(popover, "sheet"), padding, paddingBottom: padding + bottom },
+        },
+        body,
+      );
+    }
+
+    // Placed once the panel's natural size is known, and again when it
+    // changes (content that grows must not cover the trigger); hidden until then.
+    const place =
+      rect && rect !== UNMEASURABLE && size
+        ? placePopover(rect, size, { width, height }, { placement })
+        : null;
+    const onLayout = (event) => {
+      const { layout } = event.nativeEvent;
+      const border = 2 * POPOVER_BORDER_WIDTH;
+      const next = { width: layout.width + border, height: layout.height + border };
+      setSize((own) => (own && sameSize(own, next) ? own : next));
+    };
+    return h(
+      Overlay,
+      {
+        ...shared,
+        passive,
+        dismissOnBackdropPress: !passive,
+        backdropAccessible: false,
+        anchoredAt: place ? { top: place.top, left: place.left } : { top: 0, left: 0 },
+        style: [
+          { ...popoverPanelStyle(popover, "dialog"), padding: 0, minWidth, maxWidth },
+          place ? { maxHeight: place.maxHeight } : HIDDEN,
+        ],
+      },
+      h(View, { onLayout, style: { padding, flexShrink: 1 } }, body),
+    );
+  }
+
+  /**
+   * Free content beside a trigger: a filter form, a colour swatch picker, a
+   * detail card. A press on `trigger` opens it; the backdrop, Escape (web)
+   * and the Android back button close it.
+   *
+   * @param {object} props
+   * @param {any} props.trigger — the pressable element that opens it.
+   * @param {any|((api: {close: () => void}) => any)} props.children
+   * @param {boolean} [props.visible] — set it to control the popover.
+   * @param {(visible: boolean) => void} [props.onVisibleChange]
+   * @param {"bottom"|"top"} [props.placement] — default "bottom"; flips.
+   * @param {string} [props.accessibilityLabel] — names the panel.
+   * @param {string} [props.closeAccessibilityLabel] — the sheet backdrop's name.
+   * @param {string} [props.testID] — on the panel.
+   */
+  function Popover({
+    trigger,
+    children,
+    visible,
+    onVisibleChange,
+    placement = "bottom",
+    accessibilityLabel,
+    closeAccessibilityLabel,
+    testID,
+  }) {
+    const theme = useHostTheme() || DEFAULT_THEME_TOKENS;
+    const anchorRef = React.useRef(null);
+    const [ownOpen, setOwnOpen] = React.useState(false);
+    const controlled = typeof visible === "boolean";
+    const open = controlled ? visible : ownOpen;
+    const setOpen = (next) => {
+      if (!controlled) setOwnOpen(next);
+      if (typeof onVisibleChange === "function") onVisibleChange(next);
+    };
+    const close = () => setOpen(false);
+    const spacing = theme.spacing || DEFAULT_THEME_TOKENS.spacing;
+
+    return h(
+      React.Fragment,
+      null,
+      triggerWith(trigger, {
+        anchorRef,
+        onOpen: () => setOpen(true),
+        extraProps: { "aria-haspopup": "dialog", "aria-expanded": open },
+      }),
+      h(
+        AnchoredSurface,
+        {
+          visible: open,
+          onRequestClose: close,
+          anchorRef,
+          placement,
+          padding: spacing.md,
+          maxWidth: POPOVER_DEFAULTS.popoverMaxWidth,
+          accessibilityLabel,
+          closeAccessibilityLabel,
+          testID,
+        },
+        typeof children === "function" ? children({ close }) : children,
+      ),
+    );
+  }
+
+  Popover.displayName = "Popover";
+  return { Popover, AnchoredSurface };
+}

package/dist/popover.js

@@ -0,0 +1,23 @@
+// `<Popover>`, `<Menu>` and `<Tooltip>` (web). Bind ./popover-view.js,
+// ./menu-view.js and ./tooltip-view.js to react-native-web and the web
+// `<Overlay>`; see ./primitives.js for why not the bare specifier.
+
+import * as ReactNative from "react-native-web";
+import { makePopover } from "./popover-view.js";
+import { makeMenu } from "./menu-view.js";
+import { makeTooltip } from "./tooltip-view.js";
+import { Overlay } from "./overlay.js";
+
+const primitives = {
+  View: ReactNative.View,
+  Text: ReactNative.Text,
+  Pressable: ReactNative.Pressable,
+  ScrollView: ReactNative.ScrollView,
+  Platform: ReactNative.Platform,
+  useWindowDimensions: ReactNative.useWindowDimensions,
+};
+
+const { Popover, AnchoredSurface } = makePopover(primitives, Overlay);
+export { Popover };
+export const Menu = makeMenu(primitives, AnchoredSurface);
+export const Tooltip = makeTooltip(primitives, AnchoredSurface);