@colixsystems/widget-sdk 0.246.0 → 0.248.0

package/dist/index.js

@@ -112,6 +112,10 @@ export {
   widthTier,
   WIDE_WIDTH_PX,
 } from "./container-width.js";
+// Balanced lines of cells sized from the grid's own measured width.
+export { Grid } from "./grid.js";
+// A form laid out in width tiers: fields, paired rows, sections, actions.
+export { Form, FieldRow, FormSection, FormActions, FormField } from "./form.js";
 // REQ-WSDK-PLATFORM §6 — Tier A hooks. Each ships in a per-platform file
 // (./clipboard.js / .native.js, ./toast.js / .native.js); index.js picks
 // the web variant and index.native.js picks the native variant.
@@ -237,6 +241,8 @@ export {
 export { insertAtCaret, pushRecentEmoji } from "./emoji-picker-tokens.js";
 // Themed list building blocks; rows follow the theme's `list` scope.
 export { List, ListRow, ListHeader, EmptyState } from "./list.js";
+// A record list in three width tiers: stacked cards, cards, sticky-header columns.
+export { DataTable } from "./data-table.js";
 // Themed detail parts; the stock Badge/Avatar/Progress/Stat/Divider wrap these.
 export { Badge, Avatar, Progress, Stat, Divider } from "./detail-parts.js";
 export { initialsFor } from "./initials.js";
@@ -280,6 +286,10 @@ export { Checkbox } from "./checkbox.js";
 export { Switch } from "./switch.js";
 export { Select } from "./select.js";
 export { SearchField } from "./search-field.js";
+// A searchable `<Select>` of users, groups or one table's records.
+export { PeoplePicker } from "./people-picker.js";
+// Search plus facet dropdowns, one toolbar row or a sheet by width.
+export { FilterBar } from "./filter-bar.js";
 // Pick one of a short visible list; `muted` scope, or `tabs` when segmented.
 export { RadioGroup } from "./radio-group.js";
 // Space for a control whose role is not a button; a no-op on native.
@@ -296,10 +306,15 @@ export { Modal } from "./modal.js";
 export { ConfirmDialog } from "./confirm-dialog.js";
 // Themed filter chips, tags and pills; follow the theme's `chip` scope.
 export { Chip, ChipGroup } from "./chip.js";
+// Themed bar, line, area and donut charts; follow the theme's `chart` scope.
+export { Chart } from "./chart.js";
+export { chartColors } from "./chart-tokens.js";
 // A themed file chooser on `<FilePicker>`; follows the theme's `muted` scope.
 export { FileUpload } from "./file-upload.js";
 // Anchored actions, content and labels; follow the theme's `popover` scope.
 export { Menu, Popover, Tooltip } from "./popover.js";
+// Rows reordered and cards moved between columns, by drag or by move options.
+export { SortableList, Board } from "./sortable.js";
 // The semantic text tiers, shared with the built-in widgets.
 export {
   textRoleStyle,

package/dist/index.native.js

@@ -112,6 +112,10 @@ export {
   widthTier,
   WIDE_WIDTH_PX,
 } from "./container-width.js";
+// Balanced lines of cells sized from the grid's own measured width.
+export { Grid } from "./grid.native.js";
+// A form laid out in width tiers: fields, paired rows, sections, actions.
+export { Form, FieldRow, FormSection, FormActions, FormField } from "./form.native.js";
 // REQ-WSDK-PLATFORM §6 — Tier A hooks (native variants).
 export { useClipboard, ClipboardError } from "./clipboard.native.js";
 export { useToast } from "./toast.native.js";
@@ -230,6 +234,8 @@ export {
 export { insertAtCaret, pushRecentEmoji } from "./emoji-picker-tokens.js";
 // Themed list building blocks; rows follow the theme's `list` scope.
 export { List, ListRow, ListHeader, EmptyState } from "./list.native.js";
+// A record list in three width tiers: stacked cards, cards, sticky-header columns.
+export { DataTable } from "./data-table.native.js";
 // Themed detail parts; the stock Badge/Avatar/Progress/Stat/Divider wrap these.
 export { Badge, Avatar, Progress, Stat, Divider } from "./detail-parts.native.js";
 export { initialsFor } from "./initials.js";
@@ -273,6 +279,10 @@ export { Checkbox } from "./checkbox.native.js";
 export { Switch } from "./switch.native.js";
 export { Select } from "./select.native.js";
 export { SearchField } from "./search-field.native.js";
+// A searchable `<Select>` of users, groups or one table's records.
+export { PeoplePicker } from "./people-picker.native.js";
+// Search plus facet dropdowns, one toolbar row or a sheet by width.
+export { FilterBar } from "./filter-bar.native.js";
 // Pick one of a short visible list; `muted` scope, or `tabs` when segmented.
 export { RadioGroup } from "./radio-group.native.js";
 // Space for a control whose role is not a button; a no-op on native.
@@ -289,10 +299,15 @@ export { Modal } from "./modal.native.js";
 export { ConfirmDialog } from "./confirm-dialog.native.js";
 // Themed filter chips, tags and pills; follow the theme's `chip` scope.
 export { Chip, ChipGroup } from "./chip.native.js";
+// Themed bar, line, area and donut charts; follow the theme's `chart` scope.
+export { Chart } from "./chart.native.js";
+export { chartColors } from "./chart-tokens.js";
 // A themed file chooser on `<FilePicker>`; follows the theme's `muted` scope.
 export { FileUpload } from "./file-upload.native.js";
 // Anchored actions, content and labels; follow the theme's `popover` scope.
 export { Menu, Popover, Tooltip } from "./popover.native.js";
+// Rows reordered and cards moved between columns, by drag or by move options.
+export { SortableList, Board } from "./sortable.native.js";
 // The semantic text tiers, shared with the built-in widgets.
 export {
   textRoleStyle,

package/dist/menu-view.js

@@ -140,8 +140,11 @@ export function makeMenu(rn, AnchoredSurface) {
       null,
       triggerWith(trigger, {
         anchorRef,
-        onOpen: () => setOpen(true),
-        extraProps: { "aria-haspopup": "menu", "aria-expanded": open },
+        // An empty menu never opens: expanded with nothing shown misleads a reader.
+        onOpen: () => {
+          if (list.length > 0) setOpen(true);
+        },
+        extraProps: { "aria-haspopup": "menu", "aria-expanded": open && list.length > 0 },
       }),
       h(
         AnchoredSurface,

package/dist/people-picker-logic.js

@@ -0,0 +1,203 @@
+// The `<PeoplePicker>` rules that need no renderer: which source it reads,
+// the query each source is asked, how a row is named, and which saved values
+// still need a name. Both hosts share them, and the node suite tests them.
+
+export const PEOPLE_PICKER_SOURCES = Object.freeze(["users", "groups", "records"]);
+export const DEFAULT_PEOPLE_PAGE_SIZE = 50;
+// The directory resolves at most this many ids per request.
+export const MAX_RESOLVE_IDS = 100;
+
+/** A `source` prop as the picker reads it; anything unknown is "users". */
+export function pickerSource(source) {
+  return PEOPLE_PICKER_SOURCES.includes(source) ? source : "users";
+}
+
+function isId(value) {
+  return (typeof value === "string" && value !== "") || typeof value === "number";
+}
+
+function text(value) {
+  if (typeof value === "number") return String(value);
+  if (typeof value !== "string") return "";
+  return value.trim();
+}
+
+/**
+ * The page query a source's hook is asked: the typed search sent to the
+ * server, never filtered from one page here.
+ *
+ * @param {"users"|"groups"|"records"} source
+ * @param {{query?: string, pageSize?: number, groupId?: string, filter?: object}} own
+ */
+export function pageQuery(source, { query, pageSize, groupId, filter } = {}) {
+  const q = text(query);
+  const limit =
+    Number.isInteger(pageSize) && pageSize > 0 ? Math.min(pageSize, 200) : DEFAULT_PEOPLE_PAGE_SIZE;
+  const out = { ...(q ? { q } : null), limit };
+  if (source === "users" && isId(groupId)) out.group_id = groupId;
+  if (source === "records" && filter && typeof filter === "object") out.filter = filter;
+  return out;
+}
+
+// Schema columns arrive as wire `data_type` / `is_identification`; a
+// manifest-derived column carries `dataType` / `isIdentification`, and a
+// column being written names the flag `is_identification_column`.
+function columnType(column) {
+  return column.data_type ?? column.dataType;
+}
+
+function isIdentificationColumn(column) {
+  return Boolean(column.is_identification ?? column.isIdentification ?? column.is_identification_column);
+}
+
+/**
+ * The column a record is named by: the one given, else the table's
+ * identification column, else its first text column, else none.
+ *
+ * @param {{columns?: Array<{name: string, data_type?: string, dataType?: string,
+ *   is_identification?: boolean, isIdentification?: boolean}>}|null} schema
+ * @param {string} [own]
+ */
+export function recordLabelColumn(schema, own) {
+  if (typeof own === "string" && own !== "") return own;
+  const columns = (schema && Array.isArray(schema.columns) ? schema.columns : []).filter(Boolean);
+  const named = columns.find(isIdentificationColumn);
+  if (named) return named.name;
+  const textual = columns.find((column) => ["STRING", "TEXT"].includes(columnType(column)));
+  return textual ? textual.name : null;
+}
+
+/**
+ * A row's name: a user's name or email, a group's name, a record's label
+ * column. A row with none is `unknownText`, never its id.
+ *
+ * @param {object} row
+ * @param {{source: string, labelColumn?: string|null, unknownText: string}} how
+ */
+export function rowLabel(row, { source, labelColumn, unknownText }) {
+  if (!row || typeof row !== "object") return unknownText;
+  if (source === "records") {
+    const cell = labelColumn ? row[labelColumn] : undefined;
+    // A relation cell is hydrated as `{ id, label }`.
+    const shown = cell && typeof cell === "object" ? text(cell.label) : text(cell);
+    return shown || unknownText;
+  }
+  if (source === "users") return text(row.name) || text(row.email) || unknownText;
+  return text(row.name) || unknownText;
+}
+
+/** The rows a page offers: each with an id, none of `excludeIds`. */
+export function offeredRows(rows, excludeIds) {
+  const excluded = new Set(Array.isArray(excludeIds) ? excludeIds.map(String) : []);
+  return (Array.isArray(rows) ? rows : []).filter(
+    (row) => row && isId(row.id) && !excluded.has(String(row.id)),
+  );
+}
+
+/** A `value` or `values` prop as the list of picked ids. */
+export function pickedIds({ multiple, value, values }) {
+  if (multiple) return (Array.isArray(values) ? values : []).filter(isId);
+  return isId(value) ? [value] : [];
+}
+
+/**
+ * The picked ids no row has named and no lookup has tried yet: each is asked
+ * for once, so a deleted person is not looked up on every render.
+ *
+ * @param {Array<string|number>} ids
+ * @param {Map<string, object>} knownRows — id → row.
+ * @param {Set<string>} attempted — ids already looked up.
+ */
+export function unresolvedIds(ids, knownRows, attempted) {
+  return (Array.isArray(ids) ? ids : []).filter(
+    (id) => !knownRows.has(String(id)) && !attempted.has(String(id)),
+  );
+}
+
+const UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+/**
+ * Split saved ids into those a users or groups lookup can ask for and those
+ * it cannot: the directory refuses a whole batch over one id that is not a
+ * UUID, so such an id is named unknown at once instead. Record ids are each
+ * read alone, so every one is asked for.
+ *
+ * @param {Array<string|number>} ids
+ * @param {"users"|"groups"|"records"} source
+ */
+export function lookupableIds(ids, source) {
+  const list = Array.isArray(ids) ? ids : [];
+  if (source === "records") return { lookup: list, unknown: [] };
+  const lookup = [];
+  const unknown = [];
+  for (const id of list) (typeof id === "string" && UUID.test(id) ? lookup : unknown).push(id);
+  return { lookup, unknown };
+}
+
+/**
+ * The lookups in flight, with `ids` that none of them holds yet added as new
+ * batches. A batch keeps the key it was given, so an id resolving elsewhere
+ * never restarts a lookup still out. Returns `queue` itself when nothing is new.
+ *
+ * @param {{pending: Array<{key: number, ids: Array<string|number>}>, next: number}} queue
+ * @param {Array<string|number>} ids
+ * @param {number} [size]
+ */
+export function queueLookups(queue, ids, size = MAX_RESOLVE_IDS) {
+  const out = new Set(queue.pending.flatMap((batch) => batch.ids.map(String)));
+  const fresh = (Array.isArray(ids) ? ids : []).filter((id) => !out.has(String(id)));
+  if (fresh.length === 0) return queue;
+  const added = batches(fresh, size).map((batch, i) => ({ key: queue.next + i, ids: batch }));
+  return { pending: [...queue.pending, ...added], next: queue.next + added.length };
+}
+
+/** `queue` without the lookup `key`. */
+export function settleLookup(queue, key) {
+  return { ...queue, pending: queue.pending.filter((batch) => batch.key !== key) };
+}
+
+/**
+ * Whether a page hook's result answers the query it was last asked. After the
+ * query changes, the hook still holds the previous answer until it starts
+ * loading or returns new rows, so that answer is not reported as this one.
+ *
+ * @param {{queryKey: string|null, rows: unknown, error: unknown}|null} last — what was last reported.
+ * @param {{queryKey: string|null, rows: unknown, error: unknown, loading: boolean}} now
+ */
+export function answersQuery(last, now) {
+  if (!last || last.queryKey === now.queryKey) return true;
+  return now.loading || now.rows !== last.rows || now.error !== last.error;
+}
+
+/** `ids` in batches of at most `size`. */
+export function batches(ids, size = MAX_RESOLVE_IDS) {
+  const list = Array.isArray(ids) ? ids : [];
+  const out = [];
+  for (let start = 0; start < list.length; start += size) out.push(list.slice(start, start + size));
+  return out;
+}
+
+/**
+ * What the trigger shows for each picked id: its row's name, "loading" while
+ * the lookup is out, `unknownText` once it found nothing. Never the raw id.
+ *
+ * @param {Array<string|number>} ids
+ * @param {{knownRows: Map<string, object>, attempted: Set<string>,
+ *   nameOf: (row: object) => string, loadingText: string, unknownText: string}} how
+ */
+export function pickedLabels(ids, { knownRows, attempted, nameOf, loadingText, unknownText }) {
+  return (Array.isArray(ids) ? ids : []).map((id) => {
+    const row = knownRows.get(String(id));
+    if (row) return { value: id, label: nameOf(row), row };
+    return { value: id, label: attempted.has(String(id)) ? unknownText : loadingText };
+  });
+}
+
+/** `knownRows` with every row in `rows` added by id. */
+export function rememberRows(knownRows, rows) {
+  const next = new Map(knownRows);
+  for (const row of Array.isArray(rows) ? rows : []) {
+    if (row && isId(row.id)) next.set(String(row.id), row);
+  }
+  return next;
+}

package/dist/people-picker-view.js

@@ -0,0 +1,250 @@
+// 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";
+import { DRAWS_FIELD_FRAME } from "./form-control-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";
+  // Its `<Select>` frames the label, so `required` passes straight through.
+  PeoplePicker[DRAWS_FIELD_FRAME] = true;
+  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/radio-group-view.js

@@ -6,11 +6,12 @@
 // an icon or a tab role. This one has the radio role and the app's look.
 
 import React from "react";
-import { useHostTheme } from "./hooks.js";
+import { useHostSharedText, useHostTheme } from "./hooks.js";
 import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
 import { Icon } from "./icon.js";
 import { CHECKBOX_SIZE, CONTROL_MIN_TARGET, focusHaloStyle } from "./form-control-tokens.js";
 import {
+  DRAWS_FIELD_FRAME,
   errorMessage,
   hasNote,
   isShown,
@@ -165,11 +166,13 @@ export function makeRadioGroup(rn) {
       helper,
       error,
       disabled = false,
+      required = false,
       accessibilityLabel,
       style,
       containerStyle,
       ...rest
     } = props;
+    const requiredWord = useHostSharedText("required", "Required");
     const theme = useHostTheme() || DEFAULT_THEME_TOKENS;
     const t = resolveRadioGroupTokens(theme);
     const kind = radioGroupVariant(variant);
@@ -236,7 +239,7 @@ export function makeRadioGroup(rn) {
         ...rest,
         ref,
         accessibilityRole: "radiogroup",
-        accessibilityLabel: spokenLabel(accessibilityLabel, label),
+        accessibilityLabel: spokenLabel(accessibilityLabel, label, required ? requiredWord : null),
         "aria-disabled": disabled,
         ...(invalid ? { "aria-invalid": true } : null),
         ...(noted ? { "aria-describedby": noteId } : null),
@@ -252,11 +255,12 @@ export function makeRadioGroup(rn) {
     if (!framed) return group;
     return h(
       FieldFrame,
-      { t, label, helper, error: errorMessage(error), disabled, noteId, style: containerStyle },
+      { t, label, helper, error: errorMessage(error), disabled, required, noteId, style: containerStyle },
       group,
     );
   });
 
   RadioGroup.displayName = "RadioGroup";
+  RadioGroup[DRAWS_FIELD_FRAME] = true;
   return RadioGroup;
 }