@cloudscape-design/components 3.0.904 → 3.0.906
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/icon/generated/icons.d.ts +2 -0
- package/icon/generated/icons.d.ts.map +1 -1
- package/icon/generated/icons.js +4 -0
- package/icon/generated/icons.js.map +1 -1
- package/icon/interfaces.d.ts +1 -1
- package/icon/interfaces.d.ts.map +1 -1
- package/icon/interfaces.js.map +1 -1
- package/icon/styles.css.js +39 -38
- package/icon/styles.scoped.css +85 -83
- package/icon/styles.selectors.js +39 -38
- package/internal/base-component/styles.scoped.css +21 -14
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/generated/styles/tokens.js +3 -3
- package/internal/generated/theming/index.cjs +35 -35
- package/internal/generated/theming/index.js +35 -35
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/segmented-control/internal-segmented-control.d.ts.map +1 -1
- package/segmented-control/internal-segmented-control.js +5 -1
- package/segmented-control/internal-segmented-control.js.map +1 -1
- package/segmented-control/segment.d.ts.map +1 -1
- package/segmented-control/segment.js +3 -1
- package/segmented-control/segment.js.map +1 -1
- package/segmented-control/styles.css.js +16 -15
- package/segmented-control/styles.scoped.css +104 -81
- package/segmented-control/styles.selectors.js +16 -15
- package/test-utils/tsconfig.tsbuildinfo +1 -1
|
@@ -1054,8 +1054,8 @@ module.exports.preset = {
|
|
|
1054
1054
|
"dark": "{colorBackgroundButtonNormalDisabled}"
|
|
1055
1055
|
},
|
|
1056
1056
|
"colorBackgroundSegmentHover": {
|
|
1057
|
-
"light": "{
|
|
1058
|
-
"dark": "{
|
|
1057
|
+
"light": "{colorBackgroundButtonNormalHover}",
|
|
1058
|
+
"dark": "{colorBackgroundButtonNormalHover}"
|
|
1059
1059
|
},
|
|
1060
1060
|
"colorBackgroundSliderHandleDefault": {
|
|
1061
1061
|
"light": "{colorBlue600}",
|
|
@@ -1746,8 +1746,8 @@ module.exports.preset = {
|
|
|
1746
1746
|
"dark": "{colorGrey300}"
|
|
1747
1747
|
},
|
|
1748
1748
|
"colorTextSegmentHover": {
|
|
1749
|
-
"light": "{
|
|
1750
|
-
"dark": "{
|
|
1749
|
+
"light": "{colorTextButtonNormalHover}",
|
|
1750
|
+
"dark": "{colorTextButtonNormalHover}"
|
|
1751
1751
|
},
|
|
1752
1752
|
"colorTextSmall": {
|
|
1753
1753
|
"light": "{colorGrey550}",
|
|
@@ -2299,8 +2299,8 @@ module.exports.preset = {
|
|
|
2299
2299
|
"compact": "{spaceScaledL}"
|
|
2300
2300
|
},
|
|
2301
2301
|
"spaceSegmentedControlFocusOutlineGutter": {
|
|
2302
|
-
"comfortable": "
|
|
2303
|
-
"compact": "
|
|
2302
|
+
"comfortable": "6px",
|
|
2303
|
+
"compact": "6px"
|
|
2304
2304
|
},
|
|
2305
2305
|
"spaceTabsContentTop": {
|
|
2306
2306
|
"comfortable": "{spaceScaledS}",
|
|
@@ -2769,8 +2769,8 @@ module.exports.preset = {
|
|
|
2769
2769
|
"compact": "{spaceScaledL}"
|
|
2770
2770
|
},
|
|
2771
2771
|
"spaceSegmentedControlFocusOutlineGutter": {
|
|
2772
|
-
"comfortable": "
|
|
2773
|
-
"compact": "
|
|
2772
|
+
"comfortable": "6px",
|
|
2773
|
+
"compact": "6px"
|
|
2774
2774
|
},
|
|
2775
2775
|
"spaceTabsContentTop": {
|
|
2776
2776
|
"comfortable": "{spaceScaledS}",
|
|
@@ -3267,8 +3267,8 @@ module.exports.preset = {
|
|
|
3267
3267
|
"dark": "{colorBackgroundButtonNormalDisabled}"
|
|
3268
3268
|
},
|
|
3269
3269
|
"colorBackgroundSegmentHover": {
|
|
3270
|
-
"light": "{
|
|
3271
|
-
"dark": "{
|
|
3270
|
+
"light": "{colorBackgroundButtonNormalHover}",
|
|
3271
|
+
"dark": "{colorBackgroundButtonNormalHover}"
|
|
3272
3272
|
},
|
|
3273
3273
|
"colorBackgroundSliderHandleDefault": {
|
|
3274
3274
|
"light": "{colorBlue500}",
|
|
@@ -3959,8 +3959,8 @@ module.exports.preset = {
|
|
|
3959
3959
|
"dark": "{colorGrey300}"
|
|
3960
3960
|
},
|
|
3961
3961
|
"colorTextSegmentHover": {
|
|
3962
|
-
"light": "{
|
|
3963
|
-
"dark": "{
|
|
3962
|
+
"light": "{colorTextButtonNormalHover}",
|
|
3963
|
+
"dark": "{colorTextButtonNormalHover}"
|
|
3964
3964
|
},
|
|
3965
3965
|
"colorTextSmall": {
|
|
3966
3966
|
"light": "{colorGrey450}",
|
|
@@ -4389,8 +4389,8 @@ module.exports.preset = {
|
|
|
4389
4389
|
"dark": "{colorGrey900}"
|
|
4390
4390
|
},
|
|
4391
4391
|
"colorBackgroundSegmentHover": {
|
|
4392
|
-
"light": "{
|
|
4393
|
-
"dark": "{
|
|
4392
|
+
"light": "{colorBackgroundButtonNormalHover}",
|
|
4393
|
+
"dark": "{colorBackgroundButtonNormalHover}"
|
|
4394
4394
|
},
|
|
4395
4395
|
"colorBackgroundSliderHandleDefault": {
|
|
4396
4396
|
"light": "{colorBlue500}",
|
|
@@ -5081,8 +5081,8 @@ module.exports.preset = {
|
|
|
5081
5081
|
"dark": "{colorGrey300}"
|
|
5082
5082
|
},
|
|
5083
5083
|
"colorTextSegmentHover": {
|
|
5084
|
-
"light": "{
|
|
5085
|
-
"dark": "{
|
|
5084
|
+
"light": "{colorTextButtonNormalHover}",
|
|
5085
|
+
"dark": "{colorTextButtonNormalHover}"
|
|
5086
5086
|
},
|
|
5087
5087
|
"colorTextSmall": {
|
|
5088
5088
|
"light": "{colorGrey450}",
|
|
@@ -5443,8 +5443,8 @@ module.exports.preset = {
|
|
|
5443
5443
|
"dark": "{colorBackgroundButtonNormalDisabled}"
|
|
5444
5444
|
},
|
|
5445
5445
|
"colorBackgroundSegmentHover": {
|
|
5446
|
-
"light": "{
|
|
5447
|
-
"dark": "{
|
|
5446
|
+
"light": "{colorBackgroundButtonNormalHover}",
|
|
5447
|
+
"dark": "{colorBackgroundButtonNormalHover}"
|
|
5448
5448
|
},
|
|
5449
5449
|
"colorBackgroundSliderHandleDefault": {
|
|
5450
5450
|
"light": "{colorBlue600}",
|
|
@@ -6135,8 +6135,8 @@ module.exports.preset = {
|
|
|
6135
6135
|
"dark": "{colorGrey300}"
|
|
6136
6136
|
},
|
|
6137
6137
|
"colorTextSegmentHover": {
|
|
6138
|
-
"light": "{
|
|
6139
|
-
"dark": "{
|
|
6138
|
+
"light": "{colorTextButtonNormalHover}",
|
|
6139
|
+
"dark": "{colorTextButtonNormalHover}"
|
|
6140
6140
|
},
|
|
6141
6141
|
"colorTextSmall": {
|
|
6142
6142
|
"light": "{colorGrey550}",
|
|
@@ -6497,8 +6497,8 @@ module.exports.preset = {
|
|
|
6497
6497
|
"dark": "{colorBackgroundButtonNormalDisabled}"
|
|
6498
6498
|
},
|
|
6499
6499
|
"colorBackgroundSegmentHover": {
|
|
6500
|
-
"light": "{
|
|
6501
|
-
"dark": "{
|
|
6500
|
+
"light": "{colorBackgroundButtonNormalHover}",
|
|
6501
|
+
"dark": "{colorBackgroundButtonNormalHover}"
|
|
6502
6502
|
},
|
|
6503
6503
|
"colorBackgroundSliderHandleDefault": {
|
|
6504
6504
|
"light": "{colorBlue600}",
|
|
@@ -7189,8 +7189,8 @@ module.exports.preset = {
|
|
|
7189
7189
|
"dark": "{colorGrey300}"
|
|
7190
7190
|
},
|
|
7191
7191
|
"colorTextSegmentHover": {
|
|
7192
|
-
"light": "{
|
|
7193
|
-
"dark": "{
|
|
7192
|
+
"light": "{colorTextButtonNormalHover}",
|
|
7193
|
+
"dark": "{colorTextButtonNormalHover}"
|
|
7194
7194
|
},
|
|
7195
7195
|
"colorTextSmall": {
|
|
7196
7196
|
"light": "{colorGrey550}",
|
|
@@ -7551,8 +7551,8 @@ module.exports.preset = {
|
|
|
7551
7551
|
"dark": "{colorBackgroundButtonNormalDisabled}"
|
|
7552
7552
|
},
|
|
7553
7553
|
"colorBackgroundSegmentHover": {
|
|
7554
|
-
"light": "{
|
|
7555
|
-
"dark": "{
|
|
7554
|
+
"light": "{colorBackgroundButtonNormalHover}",
|
|
7555
|
+
"dark": "{colorBackgroundButtonNormalHover}"
|
|
7556
7556
|
},
|
|
7557
7557
|
"colorBackgroundSliderHandleDefault": {
|
|
7558
7558
|
"light": "{colorBlue600}",
|
|
@@ -8243,8 +8243,8 @@ module.exports.preset = {
|
|
|
8243
8243
|
"dark": "{colorGrey300}"
|
|
8244
8244
|
},
|
|
8245
8245
|
"colorTextSegmentHover": {
|
|
8246
|
-
"light": "{
|
|
8247
|
-
"dark": "{
|
|
8246
|
+
"light": "{colorTextButtonNormalHover}",
|
|
8247
|
+
"dark": "{colorTextButtonNormalHover}"
|
|
8248
8248
|
},
|
|
8249
8249
|
"colorTextSmall": {
|
|
8250
8250
|
"light": "{colorGrey550}",
|
|
@@ -8607,8 +8607,8 @@ module.exports.preset = {
|
|
|
8607
8607
|
"dark": "{colorBackgroundButtonNormalDisabled}"
|
|
8608
8608
|
},
|
|
8609
8609
|
"colorBackgroundSegmentHover": {
|
|
8610
|
-
"light": "{
|
|
8611
|
-
"dark": "{
|
|
8610
|
+
"light": "{colorBackgroundButtonNormalHover}",
|
|
8611
|
+
"dark": "{colorBackgroundButtonNormalHover}"
|
|
8612
8612
|
},
|
|
8613
8613
|
"colorBackgroundSliderHandleDefault": {
|
|
8614
8614
|
"light": "{colorBlue500}",
|
|
@@ -9299,8 +9299,8 @@ module.exports.preset = {
|
|
|
9299
9299
|
"dark": "{colorGrey300}"
|
|
9300
9300
|
},
|
|
9301
9301
|
"colorTextSegmentHover": {
|
|
9302
|
-
"light": "{
|
|
9303
|
-
"dark": "{
|
|
9302
|
+
"light": "{colorTextButtonNormalHover}",
|
|
9303
|
+
"dark": "{colorTextButtonNormalHover}"
|
|
9304
9304
|
},
|
|
9305
9305
|
"colorTextSmall": {
|
|
9306
9306
|
"light": "{colorGrey450}",
|
|
@@ -11639,7 +11639,7 @@ module.exports.preset = {
|
|
|
11639
11639
|
"colorBackgroundSegmentActive": "--color-background-segment-active-bkvyiy",
|
|
11640
11640
|
"colorBackgroundSegmentDefault": "--color-background-segment-default-voaiuw",
|
|
11641
11641
|
"colorBackgroundSegmentDisabled": "--color-background-segment-disabled-9tsgp1",
|
|
11642
|
-
"colorBackgroundSegmentHover": "--color-background-segment-hover-
|
|
11642
|
+
"colorBackgroundSegmentHover": "--color-background-segment-hover-jancts",
|
|
11643
11643
|
"colorBackgroundSliderHandleDefault": "--color-background-slider-handle-default-94lnn1",
|
|
11644
11644
|
"colorBackgroundSliderHandleActive": "--color-background-slider-handle-active-7w7xg0",
|
|
11645
11645
|
"colorBackgroundSliderTrack": "--color-background-slider-track-uhckut",
|
|
@@ -11812,7 +11812,7 @@ module.exports.preset = {
|
|
|
11812
11812
|
"colorTextPaginationPageNumberDefault": "--color-text-pagination-page-number-default-s25kr0",
|
|
11813
11813
|
"colorTextSegmentActive": "--color-text-segment-active-fc6owc",
|
|
11814
11814
|
"colorTextSegmentDefault": "--color-text-segment-default-iib3us",
|
|
11815
|
-
"colorTextSegmentHover": "--color-text-segment-hover-
|
|
11815
|
+
"colorTextSegmentHover": "--color-text-segment-hover-yckzgd",
|
|
11816
11816
|
"colorTextSmall": "--color-text-small-nzfntg",
|
|
11817
11817
|
"colorTextStatusError": "--color-text-status-error-5676bj",
|
|
11818
11818
|
"colorTextStatusInactive": "--color-text-status-inactive-5megna",
|
|
@@ -12017,7 +12017,7 @@ module.exports.preset = {
|
|
|
12017
12017
|
"spacePanelSideRight": "--space-panel-side-right-xofg51",
|
|
12018
12018
|
"spacePanelSplitTop": "--space-panel-split-top-q1pux4",
|
|
12019
12019
|
"spacePanelSplitBottom": "--space-panel-split-bottom-qwdduf",
|
|
12020
|
-
"spaceSegmentedControlFocusOutlineGutter": "--space-segmented-control-focus-outline-gutter-
|
|
12020
|
+
"spaceSegmentedControlFocusOutlineGutter": "--space-segmented-control-focus-outline-gutter-ublqj7",
|
|
12021
12021
|
"spaceTabsContentTop": "--space-tabs-content-top-dedu0k",
|
|
12022
12022
|
"spaceTabsFocusOutlineGutter": "--space-tabs-focus-outline-gutter-xm37ly",
|
|
12023
12023
|
"spaceTableContentBottom": "--space-table-content-bottom-9yr834",
|
|
@@ -1054,8 +1054,8 @@ export var preset = {
|
|
|
1054
1054
|
"dark": "{colorBackgroundButtonNormalDisabled}"
|
|
1055
1055
|
},
|
|
1056
1056
|
"colorBackgroundSegmentHover": {
|
|
1057
|
-
"light": "{
|
|
1058
|
-
"dark": "{
|
|
1057
|
+
"light": "{colorBackgroundButtonNormalHover}",
|
|
1058
|
+
"dark": "{colorBackgroundButtonNormalHover}"
|
|
1059
1059
|
},
|
|
1060
1060
|
"colorBackgroundSliderHandleDefault": {
|
|
1061
1061
|
"light": "{colorBlue600}",
|
|
@@ -1746,8 +1746,8 @@ export var preset = {
|
|
|
1746
1746
|
"dark": "{colorGrey300}"
|
|
1747
1747
|
},
|
|
1748
1748
|
"colorTextSegmentHover": {
|
|
1749
|
-
"light": "{
|
|
1750
|
-
"dark": "{
|
|
1749
|
+
"light": "{colorTextButtonNormalHover}",
|
|
1750
|
+
"dark": "{colorTextButtonNormalHover}"
|
|
1751
1751
|
},
|
|
1752
1752
|
"colorTextSmall": {
|
|
1753
1753
|
"light": "{colorGrey550}",
|
|
@@ -2299,8 +2299,8 @@ export var preset = {
|
|
|
2299
2299
|
"compact": "{spaceScaledL}"
|
|
2300
2300
|
},
|
|
2301
2301
|
"spaceSegmentedControlFocusOutlineGutter": {
|
|
2302
|
-
"comfortable": "
|
|
2303
|
-
"compact": "
|
|
2302
|
+
"comfortable": "6px",
|
|
2303
|
+
"compact": "6px"
|
|
2304
2304
|
},
|
|
2305
2305
|
"spaceTabsContentTop": {
|
|
2306
2306
|
"comfortable": "{spaceScaledS}",
|
|
@@ -2769,8 +2769,8 @@ export var preset = {
|
|
|
2769
2769
|
"compact": "{spaceScaledL}"
|
|
2770
2770
|
},
|
|
2771
2771
|
"spaceSegmentedControlFocusOutlineGutter": {
|
|
2772
|
-
"comfortable": "
|
|
2773
|
-
"compact": "
|
|
2772
|
+
"comfortable": "6px",
|
|
2773
|
+
"compact": "6px"
|
|
2774
2774
|
},
|
|
2775
2775
|
"spaceTabsContentTop": {
|
|
2776
2776
|
"comfortable": "{spaceScaledS}",
|
|
@@ -3267,8 +3267,8 @@ export var preset = {
|
|
|
3267
3267
|
"dark": "{colorBackgroundButtonNormalDisabled}"
|
|
3268
3268
|
},
|
|
3269
3269
|
"colorBackgroundSegmentHover": {
|
|
3270
|
-
"light": "{
|
|
3271
|
-
"dark": "{
|
|
3270
|
+
"light": "{colorBackgroundButtonNormalHover}",
|
|
3271
|
+
"dark": "{colorBackgroundButtonNormalHover}"
|
|
3272
3272
|
},
|
|
3273
3273
|
"colorBackgroundSliderHandleDefault": {
|
|
3274
3274
|
"light": "{colorBlue500}",
|
|
@@ -3959,8 +3959,8 @@ export var preset = {
|
|
|
3959
3959
|
"dark": "{colorGrey300}"
|
|
3960
3960
|
},
|
|
3961
3961
|
"colorTextSegmentHover": {
|
|
3962
|
-
"light": "{
|
|
3963
|
-
"dark": "{
|
|
3962
|
+
"light": "{colorTextButtonNormalHover}",
|
|
3963
|
+
"dark": "{colorTextButtonNormalHover}"
|
|
3964
3964
|
},
|
|
3965
3965
|
"colorTextSmall": {
|
|
3966
3966
|
"light": "{colorGrey450}",
|
|
@@ -4389,8 +4389,8 @@ export var preset = {
|
|
|
4389
4389
|
"dark": "{colorGrey900}"
|
|
4390
4390
|
},
|
|
4391
4391
|
"colorBackgroundSegmentHover": {
|
|
4392
|
-
"light": "{
|
|
4393
|
-
"dark": "{
|
|
4392
|
+
"light": "{colorBackgroundButtonNormalHover}",
|
|
4393
|
+
"dark": "{colorBackgroundButtonNormalHover}"
|
|
4394
4394
|
},
|
|
4395
4395
|
"colorBackgroundSliderHandleDefault": {
|
|
4396
4396
|
"light": "{colorBlue500}",
|
|
@@ -5081,8 +5081,8 @@ export var preset = {
|
|
|
5081
5081
|
"dark": "{colorGrey300}"
|
|
5082
5082
|
},
|
|
5083
5083
|
"colorTextSegmentHover": {
|
|
5084
|
-
"light": "{
|
|
5085
|
-
"dark": "{
|
|
5084
|
+
"light": "{colorTextButtonNormalHover}",
|
|
5085
|
+
"dark": "{colorTextButtonNormalHover}"
|
|
5086
5086
|
},
|
|
5087
5087
|
"colorTextSmall": {
|
|
5088
5088
|
"light": "{colorGrey450}",
|
|
@@ -5443,8 +5443,8 @@ export var preset = {
|
|
|
5443
5443
|
"dark": "{colorBackgroundButtonNormalDisabled}"
|
|
5444
5444
|
},
|
|
5445
5445
|
"colorBackgroundSegmentHover": {
|
|
5446
|
-
"light": "{
|
|
5447
|
-
"dark": "{
|
|
5446
|
+
"light": "{colorBackgroundButtonNormalHover}",
|
|
5447
|
+
"dark": "{colorBackgroundButtonNormalHover}"
|
|
5448
5448
|
},
|
|
5449
5449
|
"colorBackgroundSliderHandleDefault": {
|
|
5450
5450
|
"light": "{colorBlue600}",
|
|
@@ -6135,8 +6135,8 @@ export var preset = {
|
|
|
6135
6135
|
"dark": "{colorGrey300}"
|
|
6136
6136
|
},
|
|
6137
6137
|
"colorTextSegmentHover": {
|
|
6138
|
-
"light": "{
|
|
6139
|
-
"dark": "{
|
|
6138
|
+
"light": "{colorTextButtonNormalHover}",
|
|
6139
|
+
"dark": "{colorTextButtonNormalHover}"
|
|
6140
6140
|
},
|
|
6141
6141
|
"colorTextSmall": {
|
|
6142
6142
|
"light": "{colorGrey550}",
|
|
@@ -6497,8 +6497,8 @@ export var preset = {
|
|
|
6497
6497
|
"dark": "{colorBackgroundButtonNormalDisabled}"
|
|
6498
6498
|
},
|
|
6499
6499
|
"colorBackgroundSegmentHover": {
|
|
6500
|
-
"light": "{
|
|
6501
|
-
"dark": "{
|
|
6500
|
+
"light": "{colorBackgroundButtonNormalHover}",
|
|
6501
|
+
"dark": "{colorBackgroundButtonNormalHover}"
|
|
6502
6502
|
},
|
|
6503
6503
|
"colorBackgroundSliderHandleDefault": {
|
|
6504
6504
|
"light": "{colorBlue600}",
|
|
@@ -7189,8 +7189,8 @@ export var preset = {
|
|
|
7189
7189
|
"dark": "{colorGrey300}"
|
|
7190
7190
|
},
|
|
7191
7191
|
"colorTextSegmentHover": {
|
|
7192
|
-
"light": "{
|
|
7193
|
-
"dark": "{
|
|
7192
|
+
"light": "{colorTextButtonNormalHover}",
|
|
7193
|
+
"dark": "{colorTextButtonNormalHover}"
|
|
7194
7194
|
},
|
|
7195
7195
|
"colorTextSmall": {
|
|
7196
7196
|
"light": "{colorGrey550}",
|
|
@@ -7551,8 +7551,8 @@ export var preset = {
|
|
|
7551
7551
|
"dark": "{colorBackgroundButtonNormalDisabled}"
|
|
7552
7552
|
},
|
|
7553
7553
|
"colorBackgroundSegmentHover": {
|
|
7554
|
-
"light": "{
|
|
7555
|
-
"dark": "{
|
|
7554
|
+
"light": "{colorBackgroundButtonNormalHover}",
|
|
7555
|
+
"dark": "{colorBackgroundButtonNormalHover}"
|
|
7556
7556
|
},
|
|
7557
7557
|
"colorBackgroundSliderHandleDefault": {
|
|
7558
7558
|
"light": "{colorBlue600}",
|
|
@@ -8243,8 +8243,8 @@ export var preset = {
|
|
|
8243
8243
|
"dark": "{colorGrey300}"
|
|
8244
8244
|
},
|
|
8245
8245
|
"colorTextSegmentHover": {
|
|
8246
|
-
"light": "{
|
|
8247
|
-
"dark": "{
|
|
8246
|
+
"light": "{colorTextButtonNormalHover}",
|
|
8247
|
+
"dark": "{colorTextButtonNormalHover}"
|
|
8248
8248
|
},
|
|
8249
8249
|
"colorTextSmall": {
|
|
8250
8250
|
"light": "{colorGrey550}",
|
|
@@ -8607,8 +8607,8 @@ export var preset = {
|
|
|
8607
8607
|
"dark": "{colorBackgroundButtonNormalDisabled}"
|
|
8608
8608
|
},
|
|
8609
8609
|
"colorBackgroundSegmentHover": {
|
|
8610
|
-
"light": "{
|
|
8611
|
-
"dark": "{
|
|
8610
|
+
"light": "{colorBackgroundButtonNormalHover}",
|
|
8611
|
+
"dark": "{colorBackgroundButtonNormalHover}"
|
|
8612
8612
|
},
|
|
8613
8613
|
"colorBackgroundSliderHandleDefault": {
|
|
8614
8614
|
"light": "{colorBlue500}",
|
|
@@ -9299,8 +9299,8 @@ export var preset = {
|
|
|
9299
9299
|
"dark": "{colorGrey300}"
|
|
9300
9300
|
},
|
|
9301
9301
|
"colorTextSegmentHover": {
|
|
9302
|
-
"light": "{
|
|
9303
|
-
"dark": "{
|
|
9302
|
+
"light": "{colorTextButtonNormalHover}",
|
|
9303
|
+
"dark": "{colorTextButtonNormalHover}"
|
|
9304
9304
|
},
|
|
9305
9305
|
"colorTextSmall": {
|
|
9306
9306
|
"light": "{colorGrey450}",
|
|
@@ -11639,7 +11639,7 @@ export var preset = {
|
|
|
11639
11639
|
"colorBackgroundSegmentActive": "--color-background-segment-active-bkvyiy",
|
|
11640
11640
|
"colorBackgroundSegmentDefault": "--color-background-segment-default-voaiuw",
|
|
11641
11641
|
"colorBackgroundSegmentDisabled": "--color-background-segment-disabled-9tsgp1",
|
|
11642
|
-
"colorBackgroundSegmentHover": "--color-background-segment-hover-
|
|
11642
|
+
"colorBackgroundSegmentHover": "--color-background-segment-hover-jancts",
|
|
11643
11643
|
"colorBackgroundSliderHandleDefault": "--color-background-slider-handle-default-94lnn1",
|
|
11644
11644
|
"colorBackgroundSliderHandleActive": "--color-background-slider-handle-active-7w7xg0",
|
|
11645
11645
|
"colorBackgroundSliderTrack": "--color-background-slider-track-uhckut",
|
|
@@ -11812,7 +11812,7 @@ export var preset = {
|
|
|
11812
11812
|
"colorTextPaginationPageNumberDefault": "--color-text-pagination-page-number-default-s25kr0",
|
|
11813
11813
|
"colorTextSegmentActive": "--color-text-segment-active-fc6owc",
|
|
11814
11814
|
"colorTextSegmentDefault": "--color-text-segment-default-iib3us",
|
|
11815
|
-
"colorTextSegmentHover": "--color-text-segment-hover-
|
|
11815
|
+
"colorTextSegmentHover": "--color-text-segment-hover-yckzgd",
|
|
11816
11816
|
"colorTextSmall": "--color-text-small-nzfntg",
|
|
11817
11817
|
"colorTextStatusError": "--color-text-status-error-5676bj",
|
|
11818
11818
|
"colorTextStatusInactive": "--color-text-status-inactive-5megna",
|
|
@@ -12017,7 +12017,7 @@ export var preset = {
|
|
|
12017
12017
|
"spacePanelSideRight": "--space-panel-side-right-xofg51",
|
|
12018
12018
|
"spacePanelSplitTop": "--space-panel-split-top-q1pux4",
|
|
12019
12019
|
"spacePanelSplitBottom": "--space-panel-split-bottom-qwdduf",
|
|
12020
|
-
"spaceSegmentedControlFocusOutlineGutter": "--space-segmented-control-focus-outline-gutter-
|
|
12020
|
+
"spaceSegmentedControlFocusOutlineGutter": "--space-segmented-control-focus-outline-gutter-ublqj7",
|
|
12021
12021
|
"spaceTabsContentTop": "--space-tabs-content-top-dedu0k",
|
|
12022
12022
|
"spaceTabsFocusOutlineGutter": "--space-tabs-focus-outline-gutter-xm37ly",
|
|
12023
12023
|
"spaceTableContentBottom": "--space-table-content-bottom-9yr834",
|
package/internal/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal-segmented-control.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"internal-segmented-control.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAKrD,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,GACT,EAAE,qBAAqB,eA+EvB"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import React, { useRef } from 'react';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { fireNonCancelableEvent } from '../internal/events';
|
|
6
|
+
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
6
7
|
import { KeyCode } from '../internal/keycode';
|
|
7
8
|
import handleKey from '../internal/utils/handle-key';
|
|
8
9
|
import { Segment } from './segment';
|
|
@@ -27,7 +28,10 @@ export default function InternalSegmentedControl({ selectedId, options, label, a
|
|
|
27
28
|
const nextSegmentId = focusableSegments[nextIndex].id;
|
|
28
29
|
(_a = segmentByIdRef.current[nextSegmentId]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
29
30
|
};
|
|
30
|
-
|
|
31
|
+
const isVisualRefresh = useVisualRefresh();
|
|
32
|
+
return (React.createElement("div", { className: clsx(styles['segment-part'], styles[`segment-count-${options === null || options === void 0 ? void 0 : options.length}`], {
|
|
33
|
+
[styles.refresh]: isVisualRefresh,
|
|
34
|
+
}), "aria-label": label, "aria-labelledby": ariaLabelledby, role: "toolbar" }, options &&
|
|
31
35
|
options.map((option, index) => {
|
|
32
36
|
const isActive = selectedId === option.id;
|
|
33
37
|
const focusableSegmentIndex = focusableSegments.indexOf(option);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal-segmented-control.js","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,SAAS,MAAM,8BAA8B,CAAC;AAErD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,GACc;IACtB,MAAM,cAAc,GAAG,MAAM,CAAsC,EAAE,CAAC,CAAC;IACvE,MAAM,eAAe,GAAG,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE;QACtD,OAAO,MAAM,CAAC,EAAE,KAAK,UAAU,CAAC;IAClC,CAAC,CAAC,CAAC;IACH,MAAM,qBAAqB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACjF,MAAM,iBAAiB,GAAG,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,MAAM,CAC9C,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAC3E,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAA6C,EAAE,WAAmB,EAAE,EAAE;;QAC3F,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,EAAE;YACrE,OAAO;SACR;QAED,IAAI,SAAS,GAAG,WAAW,CAAC;QAE5B,SAAS,CAAC,KAAK,EAAE;YACf,aAAa,EAAE,GAAG,EAAE,CAAC,CAAC,SAAS,GAAG,WAAW,KAAK,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC;YACrG,WAAW,EAAE,GAAG,EAAE,CAAC,CAAC,SAAS,GAAG,WAAW,GAAG,CAAC,KAAK,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC;SACpG,CAAC,CAAC;QAEH,MAAM,aAAa,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC;QACtD,MAAA,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC,0CAAE,KAAK,EAAE,CAAC;IACjD,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"internal-segmented-control.js","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.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 } from 'react';\nimport clsx from 'clsx';\n\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { KeyCode } from '../internal/keycode';\nimport handleKey from '../internal/utils/handle-key';\nimport { SegmentedControlProps } from './interfaces';\nimport { Segment } from './segment';\n\nimport styles from './styles.css.js';\n\nexport default function InternalSegmentedControl({\n selectedId,\n options,\n label,\n ariaLabelledby,\n onChange,\n}: SegmentedControlProps) {\n const segmentByIdRef = useRef<{ [id: string]: HTMLButtonElement }>({});\n const selectedOptions = (options || []).filter(option => {\n return option.id === selectedId;\n });\n const currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;\n const focusableSegments = (options || []).filter(\n option => !option.disabled || (option.disabled && !!option.disabledReason)\n );\n\n const moveHighlight = (event: React.KeyboardEvent<HTMLButtonElement>, activeIndex: number) => {\n if (event.keyCode !== KeyCode.right && event.keyCode !== KeyCode.left) {\n return;\n }\n\n let nextIndex = activeIndex;\n\n handleKey(event, {\n onInlineStart: () => (nextIndex = activeIndex === 0 ? focusableSegments.length - 1 : activeIndex - 1),\n onInlineEnd: () => (nextIndex = activeIndex + 1 === focusableSegments.length ? 0 : activeIndex + 1),\n });\n\n const nextSegmentId = focusableSegments[nextIndex].id;\n segmentByIdRef.current[nextSegmentId]?.focus();\n };\n const isVisualRefresh = useVisualRefresh();\n\n return (\n <div\n className={clsx(styles['segment-part'], styles[`segment-count-${options?.length}`], {\n [styles.refresh]: isVisualRefresh,\n })}\n aria-label={label}\n aria-labelledby={ariaLabelledby}\n role=\"toolbar\"\n >\n {options &&\n options.map((option: SegmentedControlProps.Option, index) => {\n const isActive = selectedId === option.id;\n const focusableSegmentIndex = focusableSegments.indexOf(option);\n let tabIndex = isActive ? 0 : -1;\n if (currentSelectedOption === null && focusableSegmentIndex === 0) {\n tabIndex = 0;\n }\n return (\n <Segment\n key={index}\n id={option.id}\n disabled={!!option.disabled}\n disabledReason={option.disabledReason}\n iconName={option.iconName}\n iconAlt={option.iconAlt}\n iconUrl={option.iconUrl}\n iconSvg={option.iconSvg}\n text={option.text}\n isActive={isActive}\n tabIndex={tabIndex}\n ref={node => {\n if (node) {\n segmentByIdRef.current[option.id] = node;\n } else {\n delete segmentByIdRef.current[option.id];\n }\n }}\n onClick={() => {\n if (option.disabled) {\n return;\n }\n\n if (selectedId !== option.id) {\n fireNonCancelableEvent(onChange, { selectedId: option.id });\n }\n }}\n onKeyDown={event => moveHighlight(event, focusableSegmentIndex)}\n />\n );\n })}\n </div>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"segment.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/segment.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"segment.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/segment.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAQhD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAIrD,UAAU,YAAa,SAAQ,qBAAqB,CAAC,MAAM;IACzD,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACnE,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,OAAO,wFA6EnB,CAAC"}
|
|
@@ -6,13 +6,15 @@ import InternalIcon from '../icon/internal';
|
|
|
6
6
|
import Tooltip from '../internal/components/tooltip';
|
|
7
7
|
import useHiddenDescription from '../internal/hooks/use-hidden-description';
|
|
8
8
|
import { useMergeRefs } from '../internal/hooks/use-merge-refs';
|
|
9
|
+
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
9
10
|
import styles from './styles.css.js';
|
|
10
11
|
export const Segment = React.forwardRef(({ disabled, disabledReason, text, iconName, iconAlt, iconUrl, iconSvg, isActive, onClick, onKeyDown, tabIndex, id, }, ref) => {
|
|
11
12
|
const buttonRef = useRef(null);
|
|
12
13
|
const [showTooltip, setShowTooltip] = useState(false);
|
|
13
14
|
const isDisabledWithReason = disabled && !!disabledReason;
|
|
14
15
|
const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);
|
|
15
|
-
|
|
16
|
+
const isVisualRefresh = useVisualRefresh();
|
|
17
|
+
return (React.createElement("button", Object.assign({ className: clsx(styles.segment, { [styles.disabled]: !!disabled }, { [styles.selected]: isActive }, { [styles.refresh]: isVisualRefresh }), ref: useMergeRefs(ref, buttonRef), onClick: onClick, onKeyDown: onKeyDown, disabled: disabled && !disabledReason, "aria-disabled": isDisabledWithReason ? 'true' : undefined, type: "button", tabIndex: tabIndex, "aria-pressed": isActive ? 'true' : 'false', "aria-label": !text ? iconAlt : undefined, onFocus: isDisabledWithReason ? () => setShowTooltip(true) : undefined, onBlur: isDisabledWithReason ? () => setShowTooltip(false) : undefined, onMouseEnter: isDisabledWithReason ? () => setShowTooltip(true) : undefined, onMouseLeave: isDisabledWithReason ? () => setShowTooltip(false) : undefined }, (isDisabledWithReason ? targetProps : {}), { "data-testid": id }),
|
|
16
18
|
(iconName || iconUrl || iconSvg) && (React.createElement(InternalIcon, { className: clsx(styles.icon, text ? styles['with-text'] : styles['with-no-text']), name: iconName, url: iconUrl, svg: iconSvg, alt: iconAlt, variant: disabled ? 'disabled' : 'normal' })),
|
|
17
19
|
React.createElement("span", null, text),
|
|
18
20
|
isDisabledWithReason && (React.createElement(React.Fragment, null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"segment.js","sourceRoot":"","sources":["../../../src/segmented-control/segment.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,OAAO,MAAM,gCAAgC,CAAC;AACrD,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;
|
|
1
|
+
{"version":3,"file":"segment.js","sourceRoot":"","sources":["../../../src/segmented-control/segment.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 InternalIcon from '../icon/internal';\nimport Tooltip from '../internal/components/tooltip';\nimport useHiddenDescription from '../internal/hooks/use-hidden-description';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { SegmentedControlProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface SegmentProps extends SegmentedControlProps.Option {\n onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;\n isActive: boolean;\n tabIndex: number;\n}\n\nexport const Segment = React.forwardRef(\n (\n {\n disabled,\n disabledReason,\n text,\n iconName,\n iconAlt,\n iconUrl,\n iconSvg,\n isActive,\n onClick,\n onKeyDown,\n tabIndex,\n id,\n }: SegmentProps,\n ref: React.Ref<HTMLButtonElement>\n ) => {\n const buttonRef = useRef<HTMLElement>(null);\n const [showTooltip, setShowTooltip] = useState(false);\n const isDisabledWithReason = disabled && !!disabledReason;\n\n const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);\n const isVisualRefresh = useVisualRefresh();\n\n return (\n <button\n className={clsx(\n styles.segment,\n { [styles.disabled]: !!disabled },\n { [styles.selected]: isActive },\n { [styles.refresh]: isVisualRefresh }\n )}\n ref={useMergeRefs(ref, buttonRef)}\n onClick={onClick}\n onKeyDown={onKeyDown}\n disabled={disabled && !disabledReason}\n aria-disabled={isDisabledWithReason ? 'true' : undefined}\n type=\"button\"\n tabIndex={tabIndex}\n aria-pressed={isActive ? 'true' : 'false'}\n aria-label={!text ? iconAlt : undefined}\n onFocus={isDisabledWithReason ? () => setShowTooltip(true) : undefined}\n onBlur={isDisabledWithReason ? () => setShowTooltip(false) : undefined}\n onMouseEnter={isDisabledWithReason ? () => setShowTooltip(true) : undefined}\n onMouseLeave={isDisabledWithReason ? () => setShowTooltip(false) : undefined}\n {...(isDisabledWithReason ? targetProps : {})}\n data-testid={id}\n >\n {(iconName || iconUrl || iconSvg) && (\n <InternalIcon\n className={clsx(styles.icon, text ? styles['with-text'] : styles['with-no-text'])}\n name={iconName}\n url={iconUrl}\n svg={iconSvg}\n alt={iconAlt}\n variant={disabled ? 'disabled' : 'normal'}\n />\n )}\n <span>{text}</span>\n\n {isDisabledWithReason && (\n <>\n {descriptionEl}\n {showTooltip && (\n <Tooltip\n className={styles['disabled-reason-tooltip']}\n trackRef={buttonRef}\n value={disabledReason!}\n onDismiss={() => setShowTooltip(false)}\n />\n )}\n </>\n )}\n </button>\n );\n }\n);\n"]}
|
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"segment": "
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"with-
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"segment-count-
|
|
15
|
-
"segment-count-
|
|
16
|
-
"segment-count-
|
|
17
|
-
"segment-count-
|
|
18
|
-
"
|
|
4
|
+
"segment": "awsui_segment_8cbea_iu5r7_161",
|
|
5
|
+
"refresh": "awsui_refresh_8cbea_iu5r7_187",
|
|
6
|
+
"disabled": "awsui_disabled_8cbea_iu5r7_193",
|
|
7
|
+
"selected": "awsui_selected_8cbea_iu5r7_256",
|
|
8
|
+
"icon": "awsui_icon_8cbea_iu5r7_279",
|
|
9
|
+
"with-text": "awsui_with-text_8cbea_iu5r7_283",
|
|
10
|
+
"with-no-text": "awsui_with-no-text_8cbea_iu5r7_289",
|
|
11
|
+
"root": "awsui_root_8cbea_iu5r7_294",
|
|
12
|
+
"segment-part": "awsui_segment-part_8cbea_iu5r7_326",
|
|
13
|
+
"select": "awsui_select_8cbea_iu5r7_256",
|
|
14
|
+
"segment-count-2": "awsui_segment-count-2_8cbea_iu5r7_359",
|
|
15
|
+
"segment-count-3": "awsui_segment-count-3_8cbea_iu5r7_363",
|
|
16
|
+
"segment-count-4": "awsui_segment-count-4_8cbea_iu5r7_367",
|
|
17
|
+
"segment-count-5": "awsui_segment-count-5_8cbea_iu5r7_371",
|
|
18
|
+
"segment-count-6": "awsui_segment-count-6_8cbea_iu5r7_375",
|
|
19
|
+
"disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_iu5r7_379"
|
|
19
20
|
};
|
|
20
21
|
|