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

package/dist/index.cjs

@@ -15,33 +15,52 @@ function useStableCallback(callback) {
     []
   );
 }
-function Widget({
-  researchId,
-  params,
-  brand,
-  theme,
-  host,
-  onReady,
-  onSubmit,
-  onNavigate,
-  onClose,
-  onError,
-  embedRef,
-  className,
-  style,
-  ...divProps
-}) {
-  const containerRef = react.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] = react.useState(null);
+  const [internalOpen, setInternalOpen] = react.useState(false);
   const handleRef = react.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);
-  react.useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-    const handle = sdk.createWidget(container, {
+  const setOpen = react.useCallback(
+    (value) => {
+      if (isControlled) {
+        onOpenChange?.(value);
+      } else {
+        setInternalOpen(value);
+      }
+    },
+    [isControlled, onOpenChange]
+  );
+  const handleClose = react.useCallback(() => {
+    handleRef.current = null;
+    setHandle(null);
+    setOpen(false);
+    onClose?.();
+  }, [setOpen, onClose]);
+  const stableOnClose = useStableCallback(handleClose);
+  const createPopup = react.useCallback(() => {
+    if (handleRef.current) return handleRef.current;
+    const newHandle = sdk.openPopup({
       researchId,
       params,
       brand,
@@ -53,17 +72,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,
@@ -74,42 +85,82 @@ function Widget({
     stableOnSubmit,
     stableOnNavigate,
     stableOnClose,
-    stableOnError,
-    embedRef
+    stableOnError
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref: containerRef,
-      className,
-      style: { minHeight: 500, ...style },
-      "data-testid": "perspective-widget",
-      ...divProps
+  const destroyPopup = react.useCallback(() => {
+    if (handleRef.current) {
+      handleRef.current.destroy();
+      handleRef.current = null;
+      setHandle(null);
     }
-  );
+  }, []);
+  const openFn = react.useCallback(() => {
+    if (isControlled) {
+      onOpenChange?.(true);
+    } else {
+      createPopup();
+      setInternalOpen(true);
+    }
+  }, [isControlled, onOpenChange, createPopup]);
+  const closeFn = react.useCallback(() => {
+    if (isControlled) {
+      onOpenChange?.(false);
+    } else {
+      destroyPopup();
+      setInternalOpen(false);
+    }
+  }, [isControlled, onOpenChange, destroyPopup]);
+  const toggleFn = react.useCallback(() => {
+    if (isOpen) {
+      closeFn();
+    } else {
+      openFn();
+    }
+  }, [isOpen, openFn, closeFn]);
+  react.useEffect(() => {
+    if (!isControlled) return;
+    if (controlledOpen && !handleRef.current) {
+      createPopup();
+    } else if (!controlledOpen && handleRef.current) {
+      destroyPopup();
+    }
+  }, [controlledOpen, isControlled, createPopup, destroyPopup]);
+  react.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 = react.useRef(null);
+function useSlider(options) {
+  const {
+    researchId,
+    params,
+    brand,
+    theme,
+    host,
+    onReady,
+    onSubmit,
+    onNavigate,
+    onClose,
+    onError,
+    open: controlledOpen,
+    onOpenChange
+  } = options;
+  const [handle, setHandle] = react.useState(null);
   const [internalOpen, setInternalOpen] = react.useState(false);
-  const isControlled = open !== void 0;
-  const isOpen = isControlled ? open : internalOpen;
+  const handleRef = react.useRef(null);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
   const stableOnReady = useStableCallback(onReady);
   const stableOnSubmit = useStableCallback(onSubmit);
   const stableOnNavigate = useStableCallback(onNavigate);
@@ -126,13 +177,14 @@ function PopupButton({
   );
   const handleClose = react.useCallback(() => {
     handleRef.current = null;
+    setHandle(null);
     setOpen(false);
     onClose?.();
   }, [setOpen, onClose]);
   const stableOnClose = useStableCallback(handleClose);
-  const createPopup = react.useCallback(() => {
+  const createSlider = react.useCallback(() => {
     if (handleRef.current) return handleRef.current;
-    const handle = sdk.openPopup({
+    const newHandle = sdk.openSlider({
       researchId,
       params,
       brand,
@@ -144,8 +196,9 @@ function PopupButton({
       onClose: stableOnClose,
       onError: stableOnError
     });
-    handleRef.current = handle;
-    return handle;
+    handleRef.current = newHandle;
+    setHandle(newHandle);
+    return newHandle;
   }, [
     researchId,
     params,
@@ -158,129 +211,93 @@ function PopupButton({
     stableOnClose,
     stableOnError
   ]);
-  const proxyHandle = react.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]
-  );
-  react.useEffect(() => {
-    if (embedRef) {
-      embedRef.current = proxyHandle;
+  const destroySlider = react.useCallback(() => {
+    if (handleRef.current) {
+      handleRef.current.destroy();
+      handleRef.current = null;
+      setHandle(null);
     }
-    return () => {
-      if (embedRef) {
-        embedRef.current = null;
-      }
-    };
-  }, [embedRef, proxyHandle]);
+  }, []);
+  const openFn = react.useCallback(() => {
+    if (isControlled) {
+      onOpenChange?.(true);
+    } else {
+      createSlider();
+      setInternalOpen(true);
+    }
+  }, [isControlled, onOpenChange, createSlider]);
+  const closeFn = react.useCallback(() => {
+    if (isControlled) {
+      onOpenChange?.(false);
+    } else {
+      destroySlider();
+      setInternalOpen(false);
+    }
+  }, [isControlled, onOpenChange, destroySlider]);
+  const toggleFn = react.useCallback(() => {
+    if (isOpen) {
+      closeFn();
+    } else {
+      openFn();
+    }
+  }, [isOpen, openFn, closeFn]);
   react.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 = react.useCallback(
-    (e) => {
-      onClick?.(e);
-      if (e.defaultPrevented) return;
-      if (isOpen && handleRef.current) {
+  }, [controlledOpen, isControlled, createSlider, destroySlider]);
+  react.useEffect(() => {
+    return () => {
+      if (handleRef.current) {
         handleRef.current.destroy();
         handleRef.current = null;
-        setOpen(false);
-      } else {
-        createPopup();
-        setOpen(true);
       }
-    },
-    [onClick, isOpen, createPopup, setOpen]
-  );
-  return /* @__PURE__ */ jsxRuntime.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 = react.useRef(null);
+function useFloatBubble(options) {
+  const {
+    researchId,
+    params,
+    brand,
+    theme,
+    host,
+    onReady,
+    onSubmit,
+    onNavigate,
+    onClose,
+    onError,
+    open: controlledOpen,
+    onOpenChange
+  } = options;
+  const [handle, setHandle] = react.useState(null);
   const [internalOpen, setInternalOpen] = react.useState(false);
-  const isControlled = open !== void 0;
-  const isOpen = isControlled ? open : internalOpen;
+  const handleRef = react.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 = react.useCallback(
-    (value) => {
-      if (isControlled) {
-        onOpenChange?.(value);
-      } else {
-        setInternalOpen(value);
-      }
-    },
-    [isControlled, onOpenChange]
-  );
   const handleClose = react.useCallback(() => {
-    handleRef.current = null;
-    setOpen(false);
+    setInternalOpen(false);
+    if (isControlled) {
+      onOpenChange?.(false);
+    }
     onClose?.();
-  }, [setOpen, onClose]);
+  }, [isControlled, onOpenChange, onClose]);
   const stableOnClose = useStableCallback(handleClose);
-  const createSlider = react.useCallback(() => {
-    if (handleRef.current) return handleRef.current;
-    const handle = sdk.openSlider({
+  react.useEffect(() => {
+    const newHandle = sdk.createFloatBubble({
       researchId,
       params,
       brand,
@@ -292,8 +309,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,
@@ -306,85 +330,72 @@ function SliderButton({
     stableOnClose,
     stableOnError
   ]);
-  const proxyHandle = react.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]
-  );
   react.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]);
-  react.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 = react.useCallback(() => {
+    if (isControlled) {
+      onOpenChange?.(true);
+    } else {
+      handleRef.current?.open();
+      setInternalOpen(true);
     }
-  }, [open, isControlled, createSlider]);
-  const handleClick = react.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__ */ jsxRuntime.jsx(
-    "button",
-    {
-      type: "button",
-      onClick: handleClick,
-      "data-testid": "perspective-slider-button",
-      ...buttonProps,
-      children
+  }, [isControlled, onOpenChange]);
+  const closeFn = react.useCallback(() => {
+    if (isControlled) {
+      onOpenChange?.(false);
+    } else {
+      handleRef.current?.close();
+      setInternalOpen(false);
+    }
+  }, [isControlled, onOpenChange]);
+  const toggleFn = react.useCallback(() => {
+    const currentlyOpen = handleRef.current?.isOpen ?? internalOpen;
+    if (currentlyOpen) {
+      closeFn();
+    } else {
+      openFn();
     }
+  }, [internalOpen, openFn, closeFn]);
+  const unmountFn = react.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] = react.useState(
+    theme !== "system" ? theme : "light"
   );
+  react.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,
@@ -395,8 +406,12 @@ function FloatBubble({
   onNavigate,
   onClose,
   onError,
-  embedRef
+  embedRef,
+  className,
+  style,
+  ...divProps
 }) {
+  const containerRef = react.useRef(null);
   const handleRef = react.useRef(null);
   const stableOnReady = useStableCallback(onReady);
   const stableOnSubmit = useStableCallback(onSubmit);
@@ -404,7 +419,9 @@ function FloatBubble({
   const stableOnClose = useStableCallback(onClose);
   const stableOnError = useStableCallback(onError);
   react.useEffect(() => {
-    const handle = sdk.createFloatBubble({
+    const container = containerRef.current;
+    if (!container) return;
+    const handle = sdk.createWidget(container, {
       researchId,
       params,
       brand,
@@ -440,7 +457,16 @@ function FloatBubble({
     stableOnError,
     embedRef
   ]);
-  return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: { minHeight: 500, ...style },
+      "data-testid": "perspective-widget",
+      ...divProps
+    }
+  );
 }
 function Fullpage({
   researchId,
@@ -500,29 +526,50 @@ function Fullpage({
   ]);
   return null;
 }
-function useThemeSync(theme = "system") {
-  const [resolved, setResolved] = react.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
+  });
   react.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;
 }
 
 exports.FloatBubble = FloatBubble;
 exports.Fullpage = Fullpage;
-exports.PopupButton = PopupButton;
-exports.SliderButton = SliderButton;
 exports.Widget = Widget;
+exports.useFloatBubble = useFloatBubble;
+exports.usePopup = usePopup;
+exports.useSlider = useSlider;
 exports.useStableCallback = useStableCallback;
 exports.useThemeSync = useThemeSync;
 //# sourceMappingURL=index.cjs.map