@cloudscape-design/components-themeable 3.0.1063 → 3.0.1065
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/checkbox/styles.scss +11 -1
- package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
- package/lib/internal/scss/radio-group/styles.scss +11 -1
- package/lib/internal/scss/toggle/styles.scss +11 -1
- package/lib/internal/template/checkbox/interfaces.d.ts +45 -0
- package/lib/internal/template/checkbox/interfaces.d.ts.map +1 -1
- package/lib/internal/template/checkbox/interfaces.js.map +1 -1
- package/lib/internal/template/checkbox/internal.d.ts.map +1 -1
- package/lib/internal/template/checkbox/internal.js +3 -2
- package/lib/internal/template/checkbox/internal.js.map +1 -1
- package/lib/internal/template/checkbox/style.d.ts +4 -0
- package/lib/internal/template/checkbox/style.d.ts.map +1 -0
- package/lib/internal/template/checkbox/style.js +41 -0
- package/lib/internal/template/checkbox/style.js.map +1 -0
- package/lib/internal/template/checkbox/styles.css.js +3 -3
- package/lib/internal/template/checkbox/styles.scoped.css +11 -10
- package/lib/internal/template/checkbox/styles.selectors.js +3 -3
- package/lib/internal/template/internal/base-component/index.d.ts +0 -1
- package/lib/internal/template/internal/base-component/index.d.ts.map +1 -1
- package/lib/internal/template/internal/base-component/index.js +1 -15
- package/lib/internal/template/internal/base-component/index.js.map +1 -1
- package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
- package/lib/internal/template/internal/components/abstract-switch/index.d.ts +17 -1
- package/lib/internal/template/internal/components/abstract-switch/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/abstract-switch/index.js +10 -4
- package/lib/internal/template/internal/components/abstract-switch/index.js.map +1 -1
- package/lib/internal/template/internal/components/checkbox-icon/index.d.ts +10 -1
- package/lib/internal/template/internal/components/checkbox-icon/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/checkbox-icon/index.js +4 -3
- package/lib/internal/template/internal/components/checkbox-icon/index.js.map +1 -1
- package/lib/internal/template/internal/environment.js +2 -2
- package/lib/internal/template/internal/environment.json +2 -2
- package/lib/internal/template/internal/utils/style.d.ts +2 -0
- package/lib/internal/template/internal/utils/style.d.ts.map +1 -0
- package/lib/internal/template/internal/utils/style.js +22 -0
- package/lib/internal/template/internal/utils/style.js.map +1 -0
- package/lib/internal/template/radio-group/interfaces.d.ts +48 -0
- package/lib/internal/template/radio-group/interfaces.d.ts.map +1 -1
- package/lib/internal/template/radio-group/interfaces.js.map +1 -1
- package/lib/internal/template/radio-group/internal.d.ts.map +1 -1
- package/lib/internal/template/radio-group/internal.js +2 -2
- package/lib/internal/template/radio-group/internal.js.map +1 -1
- package/lib/internal/template/radio-group/radio-button.d.ts +1 -0
- package/lib/internal/template/radio-group/radio-button.d.ts.map +1 -1
- package/lib/internal/template/radio-group/radio-button.js +5 -4
- package/lib/internal/template/radio-group/radio-button.js.map +1 -1
- package/lib/internal/template/radio-group/style.d.ts +11 -0
- package/lib/internal/template/radio-group/style.d.ts.map +1 -0
- package/lib/internal/template/radio-group/style.js +50 -0
- package/lib/internal/template/radio-group/style.js.map +1 -0
- package/lib/internal/template/radio-group/styles.css.js +10 -10
- package/lib/internal/template/radio-group/styles.scoped.css +22 -21
- package/lib/internal/template/radio-group/styles.selectors.js +10 -10
- package/lib/internal/template/toggle/interfaces.d.ts +36 -0
- package/lib/internal/template/toggle/interfaces.d.ts.map +1 -1
- package/lib/internal/template/toggle/interfaces.js.map +1 -1
- package/lib/internal/template/toggle/internal.d.ts.map +1 -1
- package/lib/internal/template/toggle/internal.js +3 -2
- package/lib/internal/template/toggle/internal.js.map +1 -1
- package/lib/internal/template/toggle/style.d.ts +4 -0
- package/lib/internal/template/toggle/style.d.ts.map +1 -0
- package/lib/internal/template/toggle/style.js +37 -0
- package/lib/internal/template/toggle/style.js.map +1 -0
- package/lib/internal/template/toggle/styles.css.js +10 -10
- package/lib/internal/template/toggle/styles.scoped.css +23 -22
- package/lib/internal/template/toggle/styles.selectors.js +10 -10
- package/package.json +1 -1
|
@@ -5,6 +5,8 @@
|
|
|
5
5
|
|
|
6
6
|
@use '../internal/styles' as styles;
|
|
7
7
|
@use '../internal/styles/tokens' as awsui;
|
|
8
|
+
@use '../internal/styles/foundation' as foundation;
|
|
9
|
+
@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
|
|
8
10
|
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
|
|
9
11
|
|
|
10
12
|
$checkbox-size: awsui.$size-control;
|
|
@@ -20,5 +22,13 @@ $checkbox-size: awsui.$size-control;
|
|
|
20
22
|
}
|
|
21
23
|
|
|
22
24
|
.outline {
|
|
23
|
-
|
|
25
|
+
#{custom-props.$styleFocusRingBoxShadow}: 0 0 0
|
|
26
|
+
var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
|
|
27
|
+
var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
|
|
28
|
+
|
|
29
|
+
@include styles.focus-highlight(
|
|
30
|
+
$gutter: 2px,
|
|
31
|
+
$border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
|
|
32
|
+
$box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
|
|
33
|
+
);
|
|
24
34
|
}
|
|
@@ -5,6 +5,8 @@
|
|
|
5
5
|
|
|
6
6
|
@use '../internal/styles' as styles;
|
|
7
7
|
@use '../internal/styles/tokens' as awsui;
|
|
8
|
+
@use '../internal/styles/foundation' as foundation;
|
|
9
|
+
@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
|
|
8
10
|
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
|
|
9
11
|
|
|
10
12
|
$radio-size: awsui.$size-control;
|
|
@@ -31,7 +33,15 @@ $radio-size: awsui.$size-control;
|
|
|
31
33
|
}
|
|
32
34
|
|
|
33
35
|
.outline {
|
|
34
|
-
|
|
36
|
+
#{custom-props.$styleFocusRingBoxShadow}: 0 0 0
|
|
37
|
+
var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
|
|
38
|
+
var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
|
|
39
|
+
|
|
40
|
+
@include styles.focus-highlight(
|
|
41
|
+
$gutter: 2px,
|
|
42
|
+
$border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-circular-focus-ring),
|
|
43
|
+
$box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
|
|
44
|
+
);
|
|
35
45
|
}
|
|
36
46
|
|
|
37
47
|
.styled-circle-border {
|
|
@@ -5,6 +5,8 @@
|
|
|
5
5
|
|
|
6
6
|
@use '../internal/styles' as styles;
|
|
7
7
|
@use '../internal/styles/tokens' as awsui;
|
|
8
|
+
@use '../internal/styles/foundation' as foundation;
|
|
9
|
+
@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
|
|
8
10
|
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
|
|
9
11
|
|
|
10
12
|
$toggle-width: 2.4 * styles.$base-size;
|
|
@@ -19,7 +21,15 @@ $shadow-color: rgba(0, 0, 0, 0.25);
|
|
|
19
21
|
}
|
|
20
22
|
|
|
21
23
|
.outline {
|
|
22
|
-
|
|
24
|
+
#{custom-props.$styleFocusRingBoxShadow}: 0 0 0
|
|
25
|
+
var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
|
|
26
|
+
var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
|
|
27
|
+
|
|
28
|
+
@include styles.focus-highlight(
|
|
29
|
+
$gutter: 2px,
|
|
30
|
+
$border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
|
|
31
|
+
$box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
|
|
32
|
+
);
|
|
23
33
|
}
|
|
24
34
|
|
|
25
35
|
.toggle-control {
|
|
@@ -21,6 +21,11 @@ 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
|
+
*/
|
|
28
|
+
style?: CheckboxProps.Style;
|
|
24
29
|
}
|
|
25
30
|
export declare namespace CheckboxProps {
|
|
26
31
|
interface Ref {
|
|
@@ -33,5 +38,45 @@ export declare namespace CheckboxProps {
|
|
|
33
38
|
checked: boolean;
|
|
34
39
|
indeterminate: false;
|
|
35
40
|
}
|
|
41
|
+
interface Style {
|
|
42
|
+
input?: {
|
|
43
|
+
fill?: {
|
|
44
|
+
checked?: string;
|
|
45
|
+
default?: string;
|
|
46
|
+
disabled?: string;
|
|
47
|
+
indeterminate?: string;
|
|
48
|
+
readOnly?: string;
|
|
49
|
+
};
|
|
50
|
+
stroke?: {
|
|
51
|
+
checked?: string;
|
|
52
|
+
default?: string;
|
|
53
|
+
disabled?: string;
|
|
54
|
+
indeterminate?: string;
|
|
55
|
+
readOnly?: string;
|
|
56
|
+
};
|
|
57
|
+
check?: {
|
|
58
|
+
stroke?: {
|
|
59
|
+
checked?: string;
|
|
60
|
+
disabled?: string;
|
|
61
|
+
indeterminate?: string;
|
|
62
|
+
readOnly?: string;
|
|
63
|
+
};
|
|
64
|
+
};
|
|
65
|
+
focusRing?: {
|
|
66
|
+
borderColor?: string;
|
|
67
|
+
borderRadius?: string;
|
|
68
|
+
borderWidth?: string;
|
|
69
|
+
};
|
|
70
|
+
};
|
|
71
|
+
label?: {
|
|
72
|
+
color?: {
|
|
73
|
+
checked?: string;
|
|
74
|
+
default?: string;
|
|
75
|
+
disabled?: string;
|
|
76
|
+
indeterminate?: string;
|
|
77
|
+
readOnly?: string;
|
|
78
|
+
};
|
|
79
|
+
};
|
|
80
|
+
}
|
|
36
81
|
}
|
|
37
82
|
//# sourceMappingURL=interfaces.d.ts.map
|
|
@@ -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"]}
|
|
@@ -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"}
|
|
@@ -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
|
|
@@ -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,4 @@
|
|
|
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): {};
|
|
4
|
+
//# sourceMappingURL=style.d.ts.map
|
|
@@ -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"]}
|
|
@@ -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_1ez2l_145",
|
|
5
|
+
"checkbox-control": "awsui_checkbox-control_k2y2q_1ez2l_178",
|
|
6
|
+
"outline": "awsui_outline_k2y2q_1ez2l_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_1ez2l_145.awsui_root_k2y2q_1ez2l_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_1ez2l_178:not(#\9) {
|
|
179
179
|
margin-block-start: calc((var(--line-height-body-m-bedeoh, 22px) - var(--size-control-lkpwjy, 14px)) / 2);
|
|
180
180
|
min-block-size: var(--size-control-lkpwjy, 14px);
|
|
181
181
|
min-inline-size: var(--size-control-lkpwjy, 14px);
|
|
@@ -183,14 +183,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
183
183
|
inline-size: var(--size-control-lkpwjy, 14px);
|
|
184
184
|
}
|
|
185
185
|
|
|
186
|
-
.
|
|
186
|
+
.awsui_outline_k2y2q_1ez2l_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-r5f6xl, #0073bb));
|
|
187
188
|
position: relative;
|
|
188
189
|
}
|
|
189
|
-
.
|
|
190
|
+
.awsui_outline_k2y2q_1ez2l_186:not(#\9) {
|
|
190
191
|
outline: 2px dotted transparent;
|
|
191
192
|
outline-offset: calc(2px - 1px);
|
|
192
193
|
}
|
|
193
|
-
.
|
|
194
|
+
.awsui_outline_k2y2q_1ez2l_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-9xsko1, 2px);
|
|
202
|
-
border-start-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
|
|
203
|
-
border-end-start-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
|
|
204
|
-
border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
|
|
205
|
-
box-shadow:
|
|
202
|
+
border-start-start-radius: var(--awsui-style-focus-ring-border-radius-kcc2gu, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
|
|
203
|
+
border-start-end-radius: var(--awsui-style-focus-ring-border-radius-kcc2gu, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
|
|
204
|
+
border-end-start-radius: var(--awsui-style-focus-ring-border-radius-kcc2gu, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
|
|
205
|
+
border-end-end-radius: var(--awsui-style-focus-ring-border-radius-kcc2gu, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
|
|
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_1ez2l_145",
|
|
6
|
+
"checkbox-control": "awsui_checkbox-control_k2y2q_1ez2l_178",
|
|
7
|
+
"outline": "awsui_outline_k2y2q_1ez2l_186"
|
|
8
8
|
};
|
|
9
9
|
|
|
@@ -15,7 +15,6 @@ export interface BaseComponentProps {
|
|
|
15
15
|
id?: string;
|
|
16
16
|
}
|
|
17
17
|
export declare function getBaseProps(props: BaseComponentProps): BaseComponentProps;
|
|
18
|
-
export declare function validateProps(componentName: string, props: Record<string, any>, excludedProps: Array<string>, allowedEnums: Record<string, Array<string>>): void;
|
|
19
18
|
export interface BasePropsWithAnalyticsMetadata {
|
|
20
19
|
analyticsMetadata?: AnalyticsMetadata;
|
|
21
20
|
__analyticsMetadata?: AnalyticsMetadata;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/internal/base-component/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/internal/base-component/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAI5D,OAAO,iBAAiB,CAAC;AAIzB,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CAIb;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,kBAAkB,sBAQrD;AAED,MAAM,WAAW,8BAA8B;IAC7C,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,mBAAmB,CAAC,EAAE,iBAAiB,CAAC;CACzC;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,CAAC,SAAS,8BAA8B,EAChF,KAAK,CAAC,EAAE,CAAC,GACR,WAAW,CAAC,CAAC,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAEhE"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import { initAwsUiVersions } from '@cloudscape-design/component-toolkit/internal';
|
|
4
|
-
import { PACKAGE_SOURCE, PACKAGE_VERSION
|
|
5
|
-
import { isDevelopment } from '../is-development';
|
|
4
|
+
import { PACKAGE_SOURCE, PACKAGE_VERSION } from '../environment';
|
|
6
5
|
// these styles needed to be imported for every public component
|
|
7
6
|
import './styles.css.js';
|
|
8
7
|
initAwsUiVersions(PACKAGE_SOURCE, PACKAGE_VERSION);
|
|
@@ -15,19 +14,6 @@ export function getBaseProps(props) {
|
|
|
15
14
|
});
|
|
16
15
|
return baseProps;
|
|
17
16
|
}
|
|
18
|
-
export function validateProps(componentName, props, excludedProps, allowedEnums) {
|
|
19
|
-
if (!isDevelopment) {
|
|
20
|
-
return;
|
|
21
|
-
}
|
|
22
|
-
for (const [prop, value] of Object.entries(props)) {
|
|
23
|
-
if (excludedProps.includes(prop)) {
|
|
24
|
-
throw new Error(`${componentName} does not support "${prop}" property when used in ${THEME} theme`);
|
|
25
|
-
}
|
|
26
|
-
if (value && allowedEnums[prop] && !allowedEnums[prop].includes(value)) {
|
|
27
|
-
throw new Error(`${componentName} does not support "${prop}" with value "${value}" when used in ${THEME} theme`);
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
17
|
/**
|
|
32
18
|
* Helper function to merge beta analytics metadata with the public analytics metadata api.
|
|
33
19
|
* Beta analytics metadata will override the public values to allow for safe migration.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/base-component/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAGlF,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/base-component/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAGlF,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjE,gEAAgE;AAChE,OAAO,iBAAiB,CAAC;AAEzB,iBAAiB,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;AAoBnD,MAAM,UAAU,YAAY,CAAC,KAAyB;IACpD,MAAM,SAAS,GAAwB,EAAE,CAAC;IAC1C,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QAChC,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,WAAW,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE;YACjE,SAAS,CAAC,IAAI,CAAC,GAAI,KAA6B,CAAC,IAAI,CAAC,CAAC;SACxD;IACH,CAAC,CAAC,CAAC;IACH,OAAO,SAA+B,CAAC;AACzC,CAAC;AAOD;;;GAGG;AACH,MAAM,UAAU,yBAAyB,CACvC,KAAS;IAET,uCAAY,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,iBAAiB,GAAK,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,mBAAmB,EAAG;AACxE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { initAwsUiVersions } from '@cloudscape-design/component-toolkit/internal';\n\nimport { AnalyticsMetadata } from '../analytics/interfaces';\nimport { PACKAGE_SOURCE, PACKAGE_VERSION } from '../environment';\n\n// these styles needed to be imported for every public component\nimport './styles.css.js';\n\ninitAwsUiVersions(PACKAGE_SOURCE, PACKAGE_VERSION);\n\nexport interface BaseComponentProps {\n /**\n * Adds the specified classes to the root element of the component.\n * @deprecated Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).\n */\n className?: string;\n /**\n * Adds the specified ID to the root element of the component.\n * @deprecated The usage of the `id` attribute is reserved for internal use cases. For testing and other use cases,\n * use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must\n * use the `id` attribute, consider setting it on a parent element instead.\n */\n id?: string;\n // we also support data-* attributes, but they are always implicitly allowed by typescript\n // http://www.typescriptlang.org/docs/handbook/jsx.html#attribute-type-checking\n // \"Note: If an attribute name is not a valid JS identifier (like a data-* attribute), it is not considered to be an error\"\n}\n\nexport function getBaseProps(props: BaseComponentProps) {\n const baseProps: Record<string, any> = {};\n Object.keys(props).forEach(prop => {\n if (prop === 'id' || prop === 'className' || prop.match(/^data-/)) {\n baseProps[prop] = (props as Record<string, any>)[prop];\n }\n });\n return baseProps as BaseComponentProps;\n}\n\nexport interface BasePropsWithAnalyticsMetadata {\n analyticsMetadata?: AnalyticsMetadata;\n __analyticsMetadata?: AnalyticsMetadata;\n}\n\n/**\n * Helper function to merge beta analytics metadata with the public analytics metadata api.\n * Beta analytics metadata will override the public values to allow for safe migration.\n */\nexport function getAnalyticsMetadataProps<T extends BasePropsWithAnalyticsMetadata>(\n props?: T\n): NonNullable<T['analyticsMetadata'] & T['__analyticsMetadata']> {\n return { ...props?.analyticsMetadata, ...props?.__analyticsMetadata };\n}\n"]}
|
|
@@ -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
|
-
export default function AbstractSwitch({ controlId, controlClassName, outlineClassName, showOutline, disabled, readOnly, nativeControl, styledControl, label, description, descriptionBottomPadding, ariaLabel, ariaLabelledby, ariaDescribedby, ariaControls, onClick, __internalRootRef, ...rest }: AbstractSwitchProps): JSX.Element;
|
|
37
|
+
export default function AbstractSwitch({ controlId, controlClassName, outlineClassName, showOutline, disabled, readOnly, nativeControl, styledControl, label, description, descriptionBottomPadding, ariaLabel, ariaLabelledby, ariaDescribedby, ariaControls, onClick, style, __internalRootRef, ...rest }: AbstractSwitchProps): JSX.Element;
|
|
22
38
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -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,7 +5,16 @@ 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
|
-
declare const CheckboxIcon: ({ checked, indeterminate, disabled, readOnly, ...restProps }: CheckboxIconProps) => JSX.Element;
|
|
18
|
+
declare const CheckboxIcon: ({ checked, indeterminate, disabled, readOnly, style, ...restProps }: CheckboxIconProps) => JSX.Element;
|
|
10
19
|
export default CheckboxIcon;
|
|
11
20
|
//# sourceMappingURL=index.d.ts.map
|