@thecb/components 11.2.17 → 11.3.0

package/dist/index.cjs.js

@@ -24397,6 +24397,39 @@ function useConditionallyAddValidator(condition, validatorFn, addValidator, remo
   }, [condition, addValidator, removeValidator]);
 }
 
+/**
+ * A custom hook to dynamically load the Cloudflare Turnstile script.
+ *
+ * @param {string} verifyURL - The URL of the Turnstile verification script.
+ */
+var useTurnstileScript = function useTurnstileScript(verifyURL) {
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isLoaded = _useState2[0],
+    setIsLoaded = _useState2[1];
+  React.useEffect(function () {
+    if (typeof window === "undefined") {
+      setIsLoaded(false);
+      return;
+    }
+    if (window.turnstile && window.turnstile.render) {
+      setIsLoaded(true);
+      return;
+    }
+    var script = document.createElement("script");
+    script.src = "".concat(verifyURL, "?render=explicit");
+    script.onload = function () {
+      setIsLoaded(true);
+    };
+    script.defer = true;
+    document.getElementsByTagName("head")[0].appendChild(script);
+    return function () {
+      setIsLoaded(false);
+    };
+  }, [verifyURL]);
+  return isLoaded;
+};
+
 
 
 var index$1 = /*#__PURE__*/Object.freeze({
@@ -24404,7 +24437,8 @@ var index$1 = /*#__PURE__*/Object.freeze({
   useOutsideClick: useOutsideClickHook,
   useScrollTo: useScrollTo,
   useToastNotification: useToastNotification,
-  useConditionallyAddValidator: useConditionallyAddValidator
+  useConditionallyAddValidator: useConditionallyAddValidator,
+  useTurnstileScript: useTurnstileScript
 });
 
 var hoverColor$4 = "#116285";
@@ -49944,6 +49978,94 @@ var HeroImage = function HeroImage(_ref) {
 };
 var HeroImage$1 = withWindowSize(themeComponent(HeroImage, "HeroImage", fallbackValues$11, "v1"));
 
+var TurnstileWidgetContainer = styled__default(Box).withConfig({
+  displayName: "TurnstileWidget__TurnstileWidgetContainer",
+  componentId: "sc-btaugr-0"
+})(["display:flex;padding:", ";justify-content:", ";width:100%;"], function (_ref) {
+  var padding = _ref.padding;
+  return padding;
+}, function (_ref2) {
+  var justify = _ref2.justify;
+  return justify;
+});
+var TurnstileWidget = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+  var verifyURL = _ref3.verifyURL,
+    siteKey = _ref3.siteKey,
+    _ref3$onSuccess = _ref3.onSuccess,
+    onSuccess = _ref3$onSuccess === void 0 ? noop$1 : _ref3$onSuccess,
+    _ref3$onError = _ref3.onError,
+    onError = _ref3$onError === void 0 ? noop$1 : _ref3$onError,
+    _ref3$onExpired = _ref3.onExpired,
+    onExpired = _ref3$onExpired === void 0 ? noop$1 : _ref3$onExpired,
+    _ref3$padding = _ref3.padding,
+    padding = _ref3$padding === void 0 ? "1rem" : _ref3$padding,
+    _ref3$justify = _ref3.justify,
+    justify = _ref3$justify === void 0 ? "flex-end" : _ref3$justify,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? "normal" : _ref3$size,
+    _ref3$tabindex = _ref3.tabindex,
+    tabindex = _ref3$tabindex === void 0 ? 0 : _ref3$tabindex,
+    _ref3$retry = _ref3.retry,
+    retry = _ref3$retry === void 0 ? "auto" : _ref3$retry,
+    _ref3$theme = _ref3.theme,
+    theme = _ref3$theme === void 0 ? "auto" : _ref3$theme,
+    _ref3$extraStyles = _ref3.extraStyles,
+    extraStyles = _ref3$extraStyles === void 0 ? "" : _ref3$extraStyles;
+  if (!verifyURL || !siteKey) return null;
+  var widgetRef = React.useRef(null);
+  var _useState = React.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    widgetId = _useState2[0],
+    setWidgetId = _useState2[1];
+  var isTurnstileLoaded = useTurnstileScript(verifyURL);
+
+  // Allow the parent component to reset the Turnstile widget
+  React.useImperativeHandle(ref, function () {
+    return {
+      reset: function reset() {
+        if (widgetId && window.turnstile) {
+          window.turnstile.reset(widgetId);
+        }
+      }
+    };
+  }, [widgetId]);
+  React.useEffect(function () {
+    if (!widgetRef.current || !window.turnstile) return;
+    if (!widgetId) {
+      var newWidgetId = window.turnstile.render(widgetRef.current, {
+        sitekey: siteKey,
+        size: size,
+        retry: retry,
+        tabindex: tabindex,
+        theme: theme,
+        callback: function callback(token) {
+          return onSuccess(token);
+        },
+        "error-callback": function errorCallback() {
+          return onError();
+        },
+        "expired-callback": function expiredCallback() {
+          return onExpired();
+        }
+      });
+      setWidgetId(newWidgetId);
+    }
+    return function () {
+      if (widgetId && window.turnstile) {
+        window.turnstile.remove(widgetId);
+        setWidgetId(null);
+      }
+    };
+  }, [isTurnstileLoaded, siteKey, widgetId]);
+  return /*#__PURE__*/React__default.createElement(TurnstileWidgetContainer, {
+    padding: padding,
+    justify: justify,
+    extraStyles: extraStyles
+  }, /*#__PURE__*/React__default.createElement("div", {
+    ref: widgetRef
+  }));
+});
+
 var pageBackground = "#FBFCFD";
 var fallbackValues$12 = {
   pageBackground: pageBackground
@@ -50496,6 +50618,7 @@ exports.ToastNotification = ToastNotification;
 exports.ToggleSwitch = ToggleSwitch$1;
 exports.TrashIcon = TrashIcon$1;
 exports.TrashIconV2 = TrashIconV2$1;
+exports.TurnstileWidget = TurnstileWidget;
 exports.TypeaheadInput = TypeaheadInput;
 exports.VerifiedEmailIcon = VerifiedEmailIcon$1;
 exports.VoidedIcon = VoidedIcon;