@present-day/reveal-row 0.1.6 → 0.3.0

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,
@@ -151,9 +164,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",
@@ -181,6 +207,7 @@ function RevealRowInner({
   handlePosition: handlePositionProp,
   handleTitle = "Drag horizontally to show actions",
   handleAriaLabel = "Drag horizontally to show actions",
+  peekOnHandleTap = true,
   onRevealChange,
   onScroll: onScrollProp,
   resetWhenDisabled = true,
@@ -195,26 +222,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 = (0, import_react.useRef)(null);
   const leftRef = (0, import_react.useRef)(null);
   const rightRef = (0, import_react.useRef)(null);
+  const handleStripRef = (0, import_react.useRef)(null);
+  const peekTimerRef = (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 +273,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 +293,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 +340,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);
     },
     []
   );
-  (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 peekActions = (0, import_react.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 = (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 +497,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 +526,12 @@ function RevealRowInner({
       if (settleTimerRef.current !== null) {
         clearTimeout(settleTimerRef.current);
       }
+      if (finalizeTimerRef.current !== null) {
+        clearTimeout(finalizeTimerRef.current);
+      }
+      if (peekTimerRef.current !== null) {
+        clearTimeout(peekTimerRef.current);
+      }
     },
     []
   );
@@ -397,6 +541,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,22 +556,32 @@ 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;
-    if (t) {
-      if (leftRef.current?.contains(t) || rightRef.current?.contains(t)) {
+  const onClickCapture = (0, import_react.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__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "span",
@@ -449,6 +605,7 @@ function RevealRowInner({
   const handleStrip = showHandle ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
+      ref: handleStripRef,
       role: "presentation",
       className: classNames.handleContainer,
       "data-reveal-row-handle": true,
@@ -498,9 +655,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 +673,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 +687,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