@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
|
@@ -3,17 +3,25 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useRadioStyles_unstable = exports.radioClassName = void 0;
|
|
6
|
+
exports.useRadioStyles_unstable = exports.radioClassNames = exports.radioClassName = void 0;
|
|
7
7
|
|
|
8
8
|
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
9
9
|
|
|
10
10
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
11
11
|
|
|
12
12
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
13
|
+
/**
|
|
14
|
+
* @deprecated Use `radioClassNames.root` instead.
|
|
15
|
+
*/
|
|
16
|
+
|
|
13
17
|
|
|
14
18
|
exports.radioClassName = 'fui-Radio';
|
|
15
|
-
|
|
16
|
-
|
|
19
|
+
exports.radioClassNames = {
|
|
20
|
+
root: 'fui-Radio',
|
|
21
|
+
indicator: 'fui-Radio__indicator',
|
|
22
|
+
input: 'fui-Radio__input',
|
|
23
|
+
label: 'fui-Radio__label'
|
|
24
|
+
}; // TODO replace these spacing constants with theme values once they're on the theme
|
|
17
25
|
|
|
18
26
|
const spacingHorizontalS = '8px';
|
|
19
27
|
const spacingHorizontalM = '12px'; // The indicator size is used by the indicator and label styles
|
|
@@ -40,23 +48,37 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
40
48
|
},
|
|
41
49
|
"focusIndicator": {
|
|
42
50
|
"B486eqv": "f2hkw1w",
|
|
43
|
-
"
|
|
51
|
+
"vchsgm": "fbiesyy",
|
|
52
|
+
"ozrjjd": ["fq2kn9", "f1jxwnad"],
|
|
53
|
+
"B7lelfh": "f1il7mou",
|
|
54
|
+
"Bp3tz3o": ["f1jxwnad", "fq2kn9"],
|
|
44
55
|
"B8vm7ur": "f12sql3b",
|
|
45
56
|
"f4hv8x": "f1i4q40k",
|
|
46
57
|
"Gpan81": "fcrbge9",
|
|
47
|
-
"z7afg": "ft464mn",
|
|
48
58
|
"rsjj6t": "fskqmiq",
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
59
|
+
"E86f5s": "f1kbdjx9",
|
|
60
|
+
"f5nhos": ["fw1d893", "fpuz8dn"],
|
|
61
|
+
"Bhtq6h7": "f14hlsw1",
|
|
62
|
+
"Bubk9yy": ["fpuz8dn", "fw1d893"],
|
|
63
|
+
"dzajus": "f1bkt4b4",
|
|
64
|
+
"B8gmrwi": ["f16hf5f2", "f1qhqcal"],
|
|
65
|
+
"Byq6oy9": "fyyqeim",
|
|
66
|
+
"Bdy2j38": ["f1qhqcal", "f16hf5f2"],
|
|
67
|
+
"Bi8bqab": ["f1aneyfs", "f15nmyc0"],
|
|
68
|
+
"kq6z4e": ["f15nmyc0", "f1aneyfs"],
|
|
69
|
+
"l5tc3q": ["f3cpy5b", "f13v6kgv"],
|
|
70
|
+
"d1z3ck": ["f13v6kgv", "f3cpy5b"],
|
|
71
|
+
"epcuuz": "filx0we",
|
|
72
|
+
"Ba33l6n": ["f1horip2", "fgnx9ah"],
|
|
73
|
+
"va7z1g": "fkii2tb",
|
|
74
|
+
"Bmi6mq9": ["fgnx9ah", "f1horip2"],
|
|
53
75
|
"Bjkpy09": "f1unftzx",
|
|
54
76
|
"Jxg1p8": "f8rjbh6",
|
|
55
77
|
"Bc94xmo": ["fxfgh6q", "f8l10fm"],
|
|
56
78
|
"Bj23z95": ["f8l10fm", "fxfgh6q"]
|
|
57
79
|
}
|
|
58
80
|
}, {
|
|
59
|
-
"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] .
|
|
81
|
+
"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;}"],
|
|
60
82
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
61
83
|
});
|
|
62
84
|
|
|
@@ -170,15 +192,15 @@ const useLabelStyles = /*#__PURE__*/react_1.__styles({
|
|
|
170
192
|
|
|
171
193
|
const useRadioStyles_unstable = state => {
|
|
172
194
|
const rootStyles = useRootStyles();
|
|
173
|
-
state.root.className = react_1.mergeClasses(exports.
|
|
195
|
+
state.root.className = react_1.mergeClasses(exports.radioClassNames.root, rootStyles.base, rootStyles.focusIndicator, state.labelPosition === 'below' && rootStyles.vertical, state.root.className);
|
|
174
196
|
const inputStyles = useInputStyles();
|
|
175
|
-
state.input.className = react_1.mergeClasses(inputStyles.base, state.input.className);
|
|
197
|
+
state.input.className = react_1.mergeClasses(exports.radioClassNames.input, inputStyles.base, state.input.className);
|
|
176
198
|
const indicatorStyles = useIndicatorStyles();
|
|
177
|
-
state.indicator.className = react_1.mergeClasses(
|
|
199
|
+
state.indicator.className = react_1.mergeClasses(exports.radioClassNames.indicator, indicatorStyles.base, state.indicator.className);
|
|
178
200
|
const labelStyles = useLabelStyles();
|
|
179
201
|
|
|
180
202
|
if (state.label) {
|
|
181
|
-
state.label.className = react_1.mergeClasses(
|
|
203
|
+
state.label.className = react_1.mergeClasses(exports.radioClassNames.label, labelStyles.base, state.labelPosition === 'below' && labelStyles.below, state.label.className);
|
|
182
204
|
}
|
|
183
205
|
};
|
|
184
206
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;
|
|
1
|
+
{"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `radioClassNames.root` instead.\n */\nexport const radioClassName = 'fui-Radio';\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label',\n};\n\n// TODO replace these spacing constants with theme values once they're on the theme\nconst spacingHorizontalS = '8px';\nconst spacingHorizontalM = '12px';\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n columnGap: spacingHorizontalM,\n ...shorthands.padding(spacingHorizontalS),\n },\n\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\n rowGap: spacingHorizontalM,\n },\n\n focusIndicator: createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputStyles = makeStyles({\n base: {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n ...shorthands.margin(0),\n opacity: 0,\n\n ':enabled': {\n cursor: 'pointer',\n },\n\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n opacity: '0',\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n width: indicatorSize,\n height: indicatorSize,\n fontSize: '12px',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n\n ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n userSelect: 'none',\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n ...shorthands.margin(`calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`, 0),\n },\n\n below: {\n textAlign: 'center',\n },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootStyles.base,\n rootStyles.focusIndicator,\n state.labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(radioClassNames.input, inputStyles.base, state.input.className);\n\n const indicatorStyles = useIndicatorStyles();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n radioClassNames.label,\n labelStyles.base,\n state.labelPosition === 'below' && labelStyles.below,\n state.label.className,\n );\n }\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -12,6 +12,8 @@ const renderRadioGroup_1 = /*#__PURE__*/require("./renderRadioGroup");
|
|
|
12
12
|
const useRadioGroup_1 = /*#__PURE__*/require("./useRadioGroup");
|
|
13
13
|
|
|
14
14
|
const useRadioGroupStyles_1 = /*#__PURE__*/require("./useRadioGroupStyles");
|
|
15
|
+
|
|
16
|
+
const useRadioGroupContextValues_1 = /*#__PURE__*/require("../../contexts/useRadioGroupContextValues");
|
|
15
17
|
/**
|
|
16
18
|
* A RadioGroup component presents a set of options where only one option can be selected.
|
|
17
19
|
*/
|
|
@@ -19,8 +21,9 @@ const useRadioGroupStyles_1 = /*#__PURE__*/require("./useRadioGroupStyles");
|
|
|
19
21
|
|
|
20
22
|
exports.RadioGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
21
23
|
const state = useRadioGroup_1.useRadioGroup_unstable(props, ref);
|
|
24
|
+
const contextValues = useRadioGroupContextValues_1.useRadioGroupContextValues(state);
|
|
22
25
|
useRadioGroupStyles_1.useRadioGroupStyles_unstable(state);
|
|
23
|
-
return renderRadioGroup_1.renderRadioGroup_unstable(state);
|
|
26
|
+
return renderRadioGroup_1.renderRadioGroup_unstable(state, contextValues);
|
|
24
27
|
});
|
|
25
28
|
exports.RadioGroup.displayName = 'RadioGroup';
|
|
26
29
|
//# sourceMappingURL=RadioGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,GAA9B,CAAd;AAEA,EAAA,qBAAA,CAAA,4BAAA,CAA6B,KAA7B;AACA,SAAO,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,CAAP;AACD,
|
|
1
|
+
{"version":3,"sources":["components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,4BAAA,gBAAA,OAAA,CAAA,2CAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,GAA9B,CAAd;AACA,QAAM,aAAa,GAAG,4BAAA,CAAA,0BAAA,CAA2B,KAA3B,CAAtB;AAEA,EAAA,qBAAA,CAAA,4BAAA,CAA6B,KAA7B;AACA,SAAO,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,EAAiC,aAAjC,CAAP;AACD,CAN+D,CAAnD;AAQb,OAAA,CAAA,UAAA,CAAW,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,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;
|
|
@@ -15,13 +15,13 @@ const RadioGroupContext_1 = /*#__PURE__*/require("../../contexts/RadioGroupConte
|
|
|
15
15
|
*/
|
|
16
16
|
|
|
17
17
|
|
|
18
|
-
const renderRadioGroup_unstable = state => {
|
|
18
|
+
const renderRadioGroup_unstable = (state, contextValues) => {
|
|
19
19
|
const {
|
|
20
20
|
slots,
|
|
21
21
|
slotProps
|
|
22
22
|
} = react_utilities_1.getSlots(state);
|
|
23
23
|
return React.createElement(RadioGroupContext_1.RadioGroupContext.Provider, {
|
|
24
|
-
value:
|
|
24
|
+
value: contextValues.radioGroup
|
|
25
25
|
}, React.createElement(slots.root, { ...slotProps.root
|
|
26
26
|
}));
|
|
27
27
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/RadioGroup/renderRadioGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,yBAAyB,
|
|
1
|
+
{"version":3,"sources":["components/RadioGroup/renderRadioGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,yBAAyB,GAAG,CAAC,KAAD,EAAyB,aAAzB,KAAmE;AAC1G,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,mBAAA,CAAA,iBAAA,CAAkB,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;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","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/"}
|
|
@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useRadioGroup_unstable = void 0;
|
|
7
7
|
|
|
8
|
-
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
9
|
/**
|
|
12
10
|
* Create the state required to render RadioGroup.
|
|
@@ -27,17 +25,16 @@ const useRadioGroup_unstable = (props, ref) => {
|
|
|
27
25
|
defaultValue,
|
|
28
26
|
disabled,
|
|
29
27
|
layout = 'vertical',
|
|
30
|
-
onChange
|
|
28
|
+
onChange,
|
|
29
|
+
required
|
|
31
30
|
} = props;
|
|
32
31
|
return {
|
|
33
32
|
layout,
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
layout
|
|
40
|
-
}), [name, layout, value, defaultValue, disabled]),
|
|
33
|
+
name,
|
|
34
|
+
value,
|
|
35
|
+
defaultValue,
|
|
36
|
+
disabled,
|
|
37
|
+
required,
|
|
41
38
|
components: {
|
|
42
39
|
root: 'div'
|
|
43
40
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/RadioGroup/useRadioGroup.ts"],"names":[],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"sources":["components/RadioGroup/useRadioGroup.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAA4E;AAChH,QAAM,aAAa,GAAG,iBAAA,CAAA,KAAA,CAAM,aAAN,CAAtB;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,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,KAA7B;AAAoC;AAAuB,OAAC,UAAD,EAAa,MAAb,CAA3D,CAHC;AAIJ,MAAA,QAAQ,EAAE,iBAAA,CAAA,gBAAA,CAAiB,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,OAJS;AAJN;AAVD,GAAP;AAqBD,CA1BM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","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
|
*/
|
|
@@ -3,11 +3,18 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useRadioGroupStyles_unstable = exports.radioGroupClassName = void 0;
|
|
6
|
+
exports.useRadioGroupStyles_unstable = exports.radioGroupClassNames = exports.radioGroupClassName = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
|
+
/**
|
|
10
|
+
* @deprecated Use `radioGroupClassNames.root` instead.
|
|
11
|
+
*/
|
|
12
|
+
|
|
9
13
|
|
|
10
14
|
exports.radioGroupClassName = 'fui-RadioGroup';
|
|
15
|
+
exports.radioGroupClassNames = {
|
|
16
|
+
root: 'fui-RadioGroup'
|
|
17
|
+
};
|
|
11
18
|
|
|
12
19
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
13
20
|
"root": {
|
|
@@ -27,7 +34,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
27
34
|
|
|
28
35
|
const useRadioGroupStyles_unstable = state => {
|
|
29
36
|
const styles = useStyles();
|
|
30
|
-
state.root.className = react_1.mergeClasses(exports.
|
|
37
|
+
state.root.className = react_1.mergeClasses(exports.radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);
|
|
31
38
|
};
|
|
32
39
|
|
|
33
40
|
exports.useRadioGroupStyles_unstable = useRadioGroupStyles_unstable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/RadioGroup/useRadioGroupStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;
|
|
1
|
+
{"version":3,"sources":["components/RadioGroup/useRadioGroupStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,mBAAA,GAAsB,gBAAtB;AACA,OAAA,CAAA,oBAAA,GAAwD;AACnE,EAAA,IAAI,EAAE;AAD6D,CAAxD;;AAIb,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA2B;AACrE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,oBAAA,CAAqB,IADA,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,MAAN,KAAiB,UAAjB,IAA+B,MAAM,CAAC,QAHjB,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;AAMD,CARM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `radioGroupClassNames.root` instead.\n */\nexport const radioGroupClassName = 'fui-RadioGroup';\nexport const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {\n root: 'fui-RadioGroup',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = (state: RadioGroupState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n radioGroupClassNames.root,\n styles.root,\n state.layout === 'vertical' && styles.vertical,\n state.root.className,\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -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>;
|
|
@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.RadioGroupContext = void 0;
|
|
7
7
|
|
|
8
|
-
const
|
|
8
|
+
const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
|
|
9
9
|
/**
|
|
10
10
|
* RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
exports.RadioGroupContext = /*#__PURE__*/
|
|
14
|
+
exports.RadioGroupContext = /*#__PURE__*/react_context_selector_1.createContext({});
|
|
15
15
|
//# sourceMappingURL=RadioGroupContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["contexts/RadioGroupContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,
|
|
1
|
+
{"version":3,"sources":["contexts/RadioGroupContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,iBAAA,gBAAqD,wBAAA,CAAA,aAAA,CAAc,EAAd,CAArD","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,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useRadioGroupContextValues = void 0;
|
|
7
|
+
|
|
8
|
+
const useRadioGroupContextValues = state => {
|
|
9
|
+
const {
|
|
10
|
+
name,
|
|
11
|
+
value,
|
|
12
|
+
defaultValue,
|
|
13
|
+
disabled,
|
|
14
|
+
layout,
|
|
15
|
+
required
|
|
16
|
+
} = state;
|
|
17
|
+
const radioGroup = {
|
|
18
|
+
name,
|
|
19
|
+
value,
|
|
20
|
+
defaultValue,
|
|
21
|
+
disabled,
|
|
22
|
+
layout,
|
|
23
|
+
required
|
|
24
|
+
};
|
|
25
|
+
return {
|
|
26
|
+
radioGroup
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
exports.useRadioGroupContextValues = useRadioGroupContextValues;
|
|
31
|
+
//# sourceMappingURL=useRadioGroupContextValues.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["contexts/useRadioGroupContextValues.ts"],"names":[],"mappings":";;;;;;;AAEO,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;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","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-commonjs/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-commonjs/index.js
CHANGED
|
@@ -3,12 +3,96 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
exports.RadioGroupContext = exports.useRadio_unstable = exports.useRadioStyles_unstable = exports.renderRadio_unstable = exports.radioClassNames = exports.radioClassName = exports.Radio = exports.useRadioGroup_unstable = exports.useRadioGroupStyles_unstable = exports.renderRadioGroup_unstable = exports.radioGroupClassNames = exports.radioGroupClassName = exports.RadioGroup = void 0;
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
var RadioGroup_1 = /*#__PURE__*/require("./RadioGroup");
|
|
8
9
|
|
|
9
|
-
|
|
10
|
+
Object.defineProperty(exports, "RadioGroup", {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () {
|
|
13
|
+
return RadioGroup_1.RadioGroup;
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
/* eslint-disable-next-line deprecation/deprecation */
|
|
10
17
|
|
|
11
|
-
|
|
18
|
+
Object.defineProperty(exports, "radioGroupClassName", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function () {
|
|
21
|
+
return RadioGroup_1.radioGroupClassName;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
Object.defineProperty(exports, "radioGroupClassNames", {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function () {
|
|
27
|
+
return RadioGroup_1.radioGroupClassNames;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
Object.defineProperty(exports, "renderRadioGroup_unstable", {
|
|
31
|
+
enumerable: true,
|
|
32
|
+
get: function () {
|
|
33
|
+
return RadioGroup_1.renderRadioGroup_unstable;
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
Object.defineProperty(exports, "useRadioGroupStyles_unstable", {
|
|
37
|
+
enumerable: true,
|
|
38
|
+
get: function () {
|
|
39
|
+
return RadioGroup_1.useRadioGroupStyles_unstable;
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
Object.defineProperty(exports, "useRadioGroup_unstable", {
|
|
43
|
+
enumerable: true,
|
|
44
|
+
get: function () {
|
|
45
|
+
return RadioGroup_1.useRadioGroup_unstable;
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
var Radio_1 = /*#__PURE__*/require("./Radio");
|
|
50
|
+
|
|
51
|
+
Object.defineProperty(exports, "Radio", {
|
|
52
|
+
enumerable: true,
|
|
53
|
+
get: function () {
|
|
54
|
+
return Radio_1.Radio;
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
/* eslint-disable-next-line deprecation/deprecation */
|
|
12
58
|
|
|
13
|
-
|
|
59
|
+
Object.defineProperty(exports, "radioClassName", {
|
|
60
|
+
enumerable: true,
|
|
61
|
+
get: function () {
|
|
62
|
+
return Radio_1.radioClassName;
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
Object.defineProperty(exports, "radioClassNames", {
|
|
66
|
+
enumerable: true,
|
|
67
|
+
get: function () {
|
|
68
|
+
return Radio_1.radioClassNames;
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
Object.defineProperty(exports, "renderRadio_unstable", {
|
|
72
|
+
enumerable: true,
|
|
73
|
+
get: function () {
|
|
74
|
+
return Radio_1.renderRadio_unstable;
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
Object.defineProperty(exports, "useRadioStyles_unstable", {
|
|
78
|
+
enumerable: true,
|
|
79
|
+
get: function () {
|
|
80
|
+
return Radio_1.useRadioStyles_unstable;
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
Object.defineProperty(exports, "useRadio_unstable", {
|
|
84
|
+
enumerable: true,
|
|
85
|
+
get: function () {
|
|
86
|
+
return Radio_1.useRadio_unstable;
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
var RadioGroupContext_1 = /*#__PURE__*/require("./contexts/RadioGroupContext");
|
|
91
|
+
|
|
92
|
+
Object.defineProperty(exports, "RadioGroupContext", {
|
|
93
|
+
enumerable: true,
|
|
94
|
+
get: function () {
|
|
95
|
+
return RadioGroupContext_1.RadioGroupContext;
|
|
96
|
+
}
|
|
97
|
+
});
|
|
14
98
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,YAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,UAAA;AAAU;AAAV,CAAA;AACA;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,mBAAA;AAAmB;AAAnB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,yBAAA;AAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,8BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,4BAAA;AAA4B;AAA5B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,sBAAA;AAAsB;AAAtB,CAAA;;AAUF,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,KAAA;AAAK;AAAL,CAAA;AACA;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,cAAA;AAAc;AAAd,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,iBAAA;AAAiB;AAAjB,CAAA;;AAGF,IAAA,mBAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,mBAAA,CAAA,iBAAA;AAAiB;AAAjB,CAAA","sourcesContent":["export {\n RadioGroup,\n /* eslint-disable-next-line deprecation/deprecation */\n radioGroupClassName,\n radioGroupClassNames,\n renderRadioGroup_unstable,\n useRadioGroupStyles_unstable,\n useRadioGroup_unstable,\n} from './RadioGroup';\nexport type {\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/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-radio",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.5",
|
|
4
4
|
"description": "Fluent UI Radio component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"scripts": {
|
|
15
15
|
"build": "just-scripts build",
|
|
16
|
+
"bundle-size": "bundle-size measure",
|
|
16
17
|
"clean": "just-scripts clean",
|
|
17
18
|
"code-style": "just-scripts code-style",
|
|
18
19
|
"just": "just-scripts",
|
|
@@ -27,26 +28,16 @@
|
|
|
27
28
|
"devDependencies": {
|
|
28
29
|
"@fluentui/eslint-plugin": "*",
|
|
29
30
|
"@fluentui/react-conformance": "*",
|
|
30
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
31
|
-
"@fluentui/scripts": "^1.0.0",
|
|
32
|
-
"@types/enzyme": "3.10.3",
|
|
33
|
-
"@types/enzyme-adapter-react-16": "1.0.3",
|
|
34
|
-
"@types/react": "16.9.42",
|
|
35
|
-
"@types/react-dom": "16.9.10",
|
|
36
|
-
"@types/react-test-renderer": "^16.0.0",
|
|
37
|
-
"enzyme": "~3.10.0",
|
|
38
|
-
"enzyme-adapter-react-16": "^1.15.0",
|
|
39
|
-
"react": "16.8.6",
|
|
40
|
-
"react-dom": "16.8.6",
|
|
41
|
-
"react-test-renderer": "^16.3.0"
|
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.4"
|
|
42
32
|
},
|
|
43
33
|
"dependencies": {
|
|
44
|
-
"@fluentui/react-
|
|
45
|
-
"@fluentui/react-
|
|
46
|
-
"@fluentui/react-
|
|
47
|
-
"@fluentui/react-
|
|
48
|
-
"@fluentui/react-
|
|
49
|
-
"@
|
|
34
|
+
"@fluentui/react-context-selector": "9.0.0-rc.7",
|
|
35
|
+
"@fluentui/react-icons": "^2.0.166-rc.3",
|
|
36
|
+
"@fluentui/react-label": "9.0.0-beta.11",
|
|
37
|
+
"@fluentui/react-tabster": "9.0.0-rc.8",
|
|
38
|
+
"@fluentui/react-theme": "9.0.0-rc.6",
|
|
39
|
+
"@fluentui/react-utilities": "9.0.0-rc.7",
|
|
40
|
+
"@griffel/react": "1.0.3",
|
|
50
41
|
"tslib": "^2.1.0"
|
|
51
42
|
},
|
|
52
43
|
"peerDependencies": {
|