@cloudscape-design/components 3.0.630 → 3.0.632
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/autosuggest/internal.d.ts.map +1 -1
- package/autosuggest/internal.js +10 -0
- package/autosuggest/internal.js.map +1 -1
- package/breadcrumb-group/implementation.d.ts +8 -0
- package/breadcrumb-group/implementation.d.ts.map +1 -0
- package/breadcrumb-group/implementation.js +71 -0
- package/breadcrumb-group/implementation.js.map +1 -0
- package/breadcrumb-group/index.js +1 -1
- package/breadcrumb-group/index.js.map +1 -1
- package/breadcrumb-group/internal.d.ts +1 -11
- package/breadcrumb-group/internal.d.ts.map +1 -1
- package/breadcrumb-group/internal.js +2 -70
- package/breadcrumb-group/internal.js.map +1 -1
- package/breadcrumb-group/item/item.js +1 -1
- package/breadcrumb-group/item/item.js.map +1 -1
- package/breadcrumb-group/utils.d.ts +7 -0
- package/breadcrumb-group/utils.d.ts.map +1 -0
- package/breadcrumb-group/utils.js +6 -0
- package/breadcrumb-group/utils.js.map +1 -0
- package/drawer/implementation.d.ts +7 -0
- package/drawer/implementation.d.ts.map +1 -0
- package/drawer/implementation.js +24 -0
- package/drawer/implementation.js.map +1 -0
- package/drawer/index.d.ts +1 -1
- package/drawer/index.d.ts.map +1 -1
- package/drawer/index.js +4 -18
- package/drawer/index.js.map +1 -1
- package/drawer/internal.d.ts +2 -0
- package/drawer/internal.d.ts.map +1 -0
- package/drawer/internal.js +5 -0
- package/drawer/internal.js.map +1 -0
- package/form-field/styles.css.js +23 -23
- package/form-field/styles.scoped.css +38 -37
- package/form-field/styles.selectors.js +23 -23
- package/help-panel/implementation.d.ts +7 -0
- package/help-panel/implementation.d.ts.map +1 -0
- package/help-panel/implementation.js +27 -0
- package/help-panel/implementation.js.map +1 -0
- package/help-panel/index.d.ts +1 -1
- package/help-panel/index.d.ts.map +1 -1
- package/help-panel/index.js +4 -21
- package/help-panel/index.js.map +1 -1
- package/help-panel/internal.d.ts +2 -0
- package/help-panel/internal.d.ts.map +1 -0
- package/help-panel/internal.js +5 -0
- package/help-panel/internal.js.map +1 -0
- package/internal/base-component/styles.scoped.css +5 -0
- package/internal/components/options-list/utils/use-keyboard.d.ts +2 -1
- package/internal/components/options-list/utils/use-keyboard.d.ts.map +1 -1
- package/internal/components/options-list/utils/use-keyboard.js +4 -4
- package/internal/components/options-list/utils/use-keyboard.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/generated/styles/tokens.d.ts +1 -0
- package/internal/generated/styles/tokens.js +1 -0
- package/internal/generated/theming/index.cjs +31 -0
- package/internal/generated/theming/index.js +31 -0
- package/internal/manifest.json +1 -1
- package/internal/widgets/index.d.ts +4 -0
- package/internal/widgets/index.d.ts.map +1 -0
- package/internal/widgets/index.js +28 -0
- package/internal/widgets/index.js.map +1 -0
- package/link/styles.css.js +20 -20
- package/link/styles.scoped.css +71 -75
- package/link/styles.selectors.js +20 -20
- package/package.json +1 -1
- package/s3-resource-selector/s3-modal/index.js +2 -2
- package/s3-resource-selector/s3-modal/index.js.map +1 -1
- package/select/utils/use-select.d.ts.map +1 -1
- package/select/utils/use-select.js +15 -1
- package/select/utils/use-select.js.map +1 -1
- package/side-navigation/implementation.d.ts +7 -0
- package/side-navigation/implementation.d.ts.map +1 -0
- package/side-navigation/implementation.js +36 -0
- package/side-navigation/implementation.js.map +1 -0
- package/side-navigation/index.d.ts +1 -1
- package/side-navigation/index.d.ts.map +1 -1
- package/side-navigation/index.js +5 -29
- package/side-navigation/index.js.map +1 -1
- package/side-navigation/internal.d.ts +1 -17
- package/side-navigation/internal.d.ts.map +1 -1
- package/side-navigation/internal.js +2 -182
- package/side-navigation/internal.js.map +1 -1
- package/side-navigation/parts.d.ts +18 -0
- package/side-navigation/parts.d.ts.map +1 -0
- package/side-navigation/parts.js +185 -0
- package/side-navigation/parts.js.map +1 -0
- package/slider/internal.d.ts.map +1 -1
- package/slider/internal.js +6 -2
- package/slider/internal.js.map +1 -1
- package/slider/styles.css.js +25 -23
- package/slider/styles.scoped.css +95 -52
- package/slider/styles.selectors.js +25 -23
- package/slider/tick-marks.d.ts +1 -0
- package/slider/tick-marks.d.ts.map +1 -1
- package/slider/tick-marks.js +4 -1
- package/slider/tick-marks.js.map +1 -1
- package/split-panel/implementation.d.ts +1 -0
- package/split-panel/implementation.d.ts.map +1 -1
- package/split-panel/implementation.js +2 -0
- package/split-panel/implementation.js.map +1 -1
- package/split-panel/styles.css.js +57 -57
- package/split-panel/styles.scoped.css +78 -77
- package/split-panel/styles.selectors.js +57 -57
- package/split-panel/widget.d.ts +1 -5
- package/split-panel/widget.d.ts.map +1 -1
- package/split-panel/widget.js +1 -13
- package/split-panel/widget.js.map +1 -1
- package/table/selection/use-selection.d.ts.map +1 -1
- package/table/selection/use-selection.js +59 -64
- package/table/selection/use-selection.js.map +1 -1
package/slider/styles.scoped.css
CHANGED
|
@@ -100,7 +100,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
100
100
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
101
101
|
SPDX-License-Identifier: Apache-2.0
|
|
102
102
|
*/
|
|
103
|
-
.
|
|
103
|
+
.awsui_root_pcgz5_2nlcl_103:not(#\9) {
|
|
104
104
|
border-collapse: separate;
|
|
105
105
|
border-spacing: 0;
|
|
106
106
|
box-sizing: border-box;
|
|
@@ -141,11 +141,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
141
141
|
margin-inline: calc(var(--space-m-udix3p, 16px) / 2);
|
|
142
142
|
}
|
|
143
143
|
|
|
144
|
-
.
|
|
144
|
+
.awsui_slider_pcgz5_2nlcl_143:not(#\9) {
|
|
145
145
|
display: flex;
|
|
146
146
|
align-items: center;
|
|
147
147
|
}
|
|
148
|
-
.awsui_slider-
|
|
148
|
+
.awsui_slider-track_pcgz5_2nlcl_147:not(#\9), .awsui_slider-range_pcgz5_2nlcl_147:not(#\9) {
|
|
149
149
|
position: absolute;
|
|
150
150
|
border-start-start-radius: 3px;
|
|
151
151
|
border-start-end-radius: 3px;
|
|
@@ -154,57 +154,63 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
154
154
|
margin-block-start: var(--space-xs-zb16t3, 8px);
|
|
155
155
|
margin-inline: calc(var(--space-m-udix3p, 16px) / -2);
|
|
156
156
|
}
|
|
157
|
-
.awsui_slider-
|
|
157
|
+
.awsui_slider-track_pcgz5_2nlcl_147:not(#\9) {
|
|
158
158
|
background-color: var(--color-background-slider-track-3m68rn, #7d8998);
|
|
159
159
|
inline-size: calc(100% + var(--space-m-udix3p, 16px));
|
|
160
160
|
block-size: 2px;
|
|
161
161
|
cursor: pointer;
|
|
162
162
|
}
|
|
163
|
-
.awsui_slider-
|
|
163
|
+
.awsui_slider-track_pcgz5_2nlcl_147.awsui_disabled_pcgz5_2nlcl_162:not(#\9) {
|
|
164
164
|
cursor: default;
|
|
165
165
|
background-color: var(--color-background-control-disabled-pwkvgd, #d1d5db);
|
|
166
166
|
}
|
|
167
|
-
.awsui_slider-
|
|
167
|
+
.awsui_slider-range_pcgz5_2nlcl_147:not(#\9) {
|
|
168
168
|
background-color: var(--color-background-slider-handle-default-atrlod, #0972d3);
|
|
169
169
|
block-size: 4px;
|
|
170
170
|
inline-size: calc(var(--awsui-slider-range-inline-size-tkr9yl) + var(--space-m-udix3p, 16px));
|
|
171
171
|
}
|
|
172
|
-
.awsui_slider-
|
|
172
|
+
.awsui_slider-range_pcgz5_2nlcl_147.awsui_error_pcgz5_2nlcl_171:not(#\9) {
|
|
173
173
|
background-color: var(--color-text-status-error-wdvepn, #d91515);
|
|
174
174
|
}
|
|
175
|
-
.awsui_slider-
|
|
175
|
+
.awsui_slider-range_pcgz5_2nlcl_147.awsui_warning_pcgz5_2nlcl_174:not(#\9) {
|
|
176
|
+
background-color: var(--color-text-status-warning-yik8vi, #8d6605);
|
|
177
|
+
}
|
|
178
|
+
.awsui_slider-range_pcgz5_2nlcl_147.awsui_active_pcgz5_2nlcl_177:not(#\9) {
|
|
176
179
|
background-color: var(--color-background-slider-handle-active-ccegzg, #065299);
|
|
177
180
|
}
|
|
178
|
-
.awsui_slider-
|
|
181
|
+
.awsui_slider-range_pcgz5_2nlcl_147.awsui_error-active_pcgz5_2nlcl_180:not(#\9) {
|
|
179
182
|
background-color: var(--color-background-slider-error-pressed-g7oqnt, #7c2718);
|
|
180
183
|
}
|
|
181
|
-
.awsui_slider-
|
|
184
|
+
.awsui_slider-range_pcgz5_2nlcl_147.awsui_warning-active_pcgz5_2nlcl_183:not(#\9) {
|
|
185
|
+
background-color: var(--color-background-slider-warning-pressed-9xuhwf, #8d6605);
|
|
186
|
+
}
|
|
187
|
+
.awsui_slider-range_pcgz5_2nlcl_147.awsui_disabled_pcgz5_2nlcl_162:not(#\9) {
|
|
182
188
|
background-color: var(--color-background-control-disabled-pwkvgd, #d1d5db);
|
|
183
189
|
}
|
|
184
190
|
|
|
185
|
-
.
|
|
191
|
+
.awsui_labels_pcgz5_2nlcl_190:not(#\9) {
|
|
186
192
|
display: grid;
|
|
187
193
|
grid-template-columns: 3fr repeat(calc((var(--awsui-slider-label-count-tkr9yl) - 2) / 2 + (var(--awsui-slider-label-count-tkr9yl) - 2) / 2 - 1), 2fr) 3fr;
|
|
188
194
|
grid-auto-rows: 100%;
|
|
189
195
|
padding-block-start: var(--space-m-udix3p, 16px);
|
|
190
196
|
}
|
|
191
|
-
.awsui_labels-
|
|
197
|
+
.awsui_labels-noref_pcgz5_2nlcl_196:not(#\9) {
|
|
192
198
|
grid-template-columns: 1fr 1fr;
|
|
193
199
|
}
|
|
194
|
-
.awsui_labels-
|
|
200
|
+
.awsui_labels-reference_pcgz5_2nlcl_199:not(#\9) {
|
|
195
201
|
grid-column-start: var(--awsui-slider-reference-column-tkr9yl);
|
|
196
202
|
grid-column-end: var(--awsui-slider-next-reference-column-tkr9yl);
|
|
197
203
|
grid-row: 1;
|
|
198
204
|
justify-self: center;
|
|
199
205
|
text-align: center;
|
|
200
206
|
}
|
|
201
|
-
.awsui_labels-
|
|
207
|
+
.awsui_labels-min_pcgz5_2nlcl_206:not(#\9) {
|
|
202
208
|
grid-column: 1;
|
|
203
209
|
grid-row: 1;
|
|
204
210
|
grid-column-end: var(--awsui-slider-min-end-tkr9yl);
|
|
205
211
|
margin-inline-start: calc(var(--space-m-udix3p, 16px) / -2);
|
|
206
212
|
}
|
|
207
|
-
.awsui_labels-
|
|
213
|
+
.awsui_labels-max_pcgz5_2nlcl_212:not(#\9) {
|
|
208
214
|
text-align: end;
|
|
209
215
|
justify-content: flex-end;
|
|
210
216
|
grid-row: 1;
|
|
@@ -212,37 +218,37 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
212
218
|
grid-column-start: var(--awsui-slider-max-start-tkr9yl);
|
|
213
219
|
margin-inline-end: calc(var(--space-m-udix3p, 16px) / -2);
|
|
214
220
|
}
|
|
215
|
-
.awsui_labels-aria-
|
|
221
|
+
.awsui_labels-aria-description_pcgz5_2nlcl_220:not(#\9) {
|
|
216
222
|
display: none;
|
|
217
223
|
}
|
|
218
224
|
@media (max-width: 576px) {
|
|
219
|
-
.
|
|
225
|
+
.awsui_labels_pcgz5_2nlcl_190:not(#\9) {
|
|
220
226
|
grid-template-columns: 1fr 1fr;
|
|
221
227
|
}
|
|
222
|
-
.awsui_labels-
|
|
228
|
+
.awsui_labels-min_pcgz5_2nlcl_206:not(#\9) {
|
|
223
229
|
grid-column: 1;
|
|
224
230
|
}
|
|
225
|
-
.awsui_labels-
|
|
231
|
+
.awsui_labels-max_pcgz5_2nlcl_212:not(#\9) {
|
|
226
232
|
grid-column: 2;
|
|
227
233
|
}
|
|
228
|
-
.
|
|
234
|
+
.awsui_labels_pcgz5_2nlcl_190 > .awsui_labels-reference_pcgz5_2nlcl_199:not(#\9) {
|
|
229
235
|
display: none;
|
|
230
236
|
}
|
|
231
237
|
}
|
|
232
238
|
|
|
233
|
-
.
|
|
239
|
+
.awsui_ticks_pcgz5_2nlcl_238:not(#\9) {
|
|
234
240
|
display: grid;
|
|
235
241
|
grid-template-columns: repeat(var(--awsui-slider-tick-count-tkr9yl), 1fr);
|
|
236
242
|
inline-size: calc(100% - var(--space-m-udix3p, 16px));
|
|
237
243
|
margin-inline: calc(var(--space-m-udix3p, 16px) / 2);
|
|
238
244
|
}
|
|
239
|
-
.awsui_ticks-
|
|
245
|
+
.awsui_ticks-wrapper_pcgz5_2nlcl_244:not(#\9) {
|
|
240
246
|
block-size: 0;
|
|
241
247
|
display: flex;
|
|
242
248
|
margin-inline: calc(var(--space-m-udix3p, 16px) / -2);
|
|
243
249
|
}
|
|
244
250
|
|
|
245
|
-
.
|
|
251
|
+
.awsui_tick_pcgz5_2nlcl_238:not(#\9) {
|
|
246
252
|
grid-row: 1;
|
|
247
253
|
block-size: var(--space-xs-zb16t3, 8px);
|
|
248
254
|
inline-size: var(--space-xxxs-zbmxqb, 2px);
|
|
@@ -251,26 +257,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
251
257
|
background: var(--color-background-slider-track-3m68rn, #7d8998);
|
|
252
258
|
inset-block-start: -4px;
|
|
253
259
|
}
|
|
254
|
-
.
|
|
260
|
+
.awsui_tick_pcgz5_2nlcl_238.awsui_middle_pcgz5_2nlcl_259:not(#\9):first-child, .awsui_tick_pcgz5_2nlcl_238.awsui_middle_pcgz5_2nlcl_259:not(#\9):last-child {
|
|
255
261
|
visibility: hidden;
|
|
256
262
|
}
|
|
257
|
-
.
|
|
263
|
+
.awsui_tick_pcgz5_2nlcl_238.awsui_filled_pcgz5_2nlcl_262:not(#\9) {
|
|
258
264
|
background: var(--color-background-slider-handle-default-atrlod, #0972d3);
|
|
259
265
|
}
|
|
260
|
-
.
|
|
266
|
+
.awsui_tick_pcgz5_2nlcl_238.awsui_active_pcgz5_2nlcl_177:not(#\9) {
|
|
261
267
|
background: var(--color-background-slider-handle-active-ccegzg, #065299);
|
|
262
268
|
}
|
|
263
|
-
.
|
|
269
|
+
.awsui_tick_pcgz5_2nlcl_238.awsui_error_pcgz5_2nlcl_171:not(#\9) {
|
|
264
270
|
background: var(--color-text-status-error-wdvepn, #d91515);
|
|
265
271
|
}
|
|
266
|
-
.
|
|
272
|
+
.awsui_tick_pcgz5_2nlcl_238.awsui_warning_pcgz5_2nlcl_174:not(#\9) {
|
|
273
|
+
background: var(--color-text-status-warning-yik8vi, #8d6605);
|
|
274
|
+
}
|
|
275
|
+
.awsui_tick_pcgz5_2nlcl_238.awsui_error-active_pcgz5_2nlcl_180:not(#\9) {
|
|
267
276
|
background-color: var(--color-background-slider-error-pressed-g7oqnt, #7c2718);
|
|
268
277
|
}
|
|
269
|
-
.
|
|
278
|
+
.awsui_tick_pcgz5_2nlcl_238.awsui_warning-active_pcgz5_2nlcl_183:not(#\9) {
|
|
279
|
+
background-color: var(--color-background-slider-warning-pressed-9xuhwf, #8d6605);
|
|
280
|
+
}
|
|
281
|
+
.awsui_tick_pcgz5_2nlcl_238.awsui_disabled_pcgz5_2nlcl_162:not(#\9) {
|
|
270
282
|
background: var(--color-background-control-disabled-pwkvgd, #d1d5db);
|
|
271
283
|
}
|
|
272
284
|
|
|
273
|
-
.awsui_tooltip-
|
|
285
|
+
.awsui_tooltip-thumb_pcgz5_2nlcl_284:not(#\9) {
|
|
274
286
|
position: absolute;
|
|
275
287
|
inline-size: var(--space-xxl-cu2m1r, 32px);
|
|
276
288
|
block-size: var(--space-xxl-cu2m1r, 32px);
|
|
@@ -278,7 +290,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
278
290
|
inset-inline-start: var(--awsui-slider-tooltip-position-tkr9yl);
|
|
279
291
|
}
|
|
280
292
|
|
|
281
|
-
.
|
|
293
|
+
.awsui_thumb_pcgz5_2nlcl_292:not(#\9) {
|
|
282
294
|
background: transparent;
|
|
283
295
|
-webkit-appearance: none;
|
|
284
296
|
appearance: none;
|
|
@@ -291,16 +303,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
291
303
|
cursor: pointer;
|
|
292
304
|
touch-action: none;
|
|
293
305
|
}
|
|
294
|
-
.
|
|
306
|
+
.awsui_thumb_pcgz5_2nlcl_292.awsui_disabled_pcgz5_2nlcl_162:not(#\9) {
|
|
295
307
|
cursor: default;
|
|
296
308
|
}
|
|
297
|
-
.
|
|
309
|
+
.awsui_thumb_pcgz5_2nlcl_292.awsui_min_pcgz5_2nlcl_307:not(#\9) {
|
|
298
310
|
margin-inline-start: calc(-1px + var(--space-m-udix3p, 16px) / -2);
|
|
299
311
|
}
|
|
300
|
-
.
|
|
312
|
+
.awsui_thumb_pcgz5_2nlcl_292.awsui_max_pcgz5_2nlcl_310:not(#\9) {
|
|
301
313
|
margin-inline-start: calc(1px + var(--space-m-udix3p, 16px) / -2);
|
|
302
314
|
}
|
|
303
|
-
.
|
|
315
|
+
.awsui_thumb_pcgz5_2nlcl_292:not(#\9)::-webkit-slider-thumb {
|
|
304
316
|
-webkit-appearance: none;
|
|
305
317
|
appearance: none;
|
|
306
318
|
appearance: none;
|
|
@@ -319,7 +331,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
319
331
|
pointer-events: all;
|
|
320
332
|
position: relative;
|
|
321
333
|
}
|
|
322
|
-
.
|
|
334
|
+
.awsui_thumb_pcgz5_2nlcl_292:not(#\9)::-moz-range-thumb {
|
|
323
335
|
appearance: none;
|
|
324
336
|
appearance: none;
|
|
325
337
|
background: var(--color-background-slider-handle-default-atrlod, #0972d3);
|
|
@@ -337,13 +349,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
337
349
|
pointer-events: all;
|
|
338
350
|
position: relative;
|
|
339
351
|
}
|
|
340
|
-
.
|
|
352
|
+
.awsui_thumb_pcgz5_2nlcl_292:not(#\9):hover::-webkit-slider-thumb {
|
|
341
353
|
box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-background-slider-handle-default-atrlod, #0972d3);
|
|
342
354
|
}
|
|
343
|
-
.
|
|
355
|
+
.awsui_thumb_pcgz5_2nlcl_292:not(#\9):hover::-moz-range-thumb {
|
|
344
356
|
box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-background-slider-handle-default-atrlod, #0972d3);
|
|
345
357
|
}
|
|
346
|
-
.
|
|
358
|
+
.awsui_thumb_pcgz5_2nlcl_292:not(#\9):focus::-webkit-slider-thumb, .awsui_thumb_pcgz5_2nlcl_292:not(#\9):active::-webkit-slider-thumb {
|
|
347
359
|
block-size: 20px;
|
|
348
360
|
inline-size: 20px;
|
|
349
361
|
box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-background-slider-handle-active-ccegzg, #065299);
|
|
@@ -352,7 +364,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
352
364
|
border-block-width: 2px;
|
|
353
365
|
border-inline-width: 2px;
|
|
354
366
|
}
|
|
355
|
-
.
|
|
367
|
+
.awsui_thumb_pcgz5_2nlcl_292:not(#\9):focus::-moz-range-thumb, .awsui_thumb_pcgz5_2nlcl_292:not(#\9):active::-moz-range-thumb {
|
|
356
368
|
block-size: 20px;
|
|
357
369
|
inline-size: 20px;
|
|
358
370
|
box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-background-slider-handle-active-ccegzg, #065299);
|
|
@@ -362,30 +374,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
362
374
|
border-inline-width: 2px;
|
|
363
375
|
}
|
|
364
376
|
|
|
365
|
-
.
|
|
377
|
+
.awsui_error_pcgz5_2nlcl_171:not(#\9)::-webkit-slider-thumb {
|
|
366
378
|
background-color: var(--color-text-status-error-wdvepn, #d91515);
|
|
367
379
|
border-color: var(--color-text-status-error-wdvepn, #d91515);
|
|
368
380
|
}
|
|
369
|
-
.
|
|
381
|
+
.awsui_error_pcgz5_2nlcl_171:not(#\9)::-moz-range-thumb {
|
|
370
382
|
background-color: var(--color-text-status-error-wdvepn, #d91515);
|
|
371
383
|
border-color: var(--color-text-status-error-wdvepn, #d91515);
|
|
372
384
|
}
|
|
373
|
-
.
|
|
385
|
+
.awsui_error_pcgz5_2nlcl_171:not(#\9):hover::-webkit-slider-thumb {
|
|
374
386
|
background-color: var(--color-text-status-error-wdvepn, #d91515);
|
|
375
387
|
box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-text-status-error-wdvepn, #d91515);
|
|
376
388
|
}
|
|
377
|
-
.
|
|
389
|
+
.awsui_error_pcgz5_2nlcl_171:not(#\9):hover::-moz-range-thumb {
|
|
378
390
|
background-color: var(--color-text-status-error-wdvepn, #d91515);
|
|
379
391
|
box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-text-status-error-wdvepn, #d91515);
|
|
380
392
|
}
|
|
381
|
-
.
|
|
393
|
+
.awsui_error_pcgz5_2nlcl_171:not(#\9):focus::-webkit-slider-thumb, .awsui_error_pcgz5_2nlcl_171:not(#\9):active::-webkit-slider-thumb {
|
|
382
394
|
background-color: var(--color-background-slider-error-pressed-g7oqnt, #7c2718);
|
|
383
395
|
border-block-width: 2px;
|
|
384
396
|
border-inline-width: 2px;
|
|
385
397
|
border-color: var(--color-background-slider-error-pressed-g7oqnt, #7c2718);
|
|
386
398
|
box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-background-slider-error-pressed-g7oqnt, #7c2718);
|
|
387
399
|
}
|
|
388
|
-
.
|
|
400
|
+
.awsui_error_pcgz5_2nlcl_171:not(#\9):focus::-moz-range-thumb, .awsui_error_pcgz5_2nlcl_171:not(#\9):active::-moz-range-thumb {
|
|
389
401
|
background-color: var(--color-background-slider-error-pressed-g7oqnt, #7c2718);
|
|
390
402
|
border-block-width: 2px;
|
|
391
403
|
border-inline-width: 2px;
|
|
@@ -393,17 +405,48 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
393
405
|
box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-background-slider-error-pressed-g7oqnt, #7c2718);
|
|
394
406
|
}
|
|
395
407
|
|
|
396
|
-
.
|
|
397
|
-
|
|
398
|
-
|
|
408
|
+
.awsui_warning_pcgz5_2nlcl_174:not(#\9)::-webkit-slider-thumb {
|
|
409
|
+
background-color: var(--color-text-status-warning-yik8vi, #8d6605);
|
|
410
|
+
border-color: var(--color-text-status-warning-yik8vi, #8d6605);
|
|
411
|
+
}
|
|
412
|
+
.awsui_warning_pcgz5_2nlcl_174:not(#\9)::-moz-range-thumb {
|
|
413
|
+
background-color: var(--color-text-status-warning-yik8vi, #8d6605);
|
|
414
|
+
border-color: var(--color-text-status-warning-yik8vi, #8d6605);
|
|
415
|
+
}
|
|
416
|
+
.awsui_warning_pcgz5_2nlcl_174:not(#\9):hover::-webkit-slider-thumb {
|
|
417
|
+
background-color: var(--color-text-status-warning-yik8vi, #8d6605);
|
|
418
|
+
box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-text-status-warning-yik8vi, #8d6605);
|
|
419
|
+
}
|
|
420
|
+
.awsui_warning_pcgz5_2nlcl_174:not(#\9):hover::-moz-range-thumb {
|
|
421
|
+
background-color: var(--color-text-status-warning-yik8vi, #8d6605);
|
|
422
|
+
box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-text-status-warning-yik8vi, #8d6605);
|
|
423
|
+
}
|
|
424
|
+
.awsui_warning_pcgz5_2nlcl_174:not(#\9):focus::-webkit-slider-thumb, .awsui_warning_pcgz5_2nlcl_174:not(#\9):active::-webkit-slider-thumb {
|
|
425
|
+
background-color: var(--color-background-slider-warning-pressed-9xuhwf, #8d6605);
|
|
426
|
+
border-block-width: 2px;
|
|
427
|
+
border-inline-width: 2px;
|
|
428
|
+
border-color: var(--color-background-slider-warning-pressed-9xuhwf, #8d6605);
|
|
429
|
+
box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-background-slider-warning-pressed-9xuhwf, #8d6605);
|
|
430
|
+
}
|
|
431
|
+
.awsui_warning_pcgz5_2nlcl_174:not(#\9):focus::-moz-range-thumb, .awsui_warning_pcgz5_2nlcl_174:not(#\9):active::-moz-range-thumb {
|
|
432
|
+
background-color: var(--color-background-slider-warning-pressed-9xuhwf, #8d6605);
|
|
433
|
+
border-block-width: 2px;
|
|
434
|
+
border-inline-width: 2px;
|
|
435
|
+
border-color: var(--color-background-slider-warning-pressed-9xuhwf, #8d6605);
|
|
436
|
+
box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-background-slider-warning-pressed-9xuhwf, #8d6605);
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
.awsui_disabled_pcgz5_2nlcl_162:not(#\9)::-webkit-slider-thumb,
|
|
440
|
+
.awsui_disabled_pcgz5_2nlcl_162:not(#\9):hover::-webkit-slider-thumb,
|
|
441
|
+
.awsui_disabled_pcgz5_2nlcl_162:not(#\9):active::-webkit-slider-thumb {
|
|
399
442
|
background-color: var(--color-background-control-disabled-pwkvgd, #d1d5db);
|
|
400
443
|
border-color: var(--color-background-control-disabled-pwkvgd, #d1d5db);
|
|
401
444
|
box-shadow: none;
|
|
402
445
|
pointer-events: none;
|
|
403
446
|
}
|
|
404
|
-
.
|
|
405
|
-
.
|
|
406
|
-
.
|
|
447
|
+
.awsui_disabled_pcgz5_2nlcl_162:not(#\9)::-moz-range-thumb,
|
|
448
|
+
.awsui_disabled_pcgz5_2nlcl_162:not(#\9):hover::-moz-range-thumb,
|
|
449
|
+
.awsui_disabled_pcgz5_2nlcl_162:not(#\9):active::-moz-range-thumb {
|
|
407
450
|
background-color: var(--color-background-control-disabled-pwkvgd, #d1d5db);
|
|
408
451
|
border-color: var(--color-background-control-disabled-pwkvgd, #d1d5db);
|
|
409
452
|
box-shadow: none;
|
|
@@ -2,28 +2,30 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"root": "
|
|
6
|
-
"slider": "
|
|
7
|
-
"slider-track": "awsui_slider-
|
|
8
|
-
"slider-range": "awsui_slider-
|
|
9
|
-
"disabled": "
|
|
10
|
-
"error": "
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"labels
|
|
16
|
-
"labels-
|
|
17
|
-
"labels-
|
|
18
|
-
"labels-
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
5
|
+
"root": "awsui_root_pcgz5_2nlcl_103",
|
|
6
|
+
"slider": "awsui_slider_pcgz5_2nlcl_143",
|
|
7
|
+
"slider-track": "awsui_slider-track_pcgz5_2nlcl_147",
|
|
8
|
+
"slider-range": "awsui_slider-range_pcgz5_2nlcl_147",
|
|
9
|
+
"disabled": "awsui_disabled_pcgz5_2nlcl_162",
|
|
10
|
+
"error": "awsui_error_pcgz5_2nlcl_171",
|
|
11
|
+
"warning": "awsui_warning_pcgz5_2nlcl_174",
|
|
12
|
+
"active": "awsui_active_pcgz5_2nlcl_177",
|
|
13
|
+
"error-active": "awsui_error-active_pcgz5_2nlcl_180",
|
|
14
|
+
"warning-active": "awsui_warning-active_pcgz5_2nlcl_183",
|
|
15
|
+
"labels": "awsui_labels_pcgz5_2nlcl_190",
|
|
16
|
+
"labels-noref": "awsui_labels-noref_pcgz5_2nlcl_196",
|
|
17
|
+
"labels-reference": "awsui_labels-reference_pcgz5_2nlcl_199",
|
|
18
|
+
"labels-min": "awsui_labels-min_pcgz5_2nlcl_206",
|
|
19
|
+
"labels-max": "awsui_labels-max_pcgz5_2nlcl_212",
|
|
20
|
+
"labels-aria-description": "awsui_labels-aria-description_pcgz5_2nlcl_220",
|
|
21
|
+
"ticks": "awsui_ticks_pcgz5_2nlcl_238",
|
|
22
|
+
"ticks-wrapper": "awsui_ticks-wrapper_pcgz5_2nlcl_244",
|
|
23
|
+
"tick": "awsui_tick_pcgz5_2nlcl_238",
|
|
24
|
+
"middle": "awsui_middle_pcgz5_2nlcl_259",
|
|
25
|
+
"filled": "awsui_filled_pcgz5_2nlcl_262",
|
|
26
|
+
"tooltip-thumb": "awsui_tooltip-thumb_pcgz5_2nlcl_284",
|
|
27
|
+
"thumb": "awsui_thumb_pcgz5_2nlcl_292",
|
|
28
|
+
"min": "awsui_min_pcgz5_2nlcl_307",
|
|
29
|
+
"max": "awsui_max_pcgz5_2nlcl_310"
|
|
28
30
|
};
|
|
29
31
|
|
package/slider/tick-marks.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tick-marks.d.ts","sourceRoot":"","sources":["../../../src/slider/tick-marks.tsx"],"names":[],"mappings":";AAQA,MAAM,WAAW,gBAAgB;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D,IAAI,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;CAC9B;
|
|
1
|
+
{"version":3,"file":"tick-marks.d.ts","sourceRoot":"","sources":["../../../src/slider/tick-marks.tsx"],"names":[],"mappings":";AAQA,MAAM,WAAW,gBAAgB;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D,IAAI,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;CAC9B;AAiCD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,gBAAgB,eAmB9D"}
|
package/slider/tick-marks.js
CHANGED
|
@@ -6,7 +6,8 @@ import customCssProps from '../internal/generated/custom-css-properties/index.js
|
|
|
6
6
|
import styles from './styles.css.js';
|
|
7
7
|
import { getStepArray } from './utils.js';
|
|
8
8
|
function TickMark(props) {
|
|
9
|
-
const { hideFillLine, value, isActive, invalid, disabled, type, min, max, step } = props;
|
|
9
|
+
const { hideFillLine, value, isActive, invalid, warning, disabled, type, min, max, step } = props;
|
|
10
|
+
const showWarning = warning && !invalid;
|
|
10
11
|
const getType = () => {
|
|
11
12
|
if (type === 'min') {
|
|
12
13
|
return min;
|
|
@@ -20,7 +21,9 @@ function TickMark(props) {
|
|
|
20
21
|
[styles.filled]: !hideFillLine && value > getType(),
|
|
21
22
|
[styles.active]: !hideFillLine && isActive && value > getType(),
|
|
22
23
|
[styles.error]: invalid && !hideFillLine && value > getType(),
|
|
24
|
+
[styles.warning]: showWarning && !hideFillLine && value > getType(),
|
|
23
25
|
[styles['error-active']]: invalid && isActive && !hideFillLine && value > getType(),
|
|
26
|
+
[styles['warning-active']]: showWarning && isActive && !hideFillLine && value > getType(),
|
|
24
27
|
[styles.disabled]: disabled,
|
|
25
28
|
[styles.middle]: type === 'step',
|
|
26
29
|
}) }));
|
package/slider/tick-marks.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tick-marks.js","sourceRoot":"","sources":["../../../src/slider/tick-marks.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,cAAc,MAAM,sDAAsD,CAAC;AAClF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"tick-marks.js","sourceRoot":"","sources":["../../../src/slider/tick-marks.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,cAAc,MAAM,sDAAsD,CAAC;AAClF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAkB1C,SAAS,QAAQ,CAAC,KAA0B;IAC1C,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAElG,MAAM,WAAW,GAAG,OAAO,IAAI,CAAC,OAAO,CAAC;IAExC,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,IAAI,IAAI,KAAK,KAAK,EAAE;YAClB,OAAO,GAAG,CAAC;SACZ;QACD,IAAI,IAAI,KAAK,KAAK,EAAE;YAClB,OAAO,GAAG,CAAC;SACZ;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YAC3B,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,YAAY,IAAI,KAAK,GAAG,OAAO,EAAE;YACnD,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,YAAY,IAAI,QAAQ,IAAI,KAAK,GAAG,OAAO,EAAE;YAC/D,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,IAAI,CAAC,YAAY,IAAI,KAAK,GAAG,OAAO,EAAE;YAC7D,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,WAAW,IAAI,CAAC,YAAY,IAAI,KAAK,GAAG,OAAO,EAAE;YACnE,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,OAAO,IAAI,QAAQ,IAAI,CAAC,YAAY,IAAI,KAAK,GAAG,OAAO,EAAE;YACnF,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,WAAW,IAAI,QAAQ,IAAI,CAAC,YAAY,IAAI,KAAK,GAAG,OAAO,EAAE;YACzF,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,MAAM;SACjC,CAAC,GACF,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAuB;IAC7D,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAEjC,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;QAC3C,oBAAC,QAAQ,oBAAK,KAAK,IAAE,IAAI,EAAC,KAAK,IAAG;QAClC,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7B,KAAK,EAAE;gBACL,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;aACjE,IAEA,YAAY,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACnD,oBAAC,QAAQ,oBAAK,KAAK,IAAE,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,KAAK,EAAE,IAAI,CACtE,CAAC,CACE;QACN,oBAAC,QAAQ,oBAAK,KAAK,IAAE,IAAI,EAAC,KAAK,IAAG,CAC9B,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport customCssProps from '../internal/generated/custom-css-properties/index.js';\nimport styles from './styles.css.js';\nimport { getStepArray } from './utils.js';\n\nexport interface SliderTicksProps {\n hideFillLine?: boolean;\n value: number;\n isActive: boolean;\n invalid?: boolean;\n warning?: boolean;\n disabled?: boolean;\n min: number;\n max: number;\n step: number;\n}\n\nexport interface SliderTickMarkProps extends SliderTicksProps {\n type: 'min' | 'max' | 'step';\n}\n\nfunction TickMark(props: SliderTickMarkProps) {\n const { hideFillLine, value, isActive, invalid, warning, disabled, type, min, max, step } = props;\n\n const showWarning = warning && !invalid;\n\n const getType = () => {\n if (type === 'min') {\n return min;\n }\n if (type === 'max') {\n return max;\n }\n return step;\n };\n\n return (\n <div\n className={clsx(styles.tick, {\n [styles.filled]: !hideFillLine && value > getType(),\n [styles.active]: !hideFillLine && isActive && value > getType(),\n [styles.error]: invalid && !hideFillLine && value > getType(),\n [styles.warning]: showWarning && !hideFillLine && value > getType(),\n [styles['error-active']]: invalid && isActive && !hideFillLine && value > getType(),\n [styles['warning-active']]: showWarning && isActive && !hideFillLine && value > getType(),\n [styles.disabled]: disabled,\n [styles.middle]: type === 'step',\n })}\n />\n );\n}\n\nexport default function SliderTickMarks(props: SliderTicksProps) {\n const { min, max, step } = props;\n\n return (\n <div className={clsx(styles['ticks-wrapper'])}>\n <TickMark {...props} type=\"min\" />\n <div\n className={clsx(styles.ticks)}\n style={{\n [customCssProps.sliderTickCount]: Math.round((max - min) / step),\n }}\n >\n {getStepArray(step, [min, max]).map((step, index) => (\n <TickMark {...props} type=\"step\" step={step} key={`step-${index}`} />\n ))}\n </div>\n <TickMark {...props} type=\"max\" />\n </div>\n );\n}\n"]}
|
|
@@ -2,4 +2,5 @@ import React from 'react';
|
|
|
2
2
|
import { SplitPanelProps } from './interfaces';
|
|
3
3
|
export { SplitPanelProps };
|
|
4
4
|
export declare const SplitPanelImplementation: React.ForwardRefExoticComponent<SplitPanelProps & React.RefAttributes<HTMLElement>>;
|
|
5
|
+
export declare const createWidgetizedSplitPanel: (Loader?: React.ForwardRefExoticComponent<SplitPanelProps & React.RefAttributes<HTMLElement>> | undefined) => React.ForwardRefExoticComponent<SplitPanelProps & React.RefAttributes<HTMLElement>>;
|
|
5
6
|
//# sourceMappingURL=implementation.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/split-panel/implementation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAO5E,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/split-panel/implementation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAO5E,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAkB/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,eAAO,MAAM,wBAAwB,qFA6OpC,CAAC;AAEF,eAAO,MAAM,0BAA0B,mMAIZ,CAAC"}
|
|
@@ -19,6 +19,7 @@ import { SplitPanelContentSide } from './side';
|
|
|
19
19
|
import { SplitPanelContentBottom } from './bottom';
|
|
20
20
|
import { useInternalI18n } from '../i18n/context';
|
|
21
21
|
import globalVars from '../internal/styles/global-vars';
|
|
22
|
+
import { createWidgetizedForwardRef } from '../internal/widgets';
|
|
22
23
|
export const SplitPanelImplementation = React.forwardRef((_a, __internalRootRef) => {
|
|
23
24
|
var { header, children, hidePreferencesButton = false, closeBehavior = 'collapse', i18nStrings } = _a, restProps = __rest(_a, ["header", "children", "hidePreferencesButton", "closeBehavior", "i18nStrings"]);
|
|
24
25
|
const isRefresh = useVisualRefresh();
|
|
@@ -109,4 +110,5 @@ export const SplitPanelImplementation = React.forwardRef((_a, __internalRootRef)
|
|
|
109
110
|
setPreferencesOpen(false);
|
|
110
111
|
} }))))));
|
|
111
112
|
});
|
|
113
|
+
export const createWidgetizedSplitPanel = createWidgetizedForwardRef(SplitPanelImplementation);
|
|
112
114
|
//# sourceMappingURL=implementation.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/split-panel/implementation.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, { useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../button/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\n\nimport { SplitPanelProps } from './interfaces';\nimport ResizeHandler from './icons/resize-handler';\nimport PreferencesModal from './preferences-modal';\nimport { usePointerEvents } from '../app-layout/utils/use-pointer-events';\nimport { useKeyboardEvents } from '../app-layout/utils/use-keyboard-events';\nimport { SizeControlProps } from '../app-layout/utils/interfaces';\n\nimport styles from './styles.css.js';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { Transition } from '../internal/components/transition';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { SplitPanelContentSide } from './side';\nimport { SplitPanelContentBottom } from './bottom';\nimport { useInternalI18n } from '../i18n/context';\nimport globalVars from '../internal/styles/global-vars';\n\nexport { SplitPanelProps };\n\nexport const SplitPanelImplementation = React.forwardRef<HTMLElement, SplitPanelProps>(\n (\n { header, children, hidePreferencesButton = false, closeBehavior = 'collapse', i18nStrings, ...restProps },\n __internalRootRef\n ) => {\n const isRefresh = useVisualRefresh();\n\n const {\n position,\n topOffset,\n bottomOffset,\n rightOffset,\n contentWidthStyles,\n isOpen,\n isForcedPosition,\n onPreferencesChange,\n onResize,\n onToggle,\n size,\n relativeSize,\n setSplitPanelToggle,\n refs,\n } = useSplitPanelContext();\n const baseProps = getBaseProps(restProps);\n const i18n = useInternalI18n('split-panel');\n const [isPreferencesOpen, setPreferencesOpen] = useState<boolean>(false);\n\n const appLayoutMaxWidth = isRefresh && position === 'bottom' ? contentWidthStyles : undefined;\n\n const openButtonAriaLabel = i18n('i18nStrings.openButtonAriaLabel', i18nStrings?.openButtonAriaLabel);\n useEffect(() => {\n setSplitPanelToggle({ displayed: closeBehavior === 'collapse', ariaLabel: openButtonAriaLabel });\n }, [setSplitPanelToggle, openButtonAriaLabel, closeBehavior]);\n\n const splitPanelRefObject = useRef<HTMLDivElement>(null);\n\n const sizeControlProps: SizeControlProps = {\n position,\n panelRef: splitPanelRefObject,\n handleRef: refs.slider,\n onResize,\n };\n const onSliderPointerDown = usePointerEvents(sizeControlProps);\n const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n const contentStyle = {\n [globalVars.stickyVerticalTopOffset]: topOffset,\n [globalVars.stickyVerticalBottomOffset]: bottomOffset,\n };\n\n const panelHeaderId = useUniqueId('split-panel-header');\n\n const wrappedHeader = (\n <div className={styles.header} style={appLayoutMaxWidth}>\n <h2 className={styles['header-text']} id={panelHeaderId}>\n {header}\n </h2>\n <div className={styles['header-actions']}>\n {!hidePreferencesButton && isOpen && (\n <>\n <InternalButton\n className={styles['preferences-button']}\n iconName=\"settings\"\n variant=\"icon\"\n onClick={() => setPreferencesOpen(true)}\n formAction=\"none\"\n ariaLabel={i18n('i18nStrings.preferencesTitle', i18nStrings?.preferencesTitle)}\n ref={refs.preferences}\n />\n <span className={styles.divider} />\n </>\n )}\n\n {isOpen ? (\n <InternalButton\n className={styles['close-button']}\n iconName={\n isRefresh && closeBehavior === 'collapse'\n ? position === 'side'\n ? 'angle-right'\n : 'angle-down'\n : 'close'\n }\n variant=\"icon\"\n onClick={onToggle}\n formAction=\"none\"\n ariaLabel={i18n('i18nStrings.closeButtonAriaLabel', i18nStrings?.closeButtonAriaLabel)}\n ariaExpanded={isOpen}\n />\n ) : position === 'side' ? null : (\n <InternalButton\n className={styles['open-button']}\n iconName=\"angle-up\"\n variant=\"icon\"\n formAction=\"none\"\n ariaLabel={i18n('i18nStrings.openButtonAriaLabel', i18nStrings?.openButtonAriaLabel)}\n ref={refs.toggle}\n ariaExpanded={isOpen}\n />\n )}\n </div>\n </div>\n );\n\n const resizeHandle = (\n <div\n ref={refs.slider}\n role=\"slider\"\n tabIndex={0}\n aria-label={i18n('i18nStrings.resizeHandleAriaLabel', i18nStrings?.resizeHandleAriaLabel)}\n aria-valuemax={100}\n aria-valuemin={0}\n // Allows us to use the logical left/right keys to move the slider left/right,\n // but match aria keyboard behavior of using left/right to decrease/increase\n // the slider value.\n aria-valuenow={position === 'bottom' ? relativeSize : 100 - relativeSize}\n className={clsx(styles.slider, styles[`slider-${position}`])}\n onKeyDown={onKeyDown}\n onPointerDown={onSliderPointerDown}\n >\n <ResizeHandler className={clsx(styles['slider-icon'], styles[`slider-icon-${position}`])} />\n </div>\n );\n\n /*\n This effect forces the browser to recalculate the layout\n whenever the split panel might have moved.\n\n This is needed as a workaround for a bug in Safari, which does\n not automatically calculate the new position of the split panel\n _content_ when the split panel moves.\n */\n useLayoutEffect(() => {\n const root = splitPanelRefObject.current;\n\n if (root) {\n const property = 'transform';\n const temporaryValue = 'translateZ(0)';\n\n const valueBefore = root.style[property];\n root.style[property] = temporaryValue;\n\n // This line forces the browser to recalculate the layout\n void root.offsetHeight;\n\n root.style[property] = valueBefore;\n }\n }, [rightOffset, __internalRootRef]);\n\n const mergedRef = useMergeRefs(splitPanelRefObject, __internalRootRef);\n\n if (closeBehavior === 'hide' && !isOpen) {\n return <></>;\n }\n\n /**\n * The AppLayout factor moved the circular buttons out of the\n * SplitPanel and into the Tools component. This conditional\n * is still needed for the early return to prevent execution\n * of the following code.\n */\n if (isRefresh && !isOpen && position === 'side') {\n return <></>;\n }\n\n return (\n <Transition in={isOpen ?? false}>\n {(state, transitioningElementRef) => (\n <>\n {position === 'side' && (\n <SplitPanelContentSide\n style={contentStyle}\n resizeHandle={resizeHandle}\n baseProps={baseProps}\n isOpen={isOpen}\n splitPanelRef={mergedRef}\n cappedSize={size}\n onToggle={onToggle}\n openButtonAriaLabel={i18n('i18nStrings.openButtonAriaLabel', i18nStrings?.openButtonAriaLabel)}\n toggleRef={refs.toggle}\n header={wrappedHeader}\n panelHeaderId={panelHeaderId}\n >\n {children}\n </SplitPanelContentSide>\n )}\n\n {position === 'bottom' && (\n <SplitPanelContentBottom\n style={contentStyle}\n resizeHandle={resizeHandle}\n baseProps={baseProps}\n isOpen={isOpen}\n splitPanelRef={mergedRef}\n cappedSize={size}\n onToggle={onToggle}\n header={wrappedHeader}\n panelHeaderId={panelHeaderId}\n state={state}\n transitioningElementRef={transitioningElementRef}\n appLayoutMaxWidth={appLayoutMaxWidth}\n >\n {children}\n </SplitPanelContentBottom>\n )}\n {isPreferencesOpen && (\n <PreferencesModal\n visible={true}\n preferences={{ position }}\n disabledSidePosition={position === 'bottom' && isForcedPosition}\n isRefresh={isRefresh}\n i18nStrings={{\n header: i18n('i18nStrings.preferencesTitle', i18nStrings?.preferencesTitle),\n confirm: i18n('i18nStrings.preferencesConfirm', i18nStrings?.preferencesConfirm),\n cancel: i18n('i18nStrings.preferencesCancel', i18nStrings?.preferencesCancel),\n positionLabel: i18n('i18nStrings.preferencesPositionLabel', i18nStrings?.preferencesPositionLabel),\n positionDescription: i18n(\n 'i18nStrings.preferencesPositionDescription',\n i18nStrings?.preferencesPositionDescription\n ),\n positionBottom: i18n('i18nStrings.preferencesPositionBottom', i18nStrings?.preferencesPositionBottom),\n positionSide: i18n('i18nStrings.preferencesPositionSide', i18nStrings?.preferencesPositionSide),\n }}\n onConfirm={preferences => {\n onPreferencesChange({ ...preferences });\n setPreferencesOpen(false);\n }}\n onDismiss={() => {\n setPreferencesOpen(false);\n }}\n />\n )}\n </>\n )}\n </Transition>\n );\n }\n);\n"]}
|
|
1
|
+
{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/split-panel/implementation.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAG/E,OAAO,aAAa,MAAM,wBAAwB,CAAC;AACnD,OAAO,gBAAgB,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAG5E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,UAAU,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAC;AAIjE,MAAM,CAAC,MAAM,wBAAwB,GAAG,KAAK,CAAC,UAAU,CACtD,CACE,EAA0G,EAC1G,iBAAiB,EACjB,EAAE;QAFF,EAAE,MAAM,EAAE,QAAQ,EAAE,qBAAqB,GAAG,KAAK,EAAE,aAAa,GAAG,UAAU,EAAE,WAAW,OAAgB,EAAX,SAAS,cAAxG,+EAA0G,CAAF;IAGxG,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,WAAW,EACX,kBAAkB,EAClB,MAAM,EACN,gBAAgB,EAChB,mBAAmB,EACnB,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,mBAAmB,EACnB,IAAI,GACL,GAAG,oBAAoB,EAAE,CAAC;IAC3B,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,eAAe,CAAC,aAAa,CAAC,CAAC;IAC5C,MAAM,CAAC,iBAAiB,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAEzE,MAAM,iBAAiB,GAAG,SAAS,IAAI,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9F,MAAM,mBAAmB,GAAG,IAAI,CAAC,iCAAiC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mBAAmB,CAAC,CAAC;IACtG,SAAS,CAAC,GAAG,EAAE;QACb,mBAAmB,CAAC,EAAE,SAAS,EAAE,aAAa,KAAK,UAAU,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC,CAAC;IACnG,CAAC,EAAE,CAAC,mBAAmB,EAAE,mBAAmB,EAAE,aAAa,CAAC,CAAC,CAAC;IAE9D,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,MAAM,gBAAgB,GAAqB;QACzC,QAAQ;QACR,QAAQ,EAAE,mBAAmB;QAC7B,SAAS,EAAE,IAAI,CAAC,MAAM;QACtB,QAAQ;KACT,CAAC;IACF,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEtD,MAAM,YAAY,GAAG;QACnB,CAAC,UAAU,CAAC,uBAAuB,CAAC,EAAE,SAAS;QAC/C,CAAC,UAAU,CAAC,0BAA0B,CAAC,EAAE,YAAY;KACtD,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAAC,oBAAoB,CAAC,CAAC;IAExD,MAAM,aAAa,GAAG,CACpB,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,iBAAiB;QACrD,4BAAI,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,EAAE,EAAE,EAAE,aAAa,IACpD,MAAM,CACJ;QACL,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC;YACrC,CAAC,qBAAqB,IAAI,MAAM,IAAI,CACnC;gBACE,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC,EACvC,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC,EACvC,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,IAAI,CAAC,8BAA8B,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gBAAgB,CAAC,EAC9E,GAAG,EAAE,IAAI,CAAC,WAAW,GACrB;gBACF,8BAAM,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI,CAClC,CACJ;YAEA,MAAM,CAAC,CAAC,CAAC,CACR,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EACjC,QAAQ,EACN,SAAS,IAAI,aAAa,KAAK,UAAU;oBACvC,CAAC,CAAC,QAAQ,KAAK,MAAM;wBACnB,CAAC,CAAC,aAAa;wBACf,CAAC,CAAC,YAAY;oBAChB,CAAC,CAAC,OAAO,EAEb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,QAAQ,EACjB,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,IAAI,CAAC,kCAAkC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,oBAAoB,CAAC,EACtF,YAAY,EAAE,MAAM,GACpB,CACH,CAAC,CAAC,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC/B,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,EAChC,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,IAAI,CAAC,iCAAiC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mBAAmB,CAAC,EACpF,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,YAAY,EAAE,MAAM,GACpB,CACH,CACG,CACF,CACP,CAAC;IAEF,MAAM,YAAY,GAAG,CACnB,6BACE,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,gBACC,IAAI,CAAC,mCAAmC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,qBAAqB,CAAC,mBAC1E,GAAG,mBACH,CAAC,mBAID,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,GAAG,YAAY,EACxE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,QAAQ,EAAE,CAAC,CAAC,EAC5D,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,mBAAmB;QAElC,oBAAC,aAAa,IAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC,GAAI,CACxF,CACP,CAAC;IAEF;;;;;;;IAOA;IACA,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,IAAI,GAAG,mBAAmB,CAAC,OAAO,CAAC;QAEzC,IAAI,IAAI,EAAE;YACR,MAAM,QAAQ,GAAG,WAAW,CAAC;YAC7B,MAAM,cAAc,GAAG,eAAe,CAAC;YAEvC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;YACzC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,cAAc,CAAC;YAEtC,yDAAyD;YACzD,KAAK,IAAI,CAAC,YAAY,CAAC;YAEvB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,WAAW,CAAC;SACpC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAErC,MAAM,SAAS,GAAG,YAAY,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;IAEvE,IAAI,aAAa,KAAK,MAAM,IAAI,CAAC,MAAM,EAAE;QACvC,OAAO,yCAAK,CAAC;KACd;IAED;;;;;OAKG;IACH,IAAI,SAAS,IAAI,CAAC,MAAM,IAAI,QAAQ,KAAK,MAAM,EAAE;QAC/C,OAAO,yCAAK,CAAC;KACd;IAED,OAAO,CACL,oBAAC,UAAU,IAAC,EAAE,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,KAAK,IAC5B,CAAC,KAAK,EAAE,uBAAuB,EAAE,EAAE,CAAC,CACnC;QACG,QAAQ,KAAK,MAAM,IAAI,CACtB,oBAAC,qBAAqB,IACpB,KAAK,EAAE,YAAY,EACnB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,SAAS,EACxB,UAAU,EAAE,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,mBAAmB,EAAE,IAAI,CAAC,iCAAiC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mBAAmB,CAAC,EAC9F,SAAS,EAAE,IAAI,CAAC,MAAM,EACtB,MAAM,EAAE,aAAa,EACrB,aAAa,EAAE,aAAa,IAE3B,QAAQ,CACa,CACzB;QAEA,QAAQ,KAAK,QAAQ,IAAI,CACxB,oBAAC,uBAAuB,IACtB,KAAK,EAAE,YAAY,EACnB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,SAAS,EACxB,UAAU,EAAE,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,aAAa,EACrB,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,EACZ,uBAAuB,EAAE,uBAAuB,EAChD,iBAAiB,EAAE,iBAAiB,IAEnC,QAAQ,CACe,CAC3B;QACA,iBAAiB,IAAI,CACpB,oBAAC,gBAAgB,IACf,OAAO,EAAE,IAAI,EACb,WAAW,EAAE,EAAE,QAAQ,EAAE,EACzB,oBAAoB,EAAE,QAAQ,KAAK,QAAQ,IAAI,gBAAgB,EAC/D,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE;gBACX,MAAM,EAAE,IAAI,CAAC,8BAA8B,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gBAAgB,CAAC;gBAC3E,OAAO,EAAE,IAAI,CAAC,gCAAgC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,kBAAkB,CAAC;gBAChF,MAAM,EAAE,IAAI,CAAC,+BAA+B,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,iBAAiB,CAAC;gBAC7E,aAAa,EAAE,IAAI,CAAC,sCAAsC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,wBAAwB,CAAC;gBAClG,mBAAmB,EAAE,IAAI,CACvB,4CAA4C,EAC5C,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,8BAA8B,CAC5C;gBACD,cAAc,EAAE,IAAI,CAAC,uCAAuC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,yBAAyB,CAAC;gBACrG,YAAY,EAAE,IAAI,CAAC,qCAAqC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,uBAAuB,CAAC;aAChG,EACD,SAAS,EAAE,WAAW,CAAC,EAAE;gBACvB,mBAAmB,mBAAM,WAAW,EAAG,CAAC;gBACxC,kBAAkB,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC,EACD,SAAS,EAAE,GAAG,EAAE;gBACd,kBAAkB,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC,GACD,CACH,CACA,CACJ,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,0BAA0B,CAIlE,wBAAwB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../button/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\n\nimport { SplitPanelProps } from './interfaces';\nimport ResizeHandler from './icons/resize-handler';\nimport PreferencesModal from './preferences-modal';\nimport { usePointerEvents } from '../app-layout/utils/use-pointer-events';\nimport { useKeyboardEvents } from '../app-layout/utils/use-keyboard-events';\nimport { SizeControlProps } from '../app-layout/utils/interfaces';\n\nimport styles from './styles.css.js';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { Transition } from '../internal/components/transition';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { SplitPanelContentSide } from './side';\nimport { SplitPanelContentBottom } from './bottom';\nimport { useInternalI18n } from '../i18n/context';\nimport globalVars from '../internal/styles/global-vars';\nimport { createWidgetizedForwardRef } from '../internal/widgets';\n\nexport { SplitPanelProps };\n\nexport const SplitPanelImplementation = React.forwardRef<HTMLElement, SplitPanelProps>(\n (\n { header, children, hidePreferencesButton = false, closeBehavior = 'collapse', i18nStrings, ...restProps },\n __internalRootRef\n ) => {\n const isRefresh = useVisualRefresh();\n\n const {\n position,\n topOffset,\n bottomOffset,\n rightOffset,\n contentWidthStyles,\n isOpen,\n isForcedPosition,\n onPreferencesChange,\n onResize,\n onToggle,\n size,\n relativeSize,\n setSplitPanelToggle,\n refs,\n } = useSplitPanelContext();\n const baseProps = getBaseProps(restProps);\n const i18n = useInternalI18n('split-panel');\n const [isPreferencesOpen, setPreferencesOpen] = useState<boolean>(false);\n\n const appLayoutMaxWidth = isRefresh && position === 'bottom' ? contentWidthStyles : undefined;\n\n const openButtonAriaLabel = i18n('i18nStrings.openButtonAriaLabel', i18nStrings?.openButtonAriaLabel);\n useEffect(() => {\n setSplitPanelToggle({ displayed: closeBehavior === 'collapse', ariaLabel: openButtonAriaLabel });\n }, [setSplitPanelToggle, openButtonAriaLabel, closeBehavior]);\n\n const splitPanelRefObject = useRef<HTMLDivElement>(null);\n\n const sizeControlProps: SizeControlProps = {\n position,\n panelRef: splitPanelRefObject,\n handleRef: refs.slider,\n onResize,\n };\n const onSliderPointerDown = usePointerEvents(sizeControlProps);\n const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n const contentStyle = {\n [globalVars.stickyVerticalTopOffset]: topOffset,\n [globalVars.stickyVerticalBottomOffset]: bottomOffset,\n };\n\n const panelHeaderId = useUniqueId('split-panel-header');\n\n const wrappedHeader = (\n <div className={styles.header} style={appLayoutMaxWidth}>\n <h2 className={styles['header-text']} id={panelHeaderId}>\n {header}\n </h2>\n <div className={styles['header-actions']}>\n {!hidePreferencesButton && isOpen && (\n <>\n <InternalButton\n className={styles['preferences-button']}\n iconName=\"settings\"\n variant=\"icon\"\n onClick={() => setPreferencesOpen(true)}\n formAction=\"none\"\n ariaLabel={i18n('i18nStrings.preferencesTitle', i18nStrings?.preferencesTitle)}\n ref={refs.preferences}\n />\n <span className={styles.divider} />\n </>\n )}\n\n {isOpen ? (\n <InternalButton\n className={styles['close-button']}\n iconName={\n isRefresh && closeBehavior === 'collapse'\n ? position === 'side'\n ? 'angle-right'\n : 'angle-down'\n : 'close'\n }\n variant=\"icon\"\n onClick={onToggle}\n formAction=\"none\"\n ariaLabel={i18n('i18nStrings.closeButtonAriaLabel', i18nStrings?.closeButtonAriaLabel)}\n ariaExpanded={isOpen}\n />\n ) : position === 'side' ? null : (\n <InternalButton\n className={styles['open-button']}\n iconName=\"angle-up\"\n variant=\"icon\"\n formAction=\"none\"\n ariaLabel={i18n('i18nStrings.openButtonAriaLabel', i18nStrings?.openButtonAriaLabel)}\n ref={refs.toggle}\n ariaExpanded={isOpen}\n />\n )}\n </div>\n </div>\n );\n\n const resizeHandle = (\n <div\n ref={refs.slider}\n role=\"slider\"\n tabIndex={0}\n aria-label={i18n('i18nStrings.resizeHandleAriaLabel', i18nStrings?.resizeHandleAriaLabel)}\n aria-valuemax={100}\n aria-valuemin={0}\n // Allows us to use the logical left/right keys to move the slider left/right,\n // but match aria keyboard behavior of using left/right to decrease/increase\n // the slider value.\n aria-valuenow={position === 'bottom' ? relativeSize : 100 - relativeSize}\n className={clsx(styles.slider, styles[`slider-${position}`])}\n onKeyDown={onKeyDown}\n onPointerDown={onSliderPointerDown}\n >\n <ResizeHandler className={clsx(styles['slider-icon'], styles[`slider-icon-${position}`])} />\n </div>\n );\n\n /*\n This effect forces the browser to recalculate the layout\n whenever the split panel might have moved.\n\n This is needed as a workaround for a bug in Safari, which does\n not automatically calculate the new position of the split panel\n _content_ when the split panel moves.\n */\n useLayoutEffect(() => {\n const root = splitPanelRefObject.current;\n\n if (root) {\n const property = 'transform';\n const temporaryValue = 'translateZ(0)';\n\n const valueBefore = root.style[property];\n root.style[property] = temporaryValue;\n\n // This line forces the browser to recalculate the layout\n void root.offsetHeight;\n\n root.style[property] = valueBefore;\n }\n }, [rightOffset, __internalRootRef]);\n\n const mergedRef = useMergeRefs(splitPanelRefObject, __internalRootRef);\n\n if (closeBehavior === 'hide' && !isOpen) {\n return <></>;\n }\n\n /**\n * The AppLayout factor moved the circular buttons out of the\n * SplitPanel and into the Tools component. This conditional\n * is still needed for the early return to prevent execution\n * of the following code.\n */\n if (isRefresh && !isOpen && position === 'side') {\n return <></>;\n }\n\n return (\n <Transition in={isOpen ?? false}>\n {(state, transitioningElementRef) => (\n <>\n {position === 'side' && (\n <SplitPanelContentSide\n style={contentStyle}\n resizeHandle={resizeHandle}\n baseProps={baseProps}\n isOpen={isOpen}\n splitPanelRef={mergedRef}\n cappedSize={size}\n onToggle={onToggle}\n openButtonAriaLabel={i18n('i18nStrings.openButtonAriaLabel', i18nStrings?.openButtonAriaLabel)}\n toggleRef={refs.toggle}\n header={wrappedHeader}\n panelHeaderId={panelHeaderId}\n >\n {children}\n </SplitPanelContentSide>\n )}\n\n {position === 'bottom' && (\n <SplitPanelContentBottom\n style={contentStyle}\n resizeHandle={resizeHandle}\n baseProps={baseProps}\n isOpen={isOpen}\n splitPanelRef={mergedRef}\n cappedSize={size}\n onToggle={onToggle}\n header={wrappedHeader}\n panelHeaderId={panelHeaderId}\n state={state}\n transitioningElementRef={transitioningElementRef}\n appLayoutMaxWidth={appLayoutMaxWidth}\n >\n {children}\n </SplitPanelContentBottom>\n )}\n {isPreferencesOpen && (\n <PreferencesModal\n visible={true}\n preferences={{ position }}\n disabledSidePosition={position === 'bottom' && isForcedPosition}\n isRefresh={isRefresh}\n i18nStrings={{\n header: i18n('i18nStrings.preferencesTitle', i18nStrings?.preferencesTitle),\n confirm: i18n('i18nStrings.preferencesConfirm', i18nStrings?.preferencesConfirm),\n cancel: i18n('i18nStrings.preferencesCancel', i18nStrings?.preferencesCancel),\n positionLabel: i18n('i18nStrings.preferencesPositionLabel', i18nStrings?.preferencesPositionLabel),\n positionDescription: i18n(\n 'i18nStrings.preferencesPositionDescription',\n i18nStrings?.preferencesPositionDescription\n ),\n positionBottom: i18n('i18nStrings.preferencesPositionBottom', i18nStrings?.preferencesPositionBottom),\n positionSide: i18n('i18nStrings.preferencesPositionSide', i18nStrings?.preferencesPositionSide),\n }}\n onConfirm={preferences => {\n onPreferencesChange({ ...preferences });\n setPreferencesOpen(false);\n }}\n onDismiss={() => {\n setPreferencesOpen(false);\n }}\n />\n )}\n </>\n )}\n </Transition>\n );\n }\n);\n\nexport const createWidgetizedSplitPanel = createWidgetizedForwardRef<\n SplitPanelProps,\n HTMLElement,\n typeof SplitPanelImplementation\n>(SplitPanelImplementation);\n"]}
|