@cloudscape-design/components 3.0.385 → 3.0.386
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/internal/analytics/components/analytics-funnel.d.ts +3 -2
- package/internal/analytics/components/analytics-funnel.d.ts.map +1 -1
- package/internal/analytics/components/analytics-funnel.js +21 -12
- package/internal/analytics/components/analytics-funnel.js.map +1 -1
- package/internal/analytics/selectors.d.ts.map +1 -1
- package/internal/analytics/selectors.js +1 -1
- package/internal/analytics/selectors.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/wizard/analytics.d.ts +8 -0
- package/wizard/analytics.d.ts.map +1 -0
- package/wizard/analytics.js +40 -0
- package/wizard/analytics.js.map +1 -0
- package/wizard/index.d.ts.map +1 -1
- package/wizard/index.js +2 -1
- package/wizard/index.js.map +1 -1
- package/wizard/internal.d.ts.map +1 -1
- package/wizard/internal.js +2 -37
- package/wizard/internal.js.map +1 -1
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { FunnelStepContextValue } from '../context/analytics-context';
|
|
3
|
-
import { FunnelProps, FunnelStepProps } from '../interfaces';
|
|
4
|
-
export declare const FUNNEL_VERSION = "1.
|
|
3
|
+
import { FunnelProps, FunnelStepProps, StepConfiguration } from '../interfaces';
|
|
4
|
+
export declare const FUNNEL_VERSION = "1.2";
|
|
5
5
|
type AnalyticsFunnelProps = {
|
|
6
6
|
children?: React.ReactNode;
|
|
7
|
+
stepConfiguration?: StepConfiguration[];
|
|
7
8
|
} & Pick<FunnelProps, 'funnelType' | 'optionalStepNumbers' | 'totalFunnelSteps'>;
|
|
8
9
|
export declare const AnalyticsFunnel: (props: AnalyticsFunnelProps) => JSX.Element;
|
|
9
10
|
type AnalyticsFunnelStepProps = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"analytics-funnel.d.ts","sourceRoot":"lib/default/","sources":["internal/analytics/components/analytics-funnel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,EAKL,sBAAsB,EAGvB,MAAM,8BAA8B,CAAC;AAQtC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAwB,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"analytics-funnel.d.ts","sourceRoot":"lib/default/","sources":["internal/analytics/components/analytics-funnel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,EAKL,sBAAsB,EAGvB,MAAM,8BAA8B,CAAC;AAQtC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,iBAAiB,EAAwB,MAAM,eAAe,CAAC;AAYtG,eAAO,MAAM,cAAc,QAAQ,CAAC;AAEpC,KAAK,oBAAoB,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,CAAA;CAAE,GAAG,IAAI,CACxG,WAAW,EACX,YAAY,GAAG,qBAAqB,GAAG,kBAAkB,CAC1D,CAAC;AAEF,eAAO,MAAM,eAAe,UAAW,oBAAoB,gBAa1D,CAAC;AAgJF,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,UAAW,wBAAwB,gBAMlE,CAAC;AAyJF,UAAU,2BAA2B;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,sBAAsB,iBAAkB,2BAA2B,gBAuF/E,CAAC"}
|
|
@@ -10,7 +10,7 @@ import { PACKAGE_VERSION } from '../../environment';
|
|
|
10
10
|
import { FunnelMetrics } from '../index';
|
|
11
11
|
import { DATA_ATTR_FUNNEL_STEP, getFunnelNameSelector, getNameFromSelector, getSubStepAllSelector, getSubStepNameSelector, getSubStepSelector, } from '../selectors';
|
|
12
12
|
import { useDebounceCallback } from '../../hooks/use-debounce-callback';
|
|
13
|
-
export const FUNNEL_VERSION = '1.
|
|
13
|
+
export const FUNNEL_VERSION = '1.2';
|
|
14
14
|
export const AnalyticsFunnel = (props) => {
|
|
15
15
|
const { isInFunnel } = useFunnel();
|
|
16
16
|
/*
|
|
@@ -25,7 +25,7 @@ export const AnalyticsFunnel = (props) => {
|
|
|
25
25
|
return React.createElement(InnerAnalyticsFunnel, Object.assign({}, props));
|
|
26
26
|
};
|
|
27
27
|
const InnerAnalyticsFunnel = (_a) => {
|
|
28
|
-
var { children } = _a, props = __rest(_a, ["children"]);
|
|
28
|
+
var { children, stepConfiguration } = _a, props = __rest(_a, ["children", "stepConfiguration"]);
|
|
29
29
|
const [funnelInteractionId, setFunnelInteractionId] = useState('');
|
|
30
30
|
const [submissionAttempt, setSubmissionAttempt] = useState(0);
|
|
31
31
|
const isVisualRefresh = useVisualRefresh();
|
|
@@ -51,11 +51,15 @@ const InnerAnalyticsFunnel = (_a) => {
|
|
|
51
51
|
this current funnel component should do nothing.
|
|
52
52
|
*/
|
|
53
53
|
const handle = setTimeout(() => {
|
|
54
|
+
var _a;
|
|
54
55
|
if (props.funnelType === 'single-page' && wizardCount.current > 0) {
|
|
55
56
|
return;
|
|
56
57
|
}
|
|
57
58
|
// Reset the state, in case the component was re-mounted.
|
|
58
59
|
funnelState.current = 'default';
|
|
60
|
+
const singleStepFlowStepConfiguration = [
|
|
61
|
+
{ number: 1, isOptional: false, name: (_a = getNameFromSelector(getFunnelNameSelector())) !== null && _a !== void 0 ? _a : '' },
|
|
62
|
+
];
|
|
59
63
|
const funnelInteractionId = FunnelMetrics.funnelStart({
|
|
60
64
|
funnelNameSelector: getFunnelNameSelector(),
|
|
61
65
|
optionalStepNumbers: props.optionalStepNumbers,
|
|
@@ -64,6 +68,7 @@ const InnerAnalyticsFunnel = (_a) => {
|
|
|
64
68
|
componentVersion: PACKAGE_VERSION,
|
|
65
69
|
theme: isVisualRefresh ? 'vr' : 'classic',
|
|
66
70
|
funnelVersion: FUNNEL_VERSION,
|
|
71
|
+
stepConfiguration: stepConfiguration !== null && stepConfiguration !== void 0 ? stepConfiguration : singleStepFlowStepConfiguration,
|
|
67
72
|
});
|
|
68
73
|
setFunnelInteractionId(funnelInteractionId);
|
|
69
74
|
}, 1);
|
|
@@ -153,6 +158,18 @@ export const AnalyticsFunnelStep = (props) => {
|
|
|
153
158
|
*/
|
|
154
159
|
return React.createElement(InnerAnalyticsFunnelStep, Object.assign({}, props, { key: props.stepNumber }));
|
|
155
160
|
};
|
|
161
|
+
function getSubStepConfiguration() {
|
|
162
|
+
const subSteps = Array.from(document.querySelectorAll(getSubStepAllSelector()));
|
|
163
|
+
const subStepConfiguration = subSteps.map((substep, index) => {
|
|
164
|
+
var _a, _b;
|
|
165
|
+
const name = (_b = (_a = substep.querySelector(getSubStepNameSelector())) === null || _a === void 0 ? void 0 : _a.innerText.trim()) !== null && _b !== void 0 ? _b : '';
|
|
166
|
+
return {
|
|
167
|
+
name,
|
|
168
|
+
number: index + 1,
|
|
169
|
+
};
|
|
170
|
+
});
|
|
171
|
+
return subStepConfiguration;
|
|
172
|
+
}
|
|
156
173
|
function useStepChangeListener(handler) {
|
|
157
174
|
/*
|
|
158
175
|
Chosen so that it's hopefully shorter than a user interaction, but gives enough time for the
|
|
@@ -175,16 +192,7 @@ function useStepChangeListener(handler) {
|
|
|
175
192
|
if (!listenForSubStepChanges.current) {
|
|
176
193
|
return;
|
|
177
194
|
}
|
|
178
|
-
|
|
179
|
-
const subStepConfiguration = subSteps.map((substep, index) => {
|
|
180
|
-
var _a, _b;
|
|
181
|
-
const name = (_b = (_a = substep.querySelector(getSubStepNameSelector())) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : '';
|
|
182
|
-
return {
|
|
183
|
-
name,
|
|
184
|
-
number: index + 1,
|
|
185
|
-
};
|
|
186
|
-
});
|
|
187
|
-
handler(subStepConfiguration);
|
|
195
|
+
handler(getSubStepConfiguration());
|
|
188
196
|
}, SUBSTEP_CHANGE_DEBOUNCE);
|
|
189
197
|
return stepChangeCallback;
|
|
190
198
|
}
|
|
@@ -237,6 +245,7 @@ const InnerAnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector }) =>
|
|
|
237
245
|
stepNameSelector,
|
|
238
246
|
subStepAllSelector: getSubStepAllSelector(),
|
|
239
247
|
totalSubSteps: subStepCount.current,
|
|
248
|
+
subStepConfiguration: getSubStepConfiguration(),
|
|
240
249
|
});
|
|
241
250
|
}
|
|
242
251
|
return () => {
|
|
@@ -1 +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, { useContext, useEffect, useRef, useState } from 'react';\n\nimport {\n FunnelStepContext,\n FunnelSubStepContext,\n FunnelContext,\n FunnelContextValue,\n FunnelStepContextValue,\n FunnelState,\n FunnelSubStepContextValue,\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 '../index';\nimport { FunnelProps, FunnelStepProps, SubStepConfiguration } from '../interfaces';\n\nimport {\n DATA_ATTR_FUNNEL_STEP,\n getFunnelNameSelector,\n getNameFromSelector,\n getSubStepAllSelector,\n getSubStepNameSelector,\n getSubStepSelector,\n} from '../selectors';\nimport { useDebounceCallback } from '../../hooks/use-debounce-callback';\n\nexport const FUNNEL_VERSION = '1.1';\n\ntype AnalyticsFunnelProps = { children?: React.ReactNode } & Pick<\n FunnelProps,\n 'funnelType' | 'optionalStepNumbers' | 'totalFunnelSteps'\n>;\n\nexport const AnalyticsFunnel = (props: AnalyticsFunnelProps) => {\n const { isInFunnel } = useFunnel();\n /*\n If the current funnel component is a Form (i.e. single-page funnel), it should\n defer its funnel-handling to a parent Form element, if present.\n Wizards (i.e. multi-page funnels) always take highest precedence for handling funnels,\n and do not defer to any other element.\n */\n if (isInFunnel && props.funnelType === 'single-page') {\n return <>{props.children}</>;\n }\n\n return <InnerAnalyticsFunnel {...props} />;\n};\n\nconst InnerAnalyticsFunnel = ({ 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 const wizardCount = useRef<number>(0);\n const latestFocusCleanupFunction = useRef<undefined | (() => void)>(undefined);\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 /*\n We run this effect with a delay, in order to detect whether this funnel contains a Wizard.\n If it does contain a Wizard, that Wizard should take precedence for handling the funnel, and\n this current funnel component should do nothing.\n */\n const handle = setTimeout(() => {\n if (props.funnelType === 'single-page' && wizardCount.current > 0) {\n return;\n }\n\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 }, 1);\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 clearTimeout(handle);\n if (props.funnelType === 'single-page' && wizardCount.current > 0) {\n return;\n }\n\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 latestFocusCleanupFunction,\n isInFunnel: true,\n wizardCount,\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 = (props: AnalyticsFunnelStepProps) => {\n /*\n This wrapper is used to apply a `key` property to the actual (inner) AnalyticsFunnelStep\n element. This allows us to keep the state and effects separate per step.\n */\n return <InnerAnalyticsFunnelStep {...props} key={props.stepNumber} />;\n};\n\nfunction useStepChangeListener(handler: (stepConfiguration: SubStepConfiguration[]) => void) {\n /*\n Chosen so that it's hopefully shorter than a user interaction, but gives enough time for the\n amount of containers to stabilise.\n */\n const SUBSTEP_CHANGE_DEBOUNCE = 50;\n\n const listenForSubStepChanges = useRef(false);\n useEffect(() => {\n // We prevent emitting the event on the first render.\n const handle = setTimeout(() => (listenForSubStepChanges.current = true), SUBSTEP_CHANGE_DEBOUNCE);\n\n return () => {\n clearTimeout(handle);\n listenForSubStepChanges.current = false;\n };\n }, []);\n\n /* We debounce this handler, so that multiple containers can change at once without causing \n too many events. */\n const stepChangeCallback = useDebounceCallback(() => {\n // We don't want to emit the event after the component has been unmounted.\n if (!listenForSubStepChanges.current) {\n return;\n }\n\n const subSteps = Array.from(document.querySelectorAll<HTMLElement>(getSubStepAllSelector()));\n\n const subStepConfiguration = subSteps.map((substep, index) => {\n const name = substep.querySelector(getSubStepNameSelector())?.textContent ?? '';\n return {\n name,\n number: index + 1,\n };\n });\n\n handler(subStepConfiguration);\n }, SUBSTEP_CHANGE_DEBOUNCE);\n\n return stepChangeCallback;\n}\n\nconst InnerAnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector }: AnalyticsFunnelStepProps) => {\n const { funnelInteractionId, funnelState, funnelType } = useFunnel();\n const parentStep = useFunnelStep();\n const parentStepExists = parentStep.isInStep;\n const parentStepFunnelInteractionId = parentStep.funnelInteractionId;\n\n const funnelStepProps = { [DATA_ATTR_FUNNEL_STEP]: stepNumber };\n\n const subStepCount = useRef<number>(0);\n\n const onStepChange = useStepChangeListener(subStepConfiguration => {\n if (!funnelInteractionId) {\n return;\n }\n const stepName = getNameFromSelector(stepNameSelector) ?? '';\n\n FunnelMetrics.funnelStepChange({\n funnelInteractionId,\n stepNumber,\n stepName,\n stepNameSelector,\n subStepAllSelector: getSubStepAllSelector(),\n totalSubSteps: subStepCount.current,\n subStepConfiguration,\n });\n });\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 // This step is not inside an active funnel.\n return;\n }\n if (parentStepExists && parentStepFunnelInteractionId) {\n /*\n This step is inside another step, which already reports events as\n part of an active funnel (i.e. that step is not a parent of a Wizard).\n Thus, this current step does not need to report any events.\n */\n return;\n }\n\n const stepName = getNameFromSelector(stepNameSelector);\n\n if (funnelState.current === 'default') {\n FunnelMetrics.funnelStepStart({\n funnelInteractionId,\n stepNumber,\n stepName,\n stepNameSelector,\n subStepAllSelector: getSubStepAllSelector(),\n totalSubSteps: subStepCount.current,\n });\n }\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n if (funnelState.current !== 'cancelled') {\n FunnelMetrics.funnelStepComplete({\n funnelInteractionId,\n stepNumber,\n stepName,\n stepNameSelector,\n subStepAllSelector: getSubStepAllSelector(),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n totalSubSteps: subStepCount.current,\n });\n }\n };\n }, [\n funnelInteractionId,\n stepNumber,\n stepNameSelector,\n funnelState,\n parentStepExists,\n funnelType,\n parentStepFunnelInteractionId,\n ]);\n\n const contextValue: FunnelStepContextValue = {\n stepNumber,\n stepNameSelector,\n funnelStepProps,\n subStepCount,\n isInStep: true,\n funnelInteractionId,\n onStepChange,\n };\n\n /*\n If this step is inside another step which already reports events as part of an active\n funnel (i.e. that step is not a parent of a Wizard), the current step becomes invisible\n in the hierarchy by passing the context of its parent through.\n */\n const effectiveContextValue = parentStepExists && parentStepFunnelInteractionId ? parentStep : contextValue;\n\n return (\n <FunnelStepContext.Provider value={effectiveContextValue}>\n {typeof children === 'function' ? children(effectiveContextValue) : children}\n </FunnelStepContext.Provider>\n );\n};\ninterface AnalyticsFunnelSubStepProps {\n children?: React.ReactNode;\n}\n\nexport const AnalyticsFunnelSubStep = ({ children }: AnalyticsFunnelSubStepProps) => {\n const subStepId = useUniqueId('substep');\n const subStepSelector = getSubStepSelector(subStepId);\n const subStepNameSelector = getSubStepNameSelector(subStepId);\n const subStepRef = useRef<HTMLDivElement | null>(null);\n const { subStepCount, onStepChange } = useFunnelStep();\n const mousePressed = useRef<boolean>(false);\n const isFocusedSubStep = useRef<boolean>(false);\n const focusCleanupFunction = useRef<undefined | (() => void)>(undefined);\n const { funnelState, funnelInteractionId } = useFunnel();\n const { stepNumber, stepNameSelector } = useFunnelStep();\n\n const newContext: FunnelSubStepContextValue = {\n subStepSelector,\n subStepNameSelector,\n subStepId,\n subStepRef,\n mousePressed,\n isFocusedSubStep,\n focusCleanupFunction,\n isNestedSubStep: false,\n };\n\n const inheritedContext = { ...useContext(FunnelSubStepContext), isNestedSubStep: true };\n\n const isNested = Boolean(inheritedContext.subStepId);\n\n useEffect(() => {\n if (!isNested) {\n subStepCount.current++;\n onStepChange();\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n subStepCount.current--;\n onStepChange();\n };\n }\n }, [isNested, subStepCount, onStepChange]);\n\n const context = isNested ? inheritedContext : newContext;\n\n useEffect(() => {\n const onMouseDown = () => (mousePressed.current = true);\n\n const onMouseUp = async () => {\n mousePressed.current = false;\n\n if (!isFocusedSubStep.current) {\n return;\n }\n\n /*\n Some mouse events result in an element being focused. However,\n this happens only _after_ the onMouseUp event. We yield the\n event loop here, so that `document.activeElement` has the\n correct new value. \n */\n await new Promise(r => setTimeout(r, 1));\n\n if (!subStepRef.current || !subStepRef.current.contains(document.activeElement)) {\n isFocusedSubStep.current = false;\n\n /*\n Run this substep's own focus cleanup function if another substep\n hasn't already done it for us.\n */\n focusCleanupFunction.current?.();\n }\n };\n window.addEventListener('mousedown', onMouseDown);\n window.addEventListener('mouseup', onMouseUp);\n return () => {\n window.removeEventListener('mousedown', onMouseDown);\n window.removeEventListener('mouseup', onMouseUp);\n };\n }, [\n funnelInteractionId,\n funnelState,\n stepNameSelector,\n stepNumber,\n subStepNameSelector,\n subStepSelector,\n focusCleanupFunction,\n ]);\n\n return <FunnelSubStepContext.Provider value={context}>{children}</FunnelSubStepContext.Provider>;\n};\n"]}
|
|
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, { useContext, useEffect, useRef, useState } from 'react';\n\nimport {\n FunnelStepContext,\n FunnelSubStepContext,\n FunnelContext,\n FunnelContextValue,\n FunnelStepContextValue,\n FunnelState,\n FunnelSubStepContextValue,\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 '../index';\nimport { FunnelProps, FunnelStepProps, StepConfiguration, SubStepConfiguration } from '../interfaces';\n\nimport {\n DATA_ATTR_FUNNEL_STEP,\n getFunnelNameSelector,\n getNameFromSelector,\n getSubStepAllSelector,\n getSubStepNameSelector,\n getSubStepSelector,\n} from '../selectors';\nimport { useDebounceCallback } from '../../hooks/use-debounce-callback';\n\nexport const FUNNEL_VERSION = '1.2';\n\ntype AnalyticsFunnelProps = { children?: React.ReactNode; stepConfiguration?: StepConfiguration[] } & Pick<\n FunnelProps,\n 'funnelType' | 'optionalStepNumbers' | 'totalFunnelSteps'\n>;\n\nexport const AnalyticsFunnel = (props: AnalyticsFunnelProps) => {\n const { isInFunnel } = useFunnel();\n /*\n If the current funnel component is a Form (i.e. single-page funnel), it should\n defer its funnel-handling to a parent Form element, if present.\n Wizards (i.e. multi-page funnels) always take highest precedence for handling funnels,\n and do not defer to any other element.\n */\n if (isInFunnel && props.funnelType === 'single-page') {\n return <>{props.children}</>;\n }\n\n return <InnerAnalyticsFunnel {...props} />;\n};\n\nconst InnerAnalyticsFunnel = ({ children, stepConfiguration, ...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 const wizardCount = useRef<number>(0);\n const latestFocusCleanupFunction = useRef<undefined | (() => void)>(undefined);\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 /*\n We run this effect with a delay, in order to detect whether this funnel contains a Wizard.\n If it does contain a Wizard, that Wizard should take precedence for handling the funnel, and\n this current funnel component should do nothing.\n */\n const handle = setTimeout(() => {\n if (props.funnelType === 'single-page' && wizardCount.current > 0) {\n return;\n }\n\n // Reset the state, in case the component was re-mounted.\n funnelState.current = 'default';\n\n const singleStepFlowStepConfiguration = [\n { number: 1, isOptional: false, name: getNameFromSelector(getFunnelNameSelector()) ?? '' },\n ];\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 stepConfiguration: stepConfiguration ?? singleStepFlowStepConfiguration,\n });\n\n setFunnelInteractionId(funnelInteractionId);\n }, 1);\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 clearTimeout(handle);\n if (props.funnelType === 'single-page' && wizardCount.current > 0) {\n return;\n }\n\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 latestFocusCleanupFunction,\n isInFunnel: true,\n wizardCount,\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 = (props: AnalyticsFunnelStepProps) => {\n /*\n This wrapper is used to apply a `key` property to the actual (inner) AnalyticsFunnelStep\n element. This allows us to keep the state and effects separate per step.\n */\n return <InnerAnalyticsFunnelStep {...props} key={props.stepNumber} />;\n};\n\nfunction getSubStepConfiguration() {\n const subSteps = Array.from(document.querySelectorAll<HTMLElement>(getSubStepAllSelector()));\n\n const subStepConfiguration = subSteps.map((substep, index) => {\n const name = substep.querySelector<HTMLElement>(getSubStepNameSelector())?.innerText.trim() ?? '';\n return {\n name,\n number: index + 1,\n };\n });\n return subStepConfiguration;\n}\n\nfunction useStepChangeListener(handler: (stepConfiguration: SubStepConfiguration[]) => void) {\n /*\n Chosen so that it's hopefully shorter than a user interaction, but gives enough time for the\n amount of containers to stabilise.\n */\n const SUBSTEP_CHANGE_DEBOUNCE = 50;\n\n const listenForSubStepChanges = useRef(false);\n useEffect(() => {\n // We prevent emitting the event on the first render.\n const handle = setTimeout(() => (listenForSubStepChanges.current = true), SUBSTEP_CHANGE_DEBOUNCE);\n\n return () => {\n clearTimeout(handle);\n listenForSubStepChanges.current = false;\n };\n }, []);\n\n /* We debounce this handler, so that multiple containers can change at once without causing \n too many events. */\n const stepChangeCallback = useDebounceCallback(() => {\n // We don't want to emit the event after the component has been unmounted.\n if (!listenForSubStepChanges.current) {\n return;\n }\n\n handler(getSubStepConfiguration());\n }, SUBSTEP_CHANGE_DEBOUNCE);\n\n return stepChangeCallback;\n}\n\nconst InnerAnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector }: AnalyticsFunnelStepProps) => {\n const { funnelInteractionId, funnelState, funnelType } = useFunnel();\n const parentStep = useFunnelStep();\n const parentStepExists = parentStep.isInStep;\n const parentStepFunnelInteractionId = parentStep.funnelInteractionId;\n\n const funnelStepProps = { [DATA_ATTR_FUNNEL_STEP]: stepNumber };\n\n const subStepCount = useRef<number>(0);\n\n const onStepChange = useStepChangeListener(subStepConfiguration => {\n if (!funnelInteractionId) {\n return;\n }\n const stepName = getNameFromSelector(stepNameSelector) ?? '';\n\n FunnelMetrics.funnelStepChange({\n funnelInteractionId,\n stepNumber,\n stepName,\n stepNameSelector,\n subStepAllSelector: getSubStepAllSelector(),\n totalSubSteps: subStepCount.current,\n subStepConfiguration,\n });\n });\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 // This step is not inside an active funnel.\n return;\n }\n if (parentStepExists && parentStepFunnelInteractionId) {\n /*\n This step is inside another step, which already reports events as\n part of an active funnel (i.e. that step is not a parent of a Wizard).\n Thus, this current step does not need to report any events.\n */\n return;\n }\n\n const stepName = getNameFromSelector(stepNameSelector);\n\n if (funnelState.current === 'default') {\n FunnelMetrics.funnelStepStart({\n funnelInteractionId,\n stepNumber,\n stepName,\n stepNameSelector,\n subStepAllSelector: getSubStepAllSelector(),\n totalSubSteps: subStepCount.current,\n subStepConfiguration: getSubStepConfiguration(),\n });\n }\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n if (funnelState.current !== 'cancelled') {\n FunnelMetrics.funnelStepComplete({\n funnelInteractionId,\n stepNumber,\n stepName,\n stepNameSelector,\n subStepAllSelector: getSubStepAllSelector(),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n totalSubSteps: subStepCount.current,\n });\n }\n };\n }, [\n funnelInteractionId,\n stepNumber,\n stepNameSelector,\n funnelState,\n parentStepExists,\n funnelType,\n parentStepFunnelInteractionId,\n ]);\n\n const contextValue: FunnelStepContextValue = {\n stepNumber,\n stepNameSelector,\n funnelStepProps,\n subStepCount,\n isInStep: true,\n funnelInteractionId,\n onStepChange,\n };\n\n /*\n If this step is inside another step which already reports events as part of an active\n funnel (i.e. that step is not a parent of a Wizard), the current step becomes invisible\n in the hierarchy by passing the context of its parent through.\n */\n const effectiveContextValue = parentStepExists && parentStepFunnelInteractionId ? parentStep : contextValue;\n\n return (\n <FunnelStepContext.Provider value={effectiveContextValue}>\n {typeof children === 'function' ? children(effectiveContextValue) : children}\n </FunnelStepContext.Provider>\n );\n};\ninterface AnalyticsFunnelSubStepProps {\n children?: React.ReactNode;\n}\n\nexport const AnalyticsFunnelSubStep = ({ children }: AnalyticsFunnelSubStepProps) => {\n const subStepId = useUniqueId('substep');\n const subStepSelector = getSubStepSelector(subStepId);\n const subStepNameSelector = getSubStepNameSelector(subStepId);\n const subStepRef = useRef<HTMLDivElement | null>(null);\n const { subStepCount, onStepChange } = useFunnelStep();\n const mousePressed = useRef<boolean>(false);\n const isFocusedSubStep = useRef<boolean>(false);\n const focusCleanupFunction = useRef<undefined | (() => void)>(undefined);\n const { funnelState, funnelInteractionId } = useFunnel();\n const { stepNumber, stepNameSelector } = useFunnelStep();\n\n const newContext: FunnelSubStepContextValue = {\n subStepSelector,\n subStepNameSelector,\n subStepId,\n subStepRef,\n mousePressed,\n isFocusedSubStep,\n focusCleanupFunction,\n isNestedSubStep: false,\n };\n\n const inheritedContext = { ...useContext(FunnelSubStepContext), isNestedSubStep: true };\n\n const isNested = Boolean(inheritedContext.subStepId);\n\n useEffect(() => {\n if (!isNested) {\n subStepCount.current++;\n onStepChange();\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n subStepCount.current--;\n onStepChange();\n };\n }\n }, [isNested, subStepCount, onStepChange]);\n\n const context = isNested ? inheritedContext : newContext;\n\n useEffect(() => {\n const onMouseDown = () => (mousePressed.current = true);\n\n const onMouseUp = async () => {\n mousePressed.current = false;\n\n if (!isFocusedSubStep.current) {\n return;\n }\n\n /*\n Some mouse events result in an element being focused. However,\n this happens only _after_ the onMouseUp event. We yield the\n event loop here, so that `document.activeElement` has the\n correct new value. \n */\n await new Promise(r => setTimeout(r, 1));\n\n if (!subStepRef.current || !subStepRef.current.contains(document.activeElement)) {\n isFocusedSubStep.current = false;\n\n /*\n Run this substep's own focus cleanup function if another substep\n hasn't already done it for us.\n */\n focusCleanupFunction.current?.();\n }\n };\n window.addEventListener('mousedown', onMouseDown);\n window.addEventListener('mouseup', onMouseUp);\n return () => {\n window.removeEventListener('mousedown', onMouseDown);\n window.removeEventListener('mouseup', onMouseUp);\n };\n }, [\n funnelInteractionId,\n funnelState,\n stepNameSelector,\n stepNumber,\n subStepNameSelector,\n subStepSelector,\n focusCleanupFunction,\n ]);\n\n return <FunnelSubStepContext.Provider value={context}>{children}</FunnelSubStepContext.Provider>;\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selectors.d.ts","sourceRoot":"lib/default/","sources":["internal/analytics/selectors.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,0BAA0B,CAAC;AACxD,eAAO,MAAM,+BAA+B,QAAuC,CAAC;AACpF,eAAO,MAAM,oBAAoB,QAA4B,CAAC;AAC9D,eAAO,MAAM,sBAAsB,QAA8B,CAAC;AAClE,eAAO,MAAM,qBAAqB,QAA6B,CAAC;AAChE,eAAO,MAAM,wBAAwB,QAAgC,CAAC;AAEtE,eAAO,MAAM,qBAAqB,+BAA+B,CAAC;AAClE,eAAO,MAAM,qBAAqB,+BAA+B,CAAC;AAElE,eAAO,MAAM,yBAAyB,yBAAyB,CAAC;AAChE,eAAO,MAAM,4BAA4B,4BAA4B,CAAC;AAEtE,eAAO,MAAM,sBAAsB,gBAAgB,CAAC;AACpD,eAAO,MAAM,oBAAoB,cAAc,CAAC;AAChD,eAAO,MAAM,uBAAuB,iBAAiB,CAAC;AAEtD,eAAO,MAAM,qBAAqB,cAAgE,CAAC;AACnG,eAAO,MAAM,oBAAoB,QAAS,MAAM,WAAyC,CAAC;AAC1F,eAAO,MAAM,sBAAsB,UAAW,MAAM,WAA6C,CAAC;AAElG,eAAO,MAAM,qBAAqB,cAAwC,CAAC;AAC3E,eAAO,MAAM,kBAAkB,cAAe,MAAM,WAAmD,CAAC;AACxG,eAAO,MAAM,sBAAsB,eAAgB,MAAM,WAC6D,CAAC;AAEvH,eAAO,MAAM,mBAAmB,OAAQ,MAAM,GAAG,SAAS,uBAAsC,CAAC;AAEjG,eAAO,MAAM,mBAAmB,aAAc,MAAM,GAAG,SAAS,KAAG,MAAM,GAAG,
|
|
1
|
+
{"version":3,"file":"selectors.d.ts","sourceRoot":"lib/default/","sources":["internal/analytics/selectors.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,0BAA0B,CAAC;AACxD,eAAO,MAAM,+BAA+B,QAAuC,CAAC;AACpF,eAAO,MAAM,oBAAoB,QAA4B,CAAC;AAC9D,eAAO,MAAM,sBAAsB,QAA8B,CAAC;AAClE,eAAO,MAAM,qBAAqB,QAA6B,CAAC;AAChE,eAAO,MAAM,wBAAwB,QAAgC,CAAC;AAEtE,eAAO,MAAM,qBAAqB,+BAA+B,CAAC;AAClE,eAAO,MAAM,qBAAqB,+BAA+B,CAAC;AAElE,eAAO,MAAM,yBAAyB,yBAAyB,CAAC;AAChE,eAAO,MAAM,4BAA4B,4BAA4B,CAAC;AAEtE,eAAO,MAAM,sBAAsB,gBAAgB,CAAC;AACpD,eAAO,MAAM,oBAAoB,cAAc,CAAC;AAChD,eAAO,MAAM,uBAAuB,iBAAiB,CAAC;AAEtD,eAAO,MAAM,qBAAqB,cAAgE,CAAC;AACnG,eAAO,MAAM,oBAAoB,QAAS,MAAM,WAAyC,CAAC;AAC1F,eAAO,MAAM,sBAAsB,UAAW,MAAM,WAA6C,CAAC;AAElG,eAAO,MAAM,qBAAqB,cAAwC,CAAC;AAC3E,eAAO,MAAM,kBAAkB,cAAe,MAAM,WAAmD,CAAC;AACxG,eAAO,MAAM,sBAAsB,eAAgB,MAAM,WAC6D,CAAC;AAEvH,eAAO,MAAM,mBAAmB,OAAQ,MAAM,GAAG,SAAS,uBAAsC,CAAC;AAEjG,eAAO,MAAM,mBAAmB,aAAc,MAAM,GAAG,SAAS,KAAG,MAAM,GAAG,SACa,CAAC"}
|
|
@@ -20,5 +20,5 @@ export const getSubStepAllSelector = () => `[${DATA_ATTR_FUNNEL_SUBSTEP}]`;
|
|
|
20
20
|
export const getSubStepSelector = (subStepId) => `[${DATA_ATTR_FUNNEL_SUBSTEP}="${subStepId}"]`;
|
|
21
21
|
export const getSubStepNameSelector = (subStepId) => [subStepId ? getSubStepSelector(subStepId) : '', `[${DATA_ATTR_FUNNEL_KEY}="${FUNNEL_KEY_SUBSTEP_NAME}"]`].join(' ');
|
|
22
22
|
export const getFieldSlotSeletor = (id) => (id ? `[id="${id}"]` : undefined);
|
|
23
|
-
export const getNameFromSelector = (selector) => { var _a; return selector ? (_a = document.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.innerText : undefined; };
|
|
23
|
+
export const getNameFromSelector = (selector) => { var _a, _b; return selector ? (_b = (_a = document.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.innerText) === null || _b === void 0 ? void 0 : _b.trim() : undefined; };
|
|
24
24
|
//# sourceMappingURL=selectors.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selectors.js","sourceRoot":"lib/default/","sources":["internal/analytics/selectors.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,MAAM,CAAC,MAAM,gBAAgB,GAAG,uBAAuB,CAAC;AACxD,MAAM,CAAC,MAAM,+BAA+B,GAAG,GAAG,gBAAgB,iBAAiB,CAAC;AACpF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,gBAAgB,MAAM,CAAC;AAC9D,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,gBAAgB,QAAQ,CAAC;AAClE,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,gBAAgB,OAAO,CAAC;AAChE,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,gBAAgB,UAAU,CAAC;AAEtE,MAAM,CAAC,MAAM,qBAAqB,GAAG,4BAA4B,CAAC;AAClE,MAAM,CAAC,MAAM,qBAAqB,GAAG,4BAA4B,CAAC;AAElE,MAAM,CAAC,MAAM,yBAAyB,GAAG,sBAAsB,CAAC;AAChE,MAAM,CAAC,MAAM,4BAA4B,GAAG,yBAAyB,CAAC;AAEtE,MAAM,CAAC,MAAM,sBAAsB,GAAG,aAAa,CAAC;AACpD,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;AAChD,MAAM,CAAC,MAAM,uBAAuB,GAAG,cAAc,CAAC;AAEtD,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE,CAAC,IAAI,oBAAoB,KAAK,sBAAsB,IAAI,CAAC;AACnG,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,IAAI,oBAAoB,KAAK,GAAG,IAAI,CAAC;AAC1F,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,IAAI,sBAAsB,KAAK,KAAK,IAAI,CAAC;AAElG,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE,CAAC,IAAI,wBAAwB,GAAG,CAAC;AAC3E,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,SAAiB,EAAE,EAAE,CAAC,IAAI,wBAAwB,KAAK,SAAS,IAAI,CAAC;AACxG,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,SAAkB,EAAE,EAAE,CAC3D,CAAC,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,oBAAoB,KAAK,uBAAuB,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEvH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAAsB,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;AAEjG,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,QAA4B,EAAsB,EAAE,
|
|
1
|
+
{"version":3,"file":"selectors.js","sourceRoot":"lib/default/","sources":["internal/analytics/selectors.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,MAAM,CAAC,MAAM,gBAAgB,GAAG,uBAAuB,CAAC;AACxD,MAAM,CAAC,MAAM,+BAA+B,GAAG,GAAG,gBAAgB,iBAAiB,CAAC;AACpF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,gBAAgB,MAAM,CAAC;AAC9D,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,gBAAgB,QAAQ,CAAC;AAClE,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,gBAAgB,OAAO,CAAC;AAChE,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,gBAAgB,UAAU,CAAC;AAEtE,MAAM,CAAC,MAAM,qBAAqB,GAAG,4BAA4B,CAAC;AAClE,MAAM,CAAC,MAAM,qBAAqB,GAAG,4BAA4B,CAAC;AAElE,MAAM,CAAC,MAAM,yBAAyB,GAAG,sBAAsB,CAAC;AAChE,MAAM,CAAC,MAAM,4BAA4B,GAAG,yBAAyB,CAAC;AAEtE,MAAM,CAAC,MAAM,sBAAsB,GAAG,aAAa,CAAC;AACpD,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;AAChD,MAAM,CAAC,MAAM,uBAAuB,GAAG,cAAc,CAAC;AAEtD,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE,CAAC,IAAI,oBAAoB,KAAK,sBAAsB,IAAI,CAAC;AACnG,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,IAAI,oBAAoB,KAAK,GAAG,IAAI,CAAC;AAC1F,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,IAAI,sBAAsB,KAAK,KAAK,IAAI,CAAC;AAElG,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE,CAAC,IAAI,wBAAwB,GAAG,CAAC;AAC3E,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,SAAiB,EAAE,EAAE,CAAC,IAAI,wBAAwB,KAAK,SAAS,IAAI,CAAC;AACxG,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,SAAkB,EAAE,EAAE,CAC3D,CAAC,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,oBAAoB,KAAK,uBAAuB,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEvH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAAsB,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;AAEjG,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,QAA4B,EAAsB,EAAE,eACtF,OAAA,QAAQ,CAAC,CAAC,CAAC,MAAA,MAAA,QAAQ,CAAC,aAAa,CAAc,QAAQ,CAAC,0CAAE,SAAS,0CAAE,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,CAAA,EAAA,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport const DATA_ATTR_FUNNEL = 'data-analytics-funnel';\nexport const DATA_ATTR_FUNNEL_INTERACTION_ID = `${DATA_ATTR_FUNNEL}-interaction-id`;\nexport const DATA_ATTR_FUNNEL_KEY = `${DATA_ATTR_FUNNEL}-key`;\nexport const DATA_ATTR_FUNNEL_VALUE = `${DATA_ATTR_FUNNEL}-value`;\nexport const DATA_ATTR_FUNNEL_STEP = `${DATA_ATTR_FUNNEL}-step`;\nexport const DATA_ATTR_FUNNEL_SUBSTEP = `${DATA_ATTR_FUNNEL}-substep`;\n\nexport const DATA_ATTR_FIELD_LABEL = 'data-analytics-field-label';\nexport const DATA_ATTR_FIELD_ERROR = 'data-analytics-field-error';\n\nexport const DATA_ATTR_ANALYTICS_ALERT = 'data-analytics-alert';\nexport const DATA_ATTR_ANALYTICS_FLASHBAR = 'data-analytics-flashbar';\n\nexport const FUNNEL_KEY_FUNNEL_NAME = 'funnel-name';\nexport const FUNNEL_KEY_STEP_NAME = 'step-name';\nexport const FUNNEL_KEY_SUBSTEP_NAME = 'substep-name';\n\nexport const getFunnelNameSelector = () => `[${DATA_ATTR_FUNNEL_KEY}=\"${FUNNEL_KEY_FUNNEL_NAME}\"]`;\nexport const getFunnelKeySelector = (key: string) => `[${DATA_ATTR_FUNNEL_KEY}=\"${key}\"]`;\nexport const getFunnelValueSelector = (value: string) => `[${DATA_ATTR_FUNNEL_VALUE}=\"${value}\"]`;\n\nexport const getSubStepAllSelector = () => `[${DATA_ATTR_FUNNEL_SUBSTEP}]`;\nexport const getSubStepSelector = (subStepId: string) => `[${DATA_ATTR_FUNNEL_SUBSTEP}=\"${subStepId}\"]`;\nexport const getSubStepNameSelector = (subStepId?: string) =>\n [subStepId ? getSubStepSelector(subStepId) : '', `[${DATA_ATTR_FUNNEL_KEY}=\"${FUNNEL_KEY_SUBSTEP_NAME}\"]`].join(' ');\n\nexport const getFieldSlotSeletor = (id: string | undefined) => (id ? `[id=\"${id}\"]` : undefined);\n\nexport const getNameFromSelector = (selector: string | undefined): string | undefined =>\n selector ? document.querySelector<HTMLElement>(selector)?.innerText?.trim() : undefined;\n"]}
|
package/internal/environment.js
CHANGED
package/internal/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { WizardProps } from './interfaces';
|
|
2
|
+
export declare function useFunnelChangeEvent(funnelInteractionId: string | undefined, steps: WizardProps['steps']): void;
|
|
3
|
+
export declare function getStepConfiguration(steps: WizardProps['steps']): {
|
|
4
|
+
name: string;
|
|
5
|
+
number: number;
|
|
6
|
+
isOptional: boolean;
|
|
7
|
+
}[];
|
|
8
|
+
//# sourceMappingURL=analytics.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"analytics.d.ts","sourceRoot":"lib/default/","sources":["wizard/analytics.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,wBAAgB,oBAAoB,CAAC,mBAAmB,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,QA6BxG;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC;;;;IAM/D"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import { useRef, useEffect } from 'react';
|
|
4
|
+
import { FunnelMetrics } from '../internal/analytics';
|
|
5
|
+
export function useFunnelChangeEvent(funnelInteractionId, steps) {
|
|
6
|
+
const listenForStepChanges = useRef(false);
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
// We prevent emitting the event before the funnel has stabilised.
|
|
9
|
+
const handle = setTimeout(() => (listenForStepChanges.current = true), 0);
|
|
10
|
+
return () => {
|
|
11
|
+
clearTimeout(handle);
|
|
12
|
+
listenForStepChanges.current = false;
|
|
13
|
+
};
|
|
14
|
+
}, [funnelInteractionId]);
|
|
15
|
+
const stepTitles = steps.map(step => step.title).join();
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
if (!funnelInteractionId || !listenForStepChanges.current) {
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
FunnelMetrics.funnelChange({
|
|
21
|
+
funnelInteractionId,
|
|
22
|
+
stepConfiguration: getStepConfiguration(steps),
|
|
23
|
+
});
|
|
24
|
+
// This dependency array does not include `steps`, because `steps` is not stable across renders.
|
|
25
|
+
// We use `stepTitles` as a stable proxy.
|
|
26
|
+
//
|
|
27
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
28
|
+
}, [funnelInteractionId, stepTitles]);
|
|
29
|
+
}
|
|
30
|
+
export function getStepConfiguration(steps) {
|
|
31
|
+
return steps.map((step, index) => {
|
|
32
|
+
var _a;
|
|
33
|
+
return ({
|
|
34
|
+
name: step.title,
|
|
35
|
+
number: index + 1,
|
|
36
|
+
isOptional: (_a = step.isOptional) !== null && _a !== void 0 ? _a : false,
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
//# sourceMappingURL=analytics.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"analytics.js","sourceRoot":"lib/default/","sources":["wizard/analytics.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAGtD,MAAM,UAAU,oBAAoB,CAAC,mBAAuC,EAAE,KAA2B;IACvG,MAAM,oBAAoB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE3C,SAAS,CAAC,GAAG,EAAE;QACb,kEAAkE;QAClE,MAAM,MAAM,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,oBAAoB,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QAE1E,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,MAAM,CAAC,CAAC;YACrB,oBAAoB,CAAC,OAAO,GAAG,KAAK,CAAC;QACvC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAE1B,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;IACxD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,mBAAmB,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE;YACzD,OAAO;SACR;QAED,aAAa,CAAC,YAAY,CAAC;YACzB,mBAAmB;YACnB,iBAAiB,EAAE,oBAAoB,CAAC,KAAK,CAAC;SAC/C,CAAC,CAAC;QAEH,gGAAgG;QAChG,yCAAyC;QACzC,EAAE;QACF,uDAAuD;IACzD,CAAC,EAAE,CAAC,mBAAmB,EAAE,UAAU,CAAC,CAAC,CAAC;AACxC,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,KAA2B;IAC9D,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;QAAC,OAAA,CAAC;YACjC,IAAI,EAAE,IAAI,CAAC,KAAK;YAChB,MAAM,EAAE,KAAK,GAAG,CAAC;YACjB,UAAU,EAAE,MAAA,IAAI,CAAC,UAAU,mCAAI,KAAK;SACrC,CAAC,CAAA;KAAA,CAAC,CAAC;AACN,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useRef, useEffect } from 'react';\nimport { FunnelMetrics } from '../internal/analytics';\nimport { WizardProps } from './interfaces';\n\nexport function useFunnelChangeEvent(funnelInteractionId: string | undefined, steps: WizardProps['steps']) {\n const listenForStepChanges = useRef(false);\n\n useEffect(() => {\n // We prevent emitting the event before the funnel has stabilised.\n const handle = setTimeout(() => (listenForStepChanges.current = true), 0);\n\n return () => {\n clearTimeout(handle);\n listenForStepChanges.current = false;\n };\n }, [funnelInteractionId]);\n\n const stepTitles = steps.map(step => step.title).join();\n useEffect(() => {\n if (!funnelInteractionId || !listenForStepChanges.current) {\n return;\n }\n\n FunnelMetrics.funnelChange({\n funnelInteractionId,\n stepConfiguration: getStepConfiguration(steps),\n });\n\n // This dependency array does not include `steps`, because `steps` is not stable across renders.\n // We use `stepTitles` as a stable proxy.\n //\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, stepTitles]);\n}\n\nexport function getStepConfiguration(steps: WizardProps['steps']) {\n return steps.map((step, index) => ({\n name: step.title,\n number: index + 1,\n isOptional: step.isOptional ?? false,\n }));\n}\n"]}
|
package/wizard/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["wizard/index.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["wizard/index.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,iBAAS,MAAM,CAAC,EAAE,iBAAyB,EAAE,WAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,eA4BxF;AAID,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,eAAe,MAAM,CAAC"}
|
package/wizard/index.js
CHANGED
|
@@ -7,6 +7,7 @@ import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
|
7
7
|
import useBaseComponent from '../internal/hooks/use-base-component';
|
|
8
8
|
import { AnalyticsFunnel } from '../internal/analytics/components/analytics-funnel';
|
|
9
9
|
import InternalWizard from './internal';
|
|
10
|
+
import { getStepConfiguration } from './analytics';
|
|
10
11
|
import { useFunnel } from '../internal/analytics/hooks/use-funnel';
|
|
11
12
|
function Wizard(_a) {
|
|
12
13
|
var { isLoadingNextStep = false, allowSkipTo = false } = _a, props = __rest(_a, ["isLoadingNextStep", "allowSkipTo"]);
|
|
@@ -20,7 +21,7 @@ function Wizard(_a) {
|
|
|
20
21
|
}, [wizardCount]);
|
|
21
22
|
return (React.createElement(AnalyticsFunnel, { funnelType: "multi-page", optionalStepNumbers: props.steps
|
|
22
23
|
.map((step, index) => (step.isOptional ? index + 1 : -1))
|
|
23
|
-
.filter(step => step !== -1), totalFunnelSteps: props.steps.length },
|
|
24
|
+
.filter(step => step !== -1), totalFunnelSteps: props.steps.length, stepConfiguration: getStepConfiguration(props.steps) },
|
|
24
25
|
React.createElement(InternalWizard, Object.assign({ isLoadingNextStep: isLoadingNextStep, allowSkipTo: allowSkipTo }, externalProps, baseComponentProps))));
|
|
25
26
|
}
|
|
26
27
|
applyDisplayName(Wizard, 'Wizard');
|
package/wizard/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["wizard/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAEpE,OAAO,EAAE,eAAe,EAAE,MAAM,mDAAmD,CAAC;AAEpF,OAAO,cAAc,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["wizard/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAEpE,OAAO,EAAE,eAAe,EAAE,MAAM,mDAAmD,CAAC;AAEpF,OAAO,cAAc,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAEnE,SAAS,MAAM,CAAC,EAAyE;QAAzE,EAAE,iBAAiB,GAAG,KAAK,EAAE,WAAW,GAAG,KAAK,OAAyB,EAApB,KAAK,cAA1D,oCAA4D,CAAF;IACxE,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACtD,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,CAAC;IACpC,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,OAAO,EAAE,CAAC;QACtB,uDAAuD;QACvD,OAAO,GAAG,EAAE,CAAC,KAAK,WAAW,CAAC,OAAO,EAAE,CAAC;IAC1C,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,oBAAC,eAAe,IACd,UAAU,EAAC,YAAY,EACvB,mBAAmB,EAAE,KAAK,CAAC,KAAK;aAC7B,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;aACxD,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAC9B,gBAAgB,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,EACpC,iBAAiB,EAAE,oBAAoB,CAAC,KAAK,CAAC,KAAK,CAAC;QAEpD,oBAAC,cAAc,kBACb,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,WAAW,IACpB,aAAa,EACb,kBAAkB,EACtB,CACc,CACnB,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AAGnC,eAAe,MAAM,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect } from 'react';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nimport { AnalyticsFunnel } from '../internal/analytics/components/analytics-funnel';\n\nimport InternalWizard from './internal';\nimport { getStepConfiguration } from './analytics';\nimport { WizardProps } from './interfaces';\nimport { useFunnel } from '../internal/analytics/hooks/use-funnel';\n\nfunction Wizard({ isLoadingNextStep = false, allowSkipTo = false, ...props }: WizardProps) {\n const baseComponentProps = useBaseComponent('Wizard');\n const { wizardCount } = useFunnel();\n const externalProps = getExternalProps(props);\n\n useEffect(() => {\n wizardCount.current++;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return () => void wizardCount.current--;\n }, [wizardCount]);\n\n return (\n <AnalyticsFunnel\n funnelType=\"multi-page\"\n optionalStepNumbers={props.steps\n .map((step, index) => (step.isOptional ? index + 1 : -1))\n .filter(step => step !== -1)}\n totalFunnelSteps={props.steps.length}\n stepConfiguration={getStepConfiguration(props.steps)}\n >\n <InternalWizard\n isLoadingNextStep={isLoadingNextStep}\n allowSkipTo={allowSkipTo}\n {...externalProps}\n {...baseComponentProps}\n />\n </AnalyticsFunnel>\n );\n}\n\napplyDisplayName(Wizard, 'Wizard');\n\nexport { WizardProps };\nexport default Wizard;\n"]}
|
package/wizard/internal.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["wizard/internal.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAWlF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["wizard/internal.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAWlF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,KAAK,mBAAmB,GAAG,WAAW,GAAG,0BAA0B,CAAC;AAEpE,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,KAAK,EACL,eAAe,EAAE,yBAAyB,EAC1C,gBAAgB,EAChB,iBAAyB,EACzB,WAAmB,EACnB,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,mBAAmB,eAgJrB"}
|
package/wizard/internal.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
2
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
3
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
|
-
import React, {
|
|
4
|
+
import React, { useRef } from 'react';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
import { getBaseProps } from '../internal/base-component';
|
|
7
7
|
import { fireNonCancelableEvent } from '../internal/events';
|
|
@@ -17,6 +17,7 @@ import { getNameFromSelector, getSubStepAllSelector } from '../internal/analytic
|
|
|
17
17
|
import WizardForm from './wizard-form';
|
|
18
18
|
import WizardNavigation from './wizard-navigation';
|
|
19
19
|
import styles from './styles.css.js';
|
|
20
|
+
import { useFunnelChangeEvent } from './analytics';
|
|
20
21
|
export default function InternalWizard(_a) {
|
|
21
22
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
22
23
|
var { steps, activeStepIndex: controlledActiveStepIndex, submitButtonText, isLoadingNextStep = false, allowSkipTo = false, secondaryActions, onCancel, onSubmit, onNavigate, __internalRootRef } = _a, rest = __rest(_a, ["steps", "activeStepIndex", "submitButtonText", "isLoadingNextStep", "allowSkipTo", "secondaryActions", "onCancel", "onSubmit", "onNavigate", "__internalRootRef"]);
|
|
@@ -86,40 +87,4 @@ export default function InternalWizard(_a) {
|
|
|
86
87
|
isVisualRefresh && React.createElement("div", { className: clsx(styles.background, 'awsui-context-content-header') }),
|
|
87
88
|
React.createElement(WizardForm, { steps: steps, isVisualRefresh: isVisualRefresh, showCollapsedSteps: smallContainer, i18nStrings: i18nStrings, submitButtonText: submitButtonText, activeStepIndex: actualActiveStepIndex, isPrimaryLoading: isLoadingNextStep, allowSkipTo: allowSkipTo, secondaryActions: secondaryActions, onCancelClick: onCancelClick, onPreviousClick: onPreviousClick, onSkipToClick: onSkipToClick, onPrimaryClick: onPrimaryClick })))));
|
|
88
89
|
}
|
|
89
|
-
/**
|
|
90
|
-
* This hook observes the step configuration and emits the `funnelChange` event when the steps change.
|
|
91
|
-
*/
|
|
92
|
-
function useFunnelChangeEvent(funnelInteractionId, steps) {
|
|
93
|
-
const listenForStepChanges = useRef(false);
|
|
94
|
-
useEffect(() => {
|
|
95
|
-
// We prevent emitting the event before the funnel has stabilised.
|
|
96
|
-
const handle = setTimeout(() => (listenForStepChanges.current = true), 0);
|
|
97
|
-
return () => {
|
|
98
|
-
clearTimeout(handle);
|
|
99
|
-
listenForStepChanges.current = false;
|
|
100
|
-
};
|
|
101
|
-
}, [funnelInteractionId]);
|
|
102
|
-
const stepTitles = steps.map(step => step.title).join();
|
|
103
|
-
useEffect(() => {
|
|
104
|
-
if (!funnelInteractionId || !listenForStepChanges.current) {
|
|
105
|
-
return;
|
|
106
|
-
}
|
|
107
|
-
const stepConfiguration = steps.map((step, index) => {
|
|
108
|
-
var _a;
|
|
109
|
-
return ({
|
|
110
|
-
name: step.title,
|
|
111
|
-
number: index + 1,
|
|
112
|
-
isOptional: (_a = step.isOptional) !== null && _a !== void 0 ? _a : false,
|
|
113
|
-
});
|
|
114
|
-
});
|
|
115
|
-
FunnelMetrics.funnelChange({
|
|
116
|
-
funnelInteractionId,
|
|
117
|
-
stepConfiguration,
|
|
118
|
-
});
|
|
119
|
-
// This dependency array does not include `steps`, because `steps` is not stable across renders.
|
|
120
|
-
// We use `stepTitles` as a stable proxy.
|
|
121
|
-
//
|
|
122
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
123
|
-
}, [funnelInteractionId, stepTitles]);
|
|
124
|
-
}
|
|
125
90
|
//# sourceMappingURL=internal.js.map
|
package/wizard/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["wizard/internal.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 } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nimport { useInternalI18n } from '../i18n/context';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel } from '../internal/analytics/hooks/use-funnel';\nimport { getNameFromSelector, getSubStepAllSelector } from '../internal/analytics/selectors';\n\nimport WizardForm from './wizard-form';\nimport WizardNavigation from './wizard-navigation';\n\nimport { WizardProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalWizardProps = WizardProps & InternalBaseComponentProps;\n\nexport default function InternalWizard({\n steps,\n activeStepIndex: controlledActiveStepIndex,\n submitButtonText,\n isLoadingNextStep = false,\n allowSkipTo = false,\n secondaryActions,\n onCancel,\n onSubmit,\n onNavigate,\n __internalRootRef,\n ...rest\n}: InternalWizardProps) {\n const baseProps = getBaseProps(rest);\n\n const [breakpoint, breakpointsRef] = useContainerBreakpoints(['xs']);\n const ref = useMergeRefs(breakpointsRef, __internalRootRef);\n\n const smallContainer = breakpoint === 'default';\n\n const [activeStepIndex, setActiveStepIndex] = useControllable(controlledActiveStepIndex, onNavigate, 0, {\n componentName: 'Wizard',\n controlledProp: 'activeStepIndex',\n changeHandler: 'onNavigate',\n });\n const { funnelInteractionId, funnelSubmit, funnelCancel, funnelProps, funnelNextOrSubmitAttempt } = useFunnel();\n const actualActiveStepIndex = activeStepIndex ? Math.min(activeStepIndex, steps.length - 1) : 0;\n\n const farthestStepIndex = useRef<number>(actualActiveStepIndex);\n farthestStepIndex.current = Math.max(farthestStepIndex.current, actualActiveStepIndex);\n\n const isVisualRefresh = useVisualRefresh();\n const isLastStep = actualActiveStepIndex >= steps.length - 1;\n\n const navigationEvent = (requestedStepIndex: number, reason: WizardProps.NavigationReason) => {\n if (funnelInteractionId) {\n const stepNameSelector = `.${styles['form-header-component-wrapper']}`;\n const stepName = getNameFromSelector(stepNameSelector);\n\n FunnelMetrics.funnelStepNavigation({\n navigationType: reason,\n funnelInteractionId,\n stepNumber: actualActiveStepIndex + 1,\n stepName,\n stepNameSelector,\n destinationStepNumber: requestedStepIndex + 1,\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n\n setActiveStepIndex(requestedStepIndex);\n fireNonCancelableEvent(onNavigate, { requestedStepIndex, reason });\n };\n const onStepClick = (stepIndex: number) => navigationEvent(stepIndex, 'step');\n const onSkipToClick = (stepIndex: number) => navigationEvent(stepIndex, 'skip');\n const onCancelClick = () => {\n funnelCancel();\n fireNonCancelableEvent(onCancel);\n };\n const onPreviousClick = () => navigationEvent(actualActiveStepIndex - 1, 'previous');\n const onPrimaryClick = () => {\n funnelNextOrSubmitAttempt();\n\n if (isLastStep) {\n funnelSubmit();\n fireNonCancelableEvent(onSubmit);\n } else {\n navigationEvent(actualActiveStepIndex + 1, 'next');\n }\n };\n\n useFunnelChangeEvent(funnelInteractionId, steps);\n\n const i18n = useInternalI18n('wizard');\n const skipToButtonLabel = i18n(\n 'i18nStrings.skipToButtonLabel',\n rest.i18nStrings?.skipToButtonLabel,\n format => task => format({ task__title: task.title })\n );\n\n const i18nStrings: WizardProps.I18nStrings = {\n ...rest.i18nStrings,\n skipToButtonLabel,\n stepNumberLabel: i18n(\n 'i18nStrings.stepNumberLabel',\n rest.i18nStrings?.stepNumberLabel,\n format => stepNumber => format({ stepNumber })\n ),\n collapsedStepsLabel: i18n(\n 'i18nStrings.collapsedStepsLabel',\n rest.i18nStrings?.collapsedStepsLabel,\n format => (stepNumber, stepsCount) => format({ stepNumber, stepsCount })\n ),\n navigationAriaLabel: i18n('i18nStrings.navigationAriaLabel', rest.i18nStrings?.navigationAriaLabel),\n cancelButton: i18n('i18nStrings.cancelButton', rest.i18nStrings?.cancelButton),\n previousButton: i18n('i18nStrings.previousButton', rest.i18nStrings?.previousButton),\n nextButton: i18n('i18nStrings.nextButton', rest.i18nStrings?.nextButton),\n optional: i18n('i18nStrings.optional', rest.i18nStrings?.optional),\n };\n\n if (activeStepIndex && activeStepIndex >= steps.length) {\n warnOnce(\n 'Wizard',\n `You have set \\`activeStepIndex\\` to ${activeStepIndex} but you have provided only ${\n steps.length\n } steps. Its value is ignored and the component uses ${steps.length - 1} instead.`\n );\n }\n\n if (allowSkipTo && !skipToButtonLabel) {\n warnOnce(\n 'Wizard',\n `You have set \\`allowSkipTo\\` but you have not provided \\`i18nStrings.skipToButtonLabel\\`. The skip-to button will not be rendered.`\n );\n }\n\n return (\n <div {...baseProps} {...funnelProps} ref={ref} className={clsx(styles.root, baseProps.className)}>\n <div\n className={clsx(styles.wizard, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}\n >\n <WizardNavigation\n activeStepIndex={actualActiveStepIndex}\n farthestStepIndex={farthestStepIndex.current}\n allowSkipTo={allowSkipTo}\n hidden={smallContainer}\n i18nStrings={i18nStrings}\n isVisualRefresh={isVisualRefresh}\n isLoadingNextStep={isLoadingNextStep}\n onStepClick={onStepClick}\n onSkipToClick={onSkipToClick}\n steps={steps}\n />\n <div\n className={clsx(styles.form, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}\n >\n {isVisualRefresh && <div className={clsx(styles.background, 'awsui-context-content-header')} />}\n <WizardForm\n steps={steps}\n isVisualRefresh={isVisualRefresh}\n showCollapsedSteps={smallContainer}\n i18nStrings={i18nStrings}\n submitButtonText={submitButtonText}\n activeStepIndex={actualActiveStepIndex}\n isPrimaryLoading={isLoadingNextStep}\n allowSkipTo={allowSkipTo}\n secondaryActions={secondaryActions}\n onCancelClick={onCancelClick}\n onPreviousClick={onPreviousClick}\n onSkipToClick={onSkipToClick}\n onPrimaryClick={onPrimaryClick}\n />\n </div>\n </div>\n </div>\n );\n}\n\n/**\n * This hook observes the step configuration and emits the `funnelChange` event when the steps change.\n */\nfunction useFunnelChangeEvent(funnelInteractionId: string | undefined, steps: WizardProps['steps']) {\n const listenForStepChanges = useRef(false);\n\n useEffect(() => {\n // We prevent emitting the event before the funnel has stabilised.\n const handle = setTimeout(() => (listenForStepChanges.current = true), 0);\n\n return () => {\n clearTimeout(handle);\n listenForStepChanges.current = false;\n };\n }, [funnelInteractionId]);\n\n const stepTitles = steps.map(step => step.title).join();\n useEffect(() => {\n if (!funnelInteractionId || !listenForStepChanges.current) {\n return;\n }\n\n const stepConfiguration = steps.map((step, index) => ({\n name: step.title,\n number: index + 1,\n isOptional: step.isOptional ?? false,\n }));\n\n FunnelMetrics.funnelChange({\n funnelInteractionId,\n stepConfiguration,\n });\n\n // This dependency array does not include `steps`, because `steps` is not stable across renders.\n // We use `stepTitles` as a stable proxy.\n //\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, stepTitles]);\n}\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["wizard/internal.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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nimport { useInternalI18n } from '../i18n/context';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel } from '../internal/analytics/hooks/use-funnel';\nimport { getNameFromSelector, getSubStepAllSelector } from '../internal/analytics/selectors';\n\nimport WizardForm from './wizard-form';\nimport WizardNavigation from './wizard-navigation';\n\nimport { WizardProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport { useFunnelChangeEvent } from './analytics';\n\ntype InternalWizardProps = WizardProps & InternalBaseComponentProps;\n\nexport default function InternalWizard({\n steps,\n activeStepIndex: controlledActiveStepIndex,\n submitButtonText,\n isLoadingNextStep = false,\n allowSkipTo = false,\n secondaryActions,\n onCancel,\n onSubmit,\n onNavigate,\n __internalRootRef,\n ...rest\n}: InternalWizardProps) {\n const baseProps = getBaseProps(rest);\n\n const [breakpoint, breakpointsRef] = useContainerBreakpoints(['xs']);\n const ref = useMergeRefs(breakpointsRef, __internalRootRef);\n\n const smallContainer = breakpoint === 'default';\n\n const [activeStepIndex, setActiveStepIndex] = useControllable(controlledActiveStepIndex, onNavigate, 0, {\n componentName: 'Wizard',\n controlledProp: 'activeStepIndex',\n changeHandler: 'onNavigate',\n });\n const { funnelInteractionId, funnelSubmit, funnelCancel, funnelProps, funnelNextOrSubmitAttempt } = useFunnel();\n const actualActiveStepIndex = activeStepIndex ? Math.min(activeStepIndex, steps.length - 1) : 0;\n\n const farthestStepIndex = useRef<number>(actualActiveStepIndex);\n farthestStepIndex.current = Math.max(farthestStepIndex.current, actualActiveStepIndex);\n\n const isVisualRefresh = useVisualRefresh();\n const isLastStep = actualActiveStepIndex >= steps.length - 1;\n\n const navigationEvent = (requestedStepIndex: number, reason: WizardProps.NavigationReason) => {\n if (funnelInteractionId) {\n const stepNameSelector = `.${styles['form-header-component-wrapper']}`;\n const stepName = getNameFromSelector(stepNameSelector);\n\n FunnelMetrics.funnelStepNavigation({\n navigationType: reason,\n funnelInteractionId,\n stepNumber: actualActiveStepIndex + 1,\n stepName,\n stepNameSelector,\n destinationStepNumber: requestedStepIndex + 1,\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n\n setActiveStepIndex(requestedStepIndex);\n fireNonCancelableEvent(onNavigate, { requestedStepIndex, reason });\n };\n const onStepClick = (stepIndex: number) => navigationEvent(stepIndex, 'step');\n const onSkipToClick = (stepIndex: number) => navigationEvent(stepIndex, 'skip');\n const onCancelClick = () => {\n funnelCancel();\n fireNonCancelableEvent(onCancel);\n };\n const onPreviousClick = () => navigationEvent(actualActiveStepIndex - 1, 'previous');\n const onPrimaryClick = () => {\n funnelNextOrSubmitAttempt();\n\n if (isLastStep) {\n funnelSubmit();\n fireNonCancelableEvent(onSubmit);\n } else {\n navigationEvent(actualActiveStepIndex + 1, 'next');\n }\n };\n\n useFunnelChangeEvent(funnelInteractionId, steps);\n\n const i18n = useInternalI18n('wizard');\n const skipToButtonLabel = i18n(\n 'i18nStrings.skipToButtonLabel',\n rest.i18nStrings?.skipToButtonLabel,\n format => task => format({ task__title: task.title })\n );\n\n const i18nStrings: WizardProps.I18nStrings = {\n ...rest.i18nStrings,\n skipToButtonLabel,\n stepNumberLabel: i18n(\n 'i18nStrings.stepNumberLabel',\n rest.i18nStrings?.stepNumberLabel,\n format => stepNumber => format({ stepNumber })\n ),\n collapsedStepsLabel: i18n(\n 'i18nStrings.collapsedStepsLabel',\n rest.i18nStrings?.collapsedStepsLabel,\n format => (stepNumber, stepsCount) => format({ stepNumber, stepsCount })\n ),\n navigationAriaLabel: i18n('i18nStrings.navigationAriaLabel', rest.i18nStrings?.navigationAriaLabel),\n cancelButton: i18n('i18nStrings.cancelButton', rest.i18nStrings?.cancelButton),\n previousButton: i18n('i18nStrings.previousButton', rest.i18nStrings?.previousButton),\n nextButton: i18n('i18nStrings.nextButton', rest.i18nStrings?.nextButton),\n optional: i18n('i18nStrings.optional', rest.i18nStrings?.optional),\n };\n\n if (activeStepIndex && activeStepIndex >= steps.length) {\n warnOnce(\n 'Wizard',\n `You have set \\`activeStepIndex\\` to ${activeStepIndex} but you have provided only ${\n steps.length\n } steps. Its value is ignored and the component uses ${steps.length - 1} instead.`\n );\n }\n\n if (allowSkipTo && !skipToButtonLabel) {\n warnOnce(\n 'Wizard',\n `You have set \\`allowSkipTo\\` but you have not provided \\`i18nStrings.skipToButtonLabel\\`. The skip-to button will not be rendered.`\n );\n }\n\n return (\n <div {...baseProps} {...funnelProps} ref={ref} className={clsx(styles.root, baseProps.className)}>\n <div\n className={clsx(styles.wizard, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}\n >\n <WizardNavigation\n activeStepIndex={actualActiveStepIndex}\n farthestStepIndex={farthestStepIndex.current}\n allowSkipTo={allowSkipTo}\n hidden={smallContainer}\n i18nStrings={i18nStrings}\n isVisualRefresh={isVisualRefresh}\n isLoadingNextStep={isLoadingNextStep}\n onStepClick={onStepClick}\n onSkipToClick={onSkipToClick}\n steps={steps}\n />\n <div\n className={clsx(styles.form, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}\n >\n {isVisualRefresh && <div className={clsx(styles.background, 'awsui-context-content-header')} />}\n <WizardForm\n steps={steps}\n isVisualRefresh={isVisualRefresh}\n showCollapsedSteps={smallContainer}\n i18nStrings={i18nStrings}\n submitButtonText={submitButtonText}\n activeStepIndex={actualActiveStepIndex}\n isPrimaryLoading={isLoadingNextStep}\n allowSkipTo={allowSkipTo}\n secondaryActions={secondaryActions}\n onCancelClick={onCancelClick}\n onPreviousClick={onPreviousClick}\n onSkipToClick={onSkipToClick}\n onPrimaryClick={onPrimaryClick}\n />\n </div>\n </div>\n </div>\n );\n}\n"]}
|