@cloudscape-design/components 3.0.72 → 3.0.74

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (144) hide show
  1. package/app-layout/toggles/index.d.ts.map +1 -1
  2. package/app-layout/toggles/index.js +2 -2
  3. package/app-layout/toggles/index.js.map +1 -1
  4. package/app-layout/visual-refresh/app-bar.d.ts.map +1 -1
  5. package/app-layout/visual-refresh/app-bar.js +2 -2
  6. package/app-layout/visual-refresh/app-bar.js.map +1 -1
  7. package/app-layout/visual-refresh/navigation.d.ts.map +1 -1
  8. package/app-layout/visual-refresh/navigation.js +1 -1
  9. package/app-layout/visual-refresh/navigation.js.map +1 -1
  10. package/app-layout/visual-refresh/tools.d.ts.map +1 -1
  11. package/app-layout/visual-refresh/tools.js +1 -1
  12. package/app-layout/visual-refresh/tools.js.map +1 -1
  13. package/app-layout/visual-refresh/trigger-button.d.ts.map +1 -1
  14. package/app-layout/visual-refresh/trigger-button.js +1 -1
  15. package/app-layout/visual-refresh/trigger-button.js.map +1 -1
  16. package/breadcrumb-group/item/styles.css.js +7 -7
  17. package/breadcrumb-group/item/styles.scoped.css +16 -15
  18. package/breadcrumb-group/item/styles.selectors.js +7 -7
  19. package/calendar/grid/index.d.ts +2 -2
  20. package/calendar/grid/index.d.ts.map +1 -1
  21. package/calendar/grid/index.js +64 -23
  22. package/calendar/grid/index.js.map +1 -1
  23. package/calendar/internal.d.ts.map +1 -1
  24. package/calendar/internal.js +3 -15
  25. package/calendar/internal.js.map +1 -1
  26. package/calendar/styles.css.js +18 -20
  27. package/calendar/styles.scoped.css +46 -58
  28. package/calendar/styles.selectors.js +18 -20
  29. package/date-range-picker/calendar/grids/grid.d.ts +1 -1
  30. package/date-range-picker/calendar/grids/grid.d.ts.map +1 -1
  31. package/date-range-picker/calendar/grids/grid.js +65 -9
  32. package/date-range-picker/calendar/grids/grid.js.map +1 -1
  33. package/date-range-picker/calendar/grids/index.d.ts.map +1 -1
  34. package/date-range-picker/calendar/grids/index.js +1 -0
  35. package/date-range-picker/calendar/grids/index.js.map +1 -1
  36. package/date-range-picker/calendar/grids/styles.css.js +30 -0
  37. package/date-range-picker/calendar/grids/{day/styles.scoped.css → styles.scoped.css} +60 -40
  38. package/date-range-picker/calendar/grids/styles.selectors.js +31 -0
  39. package/date-range-picker/index.js +2 -2
  40. package/date-range-picker/index.js.map +1 -1
  41. package/date-range-picker/styles.css.js +37 -40
  42. package/date-range-picker/styles.scoped.css +48 -67
  43. package/date-range-picker/styles.selectors.js +37 -40
  44. package/expandable-section/expandable-section-header.d.ts +3 -2
  45. package/expandable-section/expandable-section-header.d.ts.map +1 -1
  46. package/expandable-section/expandable-section-header.js +3 -3
  47. package/expandable-section/expandable-section-header.js.map +1 -1
  48. package/expandable-section/interfaces.d.ts +5 -0
  49. package/expandable-section/interfaces.d.ts.map +1 -1
  50. package/expandable-section/interfaces.js.map +1 -1
  51. package/expandable-section/internal.d.ts +1 -1
  52. package/expandable-section/internal.d.ts.map +1 -1
  53. package/expandable-section/internal.js +4 -3
  54. package/expandable-section/internal.js.map +1 -1
  55. package/internal/base-component/styles.scoped.css +4 -4
  56. package/internal/components/dropdown-status/index.d.ts +3 -1
  57. package/internal/components/dropdown-status/index.d.ts.map +1 -1
  58. package/internal/components/dropdown-status/index.js +7 -4
  59. package/internal/components/dropdown-status/index.js.map +1 -1
  60. package/internal/components/live-region/index.d.ts.map +1 -1
  61. package/internal/components/live-region/index.js +1 -0
  62. package/internal/components/live-region/index.js.map +1 -1
  63. package/internal/environment.js +1 -1
  64. package/internal/generated/styles/tokens.js +2 -2
  65. package/internal/generated/theming/index.cjs +3 -3
  66. package/internal/generated/theming/index.js +3 -3
  67. package/modal/internal.d.ts.map +1 -1
  68. package/modal/internal.js +6 -10
  69. package/modal/internal.js.map +1 -1
  70. package/multiselect/internal.d.ts.map +1 -1
  71. package/multiselect/internal.js +3 -2
  72. package/multiselect/internal.js.map +1 -1
  73. package/package.json +1 -1
  74. package/property-filter/controller.d.ts +2 -0
  75. package/property-filter/controller.d.ts.map +1 -1
  76. package/property-filter/controller.js +37 -0
  77. package/property-filter/controller.js.map +1 -1
  78. package/property-filter/index.d.ts.map +1 -1
  79. package/property-filter/index.js +21 -6
  80. package/property-filter/index.js.map +1 -1
  81. package/property-filter/interfaces.d.ts +9 -2
  82. package/property-filter/interfaces.d.ts.map +1 -1
  83. package/property-filter/interfaces.js +2 -0
  84. package/property-filter/interfaces.js.map +1 -1
  85. package/property-filter/property-editor.d.ts +13 -0
  86. package/property-filter/property-editor.d.ts.map +1 -0
  87. package/property-filter/property-editor.js +18 -0
  88. package/property-filter/property-editor.js.map +1 -0
  89. package/property-filter/property-filter-autosuggest.d.ts +1 -0
  90. package/property-filter/property-filter-autosuggest.d.ts.map +1 -1
  91. package/property-filter/property-filter-autosuggest.js +17 -3
  92. package/property-filter/property-filter-autosuggest.js.map +1 -1
  93. package/property-filter/styles.css.js +32 -24
  94. package/property-filter/styles.scoped.css +45 -27
  95. package/property-filter/styles.selectors.js +32 -24
  96. package/property-filter/token-editor.d.ts.map +1 -1
  97. package/property-filter/token-editor.js +17 -4
  98. package/property-filter/token-editor.js.map +1 -1
  99. package/property-filter/token.d.ts.map +1 -1
  100. package/property-filter/token.js +6 -3
  101. package/property-filter/token.js.map +1 -1
  102. package/select/internal.d.ts.map +1 -1
  103. package/select/internal.js +3 -2
  104. package/select/internal.js.map +1 -1
  105. package/select/parts/filter.d.ts +1 -1
  106. package/select/utils/use-select.d.ts +15 -1
  107. package/select/utils/use-select.d.ts.map +1 -1
  108. package/select/utils/use-select.js +11 -1
  109. package/select/utils/use-select.js.map +1 -1
  110. package/split-panel/index.d.ts.map +1 -1
  111. package/split-panel/index.js +8 -6
  112. package/split-panel/index.js.map +1 -1
  113. package/split-panel/interfaces.d.ts +1 -0
  114. package/split-panel/interfaces.d.ts.map +1 -1
  115. package/split-panel/interfaces.js.map +1 -1
  116. package/split-panel/utils/use-pointer-events.d.ts +1 -1
  117. package/split-panel/utils/use-pointer-events.d.ts.map +1 -1
  118. package/split-panel/utils/use-pointer-events.js +9 -5
  119. package/split-panel/utils/use-pointer-events.js.map +1 -1
  120. package/table/internal.d.ts.map +1 -1
  121. package/table/internal.js +8 -1
  122. package/table/internal.js.map +1 -1
  123. package/table/use-mouse-down-target.d.ts +6 -0
  124. package/table/use-mouse-down-target.d.ts.map +1 -0
  125. package/table/use-mouse-down-target.js +30 -0
  126. package/table/use-mouse-down-target.js.map +1 -0
  127. package/tabs/styles.css.js +21 -21
  128. package/tabs/styles.scoped.css +38 -37
  129. package/tabs/styles.selectors.js +21 -21
  130. package/test-utils/dom/date-range-picker/index.js +2 -2
  131. package/test-utils/dom/date-range-picker/index.js.map +1 -1
  132. package/test-utils/selectors/date-range-picker/index.js +2 -2
  133. package/test-utils/selectors/date-range-picker/index.js.map +1 -1
  134. package/test-utils/tsconfig.tsbuildinfo +1 -1
  135. package/calendar/grid/day/index.d.ts +0 -15
  136. package/calendar/grid/day/index.d.ts.map +0 -1
  137. package/calendar/grid/day/index.js +0 -47
  138. package/calendar/grid/day/index.js.map +0 -1
  139. package/date-range-picker/calendar/grids/day/index.d.ts +0 -27
  140. package/date-range-picker/calendar/grids/day/index.d.ts.map +0 -1
  141. package/date-range-picker/calendar/grids/day/index.js +0 -95
  142. package/date-range-picker/calendar/grids/day/index.js.map +0 -1
  143. package/date-range-picker/calendar/grids/day/styles.css.js +0 -26
  144. package/date-range-picker/calendar/grids/day/styles.selectors.js +0 -27
@@ -1,45 +1,42 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "calendar": "awsui_calendar_mgja0_x71bz_93",
5
- "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_mgja0_x71bz_1",
6
- "root": "awsui_root_mgja0_x71bz_120",
7
- "trigger-wrapper": "awsui_trigger-wrapper_mgja0_x71bz_132",
8
- "trigger-flexbox": "awsui_trigger-flexbox_mgja0_x71bz_136",
9
- "one-grid": "awsui_one-grid_mgja0_x71bz_144",
10
- "calendar-header": "awsui_calendar-header_mgja0_x71bz_147",
11
- "calendar-header-months-wrapper": "awsui_calendar-header-months-wrapper_mgja0_x71bz_153",
12
- "calendar-header-month": "awsui_calendar-header-month_mgja0_x71bz_153",
13
- "calendar-next-month-btn": "awsui_calendar-next-month-btn_mgja0_x71bz_173",
14
- "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_mgja0_x71bz_176",
15
- "calendar-day-names": "awsui_calendar-day-names_mgja0_x71bz_179",
16
- "calendar-day-name": "awsui_calendar-day-name_mgja0_x71bz_179",
17
- "calendar-week": "awsui_calendar-week_mgja0_x71bz_194",
18
- "first-grid": "awsui_first-grid_mgja0_x71bz_199",
19
- "second-grid": "awsui_second-grid_mgja0_x71bz_200",
20
- "grid": "awsui_grid_mgja0_x71bz_204",
21
- "date-and-time-wrapper": "awsui_date-and-time-wrapper_mgja0_x71bz_208",
22
- "date-only": "awsui_date-only_mgja0_x71bz_212",
23
- "date-and-time-constrainttext": "awsui_date-and-time-constrainttext_mgja0_x71bz_218",
24
- "footer": "awsui_footer_mgja0_x71bz_225",
25
- "has-clear-button": "awsui_has-clear-button_mgja0_x71bz_232",
26
- "footer-button-wrapper": "awsui_footer-button-wrapper_mgja0_x71bz_239",
27
- "icon-wrapper": "awsui_icon-wrapper_mgja0_x71bz_243",
28
- "label": "awsui_label_mgja0_x71bz_248",
29
- "label-enabled": "awsui_label-enabled_mgja0_x71bz_253",
30
- "label-text": "awsui_label-text_mgja0_x71bz_257",
31
- "mode-switch": "awsui_mode-switch_mgja0_x71bz_262",
32
- "dropdown": "awsui_dropdown_mgja0_x71bz_266",
33
- "dropdown-content": "awsui_dropdown-content_mgja0_x71bz_282",
34
- "start-date-input": "awsui_start-date-input_mgja0_x71bz_291",
35
- "start-time-input": "awsui_start-time-input_mgja0_x71bz_292",
36
- "end-date-input": "awsui_end-date-input_mgja0_x71bz_293",
37
- "end-time-input": "awsui_end-time-input_mgja0_x71bz_294",
38
- "validation-section": "awsui_validation-section_mgja0_x71bz_298",
39
- "validation-error": "awsui_validation-error_mgja0_x71bz_302",
40
- "clear-button": "awsui_clear-button_mgja0_x71bz_306",
41
- "apply-button": "awsui_apply-button_mgja0_x71bz_310",
42
- "cancel-button": "awsui_cancel-button_mgja0_x71bz_314",
43
- "calendar-aria-live": "awsui_calendar-aria-live_mgja0_x71bz_318"
4
+ "calendar": "awsui_calendar_mgja0_1vo3v_93",
5
+ "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_mgja0_1vo3v_1",
6
+ "root": "awsui_root_mgja0_1vo3v_120",
7
+ "trigger-wrapper": "awsui_trigger-wrapper_mgja0_1vo3v_132",
8
+ "trigger-flexbox": "awsui_trigger-flexbox_mgja0_1vo3v_136",
9
+ "one-grid": "awsui_one-grid_mgja0_1vo3v_144",
10
+ "calendar-header": "awsui_calendar-header_mgja0_1vo3v_147",
11
+ "calendar-header-months-wrapper": "awsui_calendar-header-months-wrapper_mgja0_1vo3v_153",
12
+ "calendar-header-month": "awsui_calendar-header-month_mgja0_1vo3v_153",
13
+ "calendar-next-month-btn": "awsui_calendar-next-month-btn_mgja0_1vo3v_173",
14
+ "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_mgja0_1vo3v_176",
15
+ "first-grid": "awsui_first-grid_mgja0_1vo3v_180",
16
+ "second-grid": "awsui_second-grid_mgja0_1vo3v_181",
17
+ "date-and-time-wrapper": "awsui_date-and-time-wrapper_mgja0_1vo3v_185",
18
+ "date-only": "awsui_date-only_mgja0_1vo3v_189",
19
+ "date-and-time-constrainttext": "awsui_date-and-time-constrainttext_mgja0_1vo3v_195",
20
+ "footer": "awsui_footer_mgja0_1vo3v_202",
21
+ "has-clear-button": "awsui_has-clear-button_mgja0_1vo3v_209",
22
+ "footer-button-wrapper": "awsui_footer-button-wrapper_mgja0_1vo3v_216",
23
+ "icon-wrapper": "awsui_icon-wrapper_mgja0_1vo3v_220",
24
+ "label": "awsui_label_mgja0_1vo3v_225",
25
+ "label-enabled": "awsui_label-enabled_mgja0_1vo3v_230",
26
+ "label-text": "awsui_label-text_mgja0_1vo3v_234",
27
+ "label-token-nowrap": "awsui_label-token-nowrap_mgja0_1vo3v_239",
28
+ "mode-switch": "awsui_mode-switch_mgja0_1vo3v_243",
29
+ "dropdown": "awsui_dropdown_mgja0_1vo3v_247",
30
+ "dropdown-content": "awsui_dropdown-content_mgja0_1vo3v_263",
31
+ "start-date-input": "awsui_start-date-input_mgja0_1vo3v_272",
32
+ "start-time-input": "awsui_start-time-input_mgja0_1vo3v_273",
33
+ "end-date-input": "awsui_end-date-input_mgja0_1vo3v_274",
34
+ "end-time-input": "awsui_end-time-input_mgja0_1vo3v_275",
35
+ "validation-section": "awsui_validation-section_mgja0_1vo3v_279",
36
+ "validation-error": "awsui_validation-error_mgja0_1vo3v_283",
37
+ "clear-button": "awsui_clear-button_mgja0_1vo3v_287",
38
+ "apply-button": "awsui_apply-button_mgja0_1vo3v_291",
39
+ "cancel-button": "awsui_cancel-button_mgja0_1vo3v_295",
40
+ "calendar-aria-live": "awsui_calendar-aria-live_mgja0_1vo3v_299"
44
41
  };
45
42
 
@@ -90,11 +90,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
90
90
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
91
91
  SPDX-License-Identifier: Apache-2.0
92
92
  */
93
- .awsui_calendar_mgja0_x71bz_93:not(#\9) {
94
- 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);
93
+ .awsui_calendar_mgja0_1vo3v_93:not(#\9) {
94
+ animation: awsui_awsui-motion-fade-in-0_mgja0_1vo3v_1 var(--motion-duration-show-quick-tyaalm, 135ms) var(--motion-easing-show-quick-1fcgbv, ease-out);
95
95
  animation-fill-mode: both;
96
96
  }
97
- @keyframes awsui_awsui-motion-fade-in-0_mgja0_x71bz_1 {
97
+ @keyframes awsui_awsui-motion-fade-in-0_mgja0_1vo3v_1 {
98
98
  from {
99
99
  opacity: 0;
100
100
  }
@@ -103,12 +103,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
103
103
  }
104
104
  }
105
105
  @media (prefers-reduced-motion: reduce) {
106
- .awsui_calendar_mgja0_x71bz_93:not(#\9) {
106
+ .awsui_calendar_mgja0_1vo3v_93:not(#\9) {
107
107
  animation: none;
108
108
  transition: none;
109
109
  }
110
110
  }
111
- .awsui-motion-disabled .awsui_calendar_mgja0_x71bz_93:not(#\9), .awsui-mode-entering .awsui_calendar_mgja0_x71bz_93:not(#\9) {
111
+ .awsui-motion-disabled .awsui_calendar_mgja0_1vo3v_93:not(#\9), .awsui-mode-entering .awsui_calendar_mgja0_1vo3v_93:not(#\9) {
112
112
  animation: none;
113
113
  transition: none;
114
114
  }
@@ -117,7 +117,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
117
117
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
118
118
  SPDX-License-Identifier: Apache-2.0
119
119
  */
120
- .awsui_root_mgja0_x71bz_120:not(#\9) {
120
+ .awsui_root_mgja0_1vo3v_120:not(#\9) {
121
121
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
122
122
  border-collapse: separate;
123
123
  border-spacing: 0;
@@ -155,28 +155,28 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
155
155
  max-width: 32em;
156
156
  }
157
157
 
158
- .awsui_trigger-wrapper_mgja0_x71bz_132:not(#\9) {
158
+ .awsui_trigger-wrapper_mgja0_1vo3v_132:not(#\9) {
159
159
  min-width: calc(var(--size-calendar-grid-width-lxsx0p, 238px) + 2 * var(--space-l-4vl6xu, 20px));
160
160
  }
161
161
 
162
- .awsui_trigger-flexbox_mgja0_x71bz_136:not(#\9) {
162
+ .awsui_trigger-flexbox_mgja0_1vo3v_136:not(#\9) {
163
163
  display: flex;
164
164
  }
165
165
 
166
- .awsui_calendar_mgja0_x71bz_93:not(#\9) {
166
+ .awsui_calendar_mgja0_1vo3v_93:not(#\9) {
167
167
  display: block;
168
168
  width: calc(2 * var(--size-calendar-grid-width-lxsx0p, 238px) + var(--space-xs-rsr2qu, 8px));
169
169
  }
170
- .awsui_calendar_mgja0_x71bz_93.awsui_one-grid_mgja0_x71bz_144:not(#\9) {
170
+ .awsui_calendar_mgja0_1vo3v_93.awsui_one-grid_mgja0_1vo3v_144:not(#\9) {
171
171
  width: var(--size-calendar-grid-width-lxsx0p, 238px);
172
172
  }
173
- .awsui_calendar-header_mgja0_x71bz_147:not(#\9) {
173
+ .awsui_calendar-header_mgja0_1vo3v_147:not(#\9) {
174
174
  display: flex;
175
175
  justify-content: space-between;
176
176
  align-items: center;
177
177
  position: relative;
178
178
  }
179
- .awsui_calendar-header-months-wrapper_mgja0_x71bz_153:not(#\9) {
179
+ .awsui_calendar-header-months-wrapper_mgja0_1vo3v_153:not(#\9) {
180
180
  position: absolute;
181
181
  right: 0;
182
182
  left: 0;
@@ -188,7 +188,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
188
188
  flex: 1;
189
189
  pointer-events: none;
190
190
  }
191
- .awsui_calendar-header-month_mgja0_x71bz_153:not(#\9) {
191
+ .awsui_calendar-header-month_mgja0_1vo3v_153:not(#\9) {
192
192
  font-size: var(--font-body-m-size-sregvd, 14px);
193
193
  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
194
194
  font-weight: 700;
@@ -196,153 +196,134 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
196
196
  display: flex;
197
197
  pointer-events: auto;
198
198
  }
199
- .awsui_calendar-next-month-btn_mgja0_x71bz_173:not(#\9) {
199
+ .awsui_calendar-next-month-btn_mgja0_1vo3v_173:not(#\9) {
200
200
  /* used for identifying element */
201
201
  }
202
- .awsui_calendar-prev-month-btn_mgja0_x71bz_176:not(#\9) {
202
+ .awsui_calendar-prev-month-btn_mgja0_1vo3v_176:not(#\9) {
203
203
  /* used for identifying element */
204
204
  }
205
- .awsui_calendar-day-names_mgja0_x71bz_179:not(#\9) {
206
- display: flex;
207
- justify-content: stretch;
208
- }
209
- .awsui_calendar-day-name_mgja0_x71bz_179:not(#\9) {
210
- flex: 1 1 0%;
211
- width: 0;
212
- word-break: break-word;
213
- text-align: center;
214
- padding: var(--space-s-hv8c1d, 12px) 0 var(--space-xxs-ynfts5, 4px);
215
- color: var(--color-text-calendar-month-elf7e9, #5f6b7a);
216
- font-size: var(--font-body-s-size-ukw2p9, 12px);
217
- line-height: var(--font-body-s-line-height-kdsbrl, 16px);
218
- letter-spacing: var(--font-body-s-letter-spacing-cy0oxj, 0.005em);
219
- }
220
- .awsui_calendar-week_mgja0_x71bz_194:not(#\9) {
221
- display: flex;
222
- justify-content: stretch;
223
- }
224
205
 
225
- .awsui_first-grid_mgja0_x71bz_199:not(#\9),
226
- .awsui_second-grid_mgja0_x71bz_200:not(#\9) {
206
+ .awsui_first-grid_mgja0_1vo3v_180:not(#\9),
207
+ .awsui_second-grid_mgja0_1vo3v_181:not(#\9) {
227
208
  /* used in test-utils */
228
209
  }
229
210
 
230
- .awsui_grid_mgja0_x71bz_204:not(#\9) {
231
- width: var(--size-calendar-grid-width-lxsx0p, 238px);
232
- }
233
-
234
- .awsui_date-and-time-wrapper_mgja0_x71bz_208:not(#\9) {
211
+ .awsui_date-and-time-wrapper_mgja0_1vo3v_185:not(#\9) {
235
212
  width: var(--size-calendar-grid-width-lxsx0p, 238px);
236
213
  }
237
214
 
238
- .awsui_date-and-time-wrapper_mgja0_x71bz_208:not(#\9):not(.awsui_date-only_mgja0_x71bz_212) {
215
+ .awsui_date-and-time-wrapper_mgja0_1vo3v_185:not(#\9):not(.awsui_date-only_mgja0_1vo3v_189) {
239
216
  display: grid;
240
217
  column-gap: var(--space-xs-rsr2qu, 8px);
241
218
  grid-template-columns: 1fr 1fr;
242
219
  }
243
220
 
244
- .awsui_date-and-time-constrainttext_mgja0_x71bz_218:not(#\9) {
221
+ .awsui_date-and-time-constrainttext_mgja0_1vo3v_195:not(#\9) {
245
222
  color: var(--color-text-form-secondary-ih9x7l, #5f6b7a);
246
223
  font-size: var(--font-body-s-size-ukw2p9, 12px);
247
224
  line-height: var(--font-body-s-line-height-kdsbrl, 16px);
248
225
  letter-spacing: var(--font-body-s-letter-spacing-cy0oxj, 0.005em);
249
226
  }
250
227
 
251
- .awsui_footer_mgja0_x71bz_225:not(#\9) {
228
+ .awsui_footer_mgja0_1vo3v_202:not(#\9) {
252
229
  display: flex;
253
230
  flex-wrap: wrap;
254
231
  justify-content: flex-end;
255
232
  border-top: 1px solid var(--color-border-dropdown-item-default-faosd8, #e9ebed);
256
233
  padding: 0 var(--space-l-4vl6xu, 20px) var(--space-s-hv8c1d, 12px);
257
234
  }
258
- .awsui_footer_mgja0_x71bz_225.awsui_has-clear-button_mgja0_x71bz_232:not(#\9) {
235
+ .awsui_footer_mgja0_1vo3v_202.awsui_has-clear-button_mgja0_1vo3v_209:not(#\9) {
259
236
  justify-content: space-between;
260
237
  }
261
- .awsui_footer_mgja0_x71bz_225.awsui_one-grid_mgja0_x71bz_144:not(#\9) {
238
+ .awsui_footer_mgja0_1vo3v_202.awsui_one-grid_mgja0_1vo3v_144:not(#\9) {
262
239
  padding: 0 var(--space-xs-rsr2qu, 8px) var(--space-s-hv8c1d, 12px);
263
240
  }
264
241
 
265
- .awsui_footer-button-wrapper_mgja0_x71bz_239:not(#\9) {
242
+ .awsui_footer-button-wrapper_mgja0_1vo3v_216:not(#\9) {
266
243
  padding-top: var(--space-s-hv8c1d, 12px);
267
244
  }
268
245
 
269
- .awsui_icon-wrapper_mgja0_x71bz_243:not(#\9) {
246
+ .awsui_icon-wrapper_mgja0_1vo3v_220:not(#\9) {
270
247
  color: var(--color-text-interactive-default-eg5fsa, #414d5c);
271
248
  margin-right: var(--space-xs-rsr2qu, 8px);
272
249
  }
273
250
 
274
- .awsui_label_mgja0_x71bz_248:not(#\9) {
251
+ .awsui_label_mgja0_1vo3v_225:not(#\9) {
275
252
  -webkit-user-select: text;
276
253
  user-select: text;
277
254
  cursor: default;
278
255
  }
279
256
 
280
- .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 {
257
+ .awsui_label_mgja0_1vo3v_225.awsui_label-enabled_mgja0_1vo3v_230:not(#\9):hover > .awsui_trigger-flexbox_mgja0_1vo3v_136 > .awsui_icon-wrapper_mgja0_1vo3v_220 {
281
258
  color: var(--color-text-interactive-hover-v3lasm, #000716);
282
259
  }
283
260
 
284
- .awsui_label-text_mgja0_x71bz_257:not(#\9) {
261
+ .awsui_label-text_mgja0_1vo3v_234:not(#\9) {
285
262
  color: var(--color-text-input-placeholder-j53j3c, #5f6b7a);
286
263
  font-style: italic;
287
264
  }
288
265
 
289
- .awsui_mode-switch_mgja0_x71bz_262:not(#\9) {
266
+ .awsui_label-token-nowrap_mgja0_1vo3v_239:not(#\9) {
267
+ white-space: nowrap;
268
+ }
269
+
270
+ .awsui_mode-switch_mgja0_1vo3v_243:not(#\9) {
290
271
  /* used in test-utils */
291
272
  }
292
273
 
293
- .awsui_dropdown_mgja0_x71bz_266:not(#\9) {
274
+ .awsui_dropdown_mgja0_1vo3v_247:not(#\9) {
294
275
  overflow: auto;
295
276
  border-top: 1px solid var(--color-border-container-top-srcvx4, transparent);
296
277
  border-bottom: 1px solid var(--color-border-container-top-srcvx4, transparent);
297
278
  border-radius: var(--border-radius-dropdown-ujknaf, 8px);
298
279
  }
299
- .awsui_dropdown_mgja0_x71bz_266:not(#\9):focus {
280
+ .awsui_dropdown_mgja0_1vo3v_247:not(#\9):focus {
300
281
  outline: none;
301
282
  }
302
- .awsui_dropdown_mgja0_x71bz_266[data-awsui-focus-visible=true]:not(#\9):focus {
283
+ .awsui_dropdown_mgja0_1vo3v_247[data-awsui-focus-visible=true]:not(#\9):focus {
303
284
  outline: 2px dotted transparent;
304
285
  outline-offset: 2px;
305
286
  border-radius: var(--border-radius-dropdown-ujknaf, 8px);
306
287
  box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
307
288
  }
308
289
 
309
- .awsui_dropdown-content_mgja0_x71bz_282:not(#\9) {
290
+ .awsui_dropdown-content_mgja0_1vo3v_263:not(#\9) {
310
291
  -webkit-user-select: text;
311
292
  user-select: text;
312
293
  background-color: var(--color-background-container-content-i8i4a0, #ffffff);
313
294
  width: calc(2 * var(--size-calendar-grid-width-lxsx0p, 238px) + var(--space-xs-rsr2qu, 8px) + 2 * var(--space-l-4vl6xu, 20px));
314
295
  }
315
- .awsui_dropdown-content_mgja0_x71bz_282.awsui_one-grid_mgja0_x71bz_144:not(#\9) {
296
+ .awsui_dropdown-content_mgja0_1vo3v_263.awsui_one-grid_mgja0_1vo3v_144:not(#\9) {
316
297
  width: calc(var(--size-calendar-grid-width-lxsx0p, 238px) + 2 * var(--space-l-4vl6xu, 20px));
317
298
  }
318
299
 
319
- .awsui_start-date-input_mgja0_x71bz_291:not(#\9),
320
- .awsui_start-time-input_mgja0_x71bz_292:not(#\9),
321
- .awsui_end-date-input_mgja0_x71bz_293:not(#\9),
322
- .awsui_end-time-input_mgja0_x71bz_294:not(#\9) {
300
+ .awsui_start-date-input_mgja0_1vo3v_272:not(#\9),
301
+ .awsui_start-time-input_mgja0_1vo3v_273:not(#\9),
302
+ .awsui_end-date-input_mgja0_1vo3v_274:not(#\9),
303
+ .awsui_end-time-input_mgja0_1vo3v_275:not(#\9) {
323
304
  /* used in test-utils */
324
305
  }
325
306
 
326
- .awsui_validation-section_mgja0_x71bz_298:not(#\9) {
307
+ .awsui_validation-section_mgja0_1vo3v_279:not(#\9) {
327
308
  /* used in test-utils */
328
309
  }
329
310
 
330
- .awsui_validation-error_mgja0_x71bz_302:not(#\9) {
311
+ .awsui_validation-error_mgja0_1vo3v_283:not(#\9) {
331
312
  /* used in test-utils */
332
313
  }
333
314
 
334
- .awsui_clear-button_mgja0_x71bz_306:not(#\9) {
315
+ .awsui_clear-button_mgja0_1vo3v_287:not(#\9) {
335
316
  /* used in test-utils */
336
317
  }
337
318
 
338
- .awsui_apply-button_mgja0_x71bz_310:not(#\9) {
319
+ .awsui_apply-button_mgja0_1vo3v_291:not(#\9) {
339
320
  /* used in test-utils */
340
321
  }
341
322
 
342
- .awsui_cancel-button_mgja0_x71bz_314:not(#\9) {
323
+ .awsui_cancel-button_mgja0_1vo3v_295:not(#\9) {
343
324
  /* used in test-utils */
344
325
  }
345
326
 
346
- .awsui_calendar-aria-live_mgja0_x71bz_318:not(#\9) {
327
+ .awsui_calendar-aria-live_mgja0_1vo3v_299:not(#\9) {
347
328
  /* used in test-utils */
348
329
  }
@@ -2,45 +2,42 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "calendar": "awsui_calendar_mgja0_x71bz_93",
6
- "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_mgja0_x71bz_1",
7
- "root": "awsui_root_mgja0_x71bz_120",
8
- "trigger-wrapper": "awsui_trigger-wrapper_mgja0_x71bz_132",
9
- "trigger-flexbox": "awsui_trigger-flexbox_mgja0_x71bz_136",
10
- "one-grid": "awsui_one-grid_mgja0_x71bz_144",
11
- "calendar-header": "awsui_calendar-header_mgja0_x71bz_147",
12
- "calendar-header-months-wrapper": "awsui_calendar-header-months-wrapper_mgja0_x71bz_153",
13
- "calendar-header-month": "awsui_calendar-header-month_mgja0_x71bz_153",
14
- "calendar-next-month-btn": "awsui_calendar-next-month-btn_mgja0_x71bz_173",
15
- "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_mgja0_x71bz_176",
16
- "calendar-day-names": "awsui_calendar-day-names_mgja0_x71bz_179",
17
- "calendar-day-name": "awsui_calendar-day-name_mgja0_x71bz_179",
18
- "calendar-week": "awsui_calendar-week_mgja0_x71bz_194",
19
- "first-grid": "awsui_first-grid_mgja0_x71bz_199",
20
- "second-grid": "awsui_second-grid_mgja0_x71bz_200",
21
- "grid": "awsui_grid_mgja0_x71bz_204",
22
- "date-and-time-wrapper": "awsui_date-and-time-wrapper_mgja0_x71bz_208",
23
- "date-only": "awsui_date-only_mgja0_x71bz_212",
24
- "date-and-time-constrainttext": "awsui_date-and-time-constrainttext_mgja0_x71bz_218",
25
- "footer": "awsui_footer_mgja0_x71bz_225",
26
- "has-clear-button": "awsui_has-clear-button_mgja0_x71bz_232",
27
- "footer-button-wrapper": "awsui_footer-button-wrapper_mgja0_x71bz_239",
28
- "icon-wrapper": "awsui_icon-wrapper_mgja0_x71bz_243",
29
- "label": "awsui_label_mgja0_x71bz_248",
30
- "label-enabled": "awsui_label-enabled_mgja0_x71bz_253",
31
- "label-text": "awsui_label-text_mgja0_x71bz_257",
32
- "mode-switch": "awsui_mode-switch_mgja0_x71bz_262",
33
- "dropdown": "awsui_dropdown_mgja0_x71bz_266",
34
- "dropdown-content": "awsui_dropdown-content_mgja0_x71bz_282",
35
- "start-date-input": "awsui_start-date-input_mgja0_x71bz_291",
36
- "start-time-input": "awsui_start-time-input_mgja0_x71bz_292",
37
- "end-date-input": "awsui_end-date-input_mgja0_x71bz_293",
38
- "end-time-input": "awsui_end-time-input_mgja0_x71bz_294",
39
- "validation-section": "awsui_validation-section_mgja0_x71bz_298",
40
- "validation-error": "awsui_validation-error_mgja0_x71bz_302",
41
- "clear-button": "awsui_clear-button_mgja0_x71bz_306",
42
- "apply-button": "awsui_apply-button_mgja0_x71bz_310",
43
- "cancel-button": "awsui_cancel-button_mgja0_x71bz_314",
44
- "calendar-aria-live": "awsui_calendar-aria-live_mgja0_x71bz_318"
5
+ "calendar": "awsui_calendar_mgja0_1vo3v_93",
6
+ "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_mgja0_1vo3v_1",
7
+ "root": "awsui_root_mgja0_1vo3v_120",
8
+ "trigger-wrapper": "awsui_trigger-wrapper_mgja0_1vo3v_132",
9
+ "trigger-flexbox": "awsui_trigger-flexbox_mgja0_1vo3v_136",
10
+ "one-grid": "awsui_one-grid_mgja0_1vo3v_144",
11
+ "calendar-header": "awsui_calendar-header_mgja0_1vo3v_147",
12
+ "calendar-header-months-wrapper": "awsui_calendar-header-months-wrapper_mgja0_1vo3v_153",
13
+ "calendar-header-month": "awsui_calendar-header-month_mgja0_1vo3v_153",
14
+ "calendar-next-month-btn": "awsui_calendar-next-month-btn_mgja0_1vo3v_173",
15
+ "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_mgja0_1vo3v_176",
16
+ "first-grid": "awsui_first-grid_mgja0_1vo3v_180",
17
+ "second-grid": "awsui_second-grid_mgja0_1vo3v_181",
18
+ "date-and-time-wrapper": "awsui_date-and-time-wrapper_mgja0_1vo3v_185",
19
+ "date-only": "awsui_date-only_mgja0_1vo3v_189",
20
+ "date-and-time-constrainttext": "awsui_date-and-time-constrainttext_mgja0_1vo3v_195",
21
+ "footer": "awsui_footer_mgja0_1vo3v_202",
22
+ "has-clear-button": "awsui_has-clear-button_mgja0_1vo3v_209",
23
+ "footer-button-wrapper": "awsui_footer-button-wrapper_mgja0_1vo3v_216",
24
+ "icon-wrapper": "awsui_icon-wrapper_mgja0_1vo3v_220",
25
+ "label": "awsui_label_mgja0_1vo3v_225",
26
+ "label-enabled": "awsui_label-enabled_mgja0_1vo3v_230",
27
+ "label-text": "awsui_label-text_mgja0_1vo3v_234",
28
+ "label-token-nowrap": "awsui_label-token-nowrap_mgja0_1vo3v_239",
29
+ "mode-switch": "awsui_mode-switch_mgja0_1vo3v_243",
30
+ "dropdown": "awsui_dropdown_mgja0_1vo3v_247",
31
+ "dropdown-content": "awsui_dropdown-content_mgja0_1vo3v_263",
32
+ "start-date-input": "awsui_start-date-input_mgja0_1vo3v_272",
33
+ "start-time-input": "awsui_start-time-input_mgja0_1vo3v_273",
34
+ "end-date-input": "awsui_end-date-input_mgja0_1vo3v_274",
35
+ "end-time-input": "awsui_end-time-input_mgja0_1vo3v_275",
36
+ "validation-section": "awsui_validation-section_mgja0_1vo3v_279",
37
+ "validation-error": "awsui_validation-error_mgja0_1vo3v_283",
38
+ "clear-button": "awsui_clear-button_mgja0_1vo3v_287",
39
+ "apply-button": "awsui_apply-button_mgja0_1vo3v_291",
40
+ "cancel-button": "awsui_cancel-button_mgja0_1vo3v_295",
41
+ "calendar-aria-live": "awsui_calendar-aria-live_mgja0_1vo3v_299"
45
42
  };
46
43
 
@@ -7,11 +7,12 @@ interface ExpandableSectionHeaderProps {
7
7
  children?: ReactNode;
8
8
  expanded: boolean;
9
9
  ariaControls: string;
10
- ariaLabelledBy: string;
10
+ ariaLabelledBy?: string;
11
+ ariaLabel?: string;
11
12
  onKeyUp: KeyboardEventHandler;
12
13
  onKeyDown: KeyboardEventHandler;
13
14
  onClick: MouseEventHandler;
14
15
  }
15
- export declare const ExpandableSectionHeader: ({ id, className, variant, children, expanded, ariaControls, ariaLabelledBy, onKeyUp, onKeyDown, onClick, }: ExpandableSectionHeaderProps) => JSX.Element;
16
+ export declare const ExpandableSectionHeader: ({ id, className, variant, children, expanded, ariaControls, ariaLabel, ariaLabelledBy, onKeyUp, onKeyDown, onClick, }: ExpandableSectionHeaderProps) => JSX.Element;
16
17
  export {};
17
18
  //# sourceMappingURL=expandable-section-header.d.ts.map
@@ -1 +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"}
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,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"}
@@ -5,7 +5,7 @@ import InternalIcon from '../icon/internal';
5
5
  import clsx from 'clsx';
6
6
  import styles from './styles.css.js';
7
7
  export var ExpandableSectionHeader = function (_a) {
8
- 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;
8
+ 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;
9
9
  var focusVisible = useFocusVisible();
10
10
  var icon = (React.createElement(InternalIcon, { size: variant === 'container' ? 'medium' : 'normal', className: clsx(styles.icon, expanded && styles.expanded), name: "caret-down-filled" }));
11
11
  var ariaAttributes = {
@@ -15,10 +15,10 @@ export var ExpandableSectionHeader = function (_a) {
15
15
  var triggerClassName = clsx(styles.trigger, styles["trigger-".concat(variant)], expanded && styles['trigger-expanded']);
16
16
  if (variant === 'navigation') {
17
17
  return (React.createElement("div", { id: id, className: clsx(className, triggerClassName), onClick: onClick },
18
- React.createElement("button", __assign({ className: styles['icon-container'], type: "button", "aria-labelledby": ariaLabelledBy }, focusVisible, ariaAttributes), icon),
18
+ React.createElement("button", __assign({ className: styles['icon-container'], type: "button", "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel }, focusVisible, ariaAttributes), icon),
19
19
  children));
20
20
  }
21
- 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),
21
+ 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),
22
22
  React.createElement("div", { className: styles['icon-container'] }, icon),
23
23
  children));
24
24
  };
@@ -1 +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"]}
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;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"]}
@@ -41,6 +41,11 @@ export interface ExpandableSectionProps extends BaseComponentProps {
41
41
  * When using the container variant, use the Header component. Otherwise, use plain text.
42
42
  */
43
43
  header?: React.ReactNode;
44
+ /**
45
+ * Adds `aria-label` to the header element.
46
+ * Use to assign unique labels when there are multiple expandable sections with the same header text on one page.
47
+ */
48
+ headerAriaLabel?: string;
44
49
  /**
45
50
  * Called when the state changes (that is, when the user expands or collapses the component).
46
51
  * The event `detail` contains the current value of the `expanded` property.
@@ -1 +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"}
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,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC;CAC3E"}
@@ -1 +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"]}
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 * 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"]}
@@ -1,6 +1,6 @@
1
1
  import { ExpandableSectionProps } from './interfaces';
2
2
  import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
3
3
  declare type InternalExpandableSectionProps = ExpandableSectionProps & InternalBaseComponentProps;
4
- export default function InternalExpandableSection({ expanded: controlledExpanded, defaultExpanded, onChange, variant, children, header, disableContentPaddings, __internalRootRef, ...props }: InternalExpandableSectionProps): JSX.Element;
4
+ export default function InternalExpandableSection({ expanded: controlledExpanded, defaultExpanded, onChange, variant, children, header, disableContentPaddings, headerAriaLabel, __internalRootRef, ...props }: InternalExpandableSectionProps): JSX.Element;
5
5
  export {};
6
6
  //# sourceMappingURL=internal.d.ts.map
@@ -1 +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"}
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,eAAe,EACf,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,8BAA8B,eAqFhC"}
@@ -13,7 +13,7 @@ import styles from './styles.css.js';
13
13
  import { ExpandableSectionContainer } from './expandable-section-container';
14
14
  import { ExpandableSectionHeader } from './expandable-section-header';
15
15
  export default function InternalExpandableSection(_a) {
16
- 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"]);
16
+ 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"]);
17
17
  var ref = useRef(null);
18
18
  var controlId = useUniqueId();
19
19
  var triggerControlId = "".concat(controlId, "-trigger");
@@ -44,13 +44,14 @@ export default function InternalExpandableSection(_a) {
44
44
  }, []);
45
45
  var triggerProps = {
46
46
  ariaControls: controlId,
47
- ariaLabelledBy: triggerControlId,
47
+ ariaLabel: headerAriaLabel,
48
+ ariaLabelledBy: headerAriaLabel ? undefined : triggerControlId,
48
49
  onKeyUp: onKeyUp,
49
50
  onKeyDown: onKeyDown,
50
51
  onClick: onClick
51
52
  };
52
53
  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 }),
53
54
  React.createElement(CSSTransition, { "in": expanded, timeout: 30, classNames: { enter: styles['content-enter'] }, nodeRef: ref },
54
- 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))));
55
+ 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))));
55
56
  }
56
57
  //# sourceMappingURL=internal.js.map