@descope/flow-components 3.2.2 → 3.3.0

package/dist/fm/mf-manifest.json

@@ -5,7 +5,7 @@
     "name": "flowComponents",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "3.2.2",
+      "buildVersion": "3.3.0",
       "buildName": "@descope/flow-components"
     },
     "remoteEntry": {

package/dist/fm/mf-stats.json

@@ -5,7 +5,7 @@
     "name": "flowComponents",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "3.2.2",
+      "buildVersion": "3.3.0",
       "buildName": "@descope/flow-components"
     },
     "remoteEntry": {

package/dist/index.cjs.js

@@ -104694,7 +104694,7 @@ descope-enriched-text {
 
 	const componentName$2 = getComponentName$1('recaptcha');
 
-	const observedAttributes = ['enabled', 'site-key', 'action', 'enterprise'];
+	const observedAttributes = ['enabled', 'site-key', 'action', 'enterprise', 'variant'];
 
 	const BaseClass$1 = createBaseClass({
 	  componentName: componentName$2,
@@ -104711,6 +104711,10 @@ descope-enriched-text {
 	      if (attrName === 'enabled') {
 	        this.#toggleRecaptcha(newValue === 'true');
 	      }
+
+	      if (attrName === 'variant') {
+	        this.updatePreview();
+	      }
 	    }
 	  }
 
@@ -104723,13 +104727,37 @@ descope-enriched-text {
 	    this.toggleRecaptchaEles(enabled);
 	  }
 
+	  displayRecaptcha() {
+	    if (this.isWidget) {
+	      this.displayWidget();
+	    } else {
+	      this.displayDeprecated();
+	    }
+	  }
+
+	  displayWidget() {
+	    this.mockRecaptchaEle.style.display = 'none';
+	    this.recaptchaWidgetEle.style.display = '';
+	    this.depercatedRecaptchaEle.style.display = 'none';
+	  }
+
+	  hideRecaptcha() {
+	    this.recaptchaWidgetEle.style.display = 'none';
+	    this.depercatedRecaptchaEle.style.display = 'none';
+	    this.mockRecaptchaEle.style.display = '';
+	  }
+
+	  displayDeprecated() {
+	    this.mockRecaptchaEle.style.display = 'none';
+	    this.recaptchaWidgetEle.style.display = 'none';
+	    this.depercatedRecaptchaEle.style.display = '';
+	  }
+
 	  toggleRecaptchaEles(enabled) {
 	    if (enabled) {
-	      this.recaptchaEle.style.display = '';
-	      this.mockRecaptchaEle.style.display = 'none';
+	      this.displayRecaptcha();
 	    } else {
-	      this.recaptchaEle.style.display = 'none';
-	      this.mockRecaptchaEle.style.display = '';
+	      this.hideRecaptcha();
 	    }
 	  }
 
@@ -104739,6 +104767,8 @@ descope-enriched-text {
 	    this.attachShadow({ mode: 'open' }).innerHTML = `
     <div class="badge">
       <span id="recaptcha"></span>
+      <span id="recaptcha-widget"></span>
+      <input id="recaptcha-widget-input" type="hidden" name="recaptcha-widget" required />
       <img src="https://imgs.descope.com/connectors/templates/recaptcha/recaptcha-big.png" alt="recaptcha"/>
     </div>
     <slot></slot>
@@ -104762,6 +104792,13 @@ descope-enriched-text {
 				width: 100%;
         height: 100%;
 			}
+      :host #recaptcha-widget {
+        width: 100%;
+        height: 100%;
+      }
+      :host #recaptcha-widget-input {
+        display: none;
+      }
       :host img {
         width: 256px;
       }
@@ -104775,7 +104812,9 @@ descope-enriched-text {
 	      this
 	    );
 
-	    this.recaptchaEle = this.baseElement.querySelector('#recaptcha');
+	    this.depercatedRecaptchaEle = this.baseElement.querySelector('#recaptcha');
+	    this.recaptchaWidgetEle = this.baseElement.querySelector('#recaptcha-widget');
+	    this.recaptchaWidgetInputEle = this.baseElement.querySelector('#recaptcha-widget-input');
 	    this.mockRecaptchaEle = this.baseElement.querySelector('img');
 	    this.badge = this.shadowRoot.querySelector('.badge');
 	  }
@@ -104788,7 +104827,8 @@ descope-enriched-text {
 
 	  updatePreview() {
 	    if (this.children.length) {
-	      this.recaptchaEle.style.display = 'none';
+	      this.depercatedRecaptchaEle.style.display = 'none';
+	      this.recaptchaWidgetEle.style.display = 'none';
 	      this.mockRecaptchaEle.style.display = 'none';
 	      this.badge.classList.add('hidden');
 	    } else {
@@ -104797,6 +104837,26 @@ descope-enriched-text {
 	    }
 	  }
 
+	  getValidity() {
+	    if (!this.isWidget) {
+	      return {};
+	    }
+
+	    if (!this.recaptchaWidgetInputEle.value) {
+	      return { valueMissing: true };
+	    }
+
+	    return {};
+	  }
+
+	  checkValidity() {
+	    if (!this.isWidget) {
+	      return true;
+	    }
+
+	    return !!this.recaptchaWidgetInputEle.value;
+	  }
+
 	  get enterprise() {
 	    return this.getAttribute('enterprise') === 'true';
 	  }
@@ -104813,6 +104873,14 @@ descope-enriched-text {
 	    return this.getAttribute('enabled') === 'true';
 	  }
 
+	  get variant() {
+	    return this.getAttribute('variant') || 'text';
+	  }
+
+	  get isWidget() {
+	    return this.variant === 'widget';
+	  }
+
 	  get scriptURL() {
 	    const url = new URL('https://www.google.com/recaptcha/');
 	    url.pathname += `${this.enterprise ? 'enterprise' : 'api'}.js`;
@@ -104823,6 +104891,11 @@ descope-enriched-text {
 
 	  #toggleRecaptcha(enabled) {
 	    this.renderRecaptcha(enabled);
+	    if (this.isWidget) {
+	      // For the v2 checkbox flow, scripts are loaded/executed by the runtime (grecaptcha-v2).
+	      // This legacy v3/invisible path must be fully skipped.
+	      return;
+	    }
 	    if (enabled) {
 	      this.#createOnLoadScript();
 	      if (!document.getElementById('recaptcha-script')) {
@@ -104895,7 +104968,7 @@ descope-enriched-text {
 
 	  #createOnLoadScript() {
 	    window.onRecaptchaLoadCallback = () => {
-	      const currentNode = this.recaptchaEle;
+	      const currentNode = this.depercatedRecaptchaEle;
 
 	      // if there are child nodes, it means that the recaptcha was already rendered
 	      if (currentNode.hasChildNodes()) {
@@ -105629,7 +105702,12 @@ const NOTPLink = React__default.default.forwardRef(({ ...props }, ref) => {
 const UploadFile = React__default.default.forwardRef(({ icon, ...props }, ref) => (React__default.default.createElement("descope-upload-file", { ref: ref, ...props }, icon && React__default.default.createElement(Icon, { slot: "icon", icon: icon, "src-dark": icon }))));
 
 const defaultText$2 = 'This site is protected by reCAPTCHA and the Google [Privacy Policy](https://policies.google.com/privacy) and [Terms of Service](https://policies.google.com/terms) apply.';
-const Recaptcha = React__default.default.forwardRef(({ variant, textLabel = defaultText$2, textVariant = 'body1', textMode = 'primary', textAlign = 'left', 'full-width': fullWidth, readOnly, ...props }, ref) => (React__default.default.createElement("descope-recaptcha", { ref: ref, ...props, "full-width": fullWidth }, variant === 'text' ? (React__default.default.createElement("descope-enriched-text", { "full-width": fullWidth, readonly: readOnly, variant: textVariant, mode: textMode, "text-align": textAlign }, textLabel)) : null)));
+const Recaptcha = React__default.default.forwardRef(({ variant = 'text', textLabel = defaultText$2, textVariant = 'body1', textMode = 'primary', textAlign = 'left', 'full-width': fullWidth, readOnly, ...props }, ref) => {
+    if (variant === 'hide') {
+        return null;
+    }
+    return (React__default.default.createElement("descope-recaptcha", { ref: ref, ...props, variant: variant, "full-width": fullWidth }, variant === 'text' ? (React__default.default.createElement("descope-enriched-text", { "full-width": fullWidth, readonly: readOnly, variant: textVariant, mode: textMode, "text-align": textAlign }, textLabel)) : null));
+});
 
 const defaultText$1 = 'This site is protected by reCAPTCHA and the Google [Privacy Policy](https://policies.google.com/privacy) and [Terms of Service](https://policies.google.com/terms) apply.';
 const RecaptchaV2 = React__default.default.forwardRef(({ textLabel = defaultText$1, textVariant = 'body1', textMode = 'primary', textAlign = 'left', 'full-width': fullWidth, readOnly, connector: _connector, enterprise: _enterprise, action: _action, variant = 'text', src, width, height, ...props }, ref) => {

package/dist/index.d.ts

@@ -535,7 +535,7 @@ type Props$x = {
     'site-key'?: string;
     enterprise?: boolean;
     action?: string;
-    variant?: 'text';
+    variant?: CaptchaVariants;
     textLabel?: string;
     textVariant?: TypographyVariants;
     textMode?: Mode;
@@ -549,11 +549,11 @@ declare global {
     }
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-recaptcha': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$x;
+            'descope-recaptcha': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement, any>, HTMLElement> & Props$x;
         }
     }
 }
-declare const Recaptcha: React.ForwardRefExoticComponent<Props$x & React.HTMLAttributes<HTMLDivElement, unknown> & React.RefAttributes<HTMLDivElement>>;
+declare const Recaptcha: React.ForwardRefExoticComponent<Props$x & React.HTMLAttributes<HTMLDivElement, any> & React.RefAttributes<HTMLDivElement>>;
 
 type Props$w = {
     connector?: string;

package/dist/index.esm.js

@@ -388,7 +388,12 @@ const NOTPLink = React.forwardRef(({ ...props }, ref) => {
 const UploadFile = React.forwardRef(({ icon, ...props }, ref) => (React.createElement("descope-upload-file", { ref: ref, ...props }, icon && React.createElement(Icon, { slot: "icon", icon: icon, "src-dark": icon }))));
 
 const defaultText$2 = 'This site is protected by reCAPTCHA and the Google [Privacy Policy](https://policies.google.com/privacy) and [Terms of Service](https://policies.google.com/terms) apply.';
-const Recaptcha = React.forwardRef(({ variant, textLabel = defaultText$2, textVariant = 'body1', textMode = 'primary', textAlign = 'left', 'full-width': fullWidth, readOnly, ...props }, ref) => (React.createElement("descope-recaptcha", { ref: ref, ...props, "full-width": fullWidth }, variant === 'text' ? (React.createElement("descope-enriched-text", { "full-width": fullWidth, readonly: readOnly, variant: textVariant, mode: textMode, "text-align": textAlign }, textLabel)) : null)));
+const Recaptcha = React.forwardRef(({ variant = 'text', textLabel = defaultText$2, textVariant = 'body1', textMode = 'primary', textAlign = 'left', 'full-width': fullWidth, readOnly, ...props }, ref) => {
+    if (variant === 'hide') {
+        return null;
+    }
+    return (React.createElement("descope-recaptcha", { ref: ref, ...props, variant: variant, "full-width": fullWidth }, variant === 'text' ? (React.createElement("descope-enriched-text", { "full-width": fullWidth, readonly: readOnly, variant: textVariant, mode: textMode, "text-align": textAlign }, textLabel)) : null));
+});
 
 const defaultText$1 = 'This site is protected by reCAPTCHA and the Google [Privacy Policy](https://policies.google.com/privacy) and [Terms of Service](https://policies.google.com/terms) apply.';
 const RecaptchaV2 = React.forwardRef(({ textLabel = defaultText$1, textVariant = 'body1', textMode = 'primary', textAlign = 'left', 'full-width': fullWidth, readOnly, connector: _connector, enterprise: _enterprise, action: _action, variant = 'text', src, width, height, ...props }, ref) => {

package/dist/types/Recaptcha/Recaptcha.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Mode, TextAlign, TypographyVariants } from '../types';
+import { CaptchaVariants, Mode, TextAlign, TypographyVariants } from '../types';
 type Props = {
     enabled?: boolean;
     'site-key'?: string;
     enterprise?: boolean;
     action?: string;
-    variant?: 'text';
+    variant?: CaptchaVariants;
     textLabel?: string;
     textVariant?: TypographyVariants;
     textMode?: Mode;
@@ -19,9 +19,9 @@ declare global {
     }
     namespace React.JSX {
         interface IntrinsicElements {
-            'descope-recaptcha': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props;
+            'descope-recaptcha': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement, any>, HTMLElement> & Props;
         }
     }
 }
-declare const Recaptcha: React.ForwardRefExoticComponent<Props & React.HTMLAttributes<HTMLDivElement, unknown> & React.RefAttributes<HTMLDivElement>>;
+declare const Recaptcha: React.ForwardRefExoticComponent<Props & React.HTMLAttributes<HTMLDivElement, any> & React.RefAttributes<HTMLDivElement>>;
 export default Recaptcha;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/flow-components",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -97,7 +97,7 @@
     "webpack-subresource-integrity": "5.2.0-rc.1"
   },
   "dependencies": {
-    "@descope/web-components-ui": "3.2.2"
+    "@descope/web-components-ui": "3.3.0"
   },
   "peerDependencies": {
     "react": ">= 18"
@@ -139,7 +139,7 @@
     "build": "npx nx run flow-components:build",
     "dev": "nx dev flow-components",
     "dev-server": "FEDERATION_IP=127.0.0.1 NODE_ENV=development webpack serve --mode development --port 4444",
-    "test": "exit 0",
+    "test": "jest",
     "lint": "eslint --no-warn-ignored --fix 'src/**/*.{ts,tsx,js,jsx}'",
     "format": "prettier . -w --ignore-path .gitignore",
     "format-lint": "pretty-quick --staged --ignore-path .gitignore && lint-staged"