@oneuptime/common 14.0.8 → 14.0.9

package/UI/Components/Charts/ChartLibrary/LineChart/LineChart.tsx

@@ -25,7 +25,13 @@ import ExemplarPoint from "../../Types/ExemplarPoint";
 import FormattedExemplarPoint from "../Types/FormattedExemplarPoint";
 import FormattedReferenceRegion from "../Types/FormattedReferenceRegion";
 import FormattedTimeReferenceLine from "../Types/FormattedTimeReferenceLine";
-import { CHART_DATA_POINT_DATE_KEY } from "../Types/ChartDataPoint";
+import useChartRangeSelection, {
+  ChartBucketWindow,
+  ChartRangeSelection,
+  RangeSelectionChartState,
+  getChartBucketWindow,
+  getChartRowIndex,
+} from "../Utils/UseChartRangeSelection";
 import { AxisDomain } from "recharts/types/util/types";
 
 import { useOnWindowResize } from "../Utils/UseWindowOnResize";
@@ -41,7 +47,11 @@ import useChartAnnotations, {
   UseChartAnnotationsResult,
 } from "../Annotations/UseChartAnnotations";
 import { cx } from "../Utils/Cx";
-import { DOUBLE_CLICK_DISAMBIGUATION_MS } from "../Utils/DoubleClick";
+import {
+  DeferredChartClick,
+  useDeferredChartClick,
+} from "../Utils/DoubleClick";
+import useChartBucketsChange from "../Utils/UseChartBucketsChange";
 import { getYAxisDomain } from "../Utils/GetYAxisDomain";
 import { hasOnlyOneValueForKey } from "../Utils/HasOnlyOneValueForKey";
 import {
@@ -600,15 +610,6 @@ type BaseEventProps = {
 
 type LineChartEventProps = BaseEventProps | null | undefined;
 
-/*
- * Subset of the recharts MouseHandlerDataParam passed to chart-level
- * mouse handlers — just the fields range selection needs.
- */
-type RangeSelectionChartState = {
-  activeTooltipIndex?: number | string | null | undefined;
-  activeLabel?: string | number | undefined;
-};
-
 interface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {
   data: Record<string, any>[];
   index: string;
@@ -728,41 +729,31 @@ const LineChart: React.ForwardRefExoticComponent<
     const [activeLegend, setActiveLegend] = React.useState<string | undefined>(
       undefined,
     );
-    const hasOnTimeRangeSelect: boolean = Boolean(onTimeRangeSelect);
-    const [rangeSelectionStart, setRangeSelectionStart] = React.useState<
-      string | null
-    >(null);
-    const [rangeSelectionEnd, setRangeSelectionEnd] = React.useState<
-      string | null
-    >(null);
-    const isRangeSelecting: React.MutableRefObject<boolean> =
-      React.useRef<boolean>(false);
-    const rangeSelectionStartIndexRef: React.MutableRefObject<number | null> =
-      React.useRef<number | null>(null);
-    const rangeSelectionEndIndexRef: React.MutableRefObject<number | null> =
-      React.useRef<number | null>(null);
-    const suppressNextClickRef: React.MutableRefObject<boolean> =
-      React.useRef<boolean>(false);
-    const hasOnTimeRangeReset: boolean = Boolean(onTimeRangeReset);
     /*
-     * A pending single-click, held open long enough for a second click to
-     * cancel it. Only armed when onTimeRangeReset is supplied.
+     * Every click on the plot waits out the double-click window while a
+     * reset is on offer; see useDeferredChartClick.
+     */
+    const deferredClick: DeferredChartClick = useDeferredChartClick(
+      Boolean(onTimeRangeReset),
+    );
+    /*
+     * Drag-to-select a time window, and the double-click that undoes a
+     * zoom, dropping the clicks it was made of; see useChartRangeSelection.
      */
-    const pendingClickTimeoutRef: React.MutableRefObject<ReturnType<
-      typeof setTimeout
-    > | null> = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+    const rangeSelection: ChartRangeSelection = useChartRangeSelection({
+      data: data,
+      index: index,
+      onTimeRangeSelect: onTimeRangeSelect,
+      onTimeRangeReset: onTimeRangeReset
+        ? (): void => {
+            deferredClick.cancel();
+            onTimeRangeReset();
+          }
+        : undefined,
+    });
     const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
 
-    React.useEffect(() => {
-      return () => {
-        if (pendingClickTimeoutRef.current !== null) {
-          clearTimeout(pendingClickTimeoutRef.current);
-          pendingClickTimeoutRef.current = null;
-        }
-      };
-    }, []);
-
     /*
      * Annotations are drawn onto the categorical axis, so the layer needs
      * the same x values recharts is drawing — not the source dates.
@@ -777,6 +768,20 @@ const LineChart: React.ForwardRefExoticComponent<
       );
     }, [data, index]);
 
+    /*
+     * A clicked dot names its row by index, and after a zoom, a reset or a
+     * new range that index holds another bucket: drop it, with the series
+     * highlight it brought. A series picked from the legend still exists,
+     * so it stays picked.
+     */
+    useChartBucketsChange(categoryLabels, (): void => {
+      if (activeDot) {
+        setActiveDot(undefined);
+        setActiveLegend(undefined);
+        onValueChange?.(null);
+      }
+    });
+
     const annotations: UseChartAnnotationsResult = useChartAnnotations({
       formattedTimeReferenceLines,
       formattedReferenceRegions,
@@ -784,9 +789,7 @@ const LineChart: React.ForwardRefExoticComponent<
       axisPaddingPx: paddingValue,
       scaleKind: "point",
       hasTopLegend: showLegend,
-      isClickSuppressed: (): boolean => {
-        return suppressNextClickRef.current;
-      },
+      isClickSuppressed: rangeSelection.isClickSuppressed,
     });
 
     const yAxisDomain: (number | "auto")[] = getYAxisDomain(
@@ -804,13 +807,19 @@ const LineChart: React.ForwardRefExoticComponent<
       event.stopPropagation();
 
       // Ignore the click that immediately follows a drag-to-select.
-      if (suppressNextClickRef.current) {
+      if (rangeSelection.isClickSuppressed()) {
         return;
       }
 
       if (!hasOnValueChange) {
         return;
       }
+      deferredClick.run((): void => {
+        toggleDot(itemData);
+      });
+    }
+
+    function toggleDot(itemData: any): void {
       if (
         (itemData.index === activeDot?.index &&
           itemData.dataKey === activeDot?.dataKey) ||
@@ -837,7 +846,7 @@ const LineChart: React.ForwardRefExoticComponent<
 
     function onCategoryClick(dataKey: string): void {
       // Ignore the click that immediately follows a drag-to-select.
-      if (suppressNextClickRef.current) {
+      if (rangeSelection.isClickSuppressed()) {
         return;
       }
       if (!hasOnValueChange) {
@@ -861,151 +870,6 @@ const LineChart: React.ForwardRefExoticComponent<
       setActiveDot(undefined);
     }
 
-    function getRowIndexFromChartState(
-      chartState: RangeSelectionChartState,
-    ): number | null {
-      const activeTooltipIndex: number | string | null | undefined =
-        chartState.activeTooltipIndex;
-      const numericIndex: number =
-        typeof activeTooltipIndex === "number"
-          ? activeTooltipIndex
-          : Number(activeTooltipIndex);
-      if (
-        activeTooltipIndex !== undefined &&
-        activeTooltipIndex !== null &&
-        Number.isInteger(numericIndex) &&
-        numericIndex >= 0 &&
-        numericIndex < data.length
-      ) {
-        return numericIndex;
-      }
-      // Fall back to matching activeLabel against the row labels.
-      if (chartState.activeLabel !== undefined) {
-        const rowIndex: number = data.findIndex(
-          (row: Record<string, unknown>) => {
-            return row[index] === chartState.activeLabel;
-          },
-        );
-        return rowIndex >= 0 ? rowIndex : null;
-      }
-      return null;
-    }
-
-    function getBucketDateAtIndex(rowIndex: number): Date | null {
-      const rawDate: unknown = data[rowIndex]?.[CHART_DATA_POINT_DATE_KEY];
-      return typeof rawDate === "number" ? new Date(rawDate) : null;
-    }
-
-    function handleRangeSelectMouseDown(
-      chartState: RangeSelectionChartState,
-    ): void {
-      if (!hasOnTimeRangeSelect) {
-        return;
-      }
-      const rowIndex: number | null = getRowIndexFromChartState(chartState);
-      if (rowIndex === null) {
-        return;
-      }
-      const rowLabel: unknown = data[rowIndex]?.[index];
-      if (typeof rowLabel !== "string") {
-        return;
-      }
-      isRangeSelecting.current = true;
-      rangeSelectionStartIndexRef.current = rowIndex;
-      rangeSelectionEndIndexRef.current = rowIndex;
-      setRangeSelectionStart(rowLabel);
-      setRangeSelectionEnd(null);
-    }
-
-    function handleRangeSelectMouseMove(
-      chartState: RangeSelectionChartState,
-      mouseEvent: React.MouseEvent<SVGGraphicsElement>,
-    ): void {
-      if (!isRangeSelecting.current) {
-        return;
-      }
-      // Button was released outside the chart — abandon the selection.
-      if (mouseEvent.buttons === 0) {
-        isRangeSelecting.current = false;
-        rangeSelectionStartIndexRef.current = null;
-        rangeSelectionEndIndexRef.current = null;
-        setRangeSelectionStart(null);
-        setRangeSelectionEnd(null);
-        return;
-      }
-      const rowIndex: number | null = getRowIndexFromChartState(chartState);
-      if (rowIndex === null) {
-        return;
-      }
-      const rowLabel: unknown = data[rowIndex]?.[index];
-      if (typeof rowLabel !== "string") {
-        return;
-      }
-      rangeSelectionEndIndexRef.current = rowIndex;
-      setRangeSelectionEnd(rowLabel);
-    }
-
-    function handleRangeSelectMouseUp(): void {
-      if (!isRangeSelecting.current) {
-        return;
-      }
-      isRangeSelecting.current = false;
-
-      const startIndex: number | null = rangeSelectionStartIndexRef.current;
-      const endIndex: number | null = rangeSelectionEndIndexRef.current;
-      rangeSelectionStartIndexRef.current = null;
-      rangeSelectionEndIndexRef.current = null;
-      setRangeSelectionStart(null);
-      setRangeSelectionEnd(null);
-
-      /*
-       * A plain click (pointer never left the starting bucket) must keep
-       * behaving exactly as before — only a real drag selects a range.
-       */
-      if (startIndex === null || endIndex === null || startIndex === endIndex) {
-        return;
-      }
-
-      /*
-       * The browser fires a click right after mouseup; swallow it so a
-       * drag doesn't also toggle legend/dot selection. Cleared on a
-       * timeout so a never-delivered click can't suppress a later one.
-       */
-      suppressNextClickRef.current = true;
-      setTimeout(() => {
-        suppressNextClickRef.current = false;
-      }, 0);
-
-      if (!onTimeRangeSelect) {
-        return;
-      }
-
-      const lowerIndex: number = Math.min(startIndex, endIndex);
-      const upperIndex: number = Math.max(startIndex, endIndex);
-      const startDate: Date | null = getBucketDateAtIndex(lowerIndex);
-      const lastBucketDate: Date | null = getBucketDateAtIndex(upperIndex);
-      if (!startDate || !lastBucketDate) {
-        return;
-      }
-
-      /*
-       * Cover the full final bucket: its end is its start plus one
-       * bucket width, derived from adjacent row dates.
-       */
-      const adjacentDate: Date | null =
-        upperIndex > 0
-          ? getBucketDateAtIndex(upperIndex - 1)
-          : getBucketDateAtIndex(upperIndex + 1);
-      const bucketWidthInMs: number = adjacentDate
-        ? Math.abs(lastBucketDate.getTime() - adjacentDate.getTime())
-        : 0;
-      const endDate: Date = new Date(
-        lastBucketDate.getTime() + bucketWidthInMs,
-      );
-
-      onTimeRangeSelect(startDate, endDate);
-    }
-
     /*
      * The plain-click path, split out so it can either run inline (no
      * reset handler) or be deferred behind the double-click window.
@@ -1025,28 +889,25 @@ const LineChart: React.ForwardRefExoticComponent<
       if (!onBucketClick) {
         return;
       }
-      const rowIndex: number | null = getRowIndexFromChartState(chartState);
+      const rowIndex: number | null = getChartRowIndex(data, index, chartState);
       if (rowIndex === null) {
         return;
       }
-      const bucketStart: Date | null = getBucketDateAtIndex(rowIndex);
-      if (!bucketStart) {
-        return;
-      }
       /*
        * Cover the full bucket: width from adjacent row dates, the
        * same derivation drag-to-select uses.
        */
-      const adjacentBucketDate: Date | null =
-        rowIndex > 0
-          ? getBucketDateAtIndex(rowIndex - 1)
-          : getBucketDateAtIndex(rowIndex + 1);
-      const clickedBucketWidthInMs: number = adjacentBucketDate
-        ? Math.abs(bucketStart.getTime() - adjacentBucketDate.getTime())
-        : 0;
+      const bucket: ChartBucketWindow | null = getChartBucketWindow(
+        data,
+        rowIndex,
+        rowIndex,
+      );
+      if (!bucket) {
+        return;
+      }
       onBucketClick(
-        bucketStart,
-        new Date(bucketStart.getTime() + clickedBucketWidthInMs),
+        bucket.start,
+        bucket.end,
         (data[rowIndex] || {}) as Record<string, number | string>,
       );
     }
@@ -1056,7 +917,7 @@ const LineChart: React.ForwardRefExoticComponent<
         ref={ref}
         className={cx(
           "flex-1 w-full",
-          hasOnTimeRangeSelect && "cursor-crosshair",
+          rangeSelection.canSelect && "cursor-crosshair select-none",
           className,
         )}
         {...other}
@@ -1077,47 +938,21 @@ const LineChart: React.ForwardRefExoticComponent<
                * accidentally sync with every other one.
                */
               {...(props.syncid ? { syncId: props.syncid.toString() } : {})}
-              {...(hasOnTimeRangeSelect
-                ? {
-                    onMouseDown: handleRangeSelectMouseDown,
-                    onMouseMove: handleRangeSelectMouseMove,
-                    onMouseUp: handleRangeSelectMouseUp,
-                  }
-                : {})}
+              {...rangeSelection.chartEventProps}
               onClick={(chartState: RangeSelectionChartState) => {
                 // Ignore the click that follows a drag-to-select.
-                if (suppressNextClickRef.current) {
-                  return;
-                }
-                if (!hasOnTimeRangeReset) {
-                  handleChartClick(chartState);
+                if (rangeSelection.isClickSuppressed()) {
                   return;
                 }
                 /*
-                 * Reset is on, so hold the click open: both clicks of a
-                 * double-click arrive before dblclick does, and neither
-                 * may pin a bucket. The second click re-arms the timer,
-                 * dblclick clears it.
+                 * With reset on, both clicks of a double-click arrive
+                 * before dblclick does, and neither may pin a bucket: the
+                 * second click re-arms the wait, dblclick drops it.
                  */
-                if (pendingClickTimeoutRef.current !== null) {
-                  clearTimeout(pendingClickTimeoutRef.current);
-                }
-                pendingClickTimeoutRef.current = setTimeout(() => {
-                  pendingClickTimeoutRef.current = null;
+                deferredClick.run((): void => {
                   handleChartClick(chartState);
-                }, DOUBLE_CLICK_DISAMBIGUATION_MS);
+                });
               }}
-              {...(hasOnTimeRangeReset
-                ? {
-                    onDoubleClick: () => {
-                      if (pendingClickTimeoutRef.current !== null) {
-                        clearTimeout(pendingClickTimeoutRef.current);
-                        pendingClickTimeoutRef.current = null;
-                      }
-                      onTimeRangeReset?.();
-                    },
-                  }
-                : {})}
               margin={{
                 /*
                  * Tick labels are 10px font with a translate(0, 6) — they
@@ -1443,10 +1278,25 @@ const LineChart: React.ForwardRefExoticComponent<
                           tooltipType="none"
                           strokeWidth={12}
                           connectNulls={connectNulls}
+                          /*
+                           * The 12px band is the target. Dots here are
+                           * invisible nodes a press could land on, and an
+                           * animated redraw (after a zoom, say) swaps them
+                           * out from under a double-click.
+                           */
+                          dot={false}
+                          activeDot={false}
+                          isAnimationActive={false}
                           onClick={(props: any, event: any) => {
                             event.stopPropagation();
+                            // A drag's trailing click toggles nothing.
+                            if (rangeSelection.isClickSuppressed()) {
+                              return;
+                            }
                             const { name } = props;
-                            onCategoryClick(name);
+                            deferredClick.run((): void => {
+                              onCategoryClick(name);
+                            });
                           }}
                         />
                       );
@@ -1499,7 +1349,7 @@ const LineChart: React.ForwardRefExoticComponent<
                         // Never let an exemplar click also pin a bucket.
                         stopChartEventPropagation(...args);
                         // Ignore the click that follows a drag-to-select.
-                        if (suppressNextClickRef.current) {
+                        if (rangeSelection.isClickSuppressed()) {
                           return;
                         }
                         props.onExemplarClick?.(exemplar.original);
@@ -1521,10 +1371,11 @@ const LineChart: React.ForwardRefExoticComponent<
                 },
               )}
               {/* Live drag-to-select highlight */}
-              {rangeSelectionStart && rangeSelectionEnd ? (
+              {rangeSelection.selectionStartLabel &&
+              rangeSelection.selectionEndLabel ? (
                 <ReferenceArea
-                  x1={rangeSelectionStart}
-                  x2={rangeSelectionEnd}
+                  x1={rangeSelection.selectionStartLabel}
+                  x2={rangeSelection.selectionEndLabel}
                   fill="rgba(99,102,241,0.12)"
                   stroke="rgba(99,102,241,0.5)"
                   strokeWidth={1}

package/UI/Components/Charts/ChartLibrary/Utils/DoubleClick.ts

@@ -1,3 +1,5 @@
+import React from "react";
+
 /**
  * How long a chart holds a single click open, waiting to see whether it is
  * really the first half of a double-click.
@@ -11,3 +13,215 @@
  * feels immediate. Charts with no reset handler skip the wait entirely.
  */
 export const DOUBLE_CLICK_DISAMBIGUATION_MS: number = 250;
+
+export interface DeferredChartClick {
+  /*
+   * Runs a click's action: at once while no double-click is on offer,
+   * else once DOUBLE_CLICK_DISAMBIGUATION_MS pass with no dblclick. A
+   * later click replaces a pending one.
+   */
+  run: (action: () => void) => void;
+  // For the chart's dblclick: drops the clicks it was made of.
+  cancel: () => void;
+}
+
+/**
+ * Holds every click action on a chart's plot (a bucket click, a series,
+ * dot or bar toggle) open while a double-click reset is on offer, so a
+ * double-click is not also two clicks.
+ *
+ * Holding them also keeps the chart from re-rendering between the two
+ * clicks and the dblclick. Chrome sends dblclick to the node the second
+ * click landed on, straight after that click; an action that re-renders
+ * the chart there (a series toggle - recharts re-keys a line's path when
+ * its props change) takes that node out of the page first, the dblclick
+ * never reaches the chart, and the zoom is not reset.
+ */
+export function useDeferredChartClick(isArmed: boolean): DeferredChartClick {
+  const pendingClickRef: React.MutableRefObject<ReturnType<
+    typeof setTimeout
+  > | null> = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const cancel: () => void = React.useCallback((): void => {
+    if (pendingClickRef.current !== null) {
+      clearTimeout(pendingClickRef.current);
+      pendingClickRef.current = null;
+    }
+  }, []);
+
+  React.useEffect(() => {
+    return cancel;
+  }, [cancel]);
+
+  const run: (action: () => void) => void = React.useCallback(
+    (action: () => void): void => {
+      if (!isArmed) {
+        action();
+        return;
+      }
+      cancel();
+      pendingClickRef.current = setTimeout(() => {
+        pendingClickRef.current = null;
+        action();
+      }, DOUBLE_CLICK_DISAMBIGUATION_MS);
+    },
+    [isArmed, cancel],
+  );
+
+  return React.useMemo((): DeferredChartClick => {
+    return { run: run, cancel: cancel };
+  }, [run, cancel]);
+}
+
+/*
+ * The part of a press or release a chart's handlers read. recharts hands a
+ * chart-level mouse handler the React event as its second argument.
+ */
+export interface ChartPointerEvent {
+  // The browser's click count: 2 on both halves of a double-click's second click.
+  detail?: number | undefined;
+  clientX?: number | undefined;
+  button?: number | undefined;
+}
+
+/**
+ * Whether a press is the second of a double-click, by the browser's own
+ * count (MouseEvent.detail), so the platform's double-click time and
+ * distance decide, exactly as they decide when `dblclick` is sent: at a
+ * count of 2, not at the third press of a triple-click.
+ */
+export function isSecondPressOfDoubleClick(
+  event?: ChartPointerEvent | null,
+): boolean {
+  if (!event || event.detail !== 2) {
+    return false;
+  }
+
+  // Only the main button: a right-click opens a context menu.
+  return !event.button;
+}
+
+export interface DoubleClickReset {
+  /*
+   * For every press on the chart. True when the press is the second of a
+   * double-click while a reset is on offer: that press IS the reset, so
+   * it must neither start a selection nor count as a click.
+   */
+  onPress: (event?: ChartPointerEvent | null) => boolean;
+  /*
+   * For the release of a press on the chart, or heard by the page. True
+   * when it ended the reset press, which the caller must then not handle
+   * as anything else.
+   */
+  onRelease: (event?: ChartPointerEvent | null) => boolean;
+  /*
+   * Whether a reset is armed for the next task: true from the release of
+   * the reset press until it runs or a dblclick does it first. False when
+   * that release was a fresh click's (see onRelease).
+   */
+  willReset: () => boolean;
+  // The chart's dblclick handler.
+  onDoubleClick: () => void;
+}
+
+/**
+ * Double-click to reset, without depending on the browser's `dblclick`
+ * arriving.
+ *
+ * Chrome sends `dblclick` to the node the second click landed on, straight
+ * after that click, and sends neither when that node left the page during
+ * the press. A chart re-renders under a press whenever fresh data lands:
+ * recharts re-keys a histogram's bars and a line's path when their data
+ * changes. And fresh data lands right after a zoom - the very moment a
+ * reader double-clicks to undo it - so the reset was lost at random, and
+ * the chart stayed zoomed (issue #4116).
+ *
+ * The second press itself always arrives, counted: MouseEvent.detail is 2
+ * whatever becomes of the node it landed on. Its release arms a reset for
+ * the next task. Chrome sends the release's click and `dblclick` before
+ * then, and the `dblclick` resets and stands the fallback down, so a
+ * double-click that keeps its `dblclick` resets exactly as it always has,
+ * and one that lost it still resets.
+ *
+ * `reset` is read when the reset happens, so a chart can hand a new one
+ * every render; with none, there is no reset on offer.
+ */
+export function useDoubleClickReset(
+  reset: (() => void) | undefined,
+): DoubleClickReset {
+  const resetRef: React.MutableRefObject<(() => void) | undefined> =
+    React.useRef<(() => void) | undefined>(reset);
+  resetRef.current = reset;
+
+  // Whether the press in progress is the second of a double-click.
+  const isResetPressRef: React.MutableRefObject<boolean> =
+    React.useRef<boolean>(false);
+  const fallbackRef: React.MutableRefObject<ReturnType<
+    typeof setTimeout
+  > | null> = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const standDown: () => void = React.useCallback((): void => {
+    if (fallbackRef.current !== null) {
+      clearTimeout(fallbackRef.current);
+      fallbackRef.current = null;
+    }
+  }, []);
+
+  React.useEffect(() => {
+    return standDown;
+  }, [standDown]);
+
+  const onPress: (event?: ChartPointerEvent | null) => boolean =
+    React.useCallback((event?: ChartPointerEvent | null): boolean => {
+      isResetPressRef.current =
+        Boolean(resetRef.current) && isSecondPressOfDoubleClick(event);
+      return isResetPressRef.current;
+    }, []);
+
+  const onRelease: (event?: ChartPointerEvent | null) => boolean =
+    React.useCallback(
+      (event?: ChartPointerEvent | null): boolean => {
+        if (!isResetPressRef.current) {
+          return false;
+        }
+
+        isResetPressRef.current = false;
+
+        /*
+         * The release of a fresh single click cannot end the second press:
+         * that press's own release never came (the window lost focus while
+         * the button was down, say), and this one belongs to a later click.
+         * It ends the reset press without resetting.
+         */
+        if (event && event.detail === 1) {
+          return true;
+        }
+
+        standDown();
+        fallbackRef.current = setTimeout(() => {
+          fallbackRef.current = null;
+          resetRef.current?.();
+        }, 0);
+        return true;
+      },
+      [standDown],
+    );
+
+  const willReset: () => boolean = React.useCallback((): boolean => {
+    return fallbackRef.current !== null;
+  }, []);
+
+  const onDoubleClick: () => void = React.useCallback((): void => {
+    standDown();
+    resetRef.current?.();
+  }, [standDown]);
+
+  return React.useMemo((): DoubleClickReset => {
+    return {
+      onPress: onPress,
+      onRelease: onRelease,
+      willReset: willReset,
+      onDoubleClick: onDoubleClick,
+    };
+  }, [onPress, onRelease, willReset, onDoubleClick]);
+}