@cloudscape-design/components 3.0.648 → 3.0.650

package/tabs/styles.scoped.css

@@ -2,8 +2,6 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/* stylelint-disable plugin/no-unsupported-browser-features */
-/* stylelint-enable plugin/no-unsupported-browser-features */
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
@@ -100,8 +98,6 @@ 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
 */
-/* stylelint-disable plugin/no-unsupported-browser-features */
-/* stylelint-enable plugin/no-unsupported-browser-features */
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
@@ -195,7 +191,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  SPDX-License-Identifier: Apache-2.0
 */
 /* stylelint-disable selector-max-type */
-.awsui_tabs-header_14rmt_n8497_198:not(#\9) {
+.awsui_tabs-header_14rmt_qo9ae_194:not(#\9) {
   margin-block: 0;
   margin-inline: 0;
   padding-block: 0;
@@ -203,7 +199,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
 }
 
-.awsui_tabs-header-list_14rmt_n8497_206:not(#\9) {
+.awsui_tabs-header-list_14rmt_qo9ae_202:not(#\9) {
   margin-block: 0;
   margin-inline: 0;
   padding-block: 0;
@@ -216,33 +212,33 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -ms-overflow-style: none; /* Internet Explorer 10+ */
   scrollbar-width: none; /* Firefox */
 }
-.awsui_tabs-header-list_14rmt_n8497_206:not(#\9)::-webkit-scrollbar {
+.awsui_tabs-header-list_14rmt_qo9ae_202:not(#\9)::-webkit-scrollbar {
   display: none; /* Safari and Chrome */
 }
 
-.awsui_pagination-button_14rmt_n8497_223:not(#\9) {
+.awsui_pagination-button_14rmt_qo9ae_219:not(#\9) {
   margin-block: var(--space-scaled-s-aqzyko, 12px);
   margin-inline: 0;
   padding-block: 0;
   padding-inline: var(--space-xxs-p8yyaw, 4px);
   display: flex;
 }
-.awsui_pagination-button-left_14rmt_n8497_230:not(#\9) {
+.awsui_pagination-button-left_14rmt_qo9ae_226:not(#\9) {
   border-inline-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-control-disabled-bv2kkn, #d1d5db);
 }
-.awsui_pagination-button-left-scrollable_14rmt_n8497_233:not(#\9) {
+.awsui_pagination-button-left-scrollable_14rmt_qo9ae_229:not(#\9) {
   z-index: 1;
   box-shadow: 5px 0px 4px -3px var(--color-border-tabs-shadow-w5xpb4, rgba(0, 7, 22, 0.12)), 1px 0px 0px 0px var(--color-border-tabs-shadow-w5xpb4, rgba(0, 7, 22, 0.12));
 }
-.awsui_pagination-button-right_14rmt_n8497_237:not(#\9) {
+.awsui_pagination-button-right_14rmt_qo9ae_233:not(#\9) {
   border-inline-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-control-disabled-bv2kkn, #d1d5db);
 }
-.awsui_pagination-button-right-scrollable_14rmt_n8497_240:not(#\9) {
+.awsui_pagination-button-right-scrollable_14rmt_qo9ae_236:not(#\9) {
   z-index: 1;
   box-shadow: -5px 0px 4px -3px var(--color-border-tabs-shadow-w5xpb4, rgba(0, 7, 22, 0.12)), -1px 0px 0px 0 var(--color-border-tabs-shadow-w5xpb4, rgba(0, 7, 22, 0.12));
 }
 
-.awsui_tabs-tab_14rmt_n8497_245:not(#\9) {
+.awsui_tabs-tab_14rmt_qo9ae_241:not(#\9) {
   list-style: none;
   padding-block: 0;
   padding-inline: 0;
@@ -250,11 +246,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
   max-inline-size: calc(90% - var(--space-l-t419sm, 20px));
 }
-.awsui_tabs-tab_14rmt_n8497_245 > button:not(#\9) {
+.awsui_tabs-tab_14rmt_qo9ae_241 > button:not(#\9) {
   background-color: transparent;
 }
 
-.awsui_tabs-tab-label_14rmt_n8497_257:not(#\9) {
+.awsui_tabs-tab-label_14rmt_qo9ae_253:not(#\9) {
   display: flex;
   align-items: center;
   padding-block: var(--space-scaled-2x-xxs-7v8ivz, 4px);
@@ -265,12 +261,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-break: break-word;
 }
 
-.awsui_tabs-tab_14rmt_n8497_245:not(#\9):not(:last-child) > a > .awsui_tabs-tab-label_14rmt_n8497_257, .awsui_tabs-tab_14rmt_n8497_245:not(#\9):not(:last-child) > button > .awsui_tabs-tab-label_14rmt_n8497_257 {
+.awsui_tabs-tab_14rmt_qo9ae_241:not(#\9):not(:last-child) > a > .awsui_tabs-tab-label_14rmt_qo9ae_253, .awsui_tabs-tab_14rmt_qo9ae_241:not(#\9):not(:last-child) > button > .awsui_tabs-tab-label_14rmt_qo9ae_253 {
   margin-inline-end: calc(-1 * var(--border-divider-section-width-1061zr, 1px));
   border-inline-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-tabs-divider-6vpso4, #b6bec9);
 }
 
-.awsui_tabs-tab-link_14rmt_n8497_273:not(#\9) {
+.awsui_tabs-tab-link_14rmt_qo9ae_269:not(#\9) {
   position: relative;
   display: flex;
   align-items: stretch;
@@ -289,26 +285,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
 }
-.awsui_tabs-tab-link_14rmt_n8497_273.awsui_refresh_14rmt_n8497_292:not(#\9) {
+.awsui_tabs-tab-link_14rmt_qo9ae_269.awsui_refresh_14rmt_qo9ae_288:not(#\9) {
   padding-block-start: calc(var(--space-static-xs-7sfb63, 8px) - 1px);
   padding-block-end: var(--space-static-xs-7sfb63, 8px);
   padding-inline: 0;
 }
-.awsui_tabs-tab-link_14rmt_n8497_273:not(#\9):hover {
+.awsui_tabs-tab-link_14rmt_qo9ae_269:not(#\9):hover {
   color: var(--color-text-accent-n2acxv, #0972d3);
 }
-.awsui_tabs-tab-link_14rmt_n8497_273:not(#\9):focus {
+.awsui_tabs-tab-link_14rmt_qo9ae_269:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_n8497_273:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_qo9ae_269:not(#\9):focus {
   z-index: 1;
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_n8497_273:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_qo9ae_269:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-tabs-focus-outline-gutter-xm37ly, -8px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_n8497_273:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_qo9ae_269:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -322,32 +318,32 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_n8497_273:not(#\9
   border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_n8497_273:not(#\9):focus > a > .awsui_tabs-tab-label_14rmt_n8497_257, body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_n8497_273:not(#\9):focus > button > .awsui_tabs-tab-label_14rmt_n8497_257 {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_qo9ae_269:not(#\9):focus > a > .awsui_tabs-tab-label_14rmt_qo9ae_253, body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_qo9ae_269:not(#\9):focus > button > .awsui_tabs-tab-label_14rmt_qo9ae_253 {
   border-inline-end-color: transparent;
 }
 
-.awsui_tabs-tab_14rmt_n8497_245:not(#\9):first-child {
+.awsui_tabs-tab_14rmt_qo9ae_241:not(#\9):first-child {
   margin-inline-start: 1px;
 }
-.awsui_tabs-tab_14rmt_n8497_245:not(#\9):first-child > a > .awsui_tabs-tab-label_14rmt_n8497_257, .awsui_tabs-tab_14rmt_n8497_245:not(#\9):first-child > button > .awsui_tabs-tab-label_14rmt_n8497_257 {
+.awsui_tabs-tab_14rmt_qo9ae_241:not(#\9):first-child > a > .awsui_tabs-tab-label_14rmt_qo9ae_253, .awsui_tabs-tab_14rmt_qo9ae_241:not(#\9):first-child > button > .awsui_tabs-tab-label_14rmt_qo9ae_253 {
   padding-inline-start: calc(var(--space-l-t419sm, 20px) - 1px);
 }
 
-.awsui_tabs-tab_14rmt_n8497_245:not(#\9):last-child {
+.awsui_tabs-tab_14rmt_qo9ae_241:not(#\9):last-child {
   margin-inline-end: 1px;
 }
-.awsui_tabs-tab_14rmt_n8497_245:not(#\9):last-child > a > .awsui_tabs-tab-label_14rmt_n8497_257, .awsui_tabs-tab_14rmt_n8497_245:not(#\9):last-child > button > .awsui_tabs-tab-label_14rmt_n8497_257 {
+.awsui_tabs-tab_14rmt_qo9ae_241:not(#\9):last-child > a > .awsui_tabs-tab-label_14rmt_qo9ae_253, .awsui_tabs-tab_14rmt_qo9ae_241:not(#\9):last-child > button > .awsui_tabs-tab-label_14rmt_qo9ae_253 {
   padding-inline-end: calc(var(--space-l-t419sm, 20px) - 1px);
 }
 
-.awsui_tabs-tab-disabled_14rmt_n8497_343:not(#\9), .awsui_tabs-tab-disabled_14rmt_n8497_343:not(#\9):hover {
+.awsui_tabs-tab-disabled_14rmt_qo9ae_339:not(#\9), .awsui_tabs-tab-disabled_14rmt_qo9ae_339:not(#\9):hover {
   pointer-events: none;
   cursor: default;
   color: var(--color-text-interactive-disabled-z7a3t4, #9ba7b6);
   font-weight: var(--font-tabs-disabled-weight-1xcs5l, 700);
 }
 
-.awsui_tabs-tab-link_14rmt_n8497_273:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_n8497_343):after {
+.awsui_tabs-tab-link_14rmt_qo9ae_269:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_qo9ae_339):after {
   content: "";
   position: absolute;
   inset-inline-start: 0;
@@ -361,36 +357,36 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_n8497_273:not(#\9
   background: var(--color-border-tabs-underline-f1qo5r, #0972d3);
   opacity: 0;
 }
-.awsui_tabs-tab-link_14rmt_n8497_273:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_n8497_343).awsui_refresh_14rmt_n8497_292:after {
+.awsui_tabs-tab-link_14rmt_qo9ae_269:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_qo9ae_339).awsui_refresh_14rmt_qo9ae_288:after {
   transition: opacity var(--motion-duration-refresh-only-medium-nf6485, 165ms) var(--motion-easing-refresh-only-c-vg1m9h, cubic-bezier(0.84, 0, 0.16, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_tabs-tab-link_14rmt_n8497_273:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_n8497_343).awsui_refresh_14rmt_n8497_292:after {
+  .awsui_tabs-tab-link_14rmt_qo9ae_269:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_qo9ae_339).awsui_refresh_14rmt_qo9ae_288:after {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_tabs-tab-link_14rmt_n8497_273:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_n8497_343).awsui_refresh_14rmt_n8497_292:after, .awsui-mode-entering .awsui_tabs-tab-link_14rmt_n8497_273:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_n8497_343).awsui_refresh_14rmt_n8497_292:after {
+.awsui-motion-disabled .awsui_tabs-tab-link_14rmt_qo9ae_269:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_qo9ae_339).awsui_refresh_14rmt_qo9ae_288:after, .awsui-mode-entering .awsui_tabs-tab-link_14rmt_qo9ae_269:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_qo9ae_339).awsui_refresh_14rmt_qo9ae_288:after {
   animation: none;
   transition: none;
 }
 
-.awsui_tabs-tab-active_14rmt_n8497_378:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_n8497_343) {
+.awsui_tabs-tab-active_14rmt_qo9ae_374:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_qo9ae_339) {
   color: var(--color-text-accent-n2acxv, #0972d3);
 }
-.awsui_tabs-tab-active_14rmt_n8497_378:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_n8497_343):after {
+.awsui_tabs-tab-active_14rmt_qo9ae_374:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_qo9ae_339):after {
   opacity: 1;
 }
 
-.awsui_tabs-header-with-divider_14rmt_n8497_385:not(#\9) {
+.awsui_tabs-header-with-divider_14rmt_qo9ae_381:not(#\9) {
   border-block-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-tabs-divider-6vpso4, #b6bec9);
 }
 
-.awsui_root_14rmt_n8497_389:not(#\9) {
+.awsui_root_14rmt_qo9ae_385:not(#\9) {
   /* used in test-utils or tests */
 }
 
-.awsui_tabs_14rmt_n8497_198:not(#\9) {
+.awsui_tabs_14rmt_qo9ae_194:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -428,21 +424,21 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_n8497_273:not(#\9
   inline-size: 100%;
 }
 
-.awsui_tabs-content_14rmt_n8497_430:not(#\9) {
+.awsui_tabs-content_14rmt_qo9ae_426:not(#\9) {
   display: none;
 }
 
-.awsui_fit-height_14rmt_n8497_434:not(#\9) {
+.awsui_fit-height_14rmt_qo9ae_430:not(#\9) {
   display: flex;
   flex-direction: column;
   block-size: 100%;
 }
 
-.awsui_tabs-content-active_14rmt_n8497_440:not(#\9) {
+.awsui_tabs-content-active_14rmt_qo9ae_436:not(#\9) {
   display: block;
   flex: 1;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_n8497_440:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_qo9ae_436:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: 2px;
   border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
@@ -452,23 +448,23 @@ body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_n8497_440:n
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
 
-.awsui_tabs-content-wrapper_14rmt_n8497_454.awsui_with-paddings_14rmt_n8497_454 > .awsui_tabs-content_14rmt_n8497_430:not(#\9) {
+.awsui_tabs-content-wrapper_14rmt_qo9ae_450.awsui_with-paddings_14rmt_qo9ae_450 > .awsui_tabs-content_14rmt_qo9ae_426:not(#\9) {
   padding-block: var(--space-scaled-m-mo5yse, 16px);
   padding-inline: 0;
 }
-.awsui_fit-height_14rmt_n8497_434 > .awsui_tabs-content-wrapper_14rmt_n8497_454:not(#\9) {
+.awsui_fit-height_14rmt_qo9ae_430 > .awsui_tabs-content-wrapper_14rmt_qo9ae_450:not(#\9) {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: auto;
 }
 
-.awsui_fit-height_14rmt_n8497_434 > .awsui_tabs-content-wrapper_14rmt_n8497_454 > .awsui_tabs-container-content-wrapper_14rmt_n8497_465:not(#\9) {
+.awsui_fit-height_14rmt_qo9ae_430 > .awsui_tabs-content-wrapper_14rmt_qo9ae_450 > .awsui_tabs-container-content-wrapper_14rmt_qo9ae_461:not(#\9) {
   block-size: 100%;
   display: flex;
   flex-direction: column;
 }
-.awsui_tabs-container-content-wrapper_14rmt_n8497_465.awsui_with-paddings_14rmt_n8497_454 > .awsui_tabs-content_14rmt_n8497_430:not(#\9) {
+.awsui_tabs-container-content-wrapper_14rmt_qo9ae_461.awsui_with-paddings_14rmt_qo9ae_450 > .awsui_tabs-content_14rmt_qo9ae_426:not(#\9) {
   padding-block-start: var(--space-tabs-content-top-dedu0k, 12px);
   padding-block-end: var(--space-scaled-l-0hpmd7, 20px);
   padding-inline: var(--space-container-horizontal-wfukh3, 20px);

package/tabs/styles.selectors.js

@@ -2,27 +2,27 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "tabs-header": "awsui_tabs-header_14rmt_n8497_198",
-  "tabs-header-list": "awsui_tabs-header-list_14rmt_n8497_206",
-  "pagination-button": "awsui_pagination-button_14rmt_n8497_223",
-  "pagination-button-left": "awsui_pagination-button-left_14rmt_n8497_230",
-  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_n8497_233",
-  "pagination-button-right": "awsui_pagination-button-right_14rmt_n8497_237",
-  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_n8497_240",
-  "tabs-tab": "awsui_tabs-tab_14rmt_n8497_245",
-  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_n8497_257",
-  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_n8497_273",
-  "refresh": "awsui_refresh_14rmt_n8497_292",
-  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_n8497_343",
-  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_n8497_378",
-  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_n8497_385",
-  "root": "awsui_root_14rmt_n8497_389",
-  "tabs": "awsui_tabs_14rmt_n8497_198",
-  "tabs-content": "awsui_tabs-content_14rmt_n8497_430",
-  "fit-height": "awsui_fit-height_14rmt_n8497_434",
-  "tabs-content-active": "awsui_tabs-content-active_14rmt_n8497_440",
-  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_n8497_454",
-  "with-paddings": "awsui_with-paddings_14rmt_n8497_454",
-  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_n8497_465"
+  "tabs-header": "awsui_tabs-header_14rmt_qo9ae_194",
+  "tabs-header-list": "awsui_tabs-header-list_14rmt_qo9ae_202",
+  "pagination-button": "awsui_pagination-button_14rmt_qo9ae_219",
+  "pagination-button-left": "awsui_pagination-button-left_14rmt_qo9ae_226",
+  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_qo9ae_229",
+  "pagination-button-right": "awsui_pagination-button-right_14rmt_qo9ae_233",
+  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_qo9ae_236",
+  "tabs-tab": "awsui_tabs-tab_14rmt_qo9ae_241",
+  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_qo9ae_253",
+  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_qo9ae_269",
+  "refresh": "awsui_refresh_14rmt_qo9ae_288",
+  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_qo9ae_339",
+  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_qo9ae_374",
+  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_qo9ae_381",
+  "root": "awsui_root_14rmt_qo9ae_385",
+  "tabs": "awsui_tabs_14rmt_qo9ae_194",
+  "tabs-content": "awsui_tabs-content_14rmt_qo9ae_426",
+  "fit-height": "awsui_fit-height_14rmt_qo9ae_430",
+  "tabs-content-active": "awsui_tabs-content-active_14rmt_qo9ae_436",
+  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_qo9ae_450",
+  "with-paddings": "awsui_with-paddings_14rmt_qo9ae_450",
+  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_qo9ae_461"
 };
   

package/tabs/tab-header-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-header-bar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tab-header-bar.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AA4BzC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,YAAY,KAAK,IAAI,CAAC;IACzD,WAAW,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACtC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CACrC;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,EACT,cAAc,EACd,WAAW,GACZ,EAAE,iBAAiB,eA4SnB;AAqBD,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,UAEzF"}
+{"version":3,"file":"tab-header-bar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tab-header-bar.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AA4BzC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,YAAY,KAAK,IAAI,CAAC;IACzD,WAAW,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACtC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CACrC;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,EACT,cAAc,EACd,WAAW,GACZ,EAAE,iBAAiB,eAgRnB;AAqBD,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,UAEzF"}

package/tabs/tab-header-bar.js

@@ -11,7 +11,7 @@ import { hasModifierKeys, isPlainLeftClick } from '../internal/events';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { useInternalI18n } from '../i18n/context';
 import { useContainerQuery } from '@cloudscape-design/component-toolkit';
-import { SingleTabStopNavigationContext, useSingleTabStopNavigation, } from '../internal/context/single-tab-stop-navigation-context';
+import { SingleTabStopNavigationProvider, useSingleTabStopNavigation, } from '../internal/context/single-tab-stop-navigation-context';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { getAllFocusables } from '../internal/components/focus-lock/utils';
 const tabSelector = '[role="tab"]';
@@ -92,45 +92,8 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
         [styles['pagination-button-right']]: true,
         [styles['pagination-button-right-scrollable']]: inlineEndOverflow,
     });
-    // A set of registered focusable elements that can use keyboard navigation.
-    const focusables = useRef(new Set());
-    // A map of registered focusable element handlers to update the respective tab indices.
-    const focusHandlers = useRef(new Map());
-    // A map of focusable element states to avoid issuing unnecessary updates to registered elements.
-    const focusablesState = useRef(new WeakMap());
-    // A reference to the currently focused element (tab or tab action).
-    const focusTarget = useRef(null);
-    // Register a focusable element to allow navigation into it.
-    // The focusable element tabIndex is only set to 0 if the element matches the focus target.
-    function registerFocusable(focusableElement, changeHandler) {
-        focusables.current.add(focusableElement);
-        focusHandlers.current.set(focusableElement, changeHandler);
-        const isFocusable = !!focusablesState.current.get(focusableElement);
-        const newIsFocusable = focusTarget.current === focusableElement;
-        if (newIsFocusable !== isFocusable) {
-            focusablesState.current.set(focusableElement, newIsFocusable);
-            changeHandler(newIsFocusable);
-        }
-        return () => unregisterFocusable(focusableElement);
-    }
-    function unregisterFocusable(focusable) {
-        focusables.current.delete(focusable);
-        focusHandlers.current.delete(focusable);
-    }
-    // Update focus target with active tab and notify all registered focusables of a change.
-    function updateFocusTarget() {
-        var _a;
-        focusTarget.current = getSingleFocusable();
-        for (const focusableElement of focusables.current) {
-            const isFocusable = (_a = focusablesState.current.get(focusableElement)) !== null && _a !== void 0 ? _a : false;
-            const newIsFocusable = focusTarget.current === focusableElement;
-            if (newIsFocusable !== isFocusable) {
-                focusablesState.current.set(focusableElement, newIsFocusable);
-                focusHandlers.current.get(focusableElement)(newIsFocusable);
-            }
-        }
-    }
-    function getSingleFocusable() {
+    const navigationAPI = useRef(null);
+    function getNextFocusTarget() {
         var _a, _b;
         if (!containerObjectRef.current) {
             return null;
@@ -139,25 +102,30 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
         return (_b = (_a = tabElements.find(tab => tab.matches(activeTabSelector))) !== null && _a !== void 0 ? _a : tabElements.find(tab => !tab.disabled)) !== null && _b !== void 0 ? _b : null;
     }
     useEffect(() => {
-        updateFocusTarget();
+        var _a;
+        (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.updateFocusTarget();
     });
     function onFocus() {
-        updateFocusTarget();
+        var _a;
+        (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.updateFocusTarget();
     }
     function onBlur() {
-        updateFocusTarget();
+        var _a;
+        (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.updateFocusTarget();
     }
     function onKeyDown(event) {
+        var _a;
+        const focusTarget = (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.getFocusTarget();
         const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];
         if (hasModifierKeys(event) || specialKeys.indexOf(event.keyCode) === -1) {
             return;
         }
-        if (!containerObjectRef.current || !focusTarget.current) {
+        if (!containerObjectRef.current || !focusTarget) {
             return;
         }
         event.preventDefault();
         const focusables = getFocusablesFrom(containerObjectRef.current);
-        const activeIndex = focusables.indexOf(focusTarget.current);
+        const activeIndex = focusables.indexOf(focusTarget);
         handleKey(event, {
             onHome: () => focusElement(focusables[0]),
             onEnd: () => focusElement(focusables[focusables.length - 1]),
@@ -181,20 +149,24 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
     }
     // List all non-disabled and registered focusables: those are eligible for keyboard navigation.
     function getFocusablesFrom(target) {
+        function isElementRegistered(element) {
+            var _a, _b;
+            return (_b = (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.isRegistered(element)) !== null && _b !== void 0 ? _b : false;
+        }
         function isElementDisabled(element) {
             if (element instanceof HTMLButtonElement) {
                 return element.disabled && element.getAttribute('aria-selected') !== 'true';
             }
             return false;
         }
-        return getAllFocusables(target).filter(el => focusables.current.has(el) && !isElementDisabled(el));
+        return getAllFocusables(target).filter(el => isElementRegistered(el) && !isElementDisabled(el));
     }
     return (
     //converted span to div as list should not be a child of span for HTML validation
     React.createElement("div", { className: classes, ref: containerRef },
         horizontalOverflow && (React.createElement("span", { ref: inlineStartOverflowButton, className: leftButtonClasses },
             React.createElement(InternalButton, { formAction: "none", variant: "icon", iconName: "angle-left", disabled: !inlineStartOverflow, __focusable: true, onClick: () => onPaginationClick(headerBarRef, 'backward'), ariaLabel: i18n('i18nStrings.scrollLeftAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.scrollLeftAriaLabel) }))),
-        React.createElement(SingleTabStopNavigationContext.Provider, { value: { navigationActive: true, registerFocusable } },
+        React.createElement(SingleTabStopNavigationProvider, { ref: navigationAPI, navigationActive: true, getNextFocusTarget: getNextFocusTarget },
             React.createElement("ul", { role: "tablist", className: styles['tabs-header-list'], "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ref: headerBarRef, onScroll: onScroll, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur }, tabs.map(renderTabHeader))),
         horizontalOverflow && (React.createElement("span", { className: rightButtonClasses },
             React.createElement(InternalButton, { formAction: "none", variant: "icon", iconName: "angle-right", disabled: !inlineEndOverflow, __focusable: true, onClick: () => onPaginationClick(headerBarRef, 'forward'), ariaLabel: i18n('i18nStrings.scrollRightAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.scrollRightAriaLabel) })))));

package/tabs/tab-header-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-header-bar.js","sourceRoot":"","sources":["../../../src/tabs/tab-header-bar.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, { useRef, useState, useEffect, forwardRef } from 'react';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport handleKey from '../internal/utils/handle-key';\nimport { KeyCode } from '../internal/keycode';\nimport {\n  onPaginationClick,\n  hasHorizontalOverflow,\n  hasInlineStartOverflow,\n  hasInlineEndOverflow,\n  scrollIntoView,\n} from './scroll-utils';\nimport { hasModifierKeys, isPlainLeftClick } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useInternalI18n } from '../i18n/context';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport {\n  FocusableChangeHandler,\n  SingleTabStopNavigationContext,\n  useSingleTabStopNavigation,\n} from '../internal/context/single-tab-stop-navigation-context';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { getAllFocusables } from '../internal/components/focus-lock/utils';\n\nconst tabSelector = '[role=\"tab\"]';\nconst activeTabSelector = '[role=\"tab\"][aria-selected=\"true\"]';\n\nexport interface TabHeaderBarProps {\n  onChange: (changeDetail: TabsProps.ChangeDetail) => void;\n  activeTabId: TabsProps['activeTabId'];\n  tabs: TabsProps['tabs'];\n  variant: TabsProps['variant'];\n  idNamespace: string;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  i18nStrings?: TabsProps.I18nStrings;\n}\n\nexport function TabHeaderBar({\n  onChange,\n  activeTabId,\n  tabs,\n  variant,\n  idNamespace,\n  ariaLabel,\n  ariaLabelledby,\n  i18nStrings,\n}: TabHeaderBarProps) {\n  const headerBarRef = useRef<HTMLUListElement>(null);\n  const activeTabHeaderRef = useRef<null | HTMLElement>(null);\n  const inlineStartOverflowButton = useRef<HTMLElement>(null);\n  const i18n = useInternalI18n('tabs');\n\n  const isVisualRefresh = useVisualRefresh();\n\n  const containerObjectRef = useRef<HTMLDivElement>(null);\n  const [widthChange, containerMeasureRef] = useContainerQuery<number>(rect => rect.contentBoxWidth);\n  const containerRef = useMergeRefs(containerObjectRef, containerMeasureRef);\n  const tabRefs = useRef<Map<string, HTMLElement>>(new Map());\n  const [horizontalOverflow, setHorizontalOverflow] = useState(false);\n  const [inlineStartOverflow, setInlineStartOverflow] = useState(false);\n  const [inlineEndOverflow, setInlineEndOverflow] = useState(false);\n\n  useEffect(() => {\n    if (headerBarRef.current) {\n      setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, inlineStartOverflowButton));\n      setInlineStartOverflow(hasInlineStartOverflow(headerBarRef.current));\n      setInlineEndOverflow(hasInlineEndOverflow(headerBarRef.current));\n    }\n  }, [widthChange, tabs]);\n\n  const scrollIntoViewIfPossible = (smooth: boolean) => {\n    if (!activeTabId) {\n      return;\n    }\n    const activeTabRef = tabRefs.current.get(activeTabId);\n    if (activeTabRef && activeTabRef.parentElement && headerBarRef.current) {\n      scrollIntoView(activeTabRef.parentElement, headerBarRef.current, smooth);\n    }\n  };\n\n  useEffect(() => {\n    // Delay scrollIntoView as the position is depending on parent elements\n    // (effects are called inside-out in the component tree).\n    // Wait one frame to allow parents to complete it's calculation.\n    requestAnimationFrame(() => {\n      scrollIntoViewIfPossible(false);\n    });\n    // Non-smooth scrolling should not be called upon activeId change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [horizontalOverflow, widthChange, tabs.length]);\n\n  useEffect(() => {\n    scrollIntoViewIfPossible(true);\n    // Smooth scrolling should only be called upon activeId change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [activeTabId]);\n\n  useEffect(() => {\n    /*\n     When the selected tab changes and we are currently already focused on a tab,\n     move the focus to the newly selected tab.\n    */\n    if (headerBarRef.current?.contains(document.activeElement)) {\n      if (document.activeElement !== activeTabHeaderRef.current) {\n        activeTabHeaderRef.current?.focus({ preventScroll: true });\n      }\n    }\n  }, [activeTabId]);\n\n  const onScroll = () => {\n    if (headerBarRef.current) {\n      setInlineStartOverflow(hasInlineStartOverflow(headerBarRef.current));\n      setInlineEndOverflow(hasInlineEndOverflow(headerBarRef.current));\n    }\n  };\n\n  const classes = clsx({\n    [styles['tabs-header']]: true,\n    [styles['tabs-header-with-divider']]: variant === 'default' || isVisualRefresh,\n  });\n\n  const leftButtonClasses = clsx({\n    [styles['pagination-button']]: true,\n    [styles['pagination-button-left']]: true,\n    [styles['pagination-button-left-scrollable']]: inlineStartOverflow,\n  });\n\n  const rightButtonClasses = clsx({\n    [styles['pagination-button']]: true,\n    [styles['pagination-button-right']]: true,\n    [styles['pagination-button-right-scrollable']]: inlineEndOverflow,\n  });\n\n  // A set of registered focusable elements that can use keyboard navigation.\n  const focusables = useRef(new Set<Element>());\n  // A map of registered focusable element handlers to update the respective tab indices.\n  const focusHandlers = useRef(new Map<Element, FocusableChangeHandler>());\n  // A map of focusable element states to avoid issuing unnecessary updates to registered elements.\n  const focusablesState = useRef(new WeakMap<Element, boolean>());\n  // A reference to the currently focused element (tab or tab action).\n  const focusTarget = useRef<null | HTMLElement>(null);\n\n  // Register a focusable element to allow navigation into it.\n  // The focusable element tabIndex is only set to 0 if the element matches the focus target.\n  function registerFocusable(focusableElement: Element, changeHandler: FocusableChangeHandler) {\n    focusables.current.add(focusableElement);\n    focusHandlers.current.set(focusableElement, changeHandler);\n    const isFocusable = !!focusablesState.current.get(focusableElement);\n    const newIsFocusable = focusTarget.current === focusableElement;\n    if (newIsFocusable !== isFocusable) {\n      focusablesState.current.set(focusableElement, newIsFocusable);\n      changeHandler(newIsFocusable);\n    }\n    return () => unregisterFocusable(focusableElement);\n  }\n  function unregisterFocusable(focusable: Element) {\n    focusables.current.delete(focusable);\n    focusHandlers.current.delete(focusable);\n  }\n\n  // Update focus target with active tab and notify all registered focusables of a change.\n  function updateFocusTarget() {\n    focusTarget.current = getSingleFocusable();\n    for (const focusableElement of focusables.current) {\n      const isFocusable = focusablesState.current.get(focusableElement) ?? false;\n      const newIsFocusable = focusTarget.current === focusableElement;\n      if (newIsFocusable !== isFocusable) {\n        focusablesState.current.set(focusableElement, newIsFocusable);\n        focusHandlers.current.get(focusableElement)!(newIsFocusable);\n      }\n    }\n  }\n  function getSingleFocusable(): null | HTMLElement {\n    if (!containerObjectRef.current) {\n      return null;\n    }\n    const tabElements: HTMLButtonElement[] = Array.from(containerObjectRef.current.querySelectorAll(tabSelector));\n    return tabElements.find(tab => tab.matches(activeTabSelector)) ?? tabElements.find(tab => !tab.disabled) ?? null;\n  }\n  useEffect(() => {\n    updateFocusTarget();\n  });\n  function onFocus() {\n    updateFocusTarget();\n  }\n  function onBlur() {\n    updateFocusTarget();\n  }\n\n  function onKeyDown(event: React.KeyboardEvent) {\n    const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];\n    if (hasModifierKeys(event) || specialKeys.indexOf(event.keyCode) === -1) {\n      return;\n    }\n    if (!containerObjectRef.current || !focusTarget.current) {\n      return;\n    }\n    event.preventDefault();\n\n    const focusables = getFocusablesFrom(containerObjectRef.current);\n    const activeIndex = focusables.indexOf(focusTarget.current as HTMLElement);\n    handleKey(event as any, {\n      onHome: () => focusElement(focusables[0]),\n      onEnd: () => focusElement(focusables[focusables.length - 1]),\n      onInlineStart: () => focusElement(focusables[circleIndex(activeIndex - 1, [0, focusables.length - 1])]),\n      onInlineEnd: () => focusElement(focusables[circleIndex(activeIndex + 1, [0, focusables.length - 1])]),\n      onPageDown: () => inlineEndOverflow && onPaginationClick(headerBarRef, 'forward'),\n      onPageUp: () => inlineStartOverflow && onPaginationClick(headerBarRef, 'backward'),\n    });\n  }\n  function focusElement(element: HTMLElement) {\n    element.focus();\n    // If focusable element is a tab - fire the onChange for it.\n    const tabsById = tabs.reduce((map, tab) => map.set(tab.id, tab), new Map<string, TabsProps.Tab>());\n    for (const [tabId, tabTriggerElement] of tabRefs.current.entries()) {\n      if (tabId !== activeTabId && tabTriggerElement === element) {\n        onChange({ activeTabId: tabId, activeTabHref: tabsById.get(tabId)?.href });\n        break;\n      }\n    }\n  }\n  // List all non-disabled and registered focusables: those are eligible for keyboard navigation.\n  function getFocusablesFrom(target: HTMLElement) {\n    function isElementDisabled(element: HTMLElement) {\n      if (element instanceof HTMLButtonElement) {\n        return element.disabled && element.getAttribute('aria-selected') !== 'true';\n      }\n      return false;\n    }\n    return getAllFocusables(target).filter(el => focusables.current.has(el) && !isElementDisabled(el));\n  }\n\n  return (\n    //converted span to div as list should not be a child of span for HTML validation\n    <div className={classes} ref={containerRef}>\n      {horizontalOverflow && (\n        <span ref={inlineStartOverflowButton} className={leftButtonClasses}>\n          <InternalButton\n            formAction=\"none\"\n            variant=\"icon\"\n            iconName=\"angle-left\"\n            disabled={!inlineStartOverflow}\n            __focusable={true}\n            onClick={() => onPaginationClick(headerBarRef, 'backward')}\n            ariaLabel={i18n('i18nStrings.scrollLeftAriaLabel', i18nStrings?.scrollLeftAriaLabel)}\n          />\n        </span>\n      )}\n      <SingleTabStopNavigationContext.Provider value={{ navigationActive: true, registerFocusable }}>\n        <ul\n          role=\"tablist\"\n          className={styles['tabs-header-list']}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          ref={headerBarRef}\n          onScroll={onScroll}\n          onKeyDown={onKeyDown}\n          onFocus={onFocus}\n          onBlur={onBlur}\n        >\n          {tabs.map(renderTabHeader)}\n        </ul>\n      </SingleTabStopNavigationContext.Provider>\n      {horizontalOverflow && (\n        <span className={rightButtonClasses}>\n          <InternalButton\n            formAction=\"none\"\n            variant=\"icon\"\n            iconName=\"angle-right\"\n            disabled={!inlineEndOverflow}\n            __focusable={true}\n            onClick={() => onPaginationClick(headerBarRef, 'forward')}\n            ariaLabel={i18n('i18nStrings.scrollRightAriaLabel', i18nStrings?.scrollRightAriaLabel)}\n          />\n        </span>\n      )}\n    </div>\n  );\n\n  function renderTabHeader(tab: TabsProps.Tab) {\n    const clickTab = (event: React.MouseEvent) => {\n      if (tab.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      // if the primary mouse button is clicked with a modifier key, the browser will handle opening a new tab\n      const specialKey = !isPlainLeftClick(event);\n      if (specialKey && tab.href) {\n        return;\n      }\n\n      event.preventDefault();\n      // for browsers that do not focus buttons on button click\n      if (!tab.href) {\n        const clickedTabRef = tabRefs.current.get(tab.id) as undefined | HTMLButtonElement;\n        if (clickedTabRef) {\n          if (clickedTabRef && clickedTabRef !== document.activeElement) {\n            clickedTabRef.focus({ preventScroll: true });\n          }\n        }\n      }\n\n      if (tab.id === activeTabId) {\n        return;\n      }\n\n      onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n    };\n\n    const classes = clsx({\n      [styles['tabs-tab-link']]: true,\n      [styles.refresh]: isVisualRefresh,\n      [styles['tabs-tab-active']]: activeTabId === tab.id && !tab.disabled,\n      [styles['tabs-tab-disabled']]: tab.disabled,\n    });\n\n    const commonProps: (JSX.IntrinsicElements['a'] | JSX.IntrinsicElements['button']) & { 'data-testid': string } = {\n      className: classes,\n      role: 'tab',\n      'aria-selected': tab.id === activeTabId,\n      'aria-controls': `${idNamespace}-${tab.id}-panel`,\n      'data-testid': tab.id,\n      id: getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n      children: <span className={styles['tabs-tab-label']}>{tab.label}</span>,\n    };\n\n    if (tab.disabled) {\n      commonProps['aria-disabled'] = 'true';\n    } else {\n      commonProps.onClick = clickTab;\n    }\n\n    const setElement = (tabElement: null | HTMLElement) => {\n      if (tab.id === activeTabId) {\n        activeTabHeaderRef.current = tabElement;\n      }\n      tabRefs.current.set(tab.id, tabElement as HTMLElement);\n    };\n\n    return (\n      <li className={styles['tabs-tab']} role=\"presentation\" key={tab.id}>\n        <TabTrigger ref={setElement} tab={tab} elementProps={commonProps} />\n      </li>\n    );\n  }\n}\n\nconst TabTrigger = forwardRef(\n  (\n    {\n      tab,\n      elementProps,\n    }: { tab: TabsProps.Tab; elementProps: React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> },\n    ref: React.Ref<HTMLElement>\n  ) => {\n    const refObject = useRef<HTMLElement>(null);\n    const mergedRef = useMergeRefs(refObject, ref);\n    const { tabIndex } = useSingleTabStopNavigation(refObject);\n    return tab.href ? (\n      <a {...elementProps} href={tab.href} ref={mergedRef} tabIndex={tabIndex} />\n    ) : (\n      <button {...elementProps} type=\"button\" disabled={tab.disabled} ref={mergedRef} tabIndex={tabIndex} />\n    );\n  }\n);\n\nexport function getTabElementId({ namespace, tabId }: { namespace: string; tabId: string }) {\n  return namespace + '-' + tabId;\n}\n\nfunction circleIndex(index: number, [from, to]: [number, number]): number {\n  if (index < from) {\n    return to;\n  }\n  if (index > to) {\n    return from;\n  }\n  return index;\n}\n"]}
+{"version":3,"file":"tab-header-bar.js","sourceRoot":"","sources":["../../../src/tabs/tab-header-bar.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, { useRef, useState, useEffect, forwardRef } from 'react';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport handleKey from '../internal/utils/handle-key';\nimport { KeyCode } from '../internal/keycode';\nimport {\n  onPaginationClick,\n  hasHorizontalOverflow,\n  hasInlineStartOverflow,\n  hasInlineEndOverflow,\n  scrollIntoView,\n} from './scroll-utils';\nimport { hasModifierKeys, isPlainLeftClick } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useInternalI18n } from '../i18n/context';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport {\n  SingleTabStopNavigationAPI,\n  SingleTabStopNavigationProvider,\n  useSingleTabStopNavigation,\n} from '../internal/context/single-tab-stop-navigation-context';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { getAllFocusables } from '../internal/components/focus-lock/utils';\n\nconst tabSelector = '[role=\"tab\"]';\nconst activeTabSelector = '[role=\"tab\"][aria-selected=\"true\"]';\n\nexport interface TabHeaderBarProps {\n  onChange: (changeDetail: TabsProps.ChangeDetail) => void;\n  activeTabId: TabsProps['activeTabId'];\n  tabs: TabsProps['tabs'];\n  variant: TabsProps['variant'];\n  idNamespace: string;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  i18nStrings?: TabsProps.I18nStrings;\n}\n\nexport function TabHeaderBar({\n  onChange,\n  activeTabId,\n  tabs,\n  variant,\n  idNamespace,\n  ariaLabel,\n  ariaLabelledby,\n  i18nStrings,\n}: TabHeaderBarProps) {\n  const headerBarRef = useRef<HTMLUListElement>(null);\n  const activeTabHeaderRef = useRef<null | HTMLElement>(null);\n  const inlineStartOverflowButton = useRef<HTMLElement>(null);\n  const i18n = useInternalI18n('tabs');\n\n  const isVisualRefresh = useVisualRefresh();\n\n  const containerObjectRef = useRef<HTMLDivElement>(null);\n  const [widthChange, containerMeasureRef] = useContainerQuery<number>(rect => rect.contentBoxWidth);\n  const containerRef = useMergeRefs(containerObjectRef, containerMeasureRef);\n  const tabRefs = useRef<Map<string, HTMLElement>>(new Map());\n  const [horizontalOverflow, setHorizontalOverflow] = useState(false);\n  const [inlineStartOverflow, setInlineStartOverflow] = useState(false);\n  const [inlineEndOverflow, setInlineEndOverflow] = useState(false);\n\n  useEffect(() => {\n    if (headerBarRef.current) {\n      setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, inlineStartOverflowButton));\n      setInlineStartOverflow(hasInlineStartOverflow(headerBarRef.current));\n      setInlineEndOverflow(hasInlineEndOverflow(headerBarRef.current));\n    }\n  }, [widthChange, tabs]);\n\n  const scrollIntoViewIfPossible = (smooth: boolean) => {\n    if (!activeTabId) {\n      return;\n    }\n    const activeTabRef = tabRefs.current.get(activeTabId);\n    if (activeTabRef && activeTabRef.parentElement && headerBarRef.current) {\n      scrollIntoView(activeTabRef.parentElement, headerBarRef.current, smooth);\n    }\n  };\n\n  useEffect(() => {\n    // Delay scrollIntoView as the position is depending on parent elements\n    // (effects are called inside-out in the component tree).\n    // Wait one frame to allow parents to complete it's calculation.\n    requestAnimationFrame(() => {\n      scrollIntoViewIfPossible(false);\n    });\n    // Non-smooth scrolling should not be called upon activeId change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [horizontalOverflow, widthChange, tabs.length]);\n\n  useEffect(() => {\n    scrollIntoViewIfPossible(true);\n    // Smooth scrolling should only be called upon activeId change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [activeTabId]);\n\n  useEffect(() => {\n    /*\n     When the selected tab changes and we are currently already focused on a tab,\n     move the focus to the newly selected tab.\n    */\n    if (headerBarRef.current?.contains(document.activeElement)) {\n      if (document.activeElement !== activeTabHeaderRef.current) {\n        activeTabHeaderRef.current?.focus({ preventScroll: true });\n      }\n    }\n  }, [activeTabId]);\n\n  const onScroll = () => {\n    if (headerBarRef.current) {\n      setInlineStartOverflow(hasInlineStartOverflow(headerBarRef.current));\n      setInlineEndOverflow(hasInlineEndOverflow(headerBarRef.current));\n    }\n  };\n\n  const classes = clsx({\n    [styles['tabs-header']]: true,\n    [styles['tabs-header-with-divider']]: variant === 'default' || isVisualRefresh,\n  });\n\n  const leftButtonClasses = clsx({\n    [styles['pagination-button']]: true,\n    [styles['pagination-button-left']]: true,\n    [styles['pagination-button-left-scrollable']]: inlineStartOverflow,\n  });\n\n  const rightButtonClasses = clsx({\n    [styles['pagination-button']]: true,\n    [styles['pagination-button-right']]: true,\n    [styles['pagination-button-right-scrollable']]: inlineEndOverflow,\n  });\n\n  const navigationAPI = useRef<SingleTabStopNavigationAPI>(null);\n\n  function getNextFocusTarget(): null | HTMLElement {\n    if (!containerObjectRef.current) {\n      return null;\n    }\n    const tabElements: HTMLButtonElement[] = Array.from(containerObjectRef.current.querySelectorAll(tabSelector));\n    return tabElements.find(tab => tab.matches(activeTabSelector)) ?? tabElements.find(tab => !tab.disabled) ?? null;\n  }\n\n  useEffect(() => {\n    navigationAPI.current?.updateFocusTarget();\n  });\n  function onFocus() {\n    navigationAPI.current?.updateFocusTarget();\n  }\n  function onBlur() {\n    navigationAPI.current?.updateFocusTarget();\n  }\n\n  function onKeyDown(event: React.KeyboardEvent) {\n    const focusTarget = navigationAPI.current?.getFocusTarget();\n    const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];\n    if (hasModifierKeys(event) || specialKeys.indexOf(event.keyCode) === -1) {\n      return;\n    }\n    if (!containerObjectRef.current || !focusTarget) {\n      return;\n    }\n    event.preventDefault();\n\n    const focusables = getFocusablesFrom(containerObjectRef.current);\n    const activeIndex = focusables.indexOf(focusTarget);\n    handleKey(event as any, {\n      onHome: () => focusElement(focusables[0]),\n      onEnd: () => focusElement(focusables[focusables.length - 1]),\n      onInlineStart: () => focusElement(focusables[circleIndex(activeIndex - 1, [0, focusables.length - 1])]),\n      onInlineEnd: () => focusElement(focusables[circleIndex(activeIndex + 1, [0, focusables.length - 1])]),\n      onPageDown: () => inlineEndOverflow && onPaginationClick(headerBarRef, 'forward'),\n      onPageUp: () => inlineStartOverflow && onPaginationClick(headerBarRef, 'backward'),\n    });\n  }\n  function focusElement(element: HTMLElement) {\n    element.focus();\n    // If focusable element is a tab - fire the onChange for it.\n    const tabsById = tabs.reduce((map, tab) => map.set(tab.id, tab), new Map<string, TabsProps.Tab>());\n    for (const [tabId, tabTriggerElement] of tabRefs.current.entries()) {\n      if (tabId !== activeTabId && tabTriggerElement === element) {\n        onChange({ activeTabId: tabId, activeTabHref: tabsById.get(tabId)?.href });\n        break;\n      }\n    }\n  }\n  // List all non-disabled and registered focusables: those are eligible for keyboard navigation.\n  function getFocusablesFrom(target: HTMLElement) {\n    function isElementRegistered(element: HTMLElement) {\n      return navigationAPI.current?.isRegistered(element) ?? false;\n    }\n    function isElementDisabled(element: HTMLElement) {\n      if (element instanceof HTMLButtonElement) {\n        return element.disabled && element.getAttribute('aria-selected') !== 'true';\n      }\n      return false;\n    }\n    return getAllFocusables(target).filter(el => isElementRegistered(el) && !isElementDisabled(el));\n  }\n\n  return (\n    //converted span to div as list should not be a child of span for HTML validation\n    <div className={classes} ref={containerRef}>\n      {horizontalOverflow && (\n        <span ref={inlineStartOverflowButton} className={leftButtonClasses}>\n          <InternalButton\n            formAction=\"none\"\n            variant=\"icon\"\n            iconName=\"angle-left\"\n            disabled={!inlineStartOverflow}\n            __focusable={true}\n            onClick={() => onPaginationClick(headerBarRef, 'backward')}\n            ariaLabel={i18n('i18nStrings.scrollLeftAriaLabel', i18nStrings?.scrollLeftAriaLabel)}\n          />\n        </span>\n      )}\n      <SingleTabStopNavigationProvider\n        ref={navigationAPI}\n        navigationActive={true}\n        getNextFocusTarget={getNextFocusTarget}\n      >\n        <ul\n          role=\"tablist\"\n          className={styles['tabs-header-list']}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          ref={headerBarRef}\n          onScroll={onScroll}\n          onKeyDown={onKeyDown}\n          onFocus={onFocus}\n          onBlur={onBlur}\n        >\n          {tabs.map(renderTabHeader)}\n        </ul>\n      </SingleTabStopNavigationProvider>\n      {horizontalOverflow && (\n        <span className={rightButtonClasses}>\n          <InternalButton\n            formAction=\"none\"\n            variant=\"icon\"\n            iconName=\"angle-right\"\n            disabled={!inlineEndOverflow}\n            __focusable={true}\n            onClick={() => onPaginationClick(headerBarRef, 'forward')}\n            ariaLabel={i18n('i18nStrings.scrollRightAriaLabel', i18nStrings?.scrollRightAriaLabel)}\n          />\n        </span>\n      )}\n    </div>\n  );\n\n  function renderTabHeader(tab: TabsProps.Tab) {\n    const clickTab = (event: React.MouseEvent) => {\n      if (tab.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      // if the primary mouse button is clicked with a modifier key, the browser will handle opening a new tab\n      const specialKey = !isPlainLeftClick(event);\n      if (specialKey && tab.href) {\n        return;\n      }\n\n      event.preventDefault();\n      // for browsers that do not focus buttons on button click\n      if (!tab.href) {\n        const clickedTabRef = tabRefs.current.get(tab.id) as undefined | HTMLButtonElement;\n        if (clickedTabRef) {\n          if (clickedTabRef && clickedTabRef !== document.activeElement) {\n            clickedTabRef.focus({ preventScroll: true });\n          }\n        }\n      }\n\n      if (tab.id === activeTabId) {\n        return;\n      }\n\n      onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n    };\n\n    const classes = clsx({\n      [styles['tabs-tab-link']]: true,\n      [styles.refresh]: isVisualRefresh,\n      [styles['tabs-tab-active']]: activeTabId === tab.id && !tab.disabled,\n      [styles['tabs-tab-disabled']]: tab.disabled,\n    });\n\n    const commonProps: (JSX.IntrinsicElements['a'] | JSX.IntrinsicElements['button']) & { 'data-testid': string } = {\n      className: classes,\n      role: 'tab',\n      'aria-selected': tab.id === activeTabId,\n      'aria-controls': `${idNamespace}-${tab.id}-panel`,\n      'data-testid': tab.id,\n      id: getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n      children: <span className={styles['tabs-tab-label']}>{tab.label}</span>,\n    };\n\n    if (tab.disabled) {\n      commonProps['aria-disabled'] = 'true';\n    } else {\n      commonProps.onClick = clickTab;\n    }\n\n    const setElement = (tabElement: null | HTMLElement) => {\n      if (tab.id === activeTabId) {\n        activeTabHeaderRef.current = tabElement;\n      }\n      tabRefs.current.set(tab.id, tabElement as HTMLElement);\n    };\n\n    return (\n      <li className={styles['tabs-tab']} role=\"presentation\" key={tab.id}>\n        <TabTrigger ref={setElement} tab={tab} elementProps={commonProps} />\n      </li>\n    );\n  }\n}\n\nconst TabTrigger = forwardRef(\n  (\n    {\n      tab,\n      elementProps,\n    }: { tab: TabsProps.Tab; elementProps: React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> },\n    ref: React.Ref<HTMLElement>\n  ) => {\n    const refObject = useRef<HTMLElement>(null);\n    const mergedRef = useMergeRefs(refObject, ref);\n    const { tabIndex } = useSingleTabStopNavigation(refObject);\n    return tab.href ? (\n      <a {...elementProps} href={tab.href} ref={mergedRef} tabIndex={tabIndex} />\n    ) : (\n      <button {...elementProps} type=\"button\" disabled={tab.disabled} ref={mergedRef} tabIndex={tabIndex} />\n    );\n  }\n);\n\nexport function getTabElementId({ namespace, tabId }: { namespace: string; tabId: string }) {\n  return namespace + '-' + tabId;\n}\n\nfunction circleIndex(index: number, [from, to]: [number, number]): number {\n  if (index < from) {\n    return to;\n  }\n  if (index > to) {\n    return from;\n  }\n  return index;\n}\n"]}

package/tag-editor/styles.css.js

@@ -1,8 +1,8 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_brdst_1yvx7_99",
-  "loading": "awsui_loading_brdst_1yvx7_103",
-  "undo-button": "awsui_undo-button_brdst_1yvx7_107"
+  "root": "awsui_root_brdst_z50yn_97",
+  "loading": "awsui_loading_brdst_z50yn_101",
+  "undo-button": "awsui_undo-button_brdst_z50yn_105"
 };