@fluentui/react-radio 0.0.0-nightly-20220510-0420.1 → 0.0.0-nightly-20220513-0417.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +18 -30
- package/CHANGELOG.md +9 -11
- package/{lib → dist}/tsdoc-metadata.json +0 -0
- package/lib/components/Radio/useRadioStyles.js +10 -10
- package/lib/components/Radio/useRadioStyles.js.map +1 -1
- package/lib-commonjs/components/Radio/useRadioStyles.js +10 -10
- package/lib-commonjs/components/Radio/useRadioStyles.js.map +1 -1
- package/package.json +8 -8
- 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,58 +2,46 @@
|
|
|
2
2
|
"name": "@fluentui/react-radio",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-radio_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Fri, 13 May 2022 04:27:01 GMT",
|
|
6
|
+
"tag": "@fluentui/react-radio_v0.0.0-nightly-20220513-0417.1",
|
|
7
|
+
"version": "0.0.0-nightly-20220513-0417.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
11
|
-
"author": "
|
|
11
|
+
"author": "martinhochel@microsoft.com",
|
|
12
12
|
"package": "@fluentui/react-radio",
|
|
13
|
-
"commit": "
|
|
14
|
-
"comment": "
|
|
13
|
+
"commit": "eb1084fd607c0d1086f9d465168be5822daa5e40",
|
|
14
|
+
"comment": "feat: ship rolluped only dts"
|
|
15
15
|
},
|
|
16
16
|
{
|
|
17
|
-
"author": "
|
|
18
|
-
"package": "@fluentui/react-radio",
|
|
19
|
-
"commit": "0fac2d7a6f35c5fcebaf30da68b9604410fe0eb9",
|
|
20
|
-
"comment": "Updated react-label package version to RC."
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
"author": "beachball",
|
|
24
|
-
"package": "@fluentui/react-radio",
|
|
25
|
-
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20220510-0420.1",
|
|
26
|
-
"commit": "23be9682b20fba2ea59bbb882e2225b9bc81133a"
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
"author": "beachball",
|
|
17
|
+
"author": "behowell@microsoft.com",
|
|
30
18
|
"package": "@fluentui/react-radio",
|
|
31
|
-
"
|
|
32
|
-
"
|
|
19
|
+
"commit": "2ea15d322e01dc6055378f4f0f5f3febf7910f80",
|
|
20
|
+
"comment": "Refactor styles to remove usage of flex gap"
|
|
33
21
|
},
|
|
34
22
|
{
|
|
35
|
-
"author": "
|
|
23
|
+
"author": "esteban.230@hotmail.com",
|
|
36
24
|
"package": "@fluentui/react-radio",
|
|
37
|
-
"
|
|
38
|
-
"
|
|
25
|
+
"commit": "0fac2d7a6f35c5fcebaf30da68b9604410fe0eb9",
|
|
26
|
+
"comment": "Updated react-label package version to RC."
|
|
39
27
|
},
|
|
40
28
|
{
|
|
41
29
|
"author": "beachball",
|
|
42
30
|
"package": "@fluentui/react-radio",
|
|
43
|
-
"comment": "Bump @fluentui/react-
|
|
44
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20220513-0417.1",
|
|
32
|
+
"commit": "d214cb1888cee2c326ebf2b379d639002ec5798e"
|
|
45
33
|
},
|
|
46
34
|
{
|
|
47
35
|
"author": "beachball",
|
|
48
36
|
"package": "@fluentui/react-radio",
|
|
49
|
-
"comment": "Bump @fluentui/react-
|
|
50
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220513-0417.1",
|
|
38
|
+
"commit": "d214cb1888cee2c326ebf2b379d639002ec5798e"
|
|
51
39
|
},
|
|
52
40
|
{
|
|
53
41
|
"author": "beachball",
|
|
54
42
|
"package": "@fluentui/react-radio",
|
|
55
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
56
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220513-0417.1",
|
|
44
|
+
"commit": "d214cb1888cee2c326ebf2b379d639002ec5798e"
|
|
57
45
|
}
|
|
58
46
|
]
|
|
59
47
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,24 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-radio
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 13 May 2022 04:27:01 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20220513-0417.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v0.0.0-nightly-20220513-0417.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-rc.2..@fluentui/react-radio_v0.0.0-nightly-
|
|
9
|
+
Fri, 13 May 2022 04:27:01 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-rc.2..@fluentui/react-radio_v0.0.0-nightly-20220513-0417.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
|
-
-
|
|
14
|
+
- feat: ship rolluped only dts ([PR #22874](https://github.com/microsoft/fluentui/pull/22874) by martinhochel@microsoft.com)
|
|
15
|
+
- Refactor styles to remove usage of flex gap ([PR #22975](https://github.com/microsoft/fluentui/pull/22975) by behowell@microsoft.com)
|
|
15
16
|
- Updated react-label package version to RC. ([PR #22865](https://github.com/microsoft/fluentui/pull/22865) by esteban.230@hotmail.com)
|
|
16
|
-
- Bump @fluentui/react-
|
|
17
|
-
- Bump @fluentui/react-
|
|
18
|
-
- Bump @fluentui/react-
|
|
19
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-20220510-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/23be9682b20fba2ea59bbb882e2225b9bc81133a) by beachball)
|
|
20
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-20220510-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/23be9682b20fba2ea59bbb882e2225b9bc81133a) by beachball)
|
|
21
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220510-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/23be9682b20fba2ea59bbb882e2225b9bc81133a) by beachball)
|
|
17
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20220513-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/d214cb1888cee2c326ebf2b379d639002ec5798e) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20220513-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/d214cb1888cee2c326ebf2b379d639002ec5798e) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220513-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/d214cb1888cee2c326ebf2b379d639002ec5798e) by beachball)
|
|
22
20
|
|
|
23
21
|
## [9.0.0-rc.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-rc.2)
|
|
24
22
|
|
|
File without changes
|
|
@@ -25,7 +25,6 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
25
25
|
"base": {
|
|
26
26
|
"mc9l5x": "ftuwxu6",
|
|
27
27
|
"qhf8xq": "f10pi13n",
|
|
28
|
-
"i8kkvl": "f4akndk",
|
|
29
28
|
"z8tnut": "fp9bwmr",
|
|
30
29
|
"z189sj": ["f19lj068", "f177v4lu"],
|
|
31
30
|
"Byoj8tv": "f150uoa4",
|
|
@@ -33,8 +32,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
33
32
|
},
|
|
34
33
|
"vertical": {
|
|
35
34
|
"Beiy3e4": "f1vx9l62",
|
|
36
|
-
"Bt984gj": "f122n59"
|
|
37
|
-
"Belr9w4": "fe5j3v"
|
|
35
|
+
"Bt984gj": "f122n59"
|
|
38
36
|
},
|
|
39
37
|
"focusIndicator": {
|
|
40
38
|
"B486eqv": "f2hkw1w",
|
|
@@ -68,7 +66,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
68
66
|
"Bj23z95": ["f8l10fm", "fxfgh6q"]
|
|
69
67
|
}
|
|
70
68
|
}, {
|
|
71
|
-
"d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".
|
|
69
|
+
"d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".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
70
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
73
71
|
});
|
|
74
72
|
|
|
@@ -163,17 +161,19 @@ const useIndicatorStyles = /*#__PURE__*/__styles({
|
|
|
163
161
|
const useLabelStyles = /*#__PURE__*/__styles({
|
|
164
162
|
"base": {
|
|
165
163
|
"qb2dma": "f7nlbp4",
|
|
166
|
-
"famaaq": "f1xqy1su"
|
|
164
|
+
"famaaq": "f1xqy1su"
|
|
165
|
+
},
|
|
166
|
+
"after": {
|
|
167
|
+
"Frg6f3": ["f1hf5xhj", "f1x4n1mu"],
|
|
167
168
|
"B6of3ja": "fjzwpt6",
|
|
168
|
-
"
|
|
169
|
-
"jrapky": "fh6j2fo",
|
|
170
|
-
"Frg6f3": ["f1tyq0we", "f11qmguv"]
|
|
169
|
+
"jrapky": "fh6j2fo"
|
|
171
170
|
},
|
|
172
171
|
"below": {
|
|
172
|
+
"B6of3ja": "f1xdg43u",
|
|
173
173
|
"fsow6f": "f17mccla"
|
|
174
174
|
}
|
|
175
175
|
}, {
|
|
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;}", ".
|
|
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;}", ".f1hf5xhj{margin-left:12px;}", ".f1x4n1mu{margin-right:12px;}", ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}", ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}", ".f1xdg43u{margin-top:12px;}", ".f17mccla{text-align:center;}"]
|
|
177
177
|
});
|
|
178
178
|
/**
|
|
179
179
|
* Apply styling to the Radio slots based on the state
|
|
@@ -190,7 +190,7 @@ export const useRadioStyles_unstable = state => {
|
|
|
190
190
|
const labelStyles = useLabelStyles();
|
|
191
191
|
|
|
192
192
|
if (state.label) {
|
|
193
|
-
state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, state.labelPosition
|
|
193
|
+
state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, labelStyles[state.labelPosition], state.label.className);
|
|
194
194
|
}
|
|
195
195
|
};
|
|
196
196
|
//# sourceMappingURL=useRadioStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"AAAA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;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,kBAAkB,GAAG,KAA3B;AACA,MAAM,kBAAkB,GAAG,MAA3B,C,CAEA;;AACA,MAAM,aAAa,GAAG,MAAtB;AAEA;;AAEG;;AACH,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
1
|
+
{"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `radioClassNames.root` instead.\n */\nexport const radioClassName = 'fui-Radio';\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label',\n};\n\n// TODO replace these spacing constants with theme values once they're on the theme\nconst spacingHorizontalS = '8px';\nconst spacingHorizontalM = '12px';\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n ...shorthands.padding(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: 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: spacingHorizontalM,\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/"}
|
|
@@ -35,7 +35,6 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
35
35
|
"base": {
|
|
36
36
|
"mc9l5x": "ftuwxu6",
|
|
37
37
|
"qhf8xq": "f10pi13n",
|
|
38
|
-
"i8kkvl": "f4akndk",
|
|
39
38
|
"z8tnut": "fp9bwmr",
|
|
40
39
|
"z189sj": ["f19lj068", "f177v4lu"],
|
|
41
40
|
"Byoj8tv": "f150uoa4",
|
|
@@ -43,8 +42,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
43
42
|
},
|
|
44
43
|
"vertical": {
|
|
45
44
|
"Beiy3e4": "f1vx9l62",
|
|
46
|
-
"Bt984gj": "f122n59"
|
|
47
|
-
"Belr9w4": "fe5j3v"
|
|
45
|
+
"Bt984gj": "f122n59"
|
|
48
46
|
},
|
|
49
47
|
"focusIndicator": {
|
|
50
48
|
"B486eqv": "f2hkw1w",
|
|
@@ -78,7 +76,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
78
76
|
"Bj23z95": ["f8l10fm", "fxfgh6q"]
|
|
79
77
|
}
|
|
80
78
|
}, {
|
|
81
|
-
"d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".
|
|
79
|
+
"d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".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
80
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
83
81
|
});
|
|
84
82
|
|
|
@@ -173,17 +171,19 @@ const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
|
|
|
173
171
|
const useLabelStyles = /*#__PURE__*/react_1.__styles({
|
|
174
172
|
"base": {
|
|
175
173
|
"qb2dma": "f7nlbp4",
|
|
176
|
-
"famaaq": "f1xqy1su"
|
|
174
|
+
"famaaq": "f1xqy1su"
|
|
175
|
+
},
|
|
176
|
+
"after": {
|
|
177
|
+
"Frg6f3": ["f1hf5xhj", "f1x4n1mu"],
|
|
177
178
|
"B6of3ja": "fjzwpt6",
|
|
178
|
-
"
|
|
179
|
-
"jrapky": "fh6j2fo",
|
|
180
|
-
"Frg6f3": ["f1tyq0we", "f11qmguv"]
|
|
179
|
+
"jrapky": "fh6j2fo"
|
|
181
180
|
},
|
|
182
181
|
"below": {
|
|
182
|
+
"B6of3ja": "f1xdg43u",
|
|
183
183
|
"fsow6f": "f17mccla"
|
|
184
184
|
}
|
|
185
185
|
}, {
|
|
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;}", ".
|
|
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;}", ".f1hf5xhj{margin-left:12px;}", ".f1x4n1mu{margin-right:12px;}", ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}", ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}", ".f1xdg43u{margin-top:12px;}", ".f17mccla{text-align:center;}"]
|
|
187
187
|
});
|
|
188
188
|
/**
|
|
189
189
|
* Apply styling to the Radio slots based on the state
|
|
@@ -200,7 +200,7 @@ const useRadioStyles_unstable = state => {
|
|
|
200
200
|
const labelStyles = useLabelStyles();
|
|
201
201
|
|
|
202
202
|
if (state.label) {
|
|
203
|
-
state.label.className = react_1.mergeClasses(exports.radioClassNames.label, labelStyles.base, state.labelPosition
|
|
203
|
+
state.label.className = react_1.mergeClasses(exports.radioClassNames.label, labelStyles.base, labelStyles[state.labelPosition], state.label.className);
|
|
204
204
|
}
|
|
205
205
|
};
|
|
206
206
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;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,kBAAkB,GAAG,KAA3B;AACA,MAAM,kBAAkB,GAAG,MAA3B,C,CAEA;;AACA,MAAM,aAAa,GAAG,MAAtB;AAEA;;AAEG;;AACH,MAAM,aAAa,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
1
|
+
{"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `radioClassNames.root` instead.\n */\nexport const radioClassName = 'fui-Radio';\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label',\n};\n\n// TODO replace these spacing constants with theme values once they're on the theme\nconst spacingHorizontalS = '8px';\nconst spacingHorizontalM = '12px';\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n ...shorthands.padding(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: 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: spacingHorizontalM,\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": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20220513-0417.1",
|
|
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,15 +28,15 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
31
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20220513-0417.1"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@fluentui/react-context-selector": "0.0.0-nightly-
|
|
34
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20220513-0417.0",
|
|
35
35
|
"@fluentui/react-icons": "^2.0.166-rc.3",
|
|
36
|
-
"@fluentui/react-label": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
36
|
+
"@fluentui/react-label": "0.0.0-nightly-20220513-0417.1",
|
|
37
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20220513-0417.1",
|
|
38
|
+
"@fluentui/react-theme": "0.0.0-nightly-20220513-0417.0",
|
|
39
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20220513-0417.0",
|
|
40
40
|
"@griffel/react": "1.0.3",
|
|
41
41
|
"tslib": "^2.1.0"
|
|
42
42
|
},
|
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';
|