@fluentui/react-radio 0.0.0-nightly-20220314-0419.1 → 0.0.0-nightly-20220317-0422.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +37 -13
- package/CHANGELOG.md +13 -9
- package/dist/react-radio.d.ts +29 -1
- package/lib/components/Radio/Radio.types.d.ts +17 -0
- package/lib/components/Radio/Radio.types.js.map +1 -1
- package/lib/components/Radio/useRadio.js +7 -3
- package/lib/components/Radio/useRadio.js.map +1 -1
- package/lib/components/Radio/useRadioStyles.d.ts +6 -1
- package/lib/components/Radio/useRadioStyles.js +14 -6
- package/lib/components/Radio/useRadioStyles.js.map +1 -1
- package/lib/components/RadioGroup/RadioGroup.types.d.ts +1 -1
- package/lib/components/RadioGroup/RadioGroup.types.js.map +1 -1
- package/lib/components/RadioGroup/useRadioGroupStyles.d.ts +6 -1
- package/lib/components/RadioGroup/useRadioGroupStyles.js +8 -1
- package/lib/components/RadioGroup/useRadioGroupStyles.js.map +1 -1
- package/lib/index.d.ts +6 -3
- package/lib/index.js +7 -3
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Radio/Radio.types.d.ts +17 -0
- package/lib-commonjs/components/Radio/useRadio.js +6 -2
- package/lib-commonjs/components/Radio/useRadio.js.map +1 -1
- package/lib-commonjs/components/Radio/useRadioStyles.d.ts +6 -1
- package/lib-commonjs/components/Radio/useRadioStyles.js +15 -7
- package/lib-commonjs/components/Radio/useRadioStyles.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/RadioGroup.types.d.ts +1 -1
- package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.d.ts +6 -1
- package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.js +9 -2
- package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.js.map +1 -1
- package/lib-commonjs/index.d.ts +6 -3
- package/lib-commonjs/index.js +88 -4
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-radio",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-radio_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Thu, 17 Mar 2022 04:32:27 GMT",
|
|
6
|
+
"tag": "@fluentui/react-radio_v0.0.0-nightly-20220317-0422.1",
|
|
7
|
+
"version": "0.0.0-nightly-20220317-0422.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -13,35 +13,59 @@
|
|
|
13
13
|
"commit": "not available",
|
|
14
14
|
"comment": "Release nightly v9"
|
|
15
15
|
},
|
|
16
|
+
{
|
|
17
|
+
"author": "seanmonahan@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-radio",
|
|
19
|
+
"commit": "086a675fd0c648944ff4048450190a0a13467de3",
|
|
20
|
+
"comment": "Deprecate static classname string for Radio."
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "seanmonahan@microsoft.com",
|
|
24
|
+
"package": "@fluentui/react-radio",
|
|
25
|
+
"commit": "c0c9b30ae2393775eac02870f6b04cade31ef3ac",
|
|
26
|
+
"comment": "Remove star exports from react-radio"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "seanmonahan@microsoft.com",
|
|
30
|
+
"package": "@fluentui/react-radio",
|
|
31
|
+
"commit": "c6af0f7fa900a2f497f4c7477bb05ca2c59c7987",
|
|
32
|
+
"comment": "Add onChange event prop to Radio"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "seanmonahan@microsoft.com",
|
|
36
|
+
"package": "@fluentui/react-radio",
|
|
37
|
+
"commit": "0f509ed4c7e26548ae9d27e3001bd8db4784e838",
|
|
38
|
+
"comment": "Radio/RadioGroup API alignment."
|
|
39
|
+
},
|
|
16
40
|
{
|
|
17
41
|
"author": "beachball",
|
|
18
42
|
"package": "@fluentui/react-radio",
|
|
19
|
-
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20220317-0422.1",
|
|
44
|
+
"commit": "92725e01f18c7d9e976104f4399e9a42ac564df3"
|
|
21
45
|
},
|
|
22
46
|
{
|
|
23
47
|
"author": "beachball",
|
|
24
48
|
"package": "@fluentui/react-radio",
|
|
25
|
-
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
49
|
+
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220317-0422.1",
|
|
50
|
+
"commit": "92725e01f18c7d9e976104f4399e9a42ac564df3"
|
|
27
51
|
},
|
|
28
52
|
{
|
|
29
53
|
"author": "beachball",
|
|
30
54
|
"package": "@fluentui/react-radio",
|
|
31
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
55
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220317-0422.1",
|
|
56
|
+
"commit": "92725e01f18c7d9e976104f4399e9a42ac564df3"
|
|
33
57
|
},
|
|
34
58
|
{
|
|
35
59
|
"author": "beachball",
|
|
36
60
|
"package": "@fluentui/react-radio",
|
|
37
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
61
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220317-0422.1",
|
|
62
|
+
"commit": "92725e01f18c7d9e976104f4399e9a42ac564df3"
|
|
39
63
|
},
|
|
40
64
|
{
|
|
41
65
|
"author": "beachball",
|
|
42
66
|
"package": "@fluentui/react-radio",
|
|
43
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
67
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220317-0422.1",
|
|
68
|
+
"commit": "92725e01f18c7d9e976104f4399e9a42ac564df3"
|
|
45
69
|
}
|
|
46
70
|
],
|
|
47
71
|
"none": [
|
package/CHANGELOG.md
CHANGED
|
@@ -1,22 +1,26 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-radio
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 17 Mar 2022 04:32:27 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20220317-0422.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v0.0.0-nightly-20220317-0422.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-beta.2..@fluentui/react-radio_v0.0.0-nightly-
|
|
9
|
+
Thu, 17 Mar 2022 04:32:27 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-beta.2..@fluentui/react-radio_v0.0.0-nightly-20220317-0422.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
-
|
|
18
|
-
-
|
|
19
|
-
- Bump @fluentui/react-
|
|
15
|
+
- Deprecate static classname string for Radio. ([PR #21960](https://github.com/microsoft/fluentui/pull/21960) by seanmonahan@microsoft.com)
|
|
16
|
+
- Remove star exports from react-radio ([PR #22106](https://github.com/microsoft/fluentui/pull/22106) by seanmonahan@microsoft.com)
|
|
17
|
+
- Add onChange event prop to Radio ([PR #22104](https://github.com/microsoft/fluentui/pull/22104) by seanmonahan@microsoft.com)
|
|
18
|
+
- Radio/RadioGroup API alignment. ([PR #22065](https://github.com/microsoft/fluentui/pull/22065) by seanmonahan@microsoft.com)
|
|
19
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20220317-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/92725e01f18c7d9e976104f4399e9a42ac564df3) by beachball)
|
|
20
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20220317-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/92725e01f18c7d9e976104f4399e9a42ac564df3) by beachball)
|
|
21
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20220317-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/92725e01f18c7d9e976104f4399e9a42ac564df3) by beachball)
|
|
22
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20220317-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/92725e01f18c7d9e976104f4399e9a42ac564df3) by beachball)
|
|
23
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220317-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/92725e01f18c7d9e976104f4399e9a42ac564df3) by beachball)
|
|
20
24
|
|
|
21
25
|
## [9.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-beta.2)
|
|
22
26
|
|
package/dist/react-radio.d.ts
CHANGED
|
@@ -4,21 +4,32 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
|
4
4
|
import { Label } from '@fluentui/react-label';
|
|
5
5
|
import * as React_2 from 'react';
|
|
6
6
|
import type { Slot } from '@fluentui/react-utilities';
|
|
7
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
7
8
|
|
|
8
9
|
/**
|
|
9
10
|
* Radio component is a wrapper for a radio button with a label.
|
|
10
11
|
*/
|
|
11
12
|
export declare const Radio: ForwardRefComponent<RadioProps>;
|
|
12
13
|
|
|
14
|
+
/**
|
|
15
|
+
* @deprecated Use `radioClassNames.root` instead.
|
|
16
|
+
*/
|
|
13
17
|
export declare const radioClassName = "fui-Radio";
|
|
14
18
|
|
|
19
|
+
export declare const radioClassNames: SlotClassNames<RadioSlots>;
|
|
20
|
+
|
|
15
21
|
/**
|
|
16
22
|
* A RadioGroup component presents a set of options where only one option can be selected.
|
|
17
23
|
*/
|
|
18
24
|
export declare const RadioGroup: ForwardRefComponent<RadioGroupProps>;
|
|
19
25
|
|
|
26
|
+
/**
|
|
27
|
+
* @deprecated Use `radioGroupClassNames.root` instead.
|
|
28
|
+
*/
|
|
20
29
|
export declare const radioGroupClassName = "fui-RadioGroup";
|
|
21
30
|
|
|
31
|
+
export declare const radioGroupClassNames: SlotClassNames<RadioGroupSlots>;
|
|
32
|
+
|
|
22
33
|
/**
|
|
23
34
|
* RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.
|
|
24
35
|
*/
|
|
@@ -75,7 +86,7 @@ export declare type RadioGroupSlots = {
|
|
|
75
86
|
/**
|
|
76
87
|
* The radio group root.
|
|
77
88
|
*/
|
|
78
|
-
root: Slot<'div'
|
|
89
|
+
root: NonNullable<Slot<'div'>>;
|
|
79
90
|
};
|
|
80
91
|
|
|
81
92
|
/**
|
|
@@ -85,6 +96,16 @@ export declare type RadioGroupState = ComponentState<RadioGroupSlots> & Required
|
|
|
85
96
|
context: RadioGroupContextValue;
|
|
86
97
|
};
|
|
87
98
|
|
|
99
|
+
/**
|
|
100
|
+
* Data for the onChange event for Radio.
|
|
101
|
+
*/
|
|
102
|
+
export declare type RadioOnChangeData = {
|
|
103
|
+
/**
|
|
104
|
+
* The value prop of this Radio item.
|
|
105
|
+
*/
|
|
106
|
+
value: string;
|
|
107
|
+
};
|
|
108
|
+
|
|
88
109
|
/**
|
|
89
110
|
* Radio Props
|
|
90
111
|
*/
|
|
@@ -106,6 +127,13 @@ export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input
|
|
|
106
127
|
* Disable this Radio item.
|
|
107
128
|
*/
|
|
108
129
|
disabled?: boolean;
|
|
130
|
+
/**
|
|
131
|
+
* Callback when this Radio is selected in its group.
|
|
132
|
+
*
|
|
133
|
+
* **Note:** `onChange` is NOT called when this Radio is deselected.
|
|
134
|
+
* Use RadioGroup's `onChange` event to determine when the selection in the group changes.
|
|
135
|
+
*/
|
|
136
|
+
onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void;
|
|
109
137
|
};
|
|
110
138
|
|
|
111
139
|
export declare type RadioSlots = {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
import { Label } from '@fluentui/react-label';
|
|
2
3
|
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
3
4
|
export declare type RadioSlots = {
|
|
@@ -45,6 +46,22 @@ export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input
|
|
|
45
46
|
* Disable this Radio item.
|
|
46
47
|
*/
|
|
47
48
|
disabled?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* Callback when this Radio is selected in its group.
|
|
51
|
+
*
|
|
52
|
+
* **Note:** `onChange` is NOT called when this Radio is deselected.
|
|
53
|
+
* Use RadioGroup's `onChange` event to determine when the selection in the group changes.
|
|
54
|
+
*/
|
|
55
|
+
onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void;
|
|
56
|
+
};
|
|
57
|
+
/**
|
|
58
|
+
* Data for the onChange event for Radio.
|
|
59
|
+
*/
|
|
60
|
+
export declare type RadioOnChangeData = {
|
|
61
|
+
/**
|
|
62
|
+
* The value prop of this Radio item.
|
|
63
|
+
*/
|
|
64
|
+
value: string;
|
|
48
65
|
};
|
|
49
66
|
/**
|
|
50
67
|
* State used in rendering Radio
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.types.js","sourceRoot":"../src/","sources":["components/Radio/Radio.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type RadioSlots = {\n /**\n * The root element of the Radio.\n *\n * The root slot receives the `className` and `style` specified directly on the `<Radio>`.\n * All other native props will be applied to the primary slot: `input`\n */\n root: NonNullable<Slot<'span'>>;\n\n /**\n * The Radio's label.\n */\n label: Slot<typeof Label>;\n\n /**\n * Hidden input that handles the radio's functionality.\n *\n * This is the PRIMARY slot: all native properties specified directly on `<Radio>` will be applied to this slot,\n * except `className` and `style`, which remain on the root slot.\n */\n input: NonNullable<Slot<'input'>>;\n\n /**\n * A circle outline, with a filled circle icon inside when the Radio is checked.\n */\n indicator: NonNullable<Slot<'div'>>;\n};\n\n/**\n * Radio Props\n */\nexport type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'size'> & {\n /**\n * The value of the RadioGroup when this Radio item is selected.\n */\n value?: string;\n\n /**\n * The position of the label relative to the radio indicator.\n *\n * This defaults to `after` unless the Radio is inside a RadioGroup with `layout=\"horizontalStacked\"`,\n * in which case it defaults to `below`.\n *\n * @defaultvalue after\n */\n labelPosition?: 'after' | 'below';\n\n /**\n * Disable this Radio item.\n */\n disabled?: boolean;\n};\n\n/**\n * State used in rendering Radio\n */\nexport type RadioState = ComponentState<RadioSlots> & Required<Pick<RadioProps, 'labelPosition'>>;\n"]}
|
|
1
|
+
{"version":3,"file":"Radio.types.js","sourceRoot":"../src/","sources":["components/Radio/Radio.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type RadioSlots = {\n /**\n * The root element of the Radio.\n *\n * The root slot receives the `className` and `style` specified directly on the `<Radio>`.\n * All other native props will be applied to the primary slot: `input`\n */\n root: NonNullable<Slot<'span'>>;\n\n /**\n * The Radio's label.\n */\n label: Slot<typeof Label>;\n\n /**\n * Hidden input that handles the radio's functionality.\n *\n * This is the PRIMARY slot: all native properties specified directly on `<Radio>` will be applied to this slot,\n * except `className` and `style`, which remain on the root slot.\n */\n input: NonNullable<Slot<'input'>>;\n\n /**\n * A circle outline, with a filled circle icon inside when the Radio is checked.\n */\n indicator: NonNullable<Slot<'div'>>;\n};\n\n/**\n * Radio Props\n */\nexport type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'size'> & {\n /**\n * The value of the RadioGroup when this Radio item is selected.\n */\n value?: string;\n\n /**\n * The position of the label relative to the radio indicator.\n *\n * This defaults to `after` unless the Radio is inside a RadioGroup with `layout=\"horizontalStacked\"`,\n * in which case it defaults to `below`.\n *\n * @defaultvalue after\n */\n labelPosition?: 'after' | 'below';\n\n /**\n * Disable this Radio item.\n */\n disabled?: boolean;\n\n /**\n * Callback when this Radio is selected in its group.\n *\n * **Note:** `onChange` is NOT called when this Radio is deselected.\n * Use RadioGroup's `onChange` event to determine when the selection in the group changes.\n */\n onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void;\n};\n\n/**\n * Data for the onChange event for Radio.\n */\nexport type RadioOnChangeData = {\n /**\n * The value prop of this Radio item.\n */\n value: string;\n};\n\n/**\n * State used in rendering Radio\n */\nexport type RadioState = ComponentState<RadioSlots> & Required<Pick<RadioProps, 'labelPosition'>>;\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { CircleFilled } from '@fluentui/react-icons';
|
|
3
3
|
import { Label } from '@fluentui/react-label';
|
|
4
|
-
import { getPartitionedNativeProps, resolveShorthand, useId } from '@fluentui/react-utilities';
|
|
4
|
+
import { getPartitionedNativeProps, resolveShorthand, useId, useMergedEventCallbacks } from '@fluentui/react-utilities';
|
|
5
5
|
import { RadioGroupContext } from '../../contexts/RadioGroupContext';
|
|
6
6
|
/**
|
|
7
7
|
* Create the state required to render Radio.
|
|
@@ -21,12 +21,13 @@ export const useRadio_unstable = (props, ref) => {
|
|
|
21
21
|
defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined,
|
|
22
22
|
labelPosition = group.layout === 'horizontalStacked' ? 'below' : 'after',
|
|
23
23
|
disabled = group.disabled,
|
|
24
|
-
required
|
|
24
|
+
required,
|
|
25
|
+
onChange
|
|
25
26
|
} = props;
|
|
26
27
|
const nativeProps = getPartitionedNativeProps({
|
|
27
28
|
props,
|
|
28
29
|
primarySlotTagName: 'input',
|
|
29
|
-
excludedPropNames: ['checked', 'defaultChecked']
|
|
30
|
+
excludedPropNames: ['checked', 'defaultChecked', 'onChange']
|
|
30
31
|
});
|
|
31
32
|
const root = resolveShorthand(props.root, {
|
|
32
33
|
required: true,
|
|
@@ -45,6 +46,9 @@ export const useRadio_unstable = (props, ref) => {
|
|
|
45
46
|
...nativeProps.primary
|
|
46
47
|
}
|
|
47
48
|
});
|
|
49
|
+
input.onChange = useMergedEventCallbacks(input.onChange, ev => onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
|
|
50
|
+
value: ev.currentTarget.value
|
|
51
|
+
}));
|
|
48
52
|
const label = resolveShorthand(props.label, {
|
|
49
53
|
defaultProps: {
|
|
50
54
|
htmlFor: input.id,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Radio/useRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,YAAT,QAA6B,uBAA7B;AACA,SAAS,KAAT,QAAsB,uBAAtB;AACA,SAAS,yBAAT,EAAoC,gBAApC,EAAsD,KAAtD,
|
|
1
|
+
{"version":3,"sources":["components/Radio/useRadio.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, resolveShorthand, useId, useMergedEventCallbacks } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport type { RadioProps, RadioState } from './Radio.types';\n\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */\nexport const useRadio_unstable = (props: RadioProps, ref: React.Ref<HTMLInputElement>): RadioState => {\n const group = React.useContext(RadioGroupContext);\n\n const {\n name = group.name,\n checked = group.value !== undefined ? group.value === props.value : undefined,\n defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined,\n labelPosition = group.layout === 'horizontalStacked' ? 'below' : 'after',\n disabled = group.disabled,\n required,\n onChange,\n } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const root = resolveShorthand(props.root, {\n required: true,\n defaultProps: nativeProps.root,\n });\n\n const input = resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n ref,\n type: 'radio',\n id: useId('radio-', nativeProps.primary.id),\n name,\n checked,\n defaultChecked,\n disabled,\n ...nativeProps.primary,\n },\n });\n\n input.onChange = useMergedEventCallbacks(input.onChange, ev => onChange?.(ev, { value: ev.currentTarget.value }));\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n htmlFor: input.id,\n disabled,\n required,\n },\n });\n\n const indicator = resolveShorthand(props.indicator, {\n required: true,\n defaultProps: {\n 'aria-hidden': true,\n children: <CircleFilled />,\n },\n });\n\n return {\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n label: Label,\n indicator: 'div',\n },\n root,\n input,\n label,\n indicator,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import type { RadioState } from './Radio.types';
|
|
1
|
+
import type { RadioSlots, RadioState } from './Radio.types';
|
|
2
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `radioClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const radioClassName = "fui-Radio";
|
|
7
|
+
export declare const radioClassNames: SlotClassNames<RadioSlots>;
|
|
3
8
|
/**
|
|
4
9
|
* Apply styling to the Radio slots based on the state
|
|
5
10
|
*/
|
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `radioClassNames.root` instead.
|
|
6
|
+
*/
|
|
7
|
+
|
|
4
8
|
export const radioClassName = 'fui-Radio';
|
|
5
|
-
const
|
|
6
|
-
|
|
9
|
+
export const radioClassNames = {
|
|
10
|
+
root: 'fui-Radio',
|
|
11
|
+
indicator: 'fui-Radio__indicator',
|
|
12
|
+
input: 'fui-Radio__input',
|
|
13
|
+
label: 'fui-Radio__label'
|
|
14
|
+
}; // TODO replace these spacing constants with theme values once they're on the theme
|
|
7
15
|
|
|
8
16
|
const spacingHorizontalS = '8px';
|
|
9
17
|
const spacingHorizontalM = '12px'; // The indicator size is used by the indicator and label styles
|
|
@@ -174,15 +182,15 @@ const useLabelStyles = /*#__PURE__*/__styles({
|
|
|
174
182
|
|
|
175
183
|
export const useRadioStyles_unstable = state => {
|
|
176
184
|
const rootStyles = useRootStyles();
|
|
177
|
-
state.root.className = mergeClasses(
|
|
185
|
+
state.root.className = mergeClasses(radioClassNames.root, rootStyles.base, rootStyles.focusIndicator, state.labelPosition === 'below' && rootStyles.vertical, state.root.className);
|
|
178
186
|
const inputStyles = useInputStyles();
|
|
179
|
-
state.input.className = mergeClasses(inputStyles.base, state.input.className);
|
|
187
|
+
state.input.className = mergeClasses(radioClassNames.input, inputStyles.base, state.input.className);
|
|
180
188
|
const indicatorStyles = useIndicatorStyles();
|
|
181
|
-
state.indicator.className = mergeClasses(
|
|
189
|
+
state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);
|
|
182
190
|
const labelStyles = useLabelStyles();
|
|
183
191
|
|
|
184
192
|
if (state.label) {
|
|
185
|
-
state.label.className = mergeClasses(
|
|
193
|
+
state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, state.labelPosition === 'below' && labelStyles.below, state.label.className);
|
|
186
194
|
}
|
|
187
195
|
};
|
|
188
196
|
//# sourceMappingURL=useRadioStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"AAAA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;
|
|
1
|
+
{"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `radioClassNames.root` instead.\n */\nexport const radioClassName = 'fui-Radio';\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label',\n};\n\n// TODO replace these spacing constants with theme values once they're on the theme\nconst spacingHorizontalS = '8px';\nconst spacingHorizontalM = '12px';\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n columnGap: spacingHorizontalM,\n ...shorthands.padding(spacingHorizontalS),\n },\n\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\n rowGap: spacingHorizontalM,\n },\n\n focusIndicator: createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputStyles = makeStyles({\n base: {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n ...shorthands.margin(0),\n opacity: 0,\n\n ':enabled': {\n cursor: 'pointer',\n },\n\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n opacity: '0',\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n width: indicatorSize,\n height: indicatorSize,\n fontSize: '12px',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n\n ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n userSelect: 'none',\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n ...shorthands.margin(`calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`, 0),\n },\n\n below: {\n textAlign: 'center',\n },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootStyles.base,\n rootStyles.focusIndicator,\n state.labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(radioClassNames.input, inputStyles.base, state.input.className);\n\n const indicatorStyles = useIndicatorStyles();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n radioClassNames.label,\n labelStyles.base,\n state.labelPosition === 'below' && labelStyles.below,\n state.label.className,\n );\n }\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.types.js","sourceRoot":"../src/","sources":["components/RadioGroup/RadioGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { RadioGroupContextValue } from '../../contexts/RadioGroupContext';\n\nexport type RadioGroupSlots = {\n /**\n * The radio group root.\n */\n root: Slot<'div'
|
|
1
|
+
{"version":3,"file":"RadioGroup.types.js","sourceRoot":"../src/","sources":["components/RadioGroup/RadioGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { RadioGroupContextValue } from '../../contexts/RadioGroupContext';\n\nexport type RadioGroupSlots = {\n /**\n * The radio group root.\n */\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type RadioGroupProps = Omit<ComponentProps<Partial<RadioGroupSlots>>, 'onChange'> & {\n /**\n * The name of this radio group. This name is applied to all Radio items inside this group.\n *\n * If no name is provided, one will be generated so that all of the Radio items have the same name.\n */\n name?: string;\n\n /**\n * The selected Radio item in this group.\n *\n * This should be the `value` prop of one of the Radio items inside this group.\n */\n value?: string;\n\n /**\n * The default selected Radio item in this group.\n *\n * This should be the `value` prop of one of the Radio items inside this group.\n */\n defaultValue?: string;\n\n /**\n * Callback when the selected Radio item changes.\n */\n onChange?: (ev: React.FormEvent<HTMLDivElement>, data: RadioGroupOnChangeData) => void;\n\n /**\n * How the radio items are laid out in the group.\n *\n * @defaultvalue vertical\n */\n layout?: 'vertical' | 'horizontal' | 'horizontalStacked';\n\n /**\n * Disable all Radio items in this group.\n */\n disabled?: boolean;\n};\n\n/**\n * Data for the onChange event for RadioGroup.\n */\nexport type RadioGroupOnChangeData = {\n /**\n * The value of the newly selected Radio item.\n */\n value: string;\n};\n\n/**\n * State used in rendering RadioGroup\n */\nexport type RadioGroupState = ComponentState<RadioGroupSlots> &\n Required<Pick<RadioGroupProps, 'layout'>> & {\n context: RadioGroupContextValue;\n };\n"]}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import { RadioGroupState } from './RadioGroup.types';
|
|
1
|
+
import { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';
|
|
2
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `radioGroupClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const radioGroupClassName = "fui-RadioGroup";
|
|
7
|
+
export declare const radioGroupClassNames: SlotClassNames<RadioGroupSlots>;
|
|
3
8
|
/**
|
|
4
9
|
* Apply styling to the RadioGroup slots based on the state
|
|
5
10
|
*/
|
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
import { __styles, mergeClasses } from '@griffel/react';
|
|
2
|
+
/**
|
|
3
|
+
* @deprecated Use `radioGroupClassNames.root` instead.
|
|
4
|
+
*/
|
|
5
|
+
|
|
2
6
|
export const radioGroupClassName = 'fui-RadioGroup';
|
|
7
|
+
export const radioGroupClassNames = {
|
|
8
|
+
root: 'fui-RadioGroup'
|
|
9
|
+
};
|
|
3
10
|
|
|
4
11
|
const useStyles = /*#__PURE__*/__styles({
|
|
5
12
|
"root": {
|
|
@@ -19,6 +26,6 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
19
26
|
|
|
20
27
|
export const useRadioGroupStyles_unstable = state => {
|
|
21
28
|
const styles = useStyles();
|
|
22
|
-
state.root.className = mergeClasses(
|
|
29
|
+
state.root.className = mergeClasses(radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);
|
|
23
30
|
};
|
|
24
31
|
//# sourceMappingURL=useRadioGroupStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/RadioGroup/useRadioGroupStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;
|
|
1
|
+
{"version":3,"sources":["components/RadioGroup/useRadioGroupStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AAIA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;AACP,OAAO,MAAM,oBAAoB,GAAoC;AACnE,EAAA,IAAI,EAAE;AAD6D,CAA9D;;AAIP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA2B;AACrE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,oBAAoB,CAAC,IADY,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,MAAN,KAAiB,UAAjB,IAA+B,MAAM,CAAC,QAHL,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;AAMD,CARM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `radioGroupClassNames.root` instead.\n */\nexport const radioGroupClassName = 'fui-RadioGroup';\nexport const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {\n root: 'fui-RadioGroup',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = (state: RadioGroupState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n radioGroupClassNames.root,\n styles.root,\n state.layout === 'vertical' && styles.vertical,\n state.root.className,\n );\n};\n"],"sourceRoot":"../src/"}
|
package/lib/index.d.ts
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
1
|
+
export { RadioGroup, radioGroupClassName, radioGroupClassNames, renderRadioGroup_unstable, useRadioGroupStyles_unstable, useRadioGroup_unstable, } from './RadioGroup';
|
|
2
|
+
export type { RadioGroupOnChangeData, RadioGroupProps, RadioGroupSlots, RadioGroupState } from './RadioGroup';
|
|
3
|
+
export { Radio, radioClassName, radioClassNames, renderRadio_unstable, useRadioStyles_unstable, useRadio_unstable, } from './Radio';
|
|
4
|
+
export type { RadioProps, RadioSlots, RadioState, RadioOnChangeData } from './Radio';
|
|
5
|
+
export { RadioGroupContext } from './contexts/RadioGroupContext';
|
|
6
|
+
export type { RadioGroupContextValue } from './contexts/RadioGroupContext';
|
package/lib/index.js
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
export
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
export { RadioGroup,
|
|
2
|
+
/* eslint-disable-next-line deprecation/deprecation */
|
|
3
|
+
radioGroupClassName, radioGroupClassNames, renderRadioGroup_unstable, useRadioGroupStyles_unstable, useRadioGroup_unstable } from './RadioGroup';
|
|
4
|
+
export { Radio,
|
|
5
|
+
/* eslint-disable-next-line deprecation/deprecation */
|
|
6
|
+
radioClassName, radioClassNames, renderRadio_unstable, useRadioStyles_unstable, useRadio_unstable } from './Radio';
|
|
7
|
+
export { RadioGroupContext } from './contexts/RadioGroupContext';
|
|
4
8
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,UADF;AAEE;AACA,mBAHF,EAIE,oBAJF,EAKE,yBALF,EAME,4BANF,EAOE,sBAPF,QAQO,cARP;AAUA,SACE,KADF;AAEE;AACA,cAHF,EAIE,eAJF,EAKE,oBALF,EAME,uBANF,EAOE,iBAPF,QAQO,SARP;AAUA,SAAS,iBAAT,QAAkC,8BAAlC","sourcesContent":["export {\n RadioGroup,\n /* eslint-disable-next-line deprecation/deprecation */\n radioGroupClassName,\n radioGroupClassNames,\n renderRadioGroup_unstable,\n useRadioGroupStyles_unstable,\n useRadioGroup_unstable,\n} from './RadioGroup';\nexport type { RadioGroupOnChangeData, RadioGroupProps, RadioGroupSlots, RadioGroupState } from './RadioGroup';\nexport {\n Radio,\n /* eslint-disable-next-line deprecation/deprecation */\n radioClassName,\n radioClassNames,\n renderRadio_unstable,\n useRadioStyles_unstable,\n useRadio_unstable,\n} from './Radio';\nexport type { RadioProps, RadioSlots, RadioState, RadioOnChangeData } from './Radio';\nexport { RadioGroupContext } from './contexts/RadioGroupContext';\nexport type { RadioGroupContextValue } from './contexts/RadioGroupContext';\n"],"sourceRoot":"../src/"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
import { Label } from '@fluentui/react-label';
|
|
2
3
|
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
3
4
|
export declare type RadioSlots = {
|
|
@@ -45,6 +46,22 @@ export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input
|
|
|
45
46
|
* Disable this Radio item.
|
|
46
47
|
*/
|
|
47
48
|
disabled?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* Callback when this Radio is selected in its group.
|
|
51
|
+
*
|
|
52
|
+
* **Note:** `onChange` is NOT called when this Radio is deselected.
|
|
53
|
+
* Use RadioGroup's `onChange` event to determine when the selection in the group changes.
|
|
54
|
+
*/
|
|
55
|
+
onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void;
|
|
56
|
+
};
|
|
57
|
+
/**
|
|
58
|
+
* Data for the onChange event for Radio.
|
|
59
|
+
*/
|
|
60
|
+
export declare type RadioOnChangeData = {
|
|
61
|
+
/**
|
|
62
|
+
* The value prop of this Radio item.
|
|
63
|
+
*/
|
|
64
|
+
value: string;
|
|
48
65
|
};
|
|
49
66
|
/**
|
|
50
67
|
* State used in rendering Radio
|
|
@@ -33,12 +33,13 @@ const useRadio_unstable = (props, ref) => {
|
|
|
33
33
|
defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined,
|
|
34
34
|
labelPosition = group.layout === 'horizontalStacked' ? 'below' : 'after',
|
|
35
35
|
disabled = group.disabled,
|
|
36
|
-
required
|
|
36
|
+
required,
|
|
37
|
+
onChange
|
|
37
38
|
} = props;
|
|
38
39
|
const nativeProps = react_utilities_1.getPartitionedNativeProps({
|
|
39
40
|
props,
|
|
40
41
|
primarySlotTagName: 'input',
|
|
41
|
-
excludedPropNames: ['checked', 'defaultChecked']
|
|
42
|
+
excludedPropNames: ['checked', 'defaultChecked', 'onChange']
|
|
42
43
|
});
|
|
43
44
|
const root = react_utilities_1.resolveShorthand(props.root, {
|
|
44
45
|
required: true,
|
|
@@ -57,6 +58,9 @@ const useRadio_unstable = (props, ref) => {
|
|
|
57
58
|
...nativeProps.primary
|
|
58
59
|
}
|
|
59
60
|
});
|
|
61
|
+
input.onChange = react_utilities_1.useMergedEventCallbacks(input.onChange, ev => onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
|
|
62
|
+
value: ev.currentTarget.value
|
|
63
|
+
}));
|
|
60
64
|
const label = react_utilities_1.resolveShorthand(props.label, {
|
|
61
65
|
defaultProps: {
|
|
62
66
|
htmlFor: input.id,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Radio/useRadio.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;AACnG,QAAM,KAAK,GAAG,KAAK,CAAC,UAAN,CAAiB,mBAAA,CAAA,iBAAjB,CAAd;AAEA,QAAM;AACJ,IAAA,IAAI,GAAG,KAAK,CAAC,IADT;AAEJ,IAAA,OAAO,GAAG,KAAK,CAAC,KAAN,KAAgB,SAAhB,GAA4B,KAAK,CAAC,KAAN,KAAgB,KAAK,CAAC,KAAlD,GAA0D,SAFhE;AAGJ,IAAA,cAAc,GAAG,KAAK,CAAC,YAAN,KAAuB,SAAvB,GAAmC,KAAK,CAAC,YAAN,KAAuB,KAAK,CAAC,KAAhE,GAAwE,SAHrF;AAIJ,IAAA,aAAa,GAAG,KAAK,CAAC,MAAN,KAAiB,mBAAjB,GAAuC,OAAvC,GAAiD,OAJ7D;AAKJ,IAAA,QAAQ,GAAG,KAAK,CAAC,QALb;AAMJ,IAAA;
|
|
1
|
+
{"version":3,"sources":["components/Radio/useRadio.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, resolveShorthand, useId, useMergedEventCallbacks } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport type { RadioProps, RadioState } from './Radio.types';\n\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */\nexport const useRadio_unstable = (props: RadioProps, ref: React.Ref<HTMLInputElement>): RadioState => {\n const group = React.useContext(RadioGroupContext);\n\n const {\n name = group.name,\n checked = group.value !== undefined ? group.value === props.value : undefined,\n defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined,\n labelPosition = group.layout === 'horizontalStacked' ? 'below' : 'after',\n disabled = group.disabled,\n required,\n onChange,\n } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const root = resolveShorthand(props.root, {\n required: true,\n defaultProps: nativeProps.root,\n });\n\n const input = resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n ref,\n type: 'radio',\n id: useId('radio-', nativeProps.primary.id),\n name,\n checked,\n defaultChecked,\n disabled,\n ...nativeProps.primary,\n },\n });\n\n input.onChange = useMergedEventCallbacks(input.onChange, ev => onChange?.(ev, { value: ev.currentTarget.value }));\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n htmlFor: input.id,\n disabled,\n required,\n },\n });\n\n const indicator = resolveShorthand(props.indicator, {\n required: true,\n defaultProps: {\n 'aria-hidden': true,\n children: <CircleFilled />,\n },\n });\n\n return {\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n label: Label,\n indicator: 'div',\n },\n root,\n input,\n label,\n indicator,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import type { RadioState } from './Radio.types';
|
|
1
|
+
import type { RadioSlots, RadioState } from './Radio.types';
|
|
2
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `radioClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const radioClassName = "fui-Radio";
|
|
7
|
+
export declare const radioClassNames: SlotClassNames<RadioSlots>;
|
|
3
8
|
/**
|
|
4
9
|
* Apply styling to the Radio slots based on the state
|
|
5
10
|
*/
|
|
@@ -3,17 +3,25 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useRadioStyles_unstable = exports.radioClassName = void 0;
|
|
6
|
+
exports.useRadioStyles_unstable = exports.radioClassNames = exports.radioClassName = void 0;
|
|
7
7
|
|
|
8
8
|
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
9
9
|
|
|
10
10
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
11
11
|
|
|
12
12
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
13
|
+
/**
|
|
14
|
+
* @deprecated Use `radioClassNames.root` instead.
|
|
15
|
+
*/
|
|
16
|
+
|
|
13
17
|
|
|
14
18
|
exports.radioClassName = 'fui-Radio';
|
|
15
|
-
|
|
16
|
-
|
|
19
|
+
exports.radioClassNames = {
|
|
20
|
+
root: 'fui-Radio',
|
|
21
|
+
indicator: 'fui-Radio__indicator',
|
|
22
|
+
input: 'fui-Radio__input',
|
|
23
|
+
label: 'fui-Radio__label'
|
|
24
|
+
}; // TODO replace these spacing constants with theme values once they're on the theme
|
|
17
25
|
|
|
18
26
|
const spacingHorizontalS = '8px';
|
|
19
27
|
const spacingHorizontalM = '12px'; // The indicator size is used by the indicator and label styles
|
|
@@ -184,15 +192,15 @@ const useLabelStyles = /*#__PURE__*/react_1.__styles({
|
|
|
184
192
|
|
|
185
193
|
const useRadioStyles_unstable = state => {
|
|
186
194
|
const rootStyles = useRootStyles();
|
|
187
|
-
state.root.className = react_1.mergeClasses(exports.
|
|
195
|
+
state.root.className = react_1.mergeClasses(exports.radioClassNames.root, rootStyles.base, rootStyles.focusIndicator, state.labelPosition === 'below' && rootStyles.vertical, state.root.className);
|
|
188
196
|
const inputStyles = useInputStyles();
|
|
189
|
-
state.input.className = react_1.mergeClasses(inputStyles.base, state.input.className);
|
|
197
|
+
state.input.className = react_1.mergeClasses(exports.radioClassNames.input, inputStyles.base, state.input.className);
|
|
190
198
|
const indicatorStyles = useIndicatorStyles();
|
|
191
|
-
state.indicator.className = react_1.mergeClasses(
|
|
199
|
+
state.indicator.className = react_1.mergeClasses(exports.radioClassNames.indicator, indicatorStyles.base, state.indicator.className);
|
|
192
200
|
const labelStyles = useLabelStyles();
|
|
193
201
|
|
|
194
202
|
if (state.label) {
|
|
195
|
-
state.label.className = react_1.mergeClasses(
|
|
203
|
+
state.label.className = react_1.mergeClasses(exports.radioClassNames.label, labelStyles.base, state.labelPosition === 'below' && labelStyles.below, state.label.className);
|
|
196
204
|
}
|
|
197
205
|
};
|
|
198
206
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;
|
|
1
|
+
{"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `radioClassNames.root` instead.\n */\nexport const radioClassName = 'fui-Radio';\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label',\n};\n\n// TODO replace these spacing constants with theme values once they're on the theme\nconst spacingHorizontalS = '8px';\nconst spacingHorizontalM = '12px';\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n columnGap: spacingHorizontalM,\n ...shorthands.padding(spacingHorizontalS),\n },\n\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\n rowGap: spacingHorizontalM,\n },\n\n focusIndicator: createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputStyles = makeStyles({\n base: {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n ...shorthands.margin(0),\n opacity: 0,\n\n ':enabled': {\n cursor: 'pointer',\n },\n\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n opacity: '0',\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n width: indicatorSize,\n height: indicatorSize,\n fontSize: '12px',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n\n ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n userSelect: 'none',\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n ...shorthands.margin(`calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`, 0),\n },\n\n below: {\n textAlign: 'center',\n },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootStyles.base,\n rootStyles.focusIndicator,\n state.labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(radioClassNames.input, inputStyles.base, state.input.className);\n\n const indicatorStyles = useIndicatorStyles();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n radioClassNames.label,\n labelStyles.base,\n state.labelPosition === 'below' && labelStyles.below,\n state.label.className,\n );\n }\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import { RadioGroupState } from './RadioGroup.types';
|
|
1
|
+
import { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';
|
|
2
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `radioGroupClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const radioGroupClassName = "fui-RadioGroup";
|
|
7
|
+
export declare const radioGroupClassNames: SlotClassNames<RadioGroupSlots>;
|
|
3
8
|
/**
|
|
4
9
|
* Apply styling to the RadioGroup slots based on the state
|
|
5
10
|
*/
|
|
@@ -3,11 +3,18 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useRadioGroupStyles_unstable = exports.radioGroupClassName = void 0;
|
|
6
|
+
exports.useRadioGroupStyles_unstable = exports.radioGroupClassNames = exports.radioGroupClassName = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
|
+
/**
|
|
10
|
+
* @deprecated Use `radioGroupClassNames.root` instead.
|
|
11
|
+
*/
|
|
12
|
+
|
|
9
13
|
|
|
10
14
|
exports.radioGroupClassName = 'fui-RadioGroup';
|
|
15
|
+
exports.radioGroupClassNames = {
|
|
16
|
+
root: 'fui-RadioGroup'
|
|
17
|
+
};
|
|
11
18
|
|
|
12
19
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
13
20
|
"root": {
|
|
@@ -27,7 +34,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
27
34
|
|
|
28
35
|
const useRadioGroupStyles_unstable = state => {
|
|
29
36
|
const styles = useStyles();
|
|
30
|
-
state.root.className = react_1.mergeClasses(exports.
|
|
37
|
+
state.root.className = react_1.mergeClasses(exports.radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);
|
|
31
38
|
};
|
|
32
39
|
|
|
33
40
|
exports.useRadioGroupStyles_unstable = useRadioGroupStyles_unstable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/RadioGroup/useRadioGroupStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;
|
|
1
|
+
{"version":3,"sources":["components/RadioGroup/useRadioGroupStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,mBAAA,GAAsB,gBAAtB;AACA,OAAA,CAAA,oBAAA,GAAwD;AACnE,EAAA,IAAI,EAAE;AAD6D,CAAxD;;AAIb,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA2B;AACrE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,oBAAA,CAAqB,IADA,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,MAAN,KAAiB,UAAjB,IAA+B,MAAM,CAAC,QAHjB,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;AAMD,CARM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `radioGroupClassNames.root` instead.\n */\nexport const radioGroupClassName = 'fui-RadioGroup';\nexport const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {\n root: 'fui-RadioGroup',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = (state: RadioGroupState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n radioGroupClassNames.root,\n styles.root,\n state.layout === 'vertical' && styles.vertical,\n state.root.className,\n );\n};\n"],"sourceRoot":"../src/"}
|
package/lib-commonjs/index.d.ts
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
1
|
+
export { RadioGroup, radioGroupClassName, radioGroupClassNames, renderRadioGroup_unstable, useRadioGroupStyles_unstable, useRadioGroup_unstable, } from './RadioGroup';
|
|
2
|
+
export type { RadioGroupOnChangeData, RadioGroupProps, RadioGroupSlots, RadioGroupState } from './RadioGroup';
|
|
3
|
+
export { Radio, radioClassName, radioClassNames, renderRadio_unstable, useRadioStyles_unstable, useRadio_unstable, } from './Radio';
|
|
4
|
+
export type { RadioProps, RadioSlots, RadioState, RadioOnChangeData } from './Radio';
|
|
5
|
+
export { RadioGroupContext } from './contexts/RadioGroupContext';
|
|
6
|
+
export type { RadioGroupContextValue } from './contexts/RadioGroupContext';
|
package/lib-commonjs/index.js
CHANGED
|
@@ -3,12 +3,96 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
exports.RadioGroupContext = exports.useRadio_unstable = exports.useRadioStyles_unstable = exports.renderRadio_unstable = exports.radioClassNames = exports.radioClassName = exports.Radio = exports.useRadioGroup_unstable = exports.useRadioGroupStyles_unstable = exports.renderRadioGroup_unstable = exports.radioGroupClassNames = exports.radioGroupClassName = exports.RadioGroup = void 0;
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
var RadioGroup_1 = /*#__PURE__*/require("./RadioGroup");
|
|
8
9
|
|
|
9
|
-
|
|
10
|
+
Object.defineProperty(exports, "RadioGroup", {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () {
|
|
13
|
+
return RadioGroup_1.RadioGroup;
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
/* eslint-disable-next-line deprecation/deprecation */
|
|
10
17
|
|
|
11
|
-
|
|
18
|
+
Object.defineProperty(exports, "radioGroupClassName", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function () {
|
|
21
|
+
return RadioGroup_1.radioGroupClassName;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
Object.defineProperty(exports, "radioGroupClassNames", {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function () {
|
|
27
|
+
return RadioGroup_1.radioGroupClassNames;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
Object.defineProperty(exports, "renderRadioGroup_unstable", {
|
|
31
|
+
enumerable: true,
|
|
32
|
+
get: function () {
|
|
33
|
+
return RadioGroup_1.renderRadioGroup_unstable;
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
Object.defineProperty(exports, "useRadioGroupStyles_unstable", {
|
|
37
|
+
enumerable: true,
|
|
38
|
+
get: function () {
|
|
39
|
+
return RadioGroup_1.useRadioGroupStyles_unstable;
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
Object.defineProperty(exports, "useRadioGroup_unstable", {
|
|
43
|
+
enumerable: true,
|
|
44
|
+
get: function () {
|
|
45
|
+
return RadioGroup_1.useRadioGroup_unstable;
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
var Radio_1 = /*#__PURE__*/require("./Radio");
|
|
50
|
+
|
|
51
|
+
Object.defineProperty(exports, "Radio", {
|
|
52
|
+
enumerable: true,
|
|
53
|
+
get: function () {
|
|
54
|
+
return Radio_1.Radio;
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
/* eslint-disable-next-line deprecation/deprecation */
|
|
12
58
|
|
|
13
|
-
|
|
59
|
+
Object.defineProperty(exports, "radioClassName", {
|
|
60
|
+
enumerable: true,
|
|
61
|
+
get: function () {
|
|
62
|
+
return Radio_1.radioClassName;
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
Object.defineProperty(exports, "radioClassNames", {
|
|
66
|
+
enumerable: true,
|
|
67
|
+
get: function () {
|
|
68
|
+
return Radio_1.radioClassNames;
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
Object.defineProperty(exports, "renderRadio_unstable", {
|
|
72
|
+
enumerable: true,
|
|
73
|
+
get: function () {
|
|
74
|
+
return Radio_1.renderRadio_unstable;
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
Object.defineProperty(exports, "useRadioStyles_unstable", {
|
|
78
|
+
enumerable: true,
|
|
79
|
+
get: function () {
|
|
80
|
+
return Radio_1.useRadioStyles_unstable;
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
Object.defineProperty(exports, "useRadio_unstable", {
|
|
84
|
+
enumerable: true,
|
|
85
|
+
get: function () {
|
|
86
|
+
return Radio_1.useRadio_unstable;
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
var RadioGroupContext_1 = /*#__PURE__*/require("./contexts/RadioGroupContext");
|
|
91
|
+
|
|
92
|
+
Object.defineProperty(exports, "RadioGroupContext", {
|
|
93
|
+
enumerable: true,
|
|
94
|
+
get: function () {
|
|
95
|
+
return RadioGroupContext_1.RadioGroupContext;
|
|
96
|
+
}
|
|
97
|
+
});
|
|
14
98
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,YAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,UAAA;AAAU;AAAV,CAAA;AACA;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,mBAAA;AAAmB;AAAnB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,yBAAA;AAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,8BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,4BAAA;AAA4B;AAA5B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,sBAAA;AAAsB;AAAtB,CAAA;;AAGF,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,KAAA;AAAK;AAAL,CAAA;AACA;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,cAAA;AAAc;AAAd,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,iBAAA;AAAiB;AAAjB,CAAA;;AAGF,IAAA,mBAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,mBAAA,CAAA,iBAAA;AAAiB;AAAjB,CAAA","sourcesContent":["export {\n RadioGroup,\n /* eslint-disable-next-line deprecation/deprecation */\n radioGroupClassName,\n radioGroupClassNames,\n renderRadioGroup_unstable,\n useRadioGroupStyles_unstable,\n useRadioGroup_unstable,\n} from './RadioGroup';\nexport type { RadioGroupOnChangeData, RadioGroupProps, RadioGroupSlots, RadioGroupState } from './RadioGroup';\nexport {\n Radio,\n /* eslint-disable-next-line deprecation/deprecation */\n radioClassName,\n radioClassNames,\n renderRadio_unstable,\n useRadioStyles_unstable,\n useRadio_unstable,\n} from './Radio';\nexport type { RadioProps, RadioSlots, RadioState, RadioOnChangeData } from './Radio';\nexport { RadioGroupContext } from './contexts/RadioGroupContext';\nexport type { RadioGroupContextValue } from './contexts/RadioGroupContext';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-radio",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20220317-0422.1",
|
|
4
4
|
"description": "Fluent UI Radio component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,14 +27,14 @@
|
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
|
29
29
|
"@fluentui/react-conformance": "*",
|
|
30
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
30
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20220317-0422.1"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"@fluentui/react-icons": "^2.0.159-beta.10",
|
|
34
|
-
"@fluentui/react-label": "0.0.0-nightly-
|
|
35
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
|
36
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
34
|
+
"@fluentui/react-label": "0.0.0-nightly-20220317-0422.1",
|
|
35
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20220317-0422.1",
|
|
36
|
+
"@fluentui/react-theme": "0.0.0-nightly-20220317-0422.1",
|
|
37
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20220317-0422.1",
|
|
38
38
|
"@griffel/react": "1.0.0",
|
|
39
39
|
"tslib": "^2.1.0"
|
|
40
40
|
},
|