@cloudscape-design/components-themeable 3.0.1380 → 3.0.1382
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/expandable-section/styles.scss +14 -5
- package/lib/internal/scss/internal/components/radio-button/motion.scss +34 -0
- package/lib/internal/scss/internal/components/radio-button/styles.scss +23 -18
- package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
- package/lib/internal/scss/popover/motion.scss +69 -0
- package/lib/internal/scss/radio-button/styles.scss +7 -0
- package/lib/internal/scss/toggle/styles.scss +25 -17
- package/lib/internal/template/i18n/utils/i18n-formatter.d.ts.map +1 -1
- package/lib/internal/template/i18n/utils/i18n-formatter.js +36 -5
- package/lib/internal/template/i18n/utils/i18n-formatter.js.map +1 -1
- package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
- package/lib/internal/template/internal/components/radio-button/index.d.ts +4 -0
- package/lib/internal/template/internal/components/radio-button/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/radio-button/index.js +10 -4
- package/lib/internal/template/internal/components/radio-button/index.js.map +1 -1
- package/lib/internal/template/internal/components/radio-button/styles.css.js +7 -7
- package/lib/internal/template/internal/components/radio-button/styles.scoped.css +40 -33
- package/lib/internal/template/internal/components/radio-button/styles.selectors.js +7 -7
- package/lib/internal/template/internal/environment.js +2 -2
- package/lib/internal/template/internal/environment.json +2 -2
- package/lib/internal/template/internal/generated/theming/index.cjs +2 -0
- package/lib/internal/template/internal/generated/theming/index.d.cts +9 -0
- package/lib/internal/template/internal/generated/theming/index.d.ts +9 -0
- package/lib/internal/template/internal/generated/theming/index.js +2 -0
- package/lib/internal/template/popover/styles.css.js +58 -58
- package/lib/internal/template/popover/styles.scoped.css +96 -91
- package/lib/internal/template/popover/styles.selectors.js +58 -58
- package/lib/internal/template/radio-button/styles.css.js +1 -1
- package/lib/internal/template/radio-button/styles.scoped.css +34 -1
- package/lib/internal/template/radio-button/styles.selectors.js +1 -1
- package/lib/internal/template/toggle/internal.d.ts +6 -0
- package/lib/internal/template/toggle/internal.d.ts.map +1 -1
- package/lib/internal/template/toggle/internal.js +3 -3
- package/lib/internal/template/toggle/internal.js.map +1 -1
- package/lib/internal/template/toggle/styles.css.js +10 -10
- package/lib/internal/template/toggle/styles.scoped.css +73 -36
- package/lib/internal/template/toggle/styles.selectors.js +10 -10
- package/package.json +1 -1
|
@@ -382,10 +382,13 @@ $nav-caret-pad-one-theme: 12px; // 24px minus the one-theme x-small (12px) icon
|
|
|
382
382
|
// manages its own inline overflow (e.g. a table) would stretch the box out of the container.
|
|
383
383
|
min-inline-size: 0;
|
|
384
384
|
opacity: 0;
|
|
385
|
+
transform: translateY(-4px);
|
|
385
386
|
|
|
386
|
-
// HIDE (collapsed state): quick opacity collapse, no delay.
|
|
387
|
+
// HIDE (collapsed state): quick opacity collapse and slide back up, no delay.
|
|
387
388
|
@include styles.with-motion {
|
|
388
|
-
transition:
|
|
389
|
+
transition:
|
|
390
|
+
opacity $reveal-exit-motion,
|
|
391
|
+
transform $reveal-exit-motion;
|
|
389
392
|
}
|
|
390
393
|
}
|
|
391
394
|
}
|
|
@@ -394,11 +397,14 @@ $nav-caret-pad-one-theme: 12px; // 24px minus the one-theme x-small (12px) icon
|
|
|
394
397
|
/* this comment keeps the class in the style sheet */
|
|
395
398
|
@include theming.one-theme-only {
|
|
396
399
|
opacity: 1;
|
|
400
|
+
transform: translateY(0);
|
|
397
401
|
|
|
398
|
-
// SHOW (expanded state): opacity fades in
|
|
399
|
-
// opened, creating a perceptible
|
|
402
|
+
// SHOW (expanded state): opacity fades in and content slides down into place AFTER
|
|
403
|
+
// height has partially opened, creating a perceptible reveal in the opened space.
|
|
400
404
|
@include styles.with-motion {
|
|
401
|
-
transition:
|
|
405
|
+
transition:
|
|
406
|
+
opacity $reveal-enter-delayed-motion,
|
|
407
|
+
transform $reveal-enter-delayed-motion;
|
|
402
408
|
}
|
|
403
409
|
}
|
|
404
410
|
}
|
|
@@ -407,6 +413,9 @@ $nav-caret-pad-one-theme: 12px; // 24px minus the one-theme x-small (12px) icon
|
|
|
407
413
|
/* this comment keeps the class in the style sheet */
|
|
408
414
|
@include theming.one-theme-only {
|
|
409
415
|
overflow-y: visible;
|
|
416
|
+
// Keeping translateY(0) here would leave this box as a stacking context, so a dropdown
|
|
417
|
+
// opened from the content would paint underneath whatever follows the section.
|
|
418
|
+
transform: none;
|
|
410
419
|
}
|
|
411
420
|
}
|
|
412
421
|
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
|
|
4
|
+
@use '../../styles/utils/theming' as theming;
|
|
5
|
+
|
|
6
|
+
// Scopes @content to themes that opted in to $expressive-motion-themes in theming.scss.
|
|
7
|
+
@mixin radio-expressive-with-motion {
|
|
8
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
9
|
+
@include theming.expressive-motion-only(':not(.awsui-motion-disabled):not(.awsui-mode-entering)') {
|
|
10
|
+
@content;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// Include inside the fill circle rule. Grows the ring inward by widening its
|
|
16
|
+
// stroke from a thin line to the resting width.
|
|
17
|
+
@mixin select {
|
|
18
|
+
&.styled-circle-checked[data-awsui-motion-ready] {
|
|
19
|
+
@include radio-expressive-with-motion {
|
|
20
|
+
animation: awsui-radio-select 250ms cubic-bezier(0.2, 0, 0, 1);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@if theming.has-expressive-motion() {
|
|
24
|
+
@keyframes awsui-radio-select {
|
|
25
|
+
from {
|
|
26
|
+
stroke-width: 6px;
|
|
27
|
+
}
|
|
28
|
+
to {
|
|
29
|
+
stroke-width: 30px;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
@@ -7,38 +7,42 @@
|
|
|
7
7
|
@use '../../styles/tokens' as awsui;
|
|
8
8
|
@use '../../styles/foundation' as foundation;
|
|
9
9
|
@use '../../generated/custom-css-properties/index.scss' as custom-props;
|
|
10
|
+
@use '../../styles/style-api' as style-api;
|
|
11
|
+
@use './motion' as motion;
|
|
10
12
|
|
|
11
13
|
$radio-size: awsui.$size-control;
|
|
12
14
|
|
|
15
|
+
$_control-props: style-api.combine((color, background-color, border-color), style-api.$focus-ring);
|
|
16
|
+
$_control-tokens: style-api.resolve($_control-props, carrier);
|
|
17
|
+
|
|
13
18
|
.radio-control {
|
|
19
|
+
@include style-api.carriers($_control-tokens);
|
|
14
20
|
@include styles.make-control-size($radio-size);
|
|
15
21
|
}
|
|
16
22
|
|
|
17
23
|
.outline {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
$
|
|
24
|
-
$border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-circular-focus-ring),
|
|
25
|
-
$box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
|
|
24
|
+
@include style-api.focus-highlight(
|
|
25
|
+
$gutter-block: 2px,
|
|
26
|
+
$gutter-inline: 2px,
|
|
27
|
+
$radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-circular-focus-ring),
|
|
28
|
+
$width: var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width),
|
|
29
|
+
$color: var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused)
|
|
26
30
|
);
|
|
27
31
|
}
|
|
28
32
|
|
|
29
33
|
.styled-circle-border {
|
|
30
|
-
stroke: awsui.$color-border-control-default;
|
|
31
|
-
fill: awsui.$color-background-control-default;
|
|
34
|
+
stroke: style-api.value($_control-tokens, border-color, awsui.$color-border-control-default);
|
|
35
|
+
fill: style-api.value($_control-tokens, background-color, awsui.$color-background-control-default);
|
|
32
36
|
&.styled-circle-disabled,
|
|
33
37
|
&.styled-circle-readonly {
|
|
34
|
-
fill: awsui.$color-background-control-disabled;
|
|
35
|
-
stroke: awsui.$color-background-control-disabled;
|
|
38
|
+
fill: style-api.value($_control-tokens, background-color, awsui.$color-background-control-disabled);
|
|
39
|
+
stroke: style-api.value($_control-tokens, border-color, awsui.$color-background-control-disabled);
|
|
36
40
|
}
|
|
37
41
|
}
|
|
38
42
|
|
|
39
43
|
.styled-circle-fill {
|
|
40
|
-
stroke: awsui.$color-background-control-checked;
|
|
41
|
-
fill: awsui.$color-foreground-control-default;
|
|
44
|
+
stroke: style-api.value($_control-tokens, background-color, awsui.$color-background-control-checked);
|
|
45
|
+
fill: style-api.value($_control-tokens, color, awsui.$color-foreground-control-default);
|
|
42
46
|
opacity: 0;
|
|
43
47
|
@include styles.with-motion {
|
|
44
48
|
transition: opacity awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick;
|
|
@@ -47,11 +51,12 @@ $radio-size: awsui.$size-control;
|
|
|
47
51
|
opacity: 1;
|
|
48
52
|
}
|
|
49
53
|
&.styled-circle-disabled {
|
|
50
|
-
fill: awsui.$color-foreground-control-disabled;
|
|
51
|
-
stroke: awsui.$color-background-control-disabled;
|
|
54
|
+
fill: style-api.value($_control-tokens, color, awsui.$color-foreground-control-disabled);
|
|
55
|
+
stroke: style-api.value($_control-tokens, background-color, awsui.$color-background-control-disabled);
|
|
52
56
|
}
|
|
53
57
|
&.styled-circle-readonly {
|
|
54
|
-
fill: awsui.$color-foreground-control-read-only;
|
|
55
|
-
stroke: awsui.$color-background-control-disabled;
|
|
58
|
+
fill: style-api.value($_control-tokens, color, awsui.$color-foreground-control-read-only);
|
|
59
|
+
stroke: style-api.value($_control-tokens, background-color, awsui.$color-background-control-disabled);
|
|
56
60
|
}
|
|
61
|
+
@include motion.select;
|
|
57
62
|
}
|
|
@@ -3,6 +3,34 @@
|
|
|
3
3
|
|
|
4
4
|
@use '../internal/styles' as styles;
|
|
5
5
|
@use '../internal/styles/tokens' as tokens;
|
|
6
|
+
@use '../internal/styles/utils/theming' as theming;
|
|
7
|
+
|
|
8
|
+
// Scopes @content to themes that opted in to $expressive-motion-themes in theming.scss.
|
|
9
|
+
@mixin popover-expressive-with-motion {
|
|
10
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
11
|
+
@include theming.expressive-motion-only(':not(.awsui-motion-disabled):not(.awsui-mode-entering)') {
|
|
12
|
+
@content;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
$settle-travel: 8px;
|
|
18
|
+
|
|
19
|
+
@mixin settle-keyframes($name, $from) {
|
|
20
|
+
@keyframes #{$name} {
|
|
21
|
+
from {
|
|
22
|
+
opacity: 0;
|
|
23
|
+
transform: $from;
|
|
24
|
+
}
|
|
25
|
+
60% {
|
|
26
|
+
opacity: 1;
|
|
27
|
+
}
|
|
28
|
+
to {
|
|
29
|
+
opacity: 1;
|
|
30
|
+
transform: none;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
6
34
|
|
|
7
35
|
.container {
|
|
8
36
|
@include styles.with-motion {
|
|
@@ -16,4 +44,45 @@
|
|
|
16
44
|
@include styles.animation-fade-in;
|
|
17
45
|
}
|
|
18
46
|
}
|
|
47
|
+
|
|
48
|
+
// The popover travels out from its trigger as it appears.
|
|
49
|
+
@include popover-expressive-with-motion {
|
|
50
|
+
animation: awsui-popover-settle-down 250ms cubic-bezier(0.3, 0, 0.2, 1);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&:has(.container-arrow-position-top-left, .container-arrow-position-top-center, .container-arrow-position-top-right) {
|
|
54
|
+
@include popover-expressive-with-motion {
|
|
55
|
+
animation-name: awsui-popover-settle-up;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
// Keyframes translate physically, so the horizontal ones swap in RTL.
|
|
60
|
+
&:has(.container-arrow-position-right-top, .container-arrow-position-right-bottom) {
|
|
61
|
+
@include popover-expressive-with-motion {
|
|
62
|
+
animation-name: awsui-popover-settle-end;
|
|
63
|
+
}
|
|
64
|
+
@include styles.with-direction('rtl') {
|
|
65
|
+
@include popover-expressive-with-motion {
|
|
66
|
+
animation-name: awsui-popover-settle-start;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&:has(.container-arrow-position-left-top, .container-arrow-position-left-bottom) {
|
|
72
|
+
@include popover-expressive-with-motion {
|
|
73
|
+
animation-name: awsui-popover-settle-start;
|
|
74
|
+
}
|
|
75
|
+
@include styles.with-direction('rtl') {
|
|
76
|
+
@include popover-expressive-with-motion {
|
|
77
|
+
animation-name: awsui-popover-settle-end;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@if theming.has-expressive-motion() {
|
|
84
|
+
@include settle-keyframes(awsui-popover-settle-down, translateY(-$settle-travel));
|
|
85
|
+
@include settle-keyframes(awsui-popover-settle-up, translateY($settle-travel));
|
|
86
|
+
@include settle-keyframes(awsui-popover-settle-end, translateX(-$settle-travel));
|
|
87
|
+
@include settle-keyframes(awsui-popover-settle-start, translateX($settle-travel));
|
|
19
88
|
}
|
|
@@ -4,6 +4,13 @@
|
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
@use '../internal/styles' as styles;
|
|
7
|
+
@use '../internal/styles/style-api' as style-api;
|
|
8
|
+
|
|
9
|
+
// The control slot is painted by the shared internal radio button, which reads the same token map.
|
|
10
|
+
$control-props: style-api.combine((color, background-color, border-color), style-api.$focus-ring);
|
|
11
|
+
$control-tokens: style-api.resolve($control-props, carrier);
|
|
12
|
+
@include style-api.register($control-tokens);
|
|
13
|
+
@include style-api.docs('control', $control-tokens);
|
|
7
14
|
|
|
8
15
|
.radio-button {
|
|
9
16
|
@include styles.styles-reset;
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
@use '../internal/styles/tokens' as awsui;
|
|
8
8
|
@use '../internal/styles/foundation' as foundation;
|
|
9
9
|
@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
|
|
10
|
-
@use '
|
|
10
|
+
@use '../internal/styles/style-api' as style-api;
|
|
11
11
|
|
|
12
12
|
$toggle-width: 2.4 * styles.$base-size;
|
|
13
13
|
$toggle-height: 1.6 * styles.$base-size;
|
|
@@ -15,44 +15,52 @@ $handle-size: 1.2 * styles.$base-size;
|
|
|
15
15
|
$handle-offset: 0.2 * styles.$base-size;
|
|
16
16
|
$shadow-color: awsui.$color-shadow-toggle-handle;
|
|
17
17
|
|
|
18
|
+
$control-props: style-api.combine((color, background-color), style-api.$focus-ring);
|
|
19
|
+
$control-tokens: style-api.resolve($control-props, carrier);
|
|
20
|
+
$label-tokens: style-api.resolve((color), public);
|
|
21
|
+
$description-tokens: style-api.resolve((color), public);
|
|
22
|
+
@include style-api.register($control-tokens, $label-tokens, $description-tokens);
|
|
23
|
+
@include style-api.docs('control', $control-tokens);
|
|
24
|
+
@include style-api.docs('label', $label-tokens);
|
|
25
|
+
@include style-api.docs('description', $description-tokens);
|
|
26
|
+
|
|
18
27
|
.root {
|
|
19
28
|
@include styles.styles-reset;
|
|
20
29
|
display: flex;
|
|
21
30
|
}
|
|
22
31
|
|
|
23
32
|
.outline {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
$
|
|
30
|
-
$border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
|
|
31
|
-
$box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
|
|
33
|
+
@include style-api.focus-highlight(
|
|
34
|
+
$gutter-block: 2px,
|
|
35
|
+
$gutter-inline: 2px,
|
|
36
|
+
$radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
|
|
37
|
+
$width: var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width),
|
|
38
|
+
$color: var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused)
|
|
32
39
|
);
|
|
33
40
|
}
|
|
34
41
|
|
|
35
42
|
.toggle-control {
|
|
43
|
+
@include style-api.carriers($control-tokens);
|
|
36
44
|
// this is a "drawing" element, and therefore we want it (and children) to retain
|
|
37
45
|
// background colors in high-contrast/forced-color mode
|
|
38
46
|
forced-color-adjust: none;
|
|
39
47
|
@include styles.make-control-size($toggle-height, $toggle-width);
|
|
40
|
-
background: awsui.$color-background-toggle-default;
|
|
48
|
+
background: style-api.value($control-tokens, background-color, awsui.$color-background-toggle-default);
|
|
41
49
|
border-start-start-radius: 0.8 * styles.$base-size;
|
|
42
50
|
border-start-end-radius: 0.8 * styles.$base-size;
|
|
43
51
|
border-end-start-radius: 0.8 * styles.$base-size;
|
|
44
52
|
border-end-end-radius: 0.8 * styles.$base-size;
|
|
45
53
|
&-checked {
|
|
46
|
-
background: awsui.$color-background-control-checked;
|
|
54
|
+
background: style-api.value($control-tokens, background-color, awsui.$color-background-control-checked);
|
|
47
55
|
}
|
|
48
56
|
&-disabled {
|
|
49
|
-
background: awsui.$color-background-control-disabled;
|
|
57
|
+
background: style-api.value($control-tokens, background-color, awsui.$color-background-control-disabled);
|
|
50
58
|
&.toggle-control-checked {
|
|
51
|
-
background: awsui.$color-background-toggle-checked-disabled;
|
|
59
|
+
background: style-api.value($control-tokens, background-color, awsui.$color-background-toggle-checked-disabled);
|
|
52
60
|
}
|
|
53
61
|
}
|
|
54
62
|
&-readonly {
|
|
55
|
-
background: awsui.$color-background-control-disabled;
|
|
63
|
+
background: style-api.value($control-tokens, background-color, awsui.$color-background-control-disabled);
|
|
56
64
|
}
|
|
57
65
|
}
|
|
58
66
|
|
|
@@ -63,7 +71,7 @@ $shadow-color: awsui.$color-shadow-toggle-handle;
|
|
|
63
71
|
border-start-end-radius: 0.6 * styles.$base-size;
|
|
64
72
|
border-end-start-radius: 0.6 * styles.$base-size;
|
|
65
73
|
border-end-end-radius: 0.6 * styles.$base-size;
|
|
66
|
-
background: awsui.$color-foreground-control-default;
|
|
74
|
+
background: style-api.value($control-tokens, color, awsui.$color-foreground-control-default);
|
|
67
75
|
box-shadow: 1px 1px $shadow-color;
|
|
68
76
|
inline-size: $handle-size;
|
|
69
77
|
block-size: $handle-size;
|
|
@@ -88,14 +96,14 @@ $shadow-color: awsui.$color-shadow-toggle-handle;
|
|
|
88
96
|
}
|
|
89
97
|
|
|
90
98
|
&-disabled {
|
|
91
|
-
background: awsui.$color-foreground-control-disabled;
|
|
99
|
+
background: style-api.value($control-tokens, color, awsui.$color-foreground-control-disabled);
|
|
92
100
|
box-shadow: none;
|
|
93
101
|
}
|
|
94
102
|
|
|
95
103
|
&-readonly:not(&-disabled) {
|
|
96
104
|
box-shadow: none;
|
|
97
105
|
&.toggle-handle-checked {
|
|
98
|
-
background: awsui.$color-foreground-control-read-only;
|
|
106
|
+
background: style-api.value($control-tokens, color, awsui.$color-foreground-control-read-only);
|
|
99
107
|
}
|
|
100
108
|
}
|
|
101
109
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"i18n-formatter.d.ts","sourceRoot":"","sources":["../../../../src/i18n/utils/i18n-formatter.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;
|
|
1
|
+
{"version":3,"file":"i18n-formatter.d.ts","sourceRoot":"","sources":["../../../../src/i18n/utils/i18n-formatter.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAK1E,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAI3C;;;;;GAKG;AACH,MAAM,WAAW,YAAY;IAC3B,CAAC,SAAS,EAAE,MAAM,GAAG;QACnB,CAAC,MAAM,EAAE,MAAM,GAAG;YAChB,CAAC,SAAS,EAAE,MAAM,GAAG;gBACnB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,oBAAoB,EAAE,CAAC;aAChD,CAAC;SACH,CAAC;KACH,CAAC;CACH;AAED;;;;GAIG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,SAAS,CAAe;IAMhC,OAAO,CAAC,qBAAqB,CAA+C;gBAEhE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY;IAKlD,MAAM,CAAC,WAAW,EAAE,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EACtE,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,MAAM,EACjB,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,WAAW,EACrB,aAAa,CAAC,EAAE,aAAa,CAAC,WAAW,EAAE,YAAY,CAAC,GACvD,WAAW;CAsEf"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import IntlMessageFormat from 'intl-messageformat';
|
|
4
|
+
import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
|
|
4
5
|
import { getMatchableLocales } from './locales';
|
|
5
6
|
import { normalizeMessages } from './messages';
|
|
6
7
|
/**
|
|
@@ -29,6 +30,10 @@ export class I18nFormatter {
|
|
|
29
30
|
const cacheKey = `${namespace}.${component}.${key}`;
|
|
30
31
|
let intlMessageFormat;
|
|
31
32
|
const cachedFormatter = this._localeFormatterCache.get(cacheKey);
|
|
33
|
+
// A null entry means this message already failed to parse; don't retry.
|
|
34
|
+
if (cachedFormatter === null) {
|
|
35
|
+
return provided;
|
|
36
|
+
}
|
|
32
37
|
if (cachedFormatter) {
|
|
33
38
|
// If an IntlMessageFormat instance was cached for this locale, just use that.
|
|
34
39
|
intlMessageFormat = cachedFormatter;
|
|
@@ -49,14 +54,40 @@ export class I18nFormatter {
|
|
|
49
54
|
return provided;
|
|
50
55
|
}
|
|
51
56
|
// Lazily create an IntlMessageFormat object for this key.
|
|
52
|
-
|
|
53
|
-
|
|
57
|
+
// Invalid ICU syntax falls back to the provided value instead of crashing the render.
|
|
58
|
+
try {
|
|
59
|
+
intlMessageFormat = new IntlMessageFormat(message, this._locale);
|
|
60
|
+
this._localeFormatterCache.set(cacheKey, intlMessageFormat);
|
|
61
|
+
}
|
|
62
|
+
catch (error) {
|
|
63
|
+
warnOnce('I18nProvider', `Malformed message "${cacheKey}" for locale "${this._locale}": ${error}`);
|
|
64
|
+
this._localeFormatterCache.set(cacheKey, null);
|
|
65
|
+
return provided;
|
|
66
|
+
}
|
|
54
67
|
}
|
|
68
|
+
// Formatting can throw at runtime (e.g. a message/component contract mismatch),
|
|
69
|
+
// so degrade gracefully instead of crashing the consumer's page.
|
|
55
70
|
if (customHandler) {
|
|
56
|
-
|
|
71
|
+
// The returned formatFn may be invoked later during render, so guard it. It must return a string.
|
|
72
|
+
return customHandler(args => {
|
|
73
|
+
try {
|
|
74
|
+
return intlMessageFormat.format(args);
|
|
75
|
+
}
|
|
76
|
+
catch (error) {
|
|
77
|
+
warnOnce('I18nProvider', `Failed to format message "${cacheKey}" for locale "${this._locale}": ${error}`);
|
|
78
|
+
return '';
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
try {
|
|
83
|
+
// Assuming `ReturnValue extends string` since a customHandler wasn't provided.
|
|
84
|
+
return intlMessageFormat.format();
|
|
85
|
+
}
|
|
86
|
+
catch (error) {
|
|
87
|
+
warnOnce('I18nProvider', `Failed to format message "${cacheKey}" for locale "${this._locale}": ${error}`);
|
|
88
|
+
// Fall back so the component's own default string logic takes over.
|
|
89
|
+
return provided;
|
|
57
90
|
}
|
|
58
|
-
// Assuming `ReturnValue extends string` since a customHandler wasn't provided.
|
|
59
|
-
return intlMessageFormat.format();
|
|
60
91
|
}
|
|
61
92
|
}
|
|
62
93
|
//# sourceMappingURL=i18n-formatter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"i18n-formatter.js","sourceRoot":"","sources":["../../../../src/i18n/utils/i18n-formatter.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAGtC,OAAO,iBAAiB,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"i18n-formatter.js","sourceRoot":"","sources":["../../../../src/i18n/utils/i18n-formatter.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { MessageFormatElement } from '@formatjs/icu-messageformat-parser';\nimport IntlMessageFormat from 'intl-messageformat';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { CustomHandler } from '../context';\nimport { getMatchableLocales } from './locales';\nimport { normalizeMessages } from './messages';\n\n/**\n * The expected shape of the fully resolved messages object.\n * Typescript ensures any static imports are properly typed, but since this\n * depends on types from formatjs, it should not be included in any files that\n * need to support older versions of TypeScript (3.7 and up).\n */\nexport interface I18nMessages {\n [namespace: string]: {\n [locale: string]: {\n [component: string]: {\n [key: string]: string | MessageFormatElement[];\n };\n };\n };\n}\n\n/**\n * A stateful container for formatting internal strings. Caches formatters\n * where possible; a new instance must be created if locale or messages may\n * have changed.\n */\nexport class I18nFormatter {\n private _locale: string;\n private _messages: I18nMessages;\n\n // Create a per-render cache of messages and IntlMessageFormat instances.\n // Not memoizing it allows us to reset the cache when the component rerenders\n // with potentially different locale or messages. We expect this component to\n // be placed above AppLayout and therefore rerender very infrequently.\n private _localeFormatterCache = new Map<string, IntlMessageFormat | null>();\n\n constructor(locale: string, messages: I18nMessages) {\n this._locale = locale.toLowerCase();\n this._messages = normalizeMessages([messages]);\n }\n\n format<ReturnValue, FormatFnArgs extends Record<string, string | number>>(\n namespace: string,\n component: string,\n key: string,\n provided: ReturnValue,\n customHandler?: CustomHandler<ReturnValue, FormatFnArgs>\n ): ReturnValue {\n // A general rule in this library is that undefined is basically\n // treated as \"not provided\". So even if a user explicitly provides an\n // undefined value, it will default to i18n provider values.\n if (provided !== undefined) {\n return provided;\n }\n\n const cacheKey = `${namespace}.${component}.${key}`;\n let intlMessageFormat: IntlMessageFormat;\n\n const cachedFormatter = this._localeFormatterCache.get(cacheKey);\n // A null entry means this message already failed to parse; don't retry.\n if (cachedFormatter === null) {\n return provided;\n }\n if (cachedFormatter) {\n // If an IntlMessageFormat instance was cached for this locale, just use that.\n intlMessageFormat = cachedFormatter;\n } else {\n // Widen the locale string (e.g. en-GB -> en) until we find a locale\n // that contains the message we need.\n let message: string | MessageFormatElement[] | undefined;\n const matchableLocales = getMatchableLocales(this._locale);\n for (const matchableLocale of matchableLocales) {\n message = this._messages?.[namespace]?.[matchableLocale]?.[component]?.[key];\n if (message !== undefined) {\n break;\n }\n }\n\n // If a message wasn't found, exit early.\n if (message === undefined) {\n return provided;\n }\n\n // Lazily create an IntlMessageFormat object for this key.\n // Invalid ICU syntax falls back to the provided value instead of crashing the render.\n try {\n intlMessageFormat = new IntlMessageFormat(message, this._locale);\n this._localeFormatterCache.set(cacheKey, intlMessageFormat);\n } catch (error) {\n warnOnce('I18nProvider', `Malformed message \"${cacheKey}\" for locale \"${this._locale}\": ${error}`);\n this._localeFormatterCache.set(cacheKey, null);\n return provided;\n }\n }\n\n // Formatting can throw at runtime (e.g. a message/component contract mismatch),\n // so degrade gracefully instead of crashing the consumer's page.\n if (customHandler) {\n // The returned formatFn may be invoked later during render, so guard it. It must return a string.\n return customHandler(args => {\n try {\n return intlMessageFormat.format(args) as string;\n } catch (error) {\n warnOnce('I18nProvider', `Failed to format message \"${cacheKey}\" for locale \"${this._locale}\": ${error}`);\n return '';\n }\n });\n }\n try {\n // Assuming `ReturnValue extends string` since a customHandler wasn't provided.\n return intlMessageFormat.format() as ReturnValue;\n } catch (error) {\n warnOnce('I18nProvider', `Failed to format message \"${cacheKey}\" for locale \"${this._locale}\": ${error}`);\n // Fall back so the component's own default string logic takes over.\n return provided;\n }\n }\n}\n"]}
|
|
@@ -3,8 +3,12 @@ import { RadioButtonProps } from '../../../radio-button/interfaces';
|
|
|
3
3
|
import { InternalBaseComponentProps } from '../../hooks/use-base-component';
|
|
4
4
|
import { SkipWarnings } from '../../utils/with-native-attributes';
|
|
5
5
|
export interface InternalRadioButtonProps extends RadioButtonProps, InternalBaseComponentProps {
|
|
6
|
+
styleClassNames?: StyleClassNames;
|
|
6
7
|
__skipNativeAttributesWarnings?: SkipWarnings;
|
|
7
8
|
}
|
|
9
|
+
interface StyleClassNames {
|
|
10
|
+
control?: string;
|
|
11
|
+
}
|
|
8
12
|
declare const _default: React.ForwardRefExoticComponent<InternalRadioButtonProps & React.RefAttributes<HTMLInputElement>>;
|
|
9
13
|
export default _default;
|
|
10
14
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/radio-button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/radio-button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAOhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAIpE,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAA6B,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAMxF,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB,EAAE,0BAA0B;IAC5F,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,8BAA8B,CAAC,EAAE,YAAY,CAAC;CAC/C;AAGD,UAAU,eAAe;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;;AAED,wBA2GG"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
-
import React, { useRef } from 'react';
|
|
3
|
+
import React, { useRef, useState } from 'react';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
|
|
6
6
|
import { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';
|
|
@@ -12,12 +12,18 @@ import WithNativeAttributes from '../../utils/with-native-attributes';
|
|
|
12
12
|
import { getAbstractSwitchStyles, getInnerCircleStyle, getOuterCircleStyle } from './style';
|
|
13
13
|
import styles from './styles.css.js';
|
|
14
14
|
import testUtilStyles from './test-classes/styles.css.js';
|
|
15
|
-
export default React.forwardRef(function RadioButton({ name, children, value, checked, ariaLabel, ariaLabelledby, ariaDescribedby, description, disabled, controlId, readOnly, className, style, nativeInputAttributes, onSelect, __skipNativeAttributesWarnings, ...rest }, ref) {
|
|
15
|
+
export default React.forwardRef(function RadioButton({ name, children, value, checked, ariaLabel, ariaLabelledby, ariaDescribedby, description, disabled, controlId, readOnly, className, style, styleClassNames, nativeInputAttributes, onSelect, __skipNativeAttributesWarnings, ...rest }, ref) {
|
|
16
16
|
const radioButtonRef = useRef(null);
|
|
17
17
|
const mergedRefs = useMergeRefs(radioButtonRef, ref);
|
|
18
18
|
const { tabIndex } = useSingleTabStopNavigation(radioButtonRef);
|
|
19
19
|
const baseProps = getBaseProps(rest);
|
|
20
|
-
|
|
20
|
+
// The select animation only plays once the state has changed since mount.
|
|
21
|
+
const [initialChecked] = useState(!!checked);
|
|
22
|
+
const [hasChanged, setHasChanged] = useState(false);
|
|
23
|
+
if (!hasChanged && !!checked !== initialChecked) {
|
|
24
|
+
setHasChanged(true);
|
|
25
|
+
}
|
|
26
|
+
return (React.createElement(AbstractSwitch, { ...baseProps, className: clsx(testUtilStyles.root, className), controlClassName: clsx(styleClassNames === null || styleClassNames === void 0 ? void 0 : styleClassNames.control, styles['radio-control']), outlineClassName: styles.outline, label: children, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, description: description, disabled: disabled, readOnly: readOnly, controlId: controlId, style: getAbstractSwitchStyles(style, checked, disabled, readOnly), __internalRootRef: rest.__internalRootRef, ...copyAnalyticsMetadataAttribute(rest), nativeControl: nativeControlProps => (React.createElement(WithNativeAttributes, { ...nativeControlProps, tag: "input", componentName: "RadioButton", nativeAttributes: nativeInputAttributes, skipWarnings: __skipNativeAttributesWarnings, tabIndex: tabIndex, type: "radio", ref: mergedRefs, name: name, value: value, checked: checked, "aria-disabled": readOnly && !disabled ? 'true' : undefined,
|
|
21
27
|
// empty handler to suppress React controllability warning
|
|
22
28
|
onChange: () => { } })), onClick: () => {
|
|
23
29
|
var _a;
|
|
@@ -34,6 +40,6 @@ export default React.forwardRef(function RadioButton({ name, children, value, ch
|
|
|
34
40
|
[styles['styled-circle-disabled']]: disabled,
|
|
35
41
|
[styles['styled-circle-checked']]: checked,
|
|
36
42
|
[styles['styled-circle-readonly']]: readOnly,
|
|
37
|
-
}), strokeWidth: 30, cx: 50, cy: 50, r: 35, style: getInnerCircleStyle(style, checked, disabled, readOnly) })) }));
|
|
43
|
+
}), "data-awsui-motion-ready": hasChanged ? '' : undefined, strokeWidth: 30, cx: 50, cy: 50, r: 35, style: getInnerCircleStyle(style, checked, disabled, readOnly) })) }));
|
|
38
44
|
});
|
|
39
45
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/radio-button/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/radio-button/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\nimport { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { RadioButtonProps } from '../../../radio-button/interfaces';\nimport { getBaseProps } from '../../base-component';\nimport AbstractSwitch from '../../components/abstract-switch';\nimport { fireNonCancelableEvent } from '../../events';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component';\nimport WithNativeAttributes, { SkipWarnings } from '../../utils/with-native-attributes';\nimport { getAbstractSwitchStyles, getInnerCircleStyle, getOuterCircleStyle } from './style';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\nexport interface InternalRadioButtonProps extends RadioButtonProps, InternalBaseComponentProps {\n styleClassNames?: StyleClassNames;\n __skipNativeAttributesWarnings?: SkipWarnings;\n}\n\n// Style API v2\ninterface StyleClassNames {\n control?: string;\n}\n\nexport default React.forwardRef(function RadioButton(\n {\n name,\n children,\n value,\n checked,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n description,\n disabled,\n controlId,\n readOnly,\n className,\n style,\n styleClassNames,\n nativeInputAttributes,\n onSelect,\n __skipNativeAttributesWarnings,\n ...rest\n }: InternalRadioButtonProps,\n ref: React.Ref<HTMLInputElement>\n) {\n const radioButtonRef = useRef<HTMLInputElement>(null);\n const mergedRefs = useMergeRefs(radioButtonRef, ref);\n\n const { tabIndex } = useSingleTabStopNavigation(radioButtonRef);\n const baseProps = getBaseProps(rest);\n\n // The select animation only plays once the state has changed since mount.\n const [initialChecked] = useState(!!checked);\n const [hasChanged, setHasChanged] = useState(false);\n if (!hasChanged && !!checked !== initialChecked) {\n setHasChanged(true);\n }\n\n return (\n <AbstractSwitch\n {...baseProps}\n className={clsx(testUtilStyles.root, className)}\n controlClassName={clsx(styleClassNames?.control, styles['radio-control'])}\n outlineClassName={styles.outline}\n label={children}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n ariaDescribedby={ariaDescribedby}\n description={description}\n disabled={disabled}\n readOnly={readOnly}\n controlId={controlId}\n style={getAbstractSwitchStyles(style, checked, disabled, readOnly)}\n __internalRootRef={rest.__internalRootRef}\n {...copyAnalyticsMetadataAttribute(rest)}\n nativeControl={nativeControlProps => (\n <WithNativeAttributes<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>\n {...nativeControlProps}\n tag=\"input\"\n componentName=\"RadioButton\"\n nativeAttributes={nativeInputAttributes}\n skipWarnings={__skipNativeAttributesWarnings}\n tabIndex={tabIndex}\n type=\"radio\"\n ref={mergedRefs}\n name={name}\n value={value}\n checked={checked}\n aria-disabled={readOnly && !disabled ? 'true' : undefined}\n // empty handler to suppress React controllability warning\n onChange={() => {}}\n />\n )}\n onClick={() => {\n radioButtonRef.current?.focus();\n if (!checked) {\n fireNonCancelableEvent(onSelect);\n }\n }}\n styledControl={\n <svg viewBox=\"0 0 100 100\" focusable=\"false\" aria-hidden=\"true\">\n <circle\n className={clsx(styles['styled-circle-border'], {\n [styles['styled-circle-disabled']]: disabled,\n [styles['styled-circle-readonly']]: readOnly,\n })}\n strokeWidth={6.25}\n cx={50}\n cy={50}\n r={46}\n style={getOuterCircleStyle(style, checked, disabled, readOnly)}\n />\n <circle\n className={clsx(styles['styled-circle-fill'], {\n [styles['styled-circle-disabled']]: disabled,\n [styles['styled-circle-checked']]: checked,\n [styles['styled-circle-readonly']]: readOnly,\n })}\n data-awsui-motion-ready={hasChanged ? '' : undefined}\n strokeWidth={30}\n cx={50}\n cy={50}\n r={35}\n style={getInnerCircleStyle(style, checked, disabled, readOnly)}\n />\n </svg>\n }\n />\n );\n});\n"]}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"radio-control": "awsui_radio-
|
|
5
|
-
"outline": "
|
|
6
|
-
"styled-circle-border": "awsui_styled-circle-
|
|
7
|
-
"styled-circle-disabled": "awsui_styled-circle-
|
|
8
|
-
"styled-circle-readonly": "awsui_styled-circle-
|
|
9
|
-
"styled-circle-fill": "awsui_styled-circle-
|
|
10
|
-
"styled-circle-checked": "awsui_styled-circle-
|
|
4
|
+
"radio-control": "awsui_radio-control_1v1hk_1uyuu_9",
|
|
5
|
+
"outline": "awsui_outline_1v1hk_1uyuu_25",
|
|
6
|
+
"styled-circle-border": "awsui_styled-circle-border_1v1hk_1uyuu_47",
|
|
7
|
+
"styled-circle-disabled": "awsui_styled-circle-disabled_1v1hk_1uyuu_51",
|
|
8
|
+
"styled-circle-readonly": "awsui_styled-circle-readonly_1v1hk_1uyuu_51",
|
|
9
|
+
"styled-circle-fill": "awsui_styled-circle-fill_1v1hk_1uyuu_56",
|
|
10
|
+
"styled-circle-checked": "awsui_styled-circle-checked_1v1hk_1uyuu_72"
|
|
11
11
|
};
|
|
12
12
|
|