@cloudscape-design/components-themeable 3.0.1164 → 3.0.1166

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 (157) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/app-layout/visual-refresh-toolbar/drawer/styles.scss +1 -1
  3. package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +132 -127
  4. package/lib/internal/scss/table/resizer/styles.scss +7 -6
  5. package/lib/internal/scss/tabs/tab-header-bar.scss +53 -21
  6. package/lib/internal/template/alert/styles.css.js +27 -27
  7. package/lib/internal/template/alert/styles.scoped.css +50 -50
  8. package/lib/internal/template/alert/styles.selectors.js +27 -27
  9. package/lib/internal/template/annotation-context/annotation/styles.css.js +13 -13
  10. package/lib/internal/template/annotation-context/annotation/styles.scoped.css +21 -21
  11. package/lib/internal/template/annotation-context/annotation/styles.selectors.js +13 -13
  12. package/lib/internal/template/app-layout/notifications/styles.css.js +3 -3
  13. package/lib/internal/template/app-layout/notifications/styles.scoped.css +7 -7
  14. package/lib/internal/template/app-layout/notifications/styles.selectors.js +3 -3
  15. package/lib/internal/template/app-layout/runtime-drawer/index.d.ts.map +1 -1
  16. package/lib/internal/template/app-layout/runtime-drawer/index.js +20 -18
  17. package/lib/internal/template/app-layout/runtime-drawer/index.js.map +1 -1
  18. package/lib/internal/template/app-layout/visual-refresh/styles.css.js +86 -86
  19. package/lib/internal/template/app-layout/visual-refresh/styles.scoped.css +258 -258
  20. package/lib/internal/template/app-layout/visual-refresh/styles.selectors.js +86 -86
  21. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.css.js +30 -30
  22. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css +89 -89
  23. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js +30 -30
  24. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.css.js +4 -4
  25. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css +7 -7
  26. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js +4 -4
  27. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.css.js +27 -27
  28. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css +54 -54
  29. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js +27 -27
  30. package/lib/internal/template/attribute-editor/styles.css.js +15 -15
  31. package/lib/internal/template/attribute-editor/styles.scoped.css +28 -28
  32. package/lib/internal/template/attribute-editor/styles.selectors.js +15 -15
  33. package/lib/internal/template/autosuggest/interfaces.d.ts +1 -1
  34. package/lib/internal/template/autosuggest/interfaces.js.map +1 -1
  35. package/lib/internal/template/breadcrumb-group/item/styles.css.js +7 -7
  36. package/lib/internal/template/breadcrumb-group/item/styles.scoped.css +28 -28
  37. package/lib/internal/template/breadcrumb-group/item/styles.selectors.js +7 -7
  38. package/lib/internal/template/button/styles.css.js +22 -22
  39. package/lib/internal/template/button/styles.scoped.css +256 -256
  40. package/lib/internal/template/button/styles.selectors.js +22 -22
  41. package/lib/internal/template/button-dropdown/item-element/styles.css.js +20 -20
  42. package/lib/internal/template/button-dropdown/item-element/styles.scoped.css +34 -34
  43. package/lib/internal/template/button-dropdown/item-element/styles.selectors.js +20 -20
  44. package/lib/internal/template/button-group/interfaces.d.ts +9 -0
  45. package/lib/internal/template/button-group/interfaces.d.ts.map +1 -1
  46. package/lib/internal/template/button-group/interfaces.js.map +1 -1
  47. package/lib/internal/template/checkbox/styles.css.js +3 -3
  48. package/lib/internal/template/checkbox/styles.scoped.css +11 -11
  49. package/lib/internal/template/checkbox/styles.selectors.js +3 -3
  50. package/lib/internal/template/content-layout/styles.css.js +14 -14
  51. package/lib/internal/template/content-layout/styles.scoped.css +27 -27
  52. package/lib/internal/template/content-layout/styles.selectors.js +14 -14
  53. package/lib/internal/template/flashbar/styles.css.js +50 -50
  54. package/lib/internal/template/flashbar/styles.scoped.css +187 -187
  55. package/lib/internal/template/flashbar/styles.selectors.js +50 -50
  56. package/lib/internal/template/help-panel/styles.css.js +6 -6
  57. package/lib/internal/template/help-panel/styles.scoped.css +73 -73
  58. package/lib/internal/template/help-panel/styles.selectors.js +6 -6
  59. package/lib/internal/template/input/styles.css.js +13 -13
  60. package/lib/internal/template/input/styles.scoped.css +74 -74
  61. package/lib/internal/template/input/styles.selectors.js +13 -13
  62. package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
  63. package/lib/internal/template/internal/components/drag-handle-wrapper/styles.css.js +21 -21
  64. package/lib/internal/template/internal/components/drag-handle-wrapper/styles.scoped.css +49 -49
  65. package/lib/internal/template/internal/components/drag-handle-wrapper/styles.selectors.js +21 -21
  66. package/lib/internal/template/internal/components/dropdown/styles.css.js +20 -20
  67. package/lib/internal/template/internal/components/dropdown/styles.scoped.css +38 -38
  68. package/lib/internal/template/internal/components/dropdown/styles.selectors.js +20 -20
  69. package/lib/internal/template/internal/components/radio-button/styles.css.js +7 -7
  70. package/lib/internal/template/internal/components/radio-button/styles.scoped.css +18 -18
  71. package/lib/internal/template/internal/components/radio-button/styles.selectors.js +7 -7
  72. package/lib/internal/template/internal/components/token-list/styles.css.js +10 -10
  73. package/lib/internal/template/internal/components/token-list/styles.scoped.css +25 -25
  74. package/lib/internal/template/internal/components/token-list/styles.selectors.js +10 -10
  75. package/lib/internal/template/internal/environment.js +3 -3
  76. package/lib/internal/template/internal/environment.json +2 -2
  77. package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts +5 -0
  78. package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts.map +1 -1
  79. package/lib/internal/template/internal/generated/custom-css-properties/index.js +131 -126
  80. package/lib/internal/template/internal/generated/custom-css-properties/index.js.map +1 -1
  81. package/lib/internal/template/internal/plugins/controllers/drawers.d.ts +2 -2
  82. package/lib/internal/template/internal/plugins/controllers/drawers.d.ts.map +1 -1
  83. package/lib/internal/template/internal/plugins/controllers/drawers.js.map +1 -1
  84. package/lib/internal/template/internal/plugins/widget/interfaces.d.ts +2 -2
  85. package/lib/internal/template/internal/plugins/widget/interfaces.d.ts.map +1 -1
  86. package/lib/internal/template/internal/plugins/widget/interfaces.js.map +1 -1
  87. package/lib/internal/template/internal/types.d.ts +18 -0
  88. package/lib/internal/template/internal/types.d.ts.map +1 -1
  89. package/lib/internal/template/internal/types.js.map +1 -1
  90. package/lib/internal/template/link/styles.css.js +20 -20
  91. package/lib/internal/template/link/styles.scoped.css +103 -103
  92. package/lib/internal/template/link/styles.selectors.js +20 -20
  93. package/lib/internal/template/progress-bar/styles.css.js +19 -19
  94. package/lib/internal/template/progress-bar/styles.scoped.css +56 -56
  95. package/lib/internal/template/progress-bar/styles.selectors.js +19 -19
  96. package/lib/internal/template/prompt-input/styles.css.js +17 -17
  97. package/lib/internal/template/prompt-input/styles.scoped.css +79 -79
  98. package/lib/internal/template/prompt-input/styles.selectors.js +17 -17
  99. package/lib/internal/template/segmented-control/styles.css.js +16 -16
  100. package/lib/internal/template/segmented-control/styles.scoped.css +46 -46
  101. package/lib/internal/template/segmented-control/styles.selectors.js +16 -16
  102. package/lib/internal/template/select/interfaces.d.ts +1 -1
  103. package/lib/internal/template/select/interfaces.js.map +1 -1
  104. package/lib/internal/template/slider/styles.css.js +26 -26
  105. package/lib/internal/template/slider/styles.scoped.css +86 -86
  106. package/lib/internal/template/slider/styles.selectors.js +26 -26
  107. package/lib/internal/template/spinner/styles.css.js +13 -13
  108. package/lib/internal/template/spinner/styles.scoped.css +39 -39
  109. package/lib/internal/template/spinner/styles.selectors.js +13 -13
  110. package/lib/internal/template/table/header-cell/index.d.ts +1 -1
  111. package/lib/internal/template/table/header-cell/index.d.ts.map +1 -1
  112. package/lib/internal/template/table/header-cell/index.js +1 -1
  113. package/lib/internal/template/table/header-cell/index.js.map +1 -1
  114. package/lib/internal/template/table/header-cell/th-element.d.ts +1 -1
  115. package/lib/internal/template/table/header-cell/th-element.d.ts.map +1 -1
  116. package/lib/internal/template/table/header-cell/th-element.js.map +1 -1
  117. package/lib/internal/template/table/resizer/index.d.ts +2 -1
  118. package/lib/internal/template/table/resizer/index.d.ts.map +1 -1
  119. package/lib/internal/template/table/resizer/index.js +8 -5
  120. package/lib/internal/template/table/resizer/index.js.map +1 -1
  121. package/lib/internal/template/table/resizer/styles.css.js +13 -12
  122. package/lib/internal/template/table/resizer/styles.scoped.css +22 -22
  123. package/lib/internal/template/table/resizer/styles.selectors.js +13 -12
  124. package/lib/internal/template/table/thead.d.ts +1 -1
  125. package/lib/internal/template/table/thead.d.ts.map +1 -1
  126. package/lib/internal/template/table/thead.js.map +1 -1
  127. package/lib/internal/template/tabs/index.d.ts +1 -1
  128. package/lib/internal/template/tabs/index.d.ts.map +1 -1
  129. package/lib/internal/template/tabs/index.js +3 -3
  130. package/lib/internal/template/tabs/index.js.map +1 -1
  131. package/lib/internal/template/tabs/interfaces.d.ts +45 -0
  132. package/lib/internal/template/tabs/interfaces.d.ts.map +1 -1
  133. package/lib/internal/template/tabs/interfaces.js.map +1 -1
  134. package/lib/internal/template/tabs/styles.css.js +30 -30
  135. package/lib/internal/template/tabs/styles.d.ts +33 -0
  136. package/lib/internal/template/tabs/styles.d.ts.map +1 -0
  137. package/lib/internal/template/tabs/styles.js +47 -0
  138. package/lib/internal/template/tabs/styles.js.map +1 -0
  139. package/lib/internal/template/tabs/styles.scoped.css +77 -73
  140. package/lib/internal/template/tabs/styles.selectors.js +30 -30
  141. package/lib/internal/template/tabs/tab-header-bar.d.ts +2 -1
  142. package/lib/internal/template/tabs/tab-header-bar.d.ts.map +1 -1
  143. package/lib/internal/template/tabs/tab-header-bar.js +6 -4
  144. package/lib/internal/template/tabs/tab-header-bar.js.map +1 -1
  145. package/lib/internal/template/tag-editor/styles.css.js +3 -3
  146. package/lib/internal/template/tag-editor/styles.scoped.css +13 -13
  147. package/lib/internal/template/tag-editor/styles.selectors.js +3 -3
  148. package/lib/internal/template/text-content/styles.css.js +1 -1
  149. package/lib/internal/template/text-content/styles.scoped.css +66 -66
  150. package/lib/internal/template/text-content/styles.selectors.js +1 -1
  151. package/lib/internal/template/textarea/styles.css.js +5 -5
  152. package/lib/internal/template/textarea/styles.scoped.css +45 -45
  153. package/lib/internal/template/textarea/styles.selectors.js +5 -5
  154. package/lib/internal/template/toggle/styles.css.js +10 -10
  155. package/lib/internal/template/toggle/styles.scoped.css +23 -23
  156. package/lib/internal/template/toggle/styles.selectors.js +10 -10
  157. package/package.json +1 -1
@@ -142,13 +142,13 @@
142
142
  */
143
143
  /* Style used for links in slots/components that are text heavy, to help links stand out among
144
144
  surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
145
- .awsui_resize-active_x7peu_8ay32_145:not(#\9):not(.awsui_resize-active-with-focus_x7peu_8ay32_145) * {
145
+ .awsui_resize-active_x7peu_q4llk_145:not(#\9):not(.awsui_resize-active-with-focus_x7peu_q4llk_145) * {
146
146
  cursor: col-resize;
147
147
  -webkit-user-select: none;
148
148
  user-select: none;
149
149
  }
150
150
 
151
- .awsui_resizer-wrapper_x7peu_8ay32_150:not(#\9) {
151
+ .awsui_resizer-wrapper_x7peu_q4llk_150:not(#\9) {
152
152
  inset-block: 0;
153
153
  position: absolute;
154
154
  inset-inline-end: calc(-1 * var(--space-xl-4dmkh1, 24px) / 2);
@@ -156,16 +156,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
156
156
  overflow: hidden;
157
157
  z-index: 10;
158
158
  }
159
- th:not(#\9):last-child > .awsui_resizer-wrapper_x7peu_8ay32_150:has(.awsui_divider-interactive_x7peu_8ay32_158):not(.awsui_is-visual-refresh_x7peu_8ay32_158) {
159
+ th:not(#\9):last-child > .awsui_resizer-wrapper_x7peu_q4llk_150:has(.awsui_divider-interactive_x7peu_q4llk_158).awsui_is-borderless_x7peu_q4llk_158 {
160
160
  inset-inline-end: 0;
161
161
  }
162
162
 
163
- .awsui_resizer-button-wrapper_x7peu_8ay32_162:not(#\9) {
163
+ .awsui_resizer-button-wrapper_x7peu_q4llk_162:not(#\9) {
164
164
  block-size: 100%;
165
165
  }
166
166
 
167
- th:not(#\9):not(:last-child) > .awsui_divider_x7peu_8ay32_158,
168
- .awsui_divider-interactive_x7peu_8ay32_158:not(#\9) {
167
+ th:not(#\9):not(:last-child) > .awsui_divider_x7peu_q4llk_158,
168
+ .awsui_divider-interactive_x7peu_q4llk_158:not(#\9) {
169
169
  position: absolute;
170
170
  outline: none;
171
171
  pointer-events: none;
@@ -180,19 +180,23 @@ th:not(#\9):not(:last-child) > .awsui_divider_x7peu_8ay32_158,
180
180
  box-sizing: border-box;
181
181
  }
182
182
 
183
- th:not(#\9):not(:last-child) > .awsui_divider-disabled_x7peu_8ay32_182 {
183
+ th:not(#\9):not(:last-child) > .awsui_divider-disabled_x7peu_q4llk_182 {
184
184
  border-inline-start-color: var(--color-border-divider-default-ipvpev, #eaeded);
185
185
  }
186
186
 
187
- .awsui_divider-interactive_x7peu_8ay32_158:not(#\9) {
187
+ .awsui_divider-interactive_x7peu_q4llk_158:not(#\9) {
188
188
  inset-inline-end: calc(var(--space-xl-4dmkh1, 24px) / 2);
189
189
  }
190
190
 
191
- .awsui_divider-active_x7peu_8ay32_190:not(#\9) {
191
+ th:not(#\9):last-child > .awsui_resizer-wrapper_x7peu_q4llk_150.awsui_visual-refresh_x7peu_q4llk_190.awsui_is-borderless_x7peu_q4llk_158 .awsui_divider-interactive_x7peu_q4llk_158 {
192
+ inset-inline-end: 0;
193
+ }
194
+
195
+ .awsui_divider-active_x7peu_q4llk_194:not(#\9) {
192
196
  border-inline-start: 2px solid var(--color-border-divider-active-d5kcok, #687078);
193
197
  }
194
198
 
195
- .awsui_resizer_x7peu_8ay32_150:not(#\9) {
199
+ .awsui_resizer_x7peu_q4llk_150:not(#\9) {
196
200
  border-collapse: separate;
197
201
  border-spacing: 0;
198
202
  box-sizing: border-box;
@@ -230,24 +234,24 @@ th:not(#\9):not(:last-child) > .awsui_divider-disabled_x7peu_8ay32_182 {
230
234
  block-size: 100%;
231
235
  inline-size: var(--space-xl-4dmkh1, 24px);
232
236
  }
233
- .awsui_resizer_x7peu_8ay32_150:not(#\9):focus {
237
+ .awsui_resizer_x7peu_q4llk_150:not(#\9):focus {
234
238
  outline: none;
235
239
  text-decoration: none;
236
240
  }
237
- .awsui_resize-active_x7peu_8ay32_145 .awsui_resizer_x7peu_8ay32_150:not(#\9) {
241
+ .awsui_resize-active_x7peu_q4llk_145 .awsui_resizer_x7peu_q4llk_150:not(#\9) {
238
242
  pointer-events: none;
239
243
  }
240
- .awsui_resizer_x7peu_8ay32_150:not(#\9):hover + .awsui_divider_x7peu_8ay32_158 {
244
+ .awsui_resizer_x7peu_q4llk_150:not(#\9):hover + .awsui_divider_x7peu_q4llk_158 {
241
245
  border-inline-start: 2px solid var(--color-border-divider-active-d5kcok, #687078);
242
246
  }
243
- body[data-awsui-focus-visible=true] .awsui_resizer_x7peu_8ay32_150.awsui_has-focus_x7peu_8ay32_242:not(#\9) {
247
+ body[data-awsui-focus-visible=true] .awsui_resizer_x7peu_q4llk_150.awsui_has-focus_x7peu_q4llk_246:not(#\9) {
244
248
  position: relative;
245
249
  }
246
- body[data-awsui-focus-visible=true] .awsui_resizer_x7peu_8ay32_150.awsui_has-focus_x7peu_8ay32_242:not(#\9) {
250
+ body[data-awsui-focus-visible=true] .awsui_resizer_x7peu_q4llk_150.awsui_has-focus_x7peu_q4llk_246:not(#\9) {
247
251
  outline: 2px dotted transparent;
248
252
  outline-offset: calc(calc(var(--space-table-header-focus-outline-gutter-0zj6up, 0px) - 2px) - 1px);
249
253
  }
250
- body[data-awsui-focus-visible=true] .awsui_resizer_x7peu_8ay32_150.awsui_has-focus_x7peu_8ay32_242:not(#\9)::before {
254
+ body[data-awsui-focus-visible=true] .awsui_resizer_x7peu_q4llk_150.awsui_has-focus_x7peu_q4llk_246:not(#\9)::before {
251
255
  content: " ";
252
256
  display: block;
253
257
  position: absolute;
@@ -262,17 +266,13 @@ body[data-awsui-focus-visible=true] .awsui_resizer_x7peu_8ay32_150.awsui_has-foc
262
266
  box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
263
267
  }
264
268
 
265
- th:not(#\9):last-child > .awsui_resizer_x7peu_8ay32_150:not(.awsui_is-visual-refresh_x7peu_8ay32_158) {
266
- inset-inline-end: 0;
267
- }
268
-
269
- .awsui_tracker_x7peu_8ay32_268:not(#\9) {
269
+ .awsui_tracker_x7peu_q4llk_268:not(#\9) {
270
270
  display: none;
271
271
  position: absolute;
272
272
  border-inline-start: var(--border-divider-list-width-8ggz94, 1px) dashed var(--color-border-divider-active-d5kcok, #687078);
273
273
  inline-size: 0;
274
274
  inset-block: 0;
275
275
  }
276
- .awsui_resize-active_x7peu_8ay32_145 .awsui_tracker_x7peu_8ay32_268:not(#\9) {
276
+ .awsui_resize-active_x7peu_q4llk_145 .awsui_tracker_x7peu_q4llk_268:not(#\9) {
277
277
  display: block;
278
278
  }
@@ -2,17 +2,18 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "resize-active": "awsui_resize-active_x7peu_8ay32_145",
6
- "resize-active-with-focus": "awsui_resize-active-with-focus_x7peu_8ay32_145",
7
- "resizer-wrapper": "awsui_resizer-wrapper_x7peu_8ay32_150",
8
- "divider-interactive": "awsui_divider-interactive_x7peu_8ay32_158",
9
- "is-visual-refresh": "awsui_is-visual-refresh_x7peu_8ay32_158",
10
- "resizer-button-wrapper": "awsui_resizer-button-wrapper_x7peu_8ay32_162",
11
- "divider": "awsui_divider_x7peu_8ay32_158",
12
- "divider-disabled": "awsui_divider-disabled_x7peu_8ay32_182",
13
- "divider-active": "awsui_divider-active_x7peu_8ay32_190",
14
- "resizer": "awsui_resizer_x7peu_8ay32_150",
15
- "has-focus": "awsui_has-focus_x7peu_8ay32_242",
16
- "tracker": "awsui_tracker_x7peu_8ay32_268"
5
+ "resize-active": "awsui_resize-active_x7peu_q4llk_145",
6
+ "resize-active-with-focus": "awsui_resize-active-with-focus_x7peu_q4llk_145",
7
+ "resizer-wrapper": "awsui_resizer-wrapper_x7peu_q4llk_150",
8
+ "divider-interactive": "awsui_divider-interactive_x7peu_q4llk_158",
9
+ "is-borderless": "awsui_is-borderless_x7peu_q4llk_158",
10
+ "resizer-button-wrapper": "awsui_resizer-button-wrapper_x7peu_q4llk_162",
11
+ "divider": "awsui_divider_x7peu_q4llk_158",
12
+ "divider-disabled": "awsui_divider-disabled_x7peu_q4llk_182",
13
+ "visual-refresh": "awsui_visual-refresh_x7peu_q4llk_190",
14
+ "divider-active": "awsui_divider-active_x7peu_q4llk_194",
15
+ "resizer": "awsui_resizer_x7peu_q4llk_150",
16
+ "has-focus": "awsui_has-focus_x7peu_q4llk_246",
17
+ "tracker": "awsui_tracker_x7peu_q4llk_268"
17
18
  };
18
19
 
@@ -11,7 +11,7 @@ export interface TheadProps {
11
11
  sortingDescending: boolean | undefined;
12
12
  sortingDisabled: boolean | undefined;
13
13
  variant: TableProps.Variant;
14
- tableVariant?: string;
14
+ tableVariant?: TableProps.Variant;
15
15
  wrapLines: boolean | undefined;
16
16
  resizableColumns: boolean | undefined;
17
17
  getSelectAllProps?: () => SelectionProps;
@@ -1 +1 @@
1
- {"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../src/table/thead.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAEvF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAgB,cAAc,EAAE,MAAM,aAAa,CAAC;AAE3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAA8B,SAAS,EAAE,MAAM,cAAc,CAAC;AAMrE,MAAM,WAAW,UAAU;IACzB,aAAa,EAAE,UAAU,CAAC,aAAa,GAAG,SAAS,CAAC;IACpD,iBAAiB,EAAE,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;IACnE,aAAa,EAAE,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;IACzD,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACvC,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,iBAAiB,CAAC,EAAE,MAAM,cAAc,CAAC;IACzC,WAAW,EAAE,CAAC,CAAC,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtG,cAAc,EAAE,CAAC,SAAS,EAAE,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC9D,eAAe,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,SAAS,CAAC;IACrF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,kBAAkB,CAAC;IAChC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,gBAAgB,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACjC,wBAAwB,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5D,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,QAAA,MAAM,KAAK,wFA8GV,CAAC;AAEF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../src/table/thead.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAEvF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAgB,cAAc,EAAE,MAAM,aAAa,CAAC;AAE3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAA8B,SAAS,EAAE,MAAM,cAAc,CAAC;AAMrE,MAAM,WAAW,UAAU;IACzB,aAAa,EAAE,UAAU,CAAC,aAAa,GAAG,SAAS,CAAC;IACpD,iBAAiB,EAAE,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;IACnE,aAAa,EAAE,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;IACzD,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACvC,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC;IAClC,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,iBAAiB,CAAC,EAAE,MAAM,cAAc,CAAC;IACzC,WAAW,EAAE,CAAC,CAAC,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtG,cAAc,EAAE,CAAC,SAAS,EAAE,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC9D,eAAe,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,SAAS,CAAC;IACrF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,kBAAkB,CAAC;IAChC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,gBAAgB,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACjC,wBAAwB,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5D,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,QAAA,MAAM,KAAK,wFA8GV,CAAC;AAEF,eAAe,KAAK,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"thead.js","sourceRoot":"","sources":["../../../src/table/thead.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 from 'react';\nimport clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\n\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { TableHeaderCell } from './header-cell';\nimport { TableProps } from './interfaces';\nimport { focusMarkers, SelectionProps } from './selection';\nimport { TableHeaderSelectionCell } from './selection/selection-cell';\nimport { StickyColumnsModel } from './sticky-columns';\nimport { getTableHeaderRowRoleProps, TableRole } from './table-role';\nimport { useColumnWidths } from './use-column-widths';\nimport { getColumnKey } from './utils';\n\nimport styles from './styles.css.js';\n\nexport interface TheadProps {\n selectionType: TableProps.SelectionType | undefined;\n columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>;\n sortingColumn: TableProps.SortingColumn<any> | undefined;\n sortingDescending: boolean | undefined;\n sortingDisabled: boolean | undefined;\n variant: TableProps.Variant;\n tableVariant?: string;\n wrapLines: boolean | undefined;\n resizableColumns: boolean | undefined;\n getSelectAllProps?: () => SelectionProps;\n onFocusMove: ((sourceElement: HTMLElement, fromIndex: number, direction: -1 | 1) => void) | undefined;\n onResizeFinish: (newWidths: Map<PropertyKey, number>) => void;\n onSortingChange: NonCancelableEventHandler<TableProps.SortingState<any>> | undefined;\n sticky?: boolean;\n hidden?: boolean;\n stuck?: boolean;\n singleSelectionHeaderAriaLabel?: string;\n resizerRoleDescription?: string;\n resizerTooltipText?: string;\n stripedRows?: boolean;\n stickyState: StickyColumnsModel;\n selectionColumnId: PropertyKey;\n focusedComponent?: null | string;\n onFocusedComponentChange?: (focusId: null | string) => void;\n tableRole: TableRole;\n isExpandable?: boolean;\n setLastUserAction: (name: string) => void;\n}\n\nconst Thead = React.forwardRef(\n (\n {\n selectionType,\n getSelectAllProps,\n columnDefinitions,\n sortingColumn,\n sortingDisabled,\n sortingDescending,\n resizableColumns,\n variant,\n tableVariant,\n wrapLines,\n onFocusMove,\n onSortingChange,\n onResizeFinish,\n singleSelectionHeaderAriaLabel,\n stripedRows,\n sticky = false,\n hidden = false,\n stuck = false,\n stickyState,\n selectionColumnId,\n focusedComponent,\n onFocusedComponentChange,\n tableRole,\n resizerRoleDescription,\n resizerTooltipText,\n isExpandable,\n setLastUserAction,\n }: TheadProps,\n outerRef: React.Ref<HTMLTableRowElement>\n ) => {\n const { getColumnStyles, columnWidths, updateColumn, setCell } = useColumnWidths();\n\n const commonCellProps = {\n stuck,\n sticky,\n hidden,\n stripedRows,\n tableRole,\n variant,\n tableVariant,\n stickyState,\n };\n\n return (\n <thead className={clsx(!hidden && styles['thead-active'])}>\n <tr\n {...focusMarkers.all}\n ref={outerRef}\n aria-rowindex={1}\n {...getTableHeaderRowRoleProps({ tableRole })}\n onFocus={event => {\n const focusControlElement = findUpUntil(event.target, element => !!element.getAttribute('data-focus-id'));\n const focusId = focusControlElement?.getAttribute('data-focus-id') ?? null;\n onFocusedComponentChange?.(focusId);\n }}\n onBlur={() => onFocusedComponentChange?.(null)}\n >\n {selectionType ? (\n <TableHeaderSelectionCell\n {...commonCellProps}\n focusedComponent={focusedComponent}\n columnId={selectionColumnId}\n getSelectAllProps={getSelectAllProps}\n onFocusMove={onFocusMove}\n singleSelectionHeaderAriaLabel={singleSelectionHeaderAriaLabel}\n />\n ) : null}\n\n {columnDefinitions.map((column, colIndex) => {\n const columnId = getColumnKey(column, colIndex);\n return (\n <TableHeaderCell\n {...commonCellProps}\n key={columnId}\n tabIndex={sticky ? -1 : 0}\n focusedComponent={focusedComponent}\n column={column}\n activeSortingColumn={sortingColumn}\n sortingDescending={sortingDescending}\n sortingDisabled={sortingDisabled}\n wrapLines={wrapLines}\n colIndex={selectionType ? colIndex + 1 : colIndex}\n columnId={columnId}\n updateColumn={updateColumn}\n onResizeFinish={() => onResizeFinish(columnWidths)}\n resizableColumns={resizableColumns}\n resizableStyle={getColumnStyles(sticky, columnId)}\n onClick={detail => {\n setLastUserAction('sorting');\n fireNonCancelableEvent(onSortingChange, detail);\n }}\n isEditable={!!column.editConfig}\n cellRef={node => setCell(sticky, columnId, node)}\n tableRole={tableRole}\n resizerRoleDescription={resizerRoleDescription}\n resizerTooltipText={resizerTooltipText}\n // Expandable option is only applicable to the first data column of the table.\n // When present, the header content receives extra padding to match the first offset in the data cells.\n isExpandable={colIndex === 0 && isExpandable}\n hasDynamicContent={hidden && !resizableColumns && column.hasDynamicContent}\n />\n );\n })}\n </tr>\n </thead>\n );\n }\n);\n\nexport default Thead;\n"]}
1
+ {"version":3,"file":"thead.js","sourceRoot":"","sources":["../../../src/table/thead.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 from 'react';\nimport clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\n\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { TableHeaderCell } from './header-cell';\nimport { TableProps } from './interfaces';\nimport { focusMarkers, SelectionProps } from './selection';\nimport { TableHeaderSelectionCell } from './selection/selection-cell';\nimport { StickyColumnsModel } from './sticky-columns';\nimport { getTableHeaderRowRoleProps, TableRole } from './table-role';\nimport { useColumnWidths } from './use-column-widths';\nimport { getColumnKey } from './utils';\n\nimport styles from './styles.css.js';\n\nexport interface TheadProps {\n selectionType: TableProps.SelectionType | undefined;\n columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>;\n sortingColumn: TableProps.SortingColumn<any> | undefined;\n sortingDescending: boolean | undefined;\n sortingDisabled: boolean | undefined;\n variant: TableProps.Variant;\n tableVariant?: TableProps.Variant;\n wrapLines: boolean | undefined;\n resizableColumns: boolean | undefined;\n getSelectAllProps?: () => SelectionProps;\n onFocusMove: ((sourceElement: HTMLElement, fromIndex: number, direction: -1 | 1) => void) | undefined;\n onResizeFinish: (newWidths: Map<PropertyKey, number>) => void;\n onSortingChange: NonCancelableEventHandler<TableProps.SortingState<any>> | undefined;\n sticky?: boolean;\n hidden?: boolean;\n stuck?: boolean;\n singleSelectionHeaderAriaLabel?: string;\n resizerRoleDescription?: string;\n resizerTooltipText?: string;\n stripedRows?: boolean;\n stickyState: StickyColumnsModel;\n selectionColumnId: PropertyKey;\n focusedComponent?: null | string;\n onFocusedComponentChange?: (focusId: null | string) => void;\n tableRole: TableRole;\n isExpandable?: boolean;\n setLastUserAction: (name: string) => void;\n}\n\nconst Thead = React.forwardRef(\n (\n {\n selectionType,\n getSelectAllProps,\n columnDefinitions,\n sortingColumn,\n sortingDisabled,\n sortingDescending,\n resizableColumns,\n variant,\n tableVariant,\n wrapLines,\n onFocusMove,\n onSortingChange,\n onResizeFinish,\n singleSelectionHeaderAriaLabel,\n stripedRows,\n sticky = false,\n hidden = false,\n stuck = false,\n stickyState,\n selectionColumnId,\n focusedComponent,\n onFocusedComponentChange,\n tableRole,\n resizerRoleDescription,\n resizerTooltipText,\n isExpandable,\n setLastUserAction,\n }: TheadProps,\n outerRef: React.Ref<HTMLTableRowElement>\n ) => {\n const { getColumnStyles, columnWidths, updateColumn, setCell } = useColumnWidths();\n\n const commonCellProps = {\n stuck,\n sticky,\n hidden,\n stripedRows,\n tableRole,\n variant,\n tableVariant,\n stickyState,\n };\n\n return (\n <thead className={clsx(!hidden && styles['thead-active'])}>\n <tr\n {...focusMarkers.all}\n ref={outerRef}\n aria-rowindex={1}\n {...getTableHeaderRowRoleProps({ tableRole })}\n onFocus={event => {\n const focusControlElement = findUpUntil(event.target, element => !!element.getAttribute('data-focus-id'));\n const focusId = focusControlElement?.getAttribute('data-focus-id') ?? null;\n onFocusedComponentChange?.(focusId);\n }}\n onBlur={() => onFocusedComponentChange?.(null)}\n >\n {selectionType ? (\n <TableHeaderSelectionCell\n {...commonCellProps}\n focusedComponent={focusedComponent}\n columnId={selectionColumnId}\n getSelectAllProps={getSelectAllProps}\n onFocusMove={onFocusMove}\n singleSelectionHeaderAriaLabel={singleSelectionHeaderAriaLabel}\n />\n ) : null}\n\n {columnDefinitions.map((column, colIndex) => {\n const columnId = getColumnKey(column, colIndex);\n return (\n <TableHeaderCell\n {...commonCellProps}\n key={columnId}\n tabIndex={sticky ? -1 : 0}\n focusedComponent={focusedComponent}\n column={column}\n activeSortingColumn={sortingColumn}\n sortingDescending={sortingDescending}\n sortingDisabled={sortingDisabled}\n wrapLines={wrapLines}\n colIndex={selectionType ? colIndex + 1 : colIndex}\n columnId={columnId}\n updateColumn={updateColumn}\n onResizeFinish={() => onResizeFinish(columnWidths)}\n resizableColumns={resizableColumns}\n resizableStyle={getColumnStyles(sticky, columnId)}\n onClick={detail => {\n setLastUserAction('sorting');\n fireNonCancelableEvent(onSortingChange, detail);\n }}\n isEditable={!!column.editConfig}\n cellRef={node => setCell(sticky, columnId, node)}\n tableRole={tableRole}\n resizerRoleDescription={resizerRoleDescription}\n resizerTooltipText={resizerTooltipText}\n // Expandable option is only applicable to the first data column of the table.\n // When present, the header content receives extra padding to match the first offset in the data cells.\n isExpandable={colIndex === 0 && isExpandable}\n hasDynamicContent={hidden && !resizableColumns && column.hasDynamicContent}\n />\n );\n })}\n </tr>\n </thead>\n );\n }\n);\n\nexport default Thead;\n"]}
@@ -1,4 +1,4 @@
1
1
  import { TabsProps } from './interfaces';
2
2
  export { TabsProps };
3
- export default function Tabs({ tabs, variant, onChange, activeTabId: controlledTabId, ariaLabel, ariaLabelledby, disableContentPaddings, i18nStrings, fitHeight, keyboardActivationMode, actions, ...rest }: TabsProps): JSX.Element;
3
+ export default function Tabs({ tabs, variant, onChange, activeTabId: controlledTabId, ariaLabel, ariaLabelledby, disableContentPaddings, i18nStrings, fitHeight, keyboardActivationMode, actions, style, ...rest }: TabsProps): JSX.Element;
4
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tabs/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAsBrB,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,OAAmB,EACnB,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,SAAS,EACT,cAAc,EACd,sBAA8B,EAC9B,WAAW,EACX,SAAS,EACT,sBAAoC,EACpC,OAAO,EACP,GAAG,IAAI,EACR,EAAE,SAAS,eAkIX"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tabs/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAsBrB,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,OAAmB,EACnB,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,SAAS,EACT,cAAc,EACd,sBAA8B,EAC9B,WAAW,EACX,SAAS,EACT,sBAAoC,EACpC,OAAO,EACP,KAAK,EACL,GAAG,IAAI,EACR,EAAE,SAAS,eAoIX"}
@@ -33,7 +33,7 @@ function shouldRenderTabContent(tab, viewedTabs) {
33
33
  }
34
34
  return false;
35
35
  }
36
- export default function Tabs({ tabs, variant = 'default', onChange, activeTabId: controlledTabId, ariaLabel, ariaLabelledby, disableContentPaddings = false, i18nStrings, fitHeight, keyboardActivationMode = 'automatic', actions, ...rest }) {
36
+ export default function Tabs({ tabs, variant = 'default', onChange, activeTabId: controlledTabId, ariaLabel, ariaLabelledby, disableContentPaddings = false, i18nStrings, fitHeight, keyboardActivationMode = 'automatic', actions, style, ...rest }) {
37
37
  var _a, _b;
38
38
  for (const tab of tabs) {
39
39
  checkSafeUrl('Tabs', tab.href);
@@ -99,9 +99,9 @@ export default function Tabs({ tabs, variant = 'default', onChange, activeTabId:
99
99
  const header = (React.createElement(TabHeaderBar, { activeTabId: activeTabId, variant: variant, idNamespace: idNamespace, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, tabs: tabs, actions: actions, onChange: changeDetail => {
100
100
  setActiveTabId(changeDetail.activeTabId);
101
101
  fireNonCancelableEvent(onChange, changeDetail);
102
- }, i18nStrings: i18nStrings, keyboardActivationMode: keyboardActivationMode }));
102
+ }, i18nStrings: i18nStrings, keyboardActivationMode: keyboardActivationMode, style: style }));
103
103
  if (variant === 'container' || variant === 'stacked') {
104
- return (React.createElement(InternalContainer, { header: header, disableHeaderPaddings: true, ...baseProps, className: clsx(baseProps.className, styles.root), __internalRootRef: __internalRootRef, disableContentPaddings: true, variant: variant === 'stacked' ? 'stacked' : 'default', fitHeight: fitHeight, ...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata }) }, content()));
104
+ return (React.createElement(InternalContainer, { header: header, disableHeaderPaddings: true, ...baseProps, className: clsx(baseProps.className, styles.root), __internalRootRef: __internalRootRef, disableContentPaddings: true, variant: variant === 'stacked' ? 'stacked' : 'default', fitHeight: fitHeight, ...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata }), style: style === null || style === void 0 ? void 0 : style.container }, content()));
105
105
  }
106
106
  return (React.createElement("div", { ...baseProps, className: clsx(baseProps.className, styles.root, styles.tabs, { [styles['fit-height']]: fitHeight }), ref: __internalRootRef, ...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata }) },
107
107
  header,
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalContainer from '../container/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { GeneratedAnalyticsMetadataTabsComponent } from './analytics-metadata/interfaces';\nimport { TabsProps } from './interfaces';\nimport { getTabElementId, TabHeaderBar } from './tab-header-bar';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { TabsProps };\n\nfunction firstEnabledTab(tabs: ReadonlyArray<TabsProps.Tab>) {\n const enabledTabs = tabs.filter(tab => !tab.disabled);\n if (enabledTabs.length > 0) {\n return enabledTabs[0];\n }\n return null;\n}\n\nfunction shouldRenderTabContent(tab: TabsProps.Tab, viewedTabs: Set<string>) {\n switch (tab.contentRenderStrategy) {\n case 'active':\n return false; // rendering active tab is handled directly in component\n case 'eager':\n return true;\n case 'lazy':\n return viewedTabs.has(tab.id);\n }\n return false;\n}\n\nexport default function Tabs({\n tabs,\n variant = 'default',\n onChange,\n activeTabId: controlledTabId,\n ariaLabel,\n ariaLabelledby,\n disableContentPaddings = false,\n i18nStrings,\n fitHeight,\n keyboardActivationMode = 'automatic',\n actions,\n ...rest\n}: TabsProps) {\n for (const tab of tabs) {\n checkSafeUrl('Tabs', tab.href);\n }\n const { __internalRootRef } = useBaseComponent('Tabs', {\n props: { disableContentPaddings, variant, fitHeight, keyboardActivationMode },\n metadata: {\n hasActions: tabs.some(tab => !!tab.action),\n hasHeaderActions: !!actions,\n hasDisabledReasons: tabs.some(tab => !!tab.disabledReason),\n hasEagerLoadedTabs: tabs.some(tab => tab.contentRenderStrategy === 'eager'),\n hasLazyLoadedTabs: tabs.some(tab => tab.contentRenderStrategy === 'lazy'),\n },\n });\n const idNamespace = useUniqueId('awsui-tabs-');\n\n const [activeTabId, setActiveTabId] = useControllable(controlledTabId, onChange, firstEnabledTab(tabs)?.id ?? '', {\n componentName: 'Tabs',\n controlledProp: 'activeTabId',\n changeHandler: 'onChange',\n });\n\n const viewedTabs = useRef(new Set<string>());\n if (activeTabId !== undefined) {\n viewedTabs.current.add(activeTabId);\n }\n\n const baseProps = getBaseProps(rest);\n\n const analyticsComponentMetadata: GeneratedAnalyticsMetadataTabsComponent = {\n name: 'awsui.Tabs',\n label: `.${analyticsSelectors['tabs-header-list']}`,\n };\n\n if (activeTabId) {\n analyticsComponentMetadata.properties = {\n activeTabId,\n activeTabLabel: `.${analyticsSelectors['active-tab-header']} .${analyticsSelectors['tab-label']}`,\n activeTabPosition: `${tabs.findIndex(tab => tab.id === activeTabId) + 1}`,\n tabsCount: `${tabs.length}`,\n };\n }\n\n const content = () => {\n const selectedTab = tabs.filter(tab => tab.id === activeTabId)[0];\n const renderContent = (tab: TabsProps.Tab) => {\n const isTabSelected = tab === selectedTab;\n\n const classes = clsx({\n [styles['tabs-content']]: true,\n [styles['tabs-content-active']]: isTabSelected,\n });\n\n const contentAttributes: JSX.IntrinsicElements['div'] = {\n className: classes,\n role: 'tabpanel',\n id: `${idNamespace}-${tab.id}-panel`,\n key: `${idNamespace}-${tab.id}-panel`,\n tabIndex: 0,\n 'aria-labelledby': getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n };\n\n const isContentShown = !tab.disabled && (isTabSelected || shouldRenderTabContent(tab, viewedTabs.current));\n\n return <div {...contentAttributes}>{isContentShown && tab.content}</div>;\n };\n\n return (\n <div\n className={clsx(\n variant === 'container' || variant === 'stacked'\n ? styles['tabs-container-content-wrapper']\n : styles['tabs-content-wrapper'],\n {\n [styles['with-paddings']]: !disableContentPaddings,\n }\n )}\n >\n {tabs.map(renderContent)}\n </div>\n );\n };\n\n const header = (\n <TabHeaderBar\n activeTabId={activeTabId}\n variant={variant}\n idNamespace={idNamespace}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n tabs={tabs}\n actions={actions}\n onChange={changeDetail => {\n setActiveTabId(changeDetail.activeTabId);\n fireNonCancelableEvent(onChange, changeDetail);\n }}\n i18nStrings={i18nStrings}\n keyboardActivationMode={keyboardActivationMode}\n />\n );\n\n if (variant === 'container' || variant === 'stacked') {\n return (\n <InternalContainer\n header={header}\n disableHeaderPaddings={true}\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n __internalRootRef={__internalRootRef}\n disableContentPaddings={true}\n variant={variant === 'stacked' ? 'stacked' : 'default'}\n fitHeight={fitHeight}\n {...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })}\n >\n {content()}\n </InternalContainer>\n );\n }\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root, styles.tabs, { [styles['fit-height']]: fitHeight })}\n ref={__internalRootRef}\n {...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })}\n >\n {header}\n {content()}\n </div>\n );\n}\n\napplyDisplayName(Tabs, 'Tabs');\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalContainer from '../container/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { GeneratedAnalyticsMetadataTabsComponent } from './analytics-metadata/interfaces';\nimport { TabsProps } from './interfaces';\nimport { getTabElementId, TabHeaderBar } from './tab-header-bar';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { TabsProps };\n\nfunction firstEnabledTab(tabs: ReadonlyArray<TabsProps.Tab>) {\n const enabledTabs = tabs.filter(tab => !tab.disabled);\n if (enabledTabs.length > 0) {\n return enabledTabs[0];\n }\n return null;\n}\n\nfunction shouldRenderTabContent(tab: TabsProps.Tab, viewedTabs: Set<string>) {\n switch (tab.contentRenderStrategy) {\n case 'active':\n return false; // rendering active tab is handled directly in component\n case 'eager':\n return true;\n case 'lazy':\n return viewedTabs.has(tab.id);\n }\n return false;\n}\n\nexport default function Tabs({\n tabs,\n variant = 'default',\n onChange,\n activeTabId: controlledTabId,\n ariaLabel,\n ariaLabelledby,\n disableContentPaddings = false,\n i18nStrings,\n fitHeight,\n keyboardActivationMode = 'automatic',\n actions,\n style,\n ...rest\n}: TabsProps) {\n for (const tab of tabs) {\n checkSafeUrl('Tabs', tab.href);\n }\n const { __internalRootRef } = useBaseComponent('Tabs', {\n props: { disableContentPaddings, variant, fitHeight, keyboardActivationMode },\n metadata: {\n hasActions: tabs.some(tab => !!tab.action),\n hasHeaderActions: !!actions,\n hasDisabledReasons: tabs.some(tab => !!tab.disabledReason),\n hasEagerLoadedTabs: tabs.some(tab => tab.contentRenderStrategy === 'eager'),\n hasLazyLoadedTabs: tabs.some(tab => tab.contentRenderStrategy === 'lazy'),\n },\n });\n const idNamespace = useUniqueId('awsui-tabs-');\n\n const [activeTabId, setActiveTabId] = useControllable(controlledTabId, onChange, firstEnabledTab(tabs)?.id ?? '', {\n componentName: 'Tabs',\n controlledProp: 'activeTabId',\n changeHandler: 'onChange',\n });\n\n const viewedTabs = useRef(new Set<string>());\n if (activeTabId !== undefined) {\n viewedTabs.current.add(activeTabId);\n }\n\n const baseProps = getBaseProps(rest);\n\n const analyticsComponentMetadata: GeneratedAnalyticsMetadataTabsComponent = {\n name: 'awsui.Tabs',\n label: `.${analyticsSelectors['tabs-header-list']}`,\n };\n\n if (activeTabId) {\n analyticsComponentMetadata.properties = {\n activeTabId,\n activeTabLabel: `.${analyticsSelectors['active-tab-header']} .${analyticsSelectors['tab-label']}`,\n activeTabPosition: `${tabs.findIndex(tab => tab.id === activeTabId) + 1}`,\n tabsCount: `${tabs.length}`,\n };\n }\n\n const content = () => {\n const selectedTab = tabs.filter(tab => tab.id === activeTabId)[0];\n const renderContent = (tab: TabsProps.Tab) => {\n const isTabSelected = tab === selectedTab;\n\n const classes = clsx({\n [styles['tabs-content']]: true,\n [styles['tabs-content-active']]: isTabSelected,\n });\n\n const contentAttributes: JSX.IntrinsicElements['div'] = {\n className: classes,\n role: 'tabpanel',\n id: `${idNamespace}-${tab.id}-panel`,\n key: `${idNamespace}-${tab.id}-panel`,\n tabIndex: 0,\n 'aria-labelledby': getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n };\n\n const isContentShown = !tab.disabled && (isTabSelected || shouldRenderTabContent(tab, viewedTabs.current));\n\n return <div {...contentAttributes}>{isContentShown && tab.content}</div>;\n };\n\n return (\n <div\n className={clsx(\n variant === 'container' || variant === 'stacked'\n ? styles['tabs-container-content-wrapper']\n : styles['tabs-content-wrapper'],\n {\n [styles['with-paddings']]: !disableContentPaddings,\n }\n )}\n >\n {tabs.map(renderContent)}\n </div>\n );\n };\n\n const header = (\n <TabHeaderBar\n activeTabId={activeTabId}\n variant={variant}\n idNamespace={idNamespace}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n tabs={tabs}\n actions={actions}\n onChange={changeDetail => {\n setActiveTabId(changeDetail.activeTabId);\n fireNonCancelableEvent(onChange, changeDetail);\n }}\n i18nStrings={i18nStrings}\n keyboardActivationMode={keyboardActivationMode}\n style={style}\n />\n );\n\n if (variant === 'container' || variant === 'stacked') {\n return (\n <InternalContainer\n header={header}\n disableHeaderPaddings={true}\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n __internalRootRef={__internalRootRef}\n disableContentPaddings={true}\n variant={variant === 'stacked' ? 'stacked' : 'default'}\n fitHeight={fitHeight}\n {...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })}\n style={style?.container}\n >\n {content()}\n </InternalContainer>\n );\n }\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root, styles.tabs, { [styles['fit-height']]: fitHeight })}\n ref={__internalRootRef}\n {...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })}\n >\n {header}\n {content()}\n </div>\n );\n}\n\napplyDisplayName(Tabs, 'Tabs');\n"]}
@@ -1,6 +1,8 @@
1
1
  import { ButtonProps } from '../button/interfaces';
2
+ import { ContainerProps } from '../container/interfaces';
2
3
  import { BaseComponentProps } from '../internal/base-component';
3
4
  import { NonCancelableEventHandler } from '../internal/events';
5
+ import { FocusRingStyle } from '../internal/types';
4
6
  export interface TabsProps extends BaseComponentProps {
5
7
  /**
6
8
  * Specifies the tabs to display. Each tab object has the following properties:
@@ -89,6 +91,10 @@ export interface TabsProps extends BaseComponentProps {
89
91
  * need to introduce friction to the switching of tabs.
90
92
  */
91
93
  keyboardActivationMode?: 'automatic' | 'manual';
94
+ /**
95
+ * @awsuiSystem core
96
+ */
97
+ style?: TabsProps.Style;
92
98
  }
93
99
  export declare namespace TabsProps {
94
100
  type Variant = 'default' | 'container' | 'stacked';
@@ -177,5 +183,44 @@ export declare namespace TabsProps {
177
183
  */
178
184
  tabsWithActionsAriaRoleDescription?: string;
179
185
  }
186
+ interface Style {
187
+ container?: ContainerProps.Style;
188
+ tab?: {
189
+ backgroundColor?: {
190
+ active?: string;
191
+ default?: string;
192
+ disabled?: string;
193
+ hover?: string;
194
+ };
195
+ borderColor?: {
196
+ active?: string;
197
+ default?: string;
198
+ disabled?: string;
199
+ hover?: string;
200
+ };
201
+ borderRadius?: string;
202
+ borderWidth?: string;
203
+ color?: {
204
+ active?: string;
205
+ default?: string;
206
+ disabled?: string;
207
+ hover?: string;
208
+ };
209
+ fontSize?: string;
210
+ fontWeight?: string;
211
+ focusRing?: FocusRingStyle;
212
+ paddingBlock?: string;
213
+ paddingInline?: string;
214
+ activeIndicator?: {
215
+ color?: string;
216
+ width?: string;
217
+ borderRadius?: string;
218
+ };
219
+ };
220
+ tabSeparator?: {
221
+ color?: string;
222
+ width?: string;
223
+ };
224
+ }
180
225
  }
181
226
  //# sourceMappingURL=interfaces.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/tabs/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IAEnC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IAE7D;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;OAQG;IACH,sBAAsB,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;CACjD;AACD,yBAAiB,SAAS,CAAC;IACzB,KAAY,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;IAE1D,UAAiB,GAAG;QAClB;;WAEG;QACH,EAAE,EAAE,MAAM,CAAC;QACX;;WAEG;QACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB;;WAEG;QACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B;;WAEG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;;WAGG;QACH,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB;;WAEG;QACH,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB;;WAEG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;QAC1B;;;;WAIG;QACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB;;WAEG;QACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QACnC;;;;;;WAMG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;;;;WAKG;QACH,qBAAqB,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;KACrD;IAED,UAAiB,YAAY;QAC3B;;WAEG;QACH,WAAW,EAAE,MAAM,CAAC;QACpB;;WAEG;QACH,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB;IAED,UAAiB,WAAW;QAC1B;;WAEG;QACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B;;WAEG;QACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B;;;WAGG;QACH,kCAAkC,CAAC,EAAE,MAAM,CAAC;KAC7C;CACF"}
1
+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/tabs/interfaces.ts"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/tabs/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ButtonProps } from '../button/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface TabsProps extends BaseComponentProps {\n /**\n * Specifies the tabs to display. Each tab object has the following properties:\n *\n * - `id` (string) - The tab identifier. This value needs to be passed to the Tabs component as `activeTabId` to select this tab.\n * - `label` (ReactNode) - Tab label shown in the UI.\n * - `content` (ReactNode) - (Optional) Tab content to render in the container.\n * - `disabled` (boolean) - (Optional) Specifies if this tab is disabled.\n * - `disabledReason` (string) - (Optional) Displays tooltip near the tab when disabled. Use to provide additional context.\n * - `dismissible` (boolean) - (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.\n * - `dismissLabel` (boolean) - (Optional) Specifies an aria-label for the dismiss icon button.\n * - `dismissDisabled` (boolean) - (Optional) Determines whether the dismiss button is disabled.\n * - `action` (ReactNode) - (Optional) Action for the tab, rendered next to its corresponding label.\n * Although it is technically possible to insert any content, our UX guidelines only allow you to add\n * an icon button or icon button dropdown.\n * - `onDismiss` (ButtonProps['onClick']) - (Optional) Called when a user clicks on the dismiss button.\n * - `href` (string) - (Optional) You can use this parameter to change the default `href` of the internal tab anchor. The\n * `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (that is, CTRL,\n * ALT, SHIFT, META). This enables the user to open new browser tabs with an initially selected component tab,\n * if your application routing can handle such deep links. You can manually update routing on the current page\n * using the `activeTabHref` property of the `change` event's detail.\n * - `contentRenderStrategy` (string) - (Optional) Determines when tab content is rendered:\n - `'active'`: (Default) Only render content when the tab is active.\n * - `'eager'`: Always render tab content (hidden when the tab is not active).\n * - `'lazy'`: Like 'eager', but content is only rendered after the tab is first activated.\n */\n tabs: ReadonlyArray<TabsProps.Tab>;\n\n /**\n * Actions for the tabs header, displayed next to the list of tabs.\n * Use this to add a button or button dropdown that performs actions on the\n * entire tab list. We recommend a maximum of one interactive element to\n * minimize the number of keyboard tab stops between the tab list and content.\n */\n actions?: React.ReactNode;\n\n /**\n * The possible visual variants of tabs are the following:\n * * `default` - Use in any context.\n * * `container` - Use this variant to have the tabs displayed within a container header.\n * * `stacked` - Use this variant directly adjacent to other stacked containers (such as a container, table).\n * @visualrefresh `stacked` variant\n */\n variant?: TabsProps.Variant;\n\n /**\n * Called whenever the user selects a different tab.\n * The event's `detail` contains the new `activeTabId`.\n */\n onChange?: NonCancelableEventHandler<TabsProps.ChangeDetail>;\n\n /**\n * The `id` of the currently active tab.\n * * If you don't set this property, the component activates the first tab and switches tabs automatically when a tab header is clicked (that is, uncontrolled behavior).\n * * If you explicitly set this property, you must set define an `onChange` handler to update the property when a tab header is clicked (that is, controlled behavior).\n */\n activeTabId?: string;\n\n /**\n * Provides an `aria-label` to the tab container.\n * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n */\n ariaLabel?: string;\n\n /**\n * Sets the `aria-labelledby` property on the tab container.\n * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n */\n ariaLabelledby?: string;\n\n /**\n * Determines whether the tab content has padding. If `true`, removes the default padding from the tab content area.\n */\n disableContentPaddings?: boolean;\n\n /**\n * An object containing all the necessary localized strings required by the component.\n * @i18n\n */\n i18nStrings?: TabsProps.I18nStrings;\n /**\n * Enabling this property makes the tab content fit to the available height.\n * If the tab content is too short, it will stretch. If the tab content is too long, a vertical scrollbar will be shown.\n */\n fitHeight?: boolean;\n /**\n * Determines how the active tab is switched when navigating using\n * the keyboard. The options are:\n * - 'automatic' (default): the active tab is switched using the arrow keys.\n * - 'manual': a tab must be explicitly activated using the enter/space key.\n * We recommend using 'automatic' in most situations to provide consistent\n * and quick switching between tabs. Use 'manual' only if there is a specific\n * need to introduce friction to the switching of tabs.\n */\n keyboardActivationMode?: 'automatic' | 'manual';\n}\nexport namespace TabsProps {\n export type Variant = 'default' | 'container' | 'stacked';\n\n export interface Tab {\n /**\n * The tab id. This value will be need to be passed to the Tabs component as `activeTabId` to select this tab.\n */\n id: string;\n /**\n * Tab label shown in the UI.\n */\n label: React.ReactNode;\n /**\n * Tab content to render in the container.\n */\n content?: React.ReactNode;\n /**\n * Whether this tab is disabled.\n */\n disabled?: boolean;\n /**\n * Provides a reason why this tab is disabled.\n */\n disabledReason?: string;\n /**\n * (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.\n * When a user clicks on this button the onDismiss handler is called.\n */\n dismissible?: boolean;\n /**\n * (Optional) Specifies an aria-label for the dismiss icon button.\n */\n dismissLabel?: string;\n /**\n * (Optional) Determines whether the dismiss button is disabled.\n */\n dismissDisabled?: boolean;\n /**\n * (Optional) Action for the tab, rendered next to its corresponding label.\n * Although it is technically possible to insert any content, our UX guidelines only allow you to add\n * an icon button or icon button dropdown.\n */\n action?: React.ReactNode;\n /**\n * (event => void) Called when a user clicks on the dismiss button.\n */\n onDismiss?: ButtonProps['onClick'];\n /**\n * You can use this parameter to change the default `href` of the internal tab anchor. The\n * `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (CTRL,\n * ALT, SHIFT, META). This allows to open new browser tabs with an initially selected component tab,\n * when the routing can handle such deep links. You can manually update routing on the current page\n * using the `activeTabHref` property of the `change` event's detail.\n */\n href?: string;\n /**\n * Determines when tab content is rendered:\n * - 'active' (default): Only render content when the tab is active.\n * - 'eager': Always render tab content (hidden when the tab is not active).\n * - 'lazy': Like 'eager', but content is only rendered after the tab is first activated.\n */\n contentRenderStrategy?: 'active' | 'eager' | 'lazy';\n }\n\n export interface ChangeDetail {\n /**\n * The ID of the clicked tab.\n */\n activeTabId: string;\n /**\n * The `href` attribute of the clicked tab, if defined.\n */\n activeTabHref?: string;\n }\n\n export interface I18nStrings {\n /**\n * ARIA label for the scroll left button that appears when the tab header is wider than the container.\n */\n scrollLeftAriaLabel?: string;\n /**\n * ARIA label for the scroll right button that appears when the tab header is wider than the container.\n */\n scrollRightAriaLabel?: string;\n /**\n * ARIA role description for the Tabs component when an action or dismissible prop is in use. This is used\n * with role=\"application\" to provide further information on the purpose of this component\n */\n tabsWithActionsAriaRoleDescription?: string;\n }\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/tabs/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ButtonProps } from '../button/interfaces';\nimport { ContainerProps } from '../container/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { FocusRingStyle } from '../internal/types';\n\nexport interface TabsProps extends BaseComponentProps {\n /**\n * Specifies the tabs to display. Each tab object has the following properties:\n *\n * - `id` (string) - The tab identifier. This value needs to be passed to the Tabs component as `activeTabId` to select this tab.\n * - `label` (ReactNode) - Tab label shown in the UI.\n * - `content` (ReactNode) - (Optional) Tab content to render in the container.\n * - `disabled` (boolean) - (Optional) Specifies if this tab is disabled.\n * - `disabledReason` (string) - (Optional) Displays tooltip near the tab when disabled. Use to provide additional context.\n * - `dismissible` (boolean) - (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.\n * - `dismissLabel` (boolean) - (Optional) Specifies an aria-label for the dismiss icon button.\n * - `dismissDisabled` (boolean) - (Optional) Determines whether the dismiss button is disabled.\n * - `action` (ReactNode) - (Optional) Action for the tab, rendered next to its corresponding label.\n * Although it is technically possible to insert any content, our UX guidelines only allow you to add\n * an icon button or icon button dropdown.\n * - `onDismiss` (ButtonProps['onClick']) - (Optional) Called when a user clicks on the dismiss button.\n * - `href` (string) - (Optional) You can use this parameter to change the default `href` of the internal tab anchor. The\n * `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (that is, CTRL,\n * ALT, SHIFT, META). This enables the user to open new browser tabs with an initially selected component tab,\n * if your application routing can handle such deep links. You can manually update routing on the current page\n * using the `activeTabHref` property of the `change` event's detail.\n * - `contentRenderStrategy` (string) - (Optional) Determines when tab content is rendered:\n - `'active'`: (Default) Only render content when the tab is active.\n * - `'eager'`: Always render tab content (hidden when the tab is not active).\n * - `'lazy'`: Like 'eager', but content is only rendered after the tab is first activated.\n */\n tabs: ReadonlyArray<TabsProps.Tab>;\n\n /**\n * Actions for the tabs header, displayed next to the list of tabs.\n * Use this to add a button or button dropdown that performs actions on the\n * entire tab list. We recommend a maximum of one interactive element to\n * minimize the number of keyboard tab stops between the tab list and content.\n */\n actions?: React.ReactNode;\n\n /**\n * The possible visual variants of tabs are the following:\n * * `default` - Use in any context.\n * * `container` - Use this variant to have the tabs displayed within a container header.\n * * `stacked` - Use this variant directly adjacent to other stacked containers (such as a container, table).\n * @visualrefresh `stacked` variant\n */\n variant?: TabsProps.Variant;\n\n /**\n * Called whenever the user selects a different tab.\n * The event's `detail` contains the new `activeTabId`.\n */\n onChange?: NonCancelableEventHandler<TabsProps.ChangeDetail>;\n\n /**\n * The `id` of the currently active tab.\n * * If you don't set this property, the component activates the first tab and switches tabs automatically when a tab header is clicked (that is, uncontrolled behavior).\n * * If you explicitly set this property, you must set define an `onChange` handler to update the property when a tab header is clicked (that is, controlled behavior).\n */\n activeTabId?: string;\n\n /**\n * Provides an `aria-label` to the tab container.\n * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n */\n ariaLabel?: string;\n\n /**\n * Sets the `aria-labelledby` property on the tab container.\n * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n */\n ariaLabelledby?: string;\n\n /**\n * Determines whether the tab content has padding. If `true`, removes the default padding from the tab content area.\n */\n disableContentPaddings?: boolean;\n\n /**\n * An object containing all the necessary localized strings required by the component.\n * @i18n\n */\n i18nStrings?: TabsProps.I18nStrings;\n /**\n * Enabling this property makes the tab content fit to the available height.\n * If the tab content is too short, it will stretch. If the tab content is too long, a vertical scrollbar will be shown.\n */\n fitHeight?: boolean;\n /**\n * Determines how the active tab is switched when navigating using\n * the keyboard. The options are:\n * - 'automatic' (default): the active tab is switched using the arrow keys.\n * - 'manual': a tab must be explicitly activated using the enter/space key.\n * We recommend using 'automatic' in most situations to provide consistent\n * and quick switching between tabs. Use 'manual' only if there is a specific\n * need to introduce friction to the switching of tabs.\n */\n keyboardActivationMode?: 'automatic' | 'manual';\n\n /**\n * @awsuiSystem core\n */\n style?: TabsProps.Style;\n}\nexport namespace TabsProps {\n export type Variant = 'default' | 'container' | 'stacked';\n\n export interface Tab {\n /**\n * The tab id. This value will be need to be passed to the Tabs component as `activeTabId` to select this tab.\n */\n id: string;\n /**\n * Tab label shown in the UI.\n */\n label: React.ReactNode;\n /**\n * Tab content to render in the container.\n */\n content?: React.ReactNode;\n /**\n * Whether this tab is disabled.\n */\n disabled?: boolean;\n /**\n * Provides a reason why this tab is disabled.\n */\n disabledReason?: string;\n /**\n * (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.\n * When a user clicks on this button the onDismiss handler is called.\n */\n dismissible?: boolean;\n /**\n * (Optional) Specifies an aria-label for the dismiss icon button.\n */\n dismissLabel?: string;\n /**\n * (Optional) Determines whether the dismiss button is disabled.\n */\n dismissDisabled?: boolean;\n /**\n * (Optional) Action for the tab, rendered next to its corresponding label.\n * Although it is technically possible to insert any content, our UX guidelines only allow you to add\n * an icon button or icon button dropdown.\n */\n action?: React.ReactNode;\n /**\n * (event => void) Called when a user clicks on the dismiss button.\n */\n onDismiss?: ButtonProps['onClick'];\n /**\n * You can use this parameter to change the default `href` of the internal tab anchor. The\n * `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (CTRL,\n * ALT, SHIFT, META). This allows to open new browser tabs with an initially selected component tab,\n * when the routing can handle such deep links. You can manually update routing on the current page\n * using the `activeTabHref` property of the `change` event's detail.\n */\n href?: string;\n /**\n * Determines when tab content is rendered:\n * - 'active' (default): Only render content when the tab is active.\n * - 'eager': Always render tab content (hidden when the tab is not active).\n * - 'lazy': Like 'eager', but content is only rendered after the tab is first activated.\n */\n contentRenderStrategy?: 'active' | 'eager' | 'lazy';\n }\n\n export interface ChangeDetail {\n /**\n * The ID of the clicked tab.\n */\n activeTabId: string;\n /**\n * The `href` attribute of the clicked tab, if defined.\n */\n activeTabHref?: string;\n }\n\n export interface I18nStrings {\n /**\n * ARIA label for the scroll left button that appears when the tab header is wider than the container.\n */\n scrollLeftAriaLabel?: string;\n /**\n * ARIA label for the scroll right button that appears when the tab header is wider than the container.\n */\n scrollRightAriaLabel?: string;\n /**\n * ARIA role description for the Tabs component when an action or dismissible prop is in use. This is used\n * with role=\"application\" to provide further information on the purpose of this component\n */\n tabsWithActionsAriaRoleDescription?: string;\n }\n\n export interface Style {\n container?: ContainerProps.Style;\n tab?: {\n backgroundColor?: {\n active?: string;\n default?: string;\n disabled?: string;\n hover?: string;\n };\n borderColor?: {\n active?: string;\n default?: string;\n disabled?: string;\n hover?: string;\n };\n borderRadius?: string;\n borderWidth?: string;\n color?: {\n active?: string;\n default?: string;\n disabled?: string;\n hover?: string;\n };\n fontSize?: string;\n fontWeight?: string;\n focusRing?: FocusRingStyle;\n paddingBlock?: string;\n paddingInline?: string;\n activeIndicator?: {\n color?: string;\n width?: string;\n borderRadius?: string;\n };\n };\n tabSeparator?: {\n color?: string;\n width?: string;\n };\n }\n}\n"]}
@@ -1,35 +1,35 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "tabs-header": "awsui_tabs-header_14rmt_1n7hy_154",
5
- "tab-header-scroll-container": "awsui_tab-header-scroll-container_14rmt_1n7hy_163",
6
- "tabs-header-list": "awsui_tabs-header-list_14rmt_1n7hy_169",
7
- "pagination-button": "awsui_pagination-button_14rmt_1n7hy_186",
8
- "pagination-button-left": "awsui_pagination-button-left_14rmt_1n7hy_193",
9
- "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_1n7hy_196",
10
- "pagination-button-right": "awsui_pagination-button-right_14rmt_1n7hy_200",
11
- "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_1n7hy_203",
12
- "actions-container": "awsui_actions-container_14rmt_1n7hy_208",
13
- "tabs-tab": "awsui_tabs-tab_14rmt_1n7hy_216",
14
- "tabs-tab-label": "awsui_tabs-tab-label_14rmt_1n7hy_226",
15
- "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_1n7hy_237",
16
- "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_1n7hy_248",
17
- "tabs-tab-action": "awsui_tabs-tab-action_14rmt_1n7hy_248",
18
- "refresh": "awsui_refresh_14rmt_1n7hy_253",
19
- "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_1n7hy_257",
20
- "tabs-tab-link": "awsui_tabs-tab-link_14rmt_1n7hy_299",
21
- "tabs-tab-active": "awsui_tabs-tab-active_14rmt_1n7hy_377",
22
- "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_1n7hy_384",
23
- "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_1n7hy_388",
24
- "root": "awsui_root_14rmt_1n7hy_392",
25
- "tabs": "awsui_tabs_14rmt_1n7hy_154",
26
- "tabs-content": "awsui_tabs-content_14rmt_1n7hy_430",
27
- "fit-height": "awsui_fit-height_14rmt_1n7hy_434",
28
- "tabs-content-active": "awsui_tabs-content-active_14rmt_1n7hy_440",
29
- "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_1n7hy_454",
30
- "with-paddings": "awsui_with-paddings_14rmt_1n7hy_454",
31
- "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_1n7hy_465",
32
- "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_1n7hy_476",
33
- "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_1n7hy_480"
4
+ "tabs-header": "awsui_tabs-header_14rmt_ldrjk_154",
5
+ "tab-header-scroll-container": "awsui_tab-header-scroll-container_14rmt_ldrjk_163",
6
+ "tabs-header-list": "awsui_tabs-header-list_14rmt_ldrjk_169",
7
+ "pagination-button": "awsui_pagination-button_14rmt_ldrjk_186",
8
+ "pagination-button-left": "awsui_pagination-button-left_14rmt_ldrjk_193",
9
+ "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_ldrjk_196",
10
+ "pagination-button-right": "awsui_pagination-button-right_14rmt_ldrjk_200",
11
+ "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_ldrjk_203",
12
+ "actions-container": "awsui_actions-container_14rmt_ldrjk_208",
13
+ "tabs-tab": "awsui_tabs-tab_14rmt_ldrjk_216",
14
+ "tabs-tab-label": "awsui_tabs-tab-label_14rmt_ldrjk_226",
15
+ "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_ldrjk_237",
16
+ "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_ldrjk_245",
17
+ "tabs-tab-action": "awsui_tabs-tab-action_14rmt_ldrjk_245",
18
+ "refresh": "awsui_refresh_14rmt_ldrjk_250",
19
+ "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_ldrjk_254",
20
+ "tabs-tab-link": "awsui_tabs-tab-link_14rmt_ldrjk_296",
21
+ "tabs-tab-active": "awsui_tabs-tab-active_14rmt_ldrjk_379",
22
+ "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_ldrjk_388",
23
+ "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_ldrjk_392",
24
+ "root": "awsui_root_14rmt_ldrjk_396",
25
+ "tabs": "awsui_tabs_14rmt_ldrjk_154",
26
+ "tabs-content": "awsui_tabs-content_14rmt_ldrjk_434",
27
+ "fit-height": "awsui_fit-height_14rmt_ldrjk_438",
28
+ "tabs-content-active": "awsui_tabs-content-active_14rmt_ldrjk_444",
29
+ "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_ldrjk_458",
30
+ "with-paddings": "awsui_with-paddings_14rmt_ldrjk_458",
31
+ "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_ldrjk_469",
32
+ "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_ldrjk_480",
33
+ "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_ldrjk_484"
34
34
  };
35
35
 
@@ -0,0 +1,33 @@
1
+ import customCssProps from '../internal/generated/custom-css-properties';
2
+ import { TabsProps } from './interfaces';
3
+ export declare function getTabStyles(style: TabsProps['style']): {
4
+ [customCssProps.styleBackgroundActive]: string | undefined;
5
+ [customCssProps.styleBackgroundDefault]: string | undefined;
6
+ [customCssProps.styleBackgroundDisabled]: string | undefined;
7
+ [customCssProps.styleBackgroundHover]: string | undefined;
8
+ [customCssProps.styleBorderColorActive]: string | undefined;
9
+ [customCssProps.styleBorderColorDefault]: string | undefined;
10
+ [customCssProps.styleBorderColorDisabled]: string | undefined;
11
+ [customCssProps.styleBorderColorHover]: string | undefined;
12
+ [customCssProps.styleColorActive]: string | undefined;
13
+ [customCssProps.styleColorDefault]: string | undefined;
14
+ [customCssProps.styleColorDisabled]: string | undefined;
15
+ [customCssProps.styleColorHover]: string | undefined;
16
+ [customCssProps.styleFocusRingBorderColor]: string | undefined;
17
+ [customCssProps.styleFocusRingBorderRadius]: string | undefined;
18
+ [customCssProps.styleFocusRingBorderWidth]: string | undefined;
19
+ borderRadius: string | undefined;
20
+ borderWidth: string | undefined;
21
+ fontSize: string | undefined;
22
+ fontWeight: string | undefined;
23
+ paddingBlock: string | undefined;
24
+ paddingInline: string | undefined;
25
+ } | undefined;
26
+ export declare function getTabContainerStyles(style: TabsProps['style']): {
27
+ [customCssProps.styleTabsActiveIndicatorColor]: string | undefined;
28
+ [customCssProps.styleTabsActiveIndicatorWidth]: string | undefined;
29
+ [customCssProps.styleTabsActiveIndicatorBorderRadius]: string | undefined;
30
+ [customCssProps.styleTabsSeparatorColor]: string | undefined;
31
+ [customCssProps.styleTabsSeparatorWidth]: string | undefined;
32
+ } | undefined;
33
+ //# sourceMappingURL=styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/tabs/styles.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,MAAM,6CAA6C,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC;IAYlD,CAAC,cAAc,CAAC,qBAAqB,CAAC,qBAAqC;IAC3E,CAAC,cAAc,CAAC,sBAAsB,CAAC,qBAAsC;IAC7E,CAAC,cAAc,CAAC,uBAAuB,CAAC,qBAAuC;IAC/E,CAAC,cAAc,CAAC,oBAAoB,CAAC,qBAAoC;IACzE,CAAC,cAAc,CAAC,sBAAsB,CAAC,qBAAiC;IACxE,CAAC,cAAc,CAAC,uBAAuB,CAAC,qBAAkC;IAC1E,CAAC,cAAc,CAAC,wBAAwB,CAAC,qBAAmC;IAC5E,CAAC,cAAc,CAAC,qBAAqB,CAAC,qBAAgC;IACtE,CAAC,cAAc,CAAC,gBAAgB,CAAC,qBAA2B;IAC5D,CAAC,cAAc,CAAC,iBAAiB,CAAC,qBAA4B;IAC9D,CAAC,cAAc,CAAC,kBAAkB,CAAC,qBAA6B;IAChE,CAAC,cAAc,CAAC,eAAe,CAAC,qBAA0B;IAC1D,CAAC,cAAc,CAAC,yBAAyB,CAAC,qBAAoC;IAC9E,CAAC,cAAc,CAAC,0BAA0B,CAAC,qBAAqC;IAChF,CAAC,cAAc,CAAC,yBAAyB,CAAC,qBAAoC;;;;;;;cAEjF;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC;IAM3D,CAAC,cAAc,CAAC,6BAA6B,CAAC,qBAAoC;IAClF,CAAC,cAAc,CAAC,6BAA6B,CAAC,qBAAoC;IAClF,CAAC,cAAc,CAAC,oCAAoC,CAAC,qBAA2C;IAChG,CAAC,cAAc,CAAC,uBAAuB,CAAC,qBAA4B;IACpE,CAAC,cAAc,CAAC,uBAAuB,CAAC,qBAA4B;cAEvE"}
@@ -0,0 +1,47 @@
1
+ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
+ // SPDX-License-Identifier: Apache-2.0
3
+ import { SYSTEM } from '../internal/environment';
4
+ import customCssProps from '../internal/generated/custom-css-properties';
5
+ export function getTabStyles(style) {
6
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
7
+ if (SYSTEM !== 'core') {
8
+ return undefined;
9
+ }
10
+ return {
11
+ borderRadius: (_a = style === null || style === void 0 ? void 0 : style.tab) === null || _a === void 0 ? void 0 : _a.borderRadius,
12
+ borderWidth: (_b = style === null || style === void 0 ? void 0 : style.tab) === null || _b === void 0 ? void 0 : _b.borderWidth,
13
+ fontSize: (_c = style === null || style === void 0 ? void 0 : style.tab) === null || _c === void 0 ? void 0 : _c.fontSize,
14
+ fontWeight: (_d = style === null || style === void 0 ? void 0 : style.tab) === null || _d === void 0 ? void 0 : _d.fontWeight,
15
+ paddingBlock: (_e = style === null || style === void 0 ? void 0 : style.tab) === null || _e === void 0 ? void 0 : _e.paddingBlock,
16
+ paddingInline: (_f = style === null || style === void 0 ? void 0 : style.tab) === null || _f === void 0 ? void 0 : _f.paddingInline,
17
+ [customCssProps.styleBackgroundActive]: (_h = (_g = style === null || style === void 0 ? void 0 : style.tab) === null || _g === void 0 ? void 0 : _g.backgroundColor) === null || _h === void 0 ? void 0 : _h.active,
18
+ [customCssProps.styleBackgroundDefault]: (_k = (_j = style === null || style === void 0 ? void 0 : style.tab) === null || _j === void 0 ? void 0 : _j.backgroundColor) === null || _k === void 0 ? void 0 : _k.default,
19
+ [customCssProps.styleBackgroundDisabled]: (_m = (_l = style === null || style === void 0 ? void 0 : style.tab) === null || _l === void 0 ? void 0 : _l.backgroundColor) === null || _m === void 0 ? void 0 : _m.disabled,
20
+ [customCssProps.styleBackgroundHover]: (_p = (_o = style === null || style === void 0 ? void 0 : style.tab) === null || _o === void 0 ? void 0 : _o.backgroundColor) === null || _p === void 0 ? void 0 : _p.hover,
21
+ [customCssProps.styleBorderColorActive]: (_r = (_q = style === null || style === void 0 ? void 0 : style.tab) === null || _q === void 0 ? void 0 : _q.borderColor) === null || _r === void 0 ? void 0 : _r.active,
22
+ [customCssProps.styleBorderColorDefault]: (_t = (_s = style === null || style === void 0 ? void 0 : style.tab) === null || _s === void 0 ? void 0 : _s.borderColor) === null || _t === void 0 ? void 0 : _t.default,
23
+ [customCssProps.styleBorderColorDisabled]: (_v = (_u = style === null || style === void 0 ? void 0 : style.tab) === null || _u === void 0 ? void 0 : _u.borderColor) === null || _v === void 0 ? void 0 : _v.disabled,
24
+ [customCssProps.styleBorderColorHover]: (_x = (_w = style === null || style === void 0 ? void 0 : style.tab) === null || _w === void 0 ? void 0 : _w.borderColor) === null || _x === void 0 ? void 0 : _x.hover,
25
+ [customCssProps.styleColorActive]: (_z = (_y = style === null || style === void 0 ? void 0 : style.tab) === null || _y === void 0 ? void 0 : _y.color) === null || _z === void 0 ? void 0 : _z.active,
26
+ [customCssProps.styleColorDefault]: (_1 = (_0 = style === null || style === void 0 ? void 0 : style.tab) === null || _0 === void 0 ? void 0 : _0.color) === null || _1 === void 0 ? void 0 : _1.default,
27
+ [customCssProps.styleColorDisabled]: (_3 = (_2 = style === null || style === void 0 ? void 0 : style.tab) === null || _2 === void 0 ? void 0 : _2.color) === null || _3 === void 0 ? void 0 : _3.disabled,
28
+ [customCssProps.styleColorHover]: (_5 = (_4 = style === null || style === void 0 ? void 0 : style.tab) === null || _4 === void 0 ? void 0 : _4.color) === null || _5 === void 0 ? void 0 : _5.hover,
29
+ [customCssProps.styleFocusRingBorderColor]: (_7 = (_6 = style === null || style === void 0 ? void 0 : style.tab) === null || _6 === void 0 ? void 0 : _6.focusRing) === null || _7 === void 0 ? void 0 : _7.borderColor,
30
+ [customCssProps.styleFocusRingBorderRadius]: (_9 = (_8 = style === null || style === void 0 ? void 0 : style.tab) === null || _8 === void 0 ? void 0 : _8.focusRing) === null || _9 === void 0 ? void 0 : _9.borderRadius,
31
+ [customCssProps.styleFocusRingBorderWidth]: (_11 = (_10 = style === null || style === void 0 ? void 0 : style.tab) === null || _10 === void 0 ? void 0 : _10.focusRing) === null || _11 === void 0 ? void 0 : _11.borderWidth,
32
+ };
33
+ }
34
+ export function getTabContainerStyles(style) {
35
+ var _a, _b, _c, _d, _e, _f, _g, _h;
36
+ if (SYSTEM !== 'core') {
37
+ return undefined;
38
+ }
39
+ return {
40
+ [customCssProps.styleTabsActiveIndicatorColor]: (_b = (_a = style === null || style === void 0 ? void 0 : style.tab) === null || _a === void 0 ? void 0 : _a.activeIndicator) === null || _b === void 0 ? void 0 : _b.color,
41
+ [customCssProps.styleTabsActiveIndicatorWidth]: (_d = (_c = style === null || style === void 0 ? void 0 : style.tab) === null || _c === void 0 ? void 0 : _c.activeIndicator) === null || _d === void 0 ? void 0 : _d.width,
42
+ [customCssProps.styleTabsActiveIndicatorBorderRadius]: (_f = (_e = style === null || style === void 0 ? void 0 : style.tab) === null || _e === void 0 ? void 0 : _e.activeIndicator) === null || _f === void 0 ? void 0 : _f.borderRadius,
43
+ [customCssProps.styleTabsSeparatorColor]: (_g = style === null || style === void 0 ? void 0 : style.tabSeparator) === null || _g === void 0 ? void 0 : _g.color,
44
+ [customCssProps.styleTabsSeparatorWidth]: (_h = style === null || style === void 0 ? void 0 : style.tabSeparator) === null || _h === void 0 ? void 0 : _h.width,
45
+ };
46
+ }
47
+ //# sourceMappingURL=styles.js.map