@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js

@@ -17,12 +17,14 @@
  * - /packages/core/src/Table/index.ts (exports)
  * - /packages/core/src/Table/useTableRowExpansion.doc.mjs
  */
-import { useMemo, useRef } from 'react';
+import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../../../theme/tokens.stylex.js";
 import { spacingVars, colorVars, radiusVars, borderVars, durationVars, easeVars } from "../../../theme/tokens.stylex.js";
 import "../../table.stylex.js";
 import { tableRowMarker } from "../../table.stylex.js";
+import { panelDividerFor } from "../../rowDivider.js";
+import { useTheme, useThemeName } from "../../../theme/useTheme.js";
 import { Icon } from "../../../Icon/index.js";
 import { VisuallyHidden } from "../../../VisuallyHidden/index.js";
 import { resolveContextActions } from "../../tableContextMenu.js";
@@ -30,6 +32,9 @@ import { useTableContext } from "../../useTableCellStyles.js";
 import { useTranslator } from "../../../i18n/index.js";
 import { rtlStyles } from "../../../utils/index.js";
 import { hasInteractiveAncestor, hasTextSelection } from "../../../hooks/useClickableContainer.js";
+import { LayoutChangeSnapshot } from "../../../motion/LayoutChangeSnapshot.js";
+import { applyLayoutChangeTransition, glideOf, playLayoutChange, reportLayoutChange } from "../../../motion/animatedLayout.js";
+import { GLIDING_ATTRIBUTE, glidingDividerStyles, markGlidingRows, rowEdge } from "../../glidingDivider.js";
 
 // =============================================================================
 // Config
@@ -127,13 +132,15 @@ const expansionStyles = {
  */
 const dividerStyles = {
   expandedRowCell: {
+    "--_table-row-divider-width": "xfips5p",
     kt9PQ7: "x1qhh985",
     $$css: true
   },
   panelCell: {
-    kt9PQ7: "x92x3c3 x1wp2rvj",
-    kfdmCh: "x1q0q8m5",
-    kL6WhQ: "xw8gpjh",
+    "--_table-row-divider-width": "x3zcg35 x1gxz47l",
+    kt9PQ7: "xkm11vt x1wp2rvj",
+    kfdmCh: "xytfs1h",
+    kL6WhQ: "x1gu98mf",
     $$css: true
   }
 };
@@ -219,6 +226,7 @@ function ExpansionChevron({
   const ctx = useTableContext();
   return /*#__PURE__*/_jsx("button", {
     type: "button",
+    "data-expansion-toggle": "",
     ...stylex.props(expansionStyles.chevronButton, chevronOffsetStyles[ctx?.density ?? 'balanced']),
     onClick: e => {
       e.stopPropagation();
@@ -233,6 +241,69 @@ function ExpansionChevron({
     })
   });
 }
+const PANEL_DIVIDER_PROPERTIES = ['--_table-panel-divider-width', '--_table-panel-divider-style', '--_table-panel-divider-color'];
+
+/**
+ * Carries the row's divider onto a panel cell where an override makes it
+ * differ from what the panel paints on its own (the divider tokens, in CSS),
+ * and carries nothing otherwise, so a later token or theme change reaches
+ * the panel the way it reaches the row.
+ */
+function carryPanelDivider(cell) {
+  const row = cell.parentElement?.previousElementSibling;
+  const edge = row == null ? null : panelDividerFor(row);
+  if (edge == null) {
+    return;
+  }
+  // What the panel paints with nothing carried.
+  const carried = PANEL_DIVIDER_PROPERTIES.map(name => cell.style.getPropertyValue(name));
+  if (carried.some(value => value !== '')) {
+    for (const name of PANEL_DIVIDER_PROPERTIES) {
+      cell.style.removeProperty(name);
+    }
+  }
+  const own = getComputedStyle(cell);
+  const isOverride = edge.color !== own.borderBottomColor || edge.style !== own.borderBottomStyle || edge.width !== 'initial' && edge.width !== own.borderBottomWidth;
+  if (!isOverride) {
+    return;
+  }
+  const next = [edge.width, edge.style, edge.color];
+  PANEL_DIVIDER_PROPERTIES.forEach((name, index) => {
+    cell.style.setProperty(name, next[index]);
+  });
+}
+
+/**
+ * One per table: when the colour mode or the theme changes (a Theme's, or
+ * the operating system's mode under `system`) the open panels' carried
+ * dividers are read again. The panels register their cells with the hook.
+ */
+function PanelDividerModeWatch({
+  cellsRef
+}) {
+  const {
+    mode
+  } = useTheme();
+  const themeName = useThemeName();
+  const lastRef = useRef({
+    mode,
+    themeName
+  });
+  useLayoutEffect(() => {
+    const last = lastRef.current;
+    if (last.mode === mode && last.themeName === themeName) {
+      return;
+    }
+    lastRef.current = {
+      mode,
+      themeName
+    };
+    for (const cell of cellsRef.current) {
+      carryPanelDivider(cell);
+    }
+  }, [mode, themeName, cellsRef]);
+  return null;
+}
 
 /**
  * The detail panel's cell. A component rather than a bare `<td>` so it can
@@ -243,17 +314,86 @@ function ExpansionChevron({
  */
 function ExpansionPanelCell({
   colSpan,
+  cellsRef,
   children
 }) {
   const ctx = useTableContext();
   const hasRowDividers = ctx?.dividers === 'rows' || ctx?.dividers === 'grid';
+  const cellRef = useRef(null);
+  // The panel carries its row's divider (a theme's `table-cell` border or an
+  // app's own never reach this cell, which is not one of the row's cells).
+  // Read after each commit, and on a colour-mode change by the table's one
+  // PanelDividerModeWatch.
+  useLayoutEffect(() => {
+    const cell = cellRef.current;
+    const row = cell?.parentElement?.previousElementSibling;
+    if (cell == null || row == null || !hasRowDividers) {
+      return;
+    }
+    if (!row.hasAttribute(GLIDING_ATTRIBUTE)) {
+      carryPanelDivider(cell);
+      return;
+    }
+    // A row a glide is moving has transparent cells until it ends: the
+    // panel reads its row once the glide has let it go.
+    let frame = 0;
+    const carryWhenStill = () => {
+      if (row.hasAttribute(GLIDING_ATTRIBUTE)) {
+        frame = requestAnimationFrame(carryWhenStill);
+        return;
+      }
+      carryPanelDivider(cell);
+    };
+    frame = requestAnimationFrame(carryWhenStill);
+    return () => cancelAnimationFrame(frame);
+  });
+  useLayoutEffect(() => {
+    const cell = cellRef.current;
+    if (cell == null || !hasRowDividers) {
+      return;
+    }
+    const cells = cellsRef.current;
+    cells.add(cell);
+    return () => {
+      cells.delete(cell);
+    };
+  }, [cellsRef, hasRowDividers]);
   return /*#__PURE__*/_jsx("td", {
+    ref: cellRef,
     colSpan: colSpan,
-    ...stylex.props(expansionStyles.expandedCell, panelIndentStyles[ctx?.density ?? 'balanced'], hasRowDividers && dividerStyles.panelCell),
+    ...stylex.props(expansionStyles.expandedCell, panelIndentStyles[ctx?.density ?? 'balanced'], hasRowDividers && dividerStyles.panelCell, glidingDividerStyles.cell, hasRowDividers && glidingDividerStyles.panelCell),
     children: children
   });
 }
 
+/**
+ * Measures each expansion change for the glide, except in a table with
+ * column lines (`dividers` "columns" or "grid"): they are painted at the
+ * cells' static places too, and only row dividers have a moving stand-in, so
+ * such a table changes at once, panel, rows and chevron, as without a handle
+ * (component:Table FR15).
+ */
+function ExpansionSnapshot({
+  value,
+  onBeforeChange,
+  onColumnLines
+}) {
+  const ctx = useTableContext();
+  const hasColumnLines = ctx?.dividers === 'grid' || ctx?.dividers === 'columns';
+  useLayoutEffect(() => {
+    if (hasColumnLines) {
+      onColumnLines();
+    }
+  }, [hasColumnLines, onColumnLines]);
+  if (hasColumnLines) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(LayoutChangeSnapshot, {
+    value: value,
+    onBeforeChange: onBeforeChange
+  });
+}
+
 // =============================================================================
 // Hook
 // =============================================================================
@@ -293,13 +433,181 @@ export function useTableRowExpansion(config) {
     renderExpanded,
     getIsItemExpandable,
     hasRowClickExpansion,
-    panelVariant = 'transparent'
+    panelVariant = 'transparent',
+    animatedLayout
   } = config;
   const t = useTranslator();
 
   // Final rendered column count, captured in transformColumns (pipeline step
   // 1) and read in transformBodyRow for the detail panel's colSpan.
   const columnCountRef = useRef(1);
+  // The open panels' cells, for the table's one colour-mode watch.
+  const panelCellsRef = useRef(new Set());
+
+  // With an `animatedLayout` handle, a panel opening or closing glides the
+  // rows after it (`spec:AST-105`, `architecture:react-component-runtime`
+  // INV12). LayoutChangeSnapshot measures each changed row in the commit,
+  // before the DOM changes; the layout effect below runs the glide after it.
+  const scrollWrapperRef = useRef(null);
+  // The scroll wrapper's merged ref, kept while the inner ref is the same.
+  const mergedScrollWrapperRef = useRef(null);
+  const pendingLayoutRef = useRef([]);
+  // The height the closing panels gave up (read with the measurement), and
+  // the height the scroll wrapper holds while rows glide up into it (see the
+  // layout effect).
+  const closedHeightRef = useRef(0);
+  const heldHeightRef = useRef(0);
+  const holdBaseRef = useRef(null);
+  // This table's own body rows only: a table nested in a panel can reuse the
+  // same row keys. The first table in the wrapper is this one.
+  const rowFor = useCallback(key => scrollWrapperRef.current?.querySelector('table')?.querySelector(`:scope > tbody > tr[data-expansion-key="${CSS.escape(key)}"]`) ?? null, []);
+  const measureChanges = useCallback(previous => {
+    if (animatedLayout == null) {
+      return;
+    }
+    const changed = [...[...previous].filter(key => !expandedKeys.has(key)), ...[...expandedKeys].filter(key => !previous.has(key))];
+    for (const key of changed) {
+      const row = rowFor(key);
+      if (row == null) {
+        continue;
+      }
+      const change = reportLayoutChange(animatedLayout, () => row);
+      change.measureBefore();
+      // A closing panel's height, read in the same layout the measurement
+      // just read.
+      const panel = row.nextElementSibling;
+      if (!expandedKeys.has(key) && panel?.hasAttribute('data-expansion-panel') === true) {
+        closedHeightRef.current += panel.getBoundingClientRect().height;
+        // The wrapper's own bottom padding and margin (a container's
+        // bleed), which the hold adds to rather than replaces.
+        const wrapper = scrollWrapperRef.current;
+        if (wrapper != null && holdBaseRef.current == null) {
+          const style = getComputedStyle(wrapper);
+          holdBaseRef.current = {
+            padding: parseFloat(style.paddingBlockEnd) || 0,
+            margin: parseFloat(style.marginBlockEnd) || 0
+          };
+        }
+      }
+      // The chevron turns on the glide's motion (component:Table FR15);
+      // written after the measurement so the read finds the layout clean.
+      applyLayoutChangeTransition(animatedLayout, row.querySelector('[data-expansion-toggle] > *'));
+      pendingLayoutRef.current.push({
+        change,
+        key,
+        isExpanding: expandedKeys.has(key)
+      });
+    }
+  }, [animatedLayout, expandedKeys, rowFor]);
+  // The chevrons back on the theme's own turn: a spring a handle set stays
+  // only while the glide runs (`spec:AST-105` FR2), so it goes without a
+  // handle and in a table with column lines.
+  const resetChevrons = useCallback(() => {
+    const table = scrollWrapperRef.current?.querySelector('table');
+    for (const glyph of table?.querySelectorAll('[data-expansion-toggle] > *') ?? []) {
+      // This table's chevrons, not a nested table's.
+      if (glyph.closest('table') === table) {
+        applyLayoutChangeTransition(null, glyph);
+      }
+    }
+  }, []);
+  useLayoutEffect(() => {
+    if (animatedLayout == null) {
+      resetChevrons();
+    }
+  }, [animatedLayout, resetChevrons]);
+  useLayoutEffect(() => {
+    const pendings = pendingLayoutRef.current;
+    pendingLayoutRef.current = [];
+    // The rows that changed, each with the panel it opened (if that panel
+    // plays in) and the borders of the rows the glide may move.
+    const moved = [];
+    for (const pending of pendings) {
+      const row = rowFor(pending.key);
+      if (row == null) {
+        pending.change.animate();
+        continue;
+      }
+      const next = row.nextElementSibling;
+      // Filled in by beforeMove, during the glide's own microtask.
+      const record = {
+        row,
+        panel: pending.isExpanding && next instanceof HTMLElement && next.hasAttribute('data-expansion-panel') ? next : null,
+        entrance: null,
+        edges: new Map()
+      };
+      // Read where the glide reads the layout, before anything moves: the
+      // rows' borders, then the panel's entrance (it reads too).
+      const isMeasured = pending.change.animate(candidates => {
+        for (const candidate of candidates) {
+          if (candidate instanceof HTMLTableRowElement && candidate.parentElement === row.parentElement) {
+            const edge = rowEdge(candidate);
+            if (edge != null) {
+              record.edges.set(candidate, edge);
+            }
+          }
+        }
+        if (record.panel != null) {
+          const edge = rowEdge(record.panel);
+          if (edge != null) {
+            record.edges.set(record.panel, edge);
+          }
+          record.entrance = playLayoutChange(animatedLayout, record.panel);
+        }
+      });
+      if (isMeasured) {
+        moved.push(record);
+      }
+    }
+    // The table's scroll wrapper clips what it holds, and a panel that closed
+    // shrank it at once: the rows gliding up into its place would be cut off
+    // at its new bottom until they arrive. For the glide, it keeps the height
+    // the panels gave up as bottom padding, given back with an equal negative
+    // margin so the content after the table moves exactly as it would have;
+    // both go together when the rows stop, which changes nothing outside.
+    const wrapper = scrollWrapperRef.current;
+    const held = moved.length > 0 ? closedHeightRef.current : 0;
+    closedHeightRef.current = 0;
+    if (heldHeightRef.current === 0 && held <= 0.5) {
+      holdBaseRef.current = null;
+    }
+    if (moved.length === 0) {
+      return;
+    }
+    // The glide starts in the microtask the module queued in animate(); this
+    // one runs after it, before the frame paints, and only writes.
+    queueMicrotask(() => {
+      const stopped = Promise.all(moved.map(async ({
+        row,
+        panel,
+        entrance,
+        edges
+      }) => markGlidingRows(row, edges, panel != null && entrance != null ? {
+        row: panel,
+        animation: entrance
+      } : null, glideOf)));
+      if (held <= 0.5 || wrapper == null) {
+        return;
+      }
+      const hold = height => {
+        const base = holdBaseRef.current ?? {
+          padding: 0,
+          margin: 0
+        };
+        wrapper.style.paddingBlockEnd = height > 0 ? `${base.padding + height}px` : '';
+        wrapper.style.marginBlockEnd = height > 0 ? `${base.margin - height}px` : '';
+        if (height <= 0) {
+          holdBaseRef.current = null;
+        }
+      };
+      heldHeightRef.current += held;
+      hold(heldHeightRef.current);
+      void stopped.then(() => {
+        heldHeightRef.current = Math.max(0, heldHeightRef.current - held);
+        hold(heldHeightRef.current);
+      });
+    });
+  }, [expandedKeys, animatedLayout, rowFor]);
   const expansionColumn = useMemo(() => ({
     key: EXPANSION_COLUMN_KEY,
     // A `<th>` with no discernible text is announced as an unlabelled
@@ -322,6 +630,14 @@ export function useTableRowExpansion(config) {
     }
   }), [expandedKeys, onToggle, getRowKey, getIsItemExpandable, t]);
   return useMemo(() => ({
+    // One colour-mode watch per table for the open panels' dividers.
+    transformTableContext(children) {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [children, /*#__PURE__*/_jsx(PanelDividerModeWatch, {
+          cellsRef: panelCellsRef
+        })]
+      });
+    },
     transformColumns(columns) {
       const withExpansion = [expansionColumn, ...columns];
       columnCountRef.current = withExpansion.length;
@@ -368,20 +684,64 @@ export function useTableRowExpansion(config) {
         }]
       };
     },
+    transformScrollWrapper(props) {
+      // One merged ref per inner ref, so React does not detach and
+      // re-attach the wrapper's refs (a later plugin's listeners
+      // included) on every render.
+      const existingRef = props.htmlProps.ref ?? null;
+      const cached = mergedScrollWrapperRef.current;
+      const mergedRef = cached != null && cached.inner === existingRef ? cached.merged : node => {
+        scrollWrapperRef.current = node;
+        if (typeof existingRef === 'function') {
+          existingRef(node);
+        } else if (existingRef != null) {
+          existingRef.current = node;
+        }
+      };
+      mergedScrollWrapperRef.current = {
+        inner: existingRef,
+        merged: mergedRef
+      };
+      return {
+        ...props,
+        htmlProps: {
+          ...props.htmlProps,
+          ref: mergedRef
+        },
+        beforeTable: animatedLayout == null ? props.beforeTable : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [props.beforeTable, /*#__PURE__*/_jsx(ExpansionSnapshot, {
+            value: expandedKeys,
+            onBeforeChange: measureChanges,
+            onColumnLines: resetChevrons
+          })]
+        })
+      };
+    },
     transformBodyRow(props, item) {
       const expandable = getIsItemExpandable ? getIsItemExpandable(item) : true;
       if (!expandable) {
         return props;
       }
       const key = getRowKey(item);
+      // The row a glide measures from, found again after the commit.
+      const keyAttribute = {
+        'data-expansion-key': key
+      };
+      const keyed = {
+        ...props,
+        htmlProps: {
+          ...props.htmlProps,
+          ...keyAttribute
+        }
+      };
 
       // Whole-row-click expansion (opt-in), applied before the collapsed
       // early-return: a collapsed row is precisely the one a click has to
       // reach, since opening it is the whole point.
       const withClick = hasRowClickExpansion ? {
-        ...props,
+        ...keyed,
         htmlProps: {
-          ...props.htmlProps,
+          ...keyed.htmlProps,
           onClick: event => {
             // Don't hijack clicks on interactive cell content (the
             // chevron already stops propagation, but a composed
@@ -410,12 +770,12 @@ export function useTableRowExpansion(config) {
             if (hasTextSelection(row)) {
               return;
             }
-            props.htmlProps.onClick?.(event);
+            keyed.htmlProps.onClick?.(event);
             onToggle(key);
           }
         },
-        xstyle: [...props.xstyle, expansionStyles.clickableRow]
-      } : props;
+        xstyle: [...keyed.xstyle, expansionStyles.clickableRow]
+      } : keyed;
       if (!expandedKeys.has(key)) {
         return withClick;
       }
@@ -428,9 +788,10 @@ export function useTableRowExpansion(config) {
         ...stylex.props(
         // Carries the marker so the panel cell's divider can ask whether
         // this row is the table's last, the same way TableCell does.
-        tableRowMarker, panelVariant === 'muted' && expansionStyles.expandedRow),
+        tableRowMarker, panelVariant === 'muted' && expansionStyles.expandedRow, glidingDividerStyles.row),
         children: /*#__PURE__*/_jsx(ExpansionPanelCell, {
           colSpan: columnCountRef.current,
+          cellsRef: panelCellsRef,
           children: renderExpanded(item)
         })
       }, `${key}-expanded`);
@@ -441,5 +802,5 @@ export function useTableRowExpansion(config) {
         }) : panel
       };
     }
-  }), [expandedKeys, getRowKey, renderExpanded, getIsItemExpandable, hasRowClickExpansion, panelVariant, onToggle, t, expansionColumn]);
+  }), [expandedKeys, getRowKey, renderExpanded, getIsItemExpandable, hasRowClickExpansion, panelVariant, onToggle, t, expansionColumn, animatedLayout, measureChanges, resetChevrons]);
 }

package/dist/Table/plugins/stickyColumns/useTableStickyColumns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableStickyColumns.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/stickyColumns/useTableStickyColumns.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAEV,WAAW,EAIZ,MAAM,aAAa,CAAC;AAOrB;;;;;;;;;GASG;AACH,MAAM,WAAW,2BAA2B;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAsND,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACrE,MAAM,EAAE,2BAA2B,GAClC,WAAW,CAAC,CAAC,CAAC,CAoKhB"}
+{"version":3,"file":"useTableStickyColumns.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/stickyColumns/useTableStickyColumns.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAEV,WAAW,EAIZ,MAAM,aAAa,CAAC;AAUrB;;;;;;;;;GASG;AACH,MAAM,WAAW,2BAA2B;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAsYD,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACrE,MAAM,EAAE,2BAA2B,GAClC,WAAW,CAAC,CAAC,CAAC,CAqRhB"}