@prosopo/procaptcha-react 2.6.27 → 2.6.29

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @prosopo/procaptcha-react
 
+## 2.6.29
+### Patch Changes
+
+- 3573f0b: fix npm scripts bundle command
+- 3573f0b: build using vite, typecheck using tsc
+- efd8102: Add tests for unwrap error helper
+- 3573f0b: standardise all vite based npm scripts for bundling
+- Updated dependencies [52dbf21]
+- Updated dependencies [93d5e50]
+- Updated dependencies [3573f0b]
+- Updated dependencies [3573f0b]
+- Updated dependencies [efd8102]
+- Updated dependencies [93d5e50]
+- Updated dependencies [63519d7]
+- Updated dependencies [f29fc7e]
+- Updated dependencies [3573f0b]
+- Updated dependencies [2d0dd8a]
+  - @prosopo/util@3.0.3
+  - @prosopo/widget-skeleton@2.6.1
+  - @prosopo/locale@3.1.0
+  - @prosopo/types@3.0.4
+  - @prosopo/procaptcha-common@2.7.10
+  - @prosopo/procaptcha@2.7.15
+  - @prosopo/common@3.1.0
+  - @prosopo/config@3.1.1
+
+## 2.6.28
+### Patch Changes
+
+  - @prosopo/procaptcha@2.7.14
+
 ## 2.6.27
 ### Patch Changes
 

package/dist/components/Button.js

@@ -1,62 +1,78 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { darkTheme, lightTheme } from "@prosopo/widget-skeleton";
-import { useMemo, useState, } from "react";
+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: undefined,
-    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",
+  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 (_jsx("button", { ...addDataAttr({ dev: { cy: `button-${buttonType}` } }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), style: buttonStyle, onClick: (e) => {
-            e.preventDefault();
-            onClick();
-        }, "aria-label": text, children: text }));
+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) => {
+        e.preventDefault();
+        onClick();
+      },
+      "aria-label": text,
+      children: text
+    }
+  );
+};
+export {
+  Button as default
 };
-export default Button;
-//# sourceMappingURL=Button.js.map

package/dist/components/CaptchaComponent.js

@@ -1,93 +1,231 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+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 { darkTheme, lightTheme } from "@prosopo/widget-skeleton";
-import { Suspense, useMemo } from "react";
+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 (_jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _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: _jsxs("div", { style: {
-                    backgroundColor: theme.palette.background.default,
-                    display: "flex",
-                    flexDirection: "column",
-                    minWidth: "300px",
-                    marginLeft: fullSpacing,
-                    marginRight: fullSpacing,
-                    justifyContent: "center",
-                }, children: [_jsx("div", { style: {
-                            display: "flex",
-                            alignItems: "center",
-                            width: "100%",
-                        }, children: _jsx("div", { style: {
-                                backgroundColor: theme.palette.primary.main,
-                                width: "100%",
-                                marginTop: fullSpacing,
-                            }, children: _jsxs("div", { style: {
-                                    padding: `${theme.spacing.half}px`,
-                                    fontFamily: theme.font.fontFamily,
-                                }, children: [_jsxs("p", { style: {
-                                            color: "#ffffff",
-                                            fontWeight: 700,
-                                            lineHeight: 1.5,
-                                        }, children: [t("WIDGET.SELECT_ALL"), ":", "\u00A0", _jsx("span", { children: `${at(challenge.captchas, index).target} ` })] }), _jsx("p", { style: {
-                                            color: "#ffffff",
-                                            fontWeight: 500,
-                                            lineHeight: 0.8,
-                                            fontSize: "0.8rem",
-                                        }, children: t("WIDGET.IF_NONE_CLICK_NEXT") })] }) }) }), _jsx("div", { ...addDataAttr({ dev: { cy: `captcha-${index}` } }), style: { overflow: "hidden" }, children: captcha && (_jsx(CaptchaWidget, { challenge: captcha, solution: solution, onClick: onClick, themeColor: themeColor })) }), _jsx("div", { style: {
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "space-between",
-                            lineHeight: 1.75,
-                            padding: `${fullSpacing} 0 ${doubleSpacing} 0`,
-                        }, children: _jsxs("div", { style: {
-                                width: "100%",
-                                height: "100%",
-                                display: "flex",
-                                flexDirection: "row",
-                                flexWrap: "wrap",
-                                justifyContent: "space-between",
-                                gap: "10px",
-                            }, children: [_jsx("div", { style: {
-                                        position: "relative",
-                                        flexGrow: 1,
-                                        flexBasis: "calc(33.333% - 10px)",
-                                    }, children: _jsx(Button, { themeColor: themeColor, buttonType: "cancel", onClick: onCancel, text: t("WIDGET.CANCEL"), "aria-label": t("WIDGET.CANCEL") }) }), _jsx("div", { style: {
-                                        position: "relative",
-                                        flexGrow: 1,
-                                        flexBasis: "calc(33.333% - 10px)",
-                                    }, children: _jsx(ReloadButton, { themeColor: themeColor, onReload: onReload }) }), _jsx("div", { style: {
-                                        position: "relative",
-                                        flexGrow: 1,
-                                        flexBasis: "calc(33.333% - 10px)",
-                                    }, children: _jsx(Button, { themeColor: 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" }) })] }) })] }) }) }));
+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 and wrapping when row length exceeded
+                      display: "flex",
+                      flexDirection: "row",
+                      flexWrap: "wrap",
+                      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
 };
-export default CaptchaComponent;
-//# sourceMappingURL=CaptchaComponent.js.map