@cloudscape-design/components 3.0.1170 → 3.0.1171

package/copy-to-clipboard/interfaces.d.ts

@@ -1,4 +1,5 @@
 import { BaseComponentProps } from '../internal/base-component';
+import { NonCancelableEventHandler } from '../internal/events';
 export interface CopyToClipboardProps extends BaseComponentProps {
   /** Determines the general styling of the copy button as follows:
    *
@@ -52,7 +53,25 @@ export interface CopyToClipboardProps extends BaseComponentProps {
    * Applicable for all variants except inline.
    */
   disabledReason?: string;
+  /**
+   * Called when the text is successfully copied to the clipboard.
+   * The event `detail` contains the text that was copied.
+   */
+  onCopySuccess?: NonCancelableEventHandler<CopyToClipboardProps.CopySuccessDetail>;
+  /**
+   * Called when the copy operation fails.
+   * The event `detail` contains the text that failed to copy.
+   */
+  onCopyFailure?: NonCancelableEventHandler<CopyToClipboardProps.CopyFailureDetail>;
 }
 export declare namespace CopyToClipboardProps {
   type Variant = 'button' | 'icon' | 'inline';
+  interface CopySuccessDetail {
+    /** The text that was copied to the clipboard */
+    text: string;
+  }
+  interface CopyFailureDetail {
+    /** The text that failed to copy to the clipboard */
+    text: string;
+  }
 }

package/copy-to-clipboard/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/copy-to-clipboard/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB;IAC9D;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC,OAAO,CAAC;IAEvC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;;;;;OAMG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,yBAAiB,oBAAoB,CAAC;IACpC,KAAY,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;CACpD"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/copy-to-clipboard/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB;IAC9D;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC,OAAO,CAAC;IAEvC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;;;;;OAMG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,aAAa,CAAC,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAElF;;;OAGG;IACH,aAAa,CAAC,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;CACnF;AAED,yBAAiB,oBAAoB,CAAC;IACpC,KAAY,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;IAEnD,UAAiB,iBAAiB;QAChC,gDAAgD;QAChD,IAAI,EAAE,MAAM,CAAC;KACd;IAED,UAAiB,iBAAiB;QAChC,oDAAoD;QACpD,IAAI,EAAE,MAAM,CAAC;KACd;CACF"}

package/copy-to-clipboard/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/copy-to-clipboard/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface CopyToClipboardProps extends BaseComponentProps {\n  /** Determines the general styling of the copy button as follows:\n   *\n   * * `button` to display a standalone secondary button with an icon, and `copyButtonText` as text.\n   * * `icon` to display a standalone icon-only (no text) button.\n   * * `inline` to display an icon-only (no text) button within a text context.\n   *\n   * Defaults to `button`.\n   */\n  variant?: CopyToClipboardProps.Variant;\n\n  /**\n   * The text of the copy button (for variant=\"button\").\n   */\n  copyButtonText?: string;\n\n  /**\n   * Adds `aria-label` to the copy button. Use this to provide an accessible name for buttons that don't have visible text,\n   * and to distinguish between multiple buttons with identical visible text. The text will also be added to the `title` attribute of the button.\n   */\n  copyButtonAriaLabel?: string;\n\n  /**\n   * The text content to be copied. It is displayed next to the copy button when `variant=\"inline\"` unless when `content` is specified, and is not shown otherwise.\n   */\n  textToCopy: string;\n\n  /**\n   * The text content to display next to the copy button when `variant=\"inline\"`. If not provided, `textToCopy` will be displayed instead.\n   */\n  textToDisplay?: string;\n\n  /**\n   * The message shown when the text is copied successfully.\n   */\n  copySuccessText: string;\n\n  /**\n   * The message shown when the text is not copied due to an error, see [https://w3c.github.io/clipboard-apis/#dom-clipboard-writetext](https://w3c.github.io/clipboard-apis/#dom-clipboard-writetext).\n   */\n  copyErrorText: string;\n\n  /**\n   * By default, the popover is constrained to fit inside its parent\n   * [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).\n   * Enabling this property will allow the popover to be rendered in the root stack context using\n   * [React Portals](https://reactjs.org/docs/portals.html).\n   * Enable this setting if you need the popover to ignore its parent stacking context.\n   */\n  popoverRenderWithPortal?: boolean;\n\n  /**\n   * Renders the copy to clipboard button as disabled and prevents clicks.\n   */\n  disabled?: boolean;\n  /**\n   * Provides a reason why the copy to clipboard button is disabled (only when `disabled` is `true`).\n   * If provided, the copy to clipboard button becomes focusable.\n   * Applicable for all variants except inline.\n   */\n  disabledReason?: string;\n}\n\nexport namespace CopyToClipboardProps {\n  export type Variant = 'button' | 'icon' | 'inline';\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/copy-to-clipboard/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface CopyToClipboardProps extends BaseComponentProps {\n  /** Determines the general styling of the copy button as follows:\n   *\n   * * `button` to display a standalone secondary button with an icon, and `copyButtonText` as text.\n   * * `icon` to display a standalone icon-only (no text) button.\n   * * `inline` to display an icon-only (no text) button within a text context.\n   *\n   * Defaults to `button`.\n   */\n  variant?: CopyToClipboardProps.Variant;\n\n  /**\n   * The text of the copy button (for variant=\"button\").\n   */\n  copyButtonText?: string;\n\n  /**\n   * Adds `aria-label` to the copy button. Use this to provide an accessible name for buttons that don't have visible text,\n   * and to distinguish between multiple buttons with identical visible text. The text will also be added to the `title` attribute of the button.\n   */\n  copyButtonAriaLabel?: string;\n\n  /**\n   * The text content to be copied. It is displayed next to the copy button when `variant=\"inline\"` unless when `content` is specified, and is not shown otherwise.\n   */\n  textToCopy: string;\n\n  /**\n   * The text content to display next to the copy button when `variant=\"inline\"`. If not provided, `textToCopy` will be displayed instead.\n   */\n  textToDisplay?: string;\n\n  /**\n   * The message shown when the text is copied successfully.\n   */\n  copySuccessText: string;\n\n  /**\n   * The message shown when the text is not copied due to an error, see [https://w3c.github.io/clipboard-apis/#dom-clipboard-writetext](https://w3c.github.io/clipboard-apis/#dom-clipboard-writetext).\n   */\n  copyErrorText: string;\n\n  /**\n   * By default, the popover is constrained to fit inside its parent\n   * [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).\n   * Enabling this property will allow the popover to be rendered in the root stack context using\n   * [React Portals](https://reactjs.org/docs/portals.html).\n   * Enable this setting if you need the popover to ignore its parent stacking context.\n   */\n  popoverRenderWithPortal?: boolean;\n\n  /**\n   * Renders the copy to clipboard button as disabled and prevents clicks.\n   */\n  disabled?: boolean;\n  /**\n   * Provides a reason why the copy to clipboard button is disabled (only when `disabled` is `true`).\n   * If provided, the copy to clipboard button becomes focusable.\n   * Applicable for all variants except inline.\n   */\n  disabledReason?: string;\n\n  /**\n   * Called when the text is successfully copied to the clipboard.\n   * The event `detail` contains the text that was copied.\n   */\n  onCopySuccess?: NonCancelableEventHandler<CopyToClipboardProps.CopySuccessDetail>;\n\n  /**\n   * Called when the copy operation fails.\n   * The event `detail` contains the text that failed to copy.\n   */\n  onCopyFailure?: NonCancelableEventHandler<CopyToClipboardProps.CopyFailureDetail>;\n}\n\nexport namespace CopyToClipboardProps {\n  export type Variant = 'button' | 'icon' | 'inline';\n\n  export interface CopySuccessDetail {\n    /** The text that was copied to the clipboard */\n    text: string;\n  }\n\n  export interface CopyFailureDetail {\n    /** The text that failed to copy to the clipboard */\n    text: string;\n  }\n}\n"]}

package/copy-to-clipboard/internal.d.ts

@@ -12,6 +12,8 @@ export default function InternalCopyToClipboard({
   popoverRenderWithPortal,
   disabled,
   disabledReason,
+  onCopySuccess,
+  onCopyFailure,
   __internalRootRef,
   ...restProps
 }: InternalCopyToClipboardProps): JSX.Element;

package/copy-to-clipboard/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/copy-to-clipboard/internal.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAKpD,UAAU,4BAA6B,SAAQ,oBAAoB,EAAE,0BAA0B;CAAG;AAElG,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,EAC9C,OAAkB,EAClB,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,aAAa,EACb,UAAU,EACV,aAAa,EACb,uBAAuB,EACvB,QAAQ,EACR,cAAc,EACd,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,4BAA4B,eAgG9B"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/copy-to-clipboard/internal.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAKpD,UAAU,4BAA6B,SAAQ,oBAAoB,EAAE,0BAA0B;CAAG;AAElG,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,EAC9C,OAAkB,EAClB,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,aAAa,EACb,UAAU,EACV,aAAa,EACb,uBAAuB,EACvB,QAAQ,EACR,cAAc,EACd,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,4BAA4B,eAmG9B"}

package/copy-to-clipboard/internal.js

@@ -4,11 +4,12 @@ import React, { useEffect, useState } from 'react';
 import clsx from 'clsx';
 import InternalButton from '../button/internal';
 import { getBaseProps } from '../internal/base-component';
+import { fireNonCancelableEvent } from '../internal/events';
 import InternalPopover from '../popover/internal';
 import InternalStatusIndicator from '../status-indicator/internal';
 import styles from './styles.css.js';
 import testStyles from './test-classes/styles.css.js';
-export default function InternalCopyToClipboard({ variant = 'button', copyButtonAriaLabel, copyButtonText, copySuccessText, copyErrorText, textToCopy, textToDisplay, popoverRenderWithPortal, disabled, disabledReason, __internalRootRef, ...restProps }) {
+export default function InternalCopyToClipboard({ variant = 'button', copyButtonAriaLabel, copyButtonText, copySuccessText, copyErrorText, textToCopy, textToDisplay, popoverRenderWithPortal, disabled, disabledReason, onCopySuccess, onCopyFailure, __internalRootRef, ...restProps }) {
     const [status, setStatus] = useState('success');
     const [statusText, setStatusText] = useState(copySuccessText);
     useEffect(() => {
@@ -32,6 +33,7 @@ export default function InternalCopyToClipboard({ variant = 'button', copyButton
             // The clipboard API is not available in insecure contexts.
             setStatus('error');
             setStatusText(copyErrorText);
+            fireNonCancelableEvent(onCopyFailure, { text: textToCopy });
             return;
         }
         navigator.clipboard
@@ -39,10 +41,12 @@ export default function InternalCopyToClipboard({ variant = 'button', copyButton
             .then(() => {
             setStatus('success');
             setStatusText(copySuccessText);
+            fireNonCancelableEvent(onCopySuccess, { text: textToCopy });
         })
             .catch(() => {
             setStatus('error');
             setStatusText(copyErrorText);
+            fireNonCancelableEvent(onCopyFailure, { text: textToCopy });
         });
     };
     const triggerVariant = {

package/copy-to-clipboard/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/copy-to-clipboard/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, useState } from 'react';\nimport clsx from 'clsx';\n\nimport InternalButton from '../button/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport InternalPopover from '../popover/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { CopyToClipboardProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport testStyles from './test-classes/styles.css.js';\n\ninterface InternalCopyToClipboardProps extends CopyToClipboardProps, InternalBaseComponentProps {}\n\nexport default function InternalCopyToClipboard({\n  variant = 'button',\n  copyButtonAriaLabel,\n  copyButtonText,\n  copySuccessText,\n  copyErrorText,\n  textToCopy,\n  textToDisplay,\n  popoverRenderWithPortal,\n  disabled,\n  disabledReason,\n  __internalRootRef,\n  ...restProps\n}: InternalCopyToClipboardProps) {\n  const [status, setStatus] = useState<'pending' | 'success' | 'error'>('success');\n  const [statusText, setStatusText] = useState(copySuccessText);\n\n  useEffect(() => {\n    if (navigator.permissions) {\n      navigator.permissions\n        .query({ name: 'clipboard-write' as PermissionName })\n        .then(result => {\n          if (result.state === 'denied') {\n            setStatus('error');\n            setStatusText(copyErrorText);\n          }\n        })\n        .catch(() => {\n          // Permissions API not supported or failed.\n        });\n    }\n  }, [copyErrorText]);\n\n  const baseProps = getBaseProps(restProps);\n  const onClick = () => {\n    if (!navigator.clipboard) {\n      // The clipboard API is not available in insecure contexts.\n      setStatus('error');\n      setStatusText(copyErrorText);\n      return;\n    }\n\n    navigator.clipboard\n      .writeText(textToCopy)\n      .then(() => {\n        setStatus('success');\n        setStatusText(copySuccessText);\n      })\n      .catch(() => {\n        setStatus('error');\n        setStatusText(copyErrorText);\n      });\n  };\n\n  const triggerVariant = (\n    {\n      button: 'normal',\n      icon: 'icon',\n      inline: 'inline-icon',\n    } as const\n  )[variant];\n\n  const isInline = variant === 'inline';\n\n  const button = (\n    <InternalButton\n      ariaLabel={copyButtonAriaLabel ?? copyButtonText}\n      iconName=\"copy\"\n      variant={triggerVariant}\n      wrapText={false}\n      formAction=\"none\"\n      disabled={disabled}\n      disabledReason={disabledReason}\n    >\n      {copyButtonText}\n    </InternalButton>\n  );\n\n  const trigger = disabled ? (\n    button\n  ) : (\n    <InternalPopover\n      isInline={isInline}\n      size=\"medium\"\n      position=\"top\"\n      triggerType=\"custom\"\n      dismissButton={false}\n      renderWithPortal={popoverRenderWithPortal}\n      content={<InternalStatusIndicator type={status}>{statusText}</InternalStatusIndicator>}\n      __onOpen={onClick}\n    >\n      {button}\n    </InternalPopover>\n  );\n\n  return (\n    <span {...baseProps} ref={__internalRootRef} className={clsx(baseProps.className, styles.root, testStyles.root)}>\n      {isInline ? (\n        <span className={styles['inline-container']}>\n          <span className={styles['inline-container-trigger']}>{trigger}</span>\n          <span className={clsx(testStyles['text-to-display'], testStyles['text-to-copy'])}>\n            {textToDisplay ?? textToCopy}\n          </span>\n        </span>\n      ) : (\n        trigger\n      )}\n    </span>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/copy-to-clipboard/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, useState } from 'react';\nimport clsx from 'clsx';\n\nimport InternalButton from '../button/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport InternalPopover from '../popover/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { CopyToClipboardProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport testStyles from './test-classes/styles.css.js';\n\ninterface InternalCopyToClipboardProps extends CopyToClipboardProps, InternalBaseComponentProps {}\n\nexport default function InternalCopyToClipboard({\n  variant = 'button',\n  copyButtonAriaLabel,\n  copyButtonText,\n  copySuccessText,\n  copyErrorText,\n  textToCopy,\n  textToDisplay,\n  popoverRenderWithPortal,\n  disabled,\n  disabledReason,\n  onCopySuccess,\n  onCopyFailure,\n  __internalRootRef,\n  ...restProps\n}: InternalCopyToClipboardProps) {\n  const [status, setStatus] = useState<'pending' | 'success' | 'error'>('success');\n  const [statusText, setStatusText] = useState(copySuccessText);\n\n  useEffect(() => {\n    if (navigator.permissions) {\n      navigator.permissions\n        .query({ name: 'clipboard-write' as PermissionName })\n        .then(result => {\n          if (result.state === 'denied') {\n            setStatus('error');\n            setStatusText(copyErrorText);\n          }\n        })\n        .catch(() => {\n          // Permissions API not supported or failed.\n        });\n    }\n  }, [copyErrorText]);\n\n  const baseProps = getBaseProps(restProps);\n  const onClick = () => {\n    if (!navigator.clipboard) {\n      // The clipboard API is not available in insecure contexts.\n      setStatus('error');\n      setStatusText(copyErrorText);\n      fireNonCancelableEvent(onCopyFailure, { text: textToCopy });\n      return;\n    }\n\n    navigator.clipboard\n      .writeText(textToCopy)\n      .then(() => {\n        setStatus('success');\n        setStatusText(copySuccessText);\n        fireNonCancelableEvent(onCopySuccess, { text: textToCopy });\n      })\n      .catch(() => {\n        setStatus('error');\n        setStatusText(copyErrorText);\n        fireNonCancelableEvent(onCopyFailure, { text: textToCopy });\n      });\n  };\n\n  const triggerVariant = (\n    {\n      button: 'normal',\n      icon: 'icon',\n      inline: 'inline-icon',\n    } as const\n  )[variant];\n\n  const isInline = variant === 'inline';\n\n  const button = (\n    <InternalButton\n      ariaLabel={copyButtonAriaLabel ?? copyButtonText}\n      iconName=\"copy\"\n      variant={triggerVariant}\n      wrapText={false}\n      formAction=\"none\"\n      disabled={disabled}\n      disabledReason={disabledReason}\n    >\n      {copyButtonText}\n    </InternalButton>\n  );\n\n  const trigger = disabled ? (\n    button\n  ) : (\n    <InternalPopover\n      isInline={isInline}\n      size=\"medium\"\n      position=\"top\"\n      triggerType=\"custom\"\n      dismissButton={false}\n      renderWithPortal={popoverRenderWithPortal}\n      content={<InternalStatusIndicator type={status}>{statusText}</InternalStatusIndicator>}\n      __onOpen={onClick}\n    >\n      {button}\n    </InternalPopover>\n  );\n\n  return (\n    <span {...baseProps} ref={__internalRootRef} className={clsx(baseProps.className, styles.root, testStyles.root)}>\n      {isInline ? (\n        <span className={styles['inline-container']}>\n          <span className={styles['inline-container-trigger']}>{trigger}</span>\n          <span className={clsx(testStyles['text-to-display'], testStyles['text-to-copy'])}>\n            {textToDisplay ?? textToCopy}\n          </span>\n        </span>\n      ) : (\n        trigger\n      )}\n    </span>\n  );\n}\n"]}

package/drawer/use-sticky-footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-sticky-footer.d.ts","sourceRoot":"","sources":["../../../src/drawer/use-sticky-footer.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAA0C,MAAM,OAAO,CAAC;AAM1E,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAG5C,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,SAAS,GACV,EAAE;IACD,SAAS,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAClC,SAAS,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACnC;;EAoCA"}
+{"version":3,"file":"use-sticky-footer.d.ts","sourceRoot":"","sources":["../../../src/drawer/use-sticky-footer.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;AAQzD,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAG5C,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,SAAS,GACV,EAAE;IACD,SAAS,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAClC,SAAS,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACnC;;EA4BA"}

package/drawer/use-sticky-footer.js

@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { useCallback, useLayoutEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
+import { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';
 import { throttle } from '../internal/utils/throttle';
 // Minimum scrollable space is the space other than the sticky content, for instance for a sticky footer it's the
 // the space other than that, which would be drawer height minus footer height.
@@ -22,14 +23,7 @@ export function useStickyFooter({ drawerRef, footerRef, }) {
         const hasEnoughSpace = scrollableHeight >= MINIMUM_SCROLLABLE_SPACE;
         setIsSticky(hasEnoughSpace);
     }, [footerRef, drawerRef]), STICKY_STATE_CHECK_THROTTLE_DELAY);
-    useLayoutEffect(() => {
-        window.addEventListener('resize', checkStickyState);
-        checkStickyState();
-        return () => {
-            window.removeEventListener('resize', checkStickyState);
-            checkStickyState.cancel();
-        };
-    }, [checkStickyState]);
+    useResizeObserver(() => { var _a, _b; return (_b = (_a = drawerRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) !== null && _b !== void 0 ? _b : null; }, checkStickyState);
     return { isSticky };
 }
 //# sourceMappingURL=use-sticky-footer.js.map

package/drawer/use-sticky-footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-sticky-footer.js","sourceRoot":"","sources":["../../../src/drawer/use-sticky-footer.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAa,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,iHAAiH;AACjH,+EAA+E;AAC/E,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAC;AAC5C,MAAM,iCAAiC,GAAG,GAAG,CAAC,CAAC,0BAA0B;AAEzE,MAAM,UAAU,eAAe,CAAC,EAC9B,SAAS,EACT,SAAS,GAIV;IACC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE/C,MAAM,gBAAgB,GAAG,QAAQ,CAC/B,WAAW,CAAC,GAAG,EAAE;QACf,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;YAC7C,OAAO;QACT,CAAC;QAED,MAAM,aAAa,GAAG,SAAS,CAAC,OAAO,CAAC,aAAa,CAAC;QACtD,MAAM,mBAAmB,GAAG,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,qBAAqB,GAAG,MAAM,CAAC;QAC1E,MAAM,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QACtE,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,YAAY,EAAE,YAAY,CAAC,CAAC;QAEpF,2CAA2C;QAC3C,MAAM,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QAEtE,MAAM,gBAAgB,GAAG,eAAe,GAAG,YAAY,CAAC;QACxD,MAAM,cAAc,GAAG,gBAAgB,IAAI,wBAAwB,CAAC;QAEpE,WAAW,CAAC,cAAc,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,EAC1B,iCAAiC,CAClC,CAAC;IAEF,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QACpD,gBAAgB,EAAE,CAAC;QAEnB,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;YACvD,gBAAgB,CAAC,MAAM,EAAE,CAAC;QAC5B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,OAAO,EAAE,QAAQ,EAAE,CAAC;AACtB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { RefObject, useCallback, useLayoutEffect, useState } from 'react';\n\nimport { throttle } from '../internal/utils/throttle';\n\n// Minimum scrollable space is the space other than the sticky content, for instance for a sticky footer it's the\n// the space other than that, which would be drawer height minus footer height.\nexport const MINIMUM_SCROLLABLE_SPACE = 148;\nconst STICKY_STATE_CHECK_THROTTLE_DELAY = 100; // every tenth of a second\n\nexport function useStickyFooter({\n  drawerRef,\n  footerRef,\n}: {\n  drawerRef: RefObject<HTMLElement>;\n  footerRef: RefObject<HTMLElement>;\n}) {\n  const [isSticky, setIsSticky] = useState(true);\n\n  const checkStickyState = throttle(\n    useCallback(() => {\n      if (!drawerRef.current || !footerRef.current) {\n        return;\n      }\n\n      const parentElement = drawerRef.current.parentElement;\n      const parentElementHeight = parentElement?.getBoundingClientRect().height;\n      const drawerHeight = drawerRef.current.getBoundingClientRect().height;\n      const effectiveHeight = Math.min(parentElementHeight ?? drawerHeight, drawerHeight);\n\n      // take minimum of drawer and parent height\n      const footerHeight = footerRef.current.getBoundingClientRect().height;\n\n      const scrollableHeight = effectiveHeight - footerHeight;\n      const hasEnoughSpace = scrollableHeight >= MINIMUM_SCROLLABLE_SPACE;\n\n      setIsSticky(hasEnoughSpace);\n    }, [footerRef, drawerRef]),\n    STICKY_STATE_CHECK_THROTTLE_DELAY\n  );\n\n  useLayoutEffect(() => {\n    window.addEventListener('resize', checkStickyState);\n    checkStickyState();\n\n    return () => {\n      window.removeEventListener('resize', checkStickyState);\n      checkStickyState.cancel();\n    };\n  }, [checkStickyState]);\n\n  return { isSticky };\n}\n"]}
+{"version":3,"file":"use-sticky-footer.js","sourceRoot":"","sources":["../../../src/drawer/use-sticky-footer.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAa,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAElF,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,iHAAiH;AACjH,+EAA+E;AAC/E,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAC;AAC5C,MAAM,iCAAiC,GAAG,GAAG,CAAC,CAAC,0BAA0B;AAEzE,MAAM,UAAU,eAAe,CAAC,EAC9B,SAAS,EACT,SAAS,GAIV;IACC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE/C,MAAM,gBAAgB,GAAG,QAAQ,CAC/B,WAAW,CAAC,GAAG,EAAE;QACf,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;YAC7C,OAAO;QACT,CAAC;QAED,MAAM,aAAa,GAAG,SAAS,CAAC,OAAO,CAAC,aAAa,CAAC;QACtD,MAAM,mBAAmB,GAAG,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,qBAAqB,GAAG,MAAM,CAAC;QAC1E,MAAM,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QACtE,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,YAAY,EAAE,YAAY,CAAC,CAAC;QAEpF,2CAA2C;QAC3C,MAAM,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QAEtE,MAAM,gBAAgB,GAAG,eAAe,GAAG,YAAY,CAAC;QACxD,MAAM,cAAc,GAAG,gBAAgB,IAAI,wBAAwB,CAAC;QAEpE,WAAW,CAAC,cAAc,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,EAC1B,iCAAiC,CAClC,CAAC;IAEF,iBAAiB,CAAC,GAAG,EAAE,eAAC,OAAA,MAAA,MAAA,SAAS,CAAC,OAAO,0CAAE,aAAa,mCAAI,IAAI,CAAA,EAAA,EAAE,gBAAgB,CAAC,CAAC;IAEpF,OAAO,EAAE,QAAQ,EAAE,CAAC;AACtB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { RefObject, useCallback, useState } from 'react';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { throttle } from '../internal/utils/throttle';\n\n// Minimum scrollable space is the space other than the sticky content, for instance for a sticky footer it's the\n// the space other than that, which would be drawer height minus footer height.\nexport const MINIMUM_SCROLLABLE_SPACE = 148;\nconst STICKY_STATE_CHECK_THROTTLE_DELAY = 100; // every tenth of a second\n\nexport function useStickyFooter({\n  drawerRef,\n  footerRef,\n}: {\n  drawerRef: RefObject<HTMLElement>;\n  footerRef: RefObject<HTMLElement>;\n}) {\n  const [isSticky, setIsSticky] = useState(true);\n\n  const checkStickyState = throttle(\n    useCallback(() => {\n      if (!drawerRef.current || !footerRef.current) {\n        return;\n      }\n\n      const parentElement = drawerRef.current.parentElement;\n      const parentElementHeight = parentElement?.getBoundingClientRect().height;\n      const drawerHeight = drawerRef.current.getBoundingClientRect().height;\n      const effectiveHeight = Math.min(parentElementHeight ?? drawerHeight, drawerHeight);\n\n      // take minimum of drawer and parent height\n      const footerHeight = footerRef.current.getBoundingClientRect().height;\n\n      const scrollableHeight = effectiveHeight - footerHeight;\n      const hasEnoughSpace = scrollableHeight >= MINIMUM_SCROLLABLE_SPACE;\n\n      setIsSticky(hasEnoughSpace);\n    }, [footerRef, drawerRef]),\n    STICKY_STATE_CHECK_THROTTLE_DELAY\n  );\n\n  useResizeObserver(() => drawerRef.current?.parentElement ?? null, checkStickyState);\n\n  return { isSticky };\n}\n"]}

package/internal/base-component/styles.scoped.css

@@ -701,7 +701,7 @@ body {
   --space-table-header-tools-bottom-d9u5kf:0px;
   --space-table-header-tools-full-page-bottom-9m47g6:4px;
   --space-table-horizontal-suurzj:var(--space-container-horizontal-nqrzyh);
-  --space-tree-view-indentation-gmy1k3:var(--space-l-2ud1p3);
+  --space-tree-view-indentation-xh9kis:var(--space-xl-jfy3x4);
   --space-tile-gutter-bi2bdv:var(--space-xl-jfy3x4);
   --space-scaled-2x-xxs-e79hr1:var(--space-xxs-hwfkai);
   --space-scaled-2x-m-4euqsk:var(--space-m-dsumyt);
@@ -2004,5 +2004,5 @@ body {
   }
 }
 :root {
-  --awsui-version-info-6aace07d: true;
+  --awsui-version-info-eadf44c3: true;
 }

package/internal/environment.js

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

package/internal/environment.json

@@ -1,7 +1,7 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (6aace07d)",
-  "GIT_SHA": "6aace07d",
+  "PACKAGE_VERSION": "3.0.0 (eadf44c3)",
+  "GIT_SHA": "eadf44c3",
   "THEME": "open-source-visual-refresh",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": true

package/internal/generated/styles/tokens.js

@@ -752,7 +752,7 @@ export var spaceTableHeaderHorizontal = "var(--space-table-header-horizontal-kb5
 export var spaceTableHeaderToolsBottom = "var(--space-table-header-tools-bottom-d9u5kf, 0px)";
 export var spaceTableHeaderToolsFullPageBottom = "var(--space-table-header-tools-full-page-bottom-9m47g6, 4px)";
 export var spaceTableHorizontal = "var(--space-table-horizontal-suurzj, 20px)";
-export var spaceTreeViewIndentation = "var(--space-tree-view-indentation-gmy1k3, 20px)";
+export var spaceTreeViewIndentation = "var(--space-tree-view-indentation-xh9kis, 24px)";
 export var spaceTileGutter = "var(--space-tile-gutter-bi2bdv, 24px)";
 export var spaceScaled2xNone = "var(--space-scaled-2x-none-987dp7, 0px)";
 export var spaceScaled2xXxxs = "var(--space-scaled-2x-xxxs-reumxj, 2px)";

package/internal/generated/theming/index.cjs

@@ -2765,8 +2765,8 @@ module.exports.preset = {
         "compact": "{spaceContainerHorizontal}"
       },
       "spaceTreeViewIndentation": {
-        "comfortable": "{spaceL}",
-        "compact": "{spaceL}"
+        "comfortable": "{spaceXl}",
+        "compact": "{spaceXl}"
       },
       "spaceTileGutter": {
         "comfortable": "{spaceXl}",
@@ -3235,8 +3235,8 @@ module.exports.preset = {
             "compact": "{spaceContainerHorizontal}"
           },
           "spaceTreeViewIndentation": {
-            "comfortable": "{spaceL}",
-            "compact": "{spaceL}"
+            "comfortable": "{spaceXl}",
+            "compact": "{spaceXl}"
           },
           "spaceTileGutter": {
             "comfortable": "{spaceXl}",
@@ -13577,7 +13577,7 @@ module.exports.preset = {
     "spaceTableHeaderToolsBottom": "--space-table-header-tools-bottom-d9u5kf",
     "spaceTableHeaderToolsFullPageBottom": "--space-table-header-tools-full-page-bottom-9m47g6",
     "spaceTableHorizontal": "--space-table-horizontal-suurzj",
-    "spaceTreeViewIndentation": "--space-tree-view-indentation-gmy1k3",
+    "spaceTreeViewIndentation": "--space-tree-view-indentation-xh9kis",
     "spaceTileGutter": "--space-tile-gutter-bi2bdv",
     "spaceScaled2xNone": "--space-scaled-2x-none-987dp7",
     "spaceScaled2xXxxs": "--space-scaled-2x-xxxs-reumxj",

package/internal/generated/theming/index.js

@@ -2765,8 +2765,8 @@ export var preset = {
         "compact": "{spaceContainerHorizontal}"
       },
       "spaceTreeViewIndentation": {
-        "comfortable": "{spaceL}",
-        "compact": "{spaceL}"
+        "comfortable": "{spaceXl}",
+        "compact": "{spaceXl}"
       },
       "spaceTileGutter": {
         "comfortable": "{spaceXl}",
@@ -3235,8 +3235,8 @@ export var preset = {
             "compact": "{spaceContainerHorizontal}"
           },
           "spaceTreeViewIndentation": {
-            "comfortable": "{spaceL}",
-            "compact": "{spaceL}"
+            "comfortable": "{spaceXl}",
+            "compact": "{spaceXl}"
           },
           "spaceTileGutter": {
             "comfortable": "{spaceXl}",
@@ -13577,7 +13577,7 @@ export var preset = {
     "spaceTableHeaderToolsBottom": "--space-table-header-tools-bottom-d9u5kf",
     "spaceTableHeaderToolsFullPageBottom": "--space-table-header-tools-full-page-bottom-9m47g6",
     "spaceTableHorizontal": "--space-table-horizontal-suurzj",
-    "spaceTreeViewIndentation": "--space-tree-view-indentation-gmy1k3",
+    "spaceTreeViewIndentation": "--space-tree-view-indentation-xh9kis",
     "spaceTileGutter": "--space-tile-gutter-bi2bdv",
     "spaceScaled2xNone": "--space-scaled-2x-none-987dp7",
     "spaceScaled2xXxxs": "--space-scaled-2x-xxxs-reumxj",

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "6aace07def1de0d2f1ac9d78a11b51af09c06df7"
+  "commit": "eadf44c3ad6399cf75cb009186bacfcd740d60de"
 }

package/package.json

@@ -158,7 +158,7 @@
     "./internal/base-component/index.js",
     "./internal/base-component/styles.css.js"
   ],
-  "version": "3.0.1170",
+  "version": "3.0.1171",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/components.git"

package/tree-view/tree-item/styles.css.js

@@ -1,14 +1,14 @@
 
     import './styles.scoped.css';
     export default {
-  "treeitem-group": "awsui_treeitem-group_1agpu_rc23v_185",
-  "treeitem": "awsui_treeitem_1agpu_rc23v_185",
-  "offset": "awsui_offset_1agpu_rc23v_202",
-  "treeitem-content-wrapper": "awsui_treeitem-content-wrapper_1agpu_rc23v_205",
-  "tree-item-focus-target": "awsui_tree-item-focus-target_1agpu_rc23v_210",
-  "expand-toggle-wrapper": "awsui_expand-toggle-wrapper_1agpu_rc23v_231",
-  "toggle": "awsui_toggle_1agpu_rc23v_236",
-  "structured-item-wrapper": "awsui_structured-item-wrapper_1agpu_rc23v_241",
-  "tree-item-structured-item": "awsui_tree-item-structured-item_1agpu_rc23v_248"
+  "treeitem-group": "awsui_treeitem-group_1agpu_c0a59_185",
+  "treeitem": "awsui_treeitem_1agpu_c0a59_185",
+  "offset": "awsui_offset_1agpu_c0a59_202",
+  "treeitem-content-wrapper": "awsui_treeitem-content-wrapper_1agpu_c0a59_205",
+  "tree-item-focus-target": "awsui_tree-item-focus-target_1agpu_c0a59_210",
+  "expand-toggle-wrapper": "awsui_expand-toggle-wrapper_1agpu_c0a59_231",
+  "toggle": "awsui_toggle_1agpu_c0a59_236",
+  "structured-item-wrapper": "awsui_structured-item-wrapper_1agpu_c0a59_242",
+  "tree-item-structured-item": "awsui_tree-item-structured-item_1agpu_c0a59_249"
 };
   

package/tree-view/tree-item/styles.scoped.css

@@ -182,7 +182,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_treeitem-group_1agpu_rc23v_185:not(#\9) {
+.awsui_treeitem-group_1agpu_c0a59_185:not(#\9) {
   list-style: none;
   margin-block: 0;
   margin-inline: 0;
@@ -191,7 +191,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   position: relative;
 }
 
-.awsui_treeitem_1agpu_rc23v_185:not(#\9) {
+.awsui_treeitem_1agpu_c0a59_185:not(#\9) {
   list-style: none;
   margin-block: 0;
   margin-inline: 0;
@@ -199,22 +199,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-inline: 0;
   position: relative;
 }
-.awsui_treeitem_1agpu_rc23v_185.awsui_offset_1agpu_rc23v_202:not(#\9) {
-  margin-inline-start: var(--space-tree-view-indentation-gmy1k3, 20px);
+.awsui_treeitem_1agpu_c0a59_185.awsui_offset_1agpu_c0a59_202:not(#\9) {
+  margin-inline-start: var(--space-tree-view-indentation-xh9kis, 24px);
 }
-.awsui_treeitem_1agpu_rc23v_185 > .awsui_treeitem-content-wrapper_1agpu_rc23v_205:not(#\9) {
+.awsui_treeitem_1agpu_c0a59_185 > .awsui_treeitem-content-wrapper_1agpu_c0a59_205:not(#\9) {
   display: grid;
   grid-template-columns: 28px 1fr;
   align-items: baseline;
 }
-body[data-awsui-focus-visible=true] .awsui_treeitem_1agpu_rc23v_185 > .awsui_treeitem-content-wrapper_1agpu_rc23v_205:not(#\9):has(.awsui_tree-item-focus-target_1agpu_rc23v_210:focus) {
+body[data-awsui-focus-visible=true] .awsui_treeitem_1agpu_c0a59_185 > .awsui_treeitem-content-wrapper_1agpu_c0a59_205:not(#\9):has(.awsui_tree-item-focus-target_1agpu_c0a59_210:focus) {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_treeitem_1agpu_rc23v_185 > .awsui_treeitem-content-wrapper_1agpu_rc23v_205:not(#\9):has(.awsui_tree-item-focus-target_1agpu_rc23v_210:focus) {
+body[data-awsui-focus-visible=true] .awsui_treeitem_1agpu_c0a59_185 > .awsui_treeitem-content-wrapper_1agpu_c0a59_205:not(#\9):has(.awsui_tree-item-focus-target_1agpu_c0a59_210:focus) {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_treeitem_1agpu_rc23v_185 > .awsui_treeitem-content-wrapper_1agpu_rc23v_205:not(#\9):has(.awsui_tree-item-focus-target_1agpu_rc23v_210:focus)::before {
+body[data-awsui-focus-visible=true] .awsui_treeitem_1agpu_c0a59_185 > .awsui_treeitem-content-wrapper_1agpu_c0a59_205:not(#\9):has(.awsui_tree-item-focus-target_1agpu_c0a59_210:focus)::before {
   content: " ";
   display: block;
   position: absolute;
@@ -228,27 +228,28 @@ body[data-awsui-focus-visible=true] .awsui_treeitem_1agpu_rc23v_185 > .awsui_tre
   border-end-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-uk47pl, #006ce0);
 }
-.awsui_treeitem_1agpu_rc23v_185 > .awsui_treeitem-content-wrapper_1agpu_rc23v_205 > .awsui_expand-toggle-wrapper_1agpu_rc23v_231:not(#\9) {
+.awsui_treeitem_1agpu_c0a59_185 > .awsui_treeitem-content-wrapper_1agpu_c0a59_205 > .awsui_expand-toggle-wrapper_1agpu_c0a59_231:not(#\9) {
   display: grid;
   grid-column: 1;
   grid-row: 1;
 }
-.awsui_treeitem_1agpu_rc23v_185 > .awsui_treeitem-content-wrapper_1agpu_rc23v_205 > .awsui_expand-toggle-wrapper_1agpu_rc23v_231 > .awsui_toggle_1agpu_rc23v_236:not(#\9) {
+.awsui_treeitem_1agpu_c0a59_185 > .awsui_treeitem-content-wrapper_1agpu_c0a59_205 > .awsui_expand-toggle-wrapper_1agpu_c0a59_231 > .awsui_toggle_1agpu_c0a59_236:not(#\9) {
   justify-self: center;
   position: relative;
   inset-block-start: 2px;
+  inset-inline-start: -2px;
 }
-.awsui_treeitem_1agpu_rc23v_185 > .awsui_treeitem-content-wrapper_1agpu_rc23v_205 > .awsui_structured-item-wrapper_1agpu_rc23v_241:not(#\9) {
+.awsui_treeitem_1agpu_c0a59_185 > .awsui_treeitem-content-wrapper_1agpu_c0a59_205 > .awsui_structured-item-wrapper_1agpu_c0a59_242:not(#\9) {
   grid-column: 2;
   grid-row: 1/span 2;
   padding-block: var(--space-scaled-xxxs-oo06c7, 2px);
   position: relative;
 }
 
-.awsui_tree-item-structured-item_1agpu_rc23v_248:not(#\9) {
+.awsui_tree-item-structured-item_1agpu_c0a59_249:not(#\9) {
   /* used in keyboard navigation */
 }
 
-.awsui_tree-item-focus-target_1agpu_rc23v_210:not(#\9) {
+.awsui_tree-item-focus-target_1agpu_c0a59_210:not(#\9) {
   outline: none;
 }

package/tree-view/tree-item/styles.selectors.js

@@ -2,14 +2,14 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "treeitem-group": "awsui_treeitem-group_1agpu_rc23v_185",
-  "treeitem": "awsui_treeitem_1agpu_rc23v_185",
-  "offset": "awsui_offset_1agpu_rc23v_202",
-  "treeitem-content-wrapper": "awsui_treeitem-content-wrapper_1agpu_rc23v_205",
-  "tree-item-focus-target": "awsui_tree-item-focus-target_1agpu_rc23v_210",
-  "expand-toggle-wrapper": "awsui_expand-toggle-wrapper_1agpu_rc23v_231",
-  "toggle": "awsui_toggle_1agpu_rc23v_236",
-  "structured-item-wrapper": "awsui_structured-item-wrapper_1agpu_rc23v_241",
-  "tree-item-structured-item": "awsui_tree-item-structured-item_1agpu_rc23v_248"
+  "treeitem-group": "awsui_treeitem-group_1agpu_c0a59_185",
+  "treeitem": "awsui_treeitem_1agpu_c0a59_185",
+  "offset": "awsui_offset_1agpu_c0a59_202",
+  "treeitem-content-wrapper": "awsui_treeitem-content-wrapper_1agpu_c0a59_205",
+  "tree-item-focus-target": "awsui_tree-item-focus-target_1agpu_c0a59_210",
+  "expand-toggle-wrapper": "awsui_expand-toggle-wrapper_1agpu_c0a59_231",
+  "toggle": "awsui_toggle_1agpu_c0a59_236",
+  "structured-item-wrapper": "awsui_structured-item-wrapper_1agpu_c0a59_242",
+  "tree-item-structured-item": "awsui_tree-item-structured-item_1agpu_c0a59_249"
 };
   

package/tree-view/vertical-connector/styles.css.js

@@ -1,8 +1,8 @@
 
     import './styles.scoped.css';
     export default {
-  "vertical-connector": "awsui_vertical-connector_1r2pu_qy3uq_9",
-  "grid": "awsui_grid_1r2pu_qy3uq_13",
-  "absolute": "awsui_absolute_1r2pu_qy3uq_20"
+  "vertical-connector": "awsui_vertical-connector_1r2pu_1pql1_9",
+  "grid": "awsui_grid_1r2pu_1pql1_13",
+  "absolute": "awsui_absolute_1r2pu_1pql1_20"
 };
   

package/tree-view/vertical-connector/styles.scoped.css

@@ -6,20 +6,20 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_vertical-connector_1r2pu_qy3uq_9:not(#\9) {
+.awsui_vertical-connector_1r2pu_1pql1_9:not(#\9) {
   background-color: var(--color-tree-view-connector-line-1usxvn, #8c8c94);
   inline-size: var(--border-divider-list-width-tdfx1x, 1px);
 }
-.awsui_vertical-connector_1r2pu_qy3uq_9.awsui_grid_1r2pu_qy3uq_13:not(#\9) {
+.awsui_vertical-connector_1r2pu_1pql1_9.awsui_grid_1r2pu_1pql1_13:not(#\9) {
   grid-row: 2/span 3;
   grid-column: 1;
   block-size: 100%;
   position: relative;
-  inset-inline-start: calc((28px - var(--border-divider-list-width-tdfx1x, 1px)) / 2);
+  inset-inline-start: calc((28px - var(--border-divider-list-width-tdfx1x, 1px)) / 2 - 2px);
 }
-.awsui_vertical-connector_1r2pu_qy3uq_9.awsui_absolute_1r2pu_qy3uq_20:not(#\9) {
+.awsui_vertical-connector_1r2pu_1pql1_9.awsui_absolute_1r2pu_1pql1_20:not(#\9) {
   position: absolute;
   inset: 0;
   inset-block-end: var(--space-scaled-xs-xwoogq, 8px);
-  inset-inline-start: calc((28px - var(--border-divider-list-width-tdfx1x, 1px)) / 2);
+  inset-inline-start: calc((28px - var(--border-divider-list-width-tdfx1x, 1px)) / 2 - 2px);
 }

package/tree-view/vertical-connector/styles.selectors.js

@@ -2,8 +2,8 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "vertical-connector": "awsui_vertical-connector_1r2pu_qy3uq_9",
-  "grid": "awsui_grid_1r2pu_qy3uq_13",
-  "absolute": "awsui_absolute_1r2pu_qy3uq_20"
+  "vertical-connector": "awsui_vertical-connector_1r2pu_1pql1_9",
+  "grid": "awsui_grid_1r2pu_1pql1_13",
+  "absolute": "awsui_absolute_1r2pu_1pql1_20"
 };
   

package/tutorial-panel/components/tutorial-list/index.d.ts

@@ -6,12 +6,14 @@ interface TutorialListProps {
   onStartTutorial: HotspotContext['onStartTutorial'];
   i18nStrings: TutorialPanelProps['i18nStrings'];
   downloadUrl: TutorialPanelProps['downloadUrl'];
+  headingId?: string;
 }
 export default function TutorialList({
   i18nStrings,
   tutorials,
   loading,
   onStartTutorial,
-  downloadUrl
+  downloadUrl,
+  headingId
 }: TutorialListProps): JSX.Element;
 export {};

package/tutorial-panel/components/tutorial-list/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-list/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAWxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAItD,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC3C,eAAe,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAC;IACnD,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;IAC/C,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;CAChD;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,WAAW,EACX,SAAS,EACT,OAAe,EACf,eAAe,EACf,WAAW,GACZ,EAAE,iBAAiB,eA8CnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-list/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAWxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAItD,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC3C,eAAe,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAC;IACnD,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;IAC/C,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,WAAW,EACX,SAAS,EACT,OAAe,EACf,eAAe,EACf,WAAW,EACX,SAAS,GACV,EAAE,iBAAiB,eAmDnB"}

package/tutorial-panel/components/tutorial-list/index.js

@@ -16,13 +16,13 @@ import InternalLiveRegion from '../../../live-region/internal';
 import InternalSpaceBetween from '../../../space-between/internal';
 import InternalStatusIndicator from '../../../status-indicator/internal';
 import styles from './styles.css.js';
-export default function TutorialList({ i18nStrings, tutorials, loading = false, onStartTutorial, downloadUrl, }) {
+export default function TutorialList({ i18nStrings, tutorials, loading = false, onStartTutorial, downloadUrl, headingId, }) {
     checkSafeUrl('TutorialPanel', downloadUrl);
     const isRefresh = useVisualRefresh();
     return (React.createElement(React.Fragment, null,
         React.createElement(InternalSpaceBetween, { size: "s" },
             React.createElement(InternalSpaceBetween, { size: "m" },
-                React.createElement(InternalBox, { variant: "h2", fontSize: isRefresh ? 'heading-m' : 'heading-l', padding: { bottom: 'n' } }, i18nStrings.tutorialListTitle),
+                React.createElement(InternalBox, { variant: "h2", fontSize: isRefresh ? 'heading-m' : 'heading-l', padding: { bottom: 'n' }, id: headingId }, i18nStrings.tutorialListTitle),
                 React.createElement(InternalBox, { variant: "p", color: "text-body-secondary", padding: "n" }, i18nStrings.tutorialListDescription)),
             React.createElement(InternalSpaceBetween, { size: "l" },
                 downloadUrl && (React.createElement("a", { href: downloadUrl, target: "_blank", rel: "noopener noreferrer", className: styles['download-link'], "aria-label": i18nStrings.labelTutorialListDownloadLink },

package/tutorial-panel/components/tutorial-list/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-list/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, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalAlert from '../../../alert/internal';\nimport { HotspotContext } from '../../../annotation-context/context.js';\nimport InternalBox from '../../../box/internal';\nimport { InternalButton } from '../../../button/internal';\nimport InternalIcon from '../../../icon/internal';\nimport { fireNonCancelableEvent } from '../../../internal/events/index.js';\nimport { useVisualRefresh } from '../../../internal/hooks/use-visual-mode';\nimport { checkSafeUrl } from '../../../internal/utils/check-safe-url';\nimport InternalLink from '../../../link/internal';\nimport InternalLiveRegion from '../../../live-region/internal';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport InternalStatusIndicator from '../../../status-indicator/internal';\nimport { TutorialPanelProps } from '../../interfaces';\n\nimport styles from './styles.css.js';\n\ninterface TutorialListProps {\n  loading?: boolean;\n  tutorials: TutorialPanelProps['tutorials'];\n  onStartTutorial: HotspotContext['onStartTutorial'];\n  i18nStrings: TutorialPanelProps['i18nStrings'];\n  downloadUrl: TutorialPanelProps['downloadUrl'];\n}\n\nexport default function TutorialList({\n  i18nStrings,\n  tutorials,\n  loading = false,\n  onStartTutorial,\n  downloadUrl,\n}: TutorialListProps) {\n  checkSafeUrl('TutorialPanel', downloadUrl);\n\n  const isRefresh = useVisualRefresh();\n\n  return (\n    <>\n      <InternalSpaceBetween size=\"s\">\n        <InternalSpaceBetween size=\"m\">\n          <InternalBox variant=\"h2\" fontSize={isRefresh ? 'heading-m' : 'heading-l'} padding={{ bottom: 'n' }}>\n            {i18nStrings.tutorialListTitle}\n          </InternalBox>\n          <InternalBox variant=\"p\" color=\"text-body-secondary\" padding=\"n\">\n            {i18nStrings.tutorialListDescription}\n          </InternalBox>\n        </InternalSpaceBetween>\n        <InternalSpaceBetween size=\"l\">\n          {downloadUrl && (\n            <a\n              href={downloadUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className={styles['download-link']}\n              aria-label={i18nStrings.labelTutorialListDownloadLink}\n            >\n              <InternalIcon name=\"download\" />\n              <InternalBox padding={{ left: 'xs' }} color=\"inherit\" fontWeight=\"bold\" display=\"inline\">\n                {i18nStrings.tutorialListDownloadLinkText}\n              </InternalBox>\n            </a>\n          )}\n          {loading ? (\n            <InternalStatusIndicator type=\"loading\">\n              <InternalLiveRegion tagName=\"span\">{i18nStrings.loadingText}</InternalLiveRegion>\n            </InternalStatusIndicator>\n          ) : (\n            <ul className={styles['tutorial-list']} role=\"list\">\n              {tutorials.map((tutorial, index) => (\n                <Tutorial tutorial={tutorial} key={index} onStartTutorial={onStartTutorial} i18nStrings={i18nStrings} />\n              ))}\n            </ul>\n          )}\n        </InternalSpaceBetween>\n      </InternalSpaceBetween>\n    </>\n  );\n}\n\nfunction Tutorial({\n  tutorial,\n  onStartTutorial: onStartTutorialEventHandler,\n  i18nStrings,\n}: {\n  tutorial: TutorialPanelProps.Tutorial;\n  onStartTutorial: HotspotContext['onStartTutorial'];\n  i18nStrings: TutorialPanelProps['i18nStrings'];\n}) {\n  checkSafeUrl('TutorialPanel', tutorial.learnMoreUrl);\n  const controlId = useUniqueId();\n  const triggerControldId = useUniqueId();\n  const headerId = useUniqueId();\n\n  const isRefresh = useVisualRefresh();\n\n  const onStartTutorial = useCallback(() => {\n    fireNonCancelableEvent(onStartTutorialEventHandler, { tutorial });\n  }, [onStartTutorialEventHandler, tutorial]);\n\n  const [expanded, setExpanded] = useState(!tutorial.prerequisitesNeeded && !tutorial.completed);\n\n  const onClick = useCallback(() => {\n    setExpanded(expanded => !expanded);\n  }, []);\n\n  return (\n    <li className={styles['tutorial-box']} role=\"listitem\">\n      <InternalSpaceBetween size=\"xs\">\n        <div className={styles['tutorial-box-title']}>\n          <InternalBox\n            variant=\"h3\"\n            fontSize={isRefresh ? 'heading-s' : 'heading-m'}\n            id={headerId}\n            margin={{ right: 'xs' }}\n            padding=\"n\"\n            className={styles.title}\n          >\n            {tutorial.title}\n          </InternalBox>\n          <div className={styles['button-wrapper']}>\n            <InternalButton\n              id={triggerControldId}\n              variant=\"icon\"\n              ariaExpanded={expanded}\n              nativeButtonAttributes={{\n                'aria-controls': controlId,\n                'aria-labelledby': headerId,\n              }}\n              formAction=\"none\"\n              onClick={onClick}\n              className={expanded ? styles['collapse-button'] : styles['expand-button']}\n              iconName={expanded ? 'angle-up' : 'angle-down'}\n            />\n          </div>\n        </div>\n\n        {tutorial.completed ? (\n          <InternalStatusIndicator __size=\"inherit\" type=\"success\" className={styles.completed} wrapText={true}>\n            {i18nStrings.tutorialCompletedText}\n          </InternalStatusIndicator>\n        ) : null}\n      </InternalSpaceBetween>\n\n      <div aria-live=\"polite\">\n        <CSSTransition in={expanded} timeout={30} classNames={{ enter: styles['content-enter'] }}>\n          <div className={clsx(styles['expandable-section'], expanded && styles.expanded)} id={controlId}>\n            <InternalSpaceBetween size=\"l\">\n              <InternalSpaceBetween size=\"m\">\n                {tutorial.prerequisitesNeeded && tutorial.prerequisitesAlert && (\n                  <InternalAlert type=\"info\" className={styles['prerequisites-alert']}>\n                    {tutorial.prerequisitesAlert}\n                  </InternalAlert>\n                )}\n                <InternalSpaceBetween size=\"s\">\n                  <InternalBox color=\"text-body-secondary\">\n                    <div\n                      className={clsx(\n                        styles['tutorial-description'],\n                        typeof tutorial.description === 'string' && styles['tutorial-description-plaintext']\n                      )}\n                    >\n                      {tutorial.description}\n                    </div>\n                  </InternalBox>\n                  {tutorial.learnMoreUrl && (\n                    <InternalLink\n                      href={tutorial.learnMoreUrl}\n                      className={styles['learn-more-link']}\n                      externalIconAriaLabel={i18nStrings.labelLearnMoreExternalIcon}\n                      ariaLabel={i18nStrings.labelLearnMoreLink}\n                      external={true}\n                      variant=\"primary\"\n                    >\n                      {i18nStrings.learnMoreLinkText}\n                    </InternalLink>\n                  )}\n                </InternalSpaceBetween>\n              </InternalSpaceBetween>\n\n              <InternalBox margin={{ bottom: 'xxs' }}>\n                <InternalButton\n                  onClick={onStartTutorial}\n                  disabled={tutorial.prerequisitesNeeded ?? false}\n                  formAction=\"none\"\n                  className={styles.start}\n                >\n                  {tutorial.completed ? i18nStrings.restartTutorialButtonText : i18nStrings.startTutorialButtonText}\n                </InternalButton>\n              </InternalBox>\n            </InternalSpaceBetween>\n          </div>\n        </CSSTransition>\n      </div>\n    </li>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-list/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, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalAlert from '../../../alert/internal';\nimport { HotspotContext } from '../../../annotation-context/context.js';\nimport InternalBox from '../../../box/internal';\nimport { InternalButton } from '../../../button/internal';\nimport InternalIcon from '../../../icon/internal';\nimport { fireNonCancelableEvent } from '../../../internal/events/index.js';\nimport { useVisualRefresh } from '../../../internal/hooks/use-visual-mode';\nimport { checkSafeUrl } from '../../../internal/utils/check-safe-url';\nimport InternalLink from '../../../link/internal';\nimport InternalLiveRegion from '../../../live-region/internal';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport InternalStatusIndicator from '../../../status-indicator/internal';\nimport { TutorialPanelProps } from '../../interfaces';\n\nimport styles from './styles.css.js';\n\ninterface TutorialListProps {\n  loading?: boolean;\n  tutorials: TutorialPanelProps['tutorials'];\n  onStartTutorial: HotspotContext['onStartTutorial'];\n  i18nStrings: TutorialPanelProps['i18nStrings'];\n  downloadUrl: TutorialPanelProps['downloadUrl'];\n  headingId?: string;\n}\n\nexport default function TutorialList({\n  i18nStrings,\n  tutorials,\n  loading = false,\n  onStartTutorial,\n  downloadUrl,\n  headingId,\n}: TutorialListProps) {\n  checkSafeUrl('TutorialPanel', downloadUrl);\n\n  const isRefresh = useVisualRefresh();\n\n  return (\n    <>\n      <InternalSpaceBetween size=\"s\">\n        <InternalSpaceBetween size=\"m\">\n          <InternalBox\n            variant=\"h2\"\n            fontSize={isRefresh ? 'heading-m' : 'heading-l'}\n            padding={{ bottom: 'n' }}\n            id={headingId}\n          >\n            {i18nStrings.tutorialListTitle}\n          </InternalBox>\n          <InternalBox variant=\"p\" color=\"text-body-secondary\" padding=\"n\">\n            {i18nStrings.tutorialListDescription}\n          </InternalBox>\n        </InternalSpaceBetween>\n        <InternalSpaceBetween size=\"l\">\n          {downloadUrl && (\n            <a\n              href={downloadUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className={styles['download-link']}\n              aria-label={i18nStrings.labelTutorialListDownloadLink}\n            >\n              <InternalIcon name=\"download\" />\n              <InternalBox padding={{ left: 'xs' }} color=\"inherit\" fontWeight=\"bold\" display=\"inline\">\n                {i18nStrings.tutorialListDownloadLinkText}\n              </InternalBox>\n            </a>\n          )}\n          {loading ? (\n            <InternalStatusIndicator type=\"loading\">\n              <InternalLiveRegion tagName=\"span\">{i18nStrings.loadingText}</InternalLiveRegion>\n            </InternalStatusIndicator>\n          ) : (\n            <ul className={styles['tutorial-list']} role=\"list\">\n              {tutorials.map((tutorial, index) => (\n                <Tutorial tutorial={tutorial} key={index} onStartTutorial={onStartTutorial} i18nStrings={i18nStrings} />\n              ))}\n            </ul>\n          )}\n        </InternalSpaceBetween>\n      </InternalSpaceBetween>\n    </>\n  );\n}\n\nfunction Tutorial({\n  tutorial,\n  onStartTutorial: onStartTutorialEventHandler,\n  i18nStrings,\n}: {\n  tutorial: TutorialPanelProps.Tutorial;\n  onStartTutorial: HotspotContext['onStartTutorial'];\n  i18nStrings: TutorialPanelProps['i18nStrings'];\n}) {\n  checkSafeUrl('TutorialPanel', tutorial.learnMoreUrl);\n  const controlId = useUniqueId();\n  const triggerControldId = useUniqueId();\n  const headerId = useUniqueId();\n\n  const isRefresh = useVisualRefresh();\n\n  const onStartTutorial = useCallback(() => {\n    fireNonCancelableEvent(onStartTutorialEventHandler, { tutorial });\n  }, [onStartTutorialEventHandler, tutorial]);\n\n  const [expanded, setExpanded] = useState(!tutorial.prerequisitesNeeded && !tutorial.completed);\n\n  const onClick = useCallback(() => {\n    setExpanded(expanded => !expanded);\n  }, []);\n\n  return (\n    <li className={styles['tutorial-box']} role=\"listitem\">\n      <InternalSpaceBetween size=\"xs\">\n        <div className={styles['tutorial-box-title']}>\n          <InternalBox\n            variant=\"h3\"\n            fontSize={isRefresh ? 'heading-s' : 'heading-m'}\n            id={headerId}\n            margin={{ right: 'xs' }}\n            padding=\"n\"\n            className={styles.title}\n          >\n            {tutorial.title}\n          </InternalBox>\n          <div className={styles['button-wrapper']}>\n            <InternalButton\n              id={triggerControldId}\n              variant=\"icon\"\n              ariaExpanded={expanded}\n              nativeButtonAttributes={{\n                'aria-controls': controlId,\n                'aria-labelledby': headerId,\n              }}\n              formAction=\"none\"\n              onClick={onClick}\n              className={expanded ? styles['collapse-button'] : styles['expand-button']}\n              iconName={expanded ? 'angle-up' : 'angle-down'}\n            />\n          </div>\n        </div>\n\n        {tutorial.completed ? (\n          <InternalStatusIndicator __size=\"inherit\" type=\"success\" className={styles.completed} wrapText={true}>\n            {i18nStrings.tutorialCompletedText}\n          </InternalStatusIndicator>\n        ) : null}\n      </InternalSpaceBetween>\n\n      <div aria-live=\"polite\">\n        <CSSTransition in={expanded} timeout={30} classNames={{ enter: styles['content-enter'] }}>\n          <div className={clsx(styles['expandable-section'], expanded && styles.expanded)} id={controlId}>\n            <InternalSpaceBetween size=\"l\">\n              <InternalSpaceBetween size=\"m\">\n                {tutorial.prerequisitesNeeded && tutorial.prerequisitesAlert && (\n                  <InternalAlert type=\"info\" className={styles['prerequisites-alert']}>\n                    {tutorial.prerequisitesAlert}\n                  </InternalAlert>\n                )}\n                <InternalSpaceBetween size=\"s\">\n                  <InternalBox color=\"text-body-secondary\">\n                    <div\n                      className={clsx(\n                        styles['tutorial-description'],\n                        typeof tutorial.description === 'string' && styles['tutorial-description-plaintext']\n                      )}\n                    >\n                      {tutorial.description}\n                    </div>\n                  </InternalBox>\n                  {tutorial.learnMoreUrl && (\n                    <InternalLink\n                      href={tutorial.learnMoreUrl}\n                      className={styles['learn-more-link']}\n                      externalIconAriaLabel={i18nStrings.labelLearnMoreExternalIcon}\n                      ariaLabel={i18nStrings.labelLearnMoreLink}\n                      external={true}\n                      variant=\"primary\"\n                    >\n                      {i18nStrings.learnMoreLinkText}\n                    </InternalLink>\n                  )}\n                </InternalSpaceBetween>\n              </InternalSpaceBetween>\n\n              <InternalBox margin={{ bottom: 'xxs' }}>\n                <InternalButton\n                  onClick={onStartTutorial}\n                  disabled={tutorial.prerequisitesNeeded ?? false}\n                  formAction=\"none\"\n                  className={styles.start}\n                >\n                  {tutorial.completed ? i18nStrings.restartTutorialButtonText : i18nStrings.startTutorialButtonText}\n                </InternalButton>\n              </InternalBox>\n            </InternalSpaceBetween>\n          </div>\n        </CSSTransition>\n      </div>\n    </li>\n  );\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tutorial-panel/index.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAIlD,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAE9B,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,WAAW,EACX,OAAO,EACP,SAAS,EACT,eAAe,EACf,WAAW,EACX,GAAG,SAAS,EACb,EAAE,kBAAkB,eA6BpB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tutorial-panel/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAIlD,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAE9B,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,WAAW,EACX,OAAO,EACP,SAAS,EACT,eAAe,EACf,WAAW,EACX,GAAG,SAAS,EACb,EAAE,kBAAkB,eAkDpB"}

package/tutorial-panel/index.js

@@ -1,8 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 'use client';
-import React, { useContext } from 'react';
+import React, { useContext, useRef } from 'react';
 import clsx from 'clsx';
+import { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 import { hotspotContext } from '../annotation-context/context';
 import { getBaseProps } from '../internal/base-component';
 import useBaseComponent from '../internal/hooks/use-base-component';
@@ -12,10 +13,21 @@ import TutorialList from './components/tutorial-list';
 import styles from './styles.css.js';
 export default function TutorialPanel({ i18nStrings, loading, tutorials, onFeedbackClick, downloadUrl, ...restProps }) {
     const { __internalRootRef } = useBaseComponent('TutorialPanel');
+    const panelRef = useRef(null);
+    const headingId = useUniqueId();
     const baseProps = getBaseProps(restProps);
     const context = useContext(hotspotContext);
+    function handleExitTutorial(event) {
+        var _a;
+        context.onExitTutorial(event);
+        (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    const mergedRef = useMergeRefs(panelRef, __internalRootRef);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ...baseProps, className: clsx(baseProps.className, styles['tutorial-panel']), ref: __internalRootRef }, context.currentTutorial ? (React.createElement(TutorialDetailView, { i18nStrings: i18nStrings, tutorial: context.currentTutorial, onExitTutorial: context.onExitTutorial, currentStepIndex: context.currentStepIndex, onFeedbackClick: onFeedbackClick })) : (React.createElement(TutorialList, { i18nStrings: i18nStrings, tutorials: tutorials, loading: loading, onStartTutorial: context.onStartTutorial, downloadUrl: downloadUrl })))));
+        React.createElement("div", { ...baseProps, className: clsx(baseProps.className, styles['tutorial-panel']), ref: mergedRef, tabIndex: -1, ...(!context.currentTutorial && {
+                role: 'region',
+                'aria-labelledby': headingId,
+            }) }, context.currentTutorial ? (React.createElement(TutorialDetailView, { i18nStrings: i18nStrings, tutorial: context.currentTutorial, onExitTutorial: handleExitTutorial, currentStepIndex: context.currentStepIndex, onFeedbackClick: onFeedbackClick })) : (React.createElement(TutorialList, { i18nStrings: i18nStrings, tutorials: tutorials, loading: loading, onStartTutorial: context.onStartTutorial, downloadUrl: downloadUrl, headingId: headingId })))));
 }
 applyDisplayName(TutorialPanel, 'TutorialPanel');
 //# sourceMappingURL=index.js.map

package/tutorial-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tutorial-panel/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,kBAAkB,MAAM,mCAAmC,CAAC;AACnE,OAAO,YAAY,MAAM,4BAA4B,CAAC;AAGtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,WAAW,EACX,OAAO,EACP,SAAS,EACT,eAAe,EACf,WAAW,EACX,GAAG,SAAS,EACO;IACnB,MAAM,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAEhE,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAE3C,OAAO,CACL;QACE,gCAAS,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,GAAG,EAAE,iBAAiB,IACvG,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CACzB,oBAAC,kBAAkB,IACjB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,OAAO,CAAC,eAAe,EACjC,cAAc,EAAE,OAAO,CAAC,cAAc,EACtC,gBAAgB,EAAE,OAAO,CAAC,gBAAgB,EAC1C,eAAe,EAAE,eAAe,GAChC,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,YAAY,IACX,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,OAAO,CAAC,eAAe,EACxC,WAAW,EAAE,WAAW,GACxB,CACH,CACG,CACL,CACJ,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React, { useContext } from 'react';\nimport clsx from 'clsx';\n\nimport { hotspotContext } from '../annotation-context/context';\nimport { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport TutorialDetailView from './components/tutorial-detail-view';\nimport TutorialList from './components/tutorial-list';\nimport { TutorialPanelProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport { TutorialPanelProps };\n\nexport default function TutorialPanel({\n  i18nStrings,\n  loading,\n  tutorials,\n  onFeedbackClick,\n  downloadUrl,\n  ...restProps\n}: TutorialPanelProps) {\n  const { __internalRootRef } = useBaseComponent('TutorialPanel');\n\n  const baseProps = getBaseProps(restProps);\n  const context = useContext(hotspotContext);\n\n  return (\n    <>\n      <div {...baseProps} className={clsx(baseProps.className, styles['tutorial-panel'])} ref={__internalRootRef}>\n        {context.currentTutorial ? (\n          <TutorialDetailView\n            i18nStrings={i18nStrings}\n            tutorial={context.currentTutorial}\n            onExitTutorial={context.onExitTutorial}\n            currentStepIndex={context.currentStepIndex}\n            onFeedbackClick={onFeedbackClick}\n          />\n        ) : (\n          <TutorialList\n            i18nStrings={i18nStrings}\n            tutorials={tutorials}\n            loading={loading}\n            onStartTutorial={context.onStartTutorial}\n            downloadUrl={downloadUrl}\n          />\n        )}\n      </div>\n    </>\n  );\n}\n\napplyDisplayName(TutorialPanel, 'TutorialPanel');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tutorial-panel/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAE1F,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,kBAAkB,MAAM,mCAAmC,CAAC;AACnE,OAAO,YAAY,MAAM,4BAA4B,CAAC;AAGtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,WAAW,EACX,OAAO,EACP,SAAS,EACT,eAAe,EACf,WAAW,EACX,GAAG,SAAS,EACO;IACnB,MAAM,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAChE,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC9C,MAAM,SAAS,GAAG,WAAW,EAAE,CAAC;IAEhC,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAE3C,SAAS,kBAAkB,CAAC,KAAkE;;QAC5F,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QAC9B,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;IAC5B,CAAC;IAED,MAAM,SAAS,GAAG,YAAY,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC;IAE5D,OAAO,CACL;QACE,gCACM,SAAS,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAC9D,GAAG,EAAE,SAAS,EACd,QAAQ,EAAE,CAAC,CAAC,KAGR,CAAC,CAAC,OAAO,CAAC,eAAe,IAAI;gBAC/B,IAAI,EAAE,QAAQ;gBACd,iBAAiB,EAAE,SAAS;aAC7B,CAAC,IAED,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CACzB,oBAAC,kBAAkB,IACjB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,OAAO,CAAC,eAAe,EACjC,cAAc,EAAE,kBAAkB,EAClC,gBAAgB,EAAE,OAAO,CAAC,gBAAgB,EAC1C,eAAe,EAAE,eAAe,GAChC,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,YAAY,IACX,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,OAAO,CAAC,eAAe,EACxC,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,GACpB,CACH,CACG,CACL,CACJ,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React, { useContext, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport { hotspotContext } from '../annotation-context/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { NonCancelableCustomEvent } from '../internal/events';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport TutorialDetailView from './components/tutorial-detail-view';\nimport TutorialList from './components/tutorial-list';\nimport { TutorialPanelProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport { TutorialPanelProps };\n\nexport default function TutorialPanel({\n  i18nStrings,\n  loading,\n  tutorials,\n  onFeedbackClick,\n  downloadUrl,\n  ...restProps\n}: TutorialPanelProps) {\n  const { __internalRootRef } = useBaseComponent('TutorialPanel');\n  const panelRef = useRef<HTMLDivElement>(null);\n  const headingId = useUniqueId();\n\n  const baseProps = getBaseProps(restProps);\n  const context = useContext(hotspotContext);\n\n  function handleExitTutorial(event: NonCancelableCustomEvent<TutorialPanelProps.TutorialDetail>) {\n    context.onExitTutorial(event);\n    panelRef.current?.focus();\n  }\n\n  const mergedRef = useMergeRefs(panelRef, __internalRootRef);\n\n  return (\n    <>\n      <div\n        {...baseProps}\n        className={clsx(baseProps.className, styles['tutorial-panel'])}\n        ref={mergedRef}\n        tabIndex={-1}\n        // Adding attributes conditionally since we don't want to point to\n        // a non existent header in the aria-labelledby\n        {...(!context.currentTutorial && {\n          role: 'region',\n          'aria-labelledby': headingId,\n        })}\n      >\n        {context.currentTutorial ? (\n          <TutorialDetailView\n            i18nStrings={i18nStrings}\n            tutorial={context.currentTutorial}\n            onExitTutorial={handleExitTutorial}\n            currentStepIndex={context.currentStepIndex}\n            onFeedbackClick={onFeedbackClick}\n          />\n        ) : (\n          <TutorialList\n            i18nStrings={i18nStrings}\n            tutorials={tutorials}\n            loading={loading}\n            onStartTutorial={context.onStartTutorial}\n            downloadUrl={downloadUrl}\n            headingId={headingId}\n          />\n        )}\n      </div>\n    </>\n  );\n}\n\napplyDisplayName(TutorialPanel, 'TutorialPanel');\n"]}

package/tutorial-panel/styles.css.js

@@ -1,6 +1,6 @@
 
     import './styles.scoped.css';
     export default {
-  "tutorial-panel": "awsui_tutorial-panel_1oin5_1h3mq_181"
+  "tutorial-panel": "awsui_tutorial-panel_1oin5_18e3n_185"
 };
   

package/tutorial-panel/styles.scoped.css

@@ -178,7 +178,11 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_tutorial-panel_1oin5_1h3mq_181:not(#\9) {
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_tutorial-panel_1oin5_18e3n_185:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -211,4 +215,28 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block-start: 0;
   padding-block-end: var(--space-m-dsumyt, 16px);
   padding-inline: var(--space-l-2ud1p3, 20px);
+}
+.awsui_tutorial-panel_1oin5_18e3n_185:not(#\9):focus {
+  outline: none;
+}
+body[data-awsui-focus-visible=true] .awsui_tutorial-panel_1oin5_18e3n_185:not(#\9):focus {
+  position: relative;
+}
+body[data-awsui-focus-visible=true] .awsui_tutorial-panel_1oin5_18e3n_185:not(#\9):focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(0px - 1px);
+}
+body[data-awsui-focus-visible=true] .awsui_tutorial-panel_1oin5_18e3n_185:not(#\9):focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * 0px);
+  inset-block-start: calc(-1 * 0px);
+  inline-size: calc(100% + 0px + 0px);
+  block-size: calc(100% + 0px + 0px);
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-uk47pl, #006ce0);
 }

package/tutorial-panel/styles.selectors.js

@@ -2,6 +2,6 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "tutorial-panel": "awsui_tutorial-panel_1oin5_1h3mq_181"
+  "tutorial-panel": "awsui_tutorial-panel_1oin5_18e3n_185"
 };