@cloudscape-design/components 3.0.310 → 3.0.312

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

@@ -8,11 +8,11 @@ import { useUniqueId } from '../../hooks/use-unique-id';
 import { useVisualRefresh } from '../../hooks/use-visual-mode';
 import { PACKAGE_VERSION } from '../../environment';
 import { FunnelMetrics } from '../';
-import { getFunnelNameSelector, getSubStepAllSelector, getSubStepNameSelector, getSubStepSelector } from '../selectors';
+import { DATA_ATTR_FUNNEL_STEP, getFunnelNameSelector, getSubStepAllSelector, getSubStepNameSelector, getSubStepSelector, } from '../selectors';
 export const FUNNEL_VERSION = '1.0';
 export const AnalyticsFunnel = (_a) => {
     var { children } = _a, props = __rest(_a, ["children"]);
-    const [funnelInteractionId, setFunnelInteractionId] = useState();
+    const [funnelInteractionId, setFunnelInteractionId] = useState('');
     const funnelResultRef = useRef(false);
     const isVisualRefresh = useVisualRefresh();
     // This useEffect hook is run once on component mount to initiate the funnel analytics.
@@ -37,7 +37,6 @@ export const AnalyticsFunnel = (_a) => {
         });
         setFunnelInteractionId(funnelInteractionId);
         return () => {
-            FunnelMetrics.funnelComplete({ funnelInteractionId });
             if (funnelResultRef.current === true) {
                 FunnelMetrics.funnelSuccessful({ funnelInteractionId });
             }
@@ -48,6 +47,7 @@ export const AnalyticsFunnel = (_a) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const funnelSubmit = () => {
+        FunnelMetrics.funnelComplete({ funnelInteractionId });
         funnelResultRef.current = true;
     };
     const funnelCancel = () => {
@@ -66,6 +66,7 @@ export const AnalyticsFunnel = (_a) => {
 };
 export const AnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector }) => {
     const { funnelInteractionId } = 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
     // to record the beginning of the interaction with the current step.
@@ -90,7 +91,8 @@ export const AnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector })
             }
         };
     }, [funnelInteractionId, stepNumber, stepNameSelector]);
-    return (React.createElement(FunnelStepContext.Provider, { value: { funnelInteractionId, stepNumber, stepNameSelector } }, children));
+    const contextValue = { funnelInteractionId, stepNumber, stepNameSelector, funnelStepProps };
+    return (React.createElement(FunnelStepContext.Provider, { value: contextValue }, typeof children === 'function' ? children(contextValue) : children));
 };
 export const AnalyticsFunnelSubStep = ({ children }) => {
     const { funnelInteractionId } = useFunnel();

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":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,EACL,iBAAiB,EACjB,oBAAoB,EACpB,aAAa,GAEd,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAE/D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,aAAa,EAAE,MAAM,KAAK,CAAC;AAGpC,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAExH,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC;AAOpC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAA4C,EAAE,EAAE;QAAhD,EAAE,QAAQ,OAAkC,EAA7B,KAAK,cAApB,YAAsB,CAAF;IAClD,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,EAAU,CAAC;IACzE,MAAM,eAAe,GAAG,MAAM,CAAU,KAAK,CAAC,CAAC;IAC/C,MAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAE3C,uFAAuF;IACvF,8FAA8F;IAC9F,0DAA0D;IAC1D,0EAA0E;IAC1E,EAAE;IACF,iFAAiF;IACjF,kGAAkG;IAClG,EAAE;IACF,4GAA4G;IAC5G,4CAA4C;IAC5C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,mBAAmB,GAAG,aAAa,CAAC,WAAW,CAAC;YACpD,kBAAkB,EAAE,qBAAqB,EAAE;YAC3C,mBAAmB,EAAE,KAAK,CAAC,mBAAmB;YAC9C,UAAU,EAAE,KAAK,CAAC,UAAU;YAC5B,gBAAgB,EAAE,KAAK,CAAC,gBAAgB;YACxC,gBAAgB,EAAE,eAAe;YACjC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YACzC,aAAa,EAAE,cAAc;SAC9B,CAAC,CAAC;QAEH,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;QAE5C,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,cAAc,CAAC,EAAE,mBAAmB,EAAE,CAAC,CAAC;YAEtD,IAAI,eAAe,CAAC,OAAO,KAAK,IAAI,EAAE;gBACpC,aAAa,CAAC,gBAAgB,CAAC,EAAE,mBAAmB,EAAE,CAAC,CAAC;aACzD;iBAAM;gBACL,aAAa,CAAC,eAAe,CAAC,EAAE,mBAAmB,EAAE,CAAC,CAAC;aACxD;QACH,CAAC,CAAC;QAEF,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;IACjC,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;IAClC,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAuB;QAC7C,mBAAmB;QACnB,sBAAsB;QACtB,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,mBAAmB,EAAE,KAAK,CAAC,mBAAmB;QAC9C,gBAAgB,EAAE,KAAK,CAAC,gBAAgB;QACxC,YAAY;QACZ,YAAY;KACb,CAAC;IAEF,OAAO,oBAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,kBAAkB,IAAG,QAAQ,CAA0B,CAAC;AAChG,CAAC,CAAC;AAOF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,gBAAgB,EAA4B,EAAE,EAAE;IAC1G,MAAM,EAAE,mBAAmB,EAAE,GAAG,SAAS,EAAE,CAAC;IAE5C,8FAA8F;IAC9F,gHAAgH;IAChH,oEAAoE;IACpE,8HAA8H;IAC9H,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,mBAAmB,EAAE;YACvB,aAAa,CAAC,eAAe,CAAC;gBAC5B,mBAAmB;gBACnB,UAAU;gBACV,gBAAgB;gBAChB,kBAAkB,EAAE,qBAAqB,EAAE;aAC5C,CAAC,CAAC;SACJ;QAED,OAAO,GAAG,EAAE;YACV,IAAI,mBAAmB,EAAE;gBACvB,aAAa,CAAC,kBAAkB,CAAC;oBAC/B,mBAAmB;oBACnB,UAAU;oBACV,gBAAgB;oBAChB,kBAAkB,EAAE,qBAAqB,EAAE;iBAC5C,CAAC,CAAC;aACJ;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,mBAAmB,EAAE,UAAU,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAExD,OAAO,CACL,oBAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,mBAAmB,EAAE,UAAU,EAAE,gBAAgB,EAAE,IACrF,QAAQ,CACkB,CAC9B,CAAC;AACJ,CAAC,CAAC;AAMF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EAAE,QAAQ,EAA+B,EAAE,EAAE;IAClF,MAAM,EAAE,mBAAmB,EAAE,GAAG,SAAS,EAAE,CAAC;IAC5C,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,aAAa,EAAE,CAAC;IAEzD,MAAM,SAAS,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IACzC,MAAM,eAAe,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACtD,MAAM,mBAAmB,GAAG,sBAAsB,CAAC,SAAS,CAAC,CAAC;IAE9D,OAAO,CACL,oBAAC,oBAAoB,CAAC,QAAQ,IAC5B,KAAK,EAAE;YACL,mBAAmB;YACnB,UAAU;YACV,gBAAgB;YAChB,eAAe;YACf,mBAAmB;YACnB,SAAS;SACV,IAEA,QAAQ,CACqB,CACjC,CAAC;AACJ,CAAC,CAAC","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} 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 { getFunnelNameSelector, getSubStepAllSelector, getSubStepNameSelector, getSubStepSelector } 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 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      FunnelMetrics.funnelComplete({ funnelInteractionId });\n\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    funnelResultRef.current = true;\n  };\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  };\n\n  return <FunnelContext.Provider value={funnelContextValue}>{children}</FunnelContext.Provider>;\n};\n\ntype AnalyticsFunnelStepProps = { children?: React.ReactNode } & Pick<\n  FunnelStepProps,\n  'stepNumber' | 'stepNameSelector'\n>;\n\nexport const AnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector }: AnalyticsFunnelStepProps) => {\n  const { funnelInteractionId } = useFunnel();\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    if (funnelInteractionId) {\n      FunnelMetrics.funnelStepStart({\n        funnelInteractionId,\n        stepNumber,\n        stepNameSelector,\n        subStepAllSelector: getSubStepAllSelector(),\n      });\n    }\n\n    return () => {\n      if (funnelInteractionId) {\n        FunnelMetrics.funnelStepComplete({\n          funnelInteractionId,\n          stepNumber,\n          stepNameSelector,\n          subStepAllSelector: getSubStepAllSelector(),\n        });\n      }\n    };\n  }, [funnelInteractionId, stepNumber, stepNameSelector]);\n\n  return (\n    <FunnelStepContext.Provider value={{ funnelInteractionId, stepNumber, stepNameSelector }}>\n      {children}\n    </FunnelStepContext.Provider>\n  );\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} 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  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 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 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  };\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    if (funnelInteractionId) {\n      FunnelMetrics.funnelStepStart({\n        funnelInteractionId,\n        stepNumber,\n        stepNameSelector,\n        subStepAllSelector: getSubStepAllSelector(),\n      });\n    }\n\n    return () => {\n      if (funnelInteractionId) {\n        FunnelMetrics.funnelStepComplete({\n          funnelInteractionId,\n          stepNumber,\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"]}

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

@@ -14,12 +14,14 @@ export interface FunnelContextValue extends BaseContextProps {
 export interface FunnelStepContextValue extends BaseContextProps {
     stepNameSelector: string;
     stepNumber: number;
+    funnelStepProps?: Record<string, string | number | boolean | undefined>;
 }
 export interface FunnelSubStepContextValue extends FunnelStepContextValue {
     subStepId: string;
     subStepSelector: string;
     subStepNameSelector: string;
     stepNumber: number;
+    funnelSubStepProps?: Record<string, string | number | boolean | undefined>;
 }
 export declare const FunnelContext: import("react").Context<FunnelContextValue>;
 export declare const FunnelStepContext: import("react").Context<FunnelStepContextValue>;

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;CAC/D;AAED,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;IAC9D,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;CACpB;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;CACpB;AAED,eAAO,MAAM,aAAa,6CAQxB,CAAC;AAEH,eAAO,MAAM,iBAAiB,iDAI5B,CAAC;AAEH,eAAO,MAAM,oBAAoB,oDAO/B,CAAC"}
+{"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;CAC/D;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;AAED,eAAO,MAAM,aAAa,6CAQxB,CAAC;AAEH,eAAO,MAAM,iBAAiB,iDAK5B,CAAC;AAEH,eAAO,MAAM,oBAAoB,oDAQ/B,CAAC"}

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

@@ -14,6 +14,7 @@ export const FunnelStepContext = createContext({
     funnelInteractionId: undefined,
     stepNameSelector: '',
     stepNumber: 0,
+    funnelStepProps: {},
 });
 export const FunnelSubStepContext = createContext({
     funnelInteractionId: undefined,
@@ -22,5 +23,6 @@ export const FunnelSubStepContext = createContext({
     stepNameSelector: '',
     subStepSelector: '',
     subStepNameSelector: '',
+    funnelStepProps: {},
 });
 //# sourceMappingURL=analytics-context.js.map

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;AA4BtC,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;CACvB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAyB;IACrE,mBAAmB,EAAE,SAAS;IAC9B,gBAAgB,EAAE,EAAE;IACpB,UAAU,EAAE,CAAC;CACd,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;CACxB,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}\n\nexport interface FunnelStepContextValue extends BaseContextProps {\n  stepNameSelector: string;\n  stepNumber: number;\n}\n\nexport interface FunnelSubStepContextValue extends FunnelStepContextValue {\n  subStepId: string;\n  subStepSelector: string;\n  subStepNameSelector: string;\n  stepNumber: number;\n}\n\nexport const FunnelContext = createContext<FunnelContextValue>({\n  funnelInteractionId: undefined,\n  setFunnelInteractionId: () => {},\n  funnelType: 'single-page',\n  optionalStepNumbers: [],\n  totalFunnelSteps: 0,\n  funnelSubmit: () => {},\n  funnelCancel: () => {},\n});\n\nexport const FunnelStepContext = createContext<FunnelStepContextValue>({\n  funnelInteractionId: undefined,\n  stepNameSelector: '',\n  stepNumber: 0,\n});\n\nexport const FunnelSubStepContext = createContext<FunnelSubStepContextValue>({\n  funnelInteractionId: undefined,\n  subStepId: '',\n  stepNumber: 0,\n  stepNameSelector: '',\n  subStepSelector: '',\n  subStepNameSelector: '',\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,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AA8BtC,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;CACvB,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}\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\nexport const FunnelContext = createContext<FunnelContextValue>({\n  funnelInteractionId: undefined,\n  setFunnelInteractionId: () => {},\n  funnelType: 'single-page',\n  optionalStepNumbers: [],\n  totalFunnelSteps: 0,\n  funnelSubmit: () => {},\n  funnelCancel: () => {},\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

@@ -14,9 +14,10 @@ export declare const useFunnelSubStep: () => {
     subStepSelector: string;
     subStepNameSelector: string;
     stepNumber: number;
+    funnelSubStepProps: Record<string, any>;
     stepNameSelector: string;
+    funnelStepProps?: Record<string, string | number | boolean | undefined> | undefined;
     funnelInteractionId: string | undefined;
-    funnelSubStepProps: Record<string, any>;
     subStepRef: import("react").MutableRefObject<HTMLDivElement | null>;
 };
 /**
@@ -27,12 +28,7 @@ export declare const useFunnelSubStep: () => {
  * The 'data-analytics-funnel-step' property of funnelStepProps is used to track the index of the current step in the funnel.
  * The context contains additional properties of the FunnelStep.
  */
-export declare const useFunnelStep: () => {
-    stepNameSelector: string;
-    stepNumber: number;
-    funnelInteractionId: string | undefined;
-    funnelStepProps: Record<string, string | number | boolean | undefined>;
-};
+export declare const useFunnelStep: () => import("../context/analytics-context").FunnelStepContextValue;
 /**
  * Custom React Hook to manage and interact with Funnel.
  * This hook will provide necessary properties required to track

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":";AAaA;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;CA6C5B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa;;;;;CASzB,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;;;;;;;;;;CA6C5B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,qEAGzB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,SAAS;;;;;;;;;CASrB,CAAC"}

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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import { useContext, useRef } from 'react';
 import { FunnelContext, FunnelStepContext, FunnelSubStepContext } from '../context/analytics-context';
-import { DATA_ATTR_FUNNEL_INTERACTION_ID, DATA_ATTR_FUNNEL_STEP, DATA_ATTR_FUNNEL_SUBSTEP, getSubStepAllSelector, } from '../selectors';
+import { DATA_ATTR_FUNNEL_INTERACTION_ID, DATA_ATTR_FUNNEL_SUBSTEP, getSubStepAllSelector } from '../selectors';
 import { FunnelMetrics } from '../';
 /**
  * Custom React Hook to manage and interact with FunnelSubStep.
@@ -63,12 +63,7 @@ export const useFunnelSubStep = () => {
  */
 export const useFunnelStep = () => {
     const context = useContext(FunnelStepContext);
-    const funnelStepProps = context.funnelInteractionId
-        ? {
-            [DATA_ATTR_FUNNEL_STEP]: context.stepNumber,
-        }
-        : {};
-    return Object.assign({ funnelStepProps }, context);
+    return context;
 };
 /**
  * Custom React Hook to manage and interact with Funnel.

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,EACL,+BAA+B,EAC/B,qBAAqB,EACrB,wBAAwB,EACxB,qBAAqB,GACtB,MAAM,cAAc,CAAC;AACtB,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,MAAM,eAAe,GAA0D,OAAO,CAAC,mBAAmB;QACxG,CAAC,CAAC;YACE,CAAC,qBAAqB,CAAC,EAAE,OAAO,CAAC,UAAU;SAC5C;QACH,CAAC,CAAC,EAAE,CAAC;IAEP,uBAAS,eAAe,IAAK,OAAO,EAAG;AACzC,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 {\n  DATA_ATTR_FUNNEL_INTERACTION_ID,\n  DATA_ATTR_FUNNEL_STEP,\n  DATA_ATTR_FUNNEL_SUBSTEP,\n  getSubStepAllSelector,\n} 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  const funnelStepProps: Record<string, string | number | boolean | undefined> = context.funnelInteractionId\n    ? {\n        [DATA_ATTR_FUNNEL_STEP]: context.stepNumber,\n      }\n    : {};\n\n  return { funnelStepProps, ...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,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"]}