@perspective-ai/sdk-react 1.0.0-alpha.2 → 1.0.0-alpha.3

package/dist/index.js

@@ -1,5 +1,5 @@
-import { useRef, useLayoutEffect, useEffect, useCallback, useState, useMemo } from 'react';
-import { createWidget, openPopup, openSlider, createFloatBubble, createFullpage } from '@perspective-ai/sdk';
+import { useRef, useLayoutEffect, useEffect, useCallback, useState } from 'react';
+import { openPopup, openSlider, createFloatBubble, createWidget, createFullpage } from '@perspective-ai/sdk';
 import { jsx } from 'react/jsx-runtime';
 
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
@@ -13,33 +13,52 @@ function useStableCallback(callback) {
     []
   );
 }
-function Widget({
-  researchId,
-  params,
-  brand,
-  theme,
-  host,
-  onReady,
-  onSubmit,
-  onNavigate,
-  onClose,
-  onError,
-  embedRef,
-  className,
-  style,
-  ...divProps
-}) {
-  const containerRef = useRef(null);
+
+// src/hooks/usePopup.ts
+function usePopup(options) {
+  const {
+    researchId,
+    params,
+    brand,
+    theme,
+    host,
+    onReady,
+    onSubmit,
+    onNavigate,
+    onClose,
+    onError,
+    open: controlledOpen,
+    onOpenChange
+  } = options;
+  const [handle, setHandle] = useState(null);
+  const [internalOpen, setInternalOpen] = useState(false);
   const handleRef = useRef(null);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
   const stableOnReady = useStableCallback(onReady);
   const stableOnSubmit = useStableCallback(onSubmit);
   const stableOnNavigate = useStableCallback(onNavigate);
-  const stableOnClose = useStableCallback(onClose);
   const stableOnError = useStableCallback(onError);
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-    const handle = createWidget(container, {
+  const setOpen = useCallback(
+    (value) => {
+      if (isControlled) {
+        onOpenChange?.(value);
+      } else {
+        setInternalOpen(value);
+      }
+    },
+    [isControlled, onOpenChange]
+  );
+  const handleClose = useCallback(() => {
+    handleRef.current = null;
+    setHandle(null);
+    setOpen(false);
+    onClose?.();
+  }, [setOpen, onClose]);
+  const stableOnClose = useStableCallback(handleClose);
+  const createPopup = useCallback(() => {
+    if (handleRef.current) return handleRef.current;
+    const newHandle = openPopup({
       researchId,
       params,
       brand,
@@ -51,17 +70,9 @@ function Widget({
       onClose: stableOnClose,
       onError: stableOnError
     });
-    handleRef.current = handle;
-    if (embedRef) {
-      embedRef.current = handle;
-    }
-    return () => {
-      handle.unmount();
-      handleRef.current = null;
-      if (embedRef) {
-        embedRef.current = null;
-      }
-    };
+    handleRef.current = newHandle;
+    setHandle(newHandle);
+    return newHandle;
   }, [
     researchId,
     params,
@@ -72,42 +83,82 @@ function Widget({
     stableOnSubmit,
     stableOnNavigate,
     stableOnClose,
-    stableOnError,
-    embedRef
+    stableOnError
   ]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: containerRef,
-      className,
-      style: { minHeight: 500, ...style },
-      "data-testid": "perspective-widget",
-      ...divProps
+  const destroyPopup = useCallback(() => {
+    if (handleRef.current) {
+      handleRef.current.destroy();
+      handleRef.current = null;
+      setHandle(null);
     }
-  );
+  }, []);
+  const openFn = useCallback(() => {
+    if (isControlled) {
+      onOpenChange?.(true);
+    } else {
+      createPopup();
+      setInternalOpen(true);
+    }
+  }, [isControlled, onOpenChange, createPopup]);
+  const closeFn = useCallback(() => {
+    if (isControlled) {
+      onOpenChange?.(false);
+    } else {
+      destroyPopup();
+      setInternalOpen(false);
+    }
+  }, [isControlled, onOpenChange, destroyPopup]);
+  const toggleFn = useCallback(() => {
+    if (isOpen) {
+      closeFn();
+    } else {
+      openFn();
+    }
+  }, [isOpen, openFn, closeFn]);
+  useEffect(() => {
+    if (!isControlled) return;
+    if (controlledOpen && !handleRef.current) {
+      createPopup();
+    } else if (!controlledOpen && handleRef.current) {
+      destroyPopup();
+    }
+  }, [controlledOpen, isControlled, createPopup, destroyPopup]);
+  useEffect(() => {
+    return () => {
+      if (handleRef.current) {
+        handleRef.current.destroy();
+        handleRef.current = null;
+      }
+    };
+  }, []);
+  return {
+    open: openFn,
+    close: closeFn,
+    toggle: toggleFn,
+    isOpen,
+    handle
+  };
 }
-function PopupButton({
-  researchId,
-  params,
-  brand,
-  theme,
-  host,
-  onReady,
-  onSubmit,
-  onNavigate,
-  onClose,
-  onError,
-  children,
-  open,
-  onOpenChange,
-  embedRef,
-  onClick,
-  ...buttonProps
-}) {
-  const handleRef = useRef(null);
+function useSlider(options) {
+  const {
+    researchId,
+    params,
+    brand,
+    theme,
+    host,
+    onReady,
+    onSubmit,
+    onNavigate,
+    onClose,
+    onError,
+    open: controlledOpen,
+    onOpenChange
+  } = options;
+  const [handle, setHandle] = useState(null);
   const [internalOpen, setInternalOpen] = useState(false);
-  const isControlled = open !== void 0;
-  const isOpen = isControlled ? open : internalOpen;
+  const handleRef = useRef(null);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
   const stableOnReady = useStableCallback(onReady);
   const stableOnSubmit = useStableCallback(onSubmit);
   const stableOnNavigate = useStableCallback(onNavigate);
@@ -124,13 +175,14 @@ function PopupButton({
   );
   const handleClose = useCallback(() => {
     handleRef.current = null;
+    setHandle(null);
     setOpen(false);
     onClose?.();
   }, [setOpen, onClose]);
   const stableOnClose = useStableCallback(handleClose);
-  const createPopup = useCallback(() => {
+  const createSlider = useCallback(() => {
     if (handleRef.current) return handleRef.current;
-    const handle = openPopup({
+    const newHandle = openSlider({
       researchId,
       params,
       brand,
@@ -142,8 +194,9 @@ function PopupButton({
       onClose: stableOnClose,
       onError: stableOnError
     });
-    handleRef.current = handle;
-    return handle;
+    handleRef.current = newHandle;
+    setHandle(newHandle);
+    return newHandle;
   }, [
     researchId,
     params,
@@ -156,129 +209,93 @@ function PopupButton({
     stableOnClose,
     stableOnError
   ]);
-  const proxyHandle = useMemo(
-    () => ({
-      open: () => {
-        createPopup();
-        setOpen(true);
-      },
-      close: () => {
-        handleRef.current?.destroy();
-        handleRef.current = null;
-        setOpen(false);
-      },
-      toggle: () => {
-        if (handleRef.current) {
-          handleRef.current.destroy();
-          handleRef.current = null;
-          setOpen(false);
-        } else {
-          createPopup();
-          setOpen(true);
-        }
-      },
-      unmount: () => {
-        handleRef.current?.unmount();
-        handleRef.current = null;
-        setOpen(false);
-      },
-      get isOpen() {
-        return isOpen;
-      },
-      researchId
-    }),
-    [createPopup, setOpen, researchId, isOpen]
-  );
-  useEffect(() => {
-    if (embedRef) {
-      embedRef.current = proxyHandle;
+  const destroySlider = useCallback(() => {
+    if (handleRef.current) {
+      handleRef.current.destroy();
+      handleRef.current = null;
+      setHandle(null);
     }
-    return () => {
-      if (embedRef) {
-        embedRef.current = null;
-      }
-    };
-  }, [embedRef, proxyHandle]);
+  }, []);
+  const openFn = useCallback(() => {
+    if (isControlled) {
+      onOpenChange?.(true);
+    } else {
+      createSlider();
+      setInternalOpen(true);
+    }
+  }, [isControlled, onOpenChange, createSlider]);
+  const closeFn = useCallback(() => {
+    if (isControlled) {
+      onOpenChange?.(false);
+    } else {
+      destroySlider();
+      setInternalOpen(false);
+    }
+  }, [isControlled, onOpenChange, destroySlider]);
+  const toggleFn = useCallback(() => {
+    if (isOpen) {
+      closeFn();
+    } else {
+      openFn();
+    }
+  }, [isOpen, openFn, closeFn]);
   useEffect(() => {
     if (!isControlled) return;
-    if (open && !handleRef.current) {
-      createPopup();
-    } else if (!open && handleRef.current) {
-      handleRef.current.destroy();
-      handleRef.current = null;
+    if (controlledOpen && !handleRef.current) {
+      createSlider();
+    } else if (!controlledOpen && handleRef.current) {
+      destroySlider();
     }
-  }, [open, isControlled, createPopup]);
-  const handleClick = useCallback(
-    (e) => {
-      onClick?.(e);
-      if (e.defaultPrevented) return;
-      if (isOpen && handleRef.current) {
+  }, [controlledOpen, isControlled, createSlider, destroySlider]);
+  useEffect(() => {
+    return () => {
+      if (handleRef.current) {
         handleRef.current.destroy();
         handleRef.current = null;
-        setOpen(false);
-      } else {
-        createPopup();
-        setOpen(true);
       }
-    },
-    [onClick, isOpen, createPopup, setOpen]
-  );
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick: handleClick,
-      "data-testid": "perspective-popup-button",
-      ...buttonProps,
-      children
-    }
-  );
+    };
+  }, []);
+  return {
+    open: openFn,
+    close: closeFn,
+    toggle: toggleFn,
+    isOpen,
+    handle
+  };
 }
-function SliderButton({
-  researchId,
-  params,
-  brand,
-  theme,
-  host,
-  onReady,
-  onSubmit,
-  onNavigate,
-  onClose,
-  onError,
-  children,
-  open,
-  onOpenChange,
-  embedRef,
-  onClick,
-  ...buttonProps
-}) {
-  const handleRef = useRef(null);
+function useFloatBubble(options) {
+  const {
+    researchId,
+    params,
+    brand,
+    theme,
+    host,
+    onReady,
+    onSubmit,
+    onNavigate,
+    onClose,
+    onError,
+    open: controlledOpen,
+    onOpenChange
+  } = options;
+  const [handle, setHandle] = useState(null);
   const [internalOpen, setInternalOpen] = useState(false);
-  const isControlled = open !== void 0;
-  const isOpen = isControlled ? open : internalOpen;
+  const handleRef = useRef(null);
+  const isControlled = controlledOpen !== void 0;
   const stableOnReady = useStableCallback(onReady);
   const stableOnSubmit = useStableCallback(onSubmit);
   const stableOnNavigate = useStableCallback(onNavigate);
   const stableOnError = useStableCallback(onError);
-  const setOpen = useCallback(
-    (value) => {
-      if (isControlled) {
-        onOpenChange?.(value);
-      } else {
-        setInternalOpen(value);
-      }
-    },
-    [isControlled, onOpenChange]
-  );
   const handleClose = useCallback(() => {
-    handleRef.current = null;
-    setOpen(false);
+    setInternalOpen(false);
+    if (isControlled) {
+      onOpenChange?.(false);
+    }
     onClose?.();
-  }, [setOpen, onClose]);
+  }, [isControlled, onOpenChange, onClose]);
   const stableOnClose = useStableCallback(handleClose);
-  const createSlider = useCallback(() => {
-    if (handleRef.current) return handleRef.current;
-    const handle = openSlider({
+  useEffect(() => {
+    const newHandle = createFloatBubble({
       researchId,
       params,
       brand,
@@ -290,8 +307,15 @@ function SliderButton({
       onClose: stableOnClose,
       onError: stableOnError
     });
-    handleRef.current = handle;
-    return handle;
+    handleRef.current = newHandle;
+    setHandle(newHandle);
+    return () => {
+      if (handleRef.current === newHandle) {
+        newHandle.unmount();
+        handleRef.current = null;
+        setHandle(null);
+      }
+    };
   }, [
     researchId,
     params,
@@ -304,85 +328,72 @@ function SliderButton({
     stableOnClose,
     stableOnError
   ]);
-  const proxyHandle = useMemo(
-    () => ({
-      open: () => {
-        createSlider();
-        setOpen(true);
-      },
-      close: () => {
-        handleRef.current?.destroy();
-        handleRef.current = null;
-        setOpen(false);
-      },
-      toggle: () => {
-        if (handleRef.current) {
-          handleRef.current.destroy();
-          handleRef.current = null;
-          setOpen(false);
-        } else {
-          createSlider();
-          setOpen(true);
-        }
-      },
-      unmount: () => {
-        handleRef.current?.unmount();
-        handleRef.current = null;
-        setOpen(false);
-      },
-      get isOpen() {
-        return isOpen;
-      },
-      researchId
-    }),
-    [createSlider, setOpen, researchId, isOpen]
-  );
   useEffect(() => {
-    if (embedRef) {
-      embedRef.current = proxyHandle;
+    if (!isControlled || !handle) return;
+    if (controlledOpen && !handle.isOpen) {
+      handle.open();
+    } else if (!controlledOpen && handle.isOpen) {
+      handle.close();
     }
-    return () => {
-      if (embedRef) {
-        embedRef.current = null;
-      }
-    };
-  }, [embedRef, proxyHandle]);
-  useEffect(() => {
-    if (!isControlled) return;
-    if (open && !handleRef.current) {
-      createSlider();
-    } else if (!open && handleRef.current) {
-      handleRef.current.destroy();
-      handleRef.current = null;
+  }, [controlledOpen, isControlled, handle]);
+  const openFn = useCallback(() => {
+    if (isControlled) {
+      onOpenChange?.(true);
+    } else {
+      handleRef.current?.open();
+      setInternalOpen(true);
     }
-  }, [open, isControlled, createSlider]);
-  const handleClick = useCallback(
-    (e) => {
-      onClick?.(e);
-      if (e.defaultPrevented) return;
-      if (isOpen && handleRef.current) {
-        handleRef.current.destroy();
-        handleRef.current = null;
-        setOpen(false);
-      } else {
-        createSlider();
-        setOpen(true);
-      }
-    },
-    [onClick, isOpen, createSlider, setOpen]
-  );
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick: handleClick,
-      "data-testid": "perspective-slider-button",
-      ...buttonProps,
-      children
+  }, [isControlled, onOpenChange]);
+  const closeFn = useCallback(() => {
+    if (isControlled) {
+      onOpenChange?.(false);
+    } else {
+      handleRef.current?.close();
+      setInternalOpen(false);
+    }
+  }, [isControlled, onOpenChange]);
+  const toggleFn = useCallback(() => {
+    const currentlyOpen = handleRef.current?.isOpen ?? internalOpen;
+    if (currentlyOpen) {
+      closeFn();
+    } else {
+      openFn();
     }
+  }, [internalOpen, openFn, closeFn]);
+  const unmountFn = useCallback(() => {
+    handleRef.current?.unmount();
+    handleRef.current = null;
+    setHandle(null);
+    setInternalOpen(false);
+  }, []);
+  const isOpen = isControlled ? controlledOpen : handle?.isOpen ?? internalOpen;
+  return {
+    open: openFn,
+    close: closeFn,
+    toggle: toggleFn,
+    unmount: unmountFn,
+    isOpen,
+    handle
+  };
+}
+function useThemeSync(theme = "system") {
+  const [resolved, setResolved] = useState(
+    theme !== "system" ? theme : "light"
   );
+  useEffect(() => {
+    if (theme !== "system") {
+      setResolved(theme);
+      return;
+    }
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    setResolved(mq.matches ? "dark" : "light");
+    const handler = (e) => setResolved(e.matches ? "dark" : "light");
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [theme]);
+  return resolved;
 }
-function FloatBubble({
+function Widget({
   researchId,
   params,
   brand,
@@ -393,8 +404,12 @@ function FloatBubble({
   onNavigate,
   onClose,
   onError,
-  embedRef
+  embedRef,
+  className,
+  style,
+  ...divProps
 }) {
+  const containerRef = useRef(null);
   const handleRef = useRef(null);
   const stableOnReady = useStableCallback(onReady);
   const stableOnSubmit = useStableCallback(onSubmit);
@@ -402,7 +417,9 @@ function FloatBubble({
   const stableOnClose = useStableCallback(onClose);
   const stableOnError = useStableCallback(onError);
   useEffect(() => {
-    const handle = createFloatBubble({
+    const container = containerRef.current;
+    if (!container) return;
+    const handle = createWidget(container, {
       researchId,
       params,
       brand,
@@ -438,7 +455,16 @@ function FloatBubble({
     stableOnError,
     embedRef
   ]);
-  return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: { minHeight: 500, ...style },
+      "data-testid": "perspective-widget",
+      ...divProps
+    }
+  );
 }
 function Fullpage({
   researchId,
@@ -498,24 +524,44 @@ function Fullpage({
   ]);
   return null;
 }
-function useThemeSync(theme = "system") {
-  const [resolved, setResolved] = useState(
-    theme !== "system" ? theme : "light"
-  );
+function FloatBubble({
+  researchId,
+  params,
+  brand,
+  theme,
+  host,
+  onReady,
+  onSubmit,
+  onNavigate,
+  onClose,
+  onError,
+  embedRef
+}) {
+  const { handle } = useFloatBubble({
+    researchId,
+    params,
+    brand,
+    theme,
+    host,
+    onReady,
+    onSubmit,
+    onNavigate,
+    onClose,
+    onError
+  });
   useEffect(() => {
-    if (theme !== "system") {
-      setResolved(theme);
-      return;
+    if (embedRef) {
+      embedRef.current = handle;
     }
-    const mq = window.matchMedia("(prefers-color-scheme: dark)");
-    setResolved(mq.matches ? "dark" : "light");
-    const handler = (e) => setResolved(e.matches ? "dark" : "light");
-    mq.addEventListener("change", handler);
-    return () => mq.removeEventListener("change", handler);
-  }, [theme]);
-  return resolved;
+    return () => {
+      if (embedRef) {
+        embedRef.current = null;
+      }
+    };
+  }, [embedRef, handle]);
+  return null;
 }
 
-export { FloatBubble, Fullpage, PopupButton, SliderButton, Widget, useStableCallback, useThemeSync };
+export { FloatBubble, Fullpage, Widget, useFloatBubble, usePopup, useSlider, useStableCallback, useThemeSync };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map