@multiplatform.one/table 6.6.0 → 7.0.0

package/src/components/DataTableCell/index.tsx

@@ -51,7 +51,7 @@ import { CellModalEditor } from "./CellModalEditor";
 import { CellOptionsEditor } from "./CellOptionsEditor";
 import { Star } from "@phosphor-icons/react";
 import { RichTextEditor } from "@multiplatform.one/rich-text";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useResolvedKnobs, ensureCompositeFocusRing } from "@multiplatform.one/theme";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { View, isWeb } from "tamagui";
 import type { DataTableFieldProps, DataTableField } from "../../types";
@@ -85,7 +85,7 @@ export interface DataTableCellProps {
   rowData?: any;
   /** Size token for field sizing */
   size?: string;
-  /** Use compact sizing */
+  /** Use compact density (tighter layout gaps; control size unchanged) */
   compact?: boolean;
   /**
    * For linked daterange columns: the value of the linked (end date) column.
@@ -117,6 +117,7 @@ export function DataTableCell({
   // Cells are always compact unless caller explicitly opts out — table rows
   // are 40-44px tall, so default-sized fields overflow the row.
   const { knobProps } = useResolvedKnobs({ size, compact: compact ?? true });
+  const cellName = (fieldProps as any)["aria-label"] ?? columnLabel ?? columnId;
   const {
     options,
     placeholder,
@@ -243,7 +244,7 @@ export function DataTableCell({
             placeholder={placeholder}
             size={knobProps.sizeToken}
             {...restProps}
-            aria-label={(restProps as any)["aria-label"] ?? columnLabel ?? columnId}
+            aria-label={(restProps as any)["aria-label"] ?? cellName}
           />
         </CellWrapper>
       );
@@ -260,7 +261,7 @@ export function DataTableCell({
             placeholder={placeholder}
             size={knobProps.sizeToken}
             {...restProps}
-            aria-label={(restProps as any)["aria-label"] ?? columnLabel ?? columnId}
+            aria-label={(restProps as any)["aria-label"] ?? cellName}
           />
         </CellWrapper>
       );
@@ -279,7 +280,7 @@ export function DataTableCell({
             value={value}
             fieldProps={fieldProps}
             disabled={disabled || readOnly}
-            label={(restProps as any)["aria-label"] ?? columnLabel ?? columnId}
+            label={cellName}
           >
             {(close) => (
               <RadioGroup
@@ -300,17 +301,36 @@ export function DataTableCell({
       );
 
     case "togglegroup":
+      // LC-06: the option strip is wider than a typical column (same clipping
+      // class as radiogroup). Face is the current value; options live in an
+      // anchored popover (web) / sheet (native). Single-select is COMMIT
+      // class (pick closes); allowMultiple is COMPOSE (panel stays open).
       return (
         <CellWrapper>
-          <ToggleGroup
-            value={allowMultiple ? (Array.isArray(value) ? value : []) : value}
-            onValueChange={handleChange}
-            options={options ?? []}
+          <CellOptionsEditor
+            field="togglegroup"
+            value={value}
+            fieldProps={fieldProps}
             disabled={disabled || readOnly}
-            type={allowMultiple ? "multiple" : "single"}
-            size={knobProps.sizeToken}
-            {...restProps}
-          />
+            label={cellName}
+            dismissOnPick={!allowMultiple}
+          >
+            {(close) => (
+              <ToggleGroup
+                value={allowMultiple ? (Array.isArray(value) ? value : []) : value}
+                onValueChange={(next: string | string[]) => {
+                  handleChange(next);
+                  if (!allowMultiple) close();
+                }}
+                options={options ?? []}
+                disabled={disabled || readOnly}
+                type={allowMultiple ? "multiple" : "single"}
+                size={knobProps.sizeToken}
+                orientation="vertical"
+                {...restProps}
+              />
+            )}
+          </CellOptionsEditor>
         </CellWrapper>
       );
 
@@ -588,13 +608,14 @@ export function DataTableCell({
 
     case "mentioninput":
       return (
-        <CellModalEditor
+        <ModalCell
           field="mentioninput"
           value={value}
           fieldProps={fieldProps}
           disabled={disabled}
           readOnly={readOnly}
           onCommit={handleChange}
+          label={cellName}
           title={t("Edit text")}
         >
           {(draftValue, onDraftChange) => (
@@ -611,7 +632,7 @@ export function DataTableCell({
               {...restProps}
             />
           )}
-        </CellModalEditor>
+        </ModalCell>
       );
 
     case "barcode":
@@ -620,13 +641,14 @@ export function DataTableCell({
       // like other heavy fields — never inline where the scanner would grow
       // the row. The cell face is FieldDisplay's compact drawn-barcode preview.
       return (
-        <CellModalEditor
+        <ModalCell
           field="barcode"
           value={value}
           fieldProps={fieldProps}
           disabled={disabled}
           readOnly={readOnly}
           onCommit={handleChange}
+          label={cellName}
           title={t("Barcode")}
         >
           {(draftValue, onDraftChange) => (
@@ -650,19 +672,20 @@ export function DataTableCell({
               />
             </View>
           )}
-        </CellModalEditor>
+        </ModalCell>
       );
 
     // ─── File/media inputs ────────────────────────────────────
     case "fileupload":
       return (
-        <CellModalEditor
+        <ModalCell
           field="fileupload"
           value={value}
           fieldProps={fieldProps}
           disabled={disabled}
           readOnly={readOnly}
           onCommit={handleChange}
+          label={cellName}
           title={t("Upload file")}
         >
           {(draftValue, onDraftChange) => (
@@ -677,18 +700,19 @@ export function DataTableCell({
               {...restProps}
             />
           )}
-        </CellModalEditor>
+        </ModalCell>
       );
 
     case "image":
       return (
-        <CellModalEditor
+        <ModalCell
           field="image"
           value={value}
           fieldProps={fieldProps}
           disabled={disabled}
           readOnly={readOnly}
           onCommit={handleChange}
+          label={cellName}
           title={t("Image")}
         >
           {(draftValue, onDraftChange) => (
@@ -703,18 +727,19 @@ export function DataTableCell({
               {...restProps}
             />
           )}
-        </CellModalEditor>
+        </ModalCell>
       );
 
     case "signature":
       return (
-        <CellModalEditor
+        <ModalCell
           field="signature"
           value={value}
           fieldProps={fieldProps}
           disabled={disabled}
           readOnly={readOnly}
           onCommit={handleChange}
+          label={cellName}
           title={t("Signature")}
         >
           {(draftValue, onDraftChange) => (
@@ -729,18 +754,19 @@ export function DataTableCell({
               {...restProps}
             />
           )}
-        </CellModalEditor>
+        </ModalCell>
       );
 
     case "geolocation":
       return (
-        <CellModalEditor
+        <ModalCell
           field="geolocation"
           value={value}
           fieldProps={fieldProps}
           disabled={disabled}
           readOnly={readOnly}
           onCommit={handleChange}
+          label={cellName}
           title={t("Location")}
         >
           {(draftValue, onDraftChange) => (
@@ -761,19 +787,20 @@ export function DataTableCell({
               {...restProps}
             />
           )}
-        </CellModalEditor>
+        </ModalCell>
       );
 
     // ─── Rich text / code editors ─────────────────────────────
     case "richtexteditor":
       return (
-        <CellModalEditor
+        <ModalCell
           field="richtexteditor"
           value={value}
           fieldProps={fieldProps}
           disabled={disabled}
           readOnly={readOnly}
           onCommit={handleChange}
+          label={cellName}
           title={t("Edit")}
         >
           {(draftValue, onDraftChange) => (
@@ -788,18 +815,19 @@ export function DataTableCell({
               {...restProps}
             />
           )}
-        </CellModalEditor>
+        </ModalCell>
       );
 
     case "markdowneditor":
       return (
-        <CellModalEditor
+        <ModalCell
           field="markdowneditor"
           value={value}
           fieldProps={fieldProps}
           disabled={disabled}
           readOnly={readOnly}
           onCommit={handleChange}
+          label={cellName}
           title={t("Edit markdown")}
         >
           {(draftValue, onDraftChange) => (
@@ -813,18 +841,19 @@ export function DataTableCell({
               {...restProps}
             />
           )}
-        </CellModalEditor>
+        </ModalCell>
       );
 
     case "codeeditor":
       return (
-        <CellModalEditor
+        <ModalCell
           field="codeeditor"
           value={value}
           fieldProps={fieldProps}
           disabled={disabled}
           readOnly={readOnly}
           onCommit={handleChange}
+          label={cellName}
           title={t("Edit code")}
         >
           {(draftValue, onDraftChange) => (
@@ -838,25 +867,45 @@ export function DataTableCell({
               {...restProps}
             />
           )}
-        </CellModalEditor>
+        </ModalCell>
       );
 
     // ─── Text inputs ──────────────────────────────────────────
     case "textarea":
+      // LC-06 / Airtable expand / Frappe Text Editor: multiline text is
+      // taller than the row. Face is a single-line FieldDisplay; the editor
+      // opens in the modal (web) / sheet (native) so the anchor row never
+      // grows. Staging matches the other compose editors (Done / Cancel).
       return (
-        <CellWrapper>
-          <InlineTextEditor
-            value={value}
-            onCommit={handleChange}
-            multiline
-            placeholder={placeholder}
-            disabled={disabled}
-            readOnly={readOnly}
-            sizeToken={knobProps.sizeToken}
-            ariaLabel={(restProps as any)["aria-label"] ?? columnLabel ?? columnId}
-            restProps={restProps}
-          />
-        </CellWrapper>
+        <ModalCell
+          field="textarea"
+          value={value}
+          fieldProps={fieldProps}
+          disabled={disabled}
+          readOnly={readOnly}
+          onCommit={handleChange}
+          label={cellName}
+          title={t("Edit text")}
+        >
+          {(draftValue, onDraftChange) => (
+            <TextArea
+              value={draftValue != null ? String(draftValue) : ""}
+              onChangeText={onDraftChange}
+              placeholder={placeholder}
+              disabled={disabled}
+              readOnly={readOnly}
+              size={knobProps.sizeToken}
+              {...restProps}
+              textAreaProps={{
+                "aria-label": cellName,
+                // TextArea has no top-level minHeight prop; the modal editor's
+                // taller-than-row height rides the underlying textarea element.
+                minHeight: restProps.minHeight ?? 160,
+                ...(restProps as any).textAreaProps,
+              }}
+            />
+          )}
+        </ModalCell>
       );
 
     case "input":
@@ -887,14 +936,14 @@ function CellStar(props: { size: number; weight: "fill" | "regular"; color: stri
 }
 
 /**
- * Draft-until-commit wrapper for inline text editors (input, textarea).
- * Typing edits a local draft; Enter (single-line) or blur commits it via
- * onCommit; Escape restores the pre-edit value without committing.
+ * Draft-until-commit wrapper for the inline single-line text editor.
+ * Typing edits a local draft; Enter or blur commits it via onCommit;
+ * Escape restores the pre-edit value without committing. Multiline text
+ * is LC-06 oversized and routes through ModalCell instead.
  */
 function InlineTextEditor({
   value,
   onCommit,
-  multiline,
   placeholder,
   disabled,
   readOnly,
@@ -904,7 +953,6 @@ function InlineTextEditor({
 }: {
   value: any;
   onCommit: (value: string) => void;
-  multiline?: boolean;
   placeholder?: string;
   disabled?: boolean;
   readOnly?: boolean;
@@ -949,37 +997,12 @@ function InlineTextEditor({
     (event: any) => {
       const key = event?.nativeEvent?.key ?? event?.key;
       if (key === "Escape") cancel();
-      else if (key === "Enter" && !multiline) commit();
+      else if (key === "Enter") commit();
     },
-    [cancel, commit, multiline],
+    [cancel, commit],
   );
 
-  const { inputProps: userInputProps, textAreaProps: userTextAreaProps, ...fieldRest } = restProps;
-
-  if (multiline) {
-    return (
-      <TextArea
-        key={resetKey}
-        value={draft}
-        onChangeText={setDraft}
-        onBlur={commit}
-        placeholder={placeholder}
-        disabled={disabled}
-        readOnly={readOnly}
-        size={sizeToken}
-        {...fieldRest}
-        textAreaProps={{
-          ...(ariaLabel !== undefined ? { "aria-label": ariaLabel } : undefined),
-          ...userTextAreaProps,
-          // Native fires onKeyPress; the DOM keypress event never fires for
-          // Escape, so web needs onKeyDown to see it.
-          onKeyPress: handleKeyPress,
-          onKeyDown: handleKeyPress,
-          onBlur: commit,
-        }}
-      />
-    );
-  }
+  const { inputProps: userInputProps, ...fieldRest } = restProps;
 
   return (
     <Input
@@ -1179,6 +1202,14 @@ function DraftFieldEditor({
   );
 }
 
+function ModalCell(props: React.ComponentProps<typeof CellModalEditor>) {
+  return (
+    <CellWrapper>
+      <CellModalEditor {...props} />
+    </CellWrapper>
+  );
+}
+
 function CellWrapper({
   children,
   justify = "flex-start",
@@ -1191,10 +1222,12 @@ function CellWrapper({
   minWidth?: number;
 }) {
   // Fields render chromeless inside cells (useIsInTableCell strips the input
-  // frame), so the cell chrome owns the focus affordance: the knob recipe's
-  // focus-visible ring shows on the cell whenever focus is inside it
-  // (DG-A11Y-01 / Axiom 12 — recipe ring, not a hand-rolled outline).
-  const { control } = useResolvedKnobs();
+  // frame), so the cell chrome owns the focus affordance. LC-71: one ring on
+  // the perceived control boundary (this wrapper). Keyboard-origin focus
+  // rings via :has(:focus-visible); text-entry also rings on any input
+  // focus (the carve-out). Mouse click on a checkbox/switch paints no ring.
+  // Inner field outlines are suppressed by the composite-ring stylesheet.
+  if (isWeb) ensureCompositeFocusRing();
   // Column + stretch layout so field roots adopt the cell width (input frames
   // carry minWidth 0 and shrink to fit); maxWidth + a horizontal-only clip
   // (overflow-x: clip pairs with overflow-y: visible, unlike hidden) catch
@@ -1214,13 +1247,15 @@ function CellWrapper({
       width="100%"
       maxWidth="100%"
       // Per-axis overflow is web-only CSS; RN styles know only `overflow`.
-      {...(isWeb ? { overflowX: "clip" as any, overflowY: "visible" as any } : undefined)}
+      {...(isWeb
+        ? {
+            overflowX: "clip" as any,
+            overflowY: "visible" as any,
+            className: "mp-composite-ring mp-composite-ring-deep",
+          }
+        : undefined)}
       gap={gap as any}
       minWidth={minWidth}
-      // focus-within is a web-only concept; on native the style prop makes the
-      // wrapper claim the responder and Tamagui-driven presses inside the cell
-      // (Checkbox/Switch frames) never fire.
-      {...(isWeb ? { focusWithinStyle: { ...control.focusVisibleKnobProps } } : undefined)}
     >
       {children}
     </View>

package/src/components/DataTableColumnPinning/DataTableColumnPinning.spec.tsx

@@ -58,10 +58,12 @@ function TestComponent({
   onPinChange,
   maxPinnedColumns = 3,
   allowPinning = true,
+  disabled = false,
 }: {
   onPinChange?: (columnId: string, position?: "left" | "right") => void;
   maxPinnedColumns?: number;
   allowPinning?: boolean;
+  disabled?: boolean;
 }) {
   const [pinnedColumns, setPinnedColumns] = React.useState<{
     left: string[];
@@ -95,6 +97,7 @@ function TestComponent({
     onPinChange,
     maxPinnedColumns,
     allowPinning,
+    disabled,
   });
 
   // Force pinning to use current state
@@ -197,6 +200,69 @@ describe("DataTableColumnPinning", () => {
   });
 });
 
+// LC-54 amendment (2026-08-13) VERIFY arm: in hover/press the element
+// carrying the press-target outset keeps `background-color: transparent` —
+// painted feedback lives on the glyph-scale ring inside it. jsdom never
+// applies :hover, but tamagui compiles state backgrounds into value-carrying
+// atomic classes (`_bg-0hover-color4`), so the paint channel is asserted
+// through the atoms each node carries — red on the old anatomy (the floor
+// carried the hover AND press fills), green only when the floor is
+// paint-free in every state.
+describe("DataTableColumnPinning press-floor paint (LC-54 amendment)", () => {
+  const paintedStateAtom = /_bg-0(?:hover|active)-(?!transparent)/;
+  const floorFor = (columnId: string) =>
+    screen.getByTestId(`column-${columnId}`).querySelector('[role="button"]') as HTMLElement;
+
+  it("floor node carries no hover/press background paint", () => {
+    renderWithProviders(<TestComponent />);
+    expect(floorFor("name").className).not.toMatch(paintedStateAtom);
+  });
+
+  it("positive control: the glyph-scale ring is where the hover fill lives", () => {
+    renderWithProviders(<TestComponent />);
+    const floor = floorFor("name");
+    const ring = floor.firstElementChild as HTMLElement;
+    expect(ring).not.toBeNull();
+    // Proves the atom detector can see hover paint in this harness (the
+    // no-paint assert above is meaningless without this arm), and pins the
+    // fill to the ring: icon + one space token, never the 44px floor.
+    expect(ring.className).toMatch(/_bg-0hover-color4/);
+    expect(ring.querySelector("svg")).not.toBeNull();
+  });
+
+  it("activation bubbles from a press on the glyph ring", async () => {
+    const onPinChange = vi.fn();
+    renderWithProviders(<TestComponent onPinChange={onPinChange} />);
+    // Real pointers land on the glyph-scale ring inside the grown target —
+    // activation must bubble through it to the floor's press handler.
+    const ring = floorFor("name").firstElementChild as HTMLElement;
+    fireEvent.click(ring);
+    await waitFor(() => expect(onPinChange).toHaveBeenCalledWith("name", "left"));
+  });
+
+  it("a pinned column keeps full rest opacity (honest active state)", async () => {
+    // 0.7 compiles to the `_o-0--7` atom (dots escape as double dashes).
+    renderWithProviders(<TestComponent />);
+    expect(floorFor("name").className).toMatch(/_o-0--7/);
+    fireEvent.click(floorFor("name"));
+    await waitFor(() => {
+      expect(screen.getByTestId("pinned-name")).toHaveTextContent("pinned");
+    });
+    expect(floorFor("name").className).not.toMatch(/_o-0--7/);
+  });
+
+  it("an inert trigger keeps its LC-40 dim and paints no ring hover", () => {
+    renderWithProviders(<TestComponent disabled />);
+    const floor = floorFor("name");
+    expect(floor.getAttribute("aria-disabled")).toBe("true");
+    expect(floor.className).toMatch(/_o-0--4/);
+    // Feedback on an inert control would promise an action it won't take —
+    // the ring's hover fill is gated off with the press handler.
+    const ring = floor.firstElementChild as HTMLElement;
+    expect(ring.className).not.toMatch(paintedStateAtom);
+  });
+});
+
 describe("useColumnPinning", () => {
   function HookTestComponent() {
     const table = useReactTable({

package/src/components/DataTableColumnPinning/index.tsx

@@ -236,21 +236,26 @@ export function DataTableColumnPinning<TData>(props: DataTableColumnPinningProps
             : t("Pin {{column}} column left", { column: columnLabel });
 
       return (
+        // LC-54 amendment (2026-08-13): the grown press target NEVER paints —
+        // hover/press fills on this box spread across the full 44px floor and
+        // bled into the neighboring header band via the negative outsets.
+        // Floor-wide feedback is subtree opacity; the painted hover chrome
+        // rides the glyph-scale ring inside (ColumnHeaderFilter anatomy).
         <View
-          padding="$1"
-          borderRadius="$2"
           cursor={next === "none" ? "default" : "pointer"}
           {...pressTargetStyle()}
-          flexDirection="row"
           alignItems="center"
           justifyContent="center"
-          gap={2}
           marginVertical={-PIN_TRIGGER_OUTSET}
           marginHorizontal={-PIN_TRIGGER_OUTSET}
           hitSlop={pressTargetHitSlop(PIN_TRIGGER_VISUAL)}
-          hoverStyle={{ backgroundColor: "$color4" }}
-          pressStyle={{ backgroundColor: "$color5" }}
-          opacity={next === "none" ? 0.4 : 1}
+          // Axiom 6 HONEST STATE: a pinned column is an active signal — it
+          // keeps full strength; the idle affordance rests dimmed. An inert
+          // trigger (LC-40: table disabled / both sides maxed) keeps its dim
+          // in every state — feedback would promise an action it won't take.
+          opacity={next === "none" ? 0.4 : pinned ? 1 : 0.7}
+          hoverStyle={{ opacity: next === "none" ? 0.4 : 1 }}
+          pressStyle={{ opacity: next === "none" ? 0.4 : 0.9 }}
           onPress={(e: any) => {
             e?.stopPropagation?.();
             if (next === "none") return;
@@ -260,16 +265,26 @@ export function DataTableColumnPinning<TData>(props: DataTableColumnPinningProps
           aria-label={label}
           aria-disabled={next === "none" || undefined}
         >
-          <PushPinIcon
-            size={14}
-            color={pinned ? "var(--accentColor)" : "var(--color10)"}
-            weight={pinned ? "fill" : "regular"}
-          />
-          {pinned && currentPosition ? (
-            <Text fontSize={10} color="$color10">
-              {currentPosition === "left" ? "L" : "R"}
-            </Text>
-          ) : null}
+          <View
+            padding="$1"
+            borderRadius="$2"
+            flexDirection="row"
+            alignItems="center"
+            justifyContent="center"
+            gap={2}
+            {...(next === "none" ? undefined : { hoverStyle: { backgroundColor: "$color4" } })}
+          >
+            <PushPinIcon
+              size={14}
+              color={pinned ? "var(--accentColor)" : "var(--color10)"}
+              weight={pinned ? "fill" : "regular"}
+            />
+            {pinned && currentPosition ? (
+              <Text fontSize={10} color="$color10">
+                {currentPosition === "left" ? "L" : "R"}
+              </Text>
+            ) : null}
+          </View>
         </View>
       );
     },

package/src/components/DataTableDateFilter/DataTableDateFilter.spec.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, screen, waitFor } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { formatAbsoluteDate } from "@multiplatform.one/theme";
 import React from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
@@ -67,7 +68,14 @@ describe("DataTableDateFilter", () => {
 
     renderWithProviders(<DataTableDateFilter value={value} />);
 
-    expect(screen.getByText(/Is Jan 15, 2024/)).toBeInTheDocument();
+    // The trigger renders an instant through the house absolute register
+    // (LC-12), which reads it in LOCAL time — so the day it names depends on
+    // the ambient zone: this one is Jan 16 at UTC+14. Deriving the label from
+    // the same register asserts the register was used, which is the contract;
+    // a hard-coded "Jan 15, 2024" asserted the host was at a non-positive
+    // offset, which is not.
+    const expected = formatAbsoluteDate(value.value, { year: "always" });
+    expect(screen.getByText(`Is ${expected}`)).toBeInTheDocument();
   });
 
   it("shows different display formats for different operators", () => {