chore: Remove additional div from Modal

src/container/internal.tsx

@@ -13,6 +13,8 @@ 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 { useModalContext } from '../internal/context/modal-context';
+import { useUniqueId } from '../internal/hooks/use-unique-id';
 
 export interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {
   __stickyHeader?: boolean;
@@ -38,7 +40,15 @@ export interface InternalContainerProps extends Omit<ContainerProps, 'variant'>,
 
 export function InternalContainerAsSubstep(props: InternalContainerProps) {
   const { subStepRef, funnelSubStepProps } = useFunnelSubStep();
-  return <InternalContainer {...props} __subStepRef={subStepRef} __funnelSubStepProps={funnelSubStepProps} />;
+  const modalContext = useModalContext();
+
+  return (
+    <InternalContainer
+      {...props}
+      __subStepRef={modalContext?.isInModal ? { current: null } : subStepRef}
+      __funnelSubStepProps={modalContext?.isInModal ? {} : funnelSubStepProps}
+    />
+  );
 }
 
 export default function InternalContainer({
@@ -76,13 +86,14 @@ export default function InternalContainer({
     __mobileStickyOffset,
     __disableStickyMobile
   );
+  const contentId = useUniqueId();
   const { setHasStickyBackground } = useAppLayoutContext();
   const isRefresh = useVisualRefresh();
 
   const hasDynamicHeight = isRefresh && variant === 'full-page';
   const overlapElement = useDynamicOverlap({ disabled: !hasDynamicHeight || !__darkHeader });
 
-  const mergedRef = useMergeRefs(rootRef, __subStepRef, __internalRootRef);
+  const mergedRef = useMergeRefs(rootRef, __internalRootRef);
   const headerMergedRef = useMergeRefs(headerRef, overlapElement, __headerRef);
 
   /**
@@ -132,7 +143,11 @@ export default function InternalContainer({
           {media.content}
         </div>
       )}
-      <div className={clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height'])}>
+      <div
+        id={contentId}
+        ref={__subStepRef}
+        className={clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height'])}
+      >
         {header && (
           <StickyHeaderContext.Provider value={{ isStuck }}>
             <div

src/expandable-section/expandable-section-container.tsx

@@ -1,19 +1,19 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import InternalContainer, { InternalContainerProps } from '../container/internal';
+import { InternalContainerAsSubstep } from '../container/internal';
 import React from 'react';
 import { ExpandableSectionProps } from './interfaces';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 
+import { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';
+
 export interface ExpandableSectionContainerProps extends InternalBaseComponentProps {
   className?: string;
   header: React.ReactNode;
   children?: React.ReactNode;
   variant: ExpandableSectionProps.Variant;
   expanded: boolean | undefined;
   disableContentPaddings: boolean | undefined;
-  __funnelSubStepProps?: InternalContainerProps['__funnelSubStepProps'];
-  __subStepRef?: InternalContainerProps['__subStepRef'];
 }
 
 export const ExpandableSectionContainer = ({
@@ -24,26 +24,24 @@ export const ExpandableSectionContainer = ({
   expanded,
   disableContentPaddings,
   __internalRootRef,
-  __funnelSubStepProps,
-  __subStepRef,
   ...rest
 }: ExpandableSectionContainerProps) => {
   if (variant === 'container' || variant === 'stacked') {
     return (
-      <InternalContainer
-        {...rest}
-        className={className}
-        header={header}
-        variant={variant === 'stacked' ? 'stacked' : 'default'}
-        disableContentPaddings={disableContentPaddings || !expanded}
-        disableHeaderPaddings={true}
-        __hiddenContent={!expanded}
-        __internalRootRef={__internalRootRef}
-        __funnelSubStepProps={__funnelSubStepProps}
-        __subStepRef={__subStepRef}
-      >
-        {children}
-      </InternalContainer>
+      <AnalyticsFunnelSubStep>
+        <InternalContainerAsSubstep
+          {...rest}
+          className={className}
+          header={header}
+          variant={variant === 'stacked' ? 'stacked' : 'default'}
+          disableContentPaddings={disableContentPaddings || !expanded}
+          disableHeaderPaddings={true}
+          __hiddenContent={!expanded}
+          __internalRootRef={__internalRootRef}
+        >
+          {children}
+        </InternalContainerAsSubstep>
+      </AnalyticsFunnelSubStep>
     );
   }
 

src/expandable-section/index.tsx

@@ -4,31 +4,15 @@ import React from 'react';
 
 import { ExpandableSectionProps } from './interfaces';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
-import InternalExpandableSection, { InternalExpandableSectionProps } from './internal';
+import InternalExpandableSection from './internal';
 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 { ExpandableSectionProps };
 
 export default function ExpandableSection({ variant = 'default', ...props }: ExpandableSectionProps) {
   const baseComponentProps = useBaseComponent('ExpandableSection');
 
-  if (variant === 'container' || variant === 'stacked') {
-    return (
-      <AnalyticsFunnelSubStep>
-        <InternalExpandableSectionAsSubstep variant={variant} {...props} {...baseComponentProps} />
-      </AnalyticsFunnelSubStep>
-    );
-  } else {
-    return <InternalExpandableSection variant={variant} {...props} {...baseComponentProps} />;
-  }
-}
-
-function InternalExpandableSectionAsSubstep(props: InternalExpandableSectionProps) {
-  const { subStepRef, funnelSubStepProps } = useFunnelSubStep();
-
-  return <InternalExpandableSection {...props} __subStepRef={subStepRef} __funnelSubStepProps={funnelSubStepProps} />;
+  return <InternalExpandableSection variant={variant} {...props} {...baseComponentProps} />;
 }
 
 applyDisplayName(ExpandableSection, 'ExpandableSection');

src/expandable-section/internal.tsx

@@ -13,14 +13,12 @@ import { fireNonCancelableEvent } from '../internal/events';
 import { ExpandableSectionProps } from './interfaces';
 
 import styles from './styles.css.js';
-import { ExpandableSectionContainer, ExpandableSectionContainerProps } from './expandable-section-container';
+import { ExpandableSectionContainer } from './expandable-section-container';
 import { ExpandableSectionHeader } from './expandable-section-header';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { variantSupportsDescription } from './utils';
 
-export type InternalExpandableSectionProps = ExpandableSectionProps &
-  InternalBaseComponentProps &
-  Pick<ExpandableSectionContainerProps, '__funnelSubStepProps' | '__subStepRef'>;
+export type InternalExpandableSectionProps = ExpandableSectionProps & InternalBaseComponentProps;
 
 export default function InternalExpandableSection({
   expanded: controlledExpanded,
@@ -38,8 +36,6 @@ export default function InternalExpandableSection({
   disableContentPaddings,
   headerAriaLabel,
   __internalRootRef,
-  __funnelSubStepProps,
-  __subStepRef,
   ...props
 }: InternalExpandableSectionProps) {
   const ref = useRef<HTMLDivElement>(null);
@@ -102,8 +98,6 @@ export default function InternalExpandableSection({
       expanded={expanded}
       className={clsx(baseProps.className, styles.root)}
       variant={variant}
-      __funnelSubStepProps={__funnelSubStepProps}
-      __subStepRef={__subStepRef}
       disableContentPaddings={disableContentPaddings}
       header={
         <ExpandableSectionHeader

src/internal/context/modal-context.ts

@@ -0,0 +1,10 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { createContext, useContext } from 'react';
+
+export const ModalContext = createContext<{ isInModal: boolean }>({ isInModal: false });
+
+export const useModalContext = () => {
+  const modalContext = useContext(ModalContext);
+  return modalContext;
+};

src/modal/internal.tsx

@@ -26,18 +26,16 @@ import { useIntersectionObserver } from '../internal/hooks/use-intersection-obse
 import { useContainerQuery } from '@cloudscape-design/component-toolkit';
 import { ButtonContext } from '../internal/context/button-context';
 import { FunnelNameSelectorContext } from '../internal/analytics/context/analytics-context';
+import { ModalContext } from '../internal/context/modal-context';
+import { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
 
 type InternalModalProps = SomeRequired<ModalProps, 'size'> & InternalBaseComponentProps;
 
 export default function InternalModal({ modalRoot, ...rest }: InternalModalProps) {
-  const referrerId = useUniqueId('modal');
-
   return (
-    <div id={referrerId}>
-      <Portal container={modalRoot}>
-        <InnerModal {...rest} referrerId={referrerId} />
-      </Portal>
-    </div>
+    <Portal container={modalRoot}>
+      <InnerModal {...rest} />
+    </Portal>
   );
 }
 
@@ -52,9 +50,8 @@ function InnerModal({
   disableContentPaddings,
   onDismiss,
   __internalRootRef = null,
-  referrerId,
   ...rest
-}: InternalModalProps & { referrerId: string }) {
+}: InternalModalProps) {
   const instanceUniqueId = useUniqueId();
   const headerId = `${rest.id || instanceUniqueId}-header`;
   const lastMouseDownElementRef = useRef<HTMLElement | null>(null);
@@ -120,72 +117,75 @@ function InnerModal({
   // Add extra scroll padding to account for the height of the sticky footer,
   // to prevent it from covering focused elements.
   const [footerHeight, footerRef] = useContainerQuery(rect => rect.borderBoxHeight);
+  const { subStepRef } = useFunnelSubStep();
 
   return (
     <FunnelNameSelectorContext.Provider value={`.${styles['header--text']}`}>
       <ButtonContext.Provider value={{ onClick: () => {} }}>
         <FormFieldContext.Provider value={{}}>
-          <div
-            {...baseProps}
-            className={clsx(
-              styles.root,
-              { [styles.hidden]: !visible },
-              baseProps.className,
-              isRefresh && styles.refresh
-            )}
-            role="dialog"
-            aria-modal={true}
-            aria-labelledby={headerId}
-            onMouseDown={onOverlayMouseDown}
-            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
-                className={clsx(
-                  styles.dialog,
-                  styles[size],
-                  styles[`breakpoint-${breakpoint}`],
-                  isRefresh && styles.refresh
-                )}
-                onKeyDown={escKeyHandler}
-              >
-                <div className={styles.container}>
-                  <div className={styles.header}>
-                    <InternalHeader
-                      variant="h2"
-                      __disableActionsWrapping={true}
-                      actions={
-                        <InternalButton
-                          ariaLabel={closeAriaLabel}
-                          className={styles['dismiss-control']}
-                          variant="modal-dismiss"
-                          iconName="close"
-                          formAction="none"
-                          onClick={onCloseButtonClick}
-                        />
-                      }
-                    >
-                      <span id={headerId} className={styles['header--text']}>
-                        {header}
-                      </span>
-                    </InternalHeader>
-                  </div>
-                  <div className={clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings })}>
-                    {children}
-                    <div ref={stickySentinelRef} />
-                  </div>
-                  {footer && (
-                    <div ref={footerRef} className={clsx(styles.footer, footerStuck && styles['footer--stuck'])}>
-                      {footer}
-                    </div>
+          <ModalContext.Provider value={{ isInModal: true }}>
+            <div
+              {...baseProps}
+              className={clsx(
+                styles.root,
+                { [styles.hidden]: !visible },
+                baseProps.className,
+                isRefresh && styles.refresh
+              )}
+              role="dialog"
+              aria-modal={true}
+              aria-labelledby={headerId}
+              onMouseDown={onOverlayMouseDown}
+              onClick={onOverlayClick}
+              ref={mergedRef}
+              style={footerHeight ? { scrollPaddingBottom: footerHeight } : undefined}
+              data-awsui-referrer-id={subStepRef.current?.id}
+            >
+              <FocusLock disabled={!visible} autoFocus={true} restoreFocus={true} className={styles['focus-lock']}>
+                <div
+                  className={clsx(
+                    styles.dialog,
+                    styles[size],
+                    styles[`breakpoint-${breakpoint}`],
+                    isRefresh && styles.refresh
                   )}
+                  onKeyDown={escKeyHandler}
+                >
+                  <div className={styles.container}>
+                    <div className={styles.header}>
+                      <InternalHeader
+                        variant="h2"
+                        __disableActionsWrapping={true}
+                        actions={
+                          <InternalButton
+                            ariaLabel={closeAriaLabel}
+                            className={styles['dismiss-control']}
+                            variant="modal-dismiss"
+                            iconName="close"
+                            formAction="none"
+                            onClick={onCloseButtonClick}
+                          />
+                        }
+                      >
+                        <span id={headerId} className={styles['header--text']}>
+                          {header}
+                        </span>
+                      </InternalHeader>
+                    </div>
+                    <div className={clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings })}>
+                      {children}
+                      <div ref={stickySentinelRef} />
+                    </div>
+                    {footer && (
+                      <div ref={footerRef} className={clsx(styles.footer, footerStuck && styles['footer--stuck'])}>
+                        {footer}
+                      </div>
+                    )}
+                  </div>
                 </div>
-              </div>
-            </FocusLock>
-          </div>
+              </FocusLock>
+            </div>
+          </ModalContext.Provider>
         </FormFieldContext.Provider>
       </ButtonContext.Provider>
     </FunnelNameSelectorContext.Provider>