@cloudscape-design/components-themeable 3.0.916 → 3.0.918
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/icon/styles.scss +1 -0
- package/lib/internal/scss/segmented-control/segment.scss +51 -29
- package/lib/internal/scss/segmented-control/styles.scss +22 -2
- package/lib/internal/template/icon/generated/icons.d.ts +2 -0
- package/lib/internal/template/icon/generated/icons.d.ts.map +1 -1
- package/lib/internal/template/icon/generated/icons.js +4 -0
- package/lib/internal/template/icon/generated/icons.js.map +1 -1
- package/lib/internal/template/icon/interfaces.d.ts +1 -1
- package/lib/internal/template/icon/interfaces.d.ts.map +1 -1
- package/lib/internal/template/icon/interfaces.js.map +1 -1
- package/lib/internal/template/icon/styles.css.js +39 -38
- package/lib/internal/template/icon/styles.scoped.css +85 -83
- package/lib/internal/template/icon/styles.selectors.js +39 -38
- package/lib/internal/template/internal/base-component/styles.scoped.css +40 -29
- package/lib/internal/template/internal/components/drag-handle/styles.scoped.css +2 -2
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/internal/environment.json +1 -1
- package/lib/internal/template/internal/generated/styles/tokens.js +3 -3
- package/lib/internal/template/internal/generated/theming/index.cjs +35 -35
- package/lib/internal/template/internal/generated/theming/index.js +35 -35
- package/lib/internal/template/segmented-control/internal-segmented-control.d.ts.map +1 -1
- package/lib/internal/template/segmented-control/internal-segmented-control.js +5 -1
- package/lib/internal/template/segmented-control/internal-segmented-control.js.map +1 -1
- package/lib/internal/template/segmented-control/segment.d.ts.map +1 -1
- package/lib/internal/template/segmented-control/segment.js +3 -1
- package/lib/internal/template/segmented-control/segment.js.map +1 -1
- package/lib/internal/template/segmented-control/styles.css.js +16 -15
- package/lib/internal/template/segmented-control/styles.scoped.css +104 -81
- package/lib/internal/template/segmented-control/styles.selectors.js +16 -15
- package/lib/internal/template/select/parts/styles.scoped.css +2 -4
- package/lib/internal/template/slider/styles.scoped.css +2 -4
- package/lib/internal/template/test-utils/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -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",
|
|
@@ -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_1h8wn_161",
|
|
5
|
+
"refresh": "awsui_refresh_8cbea_1h8wn_187",
|
|
6
|
+
"disabled": "awsui_disabled_8cbea_1h8wn_193",
|
|
7
|
+
"selected": "awsui_selected_8cbea_1h8wn_256",
|
|
8
|
+
"icon": "awsui_icon_8cbea_1h8wn_279",
|
|
9
|
+
"with-text": "awsui_with-text_8cbea_1h8wn_283",
|
|
10
|
+
"with-no-text": "awsui_with-no-text_8cbea_1h8wn_289",
|
|
11
|
+
"root": "awsui_root_8cbea_1h8wn_294",
|
|
12
|
+
"segment-part": "awsui_segment-part_8cbea_1h8wn_326",
|
|
13
|
+
"select": "awsui_select_8cbea_1h8wn_256",
|
|
14
|
+
"segment-count-2": "awsui_segment-count-2_8cbea_1h8wn_359",
|
|
15
|
+
"segment-count-3": "awsui_segment-count-3_8cbea_1h8wn_363",
|
|
16
|
+
"segment-count-4": "awsui_segment-count-4_8cbea_1h8wn_367",
|
|
17
|
+
"segment-count-5": "awsui_segment-count-5_8cbea_1h8wn_371",
|
|
18
|
+
"segment-count-6": "awsui_segment-count-6_8cbea_1h8wn_375",
|
|
19
|
+
"disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_1h8wn_379"
|
|
19
20
|
};
|
|
20
21
|
|