@moneyforward/mfui-components 4.3.1 → 4.6.0

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

@@ -0,0 +1,21 @@
+/**
+ * Returns whether `node` is `ancestor` itself or a descendant of it, crossing shadow boundaries.
+ *
+ * `Node.contains()` walks the node tree only, so an element inside a shadow root is *not*
+ * reported as contained by the shadow host or by any of the host's ancestors. This function
+ * follows the chain of shadow hosts upwards, so focus inside a web component rendered within
+ * `ancestor` still counts as being inside it.
+ *
+ * Pair it with `getDeepActiveElement`, which pierces shadow roots downwards: a shadow-piercing
+ * lookup compared with the non-piercing `Node.contains()` reports the deepest focused element as
+ * outside every ancestor it actually lives in.
+ *
+ * @param ancestor - The node expected to contain `node`. A nullish ancestor contains nothing.
+ *
+ * @param node - The node to look for. A nullish node is never contained.
+ *
+ * @returns `true` when `node` is inside `ancestor`, across any number of shadow boundaries.
+ *
+ * @see https://dom.spec.whatwg.org/#dom-node-contains
+ */
+export declare const containsAcrossShadowRoots: (ancestor: Node | null | undefined, node: Node | null | undefined) => boolean;

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

@@ -0,0 +1,33 @@
+/**
+ * Returns whether `node` is `ancestor` itself or a descendant of it, crossing shadow boundaries.
+ *
+ * `Node.contains()` walks the node tree only, so an element inside a shadow root is *not*
+ * reported as contained by the shadow host or by any of the host's ancestors. This function
+ * follows the chain of shadow hosts upwards, so focus inside a web component rendered within
+ * `ancestor` still counts as being inside it.
+ *
+ * Pair it with `getDeepActiveElement`, which pierces shadow roots downwards: a shadow-piercing
+ * lookup compared with the non-piercing `Node.contains()` reports the deepest focused element as
+ * outside every ancestor it actually lives in.
+ *
+ * @param ancestor - The node expected to contain `node`. A nullish ancestor contains nothing.
+ *
+ * @param node - The node to look for. A nullish node is never contained.
+ *
+ * @returns `true` when `node` is inside `ancestor`, across any number of shadow boundaries.
+ *
+ * @see https://dom.spec.whatwg.org/#dom-node-contains
+ */
+export const containsAcrossShadowRoots = (ancestor, node) => {
+    if (!ancestor || !node)
+        return false;
+    let current = node;
+    while (current) {
+        if (ancestor.contains(current))
+            return true;
+        const rootNode = current.getRootNode();
+        // Only a ShadowRoot has a host to continue from; a Document ends the walk.
+        current = rootNode instanceof ShadowRoot ? rootNode.host : null;
+    }
+    return false;
+};

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

@@ -26,9 +26,7 @@ const isNonTabbableRadio = (node) => {
     }
     const getRadio = (selector) => node.ownerDocument.querySelector(`input[type="radio"]${selector}`);
     let roving = getRadio(`[name="${node.name}"]:checked`);
-    if (!roving) {
-        roving = getRadio(`[name="${node.name}"]`);
-    }
+    roving ??= getRadio(`[name="${node.name}"]`);
     return roving !== node;
 };
 // This function ensures that the node is focusable by checking if it is disabled, hidden, or a non-tabbable radio button.

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

@@ -4,7 +4,6 @@ import { useLayoutEffect, useMemo, useRef, useState } from 'react';
  */
 export const useFixedColumns = ({ enableRowSelection = false, columnIndex, leftFixedColumnIndex, rightFixedColumnIndex, }) => {
     const cellRef = useRef(null);
-    const [fixedPositionStyles, setFixedPositionStyles] = useState();
     const isCheckboxColumn = enableRowSelection && columnIndex === 0;
     // Adjust column index when row selection is enabled to account for the checkbox column
     const actualColumnIndex = useMemo(() => {
@@ -79,19 +78,18 @@ export const useFixedColumns = ({ enableRowSelection = false, columnIndex, leftF
             resizeObserver.disconnect();
         };
     }, []);
-    useLayoutEffect(() => {
+    // Fully derivable from render-time values (no external system involved), so this is a
+    // plain memo rather than an effect writing to its own state.
+    const fixedPositionStyles = useMemo(() => {
         if (isCheckboxColumn && leftFixedColumnIndex !== undefined) {
-            setFixedPositionStyles({
-                left: 0,
-            });
-            return;
+            return { left: 0 };
         }
         if (!cellRect)
             return;
-        setFixedPositionStyles({
+        return {
             left: fixedDirection === 'left' ? cellRect.left : undefined,
             right: fixedDirection === 'right' ? cellRect.right : undefined,
-        });
+        };
     }, [cellRect, fixedDirection, isCheckboxColumn, leftFixedColumnIndex]);
     const isFixedColumn = useMemo(() => fixedDirection !== undefined, [fixedDirection]);
     const isEdgeFixedColumn = useMemo(() => {

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

@@ -18,7 +18,7 @@ export function useFocusTrap({ onKeyDown, onPressingTabOnNotFocusableElement } =
         const wrapper = event.currentTarget;
         const focusingElement = wrapper.ownerDocument.activeElement;
         const focusableNodes = getFocusableNodes(wrapper);
-        const firstFocusableNode = focusableNodes[0];
+        const [firstFocusableNode] = focusableNodes;
         const lastFocusableNode = focusableNodes.at(-1);
         const focusingOnFirstNode = focusingElement === firstFocusableNode;
         const focusingOnLastNode = focusingElement === lastFocusableNode;

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/src/utilities/react/flattenChildren.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Flattens React children by expanding Fragments so that elements wrapped in a
+ * Fragment (e.g. `<>{items.map(...)}</>`) become directly visible to
+ * `Children`-based inspection such as `isComponentOrWrapped`.
+ *
+ * The keys assigned by `Children.toArray` are combined with the keys of the
+ * enclosing Fragments so that they stay unique after flattening.
+ *
+ * @param children - The React children to flatten
+ *
+ * @param parentKeys - The accumulated keys of the enclosing Fragments (internal use for recursion)
+ *
+ * @returns The flattened children with Fragments expanded
+ */
+export declare function flattenChildren(children: React.ReactNode, parentKeys?: readonly (string | number)[]): React.ReactNode[];

package/dist/src/utilities/react/flattenChildren.js

@@ -0,0 +1,28 @@
+import { Children, Fragment, cloneElement, isValidElement } from 'react';
+/**
+ * Flattens React children by expanding Fragments so that elements wrapped in a
+ * Fragment (e.g. `<>{items.map(...)}</>`) become directly visible to
+ * `Children`-based inspection such as `isComponentOrWrapped`.
+ *
+ * The keys assigned by `Children.toArray` are combined with the keys of the
+ * enclosing Fragments so that they stay unique after flattening.
+ *
+ * @param children - The React children to flatten
+ *
+ * @param parentKeys - The accumulated keys of the enclosing Fragments (internal use for recursion)
+ *
+ * @returns The flattened children with Fragments expanded
+ */
+export function flattenChildren(children, parentKeys = []) {
+    return Children.toArray(children).flatMap((child, index) => {
+        if (isValidElement(child) && child.type === Fragment) {
+            return flattenChildren(child.props.children, [...parentKeys, child.key ?? index]);
+        }
+        if (isValidElement(child) && parentKeys.length > 0) {
+            // ':' cannot appear in the combined segments (React escapes it in user keys), so it
+            // keeps structurally different key paths from composing into the same string.
+            return cloneElement(child, { key: [...parentKeys, child.key].join(':') });
+        }
+        return child;
+    });
+}

package/dist/src/utilities/state/useLatest.d.ts

@@ -5,7 +5,7 @@
  *
  * @param value - Any value that you want to track
  *
- * @returns The React's RefObject of that value, which always the latest value.
+ * @returns The React's RefObject of that value, which holds the latest committed value.
  *
  * @see [React Hooks FAQ](https://legacy.reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function)
  *

package/dist/src/utilities/state/useLatest.js

@@ -1,4 +1,5 @@
 import { useRef } from 'react';
+import { useIsomorphicLayoutEffect } from '../react/useIsomorphicLayoutEffect';
 /**
  * React state hook that returns the latest state as described in the React hooks FAQ.
  *
@@ -6,7 +7,7 @@ import { useRef } from 'react';
  *
  * @param value - Any value that you want to track
  *
- * @returns The React's RefObject of that value, which always the latest value.
+ * @returns The React's RefObject of that value, which holds the latest committed value.
  *
  * @see [React Hooks FAQ](https://legacy.reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function)
  *
@@ -14,6 +15,11 @@ import { useRef } from 'react';
  */
 export const useLatest = (value) => {
     const ref = useRef(value);
-    ref.current = value;
+    // Committed in a layout effect rather than assigned during render (React's rules
+    // disallow render-time mutation). Callers only read `.current` from callbacks and
+    // effects, which all run after this commits.
+    useIsomorphicLayoutEffect(() => {
+        ref.current = value;
+    });
     return ref;
 };

package/dist/styled-system/recipes/badge-slot-recipe.d.ts

@@ -10,7 +10,7 @@ type BadgeSlotRecipeVariantMap = {
   [key in keyof BadgeSlotRecipeVariant]: Array<BadgeSlotRecipeVariant[key]>
 }
 
-type BadgeSlotRecipeSlot = "root" | "indicator"
+type BadgeSlotRecipeSlot = "root" | "indicator" | "srOnlyLabel"
 
 export type BadgeSlotRecipeVariantProps = {
   [key in keyof BadgeSlotRecipeVariant]?: ConditionalValue<BadgeSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/badge-slot-recipe.js

@@ -10,6 +10,10 @@ const badgeSlotRecipeSlotNames = [
     [
         "indicator",
         "Badge__indicator"
+    ],
+    [
+        "srOnlyLabel",
+        "Badge__srOnlyLabel"
     ]
 ];
 const badgeSlotRecipeSlotFns = /* @__PURE__ */ badgeSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, badgeSlotRecipeDefaultVariants, getSlotCompoundVariant(badgeSlotRecipeCompoundVariants, slotName))]);

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

@@ -19,7 +19,7 @@ type DataTableCellSlotRecipeVariantMap = {
   [key in keyof DataTableCellSlotRecipeVariant]: Array<DataTableCellSlotRecipeVariant[key]>
 }
 
-type DataTableCellSlotRecipeSlot = "root" | "defaultCell" | "interactiveCell" | "disclosureIconWrapper" | "disclosureSpacing" | "skeletonCell"
+type DataTableCellSlotRecipeSlot = "root" | "defaultCell" | "interactiveCell" | "disclosureIconWrapper" | "disclosureSpacing" | "skeletonCell" | "rowActionButton"
 
 export type DataTableCellSlotRecipeVariantProps = {
   [key in keyof DataTableCellSlotRecipeVariant]?: DataTableCellSlotRecipeVariant[key] | undefined

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%]"
+                    }
                 }
             }
         }
@@ -66,6 +68,10 @@ const dataTableCellSlotRecipeSlotNames = [
     [
         "skeletonCell",
         "DataTableCell__skeletonCell"
+    ],
+    [
+        "rowActionButton",
+        "DataTableCell__rowActionButton"
     ]
 ];
 const dataTableCellSlotRecipeSlotFns = /* @__PURE__ */ dataTableCellSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dataTableCellSlotRecipeDefaultVariants, getSlotCompoundVariant(dataTableCellSlotRecipeCompoundVariants, slotName))]);

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

@@ -13,12 +13,8 @@ const dataTableRowSlotRecipeCompoundVariants = [
                         "backgroundColor": "mfui.color.selected.background.hovered"
                     }
                 },
-                "_focusVisible": {
-                    "backgroundColor": "mfui.color.selected.background.hovered",
-                    "boxShadow": "[0px 0px 0px 2px {colors.mfui.color.primary.border.none} inset, 0px 0px 0px 3px {colors.mfui.color.base.background.none} inset]"
-                },
-                "_focusInputInside": {
-                    "boxShadow": "[none]"
+                "&:has([data-mfui-content=\"data-table-row-action-button\"]:focus-visible)": {
+                    "backgroundColor": "mfui.color.selected.background.hovered"
                 },
                 "_active": {
                     "&:not(:has(button:hover, input:hover, select:hover, textarea:hover, [tabindex]:hover, [data-mfui-content=\"data-table-checkbox-cell\"]:hover))": {
@@ -27,6 +23,17 @@ const dataTableRowSlotRecipeCompoundVariants = [
                 }
             }
         }
+    },
+    {
+        "highlighted": true,
+        "rowClickSelectable": true,
+        "css": {
+            "root": {
+                "&:has(.mfui-DataTableRow__selectionCheckbox input[type=\"checkbox\"]:focus-visible)": {
+                    "backgroundColor": "mfui.color.selected.background.hovered"
+                }
+            }
+        }
     }
 ];
 const dataTableRowSlotRecipeSlotNames = [

package/dist/styled-system/recipes/sub-navigation-slot-recipe.d.ts

@@ -11,7 +11,7 @@ type SubNavigationSlotRecipeVariantMap = {
   [key in keyof SubNavigationSlotRecipeVariant]: Array<SubNavigationSlotRecipeVariant[key]>
 }
 
-type SubNavigationSlotRecipeSlot = "root" | "subNavigationHeader" | "list" | "listItem" | "link" | "labelIcon" | "label" | "statusSlot" | "details" | "summary" | "disclosureIcon" | "nestedListItem"
+type SubNavigationSlotRecipeSlot = "root" | "subNavigationHeader" | "list" | "listItem" | "link" | "labelContainer" | "labelIcon" | "labelContent" | "label" | "description" | "statusSlot" | "details" | "summary" | "disclosureIcon" | "nestedListItem"
 
 export type SubNavigationSlotRecipeVariantProps = {
   [key in keyof SubNavigationSlotRecipeVariant]?: ConditionalValue<SubNavigationSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/sub-navigation-slot-recipe.js

@@ -23,14 +23,26 @@ const subNavigationSlotRecipeSlotNames = [
         "link",
         "SubNavigation__link"
     ],
+    [
+        "labelContainer",
+        "SubNavigation__labelContainer"
+    ],
     [
         "labelIcon",
         "SubNavigation__labelIcon"
     ],
+    [
+        "labelContent",
+        "SubNavigation__labelContent"
+    ],
     [
         "label",
         "SubNavigation__label"
     ],
+    [
+        "description",
+        "SubNavigation__description"
+    ],
     [
         "statusSlot",
         "SubNavigation__statusSlot"