@eifi1/ui-kit 0.24.1 → 0.25.1

package/src/components/data-table.tsx

@@ -38,6 +38,7 @@ import { useAnnounce } from "../hooks/use-announce";
 import { DEFAULT_DATA_TABLE_LABELS, resolveDataTableLabels, type DataTableLabels } from "./data-table-labels";
 import { useKitLabelOverrides, useKitLocale } from "../i18n/kit-labels";
 import { Tooltip } from "./tooltip";
+import { useEdgeFade } from "../lib/strip-fade";
 import { dirOf, isRtl, type Direction } from "../lib/direction";
 
 // ---------- Types ----------
@@ -494,6 +495,26 @@ export interface DataTableProps<T> {
    * Default true.
    */
   frame?: boolean;
+  /**
+   * Fade out an edge of the desktop table's scroller while columns are hidden behind
+   * it (0.25) — the kit {@link Table}'s `edgeFade`, on the scroller this table draws
+   * itself (DataTable renders its own `<table>`, not through Table, so the prop is
+   * its own too). Measured: nothing is drawn while every column fits; the end with
+   * columns behind it fades, both ends once scrolled into the middle, the reading
+   * direction's ends in RTL. A `mask-image`, so no layout moves and no colour is
+   * assumed; never animated. The scroller's own scrollbars stay out of it — its
+   * vertical one sits at the inline end, in the very band that fades. Focus landing
+   * in a cell behind the fade (a row action, a link, the selection box) is scrolled
+   * clear of it. The scroller carries `data-overflow` (`"start"`, `"end"`, `"both"`).
+   *
+   * The phone layout is a card list that never scrolls sideways; it is unaffected.
+   *
+   * Off by default. It is visual only, but not neutral: on the bump it would change
+   * how every overflowing desktop table in an app looks, and the mask covers
+   * everything the scroller paints — the sticky header and totals rows, an app's own
+   * marks at the scroller's edges. Opt in per table, or app-wide from your own wrapper.
+   */
+  edgeFade?: boolean;
   /** Extra classes for the table's root element (the card, or with `frame={false}`
    *  the plain wrapper). Merged last, so a caller's margin or width wins. */
   className?: string;
@@ -1002,6 +1023,7 @@ export function DataTable<T>({
   resizable: resizableProp,
   multiSort: multiSortProp,
   frame = true,
+  edgeFade = false,
   className,
   rowActions,
   toolbar,
@@ -1545,6 +1567,9 @@ export function DataTable<T>({
   // list — never both — so we don't double up DOM nodes that screen readers and
   // integration tests would have to disambiguate.
   const isMdUp = useMediaQuery("(min-width: 768px)", true);
+  // `edgeFade` (0.25) on the desktop scroller; the phone list never scrolls sideways.
+  const desktopScroller = useRef<HTMLDivElement | null>(null);
+  const edgeFadeProps = useEdgeFade(desktopScroller, edgeFade && isMdUp);
 
   // ---- Mobile card list (md:hidden) ----
   // Renders the same paged/filtered/sorted slice but as stacked cards instead
@@ -2060,10 +2085,18 @@ export function DataTable<T>({
               other half of the `w-0 min-w-full` fix on the expansion cell below
               (feedback #104: "expanding an item resizes the columns"). */}
           <div
+            ref={desktopScroller}
             // The scroller: marked for the Tooltip's auto-portal (see the root above).
             data-clips=""
             className={cn("overflow-auto [scrollbar-gutter:stable]", fillHeight && "flex-1 min-h-0")}
-            style={fillHeight ? undefined : { maxHeight: maxBodyHeight }}
+            // `edgeFade`: the mask, `data-overflow` and the focus handling; nothing
+            // while off. The height bound is merged over the mask, not replaced by it.
+            {...edgeFadeProps}
+            style={
+              fillHeight
+                ? edgeFadeProps.style
+                : { ...edgeFadeProps.style, maxHeight: maxBodyHeight }
+            }
           >
         {/* A table with no name is "table" in a screen reader's list of tables, and
             an app renders several. `labels.table` is how a call site says which. */}

package/src/components/swipeable-row.tsx

@@ -227,7 +227,7 @@ export function SwipeableRow({
           // text also SELECTS that text — so committing an action left the row
           // highlighted blue. Suppressed only while dragging, so text in a row at
           // rest stays selectable.
-          swipe.dragging ? "select-none" : "transition-transform duration-150",
+          swipe.dragging ? "select-none" : "transition-transform duration-150 motion-reduce:transition-none",
         )}
         style={{
           transform: dx !== 0 ? `translate3d(${dx}px,0,0)` : undefined,

package/src/components/table.tsx

@@ -1,6 +1,7 @@
 import { Children, createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { ComponentPropsWithRef, ReactNode, Ref } from "react";
 import { cn } from "../lib/cn";
+import { useEdgeFade } from "../lib/strip-fade";
 import { assignRef } from "./choice-parts";
 import { THIN_SCROLLBAR_CLASS, useScrollOverflow } from "./scroll-area";
 
@@ -194,6 +195,40 @@ export interface TableProps extends ComponentPropsWithRef<"table"> {
    * columns gets none.
    */
   stack?: "phone";
+  /**
+   * Fade out an edge of the scroll wrapper while columns are hidden behind it (0.25).
+   *
+   * A table wider than its box scrolls sideways inside the wrapper, and on a phone —
+   * whose scrollbars are overlays that show only while you drag — nothing said there
+   * was more: the last visible column simply ended at the edge, often mid-word. 0.24
+   * drew a fade for ColumnRoleTable's preview (Kurvenschmiede: the fourth column's
+   * role select sat off-screen with no hint) by wrapping this Table and reaching its
+   * wrapper as the `<table>`'s `parentElement`; this is that fade as the Table's own,
+   * so a table needs neither the reach-around nor a box of its own round it.
+   *
+   * It is the kit Tabs strip's fade, MEASURED rather than assumed: nothing is drawn
+   * while the table fits, so a table that fits paints exactly as without the prop;
+   * the end with columns behind it fades, and both ends once scrolled into the
+   * middle; the ends are the reading direction's, so in RTL the hidden columns fade
+   * on the left. It is a `mask-image` — no layout change, no background colour to
+   * fade to, so it works on any surface in either theme — and never animated, so
+   * there is nothing for reduced motion to turn off. The wrapper's own scrollbars
+   * stay out of it (a fade on a classic scrollbar hid the very thing that says the
+   * box scrolls).
+   *
+   * Focus that lands in a cell behind the fade — a link, a select, a checkbox — is
+   * scrolled clear of it, cell and all where the cell fits; the browser's own scroll
+   * stops at the edge, under the fade. And while the overflowing wrapper ITSELF holds
+   * keyboard focus (it is a tab stop then, for arrow-key scrolling) the fade lifts, so
+   * the focus outline round the box is drawn whole rather than faded out at its sides.
+   *
+   * The wrapper carries `data-overflow` — `"start"`, `"end"` or `"both"`, in
+   * reading-direction terms, absent while it fits — for a caller's own affordance
+   * (a scroll button) and for tests, which cannot read a mask.
+   *
+   * Off by default: it changes how every overflowing table looks.
+   */
+  edgeFade?: boolean;
 }
 
 /**
@@ -236,6 +271,7 @@ export function Table({
   framed = false,
   rowDividers = true,
   stack,
+  edgeFade = false,
   className,
   "aria-label": ariaLabel,
   ref,
@@ -245,6 +281,7 @@ export function Table({
   const [captions, setCaptions] = useState(0);
   const wrapper = useRef<HTMLDivElement | null>(null);
   const overflowing = useScrollOverflow(wrapper);
+  const fade = useEdgeFade(wrapper, edgeFade);
   const tableRef = useRef<HTMLTableElement | null>(null);
   const setTableRef = useMergedRef(tableRef, ref);
 
@@ -307,6 +344,8 @@ export function Table({
         data-overflowing={overflowing || undefined}
         data-clips=""
         data-framed={framed || undefined}
+        // `edgeFade`: the mask, `data-overflow` and the focus handling; nothing while off.
+        {...fade}
         className={cn(
           // `relative`: the containing block for an `sr-only` caption.
           "relative w-full overflow-x-auto",