@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/dist/Table/plugins/stickyColumns/useTableStickyColumns.js

@@ -12,11 +12,14 @@
  * - /packages/core/src/Table/Table.doc.mjs (sticky-columns documentation)
  * - /packages/core/src/Table/index.ts (exports)
  */
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../../../theme/tokens.stylex.js";
 import { colorVars, durationVars, easeVars } from "../../../theme/tokens.stylex.js";
 import { resolveColumnFloorWidths } from "../../columnUtils.js";
+import { collapsedBottom } from "../../rowDivider.js";
+import { GLIDING_ATTRIBUTE } from "../../glidingDivider.js";
+import { useTheme, useThemeName } from "../../../theme/useTheme.js";
 
 // =============================================================================
 // Config
@@ -32,7 +35,7 @@ import { resolveColumnFloorWidths } from "../../columnUtils.js";
  * the config conditionally (e.g. `endKeys: enabled ? ['notes'] : undefined`)
  * without branching on whether to install the plugin at all.
  */
-
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // =============================================================================
 // Width helpers
 // =============================================================================
@@ -131,6 +134,40 @@ function resolveStickySide(columns, columnKey, startKeys, endKeys) {
 // StyleX ancestor selectors are pseudo-class only — not scroll state.)
 const SHADOW_VAR_START = '--table-sticky-shadow-start';
 const SHADOW_VAR_END = '--table-sticky-shadow-end';
+
+// A pinned cell draws its own row divider. With collapsed borders the table
+// paints every border at its cell's static place: a sticky cell moves, its
+// border does not, so without this the line under a pinned column would be
+// whichever scrolled cell's border passes beneath it, and missing where that
+// cell has none. The cell's ::before (already the row overlay's layer) extends
+// over the cell's border area, covers whatever the table painted there with
+// the pinned base, and draws the divider in the cell's own border color and
+// style (inherited, so a theme, a token switch or an app's rule on the cell,
+// `:hover` included, carries over in CSS) at the cell's divider width
+// (TableCell.tsx). Where another border wins the collapse instead (an app's
+// border on the row, or the next row's top border), it is read after each
+// commit and on resize and carried as the cell's `carry` state
+// (syncPinnedDividers).
+const PINNED_ATTRIBUTE = 'data-astryx-table-pinned';
+/** Spread into a pinned cell's props: the attribute the divider sync finds. */
+const PINNED_PROPS = {
+  [PINNED_ATTRIBUTE]: ''
+};
+const CARRY = 'carry';
+const CARRYING = '[data-astryx-table-pinned="carry"]';
+// The cell's own border wins at another width than its divider's: only the
+// width is carried, and style and colour keep inheriting from the cell.
+const CARRY_WIDTH = 'width';
+const CELL_GLIDING = '[data-astryx-cell-gliding]';
+// Same names as glidingDivider.ts: StyleX cannot read an imported constant.
+const PINNED_DIVIDER_WIDTH = '--_table-row-divider-app-width';
+const PINNED_DIVIDER_STYLE = '--_table-row-divider-app-style';
+const PINNED_DIVIDER_COLOR = '--_table-row-divider-app-color';
+const PINNED_BASE = `var(--table-sticky-background, ${colorVars['--color-background-card']})`;
+const DIVIDER_WIDTH = `var(${PINNED_DIVIDER_WIDTH}, var(--_table-row-divider-width, 0px))`;
+// The row's divider, carried on the row while it glides (glidingDivider.ts):
+// it outranks the cell's own carry, which it would otherwise inherit under.
+const GLIDE_WIDTH = `var(--_table-row-glide-width, ${DIVIDER_WIDTH})`;
 const stickyStyles = {
   cell: {
     kVAEAm: "x7wzq59",
@@ -141,6 +178,16 @@ const stickyStyles = {
     kxmVGU: "xy5mcqj",
     km8f2m: "xkk1bqk",
     kLkRvE: "x1uvfo0n",
+    kgbC5f: "x3dkws7 x54l71j",
+    kTJRYx: "xhyqk6q xbbwlr6",
+    kjBTDo: "xp41i57 x1806tya x3gzqiz",
+    k1cwP5: "xp6skj9 x3mysge xvlxne",
+    k3DiCg: "x1xm21za",
+    k836YN: "x1e2fbwo xbirrqu",
+    kuPSpR: "xgw21jv",
+    kTP8oX: "xgaypha",
+    khXQ3S: "xjnwjuh",
+    k2irxo: "x1iobno9",
     k7KCAZ: "xxcwgru",
     kKXxxB: "x1y1nw7a",
     kqUdNP: "xa5v58t",
@@ -195,6 +242,101 @@ const shadowStyles = {
   }
 };
 
+// =============================================================================
+// Pinned dividers: app overrides
+// =============================================================================
+
+/**
+ * The pinned divider draws the border the table would paint under the cell.
+ * The cell's own border at its divider width: drawn in CSS, nothing carried.
+ * The cell's own border at another width (an app's 2 px `td` border): only
+ * the width is carried; style and colour inherit, so a restyle reaches it.
+ * A row's or a row group's border: nothing drawn, since the table paints it
+ * along the whole row. The next row's cell top: carried as values. Read after each commit and on resize, never on scroll.
+ * Every read comes before any write, and a cell is written only when what it
+ * carries changes.
+ */
+function syncPinnedDividers(root, rows) {
+  const changes = [];
+  const cells = rows == null ? root.querySelectorAll(`[${PINNED_ATTRIBUTE}]`) : [...rows].flatMap(row => [...row.querySelectorAll(`:scope > [${PINNED_ATTRIBUTE}]`)]);
+  for (const cell of cells) {
+    // A row a glide is moving carries its own divider for the glide (its
+    // cells' borders are transparent until it ends): leave it be.
+    if (cell.parentElement?.hasAttribute(GLIDING_ATTRIBUTE) === true) {
+      continue;
+    }
+    const edge = collapsedBottom(cell);
+    const dividerWidth = parseFloat(getComputedStyle(cell).getPropertyValue('--_table-row-divider-width')) || 0;
+    const carried = cell.getAttribute(PINNED_ATTRIBUTE);
+    if (edge.isOwn && edge.width === dividerWidth) {
+      if (carried !== '') {
+        changes.push([cell, '', null]);
+      }
+      continue;
+    }
+    // The cell's own border at another width: carry the width alone, so a
+    // restyle of its colour or style reaches the pinned divider in CSS.
+    if (edge.isOwn) {
+      const width = `${edge.width}px`;
+      if (carried !== CARRY_WIDTH || cell.style.getPropertyValue(PINNED_DIVIDER_WIDTH) !== width) {
+        changes.push([cell, CARRY_WIDTH, [width]]);
+      }
+      continue;
+    }
+    // A row's border (or a row group's) is painted by the table along the
+    // whole row, under the pinned cell too, and follows a restyle in CSS
+    // alone: the pinned cell draws nothing over it. Only a cell's border is
+    // copied as values.
+    const value = edge.isRow ? ['0px', 'none', 'transparent'] : [`${edge.width}px`, edge.style, edge.color];
+    const isSame = carried === CARRY && cell.style.getPropertyValue(PINNED_DIVIDER_WIDTH) === value[0] && cell.style.getPropertyValue(PINNED_DIVIDER_STYLE) === value[1] && cell.style.getPropertyValue(PINNED_DIVIDER_COLOR) === value[2];
+    if (!isSame) {
+      changes.push([cell, CARRY, value]);
+    }
+  }
+  for (const [cell, mode, value] of changes) {
+    cell.setAttribute(PINNED_ATTRIBUTE, mode);
+    const [width, style, color] = value ?? [];
+    for (const [name, next] of [[PINNED_DIVIDER_WIDTH, width], [PINNED_DIVIDER_STYLE, style], [PINNED_DIVIDER_COLOR, color]]) {
+      if (next == null) {
+        cell.style.removeProperty(name);
+      } else {
+        cell.style.setProperty(name, next);
+      }
+    }
+  }
+}
+
+/**
+ * Rendered inside the table: when the colour mode or the theme around it
+ * changes (a Theme's, wherever that Theme sits above the table, or the
+ * operating system's mode under `system`), the colours resolve again with no
+ * commit of the hook's owner, so the pinned dividers' carried borders are
+ * read again.
+ */
+function PinnedDividerModeWatch({
+  refreshRef
+}) {
+  const {
+    mode
+  } = useTheme();
+  const themeName = useThemeName();
+  const lastRef = useRef({
+    mode,
+    themeName
+  });
+  useLayoutEffect(() => {
+    const last = lastRef.current;
+    if (last.mode !== mode || last.themeName !== themeName) {
+      lastRef.current = {
+        mode,
+        themeName
+      };
+      refreshRef.current?.();
+    }
+  }, [mode, themeName, refreshRef]);
+  return null;
+}
+
 // Stable empty default so an unset start/end doesn't allocate a fresh array
 // (and bust the memo) on every render.
 const EMPTY = [];
@@ -237,9 +379,14 @@ export function useTableStickyColumns(config) {
   // listeners (synchronizing with the DOM) rather than React state, so
   // scrolling never triggers re-renders.
   const detachRef = useRef(null);
+  // Re-reads the edge shadows and the pinned dividers; set while attached.
+  const refreshRef = useRef(null);
+  // The scroll container's merged ref, kept while the inner ref is the same.
+  const mergedScrollWrapperRef = useRef(null);
   const attachScrollShadow = useCallback(el => {
     detachRef.current?.();
     detachRef.current = null;
+    refreshRef.current = null;
     if (!el) {
       return;
     }
@@ -265,18 +412,98 @@ export function useTableStickyColumns(config) {
         el.style.setProperty(SHADOW_VAR_END, hasOverflow && pos < maxScroll - 1 ? '1' : '0');
       }
     };
+    // Whether the pinned dividers were read since this attach.
+    let hasRead = false;
+    const resize = () => {
+      update();
+      syncPinnedDividers(el);
+      hasRead = true;
+    };
+    // The observer's first callback reports the size at observe time. The
+    // hook owner's after-commit read usually came first; a table mounted
+    // from state below that owner (a tab, a disclosure) attached without it,
+    // so the dividers are read here then.
+    let hasObserved = false;
+    const onResize = () => {
+      if (hasObserved || !hasRead) {
+        hasObserved = true;
+        resize();
+        return;
+      }
+      hasObserved = true;
+      update();
+    };
     el.addEventListener('scroll', update, {
       passive: true
     });
-    const resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(update) : null;
+    // A row border can change by CSS state alone (`tr:hover`,
+    // `:focus-within`): on pointer and focus changes, the rows they touch
+    // (and the row above each, whose divider a row's top border joins) are
+    // read again, once per frame.
+    const touched = new Set();
+    let frame = 0;
+    const onStateChange = event => {
+      for (const target of [event.target, event.relatedTarget]) {
+        const row = target instanceof Element ? target.closest('tr') : null;
+        if (row == null || !el.contains(row)) {
+          continue;
+        }
+        touched.add(row);
+        const above = row.previousElementSibling ?? row.parentElement?.previousElementSibling?.lastElementChild;
+        if (above != null) {
+          touched.add(above);
+        }
+      }
+      if (touched.size > 0 && frame === 0) {
+        frame = requestAnimationFrame(() => {
+          frame = 0;
+          syncPinnedDividers(el, new Set(touched));
+          touched.clear();
+        });
+      }
+    };
+    const stateEvents = ['pointerover', 'pointerout', 'focusin', 'focusout'];
+    for (const type of stateEvents) {
+      el.addEventListener(type, onStateChange, {
+        passive: true
+      });
+    }
+    const resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(onResize) : null;
     resizeObserver?.observe(el);
+    // The table too: columns added or widened change what scrolls without
+    // resizing the wrapper.
+    const table = el.querySelector('table');
+    if (table != null) {
+      resizeObserver?.observe(table);
+    }
+    // The pinned dividers are read after the commit that attached this
+    // (the refresh layout effect below), not here as well.
     update();
+    refreshRef.current = resize;
     detachRef.current = () => {
       el.removeEventListener('scroll', update);
+      for (const type of stateEvents) {
+        el.removeEventListener(type, onStateChange);
+      }
+      cancelAnimationFrame(frame);
       resizeObserver?.disconnect();
     };
   }, []);
+
+  // After each commit: a border that changed with the render (a row
+  // highlighted on click) reaches the pinned divider, and the edge shadows
+  // follow content that changed without a resize.
+  useLayoutEffect(() => {
+    refreshRef.current?.();
+  });
   return useMemo(() => ({
+    transformTableContext(children) {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [children, /*#__PURE__*/_jsx(PinnedDividerModeWatch, {
+          refreshRef: refreshRef
+        })]
+      });
+    },
     transformHeaderCell(props, column) {
       const {
         start: s,
@@ -309,6 +536,7 @@ export function useTableStickyColumns(config) {
         ...props,
         htmlProps: {
           ...props.htmlProps,
+          ...PINNED_PROPS,
           style: {
             ...props.htmlProps.style,
             ...offsetStyle
@@ -335,6 +563,7 @@ export function useTableStickyColumns(config) {
         ...props,
         htmlProps: {
           ...props.htmlProps,
+          ...PINNED_PROPS,
           style: {
             ...props.htmlProps.style,
             ...offsetStyle
@@ -349,9 +578,14 @@ export function useTableStickyColumns(config) {
         return props;
       }
       // Compose with any ref a prior plugin (e.g. virtualization) set on the
-      // scroll container.
-      const existingRef = props.htmlProps.ref;
-      const mergedRef = node => {
+      // scroll container. One merged ref per inner ref, so React does not
+      // re-attach it on every render while the plugins composed with this
+      // one keep theirs stable too (column resize does): the scroll
+      // listeners and the resize observer attach once, and the pinned
+      // dividers are read after each commit (the refresh effect).
+      const existingRef = props.htmlProps.ref ?? null;
+      const cached = mergedScrollWrapperRef.current;
+      const mergedRef = cached != null && cached.inner === existingRef ? cached.merged : node => {
         attachScrollShadow(node);
         if (typeof existingRef === 'function') {
           existingRef(node);
@@ -360,6 +594,10 @@ export function useTableStickyColumns(config) {
           existingRef.current = node;
         }
       };
+      mergedScrollWrapperRef.current = {
+        inner: existingRef,
+        merged: mergedRef
+      };
       return {
         ...props,
         htmlProps: {

package/dist/Table/rowDivider.d.ts

@@ -0,0 +1,34 @@
+export interface BottomEdge {
+    width: number;
+    style: string;
+    color: string;
+}
+/**
+ * The border the table paints under a cell, by the collapsing rules (CSS 2.1
+ * 17.6.2.1): of the cell's own bottom, the cell's below it (top), its row's
+ * bottom, the next row's top, and at a section edge (thead to tbody) the two
+ * row groups' borders, `hidden` wins, then the wider, then the stronger
+ * style; a tie goes to a cell over a row over a row group, and to the upper
+ * one. `isOwn` says the cell's own border won; `isRow` says a row's or a
+ * row group's won, which the table paints along the whole row.
+ */
+export declare function collapsedBottom(cell: HTMLTableCellElement): BottomEdge & {
+    isOwn: boolean;
+    isRow: boolean;
+};
+/**
+ * The divider a detail panel takes from its row: the color and style of the
+ * row's cells (a theme's `table-cell` styling or an app's own, which never
+ * reach the panel's cell), with their width where they set one, at the
+ * panel's own width otherwise, unless the row's own border wins the
+ * collapse (an app styling the `<tr>`), as custom property
+ * values for the panel's cell. Every value is written, `initial` where the
+ * panel keeps its own, so a panel nested in another never inherits that
+ * one's.
+ */
+export declare function panelDividerFor(row: Element): {
+    width: string;
+    style: string;
+    color: string;
+} | null;
+//# sourceMappingURL=rowDivider.d.ts.map

package/dist/Table/rowDivider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rowDivider.d.ts","sourceRoot":"","sources":["../../src/Table/rowDivider.ts"],"names":[],"mappings":"AA4BA,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AA6BD;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,oBAAoB,GAAG,UAAU,GAAG;IACxE,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;CAChB,CAyCA;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,OAAO,GAAG;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAuBP"}

package/dist/Table/rowDivider.js

@@ -0,0 +1,118 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file rowDivider.ts
+ * @input Table cells and rows, their computed borders
+ * @output Exports `collapsedBottom` (the border the table paints under a
+ *   cell, by the collapsing rules) and `panelDividerFor` (the divider a
+ *   detail panel takes from its row)
+ * @position Table internals, shared by the sticky-columns and row-expansion
+ *   plugins: a divider drawn somewhere else than the table paints it (a
+ *   pinned cell's, a detail panel's) reads here which border the table would
+ *   paint, so a theme's or an app's border carries over.
+ *
+ * SYNC: When modified, update plugins/stickyColumns and plugins/rowExpansion.
+ */
+
+/** Border styles by collapsed-border precedence, weakest first (CSS 2.1). */
+const STYLE_RANK = ['inset', 'groove', 'outset', 'ridge', 'dotted', 'dashed', 'solid', 'double'];
+function edgeOf(element, side) {
+  if (element == null) {
+    return {
+      width: 0,
+      style: 'none',
+      color: ''
+    };
+  }
+  const style = getComputedStyle(element);
+  return {
+    width: parseFloat(style.getPropertyValue(`border-${side.toLowerCase()}-width`)) || 0,
+    style: style.getPropertyValue(`border-${side.toLowerCase()}-style`),
+    color: style.getPropertyValue(`border-${side.toLowerCase()}-color`)
+  };
+}
+
+/** The row below `row`, across a section edge (thead to tbody) too. */
+function rowBelow(row) {
+  if (row == null) {
+    return null;
+  }
+  return row.nextElementSibling ?? row.parentElement?.nextElementSibling?.firstElementChild ?? null;
+}
+
+/**
+ * The border the table paints under a cell, by the collapsing rules (CSS 2.1
+ * 17.6.2.1): of the cell's own bottom, the cell's below it (top), its row's
+ * bottom, the next row's top, and at a section edge (thead to tbody) the two
+ * row groups' borders, `hidden` wins, then the wider, then the stronger
+ * style; a tie goes to a cell over a row over a row group, and to the upper
+ * one. `isOwn` says the cell's own border won; `isRow` says a row's or a
+ * row group's won, which the table paints along the whole row.
+ */
+export function collapsedBottom(cell) {
+  const row = cell.parentElement;
+  const nextRow = rowBelow(row);
+  const nextCell = nextRow?.children[cell.cellIndex] ?? null;
+  const isSectionEdge = row != null && row.nextElementSibling == null;
+  // In tie order.
+  const candidates = [edgeOf(cell, 'Bottom'), edgeOf(nextCell, 'Top'), edgeOf(row, 'Bottom'), edgeOf(nextRow, 'Top'), edgeOf(isSectionEdge ? row?.parentElement ?? null : null, 'Bottom'), edgeOf(isSectionEdge ? nextRow?.parentElement ?? null : null, 'Top')];
+  const own = candidates[0];
+  if (candidates.some(edge => edge.style === 'hidden')) {
+    return {
+      width: 0,
+      style: 'none',
+      color: own.color,
+      isOwn: own.style === 'hidden',
+      isRow: false
+    };
+  }
+  const strength = edge => edge.style === 'none' || edge.width === 0 ? [-1, -1] : [edge.width, STYLE_RANK.indexOf(edge.style)];
+  let winner = own;
+  for (const edge of candidates.slice(1)) {
+    const [width, rank] = strength(edge);
+    const [bestWidth, bestRank] = strength(winner);
+    if (width > bestWidth || width === bestWidth && rank > bestRank) {
+      winner = edge;
+    }
+  }
+  return {
+    ...winner,
+    isOwn: winner === own,
+    isRow: candidates.indexOf(winner) >= 2
+  };
+}
+
+/**
+ * The divider a detail panel takes from its row: the color and style of the
+ * row's cells (a theme's `table-cell` styling or an app's own, which never
+ * reach the panel's cell), with their width where they set one, at the
+ * panel's own width otherwise, unless the row's own border wins the
+ * collapse (an app styling the `<tr>`), as custom property
+ * values for the panel's cell. Every value is written, `initial` where the
+ * panel keeps its own, so a panel nested in another never inherits that
+ * one's.
+ */
+export function panelDividerFor(row) {
+  const rowCell = row.lastElementChild;
+  if (rowCell == null) {
+    return null;
+  }
+  const rowStyle = getComputedStyle(row);
+  const rowWidth = parseFloat(rowStyle.borderBottomWidth) || 0;
+  if (rowStyle.borderBottomStyle !== 'none' && rowWidth > 0) {
+    return {
+      width: `${rowWidth}px`,
+      style: rowStyle.borderBottomStyle,
+      color: rowStyle.borderBottomColor
+    };
+  }
+  const cellStyle = getComputedStyle(rowCell);
+  // The row's cells hand their divider down (their own width is 0); a width
+  // an app or a theme sets on them anyway is the divider's.
+  const cellWidth = parseFloat(cellStyle.borderBottomWidth) || 0;
+  return {
+    width: cellWidth > 0 ? `${cellWidth}px` : 'initial',
+    style: cellStyle.borderBottomStyle,
+    color: cellStyle.borderBottomColor
+  };
+}

package/dist/TextArea/TextArea.d.ts

@@ -76,7 +76,9 @@ export interface TextAreaProps extends Omit<FieldInputBaseProps, 'onChange' | 'd
      */
     rows?: number;
     /**
-     * Whether the textarea is disabled.
+     * Whether the textarea is disabled. A disabled textarea is dimmed, cannot be
+     * edited, and is left out of form submission, but it stays in the tab order
+     * (`aria-disabled`, not the native attribute).
      * @default false
      */
     isDisabled?: boolean;
@@ -84,7 +86,7 @@ export interface TextAreaProps extends Omit<FieldInputBaseProps, 'onChange' | 'd
      * Whether the textarea is read-only.
      * The value is shown at full opacity and still submits with the form, but
      * cannot be edited. Unlike `isDisabled`, a read-only textarea is not dimmed
-     * and stays in the tab order — use it for a value the user should see and
+     * and keeps its form value — use it for a value the user should see and
      * send but not change. `isDisabled` takes precedence when both are set.
      * @default false
      */
@@ -96,8 +98,8 @@ export interface TextAreaProps extends Omit<FieldInputBaseProps, 'onChange' | 'd
      * discoverable by keyboard and assistive technology. The field cannot be
      * edited (it becomes read-only) while disabled.
      *
-     * Use this instead of wrapping a disabled textarea in `Tooltip` — disabled
-     * controls don't emit the pointer events an external tooltip needs.
+     * Use this instead of wrapping a disabled textarea in `Tooltip`, so the
+     * reason is attached to the field itself.
      *
      * @example
      * ```

package/dist/TextArea/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../src/TextArea/TextArea.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../src/TextArea/TextArea.tsx"],"names":[],"mappings":"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"}

package/dist/TextArea/TextArea.js

@@ -25,6 +25,7 @@ import { Spinner } from "../Spinner/index.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { mergeProps } from "../utils/index.js";
 import { useFieldInputStyling } from "../Field/fieldParts.js";
+import { inputDisabledFocusStyles } from "../Field/inputDisabledFocus.js";
 import { useInputContainer } from "../hooks/useInputContainer.js";
 import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
 import { useAnnounce } from "../hooks/useAnnounce.js";
@@ -178,12 +179,14 @@ export function TextArea({
   // (spec:AST-086 FR8).
   useBusyAnnouncement(isBusy, t('@astryx.spinner.loading'), containerRef);
 
-  // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
-  // tooltip listeners attach to the textarea container (which already exists)
+  // Disabled-reason tooltip. The tooltip listeners attach to the textarea container (which already exists)
   // and the textarea stays perceivable via aria-disabled instead of the native
   // disabled attribute. The field is made read-only so it can't be typed into,
   // and value mutation is blocked by the isDisabled guard in handleChange.
   const showsDisabledMessage = isDisabled && !!disabledMessage;
+  // A disabled field keeps its tab stop but, like a natively disabled one,
+  // runs no caller event handler other than focus and blur (`spec:AST-085` FR2).
+  const fieldProps = isDisabled ? Object.fromEntries(Object.entries(rest).filter(([key]) => !/^on[A-Z]/.test(key) || /^on(Focus|Blur)/.test(key))) : rest;
   const disabledMessageTooltip = useTooltip({
     placement: 'above',
     // The container div is not naturally focusable; focusin bubbles up from
@@ -297,7 +300,7 @@ export function TextArea({
         status: status?.type ?? null,
         disabled: isDisabled ? 'disabled' : null,
         readonly: isReadOnly ? 'readonly' : null
-      }), stylex.props(inputWrapperStyles.base, styles.wrapper, isDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], controlXstyle), controlClassName, controlStyle),
+      }), stylex.props(inputWrapperStyles.base, styles.wrapper, isDisabled && inputWrapperStyles.disabled, isDisabled && inputDisabledFocusStyles.ring, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], controlXstyle), controlClassName, controlStyle),
       children: [startIcon && /*#__PURE__*/_jsx("span", {
         ...{
           className: "x10l6tqk xctzyg x1kiyvbf x47corl x78zum5"
@@ -307,24 +310,24 @@ export function TextArea({
           color: 'secondary'
         })
       }), /*#__PURE__*/_jsx("textarea", {
-        ...rest,
+        ...fieldProps,
         ref: useMergedRefs(ref, textareaRef),
         id: id,
         name: isDisabled ? undefined : htmlName,
         value: optimisticValue,
         onChange: handleChange,
-        onPaste: onPaste,
+        onPaste: isDisabled ? undefined : onPaste,
         onFocus: onFocus,
         onBlur: onBlur,
         placeholder: placeholder,
         rows: rows
-        // With a disabledMessage the textarea keeps focusability via
-        // aria-disabled so the reason is focus-discoverable; readOnly + the
-        // handleChange guard keep the value from changing.
+        // A disabled textarea keeps its place in the tab order
+        // (spec:AST-085): aria-disabled instead of the native attribute,
+        // with readOnly + the handleChange guard keeping the value from
+        // changing.
         ,
-        disabled: isDisabled && !showsDisabledMessage,
-        "aria-disabled": showsDisabledMessage ? 'true' : undefined,
-        readOnly: isReadOnly || showsDisabledMessage || undefined,
+        "aria-disabled": isDisabled ? 'true' : undefined,
+        readOnly: isReadOnly || isDisabled || undefined,
         spellCheck: hasSpellCheck,
         autoFocus: hasAutoFocus,
         "data-autofocus": hasAutoFocus || undefined,
@@ -354,7 +357,7 @@ export function TextArea({
             className: "x10l6tqk x112dmjn x13oyzgk x47corl x78zum5 x6s0dn4 xzye2dw x9ynric x141an7d x1ltkj2j xv1l7n4"
           },
           1: {
-            className: "x10l6tqk x112dmjn x13oyzgk x47corl x78zum5 x6s0dn4 xzye2dw x9ynric x141an7d x1ltkj2j xjt36v0"
+            className: "x10l6tqk x112dmjn x13oyzgk x47corl x78zum5 x6s0dn4 xzye2dw x9ynric x141an7d x1ltkj2j x1wj83wy"
           }
         }[!!(valueLength > maxLength) << 0]),
         children: [valueLength > maxLength &&

package/dist/TextInput/TextInput.d.ts

@@ -63,7 +63,9 @@ export interface TextInputProps extends Omit<FieldInputBaseProps, 'onChange' | '
      */
     isRequired?: boolean;
     /**
-     * Whether the input is disabled.
+     * Whether the input is disabled. A disabled input is dimmed, cannot be
+     * edited, and is left out of form submission, but it stays in the tab order
+     * (`aria-disabled`, not the native attribute).
      * @default false
      */
     isDisabled?: boolean;
@@ -71,7 +73,7 @@ export interface TextInputProps extends Omit<FieldInputBaseProps, 'onChange' | '
      * Whether the input is read-only.
      * The value is shown at full opacity and still submits with the form, but
      * cannot be edited. Unlike `isDisabled`, a read-only input is not dimmed and
-     * stays in the tab order — use it for a value the user should see and send
+     * keeps its form value — use it for a value the user should see and send
      * but not change. `isDisabled` takes precedence when both are set.
      * @default false
      */
@@ -83,8 +85,8 @@ export interface TextInputProps extends Omit<FieldInputBaseProps, 'onChange' | '
      * keyboard and assistive technology. The field cannot be edited (it becomes
      * read-only) while disabled.
      *
-     * Use this instead of wrapping a disabled input in `Tooltip` — disabled
-     * controls don't emit the pointer events an external tooltip needs.
+     * Use this instead of wrapping a disabled input in `Tooltip`, so the reason
+     * is attached to the field itself.
      *
      * @example
      * ```
@@ -190,7 +192,7 @@ export interface TextInputProps extends Omit<FieldInputBaseProps, 'onChange' | '
  * <TextInput label="Search" isLabelHidden value={query} onChange={setQuery} />
  * ```
  */
-export declare function TextInput({ type, label, isLabelHidden, description, isOptional, isRequired, isDisabled, isReadOnly, disabledMessage, startIcon, status, statusVariant, size: sizeProp, onChange, changeAction, isLoading, value, placeholder, labelTooltip, hasClear, hasAutoFocus, htmlName, onEnter, onKeyDown, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, ref, id: idProp, 'aria-describedby': ariaDescribedByProp, ...restProps }: TextInputProps): import("react").JSX.Element;
+export declare function TextInput({ type, label, isLabelHidden, description, isOptional, isRequired, isDisabled: isDisabledProp, isReadOnly, disabledMessage, startIcon, status, statusVariant, size: sizeProp, onChange, changeAction, isLoading, value, placeholder, labelTooltip, hasClear, hasAutoFocus, htmlName, onEnter, onKeyDown, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, ref, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-labelledby': ariaLabelledByProp, ...restProps }: TextInputProps): import("react").JSX.Element;
 export declare namespace TextInput {
     var displayName: string;
 }