@moneyforward/mfui-components 4.3.0 → 4.5.0

package/dist/src/utilities/dom/useTableEdgeCellMarkers.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Marks a cell that is `:first-child` in its row but does **not** render in the table's first
+ * grid column, because a `rowSpan` from an earlier row occupies that column.
+ *
+ * The value is always `"false"`: the attribute only ever cancels the table-edge affordance, it
+ * never grants one. A cell that genuinely sits at the edge carries no attribute at all, so the
+ * class list of every cell in a table without `rowSpan` stays untouched.
+ *
+ * The DataTable cell recipes match this attribute, and the name has to be written there as a
+ * literal because PandaCSS extracts selector keys statically and cannot resolve an imported
+ * constant. `useTableEdgeCellMarkers.test.tsx` asserts that the two sides stay in sync.
+ */
+export declare const TABLE_START_EDGE_ATTRIBUTE = "data-mfui-table-start-edge";
+/**
+ * The `:last-child` mirror of {@link TABLE_START_EDGE_ATTRIBUTE}: the cell is last in its row but
+ * the table has further grid columns that a `rowSpan` from an earlier row occupies.
+ */
+export declare const TABLE_END_EDGE_ATTRIBUTE = "data-mfui-table-end-edge";
+/** The only value either marker attribute is ever set to. */
+export declare const TABLE_EDGE_MARKER_VALUE = "false";
+type TableEdgeAttribute = typeof TABLE_START_EDGE_ATTRIBUTE | typeof TABLE_END_EDGE_ATTRIBUTE;
+type DisplacedEdgeCell = {
+    cell: HTMLTableCellElement;
+    attribute: TableEdgeAttribute;
+};
+/**
+ * Finds the cells whose position in source order disagrees with their rendered grid column.
+ *
+ * Each row group is walked into an occupancy grid, so that every cell gets its real `colStart` /
+ * `colEnd` rather than its `cellIndex`. A row's first cell is displaced when it starts after
+ * column 0, and its last cell is displaced when it ends before the table's last column. The
+ * table's column count is the widest row across all row groups, since the header and the body
+ * share the same columns.
+ *
+ * @param table - The `table` element to analyse.
+ *
+ * @returns One entry per displaced cell edge, in document order.
+ */
+export declare const findDisplacedEdgeCells: (table: HTMLTableElement) => DisplacedEdgeCell[];
+/**
+ * Marks the cells of a table whose source-order position disagrees with their rendered grid
+ * column, so that CSS can cancel the table-edge spacing `:first-child` / `:last-child` would
+ * otherwise give them.
+ *
+ * Markers are recomputed on mount, on every structural mutation inside the table, and cleared on
+ * unmount. They are deliberately not tied to any component re-rendering: memoized rows,
+ * key-recreated cells, virtualization and consumer state owned below the table all still produce
+ * correct markers, because each of them necessarily mutates the table DOM.
+ *
+ * Server-rendered HTML carries no markers, so a table using `rowSpan` keeps the misaligned
+ * spacing until hydration.
+ *
+ * @param tableRef - A ref to the `table` element to keep marked.
+ */
+export declare const useTableEdgeCellMarkers: (tableRef: React.RefObject<HTMLTableElement | null>) => void;
+export {};

package/dist/src/utilities/dom/useTableEdgeCellMarkers.js

@@ -0,0 +1,223 @@
+import { useRef } from 'react';
+import { useIsomorphicLayoutEffect } from '../react/useIsomorphicLayoutEffect';
+/**
+ * Marks a cell that is `:first-child` in its row but does **not** render in the table's first
+ * grid column, because a `rowSpan` from an earlier row occupies that column.
+ *
+ * The value is always `"false"`: the attribute only ever cancels the table-edge affordance, it
+ * never grants one. A cell that genuinely sits at the edge carries no attribute at all, so the
+ * class list of every cell in a table without `rowSpan` stays untouched.
+ *
+ * The DataTable cell recipes match this attribute, and the name has to be written there as a
+ * literal because PandaCSS extracts selector keys statically and cannot resolve an imported
+ * constant. `useTableEdgeCellMarkers.test.tsx` asserts that the two sides stay in sync.
+ */
+export const TABLE_START_EDGE_ATTRIBUTE = 'data-mfui-table-start-edge';
+/**
+ * The `:last-child` mirror of {@link TABLE_START_EDGE_ATTRIBUTE}: the cell is last in its row but
+ * the table has further grid columns that a `rowSpan` from an earlier row occupies.
+ */
+export const TABLE_END_EDGE_ATTRIBUTE = 'data-mfui-table-end-edge';
+/** The only value either marker attribute is ever set to. */
+export const TABLE_EDGE_MARKER_VALUE = 'false';
+/** Mutation targets that can change the grid. Anything inside a cell cannot. */
+const STRUCTURAL_TAG_NAMES = new Set(['TABLE', 'THEAD', 'TBODY', 'TFOOT', 'TR']);
+/**
+ * The row groups of a table, each as its own list of rows.
+ *
+ * A `rowspan` is clamped to its own row group, so the occupancy grid is built per group. These
+ * collections only contain the table's own rows, which is what keeps a nested table invisible
+ * here — unlike `querySelectorAll('tr')`.
+ *
+ * @param table - The `table` element to read the row groups of.
+ *
+ * @returns One list of rows per row group, in document order.
+ */
+const getSectionRows = (table) => {
+    const sections = [table.tHead, ...table.tBodies, table.tFoot].filter((section) => section != null);
+    if (sections.length > 0) {
+        return sections.map((section) => [...section.rows]);
+    }
+    // A `tr` written directly under `table` has no row group to belong to.
+    return table.rows.length > 0 ? [[...table.rows]] : [];
+};
+/**
+ * Resolves the grid columns of one row group by walking it into an occupancy grid, so that the
+ * edge cells of every row are described by where they render rather than by their `cellIndex`.
+ *
+ * @param rows - The rows of a single row group, in document order.
+ *
+ * @returns The edge cells and their grid columns, one entry per non-empty row.
+ */
+const collectRowEdges = (rows) => {
+    // `occupied[rowIndex][column]` is true when a `rowSpan` from an earlier row reaches into it.
+    const occupied = rows.map(() => []);
+    const rowEdges = [];
+    rows.forEach((row, rowIndex) => {
+        const cells = [...row.cells];
+        const [firstCell] = cells;
+        const lastCell = cells.at(-1);
+        if (!firstCell || !lastCell)
+            return;
+        let column = 0;
+        let firstCellStart = 0;
+        let lastCellEnd = 0;
+        cells.forEach((cell, cellIndex) => {
+            while (occupied[rowIndex]?.[column] === true) {
+                column += 1;
+            }
+            const colSpan = Math.max(cell.colSpan, 1);
+            // `rowSpan={0}` means "every remaining row of this row group".
+            const rowSpan = cell.rowSpan === 0 ? rows.length - rowIndex : Math.max(cell.rowSpan, 1);
+            const columnEnd = column + colSpan;
+            const lastCoveredRow = Math.min(rowIndex + rowSpan, rows.length);
+            for (let coveredRow = rowIndex + 1; coveredRow < lastCoveredRow; coveredRow += 1) {
+                const occupiedColumns = occupied[coveredRow] ?? [];
+                for (let coveredColumn = column; coveredColumn < columnEnd; coveredColumn += 1) {
+                    occupiedColumns[coveredColumn] = true;
+                }
+            }
+            if (cellIndex === 0) {
+                firstCellStart = column;
+            }
+            lastCellEnd = columnEnd;
+            column = columnEnd;
+        });
+        rowEdges.push({ firstCell, lastCell, start: firstCellStart, end: lastCellEnd });
+    });
+    return rowEdges;
+};
+/**
+ * Finds the cells whose position in source order disagrees with their rendered grid column.
+ *
+ * Each row group is walked into an occupancy grid, so that every cell gets its real `colStart` /
+ * `colEnd` rather than its `cellIndex`. A row's first cell is displaced when it starts after
+ * column 0, and its last cell is displaced when it ends before the table's last column. The
+ * table's column count is the widest row across all row groups, since the header and the body
+ * share the same columns.
+ *
+ * @param table - The `table` element to analyse.
+ *
+ * @returns One entry per displaced cell edge, in document order.
+ */
+export const findDisplacedEdgeCells = (table) => {
+    const rowEdges = getSectionRows(table).flatMap(collectRowEdges);
+    const totalColumns = rowEdges.reduce((widest, { end }) => Math.max(widest, end), 0);
+    const displacedCells = [];
+    for (const { firstCell, lastCell, start, end } of rowEdges) {
+        if (start > 0) {
+            displacedCells.push({ cell: firstCell, attribute: TABLE_START_EDGE_ATTRIBUTE });
+        }
+        if (end < totalColumns) {
+            displacedCells.push({ cell: lastCell, attribute: TABLE_END_EDGE_ATTRIBUTE });
+        }
+    }
+    return displacedCells;
+};
+/**
+ * Whether any cell of this table carries a `rowspan` attribute.
+ *
+ * `colspan` is deliberately not probed. It is not that a `rowSpan` is the only way to displace a
+ * cell — a ragged table, whose rows disagree on total width, displaces its short rows' edge cells
+ * without any `rowSpan`, and {@link findDisplacedEdgeCells} resolves those correctly. Gating on
+ * `rowspan` is a scope decision: it is what guarantees that every table without one renders
+ * byte-identically to before this hook existed. Widen the gate if a ragged table is ever reported.
+ *
+ * @param table - The `table` element to probe.
+ *
+ * @returns Whether the table itself contains a `rowspan`.
+ */
+const hasRowSpanAttribute = (table) => {
+    // The subtree query is asked first because it settles the common case — a table with no
+    // `rowSpan` anywhere, which is most of them — in a single pass. The answer is only ambiguous
+    // when it finds something, since the match may belong to a nested table.
+    if (table.querySelector('[rowspan]') === null)
+        return false;
+    // Without a nested table the query above cannot have reached outside this table, so it was
+    // already correctly scoped. Only a nested table forces the explicit walk over our own rows.
+    if (table.querySelector('table') === null)
+        return true;
+    return getSectionRows(table).some((rows) => rows.some((row) => [...row.cells].some((cell) => cell.hasAttribute('rowspan'))));
+};
+/**
+ * Whether a mutation record can have changed the grid of this table.
+ *
+ * @param record - The record to classify.
+ * @param table - The `table` element being observed.
+ *
+ * @returns Whether the markers have to be recomputed because of this record.
+ */
+const isGridMutation = (record, table) => {
+    const { target } = record;
+    if (!(target instanceof Element))
+        return false;
+    // A nested table's mutations cannot change this table's grid.
+    if (target.closest('table') !== table)
+        return false;
+    // An attribute record targets the cell whose `rowspan` / `colspan` changed.
+    if (record.type === 'attributes')
+        return true;
+    // Rows and cells are added, removed and reordered on a row, a row group or the table itself.
+    // A `childList` record on a cell is content churn — a skeleton swap, a checkbox toggle, an
+    // inline edit — and cannot move any cell to a different column.
+    return STRUCTURAL_TAG_NAMES.has(target.tagName);
+};
+/**
+ * Marks the cells of a table whose source-order position disagrees with their rendered grid
+ * column, so that CSS can cancel the table-edge spacing `:first-child` / `:last-child` would
+ * otherwise give them.
+ *
+ * Markers are recomputed on mount, on every structural mutation inside the table, and cleared on
+ * unmount. They are deliberately not tied to any component re-rendering: memoized rows,
+ * key-recreated cells, virtualization and consumer state owned below the table all still produce
+ * correct markers, because each of them necessarily mutates the table DOM.
+ *
+ * Server-rendered HTML carries no markers, so a table using `rowSpan` keeps the misaligned
+ * spacing until hydration.
+ *
+ * @param tableRef - A ref to the `table` element to keep marked.
+ */
+export const useTableEdgeCellMarkers = (tableRef) => {
+    const markedCellsRef = useRef([]);
+    useIsomorphicLayoutEffect(() => {
+        const table = tableRef.current;
+        if (!table)
+            return;
+        const clearMarkers = () => {
+            markedCellsRef.current.forEach(({ cell, attribute }) => {
+                cell.removeAttribute(attribute);
+            });
+            markedCellsRef.current = [];
+        };
+        const updateMarkers = () => {
+            // Recompute when the table has a `rowSpan`, or when markers are still set from an earlier
+            // run — the second half is what clears them once the last `rowSpan` is removed.
+            if (markedCellsRef.current.length === 0 && !hasRowSpanAttribute(table))
+                return;
+            clearMarkers();
+            const displacedCells = findDisplacedEdgeCells(table);
+            displacedCells.forEach(({ cell, attribute }) => {
+                cell.setAttribute(attribute, TABLE_EDGE_MARKER_VALUE);
+            });
+            markedCellsRef.current = displacedCells;
+        };
+        updateMarkers();
+        const observer = new MutationObserver((records) => {
+            if (!records.some((record) => isGridMutation(record, table)))
+                return;
+            updateMarkers();
+        });
+        observer.observe(table, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            // Our own `data-mfui-*` writes are excluded by the filter, so the observer cannot
+            // retrigger itself.
+            attributeFilter: ['rowspan', 'colspan'],
+        });
+        return () => {
+            observer.disconnect();
+            clearMarkers();
+        };
+    }, [tableRef]);
+};

package/dist/styled-system/recipes/data-table-cell-slot-recipe.js

@@ -35,8 +35,10 @@ const dataTableCellSlotRecipeCompoundVariants = [
         "layout": "default",
         "css": {
             "root": {
-                "tr:last-child > &::before": {
-                    "height": "[100%]"
+                "tr:last-child > &": {
+                    "_before": {
+                        "height": "[100%]"
+                    }
                 }
             }
         }

package/dist/styled-system/types/composition.d.ts

@@ -38,7 +38,7 @@ type TextStyleProperty =
   | 'fontVariationSettings'
   | 'fontWeight'
   | 'hangingPunctuation'
-  | 'hypens'
+  | 'hyphens'
   | 'hyphenateCharacter'
   | 'hyphenateLimitChars'
   | 'letterSpacing'

package/dist/styles.css

@@ -2977,6 +2977,14 @@
   padding-right: var(--mfui-spacing-mfui\.size\.padding\.container\.horizontal\.comfort);
 }
 
+.mfui-dDOVnx:first-child[data-mfui-table-start-edge="false"] {
+  padding-left: 0;
+}
+
+.mfui-dDOVnx:last-child[data-mfui-table-end-edge="false"] {
+  padding-right: 0;
+}
+
 .mfui-hYiFZu,.mfui-fUSGoR {
   display: flex;
   align-items: flex-start;
@@ -3066,6 +3074,14 @@
   padding-right: var(--mfui-spacing-mfui\.size\.padding\.container\.horizontal\.comfort);
 }
 
+.mfui-jMpBJi:first-child[data-mfui-table-start-edge="false"] {
+  padding-left: 0;
+}
+
+.mfui-jMpBJi:last-child[data-mfui-table-end-edge="false"] {
+  padding-right: 0;
+}
+
 .mfui-bfpAMt,.mfui-hdXyCU {
   display: flex;
   align-items: flex-start;
@@ -9228,10 +9244,6 @@ li:last-child > .mfui-cXGJls {
   cursor: not-allowed;
 }
 
-tr:last-child > .mfui-gtOHny::before {
-  height: 100%;
-}
-
 .mfui-iHQAZp:is(:focus-visible, [data-focus-visible]) {
   border-color: var(--mfui-colors-mfui\.color\.signal-red\.border\.hovered);
 }
@@ -9320,6 +9332,10 @@ tr:last-child > .mfui-gtOHny::before {
   color: var(--mfui-colors-mfui\.color\.neutral\.content\.pressed);
 }
 
+tr:last-child > .mfui-juYiVQ::before {
+  height: 100%;
+}
+
 .mfui-iAQdxu:is(:hover, [data-hover]):not(:disabled, [disabled], [data-disabled]) {
   border-color: var(--mfui-colors-mfui\.color\.signal-red\.border\.hovered);
 }