@present-day/reveal-row 0.1.6 → 0.3.0

package/dist/index.mjs

@@ -62,7 +62,8 @@ import {
   useEffect,
   useImperativeHandle,
   useLayoutEffect,
-  useRef
+  useRef,
+  useState
 } from "react";
 
 // src/DefaultHandleIcon.tsx
@@ -103,16 +104,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,
@@ -124,9 +138,22 @@ function resolveAnimationConfig(animated, defaultPreset, customConfig) {
 }
 var SCROLL_REVEAL_DEBOUNCE_MS = 64;
 var restEpsilon = 2;
+var PEEK_FRACTION = 0.35;
+var PEEK_OUT_ANIMATION = {
+  duration: 120,
+  easing: "ease-out"
+};
+var PEEK_RETURN_ANIMATION = {
+  duration: 180,
+  easing: "ease-out"
+};
+var PEEK_SETTLE_BUFFER_MS = 120;
 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",
@@ -154,6 +181,7 @@ function RevealRowInner({
   handlePosition: handlePositionProp,
   handleTitle = "Drag horizontally to show actions",
   handleAriaLabel = "Drag horizontally to show actions",
+  peekOnHandleTap = true,
   onRevealChange,
   onScroll: onScrollProp,
   resetWhenDisabled = true,
@@ -168,26 +196,47 @@ 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 = useRef(null);
   const leftRef = useRef(null);
   const rightRef = useRef(null);
+  const handleStripRef = useRef(null);
+  const peekTimerRef = useRef(null);
   const lastEmitted = useRef(null);
   const swipedRef = useRef(false);
+  const focusRevealedRef = useRef(false);
+  const [settledPosition, setSettledPosition] = useState(
+    REVEAL_POSITION.center
+  );
+  const getWL = useCallback(
+    () => hasL ? wLIn ?? (leftRef.current?.offsetWidth || 88) : 0,
+    [hasL, wLIn]
+  );
+  const getWR = useCallback(
+    () => hasR ? wRIn ?? (rightRef.current?.offsetWidth || 88) : 0,
+    [hasR, wRIn]
+  );
   const debounceTimer = useRef(null);
   const hasAppliedInitialScroll = useRef(false);
   const isAnimatingRef = useRef(false);
   const rafIdRef = useRef(null);
   const settleTimerRef = useRef(null);
+  const finalizeTimerRef = useRef(null);
+  const originalSnapRef = useRef("");
   const readPosition = 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 = useCallback(
     (position) => {
+      setSettledPosition(position);
       if (lastEmitted.current === position) return;
       lastEmitted.current = position;
       onRevealChange?.(position);
@@ -198,9 +247,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 = useCallback(
     (targetScrollLeft, animationOptions) => {
       const el = containerRef.current;
@@ -218,9 +267,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();
@@ -245,86 +314,156 @@ 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);
     },
     []
   );
-  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 peekActions = useCallback(() => {
+    const el = containerRef.current;
+    if (!el || disabled) return false;
+    if (isAnimatingRef.current || peekTimerRef.current !== null) return false;
+    const defaultConfig = resolveAnimationConfig(
+      void 0,
+      animationPreset,
+      animationConfig
+    );
+    if (defaultConfig.duration === 0) return false;
+    const m = getMaxScroll(el);
+    const wL = getWL();
+    const wR = getWR();
+    const closed = getScrollClosed(wL, wR, m, mode);
+    if (Math.abs(el.scrollLeft - closed) > restEpsilon) return false;
+    const peekRight = handlePosition === REVEAL_HANDLE_POSITION.end ? hasR : !hasL;
+    const target = peekRight ? Math.min(m, closed + wR * PEEK_FRACTION) : Math.max(0, closed - wL * PEEK_FRACTION);
+    if (target === closed) return false;
+    scrollToPosition(target, PEEK_OUT_ANIMATION);
+    peekTimerRef.current = setTimeout(() => {
+      scrollToPosition(closed, PEEK_RETURN_ANIMATION);
+      peekTimerRef.current = setTimeout(() => {
+        peekTimerRef.current = null;
+        swipedRef.current = false;
+      }, PEEK_RETURN_ANIMATION.duration + PEEK_SETTLE_BUFFER_MS);
+    }, PEEK_OUT_ANIMATION.duration);
+    return true;
+  }, [
+    animationConfig,
+    animationPreset,
+    disabled,
+    getWL,
+    getWR,
+    handlePosition,
+    hasL,
+    hasR,
+    mode,
+    scrollToPosition
+  ]);
+  const closeRow = 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 = 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
     ]
   );
+  useImperativeHandle(
+    forwardedRef,
+    () => ({ close: closeRow, reveal: revealRow }),
+    [closeRow, revealRow]
+  );
+  const handleRootFocus = 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 = useCallback(
+    (e) => {
+      if (!focusRevealedRef.current) return;
+      const next = e.relatedTarget;
+      if (next && containerRef.current?.contains(next)) return;
+      focusRevealedRef.current = false;
+      closeRow();
+    },
+    [closeRow]
+  );
   useLayoutEffect(() => {
     if (mode === REVEAL_MODE.right) {
       return;
@@ -332,10 +471,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]);
   useEffect(() => {
     if (disabled && resetWhenDisabled) {
       hasAppliedInitialScroll.current = true;
@@ -361,6 +500,12 @@ function RevealRowInner({
       if (settleTimerRef.current !== null) {
         clearTimeout(settleTimerRef.current);
       }
+      if (finalizeTimerRef.current !== null) {
+        clearTimeout(finalizeTimerRef.current);
+      }
+      if (peekTimerRef.current !== null) {
+        clearTimeout(peekTimerRef.current);
+      }
     },
     []
   );
@@ -370,6 +515,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) {
@@ -383,22 +530,32 @@ function RevealRowInner({
         emitReveal(pos);
       }, SCROLL_REVEAL_DEBOUNCE_MS);
     },
-    [emitReveal, mode, onScrollProp, wL, wR]
+    [emitReveal, getWL, getWR, mode, onScrollProp]
   );
-  const onClickCapture = useCallback((e) => {
-    const t = e.target;
-    if (t) {
-      if (leftRef.current?.contains(t) || rightRef.current?.contains(t)) {
+  const onClickCapture = useCallback(
+    (e) => {
+      const t = e.target;
+      if (t) {
+        if (leftRef.current?.contains(t) || rightRef.current?.contains(t)) {
+          return;
+        }
+      }
+      if (swipedRef.current) {
+        e.preventDefault();
+        e.stopPropagation();
+        swipedRef.current = false;
         return;
       }
-    }
-    if (swipedRef.current) {
-      e.preventDefault();
-      e.stopPropagation();
-      swipedRef.current = false;
-    }
-  }, []);
-  const gridTemplateColumns = mode === REVEAL_MODE.right ? `100% ${wR}px` : mode === REVEAL_MODE.left ? `${wL}px 100%` : `${wL}px 100% ${wR}px`;
+      if (peekOnHandleTap && t && handleStripRef.current?.contains(t) && peekActions()) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    },
+    [peekActions, peekOnHandleTap]
+  );
+  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__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx2(
       "span",
@@ -422,6 +579,7 @@ function RevealRowInner({
   const handleStrip = showHandle ? /* @__PURE__ */ jsx2(
     "div",
     {
+      ref: handleStripRef,
       role: "presentation",
       className: classNames.handleContainer,
       "data-reveal-row-handle": true,
@@ -471,9 +629,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,
@@ -486,7 +647,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,
@@ -497,7 +661,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