@fluentui/react-radio 9.1.16 → 9.1.18
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +115 -1
- package/CHANGELOG.md +34 -2
- package/lib/Radio.js +0 -1
- package/lib/Radio.js.map +1 -1
- package/lib/RadioGroup.js +0 -1
- package/lib/RadioGroup.js.map +1 -1
- package/lib/components/Radio/Radio.js +5 -7
- package/lib/components/Radio/Radio.js.map +1 -1
- package/lib/components/Radio/Radio.types.js +0 -1
- package/lib/components/Radio/Radio.types.js.map +1 -1
- package/lib/components/Radio/index.js +0 -1
- package/lib/components/Radio/index.js.map +1 -1
- package/lib/components/Radio/renderRadio.js +4 -9
- package/lib/components/Radio/renderRadio.js.map +1 -1
- package/lib/components/Radio/useRadio.js +64 -71
- package/lib/components/Radio/useRadio.js.map +1 -1
- package/lib/components/Radio/useRadioStyles.styles.js +1 -1
- package/lib/components/Radio/useRadioStyles.styles.js.map +1 -1
- package/lib/components/RadioGroup/RadioGroup.js +6 -8
- package/lib/components/RadioGroup/RadioGroup.js.map +1 -1
- package/lib/components/RadioGroup/RadioGroup.types.js +0 -1
- package/lib/components/RadioGroup/RadioGroup.types.js.map +1 -1
- package/lib/components/RadioGroup/index.js +0 -1
- package/lib/components/RadioGroup/index.js.map +1 -1
- package/lib/components/RadioGroup/renderRadioGroup.js +6 -11
- package/lib/components/RadioGroup/renderRadioGroup.js.map +1 -1
- package/lib/components/RadioGroup/useRadioGroup.js +32 -39
- package/lib/components/RadioGroup/useRadioGroup.js.map +1 -1
- package/lib/components/RadioGroup/useRadioGroupStyles.styles.js.map +1 -1
- package/lib/contexts/RadioGroupContext.js +3 -7
- package/lib/contexts/RadioGroupContext.js.map +1 -1
- package/lib/contexts/index.js +0 -1
- package/lib/contexts/index.js.map +1 -1
- package/lib/contexts/useRadioGroupContextValues.js +23 -23
- package/lib/contexts/useRadioGroupContextValues.js.map +1 -1
- package/lib/index.js +0 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Radio.js +0 -3
- package/lib-commonjs/Radio.js.map +1 -1
- package/lib-commonjs/RadioGroup.js +0 -3
- package/lib-commonjs/RadioGroup.js.map +1 -1
- package/lib-commonjs/components/Radio/Radio.js +1 -3
- package/lib-commonjs/components/Radio/Radio.js.map +1 -1
- package/lib-commonjs/components/Radio/Radio.types.js +0 -3
- package/lib-commonjs/components/Radio/Radio.types.js.map +1 -1
- package/lib-commonjs/components/Radio/index.js +0 -3
- package/lib-commonjs/components/Radio/index.js.map +1 -1
- package/lib-commonjs/components/Radio/renderRadio.js +1 -3
- package/lib-commonjs/components/Radio/renderRadio.js.map +1 -1
- package/lib-commonjs/components/Radio/useRadio.js +1 -3
- package/lib-commonjs/components/Radio/useRadio.js.map +1 -1
- package/lib-commonjs/components/Radio/useRadioStyles.styles.js +11 -13
- package/lib-commonjs/components/Radio/useRadioStyles.styles.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/RadioGroup.js +1 -3
- package/lib-commonjs/components/RadioGroup/RadioGroup.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/RadioGroup.types.js +0 -3
- package/lib-commonjs/components/RadioGroup/RadioGroup.types.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/index.js +0 -3
- package/lib-commonjs/components/RadioGroup/index.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/renderRadioGroup.js +1 -3
- package/lib-commonjs/components/RadioGroup/renderRadioGroup.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/useRadioGroup.js +1 -3
- package/lib-commonjs/components/RadioGroup/useRadioGroup.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.styles.js +0 -2
- package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.styles.js.map +1 -1
- package/lib-commonjs/contexts/RadioGroupContext.js +1 -3
- package/lib-commonjs/contexts/RadioGroupContext.js.map +1 -1
- package/lib-commonjs/contexts/index.js +0 -3
- package/lib-commonjs/contexts/index.js.map +1 -1
- package/lib-commonjs/contexts/useRadioGroupContextValues.js +1 -3
- package/lib-commonjs/contexts/useRadioGroupContextValues.js.map +1 -1
- package/lib-commonjs/index.js +0 -3
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +11 -11
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,121 @@
|
|
|
2
2
|
"name": "@fluentui/react-radio",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 20 Jun 2023 12:34:46 GMT",
|
|
6
|
+
"tag": "@fluentui/react-radio_v9.1.18",
|
|
7
|
+
"version": "9.1.18",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "ololubek@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-radio",
|
|
13
|
+
"commit": "8a5ae3aa00faa327c58887a99a5698b18f2930ee",
|
|
14
|
+
"comment": "chore: update @fluentui/react-icons to 2.0.203"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-radio",
|
|
19
|
+
"comment": "Bump @fluentui/react-field to v9.1.7",
|
|
20
|
+
"commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-radio",
|
|
25
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.7",
|
|
26
|
+
"commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-radio",
|
|
31
|
+
"comment": "Bump @fluentui/react-label to v9.1.16",
|
|
32
|
+
"commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-radio",
|
|
37
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.5.1",
|
|
38
|
+
"commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-radio",
|
|
43
|
+
"comment": "Bump @fluentui/react-tabster to v9.8.0",
|
|
44
|
+
"commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-radio",
|
|
49
|
+
"comment": "Bump @fluentui/react-theme to v9.1.9",
|
|
50
|
+
"commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "beachball",
|
|
54
|
+
"package": "@fluentui/react-radio",
|
|
55
|
+
"comment": "Bump @fluentui/react-utilities to v9.9.3",
|
|
56
|
+
"commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"author": "beachball",
|
|
60
|
+
"package": "@fluentui/react-radio",
|
|
61
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.23",
|
|
62
|
+
"commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
|
|
63
|
+
}
|
|
64
|
+
]
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"date": "Wed, 31 May 2023 06:46:18 GMT",
|
|
69
|
+
"tag": "@fluentui/react-radio_v9.1.17",
|
|
70
|
+
"version": "9.1.17",
|
|
71
|
+
"comments": {
|
|
72
|
+
"patch": [
|
|
73
|
+
{
|
|
74
|
+
"author": "seanmonahan@microsoft.com",
|
|
75
|
+
"package": "@fluentui/react-radio",
|
|
76
|
+
"commit": "d640b972d7ac86bfb76ae6c6329f12cdd33b3b7c",
|
|
77
|
+
"comment": "chore: Update Griffel to v1.5.7."
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "beachball",
|
|
81
|
+
"package": "@fluentui/react-radio",
|
|
82
|
+
"comment": "Bump @fluentui/react-field to v9.1.6",
|
|
83
|
+
"commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"author": "beachball",
|
|
87
|
+
"package": "@fluentui/react-radio",
|
|
88
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.6",
|
|
89
|
+
"commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"author": "beachball",
|
|
93
|
+
"package": "@fluentui/react-radio",
|
|
94
|
+
"comment": "Bump @fluentui/react-label to v9.1.15",
|
|
95
|
+
"commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"author": "beachball",
|
|
99
|
+
"package": "@fluentui/react-radio",
|
|
100
|
+
"comment": "Bump @fluentui/react-tabster to v9.7.5",
|
|
101
|
+
"commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"author": "beachball",
|
|
105
|
+
"package": "@fluentui/react-radio",
|
|
106
|
+
"comment": "Bump @fluentui/react-utilities to v9.9.2",
|
|
107
|
+
"commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"author": "beachball",
|
|
111
|
+
"package": "@fluentui/react-radio",
|
|
112
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.22",
|
|
113
|
+
"commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
|
|
114
|
+
}
|
|
115
|
+
]
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"date": "Thu, 25 May 2023 10:00:48 GMT",
|
|
6
120
|
"tag": "@fluentui/react-radio_v9.1.16",
|
|
7
121
|
"version": "9.1.16",
|
|
8
122
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,44 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-radio
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 20 Jun 2023 12:34:46 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.1.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.1.18)
|
|
8
|
+
|
|
9
|
+
Tue, 20 Jun 2023 12:34:46 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.1.17..@fluentui/react-radio_v9.1.18)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: update @fluentui/react-icons to 2.0.203 ([PR #28203](https://github.com/microsoft/fluentui/pull/28203) by ololubek@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-field to v9.1.7 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.7 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
|
|
17
|
+
- Bump @fluentui/react-label to v9.1.16 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
|
|
18
|
+
- Bump @fluentui/react-shared-contexts to v9.5.1 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
|
|
19
|
+
- Bump @fluentui/react-tabster to v9.8.0 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
|
|
20
|
+
- Bump @fluentui/react-theme to v9.1.9 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
|
|
21
|
+
- Bump @fluentui/react-utilities to v9.9.3 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
|
|
22
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.23 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
|
|
23
|
+
|
|
24
|
+
## [9.1.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.1.17)
|
|
25
|
+
|
|
26
|
+
Wed, 31 May 2023 06:46:18 GMT
|
|
27
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.1.16..@fluentui/react-radio_v9.1.17)
|
|
28
|
+
|
|
29
|
+
### Patches
|
|
30
|
+
|
|
31
|
+
- chore: Update Griffel to v1.5.7. ([PR #27925](https://github.com/microsoft/fluentui/pull/27925) by seanmonahan@microsoft.com)
|
|
32
|
+
- Bump @fluentui/react-field to v9.1.6 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
|
|
33
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.6 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
|
|
34
|
+
- Bump @fluentui/react-label to v9.1.15 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
|
|
35
|
+
- Bump @fluentui/react-tabster to v9.7.5 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
|
|
36
|
+
- Bump @fluentui/react-utilities to v9.9.2 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
|
|
37
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.22 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
|
|
38
|
+
|
|
7
39
|
## [9.1.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.1.16)
|
|
8
40
|
|
|
9
|
-
Thu, 25 May 2023
|
|
41
|
+
Thu, 25 May 2023 10:00:48 GMT
|
|
10
42
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.1.15..@fluentui/react-radio_v9.1.16)
|
|
11
43
|
|
|
12
44
|
### Patches
|
package/lib/Radio.js
CHANGED
package/lib/Radio.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["Radio.ts"],"sourcesContent":["export * from './components/Radio/index';\n"],"names":[],"mappings":"AAAA,cAAc,2BAA2B"}
|
package/lib/RadioGroup.js
CHANGED
package/lib/RadioGroup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["RadioGroup.ts"],"sourcesContent":["export * from './components/RadioGroup/index';\n"],"names":[],"mappings":"AAAA,cAAc,gCAAgC"}
|
|
@@ -5,12 +5,10 @@ import { useRadioStyles_unstable } from './useRadioStyles.styles';
|
|
|
5
5
|
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
|
|
6
6
|
/**
|
|
7
7
|
* Radio component is a wrapper for a radio button with a label.
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
return renderRadio_unstable(state);
|
|
8
|
+
*/ export const Radio = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
|
9
|
+
const state = useRadio_unstable(props, ref);
|
|
10
|
+
useRadioStyles_unstable(state);
|
|
11
|
+
useCustomStyleHook_unstable('useRadioStyles_unstable')(state);
|
|
12
|
+
return renderRadio_unstable(state);
|
|
14
13
|
});
|
|
15
14
|
Radio.displayName = 'Radio';
|
|
16
|
-
//# sourceMappingURL=Radio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { RadioProps } from './Radio.types';\nimport { renderRadio_unstable } from './renderRadio';\nimport { useRadio_unstable } from './useRadio';\nimport { useRadioStyles_unstable } from './useRadioStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Radio component is a wrapper for a radio button with a label.\n */\nexport const Radio: ForwardRefComponent<RadioProps> = React.forwardRef((props, ref) => {\n const state = useRadio_unstable(props, ref);\n\n useRadioStyles_unstable(state);\n\n useCustomStyleHook_unstable('useRadioStyles_unstable')(state);\n\n return renderRadio_unstable(state);\n});\n\nRadio.displayName = 'Radio';\n"],"names":["React","renderRadio_unstable","useRadio_unstable","useRadioStyles_unstable","useCustomStyleHook_unstable","Radio","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,sBAAyCL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACrF,MAAMC,QAAQP,kBAAkBK,OAAOC;IAEvCL,wBAAwBM;IAExBL,4BAA4B,2BAA2BK;IAEvD,OAAOR,qBAAqBQ;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["Radio.types.ts"],"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'>, 'onChange' | '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"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Radio';\nexport * from './Radio.types';\nexport * from './renderRadio';\nexport * from './useRadio';\nexport * from './useRadioStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,gBAAgB;AAC9B,cAAc,gBAAgB;AAC9B,cAAc,aAAa;AAC3B,cAAc,0BAA0B"}
|
|
@@ -1,13 +1,8 @@
|
|
|
1
|
-
/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
|
|
1
|
+
/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
|
|
2
2
|
import { getSlotsNext } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
|
4
4
|
* Render the final JSX of Radio
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
slots,
|
|
9
|
-
slotProps
|
|
10
|
-
} = getSlotsNext(state);
|
|
11
|
-
return /*#__PURE__*/createElement(slots.root, slotProps.root, /*#__PURE__*/createElement(slots.input, slotProps.input), /*#__PURE__*/createElement(slots.indicator, slotProps.indicator), slots.label && /*#__PURE__*/createElement(slots.label, slotProps.label));
|
|
5
|
+
*/ export const renderRadio_unstable = (state)=>{
|
|
6
|
+
const { slots , slotProps } = getSlotsNext(state);
|
|
7
|
+
return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(slots.input, slotProps.input), /*#__PURE__*/ createElement(slots.indicator, slotProps.indicator), slots.label && /*#__PURE__*/ createElement(slots.label, slotProps.label));
|
|
12
8
|
};
|
|
13
|
-
//# sourceMappingURL=renderRadio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["renderRadio.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { RadioSlots, RadioState } from './Radio.types';\n\n/**\n * Render the final JSX of Radio\n */\nexport const renderRadio_unstable = (state: RadioState) => {\n const { slots, slotProps } = getSlotsNext<RadioSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.input {...slotProps.input} />\n <slots.indicator {...slotProps.indicator} />\n {slots.label && <slots.label {...slotProps.label} />}\n </slots.root>\n );\n};\n"],"names":["createElement","getSlotsNext","renderRadio_unstable","state","slots","slotProps","root","input","indicator","label"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,QAAsB;IACzD,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAAyBE;IAEtD,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,gBAC5B,AAfN,cAeOF,MAAMG,KAAK,EAAKF,UAAUE,KAAK,iBAChC,AAhBN,cAgBOH,MAAMI,SAAS,EAAKH,UAAUG,SAAS,GACvCJ,MAAMK,KAAK,kBAAI,AAjBtB,cAiBuBL,MAAMK,KAAK,EAAKJ,UAAUI,KAAK;AAGtD,EAAE"}
|
|
@@ -12,76 +12,69 @@ import { useFocusWithin } from '@fluentui/react-tabster';
|
|
|
12
12
|
*
|
|
13
13
|
* @param props - props from this instance of Radio
|
|
14
14
|
* @param ref - reference to `<input>` element of Radio
|
|
15
|
-
*/
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
onChange
|
|
27
|
-
} = props;
|
|
28
|
-
const nativeProps = getPartitionedNativeProps({
|
|
29
|
-
props,
|
|
30
|
-
primarySlotTagName: 'input',
|
|
31
|
-
excludedPropNames: ['checked', 'defaultChecked', 'onChange']
|
|
32
|
-
});
|
|
33
|
-
const root = resolveShorthand(props.root, {
|
|
34
|
-
required: true,
|
|
35
|
-
defaultProps: {
|
|
36
|
-
ref: useFocusWithin(),
|
|
37
|
-
...nativeProps.root
|
|
38
|
-
}
|
|
39
|
-
});
|
|
40
|
-
const input = resolveShorthand(props.input, {
|
|
41
|
-
required: true,
|
|
42
|
-
defaultProps: {
|
|
43
|
-
ref,
|
|
44
|
-
type: 'radio',
|
|
45
|
-
id: useId('radio-', nativeProps.primary.id),
|
|
46
|
-
name,
|
|
47
|
-
checked,
|
|
48
|
-
defaultChecked,
|
|
49
|
-
disabled,
|
|
50
|
-
required,
|
|
51
|
-
'aria-describedby': ariaDescribedBy,
|
|
52
|
-
...nativeProps.primary
|
|
53
|
-
}
|
|
54
|
-
});
|
|
55
|
-
input.onChange = mergeCallbacks(input.onChange, ev => {
|
|
56
|
-
return onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
|
|
57
|
-
value: ev.currentTarget.value
|
|
15
|
+
*/ export const useRadio_unstable = (props, ref)=>{
|
|
16
|
+
const group = useRadioGroupContextValue_unstable();
|
|
17
|
+
const { name =group.name , checked =group.value !== undefined ? group.value === props.value : undefined , defaultChecked =group.defaultValue !== undefined ? group.defaultValue === props.value : undefined , labelPosition =group.layout === 'horizontal-stacked' ? 'below' : 'after' , disabled =group.disabled , required =group.required , 'aria-describedby': ariaDescribedBy = group['aria-describedby'] , onChange } = props;
|
|
18
|
+
const nativeProps = getPartitionedNativeProps({
|
|
19
|
+
props,
|
|
20
|
+
primarySlotTagName: 'input',
|
|
21
|
+
excludedPropNames: [
|
|
22
|
+
'checked',
|
|
23
|
+
'defaultChecked',
|
|
24
|
+
'onChange'
|
|
25
|
+
]
|
|
58
26
|
});
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
27
|
+
const root = resolveShorthand(props.root, {
|
|
28
|
+
required: true,
|
|
29
|
+
defaultProps: {
|
|
30
|
+
ref: useFocusWithin(),
|
|
31
|
+
...nativeProps.root
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
const input = resolveShorthand(props.input, {
|
|
35
|
+
required: true,
|
|
36
|
+
defaultProps: {
|
|
37
|
+
ref,
|
|
38
|
+
type: 'radio',
|
|
39
|
+
id: useId('radio-', nativeProps.primary.id),
|
|
40
|
+
name,
|
|
41
|
+
checked,
|
|
42
|
+
defaultChecked,
|
|
43
|
+
disabled,
|
|
44
|
+
required,
|
|
45
|
+
'aria-describedby': ariaDescribedBy,
|
|
46
|
+
...nativeProps.primary
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
input.onChange = mergeCallbacks(input.onChange, (ev)=>{
|
|
50
|
+
return onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
|
|
51
|
+
value: ev.currentTarget.value
|
|
52
|
+
});
|
|
53
|
+
});
|
|
54
|
+
const label = resolveShorthand(props.label, {
|
|
55
|
+
defaultProps: {
|
|
56
|
+
htmlFor: input.id,
|
|
57
|
+
disabled: input.disabled
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
const indicator = resolveShorthand(props.indicator, {
|
|
61
|
+
required: true,
|
|
62
|
+
defaultProps: {
|
|
63
|
+
'aria-hidden': true,
|
|
64
|
+
children: /*#__PURE__*/ React.createElement(CircleFilled, null)
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
return {
|
|
68
|
+
labelPosition,
|
|
69
|
+
components: {
|
|
70
|
+
root: 'span',
|
|
71
|
+
input: 'input',
|
|
72
|
+
label: Label,
|
|
73
|
+
indicator: 'div'
|
|
74
|
+
},
|
|
75
|
+
root,
|
|
76
|
+
input,
|
|
77
|
+
label,
|
|
78
|
+
indicator
|
|
79
|
+
};
|
|
86
80
|
};
|
|
87
|
-
//# sourceMappingURL=useRadio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["useRadio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { useRadioGroupContextValue_unstable } from '../../contexts/RadioGroupContext';\nimport { useFocusWithin } from '@fluentui/react-tabster';\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 = useRadioGroupContextValue_unstable();\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 === 'horizontal-stacked' ? 'below' : 'after',\n disabled = group.disabled,\n required = group.required,\n 'aria-describedby': ariaDescribedBy = group['aria-describedby'],\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: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\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 required,\n 'aria-describedby': ariaDescribedBy,\n ...nativeProps.primary,\n },\n });\n\n input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { value: ev.currentTarget.value }));\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n htmlFor: input.id,\n disabled: input.disabled,\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"],"names":["React","CircleFilled","Label","getPartitionedNativeProps","mergeCallbacks","resolveShorthand","useId","useRadioGroupContextValue_unstable","useFocusWithin","useRadio_unstable","props","ref","group","name","checked","value","undefined","defaultChecked","defaultValue","labelPosition","layout","disabled","required","ariaDescribedBy","onChange","nativeProps","primarySlotTagName","excludedPropNames","root","defaultProps","input","type","id","primary","ev","currentTarget","label","htmlFor","indicator","children","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,yBAAyB,EAAEC,cAAc,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,4BAA4B;AAC/G,SAASC,kCAAkC,QAAQ,mCAAmC;AACtF,SAASC,cAAc,QAAQ,0BAA0B;AAGzD;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC,MAAiD;IACpG,MAAMC,QAAQL;IAEd,MAAM,EACJM,MAAOD,MAAMC,IAAI,CAAA,EACjBC,SAAUF,MAAMG,KAAK,KAAKC,YAAYJ,MAAMG,KAAK,KAAKL,MAAMK,KAAK,GAAGC,SAAS,CAAA,EAC7EC,gBAAiBL,MAAMM,YAAY,KAAKF,YAAYJ,MAAMM,YAAY,KAAKR,MAAMK,KAAK,GAAGC,SAAS,CAAA,EAClGG,eAAgBP,MAAMQ,MAAM,KAAK,uBAAuB,UAAU,OAAO,CAAA,EACzEC,UAAWT,MAAMS,QAAQ,CAAA,EACzBC,UAAWV,MAAMU,QAAQ,CAAA,EACzB,oBAAoBC,kBAAkBX,KAAK,CAAC,mBAAmB,CAAA,EAC/DY,SAAQ,EACT,GAAGd;IAEJ,MAAMe,cAActB,0BAA0B;QAC5CO;QACAgB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAW;YAAkB;SAAW;IAC9D;IAEA,MAAMC,OAAOvB,iBAAiBK,MAAMkB,IAAI,EAAE;QACxCN,UAAU,IAAI;QACdO,cAAc;YACZlB,KAAKH;YACL,GAAGiB,YAAYG,IAAI;QACrB;IACF;IAEA,MAAME,QAAQzB,iBAAiBK,MAAMoB,KAAK,EAAE;QAC1CR,UAAU,IAAI;QACdO,cAAc;YACZlB;YACAoB,MAAM;YACNC,IAAI1B,MAAM,UAAUmB,YAAYQ,OAAO,CAACD,EAAE;YAC1CnB;YACAC;YACAG;YACAI;YACAC;YACA,oBAAoBC;YACpB,GAAGE,YAAYQ,OAAO;QACxB;IACF;IAEAH,MAAMN,QAAQ,GAAGpB,eAAe0B,MAAMN,QAAQ,EAAEU,CAAAA;QAAMV,OAAAA,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAWU,IAAI;YAAEnB,OAAOmB,GAAGC,aAAa,CAACpB,KAAK;QAAC;;IAErG,MAAMqB,QAAQ/B,iBAAiBK,MAAM0B,KAAK,EAAE;QAC1CP,cAAc;YACZQ,SAASP,MAAME,EAAE;YACjBX,UAAUS,MAAMT,QAAQ;QAC1B;IACF;IAEA,MAAMiB,YAAYjC,iBAAiBK,MAAM4B,SAAS,EAAE;QAClDhB,UAAU,IAAI;QACdO,cAAc;YACZ,eAAe,IAAI;YACnBU,wBAAU,oBAACtC;QACb;IACF;IAEA,OAAO;QACLkB;QACAqB,YAAY;YACVZ,MAAM;YACNE,OAAO;YACPM,OAAOlC;YACPoC,WAAW;QACb;QACAV;QACAE;QACAM;QACAE;IACF;AACF,EAAE"}
|
|
@@ -9,7 +9,7 @@ export const radioClassNames = {
|
|
|
9
9
|
};
|
|
10
10
|
// The indicator size is used by the indicator and label styles
|
|
11
11
|
const indicatorSize = '16px';
|
|
12
|
-
const useRootBaseClassName = /*#__PURE__*/__resetStyles("
|
|
12
|
+
const useRootBaseClassName = /*#__PURE__*/__resetStyles("r12l4eqc", "r18esy0c", [".r12l4eqc{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".r12l4eqc:focus{outline-style:none;}", ".r12l4eqc:focus-visible{outline-style:none;}", ".r12l4eqc[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r12l4eqc[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r18esy0c{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".r18esy0c:focus{outline-style:none;}", ".r18esy0c:focus-visible{outline-style:none;}", ".r18esy0c[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r18esy0c[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"]);
|
|
13
13
|
const useRootStyles = /*#__PURE__*/__styles({
|
|
14
14
|
vertical: {
|
|
15
15
|
Beiy3e4: "f1vx9l62",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","shorthands","radioClassNames","root","indicator","input","label","indicatorSize","useRootBaseClassName","useRootStyles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","after","B6of3ja","jrapky","fsow6f","useRadioStyles_unstable","state","labelPosition","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","labelStyles"],"sources":["
|
|
1
|
+
{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","shorthands","radioClassNames","root","indicator","input","label","indicatorSize","useRootBaseClassName","useRootStyles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","after","B6of3ja","jrapky","fsow6f","useRadioStyles_unstable","state","labelPosition","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","labelStyles"],"sources":["useRadioStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const radioClassNames = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n position: 'relative',\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n});\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n alignItems: 'center'\n }\n});\nconst useInputBaseClassName = makeResetStyles({\n position: 'absolute',\n left: 0,\n top: 0,\n width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n height: '100%',\n boxSizing: 'border-box',\n margin: 0,\n opacity: 0,\n ':enabled': {\n cursor: 'pointer',\n [`& ~ .${radioClassNames.label}`]: {\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 // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessible\n },\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessibleHover\n }\n },\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessiblePressed\n }\n }\n },\n // Colors for the checked state\n ':enabled:checked': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStroke,\n color: tokens.colorCompoundBrandForeground1\n },\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokeHover,\n color: tokens.colorCompoundBrandForeground1Hover\n }\n },\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokePressed,\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n }\n },\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'default'\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n color: tokens.colorNeutralForegroundDisabled\n }\n }\n});\nconst useInputStyles = makeStyles({\n below: {\n width: '100%',\n height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`\n }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n width: indicatorSize,\n height: indicatorSize,\n fontSize: '12px',\n boxSizing: 'border-box',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n border: tokens.strokeWidthThin + ' solid',\n borderRadius: tokens.borderRadiusCircular,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none'\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS)\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\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 marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`\n },\n below: {\n paddingTop: tokens.spacingVerticalXS,\n textAlign: 'center'\n }\n});\n/**\n * Apply styling to the Radio slots based on the state\n */ export const useRadioStyles_unstable = (state)=>{\n const { labelPosition } = state;\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.input.className);\n const indicatorBaseClassName = useIndicatorBaseClassName();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n }\n};\n"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE,WAAW;EACjBC,SAAS,EAAE,sBAAsB;EACjCC,KAAK,EAAE,kBAAkB;EACzBC,KAAK,EAAE;AACX,CAAC;AACD;AACA,MAAMC,aAAa,GAAG,MAAM;AAC5B,MAAMC,oBAAoB,gBAAGV,aAAA,+yEAO5B,CAAC;AACF,MAAMW,aAAa,gBAAGV,QAAA;EAAAW,QAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKrB,CAAC;AACF,MAAMC,qBAAqB,gBAAGhB,aAAA,26GA6E7B,CAAC;AACF,MAAMiB,cAAc,gBAAGhB,QAAA;EAAAiB,KAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,CAKtB,CAAC;AACF,MAAMM,yBAAyB,gBAAGrB,aAAA,2lBAejC,CAAC;AACF;AACA,MAAMsB,cAAc,gBAAGrB,QAAA;EAAAsB,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;EAAAb,KAAA;IAAAO,MAAA;IAAAO,MAAA;EAAA;AAAA;EAAAjB,CAAA;AAAA,CAgBtB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMkB,uBAAuB,GAAIC,KAAK,IAAG;EAChD,MAAM;IAAEC;EAAe,CAAC,GAAGD,KAAK;EAChC,MAAME,iBAAiB,GAAG1B,oBAAoB,CAAC,CAAC;EAChD,MAAM2B,UAAU,GAAG1B,aAAa,CAAC,CAAC;EAClCuB,KAAK,CAAC7B,IAAI,CAACiC,SAAS,GAAGpC,YAAY,CAACE,eAAe,CAACC,IAAI,EAAE+B,iBAAiB,EAAED,aAAa,KAAK,OAAO,IAAIE,UAAU,CAACzB,QAAQ,EAAEsB,KAAK,CAAC7B,IAAI,CAACiC,SAAS,CAAC;EACpJ,MAAMC,kBAAkB,GAAGvB,qBAAqB,CAAC,CAAC;EAClD,MAAMwB,WAAW,GAAGvB,cAAc,CAAC,CAAC;EACpCiB,KAAK,CAAC3B,KAAK,CAAC+B,SAAS,GAAGpC,YAAY,CAACE,eAAe,CAACG,KAAK,EAAEgC,kBAAkB,EAAEJ,aAAa,KAAK,OAAO,IAAIK,WAAW,CAACtB,KAAK,EAAEgB,KAAK,CAAC3B,KAAK,CAAC+B,SAAS,CAAC;EACtJ,MAAMG,sBAAsB,GAAGpB,yBAAyB,CAAC,CAAC;EAC1Da,KAAK,CAAC5B,SAAS,CAACgC,SAAS,GAAGpC,YAAY,CAACE,eAAe,CAACE,SAAS,EAAEmC,sBAAsB,EAAEP,KAAK,CAAC5B,SAAS,CAACgC,SAAS,CAAC;EACtH,MAAMI,WAAW,GAAGpB,cAAc,CAAC,CAAC;EACpC,IAAIY,KAAK,CAAC1B,KAAK,EAAE;IACb0B,KAAK,CAAC1B,KAAK,CAAC8B,SAAS,GAAGpC,YAAY,CAACE,eAAe,CAACI,KAAK,EAAEkC,WAAW,CAACnB,IAAI,EAAEmB,WAAW,CAACP,aAAa,CAAC,EAAED,KAAK,CAAC1B,KAAK,CAAC8B,SAAS,CAAC;EACpI;AACJ,CAAC"}
|
|
@@ -6,13 +6,11 @@ import { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextV
|
|
|
6
6
|
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
|
|
7
7
|
/**
|
|
8
8
|
* A RadioGroup component presents a set of options where only one option can be selected.
|
|
9
|
-
*/
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
return renderRadioGroup_unstable(state, contextValues);
|
|
9
|
+
*/ export const RadioGroup = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
|
10
|
+
const state = useRadioGroup_unstable(props, ref);
|
|
11
|
+
const contextValues = useRadioGroupContextValues(state);
|
|
12
|
+
useRadioGroupStyles_unstable(state);
|
|
13
|
+
useCustomStyleHook_unstable('useRadioGroupStyles_unstable')(state);
|
|
14
|
+
return renderRadioGroup_unstable(state, contextValues);
|
|
16
15
|
});
|
|
17
16
|
RadioGroup.displayName = 'RadioGroup';
|
|
18
|
-
//# sourceMappingURL=RadioGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { RadioGroupProps } from './RadioGroup.types';\nimport { renderRadioGroup_unstable } from './renderRadioGroup';\nimport { useRadioGroup_unstable } from './useRadioGroup';\nimport { useRadioGroupStyles_unstable } from './useRadioGroupStyles.styles';\nimport { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A RadioGroup component presents a set of options where only one option can be selected.\n */\nexport const RadioGroup: ForwardRefComponent<RadioGroupProps> = React.forwardRef((props, ref) => {\n const state = useRadioGroup_unstable(props, ref);\n const contextValues = useRadioGroupContextValues(state);\n\n useRadioGroupStyles_unstable(state);\n\n useCustomStyleHook_unstable('useRadioGroupStyles_unstable')(state);\n\n return renderRadioGroup_unstable(state, contextValues);\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"names":["React","renderRadioGroup_unstable","useRadioGroup_unstable","useRadioGroupStyles_unstable","useRadioGroupContextValues","useCustomStyleHook_unstable","RadioGroup","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAC5E,SAASC,0BAA0B,QAAQ,4CAA4C;AACvF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,2BAAmDN,MAAMO,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC/F,MAAMC,QAAQR,uBAAuBM,OAAOC;IAC5C,MAAME,gBAAgBP,2BAA2BM;IAEjDP,6BAA6BO;IAE7BL,4BAA4B,gCAAgCK;IAE5D,OAAOT,0BAA0BS,OAAOC;AAC1C,GAAG;AAEHL,WAAWM,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["RadioGroup.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\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 * @default vertical\n */\n layout?: 'vertical' | 'horizontal' | 'horizontal-stacked';\n\n /**\n * Disable all Radio items in this group.\n */\n disabled?: boolean;\n\n /**\n * Require a selection in this group. Adds the `required` prop to all child Radio items.\n */\n required?: 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 Pick<RadioGroupProps, 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required'>;\n\nexport type RadioGroupContextValue = Pick<\n RadioGroupProps,\n 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required' | 'aria-describedby'\n>;\n\nexport type RadioGroupContextValues = {\n radioGroup: RadioGroupContextValue;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|