@salesforcedevs/dw-components 1.3.397-canary.4 → 1.3.397-canary.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.3.397-canary.4",
+    "version": "1.3.397-canary.5",
     "description": "Lightning web components for https://developer.salesforce.com",
     "license": "MIT",
     "engines": {

package/src/modules/dw/recaptcha/recaptcha.html

@@ -1,6 +1,6 @@
 <template>
     <div class="container">
-        <slot onslotchange={onSlotChange}></slot>
+        <div class="g-recaptcha"></div>
         <div
             if:true={errorMessage}
             aria-live="assertive"

package/src/modules/dw/recaptcha/recaptcha.ts

@@ -1,25 +1,33 @@
 import { api, LightningElement } from "lwc";
 
-declare module globalThis {
-    let grecaptcha: {
-        render(element: HTMLElement | null, recaptchaConfig: any): void;
-        reset(): void;
-    };
-}
+// NOTE: This component assumes it is the only Recaptcha widget on a page.
+type RecaptchaApi = {
+    render(element: HTMLElement | null, recaptchaConfig: any): void;
+    reset(): void;
+};
 
 export default class Recaptcha extends LightningElement {
-    private _recaptchaToken = "";
     private errorMessage = "";
-    private slottedRecaptchaDiv: HTMLDivElement | null = null;
+    private recaptchaDiv!: HTMLDivElement;
+    private recaptchaApi?: RecaptchaApi;
+    private recaptchaToken = "";
 
     @api missingErrorMessage = "Complete the captcha";
     @api recaptchaSiteKey = "";
 
     @api // read only
     get value() {
-        return this._recaptchaToken;
+        return this.recaptchaToken;
     }
 
+    @api
+    recaptchaScriptOnLoad = (recaptchaApi: RecaptchaApi) => {
+        this.recaptchaApi = recaptchaApi;
+        if (this.recaptchaDiv) {
+            this.renderRecaptcha();
+        }
+    };
+
     @api
     reset = () => this.resetRecaptcha();
 
@@ -36,38 +44,42 @@ export default class Recaptcha extends LightningElement {
 
     @api
     checkValidity = () => {
-        return Boolean(
-            (
-                this.slottedRecaptchaDiv?.querySelector(
-                    "#g-recaptcha-response"
-                ) as HTMLTextAreaElement
-            )?.value
-        );
+        return Boolean(this.recaptchaToken);
     };
 
-    private onSlotChange(e: Event) {
-        this.slottedRecaptchaDiv = e.target as HTMLDivElement;
+    renderedCallback() {
+        if (!this.recaptchaDiv) {
+            this.recaptchaDiv = this.template.querySelector(
+                ".g-recaptcha"
+            ) as HTMLDivElement;
+            if (this.recaptchaApi) {
+                this.renderRecaptcha();
+            }
+        }
+    }
+
+    private renderRecaptcha = () => {
         const smallMatchMedia = window.matchMedia(
             "screen and (max-width: 768px)"
         );
 
         // render recaptcha, referencing this component's callbacks for handling events
-        globalThis.grecaptcha?.render(this.slottedRecaptchaDiv, {
+        this.recaptchaApi?.render(this.recaptchaDiv, {
             sitekey: this.recaptchaSiteKey,
             callback: this.recaptchaCallback,
             "expired-callback": this.recaptchaExpiredCallback,
             "error-callback": this.recaptchaErrorCallback,
             size: smallMatchMedia.matches ? "compact" : "normal"
         });
-    }
+    };
 
     private recaptchaCallback = (token: string) => {
-        this._recaptchaToken = token;
+        this.recaptchaToken = token;
         this.errorMessage = "";
     };
 
     private recaptchaExpiredCallback = () => {
-        this._recaptchaToken = ""; // note: recaptcha element itself handles showing an "expired" message
+        this.recaptchaToken = ""; // note: recaptcha element itself handles showing an "expired" message
     };
 
     private recaptchaErrorCallback = () => {
@@ -76,7 +88,7 @@ export default class Recaptcha extends LightningElement {
     };
 
     private resetRecaptcha = () => {
-        this._recaptchaToken = "";
-        globalThis.grecaptcha?.reset();
+        this.recaptchaToken = "";
+        this.recaptchaApi?.reset();
     };
 }