@cloudscape-design/components-themeable 3.0.531 → 3.0.533
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/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/button-dropdown/category-elements/styles.scss +13 -0
- package/lib/internal/scss/button-dropdown/item-element/styles.scss +1 -1
- package/lib/internal/scss/pagination/styles.scss +14 -9
- package/lib/internal/scss/pie-chart/styles.scss +10 -16
- package/lib/internal/scss/popover/arrow.scss +20 -16
- package/lib/internal/scss/popover/body.scss +7 -6
- package/lib/internal/scss/popover/container.scss +35 -33
- package/lib/internal/scss/popover/styles.scss +8 -5
- package/lib/internal/scss/progress-bar/styles.scss +32 -17
- package/lib/internal/scss/property-filter/styles.scss +22 -20
- package/lib/internal/scss/radio-group/styles.scss +2 -2
- package/lib/internal/scss/s3-resource-selector/s3-in-context/styles.scss +10 -8
- package/lib/internal/scss/segmented-control/segment.scss +22 -16
- package/lib/internal/scss/select/parts/styles.scss +23 -15
- package/lib/internal/scss/side-navigation/styles.scss +48 -35
- package/lib/internal/scss/spinner/mixins.scss +5 -5
- package/lib/internal/scss/spinner/styles.scss +16 -12
- package/lib/internal/scss/split-panel/styles.scss +74 -54
- package/lib/internal/scss/status-indicator/styles.scss +2 -2
- package/lib/internal/template/button-dropdown/category-elements/category-element.d.ts +1 -1
- package/lib/internal/template/button-dropdown/category-elements/category-element.d.ts.map +1 -1
- package/lib/internal/template/button-dropdown/category-elements/category-element.js +2 -2
- package/lib/internal/template/button-dropdown/category-elements/category-element.js.map +1 -1
- package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.d.ts +1 -1
- package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.d.ts.map +1 -1
- package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.js +2 -2
- package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.js.map +1 -1
- package/lib/internal/template/button-dropdown/category-elements/mobile-expandable-category-element.d.ts +1 -1
- package/lib/internal/template/button-dropdown/category-elements/mobile-expandable-category-element.d.ts.map +1 -1
- package/lib/internal/template/button-dropdown/category-elements/mobile-expandable-category-element.js +2 -2
- package/lib/internal/template/button-dropdown/category-elements/mobile-expandable-category-element.js.map +1 -1
- package/lib/internal/template/button-dropdown/category-elements/styles.css.js +13 -13
- package/lib/internal/template/button-dropdown/category-elements/styles.scoped.css +32 -21
- package/lib/internal/template/button-dropdown/category-elements/styles.selectors.js +13 -13
- package/lib/internal/template/button-dropdown/interfaces.d.ts +0 -2
- package/lib/internal/template/button-dropdown/interfaces.d.ts.map +1 -1
- package/lib/internal/template/button-dropdown/interfaces.js.map +1 -1
- package/lib/internal/template/button-dropdown/item-element/index.d.ts +1 -1
- package/lib/internal/template/button-dropdown/item-element/index.d.ts.map +1 -1
- package/lib/internal/template/button-dropdown/item-element/index.js +1 -6
- package/lib/internal/template/button-dropdown/item-element/index.js.map +1 -1
- package/lib/internal/template/button-dropdown/item-element/styles.css.js +15 -16
- package/lib/internal/template/button-dropdown/item-element/styles.scoped.css +18 -18
- package/lib/internal/template/button-dropdown/item-element/styles.selectors.js +15 -16
- package/lib/internal/template/button-dropdown/items-list.d.ts.map +1 -1
- package/lib/internal/template/button-dropdown/items-list.js +3 -3
- package/lib/internal/template/button-dropdown/items-list.js.map +1 -1
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/internal/environment.json +1 -1
- package/lib/internal/template/pagination/styles.css.js +9 -9
- package/lib/internal/template/pagination/styles.scoped.css +37 -32
- package/lib/internal/template/pagination/styles.selectors.js +9 -9
- package/lib/internal/template/pie-chart/styles.css.js +27 -27
- package/lib/internal/template/pie-chart/styles.scoped.css +66 -72
- package/lib/internal/template/pie-chart/styles.selectors.js +27 -27
- package/lib/internal/template/popover/styles.css.js +50 -50
- package/lib/internal/template/popover/styles.scoped.css +134 -119
- package/lib/internal/template/popover/styles.selectors.js +50 -50
- package/lib/internal/template/progress-bar/styles.css.js +18 -18
- package/lib/internal/template/progress-bar/styles.scoped.css +79 -54
- package/lib/internal/template/progress-bar/styles.selectors.js +18 -18
- package/lib/internal/template/property-filter/styles.css.js +31 -31
- package/lib/internal/template/property-filter/styles.scoped.css +54 -53
- package/lib/internal/template/property-filter/styles.selectors.js +31 -31
- package/lib/internal/template/radio-group/styles.css.js +9 -9
- package/lib/internal/template/radio-group/styles.scoped.css +17 -17
- package/lib/internal/template/radio-group/styles.selectors.js +9 -9
- package/lib/internal/template/s3-resource-selector/s3-in-context/styles.css.js +7 -7
- package/lib/internal/template/s3-resource-selector/s3-in-context/styles.scoped.css +18 -16
- package/lib/internal/template/s3-resource-selector/s3-in-context/styles.selectors.js +7 -7
- package/lib/internal/template/segmented-control/styles.css.js +14 -14
- package/lib/internal/template/segmented-control/styles.scoped.css +55 -49
- package/lib/internal/template/segmented-control/styles.selectors.js +14 -14
- package/lib/internal/template/select/parts/styles.css.js +16 -16
- package/lib/internal/template/select/parts/styles.scoped.css +39 -31
- package/lib/internal/template/select/parts/styles.selectors.js +16 -16
- package/lib/internal/template/side-navigation/styles.css.js +28 -28
- package/lib/internal/template/side-navigation/styles.scoped.css +86 -73
- package/lib/internal/template/side-navigation/styles.selectors.js +28 -28
- package/lib/internal/template/spinner/styles.css.js +13 -13
- package/lib/internal/template/spinner/styles.scoped.css +49 -45
- package/lib/internal/template/spinner/styles.selectors.js +13 -13
- package/lib/internal/template/split-panel/styles.css.js +55 -55
- package/lib/internal/template/split-panel/styles.scoped.css +149 -131
- package/lib/internal/template/split-panel/styles.selectors.js +55 -55
- package/lib/internal/template/status-indicator/styles.css.js +23 -23
- package/lib/internal/template/status-indicator/styles.scoped.css +31 -31
- package/lib/internal/template/status-indicator/styles.selectors.js +23 -23
- package/package.json +1 -1
|
@@ -37,17 +37,17 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
|
|
|
37
37
|
z-index: 840;
|
|
38
38
|
&-closed {
|
|
39
39
|
cursor: pointer;
|
|
40
|
-
min-
|
|
40
|
+
min-inline-size: constants.$sidebar-size-closed;
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
.drawer-content-side {
|
|
45
45
|
display: flex;
|
|
46
46
|
align-items: center;
|
|
47
|
-
|
|
47
|
+
block-size: 100%;
|
|
48
48
|
overflow: auto;
|
|
49
49
|
.drawer-closed > & {
|
|
50
|
-
|
|
50
|
+
inline-size: constants.$sidebar-size-closed;
|
|
51
51
|
&:hover {
|
|
52
52
|
background: awsui.$color-background-layout-panel-hover;
|
|
53
53
|
}
|
|
@@ -62,23 +62,20 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
|
|
|
62
62
|
:not(.drawer-closed) > & {
|
|
63
63
|
overflow-y: auto;
|
|
64
64
|
position: absolute;
|
|
65
|
-
|
|
66
|
-
left: 0;
|
|
67
|
-
right: 0;
|
|
68
|
-
bottom: 0;
|
|
65
|
+
inset: 0;
|
|
69
66
|
}
|
|
70
67
|
}
|
|
71
68
|
|
|
72
69
|
.position-bottom {
|
|
73
70
|
position: fixed;
|
|
74
71
|
overflow-y: auto;
|
|
75
|
-
border-
|
|
72
|
+
border-block-start: awsui.$border-panel-top-width solid awsui.$color-border-divider-panel-bottom;
|
|
76
73
|
|
|
77
74
|
&:not(.refresh) {
|
|
78
75
|
// custom shadow because the existing one does not have shadow on top
|
|
79
76
|
box-shadow: awsui.$shadow-split-bottom;
|
|
80
|
-
border-
|
|
81
|
-
border-
|
|
77
|
+
border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-panel-bottom;
|
|
78
|
+
border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-panel-bottom;
|
|
82
79
|
}
|
|
83
80
|
&.drawer-closed {
|
|
84
81
|
overflow: hidden;
|
|
@@ -100,16 +97,19 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
|
|
|
100
97
|
}
|
|
101
98
|
|
|
102
99
|
.position-side {
|
|
103
|
-
border-
|
|
100
|
+
border-block-start: none;
|
|
104
101
|
box-shadow: awsui.$shadow-split-side;
|
|
105
|
-
|
|
102
|
+
block-size: 100%;
|
|
106
103
|
}
|
|
107
104
|
|
|
108
105
|
.slider {
|
|
109
|
-
padding: 0;
|
|
106
|
+
padding-block: 0;
|
|
107
|
+
padding-inline: 0;
|
|
110
108
|
cursor: ns-resize;
|
|
111
|
-
margin: 2px
|
|
112
|
-
|
|
109
|
+
margin-block-start: 2px;
|
|
110
|
+
margin-block-end: 0;
|
|
111
|
+
margin-inline: 0;
|
|
112
|
+
block-size: $slider-width;
|
|
113
113
|
// Desktop Safari doesn't support touch events, but Safari on iOS does.
|
|
114
114
|
// stylelint-disable-next-line plugin/no-unsupported-browser-features
|
|
115
115
|
touch-action: none;
|
|
@@ -125,15 +125,17 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
|
|
|
125
125
|
|
|
126
126
|
.slider-side {
|
|
127
127
|
cursor: ew-resize;
|
|
128
|
-
margin: 0
|
|
128
|
+
margin-block: 0;
|
|
129
|
+
margin-inline-start: 2px;
|
|
130
|
+
margin-inline-end: 0;
|
|
129
131
|
}
|
|
130
132
|
|
|
131
133
|
.slider-wrapper-bottom {
|
|
132
134
|
position: absolute;
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
135
|
+
inset-block-start: 0;
|
|
136
|
+
inset-inline-start: 0;
|
|
137
|
+
inline-size: 100%;
|
|
138
|
+
block-size: $slider-width + 2px;
|
|
137
139
|
display: flex;
|
|
138
140
|
justify-content: center;
|
|
139
141
|
z-index: 2;
|
|
@@ -141,10 +143,10 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
|
|
|
141
143
|
|
|
142
144
|
.slider-wrapper-side {
|
|
143
145
|
position: absolute;
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
146
|
+
inset-inline-start: 0;
|
|
147
|
+
inset-block-start: 0;
|
|
148
|
+
block-size: 100%;
|
|
149
|
+
inline-size: $slider-width + 2px;
|
|
148
150
|
display: flex;
|
|
149
151
|
align-items: center;
|
|
150
152
|
z-index: 1;
|
|
@@ -158,7 +160,9 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
|
|
|
158
160
|
flex: 0 0 auto;
|
|
159
161
|
align-self: flex-start;
|
|
160
162
|
box-sizing: border-box;
|
|
161
|
-
margin: awsui.$space-xxs
|
|
163
|
+
margin-block-start: awsui.$space-xxs;
|
|
164
|
+
margin-block-end: 0;
|
|
165
|
+
margin-inline: auto;
|
|
162
166
|
}
|
|
163
167
|
|
|
164
168
|
.slider-icon {
|
|
@@ -167,7 +171,8 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
|
|
|
167
171
|
stroke: awsui.$color-text-interactive-hover;
|
|
168
172
|
}
|
|
169
173
|
&-bottom {
|
|
170
|
-
margin: auto;
|
|
174
|
+
margin-block: auto;
|
|
175
|
+
margin-inline: auto;
|
|
171
176
|
}
|
|
172
177
|
&-side {
|
|
173
178
|
transform: rotate(90deg);
|
|
@@ -177,34 +182,41 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
|
|
|
177
182
|
.pane-header-wrapper-bottom {
|
|
178
183
|
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
179
184
|
position: sticky;
|
|
180
|
-
|
|
185
|
+
inset-block-start: 0;
|
|
181
186
|
display: flex;
|
|
182
187
|
align-items: center;
|
|
183
188
|
flex-direction: column;
|
|
184
189
|
z-index: 1; // should be above .content-bottom
|
|
185
|
-
padding: 0
|
|
190
|
+
padding-block: 0;
|
|
191
|
+
padding-inline: awsui.$space-layout-content-horizontal;
|
|
192
|
+
|
|
186
193
|
.drawer-mobile > .drawer-content-bottom > & {
|
|
187
|
-
padding: 0
|
|
194
|
+
padding-block: 0;
|
|
195
|
+
padding-inline: awsui.$space-l;
|
|
188
196
|
}
|
|
189
197
|
.drawer-disable-content-paddings > .drawer-content-bottom > & {
|
|
190
|
-
padding: 0
|
|
198
|
+
padding-block: 0;
|
|
199
|
+
padding-inline: awsui.$space-l;
|
|
191
200
|
}
|
|
192
201
|
:not(.drawer-closed) > .drawer-content-bottom > & {
|
|
193
202
|
background-color: awsui.$color-background-layout-panel-content;
|
|
194
|
-
border-
|
|
203
|
+
border-block-end: awsui.$border-panel-header-width solid awsui.$color-border-divider-default;
|
|
195
204
|
}
|
|
196
205
|
}
|
|
197
206
|
|
|
198
207
|
.content-bottom {
|
|
199
|
-
padding: 0
|
|
200
|
-
|
|
208
|
+
padding-block: 0;
|
|
209
|
+
padding-inline: awsui.$space-layout-content-horizontal;
|
|
210
|
+
margin-block-start: awsui.$space-panel-split-top;
|
|
201
211
|
position: relative;
|
|
202
212
|
z-index: 0; // the content inside .content-bottom should not be above pane-header-wrapper-bottom
|
|
203
213
|
.drawer-mobile > .drawer-content-bottom > & {
|
|
204
|
-
padding: 0
|
|
214
|
+
padding-block: 0;
|
|
215
|
+
padding-inline: awsui.$space-l;
|
|
205
216
|
}
|
|
206
217
|
.drawer-disable-content-paddings > .drawer-content-bottom > & {
|
|
207
|
-
padding: 0;
|
|
218
|
+
padding-block: 0;
|
|
219
|
+
padding-inline: 0;
|
|
208
220
|
}
|
|
209
221
|
}
|
|
210
222
|
|
|
@@ -214,16 +226,16 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
|
|
|
214
226
|
}
|
|
215
227
|
|
|
216
228
|
.pane-bottom-content-nav-padding {
|
|
217
|
-
padding-
|
|
229
|
+
padding-inline-start: $app-layout-drawer-width;
|
|
218
230
|
}
|
|
219
231
|
|
|
220
232
|
.pane-bottom-content-tools-padding {
|
|
221
|
-
padding-
|
|
233
|
+
padding-inline-end: $app-layout-drawer-width;
|
|
222
234
|
}
|
|
223
235
|
|
|
224
236
|
.content-bottom-max-width {
|
|
225
237
|
flex-grow: 1;
|
|
226
|
-
max-
|
|
238
|
+
max-inline-size: 100%;
|
|
227
239
|
}
|
|
228
240
|
|
|
229
241
|
.content-side {
|
|
@@ -232,17 +244,20 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
|
|
|
232
244
|
box-sizing: border-box;
|
|
233
245
|
overflow-y: auto;
|
|
234
246
|
position: absolute;
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
height: 100%;
|
|
247
|
+
inset-block-start: 0;
|
|
248
|
+
inset-inline: 0;
|
|
249
|
+
block-size: 100%;
|
|
239
250
|
> .pane-header-wrapper-side {
|
|
240
|
-
padding: 0
|
|
241
|
-
|
|
251
|
+
padding-block: 0;
|
|
252
|
+
padding-inline-end: awsui.$space-m;
|
|
253
|
+
padding-inline-start: awsui.$space-panel-side-left;
|
|
254
|
+
border-block-end: awsui.$border-panel-header-width solid awsui.$color-border-divider-default;
|
|
242
255
|
}
|
|
243
256
|
> .pane-content-wrapper-side {
|
|
244
|
-
padding: 0
|
|
245
|
-
|
|
257
|
+
padding-block: 0;
|
|
258
|
+
padding-inline-start: awsui.$space-panel-side-left;
|
|
259
|
+
padding-inline-end: awsui.$space-panel-side-right;
|
|
260
|
+
margin-block-start: awsui.$space-panel-split-top;
|
|
246
261
|
}
|
|
247
262
|
}
|
|
248
263
|
|
|
@@ -252,13 +267,17 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
|
|
|
252
267
|
flex-direction: row;
|
|
253
268
|
align-items: flex-start;
|
|
254
269
|
justify-content: space-between;
|
|
255
|
-
|
|
256
|
-
margin: awsui.$size-vertical-panel-icon-offset
|
|
270
|
+
inline-size: 100%;
|
|
271
|
+
margin-block: awsui.$size-vertical-panel-icon-offset;
|
|
272
|
+
margin-inline: 0;
|
|
273
|
+
|
|
257
274
|
&-text {
|
|
258
275
|
@include styles.font-panel-header;
|
|
259
|
-
padding: 0;
|
|
260
|
-
|
|
261
|
-
margin-
|
|
276
|
+
padding-block: 0;
|
|
277
|
+
padding-inline: 0;
|
|
278
|
+
margin-block: 0;
|
|
279
|
+
margin-inline: 0;
|
|
280
|
+
margin-block-start: calc(#{awsui.$space-scaled-xxs} + 1px);
|
|
262
281
|
}
|
|
263
282
|
}
|
|
264
283
|
|
|
@@ -267,10 +286,11 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
|
|
|
267
286
|
flex-direction: row;
|
|
268
287
|
justify-content: space-between;
|
|
269
288
|
flex: 0 0 auto;
|
|
270
|
-
margin-
|
|
289
|
+
margin-inline-start: awsui.$space-xs;
|
|
271
290
|
}
|
|
272
291
|
|
|
273
292
|
.divider {
|
|
274
|
-
border-
|
|
275
|
-
margin: awsui.$space-scaled-xxs
|
|
293
|
+
border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
|
|
294
|
+
margin-block: awsui.$space-scaled-xxs;
|
|
295
|
+
margin-inline: awsui.$space-scaled-xs;
|
|
276
296
|
}
|
|
@@ -58,13 +58,13 @@ $_color-overrides: (
|
|
|
58
58
|
word-break: break-all;
|
|
59
59
|
|
|
60
60
|
> .icon {
|
|
61
|
-
padding-
|
|
61
|
+
padding-inline-end: awsui.$space-xxs;
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
.overflow-ellipsis {
|
|
67
|
-
max-
|
|
67
|
+
max-inline-size: 100%;
|
|
68
68
|
overflow: hidden;
|
|
69
69
|
text-overflow: ellipsis;
|
|
70
70
|
white-space: nowrap;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { CategoryProps } from '../interfaces';
|
|
3
|
-
declare const CategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, variant,
|
|
3
|
+
declare const CategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, variant, }: CategoryProps) => JSX.Element;
|
|
4
4
|
export default CategoryElement;
|
|
5
5
|
//# sourceMappingURL=category-element.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"category-element.d.ts","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAM9C,QAAA,MAAM,eAAe,
|
|
1
|
+
{"version":3,"file":"category-element.d.ts","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAM9C,QAAA,MAAM,eAAe,2IAWlB,aAAa,gBAiCf,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -2,12 +2,12 @@ import React from 'react';
|
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import styles from './styles.css.js';
|
|
4
4
|
import ItemsList from '../items-list';
|
|
5
|
-
const CategoryElement = ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, variant,
|
|
5
|
+
const CategoryElement = ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, variant, }) => {
|
|
6
6
|
// Hide the category title element from screen readers because it will be
|
|
7
7
|
// provided as an ARIA label.
|
|
8
8
|
return (React.createElement("li", { className: clsx(styles.category, styles[`variant-${variant}`], disabled && styles.disabled), role: "presentation", "aria-disabled": disabled ? 'true' : undefined },
|
|
9
9
|
item.text && (React.createElement("p", { className: clsx(styles.header, { [styles.disabled]: disabled }), "aria-hidden": "true" }, item.text)),
|
|
10
|
-
React.createElement("ul", { className: clsx(styles['items-list-container']), role: "group", "aria-label": item.text }, item.items && (React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, highlightItem: highlightItem, categoryDisabled: disabled, hasCategoryHeader: !!item.text, variant: variant
|
|
10
|
+
React.createElement("ul", { className: clsx(styles['items-list-container']), role: "group", "aria-label": item.text }, item.items && (React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, highlightItem: highlightItem, categoryDisabled: disabled, hasCategoryHeader: !!item.text, variant: variant })))));
|
|
11
11
|
};
|
|
12
12
|
export default CategoryElement;
|
|
13
13
|
//# sourceMappingURL=category-element.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"category-element.js","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EACJ,cAAc,EACd,aAAa,EACb,UAAU,EACV,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,aAAa,EACb,QAAQ,EACR,OAAO,
|
|
1
|
+
{"version":3,"file":"category-element.js","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EACJ,cAAc,EACd,aAAa,EACb,UAAU,EACV,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,aAAa,EACb,QAAQ,EACR,OAAO,GACO,EAAE,EAAE;IAClB,yEAAyE;IACzE,6BAA6B;IAC7B,OAAO,CACL,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EAC3F,IAAI,EAAC,cAAc,mBACJ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QAE3C,IAAI,CAAC,IAAI,IAAI,CACZ,2BAAG,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,iBAAc,MAAM,IACnF,IAAI,CAAC,IAAI,CACR,CACL;QACD,4BAAI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,IAAI,IACpF,IAAI,CAAC,KAAK,IAAI,CACb,oBAAC,SAAS,IACR,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,mBAAmB,EAAE,mBAAmB,EACxC,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,QAAQ,EAC1B,iBAAiB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAC9B,OAAO,EAAE,OAAO,GAChB,CACH,CACE,CACF,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CategoryProps } from '../interfaces';\nimport React from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport ItemsList from '../items-list';\n\nconst CategoryElement = ({\n item,\n onItemActivate,\n onGroupToggle,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n disabled,\n variant,\n}: CategoryProps) => {\n // Hide the category title element from screen readers because it will be\n // provided as an ARIA label.\n return (\n <li\n className={clsx(styles.category, styles[`variant-${variant}`], disabled && styles.disabled)}\n role=\"presentation\"\n aria-disabled={disabled ? 'true' : undefined}\n >\n {item.text && (\n <p className={clsx(styles.header, { [styles.disabled]: disabled })} aria-hidden=\"true\">\n {item.text}\n </p>\n )}\n <ul className={clsx(styles['items-list-container'])} role=\"group\" aria-label={item.text}>\n {item.items && (\n <ItemsList\n items={item.items}\n onItemActivate={onItemActivate}\n onGroupToggle={onGroupToggle}\n targetItem={targetItem}\n isHighlighted={isHighlighted}\n isKeyboardHighlight={isKeyboardHighlight}\n isExpanded={isExpanded}\n highlightItem={highlightItem}\n categoryDisabled={disabled}\n hasCategoryHeader={!!item.text}\n variant={variant}\n />\n )}\n </ul>\n </li>\n );\n};\n\nexport default CategoryElement;\n"]}
|
package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { CategoryProps } from '../interfaces';
|
|
3
|
-
declare const ExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, expandToViewport, variant,
|
|
3
|
+
declare const ExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, expandToViewport, variant, }: CategoryProps) => JSX.Element;
|
|
4
4
|
export default ExpandableCategoryElement;
|
|
5
5
|
//# sourceMappingURL=expandable-category-element.d.ts.map
|
package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"expandable-category-element.d.ts","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/expandable-category-element.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,yBAAyB,
|
|
1
|
+
{"version":3,"file":"expandable-category-element.d.ts","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/expandable-category-element.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,yBAAyB,6JAY5B,aAAa,gBA0Gf,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
|
package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.js
CHANGED
|
@@ -9,7 +9,7 @@ import Dropdown from '../../internal/components/dropdown';
|
|
|
9
9
|
import useHiddenDescription from '../utils/use-hidden-description';
|
|
10
10
|
import Tooltip from '../tooltip.js';
|
|
11
11
|
import { getMenuItemProps } from '../utils/menu-item';
|
|
12
|
-
const ExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, expandToViewport, variant,
|
|
12
|
+
const ExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, expandToViewport, variant, }) => {
|
|
13
13
|
const highlighted = isHighlighted(item);
|
|
14
14
|
const expanded = isExpanded(item);
|
|
15
15
|
const isKeyboardHighlighted = isKeyboardHighlight(item);
|
|
@@ -58,7 +58,7 @@ const ExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle, target
|
|
|
58
58
|
}
|
|
59
59
|
else {
|
|
60
60
|
content = (React.createElement(Dropdown, { open: expanded, stretchWidth: false, interior: true, expandToViewport: expandToViewport, trigger: trigger }, item.items && expanded && (React.createElement("ul", { role: "menu", "aria-label": item.text, className: clsx(styles['items-list-container']) },
|
|
61
|
-
React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, highlightItem: highlightItem, variant: variant
|
|
61
|
+
React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, highlightItem: highlightItem, variant: variant })))));
|
|
62
62
|
}
|
|
63
63
|
return (React.createElement("li", { className: clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {
|
|
64
64
|
[styles.expanded]: expanded,
|
package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"expandable-category-element.js","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/expandable-category-element.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,SAAS,MAAM,eAAe,CAAC;AACtC,OAAO,QAAQ,MAAM,oCAAoC,CAAC;AAE1D,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AACnE,OAAO,OAAO,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,yBAAyB,GAAG,CAAC,EACjC,IAAI,EACJ,cAAc,EACd,aAAa,EACb,UAAU,EACV,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,OAAO,
|
|
1
|
+
{"version":3,"file":"expandable-category-element.js","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/expandable-category-element.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, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\n\nimport InternalIcon from '../../icon/internal';\nimport ItemsList from '../items-list';\nimport Dropdown from '../../internal/components/dropdown';\nimport { CategoryProps } from '../interfaces';\nimport useHiddenDescription from '../utils/use-hidden-description';\nimport Tooltip from '../tooltip.js';\nimport { getMenuItemProps } from '../utils/menu-item';\n\nconst ExpandableCategoryElement = ({\n item,\n onItemActivate,\n onGroupToggle,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n disabled,\n expandToViewport,\n variant,\n}: CategoryProps) => {\n const highlighted = isHighlighted(item);\n const expanded = isExpanded(item);\n const isKeyboardHighlighted = isKeyboardHighlight(item);\n const triggerRef = React.useRef<HTMLSpanElement>(null);\n const ref = useRef<HTMLLIElement>(null);\n\n useEffect(() => {\n if (triggerRef.current && highlighted && !expanded) {\n triggerRef.current.focus();\n }\n }, [expanded, highlighted]);\n\n const onClick: React.MouseEventHandler = event => {\n if (!disabled) {\n event.preventDefault();\n onGroupToggle(item, event);\n triggerRef.current?.focus();\n }\n };\n\n const onHover = () => {\n highlightItem(item);\n };\n\n const isDisabledWithReason = !!item.disabledReason && item.disabled;\n const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n const trigger = item.text && (\n <span\n className={clsx(styles.header, styles['expandable-header'], styles[`variant-${variant}`], {\n [styles.disabled]: disabled,\n [styles.highlighted]: highlighted,\n [styles['is-focused']]: isKeyboardHighlighted,\n })}\n // We are using the roving tabindex technique to manage the focus state of the dropdown.\n // The current element will always have tabindex=0 which means that it can be tabbed to,\n // while all other items have tabindex=-1 so we can focus them when necessary.\n tabIndex={highlighted ? 0 : -1}\n ref={triggerRef}\n {...getMenuItemProps({ parent: true, expanded, disabled })}\n {...(isDisabledWithReason ? targetProps : {})}\n >\n {item.text}\n <span className={clsx(styles['expand-icon'], styles['expand-icon-right'])}>\n <InternalIcon name=\"caret-down-filled\" />\n </span>\n </span>\n );\n\n let content: React.ReactNode;\n // If the category element is disabled, we do not render a dropdown.\n // Screenreaders are confused by additional sections\n if (isDisabledWithReason) {\n content = (\n <Tooltip content={item.disabledReason}>\n {trigger}\n {descriptionEl}\n </Tooltip>\n );\n } else if (disabled) {\n content = trigger;\n } else {\n content = (\n <Dropdown\n open={expanded}\n stretchWidth={false}\n interior={true}\n expandToViewport={expandToViewport}\n trigger={trigger}\n >\n {item.items && expanded && (\n <ul role=\"menu\" aria-label={item.text} className={clsx(styles['items-list-container'])}>\n <ItemsList\n items={item.items}\n onItemActivate={onItemActivate}\n onGroupToggle={onGroupToggle}\n targetItem={targetItem}\n isHighlighted={isHighlighted}\n isKeyboardHighlight={isKeyboardHighlight}\n isExpanded={isExpanded}\n highlightItem={highlightItem}\n variant={variant}\n />\n </ul>\n )}\n </Dropdown>\n );\n }\n\n return (\n <li\n className={clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {\n [styles.expanded]: expanded,\n [styles.disabled]: disabled,\n [styles.highlighted]: highlighted,\n })}\n role=\"presentation\"\n data-testid={item.id}\n ref={ref}\n onClick={onClick}\n onMouseEnter={onHover}\n onTouchStart={onHover}\n >\n {content}\n </li>\n );\n};\n\nexport default ExpandableCategoryElement;\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { CategoryProps } from '../interfaces';
|
|
3
|
-
declare const MobileExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, variant,
|
|
3
|
+
declare const MobileExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, variant, }: CategoryProps) => JSX.Element;
|
|
4
4
|
export default MobileExpandableCategoryElement;
|
|
5
5
|
//# sourceMappingURL=mobile-expandable-category-element.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mobile-expandable-category-element.d.ts","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/mobile-expandable-category-element.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,+BAA+B,
|
|
1
|
+
{"version":3,"file":"mobile-expandable-category-element.d.ts","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/mobile-expandable-category-element.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,+BAA+B,2IAWlC,aAAa,gBAuGf,CAAC;AAEF,eAAe,+BAA+B,CAAC"}
|
|
@@ -9,7 +9,7 @@ import MobileExpandableGroup from '../mobile-expandable-group/mobile-expandable-
|
|
|
9
9
|
import Tooltip from '../tooltip.js';
|
|
10
10
|
import useHiddenDescription from '../utils/use-hidden-description.js';
|
|
11
11
|
import { getMenuItemProps } from '../utils/menu-item.js';
|
|
12
|
-
const MobileExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, variant,
|
|
12
|
+
const MobileExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, variant, }) => {
|
|
13
13
|
const highlighted = isHighlighted(item);
|
|
14
14
|
const expanded = isExpanded(item);
|
|
15
15
|
const isKeyboardHighlighted = isKeyboardHighlight(item);
|
|
@@ -56,7 +56,7 @@ const MobileExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle,
|
|
|
56
56
|
}
|
|
57
57
|
else {
|
|
58
58
|
content = (React.createElement(MobileExpandableGroup, { open: expanded, trigger: trigger }, item.items && expanded && (React.createElement("ul", { role: "menu", "aria-label": item.text, className: clsx(styles['items-list-container']) },
|
|
59
|
-
React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, highlightItem: highlightItem, hasCategoryHeader: true, variant: variant
|
|
59
|
+
React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, highlightItem: highlightItem, hasCategoryHeader: true, variant: variant })))));
|
|
60
60
|
}
|
|
61
61
|
return (React.createElement("li", { className: clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {
|
|
62
62
|
[styles.expanded]: expanded,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mobile-expandable-category-element.js","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/mobile-expandable-category-element.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,SAAS,MAAM,eAAe,CAAC;AACtC,OAAO,qBAAqB,MAAM,oDAAoD,CAAC;AAEvF,OAAO,OAAO,MAAM,eAAe,CAAC;AACpC,OAAO,oBAAoB,MAAM,oCAAoC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,MAAM,+BAA+B,GAAG,CAAC,EACvC,IAAI,EACJ,cAAc,EACd,aAAa,EACb,UAAU,EACV,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,aAAa,EACb,QAAQ,EACR,OAAO,
|
|
1
|
+
{"version":3,"file":"mobile-expandable-category-element.js","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/mobile-expandable-category-element.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, { useEffect } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\n\nimport InternalIcon from '../../icon/internal';\nimport ItemsList from '../items-list';\nimport MobileExpandableGroup from '../mobile-expandable-group/mobile-expandable-group';\nimport { CategoryProps } from '../interfaces';\nimport Tooltip from '../tooltip.js';\nimport useHiddenDescription from '../utils/use-hidden-description.js';\nimport { getMenuItemProps } from '../utils/menu-item.js';\n\nconst MobileExpandableCategoryElement = ({\n item,\n onItemActivate,\n onGroupToggle,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n disabled,\n variant,\n}: CategoryProps) => {\n const highlighted = isHighlighted(item);\n const expanded = isExpanded(item);\n const isKeyboardHighlighted = isKeyboardHighlight(item);\n const triggerRef = React.useRef<HTMLSpanElement>(null);\n\n useEffect(() => {\n if (triggerRef.current && highlighted && !expanded) {\n triggerRef.current.focus();\n }\n }, [expanded, highlighted]);\n\n const onClick = (e: React.MouseEvent) => {\n if (!disabled) {\n e.preventDefault();\n onGroupToggle(item, e);\n }\n };\n\n const onHover = () => {\n highlightItem(item);\n };\n\n const isDisabledWithReason = !!item.disabledReason && item.disabled;\n const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n const trigger = item.text && (\n <span\n className={clsx(styles.header, styles['expandable-header'], styles[`variant-${variant}`], {\n [styles.highlighted]: highlighted,\n [styles['rolled-down']]: expanded,\n [styles.disabled]: disabled,\n [styles['is-focused']]: isKeyboardHighlighted,\n })}\n // We are using the roving tabindex technique to manage the focus state of the dropdown.\n // The current element will always have tabindex=0 which means that it can be tabbed to,\n // while all other items have tabindex=-1 so we can focus them when necessary.\n tabIndex={highlighted ? 0 : -1}\n ref={triggerRef}\n {...getMenuItemProps({ parent: true, disabled, expanded })}\n {...(isDisabledWithReason ? targetProps : {})}\n >\n {item.text}\n <span\n className={clsx(styles['expand-icon'], {\n [styles['expand-icon-up']]: expanded,\n })}\n >\n <InternalIcon name=\"caret-down-filled\" />\n </span>\n </span>\n );\n\n let content: React.ReactNode;\n\n if (isDisabledWithReason) {\n content = (\n <>\n {descriptionEl}\n <Tooltip content={item.disabledReason}>{trigger}</Tooltip>\n </>\n );\n } else if (disabled) {\n content = trigger;\n } else {\n content = (\n <MobileExpandableGroup open={expanded} trigger={trigger}>\n {item.items && expanded && (\n <ul role=\"menu\" aria-label={item.text} className={clsx(styles['items-list-container'])}>\n <ItemsList\n items={item.items}\n onItemActivate={onItemActivate}\n onGroupToggle={onGroupToggle}\n targetItem={targetItem}\n isHighlighted={isHighlighted}\n isKeyboardHighlight={isKeyboardHighlight}\n isExpanded={isExpanded}\n highlightItem={highlightItem}\n hasCategoryHeader={true}\n variant={variant}\n />\n </ul>\n )}\n </MobileExpandableGroup>\n );\n }\n\n return (\n <li\n className={clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {\n [styles.expanded]: expanded,\n [styles.disabled]: disabled,\n [styles.highlighted]: highlighted || expanded,\n [styles.expandable]: true,\n })}\n role=\"presentation\"\n onClick={onClick}\n onMouseEnter={onHover}\n onTouchStart={onHover}\n data-testid={item.id}\n >\n {content}\n </li>\n );\n};\n\nexport default MobileExpandableCategoryElement;\n"]}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"header": "
|
|
5
|
-
"disabled": "
|
|
6
|
-
"expandable-header": "awsui_expandable-
|
|
7
|
-
"rolled-down": "awsui_rolled-
|
|
8
|
-
"highlighted": "
|
|
9
|
-
"is-focused": "awsui_is-
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"expand-icon": "awsui_expand-
|
|
14
|
-
"expand-icon-up": "awsui_expand-icon-
|
|
15
|
-
"expand-icon-right": "awsui_expand-icon-
|
|
16
|
-
"items-list-container": "awsui_items-list-
|
|
4
|
+
"header": "awsui_header_16mm3_rbjjl_93",
|
|
5
|
+
"disabled": "awsui_disabled_16mm3_rbjjl_108",
|
|
6
|
+
"expandable-header": "awsui_expandable-header_16mm3_rbjjl_112",
|
|
7
|
+
"rolled-down": "awsui_rolled-down_16mm3_rbjjl_123",
|
|
8
|
+
"highlighted": "awsui_highlighted_16mm3_rbjjl_126",
|
|
9
|
+
"is-focused": "awsui_is-focused_16mm3_rbjjl_139",
|
|
10
|
+
"variant-navigation": "awsui_variant-navigation_16mm3_rbjjl_143",
|
|
11
|
+
"category": "awsui_category_16mm3_rbjjl_155",
|
|
12
|
+
"expandable": "awsui_expandable_16mm3_rbjjl_112",
|
|
13
|
+
"expand-icon": "awsui_expand-icon_16mm3_rbjjl_176",
|
|
14
|
+
"expand-icon-up": "awsui_expand-icon-up_16mm3_rbjjl_183",
|
|
15
|
+
"expand-icon-right": "awsui_expand-icon-right_16mm3_rbjjl_186",
|
|
16
|
+
"items-list-container": "awsui_items-list-container_16mm3_rbjjl_200"
|
|
17
17
|
};
|
|
18
18
|
|