@fluentui/react-radio 9.0.0-rc.2 → 9.0.0-rc.3
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +82 -1
- package/CHANGELOG.md +22 -2
- package/{lib → dist}/tsdoc-metadata.json +0 -0
- package/lib/components/Radio/useRadioStyles.js +15 -18
- package/lib/components/Radio/useRadioStyles.js.map +1 -1
- package/lib-commonjs/components/Radio/useRadioStyles.js +15 -18
- package/lib-commonjs/components/Radio/useRadioStyles.js.map +1 -1
- package/package.json +9 -9
- package/lib/Radio.d.ts +0 -1
- package/lib/RadioGroup.d.ts +0 -1
- package/lib/components/Radio/Radio.d.ts +0 -6
- package/lib/components/Radio/Radio.types.d.ts +0 -69
- package/lib/components/Radio/index.d.ts +0 -5
- package/lib/components/Radio/renderRadio.d.ts +0 -5
- package/lib/components/Radio/useRadio.d.ts +0 -12
- package/lib/components/Radio/useRadioStyles.d.ts +0 -11
- package/lib/components/RadioGroup/RadioGroup.d.ts +0 -6
- package/lib/components/RadioGroup/RadioGroup.types.d.ts +0 -63
- package/lib/components/RadioGroup/index.d.ts +0 -5
- package/lib/components/RadioGroup/renderRadioGroup.d.ts +0 -5
- package/lib/components/RadioGroup/useRadioGroup.d.ts +0 -12
- package/lib/components/RadioGroup/useRadioGroupStyles.d.ts +0 -11
- package/lib/contexts/RadioGroupContext.d.ts +0 -6
- package/lib/contexts/index.d.ts +0 -2
- package/lib/contexts/useRadioGroupContextValues.d.ts +0 -2
- package/lib/index.d.ts +0 -5
- package/lib-commonjs/Radio.d.ts +0 -1
- package/lib-commonjs/RadioGroup.d.ts +0 -1
- package/lib-commonjs/components/Radio/Radio.d.ts +0 -6
- package/lib-commonjs/components/Radio/Radio.types.d.ts +0 -69
- package/lib-commonjs/components/Radio/index.d.ts +0 -5
- package/lib-commonjs/components/Radio/renderRadio.d.ts +0 -5
- package/lib-commonjs/components/Radio/useRadio.d.ts +0 -12
- package/lib-commonjs/components/Radio/useRadioStyles.d.ts +0 -11
- package/lib-commonjs/components/RadioGroup/RadioGroup.d.ts +0 -6
- package/lib-commonjs/components/RadioGroup/RadioGroup.types.d.ts +0 -63
- package/lib-commonjs/components/RadioGroup/index.d.ts +0 -5
- package/lib-commonjs/components/RadioGroup/renderRadioGroup.d.ts +0 -5
- package/lib-commonjs/components/RadioGroup/useRadioGroup.d.ts +0 -12
- package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.d.ts +0 -11
- package/lib-commonjs/contexts/RadioGroupContext.d.ts +0 -6
- package/lib-commonjs/contexts/index.d.ts +0 -2
- package/lib-commonjs/contexts/useRadioGroupContextValues.d.ts +0 -2
- package/lib-commonjs/index.d.ts +0 -5
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,88 @@
|
|
|
2
2
|
"name": "@fluentui/react-radio",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 23 May 2022 12:10:01 GMT",
|
|
6
|
+
"tag": "@fluentui/react-radio_v9.0.0-rc.3",
|
|
7
|
+
"version": "9.0.0-rc.3",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "martinhochel@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-radio",
|
|
13
|
+
"commit": "eb1084fd607c0d1086f9d465168be5822daa5e40",
|
|
14
|
+
"comment": "feat: ship rolluped only dts"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "olfedias@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-radio",
|
|
19
|
+
"commit": "60804cec07a495b8a5d1fc66338bf0443b212144",
|
|
20
|
+
"comment": "chore: Update Griffel to latest version"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "behowell@microsoft.com",
|
|
24
|
+
"package": "@fluentui/react-radio",
|
|
25
|
+
"commit": "c0b27cce0d29122e4488ff431689b966076a728b",
|
|
26
|
+
"comment": "Replace hardcoded padding with spacing tokens"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "olfedias@microsoft.com",
|
|
30
|
+
"package": "@fluentui/react-radio",
|
|
31
|
+
"commit": "f120fe9160ad7311a87af0cfacd8d2fb26275e34",
|
|
32
|
+
"comment": "chore: Update Griffel to latest version"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "behowell@microsoft.com",
|
|
36
|
+
"package": "@fluentui/react-radio",
|
|
37
|
+
"commit": "2ea15d322e01dc6055378f4f0f5f3febf7910f80",
|
|
38
|
+
"comment": "Refactor styles to remove usage of flex gap"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "esteban.230@hotmail.com",
|
|
42
|
+
"package": "@fluentui/react-radio",
|
|
43
|
+
"commit": "0fac2d7a6f35c5fcebaf30da68b9604410fe0eb9",
|
|
44
|
+
"comment": "Updated react-label package version to RC."
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-radio",
|
|
49
|
+
"comment": "Bump @fluentui/react-context-selector to v9.0.0-rc.9",
|
|
50
|
+
"commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "beachball",
|
|
54
|
+
"package": "@fluentui/react-radio",
|
|
55
|
+
"comment": "Bump @fluentui/react-label to v9.0.0-rc.2",
|
|
56
|
+
"commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"author": "beachball",
|
|
60
|
+
"package": "@fluentui/react-radio",
|
|
61
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.10",
|
|
62
|
+
"commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"author": "beachball",
|
|
66
|
+
"package": "@fluentui/react-radio",
|
|
67
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.8",
|
|
68
|
+
"commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"author": "beachball",
|
|
72
|
+
"package": "@fluentui/react-radio",
|
|
73
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.9",
|
|
74
|
+
"commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"author": "beachball",
|
|
78
|
+
"package": "@fluentui/react-radio",
|
|
79
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6",
|
|
80
|
+
"commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
|
|
81
|
+
}
|
|
82
|
+
]
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"date": "Thu, 05 May 2022 18:26:25 GMT",
|
|
6
87
|
"tag": "@fluentui/react-radio_v9.0.0-rc.2",
|
|
7
88
|
"version": "9.0.0-rc.2",
|
|
8
89
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,32 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-radio
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 23 May 2022 12:10:01 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-rc.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-rc.3)
|
|
8
|
+
|
|
9
|
+
Mon, 23 May 2022 12:10:01 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-rc.2..@fluentui/react-radio_v9.0.0-rc.3)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- feat: ship rolluped only dts ([PR #22874](https://github.com/microsoft/fluentui/pull/22874) by martinhochel@microsoft.com)
|
|
15
|
+
- chore: Update Griffel to latest version ([PR #23029](https://github.com/microsoft/fluentui/pull/23029) by olfedias@microsoft.com)
|
|
16
|
+
- Replace hardcoded padding with spacing tokens ([PR #22982](https://github.com/microsoft/fluentui/pull/22982) by behowell@microsoft.com)
|
|
17
|
+
- chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
|
|
18
|
+
- Refactor styles to remove usage of flex gap ([PR #22975](https://github.com/microsoft/fluentui/pull/22975) by behowell@microsoft.com)
|
|
19
|
+
- Updated react-label package version to RC. ([PR #22865](https://github.com/microsoft/fluentui/pull/22865) by esteban.230@hotmail.com)
|
|
20
|
+
- Bump @fluentui/react-context-selector to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
21
|
+
- Bump @fluentui/react-label to v9.0.0-rc.2 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
22
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.10 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
23
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
24
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
25
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
26
|
+
|
|
7
27
|
## [9.0.0-rc.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-rc.2)
|
|
8
28
|
|
|
9
|
-
Thu, 05 May 2022 18:
|
|
29
|
+
Thu, 05 May 2022 18:26:25 GMT
|
|
10
30
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-beta.5..@fluentui/react-radio_v9.0.0-rc.2)
|
|
11
31
|
|
|
12
32
|
### Changes
|
|
File without changes
|
|
@@ -11,10 +11,7 @@ export const radioClassNames = {
|
|
|
11
11
|
indicator: 'fui-Radio__indicator',
|
|
12
12
|
input: 'fui-Radio__input',
|
|
13
13
|
label: 'fui-Radio__label'
|
|
14
|
-
}; //
|
|
15
|
-
|
|
16
|
-
const spacingHorizontalS = '8px';
|
|
17
|
-
const spacingHorizontalM = '12px'; // The indicator size is used by the indicator and label styles
|
|
14
|
+
}; // The indicator size is used by the indicator and label styles
|
|
18
15
|
|
|
19
16
|
const indicatorSize = '16px';
|
|
20
17
|
/**
|
|
@@ -25,16 +22,14 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
25
22
|
"base": {
|
|
26
23
|
"mc9l5x": "ftuwxu6",
|
|
27
24
|
"qhf8xq": "f10pi13n",
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"uwmqm3": ["f177v4lu", "f19lj068"]
|
|
25
|
+
"z8tnut": "f1kwiid1",
|
|
26
|
+
"z189sj": ["f1vdfbxk", "f1f5gg8d"],
|
|
27
|
+
"Byoj8tv": "f5b47ha",
|
|
28
|
+
"uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
|
|
33
29
|
},
|
|
34
30
|
"vertical": {
|
|
35
31
|
"Beiy3e4": "f1vx9l62",
|
|
36
|
-
"Bt984gj": "f122n59"
|
|
37
|
-
"Belr9w4": "fe5j3v"
|
|
32
|
+
"Bt984gj": "f122n59"
|
|
38
33
|
},
|
|
39
34
|
"focusIndicator": {
|
|
40
35
|
"B486eqv": "f2hkw1w",
|
|
@@ -68,7 +63,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
68
63
|
"Bj23z95": ["f8l10fm", "fxfgh6q"]
|
|
69
64
|
}
|
|
70
65
|
}, {
|
|
71
|
-
"d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".
|
|
66
|
+
"d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f1kbdjx9:focus-within:after{border-top-style:solid;}", "[data-keyboard-nav] .fw1d893:focus-within:after{border-right-style:solid;}", "[data-keyboard-nav] .fpuz8dn:focus-within:after{border-left-style:solid;}", "[data-keyboard-nav] .f14hlsw1:focus-within:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f1bkt4b4:focus-within:after{border-top-width:2px;}", "[data-keyboard-nav] .f16hf5f2:focus-within:after{border-right-width:2px;}", "[data-keyboard-nav] .f1qhqcal:focus-within:after{border-left-width:2px;}", "[data-keyboard-nav] .fyyqeim:focus-within:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1aneyfs:focus-within:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f15nmyc0:focus-within:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f3cpy5b:focus-within:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f13v6kgv:focus-within:after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .filx0we:focus-within:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1horip2:focus-within:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgnx9ah:focus-within:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fkii2tb:focus-within:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}"],
|
|
72
67
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
73
68
|
});
|
|
74
69
|
|
|
@@ -163,17 +158,19 @@ const useIndicatorStyles = /*#__PURE__*/__styles({
|
|
|
163
158
|
const useLabelStyles = /*#__PURE__*/__styles({
|
|
164
159
|
"base": {
|
|
165
160
|
"qb2dma": "f7nlbp4",
|
|
166
|
-
"famaaq": "f1xqy1su"
|
|
161
|
+
"famaaq": "f1xqy1su"
|
|
162
|
+
},
|
|
163
|
+
"after": {
|
|
164
|
+
"Frg6f3": ["f199hnxi", "fkujibs"],
|
|
167
165
|
"B6of3ja": "fjzwpt6",
|
|
168
|
-
"
|
|
169
|
-
"jrapky": "fh6j2fo",
|
|
170
|
-
"Frg6f3": ["f1tyq0we", "f11qmguv"]
|
|
166
|
+
"jrapky": "fh6j2fo"
|
|
171
167
|
},
|
|
172
168
|
"below": {
|
|
169
|
+
"B6of3ja": "f1mevb6",
|
|
173
170
|
"fsow6f": "f17mccla"
|
|
174
171
|
}
|
|
175
172
|
}, {
|
|
176
|
-
"d": [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".
|
|
173
|
+
"d": [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}", ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}", ".f1mevb6{margin-top:var(--spacingVerticalM);}", ".f17mccla{text-align:center;}"]
|
|
177
174
|
});
|
|
178
175
|
/**
|
|
179
176
|
* Apply styling to the Radio slots based on the state
|
|
@@ -190,7 +187,7 @@ export const useRadioStyles_unstable = state => {
|
|
|
190
187
|
const labelStyles = useLabelStyles();
|
|
191
188
|
|
|
192
189
|
if (state.label) {
|
|
193
|
-
state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, state.labelPosition
|
|
190
|
+
state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, labelStyles[state.labelPosition], state.label.className);
|
|
194
191
|
}
|
|
195
192
|
};
|
|
196
193
|
//# 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;AAIA;;AAEG;;AACH,OAAO,MAAM,cAAc,GAAG,WAAvB;AACP,OAAO,MAAM,eAAe,GAA+B;AACzD,EAAA,IAAI,EAAE,WADmD;AAEzD,EAAA,SAAS,EAAE,sBAF8C;AAGzD,EAAA,KAAK,EAAE,kBAHkD;AAIzD,EAAA,KAAK,EAAE;AAJkD,CAApD,C,CAOP;;AACA,MAAM,
|
|
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// 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 ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\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\n after: {\n marginLeft: tokens.spacingHorizontalM,\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 marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n },\n\n below: {\n marginTop: tokens.spacingVerticalM,\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 labelStyles[state.labelPosition],\n state.label.className,\n );\n }\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -21,10 +21,7 @@ exports.radioClassNames = {
|
|
|
21
21
|
indicator: 'fui-Radio__indicator',
|
|
22
22
|
input: 'fui-Radio__input',
|
|
23
23
|
label: 'fui-Radio__label'
|
|
24
|
-
}; //
|
|
25
|
-
|
|
26
|
-
const spacingHorizontalS = '8px';
|
|
27
|
-
const spacingHorizontalM = '12px'; // The indicator size is used by the indicator and label styles
|
|
24
|
+
}; // The indicator size is used by the indicator and label styles
|
|
28
25
|
|
|
29
26
|
const indicatorSize = '16px';
|
|
30
27
|
/**
|
|
@@ -35,16 +32,14 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
35
32
|
"base": {
|
|
36
33
|
"mc9l5x": "ftuwxu6",
|
|
37
34
|
"qhf8xq": "f10pi13n",
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"uwmqm3": ["f177v4lu", "f19lj068"]
|
|
35
|
+
"z8tnut": "f1kwiid1",
|
|
36
|
+
"z189sj": ["f1vdfbxk", "f1f5gg8d"],
|
|
37
|
+
"Byoj8tv": "f5b47ha",
|
|
38
|
+
"uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
|
|
43
39
|
},
|
|
44
40
|
"vertical": {
|
|
45
41
|
"Beiy3e4": "f1vx9l62",
|
|
46
|
-
"Bt984gj": "f122n59"
|
|
47
|
-
"Belr9w4": "fe5j3v"
|
|
42
|
+
"Bt984gj": "f122n59"
|
|
48
43
|
},
|
|
49
44
|
"focusIndicator": {
|
|
50
45
|
"B486eqv": "f2hkw1w",
|
|
@@ -78,7 +73,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
78
73
|
"Bj23z95": ["f8l10fm", "fxfgh6q"]
|
|
79
74
|
}
|
|
80
75
|
}, {
|
|
81
|
-
"d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".
|
|
76
|
+
"d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f1kbdjx9:focus-within:after{border-top-style:solid;}", "[data-keyboard-nav] .fw1d893:focus-within:after{border-right-style:solid;}", "[data-keyboard-nav] .fpuz8dn:focus-within:after{border-left-style:solid;}", "[data-keyboard-nav] .f14hlsw1:focus-within:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f1bkt4b4:focus-within:after{border-top-width:2px;}", "[data-keyboard-nav] .f16hf5f2:focus-within:after{border-right-width:2px;}", "[data-keyboard-nav] .f1qhqcal:focus-within:after{border-left-width:2px;}", "[data-keyboard-nav] .fyyqeim:focus-within:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1aneyfs:focus-within:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f15nmyc0:focus-within:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f3cpy5b:focus-within:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f13v6kgv:focus-within:after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .filx0we:focus-within:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1horip2:focus-within:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgnx9ah:focus-within:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fkii2tb:focus-within:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}"],
|
|
82
77
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
83
78
|
});
|
|
84
79
|
|
|
@@ -173,17 +168,19 @@ const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
|
|
|
173
168
|
const useLabelStyles = /*#__PURE__*/react_1.__styles({
|
|
174
169
|
"base": {
|
|
175
170
|
"qb2dma": "f7nlbp4",
|
|
176
|
-
"famaaq": "f1xqy1su"
|
|
171
|
+
"famaaq": "f1xqy1su"
|
|
172
|
+
},
|
|
173
|
+
"after": {
|
|
174
|
+
"Frg6f3": ["f199hnxi", "fkujibs"],
|
|
177
175
|
"B6of3ja": "fjzwpt6",
|
|
178
|
-
"
|
|
179
|
-
"jrapky": "fh6j2fo",
|
|
180
|
-
"Frg6f3": ["f1tyq0we", "f11qmguv"]
|
|
176
|
+
"jrapky": "fh6j2fo"
|
|
181
177
|
},
|
|
182
178
|
"below": {
|
|
179
|
+
"B6of3ja": "f1mevb6",
|
|
183
180
|
"fsow6f": "f17mccla"
|
|
184
181
|
}
|
|
185
182
|
}, {
|
|
186
|
-
"d": [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".
|
|
183
|
+
"d": [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}", ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}", ".f1mevb6{margin-top:var(--spacingVerticalM);}", ".f17mccla{text-align:center;}"]
|
|
187
184
|
});
|
|
188
185
|
/**
|
|
189
186
|
* Apply styling to the Radio slots based on the state
|
|
@@ -200,7 +197,7 @@ const useRadioStyles_unstable = state => {
|
|
|
200
197
|
const labelStyles = useLabelStyles();
|
|
201
198
|
|
|
202
199
|
if (state.label) {
|
|
203
|
-
state.label.className = react_1.mergeClasses(exports.radioClassNames.label, labelStyles.base, state.labelPosition
|
|
200
|
+
state.label.className = react_1.mergeClasses(exports.radioClassNames.label, labelStyles.base, labelStyles[state.labelPosition], state.label.className);
|
|
204
201
|
}
|
|
205
202
|
};
|
|
206
203
|
|
|
@@ -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;AAIA;;AAEG;;;AACU,OAAA,CAAA,cAAA,GAAiB,WAAjB;AACA,OAAA,CAAA,eAAA,GAA8C;AACzD,EAAA,IAAI,EAAE,WADmD;AAEzD,EAAA,SAAS,EAAE,sBAF8C;AAGzD,EAAA,KAAK,EAAE,kBAHkD;AAIzD,EAAA,KAAK,EAAE;AAJkD,CAA9C,C,CAOb;;AACA,MAAM,
|
|
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// 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 ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\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\n after: {\n marginLeft: tokens.spacingHorizontalM,\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 marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n },\n\n below: {\n marginTop: tokens.spacingVerticalM,\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 labelStyles[state.labelPosition],\n state.label.className,\n );\n }\n};\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-radio",
|
|
3
|
-
"version": "9.0.0-rc.
|
|
3
|
+
"version": "9.0.0-rc.3",
|
|
4
4
|
"description": "Fluent UI Radio component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
7
|
-
"typings": "
|
|
7
|
+
"typings": "dist/index.d.ts",
|
|
8
8
|
"sideEffects": false,
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
@@ -28,16 +28,16 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.6"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@fluentui/react-context-selector": "9.0.0-rc.
|
|
34
|
+
"@fluentui/react-context-selector": "9.0.0-rc.9",
|
|
35
35
|
"@fluentui/react-icons": "^2.0.166-rc.3",
|
|
36
|
-
"@fluentui/react-label": "9.0.0-
|
|
37
|
-
"@fluentui/react-tabster": "9.0.0-rc.
|
|
38
|
-
"@fluentui/react-theme": "9.0.0-rc.
|
|
39
|
-
"@fluentui/react-utilities": "9.0.0-rc.
|
|
40
|
-
"@griffel/react": "1.0.
|
|
36
|
+
"@fluentui/react-label": "9.0.0-rc.2",
|
|
37
|
+
"@fluentui/react-tabster": "9.0.0-rc.10",
|
|
38
|
+
"@fluentui/react-theme": "9.0.0-rc.8",
|
|
39
|
+
"@fluentui/react-utilities": "9.0.0-rc.9",
|
|
40
|
+
"@griffel/react": "1.0.5",
|
|
41
41
|
"tslib": "^2.1.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
package/lib/Radio.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './components/Radio/index';
|
package/lib/RadioGroup.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './components/RadioGroup/index';
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { Label } from '@fluentui/react-label';
|
|
3
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
4
|
-
export declare type RadioSlots = {
|
|
5
|
-
/**
|
|
6
|
-
* The root element of the Radio.
|
|
7
|
-
*
|
|
8
|
-
* The root slot receives the `className` and `style` specified directly on the `<Radio>`.
|
|
9
|
-
* All other native props will be applied to the primary slot: `input`
|
|
10
|
-
*/
|
|
11
|
-
root: NonNullable<Slot<'span'>>;
|
|
12
|
-
/**
|
|
13
|
-
* The Radio's label.
|
|
14
|
-
*/
|
|
15
|
-
label: Slot<typeof Label>;
|
|
16
|
-
/**
|
|
17
|
-
* Hidden input that handles the radio's functionality.
|
|
18
|
-
*
|
|
19
|
-
* This is the PRIMARY slot: all native properties specified directly on `<Radio>` will be applied to this slot,
|
|
20
|
-
* except `className` and `style`, which remain on the root slot.
|
|
21
|
-
*/
|
|
22
|
-
input: NonNullable<Slot<'input'>>;
|
|
23
|
-
/**
|
|
24
|
-
* A circle outline, with a filled circle icon inside when the Radio is checked.
|
|
25
|
-
*/
|
|
26
|
-
indicator: NonNullable<Slot<'div'>>;
|
|
27
|
-
};
|
|
28
|
-
/**
|
|
29
|
-
* Radio Props
|
|
30
|
-
*/
|
|
31
|
-
export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'onChange' | 'size'> & {
|
|
32
|
-
/**
|
|
33
|
-
* The value of the RadioGroup when this Radio item is selected.
|
|
34
|
-
*/
|
|
35
|
-
value?: string;
|
|
36
|
-
/**
|
|
37
|
-
* The position of the label relative to the radio indicator.
|
|
38
|
-
*
|
|
39
|
-
* This defaults to `after` unless the Radio is inside a RadioGroup with `layout="horizontalStacked"`,
|
|
40
|
-
* in which case it defaults to `below`.
|
|
41
|
-
*
|
|
42
|
-
* @defaultvalue after
|
|
43
|
-
*/
|
|
44
|
-
labelPosition?: 'after' | 'below';
|
|
45
|
-
/**
|
|
46
|
-
* Disable this Radio item.
|
|
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;
|
|
65
|
-
};
|
|
66
|
-
/**
|
|
67
|
-
* State used in rendering Radio
|
|
68
|
-
*/
|
|
69
|
-
export declare type RadioState = ComponentState<RadioSlots> & Required<Pick<RadioProps, 'labelPosition'>>;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { RadioProps, RadioState } from './Radio.types';
|
|
3
|
-
/**
|
|
4
|
-
* Create the state required to render Radio.
|
|
5
|
-
*
|
|
6
|
-
* The returned state can be modified with hooks such as useRadioStyles_unstable,
|
|
7
|
-
* before being passed to renderRadio_unstable.
|
|
8
|
-
*
|
|
9
|
-
* @param props - props from this instance of Radio
|
|
10
|
-
* @param ref - reference to `<input>` element of Radio
|
|
11
|
-
*/
|
|
12
|
-
export declare const useRadio_unstable: (props: RadioProps, ref: React.Ref<HTMLInputElement>) => RadioState;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { RadioSlots, RadioState } from './Radio.types';
|
|
2
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated Use `radioClassNames.root` instead.
|
|
5
|
-
*/
|
|
6
|
-
export declare const radioClassName = "fui-Radio";
|
|
7
|
-
export declare const radioClassNames: SlotClassNames<RadioSlots>;
|
|
8
|
-
/**
|
|
9
|
-
* Apply styling to the Radio slots based on the state
|
|
10
|
-
*/
|
|
11
|
-
export declare const useRadioStyles_unstable: (state: RadioState) => void;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
2
|
-
import { RadioGroupProps } from './RadioGroup.types';
|
|
3
|
-
/**
|
|
4
|
-
* A RadioGroup component presents a set of options where only one option can be selected.
|
|
5
|
-
*/
|
|
6
|
-
export declare const RadioGroup: ForwardRefComponent<RadioGroupProps>;
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
3
|
-
export declare type RadioGroupSlots = {
|
|
4
|
-
/**
|
|
5
|
-
* The radio group root.
|
|
6
|
-
*/
|
|
7
|
-
root: NonNullable<Slot<'div'>>;
|
|
8
|
-
};
|
|
9
|
-
export declare type RadioGroupProps = Omit<ComponentProps<Partial<RadioGroupSlots>>, 'onChange'> & {
|
|
10
|
-
/**
|
|
11
|
-
* The name of this radio group. This name is applied to all Radio items inside this group.
|
|
12
|
-
*
|
|
13
|
-
* If no name is provided, one will be generated so that all of the Radio items have the same name.
|
|
14
|
-
*/
|
|
15
|
-
name?: string;
|
|
16
|
-
/**
|
|
17
|
-
* The selected Radio item in this group.
|
|
18
|
-
*
|
|
19
|
-
* This should be the `value` prop of one of the Radio items inside this group.
|
|
20
|
-
*/
|
|
21
|
-
value?: string;
|
|
22
|
-
/**
|
|
23
|
-
* The default selected Radio item in this group.
|
|
24
|
-
*
|
|
25
|
-
* This should be the `value` prop of one of the Radio items inside this group.
|
|
26
|
-
*/
|
|
27
|
-
defaultValue?: string;
|
|
28
|
-
/**
|
|
29
|
-
* Callback when the selected Radio item changes.
|
|
30
|
-
*/
|
|
31
|
-
onChange?: (ev: React.FormEvent<HTMLDivElement>, data: RadioGroupOnChangeData) => void;
|
|
32
|
-
/**
|
|
33
|
-
* How the radio items are laid out in the group.
|
|
34
|
-
*
|
|
35
|
-
* @default vertical
|
|
36
|
-
*/
|
|
37
|
-
layout?: 'vertical' | 'horizontal' | 'horizontalStacked';
|
|
38
|
-
/**
|
|
39
|
-
* Disable all Radio items in this group.
|
|
40
|
-
*/
|
|
41
|
-
disabled?: boolean;
|
|
42
|
-
/**
|
|
43
|
-
* Require all Radio items in this group.
|
|
44
|
-
*/
|
|
45
|
-
required?: boolean;
|
|
46
|
-
};
|
|
47
|
-
/**
|
|
48
|
-
* Data for the onChange event for RadioGroup.
|
|
49
|
-
*/
|
|
50
|
-
export declare type RadioGroupOnChangeData = {
|
|
51
|
-
/**
|
|
52
|
-
* The value of the newly selected Radio item.
|
|
53
|
-
*/
|
|
54
|
-
value: string;
|
|
55
|
-
};
|
|
56
|
-
/**
|
|
57
|
-
* State used in rendering RadioGroup
|
|
58
|
-
*/
|
|
59
|
-
export declare type RadioGroupState = ComponentState<RadioGroupSlots> & Required<Pick<RadioGroupProps, 'layout'>> & Partial<Exclude<RadioGroupProps, 'onChange' | 'layout'>>;
|
|
60
|
-
export declare type RadioGroupContextValue = Pick<RadioGroupProps, 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required'>;
|
|
61
|
-
export declare type RadioGroupContextValues = {
|
|
62
|
-
radioGroup: RadioGroupContextValue;
|
|
63
|
-
};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { RadioGroupProps, RadioGroupState } from './RadioGroup.types';
|
|
3
|
-
/**
|
|
4
|
-
* Create the state required to render RadioGroup.
|
|
5
|
-
*
|
|
6
|
-
* The returned state can be modified with hooks such as useRadioGroupStyles_unstable,
|
|
7
|
-
* before being passed to renderRadioGroup_unstable.
|
|
8
|
-
*
|
|
9
|
-
* @param props - props from this instance of RadioGroup
|
|
10
|
-
* @param ref - reference to root HTMLElement of RadioGroup
|
|
11
|
-
*/
|
|
12
|
-
export declare const useRadioGroup_unstable: (props: RadioGroupProps, ref: React.Ref<HTMLDivElement>) => RadioGroupState;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';
|
|
2
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated Use `radioGroupClassNames.root` instead.
|
|
5
|
-
*/
|
|
6
|
-
export declare const radioGroupClassName = "fui-RadioGroup";
|
|
7
|
-
export declare const radioGroupClassNames: SlotClassNames<RadioGroupSlots>;
|
|
8
|
-
/**
|
|
9
|
-
* Apply styling to the RadioGroup slots based on the state
|
|
10
|
-
*/
|
|
11
|
-
export declare const useRadioGroupStyles_unstable: (state: RadioGroupState) => void;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { Context } from '@fluentui/react-context-selector';
|
|
2
|
-
import type { RadioGroupContextValue } from '../RadioGroup';
|
|
3
|
-
/**
|
|
4
|
-
* RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.
|
|
5
|
-
*/
|
|
6
|
-
export declare const RadioGroupContext: Context<RadioGroupContextValue>;
|
package/lib/contexts/index.d.ts
DELETED
package/lib/index.d.ts
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
export { RadioGroup, radioGroupClassName, radioGroupClassNames, renderRadioGroup_unstable, useRadioGroupStyles_unstable, useRadioGroup_unstable, } from './RadioGroup';
|
|
2
|
-
export type { RadioGroupContextValue, RadioGroupContextValues, 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, useRadioGroupContextValues } from './contexts/index';
|
package/lib-commonjs/Radio.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './components/Radio/index';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './components/RadioGroup/index';
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { Label } from '@fluentui/react-label';
|
|
3
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
4
|
-
export declare type RadioSlots = {
|
|
5
|
-
/**
|
|
6
|
-
* The root element of the Radio.
|
|
7
|
-
*
|
|
8
|
-
* The root slot receives the `className` and `style` specified directly on the `<Radio>`.
|
|
9
|
-
* All other native props will be applied to the primary slot: `input`
|
|
10
|
-
*/
|
|
11
|
-
root: NonNullable<Slot<'span'>>;
|
|
12
|
-
/**
|
|
13
|
-
* The Radio's label.
|
|
14
|
-
*/
|
|
15
|
-
label: Slot<typeof Label>;
|
|
16
|
-
/**
|
|
17
|
-
* Hidden input that handles the radio's functionality.
|
|
18
|
-
*
|
|
19
|
-
* This is the PRIMARY slot: all native properties specified directly on `<Radio>` will be applied to this slot,
|
|
20
|
-
* except `className` and `style`, which remain on the root slot.
|
|
21
|
-
*/
|
|
22
|
-
input: NonNullable<Slot<'input'>>;
|
|
23
|
-
/**
|
|
24
|
-
* A circle outline, with a filled circle icon inside when the Radio is checked.
|
|
25
|
-
*/
|
|
26
|
-
indicator: NonNullable<Slot<'div'>>;
|
|
27
|
-
};
|
|
28
|
-
/**
|
|
29
|
-
* Radio Props
|
|
30
|
-
*/
|
|
31
|
-
export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'onChange' | 'size'> & {
|
|
32
|
-
/**
|
|
33
|
-
* The value of the RadioGroup when this Radio item is selected.
|
|
34
|
-
*/
|
|
35
|
-
value?: string;
|
|
36
|
-
/**
|
|
37
|
-
* The position of the label relative to the radio indicator.
|
|
38
|
-
*
|
|
39
|
-
* This defaults to `after` unless the Radio is inside a RadioGroup with `layout="horizontalStacked"`,
|
|
40
|
-
* in which case it defaults to `below`.
|
|
41
|
-
*
|
|
42
|
-
* @defaultvalue after
|
|
43
|
-
*/
|
|
44
|
-
labelPosition?: 'after' | 'below';
|
|
45
|
-
/**
|
|
46
|
-
* Disable this Radio item.
|
|
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;
|
|
65
|
-
};
|
|
66
|
-
/**
|
|
67
|
-
* State used in rendering Radio
|
|
68
|
-
*/
|
|
69
|
-
export declare type RadioState = ComponentState<RadioSlots> & Required<Pick<RadioProps, 'labelPosition'>>;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { RadioProps, RadioState } from './Radio.types';
|
|
3
|
-
/**
|
|
4
|
-
* Create the state required to render Radio.
|
|
5
|
-
*
|
|
6
|
-
* The returned state can be modified with hooks such as useRadioStyles_unstable,
|
|
7
|
-
* before being passed to renderRadio_unstable.
|
|
8
|
-
*
|
|
9
|
-
* @param props - props from this instance of Radio
|
|
10
|
-
* @param ref - reference to `<input>` element of Radio
|
|
11
|
-
*/
|
|
12
|
-
export declare const useRadio_unstable: (props: RadioProps, ref: React.Ref<HTMLInputElement>) => RadioState;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { RadioSlots, RadioState } from './Radio.types';
|
|
2
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated Use `radioClassNames.root` instead.
|
|
5
|
-
*/
|
|
6
|
-
export declare const radioClassName = "fui-Radio";
|
|
7
|
-
export declare const radioClassNames: SlotClassNames<RadioSlots>;
|
|
8
|
-
/**
|
|
9
|
-
* Apply styling to the Radio slots based on the state
|
|
10
|
-
*/
|
|
11
|
-
export declare const useRadioStyles_unstable: (state: RadioState) => void;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
2
|
-
import { RadioGroupProps } from './RadioGroup.types';
|
|
3
|
-
/**
|
|
4
|
-
* A RadioGroup component presents a set of options where only one option can be selected.
|
|
5
|
-
*/
|
|
6
|
-
export declare const RadioGroup: ForwardRefComponent<RadioGroupProps>;
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
3
|
-
export declare type RadioGroupSlots = {
|
|
4
|
-
/**
|
|
5
|
-
* The radio group root.
|
|
6
|
-
*/
|
|
7
|
-
root: NonNullable<Slot<'div'>>;
|
|
8
|
-
};
|
|
9
|
-
export declare type RadioGroupProps = Omit<ComponentProps<Partial<RadioGroupSlots>>, 'onChange'> & {
|
|
10
|
-
/**
|
|
11
|
-
* The name of this radio group. This name is applied to all Radio items inside this group.
|
|
12
|
-
*
|
|
13
|
-
* If no name is provided, one will be generated so that all of the Radio items have the same name.
|
|
14
|
-
*/
|
|
15
|
-
name?: string;
|
|
16
|
-
/**
|
|
17
|
-
* The selected Radio item in this group.
|
|
18
|
-
*
|
|
19
|
-
* This should be the `value` prop of one of the Radio items inside this group.
|
|
20
|
-
*/
|
|
21
|
-
value?: string;
|
|
22
|
-
/**
|
|
23
|
-
* The default selected Radio item in this group.
|
|
24
|
-
*
|
|
25
|
-
* This should be the `value` prop of one of the Radio items inside this group.
|
|
26
|
-
*/
|
|
27
|
-
defaultValue?: string;
|
|
28
|
-
/**
|
|
29
|
-
* Callback when the selected Radio item changes.
|
|
30
|
-
*/
|
|
31
|
-
onChange?: (ev: React.FormEvent<HTMLDivElement>, data: RadioGroupOnChangeData) => void;
|
|
32
|
-
/**
|
|
33
|
-
* How the radio items are laid out in the group.
|
|
34
|
-
*
|
|
35
|
-
* @default vertical
|
|
36
|
-
*/
|
|
37
|
-
layout?: 'vertical' | 'horizontal' | 'horizontalStacked';
|
|
38
|
-
/**
|
|
39
|
-
* Disable all Radio items in this group.
|
|
40
|
-
*/
|
|
41
|
-
disabled?: boolean;
|
|
42
|
-
/**
|
|
43
|
-
* Require all Radio items in this group.
|
|
44
|
-
*/
|
|
45
|
-
required?: boolean;
|
|
46
|
-
};
|
|
47
|
-
/**
|
|
48
|
-
* Data for the onChange event for RadioGroup.
|
|
49
|
-
*/
|
|
50
|
-
export declare type RadioGroupOnChangeData = {
|
|
51
|
-
/**
|
|
52
|
-
* The value of the newly selected Radio item.
|
|
53
|
-
*/
|
|
54
|
-
value: string;
|
|
55
|
-
};
|
|
56
|
-
/**
|
|
57
|
-
* State used in rendering RadioGroup
|
|
58
|
-
*/
|
|
59
|
-
export declare type RadioGroupState = ComponentState<RadioGroupSlots> & Required<Pick<RadioGroupProps, 'layout'>> & Partial<Exclude<RadioGroupProps, 'onChange' | 'layout'>>;
|
|
60
|
-
export declare type RadioGroupContextValue = Pick<RadioGroupProps, 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required'>;
|
|
61
|
-
export declare type RadioGroupContextValues = {
|
|
62
|
-
radioGroup: RadioGroupContextValue;
|
|
63
|
-
};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { RadioGroupProps, RadioGroupState } from './RadioGroup.types';
|
|
3
|
-
/**
|
|
4
|
-
* Create the state required to render RadioGroup.
|
|
5
|
-
*
|
|
6
|
-
* The returned state can be modified with hooks such as useRadioGroupStyles_unstable,
|
|
7
|
-
* before being passed to renderRadioGroup_unstable.
|
|
8
|
-
*
|
|
9
|
-
* @param props - props from this instance of RadioGroup
|
|
10
|
-
* @param ref - reference to root HTMLElement of RadioGroup
|
|
11
|
-
*/
|
|
12
|
-
export declare const useRadioGroup_unstable: (props: RadioGroupProps, ref: React.Ref<HTMLDivElement>) => RadioGroupState;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';
|
|
2
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated Use `radioGroupClassNames.root` instead.
|
|
5
|
-
*/
|
|
6
|
-
export declare const radioGroupClassName = "fui-RadioGroup";
|
|
7
|
-
export declare const radioGroupClassNames: SlotClassNames<RadioGroupSlots>;
|
|
8
|
-
/**
|
|
9
|
-
* Apply styling to the RadioGroup slots based on the state
|
|
10
|
-
*/
|
|
11
|
-
export declare const useRadioGroupStyles_unstable: (state: RadioGroupState) => void;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { Context } from '@fluentui/react-context-selector';
|
|
2
|
-
import type { RadioGroupContextValue } from '../RadioGroup';
|
|
3
|
-
/**
|
|
4
|
-
* RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.
|
|
5
|
-
*/
|
|
6
|
-
export declare const RadioGroupContext: Context<RadioGroupContextValue>;
|
package/lib-commonjs/index.d.ts
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
export { RadioGroup, radioGroupClassName, radioGroupClassNames, renderRadioGroup_unstable, useRadioGroupStyles_unstable, useRadioGroup_unstable, } from './RadioGroup';
|
|
2
|
-
export type { RadioGroupContextValue, RadioGroupContextValues, 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, useRadioGroupContextValues } from './contexts/index';
|