@cloudscape-design/components-themeable 3.0.127 → 3.0.129

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "3e13d449811fc95f5b3c8869659dd8b04cdaf2a3"
+  "commit": "707ed43e0765d33d02f644d07a5c2fa3515c3368"
 }

package/lib/internal/scss/app-layout/visual-refresh/main.scss

@@ -5,6 +5,7 @@
 
 @use '../../internal/styles/' as styles;
 @use '../../internal/styles/tokens' as awsui;
+@use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
 
 .container {
   grid-column: 3;
@@ -12,10 +13,20 @@
   padding-bottom: awsui.$space-layout-content-bottom;
 
   /*
-  If disableContentPaddings is enabled then the Main content has a different 
-  behavior inside the Layout grid. By default it will render across the entire 
-  grid column span. If the Navigation is open on the left, we increment the 
-  start column by one. If the Tools or Split Panel (in side position) is open 
+  If the split panel is in the bottom position additional padding will need to be
+  added to the content area. This is to ensure that the user is able to scroll
+  far enough to see all of the content that would otherwise be obscured by the
+  sticky position of the split panel.
+  */
+  &.has-split-panel.split-panel-position-bottom {
+    padding-bottom: calc(var(#{custom-props.$splitPanelHeight}) + #{awsui.$space-layout-content-bottom});
+  }
+
+  /*
+  If disableContentPaddings is enabled then the Main content has a different
+  behavior inside the Layout grid. By default it will render across the entire
+  grid column span. If the Navigation is open on the left, we increment the
+  start column by one. If the Tools or Split Panel (in side position) is open
   on the right, we decrement the column end by one.
   */
   &.disable-content-paddings {
@@ -35,14 +46,14 @@
   }
 
   /*
-  If disableContentPaddings is not enabled (the majority of use cases) then 
-  the following code block will compute the padding behavior for the Main 
+  If disableContentPaddings is not enabled (the majority of use cases) then
+  the following code block will compute the padding behavior for the Main
   under various circumstances.
   */
   &:not(.disable-content-paddings) {
     @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
       /*
-      Notifications is the previous adjacent sibling to the Main in 
+      Notifications is the previous adjacent sibling to the Main in
       desktop viewports if there are no Breadcrumbs or Header. Use additional
       to padding on the Main.
       */
@@ -52,7 +63,7 @@
       }
 
       /*
-      Main is the only rendered center content if there are no Notifications, 
+      Main is the only rendered center content if there are no Notifications,
       Breadcrumbs, or Header. Use minimal top padding.
       */
       &.content-type-default:not(.has-notifications-content):not(.has-breadcrumbs):not(.has-header):not(.has-dynamic-overlap-height),
@@ -61,7 +72,7 @@
       }
 
       /*
-      If the Header exists then it is necessarily the previous adjacent 
+      If the Header exists then it is necessarily the previous adjacent
       sibling to the Main which requires no top padding.
       */
       &.has-header,
@@ -72,8 +83,8 @@
 
     @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
       /*
-      If the Notifications exist but the Header does not then the 
-      Notifications is the previous adjacent sibling to the Main 
+      If the Notifications exist but the Header does not then the
+      Notifications is the previous adjacent sibling to the Main
       requiring additional top padding. This is because the Breadcrumbs
       are now rendered first and positioned sticky.
       */
@@ -91,7 +102,7 @@
       }
 
       /*
-      If the Header exists then it is necessarily the previous adjacent 
+      If the Header exists then it is necessarily the previous adjacent
       sibling to the Main which requires no top padding.
       */
       &.has-header,

package/lib/internal/scss/app-layout/visual-refresh/split-panel.scss

@@ -8,18 +8,27 @@
 @use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
 
 /*
-When the Split Panel is in the bottom position it will be an additional
-row entry in the grid definition within the Layout component. The state of 
-the Navigation and Tools components will adjust the start and end column
-within. In the bottom position, the Split Panel is simply a direct child 
-of the Tools component flex container and should consume 100% of the 
-parent height.
+When the Split Panel is in the bottom position it was share the same row 
+as the content area. This row is defined as 1 fractional unit which will 
+consume the remaining vertical space in the grid after the notifications 
+and breadcrumbs.
 */
 section.split-panel-bottom {
+  /*
+  The align self property will position the split panel at the bottom of the grid row.
+  This could be off the viewport if the content area has enough content to be scrollable.
+  */
+  align-self: end;
   bottom: var(#{custom-props.$footerHeight});
   display: none;
   grid-column: 1 / 6;
+  grid-row: 5;
   height: auto;
+  /* 
+  The position sticky will work in conjunction with the align self: end; property.
+  If the grid row scrolls beyond the viewport, the sticky bottom position 
+  will lift it up above the footer so it is always visible.
+  */
   position: sticky;
   z-index: 851;
 

package/lib/internal/scss/attribute-editor/styles.scss

@@ -37,7 +37,7 @@
   /* used in test-utils */
 }
 
-.button-container {
+.button-container-haslabel {
   // We only support vertical alignment of the remove button for labels with exactly one line.
   // The value is calculated as follows:
   // padding-top = awsui-form-field-controls: 4px +
@@ -45,6 +45,10 @@
   padding-top: calc(#{awsui.$space-xxs} + #{awsui.$font-body-m-line-height});
 }
 
+.button-container-nolabel {
+  padding-top: #{awsui.$space-xxs};
+}
+
 .divider {
   border-bottom: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 }

package/lib/internal/scss/breadcrumb-group/item/styles.scss

@@ -36,7 +36,6 @@
       font-weight: styles.$font-weight-bold;
       text-decoration: none;
       cursor: default;
-      pointer-events: none;
     }
   }
 }
@@ -50,3 +49,10 @@
     display: block;
   }
 }
+.virtual-item {
+  @include styles.awsui-util-hide;
+  visibility: hidden;
+}
+.item-popover {
+  /* used in tests */
+}

package/lib/internal/scss/date-range-picker/styles.scss

@@ -38,10 +38,6 @@ $calendar-header-color: awsui.$color-text-body-default;
 }
 
 .calendar {
-  display: block;
-  width: 100%;
-  margin-bottom: awsui.$space-scaled-s;
-
   &-header {
     display: flex;
     justify-content: space-between;

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss

@@ -1,28 +1,29 @@
 
-    $offsetTop: --awsui-offset-top-f9jj7p;
-$offsetTopWithNotifications: --awsui-offset-top-with-notifications-f9jj7p;
-$contentGapLeft: --awsui-content-gap-left-f9jj7p;
-$contentGapRight: --awsui-content-gap-right-f9jj7p;
-$contentHeight: --awsui-content-height-f9jj7p;
-$defaultMaxContentWidth: --awsui-default-max-content-width-f9jj7p;
-$defaultMinContentWidth: --awsui-default-min-content-width-f9jj7p;
-$footerHeight: --awsui-footer-height-f9jj7p;
-$headerHeight: --awsui-header-height-f9jj7p;
-$layoutWidth: --awsui-layout-width-f9jj7p;
-$mainOffsetLeft: --awsui-main-offset-left-f9jj7p;
-$maxContentWidth: --awsui-max-content-width-f9jj7p;
-$minContentWidth: --awsui-min-content-width-f9jj7p;
-$notificationsHeight: --awsui-notifications-height-f9jj7p;
-$overlapHeight: --awsui-overlap-height-f9jj7p;
-$navigationWidth: --awsui-navigation-width-f9jj7p;
-$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-f9jj7p;
-$splitPanelReportedSize: --awsui-split-panel-reported-size-f9jj7p;
-$splitPanelMinWidth: --awsui-split-panel-min-width-f9jj7p;
-$splitPanelMaxWidth: --awsui-split-panel-max-width-f9jj7p;
-$toolsMaxWidth: --awsui-tools-max-width-f9jj7p;
-$toolsWidth: --awsui-tools-width-f9jj7p;
-$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-f9jj7p;
-$contentScrollMargin: --awsui-content-scroll-margin-f9jj7p;
-$flashbarStackDepth: --awsui-flashbar-stack-depth-f9jj7p;
-$flashbarStackIndex: --awsui-flashbar-stack-index-f9jj7p;
+    $offsetTop: --awsui-offset-top-5mks97;
+$offsetTopWithNotifications: --awsui-offset-top-with-notifications-5mks97;
+$contentGapLeft: --awsui-content-gap-left-5mks97;
+$contentGapRight: --awsui-content-gap-right-5mks97;
+$contentHeight: --awsui-content-height-5mks97;
+$defaultMaxContentWidth: --awsui-default-max-content-width-5mks97;
+$defaultMinContentWidth: --awsui-default-min-content-width-5mks97;
+$footerHeight: --awsui-footer-height-5mks97;
+$headerHeight: --awsui-header-height-5mks97;
+$layoutWidth: --awsui-layout-width-5mks97;
+$mainOffsetLeft: --awsui-main-offset-left-5mks97;
+$maxContentWidth: --awsui-max-content-width-5mks97;
+$minContentWidth: --awsui-min-content-width-5mks97;
+$notificationsHeight: --awsui-notifications-height-5mks97;
+$overlapHeight: --awsui-overlap-height-5mks97;
+$navigationWidth: --awsui-navigation-width-5mks97;
+$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-5mks97;
+$splitPanelReportedSize: --awsui-split-panel-reported-size-5mks97;
+$splitPanelHeight: --awsui-split-panel-height-5mks97;
+$splitPanelMinWidth: --awsui-split-panel-min-width-5mks97;
+$splitPanelMaxWidth: --awsui-split-panel-max-width-5mks97;
+$toolsMaxWidth: --awsui-tools-max-width-5mks97;
+$toolsWidth: --awsui-tools-width-5mks97;
+$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-5mks97;
+$contentScrollMargin: --awsui-content-scroll-margin-5mks97;
+$flashbarStackDepth: --awsui-flashbar-stack-depth-5mks97;
+$flashbarStackIndex: --awsui-flashbar-stack-index-5mks97;
     

package/lib/internal/scss/table/styles.scss

@@ -61,8 +61,6 @@
   padding-top: awsui.$space-table-content-top;
   padding-bottom: awsui.$space-table-content-bottom;
   overflow-x: auto;
-  border-top-right-radius: awsui.$border-radius-container;
-  border-top-left-radius: awsui.$border-radius-container;
   &.variant-stacked,
   &.variant-container {
     & > .table {
@@ -79,6 +77,10 @@
   &.has-footer {
     padding-bottom: 0px;
   }
+  &:not(.has-header) {
+    border-top-right-radius: awsui.$border-radius-container;
+    border-top-left-radius: awsui.$border-radius-container;
+  }
 
   @include focus-visible.when-visible {
     @include styles.container-focus();

package/lib/internal/scss/tabs/styles.scss

@@ -5,6 +5,7 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
+@use '../internal/hooks/focus-visible' as focus-visible;
 
 @import './tab-header-bar';
 
@@ -18,22 +19,25 @@
   width: 100%;
 }
 
-.tabs-content-wrapper {
-  &.with-paddings {
-    padding: awsui.$space-scaled-m 0;
-  }
+.tabs-content {
+  display: none;
 }
 
-.tabs-container-content-wrapper {
-  &.with-paddings {
-    padding-top: awsui.$space-tabs-content-top;
+.tabs-content-active {
+  display: block;
+  @include focus-visible.when-visible {
+    @include styles.container-focus();
   }
 }
 
-.tabs-content {
-  display: none;
+.tabs-content-wrapper {
+  &.with-paddings > .tabs-content {
+    padding: awsui.$space-scaled-m 0;
+  }
 }
 
-.tabs-content-active {
-  display: block;
+.tabs-container-content-wrapper {
+  &.with-paddings > .tabs-content {
+    padding: awsui.$space-tabs-content-top awsui.$space-container-horizontal awsui.$space-scaled-l;
+  }
 }

package/lib/internal/scss/tabs/tab-header-bar.scss

@@ -141,6 +141,7 @@ $label-horizontal-spacing: awsui.$space-l;
 .tabs-tab-disabled {
   &,
   &:hover {
+    pointer-events: none;
     cursor: default;
     color: awsui.$color-text-interactive-disabled;
     font-weight: awsui.$font-tabs-disabled-weight;

package/lib/internal/template/annotation-context/annotation/annotation-popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"annotation-popover.d.ts","sourceRoot":"","sources":["../../../../src/annotation-context/annotation/annotation-popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAQzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAKvD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IAErC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAE9B,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,OAAO,CAAC;IAC/B,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAElC,kBAAkB,EAAE,MAAM,CAAC;IAE3B,eAAe,EAAE,MAAM,CAAC;IAExB,gBAAgB,EAAE,OAAO,CAAC;IAE1B,SAAS,EAAE,MAAM,IAAI,CAAC;IAEtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEvC,WAAW,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;CACpD;AASD,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,OAAO,EACP,KAAK,EAEL,SAAiB,EAEjB,kBAAkB,EAElB,eAAe,EAEf,kBAAkB,EAClB,gBAAgB,EAEhB,SAAS,EAET,iBAAiB,EACjB,iBAAiB,EAEjB,QAAQ,EAER,QAAQ,EAER,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,GACZ,EAAE,sBAAsB,eAsFxB"}
+{"version":3,"file":"annotation-popover.d.ts","sourceRoot":"","sources":["../../../../src/annotation-context/annotation/annotation-popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAQzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAOvD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IAErC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAE9B,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,OAAO,CAAC;IAC/B,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAElC,kBAAkB,EAAE,MAAM,CAAC;IAE3B,eAAe,EAAE,MAAM,CAAC;IAExB,gBAAgB,EAAE,OAAO,CAAC;IAE1B,SAAS,EAAE,MAAM,IAAI,CAAC;IAEtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEvC,WAAW,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;CACpD;AASD,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,OAAO,EACP,KAAK,EAEL,SAAiB,EAEjB,kBAAkB,EAElB,eAAe,EAEf,kBAAkB,EAClB,gBAAgB,EAEhB,SAAS,EAET,iBAAiB,EACjB,iBAAiB,EAEjB,QAAQ,EAER,QAAQ,EAER,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,GACZ,EAAE,sBAAsB,eAuGxB"}

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

@@ -10,6 +10,8 @@ import PopoverContainer from '../../popover/container';
 import PopoverBody from '../../popover/body';
 import InternalAlert from '../../alert/internal';
 import { scrollElementIntoView } from '../../internal/utils/scrollable-containers';
+import { useUniqueId } from '../../internal/hooks/use-unique-id/index.js';
+import { joinStrings } from '../../internal/utils/strings/join-strings.js';
 var arrow = function (position) { return (React.createElement("div", { className: clsx(styles.arrow, styles["arrow-position-".concat(position)]) },
     React.createElement("div", { className: styles['arrow-outer'] }),
     React.createElement("div", { className: styles['arrow-inner'] }))); };
@@ -19,8 +21,12 @@ export function AnnotationPopover(_a) {
         var _a;
         scrollElementIntoView((_a = trackRef.current) !== null && _a !== void 0 ? _a : undefined);
     }, [trackRef]);
+    var popoverHeaderId = useUniqueId('poppver-header-');
+    var stepCounterId = useUniqueId('step-counter-');
     return (React.createElement(PopoverContainer, { size: "medium", fixedWidth: false, position: direction, trackRef: trackRef, trackKey: taskLocalStepIndex, variant: "annotation", arrow: arrow, zIndex: 1000 },
-        React.createElement(PopoverBody, { dismissButton: true, dismissAriaLabel: i18nStrings.labelDismissAnnotation, header: React.createElement(InternalBox, { color: "text-body-secondary", fontSize: "body-s", margin: { top: 'xxxs' }, className: styles.header }, title), onDismiss: onDismiss, className: styles.annotation, variant: "annotation", overflowVisible: "content" },
+        React.createElement(PopoverBody, { dismissButton: true, dismissAriaLabel: i18nStrings.labelDismissAnnotation, header: React.createElement(InternalBox, { id: popoverHeaderId, color: "text-body-secondary", fontSize: "body-s", margin: { top: 'xxxs' }, className: styles.header }, title), onDismiss: onDismiss, className: styles.annotation, variant: "annotation", overflowVisible: "content", 
+            // create new dialog to have the native dialog behavior of the screen readers
+            key: taskLocalStepIndex, ariaLabelledby: joinStrings(popoverHeaderId, stepCounterId) },
             React.createElement(InternalSpaceBetween, { size: "s" },
                 React.createElement("div", { className: styles.description },
                     React.createElement(InternalBox, { className: styles.content }, content)),
@@ -29,7 +35,7 @@ export function AnnotationPopover(_a) {
                     React.createElement("div", { className: styles.divider }),
                     React.createElement("div", { className: styles.actionBar },
                         React.createElement("div", { className: styles.stepCounter },
-                            React.createElement(InternalBox, { className: styles['step-counter-content'], color: "text-body-secondary", fontSize: "body-s" }, i18nStrings.stepCounterText(taskLocalStepIndex !== null && taskLocalStepIndex !== void 0 ? taskLocalStepIndex : 0, totalLocalSteps !== null && totalLocalSteps !== void 0 ? totalLocalSteps : 0))),
+                            React.createElement(InternalBox, { id: stepCounterId, className: styles['step-counter-content'], color: "text-body-secondary", fontSize: "body-s" }, i18nStrings.stepCounterText(taskLocalStepIndex !== null && taskLocalStepIndex !== void 0 ? taskLocalStepIndex : 0, totalLocalSteps !== null && totalLocalSteps !== void 0 ? totalLocalSteps : 0))),
                         React.createElement(InternalSpaceBetween, { size: "xs", direction: "horizontal" },
                             showPreviousButton && (React.createElement(InternalButton, { variant: "link", onClick: onPreviousButtonClick, disabled: !previousButtonEnabled, formAction: "none", ariaLabel: i18nStrings.previousButtonText, className: styles['previous-button'] }, i18nStrings.previousButtonText)),
                             showFinishButton ? (React.createElement(InternalButton, { onClick: onFinish, formAction: "none", ariaLabel: i18nStrings.finishButtonText, className: styles['finish-button'] }, i18nStrings.finishButtonText)) : (React.createElement(InternalButton, { onClick: onNextButtonClick, disabled: !nextButtonEnabled, formAction: "none", ariaLabel: i18nStrings.nextButtonText, className: styles['next-button'] }, i18nStrings.nextButtonText)))))))));

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

@@ -1 +1 @@
-{"version":3,"file":"annotation-popover.js","sourceRoot":"","sources":["../../../../src/annotation-context/annotation/annotation-popover.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,oBAAoB,MAAM,8BAA8B,CAAC;AAChE,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AACvD,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAG7C,OAAO,aAAa,MAAM,sBAAsB,CAAC;AAEjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,4CAA4C,CAAC;AA+BnF,IAAM,KAAK,GAAG,UAAC,QAAiC,IAAK,OAAA,CACnD,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,yBAAkB,QAAQ,CAAE,CAAC,CAAC;IACtE,6BAAK,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,GAAI;IACzC,6BAAK,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,GAAI,CACrC,CACP,EALoD,CAKpD,CAAC;AAEF,MAAM,UAAU,iBAAiB,CAAC,EA0BT;QAzBvB,KAAK,WAAA,EACL,OAAO,aAAA,EACP,KAAK,WAAA,EAEL,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EAEjB,kBAAkB,wBAAA,EAElB,eAAe,qBAAA,EAEf,kBAAkB,wBAAA,EAClB,gBAAgB,sBAAA,EAEhB,SAAS,eAAA,EAET,iBAAiB,uBAAA,EACjB,iBAAiB,uBAAA,EAEjB,QAAQ,cAAA,EAER,QAAQ,cAAA,EAER,qBAAqB,2BAAA,EACrB,qBAAqB,2BAAA,EACrB,WAAW,iBAAA;IAEX,SAAS,CAAC;;QACR,qBAAqB,CAAC,MAAA,QAAQ,CAAC,OAAO,mCAAI,SAAS,CAAC,CAAC;IACvD,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,oBAAC,gBAAgB,IACf,IAAI,EAAC,QAAQ,EACb,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,kBAAkB,EAC5B,OAAO,EAAC,YAAY,EACpB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,IAAI;QAEZ,oBAAC,WAAW,IACV,aAAa,EAAE,IAAI,EACnB,gBAAgB,EAAE,WAAW,CAAC,sBAAsB,EACpD,MAAM,EACJ,oBAAC,WAAW,IAAC,KAAK,EAAC,qBAAqB,EAAC,QAAQ,EAAC,QAAQ,EAAC,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,IACzG,KAAK,CACM,EAEhB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,OAAO,EAAC,YAAY,EACpB,eAAe,EAAC,SAAS;YAEzB,oBAAC,oBAAoB,IAAC,IAAI,EAAC,GAAG;gBAC5B,6BAAK,SAAS,EAAE,MAAM,CAAC,WAAW;oBAChC,oBAAC,WAAW,IAAC,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAe,CAC3D;gBAEL,KAAK,IAAI,oBAAC,aAAa,IAAC,IAAI,EAAC,SAAS,IAAE,KAAK,CAAiB;gBAE/D,oBAAC,oBAAoB,IAAC,IAAI,EAAC,GAAG;oBAC5B,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI;oBAElC,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS;wBAC9B,6BAAK,SAAS,EAAE,MAAM,CAAC,WAAW;4BAChC,oBAAC,WAAW,IAAC,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,EAAE,KAAK,EAAC,qBAAqB,EAAC,QAAQ,EAAC,QAAQ,IAClG,WAAW,CAAC,eAAe,CAAC,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,CAAC,EAAE,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,CAAC,CAAC,CAC/D,CACV;wBACN,oBAAC,oBAAoB,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,YAAY;4BACnD,kBAAkB,IAAI,CACrB,oBAAC,cAAc,IACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,qBAAqB,EAC9B,QAAQ,EAAE,CAAC,qBAAqB,EAChC,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,WAAW,CAAC,kBAAkB,EACzC,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,IAEnC,WAAW,CAAC,kBAAkB,CAChB,CAClB;4BAEA,gBAAgB,CAAC,CAAC,CAAC,CAClB,oBAAC,cAAc,IACb,OAAO,EAAE,QAAQ,EACjB,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,WAAW,CAAC,gBAAgB,EACvC,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,IAEjC,WAAW,CAAC,gBAAgB,CACd,CAClB,CAAC,CAAC,CAAC,CACF,oBAAC,cAAc,IACb,OAAO,EAAE,iBAAiB,EAC1B,QAAQ,EAAE,CAAC,iBAAiB,EAC5B,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,WAAW,CAAC,cAAc,EACrC,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,IAE/B,WAAW,CAAC,cAAc,CACZ,CAClB,CACoB,CACnB,CACe,CACF,CACX,CACG,CACpB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport InternalBox from '../../box/internal';\nimport { InternalButton } from '../../button/internal';\nimport InternalSpaceBetween from '../../space-between/internal';\nimport PopoverContainer from '../../popover/container';\nimport PopoverBody from '../../popover/body';\nimport { HotspotProps } from '../../hotspot/interfaces';\nimport { AnnotationContextProps } from '../interfaces';\nimport InternalAlert from '../../alert/internal';\nimport { InternalPosition } from '../../popover/interfaces';\nimport { scrollElementIntoView } from '../../internal/utils/scrollable-containers';\n\nexport interface AnnotationPopoverProps {\n  title: string;\n  content: React.ReactNode;\n  alert: React.ReactNode;\n\n  direction: HotspotProps['direction'];\n\n  nextButtonEnabled: boolean;\n  onNextButtonClick: () => void;\n\n  onFinish: () => void;\n\n  showPreviousButton: boolean;\n  previousButtonEnabled: boolean;\n  onPreviousButtonClick: () => void;\n\n  taskLocalStepIndex: number;\n\n  totalLocalSteps: number;\n\n  showFinishButton: boolean;\n\n  onDismiss: () => void;\n\n  trackRef: React.RefObject<HTMLElement>;\n\n  i18nStrings: AnnotationContextProps['i18nStrings'];\n}\n\nconst arrow = (position: InternalPosition | null) => (\n  <div className={clsx(styles.arrow, styles[`arrow-position-${position}`])}>\n    <div className={styles['arrow-outer']} />\n    <div className={styles['arrow-inner']} />\n  </div>\n);\n\nexport function AnnotationPopover({\n  title,\n  content,\n  alert,\n\n  direction = 'top',\n\n  taskLocalStepIndex,\n\n  totalLocalSteps,\n\n  showPreviousButton,\n  showFinishButton,\n\n  onDismiss,\n\n  nextButtonEnabled,\n  onNextButtonClick,\n\n  onFinish,\n\n  trackRef,\n\n  previousButtonEnabled,\n  onPreviousButtonClick,\n  i18nStrings,\n}: AnnotationPopoverProps) {\n  useEffect(() => {\n    scrollElementIntoView(trackRef.current ?? undefined);\n  }, [trackRef]);\n\n  return (\n    <PopoverContainer\n      size=\"medium\"\n      fixedWidth={false}\n      position={direction}\n      trackRef={trackRef}\n      trackKey={taskLocalStepIndex}\n      variant=\"annotation\"\n      arrow={arrow}\n      zIndex={1000}\n    >\n      <PopoverBody\n        dismissButton={true}\n        dismissAriaLabel={i18nStrings.labelDismissAnnotation}\n        header={\n          <InternalBox color=\"text-body-secondary\" fontSize=\"body-s\" margin={{ top: 'xxxs' }} className={styles.header}>\n            {title}\n          </InternalBox>\n        }\n        onDismiss={onDismiss}\n        className={styles.annotation}\n        variant=\"annotation\"\n        overflowVisible=\"content\"\n      >\n        <InternalSpaceBetween size=\"s\">\n          <div className={styles.description}>\n            <InternalBox className={styles.content}>{content}</InternalBox>\n          </div>\n\n          {alert && <InternalAlert type=\"warning\">{alert}</InternalAlert>}\n\n          <InternalSpaceBetween size=\"s\">\n            <div className={styles.divider} />\n\n            <div className={styles.actionBar}>\n              <div className={styles.stepCounter}>\n                <InternalBox className={styles['step-counter-content']} color=\"text-body-secondary\" fontSize=\"body-s\">\n                  {i18nStrings.stepCounterText(taskLocalStepIndex ?? 0, totalLocalSteps ?? 0)}\n                </InternalBox>\n              </div>\n              <InternalSpaceBetween size=\"xs\" direction=\"horizontal\">\n                {showPreviousButton && (\n                  <InternalButton\n                    variant=\"link\"\n                    onClick={onPreviousButtonClick}\n                    disabled={!previousButtonEnabled}\n                    formAction=\"none\"\n                    ariaLabel={i18nStrings.previousButtonText}\n                    className={styles['previous-button']}\n                  >\n                    {i18nStrings.previousButtonText}\n                  </InternalButton>\n                )}\n\n                {showFinishButton ? (\n                  <InternalButton\n                    onClick={onFinish}\n                    formAction=\"none\"\n                    ariaLabel={i18nStrings.finishButtonText}\n                    className={styles['finish-button']}\n                  >\n                    {i18nStrings.finishButtonText}\n                  </InternalButton>\n                ) : (\n                  <InternalButton\n                    onClick={onNextButtonClick}\n                    disabled={!nextButtonEnabled}\n                    formAction=\"none\"\n                    ariaLabel={i18nStrings.nextButtonText}\n                    className={styles['next-button']}\n                  >\n                    {i18nStrings.nextButtonText}\n                  </InternalButton>\n                )}\n              </InternalSpaceBetween>\n            </div>\n          </InternalSpaceBetween>\n        </InternalSpaceBetween>\n      </PopoverBody>\n    </PopoverContainer>\n  );\n}\n"]}
+{"version":3,"file":"annotation-popover.js","sourceRoot":"","sources":["../../../../src/annotation-context/annotation/annotation-popover.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 } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport InternalBox from '../../box/internal';\nimport { InternalButton } from '../../button/internal';\nimport InternalSpaceBetween from '../../space-between/internal';\nimport PopoverContainer from '../../popover/container';\nimport PopoverBody from '../../popover/body';\nimport { HotspotProps } from '../../hotspot/interfaces';\nimport { AnnotationContextProps } from '../interfaces';\nimport InternalAlert from '../../alert/internal';\nimport { InternalPosition } from '../../popover/interfaces';\nimport { scrollElementIntoView } from '../../internal/utils/scrollable-containers';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id/index.js';\nimport { joinStrings } from '../../internal/utils/strings/join-strings.js';\n\nexport interface AnnotationPopoverProps {\n  title: string;\n  content: React.ReactNode;\n  alert: React.ReactNode;\n\n  direction: HotspotProps['direction'];\n\n  nextButtonEnabled: boolean;\n  onNextButtonClick: () => void;\n\n  onFinish: () => void;\n\n  showPreviousButton: boolean;\n  previousButtonEnabled: boolean;\n  onPreviousButtonClick: () => void;\n\n  taskLocalStepIndex: number;\n\n  totalLocalSteps: number;\n\n  showFinishButton: boolean;\n\n  onDismiss: () => void;\n\n  trackRef: React.RefObject<HTMLElement>;\n\n  i18nStrings: AnnotationContextProps['i18nStrings'];\n}\n\nconst arrow = (position: InternalPosition | null) => (\n  <div className={clsx(styles.arrow, styles[`arrow-position-${position}`])}>\n    <div className={styles['arrow-outer']} />\n    <div className={styles['arrow-inner']} />\n  </div>\n);\n\nexport function AnnotationPopover({\n  title,\n  content,\n  alert,\n\n  direction = 'top',\n\n  taskLocalStepIndex,\n\n  totalLocalSteps,\n\n  showPreviousButton,\n  showFinishButton,\n\n  onDismiss,\n\n  nextButtonEnabled,\n  onNextButtonClick,\n\n  onFinish,\n\n  trackRef,\n\n  previousButtonEnabled,\n  onPreviousButtonClick,\n  i18nStrings,\n}: AnnotationPopoverProps) {\n  useEffect(() => {\n    scrollElementIntoView(trackRef.current ?? undefined);\n  }, [trackRef]);\n\n  const popoverHeaderId = useUniqueId('poppver-header-');\n  const stepCounterId = useUniqueId('step-counter-');\n\n  return (\n    <PopoverContainer\n      size=\"medium\"\n      fixedWidth={false}\n      position={direction}\n      trackRef={trackRef}\n      trackKey={taskLocalStepIndex}\n      variant=\"annotation\"\n      arrow={arrow}\n      zIndex={1000}\n    >\n      <PopoverBody\n        dismissButton={true}\n        dismissAriaLabel={i18nStrings.labelDismissAnnotation}\n        header={\n          <InternalBox\n            id={popoverHeaderId}\n            color=\"text-body-secondary\"\n            fontSize=\"body-s\"\n            margin={{ top: 'xxxs' }}\n            className={styles.header}\n          >\n            {title}\n          </InternalBox>\n        }\n        onDismiss={onDismiss}\n        className={styles.annotation}\n        variant=\"annotation\"\n        overflowVisible=\"content\"\n        // create new dialog to have the native dialog behavior of the screen readers\n        key={taskLocalStepIndex}\n        ariaLabelledby={joinStrings(popoverHeaderId, stepCounterId)}\n      >\n        <InternalSpaceBetween size=\"s\">\n          <div className={styles.description}>\n            <InternalBox className={styles.content}>{content}</InternalBox>\n          </div>\n\n          {alert && <InternalAlert type=\"warning\">{alert}</InternalAlert>}\n\n          <InternalSpaceBetween size=\"s\">\n            <div className={styles.divider} />\n\n            <div className={styles.actionBar}>\n              <div className={styles.stepCounter}>\n                <InternalBox\n                  id={stepCounterId}\n                  className={styles['step-counter-content']}\n                  color=\"text-body-secondary\"\n                  fontSize=\"body-s\"\n                >\n                  {i18nStrings.stepCounterText(taskLocalStepIndex ?? 0, totalLocalSteps ?? 0)}\n                </InternalBox>\n              </div>\n              <InternalSpaceBetween size=\"xs\" direction=\"horizontal\">\n                {showPreviousButton && (\n                  <InternalButton\n                    variant=\"link\"\n                    onClick={onPreviousButtonClick}\n                    disabled={!previousButtonEnabled}\n                    formAction=\"none\"\n                    ariaLabel={i18nStrings.previousButtonText}\n                    className={styles['previous-button']}\n                  >\n                    {i18nStrings.previousButtonText}\n                  </InternalButton>\n                )}\n\n                {showFinishButton ? (\n                  <InternalButton\n                    onClick={onFinish}\n                    formAction=\"none\"\n                    ariaLabel={i18nStrings.finishButtonText}\n                    className={styles['finish-button']}\n                  >\n                    {i18nStrings.finishButtonText}\n                  </InternalButton>\n                ) : (\n                  <InternalButton\n                    onClick={onNextButtonClick}\n                    disabled={!nextButtonEnabled}\n                    formAction=\"none\"\n                    ariaLabel={i18nStrings.nextButtonText}\n                    className={styles['next-button']}\n                  >\n                    {i18nStrings.nextButtonText}\n                  </InternalButton>\n                )}\n              </InternalSpaceBetween>\n            </div>\n          </InternalSpaceBetween>\n        </InternalSpaceBetween>\n      </PopoverBody>\n    </PopoverContainer>\n  );\n}\n"]}

package/lib/internal/template/annotation-context/annotation/annotation-trigger.d.ts

@@ -4,6 +4,8 @@ export interface AnnotationTriggerProps {
     open: boolean;
     onClick: () => void;
     i18nStrings: AnnotationContextProps['i18nStrings'];
+    taskLocalStepIndex: number;
+    totalLocalSteps: number;
 }
 declare const _default: React.ForwardRefExoticComponent<AnnotationTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/lib/internal/template/annotation-context/annotation/annotation-trigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"annotation-trigger.d.ts","sourceRoot":"","sources":["../../../../src/annotation-context/annotation/annotation-trigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,OAAO,CAAC;IAEd,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,WAAW,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;CACpD;;AAED,wBA0BG"}
+{"version":3,"file":"annotation-trigger.d.ts","sourceRoot":"","sources":["../../../../src/annotation-context/annotation/annotation-trigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,OAAO,CAAC;IAEd,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,WAAW,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IACnD,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;CACzB;;AAED,wBA0BG"}

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

@@ -6,13 +6,13 @@ import styles from './styles.css.js';
 import { AnnotationIcon } from './annotation-icon';
 import useFocusVisible from '../../internal/hooks/focus-visible/index.js';
 export default React.forwardRef(function AnnotationTrigger(_a, ref) {
-    var open = _a.open, onClickHandler = _a.onClick, i18nStrings = _a.i18nStrings;
+    var open = _a.open, onClickHandler = _a.onClick, i18nStrings = _a.i18nStrings, taskLocalStepIndex = _a.taskLocalStepIndex, totalLocalSteps = _a.totalLocalSteps;
     var focusVisible = useFocusVisible();
     var onClick = useCallback(function (event) {
         event.preventDefault();
         onClickHandler();
     }, [onClickHandler]);
-    return (React.createElement("button", __assign({ ref: ref, className: styles.hotspot, "aria-haspopup": "dialog", "aria-label": i18nStrings.labelHotspot(open), onClick: onClick }, focusVisible),
+    return (React.createElement("button", __assign({ ref: ref, className: styles.hotspot, "aria-haspopup": "dialog", "aria-label": i18nStrings.labelHotspot(open, taskLocalStepIndex !== null && taskLocalStepIndex !== void 0 ? taskLocalStepIndex : 0, totalLocalSteps !== null && totalLocalSteps !== void 0 ? totalLocalSteps : 0), onClick: onClick }, focusVisible),
         React.createElement(AnnotationIcon, { open: open })));
 });
 //# sourceMappingURL=annotation-trigger.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"annotation-trigger.js","sourceRoot":"","sources":["../../../../src/annotation-context/annotation/annotation-trigger.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,eAAe,MAAM,6CAA6C,CAAC;AAW1E,eAAe,KAAK,CAAC,UAAU,CAA4C,SAAS,iBAAiB,CACnG,EAAsE,EACtE,GAAG;QADD,IAAI,UAAA,EAAW,cAAc,aAAA,EAAE,WAAW,iBAAA;IAG5C,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,IAAM,OAAO,GAAG,WAAW,CACzB,UAAC,KAAuB;QACtB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,cAAc,EAAE,CAAC;IACnB,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,OAAO,CACL,yCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,MAAM,CAAC,OAAO,mBACX,QAAQ,gBACV,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,EAC1C,OAAO,EAAE,OAAO,IACZ,YAAY;QAEhB,oBAAC,cAAc,IAAC,IAAI,EAAE,IAAI,GAAI,CACvB,CACV,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback } from 'react';\nimport styles from './styles.css.js';\nimport { AnnotationIcon } from './annotation-icon';\nimport useFocusVisible from '../../internal/hooks/focus-visible/index.js';\nimport { AnnotationContextProps } from '../interfaces';\n\nexport interface AnnotationTriggerProps {\n  open: boolean;\n\n  onClick: () => void;\n\n  i18nStrings: AnnotationContextProps['i18nStrings'];\n}\n\nexport default React.forwardRef<HTMLButtonElement, AnnotationTriggerProps>(function AnnotationTrigger(\n  { open, onClick: onClickHandler, i18nStrings }: AnnotationTriggerProps,\n  ref\n) {\n  const focusVisible = useFocusVisible();\n\n  const onClick = useCallback(\n    (event: React.MouseEvent) => {\n      event.preventDefault();\n      onClickHandler();\n    },\n    [onClickHandler]\n  );\n\n  return (\n    <button\n      ref={ref}\n      className={styles.hotspot}\n      aria-haspopup=\"dialog\"\n      aria-label={i18nStrings.labelHotspot(open)}\n      onClick={onClick}\n      {...focusVisible}\n    >\n      <AnnotationIcon open={open} />\n    </button>\n  );\n});\n"]}
+{"version":3,"file":"annotation-trigger.js","sourceRoot":"","sources":["../../../../src/annotation-context/annotation/annotation-trigger.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,eAAe,MAAM,6CAA6C,CAAC;AAa1E,eAAe,KAAK,CAAC,UAAU,CAA4C,SAAS,iBAAiB,CACnG,EAA2G,EAC3G,GAAG;QADD,IAAI,UAAA,EAAW,cAAc,aAAA,EAAE,WAAW,iBAAA,EAAE,kBAAkB,wBAAA,EAAE,eAAe,qBAAA;IAGjF,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,IAAM,OAAO,GAAG,WAAW,CACzB,UAAC,KAAuB;QACtB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,cAAc,EAAE,CAAC;IACnB,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,OAAO,CACL,yCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,MAAM,CAAC,OAAO,mBACX,QAAQ,gBACV,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,CAAC,EAAE,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,CAAC,CAAC,EACzF,OAAO,EAAE,OAAO,IACZ,YAAY;QAEhB,oBAAC,cAAc,IAAC,IAAI,EAAE,IAAI,GAAI,CACvB,CACV,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback } from 'react';\nimport styles from './styles.css.js';\nimport { AnnotationIcon } from './annotation-icon';\nimport useFocusVisible from '../../internal/hooks/focus-visible/index.js';\nimport { AnnotationContextProps } from '../interfaces';\n\nexport interface AnnotationTriggerProps {\n  open: boolean;\n\n  onClick: () => void;\n\n  i18nStrings: AnnotationContextProps['i18nStrings'];\n  taskLocalStepIndex: number;\n  totalLocalSteps: number;\n}\n\nexport default React.forwardRef<HTMLButtonElement, AnnotationTriggerProps>(function AnnotationTrigger(\n  { open, onClick: onClickHandler, i18nStrings, taskLocalStepIndex, totalLocalSteps }: AnnotationTriggerProps,\n  ref\n) {\n  const focusVisible = useFocusVisible();\n\n  const onClick = useCallback(\n    (event: React.MouseEvent) => {\n      event.preventDefault();\n      onClickHandler();\n    },\n    [onClickHandler]\n  );\n\n  return (\n    <button\n      ref={ref}\n      className={styles.hotspot}\n      aria-haspopup=\"dialog\"\n      aria-label={i18nStrings.labelHotspot(open, taskLocalStepIndex ?? 0, totalLocalSteps ?? 0)}\n      onClick={onClick}\n      {...focusVisible}\n    >\n      <AnnotationIcon open={open} />\n    </button>\n  );\n});\n"]}

package/lib/internal/template/annotation-context/annotation/closed-annotation.d.ts

@@ -4,6 +4,8 @@ export interface AnnotationProps {
     onOpen: (stepId: number) => void;
     i18nStrings: AnnotationContextProps['i18nStrings'];
     focusOnRender: boolean;
+    totalLocalSteps: number;
+    taskLocalStepIndex: number;
 }
-export declare function ClosedAnnotation({ globalStepIndex, onOpen, i18nStrings, focusOnRender }: AnnotationProps): JSX.Element;
+export declare function ClosedAnnotation({ globalStepIndex, onOpen, i18nStrings, focusOnRender, totalLocalSteps, taskLocalStepIndex, }: AnnotationProps): JSX.Element;
 //# sourceMappingURL=closed-annotation.d.ts.map

package/lib/internal/template/annotation-context/annotation/closed-annotation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"closed-annotation.d.ts","sourceRoot":"","sources":["../../../../src/annotation-context/annotation/closed-annotation.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAGvD,MAAM,WAAW,eAAe;IAC9B,eAAe,EAAE,MAAM,CAAC;IAExB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC,WAAW,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IAEnD,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,eAAe,EAAE,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,eAAe,eAaxG"}
+{"version":3,"file":"closed-annotation.d.ts","sourceRoot":"","sources":["../../../../src/annotation-context/annotation/closed-annotation.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAGvD,MAAM,WAAW,eAAe;IAC9B,eAAe,EAAE,MAAM,CAAC;IAExB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC,WAAW,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IAEnD,aAAa,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,eAAe,EACf,MAAM,EACN,WAAW,EACX,aAAa,EACb,eAAe,EACf,kBAAkB,GACnB,EAAE,eAAe,eAsBjB"}

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

@@ -3,7 +3,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import AnnotationTrigger from './annotation-trigger';
 export function ClosedAnnotation(_a) {
-    var globalStepIndex = _a.globalStepIndex, onOpen = _a.onOpen, i18nStrings = _a.i18nStrings, focusOnRender = _a.focusOnRender;
+    var globalStepIndex = _a.globalStepIndex, onOpen = _a.onOpen, i18nStrings = _a.i18nStrings, focusOnRender = _a.focusOnRender, totalLocalSteps = _a.totalLocalSteps, taskLocalStepIndex = _a.taskLocalStepIndex;
     var _b = useState(null), hotspotRef = _b[0], setHotspotRef = _b[1];
     var onClick = useCallback(function () {
         onOpen(globalStepIndex);
@@ -13,6 +13,6 @@ export function ClosedAnnotation(_a) {
             hotspotRef.focus();
         }
     }, [focusOnRender, hotspotRef]);
-    return React.createElement(AnnotationTrigger, { open: false, onClick: onClick, i18nStrings: i18nStrings, ref: setHotspotRef });
+    return (React.createElement(AnnotationTrigger, { open: false, onClick: onClick, i18nStrings: i18nStrings, ref: setHotspotRef, totalLocalSteps: totalLocalSteps, taskLocalStepIndex: taskLocalStepIndex }));
 }
 //# sourceMappingURL=closed-annotation.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"closed-annotation.js","sourceRoot":"","sources":["../../../../src/annotation-context/annotation/closed-annotation.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AAYrD,MAAM,UAAU,gBAAgB,CAAC,EAAwE;QAAtE,eAAe,qBAAA,EAAE,MAAM,YAAA,EAAE,WAAW,iBAAA,EAAE,aAAa,mBAAA;IAC9E,IAAA,KAA8B,QAAQ,CAA2B,IAAI,CAAC,EAArE,UAAU,QAAA,EAAE,aAAa,QAA4C,CAAC;IAC7E,IAAM,OAAO,GAAG,WAAW,CAAC;QAC1B,MAAM,CAAC,eAAe,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;IAE9B,SAAS,CAAC;QACR,IAAI,aAAa,IAAI,UAAU,EAAE;YAC/B,UAAU,CAAC,KAAK,EAAE,CAAC;SACpB;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC;IAEhC,OAAO,oBAAC,iBAAiB,IAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,EAAE,aAAa,GAAI,CAAC;AAC5G,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { AnnotationContextProps } from '../interfaces';\nimport AnnotationTrigger from './annotation-trigger';\n\nexport interface AnnotationProps {\n  globalStepIndex: number;\n\n  onOpen: (stepId: number) => void;\n\n  i18nStrings: AnnotationContextProps['i18nStrings'];\n\n  focusOnRender: boolean;\n}\n\nexport function ClosedAnnotation({ globalStepIndex, onOpen, i18nStrings, focusOnRender }: AnnotationProps) {\n  const [hotspotRef, setHotspotRef] = useState<HTMLButtonElement | null>(null);\n  const onClick = useCallback(() => {\n    onOpen(globalStepIndex);\n  }, [globalStepIndex, onOpen]);\n\n  useEffect(() => {\n    if (focusOnRender && hotspotRef) {\n      hotspotRef.focus();\n    }\n  }, [focusOnRender, hotspotRef]);\n\n  return <AnnotationTrigger open={false} onClick={onClick} i18nStrings={i18nStrings} ref={setHotspotRef} />;\n}\n"]}
+{"version":3,"file":"closed-annotation.js","sourceRoot":"","sources":["../../../../src/annotation-context/annotation/closed-annotation.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AAcrD,MAAM,UAAU,gBAAgB,CAAC,EAOf;QANhB,eAAe,qBAAA,EACf,MAAM,YAAA,EACN,WAAW,iBAAA,EACX,aAAa,mBAAA,EACb,eAAe,qBAAA,EACf,kBAAkB,wBAAA;IAEZ,IAAA,KAA8B,QAAQ,CAA2B,IAAI,CAAC,EAArE,UAAU,QAAA,EAAE,aAAa,QAA4C,CAAC;IAC7E,IAAM,OAAO,GAAG,WAAW,CAAC;QAC1B,MAAM,CAAC,eAAe,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;IAE9B,SAAS,CAAC;QACR,IAAI,aAAa,IAAI,UAAU,EAAE;YAC/B,UAAU,CAAC,KAAK,EAAE,CAAC;SACpB;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC;IAEhC,OAAO,CACL,oBAAC,iBAAiB,IAChB,IAAI,EAAE,KAAK,EACX,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,aAAa,EAClB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,GACtC,CACH,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, useState } from 'react';\nimport { AnnotationContextProps } from '../interfaces';\nimport AnnotationTrigger from './annotation-trigger';\n\nexport interface AnnotationProps {\n  globalStepIndex: number;\n\n  onOpen: (stepId: number) => void;\n\n  i18nStrings: AnnotationContextProps['i18nStrings'];\n\n  focusOnRender: boolean;\n  totalLocalSteps: number;\n  taskLocalStepIndex: number;\n}\n\nexport function ClosedAnnotation({\n  globalStepIndex,\n  onOpen,\n  i18nStrings,\n  focusOnRender,\n  totalLocalSteps,\n  taskLocalStepIndex,\n}: AnnotationProps) {\n  const [hotspotRef, setHotspotRef] = useState<HTMLButtonElement | null>(null);\n  const onClick = useCallback(() => {\n    onOpen(globalStepIndex);\n  }, [globalStepIndex, onOpen]);\n\n  useEffect(() => {\n    if (focusOnRender && hotspotRef) {\n      hotspotRef.focus();\n    }\n  }, [focusOnRender, hotspotRef]);\n\n  return (\n    <AnnotationTrigger\n      open={false}\n      onClick={onClick}\n      i18nStrings={i18nStrings}\n      ref={setHotspotRef}\n      totalLocalSteps={totalLocalSteps}\n      taskLocalStepIndex={taskLocalStepIndex}\n    />\n  );\n}\n"]}

package/lib/internal/template/annotation-context/annotation/open-annotation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"open-annotation.d.ts","sourceRoot":"","sources":["../../../../src/annotation-context/annotation/open-annotation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAIvD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IAErC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAE9B,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAElC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;IAE1B,kBAAkB,EAAE,MAAM,CAAC;IAE3B,eAAe,EAAE,MAAM,CAAC;IAExB,SAAS,EAAE,MAAM,IAAI,CAAC;IAEtB,WAAW,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;CACpD;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,OAAO,EACP,KAAK,EAEL,SAAS,EAET,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAElB,eAAe,EAEf,SAAS,EAET,iBAAiB,EACjB,iBAAiB,EAEjB,QAAQ,EAER,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,GACZ,EAAE,eAAe,eA2BjB"}
+{"version":3,"file":"open-annotation.d.ts","sourceRoot":"","sources":["../../../../src/annotation-context/annotation/open-annotation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAIvD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IAErC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAE9B,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAElC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;IAE1B,kBAAkB,EAAE,MAAM,CAAC;IAE3B,eAAe,EAAE,MAAM,CAAC;IAExB,SAAS,EAAE,MAAM,IAAI,CAAC;IAEtB,WAAW,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;CACpD;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,OAAO,EACP,KAAK,EAEL,SAAS,EAET,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAElB,eAAe,EAEf,SAAS,EAET,iBAAiB,EACjB,iBAAiB,EAEjB,QAAQ,EAER,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,GACZ,EAAE,eAAe,eAkCjB"}

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

@@ -7,7 +7,7 @@ export function OpenAnnotation(_a) {
     var title = _a.title, content = _a.content, alert = _a.alert, direction = _a.direction, showPreviousButton = _a.showPreviousButton, showFinishButton = _a.showFinishButton, taskLocalStepIndex = _a.taskLocalStepIndex, totalLocalSteps = _a.totalLocalSteps, onDismiss = _a.onDismiss, nextButtonEnabled = _a.nextButtonEnabled, onNextButtonClick = _a.onNextButtonClick, onFinish = _a.onFinish, previousButtonEnabled = _a.previousButtonEnabled, onPreviousButtonClick = _a.onPreviousButtonClick, i18nStrings = _a.i18nStrings;
     var trackRef = useRef(null);
     return (React.createElement(React.Fragment, null,
-        React.createElement(AnnotationTrigger, { open: true, onClick: onDismiss, i18nStrings: i18nStrings, ref: trackRef }),
+        React.createElement(AnnotationTrigger, { open: true, onClick: onDismiss, i18nStrings: i18nStrings, ref: trackRef, totalLocalSteps: totalLocalSteps, taskLocalStepIndex: taskLocalStepIndex }),
         React.createElement(AnnotationPopover, { trackRef: trackRef, previousButtonEnabled: previousButtonEnabled, showPreviousButton: showPreviousButton, showFinishButton: showFinishButton, totalLocalSteps: totalLocalSteps, i18nStrings: i18nStrings, nextButtonEnabled: nextButtonEnabled, onDismiss: onDismiss, onFinish: onFinish, onNextButtonClick: onNextButtonClick, onPreviousButtonClick: onPreviousButtonClick, taskLocalStepIndex: taskLocalStepIndex, direction: direction, title: title, content: content, alert: alert })));
 }
 //# sourceMappingURL=open-annotation.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"open-annotation.js","sourceRoot":"","sources":["../../../../src/annotation-context/annotation/open-annotation.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AA6BzD,MAAM,UAAU,cAAc,CAAC,EAuBb;QAtBhB,KAAK,WAAA,EACL,OAAO,aAAA,EACP,KAAK,WAAA,EAEL,SAAS,eAAA,EAET,kBAAkB,wBAAA,EAClB,gBAAgB,sBAAA,EAChB,kBAAkB,wBAAA,EAElB,eAAe,qBAAA,EAEf,SAAS,eAAA,EAET,iBAAiB,uBAAA,EACjB,iBAAiB,uBAAA,EAEjB,QAAQ,cAAA,EAER,qBAAqB,2BAAA,EACrB,qBAAqB,2BAAA,EACrB,WAAW,iBAAA;IAEX,IAAM,QAAQ,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAEjD,OAAO,CACL;QACE,oBAAC,iBAAiB,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,EAAE,QAAQ,GAAI;QAE9F,oBAAC,iBAAiB,IAChB,QAAQ,EAAE,QAAQ,EAClB,qBAAqB,EAAE,qBAAqB,EAC5C,kBAAkB,EAAE,kBAAkB,EACtC,gBAAgB,EAAE,gBAAgB,EAClC,eAAe,EAAE,eAAe,EAChC,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,iBAAiB,EAAE,iBAAiB,EACpC,qBAAqB,EAAE,qBAAqB,EAC5C,kBAAkB,EAAE,kBAAkB,EACtC,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,GACZ,CACD,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport { HotspotProps } from '../../hotspot/interfaces';\nimport { AnnotationContextProps } from '../interfaces';\nimport AnnotationTrigger from './annotation-trigger';\nimport { AnnotationPopover } from './annotation-popover';\n\nexport interface AnnotationProps {\n  title: string;\n  content: React.ReactNode;\n  alert?: React.ReactNode;\n\n  direction: HotspotProps['direction'];\n\n  nextButtonEnabled: boolean;\n  onNextButtonClick: () => void;\n\n  onFinish: () => void;\n\n  previousButtonEnabled: boolean;\n  onPreviousButtonClick: () => void;\n\n  showPreviousButton: boolean;\n  showFinishButton: boolean;\n\n  taskLocalStepIndex: number;\n\n  totalLocalSteps: number;\n\n  onDismiss: () => void;\n\n  i18nStrings: AnnotationContextProps['i18nStrings'];\n}\n\nexport function OpenAnnotation({\n  title,\n  content,\n  alert,\n\n  direction,\n\n  showPreviousButton,\n  showFinishButton,\n  taskLocalStepIndex,\n\n  totalLocalSteps,\n\n  onDismiss,\n\n  nextButtonEnabled,\n  onNextButtonClick,\n\n  onFinish,\n\n  previousButtonEnabled,\n  onPreviousButtonClick,\n  i18nStrings,\n}: AnnotationProps) {\n  const trackRef = useRef<HTMLButtonElement>(null);\n\n  return (\n    <>\n      <AnnotationTrigger open={true} onClick={onDismiss} i18nStrings={i18nStrings} ref={trackRef} />\n\n      <AnnotationPopover\n        trackRef={trackRef}\n        previousButtonEnabled={previousButtonEnabled}\n        showPreviousButton={showPreviousButton}\n        showFinishButton={showFinishButton}\n        totalLocalSteps={totalLocalSteps}\n        i18nStrings={i18nStrings}\n        nextButtonEnabled={nextButtonEnabled}\n        onDismiss={onDismiss}\n        onFinish={onFinish}\n        onNextButtonClick={onNextButtonClick}\n        onPreviousButtonClick={onPreviousButtonClick}\n        taskLocalStepIndex={taskLocalStepIndex}\n        direction={direction}\n        title={title}\n        content={content}\n        alert={alert}\n      />\n    </>\n  );\n}\n"]}
+{"version":3,"file":"open-annotation.js","sourceRoot":"","sources":["../../../../src/annotation-context/annotation/open-annotation.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AA6BzD,MAAM,UAAU,cAAc,CAAC,EAuBb;QAtBhB,KAAK,WAAA,EACL,OAAO,aAAA,EACP,KAAK,WAAA,EAEL,SAAS,eAAA,EAET,kBAAkB,wBAAA,EAClB,gBAAgB,sBAAA,EAChB,kBAAkB,wBAAA,EAElB,eAAe,qBAAA,EAEf,SAAS,eAAA,EAET,iBAAiB,uBAAA,EACjB,iBAAiB,uBAAA,EAEjB,QAAQ,cAAA,EAER,qBAAqB,2BAAA,EACrB,qBAAqB,2BAAA,EACrB,WAAW,iBAAA;IAEX,IAAM,QAAQ,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAEjD,OAAO,CACL;QACE,oBAAC,iBAAiB,IAChB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,SAAS,EAClB,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,QAAQ,EACb,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,GACtC;QAEF,oBAAC,iBAAiB,IAChB,QAAQ,EAAE,QAAQ,EAClB,qBAAqB,EAAE,qBAAqB,EAC5C,kBAAkB,EAAE,kBAAkB,EACtC,gBAAgB,EAAE,gBAAgB,EAClC,eAAe,EAAE,eAAe,EAChC,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,iBAAiB,EAAE,iBAAiB,EACpC,qBAAqB,EAAE,qBAAqB,EAC5C,kBAAkB,EAAE,kBAAkB,EACtC,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,GACZ,CACD,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport { HotspotProps } from '../../hotspot/interfaces';\nimport { AnnotationContextProps } from '../interfaces';\nimport AnnotationTrigger from './annotation-trigger';\nimport { AnnotationPopover } from './annotation-popover';\n\nexport interface AnnotationProps {\n  title: string;\n  content: React.ReactNode;\n  alert?: React.ReactNode;\n\n  direction: HotspotProps['direction'];\n\n  nextButtonEnabled: boolean;\n  onNextButtonClick: () => void;\n\n  onFinish: () => void;\n\n  previousButtonEnabled: boolean;\n  onPreviousButtonClick: () => void;\n\n  showPreviousButton: boolean;\n  showFinishButton: boolean;\n\n  taskLocalStepIndex: number;\n\n  totalLocalSteps: number;\n\n  onDismiss: () => void;\n\n  i18nStrings: AnnotationContextProps['i18nStrings'];\n}\n\nexport function OpenAnnotation({\n  title,\n  content,\n  alert,\n\n  direction,\n\n  showPreviousButton,\n  showFinishButton,\n  taskLocalStepIndex,\n\n  totalLocalSteps,\n\n  onDismiss,\n\n  nextButtonEnabled,\n  onNextButtonClick,\n\n  onFinish,\n\n  previousButtonEnabled,\n  onPreviousButtonClick,\n  i18nStrings,\n}: AnnotationProps) {\n  const trackRef = useRef<HTMLButtonElement>(null);\n\n  return (\n    <>\n      <AnnotationTrigger\n        open={true}\n        onClick={onDismiss}\n        i18nStrings={i18nStrings}\n        ref={trackRef}\n        totalLocalSteps={totalLocalSteps}\n        taskLocalStepIndex={taskLocalStepIndex}\n      />\n\n      <AnnotationPopover\n        trackRef={trackRef}\n        previousButtonEnabled={previousButtonEnabled}\n        showPreviousButton={showPreviousButton}\n        showFinishButton={showFinishButton}\n        totalLocalSteps={totalLocalSteps}\n        i18nStrings={i18nStrings}\n        nextButtonEnabled={nextButtonEnabled}\n        onDismiss={onDismiss}\n        onFinish={onFinish}\n        onNextButtonClick={onNextButtonClick}\n        onPreviousButtonClick={onPreviousButtonClick}\n        taskLocalStepIndex={taskLocalStepIndex}\n        direction={direction}\n        title={title}\n        content={content}\n        alert={alert}\n      />\n    </>\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_1nzqd_93",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_1nzqd_97",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_1nzqd_97",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1nzqd_128",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1nzqd_128",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1nzqd_131",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1nzqd_131",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1nzqd_134",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1nzqd_134",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1nzqd_137",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1nzqd_137",
-  "annotation": "awsui_annotation_1hpp3_1nzqd_145",
-  "next-button": "awsui_next-button_1hpp3_1nzqd_146",
-  "previous-button": "awsui_previous-button_1hpp3_1nzqd_147",
-  "finish-button": "awsui_finish-button_1hpp3_1nzqd_148",
-  "header": "awsui_header_1hpp3_1nzqd_149",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_1nzqd_150",
-  "content": "awsui_content_1hpp3_1nzqd_151",
-  "description": "awsui_description_1hpp3_1nzqd_155",
-  "actionBar": "awsui_actionBar_1hpp3_1nzqd_160",
-  "stepCounter": "awsui_stepCounter_1hpp3_1nzqd_167",
-  "divider": "awsui_divider_1hpp3_1nzqd_171",
-  "hotspot": "awsui_hotspot_1hpp3_1nzqd_175",
-  "icon": "awsui_icon_1hpp3_1nzqd_213"
+  "arrow": "awsui_arrow_1hpp3_1s9s9_93",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_1s9s9_97",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_1s9s9_97",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1s9s9_128",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1s9s9_128",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1s9s9_131",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1s9s9_131",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1s9s9_134",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1s9s9_134",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1s9s9_137",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1s9s9_137",
+  "annotation": "awsui_annotation_1hpp3_1s9s9_145",
+  "next-button": "awsui_next-button_1hpp3_1s9s9_146",
+  "previous-button": "awsui_previous-button_1hpp3_1s9s9_147",
+  "finish-button": "awsui_finish-button_1hpp3_1s9s9_148",
+  "header": "awsui_header_1hpp3_1s9s9_149",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_1s9s9_150",
+  "content": "awsui_content_1hpp3_1s9s9_151",
+  "description": "awsui_description_1hpp3_1s9s9_155",
+  "actionBar": "awsui_actionBar_1hpp3_1s9s9_160",
+  "stepCounter": "awsui_stepCounter_1hpp3_1s9s9_167",
+  "divider": "awsui_divider_1hpp3_1s9s9_171",
+  "hotspot": "awsui_hotspot_1hpp3_1s9s9_175",
+  "icon": "awsui_icon_1hpp3_1s9s9_213"
 };