@cloudscape-design/components 3.0.333 → 3.0.335
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.
- package/alert/styles.css.js +19 -19
- package/alert/styles.scoped.css +33 -33
- package/alert/styles.selectors.js +19 -19
- package/annotation-context/annotation/styles.css.js +24 -24
- package/annotation-context/annotation/styles.scoped.css +30 -30
- package/annotation-context/annotation/styles.selectors.js +24 -24
- package/app-layout/index.js +3 -3
- package/app-layout/index.js.map +1 -1
- package/app-layout/visual-refresh/context.d.ts.map +1 -1
- package/app-layout/visual-refresh/context.js +3 -3
- package/app-layout/visual-refresh/context.js.map +1 -1
- package/app-layout/visual-refresh/styles.css.js +69 -69
- package/app-layout/visual-refresh/styles.scoped.css +168 -168
- package/app-layout/visual-refresh/styles.selectors.js +69 -69
- package/attribute-editor/styles.css.js +14 -14
- package/attribute-editor/styles.scoped.css +27 -27
- package/attribute-editor/styles.selectors.js +14 -14
- package/autosuggest/virtual-list.d.ts.map +1 -1
- package/autosuggest/virtual-list.js +2 -2
- package/autosuggest/virtual-list.js.map +1 -1
- package/badge/styles.css.js +5 -5
- package/badge/styles.scoped.css +7 -7
- package/badge/styles.selectors.js +5 -5
- package/box/styles.css.js +189 -189
- package/box/styles.scoped.css +238 -238
- package/box/styles.selectors.js +189 -189
- package/breadcrumb-group/styles.css.js +7 -7
- package/breadcrumb-group/styles.scoped.css +14 -14
- package/breadcrumb-group/styles.selectors.js +7 -7
- package/button/internal.d.ts.map +1 -1
- package/button/internal.js +12 -1
- package/button/internal.js.map +1 -1
- package/button/styles.css.js +20 -20
- package/button/styles.scoped.css +154 -154
- package/button/styles.selectors.js +20 -20
- package/button-dropdown/index.d.ts.map +1 -1
- package/button-dropdown/index.js +2 -2
- package/button-dropdown/index.js.map +1 -1
- package/button-dropdown/interfaces.d.ts +31 -0
- package/button-dropdown/interfaces.d.ts.map +1 -1
- package/button-dropdown/interfaces.js.map +1 -1
- package/button-dropdown/internal.d.ts.map +1 -1
- package/button-dropdown/internal.js +64 -8
- package/button-dropdown/internal.js.map +1 -1
- package/button-dropdown/mobile-expandable-group/styles.css.js +5 -5
- package/button-dropdown/mobile-expandable-group/styles.scoped.css +6 -6
- package/button-dropdown/mobile-expandable-group/styles.selectors.js +5 -5
- package/button-dropdown/styles.css.js +14 -8
- package/button-dropdown/styles.scoped.css +44 -14
- package/button-dropdown/styles.selectors.js +14 -8
- package/button-dropdown/utils/use-button-dropdown.d.ts +1 -0
- package/button-dropdown/utils/use-button-dropdown.d.ts.map +1 -1
- package/button-dropdown/utils/use-button-dropdown.js +1 -0
- package/button-dropdown/utils/use-button-dropdown.js.map +1 -1
- package/calendar/styles.css.js +18 -18
- package/calendar/styles.scoped.css +40 -40
- package/calendar/styles.selectors.js +18 -18
- package/cards/index.js +5 -4
- package/cards/index.js.map +1 -1
- package/cards/styles.css.js +38 -38
- package/cards/styles.scoped.css +55 -55
- package/cards/styles.selectors.js +38 -38
- package/checkbox/styles.css.js +3 -3
- package/checkbox/styles.scoped.css +7 -7
- package/checkbox/styles.selectors.js +3 -3
- package/code-editor/index.js +2 -2
- package/code-editor/index.js.map +1 -1
- package/code-editor/status-bar.d.ts.map +1 -1
- package/code-editor/status-bar.js +3 -3
- package/code-editor/status-bar.js.map +1 -1
- package/code-editor/styles.css.js +32 -32
- package/code-editor/styles.scoped.css +129 -129
- package/code-editor/styles.selectors.js +32 -32
- package/collection-preferences/content-display/styles.css.js +11 -11
- package/collection-preferences/content-display/styles.scoped.css +19 -19
- package/collection-preferences/content-display/styles.selectors.js +11 -11
- package/collection-preferences/styles.css.js +37 -37
- package/collection-preferences/styles.scoped.css +47 -47
- package/collection-preferences/styles.selectors.js +37 -37
- package/column-layout/flexible-column-layout/index.d.ts.map +1 -1
- package/column-layout/flexible-column-layout/index.js +2 -2
- package/column-layout/flexible-column-layout/index.js.map +1 -1
- package/column-layout/styles.css.js +13 -13
- package/column-layout/styles.scoped.css +44 -44
- package/column-layout/styles.selectors.js +13 -13
- package/container/styles.css.js +28 -28
- package/container/styles.scoped.css +52 -52
- package/container/styles.selectors.js +28 -28
- package/date-picker/styles.css.js +7 -7
- package/date-picker/styles.scoped.css +10 -10
- package/date-picker/styles.selectors.js +7 -7
- package/date-range-picker/styles.css.js +38 -38
- package/date-range-picker/styles.scoped.css +48 -48
- package/date-range-picker/styles.selectors.js +38 -38
- package/expandable-section/styles.css.js +29 -29
- package/expandable-section/styles.scoped.css +65 -65
- package/expandable-section/styles.selectors.js +29 -29
- package/flashbar/styles.css.js +46 -46
- package/flashbar/styles.scoped.css +160 -160
- package/flashbar/styles.selectors.js +46 -46
- package/form/internal.d.ts.map +1 -1
- package/form/internal.js +7 -2
- package/form/internal.js.map +1 -1
- package/form/styles.css.js +9 -9
- package/form/styles.scoped.css +9 -9
- package/form/styles.selectors.js +9 -9
- package/form-field/internal.d.ts.map +1 -1
- package/form-field/internal.js +8 -3
- package/form-field/internal.js.map +1 -1
- package/form-field/styles.css.js +19 -19
- package/form-field/styles.scoped.css +31 -31
- package/form-field/styles.selectors.js +19 -19
- package/grid/styles.css.js +53 -53
- package/grid/styles.scoped.css +55 -55
- package/grid/styles.selectors.js +53 -53
- package/header/styles.css.js +44 -44
- package/header/styles.scoped.css +50 -50
- package/header/styles.selectors.js +44 -44
- package/help-panel/styles.css.js +4 -4
- package/help-panel/styles.scoped.css +70 -69
- package/help-panel/styles.selectors.js +4 -4
- package/icon/styles.css.js +21 -21
- package/icon/styles.scoped.css +50 -50
- package/icon/styles.selectors.js +21 -21
- package/input/styles.css.js +12 -12
- package/input/styles.scoped.css +35 -35
- package/input/styles.selectors.js +12 -12
- package/internal/analytics/components/analytics-funnel.d.ts.map +1 -1
- package/internal/analytics/components/analytics-funnel.js +58 -11
- package/internal/analytics/components/analytics-funnel.js.map +1 -1
- package/internal/analytics/context/analytics-context.d.ts +5 -1
- package/internal/analytics/context/analytics-context.d.ts.map +1 -1
- package/internal/analytics/context/analytics-context.js +3 -0
- package/internal/analytics/context/analytics-context.js.map +1 -1
- package/internal/analytics/hooks/use-funnel.d.ts +3 -0
- package/internal/analytics/hooks/use-funnel.d.ts.map +1 -1
- package/internal/analytics/hooks/use-funnel.js +7 -2
- package/internal/analytics/hooks/use-funnel.js.map +1 -1
- package/internal/base-component/styles.scoped.css +8 -7
- package/internal/components/button-trigger/styles.css.js +9 -9
- package/internal/components/button-trigger/styles.scoped.css +26 -26
- package/internal/components/button-trigger/styles.selectors.js +9 -9
- package/internal/components/cartesian-chart/labels-measure.d.ts.map +1 -1
- package/internal/components/cartesian-chart/labels-measure.js +2 -2
- package/internal/components/cartesian-chart/labels-measure.js.map +1 -1
- package/internal/components/chart-filter/styles.css.js +3 -3
- package/internal/components/chart-filter/styles.scoped.css +4 -4
- package/internal/components/chart-filter/styles.selectors.js +3 -3
- package/internal/components/chart-legend/styles.css.js +6 -6
- package/internal/components/chart-legend/styles.scoped.css +16 -16
- package/internal/components/chart-legend/styles.selectors.js +6 -6
- package/internal/components/chart-popover/styles.css.js +3 -3
- package/internal/components/chart-popover/styles.scoped.css +4 -4
- package/internal/components/chart-popover/styles.selectors.js +3 -3
- package/internal/components/chart-series-details/styles.css.js +5 -5
- package/internal/components/chart-series-details/styles.scoped.css +10 -10
- package/internal/components/chart-series-details/styles.selectors.js +5 -5
- package/internal/components/chart-series-marker/styles.css.js +5 -5
- package/internal/components/chart-series-marker/styles.scoped.css +8 -8
- package/internal/components/chart-series-marker/styles.selectors.js +5 -5
- package/internal/components/chart-wrapper/styles.css.js +6 -6
- package/internal/components/chart-wrapper/styles.scoped.css +9 -9
- package/internal/components/chart-wrapper/styles.selectors.js +6 -6
- package/internal/components/dropdown/styles.css.js +20 -20
- package/internal/components/dropdown/styles.scoped.css +36 -36
- package/internal/components/dropdown/styles.selectors.js +20 -20
- package/internal/components/dropdown-footer/styles.css.js +3 -3
- package/internal/components/dropdown-footer/styles.scoped.css +4 -4
- package/internal/components/dropdown-footer/styles.selectors.js +3 -3
- package/internal/components/dropdown-status/index.d.ts.map +1 -1
- package/internal/components/dropdown-status/index.js +1 -1
- package/internal/components/dropdown-status/index.js.map +1 -1
- package/internal/components/dropdown-status/styles.css.js +2 -2
- package/internal/components/dropdown-status/styles.scoped.css +3 -3
- package/internal/components/dropdown-status/styles.selectors.js +2 -2
- package/internal/components/menu-dropdown/styles.css.js +7 -7
- package/internal/components/menu-dropdown/styles.scoped.css +14 -14
- package/internal/components/menu-dropdown/styles.selectors.js +7 -7
- package/internal/components/option/styles.css.js +17 -17
- package/internal/components/option/styles.scoped.css +31 -31
- package/internal/components/option/styles.selectors.js +17 -17
- package/internal/components/options-list/styles.css.js +2 -2
- package/internal/components/options-list/styles.scoped.css +3 -3
- package/internal/components/options-list/styles.selectors.js +2 -2
- package/internal/components/selectable-item/styles.css.js +16 -16
- package/internal/components/selectable-item/styles.scoped.css +29 -29
- package/internal/components/selectable-item/styles.selectors.js +16 -16
- package/internal/components/token-list/styles.css.js +9 -9
- package/internal/components/token-list/styles.scoped.css +21 -21
- package/internal/components/token-list/styles.selectors.js +9 -9
- package/internal/environment.js +1 -1
- package/internal/generated/theming/index.cjs +24 -13
- package/internal/generated/theming/index.js +24 -13
- package/internal/hooks/container-queries/index.d.ts +0 -2
- package/internal/hooks/container-queries/index.d.ts.map +1 -1
- package/internal/hooks/container-queries/index.js +2 -1
- package/internal/hooks/container-queries/index.js.map +1 -1
- package/internal/hooks/container-queries/use-container-breakpoints.d.ts.map +1 -1
- package/internal/hooks/container-queries/use-container-breakpoints.js +2 -2
- package/internal/hooks/container-queries/use-container-breakpoints.js.map +1 -1
- package/internal/hooks/container-queries/use-resize-observer.d.ts +1 -1
- package/internal/hooks/container-queries/use-resize-observer.d.ts.map +1 -1
- package/internal/hooks/container-queries/use-resize-observer.js +0 -2
- package/internal/hooks/container-queries/use-resize-observer.js.map +1 -1
- package/internal/hooks/use-dynamic-overlap/index.js +2 -2
- package/internal/hooks/use-dynamic-overlap/index.js.map +1 -1
- package/internal/manifest.json +1 -1
- package/internal/utils/use-container-width.d.ts.map +1 -1
- package/internal/utils/use-container-width.js +5 -3
- package/internal/utils/use-container-width.js.map +1 -1
- package/link/styles.css.js +20 -20
- package/link/styles.scoped.css +73 -73
- package/link/styles.selectors.js +20 -20
- package/modal/internal.d.ts.map +1 -1
- package/modal/internal.js +2 -1
- package/modal/internal.js.map +1 -1
- package/modal/styles.css.js +23 -23
- package/modal/styles.scoped.css +40 -40
- package/modal/styles.selectors.js +23 -23
- package/multiselect/styles.css.js +1 -1
- package/multiselect/styles.scoped.css +2 -2
- package/multiselect/styles.selectors.js +1 -1
- package/package.json +1 -1
- package/pagination/styles.css.js +9 -9
- package/pagination/styles.scoped.css +24 -24
- package/pagination/styles.selectors.js +9 -9
- package/pie-chart/styles.css.js +23 -23
- package/pie-chart/styles.scoped.css +42 -42
- package/pie-chart/styles.selectors.js +23 -23
- package/popover/styles.css.js +50 -50
- package/popover/styles.scoped.css +66 -66
- package/popover/styles.selectors.js +50 -50
- package/progress-bar/styles.css.js +18 -18
- package/progress-bar/styles.scoped.css +35 -35
- package/progress-bar/styles.selectors.js +18 -18
- package/property-filter/index.d.ts.map +1 -1
- package/property-filter/index.js +2 -3
- package/property-filter/index.js.map +1 -1
- package/property-filter/styles.css.js +29 -29
- package/property-filter/styles.scoped.css +32 -32
- package/property-filter/styles.selectors.js +29 -29
- package/property-filter/token-editor.d.ts.map +1 -1
- package/property-filter/token-editor.js +2 -2
- package/property-filter/token-editor.js.map +1 -1
- package/radio-group/styles.css.js +9 -9
- package/radio-group/styles.scoped.css +17 -17
- package/radio-group/styles.selectors.js +9 -9
- package/s3-resource-selector/s3-in-context/styles.css.js +7 -7
- package/s3-resource-selector/s3-in-context/styles.scoped.css +9 -9
- package/s3-resource-selector/s3-in-context/styles.selectors.js +7 -7
- package/segmented-control/styles.css.js +14 -14
- package/segmented-control/styles.scoped.css +35 -35
- package/segmented-control/styles.selectors.js +14 -14
- package/select/parts/virtual-list.js +2 -2
- package/select/parts/virtual-list.js.map +1 -1
- package/select/styles.css.js +1 -1
- package/select/styles.scoped.css +2 -2
- package/select/styles.selectors.js +1 -1
- package/side-navigation/styles.css.js +27 -27
- package/side-navigation/styles.scoped.css +39 -39
- package/side-navigation/styles.selectors.js +27 -27
- package/spinner/styles.css.js +13 -13
- package/spinner/styles.scoped.css +20 -20
- package/spinner/styles.selectors.js +13 -13
- package/split-panel/styles.css.js +56 -56
- package/split-panel/styles.scoped.css +78 -78
- package/split-panel/styles.selectors.js +56 -56
- package/status-indicator/internal.d.ts +6 -3
- package/status-indicator/internal.d.ts.map +1 -1
- package/status-indicator/internal.js +2 -2
- package/status-indicator/internal.js.map +1 -1
- package/status-indicator/styles.css.js +22 -20
- package/status-indicator/styles.scoped.css +33 -28
- package/status-indicator/styles.selectors.js +22 -20
- package/table/internal.d.ts.map +1 -1
- package/table/internal.js +6 -4
- package/table/internal.js.map +1 -1
- package/table/sticky-scrollbar/styles.css.js +4 -4
- package/table/sticky-scrollbar/styles.scoped.css +4 -5
- package/table/sticky-scrollbar/styles.selectors.js +4 -4
- package/table/styles.css.js +34 -34
- package/table/styles.scoped.css +43 -43
- package/table/styles.selectors.js +34 -34
- package/tabs/styles.css.js +21 -21
- package/tabs/styles.scoped.css +39 -39
- package/tabs/styles.selectors.js +21 -21
- package/tabs/tab-header-bar.js +2 -2
- package/tabs/tab-header-bar.js.map +1 -1
- package/test-utils/dom/button-dropdown/index.d.ts +2 -0
- package/test-utils/dom/button-dropdown/index.js +6 -1
- package/test-utils/dom/button-dropdown/index.js.map +1 -1
- package/test-utils/selectors/button-dropdown/index.d.ts +2 -0
- package/test-utils/selectors/button-dropdown/index.js +6 -1
- package/test-utils/selectors/button-dropdown/index.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
- package/text-content/styles.css.js +1 -1
- package/text-content/styles.scoped.css +64 -64
- package/text-content/styles.selectors.js +1 -1
- package/text-filter/styles.css.js +3 -3
- package/text-filter/styles.scoped.css +4 -4
- package/text-filter/styles.selectors.js +3 -3
- package/textarea/styles.css.js +4 -4
- package/textarea/styles.scoped.css +14 -14
- package/textarea/styles.selectors.js +4 -4
- package/tiles/styles.css.js +28 -28
- package/tiles/styles.scoped.css +70 -70
- package/tiles/styles.selectors.js +28 -28
- package/toggle/styles.css.js +8 -8
- package/toggle/styles.scoped.css +15 -15
- package/toggle/styles.selectors.js +8 -8
- package/token-group/styles.css.js +7 -7
- package/token-group/styles.scoped.css +17 -17
- package/token-group/styles.selectors.js +7 -7
- package/top-navigation/1.0-beta/styles.css.js +25 -25
- package/top-navigation/1.0-beta/styles.scoped.css +43 -43
- package/top-navigation/1.0-beta/styles.selectors.js +25 -25
- package/top-navigation/1.0-beta/use-top-navigation.d.ts.map +1 -1
- package/top-navigation/1.0-beta/use-top-navigation.js +2 -1
- package/top-navigation/1.0-beta/use-top-navigation.js.map +1 -1
- package/top-navigation/styles.css.js +47 -47
- package/top-navigation/styles.scoped.css +70 -70
- package/top-navigation/styles.selectors.js +47 -47
- package/top-navigation/use-top-navigation.d.ts.map +1 -1
- package/top-navigation/use-top-navigation.js +2 -1
- package/top-navigation/use-top-navigation.js.map +1 -1
- package/tutorial-panel/components/tutorial-detail-view/styles.css.js +20 -20
- package/tutorial-panel/components/tutorial-detail-view/styles.scoped.css +23 -23
- package/tutorial-panel/components/tutorial-detail-view/styles.selectors.js +20 -20
- package/tutorial-panel/components/tutorial-list/styles.css.js +18 -18
- package/tutorial-panel/components/tutorial-list/styles.scoped.css +30 -30
- package/tutorial-panel/components/tutorial-list/styles.selectors.js +18 -18
- package/tutorial-panel/styles.css.js +1 -1
- package/tutorial-panel/styles.scoped.css +2 -2
- package/tutorial-panel/styles.selectors.js +1 -1
- package/wizard/styles.css.js +31 -31
- package/wizard/styles.scoped.css +63 -63
- package/wizard/styles.selectors.js +31 -31
- package/internal/hooks/container-queries/interfaces.d.ts +0 -10
- package/internal/hooks/container-queries/interfaces.d.ts.map +0 -1
- package/internal/hooks/container-queries/interfaces.js +0 -4
- package/internal/hooks/container-queries/interfaces.js.map +0 -1
- package/internal/hooks/container-queries/use-container-query.d.ts +0 -22
- package/internal/hooks/container-queries/use-container-query.d.ts.map +0 -1
- package/internal/hooks/container-queries/use-container-query.js +0 -32
- package/internal/hooks/container-queries/use-container-query.js.map +0 -1
package/tabs/styles.scoped.css
CHANGED
|
@@ -183,13 +183,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
183
183
|
SPDX-License-Identifier: Apache-2.0
|
|
184
184
|
*/
|
|
185
185
|
/* stylelint-disable selector-max-type */
|
|
186
|
-
.awsui_tabs-
|
|
186
|
+
.awsui_tabs-header_14rmt_1donw_186:not(#\9) {
|
|
187
187
|
margin: 0;
|
|
188
188
|
padding: 0;
|
|
189
189
|
display: flex;
|
|
190
190
|
}
|
|
191
191
|
|
|
192
|
-
.awsui_tabs-header-
|
|
192
|
+
.awsui_tabs-header-list_14rmt_1donw_192:not(#\9) {
|
|
193
193
|
margin: 0;
|
|
194
194
|
padding: 0;
|
|
195
195
|
display: flex;
|
|
@@ -200,42 +200,42 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
200
200
|
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
|
201
201
|
scrollbar-width: none; /* Firefox */
|
|
202
202
|
}
|
|
203
|
-
.awsui_tabs-header-
|
|
203
|
+
.awsui_tabs-header-list_14rmt_1donw_192:not(#\9)::-webkit-scrollbar {
|
|
204
204
|
display: none; /* Safari and Chrome */
|
|
205
205
|
}
|
|
206
206
|
|
|
207
|
-
.awsui_pagination-
|
|
207
|
+
.awsui_pagination-button_14rmt_1donw_207:not(#\9) {
|
|
208
208
|
margin: var(--space-scaled-s-913kwi, 12px) 0;
|
|
209
209
|
padding: 0 var(--space-xxs-ja5cp8, 4px);
|
|
210
210
|
display: flex;
|
|
211
211
|
}
|
|
212
|
-
.awsui_pagination-button-
|
|
212
|
+
.awsui_pagination-button-left_14rmt_1donw_212:not(#\9) {
|
|
213
213
|
border-right: var(--border-divider-section-width-orq175, 2px) solid var(--color-border-control-disabled-pixk7g, #d1d5db);
|
|
214
214
|
}
|
|
215
|
-
.awsui_pagination-button-left-
|
|
215
|
+
.awsui_pagination-button-left-scrollable_14rmt_1donw_215:not(#\9) {
|
|
216
216
|
z-index: 1;
|
|
217
217
|
box-shadow: 5px 0px 4px -3px var(--color-border-tabs-shadow-zm92uy, rgba(0, 7, 22, 0.12)), 1px 0px 0px 0px var(--color-border-tabs-shadow-zm92uy, rgba(0, 7, 22, 0.12));
|
|
218
218
|
}
|
|
219
|
-
.awsui_pagination-button-
|
|
219
|
+
.awsui_pagination-button-right_14rmt_1donw_219:not(#\9) {
|
|
220
220
|
border-left: var(--border-divider-section-width-orq175, 2px) solid var(--color-border-control-disabled-pixk7g, #d1d5db);
|
|
221
221
|
}
|
|
222
|
-
.awsui_pagination-button-right-
|
|
222
|
+
.awsui_pagination-button-right-scrollable_14rmt_1donw_222:not(#\9) {
|
|
223
223
|
z-index: 1;
|
|
224
224
|
box-shadow: -5px 0px 4px -3px var(--color-border-tabs-shadow-zm92uy, rgba(0, 7, 22, 0.12)), -1px 0px 0px 0 var(--color-border-tabs-shadow-zm92uy, rgba(0, 7, 22, 0.12));
|
|
225
225
|
}
|
|
226
226
|
|
|
227
|
-
.awsui_tabs-
|
|
227
|
+
.awsui_tabs-tab_14rmt_1donw_227:not(#\9) {
|
|
228
228
|
list-style: none;
|
|
229
229
|
padding: 0;
|
|
230
230
|
flex-shrink: 0;
|
|
231
231
|
display: flex;
|
|
232
232
|
max-width: calc(90% - var(--space-l-f4l5gr, 20px));
|
|
233
233
|
}
|
|
234
|
-
.awsui_tabs-
|
|
234
|
+
.awsui_tabs-tab_14rmt_1donw_227 > button:not(#\9) {
|
|
235
235
|
background-color: transparent;
|
|
236
236
|
}
|
|
237
237
|
|
|
238
|
-
.awsui_tabs-tab-
|
|
238
|
+
.awsui_tabs-tab-label_14rmt_1donw_238:not(#\9) {
|
|
239
239
|
display: flex;
|
|
240
240
|
align-items: center;
|
|
241
241
|
padding: var(--space-scaled-2x-xxs-0k2v6n, 4px) var(--space-l-f4l5gr, 20px);
|
|
@@ -246,12 +246,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
246
246
|
word-break: break-word;
|
|
247
247
|
}
|
|
248
248
|
|
|
249
|
-
.awsui_tabs-
|
|
249
|
+
.awsui_tabs-tab_14rmt_1donw_227:not(#\9):not(:last-child) > a > .awsui_tabs-tab-label_14rmt_1donw_238, .awsui_tabs-tab_14rmt_1donw_227:not(#\9):not(:last-child) > button > .awsui_tabs-tab-label_14rmt_1donw_238 {
|
|
250
250
|
margin-right: calc(-1 * var(--border-divider-section-width-orq175, 2px));
|
|
251
251
|
border-right: var(--border-divider-section-width-orq175, 2px) solid var(--color-border-tabs-divider-7cs6of, #e9ebed);
|
|
252
252
|
}
|
|
253
253
|
|
|
254
|
-
.awsui_tabs-tab-
|
|
254
|
+
.awsui_tabs-tab-link_14rmt_1donw_254:not(#\9) {
|
|
255
255
|
position: relative;
|
|
256
256
|
display: flex;
|
|
257
257
|
align-items: stretch;
|
|
@@ -267,21 +267,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
267
267
|
-moz-osx-font-smoothing: var(--font-smoothing-moz-osx-pa2uqe, grayscale);
|
|
268
268
|
color: var(--color-text-interactive-default-2sml2m, #414d5c);
|
|
269
269
|
}
|
|
270
|
-
.awsui_tabs-tab-
|
|
270
|
+
.awsui_tabs-tab-link_14rmt_1donw_254:not(#\9):hover {
|
|
271
271
|
color: var(--color-text-accent-qh8xwn, #0972d3);
|
|
272
272
|
}
|
|
273
|
-
.awsui_tabs-tab-
|
|
273
|
+
.awsui_tabs-tab-link_14rmt_1donw_254:not(#\9):focus {
|
|
274
274
|
outline: none;
|
|
275
275
|
}
|
|
276
|
-
body[data-awsui-focus-visible=true] .awsui_tabs-tab-
|
|
276
|
+
body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1donw_254:not(#\9):focus {
|
|
277
277
|
z-index: 1;
|
|
278
278
|
position: relative;
|
|
279
279
|
}
|
|
280
|
-
body[data-awsui-focus-visible=true] .awsui_tabs-tab-
|
|
280
|
+
body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1donw_254:not(#\9):focus {
|
|
281
281
|
outline: 2px dotted transparent;
|
|
282
282
|
outline-offset: calc(var(--space-tabs-focus-outline-gutter-tauev7, -8px) - 1px);
|
|
283
283
|
}
|
|
284
|
-
body[data-awsui-focus-visible=true] .awsui_tabs-tab-
|
|
284
|
+
body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1donw_254:not(#\9):focus::before {
|
|
285
285
|
content: " ";
|
|
286
286
|
display: block;
|
|
287
287
|
position: absolute;
|
|
@@ -292,32 +292,32 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1vtxb_254:not(#\9
|
|
|
292
292
|
border-radius: var(--border-radius-control-default-focus-ring-muizvi, 4px);
|
|
293
293
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-4t19h5, #0972d3);
|
|
294
294
|
}
|
|
295
|
-
body[data-awsui-focus-visible=true] .awsui_tabs-tab-
|
|
295
|
+
body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1donw_254:not(#\9):focus > a > .awsui_tabs-tab-label_14rmt_1donw_238, body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1donw_254:not(#\9):focus > button > .awsui_tabs-tab-label_14rmt_1donw_238 {
|
|
296
296
|
border-right-color: transparent;
|
|
297
297
|
}
|
|
298
298
|
|
|
299
|
-
.awsui_tabs-
|
|
299
|
+
.awsui_tabs-tab_14rmt_1donw_227:not(#\9):first-child {
|
|
300
300
|
margin-left: 1px;
|
|
301
301
|
}
|
|
302
|
-
.awsui_tabs-
|
|
302
|
+
.awsui_tabs-tab_14rmt_1donw_227:not(#\9):first-child > a > .awsui_tabs-tab-label_14rmt_1donw_238, .awsui_tabs-tab_14rmt_1donw_227:not(#\9):first-child > button > .awsui_tabs-tab-label_14rmt_1donw_238 {
|
|
303
303
|
padding-left: calc(var(--space-l-f4l5gr, 20px) - 1px);
|
|
304
304
|
}
|
|
305
305
|
|
|
306
|
-
.awsui_tabs-
|
|
306
|
+
.awsui_tabs-tab_14rmt_1donw_227:not(#\9):last-child {
|
|
307
307
|
margin-right: 1px;
|
|
308
308
|
}
|
|
309
|
-
.awsui_tabs-
|
|
309
|
+
.awsui_tabs-tab_14rmt_1donw_227:not(#\9):last-child > a > .awsui_tabs-tab-label_14rmt_1donw_238, .awsui_tabs-tab_14rmt_1donw_227:not(#\9):last-child > button > .awsui_tabs-tab-label_14rmt_1donw_238 {
|
|
310
310
|
padding-right: calc(var(--space-l-f4l5gr, 20px) - 1px);
|
|
311
311
|
}
|
|
312
312
|
|
|
313
|
-
.awsui_tabs-tab-
|
|
313
|
+
.awsui_tabs-tab-disabled_14rmt_1donw_313:not(#\9), .awsui_tabs-tab-disabled_14rmt_1donw_313:not(#\9):hover {
|
|
314
314
|
pointer-events: none;
|
|
315
315
|
cursor: default;
|
|
316
316
|
color: var(--color-text-interactive-disabled-nss20z, #9ba7b6);
|
|
317
317
|
font-weight: var(--font-tabs-disabled-weight-nwzogt, 800);
|
|
318
318
|
}
|
|
319
319
|
|
|
320
|
-
.awsui_tabs-tab-
|
|
320
|
+
.awsui_tabs-tab-link_14rmt_1donw_254:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1donw_313):after {
|
|
321
321
|
content: "";
|
|
322
322
|
position: absolute;
|
|
323
323
|
left: 0;
|
|
@@ -328,36 +328,36 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1vtxb_254:not(#\9
|
|
|
328
328
|
background: var(--color-border-tabs-underline-mcp7l7, #0972d3);
|
|
329
329
|
opacity: 0;
|
|
330
330
|
}
|
|
331
|
-
.awsui_tabs-tab-
|
|
331
|
+
.awsui_tabs-tab-link_14rmt_1donw_254:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1donw_313).awsui_refresh_14rmt_1donw_331:after {
|
|
332
332
|
transition: opacity var(--motion-duration-refresh-only-medium-wkp575, 165ms) var(--motion-easing-refresh-only-c-1md9b3, cubic-bezier(0.84, 0, 0.16, 1));
|
|
333
333
|
}
|
|
334
334
|
@media (prefers-reduced-motion: reduce) {
|
|
335
|
-
.awsui_tabs-tab-
|
|
335
|
+
.awsui_tabs-tab-link_14rmt_1donw_254:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1donw_313).awsui_refresh_14rmt_1donw_331:after {
|
|
336
336
|
animation: none;
|
|
337
337
|
transition: none;
|
|
338
338
|
}
|
|
339
339
|
}
|
|
340
|
-
.awsui-motion-disabled .awsui_tabs-tab-
|
|
340
|
+
.awsui-motion-disabled .awsui_tabs-tab-link_14rmt_1donw_254:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1donw_313).awsui_refresh_14rmt_1donw_331:after, .awsui-mode-entering .awsui_tabs-tab-link_14rmt_1donw_254:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1donw_313).awsui_refresh_14rmt_1donw_331:after {
|
|
341
341
|
animation: none;
|
|
342
342
|
transition: none;
|
|
343
343
|
}
|
|
344
344
|
|
|
345
|
-
.awsui_tabs-tab-
|
|
345
|
+
.awsui_tabs-tab-active_14rmt_1donw_345:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1donw_313) {
|
|
346
346
|
color: var(--color-text-accent-qh8xwn, #0972d3);
|
|
347
347
|
}
|
|
348
|
-
.awsui_tabs-tab-
|
|
348
|
+
.awsui_tabs-tab-active_14rmt_1donw_345:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1donw_313):after {
|
|
349
349
|
opacity: 1;
|
|
350
350
|
}
|
|
351
351
|
|
|
352
|
-
.awsui_tabs-header-with-
|
|
352
|
+
.awsui_tabs-header-with-divider_14rmt_1donw_352:not(#\9) {
|
|
353
353
|
border-bottom: var(--border-divider-section-width-orq175, 2px) solid var(--color-border-tabs-divider-7cs6of, #e9ebed);
|
|
354
354
|
}
|
|
355
355
|
|
|
356
|
-
.
|
|
356
|
+
.awsui_root_14rmt_1donw_356:not(#\9) {
|
|
357
357
|
/* used in test-utils or tests */
|
|
358
358
|
}
|
|
359
359
|
|
|
360
|
-
.
|
|
360
|
+
.awsui_tabs_14rmt_1donw_186:not(#\9) {
|
|
361
361
|
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
362
362
|
border-collapse: separate;
|
|
363
363
|
border-spacing: 0;
|
|
@@ -388,7 +388,7 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1vtxb_254:not(#\9
|
|
|
388
388
|
word-spacing: normal;
|
|
389
389
|
box-sizing: border-box;
|
|
390
390
|
font-size: var(--font-body-m-size-7dign1, 14px);
|
|
391
|
-
line-height: var(--font-body-m-line-height-
|
|
391
|
+
line-height: var(--font-body-m-line-height-ghizru, 20px);
|
|
392
392
|
color: var(--color-text-body-default-su7kuo, #000716);
|
|
393
393
|
font-weight: 400;
|
|
394
394
|
font-family: var(--font-family-base-wn913o, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
|
|
@@ -398,24 +398,24 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1vtxb_254:not(#\9
|
|
|
398
398
|
width: 100%;
|
|
399
399
|
}
|
|
400
400
|
|
|
401
|
-
.awsui_tabs-
|
|
401
|
+
.awsui_tabs-content_14rmt_1donw_375:not(#\9) {
|
|
402
402
|
display: none;
|
|
403
403
|
}
|
|
404
404
|
|
|
405
|
-
.awsui_tabs-content-
|
|
405
|
+
.awsui_tabs-content-active_14rmt_1donw_379:not(#\9) {
|
|
406
406
|
display: block;
|
|
407
407
|
}
|
|
408
|
-
body[data-awsui-focus-visible=true] .awsui_tabs-content-
|
|
408
|
+
body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_1donw_379:not(#\9):focus {
|
|
409
409
|
outline: 2px dotted transparent;
|
|
410
410
|
outline-offset: 2px;
|
|
411
411
|
border-radius: var(--border-radius-container-pmtq2d, 16px);
|
|
412
412
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-4t19h5, #0972d3);
|
|
413
413
|
}
|
|
414
414
|
|
|
415
|
-
.awsui_tabs-content-
|
|
415
|
+
.awsui_tabs-content-wrapper_14rmt_1donw_389.awsui_with-paddings_14rmt_1donw_389 > .awsui_tabs-content_14rmt_1donw_375:not(#\9) {
|
|
416
416
|
padding: var(--space-scaled-m-gxhdpl, 16px) 0;
|
|
417
417
|
}
|
|
418
418
|
|
|
419
|
-
.awsui_tabs-container-content-
|
|
419
|
+
.awsui_tabs-container-content-wrapper_14rmt_1donw_393.awsui_with-paddings_14rmt_1donw_389 > .awsui_tabs-content_14rmt_1donw_375:not(#\9) {
|
|
420
420
|
padding: var(--space-tabs-content-top-ql9865, 12px) var(--space-container-horizontal-jxdgil, 20px) var(--space-scaled-l-2rs0gk, 20px);
|
|
421
421
|
}
|
package/tabs/styles.selectors.js
CHANGED
|
@@ -2,26 +2,26 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"tabs-header": "awsui_tabs-
|
|
6
|
-
"tabs-header-list": "awsui_tabs-header-
|
|
7
|
-
"pagination-button": "awsui_pagination-
|
|
8
|
-
"pagination-button-left": "awsui_pagination-button-
|
|
9
|
-
"pagination-button-left-scrollable": "awsui_pagination-button-left-
|
|
10
|
-
"pagination-button-right": "awsui_pagination-button-
|
|
11
|
-
"pagination-button-right-scrollable": "awsui_pagination-button-right-
|
|
12
|
-
"tabs-tab": "awsui_tabs-
|
|
13
|
-
"tabs-tab-label": "awsui_tabs-tab-
|
|
14
|
-
"tabs-tab-link": "awsui_tabs-tab-
|
|
15
|
-
"tabs-tab-disabled": "awsui_tabs-tab-
|
|
16
|
-
"refresh": "
|
|
17
|
-
"tabs-tab-active": "awsui_tabs-tab-
|
|
18
|
-
"tabs-header-with-divider": "awsui_tabs-header-with-
|
|
19
|
-
"root": "
|
|
20
|
-
"tabs": "
|
|
21
|
-
"tabs-content": "awsui_tabs-
|
|
22
|
-
"tabs-content-active": "awsui_tabs-content-
|
|
23
|
-
"tabs-content-wrapper": "awsui_tabs-content-
|
|
24
|
-
"with-paddings": "awsui_with-
|
|
25
|
-
"tabs-container-content-wrapper": "awsui_tabs-container-content-
|
|
5
|
+
"tabs-header": "awsui_tabs-header_14rmt_1donw_186",
|
|
6
|
+
"tabs-header-list": "awsui_tabs-header-list_14rmt_1donw_192",
|
|
7
|
+
"pagination-button": "awsui_pagination-button_14rmt_1donw_207",
|
|
8
|
+
"pagination-button-left": "awsui_pagination-button-left_14rmt_1donw_212",
|
|
9
|
+
"pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_1donw_215",
|
|
10
|
+
"pagination-button-right": "awsui_pagination-button-right_14rmt_1donw_219",
|
|
11
|
+
"pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_1donw_222",
|
|
12
|
+
"tabs-tab": "awsui_tabs-tab_14rmt_1donw_227",
|
|
13
|
+
"tabs-tab-label": "awsui_tabs-tab-label_14rmt_1donw_238",
|
|
14
|
+
"tabs-tab-link": "awsui_tabs-tab-link_14rmt_1donw_254",
|
|
15
|
+
"tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_1donw_313",
|
|
16
|
+
"refresh": "awsui_refresh_14rmt_1donw_331",
|
|
17
|
+
"tabs-tab-active": "awsui_tabs-tab-active_14rmt_1donw_345",
|
|
18
|
+
"tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_1donw_352",
|
|
19
|
+
"root": "awsui_root_14rmt_1donw_356",
|
|
20
|
+
"tabs": "awsui_tabs_14rmt_1donw_186",
|
|
21
|
+
"tabs-content": "awsui_tabs-content_14rmt_1donw_375",
|
|
22
|
+
"tabs-content-active": "awsui_tabs-content-active_14rmt_1donw_379",
|
|
23
|
+
"tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_1donw_389",
|
|
24
|
+
"with-paddings": "awsui_with-paddings_14rmt_1donw_389",
|
|
25
|
+
"tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_1donw_393"
|
|
26
26
|
};
|
|
27
27
|
|
package/tabs/tab-header-bar.js
CHANGED
|
@@ -4,19 +4,19 @@ import React, { useRef, useState, useEffect } from 'react';
|
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import styles from './styles.css.js';
|
|
6
6
|
import { InternalButton } from '../button/internal';
|
|
7
|
-
import { useContainerQuery } from '../internal/hooks/container-queries';
|
|
8
7
|
import { KeyCode } from '../internal/keycode';
|
|
9
8
|
import { onPaginationClick, hasHorizontalOverflow, hasLeftOverflow, hasRightOverflow, scrollIntoView, } from './scroll-utils';
|
|
10
9
|
import { hasModifierKeys, isPlainLeftClick } from '../internal/events';
|
|
11
10
|
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
12
11
|
import { useInternalI18n } from '../internal/i18n/context';
|
|
12
|
+
import { useContainerQuery } from '@cloudscape-design/component-toolkit';
|
|
13
13
|
export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace, ariaLabel, ariaLabelledby, i18nStrings, }) {
|
|
14
14
|
const headerBarRef = useRef(null);
|
|
15
15
|
const activeTabHeaderRef = useRef(null);
|
|
16
16
|
const leftOverflowButton = useRef(null);
|
|
17
17
|
const i18n = useInternalI18n('tabs');
|
|
18
18
|
const isVisualRefresh = useVisualRefresh();
|
|
19
|
-
const [widthChange, containerRef] = useContainerQuery(rect => rect.
|
|
19
|
+
const [widthChange, containerRef] = useContainerQuery(rect => rect.contentBoxWidth);
|
|
20
20
|
const tabRefs = useRef(new Map());
|
|
21
21
|
const [horizontalOverflow, setHorizontalOverflow] = useState(false);
|
|
22
22
|
const [leftOverflow, setLeftOverflow] = useState(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-header-bar.js","sourceRoot":"lib/default/","sources":["tabs/tab-header-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef, useState, useEffect } from 'react';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport { useContainerQuery } from '../internal/hooks/container-queries';\nimport { KeyCode } from '../internal/keycode';\nimport {\n onPaginationClick,\n hasHorizontalOverflow,\n hasLeftOverflow,\n hasRightOverflow,\n scrollIntoView,\n} from './scroll-utils';\nimport { hasModifierKeys, isPlainLeftClick } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useInternalI18n } from '../internal/i18n/context';\n\nexport interface TabHeaderBarProps {\n onChange: (changeDetail: TabsProps.ChangeDetail) => void;\n activeTabId: TabsProps['activeTabId'];\n tabs: TabsProps['tabs'];\n variant: TabsProps['variant'];\n idNamespace: string;\n ariaLabel?: string;\n ariaLabelledby?: string;\n i18nStrings?: TabsProps.I18nStrings;\n}\n\nexport function TabHeaderBar({\n onChange,\n activeTabId,\n tabs,\n variant,\n idNamespace,\n ariaLabel,\n ariaLabelledby,\n i18nStrings,\n}: TabHeaderBarProps) {\n const headerBarRef = useRef<HTMLUListElement>(null);\n const activeTabHeaderRef = useRef<HTMLAnchorElement>(null);\n const leftOverflowButton = useRef<HTMLElement>(null);\n const i18n = useInternalI18n('tabs');\n\n const isVisualRefresh = useVisualRefresh();\n\n const [widthChange, containerRef] = useContainerQuery<number>(rect => rect.width);\n const tabRefs = useRef<Map<string, HTMLElement>>(new Map());\n const [horizontalOverflow, setHorizontalOverflow] = useState(false);\n const [leftOverflow, setLeftOverflow] = useState(false);\n const [rightOverflow, setRightOverflow] = useState(false);\n\n useEffect(() => {\n if (headerBarRef.current) {\n setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, leftOverflowButton));\n setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n setRightOverflow(hasRightOverflow(headerBarRef.current));\n }\n }, [widthChange, tabs]);\n\n const scrollIntoViewIfPossible = (smooth: boolean) => {\n if (!activeTabId) {\n return;\n }\n const activeTabRef = tabRefs.current.get(activeTabId);\n if (activeTabRef && headerBarRef.current) {\n scrollIntoView(activeTabRef, headerBarRef.current, smooth);\n }\n };\n\n useEffect(() => {\n // Delay scrollIntoView as the position is depending on parent elements\n // (effects are called inside-out in the component tree).\n // Wait one frame to allow parents to complete it's calculation.\n requestAnimationFrame(() => {\n scrollIntoViewIfPossible(false);\n });\n // Non-smooth scrolling should not be called upon activeId change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [horizontalOverflow, widthChange, tabs.length]);\n\n useEffect(() => {\n scrollIntoViewIfPossible(true);\n // Smooth scrolling should only be called upon activeId change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [activeTabId]);\n\n useEffect(() => {\n /*\n When the selected tab changes and we are currently already focused on a tab,\n move the focus to the newly selected tab.\n */\n if (headerBarRef.current?.contains(document.activeElement)) {\n if (document.activeElement !== activeTabHeaderRef.current) {\n activeTabHeaderRef.current?.focus({ preventScroll: true });\n }\n }\n }, [activeTabId]);\n\n const onScroll = () => {\n if (headerBarRef.current) {\n setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n setRightOverflow(hasRightOverflow(headerBarRef.current));\n }\n };\n\n const classes = clsx({\n [styles['tabs-header']]: true,\n [styles['tabs-header-with-divider']]: variant === 'default' || isVisualRefresh,\n });\n\n const leftButtonClasses = clsx({\n [styles['pagination-button']]: true,\n [styles['pagination-button-left']]: true,\n [styles['pagination-button-left-scrollable']]: leftOverflow,\n });\n\n const rightButtonClasses = clsx({\n [styles['pagination-button']]: true,\n [styles['pagination-button-right']]: true,\n [styles['pagination-button-right-scrollable']]: rightOverflow,\n });\n\n return (\n //converted span to div as list should not be a child of span for HTML validation\n <div className={classes} ref={containerRef}>\n {horizontalOverflow && (\n <span ref={leftOverflowButton} className={leftButtonClasses}>\n <InternalButton\n formAction=\"none\"\n variant=\"icon\"\n iconName=\"angle-left\"\n disabled={!leftOverflow}\n onClick={() => onPaginationClick(headerBarRef, -1)}\n ariaLabel={i18n('i18nStrings.scrollLeftAriaLabel', i18nStrings?.scrollLeftAriaLabel)}\n />\n </span>\n )}\n <ul\n role=\"tablist\"\n className={styles['tabs-header-list']}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n ref={headerBarRef}\n onScroll={onScroll}\n >\n {tabs.map(renderTabHeader)}\n </ul>\n {horizontalOverflow && (\n <span className={rightButtonClasses}>\n <InternalButton\n formAction=\"none\"\n variant=\"icon\"\n iconName=\"angle-right\"\n disabled={!rightOverflow}\n onClick={() => onPaginationClick(headerBarRef, 1)}\n ariaLabel={i18n('i18nStrings.scrollRightAriaLabel', i18nStrings?.scrollRightAriaLabel)}\n />\n </span>\n )}\n </div>\n );\n\n function renderTabHeader(tab: TabsProps.Tab) {\n const enabledTabsWithCurrentTab = tabs.filter(tab => !tab.disabled || tab.id === activeTabId);\n\n const highlightTab = function (enabledTabIndex: number) {\n const tab = enabledTabsWithCurrentTab[enabledTabIndex];\n if (tab.id === activeTabId) {\n return;\n }\n\n onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n };\n\n const handleKeyDown = function (\n event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n ) {\n const { keyCode } = event;\n const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];\n if (hasModifierKeys(event) || specialKeys.indexOf(keyCode) === -1) {\n return;\n }\n event.preventDefault();\n const activeIndex = enabledTabsWithCurrentTab.indexOf(tab);\n switch (keyCode) {\n case KeyCode.right:\n if (activeIndex + 1 === enabledTabsWithCurrentTab.length) {\n highlightTab(0);\n } else {\n highlightTab(activeIndex + 1);\n }\n return;\n case KeyCode.left:\n if (activeIndex === 0) {\n highlightTab(enabledTabsWithCurrentTab.length - 1);\n } else {\n highlightTab(activeIndex - 1);\n }\n return;\n case KeyCode.end:\n highlightTab(enabledTabsWithCurrentTab.length - 1);\n return;\n case KeyCode.home:\n highlightTab(0);\n return;\n case KeyCode.pageDown:\n if (rightOverflow) {\n onPaginationClick(headerBarRef, 1);\n }\n return;\n case KeyCode.pageUp:\n if (leftOverflow) {\n onPaginationClick(headerBarRef, -1);\n }\n return;\n }\n };\n\n const clickTab = (event: React.MouseEvent) => {\n if (tab.disabled) {\n event.preventDefault();\n return;\n }\n\n // if the primary mouse button is clicked with a modifier key, the browser will handle opening a new tab\n const specialKey = !isPlainLeftClick(event);\n if (specialKey && tab.href) {\n return;\n }\n\n event.preventDefault();\n // for browsers that do not focus buttons on button click\n if (!tab.href) {\n const clickedTabRef = tabRefs.current.get(tab.id);\n if (clickedTabRef) {\n const childElement = clickedTabRef.firstChild as HTMLButtonElement;\n if (childElement && childElement !== document.activeElement) {\n childElement.focus({ preventScroll: true });\n }\n }\n }\n\n if (tab.id === activeTabId) {\n return;\n }\n\n onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n };\n\n const classes = clsx({\n [styles['tabs-tab-link']]: true,\n [styles.refresh]: isVisualRefresh,\n [styles['tabs-tab-active']]: activeTabId === tab.id && !tab.disabled,\n [styles['tabs-tab-disabled']]: tab.disabled,\n });\n\n const commonProps: (JSX.IntrinsicElements['a'] | JSX.IntrinsicElements['button']) & { 'data-testid': string } = {\n className: classes,\n role: 'tab',\n 'aria-selected': tab.id === activeTabId,\n 'aria-controls': `${idNamespace}-${tab.id}-panel`,\n 'data-testid': tab.id,\n id: getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n children: <span className={styles['tabs-tab-label']}>{tab.label}</span>,\n };\n\n if (tab.disabled) {\n commonProps['aria-disabled'] = 'true';\n } else {\n commonProps.onClick = clickTab;\n }\n\n if (tab.id === activeTabId) {\n commonProps.ref = activeTabHeaderRef;\n commonProps.tabIndex = 0;\n commonProps.onKeyDown = (\n event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n ) => handleKeyDown(event);\n } else {\n commonProps.tabIndex = -1;\n }\n\n let trigger = null;\n if (tab.href) {\n const anchorProps = commonProps as JSX.IntrinsicElements['a'];\n anchorProps.href = tab.href;\n trigger = <a {...anchorProps} />;\n } else {\n const buttonProps = commonProps as JSX.IntrinsicElements['button'];\n buttonProps.type = 'button';\n if (tab.disabled) {\n buttonProps.disabled = true;\n }\n trigger = <button {...buttonProps} />;\n }\n\n return (\n <li\n ref={element => tabRefs.current.set(tab.id, element as HTMLElement)}\n className={styles['tabs-tab']}\n role=\"presentation\"\n key={tab.id}\n >\n {trigger}\n </li>\n );\n }\n}\n\nexport function getTabElementId({ namespace, tabId }: { namespace: string; tabId: string }) {\n return namespace + '-' + tabId;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"tab-header-bar.js","sourceRoot":"lib/default/","sources":["tabs/tab-header-bar.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,eAAe,EACf,gBAAgB,EAChB,cAAc,GACf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAazE,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,EACT,cAAc,EACd,WAAW,GACO;IAClB,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACpD,MAAM,kBAAkB,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC3D,MAAM,kBAAkB,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IACrD,MAAM,IAAI,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;IAErC,MAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAE3C,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,iBAAiB,CAAS,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAC5F,MAAM,OAAO,GAAG,MAAM,CAA2B,IAAI,GAAG,EAAE,CAAC,CAAC;IAC5D,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,qBAAqB,CAAC,qBAAqB,CAAC,YAAY,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC,CAAC;YACvF,eAAe,CAAC,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;YACvD,gBAAgB,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;SAC1D;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;IAExB,MAAM,wBAAwB,GAAG,CAAC,MAAe,EAAE,EAAE;QACnD,IAAI,CAAC,WAAW,EAAE;YAChB,OAAO;SACR;QACD,MAAM,YAAY,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACtD,IAAI,YAAY,IAAI,YAAY,CAAC,OAAO,EAAE;YACxC,cAAc,CAAC,YAAY,EAAE,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;SAC5D;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,uEAAuE;QACvE,yDAAyD;QACzD,gEAAgE;QAChE,qBAAqB,CAAC,GAAG,EAAE;YACzB,wBAAwB,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC,CAAC,CAAC;QACH,iEAAiE;QACjE,uDAAuD;IACzD,CAAC,EAAE,CAAC,kBAAkB,EAAE,WAAW,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;IAEnD,SAAS,CAAC,GAAG,EAAE;QACb,wBAAwB,CAAC,IAAI,CAAC,CAAC;QAC/B,8DAA8D;QAC9D,uDAAuD;IACzD,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,SAAS,CAAC,GAAG,EAAE;;QACb;;;UAGE;QACF,IAAI,MAAA,YAAY,CAAC,OAAO,0CAAE,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;YAC1D,IAAI,QAAQ,CAAC,aAAa,KAAK,kBAAkB,CAAC,OAAO,EAAE;gBACzD,MAAA,kBAAkB,CAAC,OAAO,0CAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;aAC5D;SACF;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,eAAe,CAAC,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;YACvD,gBAAgB,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;SAC1D;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,IAAI,CAAC;QACnB,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,IAAI;QAC7B,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAAE,OAAO,KAAK,SAAS,IAAI,eAAe;KAC/E,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,IAAI,CAAC;QAC7B,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE,IAAI;QACnC,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAAE,IAAI;QACxC,CAAC,MAAM,CAAC,mCAAmC,CAAC,CAAC,EAAE,YAAY;KAC5D,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG,IAAI,CAAC;QAC9B,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE,IAAI;QACnC,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,EAAE,IAAI;QACzC,CAAC,MAAM,CAAC,oCAAoC,CAAC,CAAC,EAAE,aAAa;KAC9D,CAAC,CAAC;IAEH,OAAO;IACL,iFAAiF;IACjF,6BAAK,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,YAAY;QACvC,kBAAkB,IAAI,CACrB,8BAAM,GAAG,EAAE,kBAAkB,EAAE,SAAS,EAAE,iBAAiB;YACzD,oBAAC,cAAc,IACb,UAAU,EAAC,MAAM,EACjB,OAAO,EAAC,MAAM,EACd,QAAQ,EAAC,YAAY,EACrB,QAAQ,EAAE,CAAC,YAAY,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,EAClD,SAAS,EAAE,IAAI,CAAC,iCAAiC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mBAAmB,CAAC,GACpF,CACG,CACR;QACD,4BACE,IAAI,EAAC,SAAS,EACd,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,gBACzB,SAAS,qBACJ,cAAc,EAC/B,GAAG,EAAE,YAAY,EACjB,QAAQ,EAAE,QAAQ,IAEjB,IAAI,CAAC,GAAG,CAAC,eAAe,CAAC,CACvB;QACJ,kBAAkB,IAAI,CACrB,8BAAM,SAAS,EAAE,kBAAkB;YACjC,oBAAC,cAAc,IACb,UAAU,EAAC,MAAM,EACjB,OAAO,EAAC,MAAM,EACd,QAAQ,EAAC,aAAa,EACtB,QAAQ,EAAE,CAAC,aAAa,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,YAAY,EAAE,CAAC,CAAC,EACjD,SAAS,EAAE,IAAI,CAAC,kCAAkC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,oBAAoB,CAAC,GACtF,CACG,CACR,CACG,CACP,CAAC;IAEF,SAAS,eAAe,CAAC,GAAkB;QACzC,MAAM,yBAAyB,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,IAAI,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,CAAC;QAE9F,MAAM,YAAY,GAAG,UAAU,eAAuB;YACpD,MAAM,GAAG,GAAG,yBAAyB,CAAC,eAAe,CAAC,CAAC;YACvD,IAAI,GAAG,CAAC,EAAE,KAAK,WAAW,EAAE;gBAC1B,OAAO;aACR;YAED,QAAQ,CAAC,EAAE,WAAW,EAAE,GAAG,CAAC,EAAE,EAAE,aAAa,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC;QAC7D,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,UACpB,KAAsF;YAEtF,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;YAC1B,MAAM,WAAW,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;YAC/G,IAAI,eAAe,CAAC,KAAK,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE;gBACjE,OAAO;aACR;YACD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,WAAW,GAAG,yBAAyB,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;YAC3D,QAAQ,OAAO,EAAE;gBACf,KAAK,OAAO,CAAC,KAAK;oBAChB,IAAI,WAAW,GAAG,CAAC,KAAK,yBAAyB,CAAC,MAAM,EAAE;wBACxD,YAAY,CAAC,CAAC,CAAC,CAAC;qBACjB;yBAAM;wBACL,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;qBAC/B;oBACD,OAAO;gBACT,KAAK,OAAO,CAAC,IAAI;oBACf,IAAI,WAAW,KAAK,CAAC,EAAE;wBACrB,YAAY,CAAC,yBAAyB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;qBACpD;yBAAM;wBACL,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;qBAC/B;oBACD,OAAO;gBACT,KAAK,OAAO,CAAC,GAAG;oBACd,YAAY,CAAC,yBAAyB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;oBACnD,OAAO;gBACT,KAAK,OAAO,CAAC,IAAI;oBACf,YAAY,CAAC,CAAC,CAAC,CAAC;oBAChB,OAAO;gBACT,KAAK,OAAO,CAAC,QAAQ;oBACnB,IAAI,aAAa,EAAE;wBACjB,iBAAiB,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;qBACpC;oBACD,OAAO;gBACT,KAAK,OAAO,CAAC,MAAM;oBACjB,IAAI,YAAY,EAAE;wBAChB,iBAAiB,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;qBACrC;oBACD,OAAO;aACV;QACH,CAAC,CAAC;QAEF,MAAM,QAAQ,GAAG,CAAC,KAAuB,EAAE,EAAE;YAC3C,IAAI,GAAG,CAAC,QAAQ,EAAE;gBAChB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,wGAAwG;YACxG,MAAM,UAAU,GAAG,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC5C,IAAI,UAAU,IAAI,GAAG,CAAC,IAAI,EAAE;gBAC1B,OAAO;aACR;YAED,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,yDAAyD;YACzD,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE;gBACb,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;gBAClD,IAAI,aAAa,EAAE;oBACjB,MAAM,YAAY,GAAG,aAAa,CAAC,UAA+B,CAAC;oBACnE,IAAI,YAAY,IAAI,YAAY,KAAK,QAAQ,CAAC,aAAa,EAAE;wBAC3D,YAAY,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;qBAC7C;iBACF;aACF;YAED,IAAI,GAAG,CAAC,EAAE,KAAK,WAAW,EAAE;gBAC1B,OAAO;aACR;YAED,QAAQ,CAAC,EAAE,WAAW,EAAE,GAAG,CAAC,EAAE,EAAE,aAAa,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC;QAC7D,CAAC,CAAC;QAEF,MAAM,OAAO,GAAG,IAAI,CAAC;YACnB,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,IAAI;YAC/B,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,eAAe;YACjC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,WAAW,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ;YACpE,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE,GAAG,CAAC,QAAQ;SAC5C,CAAC,CAAC;QAEH,MAAM,WAAW,GAA+F;YAC9G,SAAS,EAAE,OAAO;YAClB,IAAI,EAAE,KAAK;YACX,eAAe,EAAE,GAAG,CAAC,EAAE,KAAK,WAAW;YACvC,eAAe,EAAE,GAAG,WAAW,IAAI,GAAG,CAAC,EAAE,QAAQ;YACjD,aAAa,EAAE,GAAG,CAAC,EAAE;YACrB,EAAE,EAAE,eAAe,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC;YAC9D,QAAQ,EAAE,8BAAM,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAAG,GAAG,CAAC,KAAK,CAAQ;SACxE,CAAC;QAEF,IAAI,GAAG,CAAC,QAAQ,EAAE;YAChB,WAAW,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC;SACvC;aAAM;YACL,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;SAChC;QAED,IAAI,GAAG,CAAC,EAAE,KAAK,WAAW,EAAE;YAC1B,WAAW,CAAC,GAAG,GAAG,kBAAkB,CAAC;YACrC,WAAW,CAAC,QAAQ,GAAG,CAAC,CAAC;YACzB,WAAW,CAAC,SAAS,GAAG,CACtB,KAAsF,EACtF,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;SAC3B;aAAM;YACL,WAAW,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;SAC3B;QAED,IAAI,OAAO,GAAG,IAAI,CAAC;QACnB,IAAI,GAAG,CAAC,IAAI,EAAE;YACZ,MAAM,WAAW,GAAG,WAAyC,CAAC;YAC9D,WAAW,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;YAC5B,OAAO,GAAG,2CAAO,WAAW,EAAI,CAAC;SAClC;aAAM;YACL,MAAM,WAAW,GAAG,WAA8C,CAAC;YACnE,WAAW,CAAC,IAAI,GAAG,QAAQ,CAAC;YAC5B,IAAI,GAAG,CAAC,QAAQ,EAAE;gBAChB,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC;aAC7B;YACD,OAAO,GAAG,gDAAY,WAAW,EAAI,CAAC;SACvC;QAED,OAAO,CACL,4BACE,GAAG,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE,OAAsB,CAAC,EACnE,SAAS,EAAE,MAAM,CAAC,UAAU,CAAC,EAC7B,IAAI,EAAC,cAAc,EACnB,GAAG,EAAE,GAAG,CAAC,EAAE,IAEV,OAAO,CACL,CACN,CAAC;IACJ,CAAC;AACH,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAwC;IACxF,OAAO,SAAS,GAAG,GAAG,GAAG,KAAK,CAAC;AACjC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef, useState, useEffect } from 'react';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport { KeyCode } from '../internal/keycode';\nimport {\n onPaginationClick,\n hasHorizontalOverflow,\n hasLeftOverflow,\n hasRightOverflow,\n scrollIntoView,\n} from './scroll-utils';\nimport { hasModifierKeys, isPlainLeftClick } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useInternalI18n } from '../internal/i18n/context';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\nexport interface TabHeaderBarProps {\n onChange: (changeDetail: TabsProps.ChangeDetail) => void;\n activeTabId: TabsProps['activeTabId'];\n tabs: TabsProps['tabs'];\n variant: TabsProps['variant'];\n idNamespace: string;\n ariaLabel?: string;\n ariaLabelledby?: string;\n i18nStrings?: TabsProps.I18nStrings;\n}\n\nexport function TabHeaderBar({\n onChange,\n activeTabId,\n tabs,\n variant,\n idNamespace,\n ariaLabel,\n ariaLabelledby,\n i18nStrings,\n}: TabHeaderBarProps) {\n const headerBarRef = useRef<HTMLUListElement>(null);\n const activeTabHeaderRef = useRef<HTMLAnchorElement>(null);\n const leftOverflowButton = useRef<HTMLElement>(null);\n const i18n = useInternalI18n('tabs');\n\n const isVisualRefresh = useVisualRefresh();\n\n const [widthChange, containerRef] = useContainerQuery<number>(rect => rect.contentBoxWidth);\n const tabRefs = useRef<Map<string, HTMLElement>>(new Map());\n const [horizontalOverflow, setHorizontalOverflow] = useState(false);\n const [leftOverflow, setLeftOverflow] = useState(false);\n const [rightOverflow, setRightOverflow] = useState(false);\n\n useEffect(() => {\n if (headerBarRef.current) {\n setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, leftOverflowButton));\n setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n setRightOverflow(hasRightOverflow(headerBarRef.current));\n }\n }, [widthChange, tabs]);\n\n const scrollIntoViewIfPossible = (smooth: boolean) => {\n if (!activeTabId) {\n return;\n }\n const activeTabRef = tabRefs.current.get(activeTabId);\n if (activeTabRef && headerBarRef.current) {\n scrollIntoView(activeTabRef, headerBarRef.current, smooth);\n }\n };\n\n useEffect(() => {\n // Delay scrollIntoView as the position is depending on parent elements\n // (effects are called inside-out in the component tree).\n // Wait one frame to allow parents to complete it's calculation.\n requestAnimationFrame(() => {\n scrollIntoViewIfPossible(false);\n });\n // Non-smooth scrolling should not be called upon activeId change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [horizontalOverflow, widthChange, tabs.length]);\n\n useEffect(() => {\n scrollIntoViewIfPossible(true);\n // Smooth scrolling should only be called upon activeId change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [activeTabId]);\n\n useEffect(() => {\n /*\n When the selected tab changes and we are currently already focused on a tab,\n move the focus to the newly selected tab.\n */\n if (headerBarRef.current?.contains(document.activeElement)) {\n if (document.activeElement !== activeTabHeaderRef.current) {\n activeTabHeaderRef.current?.focus({ preventScroll: true });\n }\n }\n }, [activeTabId]);\n\n const onScroll = () => {\n if (headerBarRef.current) {\n setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n setRightOverflow(hasRightOverflow(headerBarRef.current));\n }\n };\n\n const classes = clsx({\n [styles['tabs-header']]: true,\n [styles['tabs-header-with-divider']]: variant === 'default' || isVisualRefresh,\n });\n\n const leftButtonClasses = clsx({\n [styles['pagination-button']]: true,\n [styles['pagination-button-left']]: true,\n [styles['pagination-button-left-scrollable']]: leftOverflow,\n });\n\n const rightButtonClasses = clsx({\n [styles['pagination-button']]: true,\n [styles['pagination-button-right']]: true,\n [styles['pagination-button-right-scrollable']]: rightOverflow,\n });\n\n return (\n //converted span to div as list should not be a child of span for HTML validation\n <div className={classes} ref={containerRef}>\n {horizontalOverflow && (\n <span ref={leftOverflowButton} className={leftButtonClasses}>\n <InternalButton\n formAction=\"none\"\n variant=\"icon\"\n iconName=\"angle-left\"\n disabled={!leftOverflow}\n onClick={() => onPaginationClick(headerBarRef, -1)}\n ariaLabel={i18n('i18nStrings.scrollLeftAriaLabel', i18nStrings?.scrollLeftAriaLabel)}\n />\n </span>\n )}\n <ul\n role=\"tablist\"\n className={styles['tabs-header-list']}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n ref={headerBarRef}\n onScroll={onScroll}\n >\n {tabs.map(renderTabHeader)}\n </ul>\n {horizontalOverflow && (\n <span className={rightButtonClasses}>\n <InternalButton\n formAction=\"none\"\n variant=\"icon\"\n iconName=\"angle-right\"\n disabled={!rightOverflow}\n onClick={() => onPaginationClick(headerBarRef, 1)}\n ariaLabel={i18n('i18nStrings.scrollRightAriaLabel', i18nStrings?.scrollRightAriaLabel)}\n />\n </span>\n )}\n </div>\n );\n\n function renderTabHeader(tab: TabsProps.Tab) {\n const enabledTabsWithCurrentTab = tabs.filter(tab => !tab.disabled || tab.id === activeTabId);\n\n const highlightTab = function (enabledTabIndex: number) {\n const tab = enabledTabsWithCurrentTab[enabledTabIndex];\n if (tab.id === activeTabId) {\n return;\n }\n\n onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n };\n\n const handleKeyDown = function (\n event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n ) {\n const { keyCode } = event;\n const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];\n if (hasModifierKeys(event) || specialKeys.indexOf(keyCode) === -1) {\n return;\n }\n event.preventDefault();\n const activeIndex = enabledTabsWithCurrentTab.indexOf(tab);\n switch (keyCode) {\n case KeyCode.right:\n if (activeIndex + 1 === enabledTabsWithCurrentTab.length) {\n highlightTab(0);\n } else {\n highlightTab(activeIndex + 1);\n }\n return;\n case KeyCode.left:\n if (activeIndex === 0) {\n highlightTab(enabledTabsWithCurrentTab.length - 1);\n } else {\n highlightTab(activeIndex - 1);\n }\n return;\n case KeyCode.end:\n highlightTab(enabledTabsWithCurrentTab.length - 1);\n return;\n case KeyCode.home:\n highlightTab(0);\n return;\n case KeyCode.pageDown:\n if (rightOverflow) {\n onPaginationClick(headerBarRef, 1);\n }\n return;\n case KeyCode.pageUp:\n if (leftOverflow) {\n onPaginationClick(headerBarRef, -1);\n }\n return;\n }\n };\n\n const clickTab = (event: React.MouseEvent) => {\n if (tab.disabled) {\n event.preventDefault();\n return;\n }\n\n // if the primary mouse button is clicked with a modifier key, the browser will handle opening a new tab\n const specialKey = !isPlainLeftClick(event);\n if (specialKey && tab.href) {\n return;\n }\n\n event.preventDefault();\n // for browsers that do not focus buttons on button click\n if (!tab.href) {\n const clickedTabRef = tabRefs.current.get(tab.id);\n if (clickedTabRef) {\n const childElement = clickedTabRef.firstChild as HTMLButtonElement;\n if (childElement && childElement !== document.activeElement) {\n childElement.focus({ preventScroll: true });\n }\n }\n }\n\n if (tab.id === activeTabId) {\n return;\n }\n\n onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n };\n\n const classes = clsx({\n [styles['tabs-tab-link']]: true,\n [styles.refresh]: isVisualRefresh,\n [styles['tabs-tab-active']]: activeTabId === tab.id && !tab.disabled,\n [styles['tabs-tab-disabled']]: tab.disabled,\n });\n\n const commonProps: (JSX.IntrinsicElements['a'] | JSX.IntrinsicElements['button']) & { 'data-testid': string } = {\n className: classes,\n role: 'tab',\n 'aria-selected': tab.id === activeTabId,\n 'aria-controls': `${idNamespace}-${tab.id}-panel`,\n 'data-testid': tab.id,\n id: getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n children: <span className={styles['tabs-tab-label']}>{tab.label}</span>,\n };\n\n if (tab.disabled) {\n commonProps['aria-disabled'] = 'true';\n } else {\n commonProps.onClick = clickTab;\n }\n\n if (tab.id === activeTabId) {\n commonProps.ref = activeTabHeaderRef;\n commonProps.tabIndex = 0;\n commonProps.onKeyDown = (\n event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n ) => handleKeyDown(event);\n } else {\n commonProps.tabIndex = -1;\n }\n\n let trigger = null;\n if (tab.href) {\n const anchorProps = commonProps as JSX.IntrinsicElements['a'];\n anchorProps.href = tab.href;\n trigger = <a {...anchorProps} />;\n } else {\n const buttonProps = commonProps as JSX.IntrinsicElements['button'];\n buttonProps.type = 'button';\n if (tab.disabled) {\n buttonProps.disabled = true;\n }\n trigger = <button {...buttonProps} />;\n }\n\n return (\n <li\n ref={element => tabRefs.current.set(tab.id, element as HTMLElement)}\n className={styles['tabs-tab']}\n role=\"presentation\"\n key={tab.id}\n >\n {trigger}\n </li>\n );\n }\n}\n\nexport function getTabElementId({ namespace, tabId }: { namespace: string; tabId: string }) {\n return namespace + '-' + tabId;\n}\n"]}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { ComponentWrapper, ElementWrapper } from '@cloudscape-design/test-utils-core/dom';
|
|
2
|
+
import ButtonWrapper from '../button/index.js';
|
|
2
3
|
export default class ButtonDropdownWrapper extends ComponentWrapper {
|
|
3
4
|
static rootSelector: string;
|
|
4
5
|
findNativeButton(): ElementWrapper<HTMLButtonElement>;
|
|
6
|
+
findMainAction(): null | ButtonWrapper;
|
|
5
7
|
findOpenDropdown(): ElementWrapper | null;
|
|
6
8
|
/**
|
|
7
9
|
* Finds an item in the open dropdown by item id. Returns null if there is no open dropdown.
|
|
@@ -15,11 +15,16 @@ const styles_selectors_js_2 = require("../../../internal/components/dropdown/sty
|
|
|
15
15
|
const styles_selectors_js_3 = require("../../../button-dropdown/item-element/styles.selectors.js");
|
|
16
16
|
const styles_selectors_js_4 = require("../../../button-dropdown/category-elements/styles.selectors.js");
|
|
17
17
|
const styles_selectors_js_5 = require("../../../button/styles.selectors.js");
|
|
18
|
+
const index_js_1 = require("../button/index.js");
|
|
18
19
|
class ButtonDropdownWrapper extends dom_1.ComponentWrapper {
|
|
19
20
|
findNativeButton() {
|
|
20
21
|
// ButtonDropdown always has a button
|
|
21
22
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
22
|
-
return this.find(`button.${styles_selectors_js_5.default.button}`);
|
|
23
|
+
return this.findByClassName(styles_selectors_js_1.default['dropdown-trigger']).find(`button.${styles_selectors_js_5.default.button}`);
|
|
24
|
+
}
|
|
25
|
+
findMainAction() {
|
|
26
|
+
var _a, _b;
|
|
27
|
+
return ((_b = (_a = this.findByClassName(styles_selectors_js_1.default['split-trigger'])) === null || _a === void 0 ? void 0 : _a.findComponent(`.${styles_selectors_js_5.default.button}`, index_js_1.default)) !== null && _b !== void 0 ? _b : null);
|
|
23
28
|
}
|
|
24
29
|
findOpenDropdown() {
|
|
25
30
|
return (0, dom_1.createWrapper)().find(`.${styles_selectors_js_2.default.dropdown}[data-open=true]`);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/dom/button-dropdown/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,qDAA2C;AAC3C,gEAAkH;AAClH,sFAAkE;AAClE,mGAAuF;AACvF,mGAAmF;AACnF,wGAA4F;AAC5F,6EAA+D;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/dom/button-dropdown/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,qDAA2C;AAC3C,gEAAkH;AAClH,sFAAkE;AAClE,mGAAuF;AACvF,mGAAmF;AACnF,wGAA4F;AAC5F,6EAA+D;AAC/D,iDAA+C;AAE/C,MAAqB,qBAAsB,SAAQ,sBAAgB;IAGjE,gBAAgB;QACd,qCAAqC;QACrC,oEAAoE;QACpE,OAAO,IAAI,CAAC,eAAe,CAAC,6BAAM,CAAC,kBAAkB,CAAC,CAAE,CAAC,IAAI,CAAoB,UAAU,6BAAY,CAAC,MAAM,EAAE,CAAE,CAAC;IACrH,CAAC;IAED,cAAc;;QACZ,OAAO,CACL,MAAA,MAAA,IAAI,CAAC,eAAe,CAAC,6BAAM,CAAC,eAAe,CAAC,CAAC,0CAAE,aAAa,CAAC,IAAI,6BAAY,CAAC,MAAM,EAAE,EAAE,kBAAa,CAAC,mCAAI,IAAI,CAC/G,CAAC;IACJ,CAAC;IAED,gBAAgB;QACd,OAAO,IAAA,mBAAa,GAAE,CAAC,IAAI,CAAC,IAAI,6BAAc,CAAC,QAAQ,kBAAkB,CAAC,CAAC;IAC7E,CAAC;IAED;;;;OAIG;IACH,YAAY,CAAC,EAAU;;QACrB,MAAM,YAAY,GAAG,IAAI,6BAAU,CAAC,cAAc,CAAC,iBAAiB,EAAE,IAAI,CAAC;QAC3E,OAAO,CAAA,MAAA,IAAI,CAAC,gBAAgB,EAAE,0CAAE,IAAI,CAAC,YAAY,CAAC,KAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAChF,CAAC;IAED;;;;OAIG;IACH,0BAA0B,CAAC,EAAU;;QACnC,MAAM,0BAA0B,GAAG,IAAI,6BAAc,CAAC,UAAU,iBAAiB,EAAE,IAAI,CAAC;QACxF,OAAO,CAAA,MAAA,IAAI,CAAC,gBAAgB,EAAE,0CAAE,IAAI,CAAC,0BAA0B,CAAC,KAAI,IAAI,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;IAC5G,CAAC;IAED;;;;OAIG;IACH,mBAAmB;;QACjB,MAAM,uBAAuB,GAAG,IAAI,6BAAU,CAAC,cAAc,CAAC,IAAI,6BAAU,CAAC,WAAW,EAAE,CAAC;QAC3F,OAAO,CAAA,MAAA,IAAI,CAAC,gBAAgB,EAAE,0CAAE,IAAI,CAAC,uBAAuB,CAAC,KAAI,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;IACtG,CAAC;IAED;;;;OAIG;IACH,SAAS;;QACP,OAAO,CAAA,MAAA,IAAI,CAAC,gBAAgB,EAAE,0CAAE,OAAO,CAAC,IAAI,6BAAU,CAAC,cAAc,CAAC,EAAE,CAAC,KAAI,EAAE,CAAC;IAClF,CAAC;IAED;;OAEG;IACH,kBAAkB;QAChB,OAAO,IAAA,mBAAa,GAAE,CAAC,IAAI,CAAC,iDAAiD,CAAC,CAAC;IACjF,CAAC;IAGD,YAAY;QACV,IAAA,gBAAG,EAAC,GAAG,EAAE;YACP,IAAI,CAAC,gBAAgB,EAAE,CAAC,KAAK,EAAE,CAAC;QAClC,CAAC,CAAC,CAAC;IACL,CAAC;;AArEM,kCAAY,GAAW,6BAAM,CAAC,iBAAiB,CAAC,CAAC;AAiExD;IADC,aAAO;yDAKP;AAtEH,wCAuEC"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { ComponentWrapper, ElementWrapper } from "@cloudscape-design/test-utils-core/selectors";
|
|
2
|
+
import ButtonWrapper from '../button/index.js';
|
|
2
3
|
export default class ButtonDropdownWrapper extends ComponentWrapper {
|
|
3
4
|
static rootSelector: string;
|
|
4
5
|
findNativeButton(): ElementWrapper;
|
|
6
|
+
findMainAction(): ButtonWrapper;
|
|
5
7
|
findOpenDropdown(): ElementWrapper;
|
|
6
8
|
/**
|
|
7
9
|
* Finds an item in the open dropdown by item id. Returns null if there is no open dropdown.
|
|
@@ -6,11 +6,16 @@ const styles_selectors_js_2 = require("../../../internal/components/dropdown/sty
|
|
|
6
6
|
const styles_selectors_js_3 = require("../../../button-dropdown/item-element/styles.selectors.js");
|
|
7
7
|
const styles_selectors_js_4 = require("../../../button-dropdown/category-elements/styles.selectors.js");
|
|
8
8
|
const styles_selectors_js_5 = require("../../../button/styles.selectors.js");
|
|
9
|
+
const index_js_1 = require("../button/index.js");
|
|
9
10
|
class ButtonDropdownWrapper extends selectors_1.ComponentWrapper {
|
|
10
11
|
findNativeButton() {
|
|
11
12
|
// ButtonDropdown always has a button
|
|
12
13
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
13
|
-
return this.find(`button.${styles_selectors_js_5.default.button}`);
|
|
14
|
+
return this.findByClassName(styles_selectors_js_1.default['dropdown-trigger']).find(`button.${styles_selectors_js_5.default.button}`);
|
|
15
|
+
}
|
|
16
|
+
findMainAction() {
|
|
17
|
+
var _a, _b;
|
|
18
|
+
return (_b = (_a = this.findByClassName(styles_selectors_js_1.default['split-trigger'])) === null || _a === void 0 ? void 0 : _a.findComponent(`.${styles_selectors_js_5.default.button}`, index_js_1.default)) !== null && _b !== void 0 ? _b : null;
|
|
14
19
|
}
|
|
15
20
|
findOpenDropdown() {
|
|
16
21
|
return (0, selectors_1.createWrapper)().find(`.${styles_selectors_js_2.default.dropdown}[data-open=true]`);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/selectors/button-dropdown/index.ts"],"names":[],"mappings":";;AAGA,4EAA+G;AAC/G,sFAAkE;AAClE,mGAAuF;AACvF,mGAAmF;AACnF,wGAA4F;AAC5F,6EAA+D;AAC/D,MAAqB,qBAAsB,SAAQ,4BAAgB;IAEjE,gBAAgB;QACd,qCAAqC;QACrC,oEAAoE;QACpE,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,6BAAY,CAAC,MAAM,EAAE,CAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/selectors/button-dropdown/index.ts"],"names":[],"mappings":";;AAGA,4EAA+G;AAC/G,sFAAkE;AAClE,mGAAuF;AACvF,mGAAmF;AACnF,wGAA4F;AAC5F,6EAA+D;AAC/D,iDAA+C;AAC/C,MAAqB,qBAAsB,SAAQ,4BAAgB;IAEjE,gBAAgB;QACd,qCAAqC;QACrC,oEAAoE;QACpE,OAAO,IAAI,CAAC,eAAe,CAAC,6BAAM,CAAC,kBAAkB,CAAC,CAAE,CAAC,IAAI,CAAC,UAAU,6BAAY,CAAC,MAAM,EAAE,CAAE,CAAC;IAClG,CAAC;IACD,cAAc;;QACZ,OAAO,MAAA,MAAA,IAAI,CAAC,eAAe,CAAC,6BAAM,CAAC,eAAe,CAAC,CAAC,0CAAE,aAAa,CAAC,IAAI,6BAAY,CAAC,MAAM,EAAE,EAAE,kBAAa,CAAC,mCAAI,IAAI,CAAC;IACxH,CAAC;IACD,gBAAgB;QACd,OAAO,IAAA,yBAAa,GAAE,CAAC,IAAI,CAAC,IAAI,6BAAc,CAAC,QAAQ,kBAAkB,CAAC,CAAC;IAC7E,CAAC;IAED;;;;OAIG;IACH,YAAY,CAAC,EAAU;;QACrB,MAAM,YAAY,GAAG,IAAI,6BAAU,CAAC,cAAc,CAAC,iBAAiB,EAAE,IAAI,CAAC;QAC3E,OAAO,CAAA,MAAA,IAAI,CAAC,gBAAgB,EAAE,0CAAE,IAAI,CAAC,YAAY,CAAC,KAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAChF,CAAC;IAED;;;;OAIG;IACH,0BAA0B,CAAC,EAAU;;QACnC,MAAM,0BAA0B,GAAG,IAAI,6BAAc,CAAC,UAAU,iBAAiB,EAAE,IAAI,CAAC;QACxF,OAAO,CAAA,MAAA,IAAI,CAAC,gBAAgB,EAAE,0CAAE,IAAI,CAAC,0BAA0B,CAAC,KAAI,IAAI,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;IAC5G,CAAC;IAED;;;;OAIG;IACH,mBAAmB;;QACjB,MAAM,uBAAuB,GAAG,IAAI,6BAAU,CAAC,cAAc,CAAC,IAAI,6BAAU,CAAC,WAAW,EAAE,CAAC;QAC3F,OAAO,CAAA,MAAA,IAAI,CAAC,gBAAgB,EAAE,0CAAE,IAAI,CAAC,uBAAuB,CAAC,KAAI,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;IACtG,CAAC;IAED;;;;OAIG;IACH,SAAS;;QACP,OAAO,CAAA,MAAA,IAAI,CAAC,gBAAgB,EAAE,0CAAE,OAAO,CAAC,IAAI,6BAAU,CAAC,cAAc,CAAC,EAAE,CAAC,KAAI,EAAE,CAAC;IAClF,CAAC;IAED;;OAEG;IACH,kBAAkB;QAChB,OAAO,IAAA,yBAAa,GAAE,CAAC,IAAI,CAAC,iDAAiD,CAAC,CAAC;IACjF,CAAC;;AA1DH,wCA2DC;AA1DQ,kCAAY,GAAW,6BAAM,CAAC,iBAAiB,CAAC,CAAC"}
|