@cloudscape-design/components 3.0.333 → 3.0.335

package/input/styles.css.js

@@ -1,17 +1,17 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_2rhyz_19bat_93",
-  "input": "awsui_input_2rhyz_19bat_97",
-  "input-readonly": "awsui_input-readonly_2rhyz_19bat_120",
-  "input-invalid": "awsui_input-invalid_2rhyz_19bat_181",
-  "input-has-icon-left": "awsui_input-has-icon-left_2rhyz_19bat_192",
-  "input-type-search": "awsui_input-type-search_2rhyz_19bat_197",
-  "input-has-icon-right": "awsui_input-has-icon-right_2rhyz_19bat_213",
-  "input-has-no-border-radius": "awsui_input-has-no-border-radius_2rhyz_19bat_216",
-  "input-container": "awsui_input-container_2rhyz_19bat_220",
-  "input-icon-left": "awsui_input-icon-left_2rhyz_19bat_225",
-  "input-icon-right": "awsui_input-icon-right_2rhyz_19bat_232",
-  "input-button-right": "awsui_input-button-right_2rhyz_19bat_238"
+  "root": "awsui_root_2rhyz_w519p_93",
+  "input": "awsui_input_2rhyz_w519p_97",
+  "input-readonly": "awsui_input-readonly_2rhyz_w519p_120",
+  "input-invalid": "awsui_input-invalid_2rhyz_w519p_181",
+  "input-has-icon-left": "awsui_input-has-icon-left_2rhyz_w519p_192",
+  "input-type-search": "awsui_input-type-search_2rhyz_w519p_197",
+  "input-has-icon-right": "awsui_input-has-icon-right_2rhyz_w519p_213",
+  "input-has-no-border-radius": "awsui_input-has-no-border-radius_2rhyz_w519p_216",
+  "input-container": "awsui_input-container_2rhyz_w519p_220",
+  "input-icon-left": "awsui_input-icon-left_2rhyz_w519p_225",
+  "input-icon-right": "awsui_input-icon-right_2rhyz_w519p_232",
+  "input-button-right": "awsui_input-button-right_2rhyz_w519p_238"
 };
   

package/input/styles.scoped.css

@@ -90,11 +90,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_2rhyz_19bat_93:not(#\9) {
+.awsui_root_2rhyz_w519p_93:not(#\9) {
   /* used in test-utils for component to distinguish input from other input-like components, for example autosuggest */
 }
 
-.awsui_input_2rhyz_19bat_97:not(#\9) {
+.awsui_input_2rhyz_w519p_97:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -125,7 +125,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-spacing: normal;
   box-sizing: border-box;
   font-size: var(--font-body-m-size-7dign1, 14px);
-  line-height: var(--font-body-m-line-height-rfgrp9, 22px);
+  line-height: var(--font-body-m-line-height-ghizru, 20px);
   color: var(--color-text-body-default-su7kuo, #000716);
   font-weight: 400;
   font-family: var(--font-family-base-wn913o, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
@@ -140,73 +140,73 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-radius: var(--border-radius-input-g1eef0, 8px);
   border: var(--border-field-width-riro62, 2px) solid var(--color-border-input-default-zb6g42, #7d8998);
   font-size: var(--font-body-m-size-7dign1, 14px);
-  line-height: var(--font-body-m-line-height-rfgrp9, 22px);
-  height: var(--size-vertical-input-u93i5u, 34px);
+  line-height: var(--font-body-m-line-height-ghizru, 20px);
+  height: var(--size-vertical-input-pta06y, 32px);
 }
-.awsui_input_2rhyz_19bat_97.awsui_input-readonly_2rhyz_19bat_120:not(#\9) {
+.awsui_input_2rhyz_w519p_97.awsui_input-readonly_2rhyz_w519p_120:not(#\9) {
   background-color: var(--color-background-input-default-y2omd4, #ffffff);
   border: var(--border-field-width-riro62, 2px) solid var(--color-border-input-disabled-06dcc0, #e9ebed);
 }
-.awsui_input_2rhyz_19bat_97:not(#\9)::-webkit-input-placeholder {
+.awsui_input_2rhyz_w519p_97:not(#\9)::-webkit-input-placeholder {
   color: var(--color-text-input-placeholder-3y98yw, #5f6b7a);
   font-style: italic;
   -webkit-user-select: none;
           user-select: none;
 }
-.awsui_input_2rhyz_19bat_97:not(#\9)::-ms-input-placeholder {
+.awsui_input_2rhyz_w519p_97:not(#\9)::-ms-input-placeholder {
   color: var(--color-text-input-placeholder-3y98yw, #5f6b7a);
   font-style: italic;
 }
-.awsui_input_2rhyz_19bat_97:not(#\9)::-moz-placeholder {
+.awsui_input_2rhyz_w519p_97:not(#\9)::-moz-placeholder {
   color: var(--color-text-input-placeholder-3y98yw, #5f6b7a);
   font-style: italic;
   opacity: 1;
 }
-.awsui_input_2rhyz_19bat_97:not(#\9):-ms-input-placeholder {
+.awsui_input_2rhyz_w519p_97:not(#\9):-ms-input-placeholder {
   color: var(--color-text-input-placeholder-3y98yw, #5f6b7a);
   font-style: italic;
 }
-.awsui_input_2rhyz_19bat_97:not(#\9):-moz-placeholder {
+.awsui_input_2rhyz_w519p_97:not(#\9):-moz-placeholder {
   color: var(--color-text-input-placeholder-3y98yw, #5f6b7a);
   font-style: italic;
   opacity: 1;
 }
-.awsui_input_2rhyz_19bat_97:not(#\9):focus {
+.awsui_input_2rhyz_w519p_97:not(#\9):focus {
   outline: 2px dotted transparent;
   border: var(--border-field-width-riro62, 2px) solid var(--color-border-item-focused-4t19h5, #0972d3);
   border-radius: var(--border-radius-input-g1eef0, 8px);
   box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-cwek11, 0px) var(--color-border-item-focused-4t19h5, #0972d3);
 }
-.awsui_input_2rhyz_19bat_97:not(#\9):disabled {
+.awsui_input_2rhyz_w519p_97:not(#\9):disabled {
   background-color: var(--color-background-input-disabled-nvrgh4, #e9ebed);
   border: var(--border-field-width-riro62, 2px) solid var(--color-border-input-disabled-06dcc0, #e9ebed);
   color: var(--color-text-input-disabled-dmotcr, #9ba7b6);
   cursor: auto;
   cursor: default;
 }
-.awsui_input_2rhyz_19bat_97:not(#\9):disabled::-webkit-input-placeholder {
+.awsui_input_2rhyz_w519p_97:not(#\9):disabled::-webkit-input-placeholder {
   color: var(--color-text-input-placeholder-disabled-kxks79, #9ba7b6);
   -webkit-user-select: none;
           user-select: none;
 }
-.awsui_input_2rhyz_19bat_97:not(#\9):disabled::-ms-input-placeholder {
+.awsui_input_2rhyz_w519p_97:not(#\9):disabled::-ms-input-placeholder {
   color: var(--color-text-input-placeholder-disabled-kxks79, #9ba7b6);
 }
-.awsui_input_2rhyz_19bat_97:not(#\9):disabled::-moz-placeholder {
+.awsui_input_2rhyz_w519p_97:not(#\9):disabled::-moz-placeholder {
   color: var(--color-text-input-placeholder-disabled-kxks79, #9ba7b6);
   opacity: 1;
 }
-.awsui_input_2rhyz_19bat_97:not(#\9):disabled:-ms-input-placeholder {
+.awsui_input_2rhyz_w519p_97:not(#\9):disabled:-ms-input-placeholder {
   color: var(--color-text-input-placeholder-disabled-kxks79, #9ba7b6);
 }
-.awsui_input_2rhyz_19bat_97:not(#\9):disabled:-moz-placeholder {
+.awsui_input_2rhyz_w519p_97:not(#\9):disabled:-moz-placeholder {
   color: var(--color-text-input-placeholder-disabled-kxks79, #9ba7b6);
   opacity: 1;
 }
-.awsui_input_2rhyz_19bat_97:not(#\9):invalid {
+.awsui_input_2rhyz_w519p_97:not(#\9):invalid {
   box-shadow: none;
 }
-.awsui_input_2rhyz_19bat_97.awsui_input-invalid_2rhyz_19bat_181:not(#\9) {
+.awsui_input_2rhyz_w519p_97.awsui_input-invalid_2rhyz_w519p_181:not(#\9) {
   color: var(--color-text-status-error-p6dh5n, #d91515);
   border-color: var(--color-text-status-error-p6dh5n, #d91515);
   padding-left: calc(
@@ -214,55 +214,55 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 );
   border-left-width: var(--border-invalid-width-u1caet, 8px);
 }
-.awsui_input_2rhyz_19bat_97.awsui_input-invalid_2rhyz_19bat_181:not(#\9):focus {
+.awsui_input_2rhyz_w519p_97.awsui_input-invalid_2rhyz_w519p_181:not(#\9):focus {
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-yfz0fs, 2px) var(--color-border-item-focused-4t19h5, #0972d3);
 }
-.awsui_input_2rhyz_19bat_97.awsui_input-invalid_2rhyz_19bat_181.awsui_input-has-icon-left_2rhyz_19bat_192:not(#\9) {
+.awsui_input_2rhyz_w519p_97.awsui_input-invalid_2rhyz_w519p_181.awsui_input-has-icon-left_2rhyz_w519p_192:not(#\9) {
   padding-left: calc(
         var(--space-field-icon-offset-o8qwwh, 36px) - (var(--border-invalid-width-u1caet, 8px) - var(--border-field-width-riro62, 2px))
       );
 }
-.awsui_input_2rhyz_19bat_97.awsui_input-type-search_2rhyz_19bat_197:not(#\9) {
+.awsui_input_2rhyz_w519p_97.awsui_input-type-search_2rhyz_w519p_197:not(#\9) {
   box-sizing: border-box;
   -webkit-appearance: none; /* stylelint-disable-line plugin/no-unsupported-browser-features */
 }
-.awsui_input_2rhyz_19bat_97.awsui_input-type-search_2rhyz_19bat_197:not(#\9)::-ms-clear {
+.awsui_input_2rhyz_w519p_97.awsui_input-type-search_2rhyz_w519p_197:not(#\9)::-ms-clear {
   display: none;
 }
-.awsui_input_2rhyz_19bat_97.awsui_input-type-search_2rhyz_19bat_197:not(#\9)::-webkit-search-decoration {
+.awsui_input_2rhyz_w519p_97.awsui_input-type-search_2rhyz_w519p_197:not(#\9)::-webkit-search-decoration {
   -webkit-appearance: none; /* stylelint-disable-line plugin/no-unsupported-browser-features */
 }
-.awsui_input_2rhyz_19bat_97.awsui_input-type-search_2rhyz_19bat_197:not(#\9)::-webkit-search-cancel-button {
+.awsui_input_2rhyz_w519p_97.awsui_input-type-search_2rhyz_w519p_197:not(#\9)::-webkit-search-cancel-button {
   display: none;
 }
-.awsui_input_2rhyz_19bat_97.awsui_input-has-icon-left_2rhyz_19bat_192:not(#\9) {
+.awsui_input_2rhyz_w519p_97.awsui_input-has-icon-left_2rhyz_w519p_192:not(#\9) {
   padding-left: var(--space-field-icon-offset-o8qwwh, 36px);
 }
-.awsui_input_2rhyz_19bat_97.awsui_input-has-icon-right_2rhyz_19bat_213:not(#\9) {
+.awsui_input_2rhyz_w519p_97.awsui_input-has-icon-right_2rhyz_w519p_213:not(#\9) {
   padding-right: var(--space-field-icon-offset-o8qwwh, 36px);
 }
-.awsui_input_2rhyz_19bat_97.awsui_input-has-no-border-radius_2rhyz_19bat_216:not(#\9) {
+.awsui_input_2rhyz_w519p_97.awsui_input-has-no-border-radius_2rhyz_w519p_216:not(#\9) {
   border-radius: var(--border-radius-dropdown-re1k6b, 8px);
 }
 
-.awsui_input-container_2rhyz_19bat_220:not(#\9) {
+.awsui_input-container_2rhyz_w519p_220:not(#\9) {
   display: flex;
   position: relative;
 }
 
-.awsui_input-icon-left_2rhyz_19bat_225:not(#\9) {
+.awsui_input-icon-left_2rhyz_w519p_225:not(#\9) {
   position: absolute;
   pointer-events: none;
   left: var(--space-field-horizontal-8qo3uw, 12px);
-  top: calc(50% - var(--font-body-m-line-height-rfgrp9, 22px) / 2);
+  top: calc(50% - var(--font-body-m-line-height-ghizru, 20px) / 2);
 }
 
-.awsui_input-icon-right_2rhyz_19bat_232:not(#\9) {
+.awsui_input-icon-right_2rhyz_w519p_232:not(#\9) {
   position: absolute;
-  top: calc(50% - var(--font-body-m-line-height-rfgrp9, 22px) / 2);
+  top: calc(50% - var(--font-body-m-line-height-ghizru, 20px) / 2);
   right: calc(var(--space-field-horizontal-8qo3uw, 12px) - var(--space-xxs-ja5cp8, 4px));
 }
 
-.awsui_input-button-right_2rhyz_19bat_238:not(#\9) {
+.awsui_input-button-right_2rhyz_w519p_238:not(#\9) {
   /* used in test-utils */
 }

package/input/styles.selectors.js

@@ -2,17 +2,17 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_2rhyz_19bat_93",
-  "input": "awsui_input_2rhyz_19bat_97",
-  "input-readonly": "awsui_input-readonly_2rhyz_19bat_120",
-  "input-invalid": "awsui_input-invalid_2rhyz_19bat_181",
-  "input-has-icon-left": "awsui_input-has-icon-left_2rhyz_19bat_192",
-  "input-type-search": "awsui_input-type-search_2rhyz_19bat_197",
-  "input-has-icon-right": "awsui_input-has-icon-right_2rhyz_19bat_213",
-  "input-has-no-border-radius": "awsui_input-has-no-border-radius_2rhyz_19bat_216",
-  "input-container": "awsui_input-container_2rhyz_19bat_220",
-  "input-icon-left": "awsui_input-icon-left_2rhyz_19bat_225",
-  "input-icon-right": "awsui_input-icon-right_2rhyz_19bat_232",
-  "input-button-right": "awsui_input-button-right_2rhyz_19bat_238"
+  "root": "awsui_root_2rhyz_w519p_93",
+  "input": "awsui_input_2rhyz_w519p_97",
+  "input-readonly": "awsui_input-readonly_2rhyz_w519p_120",
+  "input-invalid": "awsui_input-invalid_2rhyz_w519p_181",
+  "input-has-icon-left": "awsui_input-has-icon-left_2rhyz_w519p_192",
+  "input-type-search": "awsui_input-type-search_2rhyz_w519p_197",
+  "input-has-icon-right": "awsui_input-has-icon-right_2rhyz_w519p_213",
+  "input-has-no-border-radius": "awsui_input-has-no-border-radius_2rhyz_w519p_216",
+  "input-container": "awsui_input-container_2rhyz_w519p_220",
+  "input-icon-left": "awsui_input-icon-left_2rhyz_w519p_225",
+  "input-icon-right": "awsui_input-icon-right_2rhyz_w519p_232",
+  "input-button-right": "awsui_input-button-right_2rhyz_w519p_238"
 };
   

package/internal/analytics/components/analytics-funnel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"analytics-funnel.d.ts","sourceRoot":"lib/default/","sources":["internal/analytics/components/analytics-funnel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAKL,sBAAsB,EACvB,MAAM,8BAA8B,CAAC;AAQtC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAW7D,eAAO,MAAM,cAAc,QAAQ,CAAC;AAEpC,KAAK,oBAAoB,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,IAAI,CAC/D,WAAW,EACX,YAAY,GAAG,qBAAqB,GAAG,kBAAkB,CAC1D,CAAC;AAEF,eAAO,MAAM,eAAe,2BAA4B,oBAAoB,gBAgE3E,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CACnF,GAAG,IAAI,CAAC,eAAe,EAAE,YAAY,GAAG,kBAAkB,CAAC,CAAC;AAE7D,eAAO,MAAM,mBAAmB,+CAAgD,wBAAwB,gBAyCvG,CAAC;AACF,UAAU,2BAA2B;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,sBAAsB,iBAAkB,2BAA2B,gBAsB/E,CAAC"}
+{"version":3,"file":"analytics-funnel.d.ts","sourceRoot":"lib/default/","sources":["internal/analytics/components/analytics-funnel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAKL,sBAAsB,EAEvB,MAAM,8BAA8B,CAAC;AAQtC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAW7D,eAAO,MAAM,cAAc,QAAQ,CAAC;AAEpC,KAAK,oBAAoB,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,IAAI,CAC/D,WAAW,EACX,YAAY,GAAG,qBAAqB,GAAG,kBAAkB,CAC1D,CAAC;AAEF,eAAO,MAAM,eAAe,2BAA4B,oBAAoB,gBAkH3E,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CACnF,GAAG,IAAI,CAAC,eAAe,EAAE,YAAY,GAAG,kBAAkB,CAAC,CAAC;AAE7D,eAAO,MAAM,mBAAmB,+CAAgD,wBAAwB,gBA2CvG,CAAC;AACF,UAAU,2BAA2B;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,sBAAsB,iBAAkB,2BAA2B,gBAsB/E,CAAC"}

package/internal/analytics/components/analytics-funnel.js

@@ -14,8 +14,10 @@ export const AnalyticsFunnel = (_a) => {
     var { children } = _a, props = __rest(_a, ["children"]);
     const [funnelInteractionId, setFunnelInteractionId] = useState('');
     const [submissionAttempt, setSubmissionAttempt] = useState(0);
-    const funnelResultRef = useRef(false);
     const isVisualRefresh = useVisualRefresh();
+    const funnelState = useRef('default');
+    const errorCount = useRef(0);
+    const loadingButtonCount = useRef(0);
     // This useEffect hook is run once on component mount to initiate the funnel analytics.
     // It first calls the 'funnelStart' method from FunnelMetrics, providing all necessary details
     // about the funnel, and receives a unique interaction id.
@@ -27,6 +29,8 @@ export const AnalyticsFunnel = (_a) => {
     // The eslint-disable is required as we deliberately want this effect to run only once on mount and unmount,
     // hence we do not provide any dependencies.
     useEffect(() => {
+        // Reset the state, in case the component was re-mounted.
+        funnelState.current = 'default';
         const funnelInteractionId = FunnelMetrics.funnelStart({
             funnelNameSelector: getFunnelNameSelector(),
             optionalStepNumbers: props.optionalStepNumbers,
@@ -37,24 +41,62 @@ export const AnalyticsFunnel = (_a) => {
             funnelVersion: FUNNEL_VERSION,
         });
         setFunnelInteractionId(funnelInteractionId);
+        /*
+          A funnel counts as "successful" if it is unmounted after being "complete".
+        */
+        /* eslint-disable react-hooks/exhaustive-deps */
         return () => {
-            if (funnelResultRef.current === true) {
+            if (funnelState.current === 'validating') {
+                // Finish the validation phase early.
+                FunnelMetrics.funnelComplete({ funnelInteractionId });
+                funnelState.current = 'complete';
+            }
+            if (funnelState.current === 'complete') {
                 FunnelMetrics.funnelSuccessful({ funnelInteractionId });
             }
             else {
                 FunnelMetrics.funnelCancelled({ funnelInteractionId });
+                funnelState.current === 'cancelled';
             }
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    /* eslint-enable react-hooks/exhaustive-deps */
     const funnelSubmit = () => {
-        FunnelMetrics.funnelComplete({ funnelInteractionId });
-        funnelResultRef.current = true;
+        funnelState.current = 'validating';
+        /*
+          When the user attempts to submit the form, we wait for 50 milliseconds before checking
+          if any form validation errors are present. This value was chosen to give enough time
+          for validation and rerendering to occur, but be low enough that the user will not
+          be able to take further action in the meantime.
+        */
+        const VALIDATION_WAIT_DELAY = 50;
+        /*
+         Loading is expected to take longer than validation, so we can keep the pressure on the CPU low.
+         */
+        const LOADING_WAIT_DELAY = 100;
+        const checkForCompleteness = () => {
+            if (funnelState.current === 'complete') {
+                return;
+            }
+            if (loadingButtonCount.current > 0) {
+                setTimeout(checkForCompleteness, LOADING_WAIT_DELAY);
+                return;
+            }
+            if (errorCount.current === 0) {
+                /*
+                  If no validation errors are rendered, we treat the funnel as complete.
+                */
+                FunnelMetrics.funnelComplete({ funnelInteractionId });
+                funnelState.current = 'complete';
+            }
+            else {
+                funnelState.current = 'default';
+            }
+        };
+        setTimeout(checkForCompleteness, VALIDATION_WAIT_DELAY);
     };
     const funnelNextOrSubmitAttempt = () => setSubmissionAttempt(i => i + 1);
-    const funnelCancel = () => {
-        funnelResultRef.current = false;
-    };
+    const funnelCancel = () => { };
     const funnelContextValue = {
         funnelInteractionId,
         setFunnelInteractionId,
@@ -65,11 +107,14 @@ export const AnalyticsFunnel = (_a) => {
         funnelCancel,
         submissionAttempt,
         funnelNextOrSubmitAttempt,
+        funnelState,
+        errorCount,
+        loadingButtonCount,
     };
     return React.createElement(FunnelContext.Provider, { value: funnelContextValue }, children);
 };
 export const AnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector }) => {
-    const { funnelInteractionId } = useFunnel();
+    const { funnelInteractionId, funnelState } = useFunnel();
     const funnelStepProps = { [DATA_ATTR_FUNNEL_STEP]: stepNumber };
     // This useEffect hook is used to track the start and completion of interaction with the step.
     // On mount, if there is a valid funnel interaction id, it calls the 'funnelStepStart' method from FunnelMetrics
@@ -77,7 +122,7 @@ export const AnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector })
     // On unmount, it does a similar thing but this time calling 'funnelStepComplete' to record the completion of the interaction.
     useEffect(() => {
         const stepName = getNameFromSelector(stepNameSelector);
-        if (funnelInteractionId) {
+        if (funnelInteractionId && funnelState.current === 'default') {
             FunnelMetrics.funnelStepStart({
                 funnelInteractionId,
                 stepNumber,
@@ -87,7 +132,8 @@ export const AnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector })
             });
         }
         return () => {
-            if (funnelInteractionId) {
+            //eslint-disable-next-line react-hooks/exhaustive-deps
+            if (funnelInteractionId && funnelState.current === 'default') {
                 FunnelMetrics.funnelStepComplete({
                     funnelInteractionId,
                     stepNumber,
@@ -97,6 +143,7 @@ export const AnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector })
                 });
             }
         };
+        //eslint-disable-next-line react-hooks/exhaustive-deps
     }, [funnelInteractionId, stepNumber, stepNameSelector]);
     const contextValue = { funnelInteractionId, stepNumber, stepNameSelector, funnelStepProps };
     return (React.createElement(FunnelStepContext.Provider, { value: contextValue }, typeof children === 'function' ? children(contextValue) : children));

package/internal/analytics/components/analytics-funnel.js.map

@@ -1 +1 @@
-{"version":3,"file":"analytics-funnel.js","sourceRoot":"lib/default/","sources":["internal/analytics/components/analytics-funnel.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport {\n  FunnelStepContext,\n  FunnelSubStepContext,\n  FunnelContext,\n  FunnelContextValue,\n  FunnelStepContextValue,\n} from '../context/analytics-context';\nimport { useFunnel, useFunnelStep } from '../hooks/use-funnel';\nimport { useUniqueId } from '../../hooks/use-unique-id';\nimport { useVisualRefresh } from '../../hooks/use-visual-mode';\n\nimport { PACKAGE_VERSION } from '../../environment';\n\nimport { FunnelMetrics } from '../';\nimport { FunnelProps, FunnelStepProps } from '../interfaces';\n\nimport {\n  DATA_ATTR_FUNNEL_STEP,\n  getFunnelNameSelector,\n  getNameFromSelector,\n  getSubStepAllSelector,\n  getSubStepNameSelector,\n  getSubStepSelector,\n} from '../selectors';\n\nexport const FUNNEL_VERSION = '1.0';\n\ntype AnalyticsFunnelProps = { children?: React.ReactNode } & Pick<\n  FunnelProps,\n  'funnelType' | 'optionalStepNumbers' | 'totalFunnelSteps'\n>;\n\nexport const AnalyticsFunnel = ({ children, ...props }: AnalyticsFunnelProps) => {\n  const [funnelInteractionId, setFunnelInteractionId] = useState<string>('');\n  const [submissionAttempt, setSubmissionAttempt] = useState(0);\n  const funnelResultRef = useRef<boolean>(false);\n  const isVisualRefresh = useVisualRefresh();\n\n  // This useEffect hook is run once on component mount to initiate the funnel analytics.\n  // It first calls the 'funnelStart' method from FunnelMetrics, providing all necessary details\n  // about the funnel, and receives a unique interaction id.\n  // This unique interaction id is then stored in the state for further use.\n  //\n  // On component unmount, it checks whether the funnel was successfully completed.\n  // Based on this, it either calls 'funnelComplete' or 'funnelCancelled' method from FunnelMetrics.\n  //\n  // The eslint-disable is required as we deliberately want this effect to run only once on mount and unmount,\n  // hence we do not provide any dependencies.\n  useEffect(() => {\n    const funnelInteractionId = FunnelMetrics.funnelStart({\n      funnelNameSelector: getFunnelNameSelector(),\n      optionalStepNumbers: props.optionalStepNumbers,\n      funnelType: props.funnelType,\n      totalFunnelSteps: props.totalFunnelSteps,\n      componentVersion: PACKAGE_VERSION,\n      theme: isVisualRefresh ? 'vr' : 'classic',\n      funnelVersion: FUNNEL_VERSION,\n    });\n\n    setFunnelInteractionId(funnelInteractionId);\n\n    return () => {\n      if (funnelResultRef.current === true) {\n        FunnelMetrics.funnelSuccessful({ funnelInteractionId });\n      } else {\n        FunnelMetrics.funnelCancelled({ funnelInteractionId });\n      }\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const funnelSubmit = () => {\n    FunnelMetrics.funnelComplete({ funnelInteractionId });\n    funnelResultRef.current = true;\n  };\n\n  const funnelNextOrSubmitAttempt = () => setSubmissionAttempt(i => i + 1);\n\n  const funnelCancel = () => {\n    funnelResultRef.current = false;\n  };\n\n  const funnelContextValue: FunnelContextValue = {\n    funnelInteractionId,\n    setFunnelInteractionId,\n    funnelType: props.funnelType,\n    optionalStepNumbers: props.optionalStepNumbers,\n    totalFunnelSteps: props.totalFunnelSteps,\n    funnelSubmit,\n    funnelCancel,\n    submissionAttempt,\n    funnelNextOrSubmitAttempt,\n  };\n\n  return <FunnelContext.Provider value={funnelContextValue}>{children}</FunnelContext.Provider>;\n};\n\ntype AnalyticsFunnelStepProps = {\n  children?: React.ReactNode | ((props: FunnelStepContextValue) => React.ReactNode);\n} & Pick<FunnelStepProps, 'stepNumber' | 'stepNameSelector'>;\n\nexport const AnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector }: AnalyticsFunnelStepProps) => {\n  const { funnelInteractionId } = useFunnel();\n\n  const funnelStepProps = { [DATA_ATTR_FUNNEL_STEP]: stepNumber };\n\n  // This useEffect hook is used to track the start and completion of interaction with the step.\n  // On mount, if there is a valid funnel interaction id, it calls the 'funnelStepStart' method from FunnelMetrics\n  // to record the beginning of the interaction with the current step.\n  // On unmount, it does a similar thing but this time calling 'funnelStepComplete' to record the completion of the interaction.\n  useEffect(() => {\n    const stepName = getNameFromSelector(stepNameSelector);\n\n    if (funnelInteractionId) {\n      FunnelMetrics.funnelStepStart({\n        funnelInteractionId,\n        stepNumber,\n        stepName,\n        stepNameSelector,\n        subStepAllSelector: getSubStepAllSelector(),\n      });\n    }\n\n    return () => {\n      if (funnelInteractionId) {\n        FunnelMetrics.funnelStepComplete({\n          funnelInteractionId,\n          stepNumber,\n          stepName,\n          stepNameSelector,\n          subStepAllSelector: getSubStepAllSelector(),\n        });\n      }\n    };\n  }, [funnelInteractionId, stepNumber, stepNameSelector]);\n\n  const contextValue: FunnelStepContextValue = { funnelInteractionId, stepNumber, stepNameSelector, funnelStepProps };\n  return (\n    <FunnelStepContext.Provider value={contextValue}>\n      {typeof children === 'function' ? children(contextValue) : children}\n    </FunnelStepContext.Provider>\n  );\n};\ninterface AnalyticsFunnelSubStepProps {\n  children?: React.ReactNode;\n}\n\nexport const AnalyticsFunnelSubStep = ({ children }: AnalyticsFunnelSubStepProps) => {\n  const { funnelInteractionId } = useFunnel();\n  const { stepNumber, stepNameSelector } = useFunnelStep();\n\n  const subStepId = useUniqueId('substep');\n  const subStepSelector = getSubStepSelector(subStepId);\n  const subStepNameSelector = getSubStepNameSelector(subStepId);\n\n  return (\n    <FunnelSubStepContext.Provider\n      value={{\n        funnelInteractionId,\n        stepNumber,\n        stepNameSelector,\n        subStepSelector,\n        subStepNameSelector,\n        subStepId,\n      }}\n    >\n      {children}\n    </FunnelSubStepContext.Provider>\n  );\n};\n"]}
+{"version":3,"file":"analytics-funnel.js","sourceRoot":"lib/default/","sources":["internal/analytics/components/analytics-funnel.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport {\n  FunnelStepContext,\n  FunnelSubStepContext,\n  FunnelContext,\n  FunnelContextValue,\n  FunnelStepContextValue,\n  FunnelState,\n} from '../context/analytics-context';\nimport { useFunnel, useFunnelStep } from '../hooks/use-funnel';\nimport { useUniqueId } from '../../hooks/use-unique-id';\nimport { useVisualRefresh } from '../../hooks/use-visual-mode';\n\nimport { PACKAGE_VERSION } from '../../environment';\n\nimport { FunnelMetrics } from '../';\nimport { FunnelProps, FunnelStepProps } from '../interfaces';\n\nimport {\n  DATA_ATTR_FUNNEL_STEP,\n  getFunnelNameSelector,\n  getNameFromSelector,\n  getSubStepAllSelector,\n  getSubStepNameSelector,\n  getSubStepSelector,\n} from '../selectors';\n\nexport const FUNNEL_VERSION = '1.0';\n\ntype AnalyticsFunnelProps = { children?: React.ReactNode } & Pick<\n  FunnelProps,\n  'funnelType' | 'optionalStepNumbers' | 'totalFunnelSteps'\n>;\n\nexport const AnalyticsFunnel = ({ children, ...props }: AnalyticsFunnelProps) => {\n  const [funnelInteractionId, setFunnelInteractionId] = useState<string>('');\n  const [submissionAttempt, setSubmissionAttempt] = useState(0);\n  const isVisualRefresh = useVisualRefresh();\n  const funnelState = useRef<FunnelState>('default');\n  const errorCount = useRef<number>(0);\n  const loadingButtonCount = useRef<number>(0);\n\n  // This useEffect hook is run once on component mount to initiate the funnel analytics.\n  // It first calls the 'funnelStart' method from FunnelMetrics, providing all necessary details\n  // about the funnel, and receives a unique interaction id.\n  // This unique interaction id is then stored in the state for further use.\n  //\n  // On component unmount, it checks whether the funnel was successfully completed.\n  // Based on this, it either calls 'funnelComplete' or 'funnelCancelled' method from FunnelMetrics.\n  //\n  // The eslint-disable is required as we deliberately want this effect to run only once on mount and unmount,\n  // hence we do not provide any dependencies.\n  useEffect(() => {\n    // Reset the state, in case the component was re-mounted.\n    funnelState.current = 'default';\n\n    const funnelInteractionId = FunnelMetrics.funnelStart({\n      funnelNameSelector: getFunnelNameSelector(),\n      optionalStepNumbers: props.optionalStepNumbers,\n      funnelType: props.funnelType,\n      totalFunnelSteps: props.totalFunnelSteps,\n      componentVersion: PACKAGE_VERSION,\n      theme: isVisualRefresh ? 'vr' : 'classic',\n      funnelVersion: FUNNEL_VERSION,\n    });\n\n    setFunnelInteractionId(funnelInteractionId);\n\n    /*\n      A funnel counts as \"successful\" if it is unmounted after being \"complete\".\n    */\n    /* eslint-disable react-hooks/exhaustive-deps */\n    return () => {\n      if (funnelState.current === 'validating') {\n        // Finish the validation phase early.\n        FunnelMetrics.funnelComplete({ funnelInteractionId });\n        funnelState.current = 'complete';\n      }\n\n      if (funnelState.current === 'complete') {\n        FunnelMetrics.funnelSuccessful({ funnelInteractionId });\n      } else {\n        FunnelMetrics.funnelCancelled({ funnelInteractionId });\n        funnelState.current === 'cancelled';\n      }\n    };\n  }, []);\n  /* eslint-enable react-hooks/exhaustive-deps */\n\n  const funnelSubmit = () => {\n    funnelState.current = 'validating';\n\n    /*\n      When the user attempts to submit the form, we wait for 50 milliseconds before checking\n      if any form validation errors are present. This value was chosen to give enough time\n      for validation and rerendering to occur, but be low enough that the user will not\n      be able to take further action in the meantime.\n    */\n    const VALIDATION_WAIT_DELAY = 50;\n    /*\n     Loading is expected to take longer than validation, so we can keep the pressure on the CPU low.\n     */\n    const LOADING_WAIT_DELAY = 100;\n\n    const checkForCompleteness = () => {\n      if (funnelState.current === 'complete') {\n        return;\n      }\n\n      if (loadingButtonCount.current > 0) {\n        setTimeout(checkForCompleteness, LOADING_WAIT_DELAY);\n        return;\n      }\n\n      if (errorCount.current === 0) {\n        /*\n          If no validation errors are rendered, we treat the funnel as complete.\n        */\n        FunnelMetrics.funnelComplete({ funnelInteractionId });\n        funnelState.current = 'complete';\n      } else {\n        funnelState.current = 'default';\n      }\n    };\n\n    setTimeout(checkForCompleteness, VALIDATION_WAIT_DELAY);\n  };\n\n  const funnelNextOrSubmitAttempt = () => setSubmissionAttempt(i => i + 1);\n\n  const funnelCancel = () => {};\n\n  const funnelContextValue: FunnelContextValue = {\n    funnelInteractionId,\n    setFunnelInteractionId,\n    funnelType: props.funnelType,\n    optionalStepNumbers: props.optionalStepNumbers,\n    totalFunnelSteps: props.totalFunnelSteps,\n    funnelSubmit,\n    funnelCancel,\n    submissionAttempt,\n    funnelNextOrSubmitAttempt,\n    funnelState,\n    errorCount,\n    loadingButtonCount,\n  };\n\n  return <FunnelContext.Provider value={funnelContextValue}>{children}</FunnelContext.Provider>;\n};\n\ntype AnalyticsFunnelStepProps = {\n  children?: React.ReactNode | ((props: FunnelStepContextValue) => React.ReactNode);\n} & Pick<FunnelStepProps, 'stepNumber' | 'stepNameSelector'>;\n\nexport const AnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector }: AnalyticsFunnelStepProps) => {\n  const { funnelInteractionId, funnelState } = useFunnel();\n\n  const funnelStepProps = { [DATA_ATTR_FUNNEL_STEP]: stepNumber };\n\n  // This useEffect hook is used to track the start and completion of interaction with the step.\n  // On mount, if there is a valid funnel interaction id, it calls the 'funnelStepStart' method from FunnelMetrics\n  // to record the beginning of the interaction with the current step.\n  // On unmount, it does a similar thing but this time calling 'funnelStepComplete' to record the completion of the interaction.\n  useEffect(() => {\n    const stepName = getNameFromSelector(stepNameSelector);\n\n    if (funnelInteractionId && funnelState.current === 'default') {\n      FunnelMetrics.funnelStepStart({\n        funnelInteractionId,\n        stepNumber,\n        stepName,\n        stepNameSelector,\n        subStepAllSelector: getSubStepAllSelector(),\n      });\n    }\n\n    return () => {\n      //eslint-disable-next-line react-hooks/exhaustive-deps\n      if (funnelInteractionId && funnelState.current === 'default') {\n        FunnelMetrics.funnelStepComplete({\n          funnelInteractionId,\n          stepNumber,\n          stepName,\n          stepNameSelector,\n          subStepAllSelector: getSubStepAllSelector(),\n        });\n      }\n    };\n    //eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [funnelInteractionId, stepNumber, stepNameSelector]);\n\n  const contextValue: FunnelStepContextValue = { funnelInteractionId, stepNumber, stepNameSelector, funnelStepProps };\n  return (\n    <FunnelStepContext.Provider value={contextValue}>\n      {typeof children === 'function' ? children(contextValue) : children}\n    </FunnelStepContext.Provider>\n  );\n};\ninterface AnalyticsFunnelSubStepProps {\n  children?: React.ReactNode;\n}\n\nexport const AnalyticsFunnelSubStep = ({ children }: AnalyticsFunnelSubStepProps) => {\n  const { funnelInteractionId } = useFunnel();\n  const { stepNumber, stepNameSelector } = useFunnelStep();\n\n  const subStepId = useUniqueId('substep');\n  const subStepSelector = getSubStepSelector(subStepId);\n  const subStepNameSelector = getSubStepNameSelector(subStepId);\n\n  return (\n    <FunnelSubStepContext.Provider\n      value={{\n        funnelInteractionId,\n        stepNumber,\n        stepNameSelector,\n        subStepSelector,\n        subStepNameSelector,\n        subStepId,\n      }}\n    >\n      {children}\n    </FunnelSubStepContext.Provider>\n  );\n};\n"]}

package/internal/analytics/context/analytics-context.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="react" />
+import { MutableRefObject, RefObject } from 'react';
 import { FunnelType } from '../interfaces';
 export interface BaseContextProps {
     funnelInteractionId: string | undefined;
 }
+export type FunnelState = 'default' | 'validating' | 'complete' | 'cancelled';
 export interface FunnelContextValue extends BaseContextProps {
     funnelType: FunnelType;
     optionalStepNumbers: number[];
@@ -12,6 +13,9 @@ export interface FunnelContextValue extends BaseContextProps {
     setFunnelInteractionId: (funnelInteractionId: string) => void;
     submissionAttempt: number;
     funnelNextOrSubmitAttempt: () => void;
+    funnelState: RefObject<FunnelState>;
+    errorCount: MutableRefObject<number>;
+    loadingButtonCount: MutableRefObject<number>;
 }
 export interface FunnelStepContextValue extends BaseContextProps {
     stepNameSelector: string;

package/internal/analytics/context/analytics-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"analytics-context.d.ts","sourceRoot":"lib/default/","sources":["internal/analytics/context/analytics-context.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,WAAW,gBAAgB;IAC/B,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC;CACzC;AAED,MAAM,WAAW,kBAAmB,SAAQ,gBAAgB;IAC1D,UAAU,EAAE,UAAU,CAAC;IACvB,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,sBAAsB,EAAE,CAAC,mBAAmB,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,iBAAiB,EAAE,MAAM,CAAC;IAC1B,yBAAyB,EAAE,MAAM,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;IAC9D,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC;CACzE;AAED,MAAM,WAAW,yBAA0B,SAAQ,sBAAsB;IACvE,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC;CAC5E;AAGD,eAAO,MAAM,aAAa,6CAUxB,CAAC;AAEH,eAAO,MAAM,iBAAiB,iDAK5B,CAAC;AAEH,eAAO,MAAM,oBAAoB,oDAQ/B,CAAC"}
+{"version":3,"file":"analytics-context.d.ts","sourceRoot":"lib/default/","sources":["internal/analytics/context/analytics-context.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,WAAW,gBAAgB;IAC/B,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC;CACzC;AAED,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9E,MAAM,WAAW,kBAAmB,SAAQ,gBAAgB;IAC1D,UAAU,EAAE,UAAU,CAAC;IACvB,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,sBAAsB,EAAE,CAAC,mBAAmB,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,iBAAiB,EAAE,MAAM,CAAC;IAC1B,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC,WAAW,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACpC,UAAU,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACrC,kBAAkB,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CAC9C;AAED,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;IAC9D,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC;CACzE;AAED,MAAM,WAAW,yBAA0B,SAAQ,sBAAsB;IACvE,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC;CAC5E;AAGD,eAAO,MAAM,aAAa,6CAaxB,CAAC;AAEH,eAAO,MAAM,iBAAiB,iDAK5B,CAAC;AAEH,eAAO,MAAM,oBAAoB,oDAQ/B,CAAC"}

package/internal/analytics/context/analytics-context.js

@@ -12,6 +12,9 @@ export const FunnelContext = createContext({
     funnelCancel: () => { },
     submissionAttempt: 0,
     funnelNextOrSubmitAttempt: () => { },
+    funnelState: { current: 'default' },
+    errorCount: { current: 0 },
+    loadingButtonCount: { current: 0 },
 });
 export const FunnelStepContext = createContext({
     funnelInteractionId: undefined,

package/internal/analytics/context/analytics-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"analytics-context.js","sourceRoot":"lib/default/","sources":["internal/analytics/context/analytics-context.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAgCtC,0BAA0B;AAC1B,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAqB;IAC7D,mBAAmB,EAAE,SAAS;IAC9B,sBAAsB,EAAE,GAAG,EAAE,GAAE,CAAC;IAChC,UAAU,EAAE,aAAa;IACzB,mBAAmB,EAAE,EAAE;IACvB,gBAAgB,EAAE,CAAC;IACnB,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC;IACtB,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC;IACtB,iBAAiB,EAAE,CAAC;IACpB,yBAAyB,EAAE,GAAG,EAAE,GAAE,CAAC;CACpC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAyB;IACrE,mBAAmB,EAAE,SAAS;IAC9B,gBAAgB,EAAE,EAAE;IACpB,UAAU,EAAE,CAAC;IACb,eAAe,EAAE,EAAE;CACpB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAA4B;IAC3E,mBAAmB,EAAE,SAAS;IAC9B,SAAS,EAAE,EAAE;IACb,UAAU,EAAE,CAAC;IACb,gBAAgB,EAAE,EAAE;IACpB,eAAe,EAAE,EAAE;IACnB,mBAAmB,EAAE,EAAE;IACvB,eAAe,EAAE,EAAE;CACpB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { createContext } from 'react';\nimport { FunnelType } from '../interfaces';\n\nexport interface BaseContextProps {\n  funnelInteractionId: string | undefined;\n}\n\nexport interface FunnelContextValue extends BaseContextProps {\n  funnelType: FunnelType;\n  optionalStepNumbers: number[];\n  totalFunnelSteps: number;\n  funnelSubmit: () => void;\n  funnelCancel: () => void;\n  setFunnelInteractionId: (funnelInteractionId: string) => void;\n  submissionAttempt: number;\n  funnelNextOrSubmitAttempt: () => void;\n}\n\nexport interface FunnelStepContextValue extends BaseContextProps {\n  stepNameSelector: string;\n  stepNumber: number;\n  funnelStepProps?: Record<string, string | number | boolean | undefined>;\n}\n\nexport interface FunnelSubStepContextValue extends FunnelStepContextValue {\n  subStepId: string;\n  subStepSelector: string;\n  subStepNameSelector: string;\n  stepNumber: number;\n  funnelSubStepProps?: Record<string, string | number | boolean | undefined>;\n}\n\n/* istanbul ignore next */\nexport const FunnelContext = createContext<FunnelContextValue>({\n  funnelInteractionId: undefined,\n  setFunnelInteractionId: () => {},\n  funnelType: 'single-page',\n  optionalStepNumbers: [],\n  totalFunnelSteps: 0,\n  funnelSubmit: () => {},\n  funnelCancel: () => {},\n  submissionAttempt: 0,\n  funnelNextOrSubmitAttempt: () => {},\n});\n\nexport const FunnelStepContext = createContext<FunnelStepContextValue>({\n  funnelInteractionId: undefined,\n  stepNameSelector: '',\n  stepNumber: 0,\n  funnelStepProps: {},\n});\n\nexport const FunnelSubStepContext = createContext<FunnelSubStepContextValue>({\n  funnelInteractionId: undefined,\n  subStepId: '',\n  stepNumber: 0,\n  stepNameSelector: '',\n  subStepSelector: '',\n  subStepNameSelector: '',\n  funnelStepProps: {},\n});\n"]}
+{"version":3,"file":"analytics-context.js","sourceRoot":"lib/default/","sources":["internal/analytics/context/analytics-context.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAA+B,aAAa,EAAE,MAAM,OAAO,CAAC;AAqCnE,0BAA0B;AAC1B,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAqB;IAC7D,mBAAmB,EAAE,SAAS;IAC9B,sBAAsB,EAAE,GAAG,EAAE,GAAE,CAAC;IAChC,UAAU,EAAE,aAAa;IACzB,mBAAmB,EAAE,EAAE;IACvB,gBAAgB,EAAE,CAAC;IACnB,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC;IACtB,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC;IACtB,iBAAiB,EAAE,CAAC;IACpB,yBAAyB,EAAE,GAAG,EAAE,GAAE,CAAC;IACnC,WAAW,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;IACnC,UAAU,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;IAC1B,kBAAkB,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;CACnC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAyB;IACrE,mBAAmB,EAAE,SAAS;IAC9B,gBAAgB,EAAE,EAAE;IACpB,UAAU,EAAE,CAAC;IACb,eAAe,EAAE,EAAE;CACpB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAA4B;IAC3E,mBAAmB,EAAE,SAAS;IAC9B,SAAS,EAAE,EAAE;IACb,UAAU,EAAE,CAAC;IACb,gBAAgB,EAAE,EAAE;IACpB,eAAe,EAAE,EAAE;IACnB,mBAAmB,EAAE,EAAE;IACvB,eAAe,EAAE,EAAE;CACpB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { MutableRefObject, RefObject, createContext } from 'react';\nimport { FunnelType } from '../interfaces';\n\nexport interface BaseContextProps {\n  funnelInteractionId: string | undefined;\n}\n\nexport type FunnelState = 'default' | 'validating' | 'complete' | 'cancelled';\n\nexport interface FunnelContextValue extends BaseContextProps {\n  funnelType: FunnelType;\n  optionalStepNumbers: number[];\n  totalFunnelSteps: number;\n  funnelSubmit: () => void;\n  funnelCancel: () => void;\n  setFunnelInteractionId: (funnelInteractionId: string) => void;\n  submissionAttempt: number;\n  funnelNextOrSubmitAttempt: () => void;\n  funnelState: RefObject<FunnelState>;\n  errorCount: MutableRefObject<number>;\n  loadingButtonCount: MutableRefObject<number>;\n}\n\nexport interface FunnelStepContextValue extends BaseContextProps {\n  stepNameSelector: string;\n  stepNumber: number;\n  funnelStepProps?: Record<string, string | number | boolean | undefined>;\n}\n\nexport interface FunnelSubStepContextValue extends FunnelStepContextValue {\n  subStepId: string;\n  subStepSelector: string;\n  subStepNameSelector: string;\n  stepNumber: number;\n  funnelSubStepProps?: Record<string, string | number | boolean | undefined>;\n}\n\n/* istanbul ignore next */\nexport const FunnelContext = createContext<FunnelContextValue>({\n  funnelInteractionId: undefined,\n  setFunnelInteractionId: () => {},\n  funnelType: 'single-page',\n  optionalStepNumbers: [],\n  totalFunnelSteps: 0,\n  funnelSubmit: () => {},\n  funnelCancel: () => {},\n  submissionAttempt: 0,\n  funnelNextOrSubmitAttempt: () => {},\n  funnelState: { current: 'default' },\n  errorCount: { current: 0 },\n  loadingButtonCount: { current: 0 },\n});\n\nexport const FunnelStepContext = createContext<FunnelStepContextValue>({\n  funnelInteractionId: undefined,\n  stepNameSelector: '',\n  stepNumber: 0,\n  funnelStepProps: {},\n});\n\nexport const FunnelSubStepContext = createContext<FunnelSubStepContextValue>({\n  funnelInteractionId: undefined,\n  subStepId: '',\n  stepNumber: 0,\n  stepNameSelector: '',\n  subStepSelector: '',\n  subStepNameSelector: '',\n  funnelStepProps: {},\n});\n"]}

package/internal/analytics/hooks/use-funnel.d.ts

@@ -45,6 +45,9 @@ export declare const useFunnel: () => {
     setFunnelInteractionId: (funnelInteractionId: string) => void;
     submissionAttempt: number;
     funnelNextOrSubmitAttempt: () => void;
+    funnelState: import("react").RefObject<import("../context/analytics-context").FunnelState>;
+    errorCount: import("react").MutableRefObject<number>;
+    loadingButtonCount: import("react").MutableRefObject<number>;
     funnelInteractionId: string | undefined;
     funnelProps: Record<string, string | number | boolean | undefined>;
 };

package/internal/analytics/hooks/use-funnel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-funnel.d.ts","sourceRoot":"lib/default/","sources":["internal/analytics/hooks/use-funnel.ts"],"names":[],"mappings":";AAQA;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;CA6C5B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,qEAGzB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;CASrB,CAAC"}
+{"version":3,"file":"use-funnel.d.ts","sourceRoot":"lib/default/","sources":["internal/analytics/hooks/use-funnel.ts"],"names":[],"mappings":";AAQA;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;CAqD5B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,qEAGzB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;CASrB,CAAC"}

package/internal/analytics/hooks/use-funnel.js

@@ -18,10 +18,12 @@ export const useFunnelSubStep = () => {
     const subStepRef = useRef(null);
     const context = useContext(FunnelSubStepContext);
     const { funnelInteractionId, subStepId, subStepSelector, subStepNameSelector, stepNumber, stepNameSelector } = context;
+    const { funnelState } = useFunnel();
     const onFocus = (event) => {
         if (funnelInteractionId &&
             subStepRef.current &&
-            (!event.relatedTarget || !subStepRef.current.contains(event.relatedTarget))) {
+            (!event.relatedTarget || !subStepRef.current.contains(event.relatedTarget)) &&
+            funnelState.current === 'default') {
             FunnelMetrics.funnelSubStepStart({
                 funnelInteractionId,
                 subStepSelector,
@@ -33,7 +35,10 @@ export const useFunnelSubStep = () => {
         }
     };
     const onBlur = (event) => {
-        if (funnelInteractionId && subStepRef.current && !subStepRef.current.contains(event.relatedTarget)) {
+        if (funnelInteractionId &&
+            subStepRef.current &&
+            !subStepRef.current.contains(event.relatedTarget) &&
+            funnelState.current === 'default') {
             FunnelMetrics.funnelSubStepComplete({
                 funnelInteractionId,
                 subStepSelector,

package/internal/analytics/hooks/use-funnel.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-funnel.js","sourceRoot":"lib/default/","sources":["internal/analytics/hooks/use-funnel.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACtG,OAAO,EAAE,+BAA+B,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAChH,OAAO,EAAE,aAAa,EAAE,MAAM,KAAK,CAAC;AAEpC;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IACjD,MAAM,EAAE,mBAAmB,EAAE,SAAS,EAAE,eAAe,EAAE,mBAAmB,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAC1G,OAAO,CAAC;IAEV,MAAM,OAAO,GAAG,CAAC,KAAuC,EAAE,EAAE;QAC1D,IACE,mBAAmB;YACnB,UAAU,CAAC,OAAO;YAClB,CAAC,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,CAAC,EACnF;YACA,aAAa,CAAC,kBAAkB,CAAC;gBAC/B,mBAAmB;gBACnB,eAAe;gBACf,mBAAmB;gBACnB,UAAU;gBACV,gBAAgB;gBAChB,kBAAkB,EAAE,qBAAqB,EAAE;aAC5C,CAAC,CAAC;SACJ;IACH,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,KAAuC,EAAE,EAAE;QACzD,IAAI,mBAAmB,IAAI,UAAU,CAAC,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE;YAClG,aAAa,CAAC,qBAAqB,CAAC;gBAClC,mBAAmB;gBACnB,eAAe;gBACf,mBAAmB;gBACnB,UAAU;gBACV,gBAAgB;gBAChB,kBAAkB,EAAE,qBAAqB,EAAE;aAC5C,CAAC,CAAC;SACJ;IACH,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAwB,mBAAmB;QACjE,CAAC,CAAC;YACE,CAAC,wBAAwB,CAAC,EAAE,SAAS;YACrC,OAAO;YACP,MAAM;SACP;QACH,CAAC,CAAC,EAAE,CAAC;IAEP,uBAAS,kBAAkB,EAAE,UAAU,IAAK,OAAO,EAAG;AACxD,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC9C,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAC1C,MAAM,WAAW,GAA0D,OAAO,CAAC,mBAAmB;QACpG,CAAC,CAAC;YACE,CAAC,+BAA+B,CAAC,EAAE,OAAO,CAAC,mBAAmB;SAC/D;QACH,CAAC,CAAC,EAAE,CAAC;IAEP,uBAAS,WAAW,IAAK,OAAO,EAAG;AACrC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useContext, useRef } from 'react';\nimport { FunnelContext, FunnelStepContext, FunnelSubStepContext } from '../context/analytics-context';\nimport { DATA_ATTR_FUNNEL_INTERACTION_ID, DATA_ATTR_FUNNEL_SUBSTEP, getSubStepAllSelector } from '../selectors';\nimport { FunnelMetrics } from '../';\n\n/**\n * Custom React Hook to manage and interact with FunnelSubStep.\n * This hook will provide necessary properties and methods required\n * to track and manage interactions with a FunnelSubStep component.\n *\n * The `onFocus` method is used to track the beginning of interaction with the FunnelSubStep.\n * The `onBlur` method is used to track the completion of interaction with the FunnelSubStep.\n * The subStepId is a unique identifier for the funnel sub-step.\n * The subStepRef is a reference to the DOM element of the funnel sub-step.\n */\nexport const useFunnelSubStep = () => {\n  const subStepRef = useRef<HTMLDivElement | null>(null);\n  const context = useContext(FunnelSubStepContext);\n  const { funnelInteractionId, subStepId, subStepSelector, subStepNameSelector, stepNumber, stepNameSelector } =\n    context;\n\n  const onFocus = (event: React.FocusEvent<HTMLDivElement>) => {\n    if (\n      funnelInteractionId &&\n      subStepRef.current &&\n      (!event.relatedTarget || !subStepRef.current.contains(event.relatedTarget as Node))\n    ) {\n      FunnelMetrics.funnelSubStepStart({\n        funnelInteractionId,\n        subStepSelector,\n        subStepNameSelector,\n        stepNumber,\n        stepNameSelector,\n        subStepAllSelector: getSubStepAllSelector(),\n      });\n    }\n  };\n\n  const onBlur = (event: React.FocusEvent<HTMLDivElement>) => {\n    if (funnelInteractionId && subStepRef.current && !subStepRef.current.contains(event.relatedTarget)) {\n      FunnelMetrics.funnelSubStepComplete({\n        funnelInteractionId,\n        subStepSelector,\n        subStepNameSelector,\n        stepNumber,\n        stepNameSelector,\n        subStepAllSelector: getSubStepAllSelector(),\n      });\n    }\n  };\n\n  const funnelSubStepProps: Record<string, any> = funnelInteractionId\n    ? {\n        [DATA_ATTR_FUNNEL_SUBSTEP]: subStepId,\n        onFocus,\n        onBlur,\n      }\n    : {};\n\n  return { funnelSubStepProps, subStepRef, ...context };\n};\n\n/**\n * Custom React Hook to manage and interact with FunnelStep.\n * This hook will provide necessary properties required to track\n * and manage interactions with a FunnelStep component.\n *\n * The 'data-analytics-funnel-step' property of funnelStepProps is used to track the index of the current step in the funnel.\n * The context contains additional properties of the FunnelStep.\n */\nexport const useFunnelStep = () => {\n  const context = useContext(FunnelStepContext);\n  return context;\n};\n\n/**\n * Custom React Hook to manage and interact with Funnel.\n * This hook will provide necessary properties required to track\n * and manage interactions with a Funnel component.\n *\n * The 'data-analytics-funnel-interaction-id' property of funnelProps is used to track the unique identifier of the current interaction with the funnel.\n */\nexport const useFunnel = () => {\n  const context = useContext(FunnelContext);\n  const funnelProps: Record<string, string | number | boolean | undefined> = context.funnelInteractionId\n    ? {\n        [DATA_ATTR_FUNNEL_INTERACTION_ID]: context.funnelInteractionId,\n      }\n    : {};\n\n  return { funnelProps, ...context };\n};\n"]}
+{"version":3,"file":"use-funnel.js","sourceRoot":"lib/default/","sources":["internal/analytics/hooks/use-funnel.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACtG,OAAO,EAAE,+BAA+B,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAChH,OAAO,EAAE,aAAa,EAAE,MAAM,KAAK,CAAC;AAEpC;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IACjD,MAAM,EAAE,mBAAmB,EAAE,SAAS,EAAE,eAAe,EAAE,mBAAmB,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAC1G,OAAO,CAAC;IAEV,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,CAAC;IAEpC,MAAM,OAAO,GAAG,CAAC,KAAuC,EAAE,EAAE;QAC1D,IACE,mBAAmB;YACnB,UAAU,CAAC,OAAO;YAClB,CAAC,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,CAAC;YACnF,WAAW,CAAC,OAAO,KAAK,SAAS,EACjC;YACA,aAAa,CAAC,kBAAkB,CAAC;gBAC/B,mBAAmB;gBACnB,eAAe;gBACf,mBAAmB;gBACnB,UAAU;gBACV,gBAAgB;gBAChB,kBAAkB,EAAE,qBAAqB,EAAE;aAC5C,CAAC,CAAC;SACJ;IACH,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,KAAuC,EAAE,EAAE;QACzD,IACE,mBAAmB;YACnB,UAAU,CAAC,OAAO;YAClB,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC;YACjD,WAAW,CAAC,OAAO,KAAK,SAAS,EACjC;YACA,aAAa,CAAC,qBAAqB,CAAC;gBAClC,mBAAmB;gBACnB,eAAe;gBACf,mBAAmB;gBACnB,UAAU;gBACV,gBAAgB;gBAChB,kBAAkB,EAAE,qBAAqB,EAAE;aAC5C,CAAC,CAAC;SACJ;IACH,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAwB,mBAAmB;QACjE,CAAC,CAAC;YACE,CAAC,wBAAwB,CAAC,EAAE,SAAS;YACrC,OAAO;YACP,MAAM;SACP;QACH,CAAC,CAAC,EAAE,CAAC;IAEP,uBAAS,kBAAkB,EAAE,UAAU,IAAK,OAAO,EAAG;AACxD,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC9C,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAC1C,MAAM,WAAW,GAA0D,OAAO,CAAC,mBAAmB;QACpG,CAAC,CAAC;YACE,CAAC,+BAA+B,CAAC,EAAE,OAAO,CAAC,mBAAmB;SAC/D;QACH,CAAC,CAAC,EAAE,CAAC;IAEP,uBAAS,WAAW,IAAK,OAAO,EAAG;AACrC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useContext, useRef } from 'react';\nimport { FunnelContext, FunnelStepContext, FunnelSubStepContext } from '../context/analytics-context';\nimport { DATA_ATTR_FUNNEL_INTERACTION_ID, DATA_ATTR_FUNNEL_SUBSTEP, getSubStepAllSelector } from '../selectors';\nimport { FunnelMetrics } from '../';\n\n/**\n * Custom React Hook to manage and interact with FunnelSubStep.\n * This hook will provide necessary properties and methods required\n * to track and manage interactions with a FunnelSubStep component.\n *\n * The `onFocus` method is used to track the beginning of interaction with the FunnelSubStep.\n * The `onBlur` method is used to track the completion of interaction with the FunnelSubStep.\n * The subStepId is a unique identifier for the funnel sub-step.\n * The subStepRef is a reference to the DOM element of the funnel sub-step.\n */\nexport const useFunnelSubStep = () => {\n  const subStepRef = useRef<HTMLDivElement | null>(null);\n  const context = useContext(FunnelSubStepContext);\n  const { funnelInteractionId, subStepId, subStepSelector, subStepNameSelector, stepNumber, stepNameSelector } =\n    context;\n\n  const { funnelState } = useFunnel();\n\n  const onFocus = (event: React.FocusEvent<HTMLDivElement>) => {\n    if (\n      funnelInteractionId &&\n      subStepRef.current &&\n      (!event.relatedTarget || !subStepRef.current.contains(event.relatedTarget as Node)) &&\n      funnelState.current === 'default'\n    ) {\n      FunnelMetrics.funnelSubStepStart({\n        funnelInteractionId,\n        subStepSelector,\n        subStepNameSelector,\n        stepNumber,\n        stepNameSelector,\n        subStepAllSelector: getSubStepAllSelector(),\n      });\n    }\n  };\n\n  const onBlur = (event: React.FocusEvent<HTMLDivElement>) => {\n    if (\n      funnelInteractionId &&\n      subStepRef.current &&\n      !subStepRef.current.contains(event.relatedTarget) &&\n      funnelState.current === 'default'\n    ) {\n      FunnelMetrics.funnelSubStepComplete({\n        funnelInteractionId,\n        subStepSelector,\n        subStepNameSelector,\n        stepNumber,\n        stepNameSelector,\n        subStepAllSelector: getSubStepAllSelector(),\n      });\n    }\n  };\n\n  const funnelSubStepProps: Record<string, any> = funnelInteractionId\n    ? {\n        [DATA_ATTR_FUNNEL_SUBSTEP]: subStepId,\n        onFocus,\n        onBlur,\n      }\n    : {};\n\n  return { funnelSubStepProps, subStepRef, ...context };\n};\n\n/**\n * Custom React Hook to manage and interact with FunnelStep.\n * This hook will provide necessary properties required to track\n * and manage interactions with a FunnelStep component.\n *\n * The 'data-analytics-funnel-step' property of funnelStepProps is used to track the index of the current step in the funnel.\n * The context contains additional properties of the FunnelStep.\n */\nexport const useFunnelStep = () => {\n  const context = useContext(FunnelStepContext);\n  return context;\n};\n\n/**\n * Custom React Hook to manage and interact with Funnel.\n * This hook will provide necessary properties required to track\n * and manage interactions with a Funnel component.\n *\n * The 'data-analytics-funnel-interaction-id' property of funnelProps is used to track the unique identifier of the current interaction with the funnel.\n */\nexport const useFunnel = () => {\n  const context = useContext(FunnelContext);\n  const funnelProps: Record<string, string | number | boolean | undefined> = context.funnelInteractionId\n    ? {\n        [DATA_ATTR_FUNNEL_INTERACTION_ID]: context.funnelInteractionId,\n      }\n    : {};\n\n  return { funnelProps, ...context };\n};\n"]}