chore: Fix funnel support for modals

src/container/index.tsx

@@ -7,6 +7,7 @@ import { getExternalProps } from '../internal/utils/external-props';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';
+import { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
 
 export { ContainerProps };
 
@@ -16,19 +17,38 @@ export default function Container({
   disableContentPaddings = false,
   ...props
 }: ContainerProps) {
-  const baseComponentProps = useBaseComponent('Container');
-  const externalProps = getExternalProps(props);
   return (
     <AnalyticsFunnelSubStep>
-      <InternalContainer
+      <WrappedInternalContainer
         variant={variant}
-        disableHeaderPaddings={disableHeaderPaddings}
         disableContentPaddings={disableContentPaddings}
-        {...externalProps}
-        {...baseComponentProps}
+        disableHeaderPaddings={disableHeaderPaddings}
+        {...props}
       />
     </AnalyticsFunnelSubStep>
   );
 }
 
+function WrappedInternalContainer({
+  variant,
+  disableContentPaddings,
+  disableHeaderPaddings,
+  ...props
+}: ContainerProps) {
+  const baseComponentProps = useBaseComponent('Container');
+  const externalProps = getExternalProps(props);
+  const { subStepRef, funnelSubStepProps } = useFunnelSubStep();
+  return (
+    <InternalContainer
+      variant={variant}
+      disableHeaderPaddings={disableHeaderPaddings}
+      disableContentPaddings={disableContentPaddings}
+      {...externalProps}
+      {...baseComponentProps}
+      __subStepRef={subStepRef}
+      __funnelSubStepProps={funnelSubStepProps}
+    />
+  );
+}
+
 applyDisplayName(Container, 'Container');

src/container/internal.tsx

@@ -12,7 +12,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';
+import type { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
 
 export interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {
   __stickyHeader?: boolean;
@@ -31,6 +31,9 @@ export interface InternalContainerProps extends Omit<ContainerProps, 'variant'>,
    * * `full-page` – Only for internal use in table, cards and other components
    */
   variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';
+
+  __funnelSubStepProps?: ReturnType<typeof useFunnelSubStep>['funnelSubStepProps'];
+  __subStepRef?: ReturnType<typeof useFunnelSubStep>['subStepRef'];
 }
 
 export default function InternalContainer({
@@ -52,6 +55,8 @@ export default function InternalContainer({
   __headerRef,
   __darkHeader = false,
   __disableStickyMobile = true,
+  __funnelSubStepProps,
+  __subStepRef,
   ...restProps
 }: InternalContainerProps) {
   const isMobile = useMobile();
@@ -68,12 +73,11 @@ export default function InternalContainer({
   );
   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, subStepRef, __internalRootRef);
+  const mergedRef = useMergeRefs(rootRef, __subStepRef, __internalRootRef);
   const headerMergedRef = useMergeRefs(headerRef, overlapElement, __headerRef);
 
   /**
@@ -104,7 +108,7 @@ export default function InternalContainer({
   return (
     <div
       {...baseProps}
-      {...funnelSubStepProps}
+      {...__funnelSubStepProps}
       className={clsx(
         baseProps.className,
         styles.root,

src/internal/analytics/components/analytics-funnel.tsx

@@ -28,6 +28,7 @@ import {
   getSubStepNameSelector,
   getSubStepSelector,
 } from '../selectors';
+import { nodeBelongs } from '../../utils/node-belongs';
 
 export const FUNNEL_VERSION = '1.0';
 
@@ -288,7 +289,7 @@ const InnerAnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector }: An
   );
 };
 interface AnalyticsFunnelSubStepProps {
-  children?: React.ReactNode;
+  children?: React.ReactNode | ((props: FunnelSubStepContextValue) => React.ReactNode);
 }
 
 export const AnalyticsFunnelSubStep = ({ children }: AnalyticsFunnelSubStepProps) => {
@@ -330,6 +331,10 @@ export const AnalyticsFunnelSubStep = ({ children }: AnalyticsFunnelSubStepProps
   const context = isNested ? inheritedContext : newContext;
 
   useEffect(() => {
+    if (isNested || !subStepRef.current) {
+      return;
+    }
+
     const onMouseDown = () => (mousePressed.current = true);
 
     const onMouseUp = async () => {
@@ -347,7 +352,7 @@ export const AnalyticsFunnelSubStep = ({ children }: AnalyticsFunnelSubStepProps
       */
       await new Promise(r => setTimeout(r, 1));
 
-      if (!subStepRef.current || !subStepRef.current.contains(document.activeElement)) {
+      if (!subStepRef.current || !document.activeElement || !nodeBelongs(subStepRef.current, document.activeElement)) {
         isFocusedSubStep.current = false;
 
         /*
@@ -371,7 +376,13 @@ export const AnalyticsFunnelSubStep = ({ children }: AnalyticsFunnelSubStepProps
     subStepNameSelector,
     subStepSelector,
     focusCleanupFunction,
+    isNested,
+    subStepRef,
   ]);
 
-  return <FunnelSubStepContext.Provider value={context}>{children}</FunnelSubStepContext.Provider>;
+  return (
+    <FunnelSubStepContext.Provider value={context}>
+      {typeof children === 'function' ? children(context) : children}
+    </FunnelSubStepContext.Provider>
+  );
 };

src/internal/analytics/hooks/use-funnel.ts

@@ -10,6 +10,7 @@ import {
   getSubStepAllSelector,
 } from '../selectors';
 import { FunnelMetrics } from '../';
+import { nodeBelongs } from '../../utils/node-belongs';
 
 /**
  * Custom React Hook to manage and interact with FunnelSubStep.
@@ -116,7 +117,7 @@ export const useFunnelSubStep = () => {
       return;
     }
 
-    if (!subStepRef.current || !subStepRef.current.contains(event.relatedTarget) || !event.relatedTarget) {
+    if (!subStepRef.current || !event.relatedTarget || !nodeBelongs(subStepRef.current, event.relatedTarget)) {
       isFocusedSubStep.current = false;
 
       if (funnelInteractionId && subStepId && funnelState.current !== 'cancelled') {

src/modal/internal.tsx

@@ -29,10 +29,14 @@ import { ButtonContext } from '../internal/context/button-context';
 type InternalModalProps = SomeRequired<ModalProps, 'size'> & InternalBaseComponentProps;
 
 export default function InternalModal({ modalRoot, ...rest }: InternalModalProps) {
+  const referrerId = useUniqueId('modal');
+
   return (
-    <Portal container={modalRoot}>
-      <InnerModal {...rest} />
-    </Portal>
+    <div id={referrerId}>
+      <Portal container={modalRoot}>
+        <InnerModal {...rest} referrerId={referrerId} />
+      </Portal>
+    </div>
   );
 }
 
@@ -47,8 +51,9 @@ function InnerModal({
   disableContentPaddings,
   onDismiss,
   __internalRootRef = null,
+  referrerId,
   ...rest
-}: InternalModalProps) {
+}: InternalModalProps & { referrerId: string }) {
   const instanceUniqueId = useUniqueId();
   const headerId = `${rest.id || instanceUniqueId}-header`;
   const lastMouseDownElementRef = useRef<HTMLElement | null>(null);
@@ -128,6 +133,7 @@ function InnerModal({
           onClick={onOverlayClick}
           ref={mergedRef}
           style={footerHeight ? { scrollPaddingBottom: footerHeight } : undefined}
+          data-awsui-referrer-id={referrerId}
         >
           <FocusLock disabled={!visible} autoFocus={true} restoreFocus={true} className={styles['focus-lock']}>
             <div