gloomberb 0.8.1 → 0.8.2

package/src/components/data-table/view.test.tsx

@@ -45,21 +45,27 @@ afterEach(async () => {
 
 function Harness() {
   const [selectedIndex, setSelectedIndex] = useState(1);
+  const [cursorIndex, setCursorIndex] = useState(1);
   const [activatedTitle, setActivatedTitle] = useState("");
   const state = createInitialState(
     createDefaultConfig("/tmp/gloomberb-data-table-view-test"),
   );
   const selectedTitle = rows[selectedIndex]?.title ?? "none";
+  const cursorTitle = rows[cursorIndex]?.title ?? "none";
 
   return (
     <AppContext value={{ state, dispatch: () => {} }}>
       <PaneInstanceProvider paneId="data-table-view-test">
         <DataTableView<Row, Column>
           focused
-          selectedIndex={selectedIndex}
           isNavigable={(row) => row.type === "row"}
-          onSelectIndex={(index) => setSelectedIndex(index)}
-          onActivateIndex={(_index, row) => {
+          selection={{
+            kind: "index",
+            selectedIndex,
+            onChange: (index) => setSelectedIndex(index),
+          }}
+          onCursorChange={(_row, index) => setCursorIndex(index)}
+          onActivate={(row) => {
             if (row.type === "row") setActivatedTitle(row.title);
           }}
           columns={columns}
@@ -68,8 +74,6 @@ function Harness() {
           sortDirection="asc"
           onHeaderClick={() => {}}
           getItemKey={(row) => row.id}
-          isSelected={(_row, index) => index === selectedIndex}
-          onSelect={(_row, index) => setSelectedIndex(index)}
           renderSectionHeader={(row) => row.type === "section"
             ? { text: row.title }
             : null}
@@ -79,7 +83,7 @@ function Harness() {
           emptyStateTitle="No rows"
           rootAfter={
             <Box height={1}>
-              <Text>{`selected=${selectedTitle} activated=${activatedTitle}`}</Text>
+              <Text>{`cursor=${cursorTitle} selected=${selectedTitle} activated=${activatedTitle}`}</Text>
             </Box>
           }
         />
@@ -102,19 +106,21 @@ function LargeSelectionHarness({
       <PaneInstanceProvider paneId="data-table-view-large-test">
         <DataTableView<Row, Column>
           focused
-          selectedIndex={500}
+          selection={{
+            kind: "index",
+            selectedIndex: 500,
+            onChange: () => {},
+          }}
           columns={columns}
           items={largeRows}
           sortColumnId={null}
           sortDirection="asc"
           onHeaderClick={() => {}}
           getItemKey={(row) => row.id}
-          isSelected={(_row, index) => {
+          renderCell={(row, _column, index): DataTableCell => {
             onIsSelected();
-            return index === 500;
+            return { text: row.title + (index === 500 ? "" : "") };
           }}
-          onSelect={() => {}}
-          renderCell={(row): DataTableCell => ({ text: row.title })}
           emptyStateTitle="No rows"
         />
       </PaneInstanceProvider>
@@ -190,24 +196,24 @@ describe("DataTableView", () => {
     testSetup = await testRender(<Harness />, { width: 60, height: 12 });
 
     await renderSettled();
-    expect(testSetup.captureCharFrame()).toContain("selected=First row");
+    expect(testSetup.captureCharFrame()).toContain("cursor=First row selected=First row");
 
     await emitKeypress({ name: "down", sequence: "\u001B[B" });
     await renderSettled();
-    expect(testSetup.captureCharFrame()).toContain("selected=Second row");
+    expect(testSetup.captureCharFrame()).toContain("cursor=Second row selected=First row");
 
     await emitKeypress({ name: "up", sequence: "\u001B[A", meta: true });
     await renderSettled();
-    expect(testSetup.captureCharFrame()).toContain("selected=Second row");
+    expect(testSetup.captureCharFrame()).toContain("cursor=Second row selected=First row");
 
     await emitKeypress({ name: "up", sequence: "\u001B[A" });
     await renderSettled();
-    expect(testSetup.captureCharFrame()).toContain("selected=First row");
+    expect(testSetup.captureCharFrame()).toContain("cursor=First row selected=First row");
 
     await emitKeypress({ name: "j", sequence: "j" });
     await emitKeypress({ name: "k", sequence: "k" });
     await renderSettled();
-    expect(testSetup.captureCharFrame()).toContain("selected=First row");
+    expect(testSetup.captureCharFrame()).toContain("cursor=First row selected=First row");
 
     await emitKeypress({ name: "enter", sequence: "\r" });
     await renderSettled();
@@ -215,11 +221,11 @@ describe("DataTableView", () => {
 
     await emitKeypress({ name: "j", sequence: "j" });
     await renderSettled();
-    expect(testSetup.captureCharFrame()).toContain("selected=Second row activated=First row");
+    expect(testSetup.captureCharFrame()).toContain("cursor=Second row selected=First row activated=First row");
 
     await emitKeypress({ name: "enter", sequence: "\r", defaultPrevented: true });
     await renderSettled();
-    expect(testSetup.captureCharFrame()).toContain("selected=Second row activated=First row");
+    expect(testSetup.captureCharFrame()).toContain("cursor=Second row selected=First row activated=First row");
   });
 
   test("keeps selection current across repeated keypresses before the next render", async () => {

package/src/components/data-table/view.tsx

@@ -24,6 +24,41 @@ import {
 
 export type DataTableKeyEvent = TableViewKeyEvent;
 
+const DATA_TABLE_SELECTION_COMMIT_DELAY_MS = 150;
+
+export type DataTableSelectionChangeReason =
+  | "keyboard"
+  | "pointer"
+  | "activation";
+
+export type DataTableSelection<T> =
+  | { kind: "none" }
+  | {
+      kind: "index";
+      selectedIndex: number | null;
+      onChange: (
+        index: number,
+        item: T,
+        reason: DataTableSelectionChangeReason,
+      ) => void;
+    }
+  | {
+      kind: "id";
+      selectedId: string | null;
+      getId: (item: T, index: number) => string;
+      onChange: (
+        id: string,
+        item: T,
+        index: number,
+        reason: DataTableSelectionChangeReason,
+      ) => void;
+    };
+
+interface SelectionCommitTarget {
+  index: number;
+  id?: string;
+}
+
 export interface DataTableViewProps<
   T,
   C extends DataTableColumn = DataTableColumn,
@@ -35,11 +70,18 @@ export interface DataTableViewProps<
     | "onBodyScrollActivity"
     | "hoveredIdx"
     | "setHoveredIdx"
+    | "isSelected"
+    | "onSelect"
+    | "onActivate"
   > {
   focused?: boolean;
-  selectedIndex?: number | null;
-  onSelectIndex?: (index: number, item: T) => void;
-  onActivateIndex?: (index: number, item: T) => void;
+  selection: DataTableSelection<T>;
+  onActivate?: (item: T, index: number) => void;
+  onCursorChange?: (
+    item: T,
+    index: number,
+    reason: DataTableSelectionChangeReason,
+  ) => void;
   isNavigable?: (item: T, index: number) => boolean;
   rootBefore?: ReactNode;
   rootAfter?: ReactNode;
@@ -62,9 +104,9 @@ export function DataTableView<
   C extends DataTableColumn = DataTableColumn,
 >({
   focused = false,
-  selectedIndex,
-  onSelectIndex,
-  onActivateIndex,
+  selection,
+  onActivate,
+  onCursorChange,
   isNavigable,
   rootBefore,
   rootAfter,
@@ -97,29 +139,32 @@ export function DataTableView<
     hoveredIdx,
     setHoveredIdx,
   });
-  const [fallbackSelectedIndex, setFallbackSelectedIndex] = useState<
-    number | null
-  >(null);
-  const selectedIndexFromPredicate = useMemo(
-    () => selectedIndex == null
-      ? tableProps.items.findIndex(tableProps.isSelected)
-      : -1,
-    [selectedIndex, tableProps.items, tableProps.isSelected],
-  );
-  const usesFallbackSelection =
-    selectedIndex == null && selectedIndexFromPredicate < 0;
-  const effectiveSelectedIndex = selectedIndex
-    ?? (selectedIndexFromPredicate >= 0
-      ? selectedIndexFromPredicate
-      : fallbackSelectedIndex ?? -1);
-  const effectiveSelectedIndexRef = useRef(effectiveSelectedIndex);
-  effectiveSelectedIndexRef.current = effectiveSelectedIndex;
-  const effectiveScrollToIndex = scrollToIndex ?? (
-    effectiveSelectedIndex >= 0 ? effectiveSelectedIndex : null
+  const [cursorIndex, setCursorIndex] = useState<number | null>(null);
+  const pendingCommitRef = useRef(false);
+  const pendingCommitTargetRef = useRef<SelectionCommitTarget | null>(null);
+  const pendingCommitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
   );
-  const [selectionScrollVersion, setSelectionScrollVersion] = useState(0);
-  const lastSelectionScrollIndexRef = useRef<number | null>(null);
-
+  const selectionKey = selection.kind === "id"
+    ? selection.selectedId
+    : selection.kind === "index"
+      ? selection.selectedIndex
+      : null;
+  const selectedIndexFromSelection = useMemo(() => {
+    if (selection.kind === "none") return -1;
+    if (selection.kind === "index") {
+      const index = selection.selectedIndex;
+      return typeof index === "number"
+        && index >= 0
+        && index < tableProps.items.length
+        ? index
+        : -1;
+    }
+    if (selection.selectedId == null) return -1;
+    return tableProps.items.findIndex(
+      (item, index) => selection.getId(item, index) === selection.selectedId,
+    );
+  }, [selection, selectionKey, tableProps.items]);
   const navigableIndices = useMemo(() => {
     if (!isNavigable) return null;
     return tableProps.items.reduce<number[]>((indices, item, index) => {
@@ -128,39 +173,82 @@ export function DataTableView<
     }, []);
   }, [isNavigable, tableProps.items]);
 
-  useEffect(() => {
-    if (!usesFallbackSelection) {
-      if (fallbackSelectedIndex !== null) setFallbackSelectedIndex(null);
-      return;
+  const isValidCursorIndex = useCallback((index: number | null) => {
+    if (index == null || index < 0 || index >= tableProps.items.length) {
+      return false;
     }
-    if (fallbackSelectedIndex == null) return;
-    if (!navigableIndices) {
-      if (
-        fallbackSelectedIndex >= 0
-        && fallbackSelectedIndex < tableProps.items.length
-      ) {
-        return;
-      }
-      setFallbackSelectedIndex(tableProps.items.length > 0
-        ? Math.min(fallbackSelectedIndex, tableProps.items.length - 1)
-        : null);
+    if (!isNavigable) return true;
+    const item = tableProps.items[index];
+    return item !== undefined && isNavigable(item, index);
+  }, [isNavigable, tableProps.items]);
+
+  const defaultCursorIndex = selection.kind === "none"
+    ? -1
+    : isValidCursorIndex(selectedIndexFromSelection)
+      ? selectedIndexFromSelection
+      : navigableIndices
+        ? navigableIndices[0] ?? -1
+        : tableProps.items.length > 0
+          ? 0
+          : -1;
+  const effectiveSelectedIndex = selection.kind === "none"
+    ? -1
+    : isValidCursorIndex(cursorIndex)
+      ? cursorIndex!
+      : defaultCursorIndex;
+  const effectiveSelectedIndexRef = useRef(effectiveSelectedIndex);
+  effectiveSelectedIndexRef.current = effectiveSelectedIndex;
+  const [selectionScrollVersion, setSelectionScrollVersion] = useState(0);
+  const [selectionScrollTarget, setSelectionScrollTarget] = useState<number | null>(null);
+  const lastExternalSelectionScrollRef = useRef<{
+    kind: DataTableSelection<T>["kind"];
+    key: string | number | null;
+    resolved: boolean;
+  } | null>(null);
+  const effectiveScrollToIndex = scrollToIndex !== undefined
+    ? scrollToIndex
+    : selectionScrollTarget;
+
+  const requestSelectionScroll = useCallback((index: number) => {
+    if (scrollToIndex !== undefined || index < 0) return;
+    setSelectionScrollTarget(index);
+    setSelectionScrollVersion((current) => current + 1);
+  }, [scrollToIndex]);
+
+  const clearPendingCommit = useCallback(() => {
+    if (pendingCommitTimerRef.current) {
+      clearTimeout(pendingCommitTimerRef.current);
+      pendingCommitTimerRef.current = null;
+    }
+    pendingCommitRef.current = false;
+    pendingCommitTargetRef.current = null;
+  }, []);
+
+  useEffect(() => {
+    if (selection.kind === "none") {
+      clearPendingCommit();
+      setCursorIndex(null);
       return;
     }
-    if (navigableIndices.includes(fallbackSelectedIndex)) return;
-
-    const nextIndex = navigableIndices.find(
-      (index) => index >= fallbackSelectedIndex,
-    )
-      ?? navigableIndices.at(-1)
-      ?? null;
-    setFallbackSelectedIndex(nextIndex);
+    if (pendingCommitRef.current) return;
+    setCursorIndex(defaultCursorIndex >= 0 ? defaultCursorIndex : null);
   }, [
-    fallbackSelectedIndex,
+    clearPendingCommit,
+    defaultCursorIndex,
     navigableIndices,
+    selectedIndexFromSelection,
+    selection.kind,
+    selectionKey,
     tableProps.items.length,
-    usesFallbackSelection,
   ]);
 
+  useEffect(() => () => {
+    if (pendingCommitTimerRef.current) {
+      clearTimeout(pendingCommitTimerRef.current);
+      pendingCommitTimerRef.current = null;
+    }
+  }, []);
+
   const handleBodyScrollActivity = useTableBodyScrollActivity({
     onBodyScrollActivity,
     syncHeaderScroll: effectiveSyncHeaderScroll,
@@ -173,40 +261,156 @@ export function DataTableView<
   });
 
   useEffect(() => {
-    if (effectiveScrollToIndex == null) {
-      lastSelectionScrollIndexRef.current = null;
+    const current = {
+      kind: selection.kind,
+      key: selectionKey,
+      resolved: selectedIndexFromSelection >= 0,
+    };
+    const previous = lastExternalSelectionScrollRef.current;
+    lastExternalSelectionScrollRef.current = current;
+
+    if (selection.kind === "none") {
+      if (scrollToIndex === undefined) setSelectionScrollTarget(null);
       return;
     }
-    if (lastSelectionScrollIndexRef.current === effectiveScrollToIndex) return;
-    lastSelectionScrollIndexRef.current = effectiveScrollToIndex;
-    setSelectionScrollVersion((current) => current + 1);
-  }, [effectiveScrollToIndex]);
+    if (effectiveSelectedIndex < 0) return;
 
-  const selectIndex = useCallback((index: number) => {
+    const selectionChanged = !previous
+      || previous.kind !== current.kind
+      || previous.key !== current.key;
+    const selectedRowAppeared = !previous?.resolved && current.resolved;
+    if (selectionChanged || selectedRowAppeared) {
+      requestSelectionScroll(effectiveSelectedIndex);
+    }
+  }, [
+    effectiveSelectedIndex,
+    requestSelectionScroll,
+    scrollToIndex,
+    selectedIndexFromSelection,
+    selection.kind,
+    selectionKey,
+  ]);
+
+  const commitIndex = useCallback((
+    index: number,
+    reason: DataTableSelectionChangeReason,
+  ) => {
+    if (selection.kind === "none") return;
     if (index < 0 || index >= tableProps.items.length) return;
     const item = tableProps.items[index]!;
     if (isNavigable && !isNavigable(item, index)) return;
-    effectiveSelectedIndexRef.current = index;
-    if (usesFallbackSelection) {
-      setFallbackSelectedIndex(index);
+
+    if (selection.kind === "index") {
+      selection.onChange(index, item, reason);
+      return;
     }
-    if (onSelectIndex) {
-      onSelectIndex(index, item);
+
+    selection.onChange(selection.getId(item, index), item, index, reason);
+  }, [isNavigable, selection, tableProps.items]);
+  const commitIndexRef = useRef(commitIndex);
+
+  useEffect(() => {
+    commitIndexRef.current = commitIndex;
+  }, [commitIndex]);
+
+  const getCommitTarget = useCallback((index: number): SelectionCommitTarget | null => {
+    if (selection.kind === "none") return null;
+    if (index < 0 || index >= tableProps.items.length) return null;
+    const item = tableProps.items[index]!;
+    if (isNavigable && !isNavigable(item, index)) return null;
+    return selection.kind === "id"
+      ? { index, id: selection.getId(item, index) }
+      : { index };
+  }, [isNavigable, selection, tableProps.items]);
+
+  const commitTarget = useCallback((
+    target: SelectionCommitTarget | null,
+    reason: DataTableSelectionChangeReason,
+  ) => {
+    if (!target) return;
+    if (selection.kind !== "id" || target.id == null) {
+      commitIndexRef.current(target.index, reason);
       return;
     }
-    tableProps.onSelect(item, index);
-  }, [isNavigable, onSelectIndex, tableProps, usesFallbackSelection]);
+    const currentIndex = tableProps.items.findIndex(
+      (item, index) => selection.getId(item, index) === target.id,
+    );
+    if (currentIndex < 0) return;
+    commitIndexRef.current(currentIndex, reason);
+  }, [selection, tableProps.items]);
 
-  const activateIndex = useCallback((index: number) => {
+  const commitIndexImmediately = useCallback((
+    index: number,
+    reason: DataTableSelectionChangeReason,
+  ) => {
+    const target = getCommitTarget(index);
+    clearPendingCommit();
+    commitTarget(target, reason);
+  }, [clearPendingCommit, commitTarget, getCommitTarget]);
+
+  const scheduleCommitIndex = useCallback((index: number) => {
+    if (selection.kind === "none") return;
+    const target = getCommitTarget(index);
+    if (!target) return;
+    if (pendingCommitTimerRef.current) {
+      clearTimeout(pendingCommitTimerRef.current);
+    }
+    pendingCommitRef.current = true;
+    pendingCommitTargetRef.current = target;
+    pendingCommitTimerRef.current = setTimeout(() => {
+      pendingCommitTimerRef.current = null;
+      pendingCommitRef.current = false;
+      const pendingTarget = pendingCommitTargetRef.current;
+      pendingCommitTargetRef.current = null;
+      commitTarget(pendingTarget, "keyboard");
+    }, DATA_TABLE_SELECTION_COMMIT_DELAY_MS);
+  }, [commitTarget, getCommitTarget, selection.kind]);
+
+  const updateCursorIndex = useCallback((
+    index: number,
+    options: {
+      commit: "deferred" | "immediate" | "none";
+      reason?: DataTableSelectionChangeReason;
+    },
+  ) => {
+    if (selection.kind === "none") return;
     if (index < 0 || index >= tableProps.items.length) return;
     const item = tableProps.items[index]!;
     if (isNavigable && !isNavigable(item, index)) return;
-    if (onActivateIndex) {
-      onActivateIndex(index, item);
-      return;
+    effectiveSelectedIndexRef.current = index;
+    setCursorIndex(index);
+    const reason = options.reason ?? (options.commit === "deferred"
+      ? "keyboard"
+      : options.commit === "immediate"
+        ? "pointer"
+        : "keyboard");
+    onCursorChange?.(item, index, reason);
+    if (options.commit === "deferred") {
+      requestSelectionScroll(index);
     }
-    tableProps.onActivate?.(item, index);
-  }, [isNavigable, onActivateIndex, tableProps]);
+    if (options.commit === "immediate") {
+      commitIndexImmediately(index, reason);
+    } else if (options.commit === "deferred") {
+      scheduleCommitIndex(index);
+    }
+  }, [
+    commitIndexImmediately,
+    isNavigable,
+    onCursorChange,
+    requestSelectionScroll,
+    scheduleCommitIndex,
+    selection.kind,
+    tableProps.items,
+  ]);
+
+  const activateIndex = useCallback((index: number) => {
+    if (index < 0 || index >= tableProps.items.length) return;
+    const item = tableProps.items[index]!;
+    if (isNavigable && !isNavigable(item, index)) return;
+    updateCursorIndex(index, { commit: "none", reason: "activation" });
+    commitIndexImmediately(index, "activation");
+    onActivate?.(item, index);
+  }, [commitIndexImmediately, isNavigable, onActivate, tableProps.items, updateCursorIndex]);
 
   const selectByOffset = useCallback((offset: -1 | 1) => {
     if (!navigableIndices) {
@@ -218,7 +422,7 @@ export function DataTableView<
             Math.min(selectedIndex + offset, tableProps.items.length - 1),
           )
         : 0;
-      selectIndex(nextIndex);
+      updateCursorIndex(nextIndex, { commit: "deferred" });
       return;
     }
     if (navigableIndices.length === 0) return;
@@ -230,8 +434,10 @@ export function DataTableView<
         )
       : 0;
     const nextIndex = navigableIndices[nextPosition];
-    if (nextIndex !== undefined) selectIndex(nextIndex);
-  }, [navigableIndices, selectIndex, tableProps.items.length]);
+    if (nextIndex !== undefined) {
+      updateCursorIndex(nextIndex, { commit: "deferred" });
+    }
+  }, [navigableIndices, tableProps.items.length, updateCursorIndex]);
 
   const activateSelection = useCallback(() => {
     if (!navigableIndices) {
@@ -250,6 +456,32 @@ export function DataTableView<
     activateIndex(selectedIsNavigable ? selectedIndex : navigableIndices[0]!);
   }, [activateIndex, navigableIndices, tableProps.items.length]);
 
+  const isItemSelected = useCallback((item: T, index: number) => (
+    index === effectiveSelectedIndex
+    && (!isNavigable || isNavigable(item, index))
+  ), [effectiveSelectedIndex, isNavigable]);
+
+  const handleTableSelect = useCallback((_item: T, index: number) => {
+    updateCursorIndex(index, { commit: "immediate" });
+  }, [updateCursorIndex]);
+
+  const handleTableActivate = useCallback((_item: T, index: number) => {
+    activateIndex(index);
+  }, [activateIndex]);
+
+  const handleRowMouseDown = useCallback((item: T, index: number, event: any) => {
+    const handled = tableProps.onRowMouseDown?.(item, index, event);
+    if (handled === true) {
+      updateCursorIndex(index, { commit: "immediate" });
+    }
+    return handled;
+  }, [tableProps.onRowMouseDown, updateCursorIndex]);
+
+  const handleRowContextMenu = useCallback((item: T, index: number, event: any) => {
+    updateCursorIndex(index, { commit: "immediate" });
+    tableProps.onRowContextMenu?.(item, index, event);
+  }, [tableProps.onRowContextMenu, updateCursorIndex]);
+
   useShortcut((event) => {
     if (event.defaultPrevented || event.propagationStopped) return;
     if (!focused || !keyboardNavigation) return;
@@ -293,13 +525,11 @@ export function DataTableView<
         setHoveredIdx={effectiveSetHoveredIdx}
         scrollToIndex={effectiveScrollToIndex}
         scrollToIndexVersion={scrollToIndexVersion + selectionScrollVersion}
-        isSelected={(item, index) => (
-          tableProps.isSelected(item, index)
-          || (
-            index === effectiveSelectedIndex
-            && (!isNavigable || isNavigable(item, index))
-          )
-        )}
+        isSelected={isItemSelected}
+        onSelect={handleTableSelect}
+        onActivate={handleTableActivate}
+        onRowMouseDown={handleRowMouseDown}
+        onRowContextMenu={handleRowContextMenu}
       />
     </TableViewFrame>
   );

package/src/components/feed-data-table/stack-view.tsx

@@ -327,9 +327,12 @@ export function FeedDataTableStackView({
       onBack={() => setOpenItemId(null)}
       detailContent={detailContent}
       detailTitle={openItem ? openItem.detailTitle ?? openItem.title : undefined}
-      selectedIndex={activeRowIndex}
-      onSelectIndex={(_index, row) => onSelect(row.itemIndex)}
-      onActivateIndex={(_index, row) => openRow(row)}
+      selection={{
+        kind: "index",
+        selectedIndex: activeRowIndex,
+        onChange: (_index, row) => onSelect(row.itemIndex),
+      }}
+      onActivate={(row) => openRow(row)}
       rootBefore={rootBefore}
       rootAfter={rootAfter}
       rootWidth={width}
@@ -345,11 +348,6 @@ export function FeedDataTableStackView({
           nextSortPreference(current, columnId as DetailColumnId)
         )}
       getItemKey={(row) => row.item.id}
-      isSelected={(row, index) =>
-        row.itemIndex === selectedIdx || (selectedIdx < 0 && index === 0)
-      }
-      onSelect={(row) => onSelect(row.itemIndex)}
-      onActivate={openRow}
       renderCell={renderCell}
       emptyStateTitle={emptyStateTitle}
       emptyStateHint={emptyStateHint}

package/src/components/layout/pane/footer/index.test.tsx

@@ -122,6 +122,12 @@ describe("PaneFooterBar", () => {
     const col = line.indexOf("[r]efresh");
     expect(col).toBeGreaterThanOrEqual(0);
 
+    await act(async () => {
+      await testSetup!.mockMouse.release(col + 1, 0);
+      await testSetup!.renderOnce();
+    });
+    expect(refreshCount).toBe(0);
+
     await act(async () => {
       await testSetup!.mockMouse.click(col + 1, 0);
       await testSetup!.renderOnce();

package/src/components/layout/pane/footer/index.tsx

@@ -1,4 +1,5 @@
 import { Box, Span, Text, TextAttributes, useUiCapabilities } from "../../../../ui";
+import { useRef } from "react";
 import { colors, blendHex } from "../../../../theme/colors";
 import { getShortcutHintWidth, ShortcutHint } from "../../../ui/shortcut-hint";
 import {
@@ -50,13 +51,24 @@ function stopMouseEvent(event?: { stopPropagation?: () => void; preventDefault?:
 function SegmentView({ segment }: { segment: PaneFooterSegment }) {
   const interactive = !!segment.onPress && !segment.disabled;
   const attributes = segment.parts.some((part) => part.bold) || interactive ? TextAttributes.BOLD : 0;
+  const triggerMouseDownRef = useRef(false);
+  const startSegmentPress = (event?: { stopPropagation?: () => void; preventDefault?: () => void }) => {
+    triggerMouseDownRef.current = true;
+    stopMouseEvent(event);
+  };
+  const finishSegmentPress = (event?: { stopPropagation?: () => void; preventDefault?: () => void }) => {
+    const startedOnTrigger = triggerMouseDownRef.current;
+    triggerMouseDownRef.current = false;
+    if (startedOnTrigger) segment.onPress?.();
+    else stopMouseEvent(event);
+  };
 
   return (
     <Text
       fg={segment.disabled ? colors.textMuted : colors.textDim}
       attributes={attributes}
-      onMouseDown={interactive ? stopMouseEvent : undefined}
-      onMouseUp={interactive ? segment.onPress : undefined}
+      onMouseDown={interactive ? startSegmentPress : undefined}
+      onMouseUp={interactive ? finishSegmentPress : undefined}
       {...(interactive ? { "data-gloom-interactive": "true" } : {})}
     >
       {segment.parts.map((part, index) => (