@cloudscape-design/components 3.0.294 → 3.0.296

package/container/internal.js

@@ -11,6 +11,7 @@ import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useMobile } from '../internal/hooks/use-mobile';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import styles from './styles.css.js';
+import { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
 export default function InternalContainer(_a) {
     var { header, footer, children, variant = 'default', disableHeaderPaddings = false, disableContentPaddings = false, fitHeight, __stickyOffset, __mobileStickyOffset, __stickyHeader = false, __internalRootRef = null, __disableFooterDivider = false, __disableFooterPaddings = false, __hiddenContent = false, __headerRef, __headerId, __darkHeader = false, __disableStickyMobile = true } = _a, restProps = __rest(_a, ["header", "footer", "children", "variant", "disableHeaderPaddings", "disableContentPaddings", "fitHeight", "__stickyOffset", "__mobileStickyOffset", "__stickyHeader", "__internalRootRef", "__disableFooterDivider", "__disableFooterPaddings", "__hiddenContent", "__headerRef", "__headerId", "__darkHeader", "__disableStickyMobile"]);
     const isMobile = useMobile();
@@ -20,9 +21,10 @@ export default function InternalContainer(_a) {
     const { isSticky, isStuck, stickyStyles } = useStickyHeader(rootRef, headerRef, __stickyHeader, __stickyOffset, __mobileStickyOffset, __disableStickyMobile);
     const { setHasStickyBackground } = useAppLayoutContext();
     const isRefresh = useVisualRefresh();
+    const { subStepRef, funnelSubStepProps } = useFunnelSubStep();
     const hasDynamicHeight = isRefresh && variant === 'full-page';
     const overlapElement = useDynamicOverlap({ disabled: !hasDynamicHeight || !__darkHeader });
-    const mergedRef = useMergeRefs(rootRef, __internalRootRef);
+    const mergedRef = useMergeRefs(rootRef, subStepRef, __internalRootRef);
     const headerMergedRef = useMergeRefs(headerRef, overlapElement, __headerRef);
     const headerIdProp = __headerId ? { id: __headerId } : {};
     /**
@@ -44,7 +46,7 @@ export default function InternalContainer(_a) {
     // The container is only sticky on mobile if it is the header for the table.
     // In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.
     const shouldHaveStickyStyles = isSticky && !isMobile;
-    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root, styles[`variant-${variant}`], fitHeight && styles['fit-height'], shouldHaveStickyStyles && [styles['sticky-enabled']]), ref: mergedRef }),
+    return (React.createElement("div", Object.assign({}, baseProps, funnelSubStepProps, { className: clsx(baseProps.className, styles.root, styles[`variant-${variant}`], fitHeight && styles['fit-height'], shouldHaveStickyStyles && [styles['sticky-enabled']]), ref: mergedRef }),
         header && (React.createElement(StickyHeaderContext.Provider, { value: { isStuck } },
             React.createElement("div", Object.assign({ className: clsx(styles.header, styles[`header-variant-${variant}`], {
                     [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,

package/container/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["container/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 clsx from 'clsx';\nimport React, { useEffect, useRef } from 'react';\nimport { ContainerProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { useAppLayoutContext } from '../internal/context/app-layout-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\nimport { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n  __stickyHeader?: boolean;\n  __stickyOffset?: number;\n  __mobileStickyOffset?: number;\n  __disableFooterDivider?: boolean;\n  __disableFooterPaddings?: boolean;\n  __hiddenContent?: boolean;\n  __headerRef?: React.RefObject<HTMLDivElement>;\n  __headerId?: string;\n  __darkHeader?: boolean;\n  __disableStickyMobile?: boolean;\n  /**\n   * Additional internal variant:\n   * * `embedded` - Use this variant within a parent container (such as a modal,\n   *                expandable section, container or split panel).\n   * * `full-page` – Only for internal use in table, cards and other components\n   */\n  variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n}\n\nexport default function InternalContainer({\n  header,\n  footer,\n  children,\n  variant = 'default',\n  disableHeaderPaddings = false,\n  disableContentPaddings = false,\n  fitHeight,\n  __stickyOffset,\n  __mobileStickyOffset,\n  __stickyHeader = false,\n  __internalRootRef = null,\n  __disableFooterDivider = false,\n  __disableFooterPaddings = false,\n  __hiddenContent = false,\n  __headerRef,\n  __headerId,\n  __darkHeader = false,\n  __disableStickyMobile = true,\n  ...restProps\n}: InternalContainerProps) {\n  const isMobile = useMobile();\n  const baseProps = getBaseProps(restProps);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const { isSticky, isStuck, stickyStyles } = useStickyHeader(\n    rootRef,\n    headerRef,\n    __stickyHeader,\n    __stickyOffset,\n    __mobileStickyOffset,\n    __disableStickyMobile\n  );\n  const { setHasStickyBackground } = useAppLayoutContext();\n  const isRefresh = useVisualRefresh();\n\n  const hasDynamicHeight = isRefresh && variant === 'full-page';\n  const overlapElement = useDynamicOverlap({ disabled: !hasDynamicHeight || !__darkHeader });\n\n  const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n  const headerMergedRef = useMergeRefs(headerRef, overlapElement, __headerRef);\n  const headerIdProp = __headerId ? { id: __headerId } : {};\n\n  /**\n   * The visual refresh AppLayout component needs to know if a child component\n   * has a high contrast sticky header. This is to make sure the background element\n   * stays in the same vertical position as the header content.\n   */\n  useEffect(() => {\n    const shouldUpdateStickyBackground = isSticky && variant === 'full-page' && setHasStickyBackground;\n    if (shouldUpdateStickyBackground) {\n      setHasStickyBackground(true);\n    }\n\n    return () => {\n      if (shouldUpdateStickyBackground) {\n        setHasStickyBackground(false);\n      }\n    };\n  }, [isSticky, setHasStickyBackground, variant]);\n\n  // The container is only sticky on mobile if it is the header for the table.\n  // In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.\n  const shouldHaveStickyStyles = isSticky && !isMobile;\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(\n        baseProps.className,\n        styles.root,\n        styles[`variant-${variant}`],\n        fitHeight && styles['fit-height'],\n        shouldHaveStickyStyles && [styles['sticky-enabled']]\n      )}\n      ref={mergedRef}\n    >\n      {header && (\n        <StickyHeaderContext.Provider value={{ isStuck }}>\n          <div\n            className={clsx(styles.header, styles[`header-variant-${variant}`], {\n              [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n              [styles['header-sticky-enabled']]: isSticky,\n              [styles['header-dynamic-height']]: hasDynamicHeight,\n              [styles['header-stuck']]: isStuck,\n              [styles['with-paddings']]: !disableHeaderPaddings,\n              [styles['with-hidden-content']]: !children || __hiddenContent,\n            })}\n            {...headerIdProp}\n            {...stickyStyles}\n            ref={headerMergedRef}\n          >\n            {__darkHeader ? (\n              <div className={clsx(styles['dark-header'], 'awsui-context-content-header')}>{header}</div>\n            ) : (\n              header\n            )}\n          </div>\n        </StickyHeaderContext.Provider>\n      )}\n      <div\n        className={clsx(styles.content, {\n          [styles['with-paddings']]: !disableContentPaddings,\n        })}\n      >\n        {children}\n      </div>\n      {footer && (\n        <div\n          className={clsx(styles.footer, {\n            [styles['with-divider']]: !__disableFooterDivider,\n            [styles['with-paddings']]: !__disableFooterPaddings,\n          })}\n        >\n          {footer}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["container/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 clsx from 'clsx';\nimport React, { useEffect, useRef } from 'react';\nimport { ContainerProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { useAppLayoutContext } from '../internal/context/app-layout-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\nimport { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n  __stickyHeader?: boolean;\n  __stickyOffset?: number;\n  __mobileStickyOffset?: number;\n  __disableFooterDivider?: boolean;\n  __disableFooterPaddings?: boolean;\n  __hiddenContent?: boolean;\n  __headerRef?: React.RefObject<HTMLDivElement>;\n  __headerId?: string;\n  __darkHeader?: boolean;\n  __disableStickyMobile?: boolean;\n  /**\n   * Additional internal variant:\n   * * `embedded` - Use this variant within a parent container (such as a modal,\n   *                expandable section, container or split panel).\n   * * `full-page` – Only for internal use in table, cards and other components\n   */\n  variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n}\n\nexport default function InternalContainer({\n  header,\n  footer,\n  children,\n  variant = 'default',\n  disableHeaderPaddings = false,\n  disableContentPaddings = false,\n  fitHeight,\n  __stickyOffset,\n  __mobileStickyOffset,\n  __stickyHeader = false,\n  __internalRootRef = null,\n  __disableFooterDivider = false,\n  __disableFooterPaddings = false,\n  __hiddenContent = false,\n  __headerRef,\n  __headerId,\n  __darkHeader = false,\n  __disableStickyMobile = true,\n  ...restProps\n}: InternalContainerProps) {\n  const isMobile = useMobile();\n  const baseProps = getBaseProps(restProps);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const { isSticky, isStuck, stickyStyles } = useStickyHeader(\n    rootRef,\n    headerRef,\n    __stickyHeader,\n    __stickyOffset,\n    __mobileStickyOffset,\n    __disableStickyMobile\n  );\n  const { setHasStickyBackground } = useAppLayoutContext();\n  const isRefresh = useVisualRefresh();\n  const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n\n  const hasDynamicHeight = isRefresh && variant === 'full-page';\n  const overlapElement = useDynamicOverlap({ disabled: !hasDynamicHeight || !__darkHeader });\n\n  const mergedRef = useMergeRefs(rootRef, subStepRef, __internalRootRef);\n  const headerMergedRef = useMergeRefs(headerRef, overlapElement, __headerRef);\n  const headerIdProp = __headerId ? { id: __headerId } : {};\n\n  /**\n   * The visual refresh AppLayout component needs to know if a child component\n   * has a high contrast sticky header. This is to make sure the background element\n   * stays in the same vertical position as the header content.\n   */\n  useEffect(() => {\n    const shouldUpdateStickyBackground = isSticky && variant === 'full-page' && setHasStickyBackground;\n    if (shouldUpdateStickyBackground) {\n      setHasStickyBackground(true);\n    }\n\n    return () => {\n      if (shouldUpdateStickyBackground) {\n        setHasStickyBackground(false);\n      }\n    };\n  }, [isSticky, setHasStickyBackground, variant]);\n\n  // The container is only sticky on mobile if it is the header for the table.\n  // In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.\n  const shouldHaveStickyStyles = isSticky && !isMobile;\n\n  return (\n    <div\n      {...baseProps}\n      {...funnelSubStepProps}\n      className={clsx(\n        baseProps.className,\n        styles.root,\n        styles[`variant-${variant}`],\n        fitHeight && styles['fit-height'],\n        shouldHaveStickyStyles && [styles['sticky-enabled']]\n      )}\n      ref={mergedRef}\n    >\n      {header && (\n        <StickyHeaderContext.Provider value={{ isStuck }}>\n          <div\n            className={clsx(styles.header, styles[`header-variant-${variant}`], {\n              [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n              [styles['header-sticky-enabled']]: isSticky,\n              [styles['header-dynamic-height']]: hasDynamicHeight,\n              [styles['header-stuck']]: isStuck,\n              [styles['with-paddings']]: !disableHeaderPaddings,\n              [styles['with-hidden-content']]: !children || __hiddenContent,\n            })}\n            {...headerIdProp}\n            {...stickyStyles}\n            ref={headerMergedRef}\n          >\n            {__darkHeader ? (\n              <div className={clsx(styles['dark-header'], 'awsui-context-content-header')}>{header}</div>\n            ) : (\n              header\n            )}\n          </div>\n        </StickyHeaderContext.Provider>\n      )}\n      <div\n        className={clsx(styles.content, {\n          [styles['with-paddings']]: !disableContentPaddings,\n        })}\n      >\n        {children}\n      </div>\n      {footer && (\n        <div\n          className={clsx(styles.footer, {\n            [styles['with-divider']]: !__disableFooterDivider,\n            [styles['with-paddings']]: !__disableFooterPaddings,\n          })}\n        >\n          {footer}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["form/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAErB,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,OAAqB,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,eAG1E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["form/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAErB,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,OAAqB,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,eAU1E"}

package/form/index.js

@@ -5,10 +5,14 @@ import React from 'react';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import InternalForm from './internal';
 import useBaseComponent from '../internal/hooks/use-base-component';
+import { AnalyticsFunnel, AnalyticsFunnelStep } from '../internal/analytics/components/analytics-funnel';
+import { getFunnelNameSelector } from '../internal/analytics/selectors';
 export default function Form(_a) {
     var { variant = 'full-page' } = _a, props = __rest(_a, ["variant"]);
     const baseComponentProps = useBaseComponent('Form');
-    return React.createElement(InternalForm, Object.assign({ variant: variant }, props, baseComponentProps));
+    return (React.createElement(AnalyticsFunnel, { funnelType: "single-page", optionalStepNumbers: [], totalFunnelSteps: 1 },
+        React.createElement(AnalyticsFunnelStep, { stepNumber: 1, stepNameSelector: getFunnelNameSelector() },
+            React.createElement(InternalForm, Object.assign({ variant: variant }, props, baseComponentProps)))));
 }
 applyDisplayName(Form, 'Form');
 //# sourceMappingURL=index.js.map

package/form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["form/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,YAAY,MAAM,YAAY,CAAC;AACtC,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAIpE,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAA8C;QAA9C,EAAE,OAAO,GAAG,WAAW,OAAuB,EAAlB,KAAK,cAAjC,WAAmC,CAAF;IAC5D,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACpD,OAAO,oBAAC,YAAY,kBAAC,OAAO,EAAE,OAAO,IAAM,KAAK,EAAM,kBAAkB,EAAI,CAAC;AAC/E,CAAC;AAED,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { FormProps } from './interfaces';\nimport InternalForm from './internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { FormProps };\n\nexport default function Form({ variant = 'full-page', ...props }: FormProps) {\n  const baseComponentProps = useBaseComponent('Form');\n  return <InternalForm variant={variant} {...props} {...baseComponentProps} />;\n}\n\napplyDisplayName(Form, 'Form');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["form/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,YAAY,MAAM,YAAY,CAAC;AACtC,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAEpE,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,mDAAmD,CAAC;AACzG,OAAO,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAIxE,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAA8C;QAA9C,EAAE,OAAO,GAAG,WAAW,OAAuB,EAAlB,KAAK,cAAjC,WAAmC,CAAF;IAC5D,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAEpD,OAAO,CACL,oBAAC,eAAe,IAAC,UAAU,EAAC,aAAa,EAAC,mBAAmB,EAAE,EAAE,EAAE,gBAAgB,EAAE,CAAC;QACpF,oBAAC,mBAAmB,IAAC,UAAU,EAAE,CAAC,EAAE,gBAAgB,EAAE,qBAAqB,EAAE;YAC3E,oBAAC,YAAY,kBAAC,OAAO,EAAE,OAAO,IAAM,KAAK,EAAM,kBAAkB,EAAI,CACjD,CACN,CACnB,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { FormProps } from './interfaces';\nimport InternalForm from './internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nimport { AnalyticsFunnel, AnalyticsFunnelStep } from '../internal/analytics/components/analytics-funnel';\nimport { getFunnelNameSelector } from '../internal/analytics/selectors';\n\nexport { FormProps };\n\nexport default function Form({ variant = 'full-page', ...props }: FormProps) {\n  const baseComponentProps = useBaseComponent('Form');\n\n  return (\n    <AnalyticsFunnel funnelType=\"single-page\" optionalStepNumbers={[]} totalFunnelSteps={1}>\n      <AnalyticsFunnelStep stepNumber={1} stepNameSelector={getFunnelNameSelector()}>\n        <InternalForm variant={variant} {...props} {...baseComponentProps} />\n      </AnalyticsFunnelStep>\n    </AnalyticsFunnel>\n  );\n}\n\napplyDisplayName(Form, 'Form');\n"]}

package/form/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["form/internal.tsx"],"names":[],"mappings":";AASA,OAAO,EAAmB,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAIlF,KAAK,iBAAiB,GAAG,SAAS,GAAG,0BAA0B,CAAC;AAEhE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,MAAM,EACN,SAAS,EACT,kBAAkB,EAAE,0BAA0B,EAC9C,OAAO,EACP,gBAAgB,EAChB,OAAO,EACP,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,iBAAiB,eAqCnB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["form/internal.tsx"],"names":[],"mappings":";AASA,OAAO,EAAmB,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAOlF,KAAK,iBAAiB,GAAG,SAAS,GAAG,0BAA0B,CAAC;AAEhE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,MAAM,EACN,SAAS,EACT,kBAAkB,EAAE,0BAA0B,EAC9C,OAAO,EACP,gBAAgB,EAChB,OAAO,EACP,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,iBAAiB,eAmDnB"}

package/form/internal.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useEffect } from 'react';
 import clsx from 'clsx';
 import { getBaseProps } from '../internal/base-component';
 import InternalAlert from '../alert/internal';
@@ -10,12 +10,21 @@ import InternalContentLayout from '../content-layout/internal';
 import styles from './styles.css.js';
 import LiveRegion from '../internal/components/live-region';
 import { useInternalI18n } from '../internal/i18n/context';
+import { FunnelMetrics } from '../internal/analytics';
+import { useFunnel, useFunnelStep } from '../internal/analytics/hooks/use-funnel';
 export default function InternalForm(_a) {
     var { children, header, errorText, errorIconAriaLabel: errorIconAriaLabelOverride, actions, secondaryActions, variant, __internalRootRef } = _a, props = __rest(_a, ["children", "header", "errorText", "errorIconAriaLabel", "actions", "secondaryActions", "variant", "__internalRootRef"]);
     const baseProps = getBaseProps(props);
     const i18n = useInternalI18n('form');
     const errorIconAriaLabel = i18n('errorIconAriaLabel', errorIconAriaLabelOverride);
-    return (React.createElement("div", Object.assign({}, baseProps, { ref: __internalRootRef, className: clsx(styles.root, baseProps.className) }),
+    const { funnelInteractionId, funnelProps } = useFunnel();
+    const { funnelStepProps } = useFunnelStep();
+    useEffect(() => {
+        if (funnelInteractionId && errorText) {
+            FunnelMetrics.funnelError({ funnelInteractionId });
+        }
+    }, [funnelInteractionId, errorText]);
+    return (React.createElement("div", Object.assign({}, baseProps, funnelProps, funnelStepProps, { ref: __internalRootRef, className: clsx(styles.root, baseProps.className) }),
         React.createElement(FormLayout, { header: header && React.createElement("div", { className: clsx(styles.header, variant === 'full-page' && styles['full-page']) }, header), variant: variant },
             children && React.createElement("div", { className: styles.content }, children),
             errorText && (React.createElement(InternalBox, { margin: { top: 'l' } },

package/form/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["form/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,aAAa,MAAM,mBAAmB,CAAC;AAC9C,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAC1C,OAAO,qBAAqB,MAAM,4BAA4B,CAAC;AAC/D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAI3D,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAUjB;QAViB,EACnC,QAAQ,EACR,MAAM,EACN,SAAS,EACT,kBAAkB,EAAE,0BAA0B,EAC9C,OAAO,EACP,gBAAgB,EAChB,OAAO,EACP,iBAAiB,OAEC,EADf,KAAK,cAT2B,wHAUpC,CADS;IAER,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,IAAI,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;IACrC,MAAM,kBAAkB,GAAG,IAAI,CAAC,oBAAoB,EAAE,0BAA0B,CAAC,CAAC;IAElF,OAAO,CACL,6CAAS,SAAS,IAAE,GAAG,EAAE,iBAAiB,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC;QAC3F,oBAAC,UAAU,IACT,MAAM,EACJ,MAAM,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,KAAK,WAAW,IAAI,MAAM,CAAC,WAAW,CAAC,CAAC,IAAG,MAAM,CAAO,EAE/G,OAAO,EAAE,OAAO;YAEf,QAAQ,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO;YAC5D,SAAS,IAAI,CACZ,oBAAC,WAAW,IAAC,MAAM,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE;gBAC/B,oBAAC,aAAa,IAAC,IAAI,EAAC,OAAO,EAAC,mBAAmB,EAAE,kBAAkB;oBACjE,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,SAAS,CAAO,CACjC,CACJ,CACf;YACA,CAAC,OAAO,IAAI,gBAAgB,CAAC,IAAI,CAChC,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;gBAC3B,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;oBACtC,OAAO,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO;oBAC1D,gBAAgB,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,IAAG,gBAAgB,CAAO,CACtF,CACF,CACP;YACA,SAAS,IAAI,CACZ,oBAAC,UAAU,IAAC,SAAS,EAAE,IAAI;gBACxB,kBAAkB;;gBAAI,SAAS,CACrB,CACd,CACU,CACT,CACP,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAmB;IAChE,OAAO,OAAO,KAAK,WAAW,IAAI,MAAM,CAAC,CAAC,CAAC,CACzC,oBAAC,qBAAqB,IAAC,MAAM,EAAE,MAAM,IAAG,QAAQ,CAAyB,CAC1E,CAAC,CAAC,CAAC,CACF;QACG,MAAM;QACN,QAAQ,CACR,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalAlert from '../alert/internal';\nimport InternalBox from '../box/internal';\nimport InternalContentLayout from '../content-layout/internal';\nimport styles from './styles.css.js';\nimport { FormLayoutProps, FormProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport LiveRegion from '../internal/components/live-region';\nimport { useInternalI18n } from '../internal/i18n/context';\n\ntype InternalFormProps = FormProps & InternalBaseComponentProps;\n\nexport default function InternalForm({\n  children,\n  header,\n  errorText,\n  errorIconAriaLabel: errorIconAriaLabelOverride,\n  actions,\n  secondaryActions,\n  variant,\n  __internalRootRef,\n  ...props\n}: InternalFormProps) {\n  const baseProps = getBaseProps(props);\n  const i18n = useInternalI18n('form');\n  const errorIconAriaLabel = i18n('errorIconAriaLabel', errorIconAriaLabelOverride);\n\n  return (\n    <div {...baseProps} ref={__internalRootRef} className={clsx(styles.root, baseProps.className)}>\n      <FormLayout\n        header={\n          header && <div className={clsx(styles.header, variant === 'full-page' && styles['full-page'])}>{header}</div>\n        }\n        variant={variant}\n      >\n        {children && <div className={styles.content}>{children}</div>}\n        {errorText && (\n          <InternalBox margin={{ top: 'l' }}>\n            <InternalAlert type=\"error\" statusIconAriaLabel={errorIconAriaLabel}>\n              <div className={styles.error}>{errorText}</div>\n            </InternalAlert>\n          </InternalBox>\n        )}\n        {(actions || secondaryActions) && (\n          <div className={styles.footer}>\n            <div className={styles['actions-section']}>\n              {actions && <div className={styles.actions}>{actions}</div>}\n              {secondaryActions && <div className={styles['secondary-actions']}>{secondaryActions}</div>}\n            </div>\n          </div>\n        )}\n        {errorText && (\n          <LiveRegion assertive={true}>\n            {errorIconAriaLabel}, {errorText}\n          </LiveRegion>\n        )}\n      </FormLayout>\n    </div>\n  );\n}\n\nfunction FormLayout({ children, header, variant }: FormLayoutProps) {\n  return variant === 'full-page' && header ? (\n    <InternalContentLayout header={header}>{children}</InternalContentLayout>\n  ) : (\n    <>\n      {header}\n      {children}\n    </>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["form/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 } from 'react';\nimport clsx from 'clsx';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalAlert from '../alert/internal';\nimport InternalBox from '../box/internal';\nimport InternalContentLayout from '../content-layout/internal';\nimport styles from './styles.css.js';\nimport { FormLayoutProps, FormProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport LiveRegion from '../internal/components/live-region';\nimport { useInternalI18n } from '../internal/i18n/context';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep } from '../internal/analytics/hooks/use-funnel';\n\ntype InternalFormProps = FormProps & InternalBaseComponentProps;\n\nexport default function InternalForm({\n  children,\n  header,\n  errorText,\n  errorIconAriaLabel: errorIconAriaLabelOverride,\n  actions,\n  secondaryActions,\n  variant,\n  __internalRootRef,\n  ...props\n}: InternalFormProps) {\n  const baseProps = getBaseProps(props);\n  const i18n = useInternalI18n('form');\n  const errorIconAriaLabel = i18n('errorIconAriaLabel', errorIconAriaLabelOverride);\n  const { funnelInteractionId, funnelProps } = useFunnel();\n  const { funnelStepProps } = useFunnelStep();\n\n  useEffect(() => {\n    if (funnelInteractionId && errorText) {\n      FunnelMetrics.funnelError({ funnelInteractionId });\n    }\n  }, [funnelInteractionId, errorText]);\n\n  return (\n    <div\n      {...baseProps}\n      {...funnelProps}\n      {...funnelStepProps}\n      ref={__internalRootRef}\n      className={clsx(styles.root, baseProps.className)}\n    >\n      <FormLayout\n        header={\n          header && <div className={clsx(styles.header, variant === 'full-page' && styles['full-page'])}>{header}</div>\n        }\n        variant={variant}\n      >\n        {children && <div className={styles.content}>{children}</div>}\n        {errorText && (\n          <InternalBox margin={{ top: 'l' }}>\n            <InternalAlert type=\"error\" statusIconAriaLabel={errorIconAriaLabel}>\n              <div className={styles.error}>{errorText}</div>\n            </InternalAlert>\n          </InternalBox>\n        )}\n        {(actions || secondaryActions) && (\n          <div className={styles.footer}>\n            <div className={styles['actions-section']}>\n              {actions && <div className={styles.actions}>{actions}</div>}\n              {secondaryActions && <div className={styles['secondary-actions']}>{secondaryActions}</div>}\n            </div>\n          </div>\n        )}\n        {errorText && (\n          <LiveRegion assertive={true}>\n            {errorIconAriaLabel}, {errorText}\n          </LiveRegion>\n        )}\n      </FormLayout>\n    </div>\n  );\n}\n\nfunction FormLayout({ children, header, variant }: FormLayoutProps) {\n  return variant === 'full-page' && header ? (\n    <InternalContentLayout header={header}>{children}</InternalContentLayout>\n  ) : (\n    <>\n      {header}\n      {children}\n    </>\n  );\n}\n"]}

package/form-field/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["form-field/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAItD,UAAU,mBAAmB;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE,EAAE,mBAAmB,eAiBvF;AAED,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,eAMA;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,OAAe,EACf,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,SAAS,EACT,WAAW,EACX,iBAAwB,EACxB,gBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,sBAAsB,eA8ExB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["form-field/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAazC,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAQtD,UAAU,mBAAmB;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE,EAAE,mBAAmB,eAiBvF;AAED,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,eAMA;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,OAAe,EACf,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,SAAS,EACT,WAAW,EACX,iBAAwB,EACxB,gBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,sBAAsB,eAiHxB"}

package/form-field/internal.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useEffect } from 'react';
 import clsx from 'clsx';
 import { getBaseProps } from '../internal/base-component';
 import { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';
@@ -13,6 +13,9 @@ import { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';
 import styles from './styles.css.js';
 import { joinStrings } from '../internal/utils/strings';
 import { useInternalI18n } from '../internal/i18n/context';
+import { FunnelMetrics } from '../internal/analytics';
+import { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
+import { getSubStepAllSelector } from '../internal/analytics/selectors';
 export function FormFieldError({ id, children, errorIconAriaLabel }) {
     const i18n = useInternalI18n('form-field');
     return (React.createElement("div", { id: id, className: styles.error },
@@ -31,6 +34,7 @@ export default function InternalFormField(_a) {
     const instanceUniqueId = useUniqueId('formField');
     const generatedControlId = controlId || instanceUniqueId;
     const formFieldId = controlId || generatedControlId;
+    const { funnelInteractionId, stepNumber, stepNameSelector, subStepSelector, subStepNameSelector } = useFunnelSubStep();
     const slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);
     const ariaDescribedBy = getAriaDescribedBy(slotIds);
     const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);
@@ -40,7 +44,29 @@ export default function InternalFormField(_a) {
         ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,
         invalid: !!errorText || !!parentInvalid,
     };
-    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: __internalRootRef }),
+    const analyticsAttributes = {};
+    if (slotIds.label) {
+        analyticsAttributes['data-analytics-field-label-selector'] = `[id="${slotIds.label}"]`;
+    }
+    if (slotIds.error) {
+        analyticsAttributes['data-analytics-field-error-selector'] = `[id="${slotIds.error}"]`;
+    }
+    useEffect(() => {
+        if (funnelInteractionId && errorText) {
+            FunnelMetrics.funnelSubStepError({
+                funnelInteractionId,
+                subStepSelector,
+                subStepNameSelector,
+                stepNumber,
+                stepNameSelector,
+                fieldErrorSelector: `[id="${slotIds.error}"]`,
+                fieldLabelSelector: `[id="${slotIds.label}"]`,
+                subStepAllSelector: getSubStepAllSelector(),
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [funnelInteractionId, errorText]);
+    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: __internalRootRef }, analyticsAttributes),
         React.createElement("div", { className: clsx(__hideLabel && styles['visually-hidden']) },
             label && (React.createElement("label", { className: styles.label, id: slotIds.label, htmlFor: generatedControlId }, label)),
             !__hideLabel && info && React.createElement("span", { className: styles.info }, info)),

package/form-field/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["form-field/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 from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nimport InternalGrid from '../grid/internal';\nimport InternalIcon from '../icon/internal';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport styles from './styles.css.js';\nimport { InternalFormFieldProps } from './interfaces';\nimport { joinStrings } from '../internal/utils/strings';\nimport { useInternalI18n } from '../internal/i18n/context';\n\ninterface FormFieldErrorProps {\n  id?: string;\n  children?: React.ReactNode;\n  errorIconAriaLabel?: string;\n}\n\nexport function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldErrorProps) {\n  const i18n = useInternalI18n('form-field');\n\n  return (\n    <div id={id} className={styles.error}>\n      <div className={styles['error-icon-shake-wrapper']}>\n        <div\n          role=\"img\"\n          aria-label={i18n('i18nStrings.errorIconAriaLabel', errorIconAriaLabel)}\n          className={styles['error-icon-scale-wrapper']}\n        >\n          <InternalIcon name=\"status-warning\" size=\"small\" />\n        </div>\n      </div>\n      <span className={styles.error__message}>{children}</span>\n    </div>\n  );\n}\n\nexport function ConstraintText({\n  id,\n  hasError,\n  children,\n}: {\n  id?: string;\n  hasError: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <div id={id} className={clsx(styles.constraint, hasError && styles['constraint-has-error'])}>\n      {children}\n    </div>\n  );\n}\n\nexport default function InternalFormField({\n  controlId,\n  stretch = false,\n  label,\n  info,\n  i18nStrings,\n  children,\n  secondaryControl,\n  description,\n  constraintText,\n  errorText,\n  __hideLabel,\n  __internalRootRef = null,\n  __disableGutters = false,\n  ...rest\n}: InternalFormFieldProps) {\n  const baseProps = getBaseProps(rest);\n  const isRefresh = useVisualRefresh();\n\n  const instanceUniqueId = useUniqueId('formField');\n  const generatedControlId = controlId || instanceUniqueId;\n  const formFieldId = controlId || generatedControlId;\n\n  const slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);\n\n  const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n  const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n  const {\n    ariaLabelledby: parentAriaLabelledby,\n    ariaDescribedby: parentAriaDescribedby,\n    invalid: parentInvalid,\n  } = useFormFieldContext({});\n\n  const contextValuesWithoutControlId = {\n    ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,\n    ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,\n    invalid: !!errorText || !!parentInvalid,\n  };\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n      <div className={clsx(__hideLabel && styles['visually-hidden'])}>\n        {label && (\n          <label className={styles.label} id={slotIds.label} htmlFor={generatedControlId}>\n            {label}\n          </label>\n        )}\n        {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n      </div>\n\n      {description && (\n        <div className={styles.description} id={slotIds.description}>\n          {description}\n        </div>\n      )}\n\n      <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n        <InternalGrid gridDefinition={gridDefinition} disableGutters={__disableGutters}>\n          <FormFieldContext.Provider\n            value={{\n              controlId: generatedControlId,\n              ...contextValuesWithoutControlId,\n            }}\n          >\n            {children && <div className={styles.control}>{children}</div>}\n          </FormFieldContext.Provider>\n\n          {secondaryControl && (\n            <FormFieldContext.Provider value={contextValuesWithoutControlId}>\n              <div className={styles['secondary-control']}>{secondaryControl}</div>\n            </FormFieldContext.Provider>\n          )}\n        </InternalGrid>\n      </div>\n\n      {(constraintText || errorText) && (\n        <div className={styles.hints}>\n          {errorText && (\n            <FormFieldError id={slotIds.error} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n              {errorText}\n            </FormFieldError>\n          )}\n          {constraintText && (\n            <ConstraintText id={slotIds.constraint} hasError={!!errorText}>\n              {constraintText}\n            </ConstraintText>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["form-field/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 } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nimport InternalGrid from '../grid/internal';\nimport InternalIcon from '../icon/internal';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport styles from './styles.css.js';\nimport { InternalFormFieldProps } from './interfaces';\nimport { joinStrings } from '../internal/utils/strings';\nimport { useInternalI18n } from '../internal/i18n/context';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getSubStepAllSelector } from '../internal/analytics/selectors';\n\ninterface FormFieldErrorProps {\n  id?: string;\n  children?: React.ReactNode;\n  errorIconAriaLabel?: string;\n}\n\nexport function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldErrorProps) {\n  const i18n = useInternalI18n('form-field');\n\n  return (\n    <div id={id} className={styles.error}>\n      <div className={styles['error-icon-shake-wrapper']}>\n        <div\n          role=\"img\"\n          aria-label={i18n('i18nStrings.errorIconAriaLabel', errorIconAriaLabel)}\n          className={styles['error-icon-scale-wrapper']}\n        >\n          <InternalIcon name=\"status-warning\" size=\"small\" />\n        </div>\n      </div>\n      <span className={styles.error__message}>{children}</span>\n    </div>\n  );\n}\n\nexport function ConstraintText({\n  id,\n  hasError,\n  children,\n}: {\n  id?: string;\n  hasError: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <div id={id} className={clsx(styles.constraint, hasError && styles['constraint-has-error'])}>\n      {children}\n    </div>\n  );\n}\n\nexport default function InternalFormField({\n  controlId,\n  stretch = false,\n  label,\n  info,\n  i18nStrings,\n  children,\n  secondaryControl,\n  description,\n  constraintText,\n  errorText,\n  __hideLabel,\n  __internalRootRef = null,\n  __disableGutters = false,\n  ...rest\n}: InternalFormFieldProps) {\n  const baseProps = getBaseProps(rest);\n  const isRefresh = useVisualRefresh();\n\n  const instanceUniqueId = useUniqueId('formField');\n  const generatedControlId = controlId || instanceUniqueId;\n  const formFieldId = controlId || generatedControlId;\n\n  const { funnelInteractionId, stepNumber, stepNameSelector, subStepSelector, subStepNameSelector } =\n    useFunnelSubStep();\n\n  const slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);\n\n  const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n  const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n  const {\n    ariaLabelledby: parentAriaLabelledby,\n    ariaDescribedby: parentAriaDescribedby,\n    invalid: parentInvalid,\n  } = useFormFieldContext({});\n\n  const contextValuesWithoutControlId = {\n    ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,\n    ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,\n    invalid: !!errorText || !!parentInvalid,\n  };\n\n  const analyticsAttributes: Record<string, string> = {};\n\n  if (slotIds.label) {\n    analyticsAttributes['data-analytics-field-label-selector'] = `[id=\"${slotIds.label}\"]`;\n  }\n\n  if (slotIds.error) {\n    analyticsAttributes['data-analytics-field-error-selector'] = `[id=\"${slotIds.error}\"]`;\n  }\n\n  useEffect(() => {\n    if (funnelInteractionId && errorText) {\n      FunnelMetrics.funnelSubStepError({\n        funnelInteractionId,\n        subStepSelector,\n        subStepNameSelector,\n        stepNumber,\n        stepNameSelector,\n        fieldErrorSelector: `[id=\"${slotIds.error}\"]`,\n        fieldLabelSelector: `[id=\"${slotIds.label}\"]`,\n        subStepAllSelector: getSubStepAllSelector(),\n      });\n    }\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [funnelInteractionId, errorText]);\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root)}\n      ref={__internalRootRef}\n      {...analyticsAttributes}\n    >\n      <div className={clsx(__hideLabel && styles['visually-hidden'])}>\n        {label && (\n          <label className={styles.label} id={slotIds.label} htmlFor={generatedControlId}>\n            {label}\n          </label>\n        )}\n        {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n      </div>\n\n      {description && (\n        <div className={styles.description} id={slotIds.description}>\n          {description}\n        </div>\n      )}\n\n      <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n        <InternalGrid gridDefinition={gridDefinition} disableGutters={__disableGutters}>\n          <FormFieldContext.Provider\n            value={{\n              controlId: generatedControlId,\n              ...contextValuesWithoutControlId,\n            }}\n          >\n            {children && <div className={styles.control}>{children}</div>}\n          </FormFieldContext.Provider>\n\n          {secondaryControl && (\n            <FormFieldContext.Provider value={contextValuesWithoutControlId}>\n              <div className={styles['secondary-control']}>{secondaryControl}</div>\n            </FormFieldContext.Provider>\n          )}\n        </InternalGrid>\n      </div>\n\n      {(constraintText || errorText) && (\n        <div className={styles.hints}>\n          {errorText && (\n            <FormFieldError id={slotIds.error} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n              {errorText}\n            </FormFieldError>\n          )}\n          {constraintText && (\n            <ConstraintText id={slotIds.constraint} hasError={!!errorText}>\n              {constraintText}\n            </ConstraintText>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/header/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["header/internal.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGjD,UAAU,mBAAoB,SAAQ,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACpG,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAO,EACP,kBAAkB,EAClB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,WAAW,EACX,IAAI,EACJ,iBAAwB,EACxB,wBAAwB,EACxB,GAAG,SAAS,EACb,EAAE,mBAAmB,eAsErB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["header/internal.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGjD,UAAU,mBAAoB,SAAQ,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACpG,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAO,EACP,kBAAkB,EAClB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,WAAW,EACX,IAAI,EACJ,iBAAwB,EACxB,wBAAwB,EACxB,GAAG,SAAS,EACb,EAAE,mBAAmB,eAyErB"}

package/header/internal.js

@@ -22,7 +22,7 @@ export default function InternalHeader(_a) {
         React.createElement("div", { className: clsx(styles.main, styles[`main-variant-${variantOverride}`], isRefresh && styles[`main-variant-${variantOverride}-refresh`]) },
             React.createElement("div", { className: clsx(styles.title, styles[`title-variant-${variantOverride}`], isRefresh && styles[`title-variant-${variantOverride}-refresh`]) },
                 React.createElement(HeadingTag, { className: clsx(styles.heading, styles[`heading-variant-${variantOverride}`]) },
-                    React.createElement("span", { className: clsx(styles['heading-text'], styles[`heading-text-variant-${variantOverride}`]) }, children),
+                    React.createElement("span", { "data-analytics": "heading-text", className: clsx(styles['heading-text'], styles[`heading-text-variant-${variantOverride}`]) }, children),
                     counter !== undefined && React.createElement("span", { className: styles.counter },
                         " ",
                         counter)),

package/header/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["header/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 clsx from 'clsx';\nimport React, { useContext } from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport { StickyHeaderContext } from '../container/use-sticky-header';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { HeaderProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { SomeRequired } from '../internal/types';\nimport { useMobile } from '../internal/hooks/use-mobile';\n\ninterface InternalHeaderProps extends SomeRequired<HeaderProps, 'variant'>, InternalBaseComponentProps {\n  __disableActionsWrapping?: boolean;\n}\n\nexport default function InternalHeader({\n  variant,\n  headingTagOverride,\n  children,\n  actions,\n  counter,\n  description,\n  info,\n  __internalRootRef = null,\n  __disableActionsWrapping,\n  ...restProps\n}: InternalHeaderProps) {\n  const isMobile = useMobile();\n  const HeadingTag = headingTagOverride ?? (variant === 'awsui-h1-sticky' ? 'h1' : variant);\n  const { isStuck } = useContext(StickyHeaderContext);\n  const baseProps = getBaseProps(restProps);\n  const isRefresh = useVisualRefresh();\n  // If is mobile there is no need to have the dynamic variant because it's scrolled out of view\n  const dynamicVariant = !isMobile && isStuck ? 'h2' : 'h1';\n  const variantOverride = variant === 'awsui-h1-sticky' ? (isRefresh ? dynamicVariant : 'h2') : variant;\n  return (\n    <div\n      {...baseProps}\n      className={clsx(\n        styles.root,\n        baseProps.className,\n        styles[`root-variant-${variantOverride}`],\n        isRefresh && styles[`root-variant-${variantOverride}-refresh`],\n        !actions && [styles[`root-no-actions`]],\n        description && [styles[`root-has-description`]],\n        __disableActionsWrapping && [styles['root-no-wrap']]\n      )}\n      ref={__internalRootRef}\n    >\n      <div\n        className={clsx(\n          styles.main,\n          styles[`main-variant-${variantOverride}`],\n          isRefresh && styles[`main-variant-${variantOverride}-refresh`]\n        )}\n      >\n        <div\n          className={clsx(\n            styles.title,\n            styles[`title-variant-${variantOverride}`],\n            isRefresh && styles[`title-variant-${variantOverride}-refresh`]\n          )}\n        >\n          <HeadingTag className={clsx(styles.heading, styles[`heading-variant-${variantOverride}`])}>\n            <span className={clsx(styles['heading-text'], styles[`heading-text-variant-${variantOverride}`])}>\n              {children}\n            </span>\n            {counter !== undefined && <span className={styles.counter}> {counter}</span>}\n          </HeadingTag>\n          {info && <span className={styles.info}>{info}</span>}\n        </div>\n        {description && (\n          <p\n            className={clsx(\n              styles.description,\n              styles[`description-variant-${variantOverride}`],\n              isRefresh && styles[`description-variant-${variantOverride}-refresh`]\n            )}\n          >\n            {description}\n          </p>\n        )}\n      </div>\n      {actions && (\n        <div\n          className={clsx(\n            styles.actions,\n            styles[`actions-variant-${variantOverride}`],\n            isRefresh && styles[`actions-variant-${variantOverride}-refresh`]\n          )}\n        >\n          {actions}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["header/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 clsx from 'clsx';\nimport React, { useContext } from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport { StickyHeaderContext } from '../container/use-sticky-header';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { HeaderProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { SomeRequired } from '../internal/types';\nimport { useMobile } from '../internal/hooks/use-mobile';\n\ninterface InternalHeaderProps extends SomeRequired<HeaderProps, 'variant'>, InternalBaseComponentProps {\n  __disableActionsWrapping?: boolean;\n}\n\nexport default function InternalHeader({\n  variant,\n  headingTagOverride,\n  children,\n  actions,\n  counter,\n  description,\n  info,\n  __internalRootRef = null,\n  __disableActionsWrapping,\n  ...restProps\n}: InternalHeaderProps) {\n  const isMobile = useMobile();\n  const HeadingTag = headingTagOverride ?? (variant === 'awsui-h1-sticky' ? 'h1' : variant);\n  const { isStuck } = useContext(StickyHeaderContext);\n  const baseProps = getBaseProps(restProps);\n  const isRefresh = useVisualRefresh();\n  // If is mobile there is no need to have the dynamic variant because it's scrolled out of view\n  const dynamicVariant = !isMobile && isStuck ? 'h2' : 'h1';\n  const variantOverride = variant === 'awsui-h1-sticky' ? (isRefresh ? dynamicVariant : 'h2') : variant;\n  return (\n    <div\n      {...baseProps}\n      className={clsx(\n        styles.root,\n        baseProps.className,\n        styles[`root-variant-${variantOverride}`],\n        isRefresh && styles[`root-variant-${variantOverride}-refresh`],\n        !actions && [styles[`root-no-actions`]],\n        description && [styles[`root-has-description`]],\n        __disableActionsWrapping && [styles['root-no-wrap']]\n      )}\n      ref={__internalRootRef}\n    >\n      <div\n        className={clsx(\n          styles.main,\n          styles[`main-variant-${variantOverride}`],\n          isRefresh && styles[`main-variant-${variantOverride}-refresh`]\n        )}\n      >\n        <div\n          className={clsx(\n            styles.title,\n            styles[`title-variant-${variantOverride}`],\n            isRefresh && styles[`title-variant-${variantOverride}-refresh`]\n          )}\n        >\n          <HeadingTag className={clsx(styles.heading, styles[`heading-variant-${variantOverride}`])}>\n            <span\n              data-analytics=\"heading-text\"\n              className={clsx(styles['heading-text'], styles[`heading-text-variant-${variantOverride}`])}\n            >\n              {children}\n            </span>\n            {counter !== undefined && <span className={styles.counter}> {counter}</span>}\n          </HeadingTag>\n          {info && <span className={styles.info}>{info}</span>}\n        </div>\n        {description && (\n          <p\n            className={clsx(\n              styles.description,\n              styles[`description-variant-${variantOverride}`],\n              isRefresh && styles[`description-variant-${variantOverride}-refresh`]\n            )}\n          >\n            {description}\n          </p>\n        )}\n      </div>\n      {actions && (\n        <div\n          className={clsx(\n            styles.actions,\n            styles[`actions-variant-${variantOverride}`],\n            isRefresh && styles[`actions-variant-${variantOverride}-refresh`]\n          )}\n        >\n          {actions}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/help-panel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["help-panel/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,EAAE,cAAc,eAoBjH"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["help-panel/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAI9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,EAAE,cAAc,eAqBjH"}

package/help-panel/index.js

@@ -9,14 +9,16 @@ import styles from './styles.css.js';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import LiveRegion from '../internal/components/live-region';
+import { useInternalI18n } from '../internal/i18n/context';
 export default function HelpPanel(_a) {
     var { header, footer, children, loading, loadingText } = _a, restProps = __rest(_a, ["header", "footer", "children", "loading", "loadingText"]);
     const { __internalRootRef } = useBaseComponent('HelpPanel');
     const baseProps = getBaseProps(restProps);
+    const i18n = useInternalI18n('help-panel');
     const containerProps = Object.assign(Object.assign({}, baseProps), { className: clsx(baseProps.className, styles['help-panel']) });
     return loading ? (React.createElement("div", Object.assign({}, containerProps, { ref: __internalRootRef }),
         React.createElement(InternalStatusIndicator, { type: "loading" },
-            React.createElement(LiveRegion, { visible: true }, loadingText)))) : (React.createElement("div", Object.assign({}, containerProps, { ref: __internalRootRef }),
+            React.createElement(LiveRegion, { visible: true }, i18n('loadingText', loadingText))))) : (React.createElement("div", Object.assign({}, containerProps, { ref: __internalRootRef }),
         header && React.createElement("div", { className: clsx(styles.header) }, header),
         React.createElement("div", { className: clsx(styles.content) }, children),
         footer && React.createElement("div", { className: styles.footer }, footer)));

package/help-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["help-panel/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AACnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAEpE,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAI5D,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAgF;QAAhF,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,OAAgC,EAA3B,SAAS,cAA9D,0DAAgE,CAAF;IAC9F,MAAM,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,cAAc,mCACf,SAAS,KACZ,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,GAC3D,CAAC;IACF,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC7C,oBAAC,uBAAuB,IAAC,IAAI,EAAC,SAAS;YACrC,oBAAC,UAAU,IAAC,OAAO,EAAE,IAAI,IAAG,WAAW,CAAc,CAC7B,CACtB,CACP,CAAC,CAAC,CAAC,CACF,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC5C,MAAM,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAG,MAAM,CAAO;QAC9D,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAG,QAAQ,CAAO;QACrD,MAAM,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAO,CACpD,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,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 { getBaseProps } from '../internal/base-component';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { HelpPanelProps } from './interfaces';\nimport LiveRegion from '../internal/components/live-region';\n\nexport { HelpPanelProps };\n\nexport default function HelpPanel({ header, footer, children, loading, loadingText, ...restProps }: HelpPanelProps) {\n  const { __internalRootRef } = useBaseComponent('HelpPanel');\n  const baseProps = getBaseProps(restProps);\n  const containerProps = {\n    ...baseProps,\n    className: clsx(baseProps.className, styles['help-panel']),\n  };\n  return loading ? (\n    <div {...containerProps} ref={__internalRootRef}>\n      <InternalStatusIndicator type=\"loading\">\n        <LiveRegion visible={true}>{loadingText}</LiveRegion>\n      </InternalStatusIndicator>\n    </div>\n  ) : (\n    <div {...containerProps} ref={__internalRootRef}>\n      {header && <div className={clsx(styles.header)}>{header}</div>}\n      <div className={clsx(styles.content)}>{children}</div>\n      {footer && <div className={styles.footer}>{footer}</div>}\n    </div>\n  );\n}\n\napplyDisplayName(HelpPanel, 'HelpPanel');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["help-panel/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AACnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAEpE,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAI3D,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAgF;QAAhF,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,OAAgC,EAA3B,SAAS,cAA9D,0DAAgE,CAAF;IAC9F,MAAM,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;IAC3C,MAAM,cAAc,mCACf,SAAS,KACZ,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,GAC3D,CAAC;IACF,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC7C,oBAAC,uBAAuB,IAAC,IAAI,EAAC,SAAS;YACrC,oBAAC,UAAU,IAAC,OAAO,EAAE,IAAI,IAAG,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,CAAc,CAClD,CACtB,CACP,CAAC,CAAC,CAAC,CACF,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC5C,MAAM,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAG,MAAM,CAAO;QAC9D,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAG,QAAQ,CAAO;QACrD,MAAM,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAO,CACpD,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,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 { getBaseProps } from '../internal/base-component';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { HelpPanelProps } from './interfaces';\nimport LiveRegion from '../internal/components/live-region';\nimport { useInternalI18n } from '../internal/i18n/context';\n\nexport { HelpPanelProps };\n\nexport default function HelpPanel({ header, footer, children, loading, loadingText, ...restProps }: HelpPanelProps) {\n  const { __internalRootRef } = useBaseComponent('HelpPanel');\n  const baseProps = getBaseProps(restProps);\n  const i18n = useInternalI18n('help-panel');\n  const containerProps = {\n    ...baseProps,\n    className: clsx(baseProps.className, styles['help-panel']),\n  };\n  return loading ? (\n    <div {...containerProps} ref={__internalRootRef}>\n      <InternalStatusIndicator type=\"loading\">\n        <LiveRegion visible={true}>{i18n('loadingText', loadingText)}</LiveRegion>\n      </InternalStatusIndicator>\n    </div>\n  ) : (\n    <div {...containerProps} ref={__internalRootRef}>\n      {header && <div className={clsx(styles.header)}>{header}</div>}\n      <div className={clsx(styles.content)}>{children}</div>\n      {footer && <div className={styles.footer}>{footer}</div>}\n    </div>\n  );\n}\n\napplyDisplayName(HelpPanel, 'HelpPanel');\n"]}

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

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

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

@@ -44,11 +44,13 @@ export const useFunnelSubStep = () => {
             });
         }
     };
-    const funnelSubStepProps = {
-        'data-analytics-funnel-substep': subStepId,
-        onFocus,
-        onBlur,
-    };
+    const funnelSubStepProps = funnelInteractionId
+        ? {
+            'data-analytics-funnel-substep': subStepId,
+            onFocus,
+            onBlur,
+        }
+        : {};
     return Object.assign({ funnelSubStepProps, subStepRef }, context);
 };
 /**
@@ -61,9 +63,11 @@ export const useFunnelSubStep = () => {
  */
 export const useFunnelStep = () => {
     const context = useContext(FunnelStepContext);
-    const funnelStepProps = {
-        'data-analytics-funnel-step-index': context.stepNumber,
-    };
+    const funnelStepProps = context.funnelInteractionId
+        ? {
+            'data-analytics-funnel-step-index': context.stepNumber,
+        }
+        : {};
     return Object.assign({ funnelStepProps }, context);
 };
 /**
@@ -75,9 +79,11 @@ export const useFunnelStep = () => {
  */
 export const useFunnel = () => {
     const context = useContext(FunnelContext);
-    const funnelProps = {
-        'data-analytics-funnel-interaction-id': context.funnelInteractionId,
-    };
+    const funnelProps = context.funnelInteractionId
+        ? {
+            'data-analytics-funnel-interaction-id': context.funnelInteractionId,
+        }
+        : {};
     return Object.assign({ funnelProps }, context);
 };
 //# sourceMappingURL=use-funnel.js.map

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

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

package/internal/components/cartesian-chart/bottom-labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bottom-labels.d.ts","sourceRoot":"lib/default/","sources":["internal/components/cartesian-chart/bottom-labels.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAMzD,UAAU,iBAAiB;IACzB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,UAAU,GAAG,iBAAiB,CAAC;IACtC,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;;AAED,wBAAyD;AAGzD,iBAAS,YAAY,CAAC,EACpB,IAAU,EACV,KAAK,EACL,MAAM,EACN,KAAK,EACL,KAAK,EACL,aAAa,EACb,KAAK,EACL,mBAAmB,EACnB,UAAU,EACV,UAAc,EACd,WAAe,GAChB,EAAE,iBAAiB,eA+EnB"}
+{"version":3,"file":"bottom-labels.d.ts","sourceRoot":"lib/default/","sources":["internal/components/cartesian-chart/bottom-labels.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAOzD,UAAU,iBAAiB;IACzB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,UAAU,GAAG,iBAAiB,CAAC;IACtC,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;;AAED,wBAAyD;AAGzD,iBAAS,YAAY,CAAC,EACpB,IAAU,EACV,KAAK,EACL,MAAM,EACN,KAAK,EACL,KAAK,EACL,aAAa,EACb,KAAK,EACL,mBAAmB,EACnB,UAAU,EACV,UAAc,EACd,WAAe,GAChB,EAAE,iBAAiB,eAgFnB"}

package/internal/components/cartesian-chart/bottom-labels.js

@@ -5,9 +5,11 @@ import clsx from 'clsx';
 import { TICK_LENGTH, TICK_LINE_HEIGHT, TICK_MARGIN } from './constants';
 import styles from './styles.css.js';
 import { formatTicks, getVisibleTicks } from './label-utils';
+import { useInternalI18n } from '../../i18n/context';
 export default memo(BottomLabels);
 // Renders the visible tick labels on the bottom axis, as well as their grid lines.
 function BottomLabels({ axis = 'x', width, height, scale, ticks, tickFormatter, title, ariaRoleDescription, autoHeight, offsetLeft = 0, offsetRight = 0, }) {
+    const i18n = useInternalI18n('[charts]');
     const virtualTextRef = useRef(null);
     const xOffset = scale.isCategorical() && axis === 'x' ? Math.max(0, scale.d3Scale.bandwidth() - 1) / 2 : 0;
     const cacheRef = useRef({});
@@ -38,7 +40,7 @@ function BottomLabels({ axis = 'x', width, height, scale, ticks, tickFormatter,
     useEffect(() => {
         autoHeight(maxHeight);
     }, [autoHeight, maxHeight]);
-    return (React.createElement("g", { transform: `translate(0,${height})`, className: styles['labels-bottom'], "aria-label": title, role: "list", "aria-roledescription": ariaRoleDescription, "aria-hidden": true },
+    return (React.createElement("g", { transform: `translate(0,${height})`, className: styles['labels-bottom'], "aria-label": title, role: "list", "aria-roledescription": i18n('i18nStrings.ariaRoleDescription', ariaRoleDescription), "aria-hidden": true },
         visibleTicks.map(({ position, lines }, index) => isFinite(position) && (React.createElement("g", { key: index, transform: `translate(${position + xOffset},0)`, className: clsx(styles.ticks, styles['ticks--bottom'], {
                 [styles['ticks--x']]: axis === 'x',
                 [styles['ticks--y']]: axis === 'y',

package/internal/components/cartesian-chart/bottom-labels.js.map

@@ -1 +1 @@
-{"version":3,"file":"bottom-labels.js","sourceRoot":"lib/default/","sources":["internal/components/cartesian-chart/bottom-labels.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, { memo, useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { ChartDataTypes } from './interfaces';\nimport { ChartScale, NumericChartScale } from './scales';\nimport { TICK_LENGTH, TICK_LINE_HEIGHT, TICK_MARGIN } from './constants';\n\nimport styles from './styles.css.js';\nimport { formatTicks, getVisibleTicks } from './label-utils';\n\ninterface BottomLabelsProps {\n  axis?: 'x' | 'y';\n  width: number;\n  height: number;\n  scale: ChartScale | NumericChartScale;\n  ticks: readonly ChartDataTypes[];\n  tickFormatter?: (value: ChartDataTypes) => string;\n  title?: string;\n  ariaRoleDescription?: string;\n  autoHeight: (value: number) => void;\n  offsetLeft?: number;\n  offsetRight?: number;\n}\n\nexport default memo(BottomLabels) as typeof BottomLabels;\n\n// Renders the visible tick labels on the bottom axis, as well as their grid lines.\nfunction BottomLabels({\n  axis = 'x',\n  width,\n  height,\n  scale,\n  ticks,\n  tickFormatter,\n  title,\n  ariaRoleDescription,\n  autoHeight,\n  offsetLeft = 0,\n  offsetRight = 0,\n}: BottomLabelsProps) {\n  const virtualTextRef = useRef<SVGTextElement>(null);\n\n  const xOffset = scale.isCategorical() && axis === 'x' ? Math.max(0, scale.d3Scale.bandwidth() - 1) / 2 : 0;\n\n  const cacheRef = useRef<{ [label: string]: number }>({});\n  const getLabelSpace = (label: string) => {\n    if (cacheRef.current[label] !== undefined) {\n      return cacheRef.current[label];\n    }\n    if (virtualTextRef.current && virtualTextRef.current.getComputedTextLength) {\n      virtualTextRef.current.textContent = label;\n      cacheRef.current[label] = virtualTextRef.current.getComputedTextLength();\n      return cacheRef.current[label];\n    }\n    return 0;\n  };\n\n  const formattedTicks = formatTicks({ ticks, scale, getLabelSpace, tickFormatter });\n\n  if (virtualTextRef.current) {\n    virtualTextRef.current.textContent = '';\n  }\n\n  const from = 0 - offsetLeft - xOffset;\n  const until = width + offsetRight - xOffset;\n  const balanceLabels = axis === 'x' && scale.scaleType !== 'log';\n  const visibleTicks = getVisibleTicks(formattedTicks, from, until, balanceLabels);\n\n  let maxHeight = TICK_LENGTH + TICK_MARGIN;\n  for (const { lines } of formattedTicks) {\n    maxHeight = Math.max(maxHeight, TICK_LENGTH + TICK_MARGIN + lines.length * TICK_LINE_HEIGHT);\n  }\n\n  // Tell elements's height to the parent.\n  useEffect(() => {\n    autoHeight(maxHeight);\n  }, [autoHeight, maxHeight]);\n\n  return (\n    <g\n      transform={`translate(0,${height})`}\n      className={styles['labels-bottom']}\n      aria-label={title}\n      role=\"list\"\n      aria-roledescription={ariaRoleDescription}\n      aria-hidden={true}\n    >\n      {visibleTicks.map(\n        ({ position, lines }, index) =>\n          isFinite(position) && (\n            <g\n              key={index}\n              transform={`translate(${position + xOffset},0)`}\n              className={clsx(styles.ticks, styles['ticks--bottom'], {\n                [styles['ticks--x']]: axis === 'x',\n                [styles['ticks--y']]: axis === 'y',\n              })}\n              role=\"listitem\"\n              aria-label={lines.join('\\n')}\n            >\n              <line className={styles.ticks__line} x1={0} x2={0} y1={0} y2={TICK_LENGTH} aria-hidden=\"true\" />\n              {lines.map((line, lineIndex) => (\n                <text\n                  className={styles.ticks__text}\n                  key={lineIndex}\n                  x={0}\n                  y={TICK_LENGTH + TICK_MARGIN + lineIndex * TICK_LINE_HEIGHT}\n                >\n                  {line}\n                </text>\n              ))}\n            </g>\n          )\n      )}\n\n      <text ref={virtualTextRef} x={0} y={0} style={{ visibility: 'hidden' }} aria-hidden=\"true\"></text>\n    </g>\n  );\n}\n"]}
+{"version":3,"file":"bottom-labels.js","sourceRoot":"lib/default/","sources":["internal/components/cartesian-chart/bottom-labels.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, { memo, useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { ChartDataTypes } from './interfaces';\nimport { ChartScale, NumericChartScale } from './scales';\nimport { TICK_LENGTH, TICK_LINE_HEIGHT, TICK_MARGIN } from './constants';\n\nimport styles from './styles.css.js';\nimport { formatTicks, getVisibleTicks } from './label-utils';\nimport { useInternalI18n } from '../../i18n/context';\n\ninterface BottomLabelsProps {\n  axis?: 'x' | 'y';\n  width: number;\n  height: number;\n  scale: ChartScale | NumericChartScale;\n  ticks: readonly ChartDataTypes[];\n  tickFormatter?: (value: ChartDataTypes) => string;\n  title?: string;\n  ariaRoleDescription?: string;\n  autoHeight: (value: number) => void;\n  offsetLeft?: number;\n  offsetRight?: number;\n}\n\nexport default memo(BottomLabels) as typeof BottomLabels;\n\n// Renders the visible tick labels on the bottom axis, as well as their grid lines.\nfunction BottomLabels({\n  axis = 'x',\n  width,\n  height,\n  scale,\n  ticks,\n  tickFormatter,\n  title,\n  ariaRoleDescription,\n  autoHeight,\n  offsetLeft = 0,\n  offsetRight = 0,\n}: BottomLabelsProps) {\n  const i18n = useInternalI18n('[charts]');\n  const virtualTextRef = useRef<SVGTextElement>(null);\n\n  const xOffset = scale.isCategorical() && axis === 'x' ? Math.max(0, scale.d3Scale.bandwidth() - 1) / 2 : 0;\n\n  const cacheRef = useRef<{ [label: string]: number }>({});\n  const getLabelSpace = (label: string) => {\n    if (cacheRef.current[label] !== undefined) {\n      return cacheRef.current[label];\n    }\n    if (virtualTextRef.current && virtualTextRef.current.getComputedTextLength) {\n      virtualTextRef.current.textContent = label;\n      cacheRef.current[label] = virtualTextRef.current.getComputedTextLength();\n      return cacheRef.current[label];\n    }\n    return 0;\n  };\n\n  const formattedTicks = formatTicks({ ticks, scale, getLabelSpace, tickFormatter });\n\n  if (virtualTextRef.current) {\n    virtualTextRef.current.textContent = '';\n  }\n\n  const from = 0 - offsetLeft - xOffset;\n  const until = width + offsetRight - xOffset;\n  const balanceLabels = axis === 'x' && scale.scaleType !== 'log';\n  const visibleTicks = getVisibleTicks(formattedTicks, from, until, balanceLabels);\n\n  let maxHeight = TICK_LENGTH + TICK_MARGIN;\n  for (const { lines } of formattedTicks) {\n    maxHeight = Math.max(maxHeight, TICK_LENGTH + TICK_MARGIN + lines.length * TICK_LINE_HEIGHT);\n  }\n\n  // Tell elements's height to the parent.\n  useEffect(() => {\n    autoHeight(maxHeight);\n  }, [autoHeight, maxHeight]);\n\n  return (\n    <g\n      transform={`translate(0,${height})`}\n      className={styles['labels-bottom']}\n      aria-label={title}\n      role=\"list\"\n      aria-roledescription={i18n('i18nStrings.ariaRoleDescription', ariaRoleDescription)}\n      aria-hidden={true}\n    >\n      {visibleTicks.map(\n        ({ position, lines }, index) =>\n          isFinite(position) && (\n            <g\n              key={index}\n              transform={`translate(${position + xOffset},0)`}\n              className={clsx(styles.ticks, styles['ticks--bottom'], {\n                [styles['ticks--x']]: axis === 'x',\n                [styles['ticks--y']]: axis === 'y',\n              })}\n              role=\"listitem\"\n              aria-label={lines.join('\\n')}\n            >\n              <line className={styles.ticks__line} x1={0} x2={0} y1={0} y2={TICK_LENGTH} aria-hidden=\"true\" />\n              {lines.map((line, lineIndex) => (\n                <text\n                  className={styles.ticks__text}\n                  key={lineIndex}\n                  x={0}\n                  y={TICK_LENGTH + TICK_MARGIN + lineIndex * TICK_LINE_HEIGHT}\n                >\n                  {line}\n                </text>\n              ))}\n            </g>\n          )\n      )}\n\n      <text ref={virtualTextRef} x={0} y={0} style={{ visibility: 'hidden' }} aria-hidden=\"true\"></text>\n    </g>\n  );\n}\n"]}

package/internal/components/cartesian-chart/interfaces.d.ts

@@ -57,6 +57,7 @@ export interface CartesianChartProps<T extends ChartDataTypes, Series> extends B
     ariaDescription?: string;
     /**
      * An object containing all the necessary localized strings required by the component.
+     * @i18n
      */
     i18nStrings?: CartesianChartProps.I18nStrings<T>;
     /**
@@ -114,14 +115,17 @@ export interface CartesianChartProps<T extends ChartDataTypes, Series> extends B
     noMatch?: React.ReactNode;
     /**
      * Text that is displayed when the chart is loading, i.e. when `statusType` is set to `"loading"`.
+     * @i18n
      */
     loadingText?: string;
     /**
      * Text that is displayed when the chart is in error state, i.e. when `statusType` is set to `"error"`.
+     * @i18n
      */
     errorText?: string;
     /**
      * Text for the recovery button that is displayed next to the error text.
+     * @i18n
      **/
     recoveryText?: string;
     /**