@cloudscape-design/components 3.0.1142 → 3.0.1144
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/annotation-context/annotation/annotation-popover.d.ts.map +1 -1
- package/annotation-context/annotation/annotation-popover.js +2 -5
- package/annotation-context/annotation/annotation-popover.js.map +1 -1
- package/annotation-context/annotation/styles.css.js +13 -24
- package/annotation-context/annotation/styles.scoped.css +20 -87
- package/annotation-context/annotation/styles.selectors.js +13 -24
- package/flashbar/interfaces.d.ts +1 -1
- package/flashbar/interfaces.js.map +1 -1
- package/index.d.ts +0 -1
- package/index.js +0 -1
- package/internal/base-component/styles.scoped.css +1 -1
- package/internal/environment.js +2 -2
- package/internal/environment.json +2 -2
- package/internal/manifest.json +1 -1
- package/navigable-group/index.d.ts +1 -1
- package/navigable-group/index.d.ts.map +1 -1
- package/navigable-group/index.js +4 -19
- package/navigable-group/index.js.map +1 -1
- package/package.json +1 -2
- package/popover/arrow.d.ts +5 -1
- package/popover/arrow.d.ts.map +1 -1
- package/popover/arrow.js +2 -2
- package/popover/arrow.js.map +1 -1
- package/popover/styles.css.js +57 -56
- package/popover/styles.scoped.css +91 -84
- package/popover/styles.selectors.js +57 -56
- package/prompt-input/styles.d.ts +38 -1
- package/prompt-input/styles.d.ts.map +1 -1
- package/prompt-input/styles.js +1 -2
- package/prompt-input/styles.js.map +1 -1
- package/radio-group/internal.d.ts.map +1 -1
- package/radio-group/internal.js +1 -1
- package/radio-group/internal.js.map +1 -1
- package/radio-group/styles.css.js +6 -5
- package/radio-group/styles.scoped.css +10 -6
- package/radio-group/styles.selectors.js +6 -5
- package/segmented-control/index.d.ts.map +1 -1
- package/segmented-control/index.js +13 -14
- package/segmented-control/interfaces.d.ts +31 -0
- package/segmented-control/interfaces.d.ts.map +1 -1
- package/segmented-control/interfaces.js.map +1 -1
- package/segmented-control/internal-do-not-use-core.js +19 -0
- package/segmented-control/{index.js.map → internal-do-not-use-core.js.map} +1 -1
- package/segmented-control/internal-segmented-control.d.ts +2 -1
- package/segmented-control/internal-segmented-control.d.ts.map +1 -1
- package/segmented-control/internal-segmented-control.js +4 -3
- package/segmented-control/internal-segmented-control.js.map +1 -1
- package/segmented-control/internal.d.ts +1 -0
- package/segmented-control/internal.d.ts.map +1 -1
- package/segmented-control/internal.js +2 -2
- package/segmented-control/internal.js.map +1 -1
- package/segmented-control/segment.d.ts +1 -0
- package/segmented-control/segment.d.ts.map +1 -1
- package/segmented-control/segment.js +3 -2
- package/segmented-control/segment.js.map +1 -1
- package/segmented-control/style.d.ts +29 -0
- package/segmented-control/style.d.ts.map +1 -0
- package/segmented-control/style.js +37 -0
- package/segmented-control/style.js.map +1 -0
- package/segmented-control/styles.css.js +16 -16
- package/segmented-control/styles.scoped.css +47 -59
- package/segmented-control/styles.selectors.js +16 -16
- package/test-utils/dom/radio-group/index.d.ts +1 -0
- package/test-utils/dom/radio-group/index.js +5 -3
- package/test-utils/dom/radio-group/index.js.map +1 -1
- package/test-utils/selectors/radio-group/index.d.ts +1 -0
- package/test-utils/selectors/radio-group/index.js +5 -3
- package/test-utils/selectors/radio-group/index.js.map +1 -1
- package/tree-view/vertical-connector/styles.css.js +3 -3
- package/tree-view/vertical-connector/styles.scoped.css +5 -5
- package/tree-view/vertical-connector/styles.selectors.js +3 -3
|
@@ -2,61 +2,62 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"arrow": "
|
|
6
|
-
"arrow-outer": "awsui_arrow-
|
|
7
|
-
"arrow-inner": "awsui_arrow-
|
|
8
|
-
"arrow-position-right-top": "awsui_arrow-position-right-
|
|
9
|
-
"arrow-position-right-bottom": "awsui_arrow-position-right-
|
|
10
|
-
"arrow-position-left-top": "awsui_arrow-position-left-
|
|
11
|
-
"arrow-position-left-bottom": "awsui_arrow-position-left-
|
|
12
|
-
"arrow-position-top-center": "awsui_arrow-position-top-
|
|
13
|
-
"arrow-position-top-right": "awsui_arrow-position-top-
|
|
14
|
-
"arrow-position-top-left": "awsui_arrow-position-top-
|
|
15
|
-
"arrow-position-top-responsive": "awsui_arrow-position-top-
|
|
16
|
-
"arrow-position-bottom-center": "awsui_arrow-position-bottom-
|
|
17
|
-
"arrow-position-bottom-right": "awsui_arrow-position-bottom-
|
|
18
|
-
"arrow-position-bottom-left": "awsui_arrow-position-bottom-
|
|
19
|
-
"arrow-position-bottom-responsive": "awsui_arrow-position-bottom-
|
|
20
|
-
"
|
|
21
|
-
"body
|
|
22
|
-
"body-
|
|
23
|
-
"
|
|
24
|
-
"dismiss": "
|
|
25
|
-
"dismiss
|
|
26
|
-
"
|
|
27
|
-
"header": "
|
|
28
|
-
"
|
|
29
|
-
"content
|
|
30
|
-
"
|
|
31
|
-
"container
|
|
32
|
-
"container-arrow-position-bottom-
|
|
33
|
-
"container-arrow-position-bottom-
|
|
34
|
-
"container-arrow-position-
|
|
35
|
-
"container-arrow-position-top-
|
|
36
|
-
"container-arrow-position-top-
|
|
37
|
-
"container-arrow-position-right
|
|
38
|
-
"container-arrow-position-right-
|
|
39
|
-
"container-arrow-position-
|
|
40
|
-
"container-arrow-position-left-
|
|
41
|
-
"container-
|
|
42
|
-
"container-body
|
|
43
|
-
"container-body-
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"container-body-size-
|
|
47
|
-
"container-
|
|
48
|
-
"container-arrow
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"trigger-type-text": "awsui_trigger-type-
|
|
58
|
-
"trigger-type-
|
|
59
|
-
"
|
|
60
|
-
"
|
|
5
|
+
"arrow": "awsui_arrow_xjuzf_ydxwu_153",
|
|
6
|
+
"arrow-outer": "awsui_arrow-outer_xjuzf_ydxwu_157",
|
|
7
|
+
"arrow-inner": "awsui_arrow-inner_xjuzf_ydxwu_157",
|
|
8
|
+
"arrow-position-right-top": "awsui_arrow-position-right-top_xjuzf_ydxwu_199",
|
|
9
|
+
"arrow-position-right-bottom": "awsui_arrow-position-right-bottom_xjuzf_ydxwu_199",
|
|
10
|
+
"arrow-position-left-top": "awsui_arrow-position-left-top_xjuzf_ydxwu_202",
|
|
11
|
+
"arrow-position-left-bottom": "awsui_arrow-position-left-bottom_xjuzf_ydxwu_202",
|
|
12
|
+
"arrow-position-top-center": "awsui_arrow-position-top-center_xjuzf_ydxwu_205",
|
|
13
|
+
"arrow-position-top-right": "awsui_arrow-position-top-right_xjuzf_ydxwu_205",
|
|
14
|
+
"arrow-position-top-left": "awsui_arrow-position-top-left_xjuzf_ydxwu_205",
|
|
15
|
+
"arrow-position-top-responsive": "awsui_arrow-position-top-responsive_xjuzf_ydxwu_205",
|
|
16
|
+
"arrow-position-bottom-center": "awsui_arrow-position-bottom-center_xjuzf_ydxwu_208",
|
|
17
|
+
"arrow-position-bottom-right": "awsui_arrow-position-bottom-right_xjuzf_ydxwu_208",
|
|
18
|
+
"arrow-position-bottom-left": "awsui_arrow-position-bottom-left_xjuzf_ydxwu_208",
|
|
19
|
+
"arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_xjuzf_ydxwu_208",
|
|
20
|
+
"arrow-variant-info": "awsui_arrow-variant-info_xjuzf_ydxwu_212",
|
|
21
|
+
"body": "awsui_body_xjuzf_ydxwu_227",
|
|
22
|
+
"body-overflow-visible": "awsui_body-overflow-visible_xjuzf_ydxwu_263",
|
|
23
|
+
"body-variant-chart": "awsui_body-variant-chart_xjuzf_ydxwu_266",
|
|
24
|
+
"has-dismiss": "awsui_has-dismiss_xjuzf_ydxwu_271",
|
|
25
|
+
"dismiss": "awsui_dismiss_xjuzf_ydxwu_276",
|
|
26
|
+
"dismiss-control": "awsui_dismiss-control_xjuzf_ydxwu_284",
|
|
27
|
+
"header-row": "awsui_header-row_xjuzf_ydxwu_288",
|
|
28
|
+
"header": "awsui_header_xjuzf_ydxwu_288",
|
|
29
|
+
"content": "awsui_content_xjuzf_ydxwu_313",
|
|
30
|
+
"content-overflow-visible": "awsui_content-overflow-visible_xjuzf_ydxwu_322",
|
|
31
|
+
"container": "awsui_container_xjuzf_ydxwu_334",
|
|
32
|
+
"container-arrow-position-bottom-left": "awsui_container-arrow-position-bottom-left_xjuzf_ydxwu_345",
|
|
33
|
+
"container-arrow-position-bottom-center": "awsui_container-arrow-position-bottom-center_xjuzf_ydxwu_345",
|
|
34
|
+
"container-arrow-position-bottom-right": "awsui_container-arrow-position-bottom-right_xjuzf_ydxwu_345",
|
|
35
|
+
"container-arrow-position-top-left": "awsui_container-arrow-position-top-left_xjuzf_ydxwu_350",
|
|
36
|
+
"container-arrow-position-top-center": "awsui_container-arrow-position-top-center_xjuzf_ydxwu_350",
|
|
37
|
+
"container-arrow-position-top-right": "awsui_container-arrow-position-top-right_xjuzf_ydxwu_350",
|
|
38
|
+
"container-arrow-position-right-top": "awsui_container-arrow-position-right-top_xjuzf_ydxwu_355",
|
|
39
|
+
"container-arrow-position-right-bottom": "awsui_container-arrow-position-right-bottom_xjuzf_ydxwu_355",
|
|
40
|
+
"container-arrow-position-left-top": "awsui_container-arrow-position-left-top_xjuzf_ydxwu_360",
|
|
41
|
+
"container-arrow-position-left-bottom": "awsui_container-arrow-position-left-bottom_xjuzf_ydxwu_360",
|
|
42
|
+
"container-body": "awsui_container-body_xjuzf_ydxwu_366",
|
|
43
|
+
"container-body-variant-annotation": "awsui_container-body-variant-annotation_xjuzf_ydxwu_406",
|
|
44
|
+
"container-body-size-small": "awsui_container-body-size-small_xjuzf_ydxwu_411",
|
|
45
|
+
"fixed-width": "awsui_fixed-width_xjuzf_ydxwu_414",
|
|
46
|
+
"container-body-size-medium": "awsui_container-body-size-medium_xjuzf_ydxwu_418",
|
|
47
|
+
"container-body-size-large": "awsui_container-body-size-large_xjuzf_ydxwu_425",
|
|
48
|
+
"container-arrow": "awsui_container-arrow_xjuzf_ydxwu_345",
|
|
49
|
+
"container-arrow-position-top-responsive": "awsui_container-arrow-position-top-responsive_xjuzf_ydxwu_475",
|
|
50
|
+
"awsui-motion-fade-in": "awsui_awsui-motion-fade-in_xjuzf_ydxwu_1",
|
|
51
|
+
"refresh": "awsui_refresh_xjuzf_ydxwu_533",
|
|
52
|
+
"root": "awsui_root_xjuzf_ydxwu_555",
|
|
53
|
+
"no-wrap": "awsui_no-wrap_xjuzf_ydxwu_587",
|
|
54
|
+
"root-filtering-token": "awsui_root-filtering-token_xjuzf_ydxwu_591",
|
|
55
|
+
"trigger": "awsui_trigger_xjuzf_ydxwu_595",
|
|
56
|
+
"overflow-ellipsis": "awsui_overflow-ellipsis_xjuzf_ydxwu_602",
|
|
57
|
+
"trigger-type-text-inline": "awsui_trigger-type-text-inline_xjuzf_ydxwu_610",
|
|
58
|
+
"trigger-type-text": "awsui_trigger-type-text_xjuzf_ydxwu_610",
|
|
59
|
+
"trigger-type-filtering-token": "awsui_trigger-type-filtering-token_xjuzf_ydxwu_678",
|
|
60
|
+
"popover-inline-content": "awsui_popover-inline-content_xjuzf_ydxwu_682",
|
|
61
|
+
"hover-area": "awsui_hover-area_xjuzf_ydxwu_686"
|
|
61
62
|
};
|
|
62
63
|
|
package/prompt-input/styles.d.ts
CHANGED
|
@@ -1,4 +1,41 @@
|
|
|
1
|
+
import customCssProps from '../internal/generated/custom-css-properties';
|
|
1
2
|
import { PromptInputProps } from './interfaces';
|
|
2
3
|
export declare function getPromptInputStyles(style: PromptInputProps['style']): {
|
|
3
|
-
|
|
4
|
+
borderRadius?: undefined;
|
|
5
|
+
borderWidth?: undefined;
|
|
6
|
+
fontSize?: undefined;
|
|
7
|
+
fontWeight?: undefined;
|
|
8
|
+
paddingBlock?: undefined;
|
|
9
|
+
paddingInline?: undefined;
|
|
10
|
+
} | {
|
|
11
|
+
[customCssProps.promptInputStyleBackgroundDefault]: string | undefined;
|
|
12
|
+
[customCssProps.promptInputStyleBackgroundDisabled]: string | undefined;
|
|
13
|
+
[customCssProps.promptInputStyleBackgroundHover]: string | undefined;
|
|
14
|
+
[customCssProps.promptInputStyleBackgroundFocus]: string | undefined;
|
|
15
|
+
[customCssProps.promptInputStyleBackgroundReadonly]: string | undefined;
|
|
16
|
+
[customCssProps.promptInputStyleBorderColorDefault]: string | undefined;
|
|
17
|
+
[customCssProps.promptInputStyleBorderColorDisabled]: string | undefined;
|
|
18
|
+
[customCssProps.promptInputStyleBorderColorHover]: string | undefined;
|
|
19
|
+
[customCssProps.promptInputStyleBorderColorFocus]: string | undefined;
|
|
20
|
+
[customCssProps.promptInputStyleBorderColorReadonly]: string | undefined;
|
|
21
|
+
[customCssProps.promptInputStyleBoxShadowDefault]: string | undefined;
|
|
22
|
+
[customCssProps.promptInputStyleBoxShadowDisabled]: string | undefined;
|
|
23
|
+
[customCssProps.promptInputStyleBoxShadowHover]: string | undefined;
|
|
24
|
+
[customCssProps.promptInputStyleBoxShadowFocus]: string | undefined;
|
|
25
|
+
[customCssProps.promptInputStyleBoxShadowReadonly]: string | undefined;
|
|
26
|
+
[customCssProps.promptInputStyleColorDefault]: string | undefined;
|
|
27
|
+
[customCssProps.promptInputStyleColorDisabled]: string | undefined;
|
|
28
|
+
[customCssProps.promptInputStyleColorHover]: string | undefined;
|
|
29
|
+
[customCssProps.promptInputStyleColorFocus]: string | undefined;
|
|
30
|
+
[customCssProps.promptInputStyleColorReadonly]: string | undefined;
|
|
31
|
+
[customCssProps.promptInputStylePlaceholderColor]: string | undefined;
|
|
32
|
+
[customCssProps.promptInputStylePlaceholderFontSize]: string | undefined;
|
|
33
|
+
[customCssProps.promptInputStylePlaceholderFontWeight]: string | undefined;
|
|
34
|
+
[customCssProps.promptInputStylePlaceholderFontStyle]: string | undefined;
|
|
35
|
+
borderRadius: string | undefined;
|
|
36
|
+
borderWidth: string | undefined;
|
|
37
|
+
fontSize: string | undefined;
|
|
38
|
+
fontWeight: string | undefined;
|
|
39
|
+
paddingBlock: string | undefined;
|
|
40
|
+
paddingInline: string | undefined;
|
|
4
41
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/prompt-input/styles.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/prompt-input/styles.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,MAAM,6CAA6C,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC;;;;;;;;IAYjE,CAAC,cAAc,CAAC,iCAAiC,CAAC,qBAAuC;IACzF,CAAC,cAAc,CAAC,kCAAkC,CAAC,qBAAwC;IAC3F,CAAC,cAAc,CAAC,+BAA+B,CAAC,qBAAqC;IACrF,CAAC,cAAc,CAAC,+BAA+B,CAAC,qBAAqC;IACrF,CAAC,cAAc,CAAC,kCAAkC,CAAC,qBAAwC;IAC3F,CAAC,cAAc,CAAC,kCAAkC,CAAC,qBAAmC;IACtF,CAAC,cAAc,CAAC,mCAAmC,CAAC,qBAAoC;IACxF,CAAC,cAAc,CAAC,gCAAgC,CAAC,qBAAiC;IAClF,CAAC,cAAc,CAAC,gCAAgC,CAAC,qBAAiC;IAClF,CAAC,cAAc,CAAC,mCAAmC,CAAC,qBAAoC;IACxF,CAAC,cAAc,CAAC,gCAAgC,CAAC,qBAAiC;IAClF,CAAC,cAAc,CAAC,iCAAiC,CAAC,qBAAkC;IACpF,CAAC,cAAc,CAAC,8BAA8B,CAAC,qBAA+B;IAC9E,CAAC,cAAc,CAAC,8BAA8B,CAAC,qBAA+B;IAC9E,CAAC,cAAc,CAAC,iCAAiC,CAAC,qBAAkC;IACpF,CAAC,cAAc,CAAC,4BAA4B,CAAC,qBAA6B;IAC1E,CAAC,cAAc,CAAC,6BAA6B,CAAC,qBAA8B;IAC5E,CAAC,cAAc,CAAC,0BAA0B,CAAC,qBAA2B;IACtE,CAAC,cAAc,CAAC,0BAA0B,CAAC,qBAA2B;IACtE,CAAC,cAAc,CAAC,6BAA6B,CAAC,qBAA8B;IAC5E,CAAC,cAAc,CAAC,gCAAgC,CAAC,qBAA2B;IAC5E,CAAC,cAAc,CAAC,mCAAmC,CAAC,qBAA8B;IAClF,CAAC,cAAc,CAAC,qCAAqC,CAAC,qBAAgC;IACtF,CAAC,cAAc,CAAC,oCAAoC,CAAC,qBAA+B;;;;;;;EAEvF"}
|
package/prompt-input/styles.js
CHANGED
|
@@ -7,7 +7,7 @@ export function getPromptInputStyles(style) {
|
|
|
7
7
|
if (SYSTEM !== 'core') {
|
|
8
8
|
return {};
|
|
9
9
|
}
|
|
10
|
-
|
|
10
|
+
return {
|
|
11
11
|
borderRadius: (_a = style === null || style === void 0 ? void 0 : style.root) === null || _a === void 0 ? void 0 : _a.borderRadius,
|
|
12
12
|
borderWidth: (_b = style === null || style === void 0 ? void 0 : style.root) === null || _b === void 0 ? void 0 : _b.borderWidth,
|
|
13
13
|
fontSize: (_c = style === null || style === void 0 ? void 0 : style.root) === null || _c === void 0 ? void 0 : _c.fontSize,
|
|
@@ -39,6 +39,5 @@ export function getPromptInputStyles(style) {
|
|
|
39
39
|
[customCssProps.promptInputStylePlaceholderFontWeight]: (_24 = style === null || style === void 0 ? void 0 : style.placeholder) === null || _24 === void 0 ? void 0 : _24.fontWeight,
|
|
40
40
|
[customCssProps.promptInputStylePlaceholderFontStyle]: (_25 = style === null || style === void 0 ? void 0 : style.placeholder) === null || _25 === void 0 ? void 0 : _25.fontStyle,
|
|
41
41
|
};
|
|
42
|
-
return Object.fromEntries(Object.entries(properties).filter(([, value]) => value !== undefined));
|
|
43
42
|
}
|
|
44
43
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/prompt-input/styles.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAGzE,MAAM,UAAU,oBAAoB,CAAC,KAAgC;;IACnE,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;QACtB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/prompt-input/styles.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAGzE,MAAM,UAAU,oBAAoB,CAAC,KAAgC;;IACnE,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;QACtB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,OAAO;QACL,YAAY,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,YAAY;QACvC,WAAW,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,WAAW;QACrC,QAAQ,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,QAAQ;QAC/B,UAAU,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,UAAU;QACnC,YAAY,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,YAAY;QACvC,aAAa,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,aAAa;QACzC,CAAC,cAAc,CAAC,iCAAiC,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,eAAe,0CAAE,OAAO;QACzF,CAAC,cAAc,CAAC,kCAAkC,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,eAAe,0CAAE,QAAQ;QAC3F,CAAC,cAAc,CAAC,+BAA+B,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,eAAe,0CAAE,KAAK;QACrF,CAAC,cAAc,CAAC,+BAA+B,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,eAAe,0CAAE,KAAK;QACrF,CAAC,cAAc,CAAC,kCAAkC,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,eAAe,0CAAE,QAAQ;QAC3F,CAAC,cAAc,CAAC,kCAAkC,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,WAAW,0CAAE,OAAO;QACtF,CAAC,cAAc,CAAC,mCAAmC,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,WAAW,0CAAE,QAAQ;QACxF,CAAC,cAAc,CAAC,gCAAgC,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,WAAW,0CAAE,KAAK;QAClF,CAAC,cAAc,CAAC,gCAAgC,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,WAAW,0CAAE,KAAK;QAClF,CAAC,cAAc,CAAC,mCAAmC,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,WAAW,0CAAE,QAAQ;QACxF,CAAC,cAAc,CAAC,gCAAgC,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,SAAS,0CAAE,OAAO;QAClF,CAAC,cAAc,CAAC,iCAAiC,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,SAAS,0CAAE,QAAQ;QACpF,CAAC,cAAc,CAAC,8BAA8B,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,SAAS,0CAAE,KAAK;QAC9E,CAAC,cAAc,CAAC,8BAA8B,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,SAAS,0CAAE,KAAK;QAC9E,CAAC,cAAc,CAAC,iCAAiC,CAAC,EAAE,OAAA,OAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,4CAAE,SAAS,4CAAE,QAAQ;QACpF,CAAC,cAAc,CAAC,4BAA4B,CAAC,EAAE,OAAA,OAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,4CAAE,KAAK,4CAAE,OAAO;QAC1E,CAAC,cAAc,CAAC,6BAA6B,CAAC,EAAE,OAAA,OAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,4CAAE,KAAK,4CAAE,QAAQ;QAC5E,CAAC,cAAc,CAAC,0BAA0B,CAAC,EAAE,OAAA,OAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,4CAAE,KAAK,4CAAE,KAAK;QACtE,CAAC,cAAc,CAAC,0BAA0B,CAAC,EAAE,OAAA,OAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,4CAAE,KAAK,4CAAE,KAAK;QACtE,CAAC,cAAc,CAAC,6BAA6B,CAAC,EAAE,OAAA,OAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,4CAAE,KAAK,4CAAE,QAAQ;QAC5E,CAAC,cAAc,CAAC,gCAAgC,CAAC,EAAE,OAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,4CAAE,KAAK;QAC5E,CAAC,cAAc,CAAC,mCAAmC,CAAC,EAAE,OAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,4CAAE,QAAQ;QAClF,CAAC,cAAc,CAAC,qCAAqC,CAAC,EAAE,OAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,4CAAE,UAAU;QACtF,CAAC,cAAc,CAAC,oCAAoC,CAAC,EAAE,OAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,4CAAE,SAAS;KACrF,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { SYSTEM } from '../internal/environment';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { PromptInputProps } from './interfaces';\n\nexport function getPromptInputStyles(style: PromptInputProps['style']) {\n if (SYSTEM !== 'core') {\n return {};\n }\n\n return {\n borderRadius: style?.root?.borderRadius,\n borderWidth: style?.root?.borderWidth,\n fontSize: style?.root?.fontSize,\n fontWeight: style?.root?.fontWeight,\n paddingBlock: style?.root?.paddingBlock,\n paddingInline: style?.root?.paddingInline,\n [customCssProps.promptInputStyleBackgroundDefault]: style?.root?.backgroundColor?.default,\n [customCssProps.promptInputStyleBackgroundDisabled]: style?.root?.backgroundColor?.disabled,\n [customCssProps.promptInputStyleBackgroundHover]: style?.root?.backgroundColor?.hover,\n [customCssProps.promptInputStyleBackgroundFocus]: style?.root?.backgroundColor?.focus,\n [customCssProps.promptInputStyleBackgroundReadonly]: style?.root?.backgroundColor?.readonly,\n [customCssProps.promptInputStyleBorderColorDefault]: style?.root?.borderColor?.default,\n [customCssProps.promptInputStyleBorderColorDisabled]: style?.root?.borderColor?.disabled,\n [customCssProps.promptInputStyleBorderColorHover]: style?.root?.borderColor?.hover,\n [customCssProps.promptInputStyleBorderColorFocus]: style?.root?.borderColor?.focus,\n [customCssProps.promptInputStyleBorderColorReadonly]: style?.root?.borderColor?.readonly,\n [customCssProps.promptInputStyleBoxShadowDefault]: style?.root?.boxShadow?.default,\n [customCssProps.promptInputStyleBoxShadowDisabled]: style?.root?.boxShadow?.disabled,\n [customCssProps.promptInputStyleBoxShadowHover]: style?.root?.boxShadow?.hover,\n [customCssProps.promptInputStyleBoxShadowFocus]: style?.root?.boxShadow?.focus,\n [customCssProps.promptInputStyleBoxShadowReadonly]: style?.root?.boxShadow?.readonly,\n [customCssProps.promptInputStyleColorDefault]: style?.root?.color?.default,\n [customCssProps.promptInputStyleColorDisabled]: style?.root?.color?.disabled,\n [customCssProps.promptInputStyleColorHover]: style?.root?.color?.hover,\n [customCssProps.promptInputStyleColorFocus]: style?.root?.color?.focus,\n [customCssProps.promptInputStyleColorReadonly]: style?.root?.color?.readonly,\n [customCssProps.promptInputStylePlaceholderColor]: style?.placeholder?.color,\n [customCssProps.promptInputStylePlaceholderFontSize]: style?.placeholder?.fontSize,\n [customCssProps.promptInputStylePlaceholderFontWeight]: style?.placeholder?.fontWeight,\n [customCssProps.promptInputStylePlaceholderFontStyle]: style?.placeholder?.fontStyle,\n };\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/radio-group/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAQ/C,QAAA,MAAM,kBAAkB,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/radio-group/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAQ/C,QAAA,MAAM,kBAAkB,0HAgFvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
package/radio-group/internal.js
CHANGED
|
@@ -17,7 +17,7 @@ const InternalRadioGroup = React.forwardRef(({ name, value, items, ariaLabel, ar
|
|
|
17
17
|
const baseProps = getBaseProps(props);
|
|
18
18
|
const generatedName = useUniqueId('awsui-radio-');
|
|
19
19
|
const [radioButtonRef, radioButtonRefIndex] = useRadioGroupForwardFocus(ref, items, value);
|
|
20
|
-
return (React.createElement("div", { role: "radiogroup", "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, "aria-required": ariaRequired, "aria-controls": ariaControls, "aria-readonly": readOnly ? 'true' : undefined, ...baseProps, className: clsx(baseProps.className, testUtilStyles.root, styles['radio-group'], direction === 'horizontal' && styles['horizontal-group']), ref: __internalRootRef }, items &&
|
|
20
|
+
return (React.createElement("div", { role: "radiogroup", "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, "aria-required": ariaRequired, "aria-controls": ariaControls, "aria-readonly": readOnly ? 'true' : undefined, ...baseProps, className: clsx(baseProps.className, testUtilStyles.root, styles.root, styles['radio-group'], direction === 'horizontal' && styles['horizontal-group']), ref: __internalRootRef }, items &&
|
|
21
21
|
items.map((item, index) => (React.createElement(RadioButton, { key: item.value, ref: index === radioButtonRefIndex ? radioButtonRef : undefined, className: clsx(styles.radio, item.description && styles['radio--has-description'], direction === 'horizontal' && styles.horizontal, item.value === value && analyticsSelectors.selected), checked: item.value === value, name: name || generatedName, value: item.value, description: item.description, disabled: item.disabled, onSelect: () => fireNonCancelableEvent(onChange, { value: item.value }), controlId: item.controlId, readOnly: readOnly, style: style, ...getAnalyticsMetadataAttribute(!item.disabled && !readOnly
|
|
22
22
|
? {
|
|
23
23
|
detail: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/radio-group/internal.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 from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getBaseProps } from '../internal/base-component';\nimport RadioButton from '../internal/components/radio-button';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { GeneratedAnalyticsMetadataRadioGroupSelect } from './analytics-metadata/interfaces';\nimport { RadioGroupProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ntype InternalRadioGroupProps = RadioGroupProps & InternalBaseComponentProps;\n\nconst InternalRadioGroup = React.forwardRef(\n (\n {\n name,\n value,\n items,\n ariaLabel,\n ariaRequired,\n ariaControls,\n onChange,\n readOnly,\n __internalRootRef,\n style,\n direction,\n ...props\n }: InternalRadioGroupProps,\n ref: React.Ref<RadioGroupProps.Ref>\n ) => {\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(props);\n const baseProps = getBaseProps(props);\n const generatedName = useUniqueId('awsui-radio-');\n\n const [radioButtonRef, radioButtonRefIndex] = useRadioGroupForwardFocus(ref, items, value);\n\n return (\n <div\n role=\"radiogroup\"\n aria-labelledby={ariaLabelledby}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedby}\n aria-required={ariaRequired}\n aria-controls={ariaControls}\n aria-readonly={readOnly ? 'true' : undefined}\n {...baseProps}\n className={clsx(\n baseProps.className,\n testUtilStyles.root,\n styles['radio-group'],\n direction === 'horizontal' && styles['horizontal-group']\n )}\n ref={__internalRootRef}\n >\n {items &&\n items.map((item, index) => (\n <RadioButton\n key={item.value}\n ref={index === radioButtonRefIndex ? radioButtonRef : undefined}\n className={clsx(\n styles.radio,\n item.description && styles['radio--has-description'],\n direction === 'horizontal' && styles.horizontal,\n item.value === value && analyticsSelectors.selected\n )}\n checked={item.value === value}\n name={name || generatedName}\n value={item.value}\n description={item.description}\n disabled={item.disabled}\n onSelect={() => fireNonCancelableEvent(onChange, { value: item.value })}\n controlId={item.controlId}\n readOnly={readOnly}\n style={style}\n {...getAnalyticsMetadataAttribute(\n !item.disabled && !readOnly\n ? {\n detail: {\n position: `${index + 1}`,\n value: item.value,\n } as Partial<GeneratedAnalyticsMetadataRadioGroupSelect['detail']>,\n }\n : {}\n )}\n >\n {item.label}\n </RadioButton>\n ))}\n </div>\n );\n }\n);\n\nexport default InternalRadioGroup;\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/radio-group/internal.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 from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getBaseProps } from '../internal/base-component';\nimport RadioButton from '../internal/components/radio-button';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { GeneratedAnalyticsMetadataRadioGroupSelect } from './analytics-metadata/interfaces';\nimport { RadioGroupProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ntype InternalRadioGroupProps = RadioGroupProps & InternalBaseComponentProps;\n\nconst InternalRadioGroup = React.forwardRef(\n (\n {\n name,\n value,\n items,\n ariaLabel,\n ariaRequired,\n ariaControls,\n onChange,\n readOnly,\n __internalRootRef,\n style,\n direction,\n ...props\n }: InternalRadioGroupProps,\n ref: React.Ref<RadioGroupProps.Ref>\n ) => {\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(props);\n const baseProps = getBaseProps(props);\n const generatedName = useUniqueId('awsui-radio-');\n\n const [radioButtonRef, radioButtonRefIndex] = useRadioGroupForwardFocus(ref, items, value);\n\n return (\n <div\n role=\"radiogroup\"\n aria-labelledby={ariaLabelledby}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedby}\n aria-required={ariaRequired}\n aria-controls={ariaControls}\n aria-readonly={readOnly ? 'true' : undefined}\n {...baseProps}\n className={clsx(\n baseProps.className,\n testUtilStyles.root,\n styles.root,\n styles['radio-group'],\n direction === 'horizontal' && styles['horizontal-group']\n )}\n ref={__internalRootRef}\n >\n {items &&\n items.map((item, index) => (\n <RadioButton\n key={item.value}\n ref={index === radioButtonRefIndex ? radioButtonRef : undefined}\n className={clsx(\n styles.radio,\n item.description && styles['radio--has-description'],\n direction === 'horizontal' && styles.horizontal,\n item.value === value && analyticsSelectors.selected\n )}\n checked={item.value === value}\n name={name || generatedName}\n value={item.value}\n description={item.description}\n disabled={item.disabled}\n onSelect={() => fireNonCancelableEvent(onChange, { value: item.value })}\n controlId={item.controlId}\n readOnly={readOnly}\n style={style}\n {...getAnalyticsMetadataAttribute(\n !item.disabled && !readOnly\n ? {\n detail: {\n position: `${index + 1}`,\n value: item.value,\n } as Partial<GeneratedAnalyticsMetadataRadioGroupSelect['detail']>,\n }\n : {}\n )}\n >\n {item.label}\n </RadioButton>\n ))}\n </div>\n );\n }\n);\n\nexport default InternalRadioGroup;\n"]}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
4
|
+
"root": "awsui_root_1mabk_9xklq_145",
|
|
5
|
+
"radio-group": "awsui_radio-group_1mabk_9xklq_149",
|
|
6
|
+
"horizontal-group": "awsui_horizontal-group_1mabk_9xklq_180",
|
|
7
|
+
"radio": "awsui_radio_1mabk_9xklq_149",
|
|
8
|
+
"horizontal": "awsui_horizontal_1mabk_9xklq_180",
|
|
9
|
+
"radio--has-description": "awsui_radio--has-description_1mabk_9xklq_194"
|
|
9
10
|
};
|
|
10
11
|
|
|
@@ -142,7 +142,11 @@
|
|
|
142
142
|
*/
|
|
143
143
|
/* Style used for links in slots/components that are text heavy, to help links stand out among
|
|
144
144
|
surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
|
|
145
|
-
.
|
|
145
|
+
.awsui_root_1mabk_9xklq_145:not(#\9) {
|
|
146
|
+
/* used for backwards-compatibility with older versions of test-utils */
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.awsui_radio-group_1mabk_9xklq_149:not(#\9) {
|
|
146
150
|
border-collapse: separate;
|
|
147
151
|
border-spacing: 0;
|
|
148
152
|
box-sizing: border-box;
|
|
@@ -173,24 +177,24 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
173
177
|
-webkit-font-smoothing: auto;
|
|
174
178
|
-moz-osx-font-smoothing: auto;
|
|
175
179
|
}
|
|
176
|
-
.awsui_radio-
|
|
180
|
+
.awsui_radio-group_1mabk_9xklq_149:not(#\9):not(.awsui_horizontal-group_1mabk_9xklq_180) {
|
|
177
181
|
display: block;
|
|
178
182
|
}
|
|
179
|
-
.awsui_radio-
|
|
183
|
+
.awsui_radio-group_1mabk_9xklq_149.awsui_horizontal-group_1mabk_9xklq_180:not(#\9) {
|
|
180
184
|
display: flex;
|
|
181
185
|
align-items: flex-start;
|
|
182
186
|
flex-wrap: wrap;
|
|
183
187
|
gap: var(--space-scaled-l-sej05l, 20px);
|
|
184
188
|
}
|
|
185
189
|
|
|
186
|
-
.
|
|
190
|
+
.awsui_radio_1mabk_9xklq_149 + .awsui_radio_1mabk_9xklq_149:not(#\9):not(.awsui_horizontal_1mabk_9xklq_180) {
|
|
187
191
|
margin-block-start: var(--space-scaled-xxs-pfm1nx, 4px);
|
|
188
192
|
}
|
|
189
193
|
|
|
190
|
-
.awsui_radio--has-
|
|
194
|
+
.awsui_radio--has-description_1mabk_9xklq_194 + .awsui_radio_1mabk_9xklq_149:not(#\9):not(.awsui_horizontal_1mabk_9xklq_180) {
|
|
191
195
|
margin-block-start: var(--space-scaled-xs-xwoogq, 8px);
|
|
192
196
|
}
|
|
193
197
|
|
|
194
|
-
.
|
|
198
|
+
.awsui_radio_1mabk_9xklq_149.awsui_horizontal_1mabk_9xklq_180:not(#\9) {
|
|
195
199
|
max-inline-size: calc(16 * var(--space-scaled-xxl-6wgq96, 32px));
|
|
196
200
|
}
|
|
@@ -2,10 +2,11 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
5
|
+
"root": "awsui_root_1mabk_9xklq_145",
|
|
6
|
+
"radio-group": "awsui_radio-group_1mabk_9xklq_149",
|
|
7
|
+
"horizontal-group": "awsui_horizontal-group_1mabk_9xklq_180",
|
|
8
|
+
"radio": "awsui_radio_1mabk_9xklq_149",
|
|
9
|
+
"horizontal": "awsui_horizontal_1mabk_9xklq_180",
|
|
10
|
+
"radio--has-description": "awsui_radio--has-description_1mabk_9xklq_194"
|
|
10
11
|
};
|
|
11
12
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAGrD,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAGrD,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eASpE"}
|
|
@@ -1,19 +1,18 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
-
'use client';
|
|
4
3
|
import React from 'react';
|
|
5
|
-
|
|
4
|
+
|
|
5
|
+
import CoreComponent from './internal-do-not-use-core';
|
|
6
6
|
import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
7
|
+
import { validateProps } from '@cloudscape-design/component-toolkit/internal';
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
const SegmentedControl = (props) => {
|
|
12
|
+
validateProps('SegmentedControl', props, ["style"], {}, 'console');
|
|
13
|
+
return React.createElement(CoreComponent, props);
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
|
|
18
17
|
applyDisplayName(SegmentedControl, 'SegmentedControl');
|
|
19
|
-
|
|
18
|
+
export default SegmentedControl;
|
|
@@ -36,6 +36,9 @@ export interface SegmentedControlProps extends BaseComponentProps {
|
|
|
36
36
|
* Called when the user selects a different segment.
|
|
37
37
|
*/
|
|
38
38
|
onChange?: NonCancelableEventHandler<SegmentedControlProps.ChangeDetail>;
|
|
39
|
+
/**
|
|
40
|
+
* @awsuiSystem core
|
|
41
|
+
*/
|
|
39
42
|
}
|
|
40
43
|
export declare namespace SegmentedControlProps {
|
|
41
44
|
interface Option {
|
|
@@ -51,4 +54,32 @@ export declare namespace SegmentedControlProps {
|
|
|
51
54
|
interface ChangeDetail {
|
|
52
55
|
selectedId: string;
|
|
53
56
|
}
|
|
57
|
+
interface Style {
|
|
58
|
+
root?: {
|
|
59
|
+
borderRadius?: string;
|
|
60
|
+
};
|
|
61
|
+
segment?: {
|
|
62
|
+
background?: {
|
|
63
|
+
active?: string;
|
|
64
|
+
default?: string;
|
|
65
|
+
disabled?: string;
|
|
66
|
+
hover?: string;
|
|
67
|
+
};
|
|
68
|
+
color?: {
|
|
69
|
+
active?: string;
|
|
70
|
+
default?: string;
|
|
71
|
+
disabled?: string;
|
|
72
|
+
hover?: string;
|
|
73
|
+
};
|
|
74
|
+
focusRing?: {
|
|
75
|
+
borderColor?: string;
|
|
76
|
+
borderRadius?: string;
|
|
77
|
+
borderWidth?: string;
|
|
78
|
+
};
|
|
79
|
+
borderRadius?: string;
|
|
80
|
+
fontSize?: string;
|
|
81
|
+
paddingBlock?: string;
|
|
82
|
+
paddingInline?: string;
|
|
83
|
+
};
|
|
84
|
+
}
|
|
54
85
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,qBAAsB,SAAQ,kBAAkB;IAC/D;;OAEG;IACH,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IAEtD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,qBAAsB,SAAQ,kBAAkB;IAC/D;;OAEG;IACH,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IAEtD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC;IAEzE;;OAEG;IACH,KAAK,CAAC,EAAE,qBAAqB,CAAC,KAAK,CAAC;CACrC;AAED,yBAAiB,qBAAqB,CAAC;IACrC,UAAiB,MAAM;QACrB,EAAE,EAAE,MAAM,CAAC;QACX,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,YAAY;QAC3B,UAAU,EAAE,MAAM,CAAC;KACpB;IAED,UAAiB,KAAK;QACpB,IAAI,CAAC,EAAE;YACL,YAAY,CAAC,EAAE,MAAM,CAAC;SACvB,CAAC;QACF,OAAO,CAAC,EAAE;YACR,UAAU,CAAC,EAAE;gBACX,MAAM,CAAC,EAAE,MAAM,CAAC;gBAChB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,KAAK,CAAC,EAAE,MAAM,CAAC;aAChB,CAAC;YACF,KAAK,CAAC,EAAE;gBACN,MAAM,CAAC,EAAE,MAAM,CAAC;gBAChB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,KAAK,CAAC,EAAE,MAAM,CAAC;aAChB,CAAC;YACF,SAAS,CAAC,EAAE;gBACV,WAAW,CAAC,EAAE,MAAM,CAAC;gBACrB,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,WAAW,CAAC,EAAE,MAAM,CAAC;aACtB,CAAC;YACF,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;YAClB,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,aAAa,CAAC,EAAE,MAAM,CAAC;SACxB,CAAC;KACH;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/segmented-control/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface SegmentedControlProps extends BaseComponentProps {\n /**\n * ID of the selected option. If you want to clear the selection, use `null`.\n */\n selectedId: string | null;\n\n /**\n * An array of objects representing options. Only up to 6 options are supported.\n * Each segment has the following properties:\n *\n * - `id` (string) - The ID of the segment.\n * - `disabled` [boolean] - (Optional) Determines whether the segment is disabled, which prevents the user from selecting it.\n * - `disabledReason` (string) - (Optional) Displays tooltip near the segment when disabled. Use to provide additional context.\n * - `iconName` (string) - (Optional) Specifies the name of the icon, used with the [icon component](/components/icon/).\n * - `iconAlt` (string) - (Optional) Specifies alternate text for the icon when using `iconUrl`, or `iconName` without `text`.\n * This is required when you use an icon without `text`.\n * - `iconUrl` (string) - (Optional) Specifies the URL of a custom icon.\n * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n * - `text` (string) - (Optional) Specifies the text of the segment.\n */\n options?: ReadonlyArray<SegmentedControlProps.Option>;\n\n /**\n * Defines the label of the entire segmented control. In the standard view (that is, all individual segments are visible),\n * this label is used as `aria-label` on the group of segments. In a narrow container, where this component is displayed as a select component,\n * the label is visible and attached to the select component, unless `ariaLabelledBy` is defined. Don't use `label` and `ariaLabelledBy` at the same time.\n */\n label?: string;\n\n /**\n * Adds aria-labelledby to the component. Create a visually hidden element with an ID and set this property to that ID. If you don't want the label to be visible in narrow containers, use this property instead of `label`.\n */\n ariaLabelledby?: string;\n\n /**\n * Called when the user selects a different segment.\n */\n onChange?: NonCancelableEventHandler<SegmentedControlProps.ChangeDetail>;\n}\n\nexport namespace SegmentedControlProps {\n export interface Option {\n id: string;\n disabled?: boolean;\n disabledReason?: string;\n iconName?: IconProps.Name;\n iconAlt?: string;\n iconUrl?: string;\n iconSvg?: React.ReactNode;\n text?: string;\n }\n\n export interface ChangeDetail {\n selectedId: string;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/segmented-control/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface SegmentedControlProps extends BaseComponentProps {\n /**\n * ID of the selected option. If you want to clear the selection, use `null`.\n */\n selectedId: string | null;\n\n /**\n * An array of objects representing options. Only up to 6 options are supported.\n * Each segment has the following properties:\n *\n * - `id` (string) - The ID of the segment.\n * - `disabled` [boolean] - (Optional) Determines whether the segment is disabled, which prevents the user from selecting it.\n * - `disabledReason` (string) - (Optional) Displays tooltip near the segment when disabled. Use to provide additional context.\n * - `iconName` (string) - (Optional) Specifies the name of the icon, used with the [icon component](/components/icon/).\n * - `iconAlt` (string) - (Optional) Specifies alternate text for the icon when using `iconUrl`, or `iconName` without `text`.\n * This is required when you use an icon without `text`.\n * - `iconUrl` (string) - (Optional) Specifies the URL of a custom icon.\n * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n * - `text` (string) - (Optional) Specifies the text of the segment.\n */\n options?: ReadonlyArray<SegmentedControlProps.Option>;\n\n /**\n * Defines the label of the entire segmented control. In the standard view (that is, all individual segments are visible),\n * this label is used as `aria-label` on the group of segments. In a narrow container, where this component is displayed as a select component,\n * the label is visible and attached to the select component, unless `ariaLabelledBy` is defined. Don't use `label` and `ariaLabelledBy` at the same time.\n */\n label?: string;\n\n /**\n * Adds aria-labelledby to the component. Create a visually hidden element with an ID and set this property to that ID. If you don't want the label to be visible in narrow containers, use this property instead of `label`.\n */\n ariaLabelledby?: string;\n\n /**\n * Called when the user selects a different segment.\n */\n onChange?: NonCancelableEventHandler<SegmentedControlProps.ChangeDetail>;\n\n /**\n * @awsuiSystem core\n */\n style?: SegmentedControlProps.Style;\n}\n\nexport namespace SegmentedControlProps {\n export interface Option {\n id: string;\n disabled?: boolean;\n disabledReason?: string;\n iconName?: IconProps.Name;\n iconAlt?: string;\n iconUrl?: string;\n iconSvg?: React.ReactNode;\n text?: string;\n }\n\n export interface ChangeDetail {\n selectedId: string;\n }\n\n export interface Style {\n root?: {\n borderRadius?: string;\n };\n segment?: {\n background?: {\n active?: string;\n default?: string;\n disabled?: string;\n hover?: string;\n };\n color?: {\n active?: string;\n default?: string;\n disabled?: string;\n hover?: string;\n };\n focusRing?: {\n borderColor?: string;\n borderRadius?: string;\n borderWidth?: string;\n };\n borderRadius?: string;\n fontSize?: string;\n paddingBlock?: string;\n paddingInline?: string;\n };\n }\n}\n"]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
'use client';
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import useBaseComponent from '../internal/hooks/use-base-component';
|
|
6
|
+
import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
7
|
+
import InternalSegmentedControl from './internal';
|
|
8
|
+
export default function SegmentedControl(props) {
|
|
9
|
+
var _a;
|
|
10
|
+
const baseComponentProps = useBaseComponent('SegmentedControl', {
|
|
11
|
+
props: {},
|
|
12
|
+
metadata: {
|
|
13
|
+
hasDisabledReasons: ((_a = props.options) !== null && _a !== void 0 ? _a : []).some(option => Boolean(option.disabledReason)),
|
|
14
|
+
},
|
|
15
|
+
});
|
|
16
|
+
return React.createElement(InternalSegmentedControl, { ...props, ...baseComponentProps });
|
|
17
|
+
}
|
|
18
|
+
applyDisplayName(SegmentedControl, 'SegmentedControl');
|
|
19
|
+
//# sourceMappingURL=internal-do-not-use-core.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/segmented-control/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,wBAAwB,MAAM,YAAY,CAAC;AAIlD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAA4B;;IACnE,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,kBAAkB,EAAE;QAC9D,KAAK,EAAE,EAAE;QACT,QAAQ,EAAE;YACR,kBAAkB,EAAE,CAAC,MAAA,KAAK,CAAC,OAAO,mCAAI,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;SACzF;KACF,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/segmented-control/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,wBAAwB,MAAM,YAAY,CAAC;AAIlD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAA4B;;IACnE,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,kBAAkB,EAAE;QAC9D,KAAK,EAAE,EAAE;QACT,QAAQ,EAAE;YACR,kBAAkB,EAAE,CAAC,MAAA,KAAK,CAAC,OAAO,mCAAI,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;SACzF;KACF,CAAC,CAAC;IAEH,OAAO,oBAAC,wBAAwB,OAAK,KAAK,KAAM,kBAAkB,GAAI,CAAC;AACzE,CAAC;AAED,gBAAgB,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { SegmentedControlProps } from './interfaces';\nimport InternalSegmentedControl from './internal';\n\nexport { SegmentedControlProps };\n\nexport default function SegmentedControl(props: SegmentedControlProps) {\n const baseComponentProps = useBaseComponent('SegmentedControl', {\n props: {},\n metadata: {\n hasDisabledReasons: (props.options ?? []).some(option => Boolean(option.disabledReason)),\n },\n });\n\n return <InternalSegmentedControl {...props} {...baseComponentProps} />;\n}\n\napplyDisplayName(SegmentedControl, 'SegmentedControl');\n"]}
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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;AAMrD,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,EACR,KAAK,GACN,EAAE,qBAAqB,eAiFvB"}
|
|
@@ -7,8 +7,9 @@ import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
|
7
7
|
import { KeyCode } from '../internal/keycode';
|
|
8
8
|
import handleKey from '../internal/utils/handle-key';
|
|
9
9
|
import { Segment } from './segment';
|
|
10
|
+
import { getSegmentedControlRootStyles } from './style';
|
|
10
11
|
import styles from './styles.css.js';
|
|
11
|
-
export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, }) {
|
|
12
|
+
export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, style, }) {
|
|
12
13
|
const segmentByIdRef = useRef({});
|
|
13
14
|
const selectedOptions = (options || []).filter(option => {
|
|
14
15
|
return option.id === selectedId;
|
|
@@ -31,7 +32,7 @@ export default function InternalSegmentedControl({ selectedId, options, label, a
|
|
|
31
32
|
const isVisualRefresh = useVisualRefresh();
|
|
32
33
|
return (React.createElement("div", { className: clsx(styles['segment-part'], styles[`segment-count-${options === null || options === void 0 ? void 0 : options.length}`], {
|
|
33
34
|
[styles.refresh]: isVisualRefresh,
|
|
34
|
-
}), "aria-label": label, "aria-labelledby": ariaLabelledby, role: "toolbar" }, options &&
|
|
35
|
+
}), "aria-label": label, "aria-labelledby": ariaLabelledby, role: "toolbar", style: getSegmentedControlRootStyles(style) }, options &&
|
|
35
36
|
options.map((option, index) => {
|
|
36
37
|
const isActive = selectedId === option.id;
|
|
37
38
|
const focusableSegmentIndex = focusableSegments.indexOf(option);
|
|
@@ -53,7 +54,7 @@ export default function InternalSegmentedControl({ selectedId, options, label, a
|
|
|
53
54
|
if (selectedId !== option.id) {
|
|
54
55
|
fireNonCancelableEvent(onChange, { selectedId: option.id });
|
|
55
56
|
}
|
|
56
|
-
}, onKeyDown: event => moveHighlight(event, focusableSegmentIndex) }));
|
|
57
|
+
}, onKeyDown: event => moveHighlight(event, focusableSegmentIndex), style: style }));
|
|
57
58
|
})));
|
|
58
59
|
}
|
|
59
60
|
//# sourceMappingURL=internal-segmented-control.js.map
|
|
@@ -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,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,SAAS,MAAM,8BAA8B,CAAC;AAErD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,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';\nimport { getSegmentedControlRootStyles } from './style';\n\nimport styles from './styles.css.js';\n\nexport default function InternalSegmentedControl({\n selectedId,\n options,\n label,\n ariaLabelledby,\n onChange,\n style,\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 style={getSegmentedControlRootStyles(style)}\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 style={style}\n />\n );\n })}\n </div>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/internal.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAKrD,KAAK,6BAA6B,GAAG,qBAAqB,GAAG,0BAA0B,CAAC;AAExF,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,6BAA6B,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/internal.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAKrD,KAAK,6BAA6B,GAAG,qBAAqB,GAAG,0BAA0B,CAAC;AAExF,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,EACR,iBAAiB,EACjB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,6BAA6B,eAyC/B"}
|