@cloudscape-design/components-themeable 3.0.1137 → 3.0.1139

package/lib/internal/template/anchor-navigation/internal.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useCallback, useEffect, useMemo } from 'react';
@@ -9,8 +8,7 @@ import useScrollSpy from './use-scroll-spy.js';
 import { renderNestedAnchors } from './utils';
 import styles from './styles.css.js';
 import testUtilsStyles from './test-classes/styles.css.js';
-export default function InternalAnchorNavigation(_a) {
-    var { anchors, ariaLabelledby, onFollow, onActiveHrefChange, activeHref = '', __internalRootRef, scrollSpyOffset = 0 } = _a, props = __rest(_a, ["anchors", "ariaLabelledby", "onFollow", "onActiveHrefChange", "activeHref", "__internalRootRef", "scrollSpyOffset"]);
+export default function InternalAnchorNavigation({ anchors, ariaLabelledby, onFollow, onActiveHrefChange, activeHref = '', __internalRootRef, scrollSpyOffset = 0, ...props }) {
     const baseProps = getBaseProps(props);
     const hrefs = useMemo(() => anchors.map(anchor => anchor.href), [anchors]);
     const onFollowHandler = useCallback((anchor, sourceEvent) => {
@@ -27,7 +25,7 @@ export default function InternalAnchorNavigation(_a) {
             fireNonCancelableEvent(onActiveHrefChange, newActiveAnchor);
         }
     }, [onActiveHrefChange, anchors, currentActiveHref]);
-    return (React.createElement("nav", Object.assign({}, baseProps, { ref: __internalRootRef, "aria-labelledby": ariaLabelledby, className: clsx(baseProps.className, styles.root, testUtilsStyles.root) }),
+    return (React.createElement("nav", { ...baseProps, ref: __internalRootRef, "aria-labelledby": ariaLabelledby, className: clsx(baseProps.className, styles.root, testUtilsStyles.root) },
         React.createElement("ol", { className: clsx(styles['anchor-list'], testUtilsStyles['anchor-list']) }, renderNestedAnchors(anchors, {
             onFollowHandler,
             currentActiveHref,

package/lib/internal/template/anchor-navigation/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/anchor-navigation/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGvF,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAE9C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EASI;QATJ,EAC/C,OAAO,EACP,cAAc,EACd,QAAQ,EACR,kBAAkB,EAClB,UAAU,GAAG,EAAE,EACf,iBAAiB,EACjB,eAAe,GAAG,CAAC,OAEgC,EADhD,KAAK,cARuC,qHAShD,CADS;IAER,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAEtC,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAE3E,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,MAAoC,EAAE,WAAyC,EAAE,EAAE;QAClF,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;IACrD,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,iBAAiB,GAAG,YAAY,CAAC;QACrC,KAAK;QACL,eAAe;QACf,UAAU;KACX,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,iBAAiB,EAAE,CAAC;YACtB,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,iBAAiB,CAAC,CAAC;YAClF,sBAAsB,CAAC,kBAAkB,EAAE,eAAe,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAErD,OAAO,CACL,6CACM,SAAS,IACb,GAAG,EAAE,iBAAiB,qBACL,cAAc,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,eAAe,CAAC,IAAI,CAAC;QAEvE,4BAAI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC,IACvE,mBAAmB,CAAC,OAAO,EAAE;YAC5B,eAAe;YACf,iBAAiB;SAClB,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component/index.js';\nimport { fireCancelableEvent, fireNonCancelableEvent } from '../internal/events/index';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';\nimport { AnchorNavigationProps } from './interfaces';\nimport useScrollSpy from './use-scroll-spy.js';\nimport { renderNestedAnchors } from './utils';\n\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\n\nexport default function InternalAnchorNavigation({\n  anchors,\n  ariaLabelledby,\n  onFollow,\n  onActiveHrefChange,\n  activeHref = '',\n  __internalRootRef,\n  scrollSpyOffset = 0,\n  ...props\n}: AnchorNavigationProps & InternalBaseComponentProps) {\n  const baseProps = getBaseProps(props);\n\n  const hrefs = useMemo(() => anchors.map(anchor => anchor.href), [anchors]);\n\n  const onFollowHandler = useCallback(\n    (anchor: AnchorNavigationProps.Anchor, sourceEvent: React.SyntheticEvent | Event) => {\n      fireCancelableEvent(onFollow, anchor, sourceEvent);\n    },\n    [onFollow]\n  );\n\n  const currentActiveHref = useScrollSpy({\n    hrefs,\n    scrollSpyOffset,\n    activeHref,\n  });\n\n  useEffect(() => {\n    if (currentActiveHref) {\n      const newActiveAnchor = anchors.find(anchor => anchor.href === currentActiveHref);\n      fireNonCancelableEvent(onActiveHrefChange, newActiveAnchor);\n    }\n  }, [onActiveHrefChange, anchors, currentActiveHref]);\n\n  return (\n    <nav\n      {...baseProps}\n      ref={__internalRootRef}\n      aria-labelledby={ariaLabelledby}\n      className={clsx(baseProps.className, styles.root, testUtilsStyles.root)}\n    >\n      <ol className={clsx(styles['anchor-list'], testUtilsStyles['anchor-list'])}>\n        {renderNestedAnchors(anchors, {\n          onFollowHandler,\n          currentActiveHref,\n        })}\n      </ol>\n    </nav>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/anchor-navigation/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGvF,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAE9C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,OAAO,EACP,cAAc,EACd,QAAQ,EACR,kBAAkB,EAClB,UAAU,GAAG,EAAE,EACf,iBAAiB,EACjB,eAAe,GAAG,CAAC,EACnB,GAAG,KAAK,EAC2C;IACnD,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAEtC,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAE3E,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,MAAoC,EAAE,WAAyC,EAAE,EAAE;QAClF,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;IACrD,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,iBAAiB,GAAG,YAAY,CAAC;QACrC,KAAK;QACL,eAAe;QACf,UAAU;KACX,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,iBAAiB,EAAE,CAAC;YACtB,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,iBAAiB,CAAC,CAAC;YAClF,sBAAsB,CAAC,kBAAkB,EAAE,eAAe,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAErD,OAAO,CACL,gCACM,SAAS,EACb,GAAG,EAAE,iBAAiB,qBACL,cAAc,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,eAAe,CAAC,IAAI,CAAC;QAEvE,4BAAI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC,IACvE,mBAAmB,CAAC,OAAO,EAAE;YAC5B,eAAe;YACf,iBAAiB;SAClB,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component/index.js';\nimport { fireCancelableEvent, fireNonCancelableEvent } from '../internal/events/index';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';\nimport { AnchorNavigationProps } from './interfaces';\nimport useScrollSpy from './use-scroll-spy.js';\nimport { renderNestedAnchors } from './utils';\n\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\n\nexport default function InternalAnchorNavigation({\n  anchors,\n  ariaLabelledby,\n  onFollow,\n  onActiveHrefChange,\n  activeHref = '',\n  __internalRootRef,\n  scrollSpyOffset = 0,\n  ...props\n}: AnchorNavigationProps & InternalBaseComponentProps) {\n  const baseProps = getBaseProps(props);\n\n  const hrefs = useMemo(() => anchors.map(anchor => anchor.href), [anchors]);\n\n  const onFollowHandler = useCallback(\n    (anchor: AnchorNavigationProps.Anchor, sourceEvent: React.SyntheticEvent | Event) => {\n      fireCancelableEvent(onFollow, anchor, sourceEvent);\n    },\n    [onFollow]\n  );\n\n  const currentActiveHref = useScrollSpy({\n    hrefs,\n    scrollSpyOffset,\n    activeHref,\n  });\n\n  useEffect(() => {\n    if (currentActiveHref) {\n      const newActiveAnchor = anchors.find(anchor => anchor.href === currentActiveHref);\n      fireNonCancelableEvent(onActiveHrefChange, newActiveAnchor);\n    }\n  }, [onActiveHrefChange, anchors, currentActiveHref]);\n\n  return (\n    <nav\n      {...baseProps}\n      ref={__internalRootRef}\n      aria-labelledby={ariaLabelledby}\n      className={clsx(baseProps.className, styles.root, testUtilsStyles.root)}\n    >\n      <ol className={clsx(styles['anchor-list'], testUtilsStyles['anchor-list'])}>\n        {renderNestedAnchors(anchors, {\n          onFollowHandler,\n          currentActiveHref,\n        })}\n      </ol>\n    </nav>\n  );\n}\n"]}

package/lib/internal/template/annotation-context/annotation/styles.css.js

@@ -1,29 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "arrow": "awsui_arrow_1hpp3_12arh_193",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_12arh_197",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_12arh_197",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_12arh_239",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_12arh_239",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_12arh_242",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_12arh_242",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_12arh_245",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_12arh_245",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_12arh_248",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_12arh_248",
-  "annotation": "awsui_annotation_1hpp3_12arh_252",
-  "next-button": "awsui_next-button_1hpp3_12arh_253",
-  "previous-button": "awsui_previous-button_1hpp3_12arh_254",
-  "finish-button": "awsui_finish-button_1hpp3_12arh_255",
-  "header": "awsui_header_1hpp3_12arh_256",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_12arh_257",
-  "content": "awsui_content_1hpp3_12arh_258",
-  "description": "awsui_description_1hpp3_12arh_262",
-  "actionBar": "awsui_actionBar_1hpp3_12arh_267",
-  "stepCounter": "awsui_stepCounter_1hpp3_12arh_274",
-  "divider": "awsui_divider_1hpp3_12arh_278",
-  "hotspot": "awsui_hotspot_1hpp3_12arh_282",
-  "icon": "awsui_icon_1hpp3_12arh_352"
+  "arrow": "awsui_arrow_1hpp3_w6z5c_193",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_w6z5c_197",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_w6z5c_197",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_w6z5c_239",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_w6z5c_239",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_w6z5c_242",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_w6z5c_242",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_w6z5c_245",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_w6z5c_245",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_w6z5c_248",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_w6z5c_248",
+  "annotation": "awsui_annotation_1hpp3_w6z5c_252",
+  "next-button": "awsui_next-button_1hpp3_w6z5c_253",
+  "previous-button": "awsui_previous-button_1hpp3_w6z5c_254",
+  "finish-button": "awsui_finish-button_1hpp3_w6z5c_255",
+  "header": "awsui_header_1hpp3_w6z5c_256",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_w6z5c_257",
+  "content": "awsui_content_1hpp3_w6z5c_258",
+  "description": "awsui_description_1hpp3_w6z5c_262",
+  "actionBar": "awsui_actionBar_1hpp3_w6z5c_267",
+  "stepCounter": "awsui_stepCounter_1hpp3_w6z5c_274",
+  "divider": "awsui_divider_1hpp3_w6z5c_278",
+  "hotspot": "awsui_hotspot_1hpp3_w6z5c_282",
+  "icon": "awsui_icon_1hpp3_w6z5c_352"
 };
   

package/lib/internal/template/annotation-context/annotation/styles.scoped.css

@@ -190,11 +190,11 @@ 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_arrow_1hpp3_12arh_193:not(#\9) {
+.awsui_arrow_1hpp3_w6z5c_193:not(#\9) {
   inline-size: 20px;
   block-size: 10px;
 }
-.awsui_arrow-outer_1hpp3_12arh_197:not(#\9), .awsui_arrow-inner_1hpp3_12arh_197:not(#\9) {
+.awsui_arrow-outer_1hpp3_w6z5c_197:not(#\9), .awsui_arrow-inner_1hpp3_w6z5c_197:not(#\9) {
   position: absolute;
   overflow: hidden;
   inline-size: 20px;
@@ -203,7 +203,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-inline-start: 0;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_arrow-outer_1hpp3_12arh_197:not(#\9)::after, .awsui_arrow-inner_1hpp3_12arh_197:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_w6z5c_197:not(#\9)::after, .awsui_arrow-inner_1hpp3_w6z5c_197:not(#\9)::after {
   content: "";
   box-sizing: border-box;
   display: inline-block;
@@ -219,67 +219,67 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transform: rotate(45deg);
   transform-origin: 0 100%;
 }
-.awsui_arrow-outer_1hpp3_12arh_197:not(#\9):dir(rtl)::after, .awsui_arrow-inner_1hpp3_12arh_197:not(#\9):dir(rtl)::after {
+.awsui_arrow-outer_1hpp3_w6z5c_197:not(#\9):dir(rtl)::after, .awsui_arrow-inner_1hpp3_w6z5c_197:not(#\9):dir(rtl)::after {
   transform: rotate(-45deg);
   transform-origin: 100% 100%;
 }
-.awsui_arrow-outer_1hpp3_12arh_197:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_w6z5c_197:not(#\9)::after {
   background-color: var(--color-border-status-info-kp0iif, #0073bb);
 }
-.awsui_arrow-inner_1hpp3_12arh_197:not(#\9) {
+.awsui_arrow-inner_1hpp3_w6z5c_197:not(#\9) {
   inset-block-start: 2px;
 }
-.awsui_arrow-inner_1hpp3_12arh_197:not(#\9)::after {
+.awsui_arrow-inner_1hpp3_w6z5c_197:not(#\9)::after {
   border-start-start-radius: 1px;
   border-start-end-radius: 0;
   border-end-start-radius: 0;
   border-end-end-radius: 0;
   background-color: var(--color-background-status-info-nzp1n3, #f1faff);
 }
-.awsui_arrow-position-right-top_1hpp3_12arh_239 > .awsui_arrow-outer_1hpp3_12arh_197:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_12arh_239 > .awsui_arrow-outer_1hpp3_12arh_197:not(#\9)::after {
+.awsui_arrow-position-right-top_1hpp3_w6z5c_239 > .awsui_arrow-outer_1hpp3_w6z5c_197:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_w6z5c_239 > .awsui_arrow-outer_1hpp3_w6z5c_197:not(#\9)::after {
   box-shadow: -0.71px 0.71px 4px -2px var(--color-shadow-default-9hdvit, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-left-top_1hpp3_12arh_242 > .awsui_arrow-outer_1hpp3_12arh_197:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_12arh_242 > .awsui_arrow-outer_1hpp3_12arh_197:not(#\9)::after {
+.awsui_arrow-position-left-top_1hpp3_w6z5c_242 > .awsui_arrow-outer_1hpp3_w6z5c_197:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_w6z5c_242 > .awsui_arrow-outer_1hpp3_w6z5c_197:not(#\9)::after {
   box-shadow: 0.71px -0.71px 4px -2px var(--color-shadow-default-9hdvit, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-top-center_1hpp3_12arh_245 > .awsui_arrow-outer_1hpp3_12arh_197:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_12arh_245 > .awsui_arrow-outer_1hpp3_12arh_197:not(#\9)::after {
+.awsui_arrow-position-top-center_1hpp3_w6z5c_245 > .awsui_arrow-outer_1hpp3_w6z5c_197:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_w6z5c_245 > .awsui_arrow-outer_1hpp3_w6z5c_197:not(#\9)::after {
   box-shadow: -0.71px -0.71px 4px -2px var(--color-shadow-default-9hdvit, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-bottom-center_1hpp3_12arh_248 > .awsui_arrow-outer_1hpp3_12arh_197:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_12arh_248 > .awsui_arrow-outer_1hpp3_12arh_197:not(#\9)::after {
+.awsui_arrow-position-bottom-center_1hpp3_w6z5c_248 > .awsui_arrow-outer_1hpp3_w6z5c_197:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_w6z5c_248 > .awsui_arrow-outer_1hpp3_w6z5c_197:not(#\9)::after {
   box-shadow: 0.71px 0.71px 4px -2px var(--color-shadow-default-9hdvit, rgba(0, 28, 36, 0.5));
 }
 
-.awsui_annotation_1hpp3_12arh_252:not(#\9),
-.awsui_next-button_1hpp3_12arh_253:not(#\9),
-.awsui_previous-button_1hpp3_12arh_254:not(#\9),
-.awsui_finish-button_1hpp3_12arh_255:not(#\9),
-.awsui_header_1hpp3_12arh_256:not(#\9),
-.awsui_step-counter-content_1hpp3_12arh_257:not(#\9),
-.awsui_content_1hpp3_12arh_258:not(#\9) {
+.awsui_annotation_1hpp3_w6z5c_252:not(#\9),
+.awsui_next-button_1hpp3_w6z5c_253:not(#\9),
+.awsui_previous-button_1hpp3_w6z5c_254:not(#\9),
+.awsui_finish-button_1hpp3_w6z5c_255:not(#\9),
+.awsui_header_1hpp3_w6z5c_256:not(#\9),
+.awsui_step-counter-content_1hpp3_w6z5c_257:not(#\9),
+.awsui_content_1hpp3_w6z5c_258:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_description_1hpp3_12arh_262:not(#\9) {
+.awsui_description_1hpp3_w6z5c_262:not(#\9) {
   overflow: hidden;
   margin-block-start: var(--space-xxs-jnczic, 4px);
 }
 
-.awsui_actionBar_1hpp3_12arh_267:not(#\9) {
+.awsui_actionBar_1hpp3_w6z5c_267:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
 }
 
-.awsui_stepCounter_1hpp3_12arh_274:not(#\9) {
+.awsui_stepCounter_1hpp3_w6z5c_274:not(#\9) {
   margin-inline-end: 20px;
 }
 
-.awsui_divider_1hpp3_12arh_278:not(#\9) {
+.awsui_divider_1hpp3_w6z5c_278:not(#\9) {
   border-block-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-divider-default-ipvpev, #eaeded);
 }
 
-.awsui_hotspot_1hpp3_12arh_282:not(#\9) {
+.awsui_hotspot_1hpp3_w6z5c_282:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -315,27 +315,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block: 0;
   padding-inline: 0;
   cursor: pointer;
-  scroll-margin: var(--awsui-content-scroll-margin-b75yp7, 40px 0 0 0);
+  scroll-margin: var(--awsui-content-scroll-margin-d43v8n, 40px 0 0 0);
   position: relative;
   inline-size: 16px;
   block-size: 16px;
 }
-.awsui_hotspot_1hpp3_12arh_282:not(#\9):before {
+.awsui_hotspot_1hpp3_w6z5c_282:not(#\9):before {
   content: "";
   position: absolute;
   inset: calc(-1 * var(--space-xxs-jnczic, 4px));
 }
-.awsui_hotspot_1hpp3_12arh_282:not(#\9):focus {
+.awsui_hotspot_1hpp3_w6z5c_282:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_12arh_282:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_w6z5c_282:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_12arh_282:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_w6z5c_282:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_12arh_282:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_w6z5c_282:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -349,13 +349,13 @@ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_12arh_282:not(#\9):focu
   border-end-end-radius: var(--border-radius-control-circular-focus-ring-0v2apg, 50%);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
 }
-.awsui_hotspot_1hpp3_12arh_282 > .awsui_icon_1hpp3_12arh_352:not(#\9) {
+.awsui_hotspot_1hpp3_w6z5c_282 > .awsui_icon_1hpp3_w6z5c_352:not(#\9) {
   position: relative;
   stroke: var(--color-text-tutorial-hotspot-default-ql4c5o, #0073bb);
 }
-.awsui_hotspot_1hpp3_12arh_282:not(#\9):hover > .awsui_icon_1hpp3_12arh_352 {
+.awsui_hotspot_1hpp3_w6z5c_282:not(#\9):hover > .awsui_icon_1hpp3_w6z5c_352 {
   stroke: var(--color-text-tutorial-hotspot-hover-baiupp, #0a4a74);
 }
-.awsui_hotspot_1hpp3_12arh_282:not(#\9):active > .awsui_icon_1hpp3_12arh_352 {
+.awsui_hotspot_1hpp3_w6z5c_282:not(#\9):active > .awsui_icon_1hpp3_w6z5c_352 {
   stroke: var(--color-text-tutorial-hotspot-default-ql4c5o, #0073bb);
 }

package/lib/internal/template/annotation-context/annotation/styles.selectors.js

@@ -2,29 +2,29 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "arrow": "awsui_arrow_1hpp3_12arh_193",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_12arh_197",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_12arh_197",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_12arh_239",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_12arh_239",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_12arh_242",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_12arh_242",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_12arh_245",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_12arh_245",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_12arh_248",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_12arh_248",
-  "annotation": "awsui_annotation_1hpp3_12arh_252",
-  "next-button": "awsui_next-button_1hpp3_12arh_253",
-  "previous-button": "awsui_previous-button_1hpp3_12arh_254",
-  "finish-button": "awsui_finish-button_1hpp3_12arh_255",
-  "header": "awsui_header_1hpp3_12arh_256",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_12arh_257",
-  "content": "awsui_content_1hpp3_12arh_258",
-  "description": "awsui_description_1hpp3_12arh_262",
-  "actionBar": "awsui_actionBar_1hpp3_12arh_267",
-  "stepCounter": "awsui_stepCounter_1hpp3_12arh_274",
-  "divider": "awsui_divider_1hpp3_12arh_278",
-  "hotspot": "awsui_hotspot_1hpp3_12arh_282",
-  "icon": "awsui_icon_1hpp3_12arh_352"
+  "arrow": "awsui_arrow_1hpp3_w6z5c_193",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_w6z5c_197",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_w6z5c_197",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_w6z5c_239",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_w6z5c_239",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_w6z5c_242",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_w6z5c_242",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_w6z5c_245",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_w6z5c_245",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_w6z5c_248",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_w6z5c_248",
+  "annotation": "awsui_annotation_1hpp3_w6z5c_252",
+  "next-button": "awsui_next-button_1hpp3_w6z5c_253",
+  "previous-button": "awsui_previous-button_1hpp3_w6z5c_254",
+  "finish-button": "awsui_finish-button_1hpp3_w6z5c_255",
+  "header": "awsui_header_1hpp3_w6z5c_256",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_w6z5c_257",
+  "content": "awsui_content_1hpp3_w6z5c_258",
+  "description": "awsui_description_1hpp3_w6z5c_262",
+  "actionBar": "awsui_actionBar_1hpp3_w6z5c_267",
+  "stepCounter": "awsui_stepCounter_1hpp3_w6z5c_274",
+  "divider": "awsui_divider_1hpp3_w6z5c_278",
+  "hotspot": "awsui_hotspot_1hpp3_w6z5c_282",
+  "icon": "awsui_icon_1hpp3_w6z5c_352"
 };
   

package/lib/internal/template/annotation-context/index.js

@@ -1,7 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 'use client';
-import { __rest } from "tslib";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { fireNonCancelableEvent } from '../internal/events';
 import useBaseComponent from '../internal/hooks/use-base-component';
@@ -142,12 +141,12 @@ export default function AnnotationContext({ currentTutorial, children, onStepCha
           need to update the availableHotspotsRef BEFORE the setAvailableHotspots calls, since
           they will be batched and delayed until after the useEffects are run.
         */
-        availableHotspotsRef.current = Object.assign(Object.assign({}, availableHotspotsRef.current), { [id]: true });
+        availableHotspotsRef.current = { ...availableHotspotsRef.current, [id]: true };
         setAvailableHotspots(availableHotspots => {
             if (availableHotspots[id]) {
                 return availableHotspots;
             }
-            return Object.assign(Object.assign({}, availableHotspots), { [id]: true });
+            return { ...availableHotspots, [id]: true };
         });
     }, [id2index]);
     const unregisterHotspot = useCallback((id) => {
@@ -182,7 +181,7 @@ export default function AnnotationContext({ currentTutorial, children, onStepCha
 applyDisplayName(AnnotationContext, 'AnnotationContext');
 function removeKey(key, object) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const _a = object, _b = key, _ = _a[_b], remainingObject = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+    const { [key]: _, ...remainingObject } = object;
     return remainingObject;
 }
 //# sourceMappingURL=index.js.map

package/lib/internal/template/annotation-context/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/annotation-context/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, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { HotspotProps } from '../hotspot/interfaces';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { ClosedAnnotation } from './annotation/closed-annotation';\nimport { OpenAnnotation } from './annotation/open-annotation';\nimport { HotspotContext, hotspotContext } from './context';\nimport { AnnotationContextProps } from './interfaces';\nimport { getStepInfo } from './utils';\n\nexport { AnnotationContextProps };\n\n// constant empty array to keep hook dependency stable\nconst emptyTasks: ReadonlyArray<AnnotationContextProps.Task> = [];\n\nexport default function AnnotationContext({\n  currentTutorial,\n  children,\n  onStepChange,\n  onFinish: onFinishHandler,\n  onStartTutorial,\n  onExitTutorial,\n  i18nStrings,\n}: AnnotationContextProps): JSX.Element {\n  useBaseComponent('AnnotationContext');\n\n  const [open, setOpen] = useState(true);\n\n  const [currentStepIndex, setCurrentStepIndex] = useState(0);\n  useEffect(() => {\n    // When a tutorial is started, we reset the progress to the first step.\n    setCurrentStepIndex(0);\n    setOpen(true);\n  }, [currentTutorial, setOpen]);\n\n  const [availableHotspots, setAvailableHotspots] = useState<Record<string, true | undefined>>({});\n  // availableHotspots is mirrored in this ref to prevent endless loops\n  // in between registerHotspot and unregisterHotspot callbacks.\n  const availableHotspotsRef = useRef<Record<string, true | undefined>>(availableHotspots);\n\n  const annotations = currentTutorial ? currentTutorial.tasks : emptyTasks;\n  const { task, step, localIndex, taskIndex } = getStepInfo(annotations, currentStepIndex);\n  const currentId = step?.hotspotId;\n  const totalStepCount = annotations.map(a => a.steps.length).reduce((a, b) => a + b, 0);\n\n  const id2index = useMemo(() => {\n    const mapping: Record<string, number> = {};\n\n    let counter = 0;\n    for (const annotation of annotations) {\n      for (const step of annotation.steps) {\n        if (mapping[step.hotspotId] === undefined) {\n          mapping[step.hotspotId] = counter;\n        }\n        counter++;\n      }\n    }\n\n    return mapping;\n  }, [annotations]);\n\n  const openNextStep = useCallback(() => {\n    const newStepIndex = Math.min(currentStepIndex + 1, totalStepCount);\n    setCurrentStepIndex(newStepIndex);\n    fireNonCancelableEvent(onStepChange, { step: newStepIndex, reason: 'next' });\n  }, [currentStepIndex, onStepChange, totalStepCount]);\n\n  const openPreviousStep = useCallback(() => {\n    const newStepIndex = Math.max(currentStepIndex - 1, 0);\n    setCurrentStepIndex(newStepIndex);\n    fireNonCancelableEvent(onStepChange, { step: newStepIndex, reason: 'previous' });\n  }, [onStepChange, currentStepIndex]);\n\n  const onFinish = useCallback(() => fireNonCancelableEvent(onFinishHandler), [onFinishHandler]);\n\n  /**\n   * If the currently open hotspot disappears from the page (e.g. because of a react-router navigation),\n   * this Effect detects the nearest available hotspot and changes to it. This allows us to e.g. automatically\n   * advance to the first step on the new page (or the last step on the previous page, in case the user\n   * navigates back).\n   */\n  const isCurrentHotspotAvailable = currentId ? availableHotspots[currentId] : null;\n  useEffect(() => {\n    if (!currentId || availableHotspotsRef.current[currentId]) {\n      return;\n    }\n\n    const findNearestHotspot = () => {\n      let nearestHotspot: string | undefined = undefined;\n      let nearestDistance = Infinity;\n      for (const hotspotId of Object.keys(availableHotspotsRef.current)) {\n        const distanceFromCurrentHotspot = Math.abs(id2index[hotspotId] - currentStepIndex);\n        if (distanceFromCurrentHotspot < nearestDistance) {\n          nearestDistance = distanceFromCurrentHotspot;\n          nearestHotspot = hotspotId;\n        }\n      }\n      return nearestHotspot;\n    };\n\n    const nearestHotspot = findNearestHotspot();\n    if (nearestHotspot) {\n      const newStepIndex = id2index[nearestHotspot];\n      setCurrentStepIndex(newStepIndex);\n      setOpen(true);\n      fireNonCancelableEvent(onStepChange, { step: newStepIndex, reason: 'auto-fallback' });\n    }\n  }, [annotations, isCurrentHotspotAvailable, currentId, currentStepIndex, id2index, onStepChange, availableHotspots]);\n\n  const onDismiss = useCallback(() => {\n    setOpen(false);\n  }, [setOpen]);\n\n  const onOpen = useCallback(\n    (stepIndex: number) => {\n      setCurrentStepIndex(stepIndex);\n      fireNonCancelableEvent(onStepChange, { step: stepIndex, reason: 'open' });\n      setOpen(true);\n    },\n    [onStepChange, setOpen]\n  );\n\n  const idOfPreviousHotspot = getStepInfo(annotations, currentStepIndex - 1).step?.hotspotId;\n  const idOfNextHotspot = getStepInfo(annotations, currentStepIndex + 1).step?.hotspotId;\n  const previousHotspotIsAvailable =\n    (idOfPreviousHotspot !== undefined && availableHotspots[idOfPreviousHotspot]) ?? false;\n  const nextHotspotIsAvailable = (idOfNextHotspot !== undefined && availableHotspots[idOfNextHotspot]) ?? false;\n\n  const getContentForId = useCallback(\n    (id: string, direction: HotspotProps['direction']) => {\n      if (currentTutorial?.completed) {\n        return null;\n      }\n\n      const globalStepIndex = id2index[id];\n      if (globalStepIndex === undefined) {\n        // This hotspot is not used in the current tutorial.\n        return null;\n      }\n\n      if (!task || !step || !open || id !== currentId) {\n        const { task: currentTask, localIndex: currentStepIndex } = getStepInfo(annotations, globalStepIndex);\n        return (\n          <ClosedAnnotation\n            globalStepIndex={globalStepIndex}\n            i18nStrings={i18nStrings}\n            onOpen={onOpen}\n            focusOnRender={id === currentId}\n            totalLocalSteps={currentTask ? currentTask.steps.length : 0}\n            taskLocalStepIndex={currentStepIndex}\n          />\n        );\n      }\n\n      return (\n        <OpenAnnotation\n          i18nStrings={i18nStrings}\n          direction={direction}\n          title={i18nStrings.taskTitle(taskIndex, task.title)}\n          content={step.content}\n          alert={step.warningAlert}\n          showPreviousButton={currentStepIndex !== 0}\n          showFinishButton={currentStepIndex + 1 === totalStepCount}\n          taskLocalStepIndex={localIndex}\n          totalLocalSteps={task.steps.length}\n          nextButtonEnabled={nextHotspotIsAvailable}\n          onNextButtonClick={openNextStep}\n          onFinish={onFinish}\n          previousButtonEnabled={previousHotspotIsAvailable}\n          onPreviousButtonClick={openPreviousStep}\n          onDismiss={onDismiss}\n        />\n      );\n    },\n    [\n      id2index,\n      currentTutorial,\n      task,\n      step,\n      open,\n      currentId,\n      currentStepIndex,\n      i18nStrings,\n      taskIndex,\n      localIndex,\n      totalStepCount,\n      nextHotspotIsAvailable,\n      openNextStep,\n      onFinish,\n      previousHotspotIsAvailable,\n      openPreviousStep,\n      onDismiss,\n      onOpen,\n      annotations,\n    ]\n  );\n\n  const registerHotspot = useCallback(\n    (id: string) => {\n      if (!id2index || id2index[id] === undefined) {\n        // This hotspot is not used in the current tutorial.\n        return;\n      }\n\n      /*\n        To ensure that all hotspots are immediately known to all triggered useEffects, we\n        need to update the availableHotspotsRef BEFORE the setAvailableHotspots calls, since\n        they will be batched and delayed until after the useEffects are run.\n      */\n      availableHotspotsRef.current = { ...availableHotspotsRef.current, [id]: true } as const;\n\n      setAvailableHotspots(availableHotspots => {\n        if (availableHotspots[id]) {\n          return availableHotspots;\n        }\n\n        return { ...availableHotspots, [id]: true } as const;\n      });\n    },\n    [id2index]\n  );\n\n  const unregisterHotspot = useCallback((id: string) => {\n    if (!availableHotspotsRef.current[id]) {\n      // Prevents unnecessary re-renders.\n      return;\n    }\n\n    /*\n      To ensure that all hotspots are immediately known to all triggered useEffects, we\n      need to update the availableHotspotsRef BEFORE the setAvailableHotspots calls, since\n      they will be batched and delayed until after the useEffects are run.\n    */\n    availableHotspotsRef.current = removeKey(id, availableHotspotsRef.current);\n\n    setAvailableHotspots(availableHotspots => {\n      if (!availableHotspots[id]) {\n        return availableHotspots;\n      }\n\n      return removeKey(id, availableHotspots);\n    });\n  }, []);\n\n  const context: HotspotContext = {\n    getContentForId,\n    registerHotspot,\n    unregisterHotspot,\n    onStartTutorial,\n    onExitTutorial,\n    currentStepIndex,\n    currentTutorial,\n  };\n\n  return <hotspotContext.Provider value={context}>{children}</hotspotContext.Provider>;\n}\n\napplyDisplayName(AnnotationContext, 'AnnotationContext');\n\nfunction removeKey<T extends Record<string, unknown>>(key: keyof T, object: T) {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { [key]: _, ...remainingObject } = object;\n  return remainingObject;\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/annotation-context/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, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { HotspotProps } from '../hotspot/interfaces';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { ClosedAnnotation } from './annotation/closed-annotation';\nimport { OpenAnnotation } from './annotation/open-annotation';\nimport { HotspotContext, hotspotContext } from './context';\nimport { AnnotationContextProps } from './interfaces';\nimport { getStepInfo } from './utils';\n\nexport { AnnotationContextProps };\n\n// constant empty array to keep hook dependency stable\nconst emptyTasks: ReadonlyArray<AnnotationContextProps.Task> = [];\n\nexport default function AnnotationContext({\n  currentTutorial,\n  children,\n  onStepChange,\n  onFinish: onFinishHandler,\n  onStartTutorial,\n  onExitTutorial,\n  i18nStrings,\n}: AnnotationContextProps): JSX.Element {\n  useBaseComponent('AnnotationContext');\n\n  const [open, setOpen] = useState(true);\n\n  const [currentStepIndex, setCurrentStepIndex] = useState(0);\n  useEffect(() => {\n    // When a tutorial is started, we reset the progress to the first step.\n    setCurrentStepIndex(0);\n    setOpen(true);\n  }, [currentTutorial, setOpen]);\n\n  const [availableHotspots, setAvailableHotspots] = useState<Record<string, true | undefined>>({});\n  // availableHotspots is mirrored in this ref to prevent endless loops\n  // in between registerHotspot and unregisterHotspot callbacks.\n  const availableHotspotsRef = useRef<Record<string, true | undefined>>(availableHotspots);\n\n  const annotations = currentTutorial ? currentTutorial.tasks : emptyTasks;\n  const { task, step, localIndex, taskIndex } = getStepInfo(annotations, currentStepIndex);\n  const currentId = step?.hotspotId;\n  const totalStepCount = annotations.map(a => a.steps.length).reduce((a, b) => a + b, 0);\n\n  const id2index = useMemo(() => {\n    const mapping: Record<string, number> = {};\n\n    let counter = 0;\n    for (const annotation of annotations) {\n      for (const step of annotation.steps) {\n        if (mapping[step.hotspotId] === undefined) {\n          mapping[step.hotspotId] = counter;\n        }\n        counter++;\n      }\n    }\n\n    return mapping;\n  }, [annotations]);\n\n  const openNextStep = useCallback(() => {\n    const newStepIndex = Math.min(currentStepIndex + 1, totalStepCount);\n    setCurrentStepIndex(newStepIndex);\n    fireNonCancelableEvent(onStepChange, { step: newStepIndex, reason: 'next' });\n  }, [currentStepIndex, onStepChange, totalStepCount]);\n\n  const openPreviousStep = useCallback(() => {\n    const newStepIndex = Math.max(currentStepIndex - 1, 0);\n    setCurrentStepIndex(newStepIndex);\n    fireNonCancelableEvent(onStepChange, { step: newStepIndex, reason: 'previous' });\n  }, [onStepChange, currentStepIndex]);\n\n  const onFinish = useCallback(() => fireNonCancelableEvent(onFinishHandler), [onFinishHandler]);\n\n  /**\n   * If the currently open hotspot disappears from the page (e.g. because of a react-router navigation),\n   * this Effect detects the nearest available hotspot and changes to it. This allows us to e.g. automatically\n   * advance to the first step on the new page (or the last step on the previous page, in case the user\n   * navigates back).\n   */\n  const isCurrentHotspotAvailable = currentId ? availableHotspots[currentId] : null;\n  useEffect(() => {\n    if (!currentId || availableHotspotsRef.current[currentId]) {\n      return;\n    }\n\n    const findNearestHotspot = () => {\n      let nearestHotspot: string | undefined = undefined;\n      let nearestDistance = Infinity;\n      for (const hotspotId of Object.keys(availableHotspotsRef.current)) {\n        const distanceFromCurrentHotspot = Math.abs(id2index[hotspotId] - currentStepIndex);\n        if (distanceFromCurrentHotspot < nearestDistance) {\n          nearestDistance = distanceFromCurrentHotspot;\n          nearestHotspot = hotspotId;\n        }\n      }\n      return nearestHotspot;\n    };\n\n    const nearestHotspot = findNearestHotspot();\n    if (nearestHotspot) {\n      const newStepIndex = id2index[nearestHotspot];\n      setCurrentStepIndex(newStepIndex);\n      setOpen(true);\n      fireNonCancelableEvent(onStepChange, { step: newStepIndex, reason: 'auto-fallback' });\n    }\n  }, [annotations, isCurrentHotspotAvailable, currentId, currentStepIndex, id2index, onStepChange, availableHotspots]);\n\n  const onDismiss = useCallback(() => {\n    setOpen(false);\n  }, [setOpen]);\n\n  const onOpen = useCallback(\n    (stepIndex: number) => {\n      setCurrentStepIndex(stepIndex);\n      fireNonCancelableEvent(onStepChange, { step: stepIndex, reason: 'open' });\n      setOpen(true);\n    },\n    [onStepChange, setOpen]\n  );\n\n  const idOfPreviousHotspot = getStepInfo(annotations, currentStepIndex - 1).step?.hotspotId;\n  const idOfNextHotspot = getStepInfo(annotations, currentStepIndex + 1).step?.hotspotId;\n  const previousHotspotIsAvailable =\n    (idOfPreviousHotspot !== undefined && availableHotspots[idOfPreviousHotspot]) ?? false;\n  const nextHotspotIsAvailable = (idOfNextHotspot !== undefined && availableHotspots[idOfNextHotspot]) ?? false;\n\n  const getContentForId = useCallback(\n    (id: string, direction: HotspotProps['direction']) => {\n      if (currentTutorial?.completed) {\n        return null;\n      }\n\n      const globalStepIndex = id2index[id];\n      if (globalStepIndex === undefined) {\n        // This hotspot is not used in the current tutorial.\n        return null;\n      }\n\n      if (!task || !step || !open || id !== currentId) {\n        const { task: currentTask, localIndex: currentStepIndex } = getStepInfo(annotations, globalStepIndex);\n        return (\n          <ClosedAnnotation\n            globalStepIndex={globalStepIndex}\n            i18nStrings={i18nStrings}\n            onOpen={onOpen}\n            focusOnRender={id === currentId}\n            totalLocalSteps={currentTask ? currentTask.steps.length : 0}\n            taskLocalStepIndex={currentStepIndex}\n          />\n        );\n      }\n\n      return (\n        <OpenAnnotation\n          i18nStrings={i18nStrings}\n          direction={direction}\n          title={i18nStrings.taskTitle(taskIndex, task.title)}\n          content={step.content}\n          alert={step.warningAlert}\n          showPreviousButton={currentStepIndex !== 0}\n          showFinishButton={currentStepIndex + 1 === totalStepCount}\n          taskLocalStepIndex={localIndex}\n          totalLocalSteps={task.steps.length}\n          nextButtonEnabled={nextHotspotIsAvailable}\n          onNextButtonClick={openNextStep}\n          onFinish={onFinish}\n          previousButtonEnabled={previousHotspotIsAvailable}\n          onPreviousButtonClick={openPreviousStep}\n          onDismiss={onDismiss}\n        />\n      );\n    },\n    [\n      id2index,\n      currentTutorial,\n      task,\n      step,\n      open,\n      currentId,\n      currentStepIndex,\n      i18nStrings,\n      taskIndex,\n      localIndex,\n      totalStepCount,\n      nextHotspotIsAvailable,\n      openNextStep,\n      onFinish,\n      previousHotspotIsAvailable,\n      openPreviousStep,\n      onDismiss,\n      onOpen,\n      annotations,\n    ]\n  );\n\n  const registerHotspot = useCallback(\n    (id: string) => {\n      if (!id2index || id2index[id] === undefined) {\n        // This hotspot is not used in the current tutorial.\n        return;\n      }\n\n      /*\n        To ensure that all hotspots are immediately known to all triggered useEffects, we\n        need to update the availableHotspotsRef BEFORE the setAvailableHotspots calls, since\n        they will be batched and delayed until after the useEffects are run.\n      */\n      availableHotspotsRef.current = { ...availableHotspotsRef.current, [id]: true } as const;\n\n      setAvailableHotspots(availableHotspots => {\n        if (availableHotspots[id]) {\n          return availableHotspots;\n        }\n\n        return { ...availableHotspots, [id]: true } as const;\n      });\n    },\n    [id2index]\n  );\n\n  const unregisterHotspot = useCallback((id: string) => {\n    if (!availableHotspotsRef.current[id]) {\n      // Prevents unnecessary re-renders.\n      return;\n    }\n\n    /*\n      To ensure that all hotspots are immediately known to all triggered useEffects, we\n      need to update the availableHotspotsRef BEFORE the setAvailableHotspots calls, since\n      they will be batched and delayed until after the useEffects are run.\n    */\n    availableHotspotsRef.current = removeKey(id, availableHotspotsRef.current);\n\n    setAvailableHotspots(availableHotspots => {\n      if (!availableHotspots[id]) {\n        return availableHotspots;\n      }\n\n      return removeKey(id, availableHotspots);\n    });\n  }, []);\n\n  const context: HotspotContext = {\n    getContentForId,\n    registerHotspot,\n    unregisterHotspot,\n    onStartTutorial,\n    onExitTutorial,\n    currentStepIndex,\n    currentTutorial,\n  };\n\n  return <hotspotContext.Provider value={context}>{children}</hotspotContext.Provider>;\n}\n\napplyDisplayName(AnnotationContext, 'AnnotationContext');\n\nfunction removeKey<T extends Record<string, unknown>>(key: keyof T, object: T) {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { [key]: _, ...remainingObject } = object;\n  return remainingObject;\n}\n"]}

package/lib/internal/template/app-layout/classic.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
@@ -24,9 +23,8 @@ import { useFocusControl } from './utils/use-focus-control';
 import { useSplitPanelFocusControl } from './utils/use-split-panel-focus-control';
 import styles from './styles.css.js';
 import testutilStyles from './test-classes/styles.css.js';
-const ClassicAppLayout = React.forwardRef((_a, ref) => {
-    var _b, _c, _d, _e, _f, _g, _h;
-    var { navigation, navigationWidth, navigationHide, navigationOpen, tools, toolsWidth, toolsHide, toolsOpen: controlledToolsOpen, breadcrumbs, notifications, stickyNotifications, contentHeader, disableContentHeaderOverlap, content, contentType, disableContentPaddings, disableBodyScroll, maxContentWidth, minContentWidth, placement, ariaLabels, splitPanel, splitPanelSize: controlledSplitPanelSize, splitPanelOpen: controlledSplitPanelOpen, splitPanelPreferences: controlledSplitPanelPreferences, onSplitPanelPreferencesChange, onSplitPanelResize, onSplitPanelToggle, onNavigationChange, onToolsChange, drawers: controlledDrawers, onDrawerChange, activeDrawerId: controlledActiveDrawerId } = _a, rest = __rest(_a, ["navigation", "navigationWidth", "navigationHide", "navigationOpen", "tools", "toolsWidth", "toolsHide", "toolsOpen", "breadcrumbs", "notifications", "stickyNotifications", "contentHeader", "disableContentHeaderOverlap", "content", "contentType", "disableContentPaddings", "disableBodyScroll", "maxContentWidth", "minContentWidth", "placement", "ariaLabels", "splitPanel", "splitPanelSize", "splitPanelOpen", "splitPanelPreferences", "onSplitPanelPreferencesChange", "onSplitPanelResize", "onSplitPanelToggle", "onNavigationChange", "onToolsChange", "drawers", "onDrawerChange", "activeDrawerId"]);
+const ClassicAppLayout = React.forwardRef(({ navigation, navigationWidth, navigationHide, navigationOpen, tools, toolsWidth, toolsHide, toolsOpen: controlledToolsOpen, breadcrumbs, notifications, stickyNotifications, contentHeader, disableContentHeaderOverlap, content, contentType, disableContentPaddings, disableBodyScroll, maxContentWidth, minContentWidth, placement, ariaLabels, splitPanel, splitPanelSize: controlledSplitPanelSize, splitPanelOpen: controlledSplitPanelOpen, splitPanelPreferences: controlledSplitPanelPreferences, onSplitPanelPreferencesChange, onSplitPanelResize, onSplitPanelToggle, onNavigationChange, onToolsChange, drawers: controlledDrawers, onDrawerChange, activeDrawerId: controlledActiveDrawerId, ...rest }, ref) => {
+    var _a, _b, _c, _d, _e, _f, _g;
     // Private API for embedded view mode
     const __embeddedViewMode = Boolean(rest.__embeddedViewMode);
     const rootRef = useRef(null);
@@ -46,7 +44,12 @@ const ClassicAppLayout = React.forwardRef((_a, ref) => {
         }
         fireNonCancelableEvent(onToolsChange, { open });
     };
-    const { drawers, activeDrawer, minDrawerSize, activeDrawerSize, activeDrawerId, ariaLabelsWithDrawers, onActiveDrawerChange, onActiveDrawerResize, } = useDrawers(Object.assign({ drawers: controlledDrawers, onDrawerChange, activeDrawerId: controlledActiveDrawerId }, rest), ariaLabels, {
+    const { drawers, activeDrawer, minDrawerSize, activeDrawerSize, activeDrawerId, ariaLabelsWithDrawers, onActiveDrawerChange, onActiveDrawerResize, } = useDrawers({
+        drawers: controlledDrawers,
+        onDrawerChange,
+        activeDrawerId: controlledActiveDrawerId,
+        ...rest,
+    }, ariaLabels, {
         disableDrawersMerge: true,
         ariaLabels,
         tools,
@@ -205,7 +208,7 @@ const ClassicAppLayout = React.forwardRef((_a, ref) => {
         reportHeaderHeight: setSplitPanelReportedHeaderHeight,
         refs: splitPanelRefs,
     };
-    const splitPanelWrapped = splitPanel && (React.createElement(SplitPanelProvider, Object.assign({}, splitPanelContextProps), finalSplitPanePosition === 'side' ? (React.createElement(SideSplitPanelDrawer, { displayed: splitPanelDisplayed }, splitPanel)) : (splitPanel)));
+    const splitPanelWrapped = splitPanel && (React.createElement(SplitPanelProvider, { ...splitPanelContextProps }, finalSplitPanePosition === 'side' ? (React.createElement(SideSplitPanelDrawer, { displayed: splitPanelDisplayed }, splitPanel)) : (splitPanel)));
     const contentWrapperProps = {
         contentType,
         navigationPadding: navigationHide || !!navigationOpen,
@@ -239,11 +242,11 @@ const ClassicAppLayout = React.forwardRef((_a, ref) => {
         focusActiveDrawer: () => focusDrawersButtons({ force: true }),
         focusSplitPanel: () => { var _a; return (_a = splitPanelRefs.slider.current) === null || _a === void 0 ? void 0 : _a.focus(); },
     }));
-    const splitPanelBottomOffset = (_b = (!splitPanelDisplayed || finalSplitPanePosition !== 'bottom'
+    const splitPanelBottomOffset = (_a = (!splitPanelDisplayed || finalSplitPanePosition !== 'bottom'
         ? undefined
         : splitPanelOpen
             ? splitPanelReportedSize
-            : splitPanelReportedHeaderHeight)) !== null && _b !== void 0 ? _b : undefined;
+            : splitPanelReportedHeaderHeight)) !== null && _a !== void 0 ? _a : undefined;
     const [mobileBarHeight, mobileBarRef] = useContainerQuery(rect => rect.contentBoxHeight);
     return (React.createElement("div", { className: clsx(styles.root, testutilStyles.root, disableBodyScroll && styles['root-no-scroll']), ref: rootRef, style: contentHeightStyle },
         isMobile && !__embeddedViewMode && (!toolsHide || !navigationHide || breadcrumbs) && (React.createElement(MobileToolbar, { anyPanelOpen: anyPanelOpen, toggleRefs: { navigation: navigationRefs.toggle, tools: toolsRefs.toggle }, topOffset: placement.insetBlockStart, ariaLabels: ariaLabels, navigationHide: navigationHide, toolsHide: toolsHide, onNavigationOpen: () => onNavigationToggle({ isOpen: true, autoFocus: true }), onToolsOpen: () => onToolsToggle(true), unfocusable: anyPanelOpen, mobileBarRef: mobileBarRef, drawers: drawers, activeDrawerId: activeDrawerId, onDrawerChange: newDrawerId => {
@@ -264,32 +267,32 @@ const ClassicAppLayout = React.forwardRef((_a, ref) => {
                         marginBottom: splitPanelBottomOffset,
                     } },
                     notifications && (React.createElement(Notifications, { disableContentPaddings: disableContentPaddings, testUtilsClassName: testutilStyles.notifications, labels: ariaLabels, topOffset: disableBodyScroll ? 0 : placement.insetBlockStart, sticky: !isMobile && stickyNotifications, ref: notificationsRef }, notifications)),
-                    ((!isMobile && breadcrumbs) || contentHeader) && (React.createElement(ContentWrapper, Object.assign({}, contentWrapperProps),
+                    ((!isMobile && breadcrumbs) || contentHeader) && (React.createElement(ContentWrapper, { ...contentWrapperProps },
                         !isMobile && breadcrumbs && (React.createElement("div", { className: clsx(testutilStyles.breadcrumbs, styles['breadcrumbs-desktop']) }, breadcrumbs)),
                         contentHeader && (React.createElement("div", { className: clsx(styles['content-header-wrapper'], !hasRenderedNotifications && (isMobile || !breadcrumbs) && styles['content-extra-top-padding'], !hasRenderedNotifications && !breadcrumbs && styles['content-header-wrapper-first-child'], !disableContentHeaderOverlap && styles['content-header-wrapper-overlapped']) }, contentHeader)))),
-                    React.createElement(ContentWrapper, Object.assign({}, contentWrapperProps, { ref: mainContentRef, disablePaddings: disableContentPaddings, className: clsx(!disableContentPaddings && styles['content-wrapper'], !disableContentPaddings &&
+                    React.createElement(ContentWrapper, { ...contentWrapperProps, ref: mainContentRef, disablePaddings: disableContentPaddings, className: clsx(!disableContentPaddings && styles['content-wrapper'], !disableContentPaddings &&
                             (isMobile || !breadcrumbs) &&
                             !contentHeader &&
                             styles['content-extra-top-padding'], testutilStyles.content, !disableContentHeaderOverlap && contentHeader && styles['content-overlapped'], !hasRenderedNotifications &&
                             !breadcrumbs &&
                             !isMobile &&
                             !contentHeader &&
-                            styles['content-wrapper-first-child']), style: getStickyOffsetVars(placement.insetBlockStart, placement.insetBlockEnd + (splitPanelBottomOffset || 0), `${stickyNotificationsHeight}px`, mobileBarHeight && !disableBodyScroll ? `${mobileBarHeight}px` : '0px', !!disableBodyScroll, isMobile) }), content)),
+                            styles['content-wrapper-first-child']), style: getStickyOffsetVars(placement.insetBlockStart, placement.insetBlockEnd + (splitPanelBottomOffset || 0), `${stickyNotificationsHeight}px`, mobileBarHeight && !disableBodyScroll ? `${mobileBarHeight}px` : '0px', !!disableBodyScroll, isMobile) }, content)),
                 finalSplitPanePosition === 'bottom' && splitPanelWrapped),
             finalSplitPanePosition === 'side' && splitPanelWrapped,
             hasDrawers ? (React.createElement(ResizableDrawer, { contentClassName: clsx(activeDrawerId && testutilStyles['active-drawer'], activeDrawerId === TOOLS_DRAWER_ID && testutilStyles.tools), toggleClassName: testutilStyles['tools-toggle'], closeClassName: clsx(testutilStyles['active-drawer-close-button'], activeDrawerId === TOOLS_DRAWER_ID && testutilStyles['tools-close']), ariaLabels: {
-                    openLabel: (_c = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _c === void 0 ? void 0 : _c.triggerButton,
-                    closeLabel: (_d = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _d === void 0 ? void 0 : _d.closeButton,
-                    mainLabel: (_e = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _e === void 0 ? void 0 : _e.drawerName,
-                    resizeHandle: (_f = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _f === void 0 ? void 0 : _f.resizeHandle,
-                    resizeHandleTooltipText: (_g = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _g === void 0 ? void 0 : _g.resizeHandleTooltipText,
+                    openLabel: (_b = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _b === void 0 ? void 0 : _b.triggerButton,
+                    closeLabel: (_c = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _c === void 0 ? void 0 : _c.closeButton,
+                    mainLabel: (_d = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _d === void 0 ? void 0 : _d.drawerName,
+                    resizeHandle: (_e = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _e === void 0 ? void 0 : _e.resizeHandle,
+                    resizeHandleTooltipText: (_f = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _f === void 0 ? void 0 : _f.resizeHandleTooltipText,
                 }, minWidth: minDrawerSize, maxWidth: drawerMaxSize, width: activeDrawerSize, bottomOffset: placement.insetBlockEnd, topOffset: placement.insetBlockStart, isMobile: isMobile, onToggle: isOpen => {
                     if (!isOpen) {
                         focusToolsButtons();
                         focusDrawersButtons();
                         onActiveDrawerChange(null, { initiatedByUserAction: true });
                     }
-                }, isOpen: true, hideOpenButton: true, toggleRefs: drawerRefs, type: "tools", onLoseFocus: loseDrawersFocus, activeDrawer: activeDrawer, onResize: changeDetail => onActiveDrawerResize(changeDetail), refs: drawerRefs, toolsContent: (_h = drawers === null || drawers === void 0 ? void 0 : drawers.find(drawer => drawer.id === TOOLS_DRAWER_ID)) === null || _h === void 0 ? void 0 : _h.content }, activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.content)) : (!toolsHide && (React.createElement(Drawer, { contentClassName: testutilStyles.tools, toggleClassName: testutilStyles['tools-toggle'], closeClassName: testutilStyles['tools-close'], ariaLabels: togglesConfig.tools.getLabels(ariaLabels), width: toolsWidth, bottomOffset: placement.insetBlockEnd, topOffset: placement.insetBlockStart, isMobile: isMobile, onToggle: onToolsToggle, isOpen: toolsOpen, toggleRefs: toolsRefs, type: "tools", onLoseFocus: loseToolsFocus }, tools))),
+                }, isOpen: true, hideOpenButton: true, toggleRefs: drawerRefs, type: "tools", onLoseFocus: loseDrawersFocus, activeDrawer: activeDrawer, onResize: changeDetail => onActiveDrawerResize(changeDetail), refs: drawerRefs, toolsContent: (_g = drawers === null || drawers === void 0 ? void 0 : drawers.find(drawer => drawer.id === TOOLS_DRAWER_ID)) === null || _g === void 0 ? void 0 : _g.content }, activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.content)) : (!toolsHide && (React.createElement(Drawer, { contentClassName: testutilStyles.tools, toggleClassName: testutilStyles['tools-toggle'], closeClassName: testutilStyles['tools-close'], ariaLabels: togglesConfig.tools.getLabels(ariaLabels), width: toolsWidth, bottomOffset: placement.insetBlockEnd, topOffset: placement.insetBlockStart, isMobile: isMobile, onToggle: onToolsToggle, isOpen: toolsOpen, toggleRefs: toolsRefs, type: "tools", onLoseFocus: loseToolsFocus }, tools))),
             hasDrawers && drawers.length > 0 && (React.createElement(DrawerTriggersBar, { drawerRefs: drawerRefs, bottomOffset: placement.insetBlockEnd, topOffset: placement.insetBlockStart, isMobile: isMobile, drawers: drawers, activeDrawerId: activeDrawerId, onDrawerChange: newDrawerId => {
                     if (activeDrawerId !== newDrawerId) {
                         focusToolsButtons();