@fluentui/react-radio 9.0.0-beta.2 → 9.0.0-beta.5
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 +180 -1
- package/CHANGELOG.md +49 -2
- package/README.md +39 -0
- package/dist/{react-radio.d.ts → index.d.ts} +43 -8
- package/lib/components/Radio/Radio.types.d.ts +18 -1
- package/lib/components/Radio/Radio.types.js.map +1 -1
- package/lib/components/Radio/useRadio.js +21 -11
- package/lib/components/Radio/useRadio.js.map +1 -1
- package/lib/components/Radio/useRadioStyles.d.ts +6 -1
- package/lib/components/Radio/useRadioStyles.js +35 -13
- package/lib/components/Radio/useRadioStyles.js.map +1 -1
- package/lib/components/RadioGroup/RadioGroup.js +3 -1
- package/lib/components/RadioGroup/RadioGroup.js.map +1 -1
- package/lib/components/RadioGroup/RadioGroup.types.d.ts +10 -5
- package/lib/components/RadioGroup/RadioGroup.types.js.map +1 -1
- package/lib/components/RadioGroup/renderRadioGroup.d.ts +2 -2
- package/lib/components/RadioGroup/renderRadioGroup.js +2 -2
- package/lib/components/RadioGroup/renderRadioGroup.js.map +1 -1
- package/lib/components/RadioGroup/useRadioGroup.js +7 -9
- package/lib/components/RadioGroup/useRadioGroup.js.map +1 -1
- package/lib/components/RadioGroup/useRadioGroupStyles.d.ts +6 -1
- package/lib/components/RadioGroup/useRadioGroupStyles.js +8 -1
- package/lib/components/RadioGroup/useRadioGroupStyles.js.map +1 -1
- package/lib/contexts/RadioGroupContext.d.ts +3 -4
- package/lib/contexts/RadioGroupContext.js +2 -2
- package/lib/contexts/RadioGroupContext.js.map +1 -1
- package/lib/contexts/useRadioGroupContextValues.d.ts +2 -0
- package/lib/contexts/useRadioGroupContextValues.js +22 -0
- package/lib/contexts/useRadioGroupContextValues.js.map +1 -0
- package/lib/index.d.ts +5 -3
- package/lib/index.js +7 -3
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Radio/Radio.types.d.ts +18 -1
- package/lib-commonjs/components/Radio/useRadio.js +21 -10
- package/lib-commonjs/components/Radio/useRadio.js.map +1 -1
- package/lib-commonjs/components/Radio/useRadioStyles.d.ts +6 -1
- package/lib-commonjs/components/Radio/useRadioStyles.js +36 -14
- package/lib-commonjs/components/Radio/useRadioStyles.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/RadioGroup.js +4 -1
- package/lib-commonjs/components/RadioGroup/RadioGroup.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/RadioGroup.types.d.ts +10 -5
- package/lib-commonjs/components/RadioGroup/renderRadioGroup.d.ts +2 -2
- package/lib-commonjs/components/RadioGroup/renderRadioGroup.js +2 -2
- package/lib-commonjs/components/RadioGroup/renderRadioGroup.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/useRadioGroup.js +7 -10
- package/lib-commonjs/components/RadioGroup/useRadioGroup.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.d.ts +6 -1
- package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.js +9 -2
- package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.js.map +1 -1
- package/lib-commonjs/contexts/RadioGroupContext.d.ts +3 -4
- package/lib-commonjs/contexts/RadioGroupContext.js +2 -2
- package/lib-commonjs/contexts/RadioGroupContext.js.map +1 -1
- package/lib-commonjs/contexts/useRadioGroupContextValues.d.ts +2 -0
- package/lib-commonjs/contexts/useRadioGroupContextValues.js +31 -0
- package/lib-commonjs/contexts/useRadioGroupContextValues.js.map +1 -0
- package/lib-commonjs/index.d.ts +5 -3
- package/lib-commonjs/index.js +88 -4
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +10 -19
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `radioClassNames.root` instead.
|
|
6
|
+
*/
|
|
7
|
+
|
|
4
8
|
export const radioClassName = 'fui-Radio';
|
|
5
|
-
const
|
|
6
|
-
|
|
9
|
+
export const radioClassNames = {
|
|
10
|
+
root: 'fui-Radio',
|
|
11
|
+
indicator: 'fui-Radio__indicator',
|
|
12
|
+
input: 'fui-Radio__input',
|
|
13
|
+
label: 'fui-Radio__label'
|
|
14
|
+
}; // TODO replace these spacing constants with theme values once they're on the theme
|
|
7
15
|
|
|
8
16
|
const spacingHorizontalS = '8px';
|
|
9
17
|
const spacingHorizontalM = '12px'; // The indicator size is used by the indicator and label styles
|
|
@@ -30,23 +38,37 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
30
38
|
},
|
|
31
39
|
"focusIndicator": {
|
|
32
40
|
"B486eqv": "f2hkw1w",
|
|
33
|
-
"
|
|
41
|
+
"vchsgm": "fbiesyy",
|
|
42
|
+
"ozrjjd": ["fq2kn9", "f1jxwnad"],
|
|
43
|
+
"B7lelfh": "f1il7mou",
|
|
44
|
+
"Bp3tz3o": ["f1jxwnad", "fq2kn9"],
|
|
34
45
|
"B8vm7ur": "f12sql3b",
|
|
35
46
|
"f4hv8x": "f1i4q40k",
|
|
36
47
|
"Gpan81": "fcrbge9",
|
|
37
|
-
"z7afg": "ft464mn",
|
|
38
48
|
"rsjj6t": "fskqmiq",
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
49
|
+
"E86f5s": "f1kbdjx9",
|
|
50
|
+
"f5nhos": ["fw1d893", "fpuz8dn"],
|
|
51
|
+
"Bhtq6h7": "f14hlsw1",
|
|
52
|
+
"Bubk9yy": ["fpuz8dn", "fw1d893"],
|
|
53
|
+
"dzajus": "f1bkt4b4",
|
|
54
|
+
"B8gmrwi": ["f16hf5f2", "f1qhqcal"],
|
|
55
|
+
"Byq6oy9": "fyyqeim",
|
|
56
|
+
"Bdy2j38": ["f1qhqcal", "f16hf5f2"],
|
|
57
|
+
"Bi8bqab": ["f1aneyfs", "f15nmyc0"],
|
|
58
|
+
"kq6z4e": ["f15nmyc0", "f1aneyfs"],
|
|
59
|
+
"l5tc3q": ["f3cpy5b", "f13v6kgv"],
|
|
60
|
+
"d1z3ck": ["f13v6kgv", "f3cpy5b"],
|
|
61
|
+
"epcuuz": "filx0we",
|
|
62
|
+
"Ba33l6n": ["f1horip2", "fgnx9ah"],
|
|
63
|
+
"va7z1g": "fkii2tb",
|
|
64
|
+
"Bmi6mq9": ["fgnx9ah", "f1horip2"],
|
|
43
65
|
"Bjkpy09": "f1unftzx",
|
|
44
66
|
"Jxg1p8": "f8rjbh6",
|
|
45
67
|
"Bc94xmo": ["fxfgh6q", "f8l10fm"],
|
|
46
68
|
"Bj23z95": ["f8l10fm", "fxfgh6q"]
|
|
47
69
|
}
|
|
48
70
|
}, {
|
|
49
|
-
"d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".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;}", ".fe5j3v{row-gap:12px;}", "[data-keyboard-nav] .
|
|
71
|
+
"d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".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;}", ".fe5j3v{row-gap:12px;}", "[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;}"],
|
|
50
72
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
51
73
|
});
|
|
52
74
|
|
|
@@ -160,15 +182,15 @@ const useLabelStyles = /*#__PURE__*/__styles({
|
|
|
160
182
|
|
|
161
183
|
export const useRadioStyles_unstable = state => {
|
|
162
184
|
const rootStyles = useRootStyles();
|
|
163
|
-
state.root.className = mergeClasses(
|
|
185
|
+
state.root.className = mergeClasses(radioClassNames.root, rootStyles.base, rootStyles.focusIndicator, state.labelPosition === 'below' && rootStyles.vertical, state.root.className);
|
|
164
186
|
const inputStyles = useInputStyles();
|
|
165
|
-
state.input.className = mergeClasses(inputStyles.base, state.input.className);
|
|
187
|
+
state.input.className = mergeClasses(radioClassNames.input, inputStyles.base, state.input.className);
|
|
166
188
|
const indicatorStyles = useIndicatorStyles();
|
|
167
|
-
state.indicator.className = mergeClasses(
|
|
189
|
+
state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);
|
|
168
190
|
const labelStyles = useLabelStyles();
|
|
169
191
|
|
|
170
192
|
if (state.label) {
|
|
171
|
-
state.label.className = mergeClasses(
|
|
193
|
+
state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, state.labelPosition === 'below' && labelStyles.below, state.label.className);
|
|
172
194
|
}
|
|
173
195
|
};
|
|
174
196
|
//# sourceMappingURL=useRadioStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"AAAA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;
|
|
1
|
+
{"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `radioClassNames.root` instead.\n */\nexport const radioClassName = 'fui-Radio';\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label',\n};\n\n// TODO replace these spacing constants with theme values once they're on the theme\nconst spacingHorizontalS = '8px';\nconst spacingHorizontalM = '12px';\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n columnGap: spacingHorizontalM,\n ...shorthands.padding(spacingHorizontalS),\n },\n\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\n rowGap: spacingHorizontalM,\n },\n\n focusIndicator: createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputStyles = makeStyles({\n base: {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n ...shorthands.margin(0),\n opacity: 0,\n\n ':enabled': {\n cursor: 'pointer',\n },\n\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n opacity: '0',\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n width: indicatorSize,\n height: indicatorSize,\n fontSize: '12px',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n\n ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n userSelect: 'none',\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n ...shorthands.margin(`calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`, 0),\n },\n\n below: {\n textAlign: 'center',\n },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootStyles.base,\n rootStyles.focusIndicator,\n state.labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(radioClassNames.input, inputStyles.base, state.input.className);\n\n const indicatorStyles = useIndicatorStyles();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n radioClassNames.label,\n labelStyles.base,\n state.labelPosition === 'below' && labelStyles.below,\n state.label.className,\n );\n }\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -2,14 +2,16 @@ import * as React from 'react';
|
|
|
2
2
|
import { renderRadioGroup_unstable } from './renderRadioGroup';
|
|
3
3
|
import { useRadioGroup_unstable } from './useRadioGroup';
|
|
4
4
|
import { useRadioGroupStyles_unstable } from './useRadioGroupStyles';
|
|
5
|
+
import { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues';
|
|
5
6
|
/**
|
|
6
7
|
* A RadioGroup component presents a set of options where only one option can be selected.
|
|
7
8
|
*/
|
|
8
9
|
|
|
9
10
|
export const RadioGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
10
11
|
const state = useRadioGroup_unstable(props, ref);
|
|
12
|
+
const contextValues = useRadioGroupContextValues(state);
|
|
11
13
|
useRadioGroupStyles_unstable(state);
|
|
12
|
-
return renderRadioGroup_unstable(state);
|
|
14
|
+
return renderRadioGroup_unstable(state, contextValues);
|
|
13
15
|
});
|
|
14
16
|
RadioGroup.displayName = 'RadioGroup';
|
|
15
17
|
//# sourceMappingURL=RadioGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AAEA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,sBAAsB,CAAC,KAAD,EAAQ,GAAR,CAApC;AAEA,EAAA,4BAA4B,CAAC,KAAD,CAA5B;AACA,SAAO,yBAAyB,CAAC,KAAD,CAAhC;AACD,
|
|
1
|
+
{"version":3,"sources":["components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AACA,SAAS,0BAAT,QAA2C,2CAA3C;AAEA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,sBAAsB,CAAC,KAAD,EAAQ,GAAR,CAApC;AACA,QAAM,aAAa,GAAG,0BAA0B,CAAC,KAAD,CAAhD;AAEA,EAAA,4BAA4B,CAAC,KAAD,CAA5B;AACA,SAAO,yBAAyB,CAAC,KAAD,EAAQ,aAAR,CAAhC;AACD,CAN+D,CAAzD;AAQP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { RadioGroupProps } from './RadioGroup.types';\nimport { renderRadioGroup_unstable } from './renderRadioGroup';\nimport { useRadioGroup_unstable } from './useRadioGroup';\nimport { useRadioGroupStyles_unstable } from './useRadioGroupStyles';\nimport { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues';\n\n/**\n * A RadioGroup component presents a set of options where only one option can be selected.\n */\nexport const RadioGroup: ForwardRefComponent<RadioGroupProps> = React.forwardRef((props, ref) => {\n const state = useRadioGroup_unstable(props, ref);\n const contextValues = useRadioGroupContextValues(state);\n\n useRadioGroupStyles_unstable(state);\n return renderRadioGroup_unstable(state, contextValues);\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"sourceRoot":"../src/"}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
3
|
-
import { RadioGroupContextValue } from '../../contexts/RadioGroupContext';
|
|
4
3
|
export declare type RadioGroupSlots = {
|
|
5
4
|
/**
|
|
6
5
|
* The radio group root.
|
|
7
6
|
*/
|
|
8
|
-
root: Slot<'div'
|
|
7
|
+
root: NonNullable<Slot<'div'>>;
|
|
9
8
|
};
|
|
10
9
|
export declare type RadioGroupProps = Omit<ComponentProps<Partial<RadioGroupSlots>>, 'onChange'> & {
|
|
11
10
|
/**
|
|
@@ -33,13 +32,17 @@ export declare type RadioGroupProps = Omit<ComponentProps<Partial<RadioGroupSlot
|
|
|
33
32
|
/**
|
|
34
33
|
* How the radio items are laid out in the group.
|
|
35
34
|
*
|
|
36
|
-
* @
|
|
35
|
+
* @default vertical
|
|
37
36
|
*/
|
|
38
37
|
layout?: 'vertical' | 'horizontal' | 'horizontalStacked';
|
|
39
38
|
/**
|
|
40
39
|
* Disable all Radio items in this group.
|
|
41
40
|
*/
|
|
42
41
|
disabled?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Require all Radio items in this group.
|
|
44
|
+
*/
|
|
45
|
+
required?: boolean;
|
|
43
46
|
};
|
|
44
47
|
/**
|
|
45
48
|
* Data for the onChange event for RadioGroup.
|
|
@@ -53,6 +56,8 @@ export declare type RadioGroupOnChangeData = {
|
|
|
53
56
|
/**
|
|
54
57
|
* State used in rendering RadioGroup
|
|
55
58
|
*/
|
|
56
|
-
export declare type RadioGroupState = ComponentState<RadioGroupSlots> & Required<Pick<RadioGroupProps, 'layout'>> &
|
|
57
|
-
|
|
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;
|
|
58
63
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.types.js","sourceRoot":"../src/","sources":["components/RadioGroup/RadioGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\
|
|
1
|
+
{"version":3,"file":"RadioGroup.types.js","sourceRoot":"../src/","sources":["components/RadioGroup/RadioGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type RadioGroupSlots = {\n /**\n * The radio group root.\n */\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type RadioGroupProps = Omit<ComponentProps<Partial<RadioGroupSlots>>, 'onChange'> & {\n /**\n * The name of this radio group. This name is applied to all Radio items inside this group.\n *\n * If no name is provided, one will be generated so that all of the Radio items have the same name.\n */\n name?: string;\n\n /**\n * The selected Radio item in this group.\n *\n * This should be the `value` prop of one of the Radio items inside this group.\n */\n value?: string;\n\n /**\n * The default selected Radio item in this group.\n *\n * This should be the `value` prop of one of the Radio items inside this group.\n */\n defaultValue?: string;\n\n /**\n * Callback when the selected Radio item changes.\n */\n onChange?: (ev: React.FormEvent<HTMLDivElement>, data: RadioGroupOnChangeData) => void;\n\n /**\n * How the radio items are laid out in the group.\n *\n * @default vertical\n */\n layout?: 'vertical' | 'horizontal' | 'horizontalStacked';\n\n /**\n * Disable all Radio items in this group.\n */\n disabled?: boolean;\n\n /**\n * Require all Radio items in this group.\n */\n required?: boolean;\n};\n\n/**\n * Data for the onChange event for RadioGroup.\n */\nexport type RadioGroupOnChangeData = {\n /**\n * The value of the newly selected Radio item.\n */\n value: string;\n};\n\n/**\n * State used in rendering RadioGroup\n */\nexport type RadioGroupState = ComponentState<RadioGroupSlots> &\n Required<Pick<RadioGroupProps, 'layout'>> &\n Partial<Exclude<RadioGroupProps, 'onChange' | 'layout'>>;\n\nexport type RadioGroupContextValue = Pick<\n RadioGroupProps,\n 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required'\n>;\n\nexport type RadioGroupContextValues = {\n radioGroup: RadioGroupContextValue;\n};\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { RadioGroupState } from './RadioGroup.types';
|
|
1
|
+
import { RadioGroupContextValues, RadioGroupState } from './RadioGroup.types';
|
|
2
2
|
/**
|
|
3
3
|
* Render the final JSX of RadioGroup
|
|
4
4
|
*/
|
|
5
|
-
export declare const renderRadioGroup_unstable: (state: RadioGroupState) => JSX.Element;
|
|
5
|
+
export declare const renderRadioGroup_unstable: (state: RadioGroupState, contextValues: RadioGroupContextValues) => JSX.Element;
|
|
@@ -5,13 +5,13 @@ import { RadioGroupContext } from '../../contexts/RadioGroupContext';
|
|
|
5
5
|
* Render the final JSX of RadioGroup
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
export const renderRadioGroup_unstable = state => {
|
|
8
|
+
export const renderRadioGroup_unstable = (state, contextValues) => {
|
|
9
9
|
const {
|
|
10
10
|
slots,
|
|
11
11
|
slotProps
|
|
12
12
|
} = getSlots(state);
|
|
13
13
|
return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
|
|
14
|
-
value:
|
|
14
|
+
value: contextValues.radioGroup
|
|
15
15
|
}, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
|
|
16
16
|
}));
|
|
17
17
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/RadioGroup/renderRadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,iBAAT,QAAkC,kCAAlC;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,
|
|
1
|
+
{"version":3,"sources":["components/RadioGroup/renderRadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,iBAAT,QAAkC,kCAAlC;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAG,CAAC,KAAD,EAAyB,aAAzB,KAAmE;AAC1G,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAkB,KAAlB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,iBAAiB,CAAC,QAAnB,EAA2B;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAA3B,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADF,CADF;AAKD,CARM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport { RadioGroupContextValues, RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\n\n/**\n * Render the final JSX of RadioGroup\n */\nexport const renderRadioGroup_unstable = (state: RadioGroupState, contextValues: RadioGroupContextValues) => {\n const { slots, slotProps } = getSlots<RadioGroupSlots>(state);\n\n return (\n <RadioGroupContext.Provider value={contextValues.radioGroup}>\n <slots.root {...slotProps.root} />\n </RadioGroupContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import { getNativeElementProps, useEventCallback, useId } from '@fluentui/react-utilities';
|
|
3
2
|
/**
|
|
4
3
|
* Create the state required to render RadioGroup.
|
|
@@ -18,17 +17,16 @@ export const useRadioGroup_unstable = (props, ref) => {
|
|
|
18
17
|
defaultValue,
|
|
19
18
|
disabled,
|
|
20
19
|
layout = 'vertical',
|
|
21
|
-
onChange
|
|
20
|
+
onChange,
|
|
21
|
+
required
|
|
22
22
|
} = props;
|
|
23
23
|
return {
|
|
24
24
|
layout,
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
layout
|
|
31
|
-
}), [name, layout, value, defaultValue, disabled]),
|
|
25
|
+
name,
|
|
26
|
+
value,
|
|
27
|
+
defaultValue,
|
|
28
|
+
disabled,
|
|
29
|
+
required,
|
|
32
30
|
components: {
|
|
33
31
|
root: 'div'
|
|
34
32
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/RadioGroup/useRadioGroup.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["components/RadioGroup/useRadioGroup.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAA4E;AAChH,QAAM,aAAa,GAAG,KAAK,CAAC,aAAD,CAA3B;AAEA,QAAM;AAAE,IAAA,IAAI,GAAG,aAAT;AAAwB,IAAA,KAAxB;AAA+B,IAAA,YAA/B;AAA6C,IAAA,QAA7C;AAAuD,IAAA,MAAM,GAAG,UAAhE;AAA4E,IAAA,QAA5E;AAAsF,IAAA;AAAtF,MAAmG,KAAzG;AAEA,SAAO;AACL,IAAA,MADK;AAEL,IAAA,IAFK;AAGL,IAAA,KAHK;AAIL,IAAA,YAJK;AAKL,IAAA,QALK;AAML,IAAA,QANK;AAOL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KAPP;AAUL,IAAA,IAAI,EAAE;AACJ,MAAA,GADI;AAEJ,MAAA,IAAI,EAAE,YAFF;AAGJ,SAAG,qBAAqB,CAAC,KAAD,EAAQ,KAAR;AAAe;AAAuB,OAAC,UAAD,EAAa,MAAb,CAAtC,CAHpB;AAIJ,MAAA,QAAQ,EAAE,gBAAgB,CAAC,EAAE,IAAG;AAC9B,YAAI,QAAQ,IAAI,EAAE,CAAC,MAAH,YAAqB,gBAAjC,IAAqD,EAAE,CAAC,MAAH,CAAU,IAAV,KAAmB,OAA5E,EAAqF;AACnF,UAAA,QAAQ,CAAC,EAAD,EAAK;AAAE,YAAA,KAAK,EAAE,EAAE,CAAC,MAAH,CAAU;AAAnB,WAAL,CAAR;AACD;AACF,OAJyB;AAJtB;AAVD,GAAP;AAqBD,CA1BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback, useId } from '@fluentui/react-utilities';\nimport { RadioGroupProps, RadioGroupState } from './RadioGroup.types';\n\n/**\n * Create the state required to render RadioGroup.\n *\n * The returned state can be modified with hooks such as useRadioGroupStyles_unstable,\n * before being passed to renderRadioGroup_unstable.\n *\n * @param props - props from this instance of RadioGroup\n * @param ref - reference to root HTMLElement of RadioGroup\n */\nexport const useRadioGroup_unstable = (props: RadioGroupProps, ref: React.Ref<HTMLDivElement>): RadioGroupState => {\n const generatedName = useId('radiogroup-');\n\n const { name = generatedName, value, defaultValue, disabled, layout = 'vertical', onChange, required } = props;\n\n return {\n layout,\n name,\n value,\n defaultValue,\n disabled,\n required,\n components: {\n root: 'div',\n },\n root: {\n ref,\n role: 'radiogroup',\n ...getNativeElementProps('div', props, /*excludedPropNames:*/ ['onChange', 'name']),\n onChange: useEventCallback(ev => {\n if (onChange && ev.target instanceof HTMLInputElement && ev.target.type === 'radio') {\n onChange(ev, { value: ev.target.value });\n }\n }),\n },\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import { RadioGroupState } from './RadioGroup.types';
|
|
1
|
+
import { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';
|
|
2
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `radioGroupClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const radioGroupClassName = "fui-RadioGroup";
|
|
7
|
+
export declare const radioGroupClassNames: SlotClassNames<RadioGroupSlots>;
|
|
3
8
|
/**
|
|
4
9
|
* Apply styling to the RadioGroup slots based on the state
|
|
5
10
|
*/
|
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
import { __styles, mergeClasses } from '@griffel/react';
|
|
2
|
+
/**
|
|
3
|
+
* @deprecated Use `radioGroupClassNames.root` instead.
|
|
4
|
+
*/
|
|
5
|
+
|
|
2
6
|
export const radioGroupClassName = 'fui-RadioGroup';
|
|
7
|
+
export const radioGroupClassNames = {
|
|
8
|
+
root: 'fui-RadioGroup'
|
|
9
|
+
};
|
|
3
10
|
|
|
4
11
|
const useStyles = /*#__PURE__*/__styles({
|
|
5
12
|
"root": {
|
|
@@ -19,6 +26,6 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
19
26
|
|
|
20
27
|
export const useRadioGroupStyles_unstable = state => {
|
|
21
28
|
const styles = useStyles();
|
|
22
|
-
state.root.className = mergeClasses(
|
|
29
|
+
state.root.className = mergeClasses(radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);
|
|
23
30
|
};
|
|
24
31
|
//# sourceMappingURL=useRadioGroupStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/RadioGroup/useRadioGroupStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;
|
|
1
|
+
{"version":3,"sources":["components/RadioGroup/useRadioGroupStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AAIA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;AACP,OAAO,MAAM,oBAAoB,GAAoC;AACnE,EAAA,IAAI,EAAE;AAD6D,CAA9D;;AAIP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA2B;AACrE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,oBAAoB,CAAC,IADY,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,MAAN,KAAiB,UAAjB,IAA+B,MAAM,CAAC,QAHL,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;AAMD,CARM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `radioGroupClassNames.root` instead.\n */\nexport const radioGroupClassName = 'fui-RadioGroup';\nexport const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {\n root: 'fui-RadioGroup',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = (state: RadioGroupState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n radioGroupClassNames.root,\n styles.root,\n state.layout === 'vertical' && styles.vertical,\n state.root.className,\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
export declare type RadioGroupContextValue = Pick<RadioGroupProps, 'name' | 'layout' | 'value' | 'defaultValue' | 'disabled'>;
|
|
1
|
+
import type { Context } from '@fluentui/react-context-selector';
|
|
2
|
+
import type { RadioGroupContextValue } from '../RadioGroup';
|
|
4
3
|
/**
|
|
5
4
|
* RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.
|
|
6
5
|
*/
|
|
7
|
-
export declare const RadioGroupContext:
|
|
6
|
+
export declare const RadioGroupContext: Context<RadioGroupContextValue>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { createContext } from '@fluentui/react-context-selector';
|
|
2
2
|
/**
|
|
3
3
|
* RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
export const RadioGroupContext = /*#__PURE__*/
|
|
6
|
+
export const RadioGroupContext = /*#__PURE__*/createContext({});
|
|
7
7
|
//# sourceMappingURL=RadioGroupContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["contexts/RadioGroupContext.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["contexts/RadioGroupContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B;AAIA;;AAEG;;AACH,OAAO,MAAM,iBAAiB,gBAAoC,aAAa,CAAC,EAAD,CAAxE","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { RadioGroupContextValue } from '../RadioGroup';\n\n/**\n * RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.\n */\nexport const RadioGroupContext: Context<RadioGroupContextValue> = createContext({});\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export const useRadioGroupContextValues = state => {
|
|
2
|
+
const {
|
|
3
|
+
name,
|
|
4
|
+
value,
|
|
5
|
+
defaultValue,
|
|
6
|
+
disabled,
|
|
7
|
+
layout,
|
|
8
|
+
required
|
|
9
|
+
} = state;
|
|
10
|
+
const radioGroup = {
|
|
11
|
+
name,
|
|
12
|
+
value,
|
|
13
|
+
defaultValue,
|
|
14
|
+
disabled,
|
|
15
|
+
layout,
|
|
16
|
+
required
|
|
17
|
+
};
|
|
18
|
+
return {
|
|
19
|
+
radioGroup
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=useRadioGroupContextValues.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["contexts/useRadioGroupContextValues.ts"],"names":[],"mappings":"AAEA,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAoD;AAC5F,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA,KAAR;AAAe,IAAA,YAAf;AAA6B,IAAA,QAA7B;AAAuC,IAAA,MAAvC;AAA+C,IAAA;AAA/C,MAA4D,KAAlE;AAEA,QAAM,UAAU,GAA2B;AACzC,IAAA,IADyC;AAEzC,IAAA,KAFyC;AAGzC,IAAA,YAHyC;AAIzC,IAAA,QAJyC;AAKzC,IAAA,MALyC;AAMzC,IAAA;AANyC,GAA3C;AASA,SAAO;AAAE,IAAA;AAAF,GAAP;AACD,CAbM","sourcesContent":["import type { RadioGroupContextValue, RadioGroupContextValues, RadioGroupState } from '../RadioGroup';\n\nexport const useRadioGroupContextValues = (state: RadioGroupState): RadioGroupContextValues => {\n const { name, value, defaultValue, disabled, layout, required } = state;\n\n const radioGroup: RadioGroupContextValue = {\n name,\n value,\n defaultValue,\n disabled,\n layout,\n required,\n };\n\n return { radioGroup };\n};\n"],"sourceRoot":"../src/"}
|
package/lib/index.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
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 } from './contexts/RadioGroupContext';
|
package/lib/index.js
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
export
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
export { RadioGroup,
|
|
2
|
+
/* eslint-disable-next-line deprecation/deprecation */
|
|
3
|
+
radioGroupClassName, radioGroupClassNames, renderRadioGroup_unstable, useRadioGroupStyles_unstable, useRadioGroup_unstable } from './RadioGroup';
|
|
4
|
+
export { Radio,
|
|
5
|
+
/* eslint-disable-next-line deprecation/deprecation */
|
|
6
|
+
radioClassName, radioClassNames, renderRadio_unstable, useRadioStyles_unstable, useRadio_unstable } from './Radio';
|
|
7
|
+
export { RadioGroupContext } from './contexts/RadioGroupContext';
|
|
4
8
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,UADF;AAEE;AACA,mBAHF,EAIE,oBAJF,EAKE,yBALF,EAME,4BANF,EAOE,sBAPF,QAQO,cARP;AAiBA,SACE,KADF;AAEE;AACA,cAHF,EAIE,eAJF,EAKE,oBALF,EAME,uBANF,EAOE,iBAPF,QAQO,SARP;AAUA,SAAS,iBAAT,QAAkC,8BAAlC","sourcesContent":["export {\n RadioGroup,\n /* eslint-disable-next-line deprecation/deprecation */\n radioGroupClassName,\n radioGroupClassNames,\n renderRadioGroup_unstable,\n useRadioGroupStyles_unstable,\n useRadioGroup_unstable,\n} from './RadioGroup';\nexport type {\n RadioGroupContextValue,\n RadioGroupContextValues,\n RadioGroupOnChangeData,\n RadioGroupProps,\n RadioGroupSlots,\n RadioGroupState,\n} from './RadioGroup';\nexport {\n Radio,\n /* eslint-disable-next-line deprecation/deprecation */\n radioClassName,\n radioClassNames,\n renderRadio_unstable,\n useRadioStyles_unstable,\n useRadio_unstable,\n} from './Radio';\nexport type { RadioProps, RadioSlots, RadioState, RadioOnChangeData } from './Radio';\nexport { RadioGroupContext } from './contexts/RadioGroupContext';\n"],"sourceRoot":"../src/"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
import { Label } from '@fluentui/react-label';
|
|
2
3
|
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
3
4
|
export declare type RadioSlots = {
|
|
@@ -27,7 +28,7 @@ export declare type RadioSlots = {
|
|
|
27
28
|
/**
|
|
28
29
|
* Radio Props
|
|
29
30
|
*/
|
|
30
|
-
export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'size'> & {
|
|
31
|
+
export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'onChange' | 'size'> & {
|
|
31
32
|
/**
|
|
32
33
|
* The value of the RadioGroup when this Radio item is selected.
|
|
33
34
|
*/
|
|
@@ -45,6 +46,22 @@ export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input
|
|
|
45
46
|
* Disable this Radio item.
|
|
46
47
|
*/
|
|
47
48
|
disabled?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* Callback when this Radio is selected in its group.
|
|
51
|
+
*
|
|
52
|
+
* **Note:** `onChange` is NOT called when this Radio is deselected.
|
|
53
|
+
* Use RadioGroup's `onChange` event to determine when the selection in the group changes.
|
|
54
|
+
*/
|
|
55
|
+
onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void;
|
|
56
|
+
};
|
|
57
|
+
/**
|
|
58
|
+
* Data for the onChange event for Radio.
|
|
59
|
+
*/
|
|
60
|
+
export declare type RadioOnChangeData = {
|
|
61
|
+
/**
|
|
62
|
+
* The value prop of this Radio item.
|
|
63
|
+
*/
|
|
64
|
+
value: string;
|
|
48
65
|
};
|
|
49
66
|
/**
|
|
50
67
|
* State used in rendering Radio
|
|
@@ -14,6 +14,8 @@ const react_label_1 = /*#__PURE__*/require("@fluentui/react-label");
|
|
|
14
14
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
15
15
|
|
|
16
16
|
const RadioGroupContext_1 = /*#__PURE__*/require("../../contexts/RadioGroupContext");
|
|
17
|
+
|
|
18
|
+
const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
|
|
17
19
|
/**
|
|
18
20
|
* Create the state required to render Radio.
|
|
19
21
|
*
|
|
@@ -26,19 +28,25 @@ const RadioGroupContext_1 = /*#__PURE__*/require("../../contexts/RadioGroupConte
|
|
|
26
28
|
|
|
27
29
|
|
|
28
30
|
const useRadio_unstable = (props, ref) => {
|
|
29
|
-
const
|
|
31
|
+
const nameGroup = react_context_selector_1.useContextSelector(RadioGroupContext_1.RadioGroupContext, ctx => ctx.name);
|
|
32
|
+
const value = react_context_selector_1.useContextSelector(RadioGroupContext_1.RadioGroupContext, ctx => ctx.value);
|
|
33
|
+
const defaultValue = react_context_selector_1.useContextSelector(RadioGroupContext_1.RadioGroupContext, ctx => ctx.defaultValue);
|
|
34
|
+
const disabledGroup = react_context_selector_1.useContextSelector(RadioGroupContext_1.RadioGroupContext, ctx => ctx.disabled);
|
|
35
|
+
const layout = react_context_selector_1.useContextSelector(RadioGroupContext_1.RadioGroupContext, ctx => ctx.layout);
|
|
36
|
+
const requiredGroup = react_context_selector_1.useContextSelector(RadioGroupContext_1.RadioGroupContext, ctx => ctx.required);
|
|
30
37
|
const {
|
|
31
|
-
name =
|
|
32
|
-
checked =
|
|
33
|
-
defaultChecked =
|
|
34
|
-
labelPosition =
|
|
35
|
-
disabled =
|
|
36
|
-
required
|
|
38
|
+
name = nameGroup,
|
|
39
|
+
checked = value !== undefined ? value === props.value : undefined,
|
|
40
|
+
defaultChecked = defaultValue !== undefined ? defaultValue === props.value : undefined,
|
|
41
|
+
labelPosition = layout === 'horizontalStacked' ? 'below' : 'after',
|
|
42
|
+
disabled = disabledGroup,
|
|
43
|
+
required = requiredGroup,
|
|
44
|
+
onChange
|
|
37
45
|
} = props;
|
|
38
46
|
const nativeProps = react_utilities_1.getPartitionedNativeProps({
|
|
39
47
|
props,
|
|
40
48
|
primarySlotTagName: 'input',
|
|
41
|
-
excludedPropNames: ['checked', 'defaultChecked']
|
|
49
|
+
excludedPropNames: ['checked', 'defaultChecked', 'onChange']
|
|
42
50
|
});
|
|
43
51
|
const root = react_utilities_1.resolveShorthand(props.root, {
|
|
44
52
|
required: true,
|
|
@@ -54,14 +62,17 @@ const useRadio_unstable = (props, ref) => {
|
|
|
54
62
|
checked,
|
|
55
63
|
defaultChecked,
|
|
56
64
|
disabled,
|
|
65
|
+
required,
|
|
57
66
|
...nativeProps.primary
|
|
58
67
|
}
|
|
59
68
|
});
|
|
69
|
+
input.onChange = react_utilities_1.useMergedEventCallbacks(input.onChange, ev => onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
|
|
70
|
+
value: ev.currentTarget.value
|
|
71
|
+
}));
|
|
60
72
|
const label = react_utilities_1.resolveShorthand(props.label, {
|
|
61
73
|
defaultProps: {
|
|
62
74
|
htmlFor: input.id,
|
|
63
|
-
disabled
|
|
64
|
-
required
|
|
75
|
+
disabled
|
|
65
76
|
}
|
|
66
77
|
});
|
|
67
78
|
const indicator = react_utilities_1.resolveShorthand(props.indicator, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Radio/useRadio.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;AACnG,QAAM,
|
|
1
|
+
{"version":3,"sources":["components/Radio/useRadio.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, resolveShorthand, useId, useMergedEventCallbacks } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport type { RadioProps, RadioState } from './Radio.types';\n\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */\nexport const useRadio_unstable = (props: RadioProps, ref: React.Ref<HTMLInputElement>): RadioState => {\n const nameGroup = useContextSelector(RadioGroupContext, ctx => ctx.name);\n const value = useContextSelector(RadioGroupContext, ctx => ctx.value);\n const defaultValue = useContextSelector(RadioGroupContext, ctx => ctx.defaultValue);\n const disabledGroup = useContextSelector(RadioGroupContext, ctx => ctx.disabled);\n const layout = useContextSelector(RadioGroupContext, ctx => ctx.layout);\n const requiredGroup = useContextSelector(RadioGroupContext, ctx => ctx.required);\n\n const {\n name = nameGroup,\n checked = value !== undefined ? value === props.value : undefined,\n defaultChecked = defaultValue !== undefined ? defaultValue === props.value : undefined,\n labelPosition = layout === 'horizontalStacked' ? 'below' : 'after',\n disabled = disabledGroup,\n required = requiredGroup,\n onChange,\n } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const root = resolveShorthand(props.root, {\n required: true,\n defaultProps: nativeProps.root,\n });\n\n const input = resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n ref,\n type: 'radio',\n id: useId('radio-', nativeProps.primary.id),\n name,\n checked,\n defaultChecked,\n disabled,\n required,\n ...nativeProps.primary,\n },\n });\n\n input.onChange = useMergedEventCallbacks(input.onChange, ev => onChange?.(ev, { value: ev.currentTarget.value }));\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n htmlFor: input.id,\n disabled,\n },\n });\n\n const indicator = resolveShorthand(props.indicator, {\n required: true,\n defaultProps: {\n 'aria-hidden': true,\n children: <CircleFilled />,\n },\n });\n\n return {\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n label: Label,\n indicator: 'div',\n },\n root,\n input,\n label,\n indicator,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import type { RadioState } from './Radio.types';
|
|
1
|
+
import type { RadioSlots, RadioState } from './Radio.types';
|
|
2
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `radioClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const radioClassName = "fui-Radio";
|
|
7
|
+
export declare const radioClassNames: SlotClassNames<RadioSlots>;
|
|
3
8
|
/**
|
|
4
9
|
* Apply styling to the Radio slots based on the state
|
|
5
10
|
*/
|