@cloudscape-design/components 3.0.342 → 3.0.344
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/area-chart/model/use-chart-model.d.ts.map +1 -1
- package/area-chart/model/use-chart-model.js +5 -5
- package/area-chart/model/use-chart-model.js.map +1 -1
- package/autosuggest/internal.js +4 -4
- package/autosuggest/internal.js.map +1 -1
- package/button-dropdown/tooltip.js +1 -1
- package/button-dropdown/tooltip.js.map +1 -1
- package/cards/index.d.ts.map +1 -1
- package/cards/index.js +8 -6
- package/cards/index.js.map +1 -1
- package/code-editor/index.js +1 -1
- package/code-editor/index.js.map +1 -1
- package/flashbar/common.js +2 -2
- package/flashbar/common.js.map +1 -1
- package/internal/analytics/components/analytics-funnel.d.ts +1 -1
- package/internal/analytics/components/analytics-funnel.d.ts.map +1 -1
- package/internal/analytics/components/analytics-funnel.js +24 -5
- package/internal/analytics/components/analytics-funnel.js.map +1 -1
- package/internal/analytics/context/analytics-context.d.ts +1 -0
- package/internal/analytics/context/analytics-context.d.ts.map +1 -1
- package/internal/analytics/context/analytics-context.js +1 -0
- package/internal/analytics/context/analytics-context.js.map +1 -1
- package/internal/components/autosuggest-input/index.d.ts.map +1 -1
- package/internal/components/autosuggest-input/index.js +10 -9
- package/internal/components/autosuggest-input/index.js.map +1 -1
- package/internal/components/transition/index.js +1 -1
- package/internal/components/transition/index.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +6 -0
- package/internal/hooks/container-queries/use-height-measure.d.ts +6 -0
- package/internal/hooks/container-queries/use-height-measure.d.ts.map +1 -0
- package/internal/hooks/container-queries/use-height-measure.js +15 -0
- package/internal/hooks/container-queries/use-height-measure.js.map +1 -0
- package/internal/hooks/use-portal-mode-classes/index.d.ts.map +1 -1
- package/internal/hooks/use-portal-mode-classes/index.js +2 -1
- package/internal/hooks/use-portal-mode-classes/index.js.map +1 -1
- package/internal/hooks/use-visual-mode/index.d.ts +0 -4
- package/internal/hooks/use-visual-mode/index.d.ts.map +1 -1
- package/internal/hooks/use-visual-mode/index.js +0 -30
- package/internal/hooks/use-visual-mode/index.js.map +1 -1
- package/internal/manifest.json +1 -1
- package/mixed-line-bar-chart/chart-container.d.ts.map +1 -1
- package/mixed-line-bar-chart/chart-container.js +3 -4
- package/mixed-line-bar-chart/chart-container.js.map +1 -1
- package/package.json +1 -1
- package/pie-chart/pie-chart.d.ts.map +1 -1
- package/pie-chart/pie-chart.js +4 -6
- package/pie-chart/pie-chart.js.map +1 -1
- package/popover/internal.d.ts.map +1 -1
- package/popover/internal.js +9 -3
- package/popover/internal.js.map +1 -1
- package/tabs/smooth-scroll.js +1 -1
- package/tabs/smooth-scroll.js.map +1 -1
- package/internal/motion.d.ts +0 -2
- package/internal/motion.d.ts.map +0 -1
- package/internal/motion.js +0 -9
- package/internal/motion.js.map +0 -1
package/flashbar/common.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"common.js","sourceRoot":"lib/default/","sources":["flashbar/common.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,
|
|
1
|
+
{"version":3,"file":"common.js","sourceRoot":"lib/default/","sources":["flashbar/common.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 useBaseComponent from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { getBaseProps } from '../internal/base-component';\nimport { FlashbarProps } from './interfaces';\nimport { focusFlashById } from './flash';\nimport { isDevelopment } from '../internal/is-development';\nimport { useReducedMotion, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nexport const componentName = 'Flashbar';\n\n// Common logic for collapsible and non-collapsible Flashbar\nexport function useFlashbar({\n items,\n onItemsAdded,\n onItemsChanged,\n onItemsRemoved,\n ...restProps\n}: FlashbarProps & {\n onItemsAdded?: (items: FlashbarProps.MessageDefinition[]) => void;\n onItemsRemoved?: (items: FlashbarProps.MessageDefinition[]) => void;\n onItemsChanged?: (options?: { allItemsHaveId?: boolean; isReducedMotion?: boolean }) => void;\n}) {\n const { __internalRootRef } = useBaseComponent(componentName);\n const allItemsHaveId = useMemo(() => items.every(item => 'id' in item), [items]);\n const baseProps = getBaseProps(restProps);\n const ref = useRef<HTMLDivElement | null>(null);\n const [breakpoint, breakpointRef] = useContainerBreakpoints(['xs']);\n const mergedRef = useMergeRefs(ref, breakpointRef, __internalRootRef);\n const isReducedMotion = useReducedMotion(breakpointRef as any);\n const isVisualRefresh = useVisualRefresh();\n const [previousItems, setPreviousItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>(items);\n const [nextFocusId, setNextFocusId] = useState<string | null>(null);\n\n if (isDevelopment) {\n if (items?.some(item => item.ariaRole === 'alert' && !item.id)) {\n warnOnce(\n 'Flashbar',\n `You provided \\`ariaRole=\"alert\"\\` for a flashbar item without providing an \\`id\\`. Focus will not be moved to the newly added flash message.`\n );\n }\n }\n\n // Track new or removed item IDs in state to only trigger focus changes for newly added items.\n // https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops\n if (items) {\n const newItems = items.filter(({ id }) => id && !previousItems.some(item => item.id === id));\n const removedItems = previousItems.filter(({ id }) => id && !items.some(item => item.id === id));\n if (newItems.length > 0 || removedItems.length > 0) {\n setPreviousItems(items);\n onItemsAdded?.(newItems);\n onItemsRemoved?.(removedItems);\n onItemsChanged?.({ allItemsHaveId, isReducedMotion });\n\n const newFocusItems = newItems.filter(({ ariaRole }) => ariaRole === 'alert');\n if (newFocusItems.length > 0) {\n setNextFocusId(newFocusItems[0].id!);\n }\n }\n }\n\n useEffect(() => {\n if (nextFocusId) {\n focusFlashById(ref.current, nextFocusId);\n }\n }, [nextFocusId, ref]);\n\n return {\n allItemsHaveId,\n baseProps,\n breakpoint,\n isReducedMotion,\n isVisualRefresh,\n mergedRef,\n ref,\n };\n}\n"]}
|
|
@@ -9,7 +9,7 @@ export declare const AnalyticsFunnel: ({ children, ...props }: AnalyticsFunnelPr
|
|
|
9
9
|
type AnalyticsFunnelStepProps = {
|
|
10
10
|
children?: React.ReactNode | ((props: FunnelStepContextValue) => React.ReactNode);
|
|
11
11
|
} & Pick<FunnelStepProps, 'stepNumber' | 'stepNameSelector'>;
|
|
12
|
-
export declare const AnalyticsFunnelStep: (
|
|
12
|
+
export declare const AnalyticsFunnelStep: (props: AnalyticsFunnelStepProps) => JSX.Element;
|
|
13
13
|
interface AnalyticsFunnelSubStepProps {
|
|
14
14
|
children?: React.ReactNode;
|
|
15
15
|
}
|
|
@@ -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,EAAE,MAAM,eAAe,CAAC;AAW7D,eAAO,MAAM,cAAc,QAAQ,CAAC;AAEpC,KAAK,oBAAoB,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,IAAI,CAC/D,WAAW,EACX,YAAY,GAAG,qBAAqB,GAAG,kBAAkB,CAC1D,CAAC;AAEF,eAAO,MAAM,eAAe,2BAA4B,oBAAoB,gBAkH3E,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CACnF,GAAG,IAAI,CAAC,eAAe,EAAE,YAAY,GAAG,kBAAkB,CAAC,CAAC;AAE7D,eAAO,MAAM,mBAAmB
|
|
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,MAAM,eAAe,CAAC;AAW7D,eAAO,MAAM,cAAc,QAAQ,CAAC;AAEpC,KAAK,oBAAoB,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,IAAI,CAC/D,WAAW,EACX,YAAY,GAAG,qBAAqB,GAAG,kBAAkB,CAC1D,CAAC;AAEF,eAAO,MAAM,eAAe,2BAA4B,oBAAoB,gBAkH3E,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CACnF,GAAG,IAAI,CAAC,eAAe,EAAE,YAAY,GAAG,kBAAkB,CAAC,CAAC;AAE7D,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,gBAMlE,CAAC;AAmDF,UAAU,2BAA2B;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,sBAAsB,iBAAkB,2BAA2B,gBA+B/E,CAAC"}
|
|
@@ -3,7 +3,7 @@ import { __rest } from "tslib";
|
|
|
3
3
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
4
|
import React, { useContext, useEffect, useRef, useState } from 'react';
|
|
5
5
|
import { FunnelStepContext, FunnelSubStepContext, FunnelContext, } from '../context/analytics-context';
|
|
6
|
-
import { useFunnel } from '../hooks/use-funnel';
|
|
6
|
+
import { useFunnel, useFunnelStep } from '../hooks/use-funnel';
|
|
7
7
|
import { useUniqueId } from '../../hooks/use-unique-id';
|
|
8
8
|
import { useVisualRefresh } from '../../hooks/use-visual-mode';
|
|
9
9
|
import { PACKAGE_VERSION } from '../../environment';
|
|
@@ -113,9 +113,16 @@ export const AnalyticsFunnel = (_a) => {
|
|
|
113
113
|
};
|
|
114
114
|
return React.createElement(FunnelContext.Provider, { value: funnelContextValue }, children);
|
|
115
115
|
};
|
|
116
|
-
export const AnalyticsFunnelStep = (
|
|
116
|
+
export const AnalyticsFunnelStep = (props) => (
|
|
117
|
+
/*
|
|
118
|
+
This wrapper is used to apply a `key` property to the actual (inner) AnalyticsFunnelStep
|
|
119
|
+
element. This allows us to keep the state and effects separate per step.
|
|
120
|
+
*/
|
|
121
|
+
React.createElement(InnerAnalyticsFunnelStep, Object.assign({}, props, { key: props.stepNumber })));
|
|
122
|
+
const InnerAnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector }) => {
|
|
117
123
|
const { funnelInteractionId, funnelState } = useFunnel();
|
|
118
124
|
const funnelStepProps = { [DATA_ATTR_FUNNEL_STEP]: stepNumber };
|
|
125
|
+
const subStepCount = useRef(0);
|
|
119
126
|
// This useEffect hook is used to track the start and completion of interaction with the step.
|
|
120
127
|
// On mount, if there is a valid funnel interaction id, it calls the 'funnelStepStart' method from FunnelMetrics
|
|
121
128
|
// to record the beginning of the interaction with the current step.
|
|
@@ -129,10 +136,11 @@ export const AnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector })
|
|
|
129
136
|
stepName,
|
|
130
137
|
stepNameSelector,
|
|
131
138
|
subStepAllSelector: getSubStepAllSelector(),
|
|
139
|
+
totalSubSteps: subStepCount.current,
|
|
132
140
|
});
|
|
133
141
|
}
|
|
134
142
|
return () => {
|
|
135
|
-
//eslint-disable-next-line react-hooks/exhaustive-deps
|
|
143
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
136
144
|
if (funnelInteractionId && funnelState.current !== 'cancelled') {
|
|
137
145
|
FunnelMetrics.funnelStepComplete({
|
|
138
146
|
funnelInteractionId,
|
|
@@ -140,12 +148,14 @@ export const AnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector })
|
|
|
140
148
|
stepName,
|
|
141
149
|
stepNameSelector,
|
|
142
150
|
subStepAllSelector: getSubStepAllSelector(),
|
|
151
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
152
|
+
totalSubSteps: subStepCount.current,
|
|
143
153
|
});
|
|
144
154
|
}
|
|
145
155
|
};
|
|
146
156
|
//eslint-disable-next-line react-hooks/exhaustive-deps
|
|
147
157
|
}, [funnelInteractionId, stepNumber, stepNameSelector]);
|
|
148
|
-
const contextValue = { stepNumber, stepNameSelector, funnelStepProps };
|
|
158
|
+
const contextValue = { stepNumber, stepNameSelector, funnelStepProps, subStepCount };
|
|
149
159
|
return (React.createElement(FunnelStepContext.Provider, { value: contextValue }, typeof children === 'function' ? children(contextValue) : children));
|
|
150
160
|
};
|
|
151
161
|
export const AnalyticsFunnelSubStep = ({ children }) => {
|
|
@@ -153,6 +163,7 @@ export const AnalyticsFunnelSubStep = ({ children }) => {
|
|
|
153
163
|
const subStepSelector = getSubStepSelector(subStepId);
|
|
154
164
|
const subStepNameSelector = getSubStepNameSelector(subStepId);
|
|
155
165
|
const subStepRef = useRef(null);
|
|
166
|
+
const { subStepCount } = useFunnelStep();
|
|
156
167
|
const newContext = {
|
|
157
168
|
subStepSelector,
|
|
158
169
|
subStepNameSelector,
|
|
@@ -161,7 +172,15 @@ export const AnalyticsFunnelSubStep = ({ children }) => {
|
|
|
161
172
|
isNestedSubStep: false,
|
|
162
173
|
};
|
|
163
174
|
const inheritedContext = Object.assign(Object.assign({}, useContext(FunnelSubStepContext)), { isNestedSubStep: true });
|
|
164
|
-
const
|
|
175
|
+
const isNested = Boolean(inheritedContext.subStepId);
|
|
176
|
+
useEffect(() => {
|
|
177
|
+
if (!isNested) {
|
|
178
|
+
subStepCount.current++;
|
|
179
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
180
|
+
return () => void subStepCount.current--;
|
|
181
|
+
}
|
|
182
|
+
}, [isNested, subStepCount]);
|
|
183
|
+
const context = isNested ? inheritedContext : newContext;
|
|
165
184
|
return React.createElement(FunnelSubStepContext.Provider, { value: context }, children);
|
|
166
185
|
};
|
|
167
186
|
//# sourceMappingURL=analytics-funnel.js.map
|
|
@@ -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 } from '../hooks/use-funnel';\nimport { useUniqueId } from '../../hooks/use-unique-id';\nimport { useVisualRefresh } from '../../hooks/use-visual-mode';\n\nimport { PACKAGE_VERSION } from '../../environment';\n\nimport { FunnelMetrics } from '../';\nimport { FunnelProps, FunnelStepProps } from '../interfaces';\n\nimport {\n DATA_ATTR_FUNNEL_STEP,\n getFunnelNameSelector,\n getNameFromSelector,\n getSubStepAllSelector,\n getSubStepNameSelector,\n getSubStepSelector,\n} from '../selectors';\n\nexport const FUNNEL_VERSION = '1.0';\n\ntype AnalyticsFunnelProps = { children?: React.ReactNode } & Pick<\n FunnelProps,\n 'funnelType' | 'optionalStepNumbers' | 'totalFunnelSteps'\n>;\n\nexport const AnalyticsFunnel = ({ children, ...props }: AnalyticsFunnelProps) => {\n const [funnelInteractionId, setFunnelInteractionId] = useState<string>('');\n const [submissionAttempt, setSubmissionAttempt] = useState(0);\n const isVisualRefresh = useVisualRefresh();\n const funnelState = useRef<FunnelState>('default');\n const errorCount = useRef<number>(0);\n const loadingButtonCount = useRef<number>(0);\n\n // This useEffect hook is run once on component mount to initiate the funnel analytics.\n // It first calls the 'funnelStart' method from FunnelMetrics, providing all necessary details\n // about the funnel, and receives a unique interaction id.\n // This unique interaction id is then stored in the state for further use.\n //\n // On component unmount, it checks whether the funnel was successfully completed.\n // Based on this, it either calls 'funnelComplete' or 'funnelCancelled' method from FunnelMetrics.\n //\n // The eslint-disable is required as we deliberately want this effect to run only once on mount and unmount,\n // hence we do not provide any dependencies.\n useEffect(() => {\n // Reset the state, in case the component was re-mounted.\n funnelState.current = 'default';\n\n const funnelInteractionId = FunnelMetrics.funnelStart({\n funnelNameSelector: getFunnelNameSelector(),\n optionalStepNumbers: props.optionalStepNumbers,\n funnelType: props.funnelType,\n totalFunnelSteps: props.totalFunnelSteps,\n componentVersion: PACKAGE_VERSION,\n theme: isVisualRefresh ? 'vr' : 'classic',\n funnelVersion: FUNNEL_VERSION,\n });\n\n setFunnelInteractionId(funnelInteractionId);\n\n /*\n A funnel counts as \"successful\" if it is unmounted after being \"complete\".\n */\n /* eslint-disable react-hooks/exhaustive-deps */\n return () => {\n if (funnelState.current === 'validating') {\n // Finish the validation phase early.\n FunnelMetrics.funnelComplete({ funnelInteractionId });\n funnelState.current = 'complete';\n }\n\n if (funnelState.current === 'complete') {\n FunnelMetrics.funnelSuccessful({ funnelInteractionId });\n } else {\n FunnelMetrics.funnelCancelled({ funnelInteractionId });\n funnelState.current = 'cancelled';\n }\n };\n }, []);\n /* eslint-enable react-hooks/exhaustive-deps */\n\n const funnelSubmit = () => {\n funnelState.current = 'validating';\n\n /*\n When the user attempts to submit the form, we wait for 50 milliseconds before checking\n if any form validation errors are present. This value was chosen to give enough time\n for validation and rerendering to occur, but be low enough that the user will not\n be able to take further action in the meantime.\n */\n const VALIDATION_WAIT_DELAY = 50;\n /*\n Loading is expected to take longer than validation, so we can keep the pressure on the CPU low.\n */\n const LOADING_WAIT_DELAY = 100;\n\n const checkForCompleteness = () => {\n if (funnelState.current === 'complete') {\n return;\n }\n\n if (loadingButtonCount.current > 0) {\n setTimeout(checkForCompleteness, LOADING_WAIT_DELAY);\n return;\n }\n\n if (errorCount.current === 0) {\n /*\n If no validation errors are rendered, we treat the funnel as complete.\n */\n FunnelMetrics.funnelComplete({ funnelInteractionId });\n funnelState.current = 'complete';\n } else {\n funnelState.current = 'default';\n }\n };\n\n setTimeout(checkForCompleteness, VALIDATION_WAIT_DELAY);\n };\n\n const funnelNextOrSubmitAttempt = () => setSubmissionAttempt(i => i + 1);\n\n const funnelCancel = () => {};\n\n const funnelContextValue: FunnelContextValue = {\n funnelInteractionId,\n setFunnelInteractionId,\n funnelType: props.funnelType,\n optionalStepNumbers: props.optionalStepNumbers,\n totalFunnelSteps: props.totalFunnelSteps,\n funnelSubmit,\n funnelCancel,\n submissionAttempt,\n funnelNextOrSubmitAttempt,\n funnelState,\n errorCount,\n loadingButtonCount,\n };\n\n return <FunnelContext.Provider value={funnelContextValue}>{children}</FunnelContext.Provider>;\n};\n\ntype AnalyticsFunnelStepProps = {\n children?: React.ReactNode | ((props: FunnelStepContextValue) => React.ReactNode);\n} & Pick<FunnelStepProps, 'stepNumber' | 'stepNameSelector'>;\n\nexport const AnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector }: AnalyticsFunnelStepProps) => {\n const { funnelInteractionId, funnelState } = useFunnel();\n\n const funnelStepProps = { [DATA_ATTR_FUNNEL_STEP]: stepNumber };\n\n // This useEffect hook is used to track the start and completion of interaction with the step.\n // On mount, if there is a valid funnel interaction id, it calls the 'funnelStepStart' method from FunnelMetrics\n // to record the beginning of the interaction with the current step.\n // On unmount, it does a similar thing but this time calling 'funnelStepComplete' to record the completion of the interaction.\n useEffect(() => {\n const stepName = getNameFromSelector(stepNameSelector);\n\n if (funnelInteractionId && funnelState.current === 'default') {\n FunnelMetrics.funnelStepStart({\n funnelInteractionId,\n stepNumber,\n stepName,\n stepNameSelector,\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n\n return () => {\n //eslint-disable-next-line react-hooks/exhaustive-deps\n if (funnelInteractionId && funnelState.current !== 'cancelled') {\n FunnelMetrics.funnelStepComplete({\n funnelInteractionId,\n stepNumber,\n stepName,\n stepNameSelector,\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n };\n //eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, stepNumber, stepNameSelector]);\n\n const contextValue: FunnelStepContextValue = { 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 subStepId = useUniqueId('substep');\n const subStepSelector = getSubStepSelector(subStepId);\n const subStepNameSelector = getSubStepNameSelector(subStepId);\n const subStepRef = useRef<HTMLDivElement | null>(null);\n\n const newContext: FunnelSubStepContextValue = {\n subStepSelector,\n subStepNameSelector,\n subStepId,\n subStepRef,\n isNestedSubStep: false,\n };\n\n const inheritedContext = { ...useContext(FunnelSubStepContext), isNestedSubStep: true };\n\n const context = inheritedContext.subStepId ? inheritedContext : newContext;\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 '../';\nimport { FunnelProps, FunnelStepProps } from '../interfaces';\n\nimport {\n DATA_ATTR_FUNNEL_STEP,\n getFunnelNameSelector,\n getNameFromSelector,\n getSubStepAllSelector,\n getSubStepNameSelector,\n getSubStepSelector,\n} from '../selectors';\n\nexport const FUNNEL_VERSION = '1.0';\n\ntype AnalyticsFunnelProps = { children?: React.ReactNode } & Pick<\n FunnelProps,\n 'funnelType' | 'optionalStepNumbers' | 'totalFunnelSteps'\n>;\n\nexport const AnalyticsFunnel = ({ children, ...props }: AnalyticsFunnelProps) => {\n const [funnelInteractionId, setFunnelInteractionId] = useState<string>('');\n const [submissionAttempt, setSubmissionAttempt] = useState(0);\n const isVisualRefresh = useVisualRefresh();\n const funnelState = useRef<FunnelState>('default');\n const errorCount = useRef<number>(0);\n const loadingButtonCount = useRef<number>(0);\n\n // This useEffect hook is run once on component mount to initiate the funnel analytics.\n // It first calls the 'funnelStart' method from FunnelMetrics, providing all necessary details\n // about the funnel, and receives a unique interaction id.\n // This unique interaction id is then stored in the state for further use.\n //\n // On component unmount, it checks whether the funnel was successfully completed.\n // Based on this, it either calls 'funnelComplete' or 'funnelCancelled' method from FunnelMetrics.\n //\n // The eslint-disable is required as we deliberately want this effect to run only once on mount and unmount,\n // hence we do not provide any dependencies.\n useEffect(() => {\n // Reset the state, in case the component was re-mounted.\n funnelState.current = 'default';\n\n const funnelInteractionId = FunnelMetrics.funnelStart({\n funnelNameSelector: getFunnelNameSelector(),\n optionalStepNumbers: props.optionalStepNumbers,\n funnelType: props.funnelType,\n totalFunnelSteps: props.totalFunnelSteps,\n componentVersion: PACKAGE_VERSION,\n theme: isVisualRefresh ? 'vr' : 'classic',\n funnelVersion: FUNNEL_VERSION,\n });\n\n setFunnelInteractionId(funnelInteractionId);\n\n /*\n A funnel counts as \"successful\" if it is unmounted after being \"complete\".\n */\n /* eslint-disable react-hooks/exhaustive-deps */\n return () => {\n if (funnelState.current === 'validating') {\n // Finish the validation phase early.\n FunnelMetrics.funnelComplete({ funnelInteractionId });\n funnelState.current = 'complete';\n }\n\n if (funnelState.current === 'complete') {\n FunnelMetrics.funnelSuccessful({ funnelInteractionId });\n } else {\n FunnelMetrics.funnelCancelled({ funnelInteractionId });\n funnelState.current = 'cancelled';\n }\n };\n }, []);\n /* eslint-enable react-hooks/exhaustive-deps */\n\n const funnelSubmit = () => {\n funnelState.current = 'validating';\n\n /*\n When the user attempts to submit the form, we wait for 50 milliseconds before checking\n if any form validation errors are present. This value was chosen to give enough time\n for validation and rerendering to occur, but be low enough that the user will not\n be able to take further action in the meantime.\n */\n const VALIDATION_WAIT_DELAY = 50;\n /*\n Loading is expected to take longer than validation, so we can keep the pressure on the CPU low.\n */\n const LOADING_WAIT_DELAY = 100;\n\n const checkForCompleteness = () => {\n if (funnelState.current === 'complete') {\n return;\n }\n\n if (loadingButtonCount.current > 0) {\n setTimeout(checkForCompleteness, LOADING_WAIT_DELAY);\n return;\n }\n\n if (errorCount.current === 0) {\n /*\n If no validation errors are rendered, we treat the funnel as complete.\n */\n FunnelMetrics.funnelComplete({ funnelInteractionId });\n funnelState.current = 'complete';\n } else {\n funnelState.current = 'default';\n }\n };\n\n setTimeout(checkForCompleteness, VALIDATION_WAIT_DELAY);\n };\n\n const funnelNextOrSubmitAttempt = () => setSubmissionAttempt(i => i + 1);\n\n const funnelCancel = () => {};\n\n const funnelContextValue: FunnelContextValue = {\n funnelInteractionId,\n setFunnelInteractionId,\n funnelType: props.funnelType,\n optionalStepNumbers: props.optionalStepNumbers,\n totalFunnelSteps: props.totalFunnelSteps,\n funnelSubmit,\n funnelCancel,\n submissionAttempt,\n funnelNextOrSubmitAttempt,\n funnelState,\n errorCount,\n loadingButtonCount,\n };\n\n return <FunnelContext.Provider value={funnelContextValue}>{children}</FunnelContext.Provider>;\n};\n\ntype AnalyticsFunnelStepProps = {\n children?: React.ReactNode | ((props: FunnelStepContextValue) => React.ReactNode);\n} & Pick<FunnelStepProps, 'stepNumber' | 'stepNameSelector'>;\n\nexport const AnalyticsFunnelStep = (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 <InnerAnalyticsFunnelStep {...props} key={props.stepNumber} />\n);\n\nconst InnerAnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector }: AnalyticsFunnelStepProps) => {\n const { funnelInteractionId, funnelState } = useFunnel();\n\n const funnelStepProps = { [DATA_ATTR_FUNNEL_STEP]: stepNumber };\n\n const subStepCount = useRef<number>(0);\n\n // This useEffect hook is used to track the start and completion of interaction with the step.\n // On mount, if there is a valid funnel interaction id, it calls the 'funnelStepStart' method from FunnelMetrics\n // to record the beginning of the interaction with the current step.\n // On unmount, it does a similar thing but this time calling 'funnelStepComplete' to record the completion of the interaction.\n useEffect(() => {\n const stepName = getNameFromSelector(stepNameSelector);\n\n if (funnelInteractionId && funnelState.current === 'default') {\n FunnelMetrics.funnelStepStart({\n funnelInteractionId,\n stepNumber,\n stepName,\n stepNameSelector,\n subStepAllSelector: getSubStepAllSelector(),\n totalSubSteps: subStepCount.current,\n });\n }\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n if (funnelInteractionId && 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 //eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, stepNumber, stepNameSelector]);\n\n const contextValue: FunnelStepContextValue = { stepNumber, stepNameSelector, funnelStepProps, subStepCount };\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 subStepId = useUniqueId('substep');\n const subStepSelector = getSubStepSelector(subStepId);\n const subStepNameSelector = getSubStepNameSelector(subStepId);\n const subStepRef = useRef<HTMLDivElement | null>(null);\n const { subStepCount } = useFunnelStep();\n\n const newContext: FunnelSubStepContextValue = {\n subStepSelector,\n subStepNameSelector,\n subStepId,\n subStepRef,\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\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return () => void subStepCount.current--;\n }\n }, [isNested, subStepCount]);\n\n const context = isNested ? inheritedContext : newContext;\n\n return <FunnelSubStepContext.Provider value={context}>{children}</FunnelSubStepContext.Provider>;\n};\n"]}
|
|
@@ -19,6 +19,7 @@ export interface FunnelStepContextValue {
|
|
|
19
19
|
stepNameSelector: string;
|
|
20
20
|
stepNumber: number;
|
|
21
21
|
funnelStepProps?: Record<string, string | number | boolean | undefined>;
|
|
22
|
+
subStepCount: MutableRefObject<number>;
|
|
22
23
|
}
|
|
23
24
|
export interface FunnelSubStepContextValue {
|
|
24
25
|
subStepId: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"analytics-context.d.ts","sourceRoot":"lib/default/","sources":["internal/analytics/context/analytics-context.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9E,MAAM,WAAW,kBAAkB;IACjC,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,UAAU,EAAE,UAAU,CAAC;IACvB,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,sBAAsB,EAAE,CAAC,mBAAmB,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,iBAAiB,EAAE,MAAM,CAAC;IAC1B,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC,WAAW,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACpC,UAAU,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACrC,kBAAkB,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CAC9C;AAED,MAAM,WAAW,sBAAsB;IACrC,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;
|
|
1
|
+
{"version":3,"file":"analytics-context.d.ts","sourceRoot":"lib/default/","sources":["internal/analytics/context/analytics-context.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9E,MAAM,WAAW,kBAAkB;IACjC,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,UAAU,EAAE,UAAU,CAAC;IACvB,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,sBAAsB,EAAE,CAAC,mBAAmB,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,iBAAiB,EAAE,MAAM,CAAC;IAC1B,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC,WAAW,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACpC,UAAU,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACrC,kBAAkB,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CAC9C;AAED,MAAM,WAAW,sBAAsB;IACrC,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;IACxE,YAAY,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CACxC;AAED,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,UAAU,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACpD,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC;CAC5E;AAGD,eAAO,MAAM,aAAa,6CAaxB,CAAC;AAEH,eAAO,MAAM,iBAAiB,iDAI5B,CAAC;AAEH,eAAO,MAAM,oBAAoB,oDAM/B,CAAC"}
|
|
@@ -1 +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,EAA+B,aAAa,EAAE,MAAM,OAAO,CAAC;
|
|
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,EAA+B,aAAa,EAAE,MAAM,OAAO,CAAC;AAoCnE,0BAA0B;AAC1B,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAqB;IAC7D,mBAAmB,EAAE,SAAS;IAC9B,sBAAsB,EAAE,GAAG,EAAE,GAAE,CAAC;IAChC,UAAU,EAAE,aAAa;IACzB,mBAAmB,EAAE,EAAE;IACvB,gBAAgB,EAAE,CAAC;IACnB,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC;IACtB,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC;IACtB,iBAAiB,EAAE,CAAC;IACpB,yBAAyB,EAAE,GAAG,EAAE,GAAE,CAAC;IACnC,WAAW,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;IACnC,UAAU,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;IAC1B,kBAAkB,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;CACnC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAyB;IACrE,gBAAgB,EAAE,EAAE;IACpB,UAAU,EAAE,CAAC;IACb,YAAY,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;CAC7B,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAA4B;IAC3E,SAAS,EAAE,EAAE;IACb,eAAe,EAAE,EAAE;IACnB,mBAAmB,EAAE,EAAE;IACvB,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;IAC7B,eAAe,EAAE,KAAK;CACvB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { MutableRefObject, RefObject, createContext } from 'react';\nimport { FunnelType } from '../interfaces';\n\nexport type FunnelState = 'default' | 'validating' | 'complete' | 'cancelled';\n\nexport interface FunnelContextValue {\n funnelInteractionId: string | undefined;\n funnelType: FunnelType;\n optionalStepNumbers: number[];\n totalFunnelSteps: number;\n funnelSubmit: () => void;\n funnelCancel: () => void;\n setFunnelInteractionId: (funnelInteractionId: string) => void;\n submissionAttempt: number;\n funnelNextOrSubmitAttempt: () => void;\n funnelState: RefObject<FunnelState>;\n errorCount: MutableRefObject<number>;\n loadingButtonCount: MutableRefObject<number>;\n}\n\nexport interface FunnelStepContextValue {\n stepNameSelector: string;\n stepNumber: number;\n funnelStepProps?: Record<string, string | number | boolean | undefined>;\n subStepCount: MutableRefObject<number>;\n}\n\nexport interface FunnelSubStepContextValue {\n subStepId: string;\n subStepSelector: string;\n subStepNameSelector: string;\n subStepRef: MutableRefObject<HTMLDivElement | null>;\n isNestedSubStep: boolean;\n funnelSubStepProps?: Record<string, string | number | boolean | undefined>;\n}\n\n/* istanbul ignore next */\nexport const FunnelContext = createContext<FunnelContextValue>({\n funnelInteractionId: undefined,\n setFunnelInteractionId: () => {},\n funnelType: 'single-page',\n optionalStepNumbers: [],\n totalFunnelSteps: 0,\n funnelSubmit: () => {},\n funnelCancel: () => {},\n submissionAttempt: 0,\n funnelNextOrSubmitAttempt: () => {},\n funnelState: { current: 'default' },\n errorCount: { current: 0 },\n loadingButtonCount: { current: 0 },\n});\n\nexport const FunnelStepContext = createContext<FunnelStepContextValue>({\n stepNameSelector: '',\n stepNumber: 0,\n subStepCount: { current: 0 },\n});\n\nexport const FunnelSubStepContext = createContext<FunnelSubStepContextValue>({\n subStepId: '',\n subStepSelector: '',\n subStepNameSelector: '',\n subStepRef: { current: null },\n isNestedSubStep: false,\n});\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/autosuggest-input/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAIrF,OAAO,EAAE,+BAA+B,EAAuB,MAAM,kCAAkC,CAAC;AACxG,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAA8D,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAErH,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,cAAc,EACf,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAK5E,MAAM,WAAW,qBACf,SAAQ,kBAAkB,EACxB,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,+BAA+B,EAC/B,gBAAgB,EAChB,0BAA0B;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,CAAC;IAClD,cAAc,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,CAAC;IAC7D,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,4BAA4B;IAC3C,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB,CAAC,GAAG;IAC/D,KAAK,CAAC,OAAO,CAAC,EAAE,4BAA4B,GAAG,IAAI,CAAC;IACpD,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;CACf;AAED,QAAA,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/autosuggest-input/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAIrF,OAAO,EAAE,+BAA+B,EAAuB,MAAM,kCAAkC,CAAC;AACxG,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAA8D,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAErH,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,cAAc,EACf,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAK5E,MAAM,WAAW,qBACf,SAAQ,kBAAkB,EACxB,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,+BAA+B,EAC/B,gBAAgB,EAChB,0BAA0B;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,CAAC;IAClD,cAAc,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,CAAC;IAC7D,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,4BAA4B;IAC3C,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB,CAAC,GAAG;IAC/D,KAAK,CAAC,OAAO,CAAC,EAAE,4BAA4B,GAAG,IAAI,CAAC;IACpD,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;CACf;AAED,QAAA,MAAM,gBAAgB,mGAgPrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -53,18 +53,19 @@ const AutosuggestInput = React.forwardRef((_a, ref) => {
|
|
|
53
53
|
}
|
|
54
54
|
preventOpenOnFocusRef.current = false;
|
|
55
55
|
};
|
|
56
|
-
const
|
|
57
|
-
|
|
56
|
+
const fireKeydown = (event) => fireCancelableEvent(onKeyDown, event.detail, event);
|
|
57
|
+
const handleKeyDown = (event) => {
|
|
58
|
+
switch (event.detail.keyCode) {
|
|
58
59
|
case KeyCode.down: {
|
|
59
60
|
onPressArrowDown === null || onPressArrowDown === void 0 ? void 0 : onPressArrowDown();
|
|
60
61
|
openDropdown();
|
|
61
|
-
|
|
62
|
+
event.preventDefault();
|
|
62
63
|
break;
|
|
63
64
|
}
|
|
64
65
|
case KeyCode.up: {
|
|
65
66
|
onPressArrowUp === null || onPressArrowUp === void 0 ? void 0 : onPressArrowUp();
|
|
66
67
|
openDropdown();
|
|
67
|
-
|
|
68
|
+
event.preventDefault();
|
|
68
69
|
break;
|
|
69
70
|
}
|
|
70
71
|
case KeyCode.enter: {
|
|
@@ -72,9 +73,9 @@ const AutosuggestInput = React.forwardRef((_a, ref) => {
|
|
|
72
73
|
if (!(onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter())) {
|
|
73
74
|
closeDropdown();
|
|
74
75
|
}
|
|
75
|
-
|
|
76
|
+
event.preventDefault();
|
|
76
77
|
}
|
|
77
|
-
|
|
78
|
+
fireKeydown(event);
|
|
78
79
|
break;
|
|
79
80
|
}
|
|
80
81
|
case KeyCode.escape: {
|
|
@@ -84,12 +85,12 @@ const AutosuggestInput = React.forwardRef((_a, ref) => {
|
|
|
84
85
|
else if (value) {
|
|
85
86
|
fireNonCancelableEvent(onChange, { value: '' });
|
|
86
87
|
}
|
|
87
|
-
|
|
88
|
-
|
|
88
|
+
event.preventDefault();
|
|
89
|
+
fireKeydown(event);
|
|
89
90
|
break;
|
|
90
91
|
}
|
|
91
92
|
default: {
|
|
92
|
-
|
|
93
|
+
fireKeydown(event);
|
|
93
94
|
}
|
|
94
95
|
}
|
|
95
96
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/autosuggest-input/index.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\n\nimport React, { Ref, useRef, useState, useImperativeHandle, useEffect } from 'react';\n\nimport Dropdown from '../dropdown';\n\nimport { FormFieldValidationControlProps, useFormFieldContext } from '../../context/form-field-context';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { BaseKeyDetail, fireCancelableEvent, fireNonCancelableEvent, NonCancelableEventHandler } from '../../events';\nimport InternalInput from '../../../input/internal';\nimport {\n BaseChangeDetail,\n BaseInputProps,\n InputAutoCorrect,\n InputClearLabel,\n InputKeyEvents,\n} from '../../../input/interfaces';\nimport { AutosuggestProps } from '../../../autosuggest/interfaces';\nimport { ExpandToViewport } from '../dropdown/interfaces';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component';\nimport { KeyCode } from '../../keycode';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\n\nexport interface AutosuggestInputProps\n extends BaseComponentProps,\n BaseInputProps,\n InputAutoCorrect,\n InputKeyEvents,\n InputClearLabel,\n FormFieldValidationControlProps,\n ExpandToViewport,\n InternalBaseComponentProps {\n ariaControls?: string;\n ariaActivedescendant?: string;\n dropdownExpanded?: boolean;\n dropdownContentKey?: string;\n dropdownContentFocusable?: boolean;\n dropdownContent?: React.ReactNode;\n dropdownFooter?: React.ReactNode;\n dropdownWidth?: number;\n loopFocus?: boolean;\n onCloseDropdown?: NonCancelableEventHandler<null>;\n onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n onPressArrowDown?: () => void;\n onPressArrowUp?: () => void;\n onPressEnter?: () => boolean;\n}\n\nexport interface AutosuggestInputFocusOptions {\n preventDropdown?: boolean;\n}\n\nexport interface AutosuggestInputRef extends AutosuggestProps.Ref {\n focus(options?: AutosuggestInputFocusOptions): void;\n open(): void;\n close(): void;\n}\n\nconst AutosuggestInput = React.forwardRef(\n (\n {\n value,\n onChange,\n onBlur,\n onFocus,\n onKeyUp,\n onKeyDown,\n name,\n placeholder,\n disabled,\n readOnly,\n autoFocus,\n ariaLabel,\n ariaRequired,\n disableBrowserAutocorrect = false,\n expandToViewport,\n ariaControls,\n ariaActivedescendant,\n clearAriaLabel,\n dropdownExpanded = true,\n dropdownContentKey,\n dropdownContentFocusable = false,\n dropdownContent = null,\n dropdownFooter = null,\n dropdownWidth,\n loopFocus,\n onCloseDropdown,\n onDelayedInput,\n onPressArrowDown,\n onPressArrowUp,\n onPressEnter,\n __internalRootRef,\n ...restProps\n }: AutosuggestInputProps,\n ref: Ref<AutosuggestInputRef>\n ) => {\n const baseProps = getBaseProps(restProps);\n const formFieldContext = useFormFieldContext(restProps);\n\n const inputRef = useRef<HTMLInputElement>(null);\n const dropdownContentRef = useRef<HTMLDivElement>(null);\n const dropdownFooterRef = useRef<HTMLDivElement>(null);\n const preventOpenOnFocusRef = useRef(false);\n const preventCloseOnBlurRef = useRef(false);\n\n const [open, setOpen] = useState(false);\n\n const openDropdown = () => !readOnly && setOpen(true);\n\n const closeDropdown = () => {\n setOpen(false);\n fireNonCancelableEvent(onCloseDropdown, null);\n };\n\n useImperativeHandle(ref, () => ({\n focus(options?: AutosuggestInputFocusOptions) {\n if (options?.preventDropdown) {\n preventOpenOnFocusRef.current = true;\n }\n inputRef.current?.focus();\n },\n select() {\n inputRef.current?.select();\n },\n open: openDropdown,\n close: closeDropdown,\n }));\n\n const handleBlur = () => {\n if (!preventCloseOnBlurRef.current) {\n closeDropdown();\n fireNonCancelableEvent(onBlur, null);\n }\n };\n\n const handleFocus = () => {\n if (!preventOpenOnFocusRef.current) {\n openDropdown();\n fireNonCancelableEvent(onFocus, null);\n }\n preventOpenOnFocusRef.current = false;\n };\n\n const handleKeyDown = (e: CustomEvent<BaseKeyDetail>) => {\n switch (e.detail.keyCode) {\n case KeyCode.down: {\n onPressArrowDown?.();\n openDropdown();\n e.preventDefault();\n break;\n }\n case KeyCode.up: {\n onPressArrowUp?.();\n openDropdown();\n e.preventDefault();\n break;\n }\n case KeyCode.enter: {\n if (open) {\n if (!onPressEnter?.()) {\n closeDropdown();\n }\n e.preventDefault();\n }\n fireCancelableEvent(onKeyDown, e.detail);\n break;\n }\n case KeyCode.escape: {\n if (open) {\n closeDropdown();\n } else if (value) {\n fireNonCancelableEvent(onChange, { value: '' });\n }\n e.preventDefault();\n fireCancelableEvent(onKeyDown, e.detail);\n break;\n }\n default: {\n fireCancelableEvent(onKeyDown, e.detail);\n }\n }\n };\n\n const handleChange = (value: string) => {\n openDropdown();\n fireNonCancelableEvent(onChange, { value });\n };\n\n const handleDelayedInput = (value: string) => {\n fireNonCancelableEvent(onDelayedInput, { value });\n };\n\n const handleDropdownMouseDown: React.MouseEventHandler = event => {\n // Prevent currently focused element from losing focus.\n if (!dropdownContentFocusable) {\n event.preventDefault();\n }\n // Prevent closing dropdown on click inside.\n else {\n preventCloseOnBlurRef.current = true;\n requestAnimationFrame(() => {\n preventCloseOnBlurRef.current = false;\n });\n }\n };\n\n const expanded = open && dropdownExpanded;\n const nativeAttributes = {\n name,\n placeholder,\n autoFocus,\n onClick: openDropdown,\n role: 'combobox',\n 'aria-autocomplete': 'list',\n 'aria-expanded': expanded,\n 'aria-controls': open ? ariaControls : undefined,\n // 'aria-owns' needed for safari+vo to announce activedescendant content\n 'aria-owns': open ? ariaControls : undefined,\n 'aria-label': ariaLabel,\n 'aria-activedescendant': ariaActivedescendant,\n };\n\n // Closes dropdown when outside click is detected.\n // Similar to the internal dropdown implementation but includes the target as well.\n useEffect(() => {\n if (!open) {\n return;\n }\n\n const clickListener = (event: MouseEvent) => {\n if (\n !inputRef.current?.contains(event.target as Node) &&\n !dropdownContentRef.current?.contains(event.target as Node) &&\n !dropdownFooterRef.current?.contains(event.target as Node)\n ) {\n closeDropdown();\n }\n };\n\n window.addEventListener('mousedown', clickListener);\n\n return () => {\n window.removeEventListener('mousedown', clickListener);\n };\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open]);\n\n return (\n <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n <Dropdown\n minWidth={dropdownWidth}\n stretchWidth={!dropdownWidth}\n contentKey={dropdownContentKey}\n onFocus={handleFocus}\n onBlur={handleBlur}\n trigger={\n <InternalInput\n type=\"visualSearch\"\n value={value}\n onChange={event => handleChange(event.detail.value)}\n __onDelayedInput={event => handleDelayedInput(event.detail.value)}\n onKeyDown={handleKeyDown}\n onKeyUp={onKeyUp}\n disabled={disabled}\n disableBrowserAutocorrect={disableBrowserAutocorrect}\n readOnly={readOnly}\n ariaRequired={ariaRequired}\n clearAriaLabel={clearAriaLabel}\n ref={inputRef}\n autoComplete={false}\n __nativeAttributes={nativeAttributes}\n {...formFieldContext}\n />\n }\n onMouseDown={handleDropdownMouseDown}\n open={open && !!dropdownContent}\n footer={\n dropdownFooterRef && (\n <div ref={dropdownFooterRef} className={styles['dropdown-footer']}>\n {dropdownFooter}\n </div>\n )\n }\n expandToViewport={expandToViewport}\n loopFocus={loopFocus}\n >\n {open && dropdownContent ? (\n <div ref={dropdownContentRef} className={styles['dropdown-content']}>\n {dropdownContent}\n </div>\n ) : null}\n </Dropdown>\n </div>\n );\n }\n);\n\nexport default AutosuggestInput;\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/autosuggest-input/index.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\n\nimport React, { Ref, useRef, useState, useImperativeHandle, useEffect } from 'react';\n\nimport Dropdown from '../dropdown';\n\nimport { FormFieldValidationControlProps, useFormFieldContext } from '../../context/form-field-context';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { BaseKeyDetail, fireCancelableEvent, fireNonCancelableEvent, NonCancelableEventHandler } from '../../events';\nimport InternalInput from '../../../input/internal';\nimport {\n BaseChangeDetail,\n BaseInputProps,\n InputAutoCorrect,\n InputClearLabel,\n InputKeyEvents,\n} from '../../../input/interfaces';\nimport { AutosuggestProps } from '../../../autosuggest/interfaces';\nimport { ExpandToViewport } from '../dropdown/interfaces';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component';\nimport { KeyCode } from '../../keycode';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\n\nexport interface AutosuggestInputProps\n extends BaseComponentProps,\n BaseInputProps,\n InputAutoCorrect,\n InputKeyEvents,\n InputClearLabel,\n FormFieldValidationControlProps,\n ExpandToViewport,\n InternalBaseComponentProps {\n ariaControls?: string;\n ariaActivedescendant?: string;\n dropdownExpanded?: boolean;\n dropdownContentKey?: string;\n dropdownContentFocusable?: boolean;\n dropdownContent?: React.ReactNode;\n dropdownFooter?: React.ReactNode;\n dropdownWidth?: number;\n loopFocus?: boolean;\n onCloseDropdown?: NonCancelableEventHandler<null>;\n onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n onPressArrowDown?: () => void;\n onPressArrowUp?: () => void;\n onPressEnter?: () => boolean;\n}\n\nexport interface AutosuggestInputFocusOptions {\n preventDropdown?: boolean;\n}\n\nexport interface AutosuggestInputRef extends AutosuggestProps.Ref {\n focus(options?: AutosuggestInputFocusOptions): void;\n open(): void;\n close(): void;\n}\n\nconst AutosuggestInput = React.forwardRef(\n (\n {\n value,\n onChange,\n onBlur,\n onFocus,\n onKeyUp,\n onKeyDown,\n name,\n placeholder,\n disabled,\n readOnly,\n autoFocus,\n ariaLabel,\n ariaRequired,\n disableBrowserAutocorrect = false,\n expandToViewport,\n ariaControls,\n ariaActivedescendant,\n clearAriaLabel,\n dropdownExpanded = true,\n dropdownContentKey,\n dropdownContentFocusable = false,\n dropdownContent = null,\n dropdownFooter = null,\n dropdownWidth,\n loopFocus,\n onCloseDropdown,\n onDelayedInput,\n onPressArrowDown,\n onPressArrowUp,\n onPressEnter,\n __internalRootRef,\n ...restProps\n }: AutosuggestInputProps,\n ref: Ref<AutosuggestInputRef>\n ) => {\n const baseProps = getBaseProps(restProps);\n const formFieldContext = useFormFieldContext(restProps);\n\n const inputRef = useRef<HTMLInputElement>(null);\n const dropdownContentRef = useRef<HTMLDivElement>(null);\n const dropdownFooterRef = useRef<HTMLDivElement>(null);\n const preventOpenOnFocusRef = useRef(false);\n const preventCloseOnBlurRef = useRef(false);\n\n const [open, setOpen] = useState(false);\n\n const openDropdown = () => !readOnly && setOpen(true);\n\n const closeDropdown = () => {\n setOpen(false);\n fireNonCancelableEvent(onCloseDropdown, null);\n };\n\n useImperativeHandle(ref, () => ({\n focus(options?: AutosuggestInputFocusOptions) {\n if (options?.preventDropdown) {\n preventOpenOnFocusRef.current = true;\n }\n inputRef.current?.focus();\n },\n select() {\n inputRef.current?.select();\n },\n open: openDropdown,\n close: closeDropdown,\n }));\n\n const handleBlur = () => {\n if (!preventCloseOnBlurRef.current) {\n closeDropdown();\n fireNonCancelableEvent(onBlur, null);\n }\n };\n\n const handleFocus = () => {\n if (!preventOpenOnFocusRef.current) {\n openDropdown();\n fireNonCancelableEvent(onFocus, null);\n }\n preventOpenOnFocusRef.current = false;\n };\n\n const fireKeydown = (event: CustomEvent<BaseKeyDetail>) => fireCancelableEvent(onKeyDown, event.detail, event);\n\n const handleKeyDown = (event: CustomEvent<BaseKeyDetail>) => {\n switch (event.detail.keyCode) {\n case KeyCode.down: {\n onPressArrowDown?.();\n openDropdown();\n event.preventDefault();\n break;\n }\n case KeyCode.up: {\n onPressArrowUp?.();\n openDropdown();\n event.preventDefault();\n break;\n }\n case KeyCode.enter: {\n if (open) {\n if (!onPressEnter?.()) {\n closeDropdown();\n }\n event.preventDefault();\n }\n fireKeydown(event);\n break;\n }\n case KeyCode.escape: {\n if (open) {\n closeDropdown();\n } else if (value) {\n fireNonCancelableEvent(onChange, { value: '' });\n }\n event.preventDefault();\n fireKeydown(event);\n break;\n }\n default: {\n fireKeydown(event);\n }\n }\n };\n\n const handleChange = (value: string) => {\n openDropdown();\n fireNonCancelableEvent(onChange, { value });\n };\n\n const handleDelayedInput = (value: string) => {\n fireNonCancelableEvent(onDelayedInput, { value });\n };\n\n const handleDropdownMouseDown: React.MouseEventHandler = event => {\n // Prevent currently focused element from losing focus.\n if (!dropdownContentFocusable) {\n event.preventDefault();\n }\n // Prevent closing dropdown on click inside.\n else {\n preventCloseOnBlurRef.current = true;\n requestAnimationFrame(() => {\n preventCloseOnBlurRef.current = false;\n });\n }\n };\n\n const expanded = open && dropdownExpanded;\n const nativeAttributes = {\n name,\n placeholder,\n autoFocus,\n onClick: openDropdown,\n role: 'combobox',\n 'aria-autocomplete': 'list',\n 'aria-expanded': expanded,\n 'aria-controls': open ? ariaControls : undefined,\n // 'aria-owns' needed for safari+vo to announce activedescendant content\n 'aria-owns': open ? ariaControls : undefined,\n 'aria-label': ariaLabel,\n 'aria-activedescendant': ariaActivedescendant,\n };\n\n // Closes dropdown when outside click is detected.\n // Similar to the internal dropdown implementation but includes the target as well.\n useEffect(() => {\n if (!open) {\n return;\n }\n\n const clickListener = (event: MouseEvent) => {\n if (\n !inputRef.current?.contains(event.target as Node) &&\n !dropdownContentRef.current?.contains(event.target as Node) &&\n !dropdownFooterRef.current?.contains(event.target as Node)\n ) {\n closeDropdown();\n }\n };\n\n window.addEventListener('mousedown', clickListener);\n\n return () => {\n window.removeEventListener('mousedown', clickListener);\n };\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open]);\n\n return (\n <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n <Dropdown\n minWidth={dropdownWidth}\n stretchWidth={!dropdownWidth}\n contentKey={dropdownContentKey}\n onFocus={handleFocus}\n onBlur={handleBlur}\n trigger={\n <InternalInput\n type=\"visualSearch\"\n value={value}\n onChange={event => handleChange(event.detail.value)}\n __onDelayedInput={event => handleDelayedInput(event.detail.value)}\n onKeyDown={handleKeyDown}\n onKeyUp={onKeyUp}\n disabled={disabled}\n disableBrowserAutocorrect={disableBrowserAutocorrect}\n readOnly={readOnly}\n ariaRequired={ariaRequired}\n clearAriaLabel={clearAriaLabel}\n ref={inputRef}\n autoComplete={false}\n __nativeAttributes={nativeAttributes}\n {...formFieldContext}\n />\n }\n onMouseDown={handleDropdownMouseDown}\n open={open && !!dropdownContent}\n footer={\n dropdownFooterRef && (\n <div ref={dropdownFooterRef} className={styles['dropdown-footer']}>\n {dropdownFooter}\n </div>\n )\n }\n expandToViewport={expandToViewport}\n loopFocus={loopFocus}\n >\n {open && dropdownContent ? (\n <div ref={dropdownContentRef} className={styles['dropdown-content']}>\n {dropdownContent}\n </div>\n ) : null}\n </Dropdown>\n </div>\n );\n }\n);\n\nexport default AutosuggestInput;\n"]}
|
|
@@ -4,7 +4,7 @@ import { __rest } from "tslib";
|
|
|
4
4
|
import React, { useState } from 'react';
|
|
5
5
|
import { useCallback, useRef } from 'react';
|
|
6
6
|
import { Transition as ReactTransitionGroupTransition, } from 'react-transition-group';
|
|
7
|
-
import { useReducedMotion } from '
|
|
7
|
+
import { useReducedMotion } from '@cloudscape-design/component-toolkit/internal';
|
|
8
8
|
/**
|
|
9
9
|
* This component is a wrapper around the CSSTransition component.
|
|
10
10
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/transition/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAoB,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EACL,UAAU,IAAI,8BAA8B,GAE7C,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,gBAAgB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/transition/index.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, { useState } from 'react';\nimport { MutableRefObject, useCallback, useRef } from 'react';\nimport {\n Transition as ReactTransitionGroupTransition,\n TransitionStatus as ReactTransitionGroupTransitionStatus,\n} from 'react-transition-group';\nimport { useReducedMotion } from '@cloudscape-design/component-toolkit/internal';\n\nexport type TransitionStatus = ReactTransitionGroupTransitionStatus | 'enter' | 'exit';\n\nexport interface TransitionProps {\n in: boolean;\n exit?: boolean;\n\n disabled?: boolean;\n\n children: (state: TransitionStatus, transitioningElementRef: MutableRefObject<any>) => React.ReactNode;\n onStatusChange?: (status: TransitionStatus) => void;\n transitionChangeDelay?: { entering?: number };\n}\n\n/**\n * This component is a wrapper around the CSSTransition component.\n *\n * It provides a second parameter in its rendering function that must be\n * attached to the node that is transitioning.\n */\nexport function Transition({\n in: isIn,\n children,\n exit = true,\n onStatusChange = () => void 0,\n disabled = false,\n transitionChangeDelay,\n ...rest\n}: TransitionProps) {\n const transitionRootElement = useRef<HTMLElement>(null);\n // the initial state of the transition should be either 'exited' or 'entered' depending\n // on the `in` property, this mimicks how internally the Transition component works here:\n // https://github.com/reactjs/react-transition-group/blob/6cbd6aaedaf8e9472007640b429ddb48c6c24158/src/Transition.js#L121\n const [transitionState, setTransitionState] = useState<TransitionStatus>(isIn ? 'entered' : 'exited');\n const motionDisabled = useReducedMotion(transitionRootElement) || disabled;\n\n const addTransitionEndListener = useCallback((done: () => void) => {\n const node = transitionRootElement.current;\n\n if (node === null) {\n return;\n }\n const listener = (e: TransitionEvent | AnimationEvent) => {\n if (e.target === node) {\n node.removeEventListener('transitionend', listener);\n node.removeEventListener('animationend', listener);\n done();\n }\n };\n node.addEventListener('transitionend', listener);\n node.addEventListener('animationend', listener);\n }, []);\n\n return (\n <ReactTransitionGroupTransition\n addEndListener={addTransitionEndListener}\n timeout={motionDisabled ? 0 : undefined}\n in={isIn}\n nodeRef={transitionRootElement}\n exit={exit}\n onEnter={isAppearing => {\n if (!isAppearing) {\n setTransitionState('enter');\n onStatusChange('enter');\n }\n }}\n onEntering={isAppearing => {\n if (!isAppearing) {\n // This line forces the browser to recalculate the layout because we want the starting state in the 'enter' style\n // to be applied before the animation starts.\n void transitionRootElement.current?.offsetHeight;\n\n if (transitionChangeDelay?.entering) {\n setTimeout(() => {\n setTransitionState('entering');\n onStatusChange('entering');\n }, transitionChangeDelay?.entering);\n } else {\n setTransitionState('entering');\n onStatusChange('entering');\n }\n }\n }}\n onEntered={isAppearing => {\n if (!isAppearing) {\n setTransitionState('entered');\n onStatusChange('entered');\n }\n }}\n onExit={() => {\n setTransitionState('exit');\n onStatusChange('exit');\n }}\n onExiting={() => {\n setTransitionState('exiting');\n onStatusChange('exiting');\n }}\n onExited={() => {\n setTransitionState('exited');\n onStatusChange('exited');\n }}\n {...rest}\n >\n {() => children(transitionState, transitionRootElement)}\n </ReactTransitionGroupTransition>\n );\n}\n"]}
|
package/internal/environment.js
CHANGED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
/**
|
|
3
|
+
* Conditional resize observer for border box height used in charts.
|
|
4
|
+
*/
|
|
5
|
+
export declare function useHeightMeasure(getMeasure: () => null | HTMLElement | SVGElement, skip?: boolean, deps?: React.DependencyList): number | undefined;
|
|
6
|
+
//# sourceMappingURL=use-height-measure.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-height-measure.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/container-queries/use-height-measure.ts"],"names":[],"mappings":";AAMA;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,UAAU,EAAE,MAAM,IAAI,GAAG,WAAW,GAAG,UAAU,EACjD,IAAI,UAAQ,EACZ,IAAI,GAAE,KAAK,CAAC,cAAmB,sBAOhC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import { useCallback, useState } from 'react';
|
|
4
|
+
import { useResizeObserver } from './use-resize-observer';
|
|
5
|
+
/**
|
|
6
|
+
* Conditional resize observer for border box height used in charts.
|
|
7
|
+
*/
|
|
8
|
+
export function useHeightMeasure(getMeasure, skip = false, deps = []) {
|
|
9
|
+
const [measuredHeight, setHeight] = useState(0);
|
|
10
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
11
|
+
const stableGetMeasure = useCallback(getMeasure, deps);
|
|
12
|
+
useResizeObserver(stableGetMeasure, entry => !skip && setHeight(entry.borderBoxHeight));
|
|
13
|
+
return !skip ? measuredHeight : undefined;
|
|
14
|
+
}
|
|
15
|
+
//# sourceMappingURL=use-height-measure.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-height-measure.js","sourceRoot":"lib/default/","sources":["internal/hooks/container-queries/use-height-measure.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D;;GAEG;AACH,MAAM,UAAU,gBAAgB,CAC9B,UAAiD,EACjD,IAAI,GAAG,KAAK,EACZ,OAA6B,EAAE;IAE/B,MAAM,CAAC,cAAc,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAChD,uDAAuD;IACvD,MAAM,gBAAgB,GAAG,WAAW,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IACvD,iBAAiB,CAAC,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,IAAI,SAAS,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC;IACxF,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;AAC5C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useCallback, useState } from 'react';\nimport { useResizeObserver } from './use-resize-observer';\n\n/**\n * Conditional resize observer for border box height used in charts.\n */\nexport function useHeightMeasure(\n getMeasure: () => null | HTMLElement | SVGElement,\n skip = false,\n deps: React.DependencyList = []\n) {\n const [measuredHeight, setHeight] = useState(0);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const stableGetMeasure = useCallback(getMeasure, deps);\n useResizeObserver(stableGetMeasure, entry => !skip && setHeight(entry.borderBoxHeight));\n return !skip ? measuredHeight : undefined;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/use-portal-mode-classes/index.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/use-portal-mode-classes/index.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,UAWrE"}
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { useVisualContext } from '../../components/visual-context';
|
|
5
|
-
import { useCurrentMode, useDensityMode
|
|
5
|
+
import { useCurrentMode, useDensityMode } from '@cloudscape-design/component-toolkit/internal';
|
|
6
|
+
import { useVisualRefresh } from '../use-visual-mode';
|
|
6
7
|
export function usePortalModeClasses(ref) {
|
|
7
8
|
const colorMode = useCurrentMode(ref);
|
|
8
9
|
const densityMode = useDensityMode(ref);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/hooks/use-portal-mode-classes/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/hooks/use-portal-mode-classes/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAC/F,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,UAAU,oBAAoB,CAAC,GAAiC;IACpE,MAAM,SAAS,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;IACtC,MAAM,WAAW,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;IACxC,MAAM,OAAO,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACtC,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;IACzC,OAAO,IAAI,CAAC;QACV,yCAAyC,EAAE,SAAS,KAAK,MAAM;QAC/D,+CAA+C,EAAE,WAAW,KAAK,SAAS;QAC1E,sBAAsB,EAAE,aAAa;QACrC,CAAC,iBAAiB,OAAO,EAAE,CAAC,EAAE,OAAO;KACtC,CAAC,CAAC;AACL,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { useVisualContext } from '../../components/visual-context';\nimport { useCurrentMode, useDensityMode } from '@cloudscape-design/component-toolkit/internal';\nimport { useVisualRefresh } from '../use-visual-mode';\n\nexport function usePortalModeClasses(ref: React.RefObject<HTMLElement>) {\n const colorMode = useCurrentMode(ref);\n const densityMode = useDensityMode(ref);\n const context = useVisualContext(ref);\n const visualRefresh = useVisualRefresh();\n return clsx({\n 'awsui-polaris-dark-mode awsui-dark-mode': colorMode === 'dark',\n 'awsui-polaris-compact-mode awsui-compact-mode': densityMode === 'compact',\n 'awsui-visual-refresh': visualRefresh,\n [`awsui-context-${context}`]: context,\n });\n}\n"]}
|
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export declare function useCurrentMode(elementRef: React.RefObject<HTMLElement>): "dark" | "light";
|
|
3
|
-
export declare function useDensityMode(elementRef: React.RefObject<HTMLElement>): "compact" | "comfortable";
|
|
4
1
|
export declare const useVisualRefresh: () => boolean;
|
|
5
2
|
export declare function clearVisualRefreshState(): void;
|
|
6
3
|
export declare function useVisualRefreshDynamic(): boolean;
|
|
7
|
-
export declare function useReducedMotion(elementRef: React.RefObject<HTMLElement>): boolean;
|
|
8
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/use-visual-mode/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/use-visual-mode/index.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,gBAAgB,eAA+D,CAAC;AAM7F,wBAAgB,uBAAuB,SAEtC;AAMD,wBAAgB,uBAAuB,YAetC"}
|
|
@@ -1,31 +1,8 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
-
import { useState } from 'react';
|
|
4
3
|
import { ALWAYS_VISUAL_REFRESH } from '../../environment';
|
|
5
|
-
import { isMotionDisabled } from '../../motion';
|
|
6
|
-
import { findUpUntil } from '../../utils/dom';
|
|
7
|
-
import { useMutationObserver } from '../use-mutation-observer';
|
|
8
4
|
import { isDevelopment } from '../../is-development';
|
|
9
5
|
import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
|
|
10
|
-
// Note that this hook doesn't take into consideration @media print (unlike the dark mode CSS),
|
|
11
|
-
// due to challenges with cross-browser implementations of media/print state change listeners.
|
|
12
|
-
// This means that components using this hook will render in dark mode even when printing.
|
|
13
|
-
export function useCurrentMode(elementRef) {
|
|
14
|
-
const [value, setValue] = useState('light');
|
|
15
|
-
useMutationObserver(elementRef, node => {
|
|
16
|
-
const darkModeParent = findUpUntil(node, node => node.classList.contains('awsui-polaris-dark-mode') || node.classList.contains('awsui-dark-mode'));
|
|
17
|
-
setValue(darkModeParent ? 'dark' : 'light');
|
|
18
|
-
});
|
|
19
|
-
return value;
|
|
20
|
-
}
|
|
21
|
-
export function useDensityMode(elementRef) {
|
|
22
|
-
const [value, setValue] = useState('comfortable');
|
|
23
|
-
useMutationObserver(elementRef, node => {
|
|
24
|
-
const compactModeParent = findUpUntil(node, node => node.classList.contains('awsui-polaris-compact-mode') || node.classList.contains('awsui-compact-mode'));
|
|
25
|
-
setValue(compactModeParent ? 'compact' : 'comfortable');
|
|
26
|
-
});
|
|
27
|
-
return value;
|
|
28
|
-
}
|
|
29
6
|
export const useVisualRefresh = ALWAYS_VISUAL_REFRESH ? () => true : useVisualRefreshDynamic;
|
|
30
7
|
// We expect VR is to be set only once and before the application is rendered.
|
|
31
8
|
let visualRefreshState = undefined;
|
|
@@ -49,11 +26,4 @@ export function useVisualRefreshDynamic() {
|
|
|
49
26
|
}
|
|
50
27
|
return visualRefreshState;
|
|
51
28
|
}
|
|
52
|
-
export function useReducedMotion(elementRef) {
|
|
53
|
-
const [value, setValue] = useState(false);
|
|
54
|
-
useMutationObserver(elementRef, node => {
|
|
55
|
-
setValue(isMotionDisabled(node));
|
|
56
|
-
});
|
|
57
|
-
return value;
|
|
58
|
-
}
|
|
59
29
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/hooks/use-visual-mode/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/hooks/use-visual-mode/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AAEzE,MAAM,CAAC,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,uBAAuB,CAAC;AAE7F,8EAA8E;AAC9E,IAAI,kBAAkB,GAAwB,SAAS,CAAC;AAExD,cAAc;AACd,MAAM,UAAU,uBAAuB;IACrC,kBAAkB,GAAG,SAAS,CAAC;AACjC,CAAC;AAED,SAAS,mBAAmB;IAC1B,OAAO,OAAO,QAAQ,KAAK,WAAW,IAAI,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;AAC9F,CAAC;AAED,MAAM,UAAU,uBAAuB;IACrC,IAAI,kBAAkB,KAAK,SAAS,EAAE;QACpC,kBAAkB,GAAG,mBAAmB,EAAE,CAAC;KAC5C;IACD,IAAI,aAAa,EAAE;QACjB,MAAM,qBAAqB,GAAG,mBAAmB,EAAE,CAAC;QACpD,IAAI,qBAAqB,KAAK,kBAAkB,EAAE;YAChD,QAAQ,CACN,gBAAgB,EAChB,iEAAiE;gBAC/D,kGAAkG,CACrG,CAAC;SACH;KACF;IACD,OAAO,kBAAkB,CAAC;AAC5B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { ALWAYS_VISUAL_REFRESH } from '../../environment';\nimport { isDevelopment } from '../../is-development';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nexport const useVisualRefresh = ALWAYS_VISUAL_REFRESH ? () => true : useVisualRefreshDynamic;\n\n// We expect VR is to be set only once and before the application is rendered.\nlet visualRefreshState: undefined | boolean = undefined;\n\n// for testing\nexport function clearVisualRefreshState() {\n visualRefreshState = undefined;\n}\n\nfunction detectVisualRefresh() {\n return typeof document !== 'undefined' && !!document.querySelector('.awsui-visual-refresh');\n}\n\nexport function useVisualRefreshDynamic() {\n if (visualRefreshState === undefined) {\n visualRefreshState = detectVisualRefresh();\n }\n if (isDevelopment) {\n const newVisualRefreshState = detectVisualRefresh();\n if (newVisualRefreshState !== visualRefreshState) {\n warnOnce(\n 'Visual Refresh',\n 'Dynamic visual refresh change detected. This is not supported. ' +\n 'Make sure `awsui-visual-refresh` is attached to the `<body>` element before initial React render'\n );\n }\n }\n return visualRefreshState;\n}\n"]}
|