@cloudscape-design/components 3.0.1131 → 3.0.1132
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/internal/base-component/styles.scoped.css +1 -1
- package/internal/components/radio-button/index.d.ts +5 -0
- package/internal/components/radio-button/index.d.ts.map +1 -0
- package/{radio-group/radio-button.js → internal/components/radio-button/index.js} +10 -10
- package/internal/components/radio-button/index.js.map +1 -0
- package/internal/components/radio-button/interfaces.d.ts +126 -0
- package/internal/components/radio-button/interfaces.d.ts.map +1 -0
- package/internal/components/radio-button/interfaces.js +2 -0
- package/internal/components/radio-button/interfaces.js.map +1 -0
- package/internal/components/radio-button/styles.css.js +12 -0
- package/internal/components/radio-button/styles.scoped.css +211 -0
- package/internal/components/radio-button/styles.selectors.js +13 -0
- package/internal/components/radio-button/test-classes/styles.css.js +6 -0
- package/internal/components/radio-button/test-classes/styles.scoped.css +7 -0
- package/internal/components/radio-button/test-classes/styles.selectors.js +7 -0
- package/internal/environment.js +2 -2
- package/internal/environment.json +2 -2
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/radio-group/index.d.ts +1 -1
- package/radio-group/index.d.ts.map +1 -1
- package/radio-group/interfaces.d.ts +3 -50
- package/radio-group/interfaces.d.ts.map +1 -1
- package/radio-group/interfaces.js +2 -0
- package/radio-group/interfaces.js.map +1 -1
- package/radio-group/internal.d.ts +1 -1
- package/radio-group/internal.d.ts.map +1 -1
- package/radio-group/internal.js +10 -4
- package/radio-group/internal.js.map +1 -1
- package/radio-group/styles.css.js +3 -10
- package/radio-group/styles.scoped.css +3 -75
- package/radio-group/styles.selectors.js +3 -10
- package/radio-group/test-classes/styles.css.js +6 -0
- package/radio-group/test-classes/styles.scoped.css +7 -0
- package/radio-group/test-classes/styles.selectors.js +7 -0
- package/table/selection/selection-control.js +2 -2
- package/table/selection/selection-control.js.map +1 -1
- package/test-utils/dom/radio-group/index.js +4 -3
- package/test-utils/dom/radio-group/index.js.map +1 -1
- package/test-utils/dom/radio-group/radio-button.d.ts +1 -0
- package/test-utils/dom/radio-group/radio-button.js +2 -0
- package/test-utils/dom/radio-group/radio-button.js.map +1 -1
- package/test-utils/selectors/radio-group/index.js +4 -3
- package/test-utils/selectors/radio-group/index.js.map +1 -1
- package/test-utils/selectors/radio-group/radio-button.d.ts +1 -0
- package/test-utils/selectors/radio-group/radio-button.js +2 -0
- package/test-utils/selectors/radio-group/radio-button.js.map +1 -1
- package/tiles/tile.d.ts.map +1 -1
- package/tiles/tile.js +2 -2
- package/tiles/tile.js.map +1 -1
- package/radio-group/radio-button.d.ts +0 -13
- package/radio-group/radio-button.d.ts.map +0 -1
- package/radio-group/radio-button.js.map +0 -1
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { InternalBaseComponentProps } from '../../hooks/use-base-component';
|
|
3
|
+
import { RadioButtonProps } from './interfaces';
|
|
4
|
+
declare const _default: React.ForwardRefExoticComponent<RadioButtonProps & InternalBaseComponentProps & React.RefAttributes<HTMLInputElement>>;
|
|
5
|
+
export default _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/radio-button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAWtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;;AAKhD,wBAoFG"}
|
|
@@ -5,23 +5,23 @@ import clsx from 'clsx';
|
|
|
5
5
|
import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
|
|
6
6
|
import { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';
|
|
7
7
|
import { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
|
|
8
|
-
import
|
|
9
|
-
import {
|
|
10
|
-
import
|
|
8
|
+
import { getAbstractSwitchStyles, getInnerCircleStyle, getOuterCircleStyle } from '../../../radio-group/style';
|
|
9
|
+
import { getBaseProps } from '../../base-component';
|
|
10
|
+
import AbstractSwitch from '../../components/abstract-switch';
|
|
11
|
+
import { fireNonCancelableEvent } from '../../events';
|
|
11
12
|
import styles from './styles.css.js';
|
|
12
|
-
|
|
13
|
+
import testUtilStyles from './test-classes/styles.css.js';
|
|
14
|
+
export default React.forwardRef(function RadioButton({ name, children, value, checked, description, disabled, controlId, onChange, readOnly, className, style, ...rest }, ref) {
|
|
13
15
|
const radioButtonRef = useRef(null);
|
|
14
16
|
const mergedRefs = useMergeRefs(radioButtonRef, ref);
|
|
15
17
|
const { tabIndex } = useSingleTabStopNavigation(radioButtonRef);
|
|
16
|
-
|
|
18
|
+
const baseProps = getBaseProps(rest);
|
|
19
|
+
return (React.createElement(AbstractSwitch, { ...baseProps, className: clsx(testUtilStyles.root, className), controlClassName: styles['radio-control'], outlineClassName: styles.outline, label: children, description: description, disabled: disabled, readOnly: readOnly, controlId: controlId, style: getAbstractSwitchStyles(style, checked, disabled, readOnly), __internalRootRef: rest.__internalRootRef, ...copyAnalyticsMetadataAttribute(rest), nativeControl: nativeControlProps => (React.createElement("input", { ...nativeControlProps, tabIndex: tabIndex, type: "radio", ref: mergedRefs, name: name, value: value, checked: checked, "aria-disabled": readOnly && !disabled ? 'true' : undefined,
|
|
17
20
|
// empty handler to suppress React controllability warning
|
|
18
21
|
onChange: () => { } })), onClick: () => {
|
|
19
22
|
var _a;
|
|
20
23
|
(_a = radioButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
21
|
-
|
|
22
|
-
return;
|
|
23
|
-
}
|
|
24
|
-
fireNonCancelableEvent(onChange, { value });
|
|
24
|
+
fireNonCancelableEvent(onChange, { checked: !checked });
|
|
25
25
|
}, styledControl: React.createElement("svg", { viewBox: "0 0 100 100", focusable: "false", "aria-hidden": "true" },
|
|
26
26
|
React.createElement("circle", { className: clsx(styles['styled-circle-border'], {
|
|
27
27
|
[styles['styled-circle-disabled']]: disabled,
|
|
@@ -33,4 +33,4 @@ export default React.forwardRef(function RadioButton({ name, label, value, check
|
|
|
33
33
|
[styles['styled-circle-readonly']]: readOnly,
|
|
34
34
|
}), strokeWidth: 30, cx: 50, cy: 50, r: 35, style: getInnerCircleStyle(style, checked, disabled, readOnly) })) }));
|
|
35
35
|
});
|
|
36
|
-
//# sourceMappingURL=
|
|
36
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/radio-button/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\nimport { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getAbstractSwitchStyles, getInnerCircleStyle, getOuterCircleStyle } from '../../../radio-group/style';\nimport { getBaseProps } from '../../base-component';\nimport AbstractSwitch from '../../components/abstract-switch';\nimport { fireNonCancelableEvent } from '../../events';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component';\nimport { RadioButtonProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\nexport default React.forwardRef(function RadioButton(\n {\n name,\n children,\n value,\n checked,\n description,\n disabled,\n controlId,\n onChange,\n readOnly,\n className,\n style,\n ...rest\n }: RadioButtonProps & InternalBaseComponentProps,\n ref: React.Ref<HTMLInputElement>\n) {\n const radioButtonRef = useRef<HTMLInputElement>(null);\n const mergedRefs = useMergeRefs(radioButtonRef, ref);\n\n const { tabIndex } = useSingleTabStopNavigation(radioButtonRef);\n const baseProps = getBaseProps(rest);\n\n return (\n <AbstractSwitch\n {...baseProps}\n className={clsx(testUtilStyles.root, className)}\n controlClassName={styles['radio-control']}\n outlineClassName={styles.outline}\n label={children}\n description={description}\n disabled={disabled}\n readOnly={readOnly}\n controlId={controlId}\n style={getAbstractSwitchStyles(style, checked, disabled, readOnly)}\n __internalRootRef={rest.__internalRootRef}\n {...copyAnalyticsMetadataAttribute(rest)}\n nativeControl={nativeControlProps => (\n <input\n {...nativeControlProps}\n tabIndex={tabIndex}\n type=\"radio\"\n ref={mergedRefs}\n name={name}\n value={value}\n checked={checked}\n aria-disabled={readOnly && !disabled ? 'true' : undefined}\n // empty handler to suppress React controllability warning\n onChange={() => {}}\n />\n )}\n onClick={() => {\n radioButtonRef.current?.focus();\n fireNonCancelableEvent(onChange, { checked: !checked });\n }}\n styledControl={\n <svg viewBox=\"0 0 100 100\" focusable=\"false\" aria-hidden=\"true\">\n <circle\n className={clsx(styles['styled-circle-border'], {\n [styles['styled-circle-disabled']]: disabled,\n [styles['styled-circle-readonly']]: readOnly,\n })}\n strokeWidth={6.25}\n cx={50}\n cy={50}\n r={46}\n style={getOuterCircleStyle(style, checked, disabled, readOnly)}\n />\n <circle\n className={clsx(styles['styled-circle-fill'], {\n [styles['styled-circle-disabled']]: disabled,\n [styles['styled-circle-checked']]: checked,\n [styles['styled-circle-readonly']]: readOnly,\n })}\n strokeWidth={30}\n cx={50}\n cy={50}\n r={35}\n style={getInnerCircleStyle(style, checked, disabled, readOnly)}\n />\n </svg>\n }\n />\n );\n});\n"]}
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { BaseComponentProps } from '../../base-component';
|
|
3
|
+
import { NonCancelableEventHandler } from '../../events';
|
|
4
|
+
/**
|
|
5
|
+
* @awsuiSystem core
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
export interface RadioButtonProps extends BaseComponentProps {
|
|
9
|
+
/**
|
|
10
|
+
* Specifies if the component is selected.
|
|
11
|
+
*/
|
|
12
|
+
checked: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Specifies the ID of the native form element. You can use it to relate
|
|
15
|
+
* a label element's `for` attribute to this control.
|
|
16
|
+
*/
|
|
17
|
+
controlId?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Name of the group that the radio button belongs to.
|
|
20
|
+
*/
|
|
21
|
+
name: string;
|
|
22
|
+
/**
|
|
23
|
+
* Description that appears below the label.
|
|
24
|
+
*/
|
|
25
|
+
description?: React.ReactNode;
|
|
26
|
+
/**
|
|
27
|
+
* Specifies if the control is disabled, which prevents the
|
|
28
|
+
* user from modifying the value and prevents the value from
|
|
29
|
+
* being included in a form submission. A disabled control can't
|
|
30
|
+
* receive focus.
|
|
31
|
+
*/
|
|
32
|
+
disabled?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* The control's label that's displayed next to the radio button. A state change occurs when a user clicks on it.
|
|
35
|
+
* @displayname label
|
|
36
|
+
*/
|
|
37
|
+
children?: React.ReactNode;
|
|
38
|
+
/**
|
|
39
|
+
* Attributes to add to the native `input` element.
|
|
40
|
+
* Some attributes will be automatically combined with internal attribute values:
|
|
41
|
+
* - `className` will be appended.
|
|
42
|
+
* - Event handlers will be chained, unless the default is prevented.
|
|
43
|
+
*
|
|
44
|
+
* We do not support using this attribute to apply custom styling.
|
|
45
|
+
*
|
|
46
|
+
* @awsuiSystem core
|
|
47
|
+
*/
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Called when the user changes the component state. The event `detail` contains the current value for the `checked` property.
|
|
51
|
+
*/
|
|
52
|
+
onChange?: NonCancelableEventHandler<RadioButtonProps.ChangeDetail>;
|
|
53
|
+
/**
|
|
54
|
+
* Specifies if the radio button is read-only, which prevents the
|
|
55
|
+
* user from modifying the value, but does not prevent the value from
|
|
56
|
+
* being included in a form submission. A read-only control is still focusable.
|
|
57
|
+
*
|
|
58
|
+
* This property should be set for either all or none of the radio buttons in a group.
|
|
59
|
+
*/
|
|
60
|
+
readOnly?: boolean;
|
|
61
|
+
/**
|
|
62
|
+
* @awsuiSystem core
|
|
63
|
+
*/
|
|
64
|
+
|
|
65
|
+
/**
|
|
66
|
+
* Sets the value attribute to the native control.
|
|
67
|
+
* If using native form submission, this value is sent to the server if the radio button is checked.
|
|
68
|
+
* It is never shown to the user by their user agent.
|
|
69
|
+
* For more details, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/radio#value).
|
|
70
|
+
*/
|
|
71
|
+
value?: string;
|
|
72
|
+
}
|
|
73
|
+
export declare namespace RadioButtonProps {
|
|
74
|
+
interface ChangeDetail {
|
|
75
|
+
checked: boolean;
|
|
76
|
+
}
|
|
77
|
+
interface Ref {
|
|
78
|
+
/**
|
|
79
|
+
* Sets input focus onto the UI control.
|
|
80
|
+
*/
|
|
81
|
+
focus(): void;
|
|
82
|
+
}
|
|
83
|
+
interface Style {
|
|
84
|
+
input?: {
|
|
85
|
+
fill?: {
|
|
86
|
+
checked?: string;
|
|
87
|
+
default?: string;
|
|
88
|
+
disabled?: string;
|
|
89
|
+
readOnly?: string;
|
|
90
|
+
};
|
|
91
|
+
stroke?: {
|
|
92
|
+
default?: string;
|
|
93
|
+
disabled?: string;
|
|
94
|
+
readOnly?: string;
|
|
95
|
+
};
|
|
96
|
+
circle?: {
|
|
97
|
+
fill?: {
|
|
98
|
+
checked?: string;
|
|
99
|
+
disabled?: string;
|
|
100
|
+
readOnly?: string;
|
|
101
|
+
};
|
|
102
|
+
};
|
|
103
|
+
focusRing?: {
|
|
104
|
+
borderColor?: string;
|
|
105
|
+
borderRadius?: string;
|
|
106
|
+
borderWidth?: string;
|
|
107
|
+
};
|
|
108
|
+
};
|
|
109
|
+
label?: {
|
|
110
|
+
color?: {
|
|
111
|
+
checked?: string;
|
|
112
|
+
default?: string;
|
|
113
|
+
disabled?: string;
|
|
114
|
+
readOnly?: string;
|
|
115
|
+
};
|
|
116
|
+
};
|
|
117
|
+
description?: {
|
|
118
|
+
color?: {
|
|
119
|
+
checked?: string;
|
|
120
|
+
default?: string;
|
|
121
|
+
disabled?: string;
|
|
122
|
+
readOnly?: string;
|
|
123
|
+
};
|
|
124
|
+
};
|
|
125
|
+
}
|
|
126
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/radio-button/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AACzD;;GAEG;AACH,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAEtE,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;;;;;;OASG;IACH,qBAAqB,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEtF;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAEpE;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC;IAE/B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,yBAAiB,gBAAgB,CAAC;IAChC,UAAiB,YAAY;QAC3B,OAAO,EAAE,OAAO,CAAC;KAClB;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;IAED,UAAiB,KAAK;QACpB,KAAK,CAAC,EAAE;YACN,IAAI,CAAC,EAAE;gBACL,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;YACF,MAAM,CAAC,EAAE;gBACP,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;YACF,MAAM,CAAC,EAAE;gBACP,IAAI,CAAC,EAAE;oBACL,OAAO,CAAC,EAAE,MAAM,CAAC;oBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;oBAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;iBACnB,CAAC;aACH,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;SACH,CAAC;QACF,KAAK,CAAC,EAAE;YACN,KAAK,CAAC,EAAE;gBACN,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;SACH,CAAC;QACF,WAAW,CAAC,EAAE;YACZ,KAAK,CAAC,EAAE;gBACN,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;SACH,CAAC;KACH;CACF"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/radio-button/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 { BaseComponentProps } from '../../base-component';\nimport { NonCancelableEventHandler } from '../../events';\n/**\n * @awsuiSystem core\n */\nimport { NativeAttributes } from '../../utils/with-native-attributes';\n\nexport interface RadioButtonProps extends BaseComponentProps {\n /**\n * Specifies if the component is selected.\n */\n checked: boolean;\n\n /**\n * Specifies the ID of the native form element. You can use it to relate\n * a label element's `for` attribute to this control.\n */\n controlId?: string;\n\n /**\n * Name of the group that the radio button belongs to.\n */\n name: string;\n\n /**\n * Description that appears below the label.\n */\n description?: React.ReactNode;\n\n /**\n * Specifies if the control is disabled, which prevents the\n * user from modifying the value and prevents the value from\n * being included in a form submission. A disabled control can't\n * receive focus.\n */\n disabled?: boolean;\n\n /**\n * The control's label that's displayed next to the radio button. A state change occurs when a user clicks on it.\n * @displayname label\n */\n children?: React.ReactNode;\n\n /**\n * Attributes to add to the native `input` element.\n * Some attributes will be automatically combined with internal attribute values:\n * - `className` will be appended.\n * - Event handlers will be chained, unless the default is prevented.\n *\n * We do not support using this attribute to apply custom styling.\n *\n * @awsuiSystem core\n */\n nativeInputAttributes?: NativeAttributes<React.InputHTMLAttributes<HTMLInputElement>>;\n\n /**\n * Called when the user changes the component state. The event `detail` contains the current value for the `checked` property.\n */\n onChange?: NonCancelableEventHandler<RadioButtonProps.ChangeDetail>;\n\n /**\n * Specifies if the radio button is read-only, which prevents the\n * user from modifying the value, but does not prevent the value from\n * being included in a form submission. A read-only control is still focusable.\n *\n * This property should be set for either all or none of the radio buttons in a group.\n */\n readOnly?: boolean;\n\n /**\n * @awsuiSystem core\n */\n style?: RadioButtonProps.Style;\n\n /**\n * Sets the value attribute to the native control.\n * If using native form submission, this value is sent to the server if the radio button is checked.\n * It is never shown to the user by their user agent.\n * For more details, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/radio#value).\n */\n value?: string;\n}\n\nexport namespace RadioButtonProps {\n export interface ChangeDetail {\n checked: boolean;\n }\n\n export interface Ref {\n /**\n * Sets input focus onto the UI control.\n */\n focus(): void;\n }\n\n export interface Style {\n input?: {\n fill?: {\n checked?: string;\n default?: string;\n disabled?: string;\n readOnly?: string;\n };\n stroke?: {\n default?: string;\n disabled?: string;\n readOnly?: string;\n };\n circle?: {\n fill?: {\n checked?: string;\n disabled?: string;\n readOnly?: string;\n };\n };\n focusRing?: {\n borderColor?: string;\n borderRadius?: string;\n borderWidth?: string;\n };\n };\n label?: {\n color?: {\n checked?: string;\n default?: string;\n disabled?: string;\n readOnly?: string;\n };\n };\n description?: {\n color?: {\n checked?: string;\n default?: string;\n disabled?: string;\n readOnly?: string;\n };\n };\n }\n}\n"]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
|
|
2
|
+
import './styles.scoped.css';
|
|
3
|
+
export default {
|
|
4
|
+
"radio-control": "awsui_radio-control_1v1hk_11np0_145",
|
|
5
|
+
"outline": "awsui_outline_1v1hk_11np0_153",
|
|
6
|
+
"styled-circle-border": "awsui_styled-circle-border_1v1hk_11np0_176",
|
|
7
|
+
"styled-circle-disabled": "awsui_styled-circle-disabled_1v1hk_11np0_180",
|
|
8
|
+
"styled-circle-readonly": "awsui_styled-circle-readonly_1v1hk_11np0_180",
|
|
9
|
+
"styled-circle-fill": "awsui_styled-circle-fill_1v1hk_11np0_185",
|
|
10
|
+
"styled-circle-checked": "awsui_styled-circle-checked_1v1hk_11np0_201"
|
|
11
|
+
};
|
|
12
|
+
|
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
|
+
SPDX-License-Identifier: Apache-2.0
|
|
4
|
+
*/
|
|
5
|
+
/*
|
|
6
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
7
|
+
SPDX-License-Identifier: Apache-2.0
|
|
8
|
+
*/
|
|
9
|
+
/*
|
|
10
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
11
|
+
SPDX-License-Identifier: Apache-2.0
|
|
12
|
+
*/
|
|
13
|
+
/*
|
|
14
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
15
|
+
SPDX-License-Identifier: Apache-2.0
|
|
16
|
+
*/
|
|
17
|
+
/*
|
|
18
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
19
|
+
SPDX-License-Identifier: Apache-2.0
|
|
20
|
+
*/
|
|
21
|
+
/*
|
|
22
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
23
|
+
SPDX-License-Identifier: Apache-2.0
|
|
24
|
+
*/
|
|
25
|
+
/*
|
|
26
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
27
|
+
SPDX-License-Identifier: Apache-2.0
|
|
28
|
+
*/
|
|
29
|
+
/*
|
|
30
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
31
|
+
SPDX-License-Identifier: Apache-2.0
|
|
32
|
+
*/
|
|
33
|
+
/*
|
|
34
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
35
|
+
SPDX-License-Identifier: Apache-2.0
|
|
36
|
+
*/
|
|
37
|
+
/*
|
|
38
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
39
|
+
SPDX-License-Identifier: Apache-2.0
|
|
40
|
+
*/
|
|
41
|
+
/*
|
|
42
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
43
|
+
SPDX-License-Identifier: Apache-2.0
|
|
44
|
+
*/
|
|
45
|
+
/*
|
|
46
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
47
|
+
SPDX-License-Identifier: Apache-2.0
|
|
48
|
+
*/
|
|
49
|
+
/*
|
|
50
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
51
|
+
SPDX-License-Identifier: Apache-2.0
|
|
52
|
+
*/
|
|
53
|
+
/*
|
|
54
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
55
|
+
SPDX-License-Identifier: Apache-2.0
|
|
56
|
+
*/
|
|
57
|
+
/*
|
|
58
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
59
|
+
SPDX-License-Identifier: Apache-2.0
|
|
60
|
+
*/
|
|
61
|
+
/*
|
|
62
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
63
|
+
SPDX-License-Identifier: Apache-2.0
|
|
64
|
+
*/
|
|
65
|
+
/*
|
|
66
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
67
|
+
SPDX-License-Identifier: Apache-2.0
|
|
68
|
+
*/
|
|
69
|
+
/*
|
|
70
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
71
|
+
SPDX-License-Identifier: Apache-2.0
|
|
72
|
+
*/
|
|
73
|
+
/*
|
|
74
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
75
|
+
SPDX-License-Identifier: Apache-2.0
|
|
76
|
+
*/
|
|
77
|
+
/*
|
|
78
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
79
|
+
SPDX-License-Identifier: Apache-2.0
|
|
80
|
+
*/
|
|
81
|
+
/*
|
|
82
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
83
|
+
SPDX-License-Identifier: Apache-2.0
|
|
84
|
+
*/
|
|
85
|
+
/*
|
|
86
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
87
|
+
SPDX-License-Identifier: Apache-2.0
|
|
88
|
+
*/
|
|
89
|
+
/*
|
|
90
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
91
|
+
SPDX-License-Identifier: Apache-2.0
|
|
92
|
+
*/
|
|
93
|
+
/*
|
|
94
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
95
|
+
SPDX-License-Identifier: Apache-2.0
|
|
96
|
+
*/
|
|
97
|
+
/*
|
|
98
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
99
|
+
SPDX-License-Identifier: Apache-2.0
|
|
100
|
+
*/
|
|
101
|
+
/*
|
|
102
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
103
|
+
SPDX-License-Identifier: Apache-2.0
|
|
104
|
+
*/
|
|
105
|
+
/*
|
|
106
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
107
|
+
SPDX-License-Identifier: Apache-2.0
|
|
108
|
+
*/
|
|
109
|
+
/*
|
|
110
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
111
|
+
SPDX-License-Identifier: Apache-2.0
|
|
112
|
+
*/
|
|
113
|
+
/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
|
|
114
|
+
/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
|
|
115
|
+
/*
|
|
116
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
117
|
+
SPDX-License-Identifier: Apache-2.0
|
|
118
|
+
*/
|
|
119
|
+
/*
|
|
120
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
121
|
+
SPDX-License-Identifier: Apache-2.0
|
|
122
|
+
*/
|
|
123
|
+
/*
|
|
124
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
125
|
+
SPDX-License-Identifier: Apache-2.0
|
|
126
|
+
*/
|
|
127
|
+
/*
|
|
128
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
129
|
+
SPDX-License-Identifier: Apache-2.0
|
|
130
|
+
*/
|
|
131
|
+
/*
|
|
132
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
133
|
+
SPDX-License-Identifier: Apache-2.0
|
|
134
|
+
*/
|
|
135
|
+
/*
|
|
136
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
137
|
+
SPDX-License-Identifier: Apache-2.0
|
|
138
|
+
*/
|
|
139
|
+
/*
|
|
140
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
141
|
+
SPDX-License-Identifier: Apache-2.0
|
|
142
|
+
*/
|
|
143
|
+
/* Style used for links in slots/components that are text heavy, to help links stand out among
|
|
144
|
+
surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
|
|
145
|
+
.awsui_radio-control_1v1hk_11np0_145:not(#\9) {
|
|
146
|
+
margin-block-start: calc((var(--line-height-body-m-2mh3ke, 20px) - var(--size-control-adm93y, 16px)) / 2);
|
|
147
|
+
min-block-size: var(--size-control-adm93y, 16px);
|
|
148
|
+
min-inline-size: var(--size-control-adm93y, 16px);
|
|
149
|
+
block-size: var(--size-control-adm93y, 16px);
|
|
150
|
+
inline-size: var(--size-control-adm93y, 16px);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.awsui_outline_1v1hk_11np0_153:not(#\9) {
|
|
154
|
+
--awsui-style-focus-ring-box-shadow-d43v8n: 0 0 0 var(--awsui-style-focus-ring-border-width-d43v8n, 2px) var(--awsui-style-focus-ring-border-color-d43v8n, var(--color-border-item-focused-uk47pl, #006ce0));
|
|
155
|
+
position: relative;
|
|
156
|
+
}
|
|
157
|
+
.awsui_outline_1v1hk_11np0_153:not(#\9) {
|
|
158
|
+
outline: 2px dotted transparent;
|
|
159
|
+
outline-offset: calc(2px - 1px);
|
|
160
|
+
}
|
|
161
|
+
.awsui_outline_1v1hk_11np0_153:not(#\9)::before {
|
|
162
|
+
content: " ";
|
|
163
|
+
display: block;
|
|
164
|
+
position: absolute;
|
|
165
|
+
inset-inline-start: calc(-1 * 2px);
|
|
166
|
+
inset-block-start: calc(-1 * 2px);
|
|
167
|
+
inline-size: calc(100% + 2px + 2px);
|
|
168
|
+
block-size: calc(100% + 2px + 2px);
|
|
169
|
+
border-start-start-radius: var(--awsui-style-focus-ring-border-radius-d43v8n, var(--border-radius-control-circular-focus-ring-yjhscw, 4px));
|
|
170
|
+
border-start-end-radius: var(--awsui-style-focus-ring-border-radius-d43v8n, var(--border-radius-control-circular-focus-ring-yjhscw, 4px));
|
|
171
|
+
border-end-start-radius: var(--awsui-style-focus-ring-border-radius-d43v8n, var(--border-radius-control-circular-focus-ring-yjhscw, 4px));
|
|
172
|
+
border-end-end-radius: var(--awsui-style-focus-ring-border-radius-d43v8n, var(--border-radius-control-circular-focus-ring-yjhscw, 4px));
|
|
173
|
+
box-shadow: var(--awsui-style-focus-ring-box-shadow-d43v8n);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.awsui_styled-circle-border_1v1hk_11np0_176:not(#\9) {
|
|
177
|
+
stroke: var(--color-border-control-default-sh3548, #8c8c94);
|
|
178
|
+
fill: var(--color-background-control-default-4jb21l, #ffffff);
|
|
179
|
+
}
|
|
180
|
+
.awsui_styled-circle-border_1v1hk_11np0_176.awsui_styled-circle-disabled_1v1hk_11np0_180:not(#\9), .awsui_styled-circle-border_1v1hk_11np0_176.awsui_styled-circle-readonly_1v1hk_11np0_180:not(#\9) {
|
|
181
|
+
fill: var(--color-background-control-disabled-1f3718, #dedee3);
|
|
182
|
+
stroke: var(--color-background-control-disabled-1f3718, #dedee3);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.awsui_styled-circle-fill_1v1hk_11np0_185:not(#\9) {
|
|
186
|
+
stroke: var(--color-background-control-checked-ka7kc2, #006ce0);
|
|
187
|
+
fill: var(--color-foreground-control-default-eto4wy, #ffffff);
|
|
188
|
+
opacity: 0;
|
|
189
|
+
transition: opacity var(--motion-duration-transition-quick-mcm2y0, 90ms) var(--motion-easing-transition-quick-qxak3i, linear);
|
|
190
|
+
}
|
|
191
|
+
@media (prefers-reduced-motion: reduce) {
|
|
192
|
+
.awsui_styled-circle-fill_1v1hk_11np0_185:not(#\9) {
|
|
193
|
+
animation: none;
|
|
194
|
+
transition: none;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
.awsui-motion-disabled .awsui_styled-circle-fill_1v1hk_11np0_185:not(#\9), .awsui-mode-entering .awsui_styled-circle-fill_1v1hk_11np0_185:not(#\9) {
|
|
198
|
+
animation: none;
|
|
199
|
+
transition: none;
|
|
200
|
+
}
|
|
201
|
+
.awsui_styled-circle-fill_1v1hk_11np0_185.awsui_styled-circle-checked_1v1hk_11np0_201:not(#\9) {
|
|
202
|
+
opacity: 1;
|
|
203
|
+
}
|
|
204
|
+
.awsui_styled-circle-fill_1v1hk_11np0_185.awsui_styled-circle-disabled_1v1hk_11np0_180:not(#\9) {
|
|
205
|
+
fill: var(--color-foreground-control-disabled-txi6cf, #ffffff);
|
|
206
|
+
stroke: var(--color-background-control-disabled-1f3718, #dedee3);
|
|
207
|
+
}
|
|
208
|
+
.awsui_styled-circle-fill_1v1hk_11np0_185.awsui_styled-circle-readonly_1v1hk_11np0_180:not(#\9) {
|
|
209
|
+
fill: var(--color-foreground-control-read-only-7ydvuj, #656871);
|
|
210
|
+
stroke: var(--color-background-control-disabled-1f3718, #dedee3);
|
|
211
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
|
|
2
|
+
// es-module interop with Babel and Typescript
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
module.exports.default = {
|
|
5
|
+
"radio-control": "awsui_radio-control_1v1hk_11np0_145",
|
|
6
|
+
"outline": "awsui_outline_1v1hk_11np0_153",
|
|
7
|
+
"styled-circle-border": "awsui_styled-circle-border_1v1hk_11np0_176",
|
|
8
|
+
"styled-circle-disabled": "awsui_styled-circle-disabled_1v1hk_11np0_180",
|
|
9
|
+
"styled-circle-readonly": "awsui_styled-circle-readonly_1v1hk_11np0_180",
|
|
10
|
+
"styled-circle-fill": "awsui_styled-circle-fill_1v1hk_11np0_185",
|
|
11
|
+
"styled-circle-checked": "awsui_styled-circle-checked_1v1hk_11np0_201"
|
|
12
|
+
};
|
|
13
|
+
|
package/internal/environment.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export var PACKAGE_SOURCE = "components";
|
|
2
|
-
export var PACKAGE_VERSION = "3.0.0 (
|
|
3
|
-
export var GIT_SHA = "
|
|
2
|
+
export var PACKAGE_VERSION = "3.0.0 (a79c3a7f)";
|
|
3
|
+
export var GIT_SHA = "a79c3a7f";
|
|
4
4
|
export var THEME = "open-source-visual-refresh";
|
|
5
5
|
export var SYSTEM = "console";
|
|
6
6
|
export var ALWAYS_VISUAL_REFRESH = true;
|
package/internal/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -154,7 +154,7 @@
|
|
|
154
154
|
"./internal/base-component/index.js",
|
|
155
155
|
"./internal/base-component/styles.css.js"
|
|
156
156
|
],
|
|
157
|
-
"version": "3.0.
|
|
157
|
+
"version": "3.0.1132",
|
|
158
158
|
"repository": {
|
|
159
159
|
"type": "git",
|
|
160
160
|
"url": "https://github.com/cloudscape-design/components.git"
|
package/radio-group/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { RadioGroupProps } from './interfaces';
|
|
3
3
|
export { RadioGroupProps };
|
|
4
|
-
declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<
|
|
4
|
+
declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<import("../internal/components/radio-button/interfaces").RadioButtonProps.Ref>>;
|
|
5
5
|
export default RadioGroup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/radio-group/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,QAAA,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/radio-group/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,QAAA,MAAM,UAAU,uJAmBd,CAAC;AAGH,eAAe,UAAU,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import { BaseComponentProps } from '../internal/base-component';
|
|
2
|
+
import { RadioButtonProps } from '../internal/components/radio-button/interfaces';
|
|
3
3
|
import { FormFieldControlProps } from '../internal/context/form-field-context';
|
|
4
4
|
import { NonCancelableEventHandler } from '../internal/events';
|
|
5
5
|
export interface RadioGroupProps extends BaseComponentProps, FormFieldControlProps {
|
|
@@ -66,53 +66,6 @@ export declare namespace RadioGroupProps {
|
|
|
66
66
|
interface ChangeDetail {
|
|
67
67
|
value: string;
|
|
68
68
|
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
* Sets input focus onto the UI control.
|
|
72
|
-
*/
|
|
73
|
-
focus(): void;
|
|
74
|
-
}
|
|
75
|
-
interface Style {
|
|
76
|
-
input?: {
|
|
77
|
-
fill?: {
|
|
78
|
-
checked?: string;
|
|
79
|
-
default?: string;
|
|
80
|
-
disabled?: string;
|
|
81
|
-
readOnly?: string;
|
|
82
|
-
};
|
|
83
|
-
stroke?: {
|
|
84
|
-
default?: string;
|
|
85
|
-
disabled?: string;
|
|
86
|
-
readOnly?: string;
|
|
87
|
-
};
|
|
88
|
-
circle?: {
|
|
89
|
-
fill?: {
|
|
90
|
-
checked?: string;
|
|
91
|
-
disabled?: string;
|
|
92
|
-
readOnly?: string;
|
|
93
|
-
};
|
|
94
|
-
};
|
|
95
|
-
focusRing?: {
|
|
96
|
-
borderColor?: string;
|
|
97
|
-
borderRadius?: string;
|
|
98
|
-
borderWidth?: string;
|
|
99
|
-
};
|
|
100
|
-
};
|
|
101
|
-
label?: {
|
|
102
|
-
color?: {
|
|
103
|
-
checked?: string;
|
|
104
|
-
default?: string;
|
|
105
|
-
disabled?: string;
|
|
106
|
-
readOnly?: string;
|
|
107
|
-
};
|
|
108
|
-
};
|
|
109
|
-
description?: {
|
|
110
|
-
color?: {
|
|
111
|
-
checked?: string;
|
|
112
|
-
default?: string;
|
|
113
|
-
disabled?: string;
|
|
114
|
-
readOnly?: string;
|
|
115
|
-
};
|
|
116
|
-
};
|
|
117
|
-
}
|
|
69
|
+
type Ref = RadioButtonProps.Ref;
|
|
70
|
+
type Style = RadioButtonProps.Style;
|
|
118
71
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/radio-group/interfaces.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/radio-group/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gDAAgD,CAAC;AAClF,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,qBAAqB;IAChF;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;IAE7D;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;IAEnE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC;CAC/B;AAED,yBAAiB,eAAe,CAAC;IAC/B,UAAiB,qBAAqB;QACpC,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;IAED,UAAiB,YAAY;QAC3B,KAAK,EAAE,MAAM,CAAC;KACf;IAED,KAAY,GAAG,GAAG,gBAAgB,CAAC,GAAG,CAAC;IAEvC,KAAY,KAAK,GAAG,gBAAgB,CAAC,KAAK,CAAC;CAC5C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/radio-group/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/radio-group/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { BaseComponentProps } from '../internal/base-component';\nimport { RadioButtonProps } from '../internal/components/radio-button/interfaces';\nimport { FormFieldControlProps } from '../internal/context/form-field-context';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface RadioGroupProps extends BaseComponentProps, FormFieldControlProps {\n /**\n * Specify a custom name for the radio buttons. If not provided, the radio group generates a random name.\n */\n name?: string;\n\n /**\n * Sets the value of the selected radio button.\n * If you want to clear the selection, use `null`.\n */\n value: string | null;\n\n /**\n * Specifies an array of radio buttons to display. Each of these objects have the following properties:\n *\n * - `value` (string) - Sets the value of the radio button. Assigned to the radio group when a user selects the radio button.\n * - `label` (ReactNode) - Specifies a label for the radio button.\n * - `description` (ReactNode) - (Optional) Specifies descriptive text that appears below the label.\n * - `disabled` (boolean) - (Optional) Determines whether the radio button is disabled, which prevents the user from selecting it.\n * - `controlId` (string) - (Optional) Sets the ID of the internal input. You can use it to relate a label element's `for` attribute to this control.\n * In general it's not recommended to set this because the ID is automatically set by the radio group component.\n */\n items?: ReadonlyArray<RadioGroupProps.RadioButtonDefinition>;\n\n /**\n * Adds `aria-label` to the group. If you are using this form element within a form field,\n * don't set this property because the form field component automatically sets the correct labels to make the component accessible.\n */\n ariaLabel?: string;\n\n /**\n * Adds `aria-required` to the group.\n */\n ariaRequired?: boolean;\n\n /**\n * Adds `aria-controls` attribute to the radio group.\n * If the radio group controls any secondary content (for example, another form field), use this to provide an ID referring to the secondary content.\n */\n ariaControls?: string;\n\n /**\n * Called when the user selects a different radio button. The event `detail` contains the current `value`.\n */\n onChange?: NonCancelableEventHandler<RadioGroupProps.ChangeDetail>;\n\n /**\n * @deprecated Has no effect.\n */\n controlId?: string;\n\n /**\n * Specifies if the whole group is read-only, which prevents the\n * user from modifying the value, but does not prevent the value from\n * being included in a form submission. A read-only control is still focusable.\n */\n readOnly?: boolean;\n\n /**\n * @awsuiSystem core\n */\n style?: RadioGroupProps.Style;\n}\n\nexport namespace RadioGroupProps {\n export interface RadioButtonDefinition {\n value: string;\n label: React.ReactNode;\n description?: React.ReactNode;\n disabled?: boolean;\n controlId?: string;\n }\n\n export interface ChangeDetail {\n value: string;\n }\n\n export type Ref = RadioButtonProps.Ref;\n\n export type Style = RadioButtonProps.Style;\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
|
|
3
3
|
import { RadioGroupProps } from './interfaces';
|
|
4
|
-
declare const InternalRadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & InternalBaseComponentProps & React.RefAttributes<
|
|
4
|
+
declare const InternalRadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & InternalBaseComponentProps & React.RefAttributes<import("../internal/components/radio-button/interfaces").RadioButtonProps.Ref>>;
|
|
5
5
|
export default InternalRadioGroup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/radio-group/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
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,oLA4EvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
package/radio-group/internal.js
CHANGED
|
@@ -5,25 +5,31 @@ import clsx from 'clsx';
|
|
|
5
5
|
import { useUniqueId } from '@cloudscape-design/component-toolkit/internal';
|
|
6
6
|
import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
|
|
7
7
|
import { getBaseProps } from '../internal/base-component';
|
|
8
|
+
import RadioButton from '../internal/components/radio-button';
|
|
8
9
|
import { useFormFieldContext } from '../internal/context/form-field-context';
|
|
10
|
+
import { fireNonCancelableEvent } from '../internal/events';
|
|
9
11
|
import useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';
|
|
10
|
-
import RadioButton from './radio-button';
|
|
11
12
|
import analyticsSelectors from './analytics-metadata/styles.css.js';
|
|
12
13
|
import styles from './styles.css.js';
|
|
14
|
+
import testUtilStyles from './test-classes/styles.css.js';
|
|
13
15
|
const InternalRadioGroup = React.forwardRef(({ name, value, items, ariaLabel, ariaRequired, ariaControls, onChange, readOnly, __internalRootRef, style, ...props }, ref) => {
|
|
14
16
|
const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(props);
|
|
15
17
|
const baseProps = getBaseProps(props);
|
|
16
18
|
const generatedName = useUniqueId('awsui-radio-');
|
|
17
19
|
const [radioButtonRef, radioButtonRefIndex] = useRadioGroupForwardFocus(ref, items, value);
|
|
18
|
-
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,
|
|
19
|
-
items.map((item, index) => (React.createElement(RadioButton, { key: item.value, ref: index === radioButtonRefIndex ? radioButtonRef : undefined, className: clsx(item.value === value && analyticsSelectors.selected), checked: item.value === value, name: name || generatedName, value: item.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']), ref: __internalRootRef }, items &&
|
|
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'], item.value === value && analyticsSelectors.selected), checked: item.value === value, name: name || generatedName, value: item.value, description: item.description, disabled: item.disabled, onChange: ({ detail }) => {
|
|
22
|
+
if (onChange && detail.checked) {
|
|
23
|
+
fireNonCancelableEvent(onChange, { value: item.value });
|
|
24
|
+
}
|
|
25
|
+
}, controlId: item.controlId, readOnly: readOnly, style: style, ...getAnalyticsMetadataAttribute(!item.disabled && !readOnly
|
|
20
26
|
? {
|
|
21
27
|
detail: {
|
|
22
28
|
position: `${index + 1}`,
|
|
23
29
|
value: item.value,
|
|
24
30
|
},
|
|
25
31
|
}
|
|
26
|
-
: {}) })))));
|
|
32
|
+
: {}) }, item.label)))));
|
|
27
33
|
});
|
|
28
34
|
export default InternalRadioGroup;
|
|
29
35
|
//# sourceMappingURL=internal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/radio-group/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAC5E,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,
|
|
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 ...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(baseProps.className, testUtilStyles.root, styles['radio-group'])}\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 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 onChange={({ detail }) => {\n if (onChange && detail.checked) {\n fireNonCancelableEvent(onChange, { value: item.value });\n }\n }}\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,15 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"
|
|
5
|
-
"radio": "
|
|
6
|
-
"radio--has-description": "awsui_radio--has-
|
|
7
|
-
"radio-control": "awsui_radio-control_1mabk_4nbo6_190",
|
|
8
|
-
"outline": "awsui_outline_1mabk_4nbo6_198",
|
|
9
|
-
"styled-circle-border": "awsui_styled-circle-border_1mabk_4nbo6_221",
|
|
10
|
-
"styled-circle-disabled": "awsui_styled-circle-disabled_1mabk_4nbo6_225",
|
|
11
|
-
"styled-circle-readonly": "awsui_styled-circle-readonly_1mabk_4nbo6_225",
|
|
12
|
-
"styled-circle-fill": "awsui_styled-circle-fill_1mabk_4nbo6_230",
|
|
13
|
-
"styled-circle-checked": "awsui_styled-circle-checked_1mabk_4nbo6_246"
|
|
4
|
+
"radio-group": "awsui_radio-group_1mabk_188d6_145",
|
|
5
|
+
"radio": "awsui_radio_1mabk_188d6_145",
|
|
6
|
+
"radio--has-description": "awsui_radio--has-description_1mabk_188d6_182"
|
|
14
7
|
};
|
|
15
8
|
|
|
@@ -142,7 +142,7 @@
|
|
|
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_radio-group_1mabk_188d6_145:not(#\9) {
|
|
146
146
|
border-collapse: separate;
|
|
147
147
|
border-spacing: 0;
|
|
148
148
|
box-sizing: border-box;
|
|
@@ -175,82 +175,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
175
175
|
display: block;
|
|
176
176
|
}
|
|
177
177
|
|
|
178
|
-
.
|
|
179
|
-
/*used in test-utils*/
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
.awsui_radio_1mabk_4nbo6_178 + .awsui_radio_1mabk_4nbo6_178:not(#\9) {
|
|
178
|
+
.awsui_radio_1mabk_188d6_145 + .awsui_radio_1mabk_188d6_145:not(#\9) {
|
|
183
179
|
margin-block-start: var(--space-scaled-xxs-pfm1nx, 4px);
|
|
184
180
|
}
|
|
185
181
|
|
|
186
|
-
.awsui_radio--has-
|
|
182
|
+
.awsui_radio--has-description_1mabk_188d6_182 + .awsui_radio_1mabk_188d6_145:not(#\9) {
|
|
187
183
|
margin-block-start: var(--space-scaled-xs-xwoogq, 8px);
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
.awsui_radio-control_1mabk_4nbo6_190:not(#\9) {
|
|
191
|
-
margin-block-start: calc((var(--line-height-body-m-2mh3ke, 20px) - var(--size-control-adm93y, 16px)) / 2);
|
|
192
|
-
min-block-size: var(--size-control-adm93y, 16px);
|
|
193
|
-
min-inline-size: var(--size-control-adm93y, 16px);
|
|
194
|
-
block-size: var(--size-control-adm93y, 16px);
|
|
195
|
-
inline-size: var(--size-control-adm93y, 16px);
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
.awsui_outline_1mabk_4nbo6_198:not(#\9) {
|
|
199
|
-
--awsui-style-focus-ring-box-shadow-d43v8n: 0 0 0 var(--awsui-style-focus-ring-border-width-d43v8n, 2px) var(--awsui-style-focus-ring-border-color-d43v8n, var(--color-border-item-focused-uk47pl, #006ce0));
|
|
200
|
-
position: relative;
|
|
201
|
-
}
|
|
202
|
-
.awsui_outline_1mabk_4nbo6_198:not(#\9) {
|
|
203
|
-
outline: 2px dotted transparent;
|
|
204
|
-
outline-offset: calc(2px - 1px);
|
|
205
|
-
}
|
|
206
|
-
.awsui_outline_1mabk_4nbo6_198:not(#\9)::before {
|
|
207
|
-
content: " ";
|
|
208
|
-
display: block;
|
|
209
|
-
position: absolute;
|
|
210
|
-
inset-inline-start: calc(-1 * 2px);
|
|
211
|
-
inset-block-start: calc(-1 * 2px);
|
|
212
|
-
inline-size: calc(100% + 2px + 2px);
|
|
213
|
-
block-size: calc(100% + 2px + 2px);
|
|
214
|
-
border-start-start-radius: var(--awsui-style-focus-ring-border-radius-d43v8n, var(--border-radius-control-circular-focus-ring-yjhscw, 4px));
|
|
215
|
-
border-start-end-radius: var(--awsui-style-focus-ring-border-radius-d43v8n, var(--border-radius-control-circular-focus-ring-yjhscw, 4px));
|
|
216
|
-
border-end-start-radius: var(--awsui-style-focus-ring-border-radius-d43v8n, var(--border-radius-control-circular-focus-ring-yjhscw, 4px));
|
|
217
|
-
border-end-end-radius: var(--awsui-style-focus-ring-border-radius-d43v8n, var(--border-radius-control-circular-focus-ring-yjhscw, 4px));
|
|
218
|
-
box-shadow: var(--awsui-style-focus-ring-box-shadow-d43v8n);
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
.awsui_styled-circle-border_1mabk_4nbo6_221:not(#\9) {
|
|
222
|
-
stroke: var(--color-border-control-default-sh3548, #8c8c94);
|
|
223
|
-
fill: var(--color-background-control-default-4jb21l, #ffffff);
|
|
224
|
-
}
|
|
225
|
-
.awsui_styled-circle-border_1mabk_4nbo6_221.awsui_styled-circle-disabled_1mabk_4nbo6_225:not(#\9), .awsui_styled-circle-border_1mabk_4nbo6_221.awsui_styled-circle-readonly_1mabk_4nbo6_225:not(#\9) {
|
|
226
|
-
fill: var(--color-background-control-disabled-1f3718, #dedee3);
|
|
227
|
-
stroke: var(--color-background-control-disabled-1f3718, #dedee3);
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
.awsui_styled-circle-fill_1mabk_4nbo6_230:not(#\9) {
|
|
231
|
-
stroke: var(--color-background-control-checked-ka7kc2, #006ce0);
|
|
232
|
-
fill: var(--color-foreground-control-default-eto4wy, #ffffff);
|
|
233
|
-
opacity: 0;
|
|
234
|
-
transition: opacity var(--motion-duration-transition-quick-mcm2y0, 90ms) var(--motion-easing-transition-quick-qxak3i, linear);
|
|
235
|
-
}
|
|
236
|
-
@media (prefers-reduced-motion: reduce) {
|
|
237
|
-
.awsui_styled-circle-fill_1mabk_4nbo6_230:not(#\9) {
|
|
238
|
-
animation: none;
|
|
239
|
-
transition: none;
|
|
240
|
-
}
|
|
241
|
-
}
|
|
242
|
-
.awsui-motion-disabled .awsui_styled-circle-fill_1mabk_4nbo6_230:not(#\9), .awsui-mode-entering .awsui_styled-circle-fill_1mabk_4nbo6_230:not(#\9) {
|
|
243
|
-
animation: none;
|
|
244
|
-
transition: none;
|
|
245
|
-
}
|
|
246
|
-
.awsui_styled-circle-fill_1mabk_4nbo6_230.awsui_styled-circle-checked_1mabk_4nbo6_246:not(#\9) {
|
|
247
|
-
opacity: 1;
|
|
248
|
-
}
|
|
249
|
-
.awsui_styled-circle-fill_1mabk_4nbo6_230.awsui_styled-circle-disabled_1mabk_4nbo6_225:not(#\9) {
|
|
250
|
-
fill: var(--color-foreground-control-disabled-txi6cf, #ffffff);
|
|
251
|
-
stroke: var(--color-background-control-disabled-1f3718, #dedee3);
|
|
252
|
-
}
|
|
253
|
-
.awsui_styled-circle-fill_1mabk_4nbo6_230.awsui_styled-circle-readonly_1mabk_4nbo6_225:not(#\9) {
|
|
254
|
-
fill: var(--color-foreground-control-read-only-7ydvuj, #656871);
|
|
255
|
-
stroke: var(--color-background-control-disabled-1f3718, #dedee3);
|
|
256
184
|
}
|
|
@@ -2,15 +2,8 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"
|
|
6
|
-
"radio": "
|
|
7
|
-
"radio--has-description": "awsui_radio--has-
|
|
8
|
-
"radio-control": "awsui_radio-control_1mabk_4nbo6_190",
|
|
9
|
-
"outline": "awsui_outline_1mabk_4nbo6_198",
|
|
10
|
-
"styled-circle-border": "awsui_styled-circle-border_1mabk_4nbo6_221",
|
|
11
|
-
"styled-circle-disabled": "awsui_styled-circle-disabled_1mabk_4nbo6_225",
|
|
12
|
-
"styled-circle-readonly": "awsui_styled-circle-readonly_1mabk_4nbo6_225",
|
|
13
|
-
"styled-circle-fill": "awsui_styled-circle-fill_1mabk_4nbo6_230",
|
|
14
|
-
"styled-circle-checked": "awsui_styled-circle-checked_1mabk_4nbo6_246"
|
|
5
|
+
"radio-group": "awsui_radio-group_1mabk_188d6_145",
|
|
6
|
+
"radio": "awsui_radio_1mabk_188d6_145",
|
|
7
|
+
"radio--has-description": "awsui_radio--has-description_1mabk_188d6_182"
|
|
15
8
|
};
|
|
16
9
|
|
|
@@ -5,8 +5,8 @@ import clsx from 'clsx';
|
|
|
5
5
|
import { useSingleTabStopNavigation, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
|
|
6
6
|
import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
|
|
7
7
|
import InternalCheckbox from '../../checkbox/internal';
|
|
8
|
+
import RadioButton from '../../internal/components/radio-button';
|
|
8
9
|
import { KeyCode } from '../../internal/keycode';
|
|
9
|
-
import RadioButton from '../../radio-group/radio-button';
|
|
10
10
|
import styles from './styles.css.js';
|
|
11
11
|
export function SelectionControl({ selectionType, indeterminate = false, onShiftToggle, onFocusUp, onFocusDown, name, ariaLabel, focusedComponent, rowIndex, itemKey, verticalAlign = 'middle', ...sharedProps }) {
|
|
12
12
|
const controlId = useUniqueId();
|
|
@@ -46,7 +46,7 @@ export function SelectionControl({ selectionType, indeterminate = false, onShift
|
|
|
46
46
|
// Clicking on input, does not focus it on Firefox (AWSUI-11345)
|
|
47
47
|
nativeInput === null || nativeInput === void 0 ? void 0 : nativeInput.focus();
|
|
48
48
|
};
|
|
49
|
-
const selector = isMultiSelection ? (React.createElement(InternalCheckbox, { ...sharedProps, showOutline: focusedComponent === 'selection-control', controlId: controlId, "data-focus-id": "selection-control", indeterminate: indeterminate })) : (React.createElement(RadioButton, { ...sharedProps, controlId: controlId, name: name, value: ''
|
|
49
|
+
const selector = isMultiSelection ? (React.createElement(InternalCheckbox, { ...sharedProps, showOutline: focusedComponent === 'selection-control', controlId: controlId, "data-focus-id": "selection-control", indeterminate: indeterminate })) : (React.createElement(RadioButton, { ...sharedProps, controlId: controlId, name: name, value: '' }));
|
|
50
50
|
return (React.createElement(React.Fragment, null,
|
|
51
51
|
React.createElement("label", { onKeyDown: handleKeyDown, onKeyUp: setShiftState, onMouseDown: onMouseDownHandler, onMouseUp: setShiftState, onClick: handleClick, htmlFor: controlId, className: clsx(styles.label, styles.root, verticalAlign === 'top' && styles['label-top']), "aria-label": ariaLabel, title: ariaLabel, ...(rowIndex !== undefined && !sharedProps.disabled
|
|
52
52
|
? getAnalyticsMetadataAttribute({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selection-control.js","sourceRoot":"","sources":["../../../../src/table/selection/selection-control.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAA0D,MAAM,OAAO,CAAC;AAC/E,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,0BAA0B,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AACxG,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AACvD,OAAO,
|
|
1
|
+
{"version":3,"file":"selection-control.js","sourceRoot":"","sources":["../../../../src/table/selection/selection-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, { KeyboardEvent, KeyboardEventHandler, MouseEvent } from 'react';\nimport clsx from 'clsx';\n\nimport { useSingleTabStopNavigation, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalCheckbox from '../../checkbox/internal';\nimport RadioButton from '../../internal/components/radio-button';\nimport { KeyCode } from '../../internal/keycode';\nimport { SelectionProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport interface SelectionControlProps extends SelectionProps {\n onShiftToggle?(shiftPressed: boolean): void;\n onFocusUp?: KeyboardEventHandler;\n onFocusDown?: KeyboardEventHandler;\n ariaLabel?: string;\n tabIndex?: -1;\n focusedComponent?: null | string;\n rowIndex?: number;\n itemKey?: string;\n verticalAlign?: 'middle' | 'top';\n}\n\nexport function SelectionControl({\n selectionType,\n indeterminate = false,\n onShiftToggle,\n onFocusUp,\n onFocusDown,\n name,\n ariaLabel,\n focusedComponent,\n rowIndex,\n itemKey,\n verticalAlign = 'middle',\n ...sharedProps\n}: SelectionControlProps) {\n const controlId = useUniqueId();\n const isMultiSelection = selectionType === 'multi';\n const { navigationActive } = useSingleTabStopNavigation(null);\n\n const setShiftState = (event: KeyboardEvent | MouseEvent) => {\n if (isMultiSelection) {\n onShiftToggle?.(event.shiftKey);\n }\n };\n\n const onMouseDownHandler = (event: MouseEvent) => {\n setShiftState(event);\n if (isMultiSelection) {\n // To overcome an issue\n // If you shift+click or ctrl+click on a label for a checkbox, checkbox is not checked.\n // https://bugzilla.mozilla.org/show_bug.cgi?id=559506\n event.preventDefault();\n }\n };\n\n // native checkboxes do not have focus move via keyboard, we implement it here programmatically\n const handleKeyDown = (event: KeyboardEvent) => {\n setShiftState(event);\n if (isMultiSelection && !navigationActive) {\n if (event.keyCode === KeyCode.up) {\n event.preventDefault();\n onFocusUp?.(event);\n }\n if (event.keyCode === KeyCode.down) {\n event.preventDefault();\n onFocusDown?.(event);\n }\n }\n };\n\n const handleClick = (event: MouseEvent) => {\n const target = event.currentTarget;\n const nativeInput = (target.tagName === 'INPUT' ? target : target.querySelector('input')) as HTMLInputElement;\n // Clicking on input, does not focus it on Firefox (AWSUI-11345)\n nativeInput?.focus();\n };\n\n const selector = isMultiSelection ? (\n <InternalCheckbox\n {...sharedProps}\n showOutline={focusedComponent === 'selection-control'}\n controlId={controlId}\n data-focus-id=\"selection-control\"\n indeterminate={indeterminate}\n />\n ) : (\n <RadioButton {...sharedProps} controlId={controlId} name={name} value={''} />\n );\n\n return (\n <>\n <label\n onKeyDown={handleKeyDown}\n onKeyUp={setShiftState}\n onMouseDown={onMouseDownHandler}\n onMouseUp={setShiftState}\n onClick={handleClick}\n htmlFor={controlId}\n className={clsx(styles.label, styles.root, verticalAlign === 'top' && styles['label-top'])}\n aria-label={ariaLabel}\n title={ariaLabel}\n {...(rowIndex !== undefined && !sharedProps.disabled\n ? getAnalyticsMetadataAttribute({\n detail: {\n position: `${rowIndex + 1}`,\n item: itemKey || '',\n },\n })\n : {})}\n >\n {selector}\n </label>\n <span className={styles.stud} aria-hidden={true}>\n \n </span>\n </>\n );\n}\n"]}
|
|
@@ -5,16 +5,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
5
5
|
const dom_1 = require("@cloudscape-design/test-utils-core/dom");
|
|
6
6
|
const utils_1 = require("@cloudscape-design/test-utils-core/utils");
|
|
7
7
|
const radio_button_1 = require("./radio-button");
|
|
8
|
-
const styles_selectors_js_1 = require("../../../radio-
|
|
8
|
+
const styles_selectors_js_1 = require("../../../internal/components/radio-button/test-classes/styles.selectors.js");
|
|
9
|
+
const styles_selectors_js_2 = require("../../../radio-group/test-classes/styles.selectors.js");
|
|
9
10
|
class RadioGroupWrapper extends dom_1.ComponentWrapper {
|
|
10
11
|
findButtons() {
|
|
11
|
-
return this.findAllByClassName(styles_selectors_js_1.default.
|
|
12
|
+
return this.findAllByClassName(styles_selectors_js_1.default.root).map(r => new radio_button_1.default(r.getElement()));
|
|
12
13
|
}
|
|
13
14
|
findInputByValue(value) {
|
|
14
15
|
const safeValue = (0, utils_1.escapeSelector)(value);
|
|
15
16
|
return this.find(`input[value="${safeValue}"]`);
|
|
16
17
|
}
|
|
17
18
|
}
|
|
18
|
-
RadioGroupWrapper.rootSelector =
|
|
19
|
+
RadioGroupWrapper.rootSelector = styles_selectors_js_2.default.root;
|
|
19
20
|
exports.default = RadioGroupWrapper;
|
|
20
21
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/dom/radio-group/index.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,gEAA0F;AAC1F,oEAA0E;AAE1E,iDAAgD;AAEhD,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/dom/radio-group/index.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,gEAA0F;AAC1F,oEAA0E;AAE1E,iDAAgD;AAEhD,oHAA2G;AAC3G,+FAA2E;AAE3E,MAAqB,iBAAkB,SAAQ,sBAAgB;IAG7D,WAAW;QACT,OAAO,IAAI,CAAC,kBAAkB,CAAC,6BAAiB,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,sBAAkB,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;IAC1G,CAAC;IAED,gBAAgB,CAAC,KAAa;QAC5B,MAAM,SAAS,GAAG,IAAA,sBAAc,EAAC,KAAK,CAAC,CAAC;QACxC,OAAO,IAAI,CAAC,IAAI,CAAC,gBAAgB,SAAS,IAAI,CAAC,CAAC;IAClD,CAAC;;AATM,8BAAY,GAAW,6BAAM,CAAC,IAAI,CAAC;kBADvB,iBAAiB"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ComponentWrapper, ElementWrapper } from '@cloudscape-design/test-utils-core/dom';
|
|
2
2
|
export default class RadioButtonWrapper extends ComponentWrapper {
|
|
3
|
+
static rootSelector: string;
|
|
3
4
|
private findAbstractSwitch;
|
|
4
5
|
findLabel(): ElementWrapper;
|
|
5
6
|
findNativeInput(): ElementWrapper<HTMLInputElement>;
|
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
4
4
|
// SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
const dom_1 = require("@cloudscape-design/test-utils-core/dom");
|
|
6
6
|
const abstract_switch_1 = require("../internal/abstract-switch");
|
|
7
|
+
const styles_selectors_js_1 = require("../../../internal/components/radio-button/test-classes/styles.selectors.js");
|
|
7
8
|
class RadioButtonWrapper extends dom_1.ComponentWrapper {
|
|
8
9
|
findAbstractSwitch() {
|
|
9
10
|
return new abstract_switch_1.default(this.getElement());
|
|
@@ -18,5 +19,6 @@ class RadioButtonWrapper extends dom_1.ComponentWrapper {
|
|
|
18
19
|
return this.findAbstractSwitch().findDescription();
|
|
19
20
|
}
|
|
20
21
|
}
|
|
22
|
+
RadioButtonWrapper.rootSelector = styles_selectors_js_1.default.root;
|
|
21
23
|
exports.default = RadioButtonWrapper;
|
|
22
24
|
//# sourceMappingURL=radio-button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../../../src/test-utils/dom/radio-group/radio-button.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,gEAA0F;AAE1F,iEAAgE;AAEhE,MAAqB,kBAAmB,SAAQ,sBAAgB;
|
|
1
|
+
{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../../../src/test-utils/dom/radio-group/radio-button.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,gEAA0F;AAE1F,iEAAgE;AAEhE,oHAAgG;AAEhG,MAAqB,kBAAmB,SAAQ,sBAAgB;IAGtD,kBAAkB;QACxB,OAAO,IAAI,yBAAqB,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;IACtD,CAAC;IAED,SAAS;QACP,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC,SAAS,EAAE,CAAC;IAC/C,CAAC;IAED,eAAe;QACb,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC,eAAe,EAAE,CAAC;IACrD,CAAC;IAED,eAAe;QACb,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC,eAAe,EAAE,CAAC;IACrD,CAAC;;AAhBM,+BAAY,GAAW,6BAAM,CAAC,IAAI,CAAC;kBADvB,kBAAkB"}
|
|
@@ -5,16 +5,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
5
5
|
const selectors_1 = require("@cloudscape-design/test-utils-core/selectors");
|
|
6
6
|
const utils_1 = require("@cloudscape-design/test-utils-core/utils");
|
|
7
7
|
const radio_button_1 = require("./radio-button");
|
|
8
|
-
const styles_selectors_js_1 = require("../../../radio-
|
|
8
|
+
const styles_selectors_js_1 = require("../../../internal/components/radio-button/test-classes/styles.selectors.js");
|
|
9
|
+
const styles_selectors_js_2 = require("../../../radio-group/test-classes/styles.selectors.js");
|
|
9
10
|
class RadioGroupWrapper extends selectors_1.ComponentWrapper {
|
|
10
11
|
findButtons() {
|
|
11
|
-
return this.findAllByClassName(styles_selectors_js_1.default.
|
|
12
|
+
return this.findAllByClassName(styles_selectors_js_1.default.root).map(r => new radio_button_1.default(r.getElement()));
|
|
12
13
|
}
|
|
13
14
|
findInputByValue(value) {
|
|
14
15
|
const safeValue = (0, utils_1.escapeSelector)(value);
|
|
15
16
|
return this.find(`input[value="${safeValue}"]`);
|
|
16
17
|
}
|
|
17
18
|
}
|
|
18
|
-
RadioGroupWrapper.rootSelector =
|
|
19
|
+
RadioGroupWrapper.rootSelector = styles_selectors_js_2.default.root;
|
|
19
20
|
exports.default = RadioGroupWrapper;
|
|
20
21
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/selectors/radio-group/index.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,4EAAgG;AAChG,oEAA0E;AAC1E,iDAAgD;AAChD,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/selectors/radio-group/index.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,4EAAgG;AAChG,oEAA0E;AAC1E,iDAAgD;AAChD,oHAA2G;AAC3G,+FAA2E;AAC3E,MAAqB,iBAAkB,SAAQ,4BAAgB;IAE7D,WAAW;QACT,OAAO,IAAI,CAAC,kBAAkB,CAAC,6BAAiB,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,sBAAkB,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;IAC1G,CAAC;IACD,gBAAgB,CAAC,KAAa;QAC5B,MAAM,SAAS,GAAG,IAAA,sBAAc,EAAC,KAAK,CAAC,CAAC;QACxC,OAAO,IAAI,CAAC,IAAI,CAAC,gBAAgB,SAAS,IAAI,CAAC,CAAC;IAClD,CAAC;;AAPM,8BAAY,GAAW,6BAAM,CAAC,IAAI,CAAC;kBADvB,iBAAiB"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ComponentWrapper, ElementWrapper } from "@cloudscape-design/test-utils-core/selectors";
|
|
2
2
|
export default class RadioButtonWrapper extends ComponentWrapper {
|
|
3
|
+
static rootSelector: string;
|
|
3
4
|
private findAbstractSwitch;
|
|
4
5
|
findLabel(): ElementWrapper;
|
|
5
6
|
findNativeInput(): ElementWrapper;
|
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
4
4
|
// SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
const selectors_1 = require("@cloudscape-design/test-utils-core/selectors");
|
|
6
6
|
const abstract_switch_1 = require("../internal/abstract-switch");
|
|
7
|
+
const styles_selectors_js_1 = require("../../../internal/components/radio-button/test-classes/styles.selectors.js");
|
|
7
8
|
class RadioButtonWrapper extends selectors_1.ComponentWrapper {
|
|
8
9
|
findAbstractSwitch() {
|
|
9
10
|
return new abstract_switch_1.default(this.getElement());
|
|
@@ -18,5 +19,6 @@ class RadioButtonWrapper extends selectors_1.ComponentWrapper {
|
|
|
18
19
|
return this.findAbstractSwitch().findDescription();
|
|
19
20
|
}
|
|
20
21
|
}
|
|
22
|
+
RadioButtonWrapper.rootSelector = styles_selectors_js_1.default.root;
|
|
21
23
|
exports.default = RadioButtonWrapper;
|
|
22
24
|
//# sourceMappingURL=radio-button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../../../src/test-utils/selectors/radio-group/radio-button.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,4EAAgG;AAChG,iEAAgE;AAChE,MAAqB,kBAAmB,SAAQ,4BAAgB;
|
|
1
|
+
{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../../../src/test-utils/selectors/radio-group/radio-button.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,4EAAgG;AAChG,iEAAgE;AAChE,oHAAgG;AAChG,MAAqB,kBAAmB,SAAQ,4BAAgB;IAEtD,kBAAkB;QACxB,OAAO,IAAI,yBAAqB,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;IACtD,CAAC;IACD,SAAS;QACP,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC,SAAS,EAAE,CAAC;IAC/C,CAAC;IACD,eAAe;QACb,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC,eAAe,EAAE,CAAC;IACrD,CAAC;IACD,eAAe;QACb,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC,eAAe,EAAE,CAAC;IACrD,CAAC;;AAZM,+BAAY,GAAW,6BAAM,CAAC,IAAI,CAAC;kBADvB,kBAAkB"}
|
package/tiles/tile.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tile.d.ts","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"tile.d.ts","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAE9E,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,UAAU,SAAS;IACjB,IAAI,EAAE,UAAU,CAAC,eAAe,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,IAAI,oFAoDhB,CAAC"}
|
package/tiles/tile.js
CHANGED
|
@@ -4,9 +4,9 @@ import React, { useRef } from 'react';
|
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
|
|
6
6
|
import { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
|
|
7
|
+
import RadioButton from '../internal/components/radio-button';
|
|
7
8
|
import { fireNonCancelableEvent } from '../internal/events';
|
|
8
9
|
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
9
|
-
import RadioButton from '../radio-group/radio-button';
|
|
10
10
|
import analyticsSelectors from './analytics-metadata/styles.css.js';
|
|
11
11
|
import styles from './styles.css.js';
|
|
12
12
|
export const Tile = React.forwardRef(({ item, selected, name, breakpoint, onChange, readOnly, ...rest }, forwardedRef) => {
|
|
@@ -24,7 +24,7 @@ export const Tile = React.forwardRef(({ item, selected, name, breakpoint, onChan
|
|
|
24
24
|
}
|
|
25
25
|
}, ...copyAnalyticsMetadataAttribute(rest) },
|
|
26
26
|
React.createElement("div", { className: clsx(styles.control, { [styles['no-image']]: !item.image }) },
|
|
27
|
-
React.createElement(RadioButton, { checked: selected, ref: mergedRef, name: name, value: item.value,
|
|
27
|
+
React.createElement(RadioButton, { checked: selected, ref: mergedRef, name: name, value: item.value, description: item.description, disabled: item.disabled, controlId: item.controlId, readOnly: readOnly, className: analyticsSelectors['radio-button'] }, item.label)),
|
|
28
28
|
item.image && React.createElement("div", { className: clsx(styles.image, { [styles.disabled]: !!item.disabled }) }, item.image)));
|
|
29
29
|
});
|
|
30
30
|
//# sourceMappingURL=tile.js.map
|
package/tiles/tile.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../src/tiles/tile.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,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAC7E,OAAO,EAAE,8BAA8B,EAAE,MAAM,kEAAkE,CAAC;AAElH,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;
|
|
1
|
+
{"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../src/tiles/tile.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 { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport RadioButton from '../internal/components/radio-button';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { TilesProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface TileProps {\n item: TilesProps.TilesDefinition;\n selected: boolean;\n name: string;\n breakpoint: ReturnType<typeof useContainerBreakpoints>[0];\n onChange: TilesProps['onChange'];\n readOnly?: boolean;\n}\n\nexport const Tile = React.forwardRef(\n (\n { item, selected, name, breakpoint, onChange, readOnly, ...rest }: TileProps,\n forwardedRef: React.Ref<HTMLInputElement>\n ) => {\n const internalRef = useRef<HTMLInputElement>(null);\n const isVisualRefresh = useVisualRefresh();\n\n const mergedRef = useMergeRefs(internalRef, forwardedRef);\n\n return (\n <div\n className={clsx(\n styles['tile-container'],\n { [styles['has-metadata']]: item.description || item.image },\n { [styles.selected]: selected },\n { [styles.disabled]: !!item.disabled },\n { [styles.readonly]: readOnly },\n { [styles.refresh]: isVisualRefresh },\n styles[`breakpoint-${breakpoint}`]\n )}\n data-value={item.value}\n onClick={() => {\n if (item.disabled || readOnly) {\n return;\n }\n internalRef.current?.focus();\n if (!selected) {\n fireNonCancelableEvent(onChange, { value: item.value });\n }\n }}\n {...copyAnalyticsMetadataAttribute(rest)}\n >\n <div className={clsx(styles.control, { [styles['no-image']]: !item.image })}>\n <RadioButton\n checked={selected}\n ref={mergedRef}\n name={name}\n value={item.value}\n description={item.description}\n disabled={item.disabled}\n controlId={item.controlId}\n readOnly={readOnly}\n className={analyticsSelectors['radio-button']}\n >\n {item.label}\n </RadioButton>\n </div>\n {item.image && <div className={clsx(styles.image, { [styles.disabled]: !!item.disabled })}>{item.image}</div>}\n </div>\n );\n }\n);\n"]}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { NonCancelableEventHandler } from '../internal/events';
|
|
3
|
-
import { RadioGroupProps } from './interfaces';
|
|
4
|
-
interface RadioButtonProps extends RadioGroupProps.RadioButtonDefinition {
|
|
5
|
-
name: string;
|
|
6
|
-
checked: boolean;
|
|
7
|
-
onChange?: NonCancelableEventHandler<RadioGroupProps.ChangeDetail>;
|
|
8
|
-
readOnly?: boolean;
|
|
9
|
-
className?: string;
|
|
10
|
-
style?: RadioGroupProps.Style;
|
|
11
|
-
}
|
|
12
|
-
declare const _default: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
|
|
13
|
-
export default _default;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"radio-button.d.ts","sourceRoot":"","sources":["../../../src/radio-group/radio-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK/C,UAAU,gBAAiB,SAAQ,eAAe,CAAC,qBAAqB;IACtE,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC;CAC/B;;AAED,wBAoFG"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/radio-group/radio-button.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 { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\nimport { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { RadioGroupProps } from './interfaces';\nimport { getAbstractSwitchStyles, getInnerCircleStyle, getOuterCircleStyle } from './style';\n\nimport styles from './styles.css.js';\n\ninterface RadioButtonProps extends RadioGroupProps.RadioButtonDefinition {\n name: string;\n checked: boolean;\n onChange?: NonCancelableEventHandler<RadioGroupProps.ChangeDetail>;\n readOnly?: boolean;\n className?: string;\n style?: RadioGroupProps.Style;\n}\n\nexport default React.forwardRef(function RadioButton(\n {\n name,\n label,\n value,\n checked,\n description,\n disabled,\n controlId,\n onChange,\n readOnly,\n className,\n style,\n ...rest\n }: RadioButtonProps,\n ref: React.Ref<HTMLInputElement>\n) {\n const radioButtonRef = useRef<HTMLInputElement>(null);\n const mergedRefs = useMergeRefs(radioButtonRef, ref);\n\n const { tabIndex } = useSingleTabStopNavigation(radioButtonRef);\n\n return (\n <AbstractSwitch\n className={clsx(styles.radio, description && styles['radio--has-description'], className)}\n controlClassName={styles['radio-control']}\n outlineClassName={styles.outline}\n label={label}\n description={description}\n disabled={disabled}\n readOnly={readOnly}\n controlId={controlId}\n style={getAbstractSwitchStyles(style, checked, disabled, readOnly)}\n {...copyAnalyticsMetadataAttribute(rest)}\n nativeControl={nativeControlProps => (\n <input\n {...nativeControlProps}\n tabIndex={tabIndex}\n type=\"radio\"\n ref={mergedRefs}\n name={name}\n value={value}\n checked={checked}\n aria-disabled={readOnly && !disabled ? 'true' : undefined}\n // empty handler to suppress React controllability warning\n onChange={() => {}}\n />\n )}\n onClick={() => {\n radioButtonRef.current?.focus();\n if (checked) {\n return;\n }\n fireNonCancelableEvent(onChange, { value });\n }}\n styledControl={\n <svg viewBox=\"0 0 100 100\" focusable=\"false\" aria-hidden=\"true\">\n <circle\n className={clsx(styles['styled-circle-border'], {\n [styles['styled-circle-disabled']]: disabled,\n [styles['styled-circle-readonly']]: readOnly,\n })}\n strokeWidth={6.25}\n cx={50}\n cy={50}\n r={46}\n style={getOuterCircleStyle(style, checked, disabled, readOnly)}\n />\n <circle\n className={clsx(styles['styled-circle-fill'], {\n [styles['styled-circle-disabled']]: disabled,\n [styles['styled-circle-checked']]: checked,\n [styles['styled-circle-readonly']]: readOnly,\n })}\n strokeWidth={30}\n cx={50}\n cy={50}\n r={35}\n style={getInnerCircleStyle(style, checked, disabled, readOnly)}\n />\n </svg>\n }\n />\n );\n});\n"]}
|