@prosopo/procaptcha-react 2.9.95 → 2.9.97

package/dist/components/CaptchaComponent.js

@@ -1,230 +1,166 @@
+import { CaptchaWidget } from "./CaptchaWidget.js";
+import addDataAttr from "../util/index.js";
+import Button from "./Button.js";
+import { darkTheme, lightTheme } from "@prosopo/widget-skeleton";
+import { Suspense, useMemo } from "react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useTranslation } from "@prosopo/locale";
 import { ReloadButton } from "@prosopo/procaptcha-common";
 import { at } from "@prosopo/util";
-import { lightTheme, darkTheme } from "@prosopo/widget-skeleton";
-import { useMemo, Suspense } from "react";
-import addDataAttr from "../util/index.js";
-import Button from "./Button.js";
-import { CaptchaWidget } from "./CaptchaWidget.js";
-const CaptchaComponent = ({
-  challenge,
-  index,
-  solutions,
-  onSubmit,
-  onCancel,
-  onClick,
-  onNext,
-  onReload,
-  themeColor
-}) => {
-  const { t } = useTranslation();
-  const captcha = challenge.captchas ? at(challenge.captchas, index) : null;
-  const solution = solutions ? at(solutions, index) : [];
-  const theme = useMemo(
-    () => themeColor === "light" ? lightTheme : darkTheme,
-    [themeColor]
-  );
-  const doubleSpacing = `${theme.spacing.unit * 2}px`;
-  const fullSpacing = `${theme.spacing.unit}px`;
-  const halfSpacing = `${theme.spacing.half}px`;
-  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        // introduce scroll bars when screen < minWidth of children
-        overflowX: "auto",
-        overflowY: "auto",
-        maxWidth: "500px",
-        maxHeight: "100%",
-        display: "flex",
-        flexDirection: "column",
-        border: "1px solid #dddddd",
-        boxShadow: "rgba(255, 255, 255, 0.2) 0px 0px 4px",
-        borderRadius: "4px",
-        backgroundColor: theme.palette.background.default,
-        userSelect: "none",
-        touchAction: "none",
-        overscrollBehavior: "none"
-      },
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            backgroundColor: theme.palette.background.default,
-            display: "flex",
-            flexDirection: "column",
-            minWidth: "300px",
-            marginLeft: fullSpacing,
-            marginRight: fullSpacing,
-            justifyContent: "center"
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  width: "100%"
-                },
-                children: /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      backgroundColor: theme.palette.primary.main,
-                      width: "100%",
-                      marginTop: fullSpacing
-                    },
-                    children: /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        style: {
-                          padding: `${theme.spacing.half}px`,
-                          fontFamily: theme.font.fontFamily
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxs(
-                            "p",
-                            {
-                              style: {
-                                color: "#ffffff",
-                                fontWeight: 700,
-                                lineHeight: 1.5
-                              },
-                              children: [
-                                t("WIDGET.SELECT_ALL"),
-                                ":",
-                                " ",
-                                /* @__PURE__ */ jsx("span", { children: `${at(challenge.captchas, index).target} ` })
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            "p",
-                            {
-                              style: {
-                                color: "#ffffff",
-                                fontWeight: 500,
-                                lineHeight: 0.8,
-                                fontSize: "0.8rem"
-                              },
-                              children: t("WIDGET.IF_NONE_CLICK_NEXT")
-                            }
-                          )
-                        ]
-                      }
-                    )
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                ...addDataAttr({ dev: { cy: `captcha-${index}` } }),
-                style: { overflow: "hidden" },
-                children: captcha && /* @__PURE__ */ jsx(
-                  CaptchaWidget,
-                  {
-                    challenge: captcha,
-                    solution,
-                    onClick,
-                    themeColor
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  lineHeight: 1.75,
-                  padding: `${fullSpacing} 0 ${doubleSpacing} 0`
-                },
-                children: /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      // expand to full height / width of parent
-                      width: "100%",
-                      height: "100%",
-                      // display children in flex, spreading them evenly
-                      display: "flex",
-                      flexDirection: "row",
-                      justifyContent: "space-between",
-                      gap: "10px"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          style: {
-                            position: "relative",
-                            flexGrow: 1,
-                            // make the width of each item 1/3rd of the width overall, i.e. 3 columns
-                            flexBasis: "calc(33.333% - 10px)"
-                          },
-                          children: /* @__PURE__ */ jsx(
-                            Button,
-                            {
-                              themeColor,
-                              buttonType: "cancel",
-                              onClick: onCancel,
-                              text: t("WIDGET.CANCEL"),
-                              "aria-label": t("WIDGET.CANCEL")
-                            }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          style: {
-                            position: "relative",
-                            flexGrow: 1,
-                            // make the width of each item 1/3rd of the width overall, i.e. 3 columns
-                            flexBasis: "calc(33.333% - 10px)"
-                          },
-                          children: /* @__PURE__ */ jsx(ReloadButton, { themeColor, onReload })
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          style: {
-                            position: "relative",
-                            flexGrow: 1,
-                            // make the width of each item 1/3rd of the width overall, i.e. 3 columns
-                            flexBasis: "calc(33.333% - 10px)"
-                          },
-                          children: /* @__PURE__ */ jsx(
-                            Button,
-                            {
-                              themeColor,
-                              buttonType: "next",
-                              text: index < challenge.captchas.length - 1 ? t("WIDGET.NEXT") : t("WIDGET.SUBMIT"),
-                              onClick: index < challenge.captchas.length - 1 ? onNext : onSubmit,
-                              "aria-label": index < challenge.captchas.length - 1 ? t("WIDGET.NEXT") : t("WIDGET.SUBMIT"),
-                              "data-cy": "button-next"
-                            }
-                          )
-                        }
-                      )
-                    ]
-                  }
-                )
-              }
-            )
-          ]
-        }
-      )
-    }
-  ) });
-};
-export {
-  CaptchaComponent as default
+//#region src/components/CaptchaComponent.tsx
+var CaptchaComponent = ({ challenge, index, solutions, onSubmit, onCancel, onClick, onNext, onReload, themeColor }) => {
+	const { t } = useTranslation();
+	const captcha = challenge.captchas ? at(challenge.captchas, index) : null;
+	const solution = solutions ? at(solutions, index) : [];
+	const theme = useMemo(() => themeColor === "light" ? lightTheme : darkTheme, [themeColor]);
+	const doubleSpacing = `${theme.spacing.unit * 2}px`;
+	const fullSpacing = `${theme.spacing.unit}px`;
+	`${theme.spacing.half}`;
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }),
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				overflowX: "auto",
+				overflowY: "auto",
+				maxWidth: "500px",
+				maxHeight: "100%",
+				display: "flex",
+				flexDirection: "column",
+				border: "1px solid #dddddd",
+				boxShadow: "rgba(255, 255, 255, 0.2) 0px 0px 4px",
+				borderRadius: "4px",
+				backgroundColor: theme.palette.background.default,
+				userSelect: "none",
+				touchAction: "none",
+				overscrollBehavior: "none"
+			},
+			children: /* @__PURE__ */ jsxs("div", {
+				style: {
+					backgroundColor: theme.palette.background.default,
+					display: "flex",
+					flexDirection: "column",
+					minWidth: "300px",
+					marginLeft: fullSpacing,
+					marginRight: fullSpacing,
+					justifyContent: "center"
+				},
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							width: "100%"
+						},
+						children: /* @__PURE__ */ jsx("div", {
+							style: {
+								backgroundColor: theme.palette.primary.main,
+								width: "100%",
+								marginTop: fullSpacing
+							},
+							children: /* @__PURE__ */ jsxs("div", {
+								style: {
+									padding: `${theme.spacing.half}px`,
+									fontFamily: theme.font.fontFamily
+								},
+								children: [/* @__PURE__ */ jsxs("p", {
+									style: {
+										color: "#ffffff",
+										fontWeight: 700,
+										lineHeight: 1.5
+									},
+									children: [
+										t("WIDGET.SELECT_ALL"),
+										":",
+										"\xA0",
+										/* @__PURE__ */ jsx("span", { children: `${at(challenge.captchas, index).target} ` })
+									]
+								}), /* @__PURE__ */ jsx("p", {
+									style: {
+										color: "#ffffff",
+										fontWeight: 500,
+										lineHeight: .8,
+										fontSize: "0.8rem"
+									},
+									children: t("WIDGET.IF_NONE_CLICK_NEXT")
+								})]
+							})
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						...addDataAttr({ dev: { cy: `captcha-${index}` } }),
+						style: { overflow: "hidden" },
+						children: captcha && /* @__PURE__ */ jsx(CaptchaWidget, {
+							challenge: captcha,
+							solution,
+							onClick,
+							themeColor
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "space-between",
+							lineHeight: 1.75,
+							padding: `${fullSpacing} 0 ${doubleSpacing} 0`
+						},
+						children: /* @__PURE__ */ jsxs("div", {
+							style: {
+								width: "100%",
+								height: "100%",
+								display: "flex",
+								flexDirection: "row",
+								justifyContent: "space-between",
+								gap: "10px"
+							},
+							children: [
+								/* @__PURE__ */ jsx("div", {
+									style: {
+										position: "relative",
+										flexGrow: 1,
+										flexBasis: "calc(33.333% - 10px)"
+									},
+									children: /* @__PURE__ */ jsx(Button, {
+										themeColor,
+										buttonType: "cancel",
+										onClick: onCancel,
+										text: t("WIDGET.CANCEL"),
+										"aria-label": t("WIDGET.CANCEL")
+									})
+								}),
+								/* @__PURE__ */ jsx("div", {
+									style: {
+										position: "relative",
+										flexGrow: 1,
+										flexBasis: "calc(33.333% - 10px)"
+									},
+									children: /* @__PURE__ */ jsx(ReloadButton, {
+										themeColor,
+										onReload
+									})
+								}),
+								/* @__PURE__ */ jsx("div", {
+									style: {
+										position: "relative",
+										flexGrow: 1,
+										flexBasis: "calc(33.333% - 10px)"
+									},
+									children: /* @__PURE__ */ jsx(Button, {
+										themeColor,
+										buttonType: "next",
+										text: index < challenge.captchas.length - 1 ? t("WIDGET.NEXT") : t("WIDGET.SUBMIT"),
+										onClick: index < challenge.captchas.length - 1 ? onNext : onSubmit,
+										"aria-label": index < challenge.captchas.length - 1 ? t("WIDGET.NEXT") : t("WIDGET.SUBMIT"),
+										"data-cy": "button-next"
+									})
+								})
+							]
+						})
+					})
+				]
+			})
+		})
+	});
 };
+//#endregion
+export { CaptchaComponent as default };

package/dist/components/CaptchaWidget.js

@@ -1,161 +1,115 @@
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { ProsopoDatasetError } from "@prosopo/common";
-import { lightTheme, darkTheme } from "@prosopo/widget-skeleton";
+import { darkTheme, lightTheme } from "@prosopo/widget-skeleton";
 import { useMemo } from "react";
-const getHash = (item) => {
-  if (!item.hash) {
-    throw new ProsopoDatasetError("CAPTCHA.MISSING_ITEM_HASH", {
-      context: { item }
-    });
-  }
-  return item.hash;
-};
-const CaptchaWidget = ({
-  challenge,
-  solution,
-  onClick,
-  themeColor
-}) => {
-  const items = challenge.items;
-  const theme = useMemo(
-    () => themeColor === "light" ? lightTheme : darkTheme,
-    [themeColor]
-  );
-  const fullSpacing = `${theme.spacing.unit}px`;
-  const halfSpacing = `${theme.spacing.half}px`;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        // expand to full height / width of parent
-        width: "100%",
-        height: "100%",
-        // display children in flex, spreading them evenly and wrapping when row length exceeded
-        display: "flex",
-        flexDirection: "row",
-        flexWrap: "wrap",
-        justifyContent: "space-between",
-        paddingBottom: fullSpacing,
-        paddingTop: fullSpacing,
-        gap: "10px"
-      },
-      children: items.map((item, index) => {
-        const hash = getHash(item);
-        const imageStyle = {
-          // enable the items in the grid to grow in width to use up excess space
-          flexGrow: 1,
-          // make the width of each item 1/3rd of the width overall, i.e. 3 columns
-          flexBasis: "calc(33.333% - 10px)",
-          // include the padding / margin / border in the width
-          boxSizing: "border-box"
-        };
-        return /* @__PURE__ */ jsx("div", { style: imageStyle, children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              position: "relative",
-              cursor: "pointer",
-              height: "100%",
-              width: "100%",
-              padding: 0,
-              margin: 0
-            },
-            onClick: (e) => {
-              if (!e.isTrusted) {
-                return;
-              }
-              if ("touches" in e && e.touches.length > 0 && e.touches[0]) {
-                onClick(hash, e.touches[0].clientX, e.touches[0].clientY);
-                return;
-              }
-              if ("clientX" in e && "clientY" in e) {
-                onClick(hash, e.clientX, e.clientY);
-                return;
-              }
-              onClick(hash, 0, 0);
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "img",
-                {
-                  style: {
-                    width: "100%",
-                    // image should be full width / height of the item
-                    display: "block",
-                    // removes whitespace below imgs
-                    objectFit: "cover",
-                    // contain the entire image in the img tag
-                    aspectRatio: "1/1",
-                    // force AR to be 1, letterboxing images with different aspect ratios
-                    height: "auto",
-                    // make the img tag responsive to its container
-                    overflow: "hidden",
-                    borderStyle: "solid",
-                    borderWidth: "1px",
-                    borderColor: theme.palette.grey[300]
-                  },
-                  src: item.data,
-                  alt: `Captcha image ${index + 1}`,
-                  onError: (e) => {
-                    const target = e.currentTarget;
-                    target._retryCount = (target._retryCount || 0) + 1;
-                    if (target._retryCount <= 3) {
-                      target.src = `${item.data}?retry=${Date.now()}`;
-                    }
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    bottom: 0,
-                    right: 0,
-                    height: "100%",
-                    width: "100%",
-                    // display overlays in center
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    // make bg half opacity, i.e. shadowing the item's img
-                    backgroundColor: "rgba(0,0,0,0.5)",
-                    visibility: solution.some((s) => s[0] === hash) ? "visible" : "hidden"
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    "svg",
-                    {
-                      style: {
-                        backgroundColor: "transparent",
-                        // img must be displayed as block otherwise gets a bottom whitespace border
-                        display: "block",
-                        // how big the overlay icon is
-                        width: "35%",
-                        height: "35%",
-                        transition: "fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-                        userSelect: "none",
-                        fill: "currentcolor"
-                      },
-                      focusable: "false",
-                      color: "#fff",
-                      "aria-hidden": "true",
-                      viewBox: "0 0 24 24",
-                      "data-testid": "CheckIcon",
-                      "aria-label": "Check icon",
-                      children: /* @__PURE__ */ jsx("path", { d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" })
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        ) }, item.hash);
-      })
-    }
-  );
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+//#region src/components/CaptchaWidget.tsx
+var getHash = (item) => {
+	if (!item.hash) throw new ProsopoDatasetError("CAPTCHA.MISSING_ITEM_HASH", { context: { item } });
+	return item.hash;
 };
-export {
-  CaptchaWidget
+var CaptchaWidget = ({ challenge, solution, onClick, themeColor }) => {
+	const items = challenge.items;
+	const theme = useMemo(() => themeColor === "light" ? lightTheme : darkTheme, [themeColor]);
+	const fullSpacing = `${theme.spacing.unit}px`;
+	`${theme.spacing.half}`;
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			width: "100%",
+			height: "100%",
+			display: "flex",
+			flexDirection: "row",
+			flexWrap: "wrap",
+			justifyContent: "space-between",
+			paddingBottom: fullSpacing,
+			paddingTop: fullSpacing,
+			gap: "10px"
+		},
+		children: items.map((item, index) => {
+			const hash = getHash(item);
+			return /* @__PURE__ */ jsx("div", {
+				style: {
+					flexGrow: 1,
+					flexBasis: "calc(33.333% - 10px)",
+					boxSizing: "border-box"
+				},
+				children: /* @__PURE__ */ jsxs("div", {
+					style: {
+						position: "relative",
+						cursor: "pointer",
+						height: "100%",
+						width: "100%",
+						padding: 0,
+						margin: 0
+					},
+					onClick: (e) => {
+						if (!e.isTrusted) return;
+						if ("touches" in e && e.touches.length > 0 && e.touches[0]) {
+							onClick(hash, e.touches[0].clientX, e.touches[0].clientY);
+							return;
+						}
+						if ("clientX" in e && "clientY" in e) {
+							onClick(hash, e.clientX, e.clientY);
+							return;
+						}
+						onClick(hash, 0, 0);
+					},
+					children: [/* @__PURE__ */ jsx("img", {
+						style: {
+							width: "100%",
+							display: "block",
+							objectFit: "cover",
+							aspectRatio: "1/1",
+							height: "auto",
+							overflow: "hidden",
+							borderStyle: "solid",
+							borderWidth: "1px",
+							borderColor: theme.palette.grey[300]
+						},
+						src: item.data,
+						alt: `Captcha image ${index + 1}`,
+						onError: (e) => {
+							const target = e.currentTarget;
+							target._retryCount = (target._retryCount || 0) + 1;
+							if (target._retryCount <= 3) target.src = `${item.data}?retry=${Date.now()}`;
+						}
+					}), /* @__PURE__ */ jsx("div", {
+						style: {
+							position: "absolute",
+							top: 0,
+							left: 0,
+							bottom: 0,
+							right: 0,
+							height: "100%",
+							width: "100%",
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							backgroundColor: "rgba(0,0,0,0.5)",
+							visibility: solution.some((s) => s[0] === hash) ? "visible" : "hidden"
+						},
+						children: /* @__PURE__ */ jsx("svg", {
+							style: {
+								backgroundColor: "transparent",
+								display: "block",
+								width: "35%",
+								height: "35%",
+								transition: "fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+								userSelect: "none",
+								fill: "currentcolor"
+							},
+							focusable: "false",
+							color: "#fff",
+							"aria-hidden": "true",
+							viewBox: "0 0 24 24",
+							"data-testid": "CheckIcon",
+							"aria-label": "Check icon",
+							children: /* @__PURE__ */ jsx("path", { d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" })
+						})
+					})]
+				})
+			}, item.hash);
+		})
+	});
 };
+//#endregion
+export { CaptchaWidget };