@cloudscape-design/components 3.0.1055 → 3.0.1056
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/checkbox/index.js +11 -11
- package/checkbox/interfaces.d.ts +44 -0
- package/checkbox/interfaces.d.ts.map +1 -1
- package/checkbox/interfaces.js.map +1 -1
- package/checkbox/internal-do-not-use-core.js +18 -0
- package/checkbox/internal.d.ts.map +1 -1
- package/checkbox/internal.js +3 -2
- package/checkbox/internal.js.map +1 -1
- package/checkbox/style.d.ts +3 -0
- package/checkbox/style.d.ts.map +1 -0
- package/checkbox/style.js +41 -0
- package/checkbox/style.js.map +1 -0
- package/checkbox/styles.css.js +3 -3
- package/checkbox/styles.scoped.css +11 -10
- package/checkbox/styles.selectors.js +3 -3
- package/internal/base-component/styles.scoped.css +1 -1
- package/internal/components/abstract-switch/index.d.ts +17 -0
- package/internal/components/abstract-switch/index.d.ts.map +1 -1
- package/internal/components/abstract-switch/index.js +10 -4
- package/internal/components/abstract-switch/index.js.map +1 -1
- package/internal/components/checkbox-icon/index.d.ts +10 -0
- package/internal/components/checkbox-icon/index.d.ts.map +1 -1
- package/internal/components/checkbox-icon/index.js +4 -3
- package/internal/components/checkbox-icon/index.js.map +1 -1
- package/internal/environment.js +2 -2
- package/internal/environment.json +2 -2
- package/internal/manifest.json +1 -1
- package/internal/utils/style.d.ts +1 -0
- package/internal/utils/style.d.ts.map +1 -0
- package/internal/utils/style.js +22 -0
- package/internal/utils/style.js.map +1 -0
- package/package.json +1 -1
- package/radio-group/index.js +10 -15
- package/radio-group/interfaces.d.ts +47 -0
- package/radio-group/interfaces.d.ts.map +1 -1
- package/radio-group/interfaces.js.map +1 -1
- package/radio-group/internal-do-not-use-core.js +23 -0
- package/radio-group/internal.d.ts.map +1 -1
- package/radio-group/internal.js +2 -2
- package/radio-group/internal.js.map +1 -1
- package/radio-group/radio-button.d.ts +1 -0
- package/radio-group/radio-button.d.ts.map +1 -1
- package/radio-group/radio-button.js +5 -4
- package/radio-group/radio-button.js.map +1 -1
- package/radio-group/style.d.ts +10 -0
- package/radio-group/style.d.ts.map +1 -0
- package/radio-group/style.js +50 -0
- package/radio-group/style.js.map +1 -0
- package/radio-group/styles.css.js +10 -10
- package/radio-group/styles.scoped.css +22 -21
- package/radio-group/styles.selectors.js +10 -10
- package/toggle/index.js +10 -6
- package/toggle/interfaces.d.ts +35 -0
- package/toggle/interfaces.d.ts.map +1 -1
- package/toggle/interfaces.js.map +1 -1
- package/toggle/internal-do-not-use-core.js +14 -0
- package/toggle/internal.d.ts.map +1 -1
- package/toggle/internal.js +3 -2
- package/toggle/internal.js.map +1 -1
- package/toggle/style.d.ts +3 -0
- package/toggle/style.d.ts.map +1 -0
- package/toggle/style.js +37 -0
- package/toggle/style.js.map +1 -0
- package/toggle/styles.css.js +10 -10
- package/toggle/styles.scoped.css +23 -22
- package/toggle/styles.selectors.js +10 -10
- /package/checkbox/{index.js.map → internal-do-not-use-core.js.map} +0 -0
- /package/radio-group/{index.js.map → internal-do-not-use-core.js.map} +0 -0
- /package/toggle/{index.js.map → internal-do-not-use-core.js.map} +0 -0
package/checkbox/index.js
CHANGED
|
@@ -1,18 +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
|
-
import { __rest } from "tslib";
|
|
5
3
|
import React from 'react';
|
|
6
|
-
|
|
4
|
+
|
|
5
|
+
import CoreComponent from './internal-do-not-use-core';
|
|
7
6
|
import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
8
|
-
import
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
});
|
|
14
|
-
return React.createElement(
|
|
7
|
+
import { validateProps } from '@cloudscape-design/component-toolkit/internal';
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
const Checkbox = React.forwardRef((props, ref) => {
|
|
12
|
+
validateProps('Checkbox', props, ["style"], {}, 'console');
|
|
13
|
+
return React.createElement(CoreComponent, {ref,...props});
|
|
15
14
|
});
|
|
15
|
+
|
|
16
|
+
|
|
16
17
|
applyDisplayName(Checkbox, 'Checkbox');
|
|
17
18
|
export default Checkbox;
|
|
18
|
-
//# sourceMappingURL=index.js.map
|
package/checkbox/interfaces.d.ts
CHANGED
|
@@ -21,6 +21,10 @@ export interface CheckboxProps extends BaseCheckboxProps {
|
|
|
21
21
|
* Specifies whether to add `aria-required` to the native control.
|
|
22
22
|
*/
|
|
23
23
|
ariaRequired?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Specifies an object of selectors and properties that are used to apply custom styles.
|
|
26
|
+
* @awsuiSystem core
|
|
27
|
+
*/
|
|
24
28
|
}
|
|
25
29
|
export declare namespace CheckboxProps {
|
|
26
30
|
interface Ref {
|
|
@@ -33,4 +37,44 @@ export declare namespace CheckboxProps {
|
|
|
33
37
|
checked: boolean;
|
|
34
38
|
indeterminate: false;
|
|
35
39
|
}
|
|
40
|
+
interface Style {
|
|
41
|
+
input?: {
|
|
42
|
+
fill?: {
|
|
43
|
+
checked?: string;
|
|
44
|
+
default?: string;
|
|
45
|
+
disabled?: string;
|
|
46
|
+
indeterminate?: string;
|
|
47
|
+
readOnly?: string;
|
|
48
|
+
};
|
|
49
|
+
stroke?: {
|
|
50
|
+
checked?: string;
|
|
51
|
+
default?: string;
|
|
52
|
+
disabled?: string;
|
|
53
|
+
indeterminate?: string;
|
|
54
|
+
readOnly?: string;
|
|
55
|
+
};
|
|
56
|
+
check?: {
|
|
57
|
+
stroke?: {
|
|
58
|
+
checked?: string;
|
|
59
|
+
disabled?: string;
|
|
60
|
+
indeterminate?: string;
|
|
61
|
+
readOnly?: string;
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
focusRing?: {
|
|
65
|
+
borderColor?: string;
|
|
66
|
+
borderRadius?: string;
|
|
67
|
+
borderWidth?: string;
|
|
68
|
+
};
|
|
69
|
+
};
|
|
70
|
+
label?: {
|
|
71
|
+
color?: {
|
|
72
|
+
checked?: string;
|
|
73
|
+
default?: string;
|
|
74
|
+
disabled?: string;
|
|
75
|
+
indeterminate?: string;
|
|
76
|
+
readOnly?: string;
|
|
77
|
+
};
|
|
78
|
+
};
|
|
79
|
+
}
|
|
36
80
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/checkbox/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAEjE;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/checkbox/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAEjE;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC;CAC7B;AAED,yBAAiB,aAAa,CAAC;IAC7B,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;IAED,UAAiB,YAAY;QAC3B,OAAO,EAAE,OAAO,CAAC;QACjB,aAAa,EAAE,KAAK,CAAC;KACtB;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,aAAa,CAAC,EAAE,MAAM,CAAC;gBACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;YACF,MAAM,CAAC,EAAE;gBACP,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,aAAa,CAAC,EAAE,MAAM,CAAC;gBACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;YACF,KAAK,CAAC,EAAE;gBACN,MAAM,CAAC,EAAE;oBACP,OAAO,CAAC,EAAE,MAAM,CAAC;oBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;oBAClB,aAAa,CAAC,EAAE,MAAM,CAAC;oBACvB,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,aAAa,CAAC,EAAE,MAAM,CAAC;gBACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;SACH,CAAC;KACH;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/checkbox/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 { NonCancelableEventHandler } from '../internal/events';\nimport { BaseCheckboxProps } from './base-checkbox';\n\nexport interface CheckboxProps extends BaseCheckboxProps {\n /**\n * The control's label that's displayed next to the checkbox. A state change occurs when a user clicks on it.\n * @displayname label\n */\n children?: React.ReactNode;\n\n /**\n * Specifies that the component is in an indeterminate state. The behavior of this property replicates\n * the behavior of [the respective property](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes)\n * in the native control.\n */\n indeterminate?: boolean;\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<CheckboxProps.ChangeDetail>;\n\n /**\n * Specifies whether to add `aria-required` to the native control.\n */\n ariaRequired?: boolean;\n}\n\nexport namespace CheckboxProps {\n export interface Ref {\n /**\n * Sets input focus onto the UI control.\n */\n focus(): void;\n }\n\n export interface ChangeDetail {\n checked: boolean;\n indeterminate: false;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/checkbox/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 { NonCancelableEventHandler } from '../internal/events';\nimport { BaseCheckboxProps } from './base-checkbox';\n\nexport interface CheckboxProps extends BaseCheckboxProps {\n /**\n * The control's label that's displayed next to the checkbox. A state change occurs when a user clicks on it.\n * @displayname label\n */\n children?: React.ReactNode;\n\n /**\n * Specifies that the component is in an indeterminate state. The behavior of this property replicates\n * the behavior of [the respective property](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes)\n * in the native control.\n */\n indeterminate?: boolean;\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<CheckboxProps.ChangeDetail>;\n\n /**\n * Specifies whether to add `aria-required` to the native control.\n */\n ariaRequired?: boolean;\n\n /**\n * Specifies an object of selectors and properties that are used to apply custom styles.\n * @awsuiSystem core\n */\n style?: CheckboxProps.Style;\n}\n\nexport namespace CheckboxProps {\n export interface Ref {\n /**\n * Sets input focus onto the UI control.\n */\n focus(): void;\n }\n\n export interface ChangeDetail {\n checked: boolean;\n indeterminate: false;\n }\n\n export interface Style {\n input?: {\n fill?: {\n checked?: string;\n default?: string;\n disabled?: string;\n indeterminate?: string;\n readOnly?: string;\n };\n stroke?: {\n checked?: string;\n default?: string;\n disabled?: string;\n indeterminate?: string;\n readOnly?: string;\n };\n check?: {\n stroke?: {\n checked?: string;\n disabled?: string;\n indeterminate?: 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 indeterminate?: string;\n readOnly?: string;\n };\n };\n }\n}\n"]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
'use client';
|
|
4
|
+
import { __rest } from "tslib";
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import useBaseComponent from '../internal/hooks/use-base-component';
|
|
7
|
+
import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
8
|
+
import InternalCheckbox from './internal';
|
|
9
|
+
const Checkbox = React.forwardRef((_a, ref) => {
|
|
10
|
+
var props = __rest(_a, []);
|
|
11
|
+
const baseComponentProps = useBaseComponent('Checkbox', {
|
|
12
|
+
props: { readOnly: props.readOnly },
|
|
13
|
+
});
|
|
14
|
+
return React.createElement(InternalCheckbox, Object.assign({}, props, baseComponentProps, { ref: ref, __injectAnalyticsComponentMetadata: true }));
|
|
15
|
+
});
|
|
16
|
+
applyDisplayName(Checkbox, 'Checkbox');
|
|
17
|
+
export default Checkbox;
|
|
18
|
+
//# sourceMappingURL=internal-do-not-use-core.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/checkbox/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAejD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/checkbox/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAejD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAK7C,UAAU,aAAc,SAAQ,aAAa,EAAE,0BAA0B;IACvE,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C;AAED,QAAA,MAAM,gBAAgB,yFA6GrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
package/checkbox/internal.js
CHANGED
|
@@ -11,9 +11,10 @@ import { useFormFieldContext } from '../internal/context/form-field-context';
|
|
|
11
11
|
import { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';
|
|
12
12
|
import { fireNonCancelableEvent } from '../internal/events';
|
|
13
13
|
import useForwardFocus from '../internal/hooks/forward-focus';
|
|
14
|
+
import { getAbstractSwitchStyles, getCheckboxIconStyles } from './style';
|
|
14
15
|
import styles from './styles.css.js';
|
|
15
16
|
const InternalCheckbox = React.forwardRef((_a, ref) => {
|
|
16
|
-
var { controlId, name, checked, disabled, readOnly, ariaRequired, indeterminate, children, description, ariaLabel, onFocus, onBlur, onChange, tabIndex: explicitTabIndex, showOutline, ariaControls, __internalRootRef, __injectAnalyticsComponentMetadata = false } = _a, rest = __rest(_a, ["controlId", "name", "checked", "disabled", "readOnly", "ariaRequired", "indeterminate", "children", "description", "ariaLabel", "onFocus", "onBlur", "onChange", "tabIndex", "showOutline", "ariaControls", "__internalRootRef", "__injectAnalyticsComponentMetadata"]);
|
|
17
|
+
var { controlId, name, checked, disabled, readOnly, ariaRequired, indeterminate, children, description, ariaLabel, onFocus, onBlur, onChange, tabIndex: explicitTabIndex, showOutline, ariaControls, style, __internalRootRef, __injectAnalyticsComponentMetadata = false } = _a, rest = __rest(_a, ["controlId", "name", "checked", "disabled", "readOnly", "ariaRequired", "indeterminate", "children", "description", "ariaLabel", "onFocus", "onBlur", "onChange", "tabIndex", "showOutline", "ariaControls", "style", "__internalRootRef", "__injectAnalyticsComponentMetadata"]);
|
|
17
18
|
const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);
|
|
18
19
|
const baseProps = getBaseProps(rest);
|
|
19
20
|
const checkboxRef = useRef(null);
|
|
@@ -46,7 +47,7 @@ const InternalCheckbox = React.forwardRef((_a, ref) => {
|
|
|
46
47
|
fireNonCancelableEvent(onChange,
|
|
47
48
|
// for deterministic transitions "indeterminate" -> "checked" -> "unchecked"
|
|
48
49
|
indeterminate ? { checked: true, indeterminate: false } : { checked: !checked, indeterminate: false });
|
|
49
|
-
}, styledControl: React.createElement(CheckboxIcon, { checked: checked, indeterminate: indeterminate, disabled: disabled, readOnly: readOnly }), __internalRootRef: __internalRootRef }, getAnalyticsMetadataAttribute(analyticsMetadata))));
|
|
50
|
+
}, styledControl: React.createElement(CheckboxIcon, { checked: checked, indeterminate: indeterminate, disabled: disabled, readOnly: readOnly, style: getCheckboxIconStyles(style, checked, disabled, readOnly, indeterminate) }), style: getAbstractSwitchStyles(style, checked, disabled, readOnly, indeterminate), __internalRootRef: __internalRootRef }, getAnalyticsMetadataAttribute(analyticsMetadata))));
|
|
50
51
|
});
|
|
51
52
|
export default InternalCheckbox;
|
|
52
53
|
//# sourceMappingURL=internal.js.map
|
package/checkbox/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/checkbox/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAEL,6BAA6B,GAC9B,MAAM,kEAAkE,CAAC;AAE1E,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,cAAc,MAAM,wCAAwC,CAAC;AACpE,OAAO,YAAY,MAAM,sCAAsC,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,0BAA0B,EAAE,MAAM,wDAAwD,CAAC;AACpG,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,eAAe,MAAM,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/checkbox/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, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport {\n GeneratedAnalyticsMetadataFragment,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getBaseProps } from '../internal/base-component';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport CheckboxIcon from '../internal/components/checkbox-icon';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { GeneratedAnalyticsMetadataCheckboxComponent } from './analytics-metadata/interfaces';\nimport { CheckboxProps } from './interfaces';\nimport { getAbstractSwitchStyles, getCheckboxIconStyles } from './style';\n\nimport styles from './styles.css.js';\n\ninterface InternalProps extends CheckboxProps, InternalBaseComponentProps {\n tabIndex?: -1;\n showOutline?: boolean;\n __injectAnalyticsComponentMetadata?: boolean;\n}\n\nconst InternalCheckbox = React.forwardRef<CheckboxProps.Ref, InternalProps>(\n (\n {\n controlId,\n name,\n checked,\n disabled,\n readOnly,\n ariaRequired,\n indeterminate,\n children,\n description,\n ariaLabel,\n onFocus,\n onBlur,\n onChange,\n tabIndex: explicitTabIndex,\n showOutline,\n ariaControls,\n style,\n __internalRootRef,\n __injectAnalyticsComponentMetadata = false,\n ...rest\n },\n ref\n ) => {\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n const baseProps = getBaseProps(rest);\n const checkboxRef = useRef<HTMLInputElement>(null);\n useForwardFocus(ref, checkboxRef);\n useEffect(() => {\n if (checkboxRef.current) {\n checkboxRef.current.indeterminate = Boolean(indeterminate);\n }\n });\n\n const { tabIndex } = useSingleTabStopNavigation(checkboxRef, { tabIndex: explicitTabIndex });\n\n const analyticsMetadata: GeneratedAnalyticsMetadataFragment = {};\n const analyticsComponentMetadata: GeneratedAnalyticsMetadataCheckboxComponent = {\n name: 'awsui.Checkbox',\n label: { root: 'self' },\n properties: {\n checked: `${!!checked}`,\n },\n };\n if (__injectAnalyticsComponentMetadata) {\n analyticsMetadata.component = analyticsComponentMetadata;\n }\n if (!disabled && !readOnly) {\n analyticsMetadata.action = !checked ? 'select' : 'deselect';\n }\n\n return (\n <AbstractSwitch\n {...baseProps}\n className={clsx(styles.root, baseProps.className)}\n controlClassName={styles['checkbox-control']}\n outlineClassName={styles.outline}\n controlId={controlId}\n disabled={disabled}\n readOnly={readOnly}\n label={children}\n description={description}\n descriptionBottomPadding={true}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n ariaDescribedby={ariaDescribedby}\n ariaControls={ariaControls}\n showOutline={showOutline}\n nativeControl={nativeControlProps => (\n <input\n {...nativeControlProps}\n ref={checkboxRef}\n type=\"checkbox\"\n checked={checked}\n name={name}\n aria-required={ariaRequired ? 'true' : undefined}\n aria-disabled={readOnly && !disabled ? 'true' : undefined}\n tabIndex={tabIndex}\n onFocus={() => fireNonCancelableEvent(onFocus)}\n onBlur={() => fireNonCancelableEvent(onBlur)}\n // empty handler to suppress React controllability warning\n onChange={() => {}}\n />\n )}\n onClick={() => {\n checkboxRef.current?.focus();\n fireNonCancelableEvent(\n onChange,\n // for deterministic transitions \"indeterminate\" -> \"checked\" -> \"unchecked\"\n indeterminate ? { checked: true, indeterminate: false } : { checked: !checked, indeterminate: false }\n );\n }}\n styledControl={\n <CheckboxIcon\n checked={checked}\n indeterminate={indeterminate}\n disabled={disabled}\n readOnly={readOnly}\n style={getCheckboxIconStyles(style, checked, disabled, readOnly, indeterminate)}\n />\n }\n style={getAbstractSwitchStyles(style, checked, disabled, readOnly, indeterminate)}\n __internalRootRef={__internalRootRef}\n {...getAnalyticsMetadataAttribute(analyticsMetadata)}\n />\n );\n }\n);\n\nexport default InternalCheckbox;\n"]}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { CheckboxProps } from './interfaces';
|
|
2
|
+
export declare function getAbstractSwitchStyles(style: CheckboxProps.Style | undefined, checked?: boolean, disabled?: boolean, readOnly?: boolean, indeterminate?: boolean): {};
|
|
3
|
+
export declare function getCheckboxIconStyles(style: CheckboxProps.Style | undefined, checked?: boolean, disabled?: boolean, readOnly?: boolean, indeterminate?: boolean): {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/checkbox/style.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,aAAa,CAAC,KAAK,GAAG,SAAS,EACtC,OAAO,CAAC,EAAE,OAAO,EACjB,QAAQ,CAAC,EAAE,OAAO,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,aAAa,CAAC,EAAE,OAAO,MAoBxB;AAED,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,aAAa,CAAC,KAAK,GAAG,SAAS,EACtC,OAAO,CAAC,EAAE,OAAO,EACjB,QAAQ,CAAC,EAAE,OAAO,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,aAAa,CAAC,EAAE,OAAO,MAqBxB"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import { SYSTEM } from '../internal/environment';
|
|
4
|
+
import { getComputedAbstractSwitchState } from '../internal/utils/style';
|
|
5
|
+
export function getAbstractSwitchStyles(style, checked, disabled, readOnly, indeterminate) {
|
|
6
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
7
|
+
let properties = {};
|
|
8
|
+
if (SYSTEM === 'core' && ((style === null || style === void 0 ? void 0 : style.label) || (style === null || style === void 0 ? void 0 : style.input))) {
|
|
9
|
+
const computedState = getComputedAbstractSwitchState(checked, disabled, readOnly, indeterminate);
|
|
10
|
+
properties = {
|
|
11
|
+
label: {
|
|
12
|
+
color: ((_a = style === null || style === void 0 ? void 0 : style.label) === null || _a === void 0 ? void 0 : _a.color) && style.label.color[computedState],
|
|
13
|
+
},
|
|
14
|
+
focusRing: {
|
|
15
|
+
borderColor: (_c = (_b = style === null || style === void 0 ? void 0 : style.input) === null || _b === void 0 ? void 0 : _b.focusRing) === null || _c === void 0 ? void 0 : _c.borderColor,
|
|
16
|
+
borderRadius: (_e = (_d = style === null || style === void 0 ? void 0 : style.input) === null || _d === void 0 ? void 0 : _d.focusRing) === null || _e === void 0 ? void 0 : _e.borderRadius,
|
|
17
|
+
borderWidth: (_g = (_f = style === null || style === void 0 ? void 0 : style.input) === null || _f === void 0 ? void 0 : _f.focusRing) === null || _g === void 0 ? void 0 : _g.borderWidth,
|
|
18
|
+
},
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
return properties;
|
|
22
|
+
}
|
|
23
|
+
export function getCheckboxIconStyles(style, checked, disabled, readOnly, indeterminate) {
|
|
24
|
+
var _a, _b, _c, _d;
|
|
25
|
+
let properties = {};
|
|
26
|
+
if (SYSTEM === 'core' && (style === null || style === void 0 ? void 0 : style.input)) {
|
|
27
|
+
const computedState = getComputedAbstractSwitchState(checked, disabled, readOnly, indeterminate);
|
|
28
|
+
properties = {
|
|
29
|
+
box: {
|
|
30
|
+
fill: ((_a = style.input) === null || _a === void 0 ? void 0 : _a.fill) && style.input.fill[computedState],
|
|
31
|
+
stroke: ((_b = style.input) === null || _b === void 0 ? void 0 : _b.stroke) && style.input.stroke[computedState],
|
|
32
|
+
},
|
|
33
|
+
line: {
|
|
34
|
+
stroke: ((_d = (_c = style.input) === null || _c === void 0 ? void 0 : _c.check) === null || _d === void 0 ? void 0 : _d.stroke) &&
|
|
35
|
+
style.input.check.stroke[computedState],
|
|
36
|
+
},
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
return properties;
|
|
40
|
+
}
|
|
41
|
+
//# sourceMappingURL=style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/checkbox/style.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,8BAA8B,EAAE,MAAM,yBAAyB,CAAC;AAGzE,MAAM,UAAU,uBAAuB,CACrC,KAAsC,EACtC,OAAiB,EACjB,QAAkB,EAClB,QAAkB,EAClB,aAAuB;;IAEvB,IAAI,UAAU,GAAG,EAAE,CAAC;IAEpB,IAAI,MAAM,KAAK,MAAM,IAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,MAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAA,CAAC,EAAE;QACvD,MAAM,aAAa,GAAG,8BAA8B,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC;QAEjG,UAAU,GAAG;YACX,KAAK,EAAE;gBACL,KAAK,EAAE,CAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,KAAK,KAAI,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,aAA+C,CAAC;aACjG;YACD,SAAS,EAAE;gBACT,WAAW,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,SAAS,0CAAE,WAAW;gBACjD,YAAY,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,SAAS,0CAAE,YAAY;gBACnD,WAAW,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,SAAS,0CAAE,WAAW;aAClD;SACF,CAAC;KACH;IAED,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,MAAM,UAAU,qBAAqB,CACnC,KAAsC,EACtC,OAAiB,EACjB,QAAkB,EAClB,QAAkB,EAClB,aAAuB;;IAEvB,IAAI,UAAU,GAAG,EAAE,CAAC;IAEpB,IAAI,MAAM,KAAK,MAAM,KAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAA,EAAE;QACrC,MAAM,aAAa,GAAG,8BAA8B,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC;QAEjG,UAAU,GAAG;YACX,GAAG,EAAE;gBACH,IAAI,EAAE,CAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,IAAI,KAAI,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,aAA8C,CAAC;gBAC3F,MAAM,EAAE,CAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,MAAM,KAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,aAAgD,CAAC;aACpG;YACD,IAAI,EAAE;gBACJ,MAAM,EACJ,CAAA,MAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,KAAK,0CAAE,MAAM;oBAC1B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,aAAsD,CAAC;aACnF;SACF,CAAC;KACH;IAED,OAAO,UAAU,CAAC;AACpB,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 { getComputedAbstractSwitchState } from '../internal/utils/style';\nimport { CheckboxProps } from './interfaces';\n\nexport function getAbstractSwitchStyles(\n style: CheckboxProps.Style | undefined,\n checked?: boolean,\n disabled?: boolean,\n readOnly?: boolean,\n indeterminate?: boolean\n) {\n let properties = {};\n\n if (SYSTEM === 'core' && (style?.label || style?.input)) {\n const computedState = getComputedAbstractSwitchState(checked, disabled, readOnly, indeterminate);\n\n properties = {\n label: {\n color: style?.label?.color && style.label.color[computedState as keyof typeof style.label.color],\n },\n focusRing: {\n borderColor: style?.input?.focusRing?.borderColor,\n borderRadius: style?.input?.focusRing?.borderRadius,\n borderWidth: style?.input?.focusRing?.borderWidth,\n },\n };\n }\n\n return properties;\n}\n\nexport function getCheckboxIconStyles(\n style: CheckboxProps.Style | undefined,\n checked?: boolean,\n disabled?: boolean,\n readOnly?: boolean,\n indeterminate?: boolean\n) {\n let properties = {};\n\n if (SYSTEM === 'core' && style?.input) {\n const computedState = getComputedAbstractSwitchState(checked, disabled, readOnly, indeterminate);\n\n properties = {\n box: {\n fill: style.input?.fill && style.input.fill[computedState as keyof typeof style.input.fill],\n stroke: style.input?.stroke && style.input.stroke[computedState as keyof typeof style.input.stroke],\n },\n line: {\n stroke:\n style.input?.check?.stroke &&\n style.input.check.stroke[computedState as keyof typeof style.input.check.stroke],\n },\n };\n }\n\n return properties;\n}\n"]}
|
package/checkbox/styles.css.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"root": "
|
|
5
|
-
"checkbox-control": "awsui_checkbox-
|
|
6
|
-
"outline": "
|
|
4
|
+
"root": "awsui_root_k2y2q_1ca6y_145",
|
|
5
|
+
"checkbox-control": "awsui_checkbox-control_k2y2q_1ca6y_178",
|
|
6
|
+
"outline": "awsui_outline_k2y2q_1ca6y_186"
|
|
7
7
|
};
|
|
8
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_root_k2y2q_1ca6y_145.awsui_root_k2y2q_1ca6y_145:not(#\9) {
|
|
146
146
|
border-collapse: separate;
|
|
147
147
|
border-spacing: 0;
|
|
148
148
|
box-sizing: border-box;
|
|
@@ -175,7 +175,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
175
175
|
display: flex;
|
|
176
176
|
}
|
|
177
177
|
|
|
178
|
-
.awsui_checkbox-
|
|
178
|
+
.awsui_checkbox-control_k2y2q_1ca6y_178:not(#\9) {
|
|
179
179
|
margin-block-start: calc((var(--line-height-body-m-2mh3ke, 20px) - var(--size-control-adm93y, 16px)) / 2);
|
|
180
180
|
min-block-size: var(--size-control-adm93y, 16px);
|
|
181
181
|
min-inline-size: var(--size-control-adm93y, 16px);
|
|
@@ -183,14 +183,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
183
183
|
inline-size: var(--size-control-adm93y, 16px);
|
|
184
184
|
}
|
|
185
185
|
|
|
186
|
-
.
|
|
186
|
+
.awsui_outline_k2y2q_1ca6y_186:not(#\9) {
|
|
187
|
+
--awsui-style-focus-ring-box-shadow-kcc2gu: 0 0 0 var(--awsui-style-focus-ring-border-width-kcc2gu, 2px) var(--awsui-style-focus-ring-border-color-kcc2gu, var(--color-border-item-focused-uk47pl, #006ce0));
|
|
187
188
|
position: relative;
|
|
188
189
|
}
|
|
189
|
-
.
|
|
190
|
+
.awsui_outline_k2y2q_1ca6y_186:not(#\9) {
|
|
190
191
|
outline: 2px dotted transparent;
|
|
191
192
|
outline-offset: calc(2px - 1px);
|
|
192
193
|
}
|
|
193
|
-
.
|
|
194
|
+
.awsui_outline_k2y2q_1ca6y_186:not(#\9)::before {
|
|
194
195
|
content: " ";
|
|
195
196
|
display: block;
|
|
196
197
|
position: absolute;
|
|
@@ -198,9 +199,9 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
198
199
|
inset-block-start: calc(-1 * 2px);
|
|
199
200
|
inline-size: calc(100% + 2px + 2px);
|
|
200
201
|
block-size: calc(100% + 2px + 2px);
|
|
201
|
-
border-start-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
|
|
202
|
-
border-start-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
|
|
203
|
-
border-end-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
|
|
204
|
-
border-end-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
|
|
205
|
-
box-shadow:
|
|
202
|
+
border-start-start-radius: var(--awsui-style-focus-ring-border-radius-kcc2gu, var(--border-radius-control-default-focus-ring-1uabki, 4px));
|
|
203
|
+
border-start-end-radius: var(--awsui-style-focus-ring-border-radius-kcc2gu, var(--border-radius-control-default-focus-ring-1uabki, 4px));
|
|
204
|
+
border-end-start-radius: var(--awsui-style-focus-ring-border-radius-kcc2gu, var(--border-radius-control-default-focus-ring-1uabki, 4px));
|
|
205
|
+
border-end-end-radius: var(--awsui-style-focus-ring-border-radius-kcc2gu, var(--border-radius-control-default-focus-ring-1uabki, 4px));
|
|
206
|
+
box-shadow: var(--awsui-style-focus-ring-box-shadow-kcc2gu);
|
|
206
207
|
}
|
|
@@ -2,8 +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
|
-
"root": "
|
|
6
|
-
"checkbox-control": "awsui_checkbox-
|
|
7
|
-
"outline": "
|
|
5
|
+
"root": "awsui_root_k2y2q_1ca6y_145",
|
|
6
|
+
"checkbox-control": "awsui_checkbox-control_k2y2q_1ca6y_178",
|
|
7
|
+
"outline": "awsui_outline_k2y2q_1ca6y_186"
|
|
8
8
|
};
|
|
9
9
|
|
|
@@ -17,6 +17,22 @@ export interface AbstractSwitchProps extends React.HTMLAttributes<HTMLElement>,
|
|
|
17
17
|
ariaDescribedby?: string;
|
|
18
18
|
ariaControls?: string;
|
|
19
19
|
onClick: () => void;
|
|
20
|
+
style?: {
|
|
21
|
+
control?: {
|
|
22
|
+
background?: string;
|
|
23
|
+
};
|
|
24
|
+
description?: {
|
|
25
|
+
color?: string;
|
|
26
|
+
};
|
|
27
|
+
label?: {
|
|
28
|
+
color?: string;
|
|
29
|
+
};
|
|
30
|
+
focusRing?: {
|
|
31
|
+
borderColor?: string;
|
|
32
|
+
borderRadius?: string;
|
|
33
|
+
borderWidth?: string;
|
|
34
|
+
};
|
|
35
|
+
};
|
|
20
36
|
}
|
|
21
37
|
export default function AbstractSwitch({
|
|
22
38
|
controlId,
|
|
@@ -35,6 +51,7 @@ export default function AbstractSwitch({
|
|
|
35
51
|
ariaDescribedby,
|
|
36
52
|
ariaControls,
|
|
37
53
|
onClick,
|
|
54
|
+
style,
|
|
38
55
|
__internalRootRef,
|
|
39
56
|
...rest
|
|
40
57
|
}: AbstractSwitchProps): JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/abstract-switch/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/abstract-switch/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AAKrF,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,0BAA0B;IACxG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;IAC1F,aAAa,EAAE,KAAK,CAAC,YAAY,CAAC;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE;QACN,OAAO,CAAC,EAAE;YACR,UAAU,CAAC,EAAE,MAAM,CAAC;SACrB,CAAC;QACF,WAAW,CAAC,EAAE;YACZ,KAAK,CAAC,EAAE,MAAM,CAAC;SAChB,CAAC;QACF,KAAK,CAAC,EAAE;YACN,KAAK,CAAC,EAAE,MAAM,CAAC;SAChB,CAAC;QACF,SAAS,CAAC,EAAE;YACV,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,WAAW,CAAC,EAAE,MAAM,CAAC;SACtB,CAAC;KACH,CAAC;CACH;AAMD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,aAAa,EACb,KAAK,EACL,WAAW,EACX,wBAAwB,EACxB,SAAS,EACT,cAAc,EACd,eAAe,EACf,YAAY,EACZ,OAAO,EACP,KAAK,EACL,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,mBAAmB,eA8FrB"}
|
|
@@ -5,13 +5,15 @@ import React from 'react';
|
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
import { useUniqueId } from '@cloudscape-design/component-toolkit/internal';
|
|
7
7
|
import { getAnalyticsLabelAttribute, getAnalyticsMetadataAttribute, } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
|
|
8
|
+
import customCssProps from '../../../internal/generated/custom-css-properties';
|
|
8
9
|
import analyticsSelectors from './analytics-metadata/styles.css.js';
|
|
9
10
|
import styles from './styles.css.js';
|
|
10
11
|
function joinString(values) {
|
|
11
12
|
return values.filter((value) => !!value).join(' ');
|
|
12
13
|
}
|
|
13
14
|
export default function AbstractSwitch(_a) {
|
|
14
|
-
var
|
|
15
|
+
var _b, _c, _d, _e, _f, _g;
|
|
16
|
+
var { controlId, controlClassName, outlineClassName, showOutline, disabled, readOnly, nativeControl, styledControl, label, description, descriptionBottomPadding, ariaLabel, ariaLabelledby, ariaDescribedby, ariaControls, onClick, style, __internalRootRef } = _a, rest = __rest(_a, ["controlId", "controlClassName", "outlineClassName", "showOutline", "disabled", "readOnly", "nativeControl", "styledControl", "label", "description", "descriptionBottomPadding", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "ariaControls", "onClick", "style", "__internalRootRef"]);
|
|
15
17
|
const uniqueId = useUniqueId();
|
|
16
18
|
const id = controlId || uniqueId;
|
|
17
19
|
const labelId = `${id}-label`;
|
|
@@ -39,7 +41,11 @@ export default function AbstractSwitch(_a) {
|
|
|
39
41
|
label: label ? `.${analyticsSelectors.label}` : `.${analyticsSelectors['native-input']}`,
|
|
40
42
|
},
|
|
41
43
|
})),
|
|
42
|
-
React.createElement("span", { className: clsx(styles.control, controlClassName) },
|
|
44
|
+
React.createElement("span", { className: clsx(styles.control, controlClassName), style: Object.assign({ background: (_b = style === null || style === void 0 ? void 0 : style.control) === null || _b === void 0 ? void 0 : _b.background }, ((style === null || style === void 0 ? void 0 : style.focusRing) && {
|
|
45
|
+
[customCssProps.styleFocusRingBorderColor]: (_c = style.focusRing) === null || _c === void 0 ? void 0 : _c.borderColor,
|
|
46
|
+
[customCssProps.styleFocusRingBorderRadius]: (_d = style.focusRing) === null || _d === void 0 ? void 0 : _d.borderRadius,
|
|
47
|
+
[customCssProps.styleFocusRingBorderWidth]: (_e = style.focusRing) === null || _e === void 0 ? void 0 : _e.borderWidth,
|
|
48
|
+
})) },
|
|
43
49
|
styledControl,
|
|
44
50
|
nativeControl({
|
|
45
51
|
id,
|
|
@@ -52,10 +58,10 @@ export default function AbstractSwitch(_a) {
|
|
|
52
58
|
}),
|
|
53
59
|
React.createElement("span", { className: clsx(styles.outline, outlineClassName, showOutline && styles['show-outline']) })),
|
|
54
60
|
React.createElement("span", { className: clsx(styles.content, !label && !description && styles['empty-content']) },
|
|
55
|
-
label && (React.createElement("span", { id: labelId, className: clsx(styles.label, analyticsSelectors.label, { [styles['label-disabled']]: disabled }) }, label)),
|
|
61
|
+
label && (React.createElement("span", { id: labelId, className: clsx(styles.label, analyticsSelectors.label, { [styles['label-disabled']]: disabled }), style: { color: (_f = style === null || style === void 0 ? void 0 : style.label) === null || _f === void 0 ? void 0 : _f.color } }, label)),
|
|
56
62
|
description && (React.createElement("span", { id: descriptionId, className: clsx(styles.description, {
|
|
57
63
|
[styles['description-disabled']]: disabled,
|
|
58
64
|
[styles['description-bottom-padding']]: descriptionBottomPadding,
|
|
59
|
-
}) }, description))))));
|
|
65
|
+
}), style: { color: (_g = style === null || style === void 0 ? void 0 : style.description) === null || _g === void 0 ? void 0 : _g.color } }, description))))));
|
|
60
66
|
}
|
|
61
67
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/abstract-switch/index.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,EACL,0BAA0B,EAC1B,6BAA6B,GAC9B,MAAM,kEAAkE,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/abstract-switch/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 from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport {\n getAnalyticsLabelAttribute,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component/index.js';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface AbstractSwitchProps extends React.HTMLAttributes<HTMLElement>, InternalBaseComponentProps {\n controlId?: string;\n controlClassName: string;\n outlineClassName: string;\n showOutline?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n nativeControl: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactElement;\n styledControl: React.ReactElement;\n label?: React.ReactNode;\n description?: React.ReactNode;\n descriptionBottomPadding?: boolean;\n ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n ariaControls?: string;\n onClick: () => void;\n style?: {\n control?: {\n background?: string;\n };\n description?: {\n color?: string;\n };\n label?: {\n color?: string;\n };\n focusRing?: {\n borderColor?: string;\n borderRadius?: string;\n borderWidth?: string;\n };\n };\n}\n\nfunction joinString(values: (string | undefined)[]) {\n return values.filter((value): value is string => !!value).join(' ');\n}\n\nexport default function AbstractSwitch({\n controlId,\n controlClassName,\n outlineClassName,\n showOutline,\n disabled,\n readOnly,\n nativeControl,\n styledControl,\n label,\n description,\n descriptionBottomPadding,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n ariaControls,\n onClick,\n style,\n __internalRootRef,\n ...rest\n}: AbstractSwitchProps) {\n const uniqueId = useUniqueId();\n const id = controlId || uniqueId;\n\n const labelId = `${id}-label`;\n const descriptionId = `${id}-description`;\n\n const ariaLabelledByIds = [];\n if (label && !ariaLabel) {\n ariaLabelledByIds.push(labelId);\n }\n if (ariaLabelledby) {\n ariaLabelledByIds.push(ariaLabelledby);\n }\n\n const ariaDescriptions = [];\n if (ariaDescribedby) {\n ariaDescriptions.push(ariaDescribedby);\n }\n if (description) {\n ariaDescriptions.push(descriptionId);\n }\n\n return (\n <span\n {...rest}\n className={clsx(styles.wrapper, rest.className)}\n ref={__internalRootRef}\n {...getAnalyticsLabelAttribute(label ? `.${analyticsSelectors.label}` : `.${analyticsSelectors['native-input']}`)}\n >\n <span\n className={styles['label-wrapper']}\n aria-disabled={disabled ? 'true' : undefined}\n onClick={disabled || readOnly ? undefined : onClick}\n {...getAnalyticsMetadataAttribute(\n disabled || readOnly\n ? {}\n : {\n action: 'select',\n detail: {\n label: label ? `.${analyticsSelectors.label}` : `.${analyticsSelectors['native-input']}`,\n },\n }\n )}\n >\n <span\n className={clsx(styles.control, controlClassName)}\n style={{\n background: style?.control?.background,\n ...(style?.focusRing && {\n [customCssProps.styleFocusRingBorderColor]: style.focusRing?.borderColor,\n [customCssProps.styleFocusRingBorderRadius]: style.focusRing?.borderRadius,\n [customCssProps.styleFocusRingBorderWidth]: style.focusRing?.borderWidth,\n }),\n }}\n >\n {styledControl}\n {nativeControl({\n id,\n disabled,\n className: clsx(styles['native-input'], analyticsSelectors['native-input']),\n 'aria-describedby': ariaDescriptions.length ? joinString(ariaDescriptions) : undefined,\n 'aria-labelledby': ariaLabelledByIds.length ? joinString(ariaLabelledByIds) : undefined,\n 'aria-label': ariaLabel,\n 'aria-controls': ariaControls,\n })}\n <span className={clsx(styles.outline, outlineClassName, showOutline && styles['show-outline'])} />\n </span>\n <span className={clsx(styles.content, !label && !description && styles['empty-content'])}>\n {label && (\n <span\n id={labelId}\n className={clsx(styles.label, analyticsSelectors.label, { [styles['label-disabled']]: disabled })}\n style={{ color: style?.label?.color }}\n >\n {label}\n </span>\n )}\n {description && (\n <span\n id={descriptionId}\n className={clsx(styles.description, {\n [styles['description-disabled']]: disabled,\n [styles['description-bottom-padding']]: descriptionBottomPadding,\n })}\n style={{ color: style?.description?.color }}\n >\n {description}\n </span>\n )}\n </span>\n </span>\n </span>\n );\n}\n"]}
|
|
@@ -5,12 +5,22 @@ interface CheckboxIconProps extends BaseComponentProps {
|
|
|
5
5
|
indeterminate?: boolean;
|
|
6
6
|
disabled?: boolean;
|
|
7
7
|
readOnly?: boolean;
|
|
8
|
+
style?: {
|
|
9
|
+
box?: {
|
|
10
|
+
fill?: string;
|
|
11
|
+
stroke?: string;
|
|
12
|
+
};
|
|
13
|
+
line?: {
|
|
14
|
+
stroke?: string;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
8
17
|
}
|
|
9
18
|
declare const CheckboxIcon: ({
|
|
10
19
|
checked,
|
|
11
20
|
indeterminate,
|
|
12
21
|
disabled,
|
|
13
22
|
readOnly,
|
|
23
|
+
style,
|
|
14
24
|
...restProps
|
|
15
25
|
}: CheckboxIconProps) => JSX.Element;
|
|
16
26
|
export default CheckboxIcon;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AAKxE,UAAU,iBAAkB,SAAQ,kBAAkB;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AAKxE,UAAU,iBAAkB,SAAQ,kBAAkB;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE;QACN,GAAG,CAAC,EAAE;YACJ,IAAI,CAAC,EAAE,MAAM,CAAC;YACd,MAAM,CAAC,EAAE,MAAM,CAAC;SACjB,CAAC;QACF,IAAI,CAAC,EAAE;YACL,MAAM,CAAC,EAAE,MAAM,CAAC;SACjB,CAAC;KACH,CAAC;CACH;AA8BD,QAAA,MAAM,YAAY,wEAOf,iBAAiB,gBAkCnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -26,7 +26,8 @@ const dimensionsByTheme = {
|
|
|
26
26
|
},
|
|
27
27
|
};
|
|
28
28
|
const CheckboxIcon = (_a) => {
|
|
29
|
-
var
|
|
29
|
+
var _b, _c, _d;
|
|
30
|
+
var { checked, indeterminate, disabled = false, readOnly = false, style } = _a, restProps = __rest(_a, ["checked", "indeterminate", "disabled", "readOnly", "style"]);
|
|
30
31
|
const baseProps = getBaseProps(restProps);
|
|
31
32
|
const theme = useVisualRefresh() ? 'refresh' : 'default';
|
|
32
33
|
const dimensions = dimensionsByTheme[theme];
|
|
@@ -36,11 +37,11 @@ const CheckboxIcon = (_a) => {
|
|
|
36
37
|
[styles['styled-box-indeterminate']]: indeterminate,
|
|
37
38
|
[styles['styled-box-disabled']]: disabled,
|
|
38
39
|
[styles['styled-box-readonly']]: readOnly,
|
|
39
|
-
}), x: dimensions.xy, y: dimensions.xy, rx: dimensions.r, ry: dimensions.r, width: dimensions.size, height: dimensions.size }),
|
|
40
|
+
}), x: dimensions.xy, y: dimensions.xy, rx: dimensions.r, ry: dimensions.r, width: dimensions.size, height: dimensions.size, style: { fill: (_b = style === null || style === void 0 ? void 0 : style.box) === null || _b === void 0 ? void 0 : _b.fill, stroke: (_c = style === null || style === void 0 ? void 0 : style.box) === null || _c === void 0 ? void 0 : _c.stroke } }),
|
|
40
41
|
checked || indeterminate ? (React.createElement("polyline", { className: clsx(styles['styled-line'], {
|
|
41
42
|
[styles['styled-line-disabled']]: disabled,
|
|
42
43
|
[styles['styled-line-readonly']]: readOnly,
|
|
43
|
-
}), points: indeterminate ? dimensions.indeterminate : dimensions.checked })) : null));
|
|
44
|
+
}), points: indeterminate ? dimensions.indeterminate : dimensions.checked, style: { stroke: (_d = style === null || style === void 0 ? void 0 : style.line) === null || _d === void 0 ? void 0 : _d.stroke } })) : null));
|
|
44
45
|
};
|
|
45
46
|
export default CheckboxIcon;
|
|
46
47
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAsB,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAE/D,OAAO,MAAM,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/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 from 'react';\nimport clsx from 'clsx';\n\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { useVisualRefresh } from '../../hooks/use-visual-mode';\n\nimport styles from './styles.css.js';\n\ninterface CheckboxIconProps extends BaseComponentProps {\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n style?: {\n box?: {\n fill?: string;\n stroke?: string;\n };\n line?: {\n stroke?: string;\n };\n };\n}\ninterface Dimension {\n viewBox: string;\n indeterminate: string;\n checked: string;\n xy: number;\n r: number;\n size: number;\n}\n\n// Can't use css variables for svg attributes\nconst dimensionsByTheme: Record<NonNullable<'default' | 'refresh'>, Dimension> = {\n default: {\n viewBox: '0 0 14 14',\n indeterminate: '2.5,7 11.5,7',\n checked: '2.5,7 6,10 11,3',\n xy: 0.5,\n r: 1.5,\n size: 13,\n },\n refresh: {\n viewBox: '0 0 16 16',\n indeterminate: '3.5,8 12.5,8',\n checked: '3.5,8 7,11 12,4',\n xy: 0.5,\n r: 3,\n size: 15,\n },\n};\n\nconst CheckboxIcon = ({\n checked,\n indeterminate,\n disabled = false,\n readOnly = false,\n style,\n ...restProps\n}: CheckboxIconProps) => {\n const baseProps = getBaseProps(restProps);\n const theme = useVisualRefresh() ? 'refresh' : 'default';\n const dimensions = dimensionsByTheme[theme];\n\n return (\n <svg className={styles.root} viewBox={dimensions.viewBox} aria-hidden=\"true\" focusable=\"false\" {...baseProps}>\n <rect\n className={clsx(styles['styled-box'], {\n [styles['styled-box-checked']]: checked,\n [styles['styled-box-indeterminate']]: indeterminate,\n [styles['styled-box-disabled']]: disabled,\n [styles['styled-box-readonly']]: readOnly,\n })}\n x={dimensions.xy}\n y={dimensions.xy}\n rx={dimensions.r}\n ry={dimensions.r}\n width={dimensions.size}\n height={dimensions.size}\n style={{ fill: style?.box?.fill, stroke: style?.box?.stroke }}\n />\n {checked || indeterminate ? (\n <polyline\n className={clsx(styles['styled-line'], {\n [styles['styled-line-disabled']]: disabled,\n [styles['styled-line-readonly']]: readOnly,\n })}\n points={indeterminate ? dimensions.indeterminate : dimensions.checked}\n style={{ stroke: style?.line?.stroke }}\n />\n ) : null}\n </svg>\n );\n};\n\nexport default CheckboxIcon;\n"]}
|
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 (8d13105b)";
|
|
3
|
+
export var GIT_SHA = "8d13105b";
|
|
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
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function getComputedAbstractSwitchState(checked: boolean | undefined, disabled: boolean | undefined, readOnly: boolean | undefined, indeterminate: boolean | undefined, defaultValue?: string): string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../src/internal/utils/style.ts"],"names":[],"mappings":"AAEA,wBAAgB,8BAA8B,CAC5C,OAAO,EAAE,OAAO,GAAG,SAAS,EAC5B,QAAQ,EAAE,OAAO,GAAG,SAAS,EAC7B,QAAQ,EAAE,OAAO,GAAG,SAAS,EAC7B,aAAa,EAAE,OAAO,GAAG,SAAS,EAClC,YAAY,GAAE,MAAkB,UAiBjC"}
|