@fluentui/react-radio 9.0.0-beta.2 → 9.0.0-beta.5
Sign up to get free protection for your applications and to get access to all the features.
- 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": {
|