@present-day/reveal-row 0.1.6 → 0.2.0

package/README.md

@@ -1,19 +1,39 @@
-# `@present-day/reveal-row`
+# RevealRow
 
-Horizontally scrollable row that reveals one or two action columns — **right**, **left**, or **both** sides. Three snap positions: left · center · right. Styling is entirely via `classNames` props (no bundled CSS). Scroll physics use inline `style` on the scroll track so the component works with zero external CSS.
+**Buttery swipe-to-reveal actions for React lists — powered by native scroll physics, not JavaScript animation.**
 
-<img width="295" height="640" alt="Simulator Screen Recording - iPhone 15 - 2026-04-25 at 22 26 41" src="https://github.com/user-attachments/assets/932021d4-5224-479f-9df9-c7045bf12afb" style="float:right" />
+[![npm version](https://img.shields.io/npm/v/@present-day/reveal-row?color=cb3837&logo=npm)](https://www.npmjs.com/package/@present-day/reveal-row)
+[![CI](https://github.com/present-day/reveal-row/actions/workflows/ci.yml/badge.svg)](https://github.com/present-day/reveal-row/actions/workflows/ci.yml)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/@present-day/reveal-row?label=gzip)](https://bundlephobia.com/package/@present-day/reveal-row)
+[![types](https://img.shields.io/npm/types/@present-day/reveal-row)](https://www.npmjs.com/package/@present-day/reveal-row)
+[![license](https://img.shields.io/npm/l/@present-day/reveal-row)](./LICENSE)
 
+The swipe-to-delete pattern everyone knows from iOS Mail — as a headless React component. Swipe (or drag, or scroll) a row horizontally to reveal action buttons on the **right**, the **left**, or **both** sides, with three crisp snap positions: left · center · right.
+
+**[▶ Try the live playground](https://present-day.github.io/reveal-row/)**
+
+<img width="295" height="640" alt="RevealRow demo — swiping a list row to reveal actions" src="https://github.com/user-attachments/assets/932021d4-5224-479f-9df9-c7045bf12afb" />
+
+## Why RevealRow?
+
+- 🍦 **Native scroll physics** — momentum, rubber-banding, and snap come from the browser's own scroll engine (CSS scroll-snap), not a JS animation loop. It feels right because it *is* the real thing.
+- 🎨 **Headless & unstyled** — no bundled CSS. Every sub-element takes your class names, so it drops into Tailwind, CSS Modules, or plain CSS without a fight.
+- 📱 **Touch, trackpad, and mouse** — one component, every input. Works inside vertically scrolling lists without gesture conflicts.
+- 🪶 **Tiny & dependency-free** — just `react` and `react-dom` as peers. Tree-shakeable, `sideEffects: false`, ESM + CJS + types.
+- ♿ **Accessible by default** — focus-driven reveal for keyboard users, `prefers-reduced-motion` support, configurable ARIA labels, and a click-guard so a swipe never fires an accidental row activation.
+- 🎛️ **Fully controllable** — imperative ref API (`reveal('left')`, `close()`), settled-position callbacks, and a `disabled`/`isActive` protocol for coordinating whole lists.
 
 ## Install
 
 ```bash
+bun add @present-day/reveal-row
+# or
 npm i @present-day/reveal-row
 ```
 
 Peer dependencies: `react`, `react-dom` (v18 or v19).
 
-## Basic usage
+## Quick start
 
 ```tsx
 import { RevealRow } from '@present-day/reveal-row'
@@ -37,6 +57,34 @@ import { RevealRow } from '@present-day/reveal-row'
 </RevealRow>
 ```
 
+## Multiple actions per side
+
+A side slot is a single column that **auto-sizes to its content** (with an 88px floor) — to show several buttons (iOS Mail-style Delete + Pin), lay them out with flex and give each button its own width. No math required:
+
+```tsx
+<RevealRow
+  right={
+    <div style={{ display: 'flex', height: '100%' }}>
+      <button style={{ width: 88 }} onClick={handleDelete}>Delete</button>
+      <button style={{ width: 88 }} onClick={handlePin}>Pin</button>
+    </div>
+  }
+>
+  <MyRowContent />
+</RevealRow>
+```
+
+Passing `actionWidthLeft`/`actionWidthRight` a number still gives you a fixed-width column, exactly as before.
+
+**[▶ See it live in the playground](https://present-day.github.io/reveal-row/)** under "Multiple actions".
+
+## Accessibility
+
+- **Focus-driven reveal** — tabbing into an off-screen action button snaps that side cleanly into view (instead of the browser's un-snapped scroll-into-view). When focus leaves the row, a focus-initiated reveal closes again — so keyboard users never leave rows stuck open. Swipe-opened rows are not affected by focus loss.
+- **Reduced motion** — preset animations become instant under `prefers-reduced-motion: reduce`. An explicit `animationConfig` is treated as an intentional override and left untouched.
+- **State hooks for styling and testing** — the root carries `data-reveal-position="left | center | right"` (settled position) alongside `data-reveal-mode`.
+- **Screen readers** — the drag handle is decorative (`aria-hidden`) with a configurable sr-only description (`handleAriaLabel`).
+
 ## Modes
 
 | `mode`  | Slots used           | Resting ("closed") scroll                   |
@@ -55,8 +103,8 @@ Omit `mode` and it's inferred: both slots → `both`, only `left` → `left`, ot
 | `left` | `ReactNode` | — | Leading action column |
 | `right` | `ReactNode` | — | Trailing action column |
 | `mode` | `'left' \| 'right' \| 'both'` | inferred | Override mode detection |
-| `actionWidthLeft` | `number` | `88` | Width (px) of the left column |
-| `actionWidthRight` | `number` | `88` | Width (px) of the right column |
+| `actionWidthLeft` | `number` | auto (min 88px) | Fixed width (px) of the left column; omit to size to content |
+| `actionWidthRight` | `number` | auto (min 88px) | Fixed width (px) of the right column; omit to size to content |
 | `classNames` | `RevealRowClassNames` | `{}` | Class names for each sub-element |
 | `showHandle` | `boolean` | `true` | Render the default 6-dot drag affordance |
 | `handle` | `ReactNode` | — | Replace the default handle with custom content |
@@ -87,9 +135,9 @@ ref.current?.reveal('right')           // snap to right action
 ref.current?.reveal('center')          // alias for close
 ```
 
-## classNames
+## Styling with classNames
 
-All sub-elements accept class names for styling:
+All sub-elements accept class names, so styling is entirely yours:
 
 ```tsx
 <RevealRow
@@ -113,6 +161,37 @@ All sub-elements accept class names for styling:
 
 **Preventing row activation on swipe** — the component guards against triggering a click after a horizontal drag. If you wrap the row in a command palette item or similar, keep the built-in `onClickCapture` behaviour intact, or replicate it.
 
-## Publishing
+**Focus styles** — the row root is a scroll container, and CSS clips anything drawn outside the scrollport, including focus outlines (on both axes). Draw focus rings *inward* on action buttons and row content: `outline-offset: -2px`, or Tailwind's `focus-visible:ring-2 focus-visible:ring-inset`.
+
+**Single-axis scrolling** — the root pins `overflow-y: hidden` so rows only ever scroll horizontally; vertical overflow clips instead of scrolling.
+
+**Rounded list corners** — don't rely on a parent's `overflow: hidden` + `border-radius` to clip action buttons: scroll containers are composited on their own layers, and browsers can skip ancestor rounded clipping mid-scroll, exposing square button corners. Instead, put the matching radius on the buttons that touch the container's edges — the outermost button of the group, on the first and last rows only. Drive it from a token so the radius stays in one place:
+
+```css
+:root { --row-radius: 12px; }
+.list { border-radius: var(--row-radius); }
+.list > :first-child [data-reveal-row-right] button:last-child { border-top-right-radius: var(--row-radius); }
+.list > :last-child  [data-reveal-row-right] button:last-child { border-bottom-right-radius: var(--row-radius); }
+.list > :first-child [data-reveal-row-left]  button:first-child { border-top-left-radius: var(--row-radius); }
+.list > :last-child  [data-reveal-row-left]  button:first-child { border-bottom-left-radius: var(--row-radius); }
+```
+
+The playground implements the same idea with an index-aware helper (`edgeCorners` in `playground/src/PlaygroundApp.tsx`).
+
+## CSS tokens
+
+The component is headless, but its one built-in dimension is themeable via a CSS custom property:
+
+| Token | Default | Effect |
+| ----- | ------- | ------ |
+| `--reveal-row-action-min-width` | `88px` | Minimum width of an auto-sized action column (the floor under content-based sizing) |
+
+Set it on `:root` or any ancestor: `[data-reveal-mode] { --reveal-row-action-min-width: 72px; }`. Explicit `actionWidthLeft`/`actionWidthRight` props bypass the token. The playground layers its own tokens on top (`--row-radius`, `--action-width`) in `playground/index.html` — retheme everything from one place.
+
+## Publishing (maintainers)
 
 Run `bun run build` to produce `dist/`. The `exports` field in `package.json` points to `dist/index.{js,mjs,d.ts}`. Push a tag to trigger the GitHub Actions publish workflow (OIDC trusted publishing — no npm token needed in secrets).
+
+## License
+
+[MIT](./LICENSE) © [Present Day](https://presentday.io)

package/dist/index.d.mts

@@ -73,7 +73,15 @@ type RevealRowProps = {
      * mode is derived unless overridden.
      */
     mode?: RevealMode;
+    /**
+     * Fixed width (px) of the left action column. Omit to size the column to
+     * its content with an 88px floor (`minmax(88px, max-content)`).
+     */
     actionWidthLeft?: number;
+    /**
+     * Fixed width (px) of the right action column. Omit to size the column to
+     * its content with an 88px floor (`minmax(88px, max-content)`).
+     */
     actionWidthRight?: number;
     classNames?: RevealRowClassNames;
     /** @default true */

package/dist/index.d.ts

@@ -73,7 +73,15 @@ type RevealRowProps = {
      * mode is derived unless overridden.
      */
     mode?: RevealMode;
+    /**
+     * Fixed width (px) of the left action column. Omit to size the column to
+     * its content with an 88px floor (`minmax(88px, max-content)`).
+     */
     actionWidthLeft?: number;
+    /**
+     * Fixed width (px) of the right action column. Omit to size the column to
+     * its content with an 88px floor (`minmax(88px, max-content)`).
+     */
     actionWidthRight?: number;
     classNames?: RevealRowClassNames;
     /** @default true */

package/dist/index.js

@@ -130,16 +130,29 @@ function resolveMode(left, right, mode) {
   if (left != null) return REVEAL_MODE.left;
   return REVEAL_MODE.right;
 }
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
 function resolveAnimationConfig(animated, defaultPreset, customConfig) {
   let config;
+  let explicit = false;
   if (animated === false) {
     config = ANIMATION_PRESETS[ANIMATION_PRESET.none];
   } else if (animated === true || animated === void 0) {
-    config = customConfig || ANIMATION_PRESETS[defaultPreset];
+    if (customConfig) {
+      config = customConfig;
+      explicit = true;
+    } else {
+      config = ANIMATION_PRESETS[defaultPreset];
+    }
   } else if (typeof animated === "string") {
     config = ANIMATION_PRESETS[animated];
   } else {
     config = animated;
+    explicit = true;
+  }
+  if (!explicit && prefersReducedMotion()) {
+    return { ...config, duration: 0 };
   }
   return {
     ...config,
@@ -154,6 +167,9 @@ var restEpsilon = 2;
 var rootScrollStyle = {
   display: "grid",
   overflowX: "auto",
+  // `overflow-x: auto` would otherwise force `overflow-y` to compute to
+  // `auto` — pin it so rows only ever scroll on one axis.
+  overflowY: "hidden",
   scrollSnapType: "x mandatory",
   scrollbarWidth: "none",
   WebkitOverflowScrolling: "touch",
@@ -195,26 +211,45 @@ function RevealRowInner({
   const mode = resolveMode(left, right, modeProp);
   const hasL = mode === REVEAL_MODE.left || mode === REVEAL_MODE.both;
   const hasR = mode === REVEAL_MODE.right || mode === REVEAL_MODE.both;
-  const wL = hasL ? wLIn ?? 88 : 0;
-  const wR = hasR ? wRIn ?? 88 : 0;
   const handlePosition = handlePositionProp ?? (mode === REVEAL_MODE.left ? REVEAL_HANDLE_POSITION.start : REVEAL_HANDLE_POSITION.end);
   const containerRef = (0, import_react.useRef)(null);
   const leftRef = (0, import_react.useRef)(null);
   const rightRef = (0, import_react.useRef)(null);
   const lastEmitted = (0, import_react.useRef)(null);
   const swipedRef = (0, import_react.useRef)(false);
+  const focusRevealedRef = (0, import_react.useRef)(false);
+  const [settledPosition, setSettledPosition] = (0, import_react.useState)(
+    REVEAL_POSITION.center
+  );
+  const getWL = (0, import_react.useCallback)(
+    () => hasL ? wLIn ?? (leftRef.current?.offsetWidth || 88) : 0,
+    [hasL, wLIn]
+  );
+  const getWR = (0, import_react.useCallback)(
+    () => hasR ? wRIn ?? (rightRef.current?.offsetWidth || 88) : 0,
+    [hasR, wRIn]
+  );
   const debounceTimer = (0, import_react.useRef)(null);
   const hasAppliedInitialScroll = (0, import_react.useRef)(false);
   const isAnimatingRef = (0, import_react.useRef)(false);
   const rafIdRef = (0, import_react.useRef)(null);
   const settleTimerRef = (0, import_react.useRef)(null);
+  const finalizeTimerRef = (0, import_react.useRef)(null);
+  const originalSnapRef = (0, import_react.useRef)("");
   const readPosition = (0, import_react.useCallback)(() => {
     const el = containerRef.current;
     if (!el) return REVEAL_POSITION.center;
-    return getRevealFromScroll(el.scrollLeft, getMaxScroll(el), wL, wR, mode);
-  }, [wL, wR, mode]);
+    return getRevealFromScroll(
+      el.scrollLeft,
+      getMaxScroll(el),
+      getWL(),
+      getWR(),
+      mode
+    );
+  }, [getWL, getWR, mode]);
   const emitReveal = (0, import_react.useCallback)(
     (position) => {
+      setSettledPosition(position);
       if (lastEmitted.current === position) return;
       lastEmitted.current = position;
       onRevealChange?.(position);
@@ -225,9 +260,9 @@ function RevealRowInner({
     const el = containerRef.current;
     if (!el) return;
     const m = getMaxScroll(el);
-    const closed = getScrollClosed(wL, wR, m, mode);
+    const closed = getScrollClosed(getWL(), getWR(), m, mode);
     el.scrollLeft = closed;
-  }, [wL, wR, mode]);
+  }, [getWL, getWR, mode]);
   const scrollToPosition = (0, import_react.useCallback)(
     (targetScrollLeft, animationOptions) => {
       const el = containerRef.current;
@@ -245,9 +280,29 @@ function RevealRowInner({
         clearTimeout(settleTimerRef.current);
         settleTimerRef.current = null;
       }
+      if (finalizeTimerRef.current !== null) {
+        clearTimeout(finalizeTimerRef.current);
+        finalizeTimerRef.current = null;
+      }
+      if (!isAnimatingRef.current) {
+        originalSnapRef.current = el.style.scrollSnapType;
+      }
       isAnimatingRef.current = true;
-      const originalScrollSnapType = el.style.scrollSnapType;
       el.style.scrollSnapType = "none";
+      const finish = () => {
+        el.scrollLeft = targetScrollLeft;
+        el.style.scrollSnapType = originalSnapRef.current || "x mandatory";
+        isAnimatingRef.current = false;
+        if (rafIdRef.current !== null) {
+          cancelAnimationFrame(rafIdRef.current);
+          rafIdRef.current = null;
+        }
+        if (finalizeTimerRef.current !== null) {
+          clearTimeout(finalizeTimerRef.current);
+          finalizeTimerRef.current = null;
+        }
+      };
+      finalizeTimerRef.current = setTimeout(finish, duration + 100);
       const startScrollLeft = el.scrollLeft;
       const distance = targetScrollLeft - startScrollLeft;
       const startTime = performance.now();
@@ -272,86 +327,117 @@ function RevealRowInner({
         if (progress < 1) {
           rafIdRef.current = requestAnimationFrame(animate);
         } else {
-          el.scrollLeft = targetScrollLeft;
-          el.style.scrollSnapType = originalScrollSnapType || "x mandatory";
-          isAnimatingRef.current = false;
           rafIdRef.current = null;
+          finish();
         }
       };
       rafIdRef.current = requestAnimationFrame(animate);
     },
     []
   );
-  (0, import_react.useImperativeHandle)(
-    forwardedRef,
-    () => ({
-      close: (animated) => {
-        const el = containerRef.current;
-        if (!el) return;
-        const m = getMaxScroll(el);
-        const closed = getScrollClosed(wL, wR, m, mode);
-        const animConfig = resolveAnimationConfig(
-          animated,
-          animationPreset,
-          animationConfig
-        );
-        scrollToPosition(closed, animConfig);
-        const delay = animConfig.duration > 0 ? animConfig.duration : 0;
-        if (settleTimerRef.current !== null) {
-          clearTimeout(settleTimerRef.current);
-        }
-        settleTimerRef.current = setTimeout(() => {
-          const p = readPosition();
-          if (lastEmitted.current !== p) {
-            lastEmitted.current = p;
-            onRevealChange?.(p);
-          }
-          settleTimerRef.current = null;
-        }, delay);
-      },
-      reveal: (position, animated) => {
-        const el = containerRef.current;
-        if (!el) return;
-        const max = getMaxScroll(el);
-        let targetScroll;
-        if (position === REVEAL_POSITION.center) {
-          targetScroll = getScrollClosed(wL, wR, max, mode);
-        } else if (position === REVEAL_POSITION.left && (mode === REVEAL_MODE.left || mode === REVEAL_MODE.both)) {
-          targetScroll = 0;
-        } else if (position === REVEAL_POSITION.right && (mode === REVEAL_MODE.right || mode === REVEAL_MODE.both)) {
-          targetScroll = max;
-        } else {
-          return;
-        }
-        const animConfig = resolveAnimationConfig(
-          animated,
-          animationPreset,
-          animationConfig
-        );
-        scrollToPosition(targetScroll, animConfig);
-        const delay = animConfig.duration > 0 ? animConfig.duration : 0;
-        if (settleTimerRef.current !== null) {
-          clearTimeout(settleTimerRef.current);
-        }
-        settleTimerRef.current = setTimeout(() => {
-          const p = getRevealFromScroll(targetScroll, max, wL, wR, mode);
-          lastEmitted.current = p;
-          onRevealChange?.(p);
-          settleTimerRef.current = null;
-        }, delay);
+  const closeRow = (0, import_react.useCallback)(
+    (animated) => {
+      const el = containerRef.current;
+      if (!el) return;
+      const m = getMaxScroll(el);
+      const closed = getScrollClosed(getWL(), getWR(), m, mode);
+      const animConfig = resolveAnimationConfig(
+        animated,
+        animationPreset,
+        animationConfig
+      );
+      scrollToPosition(closed, animConfig);
+      const delay = animConfig.duration > 0 ? animConfig.duration : 0;
+      if (settleTimerRef.current !== null) {
+        clearTimeout(settleTimerRef.current);
       }
-    }),
+      settleTimerRef.current = setTimeout(() => {
+        emitReveal(readPosition());
+        settleTimerRef.current = null;
+      }, delay);
+    },
     [
+      animationConfig,
+      animationPreset,
+      emitReveal,
+      getWL,
+      getWR,
       mode,
-      onRevealChange,
       readPosition,
-      scrollToPosition,
-      wL,
-      wR,
+      scrollToPosition
+    ]
+  );
+  const revealRow = (0, import_react.useCallback)(
+    (position, animated) => {
+      const el = containerRef.current;
+      if (!el) return;
+      const max = getMaxScroll(el);
+      const wL = getWL();
+      const wR = getWR();
+      let targetScroll;
+      if (position === REVEAL_POSITION.center) {
+        targetScroll = getScrollClosed(wL, wR, max, mode);
+      } else if (position === REVEAL_POSITION.left && (mode === REVEAL_MODE.left || mode === REVEAL_MODE.both)) {
+        targetScroll = 0;
+      } else if (position === REVEAL_POSITION.right && (mode === REVEAL_MODE.right || mode === REVEAL_MODE.both)) {
+        targetScroll = max;
+      } else {
+        return;
+      }
+      const animConfig = resolveAnimationConfig(
+        animated,
+        animationPreset,
+        animationConfig
+      );
+      scrollToPosition(targetScroll, animConfig);
+      const delay = animConfig.duration > 0 ? animConfig.duration : 0;
+      if (settleTimerRef.current !== null) {
+        clearTimeout(settleTimerRef.current);
+      }
+      settleTimerRef.current = setTimeout(() => {
+        emitReveal(getRevealFromScroll(targetScroll, max, wL, wR, mode));
+        settleTimerRef.current = null;
+      }, delay);
+    },
+    [
+      animationConfig,
       animationPreset,
-      animationConfig
+      emitReveal,
+      getWL,
+      getWR,
+      mode,
+      scrollToPosition
     ]
   );
+  (0, import_react.useImperativeHandle)(
+    forwardedRef,
+    () => ({ close: closeRow, reveal: revealRow }),
+    [closeRow, revealRow]
+  );
+  const handleRootFocus = (0, import_react.useCallback)(
+    (e) => {
+      const t = e.target;
+      if (!t) return;
+      if (leftRef.current?.contains(t)) {
+        focusRevealedRef.current = true;
+        revealRow(REVEAL_POSITION.left);
+      } else if (rightRef.current?.contains(t)) {
+        focusRevealedRef.current = true;
+        revealRow(REVEAL_POSITION.right);
+      }
+    },
+    [revealRow]
+  );
+  const handleRootBlur = (0, import_react.useCallback)(
+    (e) => {
+      if (!focusRevealedRef.current) return;
+      const next = e.relatedTarget;
+      if (next && containerRef.current?.contains(next)) return;
+      focusRevealedRef.current = false;
+      closeRow();
+    },
+    [closeRow]
+  );
   (0, import_react.useLayoutEffect)(() => {
     if (mode === REVEAL_MODE.right) {
       return;
@@ -359,10 +445,10 @@ function RevealRowInner({
     const el = containerRef.current;
     if (!el) return;
     if (!hasAppliedInitialScroll.current) {
-      el.scrollLeft = wL;
+      el.scrollLeft = getWL();
       hasAppliedInitialScroll.current = true;
     }
-  }, [mode, wL]);
+  }, [mode, getWL]);
   (0, import_react.useEffect)(() => {
     if (disabled && resetWhenDisabled) {
       hasAppliedInitialScroll.current = true;
@@ -388,6 +474,9 @@ function RevealRowInner({
       if (settleTimerRef.current !== null) {
         clearTimeout(settleTimerRef.current);
       }
+      if (finalizeTimerRef.current !== null) {
+        clearTimeout(finalizeTimerRef.current);
+      }
     },
     []
   );
@@ -397,6 +486,8 @@ function RevealRowInner({
       const el = containerRef.current;
       if (!el) return;
       const m = getMaxScroll(el);
+      const wL = getWL();
+      const wR = getWR();
       const pos = getRevealFromScroll(el.scrollLeft, m, wL, wR, mode);
       const closed = getScrollClosed(wL, wR, m, mode);
       if (Math.abs(el.scrollLeft - closed) > restEpsilon) {
@@ -410,7 +501,7 @@ function RevealRowInner({
         emitReveal(pos);
       }, SCROLL_REVEAL_DEBOUNCE_MS);
     },
-    [emitReveal, mode, onScrollProp, wL, wR]
+    [emitReveal, getWL, getWR, mode, onScrollProp]
   );
   const onClickCapture = (0, import_react.useCallback)((e) => {
     const t = e.target;
@@ -425,7 +516,9 @@ function RevealRowInner({
       swipedRef.current = false;
     }
   }, []);
-  const gridTemplateColumns = mode === REVEAL_MODE.right ? `100% ${wR}px` : mode === REVEAL_MODE.left ? `${wL}px 100%` : `${wL}px 100% ${wR}px`;
+  const trackL = wLIn != null ? `${wLIn}px` : "max-content";
+  const trackR = wRIn != null ? `${wRIn}px` : "max-content";
+  const gridTemplateColumns = mode === REVEAL_MODE.right ? `100% ${trackR}` : mode === REVEAL_MODE.left ? `${trackL} 100%` : `${trackL} 100% ${trackR}`;
   const handleContent = showHandle ? handleOverride !== void 0 ? handleOverride : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "span",
@@ -498,9 +591,12 @@ function RevealRowInner({
     {
       ref: containerRef,
       "data-reveal-mode": mode,
+      "data-reveal-position": settledPosition,
       className: cx(classNames.root, className),
       onScroll: handleScroll,
       onClickCapture,
+      onFocus: handleRootFocus,
+      onBlur: handleRootBlur,
       style: {
         ...disabled ? rootScrollStyleDisabled : rootScrollStyle,
         ...style,
@@ -513,7 +609,10 @@ function RevealRowInner({
             ref: leftRef,
             className: classNames.left,
             "data-reveal-row-left": true,
-            style: { ...snapStart, minWidth: 0, width: wL },
+            style: {
+              ...snapStart,
+              ...wLIn != null ? { minWidth: 0, width: wLIn } : { minWidth: "var(--reveal-row-action-min-width, 88px)" }
+            },
             children: left
           }
         ) : null,
@@ -524,7 +623,10 @@ function RevealRowInner({
             ref: rightRef,
             className: classNames.right,
             "data-reveal-row-right": true,
-            style: { ...snapEnd, minWidth: 0, width: wR },
+            style: {
+              ...snapEnd,
+              ...wRIn != null ? { minWidth: 0, width: wRIn } : { minWidth: "var(--reveal-row-action-min-width, 88px)" }
+            },
             children: right
           }
         ) : null