@perspective-ai/sdk-react 1.3.0 → 1.4.0-pr-25-20260306102715

package/src/hooks/useSlider.test.ts

@@ -3,34 +3,90 @@ import { renderHook, act, cleanup } from "@testing-library/react";
 import { useSlider } from "./useSlider";
 
 const mockDestroy = vi.fn();
-const mockUnmount = vi.fn();
 const mockUpdate = vi.fn();
+const mockShow = vi.fn();
+const mockHide = vi.fn();
+let invokeSdkClose: (() => void) | null = null;
 
 vi.mock("@perspective-ai/sdk", () => ({
-  openSlider: vi.fn(() => ({
-    unmount: mockUnmount,
-    update: mockUpdate,
-    destroy: mockDestroy,
-    researchId: "test-research-id",
-    type: "slider",
-    iframe: null,
-    container: null,
-  })),
+  openSlider: vi.fn(
+    (config: {
+      researchId?: string;
+      onClose?: () => void;
+      host?: string;
+      _startHidden?: boolean;
+    }) => {
+      const currentConfig = { ...config };
+      let open = !config._startHidden;
+
+      const show = vi.fn(() => {
+        if (open) return;
+        mockShow();
+        open = true;
+      });
+
+      const hide = vi.fn(() => {
+        if (!open) return;
+        mockHide();
+        open = false;
+        currentConfig.onClose?.();
+      });
+
+      const destroy = vi.fn(() => {
+        mockDestroy();
+        const wasOpen = open;
+        open = false;
+        if (wasOpen) {
+          currentConfig.onClose?.();
+        }
+      });
+
+      const update = vi.fn(
+        (options: Partial<{ onClose?: () => void; host?: string }>) => {
+          mockUpdate(options);
+          Object.assign(currentConfig, options);
+        }
+      );
+
+      invokeSdkClose = () => {
+        if (!open) return;
+        open = false;
+        currentConfig.onClose?.();
+      };
+
+      return {
+        unmount: destroy,
+        update,
+        destroy,
+        show,
+        hide,
+        get isOpen() {
+          return open;
+        },
+        researchId: config.researchId ?? "test-research-id",
+        type: "slider",
+        iframe: null,
+        container: null,
+      };
+    }
+  ),
 }));
 
 import { openSlider } from "@perspective-ai/sdk";
+
 const mockOpenSlider = vi.mocked(openSlider);
 
 describe("useSlider", () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    invokeSdkClose = null;
   });
 
   afterEach(() => {
     cleanup();
   });
 
-  it("returns open, close, toggle functions and isOpen state", () => {
+  it("returns open, close, toggle functions and initial state", () => {
     const { result } = renderHook(() =>
       useSlider({ researchId: "test-research-id" })
     );
@@ -39,47 +95,37 @@ describe("useSlider", () => {
     expect(result.current.close).toBeInstanceOf(Function);
     expect(result.current.toggle).toBeInstanceOf(Function);
     expect(result.current.isOpen).toBe(false);
-    expect(result.current.handle).toBeNull();
+    expect(result.current.handle).not.toBeNull();
   });
 
-  it("does not call openSlider on mount", () => {
+  it("preloads a hidden slider on mount", () => {
     renderHook(() => useSlider({ researchId: "test-research-id" }));
 
-    expect(mockOpenSlider).not.toHaveBeenCalled();
-  });
-
-  it("calls openSlider when open() is called", () => {
-    const { result } = renderHook(() =>
-      useSlider({ researchId: "test-research-id" })
-    );
-
-    act(() => {
-      result.current.open();
-    });
-
     expect(mockOpenSlider).toHaveBeenCalledTimes(1);
     expect(mockOpenSlider).toHaveBeenCalledWith(
       expect.objectContaining({
         researchId: "test-research-id",
+        _startHidden: true,
       })
     );
   });
 
-  it("sets isOpen to true when open() is called", () => {
+  it("opens the preloaded slider without recreating it", () => {
     const { result } = renderHook(() =>
       useSlider({ researchId: "test-research-id" })
     );
 
-    expect(result.current.isOpen).toBe(false);
-
     act(() => {
       result.current.open();
     });
 
+    expect(mockOpenSlider).toHaveBeenCalledTimes(1);
+    expect(mockShow).toHaveBeenCalledTimes(1);
     expect(result.current.isOpen).toBe(true);
+    expect(result.current.handle).not.toBeNull();
   });
 
-  it("calls destroy and sets isOpen to false when close() is called", () => {
+  it("hides the slider on close but keeps the handle for instant reopen", () => {
     const { result } = renderHook(() =>
       useSlider({ researchId: "test-research-id" })
     );
@@ -88,22 +134,37 @@ describe("useSlider", () => {
       result.current.open();
     });
 
-    expect(result.current.isOpen).toBe(true);
-
     act(() => {
       result.current.close();
     });
 
-    expect(mockDestroy).toHaveBeenCalledTimes(1);
+    expect(mockHide).toHaveBeenCalledTimes(1);
+    expect(mockDestroy).not.toHaveBeenCalled();
     expect(result.current.isOpen).toBe(false);
+    expect(result.current.handle).not.toBeNull();
   });
 
-  it("toggles open state", () => {
+  it("reuses the same slider on reopen after close", () => {
     const { result } = renderHook(() =>
       useSlider({ researchId: "test-research-id" })
     );
 
-    expect(result.current.isOpen).toBe(false);
+    act(() => {
+      result.current.open();
+      result.current.close();
+      result.current.open();
+    });
+
+    expect(mockOpenSlider).toHaveBeenCalledTimes(1);
+    expect(mockShow).toHaveBeenCalledTimes(2);
+    expect(mockHide).toHaveBeenCalledTimes(1);
+    expect(result.current.isOpen).toBe(true);
+  });
+
+  it("toggles open state using the same underlying slider", () => {
+    const { result } = renderHook(() =>
+      useSlider({ researchId: "test-research-id" })
+    );
 
     act(() => {
       result.current.toggle();
@@ -111,40 +172,212 @@ describe("useSlider", () => {
 
     expect(result.current.isOpen).toBe(true);
     expect(mockOpenSlider).toHaveBeenCalledTimes(1);
+    expect(mockShow).toHaveBeenCalledTimes(1);
 
     act(() => {
       result.current.toggle();
     });
 
     expect(result.current.isOpen).toBe(false);
-    expect(mockDestroy).toHaveBeenCalledTimes(1);
+    expect(mockHide).toHaveBeenCalledTimes(1);
+    expect(mockDestroy).not.toHaveBeenCalled();
   });
 
-  it("cleans up on unmount", () => {
-    const { result, unmount } = renderHook(() =>
-      useSlider({ researchId: "test-research-id" })
+  it("passes config to openSlider during preload creation", () => {
+    renderHook(() =>
+      useSlider({
+        researchId: "test-research-id",
+        params: { source: "test" },
+        theme: "dark",
+        host: "https://custom.example.com",
+      })
+    );
+
+    expect(mockOpenSlider).toHaveBeenCalledTimes(1);
+    const config = mockOpenSlider.mock.calls[0]![0];
+    expect(config.researchId).toBe("test-research-id");
+    expect(config.params).toEqual({ source: "test" });
+    expect(config.theme).toBe("dark");
+    expect(config.host).toBe("https://custom.example.com");
+    expect(config._startHidden).toBe(true);
+  });
+
+  it("supports controlled mode with open prop using show and hide", () => {
+    const onOpenChange = vi.fn();
+
+    const { rerender } = renderHook(
+      ({ open }) =>
+        useSlider({
+          researchId: "test-research-id",
+          open,
+          onOpenChange,
+        }),
+      { initialProps: { open: false } }
+    );
+
+    expect(mockOpenSlider).toHaveBeenCalledTimes(1);
+
+    rerender({ open: true });
+    expect(mockOpenSlider).toHaveBeenCalledTimes(1);
+    expect(mockShow).toHaveBeenCalledTimes(1);
+
+    rerender({ open: false });
+    expect(mockHide).toHaveBeenCalledTimes(1);
+    expect(mockDestroy).not.toHaveBeenCalled();
+  });
+
+  it("calls onOpenChange in controlled mode when open() is called", () => {
+    const onOpenChange = vi.fn();
+
+    const { result } = renderHook(() =>
+      useSlider({
+        researchId: "test-research-id",
+        open: false,
+        onOpenChange,
+      })
     );
 
     act(() => {
       result.current.open();
     });
 
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+  });
+
+  it("destroys the slider on component unmount", () => {
+    const { unmount } = renderHook(() =>
+      useSlider({ researchId: "test-research-id" })
+    );
+
     unmount();
 
-    expect(mockDestroy).toHaveBeenCalled();
+    expect(mockUpdate).toHaveBeenCalledWith({ onClose: undefined });
+    expect(mockDestroy).toHaveBeenCalledTimes(1);
   });
 
-  it("makes handle reactive - handle is available after open", () => {
+  it("keeps the handle available after mount", () => {
     const { result } = renderHook(() =>
       useSlider({ researchId: "test-research-id" })
     );
 
-    expect(result.current.handle).toBeNull();
+    expect(result.current.handle).not.toBeNull();
+  });
+
+  it("updates state when the SDK triggers onClose without destroying the slider", () => {
+    const onClose = vi.fn();
+    const { result } = renderHook(() =>
+      useSlider({
+        researchId: "test-research-id",
+        onClose,
+      })
+    );
+
+    act(() => {
+      result.current.open();
+    });
+
+    act(() => {
+      invokeSdkClose?.();
+    });
+
+    expect(mockDestroy).not.toHaveBeenCalled();
+    expect(result.current.isOpen).toBe(false);
+    expect(result.current.handle).not.toBeNull();
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("recreates the slider when researchId changes", () => {
+    const { rerender } = renderHook(
+      ({ researchId }) =>
+        useSlider({
+          researchId,
+        }),
+      { initialProps: { researchId: "research-1" } }
+    );
+
+    expect(mockOpenSlider).toHaveBeenCalledTimes(1);
+
+    rerender({ researchId: "research-2" });
+
+    expect(mockOpenSlider).toHaveBeenCalledTimes(2);
+    expect(mockDestroy).toHaveBeenCalledTimes(1);
+  });
+
+  it("recreates a hidden slider when iframe-defining config changes", () => {
+    const onClose = vi.fn();
+
+    const { result, rerender } = renderHook(
+      ({ params }) =>
+        useSlider({
+          researchId: "test-research-id",
+          params,
+          onClose,
+        }),
+      { initialProps: { params: { source: "first" } } }
+    );
+
+    expect(result.current.isOpen).toBe(false);
+    expect(mockOpenSlider).toHaveBeenCalledTimes(1);
+
+    rerender({ params: { source: "second" } });
+
+    expect(mockOpenSlider).toHaveBeenCalledTimes(2);
+    expect(mockDestroy).toHaveBeenCalledTimes(1);
+    expect(onClose).not.toHaveBeenCalled();
+    expect(result.current.isOpen).toBe(false);
+  });
+
+  it("keeps controlled slider open when recreated while open", () => {
+    const onOpenChange = vi.fn();
+
+    const { result, rerender } = renderHook(
+      ({ researchId }) =>
+        useSlider({
+          researchId,
+          open: true,
+          onOpenChange,
+        }),
+      { initialProps: { researchId: "research-1" } }
+    );
+
+    expect(mockOpenSlider).toHaveBeenCalledTimes(1);
+    expect(result.current.isOpen).toBe(true);
+
+    rerender({ researchId: "research-2" });
+
+    expect(mockOpenSlider).toHaveBeenCalledTimes(2);
+    expect(mockDestroy).toHaveBeenCalledTimes(1);
+    expect(result.current.handle).not.toBeNull();
+    expect(result.current.isOpen).toBe(true);
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+
+  it("keeps uncontrolled slider open when recreated while open", () => {
+    const onClose = vi.fn();
+
+    const { result, rerender } = renderHook(
+      ({ params }) =>
+        useSlider({
+          researchId: "test-research-id",
+          params,
+          onClose,
+        }),
+      { initialProps: { params: { source: "first" } } }
+    );
 
     act(() => {
       result.current.open();
     });
 
+    expect(mockOpenSlider).toHaveBeenCalledTimes(1);
+    expect(result.current.isOpen).toBe(true);
+
+    rerender({ params: { source: "second" } });
+
+    expect(mockOpenSlider).toHaveBeenCalledTimes(2);
+    expect(mockDestroy).toHaveBeenCalledTimes(1);
     expect(result.current.handle).not.toBeNull();
+    expect(result.current.isOpen).toBe(true);
+    expect(onClose).not.toHaveBeenCalled();
   });
 });

package/src/hooks/useSlider.ts

@@ -5,6 +5,9 @@ import {
   type EmbedHandle,
 } from "@perspective-ai/sdk";
 import { useStableCallback } from "./useStableCallback";
+import { useStableValue } from "./useStableValue";
+
+type SliderHandle = ReturnType<typeof openSlider>;
 
 /** Options for useSlider hook */
 export interface UseSliderOptions extends Omit<EmbedConfig, "type"> {
@@ -24,7 +27,7 @@ export interface UseSliderReturn {
   toggle: () => void;
   /** Whether the slider is currently open */
   isOpen: boolean;
-  /** The underlying SDK handle (null when closed) */
+  /** The underlying SDK handle (created on mount; may be null during initial render) */
   handle: EmbedHandle | null;
 }
 
@@ -56,10 +59,14 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
 
   const [handle, setHandle] = useState<EmbedHandle | null>(null);
   const [internalOpen, setInternalOpen] = useState(false);
-  const handleRef = useRef<EmbedHandle | null>(null);
+  const handleRef = useRef<SliderHandle | null>(null);
 
   const isControlled = controlledOpen !== undefined;
   const isOpen = isControlled ? controlledOpen : internalOpen;
+  const initialHiddenRef = useRef(!isOpen);
+
+  const stableParams = useStableValue(params);
+  const stableBrand = useStableValue(brand);
 
   const stableOnReady = useStableCallback(onReady);
   const stableOnSubmit = useStableCallback(onSubmit);
@@ -77,72 +84,115 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     [isControlled, onOpenChange]
   );
 
+  const destroySlider = useCallback(
+    (targetHandle: SliderHandle | null = handleRef.current) => {
+      if (!targetHandle) return;
+
+      targetHandle.update({ onClose: undefined });
+      targetHandle.destroy();
+
+      if (handleRef.current === targetHandle) {
+        handleRef.current = null;
+        setHandle(null);
+      }
+    },
+    []
+  );
+
   const handleClose = useCallback(() => {
-    handleRef.current = null;
-    setHandle(null);
     setOpen(false);
     onClose?.();
   }, [setOpen, onClose]);
 
   const stableOnClose = useStableCallback(handleClose);
 
-  const createSlider = useCallback(() => {
-    if (handleRef.current) return handleRef.current;
-
-    const newHandle = openSlider({
+  const createSliderHandle = useCallback(
+    (startHidden: boolean) =>
+      openSlider({
+        researchId,
+        params: stableParams,
+        brand: stableBrand,
+        theme,
+        host,
+        onReady: stableOnReady,
+        onSubmit: stableOnSubmit,
+        onNavigate: stableOnNavigate,
+        onClose: stableOnClose,
+        onError: stableOnError,
+        _startHidden: startHidden,
+      }),
+    [
       researchId,
-      params,
-      brand,
+      stableParams,
+      stableBrand,
       theme,
       host,
-      onReady: stableOnReady,
-      onSubmit: stableOnSubmit,
-      onNavigate: stableOnNavigate,
-      onClose: stableOnClose,
-      onError: stableOnError,
-    });
-
-    handleRef.current = newHandle;
-    setHandle(newHandle);
-    return newHandle;
-  }, [
-    researchId,
-    params,
-    brand,
-    theme,
-    host,
-    stableOnReady,
-    stableOnSubmit,
-    stableOnNavigate,
-    stableOnClose,
-    stableOnError,
-  ]);
-
-  const destroySlider = useCallback(() => {
-    if (handleRef.current) {
-      handleRef.current.destroy();
-      handleRef.current = null;
-      setHandle(null);
+      stableOnReady,
+      stableOnSubmit,
+      stableOnNavigate,
+      stableOnClose,
+      stableOnError,
+    ]
+  );
+
+  const setSliderHandle = useCallback(
+    (startHidden: boolean) => {
+      const newHandle = createSliderHandle(startHidden);
+      handleRef.current = newHandle;
+      setHandle(newHandle);
+      return newHandle;
+    },
+    [createSliderHandle]
+  );
+
+  useEffect(() => {
+    const currentHandle = handleRef.current;
+    if (!currentHandle) return;
+
+    if (isOpen) {
+      currentHandle.show();
+    } else {
+      currentHandle.hide();
     }
-  }, []);
+  }, [isOpen]);
+
+  useEffect(() => {
+    // Stable callback/value wrappers are part of this hook's contract.
+    // When any iframe-defining input changes, recreate the underlying embed.
+    const nextHandle = setSliderHandle(
+      handleRef.current ? !handleRef.current.isOpen : initialHiddenRef.current
+    );
+
+    return () => {
+      if (handleRef.current === nextHandle) {
+        destroySlider(nextHandle);
+      }
+    };
+  }, [destroySlider, setSliderHandle]);
+
+  const ensureSlider = useCallback(() => {
+    if (handleRef.current) return handleRef.current;
+
+    return setSliderHandle(false);
+  }, [setSliderHandle]);
 
   const openFn = useCallback(() => {
     if (isControlled) {
       onOpenChange?.(true);
     } else {
-      createSlider();
+      ensureSlider().show();
       setInternalOpen(true);
     }
-  }, [isControlled, onOpenChange, createSlider]);
+  }, [ensureSlider, isControlled, onOpenChange]);
 
   const closeFn = useCallback(() => {
     if (isControlled) {
       onOpenChange?.(false);
     } else {
-      destroySlider();
+      handleRef.current?.hide();
       setInternalOpen(false);
     }
-  }, [isControlled, onOpenChange, destroySlider]);
+  }, [isControlled, onOpenChange]);
 
   const toggleFn = useCallback(() => {
     if (isOpen) {
@@ -152,25 +202,6 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     }
   }, [isOpen, openFn, closeFn]);
 
-  useEffect(() => {
-    if (!isControlled) return;
-
-    if (controlledOpen && !handleRef.current) {
-      createSlider();
-    } else if (!controlledOpen && handleRef.current) {
-      destroySlider();
-    }
-  }, [controlledOpen, isControlled, createSlider, destroySlider]);
-
-  useEffect(() => {
-    return () => {
-      if (handleRef.current) {
-        handleRef.current.destroy();
-        handleRef.current = null;
-      }
-    };
-  }, []);
-
   return {
     open: openFn,
     close: closeFn,