@lotics/ui 7.11.0 → 7.12.1

package/AGENTS.md

@@ -115,7 +115,7 @@ Pick by capability, not by name. (→ the source file for the API.)
   `PageHeader` /
   `PageContent`, `Stack`, `Spacer`, `Divider`, `Accordion`, `Tabs`, `SegmentedControl`, `Stepper`,
   `DangerZone` (the destructive section — delete/archive — set apart at the bottom of a record/settings surface).
-- **Rows & registers** — `PressableRow` (THE register row), `ListItem`, `MenuButton`,
+- **Rows & registers** — `PressableRow` (THE register row; forwards its `ref`, so wrapping it in a `PopoverTrigger` anchors a row-triggered peek Popover — without the ref the trigger is unmeasurable and the popover renders off-screen), `ListItem`, `MenuButton`,
   `MenuListItem`, `DetailRow` (label+value for drawers/peeks; optional `trailing` slot for a
   right-side action/badge/unit), `ActionMenu` (⋯), `FloatingActionBar` (bulk-select bar).
 - **Filters & view controls** — `SearchInput`, `ChipGroup`, `FilterChip` (+ `RangeSlider`,
@@ -867,7 +867,7 @@ inline_text_input · inline_number_input · inline_select · inline_member_selec
 inline_time_picker (the Inline* family — per-field editors on `inline_edit`'s `useInlineEdit` +
 `InlineEditView`; `InlineSelect`/`InlineMemberSelect` render the resting value like its option — `renderOptionContent` by default, `renderSelected` to override — a chip/badge at rest, not just text) ·
 inline_static (InlineStatic — a READ-ONLY value matching the Inline* box metrics EXACTLY (height, padding, 1px transparent border) so a non-editable field — a computed total, a system ID, a synced/locked value — aligns pixel-for-pixel in the same column; non-interactive, NOT a disabled input; `muted`/`tabular`/`align="right"` for a number column, `weight="medium"` to emphasise a total among plain rows) ·
-list · list_item · menu_button · menu_list_item · detail_row (DetailRow — label+value row for drawer/peek detail; optional `trailing` slot renders a right-side action/badge/unit after the value) · danger_zone (DangerZone — the destructive section: a soft danger-tinted frame (`tint`/`solid`, never raw hex) + a danger heading + a description + a destructive action slot (children, e.g. a `danger` Button); sits APART at the bottom of a record/settings surface) · pressable_row ·
+list · list_item · menu_button · menu_list_item · detail_row (DetailRow — label+value row for drawer/peek detail; in FORM mode (`labelWidth` set) the value column FILLS the row so a stack of inline editors all span the same width + none jumps wider on edit; optional `trailing` slot renders a right-side action/badge/unit after the value) · danger_zone (DangerZone — the destructive section: a soft danger-tinted frame (`tint`/`solid`, never raw hex) + a danger heading + a description + a destructive action slot (children, e.g. a `danger` Button); sits APART at the bottom of a record/settings surface) · pressable_row ·
 check_circle (CheckCircle — the completion ring: an empty ring that springs to a filled check when done, distinct from the square checkbox; the task/to-do/checklist toggle. Compose task rows directly, no Task component) · action_menu ·
 floating_action_bar · filter_chip · column_filter (ColumnFilter — the typed per-column filter pill +
 columnFilterToConditions; for a register filtering on several columns) · chip_group · search_input ·

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "7.11.0",
+  "version": "7.12.1",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/detail_row.tsx

@@ -9,9 +9,8 @@ export interface DetailRowProps {
   children: ReactNode;
   /** An optional right-side slot, rendered as the LAST child of the row (after
    *  `children`) — a small action `Button`, a status `Badge`, a unit label, an
-   *  `IconButton`. For it to sit at the right edge, wrap the value/editor in a
-   *  `flex:1` View so the value takes the slack and the trailing pins right (the
-   *  inline-record templates do this). */
+   *  `IconButton`. In form mode (`labelWidth` set) the value column already fills
+   *  the row, so the trailing pins to the right edge automatically. */
   trailing?: ReactNode;
   /** Fixed label-column width (px) to align labels in a left column — for a peek
    *  or form-like stack. Omit for a spread row: the label takes the slack and the
@@ -26,17 +25,19 @@ export interface DetailRowProps {
 /**
  * One label + value line for a drawer / peek detail view — NOT a list row (that's
  * `PressableRow` / `TableRow`). Spread by default (muted label left, value pushed
- * to the right edge); pass `labelWidth` to align labels in a fixed left column
- * with the values flowing immediately after instead.
+ * to the right edge); pass `labelWidth` to align labels in a fixed left column —
+ * the value column then FILLS the rest of the row, so a stack of inline editors
+ * all span the same width (none jumps wider on edit).
  */
 export function DetailRow(props: DetailRowProps) {
   const { label, children, trailing, labelWidth, labelSize = "sm", minHeight = 28 } = props;
+  const form = labelWidth != null;
   return (
     <View style={[styles.row, { minHeight }]}>
-      <Text size={labelSize} color="muted" style={labelWidth != null ? { width: labelWidth } : styles.flexLabel}>
+      <Text size={labelSize} color="muted" style={form ? { width: labelWidth } : styles.flexLabel}>
         {label}
       </Text>
-      {children}
+      {form ? <View style={styles.value}>{children}</View> : children}
       {trailing != null ? trailing : null}
     </View>
   );
@@ -49,4 +50,10 @@ const styles = StyleSheet.create({
     gap: 12,
   },
   flexLabel: { flex: 1 },
+  // Form mode (labelWidth set): the value column FILLS the row so every inline
+  // editor spans the SAME width — and none jumps wider when it swaps to the
+  // (flex:1) edit control. A stretch column, so an InlineEditView / InlineStatic
+  // child fills it edge-to-edge. A status Badge or action is NOT a value — pass
+  // it as `trailing` (pins right); one placed here would stretch full-width.
+  value: { flex: 1 },
 });

package/src/pressable_row.tsx

@@ -1,5 +1,5 @@
-import { ReactNode, useState } from "react";
-import { Pressable, StyleProp, StyleSheet, ViewStyle } from "react-native";
+import { ReactNode, Ref, useState } from "react";
+import { Pressable, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { colors } from "./colors";
 
 export interface PressableRowProps {
@@ -31,6 +31,11 @@ export interface PressableRowProps {
   /** Layout only (gap, minHeight overrides). The surface owns its press
    * states — never pass backgroundColor for hover/selected. */
   style?: StyleProp<ViewStyle>;
+  /** Forwarded to the underlying Pressable's DOM node so a `Popover`/`Tooltip`
+   * can anchor to (measure) the row — RN-Web forwards it to the rendered element.
+   * Without it, wrapping this row in a `PopoverTrigger` yields an unmeasurable
+   * trigger and the popover renders unpositioned. */
+  ref?: Ref<View>;
 }
 
 /**
@@ -45,7 +50,7 @@ export interface PressableRowProps {
  * `variant` picks bleed (registers) or inset (Accordion drill-down rows).
  */
 export function PressableRow(props: PressableRowProps) {
-  const { onPress, selected = false, marked = false, variant = "register", children, style } = props;
+  const { onPress, selected = false, marked = false, variant = "register", children, style, ref } = props;
   const [hovered, setHovered] = useState(false);
 
   // RN's types don't declare mouse handlers; react-native-web forwards them
@@ -57,6 +62,7 @@ export function PressableRow(props: PressableRowProps) {
 
   return (
     <Pressable
+      ref={ref}
       onPress={onPress}
       // Non-focusable surface: tabIndex, NOT focusable — RN-Web's Pressable
       // ignores `focusable` and writes its own tabIndex (the keyboard target is