@cloudscape-design/components 3.0.72 → 3.0.73

package/date-range-picker/styles.scoped.css

@@ -90,11 +90,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_calendar_mgja0_x71bz_93:not(#\9) {
-  animation: awsui_awsui-motion-fade-in-0_mgja0_x71bz_1 var(--motion-duration-show-quick-tyaalm, 135ms) var(--motion-easing-show-quick-1fcgbv, ease-out);
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_calendar_mgja0_194kz_97:not(#\9) {
+  animation: awsui_awsui-motion-fade-in-0_mgja0_194kz_1 var(--motion-duration-show-quick-tyaalm, 135ms) var(--motion-easing-show-quick-1fcgbv, ease-out);
   animation-fill-mode: both;
 }
-@keyframes awsui_awsui-motion-fade-in-0_mgja0_x71bz_1 {
+@keyframes awsui_awsui-motion-fade-in-0_mgja0_194kz_1 {
   from {
     opacity: 0;
   }
@@ -103,12 +107,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_calendar_mgja0_x71bz_93:not(#\9) {
+  .awsui_calendar_mgja0_194kz_97:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_calendar_mgja0_x71bz_93:not(#\9), .awsui-mode-entering .awsui_calendar_mgja0_x71bz_93:not(#\9) {
+.awsui-motion-disabled .awsui_calendar_mgja0_194kz_97:not(#\9), .awsui-mode-entering .awsui_calendar_mgja0_194kz_97:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -117,7 +121,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_mgja0_x71bz_120:not(#\9) {
+.awsui_root_mgja0_194kz_124:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -155,28 +159,28 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   max-width: 32em;
 }
 
-.awsui_trigger-wrapper_mgja0_x71bz_132:not(#\9) {
+.awsui_trigger-wrapper_mgja0_194kz_136:not(#\9) {
   min-width: calc(var(--size-calendar-grid-width-lxsx0p, 238px) + 2 * var(--space-l-4vl6xu, 20px));
 }
 
-.awsui_trigger-flexbox_mgja0_x71bz_136:not(#\9) {
+.awsui_trigger-flexbox_mgja0_194kz_140:not(#\9) {
   display: flex;
 }
 
-.awsui_calendar_mgja0_x71bz_93:not(#\9) {
+.awsui_calendar_mgja0_194kz_97:not(#\9) {
   display: block;
   width: calc(2 * var(--size-calendar-grid-width-lxsx0p, 238px) + var(--space-xs-rsr2qu, 8px));
 }
-.awsui_calendar_mgja0_x71bz_93.awsui_one-grid_mgja0_x71bz_144:not(#\9) {
+.awsui_calendar_mgja0_194kz_97.awsui_one-grid_mgja0_194kz_148:not(#\9) {
   width: var(--size-calendar-grid-width-lxsx0p, 238px);
 }
-.awsui_calendar-header_mgja0_x71bz_147:not(#\9) {
+.awsui_calendar-header_mgja0_194kz_151:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
 }
-.awsui_calendar-header-months-wrapper_mgja0_x71bz_153:not(#\9) {
+.awsui_calendar-header-months-wrapper_mgja0_194kz_157:not(#\9) {
   position: absolute;
   right: 0;
   left: 0;
@@ -188,7 +192,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   flex: 1;
   pointer-events: none;
 }
-.awsui_calendar-header-month_mgja0_x71bz_153:not(#\9) {
+.awsui_calendar-header-month_mgja0_194kz_157:not(#\9) {
   font-size: var(--font-body-m-size-sregvd, 14px);
   line-height: var(--font-body-m-line-height-i7xxvv, 22px);
   font-weight: 700;
@@ -196,17 +200,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
   pointer-events: auto;
 }
-.awsui_calendar-next-month-btn_mgja0_x71bz_173:not(#\9) {
+.awsui_calendar-next-month-btn_mgja0_194kz_177:not(#\9) {
   /* used for identifying element */
 }
-.awsui_calendar-prev-month-btn_mgja0_x71bz_176:not(#\9) {
+.awsui_calendar-prev-month-btn_mgja0_194kz_180:not(#\9) {
   /* used for identifying element */
 }
-.awsui_calendar-day-names_mgja0_x71bz_179:not(#\9) {
+.awsui_calendar-day-names_mgja0_194kz_183:not(#\9) {
   display: flex;
   justify-content: stretch;
 }
-.awsui_calendar-day-name_mgja0_x71bz_179:not(#\9) {
+.awsui_calendar-day-name_mgja0_194kz_183:not(#\9) {
   flex: 1 1 0%;
   width: 0;
   word-break: break-word;
@@ -217,132 +221,136 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   line-height: var(--font-body-s-line-height-kdsbrl, 16px);
   letter-spacing: var(--font-body-s-letter-spacing-cy0oxj, 0.005em);
 }
-.awsui_calendar-week_mgja0_x71bz_194:not(#\9) {
+.awsui_calendar-week_mgja0_194kz_198:not(#\9) {
   display: flex;
   justify-content: stretch;
 }
 
-.awsui_first-grid_mgja0_x71bz_199:not(#\9),
-.awsui_second-grid_mgja0_x71bz_200:not(#\9) {
+.awsui_first-grid_mgja0_194kz_203:not(#\9),
+.awsui_second-grid_mgja0_194kz_204:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_grid_mgja0_x71bz_204:not(#\9) {
+.awsui_grid_mgja0_194kz_208:not(#\9) {
   width: var(--size-calendar-grid-width-lxsx0p, 238px);
 }
 
-.awsui_date-and-time-wrapper_mgja0_x71bz_208:not(#\9) {
+.awsui_date-and-time-wrapper_mgja0_194kz_212:not(#\9) {
   width: var(--size-calendar-grid-width-lxsx0p, 238px);
 }
 
-.awsui_date-and-time-wrapper_mgja0_x71bz_208:not(#\9):not(.awsui_date-only_mgja0_x71bz_212) {
+.awsui_date-and-time-wrapper_mgja0_194kz_212:not(#\9):not(.awsui_date-only_mgja0_194kz_216) {
   display: grid;
   column-gap: var(--space-xs-rsr2qu, 8px);
   grid-template-columns: 1fr 1fr;
 }
 
-.awsui_date-and-time-constrainttext_mgja0_x71bz_218:not(#\9) {
+.awsui_date-and-time-constrainttext_mgja0_194kz_222:not(#\9) {
   color: var(--color-text-form-secondary-ih9x7l, #5f6b7a);
   font-size: var(--font-body-s-size-ukw2p9, 12px);
   line-height: var(--font-body-s-line-height-kdsbrl, 16px);
   letter-spacing: var(--font-body-s-letter-spacing-cy0oxj, 0.005em);
 }
 
-.awsui_footer_mgja0_x71bz_225:not(#\9) {
+.awsui_footer_mgja0_194kz_229:not(#\9) {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   border-top: 1px solid var(--color-border-dropdown-item-default-faosd8, #e9ebed);
   padding: 0 var(--space-l-4vl6xu, 20px) var(--space-s-hv8c1d, 12px);
 }
-.awsui_footer_mgja0_x71bz_225.awsui_has-clear-button_mgja0_x71bz_232:not(#\9) {
+.awsui_footer_mgja0_194kz_229.awsui_has-clear-button_mgja0_194kz_236:not(#\9) {
   justify-content: space-between;
 }
-.awsui_footer_mgja0_x71bz_225.awsui_one-grid_mgja0_x71bz_144:not(#\9) {
+.awsui_footer_mgja0_194kz_229.awsui_one-grid_mgja0_194kz_148:not(#\9) {
   padding: 0 var(--space-xs-rsr2qu, 8px) var(--space-s-hv8c1d, 12px);
 }
 
-.awsui_footer-button-wrapper_mgja0_x71bz_239:not(#\9) {
+.awsui_footer-button-wrapper_mgja0_194kz_243:not(#\9) {
   padding-top: var(--space-s-hv8c1d, 12px);
 }
 
-.awsui_icon-wrapper_mgja0_x71bz_243:not(#\9) {
+.awsui_icon-wrapper_mgja0_194kz_247:not(#\9) {
   color: var(--color-text-interactive-default-eg5fsa, #414d5c);
   margin-right: var(--space-xs-rsr2qu, 8px);
 }
 
-.awsui_label_mgja0_x71bz_248:not(#\9) {
+.awsui_label_mgja0_194kz_252:not(#\9) {
   -webkit-user-select: text;
           user-select: text;
   cursor: default;
 }
 
-.awsui_label_mgja0_x71bz_248.awsui_label-enabled_mgja0_x71bz_253:not(#\9):hover > .awsui_trigger-flexbox_mgja0_x71bz_136 > .awsui_icon-wrapper_mgja0_x71bz_243 {
+.awsui_label_mgja0_194kz_252.awsui_label-enabled_mgja0_194kz_257:not(#\9):hover > .awsui_trigger-flexbox_mgja0_194kz_140 > .awsui_icon-wrapper_mgja0_194kz_247 {
   color: var(--color-text-interactive-hover-v3lasm, #000716);
 }
 
-.awsui_label-text_mgja0_x71bz_257:not(#\9) {
+.awsui_label-text_mgja0_194kz_261:not(#\9) {
   color: var(--color-text-input-placeholder-j53j3c, #5f6b7a);
   font-style: italic;
 }
 
-.awsui_mode-switch_mgja0_x71bz_262:not(#\9) {
+.awsui_label-token-nowrap_mgja0_194kz_266:not(#\9) {
+  white-space: nowrap;
+}
+
+.awsui_mode-switch_mgja0_194kz_270:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_dropdown_mgja0_x71bz_266:not(#\9) {
+.awsui_dropdown_mgja0_194kz_274:not(#\9) {
   overflow: auto;
   border-top: 1px solid var(--color-border-container-top-srcvx4, transparent);
   border-bottom: 1px solid var(--color-border-container-top-srcvx4, transparent);
   border-radius: var(--border-radius-dropdown-ujknaf, 8px);
 }
-.awsui_dropdown_mgja0_x71bz_266:not(#\9):focus {
+.awsui_dropdown_mgja0_194kz_274:not(#\9):focus {
   outline: none;
 }
-.awsui_dropdown_mgja0_x71bz_266[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_dropdown_mgja0_194kz_274[data-awsui-focus-visible=true]:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: 2px;
   border-radius: var(--border-radius-dropdown-ujknaf, 8px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
 }
 
-.awsui_dropdown-content_mgja0_x71bz_282:not(#\9) {
+.awsui_dropdown-content_mgja0_194kz_290:not(#\9) {
   -webkit-user-select: text;
           user-select: text;
   background-color: var(--color-background-container-content-i8i4a0, #ffffff);
   width: calc(2 * var(--size-calendar-grid-width-lxsx0p, 238px) + var(--space-xs-rsr2qu, 8px) + 2 * var(--space-l-4vl6xu, 20px));
 }
-.awsui_dropdown-content_mgja0_x71bz_282.awsui_one-grid_mgja0_x71bz_144:not(#\9) {
+.awsui_dropdown-content_mgja0_194kz_290.awsui_one-grid_mgja0_194kz_148:not(#\9) {
   width: calc(var(--size-calendar-grid-width-lxsx0p, 238px) + 2 * var(--space-l-4vl6xu, 20px));
 }
 
-.awsui_start-date-input_mgja0_x71bz_291:not(#\9),
-.awsui_start-time-input_mgja0_x71bz_292:not(#\9),
-.awsui_end-date-input_mgja0_x71bz_293:not(#\9),
-.awsui_end-time-input_mgja0_x71bz_294:not(#\9) {
+.awsui_start-date-input_mgja0_194kz_299:not(#\9),
+.awsui_start-time-input_mgja0_194kz_300:not(#\9),
+.awsui_end-date-input_mgja0_194kz_301:not(#\9),
+.awsui_end-time-input_mgja0_194kz_302:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_validation-section_mgja0_x71bz_298:not(#\9) {
+.awsui_validation-section_mgja0_194kz_306:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_validation-error_mgja0_x71bz_302:not(#\9) {
+.awsui_validation-error_mgja0_194kz_310:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_clear-button_mgja0_x71bz_306:not(#\9) {
+.awsui_clear-button_mgja0_194kz_314:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_apply-button_mgja0_x71bz_310:not(#\9) {
+.awsui_apply-button_mgja0_194kz_318:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_cancel-button_mgja0_x71bz_314:not(#\9) {
+.awsui_cancel-button_mgja0_194kz_322:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_calendar-aria-live_mgja0_x71bz_318:not(#\9) {
+.awsui_calendar-aria-live_mgja0_194kz_326:not(#\9) {
   /* used in test-utils */
 }

package/date-range-picker/styles.selectors.js

@@ -2,45 +2,46 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "calendar": "awsui_calendar_mgja0_x71bz_93",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_mgja0_x71bz_1",
-  "root": "awsui_root_mgja0_x71bz_120",
-  "trigger-wrapper": "awsui_trigger-wrapper_mgja0_x71bz_132",
-  "trigger-flexbox": "awsui_trigger-flexbox_mgja0_x71bz_136",
-  "one-grid": "awsui_one-grid_mgja0_x71bz_144",
-  "calendar-header": "awsui_calendar-header_mgja0_x71bz_147",
-  "calendar-header-months-wrapper": "awsui_calendar-header-months-wrapper_mgja0_x71bz_153",
-  "calendar-header-month": "awsui_calendar-header-month_mgja0_x71bz_153",
-  "calendar-next-month-btn": "awsui_calendar-next-month-btn_mgja0_x71bz_173",
-  "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_mgja0_x71bz_176",
-  "calendar-day-names": "awsui_calendar-day-names_mgja0_x71bz_179",
-  "calendar-day-name": "awsui_calendar-day-name_mgja0_x71bz_179",
-  "calendar-week": "awsui_calendar-week_mgja0_x71bz_194",
-  "first-grid": "awsui_first-grid_mgja0_x71bz_199",
-  "second-grid": "awsui_second-grid_mgja0_x71bz_200",
-  "grid": "awsui_grid_mgja0_x71bz_204",
-  "date-and-time-wrapper": "awsui_date-and-time-wrapper_mgja0_x71bz_208",
-  "date-only": "awsui_date-only_mgja0_x71bz_212",
-  "date-and-time-constrainttext": "awsui_date-and-time-constrainttext_mgja0_x71bz_218",
-  "footer": "awsui_footer_mgja0_x71bz_225",
-  "has-clear-button": "awsui_has-clear-button_mgja0_x71bz_232",
-  "footer-button-wrapper": "awsui_footer-button-wrapper_mgja0_x71bz_239",
-  "icon-wrapper": "awsui_icon-wrapper_mgja0_x71bz_243",
-  "label": "awsui_label_mgja0_x71bz_248",
-  "label-enabled": "awsui_label-enabled_mgja0_x71bz_253",
-  "label-text": "awsui_label-text_mgja0_x71bz_257",
-  "mode-switch": "awsui_mode-switch_mgja0_x71bz_262",
-  "dropdown": "awsui_dropdown_mgja0_x71bz_266",
-  "dropdown-content": "awsui_dropdown-content_mgja0_x71bz_282",
-  "start-date-input": "awsui_start-date-input_mgja0_x71bz_291",
-  "start-time-input": "awsui_start-time-input_mgja0_x71bz_292",
-  "end-date-input": "awsui_end-date-input_mgja0_x71bz_293",
-  "end-time-input": "awsui_end-time-input_mgja0_x71bz_294",
-  "validation-section": "awsui_validation-section_mgja0_x71bz_298",
-  "validation-error": "awsui_validation-error_mgja0_x71bz_302",
-  "clear-button": "awsui_clear-button_mgja0_x71bz_306",
-  "apply-button": "awsui_apply-button_mgja0_x71bz_310",
-  "cancel-button": "awsui_cancel-button_mgja0_x71bz_314",
-  "calendar-aria-live": "awsui_calendar-aria-live_mgja0_x71bz_318"
+  "calendar": "awsui_calendar_mgja0_194kz_97",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_mgja0_194kz_1",
+  "root": "awsui_root_mgja0_194kz_124",
+  "trigger-wrapper": "awsui_trigger-wrapper_mgja0_194kz_136",
+  "trigger-flexbox": "awsui_trigger-flexbox_mgja0_194kz_140",
+  "one-grid": "awsui_one-grid_mgja0_194kz_148",
+  "calendar-header": "awsui_calendar-header_mgja0_194kz_151",
+  "calendar-header-months-wrapper": "awsui_calendar-header-months-wrapper_mgja0_194kz_157",
+  "calendar-header-month": "awsui_calendar-header-month_mgja0_194kz_157",
+  "calendar-next-month-btn": "awsui_calendar-next-month-btn_mgja0_194kz_177",
+  "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_mgja0_194kz_180",
+  "calendar-day-names": "awsui_calendar-day-names_mgja0_194kz_183",
+  "calendar-day-name": "awsui_calendar-day-name_mgja0_194kz_183",
+  "calendar-week": "awsui_calendar-week_mgja0_194kz_198",
+  "first-grid": "awsui_first-grid_mgja0_194kz_203",
+  "second-grid": "awsui_second-grid_mgja0_194kz_204",
+  "grid": "awsui_grid_mgja0_194kz_208",
+  "date-and-time-wrapper": "awsui_date-and-time-wrapper_mgja0_194kz_212",
+  "date-only": "awsui_date-only_mgja0_194kz_216",
+  "date-and-time-constrainttext": "awsui_date-and-time-constrainttext_mgja0_194kz_222",
+  "footer": "awsui_footer_mgja0_194kz_229",
+  "has-clear-button": "awsui_has-clear-button_mgja0_194kz_236",
+  "footer-button-wrapper": "awsui_footer-button-wrapper_mgja0_194kz_243",
+  "icon-wrapper": "awsui_icon-wrapper_mgja0_194kz_247",
+  "label": "awsui_label_mgja0_194kz_252",
+  "label-enabled": "awsui_label-enabled_mgja0_194kz_257",
+  "label-text": "awsui_label-text_mgja0_194kz_261",
+  "label-token-nowrap": "awsui_label-token-nowrap_mgja0_194kz_266",
+  "mode-switch": "awsui_mode-switch_mgja0_194kz_270",
+  "dropdown": "awsui_dropdown_mgja0_194kz_274",
+  "dropdown-content": "awsui_dropdown-content_mgja0_194kz_290",
+  "start-date-input": "awsui_start-date-input_mgja0_194kz_299",
+  "start-time-input": "awsui_start-time-input_mgja0_194kz_300",
+  "end-date-input": "awsui_end-date-input_mgja0_194kz_301",
+  "end-time-input": "awsui_end-time-input_mgja0_194kz_302",
+  "validation-section": "awsui_validation-section_mgja0_194kz_306",
+  "validation-error": "awsui_validation-error_mgja0_194kz_310",
+  "clear-button": "awsui_clear-button_mgja0_194kz_314",
+  "apply-button": "awsui_apply-button_mgja0_194kz_318",
+  "cancel-button": "awsui_cancel-button_mgja0_194kz_322",
+  "calendar-aria-live": "awsui_calendar-aria-live_mgja0_194kz_326"
 };
   

package/expandable-section/expandable-section-header.d.ts

@@ -7,11 +7,12 @@ interface ExpandableSectionHeaderProps {
     children?: ReactNode;
     expanded: boolean;
     ariaControls: string;
-    ariaLabelledBy: string;
+    ariaLabelledBy?: string;
+    ariaLabel?: string;
     onKeyUp: KeyboardEventHandler;
     onKeyDown: KeyboardEventHandler;
     onClick: MouseEventHandler;
 }
-export declare const ExpandableSectionHeader: ({ id, className, variant, children, expanded, ariaControls, ariaLabelledBy, onKeyUp, onKeyDown, onClick, }: ExpandableSectionHeaderProps) => JSX.Element;
+export declare const ExpandableSectionHeader: ({ id, className, variant, children, expanded, ariaControls, ariaLabel, ariaLabelledBy, onKeyUp, onKeyDown, onClick, }: ExpandableSectionHeaderProps) => JSX.Element;
 export {};
 //# sourceMappingURL=expandable-section-header.d.ts.map

package/expandable-section/expandable-section-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expandable-section-header.d.ts","sourceRoot":"","sources":["../../../src/expandable-section/expandable-section-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAc,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlF,UAAU,4BAA4B;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,SAAS,EAAE,oBAAoB,CAAC;IAChC,OAAO,EAAE,iBAAiB,CAAC;CAC5B;AAED,eAAO,MAAM,uBAAuB,+GAWjC,4BAA4B,gBAiD9B,CAAC"}
+{"version":3,"file":"expandable-section-header.d.ts","sourceRoot":"","sources":["../../../src/expandable-section/expandable-section-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAc,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlF,UAAU,4BAA4B;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,SAAS,EAAE,oBAAoB,CAAC;IAChC,OAAO,EAAE,iBAAiB,CAAC;CAC5B;AAED,eAAO,MAAM,uBAAuB,0HAYjC,4BAA4B,gBAmD9B,CAAC"}

package/expandable-section/expandable-section-header.js

@@ -5,7 +5,7 @@ import InternalIcon from '../icon/internal';
 import clsx from 'clsx';
 import styles from './styles.css.js';
 export var ExpandableSectionHeader = function (_a) {
-    var id = _a.id, className = _a.className, variant = _a.variant, children = _a.children, expanded = _a.expanded, ariaControls = _a.ariaControls, ariaLabelledBy = _a.ariaLabelledBy, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onClick = _a.onClick;
+    var id = _a.id, className = _a.className, variant = _a.variant, children = _a.children, expanded = _a.expanded, ariaControls = _a.ariaControls, ariaLabel = _a.ariaLabel, ariaLabelledBy = _a.ariaLabelledBy, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onClick = _a.onClick;
     var focusVisible = useFocusVisible();
     var icon = (React.createElement(InternalIcon, { size: variant === 'container' ? 'medium' : 'normal', className: clsx(styles.icon, expanded && styles.expanded), name: "caret-down-filled" }));
     var ariaAttributes = {
@@ -15,10 +15,10 @@ export var ExpandableSectionHeader = function (_a) {
     var triggerClassName = clsx(styles.trigger, styles["trigger-".concat(variant)], expanded && styles['trigger-expanded']);
     if (variant === 'navigation') {
         return (React.createElement("div", { id: id, className: clsx(className, triggerClassName), onClick: onClick },
-            React.createElement("button", __assign({ className: styles['icon-container'], type: "button", "aria-labelledby": ariaLabelledBy }, focusVisible, ariaAttributes), icon),
+            React.createElement("button", __assign({ className: styles['icon-container'], type: "button", "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel }, focusVisible, ariaAttributes), icon),
             children));
     }
-    return (React.createElement("div", __assign({ id: id, role: "button", className: clsx(className, triggerClassName, styles.focusable, expanded && styles.expanded), tabIndex: 0, onKeyUp: onKeyUp, onKeyDown: onKeyDown, onClick: onClick }, focusVisible, ariaAttributes),
+    return (React.createElement("div", __assign({ id: id, role: "button", className: clsx(className, triggerClassName, styles.focusable, expanded && styles.expanded), tabIndex: 0, onKeyUp: onKeyUp, onKeyDown: onKeyDown, onClick: onClick, "aria-label": ariaLabel }, focusVisible, ariaAttributes),
         React.createElement("div", { className: styles['icon-container'] }, icon),
         children));
 };

package/expandable-section/expandable-section-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"expandable-section-header.js","sourceRoot":"","sources":["../../../src/expandable-section/expandable-section-header.tsx"],"names":[],"mappings":";AAGA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAClF,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAerC,MAAM,CAAC,IAAM,uBAAuB,GAAG,UAAC,EAWT;QAV7B,EAAE,QAAA,EACF,SAAS,eAAA,EACT,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,cAAc,oBAAA,EACd,OAAO,aAAA,EACP,SAAS,eAAA,EACT,OAAO,aAAA;IAEP,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,IAAM,IAAI,GAAG,CACX,oBAAC,YAAY,IACX,IAAI,EAAE,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EACnD,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EACzD,IAAI,EAAC,mBAAmB,GACxB,CACH,CAAC;IACF,IAAM,cAAc,GAAG;QACrB,eAAe,EAAE,YAAY;QAC7B,eAAe,EAAE,QAAQ;KAC1B,CAAC;IAEF,IAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,kBAAW,OAAO,CAAE,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACpH,IAAI,OAAO,KAAK,YAAY,EAAE;QAC5B,OAAO,CACL,6BAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,OAAO;YACzE,yCACE,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,EACnC,IAAI,EAAC,QAAQ,qBACI,cAAc,IAC3B,YAAY,EACZ,cAAc,GAEjB,IAAI,CACE;YACR,QAAQ,CACL,CACP,CAAC;KACH;IAED,OAAO,CACL,sCACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EAC3F,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,IACZ,YAAY,EACZ,cAAc;QAElB,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAAG,IAAI,CAAO;QACrD,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ExpandableSectionProps } from './interfaces';\nimport React, { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport InternalIcon from '../icon/internal';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\n\ninterface ExpandableSectionHeaderProps {\n  id: string;\n  className?: string;\n  variant: ExpandableSectionProps.Variant;\n  children?: ReactNode;\n  expanded: boolean;\n  ariaControls: string;\n  ariaLabelledBy: string;\n  onKeyUp: KeyboardEventHandler;\n  onKeyDown: KeyboardEventHandler;\n  onClick: MouseEventHandler;\n}\n\nexport const ExpandableSectionHeader = ({\n  id,\n  className,\n  variant,\n  children,\n  expanded,\n  ariaControls,\n  ariaLabelledBy,\n  onKeyUp,\n  onKeyDown,\n  onClick,\n}: ExpandableSectionHeaderProps) => {\n  const focusVisible = useFocusVisible();\n\n  const icon = (\n    <InternalIcon\n      size={variant === 'container' ? 'medium' : 'normal'}\n      className={clsx(styles.icon, expanded && styles.expanded)}\n      name=\"caret-down-filled\"\n    />\n  );\n  const ariaAttributes = {\n    'aria-controls': ariaControls,\n    'aria-expanded': expanded,\n  };\n\n  const triggerClassName = clsx(styles.trigger, styles[`trigger-${variant}`], expanded && styles['trigger-expanded']);\n  if (variant === 'navigation') {\n    return (\n      <div id={id} className={clsx(className, triggerClassName)} onClick={onClick}>\n        <button\n          className={styles['icon-container']}\n          type=\"button\"\n          aria-labelledby={ariaLabelledBy}\n          {...focusVisible}\n          {...ariaAttributes}\n        >\n          {icon}\n        </button>\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      id={id}\n      role=\"button\"\n      className={clsx(className, triggerClassName, styles.focusable, expanded && styles.expanded)}\n      tabIndex={0}\n      onKeyUp={onKeyUp}\n      onKeyDown={onKeyDown}\n      onClick={onClick}\n      {...focusVisible}\n      {...ariaAttributes}\n    >\n      <div className={styles['icon-container']}>{icon}</div>\n      {children}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"expandable-section-header.js","sourceRoot":"","sources":["../../../src/expandable-section/expandable-section-header.tsx"],"names":[],"mappings":";AAGA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAClF,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAgBrC,MAAM,CAAC,IAAM,uBAAuB,GAAG,UAAC,EAYT;QAX7B,EAAE,QAAA,EACF,SAAS,eAAA,EACT,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,OAAO,aAAA,EACP,SAAS,eAAA,EACT,OAAO,aAAA;IAEP,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,IAAM,IAAI,GAAG,CACX,oBAAC,YAAY,IACX,IAAI,EAAE,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EACnD,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EACzD,IAAI,EAAC,mBAAmB,GACxB,CACH,CAAC;IACF,IAAM,cAAc,GAAG;QACrB,eAAe,EAAE,YAAY;QAC7B,eAAe,EAAE,QAAQ;KAC1B,CAAC;IAEF,IAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,kBAAW,OAAO,CAAE,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACpH,IAAI,OAAO,KAAK,YAAY,EAAE;QAC5B,OAAO,CACL,6BAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,OAAO;YACzE,yCACE,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,EACnC,IAAI,EAAC,QAAQ,qBACI,cAAc,gBACnB,SAAS,IACjB,YAAY,EACZ,cAAc,GAEjB,IAAI,CACE;YACR,QAAQ,CACL,CACP,CAAC;KACH;IAED,OAAO,CACL,sCACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EAC3F,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,gBACJ,SAAS,IACjB,YAAY,EACZ,cAAc;QAElB,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAAG,IAAI,CAAO;QACrD,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ExpandableSectionProps } from './interfaces';\nimport React, { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport InternalIcon from '../icon/internal';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\n\ninterface ExpandableSectionHeaderProps {\n  id: string;\n  className?: string;\n  variant: ExpandableSectionProps.Variant;\n  children?: ReactNode;\n  expanded: boolean;\n  ariaControls: string;\n  ariaLabelledBy?: string;\n  ariaLabel?: string;\n  onKeyUp: KeyboardEventHandler;\n  onKeyDown: KeyboardEventHandler;\n  onClick: MouseEventHandler;\n}\n\nexport const ExpandableSectionHeader = ({\n  id,\n  className,\n  variant,\n  children,\n  expanded,\n  ariaControls,\n  ariaLabel,\n  ariaLabelledBy,\n  onKeyUp,\n  onKeyDown,\n  onClick,\n}: ExpandableSectionHeaderProps) => {\n  const focusVisible = useFocusVisible();\n\n  const icon = (\n    <InternalIcon\n      size={variant === 'container' ? 'medium' : 'normal'}\n      className={clsx(styles.icon, expanded && styles.expanded)}\n      name=\"caret-down-filled\"\n    />\n  );\n  const ariaAttributes = {\n    'aria-controls': ariaControls,\n    'aria-expanded': expanded,\n  };\n\n  const triggerClassName = clsx(styles.trigger, styles[`trigger-${variant}`], expanded && styles['trigger-expanded']);\n  if (variant === 'navigation') {\n    return (\n      <div id={id} className={clsx(className, triggerClassName)} onClick={onClick}>\n        <button\n          className={styles['icon-container']}\n          type=\"button\"\n          aria-labelledby={ariaLabelledBy}\n          aria-label={ariaLabel}\n          {...focusVisible}\n          {...ariaAttributes}\n        >\n          {icon}\n        </button>\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      id={id}\n      role=\"button\"\n      className={clsx(className, triggerClassName, styles.focusable, expanded && styles.expanded)}\n      tabIndex={0}\n      onKeyUp={onKeyUp}\n      onKeyDown={onKeyDown}\n      onClick={onClick}\n      aria-label={ariaLabel}\n      {...focusVisible}\n      {...ariaAttributes}\n    >\n      <div className={styles['icon-container']}>{icon}</div>\n      {children}\n    </div>\n  );\n};\n"]}

package/expandable-section/interfaces.d.ts

@@ -41,6 +41,11 @@ export interface ExpandableSectionProps extends BaseComponentProps {
      * When using the container variant, use the Header component. Otherwise, use plain text.
      */
     header?: React.ReactNode;
+    /**
+     * Adds `aria-label` to the header element.
+     * Use to assign unique labels when there are multiple expandable sections with the same header text on one page.
+     */
+    headerAriaLabel?: string;
     /**
      * Called when the state changes (that is, when the user expands or collapses the component).
      * The event `detail` contains the current value of the `expanded` property.

package/expandable-section/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/expandable-section/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,yBAAiB,sBAAsB,CAAC;IACtC,KAAY,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,YAAY,CAAC;IACxE,UAAiB,YAAY;QAC3B,QAAQ,EAAE,OAAO,CAAC;KACnB;CACF;AAED,MAAM,WAAW,sBAAuB,SAAQ,kBAAkB;IAChE;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;SAOK;IACL,OAAO,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC;IAEzC;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC;CAC3E"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/expandable-section/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,yBAAiB,sBAAsB,CAAC;IACtC,KAAY,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,YAAY,CAAC;IACxE,UAAiB,YAAY;QAC3B,QAAQ,EAAE,OAAO,CAAC;KACnB;CACF;AAED,MAAM,WAAW,sBAAuB,SAAQ,kBAAkB;IAChE;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;SAOK;IACL,OAAO,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC;IAEzC;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC;CAC3E"}

package/expandable-section/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/expandable-section/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport namespace ExpandableSectionProps {\n  export type Variant = 'default' | 'footer' | 'container' | 'navigation';\n  export interface ChangeDetail {\n    expanded: boolean;\n  }\n}\n\nexport interface ExpandableSectionProps extends BaseComponentProps {\n  /**\n   * Determines whether the component initially displays in expanded state (that is, with content visible). The component operates in an uncontrolled\n   * manner even if you provide a value for this property.\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Determines whether the component is in the expanded state (that is, with content visible). The component operates in a controlled\n   * manner if you provide a value for this property.\n   */\n  expanded?: boolean;\n\n  /**\n   * The possible variants of an expandable section are as follows:\n   *  * `default` - Use this variant in any context.\n   *  * `footer` - Use this variant in container footers.\n   *  * `container` - Use this variant in a detail page alongside other containers.\n   *  * `navigation` - Use this variant in the navigation panel with anchors and custom styled content.\n   *    It doesn't have any default styles.\n   * */\n  variant?: ExpandableSectionProps.Variant;\n\n  /**\n   * Determines whether the content section's default padding is removed. This default padding is only present for the `container` variant.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * Primary content displayed in the expandable section element.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Heading displayed above the content text.\n   *\n   * When using the container variant, use the Header component. Otherwise, use plain text.\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Called when the state changes (that is, when the user expands or collapses the component).\n   * The event `detail` contains the current value of the `expanded` property.\n   */\n  onChange?: NonCancelableEventHandler<ExpandableSectionProps.ChangeDetail>;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/expandable-section/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport namespace ExpandableSectionProps {\n  export type Variant = 'default' | 'footer' | 'container' | 'navigation';\n  export interface ChangeDetail {\n    expanded: boolean;\n  }\n}\n\nexport interface ExpandableSectionProps extends BaseComponentProps {\n  /**\n   * Determines whether the component initially displays in expanded state (that is, with content visible). The component operates in an uncontrolled\n   * manner even if you provide a value for this property.\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Determines whether the component is in the expanded state (that is, with content visible). The component operates in a controlled\n   * manner if you provide a value for this property.\n   */\n  expanded?: boolean;\n\n  /**\n   * The possible variants of an expandable section are as follows:\n   *  * `default` - Use this variant in any context.\n   *  * `footer` - Use this variant in container footers.\n   *  * `container` - Use this variant in a detail page alongside other containers.\n   *  * `navigation` - Use this variant in the navigation panel with anchors and custom styled content.\n   *    It doesn't have any default styles.\n   * */\n  variant?: ExpandableSectionProps.Variant;\n\n  /**\n   * Determines whether the content section's default padding is removed. This default padding is only present for the `container` variant.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * Primary content displayed in the expandable section element.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Heading displayed above the content text.\n   *\n   * When using the container variant, use the Header component. Otherwise, use plain text.\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Adds `aria-label` to the header element.\n   * Use to assign unique labels when there are multiple expandable sections with the same header text on one page.\n   */\n  headerAriaLabel?: string;\n\n  /**\n   * Called when the state changes (that is, when the user expands or collapses the component).\n   * The event `detail` contains the current value of the `expanded` property.\n   */\n  onChange?: NonCancelableEventHandler<ExpandableSectionProps.ChangeDetail>;\n}\n"]}

package/expandable-section/internal.d.ts

@@ -1,6 +1,6 @@
 import { ExpandableSectionProps } from './interfaces';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 declare type InternalExpandableSectionProps = ExpandableSectionProps & InternalBaseComponentProps;
-export default function InternalExpandableSection({ expanded: controlledExpanded, defaultExpanded, onChange, variant, children, header, disableContentPaddings, __internalRootRef, ...props }: InternalExpandableSectionProps): JSX.Element;
+export default function InternalExpandableSection({ expanded: controlledExpanded, defaultExpanded, onChange, variant, children, header, disableContentPaddings, headerAriaLabel, __internalRootRef, ...props }: InternalExpandableSectionProps): JSX.Element;
 export {};
 //# sourceMappingURL=internal.d.ts.map

package/expandable-section/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/expandable-section/internal.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAKtD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,aAAK,8BAA8B,GAAG,sBAAsB,GAAG,0BAA0B,CAAC;AAE1F,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,QAAQ,EAAE,kBAAkB,EAC5B,eAAe,EACf,QAAQ,EACR,OAAmB,EACnB,QAAQ,EACR,MAAM,EACN,sBAAsB,EACtB,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,8BAA8B,eAmFhC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/expandable-section/internal.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAKtD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,aAAK,8BAA8B,GAAG,sBAAsB,GAAG,0BAA0B,CAAC;AAE1F,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,QAAQ,EAAE,kBAAkB,EAC5B,eAAe,EACf,QAAQ,EACR,OAAmB,EACnB,QAAQ,EACR,MAAM,EACN,sBAAsB,EACtB,eAAe,EACf,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,8BAA8B,eAqFhC"}

package/expandable-section/internal.js

@@ -13,7 +13,7 @@ import styles from './styles.css.js';
 import { ExpandableSectionContainer } from './expandable-section-container';
 import { ExpandableSectionHeader } from './expandable-section-header';
 export default function InternalExpandableSection(_a) {
-    var controlledExpanded = _a.expanded, defaultExpanded = _a.defaultExpanded, onChange = _a.onChange, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, children = _a.children, header = _a.header, disableContentPaddings = _a.disableContentPaddings, __internalRootRef = _a.__internalRootRef, props = __rest(_a, ["expanded", "defaultExpanded", "onChange", "variant", "children", "header", "disableContentPaddings", "__internalRootRef"]);
+    var controlledExpanded = _a.expanded, defaultExpanded = _a.defaultExpanded, onChange = _a.onChange, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, children = _a.children, header = _a.header, disableContentPaddings = _a.disableContentPaddings, headerAriaLabel = _a.headerAriaLabel, __internalRootRef = _a.__internalRootRef, props = __rest(_a, ["expanded", "defaultExpanded", "onChange", "variant", "children", "header", "disableContentPaddings", "headerAriaLabel", "__internalRootRef"]);
     var ref = useRef(null);
     var controlId = useUniqueId();
     var triggerControlId = "".concat(controlId, "-trigger");
@@ -44,13 +44,14 @@ export default function InternalExpandableSection(_a) {
     }, []);
     var triggerProps = {
         ariaControls: controlId,
-        ariaLabelledBy: triggerControlId,
+        ariaLabel: headerAriaLabel,
+        ariaLabelledBy: headerAriaLabel ? undefined : triggerControlId,
         onKeyUp: onKeyUp,
         onKeyDown: onKeyDown,
         onClick: onClick
     };
     return (React.createElement(ExpandableSectionContainer, __assign({}, baseProps, { expanded: expanded, className: clsx(baseProps.className, styles.root), variant: variant, disableContentPaddings: disableContentPaddings, header: React.createElement(ExpandableSectionHeader, __assign({ id: triggerControlId, className: clsx(styles.header, styles["header-".concat(variant)]), variant: variant, expanded: !!expanded }, triggerProps), header), __internalRootRef: __internalRootRef }),
         React.createElement(CSSTransition, { "in": expanded, timeout: 30, classNames: { enter: styles['content-enter'] }, nodeRef: ref },
-            React.createElement("div", { id: controlId, ref: ref, className: clsx(styles.content, styles["content-".concat(variant)], expanded && styles['content-expanded']), role: "group", "aria-labelledby": triggerControlId }, children))));
+            React.createElement("div", { id: controlId, ref: ref, className: clsx(styles.content, styles["content-".concat(variant)], expanded && styles['content-expanded']), role: "group", "aria-label": triggerProps.ariaLabel, "aria-labelledby": triggerProps.ariaLabelledBy }, children))));
 }
 //# sourceMappingURL=internal.js.map

package/expandable-section/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/expandable-section/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { KeyboardEvent, useCallback, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { KeyCode } from '../internal/keycode';\nimport { fireNonCancelableEvent } from '../internal/events';\n\nimport { ExpandableSectionProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport { ExpandableSectionContainer } from './expandable-section-container';\nimport { ExpandableSectionHeader } from './expandable-section-header';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\ntype InternalExpandableSectionProps = ExpandableSectionProps & InternalBaseComponentProps;\n\nexport default function InternalExpandableSection({\n  expanded: controlledExpanded,\n  defaultExpanded,\n  onChange,\n  variant = 'default',\n  children,\n  header,\n  disableContentPaddings,\n  __internalRootRef,\n  ...props\n}: InternalExpandableSectionProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const controlId = useUniqueId();\n  const triggerControlId = `${controlId}-trigger`;\n\n  const baseProps = getBaseProps(props);\n  const [expanded, setExpanded] = useControllable(controlledExpanded, onChange, defaultExpanded, {\n    componentName: 'ExpandableSection',\n    controlledProp: 'expanded',\n    changeHandler: 'onChange',\n  });\n\n  const onExpandChange = useCallback(\n    (expanded: boolean) => {\n      setExpanded(expanded);\n      fireNonCancelableEvent(onChange, { expanded });\n    },\n    [onChange, setExpanded]\n  );\n\n  const onClick = useCallback(() => {\n    onExpandChange(!expanded);\n  }, [onExpandChange, expanded]);\n\n  const onKeyUp = useCallback(\n    (event: KeyboardEvent<Element>) => {\n      const interactionKeys = [KeyCode.enter, KeyCode.space];\n\n      if (interactionKeys.indexOf(event.keyCode) !== -1) {\n        onExpandChange(!expanded);\n      }\n    },\n    [onExpandChange, expanded]\n  );\n\n  const onKeyDown = useCallback((event: KeyboardEvent<Element>) => {\n    if (event.keyCode === KeyCode.space) {\n      // Prevent the page from scrolling when toggling the component with the space bar.\n      event.preventDefault();\n    }\n  }, []);\n\n  const triggerProps = {\n    ariaControls: controlId,\n    ariaLabelledBy: triggerControlId,\n    onKeyUp,\n    onKeyDown,\n    onClick,\n  };\n\n  return (\n    <ExpandableSectionContainer\n      {...baseProps}\n      expanded={expanded}\n      className={clsx(baseProps.className, styles.root)}\n      variant={variant}\n      disableContentPaddings={disableContentPaddings}\n      header={\n        <ExpandableSectionHeader\n          id={triggerControlId}\n          className={clsx(styles.header, styles[`header-${variant}`])}\n          variant={variant}\n          expanded={!!expanded}\n          {...triggerProps}\n        >\n          {header}\n        </ExpandableSectionHeader>\n      }\n      __internalRootRef={__internalRootRef}\n    >\n      <CSSTransition in={expanded} timeout={30} classNames={{ enter: styles['content-enter'] }} nodeRef={ref}>\n        <div\n          id={controlId}\n          ref={ref}\n          className={clsx(styles.content, styles[`content-${variant}`], expanded && styles['content-expanded'])}\n          role=\"group\"\n          aria-labelledby={triggerControlId}\n        >\n          {children}\n        </div>\n      </CSSTransition>\n    </ExpandableSectionContainer>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/expandable-section/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { KeyboardEvent, useCallback, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { KeyCode } from '../internal/keycode';\nimport { fireNonCancelableEvent } from '../internal/events';\n\nimport { ExpandableSectionProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport { ExpandableSectionContainer } from './expandable-section-container';\nimport { ExpandableSectionHeader } from './expandable-section-header';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\ntype InternalExpandableSectionProps = ExpandableSectionProps & InternalBaseComponentProps;\n\nexport default function InternalExpandableSection({\n  expanded: controlledExpanded,\n  defaultExpanded,\n  onChange,\n  variant = 'default',\n  children,\n  header,\n  disableContentPaddings,\n  headerAriaLabel,\n  __internalRootRef,\n  ...props\n}: InternalExpandableSectionProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const controlId = useUniqueId();\n  const triggerControlId = `${controlId}-trigger`;\n\n  const baseProps = getBaseProps(props);\n  const [expanded, setExpanded] = useControllable(controlledExpanded, onChange, defaultExpanded, {\n    componentName: 'ExpandableSection',\n    controlledProp: 'expanded',\n    changeHandler: 'onChange',\n  });\n\n  const onExpandChange = useCallback(\n    (expanded: boolean) => {\n      setExpanded(expanded);\n      fireNonCancelableEvent(onChange, { expanded });\n    },\n    [onChange, setExpanded]\n  );\n\n  const onClick = useCallback(() => {\n    onExpandChange(!expanded);\n  }, [onExpandChange, expanded]);\n\n  const onKeyUp = useCallback(\n    (event: KeyboardEvent<Element>) => {\n      const interactionKeys = [KeyCode.enter, KeyCode.space];\n\n      if (interactionKeys.indexOf(event.keyCode) !== -1) {\n        onExpandChange(!expanded);\n      }\n    },\n    [onExpandChange, expanded]\n  );\n\n  const onKeyDown = useCallback((event: KeyboardEvent<Element>) => {\n    if (event.keyCode === KeyCode.space) {\n      // Prevent the page from scrolling when toggling the component with the space bar.\n      event.preventDefault();\n    }\n  }, []);\n\n  const triggerProps = {\n    ariaControls: controlId,\n    ariaLabel: headerAriaLabel,\n    ariaLabelledBy: headerAriaLabel ? undefined : triggerControlId,\n    onKeyUp,\n    onKeyDown,\n    onClick,\n  };\n\n  return (\n    <ExpandableSectionContainer\n      {...baseProps}\n      expanded={expanded}\n      className={clsx(baseProps.className, styles.root)}\n      variant={variant}\n      disableContentPaddings={disableContentPaddings}\n      header={\n        <ExpandableSectionHeader\n          id={triggerControlId}\n          className={clsx(styles.header, styles[`header-${variant}`])}\n          variant={variant}\n          expanded={!!expanded}\n          {...triggerProps}\n        >\n          {header}\n        </ExpandableSectionHeader>\n      }\n      __internalRootRef={__internalRootRef}\n    >\n      <CSSTransition in={expanded} timeout={30} classNames={{ enter: styles['content-enter'] }} nodeRef={ref}>\n        <div\n          id={controlId}\n          ref={ref}\n          className={clsx(styles.content, styles[`content-${variant}`], expanded && styles['content-expanded'])}\n          role=\"group\"\n          aria-label={triggerProps.ariaLabel}\n          aria-labelledby={triggerProps.ariaLabelledBy}\n        >\n          {children}\n        </div>\n      </CSSTransition>\n    </ExpandableSectionContainer>\n  );\n}\n"]}

package/internal/components/dropdown-status/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { RecoveryLinkProp } from '../../../select/utils/use-select';
 import { NonCancelableEventHandler } from '../../events';
 import { DropdownStatusProps } from './interfaces';
 export { DropdownStatusProps };
@@ -13,11 +14,12 @@ export interface DropdownStatusPropsExtended extends DropdownStatusProps {
      * to recover from the error.
      */
     onRecoveryClick?: NonCancelableEventHandler;
+    recoveryProps?: RecoveryLinkProp;
 }
 declare function DropdownStatus({ children }: {
     children: React.ReactNode;
 }): JSX.Element;
-declare type UseDropdownStatus = ({ statusType, empty, loadingText, finishedText, errorText, recoveryText, isEmpty, isNoMatch, noMatch, onRecoveryClick, }: DropdownStatusPropsExtended) => DropdownStatusResult;
+declare type UseDropdownStatus = ({ statusType, empty, loadingText, finishedText, errorText, recoveryText, isEmpty, isNoMatch, noMatch, onRecoveryClick, recoveryProps, }: DropdownStatusPropsExtended) => DropdownStatusResult;
 interface DropdownStatusResult {
     isSticky: boolean;
     content: React.ReactNode | null;

package/internal/components/dropdown-status/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown-status/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,OAAO,EAAE,yBAAyB,EAA0B,MAAM,cAAc,CAAC;AAGjF,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGnD,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B,MAAM,WAAW,2BAA4B,SAAQ,mBAAmB;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,yBAAyB,CAAC;CAC7C;AAED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,eAMlE;AAED,aAAK,iBAAiB,GAAG,CAAC,EACxB,UAAU,EACV,KAAK,EACL,WAAW,EACX,YAAY,EACZ,SAAS,EACT,YAAY,EACZ,OAAO,EACP,SAAS,EACT,OAAO,EACP,eAAe,GAChB,EAAE,2BAA2B,KAAK,oBAAoB,CAAC;AAExD,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IAChC,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,iBAAiB,EAAE,iBAgD/B,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown-status/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAGpE,OAAO,EACL,yBAAyB,EAI1B,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGnD,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B,MAAM,WAAW,2BAA4B,SAAQ,mBAAmB;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,yBAAyB,CAAC;IAC5C,aAAa,CAAC,EAAE,gBAAgB,CAAC;CAClC;AAED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,eAMlE;AAED,aAAK,iBAAiB,GAAG,CAAC,EACxB,UAAU,EACV,KAAK,EACL,WAAW,EACX,YAAY,EACZ,SAAS,EACT,YAAY,EACZ,OAAO,EACP,SAAS,EACT,OAAO,EACP,eAAe,EACf,aAAa,GACd,EAAE,2BAA2B,KAAK,oBAAoB,CAAC;AAExD,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IAChC,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,iBAAiB,EAAE,iBA0D/B,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/internal/components/dropdown-status/index.js

@@ -1,9 +1,10 @@
+import { __assign } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useRef } from 'react';
 import InternalLink from '../../../link/internal';
 import InternalStatusIndicator from '../../../status-indicator/internal';
-import { fireNonCancelableEvent } from '../../events';
+import { fireNonCancelableEvent, fireCancelableEvent, getBlurEventRelatedTarget, } from '../../events';
 import { usePrevious } from '../../hooks/use-previous';
 import styles from './styles.css.js';
 function DropdownStatus(_a) {
@@ -11,7 +12,7 @@ function DropdownStatus(_a) {
     return (React.createElement("div", { className: styles.root, "aria-live": "polite" }, children));
 }
 export var useDropdownStatus = function (_a) {
-    var statusType = _a.statusType, empty = _a.empty, loadingText = _a.loadingText, finishedText = _a.finishedText, errorText = _a.errorText, recoveryText = _a.recoveryText, isEmpty = _a.isEmpty, isNoMatch = _a.isNoMatch, noMatch = _a.noMatch, onRecoveryClick = _a.onRecoveryClick;
+    var statusType = _a.statusType, empty = _a.empty, loadingText = _a.loadingText, finishedText = _a.finishedText, errorText = _a.errorText, recoveryText = _a.recoveryText, isEmpty = _a.isEmpty, isNoMatch = _a.isNoMatch, noMatch = _a.noMatch, onRecoveryClick = _a.onRecoveryClick, recoveryProps = _a.recoveryProps;
     var linkRef = useRef(null);
     var focusRecoveryLink = function () { var _a; return (_a = linkRef.current) === null || _a === void 0 ? void 0 : _a.focus(); };
     var previousStatusType = usePrevious(statusType);
@@ -20,10 +21,12 @@ export var useDropdownStatus = function (_a) {
         statusResult.content = React.createElement(InternalStatusIndicator, { type: 'loading' }, loadingText);
     }
     else if (statusType === 'error') {
-        statusResult.content = (React.createElement(React.Fragment, null,
+        statusResult.content = (React.createElement("span", { ref: recoveryProps ? recoveryProps.ref : null, onBlur: function (event) {
+                return fireCancelableEvent(recoveryProps === null || recoveryProps === void 0 ? void 0 : recoveryProps.onBlur, { relatedTarget: getBlurEventRelatedTarget(event.nativeEvent) }, event);
+            } },
             React.createElement(InternalStatusIndicator, { type: "error", __animate: previousStatusType !== 'error' }, errorText),
             ' ',
-            recoveryText && (React.createElement(InternalLink, { ref: linkRef, onFollow: function () { return fireNonCancelableEvent(onRecoveryClick); }, variant: "recovery", className: styles.recovery }, recoveryText))));
+            recoveryText && (React.createElement(InternalLink, __assign({}, recoveryProps, { ref: linkRef, onFollow: function () { return fireNonCancelableEvent(onRecoveryClick); }, variant: "recovery", className: styles.recovery }), recoveryText))));
     }
     else if (isEmpty && empty) {
         statusResult.content = empty;