@cloudscape-design/components-themeable 3.0.1383 → 3.0.1384

package/lib/internal/template/internal/components/focus-lock/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/focus-lock/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7F,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAE7E,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAiB9D,SAAS,SAAS,CAChB,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAkB,EAC1E,GAA4B;IAE5B,MAAM,qBAAqB,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IACpE,MAAM,YAAY,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEzD,MAAM,UAAU,GAAG,GAAG,EAAE;;QACtB,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YACzB,MAAA,iBAAiB,CAAC,YAAY,CAAC,OAAO,CAAC,0CAAE,KAAK,EAAE,CAAC;QACnD,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;;QACrB,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YACzB,MAAA,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,0CAAE,KAAK,EAAE,CAAC;QAClD,CAAC;IACH,CAAC,CAAC;IAEF,0EAA0E;IAC1E,yCAAyC;IACzC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,wBAAwB,GAAG,GAAG,EAAE;;YACpC,IAAI,QAAQ,CAAC,aAAa,IAAI,CAAC,CAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,QAAQ,CAAC,QAAQ,CAAC,aAAqB,CAAC,CAAA,EAAE,CAAC;gBAC9F,qBAAqB,CAAC,OAAO,GAAG,QAAQ,CAAC,aAA4C,CAAC;YACxF,CAAC;QACH,CAAC,CAAC;QACF,IAAI,SAAS,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC3B,wBAAwB,EAAE,CAAC;YAC3B,UAAU,EAAE,CAAC;QACf,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1B,qFAAqF;IACrF,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IACzE,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,kBAAkB,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC;YACtC,qBAAqB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;YAClC,IAAI,YAAY,IAAI,QAAQ,EAAE,CAAC;gBAC7B,MAAA,qBAAqB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBACvC,qBAAqB,CAAC,OAAO,GAAG,IAAI,CAAC;YACvC,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;IAEjD,yEAAyE;IACzE,wEAAwE;IACxE,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,IAA2B,EAAE,EAAE;;QAC9B,IAAI,IAAI,KAAK,IAAI,IAAI,YAAY,EAAE,CAAC;YAClC,MAAA,qBAAqB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YACvC,qBAAqB,CAAC,OAAO,GAAG,IAAI,CAAC;QACvC,CAAC;IACH,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,YAAY,CAAC,YAAY,EAAE,mBAAmB,CAAC,CAAC;IAElE,MAAM,aAAa,GAAG,CAAC,KAAuB,EAAE,EAAE,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAC1G,OAAO,CACL;QACE,oBAAC,OAAO,IAAC,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,GAAI;QAChH,6BAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,IACtC,QAAQ,CACL;QACN,oBAAC,OAAO,IAAC,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,GAAI,CAC/G,CACJ,CAAC;AACJ,CAAC;AAED,eAAe,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\n\nimport { nodeBelongs } from '@cloudscape-design/component-toolkit/dom';\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport TabTrap from '../tab-trap/index';\nimport { getFirstFocusable, getLastFocusable } from './utils';\n\nexport interface FocusLockProps {\n  className?: string;\n  disabled?: boolean;\n  autoFocus?: boolean;\n  restoreFocus?: boolean;\n  children: React.ReactNode;\n}\n\nexport interface FocusLockRef {\n  /**\n   * Focuses the first element in the component.\n   */\n  focusFirst(): void;\n}\n\nfunction FocusLock(\n  { className, disabled, autoFocus, restoreFocus, children }: FocusLockProps,\n  ref: React.Ref<FocusLockRef>\n) {\n  const restoreFocusTargetRef = useRef<HTMLOrSVGElement | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const focusFirst = () => {\n    if (containerRef.current) {\n      getFirstFocusable(containerRef.current)?.focus();\n    }\n  };\n\n  const focusLast = () => {\n    if (containerRef.current) {\n      getLastFocusable(containerRef.current)?.focus();\n    }\n  };\n\n  // Captures focus when `autoFocus` is set, and the component is mounted or\n  // `disabled` changes from true to false.\n  useEffect(() => {\n    const assignRestoreFocusTarget = () => {\n      if (document.activeElement && !containerRef.current?.contains(document.activeElement as Node)) {\n        restoreFocusTargetRef.current = document.activeElement as unknown as HTMLOrSVGElement;\n      }\n    };\n    if (autoFocus && !disabled) {\n      assignRestoreFocusTarget();\n      focusFirst();\n    }\n  }, [autoFocus, disabled]);\n\n  // Restore focus if `restoreFocus` is set, and `disabled` changes from false to true.\n  const [previouslyDisabled, setPreviouslyDisabled] = useState(!!disabled);\n  useEffect(() => {\n    if (previouslyDisabled !== !!disabled) {\n      setPreviouslyDisabled(!!disabled);\n      if (restoreFocus && disabled) {\n        restoreFocusTargetRef.current?.focus();\n        restoreFocusTargetRef.current = null;\n      }\n    }\n  }, [previouslyDisabled, disabled, restoreFocus]);\n\n  // Restore focus if `restoreFocus` is set and the component is unmounted.\n  // Using a callback ref for this is safer than using useEffect cleanups.\n  const restoreFocusHandler = useCallback(\n    (elem: HTMLDivElement | null) => {\n      if (elem === null && restoreFocus) {\n        restoreFocusTargetRef.current?.focus();\n        restoreFocusTargetRef.current = null;\n      }\n    },\n    [restoreFocus]\n  );\n\n  useImperativeHandle(ref, () => ({ focusFirst }));\n  const mergedRef = useMergeRefs(containerRef, restoreFocusHandler);\n\n  const isFocusInside = (event: React.FocusEvent) => nodeBelongs(containerRef.current, event.relatedTarget);\n  return (\n    <>\n      <TabTrap disabled={disabled} focusNextCallback={event => (isFocusInside(event) ? focusLast() : focusFirst())} />\n      <div className={className} ref={mergedRef}>\n        {children}\n      </div>\n      <TabTrap disabled={disabled} focusNextCallback={event => (isFocusInside(event) ? focusFirst() : focusLast())} />\n    </>\n  );\n}\n\nexport default React.forwardRef(FocusLock);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/focus-lock/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\n\nimport { nodeBelongs } from '@cloudscape-design/component-toolkit/dom';\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport TabTrap from '../tab-trap/index';\nimport { getFirstFocusable, getLastFocusable } from './utils';\n\nexport interface FocusLockProps {\n  className?: string;\n  disabled?: boolean;\n  autoFocus?: boolean;\n  restoreFocus?: boolean;\n  /**\n   * Element to focus when `autoFocus` captures focus. Defaults to the first\n   * focusable element in the container. Use this to focus an element that isn't\n   * keyboard-reachable, such as a heading with `tabIndex={-1}`.\n   */\n  autoFocusTarget?: React.RefObject<HTMLElement>;\n  children: React.ReactNode;\n}\n\nexport interface FocusLockRef {\n  /**\n   * Focuses the first element in the component.\n   */\n  focusFirst(): void;\n}\n\nfunction FocusLock(\n  { className, disabled, autoFocus, restoreFocus, autoFocusTarget, children }: FocusLockProps,\n  ref: React.Ref<FocusLockRef>\n) {\n  const restoreFocusTargetRef = useRef<HTMLOrSVGElement | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const focusFirst = () => {\n    if (containerRef.current) {\n      getFirstFocusable(containerRef.current)?.focus();\n    }\n  };\n\n  const focusLast = () => {\n    if (containerRef.current) {\n      getLastFocusable(containerRef.current)?.focus();\n    }\n  };\n\n  // Captures focus when `autoFocus` is set, and the component is mounted or\n  // `disabled` changes from true to false.\n  useEffect(() => {\n    const assignRestoreFocusTarget = () => {\n      if (document.activeElement && !containerRef.current?.contains(document.activeElement as Node)) {\n        restoreFocusTargetRef.current = document.activeElement as unknown as HTMLOrSVGElement;\n      }\n    };\n    if (autoFocus && !disabled) {\n      assignRestoreFocusTarget();\n      if (autoFocusTarget?.current) {\n        autoFocusTarget.current.focus();\n      } else {\n        focusFirst();\n      }\n    }\n  }, [autoFocus, disabled, autoFocusTarget]);\n\n  // Restore focus if `restoreFocus` is set, and `disabled` changes from false to true.\n  const [previouslyDisabled, setPreviouslyDisabled] = useState(!!disabled);\n  useEffect(() => {\n    if (previouslyDisabled !== !!disabled) {\n      setPreviouslyDisabled(!!disabled);\n      if (restoreFocus && disabled) {\n        restoreFocusTargetRef.current?.focus();\n        restoreFocusTargetRef.current = null;\n      }\n    }\n  }, [previouslyDisabled, disabled, restoreFocus]);\n\n  // Restore focus if `restoreFocus` is set and the component is unmounted.\n  // Using a callback ref for this is safer than using useEffect cleanups.\n  const restoreFocusHandler = useCallback(\n    (elem: HTMLDivElement | null) => {\n      if (elem === null && restoreFocus) {\n        restoreFocusTargetRef.current?.focus();\n        restoreFocusTargetRef.current = null;\n      }\n    },\n    [restoreFocus]\n  );\n\n  useImperativeHandle(ref, () => ({ focusFirst }));\n  const mergedRef = useMergeRefs(containerRef, restoreFocusHandler);\n\n  const isFocusInside = (event: React.FocusEvent) => nodeBelongs(containerRef.current, event.relatedTarget);\n  return (\n    <>\n      <TabTrap disabled={disabled} focusNextCallback={event => (isFocusInside(event) ? focusLast() : focusFirst())} />\n      <div className={className} ref={mergedRef}>\n        {children}\n      </div>\n      <TabTrap disabled={disabled} focusNextCallback={event => (isFocusInside(event) ? focusFirst() : focusLast())} />\n    </>\n  );\n}\n\nexport default React.forwardRef(FocusLock);\n"]}

package/lib/internal/template/internal/context/control-group-context.d.ts

@@ -1,11 +1,17 @@
 import React from 'react';
 export type GroupedControlPosition = 'first' | 'middle' | 'last' | 'only';
+export type GroupedControlDirection = 'horizontal' | 'vertical';
 export interface GroupedControlContextProps {
     /**
      * The control's position within a control group,
      * or `null` when the control is not in a control group.
      */
     position: GroupedControlPosition | null;
+    /**
+     * The axis along which the surrounding control group lays out its
+     * controls.
+     */
+    direction: GroupedControlDirection;
 }
 export declare const GroupedControlContext: React.Context<GroupedControlContextProps>;
 export declare function useGroupedControlContext(): GroupedControlContextProps;

package/lib/internal/template/internal/context/control-group-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"control-group-context.d.ts","sourceRoot":"","sources":["../../../../src/internal/context/control-group-context.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAE1E,MAAM,WAAW,0BAA0B;IACzC;;;OAGG;IACH,QAAQ,EAAE,sBAAsB,GAAG,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,qBAAqB,2CAEhC,CAAC;AAEH,wBAAgB,wBAAwB,+BAEvC;AAED;;;;;;;;GAQG;AACH,wBAAgB,0BAA0B,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,eAErF"}
+{"version":3,"file":"control-group-context.d.ts","sourceRoot":"","sources":["../../../../src/internal/context/control-group-context.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAE1E,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAAG,UAAU,CAAC;AAEhE,MAAM,WAAW,0BAA0B;IACzC;;;OAGG;IACH,QAAQ,EAAE,sBAAsB,GAAG,IAAI,CAAC;IACxC;;;OAGG;IACH,SAAS,EAAE,uBAAuB,CAAC;CACpC;AAED,eAAO,MAAM,qBAAqB,2CAGhC,CAAC;AAEH,wBAAgB,wBAAwB,+BAEvC;AAED;;;;;;;;GAQG;AACH,wBAAgB,0BAA0B,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,eAKrF"}

package/lib/internal/template/internal/context/control-group-context.js

@@ -3,6 +3,7 @@
 import React, { createContext, useContext } from 'react';
 export const GroupedControlContext = createContext({
     position: null,
+    direction: 'horizontal',
 });
 export function useGroupedControlContext() {
     return useContext(GroupedControlContext);
@@ -17,6 +18,7 @@ export function useGroupedControlContext() {
  * where adjacent borders lose their border radii.
  */
 export function ResetGroupedControlContext({ children }) {
-    return React.createElement(GroupedControlContext.Provider, { value: { position: null } }, children);
+    const { direction } = useGroupedControlContext();
+    return (React.createElement(GroupedControlContext.Provider, { value: { position: null, direction } }, children));
 }
 //# sourceMappingURL=control-group-context.js.map

package/lib/internal/template/internal/context/control-group-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"control-group-context.js","sourceRoot":"","sources":["../../../../src/internal/context/control-group-context.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAYzD,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAA6B;IAC7E,QAAQ,EAAE,IAAI;CACf,CAAC,CAAC;AAEH,MAAM,UAAU,wBAAwB;IACtC,OAAO,UAAU,CAAC,qBAAqB,CAAC,CAAC;AAC3C,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,0BAA0B,CAAC,EAAE,QAAQ,EAAiC;IACpF,OAAO,oBAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAG,QAAQ,CAAkC,CAAC;AAChH,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { createContext, useContext } from 'react';\n\nexport type GroupedControlPosition = 'first' | 'middle' | 'last' | 'only';\n\nexport interface GroupedControlContextProps {\n  /**\n   * The control's position within a control group,\n   * or `null` when the control is not in a control group.\n   */\n  position: GroupedControlPosition | null;\n}\n\nexport const GroupedControlContext = createContext<GroupedControlContextProps>({\n  position: null,\n});\n\nexport function useGroupedControlContext() {\n  return useContext(GroupedControlContext);\n}\n\n/**\n * Resets the grouped-control context back to \"not in a group\" for a subtree.\n *\n * Controls that render caller-supplied content (for example, custom dropdown\n * content) should wrap that content with this provider. Otherwise a nested\n * control rendered inside such a slot would inherit the surrounding group's\n * `position` and incorrectly pick up the grouped-control styling\n * where adjacent borders lose their border radii.\n */\nexport function ResetGroupedControlContext({ children }: { children: React.ReactNode }) {\n  return <GroupedControlContext.Provider value={{ position: null }}>{children}</GroupedControlContext.Provider>;\n}\n"]}
+{"version":3,"file":"control-group-context.js","sourceRoot":"","sources":["../../../../src/internal/context/control-group-context.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAmBzD,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAA6B;IAC7E,QAAQ,EAAE,IAAI;IACd,SAAS,EAAE,YAAY;CACxB,CAAC,CAAC;AAEH,MAAM,UAAU,wBAAwB;IACtC,OAAO,UAAU,CAAC,qBAAqB,CAAC,CAAC;AAC3C,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,0BAA0B,CAAC,EAAE,QAAQ,EAAiC;IACpF,MAAM,EAAE,SAAS,EAAE,GAAG,wBAAwB,EAAE,CAAC;IACjD,OAAO,CACL,oBAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,IAAG,QAAQ,CAAkC,CAClH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { createContext, useContext } from 'react';\n\nexport type GroupedControlPosition = 'first' | 'middle' | 'last' | 'only';\n\nexport type GroupedControlDirection = 'horizontal' | 'vertical';\n\nexport interface GroupedControlContextProps {\n  /**\n   * The control's position within a control group,\n   * or `null` when the control is not in a control group.\n   */\n  position: GroupedControlPosition | null;\n  /**\n   * The axis along which the surrounding control group lays out its\n   * controls.\n   */\n  direction: GroupedControlDirection;\n}\n\nexport const GroupedControlContext = createContext<GroupedControlContextProps>({\n  position: null,\n  direction: 'horizontal',\n});\n\nexport function useGroupedControlContext() {\n  return useContext(GroupedControlContext);\n}\n\n/**\n * Resets the grouped-control context back to \"not in a group\" for a subtree.\n *\n * Controls that render caller-supplied content (for example, custom dropdown\n * content) should wrap that content with this provider. Otherwise a nested\n * control rendered inside such a slot would inherit the surrounding group's\n * `position` and incorrectly pick up the grouped-control styling\n * where adjacent borders lose their border radii.\n */\nexport function ResetGroupedControlContext({ children }: { children: React.ReactNode }) {\n  const { direction } = useGroupedControlContext();\n  return (\n    <GroupedControlContext.Provider value={{ position: null, direction }}>{children}</GroupedControlContext.Provider>\n  );\n}\n"]}

package/lib/internal/template/internal/environment.js

@@ -1,6 +1,6 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (3bc1f014)";
-export var GIT_SHA = "3bc1f014";
+export var PACKAGE_VERSION = "3.0.0 (ea381b71)";
+export var GIT_SHA = "ea381b71";
 export var THEME = "open-source-visual-refresh";
 export var SYSTEM = "core";
 export var ALWAYS_VISUAL_REFRESH = true;

package/lib/internal/template/internal/environment.json

@@ -1,7 +1,7 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (3bc1f014)",
-  "GIT_SHA": "3bc1f014",
+  "PACKAGE_VERSION": "3.0.0 (ea381b71)",
+  "GIT_SHA": "ea381b71",
   "THEME": "default",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": false,

package/lib/internal/template/modal/index.d.ts

@@ -1,4 +1,4 @@
 import { ModalProps } from './interfaces';
 export { ModalProps };
-export default function Modal({ size, position, width, height, ...props }: ModalProps): JSX.Element;
+export default function Modal({ size, position, hideDismissButton, width, height, ...props }: ModalProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/modal/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAkDtB,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,IAAe,EAAE,QAAmB,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,eA+C1G"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/modal/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAoDtB,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,IAAe,EACf,QAAmB,EACnB,iBAAyB,EACzB,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACT,EAAE,UAAU,eAkDZ"}

package/lib/internal/template/modal/index.js

@@ -11,7 +11,7 @@ import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import InternalModal, { InternalModalAsFunnel } from './internal';
 import styles from './styles.css.js';
-function ModalWithAnalyticsFunnel({ analyticsMetadata, baseComponentProps, size = 'medium', ...props }) {
+function ModalWithAnalyticsFunnel({ analyticsMetadata, baseComponentProps, size = 'medium', hideDismissButton, ...props }) {
     const modalId = useUniqueId();
     const dataAttributes = {
         [DATA_ATTR_MODAL_ID]: modalId,
@@ -24,15 +24,16 @@ function ModalWithAnalyticsFunnel({ analyticsMetadata, baseComponentProps, size
         } },
         React.createElement(AnalyticsFunnelStep, { mounted: props.visible, stepIdentifier: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier, stepErrorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext, stepNumber: 1 },
             React.createElement(AnalyticsFunnelSubStep, { subStepIdentifier: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier, subStepErrorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext },
-                React.createElement(InternalModalAsFunnel, { size: size, ...props, ...baseComponentProps, ...dataAttributes, __injectAnalyticsComponentMetadata: true })))));
+                React.createElement(InternalModalAsFunnel, { size: size, hideDismissButton: hideDismissButton, ...props, ...baseComponentProps, ...dataAttributes, __injectAnalyticsComponentMetadata: true })))));
 }
-export default function Modal({ size = 'medium', position = 'center', width, height, ...props }) {
+export default function Modal({ size = 'medium', position = 'center', hideDismissButton = false, width, height, ...props }) {
     const { isInFunnel } = useFunnel();
     const analyticsMetadata = getAnalyticsMetadataProps(props);
     const baseComponentProps = useBaseComponent('Modal', {
         props: {
             size,
             position,
+            hideDismissButton,
             disableContentPaddings: props.disableContentPaddings,
             flowType: analyticsMetadata.flowType,
             width,
@@ -44,9 +45,9 @@ export default function Modal({ size = 'medium', position = 'center', width, hei
         },
     }, analyticsMetadata);
     if (!isInFunnel) {
-        return (React.createElement(ModalWithAnalyticsFunnel, { analyticsMetadata: analyticsMetadata, baseComponentProps: baseComponentProps, size: size, position: position, width: width, height: height, ...props }));
+        return (React.createElement(ModalWithAnalyticsFunnel, { analyticsMetadata: analyticsMetadata, baseComponentProps: baseComponentProps, size: size, position: position, hideDismissButton: hideDismissButton, width: width, height: height, ...props }));
     }
-    return (React.createElement(InternalModal, { size: size, position: position, width: width, height: height, ...props, ...baseComponentProps, __injectAnalyticsComponentMetadata: true }));
+    return (React.createElement(InternalModal, { size: size, position: position, hideDismissButton: hideDismissButton, width: width, height: height, ...props, ...baseComponentProps, __injectAnalyticsComponentMetadata: true }));
 }
 applyDisplayName(Modal, 'Modal');
 //# sourceMappingURL=index.js.map

package/lib/internal/template/modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/modal/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport {\n  AnalyticsFunnel,\n  AnalyticsFunnelStep,\n  AnalyticsFunnelSubStep,\n} from '../internal/analytics/components/analytics-funnel';\nimport { useFunnel } from '../internal/analytics/hooks/use-funnel';\nimport { DATA_ATTR_MODAL_ID } from '../internal/analytics/selectors';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { ModalProps } from './interfaces';\nimport InternalModal, { InternalModalAsFunnel } from './internal';\n\nimport styles from './styles.css.js';\n\nexport { ModalProps };\n\nfunction ModalWithAnalyticsFunnel({\n  analyticsMetadata,\n  baseComponentProps,\n  size = 'medium',\n  ...props\n}: ModalProps & { analyticsMetadata: any; baseComponentProps: ReturnType<typeof useBaseComponent> }) {\n  const modalId = useUniqueId();\n  const dataAttributes = {\n    [DATA_ATTR_MODAL_ID]: modalId,\n  };\n\n  return (\n    <AnalyticsFunnel\n      mounted={props.visible}\n      funnelIdentifier={analyticsMetadata?.instanceIdentifier}\n      funnelFlowType={analyticsMetadata?.flowType}\n      funnelErrorContext={analyticsMetadata?.errorContext}\n      funnelResourceType={analyticsMetadata?.resourceType}\n      funnelType=\"modal\"\n      optionalStepNumbers={[]}\n      totalFunnelSteps={1}\n      funnelNameSelectors={() => [\n        `[${DATA_ATTR_MODAL_ID}=\"${window?.CSS?.escape(modalId)}\"] .${styles['header--text']}`,\n      ]}\n    >\n      <AnalyticsFunnelStep\n        mounted={props.visible}\n        stepIdentifier={analyticsMetadata?.instanceIdentifier}\n        stepErrorContext={analyticsMetadata?.errorContext}\n        stepNumber={1}\n      >\n        <AnalyticsFunnelSubStep\n          subStepIdentifier={analyticsMetadata?.instanceIdentifier}\n          subStepErrorContext={analyticsMetadata?.errorContext}\n        >\n          <InternalModalAsFunnel\n            size={size}\n            {...props}\n            {...baseComponentProps}\n            {...dataAttributes}\n            __injectAnalyticsComponentMetadata={true}\n          />\n        </AnalyticsFunnelSubStep>\n      </AnalyticsFunnelStep>\n    </AnalyticsFunnel>\n  );\n}\n\nexport default function Modal({ size = 'medium', position = 'center', width, height, ...props }: ModalProps) {\n  const { isInFunnel } = useFunnel();\n  const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);\n  const baseComponentProps = useBaseComponent(\n    'Modal',\n    {\n      props: {\n        size,\n        position,\n        disableContentPaddings: props.disableContentPaddings,\n        flowType: analyticsMetadata.flowType,\n        width,\n        height,\n      },\n      metadata: {\n        hasResourceType: Boolean(analyticsMetadata?.resourceType),\n        hasInstanceIdentifier: Boolean(analyticsMetadata?.instanceIdentifier),\n      },\n    },\n    analyticsMetadata\n  );\n\n  if (!isInFunnel) {\n    return (\n      <ModalWithAnalyticsFunnel\n        analyticsMetadata={analyticsMetadata}\n        baseComponentProps={baseComponentProps}\n        size={size}\n        position={position}\n        width={width}\n        height={height}\n        {...props}\n      />\n    );\n  }\n\n  return (\n    <InternalModal\n      size={size}\n      position={position}\n      width={width}\n      height={height}\n      {...props}\n      {...baseComponentProps}\n      __injectAnalyticsComponentMetadata={true}\n    />\n  );\n}\n\napplyDisplayName(Modal, 'Modal');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/modal/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport {\n  AnalyticsFunnel,\n  AnalyticsFunnelStep,\n  AnalyticsFunnelSubStep,\n} from '../internal/analytics/components/analytics-funnel';\nimport { useFunnel } from '../internal/analytics/hooks/use-funnel';\nimport { DATA_ATTR_MODAL_ID } from '../internal/analytics/selectors';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { ModalProps } from './interfaces';\nimport InternalModal, { InternalModalAsFunnel } from './internal';\n\nimport styles from './styles.css.js';\n\nexport { ModalProps };\n\nfunction ModalWithAnalyticsFunnel({\n  analyticsMetadata,\n  baseComponentProps,\n  size = 'medium',\n  hideDismissButton,\n  ...props\n}: ModalProps & { analyticsMetadata: any; baseComponentProps: ReturnType<typeof useBaseComponent> }) {\n  const modalId = useUniqueId();\n  const dataAttributes = {\n    [DATA_ATTR_MODAL_ID]: modalId,\n  };\n\n  return (\n    <AnalyticsFunnel\n      mounted={props.visible}\n      funnelIdentifier={analyticsMetadata?.instanceIdentifier}\n      funnelFlowType={analyticsMetadata?.flowType}\n      funnelErrorContext={analyticsMetadata?.errorContext}\n      funnelResourceType={analyticsMetadata?.resourceType}\n      funnelType=\"modal\"\n      optionalStepNumbers={[]}\n      totalFunnelSteps={1}\n      funnelNameSelectors={() => [\n        `[${DATA_ATTR_MODAL_ID}=\"${window?.CSS?.escape(modalId)}\"] .${styles['header--text']}`,\n      ]}\n    >\n      <AnalyticsFunnelStep\n        mounted={props.visible}\n        stepIdentifier={analyticsMetadata?.instanceIdentifier}\n        stepErrorContext={analyticsMetadata?.errorContext}\n        stepNumber={1}\n      >\n        <AnalyticsFunnelSubStep\n          subStepIdentifier={analyticsMetadata?.instanceIdentifier}\n          subStepErrorContext={analyticsMetadata?.errorContext}\n        >\n          <InternalModalAsFunnel\n            size={size}\n            hideDismissButton={hideDismissButton}\n            {...props}\n            {...baseComponentProps}\n            {...dataAttributes}\n            __injectAnalyticsComponentMetadata={true}\n          />\n        </AnalyticsFunnelSubStep>\n      </AnalyticsFunnelStep>\n    </AnalyticsFunnel>\n  );\n}\n\nexport default function Modal({\n  size = 'medium',\n  position = 'center',\n  hideDismissButton = false,\n  width,\n  height,\n  ...props\n}: ModalProps) {\n  const { isInFunnel } = useFunnel();\n  const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);\n  const baseComponentProps = useBaseComponent(\n    'Modal',\n    {\n      props: {\n        size,\n        position,\n        hideDismissButton,\n        disableContentPaddings: props.disableContentPaddings,\n        flowType: analyticsMetadata.flowType,\n        width,\n        height,\n      },\n      metadata: {\n        hasResourceType: Boolean(analyticsMetadata?.resourceType),\n        hasInstanceIdentifier: Boolean(analyticsMetadata?.instanceIdentifier),\n      },\n    },\n    analyticsMetadata\n  );\n\n  if (!isInFunnel) {\n    return (\n      <ModalWithAnalyticsFunnel\n        analyticsMetadata={analyticsMetadata}\n        baseComponentProps={baseComponentProps}\n        size={size}\n        position={position}\n        hideDismissButton={hideDismissButton}\n        width={width}\n        height={height}\n        {...props}\n      />\n    );\n  }\n\n  return (\n    <InternalModal\n      size={size}\n      position={position}\n      hideDismissButton={hideDismissButton}\n      width={width}\n      height={height}\n      {...props}\n      {...baseComponentProps}\n      __injectAnalyticsComponentMetadata={true}\n    />\n  );\n}\n\napplyDisplayName(Modal, 'Modal');\n"]}

package/lib/internal/template/modal/interfaces.d.ts

@@ -47,6 +47,13 @@ export interface ModalProps extends BaseComponentProps, BaseModalProps {
      *   vertical repositioning that can cause users to lose context.
      */
     position?: ModalProps.Position;
+    /**
+     * Determines whether the close button is displayed in the header.
+     * When set to `true`, the close button isn't rendered, and the user resolves
+     * the modal by choosing one of the actions in the footer.
+     * ESC and clicks outside the modal still call `onDismiss`.
+     */
+    hideDismissButton?: boolean;
     /**
      * Determines whether the modal is displayed on the screen. Modals are hidden by default.
      * Set this property to `true` to show them.

package/lib/internal/template/modal/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/modal/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAE5E,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAE3C;;;;OAIG;IACH,eAAe,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;CAClD;AAED,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,cAAc;IACpE;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC;IACvB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC;IAC/B;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAChE;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC;CAClD;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,KAAK,CAAC;IACjF,KAAY,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC;IAExC,UAAiB,aAAa;QAC5B,MAAM,EAAE,MAAM,CAAC;KAChB;IAED,UAAiB,iBAAiB;QAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,QAAQ,CAAC,EAAE,QAAQ,CAAC;QACpB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/modal/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAE5E,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAE3C;;;;OAIG;IACH,eAAe,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;CAClD;AAED,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,cAAc;IACpE;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC;IACvB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAChE;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC;CAClD;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,KAAK,CAAC;IACjF,KAAY,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC;IAExC,UAAiB,aAAa;QAC5B,MAAM,EAAE,MAAM,CAAC;KAChB;IAED,UAAiB,iBAAiB;QAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,QAAQ,CAAC,EAAE,QAAQ,CAAC;QACpB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB;CACF"}

package/lib/internal/template/modal/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/modal/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { PortalProps } from '@cloudscape-design/component-toolkit/internal';\n\nimport { FlowType } from '../types/analytics';\nimport { BaseComponentProps } from '../types/base-component';\nimport { NonCancelableEventHandler } from '../types/events';\n\nexport interface BaseModalProps {\n  /**\n   * Use this property to specify a different dynamic modal root for the dialog.\n   * The function will be called when a user clicks on the trigger button.\n   */\n  getModalRoot?: PortalProps['getContainer'];\n\n  /**\n   * Use this property when `getModalRoot` is used to clean up the modal root\n   * element after a user closes the dialog. The function receives the return value\n   * of the most recent getModalRoot call as an argument.\n   */\n  removeModalRoot?: PortalProps['removeContainer'];\n}\n\nexport interface ModalProps extends BaseComponentProps, BaseModalProps {\n  /**\n   * Specifies the width of the modal. When provided, takes precedence over the `size` property.\n   * If the specified width exceeds available viewport space, the modal will use the maximum available space.\n   * The minimum width is 320px (equivalent to the `small` size).\n   */\n  width?: number;\n\n  /**\n   * Specifies the height of the modal. When provided, the modal content becomes scrollable if it exceeds the specified height.\n   * If the specified height exceeds available viewport space, the modal will use the maximum available space.\n   * To make sure the content is accessible, the component will apply a minimum height of 60px for the content area,\n   * plus the header height and the footer height.\n   */\n  height?: number;\n\n  /**\n   * Sets the width of the modal. `max` uses variable width up to the\n   * largest size allowed by the design guidelines. Other sizes have fixed widths:\n   * `small` (320px), `medium` (600px), `large` (820px), `x-large` (1024px), `xx-large` (1280px).\n   */\n  size?: ModalProps.Size;\n  /**\n   * Controls the vertical positioning of the modal.\n   *\n   * - `center` (default) - The modal is vertically centered in the viewport and re-centers\n   *   when content height changes. Use for dialogs with static, predictable content.\n   *\n   * - `top` - The modal anchors at fixed distance and grows downward\n   *   as content expands. Use when the content changes dynamically to prevent disruptive\n   *   vertical repositioning that can cause users to lose context.\n   */\n  position?: ModalProps.Position;\n  /**\n   * Determines whether the modal is displayed on the screen. Modals are hidden by default.\n   * Set this property to `true` to show them.\n   */\n  visible: boolean;\n  /**\n   * Adds an `aria-label` to the close button, for accessibility.\n   * @i18n\n   */\n  closeAriaLabel?: string;\n  /**\n   * Specifies a title for the modal. Although this can be empty, we suggest that you always provide a title.\n   */\n  header?: React.ReactNode;\n  /**\n   * Body of the modal.\n   */\n  children?: React.ReactNode;\n  /**\n   * Specifies a footer for the modal. If empty, the footer isn't displayed.\n   */\n  footer?: React.ReactNode;\n  /**\n   * Determines whether the modal content has padding. If `true`, removes the default padding from the content area.\n   */\n  disableContentPaddings?: boolean;\n  /**\n   * Called when a user closes the modal by using the close icon button,\n   * clicking outside of the modal, or pressing ESC.\n   * The event detail contains the `reason`, which can be any of the following:\n   * `['closeButton', 'overlay', 'keyboard']`.\n   */\n  onDismiss?: NonCancelableEventHandler<ModalProps.DismissDetail>;\n  /**\n   * Specifies the HTML element where the modal is rendered.\n   * If neither `modalRoot` or `getModalRoot` properties are provided, the modal will\n   * render to an element under `document.body`.\n   */\n  modalRoot?: HTMLElement;\n\n  /**\n   * Specifies additional analytics-related metadata.\n   * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n   * * `flowType` - Identifies the type of flow represented by the component.\n   * * `resourceType` - Identifies the type of resource represented by the flow. **Note:** This API is currently experimental.\n   * @analytics\n   */\n  analyticsMetadata?: ModalProps.AnalyticsMetadata;\n}\n\nexport namespace ModalProps {\n  export type Size = 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'max';\n  export type Position = 'center' | 'top';\n\n  export interface DismissDetail {\n    reason: string;\n  }\n\n  export interface AnalyticsMetadata {\n    instanceIdentifier?: string;\n    flowType?: FlowType;\n    resourceType?: string;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/modal/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { PortalProps } from '@cloudscape-design/component-toolkit/internal';\n\nimport { FlowType } from '../types/analytics';\nimport { BaseComponentProps } from '../types/base-component';\nimport { NonCancelableEventHandler } from '../types/events';\n\nexport interface BaseModalProps {\n  /**\n   * Use this property to specify a different dynamic modal root for the dialog.\n   * The function will be called when a user clicks on the trigger button.\n   */\n  getModalRoot?: PortalProps['getContainer'];\n\n  /**\n   * Use this property when `getModalRoot` is used to clean up the modal root\n   * element after a user closes the dialog. The function receives the return value\n   * of the most recent getModalRoot call as an argument.\n   */\n  removeModalRoot?: PortalProps['removeContainer'];\n}\n\nexport interface ModalProps extends BaseComponentProps, BaseModalProps {\n  /**\n   * Specifies the width of the modal. When provided, takes precedence over the `size` property.\n   * If the specified width exceeds available viewport space, the modal will use the maximum available space.\n   * The minimum width is 320px (equivalent to the `small` size).\n   */\n  width?: number;\n\n  /**\n   * Specifies the height of the modal. When provided, the modal content becomes scrollable if it exceeds the specified height.\n   * If the specified height exceeds available viewport space, the modal will use the maximum available space.\n   * To make sure the content is accessible, the component will apply a minimum height of 60px for the content area,\n   * plus the header height and the footer height.\n   */\n  height?: number;\n\n  /**\n   * Sets the width of the modal. `max` uses variable width up to the\n   * largest size allowed by the design guidelines. Other sizes have fixed widths:\n   * `small` (320px), `medium` (600px), `large` (820px), `x-large` (1024px), `xx-large` (1280px).\n   */\n  size?: ModalProps.Size;\n  /**\n   * Controls the vertical positioning of the modal.\n   *\n   * - `center` (default) - The modal is vertically centered in the viewport and re-centers\n   *   when content height changes. Use for dialogs with static, predictable content.\n   *\n   * - `top` - The modal anchors at fixed distance and grows downward\n   *   as content expands. Use when the content changes dynamically to prevent disruptive\n   *   vertical repositioning that can cause users to lose context.\n   */\n  position?: ModalProps.Position;\n  /**\n   * Determines whether the close button is displayed in the header.\n   * When set to `true`, the close button isn't rendered, and the user resolves\n   * the modal by choosing one of the actions in the footer.\n   * ESC and clicks outside the modal still call `onDismiss`.\n   */\n  hideDismissButton?: boolean;\n  /**\n   * Determines whether the modal is displayed on the screen. Modals are hidden by default.\n   * Set this property to `true` to show them.\n   */\n  visible: boolean;\n  /**\n   * Adds an `aria-label` to the close button, for accessibility.\n   * @i18n\n   */\n  closeAriaLabel?: string;\n  /**\n   * Specifies a title for the modal. Although this can be empty, we suggest that you always provide a title.\n   */\n  header?: React.ReactNode;\n  /**\n   * Body of the modal.\n   */\n  children?: React.ReactNode;\n  /**\n   * Specifies a footer for the modal. If empty, the footer isn't displayed.\n   */\n  footer?: React.ReactNode;\n  /**\n   * Determines whether the modal content has padding. If `true`, removes the default padding from the content area.\n   */\n  disableContentPaddings?: boolean;\n  /**\n   * Called when a user closes the modal by using the close icon button,\n   * clicking outside of the modal, or pressing ESC.\n   * The event detail contains the `reason`, which can be any of the following:\n   * `['closeButton', 'overlay', 'keyboard']`.\n   */\n  onDismiss?: NonCancelableEventHandler<ModalProps.DismissDetail>;\n  /**\n   * Specifies the HTML element where the modal is rendered.\n   * If neither `modalRoot` or `getModalRoot` properties are provided, the modal will\n   * render to an element under `document.body`.\n   */\n  modalRoot?: HTMLElement;\n\n  /**\n   * Specifies additional analytics-related metadata.\n   * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n   * * `flowType` - Identifies the type of flow represented by the component.\n   * * `resourceType` - Identifies the type of resource represented by the flow. **Note:** This API is currently experimental.\n   * @analytics\n   */\n  analyticsMetadata?: ModalProps.AnalyticsMetadata;\n}\n\nexport namespace ModalProps {\n  export type Size = 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'max';\n  export type Position = 'center' | 'top';\n\n  export interface DismissDetail {\n    reason: string;\n  }\n\n  export interface AnalyticsMetadata {\n    instanceIdentifier?: string;\n    flowType?: FlowType;\n    resourceType?: string;\n  }\n}\n"]}

package/lib/internal/template/modal/internal.js

@@ -44,7 +44,7 @@ export default function InternalModal({ modalRoot, getModalRoot, removeModalRoot
 }
 // Separate component to prevent the Portal from getting in the way of refs, as it needs extra cycles to render the inner components.
 // useContainerQuery needs its targeted element to exist on the first render in order to work properly.
-function PortaledModal({ size, visible, header, children, footer, disableContentPaddings, position = 'center', onButtonClick = () => { }, onDismiss, width, height, __internalRootRef, __injectAnalyticsComponentMetadata, __funnelProps, __funnelStepProps, __subStepRef, __subStepFunnelProps, referrerId, ...rest }) {
+function PortaledModal({ size, hideDismissButton = false, visible, header, children, footer, disableContentPaddings, position = 'center', onButtonClick = () => { }, onDismiss, width, height, __internalRootRef, __injectAnalyticsComponentMetadata, __funnelProps, __funnelStepProps, __subStepRef, __subStepFunnelProps, referrerId, ...rest }) {
     var _a;
     const instanceUniqueId = useUniqueId();
     const headerId = `${rest.id || instanceUniqueId}-header`;
@@ -54,6 +54,7 @@ function PortaledModal({ size, visible, header, children, footer, disableContent
     const closeAriaLabel = i18n('closeAriaLabel', rest.closeAriaLabel);
     const refObject = useRef(null);
     const mergedRef = useMergeRefs(breakpointsRef, refObject, __internalRootRef);
+    const dialogRef = useRef(null);
     const isRefresh = useVisualRefresh();
     const baseProps = getBaseProps(rest);
     const analyticsComponentMetadata = {
@@ -122,6 +123,13 @@ function PortaledModal({ size, visible, header, children, footer, disableContent
     const dismiss = (reason) => fireNonCancelableEvent(onDismiss, { reason });
     const onOverlayMouseDown = (event) => {
         lastMouseDownElementRef.current = event.target;
+        // The overlay can't hold focus, so pressing it would blur whatever is focused inside the
+        // dialog and leave focus on the document body. That takes focus out of the dialog, which
+        // breaks focus containment and stops ESC from reaching the handler on the dialog element.
+        // Preventing the default action keeps focus where it is.
+        if (event.target === refObject.current) {
+            event.preventDefault();
+        }
     };
     const onOverlayClick = (event) => {
         const overlay = refObject.current;
@@ -140,7 +148,13 @@ function PortaledModal({ size, visible, header, children, footer, disableContent
     // to detect when the user has scrolled to the bottom.
     const { ref: stickySentinelRef, isIntersecting: footerStuck } = useIntersectionObserver();
     const headerTextRef = useRef(null);
+    const headingTagRef = useRef(null);
     const { subStepRef } = useFunnelSubStep();
+    // Without a dismiss button there is no predictable first focusable element, so focus the
+    // heading to announce what the modal is about. When no header is given, fall back to the
+    // dialog.
+    const hasHeader = header !== undefined && header !== null && header !== false && header !== '';
+    const autoFocusTarget = hideDismissButton ? (hasHeader ? headingTagRef : dialogRef) : undefined;
     const { footerRef, headerRef, hasCustomHeight, hasCustomWidth, dialogCustomStyles, footerHeight } = useModalDimensions({
         height,
         width,
@@ -153,15 +167,18 @@ function PortaledModal({ size, visible, header, children, footer, disableContent
                     componentLoadingCount,
                     emitTimeToContentReadyInModal,
                 } },
-                React.createElement("div", { ...baseProps, ...__funnelProps, ...__funnelStepProps, className: clsx(styles.root, { [styles.hidden]: !visible }, baseProps.className, isRefresh && styles.refresh), role: "dialog", "aria-labelledby": headerId, onMouseDown: onOverlayMouseDown, onClick: onOverlayClick, ref: mergedRef, style: footerHeight ? { scrollPaddingBottom: footerHeight } : undefined, "data-awsui-referrer-id": ((_a = subStepRef.current) === null || _a === void 0 ? void 0 : _a.id) || referrerId },
-                    React.createElement(FocusLock, { disabled: !visible, autoFocus: true, restoreFocus: true, className: clsx(styles['focus-lock'], styles[`position-${position}`]) },
-                        React.createElement("div", { className: clsx(styles.dialog, !hasCustomWidth && styles[size], styles[`breakpoint-${breakpoint}`], isRefresh && styles.refresh, hasCustomWidth && styles['custom-width'], hasCustomHeight && styles['custom-height']), style: dialogCustomStyles, onKeyDown: escKeyHandler, ...metadataAttribute },
+                React.createElement("div", { ...baseProps, ...__funnelProps, ...__funnelStepProps, className: clsx(styles.root, { [styles.hidden]: !visible }, hideDismissButton && styles['hide-dismiss-button'], baseProps.className, isRefresh && styles.refresh), role: "dialog", "aria-labelledby": headerId, onMouseDown: onOverlayMouseDown, onClick: onOverlayClick, ref: mergedRef, style: footerHeight ? { scrollPaddingBottom: footerHeight } : undefined, "data-awsui-referrer-id": ((_a = subStepRef.current) === null || _a === void 0 ? void 0 : _a.id) || referrerId },
+                    React.createElement(FocusLock, { disabled: !visible, autoFocus: true, restoreFocus: true, autoFocusTarget: autoFocusTarget, className: clsx(styles['focus-lock'], styles[`position-${position}`]) },
+                        React.createElement("div", { className: clsx(styles.dialog, !hasCustomWidth && styles[size], styles[`breakpoint-${breakpoint}`], isRefresh && styles.refresh, hasCustomWidth && styles['custom-width'], hasCustomHeight && styles['custom-height']), ref: dialogRef, style: dialogCustomStyles, onKeyDown: escKeyHandler, 
+                            // Keeps the dialog focusable so that clicking a non-focusable area inside it moves
+                            // focus to the dialog rather than the document body.
+                            tabIndex: -1, ...metadataAttribute },
                             React.createElement("div", { className: clsx(styles.container, hasCustomHeight && styles['custom-height-container']) },
                                 React.createElement("div", { ref: headerRef, className: clsx(styles.header, analyticsSelectors.header) },
-                                    React.createElement(InternalHeader, { variant: "h2", __disableActionsWrapping: true, actions: React.createElement("div", { ...getAnalyticsMetadataAttribute({
+                                    React.createElement(InternalHeader, { variant: "h2", __disableActionsWrapping: true, __headingTagRef: headingTagRef, __headingTagTabIndex: -1, actions: hideDismissButton ? undefined : (React.createElement("div", { ...getAnalyticsMetadataAttribute({
                                                 action: 'dismiss',
                                             }) },
-                                            React.createElement(InternalButton, { ariaLabel: closeAriaLabel, className: styles['dismiss-control'], variant: "modal-dismiss", iconName: "close", formAction: "none", onClick: onCloseButtonClick })) },
+                                            React.createElement(InternalButton, { ariaLabel: closeAriaLabel, className: styles['dismiss-control'], variant: "modal-dismiss", iconName: "close", formAction: "none", onClick: onCloseButtonClick }))) },
                                         React.createElement("span", { ref: headerTextRef, id: headerId, className: styles['header--text'] }, header))),
                                 React.createElement(BuiltInErrorBoundary, { wrapper: content => React.createElement(InternalBox, { padding: { bottom: 'm', horizontal: 'l' } }, content) },
                                     React.createElement("div", { ref: __subStepRef, ...__subStepFunnelProps, className: clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings }, hasCustomHeight && styles['custom-height-content']), ...(hasCustomHeight && {

package/lib/internal/template/modal/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/modal/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { Portal, useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalBox from '../box/internal';\nimport { InternalButton } from '../button/internal';\nimport { BuiltInErrorBoundary } from '../error-boundary/internal';\nimport InternalHeader from '../header/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { PerformanceMetrics } from '../internal/analytics';\nimport {\n  FunnelNameSelectorContext,\n  FunnelStepContextValue,\n  FunnelSubStepContextValue,\n} from '../internal/analytics/context/analytics-context';\nimport { FunnelProps, useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getBaseProps } from '../internal/base-component';\nimport FocusLock from '../internal/components/focus-lock';\nimport { ButtonContext, ButtonContextProps } from '../internal/context/button-context';\nimport { ModalContext } from '../internal/context/modal-context';\nimport ResetContextsForModal from '../internal/context/reset-contexts-for-modal';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useIntersectionObserver } from '../internal/hooks/use-intersection-observer';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { KeyCode } from '../internal/keycode';\nimport { SomeRequired } from '../internal/types';\nimport {\n  GeneratedAnalyticsMetadataModalComponent,\n  GeneratedAnalyticsMetadataModalDismiss,\n} from './analytics-metadata/interfaces';\nimport { disableBodyScrolling, enableBodyScrolling } from './body-scroll';\nimport { ModalProps } from './interfaces';\nimport { useModalDimensions } from './use-modal-dimensions';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport function InternalModalAsFunnel(props: InternalModalProps) {\n  const { funnelProps, funnelSubmit, funnelNextOrSubmitAttempt } = useFunnel();\n  const { funnelStepProps } = useFunnelStep();\n  const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n  const onButtonClick: ButtonContextProps['onClick'] = ({ variant }) => {\n    if (variant === 'primary') {\n      funnelNextOrSubmitAttempt();\n      funnelSubmit();\n    }\n  };\n\n  return (\n    <InternalModal\n      __funnelProps={funnelProps}\n      __funnelStepProps={funnelStepProps}\n      __subStepRef={subStepRef}\n      __subStepFunnelProps={funnelSubStepProps}\n      onButtonClick={onButtonClick}\n      {...props}\n    />\n  );\n}\n\ntype InternalModalProps = SomeRequired<ModalProps, 'size'> &\n  InternalBaseComponentProps & {\n    __funnelProps?: FunnelProps;\n    __funnelStepProps?: FunnelStepContextValue['funnelStepProps'];\n    __subStepRef?: FunnelSubStepContextValue['subStepRef'];\n    __subStepFunnelProps?: FunnelSubStepContextValue['funnelSubStepProps'];\n    __injectAnalyticsComponentMetadata?: boolean;\n    onButtonClick?: ButtonContextProps['onClick'];\n    referrerId?: string;\n    width?: number;\n    height?: number;\n  };\n\nexport default function InternalModal({ modalRoot, getModalRoot, removeModalRoot, ...rest }: InternalModalProps) {\n  return (\n    <Portal container={modalRoot} getContainer={getModalRoot} removeContainer={removeModalRoot}>\n      <PortaledModal {...rest} />\n    </Portal>\n  );\n}\n\ntype PortaledModalProps = Omit<InternalModalProps, 'modalRoot' | 'getModalRoot' | 'removeModalRoot'>;\n\n// Separate component to prevent the Portal from getting in the way of refs, as it needs extra cycles to render the inner components.\n// useContainerQuery needs its targeted element to exist on the first render in order to work properly.\nfunction PortaledModal({\n  size,\n  visible,\n  header,\n  children,\n  footer,\n  disableContentPaddings,\n  position = 'center',\n  onButtonClick = () => {},\n  onDismiss,\n  width,\n  height,\n  __internalRootRef,\n  __injectAnalyticsComponentMetadata,\n  __funnelProps,\n  __funnelStepProps,\n  __subStepRef,\n  __subStepFunnelProps,\n  referrerId,\n  ...rest\n}: PortaledModalProps) {\n  const instanceUniqueId = useUniqueId();\n  const headerId = `${rest.id || instanceUniqueId}-header`;\n  const lastMouseDownElementRef = useRef<HTMLElement | null>(null);\n  const [breakpoint, breakpointsRef] = useContainerBreakpoints(['xs']);\n\n  const i18n = useInternalI18n('modal');\n  const closeAriaLabel = i18n('closeAriaLabel', rest.closeAriaLabel);\n\n  const refObject = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(breakpointsRef, refObject, __internalRootRef);\n\n  const isRefresh = useVisualRefresh();\n\n  const baseProps = getBaseProps(rest);\n\n  const analyticsComponentMetadata: GeneratedAnalyticsMetadataModalComponent = {\n    name: 'awsui.Modal',\n    label: `.${analyticsSelectors.header} h2`,\n  };\n  const metadataAttribute = __injectAnalyticsComponentMetadata\n    ? getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })\n    : {};\n  const loadStartTime = useRef<number>(0);\n  const loadCompleteTime = useRef<number>(0);\n  const componentLoadingCount = useRef<number>(0);\n  const performanceMetricLogged = useRef<boolean>(false);\n\n  // enable body scroll and restore focus if unmounting while visible\n  useEffect(() => {\n    return () => {\n      enableBodyScrolling();\n    };\n  }, []);\n\n  const resetModalPerformanceData = () => {\n    loadStartTime.current = performance.now();\n    loadCompleteTime.current = 0;\n    performanceMetricLogged.current = false;\n  };\n\n  const emitTimeToContentReadyInModal = (loadCompleteTime: number) => {\n    if (\n      componentLoadingCount.current === 0 &&\n      loadStartTime.current &&\n      loadStartTime.current !== 0 &&\n      !performanceMetricLogged.current\n    ) {\n      const timeToContentReadyInModal = loadCompleteTime - loadStartTime.current;\n      PerformanceMetrics.modalPerformanceData({\n        timeToContentReadyInModal,\n        instanceIdentifier: instanceUniqueId,\n        componentIdentifier: headerTextRef.current?.textContent || '',\n      });\n      performanceMetricLogged.current = true;\n    }\n  };\n\n  const MODAL_READY_TIMEOUT = 100;\n  /**\n   * This useEffect is triggered when the visible attribute of modal changes.\n   * When modal becomes visible, modal performance metrics are reset marking the beginning loading process.\n   * To ensure that the modal component ready metric is always emitted, a setTimeout is implemented.\n   * This setTimeout automatically emits the component ready metric after a specified duration.\n   */\n  useEffect(() => {\n    if (visible) {\n      disableBodyScrolling();\n      resetModalPerformanceData();\n      setTimeout(() => {\n        emitTimeToContentReadyInModal(loadStartTime.current);\n      }, MODAL_READY_TIMEOUT);\n    } else {\n      enableBodyScrolling();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [visible]);\n\n  // Because we hide the element with styles (and not actually detach it from DOM), we need to scroll to top\n  useEffect(() => {\n    if (visible && refObject.current) {\n      refObject.current.scrollTop = 0;\n    }\n  }, [visible]);\n\n  const dismiss = (reason: string) => fireNonCancelableEvent(onDismiss, { reason });\n\n  const onOverlayMouseDown = (event: React.MouseEvent) => {\n    lastMouseDownElementRef.current = event.target as HTMLElement;\n  };\n  const onOverlayClick = (event: React.MouseEvent) => {\n    const overlay = refObject.current;\n    const lastClicked = lastMouseDownElementRef.current;\n\n    if (event.target === overlay && lastClicked === overlay) {\n      dismiss('overlay');\n    }\n  };\n  const onCloseButtonClick = () => dismiss('closeButton');\n  const escKeyHandler = (event: React.KeyboardEvent) => {\n    if (event.keyCode === KeyCode.escape) {\n      dismiss('keyboard');\n    }\n  };\n\n  // We use an empty div element at the end of the content slot as a sentinel\n  // to detect when the user has scrolled to the bottom.\n  const { ref: stickySentinelRef, isIntersecting: footerStuck } = useIntersectionObserver();\n\n  const headerTextRef = useRef<HTMLSpanElement>(null);\n  const { subStepRef } = useFunnelSubStep();\n\n  const { footerRef, headerRef, hasCustomHeight, hasCustomWidth, dialogCustomStyles, footerHeight } =\n    useModalDimensions({\n      height,\n      width,\n      hasFooter: !!footer,\n    });\n\n  return (\n    <FunnelNameSelectorContext.Provider value={`.${styles['header--text']}`}>\n      <ResetContextsForModal>\n        <ModalContext.Provider\n          value={{\n            isInModal: true,\n            componentLoadingCount,\n            emitTimeToContentReadyInModal,\n          }}\n        >\n          <div\n            {...baseProps}\n            {...__funnelProps}\n            {...__funnelStepProps}\n            className={clsx(\n              styles.root,\n              { [styles.hidden]: !visible },\n              baseProps.className,\n              isRefresh && styles.refresh\n            )}\n            role=\"dialog\"\n            aria-labelledby={headerId}\n            onMouseDown={onOverlayMouseDown}\n            onClick={onOverlayClick}\n            ref={mergedRef}\n            style={footerHeight ? { scrollPaddingBottom: footerHeight } : undefined}\n            data-awsui-referrer-id={subStepRef.current?.id || referrerId}\n          >\n            <FocusLock\n              disabled={!visible}\n              autoFocus={true}\n              restoreFocus={true}\n              className={clsx(styles['focus-lock'], styles[`position-${position}`])}\n            >\n              <div\n                className={clsx(\n                  styles.dialog,\n                  !hasCustomWidth && styles[size],\n                  styles[`breakpoint-${breakpoint}`],\n                  isRefresh && styles.refresh,\n                  hasCustomWidth && styles['custom-width'],\n                  hasCustomHeight && styles['custom-height']\n                )}\n                style={dialogCustomStyles}\n                onKeyDown={escKeyHandler}\n                {...metadataAttribute}\n              >\n                <div className={clsx(styles.container, hasCustomHeight && styles['custom-height-container'])}>\n                  <div ref={headerRef} className={clsx(styles.header, analyticsSelectors.header)}>\n                    <InternalHeader\n                      variant=\"h2\"\n                      __disableActionsWrapping={true}\n                      actions={\n                        <div\n                          {...getAnalyticsMetadataAttribute({\n                            action: 'dismiss',\n                          } as Partial<GeneratedAnalyticsMetadataModalDismiss>)}\n                        >\n                          <InternalButton\n                            ariaLabel={closeAriaLabel}\n                            className={styles['dismiss-control']}\n                            variant=\"modal-dismiss\"\n                            iconName=\"close\"\n                            formAction=\"none\"\n                            onClick={onCloseButtonClick}\n                          />\n                        </div>\n                      }\n                    >\n                      <span ref={headerTextRef} id={headerId} className={styles['header--text']}>\n                        {header}\n                      </span>\n                    </InternalHeader>\n                  </div>\n                  <BuiltInErrorBoundary\n                    wrapper={content => <InternalBox padding={{ bottom: 'm', horizontal: 'l' }}>{content}</InternalBox>}\n                  >\n                    <div\n                      ref={__subStepRef}\n                      {...__subStepFunnelProps}\n                      className={clsx(\n                        styles.content,\n                        { [styles['no-paddings']]: disableContentPaddings },\n                        hasCustomHeight && styles['custom-height-content']\n                      )}\n                      {...(hasCustomHeight && {\n                        tabIndex: 0,\n                        role: 'region',\n                        'aria-labelledby': headerId,\n                      })}\n                    >\n                      {children}\n                      <div ref={stickySentinelRef} />\n                    </div>\n                    {footer && (\n                      <ButtonContext.Provider value={{ onClick: onButtonClick }}>\n                        <div\n                          ref={footerRef}\n                          className={clsx(styles.footer, (footerStuck || hasCustomHeight) && styles['footer--rounded'])}\n                        >\n                          {footer}\n                        </div>\n                      </ButtonContext.Provider>\n                    )}\n                  </BuiltInErrorBoundary>\n                </div>\n              </div>\n            </FocusLock>\n          </div>\n        </ModalContext.Provider>\n      </ResetContextsForModal>\n    </FunnelNameSelectorContext.Provider>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/modal/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { Portal, useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalBox from '../box/internal';\nimport { InternalButton } from '../button/internal';\nimport { BuiltInErrorBoundary } from '../error-boundary/internal';\nimport InternalHeader from '../header/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { PerformanceMetrics } from '../internal/analytics';\nimport {\n  FunnelNameSelectorContext,\n  FunnelStepContextValue,\n  FunnelSubStepContextValue,\n} from '../internal/analytics/context/analytics-context';\nimport { FunnelProps, useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getBaseProps } from '../internal/base-component';\nimport FocusLock from '../internal/components/focus-lock';\nimport { ButtonContext, ButtonContextProps } from '../internal/context/button-context';\nimport { ModalContext } from '../internal/context/modal-context';\nimport ResetContextsForModal from '../internal/context/reset-contexts-for-modal';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useIntersectionObserver } from '../internal/hooks/use-intersection-observer';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { KeyCode } from '../internal/keycode';\nimport { SomeRequired } from '../internal/types';\nimport {\n  GeneratedAnalyticsMetadataModalComponent,\n  GeneratedAnalyticsMetadataModalDismiss,\n} from './analytics-metadata/interfaces';\nimport { disableBodyScrolling, enableBodyScrolling } from './body-scroll';\nimport { ModalProps } from './interfaces';\nimport { useModalDimensions } from './use-modal-dimensions';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport function InternalModalAsFunnel(props: InternalModalProps) {\n  const { funnelProps, funnelSubmit, funnelNextOrSubmitAttempt } = useFunnel();\n  const { funnelStepProps } = useFunnelStep();\n  const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n  const onButtonClick: ButtonContextProps['onClick'] = ({ variant }) => {\n    if (variant === 'primary') {\n      funnelNextOrSubmitAttempt();\n      funnelSubmit();\n    }\n  };\n\n  return (\n    <InternalModal\n      __funnelProps={funnelProps}\n      __funnelStepProps={funnelStepProps}\n      __subStepRef={subStepRef}\n      __subStepFunnelProps={funnelSubStepProps}\n      onButtonClick={onButtonClick}\n      {...props}\n    />\n  );\n}\n\ntype InternalModalProps = SomeRequired<ModalProps, 'size'> &\n  InternalBaseComponentProps & {\n    __funnelProps?: FunnelProps;\n    __funnelStepProps?: FunnelStepContextValue['funnelStepProps'];\n    __subStepRef?: FunnelSubStepContextValue['subStepRef'];\n    __subStepFunnelProps?: FunnelSubStepContextValue['funnelSubStepProps'];\n    __injectAnalyticsComponentMetadata?: boolean;\n    onButtonClick?: ButtonContextProps['onClick'];\n    referrerId?: string;\n    width?: number;\n    height?: number;\n  };\n\nexport default function InternalModal({ modalRoot, getModalRoot, removeModalRoot, ...rest }: InternalModalProps) {\n  return (\n    <Portal container={modalRoot} getContainer={getModalRoot} removeContainer={removeModalRoot}>\n      <PortaledModal {...rest} />\n    </Portal>\n  );\n}\n\ntype PortaledModalProps = Omit<InternalModalProps, 'modalRoot' | 'getModalRoot' | 'removeModalRoot'>;\n\n// Separate component to prevent the Portal from getting in the way of refs, as it needs extra cycles to render the inner components.\n// useContainerQuery needs its targeted element to exist on the first render in order to work properly.\nfunction PortaledModal({\n  size,\n  hideDismissButton = false,\n  visible,\n  header,\n  children,\n  footer,\n  disableContentPaddings,\n  position = 'center',\n  onButtonClick = () => {},\n  onDismiss,\n  width,\n  height,\n  __internalRootRef,\n  __injectAnalyticsComponentMetadata,\n  __funnelProps,\n  __funnelStepProps,\n  __subStepRef,\n  __subStepFunnelProps,\n  referrerId,\n  ...rest\n}: PortaledModalProps) {\n  const instanceUniqueId = useUniqueId();\n  const headerId = `${rest.id || instanceUniqueId}-header`;\n  const lastMouseDownElementRef = useRef<HTMLElement | null>(null);\n  const [breakpoint, breakpointsRef] = useContainerBreakpoints(['xs']);\n\n  const i18n = useInternalI18n('modal');\n  const closeAriaLabel = i18n('closeAriaLabel', rest.closeAriaLabel);\n\n  const refObject = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(breakpointsRef, refObject, __internalRootRef);\n  const dialogRef = useRef<HTMLDivElement>(null);\n\n  const isRefresh = useVisualRefresh();\n\n  const baseProps = getBaseProps(rest);\n\n  const analyticsComponentMetadata: GeneratedAnalyticsMetadataModalComponent = {\n    name: 'awsui.Modal',\n    label: `.${analyticsSelectors.header} h2`,\n  };\n  const metadataAttribute = __injectAnalyticsComponentMetadata\n    ? getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })\n    : {};\n  const loadStartTime = useRef<number>(0);\n  const loadCompleteTime = useRef<number>(0);\n  const componentLoadingCount = useRef<number>(0);\n  const performanceMetricLogged = useRef<boolean>(false);\n\n  // enable body scroll and restore focus if unmounting while visible\n  useEffect(() => {\n    return () => {\n      enableBodyScrolling();\n    };\n  }, []);\n\n  const resetModalPerformanceData = () => {\n    loadStartTime.current = performance.now();\n    loadCompleteTime.current = 0;\n    performanceMetricLogged.current = false;\n  };\n\n  const emitTimeToContentReadyInModal = (loadCompleteTime: number) => {\n    if (\n      componentLoadingCount.current === 0 &&\n      loadStartTime.current &&\n      loadStartTime.current !== 0 &&\n      !performanceMetricLogged.current\n    ) {\n      const timeToContentReadyInModal = loadCompleteTime - loadStartTime.current;\n      PerformanceMetrics.modalPerformanceData({\n        timeToContentReadyInModal,\n        instanceIdentifier: instanceUniqueId,\n        componentIdentifier: headerTextRef.current?.textContent || '',\n      });\n      performanceMetricLogged.current = true;\n    }\n  };\n\n  const MODAL_READY_TIMEOUT = 100;\n  /**\n   * This useEffect is triggered when the visible attribute of modal changes.\n   * When modal becomes visible, modal performance metrics are reset marking the beginning loading process.\n   * To ensure that the modal component ready metric is always emitted, a setTimeout is implemented.\n   * This setTimeout automatically emits the component ready metric after a specified duration.\n   */\n  useEffect(() => {\n    if (visible) {\n      disableBodyScrolling();\n      resetModalPerformanceData();\n      setTimeout(() => {\n        emitTimeToContentReadyInModal(loadStartTime.current);\n      }, MODAL_READY_TIMEOUT);\n    } else {\n      enableBodyScrolling();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [visible]);\n\n  // Because we hide the element with styles (and not actually detach it from DOM), we need to scroll to top\n  useEffect(() => {\n    if (visible && refObject.current) {\n      refObject.current.scrollTop = 0;\n    }\n  }, [visible]);\n\n  const dismiss = (reason: string) => fireNonCancelableEvent(onDismiss, { reason });\n\n  const onOverlayMouseDown = (event: React.MouseEvent) => {\n    lastMouseDownElementRef.current = event.target as HTMLElement;\n    // The overlay can't hold focus, so pressing it would blur whatever is focused inside the\n    // dialog and leave focus on the document body. That takes focus out of the dialog, which\n    // breaks focus containment and stops ESC from reaching the handler on the dialog element.\n    // Preventing the default action keeps focus where it is.\n    if (event.target === refObject.current) {\n      event.preventDefault();\n    }\n  };\n  const onOverlayClick = (event: React.MouseEvent) => {\n    const overlay = refObject.current;\n    const lastClicked = lastMouseDownElementRef.current;\n\n    if (event.target === overlay && lastClicked === overlay) {\n      dismiss('overlay');\n    }\n  };\n  const onCloseButtonClick = () => dismiss('closeButton');\n  const escKeyHandler = (event: React.KeyboardEvent) => {\n    if (event.keyCode === KeyCode.escape) {\n      dismiss('keyboard');\n    }\n  };\n\n  // We use an empty div element at the end of the content slot as a sentinel\n  // to detect when the user has scrolled to the bottom.\n  const { ref: stickySentinelRef, isIntersecting: footerStuck } = useIntersectionObserver();\n\n  const headerTextRef = useRef<HTMLSpanElement>(null);\n  const headingTagRef = useRef<HTMLHeadingElement | null>(null);\n  const { subStepRef } = useFunnelSubStep();\n\n  // Without a dismiss button there is no predictable first focusable element, so focus the\n  // heading to announce what the modal is about. When no header is given, fall back to the\n  // dialog.\n  const hasHeader = header !== undefined && header !== null && header !== false && header !== '';\n  const autoFocusTarget = hideDismissButton ? (hasHeader ? headingTagRef : dialogRef) : undefined;\n\n  const { footerRef, headerRef, hasCustomHeight, hasCustomWidth, dialogCustomStyles, footerHeight } =\n    useModalDimensions({\n      height,\n      width,\n      hasFooter: !!footer,\n    });\n\n  return (\n    <FunnelNameSelectorContext.Provider value={`.${styles['header--text']}`}>\n      <ResetContextsForModal>\n        <ModalContext.Provider\n          value={{\n            isInModal: true,\n            componentLoadingCount,\n            emitTimeToContentReadyInModal,\n          }}\n        >\n          <div\n            {...baseProps}\n            {...__funnelProps}\n            {...__funnelStepProps}\n            className={clsx(\n              styles.root,\n              { [styles.hidden]: !visible },\n              hideDismissButton && styles['hide-dismiss-button'],\n              baseProps.className,\n              isRefresh && styles.refresh\n            )}\n            role=\"dialog\"\n            aria-labelledby={headerId}\n            onMouseDown={onOverlayMouseDown}\n            onClick={onOverlayClick}\n            ref={mergedRef}\n            style={footerHeight ? { scrollPaddingBottom: footerHeight } : undefined}\n            data-awsui-referrer-id={subStepRef.current?.id || referrerId}\n          >\n            <FocusLock\n              disabled={!visible}\n              autoFocus={true}\n              restoreFocus={true}\n              autoFocusTarget={autoFocusTarget}\n              className={clsx(styles['focus-lock'], styles[`position-${position}`])}\n            >\n              <div\n                className={clsx(\n                  styles.dialog,\n                  !hasCustomWidth && styles[size],\n                  styles[`breakpoint-${breakpoint}`],\n                  isRefresh && styles.refresh,\n                  hasCustomWidth && styles['custom-width'],\n                  hasCustomHeight && styles['custom-height']\n                )}\n                ref={dialogRef}\n                style={dialogCustomStyles}\n                onKeyDown={escKeyHandler}\n                // Keeps the dialog focusable so that clicking a non-focusable area inside it moves\n                // focus to the dialog rather than the document body.\n                tabIndex={-1}\n                {...metadataAttribute}\n              >\n                <div className={clsx(styles.container, hasCustomHeight && styles['custom-height-container'])}>\n                  <div ref={headerRef} className={clsx(styles.header, analyticsSelectors.header)}>\n                    <InternalHeader\n                      variant=\"h2\"\n                      __disableActionsWrapping={true}\n                      __headingTagRef={headingTagRef}\n                      __headingTagTabIndex={-1}\n                      actions={\n                        hideDismissButton ? undefined : (\n                          <div\n                            {...getAnalyticsMetadataAttribute({\n                              action: 'dismiss',\n                            } as Partial<GeneratedAnalyticsMetadataModalDismiss>)}\n                          >\n                            <InternalButton\n                              ariaLabel={closeAriaLabel}\n                              className={styles['dismiss-control']}\n                              variant=\"modal-dismiss\"\n                              iconName=\"close\"\n                              formAction=\"none\"\n                              onClick={onCloseButtonClick}\n                            />\n                          </div>\n                        )\n                      }\n                    >\n                      <span ref={headerTextRef} id={headerId} className={styles['header--text']}>\n                        {header}\n                      </span>\n                    </InternalHeader>\n                  </div>\n                  <BuiltInErrorBoundary\n                    wrapper={content => <InternalBox padding={{ bottom: 'm', horizontal: 'l' }}>{content}</InternalBox>}\n                  >\n                    <div\n                      ref={__subStepRef}\n                      {...__subStepFunnelProps}\n                      className={clsx(\n                        styles.content,\n                        { [styles['no-paddings']]: disableContentPaddings },\n                        hasCustomHeight && styles['custom-height-content']\n                      )}\n                      {...(hasCustomHeight && {\n                        tabIndex: 0,\n                        role: 'region',\n                        'aria-labelledby': headerId,\n                      })}\n                    >\n                      {children}\n                      <div ref={stickySentinelRef} />\n                    </div>\n                    {footer && (\n                      <ButtonContext.Provider value={{ onClick: onButtonClick }}>\n                        <div\n                          ref={footerRef}\n                          className={clsx(styles.footer, (footerStuck || hasCustomHeight) && styles['footer--rounded'])}\n                        >\n                          {footer}\n                        </div>\n                      </ButtonContext.Provider>\n                    )}\n                  </BuiltInErrorBoundary>\n                </div>\n              </div>\n            </FocusLock>\n          </div>\n        </ModalContext.Provider>\n      </ResetContextsForModal>\n    </FunnelNameSelectorContext.Provider>\n  );\n}\n"]}

package/lib/internal/template/modal/styles.css.js

@@ -1,36 +1,37 @@
 
     import './styles.scoped.css';
     export default {
-  "dialog": "awsui_dialog_1d2i7_10ig3_25",
-  "modal-slide-up": "awsui_modal-slide-up_1d2i7_10ig3_1",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1d2i7_10ig3_1",
-  "refresh": "awsui_refresh_1d2i7_10ig3_48",
-  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_1d2i7_10ig3_1",
-  "root": "awsui_root_1d2i7_10ig3_81",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_1d2i7_10ig3_1",
-  "hidden": "awsui_hidden_1d2i7_10ig3_158",
-  "focus-lock": "awsui_focus-lock_1d2i7_10ig3_162",
-  "position-top": "awsui_position-top_1d2i7_10ig3_170",
-  "position-center": "awsui_position-center_1d2i7_10ig3_173",
-  "small": "awsui_small_1d2i7_10ig3_187",
-  "medium": "awsui_medium_1d2i7_10ig3_190",
-  "large": "awsui_large_1d2i7_10ig3_193",
-  "x-large": "awsui_x-large_1d2i7_10ig3_196",
-  "xx-large": "awsui_xx-large_1d2i7_10ig3_199",
-  "custom-width": "awsui_custom-width_1d2i7_10ig3_202",
-  "max": "awsui_max_1d2i7_10ig3_205",
-  "breakpoint-xs": "awsui_breakpoint-xs_1d2i7_10ig3_205",
-  "custom-height": "awsui_custom-height_1d2i7_10ig3_210",
-  "container": "awsui_container_1d2i7_10ig3_215",
-  "custom-height-container": "awsui_custom-height-container_1d2i7_10ig3_255",
-  "content": "awsui_content_1d2i7_10ig3_261",
-  "no-paddings": "awsui_no-paddings_1d2i7_10ig3_266",
-  "custom-height-content": "awsui_custom-height-content_1d2i7_10ig3_270",
-  "header": "awsui_header_1d2i7_10ig3_275",
-  "header--text": "awsui_header--text_1d2i7_10ig3_287",
-  "footer": "awsui_footer_1d2i7_10ig3_291",
-  "footer--rounded": "awsui_footer--rounded_1d2i7_10ig3_300",
-  "dismiss-control": "awsui_dismiss-control_1d2i7_10ig3_312",
-  "modal-open": "awsui_modal-open_1d2i7_10ig3_316"
+  "dialog": "awsui_dialog_1d2i7_1ls09_25",
+  "modal-slide-up": "awsui_modal-slide-up_1d2i7_1ls09_1",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1d2i7_1ls09_1",
+  "refresh": "awsui_refresh_1d2i7_1ls09_48",
+  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_1d2i7_1ls09_1",
+  "root": "awsui_root_1d2i7_1ls09_81",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_1d2i7_1ls09_1",
+  "hide-dismiss-button": "awsui_hide-dismiss-button_1d2i7_1ls09_158",
+  "hidden": "awsui_hidden_1d2i7_1ls09_161",
+  "focus-lock": "awsui_focus-lock_1d2i7_1ls09_165",
+  "position-top": "awsui_position-top_1d2i7_1ls09_173",
+  "position-center": "awsui_position-center_1d2i7_1ls09_176",
+  "small": "awsui_small_1d2i7_1ls09_190",
+  "medium": "awsui_medium_1d2i7_1ls09_193",
+  "large": "awsui_large_1d2i7_1ls09_196",
+  "x-large": "awsui_x-large_1d2i7_1ls09_199",
+  "xx-large": "awsui_xx-large_1d2i7_1ls09_202",
+  "custom-width": "awsui_custom-width_1d2i7_1ls09_205",
+  "max": "awsui_max_1d2i7_1ls09_208",
+  "breakpoint-xs": "awsui_breakpoint-xs_1d2i7_1ls09_208",
+  "custom-height": "awsui_custom-height_1d2i7_1ls09_213",
+  "container": "awsui_container_1d2i7_1ls09_218",
+  "custom-height-container": "awsui_custom-height-container_1d2i7_1ls09_258",
+  "content": "awsui_content_1d2i7_1ls09_264",
+  "no-paddings": "awsui_no-paddings_1d2i7_1ls09_269",
+  "custom-height-content": "awsui_custom-height-content_1d2i7_1ls09_273",
+  "header": "awsui_header_1d2i7_1ls09_278",
+  "header--text": "awsui_header--text_1d2i7_1ls09_290",
+  "footer": "awsui_footer_1d2i7_1ls09_294",
+  "footer--rounded": "awsui_footer--rounded_1d2i7_1ls09_303",
+  "dismiss-control": "awsui_dismiss-control_1d2i7_1ls09_315",
+  "modal-open": "awsui_modal-open_1d2i7_1ls09_319"
 };