gloomberb 0.7.0 → 0.7.2

package/src/components/layout/shell.test.tsx

@@ -6,6 +6,7 @@ import { act, createElement, useReducer } from "react";
 import { AppContext, appReducer, createInitialState } from "../../state/app-context";
 import { MarketDataCoordinator, setSharedMarketDataCoordinator } from "../../market-data/coordinator";
 import { setSharedMarketDataForTests } from "../../plugins/registry";
+import { useShortcut } from "../../react/input";
 import { cloneLayout, createDefaultConfig } from "../../types/config";
 import type { PluginRegistry } from "../../plugins/registry";
 import { setSharedRegistryForTests } from "../../plugins/registry";
@@ -16,6 +17,7 @@ import type { PaneProps } from "../../types/plugin";
 import { StockChart } from "../chart/stock-chart";
 import { StatusBar } from "./status-bar";
 import { Header } from "./header";
+import { DetachedPaneShell } from "./detached-pane-shell";
 import {
   buildNativeWindowState,
   constrainFloatingRectToBounds,
@@ -211,6 +213,31 @@ function createChartShellDataProvider(historyBySymbol: Record<string, PricePoint
   };
 }
 
+async function emitKeypress(event: { name?: string; sequence?: string }) {
+  await act(async () => {
+    const keyEvent = {
+      ctrl: false,
+      meta: false,
+      option: false,
+      shift: false,
+      eventType: "press",
+      repeated: false,
+      defaultPrevented: false,
+      propagationStopped: false,
+      preventDefault() {
+        this.defaultPrevented = true;
+      },
+      stopPropagation() {
+        this.propagationStopped = true;
+      },
+      ...event,
+    };
+    testSetup!.renderer.keyInput.emit("keypress", keyEvent as any);
+    await testSetup!.renderOnce();
+    await testSetup!.renderOnce();
+  });
+}
+
 function HeaderHarness({
   updateAvailable = null,
   updateProgress = null,
@@ -935,6 +962,177 @@ describe("Shell", () => {
     expect(updateLayout?.layout.dockRoot).toBeNull();
   });
 
+  test("closes the focused pane after double Escape", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-test");
+    const mainPane = config.layout.instances.find((instance) => instance.instanceId === "portfolio-list:main");
+    if (!mainPane) throw new Error("missing default portfolio pane");
+
+    const singlePaneLayout = {
+      dockRoot: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+      instances: [{ ...mainPane }],
+      floating: [],
+    };
+    const state = {
+      ...createInitialState({
+        ...config,
+        layout: cloneLayout(singlePaneLayout),
+        layouts: [{ name: "Default", layout: cloneLayout(singlePaneLayout) }],
+      }),
+      focusedPaneId: "portfolio-list:main",
+    };
+    const actions: Array<any> = [];
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: (action) => actions.push(action) }}>
+        <TestDialogProvider>
+          <Shell pluginRegistry={createShellPluginRegistry()} />
+        </TestDialogProvider>
+      </AppContext>,
+      { width: 40, height: 10 },
+    );
+
+    await testSetup.renderOnce();
+    await emitKeypress({ name: "escape", sequence: "\u001b" });
+    expect(actions.some((action) => action.type === "UPDATE_LAYOUT")).toBe(false);
+
+    await emitKeypress({ name: "escape", sequence: "\u001b" });
+
+    const updateLayout = actions.find((action) => action.type === "UPDATE_LAYOUT");
+    expect(actions).toContainEqual({ type: "PUSH_LAYOUT_HISTORY" });
+    expect(updateLayout?.layout.instances).toEqual([]);
+    expect(updateLayout?.layout.floating).toEqual([]);
+    expect(updateLayout?.layout.dockRoot).toBeNull();
+  });
+
+  test("closes on double Escape even when the focused pane handles the first Escape", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-test");
+    const mainPane = config.layout.instances.find((instance) => instance.instanceId === "portfolio-list:main");
+    if (!mainPane) throw new Error("missing default portfolio pane");
+
+    let consumedEscapes = 0;
+    function EscapeConsumerPane() {
+      useShortcut((event) => {
+        if (event.name !== "escape") return;
+        consumedEscapes += 1;
+        event.preventDefault();
+        event.stopPropagation();
+      });
+      return <text>Escape Consumer</text>;
+    }
+
+    const singlePaneLayout = {
+      dockRoot: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+      instances: [{ ...mainPane }],
+      floating: [],
+    };
+    const state = {
+      ...createInitialState({
+        ...config,
+        layout: cloneLayout(singlePaneLayout),
+        layouts: [{ name: "Default", layout: cloneLayout(singlePaneLayout) }],
+      }),
+      focusedPaneId: "portfolio-list:main",
+    };
+    const actions: Array<any> = [];
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: (action) => actions.push(action) }}>
+        <TestDialogProvider>
+          <Shell
+            pluginRegistry={createShellPluginRegistry({
+              portfolioListComponent: EscapeConsumerPane,
+            })}
+          />
+        </TestDialogProvider>
+      </AppContext>,
+      { width: 40, height: 10 },
+    );
+
+    await testSetup.renderOnce();
+    await emitKeypress({ name: "escape", sequence: "\u001b" });
+    expect(consumedEscapes).toBe(1);
+    expect(actions.some((action) => action.type === "UPDATE_LAYOUT")).toBe(false);
+
+    await emitKeypress({ name: "escape", sequence: "\u001b" });
+    const updateLayout = actions.find((action) => action.type === "UPDATE_LAYOUT");
+    expect(consumedEscapes).toBe(1);
+    expect(updateLayout?.layout.dockRoot).toBeNull();
+  });
+
+  test("closes on double Escape while pane input is captured", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-test");
+    const mainPane = config.layout.instances.find((instance) => instance.instanceId === "portfolio-list:main");
+    if (!mainPane) throw new Error("missing default portfolio pane");
+
+    const singlePaneLayout = {
+      dockRoot: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+      instances: [{ ...mainPane }],
+      floating: [],
+    };
+    const state = {
+      ...createInitialState({
+        ...config,
+        layout: cloneLayout(singlePaneLayout),
+        layouts: [{ name: "Default", layout: cloneLayout(singlePaneLayout) }],
+      }),
+      focusedPaneId: "portfolio-list:main",
+      inputCaptured: true,
+    };
+    const actions: Array<any> = [];
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: (action) => actions.push(action) }}>
+        <TestDialogProvider>
+          <Shell pluginRegistry={createShellPluginRegistry()} />
+        </TestDialogProvider>
+      </AppContext>,
+      { width: 40, height: 10 },
+    );
+
+    await testSetup.renderOnce();
+    await emitKeypress({ name: "escape", sequence: "\u001b" });
+    expect(actions.some((action) => action.type === "UPDATE_LAYOUT")).toBe(false);
+
+    await emitKeypress({ name: "escape", sequence: "\u001b" });
+    const updateLayout = actions.find((action) => action.type === "UPDATE_LAYOUT");
+    expect(updateLayout?.layout.dockRoot).toBeNull();
+  });
+
+  test("closes a detached pane window after double Escape", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-test");
+    const state = {
+      ...createInitialState(config),
+      focusedPaneId: "portfolio-list:main",
+    };
+    const closedPaneIds: string[] = [];
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: () => {} }}>
+        <TestDialogProvider>
+          <DetachedPaneShell
+            pluginRegistry={createShellPluginRegistry()}
+            desktopWindowBridge={{
+              kind: "detached",
+              paneId: "portfolio-list:main",
+              subscribeState: () => () => {},
+              closeDetachedPane: async (paneId) => {
+                closedPaneIds.push(paneId);
+              },
+            }}
+          />
+        </TestDialogProvider>
+      </AppContext>,
+      { width: 40, height: 10 },
+    );
+
+    await testSetup.renderOnce();
+    await emitKeypress({ name: "escape", sequence: "\u001b" });
+    expect(closedPaneIds).toEqual([]);
+
+    await emitKeypress({ name: "escape", sequence: "\u001b" });
+    expect(closedPaneIds).toEqual(["portfolio-list:main"]);
+  });
+
   test("closes the focused floating pane with Ctrl+W", async () => {
     const config = createDefaultConfig("/tmp/gloomberb-shell-test");
     const mainPane = config.layout.instances.find((instance) => instance.instanceId === "portfolio-list:main");

package/src/components/layout/shell.tsx

@@ -43,6 +43,7 @@ import {
   selectStatusBarVisible,
 } from "../../state/selectors-ui";
 import { colors } from "../../theme/colors";
+import { useThemeColors } from "../../theme/theme-context";
 import { PANE_HEADER_ACTION, PANE_HEADER_CLOSE } from "./pane-header";
 import { getNativeSurfaceManager, type NativeOccluder, type NativePaneLayer } from "../chart/native/surface-manager";
 import { FloatingPaneWrapper } from "./floating-pane";
@@ -58,6 +59,11 @@ import {
   getShortcutDisplayMode,
   type ShortcutDisplayMode,
 } from "../../utils/shortcut-labels";
+import {
+  createDoubleEscapeCloseState,
+  recordDoubleEscapeClose,
+  resetDoubleEscapeClose,
+} from "../../utils/double-escape-close";
 
 interface ShellProps {
   pluginRegistry: PluginRegistry;
@@ -777,6 +783,7 @@ function resolveExternalDockPreview(
 }
 
 export function Shell({ pluginRegistry, desktopWindowBridge, desktopDockPreview }: ShellProps) {
+  useThemeColors();
   const dispatch = useAppDispatch();
   const config = useAppSelector((state) => state.config);
   const paneState = useAppSelector((state) => state.paneState);
@@ -808,6 +815,7 @@ export function Shell({ pluginRegistry, desktopWindowBridge, desktopDockPreview
   const overlayOpen = commandBarOpen || dialogOpen || !!menuState;
 
   const dragRef = useRef<DragMode | null>(null);
+  const doubleEscapeCloseRef = useRef(createDoubleEscapeCloseState());
   const [dragFloatingRect, setDragFloatingRect] = useState<{ paneId: string; rect: FloatingRect } | null>(null);
   const [dragCursor, setDragCursor] = useState<{ x: number; y: number } | null>(null);
   const [dividerPreview, setDividerPreview] = useState<DividerPreviewState | null>(null);
@@ -964,13 +972,36 @@ export function Shell({ pluginRegistry, desktopWindowBridge, desktopDockPreview
     return true;
   }, [contentHeight, persistLayout, visibleLayout, width]);
 
+  useEffect(() => {
+    if (overlayOpen) {
+      resetDoubleEscapeClose(doubleEscapeCloseRef.current);
+    }
+  }, [overlayOpen]);
+
   useShortcut((event) => {
-    if (event.name === "escape") {
+    const isEscape = event.name === "escape" || event.name === "esc";
+    if (isEscape) {
+      const doubleEscapeState = doubleEscapeCloseRef.current;
+      if (!dragRef.current && !overlayOpen) {
+        if (recordDoubleEscapeClose(doubleEscapeState, focusedPaneId, Date.now()) && closeFocusedPane()) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+      } else {
+        resetDoubleEscapeClose(doubleEscapeState);
+      }
+
       if (!dragRef.current) return;
       cancelActiveDrag();
-      return;
+      event.preventDefault();
+      event.stopPropagation();
+    } else {
+      resetDoubleEscapeClose(doubleEscapeCloseRef.current);
     }
+  }, { phase: "before" });
 
+  useShortcut((event) => {
     const shortcut = resolvePaneManagementShortcut(event);
     if (!shortcut || dragRef.current || overlayOpen) return;
     if (inputCaptured && !inputCaptureAllowsPaneManagementShortcut(shortcut, event)) return;

package/src/components/layout/status-bar.tsx

@@ -1,6 +1,7 @@
 import { Box, Span, Text, TextAttributes, contextMenuDivider, useContextMenu, useUiCapabilities } from "../../ui";
 import { useCallback, useEffect, useState } from "react";
 import { colors, hoverBg } from "../../theme/colors";
+import { useThemeColors } from "../../theme/theme-context";
 import { useAppDispatch, useAppSelector, useFocusedTicker } from "../../state/app-context";
 import {
   selectActiveLayoutIndex,
@@ -57,6 +58,7 @@ function truncate(text: string, width: number): string {
 }
 
 export function StatusBar() {
+  useThemeColors();
   const { nativePaneChrome, nativeContextMenu } = useUiCapabilities();
   const { showContextMenu } = useContextMenu();
   const registry = getSharedRegistry();

package/src/components/speedometer-gauge.tsx

@@ -2,6 +2,7 @@ import { createElement, useMemo, type SVGProps } from "react";
 import { Box, ChartSurface, Span, Text, TextAttributes, useNativeRenderer, useUiCapabilities, useUiHost } from "../ui";
 import { computeBitmapSize, type NativeChartBitmap } from "./chart/native/chart-rasterizer";
 import { colors } from "../theme/colors";
+import { useThemeColors } from "../theme/theme-context";
 
 export interface SpeedometerSegment {
   from: number;
@@ -20,6 +21,7 @@ export interface SpeedometerGaugeProps {
   currentLabel?: string;
   minWidth?: number;
   maxWidth?: number;
+  compact?: boolean;
 }
 
 interface GaugeCell {
@@ -43,23 +45,17 @@ const DEFAULT_MIN_WIDTH = 34;
 const DEFAULT_MAX_WIDTH = 50;
 const DESKTOP_VIEWBOX_WIDTH = 520;
 const DESKTOP_VIEWBOX_HEIGHT = 232;
+const DESKTOP_COMPACT_VIEWBOX_HEIGHT = 214;
 const DESKTOP_CENTER_X = 260;
 const DESKTOP_CENTER_Y = 182;
 const DESKTOP_ARC_RADIUS = 138;
 const DESKTOP_NEEDLE_RADIUS = 104;
 const DESKTOP_LABEL_POSITIONS = [
-  { x: 90, y: 84 },
-  { x: 172, y: 44 },
-  { x: 260, y: 30 },
-  { x: 348, y: 44 },
-  { x: 430, y: 84 },
-];
-const DESKTOP_TICK_LABEL_POSITIONS = [
-  { x: 78, y: 224 },
-  { x: 170, y: 224 },
-  { x: 260, y: 224 },
-  { x: 350, y: 224 },
-  { x: 442, y: 224 },
+  { x: 76, y: 84 },
+  { x: 154, y: 44 },
+  { x: 260, y: 18 },
+  { x: 366, y: 44 },
+  { x: 444, y: 84 },
 ];
 
 function SvgText(props: SVGProps<SVGTextElement>) {
@@ -358,21 +354,24 @@ function DesktopGauge({
   currentLabel,
   minWidth,
   maxWidth,
+  compact,
 }: Required<SpeedometerGaugeProps>) {
   const gaugeWidth = Math.min(Math.max(width - 2, minWidth), maxWidth);
+  const gaugeHeight = compact ? 9 : 12;
+  const viewBoxHeight = compact ? DESKTOP_COMPACT_VIEWBOX_HEIGHT : DESKTOP_VIEWBOX_HEIGHT;
   const needleAngle = valueToDegrees(value, min, max);
   const needleEnd = polarToCartesian(DESKTOP_CENTER_X, DESKTOP_CENTER_Y, DESKTOP_NEEDLE_RADIUS, needleAngle);
 
   return (
     <Box
       width={gaugeWidth}
-      height={12}
-      marginTop={1}
+      height={gaugeHeight}
+      marginTop={compact ? 0 : 1}
       overflow="hidden"
       style={{ alignSelf: "center", maxWidth: 420 }}
     >
       <svg
-        viewBox={`0 0 ${DESKTOP_VIEWBOX_WIDTH} ${DESKTOP_VIEWBOX_HEIGHT}`}
+        viewBox={`0 0 ${DESKTOP_VIEWBOX_WIDTH} ${viewBoxHeight}`}
         width="100%"
         height="100%"
         role="img"
@@ -418,19 +417,12 @@ function DesktopGauge({
             </SvgText>
           );
         })}
-        {[min, min + (max - min) * 0.25, min + (max - min) * 0.5, min + (max - min) * 0.75, max].map((tick, index) => {
+        {[min, min + (max - min) * 0.25, min + (max - min) * 0.5, min + (max - min) * 0.75, max].map((tick) => {
           const angle = valueToDegrees(tick, min, max);
           const outer = polarToCartesian(DESKTOP_CENTER_X, DESKTOP_CENTER_Y, DESKTOP_ARC_RADIUS + 16, angle);
           const inner = polarToCartesian(DESKTOP_CENTER_X, DESKTOP_CENTER_Y, DESKTOP_ARC_RADIUS - 10, angle);
-          const label = DESKTOP_TICK_LABEL_POSITIONS[index]
-            ?? polarToCartesian(DESKTOP_CENTER_X, DESKTOP_CENTER_Y, DESKTOP_ARC_RADIUS + 34, angle);
           return (
-            <g key={tick}>
-              <line x1={inner.x} y1={inner.y} x2={outer.x} y2={outer.y} stroke={colors.textDim} strokeWidth="2" />
-              <SvgText x={label.x} y={label.y} fill={colors.textDim} textAnchor="middle" fontFamily="inherit" fontSize="13">
-                {formatGaugeValue(tick)}
-              </SvgText>
-            </g>
+            <line key={tick} x1={inner.x} y1={inner.y} x2={outer.x} y2={outer.y} stroke={colors.textDim} strokeWidth="2" />
           );
         })}
         <line
@@ -443,7 +435,16 @@ function DesktopGauge({
           strokeLinecap="round"
         />
         <circle cx={DESKTOP_CENTER_X} cy={DESKTOP_CENTER_Y} r="27" fill={colors.bg} />
-        <SvgText x={DESKTOP_CENTER_X} y={DESKTOP_CENTER_Y + 18} fill={colors.textBright} textAnchor="middle" fontFamily="inherit" fontSize="31" fontWeight="800">
+        <SvgText
+          x={DESKTOP_CENTER_X}
+          y={DESKTOP_CENTER_Y + 2}
+          fill={colors.textBright}
+          textAnchor="middle"
+          dominantBaseline="central"
+          fontFamily="inherit"
+          fontSize="31"
+          fontWeight="800"
+        >
           {formatGaugeValue(value)}
         </SvgText>
       </svg>
@@ -540,7 +541,9 @@ export function SpeedometerGauge({
   currentLabel = "Current reading",
   minWidth = DEFAULT_MIN_WIDTH,
   maxWidth = DEFAULT_MAX_WIDTH,
+  compact = false,
 }: SpeedometerGaugeProps) {
+  useThemeColors();
   const props = {
     value,
     valueLabel,
@@ -551,6 +554,7 @@ export function SpeedometerGauge({
     currentLabel,
     minWidth,
     maxWidth,
+    compact,
   };
   return useUiHost().kind === "desktop-web"
     ? <DesktopGauge {...props} />

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

@@ -8,6 +8,22 @@ import {
 } from "react";
 import { Box, type ScrollBoxRenderable } from "../ui";
 
+function listenToScrollBarChange(
+  scrollBar: ScrollBoxRenderable["verticalScrollBar"],
+  handler: () => void,
+): (() => void) | null {
+  if (
+    !scrollBar
+    || typeof scrollBar.on !== "function"
+    || typeof scrollBar.off !== "function"
+  ) {
+    return null;
+  }
+
+  scrollBar.on("change", handler);
+  return () => scrollBar.off?.("change", handler);
+}
+
 export interface TableViewKeyEvent {
   name?: string;
   ctrl?: boolean;
@@ -129,6 +145,66 @@ export function useTableBodyScrollActivity({
   }, [afterScroll, onBodyScrollActivity, syncHeaderScroll]);
 }
 
+export function useScrollBoxScrollActivity({
+  scrollRef,
+  onVerticalScroll,
+  onHorizontalScroll,
+}: {
+  scrollRef: RefObject<ScrollBoxRenderable | null>;
+  onVerticalScroll?: () => void;
+  onHorizontalScroll?: () => void;
+}) {
+  const onVerticalScrollRef = useRef(onVerticalScroll);
+  const onHorizontalScrollRef = useRef(onHorizontalScroll);
+  const verticalScrollScheduledRef = useRef(false);
+  const horizontalScrollScheduledRef = useRef(false);
+
+  useEffect(() => {
+    onVerticalScrollRef.current = onVerticalScroll;
+    onHorizontalScrollRef.current = onHorizontalScroll;
+  }, [onHorizontalScroll, onVerticalScroll]);
+
+  useEffect(() => {
+    const scrollBox = scrollRef.current;
+    if (!scrollBox) return;
+    let active = true;
+
+    const handleVerticalChange = () => {
+      if (verticalScrollScheduledRef.current) return;
+      verticalScrollScheduledRef.current = true;
+      queueMicrotask(() => {
+        verticalScrollScheduledRef.current = false;
+        if (!active) return;
+        onVerticalScrollRef.current?.();
+      });
+    };
+    const handleHorizontalChange = () => {
+      if (horizontalScrollScheduledRef.current) return;
+      horizontalScrollScheduledRef.current = true;
+      queueMicrotask(() => {
+        horizontalScrollScheduledRef.current = false;
+        if (!active) return;
+        onHorizontalScrollRef.current?.();
+      });
+    };
+
+    const removeVerticalListener = listenToScrollBarChange(
+      scrollBox.verticalScrollBar,
+      handleVerticalChange,
+    );
+    const removeHorizontalListener = listenToScrollBarChange(
+      scrollBox.horizontalScrollBar,
+      handleHorizontalChange,
+    );
+
+    return () => {
+      active = false;
+      removeVerticalListener?.();
+      removeHorizontalListener?.();
+    };
+  }, [scrollRef]);
+}
+
 export function useResetTableScroll({
   headerScrollRef,
   scrollRef,
@@ -140,6 +216,12 @@ export function useResetTableScroll({
   resetScrollKey?: unknown;
   afterReset?: () => void;
 }) {
+  const afterResetRef = useRef(afterReset);
+
+  useEffect(() => {
+    afterResetRef.current = afterReset;
+  }, [afterReset]);
+
   useEffect(() => {
     if (resetScrollKey === undefined) return;
     const body = scrollRef.current;
@@ -151,8 +233,8 @@ export function useResetTableScroll({
     if (header) {
       header.scrollLeft = 0;
     }
-    if (afterReset) {
-      queueMicrotask(afterReset);
+    if (afterResetRef.current) {
+      queueMicrotask(afterResetRef.current);
     }
-  }, [afterReset, headerScrollRef, resetScrollKey, scrollRef]);
+  }, [headerScrollRef, resetScrollKey, scrollRef]);
 }

package/src/components/ticker-list-table-view.tsx

@@ -1,6 +1,7 @@
 import {
   useCallback,
   useEffect,
+  useRef,
   type ReactNode,
   type RefObject,
 } from "react";
@@ -93,6 +94,7 @@ export function TickerListTableView({
   const selectedIndex = tableProps.tickers.findIndex(
     (ticker) => ticker.metadata.ticker === tableProps.cursorSymbol,
   );
+  const lastScrollCursorSymbolRef = useRef<string | null | undefined>(undefined);
 
   const emitVisibleRange = useCallback(() => {
     if (!onVisibleRangeChange) return;
@@ -185,7 +187,19 @@ export function TickerListTableView({
 
   useEffect(() => {
     const scrollBox = effectiveScrollRef.current;
-    if (!scrollBox?.viewport || selectedIndex < 0) return;
+    if (!scrollBox?.viewport || selectedIndex < 0) {
+      queueMicrotask(emitVisibleRange);
+      return;
+    }
+
+    const shouldScrollToCursor =
+      lastScrollCursorSymbolRef.current !== tableProps.cursorSymbol;
+    lastScrollCursorSymbolRef.current = tableProps.cursorSymbol;
+
+    if (!shouldScrollToCursor) {
+      queueMicrotask(emitVisibleRange);
+      return;
+    }
 
     const viewportHeight = Math.max(scrollBox.viewport.height, 1);
     if (selectedIndex < scrollBox.scrollTop) {
@@ -194,7 +208,7 @@ export function TickerListTableView({
       scrollBox.scrollTo(selectedIndex - viewportHeight + 1);
     }
     queueMicrotask(emitVisibleRange);
-  }, [effectiveScrollRef, emitVisibleRange, selectedIndex]);
+  }, [effectiveScrollRef, emitVisibleRange, selectedIndex, tableProps.cursorSymbol]);
 
   return (
     <TableViewFrame