@prosopo/procaptcha-react 2.9.96 → 2.9.97

package/dist/cjs/components/ProcaptchaWidget.cjs

@@ -1,164 +1,146 @@
-"use strict";
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const locale = require("@prosopo/locale");
-const procaptcha = require("@prosopo/procaptcha");
-const procaptchaCommon = require("@prosopo/procaptcha-common");
-const types = require("@prosopo/types");
-const widgetSkeleton = require("@prosopo/widget-skeleton");
-const React = require("react");
-const CaptchaComponent = require("./CaptchaComponent.cjs");
-const Modal = require("./Modal.cjs");
-const PROCAPTCHA_EXECUTE_EVENT = "procaptcha:execute";
-const ProcaptchaWidget = (props) => {
-  const { t, ready: isTranslationReady } = locale.useTranslation();
-  const config = types.ProcaptchaConfigSchema.parse(props.config);
-  const frictionlessState = props.frictionlessState;
-  const i18n = props.i18n;
-  const callbacks = props.callbacks || {};
-  const [state, updateState] = procaptchaCommon.useProcaptcha(React.useState, React.useRef);
-  const [loading, setLoading] = React.useState(false);
-  const hpRef = React.useRef(null);
-  const manager = React.useRef(
-    procaptcha.Manager(
-      config,
-      state,
-      updateState,
-      callbacks,
-      frictionlessState,
-      () => hpRef.current?.value || void 0
-    )
-  );
-  const lastCoordsRef = React.useRef(null);
-  const sessionInvalidatedFiredRef = React.useRef(false);
-  const theme = "light" === props.config.theme ? widgetSkeleton.lightTheme : widgetSkeleton.darkTheme;
-  React.useEffect(() => {
-    if (!config.language) return;
-    if (i18n) {
-      if (i18n.language !== config.language) {
-        void i18n.changeLanguage(config.language);
-      }
-      return;
-    }
-    void locale.loadI18next(false, config.language);
-  }, [i18n, config.language]);
-  React.useEffect(() => {
-    if (!props.autoStart) return;
-    setLoading(true);
-    const coords = props.startCoords;
-    lastCoordsRef.current = coords ?? null;
-    manager.current.start(coords?.x ?? 0, coords?.y ?? 0).then(
-      () => setLoading(false),
-      () => setLoading(false)
-    );
-  }, [props.autoStart, props.startCoords]);
-  React.useEffect(() => {
-    if (!state.error) return;
-    setLoading(false);
-    if (state.error.key !== "CAPTCHA.NO_SESSION_FOUND") return;
-    if (props.onSessionInvalidated && !sessionInvalidatedFiredRef.current) {
-      sessionInvalidatedFiredRef.current = true;
-      const coords = lastCoordsRef.current;
-      props.onSessionInvalidated(coords?.x, coords?.y);
-      return;
-    }
-    if (frictionlessState) {
-      setTimeout(() => {
-        frictionlessState.restart();
-      }, 100);
-    }
-  }, [state.error, frictionlessState, props.onSessionInvalidated]);
-  React.useEffect(() => {
-    const handleExecuteEvent = (event) => {
-      updateState({
-        showModal: true
-      });
-      if (!state.challenge && manager.current.start) {
-        console.log("No challenge set, attempting to start verification");
-        try {
-          manager.current.start();
-        } catch (error) {
-          console.error("Error starting verification:", error);
-        }
-      }
-    };
-    document.addEventListener(PROCAPTCHA_EXECUTE_EVENT, handleExecuteEvent);
-    return () => {
-      document.removeEventListener(
-        PROCAPTCHA_EXECUTE_EVENT,
-        handleExecuteEvent
-      );
-    };
-  }, [state.challenge, updateState]);
-  const honeypot = frictionlessState?.hp ? /* @__PURE__ */ jsxRuntime.jsx(procaptchaCommon.Honeypot, { ref: hpRef, encodedQuestion: frictionlessState.hp }) : null;
-  if (config.mode === "invisible") {
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      honeypot,
-      /* @__PURE__ */ jsxRuntime.jsx(Modal, { show: state.showModal, children: state.challenge ? /* @__PURE__ */ jsxRuntime.jsx(
-        CaptchaComponent,
-        {
-          challenge: state.challenge,
-          index: state.index,
-          solutions: state.solutions,
-          onSubmit: manager.current.submit,
-          onCancel: manager.current.cancel,
-          onClick: manager.current.select,
-          onNext: manager.current.nextRound,
-          onReload: manager.current.reload,
-          themeColor: config.theme ?? "light"
-        }
-      ) : null })
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "image-captcha", children: [
-    honeypot,
-    /* @__PURE__ */ jsxRuntime.jsx(Modal, { show: state.showModal, children: state.challenge ? /* @__PURE__ */ jsxRuntime.jsx(
-      CaptchaComponent,
-      {
-        challenge: state.challenge,
-        index: state.index,
-        solutions: state.solutions,
-        onSubmit: manager.current.submit,
-        onCancel: manager.current.cancel,
-        onClick: manager.current.select,
-        onNext: manager.current.nextRound,
-        onReload: manager.current.reload,
-        themeColor: config.theme ?? "light"
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: "No challenge set." }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(procaptchaCommon.TestModeBanner, { siteKey: config.account.address ?? "" }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      procaptchaCommon.Checkbox,
-      {
-        theme,
-        onChange: async (event) => {
-          if (!event.isTrusted) {
-            return;
-          }
-          if (loading) {
-            return;
-          }
-          setLoading(true);
-          let x = 0;
-          let y = 0;
-          const nativeEvent = event.nativeEvent;
-          if ("touches" in nativeEvent && nativeEvent.touches.length > 0 && nativeEvent.touches[0]) {
-            x = nativeEvent.touches[0].clientX;
-            y = nativeEvent.touches[0].clientY;
-          } else if ("clientX" in nativeEvent && "clientY" in nativeEvent) {
-            x = nativeEvent.clientX;
-            y = nativeEvent.clientY;
-          }
-          lastCoordsRef.current = { x, y };
-          await manager.current.start(x, y);
-          setLoading(false);
-        },
-        checked: state.isHuman,
-        labelText: isTranslationReady ? t("WIDGET.I_AM_HUMAN") : "",
-        error: state.error?.message,
-        "aria-label": "human checkbox",
-        loading
-      }
-    )
-  ] });
+const require_CaptchaComponent = require("./CaptchaComponent.cjs");
+const require_Modal = require("./Modal.cjs");
+let _prosopo_widget_skeleton = require("@prosopo/widget-skeleton");
+let react = require("react");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+let _prosopo_locale = require("@prosopo/locale");
+let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
+let _prosopo_procaptcha = require("@prosopo/procaptcha");
+let _prosopo_types = require("@prosopo/types");
+//#region src/components/ProcaptchaWidget.tsx
+/** @jsxImportSource @emotion/react */
+var PROCAPTCHA_EXECUTE_EVENT = "procaptcha:execute";
+var ProcaptchaWidget = (props) => {
+	const { t, ready: isTranslationReady } = (0, _prosopo_locale.useTranslation)();
+	const config = _prosopo_types.ProcaptchaConfigSchema.parse(props.config);
+	const frictionlessState = props.frictionlessState;
+	const i18n = props.i18n;
+	const callbacks = props.callbacks || {};
+	const [state, updateState] = (0, _prosopo_procaptcha_common.useProcaptcha)(react.useState, react.useRef);
+	const [loading, setLoading] = (0, react.useState)(false);
+	const hpRef = (0, react.useRef)(null);
+	const manager = (0, react.useRef)((0, _prosopo_procaptcha.Manager)(config, state, updateState, callbacks, frictionlessState, () => hpRef.current?.value || void 0));
+	const lastCoordsRef = (0, react.useRef)(null);
+	const sessionInvalidatedFiredRef = (0, react.useRef)(false);
+	const theme = "light" === props.config.theme ? _prosopo_widget_skeleton.lightTheme : _prosopo_widget_skeleton.darkTheme;
+	(0, react.useEffect)(() => {
+		if (!config.language) return;
+		if (i18n) {
+			if (i18n.language !== config.language) i18n.changeLanguage(config.language);
+			return;
+		}
+		(0, _prosopo_locale.loadI18next)(false, config.language);
+	}, [i18n, config.language]);
+	(0, react.useEffect)(() => {
+		if (!props.autoStart) return;
+		setLoading(true);
+		const coords = props.startCoords;
+		lastCoordsRef.current = coords ?? null;
+		manager.current.start(coords?.x ?? 0, coords?.y ?? 0).then(() => setLoading(false), () => setLoading(false));
+	}, [props.autoStart, props.startCoords]);
+	(0, react.useEffect)(() => {
+		if (!state.error) return;
+		setLoading(false);
+		if (state.error.key !== "CAPTCHA.NO_SESSION_FOUND") return;
+		if (props.onSessionInvalidated && !sessionInvalidatedFiredRef.current) {
+			sessionInvalidatedFiredRef.current = true;
+			const coords = lastCoordsRef.current;
+			props.onSessionInvalidated(coords?.x, coords?.y);
+			return;
+		}
+		if (frictionlessState) setTimeout(() => {
+			frictionlessState.restart();
+		}, 100);
+	}, [
+		state.error,
+		frictionlessState,
+		props.onSessionInvalidated
+	]);
+	(0, react.useEffect)(() => {
+		const handleExecuteEvent = (event) => {
+			updateState({ showModal: true });
+			if (!state.challenge && manager.current.start) {
+				console.log("No challenge set, attempting to start verification");
+				try {
+					manager.current.start();
+				} catch (error) {
+					console.error("Error starting verification:", error);
+				}
+			}
+		};
+		document.addEventListener(PROCAPTCHA_EXECUTE_EVENT, handleExecuteEvent);
+		return () => {
+			document.removeEventListener(PROCAPTCHA_EXECUTE_EVENT, handleExecuteEvent);
+		};
+	}, [state.challenge, updateState]);
+	const honeypot = frictionlessState?.hp ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(_prosopo_procaptcha_common.Honeypot, {
+		ref: hpRef,
+		encodedQuestion: frictionlessState.hp
+	}) : null;
+	if (config.mode === "invisible") return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [honeypot, /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Modal.default, {
+		show: state.showModal,
+		children: state.challenge ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_CaptchaComponent.default, {
+			challenge: state.challenge,
+			index: state.index,
+			solutions: state.solutions,
+			onSubmit: manager.current.submit,
+			onCancel: manager.current.cancel,
+			onClick: manager.current.select,
+			onNext: manager.current.nextRound,
+			onReload: manager.current.reload,
+			themeColor: config.theme ?? "light"
+		}) : null
+	})] });
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+		className: "image-captcha",
+		children: [
+			honeypot,
+			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Modal.default, {
+				show: state.showModal,
+				children: state.challenge ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_CaptchaComponent.default, {
+					challenge: state.challenge,
+					index: state.index,
+					solutions: state.solutions,
+					onSubmit: manager.current.submit,
+					onCancel: manager.current.cancel,
+					onClick: manager.current.select,
+					onNext: manager.current.nextRound,
+					onReload: manager.current.reload,
+					themeColor: config.theme ?? "light"
+				}) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { children: "No challenge set." })
+			}),
+			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(_prosopo_procaptcha_common.TestModeBanner, { siteKey: config.account.address ?? "" }),
+			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(_prosopo_procaptcha_common.Checkbox, {
+				theme,
+				onChange: async (event) => {
+					if (!event.isTrusted) return;
+					if (loading) return;
+					setLoading(true);
+					let x = 0;
+					let y = 0;
+					const nativeEvent = event.nativeEvent;
+					if ("touches" in nativeEvent && nativeEvent.touches.length > 0 && nativeEvent.touches[0]) {
+						x = nativeEvent.touches[0].clientX;
+						y = nativeEvent.touches[0].clientY;
+					} else if ("clientX" in nativeEvent && "clientY" in nativeEvent) {
+						x = nativeEvent.clientX;
+						y = nativeEvent.clientY;
+					}
+					lastCoordsRef.current = {
+						x,
+						y
+					};
+					await manager.current.start(x, y);
+					setLoading(false);
+				},
+				checked: state.isHuman,
+				labelText: isTranslationReady ? t("WIDGET.I_AM_HUMAN") : "",
+				error: state.error?.message,
+				"aria-label": "human checkbox",
+				loading
+			})
+		]
+	});
 };
-module.exports = ProcaptchaWidget;
+//#endregion
+exports.default = ProcaptchaWidget;

package/dist/cjs/components/index.cjs

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const CaptchaWidget = require("./CaptchaWidget.cjs");
-require("./CaptchaComponent.cjs");
-const ProcaptchaWidget = require("./ProcaptchaWidget.cjs");
-const Procaptcha = require("./Procaptcha.cjs");
-exports.CaptchaWidget = CaptchaWidget.CaptchaWidget;
-exports.ProcaptchaWidget = ProcaptchaWidget;
-exports.Procaptcha = Procaptcha;
+const require_CaptchaWidget = require("./CaptchaWidget.cjs");
+const require_ProcaptchaWidget = require("./ProcaptchaWidget.cjs");
+const require_Procaptcha = require("./Procaptcha.cjs");
+exports.CaptchaWidget = require_CaptchaWidget.CaptchaWidget;
+exports.Procaptcha = require_Procaptcha.default;
+exports.ProcaptchaWidget = require_ProcaptchaWidget.default;

package/dist/cjs/index.cjs

@@ -1,10 +1,7 @@
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("./components/index.cjs");
-require("./util/index.cjs");
-const ProcaptchaWidget = require("./components/ProcaptchaWidget.cjs");
-const Procaptcha = require("./components/Procaptcha.cjs");
-const CaptchaWidget = require("./components/CaptchaWidget.cjs");
-exports.ProcaptchaWidget = ProcaptchaWidget;
-exports.Procaptcha = Procaptcha;
-exports.CaptchaWidget = CaptchaWidget.CaptchaWidget;
+const require_CaptchaWidget = require("./components/CaptchaWidget.cjs");
+const require_ProcaptchaWidget = require("./components/ProcaptchaWidget.cjs");
+const require_Procaptcha = require("./components/Procaptcha.cjs");
+exports.CaptchaWidget = require_CaptchaWidget.CaptchaWidget;
+exports.Procaptcha = require_Procaptcha.default;
+exports.ProcaptchaWidget = require_ProcaptchaWidget.default;

package/dist/cjs/util/index.cjs

@@ -1,18 +1,20 @@
-"use strict";
+//#region src/util/index.ts
 function renameKeysForDataAttr(data = {}) {
-  return Object.keys(data).reduce(
-    // biome-ignore lint/performance/noAccumulatingSpread: TODO fix
-    (prev, curr) => ({ ...prev, [`data-${curr}`]: data[curr] }),
-    {}
-  );
+	return Object.keys(data).reduce((prev, curr) => ({
+		...prev,
+		[`data-${curr}`]: data[curr]
+	}), {});
 }
-function addDataAttr({
-  general,
-  dev
-}) {
-  return {
-    ...renameKeysForDataAttr(general),
-    ...process.env.NODE_ENV !== "production" ? renameKeysForDataAttr(dev) : {}
-  };
+/**
+* maps any data to data attributes (mapped to { data-[key]: value })
+*
+* dev - only in development mode
+*/
+function addDataAttr({ general, dev }) {
+	return {
+		...renameKeysForDataAttr(general),
+		...process.env.NODE_ENV !== "production" ? renameKeysForDataAttr(dev) : {}
+	};
 }
-module.exports = addDataAttr;
+//#endregion
+exports.default = addDataAttr;

package/dist/components/Button.js

@@ -1,81 +1,70 @@
-import { jsx } from "@emotion/react/jsx-runtime";
-import { lightTheme, darkTheme } from "@prosopo/widget-skeleton";
-import { useMemo, useState } from "react";
 import addDataAttr from "../util/index.js";
-const buttonStyleBase = {
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  position: "relative",
-  boxSizing: "border-box",
-  outline: "0px",
-  margin: "0px",
-  cursor: "pointer",
-  userSelect: "none",
-  verticalAlign: "middle",
-  appearance: void 0,
-  textDecoration: "none",
-  fontWeight: "500",
-  fontSize: "0.875rem",
-  lineHeight: "1.75",
-  letterSpacing: "0.02857em",
-  textTransform: "uppercase",
-  minWidth: "64px",
-  padding: "6px 16px",
-  borderRadius: "4px",
-  transition: "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-  backgroundColor: "#ffffff"
-};
-const Button = ({
-  themeColor,
-  buttonType,
-  text,
-  onClick
-}) => {
-  const theme = useMemo(
-    () => themeColor === "light" ? lightTheme : darkTheme,
-    [themeColor]
-  );
-  const [hover, setHover] = useState(false);
-  const buttonStyle = useMemo(() => {
-    const baseStyle = {
-      ...buttonStyleBase,
-      border: `1px solid ${theme.palette.grey[500]}`,
-      boxShadow: `0px 1px 3px 0px ${theme.palette.grey[500]}`,
-      fontFamily: theme.font.fontFamily,
-      width: "100%",
-      color: hover ? theme.palette.primary.contrastText : theme.palette.background.contrastText
-    };
-    if (buttonType === "cancel") {
-      return {
-        ...baseStyle,
-        backgroundColor: hover ? theme.palette.grey[600] : "transparent"
-      };
-    }
-    return {
-      ...baseStyle,
-      backgroundColor: hover ? theme.palette.primary.main : theme.palette.background.default
-    };
-  }, [buttonType, hover, theme]);
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ...addDataAttr({ dev: { cy: `button-${buttonType}` } }),
-      onMouseEnter: () => setHover(true),
-      onMouseLeave: () => setHover(false),
-      style: buttonStyle,
-      onClick: (e) => {
-        if (!e.isTrusted) {
-          return;
-        }
-        e.preventDefault();
-        onClick();
-      },
-      "aria-label": text,
-      children: text
-    }
-  );
+import { darkTheme, lightTheme } from "@prosopo/widget-skeleton";
+import { useMemo, useState } from "react";
+import { jsx } from "@emotion/react/jsx-runtime";
+//#region src/components/Button.tsx
+var buttonStyleBase = {
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	position: "relative",
+	boxSizing: "border-box",
+	outline: "0px",
+	margin: "0px",
+	cursor: "pointer",
+	userSelect: "none",
+	verticalAlign: "middle",
+	appearance: void 0,
+	textDecoration: "none",
+	fontWeight: "500",
+	fontSize: "0.875rem",
+	lineHeight: "1.75",
+	letterSpacing: "0.02857em",
+	textTransform: "uppercase",
+	minWidth: "64px",
+	padding: "6px 16px",
+	borderRadius: "4px",
+	transition: "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+	backgroundColor: "#ffffff"
 };
-export {
-  Button as default
+var Button = ({ themeColor, buttonType, text, onClick }) => {
+	const theme = useMemo(() => themeColor === "light" ? lightTheme : darkTheme, [themeColor]);
+	const [hover, setHover] = useState(false);
+	const buttonStyle = useMemo(() => {
+		const baseStyle = {
+			...buttonStyleBase,
+			border: `1px solid ${theme.palette.grey[500]}`,
+			boxShadow: `0px 1px 3px 0px ${theme.palette.grey[500]}`,
+			fontFamily: theme.font.fontFamily,
+			width: "100%",
+			color: hover ? theme.palette.primary.contrastText : theme.palette.background.contrastText
+		};
+		if (buttonType === "cancel") return {
+			...baseStyle,
+			backgroundColor: hover ? theme.palette.grey[600] : "transparent"
+		};
+		return {
+			...baseStyle,
+			backgroundColor: hover ? theme.palette.primary.main : theme.palette.background.default
+		};
+	}, [
+		buttonType,
+		hover,
+		theme
+	]);
+	return /* @__PURE__ */ jsx("button", {
+		...addDataAttr({ dev: { cy: `button-${buttonType}` } }),
+		onMouseEnter: () => setHover(true),
+		onMouseLeave: () => setHover(false),
+		style: buttonStyle,
+		onClick: (e) => {
+			if (!e.isTrusted) return;
+			e.preventDefault();
+			onClick();
+		},
+		"aria-label": text,
+		children: text
+	});
 };
+//#endregion
+export { Button as default };