@lotics/ui 23.1.1 → 23.2.0

package/AGENTS.md

@@ -54,6 +54,11 @@ CURRENT major only — upgrading an app across majors is `MIGRATION.md`.
   (a CTA, ⋯, a checkbox, a `Link`) is a role-less `PressableRow` + a **`PressDoor`** sibling
   (the tab stop, name, focus ring), never `PressableHighlight`, which wraps its children in the
   button. `Table`/`TableRow` already does this. → [composition.md](./docs/composition.md).
+- **A fact every row needs is a COLUMN; a fact one row needs expands in place.** Sending the
+  reader to a drawer for either loses the surrounding rows and charges a navigation to come
+  back — which is what makes scanning twenty records unaffordable. `TableRow`'s `detail` +
+  `expanded` reveal the detail beneath the row; keep the drawer for a heavy form.
+  → [catalog.md](./docs/catalog.md).
 - **A reference to another record is a FIELD** — it wears the inline editor's own resting
   surface, carries an **`InlineButton`** Open inside it, and PEEKS its facts on press (detach
   lives in the peek). Never its own Section, never a card, never the other record's fields as

package/docs/catalog.md

@@ -129,8 +129,8 @@ See [`tpl_item_list`](../examples/tpl_item_list.tsx) for the checklist grammar,
 Two columnar shapes, and the choice is about data size:
 
 - **High-volume register** (thousands+ you BROWSE) — `Table` (columns defined once; sortable
-  headers via `SortHeader`; paired with `Pagination`) + read-only rows that open a `Drawer`
-  to edit. It scales by PAGING — renders one page, never the whole set — so you FILTER +
+  headers via `SortHeader`; paired with `Pagination`) + rows that either open a `Drawer` to
+  edit or expand in place (`detail` + `expanded`) when the detail is read or light-edit. It scales by PAGING — renders one page, never the whole set — so you FILTER +
   search, you don't group. Worked example: [`tpl_item_list`](../examples/tpl_item_list.tsx).
   Never an HTML `<table>` or a `.map` of rows. The register adapts to its container on its
   own — hides columns by `priority`, stacks rows below the two-column floor (see the `table`
@@ -807,6 +807,16 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   On pressable rows dropped values stay one tap away — the row opens the record; a READ-ONLY
   register (rows without `onPress`) has no door, so give the columns it can't afford to lose
   a low `priority` (e.g. `priority: 1` — outlives its right-side neighbours).
+  **`detail` + `expanded` reveal a row's detail BENEATH it instead of navigating away.** A
+  register answers "which one"; the moment it cannot answer "and what about it" the reader is
+  sent to a drawer, loses the surrounding rows, and pays a navigation to come back — which is
+  what makes scanning twenty records unaffordable. Reach for it when the detail is read or
+  light-edit; a heavy form still deserves its own surface. `expanded` is CONTROLLED — how many
+  may be open at once is the caller's rule, so the component does not pick one. The detail
+  renders as a SIBLING of the press surface (a control inside it would otherwise be swallowed
+  by the row's own toggle), the row shows the open wash while it is out, and the door announces
+  `aria-expanded`. Prefer the columns first: a fact every row needs is a column, not a reason
+  to expand.
 - **`sort_header`** — `SortHeader` + `SortState`/`SortDir` + `cycleSort` + `sortBy` +
   `SortHeaderLabels`: the sortable column header and the sort-state helpers `Table`/
   `DataGrid` consumers drive.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "23.1.1",
+  "version": "23.2.0",
   "type": "module",
   "exports": {
     "./vite": {

package/src/breakdown.tsx

@@ -97,7 +97,9 @@ export function Breakdown(props: BreakdownProps) {
             <PressableHighlight
               focusRing              key={item.key}
               accessibilityRole="button"
-              accessibilityState={{ selected }}
+              // The W3C prop — `accessibilityState` is dropped by this react-native-web
+              // build, and `selected` has no meaning on a `button` role regardless.
+              aria-pressed={selected}
               accessibilityLabel={`${item.label}: ${formatValue(item.value)}`}
               onPress={() => onSelect(selected ? null : item.key)}
               style={[styles.row, styles.pressable, selected ? styles.selected : null]}

package/src/choice_list.tsx

@@ -46,7 +46,9 @@ function ChoiceRow({ option, selected, onSelect }: { option: ChoiceOption; selec
     <Pressable
       accessibilityRole="button"
       accessibilityLabel={option.label}
-      accessibilityState={{ selected }}
+      // The W3C prop — `accessibilityState` is dropped by this react-native-web
+      // build, and `selected` has no meaning on a `button` role regardless.
+      aria-pressed={selected}
       onPress={onSelect}
       {...focusProps}
       style={({ hovered, pressed }) => [

package/src/date_calendar.tsx

@@ -31,7 +31,9 @@ function DayCell(props: {
     <Pressable
       accessibilityRole="button"
       accessibilityLabel={props.label}
-      accessibilityState={{ selected: props.isActive }}
+      // The W3C prop — `accessibilityState` is dropped by this react-native-web
+      // build, and `selected` has no meaning on a `button` role regardless.
+      aria-pressed={props.isActive}
       {...focusProps}
       style={({ hovered }) => [
         styles.dayCell,

package/src/funnel.tsx

@@ -91,7 +91,9 @@ export function Funnel(props: FunnelProps) {
     return (
       <PressableHighlight
         accessibilityRole="button"
-        accessibilityState={{ selected: selectedKey === key }}
+        // The W3C prop — `accessibilityState` is dropped by this react-native-web
+        // build, and `selected` has no meaning on a `button` role regardless.
+        aria-pressed={selectedKey === key}
         accessibilityLabel={label}
         onPress={() => onSelect(selectedKey === key ? null : key)}
         style={fill ? styles.pressFill : undefined}

package/src/heatmap.tsx

@@ -108,7 +108,9 @@ function Cell(props: CellProps) {
   return (
     <Pressable
       accessibilityRole="button"
-      accessibilityState={{ selected }}
+      // The W3C prop — `accessibilityState` is dropped by this react-native-web
+      // build, and `selected` has no meaning on a `button` role regardless.
+      aria-pressed={selected}
       accessibilityLabel={label}
       onPress={onPress}
       {...focusProps}

package/src/matrix.tsx

@@ -222,7 +222,9 @@ function MatrixCell({ ctx, display, row, col, value }: MatrixCellProps) {
   return (
     <FocusRingPressable
       accessibilityRole="button"
-      accessibilityState={{ selected: isSelected }}
+      // The W3C prop — `accessibilityState` is dropped by this react-native-web
+      // build, and `selected` has no meaning on a `button` role regardless.
+      aria-pressed={isSelected}
       accessibilityLabel={label}
       onPress={() => onSelectCell?.(isSelected ? null : { row: row.key, col: col.key })}
       style={(state) => [

package/src/press_door.tsx

@@ -10,6 +10,13 @@ export interface PressDoorProps {
    * without a label it is a nameless button. Name the destination ("Open ORD-1042").
    */
   accessibilityLabel: string;
+  /**
+   * Set ONLY when the press toggles a disclosure the door owns (`TableRow`'s
+   * `detail`), never when it navigates: it emits `aria-expanded`, which promises
+   * a screen-reader user that this control shows and hides something in place.
+   * Omit and no state is announced.
+   */
+  expanded?: boolean;
   /** Focus-ring corner radius — match the surface the door spans. Default 10 (the register wash). */
   radius?: number;
 }
@@ -44,12 +51,16 @@ export interface PressDoorProps {
  *
  * `TableRow` is the in-kit consumer.
  */
-export function PressDoor({ onPress, accessibilityLabel, radius = 10 }: PressDoorProps) {
+export function PressDoor({ onPress, accessibilityLabel, expanded, radius = 10 }: PressDoorProps) {
   const { focusVisible, focusProps } = useFocusRing();
   return (
     <Pressable
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel}
+      // The W3C prop, NOT `accessibilityState` — this react-native-web build drops
+      // the latter silently. Set only when the door TOGGLES something: on a door
+      // that navigates it would promise a disclosure the press does not perform.
+      aria-expanded={expanded}
       onPress={onPress}
       {...focusProps}
       style={[styles.door, { borderRadius: radius }, focusVisible && { boxShadow: FOCUS_RING }]}

package/src/status_grid.tsx

@@ -133,7 +133,9 @@ export function StatusLegend(props: StatusLegendProps) {
           <PressableHighlight
             focusRing            key={state.key}
             accessibilityRole="button"
-            accessibilityState={{ selected }}
+            // The W3C prop — `accessibilityState` is dropped by this react-native-web
+            // build, and `selected` has no meaning on a `button` role regardless.
+            aria-pressed={selected}
             accessibilityLabel={`${state.label}: ${count}`}
             onPress={() => onSelect(selected ? null : state.key)}
             style={[styles.legendItem, styles.legendPressable, selected ? styles.legendSelected : null]}

package/src/table.tsx

@@ -164,6 +164,27 @@ export type TableRowProps = {
   action?: ReactNode;
   /** Min row height (register mode; stacked rows size to their content). Default 52. */
   minHeight?: number;
+  /**
+   * The row's detail, revealed BENEATH it when `expanded` — the alternative to
+   * sending the reader somewhere else to see it.
+   *
+   * A register answers "which one", and the moment it cannot answer "and what
+   * about it" the reader is pushed into a drawer, loses the surrounding rows,
+   * and pays a navigation to come back — which is what makes scanning twenty
+   * records unaffordable. Expanding in place keeps the answer next to the
+   * question. Reach for it when the detail is READ or light-edit; a heavy form
+   * still deserves its own surface.
+   *
+   * Outside the pressable, so a control inside the detail is not swallowed by
+   * the row's own press.
+   */
+  detail?: ReactNode;
+  /**
+   * Whether `detail` is showing. CONTROLLED — the caller owns it, because who
+   * may be open at once is the caller's rule (one at a time, several, or one
+   * per group) and a component-local default would silently pick one.
+   */
+  expanded?: boolean;
   /** The `TableCell`s, one per column, in column order. */
   children: ReactNode;
 } & (
@@ -198,9 +219,10 @@ export type TableRowProps = {
  * slots, different geometry.
  */
 export function TableRow(props: TableRowProps) {
-  const { onPress, selected, marked, accessibilityLabel, leading, trailing, action, minHeight = 52, children } = props;
+  const { onPress, selected, marked, accessibilityLabel, leading, trailing, action, minHeight = 52, detail, expanded, children } = props;
   const ctx = useContext(TableContext);
   if (!ctx) throw new Error("TableRow must be used within a Table");
+  const showDetail = detail != null && expanded === true;
 
   const cells = (Children.toArray(children).filter(isValidElement) as ReactElement<TableCellProps>[])
     .map((cell, i) => ({ cell, column: ctx.columns[i] as TableColumn | undefined }))
@@ -249,13 +271,13 @@ export function TableRow(props: TableRowProps) {
     );
   }
 
-  return (
-    <PressableRow onPress={onPress} selected={selected} marked={marked} style={styles.row}>
+  const rowSurface = (
+    <PressableRow onPress={onPress} selected={selected || showDetail} marked={marked} style={styles.row}>
       {!ctx.stacked && ctx.leading > 0 ? <View style={[styles.slot, { width: ctx.leading }]}>{leading}</View> : null}
       {/* The door hit-tests above in-flow content; the cells/slots lift back above it
           via zIndex 1 (see `PressDoor`), so the door gets only the keyboard. Radius
           matches the register wash. */}
-      <PressDoor onPress={onPress} accessibilityLabel={accessibilityLabel} />
+      <PressDoor onPress={onPress} accessibilityLabel={accessibilityLabel} expanded={detail != null ? showDetail : undefined} />
       {ctx.stacked ? (
         body
       ) : (
@@ -271,6 +293,19 @@ export function TableRow(props: TableRowProps) {
       )}
     </PressableRow>
   );
+
+  if (!showDetail) return rowSurface;
+
+  // The detail is a SIBLING of the pressable, never inside it: the row's press
+  // surface spans its own children, so a control nested in the detail would be
+  // swallowed by the toggle — and a `<button>` inside the door is invalid HTML
+  // for the same reason the cells sit outside it.
+  return (
+    <View>
+      {rowSurface}
+      <View style={styles.detail}>{detail}</View>
+    </View>
+  );
 }
 
 export interface TableCellProps {
@@ -301,6 +336,14 @@ export function TableCell(props: TableCellProps) {
 }
 
 const styles = StyleSheet.create({
+  // The expanded detail. Indented to the identity column's text edge so it reads
+  // as belonging to the row above rather than as a new row, and given the row's
+  // own gutter so its content lines up with the cells it explains.
+  detail: {
+    paddingLeft: ROW_GUTTER,
+    paddingRight: ROW_GUTTER,
+    paddingBottom: 16,
+  },
   // A hairline under the column header anchors the columns; the rows below it are
   // Divider-separated.
   headerBand: {